perf(ui): virtualize message timeline rendering, #274 follow-up ( BIG SPEED IMPROVEMENT ) (#291)

## Summary
- virtualize MessageTimeline so large session histories stop rendering
the full timeline sidebar at once.
- keep the existing full render path in selection mode so xray/selection
behavior stays intact.
- route active-segment scrolling through the virtualizer so timeline
navigation still follows the selected message.

## Benefit
- prompt field was very laggy in cession with big history and timeline
had many bugs, this is fixed.
- the session with big history now load as fast as a new session .

packages/opencode-config/plugin/lib/background-process.ts

@@ -13,6 +13,11 @@ type BackgroundProcess = {
   outputSizeBytes?: number
 }
 
+type BackgroundProcessNotificationRequest = {
+  sessionID: string
+  directory: string
+}
+
 type BackgroundProcessOptions = {
   baseDir: string
 }
@@ -36,12 +41,19 @@ export function createBackgroundProcessTools(config: CodeNomadConfig, options: B
       args: {
         title: tool.schema.string().describe("Short label for the process (e.g. Dev server, DB server)"),
         command: tool.schema.string().describe("Shell command to run in the workspace"),
+        notify: tool.schema.boolean().optional().describe("Notify the current session when the process ends"),
       },
-      async execute(args) {
+      async execute(args, context) {
         assertCommandWithinBase(args.command, options.baseDir)
+        const notification: BackgroundProcessNotificationRequest | undefined = args.notify
+          ? {
+              sessionID: context.sessionID,
+              directory: context.directory,
+            }
+          : undefined
         const process = await request<BackgroundProcess>("", {
           method: "POST",
-          body: JSON.stringify({ title: args.title, command: args.command }),
+          body: JSON.stringify({ title: args.title, command: args.command, notify: args.notify, notification }),
         })
 
         return `Started background process ${process.id} (${process.title})\nStatus: ${process.status}\nCommand: ${process.command}`

packages/server/src/api-types.ts

@@ -376,6 +376,8 @@ export interface ServerMeta {
 
 export type BackgroundProcessStatus = "running" | "stopped" | "error"
 
+export type BackgroundProcessTerminalReason = "finished" | "failed" | "user_stopped" | "user_terminated"
+
 export interface BackgroundProcess {
   id: string
   workspaceId: string
@@ -388,6 +390,8 @@ export interface BackgroundProcess {
   stoppedAt?: string
   exitCode?: number
   outputSizeBytes?: number
+  terminalReason?: BackgroundProcessTerminalReason
+  notifyEnabled?: boolean
 }
 
 export interface BackgroundProcessListResponse {

packages/server/src/background-processes/manager.ts

@@ -5,7 +5,7 @@ import { randomBytes } from "crypto"
 import type { EventBus } from "../events/bus"
 import type { WorkspaceManager } from "../workspaces/manager"
 import type { Logger } from "../logger"
-import type { BackgroundProcess, BackgroundProcessStatus } from "../api-types"
+import type { BackgroundProcess, BackgroundProcessStatus, BackgroundProcessTerminalReason } from "../api-types"
 
 const ROOT_DIR = ".codenomad/background_processes"
 const INDEX_FILE = "index.json"
@@ -27,6 +27,31 @@ interface RunningProcess {
   outputPath: string
   exitPromise: Promise<void>
   workspaceId: string
+  completion?: ProcessCompletion
+}
+
+interface ProcessCompletion {
+  reason: BackgroundProcessTerminalReason
+  endContext: "normal" | "workspace_cleanup"
+  removeAfterFinalize?: boolean
+}
+
+interface BackgroundProcessNotificationState {
+  sessionID: string
+  directory: string
+  sentAt?: string
+}
+
+interface PersistedBackgroundProcess extends BackgroundProcess {
+  notify?: BackgroundProcessNotificationState
+}
+
+interface StartOptions {
+  notify?: boolean
+  notification?: {
+    sessionID: string
+    directory: string
+  }
 }
 
 export class BackgroundProcessManager {
@@ -41,14 +66,14 @@ export class BackgroundProcessManager {
     const records = await this.readIndex(workspaceId)
     const enriched = await Promise.all(
       records.map(async (record) => ({
-        ...record,
+        ...this.toPublicProcess(record),
         outputSizeBytes: await this.getOutputSize(workspaceId, record.id),
       })),
     )
     return enriched
   }
 
-  async start(workspaceId: string, title: string, command: string): Promise<BackgroundProcess> {
+  async start(workspaceId: string, title: string, command: string, options: StartOptions = {}): Promise<BackgroundProcess> {
     const workspace = this.deps.workspaceManager.get(workspaceId)
     if (!workspace) {
       throw new Error("Workspace not found")
@@ -73,8 +98,7 @@ export class BackgroundProcessManager {
       this.killProcessTree(child, "SIGTERM")
     })
 
-    const record: BackgroundProcess = {
-
+    const record: PersistedBackgroundProcess = {
       id,
       workspaceId,
       title,
@@ -84,6 +108,20 @@ export class BackgroundProcessManager {
       pid: child.pid,
       startedAt: new Date().toISOString(),
       outputSizeBytes: 0,
+      notify: options.notify && options.notification
+        ? {
+            sessionID: options.notification.sessionID,
+            directory: options.notification.directory,
+          }
+        : undefined,
+    }
+
+    const runningState: RunningProcess = {
+      id,
+      child,
+      outputPath,
+      exitPromise: Promise.resolve(),
+      workspaceId,
     }
 
     const exitPromise = new Promise<void>((resolve) => {
@@ -91,18 +129,21 @@ export class BackgroundProcessManager {
         await new Promise<void>((resolve) => outputStream.end(resolve))
         this.running.delete(id)
 
-        record.status = this.statusFromExit(code)
+        const completion = runningState.completion ?? this.completionFromExit(code)
+
+        record.terminalReason = completion.reason
+        record.status = this.statusFromReason(completion.reason)
         record.exitCode = code === null ? undefined : code
         record.stoppedAt = new Date().toISOString()
 
-        await this.upsertIndex(workspaceId, record)
-        record.outputSizeBytes = await this.getOutputSize(workspaceId, record.id)
-        this.publishUpdate(workspaceId, record)
+        await this.finalizeRecord(workspaceId, record, completion)
         resolve()
       })
     })
 
-    this.running.set(id, { id, child, outputPath, exitPromise, workspaceId })
+    runningState.exitPromise = exitPromise
+
+    this.running.set(id, runningState)
 
     let lastPublishAt = 0
     const maybePublishSize = () => {
@@ -128,7 +169,7 @@ export class BackgroundProcessManager {
     await this.upsertIndex(workspaceId, record)
     record.outputSizeBytes = await this.getOutputSize(workspaceId, record.id)
     this.publishUpdate(workspaceId, record)
-    return record
+    return this.toPublicProcess(record)
   }
 
   async stop(workspaceId: string, processId: string): Promise<BackgroundProcess | null> {
@@ -139,19 +180,21 @@ export class BackgroundProcessManager {
 
     const running = this.running.get(processId)
     if (running?.child && !running.child.killed) {
+      running.completion = { reason: "user_stopped", endContext: "normal" }
       this.killProcessTree(running.child, "SIGTERM")
       await this.waitForExit(running)
+      const updated = await this.findProcess(workspaceId, processId)
+      return updated ? this.toPublicProcess(updated) : this.toPublicProcess(record)
     }
 
     if (record.status === "running") {
       record.status = "stopped"
+      record.terminalReason = "user_stopped"
       record.stoppedAt = new Date().toISOString()
-      await this.upsertIndex(workspaceId, record)
-      record.outputSizeBytes = await this.getOutputSize(workspaceId, record.id)
-      this.publishUpdate(workspaceId, record)
+      await this.finalizeRecord(workspaceId, record, { reason: "user_stopped", endContext: "normal" })
     }
 
-    return record
+    return this.toPublicProcess(record)
   }
 
   async terminate(workspaceId: string, processId: string): Promise<void> {
@@ -160,17 +203,19 @@ export class BackgroundProcessManager {
 
     const running = this.running.get(processId)
     if (running?.child && !running.child.killed) {
+      running.completion = { reason: "user_terminated", endContext: "normal", removeAfterFinalize: true }
       this.killProcessTree(running.child, "SIGTERM")
       await this.waitForExit(running)
+      return
     }
 
-    await this.removeFromIndex(workspaceId, processId)
-    await this.removeProcessDir(workspaceId, processId)
-
-    this.deps.eventBus.publish({
-      type: "instance.event",
-      instanceId: workspaceId,
-      event: { type: "background.process.removed", properties: { processId } },
+    record.status = "stopped"
+    record.terminalReason = "user_terminated"
+    record.stoppedAt = new Date().toISOString()
+    await this.finalizeRecord(workspaceId, record, {
+      reason: "user_terminated",
+      endContext: "normal",
+      removeAfterFinalize: true,
     })
   }
 
@@ -266,6 +311,11 @@ export class BackgroundProcessManager {
   private async cleanupWorkspace(workspaceId: string) {
     for (const [, running] of this.running.entries()) {
       if (running.workspaceId !== workspaceId) continue
+      running.completion = {
+        reason: "user_terminated",
+        endContext: "workspace_cleanup",
+        removeAfterFinalize: true,
+      }
       this.killProcessTree(running.child, "SIGTERM")
       await this.waitForExit(running)
     }
@@ -356,10 +406,17 @@ export class BackgroundProcessManager {
     return args
   }
 
-  private statusFromExit(code: number | null): BackgroundProcessStatus {
-    if (code === null) return "stopped"
-    if (code === 0) return "stopped"
-    return "error"
+  private completionFromExit(code: number | null): ProcessCompletion {
+    if (code === 0) {
+      return { reason: "finished", endContext: "normal" }
+    }
+
+    return { reason: "failed", endContext: "normal" }
+  }
+
+  private statusFromReason(reason: BackgroundProcessTerminalReason): BackgroundProcessStatus {
+    if (reason === "failed") return "error"
+    return "stopped"
   }
 
   private async readOutputBytes(outputPath: string, sizeBytes: number, maxBytes?: number): Promise<string> {
@@ -423,25 +480,25 @@ export class BackgroundProcessManager {
     return path.join(workspace.path, ROOT_DIR, workspaceId, processId, OUTPUT_FILE)
   }
 
-  private async findProcess(workspaceId: string, processId: string): Promise<BackgroundProcess | null> {
+  private async findProcess(workspaceId: string, processId: string): Promise<PersistedBackgroundProcess | null> {
     const records = await this.readIndex(workspaceId)
     return records.find((entry) => entry.id === processId) ?? null
   }
 
-  private async readIndex(workspaceId: string): Promise<BackgroundProcess[]> {
+  private async readIndex(workspaceId: string): Promise<PersistedBackgroundProcess[]> {
     const indexPath = await this.getIndexPath(workspaceId)
     if (!existsSync(indexPath)) return []
 
     try {
       const raw = await fs.readFile(indexPath, "utf-8")
       const parsed = JSON.parse(raw)
-      return Array.isArray(parsed) ? (parsed as BackgroundProcess[]) : []
+      return Array.isArray(parsed) ? (parsed as PersistedBackgroundProcess[]) : []
     } catch {
       return []
     }
   }
 
-  private async upsertIndex(workspaceId: string, record: BackgroundProcess) {
+  private async upsertIndex(workspaceId: string, record: PersistedBackgroundProcess) {
     const records = await this.readIndex(workspaceId)
     const index = records.findIndex((entry) => entry.id === record.id)
     if (index >= 0) {
@@ -458,7 +515,7 @@ export class BackgroundProcessManager {
     await this.writeIndex(workspaceId, next)
   }
 
-  private async writeIndex(workspaceId: string, records: BackgroundProcess[]) {
+  private async writeIndex(workspaceId: string, records: PersistedBackgroundProcess[]) {
     const indexPath = await this.getIndexPath(workspaceId)
     await fs.mkdir(path.dirname(indexPath), { recursive: true })
     await fs.writeFile(indexPath, JSON.stringify(records, null, 2))
@@ -503,14 +560,139 @@ export class BackgroundProcessManager {
     }
   }
 
-  private publishUpdate(workspaceId: string, record: BackgroundProcess) {
+  private publishUpdate(workspaceId: string, record: PersistedBackgroundProcess) {
     this.deps.eventBus.publish({
       type: "instance.event",
       instanceId: workspaceId,
-      event: { type: "background.process.updated", properties: { process: record } },
+      event: { type: "background.process.updated", properties: { process: this.toPublicProcess(record) } },
     })
   }
 
+  private toPublicProcess(record: PersistedBackgroundProcess): BackgroundProcess {
+    return {
+      id: record.id,
+      workspaceId: record.workspaceId,
+      title: record.title,
+      command: record.command,
+      cwd: record.cwd,
+      status: record.status,
+      pid: record.pid,
+      startedAt: record.startedAt,
+      stoppedAt: record.stoppedAt,
+      exitCode: record.exitCode,
+      outputSizeBytes: record.outputSizeBytes,
+      terminalReason: record.terminalReason,
+      notifyEnabled: Boolean(record.notify),
+    }
+  }
+
+  private async finalizeRecord(workspaceId: string, record: PersistedBackgroundProcess, completion: ProcessCompletion) {
+    if (this.shouldSendCompletionPrompt(record, completion)) {
+      try {
+        await this.sendCompletionPrompt(workspaceId, record)
+        if (record.notify) {
+          record.notify.sentAt = new Date().toISOString()
+        }
+      } catch (error) {
+        this.deps.logger.warn({ err: error, workspaceId, processId: record.id }, "Failed to send background process completion prompt")
+      }
+    }
+
+    if (completion.removeAfterFinalize) {
+      await this.removeFromIndex(workspaceId, record.id)
+      await this.removeProcessDir(workspaceId, record.id)
+
+      this.deps.eventBus.publish({
+        type: "instance.event",
+        instanceId: workspaceId,
+        event: { type: "background.process.removed", properties: { processId: record.id } },
+      })
+      return
+    }
+
+    await this.upsertIndex(workspaceId, record)
+    record.outputSizeBytes = await this.getOutputSize(workspaceId, record.id)
+    this.publishUpdate(workspaceId, record)
+  }
+
+  private shouldSendCompletionPrompt(record: PersistedBackgroundProcess, completion: ProcessCompletion) {
+    if (completion.endContext === "workspace_cleanup") return false
+    if (!record.notify) return false
+    return !record.notify.sentAt
+  }
+
+  private async sendCompletionPrompt(workspaceId: string, record: PersistedBackgroundProcess) {
+    const notify = record.notify
+    if (!notify || !record.terminalReason) return
+
+    if (!this.deps.workspaceManager.get(workspaceId)) {
+      throw new Error("Workspace not found")
+    }
+
+    const port = this.deps.workspaceManager.getInstancePort(workspaceId)
+    if (!port) {
+      throw new Error("Workspace instance is not ready")
+    }
+
+    const targetUrl = `http://127.0.0.1:${port}/session/${encodeURIComponent(notify.sessionID)}/prompt_async`
+    const headers: Record<string, string> = {
+      "content-type": "application/json",
+      "x-opencode-directory": /[^\x00-\x7F]/.test(notify.directory) ? encodeURIComponent(notify.directory) : notify.directory,
+    }
+
+    const authorization = this.deps.workspaceManager.getInstanceAuthorizationHeader(workspaceId)
+    if (authorization) {
+      headers.authorization = authorization
+    }
+
+    const response = await fetch(targetUrl, {
+      method: "POST",
+      headers,
+      body: JSON.stringify({
+        parts: [
+          {
+            type: "text",
+            text: this.buildSyntheticCompletionPrompt(record),
+            synthetic: true,
+          },
+        ],
+      }),
+    })
+
+    if (!response.ok) {
+      const message = await response.text().catch(() => "")
+      throw new Error(message || `Prompt request failed with ${response.status}`)
+    }
+  }
+
+  private buildCompletionPrompt(record: PersistedBackgroundProcess): string {
+    const ref = `Background process "${record.title}" (${record.id})`
+
+    switch (record.terminalReason) {
+      case "finished":
+        return `${ref} finished successfully.`
+      case "failed":
+        return record.exitCode === undefined ? `${ref} failed.` : `${ref} failed with exit code ${record.exitCode}.`
+      case "user_stopped":
+        return `${ref} was stopped by user.`
+      case "user_terminated":
+        return `${ref} was terminated by user.`
+    }
+
+    return `${ref} ended.`
+  }
+
+  private buildSyntheticCompletionPrompt(record: PersistedBackgroundProcess): string {
+    return `<system-message>${this.escapeTaggedText(this.buildCompletionPrompt(record))}</system-message>`
+  }
+
+  private escapeTaggedText(input: string): string {
+    return input
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+  }
+
   private generateId(): string {
     const timestamp = new Date().toISOString().replace(/[:.]/g, "").slice(0, 15)
     const random = randomBytes(3).toString("hex")

packages/server/src/server/routes/background-processes.ts

@@ -9,6 +9,21 @@ interface RouteDeps {
 const StartSchema = z.object({
   title: z.string().trim().min(1),
   command: z.string().trim().min(1),
+  notify: z.boolean().optional(),
+  notification: z
+    .object({
+      sessionID: z.string().trim().min(1),
+      directory: z.string().trim().min(1),
+    })
+    .optional(),
+}).superRefine((value, ctx) => {
+  if (value.notify && !value.notification) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: "Notification metadata is required when notify is enabled",
+      path: ["notification"],
+    })
+  }
 })
 
 const OutputQuerySchema = z.object({
@@ -27,7 +42,10 @@ export function registerBackgroundProcessRoutes(app: FastifyInstance, deps: Rout
 
   app.post<{ Params: { id: string } }>("/workspaces/:id/plugin/background-processes", async (request, reply) => {
     const payload = StartSchema.parse(request.body ?? {})
-    const process = await deps.backgroundProcessManager.start(request.params.id, payload.title, payload.command)
+    const process = await deps.backgroundProcessManager.start(request.params.id, payload.title, payload.command, {
+      notify: payload.notify,
+      notification: payload.notification,
+    })
     reply.code(201)
     return process
   })

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

@@ -13,7 +13,9 @@ use std::time::{SystemTime, UNIX_EPOCH};
 use tauri::menu::{MenuBuilder, MenuItem, SubmenuBuilder};
 use tauri::plugin::{Builder as PluginBuilder, TauriPlugin};
 use tauri::webview::Webview;
-use tauri::{AppHandle, Emitter, Manager, Runtime, WebviewUrl, WebviewWindowBuilder, WindowEvent, Wry};
+use tauri::{
+    AppHandle, Emitter, Manager, Runtime, WebviewUrl, WebviewWindowBuilder, WindowEvent, Wry,
+};
 use tauri_plugin_global_shortcut::{
     Code as ShortcutCode, GlobalShortcutExt, Shortcut, ShortcutState,
 };
@@ -31,7 +33,7 @@ use windows_sys::Win32::UI::Shell::SetCurrentProcessExplicitAppUserModelID;
 
 static QUIT_REQUESTED: AtomicBool = AtomicBool::new(false);
 const DEFAULT_ZOOM_LEVEL: f64 = 1.0;
-const ZOOM_STEP: f64 = 0.2;
+const ZOOM_STEP: f64 = 0.1;
 const MIN_ZOOM_LEVEL: f64 = 0.2;
 const MAX_ZOOM_LEVEL: f64 = 5.0;
 
@@ -129,7 +131,11 @@ fn should_allow_internal(url: &Url) -> bool {
     }
 }
 
-fn should_allow_window_origin<R: Runtime>(app_handle: &AppHandle<R>, window_label: &str, url: &Url) -> bool {
+fn should_allow_window_origin<R: Runtime>(
+    app_handle: &AppHandle<R>,
+    window_label: &str,
+    url: &Url,
+) -> bool {
     if should_allow_internal(url) {
         return true;
     }
@@ -172,7 +178,11 @@ fn open_remote_window(app: AppHandle, payload: RemoteWindowPayload) -> Result<()
 
     let parsed = Url::parse(&payload.base_url).map_err(|err| err.to_string())?;
     let label = format!("remote-{}", payload.id);
-    let title = format!("{} - {}", payload.name, parsed.host_str().unwrap_or(payload.base_url.as_str()));
+    let title = format!(
+        "{} - {}",
+        payload.name,
+        parsed.host_str().unwrap_or(payload.base_url.as_str())
+    );
 
     if let Some(existing) = app.get_webview_window(&label) {
         let _ = existing.navigate(parsed.clone());
@@ -189,12 +199,13 @@ fn open_remote_window(app: AppHandle, payload: RemoteWindowPayload) -> Result<()
         .map_err(|err| err.to_string())?
         .insert(label.clone(), parsed.origin().ascii_serialization());
 
-    let window = WebviewWindowBuilder::new(&app, label.clone(), WebviewUrl::External(parsed.clone()))
-        .title(title)
-        .inner_size(1400.0, 900.0)
-        .min_inner_size(800.0, 600.0)
-        .build()
-        .map_err(|err| err.to_string())?;
+    let window =
+        WebviewWindowBuilder::new(&app, label.clone(), WebviewUrl::External(parsed.clone()))
+            .title(title)
+            .inner_size(1400.0, 900.0)
+            .min_inner_size(800.0, 600.0)
+            .build()
+            .map_err(|err| err.to_string())?;
 
     let app_handle = app.clone();
     window.on_window_event(move |event| {

packages/ui/src/components/file-viewer/monaco-diff-viewer.tsx

@@ -1,15 +1,17 @@
-import { createEffect, createSignal, onCleanup, onMount } from "solid-js"
+import { createEffect, createMemo, createSignal, onCleanup, onMount } from "solid-js"
 import { loadMonaco } from "../../lib/monaco/setup"
 import { getOrCreateTextModel } from "../../lib/monaco/model-cache"
 import { inferMonacoLanguageId } from "../../lib/monaco/language"
 import { ensureMonacoLanguageLoaded } from "../../lib/monaco/setup"
 import { useTheme } from "../../lib/theme"
+import { parsePatchToBeforeAfter } from "../../lib/diff-utils"
 
 interface MonacoDiffViewerProps {
   scopeKey: string
   path: string
-  before: string
-  after: string
+  patch?: string
+  before?: string
+  after?: string
   viewMode?: "split" | "unified"
   contextMode?: "expanded" | "collapsed"
   wordWrap?: "on" | "off"
@@ -23,6 +25,16 @@ export function MonacoDiffViewer(props: MonacoDiffViewerProps) {
   let monaco: any = null
   const [ready, setReady] = createSignal(false)
 
+  const resolvedContent = createMemo(() => {
+    if (props.patch !== undefined && props.patch !== null) {
+      return parsePatchToBeforeAfter(props.patch)
+    }
+    return {
+      before: props.before ?? "",
+      after: props.after ?? "",
+    }
+  })
+
   const disposeEditor = () => {
     try {
       diffEditor?.setModel(null as any)
@@ -115,11 +127,12 @@ export function MonacoDiffViewer(props: MonacoDiffViewerProps) {
   createEffect(() => {
     if (!ready() || !monaco || !diffEditor) return
     const languageId = inferMonacoLanguageId(monaco, props.path)
+    const { before, after } = resolvedContent()
     const beforeKey = `${props.scopeKey}:diff:${props.path}:before`
     const afterKey = `${props.scopeKey}:diff:${props.path}:after`
 
-    const original = getOrCreateTextModel({ monaco, cacheKey: beforeKey, value: props.before, languageId })
-    const modified = getOrCreateTextModel({ monaco, cacheKey: afterKey, value: props.after, languageId })
+    const original = getOrCreateTextModel({ monaco, cacheKey: beforeKey, value: before, languageId })
+    const modified = getOrCreateTextModel({ monaco, cacheKey: afterKey, value: after, languageId })
     diffEditor.setModel({ original, modified })
 
     void ensureMonacoLanguageLoaded(languageId).then(() => {

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

@@ -115,23 +115,22 @@ const ChangesTab: Component<ChangesTabProps> = (props) => {
             }
           >
             {(file) => (
-              <Suspense
-                fallback={
-                  <div class="file-viewer-empty">
-                    <span class="file-viewer-empty-text">{props.t("instanceInfo.loading")}</span>
-                  </div>
-                }
-              >
-                <LazyMonacoDiffViewer
-                  scopeKey={scopeKey()}
-                  path={String(file().file || "")}
-                  before={String((file() as any).before || "")}
-                  after={String((file() as any).after || "")}
-                  viewMode={props.diffViewMode()}
-                  contextMode={props.diffContextMode()}
-                  wordWrap={props.diffWordWrapMode()}
-                />
-              </Suspense>
+<Suspense
+                  fallback={
+                    <div class="file-viewer-empty">
+                      <span class="file-viewer-empty-text">{props.t("instanceInfo.loading")}</span>
+                    </div>
+                  }
+                >
+                  <LazyMonacoDiffViewer
+                    scopeKey={scopeKey()}
+                    path={String(file().file || "")}
+                    patch={String((file() as any).patch || "")}
+                    viewMode={props.diffViewMode()}
+                    contextMode={props.diffContextMode()}
+                    wordWrap={props.diffWordWrapMode()}
+                  />
+                </Suspense>
             )}
           </Show>
         </div>

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

@@ -4,7 +4,7 @@ import { Accordion } from "@kobalte/core"
 import { Tooltip } from "@kobalte/core/tooltip"
 import Switch from "@suid/material/Switch"
 
-import { ChevronDown, Info, TerminalSquare, Trash2, XOctagon } from "lucide-solid"
+import { BellRing, ChevronDown, Info, TerminalSquare, Trash2, XOctagon } from "lucide-solid"
 
 import type { Instance } from "../../../../../types/instance"
 import type { BackgroundProcess } from "../../../../../../../server/src/api-types"
@@ -187,6 +187,24 @@ const StatusTab: Component<StatusTabProps> = (props) => {
               <div class="status-process-header">
                 <span class="status-process-title">{process.title}</span>
                 <div class="status-process-meta">
+                  <span
+                    classList={{
+                      "text-success": Boolean(process.notifyEnabled),
+                      "text-tertiary": !process.notifyEnabled,
+                    }}
+                    aria-label={props.t(
+                      process.notifyEnabled
+                        ? "instanceShell.backgroundProcesses.notify.enabled"
+                        : "instanceShell.backgroundProcesses.notify.disabled",
+                    )}
+                    title={props.t(
+                      process.notifyEnabled
+                        ? "instanceShell.backgroundProcesses.notify.enabled"
+                        : "instanceShell.backgroundProcesses.notify.disabled",
+                    )}
+                  >
+                    <BellRing class="h-3.5 w-3.5" />
+                  </span>
                   <span>{props.t("instanceShell.backgroundProcesses.status", { status: process.status })}</span>
                   <Show when={typeof process.outputSizeBytes === "number"}>
                     <span>

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

@@ -3,7 +3,7 @@ import { ChevronsDownUp, ChevronsUpDown, ExternalLink, FoldVertical, ListStart,
 import MessageItem from "./message-item"
 import type { InstanceMessageStore } from "../stores/message-v2/instance-store"
 import type { ClientPart, MessageInfo } from "../types/message"
-import { partHasRenderableText } from "../types/message"
+import { isHiddenSyntheticTextPart, partHasRenderableText } from "../types/message"
 import { buildRecordDisplayData, clearRecordDisplayCacheForInstance } from "../stores/message-v2/record-display-cache"
 import type { MessageRecord } from "../stores/message-v2/types"
 import { messageStoreBus } from "../stores/message-v2/bus"
@@ -231,6 +231,12 @@ function isContentPartType(type: unknown): boolean {
   return type === "text" || type === "file"
 }
 
+function isVisibleContentPart(part: ClientPart): boolean {
+  if (!part || !isContentPartType((part as any).type)) return false
+  if (isHiddenSyntheticTextPart(part)) return false
+  return partHasRenderableText(part)
+}
+
 function MessageContentItem(props: MessageContentItemProps) {
   const record = createMemo(() => props.store().getMessage(props.messageId))
   const messageInfo = createMemo(() => props.store().getMessageInfo(props.messageId))
@@ -264,13 +270,15 @@ function MessageContentItem(props: MessageContentItemProps) {
     return resolved
   })
 
+  const visibleParts = createMemo(() => parts().filter((part) => isVisibleContentPart(part)))
+
   const showAgentMeta = createMemo(() => {
     const current = record()
     if (!current) return false
     if (current.role !== "assistant") return false
 
     const currentParts = parts()
-    if (!currentParts.some((part) => partHasRenderableText(part))) {
+    if (visibleParts().length === 0) {
       return false
     }
 
@@ -286,10 +294,10 @@ function MessageContentItem(props: MessageContentItemProps) {
       if (!isSupportedPartType(part)) continue
 
       if (!isContentPartType((part as any).type)) continue
-      if (partHasRenderableText(part)) {
-        return false
+        if (isVisibleContentPart(part)) {
+          return false
+        }
       }
-    }
 
     return true
   })
@@ -300,7 +308,7 @@ function MessageContentItem(props: MessageContentItemProps) {
         <MessageItem
           record={resolvedRecord()}
           messageInfo={messageInfo()}
-          parts={parts()}
+          parts={visibleParts()}
           instanceId={props.instanceId}
           sessionId={props.sessionId}
           isQueued={isQueued()}
@@ -621,13 +629,12 @@ export default function MessageBlock(props: MessageBlockProps) {
     const lastAssistantIdx = props.lastAssistantIndex()
     const isQueued = current.role === "user" && (lastAssistantIdx === -1 || index > lastAssistantIdx)
 
-    // Intentionally untracked: messageInfoVersion updates should not trigger
-    // a full message block rebuild; record revision is the invalidation key.
-    const info = untrack(messageInfo)
+    const messageInfoVersion = props.store().state.messageInfoVersion[current.id] ?? 0
 
     const cacheSignature = [
       current.id,
       current.revision,
+      messageInfoVersion,
       isQueued ? 1 : 0,
       props.showThinking() ? 1 : 0,
       props.thinkingDefaultExpanded() ? 1 : 0,
@@ -639,6 +646,9 @@ export default function MessageBlock(props: MessageBlockProps) {
       return cachedBlock.block
     }
 
+    // Only capture info after cache check fails - ensures fresh data on version bump
+    const info = untrack(messageInfo)
+
     const { orderedParts } = buildRecordDisplayData(props.instanceId, current)
     const items: MessageBlockItem[] = []
     const blockContentKeys: string[] = []
@@ -1100,17 +1110,23 @@ function StepCard(props: StepCardProps) {
       return null
     }
     const info = props.messageInfo
-    if (!info || info.role !== "assistant" || !info.tokens) {
+    const part = props.part as any
+    
+    // step-finish parts have tokens embedded; also check messageInfo
+    const partTokens = part?.tokens
+    const infoTokens = info && info.role === "assistant" ? info.tokens : undefined
+    const tokens = partTokens ?? infoTokens
+    if (!tokens) {
       return null
     }
-    const tokens = info.tokens
+    
     return {
       input: tokens.input ?? 0,
       output: tokens.output ?? 0,
       reasoning: tokens.reasoning ?? 0,
       cacheRead: tokens.cache?.read ?? 0,
       cacheWrite: tokens.cache?.write ?? 0,
-      cost: info.cost ?? 0,
+      cost: (part?.cost ?? (info && info.role === "assistant" ? info.cost : 0)) ?? 0,
     }
   }
 
@@ -1328,9 +1344,7 @@ function ReasoningStreamOutput(props: {
     if (preRef && preRef.textContent !== nextText) {
       preRef.textContent = nextText
     }
-    if (followScroll.autoScroll()) {
-      followScroll.restoreAfterRender({ forceBottom: true })
-    }
+    followScroll.restoreAfterRender()
     notifyContentRendered()
   })
 

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

@@ -2,7 +2,7 @@ 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"
+import { isHiddenSyntheticTextPart, partHasRenderableText } from "../types/message"
 import type { MessageRecord } from "../stores/message-v2/types"
 import MessagePart from "./message-part"
 import { copyToClipboard } from "../lib/clipboard"
@@ -290,9 +290,9 @@ export default function MessageItem(props: MessageItemProps) {
 
   const getRawContent = () => {
     return props.parts
-      .filter(part => part.type === "text")
-      .map(part => (part as { text?: string }).text || "")
-      .filter(text => text.trim().length > 0)
+      .filter((part) => part.type === "text" && !isHiddenSyntheticTextPart(part))
+      .map((part) => (part as { text?: string }).text || "")
+      .filter((text) => text.trim().length > 0)
       .join("\n\n")
   }
 
@@ -338,7 +338,7 @@ export default function MessageItem(props: MessageItemProps) {
     }
   }
 
-  if (!isUser() && !hasContent() && !isGenerating()) {
+  if (!hasContent() && !isGenerating()) {
     return null
   }
 

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

@@ -33,19 +33,7 @@ export default function MessagePart(props: MessagePartProps) {
   const shouldHideTextPart = () => {
     const part = props.part
     if (!part || part.type !== "text") return false
-
-    const isSynthetic = Boolean((part as any).synthetic)
-    if (!isSynthetic) return false
-
-    // Keep optimistic user prompts visible; hide other synthetic user helper parts.
-    if (props.messageType === "user") {
-      const primaryId = props.primaryUserTextPartId
-      if (!primaryId) return false
-      return part.id !== primaryId
-    }
-
-    // Hide synthetic assistant text.
-    return true
+    return Boolean((part as any).synthetic)
   }
 
 

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

@@ -1,5 +1,5 @@
 import { Show, createEffect, createMemo, createSignal, onCleanup, on, untrack } from "solid-js"
-import { MoreHorizontal, Trash, X } from "lucide-solid"
+import { MoreHorizontal, Pause, Trash, X } from "lucide-solid"
 import Kbd from "./kbd"
 import MessageBlock from "./message-block"
 import { getMessageAnchorId, getMessageIdFromAnchorId } from "./message-anchors"
@@ -16,12 +16,14 @@ import { showAlertDialog } from "../stores/alerts"
 import { deleteMessage, deleteMessagePart } from "../stores/session-actions"
 import type { InstanceMessageStore } from "../stores/message-v2/instance-store"
 import type { DeleteHoverState } from "../types/delete-hover"
+import { partHasRenderableText } from "../types/message"
 import { buildRecordDisplayData } from "../stores/message-v2/record-display-cache"
 import { getPartCharCount } from "../lib/token-utils"
 
 const SCROLL_SENTINEL_MARGIN_PX = 8
 const MESSAGE_SCROLL_CACHE_SCOPE = "message-stream"
 const QUOTE_SELECTION_MAX_LENGTH = 2000
+const STREAMING_TEXT_HOLD_TOP_THRESHOLD_PX = 8
 const codeNomadLogo = new URL("../images/CodeNomad-Icon.png", import.meta.url).href
 
 export interface MessageSectionProps {
@@ -40,12 +42,40 @@ export interface MessageSectionProps {
 }
 
 export default function MessageSection(props: MessageSectionProps) {
-  const { preferences } = useConfig()
+  const { preferences, updatePreferences } = useConfig()
   const { t } = useI18n()
   const showUsagePreference = () => preferences().showUsageMetrics ?? true
   const showTimelineToolsPreference = () => preferences().showTimelineTools ?? true
+  const holdLongAssistantRepliesEnabled = () => preferences().holdLongAssistantReplies ?? true
   const store = createMemo<InstanceMessageStore>(() => messageStoreBus.getOrCreate(props.instanceId))
   const messageIds = createMemo(() => store().getSessionMessageIds(props.sessionId))
+  const visibleMessageIds = createMemo(() => {
+    const resolvedStore = store()
+    return messageIds().filter((messageId) => {
+      const record = resolvedStore.getMessage(messageId)
+      if (!record) return false
+
+      if (buildTimelineSegments(props.instanceId, record, t).length > 0) {
+        return true
+      }
+
+      if (record.role !== "assistant") {
+        return false
+      }
+
+      const info = resolvedStore.getMessageInfo(messageId)
+      if (!info || info.role !== "assistant") {
+        return false
+      }
+
+      if (info.error) {
+        return true
+      }
+
+      const timeInfo = info.time as { created: number; end?: number } | undefined
+      return Boolean(timeInfo && (timeInfo.end === undefined || timeInfo.end === 0))
+    })
+  })
 
   const scrollCache = useScrollCache({
     instanceId: props.instanceId,
@@ -567,7 +597,10 @@ export default function MessageSection(props: MessageSectionProps) {
   const [streamElement, setStreamElement] = createSignal<HTMLDivElement | undefined>()
   const [streamShellElement, setStreamShellElement] = createSignal<HTMLDivElement | undefined>()
 
-  const followToken = createMemo(() => `${sessionRevision()}|${preferenceSignature()}`)
+  // Only preferences should force a follow-token re-anchor. Message/session
+  // revision churn at the end of a turn (message.updated, session.idle, etc.)
+  // should not trigger an immediate scroll-to-bottom.
+  const followToken = createMemo(() => preferenceSignature())
 
   const initialScrollSnapshot = createMemo(() => store().getScrollSnapshot(props.sessionId, MESSAGE_SCROLL_CACHE_SCOPE))
   const initialAutoScroll = createMemo(() => initialScrollSnapshot()?.atBottom ?? true)
@@ -597,6 +630,35 @@ export default function MessageSection(props: MessageSectionProps) {
 
   const [quoteSelection, setQuoteSelection] = createSignal<{ text: string; top: number; left: number } | null>(null)
 
+  const lastVisibleMessageId = createMemo(() => {
+    const ids = visibleMessageIds()
+    return ids[ids.length - 1] ?? null
+  })
+
+  const autoPinHoldTargetKey = createMemo(() => {
+    if (!holdLongAssistantRepliesEnabled()) return null
+    const messageId = lastVisibleMessageId()
+    return isAssistantTextMessage(messageId) ? messageId : null
+  })
+
+  function toggleHoldLongAssistantReplies() {
+    updatePreferences({ holdLongAssistantReplies: !holdLongAssistantRepliesEnabled() })
+  }
+
+  function isAssistantTextMessage(messageId: string | null | undefined) {
+    if (!messageId) return false
+    const resolvedStore = store()
+    const record = resolvedStore.getMessage(messageId)
+    if (!record || record.role !== "assistant") return false
+
+    const { orderedParts } = buildRecordDisplayData(props.instanceId, record)
+    return orderedParts.some((part) => {
+      if ((part as any)?.type !== "text") return false
+      if (partHasRenderableText(part)) return true
+      return typeof (part as { text?: unknown }).text === "string"
+    })
+  }
+
   createEffect(() => {
     const api = listApi()
     if (!api) return
@@ -611,7 +673,7 @@ export default function MessageSection(props: MessageSectionProps) {
     const api = listApi()
     if (!element || !api) return
     if (props.loading) return
-    if (messageIds().length === 0) return
+    if (visibleMessageIds().length === 0) return
     if (didRestoreScroll()) return
 
     scrollCache.restore(element, {
@@ -1003,7 +1065,7 @@ export default function MessageSection(props: MessageSectionProps) {
         data-scroll-buttons={scrollButtonsCount()}
       >
         <VirtualFollowList
-          items={messageIds}
+          items={visibleMessageIds}
           getKey={(messageId) => messageId}
           getAnchorId={getMessageAnchorId}
           getKeyFromAnchorId={getMessageIdFromAnchorId}
@@ -1017,6 +1079,12 @@ export default function MessageSection(props: MessageSectionProps) {
           initialAutoScroll={initialAutoScroll}
           resetKey={() => props.sessionId}
           followToken={followToken}
+          autoPinHoldTargetKey={autoPinHoldTargetKey}
+          autoPinHoldTopThresholdPx={STREAMING_TEXT_HOLD_TOP_THRESHOLD_PX}
+          resolveAutoPinHoldElement={(itemWrapper, key) => {
+            const candidates = Array.from(itemWrapper.querySelectorAll<HTMLElement>(`.message-item-base[data-message-id="${key}"][data-message-role="assistant"]`))
+            return candidates[candidates.length - 1] ?? null
+          }}
           onScroll={() => {
             clearQuoteSelection()
             scrollCache.persist(streamElement())
@@ -1047,9 +1115,55 @@ export default function MessageSection(props: MessageSectionProps) {
           scrollToBottomAriaLabel={() => t("messageSection.scroll.toLatestAriaLabel")}
           registerApi={(api) => setListApi(api)}
           registerState={(state) => setListState(state)}
+          renderControls={(state, api) => (
+            <div class="message-scroll-button-wrapper">
+              <button
+                type="button"
+                class="message-scroll-button"
+                data-active={holdLongAssistantRepliesEnabled() ? "true" : "false"}
+                onClick={toggleHoldLongAssistantReplies}
+                aria-label={
+                  holdLongAssistantRepliesEnabled()
+                    ? t("messageSection.scroll.disableHoldAriaLabel")
+                    : t("messageSection.scroll.enableHoldAriaLabel")
+                }
+                title={
+                  holdLongAssistantRepliesEnabled()
+                    ? t("messageSection.scroll.disableHoldAriaLabel")
+                    : t("messageSection.scroll.enableHoldAriaLabel")
+                }
+              >
+                <Pause class="message-scroll-icon message-scroll-icon--toggle w-4 h-4" aria-hidden="true" />
+              </button>
+              <Show when={state.showScrollTopButton()}>
+                <button
+                  type="button"
+                  class="message-scroll-button"
+                  onClick={() => api.scrollToTop()}
+                  aria-label={t("messageSection.scroll.toFirstAriaLabel")}
+                >
+                  <span class="message-scroll-icon" aria-hidden="true">
+                    ↑
+                  </span>
+                </button>
+              </Show>
+              <Show when={state.showScrollBottomButton()}>
+                <button
+                  type="button"
+                  class="message-scroll-button"
+                  onClick={() => api.scrollToBottom()}
+                  aria-label={t("messageSection.scroll.toLatestAriaLabel")}
+                >
+                  <span class="message-scroll-icon" aria-hidden="true">
+                    ↓
+                  </span>
+                </button>
+              </Show>
+            </div>
+          )}
           renderBeforeItems={() => (
             <>
-              <Show when={!props.loading && messageIds().length === 0}>
+              <Show when={!props.loading && visibleMessageIds().length === 0}>
                 <div class="empty-state">
                   <div class="empty-state-content">
                     <div class="flex flex-col items-center gap-3 mb-6">

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

@@ -1,7 +1,10 @@
 import { For, Show, createEffect, createMemo, createSignal, onCleanup, on, untrack, type Component, type Accessor } from "solid-js"
+import { Virtualizer, type VirtualizerHandle } from "virtua/solid"
+import { Portal } from "solid-js/web"
 import MessagePreview from "./message-preview"
 import { messageStoreBus } from "../stores/message-v2/bus"
 import type { ClientPart } from "../types/message"
+import { isHiddenSyntheticTextPart } 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"
@@ -53,6 +56,7 @@ const MAX_TOOLTIP_LENGTH = 220
 const LONG_PRESS_MS = 500
 const JITTER_THRESHOLD = 10
 const ABSOLUTE_TOKEN_CAP = 10000
+const TIMELINE_VIRTUALIZER_BUFFER_PX = 240
 
 type ToolCallPart = Extract<ClientPart, { type: "tool" }>
 
@@ -65,6 +69,13 @@ interface PendingSegment {
   hasPrimaryText: boolean
 }
 
+interface TimelineSegmentState {
+  deleteHovered: boolean
+  deleteSelected: boolean
+  hasActivePermission: boolean
+  hidden: boolean
+}
+
 function truncateText(value: string): string {
   if (value.length <= MAX_TOOLTIP_LENGTH) {
     return value
@@ -105,6 +116,7 @@ function collectReasoningText(part: ClientPart): string {
 
 function collectTextFromPart(part: ClientPart, t: (key: string, params?: Record<string, unknown>) => string): string {
   if (!part) return ""
+  if (isHiddenSyntheticTextPart(part)) return ""
   if (typeof (part as any).text === "string") {
     return (part as any).text as string
   }
@@ -349,6 +361,13 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
     }
   }
 
+  const clearHoverPreview = () => {
+    clearHoverTimer()
+    clearCloseTimer()
+    setHoveredSegment(null)
+    setHoverAnchorRect(null)
+  }
+
   const scheduleClose = () => {
     if (typeof window === "undefined") return
     clearHoverTimer()
@@ -356,8 +375,7 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
     // Small delay so the pointer can travel from the segment to the tooltip.
     closeTimer = window.setTimeout(() => {
       closeTimer = null
-      setHoveredSegment(null)
-      setHoverAnchorRect(null)
+      clearHoverPreview()
     }, 160)
   }
 
@@ -397,8 +415,7 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
   })
 
   onCleanup(() => {
-    clearHoverTimer()
-    clearCloseTimer()
+    clearHoverPreview()
   })
 
   // --- Selection & histogram rib state ---
@@ -416,6 +433,8 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
   // 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)
+  const [scrollElement, setScrollElement] = createSignal<HTMLDivElement | undefined>()
+  const [virtualizerHandle, setVirtualizerHandle] = createSignal<VirtualizerHandle | undefined>()
   let scrollContainerRef: HTMLDivElement | undefined
   let xrayOverlayRef: HTMLDivElement | undefined
 
@@ -447,6 +466,12 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
   }
 
   const handleScroll = () => {
+    if (renderVirtualizedTimeline()) {
+      if (hoveredSegment()) {
+        clearHoverPreview()
+      }
+      return
+    }
     if (!isSelectionActive()) return
     if (!scrollContainerRef || !xrayOverlayRef) return
     xrayOverlayRef.style.setProperty("--xray-scroll-y", `${-scrollContainerRef.scrollTop}px`)
@@ -475,6 +500,12 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
     }
   })
 
+  const renderVirtualizedTimeline = createMemo(() => !isSelectionActive())
+
+  createEffect(on(renderVirtualizedTimeline, () => {
+    clearHoverPreview()
+  }))
+
   const maxRibWidth = createMemo(() => Math.round(windowWidth() * 0.5))
 
   // Compute fresh char counts from the store. segment.totalChars can be stale for
@@ -577,7 +608,7 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
         wasLongPress = true
 
         // Scroll anchoring: preserve visual position of the pressed badge.
-        const btn = buttonRefs.get(segment.id)
+        const btn = renderVirtualizedTimeline() ? null : buttonRefs.get(segment.id)
         let anchorOffset: number | null = null
         if (btn && scrollContainerRef) {
           anchorOffset = btn.offsetTop - scrollContainerRef.scrollTop
@@ -629,9 +660,17 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
 
   createEffect(on(() => props.activeSegmentId, (activeId) => {
     if (!activeId) return
-    const element = buttonRefs.get(activeId)
-    if (!element) return
     const timer = typeof window !== "undefined" ? window.setTimeout(() => {
+      if (renderVirtualizedTimeline()) {
+        const index = segmentIndexById().get(activeId)
+        if (index !== undefined) {
+          virtualizerHandle()?.scrollToIndex(index, { align: "nearest", smooth: true })
+        }
+        return
+      }
+
+      const element = buttonRefs.get(activeId)
+      if (!element) return
       element.scrollIntoView({ block: "nearest", behavior: "smooth" })
     }, 120) : null
     onCleanup(() => {
@@ -682,60 +721,239 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
     return map
   })
 
+  const segmentIndexById = createMemo(() => {
+    const map = new Map<string, number>()
+    for (let i = 0; i < props.segments.length; i++) map.set(props.segments[i].id, i)
+    return map
+  })
+
+  const segmentStates = createMemo(() => {
+    const hover = deleteHover()
+    const selectedMessages = props.selectedMessageIds?.()
+    const expandedMessages = props.expandedMessageIds?.()
+    const resolvedStore = store()
+    const indexMap = messageIdToSessionIndex()
+    const selectionActive = isSelectionActive()
+    const result = new Map<string, TimelineSegmentState>()
+
+    for (const segment of props.segments) {
+      let deleteHovered = false
+      if (hover.kind === "message") {
+        deleteHovered = hover.messageId === segment.messageId
+      } else if (hover.kind === "deleteUpTo") {
+        const targetIndex = indexMap.get(hover.messageId)
+        const segmentIndex = indexMap.get(segment.messageId)
+        deleteHovered = targetIndex !== undefined && segmentIndex !== undefined && segmentIndex >= targetIndex
+      }
+
+      const deleteSelected = selectedMessages?.has(segment.messageId) ?? false
+
+      let hasActivePermission = false
+      if (segment.type === "tool") {
+        const partIds = segment.toolPartIds ?? []
+        for (const partId of partIds) {
+          const permissionState = resolvedStore.getPermissionState(segment.messageId, partId)
+          if (permissionState?.active) {
+            hasActivePermission = true
+            break
+          }
+        }
+      }
+
+      const hidden = segment.type === "tool" && !(
+        showTools()
+        || expandedMessages?.has(segment.messageId)
+        || selectionActive
+        || props.activeSegmentId === segment.id
+        || hasActivePermission
+        || deleteHovered
+        || deleteSelected
+      )
+
+      result.set(segment.id, {
+        deleteHovered,
+        deleteSelected,
+        hasActivePermission,
+        hidden,
+      })
+    }
+
+    return result
+  })
+
+  const segmentStateFor = (segmentId: string): TimelineSegmentState => {
+    return segmentStates().get(segmentId) ?? {
+      deleteHovered: false,
+      deleteSelected: false,
+      hasActivePermission: false,
+      hidden: false,
+    }
+  }
+
+  const segmentSpacerHeights = createMemo(() => {
+    const states = segmentStates()
+    const result = new Map<string, string>()
+    let previousVisible: TimelineSegment | null = null
+
+    for (let index = 0; index < props.segments.length; index += 1) {
+      const segment = props.segments[index]
+      const state = states.get(segment.id)
+
+      if (state?.hidden) {
+        result.set(segment.id, "0")
+        continue
+      }
+
+      if (!previousVisible) {
+        result.set(segment.id, "0")
+        previousVisible = segment
+        continue
+      }
+
+      const previousRaw = index > 0 ? props.segments[index - 1] : null
+      const startsVisibleToolGroup = segment.type === "tool"
+        && (previousVisible.type !== "tool" || previousVisible.messageId !== segment.messageId)
+      const startsCollapsedToolGroup = segment.type === "assistant"
+        && previousVisible.messageId !== segment.messageId
+        && messagesWithTools().has(segment.messageId)
+        && previousRaw?.type === "tool"
+        && previousRaw.messageId === segment.messageId
+      const followsVisibleGroupParent = (segment.type === "user" || segment.type === "compaction")
+        && previousVisible.type === "assistant"
+        && messagesWithTools().has(previousVisible.messageId)
+
+      const gapUnits = 1 + (startsVisibleToolGroup || startsCollapsedToolGroup || followsVisibleGroupParent ? 1 : 0)
+      result.set(
+        segment.id,
+        gapUnits === 1
+          ? "var(--message-timeline-segment-gap)"
+          : "calc(var(--message-timeline-segment-gap) * 2)",
+      )
+
+      previousVisible = segment
+    }
+
+    return result
+  })
+
   return (
     <div class="message-timeline-container">
       <div
-        ref={scrollContainerRef}
+        ref={(element) => {
+          scrollContainerRef = element
+          setScrollElement(element)
+        }}
         class={`message-timeline${isSelectionActive() ? " message-timeline--selection-active" : ""}`}
         role="navigation"
         aria-label={t("messageTimeline.ariaLabel")}
         onScroll={handleScroll}
       >
-        <For each={props.segments}>
-          {(segment, segIndex) => {
-            onCleanup(() => buttonRefs.delete(segment.id))
+        <Show
+          when={renderVirtualizedTimeline()}
+          fallback={(
+            <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 state = () => segmentStateFor(segment.id)
+                const isDeleteHovered = () => state().deleteHovered
+                const isDeleteSelected = () => state().deleteSelected
+                const hasActivePermission = () => state().hasActivePermission
+                const isHidden = () => state().hidden
+
+                const groupRole = (): "child" | "parent" | "none" => {
+                  if (segment.type === "tool") return "child"
+                  if (segment.type === "assistant" && messagesWithTools().has(segment.messageId)) return "parent"
+                  return "none"
+                }
+
+                const shortLabelContent = () => {
+                  if (segment.type === "tool") {
+                    if (hasActivePermission()) {
+                      return <ShieldAlert class="message-timeline-icon" aria-hidden="true" />
+                    }
+                    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" />
+                }
+
+                return (
+                  <div class="message-timeline-item">
+                    <div aria-hidden="true" class="message-timeline-item-spacer" style={{ height: segmentSpacerHeights().get(segment.id) ?? "0" }} />
+                    <button
+                      ref={(el) => registerButtonRef(segment.id, el)}
+                      type="button"
+                      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" : ""} ${isSelected() ? "message-timeline-segment-selected" : ""} ${isDeleteSelected() ? "message-timeline-segment-delete-selected" : ""} ${groupRole() !== "none" ? `message-timeline-group-${groupRole()}` : ""}`}
+                      data-delete-hover={isDeleteHovered() || isDeleteSelected() || isSelected() ? "true" : undefined}
+                      aria-current={isActive() ? "true" : undefined}
+                      aria-hidden={isHidden() ? "true" : undefined}
+                      onClick={(event) => {
+                        if (wasLongPress) {
+                          wasLongPress = false
+                          return
+                        }
+
+                        const btn = buttonRefs.get(segment.id)
+                        const stableBtn = renderVirtualizedTimeline() ? null : btn
+                        let anchorOffset: number | null = null
+                        if (stableBtn && scrollContainerRef) {
+                          anchorOffset = stableBtn.offsetTop - scrollContainerRef.scrollTop
+                        }
+
+                        const isMultiSelectActive = (props.selectedIds?.().size ?? 0) > 0
+
+                        if (event.shiftKey) {
+                          props.onSelectRange?.(segment.id)
+                        } else if (event.ctrlKey || event.metaKey) {
+                          props.onToggleSelection?.(segment.id)
+                        } else if (isMultiSelectActive) {
+                          props.onSegmentClick?.(segment)
+                        } else {
+                          props.onSegmentClick?.(segment)
+                        }
+
+                        if (anchorOffset !== null && stableBtn && scrollContainerRef) {
+                          const desired = stableBtn.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>
+                  </div>
+                )
+              }}
+            </For>
+          )}
+        >
+          <Virtualizer ref={setVirtualizerHandle} data={props.segments} scrollRef={scrollElement()} bufferSize={TIMELINE_VIRTUALIZER_BUFFER_PX}>
+            {(segment, index) => {
+              const segIndex = () => index()
             const isActive = () => props.activeSegmentId === segment.id
             const isSelected = () => props.selectedIds?.().has(segment.id)
-
-            const isDeleteHovered = () => {
-              const hover = deleteHover() as DeleteHoverState
-              if (hover.kind === "message") {
-                return hover.messageId === segment.messageId
-              }
-
-              if (hover.kind === "deleteUpTo") {
-                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
-            }
-
-            const isDeleteSelected = () => {
-              const selected = props.selectedMessageIds?.()
-              if (!selected) return false
-              return selected.has(segment.messageId)
-            }
-
-            const hasActivePermission = () => {
-              if (segment.type !== "tool") return false
-              const partIds = segment.toolPartIds ?? []
-              if (partIds.length === 0) return false
-              for (const partId of partIds) {
-                const permissionState = store().getPermissionState(segment.messageId, partId)
-                if (permissionState?.active) return true
-              }
-              return false
-            }
-
-            const isExpanded = () => props.expandedMessageIds?.().has(segment.messageId) ?? false
-            const isHidden = () =>
-              segment.type === "tool" &&
-              !(showTools() || isExpanded() || isSelectionActive() || isActive() || hasActivePermission() || isDeleteHovered() || isDeleteSelected())
+            const state = () => segmentStateFor(segment.id)
+            const isDeleteHovered = () => state().deleteHovered
+            const isDeleteSelected = () => state().deleteSelected
+            const hasActivePermission = () => state().hasActivePermission
+            const isHidden = () => state().hidden
 
             // Group visual indicators: tools belong to the same message as their
             // assistant.  Uses messageId for correctness (not positional adjacency).
@@ -744,18 +962,10 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
               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()) {
+                  if (hasActivePermission()) {
                    return <ShieldAlert class="message-timeline-icon" aria-hidden="true" />
                  }
                  return segment.shortLabel ?? getToolIcon("tool")
@@ -765,95 +975,92 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
                }
                if (segment.type === "user") {
                  return <UserIcon class="message-timeline-icon" aria-hidden="true" />
-               }
-               return <BotIcon class="message-timeline-icon" aria-hidden="true" />
-             }
+                }
+                return <BotIcon class="message-timeline-icon" aria-hidden="true" />
+              }
 
-            return (
-              <button
-                  ref={(el) => registerButtonRef(segment.id, el)}
-                  type="button"
-                  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" : ""} ${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() || isDeleteSelected() || isSelected() ? "true" : undefined}
-
-                 aria-current={isActive() ? "true" : undefined}
-                 aria-hidden={isHidden() ? "true" : undefined}
-                 onClick={(event) => {
-                   if (wasLongPress) {
-                     wasLongPress = false
-                     return
-                   }
-
-                   // Capture scroll anchor before selection changes may toggle
-                   // tool segment visibility, which shifts timeline layout.
-                   const btn = buttonRefs.get(segment.id)
-                   let anchorOffset: number | null = null
-                   if (btn && scrollContainerRef) {
-                     anchorOffset = btn.offsetTop - scrollContainerRef.scrollTop
-                   }
-
-                   const isMultiSelectActive = (props.selectedIds?.().size ?? 0) > 0
-
-                   if (event.shiftKey) {
-                     props.onSelectRange?.(segment.id)
-                   } else if (event.ctrlKey || event.metaKey) {
-                     props.onToggleSelection?.(segment.id)
-                   } else if (isMultiSelectActive) {
-                     // In selection mode, plain click scrolls to the message
-                     // instead of clearing. Selection is cleared by clicking
-                     // anywhere inside the chat container or pressing Esc.
-                     props.onSegmentClick?.(segment)
-                   } else {
-                     props.onSegmentClick?.(segment)
-                   }
-
-                   // Restore scroll anchor: keep the clicked badge at the same
-                   // visual position after hidden tools appear or disappear.
-                   if (anchorOffset !== null && btn && scrollContainerRef) {
-                     const desired = btn.offsetTop - anchorOffset
-                     if (Math.abs(scrollContainerRef.scrollTop - desired) > 1) {
-                       scrollContainerRef.scrollTop = desired
+              return (
+               <div class="message-timeline-item">
+                  <div aria-hidden="true" class="message-timeline-item-spacer" style={{ height: segmentSpacerHeights().get(segment.id) ?? "0" }} />
+                  <button
+                    type="button"
+                    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" : ""} ${isSelected() ? "message-timeline-segment-selected" : ""} ${isDeleteSelected() ? "message-timeline-segment-delete-selected" : ""} ${groupRole() !== "none" ? `message-timeline-group-${groupRole()}` : ""}`}
+                   data-delete-hover={isDeleteHovered() || isDeleteSelected() || isSelected() ? "true" : undefined}
+                   aria-current={isActive() ? "true" : undefined}
+                   aria-hidden={isHidden() ? "true" : undefined}
+                   onClick={(event) => {
+                     if (wasLongPress) {
+                       wasLongPress = false
+                       return
                      }
-                   }
-                 }}
-                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>
+
+                     const btn = buttonRefs.get(segment.id)
+                     const stableBtn = renderVirtualizedTimeline() ? null : btn
+                     let anchorOffset: number | null = null
+                     if (stableBtn && scrollContainerRef) {
+                       anchorOffset = stableBtn.offsetTop - scrollContainerRef.scrollTop
+                     }
+
+                     const isMultiSelectActive = (props.selectedIds?.().size ?? 0) > 0
+
+                     if (event.shiftKey) {
+                       props.onSelectRange?.(segment.id)
+                     } else if (event.ctrlKey || event.metaKey) {
+                       props.onToggleSelection?.(segment.id)
+                     } else if (isMultiSelectActive) {
+                       props.onSegmentClick?.(segment)
+                     } else {
+                       props.onSegmentClick?.(segment)
+                     }
+
+                     if (anchorOffset !== null && stableBtn && scrollContainerRef) {
+                       const desired = stableBtn.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>
+               </div>
+             )
+            }}
+          </Virtualizer>
+        </Show>
         <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>
+              <Portal>
+                <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>
+              </Portal>
             )
           }}
         </Show>

packages/ui/src/components/prompt-input/usePromptVoiceInput.ts

@@ -169,18 +169,25 @@ export function usePromptVoiceInput(options: UsePromptVoiceInputOptions) {
     const textarea = options.getTextarea()
     const start = textarea ? textarea.selectionStart : current.length
     const end = textarea ? textarea.selectionEnd : current.length
+    const wasCursorAtEnd = end === current.length
+    const wasScrolledToBottom = textarea
+      ? textarea.scrollHeight - (textarea.scrollTop + textarea.clientHeight) <= 4
+      : false
     const before = current.slice(0, start)
     const after = current.slice(end)
-    const prefix = before.length > 0 && !/\s$/.test(before) ? " " : ""
-    const suffix = after.length > 0 && !/^\s/.test(after) ? " " : ""
+    const prefix = ""
+    const suffix = after.length > 0 ? (/^\s/.test(after) ? "" : " ") : " "
     const nextValue = `${before}${prefix}${text}${suffix}${after}`
-    const cursor = before.length + prefix.length + text.length
+    const cursor = before.length + prefix.length + text.length + suffix.length
 
     options.setPrompt(nextValue)
     if (textarea) {
       setTimeout(() => {
         textarea.focus()
         textarea.setSelectionRange(cursor, cursor)
+        if (wasCursorAtEnd || wasScrolledToBottom) {
+          textarea.scrollTop = textarea.scrollHeight
+        }
       }, 0)
     }
   }

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

@@ -79,11 +79,17 @@ export const SessionView: Component<SessionViewProps> = (props) => {
       requestAnimationFrame(() => scrollToBottomHandle?.())
     })
   }
-  createEffect(() => {
-    if (!props.isActive) return
-    if (!shouldScrollToBottomOnActivate()) return
-    scheduleScrollToBottom()
-  })
+  createEffect(
+    on(
+      () => props.isActive,
+      (isActive, wasActive) => {
+        if (!isActive) return
+        if (wasActive === true) return
+        if (!shouldScrollToBottomOnActivate()) return
+        scheduleScrollToBottom()
+      },
+    ),
+  )
 
   createEffect(
     on(
@@ -332,16 +338,11 @@ export const SessionView: Component<SessionViewProps> = (props) => {
                 loading={messagesLoading()}
                 onRevert={handleRevert}
                 onDeleteMessagesUpTo={handleDeleteMessagesUpTo}
-                onFork={handleFork}
-                isActive={props.isActive}
-                registerScrollToBottom={(fn) => {
-                  scrollToBottomHandle = fn
-                  if (props.isActive) {
-                    if (shouldScrollToBottomOnActivate()) {
-                      scheduleScrollToBottom()
-                    }
-                  }
-                }}
+                 onFork={handleFork}
+                 isActive={props.isActive}
+                 registerScrollToBottom={(fn) => {
+                   scrollToBottomHandle = fn
+                 }}
 
 
 

packages/ui/src/components/settings/speech-settings-card.tsx

@@ -334,7 +334,7 @@ const Field: Component<{
         <div class="settings-toggle-title">{props.label}</div>
         <div class="settings-toggle-caption">{props.caption}</div>
       </div>
-      <div class="flex items-center gap-2 min-w-[18rem] max-w-[24rem] w-full">
+      <div class="flex items-center gap-2 w-full min-w-0 sm:min-w-[18rem] sm:max-w-[24rem]">
         {props.icon}
         <input
           type={props.type ?? "text"}
@@ -361,7 +361,7 @@ const SelectField: Component<{
         <div class="settings-toggle-title">{props.label}</div>
         <div class="settings-toggle-caption">{props.caption}</div>
       </div>
-      <div class="min-w-[18rem] max-w-[24rem] w-full">
+      <div class="w-full min-w-0 sm:min-w-[18rem] sm:max-w-[24rem]">
         <select value={props.value} onInput={(event) => props.onInput(event.currentTarget.value)} class="selector-input w-full">
           <For each={props.options}>{(option) => <option value={option.value}>{option.label}</option>}</For>
         </select>

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

@@ -454,7 +454,7 @@ function ToolCallDetails(props: {
 
   createEffect(() => {
     if (followScroll.autoScroll()) {
-      scrollHelpers.restoreAfterRender({ forceBottom: true })
+      scrollHelpers.restoreAfterRender()
     }
   })
 

packages/ui/src/components/tool-call/types.ts

@@ -47,7 +47,7 @@ export interface ToolScrollHelpers {
   registerContainer(element: HTMLDivElement | null, options?: { disableTracking?: boolean }): void
   handleScroll(event: Event & { currentTarget: HTMLDivElement }): void
   renderSentinel(options?: { disableTracking?: boolean }): JSXElement | null
-  restoreAfterRender(options?: { forceBottom?: boolean }): void
+  restoreAfterRender(): void
 }
 
 export interface ToolRendererContext {

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

@@ -2,6 +2,8 @@ import { Show, createEffect, createMemo, createSignal, onCleanup, type Accessor,
 import { Virtualizer, type VirtualizerHandle } from "virtua/solid"
 
 const DEFAULT_SCROLL_SENTINEL_MARGIN_PX = 48
+const DEFAULT_HOLD_TARGET_TOP_THRESHOLD_PX = 8
+const DEFAULT_HOLD_TARGET_TOP_OVERSHOOT_PX = 128
 const USER_SCROLL_INTENT_WINDOW_MS = 600
 const SCROLL_INTENT_KEYS = new Set(["ArrowUp", "ArrowDown", "PageUp", "PageDown", "Home", "End", " ", "Spacebar"])
 
@@ -85,6 +87,28 @@ export interface VirtualFollowListProps<T> {
    */
   followToken?: Accessor<string | number>
 
+  /**
+   * Optional item key whose geometry can temporarily hold auto-follow when the
+   * rendered item grows taller than the viewport and reaches the top edge.
+   */
+  autoPinHoldTargetKey?: Accessor<string | null>
+
+  /**
+   * Optional resolver for the specific element inside an item wrapper that
+   * should be measured for hold-target geometry.
+   */
+  resolveAutoPinHoldElement?: (itemWrapper: HTMLDivElement, key: string) => HTMLElement | null | undefined
+
+  /**
+   * Top-edge threshold for the hold target in pixels.
+   */
+  autoPinHoldTopThresholdPx?: number
+
+  /**
+   * Temporarily suppress automatic bottom pinning while keeping follow mode enabled.
+   */
+  suspendAutoPinToBottom?: Accessor<boolean>
+
   /**
    * Optional hooks to render content inside the scroll container.
    * Useful for empty/loading states that should scroll with the list.
@@ -130,13 +154,19 @@ export default function VirtualFollowList<T>(props: VirtualFollowListProps<T>) {
   const scrollToBottomOnActivate = () => (props.scrollToBottomOnActivate ? props.scrollToBottomOnActivate() : true)
   const initialScrollToBottom = () => (props.initialScrollToBottom ? props.initialScrollToBottom() : true)
   const initialAutoScroll = () => (props.initialAutoScroll ? props.initialAutoScroll() : true)
+  const externalSuspendAutoPinToBottom = () => (props.suspendAutoPinToBottom ? props.suspendAutoPinToBottom() : false)
+  const holdTargetKey = () => (props.autoPinHoldTargetKey ? props.autoPinHoldTargetKey() : null)
+  const holdTargetTopThresholdPx = () => props.autoPinHoldTopThresholdPx ?? DEFAULT_HOLD_TARGET_TOP_THRESHOLD_PX
 
   const [autoScroll, setAutoScroll] = createSignal(Boolean(initialAutoScroll()))
   const [showScrollTopButton, setShowScrollTopButton] = createSignal(false)
   const [showScrollBottomButton, setShowScrollBottomButton] = createSignal(false)
   const [activeKey, setActiveKey] = createSignal<string | null>(null)
+  const [heldItemCount, setHeldItemCount] = createSignal<number | null>(null)
+  const effectiveSuspendAutoPinToBottom = () => externalSuspendAutoPinToBottom() || heldItemCount() !== null
 
   const scrollButtonsCount = createMemo(() => (showScrollTopButton() ? 1 : 0) + (showScrollBottomButton() ? 1 : 0))
+  const itemElements = new Map<string, HTMLDivElement>()
 
   let userScrollIntentUntil = 0
   let lastUserScrollIntentDirection: "up" | "down" | null = null
@@ -220,6 +250,9 @@ export default function VirtualFollowList<T>(props: VirtualFollowListProps<T>) {
 
     // Sync autoScroll state based on scroll position if it was a user scroll
     if (hasUserScrollIntent()) {
+      if (atBottom && heldItemCount() !== null) {
+        setHeldItemCount(null)
+      }
       if (atBottom && !autoScroll()) {
         setAutoScroll(true)
       } else if (!atBottom && autoScroll()) {
@@ -253,6 +286,7 @@ export default function VirtualFollowList<T>(props: VirtualFollowListProps<T>) {
       }
     }
     updateScrollButtons()
+    updateAutoPinHold()
     props.onScroll?.()
 
     // Find active key (roughly the first visible item)
@@ -270,6 +304,68 @@ export default function VirtualFollowList<T>(props: VirtualFollowListProps<T>) {
     }
   }
 
+  function registerItemElement(key: string, element: HTMLDivElement | null | undefined) {
+    if (!element) {
+      itemElements.delete(key)
+      return
+    }
+    itemElements.set(key, element)
+  }
+
+  function getAnchorIdForKey(key: string) {
+    return props.getAnchorId ? props.getAnchorId(key) : key
+  }
+
+  function updateAutoPinHold() {
+    const element = scrollElement()
+    const itemCount = props.items().length
+    const heldCount = heldItemCount()
+    if (!element) return
+
+    if (heldCount !== null) {
+      if (itemCount > heldCount) {
+        setHeldItemCount(null)
+        if (autoScroll()) {
+          requestAnimationFrame(() => {
+            if (!autoScroll()) return
+            scrollToBottom(false)
+          })
+        }
+        return
+      }
+
+      if (itemCount < heldCount) {
+        setHeldItemCount(null)
+        return
+      }
+
+      return
+    }
+
+    if (!autoScroll()) return
+    if (externalSuspendAutoPinToBottom()) return
+
+    const targetKey = holdTargetKey()
+    if (!targetKey) return
+
+    const itemWrapper = itemElements.get(targetKey)
+    if (!itemWrapper) return
+    const target = props.resolveAutoPinHoldElement?.(itemWrapper, targetKey) ?? itemWrapper
+
+    const containerRect = element.getBoundingClientRect()
+    const targetRect = target.getBoundingClientRect()
+    const relativeTop = targetRect.top - containerRect.top
+    const exceedsViewport = targetRect.height > element.clientHeight
+
+    if (
+      exceedsViewport &&
+      relativeTop <= holdTargetTopThresholdPx() &&
+      relativeTop >= holdTargetTopThresholdPx() - DEFAULT_HOLD_TARGET_TOP_OVERSHOOT_PX
+    ) {
+      setHeldItemCount(itemCount)
+    }
+  }
+
   const api: VirtualFollowListApi = {
     scrollToTop: (opts) => scrollToTop(opts?.immediate ?? true),
     scrollToBottom: (opts) => scrollToBottom(opts?.immediate ?? true, { suppressAutoAnchor: opts?.suppressAutoAnchor }),
@@ -281,7 +377,9 @@ export default function VirtualFollowList<T>(props: VirtualFollowListProps<T>) {
       virtuaHandle()?.scrollToIndex(index, { align: opts?.block ?? "start", smooth: opts?.behavior === "smooth" })
     },
     notifyContentRendered: () => {
-      if (autoScroll()) {
+      updateAutoPinHold()
+      if (heldItemCount() !== null) return
+      if (autoScroll() && !effectiveSuspendAutoPinToBottom()) {
         scrollToBottom(true)
       }
     },
@@ -294,9 +392,15 @@ export default function VirtualFollowList<T>(props: VirtualFollowListProps<T>) {
   createEffect(() => props.registerApi?.(api))
   createEffect(() => props.registerState?.(state))
 
+  createEffect(on(() => props.resetKey?.(), () => {
+    itemElements.clear()
+    setHeldItemCount(null)
+  }))
+
   // Handle autoScroll (Follow) on items change
   createEffect(on(() => props.items().length, (len, prevLen) => {
-    if (len > (prevLen ?? 0) && autoScroll() && !suppressAutoScrollOnce) {
+    updateAutoPinHold()
+    if (len > (prevLen ?? 0) && autoScroll() && !effectiveSuspendAutoPinToBottom() && !suppressAutoScrollOnce) {
       requestAnimationFrame(() => scrollToBottom(true))
     }
     suppressAutoScrollOnce = false
@@ -304,11 +408,16 @@ export default function VirtualFollowList<T>(props: VirtualFollowListProps<T>) {
 
   // Handle followToken change
   createEffect(on(() => props.followToken?.(), () => {
-    if (autoScroll()) {
+    updateAutoPinHold()
+    if (autoScroll() && !effectiveSuspendAutoPinToBottom()) {
       scrollToBottom(true)
     }
   }, { defer: true }))
 
+  createEffect(on(() => holdTargetKey(), () => {
+    updateAutoPinHold()
+  }, { defer: true }))
+
   // Reset state on resetKey change
   createEffect(on(() => props.resetKey?.(), (nextKey) => {
     if (nextKey === lastResetKey) return
@@ -331,6 +440,13 @@ export default function VirtualFollowList<T>(props: VirtualFollowListProps<T>) {
     }
   })
 
+  createEffect(() => {
+    if (typeof window === "undefined") return
+    const handleResize = () => updateAutoPinHold()
+    window.addEventListener("resize", handleResize)
+    onCleanup(() => window.removeEventListener("resize", handleResize))
+  })
+
   return (
     <div class="virtual-follow-list-shell" ref={shellElement => {
       setShellElement(shellElement)
@@ -356,7 +472,15 @@ export default function VirtualFollowList<T>(props: VirtualFollowListProps<T>) {
           bufferSize={props.overscanPx ?? 400}
           onScroll={handleScroll}
         >
-          {(item, index) => props.renderItem(item, index())}
+          {(item, index) => {
+            const key = props.getKey(item, index())
+            const anchorId = getAnchorIdForKey(key)
+            return (
+              <div id={anchorId} data-virtual-follow-key={key} ref={(element) => registerItemElement(key, element)}>
+                {props.renderItem(item, index())}
+              </div>
+            )
+          }}
         </Virtualizer>
       </div>
 

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

@@ -2,6 +2,7 @@ const HUNK_PATTERN = /(^|\n)@@/m
 const FILE_MARKER_PATTERN = /(^|\n)(diff --git |--- |\+\+\+)/
 const BEGIN_PATCH_PATTERN = /^\*\*\* (Begin|End) Patch/
 const UPDATE_FILE_PATTERN = /^\*\*\* Update File: (.+)$/
+const HUNK_HEADER_PATTERN = /^@@ -(\d+)(?:,(\d+))? \+(\d+)(?:,(\d+))? @@/
 
 function stripCodeFence(value: string): string {
   const trimmed = value.trim()
@@ -48,3 +49,48 @@ export function isRenderableDiffText(raw?: string | null): raw is string {
   if (!normalized) return false
   return HUNK_PATTERN.test(normalized)
 }
+
+export function parsePatchToBeforeAfter(patch: string): { before: string; after: string } {
+  if (!patch || patch.trim().length === 0) {
+    return { before: "", after: "" }
+  }
+
+  const lines = patch.replace(/\r\n/g, "\n").split("\n")
+  const beforeLines: string[] = []
+  const afterLines: string[] = []
+
+  for (const line of lines) {
+    if (line.startsWith("---") || line.startsWith("+++") || line.startsWith("diff --git")) {
+      continue
+    }
+    if (HUNK_HEADER_PATTERN.test(line)) {
+      continue
+    }
+    if (line.startsWith("-") && !line.startsWith("---")) {
+      beforeLines.push(line.slice(1))
+    } else if (line.startsWith("+") && !line.startsWith("+++")) {
+      afterLines.push(line.slice(1))
+    } else if (line.startsWith(" ")) {
+      beforeLines.push(line.slice(1))
+      afterLines.push(line.slice(1))
+    } else if (line === "") {
+      beforeLines.push("")
+      afterLines.push("")
+    } else {
+      beforeLines.push(line)
+      afterLines.push(line)
+    }
+  }
+
+  while (beforeLines.length > 0 && beforeLines[beforeLines.length - 1] === "") {
+    beforeLines.pop()
+  }
+  while (afterLines.length > 0 && afterLines[afterLines.length - 1] === "") {
+    afterLines.pop()
+  }
+
+  return {
+    before: beforeLines.join("\n"),
+    after: afterLines.join("\n"),
+  }
+}

packages/ui/src/lib/follow-scroll.tsx

@@ -16,7 +16,7 @@ export interface FollowScrollHelpers {
   registerContainer: (element: HTMLDivElement | null | undefined, options?: { disableTracking?: boolean }) => void
   handleScroll: (event: Event & { currentTarget: HTMLDivElement }) => void
   renderSentinel: (options?: { disableTracking?: boolean }) => JSXElement | null
-  restoreAfterRender: (options?: { forceBottom?: boolean }) => void
+  restoreAfterRender: () => void
   autoScroll: Accessor<boolean>
 }
 
@@ -183,7 +183,7 @@ export function createFollowScroll(options: FollowScrollOptions): FollowScrollHe
     return <div ref={setBottomSentinel} aria-hidden="true" class={options.sentinelClassName} style={{ height: "1px" }} />
   }
 
-  const restoreAfterRender = (config?: { forceBottom?: boolean }) => {
+  const restoreAfterRender = () => {
     const container = scrollContainerRef
     if (container && hasUserScrollIntent() && !isAtBottom(container)) {
       if (autoScroll()) {
@@ -195,7 +195,10 @@ export function createFollowScroll(options: FollowScrollOptions): FollowScrollHe
       return
     }
 
-    const shouldFollow = config?.forceBottom ?? autoScroll()
+    // Never let a render-time caller force follow mode back on after the user
+    // has already escaped it. Staying pinned should depend on the current
+    // follow state, not on a caller opting into forceBottom.
+    const shouldFollow = autoScroll()
     requestAnimationFrame(() => {
       restoreScrollPosition(shouldFollow)
       if (shouldFollow) {

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

@@ -160,6 +160,8 @@ export const instanceMessages = {
   "instanceShell.backgroundProcesses.empty": "No background processes.",
   "instanceShell.backgroundProcesses.status": "Status: {status}",
   "instanceShell.backgroundProcesses.output": "Output: {sizeKb}KB",
+  "instanceShell.backgroundProcesses.notify.enabled": "Completion notification enabled",
+  "instanceShell.backgroundProcesses.notify.disabled": "Completion notification disabled",
   "instanceShell.backgroundProcesses.actions.output": "Output",
   "instanceShell.backgroundProcesses.actions.stop": "Stop",
   "instanceShell.backgroundProcesses.actions.terminate": "Terminate",

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

@@ -18,6 +18,8 @@ export const messagingMessages = {
   "messageSection.loading.messages": "Loading messages...",
   "messageSection.scroll.toFirstAriaLabel": "Scroll to first message",
   "messageSection.scroll.toLatestAriaLabel": "Scroll to latest message",
+  "messageSection.scroll.enableHoldAriaLabel": "Enable hold for long assistant replies",
+  "messageSection.scroll.disableHoldAriaLabel": "Disable hold for long assistant replies",
   "messageSection.quote.addAsQuote": "Add as quote",
   "messageSection.quote.addAsCode": "Add as code",
   "messageSection.quote.copy": "Copy",

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

@@ -150,6 +150,8 @@ export const instanceMessages = {
   "instanceShell.backgroundProcesses.empty": "No hay procesos en segundo plano.",
   "instanceShell.backgroundProcesses.status": "Estado: {status}",
   "instanceShell.backgroundProcesses.output": "Salida: {sizeKb} KB",
+  "instanceShell.backgroundProcesses.notify.enabled": "Notificacion de finalizacion activada",
+  "instanceShell.backgroundProcesses.notify.disabled": "Notificacion de finalizacion desactivada",
   "instanceShell.backgroundProcesses.actions.output": "Salida",
   "instanceShell.backgroundProcesses.actions.stop": "Detener",
   "instanceShell.backgroundProcesses.actions.terminate": "Terminar",

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

@@ -18,6 +18,8 @@ export const messagingMessages = {
   "messageSection.loading.messages": "Cargando mensajes...",
   "messageSection.scroll.toFirstAriaLabel": "Desplazarse al primer mensaje",
   "messageSection.scroll.toLatestAriaLabel": "Desplazarse al último mensaje",
+  "messageSection.scroll.enableHoldAriaLabel": "Activar pausa para respuestas largas del asistente",
+  "messageSection.scroll.disableHoldAriaLabel": "Desactivar pausa para respuestas largas del asistente",
   "messageSection.quote.addAsQuote": "Añadir como cita",
   "messageSection.quote.addAsCode": "Añadir como código",
   "messageSection.quote.copy": "Copiar",

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

@@ -150,6 +150,8 @@ export const instanceMessages = {
   "instanceShell.backgroundProcesses.empty": "Aucun processus en arrière-plan.",
   "instanceShell.backgroundProcesses.status": "Statut : {status}",
   "instanceShell.backgroundProcesses.output": "Sortie : {sizeKb}KB",
+  "instanceShell.backgroundProcesses.notify.enabled": "Notification de fin activee",
+  "instanceShell.backgroundProcesses.notify.disabled": "Notification de fin desactivee",
   "instanceShell.backgroundProcesses.actions.output": "Sortie",
   "instanceShell.backgroundProcesses.actions.stop": "Arrêter",
   "instanceShell.backgroundProcesses.actions.terminate": "Terminer",

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

@@ -18,6 +18,8 @@ export const messagingMessages = {
   "messageSection.loading.messages": "Chargement des messages...",
   "messageSection.scroll.toFirstAriaLabel": "Aller au premier message",
   "messageSection.scroll.toLatestAriaLabel": "Aller au dernier message",
+  "messageSection.scroll.enableHoldAriaLabel": "Activer le maintien pour les longues réponses de l'assistant",
+  "messageSection.scroll.disableHoldAriaLabel": "Désactiver le maintien pour les longues réponses de l'assistant",
   "messageSection.quote.addAsQuote": "Ajouter en citation",
   "messageSection.quote.addAsCode": "Ajouter en code",
   "messageSection.quote.copy": "Copier",

packages/ui/src/lib/i18n/messages/he/instance.ts

@@ -158,6 +158,8 @@ export const instanceMessages = {
   "instanceShell.backgroundProcesses.empty": "אין תהליכי רקע.",
   "instanceShell.backgroundProcesses.status": "סטטוס: {status}",
   "instanceShell.backgroundProcesses.output": "פלט: {sizeKb}KB",
+  "instanceShell.backgroundProcesses.notify.enabled": "התראת סיום פעילה",
+  "instanceShell.backgroundProcesses.notify.disabled": "התראת סיום כבויה",
   "instanceShell.backgroundProcesses.actions.output": "פלט",
   "instanceShell.backgroundProcesses.actions.stop": "עצור",
   "instanceShell.backgroundProcesses.actions.terminate": "סיים",

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

@@ -18,6 +18,8 @@ export const messagingMessages = {
   "messageSection.loading.messages": "טוען הודעות...",
   "messageSection.scroll.toFirstAriaLabel": "גלול להודעה הראשונה",
   "messageSection.scroll.toLatestAriaLabel": "גלול להודעה האחרונה",
+  "messageSection.scroll.enableHoldAriaLabel": "הפעל עצירה לתגובות עוזר ארוכות",
+  "messageSection.scroll.disableHoldAriaLabel": "כבה עצירה לתגובות עוזר ארוכות",
   "messageSection.quote.addAsQuote": "הוסף כציטוט",
   "messageSection.quote.addAsCode": "הוסף כקוד",
   "messageSection.quote.copy": "העתק",

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

@@ -150,6 +150,8 @@ export const instanceMessages = {
   "instanceShell.backgroundProcesses.empty": "バックグラウンドプロセスはありません。",
   "instanceShell.backgroundProcesses.status": "状態: {status}",
   "instanceShell.backgroundProcesses.output": "出力: {sizeKb}KB",
+  "instanceShell.backgroundProcesses.notify.enabled": "完了通知が有効",
+  "instanceShell.backgroundProcesses.notify.disabled": "完了通知が無効",
   "instanceShell.backgroundProcesses.actions.output": "出力",
   "instanceShell.backgroundProcesses.actions.stop": "停止",
   "instanceShell.backgroundProcesses.actions.terminate": "終了",

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

@@ -18,6 +18,8 @@ export const messagingMessages = {
   "messageSection.loading.messages": "メッセージを読み込み中...",
   "messageSection.scroll.toFirstAriaLabel": "最初のメッセージへスクロール",
   "messageSection.scroll.toLatestAriaLabel": "最新のメッセージへスクロール",
+  "messageSection.scroll.enableHoldAriaLabel": "長いアシスタント返信の保持を有効にする",
+  "messageSection.scroll.disableHoldAriaLabel": "長いアシスタント返信の保持を無効にする",
   "messageSection.quote.addAsQuote": "引用として追加",
   "messageSection.quote.addAsCode": "コードとして追加",
   "messageSection.quote.copy": "コピー",

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

@@ -150,6 +150,8 @@ export const instanceMessages = {
   "instanceShell.backgroundProcesses.empty": "Нет фоновых процессов.",
   "instanceShell.backgroundProcesses.status": "Статус: {status}",
   "instanceShell.backgroundProcesses.output": "Вывод: {sizeKb}KB",
+  "instanceShell.backgroundProcesses.notify.enabled": "Уведомление о завершении включено",
+  "instanceShell.backgroundProcesses.notify.disabled": "Уведомление о завершении выключено",
   "instanceShell.backgroundProcesses.actions.output": "Вывод",
   "instanceShell.backgroundProcesses.actions.stop": "Остановить",
   "instanceShell.backgroundProcesses.actions.terminate": "Завершить",

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

@@ -18,6 +18,8 @@ export const messagingMessages = {
   "messageSection.loading.messages": "Загрузка сообщений…",
   "messageSection.scroll.toFirstAriaLabel": "Прокрутить к первому сообщению",
   "messageSection.scroll.toLatestAriaLabel": "Прокрутить к последнему сообщению",
+  "messageSection.scroll.enableHoldAriaLabel": "Включить удержание для длинных ответов ассистента",
+  "messageSection.scroll.disableHoldAriaLabel": "Выключить удержание для длинных ответов ассистента",
   "messageSection.quote.addAsQuote": "Добавить как цитату",
   "messageSection.quote.addAsCode": "Добавить как код",
   "messageSection.quote.copy": "Копировать",

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

@@ -150,6 +150,8 @@ export const instanceMessages = {
   "instanceShell.backgroundProcesses.empty": "没有后台进程。",
   "instanceShell.backgroundProcesses.status": "状态：{status}",
   "instanceShell.backgroundProcesses.output": "输出：{sizeKb}KB",
+  "instanceShell.backgroundProcesses.notify.enabled": "已启用完成通知",
+  "instanceShell.backgroundProcesses.notify.disabled": "已禁用完成通知",
   "instanceShell.backgroundProcesses.actions.output": "输出",
   "instanceShell.backgroundProcesses.actions.stop": "停止",
   "instanceShell.backgroundProcesses.actions.terminate": "终止",

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

@@ -18,6 +18,8 @@ export const messagingMessages = {
   "messageSection.loading.messages": "正在加载消息...",
   "messageSection.scroll.toFirstAriaLabel": "滚动到第一条消息",
   "messageSection.scroll.toLatestAriaLabel": "滚动到最新消息",
+  "messageSection.scroll.enableHoldAriaLabel": "启用长助手回复保持",
+  "messageSection.scroll.disableHoldAriaLabel": "禁用长助手回复保持",
   "messageSection.quote.addAsQuote": "作为引用添加",
   "messageSection.quote.addAsCode": "作为代码添加",
   "messageSection.quote.copy": "复制",

packages/ui/src/stores/message-v2/session-info.ts

@@ -116,18 +116,11 @@ export function updateSessionInfo(instanceId: string, sessionId: string): void {
     // Prefer explicit input limits when provided by the API.
     // This is used by the UI "Avail" chip.
     contextAvailableTokens = modelInputLimit
-  }
-
-  if (!contextAvailableFromPrevious && contextAvailableTokens === null) {
-    if (contextWindow > 0) {
-      if (latestHasContextUsage && actualUsageTokens > 0) {
-        contextAvailableTokens = Math.max(contextWindow - (actualUsageTokens + outputBudget), 0)
-      } else {
-        contextAvailableTokens = contextWindow
-      }
-    } else {
-      contextAvailableTokens = null
-    }
+  } else if (contextWindow > 0) {
+    // When no explicit input limit, show full context window capacity.
+    contextAvailableTokens = contextWindow
+  } else {
+    contextAvailableTokens = null
   }
 
   setSessionInfoByInstance((prev) => {

packages/ui/src/stores/preferences.tsx

@@ -55,6 +55,7 @@ export interface UiSettings {
   showKeyboardShortcutHints: boolean
   thinkingBlocksExpansion: ExpansionPreference
   showTimelineTools: boolean
+  holdLongAssistantReplies: boolean
   promptSubmitOnEnter: boolean
   showPromptVoiceInput: boolean
   locale?: string
@@ -133,6 +134,7 @@ const defaultUiSettings: UiSettings = {
   showKeyboardShortcutHints: true,
   thinkingBlocksExpansion: "expanded",
   showTimelineTools: true,
+  holdLongAssistantReplies: true,
   promptSubmitOnEnter: false,
   showPromptVoiceInput: true,
   diffViewMode: "split",
@@ -166,6 +168,7 @@ function normalizeUiSettings(input?: Partial<UiSettings> | null): UiSettings {
       sanitized.showKeyboardShortcutHints ?? defaultUiSettings.showKeyboardShortcutHints,
     thinkingBlocksExpansion: sanitized.thinkingBlocksExpansion ?? defaultUiSettings.thinkingBlocksExpansion,
     showTimelineTools: sanitized.showTimelineTools ?? defaultUiSettings.showTimelineTools,
+    holdLongAssistantReplies: sanitized.holdLongAssistantReplies ?? defaultUiSettings.holdLongAssistantReplies,
     promptSubmitOnEnter: sanitized.promptSubmitOnEnter ?? defaultUiSettings.promptSubmitOnEnter,
     showPromptVoiceInput: sanitized.showPromptVoiceInput ?? defaultUiSettings.showPromptVoiceInput,
     locale: sanitized.locale ?? defaultUiSettings.locale,

packages/ui/src/styles/components/settings-screen.css

@@ -526,14 +526,49 @@
 @media (max-width: 640px) {
   .settings-screen-frame {
     padding: 0;
+    overflow: hidden;
   }
 
   .modal-surface.settings-screen-shell {
     width: 100%;
+    max-width: 100%;
     height: 100%;
     max-height: none;
     min-height: 100%;
     border-radius: 0;
+    overflow-x: hidden;
+  }
+
+  .modal-surface.settings-screen-shell .settings-screen-nav,
+  .modal-surface.settings-screen-shell .settings-screen-nav-list,
+  .modal-surface.settings-screen-shell .settings-screen-content,
+  .modal-surface.settings-screen-shell .settings-screen-scroll,
+  .modal-surface.settings-screen-shell .settings-section-stack,
+  .modal-surface.settings-screen-shell .settings-stack,
+  .modal-surface.settings-screen-shell .settings-card,
+  .modal-surface.settings-screen-shell .settings-card-content,
+  .modal-surface.settings-screen-shell .settings-toggle-row,
+  .modal-surface.settings-screen-shell .settings-toggle-row > * {
+    min-width: 0;
+  }
+
+  .modal-surface.settings-screen-shell .selector-trigger,
+  .modal-surface.settings-screen-shell .selector-input,
+  .modal-surface.settings-screen-shell .selector-button {
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  .modal-surface.settings-screen-shell .settings-toggle-caption,
+  .modal-surface.settings-screen-shell .settings-inline-note,
+  .modal-surface.settings-screen-shell .remote-address-url,
+  .modal-surface.settings-screen-shell code {
+    overflow-wrap: anywhere;
+    word-break: break-word;
+  }
+
+  .modal-surface.settings-screen-shell .whitespace-nowrap {
+    white-space: normal;
   }
 
   .settings-screen-content-header,

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

@@ -242,6 +242,10 @@
   color: var(--accent-primary);
 }
 
+.message-scroll-button[data-active="false"] .message-scroll-icon--toggle {
+  color: var(--text-secondary);
+}
+
 .message-quote-popover {
   position: absolute;
   z-index: 5;

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

@@ -66,10 +66,11 @@
 }
 
 .message-timeline {
+  --message-timeline-segment-gap: 0.35rem;
   flex: 1 1 auto;
   display: flex;
   flex-direction: column;
-  gap: 0.35rem;
+  gap: 0;
   padding: 0.25rem;
   overflow-y: auto;
   overflow-x: visible;
@@ -114,6 +115,17 @@
   -webkit-touch-callout: none;
 }
 
+.message-timeline-item {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.message-timeline-item-spacer {
+  flex: none;
+  width: 100%;
+}
+
 .message-timeline-segment[data-delete-hover="true"]::before {
   content: "";
   position: absolute;
@@ -319,18 +331,7 @@
   border-inline-start: 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;
-}
+/* Spacing is rendered by the measured item wrapper so virtua can account for it. */
 
 .message-timeline-container {
   position: relative;

packages/ui/src/types/message.ts

@@ -78,6 +78,10 @@ export interface TextPart {
 
 export type MessageInfo = SDKMessage
 
+export function isHiddenSyntheticTextPart(part: ClientPart): boolean {
+  return Boolean(part && part.type === "text" && part.synthetic)
+}
+
 function hasTextSegment(segment: string | { text?: string }): boolean {
   if (typeof segment === "string") {
     return segment.trim().length > 0
@@ -95,6 +99,10 @@ export function partHasRenderableText(part: ClientPart): boolean {
     return false
   }
 
+  if (isHiddenSyntheticTextPart(part)) {
+    return false
+  }
+
   const typedPart = part as SDKPart
   
   if (typedPart.type === "text" && hasTextSegment(typedPart.text)) {

packages/ui/src/types/session.ts

@@ -4,8 +4,7 @@ import type {
   Provider as SDKProvider,
   Model as SDKModel,
 } from "@opencode-ai/sdk"
-import type { SessionStatus as SDKSessionStatus } from "@opencode-ai/sdk/v2/client"
-import type { FileDiff } from "@opencode-ai/sdk/v2/client"
+import type { SessionStatus as SDKSessionStatus, FileDiff } from "@opencode-ai/sdk/v2/client"
 
 // Export SDK types for external use
 export type {