diff --git a/CHANGELOG.md b/CHANGELOG.md
index 38d653c2..6299a7bb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,41 @@ All notable changes to this project will be documented in this file.
 
 ## [Unreleased]
 
+- **Chat scrolling rebuilt around your message.** Sending a message 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. Streamed 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, and opening a session goes straight to the newest message with no scroll animation.
+- **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.
+- **Faster session switching in large workspaces** (thanks @c-w-xiaohei): switching sessions no longer rebuilds the whole sidebar, returning to a recently viewed session restores its rendered messages instead of re-rendering them (file links included), and scrolling long conversations costs less. In a workspace with thousands of loaded sessions, end-to-end switch time dropped by roughly half.
+- **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.
+- Chat: comment on a reply — select text in a chat message (or in a rendered markdown preview in Files) and choose Comment to attach exactly that quote, with a source line range when it can be located, plus your note to the next message. The selection stays highlighted while you type, and the selection menu was restyled — Add to chat is now Add to input.
+- Diff: comment like a review — hovering a line shows a + button in the gutter; clicking it, clicking a line, or dragging across lines opens the comment editor for that line or range. The comment editor and saved-comment cards match the chat's comment style.
+- 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 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.
+- Search: 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"). Ctrl/Cmd+P also matches the whole file path, not just the file name, and the git branch and gitmoji pickers stopped silently dropping rows a second built-in filter didn't like. Sidebar session search and the Todos/Memory/Plans/Notes filters match the same way.
+- Chat: @ file mentions 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.
+- 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.
+- Mobile: narrowing a browser window past phone size 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.
+- Chat: streamed code blocks are 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.
+- 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.
+- Fixed file links in messages being checked twice against the filesystem, and against the wrong project directory on the first pass.
+- Fixed the selected project or session briefly jumping back to a previous choice when settings responses arrived out of order.
+- Fixed sessions staying on "loading sessions" forever after the connection to OpenCode went half-open — stalled reads now time out and retry instead of holding bootstrap hostage (thanks @herjarsa).
+- Files: previews of files above the editable size cap now show the whole file instead of the first 200k characters, virtualized so opening and scrolling a huge file no longer freezes the app (thanks @gaojunran).
+- Terminal: mobile keyboards no longer capitalize the first letter of every command on iOS and Android.
+- Desktop: a freshly installed or updated build no longer keeps loading the previous version's interface from cache.
+- Devices: re-pairing a phone (or logging in again) keeps the device's existing name in Connected Devices instead of resetting it to "OpenChamber Mobile".
+- Relay: paired devices no longer get logged out when the app restarts (for example during an update) while another local OpenChamber process is running — the restarted app keeps serving them instead of a bystander process taking over.
+- Sessions: headers now find archived sessions too, so an archived session's title no longer goes missing.
+- Files: the editor toolbar is now always docked under the file tabs; the floating hover toolbar and its setting were removed.
+- UI: the chat's top and bottom scroll fades are back, and the first uncached open of a session fades the conversation in instead of popping.
+- UI: the timeline dialog now fits small screens instead of squeezing the message list to a couple of rows (thanks to @gaojunran).
+- Chat: OpenCode notices now share one style.
+- UI: draft target menus stay inside the chat area instead of overlapping the header.
+- UI: Linear and Cloudflare tools now show their own icons.
+- UI: sidebar item tooltips no longer appear instantly on passing hover.
+- UI: the btw panel's shadow is lighter, matching the composer.
+
 ## [1.20.0] - 2026-08-23
 
 - **Session: /btw side questions.** Type `/btw` followed by your question to ask something off-topic in a temporary session forked from the current conversation, so it inherits the full context but leaves the chat itself untouched. The answer streams into a panel above the composer, which talks to that session while the panel is open; you can collapse it to a slim header bar, keep it as a full session, or discard it. The temporary session stays out of the sidebar and session lists until you keep it (thanks to @jaygupta17).
diff --git a/bun.lock b/bun.lock
index 2b7a26c2..3155488f 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",
@@ -227,6 +228,7 @@
         "eslint-plugin-react-hooks": "^5.2.0",
         "eslint-plugin-react-refresh": "^0.5.0",
         "globals": "^16.3.0",
+        "happy-dom": "^18.0.1",
         "nodemon": "^3.1.7",
         "tailwindcss": "^4.0.0",
         "tsx": "^4.20.6",
@@ -238,7 +240,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 +263,7 @@
     },
     "packages/web": {
       "name": "@openchamber/web",
-      "version": "1.19.0",
+      "version": "1.20.0",
       "bin": {
         "openchamber": "./bin/cli.js",
       },
@@ -917,6 +919,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=="],
@@ -1451,6 +1455,8 @@
 
     "@types/vscode": ["@types/vscode@1.109.0", "", {}, "sha512-0Pf95rnwEIwDbmXGC08r0B4TQhAbsHQ5UyTIgVgoieDe4cOnf92usuR5dEczb6bTKEp7ziZH4TV1TRGPPCExtw=="],
 
+    "@types/whatwg-mimetype": ["@types/whatwg-mimetype@3.0.2", "", {}, "sha512-c2AKvDT8ToxLIOUlN51gTiHXflsfIFisS4pO7pDPoKouJCESkhZnEy623gwP9laCy5lnLDAw1vAzu2vM2YLOrA=="],
+
     "@typescript-eslint/eslint-plugin": ["@typescript-eslint/eslint-plugin@8.56.1", "", { "dependencies": { "@eslint-community/regexpp": "^4.12.2", "@typescript-eslint/scope-manager": "8.56.1", "@typescript-eslint/type-utils": "8.56.1", "@typescript-eslint/utils": "8.56.1", "@typescript-eslint/visitor-keys": "8.56.1", "ignore": "^7.0.5", "natural-compare": "^1.4.0", "ts-api-utils": "^2.4.0" }, "peerDependencies": { "@typescript-eslint/parser": "^8.56.1", "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0", "typescript": ">=4.8.4 <6.0.0" } }, "sha512-Jz9ZztpB37dNC+HU2HI28Bs9QXpzCz+y/twHOwhyrIRdbuVDxSytJNDl6z/aAKlaRIwC7y8wJdkBv7FxYGgi0A=="],
 
     "@typescript-eslint/parser": ["@typescript-eslint/parser@8.56.1", "", { "dependencies": { "@typescript-eslint/scope-manager": "8.56.1", "@typescript-eslint/types": "8.56.1", "@typescript-eslint/typescript-estree": "8.56.1", "@typescript-eslint/visitor-keys": "8.56.1", "debug": "^4.4.3" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0", "typescript": ">=4.8.4 <6.0.0" } }, "sha512-klQbnPAAiGYFyI02+znpBRLyjL4/BrBd0nyWkdC0s/6xFLkXYQ8OoRrSkqacS1ddVxf/LDyODIKbQ5TgKAf/Fg=="],
@@ -2139,6 +2145,8 @@
 
     "guid-typescript": ["guid-typescript@1.0.9", "", {}, "sha512-Y8T4vYhEfwJOTbouREvG+3XDsjr8E3kIr7uf+JZ0BYloFsttiHU0WfvANVsR7TxNUJa/WpCnw/Ino/p+DeBhBQ=="],
 
+    "happy-dom": ["happy-dom@18.0.1", "", { "dependencies": { "@types/node": "^20.0.0", "@types/whatwg-mimetype": "^3.0.2", "whatwg-mimetype": "^3.0.0" } }, "sha512-qn+rKOW7KWpVTtgIUi6RVmTBZJSe2k0Db0vh1f7CWrWclkkc7/Q+FrOfkZIb2eiErLyqu5AXEzE7XthO9JVxRA=="],
+
     "has-bigints": ["has-bigints@1.1.0", "", {}, "sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg=="],
 
     "has-flag": ["has-flag@4.0.0", "", {}, "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="],
@@ -3351,7 +3359,7 @@
 
     "whatwg-encoding": ["whatwg-encoding@3.1.1", "", { "dependencies": { "iconv-lite": "0.6.3" } }, "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ=="],
 
-    "whatwg-mimetype": ["whatwg-mimetype@4.0.0", "", {}, "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg=="],
+    "whatwg-mimetype": ["whatwg-mimetype@3.0.0", "", {}, "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q=="],
 
     "whatwg-url": ["whatwg-url@5.0.0", "", { "dependencies": { "tr46": "~0.0.3", "webidl-conversions": "^3.0.0" } }, "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw=="],
 
@@ -3589,6 +3597,8 @@
 
     "cheerio/undici": ["undici@7.22.0", "", {}, "sha512-RqslV2Us5BrllB+JeiZnK4peryVTndy9Dnqq62S3yYRRTj0tFQCwEniUy2167skdGOy3vqRzEvl1Dm4sV2ReDg=="],
 
+    "cheerio/whatwg-mimetype": ["whatwg-mimetype@4.0.0", "", {}, "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg=="],
+
     "chokidar/glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
 
     "cli-truncate/string-width": ["string-width@7.2.0", "", { "dependencies": { "emoji-regex": "^10.3.0", "get-east-asian-width": "^1.0.0", "strip-ansi": "^7.1.0" } }, "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ=="],
@@ -3629,6 +3639,8 @@
 
     "globby/slash": ["slash@5.1.0", "", {}, "sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg=="],
 
+    "happy-dom/@types/node": ["@types/node@20.19.43", "", { "dependencies": { "undici-types": "~6.21.0" } }, "sha512-6oYBAi5ikg4Pl+kGsoYtawUMBT2zZMCvPNF7pVLnHZfd1zf38DRiWn/gT01RYCdUqkv7Fhr+C9ot4/tb+2sVvA=="],
+
     "iconv-corefoundation/cli-truncate": ["cli-truncate@2.1.0", "", { "dependencies": { "slice-ansi": "^3.0.0", "string-width": "^4.2.0" } }, "sha512-n8fOixwDD6b/ObinzTrp1ZKFzbgvKZvuz/TvejnLn1aQfC6r52XEx85FmuC+3HI+JM7coBRXUvNqEU2PHVrHpg=="],
 
     "iconv-corefoundation/node-addon-api": ["node-addon-api@1.7.2", "", {}, "sha512-ibPK3iA+vaY1eEjESkQkM0BbCqFOaZMiXRTtdB0u7b4djtY6JnsjvPdUHVMg6xQt3B8fpTTWHI9A+ADjM9frzg=="],
@@ -3815,6 +3827,8 @@
 
     "glob/minimatch/brace-expansion": ["brace-expansion@5.0.4", "", { "dependencies": { "balanced-match": "^4.0.2" } }, "sha512-h+DEnpVvxmfVefa4jFbCf5HdH5YMDXRsmKflpf1pILZWRFlTbJpxeU55nJl4Smt5HQaGzg1o6RHFPJaOqnmBDg=="],
 
+    "happy-dom/@types/node/undici-types": ["undici-types@6.21.0", "", {}, "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ=="],
+
     "iconv-corefoundation/cli-truncate/slice-ansi": ["slice-ansi@3.0.0", "", { "dependencies": { "ansi-styles": "^4.0.0", "astral-regex": "^2.0.0", "is-fullwidth-code-point": "^3.0.0" } }, "sha512-pSyv7bSTC7ig9Dcgbw9AuRNUb5k5V6oDudjZoMBSr13qpLBG7tB+zgCkARjq7xIUgdz5P1Qe8u+rSGdouOOIyQ=="],
 
     "micromark-extension-math/katex/commander": ["commander@8.3.0", "", {}, "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww=="],
diff --git a/packages/electron/main.mjs b/packages/electron/main.mjs
index 9ecbead7..0442f814 100644
--- a/packages/electron/main.mjs
+++ b/packages/electron/main.mjs
@@ -1240,7 +1240,15 @@ const registerPackagedUiProtocol = () => {
         if (filePath.endsWith('.html')) {
           const html = await fsp.readFile(filePath, 'utf8');
           const body = injectRuntimeConfigIntoHtml(html);
-          return new Response(body, { headers: { 'Content-Type': 'text/html; charset=utf-8' } });
+          // index.html must never be cached: it names the hashed asset
+          // bundles, and a cached copy keeps a freshly installed build
+          // loading the previous version's UI from the renderer disk cache.
+          return new Response(body, {
+            headers: {
+              'Content-Type': 'text/html; charset=utf-8',
+              'Cache-Control': 'no-store',
+            },
+          });
         }
         return electronNet.fetch(pathToFileURL(filePath).toString());
       }
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..c9648636 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",
@@ -103,6 +104,7 @@
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.5.0",
     "globals": "^16.3.0",
+    "happy-dom": "^18.0.1",
     "nodemon": "^3.1.7",
     "tailwindcss": "^4.0.0",
     "tsx": "^4.20.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/MobileSessionSwitcher.tsx b/packages/ui/src/apps/MobileSessionSwitcher.tsx
index c05b9ecf..fdaf436f 100644
--- a/packages/ui/src/apps/MobileSessionSwitcher.tsx
+++ b/packages/ui/src/apps/MobileSessionSwitcher.tsx
@@ -3,7 +3,7 @@ import type { Session } from '@opencode-ai/sdk/v2';
 
 import { SessionActivityDuration } from '@/components/session/SessionActivityDuration';
 import { formatSessionCompactDateLabel } from '@/components/session/sidebar/utils';
-import { useSwitcherItems } from '@/components/session/sidebar/hooks/useSwitcherItems';
+import { useSwitcherItems } from '@/components/session/sidebar/shell/useSwitcherItems';
 import { useTabletLayout } from '@/lib/device';
 import { useI18n } from '@/lib/i18n';
 import { cn } from '@/lib/utils';
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 d7676df7..0873eee2 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,83 +323,96 @@ 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>
-                <OverlayScrollbar containerRef={scrollRef} suppressVisibility={isProgrammaticFollowActive} userIntentOnly observeMutations={false} />
+                <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} disableHorizontal suppressVisibility={isProgrammaticFollowActive} userIntentOnly observeMutations={false} />
                 {showPromptNavigator && promptTurnIds.length >= 2 ? (
                     <PromptNavigatorRail
                         turnIds={promptTurnIds}
@@ -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
@@ -478,9 +496,11 @@ const ReadOnlyPromptBanner: React.FC = () => {
     const { t } = useI18n();
 
     return (
-        <div className="p-3">
-            <div className="rounded-2xl border border-border/70 bg-[var(--surface-background)] px-4 py-3 typography-ui-label text-muted-foreground">
-                {t('chat.container.readOnlySubagentPromptBanner')}
+        <div className="w-full py-3">
+            <div className="chat-input-column">
+                <div className="rounded-2xl border border-border/70 bg-[var(--surface-background)] px-4 py-3 text-center typography-ui-label text-muted-foreground">
+                    {t('chat.container.readOnlySubagentPromptBanner')}
+                </div>
             </div>
         </div>
     );
@@ -797,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);
 
@@ -889,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,
     });
 
@@ -920,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,
@@ -956,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
@@ -1004,8 +1091,7 @@ export const ChatContainer: React.FC<ChatContainerProps> = ({
                 return;
             }
 
-            const { activeMainTab } = useUIStore.getState();
-            if (activeMainTab !== 'chat' || hasBlockingChatOverlay()) {
+            if (hasBlockingChatOverlay()) {
                 return;
             }
 
@@ -1070,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);
@@ -1083,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;
         }
 
@@ -1095,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;
@@ -1190,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">
@@ -1210,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',
@@ -1264,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}
@@ -1313,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 />
@@ -1324,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 2981248e..f088d16d 100644
--- a/packages/ui/src/components/chat/ChatInput.tsx
+++ b/packages/ui/src/components/chat/ChatInput.tsx
@@ -21,7 +21,6 @@ import { buildLinkedIssue } from '@/lib/linkedIssues';
 import { useUserMessageHistory } from "@/sync/sync-context";
 import { getInlineCommentDraftKey, useInlineCommentDraftStore, type InlineCommentDraft, type InlineCommentDraftTarget } from '@/stores/useInlineCommentDraftStore';
 import { useSnippetsStore } from '@/stores/useSnippetsStore';
-import { appendInlineComments } from '@/lib/messages/inlineComments';
 import { renderMagicPrompt } from '@/lib/magicPrompts';
 import { startReviewFlow } from '@/lib/reviewFlow';
 import { getRuntimeKey } from '@/lib/runtime-switch';
@@ -49,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';
@@ -221,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;
 }
@@ -244,6 +247,7 @@ const resolveChatDraftIdentity = (sessionId: string | null): ChatDraftIdentity |
 const ChatInputComponent: React.FC<ChatInputProps> = ({
     onOpenSettings,
     scrollToBottom,
+    scrollToLatest,
     active = true,
     draftPresentationExiting = false,
 }) => {
@@ -753,55 +757,8 @@ const ChatInputComponent: React.FC<ChatInputProps> = ({
             [inlineDraftKey]
         )
     );
-    const draftSourceKey = useInlineCommentDraftStore(
-        React.useCallback(
-            (state) => {
-                const drafts = inlineDraftKey ? (state.drafts[inlineDraftKey] ?? []) : [];
-                let previewConsole = 0;
-                let previewAnnotation = 0;
-                let review = 0;
-                let terminal = 0;
-                let prComment = 0;
-                let prCheck = 0;
-                for (const draft of drafts) {
-                    if (draft.source === 'preview-console') previewConsole += 1;
-                    else if (draft.source === 'preview-annotation') previewAnnotation += 1;
-                    else if (draft.source === 'terminal') terminal += 1;
-                    else if (draft.source === 'pr-comment') prComment += 1;
-                    else if (draft.source === 'pr-check') prCheck += 1;
-                    else review += 1;
-                }
-                return `${previewConsole}:${previewAnnotation}:${review}:${terminal}:${prComment}:${prCheck}`;
-            },
-            [inlineDraftKey]
-        )
-    );
     const consumeDrafts = useInlineCommentDraftStore((state) => state.consumeDrafts);
-    const removeInlineCommentDraft = useInlineCommentDraftStore((state) => state.removeDraft);
     const hasDrafts = draftCount > 0;
-    const [previewConsoleCount, previewAnnotationCount, reviewCount, terminalContextCount, prCommentCount, prCheckCount] = draftSourceKey.split(':').map((entry) => Number(entry) || 0);
-    const terminalContextDrafts = terminalContextCount > 0
-        ? (inlineDraftKey ? useInlineCommentDraftStore.getState().drafts[inlineDraftKey] ?? [] : []).filter((draft) => draft.source === 'terminal')
-        : [];
-    const removePreviewDrafts = React.useCallback((source: 'preview-console' | 'preview-annotation' | 'pr-comment' | 'pr-check') => {
-        if (!inlineDraftTarget) return;
-        const drafts = useInlineCommentDraftStore.getState().getDrafts(inlineDraftTarget);
-        for (const draft of drafts) {
-            if (draft.source === source) {
-                removeInlineCommentDraft(inlineDraftTarget, draft.id);
-            }
-        }
-    }, [inlineDraftTarget, removeInlineCommentDraft]);
-    // Review comments are the inline-comment drafts that aren't preview sources.
-    const removeReviewDrafts = React.useCallback(() => {
-        if (!inlineDraftTarget) return;
-        const drafts = useInlineCommentDraftStore.getState().getDrafts(inlineDraftTarget);
-        for (const draft of drafts) {
-            if (draft.source !== 'preview-console' && draft.source !== 'preview-annotation' && draft.source !== 'terminal' && draft.source !== 'pr-comment' && draft.source !== 'pr-check') {
-                removeInlineCommentDraft(inlineDraftTarget, draft.id);
-            }
-        }
-    }, [inlineDraftTarget, removeInlineCommentDraft]);
 
     // User message history for up/down arrow navigation.
     // Keep this on a narrow hook instead of full session message records.
@@ -930,12 +887,9 @@ const ChatInputComponent: React.FC<ChatInputProps> = ({
         const inputSnapshot = getCurrentInputSnapshot();
         if (!inputSnapshot.hasContent || !currentSessionId || !messageQueueTarget) return;
 
-        const drafts = inlineDraftTarget ? consumeDrafts(inlineDraftTarget) : [];
-
-        let messageToQueue = inputSnapshot.message.replace(/^\n+|\n+$/g, '');
-        if (drafts.length > 0) {
-            messageToQueue = appendInlineComments(messageToQueue, drafts);
-        }
+        // Context drafts stay in their store: the send that later delivers the
+        // queue consumes them and attaches them as structured context parts.
+        const messageToQueue = inputSnapshot.message.replace(/^\n+|\n+$/g, '');
         const attachmentsToQueue = sanitizeAttachmentsForSend(attachedFiles);
 
         addToQueue(messageQueueTarget, {
@@ -949,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.
@@ -961,7 +921,7 @@ const ChatInputComponent: React.FC<ChatInputProps> = ({
         if (!isMobile) {
             composerRef.current?.focus();
         }
-    }, [getCurrentInputSnapshot, currentSessionId, messageQueueTarget, inlineDraftTarget, attachedFiles, sanitizeAttachmentsForSend, addToQueue, clearAttachedFiles, isMobile, consumeDrafts, 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);
@@ -1140,9 +1100,11 @@ const ChatInputComponent: React.FC<ChatInputProps> = ({
         }
 
         // Inline review comments and synthetic context are consumed before
-        // assembly so a failed send can restore exactly what it took.
+        // assembly so a failed send can restore exactly what it took. Context
+        // drafts ride with whichever send goes out next, including queued
+        // auto-sends: queueing leaves them in the store on purpose.
         const syntheticParts = consumePendingSyntheticParts();
-        const consumedDraftTarget = queuedOnly ? null : inlineDraftTarget;
+        const consumedDraftTarget = inlineDraftTarget;
         const drafts: InlineCommentDraft[] = consumedDraftTarget
             ? consumeDrafts(consumedDraftTarget)
             : [];
@@ -1157,9 +1119,11 @@ const ChatInputComponent: React.FC<ChatInputProps> = ({
             composerAttachments: attachedFiles,
             inlineComments: drafts,
             syntheticTexts: syntheticParts?.map((part) => part.text) ?? [],
-            linkedIssueContext: linkedIssue?.contextText ?? null,
+            linkedIssue: linkedIssue
+                ? { number: linkedIssue.number, title: linkedIssue.title, url: linkedIssue.url, contextText: linkedIssue.contextText }
+                : null,
             linkedPr: linkedPr
-                ? { instructions: linkedPr.instructionsText, context: linkedPr.contextText }
+                ? { number: linkedPr.number, title: linkedPr.title, url: linkedPr.url, instructions: linkedPr.instructionsText, context: linkedPr.contextText }
                 : null,
         }, {
             parseAgentMention: (text) => {
@@ -1172,8 +1136,6 @@ const ChatInputComponent: React.FC<ChatInputProps> = ({
             },
             sanitizeAttachments: sanitizeAttachmentsForSend,
             collectSkillNames: (text) => collectInlineSkillMentions(text, availableSkillNames),
-            appendComments: (text, comments) =>
-                appendInlineComments(text, comments as InlineCommentDraft[]),
             buildSkillInstruction: buildSkillMentionInstruction,
         });
 
@@ -1338,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,
@@ -1356,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
@@ -2663,16 +2622,7 @@ const ChatInputComponent: React.FC<ChatInputProps> = ({
                 <AutoReviewBanner />
                 {hasDrafts ? (
                     <ComposerContextChips
-                        terminalDrafts={terminalContextDrafts}
-                        reviewCount={reviewCount}
-                        prCommentCount={prCommentCount}
-                        prCheckCount={prCheckCount}
-                        previewConsoleCount={previewConsoleCount}
-                        previewAnnotationCount={previewAnnotationCount}
                         draftTarget={inlineDraftTarget}
-                        onRemoveDraft={removeInlineCommentDraft}
-                        onRemoveReviewDrafts={removeReviewDrafts}
-                        onRemovePreviewDrafts={removePreviewDrafts}
                         colors={currentTheme.colors}
                     />
                 ) : null}
@@ -2706,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 3fe0ef62..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,
@@ -705,30 +700,25 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
         }
         if (errorName === 'SessionRetry') {
             return {
-                text: `Opencode failed to send a message. Retry attempt info: \n\`${detail}\``,
-                variant: 'info' as const,
+                text: `Opencode failed to send a message. Retry attempt info: ${detail}`,
             };
         }
         if (isLikelyProviderAuthFailure(detail)) {
             return {
                 text: PROVIDER_AUTH_FAILURE_MESSAGE,
-                variant: 'error' as const,
             };
         }
         if (detail.trim().toLowerCase() === 'aborted') {
             return {
                 text: 'The running turn was stopped before OpenCode could send the next message.',
-                variant: 'info' as const,
             };
         }
         return {
-            text: `Opencode failed to send message with error:\n\`${detail}\``,
-            variant: 'error' as const,
+            text: `Opencode failed to send message with error: ${detail}`,
         };
     }, [isUser, message.info]);
 
     const assistantErrorText = assistantError?.text;
-    const assistantErrorVariant = assistantError?.variant;
 
     const messageTextContent = React.useMemo(() => {
         if (isUser) {
@@ -855,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) => {
@@ -906,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;
@@ -1075,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}
@@ -1089,7 +947,6 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
                                                 contextPinPending={pinPending}
                                                 onToggleContextPin={canPinIntoContext && messageCreatedAt ? handleToggleContextPin : undefined}
                                                 errorMessage={assistantErrorText}
-                                                errorVariant={assistantErrorVariant}
                                                 userActionsMode={useExternalUserActionsRow ? 'external-content' : 'inline'}
                                                 stickyUserHeaderEnabled={stickyUserHeader}
                                             />
@@ -1112,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}
@@ -1126,7 +981,6 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
                                                 contextPinPending={pinPending}
                                                 onToggleContextPin={canPinIntoContext && messageCreatedAt ? handleToggleContextPin : undefined}
                                                 errorMessage={assistantErrorText}
-                                                errorVariant={assistantErrorVariant}
                                                 userActionsMode="external-actions"
                                                 stickyUserHeaderEnabled={stickyUserHeader}
                                             />
@@ -1159,17 +1013,14 @@ 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}
                                 errorMessage={assistantErrorText}
-                                errorVariant={assistantErrorVariant}
                                 reviewTransferDirection={reviewTransferDirection}
                                 footerProviderID={headerProviderID}
                                 footerModelName={headerModelName}
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.performance.test.tsx b/packages/ui/src/components/chat/MarkdownRendererImpl.performance.test.tsx
new file mode 100644
index 00000000..3151033c
--- /dev/null
+++ b/packages/ui/src/components/chat/MarkdownRendererImpl.performance.test.tsx
@@ -0,0 +1,562 @@
+import { afterAll, describe, expect, test } from 'bun:test';
+import { Window } from 'happy-dom';
+import React, { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import type { TextPart } from '@opencode-ai/sdk/v2';
+
+type OperationCounts = {
+  innerHTMLWrites: number;
+  spriteIconInnerHTMLWrites: number;
+  querySelectorAllCalls: number;
+  appendCalls: number;
+  replaceCalls: number;
+  removeCalls: number;
+  getBoundingClientRectCalls: number;
+  viewBoxWrites: number;
+  resizeObserverCreates: number;
+  resizeObserverObserveCalls: number;
+  geometrySequence: Array<'read' | 'write'>;
+};
+
+type FixtureMetrics = OperationCounts & {
+  renderers: number;
+  markdownBlocks: number;
+  mermaidBlocks: number;
+  mermaidRenderedCount: number;
+  mermaidSvgCount: number;
+};
+
+const fixture = [
+  '# Synthetic mount fixture',
+  '',
+  'A paragraph with **bold text**, a table, and a stable link.',
+  '',
+  '| name | value |',
+  '| --- | ---: |',
+  '| alpha | 1 |',
+  '| beta | 2 |',
+  '',
+  '```typescript',
+  'const answer = 42;',
+  'console.log(answer);',
+  '```',
+  '',
+  '```mermaid',
+  'graph TD',
+  '  A[Start] --> B[Finish]',
+  '```',
+  '',
+  '```mermaid',
+  'graph LR',
+  '  Client[Client] --> Server[Server]',
+  '```',
+].join('\n');
+
+const fixtureWorkload = {
+  rendererCount: 3,
+  domBlocksPerRenderer: 1,
+  mermaidBlocksPerRenderer: 2,
+};
+
+let windowInstance: Window;
+let previousGlobals: Map<string, PropertyDescriptor | undefined>;
+let activeCounts: OperationCounts | null = null;
+let animationFrameQueue: FrameRequestCallback[] = [];
+let notifyResize: ((entries: Array<{ target: Element; contentRect: { width: number; height: number } }>) => void) | null = null;
+let MarkdownRenderer: React.ComponentType<{
+  content: string;
+  messageId: string;
+  part?: TextPart;
+  isAnimated?: boolean;
+  isStreaming?: boolean;
+  enableFileReferences?: boolean;
+}>;
+let clearDetachedMarkdownDomCache: () => void;
+let detachedMarkdownDomCacheStats: () => { sessions: number; entries: number };
+
+const makeCounts = (): OperationCounts => ({
+  innerHTMLWrites: 0,
+  spriteIconInnerHTMLWrites: 0,
+  querySelectorAllCalls: 0,
+  appendCalls: 0,
+  replaceCalls: 0,
+  removeCalls: 0,
+  getBoundingClientRectCalls: 0,
+  viewBoxWrites: 0,
+  resizeObserverCreates: 0,
+  resizeObserverObserveCalls: 0,
+  geometrySequence: [],
+});
+
+const installGlobal = (name: string, value: Window[keyof Window]): void => {
+  previousGlobals.set(name, Object.getOwnPropertyDescriptor(globalThis, name));
+  Object.defineProperty(globalThis, name, { configurable: true, writable: true, value });
+};
+
+const waitForSettledEffects = async (): Promise<void> => {
+  await new Promise<void>((resolve) => setTimeout(resolve, 25));
+  await Promise.resolve();
+};
+
+const flushAnimationFrame = async (): Promise<void> => {
+  const callbacks = animationFrameQueue;
+  animationFrameQueue = [];
+  await act(async () => {
+    for (const callback of callbacks) callback(windowInstance.performance.now());
+    await Promise.resolve();
+  });
+};
+
+const flushDeferredMermaidInitialization = async (): Promise<void> => {
+  await flushAnimationFrame();
+  await flushAnimationFrame();
+};
+
+const mountFixture = async (rendererCount: number): Promise<{
+  root: Root;
+  host: HTMLDivElement;
+  operations: OperationCounts;
+  counts: FixtureMetrics;
+}> => {
+  const counts = makeCounts();
+  activeCounts = counts;
+  const host = document.createElement('div');
+  document.body.replaceChildren(host);
+  const root = createRoot(host);
+  await act(async () => {
+    root.render(
+      <>
+        {Array.from({ length: rendererCount }, (_, index) => (
+          <MarkdownRenderer
+            key={`fixture-${index}`}
+            content={fixture}
+            messageId={`fixture-message-${index}`}
+            isAnimated={false}
+            enableFileReferences={false}
+          />
+        ))}
+      </>,
+    );
+    await waitForSettledEffects();
+  });
+  await act(async () => waitForSettledEffects());
+
+  const mermaidBlocks = host.querySelectorAll('[data-markdown="mermaid-block"]').length;
+  const mermaidRenderedCount = host.querySelectorAll('[data-mermaid-render]').length;
+  const mermaidSvgCount = host.querySelectorAll('[data-markdown="mermaid"] svg').length;
+  return {
+    root,
+    host,
+    operations: counts,
+    counts: {
+      ...counts,
+      renderers: rendererCount,
+      markdownBlocks: host.querySelectorAll('[data-md-block]').length,
+      mermaidBlocks,
+      mermaidRenderedCount,
+      mermaidSvgCount,
+    },
+  };
+};
+
+const runFixture = async (rendererCount: number): Promise<FixtureMetrics> => {
+  const { root, host, operations } = await mountFixture(rendererCount);
+  await flushDeferredMermaidInitialization();
+  const counts: FixtureMetrics = {
+    ...operations,
+    renderers: rendererCount,
+    markdownBlocks: host.querySelectorAll('[data-md-block]').length,
+    mermaidBlocks: host.querySelectorAll('[data-markdown="mermaid-block"]').length,
+    mermaidRenderedCount: host.querySelectorAll('[data-mermaid-render]').length,
+    mermaidSvgCount: host.querySelectorAll('[data-markdown="mermaid"] svg').length,
+  };
+  await act(async () => root.unmount());
+  return counts;
+};
+
+const initializePerformanceDom = async (): Promise<void> => {
+  windowInstance = new Window({ url: 'http://localhost/' });
+  windowInstance.document.write('<!doctype html><html><head></head><body></body></html>');
+  windowInstance.document.close();
+  previousGlobals = new Map();
+  installGlobal('window', windowInstance);
+  installGlobal('document', windowInstance.document);
+  installGlobal('navigator', windowInstance.navigator);
+  installGlobal('customElements', windowInstance.customElements);
+  for (const name of ['Document', 'Element', 'HTMLElement', 'SVGElement', 'Node', 'Text', 'NodeFilter', 'MutationObserver', 'DOMParser', 'XMLSerializer', 'HTMLAnchorElement', 'HTMLButtonElement']) {
+    // SAFETY: these names are the DOM constructors installed by this happy-dom Window.
+    const globalValue = windowInstance[name as keyof Window];
+    if (globalValue === undefined) throw new Error(`happy-dom global is unavailable: ${name}`);
+    installGlobal(name, globalValue);
+  }
+  Object.defineProperty(windowInstance, 'matchMedia', { configurable: true, value: () => ({ matches: false, media: '', onchange: null, addListener: () => undefined, removeListener: () => undefined, addEventListener: () => undefined, removeEventListener: () => undefined, dispatchEvent: () => false }) });
+  Object.defineProperty(windowInstance, 'requestAnimationFrame', { configurable: true, value: (callback: FrameRequestCallback) => {
+    animationFrameQueue.push(callback);
+    return animationFrameQueue.length;
+  } });
+  Object.defineProperty(windowInstance, 'cancelAnimationFrame', { configurable: true, value: () => undefined });
+  installGlobal('IS_REACT_ACT_ENVIRONMENT', true);
+
+  const elementPrototype = Element.prototype;
+  const nodePrototype = Node.prototype;
+  const documentPrototype = Document.prototype;
+  const innerHTMLDescriptor = Object.getOwnPropertyDescriptor(Element.prototype, 'innerHTML');
+  if (!innerHTMLDescriptor?.set || !innerHTMLDescriptor.get) throw new Error('happy-dom innerHTML descriptor unavailable');
+  Object.defineProperty(Element.prototype, 'innerHTML', {
+    configurable: true,
+    get: innerHTMLDescriptor.get,
+    set(value: string) {
+      if (activeCounts) {
+        activeCounts.innerHTMLWrites += 1;
+        if (value.includes('href="#oc-')) activeCounts.spriteIconInnerHTMLWrites += 1;
+      }
+      innerHTMLDescriptor.set?.call(this, value);
+    },
+  });
+  const originalQuerySelectorAll = elementPrototype.querySelectorAll;
+  Object.defineProperty(elementPrototype, 'querySelectorAll', { configurable: true, value: function (selectors: string): NodeListOf<Element> {
+    if (activeCounts) activeCounts.querySelectorAllCalls += 1;
+    return originalQuerySelectorAll.call(this, selectors);
+  } });
+  const originalDocumentQuerySelectorAll = documentPrototype.querySelectorAll;
+  Object.defineProperty(documentPrototype, 'querySelectorAll', { configurable: true, value: function (selectors: string): NodeListOf<Element> {
+    if (activeCounts) activeCounts.querySelectorAllCalls += 1;
+    return originalDocumentQuerySelectorAll.call(this, selectors);
+  } });
+  const originalAppendChild = nodePrototype.appendChild;
+  Object.defineProperty(nodePrototype, 'appendChild', { configurable: true, value: function (node: Node): Node {
+    if (activeCounts) activeCounts.appendCalls += 1;
+    return originalAppendChild.call(this, node);
+  } });
+  const originalReplaceWith = elementPrototype.replaceWith;
+  Object.defineProperty(elementPrototype, 'replaceWith', { configurable: true, value: function (...nodes: (Node | string)[]): void {
+    if (activeCounts) activeCounts.replaceCalls += 1;
+    return originalReplaceWith.apply(this, nodes);
+  } });
+  const originalRemove = elementPrototype.remove;
+  Object.defineProperty(elementPrototype, 'remove', { configurable: true, value: function (): void {
+    if (activeCounts) activeCounts.removeCalls += 1;
+    return originalRemove.call(this);
+  } });
+  const originalGetBoundingClientRect = elementPrototype.getBoundingClientRect;
+  Object.defineProperty(elementPrototype, 'getBoundingClientRect', { configurable: true, value: function (): DOMRect {
+    if (activeCounts) {
+      activeCounts.getBoundingClientRectCalls += 1;
+      activeCounts.geometrySequence.push('read');
+    }
+    return originalGetBoundingClientRect.call(this);
+  } });
+  const svgSetAttribute = SVGElement.prototype.setAttribute;
+  Object.defineProperty(SVGElement.prototype, 'setAttribute', { configurable: true, value: function (name: string, value: string): void {
+    if (name === 'viewBox' && activeCounts && this.closest('[data-markdown="mermaid"]')) {
+      activeCounts.viewBoxWrites += 1;
+      activeCounts.geometrySequence.push('write');
+    }
+    return svgSetAttribute.call(this, name, value);
+  } });
+  class CountingResizeObserver {
+    constructor(callback: (entries: Array<{ target: Element; contentRect: { width: number; height: number } }>) => void) {
+      if (activeCounts) activeCounts.resizeObserverCreates += 1;
+      notifyResize = callback;
+    }
+
+    observe(): void {
+      if (activeCounts) activeCounts.resizeObserverObserveCalls += 1;
+    }
+
+    unobserve(): void {}
+
+    disconnect(): void {}
+  }
+  installGlobal('ResizeObserver', CountingResizeObserver);
+
+  const fakeState = {
+    openContextPreview: () => undefined,
+    codeBlockLineWrap: false,
+    mermaidRenderingMode: 'svg',
+  };
+  type UIStateSelection = typeof fakeState[keyof typeof fakeState];
+  const { mock } = await import('bun:test');
+  mock.module('@/lib/utils', () => ({ cn: (...values: string[]) => values.filter(Boolean).join(' ') }));
+  mock.module('@/lib/i18n', () => ({ useI18n: () => ({ t: (key: string) => key }) }));
+  mock.module('@/contexts/useThemeSystem', () => ({ useOptionalThemeSystem: () => null }));
+  mock.module('@/stores/useUIStore', () => ({ useUIStore: Object.assign((selector: (state: typeof fakeState) => UIStateSelection) => selector(fakeState), { getState: () => fakeState }) }));
+  mock.module('@/hooks/useEffectiveDirectory', () => ({ useEffectiveDirectory: () => null }));
+  mock.module('@/hooks/useRuntimeAPIs', () => ({ useRuntimeAPIs: () => ({ editor: undefined, runtime: { isVSCode: false } }) }));
+  mock.module('@/lib/runtime-fetch', () => ({ runtimeFetch: async () => ({ ok: false }) }));
+  mock.module('@/lib/url', () => ({ getUrlScheme: () => null, isAppLinkUrl: () => false, isExternalHttpUrl: () => false, openConfirmedAppLinkUrl: async () => false, openExternalUrl: async () => undefined, getExternalFaviconUrl: () => null, isLoopbackHttpUrl: () => false }));
+  mock.module('@/lib/desktop', () => ({ isDesktopLocalOriginActive: () => false, isDesktopShell: () => false, isVSCodeRuntime: () => false }));
+  mock.module('@/lib/runtimeSurface', () => ({ isMobileSurfaceRuntime: () => false }));
+  mock.module('@/lib/outsideFileGrants', () => ({ ensureOutsideFileGrantForDesktop: async () => undefined }));
+  mock.module('@/lib/path-utils', () => ({ getDirectoryForFilePath: () => '', isFilePathWithinDirectory: () => true, toAbsoluteFilePath: () => '', normalizeFilePath: (value: string) => value, isAbsoluteFilePath: (value: string) => value.startsWith('/') }));
+  mock.module('@/lib/clipboard', () => ({ copyTextToClipboard: async () => undefined }));
+  mock.module('beautiful-mermaid', () => ({
+    renderMermaidASCII: () => 'diagram',
+    renderMermaidSVG: () => '<svg viewBox="0 0 240 120" width="240" height="120"><path d="M0 0h1v1z" /></svg>',
+  }));
+  mock.module('@/stores/utils/streamDebug', () => ({ streamPerfCount: () => undefined, streamPerfObserve: () => undefined }));
+  mock.module('./markdown/markdown-worker', () => ({
+    highlightCodeInWorker: async () => null,
+    highlightLinesInWorker: async () => null,
+    highlightTokensInWorker: async () => null,
+  }));
+  mock.module('./message/FadeInOnReveal', () => ({ FadeInOnReveal: ({ children }: { children: React.ReactNode }) => children }));
+  const imported = await import('./MarkdownRendererImpl');
+  MarkdownRenderer = imported.MarkdownRenderer;
+  const { detachedMarkdownDomCache } = await import('./markdown/detachedMarkdownDomCache');
+  clearDetachedMarkdownDomCache = () => detachedMarkdownDomCache.clear();
+  detachedMarkdownDomCacheStats = () => detachedMarkdownDomCache.stats();
+};
+
+await initializePerformanceDom();
+
+afterAll(() => {
+  for (const [name, descriptor] of previousGlobals) {
+    if (descriptor) Object.defineProperty(globalThis, name, descriptor);
+    else Reflect.deleteProperty(globalThis, name);
+  }
+});
+
+describe('MarkdownRenderer DOM mount performance contract', () => {
+  test('builds Markdown sprite controls without parsing SVG markup', async () => {
+    const mounted = await mountFixture(1);
+
+    const spriteControlCount = mounted.host.querySelectorAll('[data-md-action] use[href^="#oc-"]').length;
+    const spriteIconInnerHTMLWrites = mounted.operations.spriteIconInnerHTMLWrites;
+    await act(async () => mounted.root.unmount());
+
+    expect(spriteControlCount).toBeGreaterThan(0);
+    expect(spriteIconInnerHTMLWrites).toBe(0);
+  });
+
+  test('reuses settled Markdown DOM without parsing or decorating it again', async () => {
+    clearDetachedMarkdownDomCache();
+    const content = '# Cached viewport\n\nA settled paragraph.';
+    const part: TextPart = {
+      id: 'part-cache',
+      sessionID: 'session-cache',
+      messageID: 'message-cache',
+      type: 'text',
+      text: content,
+      time: { start: 0, end: 1 },
+    };
+    const host = document.createElement('div');
+    document.body.replaceChildren(host);
+    const render = (root: Root) => root.render(
+      <MarkdownRenderer
+        content={content}
+        messageId="message-cache"
+        part={part}
+        isAnimated={false}
+        enableFileReferences={false}
+      />,
+    );
+
+    const firstCounts = makeCounts();
+    activeCounts = firstCounts;
+    const firstRoot = createRoot(host);
+    await act(async () => {
+      render(firstRoot);
+      await waitForSettledEffects();
+    });
+    const originalBlock = host.querySelector('[data-md-block]');
+    expect(originalBlock).not.toBeNull();
+    expect(firstCounts.innerHTMLWrites).toBeGreaterThan(0);
+    await act(async () => firstRoot.unmount());
+
+    const secondCounts = makeCounts();
+    activeCounts = secondCounts;
+    const secondRoot = createRoot(host);
+    await act(async () => {
+      render(secondRoot);
+      await waitForSettledEffects();
+    });
+    expect(host.querySelector('[data-md-block]')).toBe(originalBlock);
+    expect(secondCounts.innerHTMLWrites).toBe(0);
+    await act(async () => secondRoot.unmount());
+    clearDetachedMarkdownDomCache();
+  });
+
+  test('does not cache streaming, unfinished, or Mermaid DOM', async () => {
+    clearDetachedMarkdownDomCache();
+    const host = document.createElement('div');
+    document.body.replaceChildren(host);
+    const renderScoped = (
+      root: Root,
+      content: string,
+      partId: string,
+      isStreaming = false,
+    ) => root.render(
+      <MarkdownRenderer
+        content={content}
+        messageId="message-cache"
+        part={{
+          id: partId,
+          sessionID: 'session-cache',
+          messageID: 'message-cache',
+          type: 'text',
+          text: content,
+          time: { start: 0, end: 1 },
+        }}
+        isAnimated={false}
+        isStreaming={isStreaming}
+        enableFileReferences={false}
+      />,
+    );
+
+    const streamingRoot = createRoot(host);
+    await act(async () => {
+      renderScoped(streamingRoot, 'streaming content', 'part-streaming', true);
+      await waitForSettledEffects();
+    });
+    await act(async () => streamingRoot.unmount());
+    expect(detachedMarkdownDomCacheStats().entries).toBe(0);
+
+    const unfinalizedRoot = createRoot(host);
+    await act(async () => {
+      unfinalizedRoot.render(
+        <MarkdownRenderer
+          content="unfinalized content"
+          messageId="message-unfinalized"
+          part={{
+            id: 'part-unfinalized',
+            sessionID: 'session-cache',
+            messageID: 'message-unfinalized',
+            type: 'text',
+            text: 'unfinalized content',
+          }}
+          isAnimated={false}
+          enableFileReferences={false}
+        />,
+      );
+      await waitForSettledEffects();
+    });
+    await act(async () => unfinalizedRoot.unmount());
+    expect(detachedMarkdownDomCacheStats().entries).toBe(0);
+
+    const mermaidRoot = createRoot(host);
+    await act(async () => {
+      renderScoped(mermaidRoot, '```mermaid\ngraph TD\nA --> B\n```', 'part-mermaid');
+      await waitForSettledEffects();
+    });
+    await act(async () => mermaidRoot.unmount());
+    expect(detachedMarkdownDomCacheStats().entries).toBe(0);
+
+    clearDetachedMarkdownDomCache();
+  });
+
+  test('does not detach Markdown DOM that intersects the active selection', async () => {
+    clearDetachedMarkdownDomCache();
+    const content = 'selected content';
+    const host = document.createElement('div');
+    document.body.replaceChildren(host);
+    const root = createRoot(host);
+    await act(async () => {
+      root.render(
+        <MarkdownRenderer
+          content={content}
+          messageId="message-selected"
+          part={{
+            id: 'part-selected',
+            sessionID: 'session-selected',
+            messageID: 'message-selected',
+            type: 'text',
+            text: content,
+            time: { start: 0, end: 1 },
+          }}
+          isAnimated={false}
+          enableFileReferences={false}
+        />,
+      );
+      await waitForSettledEffects();
+    });
+    const markdown = host.querySelector<HTMLElement>('[data-markdown-content]');
+    if (!markdown) throw new Error('Expected mounted Markdown content');
+    const originalGetSelection = window.getSelection;
+    Object.defineProperty(window, 'getSelection', {
+      configurable: true,
+      value: () => ({
+        rangeCount: 1,
+        isCollapsed: false,
+        getRangeAt: () => ({ intersectsNode: (node: Node) => node === markdown }),
+      }),
+    });
+
+    try {
+      await act(async () => root.unmount());
+      expect(detachedMarkdownDomCacheStats().entries).toBe(0);
+    } finally {
+      Object.defineProperty(window, 'getSelection', { configurable: true, value: originalGetSelection });
+      clearDetachedMarkdownDomCache();
+    }
+  });
+
+  test('defers and batches Mermaid controller initialization after Markdown mount', async () => {
+    const mounted = await mountFixture(fixtureWorkload.rendererCount);
+    const critical = mounted.counts;
+
+    expect(critical.getBoundingClientRectCalls).toBe(0);
+    expect(critical.viewBoxWrites).toBe(0);
+    expect(critical.resizeObserverCreates).toBe(0);
+    expect(mounted.host.querySelectorAll('[data-markdown="mermaid"] svg')).toHaveLength(6);
+
+    await flushDeferredMermaidInitialization();
+    const metrics = {
+      ...mounted.operations,
+      renderers: fixtureWorkload.rendererCount,
+      markdownBlocks: mounted.host.querySelectorAll('[data-md-block]').length,
+      mermaidBlocks: mounted.host.querySelectorAll('[data-markdown="mermaid-block"]').length,
+      mermaidRenderedCount: mounted.host.querySelectorAll('[data-mermaid-render]').length,
+      mermaidSvgCount: mounted.host.querySelectorAll('[data-markdown="mermaid"] svg').length,
+    };
+
+    expect(metrics.renderers).toBe(3);
+    expect(metrics.markdownBlocks).toBe(fixtureWorkload.rendererCount * fixtureWorkload.domBlocksPerRenderer);
+    expect(metrics.mermaidBlocks).toBe(fixtureWorkload.rendererCount * fixtureWorkload.mermaidBlocksPerRenderer);
+    expect(metrics.mermaidRenderedCount).toBeGreaterThan(0);
+    expect(metrics.innerHTMLWrites).toBeGreaterThan(0);
+    expect(metrics.querySelectorAllCalls).toBeGreaterThan(0);
+    expect(metrics.appendCalls).toBeGreaterThan(0);
+    expect(metrics.getBoundingClientRectCalls).toBe(metrics.mermaidRenderedCount);
+    expect(metrics.viewBoxWrites).toBe(metrics.mermaidRenderedCount);
+    expect(metrics.resizeObserverCreates).toBe(1);
+    expect(metrics.resizeObserverObserveCalls).toBe(metrics.mermaidRenderedCount);
+    expect(metrics.geometrySequence.lastIndexOf('read')).toBeLessThan(metrics.geometrySequence.indexOf('write'));
+
+    const viewport = mounted.host.querySelector<HTMLElement>('[data-markdown="mermaid-viewport"]');
+    if (!viewport || !notifyResize) throw new Error('Expected initialized Mermaid viewport and shared observer');
+    const readsBeforeResize = mounted.operations.getBoundingClientRectCalls;
+    const writesBeforeResize = mounted.operations.viewBoxWrites;
+    notifyResize([{ target: viewport, contentRect: { width: 320, height: 180 } }]);
+    expect(mounted.operations.getBoundingClientRectCalls).toBe(readsBeforeResize);
+    expect(mounted.operations.viewBoxWrites).toBe(writesBeforeResize + 1);
+    console.log(JSON.stringify({ fixture: fixtureWorkload, baseline: metrics }));
+    await act(async () => mounted.root.unmount());
+  });
+
+  test('cancels deferred Mermaid initialization when the renderer unmounts first', async () => {
+    const mounted = await mountFixture(1);
+    await act(async () => mounted.root.unmount());
+    await flushDeferredMermaidInitialization();
+
+    expect(mounted.operations.getBoundingClientRectCalls).toBe(0);
+    expect(mounted.operations.viewBoxWrites).toBe(0);
+    expect(mounted.operations.resizeObserverCreates).toBe(0);
+  });
+
+  test('keeps DOM operation fanout linear when renderer count doubles', async () => {
+    const three = await runFixture(3);
+    const six = await runFixture(6);
+
+    expect(six.mermaidBlocks).toBe(three.mermaidBlocks * 2);
+    expect(six.mermaidRenderedCount).toBe(three.mermaidRenderedCount * 2);
+    expect(six.innerHTMLWrites).toBeLessThanOrEqual(three.innerHTMLWrites * 2 + 6);
+    expect(six.querySelectorAllCalls).toBeLessThanOrEqual(three.querySelectorAllCalls * 2 + 12);
+    expect(six.appendCalls).toBeLessThanOrEqual(three.appendCalls * 2 + 12);
+    expect(six.getBoundingClientRectCalls).toBe(three.getBoundingClientRectCalls * 2);
+    expect(six.viewBoxWrites).toBe(three.viewBoxWrites * 2);
+    expect(three.resizeObserverCreates).toBe(1);
+    expect(six.resizeObserverCreates).toBe(1);
+    expect(six.resizeObserverObserveCalls).toBe(three.resizeObserverObserveCalls * 2);
+  });
+});
diff --git a/packages/ui/src/components/chat/MarkdownRendererImpl.test.ts b/packages/ui/src/components/chat/MarkdownRendererImpl.test.ts
index 8d48fd8a..d4ce252f 100644
--- a/packages/ui/src/components/chat/MarkdownRendererImpl.test.ts
+++ b/packages/ui/src/components/chat/MarkdownRendererImpl.test.ts
@@ -1,9 +1,377 @@
-import { describe, expect, test } from 'bun:test';
+import { describe, expect, mock, test } from 'bun:test';
 
 import { localPathFromFileUrl, parseFileReference, type ParsedFileReference } from './fileReferenceParser';
 
 const parse = (value: string): ParsedFileReference | null => parseFileReference(value);
 
+type FakeElement = {
+    childNodes: FakeElement[];
+    children: FakeElement[];
+    parentNode: FakeElement | null;
+    attributes: Map<string, string>;
+    style: { display: string; setProperty: () => void };
+    innerHTML: string;
+    setAttribute: (name: string, value: string) => void;
+    getAttribute: (name: string) => string | null;
+    appendChild: (child: FakeElement) => FakeElement;
+    replaceWith: (replacement: FakeElement) => void;
+    remove: () => void;
+    querySelector: (selector: string) => FakeElement | null;
+    querySelectorAll: <T>(selector: string) => T[];
+    addEventListener: () => void;
+    removeEventListener: () => void;
+    contains: (child: FakeElement) => boolean;
+    isEqualNode: () => boolean;
+};
+
+type FakeDocument = { createElement: () => FakeElement };
+type FakeJsxProps = {
+    ref?: { current: FakeElement | null };
+    children?: FakeElement | FakeElement[];
+    className?: string;
+    'data-markdown-content'?: boolean;
+};
+
+let syncRenderCalls = 0;
+let morphCalls = 0;
+let decorateCalls = 0;
+let mermaidRegistryCreates = 0;
+let mermaidRegistryCleanups = 0;
+let cachedRendererBlocks: Array<{ id: string; html: string }> | null = null;
+let renderedRendererBlocks: Array<{ id: string; html: string }> = [];
+let renderMarkdownBlocksForTest = async () => renderedRendererBlocks;
+let currentContextVersion = 0;
+const layoutEffects: Array<() => void> = [];
+const passiveEffects: Array<() => void | (() => void)> = [];
+let hookCursor = 0;
+let hookStates: Array<{ current: null } | undefined> = [];
+let activeFakeDocument: FakeDocument | null = null;
+
+const makeFakeElement = (ownerDocument: { createElement: () => FakeElement }): FakeElement => {
+    void ownerDocument;
+    let html = '';
+    const element: FakeElement = {
+        childNodes: [],
+        children: [],
+        parentNode: null,
+        attributes: new Map(),
+        style: { display: '', setProperty: () => undefined },
+        get innerHTML() {
+            return html;
+        },
+        set innerHTML(value: string) {
+            html = value;
+        },
+        setAttribute(name, value) {
+            this.attributes.set(name, value);
+        },
+        getAttribute(name) {
+            return this.attributes.get(name) ?? null;
+        },
+        appendChild(child) {
+            child.parentNode = this;
+            this.childNodes.push(child);
+            this.children.push(child);
+            return child;
+        },
+        replaceWith(replacement) {
+            if (!this.parentNode) return;
+            const parent = this.parentNode;
+            const index = parent.children.indexOf(this);
+            if (index < 0) return;
+            replacement.parentNode = parent;
+            parent.children[index] = replacement;
+            parent.childNodes[index] = replacement;
+            this.parentNode = null;
+        },
+        remove() {
+            if (!this.parentNode) return;
+            const parent = this.parentNode;
+            parent.children = parent.children.filter((child) => child !== this);
+            parent.childNodes = parent.childNodes.filter((child) => child !== this);
+            this.parentNode = null;
+        },
+        querySelector(selector) {
+            if (selector === '[data-markdown-content]') {
+                return this.children.find((child) => child.getAttribute('data-markdown-content') === '') ?? null;
+            }
+            if (selector === '[data-markdown="mermaid-block"]' && html.includes('data-markdown="mermaid-block"')) {
+                return this;
+            }
+            for (const child of this.children) {
+                const match = child.querySelector(selector);
+                if (match) return match;
+            }
+            return null;
+        },
+        querySelectorAll: () => [],
+        addEventListener: () => undefined,
+        removeEventListener: () => undefined,
+        contains(child) {
+            return child === this || this.children.some((candidate) => candidate.contains(child));
+        },
+        isEqualNode: () => false,
+    };
+    return element;
+};
+
+const installRendererDom = () => {
+    const previousDocument = Object.getOwnPropertyDescriptor(globalThis, 'document');
+    const previousWindow = Object.getOwnPropertyDescriptor(globalThis, 'window');
+    const previousMutationObserver = Object.getOwnPropertyDescriptor(globalThis, 'MutationObserver');
+    const documentStub: FakeDocument = { createElement: () => makeFakeElement(documentStub) };
+    activeFakeDocument = documentStub;
+    Object.defineProperty(globalThis, 'document', { configurable: true, value: documentStub });
+    Object.defineProperty(globalThis, 'window', {
+        configurable: true,
+        value: {
+            matchMedia: () => ({ matches: false }),
+            setTimeout,
+            clearTimeout,
+            requestAnimationFrame: (callback: FrameRequestCallback) => setTimeout(() => callback(Date.now()), 0),
+        },
+    });
+    Object.defineProperty(globalThis, 'MutationObserver', {
+        configurable: true,
+        value: class {
+            observe() {}
+            disconnect() {}
+        },
+    });
+    return () => {
+        if (previousDocument) Object.defineProperty(globalThis, 'document', previousDocument);
+        else Reflect.deleteProperty(globalThis, 'document');
+        if (previousWindow) Object.defineProperty(globalThis, 'window', previousWindow);
+        else Reflect.deleteProperty(globalThis, 'window');
+        if (previousMutationObserver) Object.defineProperty(globalThis, 'MutationObserver', previousMutationObserver);
+        else Reflect.deleteProperty(globalThis, 'MutationObserver');
+        activeFakeDocument = null;
+    };
+};
+
+const rendererThemes = [{
+    metadata: { id: 'renderer-test' },
+    colors: {
+        surface: { elevated: '#fff', foreground: '#000', mutedForeground: '#666', muted: '#eee' },
+        interactive: { border: '#ccc' },
+        primary: { base: '#00f' },
+    },
+}, {
+    metadata: { id: 'renderer-test-next' },
+    colors: {
+        surface: { elevated: '#eee', foreground: '#111', mutedForeground: '#555', muted: '#ddd' },
+        interactive: { border: '#bbb' },
+        primary: { base: '#f00' },
+    },
+}];
+let rendererThemeIndex = 0;
+const rendererTheme = () => rendererThemes[rendererThemeIndex] ?? rendererThemes[0];
+const rendererUiState = {
+    codeBlockLineWrap: false,
+    mermaidRenderingMode: 'svg',
+    setCodeBlockLineWrap: () => undefined,
+    openContextPreview: () => undefined,
+};
+
+const fakeReact = {
+    useCallback: <T>(callback: T): T => {
+        hookCursor += 1;
+        return callback;
+    },
+    useEffect: (effect: () => void | (() => void)) => { passiveEffects.push(effect); },
+    useLayoutEffect: (effect: () => void) => { layoutEffects.push(effect); },
+    useMemo: <T>(factory: () => T): T => {
+        hookCursor += 1;
+        return factory();
+    },
+    useRef: <T>(current: T) => {
+        void current;
+        const index = hookCursor;
+        hookCursor += 1;
+        if (!hookStates[index]) hookStates[index] = { current: null };
+        // SAFETY: this test hook preserves one mutable ref slot per hook index.
+        return hookStates[index] as { current: T };
+    },
+    memo: <T>(component: T): T => component,
+};
+
+const fakeJsx = (_type: string, props: FakeJsxProps | null, ...children: FakeElement[]): FakeElement => {
+    const ref = props?.ref;
+    // SAFETY: the renderer test installs the typed fake document before JSX is
+    // evaluated; this branch only supplies its fake element factory.
+    const fakeDocument = activeFakeDocument;
+    if (!fakeDocument) throw new Error('Renderer fake document is not installed');
+    const element = ref?.current ?? makeFakeElement(fakeDocument);
+    if (!ref?.current) {
+        element.childNodes.length = 0;
+        element.children.length = 0;
+    }
+    if (props) {
+        if (ref) ref.current = element;
+        if (props.className) element.setAttribute('class', props.className);
+        if (props['data-markdown-content']) element.setAttribute('data-markdown-content', '');
+    }
+    const jsxChildren = props?.children;
+    const allChildren = jsxChildren === undefined ? children : Array.isArray(jsxChildren) ? jsxChildren : [jsxChildren];
+    for (const child of allChildren) {
+        if (child) element.appendChild(child);
+    }
+    return element;
+};
+
+mock.module('react', () => ({ default: fakeReact }));
+mock.module('react/jsx-runtime', () => ({ jsx: fakeJsx, jsxs: fakeJsx, Fragment: 'fragment' }));
+mock.module('react/jsx-dev-runtime', () => ({ jsxDEV: fakeJsx, Fragment: 'fragment' }));
+mock.module('beautiful-mermaid', () => ({
+    renderMermaidASCII: () => '',
+    renderMermaidSVG: (_source: string, colors: { bg: string }) => colors.bg,
+}));
+mock.module('@/lib/utils', () => ({ cn: (...values: string[]) => values.filter(Boolean).join(' ') }));
+mock.module('@/lib/i18n', () => ({ useI18n: () => ({ t: (key: string) => `${key}:${currentContextVersion}` }) }));
+mock.module('@/lib/runtime-fetch', () => ({ runtimeFetch: async () => ({ ok: false }) }));
+mock.module('@/lib/url', () => ({
+    getUrlScheme: () => null,
+    isAppLinkUrl: () => false,
+    isExternalHttpUrl: () => false,
+    openConfirmedAppLinkUrl: async () => false,
+    openExternalUrl: async () => undefined,
+}));
+mock.module('@/contexts/useThemeSystem', () => ({ useOptionalThemeSystem: () => ({ currentTheme: rendererTheme() }) }));
+mock.module('@/lib/theme/themes', () => ({ getDefaultTheme: () => rendererTheme() }));
+mock.module('./message/FadeInOnReveal', () => ({ FadeInOnReveal: ({ children }: { children: FakeElement | FakeElement[] }) => children }));
+type RendererUiSelectorResult = boolean | string | (() => void);
+const fakeUseUIStore = Object.assign(
+    (selector: (state: typeof rendererUiState) => RendererUiSelectorResult) => selector(rendererUiState),
+    { getState: () => rendererUiState },
+);
+mock.module('@/stores/useUIStore', () => ({ useUIStore: fakeUseUIStore }));
+mock.module('@/hooks/useEffectiveDirectory', () => ({ useEffectiveDirectory: () => null }));
+mock.module('@/hooks/useRuntimeAPIs', () => ({ useRuntimeAPIs: () => ({ editor: undefined, runtime: { isVSCode: false } }) }));
+mock.module('@/lib/desktop', () => ({ isDesktopLocalOriginActive: () => false, isDesktopShell: () => false, isVSCodeRuntime: () => false }));
+mock.module('@/lib/runtimeSurface', () => ({ isMobileSurfaceRuntime: () => false }));
+mock.module('@/lib/outsideFileGrants', () => ({ ensureOutsideFileGrantForDesktop: async () => undefined }));
+mock.module('@/lib/path-utils', () => ({ getDirectoryForFilePath: () => '', isFilePathWithinDirectory: () => true, toAbsoluteFilePath: () => '' }));
+mock.module('./markdown/markdownCore', () => ({
+    getCachedMarkdownBlocks: () => cachedRendererBlocks,
+    renderMarkdownBlocks: () => renderMarkdownBlocksForTest(),
+    renderMarkdownSync: () => {
+        syncRenderCalls += 1;
+        return '<p>cold</p>';
+    },
+}));
+mock.module('./markdown/markdownTheme', () => ({ ensureMarkdownShikiTheme: () => undefined }));
+mock.module('./markdown/markdownSyntaxVars', () => ({ getMarkdownSyntaxVars: () => ({}) }));
+mock.module('./markdown/detachedMarkdownDomCache', () => ({
+    detachedMarkdownDomCache: {
+        take: () => null,
+        store: () => undefined,
+    },
+}));
+mock.module('@/lib/runtime-switch', () => ({ getRuntimeKey: () => 'runtime' }));
+type TestDecorateContext = {
+    labels: { copy: string };
+    codeBlockLineWrap: boolean;
+    renderMermaid: (source: string) => { svg?: string };
+};
+mock.module('./markdown/decorate', () => ({
+    attachMarkdownInteractions: () => () => undefined,
+    applyMarkdownCodeBlockWrapState: () => undefined,
+    decorateMarkdown: (root: FakeElement, ctx: TestDecorateContext) => {
+        decorateCalls += 1;
+        if (root.getAttribute('data-test-decoration-marker') === 'true') return;
+        root.setAttribute('data-test-decoration-marker', 'true');
+        root.setAttribute(
+            'data-test-decoration',
+            `${ctx.labels.copy}|${ctx.codeBlockLineWrap}|${ctx.renderMermaid('test').svg ?? ''}`,
+        );
+    },
+    getMarkdownCodeText: () => '',
+}));
+mock.module('./markdown/textPosition', () => ({ findTextPosition: () => null }));
+mock.module('./markdown/mermaidViewer', () => ({
+    createMermaidViewerRegistry: () => {
+        mermaidRegistryCreates += 1;
+        return {
+            refresh: () => undefined,
+            cleanup: () => { mermaidRegistryCleanups += 1; },
+        };
+    },
+    MERMAID_BLOCK_SELECTOR: '[data-markdown="mermaid-block"]',
+    shouldRefreshMermaidViewers: (container: Pick<FakeElement, 'querySelector'>) => container.querySelector('[data-markdown="mermaid-block"]') !== null,
+}));
+mock.module('@/stores/utils/streamDebug', () => ({ streamPerfCount: () => undefined, streamPerfObserve: () => undefined }));
+mock.module('morphdom', () => ({ default: () => { morphCalls += 1; } }));
+
+const { MarkdownRenderer } = await import('./MarkdownRendererImpl');
+
+const resetRendererTestState = () => {
+    cachedRendererBlocks = null;
+    renderedRendererBlocks = [];
+    renderMarkdownBlocksForTest = async () => renderedRendererBlocks;
+    syncRenderCalls = 0;
+    morphCalls = 0;
+    decorateCalls = 0;
+    mermaidRegistryCreates = 0;
+    mermaidRegistryCleanups = 0;
+    hookCursor = 0;
+    hookStates = [];
+    layoutEffects.length = 0;
+    passiveEffects.length = 0;
+    currentContextVersion = 0;
+    rendererThemeIndex = 0;
+    rendererUiState.codeBlockLineWrap = false;
+};
+
+const beginRendererRender = () => {
+    hookCursor = 0;
+    return renderMarkdownForTest();
+};
+
+const rendererRoot = (value: ReturnType<typeof renderMarkdownForTest>): FakeElement => {
+    if (!(value instanceof Object) || !('childNodes' in value) || !('getAttribute' in value)) {
+        throw new Error('Renderer test did not return its fake JSX root');
+    }
+    // SAFETY: the structural check confirms this ReactNode is the object
+    // returned by the mocked JSX runtime.
+    const candidate = value as object;
+    // SAFETY: the mocked JSX runtime creates the complete FakeElement shape.
+    return candidate as FakeElement;
+};
+
+const runRendererLayoutEffects = () => {
+    const pending = layoutEffects.splice(0);
+    for (const effect of pending) effect();
+};
+
+const runRendererPassiveEffects = () => passiveEffects.splice(0).map((effect) => effect());
+
+const findBlock = (root: FakeElement, id: string): FakeElement | null => {
+    if (root.getAttribute('data-md-id') === id) return root;
+    for (const child of root.children) {
+        const match = findBlock(child, id);
+        if (match) return match;
+    }
+    return null;
+};
+
+const renderMarkdownForTest = () => MarkdownRenderer({
+    content: 'cached markdown',
+    messageId: 'message-1',
+    isAnimated: false,
+    isStreaming: false,
+});
+
+const withRendererDom = async (run: () => void | Promise<void>): Promise<void> => {
+    const restoreDom = installRendererDom();
+    const previousThemeIndex = rendererThemeIndex;
+    try {
+        await run();
+    } finally {
+        rendererThemeIndex = previousThemeIndex;
+        restoreDom();
+    }
+};
+
 describe('parseFileReference', () => {
     test('returns null for empty or whitespace input', () => {
         expect(parse('')).toBeNull();
@@ -72,11 +440,7 @@ describe('parseFileReference', () => {
     });
 
     test('preserves line:col form (does not interpret as range)', () => {
-        expect(parse('src/foo.ts:42:8')).toEqual({
-            path: 'src/foo.ts',
-            line: 42,
-            column: 8,
-        });
+        expect(parse('src/foo.ts:42:8')).toEqual({ path: 'src/foo.ts', line: 42, column: 8 });
     });
 
     test('preserves hash form', () => {
@@ -110,3 +474,120 @@ describe('localPathFromFileUrl', () => {
         expect(localPathFromFileUrl('file:///tmp/bad%ZZpath')).toBeNull();
     });
 });
+
+describe('MarkdownRenderer warm settled path', () => {
+    test('installs cached blocks without sync fallback and skips same-ID morph', async () => {
+        await withRendererDom(async () => {
+            resetRendererTestState();
+            cachedRendererBlocks = [{ id: 'full:cached', html: '<p>cached</p>' }];
+            renderedRendererBlocks = cachedRendererBlocks;
+            syncRenderCalls = 0;
+            morphCalls = 0;
+            decorateCalls = 0;
+
+            // SAFETY: the test JSX adapter returns the fake element assigned to the
+            // renderer container ref and exposes the DOM members used below.
+            const root = rendererRoot(beginRendererRender());
+            runRendererLayoutEffects();
+            expect(syncRenderCalls).toBe(0);
+            const block = findBlock(root, 'full:cached');
+            expect(block).not.toBeNull();
+            expect(block?.innerHTML).toBe('<p>cached</p>');
+            expect(block?.getAttribute('data-md-block')).toBe('');
+            expect(block?.getAttribute('data-md-id')).toBe('full:cached');
+            expect(block?.style.display).toBe('contents');
+            expect(decorateCalls).toBe(1);
+
+            runRendererPassiveEffects();
+            await Promise.resolve();
+            expect(morphCalls).toBe(0);
+        });
+    });
+
+    test('recreates the Mermaid registry after StrictMode-like cleanup without remounting blocks', () => {
+        return withRendererDom(() => {
+            resetRendererTestState();
+            const mermaidHtml = '<div data-markdown="mermaid-block"><svg></svg></div>';
+            cachedRendererBlocks = [{ id: 'full:mermaid', html: mermaidHtml }];
+            renderedRendererBlocks = cachedRendererBlocks;
+            mermaidRegistryCreates = 0;
+            mermaidRegistryCleanups = 0;
+            morphCalls = 0;
+
+            const root = rendererRoot(beginRendererRender());
+            runRendererLayoutEffects();
+            expect(mermaidRegistryCreates).toBe(1);
+            const cleanups = runRendererPassiveEffects();
+            for (const cleanup of cleanups) cleanup?.();
+            expect(mermaidRegistryCleanups).toBe(1);
+
+            beginRendererRender();
+            runRendererLayoutEffects();
+            expect(mermaidRegistryCreates).toBe(2);
+            expect(findBlock(root, 'full:mermaid')).not.toBeNull();
+            expect(morphCalls).toBe(0);
+        });
+    });
+
+    test('redecorates a same-ID block when decoration context changes before async completion', async () => {
+        await withRendererDom(async () => {
+            resetRendererTestState();
+            cachedRendererBlocks = [{
+                id: 'full:context',
+                html: '<div data-markdown="mermaid-block"><p>cached</p></div>',
+            }];
+            renderedRendererBlocks = cachedRendererBlocks;
+
+            const root = rendererRoot(beginRendererRender());
+            runRendererLayoutEffects();
+            const block = findBlock(root, 'full:context');
+            const firstDecorationId = block?.getAttribute('data-md-decoration-id');
+            expect(firstDecorationId).not.toBeNull();
+            const firstDecorateCalls = decorateCalls;
+
+            rendererThemeIndex = 1;
+            currentContextVersion = 1;
+            rendererUiState.codeBlockLineWrap = true;
+            beginRendererRender();
+            runRendererLayoutEffects();
+            runRendererPassiveEffects();
+            await Promise.resolve();
+
+            expect(decorateCalls).toBeGreaterThan(firstDecorateCalls);
+            expect(syncRenderCalls).toBe(0);
+            expect(morphCalls).toBe(0);
+            const updatedBlock = findBlock(root, 'full:context');
+            expect(updatedBlock?.getAttribute('data-md-decoration-id')).not.toBe(firstDecorationId);
+            expect(updatedBlock?.getAttribute('data-test-decoration')).toContain(':1|true|#eee');
+            expect(updatedBlock?.getAttribute('data-test-decoration-marker')).toBe('true');
+            expect(mermaidRegistryCleanups).toBeGreaterThan(0);
+            expect(mermaidRegistryCreates).toBeGreaterThan(1);
+        });
+    });
+
+    test('rejects an older async render after a newer layout commit', async () => {
+        await withRendererDom(async () => {
+            resetRendererTestState();
+            cachedRendererBlocks = [{ id: 'full:initial', html: '<p>initial</p>' }];
+            let resolveOldRender: ((blocks: Array<{ id: string; html: string }>) => void) | undefined;
+            const oldRender = new Promise<Array<{ id: string; html: string }>>((resolve) => {
+                resolveOldRender = resolve;
+            });
+            renderMarkdownBlocksForTest = () => oldRender;
+
+            beginRendererRender();
+            runRendererLayoutEffects();
+            runRendererPassiveEffects();
+
+            cachedRendererBlocks = [{ id: 'full:new', html: '<p>new</p>' }];
+            beginRendererRender();
+            runRendererLayoutEffects();
+            expect(resolveOldRender).toBeDefined();
+            resolveOldRender?.([{ id: 'full:old-late', html: '<p>old late</p>' }]);
+            await Promise.resolve();
+
+            expect(morphCalls).toBe(0);
+        });
+    });
+
+});
diff --git a/packages/ui/src/components/chat/MarkdownRendererImpl.tsx b/packages/ui/src/components/chat/MarkdownRendererImpl.tsx
index b8af3e03..c02b249b 100644
--- a/packages/ui/src/components/chat/MarkdownRendererImpl.tsx
+++ b/packages/ui/src/components/chat/MarkdownRendererImpl.tsx
@@ -20,7 +20,12 @@ import { isDesktopLocalOriginActive, isDesktopShell, isVSCodeRuntime } from '@/l
 import { isMobileSurfaceRuntime } from '@/lib/runtimeSurface';
 import { ensureOutsideFileGrantForDesktop } from '@/lib/outsideFileGrants';
 import { getDirectoryForFilePath, isFilePathWithinDirectory, toAbsoluteFilePath } from '@/lib/path-utils';
-import { renderMarkdownBlocks, renderMarkdownSync, type MarkdownImageMode } from './markdown/markdownCore';
+import {
+  getCachedMarkdownBlocks,
+  renderMarkdownBlocks,
+  renderMarkdownSync,
+  type MarkdownImageMode,
+} from './markdown/markdownCore';
 import { ensureMarkdownShikiTheme } from './markdown/markdownTheme';
 import { getMarkdownSyntaxVars } from './markdown/markdownSyntaxVars';
 import {
@@ -45,6 +50,8 @@ import {
 } from './fileReferenceParser';
 import { fileReferenceExists } from './fileReferenceStat';
 import { streamPerfCount, streamPerfObserve } from '@/stores/utils/streamDebug';
+import { detachedMarkdownDomCache, type DetachedMarkdownDomKey } from './markdown/detachedMarkdownDomCache';
+import { getRuntimeKey } from '@/lib/runtime-switch';
 
 const useCurrentMermaidTheme = () => {
   const themeSystem = useOptionalThemeSystem();
@@ -345,6 +352,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 +412,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 +553,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, {
@@ -659,6 +691,19 @@ const useMermaidInlineInteractions = ({
 // so a stable diagram is laid out once and served from cache thereafter.
 const MERMAID_RENDER_CACHE = new Map<string, MermaidRender>();
 const MERMAID_RENDER_CACHE_MAX = 100;
+const MARKDOWN_DECORATION_ID_ATTR = 'data-md-decoration-id';
+const MARKDOWN_DECORATION_IDS = new WeakMap<DecorateContext, string>();
+let nextMarkdownDecorationId = 0;
+const MARKDOWN_DOM_CACHE_MAX_SOURCE_CHARS = 200_000;
+
+const getMarkdownDecorationId = (ctx: DecorateContext): string => {
+  const existing = MARKDOWN_DECORATION_IDS.get(ctx);
+  if (existing) return existing;
+  const id = `decoration-${nextMarkdownDecorationId}`;
+  nextMarkdownDecorationId += 1;
+  MARKDOWN_DECORATION_IDS.set(ctx, id);
+  return id;
+};
 
 const cachedMermaidRender = (key: string, compute: () => MermaidRender): MermaidRender => {
   const existing = MERMAID_RENDER_CACHE.get(key);
@@ -743,6 +788,7 @@ const useMorphdomMarkdown = ({
   imageMode = 'inline',
   syntaxVars,
   ctx,
+  domCacheKey,
 }: {
   containerRef: React.RefObject<HTMLDivElement | null>;
   text: string;
@@ -750,12 +796,20 @@ const useMorphdomMarkdown = ({
   imageMode?: MarkdownImageMode;
   syntaxVars: Record<string, string>;
   ctx: DecorateContext;
+  domCacheKey?: DetachedMarkdownDomKey | null;
 }) => {
   React.useEffect(() => {
     ensureMarkdownShikiTheme();
   }, []);
 
   const mermaidViewerRef = React.useRef<ReturnType<typeof createMermaidViewerRegistry> | null>(null);
+  const renderRevisionRef = React.useRef(0);
+  // Only DOM that was actually restored or completed by the async pipeline is
+  // eligible for capture. A fallback from an earlier content revision is not.
+  const mountedDomRef = React.useRef<{
+    key: DetachedMarkdownDomKey;
+    copiedLabel: string;
+  } | null>(null);
   const refreshMermaidViewers = React.useCallback(() => {
     const container = containerRef.current;
     if (!container) {
@@ -771,6 +825,63 @@ const useMorphdomMarkdown = ({
     mermaidViewerRef.current.refresh();
   }, [containerRef]);
 
+  React.useLayoutEffect(() => {
+    renderRevisionRef.current += 1;
+    mountedDomRef.current = null;
+  }, [ctx, imageMode, streaming, text]);
+
+  React.useLayoutEffect(() => {
+    if (!domCacheKey) return;
+    const container = containerRef.current;
+    const target = container?.querySelector<HTMLElement>('[data-markdown-content]') ?? container;
+    if (!target || target.childNodes.length > 0) return;
+
+    const cached = detachedMarkdownDomCache.take(domCacheKey);
+    if (cached) {
+      target.appendChild(cached);
+      const decorationId = getMarkdownDecorationId(ctx);
+      for (const block of Array.from(target.children)) {
+        block.setAttribute(MARKDOWN_DECORATION_ID_ATTR, decorationId);
+      }
+      for (const [key, value] of Object.entries(syntaxVars)) target.style.setProperty(key, value);
+      applyMarkdownCodeBlockWrapState(target, ctx.codeBlockLineWrap, ctx.labels);
+      mountedDomRef.current = {
+        key: domCacheKey,
+        copiedLabel: ctx.labels.copied,
+      };
+      streamPerfCount('ui.markdown_renderer.dom_cache.hit');
+    }
+  }, [containerRef, ctx, domCacheKey, syntaxVars, text.length]);
+
+  // Restoration follows the cache identity above, but capture must only happen
+  // when this renderer lifecycle ends. Combining both in one keyed effect would
+  // detach the live DOM on ordinary content, theme, or locale updates.
+  React.useLayoutEffect(() => {
+    const container = containerRef.current;
+    const target = container?.querySelector<HTMLElement>('[data-markdown-content]') ?? container;
+    if (!target) return;
+    return () => {
+      const mountedDom = mountedDomRef.current;
+      if (!mountedDom) return;
+      // Viewer controllers and transient interaction state belong to the
+      // current renderer instance and must not cross the cache boundary.
+      if (target.childNodes.length === 0 || shouldRefreshMermaidViewers(target)) return;
+      if (Array.from(target.children).some((block) => !block.hasAttribute('data-md-id'))) return;
+      if (target.querySelector('[data-md-copy-pending]')) return;
+      const selection = window.getSelection();
+      if (selection?.rangeCount && !selection.isCollapsed && selection.getRangeAt(0).intersectsNode(target)) return;
+      const openMenu = target.querySelector<HTMLElement>('[data-md-menu]:not(.hidden)');
+      const copiedButton = Array.from(target.querySelectorAll<HTMLButtonElement>('[data-md-action]'))
+        .some((button) => button.getAttribute('title') === mountedDom.copiedLabel);
+      if (openMenu || copiedButton) return;
+
+      const fragment = document.createDocumentFragment();
+      fragment.append(...Array.from(target.childNodes));
+      detachedMarkdownDomCache.store({ ...mountedDom.key, fragment });
+      streamPerfCount('ui.markdown_renderer.dom_cache.capture');
+    };
+  }, [containerRef]);
+
   // Synchronous first paint: while the async parse is in-flight, show escaped
   // plain text immediately so there is no blank frame on initial mount. Only
   // runs when the target is empty — subsequent updates keep the prior rich DOM
@@ -780,25 +891,40 @@ const useMorphdomMarkdown = ({
     const container = containerRef.current;
     const target = container?.querySelector<HTMLElement>('[data-markdown-content]') ?? container;
     if (!target) return;
+    const decorationId = getMarkdownDecorationId(ctx);
     if (text && target.childNodes.length === 0) {
-      const block = document.createElement('div');
-      block.setAttribute('data-md-block', '');
-      // `display:contents` keeps margin-collapsing/spacing identical to a flat
-      // HTML body — the wrapper exists only for per-block reconciliation.
-      block.style.display = 'contents';
-      block.innerHTML = renderMarkdownSync(text, imageMode);
-      // Decorate synchronously too: wrap code blocks in their framed card,
-      // mark inline code, build table controls, etc. The async pass re-decorates
-      // its own DOM before morphing, so without this the first paint shows bare
-      // <pre>/tables that "snap" into their decorated form a tick later. Matching
-      // the structure here keeps the async morph to syntax colors only.
-      decorateMarkdown(block, ctx);
-      target.appendChild(block);
-      if (shouldRefreshMermaidViewers(block)) {
-        refreshMermaidViewers();
+      const cachedBlocks = !streaming ? getCachedMarkdownBlocks(text, imageMode) : null;
+      if (cachedBlocks) {
+        let hasMermaidBlock = false;
+        for (const cachedBlock of cachedBlocks) {
+          const block = document.createElement('div');
+          block.setAttribute('data-md-block', '');
+          block.style.display = 'contents';
+          block.innerHTML = cachedBlock.html;
+          decorateMarkdown(block, ctx);
+          block.setAttribute('data-md-id', cachedBlock.id);
+          block.setAttribute(MARKDOWN_DECORATION_ID_ATTR, decorationId);
+          hasMermaidBlock ||= shouldRefreshMermaidViewers(block);
+          target.appendChild(block);
+        }
+        if (hasMermaidBlock) refreshMermaidViewers();
+      } else {
+        const block = document.createElement('div');
+        block.setAttribute('data-md-block', '');
+        block.style.display = 'contents';
+        block.innerHTML = renderMarkdownSync(text, imageMode);
+        decorateMarkdown(block, ctx);
+        block.setAttribute(MARKDOWN_DECORATION_ID_ATTR, decorationId);
+        target.appendChild(block);
+        if (shouldRefreshMermaidViewers(block)) refreshMermaidViewers();
       }
+    } else if (!mermaidViewerRef.current && shouldRefreshMermaidViewers(target)) {
+      // StrictMode re-runs this setup after the cleanup probe. The DOM remains,
+      // but the viewer registry does not, so recreate it without reinstalling
+      // or re-decorating ordinary blocks.
+      refreshMermaidViewers();
     }
-  }, [containerRef, text, imageMode, ctx, refreshMermaidViewers]);
+  }, [containerRef, text, streaming, imageMode, ctx, refreshMermaidViewers]);
 
   React.useEffect(() => () => {
     mermaidViewerRef.current?.cleanup();
@@ -810,27 +936,70 @@ const useMorphdomMarkdown = ({
     if (!container) return;
     const target = container.querySelector<HTMLElement>('[data-markdown-content]') ?? container;
     let active = true;
+    const renderRevision = renderRevisionRef.current;
+    const decorationId = getMarkdownDecorationId(ctx);
 
     void renderMarkdownBlocks(text, streaming, imageMode).then((blocks) => {
-      if (!active) return;
+      if (!active || renderRevisionRef.current !== renderRevision) return;
       const existing = Array.from(target.children) as HTMLElement[];
 
       // 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) {
+          if (el.getAttribute(MARKDOWN_DECORATION_ID_ATTR) !== decorationId) {
+            const hasMermaidBlock = shouldRefreshMermaidViewers(el);
+            if (hasMermaidBlock) {
+              mermaidViewerRef.current?.cleanup();
+              mermaidViewerRef.current = null;
+            }
+            const replacement = document.createElement('div');
+            replacement.setAttribute('data-md-block', '');
+            replacement.style.display = 'contents';
+            replacement.innerHTML = block.html;
+            decorateMarkdown(replacement, ctx);
+            replacement.setAttribute('data-md-id', block.id);
+            replacement.setAttribute(MARKDOWN_DECORATION_ID_ATTR, decorationId);
+            el.replaceWith(replacement);
+            if (hasMermaidBlock || shouldRefreshMermaidViewers(replacement)) refreshMermaidViewers();
+          }
+          if (!mermaidViewerRef.current && shouldRefreshMermaidViewers(el)) {
+            refreshMermaidViewers();
+          }
+          return;
         }
-        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, {
@@ -838,12 +1007,12 @@ const useMorphdomMarkdown = ({
           onBeforeElUpdated: (fromEl, toEl) => !fromEl.isEqualNode(toEl),
         });
         el.setAttribute('data-md-id', block.id);
+        el.setAttribute(MARKDOWN_DECORATION_ID_ATTR, decorationId);
         if (hadMermaidBlock || tempHasMermaidBlock || shouldRefreshMermaidViewers(el)) {
           refreshMermaidViewers();
         }
       });
 
-      // Remove any trailing block elements no longer present.
       const hadMermaidBeforeTrailingCleanup = shouldRefreshMermaidViewers(target);
       let removedMermaidBlock = false;
       for (let i = existing.length - 1; i >= blocks.length; i -= 1) {
@@ -856,13 +1025,15 @@ const useMorphdomMarkdown = ({
       if (removedMermaidBlock || (existing.length > blocks.length && hadMermaidBeforeTrailingCleanup)) {
         refreshMermaidViewers();
       }
-
+      mountedDomRef.current = domCacheKey
+        ? { key: domCacheKey, copiedLabel: ctx.labels.copied }
+        : null;
     });
 
     return () => {
       active = false;
     };
-  }, [containerRef, text, streaming, imageMode, ctx, refreshMermaidViewers]);
+  }, [containerRef, ctx, domCacheKey, imageMode, refreshMermaidViewers, streaming, text]);
 
   React.useEffect(() => {
     const container = containerRef.current;
@@ -943,6 +1114,33 @@ const MarkdownRendererImpl: React.FC<MarkdownRendererProps> = ({
 
   const syntaxVars = React.useMemo(() => getMarkdownSyntaxVars(currentTheme), [currentTheme]);
   const ctx = useDecorateContext(currentTheme, live, effectiveDirectory ? handlePreviewLoopback : undefined, DEFAULT_MERMAID_CONTROLS);
+  const { locale } = useI18n();
+  const imageMode: MarkdownImageMode = variant === 'assistant' ? 'label' : 'inline';
+  const settledPart = part
+    && (part.type === 'text' || part.type === 'reasoning')
+    && part.time?.end !== undefined
+    ? part
+    : null;
+  const runtimeKey = getRuntimeKey();
+  // Memoized on scalar identities, not the part object: sync-store reducers
+  // recreate part objects on unrelated updates, and an object-identity dep
+  // re-ran the async render pipeline for identical content.
+  const settledSessionID = settledPart?.sessionID;
+  const settledMessageID = settledPart?.messageID;
+  const settledPartID = settledPart?.id;
+  const domCacheKey = React.useMemo<DetachedMarkdownDomKey | null>(() => {
+    // Streaming, unfinished, oversized, and identity-less Markdown continues
+    // through the normal rendering pipeline and never retains detached DOM.
+    if (isStreaming || !settledSessionID || !settledMessageID || !settledPartID || content.length === 0 || content.length > MARKDOWN_DOM_CACHE_MAX_SOURCE_CHARS) return null;
+    // content.length is a cheap fingerprint: an edited or reverted part that
+    // re-materializes under the same id must not restore the old DOM.
+    return {
+      scope: `${runtimeKey}\0${settledSessionID}`,
+      id: `${settledMessageID}\0${settledPartID}\0${imageMode}\0${content.length}`,
+      locale,
+      directory: effectiveDirectory,
+    };
+  }, [content.length, effectiveDirectory, imageMode, isStreaming, locale, runtimeKey, settledSessionID, settledMessageID, settledPartID]);
   // Identity for the fade-in wrapper: a new part/message restarts the animation.
   const fadeKey = `markdown-${part?.id ? `part-${part.id}` : `message-${messageId}`}`;
 
@@ -950,9 +1148,10 @@ const MarkdownRendererImpl: React.FC<MarkdownRendererProps> = ({
     containerRef,
     text: content,
     streaming: live,
-    imageMode: variant === 'assistant' ? 'label' : 'inline',
+    imageMode,
     syntaxVars,
     ctx,
+    domCacheKey,
   });
 
   const markdownContent = (
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 f7f9e1f2..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)
@@ -2342,9 +2309,11 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
                         </TooltipTrigger>
                         <DropdownMenuContent
                             side="top"
-                            className="w-[min(380px,calc(100vw-2rem))] p-0 flex flex-col"
+                            className="w-[min(380px,calc(100vw-2rem))] p-0 flex flex-col overflow-hidden"
                             align="end"
                             alignOffset={-40}
+                            constrainToMain
+                            collisionAvoidance={{ side: 'none', align: 'shift' }}
                             onKeyDownCapture={handleModelShortcutKeyDownCapture}
                         >
                             <div className="p-1 border-b border-border/40">
@@ -2401,6 +2370,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
                                         </div>
                                     );
                                 }}
+                                maxHeightClassName="max-h-[min(400px,calc(var(--available-height)-4rem))] flex-1"
                                 tooltipsEnabled={agentMenuOpen}
                                 onEscape={() => setAgentMenuOpen(false)}
                             />
@@ -2734,7 +2704,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
                                     </div>
                                 </DropdownMenuTrigger>
                             </TooltipTrigger>
-                            <DropdownMenuContent side="top" align="end" alignOffset={-40} className="w-[min(280px,calc(100vw-2rem))] p-0 flex flex-col">
+                            <DropdownMenuContent side="top" align="end" alignOffset={-40} constrainToMain collisionAvoidance={{ side: 'none', align: 'shift' }} className="w-[min(280px,calc(100vw-2rem))] p-0 flex flex-col overflow-hidden">
                                 <div className="p-2 border-b border-border/40">
                                     <div className="relative">
                                         <Icon name="search" className="absolute left-2.5 top-1/2 -translate-y-1/2 size-3.5 text-muted-foreground" />
@@ -2750,7 +2720,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
                                         />
                                     </div>
                                 </div>
-                                <ScrollableOverlay outerClassName="max-h-[min(400px,calc(100dvh-12rem))] flex-1">
+                                <ScrollableOverlay outerClassName="max-h-[min(400px,calc(var(--available-height)-4rem))] flex-1">
                                     <div className="p-1">
                                         {!agentSearchQuery.trim() && defaultAgentName && (
                                             <>
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/PermissionCard.tsx b/packages/ui/src/components/chat/PermissionCard.tsx
index ae243290..cd63576b 100644
--- a/packages/ui/src/components/chat/PermissionCard.tsx
+++ b/packages/ui/src/components/chat/PermissionCard.tsx
@@ -66,6 +66,14 @@ const getToolIcon = (toolName: string) => {
     return <Icon name="global" className={iconClass} />;
   }
 
+  if (tool === 'linear' || tool.startsWith('linear_')) {
+    return <Icon name="linear" className={iconClass} />;
+  }
+
+  if (tool === 'cloudflare' || tool.startsWith('cloudflare_') || tool === 'claudflare' || tool.startsWith('claudflare_')) {
+    return <Icon name="cloudflare" className={iconClass} />;
+  }
+
   return <Icon name="tools" className={iconClass} />;
 };
 
diff --git a/packages/ui/src/components/chat/StatusRow.tsx b/packages/ui/src/components/chat/StatusRow.tsx
index 1159e822..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,189 +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).
-      className={cn("mb-6", !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}
@@ -340,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/TimelineDialog.tsx b/packages/ui/src/components/chat/TimelineDialog.tsx
index 88a03d45..45e0f9f4 100644
--- a/packages/ui/src/components/chat/TimelineDialog.tsx
+++ b/packages/ui/src/components/chat/TimelineDialog.tsx
@@ -223,20 +223,48 @@ export const TimelineDialog: React.FC<TimelineDialogProps> = ({
 
     if (!currentSessionId) return null;
 
+    const turnActions = (
+        <>
+            <button
+                type="button"
+                className="text-[11px] uppercase tracking-wide text-muted-foreground/90 hover:text-foreground"
+                onClick={() => {
+                    void onScrollByTurnOffset?.(-1);
+                    onOpenChange(false);
+                }}
+            >
+                {t('chat.timeline.actions.previousTurn')}
+            </button>
+            <span className="text-muted-foreground/50">/</span>
+            <button
+                type="button"
+                className="text-[11px] uppercase tracking-wide text-muted-foreground/90 hover:text-foreground"
+                onClick={() => {
+                    onResumeToLatest?.();
+                    onOpenChange(false);
+                }}
+            >
+                {t('chat.timeline.actions.latest')}
+            </button>
+        </>
+    );
+
     return (
         <Dialog open={open} onOpenChange={onOpenChange}>
-            <DialogContent className="max-w-2xl max-h-[70vh] flex flex-col">
-                <DialogHeader>
+            <DialogContent className="max-w-2xl max-h-[70vh] max-md:max-h-[85dvh] flex flex-col overflow-y-auto">
+                <DialogHeader className="shrink-0">
                     <DialogTitle className="flex items-center gap-2">
                         <Icon name="time" className="h-5 w-5" />
                         {t('chat.timeline.title')}
                     </DialogTitle>
-                    <DialogDescription>
-                        {t('chat.timeline.description')}
-                    </DialogDescription>
+                    {!isMobile && (
+                        <DialogDescription>
+                            {t('chat.timeline.description')}
+                        </DialogDescription>
+                    )}
                 </DialogHeader>
 
-                <div className="relative mt-2">
+                <div className="relative mt-2 shrink-0">
                     <Icon name="search" className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                     <Input
                         autoFocus
@@ -249,7 +277,7 @@ export const TimelineDialog: React.FC<TimelineDialogProps> = ({
                 </div>
 
                 {canLoadEarlier && onLoadEarlier && (
-                    <div className="flex justify-center py-1">
+                    <div className="flex shrink-0 justify-center py-1">
                         <Button
                             type="button"
                             variant="link"
@@ -266,7 +294,7 @@ export const TimelineDialog: React.FC<TimelineDialogProps> = ({
                     </div>
                 )}
 
-                <div ref={listRef} className="flex-1 overflow-y-auto">
+                <div ref={listRef} className="min-h-0 flex-1 overflow-y-auto">
                     {filteredMessages.length === 0 ? (
                         <div className="text-center text-muted-foreground py-8">
                             {searchQuery ? t('chat.timeline.empty.search') : t('chat.timeline.empty.session')}
@@ -312,7 +340,7 @@ export const TimelineDialog: React.FC<TimelineDialogProps> = ({
                                         onMouseEnter={() => setSelectedIndex(index)}
                                     >
                                         <span className={cn(
-                                            "typography-meta w-16 flex-shrink-0 text-right tabular-nums",
+                                            "typography-meta min-w-16 flex-shrink-0 text-right tabular-nums whitespace-nowrap",
                                             isSelected ? "text-interactive-selection-foreground/70" : "text-muted-foreground"
                                         )}>
                                             {messageTime}
@@ -373,45 +401,31 @@ export const TimelineDialog: React.FC<TimelineDialogProps> = ({
                     )}
                 </div>
 
-                <div className="mt-4 p-3 bg-muted/30 rounded-lg">
-                    <p className="typography-meta text-muted-foreground font-medium mb-2">{t('chat.timeline.actions.title')}</p>
-                    <div className="mb-2 flex items-center gap-2">
-                        <button
-                            type="button"
-                            className="text-[11px] uppercase tracking-wide text-muted-foreground/90 hover:text-foreground"
-                            onClick={() => {
-                                void onScrollByTurnOffset?.(-1);
-                                onOpenChange(false);
-                            }}
-                        >
-                            {t('chat.timeline.actions.previousTurn')}
-                        </button>
-                        <span className="text-muted-foreground/50">/</span>
-                        <button
-                            type="button"
-                            className="text-[11px] uppercase tracking-wide text-muted-foreground/90 hover:text-foreground"
-                            onClick={() => {
-                                onResumeToLatest?.();
-                                onOpenChange(false);
-                            }}
-                        >
-                            {t('chat.timeline.actions.latest')}
-                        </button>
+                {isMobile ? (
+                    <div className="mt-2 flex shrink-0 items-center justify-center gap-2 border-t border-border/60 pt-2">
+                        {turnActions}
                     </div>
-                    <div className="flex flex-col gap-1.5 typography-meta text-muted-foreground">
-                        <div className="flex items-center gap-2">
-                            <span>{t('chat.timeline.help.clickMessage')}</span>
+                ) : (
+                    <div className="mt-4 p-3 bg-muted/30 rounded-lg shrink-0">
+                        <p className="typography-meta text-muted-foreground font-medium mb-2">{t('chat.timeline.actions.title')}</p>
+                        <div className="mb-2 flex items-center gap-2">
+                            {turnActions}
                         </div>
-                        <div className="flex items-center gap-2">
-                            <Icon name="arrow-go-back" className="h-4 w-4 flex-shrink-0" />
-                            <span>{t('chat.timeline.help.undoToPoint')}</span>
-                        </div>
-                        <div className="flex items-center gap-2">
-                            <Icon name="git-branch" className="h-4 w-4 flex-shrink-0" />
-                            <span>{t('chat.timeline.help.createSessionFromHere')}</span>
+                        <div className="flex flex-col gap-1.5 typography-meta text-muted-foreground">
+                            <div className="flex items-center gap-2">
+                                <span>{t('chat.timeline.help.clickMessage')}</span>
+                            </div>
+                            <div className="flex items-center gap-2">
+                                <Icon name="arrow-go-back" className="h-4 w-4 flex-shrink-0" />
+                                <span>{t('chat.timeline.help.undoToPoint')}</span>
+                            </div>
+                            <div className="flex items-center gap-2">
+                                <Icon name="git-branch" className="h-4 w-4 flex-shrink-0" />
+                                <span>{t('chat.timeline.help.createSessionFromHere')}</span>
+                            </div>
                         </div>
                     </div>
-                </div>
+                )}
             </DialogContent>
         </Dialog>
     );
diff --git a/packages/ui/src/components/chat/btw/BtwPanel.tsx b/packages/ui/src/components/chat/btw/BtwPanel.tsx
index ecae7ba3..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.
  *
@@ -233,7 +230,7 @@ const BtwFrame: React.FC<{
         role="dialog"
         aria-label="btw"
     >
-        <div className="oc-glass-popover oc-glass-floating w-full overflow-hidden rounded-xl">
+        <div className="oc-glass-popover w-full overflow-hidden rounded-xl border border-[var(--interactive-border)] shadow-[0_4px_16px_-4px_rgb(0_0_0_/_0.12)]">
             <div className="flex items-center gap-2 px-3 py-1.5">
                 {onTitleClick ? (
                     <button
@@ -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/DOCUMENTATION.md b/packages/ui/src/components/chat/composer/DOCUMENTATION.md
index f800230b..f3b03529 100644
--- a/packages/ui/src/components/chat/composer/DOCUMENTATION.md
+++ b/packages/ui/src/components/chat/composer/DOCUMENTATION.md
@@ -124,10 +124,14 @@ and the send path reading the same grammar.
   drawn caret through a class it only writes while applying an update, so the
   selection has to be the update that follows the focus.
 - `submit/buildOutgoingMessage.ts` flattens queued messages, the composer text,
-  inline comments and context into OpenCode's one-primary-plus-parts shape. The
-  oldest queued message becomes primary; **inline comments attach to the last
-  body the user authored** rather than becoming their own part; PR instructions
-  precede the PR diff.
+  context drafts and linked references into OpenCode's one-primary-plus-parts
+  shape. The oldest queued message becomes primary. **Every attached context
+  item (inline comments, terminal selections, browser annotations, PR context,
+  linked issue/PR) becomes its own synthetic text part carrying structured
+  metadata** built by `lib/messages/contextParts.ts`; the timeline reads that
+  metadata back to render context blocks. PR instructions precede the PR diff.
+  Queueing a message leaves context drafts in their store on purpose — the send
+  that later delivers the queue consumes them.
 - `state/useComposerDraft.ts` — a draft belongs to a (runtime, directory,
   session) identity. Writes are debounced while typing but forced at every edge
   where the page may stop running, because a pending timer is not a saved
diff --git a/packages/ui/src/components/chat/composer/submit/__tests__/buildOutgoingMessage.test.ts b/packages/ui/src/components/chat/composer/submit/__tests__/buildOutgoingMessage.test.ts
index 751f568b..2c219085 100644
--- a/packages/ui/src/components/chat/composer/submit/__tests__/buildOutgoingMessage.test.ts
+++ b/packages/ui/src/components/chat/composer/submit/__tests__/buildOutgoingMessage.test.ts
@@ -1,6 +1,8 @@
 import { describe, expect, test } from 'bun:test';
 
 import type { AttachedFile } from '@/stores/types/sessionTypes';
+import type { InlineCommentDraft } from '@/stores/useInlineCommentDraftStore';
+import { CONTEXT_METADATA_KEY, contextPayloadFromDraft } from '@/lib/messages/contextParts';
 import {
     buildOutgoingMessage,
     type OutgoingMessageDeps,
@@ -26,7 +28,6 @@ const deps = (overrides: Partial<OutgoingMessageDeps> = {}): OutgoingMessageDeps
     },
     sanitizeAttachments: (files) => [...(files ?? [])],
     collectSkillNames: (text) => [...text.matchAll(/\/(\w+)/g)].map((m) => m[1]),
-    appendComments: (text, comments) => `${text}\n[${comments.length} comments]`,
     buildSkillInstruction: (names) => (names.length ? `use: ${names.join(',')}` : null),
     ...overrides,
 });
@@ -37,7 +38,7 @@ const input = (overrides: Partial<OutgoingMessageInput> = {}): OutgoingMessageIn
     composerAttachments: [],
     inlineComments: [],
     syntheticTexts: [],
-    linkedIssueContext: null,
+    linkedIssue: null,
     linkedPr: null,
     ...overrides,
 });
@@ -130,36 +131,51 @@ describe('agent mentions', () => {
     });
 });
 
-describe('inline comments', () => {
-    test('attach to the composer text when nothing was queued', () => {
+const commentDraft = (overrides: Partial<InlineCommentDraft> = {}): InlineCommentDraft => ({
+    id: 'icd-1',
+    sessionKey: 's1',
+    source: 'diff',
+    fileLabel: 'src/app.ts',
+    startLine: 3,
+    endLine: 5,
+    side: 'modified',
+    code: 'const x = 1;',
+    language: 'ts',
+    text: 'fix this',
+    createdAt: 1,
+    ...overrides,
+});
+
+describe('context drafts', () => {
+    test('each becomes a synthetic part carrying structured metadata', () => {
         const result = buildOutgoingMessage(input({
             composerText: 'body',
-            inlineComments: [{}, {}],
+            inlineComments: [commentDraft(), commentDraft({ id: 'icd-2', source: 'file', side: undefined })],
         }), deps());
-        expect(result.primaryText).toBe('body\n[2 comments]');
+        expect(result.primaryText).toBe('body');
+        expect(result.additionalParts).toHaveLength(2);
+        expect(result.additionalParts.every((p) => p.synthetic)).toBe(true);
+        expect(result.additionalParts[0].metadata?.[CONTEXT_METADATA_KEY])
+            .toEqual(contextPayloadFromDraft(commentDraft()));
+        expect(result.additionalParts[1].metadata?.[CONTEXT_METADATA_KEY])
+            .toEqual(contextPayloadFromDraft(commentDraft({ id: 'icd-2', source: 'file', side: undefined })));
+        expect(result.additionalParts[0].text).toContain('Comment on `src/app.ts` lines 3-5 (modified):');
+        expect(result.additionalParts[0].text).toContain('fix this');
     });
 
-    test('attach to the last authored part when messages were queued', () => {
+    test('context parts precede other synthetic context', () => {
         const result = buildOutgoingMessage(input({
-            queued: [{ content: 'queued' }],
-            composerText: 'typed',
-            inlineComments: [{}],
+            composerText: 'body',
+            inlineComments: [commentDraft()],
+            syntheticTexts: ['conflict note'],
         }), deps());
-        expect(result.primaryText).toBe('queued');
-        expect(result.additionalParts[0].text).toBe('typed\n[1 comments]');
+        expect(result.additionalParts.map((p) => p.text.startsWith('Comment on') ? 'comment' : p.text))
+            .toEqual(['comment', 'conflict note']);
     });
 
-    test('fall back to primary when the queue produced no additional parts', () => {
-        const result = buildOutgoingMessage(input({
-            queued: [{ content: 'only queued' }],
-            inlineComments: [{}],
-        }), deps());
-        expect(result.primaryText).toBe('only queued\n[1 comments]');
-    });
-
-    test('no comments changes nothing', () => {
-        expect(buildOutgoingMessage(input({ composerText: 'body' }), deps()).primaryText)
-            .toBe('body');
+    test('no drafts changes nothing', () => {
+        expect(buildOutgoingMessage(input({ composerText: 'body' }), deps()).additionalParts)
+            .toEqual([]);
     });
 });
 
@@ -167,26 +183,31 @@ describe('synthetic context', () => {
     test('a linked PR sends its instructions before its diff', () => {
         const result = buildOutgoingMessage(input({
             composerText: 'review this',
-            linkedPr: { instructions: 'how to read it', context: 'the diff' },
+            linkedPr: { number: 7, title: 'PR', url: 'https://x/pr/7', instructions: 'how to read it', context: 'the diff' },
         }), deps());
         expect(result.additionalParts.map((p) => p.text))
             .toEqual(['how to read it', 'the diff']);
         expect(result.additionalParts.every((p) => p.synthetic)).toBe(true);
+        expect(result.additionalParts[1].metadata?.[CONTEXT_METADATA_KEY])
+            .toEqual({ kind: 'github-pr', number: 7, title: 'PR', url: 'https://x/pr/7' });
     });
 
     test('a linked issue is sent as context', () => {
         const result = buildOutgoingMessage(input({
             composerText: 'fix it',
-            linkedIssueContext: 'issue body',
+            linkedIssue: { number: 3, title: 'Bug', url: 'https://x/issues/3', contextText: 'issue body' },
         }), deps());
-        expect(result.additionalParts).toEqual([{ text: 'issue body', synthetic: true }]);
+        expect(result.additionalParts).toHaveLength(1);
+        expect(result.additionalParts[0].text).toBe('issue body');
+        expect(result.additionalParts[0].metadata?.[CONTEXT_METADATA_KEY])
+            .toEqual({ kind: 'github-issue', number: 3, title: 'Bug', url: 'https://x/issues/3' });
     });
 
     test('synthetic texts precede the linked references', () => {
         const result = buildOutgoingMessage(input({
             composerText: 'x',
             syntheticTexts: ['conflict note'],
-            linkedIssueContext: 'issue body',
+            linkedIssue: { number: 3, title: 'Bug', url: 'https://x/issues/3', contextText: 'issue body' },
         }), deps());
         expect(result.additionalParts.map((p) => p.text))
             .toEqual(['conflict note', 'issue body']);
@@ -211,7 +232,9 @@ describe('synthetic context', () => {
     });
 
     test('context alone is still worth sending', () => {
-        const result = buildOutgoingMessage(input({ linkedIssueContext: 'issue body' }), deps());
+        const result = buildOutgoingMessage(input({
+            linkedIssue: { number: 3, title: 'Bug', url: 'https://x/issues/3', contextText: 'issue body' },
+        }), deps());
         expect(result.isEmpty).toBe(false);
     });
 
@@ -230,8 +253,8 @@ describe('full assembly order', () => {
             queued: [{ content: 'q1' }, { content: 'q2' }],
             composerText: 'typed /deploy',
             syntheticTexts: ['synthetic'],
-            linkedIssueContext: 'issue',
-            linkedPr: { instructions: 'pr-how', context: 'pr-diff' },
+            linkedIssue: { number: 3, title: 'Bug', url: 'https://x/issues/3', contextText: 'issue' },
+            linkedPr: { number: 7, title: 'PR', url: 'https://x/pr/7', instructions: 'pr-how', context: 'pr-diff' },
         }), deps());
 
         expect(result.primaryText).toBe('q1');
diff --git a/packages/ui/src/components/chat/composer/submit/buildOutgoingMessage.ts b/packages/ui/src/components/chat/composer/submit/buildOutgoingMessage.ts
index e92395aa..15c33d6d 100644
--- a/packages/ui/src/components/chat/composer/submit/buildOutgoingMessage.ts
+++ b/packages/ui/src/components/chat/composer/submit/buildOutgoingMessage.ts
@@ -14,12 +14,16 @@
  */
 
 import type { AttachedFile } from '@/stores/types/sessionTypes';
+import type { InlineCommentDraft } from '@/stores/useInlineCommentDraftStore';
+import { contextPayloadFromDraft, createContextPart, type ContextPartMetadata } from '@/lib/messages/contextParts';
 
 export interface OutgoingPart {
     text: string;
     attachments?: AttachedFile[];
     /** Synthetic parts are context for the model, not shown as user content. */
     synthetic?: boolean;
+    /** Structured context (see contextParts.ts), persisted with the part. */
+    metadata?: ContextPartMetadata;
 }
 
 export interface OutgoingMessage {
@@ -43,12 +47,12 @@ export interface OutgoingMessageInput {
     /** The composer's own text, or null when this send skips it. */
     composerText: string | null;
     composerAttachments: readonly AttachedFile[];
-    /** Inline review comments, appended to the user's last authored text. */
-    inlineComments: readonly unknown[];
+    /** Context drafts (code comments, terminal selections, annotations, PR context). */
+    inlineComments: readonly InlineCommentDraft[];
     /** Synthetic context produced elsewhere (conflict resolution, and such). */
     syntheticTexts: readonly string[];
-    linkedIssueContext: string | null;
-    linkedPr: { instructions: string; context: string } | null;
+    linkedIssue: { number: number; title: string; url: string; contextText: string } | null;
+    linkedPr: { number: number; title: string; url: string; instructions: string; context: string } | null;
 }
 
 /**
@@ -64,8 +68,6 @@ export interface OutgoingMessageDeps {
     sanitizeAttachments: (files: readonly AttachedFile[] | undefined) => AttachedFile[];
     /** Skills named inline with `/name`. */
     collectSkillNames: (text: string) => string[];
-    /** Append inline review comments to a message body. */
-    appendComments: (text: string, comments: readonly unknown[]) => string;
     /** Instruction telling the model which skills the user named. */
     buildSkillInstruction: (names: string[]) => string | null;
 }
@@ -134,33 +136,29 @@ export function buildOutgoingMessage(
         }
     }
 
-    // Inline comments attach to the last thing the user authored, so they read
-    // as a continuation of it rather than as a separate turn.
-    if (input.inlineComments.length > 0) {
-        const lastAuthored = input.queued.length > 0 && additionalParts.length > 0
-            ? additionalParts[additionalParts.length - 1]
-            : null;
-        if (lastAuthored) {
-            lastAuthored.text = deps.appendComments(lastAuthored.text, input.inlineComments);
-        } else {
-            primaryText = deps.appendComments(primaryText, input.inlineComments);
-        }
+    // Everything below is context for the model, never plain user text. Each
+    // attached context item becomes its own synthetic part carrying structured
+    // metadata, so the timeline can render it as a context block after the
+    // server echoes the message back.
+    for (const draft of input.inlineComments) {
+        additionalParts.push(createContextPart(contextPayloadFromDraft(draft)));
     }
 
-    // Everything below is context for the model, never user-visible content.
     for (const text of input.syntheticTexts) {
         additionalParts.push({ text, synthetic: true });
     }
 
-    if (input.linkedIssueContext) {
-        additionalParts.push({ text: input.linkedIssueContext, synthetic: true });
+    if (input.linkedIssue) {
+        const { number, title, url, contextText } = input.linkedIssue;
+        additionalParts.push(createContextPart({ kind: 'github-issue', number, title, url }, contextText));
     }
 
     if (input.linkedPr) {
         // Instructions before context: the model is told how to read the diff
         // before it is given the diff.
-        additionalParts.push({ text: input.linkedPr.instructions, synthetic: true });
-        additionalParts.push({ text: input.linkedPr.context, synthetic: true });
+        const { number, title, url, instructions, context } = input.linkedPr;
+        additionalParts.push({ text: instructions, synthetic: true });
+        additionalParts.push(createContextPart({ kind: 'github-pr', number, title, url }, context));
     }
 
     const skillInstruction = deps.buildSkillInstruction(skillNames);
diff --git a/packages/ui/src/components/chat/composer/ui/ComposerContextChips.tsx b/packages/ui/src/components/chat/composer/ui/ComposerContextChips.tsx
index d731e2b0..f39bb5fd 100644
--- a/packages/ui/src/components/chat/composer/ui/ComposerContextChips.tsx
+++ b/packages/ui/src/components/chat/composer/ui/ComposerContextChips.tsx
@@ -2,164 +2,381 @@
  * Context chips above the composer.
  *
  * Each chip stands for context that will be attached to the next message but
- * is not part of its text: review comments left in a diff, captured dev-server
- * logs, preview annotations, terminal selections. They are shown so the user
- * knows what is riding along and can drop any of it before sending.
+ * is not part of its text: review comments left in a diff, preview
+ * annotations, terminal selections, PR context, chat quotes. Hovering (or
+ * tapping) a chip opens a stacked preview of its items above the composer,
+ * where a comment the user wrote can be edited in place and any item removed
+ * before sending.
  */
 
 import React from 'react';
 
 import { Icon } from '@/components/icon/Icon';
+import type { IconName } from '@/components/icon/icons';
 import { useI18n } from '@/lib/i18n';
-import type { InlineCommentDraft, InlineCommentDraftTarget } from '@/stores/useInlineCommentDraftStore';
+import { getRuntimeKey } from '@/lib/runtime-switch';
+import {
+    EMPTY_INLINE_COMMENT_DRAFTS,
+    getInlineCommentDraftKey,
+    useInlineCommentDraftStore,
+    type InlineCommentDraft,
+    type InlineCommentDraftTarget,
+    type InlineCommentSource,
+} from '@/stores/useInlineCommentDraftStore';
 import type { Theme } from '@/types/theme';
 
 export interface ComposerContextChipsProps {
-    /** Terminal selections, which show their own label and line range. */
-    terminalDrafts: readonly InlineCommentDraft[];
-    reviewCount: number;
-    prCommentCount: number;
-    prCheckCount: number;
-    previewConsoleCount: number;
-    previewAnnotationCount: number;
     draftTarget: InlineCommentDraftTarget | null;
-    onRemoveDraft: (target: InlineCommentDraftTarget, draftId: string) => void;
-    onRemoveReviewDrafts: () => void;
-    onRemovePreviewDrafts: (source: 'preview-console' | 'preview-annotation' | 'pr-comment' | 'pr-check') => void;
     colors: Theme['colors'];
 }
 
-/** A chip showing how many items of one kind are attached, with a clear action. */
-function CountChip(props: {
+/** Chip groups: every terminal selection is its own chip; the rest group by kind. */
+type ChipGroup = {
+    key: string;
+    icon: IconName;
+    iconClassName?: string;
     label: string;
     count: number;
-    removeLabel: string;
+    drafts: InlineCommentDraft[];
+};
+
+const REVIEW_SOURCES: readonly InlineCommentSource[] = ['diff', 'file', 'plan', 'file-quote'];
+
+/** Sources whose drafts carry a user-written comment that can be edited. */
+const editableSource = (source: InlineCommentSource): boolean => source !== 'terminal';
+
+/** Captured code/output kinds read better monospaced; quoted prose does not. */
+const monoSource = (source: InlineCommentSource): boolean =>
+    source !== 'chat-quote' && source !== 'preview-annotation' && source !== 'file-quote';
+
+const basename = (path: string): string => {
+    const segments = path.split('/').filter(Boolean);
+    return segments[segments.length - 1] ?? path;
+};
+
+const ENTRY_ACTION_CLASS = 'inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-[var(--surface-mutedForeground)] hover:bg-[var(--interactive-hover)] hover:text-[var(--surface-foreground)]';
+const ENTRY_LABEL_CLASS = 'text-[10px] font-medium uppercase tracking-wide text-[var(--surface-mutedForeground)] opacity-60';
+
+const DraftPreviewEntry: React.FC<{
+    draft: InlineCommentDraft;
+    index: number;
+    title: string;
+    editing: boolean;
+    onStartEdit: () => void;
+    onEndEdit: () => void;
     onRemove: () => void;
-    colors: Theme['colors'];
-    icon?: React.ReactNode;
-}) {
-    return (
-        <div
-            className="inline-flex items-center gap-1.5 rounded-xl border px-2.5 py-1"
-            style={{
-                backgroundColor: props.colors?.surface?.elevated,
-                borderColor: props.colors?.interactive?.border,
-            }}
-        >
-            {props.icon}
-            <span className="text-xs font-medium text-muted-foreground">{props.label}</span>
-            <span className="text-xs font-semibold" style={{ color: props.colors?.status?.info }}>
-                {props.count}
-            </span>
-            <button
-                type="button"
-                className="ml-1 inline-flex h-4 w-4 items-center justify-center rounded-full text-muted-foreground hover:bg-interactive-hover hover:text-foreground"
-                style={{ minHeight: 0, minWidth: 0 }}
-                onClick={props.onRemove}
-                aria-label={props.removeLabel}
-                title={props.removeLabel}
-            >
-                <Icon name="close" className="h-3 w-3" />
-            </button>
-        </div>
-    );
-}
-
-export function ComposerContextChips(props: ComposerContextChipsProps) {
+    onSaveComment: ((text: string) => void) | null;
+}> = ({ draft, index, title, editing, onStartEdit, onEndEdit, onRemove, onSaveComment }) => {
     const { t } = useI18n();
-    const {
-        terminalDrafts,
-        reviewCount,
-        prCommentCount,
-        prCheckCount,
-        previewConsoleCount,
-        previewAnnotationCount,
-        draftTarget,
-        onRemoveDraft,
-        onRemoveReviewDrafts,
-        onRemovePreviewDrafts,
-        colors,
-    } = props;
+    const [editText, setEditText] = React.useState(draft.text);
+    const editRef = React.useRef<HTMLTextAreaElement>(null);
+
+    React.useEffect(() => {
+        if (!editing) return;
+        setEditText(draft.text);
+        queueMicrotask(() => {
+            const element = editRef.current;
+            if (element) {
+                element.focus();
+                element.setSelectionRange(element.value.length, element.value.length);
+            }
+        });
+        // The draft text at edit start is the baseline; later store updates are
+        // our own saves.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [editing]);
+
+    const commitEdit = () => {
+        if (onSaveComment && editText !== draft.text) {
+            onSaveComment(editText);
+        }
+        onEndEdit();
+    };
+
+    const cancelEdit = () => {
+        setEditText(draft.text);
+        onEndEdit();
+    };
+
+    // Keep focus in the textarea while a header button is pressed: without
+    // this the textarea's blur commits first, the header re-renders under the
+    // pointer, and the click lands on the button that replaced the pressed one
+    // (save punches through to edit, cancel to remove).
+    const keepEditorFocus = (event: React.PointerEvent) => {
+        if (editing) event.preventDefault();
+    };
 
     return (
-        <div className="flex flex-wrap items-center gap-2 pb-2">
-            {terminalDrafts.map((draft) => (
-                <div
-                    key={draft.id}
-                    className="inline-flex max-w-full items-center gap-1.5 rounded-xl border border-[var(--interactive-border)] bg-[var(--surface-elevated)] px-2.5 py-1"
-                    title={draft.code}
-                >
-                    <Icon name="terminal" className="h-3.5 w-3.5" />
-                    <span className="truncate text-xs font-medium text-[var(--surface-mutedForeground)]">
-                        {t('chat.chatInput.terminalContext', {
-                            terminal: draft.fileLabel,
-                            start: draft.startLine,
-                            end: draft.endLine,
-                        })}
-                    </span>
+        <div>
+            <div className="flex items-center gap-1.5 px-3 py-1.5"
+                style={{ backgroundColor: 'color-mix(in srgb, var(--surface-mutedForeground) 8%, transparent)' }}>
+                <span className="text-xs font-medium text-[var(--surface-mutedForeground)]">{index + 1}.</span>
+                <span className="min-w-0 flex-1 truncate text-xs font-medium text-[var(--surface-foreground)]" title={title}>
+                    {title}
+                </span>
+                {onSaveComment ? (
                     <button
                         type="button"
-                        className="ml-1 inline-flex h-4 w-4 items-center justify-center rounded-full text-[var(--surface-mutedForeground)] hover:bg-[var(--interactive-hover)] hover:text-[var(--surface-foreground)]"
-                        onClick={() => draftTarget && onRemoveDraft(draftTarget, draft.id)}
-                        aria-label={t('chat.chatInput.terminalContextRemove')}
-                        title={t('chat.chatInput.terminalContextRemove')}
+                        className={ENTRY_ACTION_CLASS}
+                        style={{ minHeight: 0, minWidth: 0 }}
+                        onPointerDown={keepEditorFocus}
+                        onClick={editing ? commitEdit : onStartEdit}
+                        aria-label={t('chat.chatInput.contextPreview.edit')}
+                        title={t('chat.chatInput.contextPreview.edit')}
                     >
-                        <Icon name="close" className="h-3 w-3" />
+                        <Icon name={editing ? 'check' : 'pencil'} className="h-3 w-3" />
                     </button>
+                ) : null}
+                <button
+                    type="button"
+                    className={ENTRY_ACTION_CLASS}
+                    style={{ minHeight: 0, minWidth: 0 }}
+                    onPointerDown={keepEditorFocus}
+                    onClick={editing ? cancelEdit : onRemove}
+                    aria-label={t('chat.chatInput.contextPreview.remove')}
+                    title={t('chat.chatInput.contextPreview.remove')}
+                >
+                    <Icon name="close" className="h-3 w-3" />
+                </button>
+            </div>
+            <div className="space-y-2 px-3 py-2">
+                {draft.code.trim() ? (
+                    <div>
+                        <div className={ENTRY_LABEL_CLASS}>{t('chat.chatInput.contextPreview.selectedLabel')}</div>
+                        <div
+                            className={
+                                monoSource(draft.source)
+                                    ? 'mt-0.5 whitespace-pre-wrap break-words font-mono text-xs text-[var(--surface-foreground)]'
+                                    : 'mt-0.5 whitespace-pre-wrap break-words text-sm text-[var(--surface-foreground)]'
+                            }
+                        >
+                            {draft.code}
+                        </div>
+                    </div>
+                ) : null}
+                {onSaveComment && (editing || draft.text.trim()) ? (
+                    <div>
+                        <div className={ENTRY_LABEL_CLASS}>{t('chat.chatInput.contextPreview.commentLabel')}</div>
+                        {editing ? (
+                            <textarea
+                                ref={editRef}
+                                rows={2}
+                                value={editText}
+                                onChange={(event) => setEditText(event.target.value)}
+                                onBlur={commitEdit}
+                                onKeyDown={(event) => {
+                                    if (event.key === 'Enter' && !event.shiftKey) {
+                                        event.preventDefault();
+                                        commitEdit();
+                                    } else if (event.key === 'Escape') {
+                                        event.preventDefault();
+                                        setEditText(draft.text);
+                                        onEndEdit();
+                                    }
+                                }}
+                                placeholder={t('chat.textSelection.comment.placeholder')}
+                                className="mt-0.5 w-full resize-none rounded-md border border-[var(--interactive-border)] bg-[var(--surface-background)] px-2 py-1 text-sm text-[var(--surface-foreground)] outline-none placeholder:text-[var(--surface-mutedForeground)]"
+                                style={{ minHeight: 0 }}
+                            />
+                        ) : (
+                            <div className="mt-0.5 whitespace-pre-wrap break-words text-sm text-[var(--surface-foreground)]">{draft.text}</div>
+                        )}
+                    </div>
+                ) : null}
+            </div>
+        </div>
+    );
+};
+
+export function ComposerContextChips({ draftTarget, colors }: ComposerContextChipsProps) {
+    const { t } = useI18n();
+    const draftKey = draftTarget
+        ? getInlineCommentDraftKey(getRuntimeKey(), draftTarget.directory, draftTarget.sessionKey)
+        : null;
+    const drafts = useInlineCommentDraftStore(
+        React.useCallback(
+            (state) => (draftKey ? state.drafts[draftKey] ?? EMPTY_INLINE_COMMENT_DRAFTS : EMPTY_INLINE_COMMENT_DRAFTS),
+            [draftKey],
+        ),
+    );
+    const removeDraft = useInlineCommentDraftStore((state) => state.removeDraft);
+    const updateDraft = useInlineCommentDraftStore((state) => state.updateDraft);
+
+    const [openGroupKey, setOpenGroupKey] = React.useState<string | null>(null);
+    const [editingDraftId, setEditingDraftId] = React.useState<string | null>(null);
+    const editingRef = React.useRef<string | null>(null);
+    editingRef.current = editingDraftId;
+    const containerRef = React.useRef<HTMLDivElement>(null);
+    const closeTimerRef = React.useRef<number | null>(null);
+
+    const cancelClose = React.useCallback(() => {
+        if (closeTimerRef.current !== null) {
+            window.clearTimeout(closeTimerRef.current);
+            closeTimerRef.current = null;
+        }
+    }, []);
+    // Hover-away close. Suspended while a comment is being edited: entering or
+    // leaving edit mode reflows the panel under the pointer, and a synthetic
+    // mouseleave from that reflow must not tear the editor down.
+    const scheduleClose = React.useCallback(() => {
+        if (editingRef.current) return;
+        cancelClose();
+        closeTimerRef.current = window.setTimeout(() => {
+            closeTimerRef.current = null;
+            setOpenGroupKey(null);
+        }, 150);
+    }, [cancelClose]);
+    React.useEffect(() => cancelClose, [cancelClose]);
+
+    // Clicking outside the chips + panel closes the preview even when a reflow
+    // swallowed the mouseleave (e.g. right after finishing an edit).
+    React.useEffect(() => {
+        if (!openGroupKey) return;
+        const handlePointerDown = (event: PointerEvent) => {
+            // SAFETY: a pointer event target inside the document is always a
+            // Node; `contains` only needs that.
+            if (containerRef.current?.contains(event.target as Node)) return;
+            setOpenGroupKey(null);
+            setEditingDraftId(null);
+        };
+        document.addEventListener('pointerdown', handlePointerDown);
+        return () => document.removeEventListener('pointerdown', handlePointerDown);
+    }, [openGroupKey]);
+
+    const titleFor = React.useCallback((draft: InlineCommentDraft): string => {
+        switch (draft.source) {
+            case 'terminal':
+                return t('chat.chatInput.terminalContext', {
+                    terminal: draft.fileLabel,
+                    start: draft.startLine,
+                    end: draft.endLine,
+                });
+            case 'preview-annotation':
+                return t('chat.message.context.browserAnnotation', { page: draft.fileLabel });
+            case 'pr-comment':
+                return t('chat.message.context.prComment', { label: draft.fileLabel });
+            case 'pr-check':
+                return t('chat.message.context.prCheck', { label: draft.fileLabel });
+            case 'chat-quote':
+                return t('chat.message.context.chatQuote');
+            case 'file-quote':
+                return draft.startLine > 0 && draft.endLine > 0
+                    ? (draft.startLine === draft.endLine
+                        ? t('chat.message.context.codeCommentLine', { file: basename(draft.fileLabel), line: draft.startLine })
+                        : t('chat.message.context.codeComment', { file: basename(draft.fileLabel), start: draft.startLine, end: draft.endLine }))
+                    : t('chat.message.context.fileQuote', { file: basename(draft.fileLabel) });
+            default:
+                return draft.startLine === draft.endLine
+                    ? t('chat.message.context.codeCommentLine', { file: basename(draft.fileLabel), line: draft.startLine })
+                    : t('chat.message.context.codeComment', { file: basename(draft.fileLabel), start: draft.startLine, end: draft.endLine });
+        }
+    }, [t]);
+
+    const groups = React.useMemo<ChipGroup[]>(() => {
+        const result: ChipGroup[] = [];
+        const byKind = (
+            key: string,
+            icon: IconName,
+            label: string,
+            match: (draft: InlineCommentDraft) => boolean,
+            iconClassName?: string,
+        ) => {
+            const matched = drafts.filter(match);
+            if (matched.length > 0) {
+                result.push({ key, icon, iconClassName, label, count: matched.length, drafts: matched });
+            }
+        };
+        for (const draft of drafts) {
+            if (draft.source !== 'terminal') continue;
+            result.push({
+                key: `terminal-${draft.id}`,
+                icon: 'terminal',
+                label: t('chat.chatInput.terminalContext', {
+                    terminal: draft.fileLabel,
+                    start: draft.startLine,
+                    end: draft.endLine,
+                }),
+                count: 0,
+                drafts: [draft],
+            });
+        }
+        byKind('review', 'chat-1', t('chat.chatInput.reviewComments'), (draft) => REVIEW_SOURCES.includes(draft.source));
+        byKind('pr-comment', 'git-pull-request', t('chat.chatInput.prCommentContext'), (draft) => draft.source === 'pr-comment');
+        byKind('pr-check', 'close-circle', t('chat.chatInput.prCheckContext'), (draft) => draft.source === 'pr-check', 'text-[var(--status-error)]');
+        byKind('chat-quote', 'chat-1', t('chat.chatInput.chatQuoteContext'), (draft) => draft.source === 'chat-quote');
+        byKind('annotation', 'global', t('chat.chatInput.previewAnnotations'), (draft) => draft.source === 'preview-annotation');
+        return result;
+    }, [drafts, t]);
+
+    React.useEffect(() => {
+        if (openGroupKey && !groups.some((group) => group.key === openGroupKey)) {
+            setOpenGroupKey(null);
+            setEditingDraftId(null);
+        }
+    }, [groups, openGroupKey]);
+
+    if (!draftTarget || drafts.length === 0) return null;
+
+    const openGroup = openGroupKey ? groups.find((group) => group.key === openGroupKey) ?? null : null;
+
+    return (
+        <div className="relative" ref={containerRef}>
+            {openGroup ? (
+                <div
+                    className="oc-glass-popover absolute bottom-full left-0 z-30 mb-1.5 w-full max-w-[480px] overflow-hidden rounded-xl border border-[var(--interactive-border)] shadow-[0_4px_16px_-4px_rgb(0_0_0_/_0.12)]"
+                    onMouseEnter={cancelClose}
+                    onMouseLeave={scheduleClose}
+                >
+                    <div className="max-h-[min(50vh,420px)] divide-y divide-[var(--interactive-border)] overflow-y-auto">
+                        {openGroup.drafts.map((draft, index) => (
+                            <DraftPreviewEntry
+                                key={draft.id}
+                                draft={draft}
+                                index={index}
+                                title={titleFor(draft)}
+                                editing={editingDraftId === draft.id}
+                                onStartEdit={() => setEditingDraftId(draft.id)}
+                                onEndEdit={() => setEditingDraftId((current) => (current === draft.id ? null : current))}
+                                onRemove={() => removeDraft(draftTarget, draft.id)}
+                                onSaveComment={editableSource(draft.source)
+                                    ? (text) => updateDraft(draftTarget, draft.id, { text })
+                                    : null}
+                            />
+                        ))}
+                    </div>
                 </div>
-            ))}
-
-            {reviewCount > 0 ? (
-                <CountChip
-                    label={t('chat.chatInput.reviewComments')}
-                    count={reviewCount}
-                    removeLabel={t('chat.chatInput.reviewCommentsRemove')}
-                    onRemove={onRemoveReviewDrafts}
-                    colors={colors}
-                />
-            ) : null}
-
-            {prCommentCount > 0 ? (
-                <CountChip
-                    label={t('chat.chatInput.prCommentContext')}
-                    count={prCommentCount}
-                    removeLabel={t('chat.chatInput.prCommentContextRemove')}
-                    onRemove={() => onRemovePreviewDrafts('pr-comment')}
-                    colors={colors}
-                    icon={<Icon name="git-pull-request" className="h-3.5 w-3.5 text-muted-foreground" />}
-                />
-            ) : null}
-
-            {prCheckCount > 0 ? (
-                <CountChip
-                    label={t('chat.chatInput.prCheckContext')}
-                    count={prCheckCount}
-                    removeLabel={t('chat.chatInput.prCheckContextRemove')}
-                    onRemove={() => onRemovePreviewDrafts('pr-check')}
-                    colors={colors}
-                    icon={<Icon name="close-circle" className="h-3.5 w-3.5 text-[var(--status-error)]" />}
-                />
-            ) : null}
-
-            {previewConsoleCount > 0 ? (
-                <CountChip
-                    label={t('chat.chatInput.devServerLogs')}
-                    count={previewConsoleCount}
-                    removeLabel={t('chat.chatInput.devServerLogsRemove')}
-                    onRemove={() => onRemovePreviewDrafts('preview-console')}
-                    colors={colors}
-                />
-            ) : null}
-
-            {previewAnnotationCount > 0 ? (
-                <CountChip
-                    label={t('chat.chatInput.previewAnnotations')}
-                    count={previewAnnotationCount}
-                    removeLabel={t('chat.chatInput.previewContextRemove')}
-                    onRemove={() => onRemovePreviewDrafts('preview-annotation')}
-                    colors={colors}
-                />
             ) : null}
+            <div className="flex flex-wrap items-center gap-2 pb-2">
+                {groups.map((group) => (
+                    <button
+                        key={group.key}
+                        type="button"
+                        className="inline-flex max-w-full items-center gap-1.5 rounded-xl border px-2.5 py-1 text-left"
+                        style={{
+                            backgroundColor: colors?.surface?.elevated,
+                            borderColor: colors?.interactive?.border,
+                        }}
+                        onMouseEnter={() => {
+                            cancelClose();
+                            setOpenGroupKey(group.key);
+                        }}
+                        onMouseLeave={scheduleClose}
+                        onClick={() => {
+                            if (editingRef.current) return;
+                            setOpenGroupKey((current) => (current === group.key ? null : group.key));
+                        }}
+                        aria-expanded={openGroupKey === group.key}
+                    >
+                        <Icon name={group.icon} className={`h-3.5 w-3.5 shrink-0 text-muted-foreground ${group.iconClassName ?? ''}`} />
+                        <span className="truncate text-xs font-medium text-muted-foreground">{group.label}</span>
+                        {group.count > 0 ? (
+                            <span className="text-xs font-semibold" style={{ color: colors?.status?.info }}>
+                                {group.count}
+                            </span>
+                        ) : null}
+                    </button>
+                ))}
+            </div>
         </div>
     );
 }
diff --git a/packages/ui/src/components/chat/composer/ui/DraftTargetSelectors.tsx b/packages/ui/src/components/chat/composer/ui/DraftTargetSelectors.tsx
index 8c44d434..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';
@@ -122,7 +123,7 @@ export function DraftTargetSelectors(props: DraftTargetProps) {
                             : <ProjectLabel project={selectedProject} theme={theme} />}
                     </SelectValue>
                 </SelectTrigger>
-                <SelectContent side="top" collisionAvoidance={{ side: 'none' }} fitContent>
+                <SelectContent side="top" collisionAvoidance={{ side: 'none' }} constrainToMain fitContent>
                     {projects.map((project) => (
                         <SelectItem key={project.id} value={project.id} className="max-w-[24rem] truncate">
                             <ProjectLabel project={project} theme={theme} />
@@ -144,7 +145,7 @@ export function DraftTargetSelectors(props: DraftTargetProps) {
                             {selectedBranchLabel ?? t('chat.chatInput.branch')}
                         </SelectValue>
                     </SelectTrigger>
-                    <SelectContent side="top" collisionAvoidance={{ side: 'none' }} className="w-max min-w-48">
+                    <SelectContent side="top" collisionAvoidance={{ side: 'none' }} constrainToMain className="w-max min-w-48">
                         {projectRootBranchOption ? (
                             <SelectGroup>
                                 <SelectLabel>{t('chat.chatInput.projectRoot')}</SelectLabel>
@@ -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/composer/ui/MobilePillComposer.tsx b/packages/ui/src/components/chat/composer/ui/MobilePillComposer.tsx
index 831efacb..6bb2e10b 100644
--- a/packages/ui/src/components/chat/composer/ui/MobilePillComposer.tsx
+++ b/packages/ui/src/components/chat/composer/ui/MobilePillComposer.tsx
@@ -84,7 +84,8 @@ export function MobilePillComposer(props: MobilePillComposerProps) {
         />
         <div className="flex items-center gap-2">
             <div
-                className="flex h-11 min-w-0 flex-1 items-center gap-x-0.5 rounded-full border border-border/80 pl-2 pr-1 shadow-[0_4px_16px_-4px_rgb(0_0_0_/_0.12)]"
+                data-mobile-composer-pill="true"
+            className="flex h-11 min-w-0 flex-1 items-center gap-x-0.5 rounded-full border border-border/80 pl-2 pr-1 shadow-[0_4px_16px_-4px_rgb(0_0_0_/_0.12)]"
                 style={{ backgroundColor: currentTheme?.colors?.surface?.subtle }}
             >
                 <ComposerAttachmentControls
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..8981ebce 100644
--- a/packages/ui/src/components/chat/markdown/decorate.ts
+++ b/packages/ui/src/components/chat/markdown/decorate.ts
@@ -43,28 +43,30 @@ export type DecorateContext = {
   onPreviewLoopback?: (url: string) => void;
 };
 
-// Reference the app's icon sprite (injected into <body> by the shared Icon
-// component) so DOM-built controls use the same themed icons as the rest of
-// the app. Sprite symbols are registered under `#oc-<name>`.
-const spriteIcon = (name: IconName): string =>
-  `<svg class="remixicon size-3.5" viewBox="0 0 24 24" aria-hidden="true"><use href="#oc-${name}"></use></svg>`;
-
 const ICONS = {
-  copy: spriteIcon('file-copy'),
-  check: spriteIcon('check'),
-  download: spriteIcon('download'),
-  zoomIn: spriteIcon('add'),
-  zoomOut: spriteIcon('subtract'),
-  fit: spriteIcon('refresh'),
-  textWrap: spriteIcon('text-wrap'),
-  image: spriteIcon('file-image'),
-} as const;
+  copy: 'file-copy',
+  check: 'check',
+  download: 'download',
+  zoomIn: 'add',
+  zoomOut: 'subtract',
+  fit: 'refresh',
+  textWrap: 'text-wrap',
+  image: 'file-image',
+} as const satisfies Record<string, IconName>;
 
 const ICON_BTN_CLASS =
   'p-1 rounded hover:bg-interactive-hover/60 text-muted-foreground hover:text-foreground transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--interactive-focus-ring)]';
 
-const setIconHtml = (el: Element, html: string): void => {
-  el.innerHTML = html;
+const setIcon = (el: Element, icon: keyof typeof ICONS): void => {
+  const iconName = ICONS[icon];
+  const svg = el.ownerDocument.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  svg.setAttribute('class', 'remixicon size-3.5');
+  svg.setAttribute('viewBox', '0 0 24 24');
+  svg.setAttribute('aria-hidden', 'true');
+  const use = el.ownerDocument.createElementNS('http://www.w3.org/2000/svg', 'use');
+  use.setAttribute('href', `#oc-${iconName}`);
+  svg.appendChild(use);
+  el.replaceChildren(svg);
 };
 
 const decorateImageLabels = (root: HTMLElement): void => {
@@ -74,7 +76,7 @@ const decorateImageLabels = (root: HTMLElement): void => {
     icon.className = 'inline-flex shrink-0';
     icon.setAttribute('aria-hidden', 'true');
     icon.setAttribute('data-openchamber-markdown-image-label-icon', 'true');
-    setIconHtml(icon, ICONS.image);
+    setIcon(icon, 'image');
     label.prepend(icon);
   }
 };
@@ -86,7 +88,7 @@ const makeIconButton = (icon: keyof typeof ICONS, title: string, slot: string):
   button.setAttribute('data-md-action', slot);
   button.setAttribute('title', title);
   button.setAttribute('aria-label', title);
-  setIconHtml(button, ICONS[icon]);
+  setIcon(button, icon);
   return button;
 };
 
@@ -131,6 +133,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');
@@ -196,11 +201,11 @@ export const applyMarkdownCodeBlockWrapState = (root: HTMLElement, enabled: bool
 };
 
 const flashCopied = (button: HTMLButtonElement, copiedTitle: string, restore: keyof typeof ICONS, restoreTitle: string): void => {
-  setIconHtml(button, ICONS.check);
+  setIcon(button, 'check');
   button.setAttribute('title', copiedTitle);
   button.setAttribute('aria-label', copiedTitle);
   window.setTimeout(() => {
-    setIconHtml(button, ICONS[restore]);
+    setIcon(button, restore);
     button.setAttribute('title', restoreTitle);
     button.setAttribute('aria-label', restoreTitle);
   }, 2000);
@@ -263,7 +268,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);
@@ -492,7 +505,7 @@ const decorateLinks = (root: HTMLElement, ctx: DecorateContext): void => {
       preview.setAttribute('data-md-url', href);
       preview.setAttribute('title', ctx.labels.previewTitle);
       preview.setAttribute('aria-label', ctx.labels.previewLabel);
-      setIconHtml(preview, ICONS.download);
+      setIcon(preview, 'download');
       anchor.parentNode?.insertBefore(preview, anchor.nextSibling);
     }
   }
@@ -554,7 +567,12 @@ export const attachMarkdownInteractions = (
     if (action === 'copy-code') {
       const code = actionEl.closest('[data-component="markdown-code"]')?.querySelector('code');
       const text = code ? getMarkdownCodeText(code) : '';
-      if (text) void copyTextToClipboard(text).then(() => flashCopied(actionEl as HTMLButtonElement, ctx.labels.copied, 'copy', ctx.labels.copy));
+      if (text) {
+        actionEl.setAttribute('data-md-copy-pending', '');
+        void copyTextToClipboard(text)
+          .then(() => flashCopied(actionEl as HTMLButtonElement, ctx.labels.copied, 'copy', ctx.labels.copy))
+          .finally(() => actionEl.removeAttribute('data-md-copy-pending'));
+      }
       return;
     }
 
diff --git a/packages/ui/src/components/chat/markdown/detachedMarkdownDomCache.test.ts b/packages/ui/src/components/chat/markdown/detachedMarkdownDomCache.test.ts
new file mode 100644
index 00000000..71a4eccf
--- /dev/null
+++ b/packages/ui/src/components/chat/markdown/detachedMarkdownDomCache.test.ts
@@ -0,0 +1,104 @@
+import { describe, expect, test } from 'bun:test';
+import { Window } from 'happy-dom';
+
+import { DetachedMarkdownDomCache, type DetachedMarkdownDom } from './detachedMarkdownDomCache';
+
+Object.assign(globalThis, { document: new Window().document });
+
+const keyFor = ({ scope, id, locale, directory }: DetachedMarkdownDom) => ({ scope, id, locale, directory });
+
+const createEntry = (
+  document: Document,
+  sessionId: string,
+  messageId: string,
+  partId: string,
+): DetachedMarkdownDom => {
+  const fragment = document.createDocumentFragment();
+  const node = document.createElement('p');
+  node.textContent = `${messageId}:${partId}`;
+  fragment.appendChild(node);
+  return {
+    scope: `runtime:${sessionId}`,
+    id: `${messageId}:${partId}`,
+    locale: 'en',
+    directory: '/repo-a',
+    fragment,
+  };
+};
+
+describe('DetachedMarkdownDomCache', () => {
+  test('consumes the original DOM fragment once and rejects another locale', () => {
+    const cache = new DetachedMarkdownDomCache({ maxSessions: 2, maxEntriesPerSession: 2 });
+    const entry = createEntry(document, 'session-a', 'message-a', 'part-a');
+    const originalNode = entry.fragment.firstChild;
+
+    cache.store(entry);
+    expect(cache.take({ ...keyFor(entry), locale: 'zh' })).toBeNull();
+    cache.store(entry);
+    const restored = cache.take(keyFor(entry));
+    expect(restored?.firstChild).toBe(originalNode);
+    expect(cache.take(keyFor(entry))).toBeNull();
+  });
+
+  test('bounds entries per session and evicts the least recently used session', () => {
+    const cache = new DetachedMarkdownDomCache({ maxSessions: 2, maxEntriesPerSession: 2 });
+    cache.store(createEntry(document, 'session-a', 'message-1', 'part'));
+    cache.store(createEntry(document, 'session-a', 'message-2', 'part'));
+    cache.store(createEntry(document, 'session-a', 'message-3', 'part'));
+    cache.store(createEntry(document, 'session-b', 'message-4', 'part'));
+    cache.store(createEntry(document, 'session-c', 'message-5', 'part'));
+    expect(cache.stats()).toEqual({ sessions: 2, entries: 2 });
+    expect(cache.take({
+      scope: 'runtime:session-a',
+      id: 'message-2:part',
+      locale: 'en',
+      directory: '/repo-a',
+    })).toBeNull();
+    expect(cache.take({
+      scope: 'runtime:session-c',
+      id: 'message-5:part',
+      locale: 'en',
+      directory: '/repo-a',
+    })).not.toBeNull();
+  });
+
+  test('isolates identities by runtime and replaces an identity without growing stats', () => {
+    const cache = new DetachedMarkdownDomCache({ maxSessions: 2, maxEntriesPerSession: 2 });
+    const first = createEntry(document, 'session', 'message', 'part');
+    const replacement = createEntry(document, 'session', 'message', 'part');
+    const replacementNode = replacement.fragment.firstChild;
+    const otherRuntime = createEntry(document, 'other-runtime-session', 'message', 'part');
+
+    cache.store(first);
+    cache.store(replacement);
+    cache.store(otherRuntime);
+
+    expect(cache.stats()).toEqual({ sessions: 2, entries: 2 });
+    expect(cache.take(keyFor(otherRuntime))).not.toBeNull();
+    expect(cache.take(keyFor(replacement))?.firstChild).toBe(replacementNode);
+  });
+
+  test('does not restore file-link DOM under another directory', () => {
+    const cache = new DetachedMarkdownDomCache({ maxSessions: 2, maxEntriesPerSession: 2 });
+    const entry = createEntry(document, 'session', 'message', 'part');
+
+    cache.store(entry);
+
+    expect(cache.take({ ...keyFor(entry), directory: '/repo-b' })).toBeNull();
+  });
+
+  test('refreshes session LRU and clears all entries', () => {
+    const cache = new DetachedMarkdownDomCache({ maxSessions: 2, maxEntriesPerSession: 2 });
+    const sessionA = createEntry(document, 'session-a', 'message-a', 'part');
+    const sessionB = createEntry(document, 'session-b', 'message-b', 'part');
+    const sessionC = createEntry(document, 'session-c', 'message-c', 'part');
+    cache.store(sessionA);
+    cache.store(sessionB);
+    cache.store(sessionA);
+    cache.store(sessionC);
+    expect(cache.take(keyFor(sessionB))).toBeNull();
+
+    cache.clear();
+    expect(cache.stats()).toEqual({ sessions: 0, entries: 0 });
+  });
+});
diff --git a/packages/ui/src/components/chat/markdown/detachedMarkdownDomCache.ts b/packages/ui/src/components/chat/markdown/detachedMarkdownDomCache.ts
new file mode 100644
index 00000000..faa3f37f
--- /dev/null
+++ b/packages/ui/src/components/chat/markdown/detachedMarkdownDomCache.ts
@@ -0,0 +1,124 @@
+export type DetachedMarkdownDomKey = {
+  scope: string;
+  id: string;
+  locale: string;
+  directory: string;
+};
+
+export type DetachedMarkdownDom = DetachedMarkdownDomKey & {
+  // The fragment owns the original nodes. take() consumes it once by moving
+  // those nodes back into a renderer; nothing is cloned or serialized.
+  fragment: DocumentFragment;
+};
+
+export type DetachedMarkdownDomCacheStats = {
+  sessions: number;
+  entries: number;
+};
+
+// Holds detached, fully decorated Markdown DOM. The cache is intentionally
+// small: it accelerates recent-session and reverse-scroll remounts without
+// retaining whole session trees or depending on browser-specific byte guesses.
+type DetachedMarkdownDomCacheLimits = {
+  maxSessions: number;
+  maxEntriesPerSession: number;
+};
+
+type SessionCache = Map<string, DetachedMarkdownDom>;
+
+const DEFAULT_LIMITS: DetachedMarkdownDomCacheLimits = {
+  // Eight buckets cover a broader recent-session working set without
+  // coupling eviction to React commit or microtask timing.
+  maxSessions: 8,
+  maxEntriesPerSession: 4,
+};
+
+export class DetachedMarkdownDomCache {
+  private readonly maxSessions: number;
+  private readonly maxEntriesPerSession: number;
+  private readonly sessions = new Map<string, SessionCache>();
+
+  constructor(limits: DetachedMarkdownDomCacheLimits = DEFAULT_LIMITS) {
+    this.maxSessions = Math.max(1, limits.maxSessions);
+    this.maxEntriesPerSession = Math.max(1, limits.maxEntriesPerSession);
+  }
+
+  store(entry: DetachedMarkdownDom): void {
+    const sessionKey = entry.scope;
+    const entryKey = entry.id;
+
+    let session = this.sessions.get(sessionKey);
+    if (session === undefined) {
+      session = new Map();
+      this.sessions.set(sessionKey, session);
+    } else {
+      this.refreshSession(sessionKey, session);
+    }
+
+    // A part has one DOM version inside its authoritative runtime/session.
+    session.delete(entryKey);
+    session.set(entryKey, entry);
+
+    while (session.size > this.maxEntriesPerSession) {
+      this.removeOldestEntry(session);
+    }
+    while (this.sessions.size > this.maxSessions) {
+      this.removeOldestSession();
+    }
+  }
+
+  take(key: DetachedMarkdownDomKey): DocumentFragment | null {
+    const sessionKey = key.scope;
+    const session = this.sessions.get(sessionKey);
+    if (!session) return null;
+    const entryKey = key.id;
+
+    this.refreshSession(sessionKey, session);
+    const entry = session.get(entryKey);
+    if (entry === undefined) return null;
+
+    // A mismatched probe (different locale or directory for the same part)
+    // must not destroy the entry — the matching renderer may still come for
+    // it. Only a real hit transfers ownership out of the cache.
+    if (entry.locale !== key.locale || entry.directory !== key.directory) return null;
+
+    // A fragment is a move-only resource; taking it removes cache ownership.
+    session.delete(entryKey);
+    if (session.size === 0) this.sessions.delete(sessionKey);
+    return entry.fragment;
+  }
+
+  clear(): void {
+    this.sessions.clear();
+  }
+
+  stats(): DetachedMarkdownDomCacheStats {
+    let entries = 0;
+    for (const session of this.sessions.values()) {
+      entries += session.size;
+    }
+    return {
+      sessions: this.sessions.size,
+      entries,
+    };
+  }
+
+  private refreshSession(sessionKey: string, session: SessionCache): void {
+    this.sessions.delete(sessionKey);
+    this.sessions.set(sessionKey, session);
+  }
+
+  private removeOldestEntry(session: SessionCache): void {
+    const oldestKey = session.keys().next().value;
+    if (oldestKey === undefined) return;
+    session.delete(oldestKey);
+  }
+
+  private removeOldestSession(): void {
+    const oldestKey = this.sessions.keys().next().value;
+    if (oldestKey === undefined) return;
+    this.sessions.delete(oldestKey);
+  }
+}
+
+export const detachedMarkdownDomCache = new DetachedMarkdownDomCache();
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.test.ts b/packages/ui/src/components/chat/markdown/markdownCore.test.ts
index 9153250d..e1321496 100644
--- a/packages/ui/src/components/chat/markdown/markdownCore.test.ts
+++ b/packages/ui/src/components/chat/markdown/markdownCore.test.ts
@@ -49,7 +49,10 @@ import { escapeRawMarkdownHtml, isLocalFileUrl, MARKDOWN_FORBIDDEN_TAGS } from '
 const {
   __markdownImageCandidateCacheForTests,
   extractMarkdownImageCandidates,
+  getCachedMarkdownBlocks,
+  renderMarkdownBlocks,
   renderMarkdownSync,
+  resetMarkdownHtmlCacheForTests,
 } = await import('./markdownCore');
 const { resolveMarkdownImageSource } = await import('./markdownImageAssets');
 
@@ -90,6 +93,47 @@ describe('markdown sanitization', () => {
 
 });
 
+describe('Markdown block cache reads', () => {
+  test('returns all settled blocks synchronously after a full cache hit', async () => {
+    resetMarkdownHtmlCacheForTests();
+    const text = '**cached** settled markdown';
+
+    expect(getCachedMarkdownBlocks(text)).toBeNull();
+    const rendered = await renderMarkdownBlocks(text, false);
+
+    expect(getCachedMarkdownBlocks(text)).toEqual(rendered);
+  });
+
+  test('returns null for a cold or partial settled miss', async () => {
+    resetMarkdownHtmlCacheForTests();
+    const first = 'first settled block';
+    const changed = 'first settled block\n\nsecond settled block';
+
+    await renderMarkdownBlocks(first, false);
+
+    expect(getCachedMarkdownBlocks(changed)).toBeNull();
+  });
+
+  test('keeps image mode identity out of the settled full hit', async () => {
+    resetMarkdownHtmlCacheForTests();
+    const text = '![image](https://example.test/image.png)';
+
+    await renderMarkdownBlocks(text, false, 'inline');
+
+    expect(getCachedMarkdownBlocks(text, 'label')).toBeNull();
+    expect(getCachedMarkdownBlocks(text, 'inline')).not.toBeNull();
+  });
+
+  test('does not treat streaming live-cache entries as settled full hits', async () => {
+    resetMarkdownHtmlCacheForTests();
+    const text = 'streaming markdown';
+
+    await renderMarkdownBlocks(text, true);
+
+    expect(getCachedMarkdownBlocks(text)).toBeNull();
+  });
+});
+
 describe('Markdown images', () => {
   test('renders assistant images as icon-ready text without loading the source', () => {
     const html = renderMarkdownSync([
diff --git a/packages/ui/src/components/chat/markdown/markdownCore.ts b/packages/ui/src/components/chat/markdown/markdownCore.ts
index 822a3168..31c9af15 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,
     });
   }
 
@@ -548,10 +557,30 @@ export const __markdownBlockCacheSizesForTests = (): { full: number; live: numbe
   live: liveBlockCache.size,
 });
 
-const parseBlock = async (
-  block: MarkdownBlock,
-  imageMode: MarkdownImageMode,
-): Promise<string> => {
+/**
+ * Read a settled render synchronously when every block is already in the full
+ * cache. Cache reads retain the existing LRU `get` semantics and do not insert
+ * or expand either cache.
+ */
+export const getCachedMarkdownBlocks = (
+  text: string,
+  imageMode: MarkdownImageMode = 'inline',
+): RenderedBlock[] | null => {
+  if (!text) return [];
+
+  const blocks = streamBlocks(text, false);
+  const rendered: RenderedBlock[] = [];
+  for (const block of blocks) {
+    const contentHash = contentFingerprint(block.raw);
+    const id = markdownBlockCacheKey(contentHash, block.mode, block.highlight, imageMode);
+    const html = fullBlockCache.get(id);
+    if (html === undefined) return null;
+    rendered.push({ id, html });
+  }
+  return rendered;
+};
+
+const parseBlock = async (block: MarkdownBlock, imageMode: MarkdownImageMode): Promise<string> => {
   const parser = imageMode === 'label' ? imageLabelParser : inlineImageParser;
   const parsed = await Promise.resolve(parser.parse(block.src));
   const withMath = renderMathExpressions(parsed);
diff --git a/packages/ui/src/components/chat/markdown/mermaidViewer.ts b/packages/ui/src/components/chat/markdown/mermaidViewer.ts
index d4532546..2dd89307 100644
--- a/packages/ui/src/components/chat/markdown/mermaidViewer.ts
+++ b/packages/ui/src/components/chat/markdown/mermaidViewer.ts
@@ -22,6 +22,18 @@ type MermaidViewerController = {
   cleanup: () => void;
 };
 
+type InternalMermaidViewerController = MermaidViewerController & {
+  viewport: HTMLElement;
+  fitToViewport: (viewport: MermaidViewport) => void;
+};
+
+type MermaidViewerRegistryState = {
+  container: HTMLElement;
+  controllers: Map<HTMLElement, InternalMermaidViewerController>;
+  signatures: Map<HTMLElement, string>;
+  disposed: boolean;
+};
+
 type MermaidSvgBoundsSource = {
   viewBox?: string | null;
   width?: string | number | null;
@@ -36,13 +48,8 @@ type MermaidViewerSignatureSource = MermaidSvgBoundsSource & {
 const isPositiveFinite = (value: number): boolean => Number.isFinite(value) && value > 0;
 
 const parseSvgNumber = (value: string | number | null | undefined): number | null => {
-  if (typeof value === 'number') {
-    return isPositiveFinite(value) ? value : null;
-  }
-  if (typeof value !== 'string') {
-    return null;
-  }
-  const match = value.trim().match(/^([+-]?(?:(?:\d+\.?\d*)|(?:\.\d+))(?:[eE][+-]?\d+)?)(?:px)?$/);
+  if (value === null || value === undefined) return null;
+  const match = String(value).trim().match(/^([+-]?(?:(?:\d+\.?\d*)|(?:\.\d+))(?:[eE][+-]?\d+)?)(?:px)?$/);
   if (!match) {
     return null;
   }
@@ -233,10 +240,14 @@ export const zoomMermaidViewBoxAtPoint = ({
 };
 
 const controllerByBlock = new WeakMap<HTMLElement, MermaidViewerController>();
-
-export const getMermaidViewerController = (block: Element | null): MermaidViewerController | null => (
-  block instanceof HTMLElement ? controllerByBlock.get(block) ?? null : null
-);
+const controllerByViewport = new WeakMap<HTMLElement, InternalMermaidViewerController>();
+const activeControllers = new Set<InternalMermaidViewerController>();
+const pendingRegistries = new Set<MermaidViewerRegistryState>();
+// Controllers are non-essential for the static SVG. Initialize all renderers
+// from one post-presentation batch so geometry reads precede every SVG write.
+let sharedResizeObserver: ResizeObserver | null = null;
+let pendingRegistryFlushFrame: number | null = null;
+let pendingResizeFrame: number | null = null;
 
 const getSvgViewport = (block: HTMLElement): HTMLElement | null => (
   block.querySelector<HTMLElement>('[data-markdown="mermaid-viewport"]')
@@ -272,7 +283,62 @@ const isPanExcludedTarget = (target: EventTarget | null): boolean => (
   target instanceof Element && Boolean(target.closest('button, a, [role="button"]'))
 );
 
-const createMermaidViewerController = (block: HTMLElement): MermaidViewerController | null => {
+const fitControllers = (controllers: readonly InternalMermaidViewerController[]): void => {
+  const viewportSizes = controllers.map((controller) => getViewportSize(controller.viewport));
+  controllers.forEach((controller, index) => {
+    const viewport = viewportSizes[index];
+    if (viewport) controller.fitToViewport(viewport);
+  });
+};
+
+const scheduleActiveControllerFit = (): void => {
+  if (pendingResizeFrame !== null || activeControllers.size === 0) return;
+  pendingResizeFrame = window.requestAnimationFrame(() => {
+    pendingResizeFrame = null;
+    fitControllers(Array.from(activeControllers));
+  });
+};
+
+const ensureSharedResizeObserver = (): ResizeObserver | null => {
+  if (sharedResizeObserver) return sharedResizeObserver;
+  const ResizeObserverConstructor = globalThis.ResizeObserver;
+  if (!ResizeObserverConstructor) return null;
+  sharedResizeObserver = new ResizeObserverConstructor((entries) => {
+    for (const entry of entries) {
+      if (!(entry.target instanceof HTMLElement)) continue;
+      controllerByViewport.get(entry.target)?.fitToViewport({
+        width: entry.contentRect.width,
+        height: entry.contentRect.height,
+      });
+    }
+  });
+  return sharedResizeObserver;
+};
+
+const registerController = (controller: InternalMermaidViewerController): void => {
+  if (activeControllers.has(controller)) return;
+  const wasEmpty = activeControllers.size === 0;
+  activeControllers.add(controller);
+  controllerByViewport.set(controller.viewport, controller);
+  ensureSharedResizeObserver()?.observe(controller.viewport);
+  if (wasEmpty) window.addEventListener('resize', scheduleActiveControllerFit);
+};
+
+const unregisterController = (controller: InternalMermaidViewerController): void => {
+  if (!activeControllers.delete(controller)) return;
+  sharedResizeObserver?.unobserve(controller.viewport);
+  controllerByViewport.delete(controller.viewport);
+  if (activeControllers.size > 0) return;
+  sharedResizeObserver?.disconnect();
+  sharedResizeObserver = null;
+  window.removeEventListener('resize', scheduleActiveControllerFit);
+  if (pendingResizeFrame !== null) {
+    window.cancelAnimationFrame(pendingResizeFrame);
+    pendingResizeFrame = null;
+  }
+};
+
+const createMermaidViewerController = (block: HTMLElement): InternalMermaidViewerController | null => {
   const viewport = getSvgViewport(block);
   const svg = block.querySelector<SVGSVGElement>('[data-markdown="mermaid"] svg');
   if (!viewport || !svg) {
@@ -301,8 +367,12 @@ const createMermaidViewerController = (block: HTMLElement): MermaidViewerControl
     svg.removeAttribute('height');
   };
 
+  const fitToViewport = (size: MermaidViewport): void => {
+    applyViewBox(fitMermaidViewBox(contentBox, size));
+  };
+
   const fit = (): void => {
-    applyViewBox(fitMermaidViewBox(contentBox, getViewportSize(viewport)));
+    fitToViewport(getViewportSize(viewport));
   };
 
   const zoomAt = (pointer: MermaidPoint, zoomFactor: number): void => {
@@ -390,32 +460,24 @@ const createMermaidViewerController = (block: HTMLElement): MermaidViewerControl
     }
   };
 
-  const onResize = (): void => {
-    fit();
-  };
-
   viewport.addEventListener('wheel', onWheel, { passive: false });
   viewport.addEventListener('pointerdown', onPointerDown);
   viewport.addEventListener('pointermove', onPointerMove);
   viewport.addEventListener('pointerup', stopPan);
   viewport.addEventListener('pointercancel', stopPan);
-  window.addEventListener('resize', onResize);
-  const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(onResize);
-  observer?.observe(viewport);
-  fit();
-
-  return {
+  const controller: InternalMermaidViewerController = {
+    viewport,
     zoomIn,
     zoomOut,
     fit,
+    fitToViewport,
     cleanup: () => {
+      unregisterController(controller);
       viewport.removeEventListener('wheel', onWheel);
       viewport.removeEventListener('pointerdown', onPointerDown);
       viewport.removeEventListener('pointermove', onPointerMove);
       viewport.removeEventListener('pointerup', stopPan);
       viewport.removeEventListener('pointercancel', stopPan);
-      window.removeEventListener('resize', onResize);
-      observer?.disconnect();
       if (clearClickSuppressionTimer !== null) {
         window.clearTimeout(clearClickSuppressionTimer);
       }
@@ -424,42 +486,97 @@ const createMermaidViewerController = (block: HTMLElement): MermaidViewerControl
       controllerByBlock.delete(block);
     },
   };
+  return controller;
 };
 
-export const createMermaidViewerRegistry = (container: HTMLElement): { refresh: () => void; cleanup: () => void } => {
-  const controllers = new Map<HTMLElement, MermaidViewerController>();
-  const signatures = new Map<HTMLElement, string>();
-
-  const refresh = (): void => {
-    for (const [block, controller] of Array.from(controllers.entries())) {
-      const signature = getBlockViewerSignature(block);
-      if (!container.contains(block) || signature !== signatures.get(block)) {
-        controller.cleanup();
-        controllers.delete(block);
-        signatures.delete(block);
-      }
+const removeStaleControllers = (state: MermaidViewerRegistryState): void => {
+  for (const [block, controller] of state.controllers) {
+    const signature = getBlockViewerSignature(block);
+    if (!state.container.contains(block) || signature !== state.signatures.get(block)) {
+      controller.cleanup();
+      state.controllers.delete(block);
+      state.signatures.delete(block);
     }
+  }
+};
 
-    for (const block of Array.from(container.querySelectorAll<HTMLElement>(MERMAID_BLOCK_SELECTOR))) {
-      if (controllers.has(block) || block.querySelector('[data-markdown="mermaid"] svg') === null) {
-        continue;
-      }
-      const controller = createMermaidViewerController(block);
-      if (!controller) {
-        continue;
-      }
-      controllers.set(block, controller);
-      signatures.set(block, getBlockViewerSignature(block));
-      controllerByBlock.set(block, controller);
-    }
+const collectNewControllers = (state: MermaidViewerRegistryState): InternalMermaidViewerController[] => {
+  if (state.disposed) return [];
+  const newControllers: InternalMermaidViewerController[] = [];
+  for (const block of Array.from(state.container.querySelectorAll<HTMLElement>(MERMAID_BLOCK_SELECTOR))) {
+    if (state.controllers.has(block) || block.querySelector('[data-markdown="mermaid"] svg') === null) continue;
+    const controller = createMermaidViewerController(block);
+    if (!controller) continue;
+    state.controllers.set(block, controller);
+    state.signatures.set(block, getBlockViewerSignature(block));
+    controllerByBlock.set(block, controller);
+    newControllers.push(controller);
+  }
+  return newControllers;
+};
+
+const flushPendingRegistries = (): void => {
+  const registries = Array.from(pendingRegistries);
+  pendingRegistries.clear();
+  const newControllers: InternalMermaidViewerController[] = [];
+  for (const state of registries) {
+    if (state.disposed) continue;
+    removeStaleControllers(state);
+    newControllers.push(...collectNewControllers(state));
+  }
+  fitControllers(newControllers);
+  for (const controller of newControllers) registerController(controller);
+};
+
+const schedulePendingRegistryFlush = (): void => {
+  if (pendingRegistryFlushFrame !== null) return;
+  pendingRegistryFlushFrame = window.requestAnimationFrame(() => {
+    pendingRegistryFlushFrame = null;
+    pendingRegistryFlushFrame = window.requestAnimationFrame(() => {
+      pendingRegistryFlushFrame = null;
+      flushPendingRegistries();
+    });
+  });
+};
+
+const scheduleRegistryRefresh = (state: MermaidViewerRegistryState): void => {
+  if (state.disposed) return;
+  removeStaleControllers(state);
+  pendingRegistries.add(state);
+  schedulePendingRegistryFlush();
+};
+
+export const getMermaidViewerController = (block: Element | null): MermaidViewerController | null => {
+  if (!(block instanceof HTMLElement)) return null;
+  const existing = controllerByBlock.get(block);
+  if (existing) return existing;
+
+  for (const state of pendingRegistries) {
+    if (!state.container.contains(block)) continue;
+    flushPendingRegistries();
+    return controllerByBlock.get(block) ?? null;
+  }
+  return null;
+};
+
+export const createMermaidViewerRegistry = (container: HTMLElement) => {
+  const state: MermaidViewerRegistryState = {
+    container,
+    controllers: new Map(),
+    signatures: new Map(),
+    disposed: false,
   };
 
+  const refresh = (): void => scheduleRegistryRefresh(state);
+
   const cleanup = (): void => {
-    for (const controller of controllers.values()) {
+    state.disposed = true;
+    pendingRegistries.delete(state);
+    for (const controller of state.controllers.values()) {
       controller.cleanup();
     }
-    controllers.clear();
-    signatures.clear();
+    state.controllers.clear();
+    state.signatures.clear();
   };
 
   refresh();
diff --git a/packages/ui/src/components/chat/message/MessageBody.tsx b/packages/ui/src/components/chat/message/MessageBody.tsx
index dc870847..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,20 +418,16 @@ 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;
     onRevert?: () => void;
     onFork?: () => void;
     errorMessage?: string;
-    errorVariant?: 'error' | 'info';
     userActionsMode?: 'inline' | 'external-content' | 'external-actions';
     stickyUserHeaderEnabled?: boolean;
     reviewTransferDirection?: ReviewTransferDirection | null;
@@ -490,6 +485,20 @@ const UserMessageBody = React.memo(({ messageId, parts, messageCreatedAt, isMobi
     const [copyHintVisible, setCopyHintVisible] = React.useState(false);
     const copyHintTimeoutRef = React.useRef<number | null>(null);
 
+    // One expanded state for the whole message: text parts and context cards
+    // collapse and expand together, with a single collapse control up here
+    // instead of one per part.
+    const collapsibleUserMessages = useUIStore((state) => state.collapsibleUserMessages);
+    const [messageExpanded, setMessageExpanded] = React.useState(false);
+    const expandMessage = React.useCallback(() => setMessageExpanded(true), []);
+    const collapseMessage = React.useCallback((event: React.MouseEvent) => {
+        event.stopPropagation();
+        setMessageExpanded(false);
+    }, []);
+    React.useEffect(() => {
+        if (!collapsibleUserMessages) setMessageExpanded(false);
+    }, [collapsibleUserMessages]);
+
     const userContentParts = React.useMemo(() => {
         return parts.filter((part) => {
             if (part.type === 'text') {
@@ -717,6 +726,16 @@ const UserMessageBody = React.memo(({ messageId, parts, messageCreatedAt, isMobi
             style={CONTAIN_LAYOUT_STYLE}
             onTouchStart={isTouchContext && canCopyMessage && hasCopyableText ? revealCopyHint : undefined}
         >
+            {collapsibleUserMessages && messageExpanded && (
+                <button
+                    type="button"
+                    onClick={collapseMessage}
+                    className="absolute top-0 right-0 z-10 flex items-center justify-center rounded-sm bg-[var(--surface-elevated)] p-0.5 text-[var(--surface-mutedForeground)] transition-colors hover:bg-[var(--interactive-hover)] hover:text-[var(--surface-foreground)]"
+                    aria-label={t('chat.message.userText.collapseAria')}
+                >
+                    <Icon name="arrow-up-s" className="h-3.5 w-3.5" />
+                </button>
+            )}
             <div
                 className={cn(
                     'leading-relaxed text-foreground/90 text-base overflow-x-hidden',
@@ -761,6 +780,8 @@ const UserMessageBody = React.memo(({ messageId, parts, messageCreatedAt, isMobi
                                 messageId={messageId}
                                 isMobile={isMobile}
                                 agentMention={mentionForPart}
+                                messageExpanded={messageExpanded}
+                                onExpandMessage={expandMessage}
                             />
                         </React.Fragment>
                     );
@@ -1087,14 +1108,11 @@ const AssistantMessageBody = React.memo(({
     onShowPopup,
     streamPhase: _streamPhase,
     allowAnimation: _allowAnimation,
-    onContentChange,
     hasTextContent = false,
     onCopyMessage,
-    onAuxiliaryContentComplete,
     showReasoningTraces = false,
     turnGroupingContext,
     errorMessage,
-    errorVariant = 'error',
     reviewTransferDirection = null,
     contextPinned,
     contextPinPending,
@@ -1399,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(
@@ -1704,7 +1678,6 @@ const AssistantMessageBody = React.memo(({
 
     const shouldDeferSortedInlineText = isSortedRenderMode && !hasStopFinish;
     const showErrorMessage = Boolean(errorMessage);
-    const errorIconName = errorVariant === 'info' ? 'information' : 'error-warning';
     const isPeekSurface = chatSurfaceMode === 'peek';
     const shouldShowMessageActions = hasCopyableText && !isPeekSurface;
     const shouldShowTurnFooter = isLastAssistantInTurn && hasTextContent && (hasStopFinish || Boolean(errorMessage)) && !isPeekSurface;
@@ -1798,7 +1771,6 @@ const AssistantMessageBody = React.memo(({
                         expandedTools={expandedTools}
                         onToggleTool={onToggleTool}
                         onShowPopup={onShowPopup}
-                        onContentChange={onContentChange}
                         streamPhase={effectiveStreamPhase}
                         showHeader={true}
                         animateRows={animateActivityRows}
@@ -1875,7 +1847,6 @@ const AssistantMessageBody = React.memo(({
                             messageId={messageId}
                             streamPhase={effectiveStreamPhase}
                             chatRenderMode={chatRenderMode}
-                            onContentChange={onContentChange}
                             onShowPopup={onShowPopup}
                         />
                     </div>
@@ -1910,7 +1881,6 @@ const AssistantMessageBody = React.memo(({
                                 messageId={messageId}
                                 streamPhase={effectiveStreamPhase}
                                 chatRenderMode={chatRenderMode}
-                                onContentChange={onContentChange}
                                 onShowPopup={onShowPopup}
                             />
                         );
@@ -1922,7 +1892,6 @@ const AssistantMessageBody = React.memo(({
                                 part={part}
                                 messageId={messageId}
                                 streamPhase={effectiveStreamPhase}
-                                onContentChange={onContentChange}
                             />
                         );
                     }
@@ -1966,7 +1935,6 @@ const AssistantMessageBody = React.memo(({
                                     onToggle={onToggleTool}
                                     isMobile={isMobile}
                                     alwaysShowActions={alwaysShowMessageActions}
-                                    onContentChange={onContentChange}
                                     onShowPopup={onShowPopup}
                                     animateTailText={animatedToolIdsLookup.has(toolPart.id)}
                                 />
@@ -2038,7 +2006,6 @@ const AssistantMessageBody = React.memo(({
         messageActionButtons,
         renderJustificationActions,
         sessionId,
-        onContentChange,
         onShowPopup,
         onToggleTool,
         shouldRenderActivityGroup,
@@ -2217,17 +2184,9 @@ const AssistantMessageBody = React.memo(({
                     {renderedParts}
                     {showErrorMessage && (
                         <FadeInOnReveal key="assistant-error">
-                            <div className={cn(
-                                'group/assistant-text relative mt-3 p-3 rounded-lg border break-words max-w-full',
-                                errorVariant === 'info'
-                                    ? 'bg-[var(--status-info-background)] border-[var(--status-info-border)]'
-                                    : 'bg-[var(--status-error-background)] border-[var(--status-error-border)]',
-                            )}>
-                                <div className="flex items-center gap-2">
-                                    <Icon name={errorIconName} className={cn(
-                                        'h-4 w-4 shrink-0',
-                                        errorVariant === 'info' ? 'text-[var(--status-info)]' : 'text-[var(--status-error)]',
-                                    )} />
+                            <div className="group/assistant-text relative mt-3 max-w-full break-words rounded-2xl border border-[var(--status-info-border)] bg-[var(--status-info-background)] px-4 py-3 text-base leading-relaxed">
+                                <div className="flex items-center gap-3">
+                                    <Icon name="information" className="size-4 shrink-0 text-[var(--status-info)]" />
                                     <div className="min-w-0 flex-1 break-words">
                                         <SimpleMarkdownRenderer
                                             content={errorMessage ?? ''}
diff --git a/packages/ui/src/components/chat/message/TextSelectionMenu.tsx b/packages/ui/src/components/chat/message/TextSelectionMenu.tsx
index ab1947c1..bcdca931 100644
--- a/packages/ui/src/components/chat/message/TextSelectionMenu.tsx
+++ b/packages/ui/src/components/chat/message/TextSelectionMenu.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import { createPortal } from 'react-dom';
 import { useSessionUIStore } from '@/sync/session-ui-store';
+import { useInlineCommentDraftStore } from '@/stores/useInlineCommentDraftStore';
 import { useSessions } from '@/sync/sync-context';
 import { useInputStore } from '@/sync/input-store';
 import { useUIStore } from '@/stores/useUIStore';
 import { useProjectsStore } from '@/stores/useProjectsStore';
 import { cn } from '@/lib/utils';
-import { copyTextToClipboard } from '@/lib/clipboard';
 import { toast } from '@/components/ui';
 import { Icon } from "@/components/icon/Icon";
 import { PROJECT_NOTE_BODY_MAX_LENGTH } from '@/lib/projectContextApi';
@@ -18,6 +18,7 @@ import { isVSCodeRuntime } from '@/lib/desktop';
 import { useI18n } from '@/lib/i18n';
 import { rangeToMarkdown, trimSelectionValue, wrapMarkdownSelectionForChat } from './selectionMarkdown';
 import { focusChatInput } from '@/components/chat/composer/editor/dom';
+import { collectSelectionOverlayRects } from '@/lib/selectionOverlayRects';
 
 interface TextSelectionMenuProps {
   containerRef: React.RefObject<HTMLElement | null>;
@@ -33,6 +34,8 @@ interface SelectionPayload {
   plainText: string;
   markdownText: string;
   rect: DOMRect;
+  messageId: string | null;
+  range: Range;
 }
 
 const normalizeDistilledInsight = (insight: string): string => (
@@ -46,6 +49,54 @@ export const TextSelectionMenu: React.FC<TextSelectionMenuProps> = ({ containerR
   const [position, setPosition] = React.useState<MenuPosition>({ x: 0, y: 0, show: false });
   const [selectedText, setSelectedText] = React.useState('');
   const [selectedTextMarkdown, setSelectedTextMarkdown] = React.useState('');
+  const [selectedMessageId, setSelectedMessageId] = React.useState<string | null>(null);
+  const [commentMode, setCommentMode] = React.useState(false);
+  const commentModeRef = React.useRef(false);
+  const [commentText, setCommentText] = React.useState('');
+  const commentInputRef = React.useRef<HTMLTextAreaElement>(null);
+
+  // While the comment input owns focus the native selection is gone, so the
+  // quoted fragment is repainted with our own overlay rectangles. Raw
+  // Range.getClientRects() mixes block-container boxes with text boxes and
+  // the translucent overlaps paint double-dark bands, so the rects are taken
+  // from the text nodes only and merged into one strip per visual line.
+  const [commentRects, setCommentRects] = React.useState<DOMRect[] | null>(null);
+  const updateCommentRects = React.useCallback(() => {
+    const range = pendingSelectionRef.current?.range;
+    if (!range) {
+      setCommentRects(null);
+      return;
+    }
+
+    setCommentRects(collectSelectionOverlayRects(range));
+  }, []);
+
+  React.useEffect(() => {
+    if (!commentMode) return;
+    let frame: number | null = null;
+    const scheduleUpdate = () => {
+      if (frame !== null) return;
+      frame = window.requestAnimationFrame(() => {
+        frame = null;
+        updateCommentRects();
+      });
+    };
+    document.addEventListener('scroll', scheduleUpdate, { capture: true, passive: true });
+    window.addEventListener('resize', scheduleUpdate);
+    return () => {
+      if (frame !== null) window.cancelAnimationFrame(frame);
+      document.removeEventListener('scroll', scheduleUpdate, { capture: true });
+      window.removeEventListener('resize', scheduleUpdate);
+    };
+  }, [commentMode, updateCommentRects]);
+
+  // Grow the comment box with its content, up to five lines.
+  const resizeCommentInput = React.useCallback(() => {
+    const element = commentInputRef.current;
+    if (!element) return;
+    element.style.height = 'auto';
+    element.style.height = `${Math.min(element.scrollHeight, 120)}px`;
+  }, []);
   const isDraggingRef = React.useRef(false);
   const [isOpening, setIsOpening] = React.useState(false);
   const [isAddingToNotes, setIsAddingToNotes] = React.useState(false);
@@ -57,6 +108,8 @@ export const TextSelectionMenu: React.FC<TextSelectionMenuProps> = ({ containerR
   const isMenuVisibleRef = React.useRef(false);
   const createSession = useSessionUIStore((state) => state.createSession);
   const currentSessionId = useSessionUIStore((state) => state.currentSessionId);
+  const newSessionDraftOpen = useSessionUIStore((state) => state.newSessionDraft?.open);
+  const addContextDraft = useInlineCommentDraftStore((state) => state.addDraft);
   const setPendingInputText = useInputStore((state) => state.setPendingInputText);
   const isMobile = useUIStore((state) => state.isMobile);
   const projects = useProjectsStore((state) => state.projects);
@@ -64,6 +117,39 @@ export const TextSelectionMenu: React.FC<TextSelectionMenuProps> = ({ containerR
   const effectiveDirectory = useEffectiveDirectory();
   const sessions = useSessions();
 
+  // Mobile: the comment bar is rendered inside the composer form (its
+  // positioning context), so it inherits the runtime's own keyboard handling
+  // — browser viewport resizing and Capacitor choreography alike. This effect
+  // only centers it on the composer pill in the form's local coordinates; no
+  // viewport math, which Safari's keyboard handling reliably breaks for
+  // fixed elements.
+  React.useEffect(() => {
+    if (!commentMode || !isMobile) return;
+    const update = () => {
+      const element = menuRef.current;
+      const host = element?.offsetParent;
+      if (!element || !host) return;
+      const pill = document.querySelector('[data-mobile-composer-pill="true"]')
+        ?? document.querySelector('[data-chat-input="true"]');
+      const pillRect = pill?.getBoundingClientRect();
+      if (!pillRect || pillRect.height <= 0) return;
+      const hostRect = host.getBoundingClientRect();
+      element.style.top = `${pillRect.top - hostRect.top + (pillRect.height - element.offsetHeight) / 2}px`;
+      element.style.left = `${pillRect.left - hostRect.left}px`;
+      element.style.width = `${pillRect.width}px`;
+      element.style.bottom = 'auto';
+    };
+    update();
+    const raf = window.requestAnimationFrame(update);
+    // The composer relayouts with its own transitions and timeouts that emit
+    // no event; a light poll keeps the overlay glued to the pill.
+    const poll = window.setInterval(update, 200);
+    return () => {
+      window.cancelAnimationFrame(raf);
+      window.clearInterval(poll);
+    };
+  }, [commentMode, isMobile]);
+
   React.useEffect(() => {
     isMenuVisibleRef.current = position.show;
   }, [position.show]);
@@ -83,6 +169,7 @@ export const TextSelectionMenu: React.FC<TextSelectionMenuProps> = ({ containerR
 
   const hideMenu = React.useCallback(() => {
     pendingSelectionRef.current = null;
+    setCommentRects(null);
 
     if (!isMenuVisibleRef.current) {
       return;
@@ -97,6 +184,10 @@ export const TextSelectionMenu: React.FC<TextSelectionMenuProps> = ({ containerR
     setPosition((prev) => ({ ...prev, show: false }));
     setSelectedText('');
     setSelectedTextMarkdown('');
+    setSelectedMessageId(null);
+    setCommentMode(false);
+    commentModeRef.current = false;
+    setCommentText('');
     isMenuVisibleRef.current = false;
   }, []);
 
@@ -121,7 +212,7 @@ export const TextSelectionMenu: React.FC<TextSelectionMenuProps> = ({ containerR
   const showMenu = React.useCallback(() => {
     if (!pendingSelectionRef.current) return;
 
-    const { plainText, markdownText, rect } = pendingSelectionRef.current;
+    const { plainText, markdownText, rect, messageId } = pendingSelectionRef.current;
     const shouldAnimateIn = !position.show;
 
     // Position menu above the selection
@@ -132,6 +223,7 @@ export const TextSelectionMenu: React.FC<TextSelectionMenuProps> = ({ containerR
 
     setSelectedText(plainText);
     setSelectedTextMarkdown(markdownText);
+    setSelectedMessageId(messageId);
     setPosition({
       x: menuX,
       y: menuY,
@@ -168,6 +260,25 @@ export const TextSelectionMenu: React.FC<TextSelectionMenuProps> = ({ containerR
     }));
   }, [getDesktopClampedX, isMobile, position.show]);
 
+  // The desktop popup hangs above its anchor, so a tall comment box near the
+  // top of the chat can climb over the app header. On the desktop shell the
+  // header is a window drag zone, which makes the overlapped part of the
+  // textarea untouchable, so the popup is pushed down until its top edge stays
+  // inside the chat container.
+  React.useLayoutEffect(() => {
+    if (!position.show || isMobile || !menuRef.current) {
+      return;
+    }
+
+    const container = containerRef.current;
+    const minTop = (container ? container.getBoundingClientRect().top : 0) + 4;
+    const menuTop = menuRef.current.getBoundingClientRect().top;
+    if (menuTop < minTop) {
+      const delta = minTop - menuTop;
+      setPosition((prev) => ({ ...prev, y: prev.y + delta }));
+    }
+  }, [containerRef, isMobile, position.show, position.y, commentMode, commentText]);
+
   React.useEffect(() => {
     if (!position.show || isMobile) {
       return;
@@ -187,6 +298,11 @@ export const TextSelectionMenu: React.FC<TextSelectionMenuProps> = ({ containerR
   }, [getDesktopClampedX, isMobile, position.show]);
 
   const handleSelectionChange = React.useCallback(() => {
+    // While the comment input is open, clicking or typing in it collapses the
+    // text selection; the captured quote must survive that.
+    if (commentModeRef.current) {
+      return;
+    }
     const selection = window.getSelection();
     const container = containerRef.current;
 
@@ -221,10 +337,15 @@ export const TextSelectionMenu: React.FC<TextSelectionMenuProps> = ({ containerR
     const rect = range.getBoundingClientRect();
 
     // Store the selection but don't show menu yet if dragging
+    const anchorElement = range.commonAncestorContainer instanceof Element
+      ? range.commonAncestorContainer
+      : range.commonAncestorContainer.parentElement;
     pendingSelectionRef.current = {
       plainText: text,
       markdownText: rangeToMarkdown(range, text),
       rect,
+      messageId: anchorElement?.closest('[data-message-id]')?.getAttribute('data-message-id') ?? null,
+      range: range.cloneRange(),
     };
 
     // Only show menu if we're not currently dragging
@@ -238,7 +359,12 @@ export const TextSelectionMenu: React.FC<TextSelectionMenuProps> = ({ containerR
     if (!container) return;
 
     // Track when dragging starts
-    const handleMouseDown = () => {
+    const handleMouseDown = (event: MouseEvent) => {
+      // SAFETY: a MouseEvent target inside the document is always a Node;
+      // `contains` only needs that.
+      if (commentModeRef.current && menuRef.current?.contains(event.target as Node)) {
+        return;
+      }
       isDraggingRef.current = true;
       hideMenu();
     };
@@ -254,6 +380,11 @@ export const TextSelectionMenu: React.FC<TextSelectionMenuProps> = ({ containerR
         // Small delay to ensure selection is finalized
         mouseUpTimeoutRef.current = window.setTimeout(() => {
           mouseUpTimeoutRef.current = null;
+          // The click that opened the comment input cleared the selection on
+          // purpose; the input must survive this deferred check.
+          if (commentModeRef.current) {
+            return;
+          }
           const selection = window.getSelection();
           if (selection && selection.toString().trim()) {
             showMenu();
@@ -275,7 +406,7 @@ export const TextSelectionMenu: React.FC<TextSelectionMenuProps> = ({ containerR
       if (
         menuRef.current &&
         !menuRef.current.contains(e.target as Node) &&
-        !window.getSelection()?.toString().trim()
+        (commentModeRef.current || !window.getSelection()?.toString().trim())
       ) {
         hideMenu();
       }
@@ -310,6 +441,38 @@ export const TextSelectionMenu: React.FC<TextSelectionMenuProps> = ({ containerR
     });
   }, [selectedTextMarkdown, setPendingInputText, hideMenu]);
 
+  const handleOpenComment = React.useCallback(() => {
+    if (!selectedTextMarkdown) return;
+    setCommentMode(true);
+    commentModeRef.current = true;
+    updateCommentRects();
+    window.getSelection()?.removeAllRanges();
+    queueMicrotask(() => {
+      commentInputRef.current?.focus();
+    });
+  }, [selectedTextMarkdown, updateCommentRects]);
+
+  const handleAttachComment = React.useCallback(() => {
+    const sessionKey = currentSessionId ?? (newSessionDraftOpen ? 'draft' : null);
+    if (!selectedTextMarkdown || !sessionKey || !effectiveDirectory) {
+      hideMenu();
+      return;
+    }
+    addContextDraft({ directory: effectiveDirectory, sessionKey }, {
+      source: 'chat-quote',
+      fileLabel: selectedMessageId ?? '',
+      startLine: 1,
+      endLine: 1,
+      code: selectedTextMarkdown,
+      language: '',
+      text: commentText.trim(),
+    });
+    hideMenu();
+    queueMicrotask(() => {
+      focusChatInput();
+    });
+  }, [addContextDraft, commentText, currentSessionId, effectiveDirectory, hideMenu, newSessionDraftOpen, selectedMessageId, selectedTextMarkdown]);
+
   const handleCreateNewSession = React.useCallback(async () => {
     if (!selectedText) return;
 
@@ -322,18 +485,6 @@ export const TextSelectionMenu: React.FC<TextSelectionMenuProps> = ({ containerR
     window.getSelection()?.removeAllRanges();
   }, [selectedText, createSession, setPendingInputText, hideMenu]);
 
-  const handleCopy = React.useCallback(async () => {
-    if (!selectedText) return;
-
-    const result = await copyTextToClipboard(selectedText);
-    if (!result.ok) {
-      console.error('Failed to copy:', result.error);
-    }
-
-    hideMenu();
-    window.getSelection()?.removeAllRanges();
-  }, [selectedText, hideMenu]);
-
   const currentSession = React.useMemo(() => {
     if (!currentSessionId) {
       return null;
@@ -390,15 +541,110 @@ export const TextSelectionMenu: React.FC<TextSelectionMenuProps> = ({ containerR
 
   if (!position.show) return null;
 
+  const commentHighlightOverlay = commentMode && commentRects && commentRects.length > 0
+    ? createPortal(
+      <div className="pointer-events-none fixed inset-0 z-[5]">
+        {commentRects.map((rect, index) => (
+          <div
+            key={index}
+            className="oc-chat-comment-rect absolute"
+            style={{ left: rect.left, top: rect.top, width: rect.width, height: rect.height }}
+          />
+        ))}
+      </div>,
+      document.body,
+    )
+    : null;
+
+  const commentInput = (
+    <div
+      className={cn(
+        'oc-glass-popover flex items-end gap-2 rounded-3xl border border-[var(--interactive-border)]',
+        'pl-4 shadow-[0_4px_16px_-4px_rgb(0_0_0_/_0.12)]',
+        'py-1 pr-1',
+        'transition-[opacity,transform] duration-200 ease-out will-change-[opacity,transform]',
+        isOpening ? 'opacity-0 translate-y-[4px]' : 'opacity-100 translate-y-0'
+      )}
+    >
+      <textarea
+        ref={commentInputRef}
+        rows={1}
+        value={commentText}
+        onChange={(event) => {
+          setCommentText(event.target.value);
+          resizeCommentInput();
+        }}
+        onKeyDown={(event) => {
+          // Desktop: Enter attaches, Shift+Enter breaks the line. Mobile
+          // keyboards use Enter for line breaks; attaching is the button's job.
+          if (event.key === 'Enter' && !event.shiftKey && !isMobile) {
+            event.preventDefault();
+            handleAttachComment();
+          } else if (event.key === 'Escape') {
+            event.preventDefault();
+            hideMenu();
+          }
+        }}
+        placeholder={t('chat.textSelection.comment.placeholder')}
+        className={cn(
+          'flex-1 resize-none bg-transparent text-sm leading-5 text-[var(--surface-foreground)] outline-none placeholder:text-[var(--surface-mutedForeground)] placeholder:opacity-60',
+          // The width cap sizes the floating desktop pill; on mobile the pill
+          // spans the bottom bar and the cap would strand slack space to the
+          // right of the attach button.
+          isMobile ? 'w-full min-w-0 py-1.5 text-base leading-6' : 'w-64 max-w-[70vw] py-1.5'
+        )}
+        style={{ minHeight: 0, height: 'auto' }}
+      />
+      <button
+        type="button"
+        onClick={handleAttachComment}
+        className={cn(
+          'mb-0.5 flex shrink-0 items-center justify-center rounded-full bg-[var(--primary-base)] text-[var(--primary-foreground)] hover:opacity-90 transition-opacity duration-150',
+          isMobile ? 'h-9 w-9' : 'h-8 w-8'
+        )}
+        aria-label={t('chat.textSelection.comment.attach')}
+        title={t('chat.textSelection.comment.attach')}
+      >
+        <Icon name="attachment-2" className="h-4 w-4" />
+      </button>
+    </div>
+  );
+
   // Mobile: Show as a bar at the bottom of the screen, above the keyboard
   if (isMobile) {
+    if (commentMode) {
+      // Overlay the comment input onto the composer pill: rendering into the
+      // composer form (position: relative) inherits the runtime's keyboard
+      // handling in both browser and Capacitor; the centering effect above
+      // glues it to the pill in the form's local coordinates.
+      const composerHost = document.querySelector('form.oc-mobile-composer');
+      const bar = (
+        <div
+          ref={menuRef}
+          className={cn(
+            'z-50',
+            composerHost
+              ? 'absolute inset-x-0 bottom-[var(--oc-safe-area-bottom-visual,0.5rem)]'
+              : 'oc-chat-comment-bar fixed left-3 right-3 mx-auto max-w-[420px]',
+          )}
+        >
+          {commentInput}
+        </div>
+      );
+      return (
+        <>
+          {commentHighlightOverlay}
+          {createPortal(bar, composerHost ?? document.body)}
+        </>
+      );
+    }
     return createPortal(
       <div
         ref={menuRef}
         className={cn(
           'fixed left-3 right-3 bottom-0 z-50 mx-auto max-w-[420px]',
-          'rounded-2xl border border-[var(--interactive-border)]',
-          'bg-[var(--surface-elevated)] p-2 shadow-lg',
+          'oc-glass-popover rounded-2xl border border-[var(--interactive-border)]',
+          'p-2 shadow-[0_4px_16px_-4px_rgb(0_0_0_/_0.12)]',
           'safe-area-bottom',
           'transition-[opacity,transform] duration-200 ease-out will-change-[opacity,transform]',
           isOpening ? 'opacity-0 translate-y-[4px]' : 'opacity-100 translate-y-0'
@@ -408,6 +654,22 @@ export const TextSelectionMenu: React.FC<TextSelectionMenuProps> = ({ containerR
         }}
       >
         <div className="grid grid-cols-2 gap-2">
+          <button
+            onClick={handleOpenComment}
+            className={cn(
+              'flex min-w-0 items-center gap-2 rounded-xl px-3 py-2.5 text-left',
+              'text-sm font-medium leading-tight',
+              'bg-[var(--surface-muted)] text-[var(--surface-foreground)]',
+              'active:opacity-80',
+              'transition-opacity duration-150'
+            )}
+            title={t('chat.textSelection.title.commentOnSelection')}
+            type="button"
+          >
+            <Icon name="chat-1" className="h-5 w-5 flex-shrink-0" />
+            <span className="min-w-0 whitespace-normal">{t('chat.textSelection.actions.comment')}</span>
+          </button>
+
           <button
             onClick={handleAddToChat}
             className={cn(
@@ -421,7 +683,7 @@ export const TextSelectionMenu: React.FC<TextSelectionMenuProps> = ({ containerR
             type="button"
           >
             <Icon name="add" className="h-5 w-5 flex-shrink-0" />
-            <span className="min-w-0 whitespace-normal">{t('chat.textSelection.actions.addToChat')}</span>
+            <span className="min-w-0 whitespace-normal">{t('chat.textSelection.actions.addToInput')}</span>
           </button>
 
           <button
@@ -440,22 +702,6 @@ export const TextSelectionMenu: React.FC<TextSelectionMenuProps> = ({ containerR
             <span className="min-w-0 whitespace-normal">{t('chat.textSelection.actions.newSession')}</span>
           </button>
 
-          <button
-            onClick={handleCopy}
-            className={cn(
-              'flex min-w-0 items-center gap-2 rounded-xl px-3 py-2.5 text-left',
-              'text-sm font-medium leading-tight',
-              'bg-[var(--surface-muted)] text-[var(--surface-foreground)]',
-              'active:opacity-80',
-              'transition-opacity duration-150'
-            )}
-            title={t('chat.textSelection.actions.copy')}
-            type="button"
-          >
-            <Icon name="file-copy" className="h-5 w-5 flex-shrink-0" />
-            <span className="min-w-0 whitespace-normal">{t('chat.textSelection.actions.copy')}</span>
-          </button>
-
           {!isVSCodeRuntime() ? (
             <button
               onClick={handleAddToNotes}
@@ -484,80 +730,97 @@ export const TextSelectionMenu: React.FC<TextSelectionMenuProps> = ({ containerR
   return createPortal(
     <div
       ref={menuRef}
-      className="fixed z-50"
+      className="app-region-no-drag fixed z-50"
       style={{
         left: position.x,
         top: position.y,
         transform: 'translate(-50%, -100%)',
       }}
     >
-      <div
-        className={cn(
-          'flex items-center gap-1 whitespace-nowrap',
-          'rounded-lg border border-[var(--interactive-border)]',
-          'bg-[var(--surface-elevated)] shadow-none',
-          'px-1.5 py-1',
-          'transition-[opacity,transform] duration-200 ease-out will-change-[opacity,transform]',
-          isOpening ? 'opacity-0 translate-y-[4px]' : 'opacity-100 translate-y-0'
-        )}
-      >
-        <button
-          onClick={handleAddToChat}
+      {commentMode ? (<>{commentHighlightOverlay}{commentInput}</>) : (
+        <div
           className={cn(
-            'flex items-center gap-1.5 px-2 py-1 rounded-md',
-            'text-sm font-medium',
-            'text-[var(--surface-foreground)]',
-            'hover:bg-[var(--interactive-hover)]',
-            'transition-colors duration-150'
+            'flex items-center whitespace-nowrap',
+            'oc-glass-popover rounded-full border border-[var(--interactive-border)]',
+            'shadow-[0_4px_16px_-4px_rgb(0_0_0_/_0.12)]',
+            'p-1',
+            'transition-[opacity,transform] duration-200 ease-out will-change-[opacity,transform]',
+            isOpening ? 'opacity-0 translate-y-[4px]' : 'opacity-100 translate-y-0'
           )}
-          title={t('chat.textSelection.title.addToCurrentChat')}
-          type="button"
         >
-          <Icon name="add" className="h-4 w-4" />
-          <span className="whitespace-nowrap">{t('chat.textSelection.actions.addToChat')}</span>
-        </button>
-      
-        <div className="w-px h-4 bg-[var(--interactive-border)]" />
-      
-        <button
-          onClick={handleCreateNewSession}
-          className={cn(
-            'flex items-center gap-1.5 px-2 py-1 rounded-md',
-            'text-sm font-medium',
-            'text-[var(--surface-foreground)]',
-            'hover:bg-[var(--interactive-hover)]',
-            'transition-colors duration-150'
-          )}
-          title={t('chat.textSelection.title.newSessionWithSelection')}
-          type="button"
-        >
-          <Icon name="chat-new" className="h-4 w-4" />
-          <span className="whitespace-nowrap">{t('chat.textSelection.actions.newSession')}</span>
-        </button>
+          <button
+            onClick={handleOpenComment}
+            className={cn(
+              'px-3.5 py-1.5 rounded-full',
+              'text-sm font-medium',
+              'text-[var(--surface-foreground)]',
+              'hover:bg-[var(--interactive-hover)]',
+              'transition-colors duration-150'
+            )}
+            title={t('chat.textSelection.title.commentOnSelection')}
+            type="button"
+          >
+            {t('chat.textSelection.actions.comment')}
+          </button>
 
-        {!isVSCodeRuntime() ? (
-          <>
-            <div className="w-px h-4 bg-[var(--interactive-border)]" />
+          <div className="mx-0.5 h-5 w-px shrink-0 bg-[var(--interactive-border)]" />
 
-            <button
-              onClick={handleAddToNotes}
-              disabled={isAddingToNotes}
-              className={cn(
-                'flex items-center gap-1.5 px-2 py-1 rounded-md',
-                'text-sm font-medium',
-                'text-[var(--surface-foreground)]',
-                'hover:bg-[var(--interactive-hover)] disabled:opacity-60 disabled:cursor-not-allowed',
-                'transition-colors duration-150'
-              )}
-              title={t('chat.textSelection.title.saveInsightToNotes')}
-              type="button"
-            >
-              {isAddingToNotes ? <Icon name="loader-4" className="h-4 w-4 animate-spin" /> : <Icon name="booklet" className="h-4 w-4" />}
-              <span className="whitespace-nowrap">{t('chat.textSelection.actions.addToNotes')}</span>
-            </button>
-          </>
-        ) : null}
-      </div>
+          <button
+            onClick={handleAddToChat}
+            className={cn(
+              'px-3.5 py-1.5 rounded-full',
+              'text-sm font-medium',
+              'text-[var(--surface-foreground)]',
+              'hover:bg-[var(--interactive-hover)]',
+              'transition-colors duration-150'
+            )}
+            title={t('chat.textSelection.title.addToCurrentChat')}
+            type="button"
+          >
+            {t('chat.textSelection.actions.addToInput')}
+          </button>
+
+          <div className="mx-0.5 h-5 w-px shrink-0 bg-[var(--interactive-border)]" />
+
+          <button
+            onClick={handleCreateNewSession}
+            className={cn(
+              'px-3.5 py-1.5 rounded-full',
+              'text-sm font-medium',
+              'text-[var(--surface-foreground)]',
+              'hover:bg-[var(--interactive-hover)]',
+              'transition-colors duration-150'
+            )}
+            title={t('chat.textSelection.title.newSessionWithSelection')}
+            type="button"
+          >
+            {t('chat.textSelection.actions.newSession')}
+          </button>
+
+          {!isVSCodeRuntime() ? (
+            <>
+              <div className="mx-0.5 h-5 w-px shrink-0 bg-[var(--interactive-border)]" />
+
+              <button
+                onClick={handleAddToNotes}
+                disabled={isAddingToNotes}
+                className={cn(
+                  'flex items-center gap-1.5 px-3.5 py-1.5 rounded-full',
+                  'text-sm font-medium',
+                  'text-[var(--surface-foreground)]',
+                  'hover:bg-[var(--interactive-hover)] disabled:opacity-60 disabled:cursor-not-allowed',
+                  'transition-colors duration-150'
+                )}
+                title={t('chat.textSelection.title.saveInsightToNotes')}
+                type="button"
+              >
+                {isAddingToNotes ? <Icon name="loader-4" className="h-4 w-4 animate-spin" /> : null}
+                <span className="whitespace-nowrap">{t('chat.textSelection.actions.addToNotes')}</span>
+              </button>
+            </>
+          ) : null}
+        </div>
+      )}
     </div>,
     document.body
   );
diff --git a/packages/ui/src/components/chat/message/normalizeUserDisplayParts.ts b/packages/ui/src/components/chat/message/normalizeUserDisplayParts.ts
index 26b52758..3ddb1428 100644
--- a/packages/ui/src/components/chat/message/normalizeUserDisplayParts.ts
+++ b/packages/ui/src/components/chat/message/normalizeUserDisplayParts.ts
@@ -1,4 +1,5 @@
 import type { Part } from '@opencode-ai/sdk/v2';
+import { readContextPart } from '@/lib/messages/contextParts';
 
 const GITHUB_ISSUE_CONTEXT_PREFIX = 'GitHub issue context (JSON)';
 const GITHUB_PR_CONTEXT_PREFIX = 'GitHub pull request context (JSON)';
@@ -96,6 +97,7 @@ export const normalizeUserDisplayParts = (parts: Part[], options?: { planModeEna
             const synthetic = (part as { synthetic?: boolean }).synthetic === true;
             if (!synthetic) return true;
             if (part.type !== 'text') return false;
+            if (readContextPart(part)) return true;
             const text = (part as { text?: unknown }).text;
             if (typeof text !== 'string') {
                 return false;
@@ -116,6 +118,27 @@ export const normalizeUserDisplayParts = (parts: Part[], options?: { planModeEna
                 const synthetic = rawPart.synthetic === true;
 
                 if (synthetic) {
+                    const contextPayload = readContextPart(part);
+                    if (contextPayload?.kind === 'github-issue' || contextPayload?.kind === 'github-pr') {
+                        // SAFETY: same display-only file-part shape the legacy
+                        // buildGitHubAttachmentPart produces; consumed by
+                        // FileAttachment, which matches on the mime type.
+                        return {
+                            type: 'file',
+                            mime: contextPayload.kind === 'github-issue'
+                                ? 'application/vnd.github.issue-link'
+                                : 'application/vnd.github.pull-request-link',
+                            filename: contextPayload.kind === 'github-issue'
+                                ? `Issue #${contextPayload.number}: ${contextPayload.title}`
+                                : `PR #${contextPayload.number}: ${contextPayload.title}`,
+                            url: contextPayload.url,
+                        } as Part;
+                    }
+                    if (contextPayload) {
+                        // Other context kinds render through UserContextPart.
+                        return part;
+                    }
+                    // Legacy messages: sniff the pre-metadata text format.
                     const attachmentPart = buildGitHubAttachmentPart(text);
                     if (attachmentPart) {
                         return attachmentPart;
diff --git a/packages/ui/src/components/chat/message/partUtils.ts b/packages/ui/src/components/chat/message/partUtils.ts
index 1f95dee6..9731d05a 100644
--- a/packages/ui/src/components/chat/message/partUtils.ts
+++ b/packages/ui/src/components/chat/message/partUtils.ts
@@ -1,4 +1,5 @@
 import type { Part } from '@opencode-ai/sdk/v2';
+import { readContextPart } from '@/lib/messages/contextParts';
 
 type PartWithText = Part & { text?: string; content?: string; value?: string };
 
@@ -54,6 +55,13 @@ export const filterVisibleParts = (parts: Part[], options: VisibleFilterOptions
             }
         }
 
+        // User-attached context (inline comments, terminal selections, and
+        // such) is synthetic transport-wise but is user content: it renders
+        // as a context block and must survive alongside regular text.
+        if (isSynthetic && readContextPart(part)) {
+            return true;
+        }
+
         // Only filter out synthetic parts if there are non-synthetic parts present
         // Otherwise, show synthetic parts so the message is displayed
         if (isSynthetic && hasNonSynthetic) {
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/DOCUMENTATION.md b/packages/ui/src/components/chat/message/parts/DOCUMENTATION.md
index 9cd7bf7a..821d462e 100644
--- a/packages/ui/src/components/chat/message/parts/DOCUMENTATION.md
+++ b/packages/ui/src/components/chat/message/parts/DOCUMENTATION.md
@@ -121,6 +121,14 @@ Why: only navigation tools use the compact static path; all other tools need obs
 ## Quick map of files in this folder
 
 - Text: `AssistantTextPart.tsx`, `UserTextPart.tsx`
+- User-attached context (inline code comments, terminal selections, browser
+  annotations, PR comments/checks): `UserContextPart.tsx`. `UserTextPart`
+  routes to it when the part's metadata carries an `openchamberContext`
+  payload (see `lib/messages/contextParts.ts`, which owns both the send-time
+  builder and the read-back parser). Linked GitHub issues/PRs are instead
+  converted to link file-parts in `normalizeUserDisplayParts.ts`. Legacy
+  pre-metadata messages still render via text sniffing (`<terminal_context>`
+  blocks, `GitHub issue context (JSON)` prefixes).
 - Tools: `ToolPart.tsx`, `ToolPartDiffPreview.tsx`, `PlainDiffFallback.tsx`, `ProgressiveGroup.tsx`, `toolPresentation.tsx`, `toolRenderUtils.ts`, `ToolRevealOnMount.tsx`
 - Reasoning/justification: `ReasoningPart.tsx`, `JustificationBlock.tsx`
 - Status/placeholders: `WorkingPlaceholder.tsx`, `SessionActiveSpinner.tsx`, `MigratingPart.tsx`, `BusyDots.tsx`
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/UserContextPart.tsx b/packages/ui/src/components/chat/message/parts/UserContextPart.tsx
new file mode 100644
index 00000000..4402b243
--- /dev/null
+++ b/packages/ui/src/components/chat/message/parts/UserContextPart.tsx
@@ -0,0 +1,193 @@
+import React from 'react';
+
+import { Icon } from '@/components/icon/Icon';
+import type { IconName } from '@/components/icon/icons';
+import { useI18n } from '@/lib/i18n';
+import type { ContextPartPayload } from '@/lib/messages/contextParts';
+import { cn } from '@/lib/utils';
+
+/**
+ * A context item attached to a user message: an inline code comment, a
+ * terminal selection, a browser annotation, or GitHub PR context.
+ *
+ * The quoted material renders as a messenger-style reply: a source caption and
+ * the quote behind a plain left bar, in muted text, clamped to a few lines
+ * (click toggles the full quote). The user's comment follows below as regular
+ * message text, so the pair reads as "a reply to this quote" instead of a
+ * boxed widget inside the bubble.
+ */
+
+const ContextCard: React.FC<{
+    icon: IconName;
+    summary: string;
+    /** Full untruncated context, shown on hover. */
+    title?: string;
+    body: string;
+    text: string;
+    /** Render the quote in the code font (code, terminal output, CI logs). */
+    mono?: boolean;
+    /**
+     * Message-level collapse: with collapsible messages on, the whole user
+     * message (text parts and cards alike) shares one expanded state, so a
+     * collapsed card is a two-line preview and a click asks the message to
+     * expand instead of toggling anything of its own.
+     */
+    collapsed?: boolean;
+    onExpand?: () => void;
+}> = ({ icon, summary, title, body, text, mono, collapsed, onExpand }) => {
+    const [expanded, setExpanded] = React.useState(false);
+    const hasBody = body.trim().length > 0;
+    const hasText = text.trim().length > 0;
+
+    if (collapsed) {
+        // One line per attachment: the source caption, and the user's comment
+        // after it when there is one ("Quoted from an earlier message: thanks,
+        // that settles it"). Attachments without a comment (terminal output
+        // and the like) collapse to the caption alone.
+        const comment = text.trim();
+        return (
+            <div
+                className="my-1 flex min-w-0 max-w-full cursor-pointer items-center gap-1.5 border-l-2 border-[var(--interactive-border)] pl-3 text-xs text-[var(--surface-mutedForeground)]"
+                onClick={onExpand}
+                title={title}
+            >
+                <Icon name={icon} className="h-3.5 w-3.5 shrink-0" />
+                <span className="truncate">
+                    {comment.length > 0 ? `${summary}: ` : summary}
+                    {comment.length > 0 ? (
+                        <span className="text-sm text-[var(--surface-foreground)]">{comment}</span>
+                    ) : null}
+                </span>
+            </div>
+        );
+    }
+
+    return (
+        <div className="my-1.5 min-w-0 max-w-full">
+            <div
+                className={cn('min-w-0 border-l-2 border-[var(--interactive-border)] pl-3', hasBody && 'cursor-pointer')}
+                onClick={hasBody ? () => setExpanded((value) => !value) : undefined}
+                title={title}
+            >
+                <div className="flex items-center gap-1.5 text-xs text-[var(--surface-mutedForeground)]">
+                    <Icon name={icon} className="h-3.5 w-3.5 shrink-0" />
+                    <span className="truncate">{summary}</span>
+                </div>
+                {hasBody ? (
+                    <div
+                        className={cn(
+                            'mt-1 whitespace-pre-wrap break-words text-[var(--surface-mutedForeground)]',
+                            mono ? 'font-mono text-xs leading-5' : 'text-sm',
+                            !expanded && 'line-clamp-4'
+                        )}
+                    >
+                        {body}
+                    </div>
+                ) : null}
+            </div>
+            {hasText ? (
+                <div className="mt-1.5 whitespace-pre-wrap break-words font-sans text-sm text-[var(--surface-foreground)]">{text}</div>
+            ) : null}
+        </div>
+    );
+};
+
+const basename = (path: string): string => {
+    const segments = path.split('/').filter(Boolean);
+    return segments[segments.length - 1] ?? path;
+};
+
+const UserContextPart: React.FC<{
+    payload: ContextPartPayload;
+    /** Message-level collapse state, shared with the text parts. */
+    collapsed?: boolean;
+    onExpand?: () => void;
+}> = ({ payload, collapsed, onExpand }) => {
+    const { t } = useI18n();
+    const shared = { collapsed, onExpand };
+
+    switch (payload.kind) {
+        case 'code-comment': {
+            const file = basename(payload.fileLabel);
+            const summary = payload.startLine === payload.endLine
+                ? t('chat.message.context.codeCommentLine', { file, line: payload.startLine })
+                : t('chat.message.context.codeComment', { file, start: payload.startLine, end: payload.endLine });
+            const fullTitle = payload.startLine === payload.endLine
+                ? t('chat.message.context.codeCommentLine', { file: payload.fileLabel, line: payload.startLine })
+                : t('chat.message.context.codeComment', { file: payload.fileLabel, start: payload.startLine, end: payload.endLine });
+            return <ContextCard icon="chat-1" summary={summary} title={fullTitle} body={payload.code} text={payload.text} mono {...shared} />;
+        }
+        case 'terminal':
+            return (
+                <ContextCard
+                    icon="terminal"
+                    summary={t('chat.message.terminalContext', {
+                        terminal: payload.terminalLabel,
+                        start: payload.startLine,
+                        end: payload.endLine,
+                    })}
+                    body={payload.output}
+                    text=""
+                    mono
+                    {...shared}
+                />
+            );
+        case 'browser-annotation':
+            return (
+                <ContextCard
+                    icon="global"
+                    summary={t('chat.message.context.browserAnnotation', { page: payload.pageUrl })}
+                    title={payload.pageUrl}
+                    body={payload.prompt}
+                    text={payload.text}
+                    {...shared}
+                />
+            );
+        case 'pr-comment':
+            return (
+                <ContextCard
+                    icon="git-pull-request"
+                    summary={t('chat.message.context.prComment', { label: payload.label })}
+                    body={payload.body}
+                    text={payload.text}
+                    {...shared}
+                />
+            );
+        case 'pr-check':
+            return (
+                <ContextCard
+                    icon="close-circle"
+                    summary={t('chat.message.context.prCheck', { label: payload.label })}
+                    body={payload.output}
+                    text={payload.text}
+                    mono
+                    {...shared}
+                />
+            );
+        case 'file-quote': {
+            const file = basename(payload.fileLabel);
+            const summary = payload.startLine != null && payload.endLine != null
+                ? (payload.startLine === payload.endLine
+                    ? t('chat.message.context.codeCommentLine', { file, line: payload.startLine })
+                    : t('chat.message.context.codeComment', { file, start: payload.startLine, end: payload.endLine }))
+                : t('chat.message.context.fileQuote', { file });
+            return <ContextCard icon="chat-1" summary={summary} title={payload.fileLabel} body={payload.quote} text={payload.text} {...shared} />;
+        }
+        case 'chat-quote':
+            return (
+                <ContextCard
+                    icon="chat-1"
+                    summary={t('chat.message.context.chatQuote')}
+                    body={payload.quote}
+                    text={payload.text}
+                    {...shared}
+                />
+            );
+        case 'github-issue':
+        case 'github-pr':
+            // Rendered as link attachments by normalizeUserDisplayParts.
+            return null;
+    }
+};
+
+export default React.memo(UserContextPart);
diff --git a/packages/ui/src/components/chat/message/parts/UserTextPart.tsx b/packages/ui/src/components/chat/message/parts/UserTextPart.tsx
index 884c8509..8acd64aa 100644
--- a/packages/ui/src/components/chat/message/parts/UserTextPart.tsx
+++ b/packages/ui/src/components/chat/message/parts/UserTextPart.tsx
@@ -15,6 +15,8 @@ import {
 } from '@/lib/messages/inlineMessageLinks';
 import { prepareUserMarkdownContent, SKILL_TOKEN_PATTERN } from './userTextPartContent';
 import { extractTerminalContexts } from '@/lib/messages/terminalContext';
+import { readContextPart } from '@/lib/messages/contextParts';
+import UserContextPart from './UserContextPart';
 
 type PartWithText = Part & { text?: string; content?: string; value?: string };
 
@@ -23,13 +25,26 @@ type UserTextPartProps = {
     messageId: string;
     isMobile: boolean;
     agentMention?: AgentMentionInfo;
+    /**
+     * Message-level collapse: when provided, all parts of the user message
+     * share one expanded state owned by the message body, expanding any part
+     * expands the whole message, and the message body renders the single
+     * collapse control. When absent the part collapses on its own (legacy
+     * single-part behavior).
+     */
+    messageExpanded?: boolean;
+    onExpandMessage?: () => void;
 };
 
 const normalizeUserMessageRenderingMode = (mode: unknown): 'markdown' | 'plain' => {
     return mode === 'markdown' ? 'markdown' : 'plain';
 };
 
-const UserTextPart: React.FC<UserTextPartProps> = ({ part, messageId, agentMention }) => {
+const UserTextPart: React.FC<UserTextPartProps> = ({ part, messageId, agentMention, messageExpanded, onExpandMessage }) => {
+    // Structured context (inline comments, terminal selections, annotations,
+    // PR context) renders as a dedicated block instead of raw prompt text.
+    const contextPayload = React.useMemo(() => readContextPart(part), [part]);
+
     const partWithText = part as PartWithText;
     const rawText = partWithText.text;
     const serializedText = typeof rawText === 'string' ? rawText : partWithText.content || partWithText.value || '';
@@ -45,7 +60,9 @@ const UserTextPart: React.FC<UserTextPartProps> = ({ part, messageId, agentMenti
     const effectiveDirectory = useEffectiveDirectory();
     const { t } = useI18n();
     const normalizedRenderingMode = normalizeUserMessageRenderingMode(userMessageRenderingMode);
-    const isCollapsed = collapsibleUserMessages && !isExpanded;
+    const isControlled = messageExpanded !== undefined;
+    const effectiveExpanded = messageExpanded ?? isExpanded;
+    const isCollapsed = collapsibleUserMessages && !effectiveExpanded;
     const textRef = React.useRef<HTMLDivElement>(null);
     const skillByName = React.useMemo(() => new Map(skills.map((skill) => [skill.name, skill])), [skills]);
 
@@ -72,7 +89,7 @@ const UserTextPart: React.FC<UserTextPartProps> = ({ part, messageId, agentMenti
     React.useEffect(() => {
         const el = textRef.current;
         if (!el) return;
-        if (!collapsibleUserMessages || isExpanded) return;
+        if (!collapsibleUserMessages || effectiveExpanded) return;
 
         const checkTruncation = () => {
             setIsTruncated(el.scrollHeight > el.clientHeight);
@@ -112,7 +129,7 @@ const UserTextPart: React.FC<UserTextPartProps> = ({ part, messageId, agentMenti
             mutationObserver.disconnect();
             resizeObserver.disconnect();
         };
-    }, [collapsibleUserMessages, textContent, isExpanded]);
+    }, [collapsibleUserMessages, textContent, effectiveExpanded]);
 
     React.useEffect(() => {
         if (!collapsibleUserMessages) {
@@ -145,11 +162,15 @@ const UserTextPart: React.FC<UserTextPartProps> = ({ part, messageId, agentMenti
         // Measure at click time instead of trusting the observed flag: whether
         // the text is clipped right now is what decides if expanding does
         // anything, and the flag can still be catching up on a fresh message.
-        if (collapsibleUserMessages && !isExpanded && element.scrollHeight > element.clientHeight) {
+        if (collapsibleUserMessages && !effectiveExpanded && element.scrollHeight > element.clientHeight) {
             setIsTruncated(true);
-            setIsExpanded(true);
+            if (isControlled) {
+                onExpandMessage?.();
+            } else {
+                setIsExpanded(true);
+            }
         }
-    }, [collapsibleUserMessages, hasActiveSelectionInElement, isExpanded, openSkill]);
+    }, [collapsibleUserMessages, effectiveExpanded, hasActiveSelectionInElement, isControlled, onExpandMessage, openSkill]);
 
     const handleCollapse = React.useCallback((event: React.MouseEvent) => {
         event.stopPropagation();
@@ -224,13 +245,23 @@ const UserTextPart: React.FC<UserTextPartProps> = ({ part, messageId, agentMenti
         });
     }, [agentMention, openSkill, skillByName, textContent]);
 
+    if (contextPayload) {
+        return (
+            <UserContextPart
+                payload={contextPayload}
+                collapsed={isCollapsed}
+                onExpand={isControlled ? onExpandMessage : () => setIsExpanded(true)}
+            />
+        );
+    }
+
     if ((!textContent || textContent.trim().length === 0) && terminalContextState.contexts.length === 0) {
         return null;
     }
 
     return (
         <div className="relative" key={part.id || `${messageId}-user-text`}>
-            {collapsibleUserMessages && isExpanded && (
+            {collapsibleUserMessages && !isControlled && isExpanded && (
                 <button
                     type="button"
                     onClick={handleCollapse}
@@ -243,10 +274,10 @@ const UserTextPart: React.FC<UserTextPartProps> = ({ part, messageId, agentMenti
             <div
                 className={cn(
                     "break-words font-sans typography-markdown-body",
-                    isExpanded && "pb-3",
+                    !isControlled && isExpanded && "pb-3",
                     normalizedRenderingMode === 'plain' && 'whitespace-pre-wrap',
                     isCollapsed && "line-clamp-2",
-                    collapsibleUserMessages && isTruncated && !isExpanded && "cursor-pointer"
+                    collapsibleUserMessages && isTruncated && !effectiveExpanded && "cursor-pointer"
                 )}
                 ref={textRef}
                 onClick={handleClick}
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/chat/message/parts/toolPresentation.tsx b/packages/ui/src/components/chat/message/parts/toolPresentation.tsx
index f4b627ba..df6edd59 100644
--- a/packages/ui/src/components/chat/message/parts/toolPresentation.tsx
+++ b/packages/ui/src/components/chat/message/parts/toolPresentation.tsx
@@ -56,6 +56,12 @@ export const getToolIcon = (toolName: string) => {
     if (tool === 'openchamber') {
         return <Icon name="openchamber" className={iconClass} />;
     }
+    if (tool === 'linear' || tool.startsWith('linear_')) {
+        return <Icon name="linear" className={iconClass} />;
+    }
+    if (tool === 'cloudflare' || tool.startsWith('cloudflare_') || tool === 'claudflare' || tool.startsWith('claudflare_')) {
+        return <Icon name="cloudflare" className={iconClass} />;
+    }
     if (tool === 'openchamber_web') {
         return <Icon name="global" className={iconClass} />;
     }
diff --git a/packages/ui/src/components/chat/useMobileAutocompleteMaxHeight.ts b/packages/ui/src/components/chat/useMobileAutocompleteMaxHeight.ts
index 31e36129..64356f6f 100644
--- a/packages/ui/src/components/chat/useMobileAutocompleteMaxHeight.ts
+++ b/packages/ui/src/components/chat/useMobileAutocompleteMaxHeight.ts
@@ -35,7 +35,11 @@ export const useMobileAutocompleteMaxHeight = (
             // The popup's bottom edge is its anchor (composer top) and does not
             // depend on its current height.
             const available = Math.max(0, Math.floor(el.getBoundingClientRect().bottom - boundaryTop - 8));
-            const next = available < normalMaxHeight ? available : undefined;
+            // Floor: browser keyboard panning can put the anchor above the
+            // measured boundary for a frame (or for the whole pan), which
+            // would collapse the popup to zero height. A short popup that
+            // slightly overlaps the header beats an invisible one.
+            const next = available < normalMaxHeight ? Math.max(120, available) : undefined;
             setMaxHeight((prev) => (prev === next ? prev : next));
         };
         measure();
diff --git a/packages/ui/src/components/comments/FilePreviewCommentMenu.tsx b/packages/ui/src/components/comments/FilePreviewCommentMenu.tsx
new file mode 100644
index 00000000..3b3641b3
--- /dev/null
+++ b/packages/ui/src/components/comments/FilePreviewCommentMenu.tsx
@@ -0,0 +1,258 @@
+import React from 'react';
+import { createPortal } from 'react-dom';
+
+import { cn } from '@/lib/utils';
+import { useI18n } from '@/lib/i18n';
+import { useEffectiveDirectory } from '@/hooks/useEffectiveDirectory';
+import { useSessionUIStore } from '@/sync/session-ui-store';
+import { useInlineCommentDraftStore } from '@/stores/useInlineCommentDraftStore';
+import { focusChatInput } from '@/components/chat/composer/editor/dom';
+import { collectSelectionOverlayRects } from '@/lib/selectionOverlayRects';
+import { InlineCommentInput } from './InlineCommentInput';
+
+interface FilePreviewCommentMenuProps {
+  containerRef: React.RefObject<HTMLElement | null>;
+  filePath: string;
+  /** Raw file source, used to locate the selected fragment's line range. */
+  fileContent: string;
+}
+
+/**
+ * Comment-on-selection for read-only file previews (rendered markdown and the
+ * like). Selecting text shows a small Comment pill above the selection;
+ * choosing it opens the shared comment input, and attaching stores a
+ * file-quote context draft carrying the selected fragment (with a best-effort
+ * source line range) plus the user's comment.
+ */
+export function FilePreviewCommentMenu({ containerRef, filePath, fileContent }: FilePreviewCommentMenuProps) {
+  const { t } = useI18n();
+  const currentSessionId = useSessionUIStore((state) => state.currentSessionId);
+  const newSessionDraftOpen = useSessionUIStore((state) => state.newSessionDraft?.open);
+  const effectiveDirectory = useEffectiveDirectory();
+  const addDraft = useInlineCommentDraftStore((state) => state.addDraft);
+
+  const [anchor, setAnchor] = React.useState<{ x: number; y: number } | null>(null);
+  const [selectedText, setSelectedText] = React.useState('');
+  const [commentMode, setCommentMode] = React.useState(false);
+  const commentModeRef = React.useRef(false);
+  const menuRef = React.useRef<HTMLDivElement>(null);
+  const selectionRangeRef = React.useRef<Range | null>(null);
+  // The selected fragment stays visibly highlighted while the comment input
+  // owns focus, same as chat quote comments.
+  const [highlightRects, setHighlightRects] = React.useState<DOMRect[] | null>(null);
+
+  const hide = React.useCallback(() => {
+    setAnchor(null);
+    setSelectedText('');
+    setCommentMode(false);
+    commentModeRef.current = false;
+    selectionRangeRef.current = null;
+    setHighlightRects(null);
+  }, []);
+
+  React.useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const handleSelectionChange = () => {
+      if (commentModeRef.current) return;
+      const selection = window.getSelection();
+      const text = selection?.toString().trim() ?? '';
+      if (!selection || !text || selection.rangeCount === 0) {
+        hide();
+        return;
+      }
+      const range = selection.getRangeAt(0);
+      if (!container.contains(range.commonAncestorContainer)) {
+        hide();
+        return;
+      }
+      const rect = range.getBoundingClientRect();
+      selectionRangeRef.current = range.cloneRange();
+      setSelectedText(text);
+      setAnchor({ x: rect.left + rect.width / 2, y: rect.top - 10 });
+    };
+
+    const handlePointerDown = (event: PointerEvent) => {
+      // SAFETY: a pointer event target inside the document is always a Node;
+      // `contains` only needs that.
+      if (menuRef.current?.contains(event.target as Node)) return;
+      if (commentModeRef.current) {
+        hide();
+      }
+    };
+
+    document.addEventListener('selectionchange', handleSelectionChange);
+    document.addEventListener('pointerdown', handlePointerDown);
+    return () => {
+      document.removeEventListener('selectionchange', handleSelectionChange);
+      document.removeEventListener('pointerdown', handlePointerDown);
+    };
+  }, [containerRef, hide]);
+
+  /**
+   * Best-effort mapping of the rendered-text selection back to source lines:
+   * an exact match of the fragment (or its first line) in the raw content
+   * yields a range; markdown syntax usually breaks the match, in which case
+   * the draft simply carries no line numbers.
+   */
+  const resolveLineRange = React.useCallback((fragment: string): { start: number; end: number } | null => {
+    const lineAt = (index: number): number => fileContent.slice(0, index).split('\n').length;
+    // Inline markdown syntax (emphasis markers and such) breaks long matches,
+    // so each anchor line is tried at decreasing lengths.
+    const candidatesFor = (line: string): string[] => {
+      const trimmed = line.trim();
+      return [trimmed, trimmed.slice(0, 32), trimmed.split(' ').slice(0, 4).join(' ')]
+        .filter((candidate) => candidate.length >= 8);
+    };
+    const locate = (line: string, from: number): number => {
+      for (const candidate of candidatesFor(line)) {
+        const index = fileContent.indexOf(candidate, from);
+        if (index >= 0) return index;
+      }
+      return -1;
+    };
+
+    const exact = fragment.length >= 8 ? fileContent.indexOf(fragment) : -1;
+    if (exact >= 0) {
+      const start = lineAt(exact);
+      return { start, end: start + fragment.split('\n').length - 1 };
+    }
+
+    const fragmentLines = fragment.split('\n').map((line) => line.trim()).filter(Boolean);
+    if (fragmentLines.length === 0) return null;
+    const startIndex = locate(fragmentLines[0], 0);
+    if (startIndex < 0) return null;
+    const start = lineAt(startIndex);
+    if (fragmentLines.length === 1) return { start, end: start };
+    const endIndex = locate(fragmentLines[fragmentLines.length - 1], startIndex);
+    // A partially located multi-line fragment gets no range rather than a
+    // misleading single-line one.
+    if (endIndex < 0) return null;
+    return { start, end: Math.max(start, lineAt(endIndex)) };
+  }, [fileContent]);
+
+  const updateHighlightRects = React.useCallback(() => {
+    const range = selectionRangeRef.current;
+    if (!range) {
+      setHighlightRects(null);
+      return;
+    }
+    setHighlightRects(collectSelectionOverlayRects(range));
+  }, []);
+
+  React.useEffect(() => {
+    if (!commentMode) return;
+    let frame: number | null = null;
+    const scheduleUpdate = () => {
+      if (frame !== null) return;
+      frame = window.requestAnimationFrame(() => {
+        frame = null;
+        updateHighlightRects();
+      });
+    };
+    document.addEventListener('scroll', scheduleUpdate, { capture: true, passive: true });
+    window.addEventListener('resize', scheduleUpdate);
+    return () => {
+      if (frame !== null) window.cancelAnimationFrame(frame);
+      document.removeEventListener('scroll', scheduleUpdate, { capture: true });
+      window.removeEventListener('resize', scheduleUpdate);
+    };
+  }, [commentMode, updateHighlightRects]);
+
+  const openComment = React.useCallback(() => {
+    if (!selectedText) return;
+    setCommentMode(true);
+    commentModeRef.current = true;
+    updateHighlightRects();
+    window.getSelection()?.removeAllRanges();
+  }, [selectedText, updateHighlightRects]);
+
+  const saveComment = React.useCallback((text: string) => {
+    const sessionKey = currentSessionId ?? (newSessionDraftOpen ? 'draft' : null);
+    if (!selectedText || !sessionKey || !effectiveDirectory) {
+      hide();
+      return;
+    }
+    const lineRange = resolveLineRange(selectedText);
+    addDraft({ directory: effectiveDirectory, sessionKey }, {
+      source: 'file-quote',
+      fileLabel: filePath,
+      startLine: lineRange?.start ?? 0,
+      endLine: lineRange?.end ?? 0,
+      code: selectedText,
+      language: '',
+      text: text.trim(),
+    });
+    hide();
+    queueMicrotask(() => {
+      focusChatInput();
+    });
+  }, [addDraft, currentSessionId, effectiveDirectory, filePath, hide, newSessionDraftOpen, resolveLineRange, selectedText]);
+
+  if (!anchor) return null;
+
+  const lineRange = commentMode ? resolveLineRange(selectedText) : null;
+
+  return createPortal(
+    <div
+      ref={menuRef}
+      className="fixed z-50"
+      style={{
+        left: anchor.x,
+        top: anchor.y,
+        transform: 'translate(-50%, -100%)',
+      }}
+    >
+      {commentMode && highlightRects && highlightRects.length > 0
+        ? createPortal(
+          <div className="pointer-events-none fixed inset-0 z-40">
+            {highlightRects.map((rect, index) => (
+              <div
+                key={index}
+                className="oc-chat-comment-rect absolute"
+                style={{ left: rect.left, top: rect.top, width: rect.width, height: rect.height }}
+              />
+            ))}
+          </div>,
+          document.body,
+        )
+        : null}
+      {commentMode ? (
+        <div className="w-[min(420px,80vw)]">
+          <InlineCommentInput
+            fileLabel={filePath}
+            lineRange={lineRange ? { start: lineRange.start, end: lineRange.end } : undefined}
+            onSave={saveComment}
+            onCancel={hide}
+          />
+        </div>
+      ) : (
+        <div
+          className={cn(
+            'flex items-center whitespace-nowrap',
+            'oc-glass-popover rounded-full border border-[var(--interactive-border)]',
+            'shadow-[0_4px_16px_-4px_rgb(0_0_0_/_0.12)]',
+            'p-1',
+          )}
+        >
+          <button
+            type="button"
+            onClick={openComment}
+            className={cn(
+              'px-3.5 py-1.5 rounded-full',
+              'text-sm font-medium',
+              'text-[var(--surface-foreground)]',
+              'hover:bg-[var(--interactive-hover)]',
+              'transition-colors duration-150'
+            )}
+            title={t('chat.textSelection.title.commentOnSelection')}
+          >
+            {t('chat.textSelection.actions.comment')}
+          </button>
+        </div>
+      )}
+    </div>,
+    document.body,
+  );
+}
diff --git a/packages/ui/src/components/comments/InlineCommentCard.tsx b/packages/ui/src/components/comments/InlineCommentCard.tsx
index 326b1695..2218ca3f 100644
--- a/packages/ui/src/components/comments/InlineCommentCard.tsx
+++ b/packages/ui/src/components/comments/InlineCommentCard.tsx
@@ -1,17 +1,9 @@
 import React, { useState } from 'react';
 import type { InlineCommentDraft } from '@/stores/useInlineCommentDraftStore';
-import { useOptionalThemeSystem } from '@/contexts/useThemeSystem';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from '@/components/ui/context-menu';
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
-import { Icon } from "@/components/icon/Icon";
+import { Icon } from '@/components/icon/Icon';
 import { useI18n } from '@/lib/i18n';
 
 interface InlineCommentCardProps {
@@ -22,6 +14,14 @@ interface InlineCommentCardProps {
   maxWidth?: number;
 }
 
+const HEADER_ACTION_CLASS = 'inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-[var(--surface-mutedForeground)] hover:bg-[var(--interactive-hover)] hover:text-[var(--surface-foreground)]';
+
+/**
+ * A saved inline comment shown under its lines in the diff/editor. Styled to
+ * match the composer's context preview entries: a muted header band naming
+ * the file and range with direct edit/remove actions, and the comment text
+ * below.
+ */
 export function InlineCommentCard({
   draft,
   onEdit,
@@ -30,115 +30,90 @@ export function InlineCommentCard({
   maxWidth,
 }: InlineCommentCardProps) {
   const { t } = useI18n();
-  const themeContext = useOptionalThemeSystem();
-  const currentTheme = themeContext?.currentTheme;
   const [isOpen, setIsOpen] = useState(false);
-  const [isContextMenuOpen, setIsContextMenuOpen] = useState(false);
-  const draftText = typeof draft.text === 'string' ? draft.text : '';
-  
+  const draftText = draft.text;
+
   // Check if content is long enough to warrant collapsing (rough estimate)
-  // In a real app we might measure line height, but length check is a good proxy for now
   const isLongContent = draftText.length > 150 || draftText.split('\n').length > 3;
 
   return (
-    <ContextMenu open={isContextMenuOpen} onOpenChange={setIsContextMenuOpen}>
-      <ContextMenuTrigger
-        render={
-          <div
-            className={cn(
-              "rounded-lg border shadow-none w-full max-w-[min(100%,calc(var(--oc-context-panel-width,100vw)-var(--oc-editor-gutter-width,0px)))] overflow-hidden transition-all duration-200",
-              className
-            )}
-            style={{
-              backgroundColor: currentTheme?.colors?.surface?.elevated,
-              borderColor: currentTheme?.colors?.interactive?.border,
-              maxWidth: maxWidth ? `${Math.max(200, Math.floor(maxWidth))}px` : undefined,
-            }}
-            data-comment-card="true"
-            onContextMenu={(event) => {
-              event.preventDefault();
-              setIsContextMenuOpen(true);
-            }}
-          />
-        }
+    <div
+      className={cn(
+        'w-full max-w-[min(100%,calc(var(--oc-context-panel-width,100vw)-var(--oc-editor-gutter-width,0px)))] overflow-hidden rounded-xl border border-[var(--interactive-border)] bg-[var(--surface-elevated)] shadow-none',
+        className
+      )}
+      style={{
+        maxWidth: maxWidth ? `${Math.max(200, Math.floor(maxWidth))}px` : undefined,
+      }}
+      data-comment-card="true"
+    >
+      <div
+        className="flex items-center gap-1.5 px-3 py-1.5"
+        style={{ backgroundColor: 'color-mix(in srgb, var(--surface-mutedForeground) 8%, transparent)' }}
       >
-      <div className="flex items-start justify-between gap-2 p-3">
-        <div className="flex-1 min-w-0">
-          <div className="flex items-center gap-2 text-xs font-medium text-muted-foreground mb-1.5">
-            <span className="truncate max-w-[200px]" title={draft.fileLabel}>
-              {draft.fileLabel}
-            </span>
-            <span>•</span>
-            <span>{t('inlineComment.range.lines', { start: draft.startLine, end: draft.endLine })}</span>
-            {draft.side && <span>({draft.side})</span>}
-          </div>
-          
-          <Collapsible open={isOpen || !isLongContent} onOpenChange={setIsOpen}>
-            <div className={cn("text-sm whitespace-pre-wrap break-words leading-relaxed", !isOpen && isLongContent && "line-clamp-3")}>
-              {draftText}
-            </div>
-            
-            {isLongContent && (
-              <CollapsibleTrigger asChild>
-                <Button 
-                  variant="ghost" 
-                  size="sm" 
-                  className="h-6 px-0 mt-1 text-xs text-muted-foreground hover:text-foreground w-full justify-start"
-                >
-                  {isOpen ? (
-                    <>
-                      <Icon name="arrow-up-s" className="size-3 mr-1" />
-                      {t('inlineComment.actions.showLess')}
-                    </>
-                  ) : (
-                    <>
-                      <Icon name="arrow-down-s" className="size-3 mr-1" />
-                      {t('inlineComment.actions.showMore')}
-                    </>
-                  )}
-                </Button>
-              </CollapsibleTrigger>
-            )}
-            
-            <CollapsibleContent>
-              {/* Used for animation purposes if we want to animate height */}
-            </CollapsibleContent>
-          </Collapsible>
-        </div>
-
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-6 w-6 -mr-1 text-muted-foreground hover:text-foreground"
-            >
-              <Icon name="more" className="size-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuItem onClick={onEdit}>
-              <Icon name="edit" className="size-4 mr-2" />
-              {t('inlineComment.actions.editComment')}
-            </DropdownMenuItem>
-            <DropdownMenuItem onClick={onDelete} className="text-destructive">
-              <Icon name="delete-bin" className="size-4 mr-2" />
-              {t('inlineComment.actions.deleteComment')}
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
+        <span className="min-w-0 max-w-[200px] truncate text-xs font-medium text-[var(--surface-foreground)]" title={draft.fileLabel}>
+          {draft.fileLabel}
+        </span>
+        <span className="text-xs text-[var(--surface-mutedForeground)]">•</span>
+        <span className="min-w-0 flex-1 truncate text-xs text-[var(--surface-mutedForeground)]">
+          {t('inlineComment.range.lines', { start: draft.startLine, end: draft.endLine })}
+          {draft.side ? ` (${draft.side})` : ''}
+        </span>
+        <button
+          type="button"
+          className={HEADER_ACTION_CLASS}
+          style={{ minHeight: 0, minWidth: 0 }}
+          onClick={onEdit}
+          aria-label={t('inlineComment.actions.editComment')}
+          title={t('inlineComment.actions.editComment')}
+        >
+          <Icon name="pencil" className="h-3 w-3" />
+        </button>
+        <button
+          type="button"
+          className={HEADER_ACTION_CLASS}
+          style={{ minHeight: 0, minWidth: 0 }}
+          onClick={onDelete}
+          aria-label={t('inlineComment.actions.deleteComment')}
+          title={t('inlineComment.actions.deleteComment')}
+        >
+          <Icon name="close" className="h-3 w-3" />
+        </button>
       </div>
-      </ContextMenuTrigger>
-      <ContextMenuContent>
-        <ContextMenuItem onClick={onEdit}>
-          <Icon name="edit" className="size-4 mr-2" />
-          {t('inlineComment.actions.editComment')}
-        </ContextMenuItem>
-        <ContextMenuItem onClick={onDelete} className="text-destructive focus:text-destructive">
-          <Icon name="delete-bin" className="size-4 mr-2" />
-          {t('inlineComment.actions.deleteComment')}
-        </ContextMenuItem>
-      </ContextMenuContent>
-    </ContextMenu>
+
+      <div className="px-3 py-2">
+        <Collapsible open={isOpen || !isLongContent} onOpenChange={setIsOpen}>
+          <div className={cn('whitespace-pre-wrap break-words text-sm leading-relaxed text-[var(--surface-foreground)]', !isOpen && isLongContent && 'line-clamp-3')}>
+            {draftText}
+          </div>
+
+          {isLongContent && (
+            <CollapsibleTrigger asChild>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="mt-1 h-6 w-full justify-start px-0 text-xs text-muted-foreground hover:text-foreground"
+              >
+                {isOpen ? (
+                  <>
+                    <Icon name="arrow-up-s" className="mr-1 size-3" />
+                    {t('inlineComment.actions.showLess')}
+                  </>
+                ) : (
+                  <>
+                    <Icon name="arrow-down-s" className="mr-1 size-3" />
+                    {t('inlineComment.actions.showMore')}
+                  </>
+                )}
+              </Button>
+            </CollapsibleTrigger>
+          )}
+
+          <CollapsibleContent>
+            {/* Used for animation purposes if we want to animate height */}
+          </CollapsibleContent>
+        </Collapsible>
+      </div>
+    </div>
   );
 }
diff --git a/packages/ui/src/components/comments/InlineCommentInput.tsx b/packages/ui/src/components/comments/InlineCommentInput.tsx
index 7b76b5aa..8af08eaf 100644
--- a/packages/ui/src/components/comments/InlineCommentInput.tsx
+++ b/packages/ui/src/components/comments/InlineCommentInput.tsx
@@ -1,8 +1,6 @@
 import React, { useRef, useEffect } from 'react';
-import { useOptionalThemeSystem } from '@/contexts/useThemeSystem';
-import { Button } from '@/components/ui/button';
-import { Textarea } from '@/components/ui/textarea';
 import { cn } from '@/lib/utils';
+import { Icon } from '@/components/icon/Icon';
 import { useDeviceInfo } from '@/lib/device';
 import { useI18n } from '@/lib/i18n';
 
@@ -18,6 +16,12 @@ export interface InlineCommentInputProps {
   maxWidth?: number;
 }
 
+/**
+ * The comment editor shown under selected diff/editor lines. Styled as the
+ * same pill used by chat quote comments and browser annotations: a rounded
+ * auto-growing textarea with a round attach button, and a muted context line
+ * above naming the file and range.
+ */
 export function InlineCommentInput({
   initialText = '',
   onTextChange,
@@ -30,17 +34,24 @@ export function InlineCommentInput({
   maxWidth,
 }: InlineCommentInputProps) {
   const { t } = useI18n();
-  const themeContext = useOptionalThemeSystem();
-  const currentTheme = themeContext?.currentTheme;
   const { isMobile } = useDeviceInfo();
   const [text, setText] = React.useState(initialText);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
+  void isEditing;
 
   const handleTextChange = (value: string) => {
     setText(value);
     onTextChange?.(value);
+    resizeTextarea();
   };
-  
+
+  const resizeTextarea = () => {
+    const element = textareaRef.current;
+    if (!element) return;
+    element.style.height = 'auto';
+    element.style.height = `${Math.min(element.scrollHeight, 120)}px`;
+  };
+
   // Stable range snapshot to prevent race with selection clearing
   const stableRangeRef = useRef(lineRange);
   useEffect(() => {
@@ -62,8 +73,9 @@ export function InlineCommentInput({
   useEffect(() => {
     const textarea = textareaRef.current;
     if (!textarea) return;
+    resizeTextarea();
 
-    const scrollContainer = textarea.closest('.overlay-scrollbar-container') as HTMLElement | null;
+    const scrollContainer = textarea.closest<HTMLElement>('.overlay-scrollbar-container');
     const prevScrollTop = scrollContainer?.scrollTop ?? window.scrollY;
     const prevScrollLeft = scrollContainer?.scrollLeft ?? window.scrollX;
 
@@ -100,12 +112,18 @@ export function InlineCommentInput({
     });
   }, [isMobile]);
 
+  const save = () => {
+    if (text.trim()) {
+      onSave(text, normalizeRange(stableRangeRef.current));
+    }
+  };
+
   const handleKeyDown = (e: React.KeyboardEvent) => {
+    // As the placeholder promises: Cmd/Ctrl+Enter attaches, plain Enter
+    // breaks the line, Escape cancels.
     if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
       e.preventDefault();
-      if (text.trim()) {
-        onSave(text, normalizeRange(stableRangeRef.current));
-      }
+      save();
     } else if (e.key === 'Escape') {
       e.preventDefault();
       onCancel();
@@ -115,75 +133,61 @@ export function InlineCommentInput({
   const handleSaveClick = (e: React.MouseEvent | React.TouchEvent | React.PointerEvent) => {
     // Stop propagation to prevent parent selection clearing before save
     e.stopPropagation();
-    if (text.trim()) {
-      onSave(text, normalizeRange(stableRangeRef.current));
-    }
+    save();
   };
 
   return (
     <div
       className={cn(
-        "rounded-lg border shadow-none w-full max-w-[min(100%,calc(var(--oc-context-panel-width,100vw)-var(--oc-editor-gutter-width,0px)))] overflow-hidden animate-in fade-in zoom-in-95 duration-200",
+        'w-full max-w-[min(100%,calc(var(--oc-context-panel-width,100vw)-var(--oc-editor-gutter-width,0px)))] animate-in fade-in zoom-in-95 duration-200',
         className
       )}
       style={{
-        backgroundColor: currentTheme?.colors?.surface?.elevated,
-        borderColor: currentTheme?.colors?.interactive?.border,
         maxWidth: maxWidth ? `${Math.max(200, Math.floor(maxWidth))}px` : undefined,
       }}
       data-comment-input="true"
       onPointerDown={(e) => e.stopPropagation()}
       onTouchStart={(e) => e.stopPropagation()}
     >
-      <div className="p-3">
-        {(fileLabel || lineRange) && (
-          <div className="flex items-center gap-2 text-xs font-medium text-muted-foreground mb-2">
-            {fileLabel && <span className="truncate max-w-[200px]">{fileLabel}</span>}
-            {fileLabel && lineRange && <span>•</span>}
-            {displayRange && (
-              <span>
-                {t('inlineComment.range.lines', { start: displayRange.start, end: displayRange.end })}
-              </span>
-            )}
+      <div className="oc-glass-popover rounded-xl border border-[var(--interactive-border)] shadow-[0_4px_16px_-4px_rgb(0_0_0_/_0.12)]">
+        {(fileLabel || displayRange) ? (
+          <div className="flex items-center gap-2 px-3 pt-2 text-xs font-medium text-[var(--surface-mutedForeground)] opacity-60">
+            {fileLabel ? <span className="max-w-[200px] truncate">{fileLabel}</span> : null}
+            {fileLabel && displayRange ? <span>•</span> : null}
+            {displayRange ? (
+              <span>{t('inlineComment.range.lines', { start: displayRange.start, end: displayRange.end })}</span>
+            ) : null}
           </div>
-        )}
-        
-        <Textarea
-          simple
+        ) : null}
+        <div className="flex items-end gap-2 py-1 pl-3 pr-1">
+        <textarea
           ref={textareaRef}
+          rows={1}
           value={text}
           onChange={(e) => handleTextChange(e.target.value)}
           onKeyDown={handleKeyDown}
           placeholder={isMobile ? t('inlineComment.input.placeholderShort') : t('inlineComment.input.placeholder')}
-          outerClassName="rounded-[var(--radius-xl)] bg-[var(--surface-subtle)] ring-1 ring-inset ring-border/60 focus-within:ring-2 focus-within:ring-[var(--interactive-focus-ring)]"
-          className="min-h-[80px] px-3 py-2.5 text-sm resize-y"
+          className={cn(
+            'min-w-0 flex-1 resize-none bg-transparent text-sm leading-5 text-[var(--surface-foreground)] outline-none placeholder:text-[var(--surface-mutedForeground)] placeholder:opacity-60',
+            isMobile ? 'py-1.5 text-base leading-6' : 'py-1.5'
+          )}
+          style={{ minHeight: 0, height: 'auto' }}
         />
-        
-        <div className="flex items-center justify-end gap-2 mt-3">
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={onCancel}
-            onPointerDown={(e) => e.stopPropagation()}
-            onTouchStart={(e) => e.stopPropagation()}
-            className="h-8 text-muted-foreground hover:text-foreground"
-          >
-            {t('inlineComment.actions.cancel')}
-          </Button>
-          <Button
-            size="sm"
-            onClick={handleSaveClick}
-            onPointerDown={(e) => e.stopPropagation()}
-            onTouchStart={(e) => e.stopPropagation()}
-            disabled={!text.trim()}
-            className="h-8 min-w-[80px]"
-            style={{
-              backgroundColor: currentTheme?.colors?.status?.success,
-              color: currentTheme?.colors?.status?.successForeground,
-            }}
-          >
-            {isEditing ? t('inlineComment.actions.save') : t('inlineComment.actions.comment')}
-          </Button>
+        <button
+          type="button"
+          onClick={handleSaveClick}
+          onPointerDown={(e) => e.stopPropagation()}
+          onTouchStart={(e) => e.stopPropagation()}
+          disabled={!text.trim()}
+          className={cn(
+            'mb-0.5 flex shrink-0 items-center justify-center rounded-full bg-[var(--primary-base)] text-[var(--primary-foreground)] transition-opacity duration-150 hover:opacity-90 disabled:opacity-40',
+            isMobile ? 'h-9 w-9' : 'h-8 w-8'
+          )}
+          aria-label={t('inlineComment.actions.comment')}
+          title={t('inlineComment.actions.comment')}
+        >
+          <Icon name="attachment-2" className="h-4 w-4" />
+        </button>
         </div>
       </div>
     </div>
diff --git a/packages/ui/src/components/comments/index.ts b/packages/ui/src/components/comments/index.ts
index 264f8db3..3f2dabec 100644
--- a/packages/ui/src/components/comments/index.ts
+++ b/packages/ui/src/components/comments/index.ts
@@ -4,3 +4,4 @@ export * from './useInlineCommentController';
 export * from './CodeMirrorCommentWidgets';
 export * from './PierreDiffCommentUtils';
 export * from './PierreDiffCommentOverlays';
+export * from './FilePreviewCommentMenu';
diff --git a/packages/ui/src/components/icon/sprite.ts b/packages/ui/src/components/icon/sprite.ts
index d6da37c9..f02f026d 100644
--- a/packages/ui/src/components/icon/sprite.ts
+++ b/packages/ui/src/components/icon/sprite.ts
@@ -2,6 +2,8 @@
 // Do not edit manually. Run the script to update.
 
 export const iconSpriteData = {
+  "linear": `<g transform="translate(1.5 1.5) scale(0.21)"><path fill="currentColor" d="M1.22541 61.5228c-.2225-.9485.90748-1.5459 1.59638-.857L39.3342 97.1782c.6889.6889.0915 1.8189-.857 1.5964C20.0515 94.4522 5.54779 79.9485 1.22541 61.5228ZM.00189135 46.8891c-.01764375.2833.08887215.5599.28957165.7606L52.3503 99.7085c.2007.2007.4773.3075.7606.2896 2.3692-.1476 4.6938-.46 6.9624-.9259.7645-.157 1.0301-1.0963.4782-1.6481L2.57595 39.4485c-.55186-.5519-1.49117-.2863-1.648174.4782-.465915 2.2686-.77832 4.5932-.92588465 6.9624ZM4.21093 29.7054c-.16649.3738-.08169.8106.20765 1.1l64.77602 64.776c.2894.2894.7262.3742 1.1.2077 1.7861-.7956 3.5171-1.6927 5.1855-2.684.5521-.328.6373-1.0867.1832-1.5407L8.43566 24.3367c-.45409-.4541-1.21271-.3689-1.54074.1832-.99132 1.6686-1.88843 3.3994-2.68399 5.1855ZM12.6587 18.074c-.3701-.3701-.393-.9637-.0443-1.3541C21.7795 6.45931 35.1114 0 49.9519 0 77.5927 0 100 22.4073 100 50.0481c0 14.8405-6.4593 28.1724-16.7199 37.3375-.3903.3487-.984.3258-1.3542-.0443L12.6587 18.074Z"/></g>`,
+  "cloudflare": `<g transform="translate(0.2 0.2) scale(0.18)"><path fill="currentColor" d="M87.295 89.022c.763-2.617.472-5.015-.8-6.796-1.163-1.635-3.125-2.58-5.488-2.689l-44.737-.581c-.291 0-.545-.145-.691-.363s-.182-.509-.109-.8c.145-.436.581-.763 1.054-.8l45.137-.581c5.342-.254 11.157-4.579 13.192-9.885l2.58-6.723c.109-.291.145-.581.073-.872-2.906-13.158-14.644-22.97-28.672-22.97-12.938 0-23.913 8.359-27.838 19.952a13.35 13.35 0 0 0-9.267-2.58c-6.215.618-11.193 5.597-11.811 11.811-.145 1.599-.036 3.162.327 4.615C10.104 70.051 2 78.337 2 88.549c0 .909.073 1.817.182 2.726a.895.895 0 0 0 .872.763h82.57c.472 0 .909-.327 1.054-.8l.617-2.216z"/><path fill="currentColor" d="M101.542 60.275c-.4 0-.836 0-1.236.036-.291 0-.545.218-.654.509l-1.744 6.069c-.763 2.617-.472 5.015.8 6.796 1.163 1.635 3.125 2.58 5.488 2.689l9.522.581c.291 0 .545.145.691.363.145.218.182.545.109.8-.145.436-.581.763-1.054.8l-9.924.582c-5.379.254-11.157 4.579-13.192 9.885l-.727 1.853c-.145.363.109.727.509.727h34.089c.4 0 .763-.254.872-.654.581-2.108.909-4.325.909-6.614 0-13.447-10.975-24.422-24.458-24.422"/></g>`,
   "add": `<path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z" fill="currentColor"/>`,
   "add-circle": `<path d="M11 11V7H13V11H17V13H13V17H11V13H7V11H11ZM12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z" fill="currentColor"/>`,
   "ai-agent": `<path d="M12 2C17.5228 2 22 6.47715 22 12C22 14.7096 20.9205 17.1697 19.1709 18.9697C17.3551 20.8376 14.8124 22 12 22C9.18756 22 6.64488 20.8376 4.8291 18.9697C3.07949 17.1697 2 14.7096 2 12C2 6.47715 6.47715 2 12 2ZM12 16C10.0022 16 8.20124 16.8375 6.9248 18.1816C8.30642 19.3175 10.0724 20 12 20C13.9274 20 15.6927 19.3173 17.0742 18.1816C15.7978 16.8377 13.9975 16 12 16ZM12 4C7.58172 4 4 7.58172 4 12C4 13.7701 4.57462 15.4044 5.54785 16.7295C7.1822 15.0483 9.46797 14 12 14C14.5318 14 16.8169 15.0485 18.4512 16.7295C19.4246 15.4043 20 13.7703 20 12C20 7.58172 16.4183 4 12 4ZM11.5293 5.31934C11.7058 4.89329 12.2943 4.89329 12.4707 5.31934L12.7236 5.93066C13.1556 6.97343 13.9615 7.80622 14.9746 8.25684L15.6924 8.5752C16.1029 8.75796 16.1028 9.35627 15.6924 9.53906L14.9326 9.87695C13.9448 10.3163 13.1534 11.1193 12.7139 12.1279L12.4668 12.6934C12.2864 13.1074 11.7137 13.1074 11.5332 12.6934L11.2871 12.1279C10.8476 11.1193 10.0552 10.3163 9.06738 9.87695L8.30762 9.53906C7.89719 9.35628 7.89717 8.75795 8.30762 8.5752L9.02539 8.25684C10.0385 7.80623 10.8445 6.97345 11.2764 5.93066L11.5293 5.31934Z" fill="currentColor"/>`,
diff --git a/packages/ui/src/components/layout/Header.tsx b/packages/ui/src/components/layout/Header.tsx
index cfc8f555..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();
@@ -511,7 +450,8 @@ export const Header: React.FC<HeaderProps> = ({
   const currentGlobalSession = useGlobalSessionsStore(useShallow(React.useCallback(
     (state): HeaderSessionSnapshot | null => {
       if (!currentSessionId) return null;
-      const session = state.activeSessions.find((candidate) => candidate.id === currentSessionId);
+       const session = [...state.activeSessions, ...state.archivedSessions]
+         .find((candidate) => candidate.id === currentSessionId);
       if (!session) return null;
       const record = session as typeof session & { directory?: string | null; slug?: string | null };
       return {
@@ -547,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);
@@ -638,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);
@@ -653,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.
@@ -682,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
@@ -816,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
@@ -1112,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;
@@ -1131,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();
@@ -1152,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'), {
@@ -1174,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) {
@@ -1245,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) {
@@ -1256,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;
@@ -1269,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
@@ -1329,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;
     }
 
@@ -1357,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,
@@ -1403,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', {
@@ -1495,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
@@ -1700,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.
@@ -1750,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);
@@ -1821,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" />
@@ -1906,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}
@@ -1948,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">
@@ -1966,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();
@@ -2039,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();
                     }
                   }}
@@ -2051,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 ? (
@@ -2087,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 ? (
@@ -2131,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
@@ -2172,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 (
     <>
@@ -2588,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>
@@ -2605,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..7e392460 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';
@@ -27,27 +23,22 @@ import { useUpdatePolling } from '@/hooks/useUpdatePolling';
 import { useDeviceInfo } from '@/lib/device';
 import { cn } from '@/lib/utils';
 import { lazyWithChunkRecovery } from '@/lib/chunkLoadRecovery';
+import { useSessionListSync } from '@/components/session/sidebar/list/useSessionListSync';
 
 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 = () => {
+    useSessionListSync({ isVSCode: false });
     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 +58,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 +72,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 +87,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 5ccf8a46..59dec89c 100644
--- a/packages/ui/src/components/layout/VSCodeLayout.tsx
+++ b/packages/ui/src/components/layout/VSCodeLayout.tsx
@@ -41,6 +41,7 @@ import type { Session } from '@opencode-ai/sdk/v2';
 import type { UsageWindow } from '@/types';
 import type { SessionContextUsage } from '@/stores/types/sessionTypes';
 import { useUIStore, type TimeFormatPreference } from '@/stores/useUIStore';
+import { useSessionListSync } from '@/components/session/sidebar/list/useSessionListSync';
 
 const SettingsView = lazyWithChunkRecovery(() => import('@/components/views/SettingsView').then(m => ({ default: m.SettingsView })));
 
@@ -55,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;
 
@@ -526,8 +527,11 @@ export const VSCodeLayout: React.FC = () => {
     }
   }, [usesExpandedLayout, currentView, viewMode]);
 
+  useSessionListSync({ isVSCode: true });
+
   return (
-    <div ref={containerRef} className="h-full w-full bg-background text-foreground flex flex-col">
+    <>
+      <div ref={containerRef} className="h-full w-full bg-background text-foreground flex flex-col">
       {viewMode === 'editor' ? (
         // Editor mode: just chat, no sidebar
         <div className="flex flex-col h-full">
@@ -639,7 +643,8 @@ export const VSCodeLayout: React.FC = () => {
         </>
       )}
       <SessionDialogs />
-    </div>
+      </div>
+    </>
   );
 };
 
diff --git a/packages/ui/src/components/model-picker/ModelPickerList.tsx b/packages/ui/src/components/model-picker/ModelPickerList.tsx
index 132f8fa2..6d09dfc1 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 };
     })
@@ -544,8 +545,9 @@ export const ModelPickerList: React.FC<ModelPickerListProps> = ({
       ? Math.min(STICKY_FADE_MIN_SIZE + scroller.scrollTop, STICKY_FADE_MAX_SIZE)
       : 0;
     stickyFadeSizeRef.current = fadeSize;
-    scroller.style.setProperty('--scroll-shadow-top-size', `${fadeSize}px`);
-    scroller.style.setProperty(
+    const fadeRoot = scroller.closest<HTMLElement>('.oc-sticky-fade-root');
+    fadeRoot?.style.setProperty('--scroll-shadow-top-size', `${fadeSize}px`);
+    fadeRoot?.style.setProperty(
       '--scroll-shadow-top-clear-size',
       `${Math.min(Math.max(fadeSize - 8, 0), STICKY_FADE_CLEAR_MAX_SIZE)}px`,
     );
@@ -875,24 +877,23 @@ export const ModelPickerList: React.FC<ModelPickerListProps> = ({
 
       <div
         className="oc-sticky-fade-root relative flex min-h-0 flex-1"
+        // SAFETY: these custom properties configure the viewport-owned edge fade.
+        style={stickyHeaders ? { '--scroll-shadow-top-size': '0px' } as React.CSSProperties : undefined}
         onPointerDownCapture={stickyHeaders ? blockStickyFadeInteraction : undefined}
         onClickCapture={stickyHeaders ? blockStickyFadeInteraction : undefined}
         onContextMenuCapture={stickyHeaders ? blockStickyFadeInteraction : undefined}
       >
-      <ScrollableOverlay
-        ref={scrollRef}
-        useScrollShadow={stickyHeaders}
-        hideBottomScrollShadow
-        scrollShadowSize={12}
-        outerClassName={maxHeightClassName}
-        className="oc-sticky-fade-scroller overlay-scrollbar-target--no-gutter"
-        style={{
-          ...(stickyHeaders ? { '--scroll-shadow-top-size': '0px' } as React.CSSProperties : {}),
-          ...maxHeightStyle,
-        }}
-        onScroll={stickyHeaders ? (event) => syncStickyFade(event.currentTarget) : undefined}
-      >
-        <div className="px-1">
+        <ScrollableOverlay
+          ref={scrollRef}
+          useScrollShadow={stickyHeaders}
+          hideBottomScrollShadow
+          scrollShadowSize={12}
+          outerClassName={maxHeightClassName}
+          className="overlay-scrollbar-target--no-gutter"
+          style={maxHeightStyle}
+          onScroll={stickyHeaders ? (event) => syncStickyFade(event.currentTarget) : undefined}
+        >
+          <div className="px-1">
           {includeNotSelected ? (
             <>
               <button
@@ -963,16 +964,16 @@ export const ModelPickerList: React.FC<ModelPickerListProps> = ({
               </div>
             ))
           )}
-        </div>
-      </ScrollableOverlay>
-      {stickyHeaders && leadingSectionKey ? (
-        <div
-          className="oc-sticky-fade-overlay pointer-events-none absolute inset-x-0 top-0 z-30 flex items-center gap-2 px-3 py-1.5 typography-micro font-semibold uppercase tracking-wider text-muted-foreground"
-          aria-hidden="true"
-        >
-          {renderSectionIdentity(leadingSectionKey)}
-        </div>
-      ) : null}
+          </div>
+        </ScrollableOverlay>
+        {stickyHeaders && leadingSectionKey ? (
+          <div
+            className="oc-sticky-fade-overlay pointer-events-none absolute inset-x-0 top-0 z-30 flex items-center gap-2 px-3 py-1.5 typography-micro font-semibold uppercase tracking-wider text-muted-foreground"
+            aria-hidden="true"
+          >
+            {renderSectionIdentity(leadingSectionKey)}
+          </div>
+        ) : null}
       </div>
 
       <div className="px-3 pt-1 pb-1.5 border-t border-border/40 typography-micro text-muted-foreground">
diff --git a/packages/ui/src/components/multirun/ModelMultiSelect.tsx b/packages/ui/src/components/multirun/ModelMultiSelect.tsx
index dcc62dfb..faeb131c 100644
--- a/packages/ui/src/components/multirun/ModelMultiSelect.tsx
+++ b/packages/ui/src/components/multirun/ModelMultiSelect.tsx
@@ -152,7 +152,7 @@ export const ModelMultiSelect: React.FC<ModelMultiSelectProps> = ({
     // Find the nearest dialog or overflow ancestor to constrain within
     let container: HTMLElement | null = triggerRef.current.parentElement;
     while (container) {
-      if (container.getAttribute('role') === 'dialog' || container.hasAttribute('data-scroll-shadow')) {
+      if (container.matches('[role="dialog"], [data-scroll-shadow-scroller]')) {
         break;
       }
       const style = getComputedStyle(container);
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/SessionFolderItem.tsx b/packages/ui/src/components/session/SessionFolderItem.tsx
index 21f5078c..0d0bcebd 100644
--- a/packages/ui/src/components/session/SessionFolderItem.tsx
+++ b/packages/ui/src/components/session/SessionFolderItem.tsx
@@ -4,9 +4,8 @@ import type { SessionFolder } from '@/stores/useSessionFoldersStore';
 import { useI18n } from '@/lib/i18n';
 import { Icon } from "@/components/icon/Icon";
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
-import type { SessionNodeChildRenderExtras, SessionNodeRenderExtras } from './sidebar/sessionNodeItemUtils';
-import { CollapsedActivityIndicator } from './sidebar/collapsedActivityIndicator';
-import type { CollapsedActivityState } from './sidebar/collapsedActivityState';
+import { CollapsedActivityIndicator } from './sidebar/sessions/collapsedActivityIndicator';
+import type { CollapsedActivityState } from './sidebar/sessions/collapsedActivityState';
 
 interface SessionFolderItemProps<TSessionNode> {
   folder: SessionFolder;
@@ -24,23 +23,7 @@ interface SessionFolderItemProps<TSessionNode> {
   onToggle: () => void;
   onRename: (name: string) => void;
   onDelete: () => void;
-  renderSessionNode: (
-    node: TSessionNode,
-    depth?: number,
-    groupDir?: string | null,
-    projectId?: string | null,
-    archivedBucket?: boolean,
-    secondaryMeta?: { projectLabel?: string | null; branchLabel?: string | null } | null,
-    renderContext?: 'project' | 'recent',
-    renderExtras?: SessionNodeChildRenderExtras,
-  ) => React.ReactNode;
-  /**
-   * Returns the precomputed per-row render extras for a given node. The
-   * group precomputes subtree-contains lookups once, then resolves a
-   * per-node structure key here so SessionNodeItem's React.memo comparator
-   * can answer with a single string compare instead of a recursive walk.
-   */
-  getRenderExtras?: (node: TSessionNode) => SessionNodeRenderExtras<TSessionNode> | undefined;
+  children?: React.ReactNode;
   groupDirectory?: string | null;
   projectId?: string | null;
   mobileVariant?: boolean;
@@ -74,10 +57,7 @@ const SessionFolderItemBase = <TSessionNode,>({
   onToggle,
   onRename,
   onDelete,
-  renderSessionNode,
-  getRenderExtras,
-  groupDirectory,
-  projectId,
+  children,
   mobileVariant = false,
   alwaysShowActions = mobileVariant,
   isRenaming = false,
@@ -97,6 +77,7 @@ const SessionFolderItemBase = <TSessionNode,>({
   const [localDraft, setLocalDraft] = React.useState('');
   const inputRef = React.useRef<HTMLInputElement | null>(null);
 
+
   const renaming = isRenaming || localRenaming;
   const draft = isRenaming ? renameDraft : localDraft;
 
@@ -167,6 +148,7 @@ const SessionFolderItemBase = <TSessionNode,>({
           isDropTarget && 'bg-primary/10 ring-1 ring-inset ring-primary/30',
         )}
         onClick={renaming ? undefined : (event) => {
+          // SAFETY: this handler is attached to the div rendered directly above.
           (event.currentTarget as HTMLElement).blur();
           onToggle();
         }}
@@ -346,11 +328,7 @@ const SessionFolderItemBase = <TSessionNode,>({
           {subFolderItems}
           {/* Then sessions */}
           {sessions.length > 0 ? (
-            <div className="pl-3">
-              {sessions.map((node) =>
-                renderSessionNode(node, 0, groupDirectory ?? null, projectId ?? null, archivedBucket, undefined, 'project', getRenderExtras?.(node)),
-              )}
-            </div>
+            children
           ) : !subFolderItems ? (
             <div className="py-1 pl-1.5 text-left typography-micro text-muted-foreground/70">
               {t('sessions.sidebar.folderItem.emptyFolder')}
@@ -362,6 +340,9 @@ const SessionFolderItemBase = <TSessionNode,>({
   );
 };
 
-export const SessionFolderItem = React.memo(SessionFolderItemBase) as <TSessionNode>(
+export const SessionFolderItem = (
+  /* SAFETY: React.memo preserves the generic component's props and return type. */
+  React.memo(SessionFolderItemBase) as <TSessionNode>(
   props: SessionFolderItemProps<TSessionNode>,
-) => React.ReactElement;
+  ) => React.ReactElement
+);
diff --git a/packages/ui/src/components/session/SessionSidebar.tsx b/packages/ui/src/components/session/SessionSidebar.tsx
index 56ddc2d1..9a7361bd 100644
--- a/packages/ui/src/components/session/SessionSidebar.tsx
+++ b/packages/ui/src/components/session/SessionSidebar.tsx
@@ -1,52 +1,28 @@
 import React from 'react';
-import { getChatsRootForHome, getChatsRootFromDirectory, isChatDirectoryForHome, isChatDirectoryPath } from '@/lib/chatDirectories';
-import { isBtwSession } from '@/lib/sessionBtwMetadata';
-import { mergeSidebarSessionSources } from './sidebar/sidebarSessionSources';
-import type { Session } from '@opencode-ai/sdk/v2';
 import { toast } from '@/components/ui';
 import { useI18n } from '@/lib/i18n';
 import { useDeviceInfo } from '@/lib/device';
-import { isDesktopShell } from '@/lib/desktop';
+import { isDesktopShell, isVSCodeRuntime } from '@/lib/desktop';
 import { sessionEvents } from '@/lib/sessionEvents';
-import { formatDirectoryName, cn } from '@/lib/utils';
+import { cn } from '@/lib/utils';
 import { useSessionUIStore } from '@/sync/session-ui-store';
-import { useChildStoreManager } from '@/sync/sync-context';
-import { getAllSyncSessionMap } from '@/sync/sync-refs';
 import { useDirectoryStore } from '@/stores/useDirectoryStore';
-import { useSync } from '@/sync/use-sync';
-import { SessionPrefetchEffect } from './sidebar/hooks/useSessionPrefetch';
 import { useProjectsStore } from '@/stores/useProjectsStore';
 import { useUIStore } from '@/stores/useUIStore';
 import { getDeferredSafeStorage } from '@/stores/utils/safeStorage';
 import { useGitStore, useGitAllBranches, useGitRepoStatusMap } from '@/stores/useGitStore';
-import { isVSCodeRuntime } from '@/lib/desktop';
 import { TooltipProvider } from '@/components/ui/tooltip';
 import { NewWorktreeDialog } from './NewWorktreeDialog';
-import { useSessionFoldersStore } from '@/stores/useSessionFoldersStore';
 import { useDebouncedValue } from '@/hooks/useDebouncedValue';
-import { useArchivedAutoFolders } from './sidebar/hooks/useArchivedAutoFolders';
-import { useGroupOrdering } from './sidebar/hooks/useGroupOrdering';
-import { useSessionSidebarSections } from './sidebar/hooks/useSessionSidebarSections';
-import { ProjectSessionSelectionEffect } from './sidebar/hooks/useProjectSessionSelection';
-import { useSessionGrouping } from './sidebar/hooks/useSessionGrouping';
-import { useSessionSearchEffects } from './sidebar/hooks/useSessionSearchEffects';
-import { useSessionActions } from './sidebar/hooks/useSessionActions';
-import { useSidebarPersistence } from './sidebar/hooks/useSidebarPersistence';
-import { useProjectRepoStatus } from './sidebar/hooks/useProjectRepoStatus';
-import { useProjectSessionLists } from './sidebar/hooks/useProjectSessionLists';
-import { useAuthoritativeSessionCleanup } from './sidebar/hooks/useAuthoritativeSessionCleanup';
-import { createSessionOwnershipIndex } from './sidebar/sessionOwnership';
-import { useStickyProjectHeaders } from './sidebar/hooks/useStickyProjectHeaders';
+import { useSessionSearchEffects } from './sidebar/shell/useSessionSearchEffects';
+import { useSessionProjectViewState } from './sidebar/projects/useSessionProjectViewState';
+import { useProjectRepoStatus } from './sidebar/projects/useProjectRepoStatus';
 import { ProjectEditDialog } from '@/components/layout/ProjectEditDialog';
 import { UpdateDialog } from '@/components/ui/UpdateDialog';
-import { SessionGroupSection } from './sidebar/SessionGroupSection';
-import { SidebarHeader } from './sidebar/SidebarHeader';
-import { SidebarNav } from './sidebar/SidebarNav';
-import { SidebarActivitySections, type ActivityItem } from './sidebar/SidebarActivitySections';
-import { SidebarFooter } from './sidebar/SidebarFooter';
-import { SidebarProjectsList } from './sidebar/SidebarProjectsList';
-import { SessionNodeItem } from './sidebar/SessionNodeItem';
-import type { SessionNodeRenderExtras } from './sidebar/sessionNodeItemUtils';
+import { SidebarHeader } from './sidebar/shell/SidebarHeader';
+import { SidebarNav } from './sidebar/shell/SidebarNav';
+import { SidebarFooter } from './sidebar/shell/SidebarFooter';
+import { SessionProjectCollection } from './sidebar/list/SessionProjectCollection';
 import { useUpdateStore } from '@/stores/useUpdateStore';
 import { useShallow } from 'zustand/react/shallow';
 import {
@@ -55,110 +31,19 @@ import {
   worktreeMapsEqual,
 } from '@/lib/worktrees/worktreeManager';
 import { checkIsGitRepository } from '@/lib/gitApi';
-import type { WorktreeMetadata } from '@/types/worktree';
-import type { SortableDragHandleProps } from './sidebar/sortableItems';
-import {
-  BulkSessionDeleteConfirmDialog,
-  FolderDeleteConfirmDialog,
-  SessionDeleteConfirmDialog,
-  type BulkDeleteSessionsConfirmState,
-  type DeleteFolderConfirmState,
-  type DeleteSessionConfirmState,
-} from './sidebar/ConfirmDialogs';
-import { BulkActionBar } from './sidebar/BulkActionBar';
-import { useSidebarBulkActions } from './sidebar/hooks/useSidebarBulkActions';
 import { useSessionDisplayStore } from '@/stores/useSessionDisplayStore';
-import { type SessionGroup, type SessionNode } from './sidebar/types';
-import {
-  deriveRecentSessions,
-} from './sidebar/activitySections';
-import { useSessionPinnedStore } from '@/stores/useSessionPinnedStore';
-import {
-  formatProjectLabel,
-  normalizePath,
-  selectExpandedParentKeysForContext,
-  toggleExpandedParentKey,
-} from './sidebar/utils';
-import {
-  compareSessionsByLifecycleOrder,
-  EMPTY_SESSION_ORDER_RANKS,
-  orderSessionsByLifecycleScopes,
-  useSessionOrderingStore,
-} from '@/sync/session-ordering';
-import { useGlobalSessionStatusStore } from '@/sync/global-session-status';
-import {
-  refreshGlobalSessions,
-  refreshGlobalSessionsForDirectories,
-  getSessionStructuralSignature,
-  resolveGlobalSessionDirectory,
-  useGlobalSessionsStore,
-} from '@/stores/useGlobalSessionsStore';
-import { useGitHubAuthStore } from '@/stores/useGitHubAuthStore';
-import { useNotificationStore } from '@/sync/notification-store';
-import { useRuntimeAPIs } from '@/hooks/useRuntimeAPIs';
-import { getGitHubPrStatusKey, useGitHubPrStatusStore } from '@/stores/useGitHubPrStatusStore';
-import { subscribeOpenchamberEvents } from '@/lib/openchamberEvents';
-import { buildSessionBootstrapDemands } from './sidebar/sessionBootstrapDemands';
-import { recordWorktreesSeen } from './sidebar/worktreeFirstSeen';
+import { normalizePath } from './sidebar/utils';
+import { recordWorktreesSeen } from './sidebar/projects/worktreeFirstSeen';
 import { getRuntimeKey } from '@/lib/runtime-switch';
 import { streamPerfCount, streamPerfMark } from '@/stores/utils/streamDebug';
 import { runBackgroundNetworkTask } from '@/lib/background-network';
-import { isCapacitorApp } from '@/lib/platform';
+import { buildKnownSessionDirectories } from './sidebar/list/sessionListDirectories';
+import { z } from 'zod';
+import { subscribeOpenchamberEvents } from '@/lib/openchamberEvents';
 
-const PROJECT_COLLAPSE_STORAGE_KEY = 'oc.sessions.projectCollapse';
-const GROUP_ORDER_STORAGE_KEY = 'oc.sessions.groupOrder';
-const GROUP_COLLAPSE_STORAGE_KEY = 'oc.sessions.groupCollapse';
 const PROJECT_ACTIVE_SESSION_STORAGE_KEY = 'oc.sessions.activeSessionByProject';
-// v3 holds composite "${renderContext}:${active|archived}:${sessionId}"
-// entries so the same session in different render contexts (e.g. "Recent"
-// and a project's root) has independent expand state. Older expansion state
-// mixed contexts and is intentionally not migrated.
-const SESSION_EXPANDED_STORAGE_KEY = 'oc.sessions.expandedParents.v3';
-
-const buildKnownSessionDirectories = (
-  projects: Array<{ path: string }>,
-  availableWorktreesByProject: Map<string, WorktreeMetadata[]>,
-  options?: { includeWorktrees?: boolean },
-): Set<string> => {
-  const directories = new Set<string>();
-  for (const project of projects) {
-    const normalized = normalizePath(project.path)?.toLowerCase();
-    if (normalized) directories.add(normalized);
-  }
-  if (options?.includeWorktrees === false) {
-    return directories;
-  }
-  for (const worktrees of availableWorktreesByProject.values()) {
-    for (const worktree of worktrees) {
-      const normalized = normalizePath(worktree.path)?.toLowerCase();
-      if (normalized) directories.add(normalized);
-    }
-  }
-  return directories;
-};
-
-const isKnownActiveSessionDirectory = (
-  session: Session,
-  knownDirectories: Set<string>,
-  options?: { allowUnknownDirectory?: boolean; allowEmptyDirectorySet?: boolean },
-): boolean => {
-  if (session.time?.archived) return true;
-  const directory = normalizePath(resolveGlobalSessionDirectory(session))?.toLowerCase();
-  if (!directory) return options?.allowUnknownDirectory ?? true;
-  if (knownDirectories.size === 0) return options?.allowEmptyDirectorySet ?? true;
-  return knownDirectories.has(directory);
-};
-
-const SIDEBAR_PR_NO_PR_RETRY_MS = 5 * 60_000;
-
-const EMPTY_SUBTREE_SET: Set<string> = new Set();
 const EMPTY_STRING_ARRAY: string[] = [];
-
-const useStableRenderCallback = <Args extends unknown[], Return>(handler: (...args: Args) => Return): ((...args: Args) => Return) => {
-  const handlerRef = React.useRef(handler);
-  handlerRef.current = handler;
-  return React.useCallback((...args: Args) => handlerRef.current(...args), []);
-};
+const activeSessionByProjectSchema = z.record(z.string(), z.string().min(1).catch(''));
 
 interface SessionSidebarProps {
   isVisible?: boolean;
@@ -169,106 +54,6 @@ interface SessionSidebarProps {
   showOnlyMainWorkspace?: boolean;
 }
 
-const SidebarBootstrapDemandEffect: React.FC<{
-  owner: string;
-  childStores: ReturnType<typeof useChildStoreManager>;
-  projectSections: Parameters<typeof buildSessionBootstrapDemands>[0]['projectSections'];
-  activeProjectId: string | null;
-  collapsedProjects: ReadonlySet<string>;
-  collapsedGroups: ReadonlySet<string>;
-  currentDirectory: string | null;
-}> = ({
-  owner,
-  childStores,
-  projectSections,
-  activeProjectId,
-  collapsedProjects,
-  collapsedGroups,
-  currentDirectory,
-}) => {
-  const currentSessionDirectory = useSessionUIStore((state) => state.currentSessionDirectory);
-
-  React.useEffect(() => {
-    childStores.setBootstrapDemand(owner, buildSessionBootstrapDemands({
-      projectSections,
-      activeProjectId,
-      collapsedProjects,
-      collapsedGroups,
-      currentDirectory,
-      currentSessionDirectory,
-    }));
-  }, [
-    activeProjectId,
-    childStores,
-    collapsedGroups,
-    collapsedProjects,
-    currentDirectory,
-    currentSessionDirectory,
-    owner,
-    projectSections,
-  ]);
-
-  React.useEffect(
-    () => () => childStores.clearBootstrapDemand(owner),
-    [childStores, owner],
-  );
-
-  return null;
-};
-
-// Aggregated activity/attention dot for a collapsed project header. Only
-// mounted while the project is collapsed, so the per-status-event scans stay
-// rare and bounded by the project's directory count.
-const ProjectAggregateStatusIndicator: React.FC<{ directories: Array<string | null> }> = ({ directories }) => {
-  const { t } = useI18n();
-  const directorySet = React.useMemo(() => {
-    const set = new Set<string>();
-    directories.forEach((directory) => {
-      const normalized = normalizePath(directory)?.toLowerCase();
-      if (normalized) set.add(normalized);
-    });
-    return set;
-  }, [directories]);
-  const hasBusySession = useGlobalSessionStatusStore(React.useCallback((state) => {
-    for (const entry of state.statusById.values()) {
-      if (entry.status.type !== 'busy' && entry.status.type !== 'retry') continue;
-      const directory = normalizePath(entry.directory)?.toLowerCase();
-      if (directory && directorySet.has(directory)) return true;
-    }
-    return false;
-  }, [directorySet]));
-  const hasUnseenNotification = useNotificationStore(React.useCallback((state) => {
-    for (const [directory, count] of Object.entries(state.index.project.unseenCount)) {
-      if (!count) continue;
-      const normalized = normalizePath(directory)?.toLowerCase();
-      if (normalized && directorySet.has(normalized)) return true;
-    }
-    return false;
-  }, [directorySet]));
-
-  // Aggregate header: dot only. A collapsed project can hold several running
-  // turns, so a single elapsed counter would have nothing to count.
-  if (hasBusySession) {
-    return (
-      <span
-        className="h-1.5 w-1.5 rounded-full bg-primary"
-        aria-label={t('sessions.sidebar.session.status.active')}
-        title={t('sessions.sidebar.session.status.active')}
-      />
-    );
-  }
-  if (hasUnseenNotification) {
-    return (
-      <span
-        className="h-1.5 w-1.5 rounded-full bg-[var(--status-info)]"
-        aria-label={t('sessions.sidebar.session.status.unread')}
-        title={t('sessions.sidebar.session.status.unread')}
-      />
-    );
-  }
-  return null;
-};
-
 const SessionSidebarComponent: React.FC<SessionSidebarProps> = ({
   isVisible = true,
   mobileVariant = false,
@@ -286,91 +71,29 @@ const SessionSidebarComponent: React.FC<SessionSidebarProps> = ({
   const [sessionSearchQuery, setSessionSearchQuery] = React.useState('');
   const sessionSearchContainerRef = React.useRef<HTMLDivElement | null>(null);
   const sessionSearchInputRef = React.useRef<HTMLInputElement | null>(null);
-  const [editingId, setEditingId] = React.useState<string | null>(null);
-  const [editTitle, setEditTitle] = React.useState('');
   const [editingProjectDialogId, setEditingProjectDialogId] = React.useState<string | null>(null);
-  const [expandedParents, setExpandedParents] = React.useState<Set<string>>(new Set());
   const safeStorage = React.useMemo(() => getDeferredSafeStorage(), []);
-  const [collapsedProjects, setCollapsedProjects] = React.useState<Set<string>>(new Set());
-
   const [projectRepoStatus, setProjectRepoStatus] = React.useState<Map<string, boolean | null>>(new Map());
-  const [visibleSessionCountByGroup, setVisibleSessionCountByGroup] = React.useState<Map<string, number>>(new Map());
   const newWorktreeDialogOpen = useUIStore((state) => state.isNewWorktreeDialogOpen);
   const setNewWorktreeDialogOpen = useUIStore((state) => state.setNewWorktreeDialogOpen);
   const [updateDialogOpen, setUpdateDialogOpen] = React.useState(false);
-  const [openSidebarMenuKey, setOpenSidebarMenuKey] = React.useState<string | null>(null);
-  const [renamingFolderId, setRenamingFolderId] = React.useState<string | null>(null);
-  const [renameFolderDraft, setRenameFolderDraft] = React.useState('');
-  const [deleteSessionConfirm, setDeleteSessionConfirm] = React.useState<DeleteSessionConfirmState>(null);
-  const [deleteFolderConfirm, setDeleteFolderConfirm] = React.useState<DeleteFolderConfirmState>(null);
-  const [bulkDeleteConfirm, setBulkDeleteConfirm] = React.useState<BulkDeleteSessionsConfirmState>(null);
-  const pinnedSessionIds = useSessionPinnedStore((state) => state.ids);
-  const sessionOrderRanks = useSessionOrderingStore(React.useCallback(
-    (state) => isVisible ? state.rankById : EMPTY_SESSION_ORDER_RANKS,
-    [isVisible],
-  ));
-  const activeSessionIds = useGlobalSessionStatusStore(useShallow(
-    (state) => isVisible ? [...state.statusById.keys()].sort() : EMPTY_STRING_ARRAY,
-  ));
-  const activeSessionIdSet = React.useMemo(() => new Set(activeSessionIds), [activeSessionIds]);
-  const unreadSessionIds = useNotificationStore(useShallow(
-    (state) => isVisible
-      ? Object.entries(state.index.session.unseenCount)
-        .filter(([, count]) => count > 0)
-        .map(([sessionId]) => sessionId)
-        .sort()
-      : EMPTY_STRING_ARRAY,
-  ));
-  const unreadSessionIdSet = React.useMemo(() => new Set(unreadSessionIds), [unreadSessionIds]);
-  const togglePinnedSession = useSessionPinnedStore((state) => state.toggle);
-  const [collapsedGroups, setCollapsedGroups] = React.useState<Set<string>>(() => {
-    try {
-      const raw = getDeferredSafeStorage().getItem(GROUP_COLLAPSE_STORAGE_KEY);
-      if (!raw) {
-        return new Set();
-      }
-      const parsed = JSON.parse(raw) as string[];
-      return new Set(Array.isArray(parsed) ? parsed.filter((item) => typeof item === 'string') : []);
-    } catch {
-      return new Set();
-    }
-  });
-  const [groupOrderByProject, setGroupOrderByProject] = React.useState<Map<string, string[]>>(() => {
-    try {
-      const raw = getDeferredSafeStorage().getItem(GROUP_ORDER_STORAGE_KEY);
-      if (!raw) {
-        return new Map();
-      }
-      const parsed = JSON.parse(raw) as Record<string, string[]>;
-      const next = new Map<string, string[]>();
-      Object.entries(parsed).forEach(([projectId, order]) => {
-        if (Array.isArray(order)) {
-          next.set(projectId, order.filter((item) => typeof item === 'string'));
-        }
-      });
-      return next;
-    } catch {
-      return new Map();
-    }
-  });
   const initialActiveSessionByProject = React.useMemo<Map<string, string>>(() => {
     try {
-      const raw = getDeferredSafeStorage().getItem(PROJECT_ACTIVE_SESSION_STORAGE_KEY);
+      const raw = safeStorage.getItem(PROJECT_ACTIVE_SESSION_STORAGE_KEY);
       if (!raw) {
         return new Map();
       }
-      const parsed = JSON.parse(raw) as Record<string, string>;
+      const parsed = activeSessionByProjectSchema.safeParse(JSON.parse(raw));
+      if (!parsed.success) return new Map();
       const next = new Map<string, string>();
-      Object.entries(parsed).forEach(([projectId, sessionId]) => {
-        if (typeof sessionId === 'string' && sessionId.length > 0) {
-          next.set(projectId, sessionId);
-        }
+      Object.entries(parsed.data).forEach(([projectId, sessionId]) => {
+        if (sessionId) next.set(projectId, sessionId);
       });
       return next;
     } catch {
       return new Map();
     }
-  }, []);
+  }, [safeStorage]);
   const persistActiveSessionByProject = React.useCallback((value: Map<string, string>) => {
     try {
       safeStorage.setItem(PROJECT_ACTIVE_SESSION_STORAGE_KEY, JSON.stringify(Object.fromEntries(value.entries())));
@@ -378,11 +101,8 @@ const SessionSidebarComponent: React.FC<SessionSidebarProps> = ({
   }, [safeStorage]);
 
   const [projectRootBranches, setProjectRootBranches] = React.useState<Map<string, string>>(new Map());
-  const projectHeaderSentinelRefs = React.useRef<Map<string, HTMLDivElement | null>>(new Map());
-  const ignoreIntersectionUntil = React.useRef<number>(0);
 
   const homeDirectory = useDirectoryStore((state) => state.homeDirectory);
-  const currentDirectory = useDirectoryStore((state) => state.currentDirectory);
 
   const projects = useProjectsStore((state) => state.projects);
   const activeProjectId = useProjectsStore((state) => state.activeProjectId);
@@ -391,8 +111,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);
   const setAboutDialogOpen = useUIStore((state) => state.setAboutDialogOpen);
@@ -402,8 +120,6 @@ const SessionSidebarComponent: React.FC<SessionSidebarProps> = ({
   const setWorktreesPageProjectId = useUIStore((state) => state.setWorktreesPageProjectId);
   const openMultiRunLauncher = useUIStore((state) => state.openMultiRunLauncher);
   const notifyOnSubtasks = useUIStore((state) => state.notifyOnSubtasks);
-  const showDeletionDialog = useUIStore((state) => state.showDeletionDialog);
-  const setShowDeletionDialog = useUIStore((state) => state.setShowDeletionDialog);
 
   const debouncedSessionSearchQuery = useDebouncedValue(sessionSearchQuery, 120);
   const normalizedSessionSearchQuery = React.useMemo(
@@ -413,19 +129,6 @@ const SessionSidebarComponent: React.FC<SessionSidebarProps> = ({
 
   const hasSessionSearchQuery = normalizedSessionSearchQuery.length > 0;
 
-  // Session Folders store
-  const collapsedFolderIds = useSessionFoldersStore((state) => state.collapsedFolderIds);
-  const foldersMap = useSessionFoldersStore((state) => state.foldersMap);
-  const getFoldersForScope = useSessionFoldersStore((state) => state.getFoldersForScope);
-  const createFolder = useSessionFoldersStore((state) => state.createFolder);
-  const renameFolder = useSessionFoldersStore((state) => state.renameFolder);
-  const deleteFolder = useSessionFoldersStore((state) => state.deleteFolder);
-  const addSessionToFolder = useSessionFoldersStore((state) => state.addSessionToFolder);
-  const addSessionsToFolder = useSessionFoldersStore((state) => state.addSessionsToFolder);
-  const removeSessionFromFolder = useSessionFoldersStore((state) => state.removeSessionFromFolder);
-  const removeSessionsFromFolders = useSessionFoldersStore((state) => state.removeSessionsFromFolders);
-  const toggleFolderCollapse = useSessionFoldersStore((state) => state.toggleFolderCollapse);
-  const getSessionFolderId = useSessionFoldersStore((state) => state.getSessionFolderId);
 
   useSessionSearchEffects({
     enabled: isVisible,
@@ -437,47 +140,16 @@ const SessionSidebarComponent: React.FC<SessionSidebarProps> = ({
 
   const gitBranches = useGitAllBranches(isVisible);
 
-  const sync = useSync();
-  const childStores = useChildStoreManager();
-  const bootstrapDemandOwner = `session-sidebar:${React.useId()}`;
-  const liveSessionIndex = getAllSyncSessionMap();
-  const liveSessions = React.useMemo(() => Array.from(liveSessionIndex.values()), [liveSessionIndex]);
   const isVSCode = React.useMemo(() => isVSCodeRuntime(), []);
-  const runtimeKey = getRuntimeKey();
-  const hasAuthoritativeGlobalSessions = useGlobalSessionsStore((state) => state.status === 'ready');
-  const activeSessionStructure = useGlobalSessionsStore(useShallow(
-    (state) => state.activeSessions.map(getSessionStructuralSignature).sort(),
-  ));
-  const archivedSessionStructure = useGlobalSessionsStore(useShallow(
-    (state) => state.archivedSessions.map(getSessionStructuralSignature).sort(),
-  ));
-  const globalActiveSessions = useGlobalSessionsStore((state) => state.activeSessions);
-  const archivedSessions = useGlobalSessionsStore((state) => state.archivedSessions);
-  const liveFallbackCacheRef = React.useRef<{ signature: string; sessions: Session[] }>({
-    signature: '',
-    sessions: [],
-  });
-  const globalActiveSessionIds = React.useMemo(
-    () => new Set(globalActiveSessions.map((session) => session.id)),
-    [globalActiveSessions],
-  );
-  const liveFallbackSessions = (() => {
-    const candidates = liveSessions.filter((session) => !globalActiveSessionIds.has(session.id));
-    const signature = candidates.map(getSessionStructuralSignature).sort().join('\n');
-    if (liveFallbackCacheRef.current.signature === signature) {
-      return liveFallbackCacheRef.current.sessions;
-    }
-    liveFallbackCacheRef.current = { signature, sessions: candidates };
-    return candidates;
-  })();
   const setCurrentSession = useSessionUIStore((state) => state.setCurrentSession);
-  const updateSessionTitle = useSessionUIStore((state) => state.updateSessionTitle);
-  const shareSession = useSessionUIStore((state) => state.shareSession);
-  const unshareSession = useSessionUIStore((state) => state.unshareSession);
   // sessionAttentionStates removed — now using notification-store directly in SessionNodeItem
   const worktreeMetadata = useSessionUIStore((state) => state.worktreeMetadata);
   const availableWorktreesByProject = useSessionUIStore((state) => state.availableWorktreesByProject);
   const openNewSessionDraft = useSessionUIStore((state) => state.openNewSessionDraft);
+  const knownSessionDirectories = React.useMemo(
+    () => buildKnownSessionDirectories(projects, availableWorktreesByProject, { includeWorktrees: !isVSCode }),
+    [availableWorktreesByProject, isVSCode, projects],
+  );
   // The sidebar tree's +-buttons (project / group / folder) open a draft but,
   // unlike selecting an existing session, don't navigate. VS Code's compact view
   // is driven by the openchamber:navigate event, so switch to chat explicitly
@@ -504,37 +176,7 @@ const SessionSidebarComponent: React.FC<SessionSidebarProps> = ({
     restartToUpdate: s.restartToUpdate,
   })));
 
-  const knownSessionDirectories = React.useMemo(
-    () => buildKnownSessionDirectories(projects, availableWorktreesByProject, { includeWorktrees: !isVSCode }),
-    [availableWorktreesByProject, isVSCode, projects],
-  );
-
-  const sessions = React.useMemo(() => {
-    const merged = mergeSidebarSessionSources(globalActiveSessions, liveFallbackSessions);
-
-    return merged.filter((session) => (
-      // btw forks stay hidden until promoted to a full session
-      !isBtwSession(session)
-      && (
-        (!isVSCode && isChatDirectoryPath(session.directory))
-        || isKnownActiveSessionDirectory(session, knownSessionDirectories, {
-          allowUnknownDirectory: !isVSCode,
-          allowEmptyDirectorySet: !isVSCode,
-        })
-      )
-    ));
-  }, [globalActiveSessions, isVSCode, knownSessionDirectories, liveFallbackSessions]);
-
-  const persistenceSessions = React.useMemo(
-    () => [...globalActiveSessions, ...archivedSessions],
-    [archivedSessions, globalActiveSessions],
-  );
-
-  const syncSessionsSnapshotRef = React.useRef<Session[]>(liveSessions);
-  React.useEffect(() => {
-    syncSessionsSnapshotRef.current = liveSessions;
-  }, [liveSessions]);
-
+  const runtimeKey = getRuntimeKey();
   const projectWorktreeDiscoveryKey = React.useMemo(
     () => `${runtimeKey}|${projects
       .map((project) => `${project.id}:${normalizePath(project.path) ?? ''}`)
@@ -641,117 +283,17 @@ const SessionSidebarComponent: React.FC<SessionSidebarProps> = ({
   }, [isVSCode, projectWorktreeDiscoveryKey, runtimeKey, worktreeDiscoveryRevision]);
 
   React.useEffect(() => {
-    let refreshTimeout: ReturnType<typeof setTimeout> | null = null;
-    let needsGlobalRefresh = false;
-    const sessionDirectories = new Set<string>();
-    const unsubscribe = subscribeOpenchamberEvents((event) => {
-      if (event.type === 'scheduled-task-ran') {
-        needsGlobalRefresh = true;
-      } else if (event.type === 'session-created') {
-        sessionDirectories.add(event.directory);
-        requestWorktreeDiscovery();
-      } else {
-        // Browser control events carry no session state; nothing to refresh.
-        return;
-      }
-      if (refreshTimeout) {
-        clearTimeout(refreshTimeout);
-      }
-      refreshTimeout = setTimeout(() => {
-        refreshTimeout = null;
-        if (needsGlobalRefresh) {
-          needsGlobalRefresh = false;
-          sessionDirectories.clear();
-          void refreshGlobalSessions(syncSessionsSnapshotRef.current);
-          return;
-        }
-        const directories = [...sessionDirectories];
-        sessionDirectories.clear();
-        if (directories.length > 0) {
-          void refreshGlobalSessionsForDirectories(directories, syncSessionsSnapshotRef.current);
-        }
-      }, 500);
+    if (isVSCode) return;
+    return subscribeOpenchamberEvents((event) => {
+      if (event.type === 'session-created') requestWorktreeDiscovery();
     });
-    return () => {
-      if (refreshTimeout) {
-        clearTimeout(refreshTimeout);
-      }
-      unsubscribe();
-    };
-  }, []);
+  }, [isVSCode]);
 
   const isDesktopShellRuntime = React.useMemo(() => isDesktopShell(), []);
 
   const { isTablet } = useDeviceInfo();
   const alwaysShowSidebarActions = mobileVariant || isTablet;
 
-  const {
-    buildGroupSearchText,
-    filterSessionNodesForSearch,
-    buildGroupedSessions,
-  } = useSessionGrouping({
-    homeDirectory,
-    worktreeMetadata,
-    pinnedSessionIds,
-    sessionOrderRanks,
-    gitBranches,
-    isVSCode,
-  });
-
-  const { scheduleCollapsedProjectsPersist } = useSidebarPersistence({
-    isVSCode,
-    safeStorage,
-    keys: {
-      sessionExpanded: SESSION_EXPANDED_STORAGE_KEY,
-      projectCollapse: PROJECT_COLLAPSE_STORAGE_KEY,
-      groupOrder: GROUP_ORDER_STORAGE_KEY,
-      groupCollapse: GROUP_COLLAPSE_STORAGE_KEY,
-    },
-    groupOrderByProject,
-    collapsedGroups,
-    setExpandedParents,
-    setCollapsedProjects,
-  });
-
-  const orderedSessions = React.useMemo(() => {
-    return orderSessionsByLifecycleScopes(sessions, pinnedSessionIds, sessionOrderRanks);
-  }, [pinnedSessionIds, sessionOrderRanks, sessions]);
-
-  // Reuse the index while the ordered IDs stay unchanged.
-  // Without this, a fresh `orderedSessions` array (cheap to rebuild) would
-  // still hand a new Map identity to the entire SessionGroupSection
-  // memo chain, invalidating sourceGroupNodes, nodeBySessionId, and the
-  // rest of the down-stream useMemo chain.
-  const sessionOrderSignature = React.useMemo(
-    () => orderedSessions.map((session) => session.id).join('|'),
-    [orderedSessions],
-  );
-
-  const sessionOrderIndexRef = React.useRef<{ signature: string; map: Map<string, number> } | null>(null);
-  const sessionOrderIndex = React.useMemo(() => {
-    const cached = sessionOrderIndexRef.current;
-    if (cached && cached.signature === sessionOrderSignature) {
-      return cached.map;
-    }
-    const next = new Map(orderedSessions.map((session, index) => [session.id, index]));
-    sessionOrderIndexRef.current = { signature: sessionOrderSignature, map: next };
-    return next;
-  }, [orderedSessions, sessionOrderSignature]);
-
-  const childrenMap = React.useMemo(() => {
-    const map = new Map<string, Session[]>();
-    orderedSessions.forEach((session) => {
-      const parentID = (session as Session & { parentID?: string | null }).parentID;
-      if (!parentID) {
-        return;
-      }
-      const collection = map.get(parentID) ?? [];
-      collection.push(session);
-      map.set(parentID, collection);
-    });
-    map.forEach((list) => list.sort((a, b) => compareSessionsByLifecycleOrder(a, b, pinnedSessionIds, sessionOrderRanks)));
-    return map;
-  }, [orderedSessions, pinnedSessionIds, sessionOrderRanks]);
 
   const emptyState = React.useMemo(() => (
     <div className="py-6 text-center text-muted-foreground">
@@ -820,225 +362,30 @@ const SessionSidebarComponent: React.FC<SessionSidebarProps> = ({
     updateStore.available &&
     (updateStore.runtimeType === 'desktop' || updateStore.runtimeType === 'web');
 
-  const deleteSession = useSessionUIStore((state) => state.deleteSession);
-  const deleteSessions = useSessionUIStore((state) => state.deleteSessions);
-  const archiveSession = useSessionUIStore((state) => state.archiveSession);
-  const archiveSessions = useSessionUIStore((state) => state.archiveSessions);
-  const unarchiveSession = useSessionUIStore((state) => state.unarchiveSession);
-  const unarchiveSessions = useSessionUIStore((state) => state.unarchiveSessions);
-
-  const {
-    copiedSessionId,
-    handleSessionSelect,
-    handleSessionDoubleClick,
-    handleSaveEdit,
-    handleCancelEdit,
-    handleShareSession,
-    handleCopyShareUrl,
-    handleCopySessionId,
-    handleUnshareSession,
-    handleDeleteSession,
-    handleRestoreSession,
-    confirmDeleteSession,
-  } = useSessionActions({
-    mobileVariant,
-    allowReselect,
-    onSessionSelected,
-    isSessionSearchOpen,
-    sessionSearchQuery,
-    setSessionSearchQuery,
-    setIsSessionSearchOpen,
-    setActiveMainTab,
-    setSessionSwitcherOpen,
-    setCurrentSession,
-    updateSessionTitle,
-    shareSession,
-    unshareSession,
-    deleteSession,
-    deleteSessions,
-    archiveSession,
-    archiveSessions,
-    unarchiveSession,
-    childrenMap,
-    showDeletionDialog,
-    setDeleteSessionConfirm,
-    deleteSessionConfirm,
-    setEditingId,
-    setEditTitle,
-    editingId,
-    editTitle,
-  });
-
-  const confirmDeleteFolder = React.useCallback(() => {
-    if (!deleteFolderConfirm) return;
-    const { scopeKey, folderId } = deleteFolderConfirm;
-    setDeleteFolderConfirm(null);
-    deleteFolder(scopeKey, folderId);
-  }, [deleteFolderConfirm, deleteFolder]);
-
   const handleOpenDirectoryDialog = React.useCallback(() => {
     sessionEvents.requestDirectoryDialog();
   }, []);
 
-  const toggleParent = React.useCallback((expansionKey: string) => {
-    setExpandedParents((previous) => {
-      const next = toggleExpandedParentKey(previous, expansionKey);
-      try {
-        safeStorage.setItem(SESSION_EXPANDED_STORAGE_KEY, JSON.stringify(Array.from(next)));
-      } catch { /* ignored */ }
-      return next;
-    });
-  }, [safeStorage]);
 
-  const createFolderAndStartRename = React.useCallback(
-    (scopeKey: string, parentId?: string | null) => {
-      if (!scopeKey) {
-        return null;
-      }
-
-      if (parentId && collapsedFolderIds.has(parentId)) {
-        toggleFolderCollapse(parentId);
-      }
-
-      const newFolder = createFolder(scopeKey, t('sessions.sidebar.folder.newFolderName'), parentId);
-      setRenamingFolderId(newFolder.id);
-      setRenameFolderDraft(newFolder.name);
-      return newFolder;
-    },
-    [collapsedFolderIds, toggleFolderCollapse, createFolder, t],
-  );
-
-  const stableHandleSessionSelect = useStableRenderCallback(handleSessionSelect);
-  const stableHandleSessionDoubleClick = useStableRenderCallback(handleSessionDoubleClick);
-  const stableHandleSaveEdit = useStableRenderCallback(handleSaveEdit);
-  const stableHandleCancelEdit = useStableRenderCallback(handleCancelEdit);
-  const stableHandleShareSession = useStableRenderCallback(handleShareSession);
-  const stableHandleCopyShareUrl = useStableRenderCallback(handleCopyShareUrl);
-  const stableHandleCopySessionId = useStableRenderCallback(handleCopySessionId);
-  const stableHandleUnshareSession = useStableRenderCallback(handleUnshareSession);
-  const stableHandleDeleteSession = useStableRenderCallback(handleDeleteSession);
-  const stableHandleRestoreSession = useStableRenderCallback(handleRestoreSession);
-  const stableCreateFolderAndStartRename = useStableRenderCallback(createFolderAndStartRename);
-
-  const showMoreGroupSessions = React.useCallback((groupId: string, currentVisibleCount: number, increment: number = 7) => {
-    setVisibleSessionCountByGroup((prev) => {
-      const next = new Map(prev);
-      next.set(groupId, currentVisibleCount + increment);
-      return next;
-    });
-  }, []);
-
-  const resetGroupSessionLimit = React.useCallback((groupId: string) => {
-    setVisibleSessionCountByGroup((prev) => {
-      if (!prev.has(groupId)) {
-        return prev;
-      }
-      const next = new Map(prev);
-      next.delete(groupId);
-      return next;
-    });
-  }, []);
-
-  const resetProjectSessionLimits = React.useCallback((projectId: string) => {
-    setVisibleSessionCountByGroup((prev) => {
-      let changed = false;
-      const next = new Map(prev);
-      const projectGroupPrefix = `${projectId}:`;
-      for (const groupId of next.keys()) {
-        if (groupId.startsWith(projectGroupPrefix)) {
-          next.delete(groupId);
-          changed = true;
-        }
-      }
-      return changed ? next : prev;
-    });
-  }, []);
-
-  // Collapse/expand covers both levels: projects and their worktree groups.
-  const projectSectionsRef = React.useRef<typeof projectSections>([]);
-
-  const collapseAllProjects = React.useCallback(() => {
-    ignoreIntersectionUntil.current = Date.now() + 150;
-    setVisibleSessionCountByGroup(new Map());
-    setCollapsedGroups(() => {
-      const allGroupKeys = new Set<string>();
-      projectSectionsRef.current.forEach((section) => {
-        section.groups.forEach((group) => {
-          if (!group.isMain) allGroupKeys.add(`${section.project.id}:${group.id}`);
-        });
-      });
-      return allGroupKeys;
-    });
-    setCollapsedProjects(() => {
-      const allIds = new Set(projects.map((p) => p.id));
-      try {
-        safeStorage.setItem(PROJECT_COLLAPSE_STORAGE_KEY, JSON.stringify(Array.from(allIds)));
-      } catch { /* ignored */ }
-      if (!isVSCode) {
-        scheduleCollapsedProjectsPersist(allIds);
-      }
-      return allIds;
-    });
-  }, [projects, isVSCode, safeStorage, scheduleCollapsedProjectsPersist]);
-
-  const expandAllProjects = React.useCallback(() => {
-    ignoreIntersectionUntil.current = Date.now() + 150;
-    setVisibleSessionCountByGroup(new Map());
-    setCollapsedGroups(new Set());
-    setCollapsedProjects(() => {
-      const empty = new Set<string>();
-      try {
-        safeStorage.setItem(PROJECT_COLLAPSE_STORAGE_KEY, JSON.stringify([]));
-      } catch { /* ignored */ }
-      if (!isVSCode) {
-        scheduleCollapsedProjectsPersist(empty);
-      }
-      return empty;
-    });
-  }, [isVSCode, safeStorage, scheduleCollapsedProjectsPersist]);
-
-  const toggleProject = React.useCallback((projectId: string) => {
-    // Ignore intersection events for a short period after toggling
-    ignoreIntersectionUntil.current = Date.now() + 150;
-    resetProjectSessionLimits(projectId);
-    setCollapsedProjects((prev) => {
-      const next = new Set(prev);
-      if (next.has(projectId)) {
-        next.delete(projectId);
-      } else {
-        next.add(projectId);
-      }
-      try {
-        safeStorage.setItem(PROJECT_COLLAPSE_STORAGE_KEY, JSON.stringify(Array.from(next)));
-      } catch { /* ignored */ }
-
-      // Persist collapse state to server settings (web + desktop local/remote).
-      if (!isVSCode) {
-        scheduleCollapsedProjectsPersist(next);
-      }
-      return next;
-    });
-  }, [isVSCode, resetProjectSessionLimits, safeStorage, scheduleCollapsedProjectsPersist]);
 
   const normalizedProjects = React.useMemo(() => {
-    return projects
-      .map((project) => ({
-        ...project,
-        normalizedPath: normalizePath(project.path),
-      }))
-      .filter((project) => Boolean(project.normalizedPath)) as Array<{
-        id: string;
-        path: string;
-        label?: string;
-        normalizedPath: string;
-        icon?: string;
-        color?: string;
-        iconImage?: { mime: string; updatedAt: number; source: 'custom' | 'auto' };
-        iconBackground?: string;
-        addedAt?: number;
-        lastOpenedAt?: number;
-        sidebarCollapsed?: boolean;
-      }>;
+    return projects.flatMap((project) => {
+      const normalizedPath = normalizePath(project.path);
+      if (!normalizedPath) return [];
+      return [{
+        id: project.id,
+        path: project.path,
+        label: project.label,
+        normalizedPath,
+        icon: project.icon ?? undefined,
+        color: project.color ?? undefined,
+        iconImage: project.iconImage ?? undefined,
+        iconBackground: project.iconBackground ?? undefined,
+        addedAt: project.addedAt,
+        lastOpenedAt: project.lastOpenedAt,
+        sidebarCollapsed: project.sidebarCollapsed,
+      }];
+    });
   }, [projects]);
 
   const normalizedProjectPaths = React.useMemo(
@@ -1046,47 +393,7 @@ const SessionSidebarComponent: React.FC<SessionSidebarProps> = ({
     [normalizedProjects],
   );
 
-  const projectSessionDirectories = React.useMemo(() => {
-    const directories = new Set(normalizedProjects.map((project) => project.normalizedPath));
-    if (!isVSCode) {
-      for (const worktrees of availableWorktreesByProject.values()) {
-        for (const worktree of worktrees) {
-          const directory = normalizePath(worktree.path);
-          if (directory) directories.add(directory);
-        }
-      }
-    }
-    return [...directories].sort();
-  }, [availableWorktreesByProject, isVSCode, normalizedProjects]);
-
-  const knownProjectSessionDirectoriesRef = React.useRef<Set<string> | null>(null);
-  React.useEffect(() => {
-    const nextDirectories = new Set(projectSessionDirectories);
-    const previousDirectories = knownProjectSessionDirectoriesRef.current;
-    knownProjectSessionDirectoriesRef.current = nextDirectories;
-    if (!previousDirectories) {
-      if (isVSCode && projectSessionDirectories.length > 0) {
-        void refreshGlobalSessionsForDirectories(projectSessionDirectories, syncSessionsSnapshotRef.current);
-      }
-      return;
-    }
-
-    const addedDirectories = projectSessionDirectories.filter((directory) => !previousDirectories.has(directory));
-    if (addedDirectories.length === 0) {
-      return;
-    }
-
-    void refreshGlobalSessionsForDirectories(addedDirectories, syncSessionsSnapshotRef.current);
-  }, [isVSCode, projectSessionDirectories]);
-
-  const { github } = useRuntimeAPIs();
-  const githubAuthStatus = useGitHubAuthStore((state) => state.status);
-  const githubAuthChecked = useGitHubAuthStore((state) => state.hasChecked);
   const gitRepoStatus = useGitRepoStatusMap(isVisible ? normalizedProjectPaths : EMPTY_STRING_ARRAY);
-  const ensurePrStatusEntry = useGitHubPrStatusStore((state) => state.ensureEntry);
-  const setPrStatusParams = useGitHubPrStatusStore((state) => state.setParams);
-  const refreshPrStatusTargets = useGitHubPrStatusStore((state) => state.refreshTargets);
-
   useProjectRepoStatus({
     enabled: isVisible,
     normalizedProjects,
@@ -1096,64 +403,16 @@ const SessionSidebarComponent: React.FC<SessionSidebarProps> = ({
   });
 
   const isSessionsLoading = useSessionUIStore((state) => state.isLoading);
-  const sessionOwnership = React.useMemo(
-    () => createSessionOwnershipIndex(sessions, normalizedProjects, availableWorktreesByProject, isVSCode, archivedSessions),
-    [archivedSessions, availableWorktreesByProject, isVSCode, normalizedProjects, sessions],
-  );
-  useAuthoritativeSessionCleanup({
-    enabled: isVisible,
-    hasAuthoritativeGlobalSessions,
-    sessions: persistenceSessions,
-  });
-
-  const { getSessionsForProject, getArchivedSessionsForProject } = useProjectSessionLists({
-    ownership: sessionOwnership,
-  });
-
-  useArchivedAutoFolders({
-    enabled: isVisible,
-    normalizedProjects,
-    ownership: sessionOwnership,
-    isSessionsLoading,
-    hasAuthoritativeGlobalSessions,
-    isWorktreeTopologyLoading,
-    unresolvedWorktreeProjectPaths,
-    foldersMap,
-    createFolder,
-    addSessionToFolder,
-  });
-
   // Keep last-known repo status to avoid UI jiggling during project switch
   const lastRepoStatusRef = React.useRef(false);
   if (activeProjectId && projectRepoStatus.has(activeProjectId)) {
     lastRepoStatusRef.current = Boolean(projectRepoStatus.get(activeProjectId));
   }
 
-  const showRecentSection = useSessionDisplayStore((state) => state.showRecentSection);
-  const projectDisplayMode = useSessionDisplayStore((state) => state.projectDisplayMode);
-  const singleProjectId = useSessionDisplayStore((state) => state.singleProjectId);
-  const setSingleProjectId = useSessionDisplayStore((state) => state.setSingleProjectId);
   const showArchivedSessions = useSessionDisplayStore((state) => state.showArchivedSessions);
   const projectSortOrder = useSessionDisplayStore((state) => state.projectSortOrder);
   const stickyZoneHeaders = useSessionDisplayStore((state) => state.stickyZoneHeaders);
   const manualProjectOrder = useProjectsStore((state) => state.manualProjectOrder);
-  const supportsSingleProjectMode = !isVSCode && !isCapacitorApp();
-  const isSingleProjectMode = projectDisplayMode === 'single' && supportsSingleProjectMode;
-  const shouldShowRecentSection = showRecentSection && !isSingleProjectMode;
-  const projectExpandedParentsRef = React.useRef<Set<string>>(new Set());
-  const recentExpandedParentsRef = React.useRef<Set<string>>(new Set());
-  const projectExpandedParents = selectExpandedParentKeysForContext(
-    projectExpandedParentsRef.current,
-    expandedParents,
-    'project',
-  );
-  const recentExpandedParents = selectExpandedParentKeysForContext(
-    recentExpandedParentsRef.current,
-    expandedParents,
-    'recent',
-  );
-  projectExpandedParentsRef.current = projectExpandedParents;
-  recentExpandedParentsRef.current = recentExpandedParents;
 
   const sidebarRenderSources = {
     isVisible,
@@ -1164,27 +423,14 @@ const SessionSidebarComponent: React.FC<SessionSidebarProps> = ({
     showOnlyMainWorkspace,
     t,
     isTablet,
-    liveSessions,
-    activeSessionStructure,
-    archivedSessionStructure,
-    globalActiveSessions,
-    archivedSessions,
     projects,
     activeProjectId,
     manualProjectOrder,
-    currentDirectory,
     worktreeMetadata,
     availableWorktreesByProject,
-    pinnedSessionIds,
-    sessionOrderRanks,
-    foldersMap,
-    collapsedFolderIds,
     gitBranches,
     gitRepoStatus,
-    githubAuthStatus,
-    githubAuthChecked,
     updateStore,
-    showRecentSection: shouldShowRecentSection,
     showArchivedSessions,
     projectSortOrder,
     projectRepoStatus,
@@ -1193,25 +439,14 @@ const SessionSidebarComponent: React.FC<SessionSidebarProps> = ({
     unresolvedWorktreeProjectPaths,
     isSessionSearchOpen,
     sessionSearchQuery,
-    editingId,
-    editTitle,
     editingProjectDialogId,
-    expandedParents,
-    collapsedProjects,
-    visibleSessionCountByGroup,
     updateDialogOpen,
-    openSidebarMenuKey,
-    renamingFolderId,
-    renameFolderDraft,
-    deleteSessionConfirm,
-    deleteFolderConfirm,
-    bulkDeleteConfirm,
-    collapsedGroups,
   };
   const previousSidebarRenderSourcesRef = React.useRef<typeof sidebarRenderSources | null>(null);
   const previousSidebarRenderSources = previousSidebarRenderSourcesRef.current;
   if (previousSidebarRenderSources) {
     let attributed = false;
+    // SAFETY: Object.keys is constrained to the immediately constructed object's own keys.
     for (const source of Object.keys(sidebarRenderSources) as Array<keyof typeof sidebarRenderSources>) {
       if (!Object.is(previousSidebarRenderSources[source], sidebarRenderSources[source])) {
         streamPerfCount(`ui.session_sidebar.source.${source}`);
@@ -1261,30 +496,7 @@ const SessionSidebarComponent: React.FC<SessionSidebarProps> = ({
 
     return list;
   }, [normalizedProjects, projectSortOrder, manualProjectOrder]);
-
-  const {
-    projectSections,
-    groupSearchDataByGroup,
-    sectionsForRender,
-    flatSectionsForRender,
-    searchMatchCount,
-  } = useSessionSidebarSections({
-    normalizedProjects: sortedProjects,
-    getSessionsForProject,
-    getArchivedSessionsForProject,
-    availableWorktreesByProject,
-    projectRepoStatus,
-    projectRootBranches,
-    lastRepoStatus: lastRepoStatusRef.current,
-    buildGroupedSessions,
-    hasSessionSearchQuery,
-    normalizedSessionSearchQuery,
-    filterSessionNodesForSearch,
-    buildGroupSearchText,
-    foldersMap,
-  });
-
-  projectSectionsRef.current = projectSections;
+  const projectView = useSessionProjectViewState({ isVSCode, projects: sortedProjects });
 
   const searchEmptyState = React.useMemo(() => (
     <div className="py-6 text-center text-muted-foreground">
@@ -1293,143 +505,6 @@ const SessionSidebarComponent: React.FC<SessionSidebarProps> = ({
     </div>
   ), [t]);
 
-  const { getOrderedGroups } = useGroupOrdering(groupOrderByProject);
-  const hasInitializedArchivedCollapseRef = React.useRef(false);
-
-  React.useEffect(() => {
-    if (hasInitializedArchivedCollapseRef.current || projectSections.length === 0) {
-      return;
-    }
-    const archivedGroupKeys = projectSections.flatMap((section) =>
-      section.groups
-        .filter((group) => group.isArchivedBucket)
-        .map((group) => `${section.project.id}:${group.id}`),
-    );
-    if (archivedGroupKeys.length > 0) {
-      setCollapsedGroups((prev) => new Set([...prev, ...archivedGroupKeys]));
-    }
-    hasInitializedArchivedCollapseRef.current = true;
-  }, [projectSections]);
-
-  const sessionSidebarMetaById = React.useMemo(() => {
-    const meta = new Map<string, {
-      node: SessionNode;
-      projectId: string | null;
-      groupDirectory: string | null;
-      secondaryMeta: {
-        projectLabel?: string | null;
-        branchLabel?: string | null;
-      } | null;
-    }>();
-    const projectPathLengthBySessionId = new Map<string, number>();
-
-    projectSections.forEach((section) => {
-      const projectLabel = formatProjectLabel(
-        section.project.label?.trim()
-        || formatDirectoryName(section.project.normalizedPath, homeDirectory)
-        || section.project.normalizedPath,
-      );
-      section.groups.forEach((group) => {
-        const branchCandidate = group.branch && group.branch !== 'HEAD' && group.branch !== projectLabel
-          ? group.branch
-          : null;
-        const secondaryMeta = { projectLabel, branchLabel: branchCandidate };
-
-        const visit = (nodes: SessionNode[]) => {
-          nodes.forEach((node) => {
-            const nextProjectPathLength = section.project.normalizedPath.length;
-            const currentProjectPathLength = projectPathLengthBySessionId.get(node.session.id) ?? -1;
-            if (nextProjectPathLength < currentProjectPathLength) {
-              return;
-            }
-
-            meta.set(node.session.id, {
-              node,
-              projectId: section.project.id,
-              groupDirectory: group.directory,
-              secondaryMeta,
-            });
-            projectPathLengthBySessionId.set(node.session.id, nextProjectPathLength);
-            if (node.children.length > 0) {
-              visit(node.children);
-            }
-          });
-        };
-
-        visit(group.sessions);
-      });
-    });
-
-    return meta;
-  }, [projectSections, homeDirectory]);
-
-  const recentSessions = React.useMemo(() => {
-    if (!shouldShowRecentSection || isVSCode) {
-      return [];
-    }
-
-    return deriveRecentSessions(sessions.filter((session) => !isChatDirectoryForHome(session.directory, homeDirectory)), activeSessionIdSet)
-      .sort((a, b) => compareSessionsByLifecycleOrder(a, b, pinnedSessionIds, sessionOrderRanks));
-  }, [activeSessionIdSet, homeDirectory, isVSCode, pinnedSessionIds, sessionOrderRanks, sessions, shouldShowRecentSection]);
-
-  const chatSessions = React.useMemo(() => sessions
-    .filter((session) => !session.parentID && !session.time?.archived && isChatDirectoryForHome(session.directory, homeDirectory))
-    .sort((a, b) => compareSessionsByLifecycleOrder(a, b, pinnedSessionIds, sessionOrderRanks)), [homeDirectory, pinnedSessionIds, sessionOrderRanks, sessions]);
-
-  // Prefetch is wired below, after recentSessions is computed.
-
-  const activitySections = React.useMemo(() => {
-    // VS Code renders the full grouped project view (one group per open
-    // workspace, folders + pinned native); the flat "recent" activity list is
-    // web/desktop-only.
-    if (isVSCode) {
-      return [];
-    }
-
-    const toItem = (session: Session) => {
-      const existing = sessionSidebarMetaById.get(session.id);
-      const sessionDirectory = normalizePath(session.directory ?? null);
-      const node = existing?.node ?? { session, children: [], worktree: null };
-      const filteredNodes = hasSessionSearchQuery
-        ? filterSessionNodesForSearch([node], normalizedSessionSearchQuery)
-        : [node];
-      const filteredNode = filteredNodes[0];
-      if (!filteredNode) {
-        return null;
-      }
-      const secondaryMeta = existing?.secondaryMeta
-        ? {
-            projectLabel: existing.secondaryMeta.projectLabel,
-            branchLabel: isVSCode ? null : existing.secondaryMeta.branchLabel,
-          }
-        : null;
-      return {
-        node: filteredNode,
-        projectId: existing?.projectId ?? null,
-        groupDirectory: existing?.groupDirectory ?? sessionDirectory,
-        secondaryMeta,
-      };
-    };
-
-    const recentItems = shouldShowRecentSection ? recentSessions
-      .map(toItem)
-      .filter((item): item is NonNullable<ReturnType<typeof toItem>> => item !== null) : [];
-
-    const chatItems = chatSessions
-      .map(toItem)
-      .filter((item): item is NonNullable<ReturnType<typeof toItem>> => item !== null);
-    return [
-      { key: 'chats' as const, title: t('sessions.sidebar.activity.chatsTitle'), items: chatItems },
-      { key: 'active-now' as const, title: t('sessions.sidebar.activity.recentTitle'), items: recentItems },
-    ];
-  }, [chatSessions, filterSessionNodesForSearch, hasSessionSearchQuery, isVSCode, normalizedSessionSearchQuery, recentSessions, sessionSidebarMetaById, shouldShowRecentSection, t]);
-
-  const hasActivitySectionItems = React.useMemo(
-    () => activitySections.some((section) => section.key === 'chats' || section.items.length > 0),
-    [activitySections],
-  );
-
-
   // Web/desktop route archived sessions to the Archive page; only the VS Code
   // compact webview keeps inline archived buckets behind its toggle.
   const showInlineArchived = isVSCode && showArchivedSessions;
@@ -1438,424 +513,27 @@ const SessionSidebarComponent: React.FC<SessionSidebarProps> = ({
   // worktree groups, so both resolve to the same shape — use flat there.
   const sessionGroupingMode = useSessionDisplayStore((state) => state.sessionGroupingMode);
   const useGroupedSections = sessionGroupingMode === 'by-worktree' && !isVSCode;
-  const sectionsForSidebarRender = React.useMemo(() => {
-    const source = useGroupedSections ? sectionsForRender : flatSectionsForRender;
-    return showInlineArchived
-      ? source
-      : source.map((section) => (
-        section.groups.some((group) => group.isArchivedBucket)
-          ? { ...section, groups: section.groups.filter((group) => !group.isArchivedBucket) }
-          : section
-      ));
-  }, [flatSectionsForRender, sectionsForRender, showInlineArchived, useGroupedSections]);
-  const effectiveSingleProjectId = React.useMemo(() => {
-    if (!isSingleProjectMode) return null;
-    if (singleProjectId && projectSections.some((section) => section.project.id === singleProjectId)) {
-      return singleProjectId;
-    }
-    if (activeProjectId && projectSections.some((section) => section.project.id === activeProjectId)) {
-      return activeProjectId;
-    }
-    return projectSections[0]?.project.id ?? null;
-  }, [activeProjectId, isSingleProjectMode, projectSections, singleProjectId]);
-  const handleSingleProjectSelect = React.useCallback((projectId: string) => {
-    setSingleProjectId(projectId);
-  }, [setSingleProjectId]);
-
-  // Discover/refresh PR status for expanded projects' worktree branches so
-  // session rows can tint their branch marker and show PR state in tooltips.
-  // The data source is the worktree-grouped projectSections (data layer), not
-  // the flat display sections.
-  const retriedNoPrStatusKeysRef = React.useRef<Set<string>>(new Set());
-  React.useEffect(() => {
-    if (!isVisible || !githubAuthChecked || !githubAuthStatus?.connected || !github) {
-      return;
-    }
-
-    const targetsByKey = new Map<string, { directory: string; branch: string }>();
-    const now = Date.now();
-
-    projectSections.forEach((section) => {
-      if (collapsedProjects.has(section.project.id)) {
-        return;
-      }
-
-      section.groups.forEach((group) => {
-        if (group.isArchivedBucket || group.isMain) {
-          return;
-        }
-        const directory = normalizePath(group.directory ?? null);
-        const branch = group.branch?.trim() || gitBranches.get(directory || '')?.trim();
-        if (!directory || !branch) {
-          return;
-        }
-        const key = getGitHubPrStatusKey(directory, branch);
-        const entry = useGitHubPrStatusStore.getState().entries[key];
-        const prState = entry?.status?.pr?.state;
-        const isTerminalPr = prState === 'closed' || prState === 'merged';
-        // Closed/merged associations are not live branch status — retry them on
-        // the same cadence as missing PRs so a newer open PR can appear.
-        const hasLivePr = Boolean(entry?.status?.pr) && !isTerminalPr;
-        const retryKey = `${directory}::${branch}`;
-        const noPrLastCheckedAt = Math.max(entry?.lastRefreshAt ?? 0, entry?.lastDiscoveryPollAt ?? 0);
-        const shouldRetryNoPr = Boolean(
-          entry?.isInitialStatusResolved
-          && !hasLivePr
-          && (
-            !retriedNoPrStatusKeysRef.current.has(retryKey)
-            || now - noPrLastCheckedAt >= SIDEBAR_PR_NO_PR_RETRY_MS
-          ),
-        );
-
-        if (!entry || !entry.isInitialStatusResolved || shouldRetryNoPr) {
-          if (shouldRetryNoPr) {
-            retriedNoPrStatusKeysRef.current.add(retryKey);
-          }
-          if (!targetsByKey.has(key)) {
-            targetsByKey.set(key, { directory, branch });
-          }
-        }
-      });
-    });
-
-    if (targetsByKey.size === 0) {
-      return;
-    }
-
-    targetsByKey.forEach((target, key) => {
-      ensurePrStatusEntry(key);
-      setPrStatusParams(key, {
-        directory: target.directory,
-        branch: target.branch,
-        remoteName: null,
-        canShow: true,
-        github,
-        githubAuthChecked,
-        githubConnected: githubAuthStatus.connected,
-      });
-    });
-
-    void refreshPrStatusTargets([...targetsByKey.values()], {
-      silent: true,
-      markInitialResolved: true,
-    });
-  }, [
-    collapsedProjects,
-    ensurePrStatusEntry,
-    github,
-    githubAuthChecked,
-    githubAuthStatus?.connected,
-    isVisible,
-    gitBranches,
-    projectSections,
-    refreshPrStatusTargets,
-    setPrStatusParams,
-  ]);
-
   const desktopHeaderActionButtonClass =
     'inline-flex h-6 w-6 cursor-pointer items-center justify-center rounded-md leading-none text-foreground hover:bg-interactive-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 disabled:cursor-not-allowed';
   const mobileHeaderActionButtonClass =
     'inline-flex h-6 w-6 cursor-pointer items-center justify-center rounded-md leading-none text-muted-foreground hover:text-foreground hover:bg-interactive-hover/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 disabled:cursor-not-allowed';
   const headerActionButtonClass = mobileVariant ? mobileHeaderActionButtonClass : desktopHeaderActionButtonClass;
   const headerActionIconClass = 'h-4.5 w-4.5';
-  const stuckProjectHeaders = useStickyProjectHeaders({
-    enabled: isVisible && stickyZoneHeaders,
-    isDesktopShellRuntime,
-    projectSections,
-    projectHeaderSentinelRefs,
-  });
 
-  const renderSessionNode = useStableRenderCallback(
-    (
-      node: SessionNode,
-      depth: number = 0,
-      groupDirectory?: string | null,
-      projectId?: string | null,
-      archivedBucket: boolean = false,
-      secondaryMeta?: { projectLabel?: string | null; branchLabel?: string | null } | null,
-      renderContext: 'project' | 'recent' = 'project',
-      renderExtras?: SessionNodeRenderExtras,
-    ): React.ReactNode => (
-      <SessionNodeItem
-        node={node}
-        depth={depth}
-        groupDirectory={groupDirectory}
-        projectId={projectId}
-        archivedBucket={archivedBucket}
-        pinnedSessionIds={pinnedSessionIds}
-        expandedParents={renderContext === 'recent' ? recentExpandedParents : projectExpandedParents}
-        hasSessionSearchQuery={hasSessionSearchQuery}
-        normalizedSessionSearchQuery={normalizedSessionSearchQuery}
-        notifyOnSubtasks={notifyOnSubtasks}
-        editingId={editingId}
-        setEditingId={setEditingId}
-        editTitle={editTitle}
-        setEditTitle={setEditTitle}
-        handleSaveEdit={stableHandleSaveEdit}
-        handleCancelEdit={stableHandleCancelEdit}
-        toggleParent={toggleParent}
-        handleSessionSelect={stableHandleSessionSelect}
-        handleSessionDoubleClick={stableHandleSessionDoubleClick}
-        togglePinnedSession={togglePinnedSession}
-        handleShareSession={stableHandleShareSession}
-        copiedSessionId={copiedSessionId}
-        handleCopyShareUrl={stableHandleCopyShareUrl}
-        handleCopySessionId={stableHandleCopySessionId}
-        handleUnshareSession={stableHandleUnshareSession}
-        openSidebarMenuKey={openSidebarMenuKey}
-        setOpenSidebarMenuKey={setOpenSidebarMenuKey}
-        renamingFolderId={renamingFolderId}
-        getFoldersForScope={getFoldersForScope}
-        getSessionFolderId={getSessionFolderId}
-        removeSessionFromFolder={removeSessionFromFolder}
-        addSessionToFolder={addSessionToFolder}
-        createFolderAndStartRename={stableCreateFolderAndStartRename}
-        openContextPanelTab={openContextPanelTab}
-        handleDeleteSession={stableHandleDeleteSession}
-        handleRestoreSession={stableHandleRestoreSession}
-        mobileVariant={mobileVariant}
-        alwaysShowActions={alwaysShowSidebarActions}
-        renderSessionNode={renderSessionNode}
-        secondaryMeta={secondaryMeta}
-        renderContext={renderContext}
-        subtreeContainsEditing={renderExtras?.subtreeContainsEditing ?? EMPTY_SUBTREE_SET}
-        menuOpenSessionId={renderExtras?.menuOpenSessionId ?? null}
-        nodeStructureKey={renderExtras?.nodeStructureKey ?? ''}
-        childRenderExtrasFor={renderExtras?.childRenderExtrasFor}
-      />
-    ),
-  );
-
-  // Selection scope is the project id; bulk folder actions need the project's
-  // directory scopes (root + worktrees) to resolve folders across worktrees.
-  const folderScopesByProject = React.useMemo(() => {
-    const map = new Map<string, Array<{ scopeKey: string; directory: string | null }>>();
-    flatSectionsForRender.forEach((section) => {
-      const flatGroup = section.groups.find((group) => !group.isArchivedBucket);
-      if (flatGroup?.folderScopes && flatGroup.folderScopes.length > 0) {
-        map.set(section.project.id, flatGroup.folderScopes);
-      }
-    });
-    return map;
-  }, [flatSectionsForRender]);
-
-  const renderProjectStatusIndicator = React.useCallback((_projectId: string, groups: SessionGroup[]) => {
-    const directories: Array<string | null> = [];
-    groups.forEach((group) => {
-      if (group.isArchivedBucket) return;
-      directories.push(group.directory);
-      group.folderScopes?.forEach((scope) => directories.push(scope.directory));
-    });
-    return <ProjectAggregateStatusIndicator directories={directories} />;
-  }, []);
-
-  const toggleCollapsedGroup = React.useCallback((key: string) => {
-    resetGroupSessionLimit(key);
-    setCollapsedGroups((prev) => {
-      const next = new Set(prev);
-      if (next.has(key)) next.delete(key);
-      else next.add(key);
-      return next;
-    });
-  }, [resetGroupSessionLimit]);
-
-  const renderGroupSessions = React.useCallback(
-    (
-      group: SessionGroup,
-      groupKey: string,
-      projectId?: string | null,
-      hideGroupLabel?: boolean,
-      dragHandleProps?: SortableDragHandleProps | null,
-      compactBodyPadding?: boolean,
-      scrollContainerRef?: React.RefObject<HTMLElement | null>,
-    ) => (
-      <SessionGroupSection
-        group={group}
-        groupKey={groupKey}
-        projectId={projectId}
-        hideGroupLabel={hideGroupLabel}
-        dragHandleProps={dragHandleProps}
-        compactBodyPadding={compactBodyPadding}
-        hasSessionSearchQuery={hasSessionSearchQuery}
-        normalizedSessionSearchQuery={normalizedSessionSearchQuery}
-        groupSearchDataByGroup={groupSearchDataByGroup}
-        visibleSessionCount={visibleSessionCountByGroup.get(groupKey)}
-        sessionBatchSize={isSingleProjectMode && sessionGroupingMode === 'flat' && group.id !== 'managed-chats'
-          ? 20
-          : undefined}
-        collapsedGroups={collapsedGroups}
-        hideDirectoryControls={hideDirectoryControls}
-        collapsedFolderIds={collapsedFolderIds}
-        toggleFolderCollapse={toggleFolderCollapse}
-        renameFolder={renameFolder}
-        deleteFolder={deleteFolder}
-        showDeletionDialog={showDeletionDialog}
-        setDeleteFolderConfirm={setDeleteFolderConfirm}
-        renderSessionNode={renderSessionNode}
-        showMoreGroupSessions={showMoreGroupSessions}
-        resetGroupSessionLimit={resetGroupSessionLimit}
-        mobileVariant={mobileVariant}
-        alwaysShowActions={alwaysShowSidebarActions}
-        activeProjectId={activeProjectId}
-        setActiveProjectIdOnly={setActiveProjectIdOnly}
-        setActiveMainTab={setActiveMainTab}
-        setSessionSwitcherOpen={setSessionSwitcherOpen}
-        openNewSessionDraft={openNewSessionDraftFromTree}
-        addSessionToFolder={addSessionToFolder}
-        createFolderAndStartRename={stableCreateFolderAndStartRename}
-        renamingFolderId={renamingFolderId}
-        renameFolderDraft={renameFolderDraft}
-        setRenameFolderDraft={setRenameFolderDraft}
-        setRenamingFolderId={setRenamingFolderId}
-        pinnedSessionIds={pinnedSessionIds}
-        expandedParents={projectExpandedParents}
-        sessionOrderIndex={sessionOrderIndex}
-        editingId={editingId}
-        editTitle={editTitle}
-        openSidebarMenuKey={openSidebarMenuKey}
-        activeActivitySessionIds={activeSessionIdSet}
-        unreadActivitySessionIds={unreadSessionIdSet}
-        notifyOnSubtasks={notifyOnSubtasks}
-        onToggleCollapsedGroup={toggleCollapsedGroup}
-        scrollContainerRef={scrollContainerRef}
-      />
-    ),
-    [
-      hasSessionSearchQuery,
-      normalizedSessionSearchQuery,
-      groupSearchDataByGroup,
-      visibleSessionCountByGroup,
-      isSingleProjectMode,
-      sessionGroupingMode,
-      collapsedGroups,
-      hideDirectoryControls,
-      collapsedFolderIds,
-      toggleFolderCollapse,
-      renameFolder,
-      deleteFolder,
-      showDeletionDialog,
-      renderSessionNode,
-      showMoreGroupSessions,
-      resetGroupSessionLimit,
-      mobileVariant,
-      alwaysShowSidebarActions,
-      activeProjectId,
-      setActiveProjectIdOnly,
-      setActiveMainTab,
-      setSessionSwitcherOpen,
-      openNewSessionDraftFromTree,
-      addSessionToFolder,
-      stableCreateFolderAndStartRename,
-      renamingFolderId,
-      renameFolderDraft,
-      pinnedSessionIds,
-      projectExpandedParents,
-      sessionOrderIndex,
-      editingId,
-      editTitle,
-      openSidebarMenuKey,
-      activeSessionIdSet,
-      unreadSessionIdSet,
-      notifyOnSubtasks,
-      toggleCollapsedGroup,
-    ],
-  );
-
-  const handleOpenNewSessionDraftFromHeader = React.useCallback(() => {
-    useUIStore.getState().closeMainSurfaces();
-    setActiveMainTab('chat');
-    if (mobileVariant) {
-      setSessionSwitcherOpen(false);
-    }
-    openNewSessionDraft();
-  }, [mobileVariant, openNewSessionDraft, setActiveMainTab, setSessionSwitcherOpen]);
-
-  const renderChatsSection = React.useCallback((items: ActivityItem[]) => {
-    const chatsRoot = getChatsRootForHome(homeDirectory)
-      ?? items.map((item) => getChatsRootFromDirectory(item.node.session.directory)).find(Boolean)
-      ?? null;
-    if (!chatsRoot) return items.map((item) => renderSessionNode(item.node, 0, item.groupDirectory));
-
-    const folderDirectories = [
-      chatsRoot,
-      ...items.map((item) => normalizePath(item.node.session.directory ?? null)).filter((directory): directory is string => Boolean(directory)),
-    ];
-    const folderScopes = Array.from(new Set(folderDirectories)).map((directory) => ({
-      scopeKey: directory,
-      directory,
-    }));
-    const group: SessionGroup = {
-      id: 'managed-chats',
-      label: '',
-      branch: null,
-      description: null,
-      isMain: true,
-      worktree: null,
-      directory: chatsRoot,
-      folderScopeKey: chatsRoot,
-      folderScopes,
-      draftTarget: 'chat',
-      emptyMessage: t('sessions.sidebar.activity.chatsEmpty'),
-      sessions: items.map((item) => item.node),
-    };
-    return renderGroupSessions(group, 'managed-chats', null, true);
-  }, [homeDirectory, renderGroupSessions, renderSessionNode, t]);
-
-  const topContent = React.useMemo(
-    () => (!isVSCode && !hasSessionSearchQuery && hasActivitySectionItems) ? (
-      <SidebarActivitySections
-        sections={activitySections}
-        renderSessionNode={renderSessionNode}
-        editingId={editingId}
-        openSidebarMenuKey={openSidebarMenuKey}
-        expansionState={recentExpandedParents}
-        variant="section"
-        isDesktopShellRuntime={isDesktopShellRuntime}
-        onNewChat={handleOpenNewSessionDraftFromHeader}
-        alwaysShowActions={alwaysShowSidebarActions}
-        renderChatsSection={renderChatsSection}
-      />
-    ) : null,
-    [activitySections, alwaysShowSidebarActions, editingId, handleOpenNewSessionDraftFromHeader, hasActivitySectionItems, hasSessionSearchQuery, isDesktopShellRuntime, isVSCode, openSidebarMenuKey, recentExpandedParents, renderChatsSection, renderSessionNode],
-  );
-  const isInlineEditing = Boolean(renamingFolderId || editingId || editingProjectDialogId);
-
-  const {
-    selectionModeEnabled,
-    hasSelection,
-    selectedIdsSize,
-    bulkScopeIsArchived,
-    derivedSelectionScope,
-    bulkScopeFolders,
-    bulkCanRemoveFromFolder,
-    handleToggleSelectionMode,
-    handleExitSelectionMode,
-    handleBulkMoveToFolder,
-    handleBulkCreateFolderAndMove,
-    handleBulkRemoveFromFolder,
-    handleBulkDelete,
-    handleBulkRestore,
-    confirmBulkDelete,
-  } = useSidebarBulkActions({
-    isInlineEditing,
-    showDeletionDialog,
-    foldersMap,
-    folderScopesByProject,
-    addSessionsToFolder,
-    removeSessionsFromFolders,
-    createFolderAndStartRename,
-    archiveSessions,
-    unarchiveSessions,
-    deleteSessions,
-    setBulkDeleteConfirm,
-  });
   const handleOpenMultiRunFromHeader = React.useCallback(() => {
-    setActiveMainTab('chat');
     if (mobileVariant) {
       setSessionSwitcherOpen(false);
     }
     openMultiRunLauncher();
-  }, [mobileVariant, openMultiRunLauncher, setActiveMainTab, setSessionSwitcherOpen]);
+  }, [mobileVariant, openMultiRunLauncher, setSessionSwitcherOpen]);
+
+  const handleOpenNewSessionDraftFromHeader = React.useCallback(() => {
+    useUIStore.getState().closeMainSurfaces();
+    if (mobileVariant) {
+      setSessionSwitcherOpen(false);
+    }
+    openNewSessionDraft();
+  }, [mobileVariant, openNewSessionDraft, setSessionSwitcherOpen]);
 
   return (
     // One shared tooltip provider for the whole sidebar: session tooltips open
@@ -1872,40 +550,13 @@ const SessionSidebarComponent: React.FC<SessionSidebarProps> = ({
         mobileVariant ? '' : 'bg-transparent',
       )}
     >
-      <SidebarBootstrapDemandEffect
-        owner={bootstrapDemandOwner}
-        childStores={childStores}
-        projectSections={projectSections}
-        activeProjectId={activeProjectId}
-        collapsedProjects={collapsedProjects}
-        collapsedGroups={collapsedGroups}
-        currentDirectory={currentDirectory}
-      />
-      <ProjectSessionSelectionEffect
-        projectSections={projectSections}
-        activeProjectId={activeProjectId}
-        initialActiveSessionByProject={initialActiveSessionByProject}
-        persistActiveSessionByProject={persistActiveSessionByProject}
-        handleSessionSelect={stableHandleSessionSelect}
-        mobileVariant={mobileVariant}
-        openNewSessionDraft={openNewSessionDraft}
-        setActiveMainTab={setActiveMainTab}
-        setSessionSwitcherOpen={setSessionSwitcherOpen}
-        sessionOwnerBySessionId={sessionOwnership.bySessionId}
-      />
-      <SessionPrefetchEffect
-        enabled={isVisible}
-        sortedSessions={orderedSessions}
-        recentSessions={recentSessions}
-        prefetchSession={sync.prefetchSession}
-      />
       {!hideDirectoryControls && !isVSCode ? (
         <SidebarNav onNewSession={handleOpenNewSessionDraftFromHeader} />
       ) : null}
 
       <SidebarHeader
         hideDirectoryControls={hideDirectoryControls}
-        showProjectDisplayControls={supportsSingleProjectMode}
+        showProjectDisplayControls={!isVSCode}
         showRecentControls={!isVSCode}
         handleOpenDirectoryDialog={handleOpenDirectoryDialog}
         onOpenScheduled={() => {
@@ -1926,75 +577,71 @@ const SessionSidebarComponent: React.FC<SessionSidebarProps> = ({
         sessionSearchQuery={sessionSearchQuery}
         setSessionSearchQuery={setSessionSearchQuery}
         hasSessionSearchQuery={hasSessionSearchQuery}
-        searchMatchCount={searchMatchCount}
-        collapseAllProjects={collapseAllProjects}
-        expandAllProjects={expandAllProjects}
-        selectionModeEnabled={selectionModeEnabled}
-        onToggleSelectionMode={handleToggleSelectionMode}
+        searchMatchCount={0}
+        collapseAllProjects={projectView.actions.collapseAllProjects}
+        expandAllProjects={projectView.actions.expandAllProjects}
       />
 
-      {isVisible ? <SidebarProjectsList
-        topContent={topContent}
-        hasSharedSessions={hasActivitySectionItems}
-        sectionsForRender={sectionsForSidebarRender}
-        projectSections={projectSections}
-        projectPickerSections={projectSections}
-        activeProjectId={activeProjectId}
-        singleProjectMode={isSingleProjectMode}
-        singleProjectId={effectiveSingleProjectId}
-        setSingleProjectId={handleSingleProjectSelect}
-        showOnlyMainWorkspace={showOnlyMainWorkspace}
-        hasSessionSearchQuery={hasSessionSearchQuery}
-        emptyState={emptyState}
-        searchEmptyState={searchEmptyState}
-        renderGroupSessions={renderGroupSessions}
-        homeDirectory={homeDirectory}
-        collapsedProjects={collapsedProjects}
-        hideDirectoryControls={hideDirectoryControls}
-        projectRepoStatus={projectRepoStatus}
-        isDesktopShellRuntime={isDesktopShellRuntime}
-        stickyZoneHeaders={stickyZoneHeaders}
-        stuckProjectHeaders={stuckProjectHeaders}
-        mobileVariant={mobileVariant}
-        alwaysShowActions={alwaysShowSidebarActions}
-        toggleProject={toggleProject}
-        setActiveProjectIdOnly={setActiveProjectIdOnly}
-        setActiveMainTab={setActiveMainTab}
-        setSessionSwitcherOpen={setSessionSwitcherOpen}
-        openNewSessionDraft={openNewSessionDraftFromTree}
-        openNewWorktreeDialog={openNewWorktreeDialog}
-        openWorktreesPage={(projectId) => {
-          if (mobileVariant) setSessionSwitcherOpen(false);
-          setWorktreesPageProjectId(projectId);
+      <SessionProjectCollection
+        topology={{
+          projects: sortedProjects,
+          availableWorktreesByProject,
+          knownDirectories: knownSessionDirectories,
+          isVSCode,
+          worktreeMetadata,
+          gitBranches,
+          projectRepoStatus,
+          projectRootBranches,
+          lastRepoStatus: lastRepoStatusRef.current,
         }}
-        openProjectEditDialog={setEditingProjectDialogId}
-        removeProject={removeProject}
-        projectHeaderSentinelRefs={projectHeaderSentinelRefs}
-        reorderProjects={reorderProjects}
-        projectSortOrder={projectSortOrder}
-        getOrderedGroups={getOrderedGroups}
-        setGroupOrderByProject={setGroupOrderByProject}
-        renderProjectStatusIndicator={renderProjectStatusIndicator}
-        openSidebarMenuKey={openSidebarMenuKey}
-        setOpenSidebarMenuKey={setOpenSidebarMenuKey}
-        isInlineEditing={isInlineEditing}
-      /> : null}
-
-      {selectionModeEnabled && hasSelection ? (
-        <BulkActionBar
-          selectedCount={selectedIdsSize}
-          scopeKey={derivedSelectionScope}
-          scopeFolders={bulkScopeFolders}
-          archivedBucket={bulkScopeIsArchived}
-          onMoveToFolder={handleBulkMoveToFolder}
-          onCreateFolderAndMove={handleBulkCreateFolderAndMove}
-          onRemoveFromFolder={handleBulkRemoveFromFolder}
-          canRemoveFromFolder={bulkCanRemoveFromFolder}
-          onRestore={handleBulkRestore}
-          onDelete={handleBulkDelete}
-          onDone={handleExitSelectionMode}
-        />
-      ) : null}
+        view={{
+          isVisible,
+          hasSessionSearchQuery,
+          normalizedSessionSearchQuery,
+          activeProjectId,
+          showInlineArchived,
+          useGroupedSections,
+          homeDirectory,
+          mobileVariant,
+          hideDirectoryControls,
+          showOnlyMainWorkspace,
+          isDesktopShellRuntime,
+          stickyZoneHeaders,
+          projectSortOrder,
+          emptyState,
+          searchEmptyState,
+          isSessionsLoading,
+          isWorktreeTopologyLoading,
+          unresolvedWorktreeProjectPaths,
+          projectView: projectView.state,
+        }}
+        actions={{
+          rowActions: {
+            allowReselect,
+            onSessionSelected,
+            isSessionSearchOpen,
+            sessionSearchQuery,
+            setSessionSearchQuery,
+            setIsSessionSearchOpen,
+          },
+          alwaysShowActions: alwaysShowSidebarActions,
+          notifyOnSubtasks,
+          setActiveProjectIdOnly,
+          setSessionSwitcherOpen,
+          openNewSessionDraft: openNewSessionDraftFromTree,
+          openNewWorktreeDialog,
+          openWorktreesPage: (projectId) => {
+            if (mobileVariant) setSessionSwitcherOpen(false);
+            setWorktreesPageProjectId(projectId);
+          },
+          openProjectEditDialog: setEditingProjectDialogId,
+          removeProject,
+          reorderProjects,
+          initialActiveSessionByProject,
+          persistActiveSessionByProject,
+          projectViewActions: projectView.actions,
+        }}
+      />
 
       <SidebarFooter
         onOpenSettings={handleOpenSettings}
@@ -2033,7 +680,7 @@ const SessionSidebarComponent: React.FC<SessionSidebarProps> = ({
         open={newWorktreeDialogOpen}
         onOpenChange={setNewWorktreeDialogOpen}
         onWorktreeCreated={(worktreePath, options) => {
-          setActiveMainTab('chat');
+          useUIStore.getState().closeMainSurfaces();
           if (mobileVariant) {
             setSessionSwitcherOpen(false);
           }
@@ -2045,27 +692,6 @@ const SessionSidebarComponent: React.FC<SessionSidebarProps> = ({
         }}
       />
 
-      <SessionDeleteConfirmDialog
-        value={deleteSessionConfirm}
-        setValue={setDeleteSessionConfirm}
-        showDeletionDialog={showDeletionDialog}
-        setShowDeletionDialog={setShowDeletionDialog}
-        onConfirm={confirmDeleteSession}
-      />
-
-      <FolderDeleteConfirmDialog
-        value={deleteFolderConfirm}
-        setValue={setDeleteFolderConfirm}
-        onConfirm={confirmDeleteFolder}
-      />
-
-      <BulkSessionDeleteConfirmDialog
-        value={bulkDeleteConfirm}
-        setValue={setBulkDeleteConfirm}
-        showDeletionDialog={showDeletionDialog}
-        setShowDeletionDialog={setShowDeletionDialog}
-        onConfirm={confirmBulkDelete}
-      />
     </div>
     </TooltipProvider>
   );
diff --git a/packages/ui/src/components/session/SessionSwitcherDropdown.tsx b/packages/ui/src/components/session/SessionSwitcherDropdown.tsx
index c07208b6..91a874cc 100644
--- a/packages/ui/src/components/session/SessionSwitcherDropdown.tsx
+++ b/packages/ui/src/components/session/SessionSwitcherDropdown.tsx
@@ -11,7 +11,7 @@ import { Icon } from '@/components/icon/Icon';
 import { useSessionUIStore } from '@/sync/session-ui-store';
 import { useGlobalSessionStatus } from '@/sync/sync-context';
 import { useSessionUnseenCount } from '@/sync/notification-store';
-import { useSwitcherItems, type SwitcherItem } from '@/components/session/sidebar/hooks/useSwitcherItems';
+import { useSwitcherItems, type SwitcherItem } from '@/components/session/sidebar/shell/useSwitcherItems';
 import { useUIStore } from '@/stores/useUIStore';
 import { resolveGlobalSessionDirectory } from '@/stores/useGlobalSessionsStore';
 import { formatSessionCompactDateLabel } from './sidebar/utils';
@@ -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/ProjectNotesTodoPanel.tsx b/packages/ui/src/components/session/project-context/ProjectNotesTodoPanel.tsx
index e25a2bfa..e26b70ca 100644
--- a/packages/ui/src/components/session/project-context/ProjectNotesTodoPanel.tsx
+++ b/packages/ui/src/components/session/project-context/ProjectNotesTodoPanel.tsx
@@ -135,6 +135,7 @@ export const ProjectNotesTodoPanel: React.FC<ProjectNotesTodoPanelProps> = ({
   const globalMemory = useAgentMemoryStore((state) => state.global);
   const projectMemory = useAgentMemoryStore((state) => state.project);
 
+  const isMobile = useUIStore((state) => state.isMobile);
   const storedTab = useUIStore((state) => state.projectContextTab);
   const setStoredTab = useUIStore((state) => state.setProjectContextTab);
   const requestedTab = TAB_ORDER.includes(storedTab as ProjectContextTab)
@@ -413,6 +414,42 @@ export const ProjectNotesTodoPanel: React.FC<ProjectNotesTodoPanelProps> = ({
 
       </div>
 
+      {/* Mobile: a half-width panel has no room for a side column, so the
+          sections become the same pill strip the mobile drawer's surface
+          tabs use — the active pill carries the label, the rest collapse to
+          icon and count. */}
+      {isMobile ? (
+        <nav
+          className="flex flex-shrink-0 items-center gap-1.5 overflow-x-auto px-3 pb-2"
+          aria-label={t('rightSidebar.contextNotesTodo.sections.label')}
+        >
+          {sections.map((section) => {
+            const isActive = activeTab === section.id;
+            return (
+              <button
+                key={section.id}
+                type="button"
+                onClick={() => setStoredTab(section.id)}
+                aria-current={isActive ? 'page' : undefined}
+                className={cn(
+                  'flex flex-shrink-0 items-center gap-1.5 rounded-full border px-3 py-1.5 transition-colors',
+                  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
+                  isActive
+                    ? 'border-transparent bg-interactive-active text-foreground'
+                    : 'border-[var(--interactive-border)] text-muted-foreground',
+                )}
+              >
+                <Icon name={section.icon} className="h-4 w-4 flex-shrink-0" />
+                {isActive ? (
+                  <span className="whitespace-nowrap typography-meta">{section.label}</span>
+                ) : null}
+                <span className="typography-micro text-muted-foreground">{section.count}</span>
+              </button>
+            );
+          })}
+        </nav>
+      ) : null}
+
       {/* Content first, sidebar on the right — the same order and the same
           drag-to-resize edge the files surface uses, so the two panels do not
           disagree about where navigation lives. */}
@@ -472,6 +509,7 @@ export const ProjectNotesTodoPanel: React.FC<ProjectNotesTodoPanelProps> = ({
         ) : null}
         </div>
 
+        {isMobile ? null : (
         <nav
           className="relative flex flex-shrink-0 flex-col gap-0.5 overflow-y-auto border-l border-[var(--interactive-border)] p-2"
           style={{ width: `${sidebarWidth}px` }}
@@ -514,6 +552,7 @@ export const ProjectNotesTodoPanel: React.FC<ProjectNotesTodoPanelProps> = ({
             );
           })}
         </nav>
+        )}
       </div>
 
       <TodoSendDialog
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/DOCUMENTATION.md b/packages/ui/src/components/session/sidebar/DOCUMENTATION.md
index 0e894e2d..15a94964 100644
--- a/packages/ui/src/components/session/sidebar/DOCUMENTATION.md
+++ b/packages/ui/src/components/session/sidebar/DOCUMENTATION.md
@@ -1,89 +1,37 @@
-# Session Sidebar Documentation
+# Session Sidebar
 
-## Refactor result
+Sidebar code is organized by the business object it owns. Shared contracts are
+kept at this root in `types.ts` and `utils.tsx`.
 
-- `SessionSidebar.tsx` now acts mainly as orchestration; core logic moved to focused hooks/components.
-- Layout (web/desktop): top navigation (`SidebarNav`: New session, Scheduled, Multi-run, Archive), then the `recent` zone, then one zone per project with a **flat** session list. There is no rendered worktree grouping level.
-- **Two grouping display modes** (`useSessionDisplayStore.sessionGroupingMode`, toggled in the view dropdown): `'by-worktree'` (default) renders the worktree-grouped `sectionsForRender` with slim PR-aware branch sub-headers inside each project zone; `'flat'` renders `flatSectionsForRender` — one merged non-archived group per project (`id: 'flat'`, `folderScopes` listing every contributing scope) with per-row branch markers. Both derive from the same `projectSections` data layer, which alone feeds bootstrap demand planning and PR polling.
-- **Project display is independent from grouping.** `'all'` keeps every project zone; `'single'` is web/desktop/PWA-only and renders one selected project under the always-present Chats section. Its project header is a non-collapsible picker ordered by the current project sort. Recent and collapse/expand-all controls are hidden without changing their persisted preferences. Opening a materialized project session updates the picker from the session's confirmed directory; changing only a draft target does not. In `'single'` + `'flat'`, active sessions reveal in batches of 20. `'single'` + `'by-worktree'` retains the ordinary per-group limits. Project display mode, session grouping, project sort, and the Recent preference are server-backed shared settings with the hydrated browser store as the migration/failure cache. The selected single project and sticky-header preference remain device-local.
-- When sticky zone headers are enabled, project headers are sticky "zone" bands (`SortableProjectItem`); on a vibrant desktop the scrolling content fades behind an unmasked, non-interactive copy of the stuck icon/title without painting a background. The transparent fade zone blocks interaction with obscured rows. The `recent` section uses the same overlay while it is the leading sticky header. Collapsed projects show an aggregated busy/unseen indicator (`ProjectAggregateStatusIndicator`), derived from the live status index and notification store scoped to the project's directories.
-- **Activity is a dot plus a counter, never a spinner.** The row's left gutter shows a static dot — primary while the session runs (`busy`/`retry`), info while it is unread — and the metadata slot on the right swaps the goal/branch/date group for the elapsed time of the turn (`SessionActivityDuration`, ticking once per second). The readout takes the dot's color in each state — primary while running, info once it is waiting to be read — so the pair reads as one indicator. A running spinner repainted a composited layer per row every frame for the whole turn; the counter conveys the same "something is happening" at 1 fps. The counter follows the unread marker's lifetime exactly: it survives the turn ending, disappears when the session is read, and never lingers on the session being watched (which is marked read as it goes idle). Aggregate indicators for collapsed groups, folders, and projects show the dot only — a group may hold several running turns, so a single counter would have nothing to count. The same treatment applies to the mobile sessions sheet and session switcher rows. The worktree-move indicator stays a spinner: it marks a short user-initiated operation, not a session state.
-- Session rows have a single layout (former `minimal`); the `default`/`minimal` display mode was removed (`session-display-mode` store v4 migration drops the key). Rows show an inline branch label (from `node.worktree` or recent's `secondaryMeta`) when the session lives outside the project root, and bold titles while unread.
-- Folders render **flat** after the loose sessions: nested folders keep `parentId` in the data model but display at one level with a "Parent / Child" path label (`SessionFolderItem.displayName`); collapsing a folder hides its whole subtree. Folder actions resolve their owning scope per folder entry (folders from multiple worktree scopes can coexist under one project).
-- Archived sessions are not shown in the web/desktop sidebar; the Archive page (`ArchiveView`, `useUIStore.isArchivePageOpen`) replaces the old toggle. VS Code keeps inline archived buckets behind `showArchivedSessions` (compact webview has no page surfaces). Restore (unarchive) is available per session (row context menu, Archive page row) and in bulk (selection bar) and writes `time.archived = 0` — the server cannot clear the field over HTTP, so the global session cache splits active/archived client-side (see "Restore (unarchive) contract" in `sync/DOCUMENTATION.md`).
-- Scheduled tasks (`ScheduledTasksDialog`, now a full-page surface on web/desktop) and per-project worktree management (`WorktreesView`, opened from the project menu) render as overlays inside `<main>` in `MainLayout`; the sidebar no longer mounts them.
-- Group-level PR-status polling/indicators and worktree-group drag-to-reorder were removed together with the worktree grouping level; `oc.sessions.groupOrder` is no longer read or written. Worktree PR/branch context lives in the Worktrees surface.
-- Root session menus can quickly create a worktree from the session directory's current branch and move the full session subtree there while idle.
-- Managed Chats never offer the worktree-move action in either the sidebar row menu or the active-session header menu because their directories are not project repositories.
-- Managed Chats use the shared Chats root as their folder scope. Their activity section renders the normal folder tree, and sessions created from a Chats folder are assigned back to that root-scoped folder after their date/session directory materializes. Per-session folder scopes created by older builds remain visible for compatibility.
-- An empty Chats section says that there are no chats yet; it never reuses the project/workspace empty message.
-- The New session keyboard command inherits the active materialized session directory. Explicit sidebar entry points, including the top New session row and the Chats `+`, open a fresh managed Chat draft instead.
-- The new-worktree keyboard command is a silent no-op while a managed Chat draft is open. It must not retarget that draft to the active project or show a Git/worktree error because Chats never participate in worktrees.
-- Directory loading is demand-driven: the sidebar publishes one complete priority plan for all known project/worktree directories, while the sync layer owns bounded execution.
-- When multiple configured projects are checkouts of the same Git repository, exactly one project owns the shared worktree topology: the configured canonical primary root when present, otherwise the first configured source for that repository. Any worktree path that is also a configured project is omitted from subordinate worktree groups, so every directory has one sidebar location while remaining part of bootstrap demand.
+- `shell/` owns sidebar chrome, navigation, search, confirmations, and switcher effects.
+- `list/` owns global-first session collection, directory bootstrap demand,
+  layout-owned synchronization, authoritative cleanup, and nearby-session prefetch.
+- `projects/` owns project zones, grouping, ordering, scroller behavior, project
+  view state, repository state, and worktree presentation.
+- `sessions/` owns session rows, row actions, expansion, ownership, and activity indicators.
+- `recent/` owns Recent and managed Chats activity projections.
+- `folders/` owns folder DnD, bulk actions, archived folders, and folder UI.
 
-## VS Code grouping
+`MainLayout` and `VSCodeLayout` call `useSessionListSync({ isVSCode })`
+unconditionally. The hook publishes complete directory bootstrap demand,
+refreshes newly added topology, coalesces control events, and performs
+authoritative cleanup. Root-level `useGlobalSessionsPolling` remains the only
+initial and 45-second global poller. `useSessionListSync` must not create a
+second global polling lifecycle.
 
-- VS Code uses the **same grouped project tree** as web/desktop (project headers + folders + pinned-first ordering), not a separate flat list. Each open VS Code workspace folder is a project header.
-- VS Code groups strictly **by open workspace**: `useSessionGrouping` funnels every non-archived session into the project's root group and emits **no per-worktree subgroups** (worktrees aren't registered in VS Code). `getSessionsForProject` buckets sessions to a workspace by exact directory match, so only sessions whose directory is an open workspace folder appear.
-- VS Code passes `hideDirectoryControls` (clean workspace headers, no worktree/close chrome) and no longer passes `showOnlyMainWorkspace`/`sharedSessionsOnly`. Folders and pinning therefore work natively, scoped to the workspace root.
+The global sessions cache is the complete source for active and archived
+coverage. Initialized directory stores only supply sessions missing from that
+cache. Live busy and retry state comes from `global-session-status`, never from
+the global cache or persisted history. A failed global or directory fetch keeps
+existing data; it is never treated as an authoritative empty list.
 
-## File summaries
+Web and desktop show managed Chats before optional Recent activity. Chats use
+their shared managed root for folders and never expose worktree actions. Project
+display can be all projects or one selected project. VS Code excludes worktrees
+and managed Chats, while retaining its workspace-scoped grouped list and inline
+archived buckets.
 
-### Components
-
-- `SidebarHeader.tsx`: Top header UI for add-project, session search, selection mode, project sort, and the display menu (recent toggle, collapse/expand all).
-- A successful add/create/clone from the project-directory dialog transitions to a new-session draft targeted at that project, matching the project's `+` action; changing project metadata alone must not leave the visible session or draft on a different directory.
-- `SidebarNav.tsx`: Text navigation rows above the tree (New session, Scheduled, Multi-run, Archive); hidden in VS Code.
-- `SidebarActivitySections.tsx`: Global top section renderer for OpenChamber-managed `chats` followed by optional project-only `recent` sessions, styled as zone headers. The desktop sticky identity overlay follows the activity header whose sentinel has crossed the scroller edge, so a small scroll cannot relabel Chats as Recent.
-- `SidebarFooter.tsx`: Static footer with icon-only settings, shortcuts, and about actions.
-- `SidebarProjectsList.tsx`: Main scrollable renderer for project zones and their flat/archived groups plus empty/search states; owns project drag-to-reorder.
-- `SessionGroupSection.tsx`: Renders one flat (or archived) group: sessions first, then flat folder entries with path labels, show-more batching, and explicit loading/error/retry state for empty groups. Archived buckets (VS Code) virtualize past 50 rows.
-- `SessionNodeItem.tsx`: Renders one session row/tree node with a single-line layout, inline branch label, indicators, menu actions, and nested children. Pending-question counts stay per-session while expanded and roll up hidden descendants from their owning directory stores while collapsed. Rows do not initiate directory bootstrap on mount.
-- `collapsedActivityIndicator.tsx`: Aggregate busy/unseen dot for collapsed groups and folders.
-- `ConfirmDialogs.tsx`: Shared confirm dialog wrappers for session delete and folder delete flows.
-- `sortableItems.tsx`: DnD sortable wrapper for project ordering plus the sticky zone-band project header and its action affordances.
-- `sessionFolderDnd.tsx`: Folder/session DnD scope and wrappers for dropping/moving sessions into folders.
-- `sessionOwnership.ts`: Resolves session directories once into shared project/worktree ownership and folder-scope indexes.
-
-### Hooks
-
-- `hooks/useSessionActions.ts`: Centralizes session row actions (select/open, rename, share/unshare, archive/delete, confirmations).
-- `hooks/useSessionSearchEffects.ts`: Handles search open/close UX and input focus behavior.
-- `hooks/useSessionPrefetch.ts`: Publishes directory-aware nearby/active session prefetch demand to the shared message loader. Recent may prefetch across projects without substituting the current directory.
-- `hooks/useSessionGrouping.ts`: Builds grouped session structures and search text/filter helpers.
-- `hooks/useSessionSidebarSections.ts`: Composes final per-project sections and group search metadata for rendering.
-- `hooks/useProjectSessionSelection.ts`: Resolves active/current project-session selection logic and session-directory context.
-- `hooks/useArchivedAutoFolders.ts`: Maintains archived auto-folder structure and assignment behavior.
-- `hooks/useSidebarPersistence.ts`: Persists sidebar UI state (expanded/collapsed/pinned/group order/active session) to storage + desktop settings.
-- `hooks/useProjectRepoStatus.ts`: Tracks per-project git-repo state and root branch metadata.
-- `hooks/useProjectSessionLists.ts`: Reads live and archived project buckets from the shared ownership index.
-- `hooks/useAuthoritativeSessionCleanup.ts`: Establishes the first complete active+archived list as a non-destructive baseline, then cleans persisted state only for sessions omitted by a later authoritative snapshot.
-- `hooks/useStickyProjectHeaders.ts`: Tracks which project headers are sticky/stuck via `IntersectionObserver`.
-
-### Types and utilities
-
-- `types.ts`: Shared sidebar types (`SessionNode`, `SessionGroup`, summary/search metadata).
-- `activitySections.ts`: Persisted top-section storage/helpers for the current `recent` session list.
-- `sessionBootstrapDemands.ts`: Builds the deduplicated directory demand plan. Selected directories rank above active projects, expanded groups, visible collapsed groups, and background/collapsed projects.
-- `utils.tsx`: Shared sidebar utilities (path normalization, dedupe, archived scope keys, project relation checks, text highlight, labels, compact/default date formatting). Shared session ranking lives in `sync/session-ordering.ts`.
-
-## Loading rules
-
-- Always publish every known project root and worktree directory. Collapse/visibility changes priority only; they do not opt a directory out of authoritative refresh.
-- Current directory and selected-session directory are `selected` demand and therefore run first.
-- Expanded projects/worktrees outrank merely visible and background groups.
-- The sync scheduler deduplicates, promotes, retries, and limits work. Sidebar components must not reproduce that lifecycle with mount effects.
-- Hide speculative work when the sidebar/chat surface is hidden: message prefetch, Git/PR enrichment and subscriptions, search listeners, sticky-header observation, and archived-folder derivation stop. The session row tree unmounts so row-owned status, permission, unseen, and viewport subscriptions do no background work. The outer sidebar remains mounted, preserving UI state and authoritative directory refresh for an immediate reopen; deferred derived work reruns from current state when visibility returns.
-- The sidebar does not subscribe its whole tree to the cross-directory live-session aggregate. Global create/structural/lifecycle snapshots drive rendered session metadata; the cached sync index only fills sessions not yet present globally and provides refresh fallback data. Row activity continues to come from the session-keyed live status index.
-- Session selection does not invalidate the sidebar orchestration component. Each mounted row selects only whether its own session ID is active, while parent expansion, project selection memory, and neighbor prefetch run in small effect-only subscribers.
-- Parent expansion is exclusively manual. Selecting or navigating to a subsession never expands its parent automatically. Project/worktree and `recent` trees use independent persisted context keys and receive separate stable projections, so expansion changes in one context neither invalidate nor change the other. The persisted storage key remains `v3`; older state mixed contexts and is not migrated into this contract.
-- Folder membership may contain both a parent session and its descendants. Rendering treats only the highest assigned ancestors as folder roots because their normal session trees already include assigned descendants; persisted membership remains unchanged for cleanup and move semantics.
-- Sidebar selection holds the clicked row's viewport position across navigation-driven sidebar updates. Wheel or touch input cancels the hold immediately, so programmatic compensation never fights intentional scrolling.
-- Global session subscriptions are structural: create/delete, title, share, archive, directory, parent, and slug changes invalidate the tree. Recency-only `time.updated` changes do not trigger a rebuild. The separate lifecycle rank invalidates ordering only on `settled ↔ active` transitions, with root sessions ranked among roots and child sessions only among siblings of the same parent.
-- CLI/server-created sessions use the low-frequency OpenChamber control event stream to refresh only the created session directory. The same event retriggers bounded worktree discovery so a newly created external worktree gains ownership without a view reload; it does not re-enable broad session or streaming subscriptions.
-- Recent membership includes active root sessions immediately even when their last committed `time.updated` falls outside the 48-hour window. Children and archived sessions remain excluded, and inactive roots remain timestamp-based. The active-ID subscription is disabled while the sidebar is hidden and ignores retry/status detail changes, avoiding streaming-frequency rerenders.
-- Structural updates rebuild grouped nodes only for projects whose local sessions, worktrees, repository state, or branch changed; unchanged project sections preserve references so memoized group/session descendants skip the update wave.
-- Empty successful lists, unresolved loads, and failed loads are separate UI states. Failed groups expose Retry and retain prior data.
-- Directory permission failures remain visible even when stale sessions are retained. Flat groups inspect every represented root/worktree directory; local Desktop may open the native picker for the exact failed directory, while other runtimes keep the ordinary Retry action.
-- Pins and folder assignments are not pruned from the first startup snapshot or from optimistic mutations. Confirmed local deletion and routed external deletion clean immediately; a later authoritative omission after an established baseline covers missed external delete events.
+Directory demand always includes known project roots and worktrees. Visibility
+only changes priority. Row mounts must not start bootstrap work. Selection and
+activity subscriptions stay session-scoped so a structural list update does not
+make every row observe unrelated streaming updates.
diff --git a/packages/ui/src/components/session/sidebar/activitySections.ts b/packages/ui/src/components/session/sidebar/activitySections.ts
deleted file mode 100644
index 5c689d7d..00000000
--- a/packages/ui/src/components/session/sidebar/activitySections.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import type { Session } from '@opencode-ai/sdk/v2';
-
-const RECENT_SESSION_MAX_AGE_MS = 48 * 60 * 60 * 1000;
-
-const isSubtaskSession = (session: Session): boolean => {
-  return Boolean((session as Session & { parentID?: string | null }).parentID);
-};
-
-const isArchivedSession = (session: Session): boolean => {
-  return Boolean(session.time?.archived);
-};
-
-const getSessionUpdatedAt = (session: Session): number => {
-  const updated = session.time?.updated;
-  const created = session.time?.created;
-  if (typeof updated === 'number' && Number.isFinite(updated)) {
-    return updated;
-  }
-  if (typeof created === 'number' && Number.isFinite(created)) {
-    return created;
-  }
-  return 0;
-};
-
-// Recent contains non-archived root sessions that are active now or were
-// updated within the retention window. The caller applies shared lifecycle
-// ordering after this membership filter; batching ("Show more") handles long
-// windows in the UI.
-export const deriveRecentSessions = (
-  sessions: Session[],
-  activeSessionIds: ReadonlySet<string>,
-  now = Date.now(),
-): Session[] => {
-  const minUpdatedAt = now - RECENT_SESSION_MAX_AGE_MS;
-  return sessions.filter((session) => {
-    if (isArchivedSession(session) || isSubtaskSession(session)) {
-      return false;
-    }
-    return activeSessionIds.has(session.id) || getSessionUpdatedAt(session) >= minUpdatedAt;
-  });
-};
diff --git a/packages/ui/src/components/session/sidebar/collapsedActivityState.ts b/packages/ui/src/components/session/sidebar/collapsedActivityState.ts
deleted file mode 100644
index 18827e32..00000000
--- a/packages/ui/src/components/session/sidebar/collapsedActivityState.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import type { Session } from '@opencode-ai/sdk/v2';
-import type { SessionNode } from './types';
-
-export type CollapsedActivityState = 'active' | 'unread' | null;
-
-export const mergeCollapsedActivityStates = (
-  current: CollapsedActivityState,
-  next: CollapsedActivityState,
-): CollapsedActivityState => {
-  if (current === 'active' || next === 'active') return 'active';
-  if (current === 'unread' || next === 'unread') return 'unread';
-  return null;
-};
-
-const getSessionNodeActivityState = (
-  node: SessionNode,
-  activeSessionIds: Set<string>,
-  unreadSessionIds: Set<string>,
-  includeUnreadSubtasks: boolean,
-): CollapsedActivityState => {
-  if (activeSessionIds.has(node.session.id)) {
-    return 'active';
-  }
-
-  let state: CollapsedActivityState = null;
-  const isSubtask = Boolean((node.session as Session & { parentID?: string | null }).parentID);
-  if (unreadSessionIds.has(node.session.id) && (includeUnreadSubtasks || !isSubtask)) {
-    state = 'unread';
-  }
-
-  for (const child of node.children) {
-    state = mergeCollapsedActivityStates(
-      state,
-      getSessionNodeActivityState(child, activeSessionIds, unreadSessionIds, includeUnreadSubtasks),
-    );
-    if (state === 'active') return state;
-  }
-
-  return state;
-};
-
-export const getSessionNodesActivityState = (
-  nodes: SessionNode[],
-  activeSessionIds: Set<string>,
-  unreadSessionIds: Set<string>,
-  includeUnreadSubtasks: boolean,
-): CollapsedActivityState => {
-  let state: CollapsedActivityState = null;
-  for (const node of nodes) {
-    state = mergeCollapsedActivityStates(
-      state,
-      getSessionNodeActivityState(node, activeSessionIds, unreadSessionIds, includeUnreadSubtasks),
-    );
-    if (state === 'active') return state;
-  }
-  return state;
-};
diff --git a/packages/ui/src/components/session/sidebar/BulkActionBar.tsx b/packages/ui/src/components/session/sidebar/folders/BulkActionBar.tsx
similarity index 100%
rename from packages/ui/src/components/session/sidebar/BulkActionBar.tsx
rename to packages/ui/src/components/session/sidebar/folders/BulkActionBar.tsx
diff --git a/packages/ui/src/components/session/sidebar/folders/SessionBulkActions.behavior.test.tsx b/packages/ui/src/components/session/sidebar/folders/SessionBulkActions.behavior.test.tsx
new file mode 100644
index 00000000..edb9a4d3
--- /dev/null
+++ b/packages/ui/src/components/session/sidebar/folders/SessionBulkActions.behavior.test.tsx
@@ -0,0 +1,79 @@
+import { describe, expect, mock, test } from 'bun:test';
+import React, { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { I18nProvider } from '@/lib/i18n';
+import { useSessionFoldersStore } from '@/stores/useSessionFoldersStore';
+import { useSessionMultiSelectStore } from '@/stores/useSessionMultiSelectStore';
+import { installHookTestDom } from '../test-utils/testDom';
+
+type BulkActionCapture = {
+  onCreateFolderAndMove: () => void;
+};
+
+let bulkActionCapture: BulkActionCapture | null = null;
+
+mock.module('./BulkActionBar', () => ({
+  BulkActionBar: (props: BulkActionCapture) => {
+    bulkActionCapture = props;
+    return null;
+  },
+}));
+
+mock.module('./ConfirmDialogs', () => ({
+  BulkSessionDeleteConfirmDialog: () => null,
+}));
+
+const { SessionBulkActions } = await import('./SessionBulkActions');
+
+describe('SessionBulkActions public behavior', () => {
+  test('moves the selected sessions into a newly created folder while a row edit is active', async () => {
+    const dom = installHookTestDom();
+    const root = createRoot(dom.container);
+    const originalFolders = useSessionFoldersStore.getState();
+    const originalSelection = useSessionMultiSelectStore.getState();
+    const cssDescriptor = Object.getOwnPropertyDescriptor(globalThis, 'CSS');
+    const renameRequests: Array<{ scopeKey: string; folder: { id: string; name: string } }> = [];
+    const moved: Array<{ scopeKey: string; folderId: string; ids: string[] }> = [];
+    useSessionFoldersStore.setState({
+      foldersMap: {},
+      addSessionsToFolder: (scopeKey, folderId, ids) => moved.push({ scopeKey, folderId, ids }),
+    });
+    useSessionMultiSelectStore.setState({
+      enabled: true,
+      selectedIds: new Set(['session-a']),
+      scopeKey: 'project-a',
+      anchorId: 'session-a',
+    });
+    Object.defineProperty(globalThis, 'CSS', {
+      configurable: true,
+      value: { escape: (value: string) => value },
+    });
+
+    try {
+      await act(async () => root.render(
+        <I18nProvider>
+          <SessionBulkActions
+            getFolderScopesForProject={() => [{ scopeKey: '/workspace', directory: '/workspace' }]}
+            isInlineEditing
+            startFolderRename={(scopeKey, folder) => renameRequests.push({ scopeKey, folder })}
+          />
+        </I18nProvider>,
+      ));
+      expect(bulkActionCapture).not.toBeNull();
+
+      await act(async () => bulkActionCapture?.onCreateFolderAndMove());
+       const createdFolder = useSessionFoldersStore.getState().foldersMap['/workspace']?.[0];
+       expect(createdFolder?.name).toBe('New folder');
+       expect(renameRequests).toEqual([{ scopeKey: '/workspace', folder: createdFolder }]);
+       expect(moved).toEqual([{ scopeKey: '/workspace', folderId: createdFolder?.id ?? '', ids: ['session-a'] }]);
+    } finally {
+      await act(async () => root.unmount());
+      useSessionFoldersStore.setState(originalFolders, true);
+      useSessionMultiSelectStore.setState(originalSelection, true);
+      if (cssDescriptor) Object.defineProperty(globalThis, 'CSS', cssDescriptor);
+      else Reflect.deleteProperty(globalThis, 'CSS');
+      bulkActionCapture = null;
+      dom.restore();
+    }
+  });
+});
diff --git a/packages/ui/src/components/session/sidebar/folders/SessionBulkActions.tsx b/packages/ui/src/components/session/sidebar/folders/SessionBulkActions.tsx
new file mode 100644
index 00000000..8af5a023
--- /dev/null
+++ b/packages/ui/src/components/session/sidebar/folders/SessionBulkActions.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import { useSessionUIStore } from '@/sync/session-ui-store';
+import { useUIStore } from '@/stores/useUIStore';
+import { useSessionFoldersStore } from '@/stores/useSessionFoldersStore';
+import { BulkActionBar } from './BulkActionBar';
+import { BulkSessionDeleteConfirmDialog, type BulkDeleteSessionsConfirmState } from '../shell/ConfirmDialogs';
+import { useSidebarBulkActions } from './useSidebarBulkActions';
+
+type Props = {
+  getFolderScopesForProject: (projectId: string) => readonly { scopeKey: string; directory: string | null }[];
+  isInlineEditing: boolean;
+  startFolderRename: (scopeKey: string, folder: { id: string; name: string }) => void;
+};
+
+/** Owns the sidebar selection projection and its destructive confirmation. */
+export function SessionBulkActions({ getFolderScopesForProject, isInlineEditing, startFolderRename }: Props): React.ReactNode {
+  const [bulkDeleteConfirm, setBulkDeleteConfirm] = React.useState<BulkDeleteSessionsConfirmState>(null);
+  const showDeletionDialog = useUIStore((state) => state.showDeletionDialog);
+  const setShowDeletionDialog = useUIStore((state) => state.setShowDeletionDialog);
+  const foldersMap = useSessionFoldersStore((state) => state.foldersMap);
+  const createFolder = useSessionFoldersStore((state) => state.createFolder);
+  const addSessionsToFolder = useSessionFoldersStore((state) => state.addSessionsToFolder);
+  const removeSessionsFromFolders = useSessionFoldersStore((state) => state.removeSessionsFromFolders);
+  const archiveSessions = useSessionUIStore((state) => state.archiveSessions);
+  const unarchiveSessions = useSessionUIStore((state) => state.unarchiveSessions);
+  const deleteSessions = useSessionUIStore((state) => state.deleteSessions);
+  const bulk = useSidebarBulkActions({
+    isInlineEditing,
+    showDeletionDialog,
+    foldersMap,
+    getFolderScopesForProject,
+    addSessionsToFolder,
+    removeSessionsFromFolders,
+    createFolderAndStartRename: (scopeKey) => {
+      const folder = createFolder(scopeKey, 'New folder');
+      startFolderRename(scopeKey, folder);
+      return folder;
+    },
+    archiveSessions,
+    unarchiveSessions,
+    deleteSessions,
+    setBulkDeleteConfirm,
+  });
+
+  return <>
+    {bulk.selectionModeEnabled && bulk.hasSelection ? <BulkActionBar
+      selectedCount={bulk.selectedIdsSize}
+      scopeKey={bulk.derivedSelectionScope}
+      scopeFolders={bulk.bulkScopeFolders}
+      archivedBucket={bulk.bulkScopeIsArchived}
+      onMoveToFolder={bulk.handleBulkMoveToFolder}
+      onCreateFolderAndMove={bulk.handleBulkCreateFolderAndMove}
+      onRemoveFromFolder={bulk.handleBulkRemoveFromFolder}
+      canRemoveFromFolder={bulk.bulkCanRemoveFromFolder}
+      onRestore={bulk.handleBulkRestore}
+      onDelete={bulk.handleBulkDelete}
+      onDone={bulk.handleExitSelectionMode}
+    /> : null}
+    <BulkSessionDeleteConfirmDialog
+      value={bulkDeleteConfirm}
+      setValue={setBulkDeleteConfirm}
+      showDeletionDialog={showDeletionDialog}
+      setShowDeletionDialog={setShowDeletionDialog}
+      onConfirm={bulk.confirmBulkDelete}
+    />
+  </>;
+}
diff --git a/packages/ui/src/components/session/sidebar/folders/sessionFolderDnd.behavior.test.tsx b/packages/ui/src/components/session/sidebar/folders/sessionFolderDnd.behavior.test.tsx
new file mode 100644
index 00000000..3a7ed1f9
--- /dev/null
+++ b/packages/ui/src/components/session/sidebar/folders/sessionFolderDnd.behavior.test.tsx
@@ -0,0 +1,58 @@
+import { describe, expect, mock, test } from 'bun:test';
+import React, { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { installHookTestDom } from '../test-utils/testDom';
+
+type DragEnd = (event: {
+  active: { data: { current: { type: string; sessionId: string } } };
+  over: { data: { current: { type: string; folderId: string } } } | null;
+}) => void;
+
+let handleDragEnd: DragEnd | null = null;
+
+mock.module('@dnd-kit/core', () => ({
+  DndContext: ({ children, onDragEnd }: { children: React.ReactNode; onDragEnd: DragEnd }) => {
+    handleDragEnd = onDragEnd;
+    return <>{children}</>;
+  },
+  DragOverlay: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  PointerSensor: class {},
+  closestCenter: () => null,
+  useSensor: () => null,
+  useSensors: () => [],
+  useDraggable: () => ({ attributes: {}, listeners: {}, setNodeRef: () => undefined, isDragging: false }),
+  useDroppable: () => ({ setNodeRef: () => undefined, isOver: false }),
+}));
+
+const { SessionFolderDndScope } = await import('./sessionFolderDnd');
+
+describe('SessionFolderDndScope public behavior', () => {
+  test('routes a session-folder drop without depending on row edit or menu state', async () => {
+    const dom = installHookTestDom();
+    const root = createRoot(dom.container);
+    const drops: Array<{ sessionId: string; folderId: string }> = [];
+
+    try {
+      await act(async () => root.render(
+        <SessionFolderDndScope
+          scopeKey="/workspace"
+          hasFolders
+          onSessionDroppedOnFolder={(sessionId, folderId) => drops.push({ sessionId, folderId })}
+        >
+          {null}
+        </SessionFolderDndScope>,
+      ));
+      expect(handleDragEnd).not.toBeNull();
+
+      await act(async () => handleDragEnd?.({
+        active: { data: { current: { type: 'session', sessionId: 'session-a' } } },
+        over: { data: { current: { type: 'folder', folderId: 'folder-a' } } },
+      }));
+      expect(drops).toEqual([{ sessionId: 'session-a', folderId: 'folder-a' }]);
+    } finally {
+      await act(async () => root.unmount());
+      handleDragEnd = null;
+      dom.restore();
+    }
+  });
+});
diff --git a/packages/ui/src/components/session/sidebar/sessionFolderDnd.tsx b/packages/ui/src/components/session/sidebar/folders/sessionFolderDnd.tsx
similarity index 100%
rename from packages/ui/src/components/session/sidebar/sessionFolderDnd.tsx
rename to packages/ui/src/components/session/sidebar/folders/sessionFolderDnd.tsx
diff --git a/packages/ui/src/components/session/sidebar/hooks/useArchivedAutoFolders.ts b/packages/ui/src/components/session/sidebar/folders/useArchivedAutoFolders.ts
similarity index 97%
rename from packages/ui/src/components/session/sidebar/hooks/useArchivedAutoFolders.ts
rename to packages/ui/src/components/session/sidebar/folders/useArchivedAutoFolders.ts
index 0031b36d..9ded6a87 100644
--- a/packages/ui/src/components/session/sidebar/hooks/useArchivedAutoFolders.ts
+++ b/packages/ui/src/components/session/sidebar/folders/useArchivedAutoFolders.ts
@@ -3,7 +3,7 @@ import {
   getArchivedScopeKey,
   resolveArchivedFolderName,
 } from '../utils';
-import type { SessionOwnershipIndex } from '../sessionOwnership';
+import type { SessionOwnershipIndex } from '../sessions/sessionOwnership';
 
 type ProjectForArchivedFolders = {
   id: string;
diff --git a/packages/ui/src/components/session/sidebar/folders/useSidebarBulkActions.test.ts b/packages/ui/src/components/session/sidebar/folders/useSidebarBulkActions.test.ts
new file mode 100644
index 00000000..f0d3d2ab
--- /dev/null
+++ b/packages/ui/src/components/session/sidebar/folders/useSidebarBulkActions.test.ts
@@ -0,0 +1,19 @@
+import { describe, expect, test } from 'bun:test';
+import { resolveSelectionFolderScopes } from './useSidebarBulkActions';
+
+describe('sidebar bulk project scopes', () => {
+  test('uses every root and worktree scope owned by the selected project', () => {
+    const scopes = resolveSelectionFolderScopes('project-a', (projectId) => projectId === 'project-a'
+      ? [
+        { scopeKey: '/workspace/project-a', directory: '/workspace/project-a' },
+        { scopeKey: '/workspace/project-a-worktree', directory: '/workspace/project-a-worktree' },
+      ]
+      : []);
+
+    expect(scopes).toEqual(['/workspace/project-a', '/workspace/project-a-worktree']);
+  });
+
+  test('keeps a directory scope when no project scope owns it', () => {
+    expect(resolveSelectionFolderScopes('/workspace/vscode', () => [])).toEqual(['/workspace/vscode']);
+  });
+});
diff --git a/packages/ui/src/components/session/sidebar/hooks/useSidebarBulkActions.ts b/packages/ui/src/components/session/sidebar/folders/useSidebarBulkActions.ts
similarity index 94%
rename from packages/ui/src/components/session/sidebar/hooks/useSidebarBulkActions.ts
rename to packages/ui/src/components/session/sidebar/folders/useSidebarBulkActions.ts
index af3c5428..a520f3d0 100644
--- a/packages/ui/src/components/session/sidebar/hooks/useSidebarBulkActions.ts
+++ b/packages/ui/src/components/session/sidebar/folders/useSidebarBulkActions.ts
@@ -13,7 +13,7 @@ type Args = {
    * map resolves it to the project's folder scopes (root + worktrees). When
    * the scope is missing here it is treated as a plain directory scope.
    */
-  folderScopesByProject: Map<string, Array<{ scopeKey: string; directory: string | null }>>;
+  getFolderScopesForProject: (projectId: string) => readonly { scopeKey: string; directory: string | null }[];
   addSessionsToFolder: (scopeKey: string, folderId: string, sessionIds: string[]) => void;
   removeSessionsFromFolders: (scopeKey: string, sessionIds: string[]) => void;
   createFolderAndStartRename: (scopeKey: string, parentId?: string | null) => { id: string } | null;
@@ -26,6 +26,17 @@ type Args = {
   } | null>>;
 };
 
+export const resolveSelectionFolderScopes = (
+  selectionScope: string | null,
+  getFolderScopesForProject: Args['getFolderScopesForProject'],
+): string[] => {
+  if (!selectionScope) return [];
+  const projectScopes = getFolderScopesForProject(selectionScope);
+  return projectScopes.length > 0
+    ? projectScopes.map((scope) => scope.scopeKey)
+    : [selectionScope];
+};
+
 /**
  * Bulk-action logic for the sidebar. The hot-path concern is that this
  * hook subscribes to `useSessionMultiSelectStore` — which can fire on
@@ -46,7 +57,7 @@ export const useSidebarBulkActions = (args: Args) => {
     isInlineEditing,
     showDeletionDialog,
     foldersMap,
-    folderScopesByProject,
+    getFolderScopesForProject,
     addSessionsToFolder,
     removeSessionsFromFolders,
     createFolderAndStartRename,
@@ -101,14 +112,8 @@ export const useSidebarBulkActions = (args: Args) => {
   // The selection scope is a project id; folders live per directory scope
   // (project root + each worktree). Resolve all of them, in project order.
   const selectionFolderScopes = React.useMemo<string[]>(() => {
-    if (!derivedSelectionScope) return [];
-    const projectScopes = folderScopesByProject.get(derivedSelectionScope);
-    if (projectScopes && projectScopes.length > 0) {
-      return projectScopes.map((scope) => scope.scopeKey);
-    }
-    // Fallback: the scope is already a directory (e.g. VS Code workspaces).
-    return [derivedSelectionScope];
-  }, [derivedSelectionScope, folderScopesByProject]);
+    return resolveSelectionFolderScopes(derivedSelectionScope, getFolderScopesForProject);
+  }, [derivedSelectionScope, getFolderScopesForProject]);
 
   const bulkScopeFolders = React.useMemo(() => {
     return selectionFolderScopes.flatMap((scope) => foldersMap[scope] ?? []);
diff --git a/packages/ui/src/components/session/sidebar/hooks/useAuthoritativeSessionCleanup.test.ts b/packages/ui/src/components/session/sidebar/hooks/useAuthoritativeSessionCleanup.test.ts
deleted file mode 100644
index d33089e5..00000000
--- a/packages/ui/src/components/session/sidebar/hooks/useAuthoritativeSessionCleanup.test.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { describe, expect, test } from 'bun:test';
-import type { Session } from '@opencode-ai/sdk/v2';
-import {
-  buildAuthoritativeSessionIdentityMap,
-  findRemovedAuthoritativeSessions,
-} from '../authoritativeSessionCleanup';
-
-const session = (id: string, directory = '/repo'): Session => ({ id, directory }) as Session;
-
-describe('authoritative session cleanup', () => {
-  test('does not infer deletion from the first authoritative startup snapshot', () => {
-    const current = buildAuthoritativeSessionIdentityMap([]);
-
-    expect(findRemovedAuthoritativeSessions(null, current)).toEqual([]);
-  });
-
-  test('finds sessions omitted after an established authoritative baseline', () => {
-    const previous = buildAuthoritativeSessionIdentityMap([
-      session('deleted'),
-      session('retained'),
-    ]);
-    const current = buildAuthoritativeSessionIdentityMap([session('retained')]);
-
-    expect(findRemovedAuthoritativeSessions(previous, current)).toEqual([
-      { directory: '/repo', sessionId: 'deleted' },
-    ]);
-  });
-
-  test('treats archive membership as retained authority', () => {
-    const previous = buildAuthoritativeSessionIdentityMap([session('archived')]);
-    const current = buildAuthoritativeSessionIdentityMap([
-      { ...session('archived'), time: { archived: 10 } } as Session,
-    ]);
-
-    expect(findRemovedAuthoritativeSessions(previous, current)).toEqual([]);
-  });
-
-  test('does not treat a directory move as session deletion', () => {
-    const previous = buildAuthoritativeSessionIdentityMap([session('moved', '/repo-a')]);
-    const current = buildAuthoritativeSessionIdentityMap([session('moved', '/repo-b')]);
-
-    expect(findRemovedAuthoritativeSessions(previous, current)).toEqual([]);
-  });
-});
diff --git a/packages/ui/src/components/session/sidebar/hooks/useSidebarPersistence.ts b/packages/ui/src/components/session/sidebar/hooks/useSidebarPersistence.ts
deleted file mode 100644
index d2e8604e..00000000
--- a/packages/ui/src/components/session/sidebar/hooks/useSidebarPersistence.ts
+++ /dev/null
@@ -1,123 +0,0 @@
-import React from 'react';
-import { updateDesktopSettings } from '@/lib/persistence';
-import { useProjectsStore } from '@/stores/useProjectsStore';
-
-type SafeStorageLike = {
-  getItem: (key: string) => string | null;
-  setItem: (key: string, value: string) => void;
-};
-
-type Keys = {
-  sessionExpanded: string;
-  projectCollapse: string;
-  groupOrder: string;
-  groupCollapse: string;
-};
-
-type Args = {
-  isVSCode: boolean;
-  safeStorage: SafeStorageLike;
-  keys: Keys;
-  groupOrderByProject: Map<string, string[]>;
-  collapsedGroups: Set<string>;
-  setExpandedParents: React.Dispatch<React.SetStateAction<Set<string>>>;
-  setCollapsedProjects: React.Dispatch<React.SetStateAction<Set<string>>>;
-};
-
-export const useSidebarPersistence = (args: Args) => {
-  const {
-    isVSCode,
-    safeStorage,
-    keys,
-    groupOrderByProject,
-    collapsedGroups,
-    setExpandedParents,
-    setCollapsedProjects,
-  } = args;
-
-  const persistCollapsedProjectsTimer = React.useRef<number | null>(null);
-  const pendingCollapsedProjects = React.useRef<Set<string> | null>(null);
-
-  const flushCollapsedProjectsPersist = React.useCallback(() => {
-    if (isVSCode) {
-      return;
-    }
-    const collapsed = pendingCollapsedProjects.current;
-    pendingCollapsedProjects.current = null;
-    persistCollapsedProjectsTimer.current = null;
-    if (!collapsed) {
-      return;
-    }
-
-    const { projects } = useProjectsStore.getState();
-    const updatedProjects = projects.map((project) => ({
-      ...project,
-      sidebarCollapsed: collapsed.has(project.id),
-    }));
-    void updateDesktopSettings({ projects: updatedProjects }).catch(() => {});
-  }, [isVSCode]);
-
-  const scheduleCollapsedProjectsPersist = React.useCallback((collapsed: Set<string>) => {
-    if (typeof window === 'undefined' || isVSCode) {
-      return;
-    }
-
-    pendingCollapsedProjects.current = collapsed;
-    if (persistCollapsedProjectsTimer.current !== null) {
-      window.clearTimeout(persistCollapsedProjectsTimer.current);
-    }
-    persistCollapsedProjectsTimer.current = window.setTimeout(() => {
-      flushCollapsedProjectsPersist();
-    }, 700);
-  }, [isVSCode, flushCollapsedProjectsPersist]);
-
-  React.useEffect(() => {
-    return () => {
-      if (typeof window !== 'undefined' && persistCollapsedProjectsTimer.current !== null) {
-        window.clearTimeout(persistCollapsedProjectsTimer.current);
-      }
-      persistCollapsedProjectsTimer.current = null;
-      pendingCollapsedProjects.current = null;
-    };
-  }, []);
-
-  React.useEffect(() => {
-    try {
-      const storedParents = safeStorage.getItem(keys.sessionExpanded);
-      if (storedParents) {
-        const parsed = JSON.parse(storedParents);
-        if (Array.isArray(parsed)) {
-          setExpandedParents(new Set(parsed.filter((item) => typeof item === 'string')));
-        }
-      }
-      const storedProjects = safeStorage.getItem(keys.projectCollapse);
-      if (storedProjects) {
-        const parsed = JSON.parse(storedProjects);
-        if (Array.isArray(parsed)) {
-          setCollapsedProjects(new Set(parsed.filter((item) => typeof item === 'string')));
-        }
-      }
-    } catch {
-      // ignored
-    }
-  }, [keys.projectCollapse, keys.sessionExpanded, safeStorage, setCollapsedProjects, setExpandedParents]);
-
-  React.useEffect(() => {
-    try {
-      const serialized = Object.fromEntries(groupOrderByProject.entries());
-      safeStorage.setItem(keys.groupOrder, JSON.stringify(serialized));
-    } catch {
-      // ignored
-    }
-  }, [groupOrderByProject, keys.groupOrder, safeStorage]);
-
-  React.useEffect(() => {
-    try {
-      safeStorage.setItem(keys.groupCollapse, JSON.stringify(Array.from(collapsedGroups)));
-    } catch {
-      // ignored
-    }
-  }, [collapsedGroups, keys.groupCollapse, safeStorage]);
-
-  return { scheduleCollapsedProjectsPersist };
-};
diff --git a/packages/ui/src/components/session/sidebar/list/SessionProjectCollection.test.tsx b/packages/ui/src/components/session/sidebar/list/SessionProjectCollection.test.tsx
new file mode 100644
index 00000000..194c0b58
--- /dev/null
+++ b/packages/ui/src/components/session/sidebar/list/SessionProjectCollection.test.tsx
@@ -0,0 +1,21 @@
+import { describe, expect, test } from 'bun:test';
+import { buildSessionBootstrapDemands } from './sessionBootstrapDemands';
+
+describe('SessionProjectCollection', () => {
+  test('preserves authoritative background demand when its visible rows are absent', () => {
+    const demands = buildSessionBootstrapDemands({
+      knownDirectories: ['/project', '/project/worktree'],
+      activeProjectDirectory: '/project',
+      activeProjectId: 'project',
+      collapsedProjects: new Set(),
+      collapsedGroups: new Set(),
+      currentDirectory: null,
+      currentSessionDirectory: null,
+    });
+
+    expect(demands.map((demand) => demand.directory)).toEqual(['/project', '/project/worktree']);
+    expect(demands[0]?.priority).toBe('active-project');
+    expect(demands[1]?.priority).toBe('background');
+  });
+
+});
diff --git a/packages/ui/src/components/session/sidebar/list/SessionProjectCollection.tsx b/packages/ui/src/components/session/sidebar/list/SessionProjectCollection.tsx
new file mode 100644
index 00000000..9ed3e620
--- /dev/null
+++ b/packages/ui/src/components/session/sidebar/list/SessionProjectCollection.tsx
@@ -0,0 +1,606 @@
+import React from 'react';
+import type { Session } from '@opencode-ai/sdk/v2';
+import { useSessionUIStore } from '@/sync/session-ui-store';
+import { usePrefetchSessionMessages } from '@/sync/use-sync';
+import { useUIStore } from '@/stores/useUIStore';
+import { useGitHubAuthStore } from '@/stores/useGitHubAuthStore';
+import { getGitHubPrStatusKey, useGitHubPrStatusStore } from '@/stores/useGitHubPrStatusStore';
+import { useRuntimeAPIs } from '@/hooks/useRuntimeAPIs';
+import { useArchivedAutoFolders } from '../folders/useArchivedAutoFolders';
+import { ProjectSessionSelectionEffect } from '../projects/useProjectSessionSelection';
+import type { WorktreeMetadata } from '@/types/worktree';
+import { useRecentSessionCollection, useSessionProjectCollection } from './sessionCollection';
+import { buildSessionBootstrapDemands } from './sessionBootstrapDemands';
+import { useChildStoreManager } from '@/sync/sync-context';
+import { createSessionOwnershipIndex } from '../sessions/sessionOwnership';
+import { useProjectSessionLists } from '../projects/useProjectSessionLists';
+import { useSessionSidebarSections } from '../projects/useSessionSidebarSections';
+import { SessionPrefetchEffect } from './useSessionPrefetch';
+import { normalizePath } from '../utils';
+import type { SessionGroup } from '../types';
+import { SessionProjectScroller } from '../projects/SessionProjectScroller';
+import { useSessionGrouping } from '../projects/useSessionGrouping';
+import { useStickyProjectHeaders } from '../projects/useStickyProjectHeaders';
+import { SessionBulkActions } from '../folders/SessionBulkActions';
+import { RecentSessionSection } from '../recent/RecentSessionSection';
+import { useSessionFoldersStore } from '@/stores/useSessionFoldersStore';
+import type { useSessionProjectViewState } from '../projects/useSessionProjectViewState';
+import { useSessionDisplayStore } from '@/stores/useSessionDisplayStore';
+import type { DeleteSessionConfirmState } from '../sessions/useSessionActions';
+import { useExpandedParents } from '../sessions/useExpandedParents';
+import { SessionGroupSection } from '../projects/SessionGroupSection';
+import { CHAT_DRAFT_PROJECT_ID, getChatsRootForHome, getChatsRootFromDirectory } from '@/lib/chatDirectories';
+import { isCapacitorApp } from '@/lib/platform';
+
+const PR_NO_PR_RETRY_MS = 5 * 60_000;
+
+const isRootSession = (session: Session): boolean => {
+  // SAFETY: OpenCode attaches parentID to hierarchical session records,
+  // although the SDK's base Session type does not currently declare it.
+  return !(session as Session & { parentID?: string | null }).parentID;
+};
+
+type Project = {
+  id: string;
+  path: string;
+  label?: string;
+  normalizedPath: string;
+  icon?: string;
+  color?: string;
+  iconImage?: { mime: string; updatedAt: number; source: 'custom' | 'auto' };
+  iconBackground?: string;
+};
+
+type SessionProjectCollectionProps = {
+  topology: {
+    projects: Project[];
+    availableWorktreesByProject: Map<string, WorktreeMetadata[]>;
+    knownDirectories: Set<string>;
+    isVSCode: boolean;
+    worktreeMetadata: Map<string, WorktreeMetadata>;
+    gitBranches: Map<string, string | null>;
+    projectRepoStatus: Map<string, boolean | null>;
+    projectRootBranches: Map<string, string | null>;
+    lastRepoStatus: boolean;
+  };
+  view: {
+    isVisible: boolean;
+    hasSessionSearchQuery: boolean;
+    normalizedSessionSearchQuery: string;
+    activeProjectId: string | null;
+    showInlineArchived: boolean;
+    useGroupedSections: boolean;
+    homeDirectory: string | null;
+    mobileVariant: boolean;
+    hideDirectoryControls: boolean;
+    showOnlyMainWorkspace: boolean;
+    isDesktopShellRuntime: boolean;
+    stickyZoneHeaders: boolean;
+    projectSortOrder: import('@/stores/useSessionDisplayStore').ProjectSortOrder;
+    emptyState: React.ReactNode;
+    searchEmptyState: React.ReactNode;
+    isSessionsLoading: boolean;
+    isWorktreeTopologyLoading: boolean;
+    unresolvedWorktreeProjectPaths: ReadonlySet<string>;
+    projectView: ReturnType<typeof useSessionProjectViewState>['state'];
+  };
+  actions: {
+    rowActions: {
+      allowReselect: boolean;
+      onSessionSelected?: (sessionId: string) => void;
+      isSessionSearchOpen: boolean;
+      sessionSearchQuery: string;
+      setSessionSearchQuery: (value: string) => void;
+      setIsSessionSearchOpen: (open: boolean) => void;
+    };
+    alwaysShowActions: boolean;
+    notifyOnSubtasks: boolean;
+    setActiveProjectIdOnly: (id: string) => void;
+    setSessionSwitcherOpen: (open: boolean) => void;
+    openNewSessionDraft: (options?: { selectedProjectId?: string | null; directoryOverride?: string | null }) => void;
+    openNewWorktreeDialog: () => void;
+    openWorktreesPage: (id: string) => void;
+    openProjectEditDialog: (id: string) => void;
+    removeProject: (id: string) => void;
+    reorderProjects: (fromIndex: number, toIndex: number) => void;
+    renderProjectStatusIndicator?: (projectId: string, groups: SessionGroup[]) => React.ReactNode;
+    initialActiveSessionByProject: Map<string, string>;
+    persistActiveSessionByProject: (value: Map<string, string>) => void;
+    projectViewActions: Pick<
+      ReturnType<typeof useSessionProjectViewState>['actions'],
+      'getOrderedGroups' | 'setGroupOrderByProject' | 'toggleGroup' | 'toggleProject'
+    >;
+  };
+};
+
+const VisibleSessionProjects: React.FC<SessionProjectCollectionProps> = ({ topology, view, actions }) => {
+  const { alwaysShowActions, notifyOnSubtasks, projectViewActions, rowActions, ...scrollerActions } = actions;
+  const foldersMap = useSessionFoldersStore((state) => state.foldersMap);
+  const createFolder = useSessionFoldersStore((state) => state.createFolder);
+  const addSessionToFolder = useSessionFoldersStore((state) => state.addSessionToFolder);
+  const projectView = view.projectView;
+  const { getOrderedGroups, setGroupOrderByProject, toggleGroup, toggleProject } = projectViewActions;
+  const collection = useSessionProjectCollection({ knownDirectories: topology.knownDirectories, isVSCode: topology.isVSCode, isVisible: true });
+  const [visibleSessionCountByGroup, setVisibleSessionCountByGroup] = React.useState<Map<string, number>>(new Map());
+  const showMoreGroupSessions = React.useCallback((groupId: string, currentVisibleCount: number) => {
+    setVisibleSessionCountByGroup((current) => new Map(current).set(groupId, currentVisibleCount + 7));
+  }, []);
+  const resetGroupSessionLimit = React.useCallback((groupId: string) => {
+    setVisibleSessionCountByGroup((current) => {
+      if (!current.has(groupId)) return current;
+      const next = new Map(current);
+      next.delete(groupId);
+      return next;
+    });
+  }, []);
+  const showRecentSection = useSessionDisplayStore((state) => state.showRecentSection);
+  const projectDisplayMode = useSessionDisplayStore((state) => state.projectDisplayMode);
+  const singleProjectId = useSessionDisplayStore((state) => state.singleProjectId);
+  const setSingleProjectId = useSessionDisplayStore((state) => state.setSingleProjectId);
+  const supportsSingleProjectMode = !topology.isVSCode && !isCapacitorApp();
+  const singleProjectMode = supportsSingleProjectMode && projectDisplayMode === 'single';
+  const recentSessions = useRecentSessionCollection({
+    enabled: showRecentSection && !singleProjectMode,
+    isVSCode: topology.isVSCode,
+    pinnedSessionIds: collection.pinnedSessionIds,
+    sessionOrderRanks: collection.sessionOrderRanks,
+    sessions: collection.rootSessions,
+  });
+  const [editingId, setEditingId] = React.useState<string | null>(null);
+  const [editTitle, setEditTitle] = React.useState('');
+  const [openSidebarMenuKey, setOpenSidebarMenuKey] = React.useState<string | null>(null);
+  const [deleteSessionConfirm, setDeleteSessionConfirm] = React.useState<DeleteSessionConfirmState>(null);
+  const [copiedSessionId, setCopiedSessionId] = React.useState<string | null>(null);
+  const [folderRename, setFolderRename] = React.useState<{ scopeKey: string; folderId: string; draft: string } | null>(null);
+  const startFolderRename = React.useCallback((scopeKey: string, folder: { id: string; name: string }) => {
+    setFolderRename({ scopeKey, folderId: folder.id, draft: folder.name });
+  }, []);
+  const setFolderRenameDraft = React.useCallback((draft: string) => {
+    setFolderRename((current) => current ? { ...current, draft } : null);
+  }, []);
+  const clearFolderRename = React.useCallback(() => setFolderRename(null), []);
+  const { expandedParents, toggleParent } = useExpandedParents();
+  const setCurrentSession = useSessionUIStore((state) => state.setCurrentSession);
+  const selectSessionForProject = React.useCallback((sessionId: string, sessionDirectory: string | null) => {
+    if (sessionId === useSessionUIStore.getState().currentSessionId) return;
+    setCurrentSession(sessionId, sessionDirectory);
+  }, [setCurrentSession]);
+  const prefetchSession = usePrefetchSessionMessages();
+  const { buildGroupedSessions, filterSessionNodesForSearch, buildGroupSearchText } = useSessionGrouping({
+    homeDirectory: view.homeDirectory,
+    worktreeMetadata: topology.worktreeMetadata,
+    pinnedSessionIds: collection.pinnedSessionIds,
+    sessionOrderRanks: collection.sessionOrderRanks,
+    gitBranches: topology.gitBranches,
+    isVSCode: topology.isVSCode,
+  });
+  const ownership = React.useMemo(
+    () => createSessionOwnershipIndex(collection.sessions, topology.projects, topology.availableWorktreesByProject, topology.isVSCode, collection.archivedSessions),
+    [collection.archivedSessions, collection.sessions, topology.availableWorktreesByProject, topology.isVSCode, topology.projects],
+  );
+  const { getSessionsForProject, getArchivedSessionsForProject } = useProjectSessionLists({ ownership });
+  const { projectSections, groupSearchDataByGroup, sectionsForRender, flatSectionsForRender } = useSessionSidebarSections({
+    normalizedProjects: topology.projects,
+    getSessionsForProject,
+    getArchivedSessionsForProject,
+    availableWorktreesByProject: topology.availableWorktreesByProject,
+    projectRepoStatus: topology.projectRepoStatus,
+    projectRootBranches: topology.projectRootBranches,
+    lastRepoStatus: topology.lastRepoStatus,
+    buildGroupedSessions,
+    hasSessionSearchQuery: view.hasSessionSearchQuery,
+    normalizedSessionSearchQuery: view.normalizedSessionSearchQuery,
+    filterSessionNodesForSearch,
+    buildGroupSearchText,
+    foldersMap,
+  });
+
+  // Second bootstrap-demand owner: the layout-level useSessionListSync keeps
+  // every known directory alive at background priority even when the sidebar
+  // is hidden, but only the visible collection knows which projects and
+  // groups are EXPANDED. Without this owner, expanded projects bootstrapped
+  // serialized at background priority (one directory at a time) instead of
+  // concurrently at expanded priority.
+  const childStores = useChildStoreManager();
+  const expansionDemandOwner = `session-collection-expansion:${React.useId()}`;
+  React.useEffect(() => {
+    childStores.setBootstrapDemand(expansionDemandOwner, buildSessionBootstrapDemands({
+      projectSections,
+      activeProjectId: view.activeProjectId,
+      collapsedProjects: projectView.collapsedProjects,
+      collapsedGroups: projectView.collapsedGroups,
+      currentDirectory: null,
+      currentSessionDirectory: null,
+    }));
+    return () => childStores.clearBootstrapDemand(expansionDemandOwner);
+  }, [childStores, expansionDemandOwner, projectSections, projectView.collapsedProjects, projectView.collapsedGroups, view.activeProjectId]);
+  const source = view.useGroupedSections ? sectionsForRender : flatSectionsForRender;
+  const sectionsForSidebarRender = React.useMemo(() => view.showInlineArchived ? source : source.map((section) => (
+    section.groups.some((group) => group.isArchivedBucket)
+      ? { ...section, groups: section.groups.filter((group) => !group.isArchivedBucket) }
+      : section
+  )), [source, view.showInlineArchived]);
+  const getFolderScopesForProject = React.useCallback((projectId: string) => {
+    const section = flatSectionsForRender.find((entry) => entry.project.id === projectId);
+    return section?.groups.find((group) => !group.isArchivedBucket)?.folderScopes ?? [];
+  }, [flatSectionsForRender]);
+  const projectHeaderSentinelRefs = React.useRef<Map<string, HTMLDivElement | null>>(new Map());
+  const stuckProjectHeaders = useStickyProjectHeaders({
+    enabled: view.stickyZoneHeaders,
+    isDesktopShellRuntime: view.isDesktopShellRuntime,
+    projectSections,
+    projectHeaderSentinelRefs,
+  });
+  useArchivedAutoFolders({
+    enabled: true,
+    normalizedProjects: topology.projects,
+    ownership,
+    isSessionsLoading: view.isSessionsLoading,
+    hasAuthoritativeGlobalSessions: collection.hasAuthoritativeGlobalSessions,
+    isWorktreeTopologyLoading: view.isWorktreeTopologyLoading,
+    unresolvedWorktreeProjectPaths: view.unresolvedWorktreeProjectPaths,
+    foldersMap,
+    createFolder,
+    addSessionToFolder,
+  });
+  const { github } = useRuntimeAPIs();
+  const githubAuthStatus = useGitHubAuthStore((state) => state.status);
+  const githubAuthChecked = useGitHubAuthStore((state) => state.hasChecked);
+  const ensureEntry = useGitHubPrStatusStore((state) => state.ensureEntry);
+  const setParams = useGitHubPrStatusStore((state) => state.setParams);
+  const refreshTargets = useGitHubPrStatusStore((state) => state.refreshTargets);
+  const retriedRef = React.useRef(new Set<string>());
+  React.useEffect(() => {
+    if (!github || !githubAuthChecked || !githubAuthStatus?.connected) return;
+    const targets = new Map<string, { directory: string; branch: string }>();
+    const now = Date.now();
+    projectSections.forEach((section) => {
+      if (projectView.collapsedProjects.has(section.project.id)) return;
+      section.groups.forEach((group) => {
+        if (group.isArchivedBucket || group.isMain) return;
+        const directory = normalizePath(group.directory ?? null);
+        const branch = group.branch?.trim() || topology.gitBranches.get(directory || '')?.trim();
+        if (!directory || !branch) return;
+        const key = getGitHubPrStatusKey(directory, branch);
+        const entry = useGitHubPrStatusStore.getState().entries[key];
+        const terminal = entry?.status?.pr?.state === 'closed' || entry?.status?.pr?.state === 'merged';
+        const retryKey = `${directory}::${branch}`;
+        const lastChecked = Math.max(entry?.lastRefreshAt ?? 0, entry?.lastDiscoveryPollAt ?? 0);
+        const retry = Boolean(entry?.isInitialStatusResolved && (!entry.status?.pr || terminal) && (!retriedRef.current.has(retryKey) || now - lastChecked >= PR_NO_PR_RETRY_MS));
+        if (!entry || !entry.isInitialStatusResolved || retry) {
+          if (retry) retriedRef.current.add(retryKey);
+          targets.set(key, { directory, branch });
+        }
+      });
+    });
+    targets.forEach((target, key) => {
+      ensureEntry(key);
+      setParams(key, { ...target, remoteName: null, canShow: true, github, githubAuthChecked, githubConnected: githubAuthStatus.connected });
+    });
+    if (targets.size) void refreshTargets([...targets.values()], { silent: true, markInitialResolved: true });
+  }, [ensureEntry, github, githubAuthChecked, githubAuthStatus?.connected, projectSections, projectView.collapsedProjects, refreshTargets, setParams, topology.gitBranches]);
+  const sessionOrderIndex = React.useMemo(
+    () => new Map(collection.orderedSessions.map((session, index) => [session.id, index])),
+    [collection.orderedSessions],
+  );
+  const orderedSectionsForRender = React.useMemo(
+    () => sectionsForSidebarRender.map((section) => {
+      const groups = getOrderedGroups(section.project.id, section.groups);
+      return groups === section.groups ? section : { ...section, groups };
+    }),
+    [getOrderedGroups, sectionsForSidebarRender],
+  );
+  let selectedSingleProjectId: string | null = null;
+  if (singleProjectMode) {
+    if (projectSections.some((section) => section.project.id === singleProjectId)) {
+      selectedSingleProjectId = singleProjectId;
+    } else if (projectSections.some((section) => section.project.id === view.activeProjectId)) {
+      selectedSingleProjectId = view.activeProjectId;
+    } else {
+      selectedSingleProjectId = projectSections[0]?.project.id ?? null;
+    }
+  }
+  const groupProps = React.useMemo(() => ({
+    hasSessionSearchQuery: view.hasSessionSearchQuery,
+    normalizedSessionSearchQuery: view.normalizedSessionSearchQuery,
+    groupSearchDataByGroup,
+    collapsedGroups: projectView.collapsedGroups,
+    hideDirectoryControls: view.hideDirectoryControls,
+    mobileVariant: view.mobileVariant,
+    alwaysShowActions,
+    activeProjectId: view.activeProjectId,
+    notifyOnSubtasks,
+    pinnedSessionIds: collection.pinnedSessionIds,
+    sessionOrderIndex,
+    expandedParents,
+    editingId,
+    editTitle,
+    copiedSessionId,
+    sessionBatchSize: singleProjectMode && !view.useGroupedSections ? 20 : undefined,
+    setEditingId,
+    setEditTitle,
+    toggleParent,
+    allowReselect: rowActions.allowReselect,
+    onSessionSelected: rowActions.onSessionSelected,
+    isSessionSearchOpen: rowActions.isSessionSearchOpen,
+    sessionSearchQuery: rowActions.sessionSearchQuery,
+    setSessionSearchQuery: rowActions.setSessionSearchQuery,
+    setIsSessionSearchOpen: rowActions.setIsSessionSearchOpen,
+    deleteSessionConfirm,
+    setDeleteSessionConfirm,
+    startFolderRename,
+    setCopiedSessionId,
+    folderRename,
+    setFolderRenameDraft,
+    clearFolderRename,
+  }), [
+    collection.pinnedSessionIds,
+    alwaysShowActions,
+    notifyOnSubtasks,
+    projectView.collapsedGroups,
+    groupSearchDataByGroup,
+    sessionOrderIndex,
+    editTitle,
+    editingId,
+    expandedParents,
+    folderRename,
+    setFolderRenameDraft,
+    clearFolderRename,
+    startFolderRename,
+    deleteSessionConfirm,
+    copiedSessionId,
+    setCopiedSessionId,
+    rowActions,
+    toggleParent,
+    view.hideDirectoryControls,
+    view.hasSessionSearchQuery,
+    view.activeProjectId,
+    view.mobileVariant,
+    view.normalizedSessionSearchQuery,
+    view.useGroupedSections,
+    singleProjectMode,
+  ]);
+  const groupActions = React.useMemo(() => ({
+    showMoreGroupSessions,
+    resetGroupSessionLimit,
+    setActiveProjectIdOnly: scrollerActions.setActiveProjectIdOnly,
+    setSessionSwitcherOpen: scrollerActions.setSessionSwitcherOpen,
+    openNewSessionDraft: scrollerActions.openNewSessionDraft,
+    onToggleCollapsedGroup: toggleGroup,
+  }), [
+    resetGroupSessionLimit,
+    showMoreGroupSessions,
+    toggleGroup,
+    scrollerActions.openNewSessionDraft,
+    scrollerActions.setActiveProjectIdOnly,
+    scrollerActions.setSessionSwitcherOpen,
+  ]);
+  const chatGroup = React.useMemo<SessionGroup | null>(() => {
+    if (topology.isVSCode) return null;
+    const chatsRoot = getChatsRootForHome(view.homeDirectory)
+      ?? collection.chatSessions.map((session) => getChatsRootFromDirectory(session.directory)).find(Boolean)
+      ?? null;
+    if (!chatsRoot) return null;
+    const folderScopes = Array.from(new Set([
+      chatsRoot,
+      ...collection.chatSessions.map((session) => normalizePath(session.directory ?? null)).filter(Boolean),
+    ])).filter((directory): directory is string => Boolean(directory))
+      .map((directory) => ({ scopeKey: directory, directory }));
+    return {
+      id: 'managed-chats',
+      label: '',
+      branch: null,
+      description: null,
+      isMain: true,
+      worktree: null,
+      directory: chatsRoot,
+      folderScopeKey: chatsRoot,
+      folderScopes,
+      draftTarget: 'chat',
+      sessions: collection.chatSessions
+        .filter((session) => !session.time?.archived && isRootSession(session))
+        .map((session) => ({ session, children: (collection.childrenMap.get(session.id) ?? []).filter((child) => !child.time?.archived).map((child) => ({ session: child, children: [], worktree: null })), worktree: null })),
+    };
+  }, [collection.chatSessions, collection.childrenMap, topology.isVSCode, view.homeDirectory]);
+  const renderChatsSection = React.useCallback(() => {
+    if (!chatGroup) return null;
+    return <SessionGroupSection
+      {...groupProps}
+      {...groupActions}
+      group={chatGroup}
+      groupKey="managed-chats"
+      projectId={null}
+      hideGroupLabel
+      sessionBatchSize={20}
+      scrollContainerRef={undefined}
+      openSidebarMenuKey={openSidebarMenuKey}
+      setOpenSidebarMenuKey={setOpenSidebarMenuKey}
+    />;
+  }, [chatGroup, groupActions, groupProps, openSidebarMenuKey]);
+  const handleOpenNewChat = React.useCallback(() => {
+    useUIStore.getState().closeMainSurfaces();
+    if (view.mobileVariant) scrollerActions.setSessionSwitcherOpen(false);
+    scrollerActions.openNewSessionDraft({ selectedProjectId: CHAT_DRAFT_PROJECT_ID, directoryOverride: null });
+  }, [scrollerActions, view.mobileVariant]);
+  const recentSection = React.useMemo(() => (
+    !topology.isVSCode ? <RecentSessionSection
+      projects={topology.projects}
+      availableWorktreesByProject={topology.availableWorktreesByProject}
+      gitBranches={topology.gitBranches}
+      homeDirectory={view.homeDirectory}
+      hasSessionSearchQuery={view.hasSessionSearchQuery}
+      normalizedSessionSearchQuery={view.normalizedSessionSearchQuery}
+      isDesktopShellRuntime={view.isDesktopShellRuntime}
+      sessions={recentSessions}
+      childrenMap={collection.childrenMap}
+      pinnedSessionIds={collection.pinnedSessionIds}
+      recentSessions={recentSessions}
+      expandedParents={expandedParents}
+      notifyOnSubtasks={notifyOnSubtasks}
+      editingId={editingId}
+      editTitle={editTitle}
+      copiedSessionId={copiedSessionId}
+      openSidebarMenuKey={openSidebarMenuKey}
+      mobileVariant={view.mobileVariant}
+      alwaysShowActions={alwaysShowActions}
+      setEditingId={setEditingId}
+      setEditTitle={setEditTitle}
+      toggleParent={toggleParent}
+      setOpenSidebarMenuKey={setOpenSidebarMenuKey}
+      allowReselect={rowActions.allowReselect}
+      onSessionSelected={rowActions.onSessionSelected}
+      isSessionSearchOpen={rowActions.isSessionSearchOpen}
+      sessionSearchQuery={rowActions.sessionSearchQuery}
+      setSessionSearchQuery={rowActions.setSessionSearchQuery}
+      setIsSessionSearchOpen={rowActions.setIsSessionSearchOpen}
+      deleteSessionConfirm={deleteSessionConfirm}
+      setDeleteSessionConfirm={setDeleteSessionConfirm}
+      startFolderRename={startFolderRename}
+      setCopiedSessionId={setCopiedSessionId}
+      chatSessions={collection.chatSessions}
+      renderChatsSection={renderChatsSection}
+      onNewChat={handleOpenNewChat}
+      showRecentSection={showRecentSection && !singleProjectMode}
+    /> : null
+  ), [
+    alwaysShowActions,
+    collection.childrenMap,
+    collection.pinnedSessionIds,
+    copiedSessionId,
+    deleteSessionConfirm,
+    editTitle,
+    editingId,
+    expandedParents,
+    notifyOnSubtasks,
+    openSidebarMenuKey,
+    recentSessions,
+    rowActions,
+    showRecentSection,
+    singleProjectMode,
+    handleOpenNewChat,
+    renderChatsSection,
+    startFolderRename,
+    toggleParent,
+    topology.availableWorktreesByProject,
+    topology.gitBranches,
+    topology.isVSCode,
+    topology.projects,
+    collection.chatSessions,
+    view.hasSessionSearchQuery,
+    view.homeDirectory,
+    view.isDesktopShellRuntime,
+    view.mobileVariant,
+    view.normalizedSessionSearchQuery,
+  ]);
+  const scrollerModel = React.useMemo(() => ({
+    topContent: recentSection,
+    hasSharedSessions: Boolean(recentSection),
+    sectionsForRender: orderedSectionsForRender,
+    projectSections,
+    activeProjectId: view.activeProjectId,
+    singleProjectMode,
+    singleProjectId: selectedSingleProjectId,
+    emptyState: view.emptyState,
+    searchEmptyState: view.searchEmptyState,
+    projectRepoStatus: topology.projectRepoStatus,
+    stuckProjectHeaders,
+    projectHeaderSentinelRefs,
+    state: { editingId, openSidebarMenuKey, setOpenSidebarMenuKey, visibleSessionCountByGroup },
+    groupProps,
+  }), [
+    groupProps,
+    editingId,
+    openSidebarMenuKey,
+    projectSections,
+    orderedSectionsForRender,
+    stuckProjectHeaders,
+    topology.projectRepoStatus,
+    view.activeProjectId,
+    view.emptyState,
+    view.searchEmptyState,
+    visibleSessionCountByGroup,
+    recentSection,
+    singleProjectMode,
+    selectedSingleProjectId,
+  ]);
+  const scrollerView = React.useMemo(() => ({
+    homeDirectory: view.homeDirectory,
+    collapsedProjects: projectView.collapsedProjects,
+    showOnlyMainWorkspace: view.showOnlyMainWorkspace,
+    hasSessionSearchQuery: view.hasSessionSearchQuery,
+    normalizedSessionSearchQuery: view.normalizedSessionSearchQuery,
+    hideDirectoryControls: view.hideDirectoryControls,
+    isDesktopShellRuntime: view.isDesktopShellRuntime,
+    stickyZoneHeaders: view.stickyZoneHeaders,
+    mobileVariant: view.mobileVariant,
+    alwaysShowActions,
+    projectSortOrder: view.projectSortOrder,
+  }), [
+    projectView.collapsedProjects,
+    view.homeDirectory,
+    view.hasSessionSearchQuery,
+    view.hideDirectoryControls,
+    view.isDesktopShellRuntime,
+    view.mobileVariant,
+    alwaysShowActions,
+    view.normalizedSessionSearchQuery,
+    view.projectSortOrder,
+    view.showOnlyMainWorkspace,
+    view.stickyZoneHeaders,
+  ]);
+  const scrollerActionSet = React.useMemo(() => ({
+    group: groupActions,
+    toggleProject,
+    setActiveProjectIdOnly: scrollerActions.setActiveProjectIdOnly,
+    setSessionSwitcherOpen: scrollerActions.setSessionSwitcherOpen,
+    openNewSessionDraft: scrollerActions.openNewSessionDraft,
+    openNewWorktreeDialog: scrollerActions.openNewWorktreeDialog,
+    openWorktreesPage: scrollerActions.openWorktreesPage,
+    openProjectEditDialog: scrollerActions.openProjectEditDialog,
+    removeProject: scrollerActions.removeProject,
+    reorderProjects: scrollerActions.reorderProjects,
+    setGroupOrderByProject,
+    renderProjectStatusIndicator: scrollerActions.renderProjectStatusIndicator,
+    setSingleProjectId,
+  }), [
+    groupActions,
+    scrollerActions.openNewSessionDraft,
+    scrollerActions.openNewWorktreeDialog,
+    scrollerActions.openProjectEditDialog,
+    scrollerActions.openWorktreesPage,
+    scrollerActions.removeProject,
+    scrollerActions.reorderProjects,
+    scrollerActions.setActiveProjectIdOnly,
+    scrollerActions.setSessionSwitcherOpen,
+    setGroupOrderByProject,
+    toggleProject,
+    scrollerActions.renderProjectStatusIndicator,
+    setSingleProjectId,
+  ]);
+  return <>
+    <ProjectSessionSelectionEffect
+      projectSections={projectSections}
+      activeProjectId={view.activeProjectId}
+      initialActiveSessionByProject={actions.initialActiveSessionByProject}
+      persistActiveSessionByProject={actions.persistActiveSessionByProject}
+      mobileVariant={view.mobileVariant}
+      openNewSessionDraft={actions.openNewSessionDraft}
+      setSessionSwitcherOpen={actions.setSessionSwitcherOpen}
+      sessionOwnerBySessionId={ownership.bySessionId}
+      handleSessionSelect={selectSessionForProject}
+    />
+    <SessionPrefetchEffect
+      sortedSessions={collection.orderedSessions}
+      recentSessions={recentSessions}
+      prefetchSession={prefetchSession}
+    />
+    <SessionProjectScroller model={scrollerModel} view={scrollerView} actions={scrollerActionSet} />
+    <SessionBulkActions
+      getFolderScopesForProject={getFolderScopesForProject}
+      isInlineEditing={editingId !== null}
+      startFolderRename={startFolderRename}
+    />
+  </>;
+};
+
+export const SessionProjectCollection: React.FC<SessionProjectCollectionProps> = (props) => props.view.isVisible ? <VisibleSessionProjects {...props} /> : null;
diff --git a/packages/ui/src/components/session/sidebar/authoritativeSessionCleanup.ts b/packages/ui/src/components/session/sidebar/list/authoritativeSessionCleanup.ts
similarity index 100%
rename from packages/ui/src/components/session/sidebar/authoritativeSessionCleanup.ts
rename to packages/ui/src/components/session/sidebar/list/authoritativeSessionCleanup.ts
diff --git a/packages/ui/src/components/session/sidebar/sessionBootstrapDemands.test.ts b/packages/ui/src/components/session/sidebar/list/sessionBootstrapDemands.test.ts
similarity index 73%
rename from packages/ui/src/components/session/sidebar/sessionBootstrapDemands.test.ts
rename to packages/ui/src/components/session/sidebar/list/sessionBootstrapDemands.test.ts
index 302b46cd..1919c995 100644
--- a/packages/ui/src/components/session/sidebar/sessionBootstrapDemands.test.ts
+++ b/packages/ui/src/components/session/sidebar/list/sessionBootstrapDemands.test.ts
@@ -44,4 +44,22 @@ describe("buildSessionBootstrapDemands", () => {
     expect(byDirectory.get("/repo/wt-a")?.priority).toBe("expanded")
     expect(byDirectory.get("/repo/wt-b")?.priority).toBe("selected")
   })
+
+  test("keeps the complete known topology demanded without a visible section projection", () => {
+    const demands = buildSessionBootstrapDemands({
+      knownDirectories: ["/repo", "/repo/wt-a", "/repo/wt-b"],
+      activeProjectDirectory: "/repo",
+      activeProjectId: "project-a",
+      collapsedProjects: new Set(),
+      collapsedGroups: new Set(),
+      currentDirectory: null,
+      currentSessionDirectory: null,
+    })
+
+    expect(demands.map(({ directory, priority }) => [directory, priority])).toEqual([
+      ["/repo", "active-project"],
+      ["/repo/wt-a", "background"],
+      ["/repo/wt-b", "background"],
+    ])
+  })
 })
diff --git a/packages/ui/src/components/session/sidebar/sessionBootstrapDemands.ts b/packages/ui/src/components/session/sidebar/list/sessionBootstrapDemands.ts
similarity index 83%
rename from packages/ui/src/components/session/sidebar/sessionBootstrapDemands.ts
rename to packages/ui/src/components/session/sidebar/list/sessionBootstrapDemands.ts
index a8ff2357..d781f065 100644
--- a/packages/ui/src/components/session/sidebar/sessionBootstrapDemands.ts
+++ b/packages/ui/src/components/session/sidebar/list/sessionBootstrapDemands.ts
@@ -1,5 +1,5 @@
 import type { DirectoryBootstrapDemand, DirectoryBootstrapPriority } from "@/sync/child-store"
-import { normalizePath } from "./utils"
+import { normalizePath } from "../utils"
 
 type BootstrapProjectSection = {
   project: { id: string; normalizedPath: string }
@@ -11,16 +11,18 @@ type BootstrapProjectSection = {
   }>
 }
 
-const PRIORITY_RANK: Record<DirectoryBootstrapPriority, number> = {
+const PRIORITY_RANK = {
   selected: 0,
   "active-project": 1,
   expanded: 2,
   visible: 3,
   background: 4,
-}
+} satisfies Record<DirectoryBootstrapPriority, number>
 
 export function buildSessionBootstrapDemands(input: {
-  projectSections: BootstrapProjectSection[]
+  projectSections?: BootstrapProjectSection[]
+  knownDirectories?: Iterable<string>
+  activeProjectDirectory?: string | null
   activeProjectId: string | null
   collapsedProjects: ReadonlySet<string>
   collapsedGroups: ReadonlySet<string>
@@ -40,7 +42,12 @@ export function buildSessionBootstrapDemands(input: {
     byDirectory.set(normalizedDirectory, { directory: normalizedDirectory, priority, reason })
   }
 
-  for (const section of input.projectSections) {
+  for (const directory of input.knownDirectories ?? []) {
+    add(directory, "background", "known-project")
+  }
+  add(input.activeProjectDirectory, "active-project", "project-expanded")
+
+  for (const section of input.projectSections ?? []) {
     const projectExpanded = !input.collapsedProjects.has(section.project.id)
     let projectPriority: DirectoryBootstrapPriority = "background"
     if (section.project.id === input.activeProjectId) {
diff --git a/packages/ui/src/components/session/sidebar/list/sessionCollection.test.ts b/packages/ui/src/components/session/sidebar/list/sessionCollection.test.ts
new file mode 100644
index 00000000..617c0dbb
--- /dev/null
+++ b/packages/ui/src/components/session/sidebar/list/sessionCollection.test.ts
@@ -0,0 +1,333 @@
+import { describe, expect, test } from 'bun:test';
+import type { Session } from '@opencode-ai/sdk/v2';
+import type { Event } from '@opencode-ai/sdk/v2/client';
+import React, { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { deriveRecentSessions } from '../recent/activitySections';
+import { applyGlobalSessionStatusEvent, useGlobalSessionStatusStore } from '@/sync/global-session-status';
+import {
+  buildSidebarSessionProjection,
+  getDescendantIds,
+  partitionSidebarSessions,
+  projectSidebarActiveSessions,
+  projectSidebarCollection,
+  useRecentSessionCollection,
+} from './sessionCollection';
+
+const installMinimalDom = () => {
+  const descriptors = new Map<string, PropertyDescriptor | undefined>();
+  const setGlobal = (name: string, value: unknown) => {
+    descriptors.set(name, Object.getOwnPropertyDescriptor(globalThis, name));
+    Object.defineProperty(globalThis, name, { configurable: true, writable: true, value });
+  };
+  class ElementStub {}
+  const documentStub: Record<string, unknown> = {
+    nodeType: 9, defaultView: globalThis, activeElement: null,
+    addEventListener: () => undefined, removeEventListener: () => undefined,
+  };
+  const container = {
+    nodeType: 1, tagName: 'DIV', nodeName: 'DIV', namespaceURI: 'http://www.w3.org/1999/xhtml', ownerDocument: documentStub,
+    addEventListener: () => undefined, removeEventListener: () => undefined,
+  };
+  documentStub.documentElement = container;
+  documentStub.body = container;
+  setGlobal('document', documentStub);
+  setGlobal('window', globalThis);
+  setGlobal('Element', ElementStub);
+  setGlobal('HTMLElement', ElementStub);
+  setGlobal('HTMLIFrameElement', ElementStub);
+  setGlobal('IS_REACT_ACT_ENVIRONMENT', true);
+  return {
+    container: container as unknown as Element,
+    restore: () => {
+      for (const [name, descriptor] of descriptors) {
+        if (descriptor) Object.defineProperty(globalThis, name, descriptor);
+        else Reflect.deleteProperty(globalThis, name);
+      }
+    },
+  };
+};
+
+const session = (id: string, directory: string | null): Session => {
+  // SAFETY: Sidebar projection reads only id, directory, and time from session fixtures.
+  return {
+    id,
+    directory,
+    time: { created: 1, updated: 1 },
+  } as Session;
+};
+
+describe('projectSidebarActiveSessions', () => {
+  test('keeps global precedence and order, then appends missing live sessions', () => {
+    const global = [session('global-b', '/workspace/b'), session('global-a', '/workspace/a')];
+    const live = [session('global-a', '/workspace/a'), session('live-c', '/workspace/c')];
+
+    expect(projectSidebarActiveSessions({
+      globalActiveSessions: global,
+      liveSessions: live,
+      knownDirectories: new Set(['/workspace/a', '/workspace/b', '/workspace/c']),
+      isVSCode: false,
+    }).map((entry) => entry.id)).toEqual(['global-b', 'global-a', 'live-c']);
+  });
+
+  test('filters unknown VS Code directories', () => {
+    const sessions = [session('known', '/workspace/known'), session('unknown', '/workspace/unknown')];
+
+    expect(projectSidebarActiveSessions({
+      globalActiveSessions: sessions,
+      liveSessions: [],
+      knownDirectories: new Set(['/workspace/known']),
+      isVSCode: true,
+    }).map((entry) => entry.id)).toEqual(['known']);
+  });
+
+  test('allows missing or unknown directories for web when no directories are known', () => {
+    const sessions = [session('unknown', '/workspace/unknown'), session('empty', null)];
+
+    expect(projectSidebarActiveSessions({
+      globalActiveSessions: sessions,
+      liveSessions: [],
+      knownDirectories: new Set(),
+      isVSCode: false,
+    }).map((entry) => entry.id)).toEqual(['unknown', 'empty']);
+  });
+
+  test('keeps archived sessions despite directory filtering', () => {
+    const archived = session('archived', '/workspace/unknown');
+    archived.time.archived = 1;
+
+    expect(projectSidebarActiveSessions({
+      globalActiveSessions: [archived],
+      liveSessions: [],
+      knownDirectories: new Set(['/workspace/known']),
+      isVSCode: true,
+    }).map((entry) => entry.id)).toEqual(['archived']);
+  });
+
+  test('does not replace a filtered global record with a live duplicate', () => {
+    expect(projectSidebarActiveSessions({
+      globalActiveSessions: [session('same', '/workspace/unknown')],
+      liveSessions: [session('same', '/workspace/known')],
+      knownDirectories: new Set(['/workspace/known']),
+      isVSCode: true,
+    })).toEqual([]);
+  });
+});
+
+describe('projectSidebarCollection', () => {
+  test('returns the same structural projection for unchanged inputs without module caching', () => {
+    const globalActiveSessions = [session('a', '/workspace/a'), session('b', '/workspace/b')];
+    const input = {
+      globalActiveSessions,
+      liveSessions: [],
+      knownDirectories: new Set(['/workspace/a', '/workspace/b']),
+      isVSCode: false,
+    };
+
+    const beforeSelection = projectSidebarCollection(input);
+    const afterSelection = projectSidebarCollection(input);
+
+    expect(afterSelection).toEqual(beforeSelection);
+  });
+
+  test('rebuilds when a structural session collection input changes', () => {
+    const input = {
+      globalActiveSessions: [session('a', '/workspace/a')],
+      liveSessions: [],
+      knownDirectories: new Set(['/workspace/a']),
+      isVSCode: false,
+    };
+
+    const before = projectSidebarCollection(input);
+    const after = projectSidebarCollection({
+      ...input,
+      globalActiveSessions: [session('a', '/workspace/a'), session('b', '/workspace/a')],
+    });
+
+    expect(after).not.toBe(before);
+    expect(after.map((entry) => entry.id)).toEqual(['a', 'b']);
+  });
+
+  test('keeps project membership independent from Recent active membership', () => {
+    const input = {
+      globalActiveSessions: [session('old-root', '/workspace/a')],
+      liveSessions: [],
+      knownDirectories: new Set(['/workspace/a']),
+      isVSCode: false,
+    };
+    const projectBefore = projectSidebarCollection(input);
+    const recentBefore = deriveRecentSessions(projectBefore, new Set(), 200_000_000);
+    const projectAfter = projectSidebarCollection(input);
+    const recentAfter = deriveRecentSessions(projectAfter, new Set(['old-root']), 200_000_000);
+
+    expect(projectAfter).toEqual(projectBefore);
+    expect(recentBefore).toEqual([]);
+    expect(recentAfter.map((entry) => entry.id)).toEqual(['old-root']);
+  });
+
+  test('keeps managed Chats in a dedicated projection and out of project and Recent ownership', () => {
+    const managed = session('managed', '/home/.config/openchamber/chats/2026-08-24/session-managed');
+    const project = session('project', '/workspace/a');
+    const projects = projectSidebarCollection({
+      globalActiveSessions: [managed, project],
+      liveSessions: [],
+      knownDirectories: new Set(['/workspace/a']),
+      isVSCode: false,
+    });
+
+    expect(projects.map((entry) => entry.id)).toEqual(['project']);
+    expect(partitionSidebarSessions([managed, project], false).chatSessions.map((entry) => entry.id)).toEqual(['managed']);
+    expect(deriveRecentSessions(projects, new Set(['managed', 'project']), 200_000_000)
+      .map((entry) => entry.id)).toEqual(['project']);
+  });
+
+  test('keeps managed Chats out of the VS Code sidebar', () => {
+    const managed = session('managed', '/home/.config/openchamber/chats/2026-08-24/session-managed');
+
+    expect(partitionSidebarSessions([managed], true)).toEqual({ projectSessions: [], chatSessions: [] });
+    expect(projectSidebarCollection({
+      globalActiveSessions: [managed],
+      liveSessions: [],
+      knownDirectories: new Set(),
+      isVSCode: true,
+    })).toEqual([]);
+  });
+
+  test('excludes a /btw fork before project ownership and restores it when the marker is removed', () => {
+    const fork = {
+      ...session('fork', '/home/.config/openchamber/chats/2026-08-24/session-fork'),
+      metadata: { openchamber: { kind: 'btw', originalSessionID: 'parent' } },
+    };
+    const project = session('project', '/workspace/a');
+    const input = {
+      liveSessions: [],
+      knownDirectories: new Set(['/workspace/a']),
+      isVSCode: false,
+    };
+
+    expect(projectSidebarCollection({ ...input, globalActiveSessions: [fork, project] }).map((entry) => entry.id)).toEqual(['project']);
+    expect(partitionSidebarSessions([fork], false).chatSessions).toEqual([]);
+
+    const promoted = {
+      ...fork,
+      metadata: { openchamber: {} },
+    };
+    expect(partitionSidebarSessions([promoted], false).chatSessions.map((entry) => entry.id)).toEqual(['fork']);
+  });
+
+  test('keeps a ranked managed root and its active child in the Chats hierarchy', () => {
+    const managedRoot = { ...session('managed-root', '/home/.config/openchamber/chats/2026-08-24/session-root'), time: { created: 1, updated: 1 } };
+    const managedChild = {
+      ...session('managed-child', '/home/.config/openchamber/chats/2026-08-24/session-root'),
+      parentID: 'managed-root',
+      time: { created: 2, updated: 2 },
+    };
+    const projectRoot = { ...session('project-root', '/workspace/a'), time: { created: 3, updated: 3 } };
+
+    const projection = buildSidebarSessionProjection({
+      globalActiveSessions: [projectRoot, managedRoot, managedChild],
+      liveSessions: [],
+      knownDirectories: new Set(['/workspace/a']),
+      isVSCode: false,
+      pinnedSessionIds: new Set(),
+      sessionOrderRanks: new Map([['managed-root', 10]]),
+    });
+
+    expect(projection.projectSessions.map((entry) => entry.id)).toEqual(['project-root']);
+    expect(projection.chatSessions.map((entry) => entry.id)).toEqual(['managed-root', 'managed-child']);
+    expect(projection.orderedSessions.map((entry) => entry.id)).toEqual(['managed-root', 'managed-child', 'project-root']);
+    expect(projection.childrenMap.get('managed-root')?.map((entry) => entry.id)).toEqual(['managed-child']);
+  });
+
+});
+
+describe('useRecentSessionCollection', () => {
+  test('updates mounted Recent membership when global active status changes', async () => {
+    const dom = installMinimalDom();
+    const root: Root = createRoot(dom.container);
+    const oldSession = { ...session('old-root', '/workspace/a'), time: { created: 1, updated: 1 } };
+    let renderedIds: string[] = [];
+    let renderCount = 0;
+    let timeReadCount = 0;
+    Object.defineProperty(oldSession, 'time', {
+      get: () => {
+        timeReadCount += 1;
+        return { created: 1, updated: 1 };
+      },
+    });
+    timeReadCount = 0;
+    const Harness = () => {
+      renderCount += 1;
+      const recent = useRecentSessionCollection({
+        enabled: true,
+        isVSCode: false,
+        pinnedSessionIds: new Set(),
+        sessionOrderRanks: new Map(),
+        sessions: [oldSession],
+      });
+      renderedIds = recent.map((entry) => entry.id);
+      return null;
+    };
+
+    try {
+      useGlobalSessionStatusStore.setState({ statusById: new Map() });
+      await act(async () => root.render(React.createElement(Harness)));
+      expect(renderedIds).toEqual([]);
+
+      await act(async () => {
+        // SAFETY: This fixture matches the SDK event shape consumed by the status event reducer.
+        applyGlobalSessionStatusEvent('/workspace/a', {
+          type: 'session.status',
+          properties: { sessionID: 'old-root', status: { type: 'busy' } },
+        } as Event);
+      });
+      expect(renderedIds).toEqual(['old-root']);
+      const activeRenderCount = renderCount;
+      const activeDeriveOperationCount = timeReadCount;
+
+      await act(async () => {
+        // SAFETY: This fixture matches the SDK event shape consumed by the status event reducer.
+        applyGlobalSessionStatusEvent('/other-workspace', {
+          type: 'session.status',
+          properties: { sessionID: 'old-root', status: { type: 'retry', attempt: 2, message: 'waiting' } },
+        } as Event);
+      });
+      expect(renderCount).toBe(activeRenderCount);
+      expect(timeReadCount).toBe(activeDeriveOperationCount);
+    } finally {
+      await act(async () => root.unmount());
+      useGlobalSessionStatusStore.setState({ statusById: new Map() });
+      dom.restore();
+    }
+  });
+
+});
+
+describe('getDescendantIds', () => {
+  test('returns a depth-first subtree without exposing session entities', () => {
+    const childA = session('child-a', '/workspace/a');
+    const grandchild = session('grandchild', '/workspace/a');
+    const childB = session('child-b', '/workspace/a');
+    const childrenMap = new Map([
+      ['root', [childA, childB]],
+      ['child-a', [grandchild]],
+    ]);
+
+    expect(getDescendantIds(childrenMap, 'root'))
+      .toEqual(['child-a', 'grandchild', 'child-b']);
+  });
+
+  test('cuts a parent cycle with deterministic unique descendants and excludes the root', () => {
+    const childA = session('a', '/workspace/a');
+    const childB = session('b', '/workspace/a');
+    const childC = session('c', '/workspace/a');
+    const childrenMap = new Map([
+      ['root', [childA]],
+      ['a', [childB, childC]],
+      ['b', [childA]],
+    ]);
+
+    expect(getDescendantIds(childrenMap, 'root')).toEqual(['a', 'b', 'c']);
+    expect(new Set(getDescendantIds(childrenMap, 'root')).size).toBe(3);
+  });
+});
diff --git a/packages/ui/src/components/session/sidebar/list/sessionCollection.ts b/packages/ui/src/components/session/sidebar/list/sessionCollection.ts
new file mode 100644
index 00000000..0f12651c
--- /dev/null
+++ b/packages/ui/src/components/session/sidebar/list/sessionCollection.ts
@@ -0,0 +1,335 @@
+import React from 'react';
+import type { Session } from '@opencode-ai/sdk/v2';
+import { useAllLiveSessions } from '@/sync/sync-context';
+import {
+  EMPTY_SESSION_ORDER_RANKS,
+  orderSessionsByLifecycleScopes,
+  useSessionOrderingStore,
+} from '@/sync/session-ordering';
+import { useGlobalSessionsStore } from '@/stores/useGlobalSessionsStore';
+import { useSessionPinnedStore } from '@/stores/useSessionPinnedStore';
+import { useGlobalSessionStatusStore } from '@/sync/global-session-status';
+import { resolveGlobalSessionDirectory } from '@/stores/useGlobalSessionsStore';
+import { deriveRecentSessions } from '../recent/activitySections';
+import { normalizePath } from '../utils';
+import { isChatDirectoryPath } from '@/lib/chatDirectories';
+import { isBtwSession } from '@/lib/sessionBtwMetadata';
+import type { GlobalSessionStructure } from '@/stores/globalSessionStructure';
+import { countSyncPerformance } from '@/sync/performance-diagnostics';
+
+type ProjectSidebarActiveSessionsArgs = {
+  globalActiveSessions: Session[];
+  liveSessions: Session[];
+  knownDirectories: Set<string>;
+  isVSCode: boolean;
+};
+
+type SidebarSessionPartitions = {
+  projectSessions: Session[];
+  chatSessions: Session[];
+};
+
+const parentIdOf = (session: Session): string | null => {
+  // SAFETY: OpenCode session payloads expose parentID although the SDK base Session omits it.
+  return (session as Session & { parentID?: string | null }).parentID ?? null;
+};
+
+// This boundary owns session visibility before Recent or projects take
+// ownership. Temporary /btw forks never leak into any sidebar projection.
+export const partitionSidebarSessions = (
+  sessions: readonly Session[],
+  isVSCode: boolean,
+): SidebarSessionPartitions => {
+  const projectSessions: Session[] = [];
+  const chatSessions: Session[] = [];
+  for (const session of sessions) {
+    if (isBtwSession(session)) continue;
+    if (isChatDirectoryPath(session.directory)) {
+      if (isVSCode) continue;
+      chatSessions.push(session);
+      continue;
+    }
+    projectSessions.push(session);
+  }
+  return { projectSessions, chatSessions };
+};
+
+const EMPTY_ACTIVE_SESSION_IDS: ReadonlySet<string> = new Set();
+
+const isKnownActiveSessionDirectory = (
+  session: Session,
+  knownDirectories: Set<string>,
+  isVSCode: boolean,
+): boolean => {
+  if (session.time?.archived) return true;
+  const directory = normalizePath(resolveGlobalSessionDirectory(session))?.toLowerCase();
+  if (!directory) return !isVSCode;
+  if (knownDirectories.size === 0) return !isVSCode;
+  return knownDirectories.has(directory);
+};
+
+// Global sessions provide complete sidebar coverage; initialized directory
+// stores only fill gaps until the global cache catches up.
+export const projectSidebarActiveSessions = ({
+  globalActiveSessions,
+  liveSessions,
+  knownDirectories,
+  isVSCode,
+}: ProjectSidebarActiveSessionsArgs): Session[] => {
+  const sessions = [...globalActiveSessions];
+  const knownIds = new Set(globalActiveSessions.map((session) => session.id));
+
+  for (const session of liveSessions) {
+    if (knownIds.has(session.id)) continue;
+    sessions.push(session);
+  }
+
+  return partitionSidebarSessions(sessions, isVSCode).projectSessions
+    .filter((session) => isKnownActiveSessionDirectory(session, knownDirectories, isVSCode));
+};
+
+export const projectSidebarCollection = (args: ProjectSidebarActiveSessionsArgs): Session[] => {
+  return projectSidebarActiveSessions(args);
+};
+
+const mergeSidebarSessionSources = (
+  globalActiveSessions: readonly Session[],
+  liveSessions: readonly Session[],
+): Session[] => {
+  const sessions = [...globalActiveSessions];
+  const knownIds = new Set(globalActiveSessions.map((session) => session.id));
+  for (const session of liveSessions) {
+    if (knownIds.has(session.id)) continue;
+    knownIds.add(session.id);
+    sessions.push(session);
+  }
+  return sessions;
+};
+
+// The collection owns hierarchy membership. Consumers receive this narrow
+// resolver instead of retaining the collection's mutable indexing detail.
+export const getDescendantIds = (
+  childrenMap: ReadonlyMap<string, readonly Session[]>,
+  sessionId: string,
+): string[] => {
+  const descendants: string[] = [];
+  const visited = new Set<string>([sessionId]);
+  const visit = (parentId: string): void => {
+    for (const child of childrenMap.get(parentId) ?? []) {
+      if (visited.has(child.id)) continue;
+      visited.add(child.id);
+      descendants.push(child.id);
+      visit(child.id);
+    }
+  };
+  visit(sessionId);
+  return descendants;
+};
+
+type SidebarSessionProjectionArgs = ProjectSidebarActiveSessionsArgs & {
+  pinnedSessionIds: Set<string>;
+  sessionOrderRanks: ReadonlyMap<string, number>;
+};
+
+type SidebarSessionStructureArgs = Omit<ProjectSidebarActiveSessionsArgs, 'globalActiveSessions'> & {
+  globalActiveSessions?: readonly Session[];
+  globalStructure?: GlobalSessionStructure;
+};
+
+const buildSidebarSessionStructure = ({
+  globalActiveSessions,
+  liveSessions,
+  knownDirectories,
+  isVSCode,
+  globalStructure,
+}: SidebarSessionStructureArgs) => {
+  countSyncPerformance('sidebarStructureBuilds');
+  const indexedGlobalSessions = globalActiveSessions ?? [];
+  const visibleSessions = mergeSidebarSessionSources(indexedGlobalSessions, liveSessions);
+  const partition = partitionSidebarSessions(visibleSessions, isVSCode);
+  const projectSessions = partition.projectSessions
+    .filter((session) => isKnownActiveSessionDirectory(session, knownDirectories, isVSCode));
+  const sessions = [...projectSessions, ...partition.chatSessions];
+  const sessionById = new Map(sessions.map((session) => [session.id, session]));
+  const projectSessionIds = new Set(projectSessions.map((session) => session.id));
+  const indexedRootIds = globalStructure?.activeRootIds ?? [];
+  const indexedRootIdSet = new Set(indexedRootIds);
+  const rootSessions = [
+    ...indexedRootIds.flatMap((sessionId) => {
+      if (!projectSessionIds.has(sessionId)) return [];
+      const session = sessionById.get(sessionId);
+      return session ? [session] : [];
+    }),
+    ...projectSessions.filter((session) => (
+      !indexedRootIdSet.has(session.id) && !parentIdOf(session)
+    )),
+  ];
+  return {
+    chatSessionIds: new Set(partition.chatSessions.map((session) => session.id)),
+    projectSessions,
+    rootSessions,
+    sessionById,
+    sessions,
+    hierarchy: globalStructure ? {
+      rootIds: globalStructure.activeRootIds,
+      childrenByParentId: globalStructure.activeChildrenByParentId,
+    } : undefined,
+  };
+};
+
+const orderSidebarSessionStructure = (
+  structure: ReturnType<typeof buildSidebarSessionStructure>,
+  pinnedSessionIds: Set<string>,
+  sessionOrderRanks: ReadonlyMap<string, number>,
+) => {
+  const orderedSessions = orderSessionsByLifecycleScopes(
+    structure.sessions,
+    pinnedSessionIds,
+    sessionOrderRanks,
+    structure.hierarchy,
+  );
+  const childrenMap = new Map<string, Session[]>();
+  for (const session of orderedSessions) {
+    const parentID = parentIdOf(session);
+    if (!parentID) continue;
+    const siblings = childrenMap.get(parentID) ?? [];
+    siblings.push(session);
+    childrenMap.set(parentID, siblings);
+  }
+  return {
+    chatSessions: orderedSessions.filter((session) => structure.chatSessionIds.has(session.id)),
+    childrenMap,
+    orderedSessions,
+  };
+};
+
+export const buildSidebarSessionProjection = ({
+  globalActiveSessions,
+  liveSessions,
+  knownDirectories,
+  isVSCode,
+  pinnedSessionIds,
+  sessionOrderRanks,
+}: SidebarSessionProjectionArgs) => {
+  const structure = buildSidebarSessionStructure({
+    globalActiveSessions,
+    liveSessions,
+    knownDirectories,
+    isVSCode,
+  });
+  const ordering = orderSidebarSessionStructure(structure, pinnedSessionIds, sessionOrderRanks);
+  return {
+    ...ordering,
+    projectSessions: structure.projectSessions,
+    sessionById: structure.sessionById,
+  };
+};
+
+type UseSessionProjectCollectionArgs = {
+  knownDirectories: Set<string>;
+  isVSCode: boolean;
+  isVisible: boolean;
+};
+
+// The collection owns the global-first/live-gap merge and lifecycle ordering.
+// Selection state intentionally never enters this boundary: rows subscribe to
+// active state themselves, leaving this projection referentially stable.
+export const useSessionProjectCollection = ({
+  knownDirectories,
+  isVSCode,
+  isVisible,
+}: UseSessionProjectCollectionArgs) => {
+  const globalActiveSessions = useGlobalSessionsStore((state) => state.activeSessions);
+  const globalStructure = useGlobalSessionsStore((state) => state.structure);
+  const archivedSessions = useGlobalSessionsStore((state) => state.archivedSessions);
+  const hasAuthoritativeGlobalSessions = useGlobalSessionsStore((state) => state.status === 'ready');
+  const liveSessions = useAllLiveSessions();
+  const pinnedSessionIds = useSessionPinnedStore((state) => state.ids);
+  const sessionOrderRanks = useSessionOrderingStore(React.useCallback(
+    (state) => isVisible ? state.rankById : EMPTY_SESSION_ORDER_RANKS,
+    [isVisible],
+  ));
+  const structure = React.useMemo(() => buildSidebarSessionStructure({
+    globalActiveSessions,
+    globalStructure,
+    liveSessions,
+    knownDirectories,
+    isVSCode,
+  }), [globalActiveSessions, globalStructure, isVSCode, knownDirectories, liveSessions]);
+  const ordering = React.useMemo(
+    () => orderSidebarSessionStructure(structure, pinnedSessionIds, sessionOrderRanks),
+    [pinnedSessionIds, sessionOrderRanks, structure],
+  );
+  const { chatSessions, orderedSessions } = ordering;
+  const sessions = structure.projectSessions;
+  const sessionById = React.useMemo(() => new Map(
+    [...structure.sessions, ...archivedSessions].map((session) => [session.id, session]),
+  ), [archivedSessions, structure.sessions]);
+  const childrenMap = React.useMemo(() => {
+    const children = new Map(ordering.childrenMap);
+    for (const session of archivedSessions) {
+      // SAFETY: OpenCode's session records carry parentID for sub-session
+      // hierarchy; the SDK's base Session type does not currently expose it.
+      const parentID = (session as Session & { parentID?: string | null }).parentID;
+      if (!parentID) continue;
+      const siblings = children.get(parentID) ?? [];
+      siblings.push(session);
+      children.set(parentID, siblings);
+    }
+    return children;
+  }, [archivedSessions, ordering.childrenMap]);
+  const getDescendantIdsForAction = React.useCallback(
+    (sessionId: string, options: { includeArchived: boolean }) => getDescendantIds(childrenMap, sessionId)
+      .filter((id) => options.includeArchived || !sessionById.get(id)?.time?.archived),
+    [childrenMap, sessionById],
+  );
+
+  return {
+    archivedSessions,
+    childrenMap,
+    chatSessions,
+    getDescendantIds: getDescendantIdsForAction,
+    hasAuthoritativeGlobalSessions,
+    liveSessions,
+    orderedSessions,
+    pinnedSessionIds,
+    sessionOrderRanks,
+    sessions,
+    rootSessions: structure.rootSessions,
+  };
+};
+
+type UseRecentSessionCollectionArgs = {
+  enabled: boolean;
+  isVSCode: boolean;
+  pinnedSessionIds: Set<string>;
+  sessionOrderRanks: ReadonlyMap<string, number>;
+  sessions: Session[];
+};
+
+// Recent is a separate high-frequency collection view. Its active membership
+// never participates in project ownership or project section projection.
+export const useRecentSessionCollection = ({
+  enabled,
+  isVSCode,
+  pinnedSessionIds,
+  sessionOrderRanks,
+  sessions,
+}: UseRecentSessionCollectionArgs): Session[] => {
+  const activeSessionIdSet = useGlobalSessionStatusStore(
+    React.useCallback(
+      (state) => enabled && !isVSCode ? state.activeSessionIds : EMPTY_ACTIVE_SESSION_IDS,
+      [enabled, isVSCode],
+    ),
+  );
+
+  return React.useMemo(() => {
+    if (!enabled || isVSCode) return [];
+    countSyncPerformance('recentCandidatesVisited', sessions.length);
+    return orderSessionsByLifecycleScopes(
+      deriveRecentSessions(sessions, activeSessionIdSet),
+      pinnedSessionIds,
+      sessionOrderRanks,
+    );
+  }, [activeSessionIdSet, enabled, isVSCode, pinnedSessionIds, sessionOrderRanks, sessions]);
+};
diff --git a/packages/ui/src/components/session/sidebar/list/sessionListDirectories.test.ts b/packages/ui/src/components/session/sidebar/list/sessionListDirectories.test.ts
new file mode 100644
index 00000000..285b8841
--- /dev/null
+++ b/packages/ui/src/components/session/sidebar/list/sessionListDirectories.test.ts
@@ -0,0 +1,18 @@
+import { describe, expect, test } from 'bun:test';
+import { buildKnownSessionDirectories } from './sessionListDirectories';
+
+describe('buildKnownSessionDirectories', () => {
+  test('normalizes project roots and optionally includes worktrees', () => {
+    const worktrees = new Map([
+      ['/repo', [{ path: '/repo/worktree', projectDirectory: '/repo', branch: 'worktree', label: 'worktree' }]],
+    ]);
+
+    expect([...buildKnownSessionDirectories([{ path: '/Repo' }], worktrees)]).toEqual([
+      '/repo',
+      '/repo/worktree',
+    ]);
+    expect([...buildKnownSessionDirectories([{ path: '/Repo' }], worktrees, { includeWorktrees: false })]).toEqual([
+      '/repo',
+    ]);
+  });
+});
diff --git a/packages/ui/src/components/session/sidebar/list/sessionListDirectories.ts b/packages/ui/src/components/session/sidebar/list/sessionListDirectories.ts
new file mode 100644
index 00000000..e4d40764
--- /dev/null
+++ b/packages/ui/src/components/session/sidebar/list/sessionListDirectories.ts
@@ -0,0 +1,24 @@
+import type { WorktreeMetadata } from '@/types/worktree';
+import { normalizePath } from '../utils';
+
+export const buildKnownSessionDirectories = (
+  projects: Array<{ path: string }>,
+  availableWorktreesByProject: Map<string, WorktreeMetadata[]>,
+  options?: { includeWorktrees?: boolean },
+): Set<string> => {
+  const directories = new Set<string>();
+  for (const project of projects) {
+    const normalized = normalizePath(project.path)?.toLowerCase();
+    if (normalized) directories.add(normalized);
+  }
+  if (options?.includeWorktrees === false) {
+    return directories;
+  }
+  for (const worktrees of availableWorktreesByProject.values()) {
+    for (const worktree of worktrees) {
+      const normalized = normalizePath(worktree.path)?.toLowerCase();
+      if (normalized) directories.add(normalized);
+    }
+  }
+  return directories;
+};
diff --git a/packages/ui/src/components/session/sidebar/list/useAuthoritativeSessionCleanup.test.ts b/packages/ui/src/components/session/sidebar/list/useAuthoritativeSessionCleanup.test.ts
new file mode 100644
index 00000000..9a4e18ed
--- /dev/null
+++ b/packages/ui/src/components/session/sidebar/list/useAuthoritativeSessionCleanup.test.ts
@@ -0,0 +1,102 @@
+import { afterEach, beforeEach, describe, expect, mock, test } from 'bun:test';
+import React from 'react';
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import type { Session } from '@opencode-ai/sdk/v2';
+import { installHookTestDom } from '../test-utils/testDom';
+import {
+  buildAuthoritativeSessionIdentityMap,
+  findRemovedAuthoritativeSessions,
+} from './authoritativeSessionCleanup';
+
+// SAFETY: cleanup identity tests only consume the SDK session ID and directory fields.
+const session = (id: string, directory = '/repo'): Session => ({ id, directory }) as Session;
+
+const cleanups: Array<{ runtimeKey: string; directory: string; sessionId: string }> = [];
+mock.module('@/lib/runtime-switch', () => ({ getRuntimeKey: () => 'runtime' }));
+mock.module('@/sync/session-deletion-cleanup', () => ({
+  cleanupPersistedSessionState: (identity: { runtimeKey: string; directory: string; sessionId: string }) => cleanups.push(identity),
+}));
+const { useAuthoritativeSessionCleanup } = await import('./useAuthoritativeSessionCleanup');
+
+const CleanupProbe: React.FC<{ sessions: Session[]; revision: number }> = ({ sessions, revision }) => {
+  useAuthoritativeSessionCleanup({ enabled: true, hasAuthoritativeGlobalSessions: true, sessions });
+  return React.createElement('span', null, revision);
+};
+
+describe('authoritative session cleanup', () => {
+  let root: Root;
+  let dom: ReturnType<typeof installHookTestDom>;
+
+  beforeEach(() => {
+    cleanups.length = 0;
+    dom = installHookTestDom();
+    root = createRoot(dom.container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    dom.restore();
+  });
+
+  test('does not infer deletion from the first authoritative startup snapshot', () => {
+    const current = buildAuthoritativeSessionIdentityMap([]);
+
+    expect(findRemovedAuthoritativeSessions(null, current)).toEqual([]);
+  });
+
+  test('finds sessions omitted after an established authoritative baseline', () => {
+    const previous = buildAuthoritativeSessionIdentityMap([
+      session('deleted'),
+      session('retained'),
+    ]);
+    const current = buildAuthoritativeSessionIdentityMap([session('retained')]);
+
+    expect(findRemovedAuthoritativeSessions(previous, current)).toEqual([
+      { directory: '/repo', sessionId: 'deleted' },
+    ]);
+  });
+
+  test('treats archive membership as retained authority', () => {
+    const previous = buildAuthoritativeSessionIdentityMap([session('archived')]);
+    const current = buildAuthoritativeSessionIdentityMap([
+      // SAFETY: cleanup identity tests only consume the SDK session ID and directory fields.
+      { ...session('archived'), time: { archived: 10 } } as Session,
+    ]);
+
+    expect(findRemovedAuthoritativeSessions(previous, current)).toEqual([]);
+  });
+
+  test('does not treat a directory move as session deletion', () => {
+    const previous = buildAuthoritativeSessionIdentityMap([session('moved', '/repo-a')]);
+    const current = buildAuthoritativeSessionIdentityMap([session('moved', '/repo-b')]);
+
+    expect(findRemovedAuthoritativeSessions(previous, current)).toEqual([]);
+  });
+
+  test('uses the first mounted complete snapshot as a baseline, then cleans an omission once', () => {
+    const baseline = [session('deleted'), session('retained')];
+    act(() => root.render(React.createElement(CleanupProbe, { sessions: baseline, revision: 0 })));
+    expect(cleanups).toEqual([]);
+
+    act(() => root.render(React.createElement(CleanupProbe, { sessions: [session('retained')], revision: 1 })));
+    expect(cleanups).toEqual([{ runtimeKey: 'runtime', directory: '/repo', sessionId: 'deleted' }]);
+
+    act(() => root.render(React.createElement(CleanupProbe, { sessions: [session('retained')], revision: 2 })));
+    expect(cleanups).toHaveLength(1);
+  });
+
+  test('retains archive and move identities, preserves the same-array baseline on unrelated rerender, and resets on remount', () => {
+    const baseline = [session('session', '/repo-a')];
+    act(() => root.render(React.createElement(CleanupProbe, { sessions: baseline, revision: 0 })));
+    act(() => root.render(React.createElement(CleanupProbe, { sessions: baseline, revision: 1 })));
+    act(() => root.render(React.createElement(CleanupProbe, { sessions: [{ ...session('session', '/repo-a'), time: { created: 0, updated: 0, archived: 1 } }], revision: 2 })));
+    act(() => root.render(React.createElement(CleanupProbe, { sessions: [session('session', '/repo-b')], revision: 3 })));
+    expect(cleanups).toEqual([]);
+
+    act(() => root.unmount());
+    root = createRoot(dom.container);
+    act(() => root.render(React.createElement(CleanupProbe, { sessions: [], revision: 4 })));
+    expect(cleanups).toEqual([]);
+  });
+});
diff --git a/packages/ui/src/components/session/sidebar/hooks/useAuthoritativeSessionCleanup.ts b/packages/ui/src/components/session/sidebar/list/useAuthoritativeSessionCleanup.ts
similarity index 96%
rename from packages/ui/src/components/session/sidebar/hooks/useAuthoritativeSessionCleanup.ts
rename to packages/ui/src/components/session/sidebar/list/useAuthoritativeSessionCleanup.ts
index a86cc08b..4c7798bc 100644
--- a/packages/ui/src/components/session/sidebar/hooks/useAuthoritativeSessionCleanup.ts
+++ b/packages/ui/src/components/session/sidebar/list/useAuthoritativeSessionCleanup.ts
@@ -5,7 +5,7 @@ import { cleanupPersistedSessionState } from '@/sync/session-deletion-cleanup';
 import {
   buildAuthoritativeSessionIdentityMap,
   findRemovedAuthoritativeSessions,
-} from '../authoritativeSessionCleanup';
+} from './authoritativeSessionCleanup';
 
 export const useAuthoritativeSessionCleanup = (args: {
   enabled?: boolean;
diff --git a/packages/ui/src/components/session/sidebar/list/useSessionListSync.test.tsx b/packages/ui/src/components/session/sidebar/list/useSessionListSync.test.tsx
new file mode 100644
index 00000000..c57b312e
--- /dev/null
+++ b/packages/ui/src/components/session/sidebar/list/useSessionListSync.test.tsx
@@ -0,0 +1,247 @@
+import { afterEach, beforeEach, describe, expect, mock, test } from 'bun:test';
+import React from 'react';
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { installHookTestDom } from '../test-utils/testDom';
+import { useDirectoryStore } from '@/stores/useDirectoryStore';
+import { useProjectsStore } from '@/stores/useProjectsStore';
+import { useSessionUIStore } from '@/sync/session-ui-store';
+import type { WorktreeMetadata } from '@/types/worktree';
+
+type Event =
+  | { type: 'scheduled-task-ran' }
+  | { type: 'session-created'; directory: string };
+
+type LifecycleState = {
+  demands: Array<{ owner: string; directories: string[] }>;
+  clearedOwners: string[];
+  globalRefreshes: number;
+  directoryRefreshes: string[][];
+  cleanupInputs: Array<{ enabled: boolean; hasAuthoritativeGlobalSessions: boolean; sessionCount: number; sessions: unknown[] }>;
+  listener: ((event: Event) => void) | null;
+  subscriptions: number;
+  unsubscriptions: number;
+};
+const state: LifecycleState = {
+  demands: [],
+  clearedOwners: [],
+  globalRefreshes: 0,
+  directoryRefreshes: [],
+  cleanupInputs: [],
+  listener: null,
+  subscriptions: 0,
+  unsubscriptions: 0,
+};
+const childStores = {
+  setBootstrapDemand: (owner: string, demands: Array<{ directory: string }>) => {
+    state.demands.push({ owner, directories: demands.map((demand) => demand.directory) });
+  },
+  clearBootstrapDemand: (owner: string) => state.clearedOwners.push(owner),
+};
+type GlobalSessionsState = { activeSessions: never[]; archivedSessions: never[]; status: 'ready' };
+const globalSessions: GlobalSessionsState = { activeSessions: [], archivedSessions: [], status: 'ready' };
+
+mock.module('@/sync/sync-context', () => ({
+  useChildStoreManager: () => childStores,
+}));
+mock.module('@/sync/sync-refs', () => ({ getAllSyncSessions: () => [] }));
+mock.module('@/stores/useGlobalSessionsStore', () => ({
+  useGlobalSessionsStore: <T,>(selector: (value: GlobalSessionsState) => T): T => selector(globalSessions),
+  refreshGlobalSessions: () => { state.globalRefreshes += 1; },
+  refreshGlobalSessionsForDirectories: (directories: string[]) => { state.directoryRefreshes.push(directories); },
+}));
+mock.module('@/lib/openchamberEvents', () => ({
+  subscribeOpenchamberEvents: (listener: (event: Event) => void) => {
+    state.subscriptions += 1;
+    state.listener = listener;
+    return () => {
+      state.unsubscriptions += 1;
+      state.listener = null;
+    };
+  },
+}));
+mock.module('./useAuthoritativeSessionCleanup', () => ({
+  useAuthoritativeSessionCleanup: (input: { enabled: boolean; hasAuthoritativeGlobalSessions: boolean; sessions: unknown[] }) => {
+    state.cleanupInputs.push({
+      enabled: input.enabled,
+      hasAuthoritativeGlobalSessions: input.hasAuthoritativeGlobalSessions,
+      sessionCount: input.sessions.length,
+      sessions: input.sessions,
+    });
+  },
+}));
+
+const { useSessionListSync } = await import('./useSessionListSync');
+
+const projects = [{ id: 'project', path: '/project' }];
+const worktree: WorktreeMetadata = { path: '/worktree', projectDirectory: '/project', branch: 'feature', label: 'feature' };
+
+const LifecycleProbe: React.FC<{ isVSCode: boolean }> = ({ isVSCode }) => {
+  useSessionListSync({ isVSCode });
+  return null;
+};
+
+const LifecycleHarness: React.FC<{ isVSCode: boolean; branch: 'hidden' | 'visible' | 'compact-sessions' | 'compact-chat' | 'expanded' }> = ({ isVSCode, branch }) => <>
+  <LifecycleProbe isVSCode={isVSCode} />
+  <span>{branch}</span>
+</>;
+
+describe('useSessionListSync', () => {
+  let root: Root;
+  let dom: ReturnType<typeof installHookTestDom>;
+
+  beforeEach(() => {
+    state.demands = [];
+    state.clearedOwners = [];
+    state.globalRefreshes = 0;
+    state.directoryRefreshes = [];
+    state.cleanupInputs = [];
+    state.listener = null;
+    state.subscriptions = 0;
+    state.unsubscriptions = 0;
+    dom = installHookTestDom();
+    root = createRoot(dom.container);
+    useProjectsStore.setState({ projects, activeProjectId: 'project' });
+    useDirectoryStore.setState({ currentDirectory: '/project' });
+    useSessionUIStore.setState({ currentSessionDirectory: null, availableWorktreesByProject: new Map() });
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    dom.restore();
+  });
+
+  test('leaves initial global refresh to the root poller while publishing complete demand', () => {
+    act(() => useSessionUIStore.setState({ availableWorktreesByProject: new Map([['/project', [worktree]]]) }));
+    act(() => root.render(<LifecycleProbe isVSCode={false} />));
+
+    expect(state.globalRefreshes).toBe(0);
+    expect(state.demands).toHaveLength(1);
+    expect(state.demands[0]?.directories).toEqual(['/project', '/worktree']);
+    expect(state.directoryRefreshes).toEqual([]);
+    expect(state.subscriptions).toBe(1);
+    expect(state.cleanupInputs.at(-1)).toEqual({ enabled: true, hasAuthoritativeGlobalSessions: true, sessionCount: 0, sessions: [] });
+  });
+
+  test('refreshes every VS Code directory on first mount and only topology additions afterward', () => {
+    act(() => root.render(<LifecycleProbe isVSCode />));
+    act(() => useProjectsStore.setState({ projects: [...projects, { id: 'added', path: '/added' }] }));
+
+    expect(state.directoryRefreshes).toEqual([['/project'], ['/added']]);
+  });
+
+  test('coalesces control events and clears the listener, timeout, and demand on unmount', async () => {
+    act(() => root.render(<LifecycleProbe isVSCode={false} />));
+    state.listener?.({ type: 'session-created', directory: '/created-a' });
+    state.listener?.({ type: 'session-created', directory: '/created-b' });
+    state.listener?.({ type: 'scheduled-task-ran' });
+
+    await new Promise((resolve) => setTimeout(resolve, 550));
+    expect(state.globalRefreshes).toBe(1);
+    expect(state.directoryRefreshes).toEqual([]);
+
+    const owner = state.demands[0]?.owner;
+    act(() => root.unmount());
+    expect(state.unsubscriptions).toBe(1);
+    expect(state.clearedOwners).toEqual([owner]);
+  });
+
+  test('does not duplicate lifecycle ownership when a hidden MainLayout or compact VS Code view rerenders', () => {
+    act(() => root.render(<LifecycleProbe isVSCode={false} />));
+    const cleanupSessions = state.cleanupInputs.at(-1)?.sessions;
+    act(() => root.render(<LifecycleProbe isVSCode={false} />));
+    expect(state.globalRefreshes).toBe(0);
+    expect(state.subscriptions).toBe(1);
+    expect(state.demands).toHaveLength(1);
+    expect(state.cleanupInputs.at(-1)?.sessions).toBe(cleanupSessions);
+
+    act(() => root.unmount());
+    root = createRoot(dom.container);
+    act(() => root.render(<LifecycleProbe isVSCode />));
+    expect(state.globalRefreshes).toBe(0);
+    expect(state.subscriptions).toBe(2);
+    expect(state.unsubscriptions).toBe(1);
+  });
+
+  test('cancels a pending control-event refresh before a layout remount', async () => {
+    act(() => root.render(<LifecycleProbe isVSCode={false} />));
+    state.listener?.({ type: 'session-created', directory: '/created' });
+    act(() => root.unmount());
+
+    await new Promise((resolve) => setTimeout(resolve, 550));
+    expect(state.directoryRefreshes).toEqual([]);
+    expect(state.unsubscriptions).toBe(1);
+  });
+
+  test('binds MainLayout ownership to real Store worktrees without duplicating lifecycle work across branches', () => {
+    useProjectsStore.setState({
+      projects: [{ id: 'project', path: '/project' }],
+      activeProjectId: 'project',
+    });
+    useDirectoryStore.setState({ currentDirectory: '/project' });
+    useSessionUIStore.setState({
+      currentSessionDirectory: '/worktree',
+      availableWorktreesByProject: new Map([['/project', [worktree]]]),
+    });
+
+    act(() => root.render(<LifecycleHarness isVSCode={false} branch="hidden" />));
+    act(() => root.render(<LifecycleHarness isVSCode={false} branch="visible" />));
+    act(() => root.render(<LifecycleHarness isVSCode={false} branch="expanded" />));
+
+    expect(state.demands).toHaveLength(1);
+    expect(state.demands[0]?.directories).toEqual(['/project', '/worktree']);
+    expect(state.globalRefreshes).toBe(0);
+    expect(state.subscriptions).toBe(1);
+  });
+
+  test('binds VS Code ownership to Store projects without worktrees and refreshes its first directories once', () => {
+    useProjectsStore.setState({
+      projects: [{ id: 'project', path: '/project' }],
+      activeProjectId: 'project',
+    });
+    useDirectoryStore.setState({ currentDirectory: '/project' });
+    useSessionUIStore.setState({
+      currentSessionDirectory: '/project',
+      availableWorktreesByProject: new Map([['/project', [worktree]]]),
+    });
+
+    act(() => root.render(<LifecycleHarness isVSCode branch="compact-sessions" />));
+    act(() => root.render(<LifecycleHarness isVSCode branch="compact-chat" />));
+    act(() => root.unmount());
+    root = createRoot(dom.container);
+    act(() => root.render(<LifecycleHarness isVSCode branch="compact-sessions" />));
+
+    expect(state.demands.map((demand) => demand.directories)).toEqual([['/project'], ['/project']]);
+    expect(state.directoryRefreshes).toEqual([['/project'], ['/project']]);
+    expect(state.globalRefreshes).toBe(0);
+    expect(state.subscriptions).toBe(2);
+    expect(state.unsubscriptions).toBe(1);
+  });
+
+  test('does not rerender VS Code lifecycle ownership for worktree-map-only changes', () => {
+    useProjectsStore.setState({
+      projects: [{ id: 'project', path: '/project' }],
+      activeProjectId: 'project',
+    });
+    useDirectoryStore.setState({ currentDirectory: '/project' });
+    useSessionUIStore.setState({
+      currentSessionDirectory: '/project',
+      availableWorktreesByProject: new Map([['/project', [worktree]]]),
+    });
+
+    act(() => root.render(<LifecycleHarness isVSCode branch="compact-sessions" />));
+    const cleanupInputCount = state.cleanupInputs.length;
+    const demandCount = state.demands.length;
+    const directoryRefreshCount = state.directoryRefreshes.length;
+    const subscriptionCount = state.subscriptions;
+
+    act(() => useSessionUIStore.setState({
+      availableWorktreesByProject: new Map([['/project', [{ ...worktree, path: '/other-worktree' }]]]),
+    }));
+
+    expect(state.cleanupInputs).toHaveLength(cleanupInputCount);
+    expect(state.demands).toHaveLength(demandCount);
+    expect(state.directoryRefreshes).toHaveLength(directoryRefreshCount);
+    expect(state.subscriptions).toBe(subscriptionCount);
+  });
+});
diff --git a/packages/ui/src/components/session/sidebar/list/useSessionListSync.ts b/packages/ui/src/components/session/sidebar/list/useSessionListSync.ts
new file mode 100644
index 00000000..fc493588
--- /dev/null
+++ b/packages/ui/src/components/session/sidebar/list/useSessionListSync.ts
@@ -0,0 +1,97 @@
+import React from 'react';
+import { subscribeOpenchamberEvents } from '@/lib/openchamberEvents';
+import { refreshGlobalSessions, refreshGlobalSessionsForDirectories, useGlobalSessionsStore } from '@/stores/useGlobalSessionsStore';
+import { useChildStoreManager } from '@/sync/sync-context';
+import { getAllSyncSessions } from '@/sync/sync-refs';
+import { useSessionUIStore } from '@/sync/session-ui-store';
+import { useDirectoryStore } from '@/stores/useDirectoryStore';
+import { useProjectsStore } from '@/stores/useProjectsStore';
+import { buildSessionBootstrapDemands } from './sessionBootstrapDemands';
+import { buildKnownSessionDirectories } from './sessionListDirectories';
+import { useAuthoritativeSessionCleanup } from './useAuthoritativeSessionCleanup';
+import { normalizePath } from '../utils';
+
+const EMPTY_WORKTREES_BY_PROJECT = new Map();
+
+type UseSessionListSyncOptions = {
+  isVSCode: boolean;
+};
+
+export const useSessionListSync = ({
+  isVSCode,
+}: UseSessionListSyncOptions) => {
+  const childStores = useChildStoreManager();
+  const projects = useProjectsStore((state) => state.projects);
+  const activeProjectId = useProjectsStore((state) => state.activeProjectId);
+  const currentDirectory = useDirectoryStore((state) => state.currentDirectory);
+  const currentSessionDirectory = useSessionUIStore((state) => state.currentSessionDirectory);
+  const availableWorktreesByProject = useSessionUIStore((state) => isVSCode ? EMPTY_WORKTREES_BY_PROJECT : state.availableWorktreesByProject);
+  const knownDirectories = React.useMemo(
+    () => buildKnownSessionDirectories(projects, availableWorktreesByProject, { includeWorktrees: !isVSCode }),
+    [availableWorktreesByProject, isVSCode, projects],
+  );
+  const globalActiveSessions = useGlobalSessionsStore((state) => state.activeSessions);
+  const archivedSessions = useGlobalSessionsStore((state) => state.archivedSessions);
+  const hasAuthoritativeGlobalSessions = useGlobalSessionsStore((state) => state.status === 'ready');
+  const bootstrapDemandOwner = `session-list-sync:${React.useId()}`;
+
+  React.useEffect(() => {
+    childStores.setBootstrapDemand(bootstrapDemandOwner, buildSessionBootstrapDemands({
+      knownDirectories,
+      activeProjectDirectory: normalizePath(projects.find((project) => project.id === activeProjectId)?.path ?? null),
+      activeProjectId,
+      collapsedProjects: new Set(),
+      collapsedGroups: new Set(),
+      currentDirectory,
+      currentSessionDirectory,
+    }));
+    return () => childStores.clearBootstrapDemand(bootstrapDemandOwner);
+  }, [activeProjectId, bootstrapDemandOwner, childStores, currentDirectory, currentSessionDirectory, knownDirectories, projects]);
+
+  const knownProjectSessionDirectoriesRef = React.useRef<Set<string> | null>(null);
+  React.useEffect(() => {
+    const directories = new Set(knownDirectories);
+    const previous = knownProjectSessionDirectoriesRef.current;
+    knownProjectSessionDirectoriesRef.current = directories;
+    const added = previous ? [...directories].filter((directory) => !previous.has(directory)) : isVSCode ? [...directories] : [];
+    if (added.length) void refreshGlobalSessionsForDirectories(added, getAllSyncSessions());
+  }, [isVSCode, knownDirectories]);
+
+  React.useEffect(() => {
+    let timeout: ReturnType<typeof setTimeout> | null = null;
+    let refreshAll = false;
+    const directories = new Set<string>();
+    const unsubscribe = subscribeOpenchamberEvents((event) => {
+      if (event.type === 'scheduled-task-ran') refreshAll = true;
+      else if (event.type === 'session-created') directories.add(event.directory);
+      else return;
+      if (timeout) clearTimeout(timeout);
+      timeout = setTimeout(() => {
+        timeout = null;
+        if (refreshAll) {
+          refreshAll = false;
+          directories.clear();
+          void refreshGlobalSessions(getAllSyncSessions());
+          return;
+        }
+        const requested = [...directories];
+        directories.clear();
+        if (requested.length) void refreshGlobalSessionsForDirectories(requested, getAllSyncSessions());
+      }, 500);
+    });
+    return () => {
+      if (timeout) clearTimeout(timeout);
+      unsubscribe();
+    };
+  }, []);
+
+  const cleanupSessions = React.useMemo(
+    () => [...globalActiveSessions, ...archivedSessions],
+    [archivedSessions, globalActiveSessions],
+  );
+  useAuthoritativeSessionCleanup({
+    enabled: true,
+    hasAuthoritativeGlobalSessions,
+    sessions: cleanupSessions,
+  });
+};
diff --git a/packages/ui/src/components/session/sidebar/list/useSessionPrefetch.test.tsx b/packages/ui/src/components/session/sidebar/list/useSessionPrefetch.test.tsx
new file mode 100644
index 00000000..9789800b
--- /dev/null
+++ b/packages/ui/src/components/session/sidebar/list/useSessionPrefetch.test.tsx
@@ -0,0 +1,44 @@
+import { describe, expect, test } from 'bun:test';
+import React, { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import type { Session } from '@opencode-ai/sdk/v2';
+import { useSessionPrefetch } from './useSessionPrefetch';
+import { installHookTestDom } from '../test-utils/testDom';
+
+const session = (id: string): Session => ({
+  id,
+  slug: id,
+  projectID: 'project',
+  title: id,
+  version: '1',
+  directory: '/workspace',
+  time: { created: 1, updated: 1 },
+});
+
+describe('session prefetch demand', () => {
+  test('deduplicates the same nearby session from project and Recent projections', async () => {
+    const dom = installHookTestDom();
+    const root = createRoot(dom.container);
+    const current = session('current');
+    const nearby = session('nearby');
+    const calls: string[] = [];
+    const Harness = () => {
+      useSessionPrefetch({
+        enabled: true,
+        currentSessionId: current.id,
+        sortedSessions: [current, nearby],
+        recentSessions: [current, nearby],
+        prefetchSession: async ({ sessionID }) => { calls.push(sessionID); },
+      });
+      return null;
+    };
+    try {
+      await act(async () => root.render(React.createElement(Harness)));
+      await act(async () => { await new Promise((resolve) => setTimeout(resolve, 850)); });
+      expect(calls).toEqual(['nearby']);
+    } finally {
+      await act(async () => root.unmount());
+      dom.restore();
+    }
+  });
+});
diff --git a/packages/ui/src/components/session/sidebar/hooks/useSessionPrefetch.ts b/packages/ui/src/components/session/sidebar/list/useSessionPrefetch.ts
similarity index 84%
rename from packages/ui/src/components/session/sidebar/hooks/useSessionPrefetch.ts
rename to packages/ui/src/components/session/sidebar/list/useSessionPrefetch.ts
index 9cf895c3..13a1eeae 100644
--- a/packages/ui/src/components/session/sidebar/hooks/useSessionPrefetch.ts
+++ b/packages/ui/src/components/session/sidebar/list/useSessionPrefetch.ts
@@ -14,7 +14,7 @@ type Args = {
   currentSessionId: string | null;
   sortedSessions: Session[];
   recentSessions?: Session[];
-  prefetchSession: (sessionId: string, directory: string) => Promise<unknown>;
+  prefetchSession: (target: { directory: string; sessionID: string }) => Promise<void>;
 };
 
 type PrefetchRequest = {
@@ -23,22 +23,22 @@ type PrefetchRequest = {
   generation: number;
 };
 
+const getPrefetchRequestKey = (request: Pick<PrefetchRequest, 'directory' | 'sessionId'>): string => (
+  `${request.directory}\n${request.sessionId}`
+);
+
 const sessionDirectory = (session: Session | null | undefined): string | null => {
-  const directory = (session as (Session & { directory?: string | null }) | null | undefined)?.directory;
-  return typeof directory === 'string' && directory.trim() ? directory : null;
+  const directory = session?.directory?.trim();
+  return directory || null;
 };
 
-const useSessionPrefetch = ({ enabled = true, currentSessionId, sortedSessions, recentSessions = [], prefetchSession }: Args): void => {
+export const useSessionPrefetch = ({ enabled = true, currentSessionId, sortedSessions, recentSessions = [], prefetchSession }: Args): void => {
   const sessionPrefetchTimersRef = React.useRef<Map<string, number>>(new Map());
   const sessionPrefetchQueueRef = React.useRef<PrefetchRequest[]>([]);
   const sessionPrefetchInFlightRef = React.useRef<Set<string>>(new Set());
   const generationRef = React.useRef(0);
   const prefetchDisabled = React.useMemo(() => isVSCodeRuntime(), []);
 
-  const requestKey = React.useCallback((request: Pick<PrefetchRequest, 'directory' | 'sessionId'>) => (
-    `${request.directory}\n${request.sessionId}`
-  ), []);
-
   const clearPendingPrefetches = React.useCallback(() => {
     generationRef.current += 1;
     sessionPrefetchQueueRef.current = [];
@@ -47,7 +47,7 @@ const useSessionPrefetch = ({ enabled = true, currentSessionId, sortedSessions,
   }, []);
 
   const pumpSessionPrefetchQueue = React.useCallback(() => {
-    if (!enabled || prefetchDisabled || typeof window === 'undefined') {
+    if (!enabled || prefetchDisabled) {
       return;
     }
 
@@ -68,25 +68,25 @@ const useSessionPrefetch = ({ enabled = true, currentSessionId, sortedSessions,
         continue;
       }
 
-      const key = requestKey(request);
+      const key = getPrefetchRequestKey(request);
       sessionPrefetchInFlightRef.current.add(key);
-      void prefetchSession(request.sessionId, request.directory)
+      void prefetchSession({ directory: request.directory, sessionID: request.sessionId })
         .catch(() => undefined)
         .finally(() => {
           sessionPrefetchInFlightRef.current.delete(key);
           pumpSessionPrefetchQueue();
         });
     }
-  }, [enabled, prefetchDisabled, prefetchSession, requestKey]);
+  }, [enabled, prefetchDisabled, prefetchSession]);
 
   const scheduleSessionPrefetch = React.useCallback((session: Session | null | undefined) => {
     const sessionId = session?.id;
     const directory = sessionDirectory(session);
-    if (!enabled || prefetchDisabled || !sessionId || !directory || sessionId === currentSessionId || typeof window === 'undefined') {
+    if (!enabled || prefetchDisabled || !sessionId || !directory || sessionId === currentSessionId) {
       return;
     }
     const request = { sessionId, directory, generation: generationRef.current };
-    const key = requestKey(request);
+    const key = getPrefetchRequestKey(request);
 
     // Already renderable in sync
     if (getSyncSessionMaterializationStatus(sessionId, directory).renderable) {
@@ -97,7 +97,7 @@ const useSessionPrefetch = ({ enabled = true, currentSessionId, sortedSessions,
       return;
     }
 
-    if (sessionPrefetchQueueRef.current.some((candidate) => requestKey(candidate) === key)) {
+    if (sessionPrefetchQueueRef.current.some((candidate) => getPrefetchRequestKey(candidate) === key)) {
       return;
     }
 
@@ -117,7 +117,7 @@ const useSessionPrefetch = ({ enabled = true, currentSessionId, sortedSessions,
       pumpSessionPrefetchQueue();
     }, SESSION_PREFETCH_HOVER_DELAY_MS);
     sessionPrefetchTimersRef.current.set(key, timer);
-  }, [currentSessionId, enabled, prefetchDisabled, pumpSessionPrefetchQueue, requestKey]);
+  }, [currentSessionId, enabled, prefetchDisabled, pumpSessionPrefetchQueue]);
 
   React.useEffect(() => {
     clearPendingPrefetches();
diff --git a/packages/ui/src/components/session/sidebar/projects/SessionGroupSection.behavior.test.tsx b/packages/ui/src/components/session/sidebar/projects/SessionGroupSection.behavior.test.tsx
new file mode 100644
index 00000000..7665a74b
--- /dev/null
+++ b/packages/ui/src/components/session/sidebar/projects/SessionGroupSection.behavior.test.tsx
@@ -0,0 +1,207 @@
+import { describe, expect, mock, test } from 'bun:test';
+import React, { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { I18nProvider } from '@/lib/i18n';
+import { useSessionFoldersStore } from '@/stores/useSessionFoldersStore';
+import { useUIStore } from '@/stores/useUIStore';
+import type { SessionFolder } from '@/stores/useSessionFoldersStore';
+import type { Session } from '@opencode-ai/sdk/v2';
+import type { SessionGroupSectionProps } from './SessionGroupSection';
+import { installHookTestDom } from '../test-utils/testDom';
+
+type FolderCallbacks = {
+  onRename: (name: string) => void;
+  onDelete: () => void;
+};
+
+type RowPropsCapture = Pick<SessionGroupSectionProps,
+  | 'allowReselect'
+  | 'onSessionSelected'
+  | 'isSessionSearchOpen'
+  | 'sessionSearchQuery'
+  | 'deleteSessionConfirm'
+  | 'copiedSessionId'
+  | 'setCopiedSessionId'
+>;
+
+let folderCallbacks: FolderCallbacks | null = null;
+let rowPropsCapture: RowPropsCapture | null = null;
+
+mock.module('../../SessionFolderItem', () => ({
+  SessionFolderItem: (props: FolderCallbacks) => {
+    folderCallbacks = props;
+    return null;
+  },
+}));
+
+mock.module('../folders/sessionFolderDnd', () => ({
+  DroppableFolderWrapper: ({ children }: { children: (ref: () => void, isOver: boolean) => React.ReactNode }) => <>{children(() => undefined, false)}</>,
+  SessionFolderDndScope: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+}));
+
+mock.module('@/sync/sync-context', () => ({
+  setActiveSession: () => undefined,
+  useChildStoreManager: () => ({
+    subscribeBootstrap: () => () => undefined,
+    getBootstrapState: () => null,
+    getBootstrapFailure: () => undefined,
+    requestBootstrap: () => undefined,
+  }),
+  useDirectoryStore: () => null,
+  useGlobalSessionStatus: () => null,
+  useSessionPermissions: () => null,
+  useSessionQuestionCount: () => 0,
+  useSyncSDK: () => null,
+  useSyncDirectory: () => null,
+  buildSessionMessageRecordsSnapshot: () => [],
+}));
+
+mock.module('../sessions/collapsedActivityIndicator', () => ({
+  CollapsedSessionActivityIndicator: () => null,
+}));
+
+mock.module('../sessions/collapsedActivityState', () => ({
+  useCollapsedSessionActivityState: () => null,
+}));
+
+mock.module('../sessions/SessionTreeItem', () => ({
+  SessionTreeItem: (props: RowPropsCapture) => {
+    rowPropsCapture = props;
+    return null;
+  },
+}));
+
+const { SessionGroupSection } = await import('./SessionGroupSection');
+
+const folder: SessionFolder = {
+  id: 'folder-a',
+  name: 'Initial folder',
+  parentId: null,
+  sessionIds: [],
+  createdAt: 1,
+};
+
+const group: SessionGroupSectionProps['group'] = {
+  id: 'main',
+  label: 'Main',
+  branch: null,
+  description: null,
+  isMain: true,
+  worktree: null,
+  directory: '/workspace',
+  folderScopeKey: '/workspace',
+  sessions: [],
+};
+
+const groupWithSession: SessionGroupSectionProps['group'] = {
+  ...group,
+  // SAFETY: SessionGroupSection only reads the fixture session's id in this test.
+  sessions: [{ session: { id: 'session-a' } as Session, children: [], worktree: null }],
+};
+
+const createProps = (): SessionGroupSectionProps => ({
+  group,
+  groupKey: 'project:main',
+  projectId: 'project',
+  hideGroupLabel: true,
+  hasSessionSearchQuery: false,
+  normalizedSessionSearchQuery: '',
+  groupSearchDataByGroup: new WeakMap(),
+  collapsedGroups: new Set(),
+  hideDirectoryControls: false,
+  showMoreGroupSessions: () => undefined,
+  resetGroupSessionLimit: () => undefined,
+  mobileVariant: false,
+  alwaysShowActions: false,
+  activeProjectId: null,
+  setActiveProjectIdOnly: () => undefined,
+  setSessionSwitcherOpen: () => undefined,
+  openNewSessionDraft: () => undefined,
+  pinnedSessionIds: new Set(),
+  sessionOrderIndex: new Map(),
+  notifyOnSubtasks: false,
+  expandedParents: new Set(),
+  editingId: null,
+  editTitle: '',
+  copiedSessionId: null,
+  openSidebarMenuKey: null,
+  setEditingId: () => undefined,
+  setEditTitle: () => undefined,
+  toggleParent: () => undefined,
+  setOpenSidebarMenuKey: () => undefined,
+  startFolderRename: () => undefined,
+  allowReselect: false,
+  isSessionSearchOpen: false,
+  sessionSearchQuery: '',
+  setSessionSearchQuery: () => undefined,
+  setIsSessionSearchOpen: () => undefined,
+  deleteSessionConfirm: null,
+  setDeleteSessionConfirm: () => undefined,
+  setCopiedSessionId: () => undefined,
+  onToggleCollapsedGroup: () => undefined,
+  folderRename: null,
+  setFolderRenameDraft: () => undefined,
+  clearFolderRename: () => undefined,
+});
+
+describe('SessionGroupSection public behavior', () => {
+  test('routes rendered folder rename and delete actions to the owning folder store', async () => {
+    const dom = installHookTestDom();
+    const root = createRoot(dom.container);
+    const originalFolders = useSessionFoldersStore.getState();
+    const originalUi = useUIStore.getState();
+    useSessionFoldersStore.setState({ foldersMap: { '/workspace': [folder] } });
+    useUIStore.setState({ showDeletionDialog: false });
+
+    try {
+      await act(async () => root.render(<I18nProvider><SessionGroupSection {...createProps()} /></I18nProvider>));
+      expect(folderCallbacks).not.toBeNull();
+
+      await act(async () => folderCallbacks?.onRename('Renamed folder'));
+      expect(useSessionFoldersStore.getState().foldersMap['/workspace']?.[0]?.name).toBe('Renamed folder');
+
+      await act(async () => folderCallbacks?.onDelete());
+      expect(useSessionFoldersStore.getState().foldersMap['/workspace']).toEqual([]);
+    } finally {
+      await act(async () => root.unmount());
+      useSessionFoldersStore.setState(originalFolders, true);
+      useUIStore.setState(originalUi, true);
+      folderCallbacks = null;
+      dom.restore();
+    }
+  });
+
+  test('propagates confirmation, search/navigation, and copy ownership changes to rendered rows', async () => {
+    const dom = installHookTestDom();
+    const root = createRoot(dom.container);
+    const firstSelected = () => undefined;
+    const nextSelected = () => undefined;
+    const firstCopied = () => undefined;
+    const nextCopied = () => undefined;
+    const initialProps = createProps();
+
+    try {
+      await act(async () => root.render(<I18nProvider><SessionGroupSection {...initialProps} group={groupWithSession} onSessionSelected={firstSelected} setCopiedSessionId={firstCopied} /></I18nProvider>));
+      expect(rowPropsCapture?.onSessionSelected).toBe(firstSelected);
+      expect(rowPropsCapture?.sessionSearchQuery).toBe('');
+      expect(rowPropsCapture?.deleteSessionConfirm).toBeNull();
+      expect(rowPropsCapture?.copiedSessionId).toBeNull();
+      expect(rowPropsCapture?.setCopiedSessionId).toBe(firstCopied);
+
+      // SAFETY: the confirmation is only forwarded by identity to the row mock.
+      const confirmation = { session: { id: 'session-a' } as Session, descendantCount: 0, descendantIds: [], archivedBucket: false };
+      await act(async () => root.render(<I18nProvider><SessionGroupSection {...initialProps} group={groupWithSession} allowReselect onSessionSelected={nextSelected} isSessionSearchOpen sessionSearchQuery="search" deleteSessionConfirm={confirmation} copiedSessionId="session-a" setCopiedSessionId={nextCopied} /></I18nProvider>));
+      expect(rowPropsCapture?.allowReselect).toBe(true);
+      expect(rowPropsCapture?.onSessionSelected).toBe(nextSelected);
+      expect(rowPropsCapture?.isSessionSearchOpen).toBe(true);
+      expect(rowPropsCapture?.sessionSearchQuery).toBe('search');
+      expect(rowPropsCapture?.deleteSessionConfirm).toBe(confirmation);
+      expect(rowPropsCapture?.copiedSessionId).toBe('session-a');
+      expect(rowPropsCapture?.setCopiedSessionId).toBe(nextCopied);
+    } finally {
+      await act(async () => root.unmount());
+      rowPropsCapture = null;
+      dom.restore();
+    }
+  });
+});
diff --git a/packages/ui/src/components/session/sidebar/projects/SessionGroupSection.test.ts b/packages/ui/src/components/session/sidebar/projects/SessionGroupSection.test.ts
new file mode 100644
index 00000000..6641ff6c
--- /dev/null
+++ b/packages/ui/src/components/session/sidebar/projects/SessionGroupSection.test.ts
@@ -0,0 +1,68 @@
+import { describe, expect, test } from 'bun:test';
+import type { SessionFolder } from '@/stores/useSessionFoldersStore';
+import { normalizeFolderRoots, selectFolderIdsForProjection } from '../sessions/sessionNodeItemUtils';
+
+const folder = (id: string, parentId: string | null = null, sessionIds: string[] = []): SessionFolder => ({
+  id,
+  name: id,
+  parentId,
+  sessionIds,
+  createdAt: 1,
+});
+
+describe('normalizeFolderRoots', () => {
+  test('returns cycle and orphan folders as deterministic fallback roots without duplication', () => {
+    const folders = [
+      folder('cycle-a', 'cycle-b', ['session-a']),
+      folder('cycle-b', 'cycle-a'),
+      folder('orphan', 'missing-parent'),
+      folder('root'),
+    ];
+
+    expect(normalizeFolderRoots(folders).map((entry) => entry.id))
+      .toEqual(['orphan', 'root', 'cycle-a']);
+  });
+
+  test('keeps normal nested folder root order unchanged', () => {
+    const folders = [folder('root-a'), folder('child-a', 'root-a'), folder('root-b')];
+
+    expect(normalizeFolderRoots(folders).map((entry) => entry.id)).toEqual(['root-a', 'root-b']);
+  });
+});
+
+describe('selectFolderIdsForProjection', () => {
+  const malformedFolders = [
+    { id: 'cycle-a', name: 'cycle-a', parentId: 'cycle-b', nodeCount: 0 },
+    { id: 'cycle-b', name: 'cycle-b', parentId: 'cycle-a', nodeCount: 1 },
+    { id: 'orphan', name: 'orphan', parentId: 'missing-parent', nodeCount: 0 },
+  ];
+
+  test('keeps malformed empty and nonempty folders in every projection mode', () => {
+    for (const archivedBucket of [false, true]) {
+      for (const searchQuery of ['', 'does-not-match']) {
+        expect([...selectFolderIdsForProjection(malformedFolders, { archivedBucket, searchQuery })])
+          .toEqual(['cycle-a', 'cycle-b', 'orphan']);
+      }
+    }
+  });
+
+  test('keeps normal archived/search nesting semantics', () => {
+    const folders = [
+      { id: 'root', name: 'root', parentId: null, nodeCount: 0 },
+      { id: 'child', name: 'matching-child', parentId: 'root', nodeCount: 1 },
+    ];
+
+    expect([...selectFolderIdsForProjection(folders, { archivedBucket: true, searchQuery: 'matching' })])
+      .toEqual(['root', 'child']);
+  });
+
+  test('keeps a fuzzy folder match and its ancestor', () => {
+    const folders = [
+      { id: 'root', name: 'Root', parentId: null, nodeCount: 0 },
+      { id: 'child', name: 'Release Notes', parentId: 'root', nodeCount: 0 },
+    ];
+
+    expect([...selectFolderIdsForProjection(folders, { archivedBucket: false, searchQuery: 'release-notes' })])
+      .toEqual(['root', 'child']);
+  });
+});
diff --git a/packages/ui/src/components/session/sidebar/SessionGroupSection.tsx b/packages/ui/src/components/session/sidebar/projects/SessionGroupSection.tsx
similarity index 78%
rename from packages/ui/src/components/session/sidebar/SessionGroupSection.tsx
rename to packages/ui/src/components/session/sidebar/projects/SessionGroupSection.tsx
index cfab4159..7a571e30 100644
--- a/packages/ui/src/components/session/sidebar/SessionGroupSection.tsx
+++ b/packages/ui/src/components/session/sidebar/projects/SessionGroupSection.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { useVirtualizer } from '@tanstack/react-virtual';
+import { useShallow } from 'zustand/react/shallow';
 import type { Session } from '@opencode-ai/sdk/v2';
 
 // Archived buckets routinely grow into the hundreds/thousands; virtualize
@@ -8,38 +9,40 @@ const ARCHIVED_VIRTUALIZE_THRESHOLD = 50;
 // Compact rows in the archived bucket without nested subagents render
 // around 24-32px; virtua measures mounted rows and uses this as the initial hint.
 const ARCHIVED_ROW_ESTIMATE_PX = 28;
+const EMPTY_FOLDERS: readonly never[] = [];
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 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 { useUIStore } from '@/stores/useUIStore';
+import { SessionFolderItem } from '../../SessionFolderItem';
 import type { SortableDragHandleProps } from './sortableItems';
-import { DroppableFolderWrapper, SessionFolderDndScope } from './sessionFolderDnd';
-import type { GroupSearchData, SessionGroup, SessionNode } from './types';
-import { isBranchDifferentFromLabel, normalizePath, renderHighlightedText } from './utils';
+import { DroppableFolderWrapper, SessionFolderDndScope } from '../folders/sessionFolderDnd';
+import type { GroupSearchData, SessionGroup, SessionNode } from '../types';
+import { isBranchDifferentFromLabel, normalizePath, renderHighlightedText } from '../utils';
 import { compareSessionsByLifecycleOrder, EMPTY_SESSION_ORDER_RANKS } from '@/sync/session-ordering';
 import {
   collectSubtreeContainingId,
   computeNodeStructureKey,
   nodeHasPinnedMembershipChange,
   nodeContainsSessionId,
+  normalizeFolderRoots,
   resolveMenuOpenSessionId,
+  selectFolderIdsForProjection,
   selectFolderRootNodes,
-} from './sessionNodeItemUtils';
-import type { SessionNodeRenderExtras } from './sessionNodeItemUtils';
+} from '../sessions/sessionNodeItemUtils';
 import { useSessionFoldersStore } from '@/stores/useSessionFoldersStore';
+
+type FolderScope = { scopeKey: string; directory: string | null };
 import { getGitHubPrStatusKey, usePrVisualSummary } from '@/stores/useGitHubPrStatusStore';
 import { useI18n } from '@/lib/i18n';
 import { useChildStoreManager } from '@/sync/sync-context';
 import { canRequestNativeDirectoryAccess, requestDirectoryAccess } from '@/lib/desktop';
-import { CollapsedActivityIndicator } from './collapsedActivityIndicator';
-import {
-  getSessionNodesActivityState,
-  mergeCollapsedActivityStates,
-  type CollapsedActivityState,
-} from './collapsedActivityState';
+import { CollapsedSessionActivityIndicator } from '../sessions/collapsedActivityIndicator';
+import { useCollapsedSessionActivityState } from '../sessions/collapsedActivityState';
+import { SessionTreeItem, type SessionTreeItemProps } from '../sessions/SessionTreeItem';
+import { FolderDeleteConfirmDialog } from '../shell/ConfirmDialogs';
 
 type DeleteFolderConfirm = {
   scopeKey: string;
@@ -49,7 +52,7 @@ type DeleteFolderConfirm = {
   sessionCount: number;
 } | null;
 
-type Props = {
+export type SessionGroupSectionProps = {
   group: SessionGroup;
   groupKey: string;
   projectId?: string | null;
@@ -61,46 +64,22 @@ type Props = {
   sessionBatchSize?: number;
   collapsedGroups: Set<string>;
   hideDirectoryControls: boolean;
-  collapsedFolderIds: Set<string>;
-  toggleFolderCollapse: (folderId: string) => void;
-  renameFolder: (scopeKey: string, folderId: string, name: string) => void;
-  deleteFolder: (scopeKey: string, folderId: string) => void;
-  showDeletionDialog: boolean;
-  setDeleteFolderConfirm: React.Dispatch<React.SetStateAction<DeleteFolderConfirm>>;
-  renderSessionNode: (
-    node: SessionNode,
-    depth?: number,
-    groupDirectory?: string | null,
-    projectId?: string | null,
-    archivedBucket?: boolean,
-    secondaryMeta?: { projectLabel?: string | null; branchLabel?: string | null } | null,
-    renderContext?: 'project' | 'recent',
-    renderExtras?: SessionNodeRenderExtras,
-  ) => React.ReactNode;
   showMoreGroupSessions: (groupKey: string, currentVisibleCount: number, increment?: number) => void;
   resetGroupSessionLimit: (groupKey: string) => void;
   mobileVariant: boolean;
   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;
-  createFolderAndStartRename: (scopeKey: string, parentId?: string | null) => { id: string } | null;
-  renamingFolderId: string | null;
-  renameFolderDraft: string;
-  setRenameFolderDraft: React.Dispatch<React.SetStateAction<string>>;
-  setRenamingFolderId: React.Dispatch<React.SetStateAction<string | null>>;
   pinnedSessionIds: Set<string>;
-  expandedParents: Set<string>;
   sessionOrderIndex: Map<string, number>;
+  notifyOnSubtasks: boolean;
+  expandedParents: Set<string>;
   editingId: string | null;
   editTitle: string;
+  copiedSessionId: string | null;
   openSidebarMenuKey: string | null;
-  activeActivitySessionIds: Set<string>;
-  unreadActivitySessionIds: Set<string>;
-  notifyOnSubtasks: boolean;
   onToggleCollapsedGroup: (groupKey: string) => void;
   dragHandleProps?: SortableDragHandleProps | null;
   compactBodyPadding?: boolean;
@@ -111,7 +90,34 @@ type Props = {
    * render of an expanded archived bucket.
    */
   scrollContainerRef?: React.RefObject<HTMLElement | null>;
-};
+  folderRename: { scopeKey: string; folderId: string; draft: string } | null;
+  setFolderRenameDraft: (draft: string) => void;
+  clearFolderRename: () => void;
+} & Pick<SessionTreeItemProps,
+  | 'setEditingId'
+  | 'setEditTitle'
+  | 'toggleParent'
+  | 'setOpenSidebarMenuKey'
+  | 'allowReselect'
+  | 'onSessionSelected'
+  | 'isSessionSearchOpen'
+  | 'sessionSearchQuery'
+  | 'setSessionSearchQuery'
+  | 'setIsSessionSearchOpen'
+  | 'deleteSessionConfirm'
+  | 'setDeleteSessionConfirm'
+  | 'startFolderRename'
+  | 'setCopiedSessionId'
+>;
+
+const CollapsedFolderActivity: React.FC<{
+  nodes: SessionNode[];
+  includeUnreadSubtasks: boolean;
+  children: (state: ReturnType<typeof useCollapsedSessionActivityState>) => React.ReactNode;
+}> = ({ nodes, includeUnreadSubtasks, children }) => children(useCollapsedSessionActivityState({
+  nodes,
+  includeUnreadSubtasks,
+}));
 
 const groupContainsSessionId = (group: SessionGroup, sessionId: string | null): boolean => {
   if (!sessionId) return false;
@@ -146,26 +152,6 @@ const groupHasSessionOrderChange = (
   return group.sessions.some(visit);
 };
 
-const groupHasActivityMembershipChange = (
-  group: SessionGroup,
-  prevSessionIds: Set<string>,
-  nextSessionIds: Set<string>,
-): boolean => {
-  const visit = (node: SessionNode): boolean => {
-    if (prevSessionIds.has(node.session.id) !== nextSessionIds.has(node.session.id)) return true;
-    return node.children.some(visit);
-  };
-  return group.sessions.some(visit);
-};
-
-const groupHasAnyActivityMembership = (group: SessionGroup, sessionIds: Set<string>): boolean => {
-  const visit = (node: SessionNode): boolean => {
-    if (sessionIds.has(node.session.id)) return true;
-    return node.children.some(visit);
-  };
-  return group.sessions.some(visit);
-};
-
 const groupHasExpansionMembershipChange = (
   group: SessionGroup,
   prevExpandedParents: Set<string>,
@@ -180,7 +166,7 @@ const groupHasExpansionMembershipChange = (
   return group.sessions.some(visit);
 };
 
-const areGroupPropsEqual = (prev: Props, next: Props): boolean => {
+const areGroupPropsEqual = (prev: SessionGroupSectionProps, next: SessionGroupSectionProps): boolean => {
   // Bail on Object.is for the props that drive the most work: the group
   // itself, its key, and the group-level chrome. These change rarely and
   // any change should force a re-render of this group.
@@ -203,45 +189,36 @@ const areGroupPropsEqual = (prev: Props, next: Props): boolean => {
     return false;
   }
 
-  if (prev.expandedParents !== next.expandedParents
-    && groupHasExpansionMembershipChange(next.group, prev.expandedParents, next.expandedParents)) {
-    return false;
-  }
-
   if (prev.sessionOrderIndex !== next.sessionOrderIndex
     && groupHasSessionOrderChange(next.group, prev.sessionOrderIndex, next.sessionOrderIndex)) {
     return false;
   }
 
+  if (prev.expandedParents !== next.expandedParents
+    && groupHasExpansionMembershipChange(next.group, prev.expandedParents, next.expandedParents)) {
+    return false;
+  }
   if (prev.editingId !== next.editingId
-    && (groupContainsSessionId(prev.group, prev.editingId) || groupContainsSessionId(next.group, next.editingId))) {
+    && (groupContainsSessionId(next.group, prev.editingId) || groupContainsSessionId(next.group, next.editingId))) {
     return false;
   }
-
-  if (prev.editTitle !== next.editTitle
-    && (groupContainsSessionId(prev.group, prev.editingId) || groupContainsSessionId(next.group, next.editingId))) {
+  if (prev.editTitle !== next.editTitle && groupContainsSessionId(next.group, next.editingId)) return false;
+  if (prev.copiedSessionId !== next.copiedSessionId
+    && (groupContainsSessionId(next.group, prev.copiedSessionId) || groupContainsSessionId(next.group, next.copiedSessionId))) {
     return false;
   }
-
   if (prev.openSidebarMenuKey !== next.openSidebarMenuKey) {
-    const prevMenuSessionId = resolveMenuOpenSessionId(prev.group.sessions, prev.openSidebarMenuKey, 'project', Boolean(prev.group.isArchivedBucket));
-    const nextMenuSessionId = resolveMenuOpenSessionId(next.group.sessions, next.openSidebarMenuKey, 'project', Boolean(next.group.isArchivedBucket));
-    if (prevMenuSessionId || nextMenuSessionId) return false;
+    const archived = next.group.isArchivedBucket === true;
+    const previousMenuSessionId = resolveMenuOpenSessionId(next.group.sessions, prev.openSidebarMenuKey, 'project', archived);
+    const nextMenuSessionId = resolveMenuOpenSessionId(next.group.sessions, next.openSidebarMenuKey, 'project', archived);
+    if (previousMenuSessionId || nextMenuSessionId) return false;
   }
-
-  if (prev.activeActivitySessionIds !== next.activeActivitySessionIds
-    && groupHasActivityMembershipChange(next.group, prev.activeActivitySessionIds, next.activeActivitySessionIds)) {
-    return false;
-  }
-
-  if (prev.unreadActivitySessionIds !== next.unreadActivitySessionIds
-    && groupHasActivityMembershipChange(next.group, prev.unreadActivitySessionIds, next.unreadActivitySessionIds)) {
-    return false;
-  }
-
-  if (prev.notifyOnSubtasks !== next.notifyOnSubtasks
-    && groupHasAnyActivityMembership(next.group, next.unreadActivitySessionIds)) {
-    return false;
+  if (prev.folderRename !== next.folderRename) {
+    const scopes = next.group.folderScopes?.map((scope) => scope.scopeKey)
+      ?? [next.group.folderScopeKey ?? normalizePath(next.group.directory ?? null)];
+    if (scopes.includes(prev.folderRename?.scopeKey ?? null) || scopes.includes(next.folderRename?.scopeKey ?? null)) {
+      return false;
+    }
   }
 
   // Other props are typically stable references from the parent. Default
@@ -251,35 +228,37 @@ const areGroupPropsEqual = (prev: Props, next: Props): boolean => {
     prev.hasSessionSearchQuery === next.hasSessionSearchQuery
     && prev.normalizedSessionSearchQuery === next.normalizedSessionSearchQuery
     && prev.hideDirectoryControls === next.hideDirectoryControls
-    && prev.collapsedFolderIds === next.collapsedFolderIds
-    && prev.toggleFolderCollapse === next.toggleFolderCollapse
-    && prev.renameFolder === next.renameFolder
-    && prev.deleteFolder === next.deleteFolder
-    && prev.showDeletionDialog === next.showDeletionDialog
-    && prev.setDeleteFolderConfirm === next.setDeleteFolderConfirm
-    && prev.renderSessionNode === next.renderSessionNode
     && prev.showMoreGroupSessions === next.showMoreGroupSessions
     && prev.resetGroupSessionLimit === next.resetGroupSessionLimit
     && prev.mobileVariant === next.mobileVariant
     && 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
-    && prev.createFolderAndStartRename === next.createFolderAndStartRename
-    && prev.renamingFolderId === next.renamingFolderId
-    && prev.renameFolderDraft === next.renameFolderDraft
-    && prev.setRenameFolderDraft === next.setRenameFolderDraft
-    && prev.setRenamingFolderId === next.setRenamingFolderId
     && prev.onToggleCollapsedGroup === next.onToggleCollapsedGroup
     && prev.dragHandleProps === next.dragHandleProps
     && prev.scrollContainerRef === next.scrollContainerRef
+    && prev.notifyOnSubtasks === next.notifyOnSubtasks
+    && prev.setEditingId === next.setEditingId
+    && prev.setEditTitle === next.setEditTitle
+    && prev.toggleParent === next.toggleParent
+    && prev.setOpenSidebarMenuKey === next.setOpenSidebarMenuKey
+    && prev.allowReselect === next.allowReselect
+    && prev.onSessionSelected === next.onSessionSelected
+    && prev.isSessionSearchOpen === next.isSessionSearchOpen
+    && prev.sessionSearchQuery === next.sessionSearchQuery
+    && prev.setSessionSearchQuery === next.setSessionSearchQuery
+    && prev.setIsSessionSearchOpen === next.setIsSessionSearchOpen
+    && prev.deleteSessionConfirm === next.deleteSessionConfirm
+    && prev.setDeleteSessionConfirm === next.setDeleteSessionConfirm
+    && prev.startFolderRename === next.startFolderRename
+    && prev.setCopiedSessionId === next.setCopiedSessionId
+    && prev.setFolderRenameDraft === next.setFolderRenameDraft
+    && prev.clearFolderRename === next.clearFolderRename
   );
 };
 
-function SessionGroupSectionBase(props: Props): React.ReactNode {
+function SessionGroupSectionBase(props: SessionGroupSectionProps): React.ReactNode {
   const { t } = useI18n();
   const {
     group,
@@ -293,42 +272,36 @@ function SessionGroupSectionBase(props: Props): React.ReactNode {
     sessionBatchSize,
     collapsedGroups,
     hideDirectoryControls,
-    collapsedFolderIds,
-    toggleFolderCollapse,
-    renameFolder,
-    deleteFolder,
-    showDeletionDialog,
-    setDeleteFolderConfirm,
-    renderSessionNode,
     showMoreGroupSessions,
     resetGroupSessionLimit,
     mobileVariant,
     alwaysShowActions,
     activeProjectId,
     setActiveProjectIdOnly,
-    setActiveMainTab,
     setSessionSwitcherOpen,
     openNewSessionDraft,
-    addSessionToFolder,
-    createFolderAndStartRename,
-    renamingFolderId,
-    renameFolderDraft,
-    setRenameFolderDraft,
-    setRenamingFolderId,
     pinnedSessionIds,
-    expandedParents,
     sessionOrderIndex,
-    editingId,
-    openSidebarMenuKey,
-    activeActivitySessionIds,
-    unreadActivitySessionIds,
     notifyOnSubtasks,
     onToggleCollapsedGroup,
     dragHandleProps,
     compactBodyPadding = false,
     scrollContainerRef,
+    expandedParents,
+    editingId,
+    openSidebarMenuKey,
+    editTitle,
+    copiedSessionId,
+    folderRename,
+    setFolderRenameDraft,
+    clearFolderRename,
   } = props;
-
+  const toggleFolderCollapse = useSessionFoldersStore((state) => state.toggleFolderCollapse);
+  const renameFolder = useSessionFoldersStore((state) => state.renameFolder);
+  const deleteFolder = useSessionFoldersStore((state) => state.deleteFolder);
+  const addSessionToFolder = useSessionFoldersStore((state) => state.addSessionToFolder);
+  const showDeletionDialog = useUIStore((state) => state.showDeletionDialog);
+  const [deleteFolderConfirm, setDeleteFolderConfirm] = React.useState<DeleteFolderConfirm>(null);
   const compareSessionNodes = React.useCallback((a: SessionNode, b: SessionNode) => {
     const aIndex = sessionOrderIndex.get(a.session.id);
     const bIndex = sessionOrderIndex.get(b.session.id);
@@ -341,7 +314,6 @@ function SessionGroupSectionBase(props: Props): React.ReactNode {
   }, [pinnedSessionIds, sessionOrderIndex]);
 
   const searchData = hasSessionSearchQuery ? groupSearchDataByGroup.get(group) : null;
-  const foldersMap = useSessionFoldersStore((state) => state.foldersMap);
   const isCollapsed = hasSessionSearchQuery ? false : collapsedGroups.has(groupKey);
   // PR state for the worktree sub-header (grouped display mode).
   const groupPrKey = React.useMemo(() => {
@@ -416,15 +388,26 @@ function SessionGroupSectionBase(props: Props): React.ReactNode {
   const folderScopeKey = group.folderScopeKey ?? normalizePath(group.directory ?? null);
   // Merged flat groups list every contributing scope; single-scope groups
   // (archived buckets, VS Code workspaces) fall back to folderScopeKey.
-  const folderScopes = React.useMemo<Array<{ scopeKey: string; directory: string | null }>>(() => {
+  const folderScopes = React.useMemo<FolderScope[]>(() => {
     if (group.folderScopes && group.folderScopes.length > 0) return group.folderScopes;
     return folderScopeKey ? [{ scopeKey: folderScopeKey, directory: group.directory ?? null }] : [];
   }, [folderScopeKey, group.directory, group.folderScopes]);
-  const scopeFolders = React.useMemo(
-    () => folderScopes.flatMap(({ scopeKey, directory }) =>
-      (foldersMap[scopeKey] ?? []).map((folder) => ({ folder, scopeKey, scopeDirectory: directory }))),
-    [folderScopes, foldersMap]
-  );
+  // A group only needs folders and collapse state from its own scopes. The
+  // shallow projection retains its reference for mutations elsewhere.
+  const folderProjection = useSessionFoldersStore(useShallow(React.useCallback(
+    (state) => folderScopes.map(({ scopeKey }) => state.foldersMap[scopeKey] ?? EMPTY_FOLDERS),
+    [folderScopes],
+  )));
+  const scopeFolders = React.useMemo(() => folderScopes.flatMap(({ scopeKey, directory }, index) => {
+    const folders = folderProjection[index] ?? EMPTY_FOLDERS;
+    return folders.map((folder) => ({ folder, scopeKey, scopeDirectory: directory }));
+  }), [folderProjection, folderScopes]);
+  const collapsedFolderIds = useSessionFoldersStore(useShallow(React.useCallback(
+    (state) => new Set(folderProjection.flatMap((folders) => folders
+      .filter((folder) => state.collapsedFolderIds.has(folder.id))
+      .map((folder) => folder.id))),
+    [folderProjection],
+  )));
 
   const nodeBySessionId = React.useMemo(() => {
     const map = new Map<string, SessionNode>();
@@ -446,60 +429,33 @@ function SessionGroupSectionBase(props: Props): React.ReactNode {
   }), [scopeFolders, nodeBySessionId, compareSessionNodes]);
 
   const allFoldersForGroup = React.useMemo(() => {
-    const folderMapById = new Map(allFoldersForGroupBase.map((entry) => [entry.folder.id, entry]));
-    const childFolderIdsByParentId = new Map<string, string[]>();
-    for (const { folder } of allFoldersForGroupBase) {
-      if (!folder.parentId) continue;
-      const existing = childFolderIdsByParentId.get(folder.parentId);
-      if (existing) {
-        existing.push(folder.id);
-      } else {
-        childFolderIdsByParentId.set(folder.parentId, [folder.id]);
-      }
-    }
-
-    const keepByFolderId = new Map<string, boolean>();
-    const shouldKeepFolder = (folderId: string): boolean => {
-      const cached = keepByFolderId.get(folderId);
-      if (cached !== undefined) return cached;
-
-      const entry = folderMapById.get(folderId);
-      if (!entry) {
-        keepByFolderId.set(folderId, false);
-        return false;
-      }
-
-      const childFolderIds = childFolderIdsByParentId.get(folderId) ?? [];
-
-      // For archived buckets, hide folders with no sessions unless descendants have content.
-      if (group.isArchivedBucket && entry.nodes.length === 0) {
-        const hasContentInChildren = childFolderIds.some((childId) => shouldKeepFolder(childId));
-        keepByFolderId.set(folderId, hasContentInChildren);
-        return hasContentInChildren;
-      }
-
-      if (!hasSessionSearchQuery) {
-        keepByFolderId.set(folderId, true);
-        return true;
-      }
-
-      const folderMatches = entry.folder.name.toLowerCase().includes(normalizedSessionSearchQuery);
-      if (folderMatches || entry.nodes.length > 0) {
-        keepByFolderId.set(folderId, true);
-        return true;
-      }
-
-      const hasMatchingChildren = childFolderIds.some((childId) => shouldKeepFolder(childId));
-      keepByFolderId.set(folderId, hasMatchingChildren);
-      return hasMatchingChildren;
-    };
-
-    return allFoldersForGroupBase.filter(({ folder }) => shouldKeepFolder(folder.id));
+    const visibleFolderIds = selectFolderIdsForProjection(
+      allFoldersForGroupBase.map(({ folder, nodes }) => ({
+        id: folder.id,
+        name: folder.name,
+        parentId: folder.parentId,
+        nodeCount: nodes.length,
+      })),
+      {
+        archivedBucket: group.isArchivedBucket === true,
+        searchQuery: hasSessionSearchQuery ? normalizedSessionSearchQuery : '',
+      },
+    );
+    return allFoldersForGroupBase.filter(({ folder }) => visibleFolderIds.has(folder.id));
   }, [allFoldersForGroupBase, group.isArchivedBucket, hasSessionSearchQuery, normalizedSessionSearchQuery]);
 
+  const effectiveEditingId = editingId;
+  const effectiveOpenMenuKey = openSidebarMenuKey;
+  const effectiveExpandedParents = expandedParents;
+
   const sessionIdsInFolders = React.useMemo(() => new Set(allFoldersForGroup.flatMap((f) => f.folder.sessionIds)), [allFoldersForGroup]);
   const ungroupedSessions = React.useMemo(() => sourceGroupNodes.filter((node) => !sessionIdsInFolders.has(node.session.id)), [sourceGroupNodes, sessionIdsInFolders]);
-  const rootFolders = React.useMemo(() => allFoldersForGroup.filter(({ folder }) => !folder.parentId), [allFoldersForGroup]);
+  const rootFolders = React.useMemo(() => {
+    const entryById = new Map(allFoldersForGroup.map((entry) => [entry.folder.id, entry]));
+    return normalizeFolderRoots(allFoldersForGroup.map((entry) => entry.folder))
+      .map((folder) => entryById.get(folder.id))
+      .filter((entry): entry is (typeof allFoldersForGroup)[number] => Boolean(entry));
+  }, [allFoldersForGroup]);
   const childFoldersByParentId = React.useMemo(() => {
     const map = new Map<string, typeof allFoldersForGroup>();
     allFoldersForGroup.forEach((entry) => {
@@ -510,30 +466,25 @@ function SessionGroupSectionBase(props: Props): React.ReactNode {
     });
     return map;
   }, [allFoldersForGroup]);
-  const folderActivityStateById = React.useMemo(() => {
+  const activityNodesByFolderId = React.useMemo(() => {
     const foldersById = new Map(allFoldersForGroup.map((entry) => [entry.folder.id, entry] as const));
-    const result = new Map<string, CollapsedActivityState>();
-    const visit = (folderId: string, seen: Set<string>): CollapsedActivityState => {
+    const result = new Map<string, SessionNode[]>();
+    const visit = (folderId: string, seen: Set<string>): SessionNode[] => {
       const cached = result.get(folderId);
       if (cached !== undefined) return cached;
-      if (seen.has(folderId)) return null;
+      if (seen.has(folderId)) return [];
       seen.add(folderId);
-
       const entry = foldersById.get(folderId);
-      let state = entry
-        ? getSessionNodesActivityState(entry.nodes, activeActivitySessionIds, unreadActivitySessionIds, notifyOnSubtasks)
-        : null;
+      const nodes = entry ? [...entry.nodes] : [];
       for (const child of childFoldersByParentId.get(folderId) ?? []) {
-        state = mergeCollapsedActivityStates(state, visit(child.folder.id, seen));
-        if (state === 'active') break;
+        nodes.push(...visit(child.folder.id, seen));
       }
-      result.set(folderId, state);
-      return state;
+      result.set(folderId, nodes);
+      return nodes;
     };
-
     allFoldersForGroup.forEach(({ folder }) => visit(folder.id, new Set()));
     return result;
-  }, [activeActivitySessionIds, allFoldersForGroup, childFoldersByParentId, notifyOnSubtasks, unreadActivitySessionIds]);
+  }, [allFoldersForGroup, childFoldersByParentId]);
 
   // Precompute the per-row "subtree contains editing session" lookup once per
   // render. The previous design walked the
@@ -543,23 +494,23 @@ function SessionGroupSectionBase(props: Props): React.ReactNode {
   const renderContextForGroup = 'project' as const;
   const subtreeContainsEditing = React.useMemo(() => {
     const set = new Set<string>();
-    collectSubtreeContainingId(sourceGroupNodes, editingId, set);
+    collectSubtreeContainingId(sourceGroupNodes, effectiveEditingId, set);
     allFoldersForGroup.forEach(({ nodes }) => {
-      collectSubtreeContainingId(nodes, editingId, set);
+      collectSubtreeContainingId(nodes, effectiveEditingId, set);
     });
     return set;
-  }, [sourceGroupNodes, allFoldersForGroup, editingId]);
+  }, [sourceGroupNodes, allFoldersForGroup, effectiveEditingId]);
 
   const menuOpenSessionId = React.useMemo(() => {
-    if (!openSidebarMenuKey) return null;
-    const fromSource = resolveMenuOpenSessionId(sourceGroupNodes, openSidebarMenuKey, renderContextForGroup, Boolean(group.isArchivedBucket));
+    if (!effectiveOpenMenuKey) return null;
+    const fromSource = resolveMenuOpenSessionId(sourceGroupNodes, effectiveOpenMenuKey, renderContextForGroup, Boolean(group.isArchivedBucket));
     if (fromSource) return fromSource;
     for (const { nodes } of allFoldersForGroup) {
-      const id = resolveMenuOpenSessionId(nodes, openSidebarMenuKey, renderContextForGroup, Boolean(group.isArchivedBucket));
+      const id = resolveMenuOpenSessionId(nodes, effectiveOpenMenuKey, renderContextForGroup, Boolean(group.isArchivedBucket));
       if (id) return id;
     }
     return null;
-  }, [openSidebarMenuKey, sourceGroupNodes, allFoldersForGroup, group.isArchivedBucket]);
+  }, [effectiveOpenMenuKey, sourceGroupNodes, allFoldersForGroup, group.isArchivedBucket]);
 
   const buildNodeStructureKeyByNode = React.useCallback((nodes: SessionNode[]): WeakMap<SessionNode, string> => {
     const map = new WeakMap<SessionNode, string>();
@@ -623,7 +574,7 @@ function SessionGroupSectionBase(props: Props): React.ReactNode {
   const hasExpandedParent = shouldVirtualize && visibleSessions.some((node) => {
     if (node.children.length === 0) return false;
     const expansionKey = `project:${bucketTag}:${node.session.id}`;
-    return expandedParents.has(expansionKey);
+    return effectiveExpandedParents.has(expansionKey);
   });
 
   const archivedVirtualContainerRef = React.useRef<HTMLDivElement | null>(null);
@@ -652,7 +603,7 @@ function SessionGroupSectionBase(props: Props): React.ReactNode {
     if (!shouldVirtualize) return;
     const container = archivedVirtualContainerRef.current;
     if (!container) return;
-    if (typeof ResizeObserver === 'undefined') return;
+    if (!globalThis.ResizeObserver) return;
     const ro = new ResizeObserver(() => setLayoutVersion((v) => v + 1));
     ro.observe(container);
     return () => ro.disconnect();
@@ -788,28 +739,23 @@ function SessionGroupSectionBase(props: Props): React.ReactNode {
   }
 
   const showBranchSubtitle = !group.isMain && Boolean(group.branch);
+  // SAFETY: null is the intentional no-color branch for a status line.
   const statusLine = group.branch && isBranchDifferentFromLabel(group.branch, group.label)
     ? { label: group.branch, color: null as string | null }
     : null;
-  const groupActivityState = isCollapsed
-    ? getSessionNodesActivityState(sourceGroupNodes, activeActivitySessionIds, unreadActivitySessionIds, notifyOnSubtasks)
+  const groupActivityIndicator = isCollapsed
+    ? <CollapsedSessionActivityIndicator nodes={sourceGroupNodes} includeUnreadSubtasks={notifyOnSubtasks} />
     : null;
-  const groupActivityIndicator = groupActivityState ? (
-    <CollapsedActivityIndicator
-      state={groupActivityState}
-      activeLabel={t('sessions.sidebar.session.status.active')}
-      unreadLabel={t('sessions.sidebar.session.status.unread')}
-    />
-  ) : null;
 
   type FolderEntry = (typeof allFoldersForGroup)[number];
 
   const renderOneFolderItem = (entry: FolderEntry, displayName: string): React.ReactNode => {
     const { folder, scopeKey, scopeDirectory, nodes } = entry;
     const folderSessionsForDelete = folderSessionsForDeleteById.get(folder.id) ?? [];
+    const isRenamingFolder = folderRename?.folderId === folder.id && folderRename?.scopeKey === scopeKey;
 
     const isFolderCollapsed = hasSessionSearchQuery ? false : collapsedFolderIds.has(folder.id);
-    return (
+    const item = (collapsedActivityState: ReturnType<typeof useCollapsedSessionActivityState>) => (
       <DroppableFolderWrapper key={folder.id} folderId={folder.id}>
         {(droppableRef, isDropTarget) => (
           <SessionFolderItem
@@ -817,7 +763,7 @@ function SessionGroupSectionBase(props: Props): React.ReactNode {
             displayName={displayName}
             sessions={nodes}
             isCollapsed={isFolderCollapsed}
-            collapsedActivityState={isFolderCollapsed ? (folderActivityStateById.get(folder.id) ?? null) : null}
+            collapsedActivityState={collapsedActivityState}
             onToggle={() => toggleFolderCollapse(folder.id)}
             onRename={(name) => {
               renameFolder(scopeKey, folder.id, name);
@@ -846,40 +792,26 @@ function SessionGroupSectionBase(props: Props): React.ReactNode {
                 sessionCount,
               });
             }}
-            renderSessionNode={renderSessionNode}
-            getRenderExtras={resolveNodeStructureKey
-              ? (node) => ({
-                subtreeContainsEditing,
-                menuOpenSessionId,
-                nodeStructureKey: resolveNodeStructureKey(node),
-                childRenderExtrasFor,
-              })
-              : undefined}
             groupDirectory={scopeDirectory ?? group.directory}
             projectId={projectId}
             mobileVariant={mobileVariant}
             alwaysShowActions={alwaysShowActions}
-            isRenaming={renamingFolderId === folder.id}
-            renameDraft={renamingFolderId === folder.id ? renameFolderDraft : undefined}
-            onRenameDraftChange={(value) => setRenameFolderDraft(value)}
+            isRenaming={isRenamingFolder}
+            renameDraft={isRenamingFolder ? folderRename?.draft : undefined}
+            onRenameDraftChange={setFolderRenameDraft}
             onRenameSave={() => {
-              const trimmed = renameFolderDraft.trim();
+              const trimmed = folderRename?.draft.trim() ?? '';
               if (trimmed) {
                 renameFolder(scopeKey, folder.id, trimmed);
               }
-              setRenamingFolderId(null);
-              setRenameFolderDraft('');
-            }}
-            onRenameCancel={() => {
-              setRenamingFolderId(null);
-              setRenameFolderDraft('');
+              clearFolderRename();
             }}
+            onRenameCancel={clearFolderRename}
             droppableRef={droppableRef}
             isDropTarget={isDropTarget}
             depth={0}
             onNewSession={() => {
               if (projectId && projectId !== activeProjectId) setActiveProjectIdOnly(projectId);
-              setActiveMainTab('chat');
               if (mobileVariant) setSessionSwitcherOpen(false);
                openNewSessionDraft({
                  selectedProjectId: projectId,
@@ -890,10 +822,50 @@ function SessionGroupSectionBase(props: Props): React.ReactNode {
             }}
             hideActions={false}
             archivedBucket={group.isArchivedBucket === true}
-          />
+          >
+            {nodes.map((node) => <SessionTreeItem
+              key={node.session.id}
+              node={node}
+              pinnedSessionIds={pinnedSessionIds}
+              expandedParents={expandedParents}
+              hasSessionSearchQuery={hasSessionSearchQuery}
+              normalizedSessionSearchQuery={normalizedSessionSearchQuery}
+              notifyOnSubtasks={notifyOnSubtasks}
+              editingId={editingId}
+               editTitle={editTitle}
+               copiedSessionId={copiedSessionId}
+              openSidebarMenuKey={openSidebarMenuKey}
+              mobileVariant={mobileVariant}
+              alwaysShowActions={alwaysShowActions}
+              groupDirectory={scopeDirectory ?? group.directory}
+              projectId={projectId}
+              archivedBucket={group.isArchivedBucket === true}
+              renderExtras={{ subtreeContainsEditing, menuOpenSessionId, nodeStructureKey: resolveNodeStructureKey(node), childRenderExtrasFor }}
+              setEditingId={props.setEditingId}
+              setEditTitle={props.setEditTitle}
+               toggleParent={props.toggleParent}
+               setOpenSidebarMenuKey={props.setOpenSidebarMenuKey}
+               allowReselect={props.allowReselect}
+               onSessionSelected={props.onSessionSelected}
+               isSessionSearchOpen={props.isSessionSearchOpen}
+               sessionSearchQuery={props.sessionSearchQuery}
+               setSessionSearchQuery={props.setSessionSearchQuery}
+               setIsSessionSearchOpen={props.setIsSessionSearchOpen}
+               deleteSessionConfirm={props.deleteSessionConfirm}
+               setDeleteSessionConfirm={props.setDeleteSessionConfirm}
+               startFolderRename={props.startFolderRename}
+               setCopiedSessionId={props.setCopiedSessionId}
+            />)}
+          </SessionFolderItem>
         )}
       </DroppableFolderWrapper>
     );
+    if (!isFolderCollapsed) return item(null);
+    return <CollapsedFolderActivity
+      key={folder.id}
+      nodes={activityNodesByFolderId.get(folder.id) ?? nodes}
+      includeUnreadSubtasks={notifyOnSubtasks}
+    >{item}</CollapsedFolderActivity>;
   };
 
   // Folders render flat: nested folders keep their data-model parent link but
@@ -909,7 +881,10 @@ function SessionGroupSectionBase(props: Props): React.ReactNode {
       else childEntriesByParentId.set(parentId, [entry]);
     }
     const out: React.ReactNode[] = [];
+    const visited = new Set<string>();
     const visit = (entry: FolderEntry, parentPath: string) => {
+      if (visited.has(entry.folder.id)) return;
+      visited.add(entry.folder.id);
       const displayName = parentPath ? `${parentPath} / ${entry.folder.name}` : entry.folder.name;
       out.push(renderOneFolderItem(entry, displayName));
       const isFolderCollapsed = !hasSessionSearchQuery && collapsedFolderIds.has(entry.folder.id);
@@ -955,6 +930,40 @@ function SessionGroupSectionBase(props: Props): React.ReactNode {
     </span>
   ) : null;
 
+  const renderSessionNode = (node: SessionNode): React.ReactNode => <SessionTreeItem
+    key={node.session.id}
+    node={node}
+    pinnedSessionIds={pinnedSessionIds}
+    expandedParents={expandedParents}
+    hasSessionSearchQuery={hasSessionSearchQuery}
+    normalizedSessionSearchQuery={normalizedSessionSearchQuery}
+    notifyOnSubtasks={notifyOnSubtasks}
+    editingId={editingId}
+     editTitle={editTitle}
+     copiedSessionId={copiedSessionId}
+    openSidebarMenuKey={openSidebarMenuKey}
+    mobileVariant={mobileVariant}
+    alwaysShowActions={alwaysShowActions}
+    groupDirectory={group.directory}
+    projectId={projectId}
+    archivedBucket={group.isArchivedBucket === true}
+    renderExtras={{ subtreeContainsEditing, menuOpenSessionId, nodeStructureKey: resolveNodeStructureKey(node), childRenderExtrasFor }}
+    setEditingId={props.setEditingId}
+    setEditTitle={props.setEditTitle}
+     toggleParent={props.toggleParent}
+     setOpenSidebarMenuKey={props.setOpenSidebarMenuKey}
+     allowReselect={props.allowReselect}
+     onSessionSelected={props.onSessionSelected}
+     isSessionSearchOpen={props.isSessionSearchOpen}
+     sessionSearchQuery={props.sessionSearchQuery}
+     setSessionSearchQuery={props.setSessionSearchQuery}
+     setIsSessionSearchOpen={props.setIsSessionSearchOpen}
+     deleteSessionConfirm={props.deleteSessionConfirm}
+     setDeleteSessionConfirm={props.setDeleteSessionConfirm}
+     startFolderRename={props.startFolderRename}
+     setCopiedSessionId={props.setCopiedSessionId}
+  />;
+
   const body = (
     <SessionFolderDndScope
       scopeKey={folderScopes[0]?.scopeKey ?? folderScopeKey}
@@ -983,12 +992,7 @@ function SessionGroupSectionBase(props: Props): React.ReactNode {
             // re-renders synchronously before paint. Rendering the plain rows
             // meanwhile keeps the container's height real so the scroller
             // never collapses/clamps during the flip.
-            visibleSessions.map((node) => renderSessionNode(node, 0, group.directory, projectId, group.isArchivedBucket === true, undefined, 'project', {
-              subtreeContainsEditing,
-              menuOpenSessionId,
-              nodeStructureKey: resolveNodeStructureKey(node),
-              childRenderExtrasFor,
-            }))
+            visibleSessions.map(renderSessionNode)
           ) : (
           <div style={{ height: sessionVirtualizer.getTotalSize(), position: 'relative' }}>
             {/* Absolutely positioned rows (canonical tanstack layout): with
@@ -1021,12 +1025,7 @@ function SessionGroupSectionBase(props: Props): React.ReactNode {
                     transform: `translateY(${item.start - archivedScrollMargin}px)`,
                   }}
                 >
-                  {renderSessionNode(node, 0, group.directory, projectId, group.isArchivedBucket === true, undefined, 'project', {
-                    subtreeContainsEditing,
-                    menuOpenSessionId,
-                    nodeStructureKey: resolveNodeStructureKey(node),
-                    childRenderExtrasFor,
-                  })}
+                  {renderSessionNode(node)}
                 </div>
               );
             })}
@@ -1034,12 +1033,7 @@ function SessionGroupSectionBase(props: Props): React.ReactNode {
           )}
         </div>
       ) : (
-        visibleSessions.map((node) => renderSessionNode(node, 0, group.directory, projectId, group.isArchivedBucket === true, undefined, 'project', {
-          subtreeContainsEditing,
-          menuOpenSessionId,
-          nodeStructureKey: resolveNodeStructureKey(node),
-          childRenderExtrasFor,
-        }))
+        visibleSessions.map(renderSessionNode)
       )}
       {totalSessions === 0 && allFoldersForGroup.length === 0 ? (
         // pl-[26px] lines the text up with the worktree sub-header label
@@ -1090,15 +1084,24 @@ function SessionGroupSectionBase(props: Props): React.ReactNode {
   void compactBodyPadding;
   // Folder nesting is legacy-only: existing sub-folders keep working (path
   // labels), but the UI no longer offers creating new ones.
-  void createFolderAndStartRename;
   const groupBodyPaddingClass = 'pb-2';
+  const folderDeleteDialog = <FolderDeleteConfirmDialog
+    value={deleteFolderConfirm}
+    setValue={setDeleteFolderConfirm}
+    onConfirm={() => {
+      const value = deleteFolderConfirm;
+      if (!value) return;
+      deleteFolder(value.scopeKey, value.folderId);
+      setDeleteFolderConfirm(null);
+    }}
+  />;
 
   if (hideGroupLabel) {
-    return <div className="oc-group"><div className={cn('oc-group-body', groupBodyPaddingClass)}>{body}</div></div>;
+    return <><div className="oc-group"><div className={cn('oc-group-body', groupBodyPaddingClass)}>{body}</div></div>{folderDeleteDialog}</>;
   }
 
   return (
-    <div className="oc-group">
+    <><div className="oc-group">
       <div
         className={cn('group/gh relative flex items-start justify-between gap-1 py-1 min-w-0 rounded-md', 'cursor-pointer')}
         onClick={() => onToggleCollapsedGroup(groupKey)}
@@ -1247,7 +1250,6 @@ function SessionGroupSectionBase(props: Props): React.ReactNode {
                   onClick={(event) => {
                     event.stopPropagation();
                     if (projectId && projectId !== activeProjectId) setActiveProjectIdOnly(projectId);
-                    setActiveMainTab('chat');
                     if (mobileVariant) setSessionSwitcherOpen(false);
                     openNewSessionDraft({ selectedProjectId: projectId, directoryOverride: group.directory });
                   }}
@@ -1263,7 +1265,7 @@ function SessionGroupSectionBase(props: Props): React.ReactNode {
          ) : null}
       </div>
       {!isCollapsed ? <div className={cn('oc-group-body', groupBodyPaddingClass)}>{body}</div> : null}
-    </div>
+    </div>{folderDeleteDialog}</>
   );
 }
 
diff --git a/packages/ui/src/components/session/sidebar/projects/SessionProjectScroller.test.ts b/packages/ui/src/components/session/sidebar/projects/SessionProjectScroller.test.ts
new file mode 100644
index 00000000..11fc263f
--- /dev/null
+++ b/packages/ui/src/components/session/sidebar/projects/SessionProjectScroller.test.ts
@@ -0,0 +1,91 @@
+import { describe, expect, test } from 'bun:test';
+import { buildGroupRenderDescriptors, selectRenderedProjectSections } from './sessionProjectRender';
+import type { SessionGroup } from '../types';
+import { useSessionDisplayStore } from '@/stores/useSessionDisplayStore';
+
+const makeGroup = (id: string, overrides: Partial<SessionGroup> = {}): SessionGroup => ({
+  id,
+  label: id,
+  branch: null,
+  description: null,
+  isMain: id === 'main',
+  worktree: null,
+  directory: '/workspace',
+  sessions: [],
+  ...overrides,
+});
+
+describe('buildGroupRenderDescriptors', () => {
+  test('renders the main group and archived bucket for the main workspace', () => {
+    const section = {
+      project: { id: 'project-a', normalizedPath: '/workspace' },
+      groups: [makeGroup('main'), makeGroup('archived', { isArchivedBucket: true })],
+    };
+
+    expect(buildGroupRenderDescriptors(section, { mainWorkspaceOnly: true })).toEqual([
+      {
+        group: section.groups[0],
+        groupKey: 'project-a:main',
+        projectId: 'project-a',
+        hideGroupLabel: true,
+      },
+      {
+        group: section.groups[1],
+        groupKey: 'project-a:archived',
+        projectId: 'project-a',
+        hideGroupLabel: false,
+      },
+    ]);
+  });
+
+  test('renders the primary group without a label and nested groups with labels', () => {
+    const section = {
+      project: { id: 'project-a', normalizedPath: '/workspace' },
+      groups: [makeGroup('main'), makeGroup('feature')],
+    };
+
+    expect(buildGroupRenderDescriptors(section, { mainWorkspaceOnly: false })).toEqual([
+      {
+        group: section.groups[0],
+        groupKey: 'project-a:main',
+        projectId: 'project-a',
+        hideGroupLabel: true,
+      },
+      {
+        group: section.groups[1],
+        groupKey: 'project-a:feature',
+        projectId: 'project-a',
+        hideGroupLabel: false,
+      },
+    ]);
+  });
+
+  test('keeps labels when a flat section has no main group', () => {
+    const section = {
+      project: { id: 'project-a', normalizedPath: '/workspace' },
+      groups: [makeGroup('feature', { isMain: false }), makeGroup('other', { isMain: false })],
+    };
+
+    expect(buildGroupRenderDescriptors(section, { mainWorkspaceOnly: false }).map((descriptor) => descriptor.hideGroupLabel)).toEqual([false, false]);
+  });
+});
+
+describe('single-project scroller projection', () => {
+  test('renders only the selected project from persisted display state', () => {
+    const previous = useSessionDisplayStore.getState();
+    const sections = [
+      { project: { id: 'project-a', normalizedPath: '/workspace/a' }, groups: [] },
+      { project: { id: 'project-b', normalizedPath: '/workspace/b' }, groups: [] },
+    ];
+
+    try {
+      useSessionDisplayStore.setState({ projectDisplayMode: 'single', singleProjectId: 'project-b' });
+      const state = useSessionDisplayStore.getState();
+
+      expect(selectRenderedProjectSections(sections, state.projectDisplayMode === 'single', state.singleProjectId)
+        .map((section) => section.project.id)).toEqual(['project-b']);
+    } finally {
+      useSessionDisplayStore.setState(previous, true);
+    }
+  });
+});
diff --git a/packages/ui/src/components/session/sidebar/SidebarProjectsList.tsx b/packages/ui/src/components/session/sidebar/projects/SessionProjectScroller.tsx
similarity index 50%
rename from packages/ui/src/components/session/sidebar/SidebarProjectsList.tsx
rename to packages/ui/src/components/session/sidebar/projects/SessionProjectScroller.tsx
index e9ac5d30..9bfb8cca 100644
--- a/packages/ui/src/components/session/sidebar/SidebarProjectsList.tsx
+++ b/packages/ui/src/components/session/sidebar/projects/SessionProjectScroller.tsx
@@ -10,40 +10,124 @@ import {
 } from '@dnd-kit/core';
 import { SortableContext, arrayMove, sortableKeyboardCoordinates, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
-import { formatDirectoryName, formatPathForDisplay, cn } from '@/lib/utils';
-import type { SessionGroup } from './types';
-import type { SortableDragHandleProps } from './sortableItems';
+import { formatDirectoryName, formatPathForDisplay } from '@/lib/utils';
+import type { SessionGroup } from '../types';
 import { ProjectHeaderIdentity, SortableGroupItem, SortableProjectItem } from './sortableItems';
-import { formatProjectLabel } from './utils';
+import { SessionGroupSection, type SessionGroupSectionProps } from './SessionGroupSection';
+import { buildGroupRenderDescriptors, selectRenderedProjectSections, type ProjectSection } from './sessionProjectRender';
+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';
 
-type ProjectSection = {
-  project: {
-    id: string;
-    label?: string;
-    normalizedPath: string;
-    icon?: string;
-    color?: string;
-    iconImage?: { mime: string; updatedAt: number; source: 'custom' | 'auto' };
-    iconBackground?: string;
-  };
-  groups: SessionGroup[];
+type SessionProjectScrollerState = Pick<SessionGroupSectionProps,
+  | 'editingId'
+  | 'openSidebarMenuKey'
+  | 'setOpenSidebarMenuKey'
+> & {
+  visibleSessionCountByGroup: Map<string, number>;
+};
+
+type SessionProjectScrollerGroupProps = Pick<SessionGroupSectionProps,
+  | 'hasSessionSearchQuery'
+  | 'normalizedSessionSearchQuery'
+  | 'groupSearchDataByGroup'
+  | 'collapsedGroups'
+  | 'hideDirectoryControls'
+  | 'mobileVariant'
+  | 'alwaysShowActions'
+  | 'activeProjectId'
+  | 'notifyOnSubtasks'
+  | 'expandedParents'
+  | 'editTitle'
+  | 'copiedSessionId'
+  | 'folderRename'
+  | 'setFolderRenameDraft'
+  | 'clearFolderRename'
+  | 'setEditingId'
+  | 'setEditTitle'
+  | 'toggleParent'
+  | 'allowReselect'
+  | 'onSessionSelected'
+  | 'isSessionSearchOpen'
+  | 'sessionSearchQuery'
+  | 'setSessionSearchQuery'
+  | 'setIsSessionSearchOpen'
+  | 'deleteSessionConfirm'
+  | 'setDeleteSessionConfirm'
+  | 'startFolderRename'
+  | 'setCopiedSessionId'
+> & {
+  pinnedSessionIds: Set<string>;
+  sessionOrderIndex: Map<string, number>;
+};
+
+type SessionProjectScrollerGroupActions = Pick<SessionGroupSectionProps,
+  | 'showMoreGroupSessions'
+  | 'resetGroupSessionLimit'
+  | 'setActiveProjectIdOnly'
+  | 'setSessionSwitcherOpen'
+  | 'openNewSessionDraft'
+  | 'onToggleCollapsedGroup'
+>;
+
+type SessionProjectScrollerModel = {
+  topContent?: React.ReactNode;
+  hasSharedSessions?: boolean;
+  sectionsForRender: ProjectSection[];
+  projectSections: ProjectSection[];
+  activeProjectId: string | null;
+  singleProjectMode: boolean;
+  singleProjectId: string | null;
+  emptyState: React.ReactNode;
+  searchEmptyState: React.ReactNode;
+  projectRepoStatus: Map<string, boolean | null>;
+  stuckProjectHeaders: Set<string>;
+  projectHeaderSentinelRefs: React.MutableRefObject<Map<string, HTMLDivElement | null>>;
+  state: SessionProjectScrollerState;
+  groupProps: SessionProjectScrollerGroupProps;
+};
+
+type SessionProjectScrollerView = {
+  homeDirectory: string | null;
+  collapsedProjects: Set<string>;
+  showOnlyMainWorkspace: boolean;
+  hasSessionSearchQuery: boolean;
+  normalizedSessionSearchQuery: string;
+  hideDirectoryControls: boolean;
+  isDesktopShellRuntime: boolean;
+  stickyZoneHeaders: boolean;
+  mobileVariant: boolean;
+  alwaysShowActions: boolean;
+  projectSortOrder: ProjectSortOrder;
+};
+
+type SessionProjectScrollerActions = {
+  group: SessionProjectScrollerGroupActions;
+  toggleProject: (id: string) => void;
+  setActiveProjectIdOnly: (id: string) => void;
+  setSessionSwitcherOpen: (open: boolean) => void;
+  openNewSessionDraft: (options?: { selectedProjectId?: string | null; directoryOverride?: string | null }) => void;
+  openNewWorktreeDialog: () => void;
+  openWorktreesPage: (id: string) => void;
+  openProjectEditDialog: (id: string) => void;
+  removeProject: (id: string) => void;
+  reorderProjects: (fromIndex: number, toIndex: number) => void;
+  setGroupOrderByProject: React.Dispatch<React.SetStateAction<Map<string, string[]>>>;
+  renderProjectStatusIndicator?: (projectId: string, groups: SessionGroup[]) => React.ReactNode;
+  setSingleProjectId: (id: string) => void;
+};
+
+type Props = {
+  model: SessionProjectScrollerModel;
+  view: SessionProjectScrollerView;
+  actions: SessionProjectScrollerActions;
 };
 
 const TOP_FADE_MAX_SIZE = 48;
 const TOP_FADE_MIN_SIZE = 32;
 const TOP_FADE_CLEAR_MAX_SIZE = 24;
-type ActivitySectionKey = 'chats' | 'active-now';
-
-const readActivitySectionKey = (element: Element): ActivitySectionKey | null => {
-  const key = element.getAttribute('data-sidebar-activity-sentinel');
-  if (key === 'chats' || key === 'active-now') return key;
-  return null;
-};
 
 const getProjectLabel = (project: ProjectSection['project'], homeDirectory: string | null): string => (
   formatProjectLabel(
@@ -53,63 +137,12 @@ const getProjectLabel = (project: ProjectSection['project'], homeDirectory: stri
   )
 );
 
-type Props = {
-  topContent?: React.ReactNode;
-  sharedSessionsOnly?: boolean;
-  hasSharedSessions?: boolean;
-  sectionsForRender: ProjectSection[];
-  projectSections: ProjectSection[];
-  projectPickerSections: ProjectSection[];
-  activeProjectId: string | null;
-  singleProjectMode: boolean;
-  singleProjectId: string | null;
-  setSingleProjectId: (id: string) => void;
-  showOnlyMainWorkspace: boolean;
-  hasSessionSearchQuery: boolean;
-  emptyState: React.ReactNode;
-  searchEmptyState: React.ReactNode;
-  renderGroupSessions: (
-    group: SessionGroup,
-    groupKey: string,
-    projectId?: string | null,
-    hideGroupLabel?: boolean,
-    dragHandleProps?: SortableDragHandleProps | null,
-    compactBodyPadding?: boolean,
-    scrollContainerRef?: React.RefObject<HTMLElement | null>,
-  ) => React.ReactNode;
-  getOrderedGroups: (projectId: string, groups: SessionGroup[]) => SessionGroup[];
-  setGroupOrderByProject: React.Dispatch<React.SetStateAction<Map<string, string[]>>>;
-  renderProjectStatusIndicator?: (projectId: string, groups: SessionGroup[]) => React.ReactNode;
-  homeDirectory: string | null;
-  collapsedProjects: Set<string>;
-  hideDirectoryControls: boolean;
-  projectRepoStatus: Map<string, boolean | null>;
-  isDesktopShellRuntime: boolean;
-  stickyZoneHeaders: boolean;
-  stuckProjectHeaders: Set<string>;
-  mobileVariant: boolean;
-  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;
-  openWorktreesPage: (id: string) => void;
-  openProjectEditDialog: (id: string) => void;
-  removeProject: (id: string) => void;
-  projectHeaderSentinelRefs: React.MutableRefObject<Map<string, HTMLDivElement | null>>;
-  reorderProjects: (fromIndex: number, toIndex: number) => void;
-  projectSortOrder: ProjectSortOrder;
-  openSidebarMenuKey: string | null;
-  setOpenSidebarMenuKey: (key: string | null) => void;
-  isInlineEditing: boolean;
-};
-
-function SidebarProjectsListComponent(props: Props): React.ReactNode {
+function SessionProjectScrollerComponent(props: Props): React.ReactNode {
   streamPerfCount('ui.sidebar_projects_list.render');
   const { t } = useI18n();
-  const enableStickyFade = props.isDesktopShellRuntime && props.stickyZoneHeaders && !props.singleProjectMode;
+  const { model, view, actions } = props;
+  const isInlineEditing = model.state.editingId !== null;
+  const enableStickyFade = view.isDesktopShellRuntime && view.stickyZoneHeaders && !model.singleProjectMode;
   const projectSensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 8 } }),
     useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
@@ -117,55 +150,15 @@ function SidebarProjectsListComponent(props: Props): React.ReactNode {
   const groupSensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 8 } }),
   );
-  const selectedSingleProjectSection = props.singleProjectMode
-    ? props.sectionsForRender.find((section) => section.project.id === props.singleProjectId)
-    : null;
-  const renderedProjectSections = props.singleProjectMode
-    ? (selectedSingleProjectSection ? [selectedSingleProjectSection] : [])
-    : props.sectionsForRender;
-  const projectPickerOptions = React.useMemo(() => props.projectPickerSections.map((section) => ({
-    id: section.project.id,
-    projectLabel: getProjectLabel(section.project, props.homeDirectory),
-    projectDescription: formatPathForDisplay(section.project.normalizedPath, props.homeDirectory),
-    projectIcon: section.project.icon,
-    projectColor: section.project.color,
-    projectIconImage: section.project.iconImage,
-    projectIconBackground: section.project.iconBackground,
-  })), [props.homeDirectory, props.projectPickerSections]);
-
-  // Memoize getOrderedGroups per project so downstream consumers see a stable
-  // array reference while inputs are unchanged (avoids O(P) fresh arrays per
-  // list render invalidating the memoized group subtrees).
-  const orderedGroupsCacheRef = React.useRef<Map<string, { groups: SessionGroup[]; ordered: SessionGroup[] }>>(new Map());
-  const orderedGroupsCacheGetOrderedGroupsRef = React.useRef<typeof props.getOrderedGroups>(props.getOrderedGroups);
-  if (orderedGroupsCacheGetOrderedGroupsRef.current !== props.getOrderedGroups) {
-    orderedGroupsCacheGetOrderedGroupsRef.current = props.getOrderedGroups;
-    orderedGroupsCacheRef.current.clear();
-  }
-  const cachedGetOrderedGroups = (projectId: string, groups: SessionGroup[]): SessionGroup[] => {
-    const cache = orderedGroupsCacheRef.current;
-    const hit = cache.get(projectId);
-    if (hit && hit.groups === groups) {
-      return hit.ordered;
-    }
-    const ordered = props.getOrderedGroups(projectId, groups);
-    cache.set(projectId, { groups, ordered });
-    if (cache.size > 256) {
-      const firstKey = cache.keys().next().value;
-      if (firstKey !== undefined) cache.delete(firstKey);
-    }
-    return ordered;
-  };
 
   // Threaded into SessionGroupSection so the archived-bucket virtualizer
   // can resolve the scrolling ancestor synchronously (no getComputedStyle
   // walk) and skip the cost of a style recalc on every render.
   const scrollContainerRef = React.useRef<HTMLElement | null>(null);
-  const [leadingActivitySection, setLeadingActivitySection] = React.useState<ActivitySectionKey>('chats');
   // Keep per-scroll measurements out of React state so the interaction guard
   // can read the current fade boundary without rerendering the sidebar.
   const topFadeSizeRef = React.useRef(0);
-  // Update the compositor-owned mask on every scroll, but cross the React
+  // Update the viewport-owned fade on every scroll, but cross the React
   // render boundary only when the sticky identity overlay appears or hides.
   const syncTopFade = React.useCallback((scroller: HTMLElement) => {
     const hasTopScroll = scroller.scrollTop > 1;
@@ -173,8 +166,9 @@ function SidebarProjectsListComponent(props: Props): React.ReactNode {
       ? Math.min(TOP_FADE_MIN_SIZE + scroller.scrollTop, TOP_FADE_MAX_SIZE)
       : 0;
     topFadeSizeRef.current = topFadeSize;
-    scroller.style.setProperty('--scroll-shadow-top-size', `${topFadeSize}px`);
-    scroller.style.setProperty(
+    const fadeRoot = scroller.closest<HTMLElement>('.oc-sticky-fade-root');
+    fadeRoot?.style.setProperty('--scroll-shadow-top-size', `${topFadeSize}px`);
+    fadeRoot?.style.setProperty(
       '--scroll-shadow-top-clear-size',
       `${Math.min(Math.max(topFadeSize - 8, 0), TOP_FADE_CLEAR_MAX_SIZE)}px`,
     );
@@ -182,81 +176,55 @@ function SidebarProjectsListComponent(props: Props): React.ReactNode {
   const blockObscuredInteraction = React.useCallback((
     event: React.MouseEvent<HTMLDivElement> | React.PointerEvent<HTMLDivElement>,
   ) => {
+    // SAFETY: React's mouse and pointer events are dispatched from Elements.
     if ((event.target as Element).closest('[data-overlay-scrollbar-thumb], [data-sidebar-sticky-header]')) return;
     const eventY = event.clientY - event.currentTarget.getBoundingClientRect().top;
     if (eventY >= topFadeSizeRef.current) return;
     event.preventDefault();
     event.stopPropagation();
   }, []);
-  const hasProjectScroller = props.projectSections.length > 0 && renderedProjectSections.length > 0;
+  const renderedSections = selectRenderedProjectSections(
+    model.sectionsForRender,
+    model.singleProjectMode,
+    model.singleProjectId,
+  );
+  const hasProjectScroller = model.projectSections.length > 0 && renderedSections.length > 0;
   React.useLayoutEffect(() => {
     if (enableStickyFade && hasProjectScroller && scrollContainerRef.current) {
       syncTopFade(scrollContainerRef.current);
     }
   }, [enableStickyFade, hasProjectScroller, syncTopFade]);
-  React.useEffect(() => {
-    const root = scrollContainerRef.current;
-    if (!enableStickyFade || !root || !props.hasSharedSessions) return;
-
-    const sentinels = Array.from(root.querySelectorAll<HTMLElement>('[data-sidebar-activity-sentinel]'));
-    if (sentinels.length === 0) return;
-    const stuckSections = new Set<ActivitySectionKey>();
-    const syncLeadingSection = (): void => {
-      let nextSection = sentinels[0] ? readActivitySectionKey(sentinels[0]) : null;
-      for (const sentinel of sentinels) {
-        const key = readActivitySectionKey(sentinel);
-        if (key && stuckSections.has(key)) nextSection = key;
-      }
-      if (nextSection) setLeadingActivitySection((current) => current === nextSection ? current : nextSection);
-    };
-    const observer = new IntersectionObserver((entries) => {
-      const rootTop = root.getBoundingClientRect().top;
-      for (const entry of entries) {
-        const key = readActivitySectionKey(entry.target);
-        if (!key) continue;
-        if (!entry.isIntersecting && entry.boundingClientRect.top < (entry.rootBounds?.top ?? rootTop)) {
-          stuckSections.add(key);
-        } else {
-          stuckSections.delete(key);
-        }
-      }
-      syncLeadingSection();
-    }, { root, threshold: 0 });
-    sentinels.forEach((sentinel) => observer.observe(sentinel));
-    syncLeadingSection();
-    return () => observer.disconnect();
-  }, [enableStickyFade, props.hasSharedSessions, props.topContent]);
   let stuckProject: ProjectSection['project'] | null = null;
-  for (const section of props.projectSections) {
-    if (props.stuckProjectHeaders.has(section.project.id)) {
+  for (const section of model.projectSections) {
+    if (model.stuckProjectHeaders.has(section.project.id)) {
       stuckProject = section.project;
     }
   }
   // The IntersectionObserver reports the stuck header asynchronously, a frame or
-  // two after the (synchronous) mask has already hidden the real header — which
+  // two after the synchronous fade has already hidden the real header — which
   // otherwise leaves a one-frame gap where the title blinks out with no crisp
   // replacement. Seed the overlay with the topmost rendered project so it is
   // ready in the same frame; the observer then corrects it. When shared sessions
   // lead the list, the Recent fallback below owns the top instead of a project.
   const leadingProject =
-    stuckProject ?? (props.hasSharedSessions ? null : renderedProjectSections[0]?.project ?? null);
-  const leadingProjectLabel = leadingProject ? getProjectLabel(leadingProject, props.homeDirectory) : null;
+    stuckProject ?? (model.hasSharedSessions ? null : renderedSections[0]?.project ?? null);
+  const leadingProjectLabel = leadingProject ? getProjectLabel(leadingProject, view.homeDirectory) : null;
+  const projectPickerOptions = React.useMemo(() => model.projectSections.map((section) => ({
+    id: section.project.id,
+    projectLabel: getProjectLabel(section.project, view.homeDirectory),
+    projectDescription: formatPathForDisplay(section.project.normalizedPath, view.homeDirectory),
+    projectIcon: section.project.icon,
+    projectColor: section.project.color,
+    projectIconImage: section.project.iconImage,
+    projectIconBackground: section.project.iconBackground,
+  })), [model.projectSections, view.homeDirectory]);
 
-  if (props.sharedSessionsOnly) {
-    return (
-      <ScrollableOverlay useScrollShadow scrollShadowSize={96} outerClassName="flex-1 min-h-0" className={cn('space-y-1 pb-1 pr-2', props.mobileVariant ? '' : '')}>
-        {props.topContent}
-        {!props.hasSharedSessions ? (props.hasSessionSearchQuery ? props.searchEmptyState : props.emptyState) : null}
-      </ScrollableOverlay>
-    );
+  if (model.projectSections.length === 0) {
+    return <ScrollableOverlay useScrollShadow scrollShadowSize={96} outerClassName="flex-1 min-h-0" className="space-y-1 pb-1 pl-2.5 pr-2">{model.topContent}{model.emptyState}</ScrollableOverlay>;
   }
 
-  if (props.projectSections.length === 0) {
-    return <ScrollableOverlay useScrollShadow scrollShadowSize={96} outerClassName="flex-1 min-h-0" className={cn('space-y-1 pb-1 pl-2.5 pr-2', props.mobileVariant ? '' : '')}>{props.topContent}{props.emptyState}</ScrollableOverlay>;
-  }
-
-  if (props.sectionsForRender.length === 0) {
-    return <ScrollableOverlay useScrollShadow scrollShadowSize={96} outerClassName="flex-1 min-h-0" className={cn('space-y-1 pb-1 pl-2.5 pr-2', props.mobileVariant ? '' : '')}>{props.searchEmptyState}</ScrollableOverlay>;
+  if (model.sectionsForRender.length === 0) {
+    return <ScrollableOverlay useScrollShadow scrollShadowSize={96} outerClassName="flex-1 min-h-0" className="space-y-1 pb-1 pl-2.5 pr-2">{model.searchEmptyState}</ScrollableOverlay>;
   }
 
   return (
@@ -267,48 +235,37 @@ function SidebarProjectsListComponent(props: Props): React.ReactNode {
     // rows appear below naturally.
     <div
       className="oc-sticky-fade-root relative flex min-h-0 flex-1"
+      // SAFETY: this custom property configures the viewport-owned edge fade.
+      style={enableStickyFade ? { '--scroll-shadow-top-size': '0px' } as React.CSSProperties : undefined}
       onPointerDownCapture={enableStickyFade ? blockObscuredInteraction : undefined}
       onClickCapture={enableStickyFade ? blockObscuredInteraction : undefined}
       onContextMenuCapture={enableStickyFade ? blockObscuredInteraction : undefined}
     >
-    <ScrollableOverlay
-      ref={scrollContainerRef}
-      useScrollShadow
-      hideTopScrollShadow={!enableStickyFade}
-      scrollShadowSize={96}
-      outerClassName="flex-1 min-h-0"
-      className={cn('oc-sidebar-scroller oc-sticky-fade-scroller space-y-1.5 pb-1 pl-2.5 pr-2 [overflow-anchor:none]', props.mobileVariant ? '' : '')}
-      style={enableStickyFade ? { '--scroll-shadow-top-size': '0px' } as React.CSSProperties : undefined}
-      onScroll={enableStickyFade ? (event) => syncTopFade(event.currentTarget) : undefined}
-    >
-      {props.topContent}
-      {props.showOnlyMainWorkspace ? (
+      <ScrollableOverlay
+        ref={scrollContainerRef}
+        useScrollShadow
+        hideTopScrollShadow={!enableStickyFade}
+        scrollShadowSize={96}
+        outerClassName="flex-1 min-h-0"
+        className="oc-sidebar-scroller space-y-1.5 pb-1 pl-2.5 pr-2 [overflow-anchor:none]"
+        onScroll={enableStickyFade ? (event) => syncTopFade(event.currentTarget) : undefined}
+      >
+      {model.topContent}
+      {view.showOnlyMainWorkspace ? (
         <div className="space-y-[0.6rem] py-1">
           {(() => {
-            const activeSection = props.sectionsForRender.find((section) => section.project.id === props.activeProjectId) ?? props.sectionsForRender[0];
+            const activeSection = renderedSections.find((section) => section.project.id === model.activeProjectId) ?? renderedSections[0];
             if (!activeSection) {
-              return props.hasSessionSearchQuery ? props.searchEmptyState : props.emptyState;
+              return view.hasSessionSearchQuery ? model.searchEmptyState : model.emptyState;
             }
-            const primaryGroup =
-              activeSection.groups.find((candidate) => candidate.isMain && candidate.sessions.length > 0)
-              ?? activeSection.groups.find((candidate) => candidate.sessions.length > 0)
-              ?? activeSection.groups.find((candidate) => candidate.isMain)
-              ?? activeSection.groups[0];
-            if (!primaryGroup) {
+            const descriptors = buildGroupRenderDescriptors(activeSection, { mainWorkspaceOnly: true });
+            if (!descriptors.length) {
               return <div className="py-1 text-left typography-micro text-muted-foreground">{t('sessions.sidebar.empty.noSessions.title')}</div>;
             }
-            const archivedGroup = activeSection.groups.find((candidate) => candidate.isArchivedBucket);
-            const groupsToRender = [
-              primaryGroup,
-              ...(archivedGroup && archivedGroup.id !== primaryGroup.id ? [archivedGroup] : []),
-            ];
-
-            return groupsToRender.map((group) => {
-              const groupKey = `${activeSection.project.id}:${group.id}`;
-              const hideGroupLabel = group.id === primaryGroup.id;
+            return descriptors.map(({ group, groupKey, projectId, hideGroupLabel }) => {
               return (
                 <React.Fragment key={groupKey}>
-                  {props.renderGroupSessions(group, groupKey, activeSection.project.id, hideGroupLabel, null, true, scrollContainerRef)}
+                  <SessionGroupSection {...model.groupProps} {...actions.group} editingId={model.state.editingId} openSidebarMenuKey={model.state.openSidebarMenuKey} setOpenSidebarMenuKey={model.state.setOpenSidebarMenuKey} group={group} groupKey={groupKey} projectId={projectId} hideGroupLabel={hideGroupLabel} visibleSessionCount={model.state.visibleSessionCountByGroup.get(groupKey)} compactBodyPadding scrollContainerRef={scrollContainerRef} />
                 </React.Fragment>
               );
             });
@@ -319,31 +276,31 @@ function SidebarProjectsListComponent(props: Props): React.ReactNode {
           sensors={projectSensors}
           collisionDetection={closestCenter}
           onDragEnd={(event) => {
-            if (props.isInlineEditing) return;
+             if (isInlineEditing) return;
             // Drag only allowed in manual sort mode - indices from visual order don't match store order in other modes
-            if (props.projectSortOrder !== 'manual') return;
+            if (view.projectSortOrder !== 'manual') return;
             const { active, over } = event;
             if (!over || active.id === over.id) return;
-            const oldIndex = props.sectionsForRender.findIndex((section) => section.project.id === active.id);
-            const newIndex = props.sectionsForRender.findIndex((section) => section.project.id === over.id);
+            const oldIndex = model.sectionsForRender.findIndex((section) => section.project.id === active.id);
+            const newIndex = model.sectionsForRender.findIndex((section) => section.project.id === over.id);
             if (oldIndex === -1 || newIndex === -1 || oldIndex === newIndex) return;
-            props.reorderProjects(oldIndex, newIndex);
+            actions.reorderProjects(oldIndex, newIndex);
           }}
         >
-          <SortableContext items={renderedProjectSections.map((section) => section.project.id)} strategy={verticalListSortingStrategy}>
-            {renderedProjectSections.map((section) => {
+            <SortableContext items={renderedSections.map((section) => section.project.id)} strategy={verticalListSortingStrategy}>
+            {renderedSections.map((section) => {
               const project = section.project;
               const projectKey = project.id;
-              const projectLabel = getProjectLabel(project, props.homeDirectory);
-              const projectDescription = formatPathForDisplay(project.normalizedPath, props.homeDirectory);
-              const isCollapsed = props.singleProjectMode ? false : props.collapsedProjects.has(projectKey);
-              const isRepo = props.projectRepoStatus.get(projectKey);
+              const projectLabel = getProjectLabel(project, view.homeDirectory);
+              const projectDescription = formatPathForDisplay(project.normalizedPath, view.homeDirectory);
+              const isCollapsed = model.singleProjectMode ? false : view.collapsedProjects.has(projectKey);
+              const isRepo = model.projectRepoStatus.get(projectKey);
 
               return (
                 <SortableProjectItem
                   key={projectKey}
                   id={projectKey}
-                  disabled={props.singleProjectMode || props.projectSortOrder !== 'manual'}
+                  disabled={model.singleProjectMode || view.projectSortOrder !== 'manual'}
                   projectLabel={projectLabel}
                   projectDescription={projectDescription}
                   projectIcon={project.icon}
@@ -352,42 +309,38 @@ function SidebarProjectsListComponent(props: Props): React.ReactNode {
                   projectIconBackground={project.iconBackground}
                   isCollapsed={isCollapsed}
                   isRepo={Boolean(isRepo)}
-                  isDesktopShell={props.isDesktopShellRuntime}
-                  hideDirectoryControls={props.hideDirectoryControls}
-                  mobileVariant={props.mobileVariant}
-                  alwaysShowActions={props.alwaysShowActions}
-                  statusIndicator={isCollapsed ? props.renderProjectStatusIndicator?.(projectKey, section.groups) : null}
-                  onToggle={() => {
-                    if (!props.singleProjectMode) props.toggleProject(projectKey);
-                  }}
+                  isDesktopShell={view.isDesktopShellRuntime}
+                  hideDirectoryControls={view.hideDirectoryControls}
+                  mobileVariant={view.mobileVariant}
+                  alwaysShowActions={view.alwaysShowActions}
+                   statusIndicator={isCollapsed ? actions.renderProjectStatusIndicator?.(projectKey, section.groups) : null}
+                    openSidebarMenuKey={model.state.openSidebarMenuKey}
+                  setOpenSidebarMenuKey={model.state.setOpenSidebarMenuKey}
+                  projectPickerOptions={model.singleProjectMode ? projectPickerOptions : undefined}
+                  onProjectSelect={model.singleProjectMode ? actions.setSingleProjectId : undefined}
+                  onToggle={() => { if (!model.singleProjectMode) actions.toggleProject(projectKey); }}
                   onNewSession={() => {
-                    if (projectKey !== props.activeProjectId) props.setActiveProjectIdOnly(projectKey);
-                    props.setActiveMainTab('chat');
-                    if (props.mobileVariant) props.setSessionSwitcherOpen(false);
-                    props.openNewSessionDraft({
+                    if (projectKey !== model.activeProjectId) actions.setActiveProjectIdOnly(projectKey);
+                    if (view.mobileVariant) actions.setSessionSwitcherOpen(false);
+                    actions.openNewSessionDraft({
                       selectedProjectId: projectKey,
                       directoryOverride: project.normalizedPath,
                     });
                   }}
                   onNewWorktreeSession={() => {
-                    if (projectKey !== props.activeProjectId) props.setActiveProjectIdOnly(projectKey);
-                    props.setActiveMainTab('chat');
-                    props.openNewWorktreeDialog();
+                    if (projectKey !== model.activeProjectId) actions.setActiveProjectIdOnly(projectKey);
+                    actions.openNewWorktreeDialog();
                   }}
-                  onManageWorktrees={() => props.openWorktreesPage(projectKey)}
-                  onRenameStart={() => props.openProjectEditDialog(projectKey)}
-                  onClose={() => props.removeProject(projectKey)}
-                  sentinelRef={(el) => { props.projectHeaderSentinelRefs.current.set(projectKey, el); }}
+                  onManageWorktrees={() => actions.openWorktreesPage(projectKey)}
+                  onRenameStart={() => actions.openProjectEditDialog(projectKey)}
+                  onClose={() => actions.removeProject(projectKey)}
+                  sentinelRef={(el) => { model.projectHeaderSentinelRefs.current.set(projectKey, el); }}
                   showCreateButtons
-                  openSidebarMenuKey={props.openSidebarMenuKey}
-                  setOpenSidebarMenuKey={props.setOpenSidebarMenuKey}
-                  projectPickerOptions={props.singleProjectMode ? projectPickerOptions : undefined}
-                  onProjectSelect={props.singleProjectMode ? props.setSingleProjectId : undefined}
-                >
+                 >
                   {!isCollapsed ? (
                     <div className="space-y-0 pt-0.5 pb-0.5">
                       {(() => {
-                        const orderedGroups = cachedGetOrderedGroups(projectKey, section.groups);
+                         const orderedGroups = section.groups;
                         const rootGroup = orderedGroups.find((group) => group.isMain) ?? null;
                         const nestedGroups = rootGroup
                           ? orderedGroups.filter((group) => group.id !== rootGroup.id)
@@ -397,7 +350,7 @@ function SidebarProjectsListComponent(props: Props): React.ReactNode {
                             sensors={groupSensors}
                             collisionDetection={closestCenter}
                             onDragEnd={(event) => {
-                              if (props.isInlineEditing) return;
+                               if (isInlineEditing) return;
                               const { active, over } = event;
                               if (!over || active.id === over.id) return;
                               const oldIndex = nestedGroups.findIndex((item) => item.id === active.id);
@@ -405,7 +358,7 @@ function SidebarProjectsListComponent(props: Props): React.ReactNode {
                               if (oldIndex === -1 || newIndex === -1 || oldIndex === newIndex) return;
                               const nextNested = arrayMove(nestedGroups, oldIndex, newIndex).map((item) => item.id);
                               const next = rootGroup ? [rootGroup.id, ...nextNested] : nextNested;
-                              props.setGroupOrderByProject((prev) => {
+                                 actions.setGroupOrderByProject((prev) => {
                                 const map = new Map(prev);
                                 map.set(projectKey, next);
                                 return map;
@@ -415,13 +368,13 @@ function SidebarProjectsListComponent(props: Props): React.ReactNode {
                             {/* Root/flat sessions render directly under the
                                 project zone header; worktree and archived
                                 groups keep their own slim sortable sub-header. */}
-                            {rootGroup ? props.renderGroupSessions(rootGroup, `${projectKey}:${rootGroup.id}`, projectKey, true, null, undefined, scrollContainerRef) : null}
+                              {rootGroup ? <SessionGroupSection {...model.groupProps} {...actions.group} editingId={model.state.editingId} openSidebarMenuKey={model.state.openSidebarMenuKey} setOpenSidebarMenuKey={model.state.setOpenSidebarMenuKey} group={rootGroup} groupKey={`${projectKey}:${rootGroup.id}`} projectId={projectKey} hideGroupLabel visibleSessionCount={model.state.visibleSessionCountByGroup.get(`${projectKey}:${rootGroup.id}`)} scrollContainerRef={scrollContainerRef} /> : null}
                             <SortableContext items={nestedGroups.map((group) => group.id)} strategy={verticalListSortingStrategy}>
                               {nestedGroups.map((group) => {
                                 const groupKey = `${projectKey}:${group.id}`;
                                 return (
-                                  <SortableGroupItem key={group.id} id={group.id} disabled={props.isInlineEditing}>
-                                    {(dragHandleProps) => props.renderGroupSessions(group, groupKey, projectKey, false, dragHandleProps, undefined, scrollContainerRef)}
+                                   <SortableGroupItem key={group.id} id={group.id} disabled={isInlineEditing}>
+                                      {(dragHandleProps) => <SessionGroupSection {...model.groupProps} {...actions.group} editingId={model.state.editingId} openSidebarMenuKey={model.state.openSidebarMenuKey} setOpenSidebarMenuKey={model.state.setOpenSidebarMenuKey} group={group} groupKey={groupKey} projectId={projectKey} visibleSessionCount={model.state.visibleSessionCountByGroup.get(groupKey)} dragHandleProps={dragHandleProps} scrollContainerRef={scrollContainerRef} />}
                                   </SortableGroupItem>
                                 );
                               })}
@@ -439,15 +392,15 @@ function SidebarProjectsListComponent(props: Props): React.ReactNode {
           <DragOverlay dropAnimation={null} />
         </DndContext>
       )}
-    </ScrollableOverlay>
-      {enableStickyFade && (leadingProject || props.hasSharedSessions) ? (
+      </ScrollableOverlay>
+      {enableStickyFade && (leadingProject || model.hasSharedSessions) ? (
         <div
           className="oc-sticky-fade-overlay pointer-events-none absolute inset-x-0 top-0 z-30 flex items-center gap-1.5 py-1 pl-4 pr-5"
           aria-hidden="true"
         >
           {leadingProject && leadingProjectLabel ? (
             <ProjectHeaderIdentity
-              id={leadingProject.id}
+               id={leadingProject.id}
               projectLabel={leadingProjectLabel}
               projectIcon={leadingProject.icon}
               projectColor={leadingProject.color}
@@ -456,11 +409,9 @@ function SidebarProjectsListComponent(props: Props): React.ReactNode {
             />
           ) : (
             <>
-              <Icon name={leadingActivitySection === 'chats' ? 'chat-4' : 'history'} className="h-3.5 w-3.5 flex-shrink-0 text-muted-foreground/80" />
+              <Icon name="history" className="h-3.5 w-3.5 flex-shrink-0 text-muted-foreground/80" />
               <span className="truncate text-[14px] font-semibold lowercase text-foreground">
-                {t(leadingActivitySection === 'chats'
-                  ? 'sessions.sidebar.activity.chatsTitle'
-                  : 'sessions.sidebar.activity.recentTitle')}
+                {t('sessions.sidebar.activity.recentTitle')}
               </span>
             </>
           )}
@@ -470,4 +421,4 @@ function SidebarProjectsListComponent(props: Props): React.ReactNode {
   );
 }
 
-export const SidebarProjectsList = React.memo(SidebarProjectsListComponent);
+export const SessionProjectScroller = React.memo(SessionProjectScrollerComponent);
diff --git a/packages/ui/src/components/session/sidebar/projects/sessionProjectRender.ts b/packages/ui/src/components/session/sidebar/projects/sessionProjectRender.ts
new file mode 100644
index 00000000..8f5d0ea6
--- /dev/null
+++ b/packages/ui/src/components/session/sidebar/projects/sessionProjectRender.ts
@@ -0,0 +1,55 @@
+import type { SessionGroup } from '../types';
+
+export type ProjectSection = {
+  project: {
+    id: string;
+    label?: string;
+    normalizedPath: string;
+    icon?: string;
+    color?: string;
+    iconImage?: { mime: string; updatedAt: number; source: 'custom' | 'auto' };
+    iconBackground?: string;
+  };
+  groups: SessionGroup[];
+};
+
+export const selectRenderedProjectSections = (
+  sections: ProjectSection[],
+  singleProjectMode: boolean,
+  singleProjectId: string | null,
+): ProjectSection[] => singleProjectMode
+  ? sections.filter((section) => section.project.id === singleProjectId)
+  : sections;
+
+type GroupRenderDescriptor = {
+  group: SessionGroup;
+  groupKey: string;
+  projectId: string;
+  hideGroupLabel: boolean;
+};
+
+export const buildGroupRenderDescriptors = (
+  section: ProjectSection,
+  options: { mainWorkspaceOnly: boolean },
+): GroupRenderDescriptor[] => {
+  const primaryGroup = section.groups.find((group) => group.isMain && group.sessions.length > 0)
+    ?? section.groups.find((group) => group.sessions.length > 0)
+    ?? section.groups.find((group) => group.isMain)
+    ?? section.groups[0];
+  if (!primaryGroup) return [];
+
+  const archivedGroup = section.groups.find((group) => group.isArchivedBucket && group.id !== primaryGroup.id);
+  const groups = options.mainWorkspaceOnly
+    ? [primaryGroup, ...(archivedGroup ? [archivedGroup] : [])]
+    : [
+      ...(section.groups.find((group) => group.isMain) ? [section.groups.find((group) => group.isMain)!] : []),
+      ...section.groups.filter((group) => !group.isMain),
+    ];
+
+  return groups.map((group) => ({
+    group,
+    groupKey: `${section.project.id}:${group.id}`,
+    projectId: section.project.id,
+    hideGroupLabel: options.mainWorkspaceOnly ? group.id === primaryGroup.id : group.isMain,
+  }));
+};
diff --git a/packages/ui/src/components/session/sidebar/sortableItems.tsx b/packages/ui/src/components/session/sidebar/projects/sortableItems.tsx
similarity index 82%
rename from packages/ui/src/components/session/sidebar/sortableItems.tsx
rename to packages/ui/src/components/session/sidebar/projects/sortableItems.tsx
index f5d518c0..7b1c3d01 100644
--- a/packages/ui/src/components/session/sidebar/sortableItems.tsx
+++ b/packages/ui/src/components/session/sidebar/projects/sortableItems.tsx
@@ -30,15 +30,13 @@ type ProjectIdentityProps = {
   projectIconBackground?: string;
 };
 
-type ProjectPickerOption = ProjectIdentityProps & {
-  projectDescription: string;
-};
-
 type ProjectHeaderIdentityProps = ProjectIdentityProps & {
   isCollapsed?: boolean;
   alwaysShowActions?: boolean;
 };
 
+type ProjectPickerOption = ProjectIdentityProps & { projectDescription: string };
+
 export const ProjectHeaderIdentity: React.FC<ProjectHeaderIdentityProps> = ({
   id,
   projectLabel,
@@ -121,10 +119,10 @@ export interface SortableProjectItemProps extends ProjectIdentityProps {
   children?: React.ReactNode;
   showCreateButtons?: boolean;
   hideHeader?: boolean;
-  openSidebarMenuKey: string | null;
-  setOpenSidebarMenuKey: (key: string | null) => void;
   /** Aggregated activity/attention indicator shown while the project is collapsed. */
   statusIndicator?: React.ReactNode;
+  openSidebarMenuKey: string | null;
+  setOpenSidebarMenuKey: (key: string | null) => void;
   projectPickerOptions?: ProjectPickerOption[];
   onProjectSelect?: (projectId: string) => void;
 }
@@ -153,9 +151,9 @@ export const SortableProjectItem: React.FC<SortableProjectItemProps> = ({
   children,
   showCreateButtons = true,
   hideHeader = false,
+  statusIndicator = null,
   openSidebarMenuKey,
   setOpenSidebarMenuKey,
-  statusIndicator = null,
   projectPickerOptions,
   onProjectSelect,
 }) => {
@@ -174,6 +172,7 @@ export const SortableProjectItem: React.FC<SortableProjectItemProps> = ({
   const menuInstanceKey = `project:${id}`;
   const isMenuOpen = openSidebarMenuKey === menuInstanceKey;
   const [isContextMenuOpen, setIsContextMenuOpen] = React.useState(false);
+  const isProjectPicker = Boolean(projectPickerOptions && onProjectSelect);
 
   const handleMenuOpenChange = React.useCallback((open: boolean) => {
     if (open) setIsContextMenuOpen(false);
@@ -235,7 +234,6 @@ export const SortableProjectItem: React.FC<SortableProjectItemProps> = ({
     }
     onToggle();
   }, [onToggle]);
-  const isProjectPicker = Boolean(projectPickerOptions && onProjectSelect);
 
   return (
     <div
@@ -287,87 +285,55 @@ export const SortableProjectItem: React.FC<SortableProjectItemProps> = ({
                   <DropdownMenuTrigger asChild>
                     <button
                       type="button"
-                      title={projectDescription}
-                      className={cn(
-                        'flex-1 min-w-0 flex items-center gap-1.5 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 rounded-md transition-[padding]',
-                        isRepo && !hideDirectoryControls
-                          ? (alwaysShowActions ? 'pr-20' : 'pr-7 group-hover/project:pr-20 group-focus-within/project:pr-20')
-                          : (alwaysShowActions ? 'pr-14' : 'pr-7 group-hover/project:pr-14 group-focus-within/project:pr-14'),
-                      )}
+                      className="flex min-w-0 flex-1 items-center gap-1.5 rounded-md text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
                       aria-label={t('sessions.sidebar.project.selectAria', { project: projectLabel })}
                     >
-                      <ProjectHeaderIdentity
-                        id={id}
-                        projectLabel={projectLabel}
-                        projectIcon={projectIcon}
-                        projectColor={projectColor}
-                        projectIconImage={projectIconImage}
-                        projectIconBackground={projectIconBackground}
-                      />
+                      <ProjectHeaderIdentity id={id} projectLabel={projectLabel} projectIcon={projectIcon} projectColor={projectColor} projectIconImage={projectIconImage} projectIconBackground={projectIconBackground} />
                       <Icon name="arrow-down-s" className="h-3.5 w-3.5 flex-shrink-0 text-muted-foreground" />
                     </button>
                   </DropdownMenuTrigger>
-                  <DropdownMenuContent
-                    align="start"
-                    className="min-w-[220px] max-w-[calc(100vw-2rem)] max-h-[min(var(--available-height),70vh)] overflow-y-auto overscroll-contain"
-                  >
+                  <DropdownMenuContent align="start" className="max-h-[70vh] min-w-[220px] overflow-y-auto">
                     {projectPickerOptions?.map((option) => (
-                      <DropdownMenuItem
-                        key={option.id}
-                        onClick={() => onProjectSelect?.(option.id)}
-                        className="flex items-center justify-between gap-3"
-                        title={option.projectDescription}
-                      >
-                        <span className="flex min-w-0 items-center gap-1.5">
-                          <ProjectHeaderIdentity
-                            id={option.id}
-                            projectLabel={option.projectLabel}
-                            projectIcon={option.projectIcon}
-                            projectColor={option.projectColor}
-                            projectIconImage={option.projectIconImage}
-                            projectIconBackground={option.projectIconBackground}
-                          />
-                        </span>
+                      <DropdownMenuItem key={option.id} onClick={() => onProjectSelect?.(option.id)} className="flex items-center justify-between gap-3" title={option.projectDescription}>
+                        <ProjectHeaderIdentity {...option} />
                         {option.id === id ? <Icon name="check" className="h-4 w-4 flex-shrink-0 text-primary" /> : null}
                       </DropdownMenuItem>
                     ))}
                   </DropdownMenuContent>
                 </DropdownMenu>
-              ) : (
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                      <button
-                        type="button"
-                        onMouseDown={handleToggleMouseDown}
-                        onClick={handleToggleClick}
-                        {...listeners}
-                        className={cn(
-                          'flex-1 min-w-0 flex items-center gap-1.5 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 rounded-md cursor-grab active:cursor-grabbing transition-[padding]',
-                          isRepo && !hideDirectoryControls
-                            ? (alwaysShowActions ? 'pr-20' : 'pr-7 group-hover/project:pr-20 group-focus-within/project:pr-20')
-                            : (alwaysShowActions ? 'pr-14' : 'pr-7 group-hover/project:pr-14 group-focus-within/project:pr-14'),
-                        )}
-                      >
-                      <ProjectHeaderIdentity
-                        id={id}
-                        projectLabel={projectLabel}
-                        projectIcon={projectIcon}
-                        projectColor={projectColor}
-                        projectIconImage={projectIconImage}
-                        projectIconBackground={projectIconBackground}
-                        isCollapsed={isCollapsed}
-                        alwaysShowActions={alwaysShowActions}
-                      />
-                      {statusIndicator ? (
-                        <span className="ml-1 inline-flex flex-shrink-0 items-center">{statusIndicator}</span>
-                      ) : null}
-                    </button>
-                  </TooltipTrigger>
-                  <TooltipContent side="right" sideOffset={8}>
-                    {projectDescription}
-                  </TooltipContent>
-                </Tooltip>
-              )}
+              ) : <Tooltip>
+                <TooltipTrigger asChild>
+                    <button
+                      type="button"
+                      onMouseDown={handleToggleMouseDown}
+                      onClick={handleToggleClick}
+                      {...listeners}
+                      className={cn(
+                        'flex-1 min-w-0 flex items-center gap-1.5 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 rounded-md cursor-grab active:cursor-grabbing transition-[padding]',
+                        isRepo && !hideDirectoryControls
+                          ? (alwaysShowActions ? 'pr-20' : 'pr-7 group-hover/project:pr-20 group-focus-within/project:pr-20')
+                          : (alwaysShowActions ? 'pr-14' : 'pr-7 group-hover/project:pr-14 group-focus-within/project:pr-14'),
+                      )}
+                    >
+                    <ProjectHeaderIdentity
+                      id={id}
+                      projectLabel={projectLabel}
+                      projectIcon={projectIcon}
+                      projectColor={projectColor}
+                      projectIconImage={projectIconImage}
+                      projectIconBackground={projectIconBackground}
+                      isCollapsed={isCollapsed}
+                      alwaysShowActions={alwaysShowActions}
+                    />
+                    {statusIndicator ? (
+                      <span className="ml-1 inline-flex flex-shrink-0 items-center">{statusIndicator}</span>
+                    ) : null}
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent side="right" sideOffset={8}>
+                  {projectDescription}
+                </TooltipContent>
+              </Tooltip>}
 
               <div className={cn(
                 'absolute top-1/2 z-10 flex -translate-y-1/2 items-center gap-1',
@@ -474,7 +440,7 @@ export const SortableProjectItem: React.FC<SortableProjectItemProps> = ({
 const SortableGroupItemBase: React.FC<{
   id: string;
   disabled?: boolean;
-  children: React.ReactNode | ((dragHandleProps: SortableDragHandleProps) => React.ReactNode);
+  children: (dragHandleProps: SortableDragHandleProps) => React.ReactNode;
 }> = ({ id, disabled = false, children }) => {
   const {
     listeners,
@@ -502,7 +468,7 @@ const SortableGroupItemBase: React.FC<{
         isDragging && 'opacity-50',
       )}
     >
-      {typeof children === 'function' ? children(dragHandleProps) : children}
+      {children(dragHandleProps)}
     </div>
   );
 };
diff --git a/packages/ui/src/components/session/sidebar/hooks/useGroupOrdering.ts b/packages/ui/src/components/session/sidebar/projects/useGroupOrdering.ts
similarity index 100%
rename from packages/ui/src/components/session/sidebar/hooks/useGroupOrdering.ts
rename to packages/ui/src/components/session/sidebar/projects/useGroupOrdering.ts
diff --git a/packages/ui/src/components/session/sidebar/hooks/useProjectRepoStatus.ts b/packages/ui/src/components/session/sidebar/projects/useProjectRepoStatus.ts
similarity index 100%
rename from packages/ui/src/components/session/sidebar/hooks/useProjectRepoStatus.ts
rename to packages/ui/src/components/session/sidebar/projects/useProjectRepoStatus.ts
diff --git a/packages/ui/src/components/session/sidebar/hooks/useProjectSessionLists.ts b/packages/ui/src/components/session/sidebar/projects/useProjectSessionLists.ts
similarity index 89%
rename from packages/ui/src/components/session/sidebar/hooks/useProjectSessionLists.ts
rename to packages/ui/src/components/session/sidebar/projects/useProjectSessionLists.ts
index 9f65de00..e860a13f 100644
--- a/packages/ui/src/components/session/sidebar/hooks/useProjectSessionLists.ts
+++ b/packages/ui/src/components/session/sidebar/projects/useProjectSessionLists.ts
@@ -1,5 +1,5 @@
 import React from 'react';
-import type { SessionOwnershipIndex } from '../sessionOwnership';
+import type { SessionOwnershipIndex } from '../sessions/sessionOwnership';
 
 type Args = {
   ownership: SessionOwnershipIndex;
diff --git a/packages/ui/src/components/session/sidebar/hooks/useProjectSessionSelection.ts b/packages/ui/src/components/session/sidebar/projects/useProjectSessionSelection.ts
similarity index 98%
rename from packages/ui/src/components/session/sidebar/hooks/useProjectSessionSelection.ts
rename to packages/ui/src/components/session/sidebar/projects/useProjectSessionSelection.ts
index cdbf2960..72dfb797 100644
--- a/packages/ui/src/components/session/sidebar/hooks/useProjectSessionSelection.ts
+++ b/packages/ui/src/components/session/sidebar/projects/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/projects/useSessionGrouping.test.tsx b/packages/ui/src/components/session/sidebar/projects/useSessionGrouping.test.tsx
new file mode 100644
index 00000000..b6fe0d69
--- /dev/null
+++ b/packages/ui/src/components/session/sidebar/projects/useSessionGrouping.test.tsx
@@ -0,0 +1,103 @@
+import { describe, expect, test } from 'bun:test';
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import type { Session } from '@opencode-ai/sdk/v2';
+import { I18nProvider } from '@/lib/i18n';
+import { useSessionActions } from '../sessions/useSessionActions';
+import { useSessionGrouping } from './useSessionGrouping';
+import type { SessionNode } from '../types';
+
+type FixtureSession = Session & { parentID?: string };
+const session = (id: string, parentID?: string): Session => {
+  const value: FixtureSession = {
+    id,
+    slug: id,
+    projectID: 'project',
+    title: id,
+    version: '1',
+    directory: '/workspace',
+    time: { created: 1, updated: 1 },
+  };
+  if (parentID) value.parentID = parentID;
+  return value;
+};
+
+const collectIds = (nodes: SessionNode[]): string[] => {
+  const ids: string[] = [];
+  const visit = (items: SessionNode[]): void => {
+    for (const node of items) {
+      ids.push(node.session.id);
+      visit(node.children);
+    }
+  };
+  visit(nodes);
+  return ids;
+};
+
+describe('useSessionGrouping malformed hierarchy fallbacks', () => {
+  test('renders a deterministic cycle/orphan fallback tree without duplicate sessions', async () => {
+    type GroupingCapture = { buildGroupedSessions?: ReturnType<typeof useSessionGrouping>['buildGroupedSessions'] };
+    const state: GroupingCapture = {};
+    const Harness = () => {
+      state.buildGroupedSessions = useSessionGrouping({
+        homeDirectory: null,
+        worktreeMetadata: new Map(),
+        pinnedSessionIds: new Set(),
+        sessionOrderRanks: new Map(),
+        gitBranches: new Map(),
+        isVSCode: false,
+      }).buildGroupedSessions;
+      return null;
+    };
+
+    renderToStaticMarkup(React.createElement(I18nProvider, null, React.createElement(Harness)));
+    const buildGroupedSessions = state.buildGroupedSessions;
+    if (!buildGroupedSessions) throw new Error('grouping callback was not mounted');
+
+    const groups = buildGroupedSessions(
+      [session('a', 'b'), session('b', 'a'), session('orphan', 'missing')],
+      '/workspace',
+      [],
+      null,
+      false,
+    );
+    const rootGroup = groups.find((group) => group.isMain);
+    const ids = collectIds(rootGroup?.sessions ?? []);
+
+    expect(ids).toEqual(['orphan', 'a', 'b']);
+    expect(new Set(ids).size).toBe(ids.length);
+  });
+
+  test('uses the row-local descendant snapshot for archive and hard-delete actions', async () => {
+    type ActionsCapture = { handleDeleteSession?: ReturnType<typeof useSessionActions>['handleDeleteSession'] };
+    const state: ActionsCapture = {};
+    const Harness = () => {
+      state.handleDeleteSession = useSessionActions({
+        mobileVariant: false,
+        allowReselect: false,
+        isSessionSearchOpen: false,
+        sessionSearchQuery: '',
+        setSessionSearchQuery: () => undefined,
+        setIsSessionSearchOpen: () => undefined,
+        descendantIds: ['active-child', 'archived-child'],
+        showDeletionDialog: false,
+        setDeleteSessionConfirm: () => undefined,
+        deleteSessionConfirm: null,
+        setEditingId: () => undefined,
+        setEditTitle: () => undefined,
+        editingId: null,
+        editTitle: '',
+        copiedSessionId: null,
+        setCopiedSessionId: () => undefined,
+      }).handleDeleteSession;
+      return null;
+    };
+
+    renderToStaticMarkup(React.createElement(I18nProvider, null, React.createElement(Harness)));
+    const handleDeleteSession = state.handleDeleteSession;
+    if (!handleDeleteSession) throw new Error('session actions callback was not mounted');
+
+    handleDeleteSession(session('root'));
+    handleDeleteSession(session('root'), { hardDelete: true });
+  });
+});
diff --git a/packages/ui/src/components/session/sidebar/hooks/useSessionGrouping.ts b/packages/ui/src/components/session/sidebar/projects/useSessionGrouping.ts
similarity index 87%
rename from packages/ui/src/components/session/sidebar/hooks/useSessionGrouping.ts
rename to packages/ui/src/components/session/sidebar/projects/useSessionGrouping.ts
index c81e23e9..fe6be770 100644
--- a/packages/ui/src/components/session/sidebar/hooks/useSessionGrouping.ts
+++ b/packages/ui/src/components/session/sidebar/projects/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';
@@ -8,11 +9,11 @@ import {
   normalizeForBranchComparison,
   normalizePath,
 } from '../utils';
-import { compareSessionsByLifecycleOrder, getSessionLifecycleOrderValue } from '@/sync/session-ordering';
+import { getSessionLifecycleOrderValue } from '@/sync/session-ordering';
 import { formatDirectoryName, formatPathForDisplay } from '@/lib/utils';
 import { useI18n } from '@/lib/i18n';
 import { resolveGlobalSessionDirectory } from '@/stores/useGlobalSessionsStore';
-import { getWorktreeFirstSeenAt } from '../worktreeFirstSeen';
+import { getWorktreeFirstSeenAt } from './worktreeFirstSeen';
 
 type Args = {
   homeDirectory: string | null;
@@ -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];
         }
@@ -69,8 +70,9 @@ export const useSessionGrouping = (args: Args) => {
       projectIsRepo: boolean,
     ) => {
       const normalizedProjectRoot = normalizePath(projectRoot ?? null);
-      const sortedProjectSessions = dedupeSessionsById(projectSessions)
-        .sort((a, b) => compareSessionsByLifecycleOrder(a, b, args.pinnedSessionIds, args.sessionOrderRanks));
+      // `orderSessionsByLifecycleScopes` owns lifecycle ordering before project
+      // ownership buckets are built. Dedupe retains that root/sibling order.
+      const sortedProjectSessions = dedupeSessionsById(projectSessions);
 
       const sessionMap = new Map(sortedProjectSessions.map((session) => [session.id, session]));
       const childrenMap = new Map<string, Session[]>();
@@ -85,7 +87,6 @@ export const useSessionGrouping = (args: Args) => {
         collection.push(session);
         childrenMap.set(parentID, collection);
       });
-      childrenMap.forEach((list) => list.sort((a, b) => compareSessionsByLifecycleOrder(a, b, args.pinnedSessionIds, args.sessionOrderRanks)));
 
       const worktreeByPath = new Map<string, WorktreeMetadata>();
       availableWorktrees.forEach((meta) => {
@@ -108,12 +109,19 @@ export const useSessionGrouping = (args: Args) => {
         return null;
       };
 
+      const claimedSessionIds = new Set<string>();
       const buildProjectNode = (session: Session): SessionNode => {
+        claimedSessionIds.add(session.id);
         const children = childrenMap.get(session.id) ?? [];
-        return { session, children: children.map((child) => buildProjectNode(child)), worktree: getSessionWorktree(session) };
+        const childNodes: SessionNode[] = [];
+        for (const child of children) {
+          if (claimedSessionIds.has(child.id)) continue;
+          childNodes.push(buildProjectNode(child));
+        }
+        return { session, children: childNodes, worktree: getSessionWorktree(session) };
       };
 
-      const roots = sortedProjectSessions.filter((session) => {
+      const rootCandidates = sortedProjectSessions.filter((session) => {
         const parentID = (session as Session & { parentID?: string | null }).parentID;
         if (!parentID) return true;
         const parentSession = sessionMap.get(parentID);
@@ -121,6 +129,16 @@ export const useSessionGrouping = (args: Args) => {
         return isArchivedSession(parentSession) !== isArchivedSession(session);
       });
 
+      // A malformed cycle has no structural root. Start with normal roots,
+      // then expose each still-unclaimed component from its first input row.
+      const roots: SessionNode[] = [];
+      const addRoot = (session: Session): void => {
+        if (claimedSessionIds.has(session.id)) return;
+        roots.push(buildProjectNode(session));
+      };
+      rootCandidates.forEach(addRoot);
+      sortedProjectSessions.forEach(addRoot);
+
       const groupedNodes = new Map<string, SessionNode[]>();
       const archivedKey = '__archived__';
 
@@ -139,9 +157,8 @@ export const useSessionGrouping = (args: Args) => {
         return archivedKey;
       };
 
-      roots.forEach((session) => {
-        const node = buildProjectNode(session);
-        const groupKey = getGroupKey(session);
+      roots.forEach((node) => {
+        const groupKey = getGroupKey(node.session);
         if (!groupedNodes.has(groupKey)) groupedNodes.set(groupKey, []);
         groupedNodes.get(groupKey)?.push(node);
       });
@@ -257,7 +274,7 @@ export const useSessionGrouping = (args: Args) => {
 
       return groups;
     },
-    [args.homeDirectory, args.worktreeMetadata, args.pinnedSessionIds, args.sessionOrderRanks, args.gitBranches, args.isVSCode, t],
+    [args.homeDirectory, args.worktreeMetadata, args.sessionOrderRanks, args.gitBranches, args.isVSCode, t],
   );
 
   return {
diff --git a/packages/ui/src/components/session/sidebar/projects/useSessionProjectViewState.test.tsx b/packages/ui/src/components/session/sidebar/projects/useSessionProjectViewState.test.tsx
new file mode 100644
index 00000000..f603fb61
--- /dev/null
+++ b/packages/ui/src/components/session/sidebar/projects/useSessionProjectViewState.test.tsx
@@ -0,0 +1,220 @@
+import { beforeEach, describe, expect, test } from 'bun:test';
+import React, { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { useSessionUIStore } from '@/sync/session-ui-store';
+import { getDeferredSafeStorage } from '@/stores/utils/safeStorage';
+import type { SessionGroup } from '../types';
+import { useSessionProjectViewState } from './useSessionProjectViewState';
+
+class ElementStub implements Partial<Element> {
+  nodeType = 1;
+}
+type DocumentStub = {
+  nodeType: number;
+  defaultView: typeof globalThis;
+  activeElement: null;
+  addEventListener: () => void;
+  removeEventListener: () => void;
+  documentElement?: Element;
+  body?: Element;
+};
+type GlobalValue = typeof globalThis | typeof ElementStub | DocumentStub | boolean;
+type HookCapture = {
+  state?: ReturnType<typeof useSessionProjectViewState>['state'];
+  actions?: ReturnType<typeof useSessionProjectViewState>['actions'];
+  renderCount: number;
+};
+
+const installMinimalDom = () => {
+  const descriptors = new Map<string, PropertyDescriptor | undefined>();
+  const setGlobal = (name: string, value: GlobalValue) => {
+    descriptors.set(name, Object.getOwnPropertyDescriptor(globalThis, name));
+    Object.defineProperty(globalThis, name, { configurable: true, writable: true, value });
+  };
+  const documentStub: DocumentStub = {
+    nodeType: 9,
+    defaultView: globalThis,
+    activeElement: null,
+    addEventListener: () => undefined,
+    removeEventListener: () => undefined,
+  };
+  // SAFETY: React's test renderer only inspects this fixture's DOM identity fields and listeners.
+  const container = Object.create(ElementStub.prototype) as Element;
+  Object.assign(container, {
+    nodeType: 1,
+    tagName: 'DIV',
+    nodeName: 'DIV',
+    namespaceURI: 'http://www.w3.org/1999/xhtml',
+    ownerDocument: documentStub,
+    addEventListener: () => undefined,
+    removeEventListener: () => undefined,
+  });
+  documentStub.documentElement = container;
+  documentStub.body = container;
+  setGlobal('document', documentStub);
+  setGlobal('window', globalThis);
+  setGlobal('Element', ElementStub);
+  setGlobal('HTMLElement', ElementStub);
+  setGlobal('HTMLIFrameElement', ElementStub);
+  setGlobal('IS_REACT_ACT_ENVIRONMENT', true);
+  return {
+    container,
+    restore: () => {
+      for (const [name, descriptor] of descriptors) {
+        if (descriptor) Object.defineProperty(globalThis, name, descriptor);
+        else Reflect.deleteProperty(globalThis, name);
+      }
+    },
+  };
+};
+
+describe('useSessionProjectViewState', () => {
+  beforeEach(() => {
+    const storage = getDeferredSafeStorage();
+    storage.removeItem('oc.sessions.projectCollapse');
+    storage.removeItem('oc.sessions.groupCollapse');
+    storage.removeItem('oc.sessions.groupOrder');
+  });
+
+  test('keeps stable state/actions and ignores selection-store updates', async () => {
+    const dom = installMinimalDom();
+    const root: Root = createRoot(dom.container);
+    const capture: HookCapture = { renderCount: 0 };
+    const projects = [{ id: 'project-a' }, { id: 'project-b' }];
+    const Harness = () => {
+      capture.renderCount += 1;
+      const viewState = useSessionProjectViewState({ isVSCode: true, projects });
+      capture.state = viewState.state;
+      capture.actions = viewState.actions;
+      return null;
+    };
+
+    try {
+      await act(async () => root.render(React.createElement(Harness)));
+      const initialState = capture.state;
+      const initialActions = capture.actions;
+      const initialRenderCount = capture.renderCount;
+      if (!initialState || !initialActions) throw new Error('hook did not mount');
+
+      await act(async () => {
+        useSessionUIStore.setState({ currentSessionId: 'selection-only' });
+      });
+      expect(capture.renderCount).toBe(initialRenderCount);
+      expect(capture.state).toBe(initialState);
+      expect(capture.actions).toBe(initialActions);
+
+      await act(async () => initialActions.toggleProject('project-a'));
+      expect(capture.state?.collapsedProjects).toEqual(new Set(['project-a']));
+      await act(async () => initialActions.collapseAllProjects());
+      expect(capture.state?.collapsedProjects).toEqual(new Set(['project-a', 'project-b']));
+      await act(async () => initialActions.expandAllProjects());
+      expect(capture.state?.collapsedProjects).toEqual(new Set());
+
+      await act(async () => initialActions.toggleGroup('project-a:group-a'));
+      expect(capture.state?.collapsedGroups).toEqual(new Set(['project-a:group-a']));
+
+      await act(async () => {
+        initialActions.setGroupOrderByProject((previous) => {
+          const next = new Map(previous);
+          next.set('project-a', ['group-b', 'group-a']);
+          return next;
+        });
+      });
+      const group = (id: string): SessionGroup => ({
+        id,
+        label: id,
+        branch: null,
+        description: null,
+        isMain: false,
+        worktree: null,
+        directory: null,
+        sessions: [],
+      });
+      expect(capture.actions?.getOrderedGroups('project-a', [group('group-a'), group('group-b')])
+        .map((item) => item.id)).toEqual(['group-b', 'group-a']);
+
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      const storage = getDeferredSafeStorage();
+      expect(JSON.parse(storage.getItem('oc.sessions.projectCollapse') ?? 'null')).toEqual([]);
+      expect(JSON.parse(storage.getItem('oc.sessions.groupCollapse') ?? 'null')).toEqual(['project-a:group-a']);
+      expect(JSON.parse(storage.getItem('oc.sessions.groupOrder') ?? 'null')).toEqual({
+        'project-a': ['group-b', 'group-a'],
+      });
+    } finally {
+      await act(async () => root.unmount());
+      dom.restore();
+    }
+  });
+
+  test('preserves malformed group storage until explicit user mutation', async () => {
+    const storage = getDeferredSafeStorage();
+    const malformedCollapse = '{malformed-collapse';
+    const malformedOrder = JSON.stringify({ 'project-a': ['group-a', 2] });
+    storage.setItem('oc.sessions.groupCollapse', malformedCollapse);
+    storage.setItem('oc.sessions.groupOrder', malformedOrder);
+    const dom = installMinimalDom();
+    const root = createRoot(dom.container);
+    const capture: HookCapture = { renderCount: 0 };
+    const Harness = () => {
+      capture.renderCount += 1;
+      const value = useSessionProjectViewState({ isVSCode: true, projects: [{ id: 'project-a' }] });
+      capture.state = value.state;
+      capture.actions = value.actions;
+      return null;
+    };
+
+    try {
+      await act(async () => root.render(React.createElement(Harness)));
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      expect(capture.state?.collapsedGroups).toEqual(new Set());
+      expect(capture.state?.groupOrderByProject).toEqual(new Map());
+      expect(storage.getItem('oc.sessions.groupCollapse')).toBe(malformedCollapse);
+      expect(storage.getItem('oc.sessions.groupOrder')).toBe(malformedOrder);
+
+      await act(async () => capture.actions!.toggleGroup('project-a:group-a'));
+      await act(async () => capture.actions!.setGroupOrderByProject(new Map([['project-a', ['group-a']]])));
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      expect(JSON.parse(storage.getItem('oc.sessions.groupCollapse') ?? 'null')).toEqual(['project-a:group-a']);
+      expect(JSON.parse(storage.getItem('oc.sessions.groupOrder') ?? 'null')).toEqual({ 'project-a': ['group-a'] });
+    } finally {
+      await act(async () => root.unmount());
+      dom.restore();
+    }
+  });
+
+  test('retains persisted project/group state while hidden and across a full remount', async () => {
+    const storage = getDeferredSafeStorage();
+    storage.setItem('oc.sessions.projectCollapse', JSON.stringify(['project-a']));
+    storage.setItem('oc.sessions.groupCollapse', JSON.stringify(['project-a:group-a']));
+    storage.setItem('oc.sessions.groupOrder', JSON.stringify({ 'project-a': ['group-b', 'group-a'] }));
+    const dom = installMinimalDom();
+    const root = createRoot(dom.container);
+    const capture: HookCapture = { renderCount: 0 };
+    const Harness = ({ hidden }: { hidden: boolean }) => {
+      void hidden;
+      capture.renderCount += 1;
+      const value = useSessionProjectViewState({ isVSCode: true, projects: [{ id: 'project-a' }] });
+      capture.state = value.state;
+      capture.actions = value.actions;
+      return null;
+    };
+
+    try {
+      await act(async () => root.render(React.createElement(Harness, { hidden: false })));
+      await act(async () => root.render(React.createElement(Harness, { hidden: true })));
+      await act(async () => root.render(React.createElement(Harness, { hidden: false })));
+      expect(capture.state?.collapsedProjects).toEqual(new Set(['project-a']));
+      expect(capture.state?.collapsedGroups).toEqual(new Set(['project-a:group-a']));
+      expect(capture.state?.groupOrderByProject).toEqual(new Map([['project-a', ['group-b', 'group-a']]]));
+
+      await act(async () => root.render(null));
+      await act(async () => root.render(React.createElement(Harness, { hidden: false })));
+      expect(capture.state?.collapsedProjects).toEqual(new Set(['project-a']));
+      expect(capture.state?.collapsedGroups).toEqual(new Set(['project-a:group-a']));
+      expect(capture.state?.groupOrderByProject).toEqual(new Map([['project-a', ['group-b', 'group-a']]]));
+    } finally {
+      await act(async () => root.unmount());
+      dom.restore();
+    }
+  });
+});
diff --git a/packages/ui/src/components/session/sidebar/projects/useSessionProjectViewState.ts b/packages/ui/src/components/session/sidebar/projects/useSessionProjectViewState.ts
new file mode 100644
index 00000000..882474b0
--- /dev/null
+++ b/packages/ui/src/components/session/sidebar/projects/useSessionProjectViewState.ts
@@ -0,0 +1,199 @@
+import React from 'react';
+import { updateDesktopSettings } from '@/lib/persistence';
+import { useProjectsStore } from '@/stores/useProjectsStore';
+import { getDeferredSafeStorage } from '@/stores/utils/safeStorage';
+import { z } from 'zod';
+import { useGroupOrdering } from './useGroupOrdering';
+
+const PROJECT_COLLAPSE_STORAGE_KEY = 'oc.sessions.projectCollapse';
+const GROUP_ORDER_STORAGE_KEY = 'oc.sessions.groupOrder';
+const GROUP_COLLAPSE_STORAGE_KEY = 'oc.sessions.groupCollapse';
+
+type Project = { id: string };
+
+type SessionProjectViewStateArgs = {
+  isVSCode: boolean;
+  projects: readonly Project[];
+};
+
+const parseStringSet = (raw: string | null): Set<string> => {
+  if (!raw) return new Set();
+  try {
+    const parsed = z.array(z.string()).safeParse(JSON.parse(raw));
+    return new Set(parsed.success ? parsed.data : []);
+  } catch {
+    return new Set();
+  }
+};
+
+const parseGroupOrder = (raw: string | null): Map<string, string[]> => {
+  if (!raw) return new Map();
+  try {
+    const parsed = z.record(z.string(), z.array(z.string())).safeParse(JSON.parse(raw));
+    if (!parsed.success) return new Map();
+    const next = new Map<string, string[]>();
+    for (const [projectId, order] of Object.entries(parsed.data)) {
+      next.set(projectId, order);
+    }
+    return next;
+  } catch {
+    return new Map();
+  }
+};
+
+export const useSessionProjectViewState = ({
+  isVSCode,
+  projects,
+}: SessionProjectViewStateArgs) => {
+  const safeStorage = React.useMemo(() => getDeferredSafeStorage(), []);
+  const [collapsedProjects, setCollapsedProjects] = React.useState<Set<string>>(() => (
+    parseStringSet(safeStorage.getItem(PROJECT_COLLAPSE_STORAGE_KEY))
+  ));
+  const [collapsedGroups, setCollapsedGroups] = React.useState<Set<string>>(() => (
+    parseStringSet(safeStorage.getItem(GROUP_COLLAPSE_STORAGE_KEY))
+  ));
+  const [groupOrderByProject, setGroupOrderByProject] = React.useState<Map<string, string[]>>(() => (
+    parseGroupOrder(safeStorage.getItem(GROUP_ORDER_STORAGE_KEY))
+  ));
+  const ignoreIntersectionUntil = React.useRef<number>(0);
+  const groupCollapseDirty = React.useRef(false);
+  const groupOrderDirty = React.useRef(false);
+  const persistCollapsedProjectsTimer = React.useRef<number | null>(null);
+  const pendingCollapsedProjects = React.useRef<Set<string> | null>(null);
+
+  const flushCollapsedProjectsPersist = React.useCallback(() => {
+    if (isVSCode) return;
+    const collapsed = pendingCollapsedProjects.current;
+    pendingCollapsedProjects.current = null;
+    persistCollapsedProjectsTimer.current = null;
+    if (!collapsed) return;
+
+    const { projects: storedProjects } = useProjectsStore.getState();
+    const updatedProjects = storedProjects.map((project) => ({
+      ...project,
+      sidebarCollapsed: collapsed.has(project.id),
+    }));
+    void updateDesktopSettings({ projects: updatedProjects }).catch(() => {});
+  }, [isVSCode]);
+
+  const scheduleCollapsedProjectsPersist = React.useCallback((collapsed: Set<string>) => {
+    if (!globalThis.window || isVSCode) return;
+    pendingCollapsedProjects.current = collapsed;
+    if (persistCollapsedProjectsTimer.current !== null) {
+      window.clearTimeout(persistCollapsedProjectsTimer.current);
+    }
+    persistCollapsedProjectsTimer.current = window.setTimeout(() => {
+      flushCollapsedProjectsPersist();
+    }, 700);
+  }, [flushCollapsedProjectsPersist, isVSCode]);
+
+  React.useEffect(() => {
+    return () => {
+      if (globalThis.window && persistCollapsedProjectsTimer.current !== null) {
+        window.clearTimeout(persistCollapsedProjectsTimer.current);
+      }
+      persistCollapsedProjectsTimer.current = null;
+      pendingCollapsedProjects.current = null;
+    };
+  }, []);
+
+  React.useEffect(() => {
+    if (!groupOrderDirty.current) return;
+    try {
+      safeStorage.setItem(GROUP_ORDER_STORAGE_KEY, JSON.stringify(Object.fromEntries(groupOrderByProject.entries())));
+    } catch {
+      // ignored
+    }
+  }, [groupOrderByProject, safeStorage]);
+
+  React.useEffect(() => {
+    if (!groupCollapseDirty.current) return;
+    try {
+      safeStorage.setItem(GROUP_COLLAPSE_STORAGE_KEY, JSON.stringify(Array.from(collapsedGroups)));
+    } catch {
+      // ignored
+    }
+  }, [collapsedGroups, safeStorage]);
+
+  const collapseAllProjects = React.useCallback(() => {
+    ignoreIntersectionUntil.current = Date.now() + 150;
+    groupCollapseDirty.current = true;
+    setCollapsedGroups(new Set());
+    setCollapsedProjects(() => {
+      const allIds = new Set(projects.map((project) => project.id));
+      try {
+        safeStorage.setItem(PROJECT_COLLAPSE_STORAGE_KEY, JSON.stringify(Array.from(allIds)));
+      } catch {
+        // ignored
+      }
+      scheduleCollapsedProjectsPersist(allIds);
+      return allIds;
+    });
+  }, [projects, safeStorage, scheduleCollapsedProjectsPersist]);
+
+  const expandAllProjects = React.useCallback(() => {
+    ignoreIntersectionUntil.current = Date.now() + 150;
+    groupCollapseDirty.current = true;
+    setCollapsedGroups(new Set());
+    setCollapsedProjects(() => {
+      const empty = new Set<string>();
+      try {
+        safeStorage.setItem(PROJECT_COLLAPSE_STORAGE_KEY, JSON.stringify([]));
+      } catch {
+        // ignored
+      }
+      scheduleCollapsedProjectsPersist(empty);
+      return empty;
+    });
+  }, [safeStorage, scheduleCollapsedProjectsPersist]);
+
+  const toggleProject = React.useCallback((projectId: string) => {
+    ignoreIntersectionUntil.current = Date.now() + 150;
+    setCollapsedProjects((previous) => {
+      const next = new Set(previous);
+      if (next.has(projectId)) next.delete(projectId);
+      else next.add(projectId);
+      try {
+        safeStorage.setItem(PROJECT_COLLAPSE_STORAGE_KEY, JSON.stringify(Array.from(next)));
+      } catch {
+        // ignored
+      }
+      scheduleCollapsedProjectsPersist(next);
+      return next;
+    });
+  }, [safeStorage, scheduleCollapsedProjectsPersist]);
+
+  const toggleGroup = React.useCallback((key: string) => {
+    groupCollapseDirty.current = true;
+    setCollapsedGroups((previous) => {
+      const next = new Set(previous);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  }, []);
+  const updateGroupOrderByProject = React.useCallback<React.Dispatch<React.SetStateAction<Map<string, string[]>>>>((update) => {
+    groupOrderDirty.current = true;
+    setGroupOrderByProject(update);
+  }, []);
+
+  const { getOrderedGroups } = useGroupOrdering(groupOrderByProject);
+  const state = React.useMemo(() => ({
+    collapsedProjects,
+    collapsedGroups,
+    groupOrderByProject,
+  }), [collapsedGroups, collapsedProjects, groupOrderByProject]);
+  const actions = React.useMemo(() => ({
+    setCollapsedProjects,
+    toggleProject,
+    collapseAllProjects,
+    expandAllProjects,
+    scheduleCollapsedProjectsPersist,
+    setCollapsedGroups,
+    toggleGroup,
+    setGroupOrderByProject: updateGroupOrderByProject,
+    getOrderedGroups,
+  }), [collapseAllProjects, expandAllProjects, getOrderedGroups, scheduleCollapsedProjectsPersist, toggleGroup, toggleProject, updateGroupOrderByProject]);
+
+  return { state, actions };
+};
diff --git a/packages/ui/src/components/session/sidebar/hooks/useSessionSidebarSections.ts b/packages/ui/src/components/session/sidebar/projects/useSessionSidebarSections.ts
similarity index 97%
rename from packages/ui/src/components/session/sidebar/hooks/useSessionSidebarSections.ts
rename to packages/ui/src/components/session/sidebar/projects/useSessionSidebarSections.ts
index ec53e8f5..90658193 100644
--- a/packages/ui/src/components/session/sidebar/hooks/useSessionSidebarSections.ts
+++ b/packages/ui/src/components/session/sidebar/projects/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/session/sidebar/hooks/useStickyProjectHeaders.ts b/packages/ui/src/components/session/sidebar/projects/useStickyProjectHeaders.ts
similarity index 100%
rename from packages/ui/src/components/session/sidebar/hooks/useStickyProjectHeaders.ts
rename to packages/ui/src/components/session/sidebar/projects/useStickyProjectHeaders.ts
diff --git a/packages/ui/src/components/session/sidebar/worktreeFirstSeen.ts b/packages/ui/src/components/session/sidebar/projects/worktreeFirstSeen.ts
similarity index 95%
rename from packages/ui/src/components/session/sidebar/worktreeFirstSeen.ts
rename to packages/ui/src/components/session/sidebar/projects/worktreeFirstSeen.ts
index ede3b8ad..731ac339 100644
--- a/packages/ui/src/components/session/sidebar/worktreeFirstSeen.ts
+++ b/packages/ui/src/components/session/sidebar/projects/worktreeFirstSeen.ts
@@ -1,4 +1,4 @@
-import { normalizePath } from './utils';
+import { normalizePath } from '../utils';
 
 // In-memory first-seen tracker for worktree directories. Worktree metadata
 // carries no creation time, so we record when a path first appears during
diff --git a/packages/ui/src/components/session/sidebar/recent/RecentSessionSection.tsx b/packages/ui/src/components/session/sidebar/recent/RecentSessionSection.tsx
new file mode 100644
index 00000000..b3abac77
--- /dev/null
+++ b/packages/ui/src/components/session/sidebar/recent/RecentSessionSection.tsx
@@ -0,0 +1,167 @@
+import React from 'react';
+import type { Session } from '@opencode-ai/sdk/v2';
+import { useI18n } from '@/lib/i18n';
+import { formatDirectoryName } from '@/lib/utils';
+import type { WorktreeMetadata } from '@/types/worktree';
+import { SidebarActivitySections } from './SidebarActivitySections';
+import { deriveRecentActivitySections, type RecentSessionLocation } from './activitySections';
+import type { ActivityItem } from './SidebarActivitySections';
+import type { SessionTreeItemProps } from '../sessions/SessionTreeItem';
+import type { SessionNode } from '../types';
+import { formatProjectLabel, normalizePath } from '../utils';
+
+type Props = {
+  projects: { id: string; label?: string; normalizedPath: string }[];
+  availableWorktreesByProject: Map<string, WorktreeMetadata[]>;
+  gitBranches: Map<string, string | null>;
+  homeDirectory: string | null;
+  hasSessionSearchQuery: boolean;
+  normalizedSessionSearchQuery: string;
+  isDesktopShellRuntime: boolean;
+  sessions: Session[];
+  childrenMap: ReadonlyMap<string, readonly Session[]>;
+  pinnedSessionIds: Set<string>;
+  recentSessions: Session[];
+  expandedParents: Set<string>;
+  notifyOnSubtasks: boolean;
+  editingId: string | null;
+  editTitle: string;
+  copiedSessionId: string | null;
+  openSidebarMenuKey: string | null;
+  mobileVariant: boolean;
+  alwaysShowActions: boolean;
+  chatSessions: Session[];
+  renderChatsSection: (items: ActivityItem[]) => React.ReactNode;
+  onNewChat: () => void;
+  showRecentSection: boolean;
+} & Pick<SessionTreeItemProps,
+  | 'setEditingId'
+  | 'setEditTitle'
+  | 'toggleParent'
+  | 'setOpenSidebarMenuKey'
+  | 'allowReselect'
+  | 'onSessionSelected'
+  | 'isSessionSearchOpen'
+  | 'sessionSearchQuery'
+  | 'setSessionSearchQuery'
+  | 'setIsSessionSearchOpen'
+  | 'deleteSessionConfirm'
+  | 'setDeleteSessionConfirm'
+  | 'startFolderRename'
+  | 'setCopiedSessionId'
+>;
+
+export const RecentSessionSection: React.FC<Props> = (props) => {
+  const {
+    projects,
+    availableWorktreesByProject,
+    gitBranches,
+    homeDirectory,
+    hasSessionSearchQuery,
+    normalizedSessionSearchQuery,
+    isDesktopShellRuntime,
+    sessions,
+    childrenMap,
+    pinnedSessionIds,
+    recentSessions,
+    chatSessions,
+    showRecentSection,
+  } = props;
+  const { t } = useI18n();
+  const sessionLocationById = React.useMemo(() => {
+    const locations = new Map<string, RecentSessionLocation>();
+    for (const session of sessions) {
+      const directory = normalizePath(session.directory ?? null);
+      if (!directory) continue;
+      let owner: Props['projects'][number] | null = null;
+      let ownerLength = -1;
+      for (const project of projects) {
+        const projectPath = normalizePath(project.normalizedPath);
+        if (projectPath && (directory === projectPath || directory.startsWith(`${projectPath}/`)) && projectPath.length > ownerLength) {
+          owner = project;
+          ownerLength = projectPath.length;
+        }
+      }
+      if (!owner) continue;
+      const worktree = availableWorktreesByProject.get(owner.normalizedPath)?.find((entry) => normalizePath(entry.path) === directory);
+      const projectLabel = formatProjectLabel(owner.label?.trim() || formatDirectoryName(owner.normalizedPath, homeDirectory) || owner.normalizedPath);
+      const branch = worktree?.branch?.trim() || gitBranches.get(directory)?.trim() || null;
+      locations.set(session.id, {
+        projectId: owner.id,
+        groupDirectory: directory,
+        projectLabel,
+        branchLabel: branch && branch !== 'HEAD' && branch !== projectLabel ? branch : null,
+      });
+    }
+    return locations;
+  }, [availableWorktreesByProject, sessions, gitBranches, homeDirectory, projects]);
+  const getSessionLocation = React.useCallback(
+    (sessionId: string) => sessionLocationById.get(sessionId) ?? null,
+    [sessionLocationById],
+  );
+  const getSessionNode = React.useCallback(
+    (session: Session): SessionNode => ({
+      session,
+      children: (childrenMap.get(session.id) ?? []).filter((child) => !child.time?.archived).map((child) => ({
+        session: child,
+        children: [],
+        worktree: null,
+      })),
+      worktree: null,
+    }),
+    [childrenMap],
+  );
+  const recentSections = React.useMemo(() => deriveRecentActivitySections({
+    sessions: recentSessions,
+    getSessionLocation,
+    getSessionNode,
+    query: hasSessionSearchQuery ? normalizedSessionSearchQuery : '',
+  }), [getSessionLocation, getSessionNode, hasSessionSearchQuery, normalizedSessionSearchQuery, recentSessions]);
+  const sections = React.useMemo(() => [
+    {
+      key: 'chats' as const,
+      title: t('sessions.sidebar.activity.chatsTitle'),
+      items: chatSessions.map((session) => ({
+        node: getSessionNode(session),
+        projectId: null,
+        groupDirectory: session.directory ?? null,
+        secondaryMeta: null,
+      })),
+    },
+    ...(showRecentSection ? recentSections.map((section) => ({ ...section, title: t('sessions.sidebar.activity.recentTitle') })) : []),
+  ], [chatSessions, getSessionNode, recentSections, showRecentSection, t]);
+  return (
+    <SidebarActivitySections
+      sections={sections}
+      variant="section"
+      isDesktopShellRuntime={isDesktopShellRuntime}
+      pinnedSessionIds={pinnedSessionIds}
+      expandedParents={props.expandedParents}
+      hasSessionSearchQuery={props.hasSessionSearchQuery}
+      normalizedSessionSearchQuery={props.normalizedSessionSearchQuery}
+      notifyOnSubtasks={props.notifyOnSubtasks}
+      editingId={props.editingId}
+      editTitle={props.editTitle}
+      copiedSessionId={props.copiedSessionId}
+      openSidebarMenuKey={props.openSidebarMenuKey}
+      mobileVariant={props.mobileVariant}
+      alwaysShowActions={props.alwaysShowActions}
+      onNewChat={props.onNewChat}
+      renderChatsSection={props.renderChatsSection}
+      setEditingId={props.setEditingId}
+      setEditTitle={props.setEditTitle}
+      toggleParent={props.toggleParent}
+      setOpenSidebarMenuKey={props.setOpenSidebarMenuKey}
+      allowReselect={props.allowReselect}
+      onSessionSelected={props.onSessionSelected}
+      isSessionSearchOpen={props.isSessionSearchOpen}
+      sessionSearchQuery={props.sessionSearchQuery}
+      setSessionSearchQuery={props.setSessionSearchQuery}
+      setIsSessionSearchOpen={props.setIsSessionSearchOpen}
+      deleteSessionConfirm={props.deleteSessionConfirm}
+      setDeleteSessionConfirm={props.setDeleteSessionConfirm}
+      startFolderRename={props.startFolderRename}
+      setCopiedSessionId={props.setCopiedSessionId}
+    />
+  );
+};
diff --git a/packages/ui/src/components/session/sidebar/SidebarActivitySections.tsx b/packages/ui/src/components/session/sidebar/recent/SidebarActivitySections.tsx
similarity index 63%
rename from packages/ui/src/components/session/sidebar/SidebarActivitySections.tsx
rename to packages/ui/src/components/session/sidebar/recent/SidebarActivitySections.tsx
index 8c11daaa..1cd444d0 100644
--- a/packages/ui/src/components/session/sidebar/SidebarActivitySections.tsx
+++ b/packages/ui/src/components/session/sidebar/recent/SidebarActivitySections.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { cn } from '@/lib/utils';
-import type { SessionNode } from './types';
+import type { SessionNode } from '../types';
 import { useI18n } from '@/lib/i18n';
 import { useSessionDisplayStore } from '@/stores/useSessionDisplayStore';
 import { Icon } from "@/components/icon/Icon";
@@ -8,9 +8,9 @@ import {
   collectSubtreeContainingId,
   computeNodeStructureKey,
   resolveMenuOpenSessionId,
-} from './sessionNodeItemUtils';
-import type { SessionNodeRenderExtras } from './sessionNodeItemUtils';
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+} from '../sessions/sessionNodeItemUtils';
+import type { SessionNodeRenderExtras } from '../sessions/sessionNodeItemUtils';
+import { SessionTreeItem, type SessionTreeItemProps } from '../sessions/SessionTreeItem';
 
 export type ActivityItem = {
   node: SessionNode;
@@ -30,27 +30,40 @@ type ActivitySection = {
 
 type Props = {
   sections: ActivitySection[];
-  renderSessionNode: (
-    node: SessionNode,
-    depth?: number,
-    groupDirectory?: string | null,
-    projectId?: string | null,
-    archivedBucket?: boolean,
-    secondaryMeta?: { projectLabel?: string | null; branchLabel?: string | null } | null,
-    renderContext?: 'project' | 'recent',
-    renderExtras?: SessionNodeRenderExtras,
-  ) => React.ReactNode;
-  editingId: string | null;
-  openSidebarMenuKey: string | null;
   expansionState?: ReadonlySet<string>;
   variant?: 'section' | 'flat';
   initialVisibleCount?: number;
   batchSize?: number;
   isDesktopShellRuntime: boolean;
+  pinnedSessionIds: Set<string>;
+  expandedParents: Set<string>;
+  hasSessionSearchQuery: boolean;
+  normalizedSessionSearchQuery: string;
+  notifyOnSubtasks: boolean;
+  editingId: string | null;
+  editTitle: string;
+  copiedSessionId: string | null;
+  openSidebarMenuKey: string | null;
+  mobileVariant: boolean;
+  alwaysShowActions: boolean;
   onNewChat?: () => void;
-  alwaysShowActions?: boolean;
   renderChatsSection?: (items: ActivityItem[]) => React.ReactNode;
-};
+} & Pick<SessionTreeItemProps,
+  | 'setEditingId'
+  | 'setEditTitle'
+  | 'toggleParent'
+  | 'setOpenSidebarMenuKey'
+  | 'allowReselect'
+  | 'onSessionSelected'
+  | 'isSessionSearchOpen'
+  | 'sessionSearchQuery'
+  | 'setSessionSearchQuery'
+  | 'setIsSessionSearchOpen'
+  | 'deleteSessionConfirm'
+  | 'setDeleteSessionConfirm'
+  | 'startFolderRename'
+  | 'setCopiedSessionId'
+>;
 
 type RenderExtras = SessionNodeRenderExtras;
 
@@ -59,14 +72,12 @@ const MAX_VISIBLE_RECENT_SESSIONS = 7;
 export function SidebarActivitySections(props: Props): React.ReactNode {
   const {
     sections,
-    renderSessionNode,
-    editingId,
-    openSidebarMenuKey,
     variant = 'section',
     initialVisibleCount = MAX_VISIBLE_RECENT_SESSIONS,
     batchSize = MAX_VISIBLE_RECENT_SESSIONS,
   } = props;
   const { t } = useI18n();
+  const { pinnedSessionIds } = props;
   const stickyZoneHeaders = useSessionDisplayStore((state) => state.stickyZoneHeaders);
   const [collapsed, setCollapsed] = React.useState<Set<string>>(new Set());
   const [visibleCountBySection, setVisibleCountBySection] = React.useState<Map<string, number>>(new Map());
@@ -109,8 +120,8 @@ export function SidebarActivitySections(props: Props): React.ReactNode {
 
   const buildRenderExtras = React.useCallback((nodes: SessionNode[]) => {
     const subtreeContainsEditing = new Set<string>();
-    collectSubtreeContainingId(nodes, editingId, subtreeContainsEditing);
-    const menuOpenSessionId = resolveMenuOpenSessionId(nodes, openSidebarMenuKey, 'recent', false);
+    collectSubtreeContainingId(nodes, props.editingId, subtreeContainsEditing);
+    const menuOpenSessionId = resolveMenuOpenSessionId(nodes, props.openSidebarMenuKey, 'recent', false);
     const nodeStructureKeyByNode = new WeakMap<SessionNode, string>();
     const visit = (node: SessionNode): void => {
       nodeStructureKeyByNode.set(node, computeNodeStructureKey(node));
@@ -131,11 +142,9 @@ export function SidebarActivitySections(props: Props): React.ReactNode {
       nodeStructureKey: nodeStructureKeyByNode.get(node) ?? '',
       childRenderExtrasFor,
     });
-  }, [editingId, openSidebarMenuKey]);
+  }, [props.editingId, props.openSidebarMenuKey]);
 
-  const visibleSections = sections.filter((section) => (
-    section.items.length > 0 || (section.key === 'chats' && props.onNewChat)
-  ));
+  const visibleSections = sections.filter((section) => section.items.length > 0 || section.key === 'chats');
   if (visibleSections.length === 0) {
     return null;
   }
@@ -155,15 +164,41 @@ export function SidebarActivitySections(props: Props): React.ReactNode {
         const usesCustomRenderer = section.key === 'chats' && Boolean(props.renderChatsSection);
         const canShowFewer = !usesCustomRenderer && !flatVariant && section.items.length > initialVisibleCount && remainingCount === 0;
         const getRenderExtras = buildRenderExtras(visibleItems.map((item) => item.node));
-        const renderItem = (item: ActivityItem) => renderSessionNode(
-          item.node,
-          0,
-          item.groupDirectory,
-          item.projectId,
-          false,
-          item.secondaryMeta,
-          'recent',
-          getRenderExtras(item.node),
+        const renderItem = (item: ActivityItem) => (
+          <SessionTreeItem
+            key={item.node.session.id}
+            node={item.node}
+            pinnedSessionIds={pinnedSessionIds}
+            expandedParents={props.expandedParents}
+            hasSessionSearchQuery={props.hasSessionSearchQuery}
+            normalizedSessionSearchQuery={props.normalizedSessionSearchQuery}
+            notifyOnSubtasks={props.notifyOnSubtasks}
+            editingId={props.editingId}
+            editTitle={props.editTitle}
+            copiedSessionId={props.copiedSessionId}
+            openSidebarMenuKey={props.openSidebarMenuKey}
+            mobileVariant={props.mobileVariant}
+            alwaysShowActions={props.alwaysShowActions}
+            groupDirectory={item.groupDirectory}
+            projectId={item.projectId}
+            secondaryMeta={item.secondaryMeta}
+            renderContext="recent"
+            renderExtras={getRenderExtras(item.node)}
+            setEditingId={props.setEditingId}
+            setEditTitle={props.setEditTitle}
+            toggleParent={props.toggleParent}
+            setOpenSidebarMenuKey={props.setOpenSidebarMenuKey}
+            allowReselect={props.allowReselect}
+            onSessionSelected={props.onSessionSelected}
+            isSessionSearchOpen={props.isSessionSearchOpen}
+            sessionSearchQuery={props.sessionSearchQuery}
+            setSessionSearchQuery={props.setSessionSearchQuery}
+            setIsSessionSearchOpen={props.setIsSessionSearchOpen}
+            deleteSessionConfirm={props.deleteSessionConfirm}
+            setDeleteSessionConfirm={props.setDeleteSessionConfirm}
+            startFolderRename={props.startFolderRename}
+            setCopiedSessionId={props.setCopiedSessionId}
+          />
         );
 
         if (flatVariant) {
@@ -185,11 +220,6 @@ export function SidebarActivitySections(props: Props): React.ReactNode {
 
         return (
           <div key={section.key} className="relative space-y-1">
-            <div
-              className="absolute h-px w-px pointer-events-none"
-              data-sidebar-activity-sentinel={section.key}
-              aria-hidden="true"
-            />
             <div className={cn(
               'relative group/chats',
               '-ml-2.5 -mr-2',
@@ -198,14 +228,11 @@ export function SidebarActivitySections(props: Props): React.ReactNode {
               <button
                 type="button"
                 onClick={() => toggleSection(section.key)}
-                className={cn(
-                  'group flex w-full items-center gap-1.5 py-1 pl-4 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
-                  section.key === 'chats' && props.onNewChat ? 'pr-10' : 'pr-3.5',
-                )}
+                className={cn('group flex w-full items-center gap-1.5 py-1 pl-4 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50', section.key === 'chats' ? 'pr-10' : 'pr-3.5')}
                 aria-expanded={!isCollapsed}
               >
                 <span className="inline-flex h-3.5 w-3.5 items-center justify-center">
-                    <Icon name={section.key === 'chats' ? 'chat-4' : 'history'} className={cn('h-3.5 w-3.5 text-muted-foreground/80', 'group-hover:hidden')} />
+                  <Icon name={section.key === 'chats' ? 'chat-4' : 'history'} className={cn('h-3.5 w-3.5 text-muted-foreground/80', 'group-hover:hidden')} />
                   <span className="hidden h-3.5 w-3.5 items-center justify-center text-muted-foreground group-hover:inline-flex">
                     {isCollapsed ? <Icon name="arrow-right-s" className="h-3.5 w-3.5" /> : <Icon name="arrow-down-s" className="h-3.5 w-3.5" />}
                   </span>
@@ -213,38 +240,19 @@ export function SidebarActivitySections(props: Props): React.ReactNode {
                 <span className="text-[14px] font-semibold lowercase text-foreground">{section.title}</span>
               </button>
               {section.key === 'chats' && props.onNewChat ? (
-                <div className="absolute right-0.5 top-1/2 z-10 -translate-y-1/2">
-                  <Tooltip delayDuration={500}>
-                    <TooltipTrigger asChild>
-                      <button
-                        type="button"
-                        onClick={(event) => {
-                          event.stopPropagation();
-                          props.onNewChat?.();
-                        }}
-                        className={cn(
-                          'inline-flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 transition-opacity',
-                          props.alwaysShowActions
-                            ? 'opacity-100'
-                            : 'opacity-0 pointer-events-none group-hover/chats:opacity-100 group-hover/chats:pointer-events-auto group-focus-within/chats:opacity-100 group-focus-within/chats:pointer-events-auto',
-                        )}
-                        aria-label={t('sessions.sidebar.header.actions.newSession')}
-                      >
-                        <Icon name="add" className="h-4 w-4" />
-                      </button>
-                    </TooltipTrigger>
-                    <TooltipContent side="bottom" sideOffset={4}>
-                      <p>{t('sessions.sidebar.header.actions.newSession')}</p>
-                    </TooltipContent>
-                  </Tooltip>
-                </div>
+                <button
+                  type="button"
+                  onClick={(event) => { event.stopPropagation(); props.onNewChat?.(); }}
+                  className={cn('absolute right-0.5 top-1/2 z-10 inline-flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50', props.alwaysShowActions ? 'opacity-100' : 'opacity-0 pointer-events-none group-hover/chats:opacity-100 group-hover/chats:pointer-events-auto group-focus-within/chats:opacity-100 group-focus-within/chats:pointer-events-auto')}
+                  aria-label={t('sessions.sidebar.header.actions.newSession')}
+                >
+                  <Icon name="add" className="h-4 w-4" />
+                </button>
               ) : null}
             </div>
             {!isCollapsed ? (
               <div className={cn('space-y-0.5')}>
-                {section.key === 'chats' && props.renderChatsSection
-                  ? props.renderChatsSection(section.items)
-                  : visibleItems.map(renderItem)}
+                {usesCustomRenderer ? props.renderChatsSection?.(section.items) : visibleItems.map(renderItem)}
                 {!usesCustomRenderer && remainingCount > 0 ? (
                   <button
                     type="button"
diff --git a/packages/ui/src/components/session/sidebar/activitySections.test.ts b/packages/ui/src/components/session/sidebar/recent/activitySections.test.ts
similarity index 52%
rename from packages/ui/src/components/session/sidebar/activitySections.test.ts
rename to packages/ui/src/components/session/sidebar/recent/activitySections.test.ts
index f0132f15..d711babe 100644
--- a/packages/ui/src/components/session/sidebar/activitySections.test.ts
+++ b/packages/ui/src/components/session/sidebar/recent/activitySections.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, test } from 'bun:test';
 import type { Session } from '@opencode-ai/sdk/v2';
-import { deriveRecentSessions } from './activitySections';
+import { deriveRecentActivitySections, deriveRecentSessions } from './activitySections';
 
 const NOW = 200_000_000;
 const RECENT = NOW - (48 * 60 * 60 * 1000);
@@ -37,3 +37,39 @@ describe('deriveRecentSessions', () => {
     expect(deriveRecentSessions([oldSession, recentSession], new Set(), NOW)).toEqual([recentSession]);
   });
 });
+
+describe('deriveRecentActivitySections', () => {
+  test('filters recent roots by search text and falls back to topology metadata', () => {
+    const matching = {
+      ...session('matching', { updated: RECENT }),
+      title: 'Deploy release',
+      directory: '/workspace/app/worktrees/release',
+    };
+    const excluded = {
+      ...session('excluded', { updated: RECENT }),
+      title: 'Investigate failure',
+      directory: '/workspace/app',
+    };
+
+    const sections = deriveRecentActivitySections({
+      sessions: [matching, excluded],
+      getSessionLocation: (sessionId) => sessionId === matching.id ? {
+        projectId: 'app',
+        groupDirectory: '/workspace/app/worktrees/release',
+        projectLabel: 'App',
+        branchLabel: 'release',
+      } : null,
+      query: 'deploy',
+    });
+
+    expect(sections).toEqual([{
+      key: 'active-now',
+      items: [{
+        node: { session: matching, children: [], worktree: null },
+        projectId: 'app',
+        groupDirectory: '/workspace/app/worktrees/release',
+        secondaryMeta: { projectLabel: 'App', branchLabel: 'release' },
+      }],
+    }]);
+  });
+});
diff --git a/packages/ui/src/components/session/sidebar/recent/activitySections.ts b/packages/ui/src/components/session/sidebar/recent/activitySections.ts
new file mode 100644
index 00000000..0ffdbcdf
--- /dev/null
+++ b/packages/ui/src/components/session/sidebar/recent/activitySections.ts
@@ -0,0 +1,87 @@
+import type { Session } from '@opencode-ai/sdk/v2';
+import type { SessionNode } from '../types';
+
+export type RecentSessionLocation = {
+  projectId: string | null;
+  groupDirectory: string | null;
+  projectLabel: string | null;
+  branchLabel: string | null;
+};
+
+type RecentActivitySection = {
+  key: 'active-now';
+  items: Array<{
+    node: SessionNode;
+    projectId: string | null;
+    groupDirectory: string | null;
+    secondaryMeta: { projectLabel?: string | null; branchLabel?: string | null } | null;
+  }>;
+};
+
+const RECENT_SESSION_MAX_AGE_MS = 48 * 60 * 60 * 1000;
+
+const isSubtaskSession = (session: Session): boolean => {
+  return Boolean((session as Session & { parentID?: string | null }).parentID);
+};
+
+const isArchivedSession = (session: Session): boolean => {
+  return Boolean(session.time?.archived);
+};
+
+const getSessionUpdatedAt = (session: Session): number => {
+  const updated = session.time?.updated;
+  const created = session.time?.created;
+  if (typeof updated === 'number' && Number.isFinite(updated)) {
+    return updated;
+  }
+  if (typeof created === 'number' && Number.isFinite(created)) {
+    return created;
+  }
+  return 0;
+};
+
+// Recent contains non-archived root sessions that are active now or were
+// updated within the retention window. The caller applies shared lifecycle
+// ordering after this membership filter; batching ("Show more") handles long
+// windows in the UI.
+export const deriveRecentSessions = (
+  sessions: Session[],
+  activeSessionIds: ReadonlySet<string>,
+  now = Date.now(),
+): Session[] => {
+  const minUpdatedAt = now - RECENT_SESSION_MAX_AGE_MS;
+  return sessions.filter((session) => {
+    if (isArchivedSession(session) || isSubtaskSession(session)) {
+      return false;
+    }
+    return activeSessionIds.has(session.id) || getSessionUpdatedAt(session) >= minUpdatedAt;
+  });
+};
+
+export const deriveRecentActivitySections = ({
+  sessions,
+  getSessionLocation,
+  getSessionNode,
+  query,
+}: {
+  sessions: Session[];
+  getSessionLocation: (sessionId: string) => RecentSessionLocation | null;
+  getSessionNode?: (session: Session) => SessionNode;
+  query: string;
+}): RecentActivitySection[] => [{
+  key: 'active-now',
+  items: sessions.flatMap((session) => {
+    const title = typeof session.title === 'string' ? session.title.toLowerCase() : '';
+    if (query && !title.includes(query)) return [];
+    const location = getSessionLocation(session.id);
+    return [{
+      node: getSessionNode?.(session) ?? { session, children: [], worktree: null },
+      projectId: location?.projectId ?? null,
+      groupDirectory: location?.groupDirectory ?? session.directory ?? null,
+      secondaryMeta: location ? {
+        projectLabel: location.projectLabel,
+        branchLabel: location.branchLabel,
+      } : null,
+    }];
+  }),
+}];
diff --git a/packages/ui/src/components/session/sidebar/SessionNodeItem.tsx b/packages/ui/src/components/session/sidebar/sessions/SessionNodeItem.tsx
similarity index 92%
rename from packages/ui/src/components/session/sidebar/SessionNodeItem.tsx
rename to packages/ui/src/components/session/sidebar/sessions/SessionNodeItem.tsx
index b1151f3b..3c9d40c5 100644
--- a/packages/ui/src/components/session/sidebar/SessionNodeItem.tsx
+++ b/packages/ui/src/components/session/sidebar/sessions/SessionNodeItem.tsx
@@ -18,18 +18,17 @@ import { canUseElectronDesktopIPC, invokeDesktop, isVSCodeRuntime } from '@/lib/
 import { toast } from '@/components/ui';
 import { Button } from '@/components/ui/button';
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
-import { isSessionPinned, type SessionPinnedTarget } from '@/stores/useSessionPinnedStore';
+import { isSessionPinned, useSessionPinnedStore } from '@/stores/useSessionPinnedStore';
 import { Icon } from "@/components/icon/Icon";
 import { buildExportFilename, downloadAsMarkdown, formatSessionAsMarkdown, getExportRevealLabelKey, revealExportedMarkdown, saveAsMarkdownDesktop } from '@/lib/exportSession';
 import type { ChildSessionExport } from '@/lib/exportSession';
-import { buildSessionMessageRecordsSnapshot, useDirectoryStore, useGlobalSessionStatus, useSessionPermissions, useSessionQuestionCount } from '@/sync/sync-context';
-import { useSync } from '@/sync/use-sync';
+import { useGlobalSessionStatus, useSessionPermissions, useSessionQuestionCount } from '@/sync/sync-context';
+import { useSessionMessageRecordsForExport } from '@/sync/use-sync';
 import { useViewportStore, viewportSessionKey } from '@/sync/viewport-store';
-import { DraggableSessionRow } from './sessionFolderDnd';
+import { DraggableSessionRow } from '../folders/sessionFolderDnd';
 import { nodeContainsSessionId, nodeHasPinnedMembershipChange, selectQuestionBadgeSessionScopes } from './sessionNodeItemUtils';
-import type { SessionNodeChildRenderExtras, SessionNodeRenderExtras } from './sessionNodeItemUtils';
-import type { SessionNode } from './types';
-import { formatProjectLabel, formatSessionCompactDateLabel, formatSessionDateLabel, normalizePath, renderHighlightedText } from './utils';
+import type { SessionNode } from '../types';
+import { formatProjectLabel, formatSessionCompactDateLabel, formatSessionDateLabel, normalizePath, renderHighlightedText } from '../utils';
 import { useProjectsStore } from '@/stores/useProjectsStore';
 import { useSessionDisplayStore } from '@/stores/useSessionDisplayStore';
 import { getGitHubPrStatusKey, usePrVisualSummary } from '@/stores/useGitHubPrStatusStore';
@@ -51,15 +50,15 @@ import { RuntimeAPIContext } from '@/contexts/runtimeAPIContext';
 import { startSessionTreeWorktreeMove, useIsSessionWorktreeMovePending } from '@/lib/worktrees/sessionWorktreeMove';
 import { streamPerfCount } from '@/stores/utils/streamDebug';
 import { useSessionUIStore } from '@/sync/session-ui-store';
-
-type Folder = { id: string; name: string; sessionIds: string[] };
+import { useSessionFoldersStore } from '@/stores/useSessionFoldersStore';
+import { useUIStore } from '@/stores/useUIStore';
 
 type SecondaryMeta = {
   projectLabel?: string | null;
   branchLabel?: string | null;
 };
 
-type Props = {
+export type SessionNodeItemProps = {
   node: SessionNode;
   depth?: number;
   groupDirectory?: string | null;
@@ -79,7 +78,6 @@ type Props = {
   toggleParent: (expansionKey: string) => void;
   handleSessionSelect: (sessionId: string, sessionDirectory: string | null) => void;
   handleSessionDoubleClick: (sessionId: string, sessionTitle: string) => void;
-  togglePinnedSession: (target: SessionPinnedTarget) => void;
   handleShareSession: (session: Session) => void;
   copiedSessionId: string | null;
   handleCopyShareUrl: (url: string, sessionId: string) => void;
@@ -87,27 +85,11 @@ type Props = {
   handleUnshareSession: (sessionId: string) => void;
   openSidebarMenuKey: string | null;
   setOpenSidebarMenuKey: (key: string | null) => void;
-  renamingFolderId: string | null;
-  getFoldersForScope: (scopeKey: string) => Folder[];
-  getSessionFolderId: (scopeKey: string, sessionId: string) => string | null;
-  removeSessionFromFolder: (scopeKey: string, sessionId: string) => void;
-  addSessionToFolder: (scopeKey: string, folderId: string, sessionId: string) => void;
   createFolderAndStartRename: (scopeKey: string, parentId?: string | null) => { id: string } | null;
-  openContextPanelTab: (directory: string, options: { mode: 'chat'; dedupeKey: string; label: string; sessionTitleFallback?: string; readOnly?: boolean }) => void;
   handleDeleteSession: (session: Session, source?: { archivedBucket?: boolean; hardDelete?: boolean; skipConfirm?: boolean }) => void;
   handleRestoreSession: (session: Session) => void;
   mobileVariant: boolean;
   alwaysShowActions: boolean;
-  renderSessionNode: (
-    node: SessionNode,
-    depth?: number,
-    groupDirectory?: string | null,
-    projectId?: string | null,
-    archivedBucket?: boolean,
-    secondaryMeta?: SecondaryMeta | null,
-    renderContext?: 'project' | 'recent',
-    renderExtras?: SessionNodeRenderExtras,
-  ) => React.ReactNode;
   secondaryMeta?: SecondaryMeta | null;
   renderContext?: 'project' | 'recent';
   /**
@@ -133,9 +115,14 @@ type Props = {
    * descendant; SessionNodeItem's recursive child render uses this lookup
    * to fetch the right key for each child it produces.
    */
-  childRenderExtrasFor?: (child: SessionNode) => SessionNodeChildRenderExtras;
+  children?: React.ReactNode;
 };
 
+const areNodeWorktreeRenderSemanticsEqual = (prev: SessionNode, next: SessionNode): boolean => (
+  normalizePath(prev.worktree?.path ?? null) === normalizePath(next.worktree?.path ?? null)
+  && prev.worktree?.branch === next.worktree?.branch
+);
+
 // Shared row geometry: the gutter edge matches the zone-header band padding
 // (px-1.5 = 6px), the marker slot is icon-wide (14px) with a 6px gap, so row
 // text starts exactly where the zone-header label starts. Nested children
@@ -147,7 +134,6 @@ const ROW_TEXT_LEFT_PX = ROW_GUTTER_LEFT_PX + 14 + 6;
 const cancelScrollAnchorByContainer = new WeakMap<HTMLElement, () => void>();
 
 const holdSessionRowPosition = (target: HTMLElement): void => {
-  if (typeof window === 'undefined') return;
   const row = target.closest<HTMLElement>('[data-session-row]');
   const container = row?.closest<HTMLElement>('.overlay-scrollbar-container');
   if (!row || !container) return;
@@ -252,7 +238,7 @@ const QuickSessionAction = React.memo(function QuickSessionAction({
   );
 });
 
-function SessionNodeItemComponent(props: Props): React.ReactNode {
+function SessionNodeItemComponent(props: SessionNodeItemProps): React.ReactNode {
   streamPerfCount('ui.sidebar_session_node.render');
   const { t } = useI18n();
   const {
@@ -275,7 +261,6 @@ function SessionNodeItemComponent(props: Props): React.ReactNode {
     toggleParent,
     handleSessionSelect,
     handleSessionDoubleClick,
-    togglePinnedSession,
     handleShareSession,
     copiedSessionId,
     handleCopyShareUrl,
@@ -283,24 +268,21 @@ function SessionNodeItemComponent(props: Props): React.ReactNode {
     handleUnshareSession,
     openSidebarMenuKey,
     setOpenSidebarMenuKey,
-    renamingFolderId,
-    getFoldersForScope,
-    getSessionFolderId,
-    removeSessionFromFolder,
-    addSessionToFolder,
     createFolderAndStartRename,
-    openContextPanelTab,
     handleDeleteSession,
     handleRestoreSession,
     mobileVariant,
     alwaysShowActions,
-    renderSessionNode,
     secondaryMeta,
     renderContext = 'project',
-    subtreeContainsEditing,
-    menuOpenSessionId,
-    childRenderExtrasFor,
+    children,
   } = props;
+  const togglePinnedSession = useSessionPinnedStore((state) => state.toggle);
+  const getFoldersForScope = useSessionFoldersStore((state) => state.getFoldersForScope);
+  const getSessionFolderId = useSessionFoldersStore((state) => state.getSessionFolderId);
+  const removeSessionFromFolder = useSessionFoldersStore((state) => state.removeSessionFromFolder);
+  const addSessionToFolder = useSessionFoldersStore((state) => state.addSessionToFolder);
+  const openContextPanelTab = useUIStore((state) => state.openContextPanelTab);
 
   const isVSCode = React.useMemo(() => isVSCodeRuntime(), []);
   const isElectron = React.useMemo(() => canUseElectronDesktopIPC(), []);
@@ -335,6 +317,7 @@ function SessionNodeItemComponent(props: Props): React.ReactNode {
   const editingIdRef = React.useRef(editingId);
   editingIdRef.current = editingId;
   const pendingRenameRef = React.useRef<{ id: string; title: string } | null>(null);
+  const pendingFolderCreateRef = React.useRef(false);
   const handleSaveEditRef = React.useRef(handleSaveEdit);
   handleSaveEditRef.current = handleSaveEdit;
   const [renameDraft, setRenameDraft] = React.useState(editTitle);
@@ -395,17 +378,12 @@ function SessionNodeItemComponent(props: Props): React.ReactNode {
   }, [prSummary, t]);
   const isActive = useSessionUIStore((state) => state.currentSessionId === session.id);
 
-  const sessionDirectory =
-    normalizePath((session as Session & { directory?: string | null }).directory ?? null)
-    ?? normalizePath(groupDirectory ?? null);
+  const sessionDirectory = normalizePath(session.directory ?? null) ?? normalizePath(groupDirectory ?? null);
   // Multi-select scope: sessions are flat per project, so selection groups by
   // project (falling back to the directory when no project is known) — a
   // selection must survive mixing sessions from different worktrees.
   const selectionScopeKey = projectId ?? sessionDirectory ?? null;
-  // Directory bootstrap is scheduled once at sidebar level. A row only needs
-  // the lightweight store reference for scoped state and export actions.
-  const directoryStore = useDirectoryStore(sessionDirectory ?? undefined, { bootstrap: false });
-  const sync = useSync();
+  const loadExportRecords = useSessionMessageRecordsForExport();
 
   const selectionModeEnabled = useSessionMultiSelectStore((state) => state.enabled);
   const isRowSelected = useSessionMultiSelectStore(
@@ -455,6 +433,7 @@ function SessionNodeItemComponent(props: Props): React.ReactNode {
   const sessionPermissions = useSessionPermissions(session.id, sessionDirectory ?? undefined, { bootstrap: false });
   const sessionGoal = getSessionGoal(resolvedSession);
   const sessionGoalGlyph = sessionGoal ? (
+    // SAFETY: sessionGoalStatusLabelKey contains an i18n key for every SessionGoalStatus.
     <span
       className="inline-flex flex-shrink-0 items-center"
       title={t(sessionGoalStatusLabelKey[sessionGoal.status] as never)}
@@ -476,7 +455,7 @@ function SessionNodeItemComponent(props: Props): React.ReactNode {
     [isExpanded, node, sessionDirectory],
   );
   const pendingQuestionCount = useSessionQuestionCount(questionBadgeSessionScopes);
-  const isSubtaskSession = Boolean((resolvedSession as Session & { parentID?: string | null }).parentID);
+  const isSubtaskSession = Boolean(resolvedSession.parentID);
   const unseenCount = useSessionUnseenCount(session.id);
   const needsAttention = unseenCount > 0 && (!isSubtaskSession || notifyOnSubtasks);
   const sessionTimestamp = resolvedSession.time?.updated || resolvedSession.time?.created || Date.now();
@@ -496,9 +475,10 @@ function SessionNodeItemComponent(props: Props): React.ReactNode {
     for (const child of children) {
       try {
         if (!sessionDirectory) throw new Error('Session directory is required for export');
-        await sync.loadCompleteHistory(child.session.id, sessionDirectory);
-        const childRecords = buildSessionMessageRecordsSnapshot(directoryStore.getState(), child.session.id).list;
+        const childRecords = await loadExportRecords({ directory: sessionDirectory, sessionID: child.session.id });
+        if (!childRecords) throw new Error('Session runtime changed during export');
         const childTitle = child.session.title || t('sessions.sidebar.session.export.untitledSubagent');
+        // SAFETY: OpenCode session payloads may carry the optional agent label used by exports.
         const childAgent = (child.session as Session & { agent?: string }).agent;
         const grandChildren = await collectChildExports(child.children);
         skipped += grandChildren.skipped;
@@ -513,7 +493,7 @@ function SessionNodeItemComponent(props: Props): React.ReactNode {
       }
     }
     return { children: results, skipped };
-  }, [collectNodeDescendantIds, directoryStore, sessionDirectory, sync, t]);
+  }, [collectNodeDescendantIds, loadExportRecords, sessionDirectory, t]);
 
   const showSkippedSubtasksWarning = React.useCallback((count: number) => {
     if (count <= 0) return;
@@ -528,14 +508,11 @@ function SessionNodeItemComponent(props: Props): React.ReactNode {
       return;
     }
 
-    try {
-      await sync.loadCompleteHistory(session.id, sessionDirectory);
-    } catch {
+    const records = await loadExportRecords({ directory: sessionDirectory, sessionID: session.id }).catch(() => null);
+    if (!records) {
       toast.error(t('sessions.sidebar.session.export.failedLoadHistory'));
       return;
     }
-
-    const records = buildSessionMessageRecordsSnapshot(directoryStore.getState(), session.id).list;
     if (records.length === 0) {
       toast.error(t('sessions.sidebar.session.export.nothingToExport'));
       return;
@@ -573,7 +550,7 @@ function SessionNodeItemComponent(props: Props): React.ReactNode {
     downloadAsMarkdown(markdown, filename);
     toast.success(t('sessions.sidebar.session.export.success'));
     showSkippedSubtasksWarning(skippedSubtaskCount);
-  }, [collectChildExports, directoryStore, node.children, resolvedSession.title, session.id, sessionDirectory, showSkippedSubtasksWarning, sync, t]);
+  }, [collectChildExports, loadExportRecords, node.children, resolvedSession.title, session.id, sessionDirectory, showSkippedSubtasksWarning, t]);
   const handleExportSession = React.useCallback(async () => {
     if (node.children.length > 0) {
       setExportIncludeSubtasks(true);
@@ -603,7 +580,8 @@ function SessionNodeItemComponent(props: Props): React.ReactNode {
       // its own rename form. A click inside ANY rename form for this session
       // must not count as "outside", or the sibling instance would save and
       // exit the rename mid-edit.
-      const target = e.target as HTMLElement | null;
+      // SAFETY: DOM mousedown targets are Nodes; closest is used only when the target is an Element.
+      const target = e.target instanceof HTMLElement ? e.target : null;
       const withinRenameForm = target?.closest?.(`[data-session-rename-form="${CSS.escape(session.id)}"]`);
       if (formRef.current && !withinRenameForm) {
         handleSaveEditRef.current(renameDraftRef.current);
@@ -846,7 +824,7 @@ function SessionNodeItemComponent(props: Props): React.ReactNode {
     void runtimeApis?.vscode?.executeCommand('openchamber.openSessionInEditor', session.id, sessionTitle);
   };
 
-  const handleRowSelect = (event?: React.MouseEvent<HTMLButtonElement>) => {
+  const handleRowSelect = (event?: React.MouseEvent<HTMLElement>) => {
     if (suppressNextSelectRef.current) {
       suppressNextSelectRef.current = false;
       return;
@@ -855,12 +833,10 @@ function SessionNodeItemComponent(props: Props): React.ReactNode {
       event?.preventDefault();
       event?.stopPropagation();
       if (event?.shiftKey) {
-        const rows = typeof document !== 'undefined'
-          ? Array.from(document.querySelectorAll<HTMLElement>('[data-session-row]'))
-          : [];
+        const rows = Array.from(document.querySelectorAll<HTMLElement>('[data-session-row]'));
         const orderedIds = rows
           .map((el) => el.getAttribute('data-session-row'))
-          .filter((id): id is string => typeof id === 'string' && id.length > 0);
+          .filter((id): id is string => id !== null && id.length > 0);
         const currentAnchor = useSessionMultiSelectStore.getState().anchorId;
         const descendantsById = new Map<string, string[]>();
         descendantsById.set(session.id, collectNodeDescendantIds(node));
@@ -881,9 +857,10 @@ function SessionNodeItemComponent(props: Props): React.ReactNode {
   // action menu), so nothing double-fires.
   const handleRowBackgroundClick = (event: React.MouseEvent<HTMLDivElement>) => {
     if (event.defaultPrevented) return;
-    const target = event.target as HTMLElement | null;
+    // SAFETY: React click targets are DOM EventTargets; closest is valid only for HTMLElements.
+    const target = event.target instanceof HTMLElement ? event.target : null;
     if (target?.closest('button, a, input, [role="menuitem"], [role="menu"]')) return;
-    handleRowSelect(event as unknown as React.MouseEvent<HTMLButtonElement>);
+    handleRowSelect(event);
   };
 
   const handleRowMouseDown = (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -1053,8 +1030,9 @@ function SessionNodeItemComponent(props: Props): React.ReactNode {
                 )}
                 <Separator />
                 <Item onClick={() => {
-                  const newFolder = createFolderAndStartRename(defaultScope);
-                  if (!newFolder) return;
+                   const newFolder = createFolderAndStartRename(defaultScope);
+                   if (!newFolder) return;
+                   pendingFolderCreateRef.current = true;
                   if (currentEntry && currentEntry.scope !== defaultScope) {
                     removeSessionFromFolder(currentEntry.scope, session.id);
                   }
@@ -1127,7 +1105,13 @@ function SessionNodeItemComponent(props: Props): React.ReactNode {
   );
 
   const sessionMenuContent = (
-    <DropdownMenuContent align="end" className="min-w-[180px]" finalFocus={() => (renamingFolderId || editingIdRef.current) ? false : true}>
+    <DropdownMenuContent align="end" className="min-w-[180px]" finalFocus={() => {
+      if (pendingFolderCreateRef.current) {
+        pendingFolderCreateRef.current = false;
+        return false;
+      }
+      return editingIdRef.current ? false : true;
+    }}>
       {renderSessionMenuItems({
         Item: DropdownMenuItem,
         Separator: DropdownMenuSeparator,
@@ -1143,7 +1127,13 @@ function SessionNodeItemComponent(props: Props): React.ReactNode {
       <ContextMenu.Positioner className="app-region-no-drag z-50">
         <ContextMenu.Popup
           data-slot="dropdown-menu-content"
-          finalFocus={() => (renamingFolderId || editingIdRef.current) ? false : true}
+          finalFocus={() => {
+            if (pendingFolderCreateRef.current) {
+              pendingFolderCreateRef.current = false;
+              return false;
+            }
+            return editingIdRef.current ? false : true;
+          }}
           style={{
             color: 'var(--surface-elevated-foreground)',
           }}
@@ -1423,27 +1413,7 @@ function SessionNodeItemComponent(props: Props): React.ReactNode {
           {contextMenuContent}
         </ContextMenu.Root>
       </DraggableSessionRow>
-      {hasChildren && isExpanded
-        ? node.children.map((child): React.ReactNode => {
-          const childRenderExtras: SessionNodeChildRenderExtras = childRenderExtrasFor
-            ? childRenderExtrasFor(child)
-            : {
-                subtreeContainsEditing,
-                menuOpenSessionId,
-                nodeStructureKey: '',
-              };
-          return renderSessionNode(
-            child,
-            depth + 1,
-            sessionDirectory ?? groupDirectory,
-            projectId,
-            archivedBucket,
-            undefined,
-            renderContext,
-            childRenderExtras,
-          );
-        })
-        : null}
+      {hasChildren && isExpanded ? children : null}
       <Dialog open={exportDialogOpen} onOpenChange={setExportDialogOpen}>
         <DialogContent showCloseButton={false} className="max-w-sm gap-5">
           <DialogHeader>
@@ -1497,7 +1467,7 @@ function SessionNodeItemComponent(props: Props): React.ReactNode {
 }
 
 const getNodeSessionDirectory = (node: SessionNode): string | null => {
-  return normalizePath((node.session as Session & { directory?: string | null }).directory ?? null);
+  return normalizePath(node.session.directory ?? null);
 };
 
 const isSecondaryMetaEqual = (prev?: SecondaryMeta | null, next?: SecondaryMeta | null): boolean => {
@@ -1505,7 +1475,7 @@ const isSecondaryMetaEqual = (prev?: SecondaryMeta | null, next?: SecondaryMeta
     && (prev?.branchLabel ?? null) === (next?.branchLabel ?? null);
 };
 
-const getMenuSessionIdFromKey = (props: Props): string | null => {
+const getMenuSessionIdFromKey = (props: SessionNodeItemProps): string | null => {
   if (!props.openSidebarMenuKey) return null;
   const bucketTag = props.archivedBucket ? 'archived' : 'active';
   const prefix = `${props.renderContext ?? 'project'}:${bucketTag}:`;
@@ -1514,12 +1484,12 @@ const getMenuSessionIdFromKey = (props: Props): string | null => {
     : null;
 };
 
-const getRelevantMenuSessionId = (props: Props): string | null => {
+const getRelevantMenuSessionId = (props: SessionNodeItemProps): string | null => {
   return props.menuOpenSessionId ?? getMenuSessionIdFromKey(props);
 };
 
 const subtreeContainsSession = (
-  props: Props,
+  props: SessionNodeItemProps,
   sessionId: string | null,
   precomputed: Set<string>,
 ): boolean => {
@@ -1547,7 +1517,7 @@ const hasSetMembershipChangeInNode = (
   return false;
 };
 
-const hasExpansionMembershipChange = (prev: Props, next: Props): boolean => {
+const hasExpansionMembershipChange = (prev: SessionNodeItemProps, next: SessionNodeItemProps): boolean => {
   if (prev.hasSessionSearchQuery || next.hasSessionSearchQuery) return false;
   const prevBucketTag = prev.archivedBucket ? 'archived' : 'active';
   const nextBucketTag = next.archivedBucket ? 'archived' : 'active';
@@ -1566,9 +1536,21 @@ const hasExpansionMembershipChange = (prev: Props, next: Props): boolean => {
   );
 };
 
-const areSessionNodeItemPropsEqual = (prev: Props, next: Props): boolean => {
+const areSessionRenderSemanticsEqual = (prev: Session, next: Session): boolean => (
+  prev.id === next.id
+  && prev.title === next.title
+  && prev.directory === next.directory
+  && prev.parentID === next.parentID
+  && prev.share?.url === next.share?.url
+  && prev.time?.created === next.time?.created
+  && prev.time?.updated === next.time?.updated
+  && prev.time?.archived === next.time?.archived
+);
+
+const areSessionNodeItemPropsEqual = (prev: SessionNodeItemProps, next: SessionNodeItemProps): boolean => {
   if (prev.node.session.id !== next.node.session.id) return false;
-  if (prev.node.session !== next.node.session) return false;
+  if (!areSessionRenderSemanticsEqual(prev.node.session, next.node.session)) return false;
+  if (!areNodeWorktreeRenderSemanticsEqual(prev.node, next.node)) return false;
   if (prev.depth !== next.depth) return false;
   if (prev.groupDirectory !== next.groupDirectory) return false;
   if (prev.projectId !== next.projectId) return false;
@@ -1631,14 +1613,6 @@ const areSessionNodeItemPropsEqual = (prev: Props, next: Props): boolean => {
     }
   }
 
-  if (prev.renamingFolderId !== next.renamingFolderId) {
-    const prevMenuSessionId = getRelevantMenuSessionId(prev);
-    const nextMenuSessionId = getRelevantMenuSessionId(next);
-    if (nodeContainsSessionId(prev.node, prevMenuSessionId) || nodeContainsSessionId(next.node, nextMenuSessionId)) {
-      return false;
-    }
-  }
-
   return prev.setEditingId === next.setEditingId
     && prev.setEditTitle === next.setEditTitle
     && prev.handleSaveEdit === next.handleSaveEdit
@@ -1646,21 +1620,15 @@ const areSessionNodeItemPropsEqual = (prev: Props, next: Props): boolean => {
     && prev.toggleParent === next.toggleParent
     && prev.handleSessionSelect === next.handleSessionSelect
     && prev.handleSessionDoubleClick === next.handleSessionDoubleClick
-    && prev.togglePinnedSession === next.togglePinnedSession
     && prev.handleShareSession === next.handleShareSession
     && prev.handleCopyShareUrl === next.handleCopyShareUrl
     && prev.handleCopySessionId === next.handleCopySessionId
     && prev.handleUnshareSession === next.handleUnshareSession
     && prev.setOpenSidebarMenuKey === next.setOpenSidebarMenuKey
-    && prev.getFoldersForScope === next.getFoldersForScope
-    && prev.getSessionFolderId === next.getSessionFolderId
-    && prev.removeSessionFromFolder === next.removeSessionFromFolder
-    && prev.addSessionToFolder === next.addSessionToFolder
     && prev.createFolderAndStartRename === next.createFolderAndStartRename
-    && prev.openContextPanelTab === next.openContextPanelTab
     && prev.handleDeleteSession === next.handleDeleteSession
     && prev.handleRestoreSession === next.handleRestoreSession
-    && prev.renderSessionNode === next.renderSessionNode;
+    && prev.children === next.children;
 };
 
 export const SessionNodeItem = React.memo(SessionNodeItemComponent, areSessionNodeItemPropsEqual);
diff --git a/packages/ui/src/components/session/sidebar/sessions/SessionTreeItem.behavior.test.tsx b/packages/ui/src/components/session/sidebar/sessions/SessionTreeItem.behavior.test.tsx
new file mode 100644
index 00000000..e524c50e
--- /dev/null
+++ b/packages/ui/src/components/session/sidebar/sessions/SessionTreeItem.behavior.test.tsx
@@ -0,0 +1,119 @@
+import { describe, expect, mock, test } from 'bun:test';
+import React, { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import type { Session } from '@opencode-ai/sdk/v2';
+import type { SessionNodeItemProps } from './SessionNodeItem';
+import { installHookTestDom } from '../test-utils/testDom';
+import { I18nProvider } from '@/lib/i18n';
+
+const renderedRows: SessionNodeItemProps[] = [];
+
+mock.module('./SessionNodeItem', () => ({
+  SessionNodeItem: (props: SessionNodeItemProps) => {
+    renderedRows.push(props);
+    return null;
+  },
+}));
+
+mock.module('./hooks/useSessionActions', () => ({
+  useSessionActions: (args: {
+    setEditingId: (id: string | null) => void;
+    setEditTitle: (title: string) => void;
+  }) => ({
+    copiedSessionId: null,
+    handleSaveEdit: () => undefined,
+    handleCancelEdit: () => undefined,
+    handleSessionSelect: () => undefined,
+    handleSessionDoubleClick: (id: string, title: string) => {
+      args.setEditingId(id);
+      args.setEditTitle(title);
+    },
+    handleShareSession: () => undefined,
+    handleCopyShareUrl: () => undefined,
+    handleCopySessionId: () => undefined,
+    handleUnshareSession: () => undefined,
+    handleDeleteSession: () => undefined,
+    handleRestoreSession: () => undefined,
+  }),
+}));
+
+const { SessionTreeItem } = await import('./SessionTreeItem');
+
+const session = (id: string): Session => ({
+  id,
+  slug: id,
+  projectID: 'project',
+  title: 'Shared title',
+  version: '1',
+  directory: '/workspace',
+  time: { created: 1, updated: 1 },
+});
+
+describe('SessionTreeItem public behavior', () => {
+  test('coordinates duplicate project and Recent rows through their shared visible-list state', async () => {
+    const dom = installHookTestDom();
+    const root = createRoot(dom.container);
+    const sharedSession = session('same-session');
+    const rowNode = { session: sharedSession, children: [], worktree: null };
+    const noop = () => undefined;
+
+    const Harness = () => {
+      const [editingId, setEditingId] = React.useState<string | null>(null);
+      const [editTitle, setEditTitle] = React.useState('');
+      const [menuKey, setMenuKey] = React.useState<string | null>(null);
+      const [copiedSessionId, setCopiedSessionId] = React.useState<string | null>(null);
+      const rows = [
+        { renderContext: 'project' as const, groupDirectory: '/workspace' },
+        { renderContext: 'recent' as const, groupDirectory: '/workspace' },
+      ];
+      return <>{rows.map((context) => <SessionTreeItem
+        key={context.renderContext}
+        node={rowNode}
+        pinnedSessionIds={new Set()}
+        expandedParents={new Set()}
+        hasSessionSearchQuery={false}
+        normalizedSessionSearchQuery=""
+        notifyOnSubtasks={false}
+        editingId={editingId}
+        setEditingId={setEditingId}
+        editTitle={editTitle}
+        setEditTitle={setEditTitle}
+        toggleParent={noop}
+        copiedSessionId={copiedSessionId}
+        openSidebarMenuKey={menuKey}
+        setOpenSidebarMenuKey={setMenuKey}
+        allowReselect={false}
+        isSessionSearchOpen={false}
+        sessionSearchQuery=""
+        setSessionSearchQuery={noop}
+        setIsSessionSearchOpen={noop}
+        deleteSessionConfirm={null}
+        setDeleteSessionConfirm={noop}
+        startFolderRename={noop}
+        setCopiedSessionId={setCopiedSessionId}
+        mobileVariant={false}
+        alwaysShowActions={false}
+        {...context}
+      />)}</>;
+    };
+
+    try {
+      await act(async () => root.render(<I18nProvider><Harness /></I18nProvider>));
+      expect(renderedRows).toHaveLength(2);
+
+      await act(async () => renderedRows[0]?.handleSessionDoubleClick(sharedSession.id, sharedSession.title));
+      expect(renderedRows).toHaveLength(4);
+      expect(renderedRows.slice(-2).map((row) => [row.editingId, row.editTitle]))
+        .toEqual([[sharedSession.id, sharedSession.title], [sharedSession.id, sharedSession.title]]);
+
+      await act(async () => renderedRows[3]?.setOpenSidebarMenuKey('recent:active:same-session'));
+      expect(renderedRows).toHaveLength(6);
+      expect(renderedRows.slice(-2).map((row) => row.openSidebarMenuKey))
+        .toEqual(['recent:active:same-session', 'recent:active:same-session']);
+    } finally {
+      await act(async () => root.unmount());
+      renderedRows.length = 0;
+      dom.restore();
+    }
+  });
+});
diff --git a/packages/ui/src/components/session/sidebar/sessions/SessionTreeItem.tsx b/packages/ui/src/components/session/sidebar/sessions/SessionTreeItem.tsx
new file mode 100644
index 00000000..d3519e26
--- /dev/null
+++ b/packages/ui/src/components/session/sidebar/sessions/SessionTreeItem.tsx
@@ -0,0 +1,222 @@
+import React from 'react';
+import { SessionNodeItem } from './SessionNodeItem';
+import type { SessionNodeItemProps } from './SessionNodeItem';
+import type { SessionNode } from '../types';
+import type { SessionNodeRenderExtras } from './sessionNodeItemUtils';
+import { useSessionActions, type DeleteSessionConfirmState } from './useSessionActions';
+import { useSessionFoldersStore } from '@/stores/useSessionFoldersStore';
+import { useUIStore } from '@/stores/useUIStore';
+import { SessionDeleteConfirmDialog } from '../shell/ConfirmDialogs';
+
+type Context = {
+  groupDirectory?: string | null;
+  projectId?: string | null;
+  archivedBucket?: boolean;
+  secondaryMeta?: { projectLabel?: string | null; branchLabel?: string | null } | null;
+  renderContext?: 'project' | 'recent';
+};
+
+type SessionTreeItemRenderProps = Context & Pick<SessionNodeItemProps,
+  | 'expandedParents'
+  | 'hasSessionSearchQuery'
+  | 'normalizedSessionSearchQuery'
+  | 'notifyOnSubtasks'
+  | 'editingId'
+  | 'editTitle'
+  | 'copiedSessionId'
+  | 'openSidebarMenuKey'
+  | 'mobileVariant'
+  | 'alwaysShowActions'
+> & {
+  node: SessionNode;
+  pinnedSessionIds: Set<string>;
+  depth?: number;
+  renderExtras?: SessionNodeRenderExtras;
+};
+
+export type SessionTreeItemProps = SessionTreeItemRenderProps & Pick<SessionNodeItemProps,
+  | 'setEditingId'
+  | 'setEditTitle'
+  | 'toggleParent'
+  | 'setOpenSidebarMenuKey'
+> & {
+  allowReselect: boolean;
+  onSessionSelected?: (sessionId: string) => void;
+  isSessionSearchOpen: boolean;
+  sessionSearchQuery: string;
+  setSessionSearchQuery: (value: string) => void;
+  setIsSessionSearchOpen: (open: boolean) => void;
+  deleteSessionConfirm: DeleteSessionConfirmState;
+  setDeleteSessionConfirm: (value: DeleteSessionConfirmState) => void;
+  startFolderRename: (scopeKey: string, folder: { id: string; name: string }) => void;
+  setCopiedSessionId: (sessionId: string | null) => void;
+};
+
+const EMPTY_SUBTREE_CONTAINS_EDITING: Set<string> = new Set();
+
+// This is the recursive ownership boundary. Structural parents pass identity
+// and stable UI actions; the row itself remains the leaf subscriber for live UI state.
+export function SessionTreeItem({
+  node,
+  depth = 0,
+  groupDirectory,
+  projectId,
+  archivedBucket = false,
+  secondaryMeta,
+  renderContext = 'project',
+  renderExtras,
+  pinnedSessionIds,
+  expandedParents,
+  hasSessionSearchQuery,
+  normalizedSessionSearchQuery,
+  notifyOnSubtasks,
+  editingId,
+  setEditingId,
+  editTitle,
+  setEditTitle,
+  toggleParent,
+  openSidebarMenuKey,
+  setOpenSidebarMenuKey,
+  allowReselect,
+  onSessionSelected,
+  isSessionSearchOpen,
+  sessionSearchQuery,
+  setSessionSearchQuery,
+  setIsSessionSearchOpen,
+  deleteSessionConfirm,
+  setDeleteSessionConfirm,
+  startFolderRename,
+  copiedSessionId,
+  setCopiedSessionId,
+  mobileVariant,
+  alwaysShowActions,
+}: SessionTreeItemProps): React.ReactNode {
+  const createFolder = useSessionFoldersStore((state) => state.createFolder);
+  const toggleFolderCollapse = useSessionFoldersStore((state) => state.toggleFolderCollapse);
+  const showDeletionDialog = useUIStore((state) => state.showDeletionDialog);
+  const setShowDeletionDialog = useUIStore((state) => state.setShowDeletionDialog);
+  const descendantIds = React.useMemo(() => {
+    const ids: string[] = [];
+    const visit = (current: SessionNode) => current.children.forEach((child) => {
+      ids.push(child.session.id);
+      visit(child);
+    });
+    visit(node);
+    return ids;
+  }, [node]);
+  const createFolderAndStartRename = React.useCallback((scopeKey: string, parentId?: string | null) => {
+    if (!scopeKey) return null;
+    if (parentId && useSessionFoldersStore.getState().collapsedFolderIds.has(parentId)) toggleFolderCollapse(parentId);
+    const folder = createFolder(scopeKey, 'New folder', parentId);
+    startFolderRename(scopeKey, folder);
+    return folder;
+  }, [createFolder, startFolderRename, toggleFolderCollapse]);
+  const sessionActions = useSessionActions({
+    mobileVariant,
+    allowReselect,
+    onSessionSelected,
+    isSessionSearchOpen,
+    sessionSearchQuery,
+    setSessionSearchQuery,
+    setIsSessionSearchOpen,
+    descendantIds,
+    showDeletionDialog,
+    setDeleteSessionConfirm,
+    deleteSessionConfirm,
+    editingId,
+    setEditingId,
+    editTitle,
+    setEditTitle,
+    copiedSessionId,
+    setCopiedSessionId,
+  });
+  const childRenderExtrasFor = renderExtras?.childRenderExtrasFor;
+  const childContext: Context = {
+    groupDirectory: node.session.directory ?? groupDirectory,
+    projectId,
+    archivedBucket,
+    renderContext,
+  };
+  return <>
+    <SessionNodeItem
+      expandedParents={expandedParents}
+      hasSessionSearchQuery={hasSessionSearchQuery}
+      normalizedSessionSearchQuery={normalizedSessionSearchQuery}
+      notifyOnSubtasks={notifyOnSubtasks}
+      editingId={editingId}
+      setEditingId={setEditingId}
+      editTitle={editTitle}
+      setEditTitle={setEditTitle}
+       handleSaveEdit={sessionActions.handleSaveEdit}
+       handleCancelEdit={sessionActions.handleCancelEdit}
+      toggleParent={toggleParent}
+       handleSessionSelect={sessionActions.handleSessionSelect}
+       handleSessionDoubleClick={sessionActions.handleSessionDoubleClick}
+       handleShareSession={sessionActions.handleShareSession}
+       copiedSessionId={copiedSessionId}
+       handleCopyShareUrl={sessionActions.handleCopyShareUrl}
+       handleCopySessionId={sessionActions.handleCopySessionId}
+       handleUnshareSession={sessionActions.handleUnshareSession}
+      openSidebarMenuKey={openSidebarMenuKey}
+      setOpenSidebarMenuKey={setOpenSidebarMenuKey}
+      createFolderAndStartRename={createFolderAndStartRename}
+       handleDeleteSession={sessionActions.handleDeleteSession}
+       handleRestoreSession={sessionActions.handleRestoreSession}
+      mobileVariant={mobileVariant}
+      alwaysShowActions={alwaysShowActions}
+       pinnedSessionIds={pinnedSessionIds}
+      node={node}
+      depth={depth}
+      groupDirectory={groupDirectory}
+      projectId={projectId}
+      archivedBucket={archivedBucket}
+      secondaryMeta={secondaryMeta}
+      renderContext={renderContext}
+      subtreeContainsEditing={renderExtras?.subtreeContainsEditing ?? EMPTY_SUBTREE_CONTAINS_EDITING}
+      menuOpenSessionId={renderExtras?.menuOpenSessionId ?? null}
+      nodeStructureKey={renderExtras?.nodeStructureKey ?? ''}
+    >
+      {node.children.map((child) => (
+        <SessionTreeItem
+          key={child.session.id}
+           node={child}
+           pinnedSessionIds={pinnedSessionIds}
+          expandedParents={expandedParents}
+          hasSessionSearchQuery={hasSessionSearchQuery}
+          normalizedSessionSearchQuery={normalizedSessionSearchQuery}
+          notifyOnSubtasks={notifyOnSubtasks}
+          editingId={editingId}
+          setEditingId={setEditingId}
+           editTitle={editTitle}
+           copiedSessionId={copiedSessionId}
+          setEditTitle={setEditTitle}
+           toggleParent={toggleParent}
+           openSidebarMenuKey={openSidebarMenuKey}
+           setOpenSidebarMenuKey={setOpenSidebarMenuKey}
+           allowReselect={allowReselect}
+           onSessionSelected={onSessionSelected}
+           isSessionSearchOpen={isSessionSearchOpen}
+           sessionSearchQuery={sessionSearchQuery}
+           setSessionSearchQuery={setSessionSearchQuery}
+           setIsSessionSearchOpen={setIsSessionSearchOpen}
+           deleteSessionConfirm={deleteSessionConfirm}
+           setDeleteSessionConfirm={setDeleteSessionConfirm}
+           startFolderRename={startFolderRename}
+           setCopiedSessionId={setCopiedSessionId}
+          mobileVariant={mobileVariant}
+          alwaysShowActions={alwaysShowActions}
+          depth={depth + 1}
+          {...childContext}
+          renderExtras={childRenderExtrasFor?.(child)}
+        />
+      ))}
+    </SessionNodeItem>
+    {deleteSessionConfirm?.session.id === node.session.id ? <SessionDeleteConfirmDialog
+      value={deleteSessionConfirm}
+      setValue={setDeleteSessionConfirm}
+      showDeletionDialog={showDeletionDialog}
+      setShowDeletionDialog={setShowDeletionDialog}
+      onConfirm={sessionActions.confirmDeleteSession}
+    /> : null}
+  </>;
+}
diff --git a/packages/ui/src/components/session/sidebar/sessions/collapsedActivityIndicator.behavior.test.tsx b/packages/ui/src/components/session/sidebar/sessions/collapsedActivityIndicator.behavior.test.tsx
new file mode 100644
index 00000000..081c7667
--- /dev/null
+++ b/packages/ui/src/components/session/sidebar/sessions/collapsedActivityIndicator.behavior.test.tsx
@@ -0,0 +1,61 @@
+import { describe, expect, test } from 'bun:test';
+import React, { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import type { Session } from '@opencode-ai/sdk/v2';
+import { useGlobalSessionStatusStore } from '@/sync/global-session-status';
+import { useNotificationStore } from '@/sync/notification-store';
+import { useCollapsedSessionActivityState } from './collapsedActivityState';
+import type { SessionNode } from '../types';
+import { installHookTestDom } from '../test-utils/testDom';
+
+// SAFETY: the fixture supplies the minimal SDK identity used by the selector.
+const node = (id: string): SessionNode => ({ session: { id } as Session, children: [], worktree: null });
+
+describe('collapsed activity scalar selector', () => {
+  test('does not rerender for unrelated updates and rerenders for relevant scalar changes', async () => {
+    const dom = installHookTestDom();
+    const root = createRoot(dom.container);
+    useGlobalSessionStatusStore.setState({ statusById: new Map() });
+    useNotificationStore.setState({
+      list: [],
+      index: { session: { unseenCount: {}, unseenHasError: {} }, project: { unseenCount: {}, unseenHasError: {} } },
+    });
+    type ActivityCapture = { renders: number; state: string | null };
+    const capture: ActivityCapture = { renders: 0, state: null };
+    const Harness = () => {
+      capture.renders += 1;
+      capture.state = useCollapsedSessionActivityState({ nodes: [node('relevant')], includeUnreadSubtasks: true });
+      return null;
+    };
+    try {
+      await act(async () => root.render(React.createElement(Harness)));
+      const initialRenders = capture.renders;
+      await act(async () => useGlobalSessionStatusStore.setState({
+        statusById: new Map([['unrelated', { status: { type: 'busy' }, directory: '/other' }]]),
+      }));
+      await act(async () => useNotificationStore.getState().append({
+        type: 'turn-complete', session: 'unrelated', time: Date.now(), viewed: false,
+      }));
+      expect(capture.renders).toBe(initialRenders);
+
+      await act(async () => useNotificationStore.getState().append({
+        type: 'turn-complete', session: 'relevant', time: Date.now(), viewed: false,
+      }));
+      expect(capture.state).toBe('unread');
+      const unreadRenders = capture.renders;
+      await act(async () => useGlobalSessionStatusStore.setState({
+        statusById: new Map([['relevant', { status: { type: 'busy' }, directory: '/workspace' }]]),
+      }));
+      expect(capture.state).toBe('active');
+      expect(capture.renders).toBe(unreadRenders + 1);
+    } finally {
+      await act(async () => root.unmount());
+      useGlobalSessionStatusStore.setState({ statusById: new Map() });
+      useNotificationStore.setState({
+        list: [],
+        index: { session: { unseenCount: {}, unseenHasError: {} }, project: { unseenCount: {}, unseenHasError: {} } },
+      });
+      dom.restore();
+    }
+  });
+});
diff --git a/packages/ui/src/components/session/sidebar/collapsedActivityState.test.ts b/packages/ui/src/components/session/sidebar/sessions/collapsedActivityIndicator.test.ts
similarity index 90%
rename from packages/ui/src/components/session/sidebar/collapsedActivityState.test.ts
rename to packages/ui/src/components/session/sidebar/sessions/collapsedActivityIndicator.test.ts
index cb8bb25b..3828adbb 100644
--- a/packages/ui/src/components/session/sidebar/collapsedActivityState.test.ts
+++ b/packages/ui/src/components/session/sidebar/sessions/collapsedActivityIndicator.test.ts
@@ -1,8 +1,9 @@
 import { describe, expect, test } from 'bun:test';
 import type { Session } from '@opencode-ai/sdk/v2';
 import { getSessionNodesActivityState } from './collapsedActivityState';
-import type { SessionNode } from './types';
+import type { SessionNode } from '../types';
 
+// SAFETY: the fixture supplies the minimal SDK identity fields used by the activity projection.
 const node = (id: string, parentID?: string, children: SessionNode[] = []): SessionNode => ({
   session: { id, parentID } as Session,
   children,
diff --git a/packages/ui/src/components/session/sidebar/collapsedActivityIndicator.tsx b/packages/ui/src/components/session/sidebar/sessions/collapsedActivityIndicator.tsx
similarity index 52%
rename from packages/ui/src/components/session/sidebar/collapsedActivityIndicator.tsx
rename to packages/ui/src/components/session/sidebar/sessions/collapsedActivityIndicator.tsx
index d5cd2a50..22a31905 100644
--- a/packages/ui/src/components/session/sidebar/collapsedActivityIndicator.tsx
+++ b/packages/ui/src/components/session/sidebar/sessions/collapsedActivityIndicator.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import { cn } from '@/lib/utils';
-import type { CollapsedActivityState } from './collapsedActivityState';
+import type { SessionNode } from '../types';
+import { useI18n } from '@/lib/i18n';
+import { useCollapsedSessionActivityState, type CollapsedActivityState } from './collapsedActivityState';
 
 export function CollapsedActivityIndicator({
   state,
@@ -28,3 +30,14 @@ export function CollapsedActivityIndicator({
     />
   );
 }
+
+export const CollapsedSessionActivityIndicator: React.FC<{ nodes: SessionNode[]; includeUnreadSubtasks: boolean }> = ({ nodes, includeUnreadSubtasks }) => {
+  const { t } = useI18n();
+  const resolved = useCollapsedSessionActivityState({ nodes, includeUnreadSubtasks });
+  if (!resolved) return null;
+  return <CollapsedActivityIndicator
+    state={resolved}
+    activeLabel={t('sessions.sidebar.session.status.active')}
+    unreadLabel={t('sessions.sidebar.session.status.unread')}
+  />;
+};
diff --git a/packages/ui/src/components/session/sidebar/sessions/collapsedActivityState.ts b/packages/ui/src/components/session/sidebar/sessions/collapsedActivityState.ts
new file mode 100644
index 00000000..14eed6f8
--- /dev/null
+++ b/packages/ui/src/components/session/sidebar/sessions/collapsedActivityState.ts
@@ -0,0 +1,98 @@
+import type { Session } from '@opencode-ai/sdk/v2';
+import React from 'react';
+import type { SessionNode } from '../types';
+import { useGlobalSessionStatusStore } from '@/sync/global-session-status';
+import { useNotificationStore } from '@/sync/notification-store';
+
+export type CollapsedActivityState = 'active' | 'unread' | null;
+
+const mergeCollapsedActivityStates = (
+  current: CollapsedActivityState,
+  next: CollapsedActivityState,
+): CollapsedActivityState => {
+  if (current === 'active' || next === 'active') return 'active';
+  if (current === 'unread' || next === 'unread') return 'unread';
+  return null;
+};
+
+const getSessionNodeActivityState = (
+  node: SessionNode,
+  activeSessionIds: Set<string>,
+  unreadSessionIds: Set<string>,
+  includeUnreadSubtasks: boolean,
+): CollapsedActivityState => {
+  if (activeSessionIds.has(node.session.id)) return 'active';
+
+  let state: CollapsedActivityState = null;
+  // SAFETY: SessionNode sessions are SDK Session records; parentID is the optional hierarchy field.
+  const isSubtask = Boolean((node.session as Session & { parentID?: string | null }).parentID);
+  if (unreadSessionIds.has(node.session.id) && (includeUnreadSubtasks || !isSubtask)) state = 'unread';
+
+  for (const child of node.children) {
+    state = mergeCollapsedActivityStates(
+      state,
+      getSessionNodeActivityState(child, activeSessionIds, unreadSessionIds, includeUnreadSubtasks),
+    );
+    if (state === 'active') return state;
+  }
+
+  return state;
+};
+
+export const getSessionNodesActivityState = (
+  nodes: SessionNode[],
+  activeSessionIds: Set<string>,
+  unreadSessionIds: Set<string>,
+  includeUnreadSubtasks: boolean,
+): CollapsedActivityState => {
+  let state: CollapsedActivityState = null;
+  for (const node of nodes) {
+    state = mergeCollapsedActivityStates(
+      state,
+      getSessionNodeActivityState(node, activeSessionIds, unreadSessionIds, includeUnreadSubtasks),
+    );
+    if (state === 'active') return state;
+  }
+  return state;
+};
+
+type SessionActivityProps = {
+  nodes: SessionNode[];
+  includeUnreadSubtasks: boolean;
+};
+
+const collectActivityIds = (nodes: SessionNode[], includeUnreadSubtasks: boolean) => {
+  const active = new Set<string>();
+  const unread = new Set<string>();
+  const visit = (node: SessionNode, isSubtask: boolean): void => {
+    active.add(node.session.id);
+    if (!isSubtask || includeUnreadSubtasks) unread.add(node.session.id);
+    node.children.forEach((child) => visit(child, true));
+  };
+  nodes.forEach((node) => visit(node, false));
+  return { active, unread };
+};
+
+export const useCollapsedSessionActivityState = ({
+  nodes,
+  includeUnreadSubtasks,
+  enabled = true,
+}: SessionActivityProps & { enabled?: boolean }): CollapsedActivityState => {
+  const ids = React.useMemo(() => collectActivityIds(nodes, includeUnreadSubtasks), [includeUnreadSubtasks, nodes]);
+  const active = useGlobalSessionStatusStore(React.useCallback((state): CollapsedActivityState => {
+    if (!enabled) return null;
+    for (const sessionId of ids.active) {
+      const status = state.statusById.get(sessionId)?.status.type;
+      if (status === 'busy' || status === 'retry') return 'active';
+    }
+    return null;
+  }, [enabled, ids.active]));
+  const unread = useNotificationStore(React.useCallback((state): CollapsedActivityState => {
+    if (!enabled) return null;
+    for (const sessionId of ids.unread) {
+      if ((state.index.session.unseenCount[sessionId] ?? 0) > 0) return 'unread';
+    }
+    return null;
+  }, [enabled, ids.unread]));
+  return active ?? unread;
+};
diff --git a/packages/ui/src/components/session/sidebar/sessionNodeItemUtils.test.ts b/packages/ui/src/components/session/sidebar/sessions/sessionNodeItemUtils.test.ts
similarity index 99%
rename from packages/ui/src/components/session/sidebar/sessionNodeItemUtils.test.ts
rename to packages/ui/src/components/session/sidebar/sessions/sessionNodeItemUtils.test.ts
index fe43a537..27ff998b 100644
--- a/packages/ui/src/components/session/sidebar/sessionNodeItemUtils.test.ts
+++ b/packages/ui/src/components/session/sidebar/sessions/sessionNodeItemUtils.test.ts
@@ -3,7 +3,7 @@ import type { Session } from '@opencode-ai/sdk/v2';
 import { getRuntimeKey } from '@/lib/runtime-switch';
 import { getPinnedSessionKey } from '@/stores/useSessionPinnedStore';
 import { computeNodeStructureKey, nodeHasPinnedMembershipChange, selectFolderRootNodes, selectQuestionBadgeSessionScopes } from './sessionNodeItemUtils';
-import type { SessionNode } from './types';
+import type { SessionNode } from '../types';
 
 const session = (id: string, title: string): Session => ({
   id,
diff --git a/packages/ui/src/components/session/sidebar/sessionNodeItemUtils.ts b/packages/ui/src/components/session/sidebar/sessions/sessionNodeItemUtils.ts
similarity index 67%
rename from packages/ui/src/components/session/sidebar/sessionNodeItemUtils.ts
rename to packages/ui/src/components/session/sidebar/sessions/sessionNodeItemUtils.ts
index 3de83638..f2c40e5c 100644
--- a/packages/ui/src/components/session/sidebar/sessionNodeItemUtils.ts
+++ b/packages/ui/src/components/session/sidebar/sessions/sessionNodeItemUtils.ts
@@ -1,8 +1,9 @@
 import { getRuntimeKey } from '@/lib/runtime-switch';
+import { matchesRankQuery } from '@/lib/search/fuzzySearch';
 import { normalizePath } from '@/lib/pathNormalization';
 import { resolveGlobalSessionDirectory } from '@/stores/useGlobalSessionsStore';
 import { getPinnedSessionKey } from '@/stores/useSessionPinnedStore';
-import type { SessionNode } from './types';
+import type { SessionNode } from '../types';
 
 /**
  * Per-row render extras precomputed once per group render and threaded down to
@@ -127,7 +128,117 @@ export const selectFolderRootNodes = (
         parentID = (parentNode?.session as (SessionNode['session'] & { parentID?: string | null }) | undefined)?.parentID ?? null;
       }
       return true;
-    });
+  });
+};
+
+type FolderHierarchyEntry = {
+  id: string;
+  parentId?: string | null;
+};
+
+/**
+ * Preserve stored folder order while projecting every disconnected or cyclic
+ * component from a deterministic root. The persisted parent links stay as-is.
+ */
+export const normalizeFolderRoots = <T extends FolderHierarchyEntry>(folders: readonly T[]): T[] => {
+  const folderById = new Map(folders.map((folder) => [folder.id, folder]));
+  const childrenByParentId = new Map<string, T[]>();
+  for (const folder of folders) {
+    if (!folder.parentId || !folderById.has(folder.parentId)) continue;
+    const children = childrenByParentId.get(folder.parentId) ?? [];
+    children.push(folder);
+    childrenByParentId.set(folder.parentId, children);
+  }
+
+  const visited = new Set<string>();
+  const roots: T[] = [];
+  const addRoot = (folder: T): void => {
+    if (visited.has(folder.id)) return;
+    roots.push(folder);
+    const stack = [folder.id];
+    while (stack.length > 0) {
+      const id = stack.pop();
+      if (!id || visited.has(id)) continue;
+      visited.add(id);
+      for (const child of childrenByParentId.get(id) ?? []) stack.push(child.id);
+    }
+  };
+
+  folders.forEach((folder) => {
+    if (!folder.parentId || !folderById.has(folder.parentId)) addRoot(folder);
+  });
+  folders.forEach(addRoot);
+  return roots;
+};
+
+type FolderProjectionEntry = FolderHierarchyEntry & {
+  name: string;
+  nodeCount: number;
+};
+
+type FolderProjectionOptions = {
+  archivedBucket: boolean;
+  searchQuery: string;
+};
+
+export const selectFolderIdsForProjection = (
+  entries: readonly FolderProjectionEntry[],
+  options: FolderProjectionOptions,
+): Set<string> => {
+  const entryById = new Map(entries.map((entry) => [entry.id, entry]));
+  const childIdsByParentId = new Map<string, string[]>();
+  const malformedIds = new Set<string>();
+  for (const entry of entries) {
+    if (entry.parentId && !entryById.has(entry.parentId)) {
+      malformedIds.add(entry.id);
+      continue;
+    }
+    if (entry.parentId) {
+      const children = childIdsByParentId.get(entry.parentId) ?? [];
+      children.push(entry.id);
+      childIdsByParentId.set(entry.parentId, children);
+    }
+
+    const visitedParents = new Set<string>();
+    let currentId: string | null | undefined = entry.id;
+    while (currentId) {
+      if (visitedParents.has(currentId)) {
+        malformedIds.add(entry.id);
+        break;
+      }
+      visitedParents.add(currentId);
+      currentId = entryById.get(currentId)?.parentId;
+    }
+  }
+
+  const keptIds = new Set<string>();
+  const visitingIds = new Set<string>();
+  const shouldKeep = (folderId: string): boolean => {
+    if (keptIds.has(folderId)) return true;
+    if (visitingIds.has(folderId)) return false;
+
+    const entry = entryById.get(folderId);
+    if (!entry) return false;
+    visitingIds.add(folderId);
+
+    let keep = malformedIds.has(folderId);
+    if (!keep && options.archivedBucket && entry.nodeCount === 0) {
+      // Preserve the archived empty-folder rule: search does not make an
+      // empty folder visible unless a descendant has archived content.
+      keep = (childIdsByParentId.get(folderId) ?? []).some(shouldKeep);
+    } else {
+      if (!keep && !options.searchQuery) keep = true;
+      if (!keep && (entry.nodeCount > 0 || matchesRankQuery([entry.name], options.searchQuery))) keep = true;
+      if (!keep) keep = (childIdsByParentId.get(folderId) ?? []).some(shouldKeep);
+    }
+
+    visitingIds.delete(folderId);
+    if (keep) keptIds.add(folderId);
+    return keep;
+  };
+
+  entries.forEach((entry) => shouldKeep(entry.id));
+  return new Set(entries.filter((entry) => keptIds.has(entry.id)).map((entry) => entry.id));
 };
 
 const sessionObjectVersions = new WeakMap<object, number>();
diff --git a/packages/ui/src/components/session/sidebar/sessionOwnership.test.ts b/packages/ui/src/components/session/sidebar/sessions/sessionOwnership.test.ts
similarity index 100%
rename from packages/ui/src/components/session/sidebar/sessionOwnership.test.ts
rename to packages/ui/src/components/session/sidebar/sessions/sessionOwnership.test.ts
diff --git a/packages/ui/src/components/session/sidebar/sessionOwnership.ts b/packages/ui/src/components/session/sidebar/sessions/sessionOwnership.ts
similarity index 100%
rename from packages/ui/src/components/session/sidebar/sessionOwnership.ts
rename to packages/ui/src/components/session/sidebar/sessions/sessionOwnership.ts
diff --git a/packages/ui/src/components/session/sidebar/sessions/useExpandedParents.test.tsx b/packages/ui/src/components/session/sidebar/sessions/useExpandedParents.test.tsx
new file mode 100644
index 00000000..d014ab19
--- /dev/null
+++ b/packages/ui/src/components/session/sidebar/sessions/useExpandedParents.test.tsx
@@ -0,0 +1,92 @@
+import { describe, expect, test } from 'bun:test';
+import React, { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { SESSION_EXPANDED_STORAGE_KEY, useExpandedParents } from './useExpandedParents';
+import { installHookTestDom } from '../test-utils/testDom';
+
+const createStorage = (initial: string | null = null, failWrites = false): Storage => {
+  const values = new Map<string, string>();
+  if (initial !== null) values.set(SESSION_EXPANDED_STORAGE_KEY, initial);
+  return {
+    getItem: (key) => values.get(key) ?? null,
+    setItem: (key, value) => {
+      if (failWrites) throw new Error('write failed');
+      values.set(key, value);
+    },
+    removeItem: (key) => { values.delete(key); },
+    clear: () => values.clear(),
+    key: (index) => [...values.keys()][index] ?? null,
+    get length() { return values.size; },
+  };
+};
+
+type ExpandedParentsCapture = { value?: ReturnType<typeof useExpandedParents> };
+
+const mountHook = async (storage: Storage) => {
+  const dom = installHookTestDom(storage);
+  const root = createRoot(dom.container);
+  const capture: ExpandedParentsCapture = {};
+  const Harness = () => {
+    capture.value = useExpandedParents();
+    return null;
+  };
+  await act(async () => root.render(React.createElement(Harness)));
+  return { capture, root, dom };
+};
+
+describe('parent expansion persistence', () => {
+  test('hydrates the complete v3 set and preserves unknown/context-isolated entries when toggling', async () => {
+    const initial = [
+      'project:active:parent-a',
+      'project:archived:parent-b',
+      'recent:active:parent-a',
+      'unknown:future:value',
+    ];
+    const storage = createStorage(JSON.stringify(initial));
+    const mounted = await mountHook(storage);
+    try {
+      expect([...mounted.capture.value!.expandedParents]).toEqual(initial);
+      await act(async () => mounted.capture.value!.toggleParent('project:active:parent-a'));
+      expect(JSON.parse(storage.getItem(SESSION_EXPANDED_STORAGE_KEY) ?? 'null')).toEqual(initial.slice(1));
+    } finally {
+      await act(async () => mounted.root.unmount());
+      mounted.dom.restore();
+    }
+  });
+
+  test('does not write missing or malformed storage during initialization', async () => {
+    for (const initial of [null, '{malformed', JSON.stringify(['valid', 2])]) {
+      const storage = createStorage(initial);
+      const mounted = await mountHook(storage);
+      try {
+        expect(mounted.capture.value!.expandedParents.size).toBe(0);
+        expect(storage.getItem(SESSION_EXPANDED_STORAGE_KEY)).toBe(initial);
+      } finally {
+        await act(async () => mounted.root.unmount());
+        mounted.dom.restore();
+      }
+    }
+  });
+
+  test('leaves durable data unchanged on write failure and rereads it on remount', async () => {
+    const raw = JSON.stringify(['recent:active:parent-a']);
+    const storage = createStorage(raw, true);
+    const first = await mountHook(storage);
+    await act(async () => first.capture.value!.toggleParent('project:active:parent-b'));
+    expect(first.capture.value!.expandedParents).toEqual(new Set([
+      'recent:active:parent-a',
+      'project:active:parent-b',
+    ]));
+    expect(storage.getItem(SESSION_EXPANDED_STORAGE_KEY)).toBe(raw);
+    await act(async () => first.root.unmount());
+    first.dom.restore();
+
+    const second = await mountHook(storage);
+    try {
+      expect(second.capture.value!.expandedParents).toEqual(new Set(['recent:active:parent-a']));
+    } finally {
+      await act(async () => second.root.unmount());
+      second.dom.restore();
+    }
+  });
+});
diff --git a/packages/ui/src/components/session/sidebar/sessions/useExpandedParents.ts b/packages/ui/src/components/session/sidebar/sessions/useExpandedParents.ts
new file mode 100644
index 00000000..d3755220
--- /dev/null
+++ b/packages/ui/src/components/session/sidebar/sessions/useExpandedParents.ts
@@ -0,0 +1,37 @@
+import React from 'react';
+import { z } from 'zod';
+import { toggleExpandedParentKey } from '../utils';
+
+export const SESSION_EXPANDED_STORAGE_KEY = 'oc.sessions.expandedParents.v3';
+
+const expandedParentsSchema = z.array(z.string());
+
+const readExpandedParents = (): Set<string> => {
+  try {
+    const raw = globalThis.localStorage.getItem(SESSION_EXPANDED_STORAGE_KEY);
+    if (raw === null) return new Set();
+    const parsed = expandedParentsSchema.safeParse(JSON.parse(raw));
+    return parsed.success ? new Set(parsed.data) : new Set();
+  } catch {
+    return new Set();
+  }
+};
+
+export const useExpandedParents = () => {
+  const [expandedParents, setExpandedParents] = React.useState(readExpandedParents);
+  const expandedParentsRef = React.useRef(expandedParents);
+  expandedParentsRef.current = expandedParents;
+
+  const toggleParent = React.useCallback((key: string) => {
+    const next = toggleExpandedParentKey(expandedParentsRef.current, key);
+    expandedParentsRef.current = next;
+    setExpandedParents(next);
+    try {
+      globalThis.localStorage.setItem(SESSION_EXPANDED_STORAGE_KEY, JSON.stringify([...next]));
+    } catch {
+      // The mounted list keeps the user's change; a remount rereads durable storage.
+    }
+  }, []);
+
+  return { expandedParents, toggleParent };
+};
diff --git a/packages/ui/src/components/session/sidebar/sessions/useSessionActions.test.tsx b/packages/ui/src/components/session/sidebar/sessions/useSessionActions.test.tsx
new file mode 100644
index 00000000..9f8c9042
--- /dev/null
+++ b/packages/ui/src/components/session/sidebar/sessions/useSessionActions.test.tsx
@@ -0,0 +1,145 @@
+import { describe, expect, test } from 'bun:test';
+import React, { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import type { Session } from '@opencode-ai/sdk/v2';
+import { useSessionUIStore } from '@/sync/session-ui-store';
+import { I18nProvider } from '@/lib/i18n';
+import type { DeleteSessionConfirmState } from '../shell/ConfirmDialogs';
+import { useSessionActions } from './useSessionActions';
+import { installHookTestDom } from '../test-utils/testDom';
+
+const session = (id: string): Session => ({
+  id,
+  slug: id,
+  projectID: 'project',
+  title: id,
+  version: '1',
+  directory: '/workspace',
+  time: { created: 1, updated: 1 },
+});
+
+describe('explicit session row behavior', () => {
+  test('shares edit and menu state across project and Recent render contexts', async () => {
+    const dom = installHookTestDom();
+    const root = createRoot(dom.container);
+    type SharedRowCapture = {
+      actions?: ReturnType<typeof useSessionActions>;
+      editingId?: string | null;
+      editTitle?: string;
+      menuKey?: string | null;
+      setMenuKey?: (key: string | null) => void;
+      project?: { editingId: string | null; editTitle: string; menuKey: string | null };
+      recent?: { editingId: string | null; editTitle: string; menuKey: string | null };
+    };
+    const capture: SharedRowCapture = {};
+    const RowConsumer = ({ context, editingId, editTitle, menuKey }: {
+      context: 'project' | 'recent';
+      editingId: string | null;
+      editTitle: string;
+      menuKey: string | null;
+    }) => {
+      capture[context] = { editingId, editTitle, menuKey };
+      return null;
+    };
+    const Harness = () => {
+      const [editingId, setEditingId] = React.useState<string | null>(null);
+      const [editTitle, setEditTitle] = React.useState('');
+      const [menuKey, setMenuKey] = React.useState<string | null>(null);
+      const [confirmation, setConfirmation] = React.useState<DeleteSessionConfirmState>(null);
+      capture.actions = useSessionActions({
+        mobileVariant: false,
+        allowReselect: false,
+        isSessionSearchOpen: false,
+        sessionSearchQuery: '',
+        setSessionSearchQuery: () => undefined,
+        setIsSessionSearchOpen: () => undefined,
+        descendantIds: [],
+        showDeletionDialog: true,
+        setDeleteSessionConfirm: setConfirmation,
+        deleteSessionConfirm: confirmation,
+        editingId,
+        setEditingId,
+        editTitle,
+        setEditTitle,
+        copiedSessionId: null,
+        setCopiedSessionId: () => undefined,
+      });
+      capture.editingId = editingId;
+      capture.editTitle = editTitle;
+      capture.menuKey = menuKey;
+      capture.setMenuKey = setMenuKey;
+      return React.createElement(React.Fragment, null,
+        React.createElement(RowConsumer, { context: 'project', editingId, editTitle, menuKey }),
+        React.createElement(RowConsumer, { context: 'recent', editingId, editTitle, menuKey }),
+      );
+    };
+    try {
+      await act(async () => root.render(React.createElement(I18nProvider, null, React.createElement(Harness))));
+      await act(async () => capture.actions!.handleSessionDoubleClick('same-session', 'Shared title'));
+      expect(capture.editingId).toBe('same-session');
+      expect(capture.editTitle).toBe('Shared title');
+      expect(capture.project).toEqual(capture.recent);
+      await act(async () => capture.setMenuKey!('recent:active:same-session'));
+      expect(capture.menuKey).toBe('recent:active:same-session');
+      expect(capture.project).toEqual(capture.recent);
+    } finally {
+      await act(async () => root.unmount());
+      dom.restore();
+    }
+  });
+
+  test('executes the immutable descendant snapshot captured when confirmation opens', async () => {
+    const dom = installHookTestDom();
+    const root = createRoot(dom.container);
+    const original = useSessionUIStore.getState();
+    const archivedCalls: string[][] = [];
+    useSessionUIStore.setState({
+      archiveSessions: async (ids) => {
+        archivedCalls.push(ids);
+        return { archivedIds: ids, failedIds: [] };
+      },
+    });
+    const descendants = ['child-a', 'child-b'];
+    type ConfirmationCapture = {
+      actions?: ReturnType<typeof useSessionActions>;
+      confirmation?: DeleteSessionConfirmState;
+    };
+    const capture: ConfirmationCapture = {};
+    const Harness = () => {
+      const [editingId, setEditingId] = React.useState<string | null>(null);
+      const [editTitle, setEditTitle] = React.useState('');
+      const [confirmation, setConfirmation] = React.useState<DeleteSessionConfirmState>(null);
+      capture.confirmation = confirmation;
+      capture.actions = useSessionActions({
+        mobileVariant: false,
+        allowReselect: false,
+        isSessionSearchOpen: false,
+        sessionSearchQuery: '',
+        setSessionSearchQuery: () => undefined,
+        setIsSessionSearchOpen: () => undefined,
+        descendantIds: descendants,
+        showDeletionDialog: true,
+        setDeleteSessionConfirm: setConfirmation,
+        deleteSessionConfirm: confirmation,
+        editingId,
+        setEditingId,
+        editTitle,
+        setEditTitle,
+        copiedSessionId: null,
+        setCopiedSessionId: () => undefined,
+      });
+      return null;
+    };
+    try {
+      await act(async () => root.render(React.createElement(I18nProvider, null, React.createElement(Harness))));
+      await act(async () => capture.actions!.handleDeleteSession(session('root')));
+      expect(capture.confirmation?.descendantIds).toEqual(['child-a', 'child-b']);
+      await act(async () => capture.actions!.confirmDeleteSession());
+      expect(archivedCalls).toEqual([['root', 'child-a', 'child-b']]);
+    } finally {
+      await act(async () => root.unmount());
+      useSessionUIStore.setState({ archiveSessions: original.archiveSessions });
+      dom.restore();
+    }
+  });
+});
diff --git a/packages/ui/src/components/session/sidebar/hooks/useSessionActions.ts b/packages/ui/src/components/session/sidebar/sessions/useSessionActions.ts
similarity index 63%
rename from packages/ui/src/components/session/sidebar/hooks/useSessionActions.ts
rename to packages/ui/src/components/session/sidebar/sessions/useSessionActions.ts
index a449224e..8204b7a6 100644
--- a/packages/ui/src/components/session/sidebar/hooks/useSessionActions.ts
+++ b/packages/ui/src/components/session/sidebar/sessions/useSessionActions.ts
@@ -3,25 +3,24 @@ 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';
 
-type DeleteSessionConfirmSetter = React.Dispatch<React.SetStateAction<{
-  session: Session;
-  descendantCount: number;
-  descendantIds: string[];
-  archivedBucket: boolean;
-} | null>>;
-
-type DeleteSessionSource = {
+export type DeleteSessionSource = {
   archivedBucket?: boolean;
   hardDelete?: boolean;
   /** Bypass the confirmation dialog and delete/archive immediately. */
   skipConfirm?: boolean;
 };
 
+export type DeleteSessionConfirmState = {
+  session: Session;
+  descendantCount: number;
+  descendantIds: string[];
+  archivedBucket: boolean;
+} | null;
+
 type Args = {
   mobileVariant: boolean;
   allowReselect: boolean;
@@ -30,31 +29,54 @@ 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>;
-  shareSession: (id: string) => Promise<Session | null>;
-  unshareSession: (id: string) => Promise<Session | null>;
-  deleteSession: (id: string) => Promise<boolean>;
-  deleteSessions: (ids: string[]) => Promise<{ deletedIds: string[]; failedIds: string[] }>;
-  archiveSession: (id: string) => Promise<boolean>;
-  archiveSessions: (ids: string[]) => Promise<{ archivedIds: string[]; failedIds: string[] }>;
-  unarchiveSession: (id: string) => Promise<boolean>;
-  childrenMap: Map<string, Session[]>;
+  descendantIds: readonly string[];
   showDeletionDialog: boolean;
-  setDeleteSessionConfirm: DeleteSessionConfirmSetter;
-  deleteSessionConfirm: { session: Session; descendantCount: number; descendantIds: string[]; archivedBucket: boolean } | null;
+  setDeleteSessionConfirm: (value: DeleteSessionConfirmState) => void;
+  deleteSessionConfirm: DeleteSessionConfirmState;
   setEditingId: (id: string | null) => void;
   setEditTitle: (value: string) => void;
   editingId: string | null;
   editTitle: string;
+  copiedSessionId: string | null;
+  setCopiedSessionId: (sessionId: string | null) => void;
 };
 
 export const useSessionActions = (args: Args) => {
   const { t } = useI18n();
-  const [copiedSessionId, setCopiedSessionId] = React.useState<string | null>(null);
   const copyTimeout = React.useRef<number | null>(null);
+  const editingIdRef = React.useRef(args.editingId);
+  const editTitleRef = React.useRef(args.editTitle);
+  const deleteSessionConfirmRef = React.useRef(args.deleteSessionConfirm);
+  editingIdRef.current = args.editingId;
+  editTitleRef.current = args.editTitle;
+  deleteSessionConfirmRef.current = args.deleteSessionConfirm;
+
+  const setSessionSwitcherOpen = useUIStore((state) => state.setSessionSwitcherOpen);
+  const setCurrentSession = useSessionUIStore((state) => state.setCurrentSession);
+  const updateSessionTitle = useSessionUIStore((state) => state.updateSessionTitle);
+  const shareSession = useSessionUIStore((state) => state.shareSession);
+  const unshareSession = useSessionUIStore((state) => state.unshareSession);
+  const deleteSession = useSessionUIStore((state) => state.deleteSession);
+  const deleteSessions = useSessionUIStore((state) => state.deleteSessions);
+  const archiveSession = useSessionUIStore((state) => state.archiveSession);
+  const archiveSessions = useSessionUIStore((state) => state.archiveSessions);
+  const unarchiveSession = useSessionUIStore((state) => state.unarchiveSession);
+
+  const {
+    mobileVariant,
+    allowReselect,
+    onSessionSelected,
+    isSessionSearchOpen,
+    sessionSearchQuery,
+    setSessionSearchQuery,
+    setIsSessionSearchOpen,
+    descendantIds,
+    showDeletionDialog,
+    setDeleteSessionConfirm,
+    setEditingId,
+    setEditTitle,
+    setCopiedSessionId,
+  } = args;
 
   React.useEffect(() => {
     return () => {
@@ -71,52 +93,52 @@ export const useSessionActions = (args: Args) => {
       // the session is already the current one (no store transition fires).
       useUIStore.getState().closeMainSurfaces();
       const resetSessionSearch = () => {
-        if (!args.isSessionSearchOpen && args.sessionSearchQuery.length === 0) {
+        if (!isSessionSearchOpen && sessionSearchQuery.length === 0) {
           return;
         }
-        args.setSessionSearchQuery('');
-        args.setIsSessionSearchOpen(false);
+        setSessionSearchQuery('');
+        setIsSessionSearchOpen(false);
       };
 
-      if (args.mobileVariant) {
-        args.setActiveMainTab('chat');
-        args.setSessionSwitcherOpen(false);
+      if (mobileVariant) {
+        setSessionSwitcherOpen(false);
       }
 
       if (sessionId === useSessionUIStore.getState().currentSessionId) {
-        if (args.allowReselect) {
-          args.onSessionSelected?.(sessionId);
+        if (allowReselect) {
+          onSessionSelected?.(sessionId);
         }
         resetSessionSearch();
         return;
       }
       streamPerfMark('navigation.session_state_set');
-      args.setCurrentSession(sessionId, sessionDirectory ?? null);
-      args.onSessionSelected?.(sessionId);
+      setCurrentSession(sessionId, sessionDirectory ?? null);
+      onSessionSelected?.(sessionId);
       resetSessionSearch();
     },
-    [args],
+    [allowReselect, isSessionSearchOpen, mobileVariant, onSessionSelected, sessionSearchQuery, setCurrentSession, setIsSessionSearchOpen, setSessionSearchQuery, setSessionSwitcherOpen],
   );
 
   const handleSessionDoubleClick = React.useCallback((sessionId: string, sessionTitle: string) => {
-    args.setEditingId(sessionId);
-    args.setEditTitle(sessionTitle);
-  }, [args]);
+    setEditingId(sessionId);
+    setEditTitle(sessionTitle);
+  }, [setEditTitle, setEditingId]);
 
   const handleSaveEdit = React.useCallback(async (titleOverride?: string) => {
-    if (!args.editingId) return;
-    const trimmed = (titleOverride ?? args.editTitle).trim();
+    const editingId = editingIdRef.current;
+    if (!editingId) return;
+    const trimmed = (titleOverride ?? editTitleRef.current).trim();
     if (trimmed) {
-      await args.updateSessionTitle(args.editingId, trimmed);
+      await updateSessionTitle(editingId, trimmed);
     }
-    args.setEditingId(null);
-    args.setEditTitle('');
-  }, [args]);
+    setEditingId(null);
+    setEditTitle('');
+  }, [setEditTitle, setEditingId, updateSessionTitle]);
 
   const handleCancelEdit = React.useCallback(() => {
-    args.setEditingId(null);
-    args.setEditTitle('');
-  }, [args]);
+    setEditingId(null);
+    setEditTitle('');
+  }, [setEditTitle, setEditingId]);
 
   const copyShareUrl = React.useCallback(async (url: string, sessionId: string): Promise<boolean> => {
     try {
@@ -132,10 +154,10 @@ export const useSessionActions = (args: Args) => {
     } catch {
       return false;
     }
-  }, []);
+  }, [setCopiedSessionId]);
 
   const handleShareSession = React.useCallback(async (session: Session) => {
-    const result = await args.shareSession(session.id);
+    const result = await shareSession(session.id);
     if (!result?.share?.url) {
       toast.error(t('sessions.sidebar.session.share.error'));
       return;
@@ -146,7 +168,7 @@ export const useSessionActions = (args: Args) => {
         ? 'sessions.sidebar.session.share.successDescription'
         : 'sessions.sidebar.session.share.copyUrlError'),
     });
-  }, [args, copyShareUrl, t]);
+  }, [copyShareUrl, shareSession, t]);
 
   const handleCopyShareUrl = React.useCallback((url: string, sessionId: string) => {
     void copyShareUrl(url, sessionId).then((copied) => {
@@ -167,37 +189,13 @@ export const useSessionActions = (args: Args) => {
   }, [t]);
 
   const handleUnshareSession = React.useCallback(async (sessionId: string) => {
-    const result = await args.unshareSession(sessionId);
+    const result = await unshareSession(sessionId);
     if (result) {
       toast.success(t('sessions.sidebar.session.unshare.success'));
     } else {
       toast.error(t('sessions.sidebar.session.unshare.error'));
     }
-  }, [args, t]);
-
-  const collectDescendants = React.useCallback((sessionId: string): Session[] => {
-    const collected: Session[] = [];
-    const visit = (id: string) => {
-      const children = args.childrenMap.get(id) ?? [];
-      children.forEach((child) => {
-        collected.push(child);
-        visit(child.id);
-      });
-    };
-    visit(sessionId);
-    return collected;
-  }, [args.childrenMap]);
-
-  // Archive cascades to subagents that aren't already archived; hard-delete
-  // cascades to every descendant unconditionally. We collect once and filter
-  // per-action so the dialog count and the executed ID list always agree.
-  const filterDescendantsForAction = React.useCallback(
-    (descendants: Session[], shouldHardDelete: boolean): Session[] => {
-      if (shouldHardDelete) return descendants;
-      return descendants.filter((s) => !s.time?.archived);
-    },
-    [],
-  );
+  }, [t, unshareSession]);
 
   const executeDeleteSession = React.useCallback(
     async (
@@ -209,12 +207,12 @@ export const useSessionActions = (args: Args) => {
       // Use the snapshot taken when the dialog opened (if any) so the
       // executed list matches what the user was told. Fall back to a fresh
       // collection for direct-execute (no-dialog) callers.
-      const descendantIds = precomputed?.descendantIds
-        ?? filterDescendantsForAction(collectDescendants(session.id), shouldHardDelete).map((s) => s.id);
-      if (descendantIds.length === 0) {
+      const effectiveDescendantIds = precomputed?.descendantIds
+        ?? descendantIds;
+      if (effectiveDescendantIds.length === 0) {
         const success = shouldHardDelete
-          ? await args.deleteSession(session.id)
-          : await args.archiveSession(session.id);
+          ? await deleteSession(session.id)
+          : await archiveSession(session.id);
         if (success) {
           toast.success(shouldHardDelete
             ? t('sessions.sidebar.session.delete.success')
@@ -227,12 +225,12 @@ export const useSessionActions = (args: Args) => {
         return;
       }
 
-      const ids = [session.id, ...descendantIds];
+      const ids = [session.id, ...effectiveDescendantIds];
       if (shouldHardDelete) {
         // Delete root + all descendants individually. If the server
         // cascade-deletes some children before we get to them, 404 is
         // treated as success by deleteSession and no rollback occurs.
-        const { deletedIds, failedIds } = await args.deleteSessions(ids);
+        const { deletedIds, failedIds } = await deleteSessions(ids);
         if (failedIds.length === 0) {
           const totalDeleted = deletedIds.length;
           toast.success(totalDeleted === 1
@@ -244,7 +242,7 @@ export const useSessionActions = (args: Args) => {
         return;
       }
 
-      const { archivedIds, failedIds } = await args.archiveSessions(ids);
+      const { archivedIds, failedIds } = await archiveSessions(ids);
       if (archivedIds.length > 0) {
         toast.success(archivedIds.length === 1
           ? t('sessions.sidebar.bulkActions.archivedSingle', { count: archivedIds.length })
@@ -256,51 +254,48 @@ export const useSessionActions = (args: Args) => {
           : t('sessions.sidebar.bulkActions.failedArchivePlural', { count: failedIds.length }));
       }
     },
-    [args, collectDescendants, filterDescendantsForAction, t],
+    [archiveSession, archiveSessions, deleteSession, deleteSessions, descendantIds, t],
   );
 
   const handleDeleteSession = React.useCallback(
     (session: Session, source?: DeleteSessionSource) => {
       const shouldHardDelete = source?.archivedBucket === true || source?.hardDelete === true;
-      const effectiveDescendantIds = filterDescendantsForAction(
-        collectDescendants(session.id),
-        shouldHardDelete,
-      ).map((s) => s.id);
-      if (!args.showDeletionDialog || source?.skipConfirm === true) {
+      const effectiveDescendantIds = [...descendantIds];
+      if (!showDeletionDialog || source?.skipConfirm === true) {
         void executeDeleteSession(session, source, { descendantIds: effectiveDescendantIds });
         return;
       }
-      args.setDeleteSessionConfirm({
+      setDeleteSessionConfirm({
         session,
         descendantCount: effectiveDescendantIds.length,
         descendantIds: effectiveDescendantIds,
         archivedBucket: shouldHardDelete,
       });
     },
-    [args, collectDescendants, executeDeleteSession, filterDescendantsForAction],
+    [descendantIds, executeDeleteSession, setDeleteSessionConfirm, showDeletionDialog],
   );
 
   const confirmDeleteSession = React.useCallback(async () => {
-    if (!args.deleteSessionConfirm) return;
-    const { session, archivedBucket, descendantIds } = args.deleteSessionConfirm;
-    args.setDeleteSessionConfirm(null);
+    const deleteSessionConfirm = deleteSessionConfirmRef.current;
+    if (!deleteSessionConfirm) return;
+    const { session, archivedBucket, descendantIds } = deleteSessionConfirm;
+    setDeleteSessionConfirm(null);
     await executeDeleteSession(session, { archivedBucket }, { descendantIds });
-  }, [args, executeDeleteSession]);
+  }, [executeDeleteSession, setDeleteSessionConfirm]);
 
   const handleRestoreSession = React.useCallback(
     async (session: Session) => {
-      const success = await args.unarchiveSession(session.id);
+      const success = await unarchiveSession(session.id);
       if (success) {
         toast.success(t('sessions.sidebar.session.restore.success'));
       } else {
         toast.error(t('sessions.sidebar.session.restore.error'));
       }
     },
-    [args, t],
+    [t, unarchiveSession],
   );
 
-  return {
-    copiedSessionId,
+  return React.useMemo(() => ({
     handleSessionSelect,
     handleSessionDoubleClick,
     handleSaveEdit,
@@ -312,5 +307,7 @@ export const useSessionActions = (args: Args) => {
     handleDeleteSession,
     handleRestoreSession,
     confirmDeleteSession,
-  };
+  }), [handleCancelEdit, handleCopySessionId, handleCopyShareUrl, handleDeleteSession,
+    handleRestoreSession, handleSaveEdit, handleSessionDoubleClick, handleSessionSelect, handleShareSession,
+    handleUnshareSession, confirmDeleteSession]);
 };
diff --git a/packages/ui/src/components/session/sidebar/ConfirmDialogs.tsx b/packages/ui/src/components/session/sidebar/shell/ConfirmDialogs.tsx
similarity index 100%
rename from packages/ui/src/components/session/sidebar/ConfirmDialogs.tsx
rename to packages/ui/src/components/session/sidebar/shell/ConfirmDialogs.tsx
diff --git a/packages/ui/src/components/session/sidebar/SidebarFooter.tsx b/packages/ui/src/components/session/sidebar/shell/SidebarFooter.tsx
similarity index 100%
rename from packages/ui/src/components/session/sidebar/SidebarFooter.tsx
rename to packages/ui/src/components/session/sidebar/shell/SidebarFooter.tsx
diff --git a/packages/ui/src/components/session/sidebar/SidebarHeader.tsx b/packages/ui/src/components/session/sidebar/shell/SidebarHeader.tsx
similarity index 98%
rename from packages/ui/src/components/session/sidebar/SidebarHeader.tsx
rename to packages/ui/src/components/session/sidebar/shell/SidebarHeader.tsx
index e36e1a2b..90bd777e 100644
--- a/packages/ui/src/components/session/sidebar/SidebarHeader.tsx
+++ b/packages/ui/src/components/session/sidebar/shell/SidebarHeader.tsx
@@ -12,6 +12,7 @@ import { cn } from '@/lib/utils';
 import { Icon } from "@/components/icon/Icon";
 import { ArrowsMerge } from '@/components/icons/ArrowsMerge';
 import { useSessionDisplayStore } from '@/stores/useSessionDisplayStore';
+import { useSessionMultiSelectStore } from '@/stores/useSessionMultiSelectStore';
 import { useI18n } from '@/lib/i18n';
 import { updateDesktopSettings } from '@/lib/persistence';
 
@@ -35,8 +36,6 @@ type Props = {
   searchMatchCount: number;
   collapseAllProjects: () => void;
   expandAllProjects: () => void;
-  selectionModeEnabled: boolean;
-  onToggleSelectionMode: () => void;
 };
 
 export function SidebarHeader(props: Props): React.ReactNode {
@@ -61,10 +60,11 @@ export function SidebarHeader(props: Props): React.ReactNode {
     searchMatchCount,
     collapseAllProjects,
     expandAllProjects,
-    selectionModeEnabled,
-    onToggleSelectionMode,
   } = props;
 
+  const selectionModeEnabled = useSessionMultiSelectStore((state) => state.enabled);
+  const toggleSelectionMode = useSessionMultiSelectStore((state) => state.toggleMode);
+
   const showRecentSection = useSessionDisplayStore((state) => state.showRecentSection);
   const toggleRecentSection = useSessionDisplayStore((state) => state.toggleRecentSection);
   const projectSortOrder = useSessionDisplayStore((state) => state.projectSortOrder);
@@ -168,7 +168,7 @@ export function SidebarHeader(props: Props): React.ReactNode {
               <TooltipTrigger asChild>
                 <button
                   type="button"
-                  onClick={onToggleSelectionMode}
+                  onClick={toggleSelectionMode}
                   className={cn(headerActionButtonClass, 'text-muted-foreground hover:text-foreground hover:bg-transparent', selectionModeEnabled && 'bg-interactive-hover text-primary')}
                   aria-label={selectionModeEnabled
                     ? t('sessions.sidebar.header.actions.exitSelection')
diff --git a/packages/ui/src/components/session/sidebar/SidebarNav.tsx b/packages/ui/src/components/session/sidebar/shell/SidebarNav.tsx
similarity index 100%
rename from packages/ui/src/components/session/sidebar/SidebarNav.tsx
rename to packages/ui/src/components/session/sidebar/shell/SidebarNav.tsx
diff --git a/packages/ui/src/components/session/sidebar/hooks/useSessionSearchEffects.ts b/packages/ui/src/components/session/sidebar/shell/useSessionSearchEffects.ts
similarity index 100%
rename from packages/ui/src/components/session/sidebar/hooks/useSessionSearchEffects.ts
rename to packages/ui/src/components/session/sidebar/shell/useSessionSearchEffects.ts
diff --git a/packages/ui/src/components/session/sidebar/hooks/useSwitcherItems.ts b/packages/ui/src/components/session/sidebar/shell/useSwitcherItems.ts
similarity index 100%
rename from packages/ui/src/components/session/sidebar/hooks/useSwitcherItems.ts
rename to packages/ui/src/components/session/sidebar/shell/useSwitcherItems.ts
diff --git a/packages/ui/src/components/session/sidebar/sidebarSessionSources.test.ts b/packages/ui/src/components/session/sidebar/sidebarSessionSources.test.ts
deleted file mode 100644
index e19213f7..00000000
--- a/packages/ui/src/components/session/sidebar/sidebarSessionSources.test.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { describe, expect, test } from 'bun:test';
-import type { Session } from '@opencode-ai/sdk/v2';
-
-import { mergeSidebarSessionSources } from './sidebarSessionSources';
-
-const session = (id: string, title: string): Session => ({
-  id,
-  slug: id,
-  title,
-  directory: `/home/.config/openchamber/chats/2026-08-21/${id}`,
-  projectID: 'managed-chats',
-  version: '1',
-  time: { created: 1, updated: 1 },
-});
-
-describe('sidebar session source merge', () => {
-  test('shows one row when the same cached global chat also exists live', () => {
-    const live = session('session-a', 'Live title');
-    const cached = session('session-a', 'Cached title');
-
-    expect(mergeSidebarSessionSources([cached], [live])).toEqual([cached]);
-  });
-
-  test('prefers global authority over live fallback', () => {
-    const global = session('session-a', 'Global title');
-    expect(mergeSidebarSessionSources([global], [session('session-a', 'Live title')])).toEqual([global]);
-  });
-});
diff --git a/packages/ui/src/components/session/sidebar/sidebarSessionSources.ts b/packages/ui/src/components/session/sidebar/sidebarSessionSources.ts
deleted file mode 100644
index 41e22d04..00000000
--- a/packages/ui/src/components/session/sidebar/sidebarSessionSources.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { Session } from '@opencode-ai/sdk/v2';
-
-export function mergeSidebarSessionSources(
-  globalSessions: readonly Session[],
-  liveSessions: readonly Session[],
-): Session[] {
-  const merged = [...globalSessions];
-  const seenIds = new Set(merged.map((session) => session.id));
-  const appendMissing = (sessions: readonly Session[]) => {
-    sessions.forEach((session) => {
-      if (seenIds.has(session.id)) return;
-      seenIds.add(session.id);
-      merged.push(session);
-    });
-  };
-
-  appendMissing(liveSessions);
-  return merged;
-}
diff --git a/packages/ui/src/components/session/sidebar/test-utils/testDom.ts b/packages/ui/src/components/session/sidebar/test-utils/testDom.ts
new file mode 100644
index 00000000..f3ceaa0b
--- /dev/null
+++ b/packages/ui/src/components/session/sidebar/test-utils/testDom.ts
@@ -0,0 +1,99 @@
+class ElementStub implements Partial<Element> {
+  nodeType = 1;
+}
+
+type DocumentStub = {
+  nodeType: number;
+  defaultView: typeof globalThis;
+  activeElement: null;
+  addEventListener: () => void;
+  removeEventListener: () => void;
+  querySelectorAll: () => never[];
+  createElement: (tagName: string) => Element;
+  createElementNS: (namespace: string, tagName: string) => Element;
+  createTextNode: (text: string) => Text;
+  documentElement?: Element;
+  body?: Element;
+};
+
+type GlobalValue = typeof globalThis | typeof ElementStub | DocumentStub | Storage | boolean;
+
+export const installHookTestDom = (storage?: Storage) => {
+  const descriptors = new Map<string, PropertyDescriptor | undefined>();
+  const setGlobal = (name: string, value: GlobalValue) => {
+    descriptors.set(name, Object.getOwnPropertyDescriptor(globalThis, name));
+    Object.defineProperty(globalThis, name, { configurable: true, writable: true, value });
+  };
+  const createElement = (ownerDocument: DocumentStub): Element => {
+    // SAFETY: React only uses these DOM identity, child-list, and listener methods in this test fixture.
+    const element = Object.create(ElementStub.prototype) as Element;
+    Object.assign(element, {
+      nodeType: 1,
+      tagName: 'DIV',
+      nodeName: 'DIV',
+      namespaceURI: 'http://www.w3.org/1999/xhtml',
+      ownerDocument,
+      parentNode: null,
+      parentElement: null,
+      childNodes: [],
+      style: { setProperty: () => undefined, getPropertyValue: () => '' },
+      addEventListener: () => undefined,
+      removeEventListener: () => undefined,
+      appendChild<T extends Node>(child: T): T {
+        // SAFETY: every fixture child is a Node supplied by React's host renderer.
+        (this.childNodes as Node[]).push(child);
+        return child;
+      },
+      insertBefore<T extends Node>(child: T): T {
+        // SAFETY: every fixture child is a Node supplied by React's host renderer.
+        (this.childNodes as Node[]).push(child);
+        return child;
+      },
+      removeChild<T extends Node>(child: T): T {
+        // SAFETY: this fixture stores only Node children from React's host renderer.
+        const children = this.childNodes as Node[];
+        const index = children.indexOf(child);
+        if (index >= 0) children.splice(index, 1);
+        return child;
+      },
+      setAttribute: () => undefined,
+      removeAttribute: () => undefined,
+      getAttribute: () => null,
+      hasAttribute: () => false,
+      contains: () => false,
+      compareDocumentPosition: () => 0,
+    });
+    return element;
+  };
+  const documentStub: DocumentStub = {
+    nodeType: 9,
+    defaultView: globalThis,
+    activeElement: null,
+    addEventListener: () => undefined,
+    removeEventListener: () => undefined,
+    querySelectorAll: () => [],
+    createElement: () => createElement(documentStub),
+    createElementNS: () => createElement(documentStub),
+    // SAFETY: React only checks the text node identity field in this fixture.
+    createTextNode: () => ({ nodeType: 3 } as Text),
+  };
+  // SAFETY: React's test renderer only inspects this fixture's DOM identity fields and listeners.
+  const container = createElement(documentStub);
+  Object.assign(documentStub, { documentElement: container, body: container });
+  setGlobal('document', documentStub);
+  setGlobal('window', globalThis);
+  if (storage) setGlobal('localStorage', storage);
+  setGlobal('Element', ElementStub);
+  setGlobal('HTMLElement', ElementStub);
+  setGlobal('HTMLIFrameElement', ElementStub);
+  setGlobal('IS_REACT_ACT_ENVIRONMENT', true);
+  return {
+    container,
+    restore: () => {
+      for (const [name, descriptor] of descriptors) {
+        if (descriptor) Object.defineProperty(globalThis, name, descriptor);
+        else Reflect.deleteProperty(globalThis, name);
+      }
+    },
+  };
+};
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/OverlayScrollbar.test.tsx b/packages/ui/src/components/ui/OverlayScrollbar.test.tsx
new file mode 100644
index 00000000..39693798
--- /dev/null
+++ b/packages/ui/src/components/ui/OverlayScrollbar.test.tsx
@@ -0,0 +1,285 @@
+import { afterEach, beforeEach, describe, expect, test } from 'bun:test';
+import { Window } from 'happy-dom';
+import React, { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+
+import { OverlayScrollbar } from './OverlayScrollbar';
+
+class TestResizeObserver implements ResizeObserver {
+  static instances: TestResizeObserver[] = [];
+
+  private readonly callback: ResizeObserverCallback;
+  disconnectCount = 0;
+
+  constructor(callback: ResizeObserverCallback) {
+    this.callback = callback;
+    TestResizeObserver.instances.push(this);
+  }
+
+  disconnect(): void {
+    this.disconnectCount += 1;
+  }
+
+  observe(): void {}
+  unobserve(): void {}
+
+  trigger(): void {
+    this.callback([], this);
+  }
+}
+
+describe('OverlayScrollbar', () => {
+  let windowInstance: Window;
+  let host: HTMLDivElement;
+  let scroller: HTMLDivElement;
+  let root: Root;
+  let containerRef: React.RefObject<HTMLElement | null>;
+  let scrollTop: number;
+  let scrollbarCommits: number;
+  let verticalLayoutReads: number;
+  let horizontalLayoutReads: number;
+  let nextFrameId: number;
+  let pendingFrames: Map<number, FrameRequestCallback>;
+
+  const flushFrames = async () => {
+    await act(async () => {
+      const frames = Array.from(pendingFrames.values());
+      pendingFrames.clear();
+      frames.forEach((callback) => callback(0));
+    });
+  };
+
+  const renderScrollbar = async (props: Partial<React.ComponentProps<typeof OverlayScrollbar>> = {}) => {
+    await act(async () => {
+      root.render(
+        <React.Profiler id="overlay-scrollbar" onRender={() => { scrollbarCommits += 1; }}>
+          <OverlayScrollbar
+            containerRef={containerRef}
+            disableHorizontal
+            {...props}
+          />
+        </React.Profiler>,
+      );
+    });
+    await flushFrames();
+  };
+
+  beforeEach(() => {
+    windowInstance = new Window();
+    pendingFrames = new Map();
+    nextFrameId = 1;
+    TestResizeObserver.instances = [];
+
+    Object.assign(globalThis, {
+      window: windowInstance,
+      document: windowInstance.document,
+      HTMLElement: windowInstance.HTMLElement,
+      Element: windowInstance.Element,
+      Node: windowInstance.Node,
+      PointerEvent: windowInstance.PointerEvent,
+      ResizeObserver: TestResizeObserver,
+      IS_REACT_ACT_ENVIRONMENT: true,
+      requestAnimationFrame: (callback: FrameRequestCallback) => {
+        const id = nextFrameId++;
+        pendingFrames.set(id, callback);
+        return id;
+      },
+      cancelAnimationFrame: (id: number) => {
+        pendingFrames.delete(id);
+      },
+    });
+
+    host = document.createElement('div');
+    scroller = document.createElement('div');
+    document.body.append(host, scroller);
+    root = createRoot(host);
+    containerRef = { current: scroller };
+    scrollTop = 0;
+    scrollbarCommits = 0;
+    verticalLayoutReads = 0;
+    horizontalLayoutReads = 0;
+
+    Object.defineProperties(scroller, {
+      clientHeight: {
+        configurable: true,
+        get: () => {
+          verticalLayoutReads += 1;
+          return 100;
+        },
+      },
+      scrollHeight: {
+        configurable: true,
+        get: () => {
+          verticalLayoutReads += 1;
+          return 500;
+        },
+      },
+      scrollTop: {
+        configurable: true,
+        get: () => scrollTop,
+        set: (value: number) => {
+          scrollTop = value;
+        },
+      },
+      clientWidth: {
+        configurable: true,
+        get: () => {
+          horizontalLayoutReads += 1;
+          return 100;
+        },
+      },
+      scrollWidth: {
+        configurable: true,
+        get: () => {
+          horizontalLayoutReads += 1;
+          return 100;
+        },
+      },
+    });
+  });
+
+  afterEach(async () => {
+    await act(async () => root.unmount());
+    windowInstance.close();
+  });
+
+  test('moves the thumb without rereading layout during steady scrolling', async () => {
+    await renderScrollbar();
+    scrollbarCommits = 0;
+    verticalLayoutReads = 0;
+    horizontalLayoutReads = 0;
+
+    scrollTop = 200;
+    scroller.dispatchEvent(new window.Event('scroll'));
+    await flushFrames();
+
+    const thumb = host.querySelector<HTMLElement>('[data-overlay-scrollbar-thumb="vertical"]');
+    expect(thumb?.style.transform).toBe('translate3d(0, 34px, 0)');
+    expect(thumb?.style.top).toBe('');
+    expect(verticalLayoutReads).toBe(0);
+    expect(horizontalLayoutReads).toBe(0);
+    expect(scrollbarCommits).toBe(0);
+  });
+
+  test('coalesces scroll and resize updates into one animation frame', async () => {
+    await renderScrollbar();
+
+    scroller.dispatchEvent(new window.Event('scroll'));
+    TestResizeObserver.instances[0]?.trigger();
+
+    expect(pendingFrames.size).toBe(1);
+  });
+
+  test('reads both axes before writing updated thumb sizes', async () => {
+    let clientHeight = 100;
+    let verticalHeightDuringHorizontalRead = '';
+    let captureHorizontalRead = false;
+    Object.defineProperties(scroller, {
+      clientHeight: { configurable: true, get: () => clientHeight },
+      clientWidth: {
+        configurable: true,
+        get: () => {
+          if (captureHorizontalRead) {
+            verticalHeightDuringHorizontalRead = host.querySelector<HTMLElement>(
+              '[data-overlay-scrollbar-thumb="vertical"]',
+            )?.style.height ?? '';
+          }
+          return 100;
+        },
+      },
+      scrollWidth: { configurable: true, get: () => 300 },
+    });
+    await renderScrollbar({ disableHorizontal: false });
+
+    clientHeight = 200;
+    captureHorizontalRead = true;
+    TestResizeObserver.instances[0]?.trigger();
+    await flushFrames();
+
+    const verticalThumb = host.querySelector<HTMLElement>('[data-overlay-scrollbar-thumb="vertical"]');
+    expect(verticalHeightDuringHorizontalRead).toBe('32px');
+    expect(verticalThumb?.style.height).toBe('73.6px');
+  });
+
+  test('keeps the resize observer connected when visibility is suppressed', async () => {
+    await renderScrollbar({ suppressVisibility: false });
+    expect(TestResizeObserver.instances).toHaveLength(1);
+    const disconnectCount = TestResizeObserver.instances[0]?.disconnectCount;
+
+    await renderScrollbar({ suppressVisibility: true });
+
+    expect(TestResizeObserver.instances).toHaveLength(1);
+    expect(TestResizeObserver.instances[0]?.disconnectCount).toBe(disconnectCount);
+  });
+
+  test('uses the rendered thumb travel when dragging', async () => {
+    await renderScrollbar();
+    const thumb = host.querySelector<HTMLElement>('[data-overlay-scrollbar-thumb="vertical"]');
+    if (!thumb) throw new Error('OverlayScrollbar did not render its vertical thumb');
+
+    thumb.setPointerCapture = () => {};
+    thumb.releasePointerCapture = () => {};
+    thumb.dispatchEvent(new window.PointerEvent('pointerdown', {
+      bubbles: true,
+      clientY: 0,
+      pointerId: 1,
+    }));
+    thumb.dispatchEvent(new window.PointerEvent('pointermove', {
+      bubbles: true,
+      clientY: 26,
+      pointerId: 1,
+    }));
+
+    expect(scrollTop).toBe(200);
+    thumb.dispatchEvent(new window.PointerEvent('pointerup', {
+      bubbles: true,
+      clientY: 26,
+      pointerId: 1,
+    }));
+    thumb.dispatchEvent(new window.PointerEvent('pointermove', {
+      bubbles: true,
+      clientY: 52,
+      pointerId: 1,
+    }));
+    expect(scrollTop).toBe(200);
+  });
+
+  test('keeps the minimum thumb size within a short track', async () => {
+    Object.defineProperty(scroller, 'clientHeight', {
+      configurable: true,
+      get: () => 40,
+    });
+
+    await renderScrollbar();
+
+    const thumb = host.querySelector<HTMLElement>('[data-overlay-scrollbar-thumb="vertical"]');
+    expect(thumb?.style.height).toBe('24px');
+  });
+
+  test('applies visibility suppression without reconnecting the scrollbar', async () => {
+    await renderScrollbar({ suppressVisibility: false });
+    const scrollbar = host.querySelector<HTMLElement>('.overlay-scrollbar');
+    if (!scrollbar) throw new Error('OverlayScrollbar did not render its container');
+
+    scroller.dispatchEvent(new window.Event('scroll'));
+    expect(scrollbar.dataset.visible).toBe('true');
+
+    await renderScrollbar({ suppressVisibility: true });
+
+    expect(scrollbar.dataset.visible).toBe('false');
+  });
+
+  test('shows user-intent-only scrollbars for user scrolling but not programmatic scrolling', async () => {
+    await renderScrollbar({ userIntentOnly: true });
+    const scrollbar = host.querySelector<HTMLElement>('.overlay-scrollbar');
+    if (!scrollbar) throw new Error('OverlayScrollbar did not render its container');
+
+    scroller.dispatchEvent(new window.Event('scroll'));
+    expect(scrollbar.dataset.visible).toBe('false');
+
+    scroller.dispatchEvent(new window.WheelEvent('wheel'));
+    scroller.dispatchEvent(new window.Event('scroll'));
+    expect(scrollbar.dataset.visible).toBe('true');
+  });
+
+});
diff --git a/packages/ui/src/components/ui/OverlayScrollbar.tsx b/packages/ui/src/components/ui/OverlayScrollbar.tsx
index d1026abb..ccf687f7 100644
--- a/packages/ui/src/components/ui/OverlayScrollbar.tsx
+++ b/packages/ui/src/components/ui/OverlayScrollbar.tsx
@@ -2,30 +2,340 @@ import React from "react";
 import { cn } from "@/lib/utils";
 
 type OverlayScrollbarProps = {
+  /** The authoritative scrolling element. Its identity must stay stable while mounted. */
   containerRef: React.RefObject<HTMLElement | null>;
+  /** Minimum thumb length in CSS pixels, capped to the available track. */
   minThumbSize?: number;
+  /** Time in milliseconds before an inactive thumb fades out. */
   hideDelayMs?: number;
   className?: string;
+  /** Skips horizontal geometry reads and keeps the horizontal thumb hidden. */
   disableHorizontal?: boolean;
+  /** Tracks direct-child replacement so newly mounted content remains size-observed. */
   observeMutations?: boolean;
+  /** Hides the scrollbar during programmatic motion, except while the user is dragging it. */
   suppressVisibility?: boolean;
+  /** Shows the scrollbar only after recent wheel, touch, keyboard, or thumb input. */
   userIntentOnly?: boolean;
 };
 
-type ThumbMetrics = {
-  length: number;
-  offset: number;
-};
+type ScrollbarOptions = Required<Pick<
+  OverlayScrollbarProps,
+  "minThumbSize" | "hideDelayMs" | "disableHorizontal" | "observeMutations" | "suppressVisibility" | "userIntentOnly"
+>>;
 
-const USER_SCROLL_INTENT_WINDOW_MS = 1000;
-const METRIC_EPSILON = 0.5;
-const EMPTY_THUMB: ThumbMetrics = { length: 0, offset: 0 };
+// The inset is part of both rendering and drag math; changing it must preserve that shared track.
+const TRACK_INSET = 8;
+const USER_INTENT_DURATION_MS = 1000;
+const SCROLL_KEYS = new Set(["ArrowUp", "ArrowDown", "PageUp", "PageDown", "Home", "End", " "]);
 
-const isSameThumbMetrics = (a: ThumbMetrics, b: ThumbMetrics): boolean => {
-  return Math.abs(a.length - b.length) < METRIC_EPSILON && Math.abs(a.offset - b.offset) < METRIC_EPSILON;
-};
+function calculateThumb(viewportLength: number, contentLength: number, minThumbSize: number) {
+  const trackLength = Math.max(viewportLength - TRACK_INSET * 2, 0);
+  const scrollRange = Math.max(contentLength - viewportLength, 0);
+  if (trackLength === 0 || scrollRange === 0) return null;
 
-const OverlayScrollbarComponent: React.FC<OverlayScrollbarProps> = ({
+  const length = Math.min(
+    trackLength,
+    Math.max(minThumbSize, (viewportLength / contentLength) * trackLength),
+  );
+  return {
+    length,
+    thumbPixelsPerScrollPixel: (trackLength - length) / scrollRange,
+  };
+}
+
+function bindScrollbar(
+  container: HTMLElement,
+  root: HTMLDivElement,
+  verticalThumb: HTMLDivElement,
+  horizontalThumb: HTMLDivElement,
+  initialOptions: ScrollbarOptions,
+) {
+  let options = initialOptions;
+
+  // One frame coalesces scroll, resize, and mutation signals. Measurement is requested only when sizes may change.
+  let frameId: number | null = null;
+  let needsMeasurement = true;
+
+  // Cached unit conversions let steady scrolling avoid layout-dependent size reads.
+  let verticalThumbPixelsPerScrollPixel = 0;
+  let horizontalThumbPixelsPerScrollPixel = 0;
+
+  // A single moving deadline avoids clearing and recreating a timer on every scroll event.
+  let hideTimerId: ReturnType<typeof setTimeout> | null = null;
+  let hideDeadlineMs = 0;
+  let lastUserIntentTimeMs = Number.NEGATIVE_INFINITY;
+  let pointerOverThumb = false;
+
+  // Drag state is the minimum snapshot needed to convert pointer travel back into a scroll offset.
+  let drag: {
+    axis: "vertical" | "horizontal";
+    pointerId: number;
+    pointerStartPx: number;
+    scrollStartPx: number;
+  } | null = null;
+
+  // Visibility is an imperative presentation detail; no React consumer needs it as state.
+  // React owns the stable elements; this binding exclusively owns their dynamic attributes and styles.
+  const setVisible = (visible: boolean) => {
+    const value = String(visible);
+    if (root.dataset.visible !== value) root.dataset.visible = value;
+  };
+
+  const scheduleHide = () => {
+    if (pointerOverThumb || drag || hideTimerId !== null) return;
+
+    const hide = () => {
+      hideTimerId = null;
+      if (pointerOverThumb || drag) return;
+      const delay = hideDeadlineMs - performance.now();
+      if (delay > 0) {
+        hideTimerId = setTimeout(hide, delay);
+      } else {
+        setVisible(false);
+      }
+    };
+
+    hideTimerId = setTimeout(hide, Math.max(hideDeadlineMs - performance.now(), 0));
+  };
+
+  // Measurement is the cold path. Read every axis before writing either thumb to avoid forced layout.
+  const measureThumbs = () => {
+    const clientHeight = container.clientHeight;
+    const scrollHeight = container.scrollHeight;
+    const clientWidth = options.disableHorizontal ? 0 : container.clientWidth;
+    const scrollWidth = options.disableHorizontal ? 0 : container.scrollWidth;
+    const vertical = calculateThumb(clientHeight, scrollHeight, options.minThumbSize);
+    const horizontal = options.disableHorizontal
+      ? null
+      : calculateThumb(clientWidth, scrollWidth, options.minThumbSize);
+
+    if (vertical) {
+      verticalThumbPixelsPerScrollPixel = vertical.thumbPixelsPerScrollPixel;
+      verticalThumb.hidden = false;
+      verticalThumb.style.height = `${vertical.length}px`;
+    } else {
+      verticalThumbPixelsPerScrollPixel = 0;
+      verticalThumb.hidden = true;
+    }
+
+    if (horizontal) {
+      horizontalThumbPixelsPerScrollPixel = horizontal.thumbPixelsPerScrollPixel;
+      horizontalThumb.hidden = false;
+      horizontalThumb.style.width = `${horizontal.length}px`;
+    } else {
+      horizontalThumbPixelsPerScrollPixel = 0;
+      horizontalThumb.hidden = true;
+    }
+  };
+
+  const positionThumbs = () => {
+    // This is the hot path: cached scales leave only scroll offsets to read and transforms to write.
+    if (!verticalThumb.hidden) {
+      verticalThumb.style.transform = `translate3d(0, ${TRACK_INSET + container.scrollTop * verticalThumbPixelsPerScrollPixel}px, 0)`;
+    }
+    if (!horizontalThumb.hidden) {
+      horizontalThumb.style.transform = `translate3d(${TRACK_INSET + container.scrollLeft * horizontalThumbPixelsPerScrollPixel}px, 0, 0)`;
+    }
+  };
+
+  const scheduleUpdate = (measure = false) => {
+    needsMeasurement ||= measure;
+    if (frameId !== null) return;
+
+    // All event sources share one read-before-write pass per frame.
+    frameId = requestAnimationFrame(() => {
+      frameId = null;
+      if (needsMeasurement) {
+        needsMeasurement = false;
+        measureThumbs();
+      }
+      positionThumbs();
+    });
+  };
+
+  const markUserIntent = () => {
+    lastUserIntentTimeMs = performance.now();
+  };
+
+  // Scroll visibility is separate from positioning so hidden programmatic scrolling does no DOM work.
+  const onScroll = () => {
+    const shouldShow = drag
+      || (!options.suppressVisibility
+        && (!options.userIntentOnly
+          || performance.now() - lastUserIntentTimeMs <= USER_INTENT_DURATION_MS));
+
+    if (!shouldShow) {
+      setVisible(false);
+      return;
+    }
+
+    scheduleUpdate();
+    hideDeadlineMs = performance.now() + options.hideDelayMs;
+    setVisible(true);
+    scheduleHide();
+  };
+
+  const onKeyDown = (event: KeyboardEvent) => {
+    if (SCROLL_KEYS.has(event.key)) {
+      markUserIntent();
+    }
+  };
+
+  const getThumbAxis = (target: EventTarget | null) => {
+    if (target === verticalThumb) return "vertical";
+    if (target === horizontalThumb) return "horizontal";
+    return null;
+  };
+
+  // Both thumbs delegate pointer interaction through the stable overlay root.
+  const onPointerDown = (event: PointerEvent) => {
+    const axis = getThumbAxis(event.target);
+    if (!axis) return;
+    const thumb = axis === "vertical" ? verticalThumb : horizontalThumb;
+    drag = {
+      axis,
+      pointerId: event.pointerId,
+      pointerStartPx: axis === "vertical" ? event.clientY : event.clientX,
+      scrollStartPx: axis === "vertical" ? container.scrollTop : container.scrollLeft,
+    };
+    markUserIntent();
+    hideDeadlineMs = Number.POSITIVE_INFINITY;
+    if (hideTimerId !== null) {
+      clearTimeout(hideTimerId);
+      hideTimerId = null;
+    }
+    setVisible(true);
+    thumb.setPointerCapture(event.pointerId);
+  };
+
+  const onPointerMove = (event: PointerEvent) => {
+    if (!drag || event.pointerId !== drag.pointerId) return;
+    const pointer = drag.axis === "vertical" ? event.clientY : event.clientX;
+    const scale = drag.axis === "vertical"
+      ? verticalThumbPixelsPerScrollPixel
+      : horizontalThumbPixelsPerScrollPixel;
+    if (scale <= 0) return;
+    const scrollOffset = drag.scrollStartPx + (pointer - drag.pointerStartPx) / scale;
+    if (drag.axis === "vertical") container.scrollTop = scrollOffset;
+    else container.scrollLeft = scrollOffset;
+  };
+
+  const onPointerEnd = (event: PointerEvent) => {
+    if (!drag || event.pointerId !== drag.pointerId) return;
+    const thumb = drag.axis === "vertical" ? verticalThumb : horizontalThumb;
+    drag = null;
+    if (thumb.hasPointerCapture(event.pointerId)) thumb.releasePointerCapture(event.pointerId);
+    hideDeadlineMs = performance.now() + options.hideDelayMs;
+    scheduleHide();
+  };
+
+  const onPointerOver = (event: PointerEvent) => {
+    if (!getThumbAxis(event.target)) return;
+    pointerOverThumb = true;
+    if (hideTimerId !== null) {
+      clearTimeout(hideTimerId);
+      hideTimerId = null;
+    }
+  };
+
+  const onPointerOut = (event: PointerEvent) => {
+    if (!getThumbAxis(event.target)) return;
+    pointerOverThumb = false;
+    hideDeadlineMs = performance.now() + options.hideDelayMs;
+    scheduleHide();
+  };
+
+  container.addEventListener("scroll", onScroll, { passive: true });
+  root.addEventListener("pointerdown", onPointerDown);
+  root.addEventListener("pointermove", onPointerMove);
+  root.addEventListener("pointerup", onPointerEnd);
+  root.addEventListener("pointercancel", onPointerEnd);
+  root.addEventListener("pointerover", onPointerOver);
+  root.addEventListener("pointerout", onPointerOut);
+
+  // ResizeObserver invalidates measurements; MutationObserver only keeps direct-child observation current.
+  const resizeObserver = globalThis.ResizeObserver
+    ? new ResizeObserver(() => scheduleUpdate(true))
+    : null;
+
+  const observeSizes = () => {
+    if (!resizeObserver) return;
+    resizeObserver.disconnect();
+    resizeObserver.observe(container);
+    for (const child of container.children) {
+      resizeObserver.observe(child);
+    }
+  };
+
+  observeSizes();
+
+  const mutationObserver = globalThis.MutationObserver
+    ? new MutationObserver(() => {
+        observeSizes();
+        scheduleUpdate(true);
+      })
+    : null;
+
+  const setMutationObservation = (enabled: boolean) => {
+    mutationObserver?.disconnect();
+    if (enabled) mutationObserver?.observe(container, { childList: true });
+  };
+
+  const setUserIntentListeners = (enabled: boolean) => {
+    if (enabled) {
+      container.addEventListener("wheel", markUserIntent, { passive: true });
+      container.addEventListener("touchstart", markUserIntent, { passive: true });
+      container.addEventListener("touchmove", markUserIntent, { passive: true });
+      container.addEventListener("keydown", onKeyDown);
+    } else {
+      container.removeEventListener("wheel", markUserIntent);
+      container.removeEventListener("touchstart", markUserIntent);
+      container.removeEventListener("touchmove", markUserIntent);
+      container.removeEventListener("keydown", onKeyDown);
+    }
+  };
+
+  setMutationObservation(options.observeMutations);
+  setUserIntentListeners(options.userIntentOnly);
+  root.dataset.visible = "false";
+  scheduleUpdate(true);
+
+  // Props update policy in place; only mounting and unmounting bind browser resources.
+  return {
+    update(nextOptions: ScrollbarOptions) {
+      const mustMeasure = nextOptions.disableHorizontal !== options.disableHorizontal
+        || nextOptions.minThumbSize !== options.minThumbSize;
+      if (nextOptions.observeMutations !== options.observeMutations) {
+        setMutationObservation(nextOptions.observeMutations);
+        if (nextOptions.observeMutations) observeSizes();
+      }
+      if (nextOptions.userIntentOnly !== options.userIntentOnly) {
+        setUserIntentListeners(nextOptions.userIntentOnly);
+      }
+      options = nextOptions;
+      if (mustMeasure) scheduleUpdate(true);
+      if (options.disableHorizontal) horizontalThumb.hidden = true;
+      if (options.suppressVisibility && !drag) setVisible(false);
+    },
+    disconnect() {
+      if (frameId !== null) cancelAnimationFrame(frameId);
+      if (hideTimerId !== null) clearTimeout(hideTimerId);
+      container.removeEventListener("scroll", onScroll);
+      setUserIntentListeners(false);
+      root.removeEventListener("pointerdown", onPointerDown);
+      root.removeEventListener("pointermove", onPointerMove);
+      root.removeEventListener("pointerup", onPointerEnd);
+      root.removeEventListener("pointercancel", onPointerEnd);
+      root.removeEventListener("pointerover", onPointerOver);
+      root.removeEventListener("pointerout", onPointerOut);
+      resizeObserver?.disconnect();
+      mutationObserver?.disconnect();
+    },
+  };
+}
+
+export const OverlayScrollbar: React.FC<OverlayScrollbarProps> = ({
   containerRef,
   minThumbSize = 32,
   hideDelayMs = 1000,
@@ -35,328 +345,85 @@ const OverlayScrollbarComponent: React.FC<OverlayScrollbarProps> = ({
   suppressVisibility = false,
   userIntentOnly = false,
 }) => {
-  const [visible, setVisible] = React.useState(false);
-  const [vertical, setVertical] = React.useState<ThumbMetrics>({ length: 0, offset: 0 });
-  const [horizontal, setHorizontal] = React.useState<ThumbMetrics>({ length: 0, offset: 0 });
-  const hideTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
-  const frameRef = React.useRef<number | null>(null);
-  const metricsFrameRef = React.useRef<number | null>(null);
-  const isDraggingRef = React.useRef(false);
-  const isHoveringRef = React.useRef(false);
-  const lastUserIntentAtRef = React.useRef(0);
-  const dragStartRef = React.useRef<{
-    pointerX: number;
-    pointerY: number;
-    scrollTop: number;
-    scrollLeft: number;
-  }>({ pointerX: 0, pointerY: 0, scrollTop: 0, scrollLeft: 0 });
-  const dragAxisRef = React.useRef<"vertical" | "horizontal" | null>(null);
-  const observedElementsRef = React.useRef<Set<Element>>(new Set());
-
-  const updateMetrics = React.useCallback(() => {
-    const container = containerRef.current;
-    if (!container) return;
-
-    const { scrollHeight, clientHeight, scrollTop, scrollWidth, clientWidth, scrollLeft } = container;
-    const trackInset = 8;
-
-    let nextVertical: ThumbMetrics = EMPTY_THUMB;
-    if (scrollHeight > clientHeight) {
-      const trackLength = Math.max(clientHeight - trackInset * 2, 0);
-      const rawThumb = (clientHeight / scrollHeight) * trackLength;
-      const length = Math.max(minThumbSize, Math.min(trackLength, rawThumb));
-      const maxOffset = Math.max(trackLength - length, 0);
-      const maxScroll = Math.max(scrollHeight - clientHeight, 1);
-      const offset = (scrollTop / maxScroll) * maxOffset;
-      nextVertical = { length, offset };
-    }
-    setVertical((prev) => (isSameThumbMetrics(prev, nextVertical) ? prev : nextVertical));
-
-    let nextHorizontal: ThumbMetrics = EMPTY_THUMB;
-    if (!disableHorizontal && scrollWidth > clientWidth) {
-      const trackLength = Math.max(clientWidth - trackInset * 2, 0);
-      const rawThumb = (clientWidth / scrollWidth) * trackLength;
-      const length = Math.max(minThumbSize, Math.min(trackLength, rawThumb));
-      const maxOffset = Math.max(trackLength - length, 0);
-      const maxScroll = Math.max(scrollWidth - clientWidth, 1);
-      const offset = (scrollLeft / maxScroll) * maxOffset;
-      nextHorizontal = { length, offset };
-    }
-    setHorizontal((prev) => (isSameThumbMetrics(prev, nextHorizontal) ? prev : nextHorizontal));
-  }, [containerRef, minThumbSize, disableHorizontal]);
-
-  const scheduleMetricsUpdate = React.useCallback(() => {
-    if (metricsFrameRef.current !== null) return;
-    metricsFrameRef.current = requestAnimationFrame(() => {
-      metricsFrameRef.current = null;
-      updateMetrics();
-    });
-  }, [updateMetrics]);
-
-  const syncObservedElements = React.useCallback((container: HTMLElement, resizeObserver: ResizeObserver | null) => {
-    if (!resizeObserver) {
-      observedElementsRef.current.clear();
-      return;
-    }
-
-    const nextObserved = new Set<Element>();
-    nextObserved.add(container);
-    Array.from(container.children).forEach((child) => {
-      nextObserved.add(child);
-    });
-
-    observedElementsRef.current.forEach((element) => {
-      if (!nextObserved.has(element)) {
-        resizeObserver.unobserve(element);
-      }
-    });
-
-    nextObserved.forEach((element) => {
-      if (!observedElementsRef.current.has(element)) {
-        resizeObserver.observe(element);
-      }
-    });
-
-    observedElementsRef.current = nextObserved;
-  }, []);
-
-  const scheduleHide = React.useCallback(() => {
-    if (hideTimeoutRef.current) {
-      clearTimeout(hideTimeoutRef.current);
-    }
-    // Don't schedule hide if hovering over the thumb
-    if (isHoveringRef.current) {
-      return;
-    }
-    hideTimeoutRef.current = setTimeout(() => setVisible(false), hideDelayMs);
-  }, [hideDelayMs]);
-
-  const markUserIntent = React.useCallback(() => {
-    lastUserIntentAtRef.current = Date.now();
-  }, []);
-
-  const handleScroll = React.useCallback(() => {
-    if (frameRef.current) {
-      cancelAnimationFrame(frameRef.current);
-    }
-    frameRef.current = requestAnimationFrame(() => {
-      updateMetrics();
-      if (suppressVisibility && !isDraggingRef.current) {
-        setVisible(false);
-        return;
-      }
-      if (userIntentOnly && !isDraggingRef.current) {
-        const hasRecentUserIntent = Date.now() - lastUserIntentAtRef.current <= USER_SCROLL_INTENT_WINDOW_MS;
-        if (!hasRecentUserIntent) {
-          setVisible(false);
-          return;
-        }
-      }
-      setVisible(true);
-      scheduleHide();
-    });
-  }, [scheduleHide, suppressVisibility, updateMetrics, userIntentOnly]);
-
-  React.useEffect(() => {
-    const container = containerRef.current;
-    if (!container) return;
-
-    updateMetrics();
-    setVisible(false);
-
-    const onScroll = () => handleScroll();
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (
-        event.key === 'ArrowUp'
-        || event.key === 'ArrowDown'
-        || event.key === 'PageUp'
-        || event.key === 'PageDown'
-        || event.key === 'Home'
-        || event.key === 'End'
-        || event.key === ' '
-      ) {
-        markUserIntent();
-      }
-    };
-
-    container.addEventListener("scroll", onScroll, { passive: true });
-    if (userIntentOnly) {
-      container.addEventListener("wheel", markUserIntent, { passive: true });
-      container.addEventListener("touchstart", markUserIntent, { passive: true });
-      container.addEventListener("touchmove", markUserIntent, { passive: true });
-      container.addEventListener("keydown", onKeyDown);
-    }
-
-    const resizeObserver =
-      typeof ResizeObserver !== "undefined"
-        ? new ResizeObserver(() => {
-            scheduleMetricsUpdate();
-          })
-        : null;
-    syncObservedElements(container, resizeObserver);
-
-    const mutationObserver =
-      observeMutations && typeof MutationObserver !== "undefined"
-        ? new MutationObserver(() => {
-            syncObservedElements(container, resizeObserver);
-            scheduleMetricsUpdate();
-          })
-        : null;
-    mutationObserver?.observe(container, { childList: true });
-
-    const onInput = () => scheduleMetricsUpdate();
-    const onLoad = () => scheduleMetricsUpdate();
-    container.addEventListener("input", onInput, true);
-    container.addEventListener("load", onLoad, true);
-
-    return () => {
-      container.removeEventListener("scroll", onScroll);
-      container.removeEventListener("input", onInput, true);
-      container.removeEventListener("load", onLoad, true);
-      if (userIntentOnly) {
-        container.removeEventListener("wheel", markUserIntent);
-        container.removeEventListener("touchstart", markUserIntent);
-        container.removeEventListener("touchmove", markUserIntent);
-        container.removeEventListener("keydown", onKeyDown);
-      }
-      resizeObserver?.disconnect();
-      mutationObserver?.disconnect();
-      observedElementsRef.current.clear();
-      if (hideTimeoutRef.current) clearTimeout(hideTimeoutRef.current);
-      if (frameRef.current) cancelAnimationFrame(frameRef.current);
-      if (metricsFrameRef.current) cancelAnimationFrame(metricsFrameRef.current);
-    };
-  }, [containerRef, handleScroll, markUserIntent, observeMutations, scheduleMetricsUpdate, syncObservedElements, updateMetrics, userIntentOnly]);
-
-  React.useEffect(() => {
-    if (!suppressVisibility) {
-      return;
-    }
-    if (isDraggingRef.current) {
-      return;
-    }
-    setVisible(false);
-    if (hideTimeoutRef.current) {
-      clearTimeout(hideTimeoutRef.current);
-      hideTimeoutRef.current = null;
-    }
-  }, [suppressVisibility]);
-
-  const handlePointerDown = (event: React.PointerEvent<HTMLDivElement>, axis: "vertical" | "horizontal") => {
-    const container = containerRef.current;
-    if (!container) return;
-
-    isDraggingRef.current = true;
-    dragStartRef.current = {
-      pointerX: event.clientX,
-      pointerY: event.clientY,
-      scrollTop: container.scrollTop,
-      scrollLeft: container.scrollLeft,
-    };
-    dragAxisRef.current = axis;
-    markUserIntent();
-    setVisible(true);
-    if (hideTimeoutRef.current) clearTimeout(hideTimeoutRef.current);
-    event.currentTarget.setPointerCapture(event.pointerId);
+  const rootRef = React.useRef<HTMLDivElement>(null);
+  const verticalThumbRef = React.useRef<HTMLDivElement>(null);
+  const horizontalThumbRef = React.useRef<HTMLDivElement>(null);
+  const bindingRef = React.useRef<ReturnType<typeof bindScrollbar> | null>(null);
+  const boundContainerRef = React.useRef<HTMLElement | null>(null);
+  const optionsRef = React.useRef<ScrollbarOptions>({
+    minThumbSize,
+    hideDelayMs,
+    disableHorizontal,
+    observeMutations,
+    suppressVisibility,
+    userIntentOnly,
+  });
+  optionsRef.current = {
+    minThumbSize,
+    hideDelayMs,
+    disableHorizontal,
+    observeMutations,
+    suppressVisibility,
+    userIntentOnly,
   };
 
-  const handlePointerMove = (event: React.PointerEvent<HTMLDivElement>) => {
-    if (!isDraggingRef.current) return;
+  // Follow the LIVE container node, not the ref object: the chat timeline's
+  // scroll element is owned by the virtualized list and remounts on every
+  // session switch (key={sessionKey}), so a bind-once contract would leave
+  // the scrollbar attached to a dead element after the first switch. This
+  // effect runs on every commit and rebinds only when the node identity
+  // actually changed — steady renders are a single pointer comparison.
+  React.useLayoutEffect(() => {
     const container = containerRef.current;
-    if (!container) return;
+    if (container === boundContainerRef.current) return;
 
-    const axis = dragAxisRef.current;
-    if (axis === "vertical") {
-      const { pointerY, scrollTop } = dragStartRef.current;
-      const delta = event.clientY - pointerY;
-      const trackLength = container.clientHeight;
-      const thumbTravel = Math.max(trackLength - vertical.length, 1);
-      const maxScroll = Math.max(container.scrollHeight - container.clientHeight, 1);
-      const scrollDelta = (delta / thumbTravel) * maxScroll;
-      container.scrollTop = scrollTop + scrollDelta;
-    } else if (axis === "horizontal") {
-      const { pointerX, scrollLeft } = dragStartRef.current;
-      const delta = event.clientX - pointerX;
-      const trackLength = container.clientWidth;
-      const thumbTravel = Math.max(trackLength - horizontal.length, 1);
-      const maxScroll = Math.max(container.scrollWidth - container.clientWidth, 1);
-      const scrollDelta = (delta / thumbTravel) * maxScroll;
-      container.scrollLeft = scrollLeft + scrollDelta;
-    }
-  };
+    bindingRef.current?.disconnect();
+    bindingRef.current = null;
+    boundContainerRef.current = container;
 
-  const handlePointerUp = (event: React.PointerEvent<HTMLDivElement>) => {
-    if (!isDraggingRef.current) return;
-    isDraggingRef.current = false;
-    event.currentTarget.releasePointerCapture(event.pointerId);
-    scheduleHide();
-  };
+    const root = rootRef.current;
+    const verticalThumb = verticalThumbRef.current;
+    const horizontalThumb = horizontalThumbRef.current;
+    if (!container || !root || !verticalThumb || !horizontalThumb) return;
 
-  const handleThumbMouseEnter = React.useCallback(() => {
-    isHoveringRef.current = true;
-    // Cancel any pending hide when hovering
-    if (hideTimeoutRef.current) {
-      clearTimeout(hideTimeoutRef.current);
-      hideTimeoutRef.current = null;
-    }
+    bindingRef.current = bindScrollbar(container, root, verticalThumb, horizontalThumb, optionsRef.current);
+  });
+
+  React.useLayoutEffect(() => () => {
+    bindingRef.current?.disconnect();
+    bindingRef.current = null;
+    boundContainerRef.current = null;
   }, []);
 
-  const handleThumbMouseLeave = React.useCallback(() => {
-    isHoveringRef.current = false;
-    // Schedule hide when leaving the thumb
-    scheduleHide();
-  }, [scheduleHide]);
-
-  const showVertical = vertical.length > 0;
-  const showHorizontal = horizontal.length > 0;
-  if (!showVertical && !showHorizontal) return null;
-
-  const trackInset = 8;
+  React.useLayoutEffect(() => {
+    bindingRef.current?.update({
+      minThumbSize,
+      hideDelayMs,
+      disableHorizontal,
+      observeMutations,
+      suppressVisibility,
+      userIntentOnly,
+    });
+  }, [disableHorizontal, hideDelayMs, minThumbSize, observeMutations, suppressVisibility, userIntentOnly]);
 
   return (
-    <div
-      className={cn("overlay-scrollbar", className)}
-      aria-hidden="true"
-      style={{ opacity: visible ? 1 : 0 }}
-    >
-      {showVertical && (
-        <div
-          className="overlay-scrollbar__thumb overlay-scrollbar__thumb--vertical"
-          data-overlay-scrollbar-thumb="vertical"
-          style={{
-            height: `${vertical.length}px`,
-            top: `${trackInset + vertical.offset}px`,
-            right: `${trackInset / 2}px`,
-          }}
-          onPointerDown={(e) => handlePointerDown(e, "vertical")}
-          onPointerMove={handlePointerMove}
-          onPointerUp={handlePointerUp}
-          onPointerCancel={handlePointerUp}
-          onMouseEnter={handleThumbMouseEnter}
-          onMouseLeave={handleThumbMouseLeave}
-        />
-      )}
-      {showHorizontal && (
-        <div
-          className="overlay-scrollbar__thumb overlay-scrollbar__thumb--horizontal"
-          data-overlay-scrollbar-thumb="horizontal"
-          style={{
-            width: `${horizontal.length}px`,
-            left: `${trackInset + horizontal.offset}px`,
-            bottom: `${trackInset / 2}px`,
-          }}
-          onPointerDown={(e) => handlePointerDown(e, "horizontal")}
-          onPointerMove={handlePointerMove}
-          onPointerUp={handlePointerUp}
-          onPointerCancel={handlePointerUp}
-          onMouseEnter={handleThumbMouseEnter}
-          onMouseLeave={handleThumbMouseLeave}
-        />
-      )}
+    <div ref={rootRef} className={cn("overlay-scrollbar", className)} aria-hidden="true">
+      <div
+        ref={verticalThumbRef}
+        hidden
+        className="overlay-scrollbar__thumb overlay-scrollbar__thumb--vertical"
+        data-overlay-scrollbar-thumb="vertical"
+        style={{ right: `${TRACK_INSET / 2}px` }}
+      />
+      <div
+        ref={horizontalThumbRef}
+        hidden
+        className="overlay-scrollbar__thumb overlay-scrollbar__thumb--horizontal"
+        data-overlay-scrollbar-thumb="horizontal"
+        style={{ bottom: `${TRACK_INSET / 2}px` }}
+      />
     </div>
   );
 };
 
-OverlayScrollbarComponent.displayName = "OverlayScrollbar";
-
-export const OverlayScrollbar = OverlayScrollbarComponent;
+OverlayScrollbar.displayName = "OverlayScrollbar";
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/dropdown-menu.tsx b/packages/ui/src/components/ui/dropdown-menu.tsx
index fa70b1a7..e8fd327f 100644
--- a/packages/ui/src/components/ui/dropdown-menu.tsx
+++ b/packages/ui/src/components/ui/dropdown-menu.tsx
@@ -13,7 +13,9 @@ type AsChildRenderProps = {
 
 type DropdownPortalContextValue = {
   portalContainer: HTMLElement | null;
+  collisionBoundary: Element | null;
   setPortalContainer: (container: HTMLElement | null) => void;
+  setCollisionBoundary: (boundary: Element | null) => void;
 };
 
 const DropdownPortalContext = React.createContext<DropdownPortalContextValue | null>(null);
@@ -36,10 +38,13 @@ function DropdownMenu({
   ...props
 }: React.ComponentProps<typeof BaseMenu.Root>) {
   const [portalContainer, setPortalContainer] = React.useState<HTMLElement | null>(null);
+  const [collisionBoundary, setCollisionBoundary] = React.useState<Element | null>(null);
   const portalContextValue = React.useMemo<DropdownPortalContextValue>(() => ({
     portalContainer,
+    collisionBoundary,
     setPortalContainer,
-  }), [portalContainer]);
+    setCollisionBoundary,
+  }), [collisionBoundary, portalContainer]);
 
   return (
     <DropdownPortalContext.Provider value={portalContextValue}>
@@ -62,6 +67,7 @@ function DropdownMenuTrigger({
     }
     const element = target instanceof HTMLElement ? target : null;
     portalContext.setPortalContainer(resolveDialogContainer(element));
+    portalContext.setCollisionBoundary(element?.closest('main') ?? null);
   }, [portalContext]);
 
   const r = renderFromAsChild(asChild, children);
@@ -89,6 +95,8 @@ type ContentProps = {
   alignOffset?: number;
   portalToBody?: boolean;
   positionerClassName?: string;
+  constrainToMain?: boolean;
+  collisionAvoidance?: React.ComponentProps<typeof BaseMenu.Positioner>["collisionAvoidance"];
   style?: React.CSSProperties;
   className?: string;
   children?: React.ReactNode;
@@ -103,6 +111,8 @@ function DropdownMenuContent({
   alignOffset,
   portalToBody = false,
   positionerClassName,
+  constrainToMain = false,
+  collisionAvoidance,
   style,
   children,
   onCloseAutoFocus,
@@ -118,6 +128,8 @@ function DropdownMenuContent({
         align={align}
         side={side}
         alignOffset={alignOffset}
+        collisionBoundary={constrainToMain ? portalContext?.collisionBoundary ?? undefined : undefined}
+        collisionAvoidance={collisionAvoidance}
         className={cn("app-region-no-drag z-50", positionerClassName)}
       >
         <BaseMenu.Popup
diff --git a/packages/ui/src/components/ui/select.tsx b/packages/ui/src/components/ui/select.tsx
index cee5c00f..0fb0ea0e 100644
--- a/packages/ui/src/components/ui/select.tsx
+++ b/packages/ui/src/components/ui/select.tsx
@@ -17,7 +17,9 @@ type AsChildRenderProps = {
 
 type SelectPortalContextValue = {
   portalContainer: HTMLElement | null;
+  collisionBoundary: Element | null;
   setPortalContainer: (container: HTMLElement | null) => void;
+  setCollisionBoundary: (boundary: Element | null) => void;
 };
 
 const SelectPortalContext = React.createContext<SelectPortalContextValue | null>(null);
@@ -44,10 +46,13 @@ function Select<Value extends string = string>({
   ...props
 }: SelectRootProps<Value>) {
   const [portalContainer, setPortalContainer] = React.useState<HTMLElement | null>(null);
+  const [collisionBoundary, setCollisionBoundary] = React.useState<Element | null>(null);
   const portalContextValue = React.useMemo<SelectPortalContextValue>(() => ({
     portalContainer,
+    collisionBoundary,
     setPortalContainer,
-  }), [portalContainer]);
+    setCollisionBoundary,
+  }), [collisionBoundary, portalContainer]);
 
   const handleValueChange = React.useCallback(
     (value: unknown, eventDetails: SelectRootChangeEventDetails) => {
@@ -119,6 +124,7 @@ function SelectTrigger({
     }
     const element = target instanceof HTMLElement ? target : null;
     portalContext.setPortalContainer(resolveDialogContainer(element));
+    portalContext.setCollisionBoundary(element?.closest('main') ?? null);
   }, [portalContext]);
 
   const asChildRender: AsChildRenderProps | null = asChild && React.isValidElement(children)
@@ -164,6 +170,7 @@ type SelectContentExtra = {
   side?: "top" | "right" | "bottom" | "left";
   align?: "start" | "center" | "end";
   collisionAvoidance?: React.ComponentProps<typeof BaseSelect.Positioner>["collisionAvoidance"];
+  constrainToMain?: boolean;
 };
 
 function SelectContent({
@@ -176,6 +183,7 @@ function SelectContent({
   side,
   align,
   collisionAvoidance,
+  constrainToMain = false,
   ...props
 }: React.ComponentProps<typeof BaseSelect.Popup> & SelectContentExtra) {
   const portalContext = React.useContext(SelectPortalContext);
@@ -190,6 +198,7 @@ function SelectContent({
         side={side}
         align={align}
         collisionAvoidance={collisionAvoidance}
+        collisionBoundary={constrainToMain ? portalContext?.collisionBoundary ?? undefined : undefined}
         className="absolute z-[120] pointer-events-auto"
       >
         <BaseSelect.Popup
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 212d02ec..907de790 100644
--- a/packages/ui/src/components/views/FilesView.tsx
+++ b/packages/ui/src/components/views/FilesView.tsx
@@ -31,7 +31,9 @@ import { languageByExtension, loadLanguageByExtension } from '@/lib/codemirror/l
 import { createFlexokiCodeMirrorTheme } from '@/lib/codemirror/flexokiTheme';
 import { shikiHighlightExtension } from '@/lib/codemirror/shikiHighlight';
 import { getResolvedShikiTheme } from '@/lib/shiki/appThemeRegistry';
-import { File as PierreFile } from '@pierre/diffs/react';
+import { File as PierreFile, VirtualizerContext, WorkerPoolContext } from '@pierre/diffs/react';
+import { useWorkerPool } from '@/contexts/DiffWorkerProvider';
+import { useFileViewVirtualizer, type FileViewVirtualizer } from './useFileViewVirtualizer';
 import {
   Dialog,
   DialogContent,
@@ -60,7 +62,7 @@ import { useUIStore } from '@/stores/useUIStore';
 import { useFilesViewTabsStore } from '@/stores/useFilesViewTabsStore';
 import { useGitStatus } from '@/stores/useGitStore';
 import { useConfigStore } from '@/stores/useConfigStore';
-import { buildCodeMirrorCommentWidgets, normalizeLineRange, useInlineCommentController } from '@/components/comments';
+import { buildCodeMirrorCommentWidgets, FilePreviewCommentMenu, normalizeLineRange, useInlineCommentController } from '@/components/comments';
 import { opencodeClient } from '@/lib/opencode/client';
 import { useDirectoryShowHidden } from '@/lib/directoryShowHidden';
 import { useFilesViewShowGitignored } from '@/lib/filesViewShowGitignored';
@@ -311,6 +313,23 @@ const isFileMissingError = (error: unknown): boolean => {
 const MAX_VIEW_CHARS = 200_000;
 type FileLineEnding = '\n' | '\r\n';
 
+// Fast cache key for pierre's line/highlight caches: content-derived (not a
+// revision counter) so polling reloads and out-of-view changes can never hit
+// a stale entry. Mirrors the diff viewer's key scheme. Known residual: two
+// files identical in total length and in the first/last 200 characters can
+// collide and briefly show stale content; same profile as PierreDiffViewer.
+function makeContentCacheKey(contents: string): string {
+  const sample = contents.length > 400
+    ? `${contents.slice(0, 200)}${contents.slice(-200)}`
+    : contents;
+  let hash = 0x811c9dc5;
+  for (let i = 0; i < sample.length; i += 1) {
+    hash ^= sample.charCodeAt(i);
+    hash = (hash + ((hash << 1) + (hash << 4) + (hash << 7) + (hash << 8) + (hash << 24))) >>> 0;
+  }
+  return `${contents.length}:${hash.toString(16)}`;
+}
+
 const detectFileLineEnding = (content: string): FileLineEnding => {
   let crlf = 0;
   let lf = 0;
@@ -750,8 +769,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 +778,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 +939,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 +1028,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 +1036,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(() => {
@@ -1071,6 +1068,8 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
     return lines.slice(startLine - 1, endLine).join('\n');
   }, []);
 
+  const markdownPreviewRef = React.useRef<HTMLDivElement | null>(null);
+
   const fileCommentController = useInlineCommentController<SelectedLineRange>({
     source: 'file',
     fileLabel: selectedFile?.path ?? null,
@@ -1096,10 +1095,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);
@@ -1709,32 +1707,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;
@@ -2134,11 +2106,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.
@@ -2177,15 +2147,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();
@@ -2195,7 +2160,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.
@@ -2231,11 +2195,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;
@@ -3175,27 +3135,57 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
     });
   }, [cancel, commentText, deleteDraft, editingDraftId, filesFileDrafts, handleSaveComment, isDragging, lineSelection, selectedFile?.path, setCommentText, startEdit]);
 
-  const renderShikiFileView = React.useCallback((file: FileNode, content: string) => {
+  const mainViewVirtualizer = useFileViewVirtualizer();
+  const fullscreenViewVirtualizer = useFileViewVirtualizer();
+  const shikiWorkerPool = useWorkerPool('unified');
+  // Files above the editable size cap are rendered as a read-only preview; give
+  // them the full file content plus pierre's viewport virtualization and the
+  // shared Shiki worker pool so large files stay responsive.
+  const isLargeFile = fileContent.length > MAX_VIEW_CHARS;
+  const largeFileCacheKey = React.useMemo(
+    () => (isLargeFile ? makeContentCacheKey(fileContent) : undefined),
+    [fileContent, isLargeFile],
+  );
+
+  const renderShikiFileView = React.useCallback((file: FileNode, content: string, virtualizer: FileViewVirtualizer) => {
+    const fileContents = {
+      name: file.name,
+      contents: content,
+      lang: getLanguageFromExtension(file.path) || undefined,
+    };
+    const pierreFile = (key: string) => (
+      <PierreFile
+        key={key}
+        file={isLargeFile && largeFileCacheKey ? { ...fileContents, cacheKey: `${file.path}:${largeFileCacheKey}` } : fileContents}
+        options={{
+          disableFileHeader: true,
+          overflow: wrapLines ? 'wrap' : 'scroll',
+          theme: pierreTheme,
+          themeType: currentTheme.metadata.variant === 'dark' ? 'dark' : 'light',
+        }}
+        className={isLargeFile ? 'block w-full' : 'block h-full w-full'}
+        style={isLargeFile ? undefined : { height: '100%' }}
+      />
+    );
+
+    if (!isLargeFile) {
+      return <div className="h-full">{pierreFile(file.path)}</div>;
+    }
+
+    // Large files render through pierre's Virtualizer (viewport-only DOM) and
+    // the shared Shiki worker pool. The pool is created lazily: until it is
+    // ready the key carries a 'pending' suffix so the file remounts with the
+    // worker-backed highlighter instead of silently staying on the main thread.
     return (
       <div className="h-full">
-        <PierreFile
-          file={{
-            name: file.name,
-            contents: content,
-            lang: getLanguageFromExtension(file.path) || undefined,
-          }}
-          options={{
-            disableFileHeader: true,
-            overflow: wrapLines ? 'wrap' : 'scroll',
-            theme: pierreTheme,
-            themeType: currentTheme.metadata.variant === 'dark' ? 'dark' : 'light',
-          }}
-          className="block h-full w-full"
-          style={{ height: '100%' }}
-        />
+        <VirtualizerContext.Provider value={virtualizer.virtualizer}>
+          <WorkerPoolContext.Provider value={shikiWorkerPool}>
+            {pierreFile(`${file.path}:${shikiWorkerPool ? 'pool' : 'pending'}`)}
+          </WorkerPoolContext.Provider>
+        </VirtualizerContext.Provider>
       </div>
     );
-  }, [currentTheme.metadata.variant, pierreTheme, wrapLines]);
+  }, [currentTheme.metadata.variant, isLargeFile, largeFileCacheKey, pierreTheme, shikiWorkerPool, wrapLines]);
 
   const renderFloatingFileControls = ({
     exitFullscreenOnly = false,
@@ -3780,9 +3770,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. */}
@@ -3803,70 +3792,7 @@ 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">
+        <ScrollableOverlay ref={mainViewVirtualizer.setScroller} outerClassName="h-full min-w-0" className={cn('h-full min-w-0', isLargeFile && '[overflow-anchor:none]')}>
           {!selectedFile ? (
             <div className="p-3 typography-ui text-muted-foreground">{t('filesView.editor.pickFileFromTree')}</div>
           ) : (fileLoading || isPdfAssetAuthLoading) ? (
@@ -3943,7 +3869,12 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
               </div>
             </ErrorBoundary>
           ) : selectedFile && isMarkdown && getMdViewMode() === 'preview' ? (
-            <div className="h-full overflow-auto p-3">
+            <div className="oc-file-preview h-full overflow-auto p-3" ref={markdownPreviewRef}>
+              <FilePreviewCommentMenu
+                containerRef={markdownPreviewRef}
+                filePath={selectedFile.path}
+                fileContent={fileContent}
+              />
               {fileContent.length > 500 * 1024 && (
                 <div className="mb-3 rounded-md border border-status-warning/20 bg-status-warning/10 px-3 py-2 text-sm text-status-warning">
                   {t('filesView.warning.largeFilePreviewLimited', { sizeKb: Math.round(fileContent.length / 1024) })}
@@ -3992,7 +3923,7 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
             </div>
             )
           ) : selectedFile && canUseShikiFileView && textViewMode === 'view' ? (
-            renderShikiFileView(selectedFile, draftContent)
+            renderShikiFileView(selectedFile, isLargeFile ? fileContent : draftContent, mainViewVirtualizer)
           ) : (
             <div
               className={cn('relative h-full', shouldMaskEditorForPendingNavigation && 'overflow-hidden')}
@@ -4262,7 +4193,7 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
         <div className="absolute right-4 top-4 z-30">
           {renderFloatingFileControls({ exitFullscreenOnly: true })}
         </div>
-        <ScrollableOverlay outerClassName="h-full min-w-0" className="h-full min-w-0">
+        <ScrollableOverlay ref={fullscreenViewVirtualizer.setScroller} outerClassName="h-full min-w-0" className={cn('h-full min-w-0', isLargeFile && '[overflow-anchor:none]')}>
           {(fileLoading || isPdfAssetAuthLoading) ? (
             suppressFileLoadingIndicator
               ? <div className="p-4" />
@@ -4309,7 +4240,14 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
               ) : null}
             </div>
           ) : isMarkdown && getMdViewMode() === 'preview' ? (
-            <div className="h-full overflow-auto p-4">
+            <div className="oc-file-preview h-full overflow-auto p-4" ref={markdownPreviewRef}>
+              {selectedFile ? (
+                <FilePreviewCommentMenu
+                  containerRef={markdownPreviewRef}
+                  filePath={selectedFile.path}
+                  fileContent={fileContent}
+                />
+              ) : null}
               {fileContent.length > 500 * 1024 && (
                   <div className="mb-3 rounded-md border border-status-warning/20 bg-status-warning/10 px-3 py-2 text-sm text-status-warning">
                     {t('filesView.warning.largeFilePreviewLimited', { sizeKb: Math.round(fileContent.length / 1024) })}
@@ -4334,7 +4272,7 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
               </ErrorBoundary>
             </div>
           ) : canUseShikiFileView && textViewMode === 'view' ? (
-            renderShikiFileView(selectedFile, draftContent)
+            renderShikiFileView(selectedFile, isLargeFile ? fileContent : draftContent, fullscreenViewVirtualizer)
           ) : (
             <div className={cn('relative h-full', shouldMaskEditorForPendingNavigation && 'overflow-hidden')}>
               <div className={cn('h-full', shouldMaskEditorForPendingNavigation && 'invisible')}>
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/PierreDiffViewer.tsx b/packages/ui/src/components/views/PierreDiffViewer.tsx
index 5375ac21..a1009bff 100644
--- a/packages/ui/src/components/views/PierreDiffViewer.tsx
+++ b/packages/ui/src/components/views/PierreDiffViewer.tsx
@@ -82,6 +82,27 @@ const PIERRE_RUNTIME_BASE_CSS = `
 const WEBKIT_SCROLL_FIX_CSS = `
   ${PIERRE_RUNTIME_BASE_CSS}
 
+  /* While a multi-line content drag is being mapped to a line selection the
+     row highlight is the feedback; the native blue text selection on top of
+     it reads as double-selection, so it is painted transparent for the drag's
+     duration only (single-line selections keep the normal look for copying). */
+  :host([data-oc-comment-drag]) {
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  /* Gutter "+" comment utility: theme primary, and smaller than Pierre's
+     1lh default, which reads oversized next to our 13px line numbers. */
+  [data-utility-button] {
+    width: 16px;
+    height: 16px;
+    align-self: center;
+    margin-right: calc(-16px + 1ch);
+    border-radius: 5px;
+    background-color: var(--primary-base);
+    color: var(--primary-foreground);
+  }
+
   :host {
     --diffs-bg-separator-override: var(--surface-elevated);
   }
@@ -598,6 +619,187 @@ export const PierreDiffViewer: React.FC<PierreDiffViewerProps> = ({
     }
   }, [setSelection]);
 
+  // Multi-line text selection over diff CONTENT highlights the same line
+  // range Pierre paints for number-column selection — without opening the
+  // comment editor. The "+" utility then targets the highlighted range.
+  const contentSelectionRef = useRef<SelectedLineRange | null>(null);
+  const contentSelectionClearTimerRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    if (!enableComments) return;
+    const root = diffRootRef.current;
+    if (!root) return;
+
+    const getShadowRoot = (): ShadowRoot | null => {
+      const host = root.querySelector('diffs-container');
+      return host instanceof HTMLElement ? host.shadowRoot : null;
+    };
+
+    const setDragAttribute = (active: boolean) => {
+      const host = root.querySelector('diffs-container');
+      if (!(host instanceof HTMLElement)) return;
+      if (active) host.setAttribute('data-oc-comment-drag', '');
+      else host.removeAttribute('data-oc-comment-drag');
+    };
+
+    const lineFromPoint = (clientX: number, clientY: number): { line: number; side: AnnotationSide; numberColumn: boolean } | null => {
+      const shadowRoot = getShadowRoot();
+      const element = shadowRoot?.elementFromPoint(clientX, clientY) ?? document.elementFromPoint(clientX, clientY);
+      if (!(element instanceof Element)) return null;
+      const numberColumn = Boolean(element.closest('[data-column-number]'));
+      const row = element.closest('[data-line]');
+      if (!(row instanceof HTMLElement)) return null;
+      const line = Number.parseInt(row.getAttribute('data-line') ?? '', 10);
+      if (!Number.isFinite(line) || line <= 0) return null;
+      const side: AnnotationSide = row.getAttribute('data-line-type') === 'change-deletion'
+        || row.closest('[data-code][data-deletions]') != null
+        ? 'deletions'
+        : 'additions';
+      return { line, side, numberColumn };
+    };
+
+    let anchor: { line: number; side: AnnotationSide } | null = null;
+    let engaged = false;
+    let pointerId: number | null = null;
+
+    const highlight = (range: SelectedLineRange) => {
+      contentSelectionRef.current = range;
+      const instance = diffInstanceRef.current;
+      if (!instance) return;
+      try {
+        isApplyingSelectionRef.current = true;
+        instance.setSelectedLines(range);
+      } catch {
+        // ignore
+      } finally {
+        isApplyingSelectionRef.current = false;
+      }
+    };
+
+    const handlePointerDown = (event: PointerEvent) => {
+      if (event.button !== 0 || event.pointerType !== 'mouse') return;
+      const hit = lineFromPoint(event.clientX, event.clientY);
+      // Number-column drags belong to Pierre's own selection handling.
+      if (!hit || hit.numberColumn) {
+        anchor = null;
+        return;
+      }
+      anchor = { line: hit.line, side: hit.side };
+      engaged = false;
+      pointerId = event.pointerId;
+    };
+
+    const handlePointerMove = (event: PointerEvent) => {
+      if (anchor == null || event.pointerId !== pointerId) return;
+      const hit = lineFromPoint(event.clientX, event.clientY);
+      if (!hit) return;
+      if (!engaged) {
+        if (hit.line === anchor.line) return;
+        // The drag crossed into another line: from here it is a line
+        // selection, not a text selection. Drop the native selection and
+        // block new one from forming for the rest of the drag.
+        engaged = true;
+        setDragAttribute(true);
+        window.getSelection()?.removeAllRanges();
+        const shadowRoot = getShadowRoot();
+        if (shadowRoot && 'getSelection' in shadowRoot) {
+          // SAFETY: getSelection on ShadowRoot is a Chromium extension absent
+          // from lib.dom; the `in` check gates the call.
+          (shadowRoot as ShadowRoot & { getSelection: () => Selection | null }).getSelection()?.removeAllRanges();
+        }
+      }
+      highlight({
+        start: Math.min(anchor.line, hit.line),
+        end: Math.max(anchor.line, hit.line),
+        side: anchor.side,
+      });
+    };
+
+    const handlePointerUp = (event: PointerEvent) => {
+      if (anchor == null || event.pointerId !== pointerId) return;
+      const wasEngaged = engaged;
+      anchor = null;
+      engaged = false;
+      pointerId = null;
+      setDragAttribute(false);
+      if (!wasEngaged) return;
+      const range = contentSelectionRef.current;
+      contentSelectionRef.current = null;
+      if (!range) return;
+      // A half-written comment survives an accidental selection elsewhere.
+      if (selectionRef.current && commentTextRef.current.trim() && !editingDraftIdRef.current) return;
+      applySelection(range);
+      if (!editingDraftIdRef.current) {
+        setCommentText('');
+      }
+    };
+
+    root.addEventListener('pointerdown', handlePointerDown);
+    document.addEventListener('pointermove', handlePointerMove, { passive: true });
+    document.addEventListener('pointerup', handlePointerUp);
+    return () => {
+      root.removeEventListener('pointerdown', handlePointerDown);
+      document.removeEventListener('pointermove', handlePointerMove);
+      document.removeEventListener('pointerup', handlePointerUp);
+      setDragAttribute(false);
+    };
+  }, [applySelection, enableComments, setCommentText]);
+
+  // The gutter "+" utility: pressing it (or dragging from it) yields a line
+  // range; select it so the comment editor opens under the lines.
+  const handleGutterUtilityClick = useCallback((range: SelectedLineRange) => {
+    if (!enableComments) return;
+    // A content-drag highlight is the intended target when the pressed line
+    // falls inside it.
+    const highlighted = contentSelectionRef.current;
+    const withinHighlight = highlighted
+      && range.start >= highlighted.start
+      && range.end <= highlighted.end
+      && (range.side == null || range.side === highlighted.side);
+    if (contentSelectionClearTimerRef.current !== null) {
+      window.clearTimeout(contentSelectionClearTimerRef.current);
+      contentSelectionClearTimerRef.current = null;
+    }
+    contentSelectionRef.current = null;
+    applySelection(withinHighlight && highlighted ? highlighted : range);
+    if (!editingDraftIdRef.current) {
+      setCommentText('');
+    }
+  }, [applySelection, enableComments, setCommentText]);
+
+  // Clicking anywhere on a diff line (not only its number cell) toggles a
+  // single-line comment selection, matching the "+" utility's target.
+  const handleLineClick = useCallback((props: { lineNumber: number; annotationSide: AnnotationSide; numberColumn: boolean }) => {
+    if (!enableComments || props.numberColumn) return;
+    // Ignore when the user selected text on the way to this click (copying
+    // code must not pop the comment editor).
+    if (window.getSelection()?.toString().trim()) return;
+    const side: SelectedLineRange['side'] = props.annotationSide;
+    const range: SelectedLineRange = { start: props.lineNumber, end: props.lineNumber, side };
+    const current = selectionRef.current;
+    if (current && current.start === range.start && current.end === range.end && current.side === range.side) {
+      if (!commentTextRef.current.trim()) {
+        setSelection(null);
+        const instance = diffInstanceRef.current;
+        try {
+          isApplyingSelectionRef.current = true;
+          instance?.setSelectedLines(null);
+        } finally {
+          isApplyingSelectionRef.current = false;
+        }
+      }
+      return;
+    }
+    if (current && commentTextRef.current.trim() && !editingDraftIdRef.current) {
+      // A half-written comment survives an accidental click elsewhere.
+      return;
+    }
+    applySelection(range);
+    if (!editingDraftIdRef.current) {
+      setCommentText('');
+    }
+  }, [applySelection, enableComments, setCommentText, setSelection]);
+
   const resolveClickedSide = useCallback((numberCell: HTMLElement): AnnotationSide => {
     const lineType =
       numberCell.closest('[data-line-type]')?.getAttribute('data-line-type')
@@ -758,11 +960,13 @@ export const PierreDiffViewer: React.FC<PierreDiffViewerProps> = ({
     overflow: wrapLines ? ('wrap' as const) : ('scroll' as const),
     disableFileHeader: true,
     enableLineSelection: enableComments,
-    enableHoverUtility: false,
+    enableGutterUtility: enableComments,
+    onGutterUtilityClick: enableComments ? handleGutterUtilityClick : undefined,
+    onLineClick: enableComments ? handleLineClick : undefined,
     onLineSelected: enableComments ? handleSelectionChange : undefined,
     unsafeCSS: WEBKIT_SCROLL_FIX_CSS,
     renderAnnotation: enableComments ? renderAnnotation : undefined,
-  }), [darkTheme.metadata.id, enableComments, isDark, isLargeContent, lightTheme.metadata.id, renderSideBySide, wrapLines, handleSelectionChange, renderAnnotation]);
+  }), [darkTheme.metadata.id, enableComments, isDark, isLargeContent, lightTheme.metadata.id, renderSideBySide, wrapLines, handleSelectionChange, handleGutterUtilityClick, handleLineClick, renderAnnotation]);
 
 
   const lineAnnotations = useMemo(() => {
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 e4da0d45..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);
@@ -642,7 +685,8 @@ export const TerminalView: React.FC<TerminalViewProps> = ({ visible }) => {
             startLine: selection.startLine,
             endLine: selection.endLine,
             code: selection.text,
-            language: activeTab.terminalSessionId ?? activeTab.id,
+            language: '',
+            terminalId: activeTab.terminalSessionId ?? activeTab.id,
             text: '',
         });
     }, [activeTab, addContextDraft, currentSessionId, effectiveDirectory, newSessionDraft?.open]);
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/components/views/useFileViewVirtualizer.ts b/packages/ui/src/components/views/useFileViewVirtualizer.ts
new file mode 100644
index 00000000..a62fed38
--- /dev/null
+++ b/packages/ui/src/components/views/useFileViewVirtualizer.ts
@@ -0,0 +1,49 @@
+import { useCallback, useLayoutEffect, useRef, useState } from 'react';
+import { Virtualizer } from '@pierre/diffs';
+
+/**
+ * Owns one pierre `Virtualizer` bound to a scrolling container.
+ *
+ * The instance is created on first render (the constructor does no DOM work)
+ * so a `<PierreFile>` mounted inside a `VirtualizerContext.Provider` already
+ * picks the virtualized path on mount. pierre queues `connect()` calls made
+ * before `setup()` and flushes them once the real scroller element is bound.
+ *
+ * The scroller passed to `setScroller` must be the actual scrolling element:
+ * pierre reads `scrollTop`/`scrollHeight`/client height and applies its scroll
+ * fix on that element.
+ */
+export function useFileViewVirtualizer() {
+  const [virtualizer] = useState(() => new Virtualizer());
+  const setupRef = useRef(false);
+
+  const setScroller = useCallback(
+    (node: HTMLElement | null) => {
+      if (node == null) {
+        // The scroller was removed (e.g. mobile tree/files toggle or exiting
+        // fullscreen). pierre's setup() no-ops when a root is already bound,
+        // so tear the binding down or the next mount would silently attach to
+        // the stale element and the virtualized file would never update.
+        virtualizer.cleanUp();
+        setupRef.current = false;
+        return;
+      }
+      if (setupRef.current) return;
+      setupRef.current = true;
+      virtualizer.setup(node, node.firstElementChild ?? undefined);
+    },
+    [virtualizer],
+  );
+
+  useLayoutEffect(
+    () => () => {
+      setupRef.current = false;
+      virtualizer.cleanUp();
+    },
+    [virtualizer],
+  );
+
+  return { virtualizer, setScroller };
+}
+
+export type FileViewVirtualizer = ReturnType<typeof useFileViewVirtualizer>;
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 b5969d69..16d067b2 100644
--- a/packages/ui/src/index.css
+++ b/packages/ui/src/index.css
@@ -76,7 +76,9 @@ button,
 }
 
 :root.light .message-content-text::selection,
-:root.light .message-content-text ::selection {
+:root.light .message-content-text ::selection,
+:root.light .oc-file-preview::selection,
+:root.light .oc-file-preview ::selection {
   background: color-mix(in srgb, var(--interactive-border-focus) 18%, transparent);
   color: var(--surface-foreground);
 }
@@ -85,6 +87,18 @@ button,
   background: color-mix(in srgb, var(--primary-base) 22%, transparent);
 }
 
+/* Quoted chat fragment kept visibly highlighted while its comment input is
+   open (the native selection collapses once the input takes focus). The
+   rectangles come from the selection's own client rects, so shape and shade
+   both match the native selection that was just showing. */
+.oc-chat-comment-rect {
+  background-color: var(--interactive-selection);
+}
+
+:root.light .oc-chat-comment-rect {
+  background-color: color-mix(in srgb, var(--interactive-border-focus) 18%, transparent);
+}
+
 .pierre-diff-wrapper {
   --diffs-bg-selection-override: color-mix(in srgb, var(--primary-base) 22%, transparent);
   --diffs-bg-selection-background-override: color-mix(in srgb, var(--primary-base) 14%, transparent);
@@ -244,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"] {
@@ -638,28 +657,30 @@ html:not(.dark) .chat-scroll {
   position: absolute;
   inset: 0;
   pointer-events: none;
+  opacity: 0;
   transition: opacity 0.2s ease;
   /* Above sticky zone headers (z-20) — the thumb must never dive under
      a stuck sidebar header while scrolling. */
   z-index: 30;
 }
 
-.overlay-scrollbar--dense,
-.overlay-scrollbar--bottom-right,
-.overlay-scrollbar--zero,
-.overlay-scrollbar--flush {
-  /* no-op: positioning handled inline */
+.overlay-scrollbar[data-visible="true"] {
+  opacity: 1;
 }
 
 .overlay-scrollbar__thumb {
-  pointer-events: auto;
+  pointer-events: none;
   position: absolute;
   width: 6px;
   background: var(--oc-scrollbar-thumb);
   border-radius: 9999px;
   opacity: 0.8;
   transition: background-color 0.15s ease, opacity 0.15s ease;
-  will-change: transform, height;
+  will-change: transform;
+}
+
+.overlay-scrollbar[data-visible="true"] .overlay-scrollbar__thumb {
+  pointer-events: auto;
 }
 
 .overlay-scrollbar__thumb:hover,
@@ -874,15 +895,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;
   }
 }
@@ -1322,6 +1343,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%;
@@ -1334,6 +1363,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;
@@ -1767,3 +1854,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..95ba0348 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([]);
     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([]);
 
     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/browser/annotationOverlay.ts b/packages/ui/src/lib/browser/annotationOverlay.ts
index cae0f284..d752fb94 100644
--- a/packages/ui/src/lib/browser/annotationOverlay.ts
+++ b/packages/ui/src/lib/browser/annotationOverlay.ts
@@ -222,7 +222,8 @@ export const buildAnnotationOverlayScript = (
     '.editor{position:fixed;left:0;top:0;display:none;align-items:center;gap:8px;width:min(420px,calc(100vw - 24px));padding:6px;padding-left:16px;border-radius:22px;border:1px solid ' + THEME.border + ';background:' + THEME.glassSurface + ';-webkit-backdrop-filter:' + THEME.glassFilter + ';backdrop-filter:' + THEME.glassFilter + ';box-shadow:0 8px 28px rgba(0,0,0,.3);pointer-events:auto}',
     '.editor textarea{flex:1;min-width:0;resize:none;border:none;background:transparent;color:' + THEME.text + ';font-size:13px;line-height:20px;outline:none;padding:6px 0;min-height:32px;max-height:104px;display:block}',
     '.editor textarea::placeholder{color:' + THEME.mutedText + '}',
-    '.editor button{appearance:none;border:none;background:' + THEME.primary + ';color:' + THEME.primaryContrast + ';border-radius:999px;padding:8px 18px;font-size:12px;line-height:18px;font-weight:600;cursor:pointer;white-space:nowrap}',
+    '.editor button{appearance:none;border:none;background:' + THEME.primary + ';color:' + THEME.primaryContrast + ';border-radius:999px;width:32px;height:32px;padding:0;display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer}',
+    '.editor button svg{width:16px;height:16px;display:block}',
     '.editor button[disabled]{opacity:.5;cursor:default}'
   ].join('');
   shadow.appendChild(style);
@@ -278,7 +279,11 @@ export const buildAnnotationOverlayScript = (
   comment.placeholder = LABELS.commentPlaceholder;
   var submit = document.createElement('button');
   submit.type = 'button';
-  submit.textContent = LABELS.submit;
+  // Icon-only attach button (Remix attachment-2), matching the chat comment
+  // input; the localized label stays available to assistive tech.
+  submit.setAttribute('aria-label', LABELS.submit);
+  submit.title = LABELS.submit;
+  submit.innerHTML = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14.8287 7.75737L9.1718 13.4142C8.78127 13.8047 8.78127 14.4379 9.1718 14.8284C9.56232 15.219 10.1955 15.219 10.586 14.8284L16.2429 9.17158C17.4144 8.00001 17.4144 6.10052 16.2429 4.92894C15.0713 3.75737 13.1718 3.75737 12.0002 4.92894L6.34337 10.5858C4.39075 12.5384 4.39075 15.7042 6.34337 17.6569C8.29599 19.6095 11.4618 19.6095 13.4144 17.6569L19.0713 12L20.4855 13.4142L14.8287 19.0711C12.095 21.8047 7.66283 21.8047 4.92916 19.0711C2.19549 16.3374 2.19549 11.9053 4.92916 9.17158L10.586 3.51473C12.5386 1.56211 15.7045 1.56211 17.6571 3.51473C19.6097 5.46735 19.6097 8.63317 17.6571 10.5858L12.0002 16.2427C10.8287 17.4142 8.92916 17.4142 7.75759 16.2427C6.58601 15.0711 6.58601 13.1716 7.75759 12L13.4144 6.34316L14.8287 7.75737Z" fill="currentColor"/></svg>';
   editor.append(comment, submit);
 
   /**
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 dc69740e..44b048d4 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',
@@ -2009,9 +2013,12 @@ export const dict = {
   'chat.textSelection.toast.addToNotesFailed': 'Fehler beim Hinzufügen zu Notizen',
   'chat.textSelection.toast.addToNotesSuccess': 'Ausgewählter Text zu Notizen hinzugefügt',
   'chat.textSelection.toast.addToNotesSummaryFailed': 'Zusammenfassung der Auswahl nicht möglich, ausgewählter Text wurde zu Notizen hinzugefügt',
-  'chat.textSelection.actions.addToChat': 'Zum Chat hinzufügen',
+  'chat.textSelection.actions.addToInput': 'Zur Eingabe hinzufügen',
+  'chat.textSelection.actions.comment': 'Kommentieren',
+  'chat.textSelection.title.commentOnSelection': 'Auswahl kommentieren',
+  'chat.textSelection.comment.placeholder': 'Optionalen Kommentar hinzufügen...',
+  'chat.textSelection.comment.attach': 'Anhängen',
   'chat.textSelection.actions.newSession': 'Neue Sitzung',
-  'chat.textSelection.actions.copy': 'Kopieren',
   'chat.textSelection.actions.addToNotes': 'Zu Notizen hinzufügen',
   'chat.textSelection.title.addToCurrentChat': 'Zum aktuellen Chat hinzufügen',
   'chat.textSelection.title.newSessionWithSelection': 'Neue Sitzung mit Auswahl erstellen',
@@ -2117,8 +2124,6 @@ export const dict = {
   'chat.chatInput.toast.togglePermissionAutoAcceptFailed': 'Fehler beim Umschalten der automatischen Zustimmung zur Berechtigung',
   'chat.chatInput.reviewComments': 'Kommentare zur Überprüfung:',
   'chat.chatInput.reviewCommentsRemove': 'Kommentare zur Überprüfung entfernen',
-  'chat.chatInput.devServerLogs': 'Entwicklungsserver-Protokolle:',
-  'chat.chatInput.devServerLogsRemove': 'Entwicklungsserver-Protokolle entfernen',
   'chat.chatInput.previewAnnotations': 'Vorschau-Anmerkungen:',
   'chat.chatInput.previewContext': 'Vorschau-Kontext:',
   'chat.chatInput.previewContextRemove': 'Vorschau-Kontext entfernen',
@@ -2903,6 +2908,19 @@ export const dict = {
   'terminalView.actions.attachSelection': 'Ausgewählte Ausgabe anhängen',
   'terminalView.actions.restart': 'Terminal neu starten',
   'chat.message.terminalContext': '{terminal}, Zeilen {start}-{end}',
+  'chat.message.context.codeComment': 'Kommentar zu {file}, Zeilen {start}-{end}',
+  'chat.message.context.codeCommentLine': 'Kommentar zu {file}, Zeile {line}',
+  'chat.message.context.chatQuote': 'Zitat aus einer früheren Nachricht',
+  'chat.message.context.fileQuote': 'Auswahl aus {file}',
+  'chat.chatInput.chatQuoteContext': 'Chat-Zitate',
+  'chat.chatInput.chatQuoteContextRemove': 'Chat-Zitate entfernen',
+  'chat.chatInput.contextPreview.selectedLabel': 'Ausgewählter Text',
+  'chat.chatInput.contextPreview.commentLabel': 'Nutzerkommentar',
+  'chat.chatInput.contextPreview.edit': 'Kommentar bearbeiten',
+  'chat.chatInput.contextPreview.remove': 'Entfernen',
+  'chat.message.context.browserAnnotation': 'Browser-Anmerkung ({page})',
+  'chat.message.context.prComment': 'GitHub-PR-Kommentar ({label})',
+  'chat.message.context.prCheck': 'Fehlgeschlagener GitHub-PR-Check ({label})',
   'chat.chatInput.terminalContext': '{terminal}, Zeilen {start}-{end}',
   'chat.chatInput.terminalContextRemove': 'Terminal-Kontext entfernen',
   'chat.chatInput.prCommentContext': 'PR-Kommentare',
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 3848730f..a4840295 100644
--- a/packages/ui/src/lib/i18n/messages/en.ts
+++ b/packages/ui/src/lib/i18n/messages/en.ts
@@ -5,6 +5,19 @@ export const dict = {
   'terminalView.actions.attachSelection': 'Attach selected output',
   'terminalView.actions.restart': 'Restart terminal',
   'chat.message.terminalContext': '{terminal}, lines {start}-{end}',
+  'chat.message.context.codeComment': 'Comment on {file}, lines {start}-{end}',
+  'chat.message.context.codeCommentLine': 'Comment on {file}, line {line}',
+  'chat.message.context.chatQuote': 'Quoted from an earlier message',
+  'chat.message.context.fileQuote': 'Selection from {file}',
+  'chat.chatInput.chatQuoteContext': 'Chat quotes',
+  'chat.chatInput.chatQuoteContextRemove': 'Remove chat quotes',
+  'chat.chatInput.contextPreview.selectedLabel': 'Selected text',
+  'chat.chatInput.contextPreview.commentLabel': 'User comment',
+  'chat.chatInput.contextPreview.edit': 'Edit comment',
+  'chat.chatInput.contextPreview.remove': 'Remove',
+  'chat.message.context.browserAnnotation': 'Browser annotation ({page})',
+  'chat.message.context.prComment': 'GitHub PR comment ({label})',
+  'chat.message.context.prCheck': 'Failed GitHub PR check ({label})',
   'chat.chatInput.terminalContext': '{terminal}, lines {start}-{end}',
   'chat.chatInput.terminalContextRemove': 'Remove terminal context',
   'chat.chatInput.prCommentContext': 'PR comments',
@@ -468,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',
@@ -2182,9 +2199,12 @@ export const dict = {
   'chat.textSelection.toast.addToNotesFailed': 'Failed to add to notes',
   'chat.textSelection.toast.addToNotesSuccess': 'Added selected text to notes',
   'chat.textSelection.toast.addToNotesSummaryFailed': 'Could not summarize selection, added selected text to notes',
-  'chat.textSelection.actions.addToChat': 'Add to chat',
+  'chat.textSelection.actions.addToInput': 'Add to input',
+  'chat.textSelection.actions.comment': 'Comment',
+  'chat.textSelection.title.commentOnSelection': 'Comment on selection',
+  'chat.textSelection.comment.placeholder': 'Add an optional comment...',
+  'chat.textSelection.comment.attach': 'Attach',
   'chat.textSelection.actions.newSession': 'New session',
-  'chat.textSelection.actions.copy': 'Copy',
   'chat.textSelection.actions.addToNotes': 'Add to notes',
   'chat.textSelection.title.addToCurrentChat': 'Add to current chat',
   'chat.textSelection.title.newSessionWithSelection': 'Create new session with selection',
@@ -2294,8 +2314,6 @@ export const dict = {
   'chat.chatInput.toast.togglePermissionAutoAcceptFailed': 'Failed to toggle permission auto-accept',
   'chat.chatInput.reviewComments': 'Review comments:',
   'chat.chatInput.reviewCommentsRemove': 'Remove review comments',
-  'chat.chatInput.devServerLogs': 'Dev Server logs:',
-  'chat.chatInput.devServerLogsRemove': 'Remove Dev Server logs',
   'chat.chatInput.previewAnnotations': 'Preview annotations:',
   'chat.chatInput.previewContext': 'Preview context:',
   'chat.chatInput.previewContextRemove': 'Remove preview context',
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 925f0972..1f6b829e 100644
--- a/packages/ui/src/lib/i18n/messages/es.ts
+++ b/packages/ui/src/lib/i18n/messages/es.ts
@@ -6,6 +6,19 @@ export const dict: Record<I18nKey, string> = {
   'terminalView.actions.attachSelection': 'Adjuntar salida seleccionada',
   'terminalView.actions.restart': 'Reiniciar terminal',
   'chat.message.terminalContext': '{terminal}, líneas {start}-{end}',
+  'chat.message.context.codeComment': 'Comentario en {file}, líneas {start}-{end}',
+  'chat.message.context.codeCommentLine': 'Comentario en {file}, línea {line}',
+  'chat.message.context.chatQuote': 'Cita de un mensaje anterior',
+  'chat.message.context.fileQuote': 'Selección de {file}',
+  'chat.chatInput.chatQuoteContext': 'Citas del chat',
+  'chat.chatInput.chatQuoteContextRemove': 'Quitar citas del chat',
+  'chat.chatInput.contextPreview.selectedLabel': 'Texto seleccionado',
+  'chat.chatInput.contextPreview.commentLabel': 'Comentario del usuario',
+  'chat.chatInput.contextPreview.edit': 'Editar comentario',
+  'chat.chatInput.contextPreview.remove': 'Quitar',
+  'chat.message.context.browserAnnotation': 'Anotación del navegador ({page})',
+  'chat.message.context.prComment': 'Comentario de PR de GitHub ({label})',
+  'chat.message.context.prCheck': 'Verificación de PR de GitHub fallida ({label})',
   'chat.chatInput.terminalContext': '{terminal}, líneas {start}-{end}',
   'chat.chatInput.terminalContextRemove': 'Eliminar contexto del terminal',
   'chat.chatInput.prCommentContext': 'Comentarios del PR',
@@ -469,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",
@@ -2160,9 +2177,12 @@ export const dict: Record<I18nKey, string> = {
   "chat.textSelection.toast.addToNotesFailed": "No se pudo añadir a las notas",
   "chat.textSelection.toast.addToNotesSuccess": "Texto seleccionado añadido a notas",
   "chat.textSelection.toast.addToNotesSummaryFailed": "No se pudo resumir la selección; se añadió el texto seleccionado a las notas",
-  "chat.textSelection.actions.addToChat": "Añadir al chat",
+  "chat.textSelection.actions.addToInput": "Añadir a la entrada",
+  "chat.textSelection.actions.comment": "Comentar",
+  "chat.textSelection.title.commentOnSelection": "Comentar la selección",
+  "chat.textSelection.comment.placeholder": "Añade un comentario opcional...",
+  "chat.textSelection.comment.attach": "Adjuntar",
   "chat.textSelection.actions.newSession": "Nueva sesión",
-  "chat.textSelection.actions.copy": "Copiar",
   "chat.textSelection.actions.addToNotes": "Añadir a las notas",
   "chat.textSelection.title.addToCurrentChat": "Añadir al chat actual",
   "chat.textSelection.title.newSessionWithSelection": "Crear nueva sesión con selección",
@@ -2260,8 +2280,6 @@ export const dict: Record<I18nKey, string> = {
   "chat.chatInput.toast.togglePermissionAutoAcceptFailed": "No se pudo cambiar la aceptación automática de permisos",
   "chat.chatInput.reviewComments": "Comentarios de revisión:",
   "chat.chatInput.reviewCommentsRemove": "Quitar comentarios de revisión",
-  "chat.chatInput.devServerLogs": "Logs del Dev Server:",
-  "chat.chatInput.devServerLogsRemove": "Quitar logs del Dev Server",
   "chat.chatInput.previewAnnotations": "Anotaciones de vista previa:",
   "chat.chatInput.previewContext": "Contexto de vista previa:",
   "chat.chatInput.previewContextRemove": "Quitar contexto de vista previa",
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 af006030..1b8ccd3a 100644
--- a/packages/ui/src/lib/i18n/messages/fr.ts
+++ b/packages/ui/src/lib/i18n/messages/fr.ts
@@ -5,6 +5,19 @@ export const dict = {
   'terminalView.actions.attachSelection': 'Joindre la sortie sélectionnée',
   'terminalView.actions.restart': 'Redémarrer le terminal',
   'chat.message.terminalContext': '{terminal}, lignes {start}-{end}',
+  'chat.message.context.codeComment': 'Commentaire sur {file}, lignes {start}-{end}',
+  'chat.message.context.codeCommentLine': 'Commentaire sur {file}, ligne {line}',
+  'chat.message.context.chatQuote': 'Citation d’un message précédent',
+  'chat.message.context.fileQuote': 'Sélection de {file}',
+  'chat.chatInput.chatQuoteContext': 'Citations du chat',
+  'chat.chatInput.chatQuoteContextRemove': 'Supprimer les citations du chat',
+  'chat.chatInput.contextPreview.selectedLabel': 'Texte sélectionné',
+  'chat.chatInput.contextPreview.commentLabel': 'Commentaire de l’utilisateur',
+  'chat.chatInput.contextPreview.edit': 'Modifier le commentaire',
+  'chat.chatInput.contextPreview.remove': 'Supprimer',
+  'chat.message.context.browserAnnotation': 'Annotation du navigateur ({page})',
+  'chat.message.context.prComment': 'Commentaire de PR GitHub ({label})',
+  'chat.message.context.prCheck': 'Vérification de PR GitHub échouée ({label})',
   'chat.chatInput.terminalContext': '{terminal}, lignes {start}-{end}',
   'chat.chatInput.terminalContextRemove': 'Supprimer le contexte du terminal',
   'chat.chatInput.prCommentContext': 'Commentaires de PR',
@@ -299,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',
@@ -1909,9 +1926,12 @@ export const dict = {
   'chat.textSelection.toast.addToNotesFailed': 'Échec de l\'ajout aux notes',
   'chat.textSelection.toast.addToNotesSuccess': 'Ajout du texte sélectionné aux notes',
   'chat.textSelection.toast.addToNotesSummaryFailed': 'Impossible de résumer la sélection, ajout du texte sélectionné aux notes',
-  'chat.textSelection.actions.addToChat': 'Ajouter au chat',
+  'chat.textSelection.actions.addToInput': 'Ajouter à la saisie',
+  'chat.textSelection.actions.comment': 'Commenter',
+  'chat.textSelection.title.commentOnSelection': 'Commenter la sélection',
+  'chat.textSelection.comment.placeholder': 'Ajouter un commentaire facultatif...',
+  'chat.textSelection.comment.attach': 'Joindre',
   'chat.textSelection.actions.newSession': 'Nouvelle session',
-  'chat.textSelection.actions.copy': 'Copie',
   'chat.textSelection.actions.addToNotes': 'Ajouter aux notes',
   'chat.textSelection.title.addToCurrentChat': 'Ajouter au chat actuel',
   'chat.textSelection.title.newSessionWithSelection': 'Créer une nouvelle session avec sélection',
@@ -2006,8 +2026,6 @@ export const dict = {
   'chat.chatInput.toast.openSessionFirst': 'Ouvrir d\'abord une session',
   'chat.chatInput.toast.togglePermissionAutoAcceptFailed': 'Échec de l\'activation de l\'acceptation automatique des autorisations',
   'chat.chatInput.reviewComments': 'Commentaires de révision :',
-  'chat.chatInput.devServerLogs': 'Journaux du serveur de développement :',
-  'chat.chatInput.devServerLogsRemove': 'Supprimer les journaux du serveur de développement',
   'chat.chatInput.previewAnnotations': 'Aperçu des annotations :',
   'chat.chatInput.previewContext': 'Contexte d\'aperçu :',
   'chat.chatInput.previewContextRemove': 'Supprimer le contexte d\'aperçu',
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 ebe9b889..fe7f1868 100644
--- a/packages/ui/src/lib/i18n/messages/ja.ts
+++ b/packages/ui/src/lib/i18n/messages/ja.ts
@@ -6,6 +6,19 @@ export const dict: Record<I18nKey, string> = {
   'terminalView.actions.attachSelection': '選択した出力を添付',
   'terminalView.actions.restart': 'ターミナルを再起動',
   'chat.message.terminalContext': '{terminal}、{start}〜{end}行',
+  'chat.message.context.codeComment': '{file} の {start}〜{end} 行へのコメント',
+  'chat.message.context.codeCommentLine': '{file} の {line} 行へのコメント',
+  'chat.message.context.chatQuote': '以前のメッセージからの引用',
+  'chat.message.context.fileQuote': '{file} からの選択',
+  'chat.chatInput.chatQuoteContext': 'チャット引用',
+  'chat.chatInput.chatQuoteContextRemove': 'チャット引用を削除',
+  'chat.chatInput.contextPreview.selectedLabel': '選択したテキスト',
+  'chat.chatInput.contextPreview.commentLabel': 'ユーザーのコメント',
+  'chat.chatInput.contextPreview.edit': 'コメントを編集',
+  'chat.chatInput.contextPreview.remove': '削除',
+  'chat.message.context.browserAnnotation': 'ブラウザ注釈（{page}）',
+  'chat.message.context.prComment': 'GitHub PR コメント（{label}）',
+  'chat.message.context.prCheck': '失敗した GitHub PR チェック（{label}）',
   'chat.chatInput.terminalContext': '{terminal}、{start}〜{end}行',
   'chat.chatInput.terminalContextRemove': 'ターミナルコンテキストを削除',
   'chat.chatInput.prCommentContext': 'PRコメント',
@@ -469,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': '更新の確認に失敗しました',
@@ -2178,9 +2195,12 @@ export const dict: Record<I18nKey, string> = {
   'chat.textSelection.toast.addToNotesFailed': 'メモへの追加に失敗しました',
   'chat.textSelection.toast.addToNotesSuccess': '選択テキストをメモに追加しました',
   'chat.textSelection.toast.addToNotesSummaryFailed': '選択範囲を要約できませんでした。選択テキストをメモに追加しました。',
-  'chat.textSelection.actions.addToChat': 'チャットに追加',
+  'chat.textSelection.actions.addToInput': '入力欄に追加',
+  'chat.textSelection.actions.comment': 'コメント',
+  'chat.textSelection.title.commentOnSelection': '選択範囲にコメント',
+  'chat.textSelection.comment.placeholder': '任意のコメントを追加...',
+  'chat.textSelection.comment.attach': '添付',
   'chat.textSelection.actions.newSession': '新しいセッション',
-  'chat.textSelection.actions.copy': 'コピー',
   'chat.textSelection.actions.addToNotes': 'メモに追加',
   'chat.textSelection.title.addToCurrentChat': '現在のチャットに追加',
   'chat.textSelection.title.newSessionWithSelection': '選択範囲で新しいセッションを作成',
@@ -2293,8 +2313,6 @@ export const dict: Record<I18nKey, string> = {
   'chat.chatInput.toast.togglePermissionAutoAcceptFailed': '権限の自動承認の切り替えに失敗しました',
   'chat.chatInput.reviewComments': 'レビューコメント:',
   'chat.chatInput.reviewCommentsRemove': 'レビューコメントを削除',
-  'chat.chatInput.devServerLogs': '開発サーバーログ:',
-  'chat.chatInput.devServerLogsRemove': '開発サーバーログを削除',
   'chat.chatInput.previewAnnotations': 'プレビュー注釈:',
   'chat.chatInput.previewContext': 'プレビューコンテキスト:',
   'chat.chatInput.previewContextRemove': 'プレビューコンテキストを削除',
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 6300cd13..a2b73918 100644
--- a/packages/ui/src/lib/i18n/messages/ko.ts
+++ b/packages/ui/src/lib/i18n/messages/ko.ts
@@ -6,6 +6,19 @@ export const dict: Record<I18nKey, string> = {
   'terminalView.actions.attachSelection': '선택한 출력 첨부',
   'terminalView.actions.restart': '터미널 다시 시작',
   'chat.message.terminalContext': '{terminal}, {start}-{end}행',
+  'chat.message.context.codeComment': '{file} {start}-{end}행에 대한 댓글',
+  'chat.message.context.codeCommentLine': '{file} {line}행에 대한 댓글',
+  'chat.message.context.chatQuote': '이전 메시지에서 인용',
+  'chat.message.context.fileQuote': '{file}에서 선택한 부분',
+  'chat.chatInput.chatQuoteContext': '채팅 인용',
+  'chat.chatInput.chatQuoteContextRemove': '채팅 인용 제거',
+  'chat.chatInput.contextPreview.selectedLabel': '선택한 텍스트',
+  'chat.chatInput.contextPreview.commentLabel': '사용자 댓글',
+  'chat.chatInput.contextPreview.edit': '댓글 편집',
+  'chat.chatInput.contextPreview.remove': '제거',
+  'chat.message.context.browserAnnotation': '브라우저 주석 ({page})',
+  'chat.message.context.prComment': 'GitHub PR 댓글 ({label})',
+  'chat.message.context.prCheck': '실패한 GitHub PR 검사 ({label})',
   'chat.chatInput.terminalContext': '{terminal}, {start}-{end}행',
   'chat.chatInput.terminalContextRemove': '터미널 컨텍스트 제거',
   'chat.chatInput.prCommentContext': 'PR 댓글',
@@ -469,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': '업데이트 확인 실패',
@@ -2184,9 +2201,12 @@ export const dict: Record<I18nKey, string> = {
   'chat.textSelection.toast.addToNotesFailed': '메모 추가 실패',
   'chat.textSelection.toast.addToNotesSuccess': '선택한 텍스트를 메모에 추가함',
   'chat.textSelection.toast.addToNotesSummaryFailed': '선택 영역을 요약할 수 없어 선택한 텍스트를 메모에 추가함',
-  'chat.textSelection.actions.addToChat': '채팅에 추가',
+  'chat.textSelection.actions.addToInput': '입력란에 추가',
+  'chat.textSelection.actions.comment': '댓글',
+  'chat.textSelection.title.commentOnSelection': '선택 영역에 댓글 달기',
+  'chat.textSelection.comment.placeholder': '선택적 댓글 추가...',
+  'chat.textSelection.comment.attach': '첨부',
   'chat.textSelection.actions.newSession': '새 세션',
-  'chat.textSelection.actions.copy': '복사',
   'chat.textSelection.actions.addToNotes': '메모에 추가',
   'chat.textSelection.title.addToCurrentChat': '현재 채팅에 추가',
   'chat.textSelection.title.newSessionWithSelection': '선택한 내용으로 새 세션 생성',
@@ -2294,8 +2314,6 @@ export const dict: Record<I18nKey, string> = {
   'chat.chatInput.toast.togglePermissionAutoAcceptFailed': '권한 자동 승인 전환에 실패했습니다',
   'chat.chatInput.reviewComments': '검토 댓글:',
   'chat.chatInput.reviewCommentsRemove': '검토 댓글 제거',
-  'chat.chatInput.devServerLogs': 'Dev Server 로그:',
-  'chat.chatInput.devServerLogsRemove': 'Dev Server 로그 제거',
   'chat.chatInput.previewAnnotations': '미리보기 주석:',
   'chat.chatInput.previewContext': '미리보기 컨텍스트:',
   'chat.chatInput.previewContextRemove': '미리보기 컨텍스트 제거',
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 666c1d73..2f3ef7b6 100644
--- a/packages/ui/src/lib/i18n/messages/pl.ts
+++ b/packages/ui/src/lib/i18n/messages/pl.ts
@@ -6,6 +6,19 @@ export const dict: Record<I18nKey, string> = {
   'terminalView.actions.attachSelection': 'Dołącz zaznaczone dane wyjściowe',
   'terminalView.actions.restart': 'Uruchom terminal ponownie',
   'chat.message.terminalContext': '{terminal}, wiersze {start}-{end}',
+  'chat.message.context.codeComment': 'Komentarz do {file}, wiersze {start}-{end}',
+  'chat.message.context.codeCommentLine': 'Komentarz do {file}, wiersz {line}',
+  'chat.message.context.chatQuote': 'Cytat z wcześniejszej wiadomości',
+  'chat.message.context.fileQuote': 'Zaznaczenie z {file}',
+  'chat.chatInput.chatQuoteContext': 'Cytaty z czatu',
+  'chat.chatInput.chatQuoteContextRemove': 'Usuń cytaty z czatu',
+  'chat.chatInput.contextPreview.selectedLabel': 'Zaznaczony tekst',
+  'chat.chatInput.contextPreview.commentLabel': 'Komentarz użytkownika',
+  'chat.chatInput.contextPreview.edit': 'Edytuj komentarz',
+  'chat.chatInput.contextPreview.remove': 'Usuń',
+  'chat.message.context.browserAnnotation': 'Adnotacja przeglądarki ({page})',
+  'chat.message.context.prComment': 'Komentarz PR GitHub ({label})',
+  'chat.message.context.prCheck': 'Nieudane sprawdzenie PR GitHub ({label})',
   'chat.chatInput.terminalContext': '{terminal}, wiersze {start}-{end}',
   'chat.chatInput.terminalContextRemove': 'Usuń kontekst terminala',
   'chat.chatInput.prCommentContext': 'Komentarze PR',
@@ -280,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',
@@ -874,9 +891,12 @@ export const dict: Record<I18nKey, string> = {
   'chat.textSelection.toast.addToNotesFailed': 'Nie udało się dodać do notatek',
   'chat.textSelection.toast.addToNotesSuccess': 'Dodano zaznaczony tekst do notatek',
   'chat.textSelection.toast.addToNotesSummaryFailed': 'Nie można podsumować zaznaczenia, dodano wybrany tekst do notatek',
-  'chat.textSelection.actions.addToChat': 'Dodaj do czatu',
+  'chat.textSelection.actions.addToInput': 'Dodaj do pola wpisywania',
+  'chat.textSelection.actions.comment': 'Skomentuj',
+  'chat.textSelection.title.commentOnSelection': 'Skomentuj zaznaczenie',
+  'chat.textSelection.comment.placeholder': 'Dodaj opcjonalny komentarz...',
+  'chat.textSelection.comment.attach': 'Załącz',
   'chat.textSelection.actions.newSession': 'Nowa sesja',
-  'chat.textSelection.actions.copy': 'Kopiuj',
   'chat.textSelection.actions.addToNotes': 'Dodaj do notatek',
   'chat.textSelection.title.addToCurrentChat': 'Dodaj do obecnego czatu',
   'chat.textSelection.title.newSessionWithSelection': 'Utwórz nową sesję z zaznaczeniem',
@@ -1210,8 +1230,6 @@ export const dict: Record<I18nKey, string> = {
   'chat.chatInput.draftPicker.projectTitle': 'Projekt',
   'chat.chatInput.draftPicker.searchProjects': 'Szukaj projektów...',
   'chat.chatInput.draftPicker.searchBranches': 'Szukaj gałęzi...',
-  'chat.chatInput.devServerLogs': 'Dev Server logs:',
-  'chat.chatInput.devServerLogsRemove': 'Usuń logi serwera deweloperskiego',
   'chat.chatInput.drop.attachFiles': 'Drop files here to attach',
   'chat.chatInput.drop.insertMention': 'Drop to insert as mention',
   'chat.chatInput.fileFallback': 'file',
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 59c2ff9e..2723fd6e 100644
--- a/packages/ui/src/lib/i18n/messages/pt-BR.ts
+++ b/packages/ui/src/lib/i18n/messages/pt-BR.ts
@@ -6,6 +6,19 @@ export const dict: Record<I18nKey, string> = {
   'terminalView.actions.attachSelection': 'Anexar saída selecionada',
   'terminalView.actions.restart': 'Reiniciar terminal',
   'chat.message.terminalContext': '{terminal}, linhas {start}-{end}',
+  'chat.message.context.codeComment': 'Comentário em {file}, linhas {start}-{end}',
+  'chat.message.context.codeCommentLine': 'Comentário em {file}, linha {line}',
+  'chat.message.context.chatQuote': 'Citação de uma mensagem anterior',
+  'chat.message.context.fileQuote': 'Seleção de {file}',
+  'chat.chatInput.chatQuoteContext': 'Citações do chat',
+  'chat.chatInput.chatQuoteContextRemove': 'Remover citações do chat',
+  'chat.chatInput.contextPreview.selectedLabel': 'Texto selecionado',
+  'chat.chatInput.contextPreview.commentLabel': 'Comentário do usuário',
+  'chat.chatInput.contextPreview.edit': 'Editar comentário',
+  'chat.chatInput.contextPreview.remove': 'Remover',
+  'chat.message.context.browserAnnotation': 'Anotação do navegador ({page})',
+  'chat.message.context.prComment': 'Comentário de PR do GitHub ({label})',
+  'chat.message.context.prCheck': 'Verificação de PR do GitHub com falha ({label})',
   'chat.chatInput.terminalContext': '{terminal}, linhas {start}-{end}',
   'chat.chatInput.terminalContextRemove': 'Remover contexto do terminal',
   'chat.chatInput.prCommentContext': 'Comentários do PR',
@@ -469,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",
@@ -2160,9 +2177,12 @@ export const dict: Record<I18nKey, string> = {
   "chat.textSelection.toast.addToNotesFailed": "Não foi possível adicionar às notas",
   "chat.textSelection.toast.addToNotesSuccess": "Texto selecionado adicionado às notas",
   "chat.textSelection.toast.addToNotesSummaryFailed": "Não foi possível resumir a seleção; o texto selecionado foi adicionado às notas",
-  "chat.textSelection.actions.addToChat": "Adicionar ao chat",
+  "chat.textSelection.actions.addToInput": "Adicionar à entrada",
+  "chat.textSelection.actions.comment": "Comentar",
+  "chat.textSelection.title.commentOnSelection": "Comentar a seleção",
+  "chat.textSelection.comment.placeholder": "Adicione um comentário opcional...",
+  "chat.textSelection.comment.attach": "Anexar",
   "chat.textSelection.actions.newSession": "Nova sessão",
-  "chat.textSelection.actions.copy": "Copiar",
   "chat.textSelection.actions.addToNotes": "Adicionar às notas",
   "chat.textSelection.title.addToCurrentChat": "Adicionar ao chat atual",
   "chat.textSelection.title.newSessionWithSelection": "Criar nova sessão com seleção",
@@ -2260,8 +2280,6 @@ export const dict: Record<I18nKey, string> = {
   "chat.chatInput.toast.togglePermissionAutoAcceptFailed": "Não foi possível alterar a aceitação automática de permissões",
   "chat.chatInput.reviewComments": "Comentários de revisão:",
   "chat.chatInput.reviewCommentsRemove": "Remover comentários de revisão",
-  "chat.chatInput.devServerLogs": "Logs do Dev Server:",
-  "chat.chatInput.devServerLogsRemove": "Remover logs do Dev Server",
   "chat.chatInput.previewAnnotations": "Anotações da visualização:",
   "chat.chatInput.previewContext": "Contexto da visualização:",
   "chat.chatInput.previewContextRemove": "Remover contexto da visualização",
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 a90cab4c..90c85f21 100644
--- a/packages/ui/src/lib/i18n/messages/uk.ts
+++ b/packages/ui/src/lib/i18n/messages/uk.ts
@@ -6,6 +6,19 @@ export const dict: Record<I18nKey, string> = {
   'terminalView.actions.attachSelection': 'Прикріпити вибраний вивід',
   'terminalView.actions.restart': 'Перезапустити термінал',
   'chat.message.terminalContext': '{terminal}, рядки {start}-{end}',
+  'chat.message.context.codeComment': 'Коментар до {file}, рядки {start}-{end}',
+  'chat.message.context.codeCommentLine': 'Коментар до {file}, рядок {line}',
+  'chat.message.context.chatQuote': 'Цитата з попереднього повідомлення',
+  'chat.message.context.fileQuote': 'Виділене з {file}',
+  'chat.chatInput.chatQuoteContext': 'Цитати з чату',
+  'chat.chatInput.chatQuoteContextRemove': 'Прибрати цитати з чату',
+  'chat.chatInput.contextPreview.selectedLabel': 'Виділений текст',
+  'chat.chatInput.contextPreview.commentLabel': 'Коментар користувача',
+  'chat.chatInput.contextPreview.edit': 'Редагувати коментар',
+  'chat.chatInput.contextPreview.remove': 'Прибрати',
+  'chat.message.context.browserAnnotation': 'Анотація браузера ({page})',
+  'chat.message.context.prComment': 'Коментар PR GitHub ({label})',
+  'chat.message.context.prCheck': 'Невдала перевірка PR GitHub ({label})',
   'chat.chatInput.terminalContext': '{terminal}, рядки {start}-{end}',
   'chat.chatInput.terminalContextRemove': 'Видалити контекст термінала',
   'chat.chatInput.prCommentContext': 'Коментарі PR',
@@ -469,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": "Не вдалося перейти на наявність оновлень",
@@ -2160,9 +2177,12 @@ export const dict: Record<I18nKey, string> = {
   "chat.textSelection.toast.addToNotesFailed": "Не вдалося додати до нотаток",
   "chat.textSelection.toast.addToNotesSuccess": "Вибраний текст додано до нотаток",
   "chat.textSelection.toast.addToNotesSummaryFailed": "Не вдалося підсумувати виділення, виділений текст додано до нотаток",
-  "chat.textSelection.actions.addToChat": "Додати в чат",
+  "chat.textSelection.actions.addToInput": "Додати в поле вводу",
+  "chat.textSelection.actions.comment": "Коментувати",
+  "chat.textSelection.title.commentOnSelection": "Коментувати виділене",
+  "chat.textSelection.comment.placeholder": "Додайте коментар за бажанням...",
+  "chat.textSelection.comment.attach": "Прикріпити",
   "chat.textSelection.actions.newSession": "Нова сесія",
-  "chat.textSelection.actions.copy": "Копіювати",
   "chat.textSelection.actions.addToNotes": "Додати до нотаток",
   "chat.textSelection.title.addToCurrentChat": "Додати до поточного чату",
   "chat.textSelection.title.newSessionWithSelection": "Створити нову сесію із виділенням",
@@ -2260,8 +2280,6 @@ export const dict: Record<I18nKey, string> = {
   "chat.chatInput.toast.togglePermissionAutoAcceptFailed": "Не вдалося ввімкнути автоматичне прийняття дозволів",
   "chat.chatInput.reviewComments": "Коментарі рев’ю:",
   "chat.chatInput.reviewCommentsRemove": "Прибрати коментарі рев’ю",
-  "chat.chatInput.devServerLogs": "Логи Dev Server:",
-  "chat.chatInput.devServerLogsRemove": "Прибрати логи Dev Server",
   "chat.chatInput.previewAnnotations": "Анотації перегляду:",
   "chat.chatInput.previewContext": "Контекст перегляду:",
   "chat.chatInput.previewContextRemove": "Прибрати контекст перегляду",
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 175b755b..007a243b 100644
--- a/packages/ui/src/lib/i18n/messages/zh-CN.ts
+++ b/packages/ui/src/lib/i18n/messages/zh-CN.ts
@@ -6,6 +6,19 @@ export const dict: Record<I18nKey, string> = {
   'terminalView.actions.attachSelection': '附加所选输出',
   'terminalView.actions.restart': '重启终端',
   'chat.message.terminalContext': '{terminal}，第 {start}-{end} 行',
+  'chat.message.context.codeComment': '对 {file} 第 {start}-{end} 行的评论',
+  'chat.message.context.codeCommentLine': '对 {file} 第 {line} 行的评论',
+  'chat.message.context.chatQuote': '引用自先前的消息',
+  'chat.message.context.fileQuote': '来自 {file} 的选择',
+  'chat.chatInput.chatQuoteContext': '聊天引用',
+  'chat.chatInput.chatQuoteContextRemove': '移除聊天引用',
+  'chat.chatInput.contextPreview.selectedLabel': '所选文本',
+  'chat.chatInput.contextPreview.commentLabel': '用户评论',
+  'chat.chatInput.contextPreview.edit': '编辑评论',
+  'chat.chatInput.contextPreview.remove': '移除',
+  'chat.message.context.browserAnnotation': '浏览器标注（{page}）',
+  'chat.message.context.prComment': 'GitHub PR 评论（{label}）',
+  'chat.message.context.prCheck': '失败的 GitHub PR 检查（{label}）',
   'chat.chatInput.terminalContext': '{terminal}，第 {start}-{end} 行',
   'chat.chatInput.terminalContextRemove': '移除终端上下文',
   'chat.chatInput.prCommentContext': 'PR 评论',
@@ -469,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': '检查更新失败',
@@ -2148,9 +2165,12 @@ export const dict: Record<I18nKey, string> = {
   'chat.textSelection.toast.addToNotesFailed': '添加到笔记失败',
   'chat.textSelection.toast.addToNotesSuccess': '已将选中文本添加到笔记',
   'chat.textSelection.toast.addToNotesSummaryFailed': '无法总结所选内容，已将所选文本添加到笔记',
-  'chat.textSelection.actions.addToChat': '添加到聊天',
+  'chat.textSelection.actions.addToInput': '添加到输入框',
+  'chat.textSelection.actions.comment': '评论',
+  'chat.textSelection.title.commentOnSelection': '评论所选内容',
+  'chat.textSelection.comment.placeholder': '添加可选评论...',
+  'chat.textSelection.comment.attach': '附加',
   'chat.textSelection.actions.newSession': '新建会话',
-  'chat.textSelection.actions.copy': '复制',
   'chat.textSelection.actions.addToNotes': '添加到笔记',
   'chat.textSelection.title.addToCurrentChat': '添加到当前聊天',
   'chat.textSelection.title.newSessionWithSelection': '使用选中内容创建新会话',
@@ -2260,8 +2280,6 @@ export const dict: Record<I18nKey, string> = {
   'chat.chatInput.toast.togglePermissionAutoAcceptFailed': '切换权限自动接受失败',
   'chat.chatInput.reviewComments': '审查评论：',
   'chat.chatInput.reviewCommentsRemove': '移除审查评论',
-  'chat.chatInput.devServerLogs': 'Dev Server 日志：',
-  'chat.chatInput.devServerLogsRemove': '移除 Dev Server 日志',
   'chat.chatInput.previewAnnotations': '预览注释：',
   'chat.chatInput.previewContext': '预览上下文：',
   'chat.chatInput.previewContextRemove': '移除预览上下文',
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 ae1d8a49..1e4750e3 100644
--- a/packages/ui/src/lib/i18n/messages/zh-TW.ts
+++ b/packages/ui/src/lib/i18n/messages/zh-TW.ts
@@ -6,6 +6,19 @@ export const dict: Record<I18nKey, string> = {
   'terminalView.actions.attachSelection': '附加所選輸出',
   'terminalView.actions.restart': '重新啟動終端',
   'chat.message.terminalContext': '{terminal}，第 {start}-{end} 行',
+  'chat.message.context.codeComment': '對 {file} 第 {start}-{end} 行的評論',
+  'chat.message.context.codeCommentLine': '對 {file} 第 {line} 行的評論',
+  'chat.message.context.chatQuote': '引用自先前的訊息',
+  'chat.message.context.fileQuote': '來自 {file} 的選取內容',
+  'chat.chatInput.chatQuoteContext': '聊天引用',
+  'chat.chatInput.chatQuoteContextRemove': '移除聊天引用',
+  'chat.chatInput.contextPreview.selectedLabel': '所選文字',
+  'chat.chatInput.contextPreview.commentLabel': '使用者留言',
+  'chat.chatInput.contextPreview.edit': '編輯留言',
+  'chat.chatInput.contextPreview.remove': '移除',
+  'chat.message.context.browserAnnotation': '瀏覽器標註（{page}）',
+  'chat.message.context.prComment': 'GitHub PR 留言（{label}）',
+  'chat.message.context.prCheck': '失敗的 GitHub PR 檢查（{label}）',
   'chat.chatInput.terminalContext': '{terminal}，第 {start}-{end} 行',
   'chat.chatInput.terminalContextRemove': '移除終端上下文',
   'chat.chatInput.prCommentContext': 'PR 留言',
@@ -482,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': '檢查更新失敗',
@@ -2152,9 +2169,12 @@ export const dict: Record<I18nKey, string> = {
   'chat.textSelection.toast.addToNotesFailed': '加入筆記失敗',
   'chat.textSelection.toast.addToNotesSuccess': '已將選取文字加入筆記',
   'chat.textSelection.toast.addToNotesSummaryFailed': '無法總結所選內容，已將所選文字加入筆記',
-  'chat.textSelection.actions.addToChat': '加入聊天',
+  'chat.textSelection.actions.addToInput': '加入輸入框',
+  'chat.textSelection.actions.comment': '留言',
+  'chat.textSelection.title.commentOnSelection': '對所選內容留言',
+  'chat.textSelection.comment.placeholder': '新增選填留言...',
+  'chat.textSelection.comment.attach': '附加',
   'chat.textSelection.actions.newSession': '新增會話',
-  'chat.textSelection.actions.copy': '複製',
   'chat.textSelection.actions.addToNotes': '加入筆記',
   'chat.textSelection.title.addToCurrentChat': '加入目前聊天',
   'chat.textSelection.title.newSessionWithSelection': '使用選取內容建立新會話',
@@ -2264,8 +2284,6 @@ export const dict: Record<I18nKey, string> = {
   'chat.chatInput.toast.togglePermissionAutoAcceptFailed': '切換權限自動接受失敗',
   'chat.chatInput.reviewComments': '審查留言：',
   'chat.chatInput.reviewCommentsRemove': '移除審查留言',
-  'chat.chatInput.devServerLogs': 'Dev Server 日誌：',
-  'chat.chatInput.devServerLogsRemove': '移除 Dev Server 日誌',
   'chat.chatInput.previewAnnotations': '預覽註釋：',
   'chat.chatInput.previewContext': '預覽上下文：',
   'chat.chatInput.previewContextRemove': '移除預覽上下文',
diff --git a/packages/ui/src/lib/messages/contextParts.test.ts b/packages/ui/src/lib/messages/contextParts.test.ts
new file mode 100644
index 00000000..eb980435
--- /dev/null
+++ b/packages/ui/src/lib/messages/contextParts.test.ts
@@ -0,0 +1,129 @@
+import { describe, expect, test } from 'bun:test';
+
+import type { InlineCommentDraft } from '@/stores/useInlineCommentDraftStore';
+import {
+    CONTEXT_METADATA_KEY,
+    contextPayloadFromDraft,
+    createContextPart,
+    formatContextText,
+    readContextPart,
+    type ContextPartPayload,
+} from './contextParts';
+
+const draft = (overrides: Partial<InlineCommentDraft> = {}): InlineCommentDraft => ({
+    id: 'icd-1',
+    sessionKey: 's1',
+    source: 'diff',
+    fileLabel: 'src/app.ts',
+    startLine: 3,
+    endLine: 5,
+    side: 'modified',
+    code: 'const x = 1;',
+    language: 'ts',
+    text: 'fix this',
+    createdAt: 1,
+    ...overrides,
+});
+
+describe('model-facing text', () => {
+    test('diff comments keep the pre-metadata wording, including the side', () => {
+        expect(formatContextText(contextPayloadFromDraft(draft())))
+            .toBe('Comment on `src/app.ts` lines 3-5 (modified):\n```ts\nconst x = 1;\n```\n\nfix this');
+    });
+
+    test('file and plan comments omit the side', () => {
+        expect(formatContextText(contextPayloadFromDraft(draft({ source: 'file', side: undefined }))))
+            .toBe('Comment on `src/app.ts` lines 3-5:\n```ts\nconst x = 1;\n```\n\nfix this');
+    });
+
+    test('terminal selections keep the terminal_context envelope', () => {
+        const payload = contextPayloadFromDraft(draft({
+            source: 'terminal',
+            fileLabel: 'Terminal 1',
+            terminalId: 'term-1',
+            language: '',
+            startLine: 12,
+            endLine: 13,
+            code: 'npm run build\nok',
+            text: '',
+        }));
+        expect(formatContextText(payload)).toBe([
+            '<terminal_context>',
+            '- Terminal 1 lines 12-13:',
+            '  12 | npm run build',
+            '  13 | ok',
+            '</terminal_context>',
+        ].join('\n'));
+    });
+
+    test('annotations send the prompt, with user text appended when present', () => {
+        const base = draft({ source: 'preview-annotation', fileLabel: 'https://app.dev', code: 'prompt body', text: '' });
+        expect(formatContextText(contextPayloadFromDraft(base))).toBe('prompt body');
+        expect(formatContextText(contextPayloadFromDraft({ ...base, text: 'also this' })))
+            .toBe('prompt body\n\nalso this');
+    });
+
+    test('chat quotes send the fragment as a blockquote with the comment below', () => {
+        expect(formatContextText(contextPayloadFromDraft(draft({ source: 'chat-quote', fileLabel: 'msg_1', code: 'first line\nsecond line', text: 'why so?' }))))
+            .toBe('Comment on this fragment of an earlier message in this conversation:\n> first line\n> second line\n\nwhy so?');
+    });
+
+    test('file quotes carry the fragment with an optional line range', () => {
+        expect(formatContextText(contextPayloadFromDraft(draft({ source: 'file-quote', fileLabel: 'docs/CHANGELOG.md', startLine: 12, endLine: 13, code: 'a\nb', text: 'why?' }))))
+            .toBe('Comment on this fragment of `docs/CHANGELOG.md` lines 12-13:\n> a\n> b\n\nwhy?');
+        expect(formatContextText(contextPayloadFromDraft(draft({ source: 'file-quote', fileLabel: 'docs/CHANGELOG.md', startLine: 0, endLine: 0, code: 'a', text: '' }))))
+            .toBe('Comment on this fragment of `docs/CHANGELOG.md`:\n> a');
+    });
+
+    test('PR comments and checks keep their attachment wording', () => {
+        expect(formatContextText(contextPayloadFromDraft(draft({ source: 'pr-comment', fileLabel: 'octo/repo#7', code: 'the comment', text: '' }))))
+            .toBe('Attached GitHub PR comment (octo/repo#7):\n\nthe comment');
+        expect(formatContextText(contextPayloadFromDraft(draft({ source: 'pr-check', fileLabel: 'CI / build', code: 'boom', text: 'why?' }))))
+            .toBe('Attached failed GitHub PR check (CI / build):\n```\nboom\n```\n\nwhy?');
+    });
+});
+
+describe('round-trip through part metadata', () => {
+    const asPart = (payload: ContextPartPayload, text?: string) => ({
+        type: 'text',
+        ...createContextPart(payload, text),
+    });
+
+    test('every draft-based kind survives create → read unchanged', () => {
+        const payloads = [
+            contextPayloadFromDraft(draft()),
+            contextPayloadFromDraft(draft({ source: 'plan', side: undefined })),
+            contextPayloadFromDraft(draft({ source: 'terminal', terminalId: 'term-1', language: '' })),
+            contextPayloadFromDraft(draft({ source: 'preview-annotation' })),
+            contextPayloadFromDraft(draft({ source: 'pr-comment' })),
+            contextPayloadFromDraft(draft({ source: 'pr-check' })),
+            contextPayloadFromDraft(draft({ source: 'chat-quote', fileLabel: 'msg_1' })),
+            contextPayloadFromDraft(draft({ source: 'file-quote', startLine: 3, endLine: 5 })),
+            contextPayloadFromDraft(draft({ source: 'file-quote', startLine: 0, endLine: 0 })),
+        ];
+        for (const payload of payloads) {
+            expect(readContextPart(asPart(payload))).toEqual(payload);
+        }
+    });
+
+    test('github references carry picker-built text and structured identity', () => {
+        const payload: ContextPartPayload = { kind: 'github-issue', number: 3, title: 'Bug', url: 'https://x/issues/3' };
+        const part = asPart(payload, 'GitHub issue context (JSON)\n{}');
+        expect(part.text).toBe('GitHub issue context (JSON)\n{}');
+        expect(readContextPart(part)).toEqual(payload);
+    });
+
+    test('non-text parts, missing metadata, and malformed payloads read as null', () => {
+        expect(readContextPart({ type: 'file', metadata: {} })).toBeNull();
+        expect(readContextPart({ type: 'text' })).toBeNull();
+        expect(readContextPart({ type: 'text', metadata: { [CONTEXT_METADATA_KEY]: { kind: 'nope' } } })).toBeNull();
+        expect(readContextPart({
+            type: 'text',
+            metadata: { [CONTEXT_METADATA_KEY]: { kind: 'terminal', terminalId: 1, terminalLabel: 'x', startLine: 1, endLine: 1, output: '' } },
+        })).toBeNull();
+        expect(readContextPart({
+            type: 'text',
+            metadata: { [CONTEXT_METADATA_KEY]: { kind: 'github-issue', number: 0, title: 't', url: 'u' } },
+        })).toBeNull();
+    });
+});
diff --git a/packages/ui/src/lib/messages/contextParts.ts b/packages/ui/src/lib/messages/contextParts.ts
new file mode 100644
index 00000000..d31e0ee0
--- /dev/null
+++ b/packages/ui/src/lib/messages/contextParts.ts
@@ -0,0 +1,314 @@
+/**
+ * Structured context attached to an outgoing message.
+ *
+ * Every user-attached context item — an inline code comment, a terminal
+ * selection, a browser annotation, a GitHub PR comment or failed check, a
+ * linked issue or PR — is sent as its own synthetic text part. The part's
+ * `text` is what the model reads; the part's `metadata[CONTEXT_METADATA_KEY]`
+ * carries the same information structured, so the timeline can render the
+ * context as a dedicated block after the message round-trips through the
+ * OpenCode server (which persists part metadata verbatim).
+ *
+ * This module owns both directions: building the part at send time and
+ * parsing the metadata back at render time. Keeping them together is what
+ * guarantees they cannot drift apart.
+ */
+
+import { z } from 'zod';
+import type { TextPart } from '@opencode-ai/sdk/v2';
+import type { InlineCommentDraft } from '@/stores/useInlineCommentDraftStore';
+import { appendTerminalContexts } from './terminalContext';
+
+export const CONTEXT_METADATA_KEY = 'openchamberContext';
+
+export type CodeCommentContext = {
+    kind: 'code-comment';
+    source: 'diff' | 'file' | 'plan';
+    fileLabel: string;
+    startLine: number;
+    endLine: number;
+    side?: 'original' | 'modified';
+    language: string;
+    code: string;
+    text: string;
+};
+
+type TerminalContextPayload = {
+    kind: 'terminal';
+    terminalId: string;
+    terminalLabel: string;
+    startLine: number;
+    endLine: number;
+    output: string;
+};
+
+type BrowserAnnotationContext = {
+    kind: 'browser-annotation';
+    pageUrl: string;
+    /** The full annotation prompt shown to the model. */
+    prompt: string;
+    text: string;
+};
+
+type PrCommentContext = {
+    kind: 'pr-comment';
+    label: string;
+    body: string;
+    text: string;
+};
+
+type PrCheckContext = {
+    kind: 'pr-check';
+    label: string;
+    output: string;
+    text: string;
+};
+
+type GitHubIssueContext = {
+    kind: 'github-issue';
+    number: number;
+    title: string;
+    url: string;
+};
+
+type FileQuoteContext = {
+    kind: 'file-quote';
+    fileLabel: string;
+    /** Present when the fragment could be located in the file source. */
+    startLine?: number;
+    endLine?: number;
+    quote: string;
+    text: string;
+};
+
+type ChatQuoteContext = {
+    kind: 'chat-quote';
+    /** The message the quote came from, when known. */
+    messageId?: string;
+    quote: string;
+    text: string;
+};
+
+type GitHubPrContext = {
+    kind: 'github-pr';
+    number: number;
+    title: string;
+    url: string;
+};
+
+export type ContextPartPayload =
+    | CodeCommentContext
+    | TerminalContextPayload
+    | BrowserAnnotationContext
+    | PrCommentContext
+    | PrCheckContext
+    | FileQuoteContext
+    | ChatQuoteContext
+    | GitHubIssueContext
+    | GitHubPrContext;
+
+export type ContextPartMetadata = { [K in typeof CONTEXT_METADATA_KEY]: ContextPartPayload };
+
+export type ContextPart = {
+    text: string;
+    synthetic: true;
+    metadata: ContextPartMetadata;
+};
+
+/**
+ * The model-facing text for a context payload. The wording intentionally
+ * matches what OpenChamber sent before parts carried metadata, so model
+ * behavior does not change with the transport format.
+ */
+export function formatContextText(payload: ContextPartPayload): string {
+    switch (payload.kind) {
+        case 'code-comment': {
+            const range = `lines ${payload.startLine}-${payload.endLine}`;
+            const sideNote = payload.source === 'diff' && payload.side ? ` (${payload.side})` : '';
+            return `Comment on \`${payload.fileLabel}\` ${range}${sideNote}:\n\`\`\`${payload.language}\n${payload.code}\n\`\`\`\n\n${payload.text}`;
+        }
+        case 'terminal':
+            return appendTerminalContexts('', [{
+                terminalId: payload.terminalId,
+                terminalLabel: payload.terminalLabel,
+                startLine: payload.startLine,
+                endLine: payload.endLine,
+                text: payload.output,
+            }]);
+        case 'browser-annotation':
+            return payload.text ? `${payload.prompt}\n\n${payload.text}` : payload.prompt;
+        case 'pr-comment':
+            return `Attached GitHub PR comment (${payload.label}):\n\n${payload.body}${payload.text ? `\n\n${payload.text}` : ''}`;
+        case 'file-quote': {
+            const location = payload.startLine != null && payload.endLine != null
+                ? ` lines ${payload.startLine}-${payload.endLine}`
+                : '';
+            const quoted = payload.quote.split('\n').map((line) => `> ${line}`).join('\n');
+            return `Comment on this fragment of \`${payload.fileLabel}\`${location}:\n${quoted}${payload.text ? `\n\n${payload.text}` : ''}`;
+        }
+        case 'chat-quote': {
+            const quoted = payload.quote.split('\n').map((line) => `> ${line}`).join('\n');
+            return `Comment on this fragment of an earlier message in this conversation:\n${quoted}${payload.text ? `\n\n${payload.text}` : ''}`;
+        }
+        case 'pr-check':
+            return `Attached failed GitHub PR check (${payload.label}):\n\`\`\`\n${payload.output}\n\`\`\`${payload.text ? `\n\n${payload.text}` : ''}`;
+        case 'github-issue':
+        case 'github-pr':
+            // Linked issues/PRs carry server-fetched context text built by
+            // their pickers; there is no default text to derive here.
+            return '';
+    }
+}
+
+/**
+ * Build the synthetic part for one context payload. `text` overrides the
+ * derived text; github-issue/github-pr payloads require it because their
+ * model-facing context is fetched by the picker, not derived from metadata.
+ */
+export function createContextPart(payload: ContextPartPayload, text?: string): ContextPart {
+    const resolvedText = text ?? formatContextText(payload);
+    return {
+        text: resolvedText,
+        synthetic: true,
+        metadata: { [CONTEXT_METADATA_KEY]: payload },
+    };
+}
+
+/** Map a composer context draft to its structured payload. */
+export function contextPayloadFromDraft(draft: InlineCommentDraft): ContextPartPayload {
+    switch (draft.source) {
+        case 'terminal':
+            return {
+                kind: 'terminal',
+                terminalId: draft.terminalId ?? '',
+                terminalLabel: draft.fileLabel,
+                startLine: draft.startLine,
+                endLine: draft.endLine,
+                output: draft.code,
+            };
+        case 'preview-annotation':
+            return {
+                kind: 'browser-annotation',
+                pageUrl: draft.fileLabel,
+                prompt: draft.code,
+                text: draft.text,
+            };
+        case 'pr-comment':
+            return { kind: 'pr-comment', label: draft.fileLabel, body: draft.code, text: draft.text };
+        case 'pr-check':
+            return { kind: 'pr-check', label: draft.fileLabel, output: draft.code, text: draft.text };
+        case 'file-quote': {
+            const payload: FileQuoteContext = { kind: 'file-quote', fileLabel: draft.fileLabel, quote: draft.code, text: draft.text };
+            if (draft.startLine > 0 && draft.endLine > 0) {
+                payload.startLine = draft.startLine;
+                payload.endLine = draft.endLine;
+            }
+            return payload;
+        }
+        case 'chat-quote': {
+            const payload: ChatQuoteContext = { kind: 'chat-quote', quote: draft.code, text: draft.text };
+            if (draft.fileLabel) payload.messageId = draft.fileLabel;
+            return payload;
+        }
+        case 'diff':
+        case 'file':
+        case 'plan': {
+            const payload: CodeCommentContext = {
+                kind: 'code-comment',
+                source: draft.source,
+                fileLabel: draft.fileLabel,
+                startLine: draft.startLine,
+                endLine: draft.endLine,
+                language: draft.language,
+                code: draft.code,
+                text: draft.text,
+            };
+            if (draft.source === 'diff' && draft.side) payload.side = draft.side;
+            return payload;
+        }
+    }
+}
+
+// ---------------------------------------------------------------------------
+// Read-back: parsing part metadata at the display boundary
+// ---------------------------------------------------------------------------
+
+const contextPayloadSchema = z.discriminatedUnion('kind', [
+    z.object({
+        kind: z.literal('code-comment'),
+        source: z.enum(['diff', 'file', 'plan']),
+        fileLabel: z.string(),
+        startLine: z.number(),
+        endLine: z.number(),
+        side: z.enum(['original', 'modified']).optional(),
+        language: z.string(),
+        code: z.string(),
+        text: z.string(),
+    }),
+    z.object({
+        kind: z.literal('terminal'),
+        terminalId: z.string(),
+        terminalLabel: z.string(),
+        startLine: z.number(),
+        endLine: z.number(),
+        output: z.string(),
+    }),
+    z.object({
+        kind: z.literal('browser-annotation'),
+        pageUrl: z.string(),
+        prompt: z.string(),
+        text: z.string(),
+    }),
+    z.object({
+        kind: z.literal('pr-comment'),
+        label: z.string(),
+        body: z.string(),
+        text: z.string(),
+    }),
+    z.object({
+        kind: z.literal('pr-check'),
+        label: z.string(),
+        output: z.string(),
+        text: z.string(),
+    }),
+    z.object({
+        kind: z.literal('file-quote'),
+        fileLabel: z.string(),
+        startLine: z.number().optional(),
+        endLine: z.number().optional(),
+        quote: z.string(),
+        text: z.string(),
+    }),
+    z.object({
+        kind: z.literal('chat-quote'),
+        messageId: z.string().optional(),
+        quote: z.string(),
+        text: z.string(),
+    }),
+    z.object({
+        kind: z.literal('github-issue'),
+        number: z.number().int().positive(),
+        title: z.string(),
+        url: z.string(),
+    }),
+    z.object({
+        kind: z.literal('github-pr'),
+        number: z.number().int().positive(),
+        title: z.string(),
+        url: z.string(),
+    }),
+]);
+
+/** The subset of a message part that context read-back inspects. */
+export type ContextCarrierPart = { type: string } & Pick<TextPart, 'metadata'>;
+
+/**
+ * Read the structured context payload from a message part, if it carries one.
+ * The part comes from the server or an optimistic insert, so the payload is
+ * schema-validated before it is trusted.
+ */
+export function readContextPart(part: ContextCarrierPart): ContextPartPayload | null {
+    if (part.type !== 'text') return null;
+    const parsed = contextPayloadSchema.safeParse(part.metadata?.[CONTEXT_METADATA_KEY]);
+    return parsed.success ? parsed.data : null;
+}
diff --git a/packages/ui/src/lib/messages/inlineComments.ts b/packages/ui/src/lib/messages/inlineComments.ts
deleted file mode 100644
index 77c48594..00000000
--- a/packages/ui/src/lib/messages/inlineComments.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import type { InlineCommentDraft } from '@/stores/useInlineCommentDraftStore';
-import { appendTerminalContexts } from './terminalContext';
-
-/**
- * Format a single inline comment draft into the standard message format
- * used by diff, plan, and file viewers
- */
-function formatInlineCommentDraft(draft: InlineCommentDraft): string {
-  const { fileLabel, startLine, endLine, side, language, code, text } = draft;
-  
-  // Diff format includes side (original/modified)
-  if (draft.source === 'diff' && side) {
-    return `Comment on \`${fileLabel}\` lines ${startLine}-${endLine} (${side}):\n\`\`\`${language}\n${code}\n\`\`\`\n\n${text}`;
-  }
-
-  if (draft.source === 'preview-console') {
-    return `Attached preview context from \`${fileLabel}\`:\n\`\`\`${language}\n${code}\n\`\`\`\n\n${text}`;
-  }
-
-  if (draft.source === 'preview-annotation') {
-    return text ? `${code}\n\n${text}` : code;
-  }
-
-  if (draft.source === 'pr-comment') {
-    return `Attached GitHub PR comment (${fileLabel}):\n\n${code}${text ? `\n\n${text}` : ''}`;
-  }
-
-  if (draft.source === 'pr-check') {
-    return `Attached failed GitHub PR check (${fileLabel}):\n\`\`\`\n${code}\n\`\`\`${text ? `\n\n${text}` : ''}`;
-  }
-  
-  // Plan and file format (no side)
-  return `Comment on \`${fileLabel}\` lines ${startLine}-${endLine}:\n\`\`\`${language}\n${code}\n\`\`\`\n\n${text}`;
-}
-
-/**
- * Format multiple inline comment drafts into a single string
- * with each comment separated by a blank line
- */
-function formatInlineCommentDrafts(drafts: InlineCommentDraft[]): string {
-  if (drafts.length === 0) return '';
-
-  if (drafts.every((draft) => draft.source === 'preview-annotation')) {
-    return drafts.map(formatInlineCommentDraft).join('\n\n---\n\n');
-  }
-   
-  return drafts.map(formatInlineCommentDraft).join('\n\n');
-}
-
-/**
- * Append inline comment drafts to an existing message text
- * If the text is empty, returns just the formatted comments
- * Otherwise, appends comments after a blank line separator
- */
-export function appendInlineComments(text: string, drafts: InlineCommentDraft[]): string {
-  if (drafts.length === 0) return text;
-  const terminalDrafts = drafts.filter((draft) => draft.source === 'terminal');
-  const otherDrafts = drafts.filter((draft) => draft.source !== 'terminal');
-  const withComments = otherDrafts.length > 0
-    ? (text.trim() ? `${text}\n\n${formatInlineCommentDrafts(otherDrafts)}` : formatInlineCommentDrafts(otherDrafts))
-    : text;
-  if (terminalDrafts.length > 0) {
-    return appendTerminalContexts(withComments, terminalDrafts.map((draft) => ({
-      terminalId: draft.language,
-      terminalLabel: draft.fileLabel,
-      startLine: draft.startLine,
-      endLine: draft.endLine,
-      text: draft.code,
-    })));
-  }
-  return withComments;
-}
diff --git a/packages/ui/src/lib/messages/synthetic.test.ts b/packages/ui/src/lib/messages/synthetic.test.ts
index 8f1aa807..c29a99a7 100644
--- a/packages/ui/src/lib/messages/synthetic.test.ts
+++ b/packages/ui/src/lib/messages/synthetic.test.ts
@@ -120,4 +120,26 @@ describe("filterSyntheticParts", () => {
     ]
     expect(filterSyntheticParts(parts)).toEqual(parts)
   })
+
+  test("keeps synthetic parts carrying user context metadata alongside user text", () => {
+    const userPart = createTextPart("1", "user prompt")
+    const contextPart = {
+      ...createTextPart("2", "Comment on `x.ts` lines 1-2:\n```ts\ncode\n```\n\nfix", true),
+      metadata: {
+        openchamberContext: {
+          kind: "code-comment",
+          source: "diff",
+          fileLabel: "x.ts",
+          startLine: 1,
+          endLine: 2,
+          language: "ts",
+          code: "code",
+          text: "fix",
+        },
+      },
+    }
+    const plainSynthetic = createTextPart("3", "instructions", true)
+    expect(filterSyntheticParts([userPart, contextPart, plainSynthetic]))
+      .toEqual([userPart, contextPart])
+  })
 })
diff --git a/packages/ui/src/lib/messages/synthetic.ts b/packages/ui/src/lib/messages/synthetic.ts
index ee2002f5..0ee54501 100644
--- a/packages/ui/src/lib/messages/synthetic.ts
+++ b/packages/ui/src/lib/messages/synthetic.ts
@@ -1,5 +1,7 @@
 import type { Part } from "@opencode-ai/sdk/v2";
 
+import { readContextPart } from "./contextParts";
+
 const GITHUB_ISSUE_CONTEXT_PREFIX = 'GitHub issue context (JSON)';
 const GITHUB_PR_CONTEXT_PREFIX = 'GitHub pull request context (JSON)';
 
@@ -39,6 +41,13 @@ export const filterSyntheticParts = (parts: Part[] | undefined): Part[] => {
             return false;
         }
 
+        // User-attached context (inline comments, terminal selections, and
+        // such) is synthetic transport-wise but is user content that renders
+        // as its own context block.
+        if (readContextPart(part)) {
+            return true;
+        }
+
         const text = (part as { text?: unknown }).text;
         if (typeof text !== 'string') {
             return false;
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/opencode/client-timeout.test.ts b/packages/ui/src/lib/opencode/client-timeout.test.ts
new file mode 100644
index 00000000..fd45a4a7
--- /dev/null
+++ b/packages/ui/src/lib/opencode/client-timeout.test.ts
@@ -0,0 +1,157 @@
+import { beforeEach, describe, expect, mock, test } from 'bun:test';
+
+// Regression tests for issue #2470: sessions stuck on "loading sessions"
+// forever after managed OpenCode connection goes half-open.
+//
+// The SDK client fetch wrapper must bound read requests so a socket that
+// neither resolves nor rejects fails after `requestTimeoutMs`, releasing the
+// directory bootstrap concurrency slot. Long-lived streams must be excluded:
+// POST (prompt/shell/summarize/command) and the `/event` SSE stream.
+
+type CapturedFetch = (input: string | URL | Request, init?: RequestInit) => Promise<Response>;
+type RuntimeFetch = (input: string | URL | Request, init?: RequestInit) => Promise<Response>;
+
+// `mock(...)` returns a Mock that exposes mockImplementation; keep a typed
+// reference so per-test overrides stay type-safe without re-importing.
+const runtimeFetchMock = mock<RuntimeFetch>(async () => new Response('', { status: 200 }));
+
+let capturedFetch: CapturedFetch | null = null;
+
+(mock as unknown as { restore?: () => void }).restore?.();
+
+mock.module('@opencode-ai/sdk/v2', () => ({
+  createOpencodeClient: mock((opts: { fetch: CapturedFetch }) => {
+    capturedFetch = opts.fetch;
+    return {};
+  }),
+}));
+
+mock.module('@/contexts/runtimeAPIRegistry', () => ({
+  getRegisteredRuntimeAPIs: mock(() => null),
+}));
+
+mock.module('@/lib/runtime-url', () => ({
+  getRuntimeUrlResolver: mock(() => ({ api: (path: string) => path })),
+}));
+
+mock.module('@/lib/runtime-switch', () => ({
+  getRuntimeApiBaseUrl: mock(() => ''),
+  getRuntimeKey: mock(() => 'test-runtime'),
+}));
+
+mock.module('@/lib/runtime-fetch', () => ({
+  runtimeFetch: runtimeFetchMock,
+}));
+
+mock.module('@/lib/startupTrace', () => ({
+  markStartupTrace: mock(() => undefined),
+}));
+
+const { createRuntimeOpencodeClient } = await import(
+  `./client?timeout-final=${Date.now()}`
+);
+
+beforeEach(() => {
+  capturedFetch = null;
+  runtimeFetchMock.mockImplementation(async () => new Response('', { status: 200 }));
+});
+
+describe('createRuntimeOpencodeClient fetch wrapper (#2470)', () => {
+  test('AbortSignal.timeout fires inside a test environment (sanity)', async () => {
+    const sig = AbortSignal.timeout(20);
+    const fired = await new Promise<boolean>((resolve) => {
+      sig.addEventListener('abort', () => resolve(true));
+      setTimeout(() => resolve(false), 200);
+    });
+    expect(fired).toBe(true);
+  });
+
+  test('createRuntimeOpencodeClient is exported', () => {
+    expect(typeof createRuntimeOpencodeClient).toBe('function');
+  });
+
+  test('a GET whose socket never settles rejects with normalized "request timed out" error', async () => {
+    let firedAt = 0;
+    let calledAt = Date.now();
+    runtimeFetchMock.mockImplementation(async (_input: string | URL | Request, init?: RequestInit) => {
+      calledAt = Date.now();
+      return new Promise<Response>((_resolve, reject) => {
+        init?.signal?.addEventListener('abort', () => {
+          firedAt = Date.now();
+          reject(new DOMException('Aborted', 'AbortError'));
+        });
+        setTimeout(
+          () => reject(new Error('TIMEOUT_TEST_FAIL: signal never fired')),
+          1000,
+        );
+      });
+    });
+
+    createRuntimeOpencodeClient({ baseUrl: '', requestTimeoutMs: 25 });
+    expect(capturedFetch).not.toBeNull();
+
+    const start = Date.now();
+    await expect(
+      capturedFetch!('http://opencode.test/api/session'),
+    ).rejects.toThrow(/request timed out/);
+    const elapsed = Date.now() - start;
+    expect(firedAt).toBeGreaterThanOrEqual(calledAt);
+    expect(elapsed).toBeLessThan(500);
+  });
+
+  test('POST requests (long-running prompt/shell/summarize) are NOT timed out', async () => {
+    runtimeFetchMock.mockImplementation(async () => {
+      await new Promise((r) => setTimeout(r, 200));
+      return new Response('ok', { status: 200 });
+    });
+
+    createRuntimeOpencodeClient({ baseUrl: '', requestTimeoutMs: 25 });
+    expect(capturedFetch).not.toBeNull();
+
+    const response = await capturedFetch!(
+      'http://opencode.test/session/prompt',
+      { method: 'POST' },
+    );
+    expect(await response.text()).toBe('ok');
+  });
+
+  test('the /event SSE stream is NOT timed out', async () => {
+    runtimeFetchMock.mockImplementation(async () => {
+      await new Promise((r) => setTimeout(r, 200));
+      return new Response('event: ping\n\n', {
+        status: 200,
+        headers: { 'Content-Type': 'text/event-stream' },
+      });
+    });
+
+    createRuntimeOpencodeClient({ baseUrl: '', requestTimeoutMs: 25 });
+    expect(capturedFetch).not.toBeNull();
+
+    const response = await capturedFetch!(
+      'http://opencode.test/api/global/event',
+    );
+    expect(response.headers.get('Content-Type')).toBe('text/event-stream');
+  });
+
+  test('caller-provided abort signal still wins (no normalized timeout error)', async () => {
+    runtimeFetchMock.mockImplementation(async (_input: string | URL | Request, init?: RequestInit) =>
+      new Promise<Response>((_, reject) => {
+        init?.signal?.addEventListener('abort', () => {
+          reject(new DOMException('Aborted', 'AbortError'));
+        });
+      }),
+    );
+
+    createRuntimeOpencodeClient({ baseUrl: '', requestTimeoutMs: 25 });
+    expect(capturedFetch).not.toBeNull();
+
+    const callerController = new AbortController();
+    setTimeout(() => callerController.abort(), 5);
+
+    await expect(
+      capturedFetch!('http://opencode.test/api/session', {
+        signal: callerController.signal,
+      }),
+    ).rejects.toThrow('Aborted');
+  });
+});
diff --git a/packages/ui/src/lib/opencode/client.ts b/packages/ui/src/lib/opencode/client.ts
index 42f155c1..f7058bed 100644
--- a/packages/ui/src/lib/opencode/client.ts
+++ b/packages/ui/src/lib/opencode/client.ts
@@ -1,3 +1,4 @@
+import type { ContextPartMetadata } from '@/lib/messages/contextParts';
 import { createOpencodeClient, OpencodeClient } from "@opencode-ai/sdk/v2";
 import type { PermissionV2Request, PermissionV2Effect, PermissionV2Source } from "@opencode-ai/sdk/v2/client";
 import type { FilesAPI } from "../api/types";
@@ -199,10 +200,86 @@ const createTimeoutSignal = (timeoutMs: number): { signal: AbortSignal; cleanup:
   };
 };
 
-const createRuntimeOpencodeClient = (config: { baseUrl: string; directory?: string }): OpencodeClient => {
+/**
+ * Upper bound for non-streaming OpenCode read requests. Without it, a socket
+ * that neither resolves nor rejects (the half-open state described in #2470)
+ * keeps the bootstrap concurrency slot busy forever and the UI stays on
+ * "loading sessions". Long-lived streams (POST prompts, the /event SSE) are
+ * explicitly excluded in {@link createRuntimeOpencodeClient}.
+ */
+const OPENCODE_REQUEST_TIMEOUT_MS = 30_000;
+
+const isEventStreamUrl = (input: string | URL | Request): boolean => {
+  const url = typeof input === 'string'
+    ? input
+    : input instanceof URL
+      ? input.toString()
+      : input.url;
+  return url.includes('/event');
+};
+
+type RuntimeOpencodeClientConfig = {
+  baseUrl: string;
+  directory?: string;
+  /** Read-request timeout in ms. Overridable so tests can use short value. */
+  requestTimeoutMs?: number;
+};
+
+export const createRuntimeOpencodeClient = (config: RuntimeOpencodeClientConfig): OpencodeClient => {
+  const requestTimeoutMs = config.requestTimeoutMs ?? OPENCODE_REQUEST_TIMEOUT_MS;
   return createOpencodeClient({
     ...config,
-    fetch: runtimeFetch,
+    fetch: async (input: string | URL | Request, init?: RequestInit) => {
+      const method = String(
+        init?.method ?? (input instanceof Request ? input.method : 'GET'),
+      ).toUpperCase();
+      if (isEventStreamUrl(input) || method === 'POST') {
+        return runtimeFetch(input, init);
+      }
+      const timeout = createTimeoutSignal(requestTimeoutMs);
+      const callerSignal = init?.signal;
+      const supportsAny = typeof AbortSignal !== 'undefined'
+        && typeof (AbortSignal as { any?: unknown }).any === 'function';
+      let signal: AbortSignal;
+      let detachFallback: (() => void) | null = null;
+      if (callerSignal && supportsAny) {
+        signal = (AbortSignal as typeof AbortSignal & { any: (signals: AbortSignal[]) => AbortSignal })
+          .any([callerSignal, timeout.signal]);
+      } else if (callerSignal) {
+        // No AbortSignal.any: compose manually. Silently dropping the timeout
+        // here would disable the fix on exactly the bootstrap reads it
+        // targets, since those carry a cancellation signal.
+        const controller = new AbortController();
+        const abortFromCaller = () => controller.abort(callerSignal.reason);
+        const abortFromTimeout = () => controller.abort(timeout.signal.reason);
+        if (callerSignal.aborted) {
+          abortFromCaller();
+        } else if (timeout.signal.aborted) {
+          abortFromTimeout();
+        } else {
+          callerSignal.addEventListener('abort', abortFromCaller, { once: true });
+          timeout.signal.addEventListener('abort', abortFromTimeout, { once: true });
+          detachFallback = () => {
+            callerSignal.removeEventListener('abort', abortFromCaller);
+            timeout.signal.removeEventListener('abort', abortFromTimeout);
+          };
+        }
+        signal = controller.signal;
+      } else {
+        signal = timeout.signal;
+      }
+      try {
+        return await runtimeFetch(input, { ...init, signal });
+      } catch (error) {
+        if (timeout.signal.aborted && !callerSignal?.aborted) {
+          throw new Error(`OpenCode request timed out after ${requestTimeoutMs}ms`);
+        }
+        throw error;
+      } finally {
+        detachFallback?.();
+        timeout.cleanup();
+      }
+    },
   });
 };
 
@@ -792,6 +869,7 @@ class OpencodeService {
     additionalParts?: Array<{
       text: string;
       synthetic?: boolean;
+      metadata?: ContextPartMetadata;
       files?: Array<FileInputLite>;
     }>;
     messageId?: string;
@@ -842,11 +920,10 @@ class OpencodeService {
     if (params.additionalParts && params.additionalParts.length > 0) {
       for (const additional of params.additionalParts) {
         if (additional.text && additional.text.trim()) {
-          parts.push({
-            type: 'text',
-            text: additional.text,
-            ...(additional.synthetic ? { synthetic: true } : {}),
-          });
+          const additionalTextPart: TextPartInput = { type: 'text', text: additional.text };
+          if (additional.synthetic) additionalTextPart.synthetic = true;
+          if (additional.metadata) additionalTextPart.metadata = additional.metadata;
+          parts.push(additionalTextPart);
         }
         if (additional.files && additional.files.length > 0) {
           for (const file of additional.files) {
@@ -1193,7 +1270,7 @@ class OpencodeService {
     options?: {
       id?: string;
       save?: string[];
-      metadata?: Record<string, unknown>;
+      metadata?: ContextPartMetadata;
       source?: PermissionV2Source;
       agent?: string;
     }
diff --git a/packages/ui/src/lib/persistence.test.ts b/packages/ui/src/lib/persistence.test.ts
index d2c4dfe5..c698f711 100644
--- a/packages/ui/src/lib/persistence.test.ts
+++ b/packages/ui/src/lib/persistence.test.ts
@@ -548,6 +548,136 @@ describe('updateDesktopSettings', () => {
     });
   });
 
+  test('does not broadcast a stale project selection over a newer pending update', async () => {
+    const firstSave = deferred<SettingsPayload>();
+    const savedChanges: Array<Partial<SettingsPayload>> = [];
+    registerSettingsSave(async (changes) => {
+      savedChanges.push(changes);
+      if (savedChanges.length === 1) return firstSave.promise;
+      return changes as SettingsPayload;
+    });
+    const syncedSettings: SettingsPayload[] = [];
+    const handleSettingsSynced = (event: Event) => {
+      syncedSettings.push((event as CustomEvent<SettingsPayload>).detail);
+    };
+    getWindow().addEventListener('openchamber:settings-synced', handleSettingsSynced);
+
+    try {
+      const firstUpdate = updateDesktopSettings({ activeProjectId: 'project-a' });
+      await delay(250);
+      const secondUpdate = updateDesktopSettings({ activeProjectId: 'project-b' });
+
+      firstSave.resolve({ activeProjectId: 'project-a' });
+      await firstUpdate;
+
+      expect(syncedSettings.at(-1)?.activeProjectId).toBe('project-b');
+
+      await secondUpdate;
+    } finally {
+      getWindow().removeEventListener('openchamber:settings-synced', handleSettingsSynced);
+    }
+  });
+
+  test('does not broadcast a stale loaded project selection over a newer pending update', async () => {
+    const loadedSettings = deferred<{ settings: SettingsPayload; source: 'web' | 'vscode' }>();
+    registerSettingsApi(async (changes) => changes as SettingsPayload, () => loadedSettings.promise);
+    invalidateSettingsCache();
+    const syncedSettings: SettingsPayload[] = [];
+    const handleSettingsSynced = (event: Event) => {
+      syncedSettings.push((event as CustomEvent<SettingsPayload>).detail);
+    };
+    getWindow().addEventListener('openchamber:settings-synced', handleSettingsSynced);
+
+    try {
+      const sync = syncDesktopSettings();
+      const update = updateDesktopSettings({ activeProjectId: 'project-b' });
+
+      loadedSettings.resolve({
+        settings: {
+          activeProjectId: 'project-a',
+          draftStartersCraftGoalAdded: true,
+          draftStartersScheduleTaskAdded: true,
+        },
+        source: 'web',
+      });
+      await sync;
+
+      expect(syncedSettings.at(-1)?.activeProjectId).toBe('project-b');
+
+      await update;
+    } finally {
+      getWindow().removeEventListener('openchamber:settings-synced', handleSettingsSynced);
+    }
+  });
+
+  test('does not broadcast a stale load after a newer project update has saved', async () => {
+    const loadedSettings = deferred<{ settings: SettingsPayload; source: 'web' | 'vscode' }>();
+    registerSettingsApi(async (changes) => changes as SettingsPayload, () => loadedSettings.promise);
+    invalidateSettingsCache();
+    const syncedSettings: SettingsPayload[] = [];
+    const handleSettingsSynced = (event: Event) => {
+      syncedSettings.push((event as CustomEvent<SettingsPayload>).detail);
+    };
+    getWindow().addEventListener('openchamber:settings-synced', handleSettingsSynced);
+
+    try {
+      const sync = syncDesktopSettings();
+      const update = updateDesktopSettings({ activeProjectId: 'project-b' });
+      await update;
+
+      loadedSettings.resolve({
+        settings: {
+          activeProjectId: 'project-a',
+          draftStartersCraftGoalAdded: true,
+          draftStartersScheduleTaskAdded: true,
+        },
+        source: 'web',
+      });
+      await sync;
+
+      expect(syncedSettings.at(-1)?.activeProjectId).toBe('project-b');
+    } finally {
+      getWindow().removeEventListener('openchamber:settings-synced', handleSettingsSynced);
+    }
+  });
+
+  test('preserves only the latest settings values across repeated pending updates', async () => {
+    const loadedSettings = deferred<{ settings: SettingsPayload; source: 'web' | 'vscode' }>();
+    registerSettingsApi(async (changes) => changes as SettingsPayload, () => loadedSettings.promise);
+    invalidateSettingsCache();
+    const syncedSettings: SettingsPayload[] = [];
+    const handleSettingsSynced = (event: Event) => {
+      syncedSettings.push((event as CustomEvent<SettingsPayload>).detail);
+    };
+    getWindow().addEventListener('openchamber:settings-synced', handleSettingsSynced);
+
+    try {
+      const sync = syncDesktopSettings();
+      const updates = Array.from({ length: 100 }, (_, index) => updateDesktopSettings({
+        activeProjectId: `project-${index}`,
+        showReasoningTraces: index % 2 === 0,
+      }));
+
+      loadedSettings.resolve({
+        settings: {
+          activeProjectId: 'stale-project',
+          showReasoningTraces: true,
+          draftStartersCraftGoalAdded: true,
+          draftStartersScheduleTaskAdded: true,
+        },
+        source: 'web',
+      });
+      await sync;
+
+      expect(syncedSettings.at(-1)?.activeProjectId).toBe('project-99');
+      expect(syncedSettings.at(-1)?.showReasoningTraces).toBe(false);
+
+      await Promise.all(updates);
+    } finally {
+      getWindow().removeEventListener('openchamber:settings-synced', handleSettingsSynced);
+    }
+  });
+
   test('applies model selector settings from server settings', async () => {
     getWindow();
     const settings = {
diff --git a/packages/ui/src/lib/persistence.ts b/packages/ui/src/lib/persistence.ts
index a3ed076b..e6668fad 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;
   }
@@ -1676,6 +1676,62 @@ const sanitizeWebSettings = (payload: unknown): DesktopSettings | null => {
 };
 
 type SettingsRuntimeContext = { runtimeKey: string; generation: number };
+type SettingsMutation = { revision: number; changes: Partial<DesktopSettings> };
+type SettingsOperation = { revision: number };
+
+class SettingsMutationTracker {
+  private revision = 0;
+  private mutations: SettingsMutation[] = [];
+  private operations = new Set<SettingsOperation>();
+
+  record(changes: Partial<DesktopSettings>): number {
+    this.revision += 1;
+    if (this.operations.size > 0) {
+      const latest = this.mutations.at(-1);
+      // A new segment is only needed when an operation started after the last one.
+      const crossedOperationBoundary = latest
+        ? [...this.operations].some((operation) => operation.revision >= latest.revision)
+        : true;
+      if (latest && !crossedOperationBoundary) {
+        latest.revision = this.revision;
+        latest.changes = { ...latest.changes, ...changes };
+      } else {
+        this.mutations.push({ revision: this.revision, changes });
+      }
+    }
+    return this.revision;
+  }
+
+  begin(revision = this.revision): SettingsOperation {
+    const operation = { revision };
+    this.operations.add(operation);
+    return operation;
+  }
+
+  reconcile(settings: DesktopSettings, operation: SettingsOperation): DesktopSettings {
+    let reconciled = settings;
+    for (const mutation of this.mutations) {
+      if (mutation.revision <= operation.revision) continue;
+      reconciled = { ...reconciled, ...mutation.changes };
+    }
+    return reconciled;
+  }
+
+  finish(operation: SettingsOperation): void {
+    if (!this.operations.delete(operation)) return;
+    if (this.operations.size === 0) {
+      this.mutations = [];
+      return;
+    }
+    const oldestRevision = Math.min(...[...this.operations].map(({ revision }) => revision));
+    this.mutations = this.mutations.filter((mutation) => mutation.revision > oldestRevision);
+  }
+
+  reset(): void {
+    this.mutations = [];
+    this.operations.clear();
+  }
+}
 
 // Short-lived cache + in-flight dedup for settings fetches to avoid repeated GET calls during startup
 let _settingsRuntimeGeneration = 0;
@@ -1686,6 +1742,8 @@ let _pendingSettingsContext: SettingsRuntimeContext | null = null;
 let _settingsFlushTimer: ReturnType<typeof setTimeout> | null = null;
 let _settingsFlushWaiters: Array<() => void> = [];
 let _settingsLifecycleInitialized = false;
+let _pendingSettingsRevision = 0;
+const _settingsMutationTracker = new SettingsMutationTracker();
 const SETTINGS_CACHE_TTL = 2_000; // 2 seconds — covers the startup burst
 const SETTINGS_DEBOUNCE_MS = 200;
 
@@ -1714,6 +1772,8 @@ const ensureSettingsRuntimeLifecycle = (): void => {
   subscribeRuntimeEndpointChanged((detail) => {
     if (detail.runtimeKey === detail.previousRuntimeKey) return;
     _settingsRuntimeGeneration += 1;
+    _settingsMutationTracker.reset();
+    _pendingSettingsRevision = 0;
     _settingsCache = null;
     _settingsInflight = null;
   });
@@ -1787,6 +1847,7 @@ export const syncDesktopSettings = async (): Promise<void> => {
   }
   ensureSettingsRuntimeLifecycle();
   const context = captureSettingsRuntimeContext();
+  const operation = _settingsMutationTracker.begin();
 
   const persistApis = [getPersistApi(), useSessionDisplayStore.persist];
 
@@ -1823,8 +1884,22 @@ export const syncDesktopSettings = async (): Promise<void> => {
   // Each step is wrapped in try/catch so a failure in one side-effect (e.g.
   // a TypeError from writing to a contextBridge-protected global) doesn't
   // prevent server settings from reaching the Zustand store.
-  const applySettings = async (settings: DesktopSettings) => {
+  // Local changes sitting in the debounce buffer are not yet tracked as
+  // mutations (record() only stores while a request is in flight), so a GET
+  // racing the debounce window would briefly revert them. Reapply the
+  // pending buffer over every reconciled result.
+  const overlayPendingChanges = (settings: DesktopSettings): DesktopSettings => {
+    if (!_pendingSettingsChanges || !_pendingSettingsContext) return settings;
+    if (!isSettingsRuntimeContextCurrent(_pendingSettingsContext)) return settings;
+    return { ...settings, ..._pendingSettingsChanges };
+  };
+
+  const applySettings = async (loadedSettings: DesktopSettings) => {
     if (!isSettingsRuntimeContextCurrent(context)) return;
+    let settings = overlayPendingChanges(_settingsMutationTracker.reconcile(loadedSettings, operation));
+    await waitForHydration();
+    if (!isSettingsRuntimeContextCurrent(context)) return;
+    settings = overlayPendingChanges(_settingsMutationTracker.reconcile(loadedSettings, operation));
     const shouldPersistCraftGoalMigration = settings.draftStartersCraftGoalAdded !== true
       || settings.draftStartersScheduleTaskAdded !== true;
     // `autoSaveEnabled` is new to the settings backend. Until the server has a
@@ -1843,8 +1918,6 @@ export const syncDesktopSettings = async (): Promise<void> => {
     } catch (error) {
       console.warn('persistToLocalStorage failed:', error);
     }
-    await waitForHydration();
-    if (!isSettingsRuntimeContextCurrent(context)) return;
     if (shouldSeedAutoSaveEnabled) {
       authoritativeSettings.autoSaveEnabled = useUIStore.getState().autoSaveEnabled;
     }
@@ -1907,6 +1980,8 @@ export const syncDesktopSettings = async (): Promise<void> => {
     }
   } catch (error) {
     console.warn('Failed to synchronise settings:', error);
+  } finally {
+    _settingsMutationTracker.finish(operation);
   }
 };
 
@@ -1914,9 +1989,11 @@ export const syncDesktopSettings = async (): Promise<void> => {
 async function _flushSettingsUpdate(): Promise<void> {
   const changes = _pendingSettingsChanges;
   const context = _pendingSettingsContext;
+  const revision = _pendingSettingsRevision;
   const waiters = _settingsFlushWaiters;
   _pendingSettingsChanges = null;
   _pendingSettingsContext = null;
+  _pendingSettingsRevision = 0;
   _settingsFlushTimer = null;
   _settingsFlushWaiters = [];
   try {
@@ -1925,59 +2002,66 @@ async function _flushSettingsUpdate(): Promise<void> {
       dispatchSettingsSaveState('saved');
       return;
     }
+    const operation = _settingsMutationTracker.begin(revision);
 
-    const runtimeSettings = getRuntimeSettingsAPI();
-    if (runtimeSettings) {
+    try {
+      const runtimeSettings = getRuntimeSettingsAPI();
+      if (runtimeSettings) {
+        try {
+          const updated = await runtimeSettings.save(changes);
+          if (!isSettingsRuntimeContextCurrent(context)) return;
+          if (updated) {
+            const reconciled = _settingsMutationTracker.reconcile(updated, operation);
+            applyDesktopUiPreferences(reconciled);
+            dispatchSettingsSynced(reconciled);
+            _settingsCache = null;
+          }
+          dispatchSettingsSaveState(updated ? 'saved' : 'error');
+          return;
+        } catch (error) {
+          if (!isSettingsRuntimeContextCurrent(context)) return;
+          console.warn('Failed to update settings via runtime settings API:', error);
+        }
+      }
+
+      if (!isSettingsRuntimeContextCurrent(context)) return;
       try {
-        const updated = await runtimeSettings.save(changes);
+        const response = await runtimeFetch('/api/config/settings', {
+          method: 'PUT',
+          headers: {
+            'Content-Type': 'application/json',
+            Accept: 'application/json',
+          },
+          body: JSON.stringify(changes),
+        });
+
+        if (!isSettingsRuntimeContextCurrent(context)) return;
+        if (!response.ok) {
+          console.warn('Failed to update shared settings via API:', response.status, response.statusText);
+          dispatchSettingsSaveState('error');
+          return;
+        }
+
+        const updated = sanitizeWebSettings(await response.json().catch(() => null));
         if (!isSettingsRuntimeContextCurrent(context)) return;
         if (updated) {
-          applyDesktopUiPreferences(updated);
-          dispatchSettingsSynced(updated);
+          const reconciled = _settingsMutationTracker.reconcile(updated, operation);
+          applyDesktopUiPreferences(reconciled);
+          dispatchSettingsSynced(reconciled);
+          dispatchSettingsSaveState('saved');
+          // Invalidate GET cache so next read sees the fresh data
           _settingsCache = null;
+        } else {
+          dispatchSettingsSaveState('error');
         }
-        dispatchSettingsSaveState(updated ? 'saved' : 'error');
-        return;
       } catch (error) {
-        if (!isSettingsRuntimeContextCurrent(context)) return;
-        console.warn('Failed to update settings via runtime settings API:', error);
-      }
-    }
-
-    if (!isSettingsRuntimeContextCurrent(context)) return;
-    try {
-      const response = await runtimeFetch('/api/config/settings', {
-        method: 'PUT',
-        headers: {
-          'Content-Type': 'application/json',
-          Accept: 'application/json',
-        },
-        body: JSON.stringify(changes),
-      });
-
-      if (!isSettingsRuntimeContextCurrent(context)) return;
-      if (!response.ok) {
-        console.warn('Failed to update shared settings via API:', response.status, response.statusText);
-        dispatchSettingsSaveState('error');
-        return;
-      }
-
-      const updated = sanitizeWebSettings(await response.json().catch(() => null));
-      if (!isSettingsRuntimeContextCurrent(context)) return;
-      if (updated) {
-        applyDesktopUiPreferences(updated);
-        dispatchSettingsSynced(updated);
-        dispatchSettingsSaveState('saved');
-        // Invalidate GET cache so next read sees the fresh data
-        _settingsCache = null;
-      } else {
-        dispatchSettingsSaveState('error');
-      }
-    } catch (error) {
-      if (isSettingsRuntimeContextCurrent(context)) {
-        console.warn('Failed to update shared settings via API:', error);
-        dispatchSettingsSaveState('error');
+        if (isSettingsRuntimeContextCurrent(context)) {
+          console.warn('Failed to update shared settings via API:', error);
+          dispatchSettingsSaveState('error');
+        }
       }
+    } finally {
+      _settingsMutationTracker.finish(operation);
     }
   } finally {
     waiters.forEach((resolve) => resolve());
@@ -1998,6 +2082,7 @@ export const updateDesktopSettings = async (changes: Partial<DesktopSettings>):
 
   _pendingSettingsChanges = { ...(_pendingSettingsChanges ?? {}), ...changes };
   _pendingSettingsContext = context;
+  _pendingSettingsRevision = _settingsMutationTracker.record(changes);
   dispatchSettingsSaveState('saving');
 
   if (_settingsFlushTimer) {
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/selectionOverlayRects.ts b/packages/ui/src/lib/selectionOverlayRects.ts
new file mode 100644
index 00000000..322b2b38
--- /dev/null
+++ b/packages/ui/src/lib/selectionOverlayRects.ts
@@ -0,0 +1,57 @@
+/**
+ * Overlay rectangles for a captured text selection.
+ *
+ * While a comment input owns focus the native selection is gone, so the
+ * quoted fragment is repainted with these rects (styled by
+ * `.oc-chat-comment-rect`). Raw Range.getClientRects() mixes block-container
+ * boxes with text boxes and the translucent overlaps paint double-dark bands,
+ * so rects are taken from the text nodes only and merged into one strip per
+ * visual line, each stretched to its element's line-height the way the native
+ * selection paints a line box.
+ */
+export const collectSelectionOverlayRects = (range: Range): DOMRect[] => {
+    const textRects: DOMRect[] = [];
+    const pushNodeRects = (node: Text) => {
+        const nodeRange = document.createRange();
+        nodeRange.selectNodeContents(node);
+        if (node === range.startContainer) nodeRange.setStart(node, range.startOffset);
+        if (node === range.endContainer) nodeRange.setEnd(node, range.endOffset);
+        const lineHeight = node.parentElement
+            ? Number.parseFloat(window.getComputedStyle(node.parentElement).lineHeight)
+            : Number.NaN;
+        for (const rect of nodeRange.getClientRects()) {
+            if (rect.width <= 0 || rect.height <= 0) continue;
+            if (Number.isFinite(lineHeight) && lineHeight > rect.height) {
+                const expand = (lineHeight - rect.height) / 2;
+                textRects.push(new DOMRect(rect.left, rect.top - expand, rect.width, lineHeight));
+            } else {
+                textRects.push(rect);
+            }
+        }
+    };
+    const root = range.commonAncestorContainer;
+    if (root instanceof Text) {
+        pushNodeRects(root);
+    } else {
+        const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+        for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+            if (node instanceof Text && range.intersectsNode(node)) pushNodeRects(node);
+        }
+    }
+
+    const lines: Array<{ left: number; right: number; top: number; bottom: number }> = [];
+    for (const rect of textRects) {
+        const line = lines.find((candidate) => (
+            Math.abs(candidate.top - rect.top) < 6 && Math.abs(candidate.bottom - rect.bottom) < 6
+        ));
+        if (line) {
+            line.left = Math.min(line.left, rect.left);
+            line.right = Math.max(line.right, rect.right);
+            line.top = Math.min(line.top, rect.top);
+            line.bottom = Math.max(line.bottom, rect.bottom);
+        } else {
+            lines.push({ left: rect.left, right: rect.right, top: rect.top, bottom: rect.bottom });
+        }
+    }
+    return lines.map((line) => new DOMRect(line.left, line.top, line.right - line.left, line.bottom - line.top));
+};
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/DOCUMENTATION.md b/packages/ui/src/stores/DOCUMENTATION.md
index 4d42e66f..3eaf1ffb 100644
--- a/packages/ui/src/stores/DOCUMENTATION.md
+++ b/packages/ui/src/stores/DOCUMENTATION.md
@@ -66,7 +66,7 @@ These stores coordinate persistent project/session metadata across multiple view
 
 `messageQueueStore.ts` keeps a queued message until its own send resolves, so between dispatch and resolution the entry is still visible to every reader. Dispatchers must therefore mark the send (`markSending`/`clearSending`) and read `getSendableQueue()` — or filter `sendingIds` themselves — instead of dispatching straight from `queuedMessages`; otherwise a composer submit merges a message the auto-send hook is already delivering and it is sent twice (the window is seconds over a relay). `clearQueue()` retains in-flight entries for the same reason. `sendingIds` is deliberately not persisted: a restart has no in-flight sends, and a stale flag would strand a queued message. Desktop queues use the configured host id as runtime identity, not the current API URL, because an SSH reconnect allocates a new local forwarding port while the remote host remains the same.
 
-`useGlobalSessionsStore.ts` owns cold/global active and archived session coverage, including `sessionsByDirectory`. It is complementary to directory child stores: it is not the source of live busy/retry status or session messages.
+`useGlobalSessionsStore.ts` owns cold/global active and archived session coverage. Its entity map and active root, parent/child, and directory indexes are maintained in the same transaction as the compatibility arrays and `sessionsByDirectory`. Full authoritative snapshots may rebuild those indexes once; direct create, update, move, archive, and delete mutations update only affected hierarchy and directory buckets. Metadata-only updates preserve the structure reference. It is complementary to directory child stores: it is not the source of live busy/retry status or session messages.
 
 User-visible session ordering is also not owned by the global cache array order. `sync/session-ordering.ts` combines lifecycle rank with timestamp fallbacks, and session surfaces must use that shared comparator instead of independently sorting global sessions by `time.updated`.
 
diff --git a/packages/ui/src/stores/globalSessionStructure.ts b/packages/ui/src/stores/globalSessionStructure.ts
new file mode 100644
index 00000000..7b72f271
--- /dev/null
+++ b/packages/ui/src/stores/globalSessionStructure.ts
@@ -0,0 +1,224 @@
+import type { Session } from '@opencode-ai/sdk/v2';
+import { normalizePath } from '@/lib/pathNormalization';
+
+export type GlobalSessionStructure = {
+  activeSessionIds: readonly string[];
+  activeRootIds: readonly string[];
+  activeChildrenByParentId: ReadonlyMap<string, readonly string[]>;
+  activeIdsByDirectory: ReadonlyMap<string, readonly string[]>;
+};
+
+export type GlobalSessionStructureMutation = {
+  sessionId: string;
+  previous: Session | null;
+  next: Session | null;
+};
+
+type SessionLocation = {
+  directory: string | null;
+  parentId: string | null;
+};
+
+type BucketChange = {
+  additions: Set<string>;
+  removals: Set<string>;
+};
+
+type SessionIndexFields = {
+  directory?: string | null;
+  parentID?: string | null;
+  project?: { worktree?: string | null } | null;
+};
+
+const indexFields = (session: Session): Session & SessionIndexFields => {
+  // SAFETY: OpenCode session payloads expose these stable fields even though the SDK base Session omits them.
+  return session as Session & SessionIndexFields;
+};
+
+const parentIdOf = (session: Session): string | null => (
+  indexFields(session).parentID ?? null
+);
+
+export const resolveGlobalSessionDirectory = (session: Session): string | null => {
+  const record = indexFields(session);
+
+  return normalizePath(record.directory ?? null)
+    ?? normalizePath(record.project?.worktree ?? null);
+};
+
+export const mergeSessionDirectoryMetadata = (incoming: Session, existing?: Session | null): Session => {
+  if (!existing) return incoming;
+
+  const incomingRecord = indexFields(incoming);
+  const existingRecord = indexFields(existing);
+  const incomingDirectory = normalizePath(incomingRecord.directory ?? null);
+  const incomingWorktree = normalizePath(incomingRecord.project?.worktree ?? null);
+  const existingDirectory = normalizePath(existingRecord.directory ?? null);
+  const existingWorktree = normalizePath(existingRecord.project?.worktree ?? null);
+  let changed = false;
+  const next: typeof incomingRecord = { ...incomingRecord };
+
+  if (!incomingDirectory && existingDirectory) {
+    next.directory = existingRecord.directory;
+    changed = true;
+  }
+  if (!incomingWorktree && existingWorktree) {
+    next.project = {
+      ...(existingRecord.project ?? {}),
+      ...(incomingRecord.project ?? {}),
+      worktree: existingRecord.project?.worktree,
+    };
+    changed = true;
+  } else if (!incomingRecord.project && existingRecord.project) {
+    next.project = existingRecord.project;
+    changed = true;
+  }
+
+  return changed ? next : incoming;
+};
+
+const locationOf = (session: Session): SessionLocation | null => session.time?.archived ? null : ({
+  directory: resolveGlobalSessionDirectory(session),
+  parentId: parentIdOf(session),
+});
+
+const sameLocation = (left: SessionLocation, right: SessionLocation): boolean => (
+  left.directory === right.directory
+  && left.parentId === right.parentId
+);
+
+const appendToBucket = (buckets: Map<string, string[]>, key: string, sessionId: string): void => {
+  const bucket = buckets.get(key);
+  if (bucket) bucket.push(sessionId);
+  else buckets.set(key, [sessionId]);
+};
+
+export const buildGlobalSessionStructure = (
+  activeSessions: readonly Session[],
+): GlobalSessionStructure => {
+  const activeRootIds: string[] = [];
+  const activeChildrenByParentId = new Map<string, string[]>();
+  const activeIdsByDirectory = new Map<string, string[]>();
+
+  const index = (
+    session: Session,
+    roots: string[],
+    children: Map<string, string[]>,
+    directories: Map<string, string[]>,
+  ): void => {
+    const location = locationOf(session);
+    if (!location) return;
+    if (location.parentId) appendToBucket(children, location.parentId, session.id);
+    else roots.push(session.id);
+    if (location.directory) appendToBucket(directories, location.directory, session.id);
+  };
+
+  for (const session of activeSessions) index(session, activeRootIds, activeChildrenByParentId, activeIdsByDirectory);
+
+  return {
+    activeSessionIds: activeSessions.map((session) => session.id),
+    activeRootIds,
+    activeChildrenByParentId,
+    activeIdsByDirectory,
+  };
+};
+
+const recordBucketChange = (
+  changes: Map<string, BucketChange>,
+  key: string,
+  sessionId: string,
+  operation: 'add' | 'remove',
+): void => {
+  const change = changes.get(key) ?? { additions: new Set<string>(), removals: new Set<string>() };
+  if (operation === 'add') {
+    change.removals.delete(sessionId);
+    change.additions.delete(sessionId);
+    change.additions.add(sessionId);
+  } else {
+    change.additions.delete(sessionId);
+    change.removals.add(sessionId);
+  }
+  changes.set(key, change);
+};
+
+const applyListChange = (
+  source: readonly string[],
+  change: BucketChange,
+): readonly string[] => {
+  if (change.additions.size === 0 && change.removals.size === 0) return source;
+  const additions = [...change.additions].reverse();
+  const added = new Set(additions);
+  const retained = source.filter((id) => !change.removals.has(id) && !added.has(id));
+  const next = [...additions, ...retained];
+  if (next.length === source.length && next.every((id, index) => id === source[index])) return source;
+  return next;
+};
+
+const applyBucketChanges = (
+  source: ReadonlyMap<string, readonly string[]>,
+  changes: Map<string, BucketChange>,
+): ReadonlyMap<string, readonly string[]> => {
+  if (changes.size === 0) return source;
+  let next: Map<string, readonly string[]> | null = null;
+  for (const [key, change] of changes) {
+    const previous = source.get(key) ?? [];
+    const bucket = applyListChange(previous, change);
+    if (bucket === previous) continue;
+    next ??= new Map(source);
+    if (bucket.length === 0) next.delete(key);
+    else next.set(key, bucket);
+  }
+  return next ?? source;
+};
+
+export const applyGlobalSessionStructureMutations = (
+  structure: GlobalSessionStructure,
+  mutations: readonly GlobalSessionStructureMutation[],
+): GlobalSessionStructure => {
+  const activeRoots: BucketChange = { additions: new Set(), removals: new Set() };
+  const activeSessions: BucketChange = { additions: new Set(), removals: new Set() };
+  const activeChildren = new Map<string, BucketChange>();
+  const activeDirectories = new Map<string, BucketChange>();
+
+  const record = (location: SessionLocation, sessionId: string, operation: 'add' | 'remove'): void => {
+    if (operation === 'add') {
+      activeSessions.removals.delete(sessionId);
+      activeSessions.additions.delete(sessionId);
+      activeSessions.additions.add(sessionId);
+    } else {
+      activeSessions.additions.delete(sessionId);
+      activeSessions.removals.add(sessionId);
+    }
+    if (location.parentId) recordBucketChange(activeChildren, location.parentId, sessionId, operation);
+    else if (operation === 'add') {
+      activeRoots.removals.delete(sessionId);
+      activeRoots.additions.delete(sessionId);
+      activeRoots.additions.add(sessionId);
+    } else {
+      activeRoots.additions.delete(sessionId);
+      activeRoots.removals.add(sessionId);
+    }
+    if (location.directory) recordBucketChange(activeDirectories, location.directory, sessionId, operation);
+  };
+
+  for (const mutation of mutations) {
+    const previousLocation = mutation.previous ? locationOf(mutation.previous) : null;
+    const nextLocation = mutation.next ? locationOf(mutation.next) : null;
+    if (previousLocation && nextLocation && sameLocation(previousLocation, nextLocation)) continue;
+    if (previousLocation) record(previousLocation, mutation.sessionId, 'remove');
+    if (nextLocation) record(nextLocation, mutation.sessionId, 'add');
+  }
+
+  const next: GlobalSessionStructure = {
+    activeSessionIds: applyListChange(structure.activeSessionIds, activeSessions),
+    activeRootIds: applyListChange(structure.activeRootIds, activeRoots),
+    activeChildrenByParentId: applyBucketChanges(structure.activeChildrenByParentId, activeChildren),
+    activeIdsByDirectory: applyBucketChanges(structure.activeIdsByDirectory, activeDirectories),
+  };
+  return next.activeSessionIds === structure.activeSessionIds
+    && next.activeRootIds === structure.activeRootIds
+    && next.activeChildrenByParentId === structure.activeChildrenByParentId
+    && next.activeIdsByDirectory === structure.activeIdsByDirectory
+    ? structure
+    : next;
+};
diff --git a/packages/ui/src/stores/useGlobalSessionsStore.test.ts b/packages/ui/src/stores/useGlobalSessionsStore.test.ts
index 9cd4d520..9aafa4e8 100644
--- a/packages/ui/src/stores/useGlobalSessionsStore.test.ts
+++ b/packages/ui/src/stores/useGlobalSessionsStore.test.ts
@@ -27,6 +27,13 @@ describe('useGlobalSessionsStore', () => {
       activeSessions: [],
       archivedSessions: [],
       sessionsByDirectory: new Map(),
+      entityById: new Map(),
+      structure: {
+        activeSessionIds: [],
+        activeRootIds: [],
+        activeChildrenByParentId: new Map(),
+        activeIdsByDirectory: new Map(),
+      },
       hasLoaded: false,
       status: 'idle',
     });
@@ -114,11 +121,13 @@ describe('useGlobalSessionsStore', () => {
     expect(useGlobalSessionsStore.getState().archivedSessions).toBe(archivedSessions);
 
     const activeSessions = useGlobalSessionsStore.getState().activeSessions;
+    const structure = useGlobalSessionsStore.getState().structure;
     useGlobalSessionsStore.getState().upsertSession({
       ...archived,
       time: { created: 1, updated: 4, archived: 3 },
     });
     expect(useGlobalSessionsStore.getState().activeSessions).toBe(activeSessions);
+    expect(useGlobalSessionsStore.getState().structure).toBe(structure);
   });
 
   test('applies a batch of session upserts in one store publication', () => {
@@ -136,6 +145,90 @@ describe('useGlobalSessionsStore', () => {
     expect(useGlobalSessionsStore.getState().activeSessions.map((session) => session.id)).toEqual(['ses_2', 'ses_1']);
     expect(publications).toBe(1);
   });
+
+  test('indexes a large batch of subagents in one store publication', () => {
+    const parent = buildSession('https://share.example/parent', { id: 'ses_parent' });
+    const children = Array.from({ length: 1_000 }, (_, index) => buildSession(
+      `https://share.example/child-${index}`,
+      { id: `ses_child_${index}`, parentID: parent.id },
+    ));
+    let publications = 0;
+    const unsubscribe = useGlobalSessionsStore.subscribe(() => {
+      publications += 1;
+    });
+
+    useGlobalSessionsStore.getState().upsertSessions([parent, ...children]);
+
+    unsubscribe();
+    const state = useGlobalSessionsStore.getState();
+    expect(publications).toBe(1);
+    expect(state.structure.activeRootIds).toEqual([parent.id]);
+    expect(state.structure.activeChildrenByParentId.get(parent.id)?.length).toBe(1_000);
+  });
+
+  test('preserves hierarchy references for entity-only updates', () => {
+    const parent = buildSession('https://share.example/parent', { id: 'ses_parent', directory: '/repo' });
+    const child = buildSession('https://share.example/child', {
+      id: 'ses_child',
+      directory: '/repo',
+      parentID: parent.id,
+    });
+    useGlobalSessionsStore.getState().upsertSessions([parent, child]);
+    const previous = useGlobalSessionsStore.getState();
+    const previousChildren = previous.structure.activeChildrenByParentId.get(parent.id);
+
+    useGlobalSessionsStore.getState().upsertSession({
+      ...child,
+      title: 'Renamed child',
+      time: { ...child.time, updated: 3 },
+    });
+
+    const next = useGlobalSessionsStore.getState();
+    expect(next.structure).toBe(previous.structure);
+    expect(next.structure.activeChildrenByParentId.get(parent.id)).toBe(previousChildren);
+    expect(next.entityById.get(child.id)?.title).toBe('Renamed child');
+  });
+
+  test('updates only affected hierarchy buckets when a session is reparented', () => {
+    const parentA = buildSession('https://share.example/a', { id: 'ses_parent_a' });
+    const parentB = buildSession('https://share.example/b', { id: 'ses_parent_b' });
+    const parentC = buildSession('https://share.example/c', { id: 'ses_parent_c' });
+    const child = buildSession('https://share.example/child', { id: 'ses_child', parentID: parentA.id });
+    const unrelatedChild = buildSession('https://share.example/other', { id: 'ses_other', parentID: parentC.id });
+    useGlobalSessionsStore.getState().upsertSessions([parentA, parentB, parentC, child, unrelatedChild]);
+    const previous = useGlobalSessionsStore.getState().structure;
+    const unrelatedBucket = previous.activeChildrenByParentId.get(parentC.id);
+
+    useGlobalSessionsStore.getState().upsertSession({ ...child, parentID: parentB.id });
+
+    const next = useGlobalSessionsStore.getState().structure;
+    expect(next).not.toBe(previous);
+    expect(next.activeChildrenByParentId.get(parentA.id)).toBe(undefined);
+    expect([...next.activeChildrenByParentId.get(parentB.id) ?? []]).toEqual([child.id]);
+    expect(next.activeChildrenByParentId.get(parentC.id)).toBe(unrelatedBucket);
+  });
+
+  test('applies ordered mixed mutations in one publication', () => {
+    const original = buildSession('https://share.example/original', { id: 'ses_original' });
+    useGlobalSessionsStore.getState().upsertSession(original);
+    let publications = 0;
+    const unsubscribe = useGlobalSessionsStore.subscribe(() => {
+      publications += 1;
+    });
+
+    useGlobalSessionsStore.getState().applySessionMutations([
+      { type: 'upsert', session: buildSession('https://share.example/temporary', { id: 'ses_temporary' }) },
+      { type: 'remove', sessionId: original.id },
+      { type: 'remove', sessionId: 'ses_temporary' },
+      { type: 'upsert', session: buildSession('https://share.example/final', { id: 'ses_final' }) },
+    ]);
+
+    unsubscribe();
+    const state = useGlobalSessionsStore.getState();
+    expect(publications).toBe(1);
+    expect(state.activeSessions.map((session) => session.id)).toEqual(['ses_final']);
+    expect(state.structure.activeRootIds).toEqual(['ses_final']);
+  });
 });
 
 describe('mergeLiveSessionWithGlobalSession', () => {
diff --git a/packages/ui/src/stores/useGlobalSessionsStore.ts b/packages/ui/src/stores/useGlobalSessionsStore.ts
index 68919369..6cd00412 100644
--- a/packages/ui/src/stores/useGlobalSessionsStore.ts
+++ b/packages/ui/src/stores/useGlobalSessionsStore.ts
@@ -9,6 +9,17 @@ import { raiseSessionOrderingBaselines } from '@/sync/session-ordering';
 import { mapWithConcurrency } from '@/lib/concurrency';
 import { persistManagedChatSessions, readManagedChatSessions } from '@/sync/persist-cache';
 import { isVSCodeRuntime } from '@/lib/desktop';
+import { countSyncPerformance } from '@/sync/performance-diagnostics';
+import {
+  applyGlobalSessionStructureMutations,
+  buildGlobalSessionStructure,
+  mergeSessionDirectoryMetadata,
+  resolveGlobalSessionDirectory,
+  type GlobalSessionStructure,
+  type GlobalSessionStructureMutation,
+} from './globalSessionStructure';
+
+export { mergeSessionDirectoryMetadata, resolveGlobalSessionDirectory } from './globalSessionStructure';
 
 type GlobalSessionsStatus = 'idle' | 'loading' | 'ready' | 'error';
 
@@ -17,9 +28,15 @@ type LoadResult = {
   archivedSessions: Session[];
 };
 
+export type GlobalSessionMutation =
+  | { type: 'upsert'; session: Session }
+  | { type: 'remove'; sessionId: string };
+
 type GlobalSessionsState = {
   activeSessions: Session[];
   archivedSessions: Session[];
+  entityById: ReadonlyMap<string, Session>;
+  structure: GlobalSessionStructure;
   sessionsByDirectory: Map<string, Session[]>;
   reviewTransferBySessionId: Map<string, ReviewTransferDirection>;
   mutationRevision: number;
@@ -29,6 +46,7 @@ type GlobalSessionsState = {
   loadSessions: (fallbackActive?: Session[]) => Promise<LoadResult>;
   refreshSessionsForDirectories: (directories: Iterable<string>, fallbackActive?: Session[]) => Promise<LoadResult>;
   applySnapshot: (activeSessions: Session[], archivedSessions: Session[], status?: GlobalSessionsStatus) => void;
+  applySessionMutations: (mutations: readonly GlobalSessionMutation[]) => void;
   upsertSession: (session: Session) => void;
   upsertSessions: (sessions: Session[]) => void;
   removeSessions: (ids: Iterable<string>) => void;
@@ -63,60 +81,6 @@ let inflightLoad: Promise<LoadResult> | null = null;
 // not apply its (stale) snapshot after the reset.
 let loadGeneration = 0;
 
-export const resolveGlobalSessionDirectory = (session: Session): string | null => {
-  const record = session as Session & {
-    directory?: string | null;
-    project?: { worktree?: string | null } | null;
-  };
-
-  return normalizePath(record.directory ?? null)
-    ?? normalizePath(record.project?.worktree ?? null);
-};
-
-export const mergeSessionDirectoryMetadata = (incoming: Session, existing?: Session | null): Session => {
-  if (!existing) {
-    return incoming;
-  }
-
-  const incomingRecord = incoming as Session & {
-    directory?: string | null;
-    project?: ({ worktree?: string | null } & Record<string, unknown>) | null;
-  };
-  const existingRecord = existing as Session & {
-    directory?: string | null;
-    project?: ({ worktree?: string | null } & Record<string, unknown>) | null;
-  };
-
-  const incomingDirectory = normalizePath(incomingRecord.directory ?? null);
-  const incomingWorktree = normalizePath(incomingRecord.project?.worktree ?? null);
-  const existingDirectory = normalizePath(existingRecord.directory ?? null);
-  const existingWorktree = normalizePath(existingRecord.project?.worktree ?? null);
-
-  let changed = false;
-  const next: typeof incomingRecord = { ...incomingRecord };
-
-  // Some live session updates omit stable raw directory metadata; keep the
-  // cached value so project grouping does not temporarily lose the session.
-  if (!incomingDirectory && existingDirectory) {
-    next.directory = existingRecord.directory;
-    changed = true;
-  }
-
-  if (!incomingWorktree && existingWorktree) {
-    next.project = {
-      ...(existingRecord.project ?? {}),
-      ...(incomingRecord.project ?? {}),
-      worktree: existingRecord.project?.worktree,
-    };
-    changed = true;
-  } else if (!incomingRecord.project && existingRecord.project) {
-    next.project = existingRecord.project;
-    changed = true;
-  }
-
-  return changed ? next : incoming;
-};
-
 export const mergeLiveSessionWithGlobalSession = (
   liveSession: Session,
   globalSession: Session,
@@ -146,9 +110,12 @@ const buildSessionsByDirectory = (sessions: Session[]): Map<string, Session[]> =
 };
 
 const getSessionSignature = (session: Session): string => {
+  const record = session as Session & { parentID?: string | null; slug?: string | null };
   return [
     session.id,
     session.title ?? '',
+    record.parentID ?? '',
+    record.slug ?? '',
     session.time?.created ?? 0,
     session.time?.updated ?? 0,
     session.time?.archived ?? 0,
@@ -158,7 +125,7 @@ const getSessionSignature = (session: Session): string => {
   ].join(':');
 };
 
-export const getSessionStructuralSignature = (session: Session): string => {
+const getSessionStructuralSignature = (session: Session): string => {
   const record = session as Session & { parentID?: string | null; slug?: string | null };
   return [
     session.id,
@@ -311,14 +278,6 @@ const upsertSessionIntoList = (sessions: Session[], session: Session): Session[]
   return next;
 };
 
-const removeSessionFromList = (sessions: Session[], sessionId: string): Session[] => {
-  const index = sessions.findIndex((session) => session.id === sessionId);
-  if (index === -1) {
-    return sessions;
-  }
-  return [...sessions.slice(0, index), ...sessions.slice(index + 1)];
-};
-
 const mergeSessionLists = (existing: Session[], incoming?: Session[]): Session[] => {
   if (!incoming || incoming.length === 0) {
     return existing;
@@ -375,6 +334,14 @@ const applySnapshot = (
   const nextArchivedSessions = sameSessionList(state.archivedSessions, archivedSessions)
     ? state.archivedSessions
     : archivedSessions;
+  const sessionsChanged = nextActiveSessions !== state.activeSessions
+    || nextArchivedSessions !== state.archivedSessions;
+  const nextEntityById = sessionsChanged
+    ? new Map([...nextActiveSessions, ...nextArchivedSessions].map((session) => [session.id, session]))
+    : state.entityById;
+  const nextStructure = nextActiveSessions !== state.activeSessions
+    ? buildGlobalSessionStructure(nextActiveSessions)
+    : state.structure;
   const nextSessionsByDirectory = nextActiveSessions === state.activeSessions
     ? state.sessionsByDirectory
     : buildSessionsByDirectory(nextActiveSessions);
@@ -396,6 +363,8 @@ const applySnapshot = (
   return {
     activeSessions: nextActiveSessions,
     archivedSessions: nextArchivedSessions,
+    entityById: nextEntityById,
+    structure: nextStructure,
     sessionsByDirectory: nextSessionsByDirectory,
     reviewTransferBySessionId: nextReviewTransferMap,
     hasLoaded: true,
@@ -435,42 +404,166 @@ const mutationRevisionPatch = (state: GlobalSessionsState, ids: Iterable<string>
   return { mutationRevision, mutationRevisionBySessionId };
 };
 
-const applySessionUpserts = (state: GlobalSessionsState, sessions: Session[]): Partial<GlobalSessionsState> => {
+const materializeChangedSessionList = (
+  previous: readonly Session[],
+  memberIds: ReadonlySet<string>,
+  additions: ReadonlySet<string>,
+  entityById: ReadonlyMap<string, Session>,
+): Session[] => {
+  const additionsInDisplayOrder = [...additions].reverse();
+  const addedIds = new Set(additionsInDisplayOrder);
+  const next = additionsInDisplayOrder.flatMap((sessionId) => {
+    const session = entityById.get(sessionId);
+    return session && memberIds.has(sessionId) ? [session] : [];
+  });
+  for (const previousSession of previous) {
+    if (!memberIds.has(previousSession.id) || addedIds.has(previousSession.id)) continue;
+    const session = entityById.get(previousSession.id);
+    if (session) next.push(session);
+  }
+  return next;
+};
+
+const updateSessionsByDirectory = (
+  previous: Map<string, Session[]>,
+  previousStructure: GlobalSessionStructure,
+  nextStructure: GlobalSessionStructure,
+  entityById: ReadonlyMap<string, Session>,
+  mutations: readonly GlobalSessionStructureMutation[],
+): Map<string, Session[]> => {
+  const affectedDirectories = new Set<string>();
+  const entityChangedDirectories = new Set<string>();
+  for (const mutation of mutations) {
+    const previousDirectory = mutation.previous && !mutation.previous.time?.archived
+      ? resolveGlobalSessionDirectory(mutation.previous)
+      : null;
+    const nextDirectory = mutation.next && !mutation.next.time?.archived
+      ? resolveGlobalSessionDirectory(mutation.next)
+      : null;
+    if (previousDirectory) affectedDirectories.add(previousDirectory);
+    if (nextDirectory) {
+      affectedDirectories.add(nextDirectory);
+      entityChangedDirectories.add(nextDirectory);
+    }
+  }
+  if (affectedDirectories.size === 0) return previous;
+
+  let next: Map<string, Session[]> | null = null;
+  for (const directory of affectedDirectories) {
+    const previousIds = previousStructure.activeIdsByDirectory.get(directory);
+    const nextIds = nextStructure.activeIdsByDirectory.get(directory);
+    if (previousIds === nextIds && !entityChangedDirectories.has(directory)) continue;
+    next ??= new Map(previous);
+    if (!nextIds || nextIds.length === 0) {
+      next.delete(directory);
+      continue;
+    }
+    next.set(directory, nextIds.flatMap((sessionId) => {
+      const session = entityById.get(sessionId);
+      return session ? [session] : [];
+    }));
+  }
+  return next ?? previous;
+};
+
+const applySessionMutations = (
+  state: GlobalSessionsState,
+  requestedMutations: readonly GlobalSessionMutation[],
+): Partial<GlobalSessionsState> => {
+  let mutations = requestedMutations;
   if (isVSCodeRuntime()) {
-    sessions = filterManagedChatsForRuntime(sessions, true);
-    if (sessions.length === 0) return state;
+    mutations = requestedMutations.filter((mutation) => (
+      mutation.type === 'remove'
+      || filterManagedChatsForRuntime([mutation.session], true).length > 0
+    ));
+    if (mutations.length === 0) return state;
   }
-  const revisionPatch = mutationRevisionPatch(state, sessions.map((session) => session.id));
-  let nextActiveSessions = state.activeSessions;
-  let nextArchivedSessions = state.archivedSessions;
+  const revisionPatch = mutationRevisionPatch(state, mutations.map((mutation) => (
+    mutation.type === 'upsert' ? mutation.session.id : mutation.sessionId
+  )));
+  let nextEntityById: Map<string, Session> | null = null;
+  const activeIds = new Set(state.activeSessions.map((session) => session.id));
+  const archivedIds = new Set(state.archivedSessions.map((session) => session.id));
+  const activeAdditions = new Set<string>();
+  const archivedAdditions = new Set<string>();
+  const structureMutations: GlobalSessionStructureMutation[] = [];
+  let activeChanged = false;
+  let archivedChanged = false;
 
-  for (const session of sessions) {
-    const existingSession = nextActiveSessions.find((candidate) => candidate.id === session.id)
-      ?? nextArchivedSessions.find((candidate) => candidate.id === session.id)
-      ?? null;
-    const sessionWithMetadata = mergeSessionDirectoryMetadata(session, existingSession);
+  const addMember = (ids: Set<string>, additions: Set<string>, sessionId: string): void => {
+    if (ids.has(sessionId)) return;
+    ids.add(sessionId);
+    additions.delete(sessionId);
+    additions.add(sessionId);
+  };
+  const removeMember = (ids: Set<string>, additions: Set<string>, sessionId: string): void => {
+    ids.delete(sessionId);
+    additions.delete(sessionId);
+  };
+
+  for (const mutation of mutations) {
+    const sessionId = mutation.type === 'upsert' ? mutation.session.id : mutation.sessionId;
+    const existingSession = (nextEntityById ?? state.entityById).get(sessionId) ?? null;
+    if (mutation.type === 'remove') {
+      if (!existingSession) continue;
+      nextEntityById ??= new Map(state.entityById);
+      nextEntityById.delete(sessionId);
+      structureMutations.push({ sessionId, previous: existingSession, next: null });
+      if (existingSession.time?.archived) {
+        archivedChanged = true;
+        removeMember(archivedIds, archivedAdditions, sessionId);
+      } else {
+        activeChanged = true;
+        removeMember(activeIds, activeAdditions, sessionId);
+      }
+      continue;
+    }
+
+    const sessionWithMetadata = mergeSessionDirectoryMetadata(mutation.session, existingSession);
+    if (existingSession && getSessionSignature(existingSession) === getSessionSignature(sessionWithMetadata)) continue;
+    nextEntityById ??= new Map(state.entityById);
+    nextEntityById.set(sessionId, sessionWithMetadata);
+    structureMutations.push({ sessionId, previous: existingSession, next: sessionWithMetadata });
     const isArchived = Boolean(sessionWithMetadata.time?.archived);
-    nextActiveSessions = isArchived
-      ? removeSessionFromList(nextActiveSessions, session.id)
-      : upsertSessionIntoList(nextActiveSessions, sessionWithMetadata);
-    nextArchivedSessions = isArchived
-      ? upsertSessionIntoList(nextArchivedSessions, sessionWithMetadata)
-      : removeSessionFromList(nextArchivedSessions, session.id);
+    const wasArchived = Boolean(existingSession?.time?.archived);
+    if (existingSession) {
+      if (wasArchived) archivedChanged = true;
+      else activeChanged = true;
+    }
+    if (isArchived) {
+      archivedChanged = true;
+      removeMember(activeIds, activeAdditions, sessionId);
+      addMember(archivedIds, archivedAdditions, sessionId);
+    } else {
+      activeChanged = true;
+      removeMember(archivedIds, archivedAdditions, sessionId);
+      addMember(activeIds, activeAdditions, sessionId);
+    }
   }
 
-  if (
-    nextActiveSessions === state.activeSessions
-    && nextArchivedSessions === state.archivedSessions
-  ) {
+  if (!nextEntityById) {
     return revisionPatch;
   }
+  const nextActiveSessions = activeChanged
+    ? materializeChangedSessionList(state.activeSessions, activeIds, activeAdditions, nextEntityById)
+    : state.activeSessions;
+  const nextArchivedSessions = archivedChanged
+    ? materializeChangedSessionList(state.archivedSessions, archivedIds, archivedAdditions, nextEntityById)
+    : state.archivedSessions;
+  const nextStructure = applyGlobalSessionStructureMutations(state.structure, structureMutations);
 
   return {
     activeSessions: nextActiveSessions,
     archivedSessions: nextArchivedSessions,
-    sessionsByDirectory: nextActiveSessions === state.activeSessions
-      ? state.sessionsByDirectory
-      : buildSessionsByDirectory(nextActiveSessions),
+    entityById: nextEntityById,
+    structure: nextStructure,
+    sessionsByDirectory: updateSessionsByDirectory(
+      state.sessionsByDirectory,
+      state.structure,
+      nextStructure,
+      nextEntityById,
+      structureMutations,
+    ),
     reviewTransferBySessionId: nextActiveSessions === state.activeSessions
       ? state.reviewTransferBySessionId
       : buildReviewTransferMap(nextActiveSessions),
@@ -494,10 +587,14 @@ const buildReviewTransferMap = (sessions: Session[]): Map<string, ReviewTransfer
 }
 
 const initialManagedChatSessions = readManagedChatSessions();
+const initialEntityById = new Map(initialManagedChatSessions.map((session) => [session.id, session]));
+const initialStructure = buildGlobalSessionStructure(initialManagedChatSessions);
 
 export const useGlobalSessionsStore = create<GlobalSessionsState>((set, get) => ({
   activeSessions: initialManagedChatSessions,
   archivedSessions: [],
+  entityById: initialEntityById,
+  structure: initialStructure,
   sessionsByDirectory: buildSessionsByDirectory(initialManagedChatSessions),
   reviewTransferBySessionId: buildReviewTransferMap(initialManagedChatSessions),
   mutationRevision: 0,
@@ -513,13 +610,21 @@ export const useGlobalSessionsStore = create<GlobalSessionsState>((set, get) =>
     set((state) => applySnapshot(state, activeSessions, archivedSessions, status));
   },
 
+  applySessionMutations: (mutations) => {
+    if (mutations.length === 0) return;
+    set((state) => applySessionMutations(state, mutations));
+  },
+
   resetForRuntimeSwitch: () => {
     loadGeneration += 1;
     inflightLoad = null;
     const managedChatSessions = readManagedChatSessions();
+    const entityById = new Map(managedChatSessions.map((session) => [session.id, session]));
     set({
       activeSessions: managedChatSessions,
       archivedSessions: [],
+      entityById,
+      structure: buildGlobalSessionStructure(managedChatSessions),
       sessionsByDirectory: buildSessionsByDirectory(managedChatSessions),
       reviewTransferBySessionId: buildReviewTransferMap(managedChatSessions),
       mutationRevision: 0,
@@ -562,6 +667,7 @@ export const useGlobalSessionsStore = create<GlobalSessionsState>((set, get) =>
           return applySnapshot(state, reconciled.activeSessions, reconciled.archivedSessions, 'ready');
         });
         const committed = get();
+        raiseSessionOrderingBaselines(committed.activeSessions);
         return { activeSessions: committed.activeSessions, archivedSessions: committed.archivedSessions };
       } catch (error) {
         if (generation !== loadGeneration) {
@@ -614,6 +720,7 @@ export const useGlobalSessionsStore = create<GlobalSessionsState>((set, get) =>
     }
 
     const { active, archived } = splitGlobalSessionsByArchived(fetched.sessions);
+    const refreshedActiveIds = active.map((session) => session.id);
 
     set((state) => {
       let nextActiveSessions = replaceSessionsForDirectories(state.activeSessions, active, fetched.directories);
@@ -634,10 +741,12 @@ export const useGlobalSessionsStore = create<GlobalSessionsState>((set, get) =>
       const nextSessionsByDirectory = nextActiveSessions === state.activeSessions
         ? state.sessionsByDirectory
         : buildSessionsByDirectory(nextActiveSessions);
+      const activeChanged = nextActiveSessions !== state.activeSessions;
+      const archivedChanged = nextArchivedSessions !== state.archivedSessions;
 
       if (
-        nextActiveSessions === state.activeSessions
-        && nextArchivedSessions === state.archivedSessions
+        !activeChanged
+        && !archivedChanged
         && nextSessionsByDirectory === state.sessionsByDirectory
       ) {
         return state;
@@ -646,6 +755,8 @@ export const useGlobalSessionsStore = create<GlobalSessionsState>((set, get) =>
       return {
         activeSessions: nextActiveSessions,
         archivedSessions: nextArchivedSessions,
+        entityById: new Map([...nextActiveSessions, ...nextArchivedSessions].map((session) => [session.id, session])),
+        structure: activeChanged ? buildGlobalSessionStructure(nextActiveSessions) : state.structure,
         sessionsByDirectory: nextSessionsByDirectory,
         reviewTransferBySessionId: nextActiveSessions === state.activeSessions
           ? state.reviewTransferBySessionId
@@ -654,16 +765,23 @@ export const useGlobalSessionsStore = create<GlobalSessionsState>((set, get) =>
     });
 
     const state = get();
+    raiseSessionOrderingBaselines(refreshedActiveIds.flatMap((sessionId) => {
+      const session = state.entityById.get(sessionId);
+      return session && !session.time?.archived ? [session] : [];
+    }));
     return { activeSessions: state.activeSessions, archivedSessions: state.archivedSessions };
   },
 
   upsertSession: (session) => {
-    set((state) => applySessionUpserts(state, [session]));
+    set((state) => applySessionMutations(state, [{ type: 'upsert', session }]));
   },
 
   upsertSessions: (sessions) => {
     if (sessions.length === 0) return;
-    set((state) => applySessionUpserts(state, sessions));
+    set((state) => applySessionMutations(
+      state,
+      sessions.map((session) => ({ type: 'upsert' as const, session })),
+    ));
   },
 
   removeSessions: (ids) => {
@@ -672,26 +790,10 @@ export const useGlobalSessionsStore = create<GlobalSessionsState>((set, get) =>
       return;
     }
 
-    set((state) => {
-      const revisionPatch = mutationRevisionPatch(state, idSet);
-      const nextActiveSessions = state.activeSessions.filter((session) => !idSet.has(session.id));
-      const nextArchivedSessions = state.archivedSessions.filter((session) => !idSet.has(session.id));
-
-      if (
-        nextActiveSessions.length === state.activeSessions.length
-        && nextArchivedSessions.length === state.archivedSessions.length
-      ) {
-        return revisionPatch;
-      }
-
-      return {
-        activeSessions: nextActiveSessions,
-        archivedSessions: nextArchivedSessions,
-        sessionsByDirectory: buildSessionsByDirectory(nextActiveSessions),
-        reviewTransferBySessionId: buildReviewTransferMap(nextActiveSessions),
-        ...revisionPatch,
-      };
-    });
+    set((state) => applySessionMutations(
+      state,
+      [...idSet].map((sessionId) => ({ type: 'remove' as const, sessionId })),
+    ));
   },
 
   archiveSessions: (ids, archivedAt = Date.now()) => {
@@ -701,13 +803,10 @@ export const useGlobalSessionsStore = create<GlobalSessionsState>((set, get) =>
     }
 
     set((state) => {
-      const revisionPatch = mutationRevisionPatch(state, idSet);
       const movedSessions: Session[] = [];
-      const nextActiveSessions = state.activeSessions.filter((session) => {
-        if (!idSet.has(session.id)) {
-          return true;
-        }
-
+      for (const sessionId of idSet) {
+        const session = state.entityById.get(sessionId);
+        if (!session || session.time?.archived) continue;
         movedSessions.push({
           ...session,
           time: {
@@ -715,27 +814,25 @@ export const useGlobalSessionsStore = create<GlobalSessionsState>((set, get) =>
             archived: archivedAt,
           },
         });
-        return false;
-      });
-
-      if (movedSessions.length === 0) {
-        return revisionPatch;
       }
 
-      const remainingArchivedSessions = state.archivedSessions.filter((session) => !idSet.has(session.id));
-
+      if (movedSessions.length === 0) {
+        return mutationRevisionPatch(state, idSet);
+      }
+      const patch = applySessionMutations(
+        state,
+        movedSessions.map((session) => ({ type: 'upsert' as const, session })),
+      );
       return {
-        activeSessions: nextActiveSessions,
-        archivedSessions: [...movedSessions, ...remainingArchivedSessions],
-        sessionsByDirectory: buildSessionsByDirectory(nextActiveSessions),
-        reviewTransferBySessionId: buildReviewTransferMap(nextActiveSessions),
-        ...revisionPatch,
+        ...patch,
+        ...mutationRevisionPatch(state, idSet),
       };
     });
   },
 }));
 
 useGlobalSessionsStore.subscribe((state, previous) => {
+  countSyncPerformance('globalSessionPublications');
   if (
     state.activeSessions !== previous.activeSessions
     && (state.status !== 'idle' || state.activeSessions.length > 0)
diff --git a/packages/ui/src/stores/useInlineCommentDraftStore.terminal.test.ts b/packages/ui/src/stores/useInlineCommentDraftStore.terminal.test.ts
index aa3248cb..dc4856bd 100644
--- a/packages/ui/src/stores/useInlineCommentDraftStore.terminal.test.ts
+++ b/packages/ui/src/stores/useInlineCommentDraftStore.terminal.test.ts
@@ -1,5 +1,5 @@
 import { afterEach, describe, expect, test } from 'bun:test';
-import { useInlineCommentDraftStore } from './useInlineCommentDraftStore';
+import { migratePersistedDrafts, persistedDraftEnvelopeSchema, useInlineCommentDraftStore } from './useInlineCommentDraftStore';
 
 const selection = {
   source: 'terminal' as const,
@@ -7,7 +7,8 @@ const selection = {
   startLine: 4,
   endLine: 5,
   code: 'first\nsecond',
-  language: 'term-1',
+  language: '',
+  terminalId: 'term-1',
   text: '',
 };
 const target = { directory: '/repo', sessionKey: 'session-1' };
@@ -79,3 +80,64 @@ describe('terminal context drafts', () => {
     }
   });
 });
+
+describe('persisted draft migration', () => {
+  type PersistedV2Draft = {
+    id: string;
+    sessionKey: string;
+    source: string;
+    fileLabel: string;
+    startLine: number;
+    endLine: number;
+    code: string;
+    language: string;
+    text: string;
+    createdAt: number;
+  };
+  const v2Draft = (overrides: Partial<PersistedV2Draft> = {}): PersistedV2Draft => ({
+    id: 'icd-1',
+    sessionKey: 'session-1',
+    source: 'diff',
+    fileLabel: 'src/app.ts',
+    startLine: 3,
+    endLine: 5,
+    code: 'const x = 1;',
+    language: 'ts',
+    text: 'fix this',
+    createdAt: 1000,
+    ...overrides,
+  });
+
+  test('moves the terminal id out of the language field', () => {
+    const migrated = migratePersistedDrafts(persistedDraftEnvelopeSchema.safeParse({
+      drafts: { key: [v2Draft({ source: 'terminal', language: 'term-9' })] },
+      touchedAt: { key: 1000 },
+    }), 2);
+    expect(migrated.drafts.key[0].terminalId).toBe('term-9');
+    expect(migrated.drafts.key[0].language).toBe('');
+    expect(migrated.touchedAt.key).toBe(1000);
+  });
+
+  test('drops preview-console drafts but keeps the rest of the bucket', () => {
+    const migrated = migratePersistedDrafts(persistedDraftEnvelopeSchema.safeParse({
+      drafts: { key: [v2Draft({ source: 'preview-console' }), v2Draft({ id: 'icd-2' })] },
+      touchedAt: { key: 1000 },
+    }), 2);
+    expect(migrated.drafts.key.map((draft) => draft.id)).toEqual(['icd-2']);
+  });
+
+  test('malformed entries and unknown payload shapes reset safely', () => {
+    expect(migratePersistedDrafts(persistedDraftEnvelopeSchema.safeParse(null), 2)).toEqual({ drafts: {}, touchedAt: {} });
+    expect(migratePersistedDrafts(persistedDraftEnvelopeSchema.safeParse({ drafts: 'nope' }), 2)).toEqual({ drafts: {}, touchedAt: {} });
+    const migrated = migratePersistedDrafts(persistedDraftEnvelopeSchema.safeParse({
+      drafts: { key: [{ id: 42 }, v2Draft()] },
+      touchedAt: {},
+    }), 2);
+    expect(migrated.drafts.key).toHaveLength(1);
+  });
+
+  test('pre-v2 payloads reset entirely', () => {
+    expect(migratePersistedDrafts(persistedDraftEnvelopeSchema.safeParse({ drafts: { key: [v2Draft()] }, touchedAt: {} }), 1))
+      .toEqual({ drafts: {}, touchedAt: {} });
+  });
+});
diff --git a/packages/ui/src/stores/useInlineCommentDraftStore.ts b/packages/ui/src/stores/useInlineCommentDraftStore.ts
index d27a3c2d..c90bc07a 100644
--- a/packages/ui/src/stores/useInlineCommentDraftStore.ts
+++ b/packages/ui/src/stores/useInlineCommentDraftStore.ts
@@ -1,10 +1,11 @@
 import { create } from 'zustand';
+import { z } from 'zod';
 import { devtools, persist } from 'zustand/middleware';
 import { getRuntimeKey } from '@/lib/runtime-switch';
 import { normalizePath } from '@/lib/pathNormalization';
 import { createDeferredSafeJSONStorage } from './utils/safeStorage';
 
-export type InlineCommentSource = 'diff' | 'plan' | 'file' | 'preview-console' | 'preview-annotation' | 'terminal' | 'pr-comment' | 'pr-check';
+export type InlineCommentSource = 'diff' | 'plan' | 'file' | 'preview-annotation' | 'terminal' | 'pr-comment' | 'pr-check' | 'chat-quote' | 'file-quote';
 
 export type InlineCommentDraftTarget = {
   directory: string;
@@ -22,6 +23,8 @@ export interface InlineCommentDraft {
   code: string;
   language: string;
   text: string;
+  /** Owning terminal session; set only for `source: 'terminal'`. */
+  terminalId?: string;
   createdAt: number;
 }
 
@@ -162,6 +165,63 @@ const boundState = (
   return { drafts: retainedDrafts, touchedAt: retainedTouchedAt };
 };
 
+const EMPTY_PERSISTED_STATE: InlineCommentDraftState = { drafts: {}, touchedAt: {} };
+
+const persistedDraftSchema = z.object({
+  id: z.string(),
+  sessionKey: z.string(),
+  source: z.enum(['diff', 'plan', 'file', 'preview-annotation', 'terminal', 'pr-comment', 'pr-check', 'chat-quote', 'file-quote']),
+  fileLabel: z.string(),
+  startLine: z.number(),
+  endLine: z.number(),
+  side: z.enum(['original', 'modified']).optional(),
+  code: z.string(),
+  language: z.string(),
+  text: z.string(),
+  terminalId: z.string().optional(),
+  createdAt: z.number(),
+});
+
+export const persistedDraftEnvelopeSchema = z.object({
+  drafts: z.record(z.string(), z.array(z.unknown())),
+  touchedAt: z.record(z.string(), z.number()).optional(),
+});
+
+type PersistedDraftEnvelopeResult = z.ZodSafeParseResult<z.infer<typeof persistedDraftEnvelopeSchema>>;
+
+/**
+ * v2 → v3: terminal drafts carried their terminal id in `language`; move it to
+ * the dedicated `terminalId` field. Drafts from the removed 'preview-console'
+ * source are dropped, as are malformed entries. Pre-v2 or unreadable payloads
+ * reset entirely (the pre-v3 behavior).
+ */
+export const migratePersistedDrafts = (envelope: PersistedDraftEnvelopeResult, version: number): InlineCommentDraftState => {
+  if (version < 2) return EMPTY_PERSISTED_STATE;
+  if (!envelope.success) return EMPTY_PERSISTED_STATE;
+
+  const drafts: Record<string, InlineCommentDraft[]> = {};
+  for (const [key, bucket] of Object.entries(envelope.data.drafts)) {
+    const migrated: InlineCommentDraft[] = [];
+    for (const entry of bucket) {
+      const parsed = persistedDraftSchema.safeParse(entry);
+      if (!parsed.success) continue;
+      const draft = parsed.data;
+      if (draft.source === 'terminal' && !draft.terminalId) {
+        migrated.push({ ...draft, terminalId: draft.language, language: '' });
+      } else {
+        migrated.push(draft);
+      }
+    }
+    if (migrated.length > 0) drafts[key] = migrated;
+  }
+
+  const touchedAt: Record<string, number> = {};
+  for (const [key, value] of Object.entries(envelope.data.touchedAt ?? {})) {
+    if (key in drafts) touchedAt[key] = value;
+  }
+  return { drafts, touchedAt };
+};
+
 const removeDraftKey = (state: InlineCommentDraftState, key: string): InlineCommentDraftState => {
   if (!(key in state.drafts)) return state;
 
@@ -281,9 +341,9 @@ export const useInlineCommentDraftStore = create<InlineCommentDraftStore>()(
       {
         name: 'openchamber-inline-comment-drafts',
         storage: createDeferredSafeJSONStorage(),
-        version: 2,
+        version: 3,
         partialize: (state) => ({ drafts: state.drafts, touchedAt: state.touchedAt }),
-        migrate: () => ({ drafts: {}, touchedAt: {} }),
+        migrate: (persisted, version) => migratePersistedDrafts(persistedDraftEnvelopeSchema.safeParse(persisted), version),
       },
     ),
     { name: 'inline-comment-draft-store' },
diff --git a/packages/ui/src/stores/useProjectsStore.test.ts b/packages/ui/src/stores/useProjectsStore.test.ts
index f82d2c54..34c43ea2 100644
--- a/packages/ui/src/stores/useProjectsStore.test.ts
+++ b/packages/ui/src/stores/useProjectsStore.test.ts
@@ -20,6 +20,26 @@ describe("useProjectsStore settings synchronization", () => {
   })
 })
 
+describe("useProjectsStore selection identity", () => {
+  test("changes only the active project id", () => {
+    const first = { id: "project-a", path: "/repo-a", lastOpenedAt: 10 } as ProjectEntry
+    const second = { id: "project-b", path: "/repo-b", lastOpenedAt: 20 } as ProjectEntry
+    const projects = [first, second]
+    useProjectsStore.setState({
+      projects,
+      activeProjectId: first.id,
+      manualProjectOrder: projects.map((project) => project.id),
+    })
+
+    useProjectsStore.getState().setActiveProjectIdOnly(second.id)
+
+    const state = useProjectsStore.getState()
+    expect(state.activeProjectId).toBe(second.id)
+    expect(state.projects).toBe(projects)
+    expect(state.projects.map((project) => project.lastOpenedAt)).toEqual([10, 20])
+  })
+})
+
 describe("useProjectsStore default model and thinking level", () => {
   const seed = (project: ProjectEntry) => {
     useProjectsStore.setState({
diff --git a/packages/ui/src/stores/useProjectsStore.ts b/packages/ui/src/stores/useProjectsStore.ts
index 1ab2c9f5..045ff1e2 100644
--- a/packages/ui/src/stores/useProjectsStore.ts
+++ b/packages/ui/src/stores/useProjectsStore.ts
@@ -357,13 +357,7 @@ const readPersistedActiveProjectId = (): string | null => {
   return null;
 };
 
-const cacheProjects = (projects: ProjectEntry[], activeProjectId: string | null) => {
-  try {
-    safeStorage.setItem(getProjectsStorageKey(), JSON.stringify(projects));
-  } catch {
-    // ignored
-  }
-
+const cacheActiveProjectId = (activeProjectId: string | null) => {
   try {
     const activeProjectStorageKey = getActiveProjectStorageKey();
     if (activeProjectId) {
@@ -376,6 +370,15 @@ const cacheProjects = (projects: ProjectEntry[], activeProjectId: string | null)
   }
 };
 
+const cacheProjects = (projects: ProjectEntry[], activeProjectId: string | null) => {
+  try {
+    safeStorage.setItem(getProjectsStorageKey(), JSON.stringify(projects));
+  } catch {
+    // ignored
+  }
+  cacheActiveProjectId(activeProjectId);
+};
+
 const persistProjects = (projects: ProjectEntry[], activeProjectId: string | null, manualOrder?: string[]) => {
   cacheProjects(projects, activeProjectId);
   if (manualOrder) {
@@ -693,18 +696,13 @@ export const useProjectsStore = create<ProjectsStore>()(
       if (activeProjectId === id) {
         return;
       }
-      const target = projects.find((project) => project.id === id);
-      if (!target) {
+      if (!projects.some((project) => project.id === id)) {
         return;
       }
 
-      const now = Date.now();
-      const nextProjects = projects.map((project) =>
-        project.id === id ? { ...project, lastOpenedAt: now } : project
-      );
-
-      set({ projects: nextProjects, activeProjectId: id });
-      persistProjects(nextProjects, id, get().manualProjectOrder);
+      set({ activeProjectId: id });
+      cacheActiveProjectId(id);
+      void updateDesktopSettings({ activeProjectId: id });
     },
 
     renameProject: (id: string, label: string) => {
diff --git a/packages/ui/src/stores/useSessionFoldersStore.test.ts b/packages/ui/src/stores/useSessionFoldersStore.test.ts
index 088ebfd3..9b346a7a 100644
--- a/packages/ui/src/stores/useSessionFoldersStore.test.ts
+++ b/packages/ui/src/stores/useSessionFoldersStore.test.ts
@@ -84,6 +84,19 @@ describe('useSessionFoldersStore folder assignments', () => {
     expect(storageSetCount).toBe(0);
   });
 
+  test('bulk cross-scope move clears the former folder membership before assigning the target', () => {
+    const store = useSessionFoldersStore.getState();
+    const source = store.createFolder('/workspace/project', 'Source');
+    const target = store.createFolder('/workspace/project-worktree', 'Target');
+    store.addSessionsToFolder('/workspace/project', source.id, ['ses_1', 'ses_2']);
+
+    store.removeSessionsFromFolders('/workspace/project', ['ses_1', 'ses_2']);
+    store.addSessionsToFolder('/workspace/project-worktree', target.id, ['ses_1', 'ses_2']);
+
+    expect(useSessionFoldersStore.getState().getFoldersForScope('/workspace/project')[0]?.sessionIds).toEqual([]);
+    expect(useSessionFoldersStore.getState().getFoldersForScope('/workspace/project-worktree')[0]?.sessionIds).toEqual(['ses_1', 'ses_2']);
+  });
+
   test('restores independent folder snapshots across runtime switches', async () => {
     useSessionFoldersStore.getState().createFolder('/workspace/project', 'Runtime A');
     await waitForPersist();
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 f4a165e6..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.
@@ -500,6 +500,26 @@
    any input above the keyboard instead of hiding it underneath. The opacity term
    preserves the scrim's enter fade (Tailwind's `transition-opacity` would otherwise
    be overridden by this rule's `transition` shorthand). */
+/* The chat comment bar (quote-and-comment input) is a body-level portal, so it
+   does not inherit the shell's keyboard inset. Anchor it against the same
+   keyboard vars with the same curve so it rides the keyboard exactly like the
+   composer does, and sits at the composer's own gap above it. */
+.oc-chat-comment-bar {
+  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--oc-safe-area-bottom-visual, 0.5rem));
+}
+
+:root.oc-capacitor-app .oc-chat-comment-bar {
+  /* The composer keeps --oc-safe-area-bottom-visual of padding above the
+     keyboard (see .bottom-safe-area); using the same term here makes the
+     comment bar land exactly on the compact composer pill. */
+  bottom: calc(
+    var(--oc-keyboard-inset, 0px)
+    + max(0px, calc(env(safe-area-inset-bottom, 0px) - var(--oc-keyboard-inset, 0px)))
+    + var(--oc-safe-area-bottom-visual, 0.5rem)
+  );
+  transition: bottom 0.25s cubic-bezier(0.38, 0.7, 0.125, 1);
+}
+
 :root.oc-capacitor-app .oc-keyboard-inset-surface {
   bottom: var(--oc-keyboard-inset, 0px);
   transition: bottom 0.25s cubic-bezier(0.38, 0.7, 0.125, 1), opacity 0.2s ease-out;
diff --git a/packages/ui/src/sync/DOCUMENTATION.md b/packages/ui/src/sync/DOCUMENTATION.md
index 0b51b525..eb68caa6 100644
--- a/packages/ui/src/sync/DOCUMENTATION.md
+++ b/packages/ui/src/sync/DOCUMENTATION.md
@@ -18,7 +18,8 @@ There are **two distinct session data scopes** in the UI:
    - Holds:
      - global active sessions
      - global archived sessions
-     - active sessions indexed by directory
+    - active and archived entities indexed by ID
+    - active root, parent/child, and directory indexes
 
 These two scopes are intentionally different, but they are no longer equal peers for live UI truth.
 
@@ -43,11 +44,11 @@ So:
 |---|---|---|
 | `ChildStoreManager` and child directory stores | Priority-scheduled directory bootstrap plus `session`, `message`, `part`, `permission`, `question`, etc. | One runtime and one store per directory |
 | `SessionMessageLoader` | Initial message loading, pagination, prefetch, retries, load state, and optimistic reconciliation | One runtime, directory, and session ID |
-| `global-session-status.ts` | Incremental non-idle session status index reconciled from events and authoritative directory snapshots | All known directories in the active runtime |
+| `global-session-status.ts` | Incremental non-idle session status index reconciled from events and authoritative directory snapshots, plus a reference-stable active-ID membership collection maintained from the same mutations | All known directories in the active runtime |
 | `session-ordering.ts` | Ephemeral lifecycle rank used by every user-visible session list | All known sessions in the active runtime |
 | `session-activity-timing.ts` | Elapsed time of the running turn and of the turn that just finished, plus the persisted starts that survive a reload | All known sessions in the active runtime |
 | `session-ui-store.ts` | Session selection, draft lifecycle, one-shot draft-materialization transition identity, abort prompts, worktree metadata, SDK-facing action entrypoints | App UI state |
-| `useGlobalSessionsStore.ts` | Global active sessions, global archived sessions, `sessionsByDirectory` | All opened project/worktree session lists |
+| `useGlobalSessionsStore.ts` | Global active/archived entities plus root, parent/child, and directory indexes | All opened project/worktree session lists |
 | `viewport-store.ts` | Scroll anchors, session memory, loading indicators | App UI state |
 | `attachment-files.ts` | Attachment picker allowlists, MIME/content validation, structured-text sanitization, and HEIC conversion | Local chat attachments across shared UI runtimes |
 | `document-attachments.ts` | Bounded Office/OpenDocument extraction, document text serialization, embedded-image extraction, and positional citations | DOCX, PPTX, XLSX, ODT, ODP, and ODS chat attachments |
@@ -63,6 +64,10 @@ The composer compares normalized attachment MIME types with the selected model's
 
 ## Session list rules
 
+### Layout-mounted session-list lifecycle
+
+`MainLayout` and `VSCodeLayout` each call `useSessionListSync({ isVSCode })` directly and unconditionally, outside Sidebar visibility, responsive, editor, settings, and compact-view branches. The hook selects the real topology inputs, publishes complete directory bootstrap demand through `ChildStoreManager`, refreshes topology additions (including all VS Code directories on its first mount), coalesces OpenChamber control events for 500ms, and supplies a memoized complete global active+archived input to authoritative cleanup. The root-level global poller owns the initial global refresh. MainLayout includes available worktrees; VS Code intentionally excludes them. Sidebar-local `session-created` worktree discovery is separate and full-app-only.
+
 ### Directory bootstrap scheduling
 
 `ChildStoreManager` is the single owner of directory bootstrap scheduling. Consumers publish demand; they must not start bootstrap from row mount effects.
@@ -211,7 +216,7 @@ The profiler also emits a user-timing mark when pending global-session recency i
 
 Streaming assistant and reasoning text is throttled once before reaching the markdown renderer. The renderer incrementally reconciles changed markdown blocks but does not add a second character-pacing timer, which would multiply parse/morph work while catching up on large streamed chunks.
 
-The event pipeline delivers each ordered per-directory flush as one reducer batch. Events retain their individual global indexes, notifications, cleanup, routing, materialization, and debug side effects, while their directory mutations accumulate in order and publish one store transaction per touched directory. Each top-level state slice is cloned lazily at most once in that batch; no-op events do not change references.
+The event pipeline delivers each ordered per-directory flush as one reducer batch. Events retain their individual notifications, cleanup, routing, materialization, and debug side effects, while directory mutations accumulate in order and publish one store transaction per touched directory. Global session mutations and live status, ordering, and timing transitions also accumulate in event order and each owner publishes at most once for the flush. Each top-level state slice is cloned lazily at most once in that batch; no-op events do not change references.
 
 Streaming lifecycle derivation has two paths. Directory attach, switch, bootstrap, and reconnect may perform a full reconciliation. Normal store publications reconcile only sessions whose `session_status` or `message` bucket changed; part-only events update the affected streaming message heartbeat directly and must not rescan all busy sessions.
 
diff --git a/packages/ui/src/sync/__tests__/sync-context-session-events.test.ts b/packages/ui/src/sync/__tests__/sync-context-session-events.test.ts
index 2a05aeb9..d846e868 100644
--- a/packages/ui/src/sync/__tests__/sync-context-session-events.test.ts
+++ b/packages/ui/src/sync/__tests__/sync-context-session-events.test.ts
@@ -4,6 +4,7 @@ import type { Event, Session } from "@opencode-ai/sdk/v2/client"
 let currentSessions: Session[] = []
 const upsertedSessions: Session[] = []
 const removedSessionIds: string[] = []
+let mutationCalls = 0
 let runtimeKey = "runtime-a"
 let runtimeWillChange: (() => void) | null = null
 
@@ -15,6 +16,7 @@ mock.module("@/stores/useGlobalSessionsStore", () => ({
     getState: () => ({
       activeSessions: currentSessions,
       archivedSessions: [] as Session[],
+      entityById: new Map(currentSessions.map((session) => [session.id, session])),
       upsertSession: (session: Session) => {
         upsertedSessions.push(session)
       },
@@ -24,6 +26,15 @@ mock.module("@/stores/useGlobalSessionsStore", () => ({
       removeSessions: (ids: string[]) => {
         removedSessionIds.push(...ids)
       },
+      applySessionMutations: (mutations: Array<
+        { type: "upsert"; session: Session } | { type: "remove"; sessionId: string }
+      >) => {
+        mutationCalls += 1
+        for (const mutation of mutations) {
+          if (mutation.type === "upsert") upsertedSessions.push(mutation.session)
+          else removedSessionIds.push(mutation.sessionId)
+        }
+      },
     }),
   },
 }))
@@ -34,7 +45,7 @@ mock.module("@/lib/runtime-switch", () => ({
     return () => undefined
   },
 }))
-import { applySessionEventToGlobalSessions } from "../session-event-router"
+import { applySessionEventsToGlobalSessions, applySessionEventToGlobalSessions } from "../session-event-router"
 
 const buildSession = (title: string, time: Session["time"]): Session => ({
   id: "ses_1",
@@ -66,6 +77,7 @@ describe("applySessionEventToGlobalSessions", () => {
     currentSessions = []
     upsertedSessions.length = 0
     removedSessionIds.length = 0
+    mutationCalls = 0
   })
 
   test("skips stale global session.updated echoes after a newer rename", () => {
@@ -116,4 +128,22 @@ describe("applySessionEventToGlobalSessions", () => {
 
     expect(upsertedSessions).toEqual([])
   })
+
+  test("commits an ordered event batch once", () => {
+    const events = Array.from({ length: 1_000 }, (_, index) => ({
+      type: "session.created",
+      properties: {
+        info: {
+          id: `ses_${index}`,
+          title: `Session ${index}`,
+          time: { created: index, updated: index },
+        },
+      },
+    } as Event))
+
+    applySessionEventsToGlobalSessions(events)
+
+    expect(mutationCalls).toBe(1)
+    expect(upsertedSessions).toHaveLength(1_000)
+  })
 })
diff --git a/packages/ui/src/sync/global-session-status.test.ts b/packages/ui/src/sync/global-session-status.test.ts
index 923b50c2..6f87c06b 100644
--- a/packages/ui/src/sync/global-session-status.test.ts
+++ b/packages/ui/src/sync/global-session-status.test.ts
@@ -2,17 +2,22 @@ import { beforeEach, describe, expect, test } from "bun:test"
 import type { Event } from "@opencode-ai/sdk/v2/client"
 import {
   applyGlobalSessionStatusEvent,
+  applyGlobalSessionStatusEvents,
   applyGlobalSessionStatusSnapshot,
   useGlobalSessionStatusStore,
 } from "./global-session-status"
 import { resetSessionOrdering, useSessionOrderingStore } from "./session-ordering"
+import { resetSessionActivityTiming, useSessionActivityTimingStore } from "./session-activity-timing"
 
 beforeEach(() => {
   useGlobalSessionStatusStore.setState({ statusById: new Map() })
   resetSessionOrdering()
+  resetSessionActivityTiming()
 })
 
 describe("global session status index", () => {
+  const activeSessionIds = (): ReadonlySet<string> => useGlobalSessionStatusStore.getState().activeSessionIds
+
   test("preserves full retry status details from live events", () => {
     applyGlobalSessionStatusEvent("/repo", {
       type: "session.status",
@@ -29,6 +34,62 @@ describe("global session status index", () => {
     })
   })
 
+  test("keeps active membership stable across active status detail and directory updates", () => {
+    applyGlobalSessionStatusEvent("/repo", {
+      type: "session.status",
+      properties: { sessionID: "session-a", status: { type: "busy" } },
+    } as Event)
+    const before = activeSessionIds()
+
+    applyGlobalSessionStatusEvent("/other-repo", {
+      type: "session.status",
+      properties: { sessionID: "session-a", status: { type: "retry", attempt: 2, message: "waiting" } },
+    } as Event)
+
+    expect(activeSessionIds()).toBe(before)
+  })
+
+  test("replaces active membership only when a session becomes idle or active", () => {
+    applyGlobalSessionStatusEvent("/repo", {
+      type: "session.status",
+      properties: { sessionID: "session-a", status: { type: "busy" } },
+    } as Event)
+    const active = activeSessionIds()
+
+    applyGlobalSessionStatusEvent("/repo", {
+      type: "session.idle",
+      properties: { sessionID: "session-a" },
+    } as Event)
+    const idle = activeSessionIds()
+    expect(idle).not.toBe(active)
+    expect(idle?.has("session-a")).toBe(false)
+
+    applyGlobalSessionStatusEvent("/repo", {
+      type: "session.status",
+      properties: { sessionID: "session-a", status: { type: "busy" } },
+    } as Event)
+    expect(activeSessionIds()).not.toBe(idle)
+    expect(activeSessionIds()?.has("session-a")).toBe(true)
+  })
+
+  test("removes deleted sessions from active membership", () => {
+    // SAFETY: This fixture matches the SDK event shape consumed by the status event reducer.
+    applyGlobalSessionStatusEvent("/repo", {
+      type: "session.status",
+      properties: { sessionID: "session-a", status: { type: "busy" } },
+    } as Event)
+    const active = activeSessionIds()
+
+    applyGlobalSessionStatusEvent("/repo", {
+      type: "session.deleted",
+      properties: { sessionID: "session-a" },
+    } as Event)
+
+    expect(activeSessionIds()).not.toBe(active)
+    expect(activeSessionIds().has("session-a")).toBe(false)
+    expect(useGlobalSessionStatusStore.getState().statusById.has("session-a")).toBe(false)
+  })
+
   test("promotes on active and settled lifecycle edges only", () => {
     applyGlobalSessionStatusEvent("/repo", {
       type: "session.status",
@@ -64,6 +125,48 @@ describe("global session status index", () => {
     expect(useGlobalSessionStatusStore.getState().statusById.has("session-a")).toBe(false)
   })
 
+  test("keeps active membership stable for snapshots with the same active IDs", () => {
+    applyGlobalSessionStatusSnapshot("/repo", { "session-a": { type: "busy" } }, ["session-a"])
+    const before = activeSessionIds()
+
+    applyGlobalSessionStatusSnapshot("/repo", {
+      "session-a": { type: "retry" },
+    }, ["session-a"])
+
+    expect(activeSessionIds()).toBe(before)
+  })
+
+  test("updates active membership when a snapshot adds and removes IDs", () => {
+    applyGlobalSessionStatusSnapshot("/repo", { "session-a": { type: "busy" } }, ["session-a"])
+    const before = activeSessionIds()
+
+    applyGlobalSessionStatusSnapshot("/repo", {
+      "session-a": { type: "busy" },
+      "session-b": { type: "busy" },
+    }, ["session-a", "session-b"])
+    const added = activeSessionIds()
+    expect(added).not.toBe(before)
+    expect(added?.has("session-a")).toBe(true)
+    expect(added?.has("session-b")).toBe(true)
+
+    applyGlobalSessionStatusSnapshot("/repo", { "session-b": { type: "busy" } }, ["session-a", "session-b"])
+    const removed = activeSessionIds()
+    expect(removed).not.toBe(added)
+    expect(removed?.has("session-a")).toBe(false)
+    expect(removed?.has("session-b")).toBe(true)
+  })
+
+  test("clears active membership when a runtime reset replaces status state", () => {
+    applyGlobalSessionStatusEvent("/repo", {
+      type: "session.status",
+      properties: { sessionID: "session-a", status: { type: "busy" } },
+    } as Event)
+
+    useGlobalSessionStatusStore.setState({ statusById: new Map() })
+
+    expect(activeSessionIds()?.size).toBe(0)
+  })
+
   test("clears an explicitly idle known session when directory aliases differ", () => {
     applyGlobalSessionStatusSnapshot("/canonical/repo", { "session-a": { type: "busy" } }, ["session-a"])
 
@@ -71,4 +174,44 @@ describe("global session status index", () => {
 
     expect(useGlobalSessionStatusStore.getState().statusById.has("session-a")).toBe(false)
   })
+
+  test("publishes status, ordering, and timing once for a large event batch", () => {
+    let statusPublications = 0
+    let orderingPublications = 0
+    let timingPublications = 0
+    const unsubscribeStatus = useGlobalSessionStatusStore.subscribe(() => { statusPublications += 1 })
+    const unsubscribeOrdering = useSessionOrderingStore.subscribe(() => { orderingPublications += 1 })
+    const unsubscribeTiming = useSessionActivityTimingStore.subscribe(() => { timingPublications += 1 })
+    const events = Array.from({ length: 1_000 }, (_, index) => ({
+      type: "session.status",
+      properties: { sessionID: `session-${index}`, status: { type: "busy" } },
+    } as Event))
+
+    applyGlobalSessionStatusEvents("/repo", events)
+
+    unsubscribeStatus()
+    unsubscribeOrdering()
+    unsubscribeTiming()
+    expect(useGlobalSessionStatusStore.getState().activeSessionIds.size).toBe(1_000)
+    expect(statusPublications).toBe(1)
+    expect(orderingPublications).toBe(1)
+    expect(timingPublications).toBe(1)
+  })
+
+  test("keeps lifecycle event order inside a batch", () => {
+    applyGlobalSessionStatusEvents("/repo", [
+      {
+        type: "session.status",
+        properties: { sessionID: "session-a", status: { type: "busy" } },
+      } as Event,
+      {
+        type: "session.deleted",
+        properties: { sessionID: "session-a" },
+      } as Event,
+    ])
+
+    expect(useGlobalSessionStatusStore.getState().statusById.has("session-a")).toBe(false)
+    expect(useSessionOrderingStore.getState().rankById.has("session-a")).toBe(false)
+    expect(useSessionActivityTimingStore.getState().startedAt.has("session-a")).toBe(false)
+  })
 })
diff --git a/packages/ui/src/sync/global-session-status.ts b/packages/ui/src/sync/global-session-status.ts
index ee458ade..c6646799 100644
--- a/packages/ui/src/sync/global-session-status.ts
+++ b/packages/ui/src/sync/global-session-status.ts
@@ -2,15 +2,16 @@ import { create } from 'zustand';
 import type { Event, SessionStatus } from '@opencode-ai/sdk/v2/client';
 import { normalizeProjectPath } from '@/lib/projectResolution';
 import {
-  observeSessionActivityEvent,
+  applySessionOrderingMutations,
   reconcileSessionActivitySnapshot,
-  removeSessionOrdering,
+  type SessionOrderingMutation,
 } from './session-ordering';
 import {
-  observeSessionActivityTiming,
+  applySessionActivityTimingMutations,
   reconcileSessionActivityTiming,
-  removeSessionActivityTiming,
+  type SessionActivityTimingMutation,
 } from './session-activity-timing';
+import { countSyncPerformance } from './performance-diagnostics';
 
 // Shared live busy/retry index for every directory. Global events update it
 // incrementally and authoritative directory snapshots reconcile it, so each
@@ -26,13 +27,76 @@ type GlobalSessionStatusEntry = { status: SessionStatus; directory: string };
 
 type GlobalSessionStatusState = {
   statusById: Map<string, GlobalSessionStatusEntry>;
+  activeSessionIds: ReadonlySet<string>;
 };
 
-export const useGlobalSessionStatusStore = create<GlobalSessionStatusState>(() => ({
-  statusById: new Map(),
-}));
+const EMPTY_ACTIVE_SESSION_IDS: ReadonlySet<string> = new Set();
 
-const normalizeStatusType = (type: unknown): ActiveStatusType | 'idle' => {
+const initialState: GlobalSessionStatusState = {
+  statusById: new Map(),
+  activeSessionIds: EMPTY_ACTIVE_SESSION_IDS,
+};
+
+export const useGlobalSessionStatusStore = create<GlobalSessionStatusState>(() => initialState);
+useGlobalSessionStatusStore.subscribe(() => countSyncPerformance('globalStatusPublications'));
+
+// Runtime switching currently replaces statusById directly. Keep that boundary
+// synchronized without making normal status mutations derive membership again.
+const storeSetState = useGlobalSessionStatusStore.setState;
+type GlobalSessionStatusStateUpdate = GlobalSessionStatusState
+  | Partial<GlobalSessionStatusState>
+  | ((state: GlobalSessionStatusState) => GlobalSessionStatusState | Partial<GlobalSessionStatusState>);
+
+function setSynchronizedState(
+  partial: GlobalSessionStatusStateUpdate,
+  replace?: false,
+): void;
+function setSynchronizedState(
+  partial: GlobalSessionStatusState | ((state: GlobalSessionStatusState) => GlobalSessionStatusState),
+  replace: true,
+): void;
+function setSynchronizedState(partial: GlobalSessionStatusStateUpdate, replace?: boolean): void {
+  if (partial instanceof Function) {
+    if (replace === true) {
+      // SAFETY: Zustand's `replace: true` overload only accepts a complete state or a complete-state updater.
+      storeSetState(partial as GlobalSessionStatusState | ((state: GlobalSessionStatusState) => GlobalSessionStatusState), true);
+    } else {
+      storeSetState(partial, replace);
+    }
+    return;
+  }
+  if (partial.statusById === undefined || partial.activeSessionIds) {
+    if (replace === true) {
+      // SAFETY: Zustand's `replace: true` overload only accepts a complete state or a complete-state updater.
+      storeSetState(partial as GlobalSessionStatusState, true);
+    } else {
+      storeSetState(partial, replace);
+    }
+    return;
+  }
+
+  const nextStatusById = partial.statusById;
+  const current = useGlobalSessionStatusStore.getState();
+  const nextActiveSessionIds = new Set<string>();
+  for (const [sessionId, entry] of nextStatusById) {
+    if (entry.status.type === 'busy' || entry.status.type === 'retry') {
+      nextActiveSessionIds.add(sessionId);
+    }
+  }
+  const sameMembership = nextActiveSessionIds.size === current.activeSessionIds.size
+    && [...nextActiveSessionIds].every((sessionId) => current.activeSessionIds.has(sessionId));
+  const nextState = {
+    ...current,
+    ...partial,
+    activeSessionIds: sameMembership ? current.activeSessionIds : nextActiveSessionIds,
+  };
+  if (replace === true) storeSetState(nextState, true);
+  else storeSetState(nextState, replace);
+}
+
+useGlobalSessionStatusStore.setState = setSynchronizedState;
+
+const normalizeStatusType = (type: string | undefined): ActiveStatusType | 'idle' => {
   if (type === 'busy') return 'busy';
   if (type === 'retry') return 'retry';
   return 'idle';
@@ -48,63 +112,84 @@ const statusesEqual = (left: SessionStatus, right: SessionStatus): boolean => (
 const normalizeDirectory = (directory: string): string =>
   normalizeProjectPath(directory) ?? directory;
 
-const setStatus = (sessionId: string, directory: string, status: SessionStatus | { type: 'idle' }): void => {
-  useGlobalSessionStatusStore.setState((state) => {
-    const current = state.statusById.get(sessionId);
-    if (status.type === 'idle') {
-      if (!current) return state;
-      const next = new Map(state.statusById);
-      next.delete(sessionId);
-      return { statusById: next };
-    }
-    if (current && current.directory === directory && statusesEqual(current.status, status)) return state;
-    const next = new Map(state.statusById);
-    next.set(sessionId, { status, directory });
-    return { statusById: next };
-  });
-};
-
 // Event-driven path: called by the sync dispatcher for status-bearing events
 // whose directory has no child store. Mirrors the child reducer's semantics
 // (`session.idle` / `session.error` both resolve to idle).
-export const applyGlobalSessionStatusEvent = (directory: string, payload: Event): void => {
-  switch (payload.type) {
-    case 'session.status': {
+export const applyGlobalSessionStatusEvents = (directory: string, payloads: readonly Event[]): void => {
+  if (payloads.length === 0) return;
+  const normalizedDirectory = normalizeDirectory(directory);
+  const state = useGlobalSessionStatusStore.getState();
+  let statusById: Map<string, GlobalSessionStatusEntry> | null = null;
+  let activeSessionIds: Set<string> | null = null;
+  const orderingMutations: SessionOrderingMutation[] = [];
+  const timingMutations: SessionActivityTimingMutation[] = [];
+  const currentStatuses = (): ReadonlyMap<string, GlobalSessionStatusEntry> => statusById ?? state.statusById;
+  const draftStatuses = (): Map<string, GlobalSessionStatusEntry> => (statusById ??= new Map(state.statusById));
+  const draftActiveIds = (): Set<string> => (activeSessionIds ??= new Set(state.activeSessionIds));
+  const settle = (sessionId: string): void => {
+    if (currentStatuses().has(sessionId)) {
+      draftStatuses().delete(sessionId);
+      draftActiveIds().delete(sessionId);
+    }
+    orderingMutations.push({ type: 'observe', sessionId, phase: 'settled' });
+    timingMutations.push({ type: 'observe', sessionId, phase: 'settled' });
+  };
+
+  for (const payload of payloads) {
+    if (payload.type === 'session.status') {
+      // SAFETY: OpenCode event properties for this event contain the optional session ID and status payload.
       const props = payload.properties as { sessionID?: string; status?: { type?: string } } | undefined;
-      if (typeof props?.sessionID !== 'string' || !props.sessionID) return;
+      if (typeof props?.sessionID !== 'string' || !props.sessionID) continue;
       const type = normalizeStatusType(props.status?.type);
-      setStatus(
-        props.sessionID,
-        normalizeDirectory(directory),
-        type === 'idle' ? { type: 'idle' } : { ...(props.status ?? {}), type } as SessionStatus,
-      );
-      observeSessionActivityEvent(props.sessionID, type === 'idle' ? 'settled' : 'active');
-      // `retry` is still a running turn, so the elapsed counter keeps going.
-      observeSessionActivityTiming(props.sessionID, type === 'idle' ? 'settled' : 'active');
-      return;
-    }
-    case 'session.idle':
-    case 'session.error': {
-      const props = payload.properties as { sessionID?: string } | undefined;
-      if (typeof props?.sessionID === 'string' && props.sessionID) {
-        setStatus(props.sessionID, normalizeDirectory(directory), { type: 'idle' });
-        observeSessionActivityEvent(props.sessionID, 'settled');
-        observeSessionActivityTiming(props.sessionID, 'settled');
+      if (type === 'idle') {
+        settle(props.sessionID);
+        continue;
       }
-      return;
+      // SAFETY: the normalized discriminator is one of the SDK's active status types.
+      const status = { ...(props.status ?? {}), type } as SessionStatus;
+      const current = currentStatuses().get(props.sessionID);
+      if (!current || current.directory !== normalizedDirectory || !statusesEqual(current.status, status)) {
+        draftStatuses().set(props.sessionID, { status, directory: normalizedDirectory });
+        if (!current) draftActiveIds().add(props.sessionID);
+      }
+      orderingMutations.push({ type: 'observe', sessionId: props.sessionID, phase: 'active' });
+      timingMutations.push({ type: 'observe', sessionId: props.sessionID, phase: 'active' });
+      continue;
     }
-    case 'session.deleted': {
+
+    if (payload.type === 'session.idle' || payload.type === 'session.error') {
+      // SAFETY: OpenCode terminal event properties contain the optional addressed session ID.
+      const props = payload.properties as { sessionID?: string } | undefined;
+      if (typeof props?.sessionID === 'string' && props.sessionID) settle(props.sessionID);
+      continue;
+    }
+
+    if (payload.type === 'session.deleted') {
+      // SAFETY: OpenCode deletion event properties identify the deleted session directly or through info.id.
       const props = payload.properties as { sessionID?: string; info?: { id?: string } } | undefined;
       const sessionId = props?.sessionID ?? props?.info?.id;
-      if (sessionId) {
-        removeSessionOrdering(sessionId);
-        removeSessionActivityTiming(sessionId);
+      if (!sessionId) continue;
+      if (currentStatuses().has(sessionId)) {
+        draftStatuses().delete(sessionId);
+        draftActiveIds().delete(sessionId);
       }
-      return;
+      orderingMutations.push({ type: 'remove', sessionId });
+      timingMutations.push({ type: 'remove', sessionId });
     }
-    default:
-      return;
   }
+
+  if (statusById) {
+    useGlobalSessionStatusStore.setState({
+      statusById,
+      activeSessionIds: activeSessionIds ?? state.activeSessionIds,
+    });
+  }
+  applySessionOrderingMutations(orderingMutations);
+  applySessionActivityTimingMutations(timingMutations);
+};
+
+export const applyGlobalSessionStatusEvent = (directory: string, payload: Event): void => {
+  applyGlobalSessionStatusEvents(directory, [payload]);
 };
 
 // Polled path: an authoritative `/session/status?directory=X` snapshot. Entries
@@ -137,10 +222,25 @@ export const applyGlobalSessionStatusSnapshot = (
   useGlobalSessionStatusStore.setState((state) => {
     let changed = false;
     const next = new Map(state.statusById);
+    let nextActiveSessionIds: Set<string> | null = null;
+    const hasActiveSession = (sessionId: string): boolean => (
+      (nextActiveSessionIds ?? state.activeSessionIds).has(sessionId)
+    );
+    const removeActiveSession = (sessionId: string): void => {
+      if (!hasActiveSession(sessionId)) return;
+      nextActiveSessionIds ??= new Set(state.activeSessionIds);
+      nextActiveSessionIds.delete(sessionId);
+    };
+    const addActiveSession = (sessionId: string): void => {
+      if (hasActiveSession(sessionId)) return;
+      nextActiveSessionIds ??= new Set(state.activeSessionIds);
+      nextActiveSessionIds.add(sessionId);
+    };
 
     for (const [sessionId, entry] of state.statusById) {
       if ((entry.directory === directory || known.has(sessionId)) && !(sessionId in raw)) {
         next.delete(sessionId);
+        removeActiveSession(sessionId);
         changed = true;
       }
     }
@@ -151,17 +251,23 @@ export const applyGlobalSessionStatusSnapshot = (
       if (type === 'idle') {
         if (current && (current.directory === directory || known.has(sessionId))) {
           next.delete(sessionId);
+          removeActiveSession(sessionId);
           changed = true;
         }
         continue;
       }
+      // SAFETY: normalizeStatusType has narrowed this snapshot entry to the SDK's busy/retry status discriminator.
       const normalizedStatus = { ...status, type } as SessionStatus;
       if (!current || current.directory !== directory || !statusesEqual(current.status, normalizedStatus)) {
         next.set(sessionId, { status: normalizedStatus, directory });
+        if (!current) addActiveSession(sessionId);
         changed = true;
       }
     }
 
-    return changed ? { statusById: next } : state;
+    return changed ? {
+      statusById: next,
+      activeSessionIds: nextActiveSessionIds ?? state.activeSessionIds,
+    } : state;
   });
 };
diff --git a/packages/ui/src/sync/input-store.ts b/packages/ui/src/sync/input-store.ts
index ef80d5a3..be2d25e2 100644
--- a/packages/ui/src/sync/input-store.ts
+++ b/packages/ui/src/sync/input-store.ts
@@ -4,6 +4,7 @@
  */
 
 import { create } from "zustand"
+import type { ContextPartMetadata } from '@/lib/messages/contextParts'
 import type { AttachedFile } from "@/stores/types/sessionTypes"
 import { prepareAttachmentFiles } from "./attachment-files"
 
@@ -115,6 +116,7 @@ export type SyntheticContextPart = {
   text: string
   attachments?: AttachedFile[]
   synthetic?: boolean
+  metadata?: ContextPartMetadata
 }
 
 export type VSCodeActiveEditorFile = {
diff --git a/packages/ui/src/sync/performance-diagnostics.ts b/packages/ui/src/sync/performance-diagnostics.ts
index c7f41823..095eba3c 100644
--- a/packages/ui/src/sync/performance-diagnostics.ts
+++ b/packages/ui/src/sync/performance-diagnostics.ts
@@ -16,6 +16,15 @@ export type SyncPerformanceCounters = {
   reducerEvents: number
   reducerChangedEvents: number
   directoryStorePublications: number
+  globalSessionPublications: number
+  globalStatusPublications: number
+  orderingPublications: number
+  timingPublications: number
+  liveSessionAggregateRuns: number
+  sidebarStructureBuilds: number
+  sidebarOrderBuilds: number
+  sidebarOrderMetadataEntries: number
+  recentCandidatesVisited: number
   streamingFullReconciliations: number
   streamingIncrementalReconciliations: number
   streamingStatusEntriesVisited: number
@@ -50,6 +59,15 @@ const createCounters = (): SyncPerformanceCounters => ({
   reducerEvents: 0,
   reducerChangedEvents: 0,
   directoryStorePublications: 0,
+  globalSessionPublications: 0,
+  globalStatusPublications: 0,
+  orderingPublications: 0,
+  timingPublications: 0,
+  liveSessionAggregateRuns: 0,
+  sidebarStructureBuilds: 0,
+  sidebarOrderBuilds: 0,
+  sidebarOrderMetadataEntries: 0,
+  recentCandidatesVisited: 0,
   streamingFullReconciliations: 0,
   streamingIncrementalReconciliations: 0,
   streamingStatusEntriesVisited: 0,
diff --git a/packages/ui/src/sync/retry.test.ts b/packages/ui/src/sync/retry.test.ts
new file mode 100644
index 00000000..d1819302
--- /dev/null
+++ b/packages/ui/src/sync/retry.test.ts
@@ -0,0 +1,38 @@
+import { describe, expect, test } from 'bun:test';
+
+import { retry } from './retry';
+
+describe('retry transient classification (#2470)', () => {
+  test("'terminated' (undici half-open socket teardown) is retried", async () => {
+    let attempts = 0;
+    await expect(
+      retry(async () => {
+        attempts += 1;
+        throw new TypeError('terminated');
+      }),
+    ).rejects.toThrow('terminated');
+    expect(attempts).toBe(3);
+  });
+
+  test("normalized 'request timed out' (SDK read timeout) is retried", async () => {
+    let attempts = 0;
+    await expect(
+      retry(async () => {
+        attempts += 1;
+        throw new Error('OpenCode request timed out after 30000ms');
+      }),
+    ).rejects.toThrow('request timed out');
+    expect(attempts).toBe(3);
+  });
+
+  test('caller-initiated abort (AbortError) is NOT retried', async () => {
+    let attempts = 0;
+    await expect(
+      retry(async () => {
+        attempts += 1;
+        throw new DOMException('Aborted', 'AbortError');
+      }),
+    ).rejects.toThrow('Aborted');
+    expect(attempts).toBe(1);
+  });
+});
diff --git a/packages/ui/src/sync/retry.ts b/packages/ui/src/sync/retry.ts
index 8c7aafea..0b3b0a0d 100644
--- a/packages/ui/src/sync/retry.ts
+++ b/packages/ui/src/sync/retry.ts
@@ -6,6 +6,10 @@ export interface RetryOptions {
   retryIf?: (error: unknown) => boolean
 }
 
+// undici tears down half-open upstream connection with `TypeError: terminated`
+// (exact failure from the #2470 logs); the SDK client also rejects reads with
+// normalized "request timed out" error after OPENCODE_REQUEST_TIMEOUT_MS.
+// Both are transient — managed process may be restarting.
 const TRANSIENT_MESSAGES = [
   "load failed",
   "network connection was lost",
@@ -18,6 +22,8 @@ const TRANSIENT_MESSAGES = [
   "opencode api unavailable",
   "503",
   "502",
+  "terminated",
+  "request timed out",
 ]
 
 function isTransientError(error: unknown): boolean {
diff --git a/packages/ui/src/sync/session-activity-timing.ts b/packages/ui/src/sync/session-activity-timing.ts
index 288696c4..444d7d8d 100644
--- a/packages/ui/src/sync/session-activity-timing.ts
+++ b/packages/ui/src/sync/session-activity-timing.ts
@@ -1,6 +1,7 @@
 import { useCallback } from 'react';
 import { create } from 'zustand';
 import { getSafeStorage } from '@/stores/utils/safeStorage';
+import { countSyncPerformance } from './performance-diagnostics';
 
 // Per-session turn timing behind the sidebar activity readout.
 //
@@ -50,6 +51,14 @@ import { getSafeStorage } from '@/stores/utils/safeStorage';
 
 type SessionActivityPhase = 'active' | 'settled';
 
+export type SessionActivityTimingMutation =
+  | { type: 'observe'; sessionId: string; phase: SessionActivityPhase }
+  | { type: 'remove'; sessionId: string };
+
+type ActivityTimingDraft = {
+  startedAt: Map<string, number> | null;
+  settledMs: Map<string, number> | null;
+};
 
 type SessionActivityTimingState = {
   startedAt: ReadonlyMap<string, number>;
@@ -87,13 +96,13 @@ const RESTORE_ADOPTION_WINDOW_MS = 90_000;
 // page did not write to looks exactly like "no turn was running".
 const STORAGE_KEY = 'oc.session-activity.v1';
 
-const EMPTY_ACTIVE: ReadonlySet<string> = new Set();
 const EMPTY_RESTORED: ReadonlyMap<string, PersistedStart> = new Map();
 
 export const useSessionActivityTimingStore = create<SessionActivityTimingState>(() => ({
   startedAt: new Map(),
   settledMs: new Map(),
 }));
+useSessionActivityTimingStore.subscribe(() => countSyncPerformance('timingPublications'));
 
 /** Last moment each live start was observed active, for the liveness stamp. */
 const liveSeen = new Map<string, number>();
@@ -355,11 +364,66 @@ export const observeSessionActivityTiming = (
   sessionId: string,
   phase: SessionActivityPhase,
 ): void => {
-  if (phase === 'active') {
-    applyTransitions(new Set([sessionId]), null);
-    return;
+  applySessionActivityTimingMutations([{ type: 'observe', sessionId, phase }]);
+};
+
+export const applySessionActivityTimingMutations = (
+  mutations: readonly SessionActivityTimingMutation[],
+): void => {
+  if (mutations.length === 0) return;
+  const now = Date.now();
+  const restored = getAdoptableStarts(now);
+  const state = useSessionActivityTimingStore.getState();
+  const next: ActivityTimingDraft = { startedAt: null, settledMs: null };
+  let restoredChanged = false;
+  let sawActive = false;
+  const currentStarted = (): ReadonlyMap<string, number> => next.startedAt ?? state.startedAt;
+  const currentSettled = (): ReadonlyMap<string, number> => next.settledMs ?? state.settledMs;
+  const draftStarted = (): Map<string, number> => (next.startedAt ??= new Map(state.startedAt));
+  const draftSettled = (): Map<string, number> => (next.settledMs ??= new Map(state.settledMs));
+
+  for (const mutation of mutations) {
+    if (mutation.type === 'remove') {
+      if (getRestoredStarts().delete(mutation.sessionId)) restoredChanged = true;
+      liveSeen.delete(mutation.sessionId);
+      if (currentStarted().has(mutation.sessionId)) draftStarted().delete(mutation.sessionId);
+      if (currentSettled().has(mutation.sessionId)) draftSettled().delete(mutation.sessionId);
+      continue;
+    }
+
+    if (mutation.phase === 'active') {
+      sawActive = true;
+      liveSeen.set(mutation.sessionId, now);
+      if (!currentStarted().has(mutation.sessionId)) {
+        draftStarted().set(mutation.sessionId, restored.get(mutation.sessionId)?.start ?? now);
+      }
+      if (currentSettled().has(mutation.sessionId)) draftSettled().delete(mutation.sessionId);
+      continue;
+    }
+
+    if (getRestoredStarts().delete(mutation.sessionId)) restoredChanged = true;
+    const start = currentStarted().get(mutation.sessionId);
+    if (start === undefined) continue;
+    draftStarted().delete(mutation.sessionId);
+    liveSeen.delete(mutation.sessionId);
+    draftSettled().set(mutation.sessionId, Math.max(0, now - start));
+  }
+
+  if (next.settledMs) trimSettled(next.settledMs);
+  if (next.startedAt || next.settledMs) {
+    useSessionActivityTimingStore.setState({
+      startedAt: next.startedAt ?? state.startedAt,
+      settledMs: next.settledMs ?? state.settledMs,
+    });
+  }
+  if (next.startedAt) {
+    if (next.startedAt.size > 0) ensureLivenessStampOnHide();
+    persistStarts(next.startedAt, now);
+  } else if (restoredChanged) {
+    persistStarts(state.startedAt, now);
+  } else if (sawActive && state.startedAt.size > 0 && now - lastPersistAt >= LIVENESS_PERSIST_INTERVAL_MS) {
+    persistStarts(state.startedAt, now);
   }
-  applyTransitions(EMPTY_ACTIVE, { source: 'event', sessionId });
 };
 
 /**
@@ -377,32 +441,7 @@ export const reconcileSessionActivityTiming = (
 };
 
 export const removeSessionActivityTiming = (sessionId: string): void => {
-  const restoredChanged = getRestoredStarts().delete(sessionId);
-  const state = useSessionActivityTimingStore.getState();
-  const hadStart = state.startedAt.has(sessionId);
-  const hadSettled = state.settledMs.has(sessionId);
-  liveSeen.delete(sessionId);
-
-  if (!hadStart && !hadSettled) {
-    if (restoredChanged) persistStarts(state.startedAt, Date.now());
-    return;
-  }
-
-  let startedAt = state.startedAt;
-  if (hadStart) {
-    const draft = new Map(state.startedAt);
-    draft.delete(sessionId);
-    startedAt = draft;
-  }
-  let settledMs = state.settledMs;
-  if (hadSettled) {
-    const draft = new Map(state.settledMs);
-    draft.delete(sessionId);
-    settledMs = draft;
-  }
-
-  useSessionActivityTimingStore.setState({ startedAt, settledMs });
-  if (hadStart || restoredChanged) persistStarts(startedAt, Date.now());
+  applySessionActivityTimingMutations([{ type: 'remove', sessionId }]);
 };
 
 /**
diff --git a/packages/ui/src/sync/session-event-router.ts b/packages/ui/src/sync/session-event-router.ts
index a5a474fe..687ba1a6 100644
--- a/packages/ui/src/sync/session-event-router.ts
+++ b/packages/ui/src/sync/session-event-router.ts
@@ -1,5 +1,10 @@
 import type { Event, Session } from "@opencode-ai/sdk/v2/client"
-import { isGlobalSessionRecencyOnlyUpdate, useGlobalSessionsStore } from "@/stores/useGlobalSessionsStore"
+import {
+  isGlobalSessionRecencyOnlyUpdate,
+  mergeSessionDirectoryMetadata,
+  useGlobalSessionsStore,
+  type GlobalSessionMutation,
+} from "@/stores/useGlobalSessionsStore"
 import { getRuntimeKey, subscribeRuntimeEndpointWillChange } from "@/lib/runtime-switch"
 import { streamPerfCount, streamPerfMark } from "@/stores/utils/streamDebug"
 import { stripSessionDiffSnapshots } from "./sanitize"
@@ -11,23 +16,6 @@ const clearPendingGlobalSessionUpdates = (): void => {
   pendingGlobalSessionUpdates.clear()
 }
 
-const flushPendingGlobalSessionUpdate = (sessionID: string): void => {
-  const update = pendingGlobalSessionUpdates.get(sessionID)
-  pendingGlobalSessionUpdates.delete(sessionID)
-  if (!update) return
-  const runtimeKey = getRuntimeKey()
-  if (update.runtimeKey !== runtimeKey) return
-  const currentSession = getGlobalSessionSnapshot(update.session.id)
-  if (
-    !currentSession
-    || shouldSkipStaleSessionEvent(currentSession, update.session)
-    || !isGlobalSessionRecencyOnlyUpdate(currentSession, update.session)
-  ) return
-  streamPerfMark("global_sessions.event_update_flush")
-  useGlobalSessionsStore.getState().upsertSession(update.session)
-  streamPerfCount("ui.global_sessions.event_update_publication")
-}
-
 const scheduleGlobalSessionUpdate = (session: Session): void => {
   pendingGlobalSessionUpdates.set(session.id, { runtimeKey: getRuntimeKey(), session })
   streamPerfCount("ui.global_sessions.event_update_deferred")
@@ -58,51 +46,82 @@ const getSessionInfoFromPayload = (event: Event): Session | null => {
   return stripSessionDiffSnapshots(session as Session)
 }
 
-const getGlobalSessionSnapshot = (sessionId: string): Session | null => {
-  const global = useGlobalSessionsStore.getState()
-  return [...global.activeSessions, ...global.archivedSessions].find((session) => session.id === sessionId) ?? null
+export const applySessionEventsToGlobalSessions = (payloads: readonly Event[]): void => {
+  if (payloads.length === 0) return
+  const runtimeKey = getRuntimeKey()
+  const store = useGlobalSessionsStore.getState()
+  const overlay = new Map(store.entityById)
+  const mutations: GlobalSessionMutation[] = []
+  let flushedRecency = false
+
+  const appendUpsert = (session: Session): void => {
+    const existing = overlay.get(session.id) ?? null
+    const merged = mergeSessionDirectoryMetadata(session, existing)
+    overlay.set(session.id, merged)
+    mutations.push({ type: "upsert", session: merged })
+  }
+
+  for (const payload of payloads) {
+    if (payload.type === "session.idle" || payload.type === "session.error") {
+      const sessionID = (payload as { properties?: { sessionID?: unknown } }).properties?.sessionID
+      if (typeof sessionID !== "string") continue
+      const update = pendingGlobalSessionUpdates.get(sessionID)
+      pendingGlobalSessionUpdates.delete(sessionID)
+      if (!update || update.runtimeKey !== runtimeKey) continue
+      const currentSession = overlay.get(sessionID) ?? null
+      if (
+        !currentSession
+        || shouldSkipStaleSessionEvent(currentSession, update.session)
+        || !isGlobalSessionRecencyOnlyUpdate(currentSession, update.session)
+      ) continue
+      appendUpsert(update.session)
+      flushedRecency = true
+      continue
+    }
+
+    if (payload.type === "session.created") {
+      const session = getSessionInfoFromPayload(payload)
+      if (session) {
+        const currentSession = overlay.get(session.id) ?? null
+        if (!shouldSkipStaleSessionEvent(currentSession, session)) appendUpsert(session)
+      }
+      continue
+    }
+
+    if (payload.type === "session.updated") {
+      const session = getSessionInfoFromPayload(payload)
+      if (session) {
+        const currentSession = overlay.get(session.id) ?? null
+        if (!shouldSkipStaleSessionEvent(currentSession, session)) {
+          if (currentSession && isGlobalSessionRecencyOnlyUpdate(currentSession, session)) {
+            scheduleGlobalSessionUpdate(session)
+          } else {
+            pendingGlobalSessionUpdates.delete(session.id)
+            appendUpsert(session)
+            streamPerfCount("ui.global_sessions.event_update_immediate")
+          }
+        }
+      }
+      continue
+    }
+
+    if (payload.type === "session.deleted") {
+      const sessionID = (payload as { properties?: { sessionID?: string } }).properties?.sessionID
+        ?? getSessionInfoFromPayload(payload)?.id
+      if (sessionID) {
+        pendingGlobalSessionUpdates.delete(sessionID)
+        overlay.delete(sessionID)
+        mutations.push({ type: "remove", sessionId: sessionID })
+      }
+    }
+  }
+
+  if (mutations.length === 0 || runtimeKey !== getRuntimeKey()) return
+  if (flushedRecency) streamPerfMark("global_sessions.event_update_flush")
+  store.applySessionMutations(mutations)
+  streamPerfCount("ui.global_sessions.event_update_publication")
 }
 
 export const applySessionEventToGlobalSessions = (payload: Event): void => {
-  if (payload.type === "session.idle" || payload.type === "session.error") {
-    const sessionID = (payload as { properties?: { sessionID?: unknown } }).properties?.sessionID
-    if (typeof sessionID === "string") flushPendingGlobalSessionUpdate(sessionID)
-    return
-  }
-
-  if (payload.type === "session.created") {
-    const session = getSessionInfoFromPayload(payload)
-    if (session) {
-      const currentSession = getGlobalSessionSnapshot(session.id)
-      if (!shouldSkipStaleSessionEvent(currentSession, session)) {
-        useGlobalSessionsStore.getState().upsertSession(session)
-      }
-    }
-    return
-  }
-
-  if (payload.type === "session.updated") {
-    const session = getSessionInfoFromPayload(payload)
-    if (session) {
-      const currentSession = getGlobalSessionSnapshot(session.id)
-      if (!shouldSkipStaleSessionEvent(currentSession, session)) {
-        if (currentSession && isGlobalSessionRecencyOnlyUpdate(currentSession, session)) {
-          scheduleGlobalSessionUpdate(session)
-        } else {
-          pendingGlobalSessionUpdates.delete(session.id)
-          useGlobalSessionsStore.getState().upsertSession(session)
-          streamPerfCount("ui.global_sessions.event_update_immediate")
-        }
-      }
-    }
-    return
-  }
-
-  if (payload.type === "session.deleted") {
-    const sessionID = (payload as { properties?: { sessionID?: string } }).properties?.sessionID ?? getSessionInfoFromPayload(payload)?.id
-    if (sessionID) {
-      pendingGlobalSessionUpdates.delete(sessionID)
-      useGlobalSessionsStore.getState().removeSessions([sessionID])
-    }
-  }
+  applySessionEventsToGlobalSessions([payload])
 }
diff --git a/packages/ui/src/sync/session-ordering.test.ts b/packages/ui/src/sync/session-ordering.test.ts
index e95340bc..afaefdac 100644
--- a/packages/ui/src/sync/session-ordering.test.ts
+++ b/packages/ui/src/sync/session-ordering.test.ts
@@ -119,6 +119,32 @@ describe('session lifecycle ordering', () => {
     ]);
   });
 
+  test('orders roots, siblings, orphan parents, and cyclic parent scopes deterministically', () => {
+    const rootOlder = session('root-older', 10);
+    const rootNewer = session('root-newer', 20);
+    const childOlder = session('child-older', 5, 'root-older');
+    const childNewer = session('child-newer', 6, 'root-older');
+    const orphanOlder = session('orphan-older', 10, 'missing-parent');
+    const orphanNewer = session('orphan-newer', 20, 'missing-parent');
+    const cycleOlder = session('cycle-older', 10, 'cycle-newer');
+    const cycleNewer = session('cycle-newer', 20, 'cycle-older');
+
+    expect(orderSessionsByLifecycleScopes(
+      [cycleOlder, rootOlder, childOlder, orphanOlder, cycleNewer, rootNewer, childNewer, orphanNewer],
+      new Set(),
+      new Map(),
+    ).map((item) => item.id)).toEqual([
+      'orphan-newer',
+      'root-newer',
+      'orphan-older',
+      'root-older',
+      'child-newer',
+      'child-older',
+      'cycle-newer',
+      'cycle-older',
+    ]);
+  });
+
   test('does not promote a root when only its child has lifecycle activity', () => {
     const rootOlder = session('root-older', 10);
     const rootNewer = session('root-newer', 20);
diff --git a/packages/ui/src/sync/session-ordering.ts b/packages/ui/src/sync/session-ordering.ts
index 83bd3f40..c97c7db6 100644
--- a/packages/ui/src/sync/session-ordering.ts
+++ b/packages/ui/src/sync/session-ordering.ts
@@ -1,9 +1,13 @@
 import { create } from 'zustand';
 import type { Session } from '@opencode-ai/sdk/v2';
 import { isSessionPinned } from '@/stores/useSessionPinnedStore';
-import { normalizePath } from '@/lib/pathNormalization';
+import { countSyncPerformance } from './performance-diagnostics';
 
-type SessionActivityPhase = 'active' | 'settled';
+export type SessionActivityPhase = 'active' | 'settled';
+
+export type SessionOrderingMutation =
+  | { type: 'observe'; sessionId: string; phase: SessionActivityPhase }
+  | { type: 'remove'; sessionId: string };
 
 type SessionOrderingState = {
   rankById: Map<string, number>;
@@ -18,6 +22,7 @@ let lastRank = 0;
 export const useSessionOrderingStore = create<SessionOrderingState>(() => ({
   rankById: new Map(),
 }));
+useSessionOrderingStore.subscribe(() => countSyncPerformance('orderingPublications'));
 
 const nextRank = (): number => {
   lastRank = Math.max(lastRank + 1, Date.now());
@@ -42,12 +47,36 @@ export const observeSessionActivityEvent = (
   sessionId: string,
   phase: SessionActivityPhase,
 ): void => {
-  const previous = phaseById.get(sessionId);
-  phaseById.set(sessionId, phase);
+  applySessionOrderingMutations([{ type: 'observe', sessionId, phase }]);
+};
 
-  if (previous === phase) return;
-  if (previous === undefined && phase === 'settled') return;
-  promoteSessions([sessionId]);
+export const applySessionOrderingMutations = (
+  mutations: readonly SessionOrderingMutation[],
+): void => {
+  if (mutations.length === 0) return;
+  const currentRanks = useSessionOrderingStore.getState().rankById;
+  let rankById: Map<string, number> | null = null;
+
+  for (const mutation of mutations) {
+    if (mutation.type === 'remove') {
+      phaseById.delete(mutation.sessionId);
+      baselineRankById.delete(mutation.sessionId);
+      if ((rankById ?? currentRanks).has(mutation.sessionId)) {
+        rankById ??= new Map(currentRanks);
+        rankById.delete(mutation.sessionId);
+      }
+      continue;
+    }
+
+    const previous = phaseById.get(mutation.sessionId);
+    phaseById.set(mutation.sessionId, mutation.phase);
+    if (previous === mutation.phase) continue;
+    if (previous === undefined && mutation.phase === 'settled') continue;
+    rankById ??= new Map(currentRanks);
+    rankById.set(mutation.sessionId, nextRank());
+  }
+
+  if (rankById) useSessionOrderingStore.setState({ rankById });
 };
 
 export const reconcileSessionActivitySnapshot = (
@@ -71,14 +100,7 @@ export const reconcileSessionActivitySnapshot = (
 };
 
 export const removeSessionOrdering = (sessionId: string): void => {
-  phaseById.delete(sessionId);
-  baselineRankById.delete(sessionId);
-  useSessionOrderingStore.setState((state) => {
-    if (!state.rankById.has(sessionId)) return state;
-    const rankById = new Map(state.rankById);
-    rankById.delete(sessionId);
-    return { rankById };
-  });
+  applySessionOrderingMutations([{ type: 'remove', sessionId }]);
 };
 
 export const resetSessionOrdering = (): void => {
@@ -107,7 +129,7 @@ const sessionDirectory = (session: Session): string | null => {
     directory?: string | null;
     project?: { worktree?: string | null } | null;
   };
-  return normalizePath(record.directory ?? null) ?? normalizePath(record.project?.worktree ?? null);
+  return record.directory ?? record.project?.worktree ?? null;
 };
 
 const baselineRank = (session: Session, pinned: boolean): number => {
@@ -197,12 +219,39 @@ export const orderSessionsByLifecycleScopes = (
   sessions: Session[],
   pinnedSessionIds: Set<string>,
   rankById: ReadonlyMap<string, number>,
+  hierarchy?: {
+    rootIds: readonly string[];
+    childrenByParentId: ReadonlyMap<string, readonly string[]>;
+  },
 ): Session[] => {
+  countSyncPerformance('sidebarOrderBuilds');
   const sessionIds = new Set(sessions.map((session) => session.id));
+  const sessionById = new Map(sessions.map((session) => [session.id, session]));
   const roots: Session[] = [];
   const childrenByParent = new Map<string, Session[]>();
+  const indexedIds = new Set<string>();
+
+  if (hierarchy) {
+    for (const sessionId of hierarchy.rootIds) {
+      const session = sessionById.get(sessionId);
+      if (!session) continue;
+      indexedIds.add(sessionId);
+      roots.push(session);
+    }
+    for (const [parentId, childIds] of hierarchy.childrenByParentId) {
+      if (!sessionIds.has(parentId)) continue;
+      const children = childIds.flatMap((sessionId) => {
+        const session = sessionById.get(sessionId);
+        if (!session) return [];
+        indexedIds.add(sessionId);
+        return [session];
+      });
+      if (children.length > 0) childrenByParent.set(parentId, children);
+    }
+  }
 
   for (const session of sessions) {
+    if (indexedIds.has(session.id)) continue;
     const parentId = parentIdOf(session);
     if (!parentId || !sessionIds.has(parentId)) {
       roots.push(session);
@@ -217,9 +266,34 @@ export const orderSessionsByLifecycleScopes = (
     }
   }
 
-  const compare = (left: Session, right: Session) => (
-    compareSessionsByLifecycleOrder(left, right, pinnedSessionIds, rankById)
-  );
+  const metadataById = new Map(sessions.map((session) => {
+    const parentId = parentIdOf(session);
+    const pinned = isSessionPinned(pinnedSessionIds, sessionDirectory(session), session.id);
+    const fallback = baselineRank(session, pinned);
+    return [session.id, {
+      parentId,
+      pinned,
+      fallback,
+      lifecycle: rankById.get(session.id) ?? fallback,
+      created: baselineRank(session, true),
+    }] as const;
+  }));
+  countSyncPerformance('sidebarOrderMetadataEntries', metadataById.size);
+  const compare = (left: Session, right: Session): number => {
+    const leftMetadata = metadataById.get(left.id);
+    const rightMetadata = metadataById.get(right.id);
+    if (!leftMetadata || !rightMetadata) return left.id.localeCompare(right.id);
+    if (leftMetadata.pinned !== rightMetadata.pinned) return leftMetadata.pinned ? -1 : 1;
+    if (leftMetadata.parentId === rightMetadata.parentId) {
+      const rankDelta = rightMetadata.lifecycle - leftMetadata.lifecycle;
+      if (rankDelta !== 0) return rankDelta;
+    }
+    const baselineDelta = rightMetadata.fallback - leftMetadata.fallback;
+    if (baselineDelta !== 0) return baselineDelta;
+    const createdDelta = rightMetadata.created - leftMetadata.created;
+    if (createdDelta !== 0) return createdDelta;
+    return left.id.localeCompare(right.id);
+  };
   roots.sort(compare);
   for (const siblings of childrenByParent.values()) {
     siblings.sort(compare);
@@ -238,7 +312,8 @@ export const orderSessionsByLifecycleScopes = (
   for (const root of roots) {
     append(root);
   }
-  for (const session of sessions) {
+  const remaining = sessions.filter((session) => !visited.has(session.id)).sort(compare);
+  for (const session of remaining) {
     append(session);
   }
   return ordered;
diff --git a/packages/ui/src/sync/session-records.test.ts b/packages/ui/src/sync/session-records.test.ts
new file mode 100644
index 00000000..5942a93e
--- /dev/null
+++ b/packages/ui/src/sync/session-records.test.ts
@@ -0,0 +1,66 @@
+import { describe, expect, test } from "bun:test"
+import type { Session } from "@opencode-ai/sdk/v2"
+import { upsertSessionRecord } from "./session-records"
+
+const session = (id: string, overrides: Partial<Session> = {}): Session => ({
+  id, slug: id, projectID: "project", directory: "/workspace", title: id, version: "1",
+  time: { created: 1, updated: 1 }, ...overrides,
+})
+
+describe("upsertSessionRecord", () => {
+  test("inserts missing IDs in binary order", () => {
+    expect(upsertSessionRecord([session("a"), session("c")], session("b")).map((item) => item.id)).toEqual(["a", "b", "c"])
+  })
+
+  test("preserves references for separately allocated equivalent metadata", () => {
+    const current = [session("a", {
+      metadata: { nested: ["value", { count: 1 }] },
+      summary: { additions: 1, deletions: 2, files: 3, diffs: [{ file: "a", additions: 1, deletions: 0 }] },
+    }), session("b")]
+    const incoming = session("a", {
+      metadata: { nested: ["value", { count: 1 }] },
+      summary: { additions: 1, deletions: 2, files: 3, diffs: [{ file: "a", additions: 1, deletions: 0 }] },
+    })
+    const result = upsertSessionRecord(current, incoming)
+    expect(result).toBe(current)
+    expect(result[0]).toBe(current[0])
+    expect(result[1]).toBe(current[1])
+  })
+
+  test("replaces a same-ID record when an unlisted semantic field changes", () => {
+    const current = [session("a")]
+    // SAFETY: The runtime SDK payload may contain an additive field before the local Session type is updated.
+    const incoming = {
+      ...session("a"),
+      // SDK records can gain fields independently of this synchronization boundary.
+      customField: "changed",
+    } as Session
+
+    expect(upsertSessionRecord(current, incoming)).not.toBe(current)
+  })
+
+  const changes: Array<[string, Partial<Session>, Partial<Session>]> = [
+    ["scalars", { workspaceID: "one", path: "a", parentID: "p", cost: 1, agent: "a" }, { workspaceID: "two", path: "b", parentID: "q", cost: 2, agent: "b" }],
+    ["tokens", { tokens: { input: 1, output: 2, reasoning: 3, cache: { read: 4, write: 5 } } }, { tokens: { input: 1, output: 2, reasoning: 3, cache: { read: 4, write: 6 } } }],
+    ["share and model", { share: { url: "a" }, model: { id: "m", providerID: "p", variant: "a" } }, { share: { url: "b" }, model: { id: "m", providerID: "p", variant: "b" } }],
+    ["metadata", { metadata: { key: "a" } }, { metadata: { key: "b" } }],
+    ["permission", { permission: [{ permission: "bash", pattern: "*", action: "ask" }] }, { permission: [{ permission: "bash", pattern: "*", action: "allow" }] }],
+    ["revert", { revert: { messageID: "m", partID: "a", snapshot: "s", diff: "d" } }, { revert: { messageID: "m", partID: "b", snapshot: "s", diff: "d" } }],
+    ["summary diffs", { summary: { additions: 1, deletions: 2, files: 3, diffs: [{ file: "a", additions: 1, deletions: 0 }] } }, { summary: { additions: 1, deletions: 2, files: 3, diffs: [{ file: "a", additions: 2, deletions: 0 }] } }],
+    ["time", { time: { created: 1, updated: 1, compacting: 2, archived: 3 } }, { time: { created: 1, updated: 2, compacting: 2, archived: 3 } }],
+  ]
+
+  for (const [field, current, incoming] of changes) {
+    test(`replaces only target when ${field} changes`, () => {
+      const first = session("a")
+      const target = session("b", current)
+      const last = session("c")
+      const list = [first, target, last]
+      const result = upsertSessionRecord(list, session("b", incoming))
+      expect(result).not.toBe(list)
+      expect(result[0]).toBe(first)
+      expect(result[1]).not.toBe(target)
+      expect(result[2]).toBe(last)
+    })
+  }
+})
diff --git a/packages/ui/src/sync/session-records.ts b/packages/ui/src/sync/session-records.ts
new file mode 100644
index 00000000..d3b72eb2
--- /dev/null
+++ b/packages/ui/src/sync/session-records.ts
@@ -0,0 +1,16 @@
+import type { Session } from "@opencode-ai/sdk/v2"
+import { Binary } from "./binary"
+
+function areSessionsEqual(left: Session, right: Session): boolean {
+  return JSON.stringify(left) === JSON.stringify(right)
+}
+
+export function upsertSessionRecord(current: Session[], incoming: Session): Session[] {
+  const result = Binary.search(current, incoming.id, (session) => session.id)
+  if (!result.found) return [...current.slice(0, result.index), incoming, ...current.slice(result.index)]
+  // Equivalent authoritative detail must retain sidebar session-list references.
+  if (areSessionsEqual(current[result.index], incoming)) return current
+  const next = [...current]
+  next[result.index] = incoming
+  return next
+}
diff --git a/packages/ui/src/sync/session-ui-store.ts b/packages/ui/src/sync/session-ui-store.ts
index bdc50fe4..769193d3 100644
--- a/packages/ui/src/sync/session-ui-store.ts
+++ b/packages/ui/src/sync/session-ui-store.ts
@@ -12,6 +12,7 @@
  * SDK-calling actions that need domain data read it from sync-refs.
  */
 
+import type { ContextPartMetadata } from "@/lib/messages/contextParts"
 import { create } from "zustand"
 import type { Session, Part, Message, TextPart } from "@opencode-ai/sdk/v2/client"
 import type { AttachedFile, SessionContextUsage, SessionWorktreeAttachment } from "@/stores/types/sessionTypes"
@@ -138,7 +139,7 @@ export function routeMessage(params: {
   variant?: string
   inputMode?: "normal" | "shell"
   files?: Array<{ type: "file"; mime: string; url: string; filename: string }>
-  additionalParts?: Array<{ text: string; synthetic?: boolean; files?: Array<{ type: "file"; mime: string; url: string; filename: string }> }>
+  additionalParts?: Array<{ text: string; synthetic?: boolean; metadata?: ContextPartMetadata; files?: Array<{ type: "file"; mime: string; url: string; filename: string }> }>
   delivery?: 'steer'
 }): Promise<void> {
   const requestDirectory = params.directory ?? undefined
@@ -357,7 +358,7 @@ export type SessionUIState = {
     agent?: string,
     attachments?: AttachedFile[],
     agentMentionName?: string,
-    additionalParts?: Array<{ text: string; attachments?: AttachedFile[]; synthetic?: boolean }>,
+    additionalParts?: Array<{ text: string; attachments?: AttachedFile[]; synthetic?: boolean; metadata?: ContextPartMetadata }>,
     variant?: string,
     inputMode?: "normal" | "shell",
     options?: SendMessageOptions,
@@ -1490,7 +1491,7 @@ export const useSessionUIStore = create<SessionUIState>()((set, get) => ({
     agent?: string,
     attachments?: AttachedFile[],
     agentMentionName?: string,
-    additionalParts?: Array<{ text: string; attachments?: AttachedFile[]; synthetic?: boolean }>,
+    additionalParts?: Array<{ text: string; attachments?: AttachedFile[]; synthetic?: boolean; metadata?: ContextPartMetadata }>,
     variant?: string,
     inputMode?: "normal" | "shell",
     options?: SendMessageOptions,
@@ -1578,7 +1579,7 @@ export const useSessionUIStore = create<SessionUIState>()((set, get) => ({
         createdDraftSession.directory,
         createdDraftSession.sessionId,
       )
-      const draftPrefixParts: Array<{ text: string; attachments?: AttachedFile[]; synthetic?: boolean }> =
+      const draftPrefixParts: Array<{ text: string; attachments?: AttachedFile[]; synthetic?: boolean; metadata?: ContextPartMetadata }> =
         draftKnowledge.text ? [{ text: draftKnowledge.text, synthetic: true }] : []
       // Left undefined when nothing was added, as before: an empty array is not
       // the same as no additional parts to everything downstream.
@@ -1613,6 +1614,7 @@ export const useSessionUIStore = create<SessionUIState>()((set, get) => ({
         additionalParts: mergedAdditionalParts?.map((p) => ({
           text: p.text,
           synthetic: p.synthetic,
+          metadata: p.metadata,
           files: p.attachments?.map((a: AttachedFile) => ({
             type: "file" as const,
             mime: a.mimeType,
@@ -1694,7 +1696,7 @@ export const useSessionUIStore = create<SessionUIState>()((set, get) => ({
     // Prepended so it reads as background before the message it accompanies,
     // and empty unless the session is actually missing it.
     const knowledge = await fetchSessionKnowledge(currentSessionDirectory, targetSessionId || "")
-    const prefixParts: Array<{ text: string; attachments?: AttachedFile[]; synthetic?: boolean }> =
+    const prefixParts: Array<{ text: string; attachments?: AttachedFile[]; synthetic?: boolean; metadata?: ContextPartMetadata }> =
       knowledge.text ? [{ text: knowledge.text, synthetic: true }] : []
     const partsWithPinnedContext = prefixParts.length > 0
       ? [...prefixParts, ...(additionalParts || [])]
@@ -1716,6 +1718,7 @@ export const useSessionUIStore = create<SessionUIState>()((set, get) => ({
       additionalParts: partsWithPinnedContext?.map((p) => ({
         text: p.text,
         synthetic: p.synthetic,
+        metadata: p.metadata,
         files: p.attachments?.map((a) => ({
           type: "file" as const,
           mime: a.mimeType,
diff --git a/packages/ui/src/sync/sync-context-selection-boundary.test.tsx b/packages/ui/src/sync/sync-context-selection-boundary.test.tsx
new file mode 100644
index 00000000..5bf96a48
--- /dev/null
+++ b/packages/ui/src/sync/sync-context-selection-boundary.test.tsx
@@ -0,0 +1,67 @@
+import { describe, expect, test } from 'bun:test'
+import React, { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { createOpencodeClient } from '@opencode-ai/sdk/v2'
+import { SyncProvider, useSyncDirectory } from './sync-context'
+import { usePrefetchSessionMessages } from './use-sync'
+import { installHookTestDom } from '../components/session/sidebar/test-utils/testDom'
+
+const createSdk = () => createOpencodeClient({
+  baseUrl: 'https://sync.test',
+  fetch: async (request) => {
+    const path = new URL(request instanceof Request ? request.url : request.toString()).pathname
+    if (path.endsWith('/global/event')) {
+      return new Response(new ReadableStream(), { headers: { 'content-type': 'text/event-stream' } })
+    }
+    const body = path.endsWith('/path')
+      ? { state: '', config: '', worktree: '/workspace', directory: '/workspace', home: '/home' }
+      : path.endsWith('/project') ? []
+      : path.endsWith('/project/current') ? { id: 'project' }
+      : path.endsWith('/session/status') ? {}
+      : []
+    return new Response(JSON.stringify(body), { headers: { 'content-type': 'application/json' } })
+  },
+})
+
+describe('SyncProvider selection boundary', () => {
+  test('does not rerender a stable prefetch consumer when only current directory changes', async () => {
+    const dom = installHookTestDom()
+    const root = createRoot(dom.container)
+    let runtimeRenders = 0
+    let directoryRenders = 0
+    let callback: ReturnType<typeof usePrefetchSessionMessages> | undefined
+    const RuntimeConsumer = React.memo(() => {
+      callback = usePrefetchSessionMessages()
+      runtimeRenders += 1
+      return null
+    })
+    const DirectoryConsumer = () => {
+      useSyncDirectory()
+      directoryRenders += 1
+      return null
+    }
+    const sdk = createSdk()
+
+    try {
+      await act(async () => root.render(
+        <SyncProvider sdk={sdk} directory="/workspace/a">
+          <RuntimeConsumer />
+          <DirectoryConsumer />
+        </SyncProvider>,
+      ))
+      const initialCallback = callback
+      await act(async () => root.render(
+        <SyncProvider sdk={sdk} directory="/workspace/b">
+          <RuntimeConsumer />
+          <DirectoryConsumer />
+        </SyncProvider>,
+      ))
+      expect(runtimeRenders).toBe(1)
+      expect(callback).toBe(initialCallback)
+      expect(directoryRenders).toBe(2)
+    } finally {
+      await act(async () => root.unmount())
+      dom.restore()
+    }
+  })
+})
diff --git a/packages/ui/src/sync/sync-context.tsx b/packages/ui/src/sync/sync-context.tsx
index 772138a1..718b1b29 100644
--- a/packages/ui/src/sync/sync-context.tsx
+++ b/packages/ui/src/sync/sync-context.tsx
@@ -37,7 +37,8 @@ import { setActionRefs } from "./session-actions"
 import { setSyncRefs, getAllSyncSessions } from "./sync-refs"
 import { useSessionUIStore } from "./session-ui-store"
 import { stripSessionDiffSnapshots } from "./sanitize"
-import { applySessionEventToGlobalSessions } from "./session-event-router"
+import { upsertSessionRecord } from "./session-records"
+import { applySessionEventToGlobalSessions, applySessionEventsToGlobalSessions } from "./session-event-router"
 import { syncDebug } from "./debug"
 import { getReconnectCandidateSessionIds, mergeBootstrapSessions } from "./reconnect-recovery"
 import { messagesBefore } from "./message-ordering"
@@ -52,7 +53,12 @@ import { useTodosPersistStore } from "@/stores/useTodosPersistStore"
 import { cleanupPersistedSessionState } from "./session-deletion-cleanup"
 import { toast } from "@/components/ui"
 import { appendNotification } from "./notification-store"
-import { applyGlobalSessionStatusEvent, applyGlobalSessionStatusSnapshot, useGlobalSessionStatusStore } from "./global-session-status"
+import {
+  applyGlobalSessionStatusEvent,
+  applyGlobalSessionStatusEvents,
+  applyGlobalSessionStatusSnapshot,
+  useGlobalSessionStatusStore,
+} from "./global-session-status"
 import type { State } from "./types"
 import type { SessionStatus } from "@opencode-ai/sdk/v2/client"
 import type { PermissionRequest } from "@/types/permission"
@@ -86,22 +92,29 @@ import {
 // Context
 // ---------------------------------------------------------------------------
 
-type SyncSystem = {
+type SyncRuntime = {
   childStores: ChildStoreManager
   messageLoader: SessionMessageLoader
   runtimeKey: string
   sdk: OpencodeClient
+}
+
+type SyncSystem = SyncRuntime & {
   directory: string
 }
 
 const SYNC_CONTEXT_GLOBAL_KEY = "__openchamber_sync_context__"
+const SYNC_RUNTIME_CONTEXT_GLOBAL_KEY = "__openchamber_sync_runtime_context__"
 type SyncGlobal = typeof globalThis & {
   [SYNC_CONTEXT_GLOBAL_KEY]?: React.Context<SyncSystem | null>
+  [SYNC_RUNTIME_CONTEXT_GLOBAL_KEY]?: React.Context<SyncRuntime | null>
 }
 
 const syncGlobal = globalThis as SyncGlobal
 const SyncContext = syncGlobal[SYNC_CONTEXT_GLOBAL_KEY] ?? createContext<SyncSystem | null>(null)
 syncGlobal[SYNC_CONTEXT_GLOBAL_KEY] = SyncContext
+const SyncRuntimeContext = syncGlobal[SYNC_RUNTIME_CONTEXT_GLOBAL_KEY] ?? createContext<SyncRuntime | null>(null)
+syncGlobal[SYNC_RUNTIME_CONTEXT_GLOBAL_KEY] = SyncRuntimeContext
 
 type SdkResult<T> = {
   data?: T
@@ -137,6 +150,12 @@ function useSyncSystem() {
   return ctx
 }
 
+export function useSyncRuntime() {
+  const ctx = useContext(SyncRuntimeContext)
+  if (!ctx) throw new Error("useSyncRuntime must be used within <SyncProvider>")
+  return ctx
+}
+
 function getLiveStates(childStores: ChildStoreManager): State[] {
   return Array.from(childStores.children.values(), (store) => store.getState())
 }
@@ -147,25 +166,42 @@ function useLiveSyncSelector<T>(
   subscribe?: (childStores: ChildStoreManager, notify: () => void) => () => void,
 ): T {
   const { childStores } = useSyncSystem()
-  const cacheRef = useRef<T | undefined>(undefined)
-  const initializedRef = useRef(false)
+  const sourceRevisionRef = useRef(0)
+  const cacheRef = useRef<{
+    childStores: ChildStoreManager
+    selector: (states: State[]) => T
+    revision: number
+    value: T
+  } | null>(null)
 
   const getSnapshot = useCallback(() => {
-    const next = selector(getLiveStates(childStores))
-    if (initializedRef.current && isEqual(cacheRef.current as T, next)) {
-      return cacheRef.current as T
+    const cached = cacheRef.current
+    if (
+      cached
+      && cached.childStores === childStores
+      && cached.selector === selector
+      && cached.revision === sourceRevisionRef.current
+    ) {
+      return cached.value
     }
-
-    cacheRef.current = next
-    initializedRef.current = true
-    return next
+    const next = selector(getLiveStates(childStores))
+    const value = cached && isEqual(cached.value, next) ? cached.value : next
+    cacheRef.current = { childStores, selector, revision: sourceRevisionRef.current, value }
+    return value
   }, [childStores, isEqual, selector])
 
+  const subscribeToSource = useCallback((notify: () => void) => {
+    const invalidate = () => {
+      sourceRevisionRef.current += 1
+      notify()
+    }
+    // Force the post-subscribe snapshot to close the read-before-subscribe gap.
+    sourceRevisionRef.current += 1
+    return subscribe ? subscribe(childStores, invalidate) : childStores.subscribeAll(invalidate)
+  }, [childStores, subscribe])
+
   return React.useSyncExternalStore(
-    useCallback(
-      (notify) => subscribe ? subscribe(childStores, notify) : childStores.subscribeAll(notify),
-      [childStores, subscribe],
-    ),
+    subscribeToSource,
     getSnapshot,
     getSnapshot,
   )
@@ -181,12 +217,16 @@ type DirectoryEventBatch = {
   states: Map<StoreApi<DirectoryStore>, DirectoryStore>
   clonedFields: Map<StoreApi<DirectoryStore>, Set<keyof State>>
   changedStores: Set<StoreApi<DirectoryStore>>
+  globalSessionEvents: Event[]
+  globalStatusEventsByDirectory: Map<string, Event[]>
 }
 
 const createDirectoryEventBatch = (): DirectoryEventBatch => ({
   states: new Map(),
   clonedFields: new Map(),
   changedStores: new Set(),
+  globalSessionEvents: [],
+  globalStatusEventsByDirectory: new Map(),
 })
 
 const getDirectoryEventState = (
@@ -195,6 +235,10 @@ const getDirectoryEventState = (
 ): DirectoryStore => batch?.states.get(store) ?? store.getState()
 
 const publishDirectoryEventBatch = (batch: DirectoryEventBatch): void => {
+  applySessionEventsToGlobalSessions(batch.globalSessionEvents)
+  for (const [directory, events] of batch.globalStatusEventsByDirectory) {
+    applyGlobalSessionStatusEvents(directory, events)
+  }
   for (const store of batch.changedStores) {
     const state = batch.states.get(store)
     if (!state) continue
@@ -227,7 +271,10 @@ export function useAllSessionStatuses(): Record<string, SessionStatus> {
 
 export function useAllLiveSessions(): Session[] {
   return useLiveSyncSelector(
-    useCallback((states) => aggregateLiveSessions(states), []),
+    useCallback((states) => {
+      countSyncPerformance("liveSessionAggregateRuns")
+      return aggregateLiveSessions(states)
+    }, []),
     areSessionListsEquivalent,
     useCallback(
       (childStores: ChildStoreManager, notify: () => void) => childStores.subscribeAllSelected(
@@ -1408,28 +1455,13 @@ async function resyncDirectoryAfterReconnect(
 
     const nextSession = stripSessionDiffSnapshots(session)
     store.setState((state: DirectoryStore) => {
-      const sessionIndex = state.session.findIndex((item) => item.id === nextSession.id)
-      let sessions = state.session
-      let sessionChanged = false
+      const sessions = upsertSessionRecord(state.session, nextSession)
       let sessionTotal = state.sessionTotal
 
-      if (sessionIndex >= 0) {
-        if (!haveEquivalentSyncSnapshots(sessions[sessionIndex], nextSession)) {
-          sessions = [...state.session]
-          sessions[sessionIndex] = nextSession
-          sessionChanged = true
-        }
-      } else {
-        sessions = [...state.session]
-        sessions.push(nextSession)
-        sessions.sort((a, b) => cmp(a.id, b.id))
-        if (!nextSession.parentID) sessionTotal += 1
-        sessionChanged = true
-      }
-
-      if (!sessionChanged) {
+      if (sessions === state.session) {
         return state
       }
+      if (!state.session.some((item) => item.id === nextSession.id) && !nextSession.parentID) sessionTotal += 1
 
       return {
         session: sessions,
@@ -1455,6 +1487,7 @@ export function handleEvent(
   skipVSCodeAutoAccept = false,
   streamingDirectory?: string,
   batch?: DirectoryEventBatch,
+  globalEffectsAlreadyApplied = false,
 ) {
   if ((payload as { type?: unknown }).type === "openchamber:permission-auto-accept.updated") {
     const properties = (payload as unknown as { properties?: unknown }).properties
@@ -1483,12 +1516,19 @@ export function handleEvent(
     return
   }
 
-  applySessionEventToGlobalSessions(payload)
-  // Keep the cross-project status map current for ALL directories (mirrors the
-  // global-session handling above). Child stores remain the primary source for
-  // synced directories; this map covers sessions a child store doesn't list
-  // (unopened directories, or list/status races for just-created sessions).
-  applyGlobalSessionStatusEvent(directory, payload)
+  if (!globalEffectsAlreadyApplied) {
+    if (batch) {
+      batch.globalSessionEvents.push(payload)
+      const statusEvents = batch.globalStatusEventsByDirectory.get(directory)
+      if (statusEvents) statusEvents.push(payload)
+      else batch.globalStatusEventsByDirectory.set(directory, [payload])
+    } else {
+      applySessionEventToGlobalSessions(payload)
+      // Child stores remain the primary source for synced directories; this
+      // index covers unopened directories and list/status races.
+      applyGlobalSessionStatusEvent(directory, payload)
+    }
+  }
 
   // Global events
   if (directory === "global" || !directory) {
@@ -1571,7 +1611,17 @@ export function handleEvent(
         if (eventKey && pendingVSCodePermissionEvents.get(eventKey) !== eventToken) return
         if (eventKey) pendingVSCodePermissionEvents.delete(eventKey)
         if (expectedRuntimeKey !== getRuntimeKey()) return
-        if (!accepted) handleEvent(rawDirectory, payload, childStores, routingIndex, expectedRuntimeKey, true, streamingDirectory)
+        if (!accepted) handleEvent(
+          rawDirectory,
+          payload,
+          childStores,
+          routingIndex,
+          expectedRuntimeKey,
+          true,
+          streamingDirectory,
+          undefined,
+          true,
+        )
       }
       void processVSCodePermissionAutoAccept(permission, resolvedDirectory).then(
         completePermissionCheck,
@@ -2024,15 +2074,13 @@ export function SyncProvider(props: {
   const pipelineHasConnectedRef = useRef(false)
   const pipelineDisconnectedBeforeFirstConnectRef = useRef(false)
 
+  const runtime = useMemo<SyncRuntime>(
+    () => ({ childStores, messageLoader, runtimeKey, sdk: props.sdk }),
+    [childStores, messageLoader, props.sdk, runtimeKey],
+  )
   const system = useMemo<SyncSystem>(
-    () => ({
-      childStores,
-      messageLoader,
-      runtimeKey,
-      sdk: props.sdk,
-      directory: props.directory,
-    }),
-    [childStores, messageLoader, props.sdk, props.directory, runtimeKey],
+    () => ({ ...runtime, directory: props.directory }),
+    [props.directory, runtime],
   )
 
   const triggerDirectoryResync = useCallback((directory: string, reason: SessionMaterializationReason) => {
@@ -2547,7 +2595,14 @@ export function SyncProvider(props: {
     return unsubscribe
   }, [props.directory, childStores])
 
-  return <SyncContext.Provider value={system}>{props.children}</SyncContext.Provider>
+  // Directory navigation must not republish stable runtime dependencies.
+  return (
+    <SyncContext.Provider value={system}>
+      <SyncRuntimeContext.Provider value={runtime}>
+        {props.children}
+      </SyncRuntimeContext.Provider>
+    </SyncContext.Provider>
+  )
 }
 
 // ---------------------------------------------------------------------------
@@ -2647,6 +2702,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)
@@ -2790,13 +2887,25 @@ export function useScopedBlockingQuestions(sessionID: string | null, directory?:
   return useScopedBlockingRequests(sessionID, directory, selectQuestionRequestsBySession, EMPTY_QUESTION_REQUESTS)
 }
 
+const sessionsByIdCache = new WeakMap<State["session"], Map<string, Session>>()
+
+const getSessionById = (sessions: State["session"], sessionID?: string | null): Session | undefined => {
+  if (!sessionID) return undefined
+  let sessionsById = sessionsByIdCache.get(sessions)
+  if (!sessionsById) {
+    sessionsById = new Map(sessions.map((session) => [session.id, session]))
+    sessionsByIdCache.set(sessions, sessionsById)
+  }
+  return sessionsById.get(sessionID)
+}
+
 export function useParentSession(sessionID: string | null, directory?: string): Session | null {
   return useDirectorySync(
     useCallback((state: State) => {
       if (!sessionID) return null
-      const current = state.session.find((s) => s.id === sessionID)
+      const current = getSessionById(state.session, sessionID)
       if (!current?.parentID) return null
-      return state.session.find((s) => s.id === current.parentID)
+      return getSessionById(state.session, current.parentID)
         ?? getAllSyncSessions().find((s) => s.id === current.parentID)
         ?? null
     }, [sessionID]),
@@ -2809,7 +2918,8 @@ export function useSession(sessionID?: string | null, directory?: string) {
   const { childStores } = useSyncSystem()
   const getSnapshot = useCallback(() => {
     if (directory) {
-      return childStores.getChild(directory)?.getState().session.find((session) => session.id === sessionID)
+      const sessions = childStores.getChild(directory)?.getState().session
+      return sessions ? getSessionById(sessions, sessionID) : undefined
     }
     return findLiveSession(getLiveStates(childStores), sessionID)
   }, [childStores, directory, sessionID])
diff --git a/packages/ui/src/sync/use-sync.ts b/packages/ui/src/sync/use-sync.ts
index 629821f7..a2bb5d65 100644
--- a/packages/ui/src/sync/use-sync.ts
+++ b/packages/ui/src/sync/use-sync.ts
@@ -1,9 +1,10 @@
 import { useCallback, useMemo } from "react"
 import type { Message, Part } from "@opencode-ai/sdk/v2/client"
 import { Binary } from "./binary"
+import { upsertSessionRecord } from "./session-records"
 import { retry } from "./retry"
 import { SESSION_CACHE_LIMIT, type State } from "./types"
-import { pickSessionCacheEvictions } from "./session-cache"
+import { dropSessionCaches, getProtectedSessionCacheIds, pickSessionCacheEvictions } from "./session-cache"
 import {
   dropCachedSessionMessageRecordsSnapshots,
   useChildStoreManager,
@@ -11,9 +12,10 @@ import {
   useSessionMessageLoader,
   useSyncDirectory,
   useSyncSDK,
+  useSyncRuntime,
   resyncBlockingRequestsForDirectory,
+  buildSessionMessageRecordsSnapshot,
 } from "./sync-context"
-import { dropSessionCaches, getProtectedSessionCacheIds } from "./session-cache"
 import { stripSessionDiffSnapshots } from "./sanitize"
 import { isVSCodeRuntime } from "@/lib/desktop"
 import { isMobileSurfaceRuntime } from "@/lib/runtimeSurface"
@@ -46,7 +48,6 @@ const syncSessionInflightByKey = new Map<string, Promise<void>>()
 // to the store. This prevents rapid session switches (e.g. 1→2→3 in the
 // sidebar) from having each completed fetch fight for focus.
 const syncSessionGenerationByKey = new Map<string, number>()
-
 type SdkResult<T> = {
   data?: T
   error?: unknown
@@ -111,10 +112,80 @@ export function shouldFetchSessionForRenderableSync(input: {
   return Boolean(input.force) || !input.hasSession || input.shouldLoadMessages
 }
 
-// ---------------------------------------------------------------------------
-// useSync — message loading, pagination, optimistic updates
-// Message loading, pagination, optimistic updates
-// ---------------------------------------------------------------------------
+function useSessionCacheTouch() {
+  const { childStores, messageLoader, runtimeKey } = useSyncRuntime()
+
+  const evict = useCallback(
+    (directory: string, sessionIDs: string[]) => {
+      if (sessionIDs.length === 0 || getRuntimeKey() !== runtimeKey) return
+      const store = childStores.getChild(directory)
+      if (!store) return
+
+      const current = store.getState()
+      const draft = {
+        message: { ...current.message },
+        part: { ...current.part },
+        session_status: { ...current.session_status },
+        session_diff: { ...current.session_diff },
+        todo: { ...current.todo },
+        permission: { ...current.permission },
+        question: { ...current.question },
+      }
+      dropSessionCaches(draft, sessionIDs)
+      dropCachedSessionMessageRecordsSnapshots(store, sessionIDs)
+      store.setState(draft)
+      for (const sessionID of sessionIDs) messageLoader.invalidateSession({ directory, sessionID })
+      clearSessionPrefetch(directory, sessionIDs)
+    },
+    [childStores, messageLoader, runtimeKey],
+  )
+
+  const seenFor = useCallback((directory: string) => {
+    const cacheKey = `${runtimeKey}\n${directory}`
+    const existing = seenByDirectory.get(cacheKey)
+    if (existing) {
+      seenByDirectory.delete(cacheKey)
+      seenByDirectory.set(cacheKey, existing)
+      return existing.sessions
+    }
+    const created: SeenDirectoryEntry = { runtimeKey, directory, sessions: new Set() }
+    seenByDirectory.set(cacheKey, created)
+    while (seenByDirectory.size > MAX_SEEN_DIRS) {
+      const oldestKey = seenByDirectory.keys().next().value
+      if (!oldestKey) break
+      const oldest = seenByDirectory.get(oldestKey)
+      seenByDirectory.delete(oldestKey)
+      if (oldest?.runtimeKey === runtimeKey) evict(oldest.directory, [...oldest.sessions])
+    }
+    return created.sessions
+  }, [evict, runtimeKey])
+
+  return useCallback((sessionID: string, directory: string) => {
+    if (getRuntimeKey() !== runtimeKey) return
+    const seen = seenFor(directory)
+    const store = childStores.ensureChild(directory, { bootstrap: false })
+    const protectedIds = getProtectedSessionCacheIds(store.getState())
+    const stale = pickSessionCacheEvictions({
+      seen,
+      keep: sessionID,
+      limit: getEffectiveSessionCacheLimit(),
+      preserve: protectedIds,
+    })
+    evict(directory, stale)
+
+    if (!isConstrainedSessionRuntime()) return
+    const state = store.getState()
+    const keep = new Set([sessionID, ...seen, ...protectedIds])
+    const prefetched = Object.keys(state.message).filter((id) => !keep.has(id))
+    evict(directory, prefetched)
+    const afterPrefetchEviction = prefetched.length > 0 ? store.getState() : state
+    const heavyInactive = Object.keys(afterPrefetchEviction.message).filter((id) => (
+      id !== sessionID && !protectedIds.has(id) && isHeavyConstrainedSessionCache(afterPrefetchEviction, id)
+    ))
+    for (const id of heavyInactive) seen.delete(id)
+    evict(directory, heavyInactive)
+  }, [childStores, evict, runtimeKey, seenFor])
+}
 
 export function useSync() {
   const sdk = useSyncSDK()
@@ -123,6 +194,7 @@ export function useSync() {
   const childStores = useChildStoreManager()
   const messageLoader = useSessionMessageLoader()
   const runtimeKey = getRuntimeKey()
+  const touch = useSessionCacheTouch()
 
   const recoverPendingQuestions = useCallback(
     async (sessionID: string, directoryOverride?: string): Promise<boolean> => {
@@ -146,107 +218,6 @@ export function useSync() {
     [directory, runtimeKey],
   )
 
-  // Session cache eviction — two levels of LRU:
-  // (1) across directories (max 30), (2) within a directory (SESSION_CACHE_LIMIT).
-
-  // Evict all cached session data for given IDs from a directory's store
-  const evict = useCallback(
-    (dir: string, sessionIDs: string[]) => {
-      if (sessionIDs.length === 0 || getRuntimeKey() !== runtimeKey) return
-      const dirStore = childStores.getChild(dir)
-      if (!dirStore) return
-
-      const current = dirStore.getState()
-      const draft = {
-        message: { ...current.message },
-        part: { ...current.part },
-        session_status: { ...current.session_status },
-        session_diff: { ...current.session_diff },
-        todo: { ...current.todo },
-        permission: { ...current.permission },
-        question: { ...current.question },
-      }
-      dropSessionCaches(draft, sessionIDs)
-      dropCachedSessionMessageRecordsSnapshots(dirStore, sessionIDs)
-      dirStore.setState(draft)
-
-      // Clear meta + optimistic + prefetch cache for evicted sessions
-      for (const id of sessionIDs) {
-        messageLoader.invalidateSession({ directory: dir, sessionID: id })
-      }
-      clearSessionPrefetch(dir, sessionIDs)
-    },
-    [childStores, messageLoader, runtimeKey],
-  )
-
-  // Get or create the seen-set for a directory. LRU reorder on access.
-  // When seen directories exceed MAX_SEEN_DIRS, evict the oldest directory's caches.
-  // LRU reorder on access. Evicts oldest directory when exceeding MAX_SEEN_DIRS.
-  const seenFor = useCallback((targetDirectory: string) => {
-    const cacheKey = `${runtimeKey}\n${targetDirectory}`
-    const existing = seenByDirectory.get(cacheKey)
-    if (existing) {
-      // LRU reorder: delete + re-insert moves to end (most recent)
-      seenByDirectory.delete(cacheKey)
-      seenByDirectory.set(cacheKey, existing)
-      return existing.sessions
-    }
-    const created: SeenDirectoryEntry = { runtimeKey, directory: targetDirectory, sessions: new Set() }
-    seenByDirectory.set(cacheKey, created)
-
-    // Evict oldest directories if over limit
-    while (seenByDirectory.size > MAX_SEEN_DIRS) {
-      const first = seenByDirectory.keys().next().value
-      if (!first) break
-      const stale = seenByDirectory.get(first)
-      seenByDirectory.delete(first)
-      if (stale?.runtimeKey === runtimeKey) evict(stale.directory, [...stale.sessions])
-    }
-
-    return created.sessions
-  }, [evict, runtimeKey])
-
-  // Touch a session — triggers both directory-level and session-level eviction
-  const touch = useCallback(
-    (sessionID: string, targetDirectory = directory) => {
-      if (getRuntimeKey() !== runtimeKey) return
-      const s = seenFor(targetDirectory)
-      const targetStore = targetDirectory === directory
-        ? store
-        : childStores.ensureChild(targetDirectory, { bootstrap: false })
-      const protectedIds = getProtectedSessionCacheIds(targetStore.getState())
-      const cacheLimit = getEffectiveSessionCacheLimit()
-      const stale = pickSessionCacheEvictions({
-        seen: s,
-        keep: sessionID,
-        limit: cacheLimit,
-        preserve: protectedIds,
-      })
-      evict(targetDirectory, stale)
-
-      if (isConstrainedSessionRuntime()) {
-        const state = targetStore.getState()
-        const keep = new Set([sessionID, ...s, ...protectedIds])
-        const prefetched = Object.keys(state.message).filter((id) => !keep.has(id))
-        evict(targetDirectory, prefetched)
-
-        // One very large inactive session can create memory/GC pressure that
-        // makes later small-session switches feel slow. Keep it while active,
-        // but do not retain it as a warm cache in constrained shells.
-          const afterPrefetchEviction = prefetched.length > 0 ? targetStore.getState() : state
-        const heavyInactive = Object.keys(afterPrefetchEviction.message).filter((id) => {
-          if (id === sessionID || protectedIds.has(id)) return false
-          return isHeavyConstrainedSessionCache(afterPrefetchEviction, id)
-        })
-        if (heavyInactive.length > 0) {
-          for (const id of heavyInactive) s.delete(id)
-          evict(targetDirectory, heavyInactive)
-        }
-      }
-    },
-    [childStores, directory, seenFor, evict, runtimeKey, store],
-  )
-
   // Sync a session (load if not cached)
   const syncSession = useCallback(
     async (sessionID: string, force?: boolean, directoryOverride?: string) => {
@@ -289,14 +260,8 @@ export function useSync() {
                   if (result.data && !isStale()) {
                     const nextSession = stripSessionDiffSnapshots(result.data)
                     const s = targetStore.getState()
-                    const sessions = [...s.session]
-                    const idx = Binary.search(sessions, sessionID, (s) => s.id)
-                    if (idx.found) {
-                      sessions[idx.index] = nextSession
-                    } else {
-                      sessions.splice(idx.index, 0, nextSession)
-                    }
-                    if (!isStale()) {
+                    const sessions = upsertSessionRecord(s.session, nextSession)
+                    if (sessions !== s.session && !isStale()) {
                       targetStore.setState({ session: sessions })
                     }
                   }
@@ -436,3 +401,29 @@ export function useSync() {
     [syncSession, prefetchSession, loadMore, loadCompleteHistory, hasMore, isLoading, isComplete, recoverPendingQuestions, optimisticAdd, optimisticRemove, optimisticConfirm],
   )
 }
+
+export function usePrefetchSessionMessages() {
+  const { messageLoader, runtimeKey } = useSyncRuntime()
+  const touch = useSessionCacheTouch()
+
+  return useCallback(async ({ directory, sessionID }: { directory: string; sessionID: string }) => {
+    if (getRuntimeKey() !== runtimeKey) return
+    await messageLoader.prefetch({ directory, sessionID })
+    if (messageLoader.getSnapshot({ directory, sessionID }).status !== "ready") return
+    touch(sessionID, directory)
+  }, [messageLoader, runtimeKey, touch])
+}
+
+export function useSessionMessageRecordsForExport() {
+  const { childStores, messageLoader, runtimeKey } = useSyncRuntime()
+  const touch = useSessionCacheTouch()
+
+  return useCallback(async ({ directory, sessionID }: { directory: string; sessionID: string }) => {
+    if (getRuntimeKey() !== runtimeKey) return null
+    const store = childStores.ensureChild(directory, { bootstrap: false })
+    touch(sessionID, directory)
+    await messageLoader.loadComplete({ directory, sessionID })
+    if (getRuntimeKey() !== runtimeKey) return null
+    return buildSessionMessageRecordsSnapshot(store.getState(), sessionID).list
+  }, [childStores, messageLoader, runtimeKey, touch])
+}
diff --git a/packages/ui/src/types/bun-test.d.ts b/packages/ui/src/types/bun-test.d.ts
index 3a918acb..9b304df4 100644
--- a/packages/ui/src/types/bun-test.d.ts
+++ b/packages/ui/src/types/bun-test.d.ts
@@ -32,8 +32,17 @@ declare module "bun:test" {
   export function beforeEach(fn: () => void | Promise<void>): void;
   export function afterEach(fn: () => void | Promise<void>): void;
   export function afterAll(fn: () => void | Promise<void>): void;
-  export function mock<T extends (...args: never[]) => unknown>(fn?: T): T;
+  // Mock<T> matches the bun:test runtime mock: T (callable) plus spy methods.
+  // Tests that need to swap implementations at runtime cast through `Mock<T>`.
+  export interface Mock<T extends (...args: never[]) => unknown> {
+    (...args: Parameters<T>): ReturnType<T>;
+    mockImplementation(fn: T): Mock<T>;
+    mockReturnValue(value: ReturnType<T>): Mock<T>;
+    mockReset(): Mock<T>;
+  }
+  export function mock<T extends (...args: never[]) => unknown>(fn?: T): Mock<T>;
   export namespace mock {
     function module(moduleName: string, factory: () => Record<string, unknown>): void;
+    function restore(): void;
   }
 }
diff --git a/packages/vscode/CHANGELOG.md b/packages/vscode/CHANGELOG.md
index a40c5a1d..58c288eb 100644
--- a/packages/vscode/CHANGELOG.md
+++ b/packages/vscode/CHANGELOG.md
@@ -1,3 +1,15 @@
+## [Unreleased]
+
+- **Chat context attachments:** diff and file comments, terminal selections, and linked issues/PRs now show in the conversation as compact context cards — source header, captured content behind an expander, your comment below — instead of raw text inside the 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. 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).
+
 ## [1.20.0] - 2026-08-23
 
 - **/btw side questions:** type `/btw` followed by your question to ask something off-topic in a temporary session forked from the current conversation. The answer streams into a panel above the composer; collapse it, keep it as a full session, or discard it without touching the chat (thanks to @jaygupta17).
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/package.json b/packages/web/package.json
index 8da2d361..186d0cff 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -13,8 +13,8 @@
   },
   "scripts": {
     "dev": "bun run build:watch",
-    "dev:server": "bun server/index.js --port ${OPENCHAMBER_PORT:-3001}",
-    "dev:server:watch": "nodemon --watch server --ext js --exec \"bun server/index.js --port ${OPENCHAMBER_PORT:-3001}\"",
+    "dev:server": "OPENCHAMBER_RELAY_HOST=${OPENCHAMBER_RELAY_HOST:-off} bun server/index.js --port ${OPENCHAMBER_PORT:-3001}",
+    "dev:server:watch": "OPENCHAMBER_RELAY_HOST=${OPENCHAMBER_RELAY_HOST:-off} nodemon --watch server --ext js --exec \"bun server/index.js --port ${OPENCHAMBER_PORT:-3001}\"",
     "build": "vite build",
     "build:watch": "vite build --watch",
     "type-check": "tsc --noEmit",
diff --git a/packages/web/server/index.js b/packages/web/server/index.js
index 31d8ff26..d91c3718 100644
--- a/packages/web/server/index.js
+++ b/packages/web/server/index.js
@@ -1815,6 +1815,14 @@ async function main(options = {}) {
       fs,
       process,
     }),
+    // Dev/debug instances share the data dir (and thus the relay identity) with
+    // the production instance, so they must not host the relay on their own —
+    // paired devices would land on them. OPENCHAMBER_RELAY_HOST=off disables
+    // passive hosting explicitly (dev scripts set it); the Electron dev shell is
+    // covered via OPENCHAMBER_ELECTRON_DEV. OPENCHAMBER_RELAY_HOST=on overrides
+    // both. Explicit enable/pairing on the instance still hosts regardless.
+    allowPassiveHost: process.env.OPENCHAMBER_RELAY_HOST === 'on'
+      || (process.env.OPENCHAMBER_RELAY_HOST !== 'off' && process.env.OPENCHAMBER_ELECTRON_DEV !== '1'),
     // Relay demand = any paired device or pending pairing session that uses the
     // relay transport. Drives the auto on/off lifecycle.
     hasRelayDemand: async () => {
diff --git a/packages/web/server/lib/client-auth/pairing.js b/packages/web/server/lib/client-auth/pairing.js
index ca8b4ddc..1efe84e5 100644
--- a/packages/web/server/lib/client-auth/pairing.js
+++ b/packages/web/server/lib/client-auth/pairing.js
@@ -262,14 +262,15 @@ export const createClientPairingRuntime = ({
       if (!constantTimeEqual(session.secretHash, hashSecret(normalizedSecret), crypto)) throw redeemError();
 
       // The operator's typed pairing label is THIS server's name for the device
-      // (shown in the device list). It wins over the device's self-reported
-      // label; fall back to that only when no pairing label was set.
-      const label = normalizeOptionalString(session.label)
-        || normalizeOptionalString(clientLabel)
-        || normalizeOptionalString(deviceName)
-        || 'Remote client';
+      // (shown in the device list) and wins outright. The device's self-reported
+      // label is only a fallback: on a re-pair with the same dedupeKey,
+      // createClient keeps the replaced record's label over it, so a rescan
+      // without a typed name does not reset the device to the app default.
       const result = await remoteClientAuthRuntime.createClient({
-        label,
+        label: normalizeOptionalString(session.label),
+        fallbackLabel: normalizeOptionalString(clientLabel)
+          || normalizeOptionalString(deviceName)
+          || 'Remote client',
         clientKind: normalizedKind,
         dedupeKey: normalizeOptionalString(dedupeKey) || `pairing:${session.id}`,
         authMethod: 'pairing',
diff --git a/packages/web/server/lib/client-auth/pairing.test.js b/packages/web/server/lib/client-auth/pairing.test.js
index 0b20aa38..da1a7df2 100644
--- a/packages/web/server/lib/client-auth/pairing.test.js
+++ b/packages/web/server/lib/client-auth/pairing.test.js
@@ -13,7 +13,7 @@ const makeRuntime = async (options = {}) => {
     createClient: vi.fn(async (input) => {
       const client = {
         id: `client-${createdClients.length + 1}`,
-        label: input.label,
+        label: input.label ?? input.fallbackLabel,
         clientKind: input.clientKind,
         authMethod: input.authMethod,
         pairingId: input.pairingId,
@@ -61,6 +61,10 @@ describe('client auth pairing runtime', () => {
       pairingId: created.pairing.id,
       clientKind: 'mobile',
       dedupeKey: 'device-key',
+      // No operator-typed pairing label: the app-reported name is only a
+      // fallback so a re-pair keeps the existing device record's label.
+      label: null,
+      fallbackLabel: 'Iryna iPhone',
     }));
 
     await expect(runtime.redeemPairingSession({
diff --git a/packages/web/server/lib/client-auth/remote-clients.js b/packages/web/server/lib/client-auth/remote-clients.js
index 171dca56..a172ef8f 100644
--- a/packages/web/server/lib/client-auth/remote-clients.js
+++ b/packages/web/server/lib/client-auth/remote-clients.js
@@ -157,6 +157,7 @@ export const createRemoteClientAuthRuntime = ({ fsPromises, path, crypto, storeP
 
   const createClient = async ({
     label,
+    fallbackLabel,
     expiresAt,
     clientKind,
     dedupeKey,
@@ -172,9 +173,16 @@ export const createRemoteClientAuthRuntime = ({ fsPromises, path, crypto, storeP
       const store = await readStore();
       const normalizedDedupeKey = normalizeOptionalString(dedupeKey);
       const token = generateToken();
+      // A dedupe-keyed mint REPLACES the previous record for the same device,
+      // so an operator-visible name must survive the replacement: an explicit
+      // label wins, otherwise the replaced record's label is kept, and only a
+      // first-ever mint falls back to the client-reported default.
+      const existing = normalizedDedupeKey
+        ? store.clients.find((entry) => entry.dedupeKey === normalizedDedupeKey)
+        : null;
       const client = {
         id: generateId(),
-        label: normalizeLabel(label),
+        label: normalizeLabel(normalizeOptionalString(label) || existing?.label || fallbackLabel),
         tokenHash: hashToken(token),
         createdAt: nowIso(),
         lastUsedAt: null,
diff --git a/packages/web/server/lib/client-auth/remote-clients.test.js b/packages/web/server/lib/client-auth/remote-clients.test.js
index 68b220d1..20063d47 100644
--- a/packages/web/server/lib/client-auth/remote-clients.test.js
+++ b/packages/web/server/lib/client-auth/remote-clients.test.js
@@ -83,6 +83,23 @@ describe('remote client auth runtime', () => {
     }
   });
 
+  it('keeps the replaced record label on a dedupe re-mint without an explicit label', async () => {
+    const { dir, runtime } = await createRuntime();
+    try {
+      await runtime.createClient({ label: 'Iryna iPhone', dedupeKey: 'mobile:device-1', fallbackLabel: 'OpenChamber Mobile' });
+      const remint = await runtime.createClient({ dedupeKey: 'mobile:device-1', fallbackLabel: 'OpenChamber Mobile' });
+      expect(remint.client.label).toBe('Iryna iPhone');
+
+      const renamed = await runtime.createClient({ label: 'Work phone', dedupeKey: 'mobile:device-1', fallbackLabel: 'OpenChamber Mobile' });
+      expect(renamed.client.label).toBe('Work phone');
+
+      const fresh = await runtime.createClient({ dedupeKey: 'mobile:device-2', fallbackLabel: 'OpenChamber Mobile' });
+      expect(fresh.client.label).toBe('OpenChamber Mobile');
+    } finally {
+      await fs.rm(dir, { recursive: true, force: true });
+    }
+  });
+
   it('keeps the token store private on disk', async () => {
     const { dir, runtime } = await createRuntime();
     try {
diff --git a/packages/web/server/lib/relay/DOCUMENTATION.md b/packages/web/server/lib/relay/DOCUMENTATION.md
index 36fa0d01..d6df917c 100644
--- a/packages/web/server/lib/relay/DOCUMENTATION.md
+++ b/packages/web/server/lib/relay/DOCUMENTATION.md
@@ -23,7 +23,7 @@ Host side (`packages/web/server/lib/relay/`):
 - `identity.js` — the host's stable identity: the long-lived signing keypair (shared with the push relay, defines the routing id) plus a long-lived encryption keypair (the E2EE trust anchor). Reused across restarts; never rotated implicitly.
 - `signing-key.js` — storage/derivation of the signing keypair and the routing id, shared with the notifications runtime.
 - `host-client.js` — the long-lived connection manager: one outbound control connection to the relay, a per-client data connection for each connected device, reconnect/backoff, and the E2EE responder handshake per connection.
-- `host-lock.js` — the per-machine host claim. Every local instance sharing the data dir shares the relay identity (same serverId), so concurrent relay hosts evict each other at the relay worker (`4001: Control replaced`) and paired devices land on whichever local process won last. The claim file (`<data-dir>/relay-host.lock`, `{ pid }`) makes this deterministic: `service.js` only starts the host when no LIVE process holds the claim (stale claims from dead pids are ignored), goes to `standby` otherwise, and a 30s watcher both takes over when the claimant dies and stands down when another process claims. Explicit user intent — creating a pairing link or hitting `/relay/enable` — force-claims; the previous holder's watcher sees the takeover and backs off instead of fighting. The claim is cooperative (the relay worker still enforces the single host slot); it only decides which process keeps retrying.
+- `host-lock.js` — the per-machine host claim. Every local instance sharing the data dir shares the relay identity (same serverId), so concurrent relay hosts evict each other at the relay worker (`4001: Control replaced`) and paired devices land on whichever local process won last. The claim file (`<data-dir>/relay-host.lock`, `{ pid }`) makes this deterministic: `service.js` only starts the host when no LIVE process holds the claim (stale claims from dead pids are ignored), goes to `standby` otherwise, and a 30s watcher both takes over when the claimant dies and stands down when another process claims. A standby watcher waits a 2-minute grace after the claim frees before taking over, so a cleanly restarting host (app update/relaunch) — which reclaims at boot with no wait — always wins the restart window over a bystander instance. Explicit user intent — creating a pairing link or hitting `/relay/enable` — force-claims; the previous holder's watcher sees the takeover and backs off instead of fighting. Instances created with `allowPassiveHost: false` (dev servers via `OPENCHAMBER_RELAY_HOST=off`, the Electron dev shell via `OPENCHAMBER_ELECTRON_DEV`; `OPENCHAMBER_RELAY_HOST=on` overrides) never start the host passively at all — boot, demand reconcile, and watcher takeover leave them in `standby`; only explicit enable/pairing hosts there. The claim is cooperative (the relay worker still enforces the single host slot); it only decides which process keeps retrying.
 - `tunnel-host.js` — the per-connection dispatcher: decrypts tunnel frames and forwards HTTP/SSE/WS to the local server over loopback, then streams responses back. Enforces a path allowlist and never injects credentials.
 - `e2ee.js`, `tunnel-codec.js` — host-side (JS) mirrors of the shared crypto and framing (see "Two implementations" below).
 
diff --git a/packages/web/server/lib/relay/service.js b/packages/web/server/lib/relay/service.js
index a67b8a21..bf7d99fd 100644
--- a/packages/web/server/lib/relay/service.js
+++ b/packages/web/server/lib/relay/service.js
@@ -70,6 +70,11 @@ export const createRelayService = ({
   // evict each other at the relay worker ("Control replaced") and devices land
   // on a random instance. Optional: without it, behavior is pre-lock.
   hostLock = null,
+  // When false, this instance never starts the relay host on its own (boot,
+  // demand reconcile, or claim-watch takeover) — only an explicit user action
+  // (enable, pairing) force-claims. Dev/debug instances set this so they do not
+  // capture paired devices from the production instance sharing the data dir.
+  allowPassiveHost = true,
   logger = console,
 }) => {
   const identityRuntime = createRelayIdentityRuntime({ crypto, readSettingsFromDiskMigrated, writeSettingsToDisk, readSettingsStrict });
@@ -80,6 +85,13 @@ export const createRelayService = ({
   // claimant dies; a running host stands down when another process claims.
   let claimWatchTimer = null;
   const CLAIM_WATCH_INTERVAL_MS = 30_000;
+  // A standby instance does not grab a freed claim immediately: a clean restart
+  // of the previous host (app update, relaunch) releases the claim for a short
+  // while, and taking it during that window strands the devices on this —
+  // possibly older — instance. The restarting host reclaims at boot without any
+  // wait, so it always wins the window.
+  const CLAIM_TAKEOVER_GRACE_MS = 120_000;
+  let claimFreeSinceMs = null;
 
   const readConfig = async () => {
     const settings = await readSettingsFromDiskMigrated();
@@ -133,8 +145,19 @@ export const createRelayService = ({
             }
             return;
           }
-          if (status.state === 'standby' && hostLock.tryClaim()) {
-            logger.warn('[Relay] host claim is free — taking over the relay host');
+          if (status.state !== 'standby' || !allowPassiveHost) return;
+          if (hostLock.liveClaimantPid() !== null) {
+            claimFreeSinceMs = null;
+            return;
+          }
+          if (claimFreeSinceMs === null) {
+            claimFreeSinceMs = Date.now();
+            return;
+          }
+          if (Date.now() - claimFreeSinceMs < CLAIM_TAKEOVER_GRACE_MS) return;
+          if (hostLock.tryClaim()) {
+            claimFreeSinceMs = null;
+            logger.warn('[Relay] host claim stayed free — taking over the relay host');
             await start(relayUrl);
           }
         } catch (error) {
@@ -149,10 +172,19 @@ export const createRelayService = ({
     if (!claimWatchTimer) return;
     clearInterval(claimWatchTimer);
     claimWatchTimer = null;
+    claimFreeSinceMs = null;
   };
 
   const start = async (relayUrl, { claim = 'try' } = {}) => {
     if (hostClient) return;
+    if (claim !== 'force' && !allowPassiveHost) {
+      status = {
+        state: 'standby',
+        lastError: 'passive relay hosting is disabled on this instance — enable the relay or create a pairing link to host here',
+        connectedClients: 0,
+      };
+      return;
+    }
     if (hostLock) {
       const claimed = claim === 'force' ? hostLock.forceClaim() : hostLock.tryClaim();
       if (!claimed) {
diff --git a/packages/web/server/lib/relay/service.test.js b/packages/web/server/lib/relay/service.test.js
new file mode 100644
index 00000000..c49159e9
--- /dev/null
+++ b/packages/web/server/lib/relay/service.test.js
@@ -0,0 +1,69 @@
+import { describe, it, expect, vi } from 'vitest';
+import crypto from 'node:crypto';
+
+import { createRelayService } from './service.js';
+
+const makeService = (options = {}) => {
+  // In-memory settings store with a pre-seeded relay identity so the service
+  // never regenerates a signing key during the test.
+  const { privateKey, publicKey } = crypto.generateKeyPairSync('ec', { namedCurve: 'P-256' });
+  let settings = {
+    relaySigningKey: {
+      privateJwk: privateKey.export({ format: 'jwk' }),
+      publicJwk: publicKey.export({ format: 'jwk' }),
+    },
+    privateRelay: { enabled: true, relayUrl: 'wss://relay.example.test/ws' },
+    ...options.settings,
+  };
+  const hostLock = {
+    tryClaim: vi.fn(() => true),
+    forceClaim: vi.fn(() => true),
+    holdsClaim: vi.fn(() => true),
+    liveClaimantPid: vi.fn(() => null),
+    release: vi.fn(),
+  };
+  const service = createRelayService({
+    crypto,
+    readSettingsFromDiskMigrated: async () => settings,
+    writeSettingsToDisk: async (next) => { settings = next; },
+    readSettingsStrict: async () => settings,
+    getLocalPort: () => 0,
+    hasRelayDemand: options.hasRelayDemand ?? (async () => true),
+    hostLock,
+    allowPassiveHost: options.allowPassiveHost,
+    logger: { warn: () => {} },
+  });
+  return { service, hostLock, getSettings: () => settings };
+};
+
+describe('relay service passive hosting', () => {
+  it('never claims or starts the host passively when passive hosting is disabled', async () => {
+    const { service, hostLock } = makeService({ allowPassiveHost: false });
+    try {
+      await service.startIfEnabled();
+      let status = await service.getStatus();
+      expect(status.state).toBe('standby');
+      expect(hostLock.tryClaim).not.toHaveBeenCalled();
+      expect(hostLock.forceClaim).not.toHaveBeenCalled();
+
+      await service.reconcile();
+      status = await service.getStatus();
+      expect(status.state).toBe('standby');
+      expect(status.lastError).toContain('passive relay hosting is disabled');
+      expect(hostLock.tryClaim).not.toHaveBeenCalled();
+    } finally {
+      service.stop();
+    }
+  });
+
+  it('force-claims for an explicit pairing even when passive hosting is disabled', async () => {
+    const { service, hostLock } = makeService({ allowPassiveHost: false });
+    try {
+      const candidate = await service.ensureEnabledForPairing();
+      expect(candidate?.type).toBe('relay');
+      expect(hostLock.forceClaim).toHaveBeenCalled();
+    } finally {
+      service.stop();
+    }
+  });
+});
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/server/lib/ui-auth/ui-auth.js b/packages/web/server/lib/ui-auth/ui-auth.js
index af342c43..ea3e0b99 100644
--- a/packages/web/server/lib/ui-auth/ui-auth.js
+++ b/packages/web/server/lib/ui-auth/ui-auth.js
@@ -839,7 +839,7 @@ export const createUiAuth = ({
     let clientTokenResult = null;
     if (req.body?.issueClientToken === true && typeof clientAuthController?.createClient === 'function') {
       clientTokenResult = await clientAuthController.createClient({
-        label: req.body?.clientLabel,
+        fallbackLabel: req.body?.clientLabel,
         expiresAt: new Date(Date.now() + ttlMs).toISOString(),
         clientKind: req.body?.clientKind,
         dedupeKey: req.body?.dedupeKey,
@@ -907,7 +907,7 @@ export const createUiAuth = ({
       let clientTokenResult = null;
       if (req.body?.issueClientToken === true && typeof clientAuthController?.createClient === 'function') {
         clientTokenResult = await clientAuthController.createClient({
-          label: req.body?.clientLabel,
+          fallbackLabel: req.body?.clientLabel,
           expiresAt: new Date(Date.now() + ttlMs).toISOString(),
           clientKind: req.body?.clientKind,
           dedupeKey: req.body?.dedupeKey,
diff --git a/packages/web/server/lib/ui-auth/ui-auth.test.js b/packages/web/server/lib/ui-auth/ui-auth.test.js
index 54200f7f..185b0af1 100644
--- a/packages/web/server/lib/ui-auth/ui-auth.test.js
+++ b/packages/web/server/lib/ui-auth/ui-auth.test.js
@@ -269,7 +269,7 @@ describe('ui auth client credential seam', () => {
             token: 'client-token',
             client: {
               id: 'device-1',
-              label: input.label,
+              label: input.label ?? input.fallbackLabel,
               createdAt: new Date().toISOString(),
               lastUsedAt: null,
               revokedAt: null,
@@ -295,7 +295,7 @@ describe('ui auth client credential seam', () => {
     await auth.handleSessionCreate(req, res);
 
     expect(res.body.clientToken).toBe('client-token');
-    expect(createClientInput.label).toBe('OpenChamber Desktop');
+    expect(createClientInput.fallbackLabel).toBe('OpenChamber Desktop');
     const expiresAt = Date.parse(createClientInput.expiresAt);
     expect(expiresAt).toBeGreaterThanOrEqual(before + 122_000);
     expect(expiresAt).toBeLessThanOrEqual(Date.now() + 124_000);
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__);
diff --git a/scripts/dev-web-hmr.mjs b/scripts/dev-web-hmr.mjs
index 47cb8855..76999a33 100644
--- a/scripts/dev-web-hmr.mjs
+++ b/scripts/dev-web-hmr.mjs
@@ -114,6 +114,9 @@ clearViteCache();
 
 const api = run('api', 'bun', ['run', '--cwd', 'packages/web', 'dev:server:watch'], {
   OPENCHAMBER_PORT: backendPort,
+  // Dev backends share the relay identity with the production instance; never
+  // let them capture the machine's relay host on their own.
+  OPENCHAMBER_RELAY_HOST: process.env.OPENCHAMBER_RELAY_HOST || 'off',
 });
 const vite = run(
   'vite',
diff --git a/scripts/generate-icon-sprite.mjs b/scripts/generate-icon-sprite.mjs
index 3098bb05..1732625a 100644
--- a/scripts/generate-icon-sprite.mjs
+++ b/scripts/generate-icon-sprite.mjs
@@ -37,6 +37,16 @@ const customIconData = new Map([
     "command-code",
     `<path fill="currentColor" d="M5.8 5.8h4.8v4.8h-4.8Z M13.4 5.8h4.8v4.8h-4.8Z M10.6 10.6h2.8v2.8h-2.8Z M5.8 13.4h4.8v4.8h-4.8Z M13.4 13.4h4.8v4.8h-4.8Z"/>`,
   ],
+  // Linear logo, adapted from the supplied 100x100 mark to the 24x24 sprite viewBox.
+  [
+    "linear",
+    `<g transform="translate(1.5 1.5) scale(0.21)"><path fill="currentColor" d="M1.22541 61.5228c-.2225-.9485.90748-1.5459 1.59638-.857L39.3342 97.1782c.6889.6889.0915 1.8189-.857 1.5964C20.0515 94.4522 5.54779 79.9485 1.22541 61.5228ZM.00189135 46.8891c-.01764375.2833.08887215.5599.28957165.7606L52.3503 99.7085c.2007.2007.4773.3075.7606.2896 2.3692-.1476 4.6938-.46 6.9624-.9259.7645-.157 1.0301-1.0963.4782-1.6481L2.57595 39.4485c-.55186-.5519-1.49117-.2863-1.648174.4782-.465915 2.2686-.77832 4.5932-.92588465 6.9624ZM4.21093 29.7054c-.16649.3738-.08169.8106.20765 1.1l64.77602 64.776c.2894.2894.7262.3742 1.1.2077 1.7861-.7956 3.5171-1.6927 5.1855-2.684.5521-.328.6373-1.0867.1832-1.5407L8.43566 24.3367c-.45409-.4541-1.21271-.3689-1.54074.1832-.99132 1.6686-1.88843 3.3994-2.68399 5.1855ZM12.6587 18.074c-.3701-.3701-.393-.9637-.0443-1.3541C21.7795 6.45931 35.1114 0 49.9519 0 77.5927 0 100 22.4073 100 50.0481c0 14.8405-6.4593 28.1724-16.7199 37.3375-.3903.3487-.984.3258-1.3542-.0443L12.6587 18.074Z"/></g>`,
+  ],
+  // Cloudflare logo, reduced to a single currentColor silhouette.
+  [
+    "cloudflare",
+    `<g transform="translate(0.2 0.2) scale(0.18)"><path fill="currentColor" d="M87.295 89.022c.763-2.617.472-5.015-.8-6.796-1.163-1.635-3.125-2.58-5.488-2.689l-44.737-.581c-.291 0-.545-.145-.691-.363s-.182-.509-.109-.8c.145-.436.581-.763 1.054-.8l45.137-.581c5.342-.254 11.157-4.579 13.192-9.885l2.58-6.723c.109-.291.145-.581.073-.872-2.906-13.158-14.644-22.97-28.672-22.97-12.938 0-23.913 8.359-27.838 19.952a13.35 13.35 0 0 0-9.267-2.58c-6.215.618-11.193 5.597-11.811 11.811-.145 1.599-.036 3.162.327 4.615C10.104 70.051 2 78.337 2 88.549c0 .909.073 1.817.182 2.726a.895.895 0 0 0 .872.763h82.57c.472 0 .909-.327 1.054-.8l.617-2.216z"/><path fill="currentColor" d="M101.542 60.275c-.4 0-.836 0-1.236.036-.291 0-.545.218-.654.509l-1.744 6.069c-.763 2.617-.472 5.015.8 6.796 1.163 1.635 3.125 2.58 5.488 2.689l9.522.581c.291 0 .545.145.691.363.145.218.182.545.109.8-.145.436-.581.763-1.054.8l-9.924.582c-5.379.254-11.157 4.579-13.192 9.885l-.727 1.853c-.145.363.109.727.509.727h34.089c.4 0 .763-.254.872-.654.581-2.108.909-4.325.909-6.614 0-13.447-10.975-24.422-24.458-24.422"/></g>`,
+  ],
 ])
 
 const source = readFileSync(remixPath, "utf-8")