diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2369b834..fd8267c4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,15 @@ All notable changes to this project will be documented in this file.
 
 ## [Unreleased]
 
+- **Chat scrolling rebuilt around your message.** Sending a message now parks it near the top of the view and the reply streams into the space below it, so you read from where you asked instead of chasing the bottom. While a reply streams, text arrives a paragraph at a time (code blocks line by line) with a soft fade, and the view glides after it in one continuous motion instead of snapping per line. Scrolling up during a stream immediately hands you the wheel — nothing yanks the view back — and the scroll-to-bottom pill appears on the left, carrying the model's working status while you're away from the live edge. Sending from anywhere mid-conversation jumps you straight to your new message.
+- Chat: a new "Follow new content while streaming" checkbox (Settings → Chat → Streaming, on by default) turns the automatic following off entirely — your message still parks at the top on send, but the view never moves on its own afterwards.
+- Chat: streamed code blocks are now syntax-highlighted while they stream, and finished messages no longer jump when a code block's line numbers fill in at the end of a reply.
+- Chat: finished replies no longer flicker — tool cards stopped re-rendering (and replaying their reveal animation) when they completed, and resizing the window no longer throws the conversation up and down while you're at the bottom.
+- Chat: clicking the last item in the prompt rail now always lands on it, and rail jumps teleport instead of a long smooth scroll that could stop halfway.
+- Chat: opening a session goes straight to the newest message with no scroll animation, and the first uncached open fades the conversation in instead of popping.
+- Mobile: scrolling during a streaming reply works again — a drag immediately takes over, the scroll-to-bottom pill shows up, and the load-older button no longer throws you to the bottom of the chat.
+- UI: the chat's top and bottom scroll fades are back.
+- Fixed file links in messages being checked twice against the filesystem, and against the wrong project directory on the first pass.
 - Work status: the session cost now counts what its subagents spent, with a line under the context meter splitting the session's own cost from the subagents' share, and each subagent's cost shown next to it in the Subagents list. Previously a session that delegated most of its work looked far cheaper than it was.
 - **Chat context attachments:** everything you attach to a message — diff/file/plan comments, terminal selections, browser annotations, PR comments and failed checks, linked issues and PRs — now shows up in the conversation as a compact context card: a header naming the source, the captured content behind an expander, and your comment below it. Previously most of these arrived as a wall of raw text inside your message.
 - **Chat: comment on a reply.** Select text in a chat message and choose Comment to attach that quote with your note to the next message. The selection stays highlighted while you type, and the selection menu itself was restyled — Add to chat is now Add to input.
@@ -11,6 +20,14 @@ All notable changes to this project will be documented in this file.
 - Files: in a rendered markdown preview, select text and choose Comment to attach exactly that fragment (with a source line range when it can be located) plus your note to the next message.
 - Composer: hovering or tapping a context chip above the input opens a stacked preview of everything attached, where a comment can be edited in place or an item removed before sending.
 - Mobile: the chat comment input overlays the composer exactly and rides the keyboard; Enter makes a new line there, with attach on the button.
+- **Terminal:** terminals no longer vanish or die behind your back. Opening the app in another browser tab, on another device, or after a reload now shows the terminals already running on the server instead of an empty list, and terminals sitting in background tabs are no longer closed by the server's idle cleanup while the app is open.
+- Chat: @ file mentions now rank files and directories together by how well they match, so the file you typed is at the top instead of below unrelated directories. Multi-word queries match in any order, and long paths keep the folder next to the file name visible so identical-looking index.md rows are distinguishable.
+- Search: Ctrl/Cmd+P now matches the whole file path, not just the file name — searching a folder name like "solo-is-a" finds the file inside it.
+- **Session tabs (opt-in):** the web/desktop header can show your open sessions as browser-style tabs — turn them on in Settings → General → Navigation → Session tabs. Every session you open joins the strip, clicking a tab switches the whole workspace (chat, project, panels), and closing one (its × button, middle-click, or Alt+W — rebindable in Shortcuts) never touches the session itself. Tabs reorder by drag, scroll behind the header buttons when there are many and carry the sidebar's running/unread dot. Each tab has the full session menu — on the "..." button or right-click — plus Close other tabs; renaming works right in the tab.
+- Files: the editor toolbar is now always docked under the file tabs; the floating hover toolbar and its setting were removed.
+- **Search in dropdowns:** every searchable picker — branches, projects, agents, models, providers, stashes, SSH hosts, skills, archived sessions — now uses one matcher: best matches come first, multi-word queries match in any order, and punctuation doesn't matter (so "gpt4o" finds "gpt-4o"). The git branch and gitmoji pickers also stopped silently dropping rows that a second, built-in filter didn't like. Sidebar session search and the Todos/Memory/Plans/Notes filters match the same way now.
+- Terminal: mobile keyboards no longer capitalize the first letter of every command on iOS and Android.
+- Mobile: narrowing a browser window past phone size now switches into the mobile app layout (and back when widened) instead of squeezing the desktop layout. The old/new mobile layout setting is gone — phones always get the mobile layout.
 - Desktop: a freshly installed or updated build no longer keeps loading the previous version's interface from cache.
 - Chat: OpenCode notices now share one style.
 - UI: draft target menus stay inside the chat area instead of overlapping the header.
diff --git a/bun.lock b/bun.lock
index 2b7a26c2..a868cdf8 100644
--- a/bun.lock
+++ b/bun.lock
@@ -97,7 +97,7 @@
     },
     "packages/electron": {
       "name": "@openchamber/electron",
-      "version": "1.19.0",
+      "version": "1.20.0",
       "dependencies": {
         "@openchamber/web": "workspace:*",
         "electron-context-menu": "^4.1.2",
@@ -134,7 +134,7 @@
     },
     "packages/ui": {
       "name": "@openchamber/ui",
-      "version": "1.19.0",
+      "version": "1.20.0",
       "dependencies": {
         "@aparajita/capacitor-secure-storage": "^8.0.0",
         "@base-ui/react": "^1.4.0",
@@ -167,6 +167,7 @@
         "@dnd-kit/core": "^6.3.1",
         "@dnd-kit/sortable": "^10.0.0",
         "@dnd-kit/utilities": "^3.2.2",
+        "@legendapp/list": "3.3.8",
         "@lezer/highlight": "^1.2.3",
         "@opencode-ai/sdk": "1.18.21",
         "@pierre/diffs": "1.3.0-beta.6",
@@ -238,7 +239,7 @@
     },
     "packages/vscode": {
       "name": "openchamber",
-      "version": "1.19.0",
+      "version": "1.20.0",
       "dependencies": {
         "@openchamber/ui": "workspace:*",
         "@opencode-ai/sdk": "1.18.21",
@@ -261,7 +262,7 @@
     },
     "packages/web": {
       "name": "@openchamber/web",
-      "version": "1.19.0",
+      "version": "1.20.0",
       "bin": {
         "openchamber": "./bin/cli.js",
       },
@@ -917,6 +918,8 @@
 
     "@kwsites/promise-deferred": ["@kwsites/promise-deferred@1.1.1", "", {}, "sha512-GaHYm+c0O9MjZRu0ongGBRbinu8gVAMd2UZjji6jVmqKtZluZnptXGWhz1E8j8D2HJ3f/yMxKAUC0b+57wncIw=="],
 
+    "@legendapp/list": ["@legendapp/list@3.3.8", "", { "dependencies": { "use-sync-external-store": "^1.5.0" }, "peerDependencies": { "react": "*", "react-dom": "*", "react-native": "*" }, "optionalPeers": ["react-dom", "react-native"] }, "sha512-GM4Hca/6WDvcY33XXCieR9MaG9CoZmACzwqQwRhKFSaNKfQV1lTLiTOpWuA9wnE8n8+6WeA52DwNKC9yrnPPeg=="],
+
     "@levischuck/tiny-cbor": ["@levischuck/tiny-cbor@0.2.11", "", {}, "sha512-llBRm4dT4Z89aRsm6u2oEZ8tfwL/2l6BwpZ7JcyieouniDECM5AqNgr/y08zalEIvW3RSK4upYyybDcmjXqAow=="],
 
     "@lezer/common": ["@lezer/common@1.5.1", "", {}, "sha512-6YRVG9vBkaY7p1IVxL4s44n5nUnaNnGM2/AckNgYOnxTG2kWh1vR8BMxPseWPjRNpb5VtXnMpeYAEAADoRV1Iw=="],
diff --git a/packages/electron/scripts/electron-dev.mjs b/packages/electron/scripts/electron-dev.mjs
index a4ee60e4..c8ef57a6 100644
--- a/packages/electron/scripts/electron-dev.mjs
+++ b/packages/electron/scripts/electron-dev.mjs
@@ -220,7 +220,7 @@ async function main() {
     });
   }
 
-  const electron = spawnProcess('npx', ['electron', './main.mjs'], {
+  const electron = spawnProcess('bun', ['x', 'electron', './main.mjs'], {
     cwd: electronDir,
     env: {
       ...process.env,
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 14eaf104..3de6de14 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -43,6 +43,7 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
+    "@legendapp/list": "3.3.8",
     "@lezer/highlight": "^1.2.3",
     "@opencode-ai/sdk": "1.18.21",
     "@pierre/diffs": "1.3.0-beta.6",
diff --git a/packages/ui/src/App.tsx b/packages/ui/src/App.tsx
index 5c9e8806..f213c11f 100644
--- a/packages/ui/src/App.tsx
+++ b/packages/ui/src/App.tsx
@@ -626,7 +626,6 @@ function App({ apis }: AppProps) {
       const directory = typeof detail?.directory === 'string' && detail.directory.trim().length > 0
         ? detail.directory.trim()
         : null;
-      useUIStore.getState().setActiveMainTab('chat');
       void useSessionUIStore.getState().setCurrentSession(sessionId, directory);
     };
 
@@ -675,7 +674,6 @@ function App({ apis }: AppProps) {
         ? detail.projectId.trim()
         : null;
       const hasProjectTarget = Boolean(directory || projectId);
-      useUIStore.getState().setActiveMainTab('chat');
       useUIStore.getState().setSessionSwitcherOpen(false);
       useSessionUIStore.getState().openNewSessionDraft({
         target: hasProjectTarget ? 'project' : 'chat',
diff --git a/packages/ui/src/apps/MobileSessionsSheet.tsx b/packages/ui/src/apps/MobileSessionsSheet.tsx
index 43a28f32..a64d94f0 100644
--- a/packages/ui/src/apps/MobileSessionsSheet.tsx
+++ b/packages/ui/src/apps/MobileSessionsSheet.tsx
@@ -43,6 +43,7 @@ import { useThemeSystem } from '@/contexts/useThemeSystem';
 import { getProjectLabel, normalizePath } from './mobilePaths';
 import { useRuntimeAPIs } from '@/hooks/useRuntimeAPIs';
 import { useI18n } from '@/lib/i18n';
+import { matchesRankQuery, rankByQuery } from '@/lib/search/fuzzySearch';
 import { PROJECT_COLOR_MAP, PROJECT_ICON_MAP, ProjectIconImage } from '@/lib/projectMeta';
 import { cn } from '@/lib/utils';
 import {
@@ -188,11 +189,8 @@ const findExactProjectMatch = (projects: ProjectMeta[], directory: string): Proj
   return projects.find((project) => projectMatchesExactDirectory(project, normalizedDirectory)) ?? null;
 };
 
-const sessionMatchesQuery = (session: Session, projectLabel: string, query: string): boolean => {
-  if (!query) return true;
-  const haystack = `${session.title ?? ''} ${session.id} ${getSessionDirectory(session)} ${projectLabel}`.toLowerCase();
-  return haystack.includes(query);
-};
+const sessionMatchesQuery = (session: Session, projectLabel: string, query: string): boolean =>
+  matchesRankQuery([session.title, session.id, getSessionDirectory(session), projectLabel], query);
 
 const MobileProjectIcon: React.FC<{
   project: Pick<ProjectMeta, 'id' | 'icon' | 'color' | 'iconImage' | 'iconBackground'>;
@@ -1355,7 +1353,7 @@ export const MobileSessionsSheet: React.FC<MobileSessionsSheetProps> = ({ open,
   const filteredNodes = React.useMemo(() => {
     if (!normalizedQuery) return projectNodes;
     return projectNodes.filter((node) => {
-      if (`${node.project.label} ${node.project.path}`.toLowerCase().includes(normalizedQuery)) return true;
+      if (matchesRankQuery([node.project.label, node.project.path], normalizedQuery)) return true;
       return node.buckets.some((bucket) =>
         bucket.sessions.some((session) => sessionMatchesQuery(session, node.project.label, normalizedQuery)),
       );
@@ -1385,8 +1383,7 @@ export const MobileSessionsSheet: React.FC<MobileSessionsSheetProps> = ({ open,
 
   const searchProjectMatches = React.useMemo(() => {
     if (!normalizedQuery) return [] as Array<ProjectMeta & { sessionCount: number }>;
-    return projectsMeta
-      .filter((project) => `${project.label} ${project.path}`.toLowerCase().includes(normalizedQuery))
+    return rankByQuery(projectsMeta, normalizedQuery, (project) => [project.label, project.path])
       .map((project) => ({
         ...project,
         sessionCount: sessions.filter((session) => {
diff --git a/packages/ui/src/apps/runtimeEndpointReset.ts b/packages/ui/src/apps/runtimeEndpointReset.ts
index 39c325fd..add84eb3 100644
--- a/packages/ui/src/apps/runtimeEndpointReset.ts
+++ b/packages/ui/src/apps/runtimeEndpointReset.ts
@@ -6,7 +6,6 @@ import { useProjectsStore } from '@/stores/useProjectsStore';
 import { useProjectContextStore } from '@/stores/useProjectContextStore';
 import { useGlobalSessionsStore } from '@/stores/useGlobalSessionsStore';
 import { useAutoReviewStore } from '@/stores/useAutoReviewStore';
-import { useUIStore } from '@/stores/useUIStore';
 import { usePermissionStore } from '@/stores/permissionStore';
 import { useFileSearchStore } from '@/stores/useFileSearchStore';
 import { useGitStore } from '@/stores/useGitStore';
@@ -37,7 +36,6 @@ export const reconnectAppForTransportSwitch = (): void => {
 
 export const resetAppForRuntimeEndpointChange = (detail: RuntimeEndpointChangedDetail): void => {
   useSessionUIStore.getState().prepareForRuntimeSwitch(detail.previousRuntimeKey);
-  useUIStore.getState().prepareForRuntimeSwitch(detail.previousRuntimeKey);
   if (detail.previousRuntimeKey) {
     useAutoReviewStore.getState().stopRunningRunsForRuntime(detail.previousRuntimeKey);
   }
@@ -71,7 +69,6 @@ export const resetAppForRuntimeEndpointChange = (detail: RuntimeEndpointChangedD
   useSessionFoldersStore.getState().resetForRuntimeSwitch(detail.runtimeKey);
   useFilesViewTabsStore.getState().resetForRuntimeSwitch(detail.runtimeKey);
   useSessionUIStore.getState().restoreForRuntimeSwitch(detail.runtimeKey);
-  useUIStore.getState().restoreForRuntimeSwitch(detail.runtimeKey);
   resetStreamingState();
   queueMicrotask(() => void syncDesktopSettings());
 };
diff --git a/packages/ui/src/components/chat/ChatContainer.tsx b/packages/ui/src/components/chat/ChatContainer.tsx
index a38e313a..eff5f119 100644
--- a/packages/ui/src/components/chat/ChatContainer.tsx
+++ b/packages/ui/src/components/chat/ChatContainer.tsx
@@ -18,8 +18,8 @@ import { StatusRowContainer } from './StatusRowContainer';
 import { SessionRecapNote } from '@/components/chat/SessionRecapSpacer';
 import ScrollToBottomButton from './components/ScrollToBottomButton';
 import { PromptNavigatorRail } from './components/PromptNavigatorRail';
-import { ScrollShadow } from '@/components/ui/ScrollShadow';
-import { useChatAutoFollow, type AnimationHandlers, type ContentChangeReason } from '@/hooks/useChatAutoFollow';
+import { useScrollShadow } from '@/components/ui/useScrollShadow';
+import { useChatTimelineScroll, type TimelineListHandle } from '@/hooks/useChatTimelineScroll';
 import { useChatTimelineController } from './hooks/useChatTimelineController';
 import { TimelineDialog } from './TimelineDialog';
 import { useChatTurnNavigation } from './hooks/useChatTurnNavigation';
@@ -151,11 +151,15 @@ type ChatViewportProps = {
     currentSessionKey: string;
     isDesktopExpandedInput: boolean;
     isMobile: boolean;
-    stickyUserHeader: boolean;
     directory?: string;
     scrollRef: React.RefObject<HTMLDivElement | null>;
     messageListRef: React.RefObject<MessageListHandle | null>;
-    pendingRevealWork: boolean;
+    registerList: (list: TimelineListHandle | null) => void;
+    anchorMessageId: string | null;
+    onAnchorReady: (messageId: string, anchorIndex: number) => void;
+    onAnchorSizeChanged: (messageId: string) => void;
+    onIsAtEndChange: (isAtEnd: boolean) => void;
+    onTimelineDataChange: () => void;
     renderedMessages: SessionMessageRecord[];
     isLoadingOlder: boolean;
     sessionIsWorking: boolean;
@@ -167,10 +171,11 @@ type ChatViewportProps = {
         confirmedAt?: number;
         fallbackTimestamp?: number;
     } | null;
-    handleMessageContentChange: (reason?: ContentChangeReason) => void;
-    getAnimationHandlers: (messageId: string) => AnimationHandlers;
-    handleHistoryScroll: () => void;
     scrollToBottom: () => void;
+    endPinningReleased: boolean;
+    // One-shot fade for content that replaced the hydration skeleton;
+    // cached sessions render instantly without it.
+    revealContent: boolean;
     sessionQuestions: QuestionRequest[];
     sessionPermissions: PermissionRequest[];
     isProgrammaticFollowActive: boolean;
@@ -190,21 +195,24 @@ const ChatViewport = React.memo(({
     currentSessionKey,
     isDesktopExpandedInput,
     isMobile,
-    stickyUserHeader,
     directory,
     scrollRef,
     messageListRef,
-    pendingRevealWork,
+    registerList,
+    anchorMessageId,
+    onAnchorReady,
+    onAnchorSizeChanged,
+    onIsAtEndChange,
+    onTimelineDataChange,
     renderedMessages,
     isLoadingOlder,
     sessionIsWorking,
     streamingMessageId,
     activeStreamingPhase,
     retryOverlay,
-    handleMessageContentChange,
-    getAnimationHandlers,
-    handleHistoryScroll,
     scrollToBottom,
+    endPinningReleased,
+    revealContent,
     sessionQuestions,
     sessionPermissions,
     isProgrammaticFollowActive,
@@ -315,82 +323,95 @@ const ChatViewport = React.memo(({
         scrollRef.current?.focus({ preventScroll: true });
     }, [scrollRef]);
 
+    // Everything that used to sit beside the list inside the scroll container
+    // now renders as the list's header/footer, so it keeps scrolling with the
+    // rows exactly as before.
+    const listHeader = React.useMemo(() => (
+        showLoadOlderButton ? (
+            <div className="flex justify-center pt-3 pb-1">
+                <Button
+                    variant="secondary"
+                    size="sm"
+                    onClick={onLoadOlder}
+                    disabled={isLoadingOlder}
+                >
+                    {isLoadingOlder && (
+                        <Icon name="loader-4" className="size-4 animate-spin" />
+                    )}
+                    {t('chat.history.loadOlder')}
+                </Button>
+            </div>
+        ) : null
+    ), [isLoadingOlder, onLoadOlder, showLoadOlderButton, t]);
+
+    const listFooter = React.useMemo(() => (
+        <>
+            {(sessionQuestions.length > 0 || sessionPermissions.length > 0) && (
+                <div>
+                    {sessionQuestions.map((question) => (
+                        <QuestionCard key={question.id} question={question} />
+                    ))}
+                    {sessionPermissions.map((permission) => (
+                        <PermissionCard key={permission.id} permission={permission} />
+                    ))}
+                </div>
+            )}
+
+            <SessionRecapNote sessionId={currentSessionId} directory={directory} isMobile={isMobile} />
+
+            <div className="flex-shrink-0" style={{ height: isMobile ? '40px' : '10vh' }} aria-hidden="true" />
+        </>
+    ), [currentSessionId, directory, isMobile, sessionPermissions, sessionQuestions]);
+
+    const scrollContainerProps = React.useMemo(() => ({
+        className: 'absolute inset-0 overflow-y-auto overflow-x-hidden z-0 chat-scroll overlay-scrollbar-target',
+        style: CHAT_SCROLL_STYLE,
+        tabIndex: 0,
+        onClick: focusScrollContainer,
+        'data-scrollbar': 'chat',
+        'data-scroll-shadow': 'true',
+        'data-orientation': 'vertical',
+    }), [focusScrollContainer]);
+
     return (
         <div
             className={cn(
                 'relative min-h-0',
                 isDesktopExpandedInput
                     ? 'absolute inset-0 opacity-0 pointer-events-none'
-                    : 'flex-1'
+                    : 'flex-1',
+                revealContent && !isDesktopExpandedInput && 'oc-chat-hydration-reveal',
             )}
             aria-hidden={isDesktopExpandedInput}
         >
             <div className="absolute inset-0">
-                <ScrollShadow
-                    className="absolute inset-0 overflow-y-auto overflow-x-hidden z-0 chat-scroll overlay-scrollbar-target"
-                    ref={scrollRef}
-                    style={CHAT_SCROLL_STYLE}
-                    observeMutations={false}
-                    hideTopShadow={isMobile && stickyUserHeader}
-                    tabIndex={0}
-                    onClick={focusScrollContainer}
-                    onScroll={handleHistoryScroll}
-                    data-scroll-shadow="true"
-                    data-scrollbar="chat"
-                >
-                    <div className="relative z-0 min-h-full">
-                        {showLoadOlderButton && (
-                            <div className="flex justify-center pt-3 pb-1">
-                                <Button
-                                    variant="secondary"
-                                    size="sm"
-                                    onClick={onLoadOlder}
-                                    disabled={isLoadingOlder}
-                                >
-                                    {isLoadingOlder && (
-                                        <Icon name="loader-4" className="size-4 animate-spin" />
-                                    )}
-                                    {t('chat.history.loadOlder')}
-                                </Button>
-                            </div>
-                        )}
-                        <MessageList
-                            key={currentSessionKey}
-                            ref={messageListRef}
-                            sessionKey={currentSessionId}
-                            disableStaging={pendingRevealWork}
-                            messages={renderedMessages}
-                            sessionIsWorking={sessionIsWorking}
-                            activeStreamingMessageId={streamingMessageId}
-                            activeStreamingPhase={activeStreamingPhase}
-                            retryOverlay={retryOverlay}
-                            onMessageContentChange={handleMessageContentChange}
-                            getAnimationHandlers={getAnimationHandlers}
-                            isLoadingOlder={isLoadingOlder}
-                            scrollToBottom={scrollToBottom}
-                            scrollRef={scrollRef}
-                            directory={directory}
-                        />
-                        {(sessionQuestions.length > 0 || sessionPermissions.length > 0) && (
-                            <div>
-                                {sessionQuestions.map((question) => (
-                                    <QuestionCard key={question.id} question={question} />
-                                ))}
-                                {sessionPermissions.map((permission) => (
-                                    <PermissionCard key={permission.id} permission={permission} />
-                                ))}
-                            </div>
-                        )}
-
-                        <SessionRecapNote sessionId={currentSessionId} directory={directory} isMobile={isMobile} />
-
-                        <div className="mb-3">
-                            <StatusRowContainer />
-                        </div>
-
-                        <div className="flex-shrink-0" style={{ height: isMobile ? '40px' : '10vh' }} aria-hidden="true" />
-                    </div>
-                </ScrollShadow>
+                <MessageList
+                    key={currentSessionKey}
+                    ref={messageListRef}
+                    sessionKey={currentSessionId}
+                    messages={renderedMessages}
+                    sessionIsWorking={sessionIsWorking}
+                    activeStreamingMessageId={streamingMessageId}
+                    activeStreamingPhase={activeStreamingPhase}
+                    retryOverlay={retryOverlay}
+                    isLoadingOlder={isLoadingOlder}
+                    scrollToBottom={scrollToBottom}
+                    endPinningReleased={endPinningReleased}
+                    directory={directory}
+                    registerList={registerList}
+                    anchorMessageId={anchorMessageId}
+                    onAnchorReady={onAnchorReady}
+                    onAnchorSizeChanged={onAnchorSizeChanged}
+                    // Zero end inset: the footer spacer already reserves the
+                    // zone the floating status row covers; adding its height
+                    // again produced a double-tall blank band at rest.
+                    composerOverlayHeight={0}
+                    onIsAtEndChange={onIsAtEndChange}
+                    onTimelineDataChange={onTimelineDataChange}
+                    listHeader={listHeader}
+                    listFooter={listFooter}
+                    scrollContainerProps={scrollContainerProps}
+                />
                 <OverlayScrollbar containerRef={scrollRef} suppressVisibility={isProgrammaticFollowActive} userIntentOnly observeMutations={false} />
                 {showPromptNavigator && promptTurnIds.length >= 2 ? (
                     <PromptNavigatorRail
@@ -411,21 +432,18 @@ const ChatViewport = React.memo(({
         && prev.currentSessionKey === next.currentSessionKey
         && prev.isDesktopExpandedInput === next.isDesktopExpandedInput
         && prev.isMobile === next.isMobile
-        && prev.stickyUserHeader === next.stickyUserHeader
         && prev.directory === next.directory
         && prev.scrollRef === next.scrollRef
         && prev.messageListRef === next.messageListRef
-        && prev.pendingRevealWork === next.pendingRevealWork
         && prev.renderedMessages === next.renderedMessages
         && prev.isLoadingOlder === next.isLoadingOlder
         && prev.sessionIsWorking === next.sessionIsWorking
         && prev.streamingMessageId === next.streamingMessageId
         && prev.activeStreamingPhase === next.activeStreamingPhase
         && prev.retryOverlay === next.retryOverlay
-        && prev.handleMessageContentChange === next.handleMessageContentChange
-        && prev.getAnimationHandlers === next.getAnimationHandlers
-        && prev.handleHistoryScroll === next.handleHistoryScroll
         && prev.scrollToBottom === next.scrollToBottom
+        && prev.endPinningReleased === next.endPinningReleased
+        && prev.revealContent === next.revealContent
         && prev.sessionQuestions === next.sessionQuestions
         && prev.sessionPermissions === next.sessionPermissions
         && prev.isProgrammaticFollowActive === next.isProgrammaticFollowActive
@@ -799,6 +817,10 @@ export const ChatContainer: React.FC<ChatContainerProps> = ({
         return () => setWorkStatusPanelVisible(false);
     }, [setWorkStatusPanelVisible, showWorkStatusPanel]);
     const messageListRef = React.useRef<MessageListHandle | null>(null);
+    // Session keys that showed the hydration skeleton this app run; their
+    // content gets a one-shot reveal fade once it replaces the skeleton.
+    const hydrationRevealKeyRef = React.useRef<string | null>(null);
+
     const currentSession = useSession(currentSessionId, effectiveSessionDirectory);
     const parentSession = useParentSession(currentSessionId, effectiveSessionDirectory);
 
@@ -891,23 +913,67 @@ export const ChatContainer: React.FC<ChatContainerProps> = ({
         activeTurnChangeRef.current(turnId);
     }, []);
 
+    // The composer sits below the timeline, but the status/working row floats
+    // OVER the timeline's bottom edge; its measured height keeps the live
+    // streaming line above it and reserves matching end inset in the list.
+    const [statusOverlayHeight, setStatusOverlayHeight] = React.useState(0);
+    const composerOverlayHeight = statusOverlayHeight;
+    const statusOverlayObserverRef = React.useRef<ResizeObserver | null>(null);
+    const onStatusOverlayNode = React.useCallback((node: HTMLDivElement | null) => {
+        statusOverlayObserverRef.current?.disconnect();
+        statusOverlayObserverRef.current = null;
+        if (!node || !globalThis.ResizeObserver) {
+            setStatusOverlayHeight(0);
+            return;
+        }
+        const update = () => {
+            // +8 for the mb-2 gap between the row and the composer, which the
+            // node's own box does not include.
+            const height = node.getBoundingClientRect().height + 8;
+            setStatusOverlayHeight((prev) => (Math.abs(prev - height) < 1 ? prev : height));
+        };
+        const observer = new ResizeObserver(update);
+        observer.observe(node);
+        statusOverlayObserverRef.current = observer;
+        update();
+    }, []);
+    React.useEffect(() => () => {
+        statusOverlayObserverRef.current?.disconnect();
+        statusOverlayObserverRef.current = null;
+    }, []);
+    const lastUserMessageId = React.useMemo(() => {
+        for (let index = sessionMessages.length - 1; index >= 0; index -= 1) {
+            const message = sessionMessages[index];
+            if (message.info.role === 'user') {
+                return message.info.id;
+            }
+        }
+        return null;
+    }, [sessionMessages]);
+
     const {
         scrollRef,
-        notifyContentChange: handleMessageContentChange,
-        getAnimationHandlers,
+        scrollNode,
+        registerList,
+        anchorMessageId,
+        onAnchorReady,
+        onAnchorSizeChanged,
+        onIsAtEndChange,
+        onManualNavigation,
+        onTimelineDataChange,
         goToBottom,
         scrollToBottomOnSend,
-        releaseAutoFollow,
         restoreSnapshot,
         isPinned,
         isFollowingProgrammatically,
         showScrollButton,
-    } = useChatAutoFollow({
+        userOwnsScroll,
+    } = useChatTimelineScroll({
         currentSessionId,
         currentSessionKey,
         sessionMessageCount,
-        sessionIsWorking,
-        isMobile,
+        composerOverlayHeight,
+        lastUserMessageId,
         onActiveTurnChange: handleActiveTurnChange,
     });
 
@@ -922,33 +988,49 @@ export const ChatContainer: React.FC<ChatContainerProps> = ({
         messageListRef,
         loadMoreMessages,
         goToBottom,
-        releaseAutoFollow,
+        releaseAutoFollow: onManualNavigation,
         isPinned,
         showScrollButton,
     });
+    // The list owns the scroll element, so the shadows and the load-older
+    // trigger bind to its node rather than to a wrapper we render.
+    const scrollNodeRef = React.useMemo(() => ({ current: scrollNode }), [scrollNode]);
+    useScrollShadow(scrollNodeRef, {
+        observeMutations: false,
+        hideTopShadow: isMobile && stickyUserHeader,
+    });
+
+    const handleHistoryScroll = timelineController.handleHistoryScroll;
+    React.useEffect(() => {
+        if (!scrollNode) return;
+        const onScroll = () => handleHistoryScroll();
+        scrollNode.addEventListener('scroll', onScroll, { passive: true });
+        return () => {
+            scrollNode.removeEventListener('scroll', onScroll);
+        };
+    }, [handleHistoryScroll, scrollNode]);
+
     const resumeToLatestInstant = React.useCallback(() => {
         goToBottom('instant');
     }, [goToBottom]);
+
     // Mobile loads older history via an explicit top button instead of a
     // scroll-position trigger (see handleHistoryScroll in the controller).
     const showLoadOlderButton = isMobileSurfaceRuntime()
         && timelineController.historySignals.canLoadEarlier;
     const timelineLoadEarlier = timelineController.loadEarlier;
     const handleLoadOlderClick = React.useCallback(() => {
+        // Loading older history is an explicit move INTO the past: release
+        // live follow first, or the prepend's content growth would trigger an
+        // end correction and throw the viewport to the bottom.
+        onManualNavigation();
         void timelineLoadEarlier({ userInitiated: true });
-    }, [timelineLoadEarlier]);
+    }, [onManualNavigation, timelineLoadEarlier]);
 
     React.useEffect(() => {
         activeTurnChangeRef.current = timelineController.handleActiveTurnChange;
     }, [timelineController.handleActiveTurnChange]);
 
-    React.useEffect(() => {
-        if (sessionPermissions.length === 0 && sessionQuestions.length === 0) {
-            return;
-        }
-        handleMessageContentChange('permission');
-    }, [handleMessageContentChange, sessionPermissions, sessionQuestions]);
-
     const navigation = useChatTurnNavigation({
         sessionId: currentSessionId,
         turnIds: timelineController.turnIds,
@@ -958,7 +1040,10 @@ export const ChatContainer: React.FC<ChatContainerProps> = ({
         resumeToBottom: timelineController.resumeToBottomInstant,
     });
     const handlePromptNavigatorSelect = React.useCallback((turnId: string) => {
-        void navigation.scrollToTurnId(turnId, { behavior: 'smooth' });
+        // Instant on purpose: a long smooth scroll through a virtualized
+        // timeline gets cancelled by row remounts and lands mid-way or on the
+        // wrong message; a teleport always arrives.
+        void navigation.scrollToTurnId(turnId, { behavior: 'auto' });
     }, [navigation]);
     const canLoadEarlierPrompts = timelineController.historySignals.canLoadEarlier;
     const showPromptNavigator = !isMobile
@@ -1006,8 +1091,7 @@ export const ChatContainer: React.FC<ChatContainerProps> = ({
                 return;
             }
 
-            const { activeMainTab } = useUIStore.getState();
-            if (activeMainTab !== 'chat' || hasBlockingChatOverlay()) {
+            if (hasBlockingChatOverlay()) {
                 return;
             }
 
@@ -1072,6 +1156,15 @@ export const ChatContainer: React.FC<ChatContainerProps> = ({
     const isSessionHydrating =
         Boolean(currentSessionId)
         && !hasRenderableSessionSnapshot;
+    React.useEffect(() => {
+        if (isSessionHydrating || hydrationRevealKeyRef.current === null) return;
+        // One-shot: forget the key after the reveal animation has played so a
+        // later (now cached) visit to the same session opens instantly.
+        const timer = setTimeout(() => {
+            hydrationRevealKeyRef.current = null;
+        }, 400);
+        return () => clearTimeout(timer);
+    }, [isSessionHydrating, currentSessionKey]);
     const retrySessionLoad = React.useCallback(() => {
         if (!messagesEnabled || !currentSessionId) return;
         void sync.ensureSessionRenderable(currentSessionId, true, effectiveSessionDirectory);
@@ -1085,7 +1178,7 @@ export const ChatContainer: React.FC<ChatContainerProps> = ({
         lastScrolledSessionKeyRef.current = currentSessionKey;
         if (hasHashTarget) {
             // Hash navigation handler will scroll to target; we just release auto-follow.
-            releaseAutoFollow();
+            onManualNavigation();
             return;
         }
 
@@ -1097,7 +1190,7 @@ export const ChatContainer: React.FC<ChatContainerProps> = ({
         } else {
             window.requestAnimationFrame(run);
         }
-    }, [active, currentSessionId, currentSessionKey, releaseAutoFollow, restoreSnapshot]);
+    }, [active, currentSessionId, currentSessionKey, onManualNavigation, restoreSnapshot]);
 
     React.useEffect(() => {
         if (!messagesEnabled || !currentSessionId) return;
@@ -1192,7 +1285,11 @@ export const ChatContainer: React.FC<ChatContainerProps> = ({
             return <DraftWelcome exiting={draftPresentationExiting} />;
         }
 
-        if (isSessionHydrating && sessionMessages.length === 0 && !sessionIsWorking) {
+        const showHydrationSkeleton = isSessionHydrating && sessionMessages.length === 0 && !sessionIsWorking;
+        if (showHydrationSkeleton) {
+            hydrationRevealKeyRef.current = currentSessionKey ?? currentSessionId ?? null;
+        }
+        if (showHydrationSkeleton) {
             if (sessionMessageLoadState.status === 'error') {
                 return (
                     <div className="flex min-h-0 flex-1 items-center justify-center px-6">
@@ -1212,6 +1309,7 @@ export const ChatContainer: React.FC<ChatContainerProps> = ({
 
             return (
                 <div
+                    data-chat-hydration-skeleton=""
                     className={cn(
                         'relative min-h-0',
                         isDesktopExpandedInput ? 'pointer-events-none absolute inset-0 opacity-0' : 'flex-1',
@@ -1266,21 +1364,24 @@ export const ChatContainer: React.FC<ChatContainerProps> = ({
                 currentSessionKey={currentSessionKey ?? currentSessionId ?? ''}
                 isDesktopExpandedInput={isDesktopExpandedInput}
                 isMobile={isMobile}
-                stickyUserHeader={stickyUserHeader}
                 directory={effectiveSessionDirectory}
                 scrollRef={scrollRef}
+                registerList={registerList}
+                anchorMessageId={anchorMessageId}
+                onAnchorReady={onAnchorReady}
+                onAnchorSizeChanged={onAnchorSizeChanged}
+                onIsAtEndChange={onIsAtEndChange}
+                onTimelineDataChange={onTimelineDataChange}
                 messageListRef={messageListRef}
-                pendingRevealWork={timelineController.pendingRevealWork}
                 renderedMessages={timelineController.renderedMessages}
                 isLoadingOlder={timelineController.isLoadingOlder}
                 sessionIsWorking={sessionIsWorking}
                 streamingMessageId={streamingMessageId}
                 activeStreamingPhase={activeStreamingPhase}
                 retryOverlay={retryOverlay}
-                handleMessageContentChange={handleMessageContentChange}
-                getAnimationHandlers={getAnimationHandlers}
-                handleHistoryScroll={timelineController.handleHistoryScroll}
                 scrollToBottom={resumeToLatestInstant}
+                endPinningReleased={userOwnsScroll}
+                revealContent={hydrationRevealKeyRef.current !== null && hydrationRevealKeyRef.current === (currentSessionKey ?? currentSessionId ?? null)}
                 sessionQuestions={sessionQuestions}
                 sessionPermissions={sessionPermissions}
                 isProgrammaticFollowActive={isFollowingProgrammatically}
@@ -1315,10 +1416,37 @@ export const ChatContainer: React.FC<ChatContainerProps> = ({
                 )}
             >
                 {!draftLayoutVisible && !isDesktopExpandedInput && sessionMessages.length > 0 && (
-                    <ScrollToBottomButton
-                        visible={timelineController.showScrollToBottom}
-                        onClick={navigation.resumeToLatest}
-                    />
+                    <>
+                        <ScrollToBottomButton
+                            visible={timelineController.showScrollToBottom}
+                            working={sessionIsWorking}
+                            onClick={navigation.resumeToLatest}
+                        />
+                        {/* Same anchor and column as the pill, so the status
+                            row and the pill it hands off to share the exact
+                            distance from the input and the same left edge. */}
+                        <div
+                            className={cn(
+                                'pointer-events-none absolute bottom-full inset-x-0 mb-2 transition-opacity duration-100',
+                                userOwnsScroll && 'opacity-0',
+                            )}
+                        >
+                            <div className="chat-input-column">
+                                {/* The glass chip itself is rendered inside
+                                    StatusRow (its root is a size container
+                                    that cannot shrink-wrap). */}
+                                <div
+                                    ref={onStatusOverlayNode}
+                                    className={cn(
+                                        '[&:not(:has(*))]:hidden',
+                                        userOwnsScroll ? 'pointer-events-none' : 'pointer-events-auto',
+                                    )}
+                                >
+                                    <StatusRowContainer />
+                                </div>
+                            </div>
+                        </div>
+                    </>
                 )}
                 {promptReadOnly ? (
                     <ReadOnlyPromptBanner />
@@ -1326,6 +1454,7 @@ export const ChatContainer: React.FC<ChatContainerProps> = ({
                     <ChatInput
                         active={active}
                         scrollToBottom={scrollToBottomOnSend}
+                        scrollToLatest={resumeToLatestInstant}
                         draftPresentationExiting={draftPresentationExiting}
                     />
                 )}
diff --git a/packages/ui/src/components/chat/ChatInput.tsx b/packages/ui/src/components/chat/ChatInput.tsx
index f4d3b0a2..f088d16d 100644
--- a/packages/ui/src/components/chat/ChatInput.tsx
+++ b/packages/ui/src/components/chat/ChatInput.tsx
@@ -48,7 +48,7 @@ import type { SnippetAutocompleteHandle } from './SnippetAutocomplete';
 import { cn } from "@/lib/utils";
 import { ModelControls } from './ModelControls';
 import { parseAgentMentions } from '@/lib/messages/agentMentions';
-import { StatusRow } from './StatusRow';
+import { ComposerStatusBar } from './ComposerStatusBar';
 import { PendingChangesBar } from './PendingChangesBar';
 import { useChatSurfaceMode } from './useChatSurfaceMode';
 import { MobileAgentButton } from './MobileAgentButton';
@@ -220,11 +220,15 @@ const MemoModelControls = React.memo(ModelControls);
 const MemoComposerDictation = React.memo(ComposerDictation);
 const MemoMobileAgentButton = React.memo(MobileAgentButton);
 const MemoMobileModelButton = React.memo(MobileModelButton);
-const MemoStatusRow = React.memo(StatusRow);
+const MemoComposerStatusBar = React.memo(ComposerStatusBar);
 
 interface ChatInputProps {
     onOpenSettings?: () => void;
     scrollToBottom?: () => void;
+    // Queued sends do not create a user row (the queue delivers later), so
+    // the anchor-arming scrollToBottom is wrong for them; this returns the
+    // viewport to the live edge instead.
+    scrollToLatest?: () => void;
     active?: boolean;
     draftPresentationExiting?: boolean;
 }
@@ -243,6 +247,7 @@ const resolveChatDraftIdentity = (sessionId: string | null): ChatDraftIdentity |
 const ChatInputComponent: React.FC<ChatInputProps> = ({
     onOpenSettings,
     scrollToBottom,
+    scrollToLatest,
     active = true,
     draftPresentationExiting = false,
 }) => {
@@ -898,6 +903,12 @@ const ChatInputComponent: React.FC<ChatInputProps> = ({
             } : undefined,
         });
 
+        // Sending while the agent works must still take the reader to the
+        // live edge — a queued message produces no user row yet, so the
+        // anchor path has nothing to claim and would leave the viewport
+        // parked mid-history.
+        scrollToLatest?.();
+
         // Clear input and attachments
         // Note: confirmedMentionsRef is NOT cleared here because queued messages
         // are processed later in handleSubmit which reads the ref via extractInlineFileMentions.
@@ -910,7 +921,7 @@ const ChatInputComponent: React.FC<ChatInputProps> = ({
         if (!isMobile) {
             composerRef.current?.focus();
         }
-    }, [getCurrentInputSnapshot, currentSessionId, messageQueueTarget, attachedFiles, sanitizeAttachmentsForSend, addToQueue, clearAttachedFiles, isMobile, currentProviderId, currentModelId, currentAgentName, currentVariant]);
+    }, [getCurrentInputSnapshot, currentSessionId, messageQueueTarget, attachedFiles, sanitizeAttachmentsForSend, addToQueue, clearAttachedFiles, isMobile, currentProviderId, currentModelId, currentAgentName, currentVariant, scrollToLatest]);
 
     const handleQueuedMessageEdit = React.useCallback((content: string) => {
         setMessage(content);
@@ -1289,6 +1300,11 @@ const ChatInputComponent: React.FC<ChatInputProps> = ({
             ...additionalParts.flatMap(p => p.attachments ?? []),
         ];
 
+        // Arm the timeline anchor BEFORE the optimistic user row can commit;
+        // arming after (or a frame later) races the commit and the anchor
+        // never claims the new message.
+        scrollToBottom?.();
+
         const sendPromise = sendMessage(
             primaryText,
             providerIdToSend,
@@ -1307,14 +1323,6 @@ const ChatInputComponent: React.FC<ChatInputProps> = ({
             }
         };
 
-        if (typeof window === 'undefined') {
-            scrollToBottom?.();
-        } else {
-            window.requestAnimationFrame(() => {
-                scrollToBottom?.();
-            });
-        }
-
         void sendPromise.then(() => {
             // Record what this session was pointed at, so the work-status panel
             // can show it as a context source long after the message scrolled
@@ -2648,9 +2656,8 @@ const ChatInputComponent: React.FC<ChatInputProps> = ({
                     sessionId={currentSessionId}
                     directory={currentSessionDirectoryForSync ?? currentDirectory}
                 />
-                <MemoStatusRow
+                <MemoComposerStatusBar
                     showAbortStatus={showAbortStatus}
-                    showAssistantStatus={false}
                     showTodos={composerStatusExtrasEnabled}
                     leftAccessory={!composerStatusExtrasEnabled || newSessionDraftOpen || !hasPendingChanges
                         ? null
diff --git a/packages/ui/src/components/chat/ChatMessage.tsx b/packages/ui/src/components/chat/ChatMessage.tsx
index 9b39eb34..a4327167 100644
--- a/packages/ui/src/components/chat/ChatMessage.tsx
+++ b/packages/ui/src/components/chat/ChatMessage.tsx
@@ -14,7 +14,6 @@ import { useThemeSystem } from '@/contexts/useThemeSystem';
 import { cn } from '@/lib/utils';
 import { useChatSurfaceMode } from './useChatSurfaceMode';
 
-import type { AnimationHandlers, ContentChangeReason } from '@/hooks/useChatAutoFollow';
 import MessageBody from './message/MessageBody';
 import type { AgentMentionInfo } from './message/types';
 import type { StreamPhase, ToolPopupContent } from './message/types';
@@ -132,8 +131,6 @@ interface ChatMessageProps {
         info: Message;
         parts: Part[];
     };
-    onContentChange?: (reason?: ContentChangeReason) => void;
-    animationHandlers?: AnimationHandlers;
     scrollToBottom?: () => void;
     turnGroupingContext?: TurnGroupingContext;
     assistantHeaderMessageId?: string;
@@ -148,8 +145,6 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
     message,
     previousMessage,
     nextMessage,
-    onContentChange,
-    animationHandlers,
     turnGroupingContext,
     assistantHeaderMessageId,
     isInActiveTurn = false,
@@ -850,35 +845,12 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
         });
     }, [defaultOpenToolIds, effectiveExpandedTools, message.info.id]);
 
-    const resolvedAnimationHandlers = animationHandlers ?? null;
-    const hasAnnouncedAuxiliaryScrollRef = React.useRef(false);
-
-    const animationCompletedRef = React.useRef(false);
-    const hasRequestedReservationRef = React.useRef(false);
-    const animationStartNotifiedRef = React.useRef(false);
-    const hasTriggeredReservationOnceRef = React.useRef(false);
     const hasEverStreamedRef = React.useRef(false);
 
     React.useEffect(() => {
-        animationCompletedRef.current = false;
-        hasRequestedReservationRef.current = false;
-        animationStartNotifiedRef.current = false;
-        hasTriggeredReservationOnceRef.current = false;
-        hasAnnouncedAuxiliaryScrollRef.current = false;
         hasEverStreamedRef.current = false;
     }, [message.info.id]);
 
-    const handleAuxiliaryContentComplete = React.useCallback(() => {
-        if (isUser) {
-            return;
-        }
-        if (hasAnnouncedAuxiliaryScrollRef.current) {
-            return;
-        }
-        hasAnnouncedAuxiliaryScrollRef.current = true;
-        onContentChange?.('structural');
-    }, [isUser, onContentChange]);
-
     const setImagePreviewOpen = useUIStore((state) => state.setImagePreviewOpen);
 
     const handleShowPopup = React.useCallback((content: ToolPopupContent) => {
@@ -901,114 +873,7 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
         hasEverStreamedRef.current = true;
     }
 
-    const hasReasoningParts = React.useMemo(() => {
-        if (isUser) {
-            return false;
-        }
-        return visibleParts.some((part) => part.type === 'reasoning');
-    }, [isUser, visibleParts]);
-
     const allowAnimation = shouldAnimateMessage && !isAnimationSettled && !isStreamingPhase && !hasEverStreamedRef.current;
-    const shouldReserveAnimationSpace = !isUser && shouldAnimateMessage && assistantTextParts.length > 0 && !shouldCoordinateRendering;
-
-    React.useEffect(() => {
-        if (!resolvedAnimationHandlers?.onStreamingCandidate) {
-            return;
-        }
-
-        if (!shouldReserveAnimationSpace) {
-            if (hasRequestedReservationRef.current) {
-                if (hasReasoningParts && resolvedAnimationHandlers?.onReasoningBlock) {
-                    resolvedAnimationHandlers.onReasoningBlock();
-                } else if (resolvedAnimationHandlers?.onReservationCancelled) {
-                    resolvedAnimationHandlers.onReservationCancelled();
-                }
-                hasRequestedReservationRef.current = false;
-            }
-            return;
-        }
-
-        if (hasTriggeredReservationOnceRef.current) {
-            return;
-        }
-
-        hasTriggeredReservationOnceRef.current = true;
-        resolvedAnimationHandlers.onStreamingCandidate();
-        hasRequestedReservationRef.current = true;
-    }, [resolvedAnimationHandlers, shouldReserveAnimationSpace, hasReasoningParts]);
-
-    React.useEffect(() => {
-        if (!resolvedAnimationHandlers?.onAnimationStart) {
-            return;
-        }
-        if (!allowAnimation) {
-            return;
-        }
-        if (animationStartNotifiedRef.current) {
-            return;
-        }
-        resolvedAnimationHandlers.onAnimationStart();
-        animationStartNotifiedRef.current = true;
-    }, [resolvedAnimationHandlers, allowAnimation]);
-
-    React.useEffect(() => {
-        if (isUser) {
-            return;
-        }
-
-        const handler = resolvedAnimationHandlers?.onAnimatedHeightChange;
-        if (!handler) {
-            return;
-        }
-
-        const shouldTrackHeight = allowAnimation || shouldReserveAnimationSpace;
-        if (!shouldTrackHeight) {
-            return;
-        }
-
-        const element = messageContainerRef.current;
-        if (!element) {
-            return;
-        }
-
-        if (typeof window === 'undefined' || typeof ResizeObserver === 'undefined') {
-            handler(element.getBoundingClientRect().height);
-            return;
-        }
-
-        let rafId: number | null = null;
-        const notifyHeight = (height: number) => {
-            if (typeof window === 'undefined') {
-                handler(height);
-                return;
-            }
-            if (rafId !== null) {
-                window.cancelAnimationFrame(rafId);
-            }
-            rafId = window.requestAnimationFrame(() => {
-                handler(height);
-            });
-        };
-
-        const observer = new ResizeObserver((entries) => {
-            const entry = entries[0];
-            if (!entry) {
-                return;
-            }
-            notifyHeight(entry.contentRect.height);
-        });
-
-        observer.observe(element);
-        notifyHeight(element.getBoundingClientRect().height);
-
-        return () => {
-            if (rafId !== null) {
-                window.cancelAnimationFrame(rafId);
-                rafId = null;
-            }
-            observer.disconnect();
-        };
-    }, [allowAnimation, isUser, resolvedAnimationHandlers, shouldReserveAnimationSpace]);
 
     if (shouldHideUserMessage) {
         return null;
@@ -1070,13 +935,11 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
                                                 onShowPopup={handleShowPopup}
                                                 streamPhase={streamPhase}
                                                 allowAnimation={allowAnimation}
-                                                onContentChange={onContentChange}
                                                 shouldShowHeader={false}
                                                 hasTextContent={hasTextContent}
                                                 onCopyMessage={handleCopyMessage}
                                                 copiedMessage={copiedMessage}
                                                 showReasoningTraces={showReasoningTraces}
-                                                onAuxiliaryContentComplete={handleAuxiliaryContentComplete}
                                                 agentMention={agentMention}
                                                 onRevert={handleRevert}
                                                 onFork={isUser ? handleFork : undefined}
@@ -1106,13 +969,11 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
                                                 onShowPopup={handleShowPopup}
                                                 streamPhase={streamPhase}
                                                 allowAnimation={allowAnimation}
-                                                onContentChange={onContentChange}
                                                 shouldShowHeader={false}
                                                 hasTextContent={hasTextContent}
                                                 onCopyMessage={handleCopyMessage}
                                                 copiedMessage={copiedMessage}
                                                 showReasoningTraces={showReasoningTraces}
-                                                onAuxiliaryContentComplete={handleAuxiliaryContentComplete}
                                                 agentMention={agentMention}
                                                 onRevert={handleRevert}
                                                 onFork={isUser ? handleFork : undefined}
@@ -1152,12 +1013,10 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
                                 onShowPopup={handleShowPopup}
                                 streamPhase={streamPhase}
                                 allowAnimation={allowAnimation}
-                                onContentChange={onContentChange}
                                 shouldShowHeader={shouldShowHeader}
                                 hasTextContent={hasTextContent}
                                 onCopyMessage={handleCopyMessage}
                                 copiedMessage={copiedMessage}
-                                onAuxiliaryContentComplete={handleAuxiliaryContentComplete}
                                 showReasoningTraces={showReasoningTraces}
                                 agentMention={agentMention}
                                 turnGroupingContext={turnGroupingContext}
diff --git a/packages/ui/src/components/chat/ComposerStatusBar.tsx b/packages/ui/src/components/chat/ComposerStatusBar.tsx
new file mode 100644
index 00000000..e8c1ebda
--- /dev/null
+++ b/packages/ui/src/components/chat/ComposerStatusBar.tsx
@@ -0,0 +1,305 @@
+import React from "react";
+import { useSessionUIStore } from '@/sync/session-ui-store';
+import { cn } from "@/lib/utils";
+import { useDirectorySync } from "@/sync/sync-context";
+import type { Todo } from "@opencode-ai/sdk/v2/client";
+import { useUIStore } from "@/stores/useUIStore";
+import { useTodosPersistStore } from "@/stores/useTodosPersistStore";
+import { isVSCodeRuntime } from "@/lib/desktop";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { Icon } from "@/components/icon/Icon";
+import { useI18n } from "@/lib/i18n";
+
+// The bar that sits in the composer stack: pending-changes accessory, abort
+// status, and the todos dropdown. Deliberately a separate component from
+// StatusRow — that one is the floating assistant-status chip above the
+// composer, and sharing markup meant every restyle of the chip (glass,
+// placement) silently restyled this bar and its dropdown too.
+
+type TodoItem = Todo & { id?: string };
+
+const COMPOSER_STATUS_BAR_CONTAINER_STYLE = { containerType: "inline-size" as const, containerName: "composer-status-bar" };
+
+const statusConfig = {
+  in_progress: { textClassName: "text-foreground" },
+  pending: { textClassName: "text-foreground" },
+  completed: { textClassName: "text-muted-foreground line-through" },
+  cancelled: { textClassName: "text-muted-foreground line-through" },
+};
+
+const priorityClassName = {
+  high: "text-[var(--status-warning)]",
+  medium: "text-muted-foreground",
+  low: "text-muted-foreground/70",
+};
+
+const priorityIcon = {
+  high: <Icon name="arrow-up-double" className="h-3.5 w-3.5" aria-hidden="true" />,
+  medium: <Icon name="arrow-up-s" className="h-3.5 w-3.5" aria-hidden="true" />,
+  low: <Icon name="arrow-down-s" className="h-3.5 w-3.5" aria-hidden="true" />,
+};
+
+const statusLabelKey = {
+  in_progress: "chat.statusRow.todo.status.inProgress",
+  pending: "chat.statusRow.todo.status.pending",
+  completed: "chat.statusRow.todo.status.completed",
+  cancelled: "chat.statusRow.todo.status.cancelled",
+};
+
+const priorityLabelKey = {
+  high: "chat.statusRow.todo.priority.high",
+  medium: "chat.statusRow.todo.priority.medium",
+  low: "chat.statusRow.todo.priority.low",
+};
+
+// SAFETY: todo.status / todo.priority arrive from the SDK as open strings;
+// lookups treat them as candidate keys and every call site falls back to a
+// default entry when the value is outside the known set.
+const knownStatus = (status: string) =>
+  // SAFETY: candidate-key narrowing; misses resolve to undefined and callers fall back.
+  status as keyof typeof statusConfig;
+const knownPriority = (priority: string) =>
+  // SAFETY: candidate-key narrowing; misses resolve to undefined and callers fall back.
+  priority as keyof typeof priorityClassName;
+
+const TodoItemRow: React.FC<{ todo: TodoItem }> = ({ todo }) => {
+  const { t } = useI18n();
+  const config = statusConfig[knownStatus(todo.status)] || statusConfig.pending;
+  // SAFETY: the label keys are literal members of the i18n dictionary; the
+  // lookup narrows an open SDK string with a known fallback, and t() accepts
+  // only the generated key union.
+  const statusKey = (statusLabelKey[knownStatus(todo.status)] ?? statusLabelKey.pending) as Parameters<typeof t>[0];
+  // SAFETY: same literal-member narrowing as statusKey above.
+  const priorityKey = (priorityLabelKey[knownPriority(todo.priority)] ?? priorityLabelKey.medium) as Parameters<typeof t>[0];
+
+  const statusIcon =
+    todo.status === "in_progress" ? (
+      <Icon name="record-circle" className="h-3.5 w-3.5 text-[var(--status-info)]" aria-hidden="true" />
+    ) : todo.status === "completed" ? (
+      <Icon name="checkbox-circle" className="h-3.5 w-3.5 text-[var(--status-success)]" aria-hidden="true" />
+    ) : (
+      <Icon name="time" className="h-3.5 w-3.5 text-muted-foreground" aria-hidden="true" />
+    );
+
+  return (
+    <div className="flex items-center min-w-0 py-0.5 gap-2">
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <span className="flex-shrink-0">{statusIcon}</span>
+        </TooltipTrigger>
+        <TooltipContent side="left" sideOffset={6}>
+          {t(statusKey)}
+        </TooltipContent>
+      </Tooltip>
+      <span className={cn("flex-1 typography-ui-label", config.textClassName)}>
+        {todo.content}
+      </span>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <span
+            className={cn(
+              "typography-meta flex items-center justify-center flex-shrink-0 leading-none",
+              priorityClassName[knownPriority(todo.priority)] ?? priorityClassName.medium,
+            )}
+          >
+            {priorityIcon[knownPriority(todo.priority)] ?? priorityIcon.medium}
+          </span>
+        </TooltipTrigger>
+        <TooltipContent side="right" sideOffset={6}>
+          {t(priorityKey)}
+        </TooltipContent>
+      </Tooltip>
+    </div>
+  );
+};
+
+const EMPTY_TODOS: TodoItem[] = [];
+
+interface ComposerStatusBarProps {
+  showAbortStatus?: boolean;
+  showTodos?: boolean;
+  leftAccessory?: React.ReactNode;
+}
+
+export const ComposerStatusBar: React.FC<ComposerStatusBarProps> = ({
+  showAbortStatus,
+  showTodos = true,
+  leftAccessory,
+}) => {
+  const { t } = useI18n();
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  const currentSessionId = useSessionUIStore((state) => state.currentSessionId);
+  const currentSessionDirectory = useSessionUIStore(
+    React.useCallback(
+      (state) => (currentSessionId ? state.getDirectoryForSession(currentSessionId) : null),
+      [currentSessionId],
+    ),
+  );
+  const liveTodos = useDirectorySync(
+    React.useCallback(
+      (state) => {
+        if (!showTodos || !currentSessionId) return EMPTY_TODOS;
+        return state.todo[currentSessionId] ?? EMPTY_TODOS;
+      },
+      [currentSessionId, showTodos],
+    ),
+  );
+  const persistedSessionTodos = useTodosPersistStore(
+    React.useCallback(
+      (state) => (showTodos && currentSessionId && currentSessionDirectory
+        ? state.getSessionTodos(currentSessionDirectory, currentSessionId)
+        : undefined),
+      [currentSessionDirectory, currentSessionId, showTodos],
+    ),
+  );
+  const todos: TodoItem[] = React.useMemo(() => {
+    if (!currentSessionId) return EMPTY_TODOS;
+    if (liveTodos.length > 0) return liveTodos;
+    return persistedSessionTodos ?? EMPTY_TODOS;
+  }, [liveTodos, persistedSessionTodos, currentSessionId]);
+  const isMobile = useUIStore((state) => state.isMobile);
+  const isCompact = isMobile || isVSCodeRuntime();
+
+  const visibleTodos = React.useMemo(() => {
+    return todos.filter((todo) => todo.status !== "cancelled");
+  }, [todos]);
+
+  const activeTodo = React.useMemo(() => {
+    return (
+      visibleTodos.find((todo) => todo.status === "in_progress") ||
+      visibleTodos.find((todo) => todo.status === "pending") ||
+      null
+    );
+  }, [visibleTodos]);
+
+  const progress = React.useMemo(() => {
+    const total = todos.filter((todo) => todo.status !== "cancelled").length;
+    const completed = todos.filter((todo) => todo.status === "completed").length;
+    return { completed, total };
+  }, [todos]);
+
+  const statusSummary = React.useMemo(() => {
+    const active = visibleTodos.filter((todo) => todo.status === "in_progress").length;
+    const left = visibleTodos.filter((todo) => todo.status === "in_progress" || todo.status === "pending").length;
+    return { active, left };
+  }, [visibleTodos]);
+
+  const hasTodoContent = showTodos && statusSummary.left > 0;
+  const hasLeftAccessory = Boolean(leftAccessory);
+  const hasContent = Boolean(showAbortStatus) || hasTodoContent || hasLeftAccessory;
+
+  const popoverRef = React.useRef<HTMLDivElement>(null);
+  React.useEffect(() => {
+    if (!isExpanded) return;
+
+    const handleClickOutside = (event: MouseEvent) => {
+      // SAFETY: mousedown targets are DOM nodes; contains() only needs Node.
+      if (popoverRef.current && !popoverRef.current.contains(event.target as Node)) {
+        setIsExpanded(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [isExpanded]);
+
+  const toggleExpanded = () => setIsExpanded((prev) => !prev);
+  const todoSummaryLabel = t('chat.statusRow.summary.activeLeft', {
+    active: statusSummary.active,
+    left: statusSummary.left,
+  });
+
+  const todoTrigger = hasTodoContent ? (
+    <button
+      type="button"
+      onClick={toggleExpanded}
+      className="flex items-center gap-1 flex-shrink-0 text-muted-foreground"
+      aria-label={todoSummaryLabel}
+      title={todoSummaryLabel}
+    >
+      {!isCompact && activeTodo ? (
+        <span className="composer-status-bar__active-todo typography-ui-label text-foreground truncate max-w-[200px]">
+          {activeTodo.content}
+        </span>
+      ) : (
+        <span className="typography-ui-label">{t('chat.statusRow.tasksTitle')}</span>
+      )}
+      <span className="typography-meta flex items-center gap-1 tabular-nums" aria-hidden="true">
+        <span className="flex items-center gap-0.5">
+          <Icon name="record-circle" className="h-3.5 w-3.5 text-[var(--status-info)]" />
+          {statusSummary.active}
+        </span>
+        <span>·</span>
+        <span className="flex items-center gap-0.5">
+          <Icon name="time" className="h-3.5 w-3.5" />
+          {statusSummary.left}
+        </span>
+      </span>
+      {isExpanded ? (
+        <Icon name="arrow-up-s" className="h-3.5 w-3.5" />
+      ) : (
+        <Icon name="arrow-down-s" className="h-3.5 w-3.5" />
+      )}
+    </button>
+  ) : null;
+
+  if (!hasContent) {
+    return null;
+  }
+
+  return (
+    <div className="mb-2" style={COMPOSER_STATUS_BAR_CONTAINER_STYLE}>
+      <div className={cn("flex items-center justify-between gap-2 h-8", hasLeftAccessory && "px-0.5")}>
+        {/* Left: abort status | pending-changes accessory */}
+        <div className={cn("flex-1 flex items-center min-w-0 gap-2", hasLeftAccessory ? "pl-1.5" : "overflow-x-hidden")}>
+          {showAbortStatus ? (
+            <div className="flex h-full items-center text-[var(--status-error)] pl-0.5">
+              <span className="flex items-center gap-1.5 typography-ui-label">
+                <Icon name="close-circle" aria-hidden="true" />
+                {t('chat.statusRow.aborted')}
+              </span>
+            </div>
+          ) : leftAccessory ? (
+            leftAccessory
+          ) : null}
+        </div>
+
+        {/* Right: todos dropdown */}
+        <div className={cn("relative flex items-center gap-2 flex-shrink-0", hasLeftAccessory && "pr-1.5")} ref={popoverRef}>
+          {todoTrigger}
+
+          {isExpanded && hasTodoContent && (
+            <div
+              style={{
+                maxWidth: "min(28rem, calc(100cqw - 4ch))",
+                backgroundColor: "var(--surface-elevated)",
+                color: "var(--surface-elevated-foreground)",
+              }}
+              className={cn(
+                "absolute right-0 bottom-full mb-1 z-50",
+                "w-max min-w-[200px] rounded-xl p-1",
+                "shadow-[inset_0_1px_0_0_rgba(255,255,255,0.8),inset_0_0_0_1px_rgba(0,0,0,0.04),0_0_0_1px_rgba(0,0,0,0.10),0_1px_2px_-0.5px_rgba(0,0,0,0.08),0_4px_8px_-2px_rgba(0,0,0,0.08),0_12px_20px_-4px_rgba(0,0,0,0.08)]",
+                "dark:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.12),inset_0_0_0_1px_rgba(255,255,255,0.08),0_0_0_1px_rgba(0,0,0,0.36),0_1px_1px_-0.5px_rgba(0,0,0,0.22),0_3px_3px_-1.5px_rgba(0,0,0,0.20),0_6px_6px_-3px_rgba(0,0,0,0.16)]",
+                "animate-in fade-in-0 zoom-in-95 slide-in-from-bottom-2",
+                "duration-150",
+              )}
+            >
+              <div className="flex items-center gap-1.5 px-2 py-1 typography-ui-label font-medium text-muted-foreground">
+                <span>{t('chat.statusRow.tasksTitle')}</span>
+                <span className="typography-meta tabular-nums">
+                  {progress.completed}/{progress.total}
+                </span>
+              </div>
+
+              <div className="px-1 max-h-[200px] overflow-y-auto">
+                {visibleTodos.map((todo, index) => (
+                  <TodoItemRow key={todo.id ?? `todo-${index}`} todo={todo} />
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/ui/src/components/chat/FileAttachment.tsx b/packages/ui/src/components/chat/FileAttachment.tsx
index 158a78f8..7f1d4f26 100644
--- a/packages/ui/src/components/chat/FileAttachment.tsx
+++ b/packages/ui/src/components/chat/FileAttachment.tsx
@@ -2,6 +2,7 @@ import React, { useRef, memo } from 'react';
 import { useInputStore } from '@/sync/input-store';
 import type { AttachedFile } from '@/sync/session-ui-store';
 import { useUIStore } from '@/stores/useUIStore';
+import { useDirectoryStore } from '@/stores/useDirectoryStore';
 import { toast } from '@/components/ui';
 import { cn } from '@/lib/utils';
 import { openExternalUrl } from '@/lib/url';
@@ -833,7 +834,10 @@ export const MessageFilesDisplay = memo(({ files, onShowPopup, compact = false }
                 <button
                   type="button"
                   onClick={() => {
-                    useUIStore.getState().navigateToDiagram(filePath);
+                    const directory = useDirectoryStore.getState().currentDirectory;
+                    if (directory) {
+                      useUIStore.getState().openContextFile(directory, filePath);
+                    }
                   }}
                   className={cn(
                     "flex items-center gap-2 p-2 rounded-lg border border-border/40 bg-muted/10 hover:bg-muted/20 transition-colors text-left cursor-pointer",
diff --git a/packages/ui/src/components/chat/FileMentionAutocomplete.tsx b/packages/ui/src/components/chat/FileMentionAutocomplete.tsx
index 9192fbc7..5258b132 100644
--- a/packages/ui/src/components/chat/FileMentionAutocomplete.tsx
+++ b/packages/ui/src/components/chat/FileMentionAutocomplete.tsx
@@ -14,6 +14,8 @@ import { useFilesViewShowGitignored } from '@/lib/filesViewShowGitignored';
 import { useI18n } from '@/lib/i18n';
 import { useUIStore } from '@/stores/useUIStore';
 import { useMobileAutocompleteMaxHeight } from './useMobileAutocompleteMaxHeight';
+import { mentionServerQuery, rankFileMentionResults } from './fileMentionResults';
+import { matchesRankQuery, rankByQuery } from '@/lib/search/fuzzySearch';
 import { AutocompleteRowTooltip } from './composer/ui/AutocompleteRowTooltip';
 
 type FileInfo = ProjectFileSearchHit;
@@ -94,14 +96,12 @@ export const FileMentionAutocomplete = React.forwardRef<FileMentionHandle, FileM
     ].filter((value): value is string => typeof value === 'string' && value.length > 0);
 
     const seen = new Set<string>();
-    const queryLower = normalizedSearchQuery.toLowerCase();
     const mapped = ordered
       .filter((filePath) => {
         if (seen.has(filePath)) return false;
         seen.add(filePath);
         const relative = filePath.startsWith(`${projectRoot}/`) ? filePath.slice(projectRoot.length + 1) : filePath;
-        if (!queryLower) return true;
-        return relative.toLowerCase().includes(queryLower);
+        return matchesRankQuery([relative], normalizedSearchQuery);
       })
       .slice(0, 6)
       .map((filePath) => {
@@ -124,9 +124,11 @@ export const FileMentionAutocomplete = React.forwardRef<FileMentionHandle, FileM
     () => normalizedSearchQuery.length > 0 ? agents : agents.slice(0, 2),
     [agents, normalizedSearchQuery.length],
   );
-  const visibleDirectories = directories;
   const visibleRecentFiles = recentFiles;
-  const visibleFiles = files;
+  const visibleResults = React.useMemo(
+    () => rankFileMentionResults(files, directories, normalizedSearchQuery, 20),
+    [files, directories, normalizedSearchQuery],
+  );
 
   React.useEffect(() => {
     const handlePointerDown = (event: MouseEvent | TouchEvent) => {
@@ -152,13 +154,9 @@ export const FileMentionAutocomplete = React.forwardRef<FileMentionHandle, FileM
       return;
     }
 
-    const normalizedQuery = (debouncedQuery ?? '').trim();
-    const normalizedQueryLower = normalizedQuery
-      .replace(/^\.\//, '')
-      .replace(/^\/+/, '')
-      .toLowerCase();
+    const serverQuery = mentionServerQuery(debouncedQuery ?? '');
 
-    if (!normalizedQueryLower) {
+    if (!serverQuery) {
       setFiles([]);
       return;
     }
@@ -167,7 +165,7 @@ export const FileMentionAutocomplete = React.forwardRef<FileMentionHandle, FileM
     pendingSearchRef.current++;
     setLoading(true);
 
-    searchFiles(currentDirectory, normalizedQueryLower, 80, {
+    searchFiles(currentDirectory, serverQuery, 80, {
       includeHidden: showHidden,
       respectGitignore: !showGitignored,
       type: 'file',
@@ -178,7 +176,7 @@ export const FileMentionAutocomplete = React.forwardRef<FileMentionHandle, FileM
         }
 
         const recentSet = new Set(recentFiles.map((file) => file.path));
-        setFiles(hits.filter((hit) => !recentSet.has(hit.path)).slice(0, 15));
+        setFiles(hits.filter((hit) => !recentSet.has(hit.path)));
       })
       .catch(() => {
         if (!cancelled) {
@@ -210,13 +208,9 @@ export const FileMentionAutocomplete = React.forwardRef<FileMentionHandle, FileM
       return;
     }
 
-    const normalizedQuery = (debouncedQuery ?? '').trim();
-    const normalizedQueryLower = normalizedQuery
-      .replace(/^\.\//, '')
-      .replace(/^\/+/, '')
-      .toLowerCase();
+    const serverQuery = mentionServerQuery(debouncedQuery ?? '');
 
-    if (!normalizedQueryLower) {
+    if (!serverQuery) {
       setDirectories([]);
       return;
     }
@@ -225,14 +219,14 @@ export const FileMentionAutocomplete = React.forwardRef<FileMentionHandle, FileM
     pendingSearchRef.current++;
     setLoading(true);
 
-    searchFiles(currentDirectory, normalizedQueryLower, 20, {
+    searchFiles(currentDirectory, serverQuery, 20, {
       includeHidden: showHidden,
       respectGitignore: !showGitignored,
       type: 'directory',
     })
       .then((hits) => {
         if (!cancelled) {
-          setDirectories(hits.slice(0, 10));
+          setDirectories(hits);
         }
       })
       .catch(() => {
@@ -261,28 +255,22 @@ export const FileMentionAutocomplete = React.forwardRef<FileMentionHandle, FileM
 
   React.useEffect(() => {
     const visibleAgents = getVisibleAgents();
-    const normalizedQuery = (searchQuery ?? '').trim().toLowerCase();
-    const filtered = visibleAgents
+    const subagents = visibleAgents
       .filter((agent) => agent.mode && agent.mode !== 'primary')
-      .filter((agent) => {
-        if (!normalizedQuery) return true;
-        const haystack = `${agent.name} ${agent.description ?? ''}`.toLowerCase();
-        return haystack.includes(normalizedQuery);
-      })
       .map((agent) => ({
         name: agent.name,
         description: agent.description,
         mode: agent.mode,
       }))
       .sort((a, b) => a.name.localeCompare(b.name));
-    setAgents(filtered);
+    setAgents(rankByQuery(subagents, searchQuery ?? '', (agent) => [agent.name, agent.description]));
   }, [getVisibleAgents, searchQuery]);
 
   React.useEffect(() => {
     setSelectedIndex(0);
     setOverflowMap({});
     setMarqueeDurations({});
-  }, [visibleFiles, visibleDirectories, visibleRecentFiles.length, visibleAgents.length]);
+  }, [visibleResults, visibleRecentFiles.length, visibleAgents.length]);
 
   React.useEffect(() => {
     selectedIndexRef.current = selectedIndex;
@@ -332,7 +320,7 @@ export const FileMentionAutocomplete = React.forwardRef<FileMentionHandle, FileM
       }
       window.removeEventListener('resize', updateOverflow);
     };
-  }, [visibleFiles, visibleDirectories]);
+  }, [visibleResults]);
 
   React.useEffect(() => {
     const labelNode = labelRefs.current[selectedIndex];
@@ -376,7 +364,7 @@ export const FileMentionAutocomplete = React.forwardRef<FileMentionHandle, FileM
         return;
       }
 
-      const total = visibleAgents.length + visibleDirectories.length + visibleRecentFiles.length + visibleFiles.length;
+      const total = visibleAgents.length + visibleRecentFiles.length + visibleResults.length;
       if (total === 0) {
         return;
       }
@@ -400,24 +388,16 @@ export const FileMentionAutocomplete = React.forwardRef<FileMentionHandle, FileM
           }
           return;
         }
-        const dirIndex = safeIndex - visibleAgents.length;
-        if (dirIndex < visibleDirectories.length) {
-          const dir = visibleDirectories[dirIndex];
-          if (dir) {
-            handleFileSelect(dir);
-          }
-          return;
-        }
-        const fileIndex = dirIndex - visibleDirectories.length;
-        const selectedFile = fileIndex < visibleRecentFiles.length
-          ? visibleRecentFiles[fileIndex]
-          : visibleFiles[fileIndex - visibleRecentFiles.length];
+        const recentIndex = safeIndex - visibleAgents.length;
+        const selectedFile = recentIndex < visibleRecentFiles.length
+          ? visibleRecentFiles[recentIndex]
+          : visibleResults[recentIndex - visibleRecentFiles.length];
         if (selectedFile) {
           handleFileSelect(selectedFile);
         }
       }
     }
-  }), [visibleFiles, visibleDirectories, visibleRecentFiles, visibleAgents, onClose, handleFileSelect, handleAgentPick]);
+  }), [visibleResults, visibleRecentFiles, visibleAgents, onClose, handleFileSelect, handleAgentPick]);
 
   const getFileIcon = (file: FileInfo) => {
     const ext = file.extension?.toLowerCase();
@@ -482,38 +462,11 @@ export const FileMentionAutocomplete = React.forwardRef<FileMentionHandle, FileM
                 {t('chat.fileMentionAutocomplete.searchMoreAgents')}
               </div>
             )}
-            {visibleAgents.length > 0 && (visibleDirectories.length > 0 || visibleRecentFiles.length > 0 || visibleFiles.length > 0) && (
-              <div className="my-1 border-t border-border/60" />
-            )}
-            {visibleDirectories.map((dir, index) => {
-              const rowIndex = visibleAgents.length + index;
-              const relativePath = dir.relativePath || dir.name;
-              const displayPath = truncatePathMiddle(relativePath, { maxLength: 60 });
-              const isSelected = selectedIndex === rowIndex;
-
-              return (
-                <div
-                  key={`dir-${dir.path}`}
-                  ref={(el) => { itemRefs.current[rowIndex] = el; }}
-                  className={cn(
-                    "flex items-center gap-2 px-3 py-1.5 cursor-pointer typography-ui-label rounded-lg",
-                    isSelected && "bg-interactive-selection"
-                  )}
-                  onClick={() => handleFileSelect(dir)}
-                  onMouseMove={() => setSelectedIndex(rowIndex)}
-                >
-                  <Icon name="folder-3-fill" className="h-3.5 w-3.5 text-primary/60" />
-                  <span className="flex-1 min-w-0 truncate" aria-label={relativePath}>
-                    {displayPath}
-                  </span>
-                </div>
-              );
-            })}
-            {visibleDirectories.length > 0 && (visibleRecentFiles.length > 0 || visibleFiles.length > 0) && (
+            {visibleAgents.length > 0 && (visibleRecentFiles.length > 0 || visibleResults.length > 0) && (
               <div className="my-1 border-t border-border/60" />
             )}
             {visibleRecentFiles.map((file, index) => {
-              const rowIndex = visibleAgents.length + visibleDirectories.length + index;
+              const rowIndex = visibleAgents.length + index;
               const relativePath = file.relativePath || file.name;
               const displayPath = truncatePathMiddle(relativePath, { maxLength: 60 });
               const isSelected = selectedIndex === rowIndex;
@@ -561,11 +514,11 @@ export const FileMentionAutocomplete = React.forwardRef<FileMentionHandle, FileM
                 </div>
               );
             })}
-            {visibleRecentFiles.length > 0 && visibleFiles.length > 0 && (
+            {visibleRecentFiles.length > 0 && visibleResults.length > 0 && (
               <div className="my-1 border-t border-border/60" />
             )}
-            {visibleFiles.map((file, index) => {
-              const rowIndex = visibleAgents.length + visibleDirectories.length + visibleRecentFiles.length + index;
+            {visibleResults.map((file, index) => {
+              const rowIndex = visibleAgents.length + visibleRecentFiles.length + index;
               const relativePath = file.relativePath || file.name;
               const displayPath = truncatePathMiddle(relativePath, { maxLength: 60 });
               const isSelected = selectedIndex === rowIndex;
@@ -582,7 +535,9 @@ export const FileMentionAutocomplete = React.forwardRef<FileMentionHandle, FileM
                   onClick={() => handleFileSelect(file)}
                   onMouseMove={() => setSelectedIndex(rowIndex)}
                 >
-                  {getFileIcon(file)}
+                  {file.kind === 'directory'
+                    ? <Icon name="folder-3-fill" className="h-3.5 w-3.5 text-primary/60" />
+                    : getFileIcon(file)}
                   <span
                     ref={(el) => { labelRefs.current[rowIndex] = el; }}
                     className="relative flex-1 min-w-0 overflow-hidden file-mention-marquee-container"
@@ -613,12 +568,12 @@ export const FileMentionAutocomplete = React.forwardRef<FileMentionHandle, FileM
               );
 
               return (
-                <React.Fragment key={file.path}>
+                <React.Fragment key={`${file.kind}-${file.path}`}>
                   {item}
                 </React.Fragment>
               );
             })}
-            {visibleFiles.length === 0 && visibleDirectories.length === 0 && visibleRecentFiles.length === 0 && visibleAgents.length === 0 && (
+            {visibleResults.length === 0 && visibleRecentFiles.length === 0 && visibleAgents.length === 0 && (
               <div className="px-3 py-2 typography-ui-label text-muted-foreground">
                 {t('chat.fileMentionAutocomplete.empty')}
               </div>
diff --git a/packages/ui/src/components/chat/MarkdownRendererImpl.tsx b/packages/ui/src/components/chat/MarkdownRendererImpl.tsx
index b8af3e03..7a43ead2 100644
--- a/packages/ui/src/components/chat/MarkdownRendererImpl.tsx
+++ b/packages/ui/src/components/chat/MarkdownRendererImpl.tsx
@@ -345,6 +345,13 @@ const useFileReferenceInteractions = ({
     if (!container) {
       return;
     }
+    // Wait for the real directory: annotating against an empty/fallback
+    // directory issues stat probes under the wrong cache key (and the wrong
+    // server directory), and the pass reruns anyway once the directory
+    // resolves — every link ended up verified twice.
+    if (enabled && !effectiveDirectory) {
+      return;
+    }
     let cancelled = false;
     const fileReferenceLinkLimit = getFileReferenceLinkLimit();
     // On mobile surfaces, file-reference highlighting is disabled entirely — not
@@ -398,6 +405,19 @@ const useFileReferenceInteractions = ({
     };
 
     const annotateFileLinks = () => {
+      annotationWriteDepth += 1;
+      try {
+        annotateFileLinksInner();
+      } finally {
+        // Let the mutation events from our own writes flush before the
+        // observer starts listening for real content changes again.
+        queueMicrotask(() => {
+          annotationWriteDepth -= 1;
+        });
+      }
+    };
+
+    const annotateFileLinksInner = () => {
       if (fileReferencesEnabled) {
         wrapBlockCodePathTokens(container);
       }
@@ -526,7 +546,12 @@ const useFileReferenceInteractions = ({
 
     scheduleAnnotation(FILE_REFERENCE_ANNOTATION_DELAY_MS);
 
+    // Our own annotation writes (path-token wrapping, attribute updates) fire
+    // childList mutations too; observing them re-ran the whole pass — every
+    // link was scanned and verified twice per render.
+    let annotationWriteDepth = 0;
     const observer = new MutationObserver(() => {
+      if (annotationWriteDepth > 0) return;
       scheduleAnnotation(FILE_REFERENCE_ANNOTATION_DELAY_MS);
     });
     observer.observe(container, {
@@ -818,19 +843,39 @@ const useMorphdomMarkdown = ({
       // Reconcile per block: only re-morph blocks whose content changed, leaving
       // stable leading blocks untouched. Keeps per-stream-step DOM work bounded
       // to the trailing (growing) block instead of the whole message.
+      let enteredThisPass = 0;
       blocks.forEach((block, index) => {
         let el = existing[index];
+        let isNewBlock = false;
         if (!el) {
           el = document.createElement('div');
           el.setAttribute('data-md-block', '');
           el.style.display = 'contents';
           target.appendChild(el);
+          isNewBlock = true;
         }
         if (el.getAttribute('data-md-id') === block.id) return;
 
         const temp = document.createElement('div');
         temp.innerHTML = block.html;
         decorateMarkdown(temp, ctx);
+        if (isNewBlock && streaming && index > 0) {
+          // A freshly committed block enters with a short reveal. The class
+          // goes on the block's children — the wrapper is display:contents
+          // and cannot animate — and the transform never changes layout, so
+          // row measurement stays exact. Skipped for the first block so a
+          // full initial render does not shimmer. Several blocks committed
+          // in one tick cascade with a small stagger instead of popping in
+          // together.
+          const delayMs = Math.min(enteredThisPass, 4) * 55;
+          enteredThisPass += 1;
+          for (const child of Array.from(temp.children)) {
+            child.classList.add('oc-md-block-enter');
+            if (delayMs > 0 && child instanceof HTMLElement) {
+              child.style.setProperty('--oc-md-enter-delay', `${delayMs}ms`);
+            }
+          }
+        }
         const hadMermaidBlock = shouldRefreshMermaidViewers(el);
         const tempHasMermaidBlock = shouldRefreshMermaidViewers(temp);
         morphdom(el, temp, {
diff --git a/packages/ui/src/components/chat/MessageList.tsx b/packages/ui/src/components/chat/MessageList.tsx
index d573c1a9..4197f067 100644
--- a/packages/ui/src/components/chat/MessageList.tsx
+++ b/packages/ui/src/components/chat/MessageList.tsx
@@ -1,11 +1,10 @@
 import React from 'react';
 import type { Part } from '@opencode-ai/sdk/v2';
-import { elementScroll, useVirtualizer as useTanstackVirtualizer, type ReactVirtualizer, type VirtualItem } from '@tanstack/react-virtual';
+import { LegendList, type LegendListRef } from '@legendapp/list/react';
 
 import ChatMessage from './ChatMessage';
 import { areOptionalRenderRelevantMessagesEqual, areRelevantTurnGroupingContextsEqual, areRenderRelevantMessagesEqual } from './message/renderCompare';
 import TurnItem from './components/TurnItem';
-import type { AnimationHandlers, ContentChangeReason } from '@/hooks/useChatAutoFollow';
 import type { ChatMessageEntry, TurnRecord, TurnGroupingContext } from './lib/turns/types';
 import { useTurnRecords } from './hooks/useTurnRecords';
 import { applyRetryOverlay } from './lib/turns/applyRetryOverlay';
@@ -19,9 +18,9 @@ import { hasPendingUserSendAnimation, consumePendingUserSendAnimation } from '@/
 import { streamPerfCount, streamPerfMark, streamPerfMeasure } from '@/stores/utils/streamDebug';
 import type { StreamPhase } from './message/types';
 import { useGlobalSessionsStore } from '@/stores/useGlobalSessionsStore';
-import { useSessionParts } from '@/sync/sync-context';
-import { isMobileSurfaceRuntime } from '@/lib/runtimeSurface';
+import { useSessionPartsForMessages } from '@/sync/sync-context';
 import type { ReviewTransferDirection } from '@/lib/reviewFlow';
+import { resolveChatListAnchoredEndSpace, resolveTimelineIsAtEnd } from './lib/scroll/timelineScrollAnchoring';
 import {
     USER_SHELL_MARKER,
     isUserShellMarkerMessage,
@@ -29,96 +28,52 @@ import {
     type ShellBridgeDetails,
 } from './lib/shellBridge';
 
-const MESSAGE_LIST_VIRTUALIZE_THRESHOLD = 5;
 const EMPTY_STATIC_ENTRY_MESSAGES: ChatMessageEntry[] = [];
 const EMPTY_UNGROUPED_MESSAGE_IDS = new Set<string>();
-const TIMELINE_CACHE_LIMIT = 16;
 
-const sameKeys = (a: readonly string[] | undefined, b: readonly string[] | undefined): boolean => {
-    if (a === b) return true;
-    if (!a || !b) return false;
-    if (a.length !== b.length) return false;
-    return a.every((key, index) => key === b[index]);
-};
+// --- Timeline virtualization (@legendapp/list) -----------------------------
+// The timeline is a single virtualized list on every surface: history turns
+// AND the live streaming tail are rows of the same list, so the list owns one
+// coherent scroll position instead of arbitrating between a virtualizer and a
+// separately-rendered tail.
+//
+// Scroll behavior the list owns natively, which is why none of it exists here
+// any more:
+//   • `maintainScrollAtEnd` keeps the live edge pinned as rows grow.
+//   • `maintainVisibleContentPosition` preserves the read position when older
+//     history is prepended, replacing the manual anchor-hold and the mobile
+//     quiet-window prepend deferral.
+//   • `anchoredEndSpace` reserves the tail space that parks a just-sent
+//     message near the top of the viewport.
+const TIMELINE_ESTIMATED_ENTRY_SIZE = 320;
 
-// --- History virtualization (@tanstack/react-virtual) ----------------------
-// The history list virtualizes with @tanstack/react-virtual on all surfaces:
-// its core has bottom anchoring (anchorTo: 'end'), key-stable prepend
-// preservation, and native iOS touch/momentum deferral for scroll
-// adjustments — the failure modes that historically forced virtua off on
-// mobile and required manual prepend compensation on desktop.
-type TanstackVirtualizerInstance = ReactVirtualizer<HTMLDivElement, HTMLDivElement>;
-type HistoryEngine = 'none' | 'tanstack';
-
-const TANSTACK_ESTIMATED_ENTRY_SIZE = 320;
-const TANSTACK_OVERSCAN = 8;
-// Touch flings cover more distance between paints than desktop wheels; a
-// larger window keeps fast mobile scrolling over mounted rows.
-const TANSTACK_MOBILE_OVERSCAN = 16;
-const resolveTanstackOverscan = (): number => (
-    isMobileSurfaceRuntime() ? TANSTACK_MOBILE_OVERSCAN : TANSTACK_OVERSCAN
-);
-// Post-prepend anchor hold: measurements of freshly
-// prepended rows settle over multiple frames, so a single restore can be
-// invalidated by the next measurement pass. Re-assert the anchor until it
-// holds still for STABLE_FRAMES consecutive frames, giving up at MAX_FRAMES.
+// Anchor hold for an explicit viewport restore (session re-entry): row
+// measurements settle over several frames, so a single restore can be
+// invalidated by the next measurement pass. Re-assert until it holds still for
+// STABLE_FRAMES consecutive frames, giving up at MAX_FRAMES.
 const ANCHOR_HOLD_STABLE_FRAMES = 30;
 const ANCHOR_HOLD_MAX_FRAMES = 180;
-// Adaptive estimate bounds: only trust the session average once a few rows
-// are measured, and keep it inside sane turn-height bounds.
-const TANSTACK_ESTIMATE_MIN_SAMPLES = 5;
-const TANSTACK_ESTIMATE_MIN = 120;
-const TANSTACK_ESTIMATE_MAX = 1200;
-// "At bottom" tolerance for resize-adjustment decisions.
-const TANSTACK_AT_END_THRESHOLD_PX = 80;
 
-// Quiet-window prepend on mobile: while a touch drag or momentum scroll is
-// active, iOS owns the scroll position and ANY geometry change above the
-// viewport races against the native animation — a race that compensation
-// logic can only lose sometimes. So freshly loaded older history is held
-// (data already fetched, store already updated) and inserted into the
-// rendered list only once the gesture goes quiet. Safety valves: flush when
-// the user gets close to the top (a blank top is worse than a small hop) or
-// after MAX_HOLD_MS.
-const HISTORY_PREPEND_QUIET_MS = 160;
-const HISTORY_PREPEND_MAX_HOLD_MS = 1500;
-const HISTORY_PREPEND_NEAR_TOP_VIEWPORTS = 1.5;
-const HISTORY_PREPEND_MONITOR_INTERVAL_MS = 90;
-
-// A commit is a deferable prepend when older entries were inserted strictly
-// above the known content: the previous first key still exists deeper in the
-// list and the tail is unchanged. Anything else renders immediately.
-const isPrependAboveCommit = (previous: RenderEntry[], next: RenderEntry[]): boolean => {
-    if (previous.length === 0 || next.length <= previous.length) return false;
-    if (previous[previous.length - 1]?.key !== next[next.length - 1]?.key) return false;
-    const previousFirstKey = previous[0]?.key;
-    const insertedIndex = next.findIndex((entry) => entry.key === previousFirstKey);
-    return insertedIndex > 0;
+// Reserved tail space that parks an anchored row near the top of the viewport.
+// `onReady` fires once the list has measured the anchor, `onSizeChanged` when
+// the reserved size is recomputed.
+// Presentation-only props forwarded to the scroll container the list renders.
+// Deliberately narrow: the list owns scroll and layout callbacks on that
+// element, so only styling, focus and click-through are caller-controlled.
+type TimelineScrollContainerProps = {
+    className?: string;
+    style?: React.CSSProperties;
+    tabIndex?: number;
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+    'data-scrollbar'?: string;
+    'data-scroll-shadow'?: string;
 };
 
-const tanstackTimelineCache = new Map<string, { keys: readonly string[]; items: VirtualItem[] }>();
-
-const readTanstackTimelineCache = (sessionKey: string, keys: readonly string[]): VirtualItem[] | undefined => {
-    const entry = tanstackTimelineCache.get(sessionKey);
-    if (!entry) return undefined;
-    if (sameKeys(entry.keys, keys)) return entry.items;
-    tanstackTimelineCache.delete(sessionKey);
-    return undefined;
-};
-
-const writeTanstackTimelineCache = (
-    sessionKey: string,
-    keys: readonly string[],
-    virtualizer: TanstackVirtualizerInstance | null | undefined,
-): void => {
-    if (!virtualizer || keys.length === 0) return;
-    tanstackTimelineCache.delete(sessionKey);
-    tanstackTimelineCache.set(sessionKey, { keys: keys.slice(), items: virtualizer.takeSnapshot() });
-    while (tanstackTimelineCache.size > TIMELINE_CACHE_LIMIT) {
-        const oldest = tanstackTimelineCache.keys().next().value;
-        if (typeof oldest !== 'string') break;
-        tanstackTimelineCache.delete(oldest);
-    }
+type TimelineAnchoredEndSpace = {
+    anchorIndex: number;
+    anchorOffset?: number;
+    onReady?: (info: { anchorIndex: number | undefined; anchorKey: string | undefined; size: number }) => void;
+    onSizeChanged?: (size: number) => void;
 };
 
 const useStableEvent = <TArgs extends unknown[], TResult>(handler: (...args: TArgs) => TResult) => {
@@ -350,7 +305,6 @@ const withShellBridgeDetails = (message: ChatMessageEntry, details: ShellBridgeD
 
 interface MessageListProps {
     sessionKey: string;
-    disableStaging?: boolean;
     messages: ChatMessageEntry[];
     sessionIsWorking?: boolean;
     activeStreamingMessageId?: string | null;
@@ -361,12 +315,29 @@ interface MessageListProps {
         confirmedAt?: number;
         fallbackTimestamp?: number;
     } | null;
-    onMessageContentChange: (reason?: ContentChangeReason) => void;
-    getAnimationHandlers: (messageId: string) => AnimationHandlers;
     isLoadingOlder: boolean;
     scrollToBottom?: () => void;
-    scrollRef?: React.RefObject<HTMLDivElement | null>;
     directory?: string;
+    // The list owns its scroll container; the timeline scroll hook drives it
+    // through this ref and observes it through the callbacks below.
+    registerList?: (list: LegendListRef | null) => void;
+    // True while a real gesture owns the scroll; releases the list's own
+    // end pinning so the state machine, not the library heuristic, decides.
+    endPinningReleased?: boolean;
+    // The anchored row is identified by message id; the index it maps to is a
+    // property of the row model, which only this component knows.
+    anchorMessageId?: string | null;
+    onAnchorReady?: (messageId: string, anchorIndex: number) => void;
+    onAnchorSizeChanged?: (messageId: string) => void;
+    composerOverlayHeight?: number;
+    onIsAtEndChange?: (isAtEnd: boolean) => void;
+    onTimelineDataChange?: () => void;
+    // Content that used to sit as siblings of the list inside the scroll
+    // container. The list owns that container now, so they render as its
+    // header/footer and scroll with the rows exactly as before.
+    listHeader?: React.ReactNode;
+    listFooter?: React.ReactNode;
+    scrollContainerProps?: TimelineScrollContainerProps;
 }
 
 export interface MessageListHandle {
@@ -403,8 +374,6 @@ interface MessageRowProps {
     activeStreamingPhase?: StreamPhase | null;
     animateUserOnMount?: boolean;
     onUserAnimationConsumed?: (messageId: string) => void;
-    onContentChange: (reason?: ContentChangeReason) => void;
-    animationHandlers: AnimationHandlers;
     scrollToBottom?: () => void;
     reviewTransferDirection?: ReviewTransferDirection | null;
 }
@@ -419,8 +388,6 @@ const MessageRow = React.memo<MessageRowProps>(({
     activeStreamingPhase,
     animateUserOnMount,
     onUserAnimationConsumed,
-    onContentChange,
-    animationHandlers,
     scrollToBottom,
     reviewTransferDirection,
 }) => {
@@ -431,8 +398,6 @@ const MessageRow = React.memo<MessageRowProps>(({
             nextMessage={nextMessage}
             animateUserOnMount={animateUserOnMount}
             onUserAnimationConsumed={onUserAnimationConsumed}
-            onContentChange={onContentChange}
-            animationHandlers={animationHandlers}
             scrollToBottom={scrollToBottom}
             turnGroupingContext={turnGroupingContext}
             assistantHeaderMessageId={assistantHeaderMessageId}
@@ -450,20 +415,12 @@ const MessageRow = React.memo<MessageRowProps>(({
         && areOptionalRenderRelevantMessagesEqual(prev.nextMessage, next.nextMessage)
         && prev.animateUserOnMount === next.animateUserOnMount
         && prev.onUserAnimationConsumed === next.onUserAnimationConsumed
-        && prev.onContentChange === next.onContentChange
         && prev.scrollToBottom === next.scrollToBottom
         && areRelevantTurnGroupingContextsEqual(prevTurn, nextTurn, prev.message.info.id, resolveMessageRole(prev.message) === 'user')
         && prev.assistantHeaderMessageId === next.assistantHeaderMessageId
         && prev.isInActiveTurn === next.isInActiveTurn
         && prev.activeStreamingPhase === next.activeStreamingPhase
-        && prev.reviewTransferDirection === next.reviewTransferDirection
-        && prev.animationHandlers?.onChunk === next.animationHandlers?.onChunk
-        && prev.animationHandlers?.onComplete === next.animationHandlers?.onComplete
-        && prev.animationHandlers?.onStreamingCandidate === next.animationHandlers?.onStreamingCandidate
-        && prev.animationHandlers?.onAnimationStart === next.animationHandlers?.onAnimationStart
-        && prev.animationHandlers?.onReservationCancelled === next.animationHandlers?.onReservationCancelled
-        && prev.animationHandlers?.onReasoningBlock === next.animationHandlers?.onReasoningBlock
-        && prev.animationHandlers?.onAnimatedHeightChange === next.animationHandlers?.onAnimatedHeightChange;
+        && prev.reviewTransferDirection === next.reviewTransferDirection;
 });
 
 MessageRow.displayName = 'MessageRow';
@@ -477,8 +434,6 @@ interface TurnBlockProps {
     turnUiStates: Map<string, TurnUiState>;
     onToggleTurnGroup: (turnId: string) => void;
     chatRenderMode: 'sorted' | 'live';
-    onMessageContentChange: (reason?: ContentChangeReason) => void;
-    getAnimationHandlers: (messageId: string) => AnimationHandlers;
     scrollToBottom?: () => void;
     stickyUserHeader?: boolean;
     shouldAnimateUserMessage: (message: ChatMessageEntry) => boolean;
@@ -497,8 +452,6 @@ const TurnBlock = React.memo(({
     turnUiStates,
     onToggleTurnGroup,
     chatRenderMode,
-    onMessageContentChange,
-    getAnimationHandlers,
     scrollToBottom,
     stickyUserHeader = true,
     shouldAnimateUserMessage,
@@ -507,6 +460,7 @@ const TurnBlock = React.memo(({
     activeStreamingPhase,
     reviewTransferDirection,
 }: TurnBlockProps) => {
+
     const planModeEnabled = useFeatureFlagsStore((state) => state.planModeEnabled);
     const userMessageHidden = React.useMemo(
         () => isHiddenUserMessage(turn.userMessage, { planModeEnabled }),
@@ -735,19 +689,15 @@ const TurnBlock = React.memo(({
                     reviewTransferDirection={reviewTransferDirection}
                     animateUserOnMount={shouldAnimateUserMessage(message)}
                     onUserAnimationConsumed={onUserAnimationConsumed}
-                    onContentChange={onMessageContentChange}
-                    animationHandlers={getAnimationHandlers(message.info.id)}
                     scrollToBottom={scrollToBottom}
                 />
             );
         },
         [
-            getAnimationHandlers,
             isLastTurn,
             nextEntryFirstMessage,
             messageOrder.lookup,
             messageOrder.ordered,
-            onMessageContentChange,
             scrollToBottom,
             sessionIsWorking,
             chatRenderMode,
@@ -796,8 +746,6 @@ interface UngroupedMessageRowProps {
     message: ChatMessageEntry;
     previousMessage?: ChatMessageEntry;
     nextMessage?: ChatMessageEntry;
-    onMessageContentChange: (reason?: ContentChangeReason) => void;
-    getAnimationHandlers: (messageId: string) => AnimationHandlers;
     scrollToBottom?: () => void;
     shouldAnimateUserMessage: (message: ChatMessageEntry) => boolean;
     onUserAnimationConsumed: (messageId: string) => void;
@@ -810,8 +758,6 @@ const UngroupedMessageRow = React.memo(({
     message,
     previousMessage,
     nextMessage,
-    onMessageContentChange,
-    getAnimationHandlers,
     scrollToBottom,
     shouldAnimateUserMessage,
     onUserAnimationConsumed,
@@ -826,8 +772,6 @@ const UngroupedMessageRow = React.memo(({
             nextMessage={nextMessage}
             animateUserOnMount={shouldAnimateUserMessage(message)}
             onUserAnimationConsumed={onUserAnimationConsumed}
-            onContentChange={onMessageContentChange}
-            animationHandlers={getAnimationHandlers(message.info.id)}
             scrollToBottom={scrollToBottom}
             isInActiveTurn={Boolean(activeStreamingMessageId) && message.info.id === activeStreamingMessageId}
             activeStreamingPhase={message.info.id === activeStreamingMessageId ? activeStreamingPhase : null}
@@ -840,8 +784,6 @@ UngroupedMessageRow.displayName = 'UngroupedMessageRow';
 
 interface MessageListEntryProps {
     entry: RenderEntry;
-    onMessageContentChange: (reason?: ContentChangeReason) => void;
-    getAnimationHandlers: (messageId: string) => AnimationHandlers;
     scrollToBottom?: () => void;
     stickyUserHeader?: boolean;
     sessionIsWorking: boolean;
@@ -870,8 +812,6 @@ const turnContainsMessageId = (turn: TurnRecord, messageId: string | null | unde
 
 const MessageListEntry = React.memo(({
     entry,
-    onMessageContentChange,
-    getAnimationHandlers,
     scrollToBottom,
     stickyUserHeader,
     sessionIsWorking,
@@ -892,8 +832,6 @@ const MessageListEntry = React.memo(({
                 message={entry.message}
                 previousMessage={entry.previousMessage}
                 nextMessage={entry.nextMessage}
-                onMessageContentChange={onMessageContentChange}
-                getAnimationHandlers={getAnimationHandlers}
                 scrollToBottom={scrollToBottom}
                 shouldAnimateUserMessage={shouldAnimateUserMessage}
                 onUserAnimationConsumed={onUserAnimationConsumed}
@@ -919,8 +857,6 @@ const MessageListEntry = React.memo(({
             activeStreamingMessageId={activeStreamingMessageId}
             activeStreamingPhase={activeStreamingPhase}
             reviewTransferDirection={reviewTransferDirection}
-            onMessageContentChange={onMessageContentChange}
-            getAnimationHandlers={getAnimationHandlers}
             scrollToBottom={scrollToBottom}
             stickyUserHeader={stickyUserHeader}
         />
@@ -929,264 +865,241 @@ const MessageListEntry = React.memo(({
 
 MessageListEntry.displayName = 'MessageListEntry';
 
-// Inner component that renders staged turn entries.
-type StaticHistoryListProps = {
-    entries: RenderEntry[];
-    engine: HistoryEngine;
-    contentRef: React.RefObject<HTMLDivElement | null>;
-    scrollRef?: React.RefObject<HTMLDivElement | null>;
-    registerTanstackVirtualizer?: (virtualizer: TanstackVirtualizerInstance | null) => void;
-    virtualizerKey: string;
-    onMessageContentChange: (reason?: ContentChangeReason) => void;
-    getAnimationHandlers: (messageId: string) => AnimationHandlers;
+// Shared row state. Passed through context rather than closed over by
+// `renderItem` so the render callback keeps a stable identity — a changing
+// `renderItem` makes the list re-render every mounted row on every commit.
+type TimelineRowContextValue = {
     scrollToBottom?: () => void;
     stickyUserHeader: boolean;
     defaultActivityExpanded: boolean;
     turnUiStates: Map<string, TurnUiState>;
     onToggleTurnGroup: (turnId: string) => void;
     chatRenderMode: 'sorted' | 'live';
+    showTurnChangedFiles: boolean;
     shouldAnimateUserMessage: (message: ChatMessageEntry) => boolean;
     onUserAnimationConsumed: (messageId: string) => void;
     reviewTransferDirection?: ReviewTransferDirection | null;
+    // The live tail row renders through StreamingTailContent, which subscribes
+    // to streaming parts; every other row renders statically.
+    streamingTailKey: string | null;
+    directory?: string;
+    sessionIsWorking: boolean;
+    activeStreamingMessageId: string | null;
+    activeStreamingPhase: StreamPhase | null;
 };
 
-const StaticHistoryList = React.memo(({ entries, engine, contentRef, scrollRef, registerTanstackVirtualizer, virtualizerKey, onMessageContentChange, getAnimationHandlers, scrollToBottom, stickyUserHeader, defaultActivityExpanded, turnUiStates, onToggleTurnGroup, chatRenderMode, shouldAnimateUserMessage, onUserAnimationConsumed, reviewTransferDirection }: StaticHistoryListProps) => {
-    const isTanstack = engine === 'tanstack';
+const TimelineRowContext = React.createContext<TimelineRowContextValue | null>(null);
 
-    // --- Quiet-window prepend (mobile) --------------------------------------
-    // Gesture tracking for the deferred-prepend decision. Refs only: reading
-    // them never re-renders, and the render-phase reconcile below needs them.
-    const touchActiveRef = React.useRef(false);
-    const lastScrollAtRef = React.useRef(0);
-    const holdSinceRef = React.useRef<number | null>(null);
-    const deferPrepends = isTanstack && isMobileSurfaceRuntime();
+const TimelineRow = React.memo(({ entry }: { entry: RenderEntry }) => {
+    const context = React.useContext(TimelineRowContext);
+    if (!context) return null;
 
-    React.useEffect(() => {
-        if (!deferPrepends) return;
-        const element = scrollRef?.current;
-        if (!element) return;
-        const onTouchStart = () => { touchActiveRef.current = true; };
-        const onTouchEnd = () => { touchActiveRef.current = false; };
-        const onScroll = () => { lastScrollAtRef.current = performance.now(); };
-        element.addEventListener('touchstart', onTouchStart, { passive: true });
-        element.addEventListener('touchend', onTouchEnd, { passive: true });
-        element.addEventListener('touchcancel', onTouchEnd, { passive: true });
-        element.addEventListener('scroll', onScroll, { passive: true });
-        return () => {
-            element.removeEventListener('touchstart', onTouchStart);
-            element.removeEventListener('touchend', onTouchEnd);
-            element.removeEventListener('touchcancel', onTouchEnd);
-            element.removeEventListener('scroll', onScroll);
-        };
-    }, [deferPrepends, scrollRef]);
-
-    const isGestureActive = React.useCallback(() => (
-        touchActiveRef.current
-        || performance.now() - lastScrollAtRef.current < HISTORY_PREPEND_QUIET_MS
-    ), []);
-
-    const isNearTop = React.useCallback(() => {
-        const element = scrollRef?.current;
-        if (!element) return true;
-        return element.scrollTop < element.clientHeight * HISTORY_PREPEND_NEAR_TOP_VIEWPORTS;
-    }, [scrollRef]);
-
-    const [displayEntries, setDisplayEntries] = React.useState(entries);
-    // Render-phase reconcile (official derived-state pattern): adopt the new
-    // entries immediately unless this commit is a pure prepend-above landing
-    // in the middle of an active touch gesture — those wait for quiet.
-    let renderEntries = displayEntries;
-    if (entries !== displayEntries) {
-        const shouldHold = deferPrepends
-            && isPrependAboveCommit(displayEntries, entries)
-            && isGestureActive()
-            && !isNearTop()
-            && (holdSinceRef.current === null
-                || performance.now() - holdSinceRef.current < HISTORY_PREPEND_MAX_HOLD_MS);
-        if (shouldHold) {
-            if (holdSinceRef.current === null) holdSinceRef.current = performance.now();
-        } else {
-            holdSinceRef.current = null;
-            setDisplayEntries(entries);
-            renderEntries = entries;
-        }
-    } else if (holdSinceRef.current !== null) {
-        holdSinceRef.current = null;
-    }
-
-    // While a prepend is held, poll for the quiet window (touch/momentum have
-    // no completion event we can await) and flush by re-rendering.
-    const [, forceFlushTick] = React.useReducer((tick: number) => tick + 1, 0);
-    React.useEffect(() => {
-        if (!deferPrepends) return;
-        const timer = window.setInterval(() => {
-            if (holdSinceRef.current === null) return;
-            const expired = performance.now() - holdSinceRef.current >= HISTORY_PREPEND_MAX_HOLD_MS;
-            if (!isGestureActive() || isNearTop() || expired) {
-                forceFlushTick();
-            }
-        }, HISTORY_PREPEND_MONITOR_INTERVAL_MS);
-        return () => window.clearInterval(timer);
-    }, [deferPrepends, isGestureActive, isNearTop]);
-
-    const entriesRef = React.useRef(renderEntries);
-    entriesRef.current = renderEntries;
-    // Initial-only read: measurement cache restore is a mount-time concern;
-    // afterwards the live virtualizer owns measurements.
-    const [initialMeasurements] = React.useState(() => (
-        isTanstack
-            ? readTanstackTimelineCache(virtualizerKey, entries.map((entry) => entry.key))
-            : undefined
-    ));
-
-    const sizeContainerRef = React.useRef<HTMLDivElement | null>(null);
-    // Adaptive estimate: rows this session has actually measured are a far
-    // better predictor for the still-unmeasured ones than a fixed constant.
-    // Smaller estimate error → smaller anchor corrections when prepended rows
-    // measure in → less visible drift. The ref keeps estimateSize's identity
-    // stable so updating the average never triggers a global remeasure.
-    const estimatedEntrySizeRef = React.useRef(TANSTACK_ESTIMATED_ENTRY_SIZE);
-    const tanstackVirtualizer = useTanstackVirtualizer<HTMLDivElement, HTMLDivElement>({
-        count: renderEntries.length,
-        enabled: isTanstack,
-        getScrollElement: () => scrollRef?.current ?? null,
-        estimateSize: () => estimatedEntrySizeRef.current,
-        overscan: resolveTanstackOverscan(),
-        scrollToFn: (offset, options, instance) => {
-            // Expose the new total height before core writes an anchor
-            // correction so the browser does not clamp the offset to the old
-            // height.
-            const sizeElement = sizeContainerRef.current;
-            if (sizeElement) sizeElement.style.height = `${instance.getTotalSize()}px`;
-            elementScroll(offset, options, instance);
-        },
-        getItemKey: (index) => entriesRef.current[index]?.key ?? `index:${index}`,
-        // Bottom-anchored chat semantics: prepending older entries above the
-        // viewport must not move what the user is reading, and iOS-specific
-        // touch/momentum deferral for those adjustments lives in the core.
-        anchorTo: 'end',
-        initialOffset: () => Number.MAX_SAFE_INTEGER,
-        initialMeasurementsCache: initialMeasurements,
-    });
-    // Only compensate scroll for rows growing ABOVE the viewport (history
-    // remeasures, prepended pages). A row growing inside the viewport —
-    // expanding a tool call or thinking block — must grow DOWNWARD naturally;
-    // the end-anchored default made it expand upward. At the bottom,
-    // app-level auto-follow owns pinning, so skip there too instead of
-    // double-writing. (This is an instance field, not a constructor option.)
-    tanstackVirtualizer.shouldAdjustScrollPositionOnItemSizeChange = (item, _delta, instance) => {
-        if (instance.isAtEnd(TANSTACK_AT_END_THRESHOLD_PX)) return false;
-        const firstVisibleIndex = instance.range?.startIndex;
-        return firstVisibleIndex !== undefined && item.index < firstVisibleIndex;
-    };
-
-    React.useEffect(() => {
-        if (!isTanstack) return;
-        const sizes = tanstackVirtualizer.itemSizeCache;
-        if (sizes.size >= TANSTACK_ESTIMATE_MIN_SAMPLES) {
-            let total = 0;
-            for (const size of sizes.values()) total += size;
-            estimatedEntrySizeRef.current = Math.min(
-                TANSTACK_ESTIMATE_MAX,
-                Math.max(TANSTACK_ESTIMATE_MIN, Math.round(total / sizes.size)),
-            );
-        }
-    });
-
-    React.useEffect(() => {
-        if (!isTanstack) return;
-        registerTanstackVirtualizer?.(tanstackVirtualizer);
-        return () => {
-            writeTanstackTimelineCache(
-                virtualizerKey,
-                entriesRef.current.map((entry) => entry.key),
-                tanstackVirtualizer,
-            );
-            registerTanstackVirtualizer?.(null);
-        };
-    }, [isTanstack, registerTanstackVirtualizer, tanstackVirtualizer, virtualizerKey]);
-
-    const renderEntry = React.useCallback((entry: RenderEntry) => {
+    if (context.streamingTailKey === entry.key) {
         return (
-            <MessageListEntry
-                key={entry.key}
+            <StreamingTailContent
                 entry={entry}
-                onMessageContentChange={onMessageContentChange}
-                getAnimationHandlers={getAnimationHandlers}
-                scrollToBottom={scrollToBottom}
-                stickyUserHeader={stickyUserHeader}
-                sessionIsWorking={false}
-                defaultActivityExpanded={defaultActivityExpanded}
-                turnUiStates={turnUiStates}
-                onToggleTurnGroup={onToggleTurnGroup}
-                chatRenderMode={chatRenderMode}
-                shouldAnimateUserMessage={shouldAnimateUserMessage}
-                onUserAnimationConsumed={onUserAnimationConsumed}
-                activeStreamingMessageId={null}
-                activeStreamingPhase={null}
-                reviewTransferDirection={reviewTransferDirection}
+                directory={context.directory}
+                scrollToBottom={context.scrollToBottom}
+                stickyUserHeader={context.stickyUserHeader}
+                sessionIsWorking={context.sessionIsWorking}
+                defaultActivityExpanded={context.defaultActivityExpanded}
+                turnUiStates={context.turnUiStates}
+                onToggleTurnGroup={context.onToggleTurnGroup}
+                chatRenderMode={context.chatRenderMode}
+                showTurnChangedFiles={context.showTurnChangedFiles}
+                shouldAnimateUserMessage={context.shouldAnimateUserMessage}
+                onUserAnimationConsumed={context.onUserAnimationConsumed}
+                activeStreamingMessageId={context.activeStreamingMessageId}
+                activeStreamingPhase={context.activeStreamingPhase}
+                reviewTransferDirection={context.reviewTransferDirection}
             />
         );
-    }, [chatRenderMode, defaultActivityExpanded, getAnimationHandlers, onMessageContentChange, onToggleTurnGroup, onUserAnimationConsumed, reviewTransferDirection, scrollToBottom, shouldAnimateUserMessage, stickyUserHeader, turnUiStates]);
-
-    if (engine === 'none') {
-        return (
-            <div ref={contentRef} className="relative w-full">
-                {renderEntries.map((entry) => (
-                    <div
-                        key={entry.key}
-                        data-turn-entry={entry.key}
-                    >
-                        {renderEntry(entry)}
-                    </div>
-                ))}
-            </div>
-        );
     }
 
-    if (engine === 'tanstack') {
-        const virtualItems = tanstackVirtualizer.getVirtualItems();
-        const startOffset = virtualItems[0]?.start ?? 0;
-        // Rendered rows stay in normal flow inside a single offset wrapper (not
-        // per-row absolute positioning) so per-turn sticky user headers keep
-        // working against the scroll container. The offset MUST be padding, not
-        // transform: a transformed ancestor becomes the sticky containing block,
-        // so headers would stick to the wrapper's (arbitrary, overscan-dependent)
-        // top edge mid-list and float over the previous turn. Padding only
-        // changes when the virtual window shifts — not per scroll frame — so the
-        // layout cost is negligible.
-        return (
-            <div ref={sizeContainerRef} className="relative w-full" style={{ height: tanstackVirtualizer.getTotalSize() }}>
-                <div style={{ paddingTop: `${startOffset}px` }}>
-                    {virtualItems.map((item) => {
-                        const entry = renderEntries[item.index];
-                        if (!entry) return null;
-                        return (
-                            <div
-                                key={entry.key}
-                                data-index={item.index}
-                                ref={tanstackVirtualizer.measureElement}
-                                data-turn-entry={entry.key}
-                            >
-                                {renderEntry(entry)}
-                            </div>
-                        );
-                    })}
-                </div>
-            </div>
-        );
-    }
-
-    return null;
+    return (
+        <MessageListEntry
+            entry={entry}
+            scrollToBottom={context.scrollToBottom}
+            stickyUserHeader={context.stickyUserHeader}
+            sessionIsWorking={false}
+            defaultActivityExpanded={context.defaultActivityExpanded}
+            turnUiStates={context.turnUiStates}
+            onToggleTurnGroup={context.onToggleTurnGroup}
+            chatRenderMode={context.chatRenderMode}
+            shouldAnimateUserMessage={context.shouldAnimateUserMessage}
+            onUserAnimationConsumed={context.onUserAnimationConsumed}
+            activeStreamingMessageId={null}
+            activeStreamingPhase={null}
+            reviewTransferDirection={context.reviewTransferDirection}
+        />
+    );
 });
 
-StaticHistoryList.displayName = 'StaticHistoryList';
+TimelineRow.displayName = 'TimelineRow';
+
+const timelineKeyExtractor = (item: RenderEntry): string => item.key;
+
+// Row type drives container reuse. Turn blocks and ungrouped messages have very
+// different shapes, so keeping them in separate pools avoids re-measuring a
+// container every time one replaces the other.
+const timelineItemType = (item: RenderEntry): string => item.kind;
+
+const renderTimelineItem = ({ item }: { item: RenderEntry }) => <TimelineRow entry={item} />;
+
+type TimelineListProps = {
+    entries: RenderEntry[];
+    streamingTailKey: string | null;
+    registerList: (list: LegendListRef | null) => void;
+    endPinningReleased: boolean;
+    anchoredEndSpace?: {
+        anchorIndex: number;
+        anchorOffset?: number;
+        onReady?: (info: { anchorIndex: number | undefined; anchorKey: string | undefined; size: number }) => void;
+        onSizeChanged?: (size: number) => void;
+    };
+    composerOverlayHeight: number;
+    onIsAtEndChange: (isAtEnd: boolean) => void;
+    onTimelineDataChange: () => void;
+    listHeader?: React.ReactNode;
+    listFooter?: React.ReactNode;
+    scrollContainerProps?: TimelineScrollContainerProps;
+    rowContext: TimelineRowContextValue;
+};
+
+const TimelineList = React.memo(({
+    entries,
+    registerList,
+    endPinningReleased,
+    anchoredEndSpace,
+    composerOverlayHeight,
+    onIsAtEndChange,
+    onTimelineDataChange,
+    listHeader,
+    listFooter,
+    scrollContainerProps,
+    rowContext,
+}: TimelineListProps) => {
+    const listRef = React.useRef<LegendListRef | null>(null);
+    // With streaming auto-follow off, content growth must never move the
+    // viewport; explicit commands (the scroll-to-bottom pill, session open)
+    // still scroll through the imperative handle.
+    const streamingAutoFollowEnabled = useUIStore((state) => state.streamingAutoFollowEnabled);
+    const isAtEndRef = React.useRef(true);
+
+    const setListRef = React.useCallback((list: LegendListRef | null) => {
+        listRef.current = list;
+        registerList(list);
+    }, [registerList]);
+
+    // A width change re-wraps every row, so all content above the viewport
+    // changes height at once; without size compensation the accumulated delta
+    // throws the read position around. Size restoration stays off otherwise —
+    // rows growing in place (a tool result expanding) must grow downward —
+    // so compensation is enabled only while the list width is actively
+    // resizing, and released shortly after it settles.
+    const [isWidthResizing, setIsWidthResizing] = React.useState(false);
+    React.useEffect(() => {
+        const node = listRef.current?.getScrollableNode();
+        if (!node) return;
+        let lastWidth: number | null = null;
+        let quietTimer: ReturnType<typeof setTimeout> | null = null;
+        const observer = new ResizeObserver((observerEntries) => {
+            const width = observerEntries[observerEntries.length - 1]?.contentRect.width;
+            if (typeof width !== 'number') return;
+            if (lastWidth === null) {
+                lastWidth = width;
+                return;
+            }
+            if (Math.abs(width - lastWidth) < 1) return;
+            lastWidth = width;
+            setIsWidthResizing(true);
+            if (quietTimer !== null) clearTimeout(quietTimer);
+            quietTimer = setTimeout(() => {
+                quietTimer = null;
+                setIsWidthResizing(false);
+            }, 300);
+        });
+        observer.observe(node);
+        return () => {
+            observer.disconnect();
+            if (quietTimer !== null) clearTimeout(quietTimer);
+        };
+    }, []);
+
+    // The list reports scroll continuously; only end-crossings are interesting,
+    // so the edge is debounced to a state transition here rather than pushing a
+    // callback on every frame.
+    const handleScroll = React.useCallback(() => {
+        const state = listRef.current?.getState();
+        if (!state) return;
+        const isAtEnd = resolveTimelineIsAtEnd(state);
+        if (typeof isAtEnd !== 'boolean' || isAtEnd === isAtEndRef.current) return;
+        isAtEndRef.current = isAtEnd;
+        onIsAtEndChange(isAtEnd);
+    }, [onIsAtEndChange]);
+
+    // Data changes are the only moment an automatic correction can be needed;
+    // the owning hook decides whether one actually applies.
+    React.useEffect(() => {
+        onTimelineDataChange();
+    }, [entries, onTimelineDataChange]);
+
+    const header = React.useMemo(() => (listHeader ? <>{listHeader}</> : undefined), [listHeader]);
+    const footer = React.useMemo(() => (listFooter ? <>{listFooter}</> : undefined), [listFooter]);
+
+    return (
+        <TimelineRowContext.Provider value={rowContext}>
+            <LegendList<RenderEntry>
+                ref={setListRef}
+                data={entries}
+                keyExtractor={timelineKeyExtractor}
+                getItemType={timelineItemType}
+                renderItem={renderTimelineItem}
+                estimatedItemSize={TIMELINE_ESTIMATED_ENTRY_SIZE}
+                initialScrollAtEnd
+                // Chat rows own internal state (expanded tool calls, reveal
+                // animations); recycling a container into a different row would
+                // carry that state across.
+                recycleItems={false}
+                {...(anchoredEndSpace ? { anchoredEndSpace } : {})}
+                contentInsetEndAdjustment={composerOverlayHeight}
+                // While a turn is anchored, the reserved end space — not the
+                // live edge — defines where the viewport rests.
+                // Also released while the width resizes: re-pinning against
+                // rows that are still re-measuring shakes the pinned
+                // viewport; the owning hook re-asserts the end once the
+                // resize settles.
+                maintainScrollAtEnd={anchoredEndSpace || !streamingAutoFollowEnabled || isWidthResizing || endPinningReleased
+                    ? false
+                    // Animated only while the session actively streams: there
+                    // the block-step growth turns each correction into a glide
+                    // and reveal + scroll read as one motion. Outside of a live
+                    // stream — opening a historical session, late measurements —
+                    // corrections must be instant: an animated catch-up scrolls
+                    // visibly through the whole conversation on open, and an
+                    // in-flight glide can supersede explicit navigation.
+                    : {
+                        animated: rowContext.sessionIsWorking,
+                        on: { dataChange: true, itemLayout: true, layout: true, footerLayout: true },
+                    }}
+                // Prepending older history must not move what the user is
+                // reading. Size restoration applies only during a width
+                // resize — see the observer above.
+                maintainVisibleContentPosition={{ data: true, size: isWidthResizing }}
+                onScroll={handleScroll}
+                ListHeaderComponent={header}
+                ListFooterComponent={footer}
+                {...scrollContainerProps}
+            />
+        </TimelineRowContext.Provider>
+    );
+});
+
+TimelineList.displayName = 'TimelineList';
 
 const StreamingTailContent: React.FC<{
     entry: RenderEntry;
     directory?: string;
-    onMessageContentChange: (reason?: ContentChangeReason) => void;
-    getAnimationHandlers: (messageId: string) => AnimationHandlers;
     scrollToBottom?: () => void;
     stickyUserHeader: boolean;
     sessionIsWorking: boolean;
@@ -1203,8 +1116,6 @@ const StreamingTailContent: React.FC<{
 }> = ({
     entry,
     directory,
-    onMessageContentChange,
-    getAnimationHandlers,
     scrollToBottom,
     stickyUserHeader,
     sessionIsWorking,
@@ -1219,21 +1130,26 @@ const StreamingTailContent: React.FC<{
     activeStreamingPhase,
     reviewTransferDirection,
 }) => {
-    const liveParts = useSessionParts(activeStreamingMessageId ?? '', directory);
+    // Overlay live parts on every message of the tail, not only the one
+    // currently streaming: a finished step message's base record can lag the
+    // part store, and rendering it from that stale snapshot briefly unmounts
+    // its completed tool parts when the stream hands off to the next message.
+    const tailMessageIds = React.useMemo(() => {
+        if (entry.kind === 'turn') return entry.turn.assistantMessageIds;
+        return [entry.message.info.id];
+    }, [entry]);
+    const livePartsByMessageId = useSessionPartsForMessages(tailMessageIds, directory);
     const planModeEnabled = useFeatureFlagsStore((state) => state.planModeEnabled);
     const liveEntry = React.useMemo(() => buildLiveStreamingEntry(entry, {
-        activeStreamingMessageId,
-        liveParts,
+        livePartsByMessageId,
         showTextJustificationActivity: chatRenderMode === 'sorted',
         showTurnChangedFiles,
         mergeHiddenUserTurns: { planModeEnabled },
-    }), [activeStreamingMessageId, chatRenderMode, entry, liveParts, showTurnChangedFiles, planModeEnabled]);
+    }), [chatRenderMode, entry, livePartsByMessageId, showTurnChangedFiles, planModeEnabled]);
 
     return (
         <MessageListEntry
             entry={liveEntry}
-            onMessageContentChange={onMessageContentChange}
-            getAnimationHandlers={getAnimationHandlers}
             scrollToBottom={scrollToBottom}
             stickyUserHeader={stickyUserHeader}
             sessionIsWorking={sessionIsWorking}
@@ -1259,11 +1175,19 @@ const MessageList = React.forwardRef<MessageListHandle, MessageListProps>(({
     activeStreamingMessageId = null,
     activeStreamingPhase = null,
     retryOverlay = null,
-    onMessageContentChange,
-    getAnimationHandlers,
     scrollToBottom,
-    scrollRef,
     directory,
+    registerList,
+    endPinningReleased = false,
+    anchorMessageId = null,
+    onAnchorReady,
+    onAnchorSizeChanged,
+    composerOverlayHeight = 0,
+    onIsAtEndChange,
+    onTimelineDataChange,
+    listHeader,
+    listFooter,
+    scrollContainerProps,
 }, ref) => {
     streamPerfMark('react.message_list_render');
     streamPerfCount('ui.message_list.render');
@@ -1281,7 +1205,6 @@ const MessageList = React.forwardRef<MessageListHandle, MessageListProps>(({
         previousOrder: string[];
         animatedIds: Set<string>;
     }>({ sessionKey: undefined, previousOrder: [], animatedIds: new Set() });
-    const stableGetAnimationHandlers = useStableEvent(getAnimationHandlers);
     const stableScrollToBottom = useStableEvent(() => {
         scrollToBottom?.();
     });
@@ -1357,16 +1280,18 @@ const MessageList = React.forwardRef<MessageListHandle, MessageListProps>(({
         return output;
     }), [messages]);
 
-    const historyContentRef = React.useRef<HTMLDivElement | null>(null);
-    const resolveScrollContainer = React.useCallback((): HTMLDivElement | null => {
-        if (scrollRef?.current) {
-            return scrollRef.current;
+    // The list owns the scroll container. The DOM fallback covers the window
+    // between mount and the list handing us its node.
+    const resolveScrollContainer = React.useCallback((): HTMLElement | null => {
+        const listNode = listRef.current?.getScrollableNode();
+        if (listNode) {
+            return listNode;
         }
         if (typeof document === 'undefined') {
             return null;
         }
         return document.querySelector<HTMLDivElement>('[data-scrollbar="chat"]');
-    }, [scrollRef]);
+    }, []);
 
     const displayMessages = React.useMemo(() => streamPerfMeasure('ui.message_list.retry_overlay_ms', () => {
         return applyRetryOverlay(baseDisplayMessages, {
@@ -1483,30 +1408,27 @@ const MessageList = React.forwardRef<MessageListHandle, MessageListProps>(({
             return { ...entry, nextEntryFirstMessage };
         });
     }, [staticRenderEntries, trailingEntryFirstMessage]);
-    // Mobile always starts with the same virtualized engine it will use after
-    // pagination. Switching a short list from normal DOM to TanStack during a
-    // prepend remounts the history subtree, and the newly enabled end-anchored
-    // virtualizer initializes at the bottom before it has prior keyed state.
-    // Desktop keeps the small-list threshold where that transition is not tied
-    // to the explicit mobile load-older interaction.
-    const shouldVirtualizeHistory = isMobileSurfaceRuntime()
-        || historyEntries.length >= MESSAGE_LIST_VIRTUALIZE_THRESHOLD;
-    const historyEngine: HistoryEngine = shouldVirtualizeHistory ? 'tanstack' : 'none';
-    const tanstackVirtualizerRef = React.useRef<TanstackVirtualizerInstance | null>(null);
-    const registerTanstackVirtualizer = React.useCallback((virtualizer: TanstackVirtualizerInstance | null) => {
-        tanstackVirtualizerRef.current = virtualizer;
-    }, []);
+    // Every surface uses the same virtualized list for the whole timeline —
+    // there is no small-list DOM path to transition out of, which is what used
+    // to remount the history subtree mid-prepend.
+    const listRef = React.useRef<LegendListRef | null>(null);
+    const handleRegisterList = React.useCallback((list: LegendListRef | null) => {
+        listRef.current = list;
+        registerList?.(list);
+    }, [registerList]);
 
     const allEntries = React.useMemo(() => {
         return trailingStreamingEntry ? [...historyEntries, trailingStreamingEntry] : historyEntries;
     }, [historyEntries, trailingStreamingEntry]);
 
-    const stableHistoryContentChange = useStableEvent((reason?: ContentChangeReason) => {
-        onMessageContentChange(reason);
+    // Stable identities: these reach the list, where a changing callback would
+    // re-render every mounted row.
+    const stableIsAtEndChange = useStableEvent((isAtEnd: boolean) => {
+        onIsAtEndChange?.(isAtEnd);
     });
 
-    const stableTailContentChange = useStableEvent((reason?: ContentChangeReason) => {
-        onMessageContentChange(reason);
+    const stableTimelineDataChange = useStableEvent(() => {
+        onTimelineDataChange?.();
     });
 
     const currentUserOrder = React.useMemo(() => {
@@ -1591,27 +1513,26 @@ const MessageList = React.forwardRef<MessageListHandle, MessageListProps>(({
         return container.querySelector(`[data-message-id="${messageId}"]`);
     }, [resolveScrollContainer]);
 
+    // Accepts any index the list renders, the trailing streaming entry
+    // included — it lives at historyEntries.length and is a legitimate
+    // navigation target (the timeline rail's last item).
     const scrollHistoryIndexIntoView = React.useCallback((index: number) => {
-        if (index < 0 || index >= historyEntries.length) {
+        if (index < 0 || index >= allEntries.length) {
             return false;
         }
 
-        if (!shouldVirtualizeHistory) {
+        const list = listRef.current;
+        if (!list) {
             return false;
         }
 
-        const virtualizer = tanstackVirtualizerRef.current;
-        if (!virtualizer) {
-            return false;
-        }
-
-        // Smooth scrolling can stop at a stale offset while unmounted,
-        // variable-height rows replace estimates with real measurements. Use
-        // exact auto-reconciliation; mounted targets still take the smooth DOM
-        // path below.
-        virtualizer.scrollToIndex(index, { align: 'start', behavior: 'auto' });
+        // Unanimated: an unmounted target's position is still an estimate, and
+        // a smooth scroll would end at that stale offset once the real
+        // measurement replaces it. Mounted targets still take the smooth DOM
+        // path in scrollMessageElementIntoView.
+        void list.scrollToIndex({ index, animated: false, viewPosition: 0 });
         return true;
-    }, [historyEntries.length, shouldVirtualizeHistory]);
+    }, [allEntries.length]);
 
     const scrollMessageElementIntoView = React.useCallback((messageId: string, behavior: ScrollBehavior = 'auto') => {
         const container = resolveScrollContainer();
@@ -1654,10 +1575,6 @@ const MessageList = React.forwardRef<MessageListHandle, MessageListProps>(({
                     return true;
                 }
 
-                const targetIsTail = trailingStreamingEntry !== undefined && index >= historyEntries.length;
-                if (targetIsTail) {
-                    return false;
-                }
 
                 return scrollHistoryIndexIntoView(index);
             },
@@ -1670,11 +1587,7 @@ const MessageList = React.forwardRef<MessageListHandle, MessageListProps>(({
                 }
 
                 return scrollMessageElementIntoView(messageId, behavior)
-                    || (
-                        trailingStreamingEntry !== undefined && index >= historyEntries.length
-                            ? false
-                            : scrollHistoryIndexIntoView(index)
-                    );
+                    || scrollHistoryIndexIntoView(index);
             },
 
             holdViewportAnchor: (anchor) => {
@@ -1718,7 +1631,9 @@ const MessageList = React.forwardRef<MessageListHandle, MessageListProps>(({
                 window.requestAnimationFrame(step);
             },
 
-            isHistoryVirtualized: () => shouldVirtualizeHistory,
+            // The timeline is always virtualized now; the flag stays so callers
+            // that branch on it keep compiling and take the virtualized path.
+            isHistoryVirtualized: () => true,
 
             captureViewportAnchor: () => {
                 const container = resolveScrollContainer();
@@ -1790,14 +1705,15 @@ const MessageList = React.forwardRef<MessageListHandle, MessageListProps>(({
             },
 
             scrollToBottom: () => {
-                if (shouldVirtualizeHistory && historyEntries.length > 0 && tanstackVirtualizerRef.current) {
-                    tanstackVirtualizerRef.current.scrollToEnd();
+                const list = listRef.current;
+                if (list) {
+                    void list.scrollToEnd({ animated: false });
                     return;
                 }
                 const container = resolveScrollContainer();
                 if (!container) return;
                 // Overshoot so the browser clamps to the exact fractional
-                // maximum (scrollHeight is integer-rounded) — see useChatAutoFollow.
+                // maximum (scrollHeight is integer-rounded).
                 container.scrollTop = container.scrollHeight + 4096;
             },
         };
@@ -1814,65 +1730,85 @@ const MessageList = React.forwardRef<MessageListHandle, MessageListProps>(({
         return () => {
             objectRef.current = null;
         };
-    }, [findMessageElement, historyEntries.length, messageIndexMap, resolveScrollContainer, scrollHistoryIndexIntoView, scrollMessageElementIntoView, shouldVirtualizeHistory, trailingStreamingEntry, turnIndexMap, ref]);
+    }, [findMessageElement, historyEntries.length, messageIndexMap, resolveScrollContainer, scrollHistoryIndexIntoView, scrollMessageElementIntoView, turnIndexMap, ref]);
 
-    const disableFadeIn = false;
+    const anchoredEndSpace = React.useMemo<TimelineAnchoredEndSpace | undefined>(() => {
+        const resolved = resolveChatListAnchoredEndSpace(
+            allEntries,
+            anchorMessageId,
+            (entry) => (entry.kind === 'turn' ? entry.turn.userMessage.info.id : entry.message.info.id),
+        );
+        if (!resolved || !anchorMessageId) {
+            return undefined;
+        }
+        return {
+            ...resolved,
+            onReady: (info) => {
+                if (info.anchorIndex === undefined) return;
+                onAnchorReady?.(anchorMessageId, info.anchorIndex);
+            },
+            onSizeChanged: () => {
+                onAnchorSizeChanged?.(anchorMessageId);
+            },
+        };
+    }, [allEntries, anchorMessageId, onAnchorReady, onAnchorSizeChanged]);
+
+    const rowContext = React.useMemo(() => ({
+        scrollToBottom: stableScrollToBottom,
+        stickyUserHeader,
+        defaultActivityExpanded,
+        turnUiStates,
+        onToggleTurnGroup: toggleTurnGroup,
+        chatRenderMode,
+        showTurnChangedFiles,
+        shouldAnimateUserMessage,
+        onUserAnimationConsumed,
+        reviewTransferDirection,
+        streamingTailKey: trailingStreamingEntry?.key ?? null,
+        directory,
+        sessionIsWorking,
+        activeStreamingMessageId,
+        activeStreamingPhase,
+    }), [
+        activeStreamingMessageId,
+        activeStreamingPhase,
+        chatRenderMode,
+        defaultActivityExpanded,
+        directory,
+        onUserAnimationConsumed,
+        reviewTransferDirection,
+        sessionIsWorking,
+        shouldAnimateUserMessage,
+        showTurnChangedFiles,
+        stableScrollToBottom,
+        stickyUserHeader,
+        toggleTurnGroup,
+        trailingStreamingEntry?.key,
+        turnUiStates,
+    ]);
 
     return (
-        <div>
-                <FadeInDisabledProvider disabled={disableFadeIn}>
-                    <div className="relative w-full">
-                        {/* Virtualized history rows unmount/remount during scroll;
-                            re-running the reveal fade on every remount reads as
-                            blinking. History content is never "new", so fade-in
-                            is disabled there — the streaming tail keeps it. */}
-                        <FadeInDisabledProvider disabled={shouldVirtualizeHistory}>
-                            <StaticHistoryList
-                                key={sessionKey}
-                                entries={historyEntries}
-                                engine={historyEngine}
-                                contentRef={historyContentRef}
-                                scrollRef={scrollRef}
-                                registerTanstackVirtualizer={registerTanstackVirtualizer}
-                                virtualizerKey={sessionKey}
-                                onMessageContentChange={stableHistoryContentChange}
-                                getAnimationHandlers={stableGetAnimationHandlers}
-                                scrollToBottom={stableScrollToBottom}
-                                stickyUserHeader={stickyUserHeader}
-                                defaultActivityExpanded={defaultActivityExpanded}
-                                turnUiStates={turnUiStates}
-                                onToggleTurnGroup={toggleTurnGroup}
-                                chatRenderMode={chatRenderMode}
-                                shouldAnimateUserMessage={shouldAnimateUserMessage}
-                                onUserAnimationConsumed={onUserAnimationConsumed}
-                                reviewTransferDirection={reviewTransferDirection}
-                            />
-                        </FadeInDisabledProvider>
-                        {trailingStreamingEntry ? (
-                            <StreamingTailContent
-                                entry={trailingStreamingEntry}
-                                directory={directory}
-                                onMessageContentChange={stableTailContentChange}
-                                getAnimationHandlers={stableGetAnimationHandlers}
-                                scrollToBottom={stableScrollToBottom}
-                                stickyUserHeader={stickyUserHeader}
-                                sessionIsWorking={sessionIsWorking}
-                                defaultActivityExpanded={defaultActivityExpanded}
-                                turnUiStates={turnUiStates}
-                                onToggleTurnGroup={toggleTurnGroup}
-                                chatRenderMode={chatRenderMode}
-                                showTurnChangedFiles={showTurnChangedFiles}
-                                shouldAnimateUserMessage={shouldAnimateUserMessage}
-                                onUserAnimationConsumed={onUserAnimationConsumed}
-                                activeStreamingMessageId={activeStreamingMessageId}
-                                activeStreamingPhase={activeStreamingPhase}
-                                reviewTransferDirection={reviewTransferDirection}
-                            />
-                        ) : null}
-                    </div>
-                </FadeInDisabledProvider>
-
-        </div>
+        // Virtualized rows unmount/remount during scroll; re-running the reveal
+        // fade on every remount reads as blinking. Rows are never "new" from the
+        // list's point of view, so fade-in is disabled for them — content
+        // arriving inside the streaming tail keeps its own animations.
+        <FadeInDisabledProvider disabled>
+            <TimelineList
+                key={sessionKey}
+                entries={allEntries}
+                streamingTailKey={trailingStreamingEntry?.key ?? null}
+                registerList={handleRegisterList}
+                anchoredEndSpace={anchoredEndSpace}
+                composerOverlayHeight={composerOverlayHeight}
+                onIsAtEndChange={stableIsAtEndChange}
+                onTimelineDataChange={stableTimelineDataChange}
+                listHeader={listHeader}
+                listFooter={listFooter}
+                scrollContainerProps={scrollContainerProps}
+                rowContext={rowContext}
+                endPinningReleased={endPinningReleased}
+            />
+        </FadeInDisabledProvider>
     );
 });
 
diff --git a/packages/ui/src/components/chat/ModelControls.tsx b/packages/ui/src/components/chat/ModelControls.tsx
index a290fde8..7a953090 100644
--- a/packages/ui/src/components/chat/ModelControls.tsx
+++ b/packages/ui/src/components/chat/ModelControls.tsx
@@ -25,7 +25,8 @@ import { useDeviceInfo } from '@/lib/device';
 import { mergeModelMetadataWithLiveModel } from '@/lib/modelMetadata';
 import { getModelDisplayName as getSharedModelDisplayName } from '@/lib/modelDisplay';
 import { getEditModeColors } from '@/lib/permissions/editModeColors';
-import { cn, fuzzyMatch } from '@/lib/utils';
+import { cn } from '@/lib/utils';
+import { matchesRankQuery, rankByQuery } from '@/lib/search/fuzzySearch';
 import { useContextStore } from '@/stores/contextStore';
 import { useConfigStore } from '@/stores/useConfigStore';
 import { useSessionUIStore } from '@/sync/session-ui-store';
@@ -528,13 +529,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
 
     const sortedAndFilteredAgents = React.useMemo(() => {
         const sorted = [...selectableDesktopAgents].sort((a, b) => a.name.localeCompare(b.name));
-        if (!agentSearchQuery.trim()) {
-            return sorted;
-        }
-        return sorted.filter((agent) =>
-            fuzzyMatch(agent.name, agentSearchQuery) ||
-            (agent.description && fuzzyMatch(agent.description, agentSearchQuery))
-        );
+        return rankByQuery(sorted, agentSearchQuery, (agent) => [agent.name, agent.description]);
     }, [selectableDesktopAgents, agentSearchQuery]);
 
     const defaultAgentName = React.useMemo(() => {
@@ -580,38 +575,10 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
         return result;
     }, [providers, hiddenModels]);
 
-    const normalizeModelSearchValue = React.useCallback((value: string) => {
-        const lower = value.toLowerCase().trim();
-        const compact = lower.replace(/[^a-z0-9]/g, '');
-        const tokens = lower.split(/[^a-z0-9]+/).filter(Boolean);
-        return { lower, compact, tokens };
-    }, []);
-
-    const matchesModelSearch = React.useCallback((candidate: string, query: string) => {
-        const normalizedQuery = normalizeModelSearchValue(query);
-        if (!normalizedQuery.lower) {
-            return true;
-        }
-
-        const normalizedCandidate = normalizeModelSearchValue(candidate);
-        if (normalizedCandidate.lower.includes(normalizedQuery.lower)) {
-            return true;
-        }
-
-        if (normalizedQuery.compact.length >= 2 && normalizedCandidate.compact.includes(normalizedQuery.compact)) {
-            return true;
-        }
-
-        if (normalizedQuery.tokens.length === 0) {
-            return false;
-        }
-
-        return normalizedQuery.tokens.every((queryToken) =>
-            normalizedCandidate.tokens.some((candidateToken) =>
-                candidateToken.startsWith(queryToken) || candidateToken.includes(queryToken)
-            )
-        );
-    }, [normalizeModelSearchValue]);
+    const matchesModelSearch = React.useCallback(
+        (candidate: string, query: string) => matchesRankQuery([candidate], query),
+        [],
+    );
 
     const currentModelForMetadata = currentModelId
         ? models.find((model: ProviderModel) => model.id === currentModelId)
diff --git a/packages/ui/src/components/chat/PendingChangesBar.tsx b/packages/ui/src/components/chat/PendingChangesBar.tsx
index 08fc6970..2573cea3 100644
--- a/packages/ui/src/components/chat/PendingChangesBar.tsx
+++ b/packages/ui/src/components/chat/PendingChangesBar.tsx
@@ -107,7 +107,7 @@ export const PendingChangesBar: React.FC = React.memo(() => {
             >
                 <Icon name="file-edit" className="h-3.5 w-3.5 flex-shrink-0 text-[var(--status-warning)]" />
                 <span className="min-w-0 typography-ui-label text-foreground flex-shrink-0">{labelHead}</span>
-                <span className="status-row__changed-label min-w-0 typography-ui-label text-foreground truncate">
+                <span className="composer-status-bar__changed-label min-w-0 typography-ui-label text-foreground truncate">
                     {t('chat.pendingChanges.changedInWorkspace')}
                 </span>
                 <span className="text-[0.75rem] tabular-nums inline-flex items-baseline gap-1 flex-shrink-0">
diff --git a/packages/ui/src/components/chat/StatusRow.tsx b/packages/ui/src/components/chat/StatusRow.tsx
index 83b4b52b..a577a3d2 100644
--- a/packages/ui/src/components/chat/StatusRow.tsx
+++ b/packages/ui/src/components/chat/StatusRow.tsx
@@ -1,123 +1,18 @@
 import React from "react";
 import { useSessionUIStore } from '@/sync/session-ui-store';
-import { cn } from "@/lib/utils";
-import { useDirectorySync } from "@/sync/sync-context";
-import type { Todo } from "@opencode-ai/sdk/v2/client";
-
-// Compat aliases for old TodoItem shape
-type TodoItem = Todo & { id?: string };
-type TodoStatus = string;
-type TodoPriority = string;
-import { useUIStore } from "@/stores/useUIStore";
-import { useTodosPersistStore } from "@/stores/useTodosPersistStore";
 import { WorkingPlaceholder } from "./message/parts/WorkingPlaceholder";
-import { isVSCodeRuntime } from "@/lib/desktop";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { Icon } from "@/components/icon/Icon";
 import { useI18n } from "@/lib/i18n";
 
+// The floating assistant-status chip that hovers above the composer while the
+// agent works ("Claude is working…", abort notice). ONLY that. The composer's
+// own bar — pending changes, todos dropdown — is ComposerStatusBar: they used
+// to share this component, and every restyle of this chip (glass, placement)
+// silently dragged the composer bar and its dropdown along with it.
+
 const STATUS_ROW_CONTAINER_STYLE = { containerType: "inline-size" as const, containerName: "status-row" };
 
-const statusConfig: Record<TodoStatus, { textClassName: string }> = {
-  in_progress: {
-    textClassName: "text-foreground",
-  },
-  pending: {
-    textClassName: "text-foreground",
-  },
-  completed: {
-    textClassName: "text-muted-foreground line-through",
-  },
-  cancelled: {
-    textClassName: "text-muted-foreground line-through",
-  },
-};
-
-const priorityClassName: Record<TodoPriority, string> = {
-  high: "text-[var(--status-warning)]",
-  medium: "text-muted-foreground",
-  low: "text-muted-foreground/70",
-};
-
-const priorityIcon: Record<TodoPriority, React.ReactNode> = {
-  high: <Icon name="arrow-up-double" className="h-3.5 w-3.5"  aria-hidden="true"/>,
-  medium: <Icon name="arrow-up-s" className="h-3.5 w-3.5"  aria-hidden="true"/>,
-  low: <Icon name="arrow-down-s" className="h-3.5 w-3.5"  aria-hidden="true"/>,
-};
-
-const statusLabelKey: Record<TodoStatus, string> = {
-  in_progress: "chat.statusRow.todo.status.inProgress",
-  pending: "chat.statusRow.todo.status.pending",
-  completed: "chat.statusRow.todo.status.completed",
-  cancelled: "chat.statusRow.todo.status.cancelled",
-};
-
-const priorityLabelKey: Record<TodoPriority, string> = {
-  high: "chat.statusRow.todo.priority.high",
-  medium: "chat.statusRow.todo.priority.medium",
-  low: "chat.statusRow.todo.priority.low",
-};
-
-interface TodoItemRowProps {
-  todo: TodoItem;
-}
-
-const TodoItemRow: React.FC<TodoItemRowProps> = ({ todo }) => {
-  const { t } = useI18n();
-  const config = statusConfig[todo.status] || statusConfig.pending;
-  const statusKey = statusLabelKey[todo.status] ?? statusLabelKey.pending;
-  const priorityKey = priorityLabelKey[todo.priority] ?? priorityLabelKey.medium;
-
-  const statusIcon =
-    todo.status === "in_progress" ? (
-      <Icon name="record-circle" className="h-3.5 w-3.5 text-[var(--status-info)]"  aria-hidden="true"/>
-    ) : todo.status === "completed" ? (
-      <Icon name="checkbox-circle" className="h-3.5 w-3.5 text-[var(--status-success)]"  aria-hidden="true"/>
-    ) : (
-      <Icon name="time" className="h-3.5 w-3.5 text-muted-foreground"  aria-hidden="true"/>
-    );
-
-  return (
-    <div className="flex items-center min-w-0 py-0.5 gap-2">
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <span className="flex-shrink-0">{statusIcon}</span>
-        </TooltipTrigger>
-        <TooltipContent side="left" sideOffset={6}>
-          {t(statusKey as never)}
-        </TooltipContent>
-      </Tooltip>
-      <span
-        className={cn(
-          "flex-1 typography-ui-label",
-          config.textClassName
-        )}
-      >
-        {todo.content}
-      </span>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <span
-            className={cn(
-              "typography-meta flex items-center justify-center flex-shrink-0 leading-none",
-              priorityClassName[todo.priority] ?? priorityClassName.medium
-            )}
-          >
-            {priorityIcon[todo.priority] ?? priorityIcon.medium}
-          </span>
-        </TooltipTrigger>
-        <TooltipContent side="right" sideOffset={6}>
-          {t(priorityKey as never)}
-        </TooltipContent>
-      </Tooltip>
-    </div>
-  );
-};
-
-const EMPTY_TODOS: TodoItem[] = [];
-
 interface StatusRowProps {
-  // Working state
   isWorking?: boolean;
   statusText?: string | null;
   isGenericStatus?: boolean;
@@ -125,17 +20,10 @@ interface StatusRowProps {
   wasAborted?: boolean;
   abortActive?: boolean;
   retryInfo?: { attempt?: number; next?: number } | null;
-  // Abort state (for mobile/vscode)
-  showAbort?: boolean;
-  onAbort?: () => void;
-  // Abort status display
   showAbortStatus?: boolean;
-  showAssistantStatus?: boolean;
-  showTodos?: boolean;
   agentName?: string;
   modelName?: string | null;
   providerId?: string | null;
-  leftAccessory?: React.ReactNode;
 }
 
 export const StatusRow: React.FC<StatusRowProps> = ({
@@ -146,192 +34,43 @@ export const StatusRow: React.FC<StatusRowProps> = ({
   wasAborted,
   abortActive,
   retryInfo,
-  showAbort,
-  onAbort,
   showAbortStatus,
-  showAssistantStatus = true,
-  showTodos = true,
   agentName,
   modelName,
   providerId,
-  leftAccessory,
 }) => {
   const { t } = useI18n();
-  const [isExpanded, setIsExpanded] = React.useState(false);
   const currentSessionId = useSessionUIStore((state) => state.currentSessionId);
-  const currentSessionDirectory = useSessionUIStore(
-    React.useCallback(
-      (state) => (currentSessionId ? state.getDirectoryForSession(currentSessionId) : null),
-      [currentSessionId],
-    ),
-  );
-  const liveTodos = useDirectorySync(
-    React.useCallback(
-      (state) => {
-        if (!showTodos || !currentSessionId) return EMPTY_TODOS;
-        return state.todo[currentSessionId] ?? EMPTY_TODOS;
-      },
-      [currentSessionId, showTodos],
-    ),
-  );
-  const persistedSessionTodos = useTodosPersistStore(
-    React.useCallback(
-      (state) => (showTodos && currentSessionId && currentSessionDirectory
-        ? state.getSessionTodos(currentSessionDirectory, currentSessionId)
-        : undefined),
-      [currentSessionDirectory, currentSessionId, showTodos],
-    ),
-  );
-  const todos: TodoItem[] = React.useMemo(() => {
-    if (!currentSessionId) return EMPTY_TODOS;
-    if (liveTodos.length > 0) return liveTodos;
-    return persistedSessionTodos ?? EMPTY_TODOS;
-  }, [liveTodos, persistedSessionTodos, currentSessionId]);
-  const isMobile = useUIStore((state) => state.isMobile);
-  const isCompact = isMobile || isVSCodeRuntime();
 
-  // Filter out cancelled todos for display and keep original order.
-  // This prevents items from jumping around when status changes.
-  const visibleTodos = React.useMemo(() => {
-    return todos.filter((todo) => todo.status !== "cancelled");
-  }, [todos]);
-
-  // Find the current active todo (first in_progress, or first pending)
-  const activeTodo = React.useMemo(() => {
-    return (
-      visibleTodos.find((t) => t.status === "in_progress") ||
-      visibleTodos.find((t) => t.status === "pending") ||
-      null
-    );
-  }, [visibleTodos]);
-
-  // Calculate progress
-  const progress = React.useMemo(() => {
-    const total = todos.filter((t) => t.status !== "cancelled").length;
-    const completed = todos.filter((t) => t.status === "completed").length;
-    return { completed, total };
-  }, [todos]);
-
-  const statusSummary = React.useMemo(() => {
-    const active = visibleTodos.filter((t) => t.status === "in_progress").length;
-    const left = visibleTodos.filter((t) => t.status === "in_progress" || t.status === "pending").length;
-    return { active, left };
-  }, [visibleTodos]);
-
-  const hasTodoContent = showTodos && statusSummary.left > 0;
-  const hasAssistantContent = showAssistantStatus && (
-    isWorking ||
-    Boolean(wasAborted) ||
-    Boolean(showAbortStatus)
-  );
-  const hasLeftAccessory = Boolean(leftAccessory);
-  // Original logic from ChatInput
   const shouldRenderPlaceholder = !showAbortStatus && (wasAborted || !abortActive);
+  const hasContent = isWorking || Boolean(wasAborted) || Boolean(showAbortStatus);
 
-  const hasContent = hasAssistantContent || hasTodoContent || hasLeftAccessory;
-
-  // Close popover when clicking outside
-  const popoverRef = React.useRef<HTMLDivElement>(null);
-  React.useEffect(() => {
-    if (!isExpanded) return;
-
-    const handleClickOutside = (event: MouseEvent) => {
-      if (popoverRef.current && !popoverRef.current.contains(event.target as Node)) {
-        setIsExpanded(false);
-      }
-    };
-
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, [isExpanded]);
-
-  const toggleExpanded = () => setIsExpanded((prev) => !prev);
-  const todoSummaryLabel = t('chat.statusRow.summary.activeLeft', {
-    active: statusSummary.active,
-    left: statusSummary.left,
-  });
-
-  // Abort button for mobile/vscode
-  const abortButton = showAbort && onAbort ? (
-    <button
-      type="button"
-      onClick={onAbort}
-      className="flex items-center justify-center h-[1.2rem] w-[1.2rem] text-[var(--status-error)] transition-opacity hover:opacity-80 focus-visible:outline-none flex-shrink-0"
-      aria-label={t('chat.statusRow.actions.stopGeneratingAria')}
-    >
-      <Icon name="close-circle" aria-hidden="true"/>
-    </button>
-  ) : null;
-
-  // Todo trigger button
-  const todoTrigger = hasTodoContent ? (
-    <button
-      type="button"
-      onClick={toggleExpanded}
-      className="flex items-center gap-1 flex-shrink-0 text-muted-foreground"
-      aria-label={todoSummaryLabel}
-      title={todoSummaryLabel}
-    >
-      {/* Desktop: show task text; Mobile/VSCode: just "Tasks" */}
-      {!isCompact && activeTodo ? (
-        <span className="status-row__active-todo typography-ui-label text-foreground truncate max-w-[200px]">
-          {activeTodo.content}
-        </span>
-      ) : (
-        <span className="typography-ui-label">{t('chat.statusRow.tasksTitle')}</span>
-      )}
-      <span className="typography-meta flex items-center gap-1 tabular-nums" aria-hidden="true">
-        <span className="flex items-center gap-0.5">
-          <Icon name="record-circle" className="h-3.5 w-3.5 text-[var(--status-info)]" />
-          {statusSummary.active}
-        </span>
-        <span>·</span>
-        <span className="flex items-center gap-0.5">
-          <Icon name="time" className="h-3.5 w-3.5" />
-          {statusSummary.left}
-        </span>
-      </span>
-      {isExpanded ? (
-        <Icon name="arrow-up-s" className="h-3.5 w-3.5" />
-      ) : (
-        <Icon name="arrow-down-s" className="h-3.5 w-3.5" />
-      )}
-    </button>
-  ) : null;
-
-  // Don't render if nothing to show
   if (!hasContent) {
     return null;
   }
 
   return (
     <div
-      // This row must land exactly where the assistant turn footer (mt-2
-      // inside the message) appears when the turn completes. Measured against
-      // the live DOM: the gap ABOVE already matches (message pb-2 = footer
-      // mt-2 = 8px), but the chat is bottom-anchored and the finished message
-      // carries ~12px more structure BELOW its footer than this row has — so
-      // the swap used to lift the line up. mb-6 (24px) reserves that space
-      // under this row instead (verified: row top 636 == footer top 636).
-      // The reservation belongs to the assistant-status swap only: a row that
-      // renders just an accessory (the pending-changes bar) takes the normal
-      // 8px, or it floats a stray gap above the composer.
-      className={cn(showAssistantStatus ? "mb-6" : "mb-2", !hasLeftAccessory && "chat-column")}
+      // The row renders inside the composer-anchored overlay, which owns the
+      // distance to the input and the horizontal column (the same ones the
+      // scroll-to-bottom pill uses).
       style={STATUS_ROW_CONTAINER_STYLE}
     >
       {/* h-8 matches the turn footer's real row height: its h-8 action
           buttons define the footer line, with the meta text centered in it. */}
-      <div className={cn("flex items-center justify-between gap-2 h-8", hasLeftAccessory && "px-0.5")}>
-        {/* Left: Abort status | Working placeholder | leftAccessory */}
-        <div className={cn("flex-1 flex items-center min-w-0 gap-2", hasLeftAccessory ? "pl-1.5" : "overflow-x-hidden")}>
-          {showAssistantStatus && showAbortStatus ? (
+      {/* The glass chip lives here, not on the container: the root above is
+          an inline-size query container, whose width ignores its children —
+          a shrink-to-fit wrapper around it always collapsed to zero. */}
+      <div className="oc-glass-popover inline-flex w-max max-w-full items-center gap-2 h-8 whitespace-nowrap rounded-full [corner-shape:round] px-3">
+        <div className="flex items-center min-w-0 gap-2 overflow-x-hidden">
+          {showAbortStatus ? (
             <div className="flex h-full items-center text-[var(--status-error)] pl-0.5">
               <span className="flex items-center gap-1.5 typography-ui-label">
                 <Icon name="close-circle" aria-hidden="true"/>
                 {t('chat.statusRow.aborted')}
               </span>
             </div>
-          ) : showAssistantStatus && shouldRenderPlaceholder ? (
+          ) : shouldRenderPlaceholder ? (
             <WorkingPlaceholder
               key={currentSessionId ?? "no-session"}
               isWorking={isWorking}
@@ -343,50 +82,8 @@ export const StatusRow: React.FC<StatusRowProps> = ({
               modelName={modelName}
               providerId={providerId}
             />
-          ) : leftAccessory ? (
-            leftAccessory
           ) : null}
         </div>
-
-        {/* Right: Abort (mobile only) + Todo */}
-        <div className={cn("relative flex items-center gap-2 flex-shrink-0", hasLeftAccessory ? "pr-1.5" : "-mr-3")} ref={popoverRef}>
-          {abortButton}
-          {todoTrigger}
-
-          {/* Popover dropdown */}
-          {isExpanded && hasTodoContent && (
-            <div
-              style={{
-                maxWidth: "min(28rem, calc(100cqw - 4ch))",
-                backgroundColor: "var(--surface-elevated)",
-                color: "var(--surface-elevated-foreground)",
-              }}
-              className={cn(
-                "absolute right-0 bottom-full mb-1 z-50",
-                "w-max min-w-[200px] rounded-xl p-1",
-                "shadow-[inset_0_1px_0_0_rgba(255,255,255,0.8),inset_0_0_0_1px_rgba(0,0,0,0.04),0_0_0_1px_rgba(0,0,0,0.10),0_1px_2px_-0.5px_rgba(0,0,0,0.08),0_4px_8px_-2px_rgba(0,0,0,0.08),0_12px_20px_-4px_rgba(0,0,0,0.08)]",
-                "dark:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.12),inset_0_0_0_1px_rgba(255,255,255,0.08),0_0_0_1px_rgba(0,0,0,0.36),0_1px_1px_-0.5px_rgba(0,0,0,0.22),0_3px_3px_-1.5px_rgba(0,0,0,0.20),0_6px_6px_-3px_rgba(0,0,0,0.16)]",
-                "animate-in fade-in-0 zoom-in-95 slide-in-from-bottom-2",
-                "duration-150"
-              )}
-            >
-              {/* Header */}
-              <div className="flex items-center gap-1.5 px-2 py-1 typography-ui-label font-medium text-muted-foreground">
-                <span>{t('chat.statusRow.tasksTitle')}</span>
-                <span className="typography-meta tabular-nums">
-                  {progress.completed}/{progress.total}
-                </span>
-              </div>
-
-              {/* Todo list */}
-              <div className="px-1 max-h-[200px] overflow-y-auto">
-                {visibleTodos.map((todo, index) => (
-                  <TodoItemRow key={todo.id ?? `todo-${index}`} todo={todo} />
-                ))}
-              </div>
-            </div>
-          )}
-        </div>
       </div>
     </div>
   );
diff --git a/packages/ui/src/components/chat/StatusRowContainer.tsx b/packages/ui/src/components/chat/StatusRowContainer.tsx
index 46c8bd3a..40bfbe32 100644
--- a/packages/ui/src/components/chat/StatusRowContainer.tsx
+++ b/packages/ui/src/components/chat/StatusRowContainer.tsx
@@ -46,8 +46,6 @@ export const StatusRowContainer: React.FC = React.memo(() => {
             wasAborted={wasAborted || working.wasAborted}
             abortActive={wasAborted || working.abortActive}
             retryInfo={working.retryInfo}
-            showAssistantStatus
-            showTodos={false}
             agentName={currentAgentName}
             modelName={modelDisplayName}
             providerId={activeModel?.providerId ?? null}
diff --git a/packages/ui/src/components/chat/btw/BtwPanel.tsx b/packages/ui/src/components/chat/btw/BtwPanel.tsx
index 54c55c6d..3c8b37e2 100644
--- a/packages/ui/src/components/chat/btw/BtwPanel.tsx
+++ b/packages/ui/src/components/chat/btw/BtwPanel.tsx
@@ -26,9 +26,6 @@ import { QuestionCard } from '../QuestionCard';
 
 const IDLE_SESSION_STATUS = { type: 'idle' as const };
 
-/** Stable no-op so ChatMessage memoization keeps working in the read-only peek. */
-const NOOP_CONTENT_CHANGE = (): void => {};
-
 /**
  * The `/btw` peek panel.
  *
@@ -446,7 +443,6 @@ const BtwMessages: React.FC<{
                         message={record}
                         previousMessage={data.messageRecords[index - 1]}
                         nextMessage={data.messageRecords[index + 1]}
-                        onContentChange={NOOP_CONTENT_CHANGE}
                         isInActiveTurn={index === data.messageRecords.length - 1}
                         activeStreamingPhase={
                             record.info.id === data.streamingMessageId ? data.activeStreamingPhase : null
diff --git a/packages/ui/src/components/chat/components/ScrollToBottomButton.tsx b/packages/ui/src/components/chat/components/ScrollToBottomButton.tsx
index 15726e76..9622c5f5 100644
--- a/packages/ui/src/components/chat/components/ScrollToBottomButton.tsx
+++ b/packages/ui/src/components/chat/components/ScrollToBottomButton.tsx
@@ -1,33 +1,85 @@
 import React from 'react';
 
-import { Button } from '@/components/ui/button';
 import { Icon } from "@/components/icon/Icon";
 import { cn } from '@/lib/utils';
 import { useI18n } from '@/lib/i18n';
+import { useAssistantStatus } from '@/hooks/useAssistantStatus';
+import { useConfigStore } from '@/stores/useConfigStore';
+import { getProviderModelDisplayName } from '@/lib/modelDisplay';
+
+/**
+ * Compact one-line mirror of the status row for the pill: same label, none of
+ * the status row's animation machinery (which does not survive being squeezed
+ * into a 32px chip).
+ */
+const PillWorkingStatus: React.FC = () => {
+    const { t } = useI18n();
+    const { activeModel, working } = useAssistantStatus();
+    const providers = useConfigStore((state) => state.providers);
+
+    const modelName = React.useMemo(() => {
+        if (!activeModel) return null;
+        const provider = providers.find((candidate) => candidate.id === activeModel.providerId);
+        return getProviderModelDisplayName(provider, activeModel.modelId) || null;
+    }, [activeModel, providers]);
+
+    if (!working.isWorking || !working.statusText) return null;
+    const status = working.statusText;
+    const label = modelName && modelName.trim().length > 0
+        ? t('chat.statusRow.modelStatus', { model: modelName.trim(), status })
+        : status.charAt(0).toUpperCase() + status.slice(1);
+
+    return (
+        <span className="min-w-0 truncate pr-3 text-sm text-muted-foreground">
+            {label}
+            <span className="animate-pulse"> …</span>
+        </span>
+    );
+};
 
 interface ScrollToBottomButtonProps {
     visible: boolean;
+    /** The session is still streaming: the pill carries the status label
+        while the floating status row is hidden away from the live edge. */
+    working?: boolean;
     onClick: () => void;
 }
 
-const ScrollToBottomButton: React.FC<ScrollToBottomButtonProps> = ({ visible, onClick }) => {
+const ScrollToBottomButton: React.FC<ScrollToBottomButtonProps> = ({ visible, working = false, onClick }) => {
     const { t } = useI18n();
     return (
         <div
             className={cn(
-                'absolute bottom-full left-1/2 -translate-x-1/2 mb-2 transition-all duration-150',
-                visible ? 'opacity-100 translate-y-0 scale-100 pointer-events-auto' : 'opacity-0 translate-y-2 scale-95 pointer-events-none',
+                'pointer-events-none absolute bottom-full inset-x-0 mb-2 transition-opacity duration-100',
+                visible ? 'opacity-100' : 'opacity-0',
             )}
         >
-            <Button
-                variant="outline"
-                size="sm"
-                onClick={onClick}
-                className="size-8 rounded-full [corner-shape:round] p-0 shadow-none bg-background/95 hover:bg-interactive-hover"
-                aria-label={t('chat.scrollToBottom.aria')}
-            >
-                <Icon name="arrow-down" className="h-4 w-4" />
-            </Button>
+            {/* The same column that centres the composer, so the pill's left
+                edge lines up exactly with the input frame. */}
+            <div className="chat-input-column">
+                {/* The soft shadow lives on this wrapper, away from the glass
+                    button's backdrop-filter: sharing one element made the
+                    shadow intermittently drop after hide/show cycles. */}
+                <div className="inline-flex max-w-full rounded-full shadow-[0_2px_6px_-2px_rgb(0_0_0_/_0.10)] dark:shadow-[0_2px_6px_-2px_rgb(0_0_0_/_0.35)]">
+                <button
+                    type="button"
+                    onClick={onClick}
+                    aria-label={t('chat.scrollToBottom.aria')}
+                    className={cn(
+                        // Glass material with a hairline real border — much
+                        // lighter than the oc-glass-floating stack.
+                        'oc-glass-popover inline-flex h-8 max-w-full items-center rounded-full [corner-shape:round] text-left',
+                        'border border-black/[0.06] dark:border-white/[0.08]',
+                        visible ? 'pointer-events-auto' : 'pointer-events-none',
+                    )}
+                >
+                    <span className="flex h-8 w-8 shrink-0 items-center justify-center text-muted-foreground">
+                        <Icon name="arrow-down" className="h-4 w-4" />
+                    </span>
+                    {working && visible ? <PillWorkingStatus /> : null}
+                </button>
+                </div>
+            </div>
         </div>
     );
 };
diff --git a/packages/ui/src/components/chat/components/TurnActivity.tsx b/packages/ui/src/components/chat/components/TurnActivity.tsx
index 4fa46392..4b49b91e 100644
--- a/packages/ui/src/components/chat/components/TurnActivity.tsx
+++ b/packages/ui/src/components/chat/components/TurnActivity.tsx
@@ -4,7 +4,6 @@ import ProgressiveGroup from '../message/parts/ProgressiveGroup';
 import type { TurnActivityRecord } from '../lib/turns/types';
 import type { ToolPopupContent } from '../message/types';
 import type { StreamPhase } from '../message/types';
-import type { ContentChangeReason } from '@/hooks/useChatAutoFollow';
 
 interface DiffStats {
     additions: number;
@@ -21,7 +20,6 @@ interface TurnActivityProps {
     expandedTools: Set<string>;
     onToggleTool: (toolId: string) => void;
     onShowPopup: (content: ToolPopupContent) => void;
-    onContentChange?: (reason?: ContentChangeReason) => void;
     streamPhase: StreamPhase;
     showHeader: boolean;
     animateRows?: boolean;
diff --git a/packages/ui/src/components/chat/composer/ui/DraftTargetSelectors.tsx b/packages/ui/src/components/chat/composer/ui/DraftTargetSelectors.tsx
index c6fba04c..886aad6e 100644
--- a/packages/ui/src/components/chat/composer/ui/DraftTargetSelectors.tsx
+++ b/packages/ui/src/components/chat/composer/ui/DraftTargetSelectors.tsx
@@ -23,6 +23,7 @@ import {
     SelectValue,
 } from '@/components/ui/select';
 import { useI18n } from '@/lib/i18n';
+import { matchesRankQuery, rankByQuery } from '@/lib/search/fuzzySearch';
 import { PROJECT_COLOR_MAP, PROJECT_ICON_MAP, ProjectIconImage } from '@/lib/projectMeta';
 import { createWorktreeDraft } from '@/lib/worktreeSessionCreator';
 import type { Theme } from '@/types/theme';
@@ -264,13 +265,7 @@ export function MobileDraftTargetSheets(
                         className="h-9"
                     />
                     <div className="flex flex-col">
-                        {projects
-                            .filter((project) => {
-                                const needle = query.trim().toLowerCase();
-                                if (!needle) return true;
-                                return getProjectDisplayLabel(project).toLowerCase().includes(needle)
-                                    || project.path.toLowerCase().includes(needle);
-                            })
+                        {rankByQuery(projects, query, (project) => [getProjectDisplayLabel(project), project.path])
                             .map((project) => (
                                 <button
                                     key={project.id}
@@ -304,8 +299,7 @@ export function MobileDraftTargetSheets(
                     />
                     <div className="flex flex-col">
                         {(() => {
-                            const needle = query.trim().toLowerCase();
-                            const matches = (label: string) => !needle || label.toLowerCase().includes(needle);
+                            const matches = (label: string) => matchesRankQuery([label], query);
                             const selectedValue = selectedDirectory
                                 ?? branchItems[0]?.value
                                 ?? normalizePath(selectedProject.path)
@@ -349,8 +343,7 @@ export function MobileDraftTargetSheets(
                                             {t('chat.chatInput.worktreeNew')}
                                         </button>
                                     </div>
-                                    {worktreeBranchOptions
-                                        .filter((option) => matches(option.label))
+                                    {rankByQuery(worktreeBranchOptions, query, (option) => [option.label])
                                         .map((option) => renderRow(option.value, `${option.pending ? '⏳ ' : ''}${option.label}`))}
                                     {selectedDirectory && !selectedBranchIsKnown && matches(selectedBranchLabel ?? '')
                                         ? renderRow(selectedDirectory, selectedBranchLabel, 'unknown-current')
diff --git a/packages/ui/src/components/chat/fileMentionResults.test.ts b/packages/ui/src/components/chat/fileMentionResults.test.ts
new file mode 100644
index 00000000..f8f66131
--- /dev/null
+++ b/packages/ui/src/components/chat/fileMentionResults.test.ts
@@ -0,0 +1,53 @@
+import { describe, expect, test } from 'bun:test';
+
+import { mentionServerQuery, rankFileMentionResults, tokenizeMentionQuery } from './fileMentionResults';
+
+const hit = (relativePath: string) => {
+  const name = relativePath.split('/').filter(Boolean).pop() ?? relativePath;
+  return {
+    name,
+    path: `/root/${relativePath}`,
+    relativePath,
+    extension: name.includes('.') ? name.split('.').pop()?.toLowerCase() : undefined,
+  };
+};
+
+describe('tokenizeMentionQuery', () => {
+  test('normalizes leading ./ and slashes and splits on whitespace', () => {
+    expect(tokenizeMentionQuery('./Solo Team')).toEqual(['solo', 'team']);
+    expect(tokenizeMentionQuery('  ')).toEqual([]);
+  });
+});
+
+describe('mentionServerQuery', () => {
+  test('uses the longest token for the server search', () => {
+    expect(mentionServerQuery('team solo-is-a')).toBe('solo-is-a');
+    expect(mentionServerQuery('')).toBe('');
+  });
+});
+
+describe('rankFileMentionResults', () => {
+  test('ranks files and directories together by match quality, not by category', () => {
+    const files = [hit('solo-is-a-team-size/index.md'), hit('software-developer/index.md')];
+    const directories = [hit('machine-learning/tensorflow/'), hit('solo-is-a-team-size/')];
+
+    const ranked = rankFileMentionResults(files, directories, 'solo');
+    const paths = ranked.map((entry) => entry.relativePath);
+
+    expect(paths.slice(0, 2)).toEqual(['solo-is-a-team-size/', 'solo-is-a-team-size/index.md']);
+    expect(paths).not.toContain('machine-learning/tensorflow/');
+  });
+
+  test('multi-token queries match tokens in any order across the path', () => {
+    const files = [hit('solo-is-a-team-size/index.md'), hit('software-developer/index.md')];
+
+    const ranked = rankFileMentionResults(files, [], 'team solo');
+    expect(ranked.map((entry) => entry.relativePath)).toEqual(['solo-is-a-team-size/index.md']);
+  });
+
+  test('tags each result with its kind', () => {
+    const ranked = rankFileMentionResults([hit('a/readme.md')], [hit('a/')], 'a');
+    expect(ranked.find((entry) => entry.relativePath === 'a/')?.kind).toBe('directory');
+    expect(ranked.find((entry) => entry.relativePath === 'a/readme.md')?.kind).toBe('file');
+  });
+});
diff --git a/packages/ui/src/components/chat/fileMentionResults.ts b/packages/ui/src/components/chat/fileMentionResults.ts
new file mode 100644
index 00000000..c1b40d2d
--- /dev/null
+++ b/packages/ui/src/components/chat/fileMentionResults.ts
@@ -0,0 +1,60 @@
+import { scoreByFuzzyQuery } from '@/lib/search/fuzzySearch';
+import type { ProjectFileSearchHit } from '@/lib/opencode/client';
+
+export type FileMentionHit = ProjectFileSearchHit & { kind: 'file' | 'directory' };
+
+export const tokenizeMentionQuery = (query: string): string[] =>
+  (query ?? '')
+    .trim()
+    .replace(/^\.\//, '')
+    .replace(/^\/+/, '')
+    .toLowerCase()
+    .split(/\s+/)
+    .filter(Boolean);
+
+/**
+ * The opencode file search takes a single term, so multi-word queries send the
+ * most selective (longest) token and the remaining tokens filter client-side.
+ */
+export const mentionServerQuery = (query: string): string => {
+  const tokens = tokenizeMentionQuery(query);
+  if (tokens.length === 0) {
+    return '';
+  }
+  return tokens.reduce((longest, token) => (token.length > longest.length ? token : longest));
+};
+
+/**
+ * Merge directory and file hits into one list ranked by match quality against
+ * the full relative path. Multi-token queries require every token to appear
+ * somewhere in the path, in any order.
+ */
+export function rankFileMentionResults(
+  files: ProjectFileSearchHit[],
+  directories: ProjectFileSearchHit[],
+  query: string,
+  limit = 20,
+): FileMentionHit[] {
+  const merged: FileMentionHit[] = [
+    ...directories.map((hit) => ({ ...hit, kind: 'directory' as const })),
+    ...files.map((hit) => ({ ...hit, kind: 'file' as const })),
+  ];
+
+  const tokens = tokenizeMentionQuery(query);
+  if (tokens.length === 0) {
+    return merged.slice(0, limit);
+  }
+
+  const pathOf = (hit: FileMentionHit) => hit.relativePath || hit.name;
+  const candidates = tokens.length === 1
+    ? merged
+    : merged.filter((hit) => {
+        const haystack = pathOf(hit).toLowerCase();
+        return tokens.every((token) => haystack.includes(token));
+      });
+
+  const primary = tokens.reduce((longest, token) => (token.length > longest.length ? token : longest));
+  return scoreByFuzzyQuery(candidates, primary, pathOf, { limit, threshold: 0.4 }).map(
+    (scored) => scored.item,
+  );
+}
diff --git a/packages/ui/src/components/chat/lib/scroll/timelineScrollAnchoring.test.ts b/packages/ui/src/components/chat/lib/scroll/timelineScrollAnchoring.test.ts
new file mode 100644
index 00000000..9c5a8ae1
--- /dev/null
+++ b/packages/ui/src/components/chat/lib/scroll/timelineScrollAnchoring.test.ts
@@ -0,0 +1,227 @@
+import { describe, expect, test } from 'bun:test';
+
+import {
+    CHAT_LIST_ANCHOR_OFFSET,
+    getAnchoredTurnMetrics,
+    getRowBottom,
+    resolveChatListAnchoredEndSpace,
+    resolveTimelineIsAtEnd,
+    type TimelineListMeasurementState,
+} from './timelineScrollAnchoring';
+
+const buildState = ({
+    positions,
+    sizes,
+    scroll = 0,
+    scrollLength = 700,
+}: {
+    readonly positions: readonly number[];
+    readonly sizes: readonly number[];
+    readonly scroll?: number;
+    readonly scrollLength?: number;
+}): TimelineListMeasurementState => ({
+    data: positions.map((_, index) => index),
+    scroll,
+    scrollLength,
+    positionAtIndex: (index) => positions[index],
+    sizeAtIndex: (index) => sizes[index],
+});
+
+describe('getRowBottom', () => {
+    test('measures row bottoms from list row position and size', () => {
+        const state = buildState({ positions: [0, 120], sizes: [80, 40] });
+
+        expect(getRowBottom(state, 1)).toBe(160);
+    });
+
+    test('returns null for unmeasured rows', () => {
+        const state = buildState({ positions: [0], sizes: [80] });
+
+        expect(getRowBottom(state, 5)).toBeNull();
+    });
+
+    test('treats a zero-height row as one pixel tall', () => {
+        const state = buildState({ positions: [0, 120], sizes: [120, 0] });
+
+        expect(getRowBottom(state, 1)).toBe(121);
+    });
+});
+
+describe('getAnchoredTurnMetrics', () => {
+    test('returns null for an empty timeline', () => {
+        const state = buildState({ positions: [], sizes: [] });
+
+        expect(getAnchoredTurnMetrics({
+            state,
+            anchorIndex: 0,
+            composerOverlayHeight: 180,
+            anchorOffset: CHAT_LIST_ANCHOR_OFFSET,
+        })).toBeNull();
+    });
+
+    test('treats the active turn as fitting when it fits above the composer', () => {
+        const state = buildState({
+            positions: [0, 300, 460],
+            sizes: [240, 80, 140],
+            scrollLength: 760,
+        });
+
+        const metrics = getAnchoredTurnMetrics({
+            state,
+            anchorIndex: 1,
+            composerOverlayHeight: 180,
+            anchorOffset: 16,
+        });
+
+        expect(metrics?.turnHeight).toBe(300);
+        expect(metrics?.usableViewportHeight).toBe(564);
+        expect(metrics?.overflowsUsableViewport).toBe(false);
+        expect(metrics?.targetScrollToRevealEnd).toBe(36);
+        expect(metrics?.scrollDeltaToRevealEnd).toBe(36);
+    });
+
+    test('targets the real row end instead of any temporary reserved tail', () => {
+        const state = buildState({
+            positions: [0, 1720, 1880],
+            sizes: [1600, 80, 120],
+            scroll: 1900,
+            scrollLength: 760,
+        });
+
+        const metrics = getAnchoredTurnMetrics({
+            state,
+            anchorIndex: 1,
+            composerOverlayHeight: 180,
+            anchorOffset: 16,
+        });
+
+        expect(metrics?.lastBottom).toBe(2000);
+        expect(metrics?.targetScrollToRevealEnd).toBe(1436);
+        expect(metrics?.scrollDeltaToRevealEnd).toBe(0);
+    });
+
+    test('reports overflow only for the current anchored turn', () => {
+        const state = buildState({
+            positions: [0, 900, 1180],
+            sizes: [800, 220, 300],
+            scroll: 900,
+            scrollLength: 760,
+        });
+
+        const metrics = getAnchoredTurnMetrics({
+            state,
+            anchorIndex: 1,
+            composerOverlayHeight: 180,
+            anchorOffset: 16,
+        });
+
+        expect(metrics?.turnHeight).toBe(580);
+        expect(metrics?.usableViewportHeight).toBe(564);
+        expect(metrics?.overflowsUsableViewport).toBe(true);
+    });
+
+    test('returns the minimal positive scroll delta needed to reveal the turn end', () => {
+        const state = buildState({
+            positions: [0, 900, 1180],
+            sizes: [800, 220, 360],
+            scroll: 900,
+            scrollLength: 760,
+        });
+
+        const metrics = getAnchoredTurnMetrics({
+            state,
+            anchorIndex: 1,
+            composerOverlayHeight: 180,
+            anchorOffset: 16,
+        });
+
+        expect(metrics?.lastBottom).toBe(1540);
+        expect(metrics?.visibleUsableBottom).toBe(1464);
+        expect(metrics?.scrollDeltaToRevealEnd).toBe(76);
+    });
+
+    test('subtracts composer height from usable viewport height', () => {
+        const state = buildState({
+            positions: [0, 300],
+            sizes: [120, 470],
+            scrollLength: 700,
+        });
+
+        const withoutComposer = getAnchoredTurnMetrics({
+            state,
+            anchorIndex: 1,
+            composerOverlayHeight: 0,
+            anchorOffset: 16,
+        });
+        const withComposer = getAnchoredTurnMetrics({
+            state,
+            anchorIndex: 1,
+            composerOverlayHeight: 220,
+            anchorOffset: 16,
+        });
+
+        expect(withoutComposer?.overflowsUsableViewport).toBe(false);
+        expect(withComposer?.overflowsUsableViewport).toBe(true);
+    });
+
+    test('clamps an out-of-range anchor index to the last row', () => {
+        const state = buildState({
+            positions: [0, 300],
+            sizes: [240, 80],
+            scrollLength: 760,
+        });
+
+        const metrics = getAnchoredTurnMetrics({
+            state,
+            anchorIndex: 99,
+            composerOverlayHeight: 0,
+            anchorOffset: 16,
+        });
+
+        expect(metrics?.anchorTop).toBe(300);
+        expect(metrics?.turnHeight).toBe(80);
+    });
+});
+
+describe('resolveTimelineIsAtEnd', () => {
+    test('uses a tight distance band against the full content length', () => {
+        expect(resolveTimelineIsAtEnd({ contentLength: 2000, scroll: 1400, scrollLength: 600 })).toBe(true);
+        expect(resolveTimelineIsAtEnd({ contentLength: 2000, scroll: 1365, scrollLength: 600 })).toBe(true);
+        expect(resolveTimelineIsAtEnd({ contentLength: 2000, scroll: 1300, scrollLength: 600 })).toBe(false);
+    });
+
+    test('falls back to the list flags when distances are unavailable', () => {
+        expect(resolveTimelineIsAtEnd({ isNearEnd: true, isAtEnd: false })).toBe(true);
+        expect(resolveTimelineIsAtEnd({ isAtEnd: true })).toBe(true);
+    });
+
+    test('reports nothing without a state', () => {
+        expect(resolveTimelineIsAtEnd(undefined)).toBe(undefined);
+    });
+});
+
+describe('resolveChatListAnchoredEndSpace', () => {
+    const rows = [{ id: 'a' }, { id: 'b' }, { id: 'a' }];
+
+    test('returns nothing when no anchor is set', () => {
+        expect(resolveChatListAnchoredEndSpace(rows, null, (row) => row.id)).toBe(undefined);
+    });
+
+    test('returns nothing when the anchor is not in the list', () => {
+        expect(resolveChatListAnchoredEndSpace(rows, 'z', (row) => row.id)).toBe(undefined);
+    });
+
+    test('resolves the last occurrence so a resent message anchors to its live row', () => {
+        expect(resolveChatListAnchoredEndSpace(rows, 'a', (row) => row.id)).toEqual({
+            anchorIndex: 2,
+            anchorOffset: CHAT_LIST_ANCHOR_OFFSET,
+        });
+    });
+
+    test('honours an explicit anchor offset', () => {
+        expect(resolveChatListAnchoredEndSpace(rows, 'b', (row) => row.id, { anchorOffset: 40 })).toEqual({
+            anchorIndex: 1,
+            anchorOffset: 40,
+        });
+    });
+});
diff --git a/packages/ui/src/components/chat/lib/scroll/timelineScrollAnchoring.ts b/packages/ui/src/components/chat/lib/scroll/timelineScrollAnchoring.ts
new file mode 100644
index 00000000..cd670a1f
--- /dev/null
+++ b/packages/ui/src/components/chat/lib/scroll/timelineScrollAnchoring.ts
@@ -0,0 +1,167 @@
+// Anchored-turn scroll geometry for the chat timeline.
+//
+// The timeline has three mutually exclusive scroll modes:
+//
+//   • `following-end`      — stay pinned to the live edge as content grows.
+//   • `anchoring-new-turn` — the just-sent user message is parked near the TOP
+//     of the viewport and the reply streams into reserved space below it. The
+//     viewport does NOT move until the turn outgrows the usable viewport.
+//   • `free-scrolling`     — the user took over; nothing moves the scroll
+//     position until they opt back in.
+//
+// This module is pure geometry: it reads measurements from the virtualized
+// list and answers "how far, if at all, must we scroll to reveal the end of
+// the anchored turn". Keeping it free of DOM and React makes the mode machine
+// testable without a renderer.
+//
+// "Usable viewport" is the visible height minus the composer overlay (the
+// composer floats over the list) minus the anchor offset, so a turn is only
+// considered overflowing when it genuinely cannot be read.
+
+export type TimelineScrollMode = 'following-end' | 'anchoring-new-turn' | 'free-scrolling';
+
+// Distance from the top of the viewport at which an anchored user message
+// parks. Small enough to read as "at the top", large enough not to collide
+// with the timeline's top fade.
+export const CHAT_LIST_ANCHOR_OFFSET = 16;
+
+export interface TimelineListMeasurementState {
+    readonly data: readonly unknown[];
+    readonly scroll: number;
+    readonly scrollLength: number;
+    readonly positionAtIndex: (index: number) => number | undefined;
+    readonly sizeAtIndex: (index: number) => number | undefined;
+}
+
+export interface AnchoredTurnMetrics {
+    readonly anchorTop: number;
+    readonly lastBottom: number;
+    readonly turnHeight: number;
+    readonly usableViewportHeight: number;
+    readonly visibleUsableBottom: number;
+    readonly overflowsUsableViewport: boolean;
+    readonly targetScrollToRevealEnd: number;
+    readonly scrollDeltaToRevealEnd: number;
+}
+
+export const getRowBottom = (
+    state: TimelineListMeasurementState,
+    index: number,
+): number | null => {
+    const top = state.positionAtIndex(index);
+    const height = state.sizeAtIndex(index);
+    if (
+        typeof top !== 'number'
+        || typeof height !== 'number'
+        || !Number.isFinite(top)
+        || !Number.isFinite(height)
+    ) {
+        return null;
+    }
+    // Rows measured at zero height would make an anchored turn look empty and
+    // suppress the reveal scroll; treat them as one pixel tall instead.
+    return top + Math.max(1, height);
+};
+
+export const getAnchoredTurnMetrics = ({
+    state,
+    anchorIndex,
+    composerOverlayHeight,
+    anchorOffset,
+}: {
+    readonly state: TimelineListMeasurementState;
+    readonly anchorIndex: number;
+    readonly composerOverlayHeight: number;
+    readonly anchorOffset: number;
+}): AnchoredTurnMetrics | null => {
+    if (state.data.length === 0) return null;
+
+    const boundedAnchorIndex = Math.max(0, Math.min(anchorIndex, state.data.length - 1));
+    const anchorTop = state.positionAtIndex(boundedAnchorIndex);
+    // The LAST row bottom, not the content length: the reserved anchored end
+    // space lives past it, and targeting that reserved tail would scroll the
+    // real content off the top.
+    const lastBottom = getRowBottom(state, state.data.length - 1);
+    if (typeof anchorTop !== 'number' || !Number.isFinite(anchorTop) || lastBottom === null) {
+        return null;
+    }
+
+    const usableViewportHeight = Math.max(
+        0,
+        state.scrollLength - composerOverlayHeight - anchorOffset,
+    );
+    const turnHeight = Math.max(0, lastBottom - anchorTop);
+    const visibleUsableBottom = state.scroll + usableViewportHeight;
+    const targetScrollToRevealEnd = Math.max(0, lastBottom - usableViewportHeight);
+    // Never negative: revealing the end must not scroll the timeline backwards.
+    const scrollDeltaToRevealEnd = Math.max(0, targetScrollToRevealEnd - state.scroll);
+
+    return {
+        anchorTop,
+        lastBottom,
+        turnHeight,
+        usableViewportHeight,
+        visibleUsableBottom,
+        overflowsUsableViewport: turnHeight > usableViewportHeight,
+        targetScrollToRevealEnd,
+        scrollDeltaToRevealEnd,
+    };
+};
+
+// "At the end" for follow purposes is a tight band, not the list's isNearEnd
+// (half a viewport): that band hid the scroll-to-bottom pill and re-armed
+// follow while the user had genuinely scrolled away, yanking them back on the
+// next stream chunk. Distance is measured against the full content length —
+// reserved anchored end space included — so a parked anchored turn counts as
+// the live edge.
+export const TIMELINE_FOLLOW_REARM_THRESHOLD_PX = 40;
+
+export const resolveTimelineIsAtEnd = (
+    state: {
+        readonly contentLength?: number;
+        readonly scroll?: number;
+        readonly scrollLength?: number;
+        readonly isNearEnd?: boolean;
+        readonly isAtEnd?: boolean;
+    } | undefined,
+): boolean | undefined => {
+    if (!state) return undefined;
+    const { contentLength, scroll, scrollLength } = state;
+    if (
+        typeof contentLength === 'number'
+        && typeof scroll === 'number'
+        && typeof scrollLength === 'number'
+        && Number.isFinite(contentLength)
+    ) {
+        return contentLength - (scroll + scrollLength) <= TIMELINE_FOLLOW_REARM_THRESHOLD_PX;
+    }
+    return state.isNearEnd ?? state.isAtEnd;
+};
+
+export interface ChatListAnchoredEndSpace {
+    readonly anchorIndex: number;
+    readonly anchorOffset: number;
+}
+
+// Finds the anchored row from the BACK of the list: a retried or re-sent
+// message id can appear more than once, and the live one is always the last.
+export const resolveChatListAnchoredEndSpace = <Item, AnchorId>(
+    items: readonly Item[],
+    anchorId: AnchorId | null,
+    getAnchorId: (item: Item) => AnchorId | null,
+    options: { readonly anchorOffset?: number } = {},
+): ChatListAnchoredEndSpace | undefined => {
+    if (anchorId === null) return undefined;
+
+    for (let index = items.length - 1; index >= 0; index -= 1) {
+        const item = items[index];
+        if (item !== undefined && getAnchorId(item) === anchorId) {
+            return {
+                anchorIndex: index,
+                anchorOffset: options.anchorOffset ?? CHAT_LIST_ANCHOR_OFFSET,
+            };
+        }
+    }
+
+    return undefined;
+};
diff --git a/packages/ui/src/components/chat/lib/streamTextCommit.test.ts b/packages/ui/src/components/chat/lib/streamTextCommit.test.ts
new file mode 100644
index 00000000..8ee852fc
--- /dev/null
+++ b/packages/ui/src/components/chat/lib/streamTextCommit.test.ts
@@ -0,0 +1,39 @@
+import { describe, expect, test } from 'bun:test';
+
+import { commitStreamedText } from './streamTextCommit';
+
+describe('commitStreamedText', () => {
+    test('holds an incomplete short paragraph entirely', () => {
+        expect(commitStreamedText('An unfinished thought abo')).toBe('');
+    });
+
+    test('commits up to the last complete line', () => {
+        expect(commitStreamedText('First paragraph.\n\nSecond par')).toBe('First paragraph.\n\n');
+    });
+
+    test('reveals code fences line by line', () => {
+        const text = '```py\nprint("a")\nprint("b';
+        expect(commitStreamedText(text)).toBe('```py\nprint("a")\n');
+    });
+
+    test('releases a long held paragraph at the last sentence boundary', () => {
+        const sentence = 'A finished sentence lives here. ';
+        const text = sentence.repeat(12) + 'and an unfinished trail';
+        expect(commitStreamedText(text)).toBe(sentence.repeat(12));
+    });
+
+    test('falls back to the last word boundary without sentences', () => {
+        const words = 'word '.repeat(70);
+        const text = words + 'unfinishe';
+        expect(commitStreamedText(text)).toBe(words);
+    });
+
+    test('keeps unbreakable runs intact rather than splitting them', () => {
+        const run = 'x'.repeat(400);
+        expect(commitStreamedText(run)).toBe(run);
+    });
+
+    test('empty input stays empty', () => {
+        expect(commitStreamedText('')).toBe('');
+    });
+});
diff --git a/packages/ui/src/components/chat/lib/streamTextCommit.ts b/packages/ui/src/components/chat/lib/streamTextCommit.ts
new file mode 100644
index 00000000..15aa0d19
--- /dev/null
+++ b/packages/ui/src/components/chat/lib/streamTextCommit.ts
@@ -0,0 +1,47 @@
+// Block-level streaming reveal.
+//
+// Token-by-token streaming mutates the trailing paragraph in place on every
+// tick: words rewrap, the last line jitters, and the reader's eye fights the
+// motion. Committing only up to the last COMPLETE line keeps every rendered
+// block immutable once it appears — prose arrives a paragraph at a time (a
+// markdown paragraph is one logical line), code fences reveal line by line,
+// tables row by row — and the only remaining motion is the follow scroll.
+//
+// A paragraph with no newline for a long stretch must not stall the stream,
+// so once the held tail outgrows a threshold it is committed at the last
+// sentence boundary (falling back to the last word boundary).
+
+const HOLD_MAX_CHARS = 320;
+
+const SENTENCE_END = /[.!?…][)"'»”’]?\s/g;
+
+export const commitStreamedText = (text: string): string => {
+    if (text.length === 0) return text;
+
+    const lastNewline = text.lastIndexOf('\n');
+    const committed = lastNewline === -1 ? '' : text.slice(0, lastNewline + 1);
+    const held = text.slice(committed.length);
+
+    if (held.length <= HOLD_MAX_CHARS) {
+        return committed;
+    }
+
+    // The held paragraph got long: release it up to the last finished
+    // sentence so the block still never mutates mid-sentence.
+    let lastSentenceEnd = -1;
+    for (const match of held.matchAll(SENTENCE_END)) {
+        lastSentenceEnd = match.index + match[0].length;
+    }
+    if (lastSentenceEnd > 0) {
+        return committed + held.slice(0, lastSentenceEnd);
+    }
+
+    // No sentence boundary either (a URL, a very long token run): release up
+    // to the last word boundary, keeping only the incomplete word held.
+    const lastSpace = held.lastIndexOf(' ');
+    if (lastSpace > 0) {
+        return committed + held.slice(0, lastSpace + 1);
+    }
+
+    return text;
+};
diff --git a/packages/ui/src/components/chat/lib/turns/streamingTailEntry.test.ts b/packages/ui/src/components/chat/lib/turns/streamingTailEntry.test.ts
index ed674707..b283a61c 100644
--- a/packages/ui/src/components/chat/lib/turns/streamingTailEntry.test.ts
+++ b/packages/ui/src/components/chat/lib/turns/streamingTailEntry.test.ts
@@ -64,8 +64,7 @@ describe('buildLiveStreamingEntry', () => {
         const entry = turnEntry(assistant);
 
         const next = buildLiveStreamingEntry(entry, {
-            activeStreamingMessageId: 'assistant_other',
-            liveParts: [textPart('part_live', 'live')],
+            livePartsByMessageId: { assistant_other: [textPart('part_live', 'live')] },
             showTextJustificationActivity: true,
             showTurnChangedFiles: false,
         });
@@ -79,8 +78,7 @@ describe('buildLiveStreamingEntry', () => {
         const liveParts = [reasoningPart('part_1_live', 'thinking')];
 
         const next = buildLiveStreamingEntry(entry, {
-            activeStreamingMessageId: 'assistant_1',
-            liveParts,
+            livePartsByMessageId: { assistant_1: liveParts },
             showTextJustificationActivity: true,
             showTurnChangedFiles: false,
         });
@@ -102,8 +100,7 @@ describe('buildLiveStreamingEntry', () => {
         const liveParts = [textPart('part_1_live', 'live')];
 
         const next = buildLiveStreamingEntry(entry, {
-            activeStreamingMessageId: 'assistant_1',
-            liveParts,
+            livePartsByMessageId: { assistant_1: liveParts },
             showTextJustificationActivity: false,
             showTurnChangedFiles: false,
         });
@@ -121,8 +118,7 @@ describe('buildLiveStreamingEntry', () => {
         const synthetic = syntheticTextPart('part_synthetic', 'hidden while streaming');
 
         const next = buildLiveStreamingEntry(entry, {
-            activeStreamingMessageId: 'assistant_1',
-            liveParts: [synthetic, visible],
+            livePartsByMessageId: { assistant_1: [synthetic, visible] },
             showTextJustificationActivity: true,
             showTurnChangedFiles: false,
         });
@@ -131,4 +127,39 @@ describe('buildLiveStreamingEntry', () => {
         if (next.kind !== 'turn') return;
         expect(next.turn.assistantMessages[0]?.parts).toEqual([visible]);
     });
+
+    test('keeps a finished step message on its live parts after the stream moves on', () => {
+        const finished = message('assistant_1', 'assistant', 'user_1', []);
+        const streaming = message('assistant_2', 'assistant', 'user_1', []);
+        const entry = turnEntry(finished);
+        if (entry.kind !== 'turn') return;
+        entry.turn.assistantMessageIds = ['assistant_1', 'assistant_2'];
+        entry.turn.assistantMessages = [finished, streaming];
+        const finishedLive = [textPart('part_tool_done', 'tool output')];
+        const streamingLive = [textPart('part_streaming', 'streaming')];
+
+        const next = buildLiveStreamingEntry(entry, {
+            livePartsByMessageId: { assistant_1: finishedLive, assistant_2: streamingLive },
+            showTextJustificationActivity: true,
+            showTurnChangedFiles: false,
+        });
+
+        expect(next.kind).toBe('turn');
+        if (next.kind !== 'turn') return;
+        expect(next.turn.assistantMessages[0]?.parts).toEqual(finishedLive);
+        expect(next.turn.assistantMessages[1]?.parts).toEqual(streamingLive);
+    });
+
+    test('never erases record parts with an empty live array', () => {
+        const assistant = message('assistant_1', 'assistant', 'user_1', [textPart('part_1', 'kept')]);
+        const entry = turnEntry(assistant);
+
+        const next = buildLiveStreamingEntry(entry, {
+            livePartsByMessageId: { assistant_1: [] },
+            showTextJustificationActivity: true,
+            showTurnChangedFiles: false,
+        });
+
+        expect(next).toBe(entry);
+    });
 });
diff --git a/packages/ui/src/components/chat/lib/turns/streamingTailEntry.ts b/packages/ui/src/components/chat/lib/turns/streamingTailEntry.ts
index 2bf7dd2a..755a06f3 100644
--- a/packages/ui/src/components/chat/lib/turns/streamingTailEntry.ts
+++ b/packages/ui/src/components/chat/lib/turns/streamingTailEntry.ts
@@ -15,8 +15,13 @@ export type StreamingTailEntry =
     | { kind: 'turn'; key: string; turn: TurnRecord; isLastTurn: boolean };
 
 type BuildLiveStreamingEntryOptions = {
-    activeStreamingMessageId: string | null | undefined;
-    liveParts: Part[];
+    // Live parts for EVERY message of the streaming tail, not only the one
+    // currently streaming: when the stream moves to the next step message, the
+    // previous message's base record can still lag behind the part store, and
+    // rendering it from that stale snapshot briefly drops its completed tool
+    // parts — remounting them (and replaying their reveal animation) once the
+    // record catches up.
+    livePartsByMessageId: Readonly<Record<string, Part[]>>;
     showTextJustificationActivity: boolean;
     showTurnChangedFiles: boolean;
     mergeHiddenUserTurns?: { planModeEnabled: boolean };
@@ -24,10 +29,12 @@ type BuildLiveStreamingEntryOptions = {
 
 const withLiveParts = (
     message: ChatMessageEntry,
-    activeStreamingMessageId: string,
-    liveParts: Part[],
+    livePartsByMessageId: Readonly<Record<string, Part[]>>,
 ): ChatMessageEntry => {
-    if (message.info.id !== activeStreamingMessageId || message.parts === liveParts) {
+    const liveParts = livePartsByMessageId[message.info.id];
+    // An empty live array is ambiguous — the store may simply not have loaded
+    // this message's parts — and must never erase parts the record does have.
+    if (!liveParts || liveParts.length === 0 || message.parts === liveParts) {
         return message;
     }
 
@@ -41,13 +48,10 @@ export const buildLiveStreamingEntry = <TEntry extends StreamingTailEntry>(
     entry: TEntry,
     options: BuildLiveStreamingEntryOptions,
 ): TEntry => {
-    const activeStreamingMessageId = options.activeStreamingMessageId;
-    if (!activeStreamingMessageId) {
-        return entry;
-    }
+    const livePartsByMessageId = options.livePartsByMessageId;
 
     if (entry.kind === 'ungrouped') {
-        const message = withLiveParts(entry.message, activeStreamingMessageId, options.liveParts);
+        const message = withLiveParts(entry.message, livePartsByMessageId);
         if (message === entry.message) {
             return entry;
         }
@@ -59,7 +63,7 @@ export const buildLiveStreamingEntry = <TEntry extends StreamingTailEntry>(
 
     let changed = false;
     const assistantMessages = entry.turn.assistantMessages.map((message) => {
-        const next = withLiveParts(message, activeStreamingMessageId, options.liveParts);
+        const next = withLiveParts(message, livePartsByMessageId);
         if (next !== message) {
             changed = true;
         }
diff --git a/packages/ui/src/components/chat/markdown/decorate.ts b/packages/ui/src/components/chat/markdown/decorate.ts
index 6dba0f2b..65d5b6ed 100644
--- a/packages/ui/src/components/chat/markdown/decorate.ts
+++ b/packages/ui/src/components/chat/markdown/decorate.ts
@@ -131,6 +131,9 @@ const layoutCodeLines = (pre: HTMLPreElement): void => {
   const code = pre.querySelector<HTMLElement>(':scope > code');
   if (!code || code.hasAttribute('data-md-code-lines')) return;
 
+  // The real gutter takes over the reserved footprint.
+  pre.removeAttribute('data-md-gutter-reserved');
+
   const text = code.textContent ?? '';
   const hasTrailingNewline = text.endsWith('\n');
   const lines = hasTrailingNewline ? text.slice(0, -1).split('\n') : text.split('\n');
@@ -263,7 +266,15 @@ const decorateCodeBlocks = (root: HTMLElement, ctx: DecorateContext): void => {
     pre.style.margin = '0';
     pre.style.background = 'transparent';
     pre.classList.add('min-w-0', 'w-full', 'flex-1');
-    if (!ctx.deferCodeLineNumberSync) layoutCodeLines(pre);
+    if (!ctx.deferCodeLineNumberSync) {
+      layoutCodeLines(pre);
+    } else {
+      // Streaming defers the per-line gutter markup, but the gutter's
+      // horizontal footprint is reserved immediately — otherwise the
+      // end-of-stream decorate pass shifts every code line right by the
+      // gutter column and the finished message visibly jumps.
+      pre.setAttribute('data-md-gutter-reserved', '');
+    }
     body.appendChild(pre);
     wrapper.appendChild(header);
     wrapper.appendChild(body);
diff --git a/packages/ui/src/components/chat/markdown/markdown-worker.ts b/packages/ui/src/components/chat/markdown/markdown-worker.ts
index 2feb270a..b93eb6dc 100644
--- a/packages/ui/src/components/chat/markdown/markdown-worker.ts
+++ b/packages/ui/src/components/chat/markdown/markdown-worker.ts
@@ -1,4 +1,5 @@
 import MarkdownShikiWorkerUrl from './markdown-shiki.worker.ts?worker&url';
+import { isVSCodeRuntime } from '@/stores/utils/vscodeRuntime';
 import {
   contentFingerprint,
   estimateTokenRunsBytes,
@@ -46,6 +47,8 @@ const resultCache = new HighlightResultCache<CachedHighlight>({
 const inflight = new Map<string, Promise<CachedHighlight | null>>();
 
 let worker: Worker | undefined;
+let workerCreation: Promise<Worker | undefined> | undefined;
+let workerObjectUrl: string | undefined;
 let nextId = 0;
 const pending = new Map<number, PendingResolver>();
 // Theme names whose full definition we've already shipped to the live worker, so
@@ -71,31 +74,56 @@ const failAll = (): void => {
   inflight.clear();
   worker?.terminate();
   worker = undefined;
+  workerCreation = undefined;
+  if (workerObjectUrl) {
+    URL.revokeObjectURL(workerObjectUrl);
+    workerObjectUrl = undefined;
+  }
 };
 
-const getWorker = (): Worker | undefined => {
-  if (worker) return worker;
+const createWorker = async (): Promise<Worker | undefined> => {
   if (typeof window === 'undefined' || typeof Worker === 'undefined') return undefined;
   try {
-    worker = new Worker(MarkdownShikiWorkerUrl, { type: 'module' });
+    let workerUrl = MarkdownShikiWorkerUrl;
+    if (isVSCodeRuntime(null)) {
+      const response = await fetch(workerUrl);
+      if (!response.ok) throw new Error(`Shiki worker request failed with ${response.status}`);
+      workerObjectUrl = URL.createObjectURL(await response.blob());
+      workerUrl = workerObjectUrl;
+    }
+
+    const instance = new Worker(workerUrl, { type: 'module' });
+    worker = instance;
+    instance.onmessage = (event: MessageEvent<MarkdownWorkerResponse>) => {
+      const resolve = pending.get(event.data.id);
+      if (!resolve) return;
+      pending.delete(event.data.id);
+      resolve(event.data);
+    };
+    instance.onerror = failAll;
+    instance.onmessageerror = failAll;
+    instance.postMessage({ type: 'init' } satisfies MarkdownWorkerRequest);
+    return instance;
   } catch (err) {
+    if (workerObjectUrl) {
+      URL.revokeObjectURL(workerObjectUrl);
+      workerObjectUrl = undefined;
+    }
     console.error('Failed to create Shiki worker:', err);
     return undefined;
   }
-  worker.onmessage = (event: MessageEvent<MarkdownWorkerResponse>) => {
-    const resolve = pending.get(event.data.id);
-    if (!resolve) return;
-    pending.delete(event.data.id);
-    resolve(event.data);
-  };
-  worker.onerror = failAll;
-  worker.onmessageerror = failAll;
-  worker.postMessage({ type: 'init' } satisfies MarkdownWorkerRequest);
-  return worker;
 };
 
-const request = (payload: (id: number) => MarkdownWorkerRequest): Promise<MarkdownWorkerResponse | null> => {
-  const instance = getWorker();
+const getWorker = async (): Promise<Worker | undefined> => {
+  if (worker) return worker;
+  workerCreation ??= createWorker().finally(() => {
+    workerCreation = undefined;
+  });
+  return workerCreation;
+};
+
+const request = async (payload: (id: number) => MarkdownWorkerRequest): Promise<MarkdownWorkerResponse | null> => {
+  const instance = await getWorker();
   if (!instance) return Promise.resolve(null);
   const id = ++nextId;
   return new Promise<MarkdownWorkerResponse | null>((resolve) => {
diff --git a/packages/ui/src/components/chat/markdown/markdownCore.ts b/packages/ui/src/components/chat/markdown/markdownCore.ts
index 822a3168..5d43f798 100644
--- a/packages/ui/src/components/chat/markdown/markdownCore.ts
+++ b/packages/ui/src/components/chat/markdown/markdownCore.ts
@@ -178,9 +178,11 @@ type MarkdownBlock = {
   raw: string;
   src: string;
   mode: 'full' | 'live';
-  // When false, skip syntax highlighting for this block. Set for the actively
-  // streaming open code fence so we don't re-tokenize a growing block ~40x/sec
-  // (O(n^2)); it highlights once the fence closes and becomes a stable block.
+  // When false, skip syntax highlighting for this block. Block-level commit
+  // feeds the open fence whole lines at the throttle cadence (<=10/sec), so a
+  // partial fence highlights too and streamed code arrives colored; only a
+  // very large open fence falls back to plain text until it closes, keeping
+  // the repeated worker re-tokenization bounded.
   highlight: boolean;
 };
 
@@ -201,6 +203,11 @@ const hasOpenFence = (raw: string): boolean => {
   return !new RegExp(`^[\\t ]{0,3}${char}{${size},}[\\t ]*$`).test(last);
 };
 
+// Above this, re-highlighting the still-open fence on every committed line
+// costs more than the colored preview is worth; the block highlights in one
+// pass when the fence closes.
+const OPEN_FENCE_HIGHLIGHT_LINE_LIMIT = 300;
+
 const heal = (text: string): string => {
   try {
     return remend(text, { linkMode: 'text-only' });
@@ -250,11 +257,13 @@ const streamBlocks = (text: string, live: boolean): MarkdownBlock[] => {
     const raw = token.raw ?? '';
     const isLast = i === tail;
     const openFence = token.type === 'code' && hasOpenFence(raw);
+    const openFenceHighlight = openFence
+      && raw.split('\n').length <= OPEN_FENCE_HIGHLIGHT_LINE_LIMIT;
     blocks.push({
       raw,
       src: openFence ? raw : heal(raw),
       mode: isLast ? 'live' : 'full',
-      highlight: !openFence,
+      highlight: !openFence || openFenceHighlight,
     });
   }
 
diff --git a/packages/ui/src/components/chat/message/MessageBody.tsx b/packages/ui/src/components/chat/message/MessageBody.tsx
index 3623d30e..35a17a4d 100644
--- a/packages/ui/src/components/chat/message/MessageBody.tsx
+++ b/packages/ui/src/components/chat/message/MessageBody.tsx
@@ -19,7 +19,6 @@ import { SaveProjectPlanDialog } from '@/components/session/SaveProjectPlanDialo
 import { ForkSessionDialog, type ForkSessionExecution } from '@/components/session/ForkSessionDialog';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { ArrowsMerge } from '@/components/icons/ArrowsMerge';
-import type { ContentChangeReason } from '@/hooks/useChatAutoFollow';
 
 import { MarkdownImageGallery, SimpleMarkdownRenderer } from '../MarkdownRenderer';
 import { useSessionUIStore } from '@/sync/session-ui-store';
@@ -419,13 +418,10 @@ interface MessageBodyProps {
     onShowPopup: (content: ToolPopupContent) => void;
     streamPhase: StreamPhase;
     allowAnimation: boolean;
-    onContentChange?: (reason?: ContentChangeReason, messageId?: string) => void;
-
     shouldShowHeader?: boolean;
     hasTextContent?: boolean;
     onCopyMessage?: () => void | boolean | Promise<void | boolean>;
     copiedMessage?: boolean;
-    onAuxiliaryContentComplete?: () => void;
     showReasoningTraces?: boolean;
     agentMention?: AgentMentionInfo;
     turnGroupingContext?: TurnGroupingContext;
@@ -1112,10 +1108,8 @@ const AssistantMessageBody = React.memo(({
     onShowPopup,
     streamPhase: _streamPhase,
     allowAnimation: _allowAnimation,
-    onContentChange,
     hasTextContent = false,
     onCopyMessage,
-    onAuxiliaryContentComplete,
     showReasoningTraces = false,
     turnGroupingContext,
     errorMessage,
@@ -1423,50 +1417,6 @@ const AssistantMessageBody = React.memo(({
         || (hasTools && (hasPendingTools || hasOpenStep || !allToolsFinalized));
     const shouldHoldReasoning = awaitingMessageCompletion || shouldHoldForReasoning;
 
-    const hasAuxiliaryContent = hasTools || reasoningParts.length > 0;
-    const isTextlessAssistantMessage = assistantTextParts.length === 0;
-    const auxiliaryContentComplete = hasAuxiliaryContent && isTextlessAssistantMessage && !shouldHoldTools && !shouldHoldReasoning && allToolsFinalized && reasoningComplete;
-    const auxiliaryCompletionAnnouncedRef = React.useRef(false);
-    const soloReasoningScrollTriggeredRef = React.useRef(false);
-
-    React.useEffect(() => {
-        soloReasoningScrollTriggeredRef.current = false;
-    }, [messageId]);
-
-    React.useEffect(() => {
-        if (!auxiliaryContentComplete) {
-            auxiliaryCompletionAnnouncedRef.current = false;
-            return;
-        }
-        if (auxiliaryCompletionAnnouncedRef.current) {
-            return;
-        }
-        auxiliaryCompletionAnnouncedRef.current = true;
-        onAuxiliaryContentComplete?.();
-    }, [auxiliaryContentComplete, onAuxiliaryContentComplete]);
-
-    React.useEffect(() => {
-        if (awaitingMessageCompletion) {
-            soloReasoningScrollTriggeredRef.current = false;
-            return;
-        }
-        if (hasTools) {
-            soloReasoningScrollTriggeredRef.current = false;
-            return;
-        }
-        if (reasoningParts.length === 0) {
-            return;
-        }
-        if (shouldHoldReasoning || !reasoningComplete) {
-            return;
-        }
-        if (soloReasoningScrollTriggeredRef.current) {
-            return;
-        }
-        soloReasoningScrollTriggeredRef.current = true;
-        onContentChange?.('structural');
-    }, [awaitingMessageCompletion, hasTools, onContentChange, reasoningComplete, reasoningParts.length, shouldHoldReasoning]);
-
     const hasCopyableText = Boolean(hasTextContent) && !awaitingMessageCompletion;
 
     const handleForkClick = React.useCallback(
@@ -1821,7 +1771,6 @@ const AssistantMessageBody = React.memo(({
                         expandedTools={expandedTools}
                         onToggleTool={onToggleTool}
                         onShowPopup={onShowPopup}
-                        onContentChange={onContentChange}
                         streamPhase={effectiveStreamPhase}
                         showHeader={true}
                         animateRows={animateActivityRows}
@@ -1898,7 +1847,6 @@ const AssistantMessageBody = React.memo(({
                             messageId={messageId}
                             streamPhase={effectiveStreamPhase}
                             chatRenderMode={chatRenderMode}
-                            onContentChange={onContentChange}
                             onShowPopup={onShowPopup}
                         />
                     </div>
@@ -1933,7 +1881,6 @@ const AssistantMessageBody = React.memo(({
                                 messageId={messageId}
                                 streamPhase={effectiveStreamPhase}
                                 chatRenderMode={chatRenderMode}
-                                onContentChange={onContentChange}
                                 onShowPopup={onShowPopup}
                             />
                         );
@@ -1945,7 +1892,6 @@ const AssistantMessageBody = React.memo(({
                                 part={part}
                                 messageId={messageId}
                                 streamPhase={effectiveStreamPhase}
-                                onContentChange={onContentChange}
                             />
                         );
                     }
@@ -1989,7 +1935,6 @@ const AssistantMessageBody = React.memo(({
                                     onToggle={onToggleTool}
                                     isMobile={isMobile}
                                     alwaysShowActions={alwaysShowMessageActions}
-                                    onContentChange={onContentChange}
                                     onShowPopup={onShowPopup}
                                     animateTailText={animatedToolIdsLookup.has(toolPart.id)}
                                 />
@@ -2061,7 +2006,6 @@ const AssistantMessageBody = React.memo(({
         messageActionButtons,
         renderJustificationActions,
         sessionId,
-        onContentChange,
         onShowPopup,
         onToggleTool,
         shouldRenderActivityGroup,
diff --git a/packages/ui/src/components/chat/message/parts/AssistantTextPart.tsx b/packages/ui/src/components/chat/message/parts/AssistantTextPart.tsx
index 74b34b24..45720bfe 100644
--- a/packages/ui/src/components/chat/message/parts/AssistantTextPart.tsx
+++ b/packages/ui/src/components/chat/message/parts/AssistantTextPart.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import type { Part } from '@opencode-ai/sdk/v2';
 import { MarkdownRenderer } from '../../MarkdownRenderer';
 import type { StreamPhase, ToolPopupContent } from '../types';
-import type { ContentChangeReason } from '@/hooks/useChatAutoFollow';
 import { useStreamingTextThrottle } from '../../hooks/useStreamingTextThrottle';
 import { resolveAssistantDisplayText, shouldRenderAssistantText } from './assistantTextVisibility';
 import { streamPerfCount, streamPerfObserve } from '@/stores/utils/streamDebug';
@@ -17,7 +16,6 @@ interface AssistantTextPartProps {
     messageId: string;
     streamPhase: StreamPhase;
     chatRenderMode?: 'sorted' | 'live';
-    onContentChange?: (reason?: ContentChangeReason, messageId?: string) => void;
     onShowPopup?: (content: ToolPopupContent) => void;
 }
 
diff --git a/packages/ui/src/components/chat/message/parts/JustificationBlock.tsx b/packages/ui/src/components/chat/message/parts/JustificationBlock.tsx
index b3620dc1..1008694d 100644
--- a/packages/ui/src/components/chat/message/parts/JustificationBlock.tsx
+++ b/packages/ui/src/components/chat/message/parts/JustificationBlock.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import type { Part } from '@opencode-ai/sdk/v2';
-import type { ContentChangeReason } from '@/hooks/useChatAutoFollow';
 import { useUIStore } from '@/stores/useUIStore';
 import { ReasoningTimelineBlock } from './ReasoningPart';
 
@@ -22,14 +21,12 @@ const cleanJustificationText = (text: string): string => {
 interface JustificationBlockProps {
     part: Part;
     messageId: string;
-    onContentChange?: (reason?: ContentChangeReason) => void;
     actions?: React.ReactNode;
 }
 
 const JustificationBlock: React.FC<JustificationBlockProps> = ({
     part,
     messageId,
-    onContentChange,
     actions,
 }) => {
     const chatRenderMode = useUIStore((state) => state.chatRenderMode);
@@ -47,7 +44,6 @@ const JustificationBlock: React.FC<JustificationBlockProps> = ({
         <ReasoningTimelineBlock
             text={textContent}
             variant="justification"
-            onContentChange={onContentChange}
             blockId={part.id || `${messageId}-justification`}
             time={time}
             showDuration={chatRenderMode !== 'sorted'}
diff --git a/packages/ui/src/components/chat/message/parts/ProgressiveGroup.tsx b/packages/ui/src/components/chat/message/parts/ProgressiveGroup.tsx
index 07d6c9f5..dfb61cf7 100644
--- a/packages/ui/src/components/chat/message/parts/ProgressiveGroup.tsx
+++ b/packages/ui/src/components/chat/message/parts/ProgressiveGroup.tsx
@@ -4,7 +4,6 @@ import { cn } from '@/lib/utils';
 import type { TurnActivityRecord as TurnActivityPart } from '../../lib/turns/types';
 import type { ToolPart as ToolPartType } from '@opencode-ai/sdk/v2';
 import type { StreamPhase } from '../types';
-import type { ContentChangeReason } from '@/hooks/useChatAutoFollow';
 import type { ToolPopupContent } from '../types';
 import ToolPart from './ToolPart';
 import { MinDurationShineText } from './MinDurationShineText';
@@ -40,7 +39,6 @@ interface ProgressiveGroupProps {
     expandedTools: Set<string>;
     onToggleTool: (toolId: string) => void;
     onShowPopup: (content: ToolPopupContent) => void;
-    onContentChange?: (reason?: ContentChangeReason) => void;
     streamPhase: StreamPhase;
     showHeader: boolean;
     animateRows?: boolean;
@@ -376,9 +374,7 @@ interface ExpandableToolRowProps {
     isMobile: boolean;
     onToggleTool: (toolId: string) => void;
     onShowPopup: (content: ToolPopupContent) => void;
-    onContentChange?: (reason?: ContentChangeReason) => void;
     animateTailText: boolean;
-    animateRows: boolean;
 }
 
 const ExpandableToolRow: React.FC<ExpandableToolRowProps> = ({
@@ -387,9 +383,7 @@ const ExpandableToolRow: React.FC<ExpandableToolRowProps> = ({
     isMobile,
     onToggleTool,
     onShowPopup,
-    onContentChange,
     animateTailText,
-    animateRows,
 }) => {
     const handleToggle = React.useCallback(() => {
         onToggleTool(activity.id);
@@ -401,23 +395,22 @@ const ExpandableToolRow: React.FC<ExpandableToolRowProps> = ({
             isExpanded={isExpanded}
             onToggle={handleToggle}
             isMobile={isMobile}
-            onContentChange={onContentChange}
             onShowPopup={onShowPopup}
             animateTailText={animateTailText}
         />
     );
 
-    const maybeWrapped = animateTailText ? (
-        <ToolRevealOnMount animate={true} wipe>
-            {content}
-        </ToolRevealOnMount>
-    ) : content;
-
-    if (!animateRows) {
-        return maybeWrapped;
-    }
-
-    return <FadeInOnReveal>{maybeWrapped}</FadeInOnReveal>;
+    // Wrappers are unconditional: a conditional wrapper changes the element
+    // type at this position when animateTailText/animateRows flip (message
+    // completion), remounting the tool subtree and replaying the reveal wipe.
+    // Both wrappers are inert with animation off.
+    return (
+        <FadeInOnReveal>
+            <ToolRevealOnMount animate={animateTailText} wipe>
+                {content}
+            </ToolRevealOnMount>
+        </FadeInOnReveal>
+    );
 };
 
 const MemoExpandableToolRow = React.memo(ExpandableToolRow, (prev, next) => {
@@ -425,9 +418,7 @@ const MemoExpandableToolRow = React.memo(ExpandableToolRow, (prev, next) => {
         && prev.isMobile === next.isMobile
         && prev.onToggleTool === next.onToggleTool
         && prev.onShowPopup === next.onShowPopup
-        && prev.onContentChange === next.onContentChange
         && prev.animateTailText === next.animateTailText
-        && prev.animateRows === next.animateRows
         && prev.activity.id === next.activity.id
         && prev.activity.kind === next.activity.kind
         && prev.activity.endedAt === next.activity.endedAt
@@ -438,14 +429,12 @@ interface StaticGroupedToolRowProps {
     toolName: string;
     activities: TurnActivityPart[];
     animateTailText: boolean;
-    animateRows: boolean;
 }
 
 const StaticGroupedToolRow: React.FC<StaticGroupedToolRowProps> = ({
     toolName,
     activities,
     animateTailText,
-    animateRows,
 }) => {
     const content = (
         <StaticToolRow
@@ -455,23 +444,22 @@ const StaticGroupedToolRow: React.FC<StaticGroupedToolRowProps> = ({
         />
     );
 
-    const maybeWrapped = animateTailText ? (
-        <ToolRevealOnMount animate={true} wipe>
-            {content}
-        </ToolRevealOnMount>
-    ) : content;
-
-    if (!animateRows) {
-        return maybeWrapped;
-    }
-
-    return <FadeInOnReveal>{maybeWrapped}</FadeInOnReveal>;
+    // Wrappers are unconditional: a conditional wrapper changes the element
+    // type at this position when animateTailText/animateRows flip (message
+    // completion), remounting the tool subtree and replaying the reveal wipe.
+    // Both wrappers are inert with animation off.
+    return (
+        <FadeInOnReveal>
+            <ToolRevealOnMount animate={animateTailText} wipe>
+                {content}
+            </ToolRevealOnMount>
+        </FadeInOnReveal>
+    );
 };
 
 const MemoStaticGroupedToolRow = React.memo(StaticGroupedToolRow, (prev, next) => {
     return prev.toolName === next.toolName
         && prev.animateTailText === next.animateTailText
-        && prev.animateRows === next.animateRows
         && areActivityListsEqual(prev.activities, next.activities);
 });
 
@@ -795,9 +783,8 @@ export const StaticToolRow = React.memo(StaticToolRowInner, (prev, next) => {
 /**
  * Inline reasoning text block — rendered as dimmed italic markdown.
  */
-const InlineReasoningBlock = React.memo(({ activity, onContentChange, streamPhase }: {
+const InlineReasoningBlock = React.memo(({ activity, streamPhase }: {
     activity: TurnActivityPart;
-    onContentChange?: (reason?: ContentChangeReason) => void;
     streamPhase: StreamPhase;
 }) => {
     return (
@@ -805,7 +792,6 @@ const InlineReasoningBlock = React.memo(({ activity, onContentChange, streamPhas
             part={activity.part}
             messageId={activity.messageId}
             streamPhase={streamPhase}
-            onContentChange={onContentChange}
         />
     );
 });
@@ -813,16 +799,14 @@ const InlineReasoningBlock = React.memo(({ activity, onContentChange, streamPhas
 /**
  * Inline justification text block — rendered as normal assistant text between tools.
  */
-const InlineJustificationBlock = React.memo(({ activity, onContentChange, actions }: {
+const InlineJustificationBlock = React.memo(({ activity, actions }: {
     activity: TurnActivityPart;
-    onContentChange?: (reason?: ContentChangeReason) => void;
     actions?: React.ReactNode;
 }) => {
     return (
         <JustificationBlock
             part={activity.part}
             messageId={activity.messageId}
-            onContentChange={onContentChange}
             actions={actions}
         />
     );
@@ -837,7 +821,6 @@ const ProgressiveGroup: React.FC<ProgressiveGroupProps> = ({
     expandedTools,
     onToggleTool,
     onShowPopup,
-    onContentChange,
     streamPhase,
     showHeader,
     animateRows = true,
@@ -898,7 +881,6 @@ const ProgressiveGroup: React.FC<ProgressiveGroupProps> = ({
                         <InlineReasoningBlock
                             activity={row.activity}
                             streamPhase={streamPhase}
-                            onContentChange={onContentChange}
                         />
                     </>
                 );
@@ -909,7 +891,6 @@ const ProgressiveGroup: React.FC<ProgressiveGroupProps> = ({
                     <>
                         <InlineJustificationBlock
                             activity={row.activity}
-                            onContentChange={onContentChange}
                             actions={renderJustificationActions?.(row.activity)}
                         />
                     </>
@@ -924,9 +905,7 @@ const ProgressiveGroup: React.FC<ProgressiveGroupProps> = ({
                         isMobile={isMobile}
                         onToggleTool={onToggleTool}
                         onShowPopup={onShowPopup}
-                        onContentChange={onContentChange}
                         animateTailText={Boolean(animatedToolIds?.has(row.activity.id))}
-                        animateRows={animateRows}
                     />
                 );
 
@@ -937,7 +916,6 @@ const ProgressiveGroup: React.FC<ProgressiveGroupProps> = ({
                         toolName={row.toolName}
                         activities={row.activities}
                         animateTailText={row.activities.some((activity) => animatedToolIds?.has(activity.id))}
-                        animateRows={animateRows}
                     />
                 );
 
@@ -950,9 +928,7 @@ const ProgressiveGroup: React.FC<ProgressiveGroupProps> = ({
                         isMobile={isMobile}
                         onToggleTool={onToggleTool}
                         onShowPopup={onShowPopup}
-                        onContentChange={onContentChange}
                         animateTailText={Boolean(animatedToolIds?.has(row.activity.id))}
-                        animateRows={animateRows}
                     />
                 );
 
diff --git a/packages/ui/src/components/chat/message/parts/ReasoningPart.tsx b/packages/ui/src/components/chat/message/parts/ReasoningPart.tsx
index c2abb190..1922100c 100644
--- a/packages/ui/src/components/chat/message/parts/ReasoningPart.tsx
+++ b/packages/ui/src/components/chat/message/parts/ReasoningPart.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { animate, type AnimationPlaybackControls } from 'motion';
 import type { Part } from '@opencode-ai/sdk/v2';
 import { cn } from '@/lib/utils';
-import type { ContentChangeReason } from '@/hooks/useChatAutoFollow';
 import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
 import { Icon } from '@/components/icon/Icon';
 import { BusyDots } from './BusyDots';
@@ -10,6 +9,7 @@ import { useI18n } from '@/lib/i18n';
 import { useUIStore } from '@/stores/useUIStore';
 import { MarkdownRenderer } from '../../MarkdownRenderer';
 import { useStreamingTextThrottle } from '../../hooks/useStreamingTextThrottle';
+import { commitStreamedText } from '../../lib/streamTextCommit';
 import type { StreamPhase } from '../types';
 
 const TOOL_ROW_TEXT_CLASS = '!text-[length:var(--text-meta)] !leading-5 sm:!leading-6 tracking-normal';
@@ -81,7 +81,6 @@ const getReasoningSummary = (text: string): string => {
 type ReasoningTimelineBlockProps = {
     text: string;
     variant: ReasoningVariant;
-    onContentChange?: (reason?: ContentChangeReason) => void;
     blockId: string;
     time?: { start?: number; end?: number };
     showDuration?: boolean;
@@ -99,7 +98,6 @@ type ExpansionState = {
 export const ReasoningTimelineBlock: React.FC<ReasoningTimelineBlockProps> = ({
     text,
     variant,
-    onContentChange,
     blockId,
     time,
     isStreaming = false,
@@ -123,11 +121,6 @@ export const ReasoningTimelineBlock: React.FC<ReasoningTimelineBlockProps> = ({
     const contentRef = React.useRef<HTMLDivElement>(null);
     const contentAnimationRef = React.useRef<AnimationPlaybackControls | null>(null);
     const contentMountedRef = React.useRef(false);
-    // Stable handle to onContentChange so the height-animation layout effect can
-    // signal auto-follow without taking onContentChange as a dependency (which
-    // would risk re-running — and thus restarting — the animation on re-render).
-    const onContentChangeRef = React.useRef(onContentChange);
-    onContentChangeRef.current = onContentChange;
 
     const summary = React.useMemo(() => getReasoningSummary(text), [text]);
     const toggleAriaLabel = isExpanded
@@ -137,8 +130,7 @@ export const ReasoningTimelineBlock: React.FC<ReasoningTimelineBlockProps> = ({
     const handleToggle = React.useCallback(() => {
         setShouldRenderExpandedContent(true);
         setExpansion({ expanded: !isExpanded, source: 'user' });
-        onContentChange?.('structural');
-    }, [isExpanded, onContentChange]);
+    }, [isExpanded]);
 
     const handleKeyDown = React.useCallback((event: React.KeyboardEvent) => {
         if (event.key === 'Enter' || event.key === ' ') {
@@ -159,13 +151,6 @@ export const ReasoningTimelineBlock: React.FC<ReasoningTimelineBlockProps> = ({
         });
     }, [canAutoExpand]);
 
-    React.useEffect(() => {
-        if (text.trim().length === 0) {
-            return;
-        }
-        onContentChange?.('structural');
-    }, [onContentChange, text]);
-
     React.useEffect(() => {
         if (isExpanded || isStreaming) {
             setShouldRenderExpandedContent(true);
@@ -239,11 +224,6 @@ export const ReasoningTimelineBlock: React.FC<ReasoningTimelineBlockProps> = ({
             element.style.height = '0px';
         } else {
             element.style.height = `${element.scrollHeight}px`;
-            // Only the COLLAPSE animation needs the guard: it shrinks the
-            // timeline and the trailing async scroll events can be misread as a
-            // user scroll-away. Expansion grows the timeline and re-pins cleanly,
-            // and guarding it caused a faint scroll fight while thinking streams.
-            onContentChangeRef.current?.('animation');
         }
 
         const animation = animate(
@@ -436,14 +416,12 @@ export const ReasoningTimelineBlock: React.FC<ReasoningTimelineBlockProps> = ({
 
 type ReasoningPartProps = {
     part: Part;
-    onContentChange?: (reason?: ContentChangeReason) => void;
     messageId: string;
     streamPhase?: StreamPhase;
 };
 
 const ReasoningPart = React.memo(({
     part,
-    onContentChange,
     messageId,
     streamPhase,
 }: ReasoningPartProps) => {
@@ -454,11 +432,14 @@ const ReasoningPart = React.memo(({
     const time = partWithText.time;
     const canBeStreaming = streamPhase === undefined || streamPhase !== 'completed';
     const isStreaming = chatRenderMode === 'live' && canBeStreaming && typeof time?.end !== 'number';
-    const throttledText = useStreamingTextThrottle({
+    const throttledTextRaw = useStreamingTextThrottle({
         text: textContent,
         isStreaming,
         identityKey: `${messageId}:${part.id ?? 'reasoning'}`,
     });
+    // Same block-level reveal as assistant text: a shown reasoning paragraph
+    // never mutates in place.
+    const throttledText = isStreaming ? commitStreamedText(throttledTextRaw) : throttledTextRaw;
 
     // Show reasoning even if time.end isn't set yet (during streaming)
     // Only hide if there's no text content
@@ -470,7 +451,6 @@ const ReasoningPart = React.memo(({
         <ReasoningTimelineBlock
             text={throttledText}
             variant="thinking"
-            onContentChange={onContentChange}
             blockId={part.id || `${messageId}-reasoning`}
             time={time}
             isStreaming={isStreaming}
diff --git a/packages/ui/src/components/chat/message/parts/ToolPart.tsx b/packages/ui/src/components/chat/message/parts/ToolPart.tsx
index 18e6fa5d..fa1279f9 100644
--- a/packages/ui/src/components/chat/message/parts/ToolPart.tsx
+++ b/packages/ui/src/components/chat/message/parts/ToolPart.tsx
@@ -20,7 +20,6 @@ import { toast } from '@/components/ui';
 import { Text } from '@/components/ui/text';
 import { FileTypeIcon } from '@/components/icons/FileTypeIcon';
 import { copyTextToClipboard } from '@/lib/clipboard';
-import type { ContentChangeReason } from '@/hooks/useChatAutoFollow';
 import type { ToolPopupContent } from '../types';
 import { PlainDiffFallback } from './PlainDiffFallback';
 import { lazyWithChunkRecovery } from '@/lib/chunkLoadRecovery';
@@ -82,7 +81,6 @@ interface ToolPartProps {
     onToggle: (toolId: string) => void;
     isMobile: boolean;
     alwaysShowActions?: boolean;
-    onContentChange?: (reason?: ContentChangeReason) => void;
     onShowPopup?: (content: ToolPopupContent) => void;
     animateTailText?: boolean;
 }
@@ -1684,7 +1682,6 @@ const ToolPartContent: React.FC<ToolPartProps> = ({
     isExpanded,
     onToggle,
     isMobile,
-    onContentChange,
     onShowPopup,
     animateTailText = true,
 }) => {
@@ -1754,10 +1751,6 @@ const ToolPartContent: React.FC<ToolPartProps> = ({
         });
     }, [currentDirectory, input, isFinalized, isSuccessfullyFinalized, metadata, normalizedPartTool]);
 
-    const shouldNotifyStructuralChange = isFinalized || isTaskTool;
-
-    const onContentChangeRef = React.useRef(onContentChange);
-    onContentChangeRef.current = onContentChange;
     const expandedContentRef = React.useRef<HTMLDivElement>(null);
 
     React.useLayoutEffect(() => {
@@ -1772,11 +1765,7 @@ const ToolPartContent: React.FC<ToolPartProps> = ({
 
         element.style.height = isExpanded ? 'auto' : '0px';
         element.style.overflow = isExpanded ? 'visible' : 'hidden';
-
-        if (shouldNotifyStructuralChange) {
-            onContentChangeRef.current?.('structural');
-        }
-    }, [isExpanded, isTaskTool, shouldNotifyStructuralChange]);
+    }, [isExpanded, isTaskTool]);
 
     const partMetadata = (part as unknown as { metadata?: unknown }).metadata;
     const time = stateWithData.time;
@@ -1934,26 +1923,6 @@ const ToolPartContent: React.FC<ToolPartProps> = ({
         }
         return metadataTaskSummaryEntries;
     }, [childSessionTaskSummaryEntries, metadataTaskSummaryEntries]);
-    const taskSummaryRenderSignature = React.useMemo(() => {
-        return taskSummaryEntries.map(getTaskSummaryEntryRenderSignature).join('\u0000');
-    }, [taskSummaryEntries]);
-    const lastTaskSummaryRenderSignatureRef = React.useRef<string | null>(null);
-
-    React.useEffect(() => {
-        if (!isTaskTool) {
-            lastTaskSummaryRenderSignatureRef.current = null;
-            return;
-        }
-
-        const previous = lastTaskSummaryRenderSignatureRef.current;
-        lastTaskSummaryRenderSignatureRef.current = taskSummaryRenderSignature;
-        if (previous === null || previous === taskSummaryRenderSignature || taskSummaryEntries.length === 0) {
-            return;
-        }
-
-        onContentChangeRef.current?.('structural');
-    }, [isTaskTool, taskSummaryEntries.length, taskSummaryRenderSignature]);
-
     const diffStats = React.useMemo(() => {
         return (normalizedPartTool === 'edit' || normalizedPartTool === 'multiedit' || normalizedPartTool === 'apply_patch')
             ? parseDiffStats(metadata)
@@ -2351,7 +2320,6 @@ export default React.memo(ToolPart, (prev, next) => {
         && prev.isExpanded === next.isExpanded
         && prev.isMobile === next.isMobile
         && prev.alwaysShowActions === next.alwaysShowActions
-        && prev.onContentChange === next.onContentChange
         && prev.onShowPopup === next.onShowPopup
         && prev.animateTailText === next.animateTailText;
 });
diff --git a/packages/ui/src/components/chat/message/parts/WorkingPlaceholder.tsx b/packages/ui/src/components/chat/message/parts/WorkingPlaceholder.tsx
index 9260cc51..4308e72b 100644
--- a/packages/ui/src/components/chat/message/parts/WorkingPlaceholder.tsx
+++ b/packages/ui/src/components/chat/message/parts/WorkingPlaceholder.tsx
@@ -229,12 +229,11 @@ export function WorkingPlaceholder({
 
   return (
     <div
-      // Styled to mirror the turn footer's model row (text-sm,
-      // muted-foreground/60, no left inset): when the turn completes this row
-      // disappears and the footer appears in the same visual spot, so the two
-      // must read as the same line swapping its text.
+      // Full muted-foreground, matching the scroll-to-bottom pill's status
+      // text: the row and the pill hand off to each other in the same spot
+      // and must read as one element changing chrome.
       className={
-        'flex h-full items-center text-muted-foreground/60'
+        'flex h-full items-center text-muted-foreground'
       }
       role="status"
       aria-live={displayedPermission ? 'assertive' : 'polite'}
diff --git a/packages/ui/src/components/chat/message/parts/assistantTextVisibility.ts b/packages/ui/src/components/chat/message/parts/assistantTextVisibility.ts
index f5f50adc..74817e1a 100644
--- a/packages/ui/src/components/chat/message/parts/assistantTextVisibility.ts
+++ b/packages/ui/src/components/chat/message/parts/assistantTextVisibility.ts
@@ -1,9 +1,16 @@
+import { commitStreamedText } from '../../lib/streamTextCommit';
+
 export const resolveAssistantDisplayText = (input: {
     textContent: string;
     throttledTextContent: string;
     isStreaming: boolean;
 }): string => {
-    return input.isStreaming ? input.throttledTextContent : input.textContent;
+    // While streaming, reveal whole blocks only: rendering stops at the last
+    // complete line so a shown paragraph never mutates in place. The held
+    // tail lands with the next line break (or the finalize pass).
+    return input.isStreaming
+        ? commitStreamedText(input.throttledTextContent)
+        : input.textContent;
 };
 
 export const shouldRenderAssistantText = (input: {
diff --git a/packages/ui/src/components/layout/Header.tsx b/packages/ui/src/components/layout/Header.tsx
index e6b4ddc0..fd69095a 100644
--- a/packages/ui/src/components/layout/Header.tsx
+++ b/packages/ui/src/components/layout/Header.tsx
@@ -13,10 +13,8 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import { SortableTabsStrip, type SortableTabsStripItem } from '@/components/ui/sortable-tabs-strip';
 
-import { DiffIcon } from '@/components/icons/DiffIcon';
-import { useUIStore, type ContextPanelMode, type MainTab } from '@/stores/useUIStore';
+import { useUIStore, type ContextPanelMode } from '@/stores/useUIStore';
 import { useConfigStore } from '@/stores/useConfigStore';
 import { useSessionUIStore } from '@/sync/session-ui-store';
 import { useSessionWorktreeStore } from '@/sync/session-worktree-store';
@@ -39,34 +37,19 @@ import { ContextUsageDisplay } from '@/components/ui/ContextUsageDisplay';
 import { WindowsWindowControls } from '@/components/desktop/WindowsWindowControls';
 import { UpdateDialog } from '@/components/ui/UpdateDialog';
 import { useDeviceInfo, useTabletStandalonePwaRuntime } from '@/lib/device';
-import { cn, hasModifier } from '@/lib/utils';
-import { McpDropdownContent } from '@/components/mcp/McpDropdown';
-import { McpIcon } from '@/components/icons/McpIcon';
-import { ProviderLogo } from '@/components/ui/ProviderLogo';
-import { formatQuotaValueLabel, formatQuotaResetLabel, formatWindowLabel, QUOTA_PROVIDERS } from '@/lib/quota';
-import { UsageProgressBar } from '@/components/sections/usage/UsageProgressBar';
-import { updateDesktopSettings } from '@/lib/persistence';
-import { formatTimeForPreference } from '@/lib/timeFormat';
+import { cn } from '@/lib/utils';
 import { eventMatchesShortcut, formatShortcutForDisplay, getEffectiveShortcutCombo } from '@/lib/shortcuts';
 import {
-  getAllModelFamilies,
-  getDisplayModelName,
-  groupModelsByFamily,
-  sortModelFamilies,
 } from '@/lib/quota/model-families';
 
 import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
 } from '@/components/ui/collapsible';
-import type { UsageWindow } from '@/types';
 import type { GitHubAuthStatus } from '@/lib/api/types';
 import type { SessionContextUsage } from '@/stores/types/sessionTypes';
 import { DesktopHostSwitcherDialog } from '@/components/desktop/DesktopHostSwitcher';
 import { OpenInAppButton } from '@/components/desktop/OpenInAppButton';
-import { ProjectActionsButton } from '@/components/layout/ProjectActionsButton';
 import { SessionSwitcherDropdown } from '@/components/session/SessionSwitcherDropdown';
+import { SessionTabsStrip, type SessionTabMenuArgs } from './SessionTabsStrip';
 import { canUseElectronDesktopIPC, invokeDesktop, isDesktopLocalOriginActive, isDesktopShell, isVSCodeRuntime, startDesktopWindowDrag, type UpdateInfo } from '@/lib/desktop';
 import { desktopHostsGet, redactSensitiveUrl } from '@/lib/desktopHosts';
 import {
@@ -90,7 +73,6 @@ import { Button } from '@/components/ui/button';
 import { startSessionTreeWorktreeMove, useIsSessionWorktreeMovePending } from '@/lib/worktrees/sessionWorktreeMove';
 
 const DESKTOP_HEADER_ICON_BUTTON_CLASS = 'app-region-no-drag inline-flex h-8 w-8 items-center justify-center gap-2 rounded-md typography-ui-label font-medium text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-50 hover:bg-interactive-hover transition-colors';
-const MOBILE_HEADER_ICON_BUTTON_CLASS = 'app-region-no-drag inline-flex h-9 w-9 items-center justify-center gap-2 p-2 rounded-md typography-ui-label font-medium text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-50 hover:text-foreground hover:bg-interactive-hover transition-colors';
 
 type HeaderIconActionButtonProps = {
   visible?: boolean;
@@ -416,14 +398,6 @@ const formatCompactHeaderLabel = (value: string): string => {
   return trimmed.length > 12 ? `${trimmed.slice(0, 9).trimEnd()}...` : trimmed;
 };
 
-const formatTime = (timestamp: number | null, timeFormatPreference: 'auto' | '12h' | '24h') => {
-  if (!timestamp) return '-';
-  try {
-    return formatTimeForPreference(timestamp, timeFormatPreference, { fallback: '-' });
-  } catch {
-    return '-';
-  }
-};
 
 const normalize = (value: string): string => {
   if (!value) return '';
@@ -444,32 +418,6 @@ const getActiveContextMode = (panelState: {
   return activeTab?.mode ?? null;
 };
 
-interface TabConfig {
-  id: MainTab;
-  label: string;
-  icon: IconName | 'diff';
-  badge?: number;
-  showDot?: boolean;
-}
-
-interface RateLimitGroup {
-  providerId: string;
-  providerName: string;
-  entries: Array<[string, UsageWindow]>;
-  error?: string;
-  modelFamilies?: Array<{
-    familyId: string | null;
-    familyLabel: string;
-    models: Array<[string, UsageWindow]>;
-  }>;
-}
-
-interface HeaderProps {
-  onToggleLeftDrawer?: () => void;
-  onToggleRightDrawer?: () => void;
-  leftDrawerOpen?: boolean;
-  rightDrawerOpen?: boolean;
-}
 
 type HeaderSessionSnapshot = {
   title: string | null;
@@ -480,24 +428,15 @@ type HeaderSessionSnapshot = {
   parentId: string | null;
 };
 
-export const Header: React.FC<HeaderProps> = ({
-  onToggleLeftDrawer,
-  onToggleRightDrawer,
-  leftDrawerOpen,
-  rightDrawerOpen,
-}) => {
+export const Header: React.FC = () => {
   streamPerfCount('ui.header.render');
   const { t } = useI18n();
-  const setSessionSwitcherOpen = useUIStore((state) => state.setSessionSwitcherOpen);
-  const toggleSidebar = useUIStore((state) => state.toggleSidebar);
   const isSidebarOpen = useUIStore((state) => state.isSidebarOpen);
   const openContextOverview = useUIStore((state) => state.openContextOverview);
   const openContextPlan = useUIStore((state) => state.openContextPlan);
   const closeContextPanel = useUIStore((state) => state.closeContextPanel);
-  const activeMainTab = useUIStore((state) => state.activeMainTab);
-  const setActiveMainTab = useUIStore((state) => state.setActiveMainTab);
   const shortcutOverrides = useUIStore((state) => state.shortcutOverrides);
-  const timeFormatPreference = useUIStore((state) => state.timeFormatPreference);
+  const sessionTabsEnabled = useUIStore((state) => state.sessionTabsEnabled);
 
   const getCurrentModel = useConfigStore((state) => state.getCurrentModel);
   const runtimeApis = useRuntimeAPIs();
@@ -548,12 +487,7 @@ export const Header: React.FC<HeaderProps> = ({
   }, [activeProject]);
   const quotaResults = useQuotaStore((state) => state.results);
   const fetchAllQuotas = useQuotaStore((state) => state.fetchAllQuotas);
-  const isQuotaLoading = useQuotaStore((state) => state.isLoading);
-  const quotaLastUpdated = useQuotaStore((state) => state.lastUpdated);
-  const quotaDisplayMode = useQuotaStore((state) => state.displayMode);
-  const dropdownProviderIds = useQuotaStore((state) => state.dropdownProviderIds);
   const loadQuotaSettings = useQuotaStore((state) => state.loadSettings);
-  const setQuotaDisplayMode = useQuotaStore((state) => state.setDisplayMode);
 
   const { isMobile } = useDeviceInfo();
   const githubAuthStatus = useGitHubAuthStore((state) => state.status);
@@ -639,14 +573,11 @@ export const Header: React.FC<HeaderProps> = ({
     }
   }, [contextUsage, currentSessionId, isContextUsageResolvedForSession]);
 
-  const isSessionSwitcherOpen = useUIStore((state) => state.isSessionSwitcherOpen);
   const githubAvatarUrl = githubAuthStatus?.connected ? (githubAuthStatus.user?.avatarUrl ?? null) : null;
   const githubLogin = githubAuthStatus?.connected ? (githubAuthStatus.user?.login ?? null) : null;
   const githubAccounts = githubAuthStatus?.accounts ?? [];
   const [isSwitchingGitHubAccount, setIsSwitchingGitHubAccount] = React.useState(false);
-  const [isMobileRateLimitsOpen, setIsMobileRateLimitsOpen] = React.useState(false);
   const [isDesktopServicesOpen, setIsDesktopServicesOpen] = React.useState(false);
-  const [isUsageRefreshSpinning, setIsUsageRefreshSpinning] = React.useState(false);
   const [currentInstanceLabel, setCurrentInstanceLabel] = React.useState('Local');
   const [currentInstanceIsLocal, setCurrentInstanceIsLocal] = React.useState(true);
   const [remoteUpdateDialogOpen, setRemoteUpdateDialogOpen] = React.useState(false);
@@ -654,7 +585,6 @@ export const Header: React.FC<HeaderProps> = ({
   const [remoteUpdateChecking, setRemoteUpdateChecking] = React.useState(false);
   const [remoteUpdateError, setRemoteUpdateError] = React.useState<string | null>(null);
   const compactCurrentInstanceLabel = React.useMemo(() => formatCompactHeaderLabel(currentInstanceLabel), [currentInstanceLabel]);
-  const [mobileServicesTab, setMobileServicesTab] = React.useState<'usage' | 'mcp'>('usage');
   const isVSCode = React.useMemo(() => isVSCodeRuntime(), []);
   // While the work-status panel is on screen it already reports the project,
   // the branch and the context fill — three paces away in the same window.
@@ -683,7 +613,6 @@ export const Header: React.FC<HeaderProps> = ({
   }, [setWorkStatusOverlayOpen, setWorkStatusPanelEnabled, workStatusOverlayOpen, workStatusPanelEnabled, workStatusPanelFits]);
   const showDesktopHeaderContextUsage = !isVSCode
     && !workStatusPanelVisible
-    && activeMainTab === 'chat'
     && !!stableDesktopContextUsage
     && stableDesktopContextUsage.totalTokens > 0;
   const desktopHeaderDisplayPercentage = stableDesktopContextUsage && stableDesktopContextUsage.contextLimit > 0
@@ -817,126 +746,11 @@ export const Header: React.FC<HeaderProps> = ({
   }, [checkRemoteInstanceUpdate, remoteUpdateInfo?.available]);
 
   useQuotaAutoRefresh();
-  const selectedModels = useQuotaStore((state) => state.selectedModels);
-  const expandedFamilies = useQuotaStore((state) => state.expandedFamilies);
-  const toggleFamilyExpanded = useQuotaStore((state) => state.toggleFamilyExpanded);
 
-  const rateLimitGroups = React.useMemo(() => {
-    const groups: RateLimitGroup[] = [];
-
-    for (const provider of QUOTA_PROVIDERS) {
-      if (!dropdownProviderIds.includes(provider.id)) {
-        continue;
-      }
-      const result = quotaResults.find((entry) => entry.providerId === provider.id);
-      const windows = (result?.usage?.windows ?? {}) as Record<string, UsageWindow>;
-      const models = result?.usage?.models;
-      const entries = Object.entries(windows);
-
-      const group: RateLimitGroup = {
-        providerId: provider.id,
-        providerName: provider.name,
-        entries,
-        error: (result && !result.ok && result.configured) ? result.error : undefined,
-      };
-
-      // Add model families if provider has per-model quotas
-      if (models && Object.keys(models).length > 0) {
-        const providerSelectedModels = selectedModels[provider.id] ?? [];
-        // hasExplicitSelection = true means user has selected specific models to show
-        // If the array exists but is empty, treat as "show all" (user cleared selection)
-        const hasExplicitSelection = providerSelectedModels.length > 0;
-        const modelGroups = groupModelsByFamily(models, provider.id);
-        const families = getAllModelFamilies(provider.id);
-        const sortedFamilies = sortModelFamilies(families);
-
-        group.modelFamilies = [];
-
-        // Add predefined families first
-        for (const family of sortedFamilies) {
-          const modelNames = modelGroups.get(family.id) ?? [];
-          if (modelNames.length === 0) continue;
-
-          // Filter to selected models only, OR show all if nothing selected
-          const selectedModelNames = hasExplicitSelection
-            ? modelNames.filter((m: string) => providerSelectedModels.includes(m))
-            : modelNames;
-          if (selectedModelNames.length === 0) continue;
-
-          const familyModels: Array<[string, UsageWindow]> = [];
-          for (const modelName of selectedModelNames) {
-            const modelUsage = models[modelName] as { windows?: Record<string, UsageWindow> } | undefined;
-            if (modelUsage?.windows) {
-              const windowEntries = Object.entries(modelUsage.windows);
-              if (windowEntries.length > 0) {
-                familyModels.push([modelName, windowEntries[0][1]]);
-              }
-            }
-          }
-
-          if (familyModels.length > 0) {
-            group.modelFamilies.push({
-              familyId: family.id,
-              familyLabel: family.label,
-              models: familyModels,
-            });
-          }
-        }
-
-        // Add "Other" family for remaining models
-        const otherModelNames = modelGroups.get(null) ?? [];
-        const selectedOtherModels = hasExplicitSelection
-          ? otherModelNames.filter((m: string) => providerSelectedModels.includes(m))
-          : otherModelNames;
-        if (selectedOtherModels.length > 0) {
-          const otherModels: Array<[string, UsageWindow]> = [];
-          for (const modelName of selectedOtherModels) {
-            const modelUsage = models[modelName] as { windows?: Record<string, UsageWindow> } | undefined;
-            if (modelUsage?.windows) {
-              const windowEntries = Object.entries(modelUsage.windows);
-              if (windowEntries.length > 0) {
-                otherModels.push([modelName, windowEntries[0][1]]);
-              }
-            }
-          }
-          if (otherModels.length > 0) {
-            group.modelFamilies.push({
-              familyId: null,
-              familyLabel: t('header.services.modelFamily.other'),
-              models: otherModels,
-            });
-          }
-        }
-      }
-
-      if (entries.length > 0 || (group.modelFamilies && group.modelFamilies.length > 0) || group.error) {
-        groups.push(group);
-      }
-    }
-
-    return groups;
-  }, [dropdownProviderIds, quotaResults, selectedModels, t]);
-  const hasRateLimits = rateLimitGroups.length > 0;
   React.useEffect(() => {
     void loadQuotaSettings();
   }, [loadQuotaSettings]);
-  const handleDisplayModeChange = React.useCallback(async (mode: 'usage' | 'remaining') => {
-    setQuotaDisplayMode(mode);
-    try {
-      await updateDesktopSettings({ usageDisplayMode: mode });
-    } catch (error) {
-      console.warn('Failed to update usage display mode:', error);
-    }
-  }, [setQuotaDisplayMode]);
 
-  const handleUsageRefresh = React.useCallback(() => {
-    if (isUsageRefreshSpinning) return;
-    setIsUsageRefreshSpinning(true);
-    const minSpinPromise = new Promise(resolve => setTimeout(resolve, 500));
-    Promise.all([fetchAllQuotas(), minSpinPromise]).finally(() => {
-      setIsUsageRefreshSpinning(false);
-    });
-  }, [fetchAllQuotas, isUsageRefreshSpinning]);
 
   const currentSessionSnapshot = currentSessionId
     ? currentGlobalSession ?? null
@@ -1113,18 +927,13 @@ export const Header: React.FC<HeaderProps> = ({
   const deleteSessions = useSessionUIStore((state) => state.deleteSessions);
   const [isRenamingHeaderSession, setIsRenamingHeaderSession] = React.useState(false);
   const [isHeaderSessionMenuOpen, setIsHeaderSessionMenuOpen] = React.useState(false);
-  const pendingHeaderRenameRef = React.useRef(false);
+  /** Session id whose rename was requested from a tab menu; survives the
+      activation that a Rename on an inactive tab performs first. */
+  const pendingHeaderRenameRef = React.useRef<string | null>(null);
   const [headerSessionTitleDraft, setHeaderSessionTitleDraft] = React.useState('');
-  const [pendingHeaderRetentionAction, setPendingHeaderRetentionAction] = React.useState<'archive' | 'delete' | null>(null);
+  const [pendingHeaderRetentionAction, setPendingHeaderRetentionAction] = React.useState<{ action: 'archive' | 'delete'; sessionId: string } | null>(null);
   const headerRenameFormRef = React.useRef<HTMLFormElement | null>(null);
 
-  React.useEffect(() => {
-    pendingHeaderRenameRef.current = false;
-    setIsHeaderSessionMenuOpen(false);
-    setIsRenamingHeaderSession(false);
-    setHeaderSessionTitleDraft('');
-    setPendingHeaderRetentionAction(null);
-  }, [currentSessionId]);
 
   const beginHeaderSessionRename = React.useCallback(() => {
     if (!currentSessionId) return;
@@ -1132,6 +941,23 @@ export const Header: React.FC<HeaderProps> = ({
     setIsRenamingHeaderSession(true);
   }, [currentSession?.title, currentSessionId, currentSessionTitle]);
 
+  const beginHeaderSessionRenameRef = React.useRef(beginHeaderSessionRename);
+  beginHeaderSessionRenameRef.current = beginHeaderSessionRename;
+
+  React.useEffect(() => {
+    setIsHeaderSessionMenuOpen(false);
+    setPendingHeaderRetentionAction(null);
+    if (currentSessionId && pendingHeaderRenameRef.current === currentSessionId) {
+      // Rename on an inactive tab activates it first; the switch itself is
+      // when the rename can begin (the menu may close before or after it).
+      pendingHeaderRenameRef.current = null;
+      beginHeaderSessionRenameRef.current();
+      return;
+    }
+    setIsRenamingHeaderSession(false);
+    setHeaderSessionTitleDraft('');
+  }, [currentSessionId]);
+
   const saveHeaderSessionRename = React.useCallback(async () => {
     if (!currentSessionId) return;
     const title = headerSessionTitleDraft.trim();
@@ -1153,18 +979,18 @@ export const Header: React.FC<HeaderProps> = ({
     return () => document.removeEventListener('mousedown', handleDocumentMouseDown);
   }, [isRenamingHeaderSession, saveHeaderSessionRename]);
 
-  const copyCurrentSessionId = React.useCallback(() => {
-    if (!currentSessionId) return;
-    void copyTextToClipboard(currentSessionId).then((result) => {
+  const copySessionIdFor = React.useCallback((sessionId: string) => {
+    if (!sessionId) return;
+    void copyTextToClipboard(sessionId).then((result) => {
       toast[result.ok ? 'success' : 'error'](t(result.ok
         ? 'sessions.sidebar.session.copyId.success'
         : 'sessions.sidebar.session.copyId.error'));
     }).catch(() => toast.error(t('sessions.sidebar.session.copyId.error')));
-  }, [currentSessionId, t]);
+  }, [t]);
 
-  const shareCurrentSession = React.useCallback(async () => {
-    if (!currentSessionId) return;
-    const result = await shareSession(currentSessionId);
+  const shareSessionFor = React.useCallback(async (sessionId: string) => {
+    if (!sessionId) return;
+    const result = await shareSession(sessionId);
     if (result?.share?.url) {
       const copied = await copyTextToClipboard(result.share.url);
       toast[copied.ok ? 'success' : 'warning'](t('sessions.sidebar.session.share.successTitle'), {
@@ -1175,25 +1001,24 @@ export const Header: React.FC<HeaderProps> = ({
       return;
     }
     toast.error(t('sessions.sidebar.session.share.error'));
-  }, [currentSessionId, shareSession, t]);
+  }, [shareSession, t]);
 
-  const copyCurrentSessionShareUrl = React.useCallback(() => {
-    const shareUrl = currentSession?.shareUrl;
+  const copySessionShareUrl = React.useCallback((shareUrl: string | null | undefined) => {
     if (!shareUrl) return;
     void copyTextToClipboard(shareUrl).then((result) => {
       toast[result.ok ? 'success' : 'error'](t(result.ok
         ? 'sessions.sidebar.session.menu.copied'
         : 'sessions.sidebar.session.share.copyUrlError'));
     }).catch(() => toast.error(t('sessions.sidebar.session.share.copyUrlError')));
-  }, [currentSession?.shareUrl, t]);
+  }, [t]);
 
-  const unshareCurrentSession = React.useCallback(async () => {
-    if (!currentSessionId) return;
-    const result = await unshareSession(currentSessionId);
+  const unshareSessionFor = React.useCallback(async (sessionId: string) => {
+    if (!sessionId) return;
+    const result = await unshareSession(sessionId);
     toast[result ? 'success' : 'error'](t(result
       ? 'sessions.sidebar.session.unshare.success'
       : 'sessions.sidebar.session.unshare.error'));
-  }, [currentSessionId, t, unshareSession]);
+  }, [t, unshareSession]);
 
   const exportCurrentSession = React.useCallback(async () => {
     if (!currentSessionId || !openDirectory) {
@@ -1246,9 +1071,9 @@ export const Header: React.FC<HeaderProps> = ({
   }, [currentSessionId, isCurrentSessionActive, isCurrentSessionMovingToWorktree, sessionDirectory, t]);
 
   const confirmHeaderRetentionAction = React.useCallback(async () => {
-    if (!currentSessionId || !pendingHeaderRetentionAction) return;
+    if (!pendingHeaderRetentionAction) return;
     const sessions = useGlobalSessionsStore.getState().activeSessions;
-    const ids = [currentSessionId];
+    const ids = [pendingHeaderRetentionAction.sessionId];
     for (let index = 0; index < ids.length; index += 1) {
       const parentId = ids[index];
       for (const session of sessions) {
@@ -1257,7 +1082,7 @@ export const Header: React.FC<HeaderProps> = ({
         }
       }
     }
-    const action = pendingHeaderRetentionAction;
+    const action = pendingHeaderRetentionAction.action;
     setPendingHeaderRetentionAction(null);
     const result = action === 'archive' ? await archiveSessions(ids) : await deleteSessions(ids);
     const failedIds = result.failedIds;
@@ -1270,7 +1095,7 @@ export const Header: React.FC<HeaderProps> = ({
     toast.success(t(action === 'archive'
       ? 'sessions.sidebar.session.archive.success'
       : 'sessions.sidebar.session.delete.success'));
-  }, [archiveSessions, currentSessionId, deleteSessions, pendingHeaderRetentionAction, t]);
+  }, [archiveSessions, deleteSessions, pendingHeaderRetentionAction, t]);
 
   // Full-page surfaces (Scheduled, Archive, Worktrees, Multi-run) replace the
   // chat area; while one is open the header shows the surface identity
@@ -1330,25 +1155,15 @@ export const Header: React.FC<HeaderProps> = ({
     };
   }, [actionDirectory, activeProjectRef]);
 
-  const projectActionsContext = React.useMemo(() => {
-    if (activeProjectRef && actionDirectory) {
-      return { projectRef: activeProjectRef, directory: actionDirectory };
-    }
-    return lastProjectActionsContextRef.current;
-  }, [actionDirectory, activeProjectRef]);
 
   const planModeEnabled = useFeatureFlagsStore((state) => state.planModeEnabled);
   const isSessionPlanAvailable = useSessionUIStore((state) => state.isSessionPlanAvailable);
   const planTabAvailable = planModeEnabled && currentSessionId ? isSessionPlanAvailable(currentSessionId) : false;
-  const showPlanTab = planTabAvailable;
   const lastPlanSessionKeyRef = React.useRef<string>('');
 
   // Reset plan tab availability when session changes
   React.useEffect(() => {
     if (!planModeEnabled) {
-      if (useUIStore.getState().activeMainTab === 'plan') {
-        useUIStore.getState().setActiveMainTab('chat');
-      }
       return;
     }
 
@@ -1358,11 +1173,6 @@ export const Header: React.FC<HeaderProps> = ({
     if (lastPlanSessionKeyRef.current !== sessionKey) {
       lastPlanSessionKeyRef.current = sessionKey;
     }
-
-    // If plan is not available but user is on plan tab, switch them back to chat
-    if (!planTabAvailable && useUIStore.getState().activeMainTab === 'plan') {
-      useUIStore.getState().setActiveMainTab('chat');
-    }
   }, [
     planModeEnabled,
     planTabAvailable,
@@ -1404,32 +1214,7 @@ export const Header: React.FC<HeaderProps> = ({
     }
   }, [isSwitchingGitHubAccount, runtimeApis.github, setGitHubAuthStatus]);
 
-  const blurActiveElement = React.useCallback(() => {
-    if (typeof document === 'undefined') {
-      return;
-    }
 
-    const active = document.activeElement as HTMLElement | null;
-    if (!active) {
-      return;
-    }
-
-    const tagName = active.tagName;
-    const isInput = tagName === 'INPUT' || tagName === 'TEXTAREA' || tagName === 'SELECT';
-
-    if (isInput || active.isContentEditable) {
-      active.blur();
-    }
-  }, []);
-
-  const handleOpenSessionSwitcher = React.useCallback(() => {
-    if (isMobile) {
-      blurActiveElement();
-      setSessionSwitcherOpen(!isSessionSwitcherOpen);
-      return;
-    }
-    toggleSidebar();
-  }, [blurActiveElement, isMobile, isSessionSwitcherOpen, setSessionSwitcherOpen, toggleSidebar]);
 
   const handleOpenDraftMiniChat = React.useCallback(() => {
     void invokeDesktop('desktop_open_draft_mini_chat_window', {
@@ -1496,47 +1281,6 @@ export const Header: React.FC<HeaderProps> = ({
 
 
   const desktopHeaderIconButtonClass = DESKTOP_HEADER_ICON_BUTTON_CLASS;
-  const mobileHeaderIconButtonClass = MOBILE_HEADER_ICON_BUTTON_CLASS;
-  const mobileActiveHeaderItem = React.useMemo(() => {
-    if (isMobileRateLimitsOpen) {
-      return 'services';
-    }
-    if (leftDrawerOpen) {
-      return 'sessions';
-    }
-    if (rightDrawerOpen) {
-      return 'git';
-    }
-    return activeMainTab;
-  }, [activeMainTab, isMobileRateLimitsOpen, leftDrawerOpen, rightDrawerOpen]);
-
-  const closeMobileHeaderPanels = React.useCallback(() => {
-    setIsMobileRateLimitsOpen(false);
-    if (leftDrawerOpen && onToggleLeftDrawer) {
-      onToggleLeftDrawer();
-    }
-    if (rightDrawerOpen && onToggleRightDrawer) {
-      onToggleRightDrawer();
-    }
-    if (!onToggleLeftDrawer && isSessionSwitcherOpen) {
-      setSessionSwitcherOpen(false);
-    }
-  }, [isSessionSwitcherOpen, leftDrawerOpen, onToggleLeftDrawer, onToggleRightDrawer, rightDrawerOpen, setSessionSwitcherOpen]);
-
-  const handleMobileLeftDrawerToggle = React.useCallback(() => {
-    if (!leftDrawerOpen) {
-      setIsMobileRateLimitsOpen(false);
-    }
-    onToggleLeftDrawer?.();
-  }, [leftDrawerOpen, onToggleLeftDrawer]);
-
-  const handleMobileRightDrawerToggle = React.useCallback(() => {
-    if (!rightDrawerOpen) {
-      setIsMobileRateLimitsOpen(false);
-    }
-    onToggleRightDrawer?.();
-  }, [onToggleRightDrawer, rightDrawerOpen]);
-
   // Left padding the header needs to clear the OS window controls (macOS
   // traffic lights / window-controls-overlay). When the sidebar is open this
   // space is owned by the sidebar's top strip instead, so the header drops back
@@ -1701,44 +1445,10 @@ export const Header: React.FC<HeaderProps> = ({
     }
   }, [isDesktopApp]);
 
-  const tabs: TabConfig[] = React.useMemo(() => {
-    if (isMobile) {
-      const base: TabConfig[] = [
-        { id: 'chat', label: t('layout.mainTab.chat'), icon: "chat-4" },
-      ];
-
-      if (showPlanTab) {
-        base.push({ id: 'plan', label: t('layout.mainTab.plan'), icon: "file-text" });
-      }
-
-      base.push(
-        { id: 'diff', label: t('layout.mainTab.diff'), icon: 'diff' },
-        { id: 'files', label: t('layout.mainTab.files'), icon: "folder-6" },
-        { id: 'terminal', label: t('layout.mainTab.terminal'), icon: "terminal-box" },
-        { id: 'context', label: t('layout.mainTab.context'), icon: "file-list-2" },
-        { id: 'diagram', label: t('layout.mainTab.diagram'), icon: 'file' },
-      );
-
-      return base;
-    }
-
-    // Desktop: no tabs in header
-    return [];
-  }, [isMobile, showPlanTab, t]);
-
   const shortcutLabel = React.useCallback((actionId: string) => {
     return formatShortcutForDisplay(getEffectiveShortcutCombo(actionId, shortcutOverrides));
   }, [shortcutOverrides]);
 
-  useEffect(() => {
-    // Project actions may intentionally promote the terminal to the desktop
-    // main view, and diagram clicks open the diagram viewer; every other
-    // legacy main tab now lives in the context panel on desktop.
-    if (!isMobile && activeMainTab !== 'chat' && activeMainTab !== 'terminal' && activeMainTab !== 'diagram') {
-      setActiveMainTab('chat');
-    }
-  }, [activeMainTab, isMobile, setActiveMainTab]);
-
   // Desktop keeps instances only: quota and MCP now live in the work-status
   // panel, which reports them per session rather than per window. The mobile
   // menu below is untouched — it has no panel to defer to.
@@ -1751,31 +1461,6 @@ export const Header: React.FC<HeaderProps> = ({
   }, [isDesktopApp, t]);
 
 
-  const mobileServicesTabItems = React.useMemo<SortableTabsStripItem[]>(() => {
-    return [
-      { id: 'usage', label: t('layout.services.usage'), icon: <Icon name="timer" className="h-3.5 w-3.5" /> },
-      { id: 'mcp', label: 'MCP', icon: <McpIcon className="h-3.5 w-3.5" /> },
-    ];
-  }, [t]);
-
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (hasModifier(e) && !e.shiftKey && !e.altKey) {
-        const num = parseInt(e.key, 10);
-        if (num >= 1 && num <= tabs.length) {
-          e.preventDefault();
-          if (isMobile) {
-            blurActiveElement();
-            closeMobileHeaderPanels();
-          }
-          setActiveMainTab(tabs[num - 1].id);
-        }
-      }
-    };
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [blurActiveElement, closeMobileHeaderPanels, isMobile, setActiveMainTab, tabs]);
-
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       const toggleServicesCombo = getEffectiveShortcutCombo('toggle_services_menu', shortcutOverrides);
@@ -1822,55 +1507,6 @@ export const Header: React.FC<HeaderProps> = ({
     handleOpenContextPlan,
   ]);
 
-  const renderTab = (tab: TabConfig) => {
-    const isActive = activeMainTab === tab.id;
-    const isDiffTab = tab.icon === 'diff';
-    const tabIconName = isDiffTab ? null : (tab.icon as IconName);
-    const isChatTab = tab.id === 'chat';
-
-    const renderIcon = (iconSize: number) => {
-      if (isDiffTab) {
-        return <DiffIcon size={iconSize} />;
-      }
-      return tabIconName ? <Icon name={tabIconName} className={`h-${iconSize/4} w-${iconSize/4}`} /> : null;
-    };
-
-    const tabButton = (
-      <button
-        type="button"
-        onClick={() => setActiveMainTab(tab.id)}
-          className={cn(
-            'relative flex h-8 items-center gap-2 px-3 rounded-lg typography-ui-label font-medium transition-colors',
-            isActive
-              ? 'app-region-no-drag bg-interactive-selection text-interactive-selection-foreground shadow-none'
-              : 'app-region-no-drag text-muted-foreground hover:bg-interactive-hover/50 hover:text-foreground',
-            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary',
-            isChatTab && !isMobile && 'min-w-[100px] justify-center'
-          )}
-        aria-label={tab.label}
-        aria-selected={isActive}
-        role="tab"
-      >
-        {isMobile ? (
-          renderIcon(20)
-        ) : (
-          <>
-            {renderIcon(16)}
-            <span className="header-tab-label">{tab.label}</span>
-          </>
-        )}
-
-        {tab.badge !== undefined && tab.badge > 0 && (
-          <span className="header-tab-badge typography-micro text-status-info font-medium">
-            {tab.badge}
-          </span>
-        )}
-      </button>
-    );
-
-    return <React.Fragment key={tab.id}>{tabButton}</React.Fragment>;
-  };
-
   const desktopSidebarActions = (
     <>
       <OpenInAppButton directory={actionDirectory} className="mr-1" />
@@ -1907,6 +1543,76 @@ export const Header: React.FC<HeaderProps> = ({
 
   const showMiniChatHeaderAction = hasElectronDesktopIPC && (isNewSessionDraftOpen || Boolean(currentSessionId));
 
+  const renderSessionTabMenu = React.useCallback(({ session, isActive, select, closeOtherTabs, components }: SessionTabMenuArgs) => {
+    const { Item, Separator } = components;
+    const shareUrl = session.share?.url ?? null;
+    const canMoveToWorktree = isActive && !isVSCode && !isChatContext && currentSession && !currentSession.parentId;
+    return (
+      <>
+        <Item onClick={() => { if (!isActive) select(); pendingHeaderRenameRef.current = session.id; }}>
+          <Icon name="pencil-ai" className="mr-2 size-4" />{t('sessions.sidebar.session.menu.rename')}
+        </Item>
+        <Item onClick={() => copySessionIdFor(session.id)}>
+          <Icon name="file-copy" className="mr-2 size-4" />{t('sessions.sidebar.session.menu.copyId')}
+        </Item>
+        <Separator />
+        {shareUrl ? (
+          <>
+            <Item onClick={() => copySessionShareUrl(shareUrl)}>
+              <Icon name="file-copy" className="mr-2 size-4" />{t('sessions.sidebar.session.menu.copyLink')}
+            </Item>
+            <Item onClick={() => void unshareSessionFor(session.id)}>
+              <Icon name="link-unlink-m" className="mr-2 size-4" />{t('sessions.sidebar.session.menu.unshare')}
+            </Item>
+          </>
+        ) : (
+          <Item onClick={() => void shareSessionFor(session.id)}>
+            <Icon name="share-2" className="mr-2 size-4" />{t('sessions.sidebar.session.menu.share')}
+          </Item>
+        )}
+        {isActive ? (
+          <Item onClick={() => void exportCurrentSession()}>
+            <Icon name="download" className="mr-2 size-4" />{t('sessions.sidebar.session.menu.exportMarkdown')}
+          </Item>
+        ) : null}
+        {canMoveToWorktree ? (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="block">
+                <Item
+                  disabled={!sessionDirectory || isCurrentSessionActive || isCurrentSessionMovingToWorktree}
+                  onClick={moveCurrentSessionToWorktree}
+                  className="w-full"
+                >
+                  <Icon name="folder-shared" className="mr-2 size-4" />
+                  {t('sessions.sidebar.session.menu.moveToWorktree')}
+                </Item>
+              </span>
+            </TooltipTrigger>
+            <TooltipContent side="right" className="max-w-72">
+              {isCurrentSessionMovingToWorktree
+                ? t('sessions.sidebar.session.moveToWorktree.tooltipMoving')
+                : isCurrentSessionActive
+                  ? t('sessions.sidebar.session.moveToWorktree.tooltipBusy')
+                  : t('sessions.sidebar.session.moveToWorktree.tooltip')}
+            </TooltipContent>
+          </Tooltip>
+        ) : null}
+        <Separator />
+        <Item onClick={closeOtherTabs}>
+          <Icon name="close-circle" className="mr-2 size-4" />{t('header.sessionTabs.closeOtherTabs')}
+        </Item>
+        <Separator />
+        <Item onClick={() => setPendingHeaderRetentionAction({ action: 'archive', sessionId: session.id })}>
+          <Icon name="inbox-archive" className="mr-2 size-4" />{t('sessions.sidebar.bulkActions.archive')}
+        </Item>
+        <Item className="text-destructive focus:text-destructive" onClick={() => setPendingHeaderRetentionAction({ action: 'delete', sessionId: session.id })}>
+          <Icon name="delete-bin" className="mr-2 size-4" />{t('sessions.sidebar.bulkActions.delete')}
+        </Item>
+      </>
+    );
+  }, [copySessionIdFor, copySessionShareUrl, currentSession, exportCurrentSession, isChatContext, isCurrentSessionActive, isCurrentSessionMovingToWorktree, isVSCode, moveCurrentSessionToWorktree, sessionDirectory, shareSessionFor, t, unshareSessionFor]);
+
   const renderDesktop = () => (
     <div
       onMouseDown={handleDragStart}
@@ -1949,7 +1655,7 @@ export const Header: React.FC<HeaderProps> = ({
               </span>
             ) : null}
           </div>
-        ) : (
+        ) : (isVSCode || !sessionTabsEnabled) ? (
           <div className="app-region-no-drag mr-3 flex min-w-0 max-w-full items-center gap-0.5 py-0.5 -my-0.5 text-left">
             {!isSidebarOpen ? (
               <SessionSwitcherDropdown align="start">
@@ -1967,6 +1673,7 @@ export const Header: React.FC<HeaderProps> = ({
                 <form
                   ref={headerRenameFormRef}
                   className="flex w-full min-w-0 items-center gap-2 leading-tight"
+                  onPointerDown={(event) => event.stopPropagation()}
                   onSubmit={(event) => {
                     event.preventDefault();
                     void saveHeaderSessionRename();
@@ -2040,8 +1747,8 @@ export const Header: React.FC<HeaderProps> = ({
                   open={isHeaderSessionMenuOpen}
                   onOpenChange={setIsHeaderSessionMenuOpen}
                   onOpenChangeComplete={(open) => {
-                    if (!open && pendingHeaderRenameRef.current) {
-                      pendingHeaderRenameRef.current = false;
+                    if (!open && pendingHeaderRenameRef.current && pendingHeaderRenameRef.current === currentSessionId) {
+                      pendingHeaderRenameRef.current = null;
                       beginHeaderSessionRename();
                     }
                   }}
@@ -2052,16 +1759,16 @@ export const Header: React.FC<HeaderProps> = ({
                     </Button>
                   </DropdownMenuTrigger>
                   <DropdownMenuContent align="end" className="min-w-[190px]">
-                    <DropdownMenuItem onClick={() => { pendingHeaderRenameRef.current = true; }}><Icon name="pencil-ai" className="mr-2 size-4" />{t('sessions.sidebar.session.menu.rename')}</DropdownMenuItem>
-                    <DropdownMenuItem onClick={copyCurrentSessionId}><Icon name="file-copy" className="mr-2 size-4" />{t('sessions.sidebar.session.menu.copyId')}</DropdownMenuItem>
+                    <DropdownMenuItem onClick={() => { pendingHeaderRenameRef.current = currentSessionId; }}><Icon name="pencil-ai" className="mr-2 size-4" />{t('sessions.sidebar.session.menu.rename')}</DropdownMenuItem>
+                    <DropdownMenuItem onClick={() => currentSessionId && copySessionIdFor(currentSessionId)}><Icon name="file-copy" className="mr-2 size-4" />{t('sessions.sidebar.session.menu.copyId')}</DropdownMenuItem>
                     <DropdownMenuSeparator />
                     {currentSession?.shareUrl ? (
                       <>
-                        <DropdownMenuItem onClick={copyCurrentSessionShareUrl}><Icon name="file-copy" className="mr-2 size-4" />{t('sessions.sidebar.session.menu.copyLink')}</DropdownMenuItem>
-                        <DropdownMenuItem onClick={() => void unshareCurrentSession()}><Icon name="link-unlink-m" className="mr-2 size-4" />{t('sessions.sidebar.session.menu.unshare')}</DropdownMenuItem>
+                        <DropdownMenuItem onClick={() => copySessionShareUrl(currentSession?.shareUrl)}><Icon name="file-copy" className="mr-2 size-4" />{t('sessions.sidebar.session.menu.copyLink')}</DropdownMenuItem>
+                        <DropdownMenuItem onClick={() => { if (currentSessionId) void unshareSessionFor(currentSessionId); }}><Icon name="link-unlink-m" className="mr-2 size-4" />{t('sessions.sidebar.session.menu.unshare')}</DropdownMenuItem>
                       </>
                     ) : (
-                      <DropdownMenuItem onClick={() => void shareCurrentSession()}><Icon name="share-2" className="mr-2 size-4" />{t('sessions.sidebar.session.menu.share')}</DropdownMenuItem>
+                      <DropdownMenuItem onClick={() => { if (currentSessionId) void shareSessionFor(currentSessionId); }}><Icon name="share-2" className="mr-2 size-4" />{t('sessions.sidebar.session.menu.share')}</DropdownMenuItem>
                     )}
                     <DropdownMenuItem onClick={() => void exportCurrentSession()}><Icon name="download" className="mr-2 size-4" />{t('sessions.sidebar.session.menu.exportMarkdown')}</DropdownMenuItem>
                     {!isVSCode && !isChatContext && currentSession && !currentSession.parentId ? (
@@ -2088,22 +1795,89 @@ export const Header: React.FC<HeaderProps> = ({
                       </Tooltip>
                     ) : null}
                     <DropdownMenuSeparator />
-                    <DropdownMenuItem onClick={() => setPendingHeaderRetentionAction('archive')}><Icon name="inbox-archive" className="mr-2 size-4" />{t('sessions.sidebar.bulkActions.archive')}</DropdownMenuItem>
-                    <DropdownMenuItem className="text-destructive focus:text-destructive" onClick={() => setPendingHeaderRetentionAction('delete')}><Icon name="delete-bin" className="mr-2 size-4" />{t('sessions.sidebar.bulkActions.delete')}</DropdownMenuItem>
+                    <DropdownMenuItem onClick={() => { if (currentSessionId) setPendingHeaderRetentionAction({ action: 'archive', sessionId: currentSessionId }); }}><Icon name="inbox-archive" className="mr-2 size-4" />{t('sessions.sidebar.bulkActions.archive')}</DropdownMenuItem>
+                    <DropdownMenuItem className="text-destructive focus:text-destructive" onClick={() => { if (currentSessionId) setPendingHeaderRetentionAction({ action: 'delete', sessionId: currentSessionId }); }}><Icon name="delete-bin" className="mr-2 size-4" />{t('sessions.sidebar.bulkActions.delete')}</DropdownMenuItem>
                   </DropdownMenuContent>
                 </DropdownMenu>
               ) : null}
             </div>
           </div>
-        )}
-
-        {tabs.length > 0 && (
-          <div className="flex items-center gap-1 rounded-lg bg-[var(--surface-muted)]/50 p-1">
-            {tabs.map((tab) => renderTab(tab))}
+        ) : (
+          <div className="app-region-no-drag flex h-full min-w-0 flex-1 items-center gap-0.5 text-left">
+            {!isSidebarOpen ? (
+              <SessionSwitcherDropdown align="start">
+                <button
+                  type="button"
+                  className={desktopHeaderIconButtonClass}
+                  aria-label={t('sessions.switcher.openAria')}
+                >
+                  <Icon name="history" className="h-[18px] w-[18px]" />
+                </button>
+              </SessionSwitcherDropdown>
+            ) : null}
+            <SessionTabsStrip
+              renderMenu={renderSessionTabMenu}
+              suppressActiveTabControls={isRenamingHeaderSession}
+              onMenuOpenChangeComplete={(open) => {
+                if (!open && pendingHeaderRenameRef.current && pendingHeaderRenameRef.current === currentSessionId) {
+                  pendingHeaderRenameRef.current = null;
+                  beginHeaderSessionRename();
+                }
+              }}
+            >
+            <div className="flex min-w-0 flex-col justify-center">
+              {isRenamingHeaderSession ? (
+                <form
+                  ref={headerRenameFormRef}
+                  className="flex w-full min-w-0 items-center gap-2 leading-tight"
+                  onPointerDown={(event) => event.stopPropagation()}
+                  onSubmit={(event) => {
+                    event.preventDefault();
+                    void saveHeaderSessionRename();
+                  }}
+                >
+                  <input
+                    value={headerSessionTitleDraft}
+                    onChange={(event) => setHeaderSessionTitleDraft(event.target.value)}
+                    autoFocus
+                    onKeyDown={(event) => {
+                      event.stopPropagation();
+                      if (event.key === 'Escape') {
+                        setIsRenamingHeaderSession(false);
+                      }
+                    }}
+                    placeholder={t('sessions.sidebar.session.menu.rename')}
+                    className="min-w-0 flex-1 bg-transparent text-[13px] font-medium leading-4 outline-none placeholder:text-muted-foreground"
+                  />
+                  <button
+                    type="submit"
+                    aria-label={t('sessions.sidebar.session.rename.save')}
+                    title={t('sessions.sidebar.session.rename.save')}
+                    className="shrink-0 text-muted-foreground hover:text-foreground"
+                  >
+                    <Icon name="check" className="size-4" />
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => setIsRenamingHeaderSession(false)}
+                    aria-label={t('sessions.sidebar.session.rename.cancel')}
+                    title={t('sessions.sidebar.session.rename.cancel')}
+                    className="shrink-0 text-muted-foreground hover:text-foreground"
+                  >
+                    <Icon name="close" className="size-4" />
+                  </button>
+                </form>
+              ) : (
+                <span className="block overflow-hidden whitespace-nowrap text-[13px] font-medium leading-4 text-foreground max-w-full">
+                  {isNewSessionDraftOpen ? t('sessions.switcher.draftTitle') : currentSessionTitle}
+                </span>
+              )}
+            </div>
+            </SessionTabsStrip>
           </div>
         )}
 
-        <div className="flex-1" />
+        {activeSurfaceHeader || isVSCode || !sessionTabsEnabled ? <div className="flex-1" /> : null}
 
         <div className="flex shrink-0 items-center gap-1">
           {showDesktopHeaderContextUsage && stableDesktopContextUsage ? (
@@ -2132,7 +1906,7 @@ export const Header: React.FC<HeaderProps> = ({
             className={cn(desktopHeaderIconButtonClass, 'mr-1')}
             Icon={'picture-in-picture-2'}
           />
-          {activeMainTab === 'chat' && !isVSCode ? (
+          {!isVSCode ? (
             <Tooltip>
               <TooltipTrigger asChild>
                 <button
@@ -2173,414 +1947,10 @@ export const Header: React.FC<HeaderProps> = ({
     </div>
   );
 
-  const renderMobile = () => (
-    <div className="app-region-drag relative flex items-center gap-2 px-3 py-2 select-none">
-      <div className="flex items-center gap-2 shrink-0">
-        {/* Use drawer toggle when onToggleLeftDrawer is provided, otherwise use legacy session switcher */}
-        {onToggleLeftDrawer ? (
-          <button
-            type="button"
-            onClick={handleMobileLeftDrawerToggle}
-            className={cn(
-              mobileHeaderIconButtonClass,
-              mobileActiveHeaderItem === 'sessions' && 'bg-interactive-selection text-interactive-selection-foreground'
-            )}
-            aria-label={leftDrawerOpen ? t('header.actions.closeSessionsAria') : t('header.actions.openSessionsAria')}
-          >
-            <Icon name="layout-left" className="h-5 w-5" />
-          </button>
-        ) : isSessionSwitcherOpen ? (
-          <button
-            type="button"
-            onClick={() => setSessionSwitcherOpen(false)}
-            className="app-region-no-drag h-9 w-9 p-2 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-md active:bg-interactive-active"
-            aria-label={t('header.actions.backAria')}
-          >
-            <Icon name="arrow-left-s" className="h-5 w-5" />
-          </button>
-        ) : (
-          <button
-            type="button"
-            onClick={handleOpenSessionSwitcher}
-            className="app-region-no-drag h-9 w-9 p-2 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-md active:bg-interactive-active"
-            aria-label={t('header.actions.openSessionsAria')}
-          >
-            <Icon name="play-list-add" className="h-5 w-5" />
-          </button>
-        )}
-
-        {!onToggleLeftDrawer && isSessionSwitcherOpen && (
-          <span className="typography-ui-label font-semibold text-foreground">{t('header.sessions.title')}</span>
-        )}
-      </div>
-
-      {(!isSessionSwitcherOpen || Boolean(onToggleLeftDrawer)) && (
-        <>
-          <div className="app-region-no-drag flex min-w-0 flex-1 items-center">
-            <div className="flex min-w-0 flex-1 overflow-x-auto overflow-y-hidden scrollbar-hidden touch-pan-x overscroll-x-contain">
-              <div className="flex w-max items-center gap-1 pr-1">
-                <div
-                  className="flex items-center gap-0.5 rounded-lg bg-[var(--surface-muted)]/50 p-0.5"
-                  role="tablist"
-                  aria-label={t('header.navigation.mainAria')}
-                >
-                  {tabs.map((tab) => {
-                    const isActive = activeMainTab === tab.id;
-                    const isDiffTab = tab.icon === 'diff';
-                    const tabIconName = isDiffTab ? null : (tab.icon as IconName);
-                    return (
-                      <Tooltip key={tab.id}>
-                        <TooltipTrigger asChild>
-                          <button
-                            type="button"
-                            onClick={() => {
-                              if (isMobile) {
-                                blurActiveElement();
-                                closeMobileHeaderPanels();
-                              }
-                              setActiveMainTab(tab.id);
-                            }}
-                            aria-label={tab.label}
-                            aria-selected={isActive}
-                            role="tab"
-                            className={cn(
-                              mobileHeaderIconButtonClass,
-                              'relative rounded-lg',
-                              mobileActiveHeaderItem === tab.id && 'bg-interactive-selection text-interactive-selection-foreground'
-                            )}
-                          >
-                            {isDiffTab ? (
-                              <DiffIcon className="h-5 w-5" />
-                            ) : tabIconName ? (
-                              <Icon name={tabIconName} className="h-5 w-5" />
-                            ) : null}
-                            {tab.badge !== undefined && tab.badge > 0 && (
-                              <span className="absolute -top-1 -right-1 text-[10px] font-semibold text-primary">
-                                {tab.badge}
-                              </span>
-                            )}
-                            {tab.showDot && (
-                              <span
-                                className="absolute top-1.5 right-1.5 h-2 w-2 rounded-full bg-primary"
-                                aria-label={t('header.changes.availableAria')}
-                              />
-                            )}
-                          </button>
-                        </TooltipTrigger>
-                        <TooltipContent>
-                          <p>{tab.label}</p>
-                        </TooltipContent>
-                      </Tooltip>
-                    );
-                  })}
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div className="flex items-center gap-1 shrink-0">
-            {projectActionsContext && (
-              <ProjectActionsButton
-                projectRef={projectActionsContext.projectRef}
-                directory={projectActionsContext.directory}
-                compact
-                allowMobile
-                className="h-9"
-              />
-            )}
-
-            {/* Mobile Services Menu (Usage + MCP) */}
-            <DropdownMenu
-              open={isMobileRateLimitsOpen}
-              onOpenChange={(open) => {
-                if (open) {
-                  if (leftDrawerOpen && onToggleLeftDrawer) {
-                    onToggleLeftDrawer();
-                  }
-                  if (rightDrawerOpen && onToggleRightDrawer) {
-                    onToggleRightDrawer();
-                  }
-                }
-                setIsMobileRateLimitsOpen(open);
-                if (open && quotaResults.length === 0) {
-                  fetchAllQuotas();
-                }
-              }}
-            >
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <DropdownMenuTrigger asChild>
-                    <button
-                      type="button"
-                      aria-label={t('header.services.viewAria')}
-                      className={cn(
-                        mobileHeaderIconButtonClass,
-                        mobileActiveHeaderItem === 'services' && 'bg-interactive-selection text-interactive-selection-foreground'
-                      )}
-                    >
-                      <Icon name="stack" className="h-5 w-5" />
-                    </button>
-                  </DropdownMenuTrigger>
-                </TooltipTrigger>
-                <TooltipContent>
-                  <p>{t('header.services.title')}</p>
-                </TooltipContent>
-              </Tooltip>
-              <DropdownMenuContent
-                align="end"
-                sideOffset={0}
-                positionerClassName="!fixed !bottom-0 !left-0 !right-0 !top-[var(--oc-header-height,56px)] !transform-none"
-                className="h-full w-screen max-h-none rounded-none border-0 p-0 pt-1 overflow-hidden"
-              >
-                <div className="flex h-full flex-col bg-[var(--surface-elevated)]">
-                  <div className="sticky top-0 z-20 bg-[var(--surface-elevated)] px-2 py-px">
-                    <div className="flex items-center justify-between gap-2 px-3 py-0">
-                      <div className="h-10 min-w-0 flex-1">
-                        <SortableTabsStrip
-                          items={mobileServicesTabItems}
-                          activeId={mobileServicesTab}
-                          onSelect={(tabID) => {
-                            const value = tabID as 'usage' | 'mcp';
-                            setMobileServicesTab(value);
-                            if (value === 'usage' && quotaResults.length === 0) {
-                              fetchAllQuotas();
-                            }
-                          }}
-                          layoutMode="fit"
-                          variant="active-pill"
-                          activePillInsetClassName="gap-0.5 px-px py-0"
-                          activePillButtonClassName="h-8"
-                          className="h-full"
-                        />
-                      </div>
-                      <button
-                        type="button"
-                        onClick={() => setIsMobileRateLimitsOpen(false)}
-                        className="inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-interactive-hover"
-                        aria-label={t('header.services.closeAria')}
-                      >
-                        <Icon name="close" className="h-5 w-5" />
-                      </button>
-                    </div>
-                  </div>
-
-                  {mobileServicesTab === 'mcp' && (
-                    <McpDropdownContent active={isMobileRateLimitsOpen && mobileServicesTab === 'mcp'} />
-                  )}
-
-                  {mobileServicesTab === 'usage' && (
-                    <div className="flex-1 overflow-y-auto overflow-x-hidden pb-[calc(4rem+env(safe-area-inset-bottom))]">
-                      {/* Mobile usage header */}
-                      <div className="border-b border-[var(--interactive-border)]">
-                        <div className="flex items-center justify-between gap-3 px-4 py-3">
-                          <div className="flex flex-col min-w-0 gap-0.5">
-                            <span className="typography-ui-header font-semibold text-foreground">{t('header.services.rateLimits')}</span>
-                            <span className="truncate typography-micro text-muted-foreground">
-                              {formatTime(quotaLastUpdated, timeFormatPreference)}
-                            </span>
-                          </div>
-                          <div className="flex items-center gap-2 shrink-0">
-                            <div className="flex items-center h-6">
-                              <button
-                                type="button"
-                                onClick={() => handleDisplayModeChange('usage')}
-                                className={cn(
-                                  'typography-ui-label px-1 pb-0.5 transition-colors',
-                                  quotaDisplayMode === 'usage'
-                                    ? 'text-foreground border-b-2 border-[var(--primary-base)]'
-                                    : 'text-muted-foreground hover:text-foreground'
-                                )}
-                              >
-                                {t('header.services.used')}
-                              </button>
-                              <span className="text-muted-foreground typography-ui-label px-0.5">·</span>
-                              <button
-                                type="button"
-                                onClick={() => handleDisplayModeChange('remaining')}
-                                className={cn(
-                                  'typography-ui-label px-1 pb-0.5 transition-colors',
-                                  quotaDisplayMode === 'remaining'
-                                    ? 'text-foreground border-b-2 border-[var(--primary-base)]'
-                                    : 'text-muted-foreground hover:text-foreground'
-                                )}
-                              >
-                                {t('header.services.remaining')}
-                              </button>
-                            </div>
-                            <button
-                              type="button"
-                              className={cn(
-                                'inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors',
-                                'hover:text-foreground hover:bg-interactive-hover',
-                                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary'
-                              )}
-                              onClick={handleUsageRefresh}
-                              disabled={isQuotaLoading || isUsageRefreshSpinning}
-                              aria-label={t('header.services.refreshRateLimitsAria')}
-                            >
-                              <Icon name="refresh" className={cn('h-4 w-4', isUsageRefreshSpinning && 'animate-spin')} />
-                            </button>
-                          </div>
-                        </div>
-                      </div>
-
-                      {!hasRateLimits && (
-                        <div className="px-4 py-6 text-center">
-                          <span className="typography-ui-label text-muted-foreground">{t('header.services.noRateLimits')}</span>
-                        </div>
-                      )}
-
-                      {/* Mobile provider groups */}
-                      <div className="py-1">
-                        {rateLimitGroups.map((group, index) => (
-                          <React.Fragment key={group.providerId}>
-                            {index > 0 ? (
-                              <div className="mx-4 my-1 border-t border-[var(--interactive-border)]" />
-                            ) : null}
-
-                            {/* Provider header */}
-                            <div className="flex items-center gap-2 px-4 py-2">
-                              <ProviderLogo providerId={group.providerId} className="h-4 w-4" />
-                              <span className="typography-ui-label font-medium text-foreground">{group.providerName}</span>
-                            </div>
-
-                            {group.entries.length === 0 && (!group.modelFamilies || group.modelFamilies.length === 0) ? (
-                              <div className="px-4 pb-2">
-                                <span className="typography-ui-label text-muted-foreground">
-                                  {group.error ?? t('header.services.noRateLimitsReported')}
-                                </span>
-                              </div>
-                            ) : (
-                              <div className="space-y-3 px-4 pb-2">
-                                {/* Window-level entries */}
-                                {group.entries.map(([label, window]) => {
-                                  const displayPercent = quotaDisplayMode === 'remaining'
-                                    ? window.remainingPercent
-                                    : window.usedPercent;
-                                  const metricLabel = formatQuotaValueLabel(window.valueLabel, displayPercent);
-                                  const resetLabel = formatQuotaResetLabel(window.resetAt, window.resetAfterFormatted ?? window.resetAtFormatted, timeFormatPreference);
-                                  return (
-                                    <div key={`${group.providerId}-${label}`} className="flex flex-col gap-1.5">
-                                      <div className="flex min-w-0 items-center justify-between gap-3">
-                                        <div className="min-w-0 flex items-center gap-2">
-                                          <span className="truncate typography-ui-label text-foreground">{formatWindowLabel(label)}</span>
-                                          {resetLabel ? (
-                                            <span className="truncate typography-micro text-muted-foreground">
-                                              {resetLabel}
-                                            </span>
-                                          ) : null}
-                                        </div>
-                                        <span className="typography-ui-label text-foreground tabular-nums">
-                                          {metricLabel === '-' ? '' : metricLabel}
-                                        </span>
-                                      </div>
-                                      <UsageProgressBar
-                                        percent={displayPercent}
-                                        tonePercent={window.usedPercent}
-                                        className="h-1.5"
-                                      />
-                                    </div>
-                                  );
-                                })}
-
-                                {/* Model family collapsibles */}
-                                {group.modelFamilies && group.modelFamilies.length > 0 && (
-                                  <div className="space-y-0.5">
-                                    {group.modelFamilies.map((family) => {
-                                      const providerExpandedFamilies = expandedFamilies[group.providerId] ?? [];
-                                      const isExpanded = providerExpandedFamilies.includes(family.familyId ?? 'other');
-
-                                      return (
-                                        <Collapsible
-                                          key={family.familyId ?? 'other'}
-                                          open={isExpanded}
-                                          onOpenChange={() => toggleFamilyExpanded(group.providerId, family.familyId ?? 'other')}
-                                        >
-                                          <CollapsibleTrigger className="flex w-full items-center justify-between rounded-md px-1 py-1.5 text-left hover:bg-[var(--interactive-hover)]/50 transition-colors">
-                                            <span className="typography-ui-label font-medium text-foreground">
-                                              {family.familyLabel}
-                                            </span>
-                                            {isExpanded ? (
-                                              <Icon name="arrow-down-s" className="h-4 w-4 text-muted-foreground" />
-                                            ) : (
-                                              <Icon name="arrow-right-s" className="h-4 w-4 text-muted-foreground" />
-                                            )}
-                                          </CollapsibleTrigger>
-                                          <CollapsibleContent>
-                                            <div className="space-y-2.5 pb-1 pl-1 pt-1">
-                                              {family.models.map(([modelName, window]) => {
-                                                const displayPercent = quotaDisplayMode === 'remaining'
-                                                  ? window.remainingPercent
-                                                  : window.usedPercent;
-                                                const metricLabel = formatQuotaValueLabel(window.valueLabel, displayPercent);
-                                                return (
-                                                  <div key={`${group.providerId}-${modelName}`} className="flex flex-col gap-1.5">
-                                                    <div className="flex min-w-0 items-center justify-between gap-3">
-                                                      <span className="truncate typography-micro text-muted-foreground">{getDisplayModelName(modelName)}</span>
-                                                      <span className="typography-ui-label text-foreground tabular-nums">
-                                                        {metricLabel === '-' ? '' : metricLabel}
-                                                      </span>
-                                                    </div>
-                                                    <UsageProgressBar
-                                                      percent={displayPercent}
-                                                      tonePercent={window.usedPercent}
-                                                      className="h-1.5"
-                                                    />
-                                                  </div>
-                                                );
-                                              })}
-                                            </div>
-                                          </CollapsibleContent>
-                                        </Collapsible>
-                                      );
-                                    })}
-                                  </div>
-                                )}
-                              </div>
-                            )}
-                          </React.Fragment>
-                        ))}
-                      </div>
-                    </div>
-                  )}
-                </div>
-              </DropdownMenuContent>
-            </DropdownMenu>
-
-            {onToggleRightDrawer ? (
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <button
-                    type="button"
-                    onClick={handleMobileRightDrawerToggle}
-                    className={cn(
-                      mobileHeaderIconButtonClass,
-                      'relative',
-                      mobileActiveHeaderItem === 'git' && 'bg-interactive-selection text-interactive-selection-foreground'
-                    )}
-                    aria-label={rightDrawerOpen ? 'Close git sidebar' : 'Open git sidebar'}
-                  >
-                    <Icon name="layout-right" className="h-5 w-5" />
-                  </button>
-                </TooltipTrigger>
-                <TooltipContent>
-                  <p>{rightDrawerOpen ? 'Close git sidebar' : 'Open git sidebar'}</p>
-                </TooltipContent>
-              </Tooltip>
-            ) : null}
-          </div>
-        </>
-      )}
-    </div>
-  );
-
-  const headerClassName = cn(
-    'header-safe-area relative z-10 bg-background',
-    // Mobile keeps a full-width divider. On desktop the divider lives on the chat
-    // content wrapper instead, so it doesn't run between the header and the right
-    // sidebar (they read as one continuous surface).
-    isMobile && 'border-b border-border/50'
-  );
+  // The divider lives on the chat content wrapper instead of the header, so it
+  // doesn't run between the header and the right sidebar (they read as one
+  // continuous surface).
+  const headerClassName = 'header-safe-area relative z-10 bg-background';
 
   return (
     <>
@@ -2589,15 +1959,15 @@ export const Header: React.FC<HeaderProps> = ({
         className={headerClassName}
         style={{ ['--padding-scale' as string]: '1' } as React.CSSProperties}
       >
-        {isMobile ? renderMobile() : renderDesktop()}
+        {renderDesktop()}
       </header>
       <Dialog open={pendingHeaderRetentionAction !== null} onOpenChange={(open) => { if (!open) setPendingHeaderRetentionAction(null); }}>
         <DialogContent showCloseButton={false} className="max-w-sm gap-5">
           <DialogHeader>
-            <DialogTitle>{pendingHeaderRetentionAction === 'delete'
+            <DialogTitle>{pendingHeaderRetentionAction?.action === 'delete'
               ? t('sessions.sidebar.dialogs.deleteSession.title')
               : t('sessions.sidebar.dialogs.archiveSession.title')}</DialogTitle>
-            <DialogDescription>{pendingHeaderRetentionAction === 'delete'
+            <DialogDescription>{pendingHeaderRetentionAction?.action === 'delete'
               ? t('sessions.sidebar.dialogs.deleteSession.single', { sessionTitle: currentSessionTitle })
               : t('sessions.sidebar.dialogs.archiveSession.single', { sessionTitle: currentSessionTitle })}</DialogDescription>
           </DialogHeader>
@@ -2606,7 +1976,7 @@ export const Header: React.FC<HeaderProps> = ({
               {t('sessions.sidebar.dialogs.cancel')}
             </Button>
             <Button variant="destructive" size="sm" onClick={() => void confirmHeaderRetentionAction()}>
-              {pendingHeaderRetentionAction === 'delete'
+              {pendingHeaderRetentionAction?.action === 'delete'
                 ? t('sessions.sidebar.bulkActions.delete')
                 : t('sessions.sidebar.bulkActions.archive')}
             </Button>
diff --git a/packages/ui/src/components/layout/MainLayout.tsx b/packages/ui/src/components/layout/MainLayout.tsx
index 1a25e06c..0f30dad5 100644
--- a/packages/ui/src/components/layout/MainLayout.tsx
+++ b/packages/ui/src/components/layout/MainLayout.tsx
@@ -1,10 +1,8 @@
-import React, { useRef, useEffect } from 'react';
-import { animate, motion, useMotionValue } from 'motion/react';
+import React from 'react';
 import { Header } from './Header';
 import { Sidebar } from './Sidebar';
 import { SidebarTopBar } from './SidebarTopBar';
 import { TitlebarLeftControls } from './TitlebarLeftControls';
-import { ProjectContextPanel } from './RightSidebarTabs';
 import { ContextPanel } from './ContextPanel';
 import { ContextPanelRail } from './ContextPanelRail';
 import { ErrorBoundary } from '../ui/ErrorBoundary';
@@ -18,8 +16,6 @@ import { ArchiveView } from '@/components/views/ArchiveView';
 import { WorktreesView } from '@/components/views/WorktreesView';
 import { DiffWorkerProvider } from '@/contexts/DiffWorkerProvider';
 import { MultiRunLauncher } from '@/components/multirun';
-import { TerminalView } from '@/components/views/TerminalView';
-import { DrawerProvider } from '@/contexts/DrawerContext';
 
 import { useUIStore } from '@/stores/useUIStore';
 import { useSessionUIStore } from '@/sync/session-ui-store';
@@ -30,24 +26,17 @@ import { lazyWithChunkRecovery } from '@/lib/chunkLoadRecovery';
 
 import { ChatView } from '@/components/views/ChatView';
 
-// Keep TerminalView eager: the bottom dock reserves its height immediately, so
-// suspending here leaves a large blank panel on slower machines.
-// Other heavy views stay on-demand to reduce initial bundle parse time:
-// DiffView/FilesView pull the CodeMirror and @pierre/diffs stacks into the
-// startup graph when imported statically.
-const PlanView = lazyWithChunkRecovery(() => import('@/components/views/PlanView').then(m => ({ default: m.PlanView })));
-const GitView = lazyWithChunkRecovery(() => import('@/components/views/GitView').then(m => ({ default: m.GitView })));
-const DiffView = lazyWithChunkRecovery(() => import('@/components/views/DiffView').then(m => ({ default: m.DiffView })));
-const FilesView = lazyWithChunkRecovery(() => import('@/components/views/FilesView').then(m => ({ default: m.FilesView })));
-const DiagramView = lazyWithChunkRecovery(() => import('@/components/views/DiagramView').then(m => ({ default: m.DiagramView })));
-const SettingsView = lazyWithChunkRecovery(() => import('@/components/views/SettingsView').then(m => ({ default: m.SettingsView })));
 const SettingsWindow = lazyWithChunkRecovery(() => import('@/components/views/SettingsWindow').then(m => ({ default: m.SettingsWindow })));
 
+/**
+ * Desktop-surface layout: the chat owns the main area, and every other
+ * surface (git, diff, files, terminal, ...) opens in the ContextPanel via the
+ * rail. Phone-sized viewports run the separate MobileApp shell — a viewport
+ * crossing the threshold reloads into it (see watchHostedSurfaceViewport).
+ */
 export const MainLayout: React.FC = () => {
     const isSidebarOpen = useUIStore((state) => state.isSidebarOpen);
-    const activeSurface = useUIStore((state) => state.activeSurface);
     const setIsMobile = useUIStore((state) => state.setIsMobile);
-    const isSessionSwitcherOpen = useUIStore((state) => state.isSessionSwitcherOpen);
     const isSettingsDialogOpen = useUIStore((state) => state.isSettingsDialogOpen);
     const setSettingsDialogOpen = useUIStore((state) => state.setSettingsDialogOpen);
     // Mount the windowed settings dialog only after its first open: rendering
@@ -67,10 +56,9 @@ export const MainLayout: React.FC = () => {
     const isScheduledTasksPageOpen = useUIStore((state) => state.isScheduledTasksDialogOpen);
     const isArchivePageOpen = useUIStore((state) => state.isArchivePageOpen);
     const worktreesPageProjectId = useUIStore((state) => state.worktreesPageProjectId);
-    // Any full-page surface replacing the chat area. While open, the chat and
-    // secondary views are fully hidden (not just covered) so none of their
-    // floating chrome bleeds through, and selecting a session / draft / main
-    // tab anywhere closes the surface.
+    // Any full-page surface replacing the chat area. While open, the chat is
+    // fully hidden (not just covered) so none of its floating chrome bleeds
+    // through, and selecting a session or draft anywhere closes the surface.
     const isSurfacePageOpen = isScheduledTasksPageOpen || isArchivePageOpen || Boolean(worktreesPageProjectId) || isMultiRunLauncherOpen;
 
     React.useEffect(() => {
@@ -82,166 +70,11 @@ export const MainLayout: React.FC = () => {
             const draftOpened = Boolean(state.newSessionDraft?.open) && state.newSessionDraft !== prev.newSessionDraft;
             if (sessionSelected || draftOpened) closeSurfacePages();
         });
-        const unsubscribeTab = useUIStore.subscribe((state, prev) => {
-            if (state.activeSurface !== prev.activeSurface) closeSurfacePages();
-        });
         return () => {
             unsubscribeSession();
-            unsubscribeTab();
         };
     }, []);
     const { isMobile } = useDeviceInfo();
-    const mobilePanelsResetRef = React.useRef(false);
-
-    // Mobile drawer state
-    const [mobileLeftDrawerOpen, setMobileLeftDrawerOpen] = React.useState(false);
-    const [mobileRightSidebarOpen, setMobileRightSidebarOpen] = React.useState(false);
-    const [mobileLeftDrawerVisible, setMobileLeftDrawerVisible] = React.useState(false);
-    const [mobileRightDrawerVisible, setMobileRightDrawerVisible] = React.useState(false);
-    const setMobileSessionPanelOpen = React.useCallback((open: boolean) => {
-        setMobileLeftDrawerOpen(open);
-        useUIStore.getState().setSessionSwitcherOpen(open);
-    }, []);
-    const initialDrawerWidthRef = React.useRef(typeof window === 'undefined' ? 0 : window.innerWidth);
-
-    // Left drawer motion value
-    const leftDrawerX = useMotionValue(-initialDrawerWidthRef.current);
-    const leftDrawerWidth = useRef(0);
-
-    // Right drawer motion value
-    const rightDrawerX = useMotionValue(initialDrawerWidthRef.current);
-    const rightDrawerWidth = useRef(0);
-
-    // Compute drawer width
-    useEffect(() => {
-        if (isMobile) {
-            leftDrawerWidth.current = window.innerWidth;
-            rightDrawerWidth.current = window.innerWidth;
-        }
-    }, [isMobile]);
-
-    // Sync left drawer state and motion value
-    useEffect(() => {
-        if (!isMobile) {
-            setMobileLeftDrawerVisible(false);
-            return;
-        }
-        if (mobileLeftDrawerOpen) {
-            setMobileLeftDrawerVisible(true);
-        }
-        animate(leftDrawerX, mobileLeftDrawerOpen ? 0 : -leftDrawerWidth.current, {
-            type: 'spring',
-            stiffness: 400,
-            damping: 35,
-            mass: 0.8,
-        });
-    }, [mobileLeftDrawerOpen, isMobile, leftDrawerX]);
-
-    // Sync right drawer state and motion value
-    useEffect(() => {
-        if (!isMobile) {
-            setMobileRightDrawerVisible(false);
-            return;
-        }
-        if (mobileRightSidebarOpen) {
-            setMobileRightDrawerVisible(true);
-        }
-        animate(rightDrawerX, mobileRightSidebarOpen ? 0 : rightDrawerWidth.current, {
-            type: 'spring',
-            stiffness: 400,
-            damping: 35,
-            mass: 0.8,
-        });
-    }, [isMobile, mobileRightSidebarOpen, rightDrawerX]);
-
-    useEffect(() => {
-        if (!isMobile) return;
-        return leftDrawerX.on('change', (value) => {
-            const width = leftDrawerWidth.current || initialDrawerWidthRef.current;
-            const visible = mobileLeftDrawerOpen || value > -width + 0.5;
-            setMobileLeftDrawerVisible((previous) => previous === visible ? previous : visible);
-        });
-    }, [isMobile, leftDrawerX, mobileLeftDrawerOpen]);
-
-    useEffect(() => {
-        if (!isMobile) return;
-        return rightDrawerX.on('change', (value) => {
-            const width = rightDrawerWidth.current || initialDrawerWidthRef.current;
-            const visible = mobileRightSidebarOpen || value < width - 0.5;
-            setMobileRightDrawerVisible((previous) => previous === visible ? previous : visible);
-        });
-    }, [isMobile, mobileRightSidebarOpen, rightDrawerX]);
-
-    // Sync session switcher close events to left drawer.
-    useEffect(() => {
-        if (isMobile && !isSessionSwitcherOpen && mobileLeftDrawerOpen) {
-            setMobileSessionPanelOpen(false);
-        }
-    }, [isSessionSwitcherOpen, isMobile, mobileLeftDrawerOpen, setMobileSessionPanelOpen]);
-
-    useEffect(() => {
-        if (!isMobile) {
-            mobilePanelsResetRef.current = false;
-            return;
-        }
-
-        if (mobilePanelsResetRef.current) {
-            return;
-        }
-
-        mobilePanelsResetRef.current = true;
-        setMobileSessionPanelOpen(false);
-        setMobileRightSidebarOpen(false);
-    }, [isMobile, setMobileSessionPanelOpen]);
-
-    useEffect(() => {
-        if (!isMobile || activeSurface !== 'chat' || mobileLeftDrawerOpen || mobileRightSidebarOpen || isSettingsDialogOpen) {
-            return;
-        }
-
-        let disposed = false;
-        let timeoutId: number | undefined;
-
-        const scheduleDraftOpen = (delayMs: number) => {
-            timeoutId = window.setTimeout(() => {
-                if (disposed) {
-                    return;
-                }
-
-                const sessionState = useSessionUIStore.getState();
-                const uiState = useUIStore.getState();
-                if (uiState.activeMainTab !== 'chat' || uiState.isSettingsDialogOpen || sessionState.currentSessionId || sessionState.newSessionDraft?.open) {
-                    return;
-                }
-
-                if (sessionState.isLoading) {
-                    scheduleDraftOpen(250);
-                    return;
-                }
-
-                sessionState.openNewSessionDraft({ automatic: true });
-            }, delayMs);
-        };
-
-        scheduleDraftOpen(500);
-
-        return () => {
-            disposed = true;
-            if (timeoutId !== undefined) {
-                window.clearTimeout(timeoutId);
-            }
-        };
-    }, [activeSurface, isMobile, isSettingsDialogOpen, mobileLeftDrawerOpen, mobileRightSidebarOpen]);
-
-    // Ensure mobile drawers are closed when opening full-screen settings
-    useEffect(() => {
-        if (!isMobile || !isSettingsDialogOpen) {
-            return;
-        }
-
-        setMobileSessionPanelOpen(false);
-        setMobileRightSidebarOpen(false);
-    }, [isMobile, isSettingsDialogOpen, setMobileSessionPanelOpen]);
 
     useUpdatePolling();
 
@@ -252,247 +85,83 @@ export const MainLayout: React.FC = () => {
         }
     }, [isMobile, setIsMobile]);
 
-    const handleToggleMobileRightDrawer = React.useCallback(() => {
-        if (mobileLeftDrawerOpen) {
-            setMobileSessionPanelOpen(false);
-        }
-        setMobileRightSidebarOpen(!mobileRightSidebarOpen);
-    }, [mobileLeftDrawerOpen, mobileRightSidebarOpen, setMobileSessionPanelOpen]);
-
-    const secondaryView = React.useMemo(() => {
-        // Desktop surfaces live in the context panel; the only full-view
-        // overlays left there are the terminal (promoted by project actions)
-        // and the diagram viewer. Mobile keeps the full tab set.
-        if (!isMobile && activeSurface !== 'terminal' && activeSurface !== 'diagram') {
-            return null;
-        }
-        switch (activeSurface) {
-            case 'plan':
-                return <React.Suspense fallback={null}><PlanView /></React.Suspense>;
-            case 'git':
-                return <React.Suspense fallback={null}><GitView isActive={!mobileRightSidebarOpen} /></React.Suspense>;
-            case 'diff':
-                return <React.Suspense fallback={null}><DiffView /></React.Suspense>;
-            case 'terminal':
-                return <TerminalView />;
-            case 'files':
-                return <React.Suspense fallback={null}><FilesView /></React.Suspense>;
-            case 'context':
-                return <React.Suspense fallback={null}><ProjectContextPanel /></React.Suspense>;
-            case 'diagram':
-                return <React.Suspense fallback={null}><DiagramView /></React.Suspense>;
-            default:
-                return null;
-        }
-    }, [activeSurface, isMobile, mobileRightSidebarOpen]);
-
-    const isChatActive = activeSurface === 'chat';
-
     return (
         <DiffWorkerProvider>
             <div
                 data-page-scroll-lock="true"
-                className={cn(
-                    'main-content-safe-area',
-                    isMobile ? 'flex h-[100dvh] flex-col' : 'relative flex h-[100dvh]',
-                    'bg-background'
-                )}
+                className="main-content-safe-area relative flex h-[100dvh] bg-background"
             >
                 <CommandPalette />
                 <HelpDialog />
                 <OpenCodeStatusDialog />
                 <SessionDialogs />
 
-                {isMobile ? (
-                <DrawerProvider value={{
-                    leftDrawerOpen: mobileLeftDrawerOpen,
-                    rightDrawerOpen: mobileRightSidebarOpen,
-                    toggleLeftDrawer: () => {
-                        const nextOpen = !mobileLeftDrawerOpen;
-                        if (mobileRightSidebarOpen) {
-                            setMobileRightSidebarOpen(false);
-                        }
-                        setMobileSessionPanelOpen(nextOpen);
-                    },
-                    toggleRightDrawer: handleToggleMobileRightDrawer,
-                    leftDrawerX,
-                    rightDrawerX,
-                    leftDrawerWidth,
-                    rightDrawerWidth,
-                    setMobileLeftDrawerOpen: setMobileSessionPanelOpen,
-                    setRightSidebarOpen: setMobileRightSidebarOpen,
-                }}>
-                    {/* Mobile: header + drawer mode */}
-                    {!isSettingsDialogOpen && <Header 
-                        onToggleLeftDrawer={() => {
-                            const nextOpen = !mobileLeftDrawerOpen;
-                            if (mobileRightSidebarOpen) {
-                                setMobileRightSidebarOpen(false);
-                            }
-                            setMobileSessionPanelOpen(nextOpen);
-                        }}
-                        onToggleRightDrawer={() => {
-                            handleToggleMobileRightDrawer();
-                        }}
-                        leftDrawerOpen={mobileLeftDrawerOpen}
-                        rightDrawerOpen={mobileRightSidebarOpen}
-                    />}
-                    
-                    {/* Main content area (fixed) */}
-                    <div
-                        data-page-scroll-lock="true"
-                        className={cn(
-                            'flex flex-1 overflow-hidden relative',
-                            isSettingsDialogOpen && 'hidden'
-                        )}
+                {/* Persistent top-left controls (toggle + project actions) that
+                    stay put while the sidebar/header animate beneath them. */}
+                <TitlebarLeftControls />
+                {/* Full-height Sidebar beside [Header above (chat | RightSidebar)] */}
+                <div className="flex flex-1 overflow-hidden" data-page-scroll-lock="true">
+                    <Sidebar
+                        isOpen={isSidebarOpen}
+                        isMobile={isMobile}
+                        className="border-border"
+                        topBar={<SidebarTopBar />}
                     >
-                        <main className="w-full h-full overflow-hidden bg-background relative" data-page-scroll-lock="true">
-                            <div className={cn('absolute inset-0', (!isChatActive || isSurfacePageOpen) && 'invisible')}>
-                                <ErrorBoundary><ChatView active={isChatActive && !isSettingsDialogOpen && !isSurfacePageOpen} /></ErrorBoundary>
-                            </div>
-                            {secondaryView && (
-                                <div className={cn('absolute inset-0', isSurfacePageOpen && 'invisible')}>
-                                    <ErrorBoundary>{secondaryView}</ErrorBoundary>
-                                </div>
-                            )}
-                            {isMultiRunLauncherOpen && (
-                                <div className="absolute inset-0 z-10 bg-background">
-                                    <ErrorBoundary>
-                                        <MultiRunLauncher
-                                            initialPrompt={multiRunLauncherPrefillPrompt}
-                                            onCreated={() => setMultiRunLauncherOpen(false)}
-                                            onCancel={() => setMultiRunLauncherOpen(false)}
-                                        />
-                                    </ErrorBoundary>
-                                </div>
-                            )}
-                            <ErrorBoundary><ScheduledTasksDialog /></ErrorBoundary>
-                            <ErrorBoundary><ArchiveView /></ErrorBoundary>
-                            <ErrorBoundary><WorktreesView /></ErrorBoundary>
-                            {/* Always mount SessionSidebar on mobile to match desktop behavior.
-                                Conditional mount (mobileLeftDrawerVisible && ...) caused a
-                                data-loading cascade on every drawer open: paginated sessions
-                                fetch, worktree discovery, repo status, PR status, and 10+ memo
-                                recomputations. On Android PWA this manifested as a >10s delay
-                                before the drawer became interactive (issue #1695). Visibility is
-                                controlled by the leftDrawerX transform (off-screen when closed).
-                                The invisible class matters when fully hidden: leftDrawerWidth is
-                                not recomputed on resize/rotation, so a closed drawer translated by
-                                the old width could otherwise peek into the viewport; it also keeps
-                                the off-screen sidebar out of the tab order and skips painting it. */}
-                            <motion.div
-                                className={cn(
-                                    'absolute inset-0 z-20 bg-sidebar',
-                                    !mobileLeftDrawerVisible && 'pointer-events-none invisible',
-                                )}
-                                data-page-scroll-lock="true"
-                                style={{ x: leftDrawerX }}
-                                aria-hidden={!mobileLeftDrawerOpen}
-                            >
-                                <ErrorBoundary>
-                                    <SessionSidebar mobileVariant isVisible={mobileLeftDrawerVisible} />
-                                </ErrorBoundary>
-                            </motion.div>
-                            {mobileRightDrawerVisible && (
-                                <motion.div className="absolute inset-0 z-20 bg-sidebar" data-page-scroll-lock="true" style={{ x: rightDrawerX }} aria-hidden={!mobileRightSidebarOpen}>
-                                    <ErrorBoundary>
-                                        <React.Suspense fallback={null}><GitView isActive={mobileRightSidebarOpen} /></React.Suspense>
-                                    </ErrorBoundary>
-                                </motion.div>
-                            )}
-                        </main>
-                    </div>
-
-                    {/* Mobile settings: full screen */}
-                    {isSettingsDialogOpen && (
-                        <div
-                            className="absolute inset-0 z-10 bg-background"
-                            style={{ paddingTop: 'var(--oc-safe-area-top, 0px)' }}
-                        >
-                            <ErrorBoundary>
-                                <React.Suspense fallback={null}>
-                                    <SettingsView onClose={() => setSettingsDialogOpen(false)} />
-                                </React.Suspense>
-                            </ErrorBoundary>
-                        </div>
-                    )}
-                </DrawerProvider>
-            ) : (
-                <>
-                    {/* Persistent top-left controls (toggle + project actions) that
-                        stay put while the sidebar/header animate beneath them. */}
-                    <TitlebarLeftControls />
-                    {/* Desktop: full-height Sidebar beside [Header above (chat | RightSidebar)] */}
-                    <div className="flex flex-1 overflow-hidden" data-page-scroll-lock="true">
-                        <Sidebar
-                            isOpen={isSidebarOpen}
-                            isMobile={isMobile}
-                            className="border-border"
-                            topBar={<SidebarTopBar />}
-                        >
-                            <SessionSidebar isVisible={isSidebarOpen} />
-                        </Sidebar>
-                        <div className="relative flex flex-1 min-w-0 flex-col overflow-hidden bg-background" data-page-scroll-lock="true">
-                            <Header />
-                            <div className="relative flex flex-1 min-h-0 overflow-hidden bg-background" data-page-scroll-lock="true">
-                                <div className="relative flex flex-1 min-w-0 flex-col overflow-hidden border-t border-border bg-background" data-page-scroll-lock="true">
-                                    <div className="flex flex-1 min-h-0 overflow-hidden" data-page-scroll-lock="true">
-                                        {/* Holds the chat and the context panel together, so its
-                                            width does not move when the context panel opens. The
-                                            work-status panel measures this rather than the chat,
-                                            which the context panel animates. */}
-                                        <div className="relative flex flex-1 min-h-0 min-w-0 overflow-hidden" data-page-scroll-lock="true" data-chat-area="true">
-                                            <main className="flex-1 overflow-hidden bg-background relative" data-page-scroll-lock="true">
-                                                <div className={cn('absolute inset-0', (!isChatActive || isSurfacePageOpen) && 'invisible')}>
-                                                    <ErrorBoundary><ChatView active={isChatActive && !isSettingsDialogOpen && !isSurfacePageOpen} /></ErrorBoundary>
+                        <SessionSidebar isVisible={isSidebarOpen} />
+                    </Sidebar>
+                    <div className="relative flex flex-1 min-w-0 flex-col overflow-hidden bg-background" data-page-scroll-lock="true">
+                        <Header />
+                        <div className="relative flex flex-1 min-h-0 overflow-hidden bg-background" data-page-scroll-lock="true">
+                            <div className="relative flex flex-1 min-w-0 flex-col overflow-hidden border-t border-border bg-background" data-page-scroll-lock="true">
+                                <div className="flex flex-1 min-h-0 overflow-hidden" data-page-scroll-lock="true">
+                                    {/* Holds the chat and the context panel together, so its
+                                        width does not move when the context panel opens. The
+                                        work-status panel measures this rather than the chat,
+                                        which the context panel animates. */}
+                                    <div className="relative flex flex-1 min-h-0 min-w-0 overflow-hidden" data-page-scroll-lock="true" data-chat-area="true">
+                                        <main className="flex-1 overflow-hidden bg-background relative" data-page-scroll-lock="true">
+                                            <div className={cn('absolute inset-0', isSurfacePageOpen && 'invisible')}>
+                                                <ErrorBoundary><ChatView active={!isSettingsDialogOpen && !isSurfacePageOpen} /></ErrorBoundary>
+                                            </div>
+                                            {isMultiRunLauncherOpen && (
+                                                <div className="absolute inset-0 z-10 bg-background">
+                                                    <ErrorBoundary>
+                                                        {/* isWindowed: the app Header already shows the surface
+                                                            title, so skip the launcher's own title bar. */}
+                                                        <MultiRunLauncher
+                                                            isWindowed
+                                                            initialPrompt={multiRunLauncherPrefillPrompt}
+                                                            onCreated={() => setMultiRunLauncherOpen(false)}
+                                                            onCancel={() => setMultiRunLauncherOpen(false)}
+                                                        />
+                                                    </ErrorBoundary>
                                                 </div>
-                                                {secondaryView && (
-                                                    <div className={cn('absolute inset-0', isSurfacePageOpen && 'invisible')}>
-                                                        <ErrorBoundary>{secondaryView}</ErrorBoundary>
-                                                    </div>
-                                                )}
-                                                {isMultiRunLauncherOpen && (
-                                                    <div className="absolute inset-0 z-10 bg-background">
-                                                        <ErrorBoundary>
-                                                            {/* isWindowed: the app Header already shows the surface
-                                                                title, so skip the launcher's own title bar. */}
-                                                            <MultiRunLauncher
-                                                                isWindowed
-                                                                initialPrompt={multiRunLauncherPrefillPrompt}
-                                                                onCreated={() => setMultiRunLauncherOpen(false)}
-                                                                onCancel={() => setMultiRunLauncherOpen(false)}
-                                                            />
-                                                        </ErrorBoundary>
-                                                    </div>
-                                                )}
-                                                <ErrorBoundary><ScheduledTasksDialog /></ErrorBoundary>
-                                                <ErrorBoundary><ArchiveView /></ErrorBoundary>
-                                                <ErrorBoundary><WorktreesView /></ErrorBoundary>
-                                            </main>
-                                            <ContextPanel />
-                                        </div>
+                                            )}
+                                            <ErrorBoundary><ScheduledTasksDialog /></ErrorBoundary>
+                                            <ErrorBoundary><ArchiveView /></ErrorBoundary>
+                                            <ErrorBoundary><WorktreesView /></ErrorBoundary>
+                                        </main>
+                                        <ContextPanel />
                                     </div>
                                 </div>
-                                <div className="border-t border-border" data-page-scroll-lock="true">
-                                    <ErrorBoundary><ContextPanelRail /></ErrorBoundary>
-                                </div>
+                            </div>
+                            <div className="border-t border-border" data-page-scroll-lock="true">
+                                <ErrorBoundary><ContextPanelRail /></ErrorBoundary>
                             </div>
                         </div>
                     </div>
+                </div>
 
-                    {/* Desktop settings: windowed dialog with blur */}
-                    {settingsWindowMounted ? (
-                        <React.Suspense fallback={null}>
-                            <SettingsWindow
-                                open={isSettingsDialogOpen}
-                                onOpenChange={setSettingsDialogOpen}
-                            />
-                        </React.Suspense>
-                    ) : null}
-                </>
-            )}
-
-        </div>
-    </DiffWorkerProvider>
+                {/* Settings: windowed dialog with blur */}
+                {settingsWindowMounted ? (
+                    <React.Suspense fallback={null}>
+                        <SettingsWindow
+                            open={isSettingsDialogOpen}
+                            onOpenChange={setSettingsDialogOpen}
+                        />
+                    </React.Suspense>
+                ) : null}
+            </div>
+        </DiffWorkerProvider>
     );
 };
diff --git a/packages/ui/src/components/layout/SessionTabsStrip.tsx b/packages/ui/src/components/layout/SessionTabsStrip.tsx
new file mode 100644
index 00000000..bd646e2f
--- /dev/null
+++ b/packages/ui/src/components/layout/SessionTabsStrip.tsx
@@ -0,0 +1,426 @@
+import React from 'react';
+import {
+  DndContext,
+  MouseSensor,
+  TouchSensor,
+  closestCenter,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+  type Modifier,
+} from '@dnd-kit/core';
+import {
+  SortableContext,
+  horizontalListSortingStrategy,
+  useSortable,
+} from '@dnd-kit/sortable';
+import { CSS as DndCSS } from '@dnd-kit/utilities';
+import { ContextMenu } from '@base-ui/react/context-menu';
+import type { Session } from '@opencode-ai/sdk/v2';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { dropdownMenuItemClass, dropdownMenuPopupClass, dropdownMenuSeparatorClass } from '@/components/ui/dropdown-menu.styles';
+import { Icon } from '@/components/icon/Icon';
+import { cn } from '@/lib/utils';
+import { useI18n } from '@/lib/i18n';
+import { useSessionTabsStore } from '@/stores/useSessionTabsStore';
+import { closeSessionTabAndActivateNeighbour } from '@/lib/sessionTabs';
+import { useGlobalSessionsStore, resolveGlobalSessionDirectory } from '@/stores/useGlobalSessionsStore';
+import { useSessionUIStore } from '@/sync/session-ui-store';
+import { useGlobalSessionStatus } from '@/sync/sync-context';
+import { useSessionUnseenCount } from '@/sync/notification-store';
+
+const restrictToXAxis: Modifier = ({ transform }) => ({ ...transform, y: 0 });
+
+type SessionTab = { id: string; session: Session };
+
+export type SessionTabMenuComponents = {
+  Item: React.ComponentType<{
+    className?: string;
+    disabled?: boolean;
+    onClick?: React.MouseEventHandler;
+    children?: React.ReactNode;
+  }>;
+  Separator: React.ComponentType<{ className?: string }>;
+};
+
+export type SessionTabMenuArgs = {
+  session: Session;
+  isActive: boolean;
+  select: () => void;
+  closeOtherTabs: () => void;
+  /** Menu primitives for the surface the menu opens in (dropdown or context menu). */
+  components: SessionTabMenuComponents;
+};
+
+const dropdownComponents: SessionTabMenuComponents = {
+  Item: DropdownMenuItem,
+  Separator: DropdownMenuSeparator,
+};
+
+const contextComponents: SessionTabMenuComponents = {
+  Item: ({ className, ...props }) => (
+    <ContextMenu.Item className={cn(dropdownMenuItemClass, className)} {...props} />
+  ),
+  Separator: ({ className, ...props }) => (
+    <ContextMenu.Separator className={cn(dropdownMenuSeparatorClass, className)} {...props} />
+  ),
+};
+
+/**
+ * One tab, active or not. The tab drags to reorder; the menu and close
+ * controls sit in a hover-revealed overlay at the tab's end (menu first,
+ * close after it). One session menu — supplied by the header via
+ * `renderMenu` — backs both the "..." dropdown and the right-click context
+ * menu, which opens under the cursor without changing the active tab. The
+ * dropdown's anchor overlay stays mounted through the close animation so the
+ * popup never flashes detached. While the active tab is renaming, the
+ * overlay is suppressed entirely — only the rename controls show.
+ */
+const SessionTabItem: React.FC<{
+  tab: SessionTab;
+  isActive: boolean;
+  suppressControls: boolean;
+  onSelect: (tab: SessionTab) => void;
+  onClose: (id: string) => void;
+  renderMenu: (args: SessionTabMenuArgs) => React.ReactNode;
+  closeOtherTabs: (id: string) => void;
+  onMenuOpenChangeComplete?: (open: boolean) => void;
+  children?: React.ReactNode;
+}> = ({ tab, isActive, suppressControls, onSelect, onClose, renderMenu, closeOtherTabs, onMenuOpenChangeComplete, children }) => {
+  const { t } = useI18n();
+  const [menuOpen, setMenuOpen] = React.useState(false);
+  // Keeps the overlay (the dropdown's anchor) mounted through the close animation.
+  const [menuVisible, setMenuVisible] = React.useState(false);
+  const [contextMenuOpen, setContextMenuOpen] = React.useState(false);
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: tab.id });
+
+  const title = tab.session.title?.trim() || t('sessions.sidebar.session.untitled');
+  const overlayVisible = !suppressControls && (menuOpen || menuVisible);
+
+  // Session state for the dot and the hover tooltip.
+  const sessionStatus = useGlobalSessionStatus(tab.id);
+  const isStreaming = sessionStatus?.type === 'busy' || sessionStatus?.type === 'retry';
+  const unseenCount = useSessionUnseenCount(tab.id);
+  const showUnread = unseenCount > 0 && !isActive && !isStreaming;
+  const showDot = isStreaming || showUnread;
+  const dotLabel = isStreaming
+    ? t('sessions.sidebar.session.status.active')
+    : t('sessions.sidebar.session.status.unread');
+
+  const menuArgsFor = (components: SessionTabMenuComponents): SessionTabMenuArgs => ({
+    session: tab.session,
+    isActive,
+    select: () => onSelect(tab),
+    closeOtherTabs: () => closeOtherTabs(tab.id),
+    components,
+  });
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={{ transform: DndCSS.Translate.toString(transform), transition }}
+      className={cn('session-tab-slot flex h-7 w-44 shrink-0 touch-none', isDragging && 'z-10 opacity-60')}
+      data-active={isActive ? 'true' : 'false'}
+      {...(isActive ? { 'data-active-session-tab': true } : {})}
+      {...attributes}
+      {...listeners}
+    >
+      <ContextMenu.Root
+        open={contextMenuOpen}
+        onOpenChange={setContextMenuOpen}
+        onOpenChangeComplete={(open) => onMenuOpenChangeComplete?.(open)}
+      >
+        <ContextMenu.Trigger
+              render={(triggerProps) => (
+                <div
+                  {...triggerProps}
+                  role="tab"
+                  aria-selected={isActive}
+                  tabIndex={isActive ? undefined : 0}
+                  onClick={isActive ? undefined : () => onSelect(tab)}
+                  onKeyDown={isActive ? undefined : (event) => {
+                    if (event.key === 'Enter' || event.key === ' ') {
+                      event.preventDefault();
+                      onSelect(tab);
+                    }
+                  }}
+                  onAuxClick={(event) => {
+                    if (event.button === 1) {
+                      event.preventDefault();
+                      onClose(tab.id);
+                    }
+                  }}
+                  data-controls-open={overlayVisible ? 'true' : 'false'}
+                  className={cn(
+                    'session-tab group/session-tab relative flex h-7 w-full min-w-0 select-none items-center rounded-md px-2',
+                    'transition-colors duration-75',
+                    isActive
+                      ? 'bg-interactive-selection'
+                      : cn(
+                        'cursor-pointer text-muted-foreground hover:bg-interactive-hover hover:text-foreground',
+                        overlayVisible && 'bg-interactive-hover text-foreground',
+                      ),
+                  )}
+                >
+                  <div className={cn(
+                    'flex min-w-0 flex-1 items-center',
+                    !suppressControls && 'group-hover/session-tab:pr-10',
+                    overlayVisible && 'pr-10',
+                  )}
+                  >
+                    <div className={cn(
+                      'min-w-0 flex-1 overflow-hidden whitespace-nowrap',
+                      !suppressControls && 'session-tab-title',
+                    )}
+                    >
+                      {isActive ? children : (
+                        <span className="text-[13px] font-medium leading-4">{title}</span>
+                      )}
+                    </div>
+                    {showDot ? (
+                      <span
+                        className={cn(
+                          'ml-1.5 h-1.5 w-1.5 shrink-0 rounded-full',
+                          isStreaming ? 'bg-primary' : 'bg-[var(--status-info)]',
+                          !suppressControls && 'group-hover/session-tab:opacity-0',
+                          overlayVisible && 'opacity-0',
+                        )}
+                        aria-label={dotLabel}
+                      />
+                    ) : null}
+                  </div>
+                  {!suppressControls ? (
+                    <div
+                      onClick={(event) => event.stopPropagation()}
+                      onPointerDown={(event) => event.stopPropagation()}
+                      className={cn(
+                        'absolute right-1 top-1/2 hidden -translate-y-1/2 items-center gap-0.5',
+                        'opacity-0 transition-opacity duration-150',
+                        'group-hover/session-tab:flex group-hover/session-tab:opacity-100',
+                        overlayVisible && 'flex opacity-100',
+                      )}
+                    >
+                      <DropdownMenu
+                        open={menuOpen}
+                        onOpenChange={(open) => {
+                          setMenuOpen(open);
+                          if (open) setMenuVisible(true);
+                        }}
+                        onOpenChangeComplete={(open) => {
+                          if (!open) setMenuVisible(false);
+                          onMenuOpenChangeComplete?.(open);
+                        }}
+                      >
+                        <DropdownMenuTrigger asChild>
+                          <button
+                            type="button"
+                            aria-label={t('header.sessionTabs.tabMenuAria')}
+                            className="flex size-5 items-center justify-center rounded text-muted-foreground hover:text-foreground"
+                          >
+                            <Icon name="more" className="size-4" />
+                          </button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="start" className="min-w-[190px]">
+                          {renderMenu(menuArgsFor(dropdownComponents))}
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                      <button
+                        type="button"
+                        aria-label={t('header.sessionTabs.closeTab')}
+                        onClick={() => onClose(tab.id)}
+                        className="flex size-5 items-center justify-center rounded text-muted-foreground hover:text-foreground"
+                      >
+                        <Icon name="close" className="size-4" />
+                      </button>
+                    </div>
+                  ) : null}
+                </div>
+              )}
+        />
+        <ContextMenu.Portal>
+          <ContextMenu.Positioner className="app-region-no-drag z-50">
+            <ContextMenu.Popup
+              data-slot="dropdown-menu-content"
+              style={{ color: 'var(--surface-elevated-foreground)' }}
+              className={cn(dropdownMenuPopupClass, 'min-w-[190px]')}
+            >
+              {renderMenu(menuArgsFor(contextComponents))}
+            </ContextMenu.Popup>
+          </ContextMenu.Positioner>
+        </ContextMenu.Portal>
+      </ContextMenu.Root>
+    </div>
+  );
+};
+
+/**
+ * The header's horizontal working set of sessions (web/desktop only).
+ *
+ * Every session the user opens joins the strip once; the tab whose session is
+ * current renders `children` — the header's title/rename block — inside a
+ * selected pill. Closing a tab only removes it from the strip; closing the
+ * active one activates its neighbour. Ids whose session has not loaded (or
+ * was archived/deleted) stay in the store but do not render, so a partial
+ * session list never destroys the working set.
+ */
+export const SessionTabsStrip: React.FC<{
+  /** Menu items for one tab's session, supplied by the header. */
+  renderMenu: (args: SessionTabMenuArgs) => React.ReactNode;
+  /** Fires when a tab menu finishes opening/closing (deferred rename hook). */
+  onMenuOpenChangeComplete?: (open: boolean) => void;
+  /** While the active tab renames, its hover controls stay hidden. */
+  suppressActiveTabControls?: boolean;
+  children: React.ReactNode;
+}> = ({ renderMenu, onMenuOpenChangeComplete, suppressActiveTabControls = false, children }) => {
+  const { t } = useI18n();
+  const tabIds = useSessionTabsStore((state) => state.tabIds);
+  const ensureTab = useSessionTabsStore((state) => state.ensureTab);
+  const closeOtherTabs = useSessionTabsStore((state) => state.closeOtherTabs);
+  const reorderTabs = useSessionTabsStore((state) => state.reorderTabs);
+
+  const currentSessionId = useSessionUIStore((state) => state.currentSessionId);
+  const setCurrentSession = useSessionUIStore((state) => state.setCurrentSession);
+  const activeSessions = useGlobalSessionsStore((state) => state.activeSessions);
+
+  // Opening a session anywhere (sidebar, palette, deep link) adds its tab.
+  React.useEffect(() => {
+    if (currentSessionId) ensureTab(currentSessionId);
+  }, [currentSessionId, ensureTab]);
+
+  const sessionsById = React.useMemo(() => {
+    const map = new Map<string, Session>();
+    for (const session of activeSessions) map.set(session.id, session);
+    return map;
+  }, [activeSessions]);
+
+  // Only tabs with a known live session render; unknown ids stay stored.
+  const tabs = React.useMemo<SessionTab[]>(() => {
+    const list: SessionTab[] = [];
+    for (const id of tabIds) {
+      const session = sessionsById.get(id);
+      if (session) list.push({ id, session });
+    }
+    return list;
+  }, [tabIds, sessionsById]);
+
+  const handleSelect = React.useCallback((tab: SessionTab) => {
+    setCurrentSession(tab.id, resolveGlobalSessionDirectory(tab.session));
+  }, [setCurrentSession]);
+
+  const handleClose = React.useCallback((id: string) => {
+    closeSessionTabAndActivateNeighbour(id);
+  }, []);
+
+  const handleCloseOthers = React.useCallback((id: string) => {
+    closeOtherTabs(id);
+    if (currentSessionId && currentSessionId !== id) {
+      const kept = tabs.find((tab) => tab.id === id);
+      if (kept) handleSelect(kept);
+    }
+  }, [closeOtherTabs, currentSessionId, handleSelect, tabs]);
+
+  const sensors = useSensors(
+    useSensor(MouseSensor, { activationConstraint: { distance: 8 } }),
+    useSensor(TouchSensor, { activationConstraint: { delay: 200, tolerance: 6 } }),
+  );
+
+  const handleDragEnd = React.useCallback((event: DragEndEvent) => {
+    const { active, over } = event;
+    if (over && active.id !== over.id) {
+      reorderTabs(String(active.id), String(over.id));
+    }
+  }, [reorderTabs]);
+
+  // Soft fade at the edges while more tabs hide behind them.
+  const scrollRef = React.useRef<HTMLDivElement | null>(null);
+  const [edges, setEdges] = React.useState({ left: false, right: false });
+  const updateEdges = React.useCallback(() => {
+    const node = scrollRef.current;
+    if (!node) return;
+    const left = node.scrollLeft > 2;
+    const right = node.scrollLeft + node.clientWidth < node.scrollWidth - 2;
+    setEdges((prev) => (prev.left === left && prev.right === right ? prev : { left, right }));
+  }, []);
+  React.useEffect(() => {
+    updateEdges();
+    const node = scrollRef.current;
+    if (!node || !globalThis.ResizeObserver) return;
+    const observer = new ResizeObserver(updateEdges);
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [updateEdges, tabs.length]);
+
+  // Keep the active tab in view when it changes.
+  React.useEffect(() => {
+    scrollRef.current
+      ?.querySelector('[data-active-session-tab]')
+      ?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+  }, [currentSessionId]);
+
+  const maskImage = edges.left && edges.right
+    ? 'linear-gradient(to right, transparent, black 24px, black calc(100% - 24px), transparent)'
+    : edges.left
+      ? 'linear-gradient(to right, transparent, black 24px)'
+      : edges.right
+        ? 'linear-gradient(to right, black calc(100% - 24px), transparent)'
+        : undefined;
+
+  const tabIdsInOrder = React.useMemo(() => tabs.map((tab) => tab.id), [tabs]);
+
+  // A brand-new draft (no session yet) shows as a transient active pill after
+  // the tabs; it becomes a real tab once the first message creates the session.
+  const showDraftPill = !currentSessionId || !tabs.some((tab) => tab.id === currentSessionId);
+
+  return (
+    <div className="app-region-no-drag flex h-full min-w-0 flex-1 items-center" role="tablist" aria-label={t('header.sessionTabs.stripAria')}>
+      <div
+        ref={scrollRef}
+        onScroll={updateEdges}
+        className="session-tabs-scroll flex min-w-0 flex-1 items-center gap-1.5 overflow-x-auto overscroll-x-contain"
+        style={maskImage ? { maskImage, WebkitMaskImage: maskImage } : undefined}
+      >
+        <DndContext
+          sensors={sensors}
+          collisionDetection={closestCenter}
+          modifiers={[restrictToXAxis]}
+          onDragEnd={handleDragEnd}
+        >
+          <SortableContext items={tabIdsInOrder} strategy={horizontalListSortingStrategy}>
+            {tabs.map((tab) => (
+              <SessionTabItem
+                key={tab.id}
+                tab={tab}
+                isActive={tab.id === currentSessionId}
+                suppressControls={tab.id === currentSessionId && suppressActiveTabControls}
+                onSelect={handleSelect}
+                onClose={handleClose}
+                renderMenu={renderMenu}
+                closeOtherTabs={handleCloseOthers}
+                onMenuOpenChangeComplete={onMenuOpenChangeComplete}
+              >
+                {tab.id === currentSessionId ? children : null}
+              </SessionTabItem>
+            ))}
+          </SortableContext>
+        </DndContext>
+        {showDraftPill ? (
+          <div
+            role="tab"
+            aria-selected
+            className="session-tab-slot flex h-7 w-44 shrink-0 items-center rounded-md bg-interactive-selection px-2"
+            data-active="true"
+          >
+            <div className="min-w-0 flex-1">{children}</div>
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+};
diff --git a/packages/ui/src/components/layout/VSCodeLayout.tsx b/packages/ui/src/components/layout/VSCodeLayout.tsx
index 8b1722b2..2ed431ca 100644
--- a/packages/ui/src/components/layout/VSCodeLayout.tsx
+++ b/packages/ui/src/components/layout/VSCodeLayout.tsx
@@ -56,10 +56,10 @@ const formatTime = (timestamp: number | null, timeFormatPreference: TimeFormatPr
 
 // Width threshold for mobile vs desktop layout in settings
 const MOBILE_WIDTH_THRESHOLD = 550;
-// Width threshold for expanded layout (sidebar + chat side by side)
-const EXPANDED_LAYOUT_THRESHOLD = 1400;
 // Sessions sidebar width in expanded layout
 const SESSIONS_SIDEBAR_WIDTH = 280;
+// Keep enough room for the chat after adding the persistent sessions sidebar.
+const EXPANDED_LAYOUT_THRESHOLD = SESSIONS_SIDEBAR_WIDTH + 520;
 const SESSIONS_SIDEBAR_MIN_WIDTH = Math.round(SESSIONS_SIDEBAR_WIDTH * 0.7);
 const SESSIONS_SIDEBAR_MAX_WIDTH = 520;
 
diff --git a/packages/ui/src/components/model-picker/ModelPickerList.tsx b/packages/ui/src/components/model-picker/ModelPickerList.tsx
index 132f8fa2..4a277737 100644
--- a/packages/ui/src/components/model-picker/ModelPickerList.tsx
+++ b/packages/ui/src/components/model-picker/ModelPickerList.tsx
@@ -12,6 +12,7 @@ import { SortableContext, arrayMove, useSortable, verticalListSortingStrategy }
 import { CSS as DndCSS } from '@dnd-kit/utilities';
 import { Icon } from '@/components/icon/Icon';
 import { Input } from '@/components/ui/input';
+import { matchesRankQuery } from '@/lib/search/fuzzySearch';
 import { ProviderLogo } from '@/components/ui/ProviderLogo';
 import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
@@ -455,18 +456,18 @@ export const ModelPickerList: React.FC<ModelPickerListProps> = ({
     return hiddenModels.some((hidden) => hidden.providerID === providerID && hidden.modelID === modelID);
   }, [hiddenModels]);
 
-  const matchesQuery = React.useCallback((modelName: string, providerName: string) => {
-    const query = searchQuery.trim().toLowerCase();
-    if (!query) return true;
-    return modelName.toLowerCase().includes(query) || providerName.toLowerCase().includes(query);
-  }, [searchQuery]);
+  const matchesQuery = React.useCallback(
+    (modelName: string, providerName: string, modelID?: string) =>
+      matchesRankQuery([modelName, modelID, providerName], searchQuery),
+    [searchQuery],
+  );
 
   const filteredFavorites = React.useMemo(() => favoriteModels.filter(({ model, providerID, modelID }) => {
     if (allowedProviderSet && !allowedProviderSet.has(providerID)) return false;
     if (isModelAllowed && !isModelAllowed(providerID, modelID)) return false;
     if (isHidden(providerID, modelID)) return false;
     const providerName = providerById.get(providerID)?.name || providerID;
-    return matchesQuery(getModelDisplayName(model), providerName);
+    return matchesQuery(getModelDisplayName(model), providerName, modelID);
   }), [allowedProviderSet, favoriteModels, isHidden, isModelAllowed, matchesQuery, providerById]);
 
   const filteredRecents = React.useMemo(() => recentModels.filter(({ model, providerID, modelID }) => {
@@ -474,7 +475,7 @@ export const ModelPickerList: React.FC<ModelPickerListProps> = ({
     if (isModelAllowed && !isModelAllowed(providerID, modelID)) return false;
     if (isHidden(providerID, modelID)) return false;
     const providerName = providerById.get(providerID)?.name || providerID;
-    return matchesQuery(getModelDisplayName(model), providerName);
+    return matchesQuery(getModelDisplayName(model), providerName, modelID);
   }), [allowedProviderSet, isHidden, isModelAllowed, matchesQuery, providerById, recentModels]);
 
   const orderedProviders = React.useMemo(() => {
@@ -495,7 +496,7 @@ export const ModelPickerList: React.FC<ModelPickerListProps> = ({
         const modelID = typeof model.id === 'string' ? model.id : '';
         if (!modelID || isHidden(provider.id, modelID)) return false;
         if (isModelAllowed && !isModelAllowed(provider.id, modelID)) return false;
-        return matchesQuery(getModelDisplayName(model), provider.name || provider.id);
+        return matchesQuery(getModelDisplayName(model), provider.name || provider.id, modelID);
       });
       return { ...provider, models: filteredModels };
     })
diff --git a/packages/ui/src/components/sections/openchamber/OpenChamberPage.tsx b/packages/ui/src/components/sections/openchamber/OpenChamberPage.tsx
index 43fd56c0..72cf9227 100644
--- a/packages/ui/src/components/sections/openchamber/OpenChamberPage.tsx
+++ b/packages/ui/src/components/sections/openchamber/OpenChamberPage.tsx
@@ -152,8 +152,8 @@ const GeneralSectionContent: React.FC = () => {
             {!isVSCode && <OpenChamberToolsSettings />}
             <OpenChamberVisualSettings visibleSettings={[
                 'fileEditorKeymap',
+                ...(!isVSCode ? ['sessionTabs' as const] : []),
                 'autoSaveEnabled',
-                'expandedEditorToolbar',
                 ...(!isVSCode ? ['terminalQuickKeys' as const] : []),
                 ...(!isVSCode ? ['terminalShell' as const] : []),
                 ...(!isVSCode ? ['terminalLoginShell' as const] : []),
diff --git a/packages/ui/src/components/sections/openchamber/OpenChamberVisualSettings.tsx b/packages/ui/src/components/sections/openchamber/OpenChamberVisualSettings.tsx
index 8de1244c..f7d203fc 100644
--- a/packages/ui/src/components/sections/openchamber/OpenChamberVisualSettings.tsx
+++ b/packages/ui/src/components/sections/openchamber/OpenChamberVisualSettings.tsx
@@ -32,7 +32,6 @@ import { CODE_FONT_OPTIONS, DEFAULT_MONO_FONT, DEFAULT_UI_FONT, UI_FONT_OPTIONS,
 import { useI18n, type Locale } from '@/lib/i18n';
 import { useConfigStore } from '@/stores/useConfigStore';
 import { normalizeMobileKeyboardMode, supportsMobileKeyboardResizeContent, type MobileKeyboardMode } from '@/lib/mobileKeyboardMode';
-import { getStoredMobileLayoutPreference, setStoredMobileLayoutPreference, type MobileLayoutPreference } from '@/lib/mobileLayoutPreference';
 import {
     setDirectoryShowHidden,
     useDirectoryShowHidden,
@@ -151,17 +150,6 @@ const MOBILE_KEYBOARD_MODE_OPTIONS: Option<MobileKeyboardMode>[] = [
     },
 ];
 
-const MOBILE_LAYOUT_OPTIONS: Array<{ value: MobileLayoutPreference; labelKey: string }> = [
-    {
-        value: 'default',
-        labelKey: 'settings.openchamber.visual.option.mobileLayout.default',
-    },
-    {
-        value: 'new',
-        labelKey: 'settings.openchamber.visual.option.mobileLayout.new',
-    },
-];
-
 type PwaInstallNameWindow = Window & {
     __OPENCHAMBER_SET_PWA_INSTALL_NAME__?: (value: string) => string;
     __OPENCHAMBER_SET_PWA_ORIENTATION__?: (value: 'system' | 'portrait' | 'landscape') => 'system' | 'portrait' | 'landscape';
@@ -278,7 +266,7 @@ const normalizeUserMessageRenderingMode = (mode: unknown): 'markdown' | 'plain'
     return mode === 'markdown' ? 'markdown' : 'plain';
 };
 
-type VisibleSetting = 'sessionAssist' | 'sessionGoal' | 'theme' | 'windowControlsPosition' | 'pwaInstallName' | 'pwaOrientation' | 'mobileKeyboardMode' | 'timeFormat' | 'weekStart' | 'fontSize' | 'terminalFontSize' | 'terminalShell' | 'terminalLoginShell' | 'editorFontSize' | 'spacing' | 'inputBarOffset' | 'mermaidRendering' | 'userMessageRendering' | 'chatRenderMode' | 'messageTransport' | 'activityRenderMode' | 'collapsibleUserMessages' | 'stickyUserHeader' | 'promptNavigatorEnabled' | 'wideChatLayout' | 'codeBlockLineWrap' | 'splitAssistantMessageActions' | 'subagentReadOnlyBanner' | 'diffLayout' | 'mobileStatusBar' | 'dotfiles' | 'fileViewerPreview' | 'reasoning' | 'showToolFileIcons' | 'showTurnChangedFiles' | 'expandedTools' | 'followUpBehavior' | 'terminalQuickKeys' | 'fileEditorKeymap' | 'persistDraft' | 'inputSpellcheck' | 'reportUsage' | 'expandedEditorToolbar' | 'autoSaveEnabled';
+type VisibleSetting = 'sessionAssist' | 'sessionGoal' | 'theme' | 'windowControlsPosition' | 'pwaInstallName' | 'pwaOrientation' | 'mobileKeyboardMode' | 'timeFormat' | 'weekStart' | 'fontSize' | 'terminalFontSize' | 'terminalShell' | 'terminalLoginShell' | 'editorFontSize' | 'spacing' | 'inputBarOffset' | 'mermaidRendering' | 'userMessageRendering' | 'chatRenderMode' | 'messageTransport' | 'activityRenderMode' | 'collapsibleUserMessages' | 'stickyUserHeader' | 'promptNavigatorEnabled' | 'wideChatLayout' | 'codeBlockLineWrap' | 'splitAssistantMessageActions' | 'subagentReadOnlyBanner' | 'diffLayout' | 'mobileStatusBar' | 'dotfiles' | 'fileViewerPreview' | 'reasoning' | 'showToolFileIcons' | 'showTurnChangedFiles' | 'expandedTools' | 'followUpBehavior' | 'terminalQuickKeys' | 'fileEditorKeymap' | 'persistDraft' | 'inputSpellcheck' | 'reportUsage' | 'autoSaveEnabled' | 'sessionTabs';
 
 const WINDOW_CONTROLS_POSITION_OPTIONS: Array<{ id: DesktopWindowControlsPosition; labelKey: string }> = [
     { id: 'left', labelKey: 'settings.openchamber.desktopNetwork.option.windowControlsLeft' },
@@ -314,6 +302,8 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
     const sessionGoalDefaultBudget = useUIStore(state => state.sessionGoalDefaultBudget);
     const setSessionGoalDefaultBudget = useUIStore(state => state.setSessionGoalDefaultBudget);
     const setShowReasoningTraces = useUIStore(state => state.setShowReasoningTraces);
+    const streamingAutoFollowEnabled = useUIStore(state => state.streamingAutoFollowEnabled);
+    const setStreamingAutoFollowEnabled = useUIStore(state => state.setStreamingAutoFollowEnabled);
     const collapsibleThinkingBlocks = useUIStore(state => state.collapsibleThinkingBlocks);
     const setCollapsibleThinkingBlocks = useUIStore(state => state.setCollapsibleThinkingBlocks);
 
@@ -327,8 +317,6 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
     const promptNavigatorEnabled = useUIStore(state => state.promptNavigatorEnabled);
     const setStickyUserHeader = useUIStore(state => state.setStickyUserHeader);
     const setPromptNavigatorEnabled = useUIStore(state => state.setPromptNavigatorEnabled);
-    const expandedEditorToolbar = useUIStore(state => state.expandedEditorToolbar);
-    const setExpandedEditorToolbar = useUIStore(state => state.setExpandedEditorToolbar);
     const autoSaveEnabled = useUIStore(state => state.autoSaveEnabled);
     const setAutoSaveEnabled = useUIStore(state => state.setAutoSaveEnabled);
     const wideChatLayoutEnabled = useUIStore(state => state.wideChatLayoutEnabled);
@@ -362,6 +350,8 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
     const diffLayoutPreference = useUIStore(state => state.diffLayoutPreference);
     const setDiffLayoutPreference = useUIStore(state => state.setDiffLayoutPreference);
     const showTerminalQuickKeysOnDesktop = useUIStore(state => state.showTerminalQuickKeysOnDesktop);
+    const sessionTabsEnabled = useUIStore(state => state.sessionTabsEnabled);
+    const setSessionTabsEnabled = useUIStore(state => state.setSessionTabsEnabled);
     const setShowTerminalQuickKeysOnDesktop = useUIStore(state => state.setShowTerminalQuickKeysOnDesktop);
     const fileEditorKeymap = useUIStore(state => state.fileEditorKeymap);
     const setFileEditorKeymap = useUIStore(state => state.setFileEditorKeymap);
@@ -510,11 +500,6 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
         void updateDesktopSettings({ draftStartersVisible: enabled });
     }, [setDraftStartersVisible]);
 
-    const handleExpandedEditorToolbarChange = React.useCallback((enabled: boolean) => {
-        setExpandedEditorToolbar(enabled);
-        void updateDesktopSettings({ expandedEditorToolbar: enabled });
-    }, [setExpandedEditorToolbar]);
-
     const handleCollapsibleUserMessagesChange = React.useCallback((enabled: boolean) => {
         setCollapsibleUserMessages(enabled);
         void updateDesktopSettings({ collapsibleUserMessages: enabled });
@@ -629,12 +614,11 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
     const hasThemeSettings = shouldShow('theme') && !isVSCode;
     const showWindowControlsPositionSetting = shouldShow('windowControlsPosition') && showWindowControlsPosition;
     const hasLocalizationSettings = shouldShow('theme') || shouldShow('timeFormat') || shouldShow('weekStart');
-    const showMobileLayoutSetting = isMobile && isWebRuntime() && !isDesktopShell() && !isVSCode;
     const hasAppearanceSettings = isVSCode
         ? hasLocalizationSettings
-        : (shouldShow('theme') || showWindowControlsPositionSetting || showMobileLayoutSetting || shouldShow('pwaInstallName') || shouldShow('pwaOrientation') || shouldShow('timeFormat') || shouldShow('weekStart'));
+        : (shouldShow('theme') || showWindowControlsPositionSetting || shouldShow('pwaInstallName') || shouldShow('pwaOrientation') || shouldShow('timeFormat') || shouldShow('weekStart'));
     const hasLayoutSettings = shouldShow('fontSize') || shouldShow('terminalFontSize') || shouldShow('editorFontSize') || shouldShow('spacing') || (shouldShow('inputBarOffset') && isMobile);
-    const hasNavigationSettings = (shouldShow('terminalQuickKeys') && !isMobile) || ((shouldShow('terminalShell') || shouldShow('terminalLoginShell')) && !isVSCode) || shouldShow('fileEditorKeymap') || shouldShow('autoSaveEnabled') || (shouldShow('expandedEditorToolbar') && !isVSCode);
+    const hasNavigationSettings = (shouldShow('terminalQuickKeys') && !isMobile) || ((shouldShow('terminalShell') || shouldShow('terminalLoginShell')) && !isVSCode) || shouldShow('fileEditorKeymap') || shouldShow('autoSaveEnabled') || (shouldShow('sessionTabs') && !isVSCode && !isMobile);
     const hasBehaviorSettings = shouldShow('mermaidRendering')
         || (shouldShow('sessionGoal') && !isVSCode)
         || shouldShow('userMessageRendering')
@@ -723,7 +707,6 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
             ? [...terminalLoginShells.filter((shell) => shell !== terminalShell), terminalShell]
             : terminalLoginShells.filter((shell) => shell !== terminalShell));
     };
-    const [mobileLayoutPreference, setMobileLayoutPreference] = React.useState<MobileLayoutPreference>(() => getStoredMobileLayoutPreference());
     const [pwaInstallName, setPwaInstallName] = React.useState('');
     const [pwaOrientation, setPwaOrientation] = React.useState<'system' | 'portrait' | 'landscape'>('system');
     const selectedTimeFormatLabel = React.useMemo(() => {
@@ -743,16 +726,6 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
         return option ? tUnsafe(option.labelKey) : undefined;
     }, [mobileKeyboardMode, tUnsafe]);
 
-    const handleMobileLayoutPreferenceChange = React.useCallback((value: MobileLayoutPreference) => {
-        if (value === mobileLayoutPreference) {
-            return;
-        }
-
-        setMobileLayoutPreference(value);
-        setStoredMobileLayoutPreference(value);
-        window.location.reload();
-    }, [mobileLayoutPreference]);
-
     const applyPwaInstallName = React.useCallback(async (value: string) => {
         if (typeof window === 'undefined') {
             return;
@@ -877,21 +850,6 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
                                             ))}
                                         </SettingsRadioGroup>
 
-                                        {showMobileLayoutSetting && (
-                                            <SettingsInset>
-                                                <SettingsStackedField label={t('settings.openchamber.visual.section.mobileLayout')}>
-                                                    <SettingsChipGroup
-                                                        value={mobileLayoutPreference}
-                                                        options={MOBILE_LAYOUT_OPTIONS.map((option) => ({
-                                                            value: option.value,
-                                                            label: tUnsafe(option.labelKey),
-                                                        }))}
-                                                        onChange={handleMobileLayoutPreferenceChange}
-                                                        aria-label={t('settings.openchamber.visual.section.mobileLayout')}
-                                                    />
-                                                </SettingsStackedField>
-                                            </SettingsInset>
-                                        )}
                                     </div>
 
                                     <div className={SETTINGS_FIELDS_STACK_CLASS}>
@@ -1486,25 +1444,6 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
                                     settingsItem="appearance.auto-save-enabled"
                                 />
                             )}
-                            {shouldShow('expandedEditorToolbar') && !isVSCode && (
-                                <SettingsCheckboxRow
-                                    checked={expandedEditorToolbar}
-                                    onChange={handleExpandedEditorToolbarChange}
-                                    label={t('settings.openchamber.visual.field.expandedEditorToolbar')}
-                                    ariaLabel={t('settings.openchamber.visual.field.expandedEditorToolbarAria')}
-                                    settingsItem="appearance.expanded-editor-toolbar"
-                                />
-                            )}
-                            {shouldShow('terminalQuickKeys') && !isMobile && (
-                                <SettingsCheckboxRow
-                                    checked={showTerminalQuickKeysOnDesktop}
-                                    onChange={setShowTerminalQuickKeysOnDesktop}
-                                    label={t('settings.openchamber.visual.field.terminalQuickKeys')}
-                                    ariaLabel={t('settings.openchamber.visual.field.terminalQuickKeysAria')}
-                                    settingsItem="appearance.terminal-quick-keys"
-                                    info={t('settings.openchamber.visual.field.terminalQuickKeysTooltip')}
-                                />
-                            )}
                             {showTerminalShellSetting && (
                                 <SettingsStackedField
                                     label={t('settings.openchamber.visual.field.terminalShell')}
@@ -1534,7 +1473,31 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
                                     settingsItem="appearance.terminal-login-shell"
                                 />
                             )}
+                            {shouldShow('terminalQuickKeys') && !isMobile && (
+                                <SettingsCheckboxRow
+                                    checked={showTerminalQuickKeysOnDesktop}
+                                    onChange={setShowTerminalQuickKeysOnDesktop}
+                                    label={t('settings.openchamber.visual.field.terminalQuickKeys')}
+                                    ariaLabel={t('settings.openchamber.visual.field.terminalQuickKeysAria')}
+                                    settingsItem="appearance.terminal-quick-keys"
+                                    info={t('settings.openchamber.visual.field.terminalQuickKeysTooltip')}
+                                />
+                            )}
                         </div>
+                        {shouldShow('sessionTabs') && !isVSCode && !isMobile && (
+                            <SettingsControlGroup
+                                title={t('settings.openchamber.visual.field.sessionTabsGroup')}
+                                settingsItem="appearance.session-tabs"
+                            >
+                                <SettingsCheckboxRow
+                                    checked={sessionTabsEnabled}
+                                    onChange={setSessionTabsEnabled}
+                                    label={t('settings.openchamber.visual.field.sessionTabs')}
+                                    ariaLabel={t('settings.openchamber.visual.field.sessionTabsAria')}
+                                    info={t('settings.openchamber.visual.field.sessionTabsInfo')}
+                                />
+                            </SettingsControlGroup>
+                        )}
                     </SettingsSection>
                 )}
 
@@ -1878,6 +1841,20 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
                                         )}
                                     </SettingsSection>
                                 )}
+                                <SettingsSection
+                                    title={t('settings.openchamber.visual.section.streaming')}
+                                    settingsItem="chat.streaming"
+                                    contentClassName={SETTINGS_OPTION_STACK_CLASS}
+                                >
+                                    <SettingsCheckboxRow
+                                        checked={streamingAutoFollowEnabled}
+                                        onChange={setStreamingAutoFollowEnabled}
+                                        label={t('settings.openchamber.visual.field.streamingAutoFollow')}
+                                        ariaLabel={t('settings.openchamber.visual.field.streamingAutoFollowAria')}
+                                        info={t('settings.openchamber.visual.field.streamingAutoFollowInfo')}
+                                        settingsItem="chat.streaming-auto-follow"
+                                    />
+                                </SettingsSection>
 
                                 {(shouldShow('collapsibleUserMessages') || shouldShow('stickyUserHeader') || (shouldShow('promptNavigatorEnabled') && !isVSCode) || shouldShow('wideChatLayout') || shouldShow('splitAssistantMessageActions') || shouldShow('codeBlockLineWrap')) && (
                                 <SettingsSection
diff --git a/packages/ui/src/components/sections/providers/ProvidersPage.tsx b/packages/ui/src/components/sections/providers/ProvidersPage.tsx
index a84bb4fd..9ca24ca5 100644
--- a/packages/ui/src/components/sections/providers/ProvidersPage.tsx
+++ b/packages/ui/src/components/sections/providers/ProvidersPage.tsx
@@ -1,3 +1,4 @@
+import { matchesRankQuery, rankByQuery } from '@/lib/search/fuzzySearch';
 import React from 'react';
 import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
 import { SettingsPageLayout } from '@/components/sections/shared/SettingsPageLayout';
@@ -603,15 +604,9 @@ export const ProvidersPage: React.FC = () => {
                         </div>
                         <ScrollableOverlay outerClassName="max-h-[240px]" className="p-1">
                           {(() => {
-                            const query = providerSearchQuery.toLowerCase();
                             const customLabel = t('settings.providers.page.custom.optionLabel');
-                            const customMatches = !query
-                              || customLabel.toLowerCase().includes(query)
-                              || 'other'.includes(query)
-                              || 'custom'.includes(query);
-                            const filtered = unconnectedProviders.filter(p => {
-                              return (p.name || p.id).toLowerCase().includes(query) || p.id.toLowerCase().includes(query);
-                            });
+                            const customMatches = matchesRankQuery([customLabel, 'other', 'custom'], providerSearchQuery);
+                            const filtered = rankByQuery(unconnectedProviders, providerSearchQuery, (p) => [p.name || p.id, p.id]);
                             if (filtered.length === 0 && !customMatches) {
                               return <p className="py-4 text-center typography-meta text-muted-foreground">{t('settings.providers.page.connect.noProvidersFound')}</p>;
                             }
@@ -792,13 +787,10 @@ export const ProvidersPage: React.FC = () => {
     ? t('settings.providers.page.auth.useReconnectHint')
     : t('settings.providers.page.auth.incompleteHint');
 
-  const filteredModels = providerModels.filter((model) => {
-    const name = typeof model?.name === 'string' ? model.name : '';
-    const id = typeof model?.id === 'string' ? model.id : '';
-    const query = modelQuery.trim().toLowerCase();
-    if (!query) return true;
-    return name.toLowerCase().includes(query) || id.toLowerCase().includes(query);
-  });
+  const filteredModels = rankByQuery(providerModels, modelQuery, (model) => [
+    typeof model?.name === 'string' ? model.name : '',
+    typeof model?.id === 'string' ? model.id : '',
+  ]);
 
   if (isCustomEditMode && isEditableCustomProvider && editingCustomFormInitial) {
     return (
diff --git a/packages/ui/src/components/sections/remote-instances/RemoteInstancesPage.tsx b/packages/ui/src/components/sections/remote-instances/RemoteInstancesPage.tsx
index 558bb2ca..4bc0c087 100644
--- a/packages/ui/src/components/sections/remote-instances/RemoteInstancesPage.tsx
+++ b/packages/ui/src/components/sections/remote-instances/RemoteInstancesPage.tsx
@@ -1,3 +1,4 @@
+import { rankByQuery } from '@/lib/search/fuzzySearch';
 import React from 'react';
 import QRCode from 'qrcode';
 import { Button } from '@/components/ui/button';
@@ -1255,13 +1256,10 @@ export const RemoteInstancesPage: React.FC = () => {
     [createImportedInstance],
   );
 
-  const filteredImportCandidates = React.useMemo(() => {
-    const query = sshHostSearch.trim().toLowerCase();
-    if (!query) return importCandidates;
-    return importCandidates.filter((candidate) => {
-      return candidate.host.toLowerCase().includes(query) || candidate.sshCommand.toLowerCase().includes(query);
-    });
-  }, [importCandidates, sshHostSearch]);
+  const filteredImportCandidates = React.useMemo(
+    () => rankByQuery(importCandidates, sshHostSearch, (candidate) => [candidate.host, candidate.sshCommand]),
+    [importCandidates, sshHostSearch],
+  );
 
   // Opening a ready instance means pointing this window at the forwarded local
   // URL — the same navigation the host switcher performs after its own connect.
diff --git a/packages/ui/src/components/sections/skills/catalog/SkillsCatalogPage.tsx b/packages/ui/src/components/sections/skills/catalog/SkillsCatalogPage.tsx
index 621aa2fa..40db43a5 100644
--- a/packages/ui/src/components/sections/skills/catalog/SkillsCatalogPage.tsx
+++ b/packages/ui/src/components/sections/skills/catalog/SkillsCatalogPage.tsx
@@ -1,3 +1,4 @@
+import { rankByQuery } from '@/lib/search/fuzzySearch';
 import React from 'react';
 import { runtimeFetch } from '@/lib/runtime-fetch';
 
@@ -265,14 +266,12 @@ export const SkillsCatalogPage: React.FC<SkillsCatalogPageProps> = ({ mode, onMo
   const isSearching = search.trim().length > 0;
 
   const filtered = React.useMemo(() => {
-    const q = search.trim().toLowerCase();
-    const matches = (item: SkillsCatalogItem) =>
-      item.skillName.toLowerCase().includes(q)
-      || (item.description || '').toLowerCase().includes(q)
-      || (item.frontmatterName || '').toLowerCase().includes(q);
-
     if (isSearching) {
-      return sources.flatMap((src) => (itemsBySource[src.id] || []).filter(matches));
+      return rankByQuery(
+        sources.flatMap((src) => itemsBySource[src.id] || []),
+        search,
+        (item) => [item.skillName, item.frontmatterName, item.description],
+      );
     }
     if (!selectedSourceId) {
       return [];
diff --git a/packages/ui/src/components/session/DirectoryExplorerDialog.tsx b/packages/ui/src/components/session/DirectoryExplorerDialog.tsx
index 56b5dcab..e9e75314 100644
--- a/packages/ui/src/components/session/DirectoryExplorerDialog.tsx
+++ b/packages/ui/src/components/session/DirectoryExplorerDialog.tsx
@@ -148,7 +148,6 @@ export const DirectoryExplorerDialog: React.FC<DirectoryExplorerDialogProps> = (
   const homeDirectory = useDirectoryStore((s) => s.homeDirectory);
   const projects = useProjectsStore((s) => s.projects);
   const addProject = useProjectsStore((s) => s.addProject);
-  const setActiveMainTab = useUIStore((s) => s.setActiveMainTab);
   const setSessionSwitcherOpen = useUIStore((s) => s.setSessionSwitcherOpen);
   const openNewSessionDraft = useSessionUIStore((s) => s.openNewSessionDraft);
   const gitIdentityProfiles = useGitIdentitiesStore((s) => s.profiles);
@@ -411,11 +410,10 @@ export const DirectoryExplorerDialog: React.FC<DirectoryExplorerDialogProps> = (
   }, [onOpenChange]);
 
   const openProjectDraft = React.useCallback((projectId: string, projectPath: string) => {
-    setActiveMainTab('chat');
     if (isMobile) setSessionSwitcherOpen(false);
     openNewSessionDraft({ selectedProjectId: projectId, directoryOverride: projectPath });
     handleClose();
-  }, [handleClose, isMobile, openNewSessionDraft, setActiveMainTab, setSessionSwitcherOpen]);
+  }, [handleClose, isMobile, openNewSessionDraft, setSessionSwitcherOpen]);
 
   const handleQuickAdd = React.useCallback((event: React.MouseEvent, path: string) => {
     event.stopPropagation();
diff --git a/packages/ui/src/components/session/ScheduledTasksDialog.tsx b/packages/ui/src/components/session/ScheduledTasksDialog.tsx
index 25087e79..299feec6 100644
--- a/packages/ui/src/components/session/ScheduledTasksDialog.tsx
+++ b/packages/ui/src/components/session/ScheduledTasksDialog.tsx
@@ -368,13 +368,9 @@ export function ScheduledTasksDialog() {
       return;
     }
     setOpen(false);
-    if (isMobile) {
-      useFilesViewTabsStore.getState().setSelectedPath(selectedProject.path, task.loopFile, { allowOutsideRoot: true });
-      useUIStore.getState().setActiveMainTab('files');
-      return;
-    }
+    useFilesViewTabsStore.getState().setSelectedPath(selectedProject.path, task.loopFile, { allowOutsideRoot: true });
     useUIStore.getState().openContextFile(selectedProject.path, task.loopFile);
-  }, [isMobile, selectedProject?.path, setOpen]);
+  }, [selectedProject?.path, setOpen]);
 
   const handleRunNow = React.useCallback(async (task: ScheduledTask) => {
     if (!selectedProjectID) {
@@ -397,8 +393,7 @@ export function ScheduledTasksDialog() {
         // this surface (MainLayout closes surfaces on session selection).
         const project = projects.find((entry) => entry.id === selectedProjectID);
         useSessionUIStore.getState().setCurrentSession(sessionId, project?.path ?? null);
-        useUIStore.getState().setActiveMainTab('chat');
-      }
+        }
     } catch (error) {
       toast.error(error instanceof Error ? error.message : t('sessions.scheduledTasks.dialog.toast.runFailed'));
     } finally {
diff --git a/packages/ui/src/components/session/SessionSidebar.tsx b/packages/ui/src/components/session/SessionSidebar.tsx
index 56ddc2d1..b59178da 100644
--- a/packages/ui/src/components/session/SessionSidebar.tsx
+++ b/packages/ui/src/components/session/SessionSidebar.tsx
@@ -391,7 +391,6 @@ const SessionSidebarComponent: React.FC<SessionSidebarProps> = ({
   const updateProjectMeta = useProjectsStore((state) => state.updateProjectMeta);
   const reorderProjects = useProjectsStore((state) => state.reorderProjects);
 
-  const setActiveMainTab = useUIStore((state) => state.setActiveMainTab);
   const openContextPanelTab = useUIStore((state) => state.openContextPanelTab);
   const setSettingsDialogOpen = useUIStore((state) => state.setSettingsDialogOpen);
   const toggleHelpDialog = useUIStore((state) => state.toggleHelpDialog);
@@ -848,7 +847,6 @@ const SessionSidebarComponent: React.FC<SessionSidebarProps> = ({
     sessionSearchQuery,
     setSessionSearchQuery,
     setIsSessionSearchOpen,
-    setActiveMainTab,
     setSessionSwitcherOpen,
     setCurrentSession,
     updateSessionTitle,
@@ -1698,7 +1696,6 @@ const SessionSidebarComponent: React.FC<SessionSidebarProps> = ({
         alwaysShowActions={alwaysShowSidebarActions}
         activeProjectId={activeProjectId}
         setActiveProjectIdOnly={setActiveProjectIdOnly}
-        setActiveMainTab={setActiveMainTab}
         setSessionSwitcherOpen={setSessionSwitcherOpen}
         openNewSessionDraft={openNewSessionDraftFromTree}
         addSessionToFolder={addSessionToFolder}
@@ -1741,8 +1738,7 @@ const SessionSidebarComponent: React.FC<SessionSidebarProps> = ({
       alwaysShowSidebarActions,
       activeProjectId,
       setActiveProjectIdOnly,
-      setActiveMainTab,
-      setSessionSwitcherOpen,
+        setSessionSwitcherOpen,
       openNewSessionDraftFromTree,
       addSessionToFolder,
       stableCreateFolderAndStartRename,
@@ -1763,12 +1759,11 @@ const SessionSidebarComponent: React.FC<SessionSidebarProps> = ({
 
   const handleOpenNewSessionDraftFromHeader = React.useCallback(() => {
     useUIStore.getState().closeMainSurfaces();
-    setActiveMainTab('chat');
     if (mobileVariant) {
       setSessionSwitcherOpen(false);
     }
     openNewSessionDraft();
-  }, [mobileVariant, openNewSessionDraft, setActiveMainTab, setSessionSwitcherOpen]);
+  }, [mobileVariant, openNewSessionDraft, setSessionSwitcherOpen]);
 
   const renderChatsSection = React.useCallback((items: ActivityItem[]) => {
     const chatsRoot = getChatsRootForHome(homeDirectory)
@@ -1850,12 +1845,11 @@ const SessionSidebarComponent: React.FC<SessionSidebarProps> = ({
     setBulkDeleteConfirm,
   });
   const handleOpenMultiRunFromHeader = React.useCallback(() => {
-    setActiveMainTab('chat');
     if (mobileVariant) {
       setSessionSwitcherOpen(false);
     }
     openMultiRunLauncher();
-  }, [mobileVariant, openMultiRunLauncher, setActiveMainTab, setSessionSwitcherOpen]);
+  }, [mobileVariant, openMultiRunLauncher, setSessionSwitcherOpen]);
 
   return (
     // One shared tooltip provider for the whole sidebar: session tooltips open
@@ -1889,7 +1883,6 @@ const SessionSidebarComponent: React.FC<SessionSidebarProps> = ({
         handleSessionSelect={stableHandleSessionSelect}
         mobileVariant={mobileVariant}
         openNewSessionDraft={openNewSessionDraft}
-        setActiveMainTab={setActiveMainTab}
         setSessionSwitcherOpen={setSessionSwitcherOpen}
         sessionOwnerBySessionId={sessionOwnership.bySessionId}
       />
@@ -1959,7 +1952,6 @@ const SessionSidebarComponent: React.FC<SessionSidebarProps> = ({
         alwaysShowActions={alwaysShowSidebarActions}
         toggleProject={toggleProject}
         setActiveProjectIdOnly={setActiveProjectIdOnly}
-        setActiveMainTab={setActiveMainTab}
         setSessionSwitcherOpen={setSessionSwitcherOpen}
         openNewSessionDraft={openNewSessionDraftFromTree}
         openNewWorktreeDialog={openNewWorktreeDialog}
@@ -2033,8 +2025,7 @@ const SessionSidebarComponent: React.FC<SessionSidebarProps> = ({
         open={newWorktreeDialogOpen}
         onOpenChange={setNewWorktreeDialogOpen}
         onWorktreeCreated={(worktreePath, options) => {
-          setActiveMainTab('chat');
-          if (mobileVariant) {
+                if (mobileVariant) {
             setSessionSwitcherOpen(false);
           }
           if (options?.sessionId) {
diff --git a/packages/ui/src/components/session/SessionSwitcherDropdown.tsx b/packages/ui/src/components/session/SessionSwitcherDropdown.tsx
index c07208b6..f2adfc74 100644
--- a/packages/ui/src/components/session/SessionSwitcherDropdown.tsx
+++ b/packages/ui/src/components/session/SessionSwitcherDropdown.tsx
@@ -71,14 +71,12 @@ type SwitcherContentProps = {
 function SwitcherContent({ onSelect, variant, scopeProjectId }: SwitcherContentProps): React.ReactElement {
   const items = useSwitcherItems(true, { scopeProjectId });
   const openNewSessionDraft = useSessionUIStore((state) => state.openNewSessionDraft);
-  const setActiveMainTab = useUIStore((state) => state.setActiveMainTab);
   const { t } = useI18n();
 
   const handleNewSession = React.useCallback(() => {
-    setActiveMainTab('chat');
     onSelect();
     openNewSessionDraft();
-  }, [onSelect, openNewSessionDraft, setActiveMainTab]);
+  }, [onSelect, openNewSessionDraft]);
 
   const [expandedParents, setExpandedParents] = React.useState<Set<string>>(new Set());
   const toggleParent = React.useCallback((sessionId: string) => {
diff --git a/packages/ui/src/components/session/project-context/MemorySection.tsx b/packages/ui/src/components/session/project-context/MemorySection.tsx
index 45c8e22a..61b4ea42 100644
--- a/packages/ui/src/components/session/project-context/MemorySection.tsx
+++ b/packages/ui/src/components/session/project-context/MemorySection.tsx
@@ -1,3 +1,4 @@
+import { matchesRankQuery } from '@/lib/search/fuzzySearch';
 import React from 'react';
 
 import { toast } from '@/components/ui';
@@ -186,13 +187,10 @@ export const MemorySection: React.FC<{
     };
   }, [markViewed, viewKey]);
 
-  const visibleEntries = React.useMemo(() => {
-    const needle = query.trim().toLowerCase();
-    if (!needle) return entries;
-    return entries.filter((entry) => (
-      entry.title.toLowerCase().includes(needle) || entry.body.toLowerCase().includes(needle)
-    ));
-  }, [entries, query]);
+  const visibleEntries = React.useMemo(
+    () => entries.filter((entry) => matchesRankQuery([entry.title, entry.body], query)),
+    [entries, query],
+  );
 
   const handleDelete = React.useCallback(async (memoryId: string) => {
     if (!await deleteEntry(scope, memoryId)) {
diff --git a/packages/ui/src/components/session/project-context/NotesSection.tsx b/packages/ui/src/components/session/project-context/NotesSection.tsx
index a01b4d84..1f85be2c 100644
--- a/packages/ui/src/components/session/project-context/NotesSection.tsx
+++ b/packages/ui/src/components/session/project-context/NotesSection.tsx
@@ -1,3 +1,4 @@
+import { matchesRankQuery } from '@/lib/search/fuzzySearch';
 import React from 'react';
 
 import { toast } from '@/components/ui';
@@ -178,11 +179,10 @@ export const NotesSection: React.FC<{
   const saveNoteBody = useProjectContextStore((state) => state.saveNoteBody);
   const deleteNote = useProjectContextStore((state) => state.deleteNote);
 
-  const visibleNotes = React.useMemo(() => {
-    const needle = query.trim().toLowerCase();
-    if (!needle) return notes;
-    return notes.filter((note) => note.body.toLowerCase().includes(needle));
-  }, [notes, query]);
+  const visibleNotes = React.useMemo(
+    () => notes.filter((note) => matchesRankQuery([note.body], query)),
+    [notes, query],
+  );
 
   // The store keeps the failure reason; without passing it through, every
   // failure looks identical to the user and tells them nothing about the cause.
diff --git a/packages/ui/src/components/session/project-context/PlansSection.tsx b/packages/ui/src/components/session/project-context/PlansSection.tsx
index ef15d99e..a5d00fc1 100644
--- a/packages/ui/src/components/session/project-context/PlansSection.tsx
+++ b/packages/ui/src/components/session/project-context/PlansSection.tsx
@@ -1,3 +1,4 @@
+import { matchesRankQuery } from '@/lib/search/fuzzySearch';
 import React from 'react';
 
 import { toast } from '@/components/ui';
@@ -146,11 +147,10 @@ export const PlansSection: React.FC<{
     [onTogglePinned, projectRef, t]
   );
 
-  const visiblePlans = React.useMemo(() => {
-    const needle = query.trim().toLowerCase();
-    if (!needle) return plans;
-    return plans.filter((plan) => plan.title.toLowerCase().includes(needle));
-  }, [plans, query]);
+  const visiblePlans = React.useMemo(
+    () => plans.filter((plan) => matchesRankQuery([plan.title], query)),
+    [plans, query],
+  );
 
   const handleOpenPlan = React.useCallback(
     (plan: ProjectPlanLink) => {
diff --git a/packages/ui/src/components/session/project-context/TodosSection.tsx b/packages/ui/src/components/session/project-context/TodosSection.tsx
index fe028ac4..788dc583 100644
--- a/packages/ui/src/components/session/project-context/TodosSection.tsx
+++ b/packages/ui/src/components/session/project-context/TodosSection.tsx
@@ -1,3 +1,4 @@
+import { matchesRankQuery } from '@/lib/search/fuzzySearch';
 import React from 'react';
 import {
   DndContext,
@@ -183,11 +184,10 @@ export const TodosSection: React.FC<{
   const completedTodoCount = todos.reduce((count, todo) => count + (todo.completed ? 1 : 0), 0);
   // Filtering is display-only: every handler above still edits the full list,
   // so reordering or clearing while a filter is active cannot drop hidden items.
-  const visibleTodos = React.useMemo(() => {
-    const needle = query.trim().toLowerCase();
-    if (!needle) return todos;
-    return todos.filter((todo) => todo.text.toLowerCase().includes(needle));
-  }, [query, todos]);
+  const visibleTodos = React.useMemo(
+    () => todos.filter((todo) => matchesRankQuery([todo.text], query)),
+    [query, todos],
+  );
 
   return (
     <div className="space-y-2">
diff --git a/packages/ui/src/components/session/project-context/useProjectTodoSend.ts b/packages/ui/src/components/session/project-context/useProjectTodoSend.ts
index 79401a69..c85cf1ce 100644
--- a/packages/ui/src/components/session/project-context/useProjectTodoSend.ts
+++ b/packages/ui/src/components/session/project-context/useProjectTodoSend.ts
@@ -44,13 +44,11 @@ export const useProjectTodoSend = (options: {
   const sendMessage = useSessionUIStore((state) => state.sendMessage);
   const setCurrentSession = useSessionUIStore((state) => state.setCurrentSession);
   const setPendingInputText = useInputStore((state) => state.setPendingInputText);
-  const setActiveMainTab = useUIStore((state) => state.setActiveMainTab);
   const setSessionSwitcherOpen = useUIStore((state) => state.setSessionSwitcherOpen);
 
   const routeToChat = React.useCallback(() => {
-    setActiveMainTab('chat');
     setSessionSwitcherOpen(false);
-  }, [setActiveMainTab, setSessionSwitcherOpen]);
+  }, [setSessionSwitcherOpen]);
 
   const sendToCurrentSession = React.useCallback(
     (todoText: string) => {
diff --git a/packages/ui/src/components/session/sidebar/SessionGroupSection.tsx b/packages/ui/src/components/session/sidebar/SessionGroupSection.tsx
index cfab4159..c80d3d73 100644
--- a/packages/ui/src/components/session/sidebar/SessionGroupSection.tsx
+++ b/packages/ui/src/components/session/sidebar/SessionGroupSection.tsx
@@ -1,3 +1,4 @@
+import { matchesRankQuery } from '@/lib/search/fuzzySearch';
 import React from 'react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import type { Session } from '@opencode-ai/sdk/v2';
@@ -13,7 +14,6 @@ import { Button } from '@/components/ui/button';
 import { Icon } from "@/components/icon/Icon";
 import { cn } from '@/lib/utils';
 import { sessionEvents } from '@/lib/sessionEvents';
-import type { MainTab } from '@/stores/useUIStore';
 import { SessionFolderItem } from '../SessionFolderItem';
 import type { SortableDragHandleProps } from './sortableItems';
 import { DroppableFolderWrapper, SessionFolderDndScope } from './sessionFolderDnd';
@@ -83,7 +83,6 @@ type Props = {
   alwaysShowActions: boolean;
   activeProjectId: string | null;
   setActiveProjectIdOnly: (id: string) => void;
-  setActiveMainTab: (tab: MainTab) => void;
   setSessionSwitcherOpen: (open: boolean) => void;
   openNewSessionDraft: (options?: { selectedProjectId?: string | null; directoryOverride?: string | null; targetFolderId?: string; target?: 'chat' | 'project' }) => void;
   addSessionToFolder: (scopeKey: string, folderId: string, sessionId: string) => void;
@@ -264,7 +263,6 @@ const areGroupPropsEqual = (prev: Props, next: Props): boolean => {
     && prev.alwaysShowActions === next.alwaysShowActions
     && prev.activeProjectId === next.activeProjectId
     && prev.setActiveProjectIdOnly === next.setActiveProjectIdOnly
-    && prev.setActiveMainTab === next.setActiveMainTab
     && prev.setSessionSwitcherOpen === next.setSessionSwitcherOpen
     && prev.openNewSessionDraft === next.openNewSessionDraft
     && prev.addSessionToFolder === next.addSessionToFolder
@@ -306,7 +304,6 @@ function SessionGroupSectionBase(props: Props): React.ReactNode {
     alwaysShowActions,
     activeProjectId,
     setActiveProjectIdOnly,
-    setActiveMainTab,
     setSessionSwitcherOpen,
     openNewSessionDraft,
     addSessionToFolder,
@@ -483,7 +480,7 @@ function SessionGroupSectionBase(props: Props): React.ReactNode {
         return true;
       }
 
-      const folderMatches = entry.folder.name.toLowerCase().includes(normalizedSessionSearchQuery);
+      const folderMatches = matchesRankQuery([entry.folder.name], normalizedSessionSearchQuery);
       if (folderMatches || entry.nodes.length > 0) {
         keepByFolderId.set(folderId, true);
         return true;
@@ -879,7 +876,6 @@ function SessionGroupSectionBase(props: Props): React.ReactNode {
             depth={0}
             onNewSession={() => {
               if (projectId && projectId !== activeProjectId) setActiveProjectIdOnly(projectId);
-              setActiveMainTab('chat');
               if (mobileVariant) setSessionSwitcherOpen(false);
                openNewSessionDraft({
                  selectedProjectId: projectId,
@@ -1247,8 +1243,7 @@ function SessionGroupSectionBase(props: Props): React.ReactNode {
                   onClick={(event) => {
                     event.stopPropagation();
                     if (projectId && projectId !== activeProjectId) setActiveProjectIdOnly(projectId);
-                    setActiveMainTab('chat');
-                    if (mobileVariant) setSessionSwitcherOpen(false);
+                          if (mobileVariant) setSessionSwitcherOpen(false);
                     openNewSessionDraft({ selectedProjectId: projectId, directoryOverride: group.directory });
                   }}
                   className="inline-flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-interactive-hover/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
diff --git a/packages/ui/src/components/session/sidebar/SidebarProjectsList.tsx b/packages/ui/src/components/session/sidebar/SidebarProjectsList.tsx
index e9ac5d30..83dac8f6 100644
--- a/packages/ui/src/components/session/sidebar/SidebarProjectsList.tsx
+++ b/packages/ui/src/components/session/sidebar/SidebarProjectsList.tsx
@@ -16,7 +16,6 @@ import type { SortableDragHandleProps } from './sortableItems';
 import { ProjectHeaderIdentity, SortableGroupItem, SortableProjectItem } from './sortableItems';
 import { formatProjectLabel } from './utils';
 import { useI18n } from '@/lib/i18n';
-import type { MainTab } from '@/stores/useUIStore';
 import type { ProjectSortOrder } from '@/stores/useSessionDisplayStore';
 import { streamPerfCount } from '@/stores/utils/streamDebug';
 import { Icon } from '@/components/icon/Icon';
@@ -91,7 +90,6 @@ type Props = {
   alwaysShowActions: boolean;
   toggleProject: (id: string) => void;
   setActiveProjectIdOnly: (id: string) => void;
-  setActiveMainTab: (tab: MainTab) => void;
   setSessionSwitcherOpen: (open: boolean) => void;
   openNewSessionDraft: (options?: { selectedProjectId?: string | null; directoryOverride?: string | null }) => void;
   openNewWorktreeDialog: () => void;
@@ -362,7 +360,6 @@ function SidebarProjectsListComponent(props: Props): React.ReactNode {
                   }}
                   onNewSession={() => {
                     if (projectKey !== props.activeProjectId) props.setActiveProjectIdOnly(projectKey);
-                    props.setActiveMainTab('chat');
                     if (props.mobileVariant) props.setSessionSwitcherOpen(false);
                     props.openNewSessionDraft({
                       selectedProjectId: projectKey,
@@ -371,7 +368,6 @@ function SidebarProjectsListComponent(props: Props): React.ReactNode {
                   }}
                   onNewWorktreeSession={() => {
                     if (projectKey !== props.activeProjectId) props.setActiveProjectIdOnly(projectKey);
-                    props.setActiveMainTab('chat');
                     props.openNewWorktreeDialog();
                   }}
                   onManageWorktrees={() => props.openWorktreesPage(projectKey)}
diff --git a/packages/ui/src/components/session/sidebar/hooks/useProjectSessionSelection.ts b/packages/ui/src/components/session/sidebar/hooks/useProjectSessionSelection.ts
index cdbf2960..72dfb797 100644
--- a/packages/ui/src/components/session/sidebar/hooks/useProjectSessionSelection.ts
+++ b/packages/ui/src/components/session/sidebar/hooks/useProjectSessionSelection.ts
@@ -2,7 +2,6 @@ import React from 'react';
 import type { Session } from '@opencode-ai/sdk/v2';
 import type { SessionGroup, SessionNode } from '../types';
 import { normalizePath } from '../utils';
-import type { MainTab } from '@/stores/useUIStore';
 import { useUIStore } from '@/stores/useUIStore';
 import { useSessionUIStore } from '@/sync/session-ui-store';
 
@@ -22,7 +21,6 @@ type Args = {
   newSessionDraftOpen: boolean;
   mobileVariant: boolean;
   openNewSessionDraft: (options?: { selectedProjectId?: string | null; directoryOverride?: string | null }) => void;
-  setActiveMainTab: (tab: MainTab) => void;
   setSessionSwitcherOpen: (open: boolean) => void;
 };
 
@@ -101,7 +99,6 @@ export const useProjectSessionSelection = (args: Args): void => {
     newSessionDraftOpen,
     mobileVariant,
     openNewSessionDraft,
-    setActiveMainTab,
     setSessionSwitcherOpen,
   } = args;
 
@@ -205,7 +202,6 @@ export const useProjectSessionSelection = (args: Args): void => {
     previousActiveProjectRef.current = activeProjectId;
 
     if (selection.kind === 'open-draft') {
-      setActiveMainTab('chat');
       if (mobileVariant) {
         setSessionSwitcherOpen(false);
       }
@@ -232,7 +228,6 @@ export const useProjectSessionSelection = (args: Args): void => {
     openNewSessionDraft,
     projectSections,
     projectSessionMeta,
-    setActiveMainTab,
     setSessionSwitcherOpen,
     setActiveSessionByProject,
   ]);
diff --git a/packages/ui/src/components/session/sidebar/hooks/useSessionActions.ts b/packages/ui/src/components/session/sidebar/hooks/useSessionActions.ts
index a449224e..83d86939 100644
--- a/packages/ui/src/components/session/sidebar/hooks/useSessionActions.ts
+++ b/packages/ui/src/components/session/sidebar/hooks/useSessionActions.ts
@@ -3,7 +3,6 @@ import type { Session } from '@opencode-ai/sdk/v2';
 import { toast } from '@/components/ui';
 import { copyTextToClipboard } from '@/lib/clipboard';
 import { useI18n } from '@/lib/i18n';
-import type { MainTab } from '@/stores/useUIStore';
 import { useUIStore } from '@/stores/useUIStore';
 import { streamPerfMark } from '@/stores/utils/streamDebug';
 import { useSessionUIStore } from '@/sync/session-ui-store';
@@ -30,7 +29,6 @@ type Args = {
   sessionSearchQuery: string;
   setSessionSearchQuery: (value: string) => void;
   setIsSessionSearchOpen: (open: boolean) => void;
-  setActiveMainTab: (tab: MainTab) => void;
   setSessionSwitcherOpen: (open: boolean) => void;
   setCurrentSession: (sessionId: string | null, directoryHint?: string | null) => void;
   updateSessionTitle: (id: string, title: string) => Promise<void>;
@@ -79,7 +77,6 @@ export const useSessionActions = (args: Args) => {
       };
 
       if (args.mobileVariant) {
-        args.setActiveMainTab('chat');
         args.setSessionSwitcherOpen(false);
       }
 
diff --git a/packages/ui/src/components/session/sidebar/hooks/useSessionGrouping.ts b/packages/ui/src/components/session/sidebar/hooks/useSessionGrouping.ts
index c81e23e9..b75ea6dd 100644
--- a/packages/ui/src/components/session/sidebar/hooks/useSessionGrouping.ts
+++ b/packages/ui/src/components/session/sidebar/hooks/useSessionGrouping.ts
@@ -1,3 +1,4 @@
+import { matchesRankQuery } from '@/lib/search/fuzzySearch';
 import React from 'react';
 import type { Session } from '@opencode-ai/sdk/v2';
 import type { WorktreeMetadata } from '@/types/worktree';
@@ -44,7 +45,7 @@ export const useSessionGrouping = (args: Args) => {
       }
 
       return nodes.flatMap((node) => {
-        const nodeMatches = buildSessionSearchText(node.session).includes(query);
+        const nodeMatches = matchesRankQuery([buildSessionSearchText(node.session)], query);
         if (nodeMatches) {
           return [node];
         }
diff --git a/packages/ui/src/components/session/sidebar/hooks/useSessionSidebarSections.ts b/packages/ui/src/components/session/sidebar/hooks/useSessionSidebarSections.ts
index ec53e8f5..90658193 100644
--- a/packages/ui/src/components/session/sidebar/hooks/useSessionSidebarSections.ts
+++ b/packages/ui/src/components/session/sidebar/hooks/useSessionSidebarSections.ts
@@ -1,3 +1,4 @@
+import { matchesRankQuery } from '@/lib/search/fuzzySearch';
 import React from 'react';
 import type { Session } from '@opencode-ai/sdk/v2';
 import type { SessionGroup, SessionNode, GroupSearchData } from '../types';
@@ -161,10 +162,10 @@ export const useSessionSidebarSections = (args: Args) => {
       section.groups.forEach((group) => {
         const filteredNodes = filterSessionNodesForSearch(group.sessions, normalizedSessionSearchQuery);
         const matchedSessionCount = countNodes(filteredNodes);
-        const groupMatches = buildGroupSearchText(group).includes(normalizedSessionSearchQuery);
+        const groupMatches = matchesRankQuery([buildGroupSearchText(group)], normalizedSessionSearchQuery);
         const scopeKey = normalizePath(group.directory ?? null);
         const scopeFolders = scopeKey ? (foldersMap[scopeKey] ?? []) : [];
-        const folderNameMatchCount = scopeFolders.filter((folder) => folder.name.toLowerCase().includes(normalizedSessionSearchQuery)).length;
+        const folderNameMatchCount = scopeFolders.filter((folder) => matchesRankQuery([folder.name], normalizedSessionSearchQuery)).length;
 
         result.set(group, {
           filteredNodes,
diff --git a/packages/ui/src/components/terminal/TerminalViewport.tsx b/packages/ui/src/components/terminal/TerminalViewport.tsx
index 82657445..33d9eded 100644
--- a/packages/ui/src/components/terminal/TerminalViewport.tsx
+++ b/packages/ui/src/components/terminal/TerminalViewport.tsx
@@ -245,6 +245,13 @@ const TerminalViewport = React.forwardRef<TerminalController, Props>(({
       const fitAddon = new module.FitAddon();
       terminal.loadAddon(fitAddon);
       terminal.open(container);
+      // ghostty-web marks the container contenteditable for touch IME input but
+      // sets autocapitalize/autocorrect only on its hidden textarea. Mobile
+      // keyboards (iOS and Android) therefore auto-capitalize the first letter
+      // of every terminal command; disable IME text mangling on the container.
+      container.setAttribute('autocapitalize', 'off');
+      container.setAttribute('autocorrect', 'off');
+      container.setAttribute('spellcheck', 'false');
       terminalRef.current = terminal;
       fitRef.current = fitAddon;
       subscriptions = [terminal.onData((data) => inputRef.current(data))];
diff --git a/packages/ui/src/components/ui/CommandPalette.tsx b/packages/ui/src/components/ui/CommandPalette.tsx
index 2fe8a942..77a111e6 100644
--- a/packages/ui/src/components/ui/CommandPalette.tsx
+++ b/packages/ui/src/components/ui/CommandPalette.tsx
@@ -81,7 +81,6 @@ export const CommandPalette: React.FC = () => {
 
   const isCommandPaletteOpen = useUIStore((s) => s.isCommandPaletteOpen);
   const setCommandPaletteOpen = useUIStore((s) => s.setCommandPaletteOpen);
-  const setActiveMainTab = useUIStore((s) => s.setActiveMainTab);
   const setSettingsDialogOpen = useUIStore((s) => s.setSettingsDialogOpen);
   const setSettingsPage = useUIStore((s) => s.setSettingsPage);
   const setSessionSwitcherOpen = useUIStore((s) => s.setSessionSwitcherOpen);
@@ -170,7 +169,6 @@ export const CommandPalette: React.FC = () => {
         shortcutId: 'new_chat',
         searchText: t('commandPalette.item.newSession'),
         onSelect: run(() => {
-          setActiveMainTab('chat');
           setSessionSwitcherOpen(false);
           openNewSessionDraft();
         }),
@@ -263,8 +261,7 @@ export const CommandPalette: React.FC = () => {
     t,
     run,
     isMobile,
-    setActiveMainTab,
-    setSessionSwitcherOpen,
+        setSessionSwitcherOpen,
     openNewSessionDraft,
     toggleSidebar,
     openContextSurface,
@@ -352,7 +349,7 @@ export const CommandPalette: React.FC = () => {
       return;
     }
     let cancelled = false;
-    void searchFiles(currentRoot, trimmedQuery, 10, { type: 'file' })
+    void searchFiles(currentRoot, trimmedQuery, 40, { type: 'file' })
       .then((results) => {
         if (cancelled) return;
         setFileResults(
diff --git a/packages/ui/src/components/ui/ScrollShadow.tsx b/packages/ui/src/components/ui/ScrollShadow.tsx
index 65b29d68..29414139 100644
--- a/packages/ui/src/components/ui/ScrollShadow.tsx
+++ b/packages/ui/src/components/ui/ScrollShadow.tsx
@@ -1,15 +1,17 @@
 import React from "react";
 
+import { useScrollShadow, type ScrollShadowOrientation, type ScrollShadowVisibility } from "./useScrollShadow";
+
 export type ScrollShadowProps = React.HTMLAttributes<HTMLElement> & {
   as?: React.ElementType;
-  orientation?: "vertical" | "horizontal";
+  orientation?: ScrollShadowOrientation;
   offset?: number;
   size?: number;
   isEnabled?: boolean;
   hideTopShadow?: boolean;
   hideBottomShadow?: boolean;
   observeMutations?: boolean;
-  onVisibilityChange?: (state: "both" | "none" | "top" | "bottom" | "left" | "right") => void;
+  onVisibilityChange?: (state: ScrollShadowVisibility) => void;
 };
 
 function mergeRefs<T>(...refs: Array<React.Ref<T>>): React.RefCallback<T> {
@@ -44,7 +46,6 @@ export const ScrollShadow = React.forwardRef<HTMLElement, ScrollShadowProps>(
     ref,
   ) => {
     const internalRef = React.useRef<HTMLElement>(null);
-    const visibleRef = React.useRef<"both" | "none" | "top" | "bottom" | "left" | "right">("none");
 
     const dataScrollShadow = (rest as Record<string, unknown>)["data-scroll-shadow"];
     delete (rest as Record<string, unknown>)["data-scroll-shadow"];
@@ -57,104 +58,15 @@ export const ScrollShadow = React.forwardRef<HTMLElement, ScrollShadowProps>(
       return next;
     }, [size, style]);
 
-    const setAttributes = React.useCallback(
-      (el: HTMLElement, hasBefore: boolean, hasAfter: boolean, prefix: "top" | "left", suffix: "bottom" | "right") => {
-        const bothKey = `${prefix}${suffix.charAt(0).toUpperCase()}${suffix.slice(1)}Scroll` as const;
-
-        if (hasBefore && hasAfter) {
-          (el.dataset as Record<string, string>)[bothKey] = "true";
-          el.removeAttribute(`data-${prefix}-scroll`);
-          el.removeAttribute(`data-${suffix}-scroll`);
-        } else {
-          el.dataset[`${prefix}Scroll`] = String(hasBefore);
-          el.dataset[`${suffix}Scroll`] = String(hasAfter);
-          el.removeAttribute(`data-${prefix}-${suffix}-scroll`);
-        }
-      },
-      [],
-    );
-
-    const clearAttributes = React.useCallback((el: HTMLElement) => {
-      ["top", "bottom", "top-bottom", "left", "right", "left-right"].forEach((attr) => {
-        el.removeAttribute(`data-${attr}-scroll`);
-      });
-    }, []);
-
-    const checkOverflow = React.useCallback(() => {
-      const el = internalRef.current;
-      if (!el) return;
-
-      if (!isEnabled) {
-        clearAttributes(el);
-        return;
-      }
-
-      // Subpixel tolerance: on hi-DPI (Retina) and with fractional scrollTop,
-      // scrollTop+clientHeight can fall ~0.5px short of scrollHeight at the very end,
-      // which would otherwise keep the bottom fade visible after fully scrolling.
-      const SUBPIXEL_TOLERANCE = 1;
-      const hasBefore =
-        orientation === "vertical"
-          ? el.scrollTop > offset + SUBPIXEL_TOLERANCE
-          : el.scrollLeft > offset + SUBPIXEL_TOLERANCE;
-      let hasAfter =
-        orientation === "vertical"
-          ? el.scrollHeight - (el.scrollTop + el.clientHeight) > offset + SUBPIXEL_TOLERANCE
-          : el.scrollWidth - (el.scrollLeft + el.clientWidth) > offset + SUBPIXEL_TOLERANCE;
-
-      const effectiveHasBefore = hideTopShadow && orientation === "vertical" ? false : hasBefore;
-
-      if (hideBottomShadow && orientation === "vertical") {
-        hasAfter = false;
-      }
-
-      setAttributes(el, effectiveHasBefore, hasAfter, orientation === "vertical" ? "top" : "left", orientation === "vertical" ? "bottom" : "right");
-
-      const next = effectiveHasBefore && hasAfter ? "both" : effectiveHasBefore ? (orientation === "vertical" ? "top" : "left") : hasAfter ? (orientation === "vertical" ? "bottom" : "right") : "none";
-      if (next !== visibleRef.current) {
-        visibleRef.current = next;
-        onVisibilityChange?.(next);
-      }
-    }, [clearAttributes, hideTopShadow, hideBottomShadow, isEnabled, offset, onVisibilityChange, orientation, setAttributes]);
-
-    React.useEffect(() => {
-      const el = internalRef.current;
-      if (!el) return;
-
-      // Throttle with RAF to avoid excessive calls during rapid DOM changes
-      let rafId: number | null = null;
-      const throttledCheck = () => {
-        if (rafId !== null) return;
-        rafId = requestAnimationFrame(() => {
-          rafId = null;
-          checkOverflow();
-        });
-      };
-
-      const handleScroll = () => checkOverflow(); // Scroll should be immediate
-      const resizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver(throttledCheck) : null;
-      const mutationObserver =
-        observeMutations && typeof MutationObserver !== "undefined" ? new MutationObserver(throttledCheck) : null;
-
-      checkOverflow();
-
-      el.addEventListener("scroll", handleScroll, { passive: true });
-      resizeObserver?.observe(el);
-      // checkOverflow mutates our data-scroll attributes; observing attributes
-      // would make the component trigger its own observer indefinitely.
-      mutationObserver?.observe(el, {
-        childList: true,
-        subtree: true,
-        characterData: true,
-      });
-
-      return () => {
-        if (rafId !== null) cancelAnimationFrame(rafId);
-        el.removeEventListener("scroll", handleScroll);
-        resizeObserver?.disconnect();
-        mutationObserver?.disconnect();
-      };
-    }, [checkOverflow, observeMutations]);
+    useScrollShadow(internalRef, {
+      orientation,
+      offset,
+      isEnabled,
+      hideTopShadow,
+      hideBottomShadow,
+      observeMutations,
+      onVisibilityChange,
+    });
 
     return (
       <Component
diff --git a/packages/ui/src/components/ui/commandPaletteFilesState.test.ts b/packages/ui/src/components/ui/commandPaletteFilesState.test.ts
index d542ef73..3c5de7d3 100644
--- a/packages/ui/src/components/ui/commandPaletteFilesState.test.ts
+++ b/packages/ui/src/components/ui/commandPaletteFilesState.test.ts
@@ -16,4 +16,27 @@ describe('commandPaletteFilesState', () => {
     expect(scoreCommandPaletteFiles(fileResults, 'alpha', freshKey, staleKey)).toEqual([]);
     expect(scoreCommandPaletteFiles(fileResults, 'alpha', freshKey, freshKey)).toHaveLength(1);
   });
+
+  test('matches directory segments of the relative path, not just the basename', () => {
+    const fileResults = [
+      { name: 'index.md', path: '/kb/solo-is-a-team-size/index.md', relativePath: 'solo-is-a-team-size/index.md' },
+      { name: 'index.md', path: '/kb/software-developer/index.md', relativePath: 'software-developer/index.md' },
+    ];
+    const key = buildCommandPaletteFileSearchKey('/kb', 'solo-is-a');
+
+    const scored = scoreCommandPaletteFiles(fileResults, 'solo-is-a', key, key);
+    expect(scored).toHaveLength(1);
+    expect(scored[0].item.relativePath).toBe('solo-is-a-team-size/index.md');
+  });
+
+  test('ranks prefix path matches above later substring matches', () => {
+    const fileResults = [
+      { name: 'index.md', path: '/kb/notes/solo/index.md', relativePath: 'notes/solo/index.md' },
+      { name: 'index.md', path: '/kb/solo-is-a-team-size/index.md', relativePath: 'solo-is-a-team-size/index.md' },
+    ];
+    const key = buildCommandPaletteFileSearchKey('/kb', 'solo');
+
+    const scored = scoreCommandPaletteFiles(fileResults, 'solo', key, key);
+    expect(scored[0].item.relativePath).toBe('solo-is-a-team-size/index.md');
+  });
 });
diff --git a/packages/ui/src/components/ui/commandPaletteFilesState.ts b/packages/ui/src/components/ui/commandPaletteFilesState.ts
index ac5a9b15..0ea03770 100644
--- a/packages/ui/src/components/ui/commandPaletteFilesState.ts
+++ b/packages/ui/src/components/ui/commandPaletteFilesState.ts
@@ -11,7 +11,7 @@ export const buildCommandPaletteFileSearchKey = (
   return JSON.stringify([currentRoot, trimmedQuery]);
 };
 
-export const scoreCommandPaletteFiles = <T extends { name: string }>(
+export const scoreCommandPaletteFiles = <T extends { name: string; relativePath: string }>(
   fileResults: T[],
   trimmedQuery: string,
   fileSearchKey: string,
@@ -21,7 +21,9 @@ export const scoreCommandPaletteFiles = <T extends { name: string }>(
     return [];
   }
 
-  return scoreByFuzzyQuery(fileResults, trimmedQuery, (file) => file.name, {
+  // Score against the full relative path: queries like "solo-is-a" must match
+  // solo-is-a-team-size/index.md even though the basename is just index.md.
+  return scoreByFuzzyQuery(fileResults, trimmedQuery, (file) => file.relativePath || file.name, {
     limit: 10,
     threshold: 0.4,
   });
diff --git a/packages/ui/src/components/ui/text.tsx b/packages/ui/src/components/ui/text.tsx
index 48f70e5c..11ebafd2 100644
--- a/packages/ui/src/components/ui/text.tsx
+++ b/packages/ui/src/components/ui/text.tsx
@@ -43,7 +43,11 @@ const variants = [
           {textContent.split("").map((char, index) => (
             <motion.span
               {...props}
-              key={char + String(index)}
+              // Index-only: keying by character remounted every span when
+              // the text mutated (a tool title resolving on completion) and
+              // replayed the whole fade. Same-index spans update in place;
+              // appended characters still mount with the reveal.
+              key={index}
               className={cn(
                 "inline-block whitespace-pre align-baseline"
               )}
diff --git a/packages/ui/src/components/ui/useScrollShadow.ts b/packages/ui/src/components/ui/useScrollShadow.ts
new file mode 100644
index 00000000..d4c2e86d
--- /dev/null
+++ b/packages/ui/src/components/ui/useScrollShadow.ts
@@ -0,0 +1,159 @@
+import React from "react";
+
+// Scroll-shadow state as data attributes on a scroll container.
+//
+// The logic lives in a hook rather than only inside <ScrollShadow> because the
+// chat timeline's scroll container is owned by the virtualized list component,
+// which renders its own element — there is no wrapper to hand the styling to.
+// <ScrollShadow> is a thin wrapper over this hook, so both paths stay in sync.
+
+export type ScrollShadowOrientation = "vertical" | "horizontal";
+export type ScrollShadowVisibility = "both" | "none" | "top" | "bottom" | "left" | "right";
+
+export type UseScrollShadowOptions = {
+  orientation?: ScrollShadowOrientation;
+  offset?: number;
+  isEnabled?: boolean;
+  hideTopShadow?: boolean;
+  hideBottomShadow?: boolean;
+  observeMutations?: boolean;
+  onVisibilityChange?: (state: ScrollShadowVisibility) => void;
+};
+
+const SCROLL_SHADOW_ATTRIBUTES = [
+  "top",
+  "bottom",
+  "top-bottom",
+  "left",
+  "right",
+  "left-right",
+] as const;
+
+const clearScrollShadowAttributes = (el: HTMLElement): void => {
+  SCROLL_SHADOW_ATTRIBUTES.forEach((attr) => {
+    el.removeAttribute(`data-${attr}-scroll`);
+  });
+};
+
+const setScrollShadowAttributes = (
+  el: HTMLElement,
+  hasBefore: boolean,
+  hasAfter: boolean,
+  prefix: "top" | "left",
+  suffix: "bottom" | "right",
+): void => {
+  const bothKey = `${prefix}${suffix.charAt(0).toUpperCase()}${suffix.slice(1)}Scroll` as const;
+
+  if (hasBefore && hasAfter) {
+    (el.dataset as Record<string, string>)[bothKey] = "true";
+    el.removeAttribute(`data-${prefix}-scroll`);
+    el.removeAttribute(`data-${suffix}-scroll`);
+  } else {
+    el.dataset[`${prefix}Scroll`] = String(hasBefore);
+    el.dataset[`${suffix}Scroll`] = String(hasAfter);
+    el.removeAttribute(`data-${prefix}-${suffix}-scroll`);
+  }
+};
+
+export const useScrollShadow = (
+  elementRef: React.RefObject<HTMLElement | null>,
+  {
+    orientation = "vertical",
+    offset = 0,
+    isEnabled = true,
+    hideTopShadow = false,
+    hideBottomShadow = false,
+    observeMutations = true,
+    onVisibilityChange,
+  }: UseScrollShadowOptions = {},
+): void => {
+  const visibleRef = React.useRef<ScrollShadowVisibility>("none");
+
+  const checkOverflow = React.useCallback(() => {
+    const el = elementRef.current;
+    if (!el) return;
+
+    if (!isEnabled) {
+      clearScrollShadowAttributes(el);
+      return;
+    }
+
+    // Subpixel tolerance: on hi-DPI (Retina) and with fractional scrollTop,
+    // scrollTop+clientHeight can fall ~0.5px short of scrollHeight at the very end,
+    // which would otherwise keep the bottom fade visible after fully scrolling.
+    const SUBPIXEL_TOLERANCE = 1;
+    const hasBefore =
+      orientation === "vertical"
+        ? el.scrollTop > offset + SUBPIXEL_TOLERANCE
+        : el.scrollLeft > offset + SUBPIXEL_TOLERANCE;
+    let hasAfter =
+      orientation === "vertical"
+        ? el.scrollHeight - (el.scrollTop + el.clientHeight) > offset + SUBPIXEL_TOLERANCE
+        : el.scrollWidth - (el.scrollLeft + el.clientWidth) > offset + SUBPIXEL_TOLERANCE;
+
+    const effectiveHasBefore = hideTopShadow && orientation === "vertical" ? false : hasBefore;
+
+    if (hideBottomShadow && orientation === "vertical") {
+      hasAfter = false;
+    }
+
+    setScrollShadowAttributes(
+      el,
+      effectiveHasBefore,
+      hasAfter,
+      orientation === "vertical" ? "top" : "left",
+      orientation === "vertical" ? "bottom" : "right",
+    );
+
+    const next: ScrollShadowVisibility = effectiveHasBefore && hasAfter
+      ? "both"
+      : effectiveHasBefore
+        ? (orientation === "vertical" ? "top" : "left")
+        : hasAfter
+          ? (orientation === "vertical" ? "bottom" : "right")
+          : "none";
+    if (next !== visibleRef.current) {
+      visibleRef.current = next;
+      onVisibilityChange?.(next);
+    }
+  }, [elementRef, hideTopShadow, hideBottomShadow, isEnabled, offset, onVisibilityChange, orientation]);
+
+  React.useEffect(() => {
+    const el = elementRef.current;
+    if (!el) return;
+
+    // Throttle with RAF to avoid excessive calls during rapid DOM changes
+    let rafId: number | null = null;
+    const throttledCheck = () => {
+      if (rafId !== null) return;
+      rafId = requestAnimationFrame(() => {
+        rafId = null;
+        checkOverflow();
+      });
+    };
+
+    const handleScroll = () => checkOverflow(); // Scroll should be immediate
+    const resizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver(throttledCheck) : null;
+    const mutationObserver =
+      observeMutations && typeof MutationObserver !== "undefined" ? new MutationObserver(throttledCheck) : null;
+
+    checkOverflow();
+
+    el.addEventListener("scroll", handleScroll, { passive: true });
+    resizeObserver?.observe(el);
+    // checkOverflow mutates our data-scroll attributes; observing attributes
+    // would make the hook trigger its own observer indefinitely.
+    mutationObserver?.observe(el, {
+      childList: true,
+      subtree: true,
+      characterData: true,
+    });
+
+    return () => {
+      if (rafId !== null) cancelAnimationFrame(rafId);
+      el.removeEventListener("scroll", handleScroll);
+      resizeObserver?.disconnect();
+      mutationObserver?.disconnect();
+    };
+  }, [checkOverflow, elementRef, observeMutations]);
+};
diff --git a/packages/ui/src/components/views/ArchiveView.tsx b/packages/ui/src/components/views/ArchiveView.tsx
index b5f6b1c1..01748476 100644
--- a/packages/ui/src/components/views/ArchiveView.tsx
+++ b/packages/ui/src/components/views/ArchiveView.tsx
@@ -1,3 +1,4 @@
+import { rankByQuery } from '@/lib/search/fuzzySearch';
 import React from 'react';
 import type { Session } from '@opencode-ai/sdk/v2';
 import { Icon } from '@/components/icon/Icon';
@@ -27,7 +28,6 @@ export function ArchiveView(): React.ReactNode {
   const { t } = useI18n();
   const open = useUIStore((state) => state.isArchivePageOpen);
   const setOpen = useUIStore((state) => state.setArchivePageOpen);
-  const setActiveMainTab = useUIStore((state) => state.setActiveMainTab);
   const setCurrentSession = useSessionUIStore((state) => state.setCurrentSession);
   const unarchiveSession = useSessionUIStore((state) => state.unarchiveSession);
   const homeDirectory = useDirectoryStore((state) => state.homeDirectory);
@@ -67,7 +67,7 @@ export function ArchiveView(): React.ReactNode {
   // while not searching.
   const filteredSessions = React.useMemo(() => {
     if (normalizedQuery) {
-      return sortedSessions.filter((session) => (session.title ?? '').toLowerCase().includes(normalizedQuery));
+      return rankByQuery(sortedSessions, normalizedQuery, (session) => [session.title]);
     }
     if (selectedDirectory === null) return sortedSessions;
     return buckets.find((bucket) => bucket.directory === selectedDirectory)?.sessions ?? [];
@@ -85,9 +85,8 @@ export function ArchiveView(): React.ReactNode {
   const openSession = React.useCallback((session: Session) => {
     const directory = normalizePath(resolveGlobalSessionDirectory(session));
     setCurrentSession(session.id, directory ?? undefined);
-    setActiveMainTab('chat');
     setOpen(false);
-  }, [setActiveMainTab, setCurrentSession, setOpen]);
+  }, [setCurrentSession, setOpen]);
 
   const restoreSession = React.useCallback((session: Session) => {
     void unarchiveSession(session.id).then((success) => {
diff --git a/packages/ui/src/components/views/DiagramView.tsx b/packages/ui/src/components/views/DiagramView.tsx
deleted file mode 100644
index e2fdd5ad..00000000
--- a/packages/ui/src/components/views/DiagramView.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import React from 'react';
-import { useUIStore } from '@/stores/useUIStore';
-import { useRuntimeAPIs } from '@/hooks/useRuntimeAPIs';
-import { useI18n } from '@/lib/i18n';
-import { DiagramEditor, type DiagramEditorHandle } from '@/components/diagram';
-import { Icon } from '@/components/icon/Icon';
-
-export function DiagramView() {
-  const { t } = useI18n();
-  const { files } = useRuntimeAPIs();
-
-  const [filePath, setFilePath] = React.useState<string | null>(null);
-  const [xml, setXml] = React.useState('');
-  const [loading, setLoading] = React.useState(true);
-  const editorRef = React.useRef<DiagramEditorHandle>(null);
-  const pendingDiagramFile = useUIStore((state) => state.pendingDiagramFile);
-
-  const loadFile = React.useCallback(async (path: string) => {
-    setLoading(true);
-    setFilePath(path);
-    try {
-      const result = await files?.readFile?.(path);
-      if (result) {
-        setXml(result.content);
-      }
-    } catch {
-      setXml('');
-    } finally {
-      setLoading(false);
-    }
-  }, [files]);
-
-  React.useEffect(() => {
-    if (!pendingDiagramFile) {
-      return;
-    }
-    const pending = useUIStore.getState().consumePendingDiagramFile();
-    if (pending) {
-      void loadFile(pending);
-    }
-  }, [loadFile, pendingDiagramFile]);
-
-  const saveDiagram = React.useCallback(async () => {
-    const newXml = editorRef.current?.getXml();
-    if (filePath && files?.writeFile && newXml && newXml !== xml) {
-      await files.writeFile(filePath, newXml);
-      setXml(newXml);
-    }
-  }, [filePath, files, xml]);
-
-  const fileName = filePath ? filePath.split('/').pop() || filePath : '';
-
-  if (!filePath) {
-    return (
-      <div className="flex h-full items-center justify-center p-3">
-        <div className="typography-ui text-muted-foreground">
-          {t('filesView.editor.pickFileFromTree')}
-        </div>
-      </div>
-    );
-  }
-
-  if (loading) {
-    return (
-      <div className="flex h-full items-center justify-center p-3">
-        <Icon name="loader-4" className="size-4 animate-spin" />
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex h-full flex-col">
-      <div className="flex items-center gap-2 border-b border-border/30 px-3 py-1.5">
-        <Icon name="file" className="size-4 shrink-0 text-muted-foreground" />
-        <span className="typography-ui text-muted-foreground truncate flex-1">{fileName}</span>
-        <button
-          type="button"
-          onClick={() => void saveDiagram()}
-          className="size-6 flex items-center justify-center rounded-md text-foreground hover:bg-interactive-hover/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
-          title={t('filesView.diagram.saveDiagram')}
-        >
-          <Icon name="save-3" className="size-4" />
-        </button>
-        <button
-          type="button"
-          onClick={() => useUIStore.getState().setActiveMainTab('chat')}
-          className="size-6 flex items-center justify-center rounded-md text-muted-foreground hover:bg-interactive-hover/50 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
-          title={t('filesView.diagram.closeDiagramView')}
-        >
-          <Icon name="close" className="size-4" />
-        </button>
-      </div>
-      <div className="flex-1 min-h-0">
-        <DiagramEditor
-          ref={editorRef}
-          xml={xml}
-          className="h-full"
-        />
-      </div>
-    </div>
-  );
-}
diff --git a/packages/ui/src/components/views/DiffView.tsx b/packages/ui/src/components/views/DiffView.tsx
index 896208b7..28a15721 100644
--- a/packages/ui/src/components/views/DiffView.tsx
+++ b/packages/ui/src/components/views/DiffView.tsx
@@ -8,6 +8,7 @@ import { coerceDiffScope, branchRangeKey, isBranchScopeAvailable, isBranchScopeD
 import { getBranchBase, getGitRangeDiff, getGitRangeFiles } from '@/lib/gitApi';
 import { getRuntimeKey } from '@/lib/runtime-switch';
 import { cn } from '@/lib/utils';
+import { rankByQuery } from '@/lib/search/fuzzySearch';
 import type { GitStatus, GitRangeFileEntry } from '@/lib/api/types';
 import {
     DropdownMenu,
@@ -1953,12 +1954,11 @@ export const DiffView: React.FC<DiffViewProps> = ({
             }
 
             if (!branchBase) {
-                const searchTerm = basePickerSearch.trim().toLowerCase();
-                const candidateBranches = (branches?.all ?? [])
+                const eligibleBranches = (branches?.all ?? [])
                     .map((name: string) => name.replace(/^remotes\//, ''))
                     .filter((name: string) => name !== currentBranch && !name.endsWith(`/${currentBranch}`))
-                    .filter((name: string) => !searchTerm || name.toLowerCase().includes(searchTerm))
                     .sort();
+                const candidateBranches = rankByQuery(eligibleBranches, basePickerSearch, (name) => [name]);
                 return (
                     <div className="flex flex-1 flex-col items-center justify-center gap-3 px-6 text-center">
                         <Icon name="git-branch" className="size-6 text-muted-foreground" />
diff --git a/packages/ui/src/components/views/FilesView.tsx b/packages/ui/src/components/views/FilesView.tsx
index 05ca0323..43b8e246 100644
--- a/packages/ui/src/components/views/FilesView.tsx
+++ b/packages/ui/src/components/views/FilesView.tsx
@@ -750,8 +750,6 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
   const [wrapLines, setWrapLines] = React.useState(true);
   const [isFullscreen, setIsFullscreen] = React.useState(false);
   const [isSearchOpen, setIsSearchOpen] = React.useState(false);
-  const [isFloatingToolbarOpen, setIsFloatingToolbarOpen] = React.useState(false);
-  const floatingToolbarRef = React.useRef<HTMLDivElement | null>(null);
   const toolbarDropdownOpenCountRef = React.useRef(0);
 
   const handleToolbarDropdownOpenChange = React.useCallback((open: boolean) => {
@@ -761,23 +759,6 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
     );
   }, []);
 
-  const isClickInsidePortalledMenu = React.useCallback((target: EventTarget | null) => {
-    if (!(target instanceof Element)) return false;
-    return target.closest('[data-slot="dropdown-menu-content"], [data-slot="dropdown-menu-item"]') !== null;
-  }, []);
-
-  React.useEffect(() => {
-    if (!isFloatingToolbarOpen) return;
-    const handler = (event: MouseEvent) => {
-      if (toolbarDropdownOpenCountRef.current > 0) return;
-      if (isClickInsidePortalledMenu(event.target)) return;
-      if (floatingToolbarRef.current && !floatingToolbarRef.current.contains(event.target as Node)) {
-        setIsFloatingToolbarOpen(false);
-      }
-    };
-    document.addEventListener('mousedown', handler);
-    return () => document.removeEventListener('mousedown', handler);
-  }, [isClickInsidePortalledMenu, isFloatingToolbarOpen]);
   type TextViewMode = 'view' | 'edit';
   type PreviewViewMode = 'preview' | 'edit';
 
@@ -939,7 +920,6 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
 
   const [confirmDiscardOpen, setConfirmDiscardOpen] = React.useState(false);
   const pendingSelectFileRef = React.useRef<FileNode | null>(null);
-  const pendingTabRef = React.useRef<import('@/stores/useUIStore').MainTab | null>(null);
   const pendingClosePathRef = React.useRef<string | null>(null);
   const skipDirtyOnceRef = React.useRef(false);
   const copiedContentTimeoutRef = React.useRef<number | null>(null);
@@ -1029,7 +1009,6 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
   const [isDragging, setIsDragging] = React.useState(false);
 
   // Session/config for sending comments
-  const setMainTabGuard = useUIStore((state) => state.setMainTabGuard);
   const pendingFileNavigation = useUIStore((state) => state.pendingFileNavigation);
   const setPendingFileNavigation = useUIStore((state) => state.setPendingFileNavigation);
   const pendingFileFocusPath = useUIStore((state) => state.pendingFileFocusPath);
@@ -1038,7 +1017,6 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
   const fileEditorKeymap = useUIStore((state) => state.fileEditorKeymap);
   const settingsDefaultFileViewerPreview = useConfigStore((state) => state.settingsDefaultFileViewerPreview);
   const showMessageTTSButtons = useConfigStore((state) => state.showMessageTTSButtons);
-  const settingsExpandedEditorToolbar = useUIStore((state) => state.expandedEditorToolbar);
 
   // Global mouseup to end drag selection
   React.useEffect(() => {
@@ -1098,10 +1076,9 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
   React.useEffect(() => {
     setLineSelection(null);
     reset();
-    setMainTabGuard(null);
     setDraftContent('');
     setIsSaving(false);
-  }, [selectedFile?.path, reset, setMainTabGuard]);
+  }, [selectedFile?.path, reset]);
 
   React.useEffect(() => {
     setCommentSelection(lineSelection);
@@ -1711,32 +1688,6 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
     }
   }, [contentDetectedBinary, draftContent, fileContent, fileLoading, files, isDirty, loadedFileLineEnding, loadedFilePath, readFileStat, root, selectedFile, t]);
 
-  React.useEffect(() => {
-    if (!isDirty) {
-      setMainTabGuard(null);
-      return;
-    }
-
-    const guard = (_nextTab: import('@/stores/useUIStore').MainTab) => {
-      if (skipDirtyOnceRef.current) {
-        skipDirtyOnceRef.current = false;
-        return true;
-      }
-      setConfirmDiscardOpen(true);
-      pendingTabRef.current = _nextTab;
-      return false;
-    };
-
-    setMainTabGuard(guard);
-
-    return () => {
-      const currentGuard = useUIStore.getState().mainTabGuard;
-      if (currentGuard === guard) {
-        setMainTabGuard(null);
-      }
-    };
-  }, [isDirty, setMainTabGuard]);
-
   React.useEffect(() => {
     if (autoSaveEnabled) {
       return;
@@ -2136,11 +2087,9 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
 
   const discardAndContinue = React.useCallback(() => {
     const nextFile = pendingSelectFileRef.current;
-    const nextTab = pendingTabRef.current;
     const closePath = pendingClosePathRef.current;
 
     pendingSelectFileRef.current = null;
-    pendingTabRef.current = null;
     pendingClosePathRef.current = null;
 
     // Allow one guarded navigation (tab/file) without re-opening dialog.
@@ -2179,15 +2128,10 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
       return;
     }
 
-    if (nextTab) {
-      setMainTabGuard(null);
-      useUIStore.getState().setActiveMainTab(nextTab);
-    }
-  }, [displayedContent, handleSelectFile, isMobile, removeOpenPath, root, selectedFile?.path, setMainTabGuard, setSelectedPath]);
+  }, [displayedContent, handleSelectFile, isMobile, removeOpenPath, root, selectedFile?.path, setSelectedPath]);
 
   const saveAndContinue = React.useCallback(async () => {
     const nextFile = pendingSelectFileRef.current;
-    const nextTab = pendingTabRef.current;
     const closePath = pendingClosePathRef.current;
 
     const saved = await saveDraft();
@@ -2197,7 +2141,6 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
     }
 
     pendingSelectFileRef.current = null;
-    pendingTabRef.current = null;
     pendingClosePathRef.current = null;
 
     // We'll proceed after saving; suppress guard reopening.
@@ -2233,11 +2176,7 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
       return;
     }
 
-    if (nextTab) {
-      setMainTabGuard(null);
-      useUIStore.getState().setActiveMainTab(nextTab);
-    }
-  }, [handleSelectFile, isMobile, removeOpenPath, root, saveDraft, selectedFile?.path, setMainTabGuard, setSelectedPath]);
+  }, [handleSelectFile, isMobile, removeOpenPath, root, saveDraft, selectedFile?.path, setSelectedPath]);
 
   const handleCloseFile = React.useCallback((path: string) => {
     const isActive = selectedFile?.path === path;
@@ -3782,9 +3721,8 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
         </div>
         ) : null}
 
-        {/* Row 2: Docked editor toolbar (expanded). Desktop opt-in; ALWAYS on
-            for mobile — floating hover controls don't work with touch. */}
-        {(settingsExpandedEditorToolbar || isMobile) && selectedFile ? (
+        {/* Row 2: Docked editor toolbar. */}
+        {selectedFile ? (
           <div className="flex min-w-0 items-center gap-3 border-t border-border/40 bg-[var(--surface-subtle)] px-3 py-1">
             {/* Mobile hosts already show the file name in their own header;
                 a truncated duplicate here just eats toolbar width. */}
@@ -3805,69 +3743,6 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
       </div>
 
       <div className="flex-1 min-h-0 min-w-0 relative">
-        {selectedFile && !isSearchOpen && !(settingsExpandedEditorToolbar || isMobile) && (
-          <div
-            ref={floatingToolbarRef}
-            className="absolute right-3 top-3 z-30"
-            onMouseLeave={() => {
-              if (toolbarDropdownOpenCountRef.current > 0) return;
-              setIsFloatingToolbarOpen(false);
-            }}
-          >
-            {isFloatingToolbarOpen ? (
-              renderFloatingFileControls()
-            ) : (
-              <div className="flex items-center gap-1">
-                {isMarkdown ? (
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <span className="inline-flex">
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          onClick={() => saveMdViewMode(getMdViewMode() === 'preview' ? 'edit' : 'preview')}
-                          className={cn(
-                            'size-8 rounded-lg border border-[var(--interactive-border)] bg-[var(--surface-elevated)] p-0 shadow-sm transition-colors',
-                            getMdViewMode() === 'preview'
-                              ? 'bg-[var(--interactive-selection)] text-[var(--interactive-selection-foreground)] hover:bg-[var(--interactive-selection)]'
-                              : 'text-muted-foreground hover:text-foreground'
-                          )}
-                          aria-label={t(getMdViewMode() === 'preview' ? 'filesView.editor.switchToEditMode' : 'filesView.editor.switchToPreviewMode')}
-                          title={t(getMdViewMode() === 'preview' ? 'filesView.editor.switchToEditMode' : 'filesView.editor.switchToPreviewMode')}
-                        >
-                          <Icon name={getMdViewMode() === 'preview' ? 'eye' : 'eye-off'} className="size-4" />
-                        </Button>
-                      </span>
-                    </TooltipTrigger>
-                    <TooltipContent side="bottom" sideOffset={6}>
-                      {t(getMdViewMode() === 'preview' ? 'filesView.editor.switchToEditMode' : 'filesView.editor.switchToPreviewMode')}
-                    </TooltipContent>
-                  </Tooltip>
-                ) : null}
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <span
-                      className="inline-flex"
-                      onMouseEnter={() => setIsFloatingToolbarOpen(true)}
-                    >
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        onClick={() => setIsFloatingToolbarOpen(true)}
-                        className="size-8 rounded-lg border border-[var(--interactive-border)] bg-[var(--surface-elevated)] p-0 text-muted-foreground shadow-sm hover:text-foreground"
-                        aria-label={t('filesView.editor.showControlsAria')}
-                        title={t('filesView.editor.controlsTitle')}
-                      >
-                        <Icon name="more-2-fill" className="size-4" />
-                      </Button>
-                    </span>
-                  </TooltipTrigger>
-                  <TooltipContent side="bottom" sideOffset={6}>{t('filesView.editor.controlsTitle')}</TooltipContent>
-                </Tooltip>
-              </div>
-            )}
-          </div>
-        )}
         <ScrollableOverlay outerClassName="h-full min-w-0" className="h-full min-w-0">
           {!selectedFile ? (
             <div className="p-3 typography-ui text-muted-foreground">{t('filesView.editor.pickFileFromTree')}</div>
diff --git a/packages/ui/src/components/views/GitView.tsx b/packages/ui/src/components/views/GitView.tsx
index 28fcf9f1..008550e6 100644
--- a/packages/ui/src/components/views/GitView.tsx
+++ b/packages/ui/src/components/views/GitView.tsx
@@ -3,6 +3,7 @@ import { useSessionUIStore } from '@/sync/session-ui-store';
 import { useConfigStore } from '@/stores/useConfigStore';
 import { useFireworksCelebration } from '@/contexts/FireworksContext';
 import type { GitIdentityProfile, CommitFileEntry, GitStatus } from '@/lib/api/types';
+import { rankByQuery } from '@/lib/search/fuzzySearch';
 import { useGitIdentitiesStore } from '@/stores/useGitIdentitiesStore';
 import { useShallow } from 'zustand/react/shallow';
 import { useEffectiveDirectory } from '@/hooks/useEffectiveDirectory';
@@ -2585,7 +2586,8 @@ export const GitView: React.FC<GitViewProps> = ({ isActive }) => {
           <DialogHeader className="px-4 pt-4">
             <DialogTitle>{t('gitView.gitmoji.title')}</DialogTitle>
           </DialogHeader>
-          <Command className="h-[420px]">
+          {/* rankByQuery owns filtering/ordering; cmdk must not re-filter. */}
+          <Command className="h-[420px]" shouldFilter={false}>
             <CommandInput
               placeholder={t('gitView.gitmoji.searchPlaceholder')}
               value={gitmojiSearch}
@@ -2594,18 +2596,7 @@ export const GitView: React.FC<GitViewProps> = ({ isActive }) => {
             <CommandList>
               <CommandEmpty>{t('gitView.gitmoji.empty')}</CommandEmpty>
               <CommandGroup>
-                {(gitmojiEmojis.length === 0
-                  ? []
-                  : gitmojiEmojis.filter((entry) => {
-                    const term = gitmojiSearch.trim().toLowerCase();
-                    if (!term) return true;
-                    return (
-                      entry.emoji.includes(term) ||
-                      entry.code.toLowerCase().includes(term) ||
-                      entry.description.toLowerCase().includes(term)
-                    );
-                  })
-                ).map((entry) => (
+                {rankByQuery(gitmojiEmojis, gitmojiSearch, (entry) => [entry.code, entry.description, entry.emoji]).map((entry) => (
                   <CommandItem
                     key={entry.code}
                     onSelect={() => handleSelectGitmoji(entry.emoji, entry.code)}
diff --git a/packages/ui/src/components/views/PlanView.tsx b/packages/ui/src/components/views/PlanView.tsx
index 6efac6d0..24c07aaa 100644
--- a/packages/ui/src/components/views/PlanView.tsx
+++ b/packages/ui/src/components/views/PlanView.tsx
@@ -168,7 +168,6 @@ export const PlanView: React.FC<PlanViewProps> = ({ targetPath = null, projectPl
   const activeProjectId = useProjectsStore((state) => state.activeProjectId);
   const gitDirectories = useGitStore((state) => state.directories);
   const effectiveDirectory = useEffectiveDirectory() ?? '';
-  const setActiveMainTab = useUIStore((state) => state.setActiveMainTab);
   const setSessionSwitcherOpen = useUIStore((state) => state.setSessionSwitcherOpen);
   const runtimeApis = useRuntimeAPIs();
   const { isMobile } = useDeviceInfo();
@@ -579,10 +578,9 @@ export const PlanView: React.FC<PlanViewProps> = ({ targetPath = null, projectPl
   }, []);
 
   const routeToChat = React.useCallback(() => {
-    setActiveMainTab('chat');
     setSessionSwitcherOpen(false);
     onNavigatedToChat?.();
-  }, [onNavigatedToChat, setActiveMainTab, setSessionSwitcherOpen]);
+  }, [onNavigatedToChat, setSessionSwitcherOpen]);
 
   const handleConfirmPlanSend = React.useCallback(
     async (execution: TodoSendExecution) => {
diff --git a/packages/ui/src/components/views/TerminalView.tsx b/packages/ui/src/components/views/TerminalView.tsx
index 2fd4a6fb..21d45de0 100644
--- a/packages/ui/src/components/views/TerminalView.tsx
+++ b/packages/ui/src/components/views/TerminalView.tsx
@@ -58,6 +58,7 @@ export const TerminalView: React.FC<TerminalViewProps> = ({ visible }) => {
     const setActiveTab = useTerminalStore((s) => s.setActiveTab);
     const closeTab = useTerminalStore((s) => s.closeTab);
     const setTabSessionId = useTerminalStore((s) => s.setTabSessionId);
+    const adoptServerSessions = useTerminalStore((s) => s.adoptServerSessions);
     const setTabLifecycle = useTerminalStore((s) => s.setTabLifecycle);
     const setConnecting = useTerminalStore((s) => s.setConnecting);
     const appendToBuffer = useTerminalStore((s) => s.appendToBuffer);
@@ -147,9 +148,7 @@ export const TerminalView: React.FC<TerminalViewProps> = ({ visible }) => {
         terminalControllerRef.current?.focus();
     }, [useTouchTerminalInput]);
 
-    const activeSurface = useUIStore((state) => state.activeSurface);
-    const isTerminalActive = activeSurface === 'terminal';
-    const isTerminalVisible = visible ?? isTerminalActive;
+    const isTerminalVisible = visible ?? false;
     const [hasOpenedTerminalViewport, setHasOpenedTerminalViewport] = React.useState(isTerminalVisible);
 
     React.useEffect(() => {
@@ -176,6 +175,50 @@ export const TerminalView: React.FC<TerminalViewProps> = ({ visible }) => {
         directoryRef.current = effectiveDirectory;
     }, [effectiveDirectory]);
 
+    // The tab list is a per-client projection, so ask the server what actually
+    // exists for this directory and adopt sessions no local tab references
+    // (another device, a fresh browser tab, or a reload with cleared storage).
+    // A failed listing changes nothing: adoption is additive only.
+    React.useEffect(() => {
+        if (!terminalHydrated || !effectiveDirectory || !terminal.listSessions) {
+            return;
+        }
+        let cancelled = false;
+        const directory = effectiveDirectory;
+        void terminal.listSessions(directory)
+            .then((serverSessions) => {
+                if (cancelled || directoryRef.current !== directory) return;
+                adoptServerSessions(directory, serverSessions);
+            })
+            .catch(() => { /* keep local tabs; the next mount or directory switch retries */ });
+        return () => {
+            cancelled = true;
+        };
+    }, [terminalHydrated, effectiveDirectory, terminal, adoptServerSessions]);
+
+    // The server reaps terminals with no attached socket after an idle timeout,
+    // but only the active tab holds an attachment. While this client is open,
+    // periodically mark every session its tabs reference as active so
+    // background tabs (and other directories' terminals) are not reaped.
+    React.useEffect(() => {
+        if (!terminal.touchSessions) {
+            return;
+        }
+        const touch = () => {
+            if (typeof navigator !== 'undefined' && !navigator.onLine) return;
+            const ids: string[] = [];
+            for (const dirState of useTerminalStore.getState().sessions.values()) {
+                for (const tab of dirState.tabs) {
+                    if (tab.terminalSessionId) ids.push(tab.terminalSessionId);
+                }
+            }
+            if (ids.length > 0) void terminal.touchSessions?.(ids).catch(() => {});
+        };
+        touch();
+        const interval = setInterval(touch, 10 * 60 * 1000);
+        return () => clearInterval(interval);
+    }, [terminal]);
+
     React.useEffect(() => {
         if (!showQuickKeys && activeModifier !== null) {
             setActiveModifier(null);
diff --git a/packages/ui/src/components/views/agent-manager/AgentManagerSidebar.tsx b/packages/ui/src/components/views/agent-manager/AgentManagerSidebar.tsx
index def5b964..58565c47 100644
--- a/packages/ui/src/components/views/agent-manager/AgentManagerSidebar.tsx
+++ b/packages/ui/src/components/views/agent-manager/AgentManagerSidebar.tsx
@@ -1,3 +1,4 @@
+import { rankByQuery } from '@/lib/search/fuzzySearch';
 import React from 'react';
 import { toast } from '@/components/ui';
 import { Input } from '@/components/ui/input';
@@ -214,13 +215,10 @@ export const AgentManagerSidebar: React.FC<AgentManagerSidebarProps> = ({
 
   const MAX_VISIBLE = 5;
 
-  const filteredGroups = React.useMemo(() => {
-    if (!searchQuery.trim()) return groups;
-    const query = searchQuery.toLowerCase();
-    return groups.filter(group =>
-      group.name.toLowerCase().includes(query)
-    );
-  }, [searchQuery, groups]);
+  const filteredGroups = React.useMemo(
+    () => rankByQuery(groups, searchQuery, (group) => [group.name]),
+    [searchQuery, groups],
+  );
 
   const visibleGroups = showAll ? filteredGroups : filteredGroups.slice(0, MAX_VISIBLE);
   const remainingCount = filteredGroups.length - MAX_VISIBLE;
diff --git a/packages/ui/src/components/views/git/BranchIntegrationSection.tsx b/packages/ui/src/components/views/git/BranchIntegrationSection.tsx
index 0348d3be..71a330bc 100644
--- a/packages/ui/src/components/views/git/BranchIntegrationSection.tsx
+++ b/packages/ui/src/components/views/git/BranchIntegrationSection.tsx
@@ -26,6 +26,7 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip
 import { Icon } from "@/components/icon/Icon";
 import { cn } from '@/lib/utils';
 import { dropdownTriggerVariants } from '@/components/ui/dropdown-trigger';
+import { rankByQuery } from '@/lib/search/fuzzySearch';
 import { useI18n } from '@/lib/i18n';
 
 type OperationType = 'merge' | 'rebase';
@@ -94,22 +95,19 @@ export const BranchIntegrationSection: React.FC<BranchIntegrationSectionProps> =
 
   // Filter branches based on search
   const filteredLocal = React.useMemo(() => {
-    const term = branchSearch.toLowerCase();
     const remoteBranchNames = new Set(
       remoteBranches
         .map((branch) => branch.slice(branch.indexOf('/') + 1))
         .filter(Boolean)
     );
-    const filtered = localBranches.filter((branch) => branch !== currentBranch && !remoteBranchNames.has(branch));
-    if (!term) return filtered;
-    return filtered.filter((b) => b.toLowerCase().includes(term));
+    const candidates = localBranches.filter((branch) => branch !== currentBranch && !remoteBranchNames.has(branch));
+    return rankByQuery(candidates, branchSearch, (branch) => [branch]);
   }, [branchSearch, localBranches, currentBranch, remoteBranches]);
 
-  const filteredRemote = React.useMemo(() => {
-    const term = branchSearch.toLowerCase();
-    if (!term) return remoteBranches;
-    return remoteBranches.filter((b) => b.toLowerCase().includes(term));
-  }, [branchSearch, remoteBranches]);
+  const filteredRemote = React.useMemo(
+    () => rankByQuery(remoteBranches, branchSearch, (branch) => [branch]),
+    [branchSearch, remoteBranches]
+  );
 
   const resolveDefaultBranch = React.useCallback(() => {
     if (!defaultTargetBranch) return null;
@@ -321,7 +319,8 @@ export const BranchIntegrationSection: React.FC<BranchIntegrationSectionProps> =
             sideOffset={6}
             className="w-[var(--anchor-width)] p-0 max-h-[min(var(--available-height),24rem)] flex flex-col overflow-hidden"
           >
-            <Command className="h-full min-h-0">
+            {/* rankByQuery owns filtering/ordering; cmdk must not re-filter. */}
+            <Command className="h-full min-h-0" shouldFilter={false}>
               <CommandInput
                 ref={searchInputRef}
                 placeholder={t('gitView.branch.searchPlaceholder')}
diff --git a/packages/ui/src/components/views/git/BranchSelector.tsx b/packages/ui/src/components/views/git/BranchSelector.tsx
index 036bc112..f2634ee3 100644
--- a/packages/ui/src/components/views/git/BranchSelector.tsx
+++ b/packages/ui/src/components/views/git/BranchSelector.tsx
@@ -17,6 +17,7 @@ import {
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { Icon } from "@/components/icon/Icon";
 import type { GitRemote } from '@/lib/api/types';
+import { rankByQuery } from '@/lib/search/fuzzySearch';
 import { useI18n } from '@/lib/i18n';
 
 interface BranchInfo {
@@ -78,17 +79,15 @@ export const BranchSelector: React.FC<BranchSelectorProps> = ({
     [newBranchName]
   );
 
-  const filteredLocal = React.useMemo(() => {
-    const term = search.toLowerCase();
-    if (!term) return localBranches;
-    return localBranches.filter((b) => b.toLowerCase().includes(term));
-  }, [search, localBranches]);
+  const filteredLocal = React.useMemo(
+    () => rankByQuery(localBranches, search, (branch) => [branch]),
+    [search, localBranches]
+  );
 
-  const filteredRemote = React.useMemo(() => {
-    const term = search.toLowerCase();
-    if (!term) return remoteBranches;
-    return remoteBranches.filter((b) => b.toLowerCase().includes(term));
-  }, [search, remoteBranches]);
+  const filteredRemote = React.useMemo(
+    () => rankByQuery(remoteBranches, search, (branch) => [branch]),
+    [search, remoteBranches]
+  );
 
   const handleCheckout = (branch: string) => {
     if (branch === currentBranch) {
@@ -184,7 +183,9 @@ export const BranchSelector: React.FC<BranchSelectorProps> = ({
       </Tooltip>
 
       <DropdownMenuContent align="start" className="w-72 p-0 max-h-[60vh] flex flex-col">
-        <Command className="h-full min-h-0">
+        {/* Filtering and ordering are owned by rankByQuery above; cmdk's own
+            filter would re-filter and reorder the already-ranked rows. */}
+        <Command className="h-full min-h-0" shouldFilter={false}>
           <CommandInput
             placeholder={t('gitView.branch.searchPlaceholder')}
             value={search}
diff --git a/packages/ui/src/components/views/git/ConflictDialog.tsx b/packages/ui/src/components/views/git/ConflictDialog.tsx
index bd75bc4e..8c3c3f6e 100644
--- a/packages/ui/src/components/views/git/ConflictDialog.tsx
+++ b/packages/ui/src/components/views/git/ConflictDialog.tsx
@@ -10,7 +10,6 @@ import { Button } from '@/components/ui/button';
 
 import { useSessionUIStore } from '@/sync/session-ui-store';
 import { useInputStore } from '@/sync/input-store';
-import { useUIStore } from '@/stores/useUIStore';
 import { toast } from '@/components/ui';
 import { Icon } from "@/components/icon/Icon";
 import { getConflictDetails, type MergeConflictDetails } from '@/lib/gitApi';
@@ -41,7 +40,6 @@ export const ConflictDialog: React.FC<ConflictDialogProps> = ({
   const currentSessionId = useSessionUIStore((state) => state.currentSessionId);
   const setPendingInputText = useInputStore((state) => state.setPendingInputText);
   const setPendingSyntheticParts = useInputStore((state) => state.setPendingSyntheticParts);
-  const setActiveMainTab = useUIStore((state) => state.setActiveMainTab);
 
   const [isLoading, setIsLoading] = React.useState(false);
   const [conflictDetails, setConflictDetails] = React.useState<MergeConflictDetails | null>(null);
@@ -137,7 +135,6 @@ export const ConflictDialog: React.FC<ConflictDialogProps> = ({
       { text: context.payloadText, synthetic: true },
     ]);
 
-    setActiveMainTab('chat');
     onClearState?.();
     onOpenChange(false);
   };
@@ -159,7 +156,6 @@ export const ConflictDialog: React.FC<ConflictDialogProps> = ({
       ],
     });
     // Navigate to chat tab so user sees the new session
-    setActiveMainTab('chat');
     onClearState?.();
     onOpenChange(false);
   };
diff --git a/packages/ui/src/components/views/git/IntegrateCommitsSection.tsx b/packages/ui/src/components/views/git/IntegrateCommitsSection.tsx
index 428b0b54..f98a48a4 100644
--- a/packages/ui/src/components/views/git/IntegrateCommitsSection.tsx
+++ b/packages/ui/src/components/views/git/IntegrateCommitsSection.tsx
@@ -18,7 +18,7 @@ import { toast } from '@/components/ui';
 import { Icon } from "@/components/icon/Icon";
 import { useSessionUIStore } from '@/sync/session-ui-store';
 import { useInputStore } from '@/sync/input-store';
-import { useUIStore } from '@/stores/useUIStore';
+import { rankByQuery } from '@/lib/search/fuzzySearch';
 import { getGitCommitSummaries } from '@/lib/gitApi';
 import { renderMagicPrompt } from '@/lib/magicPrompts';
 import {
@@ -64,10 +64,15 @@ export const IntegrateCommitsSection: React.FC<{
 }) => {
   const { t } = useI18n();
   const currentSessionId = useSessionUIStore((s) => s.currentSessionId);
-  const setActiveMainTab = useUIStore((s) => s.setActiveMainTab);
   const [branchDropdownOpen, setBranchDropdownOpen] = React.useState(false);
+  const [branchSearch, setBranchSearch] = React.useState('');
   const searchInputRef = React.useRef<HTMLInputElement>(null);
 
+  const filteredBranches = React.useMemo(
+    () => rankByQuery(localBranches, branchSearch, (branch) => [branch]),
+    [localBranches, branchSearch]
+  );
+
   const [targetBranch, setTargetBranch] = React.useState<string>(defaultTargetBranch);
   React.useEffect(() => {
     setTargetBranch(defaultTargetBranch);
@@ -228,8 +233,6 @@ export const IntegrateCommitsSection: React.FC<{
           { text: context.payloadText, synthetic: true },
         ],
       });
-      // Navigate to chat tab so user sees the new session
-      setActiveMainTab('chat');
       return;
     }
 
@@ -244,8 +247,7 @@ export const IntegrateCommitsSection: React.FC<{
       { text: context.instructionsText, synthetic: true },
       { text: context.payloadText, synthetic: true },
     ]);
-    setActiveMainTab('chat');
-  }, [currentSessionId, setActiveMainTab, buildConflictContext, openNewSessionDraft, setPendingInputText, setPendingSyntheticParts, t]);
+  }, [currentSessionId, buildConflictContext, openNewSessionDraft, setPendingInputText, setPendingSyntheticParts, t]);
 
   const handleMove = React.useCallback(async () => {
     if (ui.kind !== 'ready') return;
@@ -380,10 +382,13 @@ export const IntegrateCommitsSection: React.FC<{
                 align="end"
                 className="w-72 p-0 max-h-[var(--available-height)] flex flex-col overflow-hidden"
               >
-                <Command className="h-full min-h-0">
+                {/* rankByQuery owns filtering/ordering; cmdk must not re-filter. */}
+                <Command className="h-full min-h-0" shouldFilter={false}>
                   <CommandInput
                     ref={searchInputRef}
                     placeholder={t('gitView.branch.searchPlaceholder')}
+                    value={branchSearch}
+                    onValueChange={setBranchSearch}
                     onKeyDown={(event) => event.stopPropagation()}
                   />
                   <CommandList
@@ -393,7 +398,7 @@ export const IntegrateCommitsSection: React.FC<{
                   >
                     <CommandEmpty>{t('gitView.branch.empty')}</CommandEmpty>
                     <CommandGroup heading={t('gitView.branch.localBranches')}>
-                      {localBranches.map((branch) => (
+                      {filteredBranches.map((branch) => (
                         <CommandItem
                           key={branch}
                           value={branch}
@@ -401,6 +406,7 @@ export const IntegrateCommitsSection: React.FC<{
                             setTargetBranch(branch);
                             persistTarget(branch);
                             setBranchDropdownOpen(false);
+                            setBranchSearch('');
                           }}
                         >
                           {branch}
diff --git a/packages/ui/src/components/views/git/PullRequestSection.tsx b/packages/ui/src/components/views/git/PullRequestSection.tsx
index 3a258526..1a767916 100644
--- a/packages/ui/src/components/views/git/PullRequestSection.tsx
+++ b/packages/ui/src/components/views/git/PullRequestSection.tsx
@@ -327,7 +327,6 @@ export const PullRequestSection: React.FC<{
   const githubAuthChecked = useGitHubAuthStore((state) => state.hasChecked);
   const setSettingsDialogOpen = useUIStore((state) => state.setSettingsDialogOpen);
   const setSettingsPage = useUIStore((state) => state.setSettingsPage);
-  const setActiveMainTab = useUIStore((state) => state.setActiveMainTab);
   const currentSessionId = useSessionUIStore((state) => state.currentSessionId);
   const newSessionDraftOpen = useSessionUIStore((state) => Boolean(state.newSessionDraft?.open));
   const { isMobile, hasTouchInput, screenWidth } = useDeviceInfo();
@@ -986,14 +985,13 @@ export const PullRequestSection: React.FC<{
           text: '',
         });
       }
-      setActiveMainTab('chat');
     } catch (e) {
       const message = e instanceof Error ? e.message : String(e);
       toast.error(t('gitView.pr.toast.loadChecksFailed'), { description: message });
     } finally {
       setIsAttachingChecks(false);
     }
-  }, [directory, ensurePrContext, github, pr, resolveDraftTarget, setActiveMainTab, status?.repo, t]);
+  }, [directory, ensurePrContext, github, pr, resolveDraftTarget, status?.repo, t]);
 
   const sendCommentsToChat = React.useCallback(async () => {
     if (!github?.prContext) {
@@ -1021,14 +1019,13 @@ export const PullRequestSection: React.FC<{
       for (const comment of timelineComments) {
         attachCommentDraft(target, comment);
       }
-      setActiveMainTab('chat');
     } catch (e) {
       const message = e instanceof Error ? e.message : String(e);
       toast.error(t('gitView.pr.toast.loadPrCommentsFailed'), { description: message });
     } finally {
       setIsAttachingComments(false);
     }
-  }, [attachCommentDraft, directory, ensurePrContext, github, pr, resolveDraftTarget, setActiveMainTab, status?.repo, t, timelineComments]);
+  }, [attachCommentDraft, directory, ensurePrContext, github, pr, resolveDraftTarget, status?.repo, t, timelineComments]);
 
   const sendSingleCommentToChat = React.useCallback(async (comment: TimelineCommentItem) => {
     const target = resolveDraftTarget();
@@ -1037,8 +1034,7 @@ export const PullRequestSection: React.FC<{
     }
 
     attachCommentDraft(target, comment);
-    setActiveMainTab('chat');
-  }, [attachCommentDraft, resolveDraftTarget, setActiveMainTab]);
+  }, [attachCommentDraft, resolveDraftTarget]);
 
   const refresh = React.useCallback(async (options?: { force?: boolean; onlyExistingPr?: boolean; silent?: boolean; markInitialResolved?: boolean }) => {
     await refreshPrStatus(prStatusKey, options);
diff --git a/packages/ui/src/components/views/git/StashesDialog.tsx b/packages/ui/src/components/views/git/StashesDialog.tsx
index 979a6fa4..b3753e82 100644
--- a/packages/ui/src/components/views/git/StashesDialog.tsx
+++ b/packages/ui/src/components/views/git/StashesDialog.tsx
@@ -1,3 +1,4 @@
+import { rankByQuery } from '@/lib/search/fuzzySearch';
 import React from 'react';
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
@@ -69,11 +70,10 @@ export const StashesDialog: React.FC<StashesDialogProps> = ({
     };
   }, [directory, open, stashes]);
 
-  const filtered = React.useMemo(() => {
-    const normalized = query.trim().toLowerCase();
-    if (!normalized) return stashes;
-    return stashes.filter((stash) => `${stash.ref} ${stash.message} ${stash.relativeTime}`.toLowerCase().includes(normalized));
-  }, [query, stashes]);
+  const filtered = React.useMemo(
+    () => rankByQuery(stashes, query, (stash) => [stash.message, stash.ref, stash.relativeTime]),
+    [query, stashes],
+  );
 
   const refreshAfterChange = React.useCallback(async (change?: { affectsIndex?: boolean }) => {
     await load();
diff --git a/packages/ui/src/contexts/DrawerContext.tsx b/packages/ui/src/contexts/DrawerContext.tsx
deleted file mode 100644
index 3eafe4f3..00000000
--- a/packages/ui/src/contexts/DrawerContext.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react';
-import type { MotionValue } from 'motion/react';
-
-export interface DrawerContextValue {
-    leftDrawerOpen: boolean;
-    rightDrawerOpen: boolean;
-    toggleLeftDrawer: () => void;
-    toggleRightDrawer: () => void;
-    // Motion values for real-time drawer dragging
-    leftDrawerX: MotionValue<number>;
-    rightDrawerX: MotionValue<number>;
-    leftDrawerWidth: React.MutableRefObject<number>;
-    rightDrawerWidth: React.MutableRefObject<number>;
-    setMobileLeftDrawerOpen: (open: boolean) => void;
-    setRightSidebarOpen: (open: boolean) => void;
-}
-
-const DrawerContext = React.createContext<DrawerContextValue | null>(null);
-
-export const DrawerProvider: React.FC<{
-    children: React.ReactNode;
-    value: DrawerContextValue;
-}> = ({ children, value }) => {
-    return (
-        <DrawerContext.Provider value={value}>
-            {children}
-        </DrawerContext.Provider>
-    );
-};
diff --git a/packages/ui/src/hooks/useChatAutoFollow.ts b/packages/ui/src/hooks/useChatAutoFollow.ts
deleted file mode 100644
index 7bfc13ca..00000000
--- a/packages/ui/src/hooks/useChatAutoFollow.ts
+++ /dev/null
@@ -1,938 +0,0 @@
-import React from 'react';
-
-import { MessageFreshnessDetector } from '@/lib/messageFreshness';
-import { createScrollSpy } from '@/components/chat/lib/scroll/scrollSpy';
-import { useViewportStore } from '@/sync/viewport-store';
-
-type AutoFollowState = 'following' | 'released';
-
-export type ContentChangeReason = 'text' | 'structural' | 'permission' | 'animation';
-
-export interface AnimationHandlers {
-    onChunk: () => void;
-    onComplete: () => void;
-    onStreamingCandidate?: () => void;
-    onAnimationStart?: () => void;
-    onReservationCancelled?: () => void;
-    onReasoningBlock?: () => void;
-    onAnimatedHeightChange?: (height: number) => void;
-}
-
-interface UseChatAutoFollowOptions {
-    currentSessionId: string | null;
-    currentSessionKey: string | null;
-    sessionMessageCount: number;
-    sessionIsWorking: boolean;
-    isMobile: boolean;
-    onActiveTurnChange?: (turnId: string | null) => void;
-}
-
-export interface UseChatAutoFollowResult {
-    scrollRef: React.RefObject<HTMLDivElement | null>;
-    state: AutoFollowState;
-    isPinned: boolean;
-    isOverflowing: boolean;
-    isFollowingProgrammatically: boolean;
-    showScrollButton: boolean;
-    notifyContentChange: (reason?: ContentChangeReason) => void;
-    getAnimationHandlers: (messageId: string) => AnimationHandlers;
-    goToBottom: (mode?: 'instant' | 'smooth') => void;
-    scrollToBottomOnSend: () => void;
-    releaseAutoFollow: () => void;
-    saveSnapshotNow: () => void;
-    restoreSnapshot: () => Promise<boolean>;
-}
-
-// ──────────────────────────────────────────────────────────────────────────
-// Chat auto-follow. The model is deliberately simple, which is what makes it
-// flicker-free:
-//
-//   • Auto-follow is on unless the user scrolled up (`released`), AND passive
-//     following only acts while the session is active (working, plus a short
-//     settle window). When idle, content-size changes are layout churn
-//     (virtualizer re-measurement, async tool/code rendering) rather than live
-//     growth, so the hook leaves scroll alone — re-pinning then would fight the
-//     virtualizer and twitch the viewport.
-//   • Following the bottom is INSTANT — `scrollTop = scrollHeight` inside the
-//     content ResizeObserver, which fires after layout and before paint. There
-//     is NO easing loop and NO settle burst, so there are never two writers
-//     racing for `scrollTop` (the root cause of the old jiggle/double-scroll).
-//   • A short-lived "auto" marker (position + 1500ms) lets the scroll handler
-//     distinguish our own programmatic writes from genuine user scrolling, so
-//     a scroll event that lands at our just-written bottom never trips a false
-//     release.
-//
-// The public interface below is unchanged from the old implementation so every
-// consumer (ChatContainer, message parts, the timeline controller) keeps
-// working without edits.
-// ──────────────────────────────────────────────────────────────────────────
-
-const BOTTOM_SPACER_DESKTOP_VH = 0.10;
-const BOTTOM_SPACER_MOBILE_PX = 40;
-const SAVE_DEBOUNCE_MS = 150;
-const TOUCH_FINGER_DOWN_THRESHOLD = 2;
-// How long an "auto" (programmatic) scroll position stays trusted. Browsers can
-// dispatch the `scroll` event for our write asynchronously, after newer content
-// has already changed the geometry; the window keeps us from reading that lag as
-// a user scroll.
-const AUTO_MARK_TTL_MS = 1500;
-const AUTO_MATCH_TOLERANCE_PX = 2;
-// While a tracked height animation runs (e.g. a Thinking block auto-collapsing
-// mid-stream), the timeline shrinks/grows over a couple hundred ms and the
-// virtualizer re-measures, producing transient geometry. Browsers dispatch the
-// resulting `scroll` events asynchronously, so a stale event can land after we
-// have already re-pinned — its position matching neither the bottom zone nor the
-// freshly-moved auto marker — and be misread as a user scroll-away. During this
-// guard window we treat any `following`-state scroll event as our own and never
-// release via the heuristic. GENUINE user gestures still release instantly
-// through releaseFromUserIntent, so this is not glue. Sized to the reasoning
-// animation (200ms) plus headroom for trailing async scroll events.
-const ANIMATION_GUARD_MS = 350;
-// After streaming stops, keep following the bottom for a short window so the
-// final content can settle into place.
-const SETTLE_MS = 300;
-// Entry-stick window. On the FIRST open of a session, late async data (most
-// visibly a task/subagent tool whose nested rows are fetched from the child
-// session after entry — see useEnsureSessionMessages in ToolPart.tsx) grows the
-// timeline a beat or two AFTER we have already pinned to the bottom, leaving the
-// viewport stranded mid-history. The steady-state idle gate deliberately ignores
-// that growth (it can't tell entry from a user reading idle history). So instead
-// of weakening the gate, we open a short, gesture-cancellable window on entry
-// during which we FORCE the bottom on every growth. It ends QUIESCENCE_MS after
-// growth stops (capped by MAX_MS), or instantly on any real user scroll gesture.
-const ENTRY_STICK_QUIESCENCE_MS = 600;
-const ENTRY_STICK_MAX_MS = 8000;
-
-const now = (): number => (typeof performance !== 'undefined' ? performance.now() : Date.now());
-
-// The bottom of the chat has an empty spacer (10vh on desktop, 40px on mobile)
-// — its height is exactly how far above scrollHeight the user can be while still
-// looking at "empty" space. We use that same value as the threshold for both
-// re-pinning auto-follow and showing the scroll-to-bottom button.
-const computeBottomZoneThreshold = (isMobile: boolean, container?: HTMLElement | null): number => {
-    if (isMobile) return BOTTOM_SPACER_MOBILE_PX;
-    const height = container?.clientHeight ?? 0;
-    if (height <= 0) return 96;
-    return Math.max(48, height * BOTTOM_SPACER_DESKTOP_VH);
-};
-
-const distanceFromBottom = (el: HTMLElement): number => {
-    return el.scrollHeight - el.scrollTop - el.clientHeight;
-};
-
-const canScroll = (el: HTMLElement): boolean => {
-    return el.scrollHeight - el.clientHeight > 1;
-};
-
-const isNearBottom = (el: HTMLElement, isMobile: boolean): boolean => {
-    return distanceFromBottom(el) <= computeBottomZoneThreshold(isMobile, el);
-};
-
-const isReleaseKey = (event: KeyboardEvent): boolean => {
-    if (event.altKey || event.ctrlKey || event.metaKey) {
-        return false;
-    }
-    switch (event.key) {
-        case 'ArrowUp':
-        case 'PageUp':
-        case 'Home':
-            return true;
-        default:
-            return false;
-    }
-};
-
-const nestedScrollableTarget = (root: HTMLElement, target: EventTarget | null): HTMLElement | null => {
-    if (!(target instanceof Element)) return null;
-    const nested = target.closest('[data-scrollable]');
-    if (!nested || nested === root || !(nested instanceof HTMLElement)) return null;
-    return nested;
-};
-
-const nestedScrollableCanConsumeUp = (root: HTMLElement, target: EventTarget | null): boolean => {
-    const nested = nestedScrollableTarget(root, target);
-    if (!nested) return false;
-    return nested.scrollTop > 0;
-};
-
-export const useChatAutoFollow = ({
-    currentSessionId,
-    currentSessionKey,
-    sessionMessageCount,
-    sessionIsWorking,
-    isMobile,
-    onActiveTurnChange,
-}: UseChatAutoFollowOptions): UseChatAutoFollowResult => {
-    const scrollRef = React.useRef<HTMLDivElement | null>(null);
-    const [containerEl, setContainerEl] = React.useState<HTMLDivElement | null>(null);
-    const lastSeenContainerRef = React.useRef<HTMLDivElement | null>(null);
-
-    const [state, setState] = React.useState<AutoFollowState>('following');
-    const [isOverflowing, setIsOverflowing] = React.useState(false);
-    const [showScrollButton, setShowScrollButton] = React.useState(false);
-    const [isFollowingProgrammatically, setIsFollowingProgrammatically] = React.useState(false);
-
-    // `stateRef` is the single source of truth for follow vs released; the React
-    // state above is a mirror for rendering. `released` means the user scrolled
-    // up and away from the bottom.
-    const stateRef = React.useRef<AutoFollowState>('following');
-    const isMobileRef = React.useRef(isMobile);
-    isMobileRef.current = isMobile;
-    const sessionIsWorkingRef = React.useRef(sessionIsWorking);
-    sessionIsWorkingRef.current = sessionIsWorking;
-    // `settling` keeps passive follow alive for a short window after work stops
-    // so the final content can land at the bottom.
-    const settlingRef = React.useRef(false);
-    const settleTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
-    const sessionMessageCountRef = React.useRef(sessionMessageCount);
-    sessionMessageCountRef.current = sessionMessageCount;
-    const currentSessionIdRef = React.useRef(currentSessionId);
-    currentSessionIdRef.current = currentSessionId;
-    const currentSessionKeyRef = React.useRef(currentSessionKey);
-    currentSessionKeyRef.current = currentSessionKey;
-
-    const lastSessionKeyRef = React.useRef<string | null>(null);
-
-    // Programmatic-scroll marker: the bottom position we last
-    // wrote and when. A scroll event whose scrollTop matches `top` within a few
-    // px while still inside the TTL is OUR write, not the user's.
-    const autoRef = React.useRef<{ top: number; time: number } | null>(null);
-    const autoTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
-
-    // Timestamp until which a tracked height animation is in flight (see
-    // ANIMATION_GUARD_MS). 0 = no animation guard active.
-    const animationGuardUntilRef = React.useRef(0);
-
-    // True while the native (Capacitor iOS) keyboard slide choreography is in
-    // flight (between 'oc:keyboard-anim' and 'oc:keyboard-settled' from
-    // useNativeMobileChrome). During that window the pinned content is moved by a
-    // transform on the inner wrapper, so the ResizeObserver chase must stand down.
-    const keyboardAnimRef = React.useRef(false);
-
-    // Last observed scrollTop, used to derive scroll DIRECTION in the scroll
-    // handler so the bottom-zone re-engage only fires when arriving at the bottom
-    // by scrolling down — never when a user scrolling UP merely lands in the zone.
-    const lastScrollTopRef = React.useRef(0);
-
-    // Entry-stick window state (see ENTRY_STICK_* above).
-    const entryStickRef = React.useRef(false);
-    const entryStickQuietTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
-    const entryStickCapTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
-    const entryStickLastHeightRef = React.useRef(0);
-
-    const saveTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
-    const pendingSaveRef = React.useRef<{ sessionId: string; anchor: number } | null>(null);
-    // When restoreSnapshot is invoked while ChatViewport is still hydrating
-    // (skeleton rendered, no scroll container yet), we record the session here
-    // so a follow-up effect can replay the restore once the container mounts.
-    const pendingInitialRestoreRef = React.useRef<string | null>(null);
-
-    const updateViewportAnchor = useViewportStore((s) => s.updateViewportAnchor);
-
-    // Detect when the scroll container DOM element changes (mount, unmount, remount).
-    // Without this, listener-attach effects would only ever bind to the element that
-    // existed at the hook's first render, missing later mounts (e.g. after first send
-    // promotes a draft session to a real chat with messages).
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    React.useLayoutEffect(() => {
-        if (scrollRef.current !== lastSeenContainerRef.current) {
-            lastSeenContainerRef.current = scrollRef.current;
-            setContainerEl(scrollRef.current);
-        }
-    });
-
-    // `active` is `working || settling`. Passive auto-follow
-    // (the ResizeObserver re-pin and any non-forced scrollToBottom) only runs
-    // while active. When the session is idle, content-size changes are layout
-    // churn — virtualizer re-measurement, async tool/code rendering — NOT live
-    // growth, so we must NOT yank the user to the bottom. Forcing this gate is
-    // what stops the twitch when tall items (expanded tools) re-measure as the
-    // user scrolls.
-    const isActive = React.useCallback((): boolean => {
-        return sessionIsWorkingRef.current || settlingRef.current;
-    }, []);
-
-    const setStateValue = React.useCallback((next: AutoFollowState) => {
-        if (stateRef.current === next) return;
-        stateRef.current = next;
-        setState(next);
-    }, []);
-
-    // ── auto marker ────────────────────────────────────────────────────────
-    const markAuto = React.useCallback((el: HTMLElement) => {
-        autoRef.current = {
-            top: Math.max(0, el.scrollHeight - el.clientHeight),
-            time: now(),
-        };
-        if (autoTimerRef.current) clearTimeout(autoTimerRef.current);
-        autoTimerRef.current = setTimeout(() => {
-            autoRef.current = null;
-            autoTimerRef.current = null;
-        }, AUTO_MARK_TTL_MS);
-    }, []);
-
-    const isAuto = React.useCallback((el: HTMLElement): boolean => {
-        const a = autoRef.current;
-        if (!a) return false;
-        if (now() - a.time > AUTO_MARK_TTL_MS) {
-            autoRef.current = null;
-            return false;
-        }
-        return Math.abs(el.scrollTop - a.top) < AUTO_MATCH_TOLERANCE_PX;
-    }, []);
-
-    const isAnimationGuardActive = React.useCallback((): boolean => {
-        return now() < animationGuardUntilRef.current;
-    }, []);
-
-    // ── entry-stick window ───────────────────────────────────────────────────
-    const endEntryStick = React.useCallback(() => {
-        entryStickRef.current = false;
-        if (entryStickQuietTimerRef.current) {
-            clearTimeout(entryStickQuietTimerRef.current);
-            entryStickQuietTimerRef.current = null;
-        }
-        if (entryStickCapTimerRef.current) {
-            clearTimeout(entryStickCapTimerRef.current);
-            entryStickCapTimerRef.current = null;
-        }
-    }, []);
-
-    // (Re)arm the quiescence timer: the window closes this long after the last
-    // growth. Called once on begin and again on every growth-driven re-pin.
-    const armEntryStickQuiet = React.useCallback(() => {
-        if (entryStickQuietTimerRef.current) {
-            clearTimeout(entryStickQuietTimerRef.current);
-        }
-        entryStickQuietTimerRef.current = setTimeout(() => {
-            entryStickQuietTimerRef.current = null;
-            endEntryStick();
-        }, ENTRY_STICK_QUIESCENCE_MS);
-    }, [endEntryStick]);
-
-    const beginEntryStick = React.useCallback(() => {
-        const el = scrollRef.current;
-        if (!el) return;
-        entryStickRef.current = true;
-        entryStickLastHeightRef.current = el.scrollHeight;
-        armEntryStickQuiet();
-        // Reset the absolute cap fresh on every entry (e.g. session switch) so a
-        // stale cap from a previous open can't cut this window short.
-        if (entryStickCapTimerRef.current) {
-            clearTimeout(entryStickCapTimerRef.current);
-        }
-        entryStickCapTimerRef.current = setTimeout(() => {
-            entryStickCapTimerRef.current = null;
-            endEntryStick();
-        }, ENTRY_STICK_MAX_MS);
-    }, [armEntryStickQuiet, endEntryStick]);
-
-    // ── overflow / scroll-to-bottom button ──────────────────────────────────
-    const updateOverflowAndButton = React.useCallback(() => {
-        const container = scrollRef.current;
-        if (!container) {
-            setIsOverflowing(false);
-            setShowScrollButton(false);
-            return;
-        }
-        const overflowing = canScroll(container);
-        setIsOverflowing(overflowing);
-        if (!overflowing) {
-            setShowScrollButton(false);
-            return;
-        }
-        const showButton = stateRef.current === 'released' && !isNearBottom(container, isMobileRef.current);
-        setShowScrollButton(showButton);
-    }, []);
-
-    // ── core scroll primitives ───────────────────────────────────────────────
-    const scrollToBottomNow = React.useCallback((behavior: ScrollBehavior) => {
-        const el = scrollRef.current;
-        if (!el) return;
-        markAuto(el);
-        // `scrollHeight` is rounded to an integer while the real content height
-        // is fractional (prose line-heights), so `scrollTop = scrollHeight`
-        // leaves a 0–1px remainder that oscillates per streamed token and makes
-        // bottom-anchored rows jitter vertically. An over-large target clamps to
-        // the exact fractional maximum instead, pinning content to the bottom.
-        const overshootTarget = el.scrollHeight + 4096;
-        if (behavior === 'smooth') {
-            el.scrollTo({ top: overshootTarget, behavior });
-            return;
-        }
-        // Direct `scrollTop` assignment bypasses any CSS `scroll-behavior: smooth`
-        // and lands in the same frame — no visible catch-up animation.
-        el.scrollTop = overshootTarget;
-    }, [markAuto]);
-
-    // `force` true = user-intent jump (clears released and always scrolls).
-    // `force` false = passive follow (only while still following).
-    const scrollToBottom = React.useCallback((force: boolean, behavior: ScrollBehavior = 'auto') => {
-        const el = scrollRef.current;
-
-        // Passive follow only while active (working/settling). Forced jumps
-        // (send, go-to-bottom, session restore) always proceed.
-        if (!force && !isActive()) return;
-
-        if (force && stateRef.current !== 'following') {
-            setStateValue('following');
-        }
-        if (!el) return;
-        if (!force && stateRef.current !== 'following') return;
-
-        // Always re-pin, even when already within tolerance of the bottom.
-        // Sub-tolerance growth (fractional line-height remainders) would
-        // otherwise leave the bottom drifting by up to ±AUTO_MATCH_TOLERANCE_PX
-        // between full re-pins, which reads as 1px vertical jitter on
-        // bottom-anchored rows during streaming. The write happens pre-paint
-        // (ResizeObserver) and is a no-op when the position is unchanged.
-        scrollToBottomNow(force ? behavior : 'auto');
-    }, [isActive, scrollToBottomNow, setStateValue]);
-
-    // User left the bottom — release auto-follow.
-    const stop = React.useCallback(() => {
-        const el = scrollRef.current;
-        if (!el) return;
-        if (!canScroll(el)) {
-            setStateValue('following');
-            return;
-        }
-        if (stateRef.current === 'released') return;
-        setStateValue('released');
-        updateOverflowAndButton();
-    }, [setStateValue, updateOverflowAndButton]);
-
-    // ── public scroll API (mapped onto the primitives) ───────────────────────
-    const goToBottom = React.useCallback((mode: 'instant' | 'smooth' = 'instant') => {
-        scrollToBottom(true, mode === 'smooth' ? 'smooth' : 'auto');
-    }, [scrollToBottom]);
-
-    const scrollToBottomOnSend = React.useCallback(() => {
-        // Single movement to the just-sent message. Force re-pins to the bottom
-        // whether we were following or scrolled up; the content ResizeObserver
-        // keeps us pinned as the optimistic message and its reply stream in.
-        scrollToBottom(true);
-    }, [scrollToBottom]);
-
-    const releaseAutoFollow = React.useCallback(() => {
-        setStateValue('released');
-        updateOverflowAndButton();
-    }, [setStateValue, updateOverflowAndButton]);
-
-    const releaseFromUserIntent = React.useCallback(() => {
-        // A genuine user gesture (wheel/touch/key/scrollbar) cancels the entry
-        // window immediately so we never fight the user's read position.
-        endEntryStick();
-        stop();
-    }, [endEntryStick, stop]);
-
-    // ── per-session snapshot persistence (kept; restore still goes to bottom) ─
-    const flushSave = React.useCallback(() => {
-        if (saveTimerRef.current !== null) {
-            clearTimeout(saveTimerRef.current);
-            saveTimerRef.current = null;
-        }
-        const pending = pendingSaveRef.current;
-        if (!pending) return;
-        const container = scrollRef.current;
-        if (!container) {
-            pendingSaveRef.current = null;
-            return;
-        }
-        updateViewportAnchor(pending.sessionId, pending.anchor, {
-            scrollTop: container.scrollTop,
-            scrollHeight: container.scrollHeight,
-            clientHeight: container.clientHeight,
-        });
-        pendingSaveRef.current = null;
-    }, [updateViewportAnchor]);
-
-    const queueSave = React.useCallback(() => {
-        const sessionId = currentSessionIdRef.current;
-        if (!sessionId) return;
-        const container = scrollRef.current;
-        if (!container) return;
-
-        const { scrollTop, scrollHeight, clientHeight } = container;
-        const anchorRatio = scrollHeight > 0
-            ? (scrollTop + clientHeight / 2) / scrollHeight
-            : 0;
-        const anchor = Math.floor(anchorRatio * sessionMessageCountRef.current);
-
-        pendingSaveRef.current = { sessionId, anchor };
-        if (saveTimerRef.current !== null) return;
-        saveTimerRef.current = setTimeout(() => {
-            saveTimerRef.current = null;
-            flushSave();
-        }, SAVE_DEBOUNCE_MS);
-    }, [flushSave]);
-
-    const saveSnapshotNow = React.useCallback(() => {
-        flushSave();
-    }, [flushSave]);
-
-    const restoreSnapshot = React.useCallback(async (): Promise<boolean> => {
-        const sessionKey = currentSessionKeyRef.current;
-        if (!sessionKey) return false;
-
-        const container = scrollRef.current;
-        if (!container) {
-            // ChatViewport not mounted yet (e.g., session still hydrating).
-            // Record the request so the container-attach effect can replay it.
-            pendingInitialRestoreRef.current = sessionKey;
-            setStateValue('following');
-            return false;
-        }
-        pendingInitialRestoreRef.current = null;
-
-        // Always return to the bottom on session switch. The content
-        // ResizeObserver re-pins instantly as late
-        // history measures in, so there is no smooth scroll-from-mid artifact.
-        setStateValue('following');
-        scrollToBottom(true);
-        // Hold the bottom across late async growth (e.g. task/subagent child
-        // session data landing a beat after entry) until content quiesces or the
-        // user scrolls.
-        beginEntryStick();
-        updateOverflowAndButton();
-        return false;
-    }, [beginEntryStick, scrollToBottom, setStateValue, updateOverflowAndButton]);
-
-    // ── session change ───────────────────────────────────────────────────────
-    React.useEffect(() => {
-        if (!currentSessionId || !currentSessionKey || currentSessionKey === lastSessionKeyRef.current) {
-            return;
-        }
-        lastSessionKeyRef.current = currentSessionKey;
-        MessageFreshnessDetector.getInstance().recordSessionStart(currentSessionId);
-        flushSave();
-        autoRef.current = null;
-        // Drop any pending restore request inherited from a different session.
-        if (pendingInitialRestoreRef.current && pendingInitialRestoreRef.current !== currentSessionKey) {
-            pendingInitialRestoreRef.current = null;
-        }
-    }, [currentSessionId, currentSessionKey, flushSave]);
-
-    // When work begins and we are still
-    // following, pin to the bottom. When work stops, keep following alive for a
-    // short settle window so the final content lands at the bottom, then go
-    // idle (after which passive follow is disabled — see `isActive`).
-    React.useEffect(() => {
-        settlingRef.current = false;
-        if (settleTimerRef.current) {
-            clearTimeout(settleTimerRef.current);
-            settleTimerRef.current = null;
-        }
-
-        if (sessionIsWorking) {
-            if (stateRef.current === 'following') {
-                scrollToBottom(true);
-            }
-            return;
-        }
-
-        settlingRef.current = true;
-        settleTimerRef.current = setTimeout(() => {
-            settlingRef.current = false;
-            settleTimerRef.current = null;
-        }, SETTLE_MS);
-    }, [sessionIsWorking, scrollToBottom]);
-
-    // Suppress the overlay scrollbar thumb only while we are actively following a
-    // live stream (the thumb would otherwise jump on every instant re-pin). When
-    // idle or released the scrollbar behaves normally. Stable: changes only when
-    // follow-state or working-state flips, not on every frame.
-    React.useEffect(() => {
-        setIsFollowingProgrammatically(state === 'following' && sessionIsWorking);
-    }, [state, sessionIsWorking]);
-
-    // Replay a deferred restoreSnapshot once ChatViewport mounts.
-    // useLayoutEffect ensures scroll position is set before the browser paints,
-    // preventing a visible flash of content at the wrong scroll position.
-    React.useLayoutEffect(() => {
-        if (!containerEl) return;
-        if (pendingInitialRestoreRef.current && pendingInitialRestoreRef.current === currentSessionKey) {
-            void restoreSnapshot();
-        }
-    }, [containerEl, currentSessionKey, restoreSnapshot]);
-
-    // ── scroll event handling ────────────────────────────────────────────────
-    const handleScrollEvent = React.useCallback(() => {
-        const el = scrollRef.current;
-        if (!el) return;
-
-        const previousTop = lastScrollTopRef.current;
-        lastScrollTopRef.current = el.scrollTop;
-        const scrollingDown = el.scrollTop > previousTop + 0.5;
-
-        updateOverflowAndButton();
-
-        if (!canScroll(el)) {
-            setStateValue('following');
-            return;
-        }
-
-        // Within the bottom zone → (re-)pin to following. This is how scrolling
-        // back DOWN to the bottom resumes auto-follow. Crucially, re-engage only
-        // when the user arrives by scrolling down (or is already following, or is
-        // essentially at the true bottom). A user scrolling UP that merely lands
-        // in the bottom spacer zone must NOT be yanked back into follow — that is
-        // the dead-zone fight that made small upward scrolls impossible while
-        // content streams.
-        if (isNearBottom(el, isMobileRef.current)) {
-            const atTrueBottom = distanceFromBottom(el) <= AUTO_MATCH_TOLERANCE_PX;
-            if (scrollingDown || stateRef.current === 'following' || atTrueBottom) {
-                setStateValue('following');
-            }
-            queueSave();
-            return;
-        }
-
-        // Our own geometry change (a programmatic write that landed at the bottom
-        // but where content grew between the write and this event, OR a tracked
-        // height animation in flight) — keep following, don't release.
-        if (stateRef.current === 'following' && (isAuto(el) || isAnimationGuardActive())) {
-            scrollToBottom(false);
-            queueSave();
-            return;
-        }
-
-        // Genuine user scroll away from the bottom.
-        stop();
-        queueSave();
-    }, [isAnimationGuardActive, isAuto, queueSave, scrollToBottom, setStateValue, stop, updateOverflowAndButton]);
-
-    React.useEffect(() => {
-        const container = containerEl;
-        if (!container) return;
-
-        lastScrollTopRef.current = container.scrollTop;
-
-        const handleWheel = (event: WheelEvent) => {
-            if (event.deltaY >= 0) return;
-            if (nestedScrollableCanConsumeUp(container, event.target)) return;
-            releaseFromUserIntent();
-        };
-
-        let touchLastY: number | null = null;
-        const handleTouchStart = (event: TouchEvent) => {
-            const touch = event.touches.item(0);
-            touchLastY = touch ? touch.clientY : null;
-        };
-        const handleTouchMove = (event: TouchEvent) => {
-            const touch = event.touches.item(0);
-            if (!touch) {
-                touchLastY = null;
-                return;
-            }
-            const previousY = touchLastY;
-            touchLastY = touch.clientY;
-            if (previousY === null) return;
-            const fingerDelta = touch.clientY - previousY;
-            if (fingerDelta <= TOUCH_FINGER_DOWN_THRESHOLD) return;
-            if (nestedScrollableCanConsumeUp(container, event.target)) return;
-            releaseFromUserIntent();
-        };
-        const handleTouchEnd = () => {
-            touchLastY = null;
-        };
-
-        const handleKeyDown = (event: KeyboardEvent) => {
-            if (!isReleaseKey(event)) return;
-            releaseFromUserIntent();
-        };
-
-        const handlePointerDownIntent = (event: PointerEvent) => {
-            const target = event.target;
-            if (!(target instanceof Element)) return;
-            if (!target.closest('[data-overlay-scrollbar-thumb]')) return;
-            releaseFromUserIntent();
-        };
-
-        container.addEventListener('scroll', handleScrollEvent, { passive: true });
-        container.addEventListener('wheel', handleWheel, { passive: true });
-        container.addEventListener('touchstart', handleTouchStart, { passive: true });
-        container.addEventListener('touchmove', handleTouchMove, { passive: true });
-        container.addEventListener('touchend', handleTouchEnd, { passive: true });
-        container.addEventListener('touchcancel', handleTouchEnd, { passive: true });
-        container.addEventListener('keydown', handleKeyDown);
-        if (typeof window !== 'undefined') {
-            window.addEventListener('pointerdown', handlePointerDownIntent, true);
-        }
-
-        return () => {
-            container.removeEventListener('scroll', handleScrollEvent);
-            container.removeEventListener('wheel', handleWheel);
-            container.removeEventListener('touchstart', handleTouchStart);
-            container.removeEventListener('touchmove', handleTouchMove);
-            container.removeEventListener('touchend', handleTouchEnd);
-            container.removeEventListener('touchcancel', handleTouchEnd);
-            container.removeEventListener('keydown', handleKeyDown);
-            if (typeof window !== 'undefined') {
-                window.removeEventListener('pointerdown', handlePointerDownIntent, true);
-            }
-        };
-    }, [containerEl, handleScrollEvent, releaseFromUserIntent]);
-
-    // The heart of the follow behaviour: the content ResizeObserver fires after
-    // layout and before paint, so re-pinning to the bottom here is invisible —
-    // there is no "jump up then catch up". Observe both the container (composer
-    // growth shrinks the viewport) and the inner content (streaming growth).
-    React.useEffect(() => {
-        const container = containerEl;
-        if (!container || typeof ResizeObserver === 'undefined') return;
-
-        const observer = new ResizeObserver(() => {
-            // Keyboard slide in flight: the container/composer resizes it reports
-            // are part of the transform choreography — the settle handler does the
-            // single deterministic re-pin, so chasing here would just fight it.
-            if (keyboardAnimRef.current) {
-                updateOverflowAndButton();
-                return;
-            }
-            const el = scrollRef.current;
-            if (el && !canScroll(el)) {
-                setStateValue('following');
-                updateOverflowAndButton();
-                return;
-            }
-            updateOverflowAndButton();
-            // Entry-stick window: on first session open, FORCE the bottom on
-            // every growth so late async data (task/subagent child rows, code
-            // highlight, mermaid) can't strand the viewport mid-history. Force
-            // overrides any false `released` from the growth itself; only a real
-            // user gesture clears the window (releaseFromUserIntent).
-            if (entryStickRef.current && el) {
-                const grew = el.scrollHeight > entryStickLastHeightRef.current + 1;
-                entryStickLastHeightRef.current = el.scrollHeight;
-                scrollToBottom(true);
-                if (grew) armEntryStickQuiet();
-                return;
-            }
-            // Idle resize = layout churn (virtualizer re-measurement, async
-            // tool/code rendering), NOT live growth. Never re-pin when idle, or
-            // tall items re-measuring as the user scrolls cause an endless
-            // scroll-to-bottom/re-measure twitch.
-            if (!isActive()) return;
-            if (stateRef.current !== 'following') return;
-            scrollToBottom(false);
-        });
-        observer.observe(container);
-        const inner = container.firstElementChild;
-        if (inner instanceof Element) {
-            observer.observe(inner);
-        }
-        return () => observer.disconnect();
-    }, [armEntryStickQuiet, containerEl, isActive, scrollToBottom, setStateValue, updateOverflowAndButton]);
-
-    // ── native keyboard transitions (Capacitor choreography) ────────────────
-    // The chat scroller gets NO transforms during the keyboard transition:
-    // transforming the scroll container (or its content) forces WebKit to
-    // rebuild the composited scrolling layers, which stalls for seconds on
-    // long chats. Instead the chat repositions with instant snaps that hide
-    // behind the keyboard itself:
-    //   show: content stays put while the keyboard/composer slide over it; the
-    //         settled event (shell layout snap) does ONE instant re-pin.
-    //   hide: the shell layout is restored up-front — the scrollTop clamp
-    //         happens while the keyboard still covers that region — and the
-    //         settled event re-pins once at the end.
-    // During the window we only guard the scroll heuristics and the observer
-    // chase. These events never fire outside the Capacitor app.
-    React.useEffect(() => {
-        if (typeof window === 'undefined') return;
-
-        const handleKeyboardAnim = (event: Event) => {
-            const detail = (event as CustomEvent<{ phase: 'show' | 'hide'; slide: number; durationMs: number; easing: string }>).detail;
-            if (!detail) return;
-            keyboardAnimRef.current = true;
-            // The clamp/resize during the choreography can dispatch scroll events
-            // that land away from the auto marker — never read those as a user
-            // scroll-away.
-            animationGuardUntilRef.current = now() + detail.durationMs + ANIMATION_GUARD_MS;
-        };
-
-        const handleKeyboardSettled = () => {
-            keyboardAnimRef.current = false;
-            const el = scrollRef.current;
-            if (!el) {
-                updateOverflowAndButton();
-                return;
-            }
-            // Single deterministic re-pin, same task as the layout swap → lands
-            // before paint. (scrollToBottomNow, not scrollToBottom: this must not
-            // be gated on working/settling — the keyboard resize is a viewport
-            // change, not content growth.)
-            if (stateRef.current === 'following' && canScroll(el)) {
-                scrollToBottomNow('auto');
-            }
-            updateOverflowAndButton();
-        };
-
-        window.addEventListener('oc:keyboard-anim', handleKeyboardAnim);
-        window.addEventListener('oc:keyboard-settled', handleKeyboardSettled);
-        return () => {
-            window.removeEventListener('oc:keyboard-anim', handleKeyboardAnim);
-            window.removeEventListener('oc:keyboard-settled', handleKeyboardSettled);
-            keyboardAnimRef.current = false;
-        };
-    }, [scrollToBottomNow, updateOverflowAndButton]);
-
-    React.useEffect(() => {
-        updateOverflowAndButton();
-    }, [sessionMessageCount, updateOverflowAndButton]);
-
-    const notifyContentChange = React.useCallback((reason?: ContentChangeReason) => {
-        // A tracked height animation (e.g. Thinking auto-collapse) opens a guard
-        // window so its transient geometry / async scroll events are not misread
-        // as a user scroll-away. Real gestures still release through
-        // releaseFromUserIntent, so the user can always scroll up freely.
-        if (reason === 'animation') {
-            animationGuardUntilRef.current = now() + ANIMATION_GUARD_MS;
-        }
-        updateOverflowAndButton();
-        // Entry-stick window: late structural growth (notably the task/subagent
-        // summary landing from the child session — ToolPart emits 'structural'
-        // here) must keep us pinned and refresh the quiescence timer, even though
-        // the session is idle.
-        if (entryStickRef.current) {
-            scrollToBottom(true);
-            armEntryStickQuiet();
-            return;
-        }
-        if (stateRef.current === 'following') {
-            scrollToBottom(false);
-        }
-    }, [armEntryStickQuiet, scrollToBottom, updateOverflowAndButton]);
-
-    const animationHandlersRef = React.useRef<Map<string, AnimationHandlers>>(new Map());
-
-    const getAnimationHandlers = React.useCallback((messageId: string): AnimationHandlers => {
-        const cached = animationHandlersRef.current.get(messageId);
-        if (cached) return cached;
-
-        const kick = () => {
-            if (stateRef.current === 'following') {
-                scrollToBottom(false);
-            }
-        };
-
-        const handlers: AnimationHandlers = {
-            onChunk: kick,
-            onComplete: () => {
-                updateOverflowAndButton();
-            },
-            onStreamingCandidate: () => {},
-            onAnimationStart: () => {},
-            onAnimatedHeightChange: kick,
-            onReservationCancelled: () => {},
-            onReasoningBlock: () => {},
-        };
-        animationHandlersRef.current.set(messageId, handlers);
-        return handlers;
-    }, [scrollToBottom, updateOverflowAndButton]);
-
-    React.useEffect(() => {
-        return () => {
-            if (autoTimerRef.current) {
-                clearTimeout(autoTimerRef.current);
-                autoTimerRef.current = null;
-            }
-            if (settleTimerRef.current) {
-                clearTimeout(settleTimerRef.current);
-                settleTimerRef.current = null;
-            }
-            endEntryStick();
-            flushSave();
-            if (saveTimerRef.current !== null) {
-                clearTimeout(saveTimerRef.current);
-                saveTimerRef.current = null;
-            }
-        };
-    }, [endEntryStick, flushSave]);
-
-    React.useEffect(() => {
-        if (!onActiveTurnChange) return;
-        const container = containerEl;
-        if (!container) return;
-
-        let lastActiveTurnId: string | null = null;
-        const spy = createScrollSpy({
-            onActive: (turnId) => {
-                if (turnId === lastActiveTurnId) return;
-                lastActiveTurnId = turnId;
-                onActiveTurnChange(turnId);
-            },
-        });
-        spy.setContainer(container);
-
-        const elementByTurnId = new Map<string, HTMLElement>();
-        const registerTurnNode = (node: HTMLElement) => {
-            const turnId = node.dataset.turnId;
-            if (!turnId) return false;
-            elementByTurnId.set(turnId, node);
-            spy.register(node, turnId);
-            return true;
-        };
-        const unregisterTurnNode = (node: HTMLElement) => {
-            const turnId = node.dataset.turnId;
-            if (!turnId) return false;
-            if (elementByTurnId.get(turnId) !== node) return false;
-            elementByTurnId.delete(turnId);
-            spy.unregister(turnId);
-            return true;
-        };
-        const collectTurnNodes = (node: Node): HTMLElement[] => {
-            if (!(node instanceof HTMLElement)) return [];
-            const collected: HTMLElement[] = [];
-            if (node.matches('[data-turn-id]')) collected.push(node);
-            node.querySelectorAll<HTMLElement>('[data-turn-id]').forEach((el) => collected.push(el));
-            return collected;
-        };
-
-        container.querySelectorAll<HTMLElement>('[data-turn-id]').forEach(registerTurnNode);
-        spy.markDirty();
-
-        const mutationObserver = new MutationObserver((records) => {
-            let changed = false;
-            records.forEach((record) => {
-                record.removedNodes.forEach((node) => {
-                    collectTurnNodes(node).forEach((turnNode) => {
-                        if (unregisterTurnNode(turnNode)) changed = true;
-                    });
-                });
-                record.addedNodes.forEach((node) => {
-                    collectTurnNodes(node).forEach((turnNode) => {
-                        if (registerTurnNode(turnNode)) changed = true;
-                    });
-                });
-            });
-            if (changed) spy.markDirty();
-        });
-        mutationObserver.observe(container, { subtree: true, childList: true });
-
-        const onScroll = () => spy.onScroll();
-        container.addEventListener('scroll', onScroll, { passive: true });
-
-        return () => {
-            container.removeEventListener('scroll', onScroll);
-            mutationObserver.disconnect();
-            spy.destroy();
-        };
-    }, [containerEl, onActiveTurnChange]);
-
-    return {
-        scrollRef,
-        state,
-        isPinned: state === 'following',
-        isOverflowing,
-        isFollowingProgrammatically,
-        showScrollButton,
-        notifyContentChange,
-        getAnimationHandlers,
-        goToBottom,
-        scrollToBottomOnSend,
-        releaseAutoFollow,
-        saveSnapshotNow,
-        restoreSnapshot,
-    };
-};
diff --git a/packages/ui/src/hooks/useChatTimelineScroll.ts b/packages/ui/src/hooks/useChatTimelineScroll.ts
new file mode 100644
index 00000000..161d9eca
--- /dev/null
+++ b/packages/ui/src/hooks/useChatTimelineScroll.ts
@@ -0,0 +1,867 @@
+import React from 'react';
+
+import { MessageFreshnessDetector } from '@/lib/messageFreshness';
+import { createScrollSpy } from '@/components/chat/lib/scroll/scrollSpy';
+import { useViewportStore } from '@/sync/viewport-store';
+import { useUIStore } from '@/stores/useUIStore';
+import {
+    CHAT_LIST_ANCHOR_OFFSET,
+    getAnchoredTurnMetrics,
+    resolveTimelineIsAtEnd,
+    type TimelineListMeasurementState,
+    type TimelineScrollMode,
+} from '@/components/chat/lib/scroll/timelineScrollAnchoring';
+
+// ──────────────────────────────────────────────────────────────────────────
+// Chat timeline scroll ownership.
+//
+// The virtualized list owns the scroll position; this hook only decides which
+// of three mutually exclusive modes is active and, when a mode calls for it,
+// issues ONE deterministic scroll command:
+//
+//   • `following-end`      — pinned to the live edge. The list keeps us there
+//     through `maintainScrollAtEnd`; we only re-assert after a data change.
+//   • `anchoring-new-turn` — the just-sent user message is parked near the TOP
+//     of the viewport and the reply streams into the reserved end space below
+//     it. The viewport does NOT move while the turn still fits; once the turn
+//     outgrows the usable viewport we scroll by the exact delta needed to keep
+//     its end visible.
+//   • `free-scrolling`     — the user took over. Nothing moves until they opt
+//     back in by returning to the end.
+//
+// Opting out of automatic movement is driven by REAL gestures (wheel /
+// touchmove / pointerdown), not by inferring intent from scroll positions. Each
+// gesture bumps a generation counter; any in-flight automatic movement compares
+// its captured generation against the current one and aborts if they differ.
+// That comparison replaces the timer windows the previous implementation needed
+// to tell its own writes apart from the user's, which is why there are no
+// guard/settle/entry-stick timers here.
+// ──────────────────────────────────────────────────────────────────────────
+
+// The subset of the list ref this hook drives. Declared structurally so the
+// hook stays testable without a renderer and does not hard-depend on the list
+// implementation.
+export interface TimelineListHandle {
+    getState: () => TimelineListMeasurementState & {
+        readonly scroll: number;
+        readonly listen?: (
+            listenerType: 'totalSize',
+            callback: (value: number) => void,
+        ) => () => void;
+    };
+    getScrollableNode: () => HTMLElement | null;
+    scrollToEnd: (options?: { animated?: boolean }) => unknown;
+    scrollToOffset: (params: { offset: number; animated?: boolean }) => unknown;
+    scrollToIndex: (params: {
+        index: number;
+        animated?: boolean;
+        viewPosition?: number;
+        viewOffset?: number;
+    }) => unknown;
+}
+
+interface UseChatTimelineScrollOptions {
+    currentSessionId: string | null;
+    currentSessionKey: string | null;
+    sessionMessageCount: number;
+    composerOverlayHeight: number;
+    // Id of the newest user message in the rendered timeline. When a send has
+    // armed the anchor, the next new id here becomes the anchored row.
+    lastUserMessageId: string | null;
+    onActiveTurnChange?: (turnId: string | null) => void;
+}
+
+export interface UseChatTimelineScrollResult {
+    scrollRef: React.RefObject<HTMLDivElement | null>;
+    // The live scroll element, as state, so effects that must re-bind when the
+    // list remounts (session switch) can depend on it.
+    scrollNode: HTMLDivElement | null;
+    isPinned: boolean;
+    registerList: (list: TimelineListHandle | null) => void;
+    anchorMessageId: string | null;
+    onAnchorReady: (messageId: string, anchorIndex: number) => void;
+    onAnchorSizeChanged: (messageId: string) => void;
+    onIsAtEndChange: (isAtEnd: boolean) => void;
+    onManualNavigation: () => void;
+    onTimelineDataChange: () => void;
+    showScrollButton: boolean;
+    /** A real gesture took the scroll; flips back on any explicit opt-in. */
+    userOwnsScroll: boolean;
+    isFollowingProgrammatically: boolean;
+    goToBottom: (mode?: 'instant' | 'smooth') => void;
+    scrollToBottomOnSend: () => void;
+    saveSnapshotNow: () => void;
+    restoreSnapshot: () => Promise<boolean>;
+}
+
+// Showing the pill is debounced so it does not flash while a thread switch
+// settles (the list reports isAtEnd=false until its initial end-scroll lands).
+// Hiding is always immediate.
+const SHOW_SCROLL_BUTTON_DELAY_MS = 150;
+const SAVE_DEBOUNCE_MS = 150;
+// The anchor scroll is animated; `scrollend` is the authoritative completion
+// signal, and this bounds the wait for browsers that drop it.
+const ANCHOR_SETTLE_FALLBACK_MS = 750;
+// Re-running the anchor positioning while the list is still mounting rows.
+const ANCHOR_POSITION_ATTEMPTS = 12;
+// Anchor restores only correct sub-pixel drift; anything larger is the user or
+// a genuine relayout and must not be undone.
+const ANCHOR_RESTORE_TOLERANCE_PX = 2;
+
+export const useChatTimelineScroll = ({
+    currentSessionId,
+    currentSessionKey,
+    sessionMessageCount,
+    composerOverlayHeight,
+    lastUserMessageId,
+    onActiveTurnChange,
+}: UseChatTimelineScrollOptions): UseChatTimelineScrollResult => {
+    const scrollRef = React.useRef<HTMLDivElement | null>(null);
+    const listRef = React.useRef<TimelineListHandle | null>(null);
+
+    const [scrollNode, setScrollNode] = React.useState<HTMLDivElement | null>(null);
+    const [anchorMessageId, setAnchorMessageId] = React.useState<string | null>(null);
+    const [showScrollButton, setShowScrollButton] = React.useState(false);
+    // "Pinned" is the live edge, which history pagination uses to decide whether
+    // it may load older pages without disturbing the read position.
+    const [isPinned, setIsPinned] = React.useState(true);
+    const [isFollowingProgrammatically, setIsFollowingProgrammatically] = React.useState(false);
+    // True after a real gesture until an explicit opt back in; drives the
+    // overlay scrollbar suppression instead of the anchor's mere existence.
+    const [userOwnsScroll, setUserOwnsScroll] = React.useState(false);
+
+    const modeRef = React.useRef<TimelineScrollMode>('following-end');
+    const isAtEndRef = React.useRef(true);
+    // Incremented by every real user gesture. Automatic movement is only valid
+    // while `liveFollowGenerationRef` still equals it.
+    const userGenerationRef = React.useRef(0);
+    const liveFollowGenerationRef = React.useRef<number | null>(0);
+    // Anchor lifecycle: armed on send → pending until the row exists → positioned
+    // while the animated scroll runs → settled once it has come to rest.
+    const armedForNextUserMessageRef = React.useRef(false);
+    const pendingAnchorRef = React.useRef<string | null>(null);
+    const positionedAnchorRef = React.useRef<string | null>(null);
+    const settledAnchorRef = React.useRef<string | null>(null);
+    const activeAnchorIndexRef = React.useRef<number | null>(null);
+    const pendingAnchorRestoreRef = React.useRef<{
+        readonly messageId: string;
+        readonly offset: number;
+        readonly userGeneration: number;
+    } | null>(null);
+    const anchorRestoreFrameRef = React.useRef<number | null>(null);
+    const showButtonTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+
+    const composerOverlayHeightRef = React.useRef(composerOverlayHeight);
+    composerOverlayHeightRef.current = composerOverlayHeight;
+    const sessionMessageCountRef = React.useRef(sessionMessageCount);
+    sessionMessageCountRef.current = sessionMessageCount;
+    const currentSessionIdRef = React.useRef(currentSessionId);
+    currentSessionIdRef.current = currentSessionId;
+    const currentSessionKeyRef = React.useRef(currentSessionKey);
+    currentSessionKeyRef.current = currentSessionKey;
+
+    const updateViewportAnchor = useViewportStore((state) => state.updateViewportAnchor);
+
+    const cancelShowButtonTimer = React.useCallback(() => {
+        if (showButtonTimerRef.current !== null) {
+            clearTimeout(showButtonTimerRef.current);
+            showButtonTimerRef.current = null;
+        }
+    }, []);
+
+    const hideScrollButton = React.useCallback(() => {
+        cancelShowButtonTimer();
+        setShowScrollButton(false);
+    }, [cancelShowButtonTimer]);
+
+    const scheduleShowScrollButton = React.useCallback(() => {
+        if (showButtonTimerRef.current !== null) return;
+        showButtonTimerRef.current = setTimeout(() => {
+            showButtonTimerRef.current = null;
+            setShowScrollButton(true);
+        }, SHOW_SCROLL_BUTTON_DELAY_MS);
+    }, []);
+
+    const clearAnchor = React.useCallback(() => {
+        armedForNextUserMessageRef.current = false;
+        pendingAnchorRef.current = null;
+        positionedAnchorRef.current = null;
+        settledAnchorRef.current = null;
+        activeAnchorIndexRef.current = null;
+        pendingAnchorRestoreRef.current = null;
+        if (anchorRestoreFrameRef.current !== null) {
+            cancelAnimationFrame(anchorRestoreFrameRef.current);
+            anchorRestoreFrameRef.current = null;
+        }
+        setAnchorMessageId(null);
+    }, []);
+
+    // A real gesture: stop every automatic movement until the user opts back
+    // in. The anchored END SPACE stays — collapsing it mid-gesture clamps the
+    // viewport back to the end — only the anchor machinery is disarmed.
+    const onManualNavigation = React.useCallback(() => {
+        userGenerationRef.current += 1;
+        modeRef.current = 'free-scrolling';
+        liveFollowGenerationRef.current = null;
+        setUserOwnsScroll(true);
+        // The end may already have been left by our own movement, in which
+        // case no further at-end transition will fire — and while an animated
+        // follow glide trails the live edge, isAtEndRef is deliberately not
+        // updated, so measure the real distance instead of trusting it. This
+        // is an explicit gesture — show the pill immediately, no debounce.
+        const listState = listRef.current?.getState();
+        const atEndNow = (listState ? resolveTimelineIsAtEnd(listState) : undefined) ?? isAtEndRef.current;
+        isAtEndRef.current = atEndNow;
+        if (!atEndNow) {
+            cancelShowButtonTimer();
+            setShowScrollButton(true);
+        }
+        armedForNextUserMessageRef.current = false;
+        pendingAnchorRef.current = null;
+        positionedAnchorRef.current = null;
+        settledAnchorRef.current = null;
+        activeAnchorIndexRef.current = null;
+        pendingAnchorRestoreRef.current = null;
+        if (anchorRestoreFrameRef.current !== null) {
+            cancelAnimationFrame(anchorRestoreFrameRef.current);
+            anchorRestoreFrameRef.current = null;
+        }
+    }, [cancelShowButtonTimer]);
+
+    const isLiveFollowActive = React.useCallback(() => (
+        liveFollowGenerationRef.current === userGenerationRef.current
+    ), []);
+
+    // ── snapshot persistence ────────────────────────────────────────────────
+    const pendingSaveRef = React.useRef<{ sessionId: string; anchor: number } | null>(null);
+    const saveTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+
+    const flushSave = React.useCallback(() => {
+        if (saveTimerRef.current !== null) {
+            clearTimeout(saveTimerRef.current);
+            saveTimerRef.current = null;
+        }
+        const pending = pendingSaveRef.current;
+        if (!pending) return;
+        const container = scrollRef.current;
+        if (!container) {
+            pendingSaveRef.current = null;
+            return;
+        }
+        updateViewportAnchor(pending.sessionId, pending.anchor, {
+            scrollTop: container.scrollTop,
+            scrollHeight: container.scrollHeight,
+            clientHeight: container.clientHeight,
+        });
+        pendingSaveRef.current = null;
+    }, [updateViewportAnchor]);
+
+    const queueSave = React.useCallback(() => {
+        const sessionId = currentSessionIdRef.current;
+        if (!sessionId) return;
+        const container = scrollRef.current;
+        if (!container) return;
+
+        const { scrollTop, scrollHeight, clientHeight } = container;
+        const anchorRatio = scrollHeight > 0
+            ? (scrollTop + clientHeight / 2) / scrollHeight
+            : 0;
+        const anchor = Math.floor(anchorRatio * sessionMessageCountRef.current);
+
+        pendingSaveRef.current = { sessionId, anchor };
+        if (saveTimerRef.current !== null) return;
+        saveTimerRef.current = setTimeout(() => {
+            saveTimerRef.current = null;
+            flushSave();
+        }, SAVE_DEBOUNCE_MS);
+    }, [flushSave]);
+
+    const saveSnapshotNow = React.useCallback(() => {
+        flushSave();
+    }, [flushSave]);
+
+    // ── scroll commands ─────────────────────────────────────────────────────
+    const goToBottomReassertTimersRef = React.useRef<Array<ReturnType<typeof setTimeout>>>([]);
+    const clearGoToBottomReasserts = React.useCallback(() => {
+        for (const timer of goToBottomReassertTimersRef.current) clearTimeout(timer);
+        goToBottomReassertTimersRef.current = [];
+    }, []);
+
+    const goToBottom = React.useCallback((mode: 'instant' | 'smooth' = 'instant') => {
+        isAtEndRef.current = true;
+        setIsPinned(true);
+        setUserOwnsScroll(false);
+        modeRef.current = 'following-end';
+        // Returning to the end is an explicit opt back IN to live follow.
+        liveFollowGenerationRef.current = userGenerationRef.current;
+        clearAnchor();
+        hideScrollButton();
+        void listRef.current?.scrollToEnd({ animated: mode === 'smooth' });
+        // While a stream is growing the content, a single jump lands on the
+        // end as of that moment and the list's own follow may not have
+        // re-armed yet — re-assert a few times until the edge holds, then the
+        // library follows onward. A new user gesture invalidates the window.
+        clearGoToBottomReasserts();
+        const generation = userGenerationRef.current;
+        for (const delay of [150, 400, 800]) {
+            goToBottomReassertTimersRef.current.push(setTimeout(() => {
+                if (userGenerationRef.current !== generation) return;
+                if (modeRef.current !== 'following-end') return;
+                const state = listRef.current?.getState();
+                if (state && resolveTimelineIsAtEnd(state) === true) return;
+                void listRef.current?.scrollToEnd({ animated: false });
+            }, delay));
+        }
+    }, [clearAnchor, clearGoToBottomReasserts, hideScrollButton]);
+
+    // Sending arms the anchor. The message id is not known here (the optimistic
+    // row is created by the store), so the next new user message id claims it.
+    // Whether the send-time anchor positioning may animate. Sending from the
+    // live edge parks the new message with a short smooth scroll; sending
+    // from mid-history teleports — a long smooth scroll through the
+    // virtualized timeline gets cancelled by rows mounting and measuring
+    // along the way and dies partway there.
+    const anchorPositionInstantRef = React.useRef(false);
+
+    const scrollToBottomOnSend = React.useCallback(() => {
+        anchorPositionInstantRef.current = !isAtEndRef.current;
+        isAtEndRef.current = true;
+        setUserOwnsScroll(false);
+        modeRef.current = 'anchoring-new-turn';
+        liveFollowGenerationRef.current = userGenerationRef.current;
+        armedForNextUserMessageRef.current = true;
+        // The optimistic row is not committed yet; the next NEW user message id
+        // relative to this baseline claims the anchor, independent of whether
+        // the commit lands before or after this call.
+        armBaselineUserMessageIdRef.current = lastArmedUserMessageIdRef.current;
+        pendingAnchorRef.current = null;
+        positionedAnchorRef.current = null;
+        settledAnchorRef.current = null;
+        activeAnchorIndexRef.current = null;
+        hideScrollButton();
+    }, [hideScrollButton]);
+
+    // Claim the anchor as soon as the sent row exists in the timeline. The
+    // comparison is against the baseline captured when the send armed the
+    // anchor, so the claim works whether the optimistic row committed before
+    // or after the arming call.
+    const lastArmedUserMessageIdRef = React.useRef<string | null>(lastUserMessageId);
+    const armBaselineUserMessageIdRef = React.useRef<string | null>(lastUserMessageId);
+    React.useEffect(() => {
+        lastArmedUserMessageIdRef.current = lastUserMessageId;
+        if (!armedForNextUserMessageRef.current) return;
+        if (!lastUserMessageId || lastUserMessageId === armBaselineUserMessageIdRef.current) return;
+        armedForNextUserMessageRef.current = false;
+        pendingAnchorRef.current = lastUserMessageId;
+        setAnchorMessageId(lastUserMessageId);
+    }, [lastUserMessageId]);
+
+    const restoreSnapshot = React.useCallback(async (): Promise<boolean> => {
+        const sessionKey = currentSessionKeyRef.current;
+        if (!sessionKey) return false;
+
+        // Entering a session always returns to the live edge. Late async growth
+        // is handled by the list staying at the end, not by a timed hold.
+        isAtEndRef.current = true;
+        setUserOwnsScroll(false);
+        modeRef.current = 'following-end';
+        liveFollowGenerationRef.current = userGenerationRef.current;
+        clearAnchor();
+        hideScrollButton();
+        void listRef.current?.scrollToEnd({ animated: false });
+        return false;
+    }, [clearAnchor, hideScrollButton]);
+
+    // ── list callbacks ──────────────────────────────────────────────────────
+    const registerList = React.useCallback((list: TimelineListHandle | null) => {
+        listRef.current = list;
+        const node = (list?.getScrollableNode() as HTMLDivElement | null) ?? null;
+        scrollRef.current = node;
+        setScrollNode(node);
+    }, []);
+
+    const onIsAtEndChange = React.useCallback((isAtEnd: boolean) => {
+        // While an automatic movement owns the viewport, leaving the end is our
+        // own doing (the anchored turn parks mid-timeline, the glide trails its
+        // target between corrections) — not a reason to offer the pill. Only a
+        // real gesture (free-scrolling) shows it.
+        if (!isAtEnd && isLiveFollowActive()) {
+            hideScrollButton();
+            return;
+        }
+        if (isAtEndRef.current === isAtEnd) return;
+        isAtEndRef.current = isAtEnd;
+        setIsPinned(isAtEnd);
+        if (isAtEnd) {
+            if (modeRef.current !== 'anchoring-new-turn') {
+                modeRef.current = 'following-end';
+            }
+            liveFollowGenerationRef.current = userGenerationRef.current;
+            setUserOwnsScroll(false);
+            hideScrollButton();
+        } else {
+            modeRef.current = 'free-scrolling';
+            liveFollowGenerationRef.current = null;
+            scheduleShowScrollButton();
+        }
+        queueSave();
+    }, [hideScrollButton, isLiveFollowActive, queueSave, scheduleShowScrollButton]);
+
+    // Park the anchored row near the top once the list has measured it.
+    const onAnchorReady = React.useCallback((messageId: string, anchorIndex: number) => {
+        // The anchored end space can be remeasured long after the send (turn
+        // completion, images decoding). Only the send-time anchoring mode may
+        // position the viewport.
+        if (modeRef.current !== 'anchoring-new-turn') return;
+        if (pendingAnchorRef.current === messageId) {
+            pendingAnchorRef.current = null;
+        }
+        activeAnchorIndexRef.current = anchorIndex;
+        if (positionedAnchorRef.current === messageId) return;
+        positionedAnchorRef.current = messageId;
+        settledAnchorRef.current = null;
+
+        const positionAnchor = (remainingAttempts: number) => {
+            requestAnimationFrame(() => {
+                if (positionedAnchorRef.current !== messageId) return;
+                const list = listRef.current;
+                if (!list) {
+                    if (remainingAttempts > 0) positionAnchor(remainingAttempts - 1);
+                    return;
+                }
+                const scrollNode = list.getScrollableNode();
+                if (!scrollNode) {
+                    if (remainingAttempts > 0) positionAnchor(remainingAttempts - 1);
+                    return;
+                }
+
+                let finished = false;
+                const finishPositioning = () => {
+                    if (finished) return;
+                    finished = true;
+                    clearTimeout(fallbackTimer);
+                    scrollNode.removeEventListener('scrollend', finishPositioning);
+                    if (positionedAnchorRef.current !== messageId) return;
+                    // Re-assert the resting offset without animation so the
+                    // smooth scroll's own momentum cannot drift past it.
+                    const scrollOffset = list.getState().scroll;
+                    void list.scrollToOffset({ offset: scrollOffset, animated: false });
+                    settledAnchorRef.current = messageId;
+                };
+                const fallbackTimer = setTimeout(finishPositioning, ANCHOR_SETTLE_FALLBACK_MS);
+                scrollNode.addEventListener('scrollend', finishPositioning, { once: true });
+
+                void list.scrollToIndex({
+                    index: anchorIndex,
+                    animated: !anchorPositionInstantRef.current,
+                    viewPosition: 0,
+                    viewOffset: CHAT_LIST_ANCHOR_OFFSET,
+                });
+            });
+        };
+
+        requestAnimationFrame(() => positionAnchor(ANCHOR_POSITION_ATTEMPTS));
+    }, []);
+
+    // The anchored row can still change height after it settles (an image
+    // decoding, a code block highlighting). Hold the resting offset, but only
+    // against sub-pixel drift and only while the user has not taken over.
+    const onAnchorSizeChanged = React.useCallback((messageId: string) => {
+        if (settledAnchorRef.current !== messageId) return;
+        if (!isLiveFollowActive()) return;
+        const scrollOffset = listRef.current?.getState().scroll;
+        if (scrollOffset === undefined) return;
+
+        if (pendingAnchorRestoreRef.current === null) {
+            pendingAnchorRestoreRef.current = {
+                messageId,
+                offset: scrollOffset,
+                userGeneration: userGenerationRef.current,
+            };
+        }
+        if (anchorRestoreFrameRef.current !== null) return;
+
+        anchorRestoreFrameRef.current = requestAnimationFrame(() => {
+            anchorRestoreFrameRef.current = null;
+            const pending = pendingAnchorRestoreRef.current;
+            pendingAnchorRestoreRef.current = null;
+            if (
+                !pending
+                || settledAnchorRef.current !== pending.messageId
+                || pending.userGeneration !== userGenerationRef.current
+            ) {
+                return;
+            }
+            const list = listRef.current;
+            const currentOffset = list?.getState().scroll;
+            if (
+                typeof currentOffset === 'number'
+                && Math.abs(currentOffset - pending.offset) <= ANCHOR_RESTORE_TOLERANCE_PX
+            ) {
+                void list?.scrollToOffset({ offset: pending.offset, animated: false });
+            }
+        });
+    }, [isLiveFollowActive]);
+
+    // Whether the real rows (ignoring any reserved anchored end space) are tall
+    // enough to scroll. Without this, entering a short session would scroll into
+    // the reserved space and strand the content above the viewport.
+    const realContentOverflowsViewport = React.useCallback((list: TimelineListHandle): boolean => {
+        const state = list.getState();
+        if (state.data.length === 0) return false;
+
+        const lastIndex = state.data.length - 1;
+        const lastTop = state.positionAtIndex(lastIndex);
+        const lastHeight = state.sizeAtIndex(lastIndex);
+        if (
+            typeof lastTop !== 'number'
+            || typeof lastHeight !== 'number'
+            || !Number.isFinite(lastTop)
+            || !Number.isFinite(lastHeight)
+        ) {
+            return false;
+        }
+
+        const realContentBottom = lastTop + Math.max(1, lastHeight);
+        const visibleScrollLength = Math.max(
+            0,
+            state.scrollLength - composerOverlayHeightRef.current - CHAT_LIST_ANCHOR_OFFSET,
+        );
+        return realContentBottom > visibleScrollLength;
+    }, []);
+
+    // One deterministic correction per data change, two frames out so the list
+    // has measured the new rows. Nothing runs while the user owns the scroll.
+    const dataChangeFramesRef = React.useRef<{ first: number | null; second: number | null }>({
+        first: null,
+        second: null,
+    });
+    // User preference: with auto-follow off, streaming growth never moves the
+    // viewport — the anchored user message still parks at the top on send, but
+    // no glide or end-follow correction runs afterwards.
+    const streamingAutoFollowEnabled = useUIStore((state) => state.streamingAutoFollowEnabled);
+    const streamingAutoFollowEnabledRef = React.useRef(streamingAutoFollowEnabled);
+    streamingAutoFollowEnabledRef.current = streamingAutoFollowEnabled;
+
+    // While the list width is resizing, every pinning write fights the
+    // per-frame row re-measure and the pinned viewport shakes. Corrections
+    // stand down for the whole resize and the visible content is held by the
+    // list's size compensation instead. Deliberately NO snap back to the end
+    // afterwards: a slow drag settles repeatedly, and each snap reads as the
+    // very jump this suspension removes — geometry changed, staying where the
+    // reader is beats re-asserting the edge.
+    const widthResizingRef = React.useRef(false);
+    React.useEffect(() => {
+        if (!scrollNode || typeof ResizeObserver === 'undefined') return;
+        let lastWidth: number | null = null;
+        let quietTimer: ReturnType<typeof setTimeout> | null = null;
+        const observer = new ResizeObserver((observerEntries) => {
+            const width = observerEntries[observerEntries.length - 1]?.contentRect.width;
+            if (typeof width !== 'number') return;
+            if (lastWidth === null) {
+                lastWidth = width;
+                return;
+            }
+            if (Math.abs(width - lastWidth) < 1) return;
+            lastWidth = width;
+            widthResizingRef.current = true;
+            if (quietTimer !== null) clearTimeout(quietTimer);
+            quietTimer = setTimeout(() => {
+                quietTimer = null;
+                widthResizingRef.current = false;
+            }, 350);
+        });
+        observer.observe(scrollNode);
+        return () => {
+            observer.disconnect();
+            if (quietTimer !== null) clearTimeout(quietTimer);
+        };
+    }, [scrollNode]);
+
+    const onTimelineDataChange = React.useCallback(() => {
+        if (widthResizingRef.current) return;
+        if (!streamingAutoFollowEnabledRef.current) return;
+        if (!isLiveFollowActive()) return;
+
+        // Since @legendapp/list 3.3.x, maintainScrollAtEnd follows content
+        // growth on its own — including a tail row growing in place — and
+        // releases when the user scrolls away. Following the end therefore
+        // needs no correction here; this handler only serves the
+        // anchored-turn glide below.
+        if (modeRef.current === 'following-end') return;
+
+        const frames = dataChangeFramesRef.current;
+        if (frames.first !== null) cancelAnimationFrame(frames.first);
+        if (frames.second !== null) cancelAnimationFrame(frames.second);
+
+        frames.first = requestAnimationFrame(() => {
+            frames.first = null;
+            frames.second = requestAnimationFrame(() => {
+                frames.second = null;
+                if (!isLiveFollowActive()) return;
+                // An anchor that exists but has not come to rest yet owns the
+                // viewport; correcting now would fight its animation.
+                if (pendingAnchorRef.current !== null) return;
+                if (
+                    positionedAnchorRef.current !== null
+                    && settledAnchorRef.current !== positionedAnchorRef.current
+                ) {
+                    return;
+                }
+
+                const list = listRef.current;
+                if (!list) return;
+
+                if (modeRef.current === 'anchoring-new-turn') {
+                    const anchorIndex = activeAnchorIndexRef.current;
+                    if (anchorIndex === null) return;
+                    const metrics = getAnchoredTurnMetrics({
+                        state: list.getState(),
+                        anchorIndex,
+                        composerOverlayHeight: composerOverlayHeightRef.current,
+                        anchorOffset: CHAT_LIST_ANCHOR_OFFSET,
+                    });
+                    // The turn still fits: leave the viewport exactly where the
+                    // user is reading.
+                    if (!metrics || metrics.scrollDeltaToRevealEnd <= 1) return;
+                    // Animated: successive corrections restart the smooth scroll
+                    // from the current position, so streaming reads as one
+                    // continuous glide instead of a per-line hop. A real user
+                    // gesture interrupts the native smooth scroll on its own.
+                    void list.scrollToOffset({
+                        offset: list.getState().scroll + metrics.scrollDeltaToRevealEnd,
+                        animated: true,
+                    });
+                    return;
+                }
+
+            });
+        });
+    }, [isLiveFollowActive]);
+
+    // The streaming tail grows inside one row without changing the entries
+    // array, so data-change callbacks are silent for the entire stream. The
+    // list's total content size is the authoritative growth signal; every
+    // change re-runs the same guarded correction.
+    const onTimelineDataChangeRef = React.useRef(onTimelineDataChange);
+    onTimelineDataChangeRef.current = onTimelineDataChange;
+    React.useEffect(() => {
+        if (!scrollNode) return;
+        const listen = listRef.current?.getState().listen;
+        if (!listen) return;
+        const unsubscribe = listen('totalSize', () => {
+            onTimelineDataChangeRef.current();
+        });
+        return unsubscribe;
+    }, [scrollNode]);
+
+    // ── gesture opt-out ─────────────────────────────────────────────────────
+    const onManualNavigationRef = React.useRef(onManualNavigation);
+    onManualNavigationRef.current = onManualNavigation;
+
+    React.useEffect(() => {
+        if (!scrollNode) return;
+
+        // A gesture is meaningful when the viewport can move up AT ALL:
+        // either the real rows overflow the viewport, or there is scrolled
+        // history above (an anchored turn parks mid-conversation with
+        // reserved space below — the real rows may not overflow yet, but
+        // wheel-up is still a genuine opt-out; swallowing it left live-follow
+        // armed, which suppressed the pill and kept corrections armed under a
+        // viewport the user had taken).
+        const canScrollUp = () => {
+            const list = listRef.current;
+            if (!list) return false;
+            if (list.getState().scroll > 1) return true;
+            return realContentOverflowsViewport(list);
+        };
+        const gesture = () => {
+            onManualNavigationRef.current();
+        };
+        const handleWheel = (event: WheelEvent) => {
+            // Scrolling toward the end is not opting out of follow.
+            if (event.deltaY < 0 && canScrollUp()) gesture();
+        };
+        // Touch mirrors wheel by finger direction, not by having already left
+        // the end: while a stream keeps re-pinning the viewport, waiting for
+        // an at-end transition means the drag never registers — the user
+        // cannot scroll, the pill never appears, and live-follow stays armed
+        // under a viewport they are fighting for.
+        let touchLastY: number | null = null;
+        const handleTouchStart = (event: TouchEvent) => {
+            touchLastY = event.touches[0]?.clientY ?? null;
+        };
+        const handleTouchMove = (event: TouchEvent) => {
+            const y = event.touches[0]?.clientY ?? null;
+            const lastY = touchLastY;
+            touchLastY = y;
+            if (y === null) return;
+            // A downward finger drags the content up — the touch wheel-up.
+            const draggedUp = lastY !== null && y > lastY;
+            if ((draggedUp || !isAtEndRef.current) && canScrollUp()) gesture();
+        };
+        const handleTouchEnd = () => {
+            touchLastY = null;
+        };
+        const handlePointerDown = (event: PointerEvent) => {
+            // The scrollbar track is the scroll node itself; a tap on a row
+            // only breaks follow when the viewport already left the end.
+            if ((event.target === scrollNode || !isAtEndRef.current) && canScrollUp()) gesture();
+        };
+        const handleKeyDown = (event: KeyboardEvent) => {
+            if ((event.key === 'PageUp' || event.key === 'Home' || event.key === 'ArrowUp') && canScrollUp()) {
+                gesture();
+            }
+        };
+        const handleScroll = () => {
+            queueSave();
+        };
+
+        scrollNode.addEventListener('wheel', handleWheel, { passive: true });
+        scrollNode.addEventListener('touchstart', handleTouchStart, { passive: true });
+        scrollNode.addEventListener('touchmove', handleTouchMove, { passive: true });
+        scrollNode.addEventListener('touchend', handleTouchEnd, { passive: true });
+        scrollNode.addEventListener('touchcancel', handleTouchEnd, { passive: true });
+        scrollNode.addEventListener('pointerdown', handlePointerDown, { passive: true });
+        scrollNode.addEventListener('keydown', handleKeyDown);
+        scrollNode.addEventListener('scroll', handleScroll, { passive: true });
+
+        return () => {
+            scrollNode.removeEventListener('wheel', handleWheel);
+            scrollNode.removeEventListener('touchstart', handleTouchStart);
+            scrollNode.removeEventListener('touchmove', handleTouchMove);
+            scrollNode.removeEventListener('touchend', handleTouchEnd);
+            scrollNode.removeEventListener('touchcancel', handleTouchEnd);
+            scrollNode.removeEventListener('pointerdown', handlePointerDown);
+            scrollNode.removeEventListener('keydown', handleKeyDown);
+            scrollNode.removeEventListener('scroll', handleScroll);
+        };
+    }, [queueSave, realContentOverflowsViewport, scrollNode]);
+
+    // ── session lifecycle ───────────────────────────────────────────────────
+    const lastSessionKeyRef = React.useRef<string | null>(null);
+    React.useEffect(() => {
+        if (!currentSessionId || !currentSessionKey || currentSessionKey === lastSessionKeyRef.current) {
+            return;
+        }
+        lastSessionKeyRef.current = currentSessionKey;
+        MessageFreshnessDetector.getInstance().recordSessionStart(currentSessionId);
+        // Persist the outgoing session's position before the new one takes over.
+        flushSave();
+        isAtEndRef.current = true;
+        setUserOwnsScroll(false);
+        modeRef.current = 'following-end';
+        liveFollowGenerationRef.current = userGenerationRef.current;
+        clearAnchor();
+        hideScrollButton();
+    }, [clearAnchor, currentSessionId, currentSessionKey, flushSave, hideScrollButton]);
+
+    // Suppress the overlay scrollbar thumb while automatic movement owns the
+    // scroll position, so it does not jump on each correction.
+    React.useEffect(() => {
+        setIsFollowingProgrammatically(!showScrollButton && !userOwnsScroll);
+    }, [showScrollButton, userOwnsScroll]);
+
+    React.useEffect(() => () => {
+        cancelShowButtonTimer();
+        if (saveTimerRef.current !== null) clearTimeout(saveTimerRef.current);
+        if (anchorRestoreFrameRef.current !== null) cancelAnimationFrame(anchorRestoreFrameRef.current);
+        const frames = dataChangeFramesRef.current;
+        if (frames.first !== null) cancelAnimationFrame(frames.first);
+        if (frames.second !== null) cancelAnimationFrame(frames.second);
+    }, [cancelShowButtonTimer]);
+
+    // ── active-turn spy ─────────────────────────────────────────────────────
+    // Reads turn positions straight from the DOM, so it is unaffected by which
+    // list implementation owns the container. Rows mounting and unmounting
+    // during virtualized scrolling are tracked through the mutation observer.
+    React.useEffect(() => {
+        if (!onActiveTurnChange) return;
+        const container = scrollNode;
+        if (!container) return;
+
+        let lastActiveTurnId: string | null = null;
+        const spy = createScrollSpy({
+            onActive: (turnId) => {
+                if (turnId === lastActiveTurnId) return;
+                lastActiveTurnId = turnId;
+                onActiveTurnChange(turnId);
+            },
+        });
+        spy.setContainer(container);
+
+        const elementByTurnId = new Map<string, HTMLElement>();
+        const registerTurnNode = (node: HTMLElement) => {
+            const turnId = node.dataset.turnId;
+            if (!turnId) return false;
+            elementByTurnId.set(turnId, node);
+            spy.register(node, turnId);
+            return true;
+        };
+        const unregisterTurnNode = (node: HTMLElement) => {
+            const turnId = node.dataset.turnId;
+            if (!turnId) return false;
+            if (elementByTurnId.get(turnId) !== node) return false;
+            elementByTurnId.delete(turnId);
+            spy.unregister(turnId);
+            return true;
+        };
+        const collectTurnNodes = (node: Node): HTMLElement[] => {
+            if (!(node instanceof HTMLElement)) return [];
+            const collected: HTMLElement[] = [];
+            if (node.matches('[data-turn-id]')) collected.push(node);
+            node.querySelectorAll<HTMLElement>('[data-turn-id]').forEach((el) => collected.push(el));
+            return collected;
+        };
+
+        container.querySelectorAll<HTMLElement>('[data-turn-id]').forEach(registerTurnNode);
+        spy.markDirty();
+
+        const mutationObserver = new MutationObserver((records) => {
+            let changed = false;
+            records.forEach((record) => {
+                record.removedNodes.forEach((node) => {
+                    collectTurnNodes(node).forEach((turnNode) => {
+                        if (unregisterTurnNode(turnNode)) changed = true;
+                    });
+                });
+                record.addedNodes.forEach((node) => {
+                    collectTurnNodes(node).forEach((turnNode) => {
+                        if (registerTurnNode(turnNode)) changed = true;
+                    });
+                });
+            });
+            if (changed) spy.markDirty();
+        });
+        mutationObserver.observe(container, { subtree: true, childList: true });
+
+        const onScroll = () => spy.onScroll();
+        container.addEventListener('scroll', onScroll, { passive: true });
+
+        return () => {
+            container.removeEventListener('scroll', onScroll);
+            mutationObserver.disconnect();
+            spy.destroy();
+        };
+    }, [onActiveTurnChange, scrollNode]);
+
+    return {
+        scrollRef,
+        scrollNode,
+        isPinned,
+        registerList,
+        anchorMessageId,
+        onAnchorReady,
+        onAnchorSizeChanged,
+        onIsAtEndChange,
+        onManualNavigation,
+        onTimelineDataChange,
+        showScrollButton,
+        userOwnsScroll,
+        isFollowingProgrammatically,
+        goToBottom,
+        scrollToBottomOnSend,
+        saveSnapshotNow,
+        restoreSnapshot,
+    };
+};
diff --git a/packages/ui/src/hooks/useKeyboardShortcuts.ts b/packages/ui/src/hooks/useKeyboardShortcuts.ts
index 114bc0b4..78079932 100644
--- a/packages/ui/src/hooks/useKeyboardShortcuts.ts
+++ b/packages/ui/src/hooks/useKeyboardShortcuts.ts
@@ -1,6 +1,7 @@
 import React from 'react';
 import { isTerminalEventTarget } from '@/lib/terminalFocus';
 import { useSessionUIStore } from '@/sync/session-ui-store';
+import { closeSessionTabAndActivateNeighbour } from '@/lib/sessionTabs';
 import { useSelectionStore } from '@/sync/selection-store';
 import * as sessionActions from '@/sync/session-actions';
 import { normalizeContextPanelDirectoryKey, useUIStore } from '@/stores/useUIStore';
@@ -59,7 +60,6 @@ export const useKeyboardShortcuts = () => {
   }, [currentShortcutDirectory]);
   const isMobile = useUIStore((s) => s.isMobile);
   const setSessionSwitcherOpen = useUIStore((s) => s.setSessionSwitcherOpen);
-  const setActiveMainTab = useUIStore((s) => s.setActiveMainTab);
   const setSettingsDialogOpen = useUIStore((s) => s.setSettingsDialogOpen);
   const setModelSelectorOpen = useUIStore((s) => s.setModelSelectorOpen);
   const setTimelineDialogOpen = useUIStore((s) => s.setTimelineDialogOpen);
@@ -154,7 +154,6 @@ export const useKeyboardShortcuts = () => {
         isAboutDialogOpen,
         isMultiRunLauncherOpen,
         isImagePreviewOpen,
-        activeMainTab,
         isPromptNavigatorPanelOpen,
       } = useUIStore.getState();
 
@@ -183,7 +182,7 @@ export const useKeyboardShortcuts = () => {
       }
 
       const hasOverlay = isCommandPaletteOpen || isHelpDialogOpen || isSessionSwitcherOpen || isAboutDialogOpen || isMultiRunLauncherOpen || isImagePreviewOpen;
-      const isChatActive = activeMainTab === 'chat';
+      const isChatActive = true;
 
       if (hasOverlay || !isChatActive) {
         resetAbortPriming();
@@ -245,7 +244,6 @@ export const useKeyboardShortcuts = () => {
 
       if (eventMatchesShortcut(e, combo('toggle_prompt_navigator'))) {
         const {
-          activeMainTab,
           promptNavigatorEnabled,
           isSettingsDialogOpen,
           isCommandPaletteOpen,
@@ -257,7 +255,7 @@ export const useKeyboardShortcuts = () => {
           isImagePreviewOpen,
         } = useUIStore.getState();
 
-        if (!promptNavigatorEnabled || isMobile || isVSCodeRuntime() || activeMainTab !== 'chat') {
+        if (!promptNavigatorEnabled || isMobile || isVSCodeRuntime()) {
           return;
         }
 
@@ -302,13 +300,20 @@ export const useKeyboardShortcuts = () => {
         return;
       }
 
+      if (!isVSCodeRuntime() && useUIStore.getState().sessionTabsEnabled && eventMatchesShortcut(e, combo('close_session_tab'))) {
+        e.preventDefault();
+        if (currentSessionId) {
+          closeSessionTabAndActivateNeighbour(currentSessionId);
+        }
+        return;
+      }
+
       const matchedNewSessionShortcut = eventMatchesShortcut(e, combo('new_chat'));
       const matchedWorktreeShortcut = eventMatchesShortcut(e, combo('new_chat_worktree'));
 
       if (matchedNewSessionShortcut || matchedWorktreeShortcut) {
         e.preventDefault();
 
-        setActiveMainTab('chat');
         setSessionSwitcherOpen(false);
 
         if (!isVSCodeRuntime() && matchedWorktreeShortcut) {
@@ -394,11 +399,10 @@ export const useKeyboardShortcuts = () => {
           isHelpDialogOpen,
           isSessionSwitcherOpen,
           isAboutDialogOpen,
-          activeMainTab,
         } = useUIStore.getState();
 
         const hasOverlay = isSettingsDialogOpen || isCommandPaletteOpen || isHelpDialogOpen || isSessionSwitcherOpen || isAboutDialogOpen;
-        if (hasOverlay || activeMainTab !== 'chat' || !isChatInputTarget(e.target)) {
+        if (hasOverlay || !isChatInputTarget(e.target)) {
           return;
         }
 
@@ -525,7 +529,6 @@ export const useKeyboardShortcuts = () => {
           isHelpDialogOpen,
           isSessionSwitcherOpen,
           isAboutDialogOpen,
-          activeMainTab,
           isModelSelectorOpen,
         } = useUIStore.getState();
 
@@ -536,7 +539,7 @@ export const useKeyboardShortcuts = () => {
 
         // Skip if any overlay open or not on chat tab
         const hasOverlay = isCommandPaletteOpen || isHelpDialogOpen || isSessionSwitcherOpen || isAboutDialogOpen;
-        const isChatActive = activeMainTab === 'chat';
+        const isChatActive = true;
 
         if (hasOverlay || !isChatActive) {
           return;
@@ -555,7 +558,6 @@ export const useKeyboardShortcuts = () => {
           isHelpDialogOpen,
           isSessionSwitcherOpen,
           isAboutDialogOpen,
-          activeMainTab,
         } = useUIStore.getState();
 
         if (isSettingsDialogOpen) {
@@ -563,7 +565,7 @@ export const useKeyboardShortcuts = () => {
         }
 
         const hasOverlay = isCommandPaletteOpen || isHelpDialogOpen || isSessionSwitcherOpen || isAboutDialogOpen;
-        const isChatActive = activeMainTab === 'chat';
+        const isChatActive = true;
 
         if (hasOverlay || !isChatActive) {
           return;
@@ -602,7 +604,6 @@ export const useKeyboardShortcuts = () => {
           isHelpDialogOpen,
           isSessionSwitcherOpen,
           isAboutDialogOpen,
-          activeMainTab,
           favoriteModels,
           addRecentModel,
         } = useUIStore.getState();
@@ -612,7 +613,7 @@ export const useKeyboardShortcuts = () => {
         }
 
         const hasOverlay = isCommandPaletteOpen || isHelpDialogOpen || isSessionSwitcherOpen || isAboutDialogOpen;
-        const isChatActive = activeMainTab === 'chat';
+        const isChatActive = true;
 
         if (hasOverlay || !isChatActive || favoriteModels.length === 0) {
           return;
@@ -644,8 +645,8 @@ export const useKeyboardShortcuts = () => {
       }
 
       if (eventMatchesShortcut(e, combo('toggle_dictation'))) {
-        const { activeMainTab, isCommandPaletteOpen, isHelpDialogOpen, isSessionSwitcherOpen, isSettingsDialogOpen } = useUIStore.getState();
-        if (activeMainTab !== 'chat' || isCommandPaletteOpen || isHelpDialogOpen || isSessionSwitcherOpen || isSettingsDialogOpen) {
+        const { isCommandPaletteOpen, isHelpDialogOpen, isSessionSwitcherOpen, isSettingsDialogOpen } = useUIStore.getState();
+        if (isCommandPaletteOpen || isHelpDialogOpen || isSessionSwitcherOpen || isSettingsDialogOpen) {
           return;
         }
         e.preventDefault();
@@ -695,7 +696,6 @@ export const useKeyboardShortcuts = () => {
     toggleTerminalSurfaceExpanded,
     isMobile,
     setSessionSwitcherOpen,
-    setActiveMainTab,
     setSettingsDialogOpen,
     setModelSelectorOpen,
     setTimelineDialogOpen,
diff --git a/packages/ui/src/hooks/useMenuActions.ts b/packages/ui/src/hooks/useMenuActions.ts
index 48b4093b..dd163593 100644
--- a/packages/ui/src/hooks/useMenuActions.ts
+++ b/packages/ui/src/hooks/useMenuActions.ts
@@ -102,7 +102,6 @@ export const useMenuActions = (
   const toggleHelpDialog = useUIStore((s) => s.toggleHelpDialog);
   const toggleSidebar = useUIStore((s) => s.toggleSidebar);
   const setSessionSwitcherOpen = useUIStore((s) => s.setSessionSwitcherOpen);
-  const setActiveMainTab = useUIStore((s) => s.setActiveMainTab);
   const setSettingsDialogOpen = useUIStore((s) => s.setSettingsDialogOpen);
   const setAboutDialogOpen = useUIStore((s) => s.setAboutDialogOpen);
   const checkForUpdates = useUpdateStore((state) => state.checkForUpdates);
@@ -151,10 +150,9 @@ export const useMenuActions = (
     const nextSession = sessions[nextIndex];
     if (!nextSession) return;
 
-    setActiveMainTab('chat');
     setSessionSwitcherOpen(false);
     useSessionUIStore.getState().setCurrentSession(nextSession.id);
-  }, [setActiveMainTab, setSessionSwitcherOpen]);
+  }, [setSessionSwitcherOpen]);
 
   const navigateProject = React.useCallback((direction: -1 | 1) => {
     const { activeProjectId, projects, setActiveProject } = useProjectsStore.getState();
@@ -191,8 +189,7 @@ export const useMenuActions = (
           break;
 
         case 'new-session':
-          setActiveMainTab('chat');
-          setSessionSwitcherOpen(false);
+                setSessionSwitcherOpen(false);
           {
             const sessionState = useSessionUIStore.getState();
             const directory = useDirectoryStore.getState().currentDirectory;
@@ -203,8 +200,7 @@ export const useMenuActions = (
           break;
 
         case 'new-worktree-session':
-          setActiveMainTab('chat');
-          setSessionSwitcherOpen(false);
+                setSessionSwitcherOpen(false);
           createWorktreeSession();
           break;
 
@@ -341,7 +337,6 @@ export const useMenuActions = (
       onToggleMemoryDebug,
       openNewSessionDraft,
       setAboutDialogOpen,
-      setActiveMainTab,
       setSessionSwitcherOpen,
       setCommandPaletteOpen,
       setSettingsDialogOpen,
diff --git a/packages/ui/src/hooks/useRouter.ts b/packages/ui/src/hooks/useRouter.ts
index 1e34e765..2379f9be 100644
--- a/packages/ui/src/hooks/useRouter.ts
+++ b/packages/ui/src/hooks/useRouter.ts
@@ -1,11 +1,11 @@
 import React from 'react';
 import { useSessionUIStore } from '@/sync/session-ui-store';
-import { useUIStore } from '@/stores/useUIStore';
+import { useUIStore, type ContextPanelMode } from '@/stores/useUIStore';
 import { parseRoute, updateBrowserURL, hasRouteParams } from '@/lib/router';
 import type { RouteState, AppRouteState } from '@/lib/router';
-import type { WorkspaceSurface } from '@/stores/useUIStore';
 import { resolveSettingsSlug } from '@/lib/settings/metadata';
 import { isEmbeddedSessionChat } from '@/components/layout/contextPanelEmbeddedChat';
+import { useDirectoryStore } from '@/stores/useDirectoryStore';
 
 /**
  * Check if running in VS Code webview context.
@@ -49,7 +49,6 @@ export function useRouter(): void {
 
   // Get store actions (stable references)
   const setCurrentSession = useSessionUIStore((state) => state.setCurrentSession);
-  const setActiveSurface = useUIStore((state) => state.setActiveSurface);
   const setSettingsDialogOpen = useUIStore((state) => state.setSettingsDialogOpen);
   const setSettingsPage = useUIStore((state) => state.setSettingsPage);
   const navigateToDiff = useUIStore((state) => state.navigateToDiff);
@@ -88,9 +87,16 @@ export function useRouter(): void {
           setSettingsDialogOpen(false);
         }
 
-        // 3. Apply the view selected by the legacy URL parameter.
-        if (route.tab) {
-          setActiveSurface(route.tab);
+        // 3. Apply the view selected by the legacy URL parameter. Desktop
+        // surfaces live in the context panel, so a non-chat tab deep link
+        // opens the matching panel surface; activeSurface itself stays 'chat'
+        // (nothing renders non-chat surfaces in the main area).
+        if (route.tab && route.tab !== 'chat') {
+          const directory = useDirectoryStore.getState().currentDirectory;
+          if (directory) {
+            const mode: ContextPanelMode = route.tab === 'files' ? 'file' : route.tab;
+            useUIStore.getState().openContextSurface(directory, mode);
+          }
         }
 
         // 4. Apply diff file (only if going to diff tab)
@@ -101,7 +107,7 @@ export function useRouter(): void {
         isApplyingRouteRef.current = false;
       }
     },
-    [setCurrentSession, setActiveSurface, setSettingsDialogOpen, setSettingsPage, navigateToDiff]
+    [setCurrentSession, setSettingsDialogOpen, setSettingsPage, navigateToDiff]
   );
 
   /**
@@ -113,10 +119,8 @@ export function useRouter(): void {
 
     return {
       sessionId: sessionState.currentSessionId,
-      tab: uiState.activeSurface,
       isSettingsOpen: uiState.isSettingsDialogOpen,
       settingsPath: uiState.settingsPage,
-      diffFile: uiState.pendingDiffFile,
     };
   }, []);
 
@@ -162,9 +166,7 @@ export function useRouter(): void {
         updateBrowserURL({
           ...getCurrentAppState(),
           sessionId: route.sessionId ?? useSessionUIStore.getState().currentSessionId,
-          tab: route.tab ?? useUIStore.getState().activeSurface,
           settingsPath: route.settingsPath ?? useUIStore.getState().settingsPage,
-          diffFile: route.diffFile ?? useUIStore.getState().pendingDiffFile,
         }, { replace: true, force: true });
       }
     };
@@ -201,10 +203,8 @@ export function useRouter(): void {
       return;
     }
 
-    let prevSurface: WorkspaceSurface = useUIStore.getState().activeSurface;
     let prevSettingsOpen: boolean = useUIStore.getState().isSettingsDialogOpen;
     let prevSettingsPath: string = useUIStore.getState().settingsPage;
-    let prevDiffFile: string | null = useUIStore.getState().pendingDiffFile;
 
     const unsubscribe = useUIStore.subscribe((state) => {
       // Skip if we're currently applying a route
@@ -212,19 +212,13 @@ export function useRouter(): void {
         return;
       }
 
-      const surfaceChanged = state.activeSurface !== prevSurface;
       const settingsOpenChanged = state.isSettingsDialogOpen !== prevSettingsOpen;
       const settingsPathChanged = state.settingsPage !== prevSettingsPath;
-      const diffFileChanged = state.pendingDiffFile !== prevDiffFile && state.activeSurface === 'diff';
 
-      // Update tracking vars
-      prevSurface = state.activeSurface;
       prevSettingsOpen = state.isSettingsDialogOpen;
       prevSettingsPath = state.settingsPage;
-      prevDiffFile = state.pendingDiffFile;
 
-      // Only sync if something relevant changed
-      if (surfaceChanged || settingsOpenChanged || settingsPathChanged || diffFileChanged) {
+      if (settingsOpenChanged || settingsPathChanged) {
         syncURLFromState();
       }
     });
@@ -252,10 +246,6 @@ export function useRouter(): void {
         if (uiState.isSettingsDialogOpen) {
           setSettingsDialogOpen(false);
         }
-        // Reset to chat when no route view is specified.
-        if (uiState.activeSurface !== 'chat') {
-          setActiveSurface('chat');
-        }
       }
     };
 
@@ -264,5 +254,5 @@ export function useRouter(): void {
     return () => {
       window.removeEventListener('popstate', handlePopState);
     };
-  }, [applyRoute, isVSCode, isEmbeddedChat, setActiveSurface, setSettingsDialogOpen]);
+  }, [applyRoute, isVSCode, isEmbeddedChat, setSettingsDialogOpen]);
 }
diff --git a/packages/ui/src/index.css b/packages/ui/src/index.css
index c487cd09..59de661d 100644
--- a/packages/ui/src/index.css
+++ b/packages/ui/src/index.css
@@ -258,7 +258,12 @@ div[data-chat-input-footer="true"] {
 
 /* Scroll shadow (HeroUI) fallback styling to ensure visible gradients without the Tailwind plugin */
 [data-scroll-shadow="true"] {
-  --scroll-shadow-size: var(--scroll-shadow-size, 48px);
+  /* A concrete default, not var(--scroll-shadow-size, 48px): a custom
+     property referencing itself is a cycle and computes to invalid, which
+     silently killed every mask below for consumers that don't set the
+     variable inline (the hook-based chat scroller). Inline styles from the
+     ScrollShadow component still override this. */
+  --scroll-shadow-size: 48px;
 }
 
 [data-scroll-shadow="true"][data-orientation="vertical"] {
@@ -888,15 +893,15 @@ html:not(.dark) .chat-scroll {
 }
 
 /* Hide the long active todo before it can collide with the changed-files summary. */
-@container status-row (max-width: 38rem) {
-  .status-row__active-todo {
+@container composer-status-bar (max-width: 38rem) {
+  .composer-status-bar__active-todo {
     display: none;
   }
 }
 
 /* Hide the secondary changed-files label on narrow mobile layouts. */
-@container status-row (max-width: 30rem) {
-  .status-row__changed-label {
+@container composer-status-bar (max-width: 30rem) {
+  .composer-status-bar__changed-label {
     display: none;
   }
 }
@@ -1336,6 +1341,14 @@ html:not(.dark) .chat-scroll {
   background: transparent !important;
 }
 
+/* The marked renderer uses its own code-body wrapper instead of Streamdown's. */
+.markdown-content [data-md-code-body],
+.markdown-content [data-md-code-body] pre,
+.markdown-content [data-md-code-body] code,
+.markdown-content [data-md-code-body] [data-md-code-lines] {
+  background: transparent !important;
+}
+
 .markdown-content [data-md-code-lines] {
   display: block;
   min-width: 100%;
@@ -1348,6 +1361,64 @@ html:not(.dark) .chat-scroll {
   min-width: 100%;
 }
 
+/* First uncached open of a session shows a hydration skeleton; the real
+   timeline replacing it fades in once instead of popping. Cached session
+   switches never carry this class and stay instant. */
+@keyframes oc-chat-hydration-reveal {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.oc-chat-hydration-reveal {
+  animation: oc-chat-hydration-reveal 180ms ease-out both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .oc-chat-hydration-reveal {
+    animation: none;
+  }
+}
+
+/* A block committed mid-stream enters with a fade and a gentle rise —
+   compositor-only properties, deliberately nothing heavier: during a long
+   stream the follow scroll masks the entrance anyway, so the effect only
+   really shows on short replies, and those must not pay for a GPU filter.
+   Blocks committed in the same tick cascade via --oc-md-enter-delay set
+   inline by the renderer. */
+@keyframes oc-md-block-enter {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.oc-md-block-enter {
+  animation: oc-md-block-enter 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
+  animation-delay: var(--oc-md-enter-delay, 0ms);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .oc-md-block-enter {
+    animation: none;
+  }
+}
+
+/* While streaming defers the per-line gutter markup, hold its horizontal
+   footprint (2rem column + 0.75rem gap) so the finished pass only fills in
+   the numbers instead of shifting every code line. */
+.markdown-content pre[data-md-gutter-reserved] > code {
+  display: block;
+  padding-left: 2.75rem;
+}
+
 .markdown-content [data-md-code-line-number] {
   align-self: stretch;
   padding-right: 0.75rem;
@@ -1781,3 +1852,52 @@ html.desktop-runtime [class*="cursor-pointer"] {
 html.desktop-runtime .markdown-content [data-openchamber-file-link="true"] {
   cursor: default;
 }
+
+/* Header session tabs: thin separators between inactive neighbours, hidden
+   around the active or hovered tab (mirrors the titlebar tab language). */
+.session-tab-slot {
+  position: relative;
+}
+.session-tab-slot:not(:first-child):not([data-active='true'])::before {
+  content: '';
+  position: absolute;
+  top: 8px;
+  inset-inline-start: -2.75px;
+  width: 1.5px;
+  height: 12px;
+  border-radius: 9999px;
+  background: var(--border);
+}
+.session-tab-slot[data-active='true'] + .session-tab-slot::before,
+.session-tab-slot:not([data-active='true']):hover::before,
+.session-tab-slot:not([data-active='true']):hover + .session-tab-slot::before {
+  display: none;
+}
+
+/* Header session tabs scroller: never show a scrollbar (it shifts the header
+   content vertically); overflow is communicated by the edge fades. */
+.session-tabs-scroll {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.session-tabs-scroll::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+}
+
+/* Session tab titles: fade out instead of "..." — the ellipsis reads as
+   clutter next to the tab's status dot and hover controls. Short titles
+   never reach the fade zone (the span spans the tab, not the text). The
+   fade belongs to the resting state only: while the tab is hovered or its
+   controls are open, the title clips hard so the smear never sits next to
+   the menu/close/rename controls. */
+.session-tab-title {
+  -webkit-mask-image: linear-gradient(to right, black calc(100% - 14px), transparent);
+  mask-image: linear-gradient(to right, black calc(100% - 14px), transparent);
+}
+.session-tab:hover .session-tab-title,
+.session-tab[data-controls-open='true'] .session-tab-title {
+  -webkit-mask-image: none;
+  mask-image: none;
+}
diff --git a/packages/ui/src/lib/addSelectionToChat.test.ts b/packages/ui/src/lib/addSelectionToChat.test.ts
index 6acc225a..65a50d33 100644
--- a/packages/ui/src/lib/addSelectionToChat.test.ts
+++ b/packages/ui/src/lib/addSelectionToChat.test.ts
@@ -2,7 +2,7 @@ import { afterEach, beforeEach, describe, expect, mock, test } from 'bun:test';
 
 const focusChatInputCalls: number[] = [];
 const pendingInputCalls: Array<{ text: string | null; mode?: string }> = [];
-const activeMainTabCalls: string[] = [];
+const activeSurfaceCalls: string[] = [];
 const sessionSwitcherCalls: boolean[] = [];
 const codeMirrorDispatches: Array<{ selection: { anchor: number } }> = [];
 
@@ -41,8 +41,8 @@ mock.module('@/sync/input-store', () => ({
 mock.module('@/stores/useUIStore', () => ({
   useUIStore: {
     getState: () => ({
-      setActiveMainTab: (tab: string) => {
-        activeMainTabCalls.push(tab);
+      setActiveSurface: (tab: string) => {
+        activeSurfaceCalls.push(tab);
       },
       setSessionSwitcherOpen: (open: boolean) => {
         sessionSwitcherCalls.push(open);
@@ -86,7 +86,7 @@ const installSelectionEnvironment = (options: {
 const clearCalls = () => {
   focusChatInputCalls.length = 0;
   pendingInputCalls.length = 0;
-  activeMainTabCalls.length = 0;
+  activeSurfaceCalls.length = 0;
   sessionSwitcherCalls.length = 0;
   codeMirrorDispatches.length = 0;
   codeMirrorView = null;
@@ -262,7 +262,7 @@ describe('addSelectionToChat', () => {
     installSelectionEnvironment({ activeElement: textarea });
 
     expect(addSelectionToChat()).toBe(true);
-    expect(activeMainTabCalls).toEqual(['chat']);
+    expect(activeSurfaceCalls).toEqual(['chat']);
     expect(sessionSwitcherCalls).toEqual([false]);
     expect(pendingInputCalls).toEqual([{ text: '```md\nselected\n```', mode: 'append' }]);
 
@@ -290,7 +290,7 @@ describe('addSelectionToChat', () => {
 
     expect(addSelectionToChat()).toBe(false);
     expect(pendingInputCalls).toEqual([]);
-    expect(activeMainTabCalls).toEqual(['chat']);
+    expect(activeSurfaceCalls).toEqual(['chat']);
 
     await Promise.resolve();
     expect(focusChatInputCalls.length).toBe(1);
diff --git a/packages/ui/src/lib/addSelectionToChat.ts b/packages/ui/src/lib/addSelectionToChat.ts
index ce296569..fe1d8912 100644
--- a/packages/ui/src/lib/addSelectionToChat.ts
+++ b/packages/ui/src/lib/addSelectionToChat.ts
@@ -151,7 +151,6 @@ export const captureSelectionMarkdownForChat = (): string | null => {
 export const addSelectionToChat = (): boolean => {
   const markdown = captureSelectionMarkdownForChat();
 
-  useUIStore.getState().setActiveMainTab('chat');
   useUIStore.getState().setSessionSwitcherOpen(false);
 
   if (markdown) {
diff --git a/packages/ui/src/lib/api/types.ts b/packages/ui/src/lib/api/types.ts
index eaca77ed..d6eef89e 100644
--- a/packages/ui/src/lib/api/types.ts
+++ b/packages/ui/src/lib/api/types.ts
@@ -80,8 +80,19 @@ export interface ForceKillOptions {
   cwd?: string;
 }
 
+export interface TerminalServerSession {
+  sessionId: string;
+  cwd: string;
+  status: 'running' | 'exited';
+  createdAt: number | null;
+}
+
 export interface TerminalAPI {
   listShells?(): Promise<TerminalShellOption[]>;
+  /** Server-side sessions for a working directory; absent on runtimes without a server terminal list. */
+  listSessions?(cwd: string): Promise<TerminalServerSession[]>;
+  /** Marks the sessions as active so the server's idle sweep does not reap terminals an open client still shows. */
+  touchSessions?(sessionIds: string[]): Promise<void>;
   createSession(options: CreateTerminalOptions): Promise<TerminalSession>;
   connect(sessionId: string, handlers: TerminalHandlers): Subscription;
   sendInput(sessionId: string, input: string): Promise<void>;
diff --git a/packages/ui/src/lib/appearanceAutoSave.ts b/packages/ui/src/lib/appearanceAutoSave.ts
index efca7976..44fda25a 100644
--- a/packages/ui/src/lib/appearanceAutoSave.ts
+++ b/packages/ui/src/lib/appearanceAutoSave.ts
@@ -7,6 +7,7 @@ import type { TerminalShell } from '@/lib/api/types';
 
 type AppearanceSlice = {
   showReasoningTraces: boolean;
+  streamingAutoFollowEnabled: boolean;
   workStatusPanelEnabled: boolean;
   workStatusHiddenSections: string[];
   sessionRecapEnabled: boolean;
@@ -62,6 +63,7 @@ export const startAppearanceAutoSave = (): void => {
 
   let previous: AppearanceSlice = {
     showReasoningTraces: useUIStore.getState().showReasoningTraces,
+    streamingAutoFollowEnabled: useUIStore.getState().streamingAutoFollowEnabled,
     workStatusPanelEnabled: useUIStore.getState().workStatusPanelEnabled,
     workStatusHiddenSections: useUIStore.getState().workStatusHiddenSections,
     sessionRecapEnabled: useUIStore.getState().sessionRecapEnabled,
@@ -104,6 +106,7 @@ export const startAppearanceAutoSave = (): void => {
   useUIStore.subscribe((state) => {
     const current: AppearanceSlice = {
       showReasoningTraces: state.showReasoningTraces,
+      streamingAutoFollowEnabled: state.streamingAutoFollowEnabled,
       workStatusPanelEnabled: state.workStatusPanelEnabled,
       workStatusHiddenSections: state.workStatusHiddenSections,
       sessionRecapEnabled: state.sessionRecapEnabled,
@@ -156,6 +159,9 @@ export const startAppearanceAutoSave = (): void => {
     if (current.showReasoningTraces !== previous.showReasoningTraces) {
       diff.showReasoningTraces = current.showReasoningTraces;
     }
+    if (current.streamingAutoFollowEnabled !== previous.streamingAutoFollowEnabled) {
+      diff.streamingAutoFollowEnabled = current.streamingAutoFollowEnabled;
+    }
     if (current.sessionRecapEnabled !== previous.sessionRecapEnabled) {
       diff.sessionRecapEnabled = current.sessionRecapEnabled;
     }
diff --git a/packages/ui/src/lib/desktop.ts b/packages/ui/src/lib/desktop.ts
index 57579982..1163515d 100644
--- a/packages/ui/src/lib/desktop.ts
+++ b/packages/ui/src/lib/desktop.ts
@@ -131,6 +131,7 @@ export type DesktopSettings = {
   defaultVariant?: string;
   defaultAgent?: string;
   smallModelUseDefault?: boolean;
+  streamingAutoFollowEnabled?: boolean;
   sessionRecapEnabled?: boolean;
   sessionSuggestionEnabled?: boolean;
   sessionGoalEnabled?: boolean;
@@ -179,7 +180,6 @@ export type DesktopSettings = {
   collapsibleUserMessages?: boolean;
   stickyUserHeader?: boolean;
   promptNavigatorEnabled?: boolean;
-  expandedEditorToolbar?: boolean;
   wideChatLayoutEnabled?: boolean;
   showSplitAssistantMessageActions?: boolean;
   fontSize?: number;
diff --git a/packages/ui/src/lib/i18n/messages/de.settings.ts b/packages/ui/src/lib/i18n/messages/de.settings.ts
index 6a3410d0..1f1a2f48 100644
--- a/packages/ui/src/lib/i18n/messages/de.settings.ts
+++ b/packages/ui/src/lib/i18n/messages/de.settings.ts
@@ -1845,9 +1845,6 @@ export const settingsDict = {
   'settings.voice.page.field.ttsInputModeRaw': 'Rohes Markdown',
   'settings.voice.page.field.ttsInputModeSummarized': 'zusammengefasst',
   'settings.openchamber.visual.section.colorMode': 'Farbmodus',
-  'settings.openchamber.visual.section.mobileLayout': 'Mobiles Layout',
-  'settings.openchamber.visual.option.mobileLayout.default': 'Alt',
-  'settings.openchamber.visual.option.mobileLayout.new': 'Neu',
   'settings.openchamber.visual.section.localization': 'Lokalisierung',
   'settings.openchamber.visual.section.spacingAndLayout': 'Abstand & Layout',
   'settings.openchamber.visual.section.navigation': 'Navigation',
@@ -1859,6 +1856,10 @@ export const settingsDict = {
   'settings.openchamber.visual.section.showToolsOpenedByDefault': 'Werkzeuge standardmäßig geöffnet anzeigen:',
   'settings.openchamber.visual.section.sessionAssistance': 'Sitzungshilfe',
   'settings.openchamber.visual.section.reasoning': 'Reasoning',
+  'settings.openchamber.visual.section.streaming': 'Streaming',
+  'settings.openchamber.visual.field.streamingAutoFollow': 'Neuen Inhalten beim Streaming folgen',
+  'settings.openchamber.visual.field.streamingAutoFollowAria': 'Neuen Inhalten automatisch folgen, während eine Antwort gestreamt wird',
+  'settings.openchamber.visual.field.streamingAutoFollowInfo': 'Während eine Antwort eintrifft, folgt die Ansicht laufend dem neuesten Inhalt. Deaktivieren, um die Ansicht ruhig zu halten und manuell zu scrollen.',
   'settings.openchamber.visual.section.messageAppearance': 'Nachrichten-Erscheinungsbild',
   'settings.openchamber.visual.section.toolsAndFiles': 'Werkzeuge & Dateien',
   'settings.openchamber.visual.section.composer': 'Komponist',
@@ -1920,6 +1921,10 @@ export const settingsDict = {
   'settings.openchamber.visual.actions.resetInputBarOffsetAria': 'Versatz der Eingabeleiste zurücksetzen',
   'settings.openchamber.visual.field.terminalQuickKeysAria': 'Schnelltasten des Terminals',
   'settings.openchamber.visual.field.terminalQuickKeys': 'Schnelltasten des Terminals',
+  'settings.openchamber.visual.field.sessionTabsGroup': 'Sitzungs-Tabs',
+  'settings.openchamber.visual.field.sessionTabs': 'Sitzungen als Tabs in der Kopfzeile anzeigen',
+  'settings.openchamber.visual.field.sessionTabsAria': 'Sitzungs-Tabs in der Kopfzeile umschalten',
+  'settings.openchamber.visual.field.sessionTabsInfo': 'Geöffnete Sitzungen erscheinen als Tabs in der Kopfzeile. Ausgeschaltet zeigt die Kopfzeile wieder nur den Sitzungstitel.',
   'settings.openchamber.visual.field.terminalQuickKeysTooltip': 'Esc, Strg, Pfeiltasten in der Terminalansicht anzeigen',
   'settings.openchamber.visual.field.fileEditorKeymap': 'Tastaturlayout für Datei-Editor',
   'settings.openchamber.visual.option.fileEditorKeymap.default': 'Standard',
@@ -1952,8 +1957,6 @@ export const settingsDict = {
   'settings.openchamber.visual.field.stickyUserHeader': 'Fixierter Benutzerkopf',
   'settings.openchamber.visual.field.promptNavigatorEnabledAria': 'Prompt-Navigator',
   'settings.openchamber.visual.field.promptNavigatorEnabled': 'Prompt-Navigator',
-  'settings.openchamber.visual.field.expandedEditorToolbarAria': 'Editor-Werkzeugleiste immer anzeigen',
-  'settings.openchamber.visual.field.expandedEditorToolbar': 'Editor-Werkzeugleiste immer anzeigen (unter den Datei-Reitern angeheftet)',
   'settings.openchamber.visual.field.wideChatLayoutAria': 'Breites Chat-Layout',
   'settings.openchamber.visual.field.wideChatLayout': 'Breites Chat-Layout',
   'settings.openchamber.visual.field.codeBlockLineWrapAria': 'Codeblock-Zeilen umbrechen',
diff --git a/packages/ui/src/lib/i18n/messages/de.ts b/packages/ui/src/lib/i18n/messages/de.ts
index f10e1620..c252eb64 100644
--- a/packages/ui/src/lib/i18n/messages/de.ts
+++ b/packages/ui/src/lib/i18n/messages/de.ts
@@ -419,6 +419,10 @@ export const dict = {
   'sessions.sidebar.activity.chatsEmpty': 'Noch keine Chats.',
   'chat.chatInput.chooseProject': 'Projekt auswählen',
   'sessions.switcher.openAria': 'Sitzungswechsler öffnen',
+  'header.sessionTabs.stripAria': 'Offene Sitzungen',
+  'header.sessionTabs.tabMenuAria': 'Aktionen für den Sitzungs-Tab',
+  'header.sessionTabs.closeTab': 'Tab schließen',
+  'header.sessionTabs.closeOtherTabs': 'Andere Tabs schließen',
   'sessions.switcher.empty': 'Keine kürzlichen Sitzungen',
   'sessions.switcher.draftTitle': 'Neue Sitzung',
   'sessions.sidebar.updateCheck.errorTitle': 'Fehler beim Prüfen auf Aktualisierungen',
diff --git a/packages/ui/src/lib/i18n/messages/en.settings.ts b/packages/ui/src/lib/i18n/messages/en.settings.ts
index 525d76f3..b8718cda 100644
--- a/packages/ui/src/lib/i18n/messages/en.settings.ts
+++ b/packages/ui/src/lib/i18n/messages/en.settings.ts
@@ -1913,9 +1913,6 @@ export const settingsDict = {
   'settings.voice.page.field.ttsInputModeSummarized': 'summarized',
   'settings.openchamber.visual.section.colorMode': 'Color Mode',
   'settings.openchamber.visual.section.colorModeAndTheme': 'Color mode & Theme',
-  'settings.openchamber.visual.section.mobileLayout': 'Mobile Layout',
-  'settings.openchamber.visual.option.mobileLayout.default': 'Old',
-  'settings.openchamber.visual.option.mobileLayout.new': 'New',
   'settings.openchamber.visual.section.localization': 'Localization',
   'settings.openchamber.visual.section.spacingAndLayout': 'Spacing & Layout',
   'settings.openchamber.visual.section.densityAndType': 'Density & type',
@@ -1932,6 +1929,10 @@ export const settingsDict = {
   'settings.openchamber.visual.section.showToolsOpenedByDefault': 'Show tools opened by default',
   'settings.openchamber.visual.section.sessionAssistance': 'Session Assistance',
   'settings.openchamber.visual.section.reasoning': 'Reasoning',
+  'settings.openchamber.visual.section.streaming': 'Streaming',
+  'settings.openchamber.visual.field.streamingAutoFollow': 'Follow new content while streaming',
+  'settings.openchamber.visual.field.streamingAutoFollowAria': 'Automatically follow new content while a response streams',
+  'settings.openchamber.visual.field.streamingAutoFollowInfo': 'While a reply streams in, the view keeps gliding to the newest content. Turn this off to keep the view still and scroll manually.',
   'settings.openchamber.visual.section.messageAppearance': 'Message Appearance',
   'settings.openchamber.visual.section.toolsAndFiles': 'Tools & Files',
   'settings.openchamber.visual.section.composer': 'Composer',
@@ -1998,6 +1999,10 @@ export const settingsDict = {
   'settings.openchamber.visual.actions.resetInputBarOffsetAria': 'Reset input bar offset',
   'settings.openchamber.visual.field.terminalQuickKeysAria': 'Terminal quick keys',
   'settings.openchamber.visual.field.terminalQuickKeys': 'Terminal Quick Keys',
+  'settings.openchamber.visual.field.sessionTabsGroup': 'Session tabs',
+  'settings.openchamber.visual.field.sessionTabs': 'Show sessions as tabs in the header',
+  'settings.openchamber.visual.field.sessionTabsAria': 'Toggle session tabs in the header',
+  'settings.openchamber.visual.field.sessionTabsInfo': 'Sessions you open line up as tabs in the header. Turning this off restores the plain session title.',
   'settings.openchamber.visual.field.terminalQuickKeysTooltip': 'Show Esc, Ctrl, Arrows in terminal view',
   'settings.openchamber.visual.field.fileEditorKeymap': 'File editor keymap',
   'settings.openchamber.visual.option.fileEditorKeymap.default': 'Default',
@@ -2030,8 +2035,6 @@ export const settingsDict = {
   'settings.openchamber.visual.field.stickyUserHeader': 'Sticky User Header',
   'settings.openchamber.visual.field.promptNavigatorEnabledAria': 'Prompt navigator',
   'settings.openchamber.visual.field.promptNavigatorEnabled': 'Prompt Navigator',
-  'settings.openchamber.visual.field.expandedEditorToolbarAria': 'Always show editor toolbar',
-  'settings.openchamber.visual.field.expandedEditorToolbar': 'Always show editor toolbar (docked under the file tabs)',
   'settings.openchamber.visual.field.autoSaveEnabledAria': 'Auto-save files',
   'settings.openchamber.visual.field.autoSaveEnabled': 'Auto-save files',
   'settings.openchamber.visual.field.autoSaveEnabledInfo': 'Automatically save file edits after you stop typing. Disable to require manual save.',
diff --git a/packages/ui/src/lib/i18n/messages/en.ts b/packages/ui/src/lib/i18n/messages/en.ts
index 840ca565..ce35104a 100644
--- a/packages/ui/src/lib/i18n/messages/en.ts
+++ b/packages/ui/src/lib/i18n/messages/en.ts
@@ -481,6 +481,10 @@ export const dict = {
   'sessions.archivePage.deleteSessionAria': 'Delete {title}',
   'sessions.archivePage.restoreSessionAria': 'Restore {title}',
   'sessions.switcher.openAria': 'Open session switcher',
+  'header.sessionTabs.stripAria': 'Open sessions',
+  'header.sessionTabs.tabMenuAria': 'Session tab actions',
+  'header.sessionTabs.closeTab': 'Close tab',
+  'header.sessionTabs.closeOtherTabs': 'Close other tabs',
   'sessions.switcher.empty': 'No recent sessions',
   'sessions.switcher.draftTitle': 'New session',
   'sessions.sidebar.updateCheck.errorTitle': 'Failed to check for updates',
diff --git a/packages/ui/src/lib/i18n/messages/es.settings.ts b/packages/ui/src/lib/i18n/messages/es.settings.ts
index b841e8da..b05c568c 100644
--- a/packages/ui/src/lib/i18n/messages/es.settings.ts
+++ b/packages/ui/src/lib/i18n/messages/es.settings.ts
@@ -1890,9 +1890,6 @@ export const settingsDict = {
   "settings.voice.page.field.ttsInputModeSummarized": "resumido",
   "settings.openchamber.visual.section.colorMode": "Modo de color",
   "settings.openchamber.visual.section.colorModeAndTheme": "Modo de color y tema",
-  "settings.openchamber.visual.section.mobileLayout": "Diseño móvil",
-  "settings.openchamber.visual.option.mobileLayout.default": "Anterior",
-  "settings.openchamber.visual.option.mobileLayout.new": "Nuevo",
   "settings.openchamber.visual.section.localization": "Localización",
   "settings.openchamber.visual.section.spacingAndLayout": "Espaciado y diseño",
   "settings.openchamber.visual.section.densityAndType": "Densidad y tipografía",
@@ -1909,6 +1906,10 @@ export const settingsDict = {
   "settings.openchamber.visual.section.showToolsOpenedByDefault": "Mostrar herramientas abiertas por defecto",
   "settings.openchamber.visual.section.sessionAssistance": "Asistencia de sesión",
   "settings.openchamber.visual.section.reasoning": "Razonamiento",
+  "settings.openchamber.visual.section.streaming": "Streaming",
+  "settings.openchamber.visual.field.streamingAutoFollow": "Seguir el contenido nuevo durante el streaming",
+  "settings.openchamber.visual.field.streamingAutoFollowAria": "Seguir automáticamente el contenido nuevo mientras se transmite una respuesta",
+  "settings.openchamber.visual.field.streamingAutoFollowInfo": "Mientras llega una respuesta, la vista se desplaza hacia el contenido más reciente. Desactívalo para mantener la vista quieta y desplazarte manualmente.",
   "settings.openchamber.visual.section.messageAppearance": "Apariencia de los mensajes",
   "settings.openchamber.visual.section.toolsAndFiles": "Herramientas y archivos",
   "settings.openchamber.visual.section.composer": "Compositor",
@@ -1975,6 +1976,10 @@ export const settingsDict = {
   "settings.openchamber.visual.actions.resetInputBarOffsetAria": "Restablecer desplazamiento de la barra de entrada",
   "settings.openchamber.visual.field.terminalQuickKeysAria": "Teclas rápidas del terminal",
   "settings.openchamber.visual.field.terminalQuickKeys": "Teclas rápidas del terminal",
+  "settings.openchamber.visual.field.sessionTabsGroup": "Pestañas de sesión",
+  "settings.openchamber.visual.field.sessionTabs": "Mostrar las sesiones como pestañas en el encabezado",
+  "settings.openchamber.visual.field.sessionTabsAria": "Alternar las pestañas de sesión en el encabezado",
+  "settings.openchamber.visual.field.sessionTabsInfo": "Las sesiones que abres se alinean como pestañas en el encabezado. Al desactivarlo, el encabezado vuelve a mostrar solo el título de la sesión.",
   "settings.openchamber.visual.field.terminalQuickKeysTooltip": "Mostrar Esc, Ctrl y flechas en la vista del terminal",
   "settings.openchamber.visual.field.fileEditorKeymap": "Mapa de teclas del editor de archivos",
   "settings.openchamber.visual.option.fileEditorKeymap.default": "Predeterminado",
@@ -2007,8 +2012,6 @@ export const settingsDict = {
   "settings.openchamber.visual.field.stickyUserHeader": "Encabezado de usuario fijo",
   "settings.openchamber.visual.field.promptNavigatorEnabledAria": "Navegador de prompts",
   "settings.openchamber.visual.field.promptNavigatorEnabled": "Navegador de prompts",
-  "settings.openchamber.visual.field.expandedEditorToolbarAria": "Mostrar siempre la barra de herramientas del editor",
-  "settings.openchamber.visual.field.expandedEditorToolbar": "Mostrar siempre la barra de herramientas del editor (anclada bajo las pestañas)",
   "settings.openchamber.visual.field.autoSaveEnabledAria": "Guardado automático de archivos",
   "settings.openchamber.visual.field.autoSaveEnabled": "Guardado automático de archivos",
   "settings.openchamber.visual.field.autoSaveEnabledInfo": "Guarda automáticamente las ediciones del archivo después de dejar de escribir. Desactívalo para exigir un guardado manual.",
diff --git a/packages/ui/src/lib/i18n/messages/es.ts b/packages/ui/src/lib/i18n/messages/es.ts
index 5ebfe9e6..406db7e4 100644
--- a/packages/ui/src/lib/i18n/messages/es.ts
+++ b/packages/ui/src/lib/i18n/messages/es.ts
@@ -482,6 +482,10 @@ export const dict: Record<I18nKey, string> = {
   "sessions.archivePage.deleteSessionAria": "Eliminar {title}",
   "sessions.archivePage.restoreSessionAria": "Restaurar {title}",
   "sessions.switcher.openAria": "Abrir selector de sesiones",
+  "header.sessionTabs.stripAria": "Sesiones abiertas",
+  "header.sessionTabs.tabMenuAria": "Acciones de la pestaña de sesión",
+  "header.sessionTabs.closeTab": "Cerrar pestaña",
+  "header.sessionTabs.closeOtherTabs": "Cerrar las demás pestañas",
   "sessions.switcher.empty": "No hay sesiones recientes",
   "sessions.switcher.draftTitle": "Nueva sesión",
   "sessions.sidebar.updateCheck.errorTitle": "No se pudo comprobar actualizaciones",
diff --git a/packages/ui/src/lib/i18n/messages/fr.settings.ts b/packages/ui/src/lib/i18n/messages/fr.settings.ts
index 88d46f33..345e0c08 100644
--- a/packages/ui/src/lib/i18n/messages/fr.settings.ts
+++ b/packages/ui/src/lib/i18n/messages/fr.settings.ts
@@ -1820,6 +1820,10 @@ export const settingsDict = {
   'settings.openchamber.visual.section.showToolsOpenedByDefault': 'Afficher les outils ouverts par défaut',
   'settings.openchamber.visual.section.sessionAssistance': 'Assistance de session',
   'settings.openchamber.visual.section.reasoning': 'Raisonnement',
+  'settings.openchamber.visual.section.streaming': 'Streaming',
+  'settings.openchamber.visual.field.streamingAutoFollow': 'Suivre le nouveau contenu pendant le streaming',
+  'settings.openchamber.visual.field.streamingAutoFollowAria': 'Suivre automatiquement le nouveau contenu pendant la diffusion d’une réponse',
+  'settings.openchamber.visual.field.streamingAutoFollowInfo': 'Pendant qu’une réponse arrive, la vue glisse vers le contenu le plus récent. Désactivez pour garder la vue immobile et défiler manuellement.',
   'settings.openchamber.visual.section.messageAppearance': 'Apparence des messages',
   'settings.openchamber.visual.section.toolsAndFiles': 'Outils et fichiers',
   'settings.openchamber.visual.section.composer': 'Zone de saisie',
@@ -1882,6 +1886,10 @@ export const settingsDict = {
   'settings.openchamber.visual.actions.resetInputBarOffsetAria': 'Réinitialiser le décalage de la barre d\'entrée',
   'settings.openchamber.visual.field.terminalQuickKeysAria': 'Touches rapides du terminal',
   'settings.openchamber.visual.field.terminalQuickKeys': 'Touches rapides du terminal',
+  'settings.openchamber.visual.field.sessionTabsGroup': 'Onglets de session',
+  'settings.openchamber.visual.field.sessionTabs': 'Afficher les sessions sous forme d\'onglets dans l\'en-tête',
+  'settings.openchamber.visual.field.sessionTabsAria': 'Basculer les onglets de session dans l\'en-tête',
+  'settings.openchamber.visual.field.sessionTabsInfo': 'Les sessions ouvertes s\'alignent en onglets dans l\'en-tête. Désactivé, l\'en-tête n\'affiche que le titre de la session.',
   'settings.openchamber.visual.field.terminalQuickKeysTooltip': 'Afficher Esc, Ctrl, Flèches dans la vue du terminal',
   'settings.openchamber.visual.field.activityDefaultModeAria': 'Mode d\'activité par défaut : {option}',
   'settings.openchamber.visual.field.showExpandedBashToolsAria': 'Afficher les outils bash étendus',
@@ -1911,8 +1919,6 @@ export const settingsDict = {
   'settings.openchamber.visual.field.stickyUserHeader': 'En-tête utilisateur collant',
   'settings.openchamber.visual.field.promptNavigatorEnabledAria': 'Navigateur de prompts',
   'settings.openchamber.visual.field.promptNavigatorEnabled': 'Navigateur de prompts',
-  'settings.openchamber.visual.field.expandedEditorToolbarAria': 'Toujours afficher la barre d’outils de l’éditeur',
-  'settings.openchamber.visual.field.expandedEditorToolbar': 'Toujours afficher la barre d’outils de l’éditeur (ancrée sous les onglets de fichiers)',
   'settings.openchamber.visual.field.autoSaveEnabledAria': 'Enregistrement automatique des fichiers',
   'settings.openchamber.visual.field.autoSaveEnabled': 'Enregistrement automatique des fichiers',
   'settings.openchamber.visual.field.autoSaveEnabledInfo': 'Enregistre automatiquement les modifications après l’arrêt de la saisie. Désactivez pour exiger un enregistrement manuel.',
@@ -2147,9 +2153,6 @@ export const settingsDict = {
   'settings.voice.page.field.ttsInputModeSanitized': 'Nettoyé',
   'settings.voice.page.field.ttsInputModeRaw': 'Markdown brut',
   'settings.voice.page.field.ttsInputModeSummarized': 'résumé',
-  'settings.openchamber.visual.section.mobileLayout': 'Mise en page mobile',
-  'settings.openchamber.visual.option.mobileLayout.default': 'Ancienne',
-  'settings.openchamber.visual.option.mobileLayout.new': 'Nouvelle',
   'settings.openchamber.visual.field.dockBadge': 'Badge du Dock',
   'settings.openchamber.visual.field.dockBadgeHint': 'Afficher sur l’icône du Dock de macOS le nombre de discussions avec une activité non vue.',
   'settings.openchamber.visual.actions.saveAndRestart': 'Enregistrer et redémarrer',
diff --git a/packages/ui/src/lib/i18n/messages/fr.ts b/packages/ui/src/lib/i18n/messages/fr.ts
index 0b2f8d84..aca11c52 100644
--- a/packages/ui/src/lib/i18n/messages/fr.ts
+++ b/packages/ui/src/lib/i18n/messages/fr.ts
@@ -312,6 +312,10 @@ export const dict = {
   'sessions.archivePage.deleteSessionAria': 'Supprimer {title}',
   'sessions.archivePage.restoreSessionAria': 'Restaurer {title}',
   'sessions.switcher.openAria': 'Sélecteur de session ouvert',
+  'header.sessionTabs.stripAria': 'Sessions ouvertes',
+  'header.sessionTabs.tabMenuAria': 'Actions de l\'onglet de session',
+  'header.sessionTabs.closeTab': 'Fermer l\'onglet',
+  'header.sessionTabs.closeOtherTabs': 'Fermer les autres onglets',
   'sessions.switcher.empty': 'Aucune session récente',
   'sessions.switcher.draftTitle': 'Nouvelle session',
   'sessions.sidebar.updateCheck.errorTitle': 'Échec de la vérification des mises à jour',
diff --git a/packages/ui/src/lib/i18n/messages/ja.settings.ts b/packages/ui/src/lib/i18n/messages/ja.settings.ts
index f4070831..8d6f1c1b 100644
--- a/packages/ui/src/lib/i18n/messages/ja.settings.ts
+++ b/packages/ui/src/lib/i18n/messages/ja.settings.ts
@@ -1923,9 +1923,6 @@ export const settingsDict = {
   'settings.voice.page.field.ttsInputModeSummarized': '要約',
   'settings.openchamber.visual.section.colorMode': 'カラーモード',
   'settings.openchamber.visual.section.colorModeAndTheme': 'カラーモードとテーマ',
-  'settings.openchamber.visual.section.mobileLayout': 'モバイルレイアウト',
-  'settings.openchamber.visual.option.mobileLayout.default': '旧',
-  'settings.openchamber.visual.option.mobileLayout.new': '新',
   'settings.openchamber.visual.section.localization': 'ローカライゼーション',
   'settings.openchamber.visual.section.spacingAndLayout': '間隔とレイアウト',
   'settings.openchamber.visual.section.densityAndType': '密度と書体',
@@ -1942,6 +1939,10 @@ export const settingsDict = {
   'settings.openchamber.visual.section.showToolsOpenedByDefault': 'デフォルトで開くツールを表示',
   'settings.openchamber.visual.section.sessionAssistance': 'セッション支援',
   'settings.openchamber.visual.section.reasoning': '推論',
+  'settings.openchamber.visual.section.streaming': 'ストリーミング',
+  'settings.openchamber.visual.field.streamingAutoFollow': '応答のストリーミング中に新しい内容を追従',
+  'settings.openchamber.visual.field.streamingAutoFollowAria': '応答のストリーミング中に新しい内容へ自動スクロールする',
+  'settings.openchamber.visual.field.streamingAutoFollowInfo': '応答の受信中、ビューは常に最新の内容へスクロールします。オフにするとビューは動かず、手動でスクロールできます。',
   'settings.openchamber.visual.section.messageAppearance': 'メッセージの外観',
   'settings.openchamber.visual.section.toolsAndFiles': 'ツールとファイル',
   'settings.openchamber.visual.section.composer': '入力欄',
@@ -2008,6 +2009,10 @@ export const settingsDict = {
   'settings.openchamber.visual.actions.resetInputBarOffsetAria': '入力バーオフセットをリセット',
   'settings.openchamber.visual.field.terminalQuickKeysAria': 'ターミナルクイックキー',
   'settings.openchamber.visual.field.terminalQuickKeys': 'ターミナルクイックキー',
+  'settings.openchamber.visual.field.sessionTabsGroup': 'セッションタブ',
+  'settings.openchamber.visual.field.sessionTabs': 'ヘッダーにセッションをタブとして表示',
+  'settings.openchamber.visual.field.sessionTabsAria': 'ヘッダーのセッションタブを切り替え',
+  'settings.openchamber.visual.field.sessionTabsInfo': '開いたセッションがヘッダーにタブとして並びます。オフにするとヘッダーはセッションタイトルのみ表示します。',
   'settings.openchamber.visual.field.terminalQuickKeysTooltip': 'ターミナルビューに Esc、Ctrl、矢印を表示',
   'settings.openchamber.visual.field.fileEditorKeymap': 'ファイルエディターキーマップ',
   'settings.openchamber.visual.option.fileEditorKeymap.default': 'デフォルト',
@@ -2040,8 +2045,6 @@ export const settingsDict = {
   'settings.openchamber.visual.field.stickyUserHeader': 'ユーザーヘッダー固定',
   'settings.openchamber.visual.field.promptNavigatorEnabledAria': 'プロンプトナビゲーター',
   'settings.openchamber.visual.field.promptNavigatorEnabled': 'プロンプトナビゲーター',
-  'settings.openchamber.visual.field.expandedEditorToolbarAria': 'エディターツールバーを常に表示',
-  'settings.openchamber.visual.field.expandedEditorToolbar': 'エディターツールバーを常に表示（ファイルタブの下にドッキング）',
   'settings.openchamber.visual.field.autoSaveEnabledAria': 'ファイルの自動保存',
   'settings.openchamber.visual.field.autoSaveEnabled': 'ファイルの自動保存',
   'settings.openchamber.visual.field.autoSaveEnabledInfo': '入力を止めた後にファイルの編集内容を自動保存します。無効にすると手動保存が必要になります。',
diff --git a/packages/ui/src/lib/i18n/messages/ja.ts b/packages/ui/src/lib/i18n/messages/ja.ts
index 4ef723b5..517c8f7d 100644
--- a/packages/ui/src/lib/i18n/messages/ja.ts
+++ b/packages/ui/src/lib/i18n/messages/ja.ts
@@ -482,6 +482,10 @@ export const dict: Record<I18nKey, string> = {
   'sessions.archivePage.deleteSessionAria': '{title} を削除',
   'sessions.archivePage.restoreSessionAria': '{title} を復元',
   'sessions.switcher.openAria': 'セッションスイッチャーを開く',
+  'header.sessionTabs.stripAria': '開いているセッション',
+  'header.sessionTabs.tabMenuAria': 'セッションタブの操作',
+  'header.sessionTabs.closeTab': 'タブを閉じる',
+  'header.sessionTabs.closeOtherTabs': '他のタブを閉じる',
   'sessions.switcher.empty': '最近のセッションはありません',
   'sessions.switcher.draftTitle': '新しいセッション',
   'sessions.sidebar.updateCheck.errorTitle': '更新の確認に失敗しました',
diff --git a/packages/ui/src/lib/i18n/messages/ko.settings.ts b/packages/ui/src/lib/i18n/messages/ko.settings.ts
index e4e2ef9e..07a8e7d0 100644
--- a/packages/ui/src/lib/i18n/messages/ko.settings.ts
+++ b/packages/ui/src/lib/i18n/messages/ko.settings.ts
@@ -1890,9 +1890,6 @@ export const settingsDict = {
   'settings.voice.page.field.ttsInputModeSummarized': '요약',
   'settings.openchamber.visual.section.colorMode': '색상 모드',
   'settings.openchamber.visual.section.colorModeAndTheme': '색상 모드 및 테마',
-  'settings.openchamber.visual.section.mobileLayout': '모바일 레이아웃',
-  'settings.openchamber.visual.option.mobileLayout.default': '이전',
-  'settings.openchamber.visual.option.mobileLayout.new': '새로움',
   'settings.openchamber.visual.section.localization': '지역화',
   'settings.openchamber.visual.section.spacingAndLayout': '간격 및 레이아웃',
   'settings.openchamber.visual.section.densityAndType': '밀도 및 서체',
@@ -1909,6 +1906,10 @@ export const settingsDict = {
   'settings.openchamber.visual.section.showToolsOpenedByDefault': '도구를 기본으로 펼쳐 표시',
   'settings.openchamber.visual.section.sessionAssistance': '세션 지원',
   'settings.openchamber.visual.section.reasoning': '추론',
+  'settings.openchamber.visual.section.streaming': '스트리밍',
+  'settings.openchamber.visual.field.streamingAutoFollow': '스트리밍 중 새 내용 따라가기',
+  'settings.openchamber.visual.field.streamingAutoFollowAria': '응답 스트리밍 중 새 내용으로 자동 스크롤',
+  'settings.openchamber.visual.field.streamingAutoFollowInfo': '응답이 스트리밍되는 동안 화면이 최신 내용으로 계속 이동합니다. 끄면 화면이 고정되어 직접 스크롤할 수 있습니다.',
   'settings.openchamber.visual.section.messageAppearance': '메시지 모양',
   'settings.openchamber.visual.section.toolsAndFiles': '도구 및 파일',
   'settings.openchamber.visual.section.composer': '입력창',
@@ -1975,6 +1976,10 @@ export const settingsDict = {
   'settings.openchamber.visual.actions.resetInputBarOffsetAria': '입력 바 오프셋 초기화',
   'settings.openchamber.visual.field.terminalQuickKeysAria': '터미널 빠른 키',
   'settings.openchamber.visual.field.terminalQuickKeys': '터미널 빠른 키',
+  'settings.openchamber.visual.field.sessionTabsGroup': '세션 탭',
+  'settings.openchamber.visual.field.sessionTabs': '헤더에 세션을 탭으로 표시',
+  'settings.openchamber.visual.field.sessionTabsAria': '헤더 세션 탭 전환',
+  'settings.openchamber.visual.field.sessionTabsInfo': '연 세션이 헤더에 탭으로 나열됩니다. 끄면 헤더에 세션 제목만 표시됩니다.',
   'settings.openchamber.visual.field.terminalQuickKeysTooltip': '터미널 보기에서 Esc, Ctrl, 화살표를 표시합니다',
   'settings.openchamber.visual.field.fileEditorKeymap': '파일 편집기 키맵',
   'settings.openchamber.visual.option.fileEditorKeymap.default': '기본값',
@@ -2007,8 +2012,6 @@ export const settingsDict = {
   'settings.openchamber.visual.field.stickyUserHeader': '고정 사용자 헤더',
   'settings.openchamber.visual.field.promptNavigatorEnabledAria': '프롬프트 탐색기',
   'settings.openchamber.visual.field.promptNavigatorEnabled': '프롬프트 탐색기',
-  'settings.openchamber.visual.field.expandedEditorToolbarAria': 'Always show editor toolbar',
-  'settings.openchamber.visual.field.expandedEditorToolbar': 'Always show editor toolbar (docked under the file tabs)',
   'settings.openchamber.visual.field.autoSaveEnabledAria': '파일 자동 저장',
   'settings.openchamber.visual.field.autoSaveEnabled': '파일 자동 저장',
   'settings.openchamber.visual.field.autoSaveEnabledInfo': '입력을 멈춘 후 파일 편집 내용을 자동으로 저장합니다. 끄면 수동으로 저장해야 합니다.',
diff --git a/packages/ui/src/lib/i18n/messages/ko.ts b/packages/ui/src/lib/i18n/messages/ko.ts
index f2574564..1fbc59f3 100644
--- a/packages/ui/src/lib/i18n/messages/ko.ts
+++ b/packages/ui/src/lib/i18n/messages/ko.ts
@@ -482,6 +482,10 @@ export const dict: Record<I18nKey, string> = {
   'sessions.archivePage.deleteSessionAria': '{title} 삭제',
   'sessions.archivePage.restoreSessionAria': '{title} 복원',
   'sessions.switcher.openAria': '세션 전환기 열기',
+  'header.sessionTabs.stripAria': '열린 세션',
+  'header.sessionTabs.tabMenuAria': '세션 탭 작업',
+  'header.sessionTabs.closeTab': '탭 닫기',
+  'header.sessionTabs.closeOtherTabs': '다른 탭 닫기',
   'sessions.switcher.empty': '최근 세션 없음',
   'sessions.switcher.draftTitle': '새 세션',
   'sessions.sidebar.updateCheck.errorTitle': '업데이트 확인 실패',
diff --git a/packages/ui/src/lib/i18n/messages/pl.settings.ts b/packages/ui/src/lib/i18n/messages/pl.settings.ts
index 7bebca44..1ce9c512 100644
--- a/packages/ui/src/lib/i18n/messages/pl.settings.ts
+++ b/packages/ui/src/lib/i18n/messages/pl.settings.ts
@@ -1111,8 +1111,6 @@ export const settingsDict = {
   'settings.openchamber.visual.field.stickyUserHeaderAria': 'Przyklejony nagłówek użytkownika',
   'settings.openchamber.visual.field.promptNavigatorEnabledAria': 'Nawigator promptów',
   'settings.openchamber.visual.field.promptNavigatorEnabled': 'Nawigator promptów',
-  'settings.openchamber.visual.field.expandedEditorToolbarAria': 'Always show editor toolbar',
-  'settings.openchamber.visual.field.expandedEditorToolbar': 'Always show editor toolbar (docked under the file tabs)',
   'settings.openchamber.visual.field.autoSaveEnabledAria': 'Autozapis plików',
   'settings.openchamber.visual.field.autoSaveEnabled': 'Autozapis plików',
   'settings.openchamber.visual.field.autoSaveEnabledInfo': 'Automatycznie zapisuje edycje pliku po zatrzymaniu pisania. Wyłącz, aby wymagać ręcznego zapisu.',
@@ -1124,6 +1122,10 @@ export const settingsDict = {
   'settings.openchamber.visual.option.terminalShell.auto': 'Automatycznie',
   'settings.openchamber.visual.field.editorFontSize': 'Rozmiar czcionki edytora',
   'settings.openchamber.visual.field.terminalQuickKeys': 'Szybkie klawisze terminala',
+  'settings.openchamber.visual.field.sessionTabsGroup': 'Karty sesji',
+  'settings.openchamber.visual.field.sessionTabs': 'Pokazuj sesje jako karty w nagłówku',
+  'settings.openchamber.visual.field.sessionTabsAria': 'Przełącz karty sesji w nagłówku',
+  'settings.openchamber.visual.field.sessionTabsInfo': 'Otwierane sesje układają się jako karty w nagłówku. Po wyłączeniu nagłówek pokazuje tylko tytuł sesji.',
   'settings.openchamber.visual.field.terminalQuickKeysAria': 'Szybkie klawisze terminala',
   'settings.openchamber.visual.field.terminalQuickKeysTooltip': 'Pokaż Esc, Ctrl i strzałki w widoku terminala',
   'settings.openchamber.visual.field.fileEditorKeymap': 'Mapa klawiszy edytora plików',
@@ -1196,9 +1198,6 @@ export const settingsDict = {
   'settings.openchamber.visual.section.chatFeatures': 'Funkcje',
   'settings.openchamber.visual.section.colorMode': 'Tryb kolorów',
   'settings.openchamber.visual.section.colorModeAndTheme': 'Tryb kolorów i motyw',
-  'settings.openchamber.visual.section.mobileLayout': 'Układ mobilny',
-  'settings.openchamber.visual.option.mobileLayout.default': 'Poprzedni',
-  'settings.openchamber.visual.option.mobileLayout.new': 'Nowy',
   'settings.openchamber.visual.section.diffLayout': 'Układ diffa',
   'settings.openchamber.visual.section.diffLayoutAria': 'Układ diffa',
   'settings.openchamber.visual.section.localization': 'Lokalizacja',
@@ -1210,6 +1209,10 @@ export const settingsDict = {
   'settings.openchamber.visual.section.showToolsOpenedByDefault': 'Pokaż narzędzia domyślnie otwarte',
   'settings.openchamber.visual.section.sessionAssistance': 'Wsparcie sesji',
   'settings.openchamber.visual.section.reasoning': 'Rozumowanie',
+  'settings.openchamber.visual.section.streaming': 'Streaming',
+  'settings.openchamber.visual.field.streamingAutoFollow': 'Podążaj za nową treścią podczas streamingu',
+  'settings.openchamber.visual.field.streamingAutoFollowAria': 'Automatycznie podążaj za nową treścią podczas streamowania odpowiedzi',
+  'settings.openchamber.visual.field.streamingAutoFollowInfo': 'Podczas napływania odpowiedzi widok płynnie podąża za najnowszą treścią. Wyłącz, aby widok pozostał nieruchomy i przewijać ręcznie.',
   'settings.openchamber.visual.section.messageAppearance': 'Wygląd wiadomości',
   'settings.openchamber.visual.section.toolsAndFiles': 'Narzędzia i pliki',
   'settings.openchamber.visual.section.composer': 'Pole wiadomości',
diff --git a/packages/ui/src/lib/i18n/messages/pl.ts b/packages/ui/src/lib/i18n/messages/pl.ts
index effc87df..f5c7c242 100644
--- a/packages/ui/src/lib/i18n/messages/pl.ts
+++ b/packages/ui/src/lib/i18n/messages/pl.ts
@@ -293,6 +293,10 @@ export const dict: Record<I18nKey, string> = {
   'sessions.archivePage.deleteSessionAria': 'Usuń {title}',
   'sessions.archivePage.restoreSessionAria': 'Przywróć {title}',
   'sessions.switcher.openAria': 'Otwórz przełącznik sesji',
+  'header.sessionTabs.stripAria': 'Otwarte sesje',
+  'header.sessionTabs.tabMenuAria': 'Akcje karty sesji',
+  'header.sessionTabs.closeTab': 'Zamknij kartę',
+  'header.sessionTabs.closeOtherTabs': 'Zamknij pozostałe karty',
   'sessions.switcher.empty': 'Brak ostatnich sesji',
   'sessions.switcher.draftTitle': 'Nowa sesja',
   'sessions.sidebar.updateCheck.errorTitle': 'Nie udało się sprawdzić aktualizacji',
diff --git a/packages/ui/src/lib/i18n/messages/pt-BR.settings.ts b/packages/ui/src/lib/i18n/messages/pt-BR.settings.ts
index ce24a8d0..f095bb16 100644
--- a/packages/ui/src/lib/i18n/messages/pt-BR.settings.ts
+++ b/packages/ui/src/lib/i18n/messages/pt-BR.settings.ts
@@ -1890,9 +1890,6 @@ export const settingsDict = {
   "settings.voice.page.field.ttsInputModeSummarized": "resumido",
   "settings.openchamber.visual.section.colorMode": "Modo de cor",
   "settings.openchamber.visual.section.colorModeAndTheme": "Modo de cor e tema",
-  "settings.openchamber.visual.section.mobileLayout": "Layout móvel",
-  "settings.openchamber.visual.option.mobileLayout.default": "Anterior",
-  "settings.openchamber.visual.option.mobileLayout.new": "Novo",
   "settings.openchamber.visual.section.localization": "Localização",
   "settings.openchamber.visual.section.spacingAndLayout": "Espaçamento e layout",
   "settings.openchamber.visual.section.densityAndType": "Densidade e tipografia",
@@ -1909,6 +1906,10 @@ export const settingsDict = {
   "settings.openchamber.visual.section.showToolsOpenedByDefault": "Mostrar ferramentas abertas por padrão",
   "settings.openchamber.visual.section.sessionAssistance": "Assistência da sessão",
   "settings.openchamber.visual.section.reasoning": "Raciocínio",
+  "settings.openchamber.visual.section.streaming": "Streaming",
+  "settings.openchamber.visual.field.streamingAutoFollow": "Seguir o novo conteúdo durante o streaming",
+  "settings.openchamber.visual.field.streamingAutoFollowAria": "Seguir automaticamente o novo conteúdo enquanto uma resposta é transmitida",
+  "settings.openchamber.visual.field.streamingAutoFollowInfo": "Enquanto uma resposta chega, a visualização acompanha o conteúdo mais recente. Desative para manter a visualização parada e rolar manualmente.",
   "settings.openchamber.visual.section.messageAppearance": "Aparência das mensagens",
   "settings.openchamber.visual.section.toolsAndFiles": "Ferramentas e arquivos",
   "settings.openchamber.visual.section.composer": "Campo de mensagem",
@@ -1975,6 +1976,10 @@ export const settingsDict = {
   "settings.openchamber.visual.actions.resetInputBarOffsetAria": "Redefinir deslocamento da barra de entrada",
   "settings.openchamber.visual.field.terminalQuickKeysAria": "Teclas rápidas do terminal",
   "settings.openchamber.visual.field.terminalQuickKeys": "Teclas rápidas do terminal",
+  "settings.openchamber.visual.field.sessionTabsGroup": "Abas de sessão",
+  "settings.openchamber.visual.field.sessionTabs": "Mostrar sessões como abas no cabeçalho",
+  "settings.openchamber.visual.field.sessionTabsAria": "Alternar abas de sessão no cabeçalho",
+  "settings.openchamber.visual.field.sessionTabsInfo": "As sessões abertas se alinham como abas no cabeçalho. Desativado, o cabeçalho volta a mostrar apenas o título da sessão.",
   "settings.openchamber.visual.field.terminalQuickKeysTooltip": "Mostrar Esc, Ctrl e flechas na vista do terminal",
   "settings.openchamber.visual.field.fileEditorKeymap": "Mapa de teclas do editor de arquivos",
   "settings.openchamber.visual.option.fileEditorKeymap.default": "Padrão",
@@ -2007,8 +2012,6 @@ export const settingsDict = {
   "settings.openchamber.visual.field.stickyUserHeader": "Cabeçalho do usuário fixo",
   "settings.openchamber.visual.field.promptNavigatorEnabledAria": "Navegador de prompts",
   "settings.openchamber.visual.field.promptNavigatorEnabled": "Navegador de prompts",
-  "settings.openchamber.visual.field.expandedEditorToolbarAria": "Mostrar sempre a barra de ferramentas do editor",
-  "settings.openchamber.visual.field.expandedEditorToolbar": "Mostrar sempre a barra de ferramentas do editor (ancorada sob as abas)",
   "settings.openchamber.visual.field.autoSaveEnabledAria": "Salvamento automático de arquivos",
   "settings.openchamber.visual.field.autoSaveEnabled": "Salvamento automático de arquivos",
   "settings.openchamber.visual.field.autoSaveEnabledInfo": "Salva automaticamente as edições do arquivo depois que você parar de digitar. Desative para exigir salvamento manual.",
diff --git a/packages/ui/src/lib/i18n/messages/pt-BR.ts b/packages/ui/src/lib/i18n/messages/pt-BR.ts
index 2706e9ba..b28afbd2 100644
--- a/packages/ui/src/lib/i18n/messages/pt-BR.ts
+++ b/packages/ui/src/lib/i18n/messages/pt-BR.ts
@@ -482,6 +482,10 @@ export const dict: Record<I18nKey, string> = {
   "sessions.archivePage.deleteSessionAria": "Excluir {title}",
   "sessions.archivePage.restoreSessionAria": "Restaurar {title}",
   "sessions.switcher.openAria": "Abrir seletor de sessões",
+  "header.sessionTabs.stripAria": "Sessões abertas",
+  "header.sessionTabs.tabMenuAria": "Ações da aba de sessão",
+  "header.sessionTabs.closeTab": "Fechar aba",
+  "header.sessionTabs.closeOtherTabs": "Fechar outras abas",
   "sessions.switcher.empty": "Nenhuma sessão recente",
   "sessions.switcher.draftTitle": "Nova sessão",
   "sessions.sidebar.updateCheck.errorTitle": "Não foi possível verificar atualizações",
diff --git a/packages/ui/src/lib/i18n/messages/uk.settings.ts b/packages/ui/src/lib/i18n/messages/uk.settings.ts
index 2d7dcb16..49c34b87 100644
--- a/packages/ui/src/lib/i18n/messages/uk.settings.ts
+++ b/packages/ui/src/lib/i18n/messages/uk.settings.ts
@@ -1890,9 +1890,6 @@ export const settingsDict = {
   "settings.voice.page.field.ttsInputModeSummarized": "скорочений",
   "settings.openchamber.visual.section.colorMode": "Режим теми",
   "settings.openchamber.visual.section.colorModeAndTheme": "Режим кольору та тема",
-  "settings.openchamber.visual.section.mobileLayout": "Мобільний макет",
-  "settings.openchamber.visual.option.mobileLayout.default": "Попередній",
-  "settings.openchamber.visual.option.mobileLayout.new": "Новий",
   "settings.openchamber.visual.section.localization": "Локалізація",
   "settings.openchamber.visual.section.spacingAndLayout": "Відступи й компонування",
   "settings.openchamber.visual.section.densityAndType": "Щільність і шрифти",
@@ -1909,6 +1906,10 @@ export const settingsDict = {
   "settings.openchamber.visual.section.showToolsOpenedByDefault": "Показувати інструменти відкритими за замовчуванням",
   "settings.openchamber.visual.section.sessionAssistance": "Допомога із сесією",
   "settings.openchamber.visual.section.reasoning": "Міркування",
+  "settings.openchamber.visual.section.streaming": "Стримінг",
+  "settings.openchamber.visual.field.streamingAutoFollow": "Слідкувати за новим вмістом під час стримінгу",
+  "settings.openchamber.visual.field.streamingAutoFollowAria": "Автоматично слідкувати за новим вмістом під час стримінгу відповіді",
+  "settings.openchamber.visual.field.streamingAutoFollowInfo": "Поки відповідь надходить, вигляд плавно рухається до найновішого вмісту. Вимкніть, щоб вигляд залишався нерухомим і гортати вручну.",
   "settings.openchamber.visual.section.messageAppearance": "Вигляд повідомлень",
   "settings.openchamber.visual.section.toolsAndFiles": "Інструменти та файли",
   "settings.openchamber.visual.section.composer": "Поле вводу",
@@ -1975,6 +1976,10 @@ export const settingsDict = {
   "settings.openchamber.visual.actions.resetInputBarOffsetAria": "Скинути зміщення панелі вводу",
   "settings.openchamber.visual.field.terminalQuickKeysAria": "Швидкі клавіші терміналу",
   "settings.openchamber.visual.field.terminalQuickKeys": "Швидкі клавіші терміналу",
+  "settings.openchamber.visual.field.sessionTabsGroup": "Вкладки сесій",
+  "settings.openchamber.visual.field.sessionTabs": "Показувати сесії як вкладки в хедері",
+  "settings.openchamber.visual.field.sessionTabsAria": "Перемкнути вкладки сесій у хедері",
+  "settings.openchamber.visual.field.sessionTabsInfo": "Відкриті сесії шикуються вкладками в хедері. Якщо вимкнено, хедер знову показує лише назву сесії.",
   "settings.openchamber.visual.field.terminalQuickKeysTooltip": "Показати Esc, Ctrl, стрілки в поданні терміналу",
   "settings.openchamber.visual.field.fileEditorKeymap": "Розкладка клавіш редактора файлів",
   "settings.openchamber.visual.option.fileEditorKeymap.default": "Типова",
@@ -2007,8 +2012,6 @@ export const settingsDict = {
   "settings.openchamber.visual.field.stickyUserHeader": "Закріплений заголовок користувача",
   "settings.openchamber.visual.field.promptNavigatorEnabledAria": "Навігатор промптів",
   "settings.openchamber.visual.field.promptNavigatorEnabled": "Навігатор промптів",
-  "settings.openchamber.visual.field.expandedEditorToolbarAria": "Завжди показувати панель інструментів редактора",
-  "settings.openchamber.visual.field.expandedEditorToolbar": "Завжди показувати панель інструментів редактора (закріплена під вкладками)",
   "settings.openchamber.visual.field.autoSaveEnabledAria": "Автозбереження файлів",
   "settings.openchamber.visual.field.autoSaveEnabled": "Автозбереження файлів",
   "settings.openchamber.visual.field.autoSaveEnabledInfo": "Автоматично зберігати зміни у файлі після того, як ви припините друкувати. Вимкніть, щоб зберігати лише вручну.",
diff --git a/packages/ui/src/lib/i18n/messages/uk.ts b/packages/ui/src/lib/i18n/messages/uk.ts
index 78c34a67..64dab9f0 100644
--- a/packages/ui/src/lib/i18n/messages/uk.ts
+++ b/packages/ui/src/lib/i18n/messages/uk.ts
@@ -482,6 +482,10 @@ export const dict: Record<I18nKey, string> = {
   "sessions.archivePage.deleteSessionAria": "Видалити {title}",
   "sessions.archivePage.restoreSessionAria": "Відновити {title}",
   "sessions.switcher.openAria": "Відкрити перемикач сесій",
+  "header.sessionTabs.stripAria": "Відкриті сесії",
+  "header.sessionTabs.tabMenuAria": "Дії вкладки сесії",
+  "header.sessionTabs.closeTab": "Закрити вкладку",
+  "header.sessionTabs.closeOtherTabs": "Закрити інші вкладки",
   "sessions.switcher.empty": "Немає недавніх сесій",
   "sessions.switcher.draftTitle": "Нова сесія",
   "sessions.sidebar.updateCheck.errorTitle": "Не вдалося перейти на наявність оновлень",
diff --git a/packages/ui/src/lib/i18n/messages/zh-CN.settings.ts b/packages/ui/src/lib/i18n/messages/zh-CN.settings.ts
index d648d30e..7874ce8e 100644
--- a/packages/ui/src/lib/i18n/messages/zh-CN.settings.ts
+++ b/packages/ui/src/lib/i18n/messages/zh-CN.settings.ts
@@ -1890,9 +1890,6 @@ export const settingsDict = {
   'settings.voice.page.field.ttsInputModeSummarized': '摘要',
   'settings.openchamber.visual.section.colorMode': '颜色模式',
   'settings.openchamber.visual.section.colorModeAndTheme': '颜色模式与主题',
-  'settings.openchamber.visual.section.mobileLayout': '移动端布局',
-  'settings.openchamber.visual.option.mobileLayout.default': '旧版',
-  'settings.openchamber.visual.option.mobileLayout.new': '新版',
   'settings.openchamber.visual.section.localization': '本地化',
   'settings.openchamber.visual.section.spacingAndLayout': '间距与布局',
   'settings.openchamber.visual.section.densityAndType': '密度与字体',
@@ -1909,6 +1906,10 @@ export const settingsDict = {
   'settings.openchamber.visual.section.showToolsOpenedByDefault': '默认展开以下工具',
   'settings.openchamber.visual.section.sessionAssistance': '会话辅助',
   'settings.openchamber.visual.section.reasoning': '推理',
+  'settings.openchamber.visual.section.streaming': '流式输出',
+  'settings.openchamber.visual.field.streamingAutoFollow': '流式输出时跟随新内容',
+  'settings.openchamber.visual.field.streamingAutoFollowAria': '在回复流式输出时自动跟随新内容',
+  'settings.openchamber.visual.field.streamingAutoFollowInfo': '回复流式输出时，视图会持续滚动到最新内容。关闭后视图保持不动，可手动滚动。',
   'settings.openchamber.visual.section.messageAppearance': '消息外观',
   'settings.openchamber.visual.section.toolsAndFiles': '工具和文件',
   'settings.openchamber.visual.section.composer': '输入框',
@@ -1975,6 +1976,10 @@ export const settingsDict = {
   'settings.openchamber.visual.actions.resetInputBarOffsetAria': '重置输入栏偏移',
   'settings.openchamber.visual.field.terminalQuickKeysAria': '终端快捷键',
   'settings.openchamber.visual.field.terminalQuickKeys': '终端快捷键',
+  'settings.openchamber.visual.field.sessionTabsGroup': '会话标签页',
+  'settings.openchamber.visual.field.sessionTabs': '在页眉中以标签页显示会话',
+  'settings.openchamber.visual.field.sessionTabsAria': '切换页眉会话标签页',
+  'settings.openchamber.visual.field.sessionTabsInfo': '打开的会话会以标签页形式排列在页眉中。关闭后页眉仅显示会话标题。',
   'settings.openchamber.visual.field.terminalQuickKeysTooltip': '在终端视图显示 Esc、Ctrl、方向键',
   'settings.openchamber.visual.field.fileEditorKeymap': '文件编辑器键位映射',
   'settings.openchamber.visual.option.fileEditorKeymap.default': '默认',
@@ -2007,8 +2012,6 @@ export const settingsDict = {
   'settings.openchamber.visual.field.stickyUserHeader': '固定用户消息头',
   'settings.openchamber.visual.field.promptNavigatorEnabledAria': '提示词导航',
   'settings.openchamber.visual.field.promptNavigatorEnabled': '提示词导航',
-  'settings.openchamber.visual.field.expandedEditorToolbarAria': 'Always show editor toolbar',
-  'settings.openchamber.visual.field.expandedEditorToolbar': 'Always show editor toolbar (docked under the file tabs)',
   'settings.openchamber.visual.field.autoSaveEnabledAria': '自动保存文件',
   'settings.openchamber.visual.field.autoSaveEnabled': '自动保存文件',
   'settings.openchamber.visual.field.autoSaveEnabledInfo': '停止输入后自动保存文件编辑内容。关闭后需手动保存。',
diff --git a/packages/ui/src/lib/i18n/messages/zh-CN.ts b/packages/ui/src/lib/i18n/messages/zh-CN.ts
index de9afcc6..806090e9 100644
--- a/packages/ui/src/lib/i18n/messages/zh-CN.ts
+++ b/packages/ui/src/lib/i18n/messages/zh-CN.ts
@@ -482,6 +482,10 @@ export const dict: Record<I18nKey, string> = {
   'sessions.archivePage.deleteSessionAria': '删除 {title}',
   'sessions.archivePage.restoreSessionAria': '还原 {title}',
   'sessions.switcher.openAria': '打开会话切换器',
+  'header.sessionTabs.stripAria': '打开的会话',
+  'header.sessionTabs.tabMenuAria': '会话标签页操作',
+  'header.sessionTabs.closeTab': '关闭标签页',
+  'header.sessionTabs.closeOtherTabs': '关闭其他标签页',
   'sessions.switcher.empty': '没有最近会话',
   'sessions.switcher.draftTitle': '新会话',
   'sessions.sidebar.updateCheck.errorTitle': '检查更新失败',
diff --git a/packages/ui/src/lib/i18n/messages/zh-TW.settings.ts b/packages/ui/src/lib/i18n/messages/zh-TW.settings.ts
index 28e71162..273a5631 100644
--- a/packages/ui/src/lib/i18n/messages/zh-TW.settings.ts
+++ b/packages/ui/src/lib/i18n/messages/zh-TW.settings.ts
@@ -1801,7 +1801,6 @@ export const settingsDict = {
   'settings.openchamber.visual.section.spacingAndLayout': '間距與佈局',
   'settings.openchamber.visual.section.densityAndType': '密度與字型',
   'settings.openchamber.visual.section.appInstall': '應用程式安裝',
-  'settings.openchamber.visual.section.mobileLayout': '行動版版面',
   'settings.openchamber.visual.section.navigation': '導覽',
   'settings.openchamber.visual.section.chatRenderMode': '聊天渲染模式',
   'settings.openchamber.visual.section.chatRenderModeAria': '聊天渲染模式',
@@ -1814,6 +1813,10 @@ export const settingsDict = {
   'settings.openchamber.visual.section.showToolsOpenedByDefault': '預設展開以下工具',
   'settings.openchamber.visual.section.sessionAssistance': '工作階段輔助',
   'settings.openchamber.visual.section.reasoning': '推理',
+  'settings.openchamber.visual.section.streaming': '串流',
+  'settings.openchamber.visual.field.streamingAutoFollow': '串流時跟隨新內容',
+  'settings.openchamber.visual.field.streamingAutoFollowAria': '回覆串流時自動跟隨新內容',
+  'settings.openchamber.visual.field.streamingAutoFollowInfo': '回覆串流時，畫面會持續捲動到最新內容。關閉後畫面保持不動，可手動捲動。',
   'settings.openchamber.visual.section.messageAppearance': '訊息外觀',
   'settings.openchamber.visual.section.toolsAndFiles': '工具與檔案',
   'settings.openchamber.visual.section.composer': '輸入框',
@@ -1855,8 +1858,6 @@ export const settingsDict = {
   'settings.openchamber.visual.field.mobileKeyboardModeAria': '行動裝置鍵盤行為',
   'settings.openchamber.visual.field.selectMobileKeyboardModePlaceholder': '選擇鍵盤行為',
   'settings.openchamber.visual.actions.resetMobileKeyboardModeAria': '重設行動裝置鍵盤行為',
-  'settings.openchamber.visual.option.mobileLayout.default': '舊版',
-  'settings.openchamber.visual.option.mobileLayout.new': '新版',
   'settings.openchamber.visual.field.interfaceFontSize': '介面字體大小',
   'settings.openchamber.visual.field.interfaceFont': '介面字體',
   'settings.openchamber.visual.field.selectInterfaceFontAria': '選擇介面字體',
@@ -1882,6 +1883,10 @@ export const settingsDict = {
   'settings.openchamber.visual.actions.resetInputBarOffsetAria': '重設輸入列偏移',
   'settings.openchamber.visual.field.terminalQuickKeysAria': '終端機快速鍵',
   'settings.openchamber.visual.field.terminalQuickKeys': '終端機快速鍵',
+  'settings.openchamber.visual.field.sessionTabsGroup': '會話分頁',
+  'settings.openchamber.visual.field.sessionTabs': '在頁首以分頁顯示會話',
+  'settings.openchamber.visual.field.sessionTabsAria': '切換頁首會話分頁',
+  'settings.openchamber.visual.field.sessionTabsInfo': '開啟的會話會以分頁排列在頁首。關閉後頁首僅顯示會話標題。',
   'settings.openchamber.visual.field.terminalQuickKeysTooltip': '在終端機檢視顯示 Esc、Ctrl、方向鍵',
   'settings.openchamber.visual.field.fileEditorKeymap': '檔案編輯器鍵位映射',
   'settings.openchamber.visual.option.fileEditorKeymap.default': '預設',
@@ -1914,8 +1919,6 @@ export const settingsDict = {
   'settings.openchamber.visual.field.stickyUserHeader': '固定使用者訊息標頭',
   'settings.openchamber.visual.field.promptNavigatorEnabledAria': '提示詞導覽',
   'settings.openchamber.visual.field.promptNavigatorEnabled': '提示詞導覽',
-  'settings.openchamber.visual.field.expandedEditorToolbarAria': 'Always show editor toolbar',
-  'settings.openchamber.visual.field.expandedEditorToolbar': 'Always show editor toolbar (docked under the file tabs)',
   'settings.openchamber.visual.field.autoSaveEnabledAria': '自動儲存檔案',
   'settings.openchamber.visual.field.autoSaveEnabled': '自動儲存檔案',
   'settings.openchamber.visual.field.autoSaveEnabledInfo': '停止輸入後自動儲存檔案編輯內容。關閉後需手動儲存。',
diff --git a/packages/ui/src/lib/i18n/messages/zh-TW.ts b/packages/ui/src/lib/i18n/messages/zh-TW.ts
index 68d74e1e..e629a2bc 100644
--- a/packages/ui/src/lib/i18n/messages/zh-TW.ts
+++ b/packages/ui/src/lib/i18n/messages/zh-TW.ts
@@ -495,6 +495,10 @@ export const dict: Record<I18nKey, string> = {
   'sessions.archivePage.deleteSessionAria': '刪除 {title}',
   'sessions.archivePage.restoreSessionAria': '還原 {title}',
   'sessions.switcher.openAria': '開啟會話切換器',
+  'header.sessionTabs.stripAria': '開啟的會話',
+  'header.sessionTabs.tabMenuAria': '工作階段分頁動作',
+  'header.sessionTabs.closeTab': '關閉分頁',
+  'header.sessionTabs.closeOtherTabs': '關閉其他分頁',
   'sessions.switcher.empty': '沒有最近會話',
   'sessions.switcher.draftTitle': '新會話',
   'sessions.sidebar.updateCheck.errorTitle': '檢查更新失敗',
diff --git a/packages/ui/src/lib/mobileLayoutPreference.ts b/packages/ui/src/lib/mobileLayoutPreference.ts
deleted file mode 100644
index 10050bf2..00000000
--- a/packages/ui/src/lib/mobileLayoutPreference.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-export type MobileLayoutPreference = 'default' | 'new';
-
-const MOBILE_LAYOUT_PREFERENCE_KEY = 'openchamber-mobile-layout';
-
-const normalizeMobileLayoutPreference = (value: unknown): MobileLayoutPreference => {
-  // 'new' is the default; only an explicit 'default' (the legacy/"Old" layout)
-  // opts out of it.
-  return value === 'default' ? 'default' : 'new';
-};
-
-export const getStoredMobileLayoutPreference = (): MobileLayoutPreference => {
-  if (typeof window === 'undefined') {
-    return 'new';
-  }
-
-  try {
-    return normalizeMobileLayoutPreference(window.localStorage.getItem(MOBILE_LAYOUT_PREFERENCE_KEY));
-  } catch {
-    return 'new';
-  }
-};
-
-export const setStoredMobileLayoutPreference = (value: MobileLayoutPreference): boolean => {
-  if (typeof window === 'undefined') {
-    return false;
-  }
-
-  try {
-    window.localStorage.setItem(MOBILE_LAYOUT_PREFERENCE_KEY, value);
-    return true;
-  } catch {
-    return false;
-  }
-};
diff --git a/packages/ui/src/lib/persistence.ts b/packages/ui/src/lib/persistence.ts
index a3ed076b..f24c7a2b 100644
--- a/packages/ui/src/lib/persistence.ts
+++ b/packages/ui/src/lib/persistence.ts
@@ -531,6 +531,7 @@ const materializeAuthoritativeUiSettings = (settings: DesktopSettings): DesktopS
     darkThemeId: DEFAULT_DARK_THEME_ID,
     openInAppId: DEFAULT_OPEN_IN_APP_ID,
     showReasoningTraces: defaults.showReasoningTraces,
+    streamingAutoFollowEnabled: defaults.streamingAutoFollowEnabled,
     workStatusPanelEnabled: defaults.workStatusPanelEnabled,
     workStatusHiddenSections: defaults.workStatusHiddenSections,
     sessionRecapEnabled: defaults.sessionRecapEnabled,
@@ -578,7 +579,6 @@ const materializeAuthoritativeUiSettings = (settings: DesktopSettings): DesktopS
     messageStreamTransport: 'auto',
     stickyUserHeader: defaults.stickyUserHeader,
     promptNavigatorEnabled: defaults.promptNavigatorEnabled,
-    expandedEditorToolbar: defaults.expandedEditorToolbar,
     wideChatLayoutEnabled: defaults.wideChatLayoutEnabled,
     showSplitAssistantMessageActions: defaults.showSplitAssistantMessageActions,
     draftStartersVisible: defaults.draftStartersVisible,
@@ -638,6 +638,9 @@ const applyDesktopUiPreferences = (settings: DesktopSettings) => {
   if (typeof settings.showReasoningTraces === 'boolean' && settings.showReasoningTraces !== store.showReasoningTraces) {
     store.setShowReasoningTraces(settings.showReasoningTraces);
   }
+  if (typeof settings.streamingAutoFollowEnabled === 'boolean' && settings.streamingAutoFollowEnabled !== store.streamingAutoFollowEnabled) {
+    store.setStreamingAutoFollowEnabled(settings.streamingAutoFollowEnabled);
+  }
   if (typeof settings.sessionRecapEnabled === 'boolean' && settings.sessionRecapEnabled !== store.sessionRecapEnabled) {
     store.setSessionRecapEnabled(settings.sessionRecapEnabled);
   }
@@ -842,9 +845,6 @@ const applyDesktopUiPreferences = (settings: DesktopSettings) => {
   if (typeof settings.promptNavigatorEnabled === 'boolean' && settings.promptNavigatorEnabled !== store.promptNavigatorEnabled) {
     store.setPromptNavigatorEnabled(settings.promptNavigatorEnabled);
   }
-  if (typeof settings.expandedEditorToolbar === 'boolean' && settings.expandedEditorToolbar !== store.expandedEditorToolbar) {
-    store.setExpandedEditorToolbar(settings.expandedEditorToolbar);
-  }
   if (typeof settings.wideChatLayoutEnabled === 'boolean' && settings.wideChatLayoutEnabled !== store.wideChatLayoutEnabled) {
     store.setWideChatLayoutEnabled(settings.wideChatLayoutEnabled);
   }
@@ -1162,6 +1162,9 @@ const sanitizeWebSettings = (payload: unknown): DesktopSettings | null => {
   if (typeof candidate.showReasoningTraces === 'boolean') {
     result.showReasoningTraces = candidate.showReasoningTraces;
   }
+  if (typeof candidate.streamingAutoFollowEnabled === 'boolean') {
+    result.streamingAutoFollowEnabled = candidate.streamingAutoFollowEnabled;
+  }
   if (typeof candidate.sessionRecapEnabled === 'boolean') {
     result.sessionRecapEnabled = candidate.sessionRecapEnabled;
   }
@@ -1511,9 +1514,6 @@ const sanitizeWebSettings = (payload: unknown): DesktopSettings | null => {
   if (typeof candidate.promptNavigatorEnabled === 'boolean') {
     result.promptNavigatorEnabled = candidate.promptNavigatorEnabled;
   }
-  if (typeof candidate.expandedEditorToolbar === 'boolean') {
-    result.expandedEditorToolbar = candidate.expandedEditorToolbar;
-  }
   if (typeof candidate.wideChatLayoutEnabled === 'boolean') {
     result.wideChatLayoutEnabled = candidate.wideChatLayoutEnabled;
   }
diff --git a/packages/ui/src/lib/router/parseRoute.ts b/packages/ui/src/lib/router/parseRoute.ts
index 458fb4f9..757ccfb6 100644
--- a/packages/ui/src/lib/router/parseRoute.ts
+++ b/packages/ui/src/lib/router/parseRoute.ts
@@ -1,6 +1,6 @@
-import type { WorkspaceSurface } from '@/stores/useUIStore';
 import {
   type RouteState,
+  type RouteTab,
   VALID_TABS,
   VALID_SETTINGS_SECTIONS,
   ROUTE_PARAMS,
@@ -52,13 +52,13 @@ function parseSessionId(params: URLSearchParams): string | null {
  * Parse main tab from URL parameters.
  * Returns null if missing or invalid.
  */
-function parseTab(params: URLSearchParams): WorkspaceSurface | null {
+function parseTab(params: URLSearchParams): RouteTab | null {
   const value = params.get(ROUTE_PARAMS.TAB);
   if (!value) {
     return null;
   }
 
-  const normalized = value.toLowerCase().trim() as WorkspaceSurface;
+  const normalized = value.toLowerCase().trim() as RouteTab;
   if (VALID_TABS.includes(normalized)) {
     return normalized;
   }
diff --git a/packages/ui/src/lib/router/serializeRoute.test.ts b/packages/ui/src/lib/router/serializeRoute.test.ts
index bfb98ff6..f0d458c8 100644
--- a/packages/ui/src/lib/router/serializeRoute.test.ts
+++ b/packages/ui/src/lib/router/serializeRoute.test.ts
@@ -65,10 +65,8 @@ afterAll(() => {
 
 const sessionState = (sessionId: string): AppRouteState => ({
   sessionId,
-  tab: 'chat',
   isSettingsOpen: false,
   settingsPath: '',
-  diffFile: null,
 });
 
 describe('updateBrowserURL embedded-session-chat guard', () => {
diff --git a/packages/ui/src/lib/router/serializeRoute.ts b/packages/ui/src/lib/router/serializeRoute.ts
index 6b6e054c..75307af2 100644
--- a/packages/ui/src/lib/router/serializeRoute.ts
+++ b/packages/ui/src/lib/router/serializeRoute.ts
@@ -1,4 +1,3 @@
-import type { WorkspaceSurface } from '@/stores/useUIStore';
 import { isEmbeddedSessionChat } from '@/components/layout/contextPanelEmbeddedChat';
 import { ROUTE_PARAMS } from './types';
 
@@ -7,17 +6,10 @@ import { ROUTE_PARAMS } from './types';
  */
 export interface AppRouteState {
   sessionId: string | null;
-  tab: WorkspaceSurface;
   isSettingsOpen: boolean;
   settingsPath: string;
-  diffFile: string | null;
 }
 
-/**
- * Default tab when none is specified.
- */
-const DEFAULT_TAB: WorkspaceSurface = 'chat';
-
 /**
  * Serialize application state to URL search parameters.
  * Only includes parameters that differ from defaults to keep URLs clean.
@@ -38,15 +30,6 @@ function serializeRoute(state: AppRouteState): URLSearchParams {
     return params;
   }
 
-  // Tab - only include if not the default
-  if (state.tab !== DEFAULT_TAB) {
-    params.set(ROUTE_PARAMS.TAB, state.tab);
-  }
-
-  // Diff file - only include when on diff tab
-  if (state.tab === 'diff' && state.diffFile && state.diffFile.trim().length > 0) {
-    params.set(ROUTE_PARAMS.FILE, state.diffFile);
-  }
 
   return params;
 }
diff --git a/packages/ui/src/lib/router/types.ts b/packages/ui/src/lib/router/types.ts
index 9c5801e2..d4dcf61a 100644
--- a/packages/ui/src/lib/router/types.ts
+++ b/packages/ui/src/lib/router/types.ts
@@ -1,5 +1,4 @@
 import type { SidebarSection } from '@/constants/sidebar';
-import type { WorkspaceSurface } from '@/stores/useUIStore';
 
 /**
  * Represents the current route state derived from URL parameters.
@@ -9,7 +8,7 @@ export interface RouteState {
   /** Session ID to navigate to */
   sessionId: string | null;
   /** View selected through the legacy `tab` URL parameter. */
-  tab: WorkspaceSurface | null;
+  tab: RouteTab | null;
   /** Settings section - when non-null, settings dialog should be open */
   settingsPath: string | null;
   /** File path for diff view */
@@ -17,9 +16,11 @@ export interface RouteState {
 }
 
 /**
- * Valid values for the legacy `tab` URL parameter.
+ * Valid values for the legacy `tab` URL parameter. Non-chat tabs open the
+ * matching context-panel surface; the chat always owns the main area.
  */
-export const VALID_TABS: readonly WorkspaceSurface[] = ['chat', 'git', 'diff', 'terminal', 'files', 'diagram'] as const;
+export type RouteTab = 'chat' | 'git' | 'diff' | 'terminal' | 'files';
+export const VALID_TABS: readonly RouteTab[] = ['chat', 'git', 'diff', 'terminal', 'files'] as const;
 
 /**
  * Valid settings section values for URL routing.
diff --git a/packages/ui/src/lib/runtimeSurface.ts b/packages/ui/src/lib/runtimeSurface.ts
index dddeaa1d..786a1090 100644
--- a/packages/ui/src/lib/runtimeSurface.ts
+++ b/packages/ui/src/lib/runtimeSurface.ts
@@ -1,6 +1,5 @@
 import { isDesktopShell, isVSCodeRuntime } from '@/lib/desktop';
 import { isCapacitorApp } from '@/lib/platform';
-import { getStoredMobileLayoutPreference } from '@/lib/mobileLayoutPreference';
 
 export type HostedSurface = 'desktop' | 'mobile';
 
@@ -11,6 +10,7 @@ declare global {
 }
 
 const MOBILE_SURFACE_MAX_WIDTH = 768;
+const SURFACE_SWITCH_DEBOUNCE_MS = 800;
 
 const isTouchOrCoarsePointer = (): boolean => {
   if (typeof window === 'undefined') return false;
@@ -22,12 +22,29 @@ const isTouchOrCoarsePointer = (): boolean => {
   return coarsePointer || touchPoints > 0;
 };
 
+const hasSurfaceUrlOverride = (): boolean => {
+  if (typeof window === 'undefined') return false;
+  const override = new URLSearchParams(window.location.search).get('surface');
+  return override === 'mobile' || override === 'desktop';
+};
+
+/** Viewport half of the surface decision; re-evaluated on resize by the watcher. */
+const isPhoneViewport = (): boolean => {
+  if (typeof window === 'undefined') return false;
+  const width = Math.min(
+    window.innerWidth || Number.POSITIVE_INFINITY,
+    window.screen?.width || Number.POSITIVE_INFINITY,
+  );
+  return Number.isFinite(width)
+    && width <= MOBILE_SURFACE_MAX_WIDTH
+    && isTouchOrCoarsePointer();
+};
+
 /**
  * Single authority for the mobile-vs-desktop surface decision.
  *
  * Priority: explicit stamp (set once at boot) → URL override → Capacitor
- * shell (always the mobile surface) → desktop shells → phone heuristic
- * gated by the stored mobile layout preference.
+ * shell (always the mobile surface) → desktop shells → phone heuristic.
  */
 const detectHostedSurface = (): HostedSurface => {
   if (typeof window === 'undefined') return 'desktop';
@@ -45,14 +62,7 @@ const detectHostedSurface = (): HostedSurface => {
   if (isCapacitorApp()) return 'mobile';
   if (isDesktopShell() || isVSCodeRuntime()) return 'desktop';
 
-  const width = Math.min(
-    window.innerWidth || Number.POSITIVE_INFINITY,
-    window.screen?.width || Number.POSITIVE_INFINITY,
-  );
-  const likelyPhone = Number.isFinite(width)
-    && width <= MOBILE_SURFACE_MAX_WIDTH
-    && isTouchOrCoarsePointer();
-  return likelyPhone && getStoredMobileLayoutPreference() === 'new' ? 'mobile' : 'desktop';
+  return isPhoneViewport() ? 'mobile' : 'desktop';
 };
 
 /**
@@ -69,3 +79,39 @@ export const resolveHostedSurface = (): HostedSurface => {
 };
 
 export const isMobileSurfaceRuntime = (): boolean => detectHostedSurface() === 'mobile';
+
+/**
+ * The surface is stamped once at boot, so a browser window that crosses the
+ * phone threshold after load would otherwise keep the wrong app shell (the
+ * app trees, stores, and sync bootstrap differ, so an in-place switch is not
+ * safe). Watch for the viewport heuristic disagreeing with the stamp and
+ * reload — the same mechanism a surface change has always used — once the
+ * resize settles. Fixed shells never switch: Capacitor is always mobile,
+ * desktop/VS Code shells are always desktop, and an explicit ?surface=
+ * override wins over the heuristic.
+ */
+export const watchHostedSurfaceViewport = (): (() => void) => {
+  if (typeof window === 'undefined') return () => {};
+  if (isCapacitorApp() || isDesktopShell() || isVSCodeRuntime()) return () => {};
+  if (hasSurfaceUrlOverride()) return () => {};
+
+  let timeout: ReturnType<typeof setTimeout> | null = null;
+  const handleResize = () => {
+    if (timeout) clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      timeout = null;
+      const stamped = window.__OPENCHAMBER_SURFACE__;
+      const desired: HostedSurface = isPhoneViewport() ? 'mobile' : 'desktop';
+      if (stamped && stamped !== desired) {
+        window.__OPENCHAMBER_SURFACE__ = undefined;
+        window.location.reload();
+      }
+    }, SURFACE_SWITCH_DEBOUNCE_MS);
+  };
+
+  window.addEventListener('resize', handleResize);
+  return () => {
+    if (timeout) clearTimeout(timeout);
+    window.removeEventListener('resize', handleResize);
+  };
+};
diff --git a/packages/ui/src/lib/search/fuzzySearch.test.ts b/packages/ui/src/lib/search/fuzzySearch.test.ts
new file mode 100644
index 00000000..82a402bf
--- /dev/null
+++ b/packages/ui/src/lib/search/fuzzySearch.test.ts
@@ -0,0 +1,68 @@
+import { describe, expect, test } from 'bun:test';
+
+import { matchesRankQuery, rankByQuery } from './fuzzySearch';
+
+const rank = (items: string[], query: string) => rankByQuery(items, query, (item) => [item]);
+
+describe('rankByQuery', () => {
+  test('orders word-boundary matches above mid-word matches, earlier positions first', () => {
+    const items = ['prefixed-thing', 'workspace-fix', 'feat/fix-scroll'];
+    expect(rank(items, 'fix')).toEqual(['feat/fix-scroll', 'workspace-fix', 'prefixed-thing']);
+  });
+
+  test('exact prefix comes first, ties keep original order', () => {
+    const items = ['main', 'feat/main-menu', 'maintenance', 'release/main'];
+    const ranked = rank(items, 'main');
+    expect(ranked[0]).toBe('main');
+    expect(ranked[1]).toBe('maintenance');
+    expect(ranked.slice(2)).toEqual(['feat/main-menu', 'release/main']);
+  });
+
+  test('multi-token queries match in any order and all tokens are required', () => {
+    const items = ['feat/scroll-anchored-chat', 'fix/chat-header', 'feat/scroll-perf'];
+    expect(rank(items, 'chat scroll')).toEqual(['feat/scroll-anchored-chat']);
+  });
+
+  test('punctuation-insensitive compact matching finds joined words', () => {
+    const items = ['gpt-4o-mini', 'claude-sonnet-5'];
+    expect(rank(items, 'gpt4o')).toEqual(['gpt-4o-mini']);
+    expect(rank(items, 'sonnet5')).toEqual(['claude-sonnet-5']);
+  });
+
+  test('single-token queries tolerate typos via fuzzy fallback', () => {
+    const items = ['workspace-rail-layout', 'unrelated'];
+    expect(rank(items, 'worskpace')).toEqual(['workspace-rail-layout']);
+  });
+
+  test('fuzzy fallback can be disabled', () => {
+    const items = ['workspace-rail-layout'];
+    expect(rankByQuery(items, 'worskpace', (item) => [item], { fuzzy: false })).toEqual([]);
+  });
+
+  test('earlier fields outrank later fields', () => {
+    const items = [
+      { name: 'docs', path: '/repo/build-agent' },
+      { name: 'build-agent', path: '/repo/build-agent' },
+    ];
+    const ranked = rankByQuery(items, 'build', (item) => [item.name, item.path]);
+    expect(ranked[0].name).toBe('build-agent');
+    expect(ranked).toHaveLength(2);
+  });
+
+  test('empty query returns items unchanged within the limit', () => {
+    expect(rank(['b', 'a'], '  ')).toEqual(['b', 'a']);
+    expect(rankByQuery(['a', 'b', 'c'], '', (item) => [item], { limit: 2 })).toEqual(['a', 'b']);
+  });
+});
+
+describe('matchesRankQuery', () => {
+  test('requires every token across the fields', () => {
+    expect(matchesRankQuery(['GLM-5.3', 'Zhipu'], 'zhipu glm')).toBe(true);
+    expect(matchesRankQuery(['GLM-5.3', 'Zhipu'], 'zhipu gpt')).toBe(false);
+  });
+
+  test('is punctuation-insensitive and skips empty fields', () => {
+    expect(matchesRankQuery([null, 'claude-sonnet-5', undefined], 'sonnet5')).toBe(true);
+    expect(matchesRankQuery([''], 'a')).toBe(false);
+  });
+});
diff --git a/packages/ui/src/lib/search/fuzzySearch.ts b/packages/ui/src/lib/search/fuzzySearch.ts
index 99cd7446..52e669b2 100644
--- a/packages/ui/src/lib/search/fuzzySearch.ts
+++ b/packages/ui/src/lib/search/fuzzySearch.ts
@@ -41,54 +41,6 @@ export function matchesFuzzyQuery(
   return fuse.search(query).length > 0;
 }
 
-function getFuzzyMatchMask<T>(
-  items: T[],
-  query: string,
-  getText: (item: T) => string,
-  options?: FuzzySearchOptions
-): boolean[] {
-  if (!query) {
-    return items.map(() => true);
-  }
-
-  const mergedOptions = { ...DEFAULT_FUZZY_OPTIONS, ...options };
-  const queryLower = query.toLowerCase();
-  const matches = new Array(items.length).fill(false);
-  const fuzzyCandidateTexts: string[] = [];
-  const fuzzyCandidateIndices: number[] = [];
-
-  for (let i = 0; i < items.length; i++) {
-    const target = getText(items[i]);
-    if (!target) {
-      continue;
-    }
-
-    if (mergedOptions.preferSubstring && target.toLowerCase().includes(queryLower)) {
-      matches[i] = true;
-      continue;
-    }
-
-    fuzzyCandidateTexts.push(target);
-    fuzzyCandidateIndices.push(i);
-  }
-
-  if (fuzzyCandidateTexts.length === 0) {
-    return matches;
-  }
-
-  const fuse = new Fuse(fuzzyCandidateTexts, {
-    threshold: mergedOptions.threshold,
-    distance: mergedOptions.distance,
-    ignoreLocation: mergedOptions.ignoreLocation,
-  });
-
-  for (const result of fuse.search(query)) {
-    matches[fuzzyCandidateIndices[result.refIndex]] = true;
-  }
-
-  return matches;
-}
-
 /**
  * Score-sorted fuzzy ranking. Strict (low threshold), prioritizes substring
  * matches (especially prefix matches), and returns the top N.
@@ -141,23 +93,133 @@ export function scoreByFuzzyQuery<T>(
   return scored.slice(0, limit);
 }
 
-export function partitionByFuzzyQuery<T>(
-  items: T[],
-  query: string,
-  getText: (item: T) => string,
-  options?: FuzzySearchOptions
-): { matching: T[]; other: T[] } {
-  const matches = getFuzzyMatchMask(items, query, getText, options);
-  const matching: T[] = [];
-  const other: T[] = [];
+const RANK_TOKEN_MISS = Number.POSITIVE_INFINITY;
 
-  for (let i = 0; i < items.length; i++) {
-    if (matches[i]) {
-      matching.push(items[i]);
-      continue;
+const tokenizeRankQuery = (query: string): string[] =>
+  query.trim().toLowerCase().split(/\s+/).filter(Boolean);
+
+const compactText = (value: string): string => value.replace(/[^a-z0-9]+/g, '');
+
+type RankFields = { fields: string[]; compact: string[] };
+
+const buildRankFields = (texts: ReadonlyArray<string | null | undefined>): RankFields => {
+  const fields: string[] = [];
+  const compact: string[] = [];
+  for (const text of texts) {
+    if (!text) continue;
+    const lower = text.toLowerCase();
+    fields.push(lower);
+    compact.push(compactText(lower));
+  }
+  return { fields, compact };
+};
+
+/**
+ * Score one query token against an item's fields. Lower is better:
+ * field prefix < word-boundary substring < mid-word substring <
+ * punctuation-insensitive ("compact") substring. Earlier fields win ties, so
+ * callers should order `getTexts` by importance (name before path/description).
+ */
+const scoreRankToken = (token: string, { fields, compact }: RankFields): number => {
+  let best = RANK_TOKEN_MISS;
+  for (let fieldIndex = 0; fieldIndex < fields.length; fieldIndex++) {
+    const field = fields[fieldIndex];
+    const fieldPenalty = fieldIndex * 0.01;
+    const idx = field.indexOf(token);
+    let score = RANK_TOKEN_MISS;
+    if (idx === 0) {
+      score = fieldPenalty;
+    } else if (idx > 0) {
+      const boundary = !/[a-z0-9]/.test(field[idx - 1]);
+      score = (boundary ? 0.1 : 0.2) + idx / 1000 + fieldPenalty;
+    } else {
+      const compactIdx = compact[fieldIndex].indexOf(compactText(token));
+      if (compactIdx >= 0 && token.length > 1) {
+        score = 0.4 + compactIdx / 1000 + fieldPenalty;
+      }
+    }
+    if (score < best) best = score;
+  }
+  return best;
+};
+
+export interface RankByQueryOptions {
+  limit?: number;
+  /** Typo-tolerant Fuse fallback for single-token queries (default true). */
+  fuzzy?: boolean;
+}
+
+/**
+ * The canonical dropdown matcher: every whitespace-separated query token must
+ * match somewhere in the item's fields (any order, punctuation-insensitive),
+ * and results come back ordered by relevance — exact/prefix matches first,
+ * then word-boundary and substring matches, original order breaking ties.
+ * Single-token queries additionally fall back to typo-tolerant fuzzy matching.
+ *
+ * Use this for every searchable dropdown (projects, agents, branches, models)
+ * instead of ad hoc `toLowerCase().includes` filters, so matching quality and
+ * ordering stay consistent across pickers.
+ */
+export function rankByQuery<T>(
+  items: readonly T[],
+  query: string,
+  getTexts: (item: T) => ReadonlyArray<string | null | undefined>,
+  options?: RankByQueryOptions,
+): T[] {
+  const tokens = tokenizeRankQuery(query);
+  const limit = options?.limit ?? items.length;
+  if (tokens.length === 0) return items.slice(0, limit);
+
+  const scored: { item: T; score: number; order: number }[] = [];
+  const missed: { item: T; joined: string; order: number }[] = [];
+
+  for (let order = 0; order < items.length; order++) {
+    const item = items[order];
+    const rankFields = buildRankFields(getTexts(item));
+    let total = 0;
+    for (const token of tokens) {
+      const tokenScore = scoreRankToken(token, rankFields);
+      if (tokenScore === RANK_TOKEN_MISS) {
+        total = RANK_TOKEN_MISS;
+        break;
+      }
+      total += tokenScore;
+    }
+    if (total === RANK_TOKEN_MISS) {
+      missed.push({ item, joined: rankFields.fields.join(' '), order });
+    } else {
+      scored.push({ item, score: total, order });
     }
-    other.push(items[i]);
   }
 
-  return { matching, other };
+  const fuzzyEnabled = options?.fuzzy ?? true;
+  if (fuzzyEnabled && tokens.length === 1 && tokens[0].length >= 3 && missed.length > 0) {
+    const fuse = new Fuse(
+      missed.map((entry) => entry.joined),
+      { threshold: 0.35, ignoreLocation: true, distance: 100, includeScore: true, minMatchCharLength: 2 },
+    );
+    for (const result of fuse.search(tokens[0])) {
+      const entry = missed[result.refIndex];
+      scored.push({ item: entry.item, score: 1 + (result.score ?? 1), order: entry.order });
+    }
+  }
+
+  scored.sort((a, b) => (a.score - b.score) || (a.order - b.order));
+  return scored.slice(0, limit).map((entry) => entry.item);
 }
+
+/**
+ * Boolean companion to `rankByQuery` for lists that keep their own grouping or
+ * order: every token must match one of the fields, punctuation-insensitive,
+ * without the fuzzy fallback.
+ */
+export function matchesRankQuery(
+  texts: ReadonlyArray<string | null | undefined>,
+  query: string,
+): boolean {
+  const tokens = tokenizeRankQuery(query);
+  if (tokens.length === 0) return true;
+  const rankFields = buildRankFields(texts);
+  return tokens.every((token) => scoreRankToken(token, rankFields) !== RANK_TOKEN_MISS);
+}
+
diff --git a/packages/ui/src/lib/sessionTabs.ts b/packages/ui/src/lib/sessionTabs.ts
new file mode 100644
index 00000000..b3ce2bb6
--- /dev/null
+++ b/packages/ui/src/lib/sessionTabs.ts
@@ -0,0 +1,33 @@
+import { useSessionTabsStore } from '@/stores/useSessionTabsStore';
+import { useGlobalSessionsStore, resolveGlobalSessionDirectory } from '@/stores/useGlobalSessionsStore';
+import { useSessionUIStore } from '@/sync/session-ui-store';
+
+/**
+ * Close one header session tab. Closing the active tab activates its right
+ * neighbour (falling back left), or opens a new-session draft when it was the
+ * last tab. Only tabs whose session is present in the loaded session list
+ * count as neighbours — the same rule the strip uses for rendering. The
+ * session itself is never touched.
+ */
+export const closeSessionTabAndActivateNeighbour = (sessionId: string): void => {
+  const { tabIds, closeTab } = useSessionTabsStore.getState();
+  if (!tabIds.includes(sessionId)) return;
+
+  const { currentSessionId, setCurrentSession, openNewSessionDraft } = useSessionUIStore.getState();
+  if (sessionId === currentSessionId) {
+    const sessionsById = new Map(
+      useGlobalSessionsStore.getState().activeSessions.map((session) => [session.id, session] as const),
+    );
+    const renderable = tabIds.filter((id) => sessionsById.has(id));
+    const index = renderable.indexOf(sessionId);
+    const neighbourId = renderable[index + 1] ?? renderable[index - 1] ?? null;
+    const neighbour = neighbourId ? sessionsById.get(neighbourId) : null;
+    if (neighbour) {
+      setCurrentSession(neighbour.id, resolveGlobalSessionDirectory(neighbour));
+    } else {
+      openNewSessionDraft();
+    }
+  }
+
+  closeTab(sessionId);
+};
diff --git a/packages/ui/src/lib/settings/search.ts b/packages/ui/src/lib/settings/search.ts
index 9945f92c..2716e7ca 100644
--- a/packages/ui/src/lib/settings/search.ts
+++ b/packages/ui/src/lib/settings/search.ts
@@ -148,19 +148,20 @@ const SETTINGS_SEARCH_ITEMS: readonly SettingsSearchItem[] = [
     descriptionKey: 'settings.openchamber.visual.field.autoSaveEnabledInfo',
     keywords: ['editor', 'autosave', 'auto-save', 'files', 'save'],
   },
-  {
-    id: 'appearance.expanded-editor-toolbar',
-    page: 'general',
-    titleKey: 'settings.openchamber.visual.field.expandedEditorToolbar',
-    keywords: ['editor', 'toolbar', 'tabs', 'docked', 'files'],
-    isAvailable: (ctx) => !ctx.isVSCode,
-  },
   {
     id: 'appearance.file-editor-keymap',
     page: 'general',
     titleKey: 'settings.openchamber.visual.field.fileEditorKeymap',
     keywords: ['editor', 'vim', 'keymap'],
   },
+  {
+    id: 'appearance.session-tabs',
+    page: 'general',
+    titleKey: 'settings.openchamber.visual.field.sessionTabsGroup',
+    descriptionKey: 'settings.openchamber.visual.field.sessionTabsInfo',
+    keywords: ['session', 'tabs', 'header', 'working set'],
+    isAvailable: (ctx) => !ctx.isMobile && !ctx.isVSCode,
+  },
   {
     id: 'appearance.terminal-quick-keys',
     page: 'general',
@@ -239,6 +240,19 @@ const SETTINGS_SEARCH_ITEMS: readonly SettingsSearchItem[] = [
     titleKey: 'settings.openchamber.visual.section.reasoning',
     keywords: ['thinking', 'traces'],
   },
+  {
+    id: 'chat.streaming',
+    page: 'chat',
+    titleKey: 'settings.openchamber.visual.section.streaming',
+    keywords: ['stream', 'scroll'],
+  },
+  {
+    id: 'chat.streaming-auto-follow',
+    page: 'chat',
+    titleKey: 'settings.openchamber.visual.field.streamingAutoFollow',
+    descriptionKey: 'settings.openchamber.visual.field.streamingAutoFollowInfo',
+    keywords: ['autoscroll', 'auto-scroll', 'follow', 'stick to bottom', 'streaming'],
+  },
   {
     id: 'chat.sticky-user-header',
     page: 'chat',
diff --git a/packages/ui/src/lib/shortcuts.ts b/packages/ui/src/lib/shortcuts.ts
index 4398aca5..aab2f9f1 100644
--- a/packages/ui/src/lib/shortcuts.ts
+++ b/packages/ui/src/lib/shortcuts.ts
@@ -239,6 +239,13 @@ const SHORTCUT_ACTIONS: ReadonlyArray<ShortcutAction> = [
     description: 'Create a new worktree and open a draft in it',
     customizable: true,
   },
+  {
+    id: 'close_session_tab',
+    defaultCombo: 'alt+w',
+    label: 'Close session tab',
+    description: 'Close the active session tab in the header (the session itself stays)',
+    customizable: true,
+  },
   {
     id: 'new_mini_chat',
     defaultCombo: 'mod+alt+n',
diff --git a/packages/ui/src/lib/terminalApi.ts b/packages/ui/src/lib/terminalApi.ts
index 72e25849..762c7bda 100644
--- a/packages/ui/src/lib/terminalApi.ts
+++ b/packages/ui/src/lib/terminalApi.ts
@@ -1,4 +1,4 @@
-import type { CreateTerminalOptions, TerminalError, TerminalHandlers, TerminalSession, TerminalShellOption, TerminalStreamEvent } from './api/types';
+import type { CreateTerminalOptions, TerminalError, TerminalHandlers, TerminalServerSession, TerminalSession, TerminalShellOption, TerminalStreamEvent } from './api/types';
 import { openRuntimeWebSocket } from './relay/runtime-socket';
 import type { RelayTunnelWebSocket } from './relay/tunnel-client';
 import { runtimeFetch } from './runtime-fetch';
@@ -356,6 +356,32 @@ export async function createTerminalSession(options: CreateTerminalOptions): Pro
   if (!response.ok) throw await responseError(response, 'Failed to create terminal session');
   return response.json() as Promise<TerminalSession>;
 }
+export async function listTerminalSessions(cwd: string): Promise<TerminalServerSession[]> {
+  const response = await runtimeFetch(`/api/terminal/sessions?cwd=${encodeURIComponent(cwd)}`);
+  if (!response.ok) throw await responseError(response, 'Failed to list terminal sessions');
+  const payload: unknown = await response.json().catch(() => null);
+  const rawSessions = payload && typeof payload === 'object' && 'sessions' in payload ? payload.sessions : null;
+  if (!Array.isArray(rawSessions)) throw new Error('Failed to list terminal sessions');
+  const parsed: TerminalServerSession[] = [];
+  for (const entry of rawSessions as unknown[]) {
+    if (typeof entry !== 'object' || entry === null) continue;
+    // SAFETY: every field is verified below before the value is used.
+    const candidate = entry as Partial<Record<keyof TerminalServerSession, unknown>>;
+    if (typeof candidate.sessionId !== 'string' || typeof candidate.cwd !== 'string') continue;
+    if (candidate.status !== 'running' && candidate.status !== 'exited') continue;
+    parsed.push({
+      sessionId: candidate.sessionId,
+      cwd: candidate.cwd,
+      status: candidate.status,
+      createdAt: typeof candidate.createdAt === 'number' ? candidate.createdAt : null,
+    });
+  }
+  return parsed;
+}
+export async function touchTerminalSessions(sessionIds: string[]): Promise<void> {
+  if (sessionIds.length === 0) return;
+  await command('/api/terminal/touch', 'POST', { sessionIds });
+}
 export async function listTerminalShells(): Promise<TerminalShellOption[]> {
   const response = await runtimeFetch('/api/terminal/shells');
   if (!response.ok) throw await responseError(response, 'Failed to list terminal shells');
diff --git a/packages/ui/src/lib/theme/themes/openchamber-dark.json b/packages/ui/src/lib/theme/themes/openchamber-dark.json
index 22d083d3..648412f6 100644
--- a/packages/ui/src/lib/theme/themes/openchamber-dark.json
+++ b/packages/ui/src/lib/theme/themes/openchamber-dark.json
@@ -37,7 +37,7 @@
       "border": "#242323",
       "borderHover": "#504e4c",
       "borderFocus": "#da7c47",
-      "selection": "#b9a5992b",
+      "selection": "#c8c6c52b",
       "selectionForeground": "#c9c5ba",
       "focus": "#da7c47",
       "focusRing": "#da7c4755",
diff --git a/packages/ui/src/lib/theme/themes/openchamber-light.json b/packages/ui/src/lib/theme/themes/openchamber-light.json
index 50b9780e..d1854ff2 100644
--- a/packages/ui/src/lib/theme/themes/openchamber-light.json
+++ b/packages/ui/src/lib/theme/themes/openchamber-light.json
@@ -37,7 +37,7 @@
       "border": "#e5e1de",
       "borderHover": "#cbc7c2",
       "borderFocus": "#b35017",
-      "selection": "#b350172b",
+      "selection": "#a9998f2b",
       "selectionForeground": "#393a34",
       "focus": "#b35017",
       "focusRing": "#b3501755",
diff --git a/packages/ui/src/lib/utils.ts b/packages/ui/src/lib/utils.ts
index 393f43a8..90fc3337 100644
--- a/packages/ui/src/lib/utils.ts
+++ b/packages/ui/src/lib/utils.ts
@@ -66,29 +66,22 @@ export const truncatePathMiddle = (
     return source;
   }
 
-  const prefixBudget = Math.max(0, maxLength - (fileName.length + 2));
-  if (prefixBudget <= 0) {
-    return `…/${fileName}`;
-  }
-
-  let prefix = '';
-  for (const segment of segments) {
+  // Keep the segments closest to the file name: in trees full of index.md the
+  // parent directory is the distinguishing part, so drop leading segments.
+  let suffix = fileName;
+  for (let i = segments.length - 1; i >= 0; i--) {
+    const segment = segments[i];
     if (!segment) {
       continue;
     }
-    const candidate = prefix ? `${prefix}/${segment}` : segment;
-    if (candidate.length > prefixBudget) {
+    const candidate = `${segment}/${suffix}`;
+    if (candidate.length + 2 > maxLength) {
       break;
     }
-    prefix = candidate;
+    suffix = candidate;
   }
 
-  if (!prefix) {
-    const first = segments[0] ?? '';
-    prefix = first ? first.slice(0, prefixBudget) : '';
-  }
-
-  return prefix ? `${prefix}…/${fileName}` : `…/${fileName}`;
+  return `…/${suffix}`;
 };
 
 const normalizePath = (value: string) => {
diff --git a/packages/ui/src/lib/worktrees/branchSearch.test.ts b/packages/ui/src/lib/worktrees/branchSearch.test.ts
new file mode 100644
index 00000000..99a1fee6
--- /dev/null
+++ b/packages/ui/src/lib/worktrees/branchSearch.test.ts
@@ -0,0 +1,33 @@
+import { describe, expect, test } from 'bun:test';
+
+import { rankBranchesForQuery } from './branchSearch';
+
+describe('rankBranchesForQuery', () => {
+  test('empty query keeps everything in the other groups', () => {
+    const result = rankBranchesForQuery({ localBranches: ['main'], remoteBranches: ['origin/dev'], query: ' ' });
+    expect(result.matching).toEqual([]);
+    expect(result.otherLocal).toEqual(['main']);
+    expect(result.otherRemote).toEqual(['origin/dev']);
+  });
+
+  test('orders matches by relevance, not alphabetically', () => {
+    const result = rankBranchesForQuery({
+      localBranches: ['aaa-fix-scroll', 'fix/scroll', 'main'],
+      remoteBranches: ['origin/fix/scroll-old'],
+      query: 'fix',
+    });
+    expect(result.matching[0]).toEqual({ label: 'fix/scroll', value: 'fix/scroll', source: 'local' });
+    expect(result.matching.map((entry) => entry.label)).toEqual([
+      'fix/scroll',
+      'aaa-fix-scroll',
+      'origin/fix/scroll-old',
+    ]);
+    expect(result.otherLocal).toEqual(['main']);
+    expect(result.otherRemote).toEqual([]);
+  });
+
+  test('remote matches carry the remotes/ checkout value', () => {
+    const result = rankBranchesForQuery({ localBranches: [], remoteBranches: ['origin/feat/x'], query: 'feat' });
+    expect(result.matching[0].value).toBe('remotes/origin/feat/x');
+  });
+});
diff --git a/packages/ui/src/lib/worktrees/branchSearch.ts b/packages/ui/src/lib/worktrees/branchSearch.ts
index 3bf564cf..d08953f4 100644
--- a/packages/ui/src/lib/worktrees/branchSearch.ts
+++ b/packages/ui/src/lib/worktrees/branchSearch.ts
@@ -1,4 +1,4 @@
-import { partitionByFuzzyQuery } from "@/lib/search/fuzzySearch";
+import { rankByQuery } from "@/lib/search/fuzzySearch";
 
 export interface RankedBranchGroups {
   matching: Array<{
@@ -26,42 +26,19 @@ export function rankBranchesForQuery(args: {
     };
   }
 
-  const localPartition = partitionByFuzzyQuery(localBranches, normalizedQuery, (branch) => branch);
-  const remotePartition = partitionByFuzzyQuery(remoteBranches, normalizedQuery, (branch) => branch);
-  const matching: RankedBranchGroups['matching'] = [];
-  const otherLocal = localPartition.other;
-  const otherRemote = remotePartition.other;
-
-  for (const branch of localPartition.matching) {
-    matching.push({
-      label: branch,
-      value: branch,
-      source: 'local',
-    });
-  }
-
-  for (const branch of remotePartition.matching) {
-    matching.push({
-      label: branch,
-      value: `remotes/${branch}`,
-      source: 'remote',
-    });
-  }
-
-  matching.sort((a, b) => {
-    const byLabel = a.label.localeCompare(b.label, undefined, { sensitivity: 'accent' });
-    if (byLabel !== 0) {
-      return byLabel;
-    }
-    if (a.source !== b.source) {
-      return a.source.localeCompare(b.source);
-    }
-    return a.value.localeCompare(b.value);
-  });
+  // Rank local and remote branches together so the order reflects match
+  // quality (an exact or prefix match lands first), not the source group or
+  // the alphabet.
+  const candidates: RankedBranchGroups['matching'] = [
+    ...localBranches.map((branch) => ({ label: branch, value: branch, source: 'local' as const })),
+    ...remoteBranches.map((branch) => ({ label: branch, value: `remotes/${branch}`, source: 'remote' as const })),
+  ];
+  const matching = rankByQuery(candidates, normalizedQuery, (branch) => [branch.label]);
+  const matched = new Set(matching);
 
   return {
     matching,
-    otherLocal,
-    otherRemote,
+    otherLocal: candidates.filter((entry) => entry.source === 'local' && !matched.has(entry)).map((entry) => entry.label),
+    otherRemote: candidates.filter((entry) => entry.source === 'remote' && !matched.has(entry)).map((entry) => entry.label),
   };
 }
diff --git a/packages/ui/src/stores/useSessionTabsStore.test.ts b/packages/ui/src/stores/useSessionTabsStore.test.ts
new file mode 100644
index 00000000..83bec001
--- /dev/null
+++ b/packages/ui/src/stores/useSessionTabsStore.test.ts
@@ -0,0 +1,52 @@
+import { beforeEach, describe, expect, test } from 'bun:test';
+
+import { useSessionTabsStore } from './useSessionTabsStore';
+
+describe('useSessionTabsStore', () => {
+  beforeEach(() => {
+    useSessionTabsStore.setState({ tabIds: [] });
+  });
+
+  test('ensureTab appends once and preserves order', () => {
+    const store = useSessionTabsStore.getState();
+    store.ensureTab('a');
+    store.ensureTab('b');
+    store.ensureTab('a');
+    expect(useSessionTabsStore.getState().tabIds).toEqual(['a', 'b']);
+  });
+
+  test('closeTab removes only the given id; closeOtherTabs keeps only it', () => {
+    useSessionTabsStore.setState({ tabIds: ['a', 'b', 'c'] });
+    useSessionTabsStore.getState().closeTab('b');
+    expect(useSessionTabsStore.getState().tabIds).toEqual(['a', 'c']);
+    useSessionTabsStore.getState().closeOtherTabs('c');
+    expect(useSessionTabsStore.getState().tabIds).toEqual(['c']);
+  });
+
+  test('reorderTabs moves by id and ignores unknown ids', () => {
+    useSessionTabsStore.setState({ tabIds: ['a', 'b', 'c'] });
+    useSessionTabsStore.getState().reorderTabs('c', 'a');
+    expect(useSessionTabsStore.getState().tabIds).toEqual(['c', 'a', 'b']);
+    const before = useSessionTabsStore.getState().tabIds;
+    useSessionTabsStore.getState().reorderTabs('x', 'a');
+    expect(useSessionTabsStore.getState().tabIds).toBe(before);
+  });
+
+  test('caps the working set at 10, evicting the oldest tab', () => {
+    useSessionTabsStore.setState({ tabIds: Array.from({ length: 10 }, (_, i) => `s${i}`) });
+    useSessionTabsStore.getState().ensureTab('s-new');
+    const ids = useSessionTabsStore.getState().tabIds;
+    expect(ids).toHaveLength(10);
+    expect(ids[0]).toBe('s1');
+    expect(ids.at(-1)).toBe('s-new');
+  });
+
+  test('removeTabs drops only confirmed-gone ids and no-ops otherwise', () => {
+    useSessionTabsStore.setState({ tabIds: ['a', 'b'] });
+    const before = useSessionTabsStore.getState().tabIds;
+    useSessionTabsStore.getState().removeTabs(['x']);
+    expect(useSessionTabsStore.getState().tabIds).toBe(before);
+    useSessionTabsStore.getState().removeTabs(['a']);
+    expect(useSessionTabsStore.getState().tabIds).toEqual(['b']);
+  });
+});
diff --git a/packages/ui/src/stores/useSessionTabsStore.ts b/packages/ui/src/stores/useSessionTabsStore.ts
new file mode 100644
index 00000000..2412a960
--- /dev/null
+++ b/packages/ui/src/stores/useSessionTabsStore.ts
@@ -0,0 +1,87 @@
+import { create } from 'zustand';
+import { devtools, persist } from 'zustand/middleware';
+
+import { createDeferredSafeJSONStorage } from '@/stores/utils/safeStorage';
+
+/**
+ * The header's working set of sessions, shown as tabs on web/desktop.
+ *
+ * Only session ids and their order are owned here — titles, directories and
+ * liveness come from the session stores at render time. Tabs are a per-client
+ * projection: opening a session anywhere adds it once, closing a tab only
+ * removes it from the strip and never touches the session itself. Ids whose
+ * session is unknown are kept (a partially loaded global list must not
+ * destroy the working set) and simply do not render until the session loads.
+ */
+interface SessionTabsStore {
+  tabIds: string[];
+
+  ensureTab: (sessionId: string) => void;
+  closeTab: (sessionId: string) => void;
+  closeOtherTabs: (sessionId: string) => void;
+  reorderTabs: (activeId: string, overId: string) => void;
+  /** Drop ids the caller has authoritatively confirmed no longer exist. */
+  removeTabs: (sessionIds: readonly string[]) => void;
+}
+
+const MAX_SESSION_TABS = 10;
+
+type PersistedSessionTabs = { tabIds: string[] };
+
+export const useSessionTabsStore = create<SessionTabsStore>()(
+  devtools(
+    persist(
+      (set, get) => ({
+        tabIds: [],
+
+        ensureTab: (sessionId) => {
+          if (!sessionId) return;
+          const { tabIds } = get();
+          if (tabIds.includes(sessionId)) return;
+          // Soft cap: with auto-add the strip only ever grows, so past the cap
+          // the oldest tab (never the one being opened, which lands last)
+          // leaves the working set.
+          const next = [...tabIds, sessionId];
+          set({ tabIds: next.length > MAX_SESSION_TABS ? next.slice(next.length - MAX_SESSION_TABS) : next });
+        },
+
+        closeTab: (sessionId) => {
+          const { tabIds } = get();
+          if (!tabIds.includes(sessionId)) return;
+          set({ tabIds: tabIds.filter((id) => id !== sessionId) });
+        },
+
+        closeOtherTabs: (sessionId) => {
+          const { tabIds } = get();
+          if (!tabIds.includes(sessionId)) return;
+          if (tabIds.length === 1) return;
+          set({ tabIds: [sessionId] });
+        },
+
+        reorderTabs: (activeId, overId) => {
+          const { tabIds } = get();
+          const from = tabIds.indexOf(activeId);
+          const to = tabIds.indexOf(overId);
+          if (from < 0 || to < 0 || from === to) return;
+          const next = [...tabIds];
+          next.splice(to, 0, ...next.splice(from, 1));
+          set({ tabIds: next });
+        },
+
+        removeTabs: (sessionIds) => {
+          if (sessionIds.length === 0) return;
+          const gone = new Set(sessionIds);
+          const { tabIds } = get();
+          const next = tabIds.filter((id) => !gone.has(id));
+          if (next.length === tabIds.length) return;
+          set({ tabIds: next });
+        },
+      }),
+      {
+        name: 'session-tabs-store',
+        storage: createDeferredSafeJSONStorage<PersistedSessionTabs>(),
+        partialize: (state) => ({ tabIds: state.tabIds }),
+      },
+    ),
+  ),
+);
diff --git a/packages/ui/src/stores/useTerminalStore.test.ts b/packages/ui/src/stores/useTerminalStore.test.ts
index c60f0ffd..d6e2d8a2 100644
--- a/packages/ui/src/stores/useTerminalStore.test.ts
+++ b/packages/ui/src/stores/useTerminalStore.test.ts
@@ -12,6 +12,47 @@ const buffer = (tabId: string) => useTerminalStore.getState().getBuffer('/repo',
 describe('terminal state reconciliation', () => {
   afterEach(() => useTerminalStore.getState().clearAll());
 
+  test('adopts unknown server sessions into the fresh placeholder tab', () => {
+    setup();
+    useTerminalStore.getState().adoptServerSessions('/repo', [
+      { sessionId: 'srv-1', status: 'running', createdAt: 100 },
+      { sessionId: 'srv-2', status: 'exited', createdAt: null },
+    ]);
+    const state = useTerminalStore.getState().getDirectoryState('/repo')!;
+    expect(state.tabs.map((tab) => tab.id)).toEqual(['srv-1', 'srv-2']);
+    expect(state.tabs[0].terminalSessionId).toBe('srv-1');
+    expect(state.tabs[0].lifecycle).toBe('running');
+    expect(state.tabs[1].lifecycle).toBe('exited');
+    expect(state.activeTabId).toBe('srv-1');
+  });
+
+  test('adoption is additive: existing tabs and referenced sessions survive', () => {
+    const tabId = setup();
+    useTerminalStore.getState().appendToBuffer('/repo', tabId, 'output', 1);
+    useTerminalStore.getState().setTabSessionId('/repo', tabId, 'srv-live');
+    useTerminalStore.getState().adoptServerSessions('/repo', [
+      { sessionId: 'srv-live', status: 'running', createdAt: 1 },
+      { sessionId: 'srv-orphan', status: 'running', createdAt: 2 },
+    ]);
+    const state = useTerminalStore.getState().getDirectoryState('/repo')!;
+    expect(state.tabs).toHaveLength(2);
+    expect(state.tabs[0].id).toBe(tabId);
+    expect(state.tabs[1].id).toBe('srv-orphan');
+    expect(state.activeTabId).toBe(tabId);
+  });
+
+  test('re-adopting the same sessions changes nothing', () => {
+    setup();
+    useTerminalStore.getState().adoptServerSessions('/repo', [
+      { sessionId: 'srv-1', status: 'running', createdAt: 100 },
+    ]);
+    const before = useTerminalStore.getState().sessions;
+    useTerminalStore.getState().adoptServerSessions('/repo', [
+      { sessionId: 'srv-1', status: 'running', createdAt: 100 },
+    ]);
+    expect(useTerminalStore.getState().sessions).toBe(before);
+  });
+
   test('applies snapshots atomically and deduplicates output by sequence', () => {
     const tabId = setup();
     useTerminalStore.getState().replaceBuffer('/repo', tabId, 'prompt', 4);
diff --git a/packages/ui/src/stores/useTerminalStore.ts b/packages/ui/src/stores/useTerminalStore.ts
index 485717ff..5771b072 100644
--- a/packages/ui/src/stores/useTerminalStore.ts
+++ b/packages/ui/src/stores/useTerminalStore.ts
@@ -71,6 +71,10 @@ interface TerminalStore {
   getBuffer: (directory: string, tabId: string) => TerminalBuffer;
 
   createTab: (directory: string) => string;
+  adoptServerSessions: (
+    directory: string,
+    serverSessions: Array<{ sessionId: string; status: 'running' | 'exited'; createdAt: number | null }>,
+  ) => void;
   setActiveTab: (directory: string, tabId: string) => void;
   setTabLabel: (directory: string, tabId: string, label: string) => void;
   setTabIconKey: (directory: string, tabId: string, iconKey: string | null) => void;
@@ -334,6 +338,60 @@ export const useTerminalStore = create<TerminalStore>()(
           return tabId;
         },
 
+        /**
+         * The server owns which terminal sessions exist; the local tab list is
+         * only this client's projection. Adoption is strictly additive: server
+         * sessions no local tab references become tabs (id = session id, the
+         * create/attach contract), and nothing is ever removed here, so a
+         * failed or partial listing cannot destroy local tabs.
+         */
+        adoptServerSessions: (directory, serverSessions) => {
+          const key = normalizeDirectory(directory);
+          if (!key || serverSessions.length === 0) return;
+
+          set((state) => {
+            const existing = state.sessions.get(key);
+            const knownIds = new Set<string>();
+            for (const tab of existing?.tabs ?? []) {
+              knownIds.add(tab.id);
+              if (tab.terminalSessionId) knownIds.add(tab.terminalSessionId);
+            }
+
+            const newcomers = serverSessions.filter((session) => !knownIds.has(session.sessionId));
+            if (newcomers.length === 0) return state;
+
+            const tabs = [...(existing?.tabs ?? [])];
+            // A single untouched placeholder tab (fresh directory state) is
+            // replaced by the first adopted session instead of sitting next to it.
+            const placeholder = tabs.length === 1
+              && tabs[0].terminalSessionId === null
+              && tabs[0].lifecycle === 'idle'
+              && !state.buffers.has(bufferKey(key, tabs[0].id))
+              ? tabs[0]
+              : null;
+            if (placeholder) tabs.length = 0;
+
+            for (const session of newcomers) {
+              const tab: TerminalTab = {
+                ...createEmptyTab(session.sessionId, placeholder && tabs.length === 0 ? placeholder.label : nextDefaultTabLabel(tabs)),
+                terminalSessionId: session.sessionId,
+                lifecycle: session.status,
+                createdAt: session.createdAt ?? Date.now(),
+              };
+              tabs.push(tab);
+            }
+
+            const previousActive = existing?.activeTabId ?? null;
+            const activeTabId = previousActive && tabs.some((tab) => tab.id === previousActive)
+              ? previousActive
+              : tabs[0]?.id ?? null;
+
+            const newSessions = new Map(state.sessions);
+            newSessions.set(key, { tabs, activeTabId });
+            return { sessions: newSessions };
+          });
+        },
+
         setActiveTab: (directory: string, tabId: string) => {
           const key = normalizeDirectory(directory);
           set((state) => {
diff --git a/packages/ui/src/stores/useUIStore.ts b/packages/ui/src/stores/useUIStore.ts
index 85f4ad02..e24e8ead 100644
--- a/packages/ui/src/stores/useUIStore.ts
+++ b/packages/ui/src/stores/useUIStore.ts
@@ -7,19 +7,11 @@ import type { ShortcutCombo } from '@/lib/shortcuts';
 import type { DraftStarterRef } from '@/lib/draftStarters';
 import { DEFAULT_MONO_FONT, DEFAULT_UI_FONT, type MonoFontOption, type UiFontOption } from '@/lib/fontOptions';
 import { getStoredMobileKeyboardMode, type MobileKeyboardMode } from '@/lib/mobileKeyboardMode';
-import { getRuntimeKey } from '@/lib/runtime-switch';
 import type { TerminalShell } from '@/lib/api/types';
 import { useFilesViewTabsStore } from './useFilesViewTabsStore';
 import { isWindowsArm64 } from '@/lib/platform';
 import { isVSCodeRuntime } from '@/lib/desktop';
 
-/**
- * The primary view on mobile and the desktop's promoted full-screen view.
- * Desktop context-panel content is not represented here.
- */
-export type WorkspaceSurface = 'chat' | 'plan' | 'git' | 'diff' | 'terminal' | 'files' | 'context' | 'diagram';
-/** @deprecated Use WorkspaceSurface. */
-export type MainTab = WorkspaceSurface;
 export type PendingDiffScope = 'working' | 'staged' | 'turn' | 'branch';
 export type ContextPanelMode = 'diff' | 'walkthrough' | 'file' | 'context' | 'plan' | 'chat' | 'browser' | 'git' | 'pr' | 'notes' | 'terminal';
 export type MermaidRenderingMode = 'svg' | 'ascii';
@@ -83,9 +75,6 @@ type PendingFileNavigation = {
   column: number;
 };
 
-export type WorkspaceSurfaceGuard = (nextSurface: WorkspaceSurface) => boolean;
-/** @deprecated Use WorkspaceSurfaceGuard. */
-export type MainTabGuard = WorkspaceSurfaceGuard;
 export type EventStreamStatus =
   | 'idle'
   | 'connecting'
@@ -137,15 +126,9 @@ const CONTEXT_PANEL_MAX_WIDTH = 1400;
 const CONTEXT_PANEL_MAX_TABS = 12;
 const CONTEXT_PANEL_MAX_LABEL_LENGTH = 120;
 const LEFT_SIDEBAR_MIN_WIDTH = 280;
-const activeSurfaceByRuntime = new Map<string, WorkspaceSurface>();
 /** Separates browser tabs opened in the same millisecond. */
 let browserTabSequence = 0;
 
-const runtimeMemoryKey = (value?: string | null): string => {
-  const key = (value ?? getRuntimeKey()).trim();
-  return key || 'default';
-};
-
 // Shared with rail/panel consumers so contextPanelByDirectory lookups agree on keys.
 export const normalizeContextPanelDirectoryKey = (value: string): string => normalizeDirectoryPath(value);
 
@@ -656,17 +639,9 @@ interface UIStore {
   workStatusHiddenSections: string[];
   isSessionSwitcherOpen: boolean;
   isSessionDropdownOpen: boolean;
-  activeSurface: WorkspaceSurface;
-  surfaceGuard: WorkspaceSurfaceGuard | null;
-  /** @deprecated Use activeSurface. */
-  activeMainTab: WorkspaceSurface;
-  /** @deprecated Use surfaceGuard. */
-  mainTabGuard: WorkspaceSurfaceGuard | null;
-  sidebarOpenBeforeFullscreenTab: boolean | null;
   pendingDiffFile: string | null;
   pendingDiffStaged: boolean;
   pendingDiffScope: PendingDiffScope | null;
-  pendingDiagramFile: string | null;
   pendingFileNavigation: PendingFileNavigation | null;
   pendingFileFocusPath: string | null;
   isMobile: boolean;
@@ -699,6 +674,7 @@ interface UIStore {
   eventStreamStatus: EventStreamStatus;
   eventStreamHint: string | null;
   showReasoningTraces: boolean;
+  streamingAutoFollowEnabled: boolean;
   sessionRecapEnabled: boolean;
   sessionSuggestionEnabled: boolean;
   sessionGoalEnabled: boolean;
@@ -775,6 +751,8 @@ interface UIStore {
   maxLastMessageLength: number; // chars — truncate {last_message} when summarization is off
 
   showTerminalQuickKeysOnDesktop: boolean;
+  /** Header session tabs (web/desktop), opt-in. Off keeps the plain session title. */
+  sessionTabsEnabled: boolean;
   persistChatDraft: boolean;
   showOpenCodeUpdateNotifications: boolean;
   agentControlToolEnabled: boolean;
@@ -810,7 +788,6 @@ interface UIStore {
   collapsibleUserMessages: boolean;
   stickyUserHeader: boolean;
   promptNavigatorEnabled: boolean;
-  expandedEditorToolbar: boolean;
   showSplitAssistantMessageActions: boolean;
   allowPromptingSubagentSessions: boolean;
   isExpandedInput: boolean;
@@ -853,22 +830,11 @@ interface UIStore {
   setWorkStatusHiddenSections: (sectionIds: string[]) => void;
   setSessionSwitcherOpen: (open: boolean) => void;
   setSessionDropdownOpen: (open: boolean) => void;
-  setActiveSurface: (surface: WorkspaceSurface) => void;
-  /** @deprecated Use setActiveSurface. */
-  setActiveMainTab: (surface: WorkspaceSurface) => void;
-  prepareForRuntimeSwitch: (runtimeKey?: string | null) => void;
-  restoreForRuntimeSwitch: (runtimeKey?: string | null) => void;
-  setSurfaceGuard: (guard: WorkspaceSurfaceGuard | null) => void;
-  /** @deprecated Use setSurfaceGuard. */
-  setMainTabGuard: (guard: WorkspaceSurfaceGuard | null) => void;
   setPendingDiffFile: (filePath: string | null, staged?: boolean, scope?: PendingDiffScope | null) => void;
-  setPendingDiagramFile: (filePath: string | null) => void;
   setPendingFileNavigation: (navigation: PendingFileNavigation | null) => void;
   setPendingFileFocusPath: (path: string | null) => void;
   navigateToDiff: (filePath: string, staged?: boolean, scope?: PendingDiffScope | null) => void;
   consumePendingDiffFile: () => string | null;
-  navigateToDiagram: (filePath: string) => void;
-  consumePendingDiagramFile: () => string | null;
   setIsMobile: (isMobile: boolean) => void;
   toggleCommandPalette: () => void;
   setCommandPaletteOpen: (open: boolean) => void;
@@ -894,6 +860,7 @@ interface UIStore {
   setSettingsRemoteInstancesSelectedId: (instanceId: string | null) => void;
   setEventStreamStatus: (status: EventStreamStatus, hint?: string | null) => void;
   setShowReasoningTraces: (value: boolean) => void;
+  setStreamingAutoFollowEnabled: (value: boolean) => void;
   setSessionRecapEnabled: (value: boolean) => void;
   setSessionSuggestionEnabled: (value: boolean) => void;
   setSessionGoalEnabled: (value: boolean) => void;
@@ -956,6 +923,7 @@ interface UIStore {
   setNativeNotificationsEnabled: (value: boolean) => void;
   setNotificationMode: (mode: 'always' | 'hidden-only') => void;
   setShowTerminalQuickKeysOnDesktop: (value: boolean) => void;
+  setSessionTabsEnabled: (value: boolean) => void;
   setNotifyOnSubtasks: (value: boolean) => void;
   setDockBadgeEnabled: (value: boolean) => void;
   setNotifyOnCompletion: (value: boolean) => void;
@@ -993,7 +961,6 @@ interface UIStore {
   setCollapsibleUserMessages: (value: boolean) => void;
   setStickyUserHeader: (value: boolean) => void;
   setPromptNavigatorEnabled: (value: boolean) => void;
-  setExpandedEditorToolbar: (value: boolean) => void;
   setShowSplitAssistantMessageActions: (value: boolean) => void;
   setAllowPromptingSubagentSessions: (value: boolean) => void;
   viewPagerPage: 'left' | 'center' | 'right';
@@ -1035,15 +1002,9 @@ export const useUIStore = create<UIStore>()(
         workStatusHiddenSections: [],
         isSessionSwitcherOpen: false,
         isSessionDropdownOpen: false,
-        activeSurface: 'chat',
-        surfaceGuard: null,
-        activeMainTab: 'chat',
-        mainTabGuard: null,
-        sidebarOpenBeforeFullscreenTab: null,
         pendingDiffFile: null,
         pendingDiffStaged: false,
         pendingDiffScope: null,
-        pendingDiagramFile: null,
         pendingFileNavigation: null,
         pendingFileFocusPath: null,
         isMobile: false,
@@ -1068,6 +1029,7 @@ export const useUIStore = create<UIStore>()(
         eventStreamStatus: 'idle',
         eventStreamHint: null,
         showReasoningTraces: true,
+        streamingAutoFollowEnabled: true,
         sessionRecapEnabled: true,
         sessionSuggestionEnabled: true,
         sessionGoalEnabled: true,
@@ -1134,6 +1096,7 @@ export const useUIStore = create<UIStore>()(
         maxLastMessageLength: 250,
 
         showTerminalQuickKeysOnDesktop: false,
+        sessionTabsEnabled: false,
         persistChatDraft: true,
         showOpenCodeUpdateNotifications: !isWindowsArm64(),
         agentControlToolEnabled: true,
@@ -1159,7 +1122,6 @@ export const useUIStore = create<UIStore>()(
         collapsibleUserMessages: true,
         stickyUserHeader: false,
         promptNavigatorEnabled: true,
-        expandedEditorToolbar: false,
         showSplitAssistantMessageActions: false,
         allowPromptingSubagentSessions: false,
         draftStartersVisible: true,
@@ -1652,35 +1614,6 @@ export const useUIStore = create<UIStore>()(
           set({ isSessionDropdownOpen: open });
         },
 
-        setSurfaceGuard: (guard) => {
-          if (get().surfaceGuard === guard) {
-            return;
-          }
-          set({ surfaceGuard: guard, mainTabGuard: guard });
-        },
-
-        setMainTabGuard: (guard) => get().setSurfaceGuard(guard),
-
-        setActiveSurface: (surface) => {
-          const guard = get().surfaceGuard;
-          if (guard && !guard(surface)) {
-            return;
-          }
-          activeSurfaceByRuntime.set(runtimeMemoryKey(), surface);
-          set({ activeSurface: surface, activeMainTab: surface });
-        },
-
-        setActiveMainTab: (surface) => get().setActiveSurface(surface),
-
-        prepareForRuntimeSwitch: (runtimeKey?: string | null) => {
-          activeSurfaceByRuntime.set(runtimeMemoryKey(runtimeKey), get().activeSurface);
-        },
-
-        restoreForRuntimeSwitch: (runtimeKey?: string | null) => {
-          const restored = activeSurfaceByRuntime.get(runtimeMemoryKey(runtimeKey)) ?? 'chat';
-          set({ activeSurface: restored, activeMainTab: restored });
-        },
-
         setPendingDiffFile: (filePath, staged = false, scope = null) => {
           set({
             pendingDiffFile: filePath,
@@ -1689,10 +1622,6 @@ export const useUIStore = create<UIStore>()(
           });
         },
 
-        setPendingDiagramFile: (filePath) => {
-          set({ pendingDiagramFile: filePath });
-        },
-
         setPendingFileNavigation: (navigation) => {
           set({ pendingFileNavigation: navigation });
         },
@@ -1702,11 +1631,7 @@ export const useUIStore = create<UIStore>()(
         },
 
         navigateToDiff: (filePath, staged = false, scope = null) => {
-          const guard = get().surfaceGuard;
-          if (guard && !guard('diff')) {
-            return;
-          }
-          set({ pendingDiffFile: filePath, pendingDiffStaged: staged, pendingDiffScope: scope, activeSurface: 'diff', activeMainTab: 'diff' });
+          set({ pendingDiffFile: filePath, pendingDiffStaged: staged, pendingDiffScope: scope });
         },
 
         consumePendingDiffFile: () => {
@@ -1717,22 +1642,6 @@ export const useUIStore = create<UIStore>()(
           return pendingDiffFile;
         },
 
-        navigateToDiagram: (filePath) => {
-          const guard = get().surfaceGuard;
-          if (guard && !guard('diagram')) {
-            return;
-          }
-          set({ pendingDiagramFile: filePath, activeSurface: 'diagram', activeMainTab: 'diagram' });
-        },
-
-        consumePendingDiagramFile: () => {
-          const { pendingDiagramFile } = get();
-          if (pendingDiagramFile) {
-            set({ pendingDiagramFile: null });
-          }
-          return pendingDiagramFile;
-        },
-
         setIsMobile: (isMobile) => {
           set({ isMobile });
         },
@@ -1853,6 +1762,10 @@ export const useUIStore = create<UIStore>()(
           set({ showReasoningTraces: value });
         },
 
+        setStreamingAutoFollowEnabled: (value) => {
+          set({ streamingAutoFollowEnabled: value });
+        },
+
         setSessionRecapEnabled: (value) => {
           set({ sessionRecapEnabled: value });
         },
@@ -2339,6 +2252,10 @@ export const useUIStore = create<UIStore>()(
           set({ showTerminalQuickKeysOnDesktop: value });
         },
 
+        setSessionTabsEnabled: (value) => {
+          set({ sessionTabsEnabled: value });
+        },
+
         setNotifyOnSubtasks: (value) => {
           set({ notifyOnSubtasks: value });
         },
@@ -2444,9 +2361,6 @@ export const useUIStore = create<UIStore>()(
         setPromptNavigatorEnabled: (value) => {
           set({ promptNavigatorEnabled: value });
         },
-        setExpandedEditorToolbar: (value: boolean) => {
-          set({ expandedEditorToolbar: value });
-        },
         setShowSplitAssistantMessageActions: (value) => {
           set({ showSplitAssistantMessageActions: value });
         },
@@ -2498,18 +2412,25 @@ export const useUIStore = create<UIStore>()(
       {
         name: 'ui-store',
         storage: createDeferredSafeJSONStorage(),
-        version: 15,
+        version: 17,
         migrate: (persistedState, version) => {
           if (!persistedState || typeof persistedState !== 'object') {
             return persistedState;
           }
           const state = persistedState as Record<string, unknown>;
 
-          // v14 -> v15: rename the historic main-tab field. The selected
-          // mobile or promoted desktop view remains unchanged.
-          if (version < 15) {
-            state.activeSurface = state.activeMainTab;
-            state.activeMainTab = state.activeSurface;
+          // v15 -> v16: the main-area surface concept is gone from persistence
+          // (the chat always owns the desktop main area; panel surfaces have
+          // their own state). Drop the historic fields so a stored non-chat
+          // value cannot rehydrate into a blank main area.
+          if (version < 16) {
+            delete state.activeMainTab;
+            delete state.activeSurface;
+          }
+
+          // v16 -> v17: the editor toolbar is always docked; the preference is gone.
+          if (version < 17) {
+            delete state.expandedEditorToolbar;
           }
 
           // v13 -> v14: the separate 'preview' surface merged into 'browser'.
@@ -2717,9 +2638,6 @@ export const useUIStore = create<UIStore>()(
           workStatusPanelEnabled: state.workStatusPanelEnabled,
           workStatusHiddenSections: state.workStatusHiddenSections,
           isSessionSwitcherOpen: state.isSessionSwitcherOpen,
-          activeSurface: state.activeSurface,
-          // Keep the deprecated mirror synchronized while consumers migrate.
-          activeMainTab: state.activeSurface,
           sidebarSection: state.sidebarSection,
           settingsPage: state.settingsPage,
           settingsHasOpenedOnce: state.settingsHasOpenedOnce,
@@ -2728,6 +2646,7 @@ export const useUIStore = create<UIStore>()(
           isSessionCreateDialogOpen: state.isSessionCreateDialogOpen,
           // Note: isSettingsDialogOpen intentionally NOT persisted
           showReasoningTraces: state.showReasoningTraces,
+          streamingAutoFollowEnabled: state.streamingAutoFollowEnabled,
           sessionRecapEnabled: state.sessionRecapEnabled,
           sessionSuggestionEnabled: state.sessionSuggestionEnabled,
           sessionGoalEnabled: state.sessionGoalEnabled,
@@ -2768,6 +2687,7 @@ export const useUIStore = create<UIStore>()(
           nativeNotificationsEnabled: state.nativeNotificationsEnabled,
           notificationMode: state.notificationMode,
           showTerminalQuickKeysOnDesktop: state.showTerminalQuickKeysOnDesktop,
+          sessionTabsEnabled: state.sessionTabsEnabled,
           notifyOnSubtasks: state.notifyOnSubtasks,
           dockBadgeEnabled: state.dockBadgeEnabled,
           notifyOnCompletion: state.notifyOnCompletion,
@@ -2801,7 +2721,6 @@ export const useUIStore = create<UIStore>()(
           collapsibleUserMessages: state.collapsibleUserMessages,
           stickyUserHeader: state.stickyUserHeader,
           promptNavigatorEnabled: state.promptNavigatorEnabled,
-          expandedEditorToolbar: state.expandedEditorToolbar,
           showSplitAssistantMessageActions: state.showSplitAssistantMessageActions,
           allowPromptingSubagentSessions: state.allowPromptingSubagentSessions,
           draftStartersVisible: state.draftStartersVisible,
diff --git a/packages/ui/src/styles/mobile.css b/packages/ui/src/styles/mobile.css
index 1ffa22dc..91dbafd1 100644
--- a/packages/ui/src/styles/mobile.css
+++ b/packages/ui/src/styles/mobile.css
@@ -473,7 +473,7 @@
    choreography driven by useNativeMobileChrome:
 
      show: shell keeps its full height for the whole 0.25s; the composer (and, when
-           pinned, the chat scroll container — see useChatAutoFollow) slides up via
+           pinned, the chat scroll container — see useChatTimelineScroll) slides up via
            inline transforms in sync with the keyboard; at the end the shell snaps to
            its final height (--oc-kb-layout, one reflow) and the shift is removed
            in the same frame — visually identical, so the swap is invisible.
diff --git a/packages/ui/src/sync/sync-context.tsx b/packages/ui/src/sync/sync-context.tsx
index 772138a1..b3a02629 100644
--- a/packages/ui/src/sync/sync-context.tsx
+++ b/packages/ui/src/sync/sync-context.tsx
@@ -2647,6 +2647,48 @@ export function useSessionParts(messageID: string, directory?: string) {
   )
 }
 
+const EMPTY_PARTS_BY_MESSAGE: Record<string, Part[]> = {}
+
+/**
+ * Get parts for several messages at once, keyed by message id. The snapshot
+ * keeps its identity until one of the requested part arrays changes, so a
+ * streaming turn can overlay every one of its step messages — not only the
+ * currently streaming one — without tearing between them when the stream
+ * moves to the next message.
+ */
+export function useSessionPartsForMessages(messageIDs: readonly string[], directory?: string): Record<string, Part[]> {
+  const store = useDirectoryStore(directory)
+  const cacheRef = React.useRef<{ ids: readonly string[]; parts: Record<string, Part[]> } | null>(null)
+  const getSnapshot = useCallback(() => {
+    if (messageIDs.length === 0) return EMPTY_PARTS_BY_MESSAGE
+    const state = store.getState()
+    const cached = cacheRef.current
+    if (
+      cached
+      && cached.ids === messageIDs
+      && messageIDs.every((id) => (state.part[id] ?? EMPTY_PARTS) === (cached.parts[id] ?? EMPTY_PARTS))
+    ) {
+      return cached.parts
+    }
+    const parts: Record<string, Part[]> = {}
+    for (const id of messageIDs) parts[id] = state.part[id] ?? EMPTY_PARTS
+    cacheRef.current = { ids: messageIDs, parts }
+    return parts
+  }, [messageIDs, store])
+  const subscribe = useCallback((notify: () => void) => {
+    if (messageIDs.length === 0) return () => undefined
+    return store.subscribe((state, previous) => {
+      for (const id of messageIDs) {
+        if (state.part[id] !== previous.part[id]) {
+          notify()
+          return
+        }
+      }
+    })
+  }, [messageIDs, store])
+  return React.useSyncExternalStore(subscribe, getSnapshot, getSnapshot)
+}
+
 /** Get status for a specific session */
 export function useSessionStatus(sessionID: string, directory?: string) {
   const store = useDirectoryStore(directory)
diff --git a/packages/vscode/CHANGELOG.md b/packages/vscode/CHANGELOG.md
index 6aee14d0..1a6dbf45 100644
--- a/packages/vscode/CHANGELOG.md
+++ b/packages/vscode/CHANGELOG.md
@@ -5,6 +5,9 @@
 - **Chat: comment on a reply.** Select text in a chat message and choose Comment to attach that quote with your note to the next message; the selection stays highlighted while you type. Add to chat is now Add to input.
 - Diff: hovering a line shows a + button that opens a comment for the line; clicking a line or dragging across lines opens the editor for that range. The comment editor and saved-comment cards match the chat's comment style.
 - Composer: hovering a context chip above the input opens a stacked preview of everything attached, where comments can be edited in place or items removed before sending.
+- Chat: @ file mentions now rank files and directories together by how well they match, so the file you typed is at the top instead of below unrelated directories. Multi-word queries match in any order, and long paths keep the folder next to the file name visible.
+- Search: Ctrl/Cmd+P now matches the whole file path, not just the file name — searching a folder name finds the files inside it.
+- Search in dropdowns: searchable pickers (agents, models, providers, branches) now put the best matches first, match multi-word queries in any order, and ignore punctuation (so "gpt4o" finds "gpt-4o").
 - Chat: OpenCode notices now share one style.
 - The timeline dialog now fits small windows instead of squeezing the message list to a couple of rows (thanks to @gaojunran).
 
diff --git a/packages/vscode/src/DOCUMENTATION.md b/packages/vscode/src/DOCUMENTATION.md
index 72823844..ccf9e6bc 100644
--- a/packages/vscode/src/DOCUMENTATION.md
+++ b/packages/vscode/src/DOCUMENTATION.md
@@ -44,6 +44,8 @@ Keep `bridge.ts` as a thin orchestration layer that delegates message handling t
 
 The webview CSP permits `blob:` only for `worker-src` so shared UI parsers can run bounded local decompression off the main thread. Blob scripts remain disallowed by `script-src`.
 
+The webview build emits each worker as one self-contained file. VS Code webviews cannot load workers directly from extension resource URLs or load module imports from inside a worker. The shared Shiki client therefore fetches the built worker, starts it from a `blob:` URL, and relies on the worker CSP allowance above.
+
 - `bridge-localfs-proxy-runtime.ts`
   - Local `/api/fs/read` and `/api/fs/raw` proxy helpers and shared proxy utility helpers.
   - Workspace-contained Markdown gallery images use these local filesystem
diff --git a/packages/vscode/src/viteConfig.test.ts b/packages/vscode/src/viteConfig.test.ts
new file mode 100644
index 00000000..a4ef5d22
--- /dev/null
+++ b/packages/vscode/src/viteConfig.test.ts
@@ -0,0 +1,11 @@
+import assert from 'node:assert/strict';
+import { readFileSync } from 'node:fs';
+import { describe, test } from 'node:test';
+
+const source = readFileSync(new URL('../vite.config.ts', import.meta.url), 'utf8');
+
+describe('VS Code webview worker build', () => {
+  test('bundles worker imports into one file', () => {
+    assert.match(source, /worker:\s*\{[\s\S]*?inlineDynamicImports:\s*true/);
+  });
+});
diff --git a/packages/vscode/vite.config.ts b/packages/vscode/vite.config.ts
index 80fc9693..3544061c 100644
--- a/packages/vscode/vite.config.ts
+++ b/packages/vscode/vite.config.ts
@@ -25,6 +25,13 @@ export default defineConfig(({ mode }) => ({
   },
   worker: {
     format: 'es',
+    // VS Code webviews cannot load module imports from inside a web worker.
+    // Keep the Shiki worker self-contained instead of emitting grammar chunks.
+    rollupOptions: {
+      output: {
+        inlineDynamicImports: true,
+      },
+    },
   },
   define: {
     'process.env.NODE_ENV': JSON.stringify(mode === 'production' ? 'production' : 'development'),
diff --git a/packages/web/server/lib/terminal/DOCUMENTATION.md b/packages/web/server/lib/terminal/DOCUMENTATION.md
index 33fd9e54..f6271a71 100644
--- a/packages/web/server/lib/terminal/DOCUMENTATION.md
+++ b/packages/web/server/lib/terminal/DOCUMENTATION.md
@@ -19,6 +19,8 @@
 
 HTTP remains the authenticated command plane for create, resize, appearance updates, restart, close, and force-kill. There is no SSE output or HTTP input compatibility path.
 
+`GET /api/terminal/sessions` enumerates live sessions (optionally filtered by resolved `cwd`) so clients can adopt terminals their local tab projection does not know about — another device, a new browser tab, or cleared storage. `POST /api/terminal/touch` refreshes `lastActivity` for the listed session ids; open clients call it periodically so background tabs, which hold no WebSocket attachment, are not idle-reaped while a client still shows them.
+
 ## PTY Lifecycle
 
 - IDs are client-provided or generated with `randomUUID()`.
diff --git a/packages/web/server/lib/terminal/runtime.js b/packages/web/server/lib/terminal/runtime.js
index 5e90ac93..d018b6fe 100644
--- a/packages/web/server/lib/terminal/runtime.js
+++ b/packages/web/server/lib/terminal/runtime.js
@@ -228,7 +228,7 @@ export function createTerminalRuntime({
     }
     if (!existing && sessions.size + pendingSessionCreates.size >= MAX_SESSIONS) throw new Error('Maximum terminal sessions reached');
     const creation = (async () => {
-      const session = existing ?? { id, sequence: 0, history: '', pendingHistoryControlSequence: '', pendingThemeControlSequence: '', eventQueue: [], draining: false };
+      const session = existing ?? { id, sequence: 0, history: '', pendingHistoryControlSequence: '', pendingThemeControlSequence: '', eventQueue: [], draining: false, createdAt: Date.now() };
       await startSession(session, { cwd, cols, rows, themeMode, terminalBackground, terminalForeground, shell: normalizedShell, loginShell });
       sessions.set(id, session);
       return session;
@@ -297,6 +297,34 @@ export function createTerminalRuntime({
       res.status(500).json({ error: error?.message || 'Failed to list terminal shells' });
     }
   });
+  app.get('/api/terminal/sessions', (req, res) => {
+    const rawCwd = typeof req.query?.cwd === 'string' ? req.query.cwd.trim() : '';
+    const cwdFilter = rawCwd ? path.resolve(rawCwd) : null;
+    const list = [];
+    for (const session of sessions.values()) {
+      if (cwdFilter && path.resolve(session.cwd) !== cwdFilter) continue;
+      list.push({
+        sessionId: session.id,
+        cwd: session.cwd,
+        status: session.status,
+        createdAt: Number.isInteger(session.createdAt) ? session.createdAt : null,
+      });
+    }
+    res.json({ sessions: list });
+  });
+  app.post('/api/terminal/touch', (req, res) => {
+    const rawIds = Array.isArray(req.body?.sessionIds) ? req.body.sessionIds : [];
+    const now = Date.now();
+    let touched = 0;
+    for (const id of rawIds) {
+      if (typeof id !== 'string') continue;
+      const session = sessions.get(id);
+      if (!session) continue;
+      session.lastActivity = now;
+      touched += 1;
+    }
+    res.json({ touched });
+  });
   app.post('/api/terminal/create', async (req, res) => {
     try { const session = await createSession(req.body ?? {}); res.json({ sessionId: session.id, cols: session.cols, rows: session.rows, status: session.status }); }
     catch (error) { res.status(error?.message === 'Maximum terminal sessions reached' ? 429 : 400).json({ error: error?.message || 'Failed to create terminal session' }); }
diff --git a/packages/web/server/lib/terminal/runtime.test.js b/packages/web/server/lib/terminal/runtime.test.js
index 8232be95..f0a972df 100644
--- a/packages/web/server/lib/terminal/runtime.test.js
+++ b/packages/web/server/lib/terminal/runtime.test.js
@@ -179,6 +179,32 @@ describe('terminal runtime', () => {
     } finally { await harness.runtime.shutdown(); }
   });
 
+  it('lists sessions scoped to a working directory and refreshes activity via touch', async () => {
+    const harness = createHarness();
+    try {
+      await harness.routes.post.get('/api/terminal/create')({ body: { sessionId: 'term-a', cwd: '/repo' } }, createResponse());
+      await harness.routes.post.get('/api/terminal/create')({ body: { sessionId: 'term-b', cwd: '/other' } }, createResponse());
+
+      const all = createResponse();
+      harness.routes.get.get('/api/terminal/sessions')({ query: {} }, all);
+      expect(all.body.sessions.map((s) => s.sessionId).sort()).toEqual(['term-a', 'term-b']);
+
+      const scoped = createResponse();
+      harness.routes.get.get('/api/terminal/sessions')({ query: { cwd: '/repo' } }, scoped);
+      expect(scoped.body.sessions).toEqual([
+        { sessionId: 'term-a', cwd: '/repo', status: 'running', createdAt: expect.any(Number) },
+      ]);
+
+      const touch = createResponse();
+      harness.routes.post.get('/api/terminal/touch')({ body: { sessionIds: ['term-a', 'missing', 42] } }, touch);
+      expect(touch.body).toEqual({ touched: 1 });
+
+      const malformed = createResponse();
+      harness.routes.post.get('/api/terminal/touch')({ body: {} }, malformed);
+      expect(malformed.body).toEqual({ touched: 0 });
+    } finally { await harness.runtime.shutdown(); }
+  });
+
   it('strips AppImage ARGV0 from PTY child environments', async () => {
     const previousArgv0 = process.env.ARGV0;
     process.env.ARGV0 = '/path/to/OpenChamber/OpenChamber-1.17.2-linux-x86_64.AppImage';
diff --git a/packages/web/src/api/terminal.ts b/packages/web/src/api/terminal.ts
index 1c029ab2..c82f2446 100644
--- a/packages/web/src/api/terminal.ts
+++ b/packages/web/src/api/terminal.ts
@@ -8,6 +8,8 @@ import {
   restartTerminalSession,
   forceKillTerminal,
   listTerminalShells,
+  listTerminalSessions,
+  touchTerminalSessions,
 } from '@openchamber/ui/lib/terminalApi';
 import type {
   TerminalAPI,
@@ -23,6 +25,14 @@ export const createWebTerminalAPI = (): TerminalAPI => ({
     return listTerminalShells();
   },
 
+  async listSessions(cwd: string) {
+    return listTerminalSessions(cwd);
+  },
+
+  async touchSessions(sessionIds: string[]) {
+    await touchTerminalSessions(sessionIds);
+  },
+
   async createSession(options: CreateTerminalOptions): Promise<TerminalSession> {
     return createTerminalSession(options);
   },
diff --git a/packages/web/src/main.tsx b/packages/web/src/main.tsx
index 83e06823..4dd0d7a9 100644
--- a/packages/web/src/main.tsx
+++ b/packages/web/src/main.tsx
@@ -2,7 +2,7 @@ import { createConfiguredWebAPIs, getDesktopRelayRestoreReady } from './runtimeC
 import { registerSW } from 'virtual:pwa-register';
 
 import type { RuntimeAPIs } from '@openchamber/ui/lib/api/types';
-import { resolveHostedSurface, type HostedSurface } from '@openchamber/ui/lib/runtimeSurface';
+import { resolveHostedSurface, watchHostedSurfaceViewport, type HostedSurface } from '@openchamber/ui/lib/runtimeSurface';
 import {
   isEmbeddedSessionChat,
   requestEmbeddedSessionRuntimeBootstrap,
@@ -90,6 +90,10 @@ const start = async (): Promise<void> => {
     : null;
   window.__OPENCHAMBER_RUNTIME_APIS__ = createConfiguredWebAPIs(embeddedBootstrap);
 
+  // Reload into the other app shell when the viewport crosses the phone
+  // threshold after boot (no-op in fixed shells and with ?surface= overrides).
+  watchHostedSurfaceViewport();
+
   if (hostedSurface === 'mobile') {
     const { renderMobileApp } = await import('@openchamber/ui/apps/renderMobileApp');
     renderMobileApp(window.__OPENCHAMBER_RUNTIME_APIS__);