fix(tauri): remove Windows-only CLI dependency

Disable follow-mode virtualization churn and simplify reasoning header layout so streaming thinking blocks stop nudging the scroll position while the list is pinned to bottom.

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "codenomad-workspace",
-  "version": "0.11.5",
+  "version": "0.12.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "codenomad-workspace",
-      "version": "0.11.5",
+      "version": "0.12.2",
       "license": "MIT",
       "dependencies": {
         "7zip-bin": "^5.2.0",
@@ -3305,6 +3305,23 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@tauri-apps/cli-win32-x64-msvc": {
+      "version": "2.9.4",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-win32-x64-msvc/-/cli-win32-x64-msvc-2.9.4.tgz",
+      "integrity": "sha512-EdYd4c9wGvtPB95kqtEyY+bUR+k4kRw3IA30mAQ1jPH6z57AftT8q84qwv0RDp6kkEqOBKxeInKfqi4BESYuqg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0 OR MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/@tauri-apps/plugin-notification": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/@tauri-apps/plugin-notification/-/plugin-notification-2.3.3.tgz",
@@ -11985,7 +12002,7 @@
     },
     "packages/electron-app": {
       "name": "@neuralnomads/codenomad-electron-app",
-      "version": "0.11.5",
+      "version": "0.12.2",
       "license": "MIT",
       "dependencies": {
         "@codenomad/ui": "file:../ui",
@@ -11995,6 +12012,7 @@
       "devDependencies": {
         "7zip-bin": "^5.2.0",
         "app-builder-bin": "^4.2.0",
+        "cross-env": "^7.0.3",
         "electron": "39.0.0",
         "electron-builder": "^24.0.0",
         "electron-vite": "4.0.1",
@@ -12021,7 +12039,7 @@
     },
     "packages/server": {
       "name": "@neuralnomads/codenomad",
-      "version": "0.11.5",
+      "version": "0.12.2",
       "license": "MIT",
       "dependencies": {
         "@fastify/cors": "^8.5.0",
@@ -12062,7 +12080,7 @@
     },
     "packages/tauri-app": {
       "name": "@codenomad/tauri-app",
-      "version": "0.11.5",
+      "version": "0.12.2",
       "license": "MIT",
       "devDependencies": {
         "@tauri-apps/cli": "^2.9.4"
@@ -12070,7 +12088,7 @@
     },
     "packages/ui": {
       "name": "@codenomad/ui",
-      "version": "0.11.5",
+      "version": "0.12.2",
       "license": "MIT",
       "dependencies": {
         "@git-diff-view/solid": "^0.0.8",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "codenomad-workspace",
-  "version": "0.11.5",
+  "version": "0.12.2",
   "private": true,
   "description": "CodeNomad monorepo workspace",
   "license": "MIT",

packages/electron-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neuralnomads/codenomad-electron-app",
-  "version": "0.11.5",
+  "version": "0.12.2",
   "description": "CodeNomad - AI coding assistant",
   "license": "MIT",
   "author": {

packages/server/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@neuralnomads/codenomad",
-  "version": "0.11.5",
+  "version": "0.12.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@neuralnomads/codenomad",
-      "version": "0.11.5",
+      "version": "0.12.2",
       "dependencies": {
         "@fastify/cors": "^8.5.0",
         "@fastify/reply-from": "^9.8.0",

packages/server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neuralnomads/codenomad",
-  "version": "0.11.5",
+  "version": "0.12.2",
   "description": "CodeNomad Server",
   "license": "MIT",
   "author": {

packages/tauri-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codenomad/tauri-app",
-  "version": "0.11.5",
+  "version": "0.12.2",
   "private": true,
   "license": "MIT",
   "scripts": {

packages/tauri-app/src-tauri/src/cli_manager.rs

@@ -900,6 +900,11 @@ fn resolve_dist_entry(_app: &AppHandle) -> Option<String> {
 
     if let Ok(exe) = std::env::current_exe() {
         if let Some(dir) = exe.parent() {
+            candidates.push(Some(dir.join("resources/server/dist/bin.js")));
+            candidates.push(Some(dir.join("resources/server/dist/index.js")));
+            candidates.push(Some(dir.join("resources/server/dist/server/bin.js")));
+            candidates.push(Some(dir.join("resources/server/dist/server/index.js")));
+
             let resources = dir.join("../Resources");
             candidates.push(Some(resources.join("server/dist/bin.js")));
             candidates.push(Some(resources.join("server/dist/index.js")));
@@ -995,9 +1000,18 @@ fn first_existing(paths: Vec<Option<PathBuf>>) -> Option<String> {
 }
 
 fn normalize_path(path: PathBuf) -> String {
-    if let Ok(clean) = path.canonicalize() {
+    let resolved = if let Ok(clean) = path.canonicalize() {
-        clean.to_string_lossy().to_string()
+        clean
     } else {
-        path.to_string_lossy().to_string()
+        path
+    };
+
+    let rendered = resolved.to_string_lossy().to_string();
+    if let Some(stripped) = rendered.strip_prefix("\\\\?\\UNC\\") {
+        format!("\\\\{}", stripped)
+    } else if let Some(stripped) = rendered.strip_prefix("\\\\?\\") {
+        stripped.to_string()
+    } else {
+        rendered
     }
 }

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codenomad/ui",
-  "version": "0.11.5",
+  "version": "0.12.2",
   "private": true,
   "license": "MIT",
   "type": "module",

packages/ui/src/App.tsx

@@ -496,17 +496,24 @@ const App: Component = () => {
                   const isActiveInstance = () => activeInstanceId() === instance.id
                   const isVisible = () => isActiveInstance() && !showFolderSelection()
                     return (
-                      <div class="flex-1 min-h-0 overflow-hidden" style={{ display: isVisible() ? "flex" : "none" }}>
+                       <div
-                        <InstanceMetadataProvider instance={instance}>
+                         class="flex-1 min-h-0 overflow-hidden"
-                          <InstanceShell
+                         style={{ display: isVisible() ? "flex" : "none" }}
-                            instance={instance}
+                         data-instance-id={instance.id}
-                            escapeInDebounce={escapeInDebounce()}
+                         data-instance-active={isActiveInstance() ? "true" : "false"}
-                            paletteCommands={paletteCommands}
+                         data-instance-visible={isVisible() ? "true" : "false"}
-                            onCloseSession={(sessionId) => handleCloseSession(instance.id, sessionId)}
+                       >
-                            onNewSession={() => handleNewSession(instance.id)}
+                         <InstanceMetadataProvider instance={instance}>
-                            handleSidebarAgentChange={(sessionId, agent) => handleSidebarAgentChange(instance.id, sessionId, agent)}
+                           <InstanceShell
-                            handleSidebarModelChange={(sessionId, model) => handleSidebarModelChange(instance.id, sessionId, model)}
+                             instance={instance}
-                            onExecuteCommand={executeCommand}
+                             isActiveInstance={isActiveInstance()}
+                             escapeInDebounce={escapeInDebounce()}
+                             paletteCommands={paletteCommands}
+                             onCloseSession={(sessionId) => handleCloseSession(instance.id, sessionId)}
+                             onNewSession={() => handleNewSession(instance.id)}
+                             handleSidebarAgentChange={(sessionId, agent) => handleSidebarAgentChange(instance.id, sessionId, agent)}
+                             handleSidebarModelChange={(sessionId, model) => handleSidebarModelChange(instance.id, sessionId, model)}
+                             onExecuteCommand={executeCommand}
                             tabBarOffset={isPhoneLayout() && mobileFullscreenMode() ? 0 : instanceTabBarHeight()}
                             mobileFullscreenMode={isPhoneLayout() && mobileFullscreenMode()}
                             onEnterMobileFullscreen={() => void enterMobileFullscreen()}

packages/ui/src/components/instance/instance-shell2.tsx

@@ -62,6 +62,9 @@ const log = getLogger("session")
 
 interface InstanceShellProps {
   instance: Instance
+  // Provided by App-level instance tabs; lets us pause heavy rendering
+  // work for inactive instances while keeping them mounted for fast switching.
+  isActiveInstance?: boolean
   escapeInDebounce: boolean
   paletteCommands: Accessor<Command[]>
   onCloseSession: (sessionId: string) => Promise<void> | void
@@ -800,12 +803,14 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
               >
                 <For each={cachedSessionIds()}>
                   {(sessionId) => {
-                    const isActive = () => activeSessionIdForInstance() === sessionId
+                    const isActive = () => Boolean(props.isActiveInstance) && activeSessionIdForInstance() === sessionId
                     return (
                       <div
                         class="session-cache-pane flex flex-col flex-1 min-h-0"
                         style={{ display: isActive() ? "flex" : "none" }}
                         data-session-id={sessionId}
+                        data-instance-id={props.instance.id}
+                        data-session-active={isActive() ? "true" : "false"}
                         aria-hidden={!isActive()}
                       >
                         <SessionView
@@ -841,7 +846,10 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
 
   return (
     <>
-      <div class="instance-shell2 flex flex-col flex-1 min-h-0">
+      <div
+        class="instance-shell2 flex flex-col flex-1 min-h-0"
+        data-instance-id={props.instance.id}
+      >
         <Show when={hasSessions()} fallback={<InstanceWelcomeView instance={props.instance} />}>
           {sessionLayout}
         </Show>

packages/ui/src/components/instance/shell/right-panel/tabs/ChangesTab.tsx

@@ -1,4 +1,4 @@
-import { For, Show, type Accessor, type Component, type JSX } from "solid-js"
+import { For, Show, createMemo, type Accessor, type Component, type JSX } from "solid-js"
 
 import { MonacoDiffViewer } from "../../../../file-viewer/monaco-diff-viewer"
 
@@ -32,14 +32,18 @@ interface ChangesTabProps {
 }
 
 const ChangesTab: Component<ChangesTabProps> = (props) => {
-  const renderContent = (): JSX.Element => {
+  const sessionId = createMemo(() => props.activeSessionId())
-    const sessionId = props.activeSessionId()
+  const hasSession = createMemo(() => Boolean(sessionId() && sessionId() !== "info"))
+  const diffs = createMemo(() => (hasSession() ? props.activeSessionDiffs() : null))
 
-    const hasSession = Boolean(sessionId && sessionId !== "info")
+  const sorted = createMemo<any[]>(() => {
-    const diffs = hasSession ? props.activeSessionDiffs() : null
+    const list = diffs()
+    if (!Array.isArray(list)) return []
+    return [...list].sort((a, b) => String(a.file || "").localeCompare(String(b.file || "")))
+  })
 
-    const sorted = Array.isArray(diffs) ? [...diffs].sort((a, b) => String(a.file || "").localeCompare(String(b.file || ""))) : []
+  const totals = createMemo(() => {
-    const totals = sorted.reduce(
+    return sorted().reduce(
       (acc, item) => {
         acc.additions += typeof item.additions === "number" ? item.additions : 0
         acc.deletions += typeof item.deletions === "number" ? item.deletions : 0
@@ -47,41 +51,61 @@ const ChangesTab: Component<ChangesTabProps> = (props) => {
       },
       { additions: 0, deletions: 0 },
     )
+  })
 
-    const mostChanged = sorted.length
+  const mostChanged = createMemo<any | null>(() => {
-      ? sorted.reduce((best, item) => {
+    const items = sorted()
-          const bestAdd = typeof (best as any)?.additions === "number" ? (best as any).additions : 0
+    if (items.length === 0) return null
-          const bestDel = typeof (best as any)?.deletions === "number" ? (best as any).deletions : 0
+    return items.reduce((best, item) => {
-          const bestScore = bestAdd + bestDel
+      const bestAdd = typeof (best as any)?.additions === "number" ? (best as any).additions : 0
+      const bestDel = typeof (best as any)?.deletions === "number" ? (best as any).deletions : 0
+      const bestScore = bestAdd + bestDel
 
-          const add = typeof (item as any)?.additions === "number" ? (item as any).additions : 0
+      const add = typeof (item as any)?.additions === "number" ? (item as any).additions : 0
-          const del = typeof (item as any)?.deletions === "number" ? (item as any).deletions : 0
+      const del = typeof (item as any)?.deletions === "number" ? (item as any).deletions : 0
-          const score = add + del
+      const score = add + del
 
-          if (score > bestScore) return item
+      if (score > bestScore) return item
-          if (score < bestScore) return best
+      if (score < bestScore) return best
-          return String(item.file || "").localeCompare(String((best as any)?.file || "")) < 0 ? item : best
+      return String(item.file || "").localeCompare(String((best as any)?.file || "")) < 0 ? item : best
-        }, sorted[0])
+    }, items[0])
-      : null
+  })
 
-    // Auto-select the most-changed file if none selected.
+  const selectedFileData = createMemo<any | null>(() => {
     const currentSelected = props.selectedFile()
-    const selectedFileData = sorted.find((f) => f.file === currentSelected) || mostChanged
+    const items = sorted()
-
+    if (currentSelected) {
-    const scopeKey = `${props.instanceId}:${hasSession ? sessionId : "no-session"}`
+      const match = items.find((f) => f.file === currentSelected)
-
+      if (match) return match
-    const emptyViewerMessage = () => {
-      if (!hasSession) return props.t("instanceShell.sessionChanges.noSessionSelected")
-      if (diffs === undefined) return props.t("instanceShell.sessionChanges.loading")
-      if (!Array.isArray(diffs) || diffs.length === 0) return props.t("instanceShell.sessionChanges.empty")
-      return props.t("instanceShell.filesShell.viewerEmpty")
     }
+    return mostChanged()
+  })
+
+  const scopeKey = createMemo(() => `${props.instanceId}:${hasSession() ? sessionId() : "no-session"}`)
+
+  const emptyViewerMessage = createMemo(() => {
+    if (!hasSession()) return props.t("instanceShell.sessionChanges.noSessionSelected")
+    const currentDiffs = diffs()
+    if (currentDiffs === undefined) return props.t("instanceShell.sessionChanges.loading")
+    if (!Array.isArray(currentDiffs) || currentDiffs.length === 0) return props.t("instanceShell.sessionChanges.empty")
+    return props.t("instanceShell.filesShell.viewerEmpty")
+  })
+
+  const headerPath = createMemo(() => {
+    const file = selectedFileData()
+    return file?.file ? String(file.file) : props.t("instanceShell.rightPanel.tabs.changes")
+  })
+
+  const renderContent = (): JSX.Element => {
+    const sortedList = sorted()
+    const totalsValue = totals()
+    const selected = selectedFileData()
 
     const renderViewer = () => (
       <div class="file-viewer-panel flex-1">
         <div class="file-viewer-content file-viewer-content--monaco">
           <Show
-            when={selectedFileData && hasSession && Array.isArray(diffs) && diffs.length > 0 ? selectedFileData : null}
+            when={selected && hasSession() && sortedList.length > 0 ? selected : null}
             fallback={
               <div class="file-viewer-empty">
                 <span class="file-viewer-empty-text">{emptyViewerMessage()}</span>
@@ -90,7 +114,7 @@ const ChangesTab: Component<ChangesTabProps> = (props) => {
           >
             {(file) => (
               <MonacoDiffViewer
-                scopeKey={scopeKey}
+                scopeKey={scopeKey()}
                 path={String(file().file || "")}
                 before={String((file() as any).before || "")}
                 after={String((file() as any).after || "")}
@@ -109,11 +133,11 @@ const ChangesTab: Component<ChangesTabProps> = (props) => {
     )
 
     const renderListPanel = () => (
-      <Show when={sorted.length > 0} fallback={renderEmptyList()}>
+      <Show when={sortedList.length > 0} fallback={renderEmptyList()}>
-        <For each={sorted}>
+        <For each={sortedList}>
           {(item) => (
             <div
-              class={`file-list-item ${selectedFileData?.file === item.file ? "file-list-item-active" : ""}`}
+              class={`file-list-item ${selected?.file === item.file ? "file-list-item-active" : ""}`}
               onClick={() => {
                 props.onSelectFile(item.file, props.isPhoneLayout())
               }}
@@ -134,11 +158,11 @@ const ChangesTab: Component<ChangesTabProps> = (props) => {
     )
 
     const renderListOverlay = () => (
-      <Show when={sorted.length > 0} fallback={renderEmptyList()}>
+      <Show when={sortedList.length > 0} fallback={renderEmptyList()}>
-        <For each={sorted}>
+        <For each={sortedList}>
           {(item) => (
             <div
-              class={`file-list-item ${selectedFileData?.file === item.file ? "file-list-item-active" : ""}`}
+              class={`file-list-item ${selected?.file === item.file ? "file-list-item-active" : ""}`}
               onClick={() => {
                 props.onSelectFile(item.file, true)
               }}
@@ -159,8 +183,6 @@ const ChangesTab: Component<ChangesTabProps> = (props) => {
       </Show>
     )
 
-    const headerPath = () => (selectedFileData?.file ? selectedFileData.file : props.t("instanceShell.rightPanel.tabs.changes"))
-
     return (
       <SplitFilePanel
         header={
@@ -171,10 +193,10 @@ const ChangesTab: Component<ChangesTabProps> = (props) => {
 
             <div class="files-tab-stats" style={{ flex: "0 0 auto" }}>
               <span class="files-tab-stat files-tab-stat-additions">
-                <span class="files-tab-stat-value">+{totals.additions}</span>
+                <span class="files-tab-stat-value">+{totalsValue.additions}</span>
               </span>
               <span class="files-tab-stat files-tab-stat-deletions">
-                <span class="files-tab-stat-value">-{totals.deletions}</span>
+                <span class="files-tab-stat-value">-{totalsValue.deletions}</span>
               </span>
             </div>
 

packages/ui/src/components/instance/shell/right-panel/tabs/GitChangesTab.tsx

@@ -1,4 +1,4 @@
-import { For, Show, type Accessor, type Component, type JSX } from "solid-js"
+import { For, Show, createMemo, type Accessor, type Component, type JSX } from "solid-js"
 import type { File as GitFileStatus } from "@opencode-ai/sdk/v2/client"
 
 import { RefreshCw } from "lucide-solid"
@@ -46,17 +46,18 @@ interface GitChangesTabProps {
 }
 
 const GitChangesTab: Component<GitChangesTabProps> = (props) => {
-  const renderContent = (): JSX.Element => {
+  const sessionId = createMemo(() => props.activeSessionId())
-    const sessionId = props.activeSessionId()
+  const hasSession = createMemo(() => Boolean(sessionId() && sessionId() !== "info"))
+  const entries = createMemo(() => (hasSession() ? props.entries() : null))
 
-    const hasSession = Boolean(sessionId && sessionId !== "info")
+  const sorted = createMemo<GitFileStatus[]>(() => {
-    const entries = hasSession ? props.entries() : null
+    const list = entries()
+    if (!Array.isArray(list)) return []
+    return [...list].sort((a, b) => String(a.path || "").localeCompare(String(b.path || "")))
+  })
 
-    const sorted = Array.isArray(entries)
+  const totals = createMemo(() => {
-      ? [...entries].sort((a, b) => String(a.path || "").localeCompare(String(b.path || "")))
+    return sorted().reduce(
-      : []
-
-    const totals = sorted.reduce(
       (acc, item) => {
         acc.additions += typeof item.added === "number" ? item.added : 0
         acc.deletions += typeof item.removed === "number" ? item.removed : 0
@@ -64,21 +65,33 @@ const GitChangesTab: Component<GitChangesTabProps> = (props) => {
       },
       { additions: 0, deletions: 0 },
     )
+  })
 
-    const nonDeleted = sorted.filter((item) => item && item.status !== "deleted")
+  const nonDeleted = createMemo(() => sorted().filter((item) => item && item.status !== "deleted"))
-
-    const emptyViewerMessage = () => {
-      if (!hasSession) return "Select a session to view changes."
-      if (entries === null) return "Loading git changes…"
-      if (nonDeleted.length === 0) return "No git changes yet."
-      return "No file selected."
-    }
 
+  const selectedEntry = createMemo<GitFileStatus | null>(() => {
+    const list = sorted()
     const selectedPath = props.selectedPath()
     const fallbackPath = props.mostChangedPath()
-    const selectedEntry =
+    const found =
-      sorted.find((item) => item.path === selectedPath) ||
+      list.find((item) => item.path === selectedPath) ||
-      (fallbackPath ? sorted.find((item) => item.path === fallbackPath) : null)
+      (fallbackPath ? list.find((item) => item.path === fallbackPath) : undefined)
+    return found ?? null
+  })
+
+  const emptyViewerMessage = createMemo(() => {
+    if (!hasSession()) return "Select a session to view changes."
+    const currentEntries = entries()
+    if (currentEntries === null) return "Loading git changes…"
+    if (nonDeleted().length === 0) return "No git changes yet."
+    return "No file selected."
+  })
+
+  const renderContent = (): JSX.Element => {
+    const totalsValue = totals()
+    const selected = selectedEntry()
+    const sortedList = sorted()
+    const nonDeletedList = nonDeleted()
 
     const renderViewer = () => (
       <div class="file-viewer-panel flex-1">
@@ -91,12 +104,12 @@ const GitChangesTab: Component<GitChangesTabProps> = (props) => {
                 fallback={
                   <Show
                     when={
-                      selectedEntry &&
+                      selected &&
                       props.selectedBefore() !== null &&
                       props.selectedAfter() !== null &&
-                      selectedEntry.status !== "deleted"
+                      selected.status !== "deleted"
                         ? {
-                            path: selectedEntry.path,
+                            path: selected.path,
                             before: props.selectedBefore() as string,
                             after: props.selectedAfter() as string,
                           }
@@ -109,16 +122,16 @@ const GitChangesTab: Component<GitChangesTabProps> = (props) => {
                     }
                   >
                     {(file) => (
-                      <MonacoDiffViewer
+                        <MonacoDiffViewer
-                        scopeKey={props.scopeKey()}
+                          scopeKey={props.scopeKey()}
-                        path={String(file().path || "")}
+                          path={String(file().path || "")}
-                        before={String((file() as any).before || "")}
+                          before={String((file() as any).before || "")}
-                        after={String((file() as any).after || "")}
+                          after={String((file() as any).after || "")}
-                        viewMode={props.diffViewMode()}
+                          viewMode={props.diffViewMode()}
-                        contextMode={props.diffContextMode()}
+                          contextMode={props.diffContextMode()}
-                        wordWrap={props.diffWordWrapMode()}
+                          wordWrap={props.diffWordWrapMode()}
-                      />
+                        />
-                    )}
+                      )}
                   </Show>
                 }
               >
@@ -141,8 +154,8 @@ const GitChangesTab: Component<GitChangesTabProps> = (props) => {
     const renderEmptyList = () => <div class="p-3 text-xs text-secondary">{emptyViewerMessage()}</div>
 
     const renderListPanel = () => (
-      <Show when={nonDeleted.length > 0} fallback={renderEmptyList()}>
+      <Show when={nonDeletedList.length > 0} fallback={renderEmptyList()}>
-        <For each={sorted}>
+        <For each={sortedList}>
           {(item) => (
             <div
               class={`file-list-item ${props.selectedPath() === item.path ? "file-list-item-active" : ""}`}
@@ -173,8 +186,8 @@ const GitChangesTab: Component<GitChangesTabProps> = (props) => {
     )
 
     const renderListOverlay = () => (
-      <Show when={nonDeleted.length > 0} fallback={renderEmptyList()}>
+      <Show when={nonDeletedList.length > 0} fallback={renderEmptyList()}>
-        <For each={sorted}>
+        <For each={sortedList}>
           {(item) => (
             <div
               class={`file-list-item ${props.selectedPath() === item.path ? "file-list-item-active" : ""}`}
@@ -204,19 +217,19 @@ const GitChangesTab: Component<GitChangesTabProps> = (props) => {
     )
 
     return (
-      <SplitFilePanel
+          <SplitFilePanel
-        header={
+            header={
-          <>
+              <>
-            <span class="files-tab-selected-path" title={selectedEntry?.path || "Git Changes"}>
+                <span class="files-tab-selected-path" title={selected?.path || "Git Changes"}>
-              <span class="file-path-text">{selectedEntry?.path || "Git Changes"}</span>
+                  <span class="file-path-text">{selected?.path || "Git Changes"}</span>
-            </span>
+                </span>
 
             <div class="files-tab-stats" style={{ flex: "0 0 auto" }}>
               <span class="files-tab-stat files-tab-stat-additions">
-                <span class="files-tab-stat-value">+{totals.additions}</span>
+                <span class="files-tab-stat-value">+{totalsValue.additions}</span>
               </span>
               <span class="files-tab-stat files-tab-stat-deletions">
-                <span class="files-tab-stat-value">-{totals.deletions}</span>
+                <span class="files-tab-stat-value">-{totalsValue.deletions}</span>
               </span>
               <Show when={props.statusError()}>{(err) => <span class="text-error">{err()}</span>}</Show>
             </div>
@@ -226,23 +239,23 @@ const GitChangesTab: Component<GitChangesTabProps> = (props) => {
               class="files-header-icon-button"
               title={props.t("instanceShell.rightPanel.actions.refresh")}
               aria-label={props.t("instanceShell.rightPanel.actions.refresh")}
-              disabled={!hasSession || props.statusLoading() || entries === null}
+              disabled={!hasSession() || props.statusLoading() || entries() === null}
               style={{ "margin-left": "auto" }}
               onClick={() => props.onRefresh()}
             >
               <RefreshCw class={`h-4 w-4${props.statusLoading() ? " animate-spin" : ""}`} />
             </button>
 
-            <DiffToolbar
+              <DiffToolbar
-              viewMode={props.diffViewMode()}
+                viewMode={props.diffViewMode()}
-              contextMode={props.diffContextMode()}
+                contextMode={props.diffContextMode()}
-              wordWrapMode={props.diffWordWrapMode()}
+                wordWrapMode={props.diffWordWrapMode()}
-              onViewModeChange={props.onViewModeChange}
+                onViewModeChange={props.onViewModeChange}
-              onContextModeChange={props.onContextModeChange}
+                onContextModeChange={props.onContextModeChange}
-              onWordWrapModeChange={props.onWordWrapModeChange}
+                onWordWrapModeChange={props.onWordWrapModeChange}
-            />
+              />
-          </>
+            </>
-        }
+          }
         list={{ panel: renderListPanel, overlay: renderListOverlay }}
         viewer={renderViewer()}
         listOpen={props.listOpen()}

packages/ui/src/components/markdown.tsx

@@ -92,7 +92,6 @@ export function Markdown(props: MarkdownProps) {
     const globalCache = cacheHandle.get<RenderCache>()
     if (globalCache && cacheMatches(globalCache)) {
       setHtml(globalCache.html)
-      part.renderCache = globalCache
       notifyRendered()
       return
     }
@@ -100,14 +99,11 @@ export function Markdown(props: MarkdownProps) {
     const commitCacheEntry = (renderedHtml: string) => {
       const cacheEntry: RenderCache = { text, html: renderedHtml, theme: themeKey, mode: version }
       setHtml(renderedHtml)
-      part.renderCache = cacheEntry
       cacheHandle.set(cacheEntry)
       notifyRendered()
     }
 
     if (!highlightEnabled) {
-      part.renderCache = undefined
-
       try {
         const rendered = await renderMarkdown(text, { suppressHighlight: true })
 
@@ -185,7 +181,6 @@ export function Markdown(props: MarkdownProps) {
         if (latestRequestedText === text) {
           const cacheEntry: RenderCache = { text, html: rendered, theme: themeKey, mode: version }
           setHtml(rendered)
-          part.renderCache = cacheEntry
           cacheHandle.set(cacheEntry)
           notifyRendered()
         }
@@ -202,5 +197,15 @@ export function Markdown(props: MarkdownProps) {
 
   const proseClass = () => "markdown-body"
 
-  return <div ref={containerRef} class={proseClass()} innerHTML={html()} />
+  return (
+    <div
+      ref={containerRef}
+      class={proseClass()}
+      data-view="markdown"
+      data-part-id={resolved().partId}
+      data-markdown-theme={resolved().themeKey}
+      data-markdown-highlight={resolved().highlightEnabled ? "true" : "false"}
+      innerHTML={html()}
+    />
+  )
 }

packages/ui/src/components/message-anchors.ts

@@ -0,0 +1,9 @@
+export const MESSAGE_ANCHOR_PREFIX = "message-anchor-"
+
+export function getMessageAnchorId(messageId: string) {
+  return `${MESSAGE_ANCHOR_PREFIX}${messageId}`
+}
+
+export function getMessageIdFromAnchorId(anchorId: string) {
+  return anchorId.startsWith(MESSAGE_ANCHOR_PREFIX) ? anchorId.slice(MESSAGE_ANCHOR_PREFIX.length) : anchorId
+}

packages/ui/src/components/message-block-list.tsx

@@ -1,75 +0,0 @@
-import { Index, type Accessor } from "solid-js"
-import VirtualItem from "./virtual-item"
-import MessageBlock from "./message-block"
-import type { InstanceMessageStore } from "../stores/message-v2/instance-store"
-import type { DeleteHoverState } from "../types/delete-hover"
-
-export function getMessageAnchorId(messageId: string) {
-  return `message-anchor-${messageId}`
-}
-
-const VIRTUAL_ITEM_MARGIN_PX = 800
-
-interface MessageBlockListProps {
-  instanceId: string
-  sessionId: string
-  store: () => InstanceMessageStore
-  messageIds: () => string[]
-  lastAssistantIndex: () => number
-  showThinking: () => boolean
-  thinkingDefaultExpanded: () => boolean
-  showUsageMetrics: () => boolean
-  scrollContainer: Accessor<HTMLDivElement | undefined>
-  loading?: boolean
-  onRevert?: (messageId: string) => void
-  onDeleteMessagesUpTo?: (messageId: string) => void | Promise<void>
-  onFork?: (messageId?: string) => void
-  onContentRendered?: () => void
-  deleteHover?: Accessor<DeleteHoverState>
-  onDeleteHoverChange?: (state: DeleteHoverState) => void
-  selectedMessageIds?: Accessor<Set<string>>
-  onToggleSelectedMessage?: (messageId: string, selected: boolean) => void
-  setBottomSentinel: (element: HTMLDivElement | null) => void
-  suspendMeasurements?: () => boolean
-}
-
-export default function MessageBlockList(props: MessageBlockListProps) {
-  return (
-    <>
-      <Index each={props.messageIds()}>
-        {(messageId, index) => (
-          <VirtualItem
-            id={getMessageAnchorId(messageId())}
-            cacheKey={messageId()}
-            scrollContainer={props.scrollContainer}
-            threshold={VIRTUAL_ITEM_MARGIN_PX}
-            placeholderClass="message-stream-placeholder"
-            virtualizationEnabled={() => !props.loading}
-            suspendMeasurements={props.suspendMeasurements}
-          >
-            <MessageBlock
-              messageId={messageId()}
-              instanceId={props.instanceId}
-              sessionId={props.sessionId}
-              store={props.store}
-              messageIndex={index}
-              lastAssistantIndex={props.lastAssistantIndex}
-              showThinking={props.showThinking}
-              thinkingDefaultExpanded={props.thinkingDefaultExpanded}
-              showUsageMetrics={props.showUsageMetrics}
-              deleteHover={props.deleteHover}
-              onDeleteHoverChange={props.onDeleteHoverChange}
-              selectedMessageIds={props.selectedMessageIds}
-              onToggleSelectedMessage={props.onToggleSelectedMessage}
-              onRevert={props.onRevert}
-              onDeleteMessagesUpTo={props.onDeleteMessagesUpTo}
-              onFork={props.onFork}
-              onContentRendered={props.onContentRendered}
-            />
-          </VirtualItem>
-        )}
-      </Index>
-      <div ref={props.setBottomSentinel} aria-hidden="true" style={{ height: "1px" }} />
-    </>
-  )
-}

packages/ui/src/components/message-block.tsx

@@ -318,9 +318,11 @@ interface ToolCallItemProps {
   partId: string
   onContentRendered?: () => void
   showDeleteMessage?: boolean
+  deleteHover?: () => DeleteHoverState
   onDeleteHoverChange?: (state: DeleteHoverState) => void
   onDeleteMessagesUpTo?: (messageId: string) => void | Promise<void>
   selectedMessageIds?: () => Set<string>
+  selectedToolPartKeys?: () => Set<string>
   onToggleSelectedMessage?: (messageId: string, selected: boolean) => void
 }
 
@@ -331,6 +333,26 @@ function ToolCallItem(props: ToolCallItemProps) {
 
   const isSelectedForDeletion = () => Boolean(props.selectedMessageIds?.().has(props.messageId))
 
+  const isSelectedToolPartForDeletion = () => Boolean(props.selectedToolPartKeys?.().has(`${props.messageId}:${props.partId}`))
+
+  const isDeleteOverlayActive = () => {
+    if (isSelectedForDeletion()) return true
+    if (isSelectedToolPartForDeletion()) return true
+    const hover = props.deleteHover?.() ?? ({ kind: "none" } as DeleteHoverState)
+    if (hover.kind === "message") {
+      return hover.messageId === props.messageId
+    }
+    if (hover.kind === "deleteUpTo") {
+      const ids = props.store().getSessionMessageIds(props.sessionId)
+      const targetIndex = ids.indexOf(hover.messageId)
+      if (targetIndex === -1) return false
+      const currentIndex = ids.indexOf(props.messageId)
+      if (currentIndex === -1) return false
+      return currentIndex >= targetIndex
+    }
+    return false
+  }
+
   const record = createMemo(() => props.store().getMessage(props.messageId))
   const messageInfo = createMemo(() => props.store().getMessageInfo(props.messageId))
   const partEntry = createMemo(() => record()?.parts?.[props.partId])
@@ -408,7 +430,7 @@ function ToolCallItem(props: ToolCallItemProps) {
   return (
     <Show when={toolPart()}>
       {(resolvedToolPart) => (
-        <div class="delete-hover-scope">
+        <div class="delete-hover-scope" data-delete-part-hover={isDeleteOverlayActive() ? "true" : undefined}>
           <div class="tool-call-header-label">
             <div class="tool-call-header-meta">
               <Show when={props.showDeleteMessage}>
@@ -543,6 +565,7 @@ interface MessageBlockProps {
   deleteHover?: () => DeleteHoverState
   onDeleteHoverChange?: (state: DeleteHoverState) => void
   selectedMessageIds?: () => Set<string>
+  selectedToolPartKeys?: () => Set<string>
   onToggleSelectedMessage?: (messageId: string, selected: boolean) => void
   onRevert?: (messageId: string) => void
   onDeleteMessagesUpTo?: (messageId: string) => void | Promise<void>
@@ -555,7 +578,6 @@ export default function MessageBlock(props: MessageBlockProps) {
   const record = createMemo(() => props.store().getMessage(props.messageId))
   const messageInfo = createMemo(() => props.store().getMessageInfo(props.messageId))
   const sessionCache = getSessionRenderCache(props.instanceId, props.sessionId)
-
   const isDeleteMessageHovered = () => {
     const hover = props.deleteHover?.() ?? ({ kind: "none" } as DeleteHoverState)
 
@@ -806,9 +828,11 @@ export default function MessageBlock(props: MessageBlockProps) {
                           messageId={toolItem.messageId}
                           partId={toolItem.partId}
                           showDeleteMessage={index() === 0}
+                          deleteHover={props.deleteHover}
                           onDeleteHoverChange={props.onDeleteHoverChange}
                           onDeleteMessagesUpTo={props.onDeleteMessagesUpTo}
                           selectedMessageIds={props.selectedMessageIds}
+                          selectedToolPartKeys={props.selectedToolPartKeys}
                           onToggleSelectedMessage={props.onToggleSelectedMessage}
                           onContentRendered={props.onContentRendered}
                         />
@@ -1265,12 +1289,6 @@ function ReasoningCard(props: ReasoningCardProps) {
   const [deletingUpTo, setDeletingUpTo] = createSignal(false)
   const isSelectedForDeletion = () => Boolean(props.selectedMessageIds?.().has(props.messageId))
 
-  let headerEl: HTMLDivElement | undefined
-  let actionsEl: HTMLDivElement | undefined
-  let primaryEl: HTMLSpanElement | undefined
-  let metaMeasureEl: HTMLSpanElement | undefined
-  const [showMetaInline, setShowMetaInline] = createSignal(true)
-
   createEffect(() => {
     setExpanded(Boolean(props.defaultExpanded))
   })
@@ -1298,33 +1316,6 @@ function ReasoningCard(props: ReasoningCardProps) {
 
   const hasMeta = () => Boolean(props.showAgentMeta && (agentIdentifier() || modelIdentifier()))
 
-  const updateMetaLayout = () => {
-    if (!hasMeta()) return
-    if (!headerEl || !actionsEl || !primaryEl || !metaMeasureEl) return
-
-    const headerWidth = headerEl.getBoundingClientRect().width
-    const actionsWidth = actionsEl.getBoundingClientRect().width
-    const primaryWidth = primaryEl.getBoundingClientRect().width
-    const metaWidth = metaMeasureEl.getBoundingClientRect().width
-
-    const availableLeft = Math.max(0, headerWidth - actionsWidth - 12)
-    setShowMetaInline(primaryWidth + metaWidth + 8 <= availableLeft)
-  }
-
-  createEffect(() => {
-    if (!hasMeta() || typeof ResizeObserver === "undefined") {
-      setShowMetaInline(true)
-      return
-    }
-
-    updateMetaLayout()
-    const observer = new ResizeObserver(() => updateMetaLayout())
-    if (headerEl) observer.observe(headerEl)
-    if (actionsEl) observer.observe(actionsEl)
-    if (primaryEl) observer.observe(primaryEl)
-    onCleanup(() => observer.disconnect())
-  })
-
   const reasoningText = () => {
     const part = props.part as any
     if (!part) return ""
@@ -1403,7 +1394,7 @@ function ReasoningCard(props: ReasoningCardProps) {
 
   return (
     <div class="delete-hover-scope message-reasoning-card">
-      <div class="message-reasoning-header" ref={(el) => (headerEl = el)}>
+      <div class="message-reasoning-header">
         <button
           type="button"
           class="message-reasoning-toggle"
@@ -1412,7 +1403,7 @@ function ReasoningCard(props: ReasoningCardProps) {
           aria-label={expanded() ? t("messageBlock.reasoning.collapseAriaLabel") : t("messageBlock.reasoning.expandAriaLabel")}
         >
           <span class="message-reasoning-label">
-            <span class="message-reasoning-label-primary" ref={(el) => (primaryEl = el)}>
+            <span class="message-reasoning-label-primary">
               <Show when={props.showDeleteMessage}>
                 <input
                   class="message-select-checkbox"
@@ -1433,43 +1424,10 @@ function ReasoningCard(props: ReasoningCardProps) {
 
               <span>{t("messageBlock.reasoning.thinkingLabel")}</span>
             </span>
-
-            <Show when={hasMeta() && showMetaInline()}>
-              <span class="message-step-meta-inline">
-                <Show when={agentIdentifier()}>
-                  {(value) => (
-                    <span class="font-medium text-[var(--message-assistant-border)]">{t("messageBlock.step.agentLabel", { agent: value() })}</span>
-                  )}
-                </Show>
-                <Show when={modelIdentifier()}>
-                  {(value) => (
-                    <span class="font-medium text-[var(--message-assistant-border)]">{t("messageBlock.step.modelLabel", { model: value() })}</span>
-                  )}
-                </Show>
-              </span>
-            </Show>
-
-            <Show when={hasMeta()}>
-              <span
-                ref={(el) => (metaMeasureEl = el)}
-                class="message-step-meta-inline message-step-meta-inline--measure"
-              >
-                <Show when={agentIdentifier()}>
-                  {(value) => (
-                    <span class="font-medium text-[var(--message-assistant-border)]">{t("messageBlock.step.agentLabel", { agent: value() })}</span>
-                  )}
-                </Show>
-                <Show when={modelIdentifier()}>
-                  {(value) => (
-                    <span class="font-medium text-[var(--message-assistant-border)]">{t("messageBlock.step.modelLabel", { model: value() })}</span>
-                  )}
-                </Show>
-              </span>
-            </Show>
           </span>
         </button>
 
-        <div class="message-reasoning-actions" ref={(el) => (actionsEl = el)}>
+        <div class="message-reasoning-actions">
           <button
             type="button"
             class="message-action-button"
@@ -1518,7 +1476,7 @@ function ReasoningCard(props: ReasoningCardProps) {
         </div>
       </div>
 
-      <Show when={hasMeta() && !showMetaInline()}>
+      <Show when={hasMeta()}>
         <div class="message-reasoning-meta-row">
           <span class="message-step-meta-inline">
             <Show when={agentIdentifier()}>

packages/ui/src/components/message-item.tsx

@@ -1,4 +1,5 @@
 import { For, Show, createEffect, createSignal, onCleanup } from "solid-js"
+import { Portal } from "solid-js/web"
 import { Copy, ListStart, Split, Trash, Undo } from "lucide-solid"
 import type { MessageInfo, ClientPart, SDKAssistantMessageV2 } from "../types/message"
 import { partHasRenderableText } from "../types/message"
@@ -43,6 +44,57 @@ export default function MessageItem(props: MessageItemProps) {
   const [deletingMessage, setDeletingMessage] = createSignal(false)
   const [deletingUpTo, setDeletingUpTo] = createSignal(false)
 
+  type ImagePreviewState = {
+    url: string
+    name: string
+    anchor: HTMLElement
+  }
+
+  const [imagePreview, setImagePreview] = createSignal<ImagePreviewState | null>(null)
+
+  const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value))
+
+  const getImagePreviewPosition = () => {
+    const state = imagePreview()
+    if (!state) return null
+
+    const rect = state.anchor.getBoundingClientRect()
+
+    // Outer box: 320px image + 8px padding on each side.
+    const padding = 8
+    const maxImage = 320
+    const gap = 8
+    const chrome = padding * 2
+    const outerWidth = maxImage + chrome
+    const outerHeight = maxImage + chrome
+
+    const viewportW = window.innerWidth
+    const viewportH = window.innerHeight
+
+    const left = clamp(rect.left, 8, Math.max(8, viewportW - outerWidth - 8))
+
+    const fitsAbove = rect.top >= outerHeight + gap + 8
+    const preferredTop = fitsAbove ? rect.top - outerHeight - gap : rect.bottom + gap
+    const top = clamp(preferredTop, 8, Math.max(8, viewportH - outerHeight - 8))
+
+    return { left, top }
+  }
+
+  createEffect(() => {
+    const active = imagePreview()
+    if (!active) return
+
+    // If the user scrolls (message stream scroll container) or resizes, the anchor moves.
+    // Hide the popover to avoid showing it in the wrong place.
+    const hide = () => setImagePreview(null)
+    window.addEventListener("scroll", hide, true)
+    window.addEventListener("resize", hide)
+    onCleanup(() => {
+      window.removeEventListener("scroll", hide, true)
+      window.removeEventListener("resize", hide)
+    })
+  })
+
   const isSelectedForDeletion = () => Boolean(props.selectedMessageIds?.().has(props.record.id))
 
   let topRowEl: HTMLDivElement | undefined
@@ -178,6 +230,11 @@ export default function MessageItem(props: MessageItemProps) {
     }
   }
 
+  const showImagePreview = (anchor: HTMLElement, url: string, name: string) => {
+    if (!url) return
+    setImagePreview({ anchor, url, name })
+  }
+
   const errorMessage = () => {
     const info = props.messageInfo
     if (!info || info.role !== "assistant" || !info.error) return null
@@ -324,7 +381,15 @@ export default function MessageItem(props: MessageItemProps) {
 
 
   return (
-    <div class={containerClass()}>
+    <div
+      class={containerClass()}
+      data-view="message-item"
+      data-instance-id={props.instanceId}
+      data-session-id={props.sessionId}
+      data-message-id={props.record.id}
+      data-message-role={isUser() ? "user" : "assistant"}
+      data-message-status={props.record.status}
+    >
       <header class={`message-item-header ${isUser() ? "pb-0.5" : "pb-0"}`}>
         <div class="message-item-header-row message-item-header-row--top" ref={(el) => (topRowEl = el)}>
           <div class="message-header-left">
@@ -521,6 +586,12 @@ export default function MessageItem(props: MessageItemProps) {
                   <div
                     class={`attachment-chip ${isImage ? "attachment-chip-image" : ""}`}
                     title={name}
+                    onMouseEnter={(e) => {
+                      if (!isImage) return
+                      const el = e.currentTarget as HTMLElement
+                      showImagePreview(el, attachment.url || "", name)
+                    }}
+                    onMouseLeave={() => setImagePreview(null)}
                   >
                     <Show when={isImage} fallback={
                       <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -549,11 +620,6 @@ export default function MessageItem(props: MessageItemProps) {
                         </svg>
                       </button>
                     </Show>
-                    <Show when={isImage}>
-                      <div class="attachment-chip-preview">
-                        <img src={attachment.url} alt={name} />
-                      </div>
-                    </Show>
                   </div>
                 )
               }}
@@ -561,6 +627,31 @@ export default function MessageItem(props: MessageItemProps) {
           </div>
         </Show>
 
+        <Show when={imagePreview()}>
+          {(stateAccessor) => {
+            const state = stateAccessor()
+            const pos = () => getImagePreviewPosition()
+            return (
+              <Portal>
+                <Show when={pos()}>
+                  {(posAccessor) => {
+                    const coords = posAccessor()
+                    return (
+                      <div
+                        class="attachment-image-popover"
+                        style={{ left: `${coords.left}px`, top: `${coords.top}px` }}
+                        aria-hidden="true"
+                      >
+                        <img src={state.url} alt={state.name} />
+                      </div>
+                    )
+                  }}
+                </Show>
+              </Portal>
+            )
+          }}
+        </Show>
+
         <Show when={props.record.status === "sending"}>
           <div class="message-sending">
             <span class="generating-spinner">●</span> {t("messageItem.status.sending")}

packages/ui/src/components/message-part.tsx

@@ -131,7 +131,12 @@ export default function MessagePart(props: MessagePartProps) {
     <Switch>
       <Match when={partType() === "text"}>
         <Show when={!shouldHideTextPart() && partHasRenderableText(props.part)}>
-          <div class={canRenderMarkdown() ? markdownContainerClass() : textContainerClass()} data-role={textContainerRole()}>
+          <div
+            class={canRenderMarkdown() ? markdownContainerClass() : textContainerClass()}
+            data-role={textContainerRole()}
+            data-part-type="text"
+            data-part-id={typeof (props.part as any)?.id === "string" ? (props.part as any).id : undefined}
+          >
             <Show when={canRenderMarkdown()} fallback={<span class="text-primary">{plainTextContent()}</span>}>
               <Markdown
                 part={createTextPartForMarkdown()}

packages/ui/src/components/message-timeline.tsx

@@ -1,9 +1,10 @@
-import { For, Show, createEffect, createMemo, createSignal, onCleanup, on, untrack, type Component } from "solid-js"
+import { For, Show, createEffect, createMemo, createSignal, onCleanup, on, untrack, type Component, type Accessor } from "solid-js"
 import MessagePreview from "./message-preview"
 import { messageStoreBus } from "../stores/message-v2/bus"
 import type { ClientPart } from "../types/message"
 import type { MessageRecord } from "../stores/message-v2/types"
 import { buildRecordDisplayData } from "../stores/message-v2/record-display-cache"
+import { getPartCharCount } from "../lib/token-utils"
 import { getToolIcon } from "./tool-call/utils"
 import { User as UserIcon, Bot as BotIcon, FoldVertical, ShieldAlert } from "lucide-solid"
 import { useI18n } from "../lib/i18n"
@@ -22,12 +23,22 @@ export interface TimelineSegment {
   toolPartIds?: string[]
   partIds?: string[]
   partId?: string
+  totalChars: number
 }
 
 interface MessageTimelineProps {
   segments: TimelineSegment[]
   onSegmentClick?: (segment: TimelineSegment) => void
-  activeMessageId?: string | null
+  onToggleSelection?: (id: string) => void
+  onLongPressSelection?: (segment: TimelineSegment) => void
+  onSelectRange?: (id: string) => void
+  onClearSelection?: () => void
+  selectedIds?: Accessor<Set<string>>
+  expandedMessageIds?: Accessor<Set<string>>
+  // Optional: restrict histogram/xray overlay to only show for these message ids.
+  // Used to hide ribs for messages before the last compaction.
+  deletableMessageIds?: Accessor<Set<string>>
+  activeSegmentId?: string | null
   instanceId: string
   sessionId: string
   showToolSegments?: boolean
@@ -39,6 +50,9 @@ interface MessageTimelineProps {
 }
 
 const MAX_TOOLTIP_LENGTH = 220
+const LONG_PRESS_MS = 500
+const JITTER_THRESHOLD = 10
+const ABSOLUTE_TOKEN_CAP = 10000
 
 type ToolCallPart = Extract<ClientPart, { type: "tool" }>
 
@@ -47,6 +61,7 @@ interface PendingSegment {
   texts: string[]
   reasoningTexts: string[]
   partIds: string[]
+  totalChars: number
   hasPrimaryText: boolean
 }
 
@@ -182,7 +197,7 @@ export function buildTimelineSegments(
       [...pending.texts, ...pending.reasoningTexts],
       pending.type === "user" ? t("messageTimeline.tooltip.userFallback") : t("messageTimeline.tooltip.assistantFallback"),
     )
- 
+
     result.push({
       id: `${record.id}:${segmentIndex}`,
       messageId: record.id,
@@ -191,11 +206,12 @@ export function buildTimelineSegments(
       tooltip,
       shortLabel,
       partIds: pending.partIds,
+      totalChars: pending.totalChars,
     })
     segmentIndex += 1
     pending = null
   }
- 
+
   const ensureSegment = (type: TimelineSegmentType): PendingSegment => {
     if (!pending || pending.type !== type) {
       flushPending()
@@ -204,6 +220,7 @@ export function buildTimelineSegments(
         texts: [],
         reasoningTexts: [],
         partIds: [],
+        totalChars: 0,
         hasPrimaryText: type !== "assistant",
       }
     }
@@ -229,6 +246,7 @@ export function buildTimelineSegments(
         tooltip: formatToolTooltip([title], t),
         shortLabel: getToolIcon(typeof toolPart.tool === "string" ? toolPart.tool : "tool"),
         toolPartIds: partId ? [partId] : undefined,
+        totalChars: getPartCharCount(part),
       })
       segmentIndex += 1
       continue
@@ -243,10 +261,11 @@ export function buildTimelineSegments(
         if (typeof (part as any).id === "string" && (part as any).id.length > 0) {
           target.partIds.push((part as any).id)
         }
+        target.totalChars += getPartCharCount(part)
       }
       continue
     }
- 
+
     if (part.type === "compaction") {
       flushPending()
       const isAuto = Boolean((part as any)?.auto)
@@ -259,6 +278,7 @@ export function buildTimelineSegments(
         tooltip: isAuto ? t("messageTimeline.tooltip.compaction.auto") : t("messageTimeline.tooltip.compaction.manual"),
         variant: isAuto ? "auto" : "manual",
         partId,
+        totalChars: 0,
       })
       segmentIndex += 1
       continue
@@ -267,7 +287,7 @@ export function buildTimelineSegments(
     if (part.type === "step-start" || part.type === "step-finish") {
       continue
     }
- 
+
     const text = collectTextFromPart(part, t)
     if (text.trim().length === 0) continue
     const target = ensureSegment(defaultContentType)
@@ -277,12 +297,13 @@ export function buildTimelineSegments(
       if (typeof (part as any).id === "string" && (part as any).id.length > 0) {
         target.partIds.push((part as any).id)
       }
+      target.totalChars += getPartCharCount(part)
     }
   }
 
 
   flushPending()
- 
+
   return result
 }
 
@@ -299,7 +320,13 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
   let closeTimer: number | null = null
   const showTools = () => props.showToolSegments ?? true
   const deleteHover = () => props.deleteHover?.() ?? { kind: "none" as const }
- 
+
+  const isHistogramEligible = (segment: TimelineSegment): boolean => {
+    const allowed = props.deletableMessageIds?.()
+    if (!allowed) return true
+    return allowed.has(segment.messageId)
+  }
+
   const registerButtonRef = (segmentId: string, element: HTMLButtonElement | null) => {
     if (element) {
       buttonRefs.set(segmentId, element)
@@ -307,7 +334,7 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
       buttonRefs.delete(segmentId)
     }
   }
- 
+
   const clearHoverTimer = () => {
     if (hoverTimer !== null && typeof window !== "undefined") {
       window.clearTimeout(hoverTimer)
@@ -333,8 +360,11 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
       setHoverAnchorRect(null)
     }, 160)
   }
- 
+
   const handleMouseEnter = (segment: TimelineSegment, event: MouseEvent) => {
+    // Suppress previews during long-press selection gestures.
+    if (longPressTimer !== null) return
+
     if (typeof window === "undefined") return
     clearHoverTimer()
     clearCloseTimer()
@@ -349,7 +379,7 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
   const handleMouseLeave = () => {
     scheduleClose()
   }
- 
+
   createEffect(() => {
     if (typeof window === "undefined") return
     const anchor = hoverAnchorRect()
@@ -371,11 +401,235 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
     clearCloseTimer()
   })
 
-  createEffect(on(() => props.activeMessageId, (activeId) => {
+  // --- Selection & histogram rib state ---
+  const isSelectionActive = createMemo(() => (props.selectedIds?.().size ?? 0) > 0)
+
+  // Segments eligible for xray ribs. We intentionally exclude messages before
+  // the last compaction (when provided by the parent) to avoid misleading token
+  // weights for content that's no longer in context.
+  const xraySegments = createMemo(() => {
+    if (!isSelectionActive()) return [] as TimelineSegment[]
+    return props.segments.filter((segment) => isHistogramEligible(segment))
+  })
+
+  // Stable layout offsets per badge (relative to scroll content), recomputed only
+  // on activation, resize, or expansion — NOT on every scroll frame.
+  const [badgeOffsets, setBadgeOffsets] = createSignal<Record<string, { layoutTop: number; height: number }>>({})
+  const [windowWidth, setWindowWidth] = createSignal(typeof window !== "undefined" ? window.innerWidth : 1200)
+  let scrollContainerRef: HTMLDivElement | undefined
+  let xrayOverlayRef: HTMLDivElement | undefined
+
+  // Full layout recomputation: reads every badge's getBoundingClientRect once,
+  // then stores offsets relative to the scroll content so they survive scrolling.
+  const computeBadgeLayout = () => {
+    if (!isSelectionActive() || !scrollContainerRef) return
+    const containerRect = scrollContainerRef.getBoundingClientRect()
+    const scrollTop = scrollContainerRef.scrollTop
+    const offsets: Record<string, { layoutTop: number; height: number }> = {}
+
+    for (const [id, element] of buttonRefs.entries()) {
+      if (!element) continue
+      const rect = element.getBoundingClientRect()
+      // Store position relative to scroll content (survives scrolling).
+      offsets[id] = {
+        layoutTop: rect.top - containerRect.top + scrollTop,
+        height: rect.height,
+      }
+    }
+    setBadgeOffsets(offsets)
+    if (xrayOverlayRef) {
+      xrayOverlayRef.style.setProperty("--xray-scroll-y", `${-scrollTop}px`)
+    }
+
+    if (typeof window !== "undefined") {
+      setWindowWidth(window.innerWidth)
+    }
+  }
+
+  const handleScroll = () => {
+    if (!isSelectionActive()) return
+    if (!scrollContainerRef || !xrayOverlayRef) return
+    xrayOverlayRef.style.setProperty("--xray-scroll-y", `${-scrollContainerRef.scrollTop}px`)
+  }
+
+  createEffect(() => {
+    if (isSelectionActive()) {
+      computeBadgeLayout()
+      if (typeof window !== "undefined") {
+        // Deferred pass: tool segments become visible when selection activates,
+        // but they may need a layout pass before getBoundingClientRect is accurate.
+        requestAnimationFrame(computeBadgeLayout)
+        window.addEventListener("resize", computeBadgeLayout)
+        onCleanup(() => {
+          window.removeEventListener("resize", computeBadgeLayout)
+        })
+      }
+    }
+  })
+
+  // Re-compute badge layout after expansion changes (tools become visible in DOM)
+  createEffect(() => {
+    props.expandedMessageIds?.()
+    if (isSelectionActive()) {
+      requestAnimationFrame(computeBadgeLayout)
+    }
+  })
+
+  const maxRibWidth = createMemo(() => Math.round(windowWidth() * 0.5))
+
+  // Compute fresh char counts from the store. segment.totalChars can be stale for
+  // tool parts whose output arrived after the timeline segment was first built.
+  const liveSegmentChars = createMemo(() => {
+    if (!isSelectionActive()) return {} as Record<string, number>
+    const result: Record<string, number> = {}
+    const resolvedStore = store()
+
+    // Compute live char counts by reading only the parts that the segment
+    // references (partIds/toolPartIds). This stays accurate for streamed tool
+    // outputs without scanning every part in the message.
+    for (const segment of xraySegments()) {
+      const record = resolvedStore.getMessage(segment.messageId)
+      if (!record) {
+        result[segment.id] = segment.totalChars
+        continue
+      }
+
+      const ids = [...(segment.partIds ?? []), ...(segment.toolPartIds ?? [])]
+      let chars = 0
+      for (const partId of ids) {
+        const part = record.parts?.[partId]?.data
+        if (!part) continue
+        chars += getPartCharCount(part)
+      }
+
+      result[segment.id] = chars > 0 ? chars : segment.totalChars
+    }
+
+    return result
+  })
+
+  // Pre-compute aggregate tokens per message: O(n) once, O(1) per lookup.
+  // Avoids the previous O(n²) pattern of iterating all segments inside each <For> item.
+  const aggregateTokensByMessageId = createMemo(() => {
+    const chars = liveSegmentChars()
+    const result: Record<string, number> = {}
+    for (const s of xraySegments()) {
+      result[s.messageId] = (result[s.messageId] ?? 0) + (chars[s.id] ?? s.totalChars)
+    }
+    for (const id of Object.keys(result)) {
+      result[id] = Math.max(Math.round(result[id] / 4), 1)
+    }
+    return result
+  })
+
+  const getSegmentTokens = (segment: TimelineSegment): number => {
+    const isExpanded = props.expandedMessageIds?.().has(segment.messageId) ?? false
+    // When tools are hidden (not expanded, not in selection mode), assistant/user
+    // bars show aggregate tokens for the whole message.  When tools are visible
+    // (expanded or selection mode active), each segment shows its own tokens to
+    // avoid double-counting.
+    if (!isExpanded && !isSelectionActive() && (segment.type === "assistant" || segment.type === "user")) {
+      return aggregateTokensByMessageId()[segment.messageId] ?? 1
+    }
+    const chars = liveSegmentChars()[segment.id] ?? segment.totalChars
+    return Math.max(Math.round(chars / 4), 1)
+  }
+
+  const getMessageAggregateTokens = (messageId: string): number => {
+    return aggregateTokensByMessageId()[messageId] ?? 1
+  }
+
+  const formatTokenLabel = (tokens: number): string => {
+    if (tokens >= 1000000) return `${(tokens / 1000000).toFixed(1)}M`
+    if (tokens >= 1000) return `${(tokens / 1000).toFixed(1)}K`
+    return String(tokens)
+  }
+
+  const maxTokens = createMemo(() => {
+    let max = 0
+    for (const s of xraySegments()) {
+      const tokens = getSegmentTokens(s)
+      if (tokens > max) max = tokens
+    }
+    return Math.max(max, 1)
+  })
+
+  // --- Long-press for mobile selection ---
+  let longPressTimer: number | null = null
+  let wasLongPress = false
+  let pressStartPos = { x: 0, y: 0 }
+
+  const handlePointerDown = (segment: TimelineSegment, event: PointerEvent) => {
+    if (event.button !== 0) return
+    wasLongPress = false
+    pressStartPos = { x: event.clientX, y: event.clientY }
+
+    clearHoverTimer()
+    clearCloseTimer()
+
+    if (longPressTimer !== null && typeof window !== "undefined") {
+      window.clearTimeout(longPressTimer)
+    }
+
+    if (typeof window !== "undefined") {
+      longPressTimer = window.setTimeout(() => {
+        longPressTimer = null
+        wasLongPress = true
+
+        // Scroll anchoring: preserve visual position of the pressed badge.
+        const btn = buttonRefs.get(segment.id)
+        let anchorOffset: number | null = null
+        if (btn && scrollContainerRef) {
+          anchorOffset = btn.offsetTop - scrollContainerRef.scrollTop
+        }
+
+        if (props.onLongPressSelection) {
+          props.onLongPressSelection(segment)
+        } else {
+          props.onToggleSelection?.(segment.id)
+        }
+
+        if (anchorOffset !== null && btn && scrollContainerRef) {
+          const desired = btn.offsetTop - anchorOffset
+          if (Math.abs(scrollContainerRef.scrollTop - desired) > 1) {
+            scrollContainerRef.scrollTop = desired
+          }
+        }
+      }, LONG_PRESS_MS)
+    }
+  }
+
+  const handlePointerUp = () => {
+    if (longPressTimer !== null && typeof window !== "undefined") {
+      window.clearTimeout(longPressTimer)
+      longPressTimer = null
+    }
+  }
+
+  const handlePointerMove = (event: PointerEvent) => {
+    if (longPressTimer !== null) {
+      const dist = Math.sqrt(
+        Math.pow(event.clientX - pressStartPos.x, 2) +
+        Math.pow(event.clientY - pressStartPos.y, 2),
+      )
+      if (dist > JITTER_THRESHOLD) {
+        if (typeof window !== "undefined") {
+          window.clearTimeout(longPressTimer)
+        }
+        longPressTimer = null
+      }
+    }
+  }
+
+  const handleContextMenu = (event: MouseEvent) => {
+    if (wasLongPress) {
+      event.preventDefault()
+    }
+  }
+
+  createEffect(on(() => props.activeSegmentId, (activeId) => {
     if (!activeId) return
-    const targetSegment = untrack(() => props.segments).find((segment) => segment.messageId === activeId)
+    const element = buttonRefs.get(activeId)
-    if (!targetSegment) return
-    const element = buttonRefs.get(targetSegment.id)
     if (!element) return
     const timer = typeof window !== "undefined" ? window.setTimeout(() => {
       element.scrollIntoView({ block: "nearest", behavior: "smooth" })
@@ -402,120 +656,265 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
   })
 
   const previewData = createMemo(() => {
-
     const segment = hoveredSegment()
     if (!segment) return null
     const record = store().getMessage(segment.messageId)
     if (!record) return null
     return { messageId: segment.messageId }
   })
- 
+
+  // Pre-computed set of messageIds that have at least one tool segment.
+  // Used by groupRole() inside <For> to avoid O(n) .some() per segment → O(1) .has().
+  const messagesWithTools = createMemo(() => {
+    const set = new Set<string>()
+    for (const s of props.segments) {
+      if (s.type === "tool") set.add(s.messageId)
+    }
+    return set
+  })
+
+  // Pre-computed index map for session message ordering.
+  // Used by isDeleteHovered() to replace O(n) indexOf with O(1) Map.get().
+  const messageIdToSessionIndex = createMemo(() => {
+    const ids = store().getSessionMessageIds(props.sessionId)
+    const map = new Map<string, number>()
+    for (let i = 0; i < ids.length; i++) map.set(ids[i], i)
+    return map
+  })
+
   return (
-    <div class="message-timeline" role="navigation" aria-label={t("messageTimeline.ariaLabel")}>
+    <div class="message-timeline-container">
-      <For each={props.segments}>
+      <div
-        {(segment) => {
+        ref={scrollContainerRef}
-          onCleanup(() => buttonRefs.delete(segment.id))
+        class={`message-timeline${isSelectionActive() ? " message-timeline--selection-active" : ""}`}
-          const isActive = () => props.activeMessageId === segment.messageId
+        role="navigation"
+        aria-label={t("messageTimeline.ariaLabel")}
+        onScroll={handleScroll}
+      >
+        <For each={props.segments}>
+          {(segment, segIndex) => {
+            onCleanup(() => buttonRefs.delete(segment.id))
+            const isActive = () => props.activeSegmentId === segment.id
+            const isSelected = () => props.selectedIds?.().has(segment.id)
 
-          const isDeleteHovered = () => {
+            const isDeleteHovered = () => {
-            const hover = deleteHover() as DeleteHoverState
+              const hover = deleteHover() as DeleteHoverState
-            const selected = props.selectedMessageIds?.() ?? new Set<string>()
+              if (hover.kind === "message") {
-            if (selected.has(segment.messageId)) {
+                return hover.messageId === segment.messageId
-              return true
+              }
-            }
+
-            if (hover.kind === "message") {
+              if (hover.kind === "deleteUpTo") {
-              return hover.messageId === segment.messageId
+                const indexMap = messageIdToSessionIndex()
+                const targetIndex = indexMap.get(hover.messageId)
+                if (targetIndex === undefined) return false
+                const segmentIndex = indexMap.get(segment.messageId)
+                if (segmentIndex === undefined) return false
+                return segmentIndex >= targetIndex
+              }
+
+              return false
             }
 
-            if (hover.kind === "deleteUpTo") {
+            const isDeleteSelected = () => {
-              const ids = store().getSessionMessageIds(props.sessionId)
+              const selected = props.selectedMessageIds?.()
-              const targetIndex = ids.indexOf(hover.messageId)
+              if (!selected) return false
-              if (targetIndex === -1) return false
+              return selected.has(segment.messageId)
-              const segmentIndex = ids.indexOf(segment.messageId)
-              if (segmentIndex === -1) return false
-              return segmentIndex >= targetIndex
             }
 
-            return false
+            const hasActivePermission = () => {
-          }
+              if (segment.type !== "tool") return false
-
+              const partIds = segment.toolPartIds ?? []
-          const hasActivePermission = () => {
+              if (partIds.length === 0) return false
-            if (segment.type !== "tool") return false
+              for (const partId of partIds) {
-            const partIds = segment.toolPartIds ?? []
+                const permissionState = store().getPermissionState(segment.messageId, partId)
-            if (partIds.length === 0) return false
+                if (permissionState?.active) return true
-            for (const partId of partIds) {
+              }
-              const permissionState = store().getPermissionState(segment.messageId, partId)
+              return false
-              if (permissionState?.active) return true
             }
-            return false
-          }
 
-          const isHidden = () => segment.type === "tool" && !(showTools() || isActive() || hasActivePermission() || isDeleteHovered())
+            const isExpanded = () => props.expandedMessageIds?.().has(segment.messageId) ?? false
+            const isHidden = () =>
+              segment.type === "tool" &&
+              !(showTools() || isExpanded() || isSelectionActive() || isActive() || hasActivePermission() || isDeleteHovered() || isDeleteSelected())
 
-           const shortLabelContent = () => {
+            // Group visual indicators: tools belong to the same message as their
-             if (segment.type === "tool") {
+            // assistant.  Uses messageId for correctness (not positional adjacency).
-               if (hasActivePermission()) {
+            const groupRole = (): "child" | "parent" | "none" => {
-                 return <ShieldAlert class="message-timeline-icon" aria-hidden="true" />
+              if (segment.type === "tool") return "child"
+              if (segment.type === "assistant" && messagesWithTools().has(segment.messageId)) return "parent"
+              return "none"
+            }
+            const isGroupStart = () => {
+              if (segment.type !== "tool") return false
+              const idx = segIndex()
+              const prev = idx > 0 ? props.segments[idx - 1] : null
+              // First tool in the message's run: either nothing before, or previous
+              // segment is from a different message or is not a tool.
+              return !prev || prev.type !== "tool" || prev.messageId !== segment.messageId
+            }
+
+             const shortLabelContent = () => {
+               if (segment.type === "tool") {
+                 if (hasActivePermission()) {
+                   return <ShieldAlert class="message-timeline-icon" aria-hidden="true" />
+                 }
+                 return segment.shortLabel ?? getToolIcon("tool")
                }
-               return segment.shortLabel ?? getToolIcon("tool")
+               if (segment.type === "compaction") {
+                 return <FoldVertical class="message-timeline-icon" aria-hidden="true" />
+               }
+               if (segment.type === "user") {
+                 return <UserIcon class="message-timeline-icon" aria-hidden="true" />
+               }
+               return <BotIcon class="message-timeline-icon" aria-hidden="true" />
              }
-             if (segment.type === "compaction") {
-               return <FoldVertical class="message-timeline-icon" aria-hidden="true" />
-             }
-             if (segment.type === "user") {
-               return <UserIcon class="message-timeline-icon" aria-hidden="true" />
-             }
-             return <BotIcon class="message-timeline-icon" aria-hidden="true" />
-           }
 
-          return (
+            return (
-             <button
+              <button
-                ref={(el) => registerButtonRef(segment.id, el)}
+                  ref={(el) => registerButtonRef(segment.id, el)}
-                type="button"
+                  type="button"
-                data-variant={segment.variant}
+                  data-variant={segment.variant}
-                class={`message-timeline-segment message-timeline-${segment.type} ${hasActivePermission() ? "message-timeline-segment-permission" : ""} ${segment.type === "compaction" ? `message-timeline-compaction-${segment.variant ?? "manual"}` : ""} ${isActive() ? "message-timeline-segment-active" : ""} ${isHidden() ? "message-timeline-segment-hidden" : ""}`}
+                  class={`message-timeline-segment message-timeline-${segment.type} ${hasActivePermission() ? "message-timeline-segment-permission" : ""} ${segment.type === "compaction" ? `message-timeline-compaction-${segment.variant ?? "manual"}` : ""} ${isActive() ? "message-timeline-segment-active" : ""} ${isHidden() ? "message-timeline-segment-hidden" : ""} ${isSelected() ? "message-timeline-segment-selected" : ""} ${isDeleteSelected() ? "message-timeline-segment-delete-selected" : ""} ${groupRole() !== "none" ? `message-timeline-group-${groupRole()}` : ""} ${isGroupStart() ? "message-timeline-group-start" : ""}`}
 
-                data-delete-hover={isDeleteHovered() ? "true" : undefined}
+                  data-delete-hover={isDeleteHovered() || isDeleteSelected() || isSelected() ? "true" : undefined}
 
-               aria-current={isActive() ? "true" : undefined}
+                 aria-current={isActive() ? "true" : undefined}
-               aria-hidden={isHidden() ? "true" : undefined}
+                 aria-hidden={isHidden() ? "true" : undefined}
-               onClick={() => props.onSegmentClick?.(segment)}
+                 onClick={(event) => {
-               onMouseEnter={(event) => handleMouseEnter(segment, event)}
+                   if (wasLongPress) {
-              onMouseLeave={handleMouseLeave}
+                     wasLongPress = false
-            >
+                     return
-              <span class="message-timeline-label message-timeline-label-full">{segment.label}</span>
+                   }
-              <span class="message-timeline-label message-timeline-label-short">{shortLabelContent()}</span>
+
-            </button>
+                   // Capture scroll anchor before selection changes may toggle
-          )
+                   // tool segment visibility, which shifts timeline layout.
-        }}
+                   const btn = buttonRefs.get(segment.id)
-      </For>
+                   let anchorOffset: number | null = null
-      <Show when={previewData()}>
+                   if (btn && scrollContainerRef) {
-        {(data) => {
+                     anchorOffset = btn.offsetTop - scrollContainerRef.scrollTop
-          onCleanup(() => setTooltipElement(null))
+                   }
-          return (
+
-            <div
+                   const isMultiSelectActive = (props.selectedIds?.().size ?? 0) > 0
-              ref={(element) => setTooltipElement(element)}
+
-              class="message-timeline-tooltip"
+                   if (event.shiftKey) {
-              style={{ top: `${tooltipCoords().top}px`, left: `${tooltipCoords().left}px` }}
+                     props.onSelectRange?.(segment.id)
-              onMouseEnter={() => clearCloseTimer()}
+                   } else if (event.ctrlKey || event.metaKey) {
-              onMouseLeave={() => scheduleClose()}
+                     props.onToggleSelection?.(segment.id)
-            >
+                   } else if (isMultiSelectActive) {
-              <MessagePreview
+                     // In selection mode, plain click scrolls to the message
-                messageId={data().messageId}
+                     // instead of clearing. Selection is cleared by clicking
-                instanceId={props.instanceId}
+                     // anywhere inside the chat container or pressing Esc.
-                sessionId={props.sessionId}
+                     props.onSegmentClick?.(segment)
-                store={store}
+                   } else {
-                deleteHover={props.deleteHover}
+                     props.onSegmentClick?.(segment)
-                onDeleteHoverChange={props.onDeleteHoverChange}
+                   }
-                onDeleteMessagesUpTo={props.onDeleteMessagesUpTo}
+
-                selectedMessageIds={props.selectedMessageIds}
+                   // Restore scroll anchor: keep the clicked badge at the same
-              />
+                   // visual position after hidden tools appear or disappear.
-            </div>
+                   if (anchorOffset !== null && btn && scrollContainerRef) {
-          )
+                     const desired = btn.offsetTop - anchorOffset
-        }}
+                     if (Math.abs(scrollContainerRef.scrollTop - desired) > 1) {
+                       scrollContainerRef.scrollTop = desired
+                     }
+                   }
+                 }}
+                onPointerDown={(e) => handlePointerDown(segment, e)}
+                 onPointerUp={handlePointerUp}
+                 onPointerCancel={handlePointerUp}
+                 onPointerMove={handlePointerMove}
+                 onContextMenu={handleContextMenu}
+                 onMouseEnter={(event) => handleMouseEnter(segment, event)}
+                 onMouseLeave={handleMouseLeave}
+              >
+                <span class="message-timeline-label message-timeline-label-full">{segment.label}</span>
+                <span class="message-timeline-label message-timeline-label-short">{shortLabelContent()}</span>
+              </button>
+            )
+          }}
+        </For>
+        <Show when={previewData()}>
+          {(data) => {
+            onCleanup(() => setTooltipElement(null))
+            return (
+              <div
+                ref={(element) => setTooltipElement(element)}
+                class="message-timeline-tooltip"
+                style={{ top: `${tooltipCoords().top}px`, left: `${tooltipCoords().left}px` }}
+                onMouseEnter={() => clearCloseTimer()}
+                onMouseLeave={() => scheduleClose()}
+              >
+                <MessagePreview
+                  messageId={data().messageId}
+                  instanceId={props.instanceId}
+                  sessionId={props.sessionId}
+                  store={store}
+                  deleteHover={props.deleteHover}
+                  onDeleteHoverChange={props.onDeleteHoverChange}
+                  onDeleteMessagesUpTo={props.onDeleteMessagesUpTo}
+                  selectedMessageIds={props.selectedMessageIds}
+                />
+              </div>
+            )
+          }}
+        </Show>
+      </div>
+
+      <Show when={isSelectionActive()}>
+        <div
+          ref={(el) => {
+            xrayOverlayRef = el
+            if (xrayOverlayRef && scrollContainerRef) {
+              xrayOverlayRef.style.setProperty("--xray-scroll-y", `${-scrollContainerRef.scrollTop}px`)
+            }
+          }}
+          class="message-timeline-xray-overlay"
+          style={{ "--max-rib-width": `${maxRibWidth()}px` }}
+        >
+          <div class="message-timeline-xray-overlay-inner">
+          <For each={xraySegments()}>
+            {(segment) => {
+              const pos = () => {
+                const offset = badgeOffsets()[segment.id]
+                if (!offset) return null
+                return { top: offset.layoutTop + offset.height / 2 }
+              }
+              const tokens = () => getSegmentTokens(segment)
+              const relativeWeight = () => tokens() / maxTokens()
+              const absoluteWeight = () => Math.min(tokens() / ABSOLUTE_TOKEN_CAP, 1.0)
+              const isOverflow = () => tokens() > ABSOLUTE_TOKEN_CAP
+              const isParent = segment.type === "assistant" || segment.type === "user"
+              const displayTokens = () =>
+                isParent ? getMessageAggregateTokens(segment.messageId) : tokens()
+              return (
+                <Show when={pos()}>
+                  <div
+                    class="message-timeline-xray-rib"
+                    style={{
+                      top: `${pos()!.top}px`,
+                      left: "var(--xray-overhang)",
+                    }}
+                  >
+                    <span class="message-timeline-xray-token-label">
+                      {formatTokenLabel(displayTokens())}
+                    </span>
+                    <div
+                      class="message-timeline-relative-bar"
+                      style={{ "--segment-weight": relativeWeight() }}
+                    />
+                    <div
+                      class={`message-timeline-absolute-bar${isOverflow() ? " message-timeline-absolute-bar-overflow" : ""}`}
+                      style={{ "--segment-weight": absoluteWeight() }}
+                    />
+                  </div>
+                </Show>
+              )
+            }}
+          </For>
+          </div>
+        </div>
       </Show>
     </div>
   )
 }
- 
+
 export default MessageTimeline

packages/ui/src/components/session/session-view.tsx

@@ -56,12 +56,22 @@ export const SessionView: Component<SessionViewProps> = (props) => {
 
   const attachments = createMemo(() => getAttachments(props.instanceId, props.sessionId))
 
+  const MESSAGE_SCROLL_CACHE_SCOPE = "message-stream"
+
   let promptInputApi: PromptInputApi | null = null
   let pendingPromptText: string | null = null
   let pendingSelectionInsert: { text: string; mode: PromptInsertMode } | null = null
 
   let scrollToBottomHandle: (() => void) | undefined
   let rootRef: HTMLDivElement | undefined
+
+  function shouldScrollToBottomOnActivate() {
+    const current = session()
+    if (!current) return true
+    const snapshot = messageStore().getScrollSnapshot(current.id, MESSAGE_SCROLL_CACHE_SCOPE)
+    return !snapshot || snapshot.atBottom
+  }
+
   function scheduleScrollToBottom() {
     if (!scrollToBottomHandle) return
     requestAnimationFrame(() => {
@@ -70,6 +80,7 @@ export const SessionView: Component<SessionViewProps> = (props) => {
   }
   createEffect(() => {
     if (!props.isActive) return
+    if (!shouldScrollToBottomOnActivate()) return
     scheduleScrollToBottom()
   })
 
@@ -321,7 +332,9 @@ export const SessionView: Component<SessionViewProps> = (props) => {
                 registerScrollToBottom={(fn) => {
                   scrollToBottomHandle = fn
                   if (props.isActive) {
-                    scheduleScrollToBottom()
+                    if (shouldScrollToBottomOnActivate()) {
+                      scheduleScrollToBottom()
+                    }
                   }
                 }}
 

packages/ui/src/components/tool-call/renderers/task.tsx

@@ -178,28 +178,116 @@ export const taskRenderer: ToolRenderer = {
       void loadMessages(instanceId, id)
     })
 
-    const childToolKeys = createMemo(() => {
+    const [childToolKeys, setChildToolKeys] = createSignal<string[]>([])
-      const id = childSessionId()
-      if (!id) return [] as string[]
-      if (!childSessionLoaded()) return [] as string[]
 
-      // React to session changes, but do the scan untracked to avoid
+    let indexedSessionId = ""
-      // subscribing to every message/part node in the store.
+    let indexedMessageCount = 0
+    let indexedMessageTail = ""
+    const indexedPartCounts = new Map<string, number>()
+
+    function resetChildToolIndex(nextSessionId: string) {
+      indexedSessionId = nextSessionId
+      indexedMessageCount = 0
+      indexedMessageTail = ""
+      indexedPartCounts.clear()
+      setChildToolKeys([])
+    }
+
+    function scanMessageToolParts(messageId: string, startIndex: number) {
+      const record = store.getMessage(messageId)
+      if (!record) return [] as string[]
+
+      const partIds = record.partIds
+      const keys: string[] = []
+      for (let idx = startIndex; idx < partIds.length; idx += 1) {
+        const partId = partIds[idx]
+        const entry = record.parts?.[partId]
+        const data = entry?.data
+        if (!data || (data as any).type !== "tool") continue
+        keys.push(`${messageId}::${partId}`)
+      }
+      indexedPartCounts.set(messageId, partIds.length)
+      return keys
+    }
+
+    function fullRescanChildTools(sessionId: string, messageIds: string[]) {
+      indexedSessionId = sessionId
+      indexedMessageCount = messageIds.length
+      indexedMessageTail = messageIds[messageIds.length - 1] ?? ""
+      indexedPartCounts.clear()
+
+      const nextKeys: string[] = []
+      for (const messageId of messageIds) {
+        nextKeys.push(...scanMessageToolParts(messageId, 0))
+      }
+      setChildToolKeys(nextKeys)
+    }
+
+    createEffect(() => {
+      const id = childSessionId()
+      const loaded = childSessionLoaded()
+
+      if (!id || !loaded) {
+        if (indexedSessionId) {
+          resetChildToolIndex("")
+        }
+        return
+      }
+
+      // We use the session revision as the reactive change point, but avoid
+      // rescanning the entire session on every update.
       store.getSessionRevision(id)
-      return untrack(() => {
+
+      untrack(() => {
         const messageIds = store.getSessionMessageIds(id)
-        const keys: string[] = []
+
-        for (const messageId of messageIds) {
+        if (!indexedSessionId || indexedSessionId !== id) {
-          const record = store.getMessage(messageId)
+          fullRescanChildTools(id, messageIds)
-          if (!record) continue
+          return
-          for (const partId of record.partIds) {
+        }
-            const entry = record.parts?.[partId]
+
-            const data = entry?.data
+        // Detect structural changes (reorder/shrink) and fall back to a full rescan.
-            if (!data || (data as any).type !== "tool") continue
+        if (messageIds.length < indexedMessageCount) {
-            keys.push(`${messageId}::${partId}`)
+          fullRescanChildTools(id, messageIds)
+          return
+        }
+        if (indexedMessageCount > 0) {
+          const expectedTailIndex = indexedMessageCount - 1
+          if (expectedTailIndex >= 0 && messageIds[expectedTailIndex] !== indexedMessageTail) {
+            fullRescanChildTools(id, messageIds)
+            return
           }
         }
-        return keys
+
+        const appendedKeys: string[] = []
+
+        // Scan any new messages appended since last index.
+        for (let idx = indexedMessageCount; idx < messageIds.length; idx += 1) {
+          const messageId = messageIds[idx]
+          appendedKeys.push(...scanMessageToolParts(messageId, 0))
+        }
+
+        // Scan a small window of recent messages for newly appended parts.
+        // Deltas typically affect the most recent tool call, so this avoids
+        // iterating every message on every revision.
+        const existingCount = Math.min(indexedMessageCount, messageIds.length)
+        const windowStart = Math.max(0, existingCount - 3)
+        for (let idx = windowStart; idx < existingCount; idx += 1) {
+          const messageId = messageIds[idx]
+          const previousPartCount = indexedPartCounts.get(messageId) ?? 0
+          const record = store.getMessage(messageId)
+          const nextPartCount = record?.partIds.length ?? 0
+          if (nextPartCount > previousPartCount) {
+            appendedKeys.push(...scanMessageToolParts(messageId, previousPartCount))
+          }
+        }
+
+        indexedMessageCount = messageIds.length
+        indexedMessageTail = messageIds[messageIds.length - 1] ?? ""
+
+        if (appendedKeys.length > 0) {
+          setChildToolKeys((prev) => [...prev, ...appendedKeys])
+        }
       })
     })
     const promptContent = createMemo(() => {
@@ -354,7 +442,7 @@ export const taskRenderer: ToolRenderer = {
                     scrollHelpers ? (event) => scrollHelpers.handleScroll(event as Event & { currentTarget: HTMLDivElement }) : undefined
                   }
                 >
-                  <div class="tool-call-task-summary">
+                    <div class="tool-call-task-summary">
                     <For each={childToolKeys()}>
                       {(key) => (
                         <Show when={renderToolCall}>

packages/ui/src/components/virtual-follow-list.tsx

@@ -0,0 +1,972 @@
+import { Index, Show, createEffect, createMemo, createSignal, onCleanup, type Accessor, type JSX } from "solid-js"
+import VirtualItem, { type VirtualItemHeightChangeMeta } from "./virtual-item"
+
+const DEFAULT_SCROLL_SENTINEL_MARGIN_PX = 48
+const USER_SCROLL_INTENT_WINDOW_MS = 600
+const SCROLL_INTENT_KEYS = new Set(["ArrowUp", "ArrowDown", "PageUp", "PageDown", "Home", "End", " ", "Spacebar"])
+
+export interface VirtualFollowListApi {
+  scrollToTop: (opts?: { immediate?: boolean }) => void
+  scrollToBottom: (opts?: { immediate?: boolean; suppressAutoAnchor?: boolean }) => void
+  scrollToKey: (
+    key: string,
+    opts?: { behavior?: ScrollBehavior; block?: ScrollLogicalPosition; setAutoScroll?: boolean },
+  ) => void
+  notifyContentRendered: () => void
+  setAutoScroll: (enabled: boolean) => void
+  getAutoScroll: () => boolean
+  getScrollElement: () => HTMLDivElement | undefined
+  getShellElement: () => HTMLDivElement | undefined
+}
+
+export interface VirtualFollowListState {
+  autoScroll: Accessor<boolean>
+  showScrollTopButton: Accessor<boolean>
+  showScrollBottomButton: Accessor<boolean>
+  scrollButtonsCount: Accessor<number>
+  activeKey: Accessor<string | null>
+}
+
+export interface VirtualFollowListProps<T> {
+  items: Accessor<T[]>
+  getKey: (item: T, index: number) => string
+  renderItem: (item: T, index: number) => JSX.Element
+
+  /**
+   * Optional stable DOM id for the item wrapper.
+   * Defaults to the key itself.
+   */
+  getAnchorId?: (key: string) => string
+
+  /**
+   * Decode an item key from an observed wrapper element id.
+   * Defaults to identity.
+   */
+  getKeyFromAnchorId?: (anchorId: string) => string
+
+  overscanPx?: number
+  scrollSentinelMarginPx?: number
+  virtualizationEnabled?: Accessor<boolean>
+  suspendMeasurements?: Accessor<boolean>
+  loading?: Accessor<boolean>
+  isActive?: Accessor<boolean>
+
+  /**
+   * When switching back to an inactive (cached) pane, the list historically
+   * re-pinned to the bottom if autoScroll was enabled.
+   *
+   * Disable this to preserve the existing scroll position across pane switches.
+   */
+  scrollToBottomOnActivate?: Accessor<boolean>
+
+  /**
+   * Controls whether the list should scroll to bottom the first time items
+   * appear (default behavior for chat streams).
+   *
+   * Set to false when an outer component restores scroll from a cache.
+   */
+  initialScrollToBottom?: Accessor<boolean>
+
+  /**
+   * Initial value for the internal autoScroll signal.
+   * Useful when restoring scroll state (e.g. start in non-follow mode).
+   */
+  initialAutoScroll?: Accessor<boolean>
+
+  /**
+   * When this value changes, the list resets internal follow/anchor state.
+   * Useful when reusing the same list instance across different datasets.
+   */
+  resetKey?: Accessor<string | number>
+
+  /**
+   * If this value changes and autoScroll is enabled, the list will
+   * anchor-scroll to the bottom (unless suppressed).
+   */
+  followToken?: Accessor<string | number>
+
+  /**
+   * Optional hooks to render content inside the scroll container.
+   * Useful for empty/loading states that should scroll with the list.
+   */
+  renderBeforeItems?: Accessor<JSX.Element>
+
+  /**
+   * Render content inside the shell, above timeline/sidebar layers.
+   * (Quote popovers, etc.)
+   */
+  renderOverlay?: Accessor<JSX.Element>
+
+  /**
+   * Provide localized labels for built-in controls.
+   */
+  scrollToTopAriaLabel?: Accessor<string>
+  scrollToBottomAriaLabel?: Accessor<string>
+
+  /**
+   * Receive element refs for external logic (selection, geometry, etc.)
+   */
+  onScrollElementChange?: (element: HTMLDivElement | undefined) => void
+  onShellElementChange?: (element: HTMLDivElement | undefined) => void
+
+  /**
+   * Callbacks for consumers.
+   */
+  onScroll?: () => void
+  onMouseUp?: (event: MouseEvent) => void
+  onClick?: (event: MouseEvent) => void
+  onActiveKeyChange?: (key: string | null) => void
+  registerApi?: (api: VirtualFollowListApi) => void
+  registerState?: (state: VirtualFollowListState) => void
+  renderControls?: (state: VirtualFollowListState, api: VirtualFollowListApi) => JSX.Element
+}
+
+export default function VirtualFollowList<T>(props: VirtualFollowListProps<T>) {
+  const getAnchorId = (key: string) => (props.getAnchorId ? props.getAnchorId(key) : key)
+  const getKeyFromAnchorId = (anchorId: string) => (props.getKeyFromAnchorId ? props.getKeyFromAnchorId(anchorId) : anchorId)
+
+  const [scrollElement, setScrollElement] = createSignal<HTMLDivElement | undefined>()
+  const [shellElement, setShellElement] = createSignal<HTMLDivElement | undefined>()
+  const [topSentinel, setTopSentinel] = createSignal<HTMLDivElement | null>(null)
+  const [bottomSentinelSignal, setBottomSentinelSignal] = createSignal<HTMLDivElement | null>(null)
+  const bottomSentinel = () => bottomSentinelSignal()
+
+  const isActive = () => (props.isActive ? props.isActive() : true)
+  const scrollToBottomOnActivate = () => (props.scrollToBottomOnActivate ? props.scrollToBottomOnActivate() : true)
+  const initialScrollToBottom = () => (props.initialScrollToBottom ? props.initialScrollToBottom() : true)
+  const initialAutoScroll = () => (props.initialAutoScroll ? props.initialAutoScroll() : true)
+  const isLoading = () => Boolean(props.loading?.())
+  const virtualizationEnabled = () => (props.virtualizationEnabled ? props.virtualizationEnabled() : true)
+  const measurementsSuspended = () => Boolean(props.suspendMeasurements?.())
+
+  const [autoScroll, setAutoScroll] = createSignal(Boolean(initialAutoScroll()))
+  const [showScrollTopButton, setShowScrollTopButton] = createSignal(false)
+  const [showScrollBottomButton, setShowScrollBottomButton] = createSignal(false)
+  const [topSentinelVisible, setTopSentinelVisible] = createSignal(true)
+  const [bottomSentinelVisible, setBottomSentinelVisible] = createSignal(true)
+  const [activeKey, setActiveKey] = createSignal<string | null>(null)
+
+  const [anchorLock, setAnchorLock] = createSignal<{ key: string; block: ScrollLogicalPosition } | null>(null)
+
+  const scrollButtonsCount = createMemo(() => (showScrollTopButton() ? 1 : 0) + (showScrollBottomButton() ? 1 : 0))
+
+  let containerRef: HTMLDivElement | undefined
+  let shellRef: HTMLDivElement | undefined
+  let pendingScrollFrame: number | null = null
+  let pendingAnchorScroll: number | null = null
+  let pendingAnchorCorrectionFrame: number | null = null
+  let pendingScrollCompensationScheduled = false
+  let pendingScrollCompensations = new Map<string, number>()
+  let scrollCompensationGen = 0
+  let pendingActiveScroll = false
+  let suppressAutoScrollOnce = false
+  let pendingInitialScroll = true
+  let scrollToBottomFrame: number | null = null
+  let scrollToBottomDelayedFrame: number | null = null
+
+  let lastKnownScrollTop = 0
+  let lastUserScrollIntentDirection: "up" | "down" | null = null
+
+  let userScrollIntentUntil = 0
+  let detachScrollIntentListeners: (() => void) | undefined
+
+  let lastResetKey: string | number | undefined
+
+  const state: VirtualFollowListState = {
+    autoScroll,
+    showScrollTopButton,
+    showScrollBottomButton,
+    scrollButtonsCount,
+    activeKey,
+  }
+
+  function markUserScrollIntent(direction?: "up" | "down" | null) {
+    const now = typeof performance !== "undefined" ? performance.now() : Date.now()
+    userScrollIntentUntil = now + USER_SCROLL_INTENT_WINDOW_MS
+    if (direction) {
+      lastUserScrollIntentDirection = direction
+    }
+  }
+
+  function hasUserScrollIntent() {
+    const now = typeof performance !== "undefined" ? performance.now() : Date.now()
+    return now <= userScrollIntentUntil
+  }
+
+  function attachScrollIntentListeners(element: HTMLDivElement | undefined) {
+    if (detachScrollIntentListeners) {
+      detachScrollIntentListeners()
+      detachScrollIntentListeners = undefined
+    }
+    if (!element) return
+    const handleWheelIntent = (event: WheelEvent) => {
+      const dir: "up" | "down" | null = event.deltaY < 0 ? "up" : event.deltaY > 0 ? "down" : null
+      markUserScrollIntent(dir)
+    }
+    const handlePointerIntent = () => markUserScrollIntent(null)
+    const handleKeyIntent = (event: KeyboardEvent) => {
+      if (!SCROLL_INTENT_KEYS.has(event.key)) return
+      const key = event.key
+      const dir: "up" | "down" | null =
+        key === "ArrowUp" || key === "PageUp" || key === "Home"
+          ? "up"
+          : key === "ArrowDown" || key === "PageDown" || key === "End"
+            ? "down"
+            : key === " " || key === "Spacebar"
+              ? event.shiftKey
+                ? "up"
+                : "down"
+              : null
+      markUserScrollIntent(dir)
+    }
+    element.addEventListener("wheel", handleWheelIntent, { passive: true })
+    element.addEventListener("pointerdown", handlePointerIntent)
+    element.addEventListener("touchstart", handlePointerIntent, { passive: true })
+    element.addEventListener("keydown", handleKeyIntent)
+    detachScrollIntentListeners = () => {
+      element.removeEventListener("wheel", handleWheelIntent)
+      element.removeEventListener("pointerdown", handlePointerIntent)
+      element.removeEventListener("touchstart", handlePointerIntent)
+      element.removeEventListener("keydown", handleKeyIntent)
+    }
+  }
+
+  function updateScrollIndicatorsFromVisibility() {
+    const hasItems = props.items().length > 0
+    const bottomVisible = bottomSentinelVisible()
+    const topVisible = topSentinelVisible()
+    setShowScrollBottomButton(hasItems && !bottomVisible)
+    setShowScrollTopButton(hasItems && !topVisible)
+  }
+
+  function clearScrollToBottomFrames() {
+    if (scrollToBottomFrame !== null) {
+      cancelAnimationFrame(scrollToBottomFrame)
+      scrollToBottomFrame = null
+    }
+    if (scrollToBottomDelayedFrame !== null) {
+      cancelAnimationFrame(scrollToBottomDelayedFrame)
+      scrollToBottomDelayedFrame = null
+    }
+  }
+
+  function scrollToBottom(immediate = false, options?: { suppressAutoAnchor?: boolean }) {
+    if (!containerRef) return
+    if (anchorLock()) {
+      clearAnchorLock()
+    }
+    const sentinel = bottomSentinel()
+    const behavior: ScrollBehavior = immediate ? "auto" : "smooth"
+    const suppressAutoAnchor = options?.suppressAutoAnchor ?? !immediate
+    if (suppressAutoAnchor) {
+      suppressAutoScrollOnce = true
+    }
+    sentinel?.scrollIntoView({ block: "end", inline: "nearest", behavior })
+    setAutoScroll(true)
+  }
+
+  function requestScrollToBottom(immediate = true) {
+    if (!isActive()) {
+      pendingActiveScroll = true
+      return
+    }
+    if (!containerRef || !bottomSentinel()) {
+      pendingActiveScroll = true
+      return
+    }
+    pendingActiveScroll = false
+    clearScrollToBottomFrames()
+    scrollToBottomFrame = requestAnimationFrame(() => {
+      scrollToBottomFrame = null
+      scrollToBottomDelayedFrame = requestAnimationFrame(() => {
+        scrollToBottomDelayedFrame = null
+        scrollToBottom(immediate)
+      })
+    })
+  }
+
+  function resolvePendingActiveScroll() {
+    if (!pendingActiveScroll) return
+    if (!isActive()) return
+    requestScrollToBottom(true)
+  }
+
+  function scrollToTop(immediate = false) {
+    if (!containerRef) return
+    const behavior: ScrollBehavior = immediate ? "auto" : "smooth"
+    if (anchorLock()) {
+      clearAnchorLock()
+    }
+    setAutoScroll(false)
+    topSentinel()?.scrollIntoView({ block: "start", inline: "nearest", behavior })
+  }
+
+  function scheduleAnchorScroll(immediate = false) {
+    if (!autoScroll()) return
+    if (!isActive()) {
+      pendingActiveScroll = true
+      return
+    }
+    const sentinel = bottomSentinel()
+    if (!sentinel) {
+      pendingActiveScroll = true
+      return
+    }
+    if (pendingAnchorScroll !== null) {
+      cancelAnimationFrame(pendingAnchorScroll)
+      pendingAnchorScroll = null
+    }
+    pendingAnchorScroll = requestAnimationFrame(() => {
+      pendingAnchorScroll = null
+      sentinel.scrollIntoView({ block: "end", inline: "nearest", behavior: immediate ? "auto" : "smooth" })
+    })
+  }
+
+  function clearAnchorLock() {
+    setAnchorLock(null)
+    if (pendingAnchorCorrectionFrame !== null) {
+      cancelAnimationFrame(pendingAnchorCorrectionFrame)
+      pendingAnchorCorrectionFrame = null
+    }
+  }
+
+  function computeDesiredOffset(block: ScrollLogicalPosition, container: HTMLElement, anchorRect: DOMRect) {
+    if (block === "end") {
+      return Math.max(0, container.clientHeight - anchorRect.height)
+    }
+    if (block === "center") {
+      return Math.max(0, container.clientHeight / 2 - anchorRect.height / 2)
+    }
+    // Default to start.
+    return 0
+  }
+
+  function applyAnchorCorrection() {
+    const lock = anchorLock()
+    if (!lock) return
+    if (autoScroll()) return
+    if (!containerRef) return
+    if (typeof document === "undefined") return
+
+    const anchorId = getAnchorId(lock.key)
+    const anchor = document.getElementById(anchorId)
+    if (!anchor) return
+
+    const containerRect = containerRef.getBoundingClientRect()
+    const anchorRect = anchor.getBoundingClientRect()
+    const currentOffset = anchorRect.top - containerRect.top
+    const desiredOffset = computeDesiredOffset(lock.block, containerRef, anchorRect)
+    const delta = currentOffset - desiredOffset
+    if (!Number.isFinite(delta) || Math.abs(delta) < 0.5) {
+      return
+    }
+    const nextTop = containerRef.scrollTop + delta
+    const maxScrollTop = Math.max(containerRef.scrollHeight - containerRef.clientHeight, 0)
+    containerRef.scrollTop = Math.min(maxScrollTop, Math.max(0, nextTop))
+  }
+
+  function scheduleAnchorCorrection() {
+    if (pendingAnchorCorrectionFrame !== null) return
+    pendingAnchorCorrectionFrame = requestAnimationFrame(() => {
+      pendingAnchorCorrectionFrame = null
+      applyAnchorCorrection()
+    })
+  }
+
+  function handleContentRendered() {
+    if (autoScroll() && !anchorLock()) {
+      scheduleAutoPinToBottom()
+      return
+    }
+    if (anchorLock() && !autoScroll()) {
+      scheduleAnchorCorrection()
+      return
+    }
+  }
+
+  function handleScroll() {
+    if (!containerRef) return
+    if (pendingScrollFrame !== null) {
+      cancelAnimationFrame(pendingScrollFrame)
+    }
+    const isUserScroll = hasUserScrollIntent()
+    pendingScrollFrame = requestAnimationFrame(() => {
+      pendingScrollFrame = null
+      if (!containerRef) return
+      const previousScrollTop = lastKnownScrollTop
+      const currentScrollTop = containerRef.scrollTop
+      const deltaScrollTop = currentScrollTop - previousScrollTop
+      if (currentScrollTop !== lastKnownScrollTop) {
+        lastKnownScrollTop = currentScrollTop
+      }
+      const atBottom = bottomSentinelVisible()
+
+      const beforeAutoScroll = autoScroll()
+
+      const inferredDirection: "up" | "down" | null =
+        lastUserScrollIntentDirection ?? (deltaScrollTop < 0 ? "up" : deltaScrollTop > 0 ? "down" : null)
+
+      // If the user scrolls manually, exit key-anchored mode.
+      if (isUserScroll && anchorLock()) {
+        clearAnchorLock()
+      }
+
+      if (isUserScroll) {
+        // If the user is actively scrolling upward, exit follow-to-bottom mode
+        // immediately. The bottom sentinel can remain "visible" for a short
+        // distance due to its observer margin, which otherwise keeps autoScroll
+        // enabled and makes the list feel stuck.
+        if (inferredDirection === "up" && deltaScrollTop < -0.5 && autoScroll()) {
+          if (pendingAnchorScroll !== null) {
+            cancelAnimationFrame(pendingAnchorScroll)
+            pendingAnchorScroll = null
+          }
+          setAutoScroll(false)
+        }
+
+        // Do not re-enable follow mode while the user's current scroll intent
+        // is upward. This prevents transient anchor/pin scrolls from pulling
+        // the list back into autoScroll(true).
+        if (inferredDirection !== "up") {
+          if (atBottom) {
+            if (!autoScroll()) setAutoScroll(true)
+          } else if (autoScroll()) {
+            setAutoScroll(false)
+          }
+        } else if (!atBottom && autoScroll()) {
+          // If the user is scrolling up and we are no longer at the bottom,
+          // ensure follow mode is disabled.
+          setAutoScroll(false)
+        }
+      }
+
+      props.onScroll?.()
+    })
+  }
+
+  function setContainerRef(element: HTMLDivElement | null) {
+    containerRef = element || undefined
+    setScrollElement(containerRef)
+    props.onScrollElementChange?.(containerRef)
+    attachScrollIntentListeners(containerRef)
+    lastKnownScrollTop = containerRef?.scrollTop ?? 0
+    lastUserScrollIntentDirection = null
+    if (!containerRef) {
+      return
+    }
+    resolvePendingActiveScroll()
+  }
+
+  function scheduleScrollCompensation(key: string, delta: number) {
+    if (!containerRef) return
+    if (!delta || !Number.isFinite(delta)) return
+    if (typeof document === "undefined") return
+
+    // Only compensate while the user scrolls upward (testing default).
+    if (!hasUserScrollIntent() || lastUserScrollIntentDirection !== "up") return
+    if (autoScroll() || anchorLock()) return
+
+    const anchorId = getAnchorId(key)
+    const anchor = document.getElementById(anchorId)
+    if (!anchor) return
+    const containerRect = containerRef.getBoundingClientRect()
+    const rect = anchor.getBoundingClientRect()
+    // Determine whether the item was fully above the viewport *before* the
+    // height delta applied. Items can expand downward into the viewport; in that
+    // case we still need to compensate to keep existing visible content stable.
+    const bottomAfter = rect.bottom
+    const bottomBefore = bottomAfter - delta
+    const wasAboveViewport = bottomBefore < containerRect.top
+    if (!wasAboveViewport) return
+
+    const next = (pendingScrollCompensations.get(key) ?? 0) + delta
+    pendingScrollCompensations.set(key, next)
+
+    if (pendingScrollCompensationScheduled) return
+    pendingScrollCompensationScheduled = true
+    const gen = scrollCompensationGen
+
+    // Flush in a microtask so compensation lands before the next paint.
+    queueMicrotask(() => {
+      if (gen !== scrollCompensationGen) return
+      pendingScrollCompensationScheduled = false
+      if (!containerRef) return
+      if (!hasUserScrollIntent() || lastUserScrollIntentDirection !== "up") {
+        pendingScrollCompensations = new Map()
+        return
+      }
+      if (autoScroll() || anchorLock()) {
+        pendingScrollCompensations = new Map()
+        return
+      }
+
+      let applied = 0
+      let count = 0
+      for (const pendingDelta of pendingScrollCompensations.values()) {
+        if (!pendingDelta) continue
+        applied += pendingDelta
+        count += 1
+      }
+      pendingScrollCompensations = new Map()
+      if (!applied) return
+
+      const before = containerRef.scrollTop
+      const maxScrollTop = Math.max(containerRef.scrollHeight - containerRef.clientHeight, 0)
+      const nextTop = Math.min(maxScrollTop, Math.max(0, before + applied))
+      if (nextTop !== before) {
+        containerRef.scrollTop = nextTop
+        lastKnownScrollTop = nextTop
+      }
+    })
+  }
+
+  let pendingAutoPin = false
+  let pendingAutoPinFrame: number | null = null
+
+  function clearPendingAutoPinFrame() {
+    if (pendingAutoPinFrame !== null) {
+      cancelAnimationFrame(pendingAutoPinFrame)
+      pendingAutoPinFrame = null
+    }
+  }
+
+  function applyAutoPinToBottom() {
+    if (!containerRef) return false
+    if (!autoScroll()) return false
+    if (anchorLock()) return false
+
+    const maxScrollTop = Math.max(containerRef.scrollHeight - containerRef.clientHeight, 0)
+    if (containerRef.scrollTop !== maxScrollTop) {
+      containerRef.scrollTop = maxScrollTop
+      lastKnownScrollTop = maxScrollTop
+    }
+    return true
+  }
+
+  function scheduleAutoPinToBottom() {
+    if (!containerRef) return
+    if (pendingAutoPin) return
+    pendingAutoPin = true
+    clearPendingAutoPinFrame()
+    const gen = scrollCompensationGen
+
+    // Flush in a microtask so adjustments land before the next paint,
+    // then re-apply on the next two frames to catch deferred layout.
+    queueMicrotask(() => {
+      if (gen !== scrollCompensationGen) return
+      pendingAutoPin = false
+      if (!applyAutoPinToBottom()) return
+      pendingAutoPinFrame = requestAnimationFrame(() => {
+        pendingAutoPinFrame = null
+        if (gen !== scrollCompensationGen) return
+        if (!applyAutoPinToBottom()) return
+        pendingAutoPinFrame = requestAnimationFrame(() => {
+          pendingAutoPinFrame = null
+          if (gen !== scrollCompensationGen) return
+          applyAutoPinToBottom()
+        })
+      })
+    })
+  }
+
+  function setShellRef(element: HTMLDivElement | null) {
+    shellRef = element || undefined
+    setShellElement(shellRef)
+    props.onShellElementChange?.(shellRef)
+  }
+
+  function setBottomSentinel(element: HTMLDivElement | null) {
+    setBottomSentinelSignal(element)
+    resolvePendingActiveScroll()
+  }
+
+  const api: VirtualFollowListApi = {
+    scrollToTop: (opts) => scrollToTop(Boolean(opts?.immediate)),
+    scrollToBottom: (opts) => scrollToBottom(Boolean(opts?.immediate), { suppressAutoAnchor: opts?.suppressAutoAnchor }),
+    scrollToKey: (key, opts) => {
+      if (typeof document === "undefined") return
+      const anchorId = getAnchorId(key)
+      const behavior = opts?.behavior ?? "smooth"
+      const block = opts?.block ?? "start"
+      const nextAutoScroll = opts?.setAutoScroll ?? false
+      setAutoScroll(nextAutoScroll)
+      if (!nextAutoScroll) {
+        if (anchorLock()) {
+          clearAnchorLock()
+        }
+        setAnchorLock({ key, block })
+      } else {
+        if (anchorLock()) {
+          clearAnchorLock()
+        }
+      }
+      const first = document.getElementById(anchorId)
+      first?.scrollIntoView({ block, behavior })
+      // When using virtualization, the placeholder height can be stale until the
+      // item mounts/measures. Re-run scrollIntoView() on the next frame to
+      // stabilize the final position.
+      requestAnimationFrame(() => {
+        const second = document.getElementById(anchorId)
+        second?.scrollIntoView({ block, behavior })
+      })
+    },
+    notifyContentRendered: () => handleContentRendered(),
+    setAutoScroll: (enabled) => setAutoScroll(Boolean(enabled)),
+    getAutoScroll: () => autoScroll(),
+    getScrollElement: () => scrollElement(),
+    getShellElement: () => shellElement(),
+  }
+
+  createEffect(() => {
+    props.registerApi?.(api)
+  })
+
+  createEffect(() => {
+    props.registerState?.(state)
+  })
+
+  createEffect(() => {
+    const nextKey = props.resetKey?.()
+    if (nextKey === undefined) return
+    if (lastResetKey === undefined) {
+      lastResetKey = nextKey
+      return
+    }
+    if (nextKey === lastResetKey) return
+    lastResetKey = nextKey
+
+    // Reset internal state when consumers swap datasets (e.g. session switch).
+    if (pendingScrollFrame !== null) {
+      cancelAnimationFrame(pendingScrollFrame)
+      pendingScrollFrame = null
+    }
+    if (pendingAnchorScroll !== null) {
+      cancelAnimationFrame(pendingAnchorScroll)
+      pendingAnchorScroll = null
+    }
+    if (pendingAnchorCorrectionFrame !== null) {
+      cancelAnimationFrame(pendingAnchorCorrectionFrame)
+      pendingAnchorCorrectionFrame = null
+    }
+    clearScrollToBottomFrames()
+
+    scrollCompensationGen += 1
+    pendingScrollCompensationScheduled = false
+    pendingScrollCompensations = new Map()
+    pendingAutoPin = false
+    clearPendingAutoPinFrame()
+
+    suppressAutoScrollOnce = false
+    pendingActiveScroll = false
+    pendingInitialScroll = true
+
+    setAnchorLock(null)
+    setActiveKey(null)
+    setShowScrollTopButton(false)
+    setShowScrollBottomButton(false)
+    setTopSentinelVisible(true)
+    setBottomSentinelVisible(true)
+    setAutoScroll(Boolean(initialAutoScroll()))
+
+    lastKnownScrollTop = containerRef?.scrollTop ?? 0
+    lastUserScrollIntentDirection = null
+  })
+
+  let lastActiveState = false
+  createEffect(() => {
+    const active = isActive()
+    if (active) {
+      resolvePendingActiveScroll()
+      if (!lastActiveState && autoScroll() && scrollToBottomOnActivate()) {
+        requestScrollToBottom(true)
+
+        // When switching back to a cached session pane, items can mount/measure
+        // after the initial scroll jump. Re-pin once layout settles so the
+        // viewport stays at the bottom.
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            scheduleAutoPinToBottom()
+          })
+        })
+      }
+    } else if (autoScroll() && scrollToBottomOnActivate()) {
+      pendingActiveScroll = true
+    }
+    lastActiveState = active
+  })
+
+  createEffect(() => {
+    const loading = isLoading()
+    if (loading) {
+      // Keep the initial scroll pending while loading so we can
+      // anchor to the bottom as soon as items appear.
+      pendingInitialScroll = true
+    }
+
+    if (!pendingInitialScroll) return
+
+    const container = scrollElement()
+    const sentinel = bottomSentinel()
+    if (!container || !sentinel || props.items().length === 0) return
+
+    if (!initialScrollToBottom()) {
+      // An outer component is responsible for restoring scroll.
+      pendingInitialScroll = false
+      return
+    }
+
+    // Ensure we're in follow-to-bottom mode for the initial position.
+    if (anchorLock()) {
+      clearAnchorLock()
+    }
+    setAutoScroll(true)
+
+    pendingInitialScroll = false
+    // Scroll synchronously so the first paint prefers bottom content.
+    scrollToBottom(true)
+  })
+
+  let previousFollowToken: string | number | undefined
+  createEffect(() => {
+    const token = props.followToken?.()
+    if (token === undefined) {
+      previousFollowToken = token
+      return
+    }
+    if (previousFollowToken === undefined) {
+      previousFollowToken = token
+      return
+    }
+    if (token === previousFollowToken) {
+      return
+    }
+    previousFollowToken = token
+    if (suppressAutoScrollOnce) {
+      suppressAutoScrollOnce = false
+      return
+    }
+    if (autoScroll()) {
+      scheduleAutoPinToBottom()
+      return
+    }
+    if (anchorLock() && !autoScroll()) {
+      scheduleAnchorCorrection()
+    }
+  })
+
+  // Drop anchor lock if the anchored key is removed.
+  createEffect(() => {
+    const lock = anchorLock()
+    if (!lock) return
+    const keys = props.items().map((item, idx) => props.getKey(item, idx))
+    if (!keys.includes(lock.key)) {
+      clearAnchorLock()
+    }
+  })
+
+  createEffect(() => {
+    if (props.items().length === 0) {
+      setShowScrollTopButton(false)
+      setShowScrollBottomButton(false)
+      setAutoScroll(true)
+      return
+    }
+    updateScrollIndicatorsFromVisibility()
+  })
+
+  createEffect(() => {
+    const container = scrollElement()
+    const topTarget = topSentinel()
+    const bottomTarget = bottomSentinel()
+    if (!container || !topTarget || !bottomTarget) return
+    if (typeof IntersectionObserver === "undefined") return
+
+    const margin = props.scrollSentinelMarginPx ?? DEFAULT_SCROLL_SENTINEL_MARGIN_PX
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        let visibilityChanged = false
+        for (const entry of entries) {
+          if (entry.target === topTarget) {
+            setTopSentinelVisible(entry.isIntersecting)
+            visibilityChanged = true
+          } else if (entry.target === bottomTarget) {
+            setBottomSentinelVisible(entry.isIntersecting)
+            visibilityChanged = true
+          }
+        }
+        if (visibilityChanged) {
+          updateScrollIndicatorsFromVisibility()
+        }
+      },
+      { root: container, threshold: 0, rootMargin: `${margin}px 0px ${margin}px 0px` },
+    )
+    observer.observe(topTarget)
+    observer.observe(bottomTarget)
+    onCleanup(() => observer.disconnect())
+  })
+
+  createEffect(() => {
+    const container = scrollElement()
+    const items = props.items()
+    if (!container || items.length === 0) return
+    if (typeof document === "undefined") return
+    if (typeof IntersectionObserver === "undefined") return
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        let best: IntersectionObserverEntry | null = null
+        for (const entry of entries) {
+          if (!entry.isIntersecting) continue
+          if (!best || entry.boundingClientRect.top < best.boundingClientRect.top) {
+            best = entry
+          }
+        }
+        if (best) {
+          const anchorId = (best.target as HTMLElement).id
+          const key = getKeyFromAnchorId(anchorId)
+          setActiveKey((current) => (current === key ? current : key))
+        }
+      },
+      { root: container, rootMargin: "-10% 0px -80% 0px", threshold: 0 },
+    )
+
+    const anchorIds = items.map((item, idx) => getAnchorId(props.getKey(item, idx)))
+    anchorIds.forEach((anchorId) => {
+      const anchor = document.getElementById(anchorId)
+      if (anchor) observer.observe(anchor)
+    })
+
+    onCleanup(() => observer.disconnect())
+  })
+
+  createEffect(() => {
+    const key = activeKey()
+    props.onActiveKeyChange?.(key)
+  })
+
+  onCleanup(() => {
+    if (pendingScrollFrame !== null) {
+      cancelAnimationFrame(pendingScrollFrame)
+    }
+    if (pendingAnchorScroll !== null) {
+      cancelAnimationFrame(pendingAnchorScroll)
+    }
+    if (pendingAnchorCorrectionFrame !== null) {
+      cancelAnimationFrame(pendingAnchorCorrectionFrame)
+    }
+    scrollCompensationGen += 1
+    pendingScrollCompensationScheduled = false
+    pendingScrollCompensations = new Map()
+    clearPendingAutoPinFrame()
+    clearScrollToBottomFrames()
+    if (detachScrollIntentListeners) {
+      detachScrollIntentListeners()
+    }
+  })
+
+  const controls = () => {
+    if (props.renderControls) {
+      return props.renderControls(state, api)
+    }
+
+    // Avoid hardcoded user-visible strings; require consumers to supply
+    // localized aria labels when using the default controls.
+    if (!props.scrollToTopAriaLabel || !props.scrollToBottomAriaLabel) {
+      return null
+    }
+
+    const labelTop = props.scrollToTopAriaLabel()
+    const labelBottom = props.scrollToBottomAriaLabel()
+    return (
+      <Show when={showScrollTopButton() || showScrollBottomButton()}>
+        <div class="message-scroll-button-wrapper">
+          <Show when={showScrollTopButton()}>
+            <button type="button" class="message-scroll-button" onClick={() => scrollToTop()} aria-label={labelTop}>
+              <span class="message-scroll-icon" aria-hidden="true">
+                ↑
+              </span>
+            </button>
+          </Show>
+          <Show when={showScrollBottomButton()}>
+            <button
+              type="button"
+              class="message-scroll-button"
+              onClick={() => scrollToBottom(false, { suppressAutoAnchor: false })}
+              aria-label={labelBottom}
+            >
+              <span class="message-scroll-icon" aria-hidden="true">
+                ↓
+              </span>
+            </button>
+          </Show>
+        </div>
+      </Show>
+    )
+  }
+
+  return (
+    <div class="message-stream-shell" ref={setShellRef}>
+      <div
+        class="message-stream"
+        ref={setContainerRef}
+        onScroll={handleScroll}
+        onMouseUp={(event) => props.onMouseUp?.(event)}
+        onClick={(event) => props.onClick?.(event)}
+      >
+        <div ref={setTopSentinel} aria-hidden="true" style={{ height: "1px" }} />
+        {props.renderBeforeItems?.()}
+        <Index each={props.items()}>
+          {(item, index) => {
+            const key = () => props.getKey(item(), index)
+            const anchorId = () => getAnchorId(key())
+            const overscanPx = props.overscanPx ?? 800
+            const suspendMeasurements = () => measurementsSuspended() || !isActive()
+            const itemVirtualizationEnabled = () => virtualizationEnabled() && !autoScroll()
+            return (
+              <VirtualItem
+                id={anchorId()}
+                cacheKey={key()}
+                scrollContainer={scrollElement}
+                threshold={overscanPx}
+                placeholderClass="message-stream-placeholder"
+                virtualizationEnabled={itemVirtualizationEnabled}
+                suspendMeasurements={suspendMeasurements}
+                onHeightChange={(nextHeight, previousHeight, meta: VirtualItemHeightChangeMeta) => {
+                  const delta = nextHeight - previousHeight
+
+                  // Follow mode: keep the viewport pinned to the bottom as
+                  // items mount/measure and change height.
+                  if (delta && autoScroll() && !anchorLock()) {
+                    scheduleAutoPinToBottom()
+                    return
+                  }
+
+                  // Key-anchored mode: keep the target key in view when
+                  // items above it mount/measure and shift layout.
+                  if (anchorLock() && !autoScroll()) {
+                    scheduleAnchorCorrection()
+                    return
+                  }
+
+                  // Free-scroll mode: if items above the viewport change height
+                  // while scrolling upward, compensate scrollTop so visible
+                  // content stays stable.
+                  if (delta) {
+                    if (meta.isStaleCacheCorrection) return
+                    scheduleScrollCompensation(key(), delta)
+                  }
+                }}
+              >{() => props.renderItem(item(), index)}</VirtualItem>
+            )
+          }}
+        </Index>
+        <div ref={setBottomSentinel} aria-hidden="true" style={{ height: "1px" }} />
+      </div>
+
+      {controls()}
+
+      {props.renderOverlay?.()}
+    </div>
+  )
+}

packages/ui/src/components/virtual-item.tsx

@@ -1,9 +1,9 @@
-import { JSX, Accessor, children as resolveChildren, createEffect, createMemo, createSignal, onCleanup } from "solid-js"
+import { JSX, Accessor, createEffect, createMemo, createSignal, onCleanup } from "solid-js"
 
 const sizeCache = new Map<string, number>()
 const DEFAULT_MARGIN_PX = 600
-const MIN_PLACEHOLDER_HEIGHT = 32
+const MIN_PLACEHOLDER_HEIGHT = 400
-const VISIBILITY_BUFFER_PX = 48
+const VISIBILITY_BUFFER_PX = 0
 
 type ObserverRoot = Element | Document | null
 
@@ -54,11 +54,64 @@ function shouldRenderEntry(entry: IntersectionObserverEntry) {
   if (!rootBounds) {
     return entry.isIntersecting
   }
-  const distanceAbove = rootBounds.top - entry.boundingClientRect.bottom
+
-  const distanceBelow = entry.boundingClientRect.top - rootBounds.bottom
+  // Above the root: compare bottom edge to root top.
-  if (distanceAbove > VISIBILITY_BUFFER_PX || distanceBelow > VISIBILITY_BUFFER_PX) {
+  if (entry.boundingClientRect.bottom < rootBounds.top) {
+    const distance = rootBounds.top - entry.boundingClientRect.bottom
+    return distance <= VISIBILITY_BUFFER_PX
+  }
+
+  // Below the root: compare top edge to root bottom.
+  if (entry.boundingClientRect.top > rootBounds.bottom) {
+    const distance = entry.boundingClientRect.top - rootBounds.bottom
+    return distance <= VISIBILITY_BUFFER_PX
+  }
+
+  // Overlapping the root bounds.
+  return true
+}
+
+function getViewportRect(): { top: number; bottom: number } {
+  if (typeof window === "undefined") {
+    return { top: 0, bottom: 0 }
+  }
+  return { top: 0, bottom: window.innerHeight }
+}
+
+function isRenderableRoot(root: ObserverRoot): boolean {
+  if (!root) return true
+  if (root instanceof Document) return true
+  if (typeof window === "undefined") return false
+
+  const element = root as Element
+  const style = window.getComputedStyle(element as Element)
+  if (style.display === "none" || style.visibility === "hidden") {
     return false
   }
+  const rect = (element as Element).getBoundingClientRect()
+  return rect.width > 0 && rect.height > 0
+}
+
+function shouldRenderByRects(params: {
+  wrapperRect: DOMRect
+  rootRect: { top: number; bottom: number }
+  margin: number
+}): boolean {
+  const { wrapperRect, rootRect, margin } = params
+  const threshold = margin + VISIBILITY_BUFFER_PX
+
+  // Above the root: compare bottom edge to root top.
+  if (wrapperRect.bottom < rootRect.top) {
+    const distance = rootRect.top - wrapperRect.bottom
+    return distance <= threshold
+  }
+
+  // Below the root: compare top edge to root bottom.
+  if (wrapperRect.top > rootRect.bottom) {
+    const distance = wrapperRect.top - rootRect.bottom
+    return distance <= threshold
+  }
+
   return true
 }
 
@@ -103,7 +156,7 @@ function subscribeToSharedObserver(
 
 interface VirtualItemProps {
   cacheKey: string
-  children: JSX.Element
+  children: JSX.Element | (() => JSX.Element)
   scrollContainer?: Accessor<HTMLElement | undefined | null>
   threshold?: number
   minPlaceholderHeight?: number
@@ -114,18 +167,34 @@ interface VirtualItemProps {
   forceVisible?: Accessor<boolean>
   suspendMeasurements?: Accessor<boolean>
   onMeasured?: () => void
+  onHeightChange?: (nextHeight: number, previousHeight: number, meta: VirtualItemHeightChangeMeta) => void
   id?: string
 }
 
+export interface VirtualItemHeightChangeMeta {
+  source: "initial-visible-measure" | "resize"
+  previousCachedHeight: number | null
+  isStaleCacheCorrection: boolean
+  wasHidden: boolean
+}
+
 export default function VirtualItem(props: VirtualItemProps) {
-  const resolved = resolveChildren(() => props.children)
+  const resolveContent = () => (typeof props.children === "function" ? (props.children as () => JSX.Element)() : props.children)
   const cachedHeight = sizeCache.get(props.cacheKey)
-  const [isIntersecting, setIsIntersecting] = createSignal(true)
+  const fallbackPlaceholderHeight = () => props.minPlaceholderHeight ?? MIN_PLACEHOLDER_HEIGHT
-  const [measuredHeight, setMeasuredHeight] = createSignal(cachedHeight ?? 0)
+  // Default to hidden until we can determine visibility.
-  const [hasMeasured, setHasMeasured] = createSignal(cachedHeight !== undefined)
+  // This avoids keeping heavy DOM alive when IntersectionObserver
+  // doesn't fire (common for hidden/zero-sized scroll roots).
+  const [isIntersecting, setIsIntersecting] = createSignal(false)
+  // Keep measuredHeight aligned with the *effective layout height* while hidden.
+  // When content first mounts, onHeightChange deltas should reflect the DOM's
+  // placeholder height (not 0), otherwise scroll compensation can overshoot.
+  const [measuredHeight, setMeasuredHeight] = createSignal(cachedHeight ?? fallbackPlaceholderHeight())
   let hasReportedMeasurement = Boolean(cachedHeight && cachedHeight > 0)
   let pendingVisibility: boolean | null = null
   let visibilityFrame: number | null = null
+  let awaitingVisibleMeasurement = true
+  let lastMeasurementWhileHidden = true
   const flushVisibility = () => {
     if (visibilityFrame !== null) {
       cancelAnimationFrame(visibilityFrame)
@@ -148,15 +217,15 @@ export default function VirtualItem(props: VirtualItemProps) {
     })
   }
   const virtualizationEnabled = () => (props.virtualizationEnabled ? props.virtualizationEnabled() : true)
+  const measurementsSuspended = () => Boolean(props.suspendMeasurements?.())
+  const forceVisible = () => Boolean(props.forceVisible?.())
   const shouldHideContent = createMemo(() => {
-    if (props.forceVisible?.()) return false
+    if (forceVisible()) return false
     if (!virtualizationEnabled()) return false
     return !isIntersecting()
   })
-  const measurementsSuspended = () => Boolean(props.suspendMeasurements?.())
+
- 
+  let wrapperRef: HTMLDivElement | undefined
-   let wrapperRef: HTMLDivElement | undefined
- 
   let contentRef: HTMLDivElement | undefined
 
   let resizeObserver: ResizeObserver | undefined
@@ -169,6 +238,17 @@ export default function VirtualItem(props: VirtualItemProps) {
     }
   }
 
+  function scheduleVisibleMeasurements() {
+    if (shouldHideContent() || measurementsSuspended()) return
+    if (!contentRef) return
+    queueMicrotask(() => {
+      if (shouldHideContent() || measurementsSuspended()) return
+      if (!contentRef) return
+      updateMeasuredHeight()
+      setupResizeObserver()
+    })
+  }
+
   function cleanupIntersectionObserver() {
     if (intersectionCleanup) {
       intersectionCleanup()
@@ -176,41 +256,68 @@ export default function VirtualItem(props: VirtualItemProps) {
     }
   }
 
-  function persistMeasurement(nextHeight: number) {
+  function persistMeasurement(nextHeight: number, meta?: { source: "initial-visible-measure" | "resize"; wasHidden: boolean }) {
     if (!Number.isFinite(nextHeight) || nextHeight < 0) {
       return
     }
+    const before = measuredHeight()
     const normalized = nextHeight
-    const previous = sizeCache.get(props.cacheKey) ?? measuredHeight()
+    const previousCachedHeight = sizeCache.get(props.cacheKey) ?? null
-    const shouldKeepPrevious = previous > 0 && (normalized === 0 || (normalized > 0 && normalized < previous))
+    const previous = previousCachedHeight ?? measuredHeight()
+    const measurementMeta: VirtualItemHeightChangeMeta = {
+      source: meta?.source ?? "resize",
+      previousCachedHeight,
+      isStaleCacheCorrection:
+        (meta?.source ?? "resize") === "initial-visible-measure" &&
+        previousCachedHeight !== null &&
+        normalized > 0 &&
+        Math.abs(normalized - previousCachedHeight) > 1,
+      wasHidden: meta?.wasHidden ?? shouldHideContent(),
+    }
+    // Only keep the previous measurement when the element reports 0 height.
+    // Allow shrinkage so placeholder height matches real content height;
+    // keeping the max height can cause mount/unmount jitter near the
+    // virtualization boundary.
+    const shouldKeepPrevious = previous > 0 && normalized === 0
     if (shouldKeepPrevious) {
       if (!hasReportedMeasurement) {
         hasReportedMeasurement = true
         props.onMeasured?.()
       }
-      setHasMeasured(true)
       sizeCache.set(props.cacheKey, previous)
       setMeasuredHeight(previous)
+      if (previous !== before) props.onHeightChange?.(previous, before, measurementMeta)
       return
     }
     if (normalized > 0) {
       sizeCache.set(props.cacheKey, normalized)
-      setHasMeasured(true)
       if (!hasReportedMeasurement) {
         hasReportedMeasurement = true
         props.onMeasured?.()
       }
     }
     setMeasuredHeight(normalized)
+    if (normalized !== before) props.onHeightChange?.(normalized, before, measurementMeta)
   }
 
   function updateMeasuredHeight() {
-    if (!contentRef || measurementsSuspended()) return
+    if (!contentRef) return
-    const next = contentRef.offsetHeight
+    if (measurementsSuspended()) return
-    if (next === measuredHeight()) return
+    // Prefer subpixel-accurate height for scroll compensation.
-    persistMeasurement(next)
+    // offsetHeight rounds to integers which can accumulate error.
+    const rect = contentRef.getBoundingClientRect()
+    const next = Math.max(0, Math.round(rect.height * 2) / 2)
+    const currentMeasured = measuredHeight()
+    const measurementSource: "initial-visible-measure" | "resize" = awaitingVisibleMeasurement ? "initial-visible-measure" : "resize"
+    const wasHidden = lastMeasurementWhileHidden
+    if (measurementSource === "initial-visible-measure") {
+      awaitingVisibleMeasurement = false
+      lastMeasurementWhileHidden = false
+    }
+    if (next === currentMeasured) return
+    persistMeasurement(next, { source: measurementSource, wasHidden })
   }
- 
+
   function setupResizeObserver() {
     if (!contentRef || measurementsSuspended()) return
     cleanupResizeObserver()
@@ -229,15 +336,60 @@ export default function VirtualItem(props: VirtualItemProps) {
   function refreshIntersectionObserver(targetRoot: Element | Document | null) {
     cleanupIntersectionObserver()
     if (!wrapperRef) {
-      setIsIntersecting(true)
+      setIsIntersecting(false)
       return
     }
     if (typeof IntersectionObserver === "undefined") {
       setIsIntersecting(true)
       return
     }
+
     const margin = props.threshold ?? DEFAULT_MARGIN_PX
-    intersectionCleanup = subscribeToSharedObserver(wrapperRef, targetRoot, margin, (entry) => {
+
+    // If the scroll root is hidden / 0x0, IntersectionObserver can report
+    // `isIntersecting` in unexpected ways (often "true" with null rootBounds),
+    // which keeps heavy DOM alive in background tabs.
+    //
+    // In that state, force-hide and skip attaching the observer. When the
+    // pane becomes visible again, VirtualItem will re-run this setup and
+    // re-attach the observer.
+    const renderable = isRenderableRoot(targetRoot)
+    if (!renderable) {
+      setIsIntersecting(false)
+      return
+    }
+
+    // Avoid doing an eager geometry read here.
+    // During large list hydration / initial layout, wrapper rects can be
+    // transiently 0/incorrect and cause many offscreen items to mount.
+    // Rely on the observer callback (which we harden below) to determine
+    // visibility.
+
+    const wrapperEl = wrapperRef
+    intersectionCleanup = subscribeToSharedObserver(wrapperEl, targetRoot, margin, (entry) => {
+      // IntersectionObserver can produce transient false-positives during pane
+      // activation/layout transitions (e.g. `isIntersecting: true` for items far
+      // outside the scroll root). For element roots, prefer explicit rect math.
+      if (targetRoot && !(targetRoot instanceof Document)) {
+        // When rootBounds is null we cannot trust the entry; treat as hidden.
+        if (entry.rootBounds === null) {
+          queueVisibility(false)
+          return
+        }
+        try {
+          const rootRect = (targetRoot as Element).getBoundingClientRect()
+          const visible = shouldRenderByRects({
+            wrapperRect: wrapperEl.getBoundingClientRect(),
+            rootRect: { top: rootRect.top, bottom: rootRect.bottom },
+            margin,
+          })
+          queueVisibility(visible)
+          return
+        } catch {
+          // Fall through to the entry-based heuristic.
+        }
+      }
+
       const nextVisible = shouldRenderEntry(entry)
       queueVisibility(nextVisible)
     })
@@ -261,30 +413,29 @@ export default function VirtualItem(props: VirtualItemProps) {
       cleanupResizeObserver()
     }
   }
- 
-  
   createEffect(() => {
-    if (shouldHideContent() || measurementsSuspended()) {
+    const hidden = shouldHideContent()
+    if (hidden) {
+      awaitingVisibleMeasurement = true
+      lastMeasurementWhileHidden = true
+    }
+    if (hidden || measurementsSuspended()) {
       cleanupResizeObserver()
-    } else if (contentRef) {
+    }
-      queueMicrotask(() => {
+    if (!hidden && !measurementsSuspended() && contentRef) {
-        updateMeasuredHeight()
+      scheduleVisibleMeasurements()
-        setupResizeObserver()
-      })
     }
   })
 
- 
+  
   createEffect(() => {
     const key = props.cacheKey
 
     const cached = sizeCache.get(key)
     if (cached !== undefined) {
       setMeasuredHeight(cached)
-      setHasMeasured(true)
     } else {
-      setMeasuredHeight(0)
+      setMeasuredHeight(fallbackPlaceholderHeight())
-      setHasMeasured(false)
     }
   })
 
@@ -302,7 +453,7 @@ export default function VirtualItem(props: VirtualItemProps) {
     }
     return props.minPlaceholderHeight ?? MIN_PLACEHOLDER_HEIGHT
   })
- 
+
   onCleanup(() => {
     cleanupResizeObserver()
     cleanupIntersectionObserver()
@@ -320,10 +471,9 @@ export default function VirtualItem(props: VirtualItemProps) {
   const placeholderClass = () => ["virtual-item-placeholder", props.placeholderClass].filter(Boolean).join(" ")
   const lazyContent = createMemo<JSX.Element | null>(() => {
     if (shouldHideContent()) return null
-    return resolved()
+    return resolveContent()
   })
 
- 
   return (
     <div ref={setWrapperRef} id={props.id} class={wrapperClass()} style={{ width: "100%" }}>
       <div
@@ -340,4 +490,3 @@ export default function VirtualItem(props: VirtualItemProps) {
     </div>
   )
 }
-

packages/ui/src/lib/i18n/messages/en/messaging.ts

@@ -23,7 +23,6 @@ export const messagingMessages = {
   "messageSection.quote.copy": "Copy",
   "messageSection.quote.copied": "Copied!",
   "messageSection.quote.copyFailed": "Copy failed",
-
   "messageTimeline.ariaLabel": "Message timeline",
   "messageTimeline.segment.user.label": "You",
   "messageTimeline.segment.assistant.label": "Asst",
@@ -35,7 +34,6 @@ export const messagingMessages = {
   "messageTimeline.tooltip.compaction.manual": "User Compaction",
   "messageTimeline.text.filePrefix": "[File] {filename}",
   "messageTimeline.text.attachment": "Attachment",
-
   "messageBlock.tool.header": "Tool Call",
   "messageBlock.tool.unknown": "unknown",
   "messageBlock.tool.goToSession.label": "Go to Session",
@@ -85,12 +83,19 @@ export const messagingMessages = {
 
   "messageItem.selection.checkboxAriaLabel": "Select message for deletion",
 
-  "messageSection.bulkDelete.toolbarAriaLabel": "Selected messages ({count})",
+  "messageSection.bulkDelete.toolbarAriaLabel": "Selected items ({count})",
-  "messageSection.bulkDelete.deleteSelectedTitle": "Delete selected messages",
+  "messageSection.bulkDelete.deleteSelectedTitle": "Delete selected items",
   "messageSection.bulkDelete.selectAllTitle": "Select all messages",
+  "messageSection.bulkDelete.moreOptionsTitle": "More options",
+  "messageSection.bulkDelete.selectionModeLabel": "Selection",
+  "messageSection.bulkDelete.selectionModeAll": "All",
+  "messageSection.bulkDelete.selectionModeTools": "Tools only",
+  "messageSection.bulkDelete.selectionHint.toggle": "Select item",
+  "messageSection.bulkDelete.selectionHint.range": "Select range",
+  "messageSection.bulkDelete.selectionHint.clear": "Clear Selection",
   "messageSection.bulkDelete.cancelTitle": "Cancel selection",
   "messageSection.bulkDelete.failedTitle": "Delete failed",
-  "messageSection.bulkDelete.failedMessage": "Failed to delete selected messages",
+  "messageSection.bulkDelete.failedMessage": "Failed to delete selected items",
   "messageItem.status.queued": "QUEUED",
   "messageItem.status.generating": "Generating...",
   "messageItem.status.sending": "Sending...",

packages/ui/src/lib/i18n/messages/es/messaging.ts

@@ -85,12 +85,19 @@ export const messagingMessages = {
 
   "messageItem.selection.checkboxAriaLabel": "Seleccionar mensaje para eliminar",
 
-  "messageSection.bulkDelete.toolbarAriaLabel": "Mensajes seleccionados ({count})",
+  "messageSection.bulkDelete.toolbarAriaLabel": "Elementos seleccionados ({count})",
-  "messageSection.bulkDelete.deleteSelectedTitle": "Eliminar mensajes seleccionados",
+  "messageSection.bulkDelete.deleteSelectedTitle": "Eliminar elementos seleccionados",
   "messageSection.bulkDelete.selectAllTitle": "Seleccionar todos los mensajes",
+  "messageSection.bulkDelete.moreOptionsTitle": "Más opciones",
+  "messageSection.bulkDelete.selectionModeLabel": "Selección",
+  "messageSection.bulkDelete.selectionModeAll": "Todo",
+  "messageSection.bulkDelete.selectionModeTools": "Solo herramientas",
+  "messageSection.bulkDelete.selectionHint.toggle": "Seleccionar elemento",
+  "messageSection.bulkDelete.selectionHint.range": "Seleccionar rango",
+  "messageSection.bulkDelete.selectionHint.clear": "Borrar selección",
   "messageSection.bulkDelete.cancelTitle": "Cancelar selección",
   "messageSection.bulkDelete.failedTitle": "Error al eliminar",
-  "messageSection.bulkDelete.failedMessage": "No se pudieron eliminar los mensajes seleccionados",
+  "messageSection.bulkDelete.failedMessage": "No se pudieron eliminar los elementos seleccionados",
   "messageItem.status.queued": "EN COLA",
   "messageItem.status.generating": "Generando...",
   "messageItem.status.sending": "Enviando...",

packages/ui/src/lib/i18n/messages/fr/messaging.ts

@@ -85,12 +85,19 @@ export const messagingMessages = {
 
   "messageItem.selection.checkboxAriaLabel": "Sélectionner le message pour suppression",
 
-  "messageSection.bulkDelete.toolbarAriaLabel": "Messages sélectionnés ({count})",
+  "messageSection.bulkDelete.toolbarAriaLabel": "Éléments sélectionnés ({count})",
-  "messageSection.bulkDelete.deleteSelectedTitle": "Supprimer les messages sélectionnés",
+  "messageSection.bulkDelete.deleteSelectedTitle": "Supprimer les éléments sélectionnés",
   "messageSection.bulkDelete.selectAllTitle": "Tout sélectionner",
+  "messageSection.bulkDelete.moreOptionsTitle": "Plus d'options",
+  "messageSection.bulkDelete.selectionModeLabel": "Sélection",
+  "messageSection.bulkDelete.selectionModeAll": "Tous",
+  "messageSection.bulkDelete.selectionModeTools": "Outils uniquement",
+  "messageSection.bulkDelete.selectionHint.toggle": "Selectionner un element",
+  "messageSection.bulkDelete.selectionHint.range": "Selectionner une plage",
+  "messageSection.bulkDelete.selectionHint.clear": "Effacer la selection",
   "messageSection.bulkDelete.cancelTitle": "Annuler la sélection",
   "messageSection.bulkDelete.failedTitle": "Échec de suppression",
-  "messageSection.bulkDelete.failedMessage": "Impossible de supprimer les messages sélectionnés",
+  "messageSection.bulkDelete.failedMessage": "Impossible de supprimer les éléments sélectionnés",
   "messageItem.status.queued": "EN FILE",
   "messageItem.status.generating": "Génération...",
   "messageItem.status.sending": "Envoi...",

packages/ui/src/lib/i18n/messages/ja/messaging.ts

@@ -85,12 +85,19 @@ export const messagingMessages = {
 
   "messageItem.selection.checkboxAriaLabel": "削除するメッセージを選択",
 
-  "messageSection.bulkDelete.toolbarAriaLabel": "選択したメッセージ（{count}）",
+  "messageSection.bulkDelete.toolbarAriaLabel": "選択した項目（{count}）",
-  "messageSection.bulkDelete.deleteSelectedTitle": "選択したメッセージを削除",
+  "messageSection.bulkDelete.deleteSelectedTitle": "選択した項目を削除",
   "messageSection.bulkDelete.selectAllTitle": "すべて選択",
+  "messageSection.bulkDelete.moreOptionsTitle": "その他のオプション",
+  "messageSection.bulkDelete.selectionModeLabel": "選択",
+  "messageSection.bulkDelete.selectionModeAll": "すべて",
+  "messageSection.bulkDelete.selectionModeTools": "ツールのみ",
+  "messageSection.bulkDelete.selectionHint.toggle": "項目を選択",
+  "messageSection.bulkDelete.selectionHint.range": "範囲を選択",
+  "messageSection.bulkDelete.selectionHint.clear": "選択を解除",
   "messageSection.bulkDelete.cancelTitle": "選択をキャンセル",
   "messageSection.bulkDelete.failedTitle": "削除に失敗しました",
-  "messageSection.bulkDelete.failedMessage": "選択したメッセージの削除に失敗しました",
+  "messageSection.bulkDelete.failedMessage": "選択した項目の削除に失敗しました",
   "messageItem.status.queued": "待機中",
   "messageItem.status.generating": "生成中...",
   "messageItem.status.sending": "送信中...",

packages/ui/src/lib/i18n/messages/ru/messaging.ts

@@ -85,12 +85,19 @@ export const messagingMessages = {
 
   "messageItem.selection.checkboxAriaLabel": "Выбрать сообщение для удаления",
 
-  "messageSection.bulkDelete.toolbarAriaLabel": "Выбранные сообщения ({count})",
+  "messageSection.bulkDelete.toolbarAriaLabel": "Выбранные элементы ({count})",
-  "messageSection.bulkDelete.deleteSelectedTitle": "Удалить выбранные сообщения",
+  "messageSection.bulkDelete.deleteSelectedTitle": "Удалить выбранные элементы",
   "messageSection.bulkDelete.selectAllTitle": "Выбрать все сообщения",
+  "messageSection.bulkDelete.moreOptionsTitle": "Больше настроек",
+  "messageSection.bulkDelete.selectionModeLabel": "Выбор",
+  "messageSection.bulkDelete.selectionModeAll": "Все",
+  "messageSection.bulkDelete.selectionModeTools": "Только инструменты",
+  "messageSection.bulkDelete.selectionHint.toggle": "Выбрать элемент",
+  "messageSection.bulkDelete.selectionHint.range": "Выбрать диапазон",
+  "messageSection.bulkDelete.selectionHint.clear": "Очистить выбор",
   "messageSection.bulkDelete.cancelTitle": "Отменить выбор",
   "messageSection.bulkDelete.failedTitle": "Ошибка удаления",
-  "messageSection.bulkDelete.failedMessage": "Не удалось удалить выбранные сообщения",
+  "messageSection.bulkDelete.failedMessage": "Не удалось удалить выбранные элементы",
   "messageItem.status.queued": "В ОЧЕРЕДИ",
   "messageItem.status.generating": "Генерация…",
   "messageItem.status.sending": "Отправка…",

packages/ui/src/lib/i18n/messages/zh-Hans/messaging.ts

@@ -85,12 +85,19 @@ export const messagingMessages = {
 
   "messageItem.selection.checkboxAriaLabel": "选择要删除的消息",
 
-  "messageSection.bulkDelete.toolbarAriaLabel": "已选择的消息（{count}）",
+  "messageSection.bulkDelete.toolbarAriaLabel": "已选择的项目（{count}）",
-  "messageSection.bulkDelete.deleteSelectedTitle": "删除已选择的消息",
+  "messageSection.bulkDelete.deleteSelectedTitle": "删除已选择的项目",
   "messageSection.bulkDelete.selectAllTitle": "全选消息",
+  "messageSection.bulkDelete.moreOptionsTitle": "更多选项",
+  "messageSection.bulkDelete.selectionModeLabel": "选择",
+  "messageSection.bulkDelete.selectionModeAll": "全部",
+  "messageSection.bulkDelete.selectionModeTools": "仅工具",
+  "messageSection.bulkDelete.selectionHint.toggle": "选择项目",
+  "messageSection.bulkDelete.selectionHint.range": "选择范围",
+  "messageSection.bulkDelete.selectionHint.clear": "清除选择",
   "messageSection.bulkDelete.cancelTitle": "取消选择",
   "messageSection.bulkDelete.failedTitle": "删除失败",
-  "messageSection.bulkDelete.failedMessage": "无法删除已选择的消息",
+  "messageSection.bulkDelete.failedMessage": "无法删除已选择的项目",
   "messageItem.status.queued": "排队中",
   "messageItem.status.generating": "正在生成...",
   "messageItem.status.sending": "正在发送...",

packages/ui/src/lib/token-utils.ts

@@ -0,0 +1,66 @@
+import type { ClientPart } from "../types/message"
+
+/**
+ * Count the total character content of a message part.
+ *
+ * Used by both the xray histogram overlay (message-timeline) and the
+ * bulk-delete toolbar token pills (message-section) so both surfaces
+ * derive token estimates from the same logic.
+ *
+ * Note: For tool parts we intentionally only count `state.input` and
+ * `state.output`. We exclude `state.metadata` from token estimation since
+ * metadata can contain large or verbose diagnostic payloads that are not
+ * representative of model context.
+ */
+export function getPartCharCount(part: ClientPart): number {
+  if (!part) return 0
+  let count = 0
+
+  if (typeof (part as any).text === "string") {
+    count += (part as any).text.length
+  }
+
+  if (part.type === "tool") {
+    const state = (part as any).state
+    // Tool calls may be compacted server-side. When that happens we treat the
+    // tool payload as effectively absent from context for token estimation.
+    const compacted = (state as any)?.time?.compacted
+    if (compacted !== undefined && compacted !== null) {
+      return 0
+    }
+    if (state) {
+      if (state.input) {
+        try {
+          count += JSON.stringify(state.input).length
+        } catch {}
+      }
+      if (state.output) {
+        if (typeof state.output === "string") {
+          count += state.output.length
+        } else {
+          try {
+            count += JSON.stringify(state.output).length
+          } catch {}
+        }
+      }
+    }
+  }
+
+  if (Array.isArray((part as any).content)) {
+    count += (part as any).content.reduce((acc: number, entry: unknown) => {
+      if (typeof entry === "string") return acc + entry.length
+      if (entry && typeof entry === "object") {
+        let entryCount = (String((entry as any).text || "")).length + (String((entry as any).value || "")).length
+        if (Array.isArray((entry as any).content)) {
+          entryCount += (entry as any).content.reduce((innerAcc: number, sub: unknown) => {
+            if (typeof sub === "string") return innerAcc + sub.length
+            return innerAcc + (String((sub as any)?.text || "")).length
+          }, 0)
+        }
+        return acc + entryCount
+      }
+      return acc
+    }, 0)
+  }
+  return count
+}

packages/ui/src/stores/message-v2/bridge.ts

@@ -117,6 +117,7 @@ export function applyPartDeltaV2(
     partId: input.partId,
     field: input.field,
     delta: input.delta,
+    bumpSessionRevision: false,
   })
 }
 

packages/ui/src/stores/message-v2/instance-store.ts

@@ -189,7 +189,14 @@ export interface InstanceMessageStore {
   hydrateMessages: (sessionId: string, inputs: MessageUpsertInput[], infos?: Iterable<MessageInfo>) => void
   upsertMessage: (input: MessageUpsertInput) => void
   applyPartUpdate: (input: PartUpdateInput) => void
-  applyPartDelta: (input: { messageId: string; partId: string; field: string; delta: string; bumpRevision?: boolean }) => void
+  applyPartDelta: (input: {
+    messageId: string
+    partId: string
+    field: string
+    delta: string
+    bumpRevision?: boolean
+    bumpSessionRevision: boolean
+  }) => void
   removeMessage: (messageId: string) => void
   removeMessagePart: (messageId: string, partId: string) => void
   bufferPendingPart: (entry: PendingPartEntry) => void
@@ -211,6 +218,9 @@ export interface InstanceMessageStore {
   getScrollSnapshot: (sessionId: string, scope: string) => ScrollSnapshot | undefined
   getSessionRevision: (sessionId: string) => number
   getSessionMessageIds: (sessionId: string) => string[]
+  // Index of the most recent message in the session that contains a compaction part.
+  // Returns -1 if there has been no compaction.
+  getLastCompactionMessageIndex: (sessionId: string) => number
   getMessage: (messageId: string) => MessageRecord | undefined
   getLatestTodoSnapshot: (sessionId: string) => LatestTodoSnapshot | undefined
   clearSession: (sessionId: string) => void
@@ -224,6 +234,24 @@ export function createInstanceMessageStore(instanceId: string, hooks?: MessageSt
 
   const messageInfoCache = new Map<string, MessageInfo>()
 
+  function getLastCompactionMessageIndex(sessionId: string): number {
+    if (!sessionId) return -1
+    const ids = state.sessions[sessionId]?.messageIds ?? []
+    // Scan from the end: we only care about the most recent compaction.
+    for (let i = ids.length - 1; i >= 0; i--) {
+      const messageId = ids[i]
+      const record = state.messages[messageId]
+      if (!record || !Array.isArray(record.partIds) || record.partIds.length === 0) continue
+      for (const partId of record.partIds) {
+        const part = record.parts[partId]?.data
+        if ((part as any)?.type === "compaction") {
+          return i
+        }
+      }
+    }
+    return -1
+  }
+
   function isCompletedTodoPart(part: ClientPart | undefined): boolean {
     if (!part || (part as any).type !== "tool") {
       return false
@@ -598,7 +626,14 @@ export function createInstanceMessageStore(instanceId: string, hooks?: MessageSt
     bumpSessionRevision(message.sessionId)
   }
 
-  function applyPartDelta(input: { messageId: string; partId: string; field: string; delta: string; bumpRevision?: boolean }) {
+  function applyPartDelta(input: {
+    messageId: string
+    partId: string
+    field: string
+    delta: string
+    bumpRevision?: boolean
+    bumpSessionRevision?: boolean
+  }) {
     if (!input?.messageId || !input.partId || !input.field || typeof input.delta !== "string") {
       return
     }
@@ -632,7 +667,7 @@ export function createInstanceMessageStore(instanceId: string, hooks?: MessageSt
       }),
     )
 
-    if (applied) {
+    if (applied && (input.bumpSessionRevision ?? true)) {
       bumpSessionRevision(message.sessionId)
     }
   }
@@ -1124,8 +1159,8 @@ export function createInstanceMessageStore(instanceId: string, hooks?: MessageSt
  
    function clearInstance() {
      messageInfoCache.clear()
-     setState(reconcile(createInitialState(instanceId)))
+      setState(reconcile(createInitialState(instanceId)))
-   }
+    }
  
     return {
 
@@ -1158,11 +1193,11 @@ export function createInstanceMessageStore(instanceId: string, hooks?: MessageSt
      setScrollSnapshot,
      getScrollSnapshot,
      getSessionRevision: getSessionRevisionValue,
-      getSessionMessageIds: (sessionId: string) => state.sessions[sessionId]?.messageIds ?? [],
+       getSessionMessageIds: (sessionId: string) => state.sessions[sessionId]?.messageIds ?? [],
-      getMessage: (messageId: string) => state.messages[messageId],
+       getLastCompactionMessageIndex,
-      getLatestTodoSnapshot: (sessionId: string) => state.latestTodos[sessionId],
+       getMessage: (messageId: string) => state.messages[messageId],
-      clearSession,
+       getLatestTodoSnapshot: (sessionId: string) => state.latestTodos[sessionId],
-      clearInstance,
+       clearSession,
+       clearInstance,
     }
   }
-

packages/ui/src/styles/messaging.css

@@ -1,7 +1,7 @@
 @import "./messaging/message-base.css";
 @import "./messaging/prompt-input.css";
 @import "./messaging/message-section.css";
-@import "./messaging/message-block-list.css";
+@import "./messaging/virtual-follow-list.css";
 @import "./messaging/message-selection.css";
 @import "./messaging/delete-overlays.css";
 @import "./messaging/message-timeline.css";

packages/ui/src/styles/messaging/message-base.css

@@ -203,6 +203,27 @@
   border-top: 1px solid var(--border-base);
 }
 
+/* Image attachment preview popover.
+   Rendered via a Portal to avoid being clipped by the message stream scroller. */
+.attachment-image-popover {
+  position: fixed;
+  padding: 8px;
+  background-color: var(--surface-base);
+  border: 1px solid var(--border-base);
+  border-radius: 10px;
+  box-shadow: var(--popover-shadow);
+  z-index: 1000;
+  pointer-events: none;
+}
+
+.attachment-image-popover img {
+  display: block;
+  max-width: 320px;
+  max-height: 320px;
+  border-radius: 8px;
+  object-fit: contain;
+}
+
 .message-error {
   @apply text-xs mt-1;
   color: var(--status-error);

packages/ui/src/styles/messaging/message-selection.css

@@ -11,37 +11,35 @@
 
 .message-delete-mode-toolbar {
   position: absolute;
-  right: 12px;
+  left: 50%;
-  bottom: 12px;
+  transform: translateX(-50%);
-  display: flex;
+  bottom: 1rem;
+  display: inline-flex;
+  flex-direction: column;
   align-items: center;
-  gap: 8px;
+  gap: 6px;
-  padding: 6px;
+  padding: 6px 10px;
-  background: color-mix(in oklab, var(--surface-secondary) 92%, var(--status-error-bg));
+  /* Match other popups (dropdown-surface / panels) */
+  background-color: var(--surface-base);
   border: 1px solid var(--border-base);
   border-radius: 12px;
   z-index: 50;
-  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
+  box-shadow: var(--panel-shadow-strong);
+  width: max-content;
+  max-width: min(80vw, 560px);
 }
 
-/* Avoid covering the scroll-to-top/bottom floating buttons. */
+.message-delete-mode-toolbar-row {
-.message-layout[data-scroll-buttons="1"] .message-delete-mode-toolbar {
+  display: flex;
-  bottom: 4.25rem;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
 }
 
-.message-layout[data-scroll-buttons="2"] .message-delete-mode-toolbar {
+.message-delete-mode-token-group {
-  bottom: 7.5rem;
+  display: inline-flex;
-}
+  align-items: center;
-
+  gap: 3px;
-/* When timeline is visible, pin the toolbar to the stream edge. */
-.message-layout--with-timeline .message-delete-mode-toolbar {
-  right: calc(64px + 12px);
-}
-
-@media (max-width: 720px) {
-  .message-layout--with-timeline .message-delete-mode-toolbar {
-    right: calc(40px + 12px);
-  }
 }
 
 .message-delete-mode-count {
@@ -52,11 +50,38 @@
   justify-content: center;
   padding: 0 8px;
   border-radius: 999px;
-  font-size: 12px;
+  font-size: 11px;
   font-weight: 700;
-  color: var(--text-primary);
+  font-variant-numeric: tabular-nums;
-  background: var(--surface-secondary);
+  color: var(--accent-primary);
-  border: 1px solid var(--border-base);
+  background: color-mix(in oklab, var(--surface-base) 85%, var(--accent-primary));
+  border: 1px solid color-mix(in oklab, var(--accent-primary) 50%, transparent);
+}
+
+.message-delete-mode-count--before {
+  color: var(--text-muted);
+  background: color-mix(in oklab, var(--surface-base) 90%, var(--text-muted));
+  border-color: color-mix(in oklab, var(--text-muted) 30%, transparent);
+}
+
+.message-delete-mode-count--selection {
+  color: var(--status-error);
+  background: color-mix(in oklab, var(--surface-base) 85%, var(--status-error));
+  border-color: color-mix(in oklab, var(--status-error) 40%, transparent);
+}
+
+.message-delete-mode-count--after {
+  color: var(--status-success);
+  background: color-mix(in oklab, var(--surface-base) 85%, var(--status-success));
+  border-color: color-mix(in oklab, var(--status-success) 40%, transparent);
+}
+
+.message-delete-mode-arrow {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--text-muted);
+  line-height: 1;
+  user-select: none;
 }
 
 .message-delete-mode-button {
@@ -66,19 +91,142 @@
   align-items: center;
   justify-content: center;
   background: transparent;
-  border: 1px solid var(--border-base);
+  border: 1px solid color-mix(in oklab, var(--accent-primary) 30%, transparent);
   border-radius: 10px;
-  color: var(--text-muted);
+  color: var(--text-secondary);
-  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
 }
 
 .message-delete-mode-button:hover {
-  background-color: var(--surface-hover);
+  background-color: color-mix(in oklab, var(--accent-primary) 15%, transparent);
+  border-color: var(--accent-primary);
+  color: var(--accent-primary);
+}
+
+.message-delete-mode-button--delete {
+  color: var(--status-error);
+  border-color: color-mix(in oklab, var(--status-error) 30%, transparent);
+}
+
+.message-delete-mode-button--delete:hover {
+  background-color: var(--status-error-bg);
   border-color: var(--status-error);
   color: var(--status-error);
 }
 
+.message-delete-mode-button--cancel:hover {
+  background-color: color-mix(in oklab, var(--text-muted) 12%, transparent);
+  border-color: var(--text-muted);
+  color: var(--text-primary);
+}
+
+.message-delete-mode-button--menu {
+  color: var(--text-muted);
+}
+
+.message-delete-mode-button--menu:hover {
+  color: var(--text-primary);
+}
+
+.message-delete-mode-menu-container {
+  position: relative;
+}
+
+.message-delete-mode-menu {
+  right: 0;
+  bottom: calc(100% + 6px);
+  min-width: 150px;
+  width: max-content;
+  max-width: min(70vw, 220px);
+  padding: 2px 0;
+}
+
+.message-delete-mode-menu-divider {
+  height: 1px;
+  margin: 3px 0;
+  background-color: var(--border-base);
+}
+
+.message-delete-mode-menu-row {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 2px 8px 6px;
+}
+
+.message-delete-mode-menu-label {
+  font-size: 12px;
+  color: var(--text-muted);
+  text-align: center;
+}
+
+.message-delete-mode-menu-toggle {
+  display: inline-flex;
+  border-radius: 999px;
+  border: 1px solid var(--border-base);
+  background-color: var(--surface-secondary);
+  overflow: hidden;
+  width: 100%;
+}
+
+.message-delete-mode-menu-toggle-button {
+  padding: 2px 8px;
+  font-size: 12px;
+  color: var(--text-muted);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: color 0.15s ease, background-color 0.15s ease;
+}
+
+.message-delete-mode-menu-toggle-button[data-mode="all"] {
+  flex: 0 0 auto;
+  min-width: 56px;
+}
+
+.message-delete-mode-menu-toggle-button[data-mode="tools"] {
+  flex: 1 1 auto;
+}
+
+.message-delete-mode-menu-toggle-button[data-active="true"] {
+  color: var(--text-primary);
+  background-color: color-mix(in oklab, var(--accent-primary) 18%, transparent);
+}
+
+.message-delete-mode-menu .dropdown-item {
+  width: calc(100% - 8px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 4px;
+  padding: 3px 8px;
+  font-size: 12px;
+  border-radius: 6px;
+}
+
 .message-delete-mode-button:focus-visible {
   outline: none;
   box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent-primary) 45%, transparent);
 }
+
+.message-delete-mode-hint-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding-top: 2px;
+  font-size: 10px;
+  color: var(--text-muted);
+  user-select: none;
+  flex-wrap: wrap;
+}
+
+.message-delete-mode-hint-text {
+  white-space: normal;
+}
+
+.message-delete-mode-hint-sep {
+  color: var(--text-muted);
+  user-select: none;
+}

packages/ui/src/styles/messaging/message-timeline.css

@@ -6,6 +6,9 @@
   min-height: 0;
   flex: 1 1 auto;
   position: relative;
+  /* Isolate stacking context so sidebar z-indices don't compete with
+     Portals (Command Palette, modals) that live at the body level. */
+  isolation: isolate;
 }
 
 .message-layout--with-timeline {
@@ -51,6 +54,8 @@
   min-height: 0;
   display: flex;
   flex-direction: column;
+  position: relative;
+  z-index: 100;
  }
 
 
@@ -67,11 +72,16 @@
   gap: 0.35rem;
   padding: 0.25rem;
   overflow-y: auto;
+  overflow-x: visible;
   border-radius: 8px;
   background-color: var(--surface-base);
   box-shadow: var(--panel-shadow);
 }
 
+.message-timeline--selection-active {
+  padding-bottom: 4rem;
+}
+
 .message-timeline::-webkit-scrollbar {
   width: 5px;
 }
@@ -97,6 +107,11 @@
   text-transform: uppercase;
   color: var(--text-primary);
   transition: transform 0.15s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+  overflow: hidden;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+  -webkit-touch-callout: none;
 }
 
 .message-timeline-segment[data-delete-hover="true"]::before {
@@ -259,3 +274,162 @@
 .message-preview .message-item-base {
   font-size: 0.85rem;
 }
+
+/* --- Selection & Histogram Ribs --- */
+
+.message-timeline-segment-selected {
+  border-color: var(--accent-primary) !important;
+  background-color: color-mix(in oklab, var(--accent-primary) 25%, var(--surface-base)) !important;
+  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent-primary) 50%, transparent) inset !important;
+  color: var(--accent-primary) !important;
+}
+
+/* When a whole message is selected for deletion (via stream checkbox),
+   reflect that on all timeline segments for that message. */
+.message-timeline-segment-delete-selected {
+  border-color: color-mix(in oklab, var(--status-error) 55%, transparent) !important;
+  background-color: color-mix(in oklab, var(--status-error) 18%, var(--surface-base)) !important;
+  box-shadow: 0 0 0 2px color-mix(in oklab, var(--status-error) 35%, transparent) inset !important;
+  color: var(--status-error) !important;
+}
+
+.message-timeline-segment-delete-selected:hover,
+.message-timeline-segment-delete-selected:focus-visible {
+  background-color: color-mix(in oklab, var(--status-error) 24%, var(--surface-base)) !important;
+  color: var(--status-error) !important;
+  transform: none;
+}
+
+.message-timeline-segment-selected:hover,
+.message-timeline-segment-selected:focus-visible {
+  background-color: color-mix(in oklab, var(--accent-primary) 35%, var(--surface-base)) !important;
+  color: var(--accent-primary) !important;
+  transform: none;
+}
+
+/* --- Group indicators: tools belong to the same message as their assistant --- */
+
+/* Tool segments that are part of a group get a left accent border. */
+.message-timeline-group-child {
+  border-left: 3px solid color-mix(in oklab, var(--accent-primary) 35%, transparent);
+}
+
+/* The assistant "parent" at the bottom of a tool group gets the same border. */
+.message-timeline-group-parent {
+  border-left: 3px solid color-mix(in oklab, var(--accent-primary) 35%, transparent);
+}
+
+/* Extra spacing before the first tool in a group to separate from the
+   preceding user/assistant badge. */
+.message-timeline-group-start {
+  margin-top: 0.35rem;
+}
+
+/* Subtle extra spacing after the group parent (assistant) to separate
+   from the next user badge below. Uses adjacent sibling targeting. */
+.message-timeline-group-parent + .message-timeline-user,
+.message-timeline-group-parent + .message-timeline-compaction {
+  margin-top: 0.35rem;
+}
+
+.message-timeline-container {
+  position: relative;
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.message-timeline-xray-overlay {
+  position: absolute;
+  inset: 0;
+  /* Extend the overlay box into the stream so ribs are not relying on
+     overflow-visible behavior (which is brittle around scroll containers). */
+  --xray-overhang: calc(var(--max-rib-width, 50vw) + 84px);
+  left: calc(-1 * var(--xray-overhang));
+  width: calc(100% + var(--xray-overhang));
+  overflow: hidden;
+  padding: 0.25rem;
+  pointer-events: none;
+  /* Above the scroll container background; still non-interactive. */
+  z-index: 2;
+  --xray-scroll-y: 0px;
+}
+
+.message-timeline-xray-overlay-inner {
+  position: absolute;
+  inset: 0;
+  transform: translateY(var(--xray-scroll-y));
+  will-change: transform;
+}
+
+.message-timeline-xray-rib {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 1px;
+  transform: translate(-100%, -50%);
+}
+
+.message-timeline-xray-token-label {
+  position: absolute;
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-right: 4px;
+  height: 1.5rem;
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  color: var(--text-primary);
+  background: var(--surface-base);
+  padding: 1px 5px;
+  border: 1px solid var(--border-base);
+  border-radius: 999px;
+  white-space: nowrap;
+  pointer-events: none;
+  user-select: none;
+}
+
+.message-timeline-relative-bar {
+  height: 5px;
+  width: calc(var(--segment-weight) * var(--max-rib-width, 50vw));
+  background-color: color-mix(
+    in srgb,
+    var(--status-success) calc(100% - var(--segment-weight) * 100%),
+    var(--status-error) calc(var(--segment-weight) * 100%)
+  );
+  border-radius: 3px 0 0 3px;
+  transition: width 0.3s ease, background-color 0.3s ease;
+  box-shadow: -2px 0 4px rgba(0, 0, 0, 0.25);
+}
+
+.message-timeline-absolute-bar {
+  height: 3px;
+  width: calc(var(--segment-weight) * var(--max-rib-width, 50vw));
+  background-color: var(--text-muted);
+  border-radius: 2px 0 0 2px;
+  transition: width 0.3s ease;
+  opacity: 0.5;
+  position: relative;
+}
+
+.message-timeline-absolute-bar-overflow {
+  opacity: 0.8;
+}
+
+.message-timeline-absolute-bar-overflow::before {
+  content: "";
+  position: absolute;
+  left: -1px;
+  top: -3px;
+  bottom: -3px;
+  width: 3px;
+  border-radius: 2px;
+  background: var(--status-error);
+  box-shadow: 0 0 6px 2px var(--status-error);
+}

packages/ui/src/styles/messaging/virtual-follow-list.css

@@ -2,12 +2,16 @@
   @apply flex-1 min-h-0 overflow-y-auto flex flex-col gap-0.5;
   background-color: var(--surface-base);
   color: inherit;
+  /* Prevent browser scroll anchoring fighting our virtualization compensation. */
+  overflow-anchor: none;
 }
 
 .message-stream-block {
   display: flex;
   flex-direction: column;
   gap: 0.0625rem;
+
+  contain: layout paint style;
 }
 
 .virtual-item-wrapper {