Release v0.14.0 - Sidecars, Remote access from app, more speedy (#325 )

## Thanks for contributions - PR #262 “fix(server): show sane remote URLs for 0.0.0.0 binds” by @VooDisss - PR #270 “Implement shared compact split and unified tool-call diff layout” by @VooDisss - PR #272 “Add log level configuration support” by @bluelovers - PR #274 “perf(ui): fix O(n²) reactive subscriptions in timeline effects (HUGE SPEED IMPROVEMENT)” by @pascalandr - PR #285 “fix(ui): preserve prompt text when dismissing mention picker” by @app/codenomadbot - PR #291 “perf(ui): virtualize message timeline rendering, #274 follow-up ( BIG SPEED IMPROVEMENT )” by @pascalandr - PR #309 “fix(ui): stop forced auto-follow during streaming” by @VooDisss - PR #320 “fix(tauri): own Windows CLI subtree with a job object” by @pascalandr ## Highlights - **Remote access is much easier to use**: Connect to remote CodeNomad servers directly from the app and have full app experience remotely. - **Sidecars**: Open locally hosted services directly in CodeNomad. OpenVSCode Server, Terminal ( using ttyd ) and many more all available remotely and on the move. - **Background task notifications**: LLMs can now run background task asynchronously and be notified when the task is done. No need to wait or periodically checking the status. - **Long conversations are much smoother**: Large sessions and busy timelines render much faster, and chat scrolling behaves better while responses stream in. - **Clearer diffs and output views**: Tool-call diffs and session changes now render more consistently with improved split/unified layouts and support for unified diff patch formats. ## What’s Improved - **Big timeline performance gains**: The message timeline got two major performance passes, including virtualization, so large sessions stay responsive much longer. - **More useful context information**: Token stats are shown more clearly, and context window reporting is simpler to understand. - **Smoother voice and speech flows**: Speech input stays chained correctly, dictated text inserts more naturally into prompts, and voice mode state stays synced across listeners. - **More dependable desktop behavior**: Desktop auth isolation is safer per app, startup is more stable, and Windows process cleanup is more reliable. ## Fixes - **Less frustrating auto-scroll behavior**: Streaming reasoning, tool output, and oversized assistant replies no longer pull you to the bottom as aggressively, and you can toggle hold behavior for long replies. - **More reliable timeline previews**: Message preview tooltips now escape clipping so previews remain usable. - **Safer prompt editing**: Dismissing the mention picker no longer wipes your draft text. - **Better remote session stability**: Remote keyboard handling, reconnect flows, TLS exception scoping, and remote URL display are more predictable. - **Better small-screen and desktop polish**: The settings modal behaves better on phones, speech input stays pinned correctly, and Windows desktop builds handle CLI subprocess ownership more safely. ## Docs - **Refreshed project docs**: README and supporting presentation content were updated to better reflect the current product. ### Contributors - @pascalandr - @VooDisss - @bluelovers **Full Changelog**: https://github.com/NeuralNomadsAI/CodeNomad/compare/v0.13.3...v0.14.0
Merge branch 'dev' of github.com:NeuralNomadsAI/CodeNomad into dev
2026-04-16 09:25:09 +01:00 · 2026-04-16 08:43:33 +01:00 · 2026-04-16 08:43:16 +01:00 · 2026-04-16 08:42:33 +01:00 · 2026-04-13 21:36:49 +01:00 · 2026-04-13 20:37:31 +01:00
58 changed files with 1345 additions and 361 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "codenomad-workspace",
-  "version": "0.13.3",
+  "version": "0.14.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "codenomad-workspace",
-      "version": "0.13.3",
+      "version": "0.14.0",
      "license": "MIT",
      "dependencies": {
        "7zip-bin": "^5.2.0",
@@ -12068,7 +12068,7 @@
    },
    "packages/electron-app": {
      "name": "@neuralnomads/codenomad-electron-app",
-      "version": "0.13.3",
+      "version": "0.14.0",
      "license": "MIT",
      "dependencies": {
        "@codenomad/ui": "file:../ui",
@@ -12105,7 +12105,7 @@
    },
    "packages/server": {
      "name": "@neuralnomads/codenomad",
-      "version": "0.13.3",
+      "version": "0.14.0",
      "license": "MIT",
      "dependencies": {
        "@fastify/cors": "^8.5.0",
@@ -12147,7 +12147,7 @@
    },
    "packages/tauri-app": {
      "name": "@codenomad/tauri-app",
-      "version": "0.13.3",
+      "version": "0.14.0",
      "license": "MIT",
      "devDependencies": {
        "@tauri-apps/cli": "^2.9.4"
@@ -12155,7 +12155,7 @@
    },
    "packages/ui": {
      "name": "@codenomad/ui",
-      "version": "0.13.3",
+      "version": "0.14.0",
      "license": "MIT",
      "dependencies": {
        "@git-diff-view/solid": "^0.0.8",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "codenomad-workspace",
-  "version": "0.13.3",
+  "version": "0.14.0",
  "private": true,
  "description": "CodeNomad monorepo workspace",
  "license": "MIT",
--- a/packages/cloudflare/release-config.json
+++ b/packages/cloudflare/release-config.json
@@ -1,4 +1,4 @@
 {
-  "minServerVersion": "0.13.3",
+  "minServerVersion": "0.14.0",
  "latestServerUrl": "https://github.com/NeuralNomadsAI/CodeNomad/releases/latest"
 }
--- a/packages/electron-app/package.json
+++ b/packages/electron-app/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@neuralnomads/codenomad-electron-app",
-  "version": "0.13.3",
+  "version": "0.14.0",
  "description": "CodeNomad - AI coding assistant",
  "license": "MIT",
  "author": {
--- a/packages/opencode-config/plugin/lib/background-process.ts
+++ b/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}`
--- a/packages/server/package-lock.json
+++ b/packages/server/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "@neuralnomads/codenomad",
-  "version": "0.13.3",
+  "version": "0.14.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "@neuralnomads/codenomad",
-      "version": "0.13.3",
+      "version": "0.14.0",
      "dependencies": {
        "@fastify/cors": "^8.5.0",
        "@fastify/reply-from": "^9.8.0",
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@neuralnomads/codenomad",
-  "version": "0.13.3",
+  "version": "0.14.0",
  "description": "CodeNomad Server",
  "license": "MIT",
  "author": {
--- a/packages/server/src/api-types.ts
+++ b/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 {
--- a/packages/server/src/background-processes/manager.ts
+++ b/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")
--- a/packages/server/src/index.ts
+++ b/packages/server/src/index.ts
@@ -25,6 +25,9 @@ import { resolveNetworkAddresses, resolveRemoteAddresses } from "./server/networ
 import { startDevReleaseMonitor } from "./releases/dev-release-monitor"
 import { SpeechService } from "./speech/service"
 import { SideCarManager } from "./sidecars/manager"
+import { ClientConnectionManager } from "./clients/connection-manager"
+import { PluginChannelManager } from "./plugins/channel"
+import { VoiceModeManager } from "./plugins/voice-mode"

 const require = createRequire(import.meta.url)

@@ -378,6 +381,14 @@ async function main() {

  const remoteAccessEnabled = options.host === "0.0.0.0" || !isLoopbackHost(options.host)

+  const clientConnectionManager = new ClientConnectionManager(logger.child({ component: "client-connections" }))
+  const pluginChannel = new PluginChannelManager(logger.child({ component: "plugin-channel" }))
+  const voiceModeManager = new VoiceModeManager({
+    connections: clientConnectionManager,
+    channel: pluginChannel,
+    logger: logger.child({ component: "voice-mode" }),
+  })
+
  const httpsPortExplicit = programHasArg(process.argv.slice(2), "--https-port") || Boolean(process.env.CLI_HTTPS_PORT)
  const httpPortExplicit = programHasArg(process.argv.slice(2), "--http-port") || Boolean(process.env.CLI_HTTP_PORT)

@@ -408,6 +419,9 @@ async function main() {
        speechService,
        sidecarManager,
        authManager,
+        clientConnectionManager,
+        pluginChannel,
+        voiceModeManager,
        uiStaticDir: uiResolution.uiStaticDir ?? DEFAULT_UI_STATIC_DIR,
        uiDevServerUrl: uiResolution.uiDevServerUrl,
        logger,
@@ -430,6 +444,9 @@ async function main() {
        speechService,
        sidecarManager,
        authManager,
+        clientConnectionManager,
+        pluginChannel,
+        voiceModeManager,
        uiStaticDir: uiResolution.uiStaticDir ?? DEFAULT_UI_STATIC_DIR,
        uiDevServerUrl: undefined,
        logger,
@@ -534,6 +551,12 @@ async function main() {
        logger.error({ err: error }, "SideCar manager shutdown failed")
      }

+      try {
+        clientConnectionManager.shutdown()
+      } catch (error) {
+        logger.warn({ err: error }, "Client connection manager shutdown failed")
+      }
+
      try {
        await workspaceManager.shutdown()
        logger.info("Workspace manager shutdown complete")
--- a/packages/server/src/plugins/voice-mode.ts
+++ b/packages/server/src/plugins/voice-mode.ts
@@ -19,13 +19,13 @@ export class VoiceModeManager {
    })
  }

-  setEnabled(instanceId: string, connection: ClientConnectionRef, enabled: boolean): void {
+  setEnabled(instanceId: string, connection: ClientConnectionRef, enabled: boolean): boolean {
    if (enabled && !this.options.connections.isConnected(connection)) {
      this.options.logger.debug(
        { instanceId, clientId: connection.clientId, connectionId: connection.connectionId },
        "Ignoring voice mode enable for disconnected client connection",
      )
-      return
+      return false
    }

    const key = getConnectionKey(connection)
@@ -44,6 +44,7 @@ export class VoiceModeManager {

    this.options.logger.debug({ instanceId, clientId: connection.clientId, connectionId: connection.connectionId, enabled }, "Voice mode updated for client connection")
    this.publishIfChanged(instanceId)
+    return true
  }

  syncInstance(instanceId: string): void {
@@ -76,7 +77,10 @@ export class VoiceModeManager {
      this.aggregateByInstance.delete(instanceId)
    }

-    this.options.logger.debug({ instanceId, enabled }, "Broadcasting aggregate voice mode")
+    this.options.logger.debug(
+      { instanceId, enabled },
+      "Broadcasting aggregate voice mode",
+    )
    this.options.channel.send(instanceId, buildVoiceModeEvent(enabled))
  }
 }
--- a/packages/server/src/server/http-server.ts
+++ b/packages/server/src/server/http-server.ts
@@ -54,6 +54,9 @@ interface HttpServerDeps {
  speechService: SpeechService
  sidecarManager: SideCarManager
  authManager: AuthManager
+  clientConnectionManager: ClientConnectionManager
+  pluginChannel: PluginChannelManager
+  voiceModeManager: VoiceModeManager
  uiStaticDir: string
  uiDevServerUrl?: string
  logger: Logger
@@ -182,13 +185,6 @@ export function createHttpServer(deps: HttpServerDeps) {
    eventBus: deps.eventBus,
    logger: deps.logger.child({ component: "background-processes" }),
  })
-  const clientConnectionManager = new ClientConnectionManager(deps.logger.child({ component: "client-connections" }))
-  const pluginChannel = new PluginChannelManager(deps.logger.child({ component: "plugin-channel" }))
-  const voiceModeManager = new VoiceModeManager({
-    connections: clientConnectionManager,
-    channel: pluginChannel,
-    logger: deps.logger.child({ component: "voice-mode" }),
-  })

  registerAuthRoutes(app, { authManager: deps.authManager })

@@ -268,7 +264,7 @@ export function createHttpServer(deps: HttpServerDeps) {
    eventBus: deps.eventBus,
    registerClient: registerSseClient,
    logger: sseLogger,
-    connectionManager: clientConnectionManager,
+    connectionManager: deps.clientConnectionManager,
  })
  registerWorktreeRoutes(app, { workspaceManager: deps.workspaceManager })
  registerStorageRoutes(app, {
@@ -289,8 +285,8 @@ export function createHttpServer(deps: HttpServerDeps) {
    workspaceManager: deps.workspaceManager,
    eventBus: deps.eventBus,
    logger: proxyLogger,
-    channel: pluginChannel,
-    voiceModeManager,
+    channel: deps.pluginChannel,
+    voiceModeManager: deps.voiceModeManager,
  })
  registerBackgroundProcessRoutes(app, { backgroundProcessManager })
  registerInstanceProxyRoutes(app, { workspaceManager: deps.workspaceManager, logger: proxyLogger })
@@ -356,7 +352,6 @@ export function createHttpServer(deps: HttpServerDeps) {
    },
    stop: () => {
      closeSseClients()
-      clientConnectionManager.shutdown()
      return app.close()
    },
  }
--- a/packages/server/src/server/routes/background-processes.ts
+++ b/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
  })
--- a/packages/server/src/server/routes/plugin.ts
+++ b/packages/server/src/server/routes/plugin.ts
@@ -66,11 +66,17 @@ export function registerPluginRoutes(app: FastifyInstance, deps: RouteDeps) {
    }

    const payload = VoiceModeStateSchema.parse(request.body ?? {})
-    deps.voiceModeManager.setEnabled(
+    const applied = deps.voiceModeManager.setEnabled(
      request.params.id,
      { clientId: payload.clientId, connectionId: payload.connectionId },
      payload.enabled,
    )
+
+    if (payload.enabled && !applied) {
+      reply.code(409).send({ error: "Client connection not active for voice mode enable" })
+      return
+    }
+
    return { enabled: payload.enabled }
  })

--- a/packages/tauri-app/Cargo.lock
+++ b/packages/tauri-app/Cargo.lock
@@ -458,7 +458,7 @@ dependencies = [

 [[package]]
 name = "codenomad-tauri"
-version = "0.13.3"
+version = "0.14.0"
 dependencies = [
 "anyhow",
 "dirs 5.0.1",
--- a/packages/tauri-app/package.json
+++ b/packages/tauri-app/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@codenomad/tauri-app",
-  "version": "0.13.3",
+  "version": "0.14.0",
  "private": true,
  "license": "MIT",
  "scripts": {
--- a/packages/tauri-app/src-tauri/Cargo.toml
+++ b/packages/tauri-app/src-tauri/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "codenomad-tauri"
-version = "0.13.3"
+version = "0.14.0"
 edition = "2021"
 license = "MIT"

@@ -28,4 +28,4 @@ url = "2"
 tauri-plugin-notification = "2"

 [target.'cfg(windows)'.dependencies]
-windows-sys = { version = "0.59", features = ["Win32_UI_Shell"] }
+windows-sys = { version = "0.59", features = ["Win32_Foundation", "Win32_UI_Shell", "Win32_Security", "Win32_System_JobObjects"] }
--- a/packages/tauri-app/src-tauri/src/cli_manager.rs
+++ b/packages/tauri-app/src-tauri/src/cli_manager.rs
@@ -5,9 +5,13 @@ use serde::{Deserialize, Serialize};
 use serde_json::json;
 use std::collections::VecDeque;
 use std::env;
+#[cfg(windows)]
+use std::ffi::c_void;
 use std::ffi::OsStr;
 use std::fs;
 use std::io::{BufRead, BufReader, Read, Write};
+#[cfg(windows)]
+use std::mem::{size_of, zeroed};
 use std::net::TcpStream;
 #[cfg(unix)]
 use std::os::unix::process::CommandExt;
@@ -19,12 +23,95 @@ use std::thread;
 use std::time::{Duration, Instant, SystemTime, UNIX_EPOCH};
 use tauri::{webview::cookie::Cookie, AppHandle, Emitter, Manager, Url};

+#[cfg(windows)]
+use std::os::windows::io::AsRawHandle;
 #[cfg(windows)]
 use std::os::windows::process::CommandExt;
+#[cfg(windows)]
+use windows_sys::Win32::Foundation::{CloseHandle, HANDLE};
+#[cfg(windows)]
+use windows_sys::Win32::System::JobObjects::{
+    AssignProcessToJobObject, CreateJobObjectW, JobObjectExtendedLimitInformation,
+    SetInformationJobObject, JOBOBJECT_EXTENDED_LIMIT_INFORMATION,
+    JOB_OBJECT_LIMIT_KILL_ON_JOB_CLOSE,
+};

 #[cfg(windows)]
 const CREATE_NO_WINDOW: u32 = 0x08000000;

+#[cfg(windows)]
+#[derive(Debug)]
+struct WindowsJobObject {
+    // The desktop wrapper may observe only a short-lived Node wrapper PID while the real
+    // server and workspace descendants continue running below it. KILL_ON_JOB_CLOSE gives
+    // Tauri an OS-owned handle for the whole subtree instead of relying on a single PID.
+    handle: HANDLE,
+}
+
+#[cfg(windows)]
+impl WindowsJobObject {
+    fn create() -> anyhow::Result<Self> {
+        let handle = unsafe { CreateJobObjectW(std::ptr::null_mut(), std::ptr::null()) };
+        if handle.is_null() {
+            return Err(anyhow::anyhow!(
+                "CreateJobObjectW failed: {}",
+                std::io::Error::last_os_error()
+            ));
+        }
+
+        let mut info: JOBOBJECT_EXTENDED_LIMIT_INFORMATION = unsafe { zeroed() };
+        info.BasicLimitInformation.LimitFlags = JOB_OBJECT_LIMIT_KILL_ON_JOB_CLOSE;
+
+        let ok = unsafe {
+            SetInformationJobObject(
+                handle,
+                JobObjectExtendedLimitInformation,
+                &mut info as *mut _ as *mut c_void,
+                size_of::<JOBOBJECT_EXTENDED_LIMIT_INFORMATION>() as u32,
+            )
+        };
+        if ok == 0 {
+            let err = std::io::Error::last_os_error();
+            unsafe {
+                CloseHandle(handle);
+            }
+            return Err(anyhow::anyhow!("SetInformationJobObject failed: {}", err));
+        }
+
+        Ok(Self { handle })
+    }
+
+    fn assign_child(&self, child: &Child) -> anyhow::Result<()> {
+        let process_handle = child.as_raw_handle() as HANDLE;
+        let ok = unsafe { AssignProcessToJobObject(self.handle, process_handle) };
+        if ok == 0 {
+            return Err(anyhow::anyhow!(
+                "AssignProcessToJobObject failed: {}",
+                std::io::Error::last_os_error()
+            ));
+        }
+
+        Ok(())
+    }
+}
+
+#[cfg(windows)]
+impl Drop for WindowsJobObject {
+    fn drop(&mut self) {
+        if !self.handle.is_null() {
+            unsafe {
+                CloseHandle(self.handle);
+            }
+        }
+    }
+}
+
+#[cfg(windows)]
+unsafe impl Send for WindowsJobObject {}
+
+#[cfg(windows)]
+unsafe impl Sync for WindowsJobObject {}
+
 fn log_line(message: &str) {
    println!("[tauri-cli] {message}");
 }
@@ -363,6 +450,8 @@ impl Default for CliStatus {
 pub struct CliProcessManager {
    status: Arc<Mutex<CliStatus>>,
    child: Arc<Mutex<Option<Child>>>,
+    #[cfg(windows)]
+    job: Arc<Mutex<Option<WindowsJobObject>>>,
    ready: Arc<AtomicBool>,
    bootstrap_token: Arc<Mutex<Option<String>>>,
 }
@@ -372,6 +461,8 @@ impl CliProcessManager {
        Self {
            status: Arc::new(Mutex::new(CliStatus::default())),
            child: Arc::new(Mutex::new(None)),
+            #[cfg(windows)]
+            job: Arc::new(Mutex::new(None)),
            ready: Arc::new(AtomicBool::new(false)),
            bootstrap_token: Arc::new(Mutex::new(None)),
        }
@@ -394,6 +485,8 @@ impl CliProcessManager {

        let status_arc = self.status.clone();
        let child_arc = self.child.clone();
+        #[cfg(windows)]
+        let job_arc = self.job.clone();
        let ready_flag = self.ready.clone();
        let token_arc = self.bootstrap_token.clone();
        thread::spawn(move || {
@@ -401,6 +494,8 @@ impl CliProcessManager {
                app.clone(),
                status_arc.clone(),
                child_arc,
+                #[cfg(windows)]
+                job_arc,
                ready_flag,
                token_arc,
                dev,
@@ -420,11 +515,12 @@ impl CliProcessManager {
    }

    pub fn stop(&self) -> anyhow::Result<()> {
+        #[cfg(windows)]
+        let _job = self.job.lock().take();
+
        let mut child_opt = self.child.lock();
        if let Some(mut child) = child_opt.take() {
            log_line(&format!("stopping CLI pid={}", child.id()));
-            #[cfg(windows)]
-            let mut forced_tree_shutdown = false;
            #[cfg(unix)]
            unsafe {
                let pid = child.id() as i32;
@@ -446,18 +542,16 @@ impl CliProcessManager {
                    Ok(Some(_)) => break,
                    Ok(None) => {
                        #[cfg(windows)]
-                        if !forced_tree_shutdown
-                            && start.elapsed() > Duration::from_millis(CLI_WINDOWS_FORCE_GRACE_MS)
-                        {
+                        if start.elapsed() > Duration::from_millis(CLI_WINDOWS_FORCE_GRACE_MS) {
                            log_line(&format!(
                                "regular Windows shutdown still running after {}ms; escalating pid={}",
                                CLI_WINDOWS_FORCE_GRACE_MS,
                                child.id()
                            ));
-                            forced_tree_shutdown = true;
                            if !kill_process_tree_windows(child.id(), true) {
                                let _ = child.kill();
                            }
+                            break;
                        }

                        if start.elapsed() > Duration::from_secs(CLI_STOP_GRACE_SECS) {
@@ -476,11 +570,7 @@ impl CliProcessManager {
                            }
                            #[cfg(windows)]
                            {
-                                if !forced_tree_shutdown
-                                    && !kill_process_tree_windows(child.id(), true)
-                                {
-                                    let _ = child.kill();
-                                } else if forced_tree_shutdown {
+                                if !kill_process_tree_windows(child.id(), true) {
                                    let _ = child.kill();
                                }
                            }
@@ -491,6 +581,9 @@ impl CliProcessManager {
                    Err(_) => break,
                }
            }
+        } else {
+            #[cfg(windows)]
+            log_line("tracked CLI process already exited; dropping Windows job object to reap descendants");
        }

        let mut status = self.status.lock();
@@ -511,6 +604,7 @@ impl CliProcessManager {
        app: AppHandle,
        status: Arc<Mutex<CliStatus>>,
        child_holder: Arc<Mutex<Option<Child>>>,
+        #[cfg(windows)] job_holder: Arc<Mutex<Option<WindowsJobObject>>>,
        ready: Arc<AtomicBool>,
        bootstrap_token: Arc<Mutex<Option<String>>>,
        dev: bool,
@@ -592,6 +686,22 @@ impl CliProcessManager {

        let pid = child.id();
        log_line(&format!("spawned pid={pid}"));
+        #[cfg(windows)]
+        match WindowsJobObject::create().and_then(|job| {
+            job.assign_child(&child)?;
+            Ok(job)
+        }) {
+            Ok(job) => {
+                log_line(&format!("attached pid={pid} to Windows job object"));
+                *job_holder.lock() = Some(job);
+            }
+            Err(err) => {
+                log_line(&format!(
+                    "failed to attach pid={pid} to Windows job object; falling back to taskkill-only cleanup: {err}"
+                ));
+            }
+        }
+
        {
            let mut locked = status.lock();
            locked.pid = Some(pid);
@@ -665,6 +775,8 @@ impl CliProcessManager {
        let status_clone = status.clone();
        let ready_clone = ready.clone();
        let child_holder_clone = child_holder.clone();
+        #[cfg(windows)]
+        let job_holder_clone = job_holder.clone();
        thread::spawn(move || {
            let timeout = Duration::from_secs(60);
            thread::sleep(timeout);
@@ -719,6 +831,10 @@ impl CliProcessManager {
                            // Drop the handle after the process exits so other callers
                            // don't attempt to stop/kill a finished process.
                            *guard = None;
+                            #[cfg(windows)]
+                            {
+                                let _ = job_holder_clone.lock().take();
+                            }
                            Some(status)
                        }
                        None => None,
@@ -776,7 +892,8 @@ impl CliProcessManager {
        auth_cookie_name: &str,
    ) {
        let mut buffer = String::new();
-        let local_url_regex = Regex::new(r"^Local\s+Connection\s+URL\s*:\s*(https?://\S+)\s*$").ok();
+        let local_url_regex =
+            Regex::new(r"^Local\s+Connection\s+URL\s*:\s*(https?://\S+)\s*$").ok();
        let token_prefix = "CODENOMAD_BOOTSTRAP_TOKEN:";

        loop {
@@ -818,7 +935,6 @@ impl CliProcessManager {
                            );
                            continue;
                        }
-
                    }
                }
                Err(_) => break,
@@ -1022,15 +1138,23 @@ fn resolve_tsx(_app: &AppHandle) -> Option<String> {
    let cwd = std::env::current_dir().ok();
    let workspace = workspace_root();
    let mut candidates = vec![
-        cwd.as_ref().map(|p| p.join("node_modules/tsx/dist/cli.mjs")),
-        cwd.as_ref().map(|p| p.join("node_modules/tsx/dist/cli.cjs")),
+        cwd.as_ref()
+            .map(|p| p.join("node_modules/tsx/dist/cli.mjs")),
+        cwd.as_ref()
+            .map(|p| p.join("node_modules/tsx/dist/cli.cjs")),
        cwd.as_ref().map(|p| p.join("node_modules/tsx/dist/cli.js")),
-        cwd.as_ref().map(|p| p.join("../node_modules/tsx/dist/cli.mjs")),
-        cwd.as_ref().map(|p| p.join("../node_modules/tsx/dist/cli.cjs")),
-        cwd.as_ref().map(|p| p.join("../node_modules/tsx/dist/cli.js")),
-        cwd.as_ref().map(|p| p.join("../../node_modules/tsx/dist/cli.mjs")),
-        cwd.as_ref().map(|p| p.join("../../node_modules/tsx/dist/cli.cjs")),
-        cwd.as_ref().map(|p| p.join("../../node_modules/tsx/dist/cli.js")),
+        cwd.as_ref()
+            .map(|p| p.join("../node_modules/tsx/dist/cli.mjs")),
+        cwd.as_ref()
+            .map(|p| p.join("../node_modules/tsx/dist/cli.cjs")),
+        cwd.as_ref()
+            .map(|p| p.join("../node_modules/tsx/dist/cli.js")),
+        cwd.as_ref()
+            .map(|p| p.join("../../node_modules/tsx/dist/cli.mjs")),
+        cwd.as_ref()
+            .map(|p| p.join("../../node_modules/tsx/dist/cli.cjs")),
+        cwd.as_ref()
+            .map(|p| p.join("../../node_modules/tsx/dist/cli.js")),
        workspace
            .as_ref()
            .map(|p| p.join("node_modules/tsx/dist/cli.mjs")),
--- a/packages/tauri-app/src-tauri/src/main.rs
+++ b/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| {
--- a/packages/tauri-app/src-tauri/tauri.conf.json
+++ b/packages/tauri-app/src-tauri/tauri.conf.json
@@ -1,7 +1,7 @@
 {
  "$schema": "https://schema.tauri.app/config/2",
  "productName": "CodeNomad",
-  "version": "0.13.3",
+  "version": "0.14.0",
  "identifier": "ai.neuralnomads.codenomad.client",
  "build": {
    "beforeDevCommand": "npm run dev:bootstrap",
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@codenomad/ui",
-  "version": "0.13.3",
+  "version": "0.14.0",
  "private": true,
  "license": "MIT",
  "type": "module",
--- a/packages/ui/src/components/file-viewer/monaco-diff-viewer.tsx
+++ b/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(() => {
--- a/packages/ui/src/components/instance/shell/right-panel/tabs/ChangesTab.tsx
+++ b/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>
--- a/packages/ui/src/components/instance/shell/right-panel/tabs/StatusTab.tsx
+++ b/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>
--- a/packages/ui/src/components/message-block.tsx
+++ b/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()
  })

--- a/packages/ui/src/components/message-item.tsx
+++ b/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
  }

--- a/packages/ui/src/components/message-part.tsx
+++ b/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)
  }


--- a/packages/ui/src/components/message-section.tsx
+++ b/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">
--- a/packages/ui/src/components/message-timeline.tsx
+++ b/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>
--- a/packages/ui/src/components/prompt-input/usePromptVoiceInput.ts
+++ b/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)
    }
  }
--- a/packages/ui/src/components/session/session-view.tsx
+++ b/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
+                 }}



--- a/packages/ui/src/components/settings/speech-settings-card.tsx
+++ b/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>
--- a/packages/ui/src/components/tool-call.tsx
+++ b/packages/ui/src/components/tool-call.tsx
@@ -454,7 +454,7 @@ function ToolCallDetails(props: {

  createEffect(() => {
    if (followScroll.autoScroll()) {
-      scrollHelpers.restoreAfterRender({ forceBottom: true })
+      scrollHelpers.restoreAfterRender()
    }
  })

--- a/packages/ui/src/components/tool-call/types.ts
+++ b/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 {
--- a/packages/ui/src/components/virtual-follow-list.tsx
+++ b/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>

--- a/packages/ui/src/lib/diff-utils.ts
+++ b/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"),
+  }
+}
--- a/packages/ui/src/lib/follow-scroll.tsx
+++ b/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) {
--- a/packages/ui/src/lib/i18n/messages/en/instance.ts
+++ b/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",
--- a/packages/ui/src/lib/i18n/messages/en/messaging.ts
+++ b/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",
--- a/packages/ui/src/lib/i18n/messages/es/instance.ts
+++ b/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",
--- a/packages/ui/src/lib/i18n/messages/es/messaging.ts
+++ b/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",
--- a/packages/ui/src/lib/i18n/messages/fr/instance.ts
+++ b/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",
--- a/packages/ui/src/lib/i18n/messages/fr/messaging.ts
+++ b/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",
--- a/packages/ui/src/lib/i18n/messages/he/instance.ts
+++ b/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": "סיים",
--- a/packages/ui/src/lib/i18n/messages/he/messaging.ts
+++ b/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": "העתק",
--- a/packages/ui/src/lib/i18n/messages/ja/instance.ts
+++ b/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": "終了",
--- a/packages/ui/src/lib/i18n/messages/ja/messaging.ts
+++ b/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": "コピー",
--- a/packages/ui/src/lib/i18n/messages/ru/instance.ts
+++ b/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": "Завершить",
--- a/packages/ui/src/lib/i18n/messages/ru/messaging.ts
+++ b/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": "Копировать",
--- a/packages/ui/src/lib/i18n/messages/zh-Hans/instance.ts
+++ b/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": "终止",
--- a/packages/ui/src/lib/i18n/messages/zh-Hans/messaging.ts
+++ b/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": "复制",
--- a/packages/ui/src/stores/message-v2/session-info.ts
+++ b/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) => {
--- a/packages/ui/src/stores/preferences.tsx
+++ b/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,
--- a/packages/ui/src/styles/components/settings-screen.css
+++ b/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,
--- a/packages/ui/src/styles/messaging/message-section.css
+++ b/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;
--- a/packages/ui/src/styles/messaging/message-timeline.css
+++ b/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;
--- a/packages/ui/src/types/message.ts
+++ b/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)) {
--- a/packages/ui/src/types/session.ts
+++ b/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 {
Author	SHA1	Message	Date
Shantur Rathore	43db9cdb50	Release v0.14.0 - Sidecars, Remote access from app, more speedy (#325 ) ## Thanks for contributions - PR #262 “fix(server): show sane remote URLs for 0.0.0.0 binds” by @VooDisss - PR #270 “Implement shared compact split and unified tool-call diff layout” by @VooDisss - PR #272 “Add log level configuration support” by @bluelovers - PR #274 “perf(ui): fix O(n²) reactive subscriptions in timeline effects (HUGE SPEED IMPROVEMENT)” by @pascalandr - PR #285 “fix(ui): preserve prompt text when dismissing mention picker” by @app/codenomadbot - PR #291 “perf(ui): virtualize message timeline rendering, #274 follow-up ( BIG SPEED IMPROVEMENT )” by @pascalandr - PR #309 “fix(ui): stop forced auto-follow during streaming” by @VooDisss - PR #320 “fix(tauri): own Windows CLI subtree with a job object” by @pascalandr ## Highlights - Remote access is much easier to use: Connect to remote CodeNomad servers directly from the app and have full app experience remotely. - Sidecars: Open locally hosted services directly in CodeNomad. OpenVSCode Server, Terminal ( using ttyd ) and many more all available remotely and on the move. - Background task notifications: LLMs can now run background task asynchronously and be notified when the task is done. No need to wait or periodically checking the status. - Long conversations are much smoother: Large sessions and busy timelines render much faster, and chat scrolling behaves better while responses stream in. - Clearer diffs and output views: Tool-call diffs and session changes now render more consistently with improved split/unified layouts and support for unified diff patch formats. ## What’s Improved - Big timeline performance gains: The message timeline got two major performance passes, including virtualization, so large sessions stay responsive much longer. - More useful context information: Token stats are shown more clearly, and context window reporting is simpler to understand. - Smoother voice and speech flows: Speech input stays chained correctly, dictated text inserts more naturally into prompts, and voice mode state stays synced across listeners. - More dependable desktop behavior: Desktop auth isolation is safer per app, startup is more stable, and Windows process cleanup is more reliable. ## Fixes - Less frustrating auto-scroll behavior: Streaming reasoning, tool output, and oversized assistant replies no longer pull you to the bottom as aggressively, and you can toggle hold behavior for long replies. - More reliable timeline previews: Message preview tooltips now escape clipping so previews remain usable. - Safer prompt editing: Dismissing the mention picker no longer wipes your draft text. - Better remote session stability: Remote keyboard handling, reconnect flows, TLS exception scoping, and remote URL display are more predictable. - Better small-screen and desktop polish: The settings modal behaves better on phones, speech input stays pinned correctly, and Windows desktop builds handle CLI subprocess ownership more safely. ## Docs - Refreshed project docs: README and supporting presentation content were updated to better reflect the current product. ### Contributors - @pascalandr - @VooDisss - @bluelovers Full Changelog: https://github.com/NeuralNomadsAI/CodeNomad/compare/v0.13.3...v0.14.0	2026-04-16 09:25:09 +01:00
Shantur Rathore	03ed3d3b2c	Merge branch 'dev' of github.com:NeuralNomadsAI/CodeNomad into dev	2026-04-16 08:43:33 +01:00
Shantur Rathore	a111de1af8	Minimum version to 0.14.0	2026-04-16 08:43:16 +01:00
Shantur Rathore	8a3b162be9	Bump version to 0.14.0	2026-04-16 08:42:33 +01:00
Shantur Rathore	c62cb3ce4a	fix(server): share voice mode state across listeners	2026-04-13 21:36:49 +01:00
Shantur Rathore	d9811e735d	fix(server): reject stale voice mode enables	2026-04-13 20:37:31 +01:00
Pascal André	1ce58b9dd9	fix(tauri): own Windows CLI subtree with a job object (#320 ) ## Summary - Follow-up to #240 to make Windows desktop shutdown reliable this time, even when the tracked CLI wrapper PID exits before its descendants - Attach the spawned CLI process to a Windows Job Object with `KILL_ON_JOB_CLOSE`, so the desktop app owns the whole subtree instead of relying only on `taskkill /PID <wrapper> /T` - Keep the current graceful-then-force shutdown path, but add a robust OS-level fallback that reaps orphaned workspace processes when the wrapper is already gone ## Root Cause The previous Windows shutdown logic still depended on the PID tracked by Tauri. In practice that PID can be a short-lived Node wrapper. Once that wrapper exits, `taskkill` can report success or PID-not-found while descendants remain alive, and the desktop app no longer has a reliable handle to reap them. ## Validation - `cargo check --manifest-path packages/tauri-app/src-tauri/Cargo.toml` - `cargo build --release --manifest-path packages/tauri-app/src-tauri/Cargo.toml` - Manual local test: orphaned processes are cleaned up after desktop shutdown	2026-04-12 21:10:15 +01:00
Pascal André	1907a4da03	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 .	2026-04-11 22:52:00 +01:00
Shantur Rathore	abf4c67fcc	fix(ui): separate dictated prompt text	2026-04-11 20:34:53 +01:00
Shantur Rathore	bc130ceb5b	fix(ui): portal timeline preview tooltip	2026-04-11 19:53:25 +01:00
Shantur Rathore	8505a43b16	fix(ui): add toggle for holding long assistant replies	2026-04-11 19:47:57 +01:00
Shantur Rathore	2a3329b5ed	fix(ui): hold auto-follow on oversized assistant replies	2026-04-11 19:28:27 +01:00
VooDisss	c9c1cf21f0	fix(ui): stop forced auto-follow during streaming (#309 ) # PR Draft: Fix sticky auto-scroll during streaming chat responses Fixes #308 ## Summary This change makes chat auto-scroll easier to escape while assistant output is still streaming. The goal is to stop the viewport from repeatedly pulling the user back toward the bottom once they begin scrolling upward to inspect earlier content. ## Why Before this change, streaming updates could keep reasserting bottom-follow behavior during active rendering. That made auto-scroll feel sticky and forced users to scroll repeatedly or forcefully just to review earlier parts of an in-progress response. The intended behavior is simpler: once the user scrolls upward to leave follow mode, the UI should respect that decision instead of fighting it during subsequent stream updates. ## What Changed 1. Removed render-time force-bottom behavior from the shared follow-scroll helper path. 2. Updated streamed reasoning output to restore scroll without forcing the viewport back to the bottom. 3. Updated streamed tool-call output to use the same non-forcing restore behavior. ## Scope Boundaries Included: - Sticky auto-scroll behavior during streamed chat output - Shared follow-scroll behavior used by streamed nested panes - Reasoning and tool-call streaming paths that reused the same forced follow behavior Not included: - A full rewrite of the virtualized message list follow model - Broader scroll UX changes outside the streaming follow/escape behavior - Unrelated UI or plugin configuration changes in the worktree ## Technical Notes The core problem was not basic auto-scroll itself, but a render-time path that could keep forcing bottom-follow behavior while new streamed content was arriving. That meant a user's attempt to scroll upward could be overridden repeatedly by subsequent stream updates, which is why the auto-scroll felt sticky. The fix removes that override and keeps render-time restoration dependent on the current follow state instead. ## Files Changed - `packages/ui/src/lib/follow-scroll.tsx` - `packages/ui/src/components/message-block.tsx` - `packages/ui/src/components/tool-call.tsx` ## Verification Performed: 1. Reproduced the sticky auto-scroll behavior with a long multi-line streaming response. 2. Verified that scrolling upward during streaming now disengages follow more naturally in the affected streamed panes. 3. Ran `npm run typecheck --workspace @codenomad/ui`. 4. Ran `npm run build --workspace @codenomad/ui`. Build note: - The UI typecheck passes. - The UI build succeeds. - The build still emits existing third-party and chunk-size warnings unrelated to this change. ## Risks and Follow-up 1. The broader scroll-follow model is still more heuristic-heavy than ideal, so there may be future follow-up work to simplify it further. 2. This PR intentionally applies the smallest targeted fix to the known snap-back path instead of rewriting the full chat scroll system. --------- Co-authored-by: Shantur Rathore <i@shantur.com>	2026-04-10 16:26:33 +01:00
Shantur Rathore	c7d4f99e48	fix(ui): prevent settings modal overflow on phones	2026-04-09 21:00:17 +01:00
Shantur Rathore	d50c00afb4	revert: remove debouncing and transparent window from zoom fix Reverted debouncing logic and transparent window mode that were causing issues. Kept the zoom step reduction from 0.2 to 0.1 for finer control.	2026-04-09 16:23:45 +01:00
Shantur Rathore	0ef57df3bc	fix(ui): show token stats and simplify context window calculation - Track messageInfoVersion in cache signature to rebuild when tokens arrive via SSE - Read tokens from step-finish part directly (embedded in SSE events) - Simplify available tokens to show full context window when no explicit input limit	2026-04-08 22:19:10 +01:00
Shantur Rathore	0739ec857c	Reapply "fix(ui): support unified diff patch format in session changes viewer" This reverts commit `af6429162f`.	2026-04-08 20:57:23 +01:00
Shantur Rathore	b060ab45ff	Revert "feat(tauri): add zip bundle target for macOS and Windows" This reverts commit `197898c01c`.	2026-04-08 20:57:23 +01:00
Shantur Rathore	af6429162f	Revert "fix(ui): support unified diff patch format in session changes viewer" This reverts commit `2e9ee2cde6`.	2026-04-08 20:57:12 +01:00
Shantur Rathore	2e9ee2cde6	fix(ui): support unified diff patch format in session changes viewer Session diffs now use a compact patch field instead of storing full before/after content. Added parsePatchToBeforeAfter utility to extract before/after from unified diff format, and updated MonacoDiffViewer to accept patch prop as alternative to before/after strings.	2026-04-08 20:48:13 +01:00
Shantur Rathore	d45c0b9367	fix(tauri): prevent Windows zoom freeze with debouncing and transparent window - Add 50ms debounce to zoom operations to prevent WebView2 IPC bottleneck - Enable transparent window mode for better Windows resize/zoom performance - Reduce zoom step from 0.2 to 0.1 for finer control	2026-04-08 20:47:49 +01:00
Shantur Rathore	197898c01c	feat(tauri): add zip bundle target for macOS and Windows - Add build scripts for platform-specific builds with zip bundles - Update CI workflow to use --bundles flag for explicit target selection - macOS: use app,zip (removed dmg) - Windows: use nsis,zip - Linux: use appimage,deb,rpm	2026-04-08 20:34:08 +01:00
Shantur Rathore	0c0cfd2d22	fix(ui): keep speech input chained and scrolled to bottom	2026-04-08 19:02:06 +01:00
Shantur Rathore	5107ac207e	feat(ui): show background process notify state	2026-04-08 16:09:17 +01:00
Shantur Rathore	1130066a33	feat(background-process): notify sessions when tasks end Send synthetic session notifications when background processes finish, fail, stop, or terminate so the originating agent can react without polling. Hide synthetic text-only prompts from the UI stream so operational notifications stay out of the visible transcript.	2026-04-08 15:48:50 +01:00