feat(ui): show the session title in the header bar#14
Closed
pascalandr wants to merge 19 commits into
Closed
Conversation
Render the current session title in the instance header for both compact and regular layouts, while keeping the existing status indicators and command controls in place.
Display the active session title next to the new-tab control, and only when the left session drawer is closed so the title adds context without competing with the sidebar.
Show the active session title in the session header when the left sidebar is not pinned so the tab strip stays focused on workspace tabs. The header slot reserves the sidebar width and reuses existing session title styling to avoid layout jumps while preserving the compact/mobile toolbar controls. Validated with git diff --cached --check, npm run typecheck --workspace @codenomad/ui, and npm run build --workspace @codenomad/ui.
Subtract the Material toolbar inset from the reserved header title slot so the active session title ends at the same edge as the floating session sidebar. This prevents the title background from peeking out beside the open drawer while keeping the closed-drawer menu button and title aligned with the sidebar width. Validated with npm run typecheck --workspace @codenomad/ui and npm run build --workspace @codenomad/ui.
Keep the floating-sidebar reopen control available even when the active session title is absent, so info and empty states do not strand the user after closing the drawer. Render the header session title as a quiet two-line text treatment with subtle vertical separators instead of reusing the active session item highlight. This preserves the drawer-width alignment while reducing visual weight in the toolbar. Validated with git diff --check, npm run typecheck --workspace @codenomad/ui, npm run build --workspace @codenomad/ui, and a rebuilt raw Tauri executable for visual review.
Keep the header left slot mounted while the unpinned session drawer is open so toolbar controls remain offset from the floating panel instead of sliding underneath it. The slot now acts as an empty spacer in the floating-open state, while the reopen button and quiet two-line session title remain limited to the floating-closed state. Validated with git diff --check and npm run typecheck --workspace @codenomad/ui.
Keep the quiet header session title mounted in the left slot for all unpinned drawer states, so opening the floating sidebar covers the title instead of pushing it to the right. The reopen control is still limited to the closed state, while the slot width remains reserved when the floating drawer is open to keep toolbar controls out from under the overlay. Validated with git diff --check and npm run typecheck --workspace @codenomad/ui.
# Conflicts: # packages/ui/src/App.tsx
Push the PR 340 mobile header follow-up by suppressing the active session title in compact header layouts while preserving the wider-layout header behavior already established on this branch. The implementation stays local to instance-shell2 so phone and compact widths no longer produce the awkward three-line header stack, while desktop and other wider layouts continue showing the active session title in the left header slot. Include the task evidence summary plus the recorded UI typecheck and build logs used for validation.
Fix the current upstream/dev baseline type mismatches exposed during the integrated PR batch validation. Align the session SDK imports with the v2 surface and narrow the git status workspace payload typing so the merged batch typechecks cleanly without changing feature behavior.
|
| Filename | Overview |
|---|---|
| packages/ui/src/components/instance/instance-shell2.tsx | Adds session-title display in the header left slot; extracts renderPreviewToggleButton and renderHeaderLeftSlot helpers; memos guard desktop-only / unpinned-only visibility. File now ~1 301 lines (exceeds AGENTS.md 800-line limit). |
| packages/ui/src/components/message-section.tsx | Replaces useScrollCache with inline persistMessageScrollSnapshot logic using VirtualFollowScrollSnapshot; adds sessionStreamingActive prop; fixes registerScrollToBottom cleanup; ~1 749 lines total. |
| packages/ui/src/components/virtual-follow-behavior.ts | New 307-line state-machine module for scroll follow/hold/escape modes; fully covered by accompanying test file; clean separation from DOM concerns. |
| packages/ui/src/components/virtual-follow-list.tsx | Large refactor: replaces ad-hoc follow-mode signals with VirtualScrollController; adds captureScrollSnapshot/restoreScrollSnapshot API; removes loading prop in favour of streamingActive; removes getKeyFromAnchorId requirement. |
| packages/ui/src/lib/message-timing.ts | New utility for message/part duration extraction and clock formatting; uses Intl.NumberFormat for locale-aware digit rendering; covered by message-timing.test.ts. |
| packages/ui/src/components/session/session-view.tsx | Adds pendingSubmitBottomScrollTargetCount to guarantee scroll-to-bottom after a message is submitted; registers registerScrollToBottom null-cleanup; passes sessionStreamingActive to MessageSection. |
| packages/ui/src/styles/panels/session-layout.css | Adds .session-header-left-slot, .session-header-active-title, and .session-header-active-title-text; uses -webkit-line-clamp for two-line truncation and color-mix for a muted separator border. |
| packages/ui/src/types/session.ts | SDK import updated to @opencode-ai/sdk/v2; Session Omit extended to exclude slug and model; createClientSession uses the locally-aliased SDKSession type. |
Flowchart
%%{init: {'theme': 'neutral'}}%%
flowchart TD
A[Render Header Left Slot] --> B{showHeaderLeftSlot\n= !leftPinned}
B -- false\npinned drawer --> Z[No slot rendered\nDrawer always visible]
B -- true\nunpinned drawer --> C[Render .session-header-left-slot\nwith computed width]
C --> D{leftDrawerState}
D -- floating-closed --> E[Show toggle\nIconButton]
D -- floating-open --> F[Empty spacer\nfixed sidebar width\nprevents layout shift]
E --> G{showHeaderSessionTitle\n= !compactLayout AND\nnot phone AND title exists}
G -- true\ndesktop unpinned --> H[Render .session-header-active-title\n2-line clamped session name]
G -- false\ncompact or phone --> I[Toggle button only]
F --> J[No content\ndrawer overlay covers this slot]
style H fill:#4a9eff,color:#fff
style Z fill:#888,color:#fff
style J fill:#888,color:#fff
Reviews (3): Last reviewed commit: "Merge branch 'dev' into fix/show-session..." | Re-trigger Greptile
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
|
PR builds are available as GitHub Actions artifacts: https://github.com/Pagecran/CodeNomad/actions/runs/27058582291 Artifacts expire in 7 days.
|
Restore the web preview toggle in the compact tablet header while preserving the existing phone-only fullscreen grouping and desktop header behavior. The shared render helper keeps the preview control consistent across compact and desktop header variants. Validation: npm run typecheck --workspace packages/ui.
|
PR builds are available as GitHub Actions artifacts: https://github.com/Pagecran/CodeNomad/actions/runs/27059153771 Artifacts expire in 7 days.
|
Remove internal task evidence files from the public PR branch while preserving the session-title and mobile header layout fixes. Validation is handled by checking the PR diff after push to ensure evidences/069-fix-pr340-mobile-header-layout is absent.
|
PR builds are available as GitHub Actions artifacts: https://github.com/Pagecran/CodeNomad/actions/runs/27073500847 Artifacts expire in 7 days. |
|
PR builds are available as GitHub Actions artifacts: https://github.com/Pagecran/CodeNomad/actions/runs/27073521414 Artifacts expire in 7 days.
|
|
PR builds are available as GitHub Actions artifacts: https://github.com/Pagecran/CodeNomad/actions/runs/27073659085 Artifacts expire in 7 days.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes NeuralNomadsAI#299
Summary
Validation
git diff --checknpm run typecheck --workspace @codenomad/uinpm run build --workspace @codenomad/uiFork-local note
This PR is opened in the Pagecran fork to test Greptile review on the existing upstream PR NeuralNomadsAI#340 changes.
Source upstream PR: NeuralNomadsAI#340