Merge pull request #5757 from SivanCola/feature/custom-provider-setup

Simplify custom provider setup / 简化自定义供应商接入配置

.github/workflows/cache-impact.yml

@@ -17,7 +17,7 @@ jobs:
   cache-impact:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v7
         with:
           ref: ${{ github.event.pull_request.base.sha }}
 

.github/workflows/ci.yml

@@ -21,7 +21,7 @@ jobs:
         os: [ubuntu-latest, macos-latest, windows-latest]
     runs-on: ${{ matrix.os }}
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v7
 
       - uses: actions/setup-go@v6
         with:
@@ -58,7 +58,7 @@ jobs:
   race:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v7
 
       - uses: actions/setup-go@v6
         with:
@@ -79,7 +79,7 @@ jobs:
       run:
         working-directory: desktop
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v7
 
       - uses: actions/setup-go@v6
         with:
@@ -152,7 +152,7 @@ jobs:
   lint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v7
 
       - uses: actions/setup-go@v6
         with:
@@ -169,7 +169,7 @@ jobs:
     runs-on: ubuntu-latest
     continue-on-error: true # informational — stdlib vulns need a Go patch release
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v7
 
       - uses: actions/setup-go@v6
         with:
@@ -185,7 +185,7 @@ jobs:
   coverage:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v7
 
       - uses: actions/setup-go@v6
         with:

.github/workflows/codeql.yml

@@ -28,7 +28,7 @@ jobs:
           - language: actions
             build-mode: none
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v7
       - name: Initialize CodeQL
         uses: github/codeql-action/init@v4
         with:

.github/workflows/deploy-accounts-worker.yml

@@ -0,0 +1,49 @@
+name: Deploy accounts worker
+
+on:
+  push:
+    branches: [main-v2]
+    paths:
+      - 'workers/accounts/**'
+      - '.github/workflows/deploy-accounts-worker.yml'
+  workflow_dispatch:
+
+permissions:
+  contents: read
+
+concurrency:
+  group: deploy-accounts-worker
+  cancel-in-progress: false
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v7
+      - uses: pnpm/action-setup@v6
+        with:
+          version: 10
+          run_install: false
+      - uses: actions/setup-node@v6
+        with:
+          node-version: "24"
+          cache: pnpm
+          cache-dependency-path: workers/accounts/pnpm-lock.yaml
+      - name: Deploy
+        working-directory: workers/accounts
+        env:
+          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+        run: |
+          pnpm install --frozen-lockfile
+          npx wrangler deploy
+      - name: Sync RESEND_API_KEY to the worker
+        working-directory: workers/accounts
+        env:
+          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          RESEND_API_KEY: ${{ secrets.RESEND_API_KEY }}
+        run: |
+          if [ -n "$RESEND_API_KEY" ]; then
+            printf '%s' "$RESEND_API_KEY" | npx wrangler secret put RESEND_API_KEY
+          else
+            echo "RESEND_API_KEY not set in repo secrets; skipping (worker stays in stub email mode)."
+          fi

.github/workflows/deploy-crash-worker.yml

@@ -0,0 +1,34 @@
+name: Deploy crash worker
+
+on:
+  push:
+    branches: [main-v2]
+    paths:
+      - 'workers/crash-report/**'
+      - '.github/workflows/deploy-crash-worker.yml'
+  workflow_dispatch:
+
+permissions:
+  contents: read
+
+concurrency:
+  group: deploy-crash-worker
+  cancel-in-progress: false
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v7
+      - uses: actions/setup-node@v6
+        with:
+          node-version: '22'
+          cache: npm
+          cache-dependency-path: workers/crash-report/package-lock.json
+      - name: Deploy
+        working-directory: workers/crash-report
+        env:
+          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+        run: |
+          npm ci
+          npx wrangler deploy

.github/workflows/deploy-forum-worker.yml

@@ -0,0 +1,38 @@
+name: Deploy forum worker
+
+on:
+  push:
+    branches: [main-v2]
+    paths:
+      - 'workers/forum/**'
+      - '.github/workflows/deploy-forum-worker.yml'
+  workflow_dispatch:
+
+permissions:
+  contents: read
+
+concurrency:
+  group: deploy-forum-worker
+  cancel-in-progress: false
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v7
+      - uses: pnpm/action-setup@v6
+        with:
+          version: 10
+          run_install: false
+      - uses: actions/setup-node@v6
+        with:
+          node-version: "24"
+          cache: pnpm
+          cache-dependency-path: workers/forum/pnpm-lock.yaml
+      - name: Deploy
+        working-directory: workers/forum
+        env:
+          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+        run: |
+          pnpm install --frozen-lockfile
+          npx wrangler deploy

.github/workflows/e2e-bot.yml

@@ -42,7 +42,7 @@ jobs:
 
       # Default-branch checkout: this is where the harness (cmd/e2ebench), the
       # suite, and a run --metrics-capable agent live.
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v7
         with:
           fetch-depth: 0
 

.github/workflows/pages.yml

@@ -19,7 +19,7 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v7
       - uses: actions/setup-node@v6
         with:
           node-version: '22'

.github/workflows/release-desktop.yml

@@ -42,7 +42,7 @@ jobs:
     name: cache hit guard
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v7
 
       - uses: actions/setup-go@v6
         with:
@@ -77,7 +77,7 @@ jobs:
       run:
         shell: bash # desktop-build.sh is bash; windows runners default to pwsh otherwise
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v7
 
       - uses: actions/setup-go@v6
         with:
@@ -229,7 +229,7 @@ jobs:
     # approve); canary uses the open `canary` environment so maintainers self-serve.
     environment: ${{ (github.event_name == 'workflow_dispatch' && inputs.channel == 'canary') && 'canary' || 'release' }}
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v7
 
       - uses: actions/setup-go@v6
         with:
@@ -292,7 +292,7 @@ jobs:
     env:
       HAS_R2: ${{ secrets.R2_ACCESS_KEY_ID != '' && secrets.R2_SECRET_ACCESS_KEY != '' && secrets.R2_ACCOUNT_ID != '' && secrets.R2_BUCKET != '' }}
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v7
 
       - name: Resolve version
         id: ver

.github/workflows/release-npm.yml

@@ -42,7 +42,7 @@ jobs:
     name: cache hit guard
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v7
       - uses: actions/setup-go@v6
         with:
           go-version-file: go.mod
@@ -58,7 +58,7 @@ jobs:
     # canary dispatches run free.
     environment: ${{ github.event_name == 'workflow_dispatch' && inputs.channel == 'canary' && 'canary' || 'release' }}
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v7
       - uses: actions/setup-go@v6
         with:
           go-version-file: go.mod

.github/workflows/release.yml

@@ -19,7 +19,7 @@ jobs:
     name: cache hit guard
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v7
       - uses: actions/setup-go@v6
         with:
           go-version-file: go.mod
@@ -34,7 +34,7 @@ jobs:
     # `release` environment so only esengine can approve it going public.
     environment: release
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v7
         with:
           fetch-depth: 0
       - uses: actions/setup-go@v6

CHANGELOG.md

@@ -4,6 +4,15 @@ All notable changes to the Go line (Reasonix 1.0+) are recorded here. The legacy
 `0.x` TypeScript history lives on the [`v1`](https://github.com/esengine/DeepSeek-Reasonix/tree/v1)
 branch.
 
+## Unreleased
+
+### Changed
+
+- Agent runtime defaults now leave both executor and dedicated planner tool-call
+  rounds unlimited (`max_steps = 0`, `planner_max_steps = 0`). Step limits now
+  come from the user/global config only; project `reasonix.toml` does not
+  override them.
+
 ## [1.0.0] — 2026-06-03
 
 First stable release — a **ground-up rewrite in Go**. Not an upgrade of the `0.x`

README.md

@@ -55,11 +55,14 @@
 
 - **Config-driven.** Providers, the agent, enabled tools, and plugins are all
   declared in `reasonix.toml`. No hardcoded models.
-- **Multi-model & composable.** DeepSeek (flash/pro) and MiMo ship as presets;
-  any OpenAI-compatible endpoint is a config entry, not new code. Optionally run
+- **Multi-model & composable.** DeepSeek ships as a preset; any
+  OpenAI-compatible endpoint is a config entry, not new code. Optionally run
   two models together (executor + planner) in separate, cache-stable sessions.
 - **Plugin-driven.** External tools run as subprocesses over stdio JSON-RPC
   (MCP-compatible). Built-in tools self-register at compile time.
+- **Cache-aware context maintenance.** Startup injects a small stable environment
+  summary, stale tool output is snipped/pruned before summary compaction, and the
+  built-in tool schema contract is documented for regression review.
 - **Zero-friction distribution.** `CGO_ENABLED=0` single binary; cross-compile
   to six targets with one command. The only dependency is a TOML parser.
 
@@ -90,10 +93,10 @@ make cross      # -> dist/ (darwin|linux|windows × amd64|arm64)
 
 ```sh
 reasonix setup                      # config wizard → ./reasonix.toml
-export DEEPSEEK_API_KEY=sk-...      # or let setup save it to the credential store
+export DEEPSEEK_API_KEY=sk-...      # or let setup save it to Reasonix home .env
 reasonix                            # then run /init to generate AGENTS.md (project memory)
 reasonix run "implement the TODOs in main.go"
-reasonix run --model mimo-pro "add unit tests for this function"
+reasonix run --model deepseek-pro "add unit tests for this function"
 echo "explain this code" | reasonix run
 ```
 
@@ -116,10 +119,13 @@ Resolution order is **flag > `./reasonix.toml` > the user config file >
 built-in defaults**; starting with **Reasonix v1.8.1**, the user file lives at
 `~/.reasonix/config.toml` on macOS/Linux and
 `%AppData%\reasonix\config.toml` on Windows. See
-**[Configuration paths](./docs/CONFIG_PATHS.md)** for migration details. Secrets come from the environment via `api_key_env`, are
-never written to config files, and new keys default to the OS credential store
-with a Reasonix-owned file fallback. Project `.env` files are read as a
-compatibility override, but Reasonix does not write new keys there. Permissions, the sandbox, plugins (MCP), slash
+**[Configuration paths](./docs/CONFIG_PATHS.md)** for migration details and the
+full `config.toml` / `.env` structure. Provider entries name secrets with
+`api_key_env`; the secret values themselves live in Reasonix's global
+`<Reasonix home>/.env`, shared by CLI and desktop. Project `.env` files are not
+provider-key runtime fallbacks, but still feed workspace-scoped, non-provider
+`${VAR}` expansion for MCP/plugin settings without importing Reasonix control
+variables. Permissions, the sandbox, plugins (MCP), slash
 commands, `@` references, and two-model setup are all in the
 **[Guide](./docs/GUIDE.md)**.
 
@@ -131,6 +137,8 @@ commands, `@` references, and two-model setup are all in the
   from the desktop app, then use approvals, YOLO, and commands from IM.
 - **[Spec](./docs/SPEC.md)** — engineering contract: architecture, registries,
   data types, and roadmap.
+- **[Tool contract](./docs/TOOL_CONTRACT.md)** — provider-visible built-in tool
+  names, read-only flags, and schema snapshot guard.
 - **[Migrating from 0.x](./docs/MIGRATING.md)** — moving from the legacy
   TypeScript releases to the 1.0 Go rewrite.
 - **[Checkpoints & rewind](./docs/CHECKPOINTS.md)** — the snapshot-based edit

README.zh-CN.md

@@ -53,10 +53,12 @@
 
 - **配置驱动**：provider、agent、启用的工具、插件全部在 `reasonix.toml` 中声明，
   内核无硬编码模型。
-- **多模型 · 可组合**：DeepSeek（flash/pro）与 MiMo 作为预设内置；任何 OpenAI 兼容
+- **多模型 · 可组合**：DeepSeek 作为预设内置；任何 OpenAI 兼容
   端点都只是一条配置。可选让两个模型协同（执行器 + 规划器），各自独立、缓存稳定的 session。
 - **插件驱动**：外部工具以子进程形式运行，通过 stdio JSON-RPC 通信（MCP 兼容）；
   内置工具在编译期自注册。
+- **缓存友好的上下文维护**：启动时注入稳定的环境摘要；旧工具输出会先 snip/prune，
+  再进入摘要 compaction；内置工具 schema 合约有文档和回归测试保护。
 - **零摩擦分发**：`CGO_ENABLED=0` 单二进制；一条命令交叉编译到六个目标平台。
   唯一依赖是一个 TOML 解析库。
 
@@ -86,10 +88,10 @@ make cross      # -> dist/（darwin|linux|windows × amd64|arm64）
 
 ```sh
 reasonix setup                      # 配置向导 → ./reasonix.toml
-export DEEPSEEK_API_KEY=sk-...      # 也可以让 setup 保存到凭据存储
+export DEEPSEEK_API_KEY=sk-...      # 也可以让 setup 保存到 Reasonix 全局 .env
 reasonix                            # 然后在会话里运行 /init 生成 AGENTS.md（项目记忆）
 reasonix run "把 main.go 里的 TODO 实现掉"
-reasonix run --model mimo-pro "给这个函数补单元测试"
+reasonix run --model deepseek-pro "给这个函数补单元测试"
 echo "解释这段代码" | reasonix run
 ```
 
@@ -111,10 +113,10 @@ api_key_env = "DEEPSEEK_API_KEY"
 优先级为 **flag > `./reasonix.toml` > 用户配置文件 > 内置默认值**；从
 **Reasonix v1.8.1** 开始，用户配置位于 macOS/Linux 的 `~/.reasonix/config.toml`，
 Windows 为 `%AppData%\reasonix\config.toml`。迁移细节见
-**[配置路径](./docs/CONFIG_PATHS.zh-CN.md)**。
-密钥经环境变量通过 `api_key_env` 注入，绝不写入配置文件；新密钥默认优先保存到系统凭据存储，
-不可用时才 fallback 到 Reasonix 管理的凭据文件。项目 `.env` 只作为兼容覆盖读取，
-Reasonix 不会把新密钥写入项目 `.env`。权限、沙盒、插件(MCP)、
+**[配置路径](./docs/CONFIG_PATHS.zh-CN.md)**，其中也说明了全局 `config.toml`
+和 `.env` 的完整结构。Provider 通过 `api_key_env` 命名密钥，真实密钥值保存在
+CLI 与桌面端共用的 Reasonix 全局 `<Reasonix home>/.env`；项目 `.env` 不再作为
+provider key 的运行时 fallback，但仍会作为当前 workspace 范围内的 MCP/plugin 非 provider `${VAR}` 展开来源，不导入 Reasonix 控制变量。权限、沙盒、插件(MCP)、
 斜杠命令、`@` 引用与双模型设置,全部在 **[指南](./docs/GUIDE.zh-CN.md)** 里。
 
 ## 文档
@@ -124,6 +126,8 @@ Reasonix 不会把新密钥写入项目 `.env`。权限、沙盒、插件(MCP)
 - **[机器人使用指南](./docs/BOT_GUIDE.zh-CN.md)** —— 桌面端连接飞书、Lark、微信
   Bot，以及 IM 里的审批、YOLO 和命令交互。
 - **[规格](./docs/SPEC.md)** —— 工程契约:架构、registry、数据类型与路线图。
+- **[工具合约](./docs/TOOL_CONTRACT.zh-CN.md)** —— provider 可见的内置工具名、
+  read-only 标记和 schema 快照保护。
 - **[从 0.x 迁移](./docs/MIGRATING.md)** —— 从 legacy TypeScript 版本迁到 1.0 Go 重写版。
 - **[Checkpoints 与 rewind](./docs/CHECKPOINTS.md)** —— 基于快照的编辑安全网
   (Esc-Esc / `/rewind`)。

SECURITY.md

@@ -0,0 +1,137 @@
+# Security Policy
+
+## Supported Versions
+
+Reasonix security fixes are prioritized for the currently developed Go rewrite
+and the current 1.x release line.
+
+| Version or branch | Security support |
+| --- | --- |
+| `main-v2` / 1.x releases | Supported |
+| `v1` / 0.x legacy branch | Critical fixes only, where practical |
+| Older releases, forks, or modified builds | Not covered unless the issue is reproducible upstream |
+
+If you are unsure whether a version is affected, report against the newest
+released 1.x version and include the exact version or commit you tested.
+
+## Reporting a Vulnerability
+
+Please report security issues privately. Do not open a public issue with exploit
+details, secrets, crash dumps, or proof-of-concept payloads.
+
+Preferred reporting path:
+
+1. Use GitHub private vulnerability reporting for this repository, if available.
+2. If private reporting is not available to you, open a minimal public issue
+   asking for a private maintainer contact path. Do not include exploit details
+   in that issue.
+
+Please include:
+
+- Affected Reasonix version, commit, operating system, and installation method.
+- The feature or surface involved, such as CLI, desktop app, HTTP `serve`, bot
+  gateway, MCP plugin, built-in tool, updater, or configuration loading.
+- Clear reproduction steps using dummy credentials and non-sensitive files.
+- The expected impact, such as secret disclosure, arbitrary file access,
+  command execution, sandbox escape, authentication bypass, or supply-chain risk.
+- Any relevant logs with API keys, tokens, local paths, and personal data
+  redacted.
+
+Do not send real provider API keys, bot credentials, OAuth tokens, private
+workspace files, or third-party user data.
+
+## Security Boundaries
+
+Reasonix is a local coding agent. Many features intentionally operate on the
+user's local machine and workspace, including file reads, file writes, shell
+commands, MCP plugins, language servers, bot sessions, and model-provider
+requests. A finding is security-relevant when it crosses a supported boundary or
+bypasses an explicit guard.
+
+Supported boundaries include:
+
+- Workspace confinement for file operations that are documented or implemented
+  as workspace-scoped.
+- Permission checks for tool calls, shell commands, file writes, and approvals.
+- Sandbox behavior for built-in shell execution where the platform supports it.
+- Secret handling for provider keys, bot credentials, OAuth tokens, plugin
+  headers, and credential-store fallback files.
+- HTTP `serve` protections for the unauthenticated local server, including
+  localhost binding assumptions, JSON-only state-changing requests, and CORS
+  restrictions.
+- Desktop and bot session isolation, including per-workspace session metadata
+  and configured bot allowlists.
+- Updater, install, and release verification paths.
+
+The following are normally treated as trusted local/operator-controlled inputs
+unless another bug lets an untrusted actor supply them:
+
+- CLI arguments and text typed directly by the local user.
+- Project configuration files intentionally loaded from the current workspace.
+- Explicit `@path` references supplied by the local user to attach local files.
+- MCP servers, language servers, hooks, and slash commands installed or enabled
+  by the local user.
+- Provider base URLs and model names configured by the local user.
+
+The following can be security issues when reachable by an untrusted actor or
+when they bypass the intended boundary:
+
+- Reading or writing files outside the configured workspace without explicit
+  local-user intent.
+- Following symlinks or path traversal to escape workspace confinement.
+- Running shell commands or external tools without the required permission gate.
+- Leaking credentials, environment variables, prompt history, local files, or bot
+  messages to logs, model providers, MCP servers, crash reports, or telemetry.
+- Allowing a website to drive the local HTTP server through CSRF, CORS, or
+  content-type bypasses.
+- Letting a bot user outside the configured allowlist submit prompts, approve
+  tools, or access a project workspace.
+- Trusting unverified update artifacts, plugin definitions, or downloaded
+  binaries.
+
+## `@` File References
+
+Reasonix supports `@path` references so users can include local files and images
+in a prompt. This is intentional local functionality, but implementations must
+preserve these invariants:
+
+- In workspace-scoped sessions, relative and absolute paths must resolve under
+  the active workspace root before file content is read or attached.
+- Path traversal such as `..` must not escape the workspace root.
+- Symlinks must not be usable to bypass the intended workspace boundary.
+- Unscoped local CLI compatibility must not be exposed to remote, bot, or
+  browser-controlled inputs unless an equivalent workspace boundary is applied.
+- File content should be size-limited and binary content should not be dumped as
+  prompt text.
+
+Static analysis alerts about path expressions should be triaged against these
+rules: user-controlled path data is expected, but the access must either stay
+inside the configured workspace or be clearly limited to trusted local CLI use.
+
+## Out of Scope
+
+The following reports are usually out of scope unless they demonstrate a bypass
+of one of the boundaries above:
+
+- A local user intentionally asks Reasonix to read, edit, or send their own
+  files to a configured model provider.
+- A local user installs or enables a malicious MCP server, hook, slash command,
+  language server, or shell command and then grants it permission.
+- A configured model provider, proxy, or MCP server receives data the user
+  intentionally sent to it.
+- Denial-of-service issues that only affect the local user's own session and do
+  not corrupt files, leak secrets, or bypass permissions.
+- Issues requiring administrator/root access on the user's machine before
+  interacting with Reasonix.
+- Vulnerabilities in third-party services, models, proxies, or plugins that are
+  not caused by Reasonix behavior.
+
+## Coordinated Disclosure
+
+This is a community-maintained project. Maintainers will make a best-effort
+assessment, ask follow-up questions when needed, and coordinate fixes before
+public disclosure for confirmed vulnerabilities.
+
+Please give maintainers reasonable time to investigate and release a fix before
+publishing exploit details. If you plan to disclose on a timeline, include that
+timeline in your initial report.

desktop/README.md

@@ -183,11 +183,18 @@ the **native** webview per OS, so the rough edges are platform-specific. What's
 handled here, and what to reach for if a target misbehaves:
 
 - **Linux / WebKitGTK** is the one real pain point — rendering varies by distro &
-  GPU driver. `main.go` sets `WebviewGpuPolicy: OnDemand` to avoid blank/flickering
-  webviews from forced compositing. If artifacts persist, launch with
-  `WEBKIT_DISABLE_COMPOSITING_MODE=1`. Test on at least one GTK target before
-  release; the CSS deliberately avoids `backdrop-filter`/blur (slow & inconsistent
-  there).
+  GPU driver. `main.go` keeps `WebviewGpuPolicy: OnDemand` when a DRI render node
+  is usable, and falls back to `Never` for xrdp/headless/software-rendered sessions
+  that cannot access `/dev/dri`. If artifacts persist, launch with
+  `WEBKIT_DISABLE_COMPOSITING_MODE=1`. Test on at least one GTK target before release;
+  the CSS deliberately avoids `backdrop-filter`/blur (slow & inconsistent there).
+  - **Wayland + NVIDIA**: On KDE Plasma Wayland with NVIDIA GPUs, WebKitGTK can
+    crash at startup (`Error 71: Protocol error`) due to an upstream WebKit
+    explicit-sync bug (WebKit #280210, #317089, NVIDIA/egl-wayland #179).
+    Reasonix automatically sets `__NV_DISABLE_EXPLICIT_SYNC=1` when it detects
+    Wayland + NVIDIA GPU. To opt out, set `__NV_DISABLE_EXPLICIT_SYNC=0`.
+    Alternative fallbacks: `WEBKIT_DISABLE_DMABUF_RENDERER=1` (poor performance)
+    or `GDK_BACKEND=x11` (forces XWayland).
 - **Windows / WebView2** — `Theme: SystemDefault` follows the OS light/dark
   setting; the installer embeds the WebView2 bootstrapper. Canary builds disable
   WebView2 GPU acceleration by default to smoke-test blank-window reports; set
@@ -240,3 +247,13 @@ Settings > Updates > "Share aggregate quality metrics", or by setting
 `metrics = false` under `[desktop]`. These metrics are anonymous signal/bucket
 counts and preference buckets; they never include conversations, prompts, keys,
 paths, base URLs, or file contents.
+
+When Memory v5 is enabled, the same aggregate metrics pipeline may include only
+content-free count/size buckets such as injection on/off, compiled-token bucket,
+IR-overhead bucket, memory-reference count, constraint/risk/step counts, and
+memory-graph size buckets. It never uploads memory text, tool outputs, prompts,
+file paths, IDs, keys, base URLs, or file contents. The Memory v5 runtime itself
+is controlled from Settings > General > "Memory v5" and shares the user/global
+`agent.memory_compiler.enabled` setting with the CLI/TUI and `reasonix serve`;
+CLI users can also run `/memory-v5 off|observe|compact|on|status` in a session
+or `reasonix config memory-v5 off|observe|compact|on|status` from a shell.

desktop/app_autosave_test.go

@@ -32,7 +32,7 @@ func controllerWithContent(t *testing.T, path string) *control.Controller {
 	sess.Add(provider.Message{Role: provider.RoleUser, Content: "remember this turn"})
 	sess.Add(provider.Message{Role: provider.RoleAssistant, Content: "acknowledged"})
 	ag := agent.New(stubProvider{}, tool.NewRegistry(), sess, agent.Options{}, event.Discard)
-	return control.New(control.Options{Executor: ag, SessionPath: path, Sink: event.Discard})
+	return control.New(control.Options{Executor: ag, SessionDir: filepath.Dir(path), SessionPath: path, Sink: event.Discard})
 }
 
 func waitForFile(t *testing.T, path, want string) {
@@ -49,7 +49,12 @@ func waitForFile(t *testing.T, path, want string) {
 
 func waitForAutosaveIdle(t *testing.T, tab *WorkspaceTab) {
 	t.Helper()
-	deadline := time.Now().Add(2 * time.Second)
+	waitForAutosaveIdleWithin(t, tab, 2*time.Second)
+}
+
+func waitForAutosaveIdleWithin(t *testing.T, tab *WorkspaceTab, timeout time.Duration) {
+	t.Helper()
+	deadline := time.Now().Add(timeout)
 	for time.Now().Before(deadline) {
 		tab.saveMu.Lock()
 		idle := !tab.saving && !tab.saveAgain
@@ -132,6 +137,91 @@ func TestScheduleSnapshotCoalesces(t *testing.T) {
 	waitForAutosaveIdle(t, tab)
 }
 
+func TestAutosaveFailureRetriesAndRecoversOnNextTurnDone(t *testing.T) {
+	path := filepath.Join(t.TempDir(), "blocked.jsonl")
+	if err := os.Mkdir(path, 0o755); err != nil {
+		t.Fatalf("mkdir blocked path: %v", err)
+	}
+	a, tab := appWithTab(t, path)
+	_ = a
+
+	tab.sink.Emit(event.Event{Kind: event.TurnDone})
+	waitForAutosaveIdleWithin(t, tab, 5*time.Second)
+
+	tab.saveMu.Lock()
+	failures := tab.saveFailures
+	tab.saveMu.Unlock()
+	if failures == 0 {
+		t.Fatal("autosave failure should be recorded and retried")
+	}
+	if info, err := os.Stat(path); err != nil || !info.IsDir() {
+		t.Fatalf("blocked session path should still be the directory, info=%v err=%v", info, err)
+	}
+
+	if err := os.Remove(path); err != nil {
+		t.Fatalf("remove blocked dir: %v", err)
+	}
+	tab.sink.Emit(event.Event{Kind: event.TurnDone})
+	waitForFile(t, path, "remember this turn")
+	waitForAutosaveIdle(t, tab)
+
+	tab.saveMu.Lock()
+	failures = tab.saveFailures
+	tab.saveMu.Unlock()
+	if failures != 0 {
+		t.Fatalf("autosave failures after recovery = %d, want 0", failures)
+	}
+}
+
+func TestSetActiveTabBlocksWhenCurrentSessionCannotPersist(t *testing.T) {
+	path := filepath.Join(t.TempDir(), "blocked.jsonl")
+	if err := os.Mkdir(path, 0o755); err != nil {
+		t.Fatalf("mkdir blocked path: %v", err)
+	}
+	a, _ := appWithTab(t, path)
+	a.tabs["target_tab"] = &WorkspaceTab{
+		ID:          "target_tab",
+		Scope:       "global",
+		Ready:       true,
+		disabledMCP: map[string]ServerView{},
+	}
+	a.tabOrder = []string{"test_tab", "target_tab"}
+
+	err := a.SetActiveTab("target_tab")
+	if err == nil || !strings.Contains(err.Error(), "save current session before switching tabs") {
+		t.Fatalf("SetActiveTab error = %v, want persistence failure", err)
+	}
+	if a.activeTabID != "test_tab" {
+		t.Fatalf("active tab = %q, want original tab after failed save", a.activeTabID)
+	}
+}
+
+func TestRebindSessionBlocksWhenCurrentSessionCannotPersist(t *testing.T) {
+	path := filepath.Join(t.TempDir(), "blocked.jsonl")
+	if err := os.Mkdir(path, 0o755); err != nil {
+		t.Fatalf("mkdir blocked path: %v", err)
+	}
+	a, tab := appWithTab(t, path)
+	target := filepath.Join(t.TempDir(), "target.jsonl")
+	sess := agent.NewSession("system")
+	sess.Add(provider.Message{Role: provider.RoleUser, Content: "target prompt"})
+	if err := sess.Save(target); err != nil {
+		t.Fatalf("save target: %v", err)
+	}
+	loaded, err := agent.LoadSession(target)
+	if err != nil {
+		t.Fatalf("load target: %v", err)
+	}
+
+	err = a.rebindTabToLoadedSessionPath(tab, target, loaded)
+	if err == nil || !strings.Contains(err.Error(), "save current session before switching sessions") {
+		t.Fatalf("rebind error = %v, want persistence failure", err)
+	}
+	if tab.Ctrl == nil || tab.Ctrl.SessionPath() != path {
+		t.Fatalf("tab controller/path changed after failed save: ctrl=%v path=%q", tab.Ctrl, tab.currentSessionPath())
+	}
+}
+
 // TestCloseTabNoResurrectionFromAutosave is the regression test for #4384.
 // It proves that after CloseTab returns, the per-turn autosave goroutine can no
 // longer write the session file — even when it is in flight at the moment the
@@ -187,6 +277,34 @@ func TestCloseTabNoResurrectionFromAutosave(t *testing.T) {
 	}
 }
 
+func TestCloseTabBlocksWhenSessionCannotPersist(t *testing.T) {
+	path := filepath.Join(t.TempDir(), "blocked.jsonl")
+	if err := os.Mkdir(path, 0o755); err != nil {
+		t.Fatalf("mkdir blocked path: %v", err)
+	}
+	a, tab := appWithTab(t, path)
+	survivor := &WorkspaceTab{
+		ID:          "survivor_tab",
+		Scope:       "global",
+		Ready:       true,
+		disabledMCP: map[string]ServerView{},
+	}
+	survivor.sink = &tabEventSink{tabID: survivor.ID, app: a}
+	a.tabs[survivor.ID] = survivor
+	a.tabOrder = []string{tab.ID, survivor.ID}
+
+	err := a.CloseTab(tab.ID)
+	if err == nil || !strings.Contains(err.Error(), "save current session before closing tab") {
+		t.Fatalf("CloseTab error = %v, want persistence failure", err)
+	}
+	if _, ok := a.tabs[tab.ID]; !ok {
+		t.Fatal("tab was removed even though its session could not be saved")
+	}
+	if tab.Ctrl == nil || tab.Ctrl.SessionPath() != path {
+		t.Fatalf("tab controller/path changed after failed close: ctrl=%v path=%q", tab.Ctrl, tab.currentSessionPath())
+	}
+}
+
 // TestCloseTabSurvivorKeepsAutosave ensures the survivor tab is untouched: the
 // closing/drain logic is per-tab and must not leak to other tabs.
 func TestCloseTabSurvivorKeepsAutosave(t *testing.T) {
@@ -221,3 +339,99 @@ func TestCloseTabSurvivorKeepsAutosave(t *testing.T) {
 		t.Fatal("survivor tab was marked closing — closing flag leaked across tabs")
 	}
 }
+
+func TestDeleteSessionClearsRemovedRuntimeSessionPath(t *testing.T) {
+	isolateDesktopUserDirs(t)
+
+	dir := t.TempDir()
+	path := filepath.Join(dir, "delete-open.jsonl")
+	ctrl := controllerWithContent(t, path)
+	tab := &WorkspaceTab{
+		ID:          "delete_open",
+		Scope:       "global",
+		Ready:       true,
+		Ctrl:        ctrl,
+		disabledMCP: map[string]ServerView{},
+	}
+	app := &App{
+		tabs:        map[string]*WorkspaceTab{"delete_open": tab},
+		activeTabID: "delete_open",
+	}
+	if err := ctrl.Snapshot(); err != nil {
+		t.Fatalf("snapshot: %v", err)
+	}
+
+	if err := app.DeleteSession(path); err != nil {
+		t.Fatalf("DeleteSession: %v", err)
+	}
+
+	if got := ctrl.SessionPath(); got != "" {
+		t.Fatalf("removed controller session path = %q, want empty before trash move can race Windows file locks", got)
+	}
+	trashPath := filepath.Join(dir, sessionTrashDir, "delete-open.jsonl", "delete-open.jsonl")
+	if _, err := os.Stat(trashPath); err != nil {
+		t.Fatalf("session should be in trash: %v", err)
+	}
+}
+
+func TestTrashTopicClearsRemovedRuntimeSessionPath(t *testing.T) {
+	isolateDesktopUserDirs(t)
+
+	projectRoot := t.TempDir()
+	topicID := "topic_clear_removed_runtime"
+	if err := addProject(projectRoot, ""); err != nil {
+		t.Fatalf("add project: %v", err)
+	}
+	if err := setTopicTitle(projectRoot, topicID, "Clear removed runtime"); err != nil {
+		t.Fatalf("set topic title: %v", err)
+	}
+	dir := t.TempDir()
+	path := filepath.Join(dir, "trash-open-topic.jsonl")
+	ctrl := controllerWithContent(t, path)
+	if err := ctrl.Snapshot(); err != nil {
+		t.Fatalf("snapshot: %v", err)
+	}
+	if err := agent.SaveBranchMeta(path, agent.BranchMeta{
+		CreatedAt:     time.Now().Add(-time.Minute),
+		UpdatedAt:     time.Now(),
+		Scope:         "project",
+		WorkspaceRoot: projectRoot,
+		TopicID:       topicID,
+		TopicTitle:    "Clear removed runtime",
+	}); err != nil {
+		t.Fatalf("save branch meta: %v", err)
+	}
+	tab := &WorkspaceTab{
+		ID:            "trash_open",
+		Scope:         "project",
+		WorkspaceRoot: projectRoot,
+		TopicID:       topicID,
+		TopicTitle:    "Clear removed runtime",
+		Ready:         true,
+		Ctrl:          ctrl,
+		disabledMCP:   map[string]ServerView{},
+	}
+	survivor := &WorkspaceTab{
+		ID:          "survivor",
+		Scope:       "global",
+		Ready:       true,
+		disabledMCP: map[string]ServerView{},
+	}
+	app := &App{
+		tabs:        map[string]*WorkspaceTab{"trash_open": tab, "survivor": survivor},
+		tabOrder:    []string{"trash_open", "survivor"},
+		activeTabID: "trash_open",
+	}
+
+	if err := app.TrashTopic(topicID); err != nil {
+		t.Fatalf("TrashTopic: %v", err)
+	}
+
+	if got := ctrl.SessionPath(); got != "" {
+		t.Fatalf("removed topic controller session path = %q, want empty before trash move can race Windows file locks", got)
+	}
+	trashPath := filepath.Join(dir, sessionTrashDir, "trash-open-topic.jsonl", "trash-open-topic.jsonl")
+	if _, err := os.Stat(trashPath); err != nil {
+		t.Fatalf("topic session should be in trash: %v", err)
+	}
+}

desktop/app_session_dedup_test.go

@@ -4,8 +4,10 @@ import (
 	"os"
 	"path/filepath"
 	"testing"
+	"time"
 
 	"reasonix/internal/agent"
+	"reasonix/internal/config"
 	"reasonix/internal/control"
 	"reasonix/internal/event"
 	"reasonix/internal/provider"
@@ -67,6 +69,12 @@ func TestEnsureBlankTabReusesExistingBlankTab(t *testing.T) {
 	if err != nil {
 		t.Fatal(err)
 	}
+	if first.SessionPath == "" {
+		t.Fatal("EnsureBlankTab should pre-create a session path for immediate deletion")
+	}
+	if _, err := os.Stat(first.SessionPath); err != nil {
+		t.Fatalf("pre-created blank session should exist: %v", err)
+	}
 	second, err := app.EnsureBlankTab("global", "")
 	if err != nil {
 		t.Fatal(err)
@@ -79,6 +87,85 @@ func TestEnsureBlankTabReusesExistingBlankTab(t *testing.T) {
 	}
 }
 
+func TestEnsureBlankTabReusesPrecreatedBlankBeforeControllerReady(t *testing.T) {
+	isolateDesktopUserDirs(t)
+
+	globalRoot := globalWorkspaceRoot()
+	if err := os.MkdirAll(globalRoot, 0o755); err != nil {
+		t.Fatal(err)
+	}
+	sessionPath := agent.NewSessionPath(desktopSessionDir(globalRoot), "")
+	if err := os.MkdirAll(filepath.Dir(sessionPath), 0o755); err != nil {
+		t.Fatal(err)
+	}
+	if err := os.WriteFile(sessionPath, nil, 0o644); err != nil {
+		t.Fatal(err)
+	}
+
+	app := NewApp()
+	topic, err := app.CreateTopic("global", "", "")
+	if err != nil {
+		t.Fatalf("create topic: %v", err)
+	}
+	app.tabs["blank"] = &WorkspaceTab{
+		ID:            "blank",
+		Scope:         "global",
+		WorkspaceRoot: globalRoot,
+		TopicID:       topic.ID,
+		TopicTitle:    defaultTopicTitle,
+		SessionPath:   sessionPath,
+		disabledMCP:   map[string]ServerView{},
+	}
+	app.tabOrder = []string{"blank"}
+	app.activeTabID = "blank"
+
+	meta, err := app.EnsureBlankTab("global", "")
+	if err != nil {
+		t.Fatalf("EnsureBlankTab: %v", err)
+	}
+	if meta.ID != "blank" {
+		t.Fatalf("EnsureBlankTab created duplicate blank tab %q, want existing pre-created blank", meta.ID)
+	}
+}
+
+func TestEnsureBlankTabReusesIndexedTopicWithEmptyStub(t *testing.T) {
+	isolateDesktopUserDirs(t)
+
+	app := NewApp()
+	topic, err := app.CreateTopic("global", "", "")
+	if err != nil {
+		t.Fatalf("create topic: %v", err)
+	}
+	globalRoot := globalWorkspaceRoot()
+	dir := desktopSessionDir(globalRoot)
+	if err := os.MkdirAll(dir, 0o755); err != nil {
+		t.Fatalf("mkdir sessions: %v", err)
+	}
+	stubPath := filepath.Join(dir, "empty-stub.jsonl")
+	if err := os.WriteFile(stubPath, nil, 0o644); err != nil {
+		t.Fatalf("write empty stub: %v", err)
+	}
+	now := time.Now()
+	if err := agent.SaveBranchMetaPreserveUpdated(stubPath, agent.BranchMeta{
+		CreatedAt:     now.Add(-time.Minute),
+		UpdatedAt:     now,
+		Scope:         "global",
+		WorkspaceRoot: globalRoot,
+		TopicID:       topic.ID,
+		TopicTitle:    defaultTopicTitle,
+	}); err != nil {
+		t.Fatalf("save branch meta: %v", err)
+	}
+
+	meta, err := app.EnsureBlankTab("global", "")
+	if err != nil {
+		t.Fatalf("EnsureBlankTab: %v", err)
+	}
+	if meta.TopicID != topic.ID {
+		t.Fatalf("EnsureBlankTab topic = %q, want reused empty topic %q", meta.TopicID, topic.ID)
+	}
+}
+
 // EnsureBlankTab reuses an already-open project-scoped blank tab.
 
 func TestEnsureBlankTabCreatesOneBlankPerProject(t *testing.T) {
@@ -254,6 +341,36 @@ func TestEnsureBlankTabOpensExistingProjectSidebarBlankTopic(t *testing.T) {
 	}
 }
 
+func TestEnsureBlankTabDoesNotReuseProjectTopicWithSession(t *testing.T) {
+	isolateDesktopUserDirs(t)
+
+	projectRoot := robustTempDir(t)
+	app := NewApp()
+	topic, err := app.CreateTopic("project", projectRoot, "")
+	if err != nil {
+		t.Fatalf("CreateTopic: %v", err)
+	}
+	dir := desktopSessionDir(projectRoot)
+	if err := os.MkdirAll(dir, 0o755); err != nil {
+		t.Fatalf("mkdir sessions: %v", err)
+	}
+	existingPath := writeTopicSession(t, dir, "existing.jsonl", topic.ID, defaultTopicTitle, projectRoot)
+	if got, _ := app.findTopicSessionForTarget("project", projectRoot, topic.ID); got != existingPath {
+		t.Fatalf("precondition topic session = %q, want %q", got, existingPath)
+	}
+
+	meta, err := app.EnsureBlankTab("project", projectRoot)
+	if err != nil {
+		t.Fatalf("EnsureBlankTab: %v", err)
+	}
+	if meta.TopicID == topic.ID {
+		t.Fatalf("EnsureBlankTab reused topic %q even though it already has session %q", topic.ID, existingPath)
+	}
+	if got, _ := app.findTopicSessionForTarget("project", projectRoot, topic.ID); got != existingPath {
+		t.Fatalf("existing topic session changed = %q, want %q", got, existingPath)
+	}
+}
+
 // NewSession skips the snapshot when the current tab has no real conversation content.
 
 func TestNewSessionNoopsWhenCurrentTabIsBlank(t *testing.T) {
@@ -272,3 +389,105 @@ func TestNewSessionNoopsWhenCurrentTabIsBlank(t *testing.T) {
 		t.Fatalf("blank NewSession changed session path = %q, want %q", got, path)
 	}
 }
+
+func TestNewSessionUsesFreshTopicIdentity(t *testing.T) {
+	isolateDesktopUserDirs(t)
+
+	projectRoot := t.TempDir()
+	dir := config.SessionDir()
+	if err := os.MkdirAll(dir, 0o755); err != nil {
+		t.Fatalf("mkdir sessions: %v", err)
+	}
+	oldTopicID := "topic_old"
+	oldTopicTitle := "Old topic"
+	oldPath := writeTopicSessionWithPrompt(t, dir, "old.jsonl", oldTopicID, oldTopicTitle, projectRoot, "old prompt", time.Now().Add(-time.Hour))
+	sess := &agent.Session{}
+	sess.Replace([]provider.Message{{Role: provider.RoleUser, Content: "old prompt"}})
+	ag := agent.New(stubProvider{}, tool.NewRegistry(), sess, agent.Options{}, event.Discard)
+	ctrl := control.New(control.Options{Executor: ag, SessionDir: dir, SessionPath: oldPath, Sink: event.Discard})
+
+	app := NewApp()
+	app.setTestCtrl(ctrl, "model-a")
+	tab := app.tabs["test"]
+	tab.Scope = "project"
+	tab.WorkspaceRoot = projectRoot
+	tab.TopicID = oldTopicID
+	tab.TopicTitle = oldTopicTitle
+	tab.SessionPath = oldPath
+	app.projectTreeChangedHook = func() {}
+
+	if err := app.NewSession(); err != nil {
+		t.Fatalf("NewSession: %v", err)
+	}
+	if got := tab.TopicID; got == "" || got == oldTopicID {
+		t.Fatalf("new session topic ID = %q, want fresh ID distinct from %q", got, oldTopicID)
+	}
+	if got := tab.TopicTitle; got != defaultTopicTitle {
+		t.Fatalf("new session topic title = %q, want %q", got, defaultTopicTitle)
+	}
+	newPath := ctrl.SessionPath()
+	if newPath == "" || filepath.Clean(newPath) == filepath.Clean(oldPath) {
+		t.Fatalf("new session path = %q, want fresh path distinct from %q", newPath, oldPath)
+	}
+
+	if err := os.WriteFile(newPath, []byte(`{"role":"user","content":"new prompt"}`+"\n"), 0o644); err != nil {
+		t.Fatalf("write new session: %v", err)
+	}
+	if !app.maybeAutoTitleTopic(tab) {
+		t.Fatalf("new session should auto-title its fresh topic")
+	}
+
+	oldMeta, ok, err := agent.LoadBranchMeta(oldPath)
+	if err != nil || !ok {
+		t.Fatalf("load old meta: ok=%v err=%v", ok, err)
+	}
+	if oldMeta.TopicID != oldTopicID || oldMeta.TopicTitle != oldTopicTitle {
+		t.Fatalf("old session meta changed after new session auto-title: %+v", oldMeta)
+	}
+	newMeta, ok, err := agent.LoadBranchMeta(newPath)
+	if err != nil || !ok {
+		t.Fatalf("load new meta: ok=%v err=%v", ok, err)
+	}
+	if newMeta.TopicID != tab.TopicID || newMeta.TopicTitle != "new prompt" {
+		t.Fatalf("new session meta = %+v, want topic %q titled new prompt", newMeta, tab.TopicID)
+	}
+}
+
+func TestNewSessionKeepsFreshRuntimeWhenTopicRepairFails(t *testing.T) {
+	isolateDesktopUserDirs(t)
+
+	dir := config.SessionDir()
+	if err := os.MkdirAll(dir, 0o755); err != nil {
+		t.Fatalf("mkdir sessions: %v", err)
+	}
+	path := agent.NewSessionPath(dir, "model-a")
+	ctrl := controllerWithContent(t, path)
+	app := NewApp()
+	app.projectTreeChangedHook = func() {}
+	app.setTestCtrl(ctrl, "model-a")
+	tab := app.tabs["test"]
+	tab.TopicID = "topic_old"
+	tab.TopicTitle = "Old topic"
+
+	// Block desktopConfigDir-backed topic-index writes without affecting the
+	// session directory, which exercises the post-NewSession repair failure path.
+	if err := os.MkdirAll(filepath.Dir(desktopConfigDir()), 0o755); err != nil {
+		t.Fatalf("mkdir desktop config parent: %v", err)
+	}
+	if err := os.WriteFile(desktopConfigDir(), []byte("not-a-directory"), 0o644); err != nil {
+		t.Fatalf("block desktop config dir: %v", err)
+	}
+
+	if err := app.NewSession(); err != nil {
+		t.Fatalf("NewSession should keep the fresh runtime even when topic repair fails: %v", err)
+	}
+	if got := tab.TopicID; got == "" || got == "topic_old" {
+		t.Fatalf("new session topic ID = %q, want fresh ID distinct from the old topic", got)
+	}
+	if got := tab.TopicTitle; got != defaultTopicTitle {
+		t.Fatalf("new session topic title = %q, want %q", got, defaultTopicTitle)
+	}
+	if got := ctrl.SessionPath(); got == "" || filepath.Clean(got) == filepath.Clean(path) {
+		t.Fatalf("new session path = %q, want a fresh path distinct from %q", got, path)
+	}
+}

desktop/attach_dropped_test.go

@@ -1,11 +1,17 @@
 package main
 
 import (
+	"context"
 	"encoding/base64"
 	"os"
 	"path/filepath"
 	"strings"
 	"testing"
+	"time"
+
+	"reasonix/internal/config"
+	"reasonix/internal/control"
+	"reasonix/internal/event"
 )
 
 const desktopTinyPNG = "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg=="
@@ -73,6 +79,51 @@ func TestSavePastedImageUsesActiveWorkspaceRoot(t *testing.T) {
 	}
 }
 
+func TestSavePastedImageUsesPinnedSessionOwnerBeforeStaleWorkspaceRoot(t *testing.T) {
+	isolateDesktopUserDirs(t)
+	orig, _ := os.Getwd()
+	defer os.Chdir(orig)
+
+	launchRoot := t.TempDir()
+	projectA := t.TempDir()
+	projectB := t.TempDir()
+	if err := addProject(projectA, "Project A"); err != nil {
+		t.Fatalf("add project A: %v", err)
+	}
+	if err := addProject(projectB, "Project B"); err != nil {
+		t.Fatalf("add project B: %v", err)
+	}
+	sessionDirA := desktopSessionDir(projectA)
+	if err := os.MkdirAll(sessionDirA, 0o755); err != nil {
+		t.Fatalf("mkdir project A sessions: %v", err)
+	}
+	sessionPathA := writeTopicSessionWithPrompt(t, sessionDirA, "project-a.jsonl", "topic_attach_owner", "Attach owner", projectA, "project A prompt", time.Now())
+	if err := os.Chdir(launchRoot); err != nil {
+		t.Fatal(err)
+	}
+
+	app := &App{
+		tabs: map[string]*WorkspaceTab{
+			"project": {ID: "project", Scope: "project", WorkspaceRoot: projectB, SessionPath: sessionPathA},
+		},
+		activeTabID: "project",
+	}
+
+	got, err := app.SavePastedImage("data:image/png;base64," + desktopTinyPNG)
+	if err != nil {
+		t.Fatalf("SavePastedImage: %v", err)
+	}
+	if _, err := os.Stat(filepath.Join(projectA, filepath.FromSlash(got))); err != nil {
+		t.Fatalf("pasted image should be saved under pinned session owner project A: %v", err)
+	}
+	if _, err := os.Stat(filepath.Join(projectB, filepath.FromSlash(got))); !os.IsNotExist(err) {
+		t.Fatalf("pasted image should not be saved under stale project B, stat err=%v", err)
+	}
+	if gotRoot := normalizeProjectRoot(app.tabs["project"].WorkspaceRoot); gotRoot != normalizeProjectRoot(projectA) {
+		t.Fatalf("tab workspace root = %q, want project A %q", gotRoot, normalizeProjectRoot(projectA))
+	}
+}
+
 func TestAttachDroppedUsesActiveWorkspaceRoot(t *testing.T) {
 	orig, _ := os.Getwd()
 	defer os.Chdir(orig)
@@ -225,3 +276,152 @@ func TestAttachDroppedImageStoresThumbnail(t *testing.T) {
 		t.Fatalf("preview = %q, want png data URL", got.PreviewURL)
 	}
 }
+
+func TestAttachDroppedOutsideWorkspaceDirRegistersWorkspaceRef(t *testing.T) {
+	orig, _ := os.Getwd()
+	defer os.Chdir(orig)
+
+	workspace := t.TempDir()
+	outside := filepath.Join(t.TempDir(), "Folder With Spaces")
+	if err := os.MkdirAll(filepath.Join(outside, "sub"), 0o755); err != nil {
+		t.Fatal(err)
+	}
+	if err := os.WriteFile(filepath.Join(outside, "sub", "notes.txt"), []byte("notes"), 0o644); err != nil {
+		t.Fatal(err)
+	}
+	expectedOutside := outside
+	if resolved, err := filepath.EvalSymlinks(outside); err == nil {
+		expectedOutside = resolved
+	}
+	expectedDisplayPath := filepath.ToSlash(expectedOutside)
+	if err := os.Chdir(workspace); err != nil {
+		t.Fatal(err)
+	}
+
+	ctrl := control.New(control.Options{WorkspaceRoot: workspace})
+	app := &App{
+		tabs: map[string]*WorkspaceTab{
+			"project": {ID: "project", WorkspaceRoot: workspace, Ctrl: ctrl},
+		},
+		activeTabID: "project",
+	}
+
+	got, err := app.AttachDropped(outside)
+	if err != nil {
+		t.Fatalf("AttachDropped: %v", err)
+	}
+	if got.Kind != "workspace" || !got.IsDir {
+		t.Fatalf("got %+v, want workspace directory ref", got)
+	}
+	if !strings.HasPrefix(got.Path, "__reasonix_external_folder/") || strings.ContainsAny(got.Path, " \t\r\n") {
+		t.Fatalf("external folder path token = %q, want whitespace-free external token", got.Path)
+	}
+	if got.DisplayPath != expectedDisplayPath {
+		t.Fatalf("display path = %q, want %q", got.DisplayPath, expectedDisplayPath)
+	}
+
+	block, errs := ctrl.ResolveScopedRefs(context.Background(), "inspect @"+got.Path+"/")
+	if len(errs) != 0 {
+		t.Fatalf("ResolveScopedRefs errors = %v", errs)
+	}
+	if !strings.Contains(block, `<dir path="`+expectedDisplayPath+`">`) ||
+		!strings.Contains(block, "sub/") ||
+		!strings.Contains(block, "sub/notes.txt") {
+		t.Fatalf("external dropped folder should resolve as dir context:\n%s", block)
+	}
+}
+
+func TestAttachDroppedOutsideWorkspaceDirRegistersAfterPinnedOwnerRebuild(t *testing.T) {
+	isolateDesktopUserDirs(t)
+	setDesktopTestCredential(t, "TEST_MODEL_KEY", "sk-test")
+	cfg := config.Default()
+	cfg.DefaultModel = "test/test-model"
+	cfg.Desktop.ProviderAccess = []string{"test"}
+	cfg.Providers = []config.ProviderEntry{
+		{Name: "test", Kind: "openai", BaseURL: "https://example.invalid/v1", Model: "test-model", APIKeyEnv: "TEST_MODEL_KEY"},
+	}
+	if err := cfg.SaveTo(config.UserConfigPath()); err != nil {
+		t.Fatalf("save config: %v", err)
+	}
+	orig, _ := os.Getwd()
+	defer os.Chdir(orig)
+
+	projectA := t.TempDir()
+	projectB := t.TempDir()
+	outside := filepath.Join(t.TempDir(), "External")
+	if err := os.MkdirAll(filepath.Join(outside, "sub"), 0o755); err != nil {
+		t.Fatal(err)
+	}
+	if err := os.WriteFile(filepath.Join(outside, "sub", "notes.txt"), []byte("notes"), 0o644); err != nil {
+		t.Fatal(err)
+	}
+	if err := addProject(projectA, "Project A"); err != nil {
+		t.Fatalf("add project A: %v", err)
+	}
+	if err := addProject(projectB, "Project B"); err != nil {
+		t.Fatalf("add project B: %v", err)
+	}
+	sessionDirA := desktopSessionDir(projectA)
+	sessionDirB := desktopSessionDir(projectB)
+	if err := os.MkdirAll(sessionDirA, 0o755); err != nil {
+		t.Fatalf("mkdir project A sessions: %v", err)
+	}
+	if err := os.MkdirAll(sessionDirB, 0o755); err != nil {
+		t.Fatalf("mkdir project B sessions: %v", err)
+	}
+	sessionPathA := writeTopicSessionWithPrompt(t, sessionDirA, "project-a.jsonl", "topic_external_ref", "External ref", projectA, "project A prompt", time.Now())
+	sessionPathB := filepath.Join(sessionDirB, "wrong.jsonl")
+	oldCtrl := control.New(control.Options{
+		SessionDir:    sessionDirB,
+		SessionPath:   sessionPathB,
+		WorkspaceRoot: projectB,
+		Sink:          event.Discard,
+	})
+	app := NewApp()
+	app.readyHook = func() {}
+	tab := &WorkspaceTab{
+		ID:            "project",
+		Scope:         "project",
+		WorkspaceRoot: projectB,
+		TopicID:       "topic_external_ref",
+		TopicTitle:    "External ref",
+		SessionPath:   sessionPathA,
+		Ready:         true,
+		model:         "test/test-model",
+		Ctrl:          oldCtrl,
+		sink:          &tabEventSink{tabID: "project", app: app},
+		disabledMCP:   map[string]ServerView{},
+	}
+	app.tabs = map[string]*WorkspaceTab{tab.ID: tab}
+	app.tabOrder = []string{tab.ID}
+	app.activeTabID = tab.ID
+	t.Cleanup(func() {
+		if tab.Ctrl != nil {
+			tab.Ctrl.Close()
+		}
+	})
+
+	got, err := app.AttachDropped(outside)
+	if err != nil {
+		t.Fatalf("AttachDropped: %v", err)
+	}
+	if tab.Ctrl == oldCtrl {
+		t.Fatal("stale controller was reused for external folder ref")
+	}
+	if gotRoot := normalizeProjectRoot(tab.Ctrl.WorkspaceRoot()); gotRoot != normalizeProjectRoot(projectA) {
+		t.Fatalf("controller workspace root = %q, want project A %q", gotRoot, normalizeProjectRoot(projectA))
+	}
+	resolver, ok := tab.Ctrl.(interface {
+		ResolveScopedRefs(context.Context, string) (string, []string)
+	})
+	if !ok {
+		t.Fatalf("rebuilt controller does not resolve scoped refs: %T", tab.Ctrl)
+	}
+	block, errs := resolver.ResolveScopedRefs(context.Background(), "inspect @"+got.Path+"/")
+	if len(errs) != 0 {
+		t.Fatalf("ResolveScopedRefs errors = %v", errs)
+	}
+	if !strings.Contains(block, "sub/notes.txt") {
+		t.Fatalf("external dropped folder should resolve on rebuilt controller:\n%s", block)
+	}
+}

desktop/bot_event_sink.go

@@ -0,0 +1,179 @@
+package main
+
+import (
+	"context"
+	"log"
+	"strings"
+	"sync"
+	"time"
+
+	"reasonix/internal/bot"
+	"reasonix/internal/event"
+)
+
+const botForwardSendTimeout = 30 * time.Second
+const botForwardQueueSize = 64
+
+// ── Forward target ──────────────────────────────────────────────────────────
+
+// botForwardTarget identifies one remote chat to send forwarded events to.
+type botForwardTarget struct {
+	ConnID   string
+	Domain   string
+	ChatID   string
+	ChatType bot.ChatType
+}
+
+// ── Event forwarder ─────────────────────────────────────────────────────────
+
+// botEventForwarder implements event.Sink and forwards relevant events to
+// connected bot channels through the desktopBotRuntime. It is attached to a
+// tabEventSink when a heartbeat task should push AI output to IM channels.
+//
+// It accumulates Text events and sends them as complete messages on TurnDone
+// (and occasionally during generation when the buffer grows large enough), so
+// the remote side sees progressive streaming output rather than one big blob.
+type botEventForwarder struct {
+	runtime *desktopBotRuntime
+	targets []botForwardTarget
+
+	mu        sync.Mutex
+	buf       strings.Builder
+	queueMu   sync.Mutex
+	queue     chan string
+	closed    bool
+	closeOnce sync.Once
+}
+
+// newBotEventForwarder creates a forwarder that sends to all given targets.
+// runtime may be nil — Emit calls are then no-ops.
+func newBotEventForwarder(runtime *desktopBotRuntime, targets []botForwardTarget) *botEventForwarder {
+	f := &botEventForwarder{
+		runtime: runtime,
+		targets: targets,
+		queue:   make(chan string, botForwardQueueSize),
+	}
+	go f.run()
+	return f
+}
+
+// Emit implements event.Sink. It forwards text and lifecycle events to the
+// connected bot channels; reasoning, tool dispatch, and other internal events
+// are dropped to avoid noisy IM output.
+func (f *botEventForwarder) Emit(e event.Event) {
+	if f.runtime == nil || len(f.targets) == 0 {
+		return
+	}
+	switch e.Kind {
+	case event.TurnStarted:
+		f.mu.Lock()
+		f.buf.Reset()
+		f.mu.Unlock()
+
+	case event.Text:
+		f.mu.Lock()
+		f.buf.WriteString(e.Text)
+		size := f.buf.Len()
+		f.mu.Unlock()
+		// Flush opportunistically when the buffer crosses a threshold, so long
+		// streams (e.g. "tell me three jokes") produce multiple messages.
+		if size >= 400 {
+			f.flush()
+		}
+
+	case event.TurnDone:
+		f.flush()
+		f.Close()
+
+	case event.ApprovalRequest:
+		// The heartbeat turn belongs to the desktop tab controller, not the bot
+		// gateway session, so remote /approve replies cannot satisfy this ID.
+		text := "⚠️ 需要在 Reasonix 桌面端批准操作: " + e.Approval.Tool + " — " + e.Approval.Subject
+		text += "\n请回到桌面窗口处理。"
+		f.sendToAll(text)
+
+	case event.AskRequest:
+		var qb strings.Builder
+		qb.WriteString("❓ 需要在 Reasonix 桌面端回答问题:\n")
+		for i, q := range e.Ask.Questions {
+			if i > 0 {
+				qb.WriteString("\n")
+			}
+			qb.WriteString(q.Prompt)
+		}
+		qb.WriteString("\n请回到桌面窗口处理。")
+		f.sendToAll(qb.String())
+
+	case event.Notice:
+		if e.Level == event.LevelWarn {
+			f.sendToAll("⚠️ " + e.Text)
+		}
+
+	case event.CompactionStarted:
+		f.sendToAll("🔄 正在压缩上下文...")
+	}
+}
+
+// flush sends the accumulated buffer as one message per target channel.
+func (f *botEventForwarder) flush() {
+	f.mu.Lock()
+	text := strings.TrimSpace(f.buf.String())
+	if text == "" {
+		f.mu.Unlock()
+		return
+	}
+	f.buf.Reset()
+	f.mu.Unlock()
+
+	f.sendToAll(text)
+}
+
+// sendToAll dispatches text to every target channel. Errors are logged and
+// non-fatal; a failed target does not block other targets.
+func (f *botEventForwarder) sendToAll(text string) {
+	text = strings.TrimSpace(text)
+	if f.runtime == nil || len(f.targets) == 0 || text == "" {
+		return
+	}
+	f.queueMu.Lock()
+	defer f.queueMu.Unlock()
+	if f.closed {
+		return
+	}
+	select {
+	case f.queue <- text:
+	default:
+		log.Printf("[bot-forward] send queue full; dropping message for %d target(s)", len(f.targets))
+	}
+}
+
+func (f *botEventForwarder) run() {
+	for text := range f.queue {
+		f.sendToAllNow(text)
+	}
+}
+
+func (f *botEventForwarder) sendToAllNow(text string) {
+	for _, tgt := range f.targets {
+		ctx, cancel := context.WithTimeout(context.Background(), botForwardSendTimeout)
+		_, err := f.runtime.SendToAdapter(ctx, tgt.ConnID, tgt.Domain, bot.OutboundMessage{
+			ChatID:   tgt.ChatID,
+			ChatType: tgt.ChatType,
+			Text:     text,
+		})
+		cancel()
+		if err != nil {
+			log.Printf("[bot-forward] send to %s/%s failed: %v", tgt.ConnID, tgt.ChatType, err)
+		}
+	}
+}
+
+func (f *botEventForwarder) Close() {
+	f.closeOnce.Do(func() {
+		f.flush()
+		f.queueMu.Lock()
+		f.closed = true
+		close(f.queue)
+		f.queueMu.Unlock()
+	})
+}

desktop/bot_event_sink_test.go

@@ -0,0 +1,133 @@
+package main
+
+import (
+	"context"
+	"io"
+	"log/slog"
+	"strings"
+	"sync"
+	"testing"
+	"time"
+
+	"reasonix/internal/bot"
+	"reasonix/internal/event"
+)
+
+type desktopForwardTestAdapter struct {
+	platform bot.Platform
+	name     string
+	messages chan bot.InboundMessage
+	entered  chan struct{}
+	release  chan struct{}
+	sent     chan bot.OutboundMessage
+	once     sync.Once
+}
+
+func newDesktopForwardTestAdapter() *desktopForwardTestAdapter {
+	return &desktopForwardTestAdapter{
+		platform: bot.PlatformFeishu,
+		name:     "forward-test",
+		messages: make(chan bot.InboundMessage),
+		entered:  make(chan struct{}),
+		release:  make(chan struct{}),
+		sent:     make(chan bot.OutboundMessage, 8),
+	}
+}
+
+func (a *desktopForwardTestAdapter) Platform() bot.Platform { return a.platform }
+func (a *desktopForwardTestAdapter) Name() string           { return a.name }
+func (a *desktopForwardTestAdapter) Start(context.Context) error {
+	return nil
+}
+func (a *desktopForwardTestAdapter) Stop() error { return nil }
+func (a *desktopForwardTestAdapter) SendTyping(context.Context, string) error {
+	return nil
+}
+func (a *desktopForwardTestAdapter) Messages() <-chan bot.InboundMessage {
+	return a.messages
+}
+func (a *desktopForwardTestAdapter) Send(ctx context.Context, msg bot.OutboundMessage) (bot.SendResult, error) {
+	a.once.Do(func() { close(a.entered) })
+	select {
+	case <-a.release:
+	case <-ctx.Done():
+		return bot.SendResult{}, ctx.Err()
+	}
+	a.sent <- msg
+	return bot.SendResult{MessageID: "sent"}, nil
+}
+
+func newDesktopForwardTestRuntime(adapter bot.Adapter) *desktopBotRuntime {
+	gw := bot.NewGatewayWithAdapterBindings(bot.GatewayConfig{}, []bot.AdapterBinding{{
+		ID:       "feishu-lark",
+		Domain:   "lark",
+		Platform: bot.PlatformFeishu,
+		Adapter:  adapter,
+	}}, slog.New(slog.NewTextHandler(io.Discard, nil)))
+	return &desktopBotRuntime{gw: gw}
+}
+
+func TestBotEventForwarderDoesNotBlockEventEmissionOnSlowSend(t *testing.T) {
+	adapter := newDesktopForwardTestAdapter()
+	forwarder := newBotEventForwarder(newDesktopForwardTestRuntime(adapter), []botForwardTarget{{
+		ConnID:   "feishu-lark",
+		Domain:   "lark",
+		ChatID:   "oc-group-1",
+		ChatType: bot.ChatGroup,
+	}})
+
+	done := make(chan struct{})
+	go func() {
+		forwarder.Emit(event.Event{Kind: event.Text, Text: strings.Repeat("x", 400)})
+		close(done)
+	}()
+
+	select {
+	case <-done:
+	case <-time.After(500 * time.Millisecond):
+		t.Fatal("Emit blocked behind slow bot send")
+	}
+	select {
+	case <-adapter.entered:
+	case <-time.After(500 * time.Millisecond):
+		t.Fatal("adapter send did not start")
+	}
+
+	forwarder.Close()
+	close(adapter.release)
+	select {
+	case <-adapter.sent:
+	case <-time.After(500 * time.Millisecond):
+		t.Fatal("queued bot message was not sent after adapter release")
+	}
+}
+
+func TestBotEventForwarderApprovalNoticeDoesNotExposeReplyID(t *testing.T) {
+	adapter := newDesktopForwardTestAdapter()
+	close(adapter.release)
+	forwarder := newBotEventForwarder(newDesktopForwardTestRuntime(adapter), []botForwardTarget{{
+		ConnID:   "feishu-lark",
+		Domain:   "lark",
+		ChatID:   "oc-group-1",
+		ChatType: bot.ChatGroup,
+	}})
+
+	forwarder.Emit(event.Event{Kind: event.ApprovalRequest, Approval: event.Approval{
+		ID:      "approval-1",
+		Tool:    "shell",
+		Subject: "run command",
+	}})
+	forwarder.Close()
+
+	select {
+	case msg := <-adapter.sent:
+		if strings.Contains(msg.Text, "approval-1") || strings.Contains(msg.Text, "/approve") {
+			t.Fatalf("approval notice exposed unusable reply routing: %q", msg.Text)
+		}
+		if !strings.Contains(msg.Text, "桌面") {
+			t.Fatalf("approval notice = %q, want desktop guidance", msg.Text)
+		}
+	case <-time.After(500 * time.Millisecond):
+		t.Fatal("approval notice was not sent")
+	}
+}

desktop/bot_runtime_app.go

@@ -242,3 +242,79 @@ func (r *desktopBotRuntime) snapshot() BotRuntimeStatusView {
 	defer r.mu.Unlock()
 	return r.status
 }
+
+// updateConnectionToolApprovalMode updates a connection's tool approval mode
+// on the running gateway without restarting. Returns true if updated, false if
+// the gateway is not running or the connection is unknown.
+func (r *desktopBotRuntime) updateConnectionToolApprovalMode(connID, mode string) bool {
+	r.mu.Lock()
+	defer r.mu.Unlock()
+	if r.gw == nil {
+		return false
+	}
+	mode = normalizeBotConnectionToolApprovalMode(mode)
+	// Update ConnectionChannels in the internal GatewayConfig so new sessions
+	// pick up the mode. Existing sessions are updated by the gateway directly.
+	r.gw.UpdateConnectionToolApprovalMode(connID, mode)
+	return true
+}
+
+// SendToAdapter sends a message through the running gateway's adapter
+// identified by connID. Returns an error if the gateway is not running
+// or no matching adapter is found.
+func (r *desktopBotRuntime) SendToAdapter(ctx context.Context, connID, domain string, msg bot.OutboundMessage) (bot.SendResult, error) {
+	r.mu.Lock()
+	gw := r.gw
+	r.mu.Unlock()
+	if gw == nil {
+		return bot.SendResult{}, nil // gateway not running — silent no-op
+	}
+	return gw.SendToAdapter(ctx, connID, domain, msg)
+}
+
+// Running returns true if the bot gateway is currently active.
+func (r *desktopBotRuntime) Running() bool {
+	r.mu.Lock()
+	defer r.mu.Unlock()
+	return r.gw != nil
+}
+
+// ForwardTargets returns the list of bot forward targets derived from the
+// current config's bot connections and their session mappings. Each mapping
+// produces one target (connID + chatID + chatType) for event forwarding.
+func (r *desktopBotRuntime) ForwardTargets(cfg *config.Config) []botForwardTarget {
+	if cfg == nil {
+		return nil
+	}
+	var targets []botForwardTarget
+	seen := make(map[botForwardTarget]bool)
+	for _, conn := range cfg.Bot.Connections {
+		if !conn.Enabled {
+			continue
+		}
+		connID := botruntime.ConnectionRuntimeID(conn)
+		domain := strings.TrimSpace(conn.Domain)
+		for _, sm := range conn.SessionMappings {
+			remoteID := strings.TrimSpace(sm.RemoteID)
+			if remoteID == "" {
+				continue
+			}
+			chatType := bot.ChatDM
+			if sm.ChatType != "" {
+				chatType = bot.ChatType(sm.ChatType)
+			}
+			target := botForwardTarget{
+				ConnID:   connID,
+				Domain:   domain,
+				ChatID:   remoteID,
+				ChatType: chatType,
+			}
+			if seen[target] {
+				continue
+			}
+			seen[target] = true
+			targets = append(targets, target)
+		}
+	}
+	return targets
+}

desktop/bot_runtime_app_test.go

@@ -63,6 +63,37 @@ func TestDesktopBotRuntimePlanStopsWhenBotDisabled(t *testing.T) {
 	}
 }
 
+func TestDesktopBotRuntimeForwardTargetsDeduplicatesMappedChats(t *testing.T) {
+	cfg := config.Default()
+	cfg.Bot.Connections = []config.BotConnectionConfig{{
+		ID:       "feishu-lark",
+		Provider: "feishu",
+		Domain:   "lark",
+		Enabled:  true,
+		SessionMappings: []config.BotConnectionSessionMapping{
+			{RemoteID: "oc-group-1", ChatType: string(bot.ChatGroup), UserID: "ou-user-1"},
+			{RemoteID: "oc-group-1", ChatType: string(bot.ChatGroup), UserID: "ou-user-2"},
+			{RemoteID: "oc-dm-1", ChatType: string(bot.ChatDM), UserID: "ou-user-1"},
+		},
+	}}
+
+	targets := newDesktopBotRuntime().ForwardTargets(cfg)
+	if len(targets) != 2 {
+		t.Fatalf("targets = %+v, want one group target plus one dm target", targets)
+	}
+	seen := map[string]bool{}
+	for _, target := range targets {
+		key := target.ConnID + "|" + target.Domain + "|" + target.ChatID + "|" + string(target.ChatType)
+		if seen[key] {
+			t.Fatalf("duplicate target %q in %+v", key, targets)
+		}
+		seen[key] = true
+	}
+	if !seen["feishu-lark|lark|oc-group-1|group"] || !seen["feishu-lark|lark|oc-dm-1|dm"] {
+		t.Fatalf("targets = %+v, want group and dm targets", targets)
+	}
+}
+
 func TestDesktopBotRuntimeConfigUsesUserBotSettings(t *testing.T) {
 	isolateDesktopUserDirs(t)
 

desktop/checkpoints_cancode_test.go

@@ -25,6 +25,28 @@ func seedCheckpoint(t *testing.T, ckptDir string, c checkpoint.Checkpoint) {
 	}
 }
 
+func assertCheckpointFilesEncodeAsArray(t *testing.T, metas []CheckpointMeta) {
+	t.Helper()
+	raw, err := json.Marshal(metas)
+	if err != nil {
+		t.Fatal(err)
+	}
+	var payload []struct {
+		Files json.RawMessage `json:"files"`
+	}
+	if err := json.Unmarshal(raw, &payload); err != nil {
+		t.Fatal(err)
+	}
+	for i, item := range payload {
+		if string(item.Files) == "null" {
+			t.Fatalf("checkpoint %d files encoded as null; frontend expects []", i)
+		}
+		if len(item.Files) == 0 || item.Files[0] != '[' {
+			t.Fatalf("checkpoint %d files encoded as %s, want JSON array", i, item.Files)
+		}
+	}
+}
+
 // TestCheckpointsCanCodePropagatesToEarlierTurns covers #3438: RestoreCode(turn)
 // reverts files touched in that turn or any later one, so a turn with no file
 // changes of its own can still rewind code when a later turn changed files. The
@@ -68,4 +90,65 @@ func TestCheckpointsCanCodePropagatesToEarlierTurns(t *testing.T) {
 	if got[2] {
 		t.Error("turn 2 is after the last file-bearing turn, should NOT allow code rewind")
 	}
+	if metas[0].TurnFileCount != 0 {
+		t.Fatalf("turn 0 file count = %d, want 0 for this turn", metas[0].TurnFileCount)
+	}
+	if metas[1].TurnFileCount != 1 {
+		t.Fatalf("turn 1 file count = %d, want 1 for this turn", metas[1].TurnFileCount)
+	}
+	if len(metas[0].Files) != 1 || metas[0].Files[0] != "a.txt" {
+		t.Fatalf("turn 0 cumulative files = %#v, want [a.txt]", metas[0].Files)
+	}
+	if metas[0].FileCount != 1 || metas[0].FilesTruncated {
+		t.Fatalf("turn 0 file summary = count %d truncated %v, want count 1 truncated false", metas[0].FileCount, metas[0].FilesTruncated)
+	}
+	if len(metas[2].Files) != 0 {
+		t.Fatalf("turn 2 cumulative files = %#v, want empty", metas[2].Files)
+	}
+	assertCheckpointFilesEncodeAsArray(t, metas)
+}
+
+func TestCheckpointsForTabLimitsCumulativeFilePreview(t *testing.T) {
+	dir := t.TempDir()
+	sessionPath := filepath.Join(dir, "s.jsonl")
+	ckptDir := sessionPath[:len(sessionPath)-len(".jsonl")] + ".ckpt"
+	if err := os.MkdirAll(ckptDir, 0o755); err != nil {
+		t.Fatal(err)
+	}
+	content := "old"
+	files := make([]checkpoint.FileSnap, 0, checkpointFilePreviewLimit+5)
+	for i := 0; i < checkpointFilePreviewLimit+5; i++ {
+		files = append(files, checkpoint.FileSnap{Path: "file-" + strconv.Itoa(1000+i) + ".txt", Content: &content})
+	}
+	now := time.Now()
+	seedCheckpoint(t, ckptDir, checkpoint.Checkpoint{Turn: 0, Time: now, Prompt: "before edits", MsgIndex: 0})
+	seedCheckpoint(t, ckptDir, checkpoint.Checkpoint{Turn: 1, Time: now, Prompt: "edit many files", MsgIndex: 2, Files: files})
+
+	ag := agent.New(nil, nil, agent.NewSession("sys"), agent.Options{}, event.Discard)
+	ctrl := control.New(control.Options{Executor: ag, SessionDir: dir, Label: "test"})
+	ctrl.SetSessionPath(sessionPath)
+
+	app := &App{}
+	app.setTestCtrl(ctrl, "test")
+
+	metas := app.CheckpointsForTab("test")
+	if len(metas) != 2 {
+		t.Fatalf("checkpoints = %d, want 2", len(metas))
+	}
+	if metas[0].FileCount != checkpointFilePreviewLimit+5 {
+		t.Fatalf("turn 0 cumulative file count = %d, want %d", metas[0].FileCount, checkpointFilePreviewLimit+5)
+	}
+	if len(metas[0].Files) != checkpointFilePreviewLimit {
+		t.Fatalf("turn 0 preview files = %d, want %d", len(metas[0].Files), checkpointFilePreviewLimit)
+	}
+	if !metas[0].FilesTruncated {
+		t.Fatal("turn 0 should mark file preview as truncated")
+	}
+	if metas[0].TurnFileCount != 0 {
+		t.Fatalf("turn 0 file count = %d, want 0 for this turn", metas[0].TurnFileCount)
+	}
+	if metas[1].TurnFileCount != checkpointFilePreviewLimit+5 {
+		t.Fatalf("turn 1 file count = %d, want %d", metas[1].TurnFileCount, checkpointFilePreviewLimit+5)
+	}
+	assertCheckpointFilesEncodeAsArray(t, metas)
 }

desktop/dotenv.go

@@ -9,21 +9,8 @@ import (
 	"reasonix/internal/fileutil"
 )
 
-// credentialsPath is the file fallback for the reasonix-owned global credential
-// store. The settings panel writes through config.SetCredential instead, so
-// systems with a usable keyring do not need to store secrets in this file.
-func credentialsPath() string {
-	if p := config.UserCredentialsPath(); p != "" {
-		return p
-	}
-	if home, err := os.UserHomeDir(); err == nil {
-		return filepath.Join(home, ".env")
-	}
-	return ".env"
-}
-
-// upsertDotEnv stores KEY=value in the configured global credential store and
-// applies it to the running process so a rebuild picks it up without a restart.
+// upsertDotEnv stores KEY=value in Reasonix's global .env and applies it to the
+// running process so a rebuild picks it up without a restart.
 func upsertDotEnv(key, value string) error {
 	_, err := config.SetCredential(key, value)
 	return err
@@ -144,58 +131,3 @@ func removeEnvFile(path, key string) error {
 	}
 	return os.Unsetenv(key)
 }
-
-// promoteProviderKeysToCredentials copies any configured provider api_key_env that
-// currently resolves (from a project .env, ~/.env, or the OS env) into the global
-// credential store when it isn't there yet, so a key set for one workspace follows
-// the user across every project. Promoted keys are then stripped from ~/.env so the
-// credential store is the single source of truth; a project's own .env is
-// user-owned and left untouched.
-func promoteProviderKeysToCredentials(cfg *config.Config) {
-	for _, p := range cfg.Providers {
-		env := strings.TrimSpace(p.APIKeyEnv)
-		if env == "" || config.CredentialStored(env) {
-			continue
-		}
-		val := os.Getenv(env)
-		if val == "" {
-			continue
-		}
-		if _, err := config.SetCredential(env, val); err != nil {
-			continue
-		}
-		removeHomeEnvKey(env)
-	}
-}
-
-// removeHomeEnvKey deletes a single KEY=value assignment from ~/.env (the legacy
-// fallback the old migration wrote to), leaving every other line intact. No-op when
-// ~/.env is absent or the credentials store resolves to ~/.env itself.
-func removeHomeEnvKey(key string) {
-	home, err := os.UserHomeDir()
-	if err != nil {
-		return
-	}
-	path := filepath.Join(home, ".env")
-	if sameConfigPath(path, credentialsPath()) {
-		return
-	}
-	data, err := os.ReadFile(path)
-	if err != nil {
-		return
-	}
-	var kept []string
-	removed := false
-	for _, raw := range strings.Split(string(data), "\n") {
-		check := strings.TrimPrefix(strings.TrimSpace(raw), "export ")
-		if k, _, ok := strings.Cut(check, "="); ok && strings.TrimSpace(k) == key {
-			removed = true
-			continue
-		}
-		kept = append(kept, raw)
-	}
-	if !removed {
-		return
-	}
-	_ = os.WriteFile(path, []byte(strings.Join(kept, "\n")), 0o600)
-}

desktop/dotenv_test.go

@@ -65,63 +65,21 @@ func TestRemoveEnvFileDeletesKeyAndUnsetsProcessEnv(t *testing.T) {
 	}
 }
 
-// TestPromoteProviderKeysLiftsProjectKeyAndStripsHomeEnv proves a provider key
-// that resolves only from a project .env / ~/.env is copied into the global
-// credentials store, removed from ~/.env, and that unrelated env vars are ignored.
-func TestPromoteProviderKeysLiftsProjectKeyAndStripsHomeEnv(t *testing.T) {
+func TestLegacyHomeEnvProviderKeyIsNotPromoted(t *testing.T) {
 	home := isolateDesktopUserDirs(t)
 	homeEnv := filepath.Join(home, ".env")
 	if err := os.WriteFile(homeEnv, []byte("DEEPSEEK_API_KEY=sk-test\nNPM_TOKEN=secret\n"), 0o600); err != nil {
 		t.Fatal(err)
 	}
-	t.Setenv("DEEPSEEK_API_KEY", "sk-test")
-	t.Setenv("NPM_TOKEN", "secret")
 
-	promoteProviderKeysToCredentials(config.Default())
-
-	cred, err := os.ReadFile(config.UserCredentialsPath())
-	if err != nil {
-		t.Fatalf("credentials not written: %v", err)
+	if _, err := config.LoadForRoot(t.TempDir()); err != nil {
+		t.Fatalf("LoadForRoot: %v", err)
 	}
-	if !strings.Contains(string(cred), "DEEPSEEK_API_KEY=sk-test") {
-		t.Errorf("provider key not promoted to credentials:\n%s", cred)
+	if data, err := os.ReadFile(config.UserCredentialsPath()); err == nil && strings.Contains(string(data), "DEEPSEEK_API_KEY") {
+		t.Errorf("legacy ~/.env provider key must not be imported:\n%s", data)
 	}
-	if strings.Contains(string(cred), "NPM_TOKEN") {
-		t.Errorf("non-provider env var must not be promoted:\n%s", cred)
-	}
-
 	rest, _ := os.ReadFile(homeEnv)
-	if strings.Contains(string(rest), "DEEPSEEK_API_KEY") {
-		t.Errorf("promoted key must be stripped from ~/.env:\n%s", rest)
-	}
-	if !strings.Contains(string(rest), "NPM_TOKEN=secret") {
-		t.Errorf("unrelated ~/.env line must survive:\n%s", rest)
-	}
-}
-
-// TestPromoteProviderKeysLeavesExistingCredentialsKey proves promotion never
-// overwrites a key already in the credentials store and leaves ~/.env untouched.
-func TestPromoteProviderKeysLeavesExistingCredentialsKey(t *testing.T) {
-	home := isolateDesktopUserDirs(t)
-	if err := os.MkdirAll(filepath.Dir(config.UserCredentialsPath()), 0o755); err != nil {
-		t.Fatal(err)
-	}
-	if err := os.WriteFile(config.UserCredentialsPath(), []byte("DEEPSEEK_API_KEY=sk-global\n"), 0o600); err != nil {
-		t.Fatal(err)
-	}
-	homeEnv := filepath.Join(home, ".env")
-	if err := os.WriteFile(homeEnv, []byte("DEEPSEEK_API_KEY=sk-stale\n"), 0o600); err != nil {
-		t.Fatal(err)
-	}
-	t.Setenv("DEEPSEEK_API_KEY", "sk-global")
-
-	promoteProviderKeysToCredentials(config.Default())
-
-	cred, _ := os.ReadFile(config.UserCredentialsPath())
-	if !strings.Contains(string(cred), "DEEPSEEK_API_KEY=sk-global") {
-		t.Errorf("existing credentials key was changed:\n%s", cred)
-	}
-	if data, err := os.Stat(homeEnv); err != nil || data.Size() == 0 {
-		t.Errorf("~/.env should be untouched when key already global, err=%v", err)
+	if !strings.Contains(string(rest), "DEEPSEEK_API_KEY=sk-test") || !strings.Contains(string(rest), "NPM_TOKEN=secret") {
+		t.Errorf("legacy ~/.env should be left untouched:\n%s", rest)
 	}
 }

desktop/frontend/.gitignore

@@ -13,3 +13,6 @@ wailsjs
 
 # Wails dev install-checksum cache
 package.json.md5
+
+# This project uses pnpm (see wails.json `frontend:install`); reject the npm lockfile.
+package-lock.json

desktop/frontend/package.json

@@ -10,31 +10,34 @@
     "check:css": "node scripts/check-css-syntax.mjs src/styles.css && node scripts/check-z-index-tokens.mjs src/styles.css",
     "test:todo-visibility": "node scripts/test-todo-visibility.mjs",
     "typecheck": "tsc --noEmit",
-    "test": "node scripts/test-todo-visibility.mjs && tsx src/__tests__/anchored-popover-scroll.test.tsx && tsx src/__tests__/math-golden.test.ts && tsx src/__tests__/text-size.test.ts && tsx src/__tests__/font-availability.test.ts && tsx src/__tests__/theme-auto-background.test.ts && tsx src/__tests__/typography-overflow-contract.test.ts && tsx src/__tests__/provider-model-refresh.test.ts && tsx src/__tests__/composer-profile.test.ts && tsx src/__tests__/composer-history.test.ts && tsx src/__tests__/composer-keyboard.test.ts && tsx src/__tests__/composer-goal-toggle.test.tsx && tsx src/__tests__/use-controller-meta.test.ts && tsx src/__tests__/new-session-load-race.test.tsx && tsx src/__tests__/workspace-layout.test.ts && tsx src/__tests__/tool-approval-mode.test.ts && tsx src/__tests__/keyboard-shortcuts.test.ts && tsx src/__tests__/send-failed.test.ts && tsx src/__tests__/edit-replay.test.ts && tsx src/__tests__/history-tool-status.test.ts && tsx src/__tests__/message-selection-copy.test.ts && tsx src/__tests__/reasoning-display.test.ts && tsx src/__tests__/attachment-display.test.ts && tsx src/__tests__/crash-reporting.test.ts && tsx src/__tests__/bridge-drag-rejection.test.ts && tsx src/__tests__/startup-settings-contract.test.ts && tsx src/__tests__/bundle-contract.test.ts && tsx src/__tests__/command-palette-css.test.ts && tsx src/__tests__/context-panel-breakdown.test.ts && tsx src/__tests__/statusbar-workspace.test.tsx && tsx src/__tests__/settings-refresh-snapshot.test.tsx && tsx src/__tests__/capabilities-panel-actions.test.ts && tsx src/__tests__/tool-data-archive.test.ts && tsx src/__tests__/diff-rendering.test.ts && tsx src/__tests__/render-optimization.test.ts && tsx src/__tests__/transcript-grouping.test.ts && tsx src/__tests__/project-tree-runtime.test.ts && tsx src/__tests__/app-chrome-tabs.test.ts",
+    "test": "node scripts/test-todo-visibility.mjs && tsx src/__tests__/anchored-popover-scroll.test.tsx && tsx src/__tests__/math-golden.test.ts && tsx src/__tests__/mermaid-rendering.test.tsx && tsx src/__tests__/text-size.test.ts && tsx src/__tests__/font-availability.test.ts && tsx src/__tests__/theme-auto-background.test.ts && tsx src/__tests__/typography-overflow-contract.test.ts && tsx src/__tests__/ask-card-layout.test.ts && tsx src/__tests__/approval-modal-file-reference.test.tsx && tsx src/__tests__/provider-model-refresh.test.ts && tsx src/__tests__/composer-profile.test.ts && tsx src/__tests__/composer-history.test.ts && tsx src/__tests__/session-title-contract.test.ts && tsx src/__tests__/composer-keyboard.test.ts && tsx src/__tests__/composer-goal-toggle.test.tsx && tsx src/__tests__/composer-session-draft.test.tsx && tsx src/__tests__/composer-image-capability.test.tsx && tsx src/__tests__/use-controller-meta.test.ts && tsx src/__tests__/use-controller-cancel-reconcile.test.tsx && tsx src/__tests__/new-session-load-race.test.tsx && tsx src/__tests__/tab-switch-hydration.test.tsx && tsx src/__tests__/workspace-layout.test.ts && tsx src/__tests__/workspace-changes-errors.test.tsx && tsx src/__tests__/workspace-split.test.ts && tsx src/__tests__/workspace-preview-css.test.ts && tsx src/__tests__/resize-drag.test.ts && tsx src/__tests__/tool-approval-mode.test.ts && tsx src/__tests__/heartbeat-next-run.test.ts && tsx src/__tests__/keyboard-shortcuts.test.ts && tsx src/__tests__/send-failed.test.ts && tsx src/__tests__/edit-replay.test.ts && tsx src/__tests__/history-tool-status.test.ts && tsx src/__tests__/message-selection-copy.test.ts && tsx src/__tests__/code-block-copy-position.test.tsx && tsx src/__tests__/reasoning-display.test.ts && tsx src/__tests__/attachment-display.test.ts && tsx src/__tests__/crash-reporting.test.ts && tsx src/__tests__/bridge-drag-rejection.test.ts && tsx src/__tests__/startup-settings-contract.test.ts && tsx src/__tests__/bundle-contract.test.ts && tsx src/__tests__/command-palette-css.test.ts && tsx src/__tests__/command-palette-interactions.test.tsx && tsx src/__tests__/context-panel-breakdown.test.ts && tsx src/__tests__/statusbar-workspace.test.tsx && tsx src/__tests__/settings-refresh-snapshot.test.tsx && tsx src/__tests__/capabilities-panel-actions.test.ts && tsx src/__tests__/tool-data-archive.test.ts && tsx src/__tests__/tool-subject.test.ts && tsx src/__tests__/diff-rendering.test.ts && tsx src/__tests__/render-optimization.test.ts && tsx src/__tests__/transcript-grouping.test.ts && tsx src/__tests__/project-tree-runtime.test.ts && tsx src/__tests__/app-chrome-tabs.test.ts && tsx src/__tests__/open-topic-coalescing.test.tsx && tsx src/__tests__/memory-compiler-display.test.ts && tsx src/__tests__/memory-citation-visibility.test.ts",
     "test:typecheck": "tsc --noEmit -p tsconfig.test.json",
-    "test:all": "tsc --noEmit -p tsconfig.test.json && node scripts/test-todo-visibility.mjs && tsx src/__tests__/anchored-popover-scroll.test.tsx && tsx src/__tests__/math-golden.test.ts && tsx src/__tests__/text-size.test.ts && tsx src/__tests__/font-availability.test.ts && tsx src/__tests__/theme-auto-background.test.ts && tsx src/__tests__/typography-overflow-contract.test.ts && tsx src/__tests__/provider-model-refresh.test.ts && tsx src/__tests__/composer-profile.test.ts && tsx src/__tests__/composer-history.test.ts && tsx src/__tests__/composer-keyboard.test.ts && tsx src/__tests__/composer-goal-toggle.test.tsx && tsx src/__tests__/use-controller-meta.test.ts && tsx src/__tests__/new-session-load-race.test.tsx && tsx src/__tests__/workspace-layout.test.ts && tsx src/__tests__/tool-approval-mode.test.ts && tsx src/__tests__/keyboard-shortcuts.test.ts && tsx src/__tests__/send-failed.test.ts && tsx src/__tests__/edit-replay.test.ts && tsx src/__tests__/history-tool-status.test.ts && tsx src/__tests__/message-selection-copy.test.ts && tsx src/__tests__/reasoning-display.test.ts && tsx src/__tests__/attachment-display.test.ts && tsx src/__tests__/crash-reporting.test.ts && tsx src/__tests__/bridge-drag-rejection.test.ts && tsx src/__tests__/startup-settings-contract.test.ts && tsx src/__tests__/bundle-contract.test.ts && tsx src/__tests__/command-palette-css.test.ts && tsx src/__tests__/context-panel-breakdown.test.ts && tsx src/__tests__/statusbar-workspace.test.tsx && tsx src/__tests__/settings-refresh-snapshot.test.tsx && tsx src/__tests__/capabilities-panel-actions.test.ts && tsx src/__tests__/tool-data-archive.test.ts && tsx src/__tests__/diff-rendering.test.ts && tsx src/__tests__/render-optimization.test.ts && tsx src/__tests__/transcript-grouping.test.ts && tsx src/__tests__/project-tree-runtime.test.ts && tsx src/__tests__/app-chrome-tabs.test.ts"
+    "test:all": "tsc --noEmit -p tsconfig.test.json && node scripts/test-todo-visibility.mjs && tsx src/__tests__/anchored-popover-scroll.test.tsx && tsx src/__tests__/math-golden.test.ts && tsx src/__tests__/mermaid-rendering.test.tsx && tsx src/__tests__/text-size.test.ts && tsx src/__tests__/font-availability.test.ts && tsx src/__tests__/theme-auto-background.test.ts && tsx src/__tests__/typography-overflow-contract.test.ts && tsx src/__tests__/ask-card-layout.test.ts && tsx src/__tests__/approval-modal-file-reference.test.tsx && tsx src/__tests__/provider-model-refresh.test.ts && tsx src/__tests__/composer-profile.test.ts && tsx src/__tests__/composer-history.test.ts && tsx src/__tests__/session-title-contract.test.ts && tsx src/__tests__/composer-keyboard.test.ts && tsx src/__tests__/composer-goal-toggle.test.tsx && tsx src/__tests__/composer-session-draft.test.tsx && tsx src/__tests__/composer-image-capability.test.tsx && tsx src/__tests__/use-controller-meta.test.ts && tsx src/__tests__/use-controller-cancel-reconcile.test.tsx && tsx src/__tests__/new-session-load-race.test.tsx && tsx src/__tests__/tab-switch-hydration.test.tsx && tsx src/__tests__/workspace-layout.test.ts && tsx src/__tests__/workspace-changes-errors.test.tsx && tsx src/__tests__/workspace-split.test.ts && tsx src/__tests__/workspace-preview-css.test.ts && tsx src/__tests__/resize-drag.test.ts && tsx src/__tests__/tool-approval-mode.test.ts && tsx src/__tests__/heartbeat-next-run.test.ts && tsx src/__tests__/keyboard-shortcuts.test.ts && tsx src/__tests__/send-failed.test.ts && tsx src/__tests__/edit-replay.test.ts && tsx src/__tests__/history-tool-status.test.ts && tsx src/__tests__/message-selection-copy.test.ts && tsx src/__tests__/code-block-copy-position.test.tsx && tsx src/__tests__/reasoning-display.test.ts && tsx src/__tests__/attachment-display.test.ts && tsx src/__tests__/crash-reporting.test.ts && tsx src/__tests__/bridge-drag-rejection.test.ts && tsx src/__tests__/startup-settings-contract.test.ts && tsx src/__tests__/bundle-contract.test.ts && tsx src/__tests__/command-palette-css.test.ts && tsx src/__tests__/command-palette-interactions.test.tsx && tsx src/__tests__/context-panel-breakdown.test.ts && tsx src/__tests__/statusbar-workspace.test.tsx && tsx src/__tests__/settings-refresh-snapshot.test.tsx && tsx src/__tests__/capabilities-panel-actions.test.ts && tsx src/__tests__/tool-data-archive.test.ts && tsx src/__tests__/tool-subject.test.ts && tsx src/__tests__/diff-rendering.test.ts && tsx src/__tests__/render-optimization.test.ts && tsx src/__tests__/transcript-grouping.test.ts && tsx src/__tests__/project-tree-runtime.test.ts && tsx src/__tests__/app-chrome-tabs.test.ts && tsx src/__tests__/open-topic-coalescing.test.tsx"
   },
   "dependencies": {
     "@gsap/react": "^2.1.2",
-    "@tanstack/react-virtual": "^3.14.2",
+    "@tanstack/react-virtual": "^3.14.3",
     "gsap": "^3.15.0",
     "highlight.js": "^11.10.0",
     "katex": "^0.17.0",
-    "lucide-react": "^1.18.0",
+    "lucide-react": "^1.21.0",
+    "mermaid": "^11.16.0",
     "qrcode.react": "^4.2.0",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "react-markdown": "^10.1.0",
     "rehype-katex": "^7.0.1",
     "remark-gfm": "^4.0.0",
-    "remark-math": "^6.0.0"
+    "remark-math": "^6.0.0",
+    "svg-pan-zoom": "^3.6.2",
+    "zustand": "^5.0.14"
   },
   "devDependencies": {
     "@types/jsdom": "^28.0.3",
-    "@types/node": "^25.9.3",
+    "@types/node": "^26.0.0",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.2.0",
+    "@vitejs/plugin-react": "^6.0.2",
     "jsdom": "^29.1.1",
     "terser": "^5.48.0",
     "tsx": "^4.22.4",

desktop/frontend/scripts/test-todo-visibility.mjs

@@ -16,7 +16,16 @@ const transpiled = ts.transpileModule(source, {
 }).outputText;
 
 const moduleUrl = `data:text/javascript;base64,${Buffer.from(transpiled).toString("base64")}`;
-const { shouldShowTodoPanel, todoDismissalKey } = await import(moduleUrl);
+const {
+  dismissedTodoKeyForScope,
+  scopedTodoBatchKey,
+  scopedTodoDismissalKey,
+  shouldOpenTodoPanelByDefault,
+  shouldShowTodoPanel,
+  todoBatchKey,
+  todoDismissalKey,
+  todoPanelScope,
+} = await import(moduleUrl);
 
 const completedTodos = [
   { content: "Inspect the report", status: "completed" },
@@ -42,6 +51,66 @@ assert.equal(
   false,
   "a user dismissal still hides that exact todo list",
 );
+const completedKey = todoDismissalKey(completedTodos);
+const dismissedBySession = new Set([scopedTodoDismissalKey("session:a", completedKey)]);
+assert.equal(
+  shouldShowTodoPanel(completedKey, dismissedTodoKeyForScope("session:a", dismissedBySession, completedKey), completedTodos),
+  false,
+  "a completed todo dismissal hides the list in the session where it was closed",
+);
+assert.equal(
+  shouldShowTodoPanel(completedKey, dismissedTodoKeyForScope("session:b", dismissedBySession, completedKey), completedTodos),
+  true,
+  "a completed todo dismissal in one session does not hide another session's list",
+);
+dismissedBySession.add(scopedTodoDismissalKey("session:b", completedKey));
+assert.equal(
+  shouldShowTodoPanel(completedKey, dismissedTodoKeyForScope("session:a", dismissedBySession, completedKey), completedTodos),
+  false,
+  "closing another session's todo does not forget the first session dismissal",
+);
+assert.equal(
+  todoPanelScope({
+    activeTabId: "tab-a",
+    activeTab: {
+      id: "tab-a",
+      scope: "project",
+      workspaceRoot: "/repo",
+      topicId: "topic-a",
+      sessionPath: "/sessions/a.jsonl",
+    },
+  }),
+  "session:/sessions/a.jsonl",
+  "a restored history session uses its session path as the todo panel scope",
+);
+assert.equal(
+  todoPanelScope({
+    activeTabId: "tab-b",
+    activeTab: {
+      id: "tab-a",
+      scope: "project",
+      workspaceRoot: "/repo",
+      topicId: "topic-a",
+      sessionPath: "/sessions/a.jsonl",
+    },
+    eventChannel: "desktop-events",
+  }),
+  "tab:tab-b",
+  "a stale active-tab fallback must not scope dismissal to the previous session",
+);
+assert.equal(
+  todoPanelScope({
+    activeTabId: "tab-c",
+    activeTab: {
+      id: "tab-c",
+      scope: "project",
+      workspaceRoot: "/repo",
+      topicId: "topic-a",
+    },
+  }),
+  "tab:tab-c",
+  "an unsaved topic session uses its tab id so sibling sessions do not share todo state",
+);
 assert.equal(shouldShowTodoPanel(null, null, completedTodos), false, "no canonical todo item means no panel");
 assert.equal(shouldShowTodoPanel("todo-empty", null, []), false, "empty todo lists do not render a panel");
 
@@ -61,6 +130,36 @@ assert.notEqual(
   todoDismissalKey([{ ...activeTodos[0], status: "completed" }, { ...activeTodos[1], status: "in_progress" }]),
   "real progress produces a fresh dismissal key",
 );
+assert.equal(
+  todoBatchKey(activeTodos),
+  todoBatchKey([{ ...activeTodos[0], status: "completed" }, { ...activeTodos[1], status: "in_progress" }]),
+  "status progress stays in the same todo batch",
+);
+assert.equal(
+  scopedTodoBatchKey("session:a", todoBatchKey(activeTodos)),
+  scopedTodoBatchKey("session:a", todoBatchKey([{ ...activeTodos[0], status: "completed" }, { ...activeTodos[1], status: "in_progress" }])),
+  "status progress keeps the same scoped open-state key",
+);
+assert.notEqual(
+  scopedTodoBatchKey("session:a", todoBatchKey(activeTodos)),
+  scopedTodoBatchKey("session:b", todoBatchKey(activeTodos)),
+  "the same task list in a different session gets isolated open state",
+);
+assert.notEqual(
+  todoBatchKey(activeTodos),
+  todoBatchKey([{ content: "Run a different task", status: "in_progress" }]),
+  "new task content creates a new todo batch",
+);
+assert.equal(
+  shouldOpenTodoPanelByDefault(activeTodos),
+  true,
+  "new incomplete todo batches open by default",
+);
+assert.equal(
+  shouldOpenTodoPanelByDefault(completedTodos),
+  false,
+  "completed todo batches collapse by default",
+);
 
 const iterations = 200_000;
 const started = performance.now();

desktop/frontend/src/__tests__/app-chrome-tabs.test.ts

@@ -7,6 +7,11 @@ import { fileURLToPath } from "node:url";
 const testDir = dirname(fileURLToPath(import.meta.url));
 const appSource = readFileSync(resolve(testDir, "../App.tsx"), "utf8");
 const appChromeSource = readFileSync(resolve(testDir, "../components/AppChrome.tsx"), "utf8");
+const commandPaletteSource = readFileSync(resolve(testDir, "../components/CommandPalette.tsx"), "utf8");
+const projectTreeSource = readFileSync(resolve(testDir, "../components/ProjectTree.tsx"), "utf8");
+const topicShortcutsSource = readFileSync(resolve(testDir, "../lib/topicShortcuts.ts"), "utf8");
+const transcriptSource = readFileSync(resolve(testDir, "../components/Transcript.tsx"), "utf8");
+const layoutStoreSource = readFileSync(resolve(testDir, "../store/layout.ts"), "utf8");
 const stylesSource = readFileSync(resolve(testDir, "../styles.css"), "utf8").replace(/\/\*[\s\S]*?\*\//g, "");
 
 let passed = 0;
@@ -64,6 +69,12 @@ ok(
   "AppChrome markup includes classic tab strip containers",
 );
 
+ok(
+  /const WORKSPACE_PANEL_DEFAULT_OPEN = false;/.test(layoutStoreSource) &&
+    /workspacePanelOpen:\s*WORKSPACE_PANEL_DEFAULT_OPEN/.test(layoutStoreSource),
+  "right dock starts collapsed on launch",
+);
+
 ok(
   finalDeclaration(".app-chrome__tab-strip", "overflow") === "hidden",
   "AppChrome tab strip clips tabs to the available chrome width",
@@ -110,7 +121,7 @@ ok(
 );
 
 ok(
-  /\{!workbenchChromeHidden && \(/.test(appSource),
+  /\{!appChromeHidden && \(/.test(appSource),
   "workbench skips rendering the top AppChrome row",
 );
 
@@ -119,6 +130,104 @@ ok(
   "workbench keeps chrome controls in the topic bar",
 );
 
+ok(
+  /const \[transcriptRevealSignal, setTranscriptRevealSignal\] = useState\(0\);/.test(appSource) &&
+    /revealActiveSignal=\{tabRevealSignal\}/.test(appSource) &&
+    /revealSignal=\{transcriptRevealSignal\}/.test(appSource),
+  "transcript bottom reveal is decoupled from tab-strip reveal",
+);
+
+const tabsReorderBlock = appSource.match(/const handleTabsReorder = useCallback\([\s\S]*?\n  \}, \[refreshTabMetas, reorderTabs\]\);/)?.[0] ?? "";
+ok(
+  /setTabRevealSignal/.test(tabsReorderBlock) && !/setTranscriptRevealSignal/.test(tabsReorderBlock),
+  "tab reordering refreshes the tab strip without snapping the transcript",
+);
+
+ok(
+  /aria-label=\{t\("transcript\.jumpToBottom"\)\}/.test(transcriptSource) &&
+    /title=\{t\("transcript\.jumpToBottom"\)\}/.test(transcriptSource),
+  "jump-to-bottom affordance uses localized transcript text",
+);
+
+ok(
+  /setActive\(items\.length > 0 \? 0 : -1\)/.test(commandPaletteSource),
+  "command palette highlights the first item when opened with an empty query",
+);
+
+ok(
+  /topicShortcutIndexFromEvent\(event, desktopPlatform\)/.test(appSource) &&
+    /useTopicShortcuts\(!sidebarCollapsed, desktopPlatform\)/.test(appSource),
+  "topic shortcuts use the resolved desktop platform",
+);
+
+ok(
+  /topicShortcutLabel\(shortcutIndex, shortcutPlatform\)/.test(projectTreeSource),
+  "topic shortcut badges render the platform-specific modifier",
+);
+
+ok(
+  /if \(!enabled\) hideBadges\(\);/.test(topicShortcutsSource) &&
+    /if \(heldRef\.current\) hideBadges\(\);/.test(topicShortcutsSource) &&
+    /window\.removeEventListener\("blur", onBlur\);\s*hideBadges\(\);/.test(topicShortcutsSource),
+  "topic shortcut badge state is cleared when disabled, interrupted, or cleaned up",
+);
+
+ok(
+  /const \[rewindCommitting, setRewindCommitting\] = useState\(false\);/.test(appSource) &&
+    /rewindStateRef\.current = null;/.test(appSource) &&
+    /setRewindCommitting\(true\);/.test(appSource),
+  "committing optimistic rewind clears undo state before awaiting the backend",
+);
+
+ok(
+  /const controllerReady = state\.meta\?\.ready === true && !state\.backendActivationPending;/.test(appSource) &&
+    /if \(!controllerReady\) return;\s*void commitThenSend\(text\)\.catch/.test(appSource) &&
+    /onPrompt=\{handleTranscriptPrompt\}/.test(appSource) &&
+    /submitDisabled=\{!controllerReady\}/.test(appSource),
+  "welcome prompts and composer submit share the controller readiness gate",
+);
+
+ok(
+  /const transcriptHydrating = state\.hydrating && !state\.hydrateHistoryLoaded;/.test(appSource) &&
+    /hydrating=\{transcriptHydrating\}/.test(appSource),
+  "Welcome is suppressed only until transcript history has loaded",
+);
+
+const navigationBlock = appSource.match(/const runNavigationRequest = useCallback\([\s\S]*?\n  \}, \[[^\]]*singleSurfaceLayout[^\]]*\]\);/)?.[0] ?? "";
+ok(
+  /const navigationRunningRef = useRef\(false\);/.test(appSource) &&
+    /const navigationPendingRef = useRef<PendingDesktopNavigationRequest \| null>\(null\);/.test(appSource) &&
+    /const runNavigationRequest = useCallback\(async \(request: PendingDesktopNavigationRequest\)/.test(appSource) &&
+    /const latest = \(\) => request\.seq === navigationSeqRef\.current;/.test(appSource) &&
+    /return activateTopic\(scope, workspaceRoot, topicId/.test(appSource) &&
+    /return openTopicSession\(scope, workspaceRoot, topicId/.test(appSource) &&
+    /return openGlobalTab\(topicId\)/.test(appSource) &&
+    /return openProjectTab\(workspaceRoot, topicId\)/.test(appSource) &&
+    /enqueueNavigationRequest\([\s\S]*runningRef: navigationRunningRef, pendingRef: navigationPendingRef/.test(appSource) &&
+    !/openTopicQueueRef\.current\.catch\(\(\) => \{\}\)\.then/.test(appSource) &&
+    /const refreshLatestTabMetas = async \(\): Promise<TabMeta\[]> => \{[\s\S]*if \(latest\(\)\) setTabMetas\(tabs\);/.test(navigationBlock) &&
+    /if \(!latest\(\)\) return;[\s\S]*seedActiveTabMeta\(openedTab\);[\s\S]*void refreshLatestTabMetas\(\);/.test(navigationBlock),
+  "desktop navigation coalesces pending requests, ignores stale results, and seeds active tab metadata before background refresh",
+);
+
+ok(
+  /return enqueueNavigation\(\{ kind: "topic", scope, workspaceRoot, topicId, sessionPath \}\);/.test(appSource) &&
+    /enqueueNavigation\(\{ kind: "blank", scope, workspaceRoot: scope === "project" \? workspaceRoot : "" \}\)/.test(appSource) &&
+    /return enqueueNavigation\(\{ kind: "sidebar-im", connection \}\);/.test(appSource) &&
+    /return enqueueNavigation\(\{ kind: "resume-session", session \}\);/.test(appSource),
+  "topic, blank, IM, and history navigation all use the shared coalescing path",
+);
+
+ok(
+  !/await resumeSession\(session\.path, targetTab\.id\);/.test(navigationBlock),
+  "history navigation does not re-resume a session that OpenTopicSession already pinned",
+);
+
+ok(
+  /<HeartbeatPanel[\s\S]*onOpenTopic=\{\(scope, workspaceRoot, topicId\) => \{[\s\S]*void handleOpenTopic\(scope, workspaceRoot, topicId\);[\s\S]*\}\}/.test(appSource),
+  "heartbeat topic navigation uses the guarded open-topic path",
+);
+
 for (const selector of [
   ".app--darwin .app-chrome--tabs",
   ":root[data-theme-style] .app--darwin .app-chrome--tabs",
@@ -143,6 +252,30 @@ for (const selector of [
   );
 }
 
+for (const selector of [
+  ".app--windows-frameless .app-chrome--native-tabs",
+  ":root[data-theme-style] .app--windows-frameless .app-chrome--native-tabs",
+]) {
+  const paddingRight = finalDeclaration(selector, "padding-right") ?? "";
+  ok(
+    finalDeclaration(selector, "--windows-frameless-titlebar-tools-offset") === "var(--windows-window-controls-safe)" &&
+      paddingRight.includes("--windows-frameless-titlebar-tools-offset") &&
+      paddingRight.includes("--chrome-panel-control-size") &&
+      !paddingRight.includes("--chrome-right-toggle-offset"),
+    `${selector} keeps titlebar tools fixed beside the Windows controls`,
+  );
+}
+
+for (const selector of [
+  ".app--windows-frameless .app-chrome--native-tabs .app-chrome__panel-toggle--right",
+  ":root[data-theme-style] .app--windows-frameless .app-chrome--native-tabs .app-chrome__panel-toggle--right",
+]) {
+  ok(
+    finalDeclaration(selector, "right") === "calc(var(--windows-frameless-titlebar-tools-offset) + 8px)",
+    `${selector} stays fixed outside the Windows window controls`,
+  );
+}
+
 for (const selector of [
   ".layout--workbench-chrome-hidden",
   ":root[data-theme-style] .layout--workbench-chrome-hidden",
@@ -193,8 +326,8 @@ for (const selector of [
 }
 
 ok(
-  finalDeclaration(":root[data-theme-style] .layout--workbench-chrome-hidden .topicbar", "background") === "var(--chat-bg)",
-  "workbench topic bar uses a flat chat background",
+  finalDeclaration(":root[data-theme-style] .layout--workbench-chrome-hidden .topicbar", "background") === "var(--bg-elev)",
+  "workbench topic bar uses elevated background for light-mode white",
 );
 
 for (const selector of [

desktop/frontend/src/__tests__/approval-modal-file-reference.test.tsx

@@ -0,0 +1,229 @@
+// Run: tsx src/__tests__/approval-modal-file-reference.test.tsx
+
+import { JSDOM } from "jsdom";
+import React from "react";
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { ApprovalModal } from "../components/ApprovalModal";
+import { LocaleProvider } from "../lib/i18n";
+import type { AppBindings } from "../lib/bridge";
+import type { WireApproval } from "../lib/types";
+
+let passed = 0;
+let failed = 0;
+
+function ok(value: boolean, label: string) {
+  if (value) {
+    process.stdout.write(`  PASS  ${label}\n`);
+    passed += 1;
+  } else {
+    process.stdout.write(`  FAIL  ${label}\n`);
+    failed += 1;
+  }
+}
+
+function eq(actual: unknown, expected: unknown, label: string) {
+  if (actual === expected) ok(true, label);
+  else ok(false, `${label}: expected ${JSON.stringify(expected)}, got ${JSON.stringify(actual)}`);
+}
+
+function flushTimers(ms = 0): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+async function waitFor(label: string, predicate: () => boolean, timeoutMs = 1000) {
+  const start = Date.now();
+  while (Date.now() - start < timeoutMs) {
+    if (predicate()) return;
+    await act(async () => {
+      await flushTimers(20);
+    });
+  }
+  ok(false, label);
+}
+
+function installDom() {
+  const dom = new JSDOM("<!doctype html><html><body><div id=\"root\"></div></body></html>", {
+    pretendToBeVisual: true,
+    url: "http://localhost/",
+  });
+  (globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+  globalThis.window = dom.window as unknown as Window & typeof globalThis;
+  globalThis.document = dom.window.document;
+  Object.defineProperty(globalThis, "navigator", { configurable: true, value: dom.window.navigator });
+  globalThis.Node = dom.window.Node;
+  globalThis.Element = dom.window.Element;
+  globalThis.HTMLElement = dom.window.HTMLElement;
+  globalThis.HTMLTextAreaElement = dom.window.HTMLTextAreaElement;
+  globalThis.Event = dom.window.Event;
+  globalThis.KeyboardEvent = dom.window.KeyboardEvent;
+  globalThis.InputEvent = dom.window.InputEvent;
+  globalThis.MouseEvent = dom.window.MouseEvent;
+  globalThis.localStorage = dom.window.localStorage;
+  globalThis.requestAnimationFrame = dom.window.requestAnimationFrame.bind(dom.window);
+  globalThis.cancelAnimationFrame = dom.window.cancelAnimationFrame.bind(dom.window);
+  globalThis.getComputedStyle = dom.window.getComputedStyle.bind(dom.window);
+  Object.defineProperty(dom.window.HTMLElement.prototype, "attachEvent", { configurable: true, value: () => {} });
+  Object.defineProperty(dom.window.HTMLElement.prototype, "detachEvent", { configurable: true, value: () => {} });
+  return dom;
+}
+
+function mockApp(methods: Partial<AppBindings>) {
+  window.go = {
+    main: {
+      App: {
+        ...methods,
+      } as Partial<AppBindings> as AppBindings,
+    },
+  };
+}
+
+async function renderApproval(props: Partial<Parameters<typeof ApprovalModal>[0]> = {}) {
+  const rootEl = document.getElementById("root");
+  if (!rootEl) throw new Error("missing root");
+  const root = createRoot(rootEl);
+  const revisions: string[] = [];
+  const activeStates: boolean[] = [];
+  const approval: WireApproval = {
+    id: "plan-approval",
+    tool: "exit_plan_mode",
+    subject: "Plan ready",
+  };
+  let currentProps: Parameters<typeof ApprovalModal>[0] = {
+    approval,
+    cwd: "/repo",
+    onAnswer: () => undefined,
+    onRevisePlan: (text) => revisions.push(text),
+    onExitPlan: () => undefined,
+    onStop: () => undefined,
+    onRevisionActiveChange: (active) => activeStates.push(active),
+    ...props,
+  };
+  const paint = async (nextProps: Partial<Parameters<typeof ApprovalModal>[0]> = {}) => {
+    currentProps = { ...currentProps, ...nextProps };
+    await act(async () => {
+      root.render(
+        <LocaleProvider>
+          <ApprovalModal {...currentProps} />
+        </LocaleProvider>,
+      );
+      await flushTimers();
+    });
+  };
+  await paint();
+  return { root, revisions, activeStates, rerender: paint };
+}
+
+console.log("\napproval modal file references");
+
+{
+  const dom = installDom();
+  mockApp({
+    ListDir: async () => [{ name: "src", isDir: true }, { name: "README.md", isDir: false }],
+    SearchFileRefs: async () => [],
+  });
+  const { root, revisions, rerender } = await renderApproval();
+
+  const reviseButton = Array.from(document.querySelectorAll("button")).find((button) => button.textContent?.includes("Revise plan")) as HTMLButtonElement | undefined;
+  if (!reviseButton) throw new Error("revise button did not render");
+
+  await act(async () => {
+    reviseButton.click();
+    await flushTimers();
+  });
+
+  const textarea = document.querySelector(".plan-revision__input") as HTMLTextAreaElement | null;
+  if (!textarea) throw new Error("plan revision textarea did not render");
+
+  await rerender({ insertRequest: { id: 1, text: "please inspect @" } });
+  await waitFor("plan revision @ text opens file suggestions", () => document.body.textContent?.includes("README.md") === true);
+
+  ok(document.body.textContent?.includes("README.md") === true, "plan revision @ text opens file suggestions");
+
+  const readmeButton = Array.from(document.querySelectorAll(".slashmenu__item")).find((button) => button.textContent?.includes("README.md")) as HTMLButtonElement | undefined;
+  if (!readmeButton) throw new Error("README file suggestion did not render");
+
+  await act(async () => {
+    readmeButton.dispatchEvent(new window.MouseEvent("mousedown", { bubbles: true, cancelable: true }));
+    await flushTimers();
+  });
+
+  eq(textarea.value, "please inspect @README.md ", "file suggestion completes inline in the plan revision");
+
+  const sendButton = Array.from(document.querySelectorAll("button")).find((button) => button.textContent?.includes("Send update")) as HTMLButtonElement | undefined;
+  if (!sendButton) throw new Error("send revision button did not render");
+
+  await act(async () => {
+    sendButton.click();
+    await flushTimers(220);
+  });
+
+  eq(revisions.join(","), "please inspect @README.md", "submitted plan revision keeps the selected file reference");
+
+  await act(async () => {
+    root.unmount();
+  });
+  dom.window.close();
+}
+
+{
+  const dom = installDom();
+  mockApp({
+    ListDir: async () => [],
+    SearchFileRefs: async () => [],
+  });
+  const { root, activeStates, rerender } = await renderApproval();
+
+  const reviseButton = Array.from(document.querySelectorAll("button")).find((button) => button.textContent?.includes("Revise plan")) as HTMLButtonElement | undefined;
+  if (!reviseButton) throw new Error("revise button did not render");
+
+  await act(async () => {
+    reviseButton.click();
+    await flushTimers();
+  });
+
+  const textarea = document.querySelector(".plan-revision__input") as HTMLTextAreaElement | null;
+  if (!textarea) throw new Error("plan revision textarea did not render");
+
+  await rerender({ insertRequest: { id: 2, text: "@src/main.go" } });
+
+  eq(textarea.value, "@src/main.go", "workspace add-reference insert request targets the plan revision input");
+  ok(activeStates.includes(true), "plan revision reports itself as the active workspace insertion target");
+
+  await act(async () => {
+    root.unmount();
+  });
+  dom.window.close();
+}
+
+{
+  const dom = installDom();
+  mockApp({
+    ListDir: async () => [],
+    SearchFileRefs: async () => [],
+  });
+  const { root } = await renderApproval({
+    approval: {
+      id: "tool-approval",
+      tool: "bash",
+      subject: "npm run build\n\nRun the build command to verify frontend artifacts.",
+    },
+  });
+
+  const subject = document.querySelector(".approval-subject");
+  ok(subject != null, "tool approval shows its full subject by default");
+  eq(
+    subject?.textContent,
+    "npm run build\n\nRun the build command to verify frontend artifacts.",
+    "default-open tool approval keeps the complete subject visible",
+  );
+  ok(document.body.textContent?.includes("Hide") === true, "tool approval details start expanded");
+
+  await act(async () => {
+    root.unmount();
+  });
+  dom.window.close();
+}
+
+console.log(`\n${passed} passed, ${failed} failed, ${passed + failed} total`);
+if (failed > 0) process.exit(1);

desktop/frontend/src/__tests__/ask-card-layout.test.ts

@@ -0,0 +1,121 @@
+// Run: tsx src/__tests__/ask-card-layout.test.ts
+
+import { readFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { JSDOM } from "jsdom";
+import React from "react";
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { AskCard } from "../components/AskCard";
+import { LocaleProvider } from "../lib/i18n";
+import type { QuestionAnswer, WireAsk } from "../lib/types";
+
+const testDir = dirname(fileURLToPath(import.meta.url));
+const styles = readFileSync(resolve(testDir, "../styles.css"), "utf8");
+
+let passed = 0;
+let failed = 0;
+
+function ok(value: boolean, label: string) {
+  if (value) {
+    process.stdout.write(`  PASS  ${label}\n`);
+    passed += 1;
+  } else {
+    process.stdout.write(`  FAIL  ${label}\n`);
+    failed += 1;
+  }
+}
+
+function eq(actual: unknown, expected: unknown, label: string) {
+  if (actual === expected) ok(true, label);
+  else ok(false, `${label}: expected ${JSON.stringify(expected)}, got ${JSON.stringify(actual)}`);
+}
+
+function flushTimers(): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, 0));
+}
+
+function installDom() {
+  const dom = new JSDOM("<!doctype html><html><head></head><body><div id=\"root\"></div></body></html>", {
+    pretendToBeVisual: true,
+    url: "http://localhost/",
+  });
+  (globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+  globalThis.window = dom.window as unknown as Window & typeof globalThis;
+  globalThis.document = dom.window.document;
+  Object.defineProperty(globalThis, "navigator", { configurable: true, value: dom.window.navigator });
+  globalThis.Node = dom.window.Node;
+  globalThis.Element = dom.window.Element;
+  globalThis.HTMLElement = dom.window.HTMLElement;
+  globalThis.Event = dom.window.Event;
+  globalThis.KeyboardEvent = dom.window.KeyboardEvent;
+  globalThis.MouseEvent = dom.window.MouseEvent;
+  globalThis.localStorage = dom.window.localStorage;
+  globalThis.requestAnimationFrame = dom.window.requestAnimationFrame.bind(dom.window);
+  globalThis.cancelAnimationFrame = dom.window.cancelAnimationFrame.bind(dom.window);
+
+  const style = document.createElement("style");
+  style.textContent = styles;
+  document.head.appendChild(style);
+  return dom;
+}
+
+console.log("\nask card layout");
+
+{
+  const dom = installDom();
+  const rootEl = document.getElementById("root");
+  if (!rootEl) throw new Error("missing root");
+  const root = createRoot(rootEl);
+  const answers: QuestionAnswer[][] = [];
+  const ask: WireAsk = {
+    id: "ask-superpowers-decision",
+    questions: [
+      {
+        id: "decision",
+        header: "Review",
+        prompt: "baoguanPutArchive needs a user-owned decision: fully align archive logic, or only repair the current compiler error?",
+        options: [
+          { label: "Full alignment", description: "Reuse the archive flow and keep behavior consistent." },
+          { label: "Minimal repair", description: "Touch only the failing path and keep the patch smaller." },
+        ],
+      },
+    ],
+  };
+
+  await act(async () => {
+    root.render(
+      React.createElement(LocaleProvider, null,
+        React.createElement(AskCard, {
+          ask,
+          onAnswer: (_id: string, next: QuestionAnswer[]) => answers.push(next),
+          onDismiss: () => undefined,
+          onStop: () => undefined,
+        }),
+      ),
+    );
+    await flushTimers();
+  });
+
+  const card = document.querySelector(".prompt-shelf__card") as HTMLElement | null;
+  const meta = document.querySelector(".prompt-shelf__meta") as HTMLElement | null;
+  if (!card || !meta) throw new Error("ask prompt shelf did not render");
+
+  eq(meta.textContent, ask.questions[0].prompt, "ask question text remains complete in the prompt shelf");
+
+  const computed = window.getComputedStyle(meta);
+  eq(computed.whiteSpace, "normal", "ask question can wrap instead of staying on one line");
+  eq(computed.overflow, "visible", "ask question is not clipped by the prompt shelf");
+  eq(computed.textOverflow, "clip", "ask question does not render as an ellipsis-only preview");
+  eq(computed.overflowWrap, "anywhere", "long unspaced ask questions can break within the shelf");
+  ok(card.getAttribute("role") === "dialog", "ask prompt shelf keeps dialog semantics");
+
+  await act(async () => {
+    root.unmount();
+  });
+  dom.window.close();
+}
+
+console.log(`\n${passed} passed, ${failed} failed, ${passed + failed} total`);
+if (failed > 0) process.exit(1);

desktop/frontend/src/__tests__/at-matches.test.ts

@@ -26,6 +26,10 @@ function entry(name: string, isDir = false): DirEntry {
   return { name, isDir };
 }
 
+function externalEntry(path: string, displayName: string): DirEntry {
+  return { name: displayName, path, displayName, isDir: false };
+}
+
 console.log("\nat-matches filter");
 
 // 1. Nested file surfaces when fragment matches an intermediate segment.
@@ -92,5 +96,26 @@ console.log("\nat-matches filter");
   );
 }
 
+// 6. External-folder search results can match against a friendly display name
+// even when the submitted path is an opaque session token.
+{
+  const entries: DirEntry[] = [];
+  const searchEntries = [externalEntry("__reasonix_external_folder/abc/Folder/src/outside.txt", "Folder With Spaces/src/outside.txt")];
+  const got = filterAtMatches(entries, searchEntries, "spaces");
+  eq(
+    got.map((e) => e.path),
+    ["__reasonix_external_folder/abc/Folder/src/outside.txt"],
+    "external display name participates in filtering while preserving token path",
+  );
+}
+
+// 7. Dedup uses the submitted path when present.
+{
+  const entries = [externalEntry("__reasonix_external_folder/abc/Folder/src/outside.txt", "outside.txt")];
+  const searchEntries = [externalEntry("__reasonix_external_folder/abc/Folder/src/outside.txt", "Folder With Spaces/src/outside.txt")];
+  const got = filterAtMatches(entries, searchEntries, "outside");
+  eq(got.length, 1, "external entries with the same submitted path dedup to one");
+}
+
 console.log(`\n${passed} passed, ${failed} failed\n`);
 process.exit(failed === 0 ? 0 : 1);

desktop/frontend/src/__tests__/bridge-drag-rejection.test.ts

@@ -1,6 +1,6 @@
 // Run: tsx src/__tests__/bridge-drag-rejection.test.ts
 
-import { isWailsNonFileDragError, isWailsNonFileDragErrorEvent } from "../lib/bridge";
+import { isTransientWailsIPCError, isWailsNonFileDragError, isWailsNonFileDragErrorEvent } from "../lib/bridge";
 
 let passed = 0;
 let failed = 0;
@@ -58,6 +58,21 @@ eq(
   false,
   "keeps ErrorEvent invalid argument visible without a recent native file drag",
 );
+eq(
+  isTransientWailsIPCError(new DOMException("Failed to execute 'send' on 'WebSocket': Still in CONNECTING state.", "InvalidStateError")),
+  true,
+  "suppresses Wails IPC calls made before the websocket is open",
+);
+eq(
+  isTransientWailsIPCError(new TypeError("Cannot read properties of null (reading 'send')")),
+  true,
+  "suppresses Wails IPC calls made after the websocket is torn down",
+);
+eq(
+  isTransientWailsIPCError(new Error("backend returned an application error")),
+  false,
+  "keeps ordinary bridge failures visible",
+);
 
 console.log(`\n${passed} passed, ${failed} failed`);
 if (failed > 0) process.exit(1);

desktop/frontend/src/__tests__/bridge-mock-approval-mode.test.ts

@@ -0,0 +1,42 @@
+// Run: tsx src/__tests__/bridge-mock-approval-mode.test.ts
+
+import { mockToolApprovalModeAfterModeChange } from "../lib/bridge";
+
+let passed = 0;
+let failed = 0;
+
+function eq(a: unknown, b: unknown, label: string) {
+  if (a === b) {
+    process.stdout.write(`  PASS  ${label}\n`);
+    passed += 1;
+  } else {
+    process.stdout.write(`  FAIL  ${label}: expected ${JSON.stringify(b)}, got ${JSON.stringify(a)}\n`);
+    failed += 1;
+  }
+}
+
+console.log("\nbridge mock approval mode");
+
+eq(
+  mockToolApprovalModeAfterModeChange("auto", "plan"),
+  "auto",
+  "legacy plan switch keeps explicit auto approval mode",
+);
+eq(
+  mockToolApprovalModeAfterModeChange("auto", "normal"),
+  "auto",
+  "legacy normal switch keeps explicit auto approval mode",
+);
+eq(
+  mockToolApprovalModeAfterModeChange("ask", "yolo"),
+  "yolo",
+  "legacy yolo switch still enables yolo approval mode",
+);
+eq(
+  mockToolApprovalModeAfterModeChange("yolo", "plan"),
+  "ask",
+  "legacy non-yolo switch clears yolo back to ask",
+);
+
+console.log(`\n${passed} passed, ${failed} failed`);
+if (failed > 0) process.exit(1);

desktop/frontend/src/__tests__/capabilities-panel-actions.test.ts

@@ -1,5 +1,12 @@
-import { mcpServerLifecycleActions } from "../lib/mcpServerLifecycle";
-import type { ServerView } from "../lib/types";
+import { JSDOM } from "jsdom";
+import React from "react";
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { MCPServersSettingsPage } from "../components/CapabilitiesPanel";
+import type { AppBindings } from "../lib/bridge";
+import { LocaleProvider } from "../lib/i18n";
+import { mcpServerLifecycleActions, mcpServerRetryableFromAvailableList } from "../lib/mcpServerLifecycle";
+import type { Meta, ServerView, TabMeta } from "../lib/types";
 
 function ok(value: unknown, message: string) {
   if (!value) throw new Error(message);
@@ -21,16 +28,208 @@ function server(status: ServerView["status"]): ServerView {
 
 const initializing = mcpServerLifecycleActions(server("initializing"));
 ok(initializing.enabled, "initializing server should still be treated as enabled");
-ok(initializing.showRetryInRow, "initializing server row should expose a retry/reset action");
-ok(initializing.canReconnect, "initializing server details should expose reconnect");
+ok(!initializing.showRetryInRow, "initializing server should not expose retry until it fails");
+ok(!initializing.canReconnect, "initializing server should not expose reconnect while already connecting");
 ok(!initializing.canConnectNow, "initializing server should not use the deferred connect-now action");
 
 const connected = mcpServerLifecycleActions(server("connected"));
 ok(!connected.showRetryInRow, "connected server row should keep the toggle UI");
 ok(connected.canReconnect, "connected server details should expose reconnect");
 
-const deferred = mcpServerLifecycleActions(server("deferred"));
-ok(deferred.canConnectNow, "deferred server should expose connect now");
-ok(!deferred.canReconnect, "deferred server should not show reconnect separately");
+const manuallyConnected = mcpServerLifecycleActions({ ...server("connected"), autoStart: false, startIntent: "off", runtimeState: "ready" });
+ok(manuallyConnected.enabled, "connected manual server should still render as enabled");
+ok(!manuallyConnected.canConnectNow, "connected manual server should not expose connect-now");
+ok(manuallyConnected.canReconnect, "connected manual server should expose reconnect");
+
+const automaticIdle = mcpServerLifecycleActions({ ...server("deferred"), startIntent: "automatic" });
+ok(!automaticIdle.canConnectNow, "automatic idle server should not look like a manual connector");
+ok(!automaticIdle.canReconnect, "automatic idle server should wait for background connection or failure");
+
+const failed = mcpServerLifecycleActions({ ...server("failed"), runtimeState: "issue" });
+ok(failed.showRetryInRow, "failed server row should expose retry");
+
+ok(mcpServerRetryableFromAvailableList(server("initializing")), "connecting server should be included in available-list retry all");
+ok(mcpServerRetryableFromAvailableList({ ...server("deferred"), startIntent: "automatic" }), "automatic idle server should be included in available-list retry all");
+ok(!mcpServerRetryableFromAvailableList(server("connected")), "connected server should be excluded from available-list retry all");
+ok(!mcpServerRetryableFromAvailableList({ ...server("disabled"), startIntent: "off" }), "disabled server should be excluded from available-list retry all");
+ok(!mcpServerRetryableFromAvailableList({ ...server("failed"), runtimeState: "issue" }), "failed server is handled by the failure banner retry all");
+
+function flush(): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, 0));
+}
+
+async function waitFor(label: string, predicate: () => boolean) {
+  for (let attempt = 0; attempt < 20; attempt += 1) {
+    await act(async () => {
+      await flush();
+    });
+    if (predicate()) return;
+  }
+  throw new Error(`timed out waiting for ${label}`);
+}
+
+function installDom() {
+  const dom = new JSDOM("<!doctype html><html><body><div id=\"root\"></div></body></html>", {
+    pretendToBeVisual: true,
+    url: "http://localhost/",
+  });
+  (globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+  globalThis.window = dom.window as unknown as Window & typeof globalThis;
+  globalThis.document = dom.window.document;
+  Object.defineProperty(globalThis, "navigator", { configurable: true, value: dom.window.navigator });
+  globalThis.Node = dom.window.Node;
+  globalThis.HTMLElement = dom.window.HTMLElement;
+  globalThis.HTMLButtonElement = dom.window.HTMLButtonElement;
+  globalThis.Event = dom.window.Event;
+  globalThis.KeyboardEvent = dom.window.KeyboardEvent;
+  globalThis.MouseEvent = dom.window.MouseEvent;
+  globalThis.localStorage = dom.window.localStorage;
+  globalThis.requestAnimationFrame = dom.window.requestAnimationFrame.bind(dom.window);
+  globalThis.cancelAnimationFrame = dom.window.cancelAnimationFrame.bind(dom.window);
+  Object.defineProperty(window, "matchMedia", {
+    configurable: true,
+    value: () => ({
+      matches: true,
+      media: "(prefers-reduced-motion: reduce)",
+      onchange: null,
+      addEventListener() {},
+      removeEventListener() {},
+      addListener() {},
+      removeListener() {},
+      dispatchEvent: () => false,
+    }),
+  });
+  return dom;
+}
+
+function findButton(label: string): HTMLButtonElement | undefined {
+  return Array.from(document.querySelectorAll("button")).find((button) => button.textContent?.trim() === label) as HTMLButtonElement | undefined;
+}
 
 console.log("capabilities panel MCP actions");
+
+{
+  const dom = installDom();
+  const rootEl = document.getElementById("root");
+  if (!rootEl) throw new Error("missing root");
+  const root = createRoot(rootEl);
+  const meta: Meta = { label: "test", ready: true, eventChannel: "test-channel", cwd: "/tmp/reasonix-test", workspaceRoot: "/tmp/reasonix-test" };
+  const tabs: TabMeta[] = [{
+    id: "tab-1",
+    scope: "project",
+    workspaceRoot: "/tmp/reasonix-test",
+    workspaceName: "reasonix-test",
+    topicId: "topic-1",
+    topicTitle: "Test",
+    label: "Test",
+    ready: true,
+    running: false,
+    mode: "normal",
+    toolApprovalMode: "auto",
+    active: true,
+    cwd: "/tmp/reasonix-test",
+  }];
+  let trustCalls = 0;
+  let bulkTrustCalls = 0;
+  let untrustCalls = 0;
+  let servers: ServerView[] = [{
+    name: "github",
+    transport: "stdio",
+    status: "connected",
+    configured: true,
+    autoStart: true,
+    tools: 2,
+    prompts: 0,
+    resources: 0,
+    toolList: [
+      { name: "issue_read", description: "Read issues.", readOnlyHint: true },
+      { name: "issue_write", description: "Write issues." },
+    ],
+    trustedReadOnlyTools: [],
+  }];
+  window.go = {
+    main: {
+      App: {
+        Meta: async () => meta,
+        ListTabs: async () => tabs,
+        MCPServers: async () => servers.map((s) => ({
+          ...s,
+          toolList: s.toolList?.map((tool) => ({ ...tool })),
+          trustedReadOnlyTools: [...(s.trustedReadOnlyTools ?? [])],
+        })),
+        TrustMCPServerTool: async (name: string, toolName: string) => {
+          trustCalls += 1;
+          servers = servers.map((s) => s.name === name ? { ...s, trustedReadOnlyTools: [...(s.trustedReadOnlyTools ?? []), toolName] } : s);
+        },
+        TrustMCPServerTools: async (name: string, toolNames: string[]) => {
+          bulkTrustCalls += 1;
+          servers = servers.map((s) => {
+            if (s.name !== name) return s;
+            const trusted = Array.from(new Set([...(s.trustedReadOnlyTools ?? []), ...toolNames]));
+            return { ...s, trustedReadOnlyTools: trusted };
+          });
+        },
+        UntrustMCPServerTool: async (name: string, toolName: string) => {
+          untrustCalls += 1;
+          servers = servers.map((s) => s.name === name ? { ...s, trustedReadOnlyTools: (s.trustedReadOnlyTools ?? []).filter((tool) => tool !== toolName) } : s);
+        },
+      } as Partial<AppBindings> as AppBindings,
+    },
+  };
+
+  await act(async () => {
+    root.render(React.createElement(LocaleProvider, null, React.createElement(MCPServersSettingsPage)));
+    await flush();
+  });
+  await waitFor("github server row", () => Boolean(document.querySelector(".cap-row__name")?.textContent?.includes("github")));
+
+  const disclosure = document.querySelector<HTMLButtonElement>(".cap-disclosure");
+  if (!disclosure) throw new Error("missing MCP disclosure button");
+  await act(async () => {
+    disclosure.click();
+    await flush();
+  });
+
+  const trustReadOnly = findButton("Pre-trust read-only (1)");
+  if (!trustReadOnly) throw new Error("missing bulk Pre-trust read-only button");
+  await act(async () => {
+    trustReadOnly.click();
+    await flush();
+  });
+  await waitFor("bulk trusted tool", () => servers[0]?.trustedReadOnlyTools?.includes("issue_read") ?? false);
+
+  const viewTools = findButton("View tools");
+  if (!viewTools) throw new Error("missing View tools button");
+  await act(async () => {
+    viewTools.click();
+    await flush();
+  });
+
+  await waitFor("trusted badge", () => Boolean(document.querySelector(".cap-tool-trust")?.textContent?.includes("Trusted")));
+  const untrust = findButton("Untrust");
+  if (!untrust) throw new Error("missing Untrust button");
+  await act(async () => {
+    untrust.click();
+    await flush();
+  });
+  await waitFor("untrusted tool", () => !(servers[0]?.trustedReadOnlyTools?.includes("issue_read") ?? false));
+
+  await waitFor("Pre-trust button", () => Boolean(findButton("Pre-trust")));
+  const trust = findButton("Pre-trust");
+  if (!trust) throw new Error("missing Pre-trust button");
+  await act(async () => {
+    trust.click();
+    await flush();
+  });
+
+  await waitFor("trusted badge", () => Boolean(document.querySelector(".cap-tool-trust")?.textContent?.includes("Trusted")));
+  ok(bulkTrustCalls === 1, "clicking Pre-trust read-only invokes the MCP bulk trust action once");
+  ok(untrustCalls === 1, "clicking Untrust invokes the MCP untrust action once");
+  ok(trustCalls === 1, "clicking Trust invokes the MCP trust action once");
+  ok(servers[0]?.trustedReadOnlyTools?.includes("issue_read") ?? false, "trusted raw tool name is added to the server snapshot");
+
+  await act(async () => {
+    root.unmount();
+  });
+  dom.window.close();
+}

desktop/frontend/src/__tests__/code-block-copy-position.test.tsx

@@ -0,0 +1,86 @@
+// Run: tsx src/__tests__/code-block-copy-position.test.tsx
+
+import { readFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import { JSDOM } from "jsdom";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import HljsCode from "../components/editors/HljsCode";
+import { LocaleProvider } from "../lib/i18n";
+
+let passed = 0;
+let failed = 0;
+
+function ok(value: unknown, label: string) {
+  if (value) {
+    process.stdout.write(`  PASS  ${label}\n`);
+    passed += 1;
+  } else {
+    process.stdout.write(`  FAIL  ${label}\n`);
+    failed += 1;
+  }
+}
+
+function notOk(value: unknown, label: string) {
+  ok(!value, label);
+}
+
+function renderCodeBlock() {
+  return renderToStaticMarkup(
+    createElement(
+      LocaleProvider,
+      null,
+      createElement(HljsCode, {
+        value: "const veryLongLine = 'x'.repeat(240);",
+        language: "ts",
+        maxHeight: 120,
+      }),
+    ),
+  );
+}
+
+function selectorPresent(css: string, selector: string): boolean {
+  return css.includes(selector);
+}
+
+console.log("\ncode block copy position");
+
+const markup = renderCodeBlock();
+const dom = new JSDOM(markup);
+const document = dom.window.document;
+const wrap = document.querySelector(".code-block__wrap");
+const pre = document.querySelector("pre.code.hljs");
+const copy = document.querySelector(".code-block__copy");
+
+ok(wrap, "HljsCode renders a positioned copy wrapper");
+ok(pre, "HljsCode renders the highlighted pre");
+ok(copy, "HljsCode renders the copy button");
+ok(pre?.parentElement === wrap, "scrollable pre is inside the wrapper");
+ok(copy?.parentElement === wrap, "copy button is a wrapper child");
+notOk(pre?.contains(copy ?? null), "copy button is outside the scrollable pre");
+ok(copy?.previousElementSibling === pre, "copy button follows pre as a sibling");
+
+const stylesPath = fileURLToPath(new URL("../styles.css", import.meta.url));
+const css = readFileSync(stylesPath, "utf8");
+
+ok(selectorPresent(css, ".code-block__wrap:hover .code-block__copy"), "hover reveal targets the wrapper");
+notOk(selectorPresent(css, ".code:hover .code-block__copy"), "hover reveal no longer depends on pre descendants");
+ok(
+  selectorPresent(css, ".app--creation .msg--assistant .md .code:not([data-lang]) + .code-block__copy"),
+  "creation unlabelled code button styles target sibling copy buttons",
+);
+notOk(
+  selectorPresent(css, ".app--creation .msg--assistant .md .code:not([data-lang]) .code-block__copy"),
+  "creation unlabelled code styles do not target descendants inside pre",
+);
+ok(
+  selectorPresent(css, '.app--creation .msg--assistant .md .code[data-lang="bash"] + .code-block__copy'),
+  "creation shell code button styles target sibling copy buttons",
+);
+notOk(
+  selectorPresent(css, '.app--creation .msg--assistant .md .code[data-lang="bash"] .code-block__copy'),
+  "creation shell code styles do not target descendants inside pre",
+);
+
+console.log(`\n${passed} passed, ${failed} failed`);
+if (failed > 0) process.exit(1);

desktop/frontend/src/__tests__/command-palette-interactions.test.tsx

@@ -0,0 +1,138 @@
+// Run: tsx src/__tests__/command-palette-interactions.test.tsx
+
+import { JSDOM } from "jsdom";
+import React from "react";
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { CommandPalette, type PaletteItem } from "../components/CommandPalette";
+import { LocaleProvider } from "../lib/i18n";
+
+let passed = 0;
+let failed = 0;
+
+function ok(value: boolean, label: string) {
+  if (value) {
+    process.stdout.write(`  PASS  ${label}\n`);
+    passed += 1;
+  } else {
+    process.stdout.write(`  FAIL  ${label}\n`);
+    failed += 1;
+  }
+}
+
+async function flush() {
+  await new Promise((resolve) => setTimeout(resolve, 0));
+}
+
+function installDom() {
+  const dom = new JSDOM("<!doctype html><html><body><div id=\"root\"></div></body></html>", {
+    pretendToBeVisual: true,
+    url: "http://localhost/",
+  });
+  (globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+  globalThis.window = dom.window as unknown as Window & typeof globalThis;
+  globalThis.document = dom.window.document;
+  Object.defineProperty(globalThis, "navigator", { configurable: true, value: dom.window.navigator });
+  globalThis.Node = dom.window.Node;
+  globalThis.HTMLElement = dom.window.HTMLElement;
+  globalThis.HTMLButtonElement = dom.window.HTMLButtonElement;
+  globalThis.Event = dom.window.Event;
+  globalThis.KeyboardEvent = dom.window.KeyboardEvent;
+  globalThis.MouseEvent = dom.window.MouseEvent;
+  globalThis.requestAnimationFrame = dom.window.requestAnimationFrame.bind(dom.window);
+  globalThis.cancelAnimationFrame = dom.window.cancelAnimationFrame.bind(dom.window);
+  Object.defineProperty(dom.window.HTMLElement.prototype, "attachEvent", { configurable: true, value: () => {} });
+  Object.defineProperty(dom.window.HTMLElement.prototype, "detachEvent", { configurable: true, value: () => {} });
+  Object.defineProperty(window, "matchMedia", {
+    configurable: true,
+    value: () => ({
+      matches: true,
+      media: "(prefers-reduced-motion: reduce)",
+      onchange: null,
+      addEventListener() {},
+      removeEventListener() {},
+      addListener() {},
+      removeListener() {},
+      dispatchEvent: () => false,
+    }),
+  });
+  return dom;
+}
+
+async function renderPalette() {
+  const rootEl = document.getElementById("root");
+  if (!rootEl) throw new Error("missing root");
+  const root = createRoot(rootEl);
+  const calls = { close: 0, run: 0 };
+  const items: PaletteItem[] = [{
+    id: "cmd-new",
+    group: "Commands",
+    title: "New session",
+    run: () => {
+      calls.run += 1;
+    },
+  }];
+  await act(async () => {
+    root.render(
+      <LocaleProvider>
+        <CommandPalette
+          open
+          onClose={() => {
+            calls.close += 1;
+          }}
+          items={items}
+          placeholder="Search"
+          emptyText="No results"
+        />
+      </LocaleProvider>,
+    );
+    await flush();
+  });
+  return { root, calls };
+}
+
+console.log("\ncommand palette interactions");
+
+{
+  const dom = installDom();
+  const { root, calls } = await renderPalette();
+  const esc = document.querySelector<HTMLButtonElement>(".palette__esc");
+  ok(esc instanceof HTMLButtonElement, "header esc keycap is a real close button");
+
+  await act(async () => {
+    esc?.click();
+    await flush();
+  });
+  ok(calls.close === 1, "clicking header esc closes the command palette");
+  ok(calls.run === 0, "clicking header esc does not run the highlighted command");
+
+  await act(async () => {
+    root.unmount();
+  });
+  dom.window.close();
+}
+
+{
+  const dom = installDom();
+  const { root, calls } = await renderPalette();
+  const esc = document.querySelector<HTMLButtonElement>(".palette__esc");
+  if (!esc) throw new Error("missing header esc close button");
+
+  await act(async () => {
+    esc.focus();
+    esc.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true }));
+    esc.click();
+    await flush();
+  });
+
+  ok(calls.close === 1, "Enter on focused header esc closes the command palette");
+  ok(calls.run === 0, "Enter on focused header esc does not run the highlighted command");
+
+  await act(async () => {
+    root.unmount();
+  });
+  dom.window.close();
+}
+
+console.log(`\n${passed} passed, ${failed} failed`);
+if (failed > 0) process.exit(1);

desktop/frontend/src/__tests__/composer-goal-toggle.test.tsx

@@ -4,9 +4,10 @@ import { JSDOM } from "jsdom";
 import React from "react";
 import { act } from "react";
 import { createRoot } from "react-dom/client";
-import { Composer } from "../components/Composer";
+import { Composer, composerPickFileEntry } from "../components/Composer";
 import { LocaleProvider } from "../lib/i18n";
 import { ToastProvider } from "../lib/toast";
+import type { AppBindings } from "../lib/bridge";
 import type { CollaborationMode, ToolApprovalMode, TokenMode } from "../lib/types";
 
 let passed = 0;
@@ -56,6 +57,8 @@ function installDom() {
   globalThis.MouseEvent = dom.window.MouseEvent;
   globalThis.PointerEvent = dom.window.MouseEvent as unknown as typeof PointerEvent;
   globalThis.MutationObserver = dom.window.MutationObserver;
+  globalThis.File = dom.window.File;
+  globalThis.FileReader = dom.window.FileReader;
   globalThis.localStorage = dom.window.localStorage;
   globalThis.requestAnimationFrame = dom.window.requestAnimationFrame.bind(dom.window);
   globalThis.cancelAnimationFrame = dom.window.cancelAnimationFrame.bind(dom.window);
@@ -84,9 +87,15 @@ async function renderComposer(props: Partial<Parameters<typeof Composer>[0]> = {
   const root = createRoot(rootEl);
   const calls: {
     send: string[];
+    submit: (string | undefined)[];
+    cancel: number;
+    clearGoal: number;
     setCollaborationMode: CollaborationMode[];
   } = {
     send: [],
+    submit: [],
+    cancel: 0,
+    clearGoal: 0,
     setCollaborationMode: [],
   };
   let currentProps: Parameters<typeof Composer>[0] = {
@@ -97,14 +106,22 @@ async function renderComposer(props: Partial<Parameters<typeof Composer>[0]> = {
     goal: "",
     cwd: "/repo",
     modelLabel: "DeepSeek-R1",
-    onSend: (displayText) => calls.send.push(displayText),
-    onCancel: () => undefined,
+    onSend: (displayText, submitText) => {
+      calls.send.push(displayText);
+      calls.submit.push(submitText);
+    },
+    onCancel: () => {
+      calls.cancel += 1;
+      return undefined;
+    },
     onCycleMode: () => {},
     onSetMode: () => {},
     onSetCollaborationMode: (mode) => calls.setCollaborationMode.push(mode),
     onSetToolApprovalMode: () => {},
     onToggleYoloApprovalMode: () => {},
-    onClearGoal: () => {},
+    onClearGoal: () => {
+      calls.clearGoal += 1;
+    },
     onSwitchModel: () => {},
     onSetEffort: () => {},
     onSetTokenMode: () => {},
@@ -128,6 +145,61 @@ async function renderComposer(props: Partial<Parameters<typeof Composer>[0]> = {
   return { root, calls, rerender: paint };
 }
 
+function mockApp(methods: Partial<AppBindings>) {
+  window.go = {
+    main: {
+      App: {
+        Commands: async () => [],
+        Models: async () => [],
+        ModelsForTab: async () => [],
+        ...methods,
+      } as Partial<AppBindings> as AppBindings,
+    },
+  };
+}
+
+function dispatchPasteFile(textarea: HTMLTextAreaElement, file: File) {
+  const event = new Event("paste", { bubbles: true, cancelable: true });
+  Object.defineProperty(event, "clipboardData", {
+    configurable: true,
+    value: {
+      files: [file],
+      items: [],
+      types: ["Files"],
+      getData: () => "",
+    },
+  });
+  textarea.dispatchEvent(event);
+}
+
+function nativeFileDropEvent(): Event {
+  const drop = new window.Event("drop", { bubbles: true, cancelable: true });
+  Object.defineProperty(drop, "dataTransfer", {
+    configurable: true,
+    value: {
+      types: ["Files"],
+      files: [{}],
+      items: [
+        {
+          kind: "file",
+          webkitGetAsEntry: () => ({ isFile: true }),
+        },
+      ],
+    },
+  });
+  return drop;
+}
+
+async function waitFor(label: string, predicate: () => boolean) {
+  for (let attempt = 0; attempt < 20; attempt += 1) {
+    await act(async () => {
+      await flushTimers();
+    });
+    if (predicate()) return;
+  }
+  throw new Error(`timed out waiting for ${label}`);
+}
+
 console.log("\ncomposer goal toggle");
 
 {
@@ -166,5 +238,506 @@ console.log("\ncomposer goal toggle");
   dom.window.close();
 }
 
+{
+  const dom = installDom();
+  const { root, calls } = await renderComposer({
+    running: true,
+    collaborationMode: "goal",
+    goal: "finish the migration",
+    turnStartAt: Date.now(),
+  });
+
+  const stopButton = document.querySelector(".composer-runstatus__stop") as HTMLButtonElement | null;
+  if (!stopButton) throw new Error("composer stop button did not render");
+
+  await act(async () => {
+    stopButton.click();
+    await flushTimers();
+  });
+
+  eq(calls.cancel, 1, "goal-mode stop cancels the running turn");
+  eq(calls.clearGoal, 1, "goal-mode stop clears the active goal");
+
+  await act(async () => {
+    root.unmount();
+  });
+  dom.window.close();
+}
+
+{
+  const dom = installDom();
+  mockApp({
+    SavePastedFile: async () => {
+      throw new Error("/Users/example/private.pdf: permission denied");
+    },
+  });
+  const { root, rerender } = await renderComposer();
+  await rerender({ insertRequest: { id: 2, text: "keep this draft", mode: "replace" } });
+
+  const textarea = document.querySelector("textarea") as HTMLTextAreaElement | null;
+  if (!textarea) throw new Error("composer textarea did not render");
+  const sendButton = document.querySelector(".composer__btn--send") as HTMLButtonElement | null;
+  if (!sendButton) throw new Error("composer send button did not render");
+
+  await act(async () => {
+    dispatchPasteFile(textarea, new File(["hello"], "notes.txt", { type: "text/plain" }));
+    await flushTimers();
+  });
+  await waitFor("pasted file failure toast", () => document.body.textContent?.includes("File attach failed") === true);
+
+  ok(document.body.textContent?.includes("File attach failed") === true, "SavePastedFile rejection shows a visible error");
+  eq(textarea.value, "keep this draft", "failed pasted file attach preserves composer text");
+  ok(sendButton.disabled === false, "failed pasted file attach clears the pending state");
+  ok(document.body.textContent?.includes("/Users/example") === false, "pasted file failure toast does not expose the local path");
+
+  await act(async () => {
+    root.unmount();
+  });
+  dom.window.close();
+}
+
+{
+  const dom = installDom();
+  mockApp({
+    SavePastedFile: async () => ".reasonix/attachments/notes.txt",
+  });
+  const { root } = await renderComposer();
+
+  const textarea = document.querySelector("textarea") as HTMLTextAreaElement | null;
+  if (!textarea) throw new Error("composer textarea did not render");
+
+  await act(async () => {
+    dispatchPasteFile(textarea, new File(["hello"], "notes.txt", { type: "text/plain" }));
+    await flushTimers();
+  });
+  await waitFor("pasted file attachment", () => document.body.textContent?.includes("notes.txt") === true);
+
+  ok(document.body.textContent?.includes("notes.txt") === true, "successful pasted file attach still renders the attachment");
+
+  await act(async () => {
+    root.unmount();
+  });
+  dom.window.close();
+}
+
+{
+  const dom = installDom();
+  let droppedCallback: ((x: number, y: number, paths: string[]) => void) | undefined;
+  window.runtime = {
+    EventsOn: () => () => {},
+    BrowserOpenURL: () => {},
+    OnFileDrop: (cb) => {
+      droppedCallback = cb;
+    },
+    OnFileDropOff: () => {},
+  };
+  mockApp({
+    AttachDropped: async () => {
+      throw new Error("/Users/example/secret.pdf: permission denied");
+    },
+  });
+  const { root, rerender } = await renderComposer();
+  await rerender({ insertRequest: { id: 3, text: "drop draft", mode: "replace" } });
+
+  const textarea = document.querySelector("textarea") as HTMLTextAreaElement | null;
+  if (!textarea) throw new Error("composer textarea did not render");
+  const sendButton = document.querySelector(".composer__btn--send") as HTMLButtonElement | null;
+  if (!sendButton) throw new Error("composer send button did not render");
+  if (!droppedCallback) throw new Error("native file drop handler did not register");
+
+  await act(async () => {
+    droppedCallback?.(0, 0, ["/Users/example/secret.pdf"]);
+    await flushTimers();
+  });
+  await waitFor("dropped file failure toast", () => document.body.textContent?.includes("Dropped file attach failed") === true);
+
+  ok(document.body.textContent?.includes("Dropped file attach failed") === true, "AttachDropped rejection shows a visible error");
+  eq(textarea.value, "drop draft", "failed dropped file attach preserves composer text");
+  ok(sendButton.disabled === false, "failed dropped file attach clears the pending state");
+  ok(document.body.textContent?.includes("/Users/example") === false, "dropped file failure toast does not expose the local path");
+
+  await act(async () => {
+    root.unmount();
+  });
+  dom.window.close();
+}
+
+{
+  const dom = installDom();
+  let droppedCallback: ((x: number, y: number, paths: string[]) => void) | undefined;
+  window.runtime = {
+    EventsOn: () => () => {},
+    BrowserOpenURL: () => {},
+    OnFileDrop: (cb) => {
+      droppedCallback = cb;
+    },
+    OnFileDropOff: () => {},
+  };
+  mockApp({
+    AttachDropped: async () => ({
+      kind: "attachment",
+      path: ".reasonix/attachments/report.pdf",
+    }),
+  });
+  const { root } = await renderComposer();
+  if (!droppedCallback) throw new Error("native file drop handler did not register");
+
+  await act(async () => {
+    droppedCallback?.(0, 0, ["/Users/example/report.pdf"]);
+    await flushTimers();
+  });
+  await waitFor("dropped file attachment", () => document.body.textContent?.includes("report.pdf") === true);
+
+  ok(document.body.textContent?.includes("report.pdf") === true, "successful dropped file attach still renders the attachment");
+
+  await act(async () => {
+    root.unmount();
+  });
+  dom.window.close();
+}
+
+{
+  const dom = installDom();
+  let droppedCallback: ((x: number, y: number, paths: string[]) => void) | undefined;
+  window.runtime = {
+    EventsOn: () => () => {},
+    BrowserOpenURL: () => {},
+    OnFileDrop: (cb) => {
+      droppedCallback = cb;
+    },
+    OnFileDropOff: () => {},
+  };
+  mockApp({
+    AttachDropped: async () => ({
+      kind: "workspace",
+      path: "__reasonix_external_folder/mock/Folder-With-Spaces",
+      isDir: true,
+      displayPath: "/Users/example/Folder With Spaces",
+    }),
+  });
+  const { root, calls, rerender } = await renderComposer();
+  await rerender({ insertRequest: { id: 4, text: "inspect", mode: "replace" } });
+  if (!droppedCallback) throw new Error("native file drop handler did not register");
+
+  await act(async () => {
+    droppedCallback?.(0, 0, ["/Users/example/Folder With Spaces"]);
+    await flushTimers();
+  });
+  await waitFor("dropped external folder chip", () => document.body.textContent?.includes("Folder With Spaces/") === true);
+
+  ok(document.body.textContent?.includes("Folder With Spaces/") === true, "dropped external folder renders as a folder context chip");
+
+  const sendButton = document.querySelector(".composer__btn--send") as HTMLButtonElement | null;
+  if (!sendButton) throw new Error("composer send button did not render");
+  await act(async () => {
+    sendButton.click();
+    await flushTimers();
+  });
+
+  eq(calls.send.join(","), "inspect @/Users/example/Folder With Spaces/", "external folder display text uses the real folder path");
+  eq(calls.submit.join(","), "inspect @__reasonix_external_folder/mock/Folder-With-Spaces/", "external folder submit text uses the session ref token");
+
+  await act(async () => {
+    root.unmount();
+  });
+  dom.window.close();
+}
+
+{
+  const externalToken = "__reasonix_external_folder/mock/Folder-With-Spaces/src/outside.txt";
+  const externalDisplayPath = "/Users/example/Folder With Spaces/src/outside.txt";
+  const picked = composerPickFileEntry("ask @outside", "outside", "", {
+    name: "src/outside.txt",
+    path: externalToken,
+    isDir: false,
+    displayName: "Folder With Spaces/src/outside.txt",
+    displayPath: externalDisplayPath,
+  });
+  eq(picked.text, "ask ", "external search selection removes the token fragment from the draft");
+  eq(picked.workspaceRef?.path, externalToken, "external search selection submits the session ref token");
+  eq(picked.workspaceRef?.displayPath, externalDisplayPath, "external search selection keeps the real display path");
+
+  const localFile = composerPickFileEntry("ask @src/mai", "src/mai", "src/", { name: "main.go", isDir: false });
+  eq(localFile.text, "ask @src/main.go ", "local file selection still completes inline text");
+
+  const localDir = composerPickFileEntry("ask @sr", "sr", "", { name: "src", isDir: true });
+  eq(localDir.text, "ask @src/", "local dir selection still keeps the menu-open slash");
+}
+
+{
+  const dom = installDom();
+  const { root: dropNavRoot } = await renderComposer();
+  const composer = document.querySelector(".composer") as HTMLElement | null;
+  if (!composer) throw new Error("composer did not render");
+
+  const drop = nativeFileDropEvent();
+  await act(async () => {
+    composer.dispatchEvent(drop);
+    await flushTimers();
+  });
+  ok(drop.defaultPrevented, "native file drop prevents browser image navigation");
+
+  await act(async () => {
+    dropNavRoot.unmount();
+  });
+  dom.window.close();
+}
+
+{
+  const dom = installDom();
+  const { root: dropWrapRoot } = await renderComposer();
+  const wrap = document.querySelector(".composer-wrap") as HTMLElement | null;
+  if (!wrap) throw new Error("composer wrap did not render");
+
+  const drop = nativeFileDropEvent();
+  await act(async () => {
+    wrap.dispatchEvent(drop);
+    await flushTimers();
+  });
+  ok(drop.defaultPrevented, "outer native file drop target prevents browser image navigation");
+
+  await act(async () => {
+    dropWrapRoot.unmount();
+  });
+  dom.window.close();
+}
+
+{
+  const dom = installDom();
+  let rejectSubmit: (err: Error) => void = () => {};
+  const rejectedSubmit = new Promise<void>((_, reject) => {
+    rejectSubmit = reject;
+  });
+  rejectedSubmit.catch(() => {});
+  const { root, calls, rerender } = await renderComposer({
+    onSend: (displayText) => {
+      calls.send.push(displayText);
+      return rejectedSubmit;
+    },
+  });
+
+  const textarea = document.querySelector("textarea") as HTMLTextAreaElement | null;
+  if (!textarea) throw new Error("composer textarea did not render");
+
+  await rerender({ insertRequest: { id: 2, text: "keep this draft", mode: "replace" } });
+  const sendButton = document.querySelector(".composer__btn--send") as HTMLButtonElement | null;
+  if (!sendButton) throw new Error("composer send button did not render");
+
+  await act(async () => {
+    sendButton.click();
+    rejectSubmit(new Error("workspace is still starting"));
+    await flushTimers();
+  });
+
+  eq(calls.send.join(","), "keep this draft", "rejected submit attempts the send once");
+  eq(textarea.value, "keep this draft", "rejected submit preserves the composer draft");
+
+  await act(async () => {
+    root.unmount();
+  });
+  dom.window.close();
+}
+
+{
+  const dom = installDom();
+  const { root, calls, rerender } = await renderComposer({
+    onSend: (displayText) => {
+      calls.send.push(displayText);
+      return Promise.resolve();
+    },
+  });
+
+  const textarea = document.querySelector("textarea") as HTMLTextAreaElement | null;
+  if (!textarea) throw new Error("composer textarea did not render");
+
+  await rerender({ insertRequest: { id: 3, text: "send this draft", mode: "replace" } });
+  const sendButton = document.querySelector(".composer__btn--send") as HTMLButtonElement | null;
+  if (!sendButton) throw new Error("composer send button did not render");
+
+  await act(async () => {
+    sendButton.click();
+    await flushTimers();
+  });
+
+  eq(calls.send.join(","), "send this draft", "successful submit attempts the send once");
+  eq(textarea.value, "", "successful submit clears the composer draft");
+
+  await act(async () => {
+    root.unmount();
+  });
+  dom.window.close();
+}
+
+{
+  const dom = installDom();
+  const { root, rerender } = await renderComposer({
+    running: true,
+    guidanceQueuePreviewItems: ["confirm the send lifecycle", "keep steer protocol unchanged", "add a hanging submit regression"],
+  });
+
+  let guidanceItems = Array.from(document.querySelectorAll(".composer-guidance-item"));
+  eq(guidanceItems.length, 2, "running guidance preview shows a compact queue preview");
+  ok(guidanceItems[0]?.textContent?.includes("confirm the send lifecycle") === true, "guidance preview shows the first seeded item");
+  ok(guidanceItems[1]?.textContent?.includes("keep steer protocol unchanged") === true, "guidance preview shows the second seeded item");
+  eq(document.querySelectorAll(".composer-guidance-item__guide").length, 2, "guidance preview exposes a guide action for each visible item");
+  let guidanceMore = document.querySelector(".composer-guidance-more") as HTMLButtonElement | null;
+  ok(guidanceMore?.textContent?.includes("1 more queued") === true, "guidance preview summarizes overflow items");
+  eq(guidanceMore?.getAttribute("aria-expanded"), "false", "guidance overflow starts collapsed");
+
+  if (!guidanceMore) throw new Error("guidance overflow button did not render");
+  await act(async () => {
+    guidanceMore.click();
+    await flushTimers();
+  });
+  guidanceItems = Array.from(document.querySelectorAll(".composer-guidance-item"));
+  eq(guidanceItems.length, 3, "guidance overflow expands the remaining queued items");
+  ok(guidanceItems[2]?.textContent?.includes("add a hanging submit regression") === true, "expanded guidance preview shows the hidden item");
+  guidanceMore = document.querySelector(".composer-guidance-more") as HTMLButtonElement | null;
+  ok(guidanceMore?.textContent?.includes("Collapse") === true, "expanded guidance overflow can be collapsed");
+  eq(guidanceMore?.getAttribute("aria-expanded"), "true", "guidance overflow reports expanded state");
+
+  if (!guidanceMore) throw new Error("guidance collapse button did not render");
+  await act(async () => {
+    guidanceMore.click();
+    await flushTimers();
+  });
+  guidanceItems = Array.from(document.querySelectorAll(".composer-guidance-item"));
+  eq(guidanceItems.length, 2, "guidance overflow collapses back to the compact preview");
+
+  await rerender({ guidanceQueuePreviewItems: ["only the latest preview seed"] });
+  guidanceItems = Array.from(document.querySelectorAll(".composer-guidance-item"));
+  eq(guidanceItems.length, 1, "guidance preview refreshes when the seed changes");
+  ok(guidanceItems[0]?.textContent?.includes("only the latest preview seed") === true, "guidance preview renders the refreshed seed");
+
+  await rerender({ running: false });
+  ok(document.querySelector(".composer-guidance-item") === null, "guidance preview clears when the mock turn stops");
+
+  await act(async () => {
+    root.unmount();
+  });
+  dom.window.close();
+}
+
+{
+  const dom = installDom();
+  const { root, calls, rerender } = await renderComposer({
+    running: true,
+    onSend: (displayText, submitText) => {
+      calls.send.push(displayText);
+      calls.submit.push(submitText);
+    },
+  });
+
+  const textarea = document.querySelector("textarea") as HTMLTextAreaElement | null;
+  if (!textarea) throw new Error("composer textarea did not render");
+  const sendButton = document.querySelector(".composer__btn--send") as HTMLButtonElement | null;
+  if (!sendButton) throw new Error("running composer send button did not render");
+
+  eq(textarea.placeholder, "Add guidance to the queue...", "running composer explains queued guidance input");
+  ok(sendButton.classList.contains("composer__btn--steer"), "running composer marks send button as steer");
+  ok(sendButton.disabled === true, "running steer button stays disabled without input");
+
+  await rerender({ insertRequest: { id: 4, text: "keep the files small", mode: "replace" } });
+  ok(sendButton.disabled === false, "running steer button enables after text input");
+
+  await act(async () => {
+    sendButton.click();
+    await flushTimers();
+  });
+
+  eq(calls.send.join(","), "", "running composer queues guidance without sending it immediately");
+  eq(textarea.value, "", "queued running guidance clears the composer draft");
+  const guidanceItem = document.querySelector(".composer-guidance-item") as HTMLElement | null;
+  if (!guidanceItem) throw new Error("running guidance chip did not render");
+  ok(guidanceItem.textContent?.includes("keep the files small") === true, "running guidance chip shows queued text");
+  ok(document.querySelector(".composer-guidance-head")?.textContent?.includes("Queued guidance 1") === true, "running guidance shelf shows queued count");
+
+  const guideButton = guidanceItem.querySelector(".composer-guidance-item__guide") as HTMLButtonElement | null;
+  if (!guideButton) throw new Error("running guidance guide button did not render");
+  await act(async () => {
+    guideButton.click();
+    await flushTimers();
+  });
+  eq(calls.send.join(","), "keep the files small", "queued guidance sends through onSend when guided");
+  ok(document.querySelector(".composer-guidance-item") === null, "queued guidance clears after being guided");
+
+  await rerender({ insertRequest: { id: 5, text: "prefer the smaller diff", mode: "replace" } });
+  await act(async () => {
+    sendButton.click();
+    await flushTimers();
+  });
+  const dismissibleGuidanceItem = document.querySelector(".composer-guidance-item") as HTMLElement | null;
+  if (!dismissibleGuidanceItem) throw new Error("dismissible guidance chip did not render");
+  const dismissButton = dismissibleGuidanceItem.querySelector(".composer-guidance-item__action") as HTMLButtonElement | null;
+  if (!dismissButton) throw new Error("running guidance dismiss button did not render");
+  await act(async () => {
+    dismissButton.click();
+    await flushTimers();
+  });
+  ok(document.querySelector(".composer-guidance-item") === null, "running guidance chip can be dismissed");
+
+  await rerender({ insertRequest: { id: 6, text: "prefer the smaller diff", mode: "replace" } });
+  await act(async () => {
+    sendButton.click();
+    await flushTimers();
+  });
+  ok(document.querySelector(".composer-guidance-item") !== null, "running guidance chip renders again after another queued item");
+
+  await rerender({ guidanceConsumedKey: "s1", guidanceConsumedText: "prefer the smaller diff" });
+  ok(document.querySelector(".composer-guidance-item") === null, "running guidance chip clears when steer is consumed");
+
+  await rerender({ insertRequest: { id: 7, text: "then stop showing the chip", mode: "replace" } });
+  await act(async () => {
+    sendButton.click();
+    await flushTimers();
+  });
+  ok(document.querySelector(".composer-guidance-item") !== null, "running guidance chip renders before turn stop");
+
+  await rerender({ running: false });
+  ok(document.querySelector(".composer-guidance-item") === null, "running guidance chip clears when the turn stops");
+
+  await act(async () => {
+    root.unmount();
+  });
+  dom.window.close();
+}
+
+{
+  const dom = installDom();
+  const { root, calls, rerender } = await renderComposer({
+    running: true,
+    submitDisabled: true,
+    onSend: (displayText) => {
+      calls.send.push(displayText);
+    },
+  });
+
+  const sendButton = document.querySelector(".composer__btn--send") as HTMLButtonElement | null;
+  if (!sendButton) throw new Error("running composer send button did not render");
+
+  await rerender({ insertRequest: { id: 7, text: "steer while activating", mode: "replace" } });
+  ok(sendButton.disabled === false, "running guidance queue ignores controller submitDisabled");
+
+  await act(async () => {
+    sendButton.click();
+    await flushTimers();
+  });
+
+  eq(calls.send.join(","), "", "running guidance queues while controllerReady is false");
+  const guideButton = document.querySelector(".composer-guidance-item__guide") as HTMLButtonElement | null;
+  if (!guideButton) throw new Error("running guidance guide button did not render");
+  await act(async () => {
+    guideButton.click();
+    await flushTimers();
+  });
+
+  eq(calls.send.join(","), "steer while activating", "queued guidance can be guided while controllerReady is false");
+
+  await act(async () => {
+    root.unmount();
+  });
+  dom.window.close();
+}
+
 console.log(`\n${passed} passed, ${failed} failed, ${passed + failed} total`);
 if (failed > 0) process.exit(1);

desktop/frontend/src/__tests__/composer-image-capability.test.tsx

@@ -0,0 +1,259 @@
+// Run: tsx src/__tests__/composer-image-capability.test.tsx
+
+import { JSDOM } from "jsdom";
+import React from "react";
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { Composer } from "../components/Composer";
+import { LocaleProvider } from "../lib/i18n";
+import { ToastProvider } from "../lib/toast";
+import type { CollaborationMode, TokenMode, ToolApprovalMode } from "../lib/types";
+
+let passed = 0;
+let failed = 0;
+
+function ok(value: boolean, label: string) {
+  if (value) {
+    process.stdout.write(`  PASS  ${label}\n`);
+    passed += 1;
+  } else {
+    process.stdout.write(`  FAIL  ${label}\n`);
+    failed += 1;
+  }
+}
+
+function eq(actual: unknown, expected: unknown, label: string) {
+  if (actual === expected) ok(true, label);
+  else ok(false, `${label}: expected ${JSON.stringify(expected)}, got ${JSON.stringify(actual)}`);
+}
+
+function flushTimers(): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, 0));
+}
+
+async function waitFor(check: () => boolean, attempts = 10): Promise<void> {
+  for (let i = 0; i < attempts; i++) {
+    if (check()) return;
+    await act(async () => {
+      await flushTimers();
+    });
+  }
+}
+
+class TestResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+
+function installDom() {
+  const dom = new JSDOM("<!doctype html><html><body><div id=\"root\"></div></body></html>", {
+    pretendToBeVisual: true,
+    url: "http://localhost/",
+  });
+  (globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+  globalThis.window = dom.window as unknown as Window & typeof globalThis;
+  globalThis.document = dom.window.document;
+  Object.defineProperty(globalThis, "navigator", { configurable: true, value: dom.window.navigator });
+  globalThis.Node = dom.window.Node;
+  globalThis.HTMLElement = dom.window.HTMLElement;
+  globalThis.HTMLTextAreaElement = dom.window.HTMLTextAreaElement;
+  globalThis.Event = dom.window.Event;
+  globalThis.CustomEvent = dom.window.CustomEvent;
+  globalThis.KeyboardEvent = dom.window.KeyboardEvent;
+  globalThis.InputEvent = dom.window.InputEvent;
+  globalThis.MouseEvent = dom.window.MouseEvent;
+  globalThis.File = dom.window.File;
+  globalThis.FileReader = dom.window.FileReader;
+  globalThis.PointerEvent = dom.window.MouseEvent as unknown as typeof PointerEvent;
+  globalThis.MutationObserver = dom.window.MutationObserver;
+  globalThis.localStorage = dom.window.localStorage;
+  globalThis.requestAnimationFrame = dom.window.requestAnimationFrame.bind(dom.window);
+  globalThis.cancelAnimationFrame = dom.window.cancelAnimationFrame.bind(dom.window);
+  globalThis.ResizeObserver = TestResizeObserver;
+  Object.defineProperty(dom.window.HTMLElement.prototype, "attachEvent", { configurable: true, value: () => {} });
+  Object.defineProperty(dom.window.HTMLElement.prototype, "detachEvent", { configurable: true, value: () => {} });
+  Object.defineProperty(window, "matchMedia", {
+    configurable: true,
+    value: () => ({
+      matches: true,
+      media: "(prefers-reduced-motion: reduce)",
+      onchange: null,
+      addEventListener() {},
+      removeEventListener() {},
+      addListener() {},
+      removeListener() {},
+      dispatchEvent: () => false,
+    }),
+  });
+  return dom;
+}
+
+function installBridgeApp(methods: Record<string, unknown>) {
+  (window as unknown as { go: { main: { App: Record<string, unknown> } } }).go = {
+    main: {
+      App: {
+        Commands: async () => [],
+        Models: async () => [],
+        ModelsForTab: async () => [],
+        ...methods,
+      },
+    },
+  };
+}
+
+async function renderComposer(props: Partial<Parameters<typeof Composer>[0]> = {}) {
+  const rootEl = document.getElementById("root");
+  if (!rootEl) throw new Error("missing root");
+  const root = createRoot(rootEl);
+  let currentProps: Parameters<typeof Composer>[0] = {
+    running: false,
+    collaborationMode: "normal",
+    toolApprovalMode: "ask" as ToolApprovalMode,
+    tokenMode: "full" as TokenMode,
+    goal: "",
+    cwd: "/repo",
+    modelLabel: "DeepSeek-R1",
+    imageInputEnabled: true,
+    tabId: "single-surface-tab",
+    sessionKey: "session:project:/repo:topic-a:session-a",
+    onSend: () => {},
+    onCancel: () => undefined,
+    onCycleMode: () => {},
+    onSetMode: () => {},
+    onSetCollaborationMode: (_mode: CollaborationMode) => {},
+    onSetToolApprovalMode: () => {},
+    onToggleYoloApprovalMode: () => {},
+    onClearGoal: () => {},
+    onSwitchModel: () => {},
+    onSetEffort: () => {},
+    onSetTokenMode: () => {},
+    ready: true,
+    ...props,
+  };
+  const paint = async (nextProps: Partial<Parameters<typeof Composer>[0]> = {}) => {
+    currentProps = { ...currentProps, ...nextProps };
+    await act(async () => {
+      root.render(
+        <LocaleProvider>
+          <ToastProvider>
+            <Composer {...currentProps} />
+          </ToastProvider>
+        </LocaleProvider>,
+      );
+      await flushTimers();
+    });
+  };
+  await paint();
+  return { root, rerender: paint };
+}
+
+function textarea(): HTMLTextAreaElement {
+  const node = document.querySelector("textarea") as HTMLTextAreaElement | null;
+  if (!node) throw new Error("composer textarea did not render");
+  return node;
+}
+
+function sendButton(): HTMLButtonElement {
+  const node = document.querySelector(".composer__btn--send") as HTMLButtonElement | null;
+  if (!node) throw new Error("send button did not render");
+  return node;
+}
+
+function contextItemCount(): number {
+  return document.querySelectorAll(".composer-context__item").length;
+}
+
+function toastText(): string {
+  const items = Array.from(document.querySelectorAll(".toast__text"));
+  return (items.at(-1)?.textContent ?? "").trim();
+}
+
+function imagePasteEvent(file: File): Event {
+  const event = new Event("paste", { bubbles: true, cancelable: true });
+  Object.defineProperty(event, "clipboardData", {
+    configurable: true,
+    value: {
+      files: [file],
+      items: [],
+      types: [file.type],
+      getData: () => "",
+    },
+  });
+  return event;
+}
+
+console.log("\ncomposer image capability");
+
+{
+  const dom = installDom();
+  let saveCalls = 0;
+  installBridgeApp({
+    SavePastedImage: async () => {
+      saveCalls += 1;
+      return ".reasonix/attachments/mock.png";
+    },
+    AttachmentDataURL: async () => "data:image/png;base64,iVBORw0KGgo=",
+  });
+  const { root } = await renderComposer({ imageInputEnabled: false });
+  const file = new File(["img"], "photo.png", { type: "image/png", lastModified: 1 });
+
+  await act(async () => {
+    textarea().dispatchEvent(imagePasteEvent(file));
+    await flushTimers();
+    await flushTimers();
+  });
+  await waitFor(() => contextItemCount() === 1);
+
+  eq(saveCalls, 1, "text-only model stores pasted image attachments as tool-readable refs");
+  eq(contextItemCount(), 1, "text-only model keeps the pasted image attachment in the draft");
+  eq(toastText(), "", "text-only image attach does not warn before send");
+  eq(document.querySelector(".composer__prompt") === null, true, "image attach warning does not render inside the composer layout");
+
+  await act(async () => {
+    root.unmount();
+  });
+  dom.window.close();
+}
+
+{
+  const dom = installDom();
+  const sent: Array<{ display: string; submit?: string }> = [];
+  installBridgeApp({
+    SavePastedImage: async () => ".reasonix/attachments/mock.png",
+    AttachmentDataURL: async () => "data:image/png;base64,iVBORw0KGgo=",
+  });
+  const { root, rerender } = await renderComposer({
+    imageInputEnabled: true,
+    onSend: (display, submit) => sent.push({ display, submit }),
+  });
+  const file = new File(["img"], "photo.png", { type: "image/png", lastModified: 1 });
+
+  await act(async () => {
+    textarea().dispatchEvent(imagePasteEvent(file));
+    await flushTimers();
+    await flushTimers();
+  });
+  await waitFor(() => contextItemCount() === 1);
+  eq(contextItemCount(), 1, "vision-capable model keeps the pasted image attachment");
+
+  await rerender({ imageInputEnabled: false, insertRequest: { id: 1, text: "describe this image", mode: "insert" } });
+  eq(toastText(), "", "model switch alone does not show a warning toast");
+  await act(async () => {
+    sendButton().click();
+    await flushTimers();
+  });
+
+  eq(sent.length, 1, "switching to a text-only model still sends the image ref for tool use");
+  ok(toastText().includes("will not receive images directly"), "text-only send warns about direct image input without blocking");
+  eq(document.querySelector(".composer__prompt") === null, true, "image-input warning does not render inside the composer layout");
+  ok(sent[0]?.submit?.includes("@.reasonix/attachments/mock.png") === true, "submitted text retains the local image attachment ref");
+
+  await act(async () => {
+    root.unmount();
+  });
+  dom.window.close();
+}
+
+console.log(`\n${passed} passed, ${failed} failed, ${passed + failed} total`);
+if (failed > 0) process.exit(1);

desktop/frontend/src/__tests__/composer-profile.test.ts

@@ -7,10 +7,19 @@ import {
   hydrateComposerProfileFromMeta,
   hydrateComposerProfilesFromTabs,
   patchComposerProfile,
+  pruneUserPlanModeIntents,
+  resolvePlanRestoreTabId,
+  shouldRestoreUserPlanMode,
+  shouldRestoreUserPlanModeForProfile,
+  updateUserPlanModeIntent,
   type ComposerProfilesByTab,
+  type UserPlanModeIntents,
 } from "../lib/composerProfile";
 import type { Meta, TabMeta } from "../lib/types";
 
+type LooseTabMeta = Omit<TabMeta, "toolApprovalMode"> & { toolApprovalMode?: TabMeta["toolApprovalMode"] | "" };
+type LooseMeta = Omit<Meta, "toolApprovalMode"> & { toolApprovalMode?: Meta["toolApprovalMode"] | "" };
+
 let passed = 0;
 let failed = 0;
 
@@ -24,7 +33,7 @@ function eq(a: unknown, b: unknown, label: string) {
   }
 }
 
-function tab(overrides: Partial<TabMeta> = {}): TabMeta {
+function tab(overrides: Partial<LooseTabMeta> = {}): TabMeta {
   return {
     id: "tab-1",
     scope: "project",
@@ -44,10 +53,10 @@ function tab(overrides: Partial<TabMeta> = {}): TabMeta {
     active: true,
     cwd: "/repo",
     ...overrides,
-  };
+  } as TabMeta;
 }
 
-function meta(overrides: Partial<Meta> = {}): Meta {
+function meta(overrides: Partial<LooseMeta> = {}): Meta {
   return {
     label: "DeepSeek-R1",
     ready: true,
@@ -61,7 +70,7 @@ function meta(overrides: Partial<Meta> = {}): Meta {
     goal: "",
     goalStatus: "stopped",
     ...overrides,
-  };
+  } as Meta;
 }
 
 console.log("\ncomposer profile");
@@ -138,5 +147,59 @@ console.log("\ncomposer profile");
   eq(Boolean(profiles["tab-2"]), false, "tab hydration removes profiles for closed tabs");
 }
 
+{
+  let profiles: ComposerProfilesByTab = {};
+  profiles = hydrateComposerProfilesFromTabs(profiles, [tab({ toolApprovalMode: "auto" })]);
+  profiles = hydrateComposerProfilesFromTabs(profiles, [tab({ toolApprovalMode: "" })]);
+
+  eq(profiles["tab-1"].toolApprovalMode, "auto", "blank tab payload does not demote explicit auto approval mode to ask");
+
+  profiles = hydrateComposerProfileFromMeta(profiles, "tab-1", meta({ toolApprovalMode: "" }));
+  eq(profiles["tab-1"].toolApprovalMode, "auto", "blank meta payload does not demote explicit auto approval mode to ask");
+}
+
+{
+  let intents: UserPlanModeIntents = {};
+  intents = updateUserPlanModeIntent(intents, "tab-1", true);
+  intents = updateUserPlanModeIntent(intents, "tab-2", false);
+
+  eq(shouldRestoreUserPlanMode(intents, "tab-1"), true, "manual plan intent restores only the tab that enabled it");
+  eq(shouldRestoreUserPlanMode(intents, "tab-2"), false, "normal tabs do not inherit another tab's plan intent");
+
+  intents = updateUserPlanModeIntent(intents, "tab-1", false);
+  eq(shouldRestoreUserPlanMode(intents, "tab-1"), false, "manual normal mode clears plan restore intent");
+}
+
+{
+  let intents: UserPlanModeIntents = {};
+  intents = updateUserPlanModeIntent(intents, "tab-1", true);
+  intents = updateUserPlanModeIntent(intents, "tab-2", true);
+  intents = pruneUserPlanModeIntents(intents, ["tab-2"]);
+
+  eq(shouldRestoreUserPlanMode(intents, "tab-1"), false, "closed tabs lose plan restore intent");
+  eq(shouldRestoreUserPlanMode(intents, "tab-2"), true, "open tabs keep plan restore intent");
+}
+
+{
+  eq(resolvePlanRestoreTabId("finished-tab", "active-tab"), "finished-tab", "turn_done plan restore uses the event tab when present");
+  eq(resolvePlanRestoreTabId(undefined, "active-tab"), "active-tab", "turn_done plan restore falls back to the active tab for legacy events");
+}
+
+{
+  let intents: UserPlanModeIntents = {};
+  intents = updateUserPlanModeIntent(intents, "tab-1", true);
+
+  eq(
+    shouldRestoreUserPlanModeForProfile(intents, "tab-1", { goal: "research task" }),
+    false,
+    "active goals block remembered plan restoration",
+  );
+  eq(
+    shouldRestoreUserPlanModeForProfile(intents, "tab-1", { goal: "" }),
+    true,
+    "empty goals still allow remembered plan restoration",
+  );
+}
+
 console.log(`\n${passed} passed, ${failed} failed, ${passed + failed} total`);
 if (failed > 0) process.exit(1);

desktop/frontend/src/__tests__/composer-session-draft.test.tsx

@@ -0,0 +1,311 @@
+// Run: tsx src/__tests__/composer-session-draft.test.tsx
+
+import { JSDOM } from "jsdom";
+import React from "react";
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { Composer } from "../components/Composer";
+import { composerDraftKeyForTab } from "../lib/composerDraftKey";
+import { LocaleProvider } from "../lib/i18n";
+import { ToastProvider } from "../lib/toast";
+import type { CollaborationMode, TokenMode, ToolApprovalMode } from "../lib/types";
+
+let passed = 0;
+let failed = 0;
+
+function ok(value: boolean, label: string) {
+  if (value) {
+    process.stdout.write(`  PASS  ${label}\n`);
+    passed += 1;
+  } else {
+    process.stdout.write(`  FAIL  ${label}\n`);
+    failed += 1;
+  }
+}
+
+function eq(actual: unknown, expected: unknown, label: string) {
+  if (actual === expected) ok(true, label);
+  else ok(false, `${label}: expected ${JSON.stringify(expected)}, got ${JSON.stringify(actual)}`);
+}
+
+function flushTimers(): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, 0));
+}
+
+function deferred<T>() {
+  let resolve!: (value: T) => void;
+  const promise = new Promise<T>((next) => {
+    resolve = next;
+  });
+  return { promise, resolve };
+}
+
+class TestResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+
+function installDom() {
+  const dom = new JSDOM("<!doctype html><html><body><div id=\"root\"></div></body></html>", {
+    pretendToBeVisual: true,
+    url: "http://localhost/",
+  });
+  (globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+  globalThis.window = dom.window as unknown as Window & typeof globalThis;
+  globalThis.document = dom.window.document;
+  Object.defineProperty(globalThis, "navigator", { configurable: true, value: dom.window.navigator });
+  globalThis.Node = dom.window.Node;
+  globalThis.HTMLElement = dom.window.HTMLElement;
+  globalThis.HTMLTextAreaElement = dom.window.HTMLTextAreaElement;
+  globalThis.Event = dom.window.Event;
+  globalThis.CustomEvent = dom.window.CustomEvent;
+  globalThis.KeyboardEvent = dom.window.KeyboardEvent;
+  globalThis.InputEvent = dom.window.InputEvent;
+  globalThis.MouseEvent = dom.window.MouseEvent;
+  globalThis.File = dom.window.File;
+  globalThis.FileReader = dom.window.FileReader;
+  globalThis.PointerEvent = dom.window.MouseEvent as unknown as typeof PointerEvent;
+  globalThis.MutationObserver = dom.window.MutationObserver;
+  globalThis.localStorage = dom.window.localStorage;
+  globalThis.requestAnimationFrame = dom.window.requestAnimationFrame.bind(dom.window);
+  globalThis.cancelAnimationFrame = dom.window.cancelAnimationFrame.bind(dom.window);
+  globalThis.ResizeObserver = TestResizeObserver;
+  Object.defineProperty(dom.window.HTMLElement.prototype, "attachEvent", { configurable: true, value: () => {} });
+  Object.defineProperty(dom.window.HTMLElement.prototype, "detachEvent", { configurable: true, value: () => {} });
+  Object.defineProperty(window, "matchMedia", {
+    configurable: true,
+    value: () => ({
+      matches: true,
+      media: "(prefers-reduced-motion: reduce)",
+      onchange: null,
+      addEventListener() {},
+      removeEventListener() {},
+      addListener() {},
+      removeListener() {},
+      dispatchEvent: () => false,
+    }),
+  });
+  return dom;
+}
+
+function installBridgeApp(methods: Record<string, unknown>) {
+  (window as unknown as { go: { main: { App: Record<string, unknown> } } }).go = {
+    main: {
+      App: {
+        Commands: async () => [],
+        Models: async () => [],
+        ModelsForTab: async () => [],
+        ...methods,
+      },
+    },
+  };
+}
+
+async function renderComposer(props: Partial<Parameters<typeof Composer>[0]> = {}) {
+  const rootEl = document.getElementById("root");
+  if (!rootEl) throw new Error("missing root");
+  const root = createRoot(rootEl);
+  let currentProps: Parameters<typeof Composer>[0] = {
+    running: false,
+    collaborationMode: "normal",
+    toolApprovalMode: "ask" as ToolApprovalMode,
+    tokenMode: "full" as TokenMode,
+    goal: "",
+    cwd: "/repo",
+    modelLabel: "DeepSeek-R1",
+    tabId: "single-surface-tab",
+    sessionKey: "session:project:/repo:topic-a:session-a",
+    onSend: () => {},
+    onCancel: () => undefined,
+    onCycleMode: () => {},
+    onSetMode: () => {},
+    onSetCollaborationMode: (_mode: CollaborationMode) => {},
+    onSetToolApprovalMode: () => {},
+    onToggleYoloApprovalMode: () => {},
+    onClearGoal: () => {},
+    onSwitchModel: () => {},
+    onSetEffort: () => {},
+    onSetTokenMode: () => {},
+    ready: true,
+    ...props,
+  };
+  const paint = async (nextProps: Partial<Parameters<typeof Composer>[0]> = {}) => {
+    currentProps = { ...currentProps, ...nextProps };
+    await act(async () => {
+      root.render(
+        <LocaleProvider>
+          <ToastProvider>
+            <Composer {...currentProps} />
+          </ToastProvider>
+        </LocaleProvider>,
+      );
+      await flushTimers();
+    });
+  };
+  await paint();
+  return { root, rerender: paint };
+}
+
+function textarea(): HTMLTextAreaElement {
+  const node = document.querySelector("textarea") as HTMLTextAreaElement | null;
+  if (!node) throw new Error("composer textarea did not render");
+  return node;
+}
+
+function sendButton(): HTMLButtonElement {
+  const node = document.querySelector(".composer__btn--send") as HTMLButtonElement | null;
+  if (!node) throw new Error("composer send button did not render");
+  return node;
+}
+
+function contextItemCount(): number {
+  return document.querySelectorAll(".composer-context__item").length;
+}
+
+function textPasteEvent(text: string): Event {
+  const event = new Event("paste", { bubbles: true, cancelable: true });
+  Object.defineProperty(event, "clipboardData", {
+    configurable: true,
+    value: {
+      files: [],
+      items: [],
+      types: ["text/plain"],
+      getData: (kind: string) => (kind === "text" || kind === "text/plain" ? text : ""),
+    },
+  });
+  return event;
+}
+
+console.log("\ncomposer session draft");
+
+{
+  const withoutPath = composerDraftKeyForTab({
+    id: "tab-a",
+    scope: "project",
+    workspaceRoot: "/repo",
+    topicId: "topic-a",
+    sessionPath: "",
+  }, "tab-a");
+  const withPath = composerDraftKeyForTab({
+    id: "tab-a",
+    scope: "project",
+    workspaceRoot: "/repo",
+    topicId: "topic-a",
+    sessionPath: "/repo/.reasonix/sessions/topic-a.jsonl",
+  }, "tab-a");
+  eq(withPath, withoutPath, "topic draft key stays stable when session path appears");
+}
+
+{
+  const dom = installDom();
+  const { root, rerender } = await renderComposer();
+
+  await rerender({ insertRequest: { id: 1, text: "draft for A", mode: "replace" } });
+  await rerender({ insertRequest: { id: 2, text: "@/repo/src/app.ts", mode: "insert" } });
+  eq(textarea().value, "draft for A", "session A text is visible before switching");
+  eq(contextItemCount(), 1, "session A workspace ref is visible before switching");
+
+  await rerender({ sessionKey: "session:project:/repo:topic-b:session-b" });
+  eq(textarea().value, "", "session B does not inherit session A text");
+  eq(contextItemCount(), 0, "session B does not inherit session A context refs");
+
+  await rerender({ insertRequest: { id: 3, text: "draft for B", mode: "replace" } });
+  eq(textarea().value, "draft for B", "session B keeps its own text draft");
+
+  await rerender({ sessionKey: "session:project:/repo:topic-a:session-a" });
+  eq(textarea().value, "draft for A", "session A text is restored when switching back");
+  eq(contextItemCount(), 1, "session A context refs are restored when switching back");
+
+  await rerender({ sessionKey: "session:project:/repo:topic-b:session-b" });
+  eq(textarea().value, "draft for B", "session B text is restored independently");
+  eq(contextItemCount(), 0, "session B context refs stay isolated");
+
+  await act(async () => {
+    root.unmount();
+  });
+  dom.window.close();
+}
+
+{
+  const dom = installDom();
+  const sent: Array<{ display: string; submit?: string }> = [];
+  const { root } = await renderComposer({
+    onSend: (display, submit) => {
+      sent.push({ display, submit });
+    },
+  });
+  const rawPaste = "error: failed to compile\r\nat loader.ts:10\r\nat run.ts:22";
+  const normalizedPaste = "error: failed to compile\nat loader.ts:10\nat run.ts:22";
+  const event = textPasteEvent(rawPaste);
+
+  await act(async () => {
+    const input = textarea();
+    input.selectionStart = input.selectionEnd = 0;
+    input.dispatchEvent(event);
+    await flushTimers();
+  });
+
+  eq(event.defaultPrevented, true, "short text paste is handled by React state");
+  eq(textarea().value, normalizedPaste, "short multiline paste is visible in the composer");
+
+  await act(async () => {
+    sendButton().click();
+    await flushTimers();
+  });
+
+  eq(sent.length, 1, "short multiline paste submits once");
+  eq(sent[0]?.display, normalizedPaste, "short multiline paste is preserved in display text");
+  eq(sent[0]?.submit, normalizedPaste, "short multiline paste is preserved in submit text");
+
+  await act(async () => {
+    root.unmount();
+  });
+  dom.window.close();
+}
+
+{
+  const dom = installDom();
+  const saveStarted = deferred<void>();
+  const savePastedFile = deferred<string>();
+  installBridgeApp({
+    SavePastedFile: async () => {
+      saveStarted.resolve();
+      return savePastedFile.promise;
+    },
+  });
+  const { root, rerender } = await renderComposer();
+  const file = new File(["draft attachment"], "draft.txt", { type: "text/plain", lastModified: 1 });
+  const event = new Event("paste", { bubbles: true, cancelable: true });
+  Object.defineProperty(event, "clipboardData", {
+    configurable: true,
+    value: {
+      files: [file],
+      items: [],
+      types: [],
+      getData: () => "",
+    },
+  });
+
+  await act(async () => {
+    textarea().dispatchEvent(event);
+    await saveStarted.promise;
+  });
+  await rerender({ sessionKey: "session:project:/repo:topic-b:session-b" });
+  await act(async () => {
+    savePastedFile.resolve("/tmp/reasonix/draft.txt");
+    await flushTimers();
+  });
+  eq(contextItemCount(), 0, "async attachment does not land in the switched-to session");
+
+  await rerender({ sessionKey: "session:project:/repo:topic-a:session-a" });
+  eq(contextItemCount(), 1, "async attachment returns to the source session draft");
+
+  await act(async () => {
+    root.unmount();
+  });
+  dom.window.close();
+}
+
+console.log(`\n${passed} passed, ${failed} failed, ${passed + failed} total`);
+if (failed > 0) process.exit(1);

desktop/frontend/src/__tests__/context-panel-breakdown.test.ts

@@ -1,6 +1,6 @@
 // Run: tsx src/__tests__/context-panel-breakdown.test.ts
 
-import { contextBreakdown, contextCostDisplay, formatCacheHitRate } from "../components/ContextPanel";
+import { cacheHitTone, contextBreakdown, contextCostDisplay, contextSourceRows, contextWindowStatus, formatCacheHitRate, formatMetricTokens } from "../components/ContextPanel";
 import { currencySymbol, formatMoney, formatMoneyLocalized } from "../lib/money";
 
 let passed = 0;
@@ -49,7 +49,24 @@ eq(
   42_124,
   "legend values sum to used context tokens",
 );
-eq(Math.round(mock.otherPct), 33, "donut endpoint follows used/window percent");
+eq(Math.round(mock.otherPct), 33, "usage endpoint follows used/window percent");
+
+const issue5283 = contextBreakdown(6888, 1_000_000, 6840, 48, 48);
+eq(
+  {
+    promptTokens: issue5283.promptTokens,
+    completionTokens: issue5283.completionTokens,
+    reasoningTokens: issue5283.reasoningTokens,
+    otherTokens: issue5283.otherTokens,
+  },
+  {
+    promptTokens: 6840,
+    completionTokens: 0,
+    reasoningTokens: 48,
+    otherTokens: 0,
+  },
+  "prompt tokens are not scaled down when used context includes completion tokens",
+);
 
 const oversized = contextBreakdown(61_000, 1_000_000, 1_622_277, 12_049, 3_217);
 eq(
@@ -73,9 +90,16 @@ eq(
     reasoningPct: 0,
     otherPct: 0,
   },
-  "unknown context window keeps donut segments empty",
+  "unknown context window keeps usage segments empty",
 );
 
+console.log("\ncontext window status");
+
+eq(contextWindowStatus(33, 80), { tone: "good", key: "context.windowStatusHealthy" }, "low usage stays healthy");
+eq(contextWindowStatus(72, 80), { tone: "notice", key: "context.windowStatusWatch" }, "usage near compact threshold warns early");
+eq(contextWindowStatus(80, 80), { tone: "warn", key: "context.windowStatusPastCompact" }, "compact threshold reached takes warning tone");
+eq(contextWindowStatus(91, 80), { tone: "warn", key: "context.windowStatusNearLimit" }, "near hard limit overrides compact status");
+
 console.log("\ncontext panel cost");
 
 const infoCost = contextCostDisplay({
@@ -101,6 +125,121 @@ console.log("\ncontext panel cache rate");
 eq(formatCacheHitRate(99_950, 50), "99.95%", "cache hit rate preserves two decimal places");
 eq(formatCacheHitRate(0, 10_000), "0.00%", "cache hit rate shows zero when usage data exists");
 eq(formatCacheHitRate(0, 0), "-", "cache hit rate stays empty before usage data exists");
+eq(cacheHitTone(8700, 1300), "good", "healthy cache hit rate uses positive tone");
+eq(cacheHitTone(6000, 4000), "notice", "mid cache hit rate uses notice tone");
+eq(cacheHitTone(5999, 4001), "warn", "low cache hit rate uses warning tone");
+eq(cacheHitTone(0, 0), undefined, "missing cache data stays uncolored");
+
+console.log("\ncontext panel source rows");
+
+const sourceRows = contextSourceRows({
+  usedTokens: 0,
+  windowTokens: 0,
+  promptTokens: 0,
+  completionTokens: 0,
+  totalTokens: 0,
+  reasoningTokens: 0,
+  cacheHitTokens: 0,
+  cacheMissTokens: 0,
+  sessionCacheHitTokens: 0,
+  sessionCacheMissTokens: 0,
+  sessionCompletionTokens: 0,
+  readFiles: [],
+  changedFiles: [],
+  sources: {
+    planner: {
+      promptTokens: 200,
+      completionTokens: 20,
+      totalTokens: 220,
+      reasoningTokens: 0,
+      cacheHitTokens: 0,
+      cacheMissTokens: 0,
+      requestCount: 1,
+    },
+    executor: {
+      promptTokens: 1000,
+      completionTokens: 120,
+      totalTokens: 1120,
+      reasoningTokens: 0,
+      cacheHitTokens: 700,
+      cacheMissTokens: 300,
+      requestCount: 2,
+      sessionCost: 0.42,
+      sessionCurrency: "¥",
+    },
+  },
+}, "¥");
+
+eq(sourceRows.map((row) => row.source), ["executor", "planner"], "source rows keep executor before planner");
+eq(
+  {
+    input: sourceRows[0].promptTokens,
+    output: sourceRows[0].completionTokens,
+    hit: sourceRows[0].cacheHitTokens,
+    miss: sourceRows[0].cacheMissTokens,
+    requests: sourceRows[0].requests,
+  },
+  { input: 1000, output: 120, hit: 700, miss: 300, requests: 2 },
+  "executor source row exposes input, output, cache hit, cache miss, and request count",
+);
+eq(sourceRows[1].requests, 1, "planner source row remains visible without cache metadata");
+eq(sourceRows[1].cacheHitTokens + sourceRows[1].cacheMissTokens, 0, "planner source preserves absent cache metadata as empty");
+
+const executorOnlyRows = contextSourceRows({
+  usedTokens: 0,
+  windowTokens: 0,
+  promptTokens: 0,
+  completionTokens: 0,
+  totalTokens: 0,
+  reasoningTokens: 0,
+  cacheHitTokens: 0,
+  cacheMissTokens: 0,
+  sessionCacheHitTokens: 0,
+  sessionCacheMissTokens: 0,
+  sessionCompletionTokens: 0,
+  readFiles: [],
+  changedFiles: [],
+  sources: {
+    planner: {
+      promptTokens: 0,
+      completionTokens: 0,
+      totalTokens: 0,
+      reasoningTokens: 0,
+      cacheHitTokens: 0,
+      cacheMissTokens: 0,
+      requestCount: 0,
+    },
+    executor: {
+      promptTokens: 4000,
+      completionTokens: 800,
+      totalTokens: 4800,
+      reasoningTokens: 0,
+      cacheHitTokens: 2500,
+      cacheMissTokens: 500,
+      requestCount: 3,
+    },
+    subagent: {
+      promptTokens: 0,
+      completionTokens: 0,
+      totalTokens: 0,
+      reasoningTokens: 0,
+      cacheHitTokens: 0,
+      cacheMissTokens: 0,
+      requestCount: 0,
+    },
+  },
+}, "¥");
+eq(executorOnlyRows.map((row) => row.source), ["executor"], "source rows omit unused planner and subagent entries");
+
+console.log("\ncontext panel metric token labels");
+
+const exactMetric = formatMetricTokens(999_999, "en");
+eq(exactMetric.display, "999,999", "sub-million metric tokens keep exact comma formatting");
+eq(exactMetric.exact, "999,999", "sub-million exact metric title matches the display");
+
+const largeMetric = formatMetricTokens(123_456_789, "en");
+eq(largeMetric.display, "123,456,789", "large metric tokens keep exact comma formatting");
+eq(largeMetric.exact, "123,456,789", "large metric exact title matches the display");
 
 console.log(`\n${passed} passed, ${failed} failed, ${passed + failed} total`);
 if (failed > 0) process.exit(1);

desktop/frontend/src/__tests__/crash-reporting.test.ts

@@ -4,6 +4,7 @@ import {
   buildCrashPayload,
   buildPerformancePayload,
   formatPerformanceContext,
+  globalCrashReportReason,
   normalizeCrashError,
   parseReportedPerf,
   performanceLabelForReason,
@@ -80,6 +81,25 @@ eq(
   false,
   "checks ErrorEvent.error when ErrorEvent.message is a wrapper",
 );
+eq(
+  globalCrashReportReason({
+    defaultPrevented: false,
+    message: "Script error.",
+    filename: "wails://wails/assets/index-abc123.js",
+    lineno: 42,
+    colno: 7,
+  }),
+  "Script error.\nfilename=wails://wails/assets/index-abc123.js lineno=42 colno=7",
+  "adds script location to opaque window.error messages",
+);
+eq(
+  globalCrashReportReason({
+    defaultPrevented: false,
+    message: "Script error.",
+  }),
+  "Script error.",
+  "keeps opaque script errors bare when WebView provides no location",
+);
 
 const perf: PerformanceSnapshot = {
   reason: "event loop lag 1300ms",

desktop/frontend/src/__tests__/heartbeat-next-run.test.ts

@@ -0,0 +1,91 @@
+// Run: tsx src/__tests__/heartbeat-next-run.test.ts
+
+import { heartbeatBuildCycleInterval, heartbeatNextRunAt } from "../custom/features/heartbeat/HeartbeatPanel";
+
+let passed = 0;
+let failed = 0;
+
+function eq(a: unknown, b: unknown, label: string) {
+  if (a === b) {
+    process.stdout.write(`  PASS  ${label}\n`);
+    passed += 1;
+  } else {
+    process.stdout.write(`  FAIL  ${label}: expected ${JSON.stringify(b)}, got ${JSON.stringify(a)}\n`);
+    failed += 1;
+  }
+}
+
+function localMs(year: number, month: number, day: number, hour: number, minute: number): number {
+  return new Date(year, month - 1, day, hour, minute, 0, 0).getTime();
+}
+
+console.log("\nheartbeat next run");
+
+eq(
+  heartbeatNextRunAt(
+    { interval: "30m", lastRunAt: localMs(2026, 6, 18, 16, 30) },
+    localMs(2026, 6, 18, 17, 20),
+  ),
+  localMs(2026, 6, 18, 17, 0),
+  "plain interval stays due after elapsed",
+);
+
+eq(
+  heartbeatNextRunAt(
+    { interval: "30m", lastRunAt: localMs(2026, 6, 18, 16, 30), timeWindowStart: "09:00", timeWindowEnd: "17:00" },
+    localMs(2026, 6, 18, 17, 20),
+  ),
+  localMs(2026, 6, 19, 9, 0),
+  "time window defers elapsed interval to next opening",
+);
+
+eq(
+  heartbeatNextRunAt(
+    { interval: "30m", lastRunAt: localMs(2026, 6, 18, 16, 0), timeWindowStart: "09:00", timeWindowEnd: "17:00" },
+    localMs(2026, 6, 18, 16, 10),
+  ),
+  localMs(2026, 6, 18, 16, 30),
+  "time window keeps next run inside the open window",
+);
+
+eq(
+  heartbeatNextRunAt(
+    { interval: "30m", lastRunAt: localMs(2026, 6, 18, 21, 50), timeWindowStart: "22:00", timeWindowEnd: "06:00" },
+    localMs(2026, 6, 18, 22, 10),
+  ),
+  localMs(2026, 6, 18, 22, 20),
+  "cross-midnight window keeps due time in the open window",
+);
+
+eq(
+  heartbeatNextRunAt(
+    { interval: "30m", lastRunAt: localMs(2026, 6, 18, 11, 30), timeWindowStart: "22:00", timeWindowEnd: "06:00" },
+    localMs(2026, 6, 18, 12, 10),
+  ),
+  localMs(2026, 6, 18, 22, 0),
+  "cross-midnight window waits for today's opening from midday",
+);
+
+eq(
+  heartbeatNextRunAt(
+    { interval: "24h|daily@20:00", lastRunAt: localMs(2026, 6, 18, 20, 0), timeWindowStart: "09:00", timeWindowEnd: "17:00" },
+    localMs(2026, 6, 19, 19, 0),
+  ),
+  localMs(2026, 6, 19, 20, 0),
+  "cycle next run ignores stale interval time windows",
+);
+
+eq(
+  heartbeatBuildCycleInterval("daily", [], "09:00"),
+  "24h|weekly:mon@09:00",
+  "empty daily day selection does not save as every day",
+);
+
+eq(
+  heartbeatBuildCycleInterval("weekly", [], "09:00"),
+  "168h|weekly:mon@09:00",
+  "weekly default uses one weekday",
+);
+
+console.log(`\n${passed} passed, ${failed} failed, ${passed + failed} total`);
+if (failed > 0) process.exit(1);

desktop/frontend/src/__tests__/history-tool-status.test.ts

@@ -29,6 +29,25 @@ const userTimeItems = historyMessagesToItems([
 eq(userTimeItems[0]?.kind === "user" && userTimeItems[0].createdAt, undefined, "history users without createdAt keep no timestamp");
 eq(userTimeItems[1]?.kind === "user" && userTimeItems[1].createdAt, 1_718_000_000_000, "history users preserve createdAt when present");
 
+const checkpointTurnItems = historyMessagesToItems([
+  { role: "user", content: "first", checkpointTurn: 0 },
+  { role: "assistant", content: "ok" },
+  { role: "user", content: "second", checkpointTurn: 3 },
+] as HistoryMessage[], "c").items.filter((item) => item.kind === "user");
+eq(checkpointTurnItems[0]?.kind === "user" && checkpointTurnItems[0].checkpointTurn, 0, "history users preserve checkpoint turn zero");
+eq(checkpointTurnItems[1]?.kind === "user" && checkpointTurnItems[1].checkpointTurn, 3, "history users preserve non-contiguous backend checkpoint turns");
+
+const citedAssistant = historyMessagesToItems([
+  {
+    role: "assistant",
+    content: "done",
+    memoryCitations: [{ id: "mem-1", source: "MEMORY.md", lineStart: 116, lineEnd: 123, note: "workflow" }],
+  },
+] as HistoryMessage[], "m").items.filter((item) => item.kind === "assistant");
+eq(citedAssistant[0]?.kind === "assistant" && citedAssistant[0].memoryCitations?.length, 1, "assistant history preserves memory citations");
+eq(citedAssistant[0]?.kind === "assistant" && citedAssistant[0].memoryCitations?.[0]?.source, "MEMORY.md", "assistant memory citation source is preserved");
+eq(citedAssistant[0]?.kind === "assistant" && citedAssistant[0].memoryCitations?.[0]?.lineEnd, 123, "assistant memory citation line range is preserved");
+
 const lowercaseError = toolItems([
   {
     role: "assistant",

desktop/frontend/src/__tests__/keyboard-shortcuts.test.ts

@@ -1,5 +1,7 @@
 // Run: tsx src/__tests__/keyboard-shortcuts.test.ts
 
+import { JSDOM } from "jsdom";
+
 import {
   defaultShortcutCombo,
   formatShortcutCombo,
@@ -9,6 +11,7 @@ import {
   shortcutConflict,
   type ShortcutPlatform,
 } from "../lib/keyboardShortcuts";
+import { topicShortcutIndexFromEvent, topicShortcutLabel } from "../lib/topicShortcuts";
 
 let passed = 0;
 let failed = 0;
@@ -23,13 +26,31 @@ function eq(a: unknown, b: unknown, label: string) {
   }
 }
 
-function event(key: string, modifiers: { ctrlKey?: boolean; metaKey?: boolean } = {}) {
+function event(key: string, modifiers: { ctrlKey?: boolean; metaKey?: boolean; altKey?: boolean; shiftKey?: boolean; defaultPrevented?: boolean } = {}) {
   return {
     key,
     ctrlKey: modifiers.ctrlKey ?? false,
     metaKey: modifiers.metaKey ?? false,
-    altKey: false,
-    shiftKey: false,
+    altKey: modifiers.altKey ?? false,
+    shiftKey: modifiers.shiftKey ?? false,
+    defaultPrevented: modifiers.defaultPrevented ?? false,
+    target: null,
+  };
+}
+
+function eventWithTarget(
+  key: string,
+  target: EventTarget | null,
+  modifiers: { ctrlKey?: boolean; metaKey?: boolean; altKey?: boolean; shiftKey?: boolean; defaultPrevented?: boolean } = {},
+) {
+  return {
+    key,
+    ctrlKey: modifiers.ctrlKey ?? false,
+    metaKey: modifiers.metaKey ?? false,
+    altKey: modifiers.altKey ?? false,
+    shiftKey: modifiers.shiftKey ?? false,
+    defaultPrevented: modifiers.defaultPrevented ?? false,
+    target,
   };
 }
 
@@ -44,7 +65,7 @@ eq(isCloseTabShortcut(event("w", { ctrlKey: true }), "linux"), true, "Ctrl+W clo
 
 for (const platform of ["darwin", "windows", "linux"] satisfies ShortcutPlatform[]) {
   eq(isCloseTabShortcut(event("k", { ctrlKey: true, metaKey: true }), platform), false, `${platform} ignores non-W keys`);
-eq(isCloseTabShortcut(event("w"), platform), false, `${platform} requires the platform modifier`);
+  eq(isCloseTabShortcut(event("w"), platform), false, `${platform} requires the platform modifier`);
 }
 
 eq(matchesShortcut(event("k", { metaKey: true }), "commandPalette.open", "darwin"), true, "Cmd+K opens the palette on macOS");
@@ -56,6 +77,25 @@ eq(JSON.stringify(formatShortcutComboParts(defaultShortcutCombo("settings.open",
 eq(formatShortcutCombo(defaultShortcutCombo("settings.open", "windows"), "windows"), "Ctrl+,", "formats Windows settings shortcut");
 eq(JSON.stringify(formatShortcutComboParts(defaultShortcutCombo("settings.open", "windows"), "windows")), JSON.stringify(["Ctrl", ","]), "splits Windows settings shortcut for display");
 eq(shortcutConflict("settings.open", defaultShortcutCombo("commandPalette.open", "darwin"), "darwin")?.action, "commandPalette.open", "detects shortcut conflicts");
+eq(topicShortcutIndexFromEvent(event("1", { metaKey: true }), "darwin"), 0, "Cmd+1 maps to the first topic shortcut on macOS");
+eq(topicShortcutIndexFromEvent(event("1", { ctrlKey: true }), "darwin"), null, "Ctrl+1 is not a topic shortcut on macOS");
+eq(topicShortcutIndexFromEvent(event("9", { ctrlKey: true }), "windows"), 8, "Ctrl+9 maps to the ninth topic shortcut on Windows");
+eq(topicShortcutIndexFromEvent(event("9", { metaKey: true }), "windows"), null, "Meta+9 is not a topic shortcut on Windows");
+eq(topicShortcutIndexFromEvent(event("1", { ctrlKey: true, shiftKey: true }), "linux"), null, "topic shortcuts reject extra modifiers");
+eq(topicShortcutIndexFromEvent(event("0", { metaKey: true }), "darwin"), null, "Cmd+0 is not a topic shortcut");
+eq(topicShortcutIndexFromEvent(event("1", { metaKey: true, defaultPrevented: true }), "darwin"), null, "topic shortcuts yield to already-handled custom shortcuts");
+{
+  const dom = new JSDOM("<!doctype html><html><body><input /><textarea></textarea></body></html>");
+  const previousHTMLElement = globalThis.HTMLElement;
+  globalThis.HTMLElement = dom.window.HTMLElement;
+  const input = dom.window.document.querySelector("input");
+  const textarea = dom.window.document.querySelector("textarea");
+  eq(topicShortcutIndexFromEvent(eventWithTarget("1", input, { metaKey: true }), "darwin"), 0, "Cmd+1 still works when an input has focus");
+  eq(topicShortcutIndexFromEvent(eventWithTarget("9", textarea, { ctrlKey: true }), "windows"), 8, "Ctrl+9 still works when a textarea has focus");
+  globalThis.HTMLElement = previousHTMLElement;
+}
+eq(topicShortcutLabel(1, "darwin"), "⌘1", "topic badge uses the macOS command glyph");
+eq(topicShortcutLabel(1, "windows"), "Ctrl+1", "topic badge uses the Windows control modifier");
 
 console.log(`\n${passed} passed, ${failed} failed, ${passed + failed} total`);
 if (failed > 0) process.exit(1);

desktop/frontend/src/__tests__/math-golden.test.ts

@@ -133,6 +133,17 @@ check("$\\frac{a}{b}$", () => isLikelyInlineMath("\\frac{a}{b}") === true);
 check("$f(x)$", () => isLikelyInlineMath("f(x)") === true);
 check("$x+1$", () => isLikelyInlineMath("x+1") === true);
 
+console.log("\nisLikelyInlineMath — classifier gaps from PR #4543");
+check("$\\tfrac12$", () => isLikelyInlineMath("\\tfrac12") === true);
+check("$\\sqrt2$", () => isLikelyInlineMath("\\sqrt2") === true);
+check("$SO(3,1)$", () => isLikelyInlineMath("SO(3,1)") === true);
+check("$SU(2)$", () => isLikelyInlineMath("SU(2)") === true);
+check("$GL(n)$", () => isLikelyInlineMath("GL(n)") === true);
+check("$K = -iJ$", () => isLikelyInlineMath("K = -iJ") === true);
+check("$p = +\\alpha$", () => isLikelyInlineMath("p = +\\alpha") === true);
+check("$+$", () => isLikelyInlineMath("+") === true);
+check("$=$", () => isLikelyInlineMath("=") === true);
+
 console.log("\nisLikelyInlineMath — currency/link (NOT math)");
 check("$5", () => isLikelyInlineMath("5") === false);
 check("$10", () => isLikelyInlineMath("10") === false);
@@ -153,6 +164,15 @@ check("uppercase $I$ → math (math name in non-English prose)", () => isLikelyI
 check("uppercase $A$ → math", () => isLikelyInlineMath("A") === true);
 check("uppercase $V$ → math", () => isLikelyInlineMath("V") === true);
 
+console.log("\nisLikelyInlineMath — primed letters and bracketed labels");
+check("$S'$ → math (primed letter)", () => isLikelyInlineMath("S'") === true);
+check("$y''$ → math (double prime)", () => isLikelyInlineMath("y''") === true);
+check("$f'(x)$ → math (primed function)", () => isLikelyInlineMath("f'(x)") === true);
+check("$\\psi'$ → math (Greek with prime)", () => isLikelyInlineMath("\\psi'") === true);
+check("$[56]$ → math (irrep label)", () => isLikelyInlineMath("[56]") === true);
+check("$[56,0^+]$ → math", () => isLikelyInlineMath("[56,0^+]") === true);
+check("$[\\mathbf{56}]$ → math", () => isLikelyInlineMath("[\\mathbf{56}]") === true);
+
 console.log("\nisLikelyInlineMath — minimal LaTeX patterns (regression)");
 // LLMs frequently emit minimal LaTeX in math contexts that the older
 // classifier rejected as currency / word tokens. These tests pin down the
@@ -170,6 +190,8 @@ check("comma-separated $A, B$ → math (ordered pair)", () => isLikelyInlineMath
 check("comma-separated $1, 2, 3$ → math (sequence)", () => isLikelyInlineMath("1, 2, 3") === true);
 check("comma-separated $\\alpha, \\beta$ → math (Greek pair)", () => isLikelyInlineMath("\\alpha, \\beta") === true);
 check("parens-wrapped $(A, B)$ inner → math", () => isLikelyInlineMath("(A, B)") === true);
+check("cycle notation $(12)$ → math", () => isLikelyInlineMath("(12)") === true);
+check("cycle notation $(12)(34)$ → math", () => isLikelyInlineMath("(12)(34)") === true);
 check("$S$ (set name) → math", () => isLikelyInlineMath("S") === true);
 check("$S$ with surrounding prose (regression)", () => {
   return normalizeMath("$S$ 非空\n$S$ 有上界") === "$S$ 非空\n$S$ 有上界";
@@ -217,7 +239,7 @@ check("\\|x\\| renders as double bars", () => {
 
 console.log("\nnormalizeMath — LLM delimiter conversion");
 eq(normalizeMath("\\(x^2\\)"), "$x^2$", "\\(…\\) → $…$");
-eq(normalizeMath("\\[E=mc^2\\]"), "$$E=mc^2$$", "\\[…\\] → $$…$$");
+eq(normalizeMath("\\[E=mc^2\\]"), "$$\nE=mc^2\n$$", "\\[…\\] → $$…$$");
 eq(normalizeMath("\\\\[4pt]"), "\\\\[4pt]", "\\\\[ line-break spacing protected");
 
 console.log("\nnormalizeMath — \\slashed conversion (regression)");
@@ -235,19 +257,17 @@ console.log("\nnormalizeMath — inline $$ glued to prose (regression)");
 // line before any $$ preceded by a letter/closing bracket/etc.
 check("inline $$ after prose", () => {
   const out = normalizeMath("decomposes as$$\n\\mathbf{6}.$$");
-  return /^decomposes as\n\n\$\$/.test(out) && out.includes("\\mathbf{6}");
+  return /^decomposes as\n\$\$/.test(out) && out.includes("\\mathbf{6}");
 });
 check("inline $$ after closing bracket", () => {
   const out = normalizeMath("(octet)$$ \\mathbf{56}.$$");
-  return out.startsWith("(octet)\n\n$$");
+  return out.startsWith("(octet)\n$$");
 });
 check("inline $$ after closing brace (\\end{...}$$)", () => {
-  // A model that writes `\end{array}$$` or `\frac{a}{b}$$` on one line
-  // has the same micromark-fence problem as the comma case. The
-  // closing brace is the most common end-of-content marker in LaTeX
-  // math, so the repair-regex character class includes it.
+  // A display equation ending with }$$ must be extracted as a unit.
+  // The closing $$ must not be split off, or the equation body is emptied.
   const out = normalizeMath("$$\\begin{pmatrix}a&b\\\\c&d\\end{pmatrix}$$");
-  return out.includes("\\end{pmatrix},\n\n$$") || out.includes("\\end{pmatrix}\n\n$$");
+  return out.includes("\\end{pmatrix},\n$$") || out.includes("\\end{pmatrix}\n$$");
 });
 check("inline $$ after comma on same line as content", () => {
   // User-reported (2026-06-12, soft-pion chat): the model wrote the
@@ -261,25 +281,31 @@ check("inline $$ after comma on same line as content", () => {
   // as math, which then fails to render with "Can't use function '$'
   // in math mode" on the stray $ inside the equation body.
   const out = normalizeMath("…D(q^2),$$\nwith $P=…$");
-  return out.includes("D(q^2),\n\n$$");
+  return out.includes("D(q^2),\n$$");
 });
 check("well-formed $$ already on own line is normalised consistently", () => {
   // Whether the model writes `decomposes as$$\n\mathbf{6}.$$` or
-  // `decomposes as\n\n$$\n\mathbf{6}.$$`, both must produce the same
-  // remark-math-parseable form: opening $$ on its own line, body, blank
-  // line, closing $$ on its own line.
+  // `decomposes as\n\n$$\n\mathbf{6}.$$`, both must produce valid
+  // remark-math-parseable form: opening $$ on its own line, body, closing
+  // $$ on its own line.
   const inline = normalizeMath("decomposes as$$\n\\mathbf{6}.$$");
   const block = normalizeMath("decomposes as\n\n$$\n\\mathbf{6}.$$");
-  const expected = "decomposes as\n\n$$\n\\mathbf{6}.\n\n$$";
-  return inline === expected && block === expected;
+  const valid = (s: string) => /\n\$\$\n/.test(s) && /\n\$\$/.test(s) && s.includes("\\mathbf{6}");
+  return valid(inline) && valid(block);
 });
 check("\\[…\\] → $$…$$ still works (no spurious blank line)", () => {
-  return normalizeMath("\\[E=mc^2\\]") === "$$E=mc^2$$";
+  return normalizeMath("\\[E=mc^2\\]") === "$$\nE=mc^2\n$$";
 });
 check("digit before $$ is NOT a prose boundary (preserves c^2$$)", () => {
   const out = normalizeMath("c^2$$ x $$");
   return out === "c^2$$ x $$";
 });
+eq(normalizeMath("intro$$x+1"), "intro\n$$\nx+1", "orphan opening $$ is not duplicated");
+eq(
+  normalizeMath("first$$a$$ middle $$b$$ end"),
+  "first\n$$\na\n$$\n middle \n$$\nb\n$$\n end",
+  "multiple display blocks on one line are all normalised",
+);
 
 console.log("\nnormalizeMath — non-math dollar filtering");
 eq(normalizeMath("costs $1$ today"), "costs $1$ today", "$1$ not math");
@@ -409,6 +435,10 @@ const e2e: Array<[string, string]> = [
   ["$\\frac{1}{\\sqrt{2}}\\|uud\\rangle$", "ket in fraction with \\|"],
   ["$\\|x\\|$", "norm \\|x\\| → double bar (regression)"],
   ["$\\langle\\psi\\|$", "bra closer \\| → single bar (regression)"],
+  ["$S'$", "primed letter S'"],
+  ["$f'(x)$", "primed function call"],
+  ["$[56]$", "bracketed irrep label"],
+  ["$[56,0^+]$", "bracketed irrep label with charge"],
 ];
 for (const [src, label] of e2e) {
   check(`${label}: ${src}`, () => katexOf(normalizeMath(src), false));
@@ -458,6 +488,19 @@ check("real inline math $x^2$ still renders as KaTeX", () => {
   const html = renderHtml("the value $x^2$ here");
   return html.includes("katex");
 });
+check("blockquote display math does not swallow following inline math", () => {
+  const html = renderHtml("> theorem\n> $$E=mc^2$$\n> after $x$");
+  return html.includes("katex-display")
+    && !html.includes("katex-error")
+    && html.includes(">x</mi>");
+});
+check("multi-line blockquote display math strips quote markers from the formula", () => {
+  const html = renderHtml("> theorem\n> $$\n> E=mc^2\n> $$\n> after $x$");
+  return html.includes("katex-display")
+    && !html.includes("katex-error")
+    && !html.includes("&gt; E")
+    && html.includes(">x</mi>");
+});
 
 // ── Young diagram / tableau macros ─────────────────────────────────────────────
 // `\yng` (ytableau) and `\young` (youngtab) are common in physics —
@@ -486,7 +529,7 @@ check("\\yng inside \\(...\\) does not get double-wrapped", () => {
 });
 check("\\yng inside \\[...\\] stays display math without triple dollars", () => {
   const out = normalizeMath("\\[\\yng(2,1)\\]");
-  return out.startsWith("$$\\begin{array}{l}")
+  return out.startsWith("$$\n\\begin{array}{l}")
     && out.endsWith("$$")
     && !out.includes("$$$");
 });
@@ -505,7 +548,7 @@ check("digit-starting inline math with \\young does not get nested wrappers", ()
 });
 check("display math ending in digit closes before following bare \\yng", () => {
   const out = normalizeMath("$$x^2$$ \\yng(1)");
-  return out === "$$x^2$$ $\\begin{array}{l}\\square\\end{array}$";
+  return out === "$$\nx^2\n$$\n $\\begin{array}{l}\\square\\end{array}$";
 });
 check("bare \\yng after inline math is separated from adjacent dollars", () => {
   const out = normalizeMath("$x$\\yng(1)");

desktop/frontend/src/__tests__/memory-citation-visibility.test.ts

@@ -0,0 +1,39 @@
+// Run: tsx src/__tests__/memory-citation-visibility.test.ts
+
+import { visibleTranscriptMemoryCitations } from "../lib/memoryCitationVisibility";
+import type { MemoryCitation } from "../lib/types";
+
+let passed = 0;
+let failed = 0;
+
+function eq(a: unknown, b: unknown, label: string) {
+  if (a === b) {
+    process.stdout.write(`  PASS  ${label}\n`);
+    passed += 1;
+  } else {
+    process.stdout.write(`  FAIL  ${label}: expected ${JSON.stringify(b)}, got ${JSON.stringify(a)}\n`);
+    failed += 1;
+  }
+}
+
+console.log("\nmemory citation visibility");
+
+const compilerCitations: MemoryCitation[] = [
+  { kind: "compiler_reference", source: "Memory v5", note: "evidence: bash succeeded" },
+  { kind: "constraint", source: "Memory v5", note: "must_use: verify source" },
+  { kind: "risk_note", source: "Memory v5", note: "risk: avoid failed strategy" },
+];
+eq(visibleTranscriptMemoryCitations(compilerCitations).length, 0, "compiler-only citations stay out of the transcript");
+
+const regularCitation: MemoryCitation = { id: "mem-1", source: "MEMORY.md", lineStart: 12, note: "workflow" };
+eq(visibleTranscriptMemoryCitations([regularCitation])[0]?.source, "MEMORY.md", "regular memory citations remain visible");
+
+const mixed = visibleTranscriptMemoryCitations([...compilerCitations, regularCitation]);
+eq(mixed.length, 1, "mixed citations keep only user-facing memory references");
+eq(mixed[0]?.id, "mem-1", "mixed citations preserve the regular memory citation");
+
+const compilerWithOtherSource: MemoryCitation = { kind: "compiler_reference", source: "MEMORY.md", note: "explicit memory file reference" };
+eq(visibleTranscriptMemoryCitations([compilerWithOtherSource]).length, 1, "non-Memory-v5 compiler kind is not hidden by kind alone");
+
+console.log(`\n${passed} passed, ${failed} failed`);
+if (failed > 0) process.exit(1);

desktop/frontend/src/__tests__/memory-compiler-display.test.ts

@@ -0,0 +1,44 @@
+// Run: tsx src/__tests__/memory-compiler-display.test.ts
+//
+// Display-boundary safety net for #5361: a corrupted/accreted Memory v5 contract
+// from the pre-fix goal loop (#5342) must never render as raw JSON "乱码".
+
+import { stripMemoryCompilerExecution } from "../lib/memoryCompilerDisplay";
+
+let passed = 0;
+let failed = 0;
+
+function ok(cond: boolean, label: string) {
+  if (cond) {
+    process.stdout.write(`  PASS  ${label}\n`);
+    passed += 1;
+  } else {
+    process.stdout.write(`  FAIL  ${label}\n`);
+    failed += 1;
+  }
+}
+
+const contract = (sourceEvent: string) =>
+  "<memory-compiler-execution>\n" +
+  JSON.stringify({ type: "memory_v5_execution_contract", planner_ir: { version: 5, source_event: sourceEvent } }) +
+  "\n</memory-compiler-execution>";
+
+console.log("\nmemory compiler display strip");
+
+ok(stripMemoryCompilerExecution("fix the login bug") === "fix the login bug", "leaves plain user text untouched");
+
+const complete = stripMemoryCompilerExecution(contract("do the thing"));
+ok(!complete.includes("memory-compiler-execution"), "removes a complete contract block");
+
+const withText = stripMemoryCompilerExecution("hello\n" + contract("hello"));
+ok(withText.includes("hello") && !withText.includes("<memory-compiler-execution>"), "removes a complete block after user text");
+
+const partial = 'keep this\n<memory-compiler-execution>\n{"planner_ir":{"source_event":"keep this",' + "x".repeat(40);
+const cut = stripMemoryCompilerExecution(partial);
+ok(
+  cut.includes("keep this") && !cut.includes("<memory-compiler-execution>") && !cut.includes("planner_ir"),
+  "cuts a dangling/truncated block instead of leaking raw JSON",
+);
+
+console.log(`\n${passed} passed, ${failed} failed`);
+if (failed > 0) process.exit(1);

desktop/frontend/src/__tests__/mermaid-rendering.test.tsx

@@ -0,0 +1,248 @@
+// Run: tsx src/__tests__/mermaid-rendering.test.tsx
+
+import { readFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { JSDOM } from "jsdom";
+import React from "react";
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import MermaidDiagram from "../components/MermaidDiagram";
+import {
+  __setMermaidPanZoomFactoryForTest,
+  __setMermaidRenderAdapterForTest,
+  isOpenableMermaidHref,
+  isSafeMermaidHref,
+  sanitizeMermaidSvg,
+} from "../components/MermaidDiagram";
+import { LocaleProvider } from "../lib/i18n";
+
+const testDir = dirname(fileURLToPath(import.meta.url));
+const styles = readFileSync(resolve(testDir, "../styles.css"), "utf8");
+const markdownRendererSource = readFileSync(resolve(testDir, "../components/MarkdownRenderer.tsx"), "utf8");
+
+let passed = 0;
+let failed = 0;
+
+function ok(value: unknown, label: string) {
+  if (value) {
+    process.stdout.write(`  PASS  ${label}\n`);
+    passed += 1;
+  } else {
+    process.stdout.write(`  FAIL  ${label}\n`);
+    failed += 1;
+  }
+}
+
+function eq(actual: unknown, expected: unknown, label: string) {
+  if (actual === expected) ok(true, label);
+  else ok(false, `${label}: expected ${JSON.stringify(expected)}, got ${JSON.stringify(actual)}`);
+}
+
+function flushTimers(): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, 0));
+}
+
+async function waitFor(label: string, predicate: () => boolean) {
+  for (let i = 0; i < 30; i += 1) {
+    if (predicate()) return;
+    await act(async () => {
+      await flushTimers();
+    });
+  }
+  ok(false, label);
+}
+
+function installDom() {
+  const dom = new JSDOM("<!doctype html><html><head></head><body><div id=\"root\"></div></body></html>", {
+    pretendToBeVisual: true,
+    url: "http://localhost/",
+  });
+
+  (globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+  globalThis.window = dom.window as unknown as Window & typeof globalThis;
+  globalThis.document = dom.window.document;
+  Object.defineProperty(globalThis, "navigator", { configurable: true, value: dom.window.navigator });
+  globalThis.Node = dom.window.Node;
+  globalThis.Element = dom.window.Element;
+  globalThis.HTMLElement = dom.window.HTMLElement;
+  globalThis.SVGElement = dom.window.SVGElement;
+  globalThis.Event = dom.window.Event;
+  globalThis.KeyboardEvent = dom.window.KeyboardEvent;
+  globalThis.MouseEvent = dom.window.MouseEvent;
+  globalThis.DOMParser = dom.window.DOMParser;
+  globalThis.XMLSerializer = dom.window.XMLSerializer;
+  globalThis.MutationObserver = dom.window.MutationObserver;
+  globalThis.localStorage = dom.window.localStorage;
+  globalThis.requestAnimationFrame = dom.window.requestAnimationFrame.bind(dom.window);
+  globalThis.cancelAnimationFrame = dom.window.cancelAnimationFrame.bind(dom.window);
+  Object.defineProperty(dom.window, "matchMedia", {
+    configurable: true,
+    value: (query: string) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addEventListener: () => undefined,
+      removeEventListener: () => undefined,
+      addListener: () => undefined,
+      removeListener: () => undefined,
+      dispatchEvent: () => false,
+    }),
+  });
+  globalThis.matchMedia = dom.window.matchMedia;
+
+  const style = document.createElement("style");
+  style.textContent = styles;
+  document.head.appendChild(style);
+
+  return dom;
+}
+
+function parseSvg(svg: string): Document {
+  return new DOMParser().parseFromString(svg, "image/svg+xml");
+}
+
+console.log("\nmermaid rendering");
+
+{
+  ok(
+    markdownRendererSource.includes('lazy(() => import("./MermaidDiagram"))'),
+    "MarkdownRenderer lazy-loads the Mermaid renderer",
+  );
+  ok(
+    markdownRendererSource.includes('lang === "mermaid"'),
+    "MarkdownRenderer routes mermaid fenced code blocks to the Mermaid renderer",
+  );
+}
+
+{
+  const dom = installDom();
+  const dirtySvg = `
+    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="steal()">
+      <script>alert(1)</script>
+      <a id="safe" href="https://example.com/diagram"><text>safe</text></a>
+      <a id="unsafe" href="javascript:alert(1)"><text>bad</text></a>
+      <a id="unsafe-xlink" xlink:href="data:text/html,boom"><text>bad</text></a>
+      <g onclick="steal()"><text>node</text></g>
+    </svg>`;
+  const sanitized = sanitizeMermaidSvg(dirtySvg);
+  const doc = parseSvg(sanitized);
+
+  ok(!doc.documentElement.hasAttribute("onload"), "sanitizer strips event attributes from the root SVG");
+  ok(!doc.querySelector("script"), "sanitizer removes script nodes");
+  ok(doc.querySelector("#safe")?.getAttribute("href") === "https://example.com/diagram", "sanitizer keeps safe external links");
+  ok(!doc.querySelector("#unsafe")?.hasAttribute("href"), "sanitizer removes javascript links");
+  ok(!doc.querySelector("#unsafe-xlink")?.hasAttribute("xlink:href"), "sanitizer removes data xlink links");
+  ok(!doc.querySelector("g")?.hasAttribute("onclick"), "sanitizer strips event attributes from child nodes");
+  ok(isSafeMermaidHref("https://example.com/a"), "https Mermaid links are safe");
+  ok(isSafeMermaidHref("mailto:[email protected]"), "mailto Mermaid links are safe");
+  ok(!isSafeMermaidHref("file:///tmp/private"), "file Mermaid links are not safe");
+  ok(!isOpenableMermaidHref("#internal"), "fragment Mermaid links are not opened externally");
+
+  dom.window.close();
+}
+
+{
+  const dom = installDom();
+  const openedUrls: string[] = [];
+  dom.window.open = ((url: string | URL | undefined) => {
+    if (url) openedUrls.push(String(url));
+    return null;
+  }) as Window["open"];
+
+  const renders: Array<{ definition: string; theme: string }> = [];
+  const panZoomCalls: string[] = [];
+
+  __setMermaidRenderAdapterForTest(async (_svgId, definition, theme, signal) => {
+    if (signal.aborted) throw new DOMException("Aborted", "AbortError");
+    renders.push({ definition, theme });
+    return `
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 80" onload="steal()">
+        <script>alert(1)</script>
+        <a id="safe-link" href="https://example.com/diagram"><text>Open</text></a>
+        <a id="unsafe-link" href="vbscript:msgbox(1)"><text>Blocked</text></a>
+        <g class="node"><text>Rendered Mermaid</text></g>
+      </svg>`;
+  });
+
+  __setMermaidPanZoomFactoryForTest(() => ({
+    destroy: () => { panZoomCalls.push("destroy"); },
+    resize: () => { panZoomCalls.push("resize"); },
+    fit: () => { panZoomCalls.push("fit"); },
+    center: () => { panZoomCalls.push("center"); },
+    zoomIn: () => { panZoomCalls.push("zoomIn"); },
+    zoomOut: () => { panZoomCalls.push("zoomOut"); },
+    reset: () => { panZoomCalls.push("reset"); },
+  }));
+
+  const rootEl = document.getElementById("root");
+  if (!rootEl) throw new Error("missing root");
+  const root = createRoot(rootEl);
+
+  await act(async () => {
+    root.render(
+      <LocaleProvider>
+        <div className="chat-pane">
+          <MermaidDiagram definition={"graph TD\nA-->B"} />
+        </div>
+      </LocaleProvider>,
+    );
+    await flushTimers();
+  });
+
+  await waitFor("Mermaid preview SVG rendered in DOM", () => Boolean(document.querySelector(".mermaid-diagram__preview svg")));
+  ok(document.querySelector(".mermaid-diagram__toolbar"), "Mermaid renderer shows its toolbar");
+  eq(renders.length, 1, "Mermaid renderer calls the render adapter once");
+  eq(renders[0]?.definition, "graph TD\nA-->B", "Mermaid renderer passes the diagram definition to Mermaid");
+  ok(document.querySelector("#safe-link"), "safe SVG link remains in the rendered DOM");
+  ok(!document.querySelector("#unsafe-link")?.hasAttribute("href"), "unsafe SVG link href is stripped in the rendered DOM");
+  ok(!document.querySelector(".mermaid-diagram__preview svg")?.hasAttribute("onload"), "rendered SVG root event handler is stripped");
+  ok(!document.querySelector(".mermaid-diagram__preview script"), "rendered SVG script nodes are removed");
+
+  await waitFor("pan zoom instance initialized", () => panZoomCalls.includes("fit") && panZoomCalls.includes("center"));
+
+  const zoomIn = document.querySelector<HTMLButtonElement>('button[aria-label="Zoom in"]');
+  const zoomOut = document.querySelector<HTMLButtonElement>('button[aria-label="Zoom out"]');
+  const reset = document.querySelector<HTMLButtonElement>('button[aria-label="Reset zoom"]');
+  zoomIn?.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true }));
+  zoomOut?.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true }));
+  reset?.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true }));
+  ok(panZoomCalls.includes("zoomIn"), "zoom in button calls the pan zoom instance");
+  ok(panZoomCalls.includes("zoomOut"), "zoom out button calls the pan zoom instance");
+  ok(panZoomCalls.includes("reset"), "reset zoom button calls the pan zoom instance");
+
+  document.querySelector("#safe-link text")?.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true }));
+  eq(openedUrls[0], "https://example.com/diagram", "SVG links open through the external browser bridge");
+  document.querySelector("#unsafe-link text")?.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true }));
+  eq(openedUrls.length, 1, "unsafe SVG links do not open externally");
+
+  await act(async () => {
+    document.querySelector<HTMLButtonElement>('button[aria-label="Show diagram source"]')
+      ?.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true }));
+    await flushTimers();
+  });
+  ok(document.querySelector(".mermaid-diagram__code")?.textContent?.includes("graph TD"), "source tab shows the Mermaid definition");
+
+  await act(async () => {
+    document.querySelector<HTMLButtonElement>('button[aria-label="Open fullscreen"]')
+      ?.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true }));
+    await flushTimers();
+  });
+  ok(document.querySelector(".chat-pane > .mermaid-diagram--fullscreen"), "fullscreen diagram portals into the chat pane");
+
+  await act(async () => {
+    document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
+    await flushTimers();
+  });
+  ok(!document.querySelector(".chat-pane > .mermaid-diagram--fullscreen"), "Escape closes the Mermaid fullscreen portal");
+
+  await act(async () => {
+    root.unmount();
+  });
+  __setMermaidRenderAdapterForTest(null);
+  __setMermaidPanZoomFactoryForTest(undefined);
+  dom.window.close();
+}
+
+console.log(`\n${passed} passed, ${failed} failed, ${passed + failed} total`);
+if (failed > 0) process.exit(1);

desktop/frontend/src/__tests__/new-session-load-race.test.tsx

@@ -3,7 +3,7 @@
 import { JSDOM } from "jsdom";
 import React, { act } from "react";
 import { createRoot } from "react-dom/client";
-import { useController } from "../lib/useController";
+import { initialState, reducer, useController, type Item } from "../lib/useController";
 import type { AppBindings } from "../lib/bridge";
 import type { BalanceInfo, CheckpointMeta, ContextInfo, EffortInfo, HistoryMessage, JobView, Meta, TabMeta } from "../lib/types";
 
@@ -96,6 +96,29 @@ function meta(): Meta {
 
 console.log("\nnew session load race");
 
+const resetSourceItems: Item[] = [{ kind: "user", id: "old-user", text: "old prompt" }];
+const resetPlaceholderItems: Item[] = [{ kind: "user", id: "placeholder-user", text: "placeholder prompt" }];
+const resetState = reducer(
+  {
+    ...initialState,
+    items: resetSourceItems,
+    hydrating: true,
+    hydrateReason: "open-topic",
+    hydratePlaceholderItems: resetPlaceholderItems,
+  },
+  { type: "reset" },
+);
+eq(resetState.items.length, 0, "reset clears real transcript items");
+eq(resetState.hydratePlaceholderItems?.length, 1, "reset preserves hydration placeholder separately");
+
+const emptyHistoryState = reducer(resetState, { type: "history", messages: [] });
+eq(emptyHistoryState.items.length, 0, "empty history keeps the real transcript empty");
+eq(emptyHistoryState.hydrateHistoryLoaded, true, "empty history marks transcript hydration loaded");
+eq(emptyHistoryState.hydratePlaceholderItems?.length ?? 0, 0, "empty history clears hydration placeholder items");
+
+const hydrateDoneState = reducer(emptyHistoryState, { type: "hydrate_done" });
+eq(Boolean(hydrateDoneState.hydrateHistoryLoaded), false, "hydrate_done clears the history-loaded marker");
+
 const dom = new JSDOM("<!doctype html><html><body><div id=\"root\"></div></body></html>", {
   pretendToBeVisual: true,
   url: "http://localhost/",
@@ -137,6 +160,11 @@ window.go = {
       JobsForTab: async () => jobs,
       CheckpointsForTab: async () => checkpoints,
       HistoryForTab: async () => staleHistory.promise,
+      HistoryPageForTab: async () => {
+        const messages = await staleHistory.promise;
+        return { messages, startTurn: 0, endTurn: messages.filter((message) => message.role === "user").length, totalTurns: messages.filter((message) => message.role === "user").length, hasOlder: false };
+      },
+      HistoryCheckpointTurnsForTab: async () => [],
       ReplayPendingPrompts: async () => {},
       NewSession: async () => {
         newSessionCalls += 1;
@@ -181,6 +209,54 @@ eq(controller?.state.items.length, 0, "stale history load cannot repopulate a ne
 await act(async () => {
   root.unmount();
 });
+
+const guardedStartupTabs = deferred<TabMeta[]>();
+let ensureBlankSurfaceCalls = 0;
+window.go.main.App = {
+  ListTabs: async () => guardedStartupTabs.promise,
+  MetaForTab: async () => meta(),
+  ContextUsageForTab: async () => context,
+  EffortForTab: async () => effort,
+  BalanceForTab: async () => balance,
+  JobsForTab: async () => jobs,
+  CheckpointsForTab: async () => checkpoints,
+  HistoryForTab: async () => [],
+  HistoryPageForTab: async () => ({ messages: [], startTurn: 0, endTurn: 0, totalTurns: 0, hasOlder: false }),
+  HistoryCheckpointTurnsForTab: async () => [],
+  ReplayPendingPrompts: async () => {},
+  EnsureBlankSurface: async () => {
+    ensureBlankSurfaceCalls += 1;
+    return tabMeta({ id: "tab-new", topicId: "topic-new", topicTitle: "New session" });
+  },
+} as Partial<AppBindings> as AppBindings;
+
+controller = undefined;
+const guardRoot = createRoot(rootEl);
+
+await act(async () => {
+  guardRoot.render(<Probe />);
+  await flushPromises();
+});
+
+await act(async () => {
+  await controller?.ensureBlankSurface("project", "/repo");
+  await flushPromises();
+});
+
+eq(ensureBlankSurfaceCalls, 1, "EnsureBlankSurface is called once");
+eq(controller?.activeTabId, "tab-new", "blank surface becomes active before startup sync resolves");
+
+await act(async () => {
+  guardedStartupTabs.resolve([tabMeta({ id: "tab-old", topicId: "topic-old", topicTitle: "Old session" })]);
+  await guardedStartupTabs.promise;
+  await flushPromises();
+});
+
+eq(controller?.activeTabId, "tab-new", "guarded startup sync cannot restore an older active tab");
+
+await act(async () => {
+  guardRoot.unmount();
+});
 dom.window.close();
 
 console.log(`\n${passed} passed, ${failed} failed, ${passed + failed} total`);

desktop/frontend/src/__tests__/open-topic-coalescing.test.tsx

@@ -0,0 +1,227 @@
+// Run: tsx src/__tests__/open-topic-coalescing.test.tsx
+
+import { JSDOM } from "jsdom";
+import React, { act, useCallback, useRef } from "react";
+import { createRoot } from "react-dom/client";
+import { enqueueNavigationRequest, enqueueOpenTopicRequest, type PendingOpenTopicRequest } from "../lib/openTopicCoalescing";
+
+let passed = 0;
+let failed = 0;
+
+function ok(value: boolean, label: string) {
+  if (value) {
+    process.stdout.write(`  PASS  ${label}\n`);
+    passed += 1;
+  } else {
+    process.stdout.write(`  FAIL  ${label}\n`);
+    failed += 1;
+  }
+}
+
+function eq(actual: unknown, expected: unknown, label: string) {
+  ok(actual === expected, `${label}${actual === expected ? "" : `: expected ${JSON.stringify(expected)}, got ${JSON.stringify(actual)}`}`);
+}
+
+function flushPromises(): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, 0));
+}
+
+function deferred<T>() {
+  let resolve!: (value: T) => void;
+  let reject!: (reason?: unknown) => void;
+  const promise = new Promise<T>((res, rej) => {
+    resolve = res;
+    reject = rej;
+  });
+  return { promise, resolve, reject };
+}
+
+console.log("\nopen topic coalescing");
+
+const dom = new JSDOM("<!doctype html><html><body><div id=\"root\"></div></body></html>", {
+  pretendToBeVisual: true,
+  url: "http://localhost/",
+});
+(globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+globalThis.window = dom.window as unknown as Window & typeof globalThis;
+globalThis.document = dom.window.document;
+Object.defineProperty(globalThis, "navigator", { configurable: true, value: dom.window.navigator });
+globalThis.Node = dom.window.Node;
+globalThis.HTMLElement = dom.window.HTMLElement;
+globalThis.Event = dom.window.Event;
+globalThis.CustomEvent = dom.window.CustomEvent;
+globalThis.KeyboardEvent = dom.window.KeyboardEvent;
+globalThis.MouseEvent = dom.window.MouseEvent;
+globalThis.localStorage = dom.window.localStorage;
+globalThis.requestAnimationFrame = dom.window.requestAnimationFrame.bind(dom.window);
+globalThis.cancelAnimationFrame = dom.window.cancelAnimationFrame.bind(dom.window);
+
+const gates = new Map<string, ReturnType<typeof deferred<void>>>();
+const calls: string[] = [];
+const updates: string[] = [];
+const toasts: string[] = [];
+let refreshes = 0;
+let openTopic!: (topicId: string) => Promise<void>;
+
+function gateFor(topicId: string) {
+  let gate = gates.get(topicId);
+  if (!gate) {
+    gate = deferred<void>();
+    gates.set(topicId, gate);
+  }
+  return gate;
+}
+
+function resetRecords() {
+  calls.length = 0;
+  updates.length = 0;
+  toasts.length = 0;
+  refreshes = 0;
+}
+
+function Harness() {
+  const seqRef = useRef(0);
+  const runningRef = useRef(false);
+  const pendingRef = useRef<PendingOpenTopicRequest | null>(null);
+  const run = useCallback(async (request: PendingOpenTopicRequest) => {
+    calls.push(request.topicId);
+    try {
+      await gateFor(request.topicId).promise;
+      if (request.topicId.includes("fail")) throw new Error(request.topicId);
+      if (request.seq !== seqRef.current) return;
+      updates.push(request.topicId);
+      refreshes += 1;
+    } catch {
+      if (request.seq !== seqRef.current) return;
+      toasts.push(request.topicId);
+      refreshes += 1;
+    }
+  }, []);
+  openTopic = (topicId: string) => enqueueOpenTopicRequest(
+    { seqRef, runningRef, pendingRef },
+    { scope: "global", workspaceRoot: "", topicId },
+    run,
+  );
+  return null;
+}
+
+const rootEl = document.getElementById("root");
+if (!rootEl) throw new Error("missing root");
+const root = createRoot(rootEl);
+
+await act(async () => {
+  root.render(<Harness />);
+  await flushPromises();
+});
+
+let bResolved = false;
+let cResolved = false;
+let dResolved = false;
+const pA = openTopic("A");
+await act(async () => {
+  await flushPromises();
+});
+const pB = openTopic("B").then(() => { bResolved = true; });
+const pC = openTopic("C").then(() => { cResolved = true; });
+const pD = openTopic("D").then(() => { dResolved = true; });
+await act(async () => {
+  await flushPromises();
+});
+
+eq(calls.join(","), "A", "only the running request starts while newer requests coalesce");
+ok(bResolved && cResolved, "superseded pending requests resolve immediately");
+eq(dResolved, false, "latest pending request waits until it runs");
+
+await act(async () => {
+  gateFor("A").resolve();
+  await pA;
+  await flushPromises();
+});
+eq(calls.join(","), "A,D", "after the running request finishes, only the latest pending request runs");
+eq(updates.join(","), "", "stale running request does not update UI");
+
+await act(async () => {
+  gateFor("D").resolve();
+  await pD;
+  await flushPromises();
+});
+eq(updates.join(","), "D", "latest coalesced request updates UI");
+eq(refreshes, 1, "only the latest successful request refreshes metadata");
+
+await pB;
+await pC;
+
+resetRecords();
+let oldFailRejected = false;
+let newFailRejected = false;
+const pOldFail = openTopic("old-fail").catch(() => { oldFailRejected = true; });
+await act(async () => {
+  await flushPromises();
+});
+const pNewFail = openTopic("new-fail").catch(() => { newFailRejected = true; });
+await act(async () => {
+  await flushPromises();
+  gateFor("old-fail").resolve();
+  await pOldFail;
+  await flushPromises();
+});
+
+eq(calls.join(","), "old-fail,new-fail", "latest pending request starts after an older failing request");
+eq(toasts.join(","), "", "stale failure does not show a toast");
+eq(oldFailRejected, false, "stale failure promise does not reject");
+
+await act(async () => {
+  gateFor("new-fail").resolve();
+  await pNewFail;
+  await flushPromises();
+});
+eq(toasts.join(","), "new-fail", "latest failure shows a toast");
+eq(newFailRejected, false, "latest failure promise does not reject");
+eq(refreshes, 1, "latest failure refreshes metadata once");
+
+await act(async () => {
+  root.unmount();
+});
+dom.window.close();
+
+// Tab-bar switches (App.handleTabChange) route through the same scheduler so
+// rapidly clicking between two running sessions can't run switchTab()
+// concurrently — concurrent switches race the backend SetActiveTab ordering and
+// land events on the wrong session (#5352). This guards serialization (no two
+// run()s overlap) + last-click-wins.
+{
+  const refs = { seqRef: { current: 0 }, runningRef: { current: false }, pendingRef: { current: null as any } };
+  let active = 0;
+  let maxConcurrent = 0;
+  const ran: string[] = [];
+  const gates = new Map<string, ReturnType<typeof deferred<void>>>();
+  const gate = (id: string) => {
+    if (!gates.has(id)) gates.set(id, deferred<void>());
+    return gates.get(id)!;
+  };
+  const switchTab = (req: { tabId: string }) =>
+    enqueueNavigationRequest(refs, { tabId: req.tabId }, async (r) => {
+      active += 1;
+      maxConcurrent = Math.max(maxConcurrent, active);
+      await gate(r.tabId).promise;
+      ran.push(r.tabId);
+      active -= 1;
+    });
+
+  const pA = switchTab({ tabId: "A" }); // starts running
+  const pB = switchTab({ tabId: "B" }); // coalesced away (superseded while A runs)
+  const pC = switchTab({ tabId: "C" }); // latest pending
+  gate("A").resolve();
+  await pA;
+  await flushPromises();
+  gate("C").resolve();
+  await pC;
+  await pB;
+  await flushPromises();
+
+  eq(ran.join(","), "A,C", "tab switches serialize: only the running + latest run, middle coalesces");
+  eq(maxConcurrent, 1, "no two tab switches run concurrently (no backend SetActiveTab race)");
+}
+
+console.log(`\n${passed} passed, ${failed} failed, ${passed + failed} total`);
+if (failed > 0) process.exit(1);

desktop/frontend/src/__tests__/project-tree-runtime.test.ts

@@ -5,6 +5,10 @@ import {
   defaultExpandedProjectTreeKeys,
   activeSessionAncestorKeys,
   projectTreeTopicOpenRequest,
+  projectTreeShouldSuppressOpenForRename,
+  projectTreeReadActivityKey,
+  projectTreeTopicHasUnreadActivity,
+  projectTreeShouldRenderTopicActions,
 } from "../components/ProjectTree";
 import type { ProjectNode } from "../lib/types";
 
@@ -103,6 +107,85 @@ eq(
   "regular project topic still opens by topic",
 );
 
+const completedTopic: ProjectNode = {
+  key: "topic_complete",
+  kind: "topic",
+  label: "Completed",
+  root: "/repo",
+  topicId: "topic-complete",
+  lastActivityAt: 2000,
+};
+const completedTopicKey = projectTreeReadActivityKey(completedTopic) ?? "";
+
+eq(
+  projectTreeTopicHasUnreadActivity(completedTopic, { [completedTopicKey]: 1000 }, "project", "/repo", "other-topic"),
+  true,
+  "completed inactive topic with newer activity shows unread attention",
+);
+
+eq(
+  projectTreeTopicHasUnreadActivity(completedTopic, { [completedTopicKey]: 2000 }, "project", "/repo", "other-topic"),
+  false,
+  "completed topic stops showing unread attention once opened at its latest activity",
+);
+
+eq(
+  projectTreeTopicHasUnreadActivity(completedTopic, { [completedTopicKey]: 1000 }, "project", "/repo", "topic-complete"),
+  false,
+  "active topic does not show unread attention",
+);
+
+eq(
+  projectTreeTopicHasUnreadActivity({ ...completedTopic, status: "streaming", running: true }, { [completedTopicKey]: 1000 }, "project", "/repo", "other-topic"),
+  false,
+  "running topic keeps runtime status instead of completed-unread attention",
+);
+
+eq(
+  projectTreeShouldRenderTopicActions(false, true, false),
+  true,
+  "read workbench topic renders hover actions",
+);
+
+eq(
+  projectTreeShouldRenderTopicActions(false, true, true),
+  false,
+  "unread workbench topic omits hover actions from the keyboard tab order",
+);
+
+eq(
+  projectTreeShouldRenderTopicActions(true, true, false),
+  false,
+  "runtime session rows do not render topic hover actions",
+);
+
+eq(
+  projectTreeShouldSuppressOpenForRename(
+    { rowKey: "topic-a", canRename: true },
+    { rowKey: "topic-a", canRename: true },
+  ),
+  true,
+  "second click on the same renameable topic suppresses open for inline rename",
+);
+
+eq(
+  projectTreeShouldSuppressOpenForRename(
+    { rowKey: "session-a", canRename: false },
+    { rowKey: "session-a", canRename: false },
+  ),
+  false,
+  "runtime session double-click still allows the session row to open",
+);
+
+eq(
+  projectTreeShouldSuppressOpenForRename(
+    { rowKey: "topic-a", canRename: true },
+    { rowKey: "topic-b", canRename: true },
+  ),
+  false,
+  "quickly clicking a different topic still opens the new target",
+);
+
 eq(
   projectTreeFolderDisclosure(false, true),
   {

desktop/frontend/src/__tests__/provider-model-refresh.test.ts

@@ -1,6 +1,7 @@
 // Run: tsx src/__tests__/provider-model-refresh.test.ts
 
 import {
+  apiKeyEnvFromProviderName,
   inferredVisionModels,
   isLikelyChatModel,
   isLikelyVisionModel,
@@ -139,6 +140,21 @@ eq(
   "preserves an explicitly configured key env",
 );
 
+eq(
+  [
+    apiKeyEnvFromProviderName("商汤"),
+    apiKeyEnvFromProviderName("通义千问"),
+  ],
+  ["CUSTOM_d39b9067_API_KEY", "CUSTOM_e995c4c9_API_KEY"],
+  "generates distinct stable key envs for non-ASCII provider names",
+);
+
+eq(
+  providerApiKeyEnvForSave("商汤", "CUSTOM_API_KEY", "sk-test"),
+  "CUSTOM_API_KEY",
+  "preserves an explicitly configured legacy custom key env",
+);
+
 eq(
   [
     providerRequiresKey({ apiKeyEnv: "" }),

desktop/frontend/src/__tests__/resize-drag.test.ts

@@ -0,0 +1,105 @@
+// Run: tsx src/__tests__/resize-drag.test.ts
+
+import { createRafResizeUpdater } from "../lib/resizeDrag";
+
+let passed = 0;
+let failed = 0;
+
+function eq(a: unknown, b: unknown, label: string) {
+  if (a === b) {
+    process.stdout.write(`  PASS  ${label}\n`);
+    passed += 1;
+  } else {
+    process.stdout.write(`  FAIL  ${label}: expected ${JSON.stringify(b)}, got ${JSON.stringify(a)}\n`);
+    failed += 1;
+  }
+}
+
+console.log("\nresizeDrag");
+
+const frames: FrameRequestCallback[] = [];
+const originalRequestAnimationFrame = globalThis.requestAnimationFrame;
+const originalCancelAnimationFrame = globalThis.cancelAnimationFrame;
+globalThis.requestAnimationFrame = ((callback: FrameRequestCallback) => {
+  frames.push(callback);
+  return frames.length;
+}) as typeof requestAnimationFrame;
+globalThis.cancelAnimationFrame = ((id: number) => {
+  frames[id - 1] = () => undefined;
+}) as typeof cancelAnimationFrame;
+
+try {
+  const applied: Array<[string, string]> = [];
+  const attrs: Record<string, string> = {};
+  const updater = createRafResizeUpdater({
+    target: {
+      style: {
+        setProperty(name: string, value: string) {
+          applied.push([name, value]);
+        },
+      },
+    },
+    separator: {
+      setAttribute(name: string, value: string) {
+        attrs[name] = value;
+      },
+    },
+    cssVar: "--pane-width",
+  });
+
+  updater.schedule(101.2);
+  updater.schedule(148.7);
+  eq(applied.length, 0, "live resize waits for animation frame");
+  eq(frames.length, 1, "multiple pointer moves share one animation frame");
+  frames[0](0);
+  eq(applied.length, 1, "one frame applies one live resize");
+  eq(applied[0]?.[0], "--pane-width", "live resize writes the configured CSS variable");
+  eq(applied[0]?.[1], "149px", "live resize applies the latest rounded pixel value");
+  eq(attrs["aria-valuenow"], "149", "live resize keeps separator ARIA in sync");
+
+  frames.length = 0;
+  const flushed: Array<[string, string]> = [];
+  const flushUpdater = createRafResizeUpdater({
+    target: {
+      style: {
+        setProperty(name: string, value: string) {
+          flushed.push([name, value]);
+        },
+      },
+    },
+    cssVar: "--pane-width",
+  });
+  flushUpdater.schedule(600);
+  frames[0](0);
+  flushUpdater.schedule(420);
+  eq(flushed[flushed.length - 1]?.[1], "600px", "pending final resize waits for animation frame before flush");
+  flushUpdater.flush();
+  eq(flushed[flushed.length - 1]?.[1], "420px", "flush applies the final resize before React state commits");
+
+  frames.length = 0;
+  const appliedValues: number[] = [];
+  const callbackUpdater = createRafResizeUpdater({
+    target: {
+      style: {
+        setProperty() {
+          // CSS write is covered above; this block checks the synchronized callback contract.
+        },
+      },
+    },
+    cssVar: "--pane-width",
+    onApply(value) {
+      appliedValues.push(value);
+    },
+  });
+  callbackUpdater.schedule(279.7);
+  callbackUpdater.schedule(300.2);
+  eq(appliedValues.length, 0, "live resize callback waits for animation frame");
+  frames[0](0);
+  eq(appliedValues.join(","), "300", "live resize callback receives the applied rounded value");
+} finally {
+  globalThis.requestAnimationFrame = originalRequestAnimationFrame;
+  globalThis.cancelAnimationFrame = originalCancelAnimationFrame;
+}
+
+console.log(`\n${passed} passed, ${failed} failed, ${passed + failed} total`);
+if (failed > 0) process.exit(1);

desktop/frontend/src/__tests__/send-failed.test.ts

@@ -1,5 +1,8 @@
 // Run: tsx src/__tests__/send-failed.test.ts
 
+import { readFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
 import { initialState, reducer, replayPendingPromptsForActiveTab } from "../lib/useController";
 import type { WireEvent } from "../lib/types";
 
@@ -35,6 +38,41 @@ const confirmed = reducer(sent, { type: "event", e: { kind: "text", text: "hi" }
 eq(confirmed.items.filter((it) => it.kind === "user").length, 1, "first backend event confirms without duplicating");
 eq(confirmed.pendingUser, undefined, "confirmation clears the pending marker");
 
+const memoryStatsEvent = {
+  kind: "memory_compiler_stats",
+  memoryCompiler: {
+    injected: true,
+    usefulIR: true,
+    compiledTokens: 640,
+    irOverheadTokens: 120,
+    memoryReferences: 2,
+    constraints: 1,
+    riskNotes: 0,
+    executionSteps: 3,
+    totalNodes: 18,
+    highSignalNodes: 4,
+    toolResultNodes: 6,
+    decisionNodes: 2,
+    strategyCount: 5,
+    learningCount: 3,
+  },
+} as WireEvent;
+const statsOnly = reducer(sent, { type: "event", e: memoryStatsEvent });
+eq(statsOnly, sent, "memory compiler stats do not confirm or mutate the visible turn");
+const startedThenStats = reducer(reducer(sent, { type: "event", e: { kind: "turn_started" } as WireEvent }), { type: "event", e: memoryStatsEvent });
+eq(startedThenStats.items.length, 2, "memory compiler stats do not add transcript items after turn start");
+const compilerCitationMessage = {
+  kind: "message",
+  memoryCitations: [{ kind: "compiler_reference", source: "Memory v5", note: "evidence: bash succeeded" }],
+} as WireEvent;
+const citationOnlyFinal = reducer(reducer(sent, { type: "event", e: { kind: "turn_started" } as WireEvent }), { type: "event", e: compilerCitationMessage });
+eq(citationOnlyFinal.items.length, 1, "memory compiler citations alone do not leave an empty assistant bubble");
+eq(citationOnlyFinal.items.some((it) => it.kind === "assistant"), false, "memory compiler citations alone stay hidden from the transcript");
+const textThenCitationFinal = reducer(reducer(startedThenStats, { type: "event", e: { kind: "text", text: "done" } as WireEvent }), { type: "event", e: compilerCitationMessage });
+const citedAssistant = textThenCitationFinal.items.find((it) => it.kind === "assistant");
+eq(citedAssistant?.kind === "assistant" && citedAssistant.text, "done", "memory compiler citations preserve existing assistant text");
+eq(citedAssistant?.kind === "assistant" && citedAssistant.memoryCitations?.length, 1, "memory compiler citations attach to real assistant content");
+
 const failedState = reducer(sent, { type: "send_failed", error: "Send failed: bridge unavailable" });
 const failedBubble = failedState.items.find((it) => it.kind === "user");
 eq(failedBubble?.kind === "user" && failedBubble.failed, true, "send_failed marks the bubble failed");
@@ -44,13 +82,67 @@ eq(notice.kind === "notice" && notice.level, "warn", "the notice is a warning");
 eq(failedState.running, false, "send_failed stops the running indicator");
 eq(failedState.pendingUser, undefined, "send_failed clears the pending marker");
 
+const shellSent = reducer({ ...initialState }, { type: "user", text: "!ls", seq: 0 });
+const shellFailed = reducer(shellSent, { type: "send_failed", error: "Command failed: workspace is still starting" });
+const shellNotice = shellFailed.items[shellFailed.items.length - 1];
+eq(shellNotice.kind, "notice", "rejected shell command appends a visible notice");
+eq(shellNotice.kind === "notice" && shellNotice.text.includes("workspace is still starting"), true, "shell rejection notice includes the backend error");
+
 const lateFailure = reducer(confirmed, { type: "send_failed", error: "Send failed: late" });
 eq(lateFailure, confirmed, "send_failed after backend confirmation is a no-op");
 
+const beforeMcpReady = { ...initialState };
+const mcpReady = reducer(beforeMcpReady, { type: "event", e: { kind: "mcp_surface_ready" } as WireEvent });
+eq(mcpReady, beforeMcpReady, "mcp_surface_ready is accepted as a deliberate no-op");
+const pendingMcpReady = reducer(sent, { type: "event", e: { kind: "mcp_surface_ready" } as WireEvent });
+eq(pendingMcpReady, sent, "mcp_surface_ready does not confirm a pending submit");
+const failedAfterMcpReady = reducer(pendingMcpReady, { type: "send_failed", error: "Send failed: bridge unavailable" });
+const failedAfterMcpReadyBubble = failedAfterMcpReady.items.find((it) => it.kind === "user");
+eq(
+  failedAfterMcpReadyBubble?.kind === "user" && failedAfterMcpReadyBubble.failed,
+  true,
+  "send_failed still marks a pending submit after mcp readiness",
+);
+
+const here = dirname(fileURLToPath(import.meta.url));
+const appSource = readFileSync(resolve(here, "../App.tsx"), "utf8");
+const typesSource = readFileSync(resolve(here, "../lib/types.ts"), "utf8");
+const controllerSource = readFileSync(resolve(here, "../lib/useController.ts"), "utf8");
+eq(typesSource.includes('"mcp_surface_ready"'), true, "TypeScript EventKind declares mcp_surface_ready");
+eq(controllerSource.includes('e.kind === "memory_compiler_stats" || e.kind === "mcp_surface_ready"'), true, "reducer handles mcp_surface_ready before optimistic confirmation");
+eq(
+  /state\.approval!\.tool === "exit_plan_mode" && allow\) await applyCollaborationMode\("normal"\);/.test(appSource),
+  true,
+  "plan approval clears the remembered plan restore intent before execution",
+);
+eq(
+  !/exit_plan_mode[\s\S]{0,240}rememberUserIntent:\s*false/.test(appSource),
+  true,
+  "plan approval must not preserve stale plan restore intent",
+);
+eq(
+  !appSource.includes("rememberUserIntent"),
+  true,
+  "collaboration mode changes always reconcile the remembered plan restore intent",
+);
+
 const unsent = reducer(sent, { type: "unsend" });
 eq(unsent.pendingUser, undefined, "unsend clears the pending marker");
 eq(unsent.discardTurn, true, "unsend discards the in-flight turn");
 
+const planApprovalFirst = reducer(
+  { ...initialState },
+  { type: "event", e: { kind: "approval_request", approval: { id: "plan-1", tool: "exit_plan_mode", subject: "Approve plan" } } as WireEvent },
+);
+const planTurnDoneAfter = reducer(planApprovalFirst, { type: "event", e: { kind: "turn_done" } as WireEvent });
+eq(
+  planTurnDoneAfter.approval?.id,
+  "plan-1",
+  "turn_done preserves out-of-order plan approval",
+);
+eq(planTurnDoneAfter.running, true, "preserved plan approval keeps the tab running");
+eq(planTurnDoneAfter.pendingPrompt, true, "preserved plan approval keeps the prompt gate active");
+
 let replayCalls = 0;
 replayPendingPromptsForActiveTab(undefined, () => {
   replayCalls += 1;

desktop/frontend/src/__tests__/session-title-contract.test.ts

@@ -0,0 +1,113 @@
+// Run: tsx src/__tests__/session-title-contract.test.ts
+
+import {
+  historySessionDisplayTitle,
+  paletteSessionDisplayTitle,
+  paletteSessionHint,
+  paletteSessionKeywords,
+} from "../lib/session";
+import type { SessionMeta } from "../lib/types";
+
+let passed = 0;
+let failed = 0;
+
+function eq<T>(actual: T, expected: T, label: string) {
+  if (Object.is(actual, expected)) {
+    process.stdout.write(`  PASS  ${label}\n`);
+    passed += 1;
+  } else {
+    process.stdout.write(`  FAIL  ${label}\n    expected: ${String(expected)}\n    actual:   ${String(actual)}\n`);
+    failed += 1;
+  }
+}
+
+function deepEq<T>(actual: T, expected: T, label: string) {
+  const actualJson = JSON.stringify(actual);
+  const expectedJson = JSON.stringify(expected);
+  if (actualJson === expectedJson) {
+    process.stdout.write(`  PASS  ${label}\n`);
+    passed += 1;
+  } else {
+    process.stdout.write(`  FAIL  ${label}\n    expected: ${expectedJson}\n    actual:   ${actualJson}\n`);
+    failed += 1;
+  }
+}
+
+function session(overrides: Partial<SessionMeta> = {}): SessionMeta {
+  return {
+    path: "/sessions/topic-backed.jsonl",
+    preview: "first saved prompt preview",
+    title: "Renamed saved session",
+    turns: 3,
+    createdAt: 100,
+    lastActivityAt: 200,
+    modTime: 200,
+    current: false,
+    open: false,
+    workspaceRoot: "/work/project-alpha",
+    topicId: "topic-1",
+    topicTitle: "Shared topic",
+    ...overrides,
+  };
+}
+
+console.log("\nsession title contracts");
+
+{
+  const item = session();
+  eq(
+    paletteSessionDisplayTitle(item, "Untitled"),
+    "Shared topic",
+    "Cmd+K displays the topic title for topic-backed sessions",
+  );
+  deepEq(
+    paletteSessionKeywords(item),
+    ["Renamed saved session", "first saved prompt preview"],
+    "Cmd+K still searches the session rename and preview text",
+  );
+  eq(
+    paletteSessionHint(item),
+    "Renamed saved session · /work/project-alpha",
+    "Cmd+K shows the session rename in the hint so hidden search hits are visible",
+  );
+}
+
+{
+  const item = session();
+  eq(
+    historySessionDisplayTitle(item, "Untitled"),
+    "Renamed saved session",
+    "History displays an explicit session rename before the topic title",
+  );
+}
+
+{
+  const item = session({ title: "  " });
+  eq(
+    historySessionDisplayTitle(item, "Untitled"),
+    "Shared topic",
+    "Unrenamed topic-backed history sessions fall back to topic title",
+  );
+  deepEq(
+    paletteSessionKeywords(item),
+    ["first saved prompt preview"],
+    "Blank session titles are not added as Cmd+K keywords",
+  );
+  eq(
+    paletteSessionHint(item),
+    "first saved prompt preview · /work/project-alpha",
+    "Cmd+K falls back to preview text in the hint when there is no custom session title",
+  );
+}
+
+{
+  const item = session({ title: "Shared topic", preview: "first saved prompt preview" });
+  eq(
+    paletteSessionHint(item),
+    "first saved prompt preview · /work/project-alpha",
+    "Cmd+K skips duplicate title hints that repeat the visible topic title",
+  );
+}
+
+console.log(`\n${passed} passed, ${failed} failed`);
+if (failed > 0) process.exit(1);

desktop/frontend/src/__tests__/settings-refresh-snapshot.test.tsx

@@ -4,7 +4,12 @@ import { JSDOM } from "jsdom";
 import React from "react";
 import { act } from "react";
 import { createRoot } from "react-dom/client";
-import { SettingsPanel } from "../components/SettingsPanel";
+import {
+  SettingsPanel,
+  providerBaseURLFromChatURL,
+  providerChatURLPreview,
+  providerEditorEffectiveKind,
+} from "../components/SettingsPanel";
 import { LocaleProvider } from "../lib/i18n";
 import type { AppBindings } from "../lib/bridge";
 import type { SettingsView } from "../lib/types";
@@ -34,6 +39,16 @@ function flushPromises(): Promise<void> {
   return new Promise((resolve) => setTimeout(resolve, 0));
 }
 
+async function waitFor(label: string, predicate: () => boolean) {
+  for (let attempt = 0; attempt < 20; attempt += 1) {
+    await act(async () => {
+      await flushPromises();
+    });
+    if (predicate()) return;
+  }
+  throw new Error(`timed out waiting for ${label}`);
+}
+
 function baseSettings(displayMode: "standard" | "compact" = "standard"): SettingsView {
   return {
     defaultModel: "",
@@ -46,7 +61,7 @@ function baseSettings(displayMode: "standard" | "compact" = "standard"): Setting
     permissions: { mode: "ask", allow: [], ask: [], deny: [] },
     sandbox: { bash: "enforce", network: false, workspaceRoot: "", allowWrite: [], shell: "auto" },
     network: { proxyMode: "auto", proxyUrl: "", noProxy: "", proxy: { type: "socks5", server: "", port: 0, username: "", password: "" } },
-    agent: { temperature: 0, maxSteps: 0, plannerMaxSteps: 12, systemPrompt: "", coldResumePrune: true, reasoningLanguage: "auto" },
+    agent: { temperature: 0, maxSteps: 0, plannerMaxSteps: 0, systemPrompt: "", coldResumePrune: true, reasoningLanguage: "auto" },
     bot: {
       enabled: false,
       model: "",
@@ -67,9 +82,11 @@ function baseSettings(displayMode: "standard" | "compact" = "standard"): Setting
     displayMode,
     statusBarStyle: "text",
     statusBarItems: ["model", "workspace", "git_branch", "cache", "balance"],
+    defaultToolApprovalMode: "ask",
     checkUpdates: true,
     telemetry: true,
     metrics: true,
+    memoryCompilerEnabled: true,
     configPath: "/tmp/reasonix/config.toml",
     providerKinds: [],
     autoApproveTools: false,
@@ -79,6 +96,12 @@ function baseSettings(displayMode: "standard" | "compact" = "standard"): Setting
 
 console.log("\nsettings refresh snapshot");
 
+eq(providerEditorEffectiveKind(true, "anthropic", ["anthropic", "openai"]), "openai", "new custom providers ignore sorted providerKinds and default to OpenAI");
+eq(providerEditorEffectiveKind(false, "anthropic", ["anthropic", "openai"]), "anthropic", "existing providers preserve their stored kind");
+eq(providerChatURLPreview("https://proxy.example.com/v1", "", false), "https://proxy.example.com/v1/chat/completions", "base URL mode previews chat completions URL");
+eq(providerChatURLPreview("", "https://proxy.example.com/custom/chat", true), "https://proxy.example.com/custom/chat", "full URL mode previews configured URL");
+eq(providerBaseURLFromChatURL("https://proxy.example.com/v1/chat/completions"), "https://proxy.example.com/v1", "chat URL derives base URL for model discovery");
+
 const dom = new JSDOM("<!doctype html><html><body><div id=\"root\"></div></body></html>", {
   pretendToBeVisual: true,
   url: "http://localhost/",
@@ -148,6 +171,55 @@ ok(onChangedSettings?.displayMode === "compact", "onChanged receives the post-sa
 await act(async () => {
   root.unmount();
 });
+
+const retryRootEl = document.createElement("div");
+document.body.appendChild(retryRootEl);
+const retryRoot = createRoot(retryRootEl);
+let failingSettingsCalls = 0;
+window.go = {
+  main: {
+    App: {
+      Settings: async () => {
+        failingSettingsCalls += 1;
+        if (failingSettingsCalls === 1) throw new Error("/Users/example/.reasonix/settings.toml: permission denied");
+        return baseSettings("standard");
+      },
+    } as Partial<AppBindings> as AppBindings,
+  },
+};
+
+await act(async () => {
+  retryRoot.render(
+    <LocaleProvider>
+      <SettingsPanel
+        initialTab="general"
+        onClose={() => {}}
+        onChanged={() => {}}
+      />
+    </LocaleProvider>,
+  );
+  await flushPromises();
+});
+await waitFor("settings load failure", () => Boolean(document.querySelector(".banner--error")));
+
+ok(document.body.textContent?.includes("Settings could not be loaded.") === true, "failed initial settings load shows a visible error");
+ok(document.body.textContent?.includes("Loading…") === false, "failed initial settings load stops showing the loading state");
+
+const retryButton = Array.from(document.querySelectorAll("button")).find((button) => button.textContent?.trim() === "Retry") as HTMLButtonElement | undefined;
+if (!retryButton) throw new Error("settings retry button did not render");
+
+await act(async () => {
+  retryButton.click();
+  await flushPromises();
+});
+await waitFor("settings retry success", () => Boolean(Array.from(document.querySelectorAll("button")).find((button) => button.textContent?.trim() === "Compact")));
+
+eq(failingSettingsCalls, 2, "settings retry calls Settings again");
+ok(document.body.textContent?.includes("Settings could not be loaded.") === false, "settings retry clears the load error");
+
+await act(async () => {
+  retryRoot.unmount();
+});
 dom.window.close();
 
 console.log(`\n${passed} passed, ${failed} failed, ${passed + failed} total`);

desktop/frontend/src/__tests__/statusbar-workspace.test.tsx

@@ -25,8 +25,6 @@ function renderStatusBar(props: Partial<Parameters<typeof StatusBar>[0]> = {}):
       <StatusBar
         context={{ used: 0, window: 0, sessionTokens: 0 }}
         running={false}
-        collaborationMode="normal"
-        toolApprovalMode="ask"
         {...props}
       />
     </LocaleProvider>,
@@ -80,5 +78,16 @@ console.log("\nstatus bar workspace");
   ok(html.indexOf("feature/meta") < html.indexOf("workspace/repo"), "workspace items follow configured order");
 }
 
+{
+  const html = renderStatusBar({ items: ["model"] });
+  ok(!html.includes("YOLO"), "status bar renders only configured status items, not mode indicators");
+  ok(!html.includes("后台作业") && !html.includes("Background jobs"), "status bar omits non-configurable job indicators");
+}
+
+{
+  const defaultItems = DEFAULT_STATUS_BAR_ITEMS as readonly string[];
+  ok(!defaultItems.includes("autoresearch"), "autoresearch is not a configurable status bar UI item");
+}
+
 console.log(`\n${passed} passed, ${failed} failed, ${passed + failed} total`);
 if (failed > 0) process.exit(1);

desktop/frontend/src/__tests__/tab-switch-hydration.test.tsx

@@ -0,0 +1,419 @@
+// Run: tsx src/__tests__/tab-switch-hydration.test.tsx
+
+import { JSDOM } from "jsdom";
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import type { AppBindings } from "../lib/bridge";
+import { useController } from "../lib/useController";
+import type { BalanceInfo, CheckpointMeta, ContextInfo, EffortInfo, HistoryMessage, JobView, Meta, TabMeta, WireEvent } from "../lib/types";
+
+let passed = 0;
+let failed = 0;
+
+function ok(value: boolean, label: string) {
+  if (value) {
+    process.stdout.write(`  PASS  ${label}\n`);
+    passed += 1;
+  } else {
+    process.stdout.write(`  FAIL  ${label}\n`);
+    failed += 1;
+  }
+}
+
+function eq(actual: unknown, expected: unknown, label: string) {
+  if (actual === expected) {
+    ok(true, label);
+  } else {
+    ok(false, `${label}: expected ${JSON.stringify(expected)}, got ${JSON.stringify(actual)}`);
+  }
+}
+
+function flushPromises(): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, 0));
+}
+
+function deferred<T>() {
+  let resolve!: (value: T) => void;
+  let reject!: (reason?: unknown) => void;
+  const promise = new Promise<T>((res, rej) => {
+    resolve = res;
+    reject = rej;
+  });
+  return { promise, resolve, reject };
+}
+
+async function waitFor(label: string, predicate: () => boolean) {
+  for (let attempt = 0; attempt < 30; attempt += 1) {
+    await act(async () => {
+      await flushPromises();
+    });
+    if (predicate()) return;
+  }
+  throw new Error(`timed out waiting for ${label}`);
+}
+
+function tabMeta(id: string, overrides: Partial<TabMeta> = {}): TabMeta {
+  const workspaceRoot = `/repo/${id}`;
+  return {
+    id,
+    scope: "project",
+    workspaceRoot,
+    workspaceName: id,
+    workspacePath: workspaceRoot,
+    gitBranch: "main",
+    topicId: `topic-${id}`,
+    topicTitle: id,
+    sessionPath: `${workspaceRoot}/sessions/${id}.jsonl`,
+    label: `model-${id}`,
+    ready: true,
+    running: false,
+    mode: "normal",
+    toolApprovalMode: "ask",
+    tokenMode: "full",
+    active: false,
+    cwd: workspaceRoot,
+    ...overrides,
+  };
+}
+
+function metaFor(tab: TabMeta): Meta {
+  return {
+    label: tab.label,
+    ready: tab.ready,
+    startupErr: tab.startupErr,
+    eventChannel: "agent:event",
+    cwd: tab.cwd || tab.workspaceRoot,
+    workspaceRoot: tab.workspaceRoot,
+    workspaceName: tab.workspaceName,
+    workspacePath: tab.workspacePath,
+    gitBranch: tab.gitBranch,
+    autoApproveTools: false,
+    bypass: false,
+    collaborationMode: tab.collaborationMode ?? "normal",
+    toolApprovalMode: tab.toolApprovalMode ?? "ask",
+    tokenMode: tab.tokenMode ?? "full",
+    goal: "",
+    goalStatus: "stopped",
+  };
+}
+
+function userMessage(content: string): HistoryMessage {
+  return { role: "user", content };
+}
+
+console.log("\ntab switch hydration");
+
+const dom = new JSDOM("<!doctype html><html><body><div id=\"root\"></div></body></html>", {
+  pretendToBeVisual: true,
+  url: "http://localhost/",
+});
+(globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+globalThis.window = dom.window as unknown as Window & typeof globalThis;
+globalThis.document = dom.window.document;
+Object.defineProperty(globalThis, "navigator", { configurable: true, value: dom.window.navigator });
+globalThis.Node = dom.window.Node;
+globalThis.HTMLElement = dom.window.HTMLElement;
+globalThis.Event = dom.window.Event;
+globalThis.CustomEvent = dom.window.CustomEvent;
+globalThis.KeyboardEvent = dom.window.KeyboardEvent;
+globalThis.MouseEvent = dom.window.MouseEvent;
+globalThis.localStorage = dom.window.localStorage;
+globalThis.requestAnimationFrame = dom.window.requestAnimationFrame.bind(dom.window);
+globalThis.cancelAnimationFrame = dom.window.cancelAnimationFrame.bind(dom.window);
+
+const context: ContextInfo = { used: 12, window: 100, sessionTokens: 12 };
+const effort: EffortInfo = { supported: true, current: "auto", default: "auto", levels: ["auto"] };
+const balance: BalanceInfo = { available: false, display: "" };
+const jobs: JobView[] = [];
+const checkpoints: CheckpointMeta[] = [];
+const tabA = tabMeta("tab-a", { active: true });
+const tabB = tabMeta("tab-b");
+const tabC = tabMeta("tab-c");
+const tabD = tabMeta("tab-d");
+let backendActiveId = "tab-a";
+const historyB = deferred<HistoryMessage[]>();
+const historyD = deferred<HistoryMessage[]>();
+const contextDGate = deferred<ContextInfo>();
+const setActiveBGate = deferred<void>();
+const submitTabCGate = deferred<void>();
+const historyCalls: string[] = [];
+let contextDCalls = 0;
+let holdNextContextForD = false;
+let setActiveCalls = 0;
+let newSessionCalls = 0;
+let failSetActiveFor = "";
+const runningTabs = new Set<string>();
+const tabsById = new Map([tabA, tabB, tabC, tabD].map((tab) => [tab.id, tab]));
+const eventHandlers: Array<(e: WireEvent) => void> = [];
+const readyHandlers: Array<(tabId?: string) => void> = [];
+
+function currentTabs(): TabMeta[] {
+  return [tabA, tabB, tabC, tabD].map((tab) => ({ ...tab, active: tab.id === backendActiveId, running: runningTabs.has(tab.id) }));
+}
+
+window.runtime = {
+  EventsOn: (name: string, cb: (...data: unknown[]) => void) => {
+    if (name === "agent:event") eventHandlers.push(cb as (e: WireEvent) => void);
+    if (name === "agent:ready") readyHandlers.push(cb as (tabId?: string) => void);
+    return () => {};
+  },
+  BrowserOpenURL: () => {},
+};
+window.go = {
+  main: {
+    App: {
+      ListTabs: async () => currentTabs(),
+      MetaForTab: async (tabID: string) => metaFor(tabsById.get(tabID) ?? tabA),
+      ContextUsageForTab: async (tabID: string) => {
+        if (tabID === "tab-d" && holdNextContextForD) {
+          contextDCalls += 1;
+          holdNextContextForD = false;
+          return contextDGate.promise;
+        }
+        if (tabID === "tab-d") contextDCalls += 1;
+        return context;
+      },
+      EffortForTab: async () => effort,
+      BalanceForTab: async () => balance,
+      JobsForTab: async () => jobs,
+      CheckpointsForTab: async () => checkpoints,
+      HistoryForTab: async (tabID: string) => {
+        historyCalls.push(tabID);
+        if (tabID === "tab-b") return historyB.promise;
+        if (tabID === "tab-d") return historyD.promise;
+        return [userMessage("cached A")];
+      },
+      HistoryPageForTab: async (tabID: string) => {
+        const messages = await window.go.main.App.HistoryForTab(tabID);
+        return { messages, startTurn: 0, endTurn: messages.filter((message) => message.role === "user").length, totalTurns: messages.filter((message) => message.role === "user").length, hasOlder: false };
+      },
+      HistoryCheckpointTurnsForTab: async () => [],
+      OpenProjectTab: async () => {
+        backendActiveId = "tab-d";
+        return { ...(tabsById.get("tab-d") ?? tabD), active: true };
+      },
+      NewSession: async () => {
+        newSessionCalls += 1;
+      },
+      ReplayPendingPrompts: async () => {},
+      SetActiveTab: async (tabID: string) => {
+        setActiveCalls += 1;
+        if (tabID === "tab-b") await setActiveBGate.promise;
+        if (tabID === failSetActiveFor) throw new Error("persist failed");
+        backendActiveId = tabID;
+      },
+      SubmitToTab: async (tabID: string) => {
+        runningTabs.add(tabID);
+        if (tabID === "tab-c") await submitTabCGate.promise;
+      },
+      SubmitDisplayToTab: async (tabID: string) => {
+        runningTabs.add(tabID);
+      },
+    } as Partial<AppBindings> as AppBindings,
+  },
+};
+
+type Controller = ReturnType<typeof useController>;
+let controller: Controller | undefined;
+
+function Probe() {
+  controller = useController();
+  return null;
+}
+
+const rootEl = document.getElementById("root");
+if (!rootEl) throw new Error("missing root");
+const root = createRoot(rootEl);
+
+await act(async () => {
+  root.render(<Probe />);
+  await flushPromises();
+});
+await waitFor("initial active tab", () => controller?.activeTabId === "tab-a" && controller.state.items.length === 1);
+
+let switchToB: Promise<TabMeta[] | undefined> | undefined;
+await act(async () => {
+  switchToB = controller?.switchTab("tab-b", tabB);
+  await flushPromises();
+});
+
+eq(setActiveCalls, 1, "SetActiveTab is called for the selected tab");
+eq(controller?.activeTabId, "tab-b", "switchTab updates the active tab before backend activation resolves");
+eq(controller?.state.meta?.label, "model-tab-b", "switchTab applies optimistic tab metadata immediately");
+eq(controller?.state.items.length, 0, "uncached target tab does not keep the previous transcript visible");
+eq(controller?.state.hydrating, true, "target tab shows lightweight hydration state while backend activation is pending");
+eq(controller?.state.backendActivationPending, true, "target tab gates unscoped actions while backend activation is pending");
+ok(!historyCalls.includes("tab-b"), "HistoryForTab is not requested before SetActiveTab completes");
+
+let newSessionWhileSwitching: Promise<void> | undefined;
+await act(async () => {
+  newSessionWhileSwitching = controller?.newSession();
+  await flushPromises();
+});
+eq(newSessionCalls, 0, "newSession waits for backend activation before using the unscoped binding");
+
+await act(async () => {
+  setActiveBGate.resolve();
+  await switchToB;
+  await newSessionWhileSwitching;
+  await flushPromises();
+});
+eq(newSessionCalls, 1, "newSession runs after the selected tab is active in the backend");
+await waitFor("tab-b history request", () => historyCalls.includes("tab-b"));
+
+const historyCallsBeforeReturnToA = historyCalls.length;
+await act(async () => {
+  await controller?.switchTab("tab-a", tabA);
+  await flushPromises();
+});
+await waitFor("tab-a restored", () => controller?.activeTabId === "tab-a" && controller.state.items.some((item) => item.kind === "user" && item.text === "cached A"));
+eq(historyCalls.length, historyCallsBeforeReturnToA, "cached idle tab skips history hydration when reselected");
+
+await act(async () => {
+  historyB.resolve([userMessage("late B")]);
+  await historyB.promise;
+  await flushPromises();
+});
+
+eq(controller?.activeTabId, "tab-a", "late history for another tab does not change the active tab");
+ok(controller?.state.items.some((item) => item.kind === "user" && item.text === "cached A") ?? false, "late history for another tab does not overwrite the active transcript");
+ok(!(controller?.state.items.some((item) => item.kind === "user" && item.text === "late B") ?? false), "late history stays scoped to its tab state");
+
+const historyCallsBeforeFallbackSync = historyCalls.length;
+backendActiveId = "tab-b";
+await act(async () => {
+  await controller?.syncActiveTab(false);
+  await flushPromises();
+});
+eq(controller?.activeTabId, "tab-b", "backend fallback sync activates the backend-selected cached tab");
+ok(controller?.state.items.some((item) => item.kind === "user" && item.text === "late B") ?? false, "backend fallback sync keeps the cached transcript");
+eq(historyCalls.length, historyCallsBeforeFallbackSync, "backend fallback sync preserves cached history instead of reloading it");
+await act(async () => {
+  await controller?.switchTab("tab-a", tabA);
+  await flushPromises();
+});
+await waitFor("tab-a restored after fallback sync", () => controller?.activeTabId === "tab-a" && controller.state.items.some((item) => item.kind === "user" && item.text === "cached A"));
+
+failSetActiveFor = "tab-b";
+const historyCallsBeforeFailedSwitch = historyCalls.length;
+await act(async () => {
+  await controller?.switchTab("tab-b", tabB);
+  await flushPromises();
+});
+eq(controller?.activeTabId, "tab-a", "failed backend tab switch reverts to the previous active tab");
+ok(controller?.state.items.some((item) => item.kind === "user" && item.text === "cached A") ?? false, "failed backend tab switch keeps the previous transcript visible");
+eq(historyCalls.length, historyCallsBeforeFailedSwitch, "failed backend tab switch does not hydrate the rejected target");
+failSetActiveFor = "";
+
+await act(async () => {
+  for (const handler of eventHandlers) handler({ kind: "phase", text: "Planner is thinking", tabId: "tab-a" });
+  for (const handler of eventHandlers) handler({ kind: "message", text: "Planner kept", reasoning: "Planner notes", tabId: "tab-a" });
+  await flushPromises();
+});
+await waitFor("cached planner transcript", () =>
+  controller?.state.items.some((item) => item.kind === "assistant" && item.text === "Planner kept" && item.reasoning === "Planner notes") ?? false
+);
+const historyCallsBeforeReady = historyCalls.length;
+await act(async () => {
+  for (const handler of readyHandlers) handler();
+  await flushPromises();
+});
+await waitFor("ready hydration settled", () => controller?.state.hydrating === false);
+eq(historyCalls.length, historyCallsBeforeReady, "agent ready with cached transcript skips executor-only history hydration");
+ok(controller?.state.items.some((item) => item.kind === "phase" && item.text === "Planner is thinking") ?? false, "agent ready keeps cached planner phase");
+ok(controller?.state.items.some((item) => item.kind === "assistant" && item.text === "Planner kept" && item.reasoning === "Planner notes") ?? false, "agent ready keeps cached planner answer");
+
+let tabCSendResolved = false;
+await act(async () => {
+  const sendPromise = controller?.sendToTab("tab-c", "streaming C");
+  sendPromise?.then(() => {
+    tabCSendResolved = true;
+  });
+  await flushPromises();
+});
+eq(tabCSendResolved, true, "sendToTab resolves after optimistic dispatch before backend submit completes");
+await act(async () => {
+  await controller?.switchTab("tab-c", tabC);
+  await flushPromises();
+});
+eq(controller?.activeTabId, "tab-c", "switching to a cached running tab still updates the active tab");
+ok(controller?.state.items.some((item) => item.kind === "user" && item.text === "streaming C") ?? false, "cached running tab keeps its optimistic transcript");
+ok(!historyCalls.includes("tab-c"), "cached running tab skips history hydration");
+await act(async () => {
+  submitTabCGate.resolve();
+  await submitTabCGate.promise;
+  await flushPromises();
+});
+
+holdNextContextForD = true;
+await act(async () => {
+  await controller?.openProjectTab(tabD.workspaceRoot, tabD.topicId || "");
+  await flushPromises();
+});
+eq(controller?.activeTabId, "tab-d", "openProjectTab activates the opened tab");
+eq(controller?.state.items.length, 0, "open topic keeps the new tab transcript empty while hydrating");
+ok(controller?.state.hydratePlaceholderItems?.some((item) => item.kind === "user" && item.text === "streaming C") ?? false, "open topic stores previous transcript only as a hydration placeholder");
+
+await act(async () => {
+  historyD.resolve([userMessage("history D")]);
+  await historyD.promise;
+  await flushPromises();
+});
+eq(controller?.state.hydrating, false, "topic history clears visible hydration before ancillary phase 2 settles");
+await waitFor("open topic phase 2 started", () => contextDCalls === 1);
+const contextCallsBeforeReadyD = contextDCalls;
+const historyCallsBeforeReadyD = historyCalls.length;
+await act(async () => {
+  for (const handler of readyHandlers) {
+    handler("tab-b");
+    handler("tab-d");
+    handler();
+  }
+  await flushPromises();
+});
+eq(contextDCalls, contextCallsBeforeReadyD, "agent ready reuses in-flight open-topic hydration for the active tab");
+eq(historyCalls.length, historyCallsBeforeReadyD, "background ready events do not hydrate the active tab");
+await act(async () => {
+  contextDGate.resolve(context);
+  await contextDGate.promise;
+  await flushPromises();
+});
+ok(controller?.state.items.some((item) => item.kind === "user" && item.text === "history D") ?? false, "topic history replaces the hydration placeholder");
+eq(controller?.state.hydratePlaceholderItems?.length ?? 0, 0, "topic history clears the hydration placeholder");
+
+const historyCallsBeforeReopenD = historyCalls.length;
+await act(async () => {
+  await controller?.openProjectTab(tabD.workspaceRoot, tabD.topicId || "");
+  await flushPromises();
+});
+eq(controller?.activeTabId, "tab-d", "reopening an already hydrated topic keeps it active");
+ok(controller?.state.items.some((item) => item.kind === "user" && item.text === "history D") ?? false, "reopened cached topic keeps its transcript");
+eq(historyCalls.length, historyCallsBeforeReopenD, "reopening an already hydrated topic skips history hydration");
+
+const contextCallsBeforeInactiveD = contextDCalls;
+await act(async () => {
+  await controller?.openProjectTab(tabD.workspaceRoot, tabD.topicId || "");
+  await controller?.switchTab("tab-a", tabA);
+  await flushPromises();
+});
+await act(async () => {
+  await flushPromises();
+  await flushPromises();
+});
+eq(contextDCalls, contextCallsBeforeInactiveD, "inactive topic skips ancillary hydration after quick tab switch");
+
+tabsById.set("tab-d", { ...tabD, sessionPath: `${tabD.workspaceRoot}/sessions/next-tab-d.jsonl` });
+const historyCallsBeforeReboundD = historyCalls.length;
+await act(async () => {
+  await controller?.openProjectTab(tabD.workspaceRoot, tabD.topicId || "");
+  await flushPromises();
+});
+eq(historyCalls.length, historyCallsBeforeReboundD + 1, "rebound topic reloads history when session path changes");
+
+await act(async () => {
+  root.unmount();
+});
+dom.window.close();
+
+console.log(`\n${passed} passed, ${failed} failed, ${passed + failed} total`);
+if (failed > 0) process.exit(1);

desktop/frontend/src/__tests__/tool-data-archive.test.ts

@@ -316,5 +316,25 @@ console.log("\ntool data archiving on tool_result");
   eq(failedTodo?.status, "error", "failed todo_write keeps error status");
 }
 
+// ── Test 10: A successful empty todo_write becomes canonical without unarchiving older args ──
+{
+  const oldArgs = todoArgs("old");
+  const clearArgs = `{"todos":[]}`;
+  let s = initialState;
+  s = reducer(s, { type: "event", e: { kind: "turn_started" } });
+  s = reducer(s, { type: "event", e: { kind: "tool_dispatch", tool: { id: "todo-old", name: "todo_write", args: oldArgs, readOnly: true } } });
+  s = reducer(s, { type: "event", e: { kind: "tool_result", tool: { id: "todo-old", name: "todo_write", readOnly: true, output: "Todos updated" } } });
+  s = reducer(s, { type: "event", e: { kind: "tool_dispatch", tool: { id: "todo-clear", name: "todo_write", args: clearArgs, readOnly: true } } });
+  s = reducer(s, { type: "event", e: { kind: "tool_result", tool: { id: "todo-clear", name: "todo_write", readOnly: true, output: "Todos updated" } } });
+
+  const tools = toolItems(s);
+  const oldTodo = tools.find((tool) => tool.id === "todo-old");
+  const clearTodo = tools.find((tool) => tool.id === "todo-clear");
+  ok((oldTodo?.args.length ?? 0) <= 205, "older todo_write args stay archived when latest todo_write clears the list");
+  ok(oldTodo?.args !== oldArgs, "older todo_write does not keep full JSON after a clear");
+  eq(clearTodo?.args, clearArgs, "empty todo_write clear keeps parseable canonical args");
+  eq(JSON.parse(clearTodo?.args ?? "{}").todos.length, 0, "empty todo_write clear remains parseable as the latest canonical list");
+}
+
 console.log(`\n${passed} passed, ${failed} failed, ${passed + failed} total`);
 if (failed > 0) process.exit(1);

desktop/frontend/src/__tests__/tool-subject.test.ts

@@ -0,0 +1,27 @@
+// Run: tsx src/__tests__/tool-subject.test.ts
+
+import { subjectOf } from "../lib/tools";
+
+let passed = 0;
+let failed = 0;
+
+function eq(a: unknown, b: unknown, label: string) {
+  if (a === b) {
+    process.stdout.write(`  PASS  ${label}\n`);
+    passed += 1;
+  } else {
+    process.stdout.write(`  FAIL  ${label}: expected ${JSON.stringify(b)}, got ${JSON.stringify(a)}\n`);
+    failed += 1;
+  }
+}
+
+console.log("\ntool subject contract");
+
+eq(subjectOf("task", JSON.stringify({ description: "audit docs" })), "audit docs", "task subject uses description");
+eq(subjectOf("run_skill", JSON.stringify({ name: "code-reviewer", arguments: "review this branch" })), "code-reviewer", "run_skill subject uses skill name");
+
+if (failed) {
+  process.stdout.write(`\n${failed} failed, ${passed} passed\n`);
+  process.exit(1);
+}
+process.stdout.write(`\n${passed} passed\n`);

desktop/frontend/src/__tests__/transcript-grouping.test.ts

@@ -3,7 +3,7 @@
 import { readFileSync } from "node:fs";
 import { fileURLToPath } from "node:url";
 import { dirname, resolve } from "node:path";
-import { buildTurnGroups } from "../lib/transcriptGrouping";
+import { buildStepGroups, buildTurnGroups, createWarmLayerState, questionTurnsById, warmColdPageForTurn, warmLayerForSession, warmLayerWithColdPageAtLeast, warmLayerWithExpandedTurn, warmLayerWithNextColdPage, warmPagination } from "../lib/transcriptGrouping";
 import type { Item } from "../lib/useController";
 
 let passed = 0;
@@ -68,6 +68,45 @@ console.log("\ntranscript grouping contract");
   eq(groups[2].assistantPreview, "answer 2", "keeps latest assistant preview for each turn");
 }
 
+{
+  const groups = buildStepGroups([
+    { kind: "user", id: "u0", text: "fix this" },
+    { kind: "assistant", id: "a1", text: "visible answer before retry", reasoning: "", streaming: false },
+    { kind: "notice", id: "s1", level: "info", text: "↪ steer" },
+    { kind: "assistant", id: "a2", text: "", reasoning: "", streaming: true },
+  ] as Item[]);
+  eq(groups[1]?.isFinal, true, "visible assistant text before a later assistant stays outside processed folds");
+}
+
+{
+  const groups = buildStepGroups([
+    { kind: "user", id: "u0", text: "use tools" },
+    { kind: "assistant", id: "a1", text: "", reasoning: "", streaming: false },
+    { kind: "tool", id: "t1", name: "read_file", args: "{}", readOnly: true, status: "done" },
+    { kind: "assistant", id: "a2", text: "final answer", reasoning: "", streaming: false },
+  ] as Item[]);
+  eq(groups[1]?.isFinal, false, "tool-only completed steps still fold in compact mode");
+  eq(groups[2]?.isFinal, true, "later visible final answer renders directly");
+}
+
+{
+  const visibleTurns = questionTurnsById([
+    { id: "u0", text: "first", turn: 0 },
+    { id: "u1", text: "second", turn: 1 },
+  ]);
+  eq(visibleTurns.get("u0"), 0, "falls back to visible ordinal when no checkpoint turns exist");
+  eq(visibleTurns.get("u1"), 1, "visible ordinal fallback increments by question");
+
+  const backendTurns = questionTurnsById([
+    { id: "u0", text: "first", turn: 0, checkpointTurn: 0 },
+    { id: "u1", text: "live without server stamp yet", turn: 1 },
+    { id: "u2", text: "after hidden synthetic", turn: 2, checkpointTurn: 3 },
+  ]);
+  eq(backendTurns.get("u0"), 0, "uses backend checkpoint turn zero when present");
+  eq(backendTurns.get("u2"), 3, "uses non-contiguous backend checkpoint turn");
+  ok(!backendTurns.has("u1"), "does not mix visible ordinal fallback into authoritative checkpoint sessions");
+}
+
 {
   const items = syntheticTranscriptItems(10_000, 1);
   const start = performance.now();
@@ -77,5 +116,50 @@ console.log("\ntranscript grouping contract");
   ok(elapsed < 50, `groups 10k turns in ${elapsed.toFixed(2)}ms`);
 }
 
+{
+  const firstPage = warmPagination({ turnCount: 100, hotTurns: 30, pageSize: 20, coldPage: 0 });
+  eq(firstPage.warmStartTurn, 50, "long transcripts initially render only the latest warm page");
+  eq(firstPage.warmEndTurn, 70, "warm page stops before the hot zone");
+  eq(firstPage.coldTurnCount, 50, "older cold turns stay hidden behind the load-more button");
+
+  const secondPage = warmPagination({ turnCount: 100, hotTurns: 30, pageSize: 20, coldPage: 1 });
+  eq(secondPage.warmStartTurn, 30, "loading earlier history adds one more warm page");
+  eq(secondPage.warmEndTurn, 70, "loading earlier history keeps the hot-zone boundary stable");
+  eq(secondPage.coldTurnCount, 30, "loading earlier history reduces the hidden cold count");
+
+  const shortTranscript = warmPagination({ turnCount: 25, hotTurns: 30, pageSize: 20, coldPage: 0 });
+  eq(shortTranscript.warmStartTurn, 0, "short transcripts have no warm zone");
+  eq(shortTranscript.warmEndTurn, 0, "short transcripts have no warm boundary");
+  eq(shortTranscript.coldTurnCount, 0, "short transcripts have no cold turns");
+}
+
+{
+  eq(warmColdPageForTurn({ turn: 10, turnCount: 100, hotTurns: 30, pageSize: 20 }), 2, "jumping to cold-zone turn 10 loads enough warm pages");
+  eq(warmColdPageForTurn({ turn: 0, turnCount: 100, hotTurns: 30, pageSize: 20 }), 3, "jumping to the first warm turn loads all warm pages");
+  eq(warmColdPageForTurn({ turn: 65, turnCount: 100, hotTurns: 30, pageSize: 20 }), 0, "jumping inside the initial warm page needs no extra cold page");
+  eq(warmColdPageForTurn({ turn: 80, turnCount: 100, hotTurns: 30, pageSize: 20 }), 0, "jumping inside the hot zone needs no warm pagination");
+}
+
+{
+  let state = createWarmLayerState("tab-a|0|a-u0");
+  state = warmLayerWithNextColdPage(state, "tab-a|0|a-u0");
+  state = warmLayerWithNextColdPage(state, "tab-a|0|a-u0");
+  state = warmLayerWithNextColdPage(state, "tab-a|0|a-u0");
+  state = warmLayerWithExpandedTurn(state, "tab-a|0|a-u0", 10, true);
+  eq(state.coldPage, 3, "loading earlier history advances the current session page");
+  ok(state.expandedWarmTurns.has(10), "expanded warm turns stay scoped to the current session");
+
+  const switched = warmLayerForSession(state, "tab-b|1|b-u0");
+  eq(switched.coldPage, 0, "switching sessions resets warm pagination before rendering");
+  eq(switched.expandedWarmTurns.size, 0, "switching sessions clears expanded warm turns");
+
+  const switchedPage = warmPagination({ turnCount: 100, hotTurns: 30, pageSize: 20, coldPage: switched.coldPage });
+  eq(switchedPage.warmStartTurn, 50, "switched long transcripts render only the latest warm page first");
+
+  const paged = warmLayerWithColdPageAtLeast(switched, "tab-b|1|b-u0", 2);
+  eq(paged.coldPage, 2, "jumping to a cold-zone question raises the session warm page");
+  eq(warmLayerWithColdPageAtLeast(paged, "tab-b|1|b-u0", 1).coldPage, 2, "jumping never lowers the loaded warm page");
+}
+
 console.log(`\n${passed} passed, ${failed} failed`);
 if (failed > 0) process.exit(1);

desktop/frontend/src/__tests__/typography-overflow-contract.test.ts

@@ -127,6 +127,8 @@ for (const selector of [
   ".context-panel__section-head span",
   ".context-panel__metric span",
   ".context-panel__metric strong",
+  ".app--creation .context-panel__mini-stat span",
+  ".app--creation .context-panel__mini-stat strong",
   ".topbar__model",
   ".composer-modebar__item span",
   ".composer-more-menu__item span",
@@ -134,7 +136,34 @@ for (const selector of [
   clipsSingleLine(selector);
 }
 
+eq(
+  finalDeclaration(".app--creation .layout.layout--workspace-open", "transition"),
+  "grid-template-columns 0s, min-width 0s",
+  "creation dock skips zero-width grid interpolation on open",
+);
+eq(
+  finalDeclaration(".app--creation .context-panel__usage", "animation"),
+  "none",
+  "creation overview usage card disables inherited entrance animation",
+);
+ok(
+  finalDeclaration(".app--creation .context-panel__mini-stat", "justify-content") !== "space-between",
+  "creation overview rows avoid edge-pinned value alignment",
+);
+ok(
+  finalDeclaration(".app--creation .context-panel__mini-stat", "grid-template-columns") !== "minmax(0, 1fr) auto",
+  "creation overview rows avoid the spacer grid that pushes values to the edge",
+);
+ok(
+  finalDeclaration(".app--creation .context-panel__mini-stat strong", "max-width") !== "14ch",
+  "creation overview values are not capped to a fixed 14ch width",
+);
+
 eq(finalDeclaration(".composer-modebar", "overflow"), "hidden", "chat mode switcher contains enlarged labels");
+ok(
+  /@container\s*\(max-width:\s*760px\)[\s\S]*?\.composer-meta__control--model\s*\{[\s\S]*?flex\s*:\s*0 1 auto[\s\S]*?width\s*:\s*fit-content[\s\S]*?max-width\s*:\s*min\(240px,\s*42vw\)[\s\S]*?\.composer-meta--has-intent-chip\s+\.composer-meta__control--model\s*\{[\s\S]*?flex\s*:\s*0 1 auto[\s\S]*?width\s*:\s*fit-content[\s\S]*?max-width\s*:\s*min\(220px,\s*38vw\)[\s\S]*?\.composer-meta__control--effort\s*\{[\s\S]*?display\s*:\s*none[\s\S]*?\.composer-meta__control--more\s*\{[\s\S]*?display\s*:\s*inline-flex/.test(styles),
+  "composer compact controls activate at the capped theme width",
+);
 eq(finalDeclaration(".md table", "overflow-x"), "auto", "markdown tables scroll horizontally");
 eq(finalDeclaration(".code", "overflow"), "auto", "code blocks scroll instead of widening the layout");
 ok(
@@ -149,6 +178,10 @@ ok(
   /@media\s*\(max-width:\s*760px\)[\s\S]*?\.settings-modal\s*\{[\s\S]*?width\s*:\s*100vw[\s\S]*?height\s*:\s*100vh/.test(styles),
   "settings modal only becomes fullscreen at the narrow breakpoint",
 );
+ok(
+  /@media\s*\(max-width:\s*820px\)[\s\S]*?\.app\s+\.layout[\s\S]*?grid-template-columns\s*:\s*minmax\(0,\s*1fr\)\s*!important[\s\S]*?\.app\s+\.sidebar[\s\S]*?display\s*:\s*none\s*!important[\s\S]*?\.app\s+\.chat-pane[\s\S]*?grid-column\s*:\s*1\s*!important/.test(styles),
+  "narrow workbench layout hides side panels and keeps chat single-column",
+);
 
 console.log(`\n${passed} passed, ${failed} failed, ${passed + failed} total`);
 if (failed > 0) process.exit(1);

desktop/frontend/src/__tests__/use-controller-cancel-reconcile.test.tsx

@@ -0,0 +1,187 @@
+// Run: tsx src/__tests__/use-controller-cancel-reconcile.test.tsx
+
+import { JSDOM } from "jsdom";
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { useController } from "../lib/useController";
+import type { AppBindings } from "../lib/bridge";
+import type { ContextInfo, EffortInfo, Meta, TabMeta, WireEvent } from "../lib/types";
+
+let passed = 0;
+let failed = 0;
+
+function ok(value: boolean, label: string) {
+  if (value) {
+    process.stdout.write(`  PASS  ${label}\n`);
+    passed += 1;
+  } else {
+    process.stdout.write(`  FAIL  ${label}\n`);
+    failed += 1;
+  }
+}
+
+function eq(actual: unknown, expected: unknown, label: string) {
+  ok(actual === expected, `${label}${actual === expected ? "" : `: expected ${JSON.stringify(expected)}, got ${JSON.stringify(actual)}`}`);
+}
+
+function flushPromises(): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, 0));
+}
+
+async function waitFor(label: string, predicate: () => boolean) {
+	for (let attempt = 0; attempt < 50; attempt += 1) {
+		await act(async () => {
+			await flushPromises(20);
+		});
+		if (predicate()) return;
+	}
+	throw new Error(`timed out waiting for ${label}`);
+}
+
+function tabMeta(overrides: Partial<TabMeta> = {}): TabMeta {
+  return {
+    id: "tab-a",
+    scope: "project",
+    workspaceRoot: "/repo",
+    workspaceName: "repo",
+    workspacePath: "/repo",
+    topicId: "topic-a",
+    topicTitle: "General",
+    label: "model",
+    ready: true,
+    running: false,
+    cancellable: false,
+    mode: "normal",
+    toolApprovalMode: "ask",
+    tokenMode: "full",
+    active: true,
+    cwd: "/repo",
+    ...overrides,
+  };
+}
+
+function meta(): Meta {
+  return {
+    label: "model",
+    ready: true,
+    eventChannel: "agent:event",
+    cwd: "/repo",
+    workspaceRoot: "/repo",
+    workspaceName: "repo",
+    workspacePath: "/repo",
+    autoApproveTools: false,
+    bypass: false,
+    collaborationMode: "normal",
+    toolApprovalMode: "ask",
+    tokenMode: "full",
+    goal: "",
+    goalStatus: "stopped",
+  };
+}
+
+console.log("\nuse controller cancel reconcile");
+
+const dom = new JSDOM("<!doctype html><html><body><div id=\"root\"></div></body></html>", {
+  pretendToBeVisual: true,
+  url: "http://localhost/",
+});
+(globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+globalThis.window = dom.window as unknown as Window & typeof globalThis;
+globalThis.document = dom.window.document;
+Object.defineProperty(globalThis, "navigator", { configurable: true, value: dom.window.navigator });
+globalThis.Node = dom.window.Node;
+globalThis.HTMLElement = dom.window.HTMLElement;
+globalThis.Event = dom.window.Event;
+globalThis.CustomEvent = dom.window.CustomEvent;
+globalThis.KeyboardEvent = dom.window.KeyboardEvent;
+globalThis.MouseEvent = dom.window.MouseEvent;
+globalThis.localStorage = dom.window.localStorage;
+globalThis.requestAnimationFrame = dom.window.requestAnimationFrame.bind(dom.window);
+globalThis.cancelAnimationFrame = dom.window.cancelAnimationFrame.bind(dom.window);
+
+const eventHandlers: Array<(e: WireEvent) => void> = [];
+let backendRunning = false;
+let cancelCalls = 0;
+const context: ContextInfo = { used: 0, window: 100, sessionTokens: 0 };
+const effort: EffortInfo = { supported: true, current: "auto", default: "auto", levels: ["auto"] };
+
+window.runtime = {
+  EventsOn: (name: string, cb: (payload: unknown) => void) => {
+    if (name === "agent:event") eventHandlers.push(cb as (e: WireEvent) => void);
+    return () => {};
+  },
+  BrowserOpenURL: () => {},
+};
+window.go = {
+  main: {
+    App: {
+      ListTabs: async () => [tabMeta({ running: backendRunning, cancellable: backendRunning })],
+      MetaForTab: async () => meta(),
+      ContextUsageForTab: async () => context,
+      EffortForTab: async () => effort,
+      BalanceForTab: async () => ({ available: false, display: "" }),
+      JobsForTab: async () => [],
+      CheckpointsForTab: async () => [],
+      HistoryForTab: async () => [],
+      HistoryPageForTab: async () => ({ messages: [], startTurn: 0, endTurn: 0, totalTurns: 0, hasOlder: false }),
+      HistoryCheckpointTurnsForTab: async () => [],
+      ReplayPendingPrompts: async () => {},
+      CancelTab: async () => {
+        cancelCalls += 1;
+        backendRunning = false;
+      },
+    } as Partial<AppBindings> as AppBindings,
+  },
+};
+
+type Controller = ReturnType<typeof useController>;
+let controller: Controller | undefined;
+
+function Probe() {
+  controller = useController();
+  return null;
+}
+
+const rootEl = document.getElementById("root");
+if (!rootEl) throw new Error("missing root");
+const root = createRoot(rootEl);
+
+await act(async () => {
+  root.render(<Probe />);
+  await flushPromises();
+});
+await waitFor("active tab", () => controller?.activeTabId === "tab-a");
+await act(async () => {
+  await flushPromises(50);
+});
+
+backendRunning = true;
+await act(async () => {
+  for (const handler of eventHandlers) handler({ kind: "turn_started", tabId: "tab-a" });
+  await flushPromises();
+});
+eq(controller?.state.running, true, "turn_started marks the tab running");
+
+await act(async () => {
+  controller?.cancel();
+  await flushPromises();
+  await flushPromises();
+});
+
+for (let attempt = 0; attempt < 20 && controller?.state.running; attempt += 1) {
+  await act(async () => {
+    await flushPromises(50);
+  });
+}
+
+eq(controller?.state.running, false, "cancel reconciliation clears the running state");
+eq(cancelCalls, 1, "CancelTab is called once");
+eq(controller?.state.cancelRequested, false, "cancel reconciliation clears cancelRequested");
+
+await act(async () => {
+  root.unmount();
+});
+dom.window.close();
+
+console.log(`\n${passed} passed, ${failed} failed, ${passed + failed} total`);
+if (failed > 0) process.exit(1);

desktop/frontend/src/__tests__/use-controller-meta.test.ts

@@ -1,7 +1,9 @@
 // Run: tsx src/__tests__/use-controller-meta.test.ts
 
-import { foregroundRunningFromRuntimeMeta, initialState, reducer, sameMeta, shouldReconcileStaleTurn } from "../lib/useController";
-import type { Meta, WireUsage } from "../lib/types";
+import { foregroundRunningFromRuntimeMeta, initialState, metaFromTab, reducer, sameMeta, shouldReconcileStaleTurn } from "../lib/useController";
+import type { Meta, TabMeta, WireUsage } from "../lib/types";
+
+type LooseTabMeta = Omit<TabMeta, "toolApprovalMode"> & { toolApprovalMode?: TabMeta["toolApprovalMode"] | "" };
 
 let passed = 0;
 let failed = 0;
@@ -26,6 +28,7 @@ function meta(overrides: Partial<Meta> = {}): Meta {
     workspaceName: "repo",
     workspacePath: "/repo",
     gitBranch: "main",
+    imageInputEnabled: true,
     autoApproveTools: false,
     bypass: false,
     collaborationMode: "normal",
@@ -37,6 +40,31 @@ function meta(overrides: Partial<Meta> = {}): Meta {
   };
 }
 
+function tab(overrides: Partial<LooseTabMeta> = {}): TabMeta {
+  return {
+    id: "tab-1",
+    scope: "project",
+    workspaceRoot: "/repo",
+    workspaceName: "repo",
+    workspacePath: "/repo",
+    gitBranch: "main",
+    topicId: "topic-1",
+    topicTitle: "Topic",
+    label: "DeepSeek-R1",
+    ready: true,
+    running: false,
+    mode: "normal",
+    collaborationMode: "normal",
+    toolApprovalMode: "ask",
+    tokenMode: "full",
+    goal: "",
+    goalStatus: "stopped",
+    active: true,
+    cwd: "/repo",
+    ...overrides,
+  } as TabMeta;
+}
+
 function usage(source: string): WireUsage {
   return {
     promptTokens: 100,
@@ -59,6 +87,13 @@ console.log("\nuse controller meta");
   eq(sameMeta(meta({ collaborationMode: "normal" }), meta({ collaborationMode: "plan" })), false, "collaboration mode changes invalidate meta equality");
   eq(sameMeta(meta({ workspacePath: "/repo" }), meta({ workspacePath: "/other" })), false, "workspace path changes invalidate meta equality");
   eq(sameMeta(meta({ gitBranch: "main" }), meta({ gitBranch: "feature" })), false, "git branch changes invalidate meta equality");
+  eq(sameMeta(meta({ imageInputEnabled: true }), meta({ imageInputEnabled: false })), false, "image input capability changes invalidate meta equality");
+}
+
+{
+  const preserved = metaFromTab(tab({ toolApprovalMode: "" }), meta({ toolApprovalMode: "auto", autoApproveTools: false }));
+  eq(preserved.toolApprovalMode, "auto", "blank tab snapshot preserves explicit auto approval mode");
+  eq(preserved.autoApproveTools, false, "blank tab snapshot does not silently resurrect yolo approval");
 }
 
 {
@@ -100,6 +135,31 @@ console.log("\nuse controller meta");
   eq(foregroundRunningFromRuntimeMeta({ running: true, backgroundJobs: 1 }), false, "background jobs without cancellable are background-only");
 }
 
+{
+  const restoredContext = reducer(initialState, {
+    type: "context",
+    context: {
+      used: 42,
+      window: 200,
+      sessionTokens: 120,
+      compactRatio: 0.5,
+      sessionCost: 0.012,
+      sessionCurrency: "$",
+      cacheHitTokens: 80,
+      cacheMissTokens: 20,
+    },
+  });
+  const reset = reducer(restoredContext, { type: "reset" });
+  eq(reset.context.used, 0, "reset clears context used tokens");
+  eq(reset.context.window, 200, "reset preserves context window");
+  eq(reset.context.sessionTokens, 0, "reset clears context session tokens");
+  eq(reset.context.cacheHitTokens, undefined, "reset clears restored cache hit tokens");
+  eq(reset.context.cacheMissTokens, undefined, "reset clears restored cache miss tokens");
+  eq(reset.context.sessionCost, undefined, "reset clears restored context session cost");
+  eq(reset.sessionCost, 0, "reset clears restored session cost state");
+  eq(reset.sessionCurrency, "¥", "reset restores default session currency");
+}
+
 {
   const idleExecutor = reducer(
     { ...initialState, context: { used: 0, window: 200, sessionTokens: 0 } },
@@ -124,6 +184,78 @@ console.log("\nuse controller meta");
   const activeHelper = reducer(active, { type: "event", e: { kind: "usage", usage: usage("subagent") } });
   eq(activeHelper.sessionTokens, 120, "helper usage inside a turn still counts toward session tokens");
   eq(activeHelper.sessionCost, 0.001, "helper usage inside a turn still counts toward session cost");
+  eq(activeHelper.usage, undefined, "helper usage inside a turn does not become displayed latest usage");
+
+  const plannerFirst = reducer(active, { type: "event", e: { kind: "usage", usage: usage("planner") } });
+  eq(plannerFirst.sessionTokens, 120, "planner usage inside a turn still counts toward session tokens");
+  eq(plannerFirst.usage, undefined, "planner usage does not fill the single displayed usage slot");
+
+  const activeExecutor = reducer(active, { type: "event", e: { kind: "usage", usage: usage("executor") } });
+  const afterCompaction = reducer(activeExecutor, { type: "event", e: { kind: "usage", usage: usage("compaction") } });
+  eq(afterCompaction.usage?.source, "executor", "compaction usage does not overwrite displayed executor usage");
+  eq(afterCompaction.sessionTokens, 240, "compaction usage still contributes to session token totals");
+}
+
+{
+  let s = reducer(initialState, { type: "user", text: "first", seq: 0 });
+  s = reducer(s, { type: "event", e: { kind: "turn_started" } });
+  s = reducer(s, { type: "event", e: { kind: "notice", level: "info", text: "runtime notice" } });
+  s = reducer(s, { type: "event", e: { kind: "turn_done" } });
+  const merged = reducer(s, {
+    type: "history_checkpoint_turns",
+    turns: [0],
+  });
+  const user = merged.items.find((item) => item.kind === "user");
+  const notice = merged.items.find((item) => item.kind === "notice" && item.text === "runtime notice");
+  eq(user?.kind === "user" && user.checkpointTurn, 0, "turn_done checkpoint merge stamps user turn zero");
+  eq(Boolean(notice), true, "turn_done checkpoint merge preserves runtime notices");
+}
+
+{
+  let s = reducer(initialState, {
+    type: "history_page",
+    mode: "replace",
+    page: {
+      messages: [
+        { role: "user", content: "recent prompt" },
+        { role: "assistant", content: "recent answer" },
+      ],
+      startTurn: 60,
+      endTurn: 61,
+      totalTurns: 61,
+      hasOlder: true,
+    },
+  });
+  eq(s.items.some((item) => item.kind === "user" && item.text === "recent prompt"), true, "history page replace renders the latest window");
+  eq(s.historyStartTurn, 60, "history page stores the older cursor");
+  eq(s.historyHasOlder, true, "history page records older availability");
+  const checkpointed = reducer(s, {
+    type: "history_checkpoint_turns",
+    turns: Array.from({ length: 61 }, (_, index) => index + 1000),
+  });
+  const recentUser = checkpointed.items.find((item) => item.kind === "user" && item.text === "recent prompt");
+  eq(recentUser?.kind === "user" && recentUser.checkpointTurn, 1060, "paged checkpoint merge uses the window start turn");
+  s = reducer(s, { type: "history_older_start" });
+  eq(s.historyOlderLoading, true, "older history request marks loading");
+  s = reducer(s, {
+    type: "history_page",
+    mode: "prepend",
+    page: {
+      messages: [
+        { role: "user", content: "older prompt" },
+        { role: "assistant", content: "older answer" },
+      ],
+      startTurn: 0,
+      endTurn: 1,
+      totalTurns: 61,
+      hasOlder: false,
+    },
+  });
+  const users = s.items.filter((item) => item.kind === "user");
+  eq(users[0]?.kind === "user" && users[0].text, "older prompt", "older history prepends before the current window");
+  eq(users[1]?.kind === "user" && users[1].text, "recent prompt", "older history keeps the current window");
+  eq(s.historyHasOlder, false, "older history clears hasOlder when all pages are loaded");
+  eq(s.historyOlderLoading, false, "older history clears loading");
 }
 
 console.log(`\n${passed} passed, ${failed} failed, ${passed + failed} total`);

desktop/frontend/src/__tests__/workspace-changes-errors.test.tsx

@@ -0,0 +1,155 @@
+// Run: tsx src/__tests__/workspace-changes-errors.test.tsx
+
+import { JSDOM } from "jsdom";
+import React from "react";
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { WorkspacePanel } from "../components/WorkspacePanel";
+import { LocaleProvider } from "../lib/i18n";
+import type { AppBindings } from "../lib/bridge";
+import type { WorkspaceChangesView } from "../lib/types";
+
+let passed = 0;
+let failed = 0;
+
+function ok(value: boolean, label: string) {
+  if (value) {
+    process.stdout.write(`  PASS  ${label}\n`);
+    passed += 1;
+  } else {
+    process.stdout.write(`  FAIL  ${label}\n`);
+    failed += 1;
+  }
+}
+
+function flushPromises(): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, 0));
+}
+
+async function waitFor(label: string, predicate: () => boolean) {
+  for (let attempt = 0; attempt < 20; attempt += 1) {
+    await act(async () => {
+      await flushPromises();
+    });
+    if (predicate()) return;
+  }
+  throw new Error(`timed out waiting for ${label}`);
+}
+
+class TestResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+
+function installDom() {
+  const dom = new JSDOM("<!doctype html><html><body><div id=\"root\"></div></body></html>", {
+    pretendToBeVisual: true,
+    url: "http://localhost/",
+  });
+  (globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+  globalThis.window = dom.window as unknown as Window & typeof globalThis;
+  globalThis.document = dom.window.document;
+  Object.defineProperty(globalThis, "navigator", { configurable: true, value: dom.window.navigator });
+  globalThis.Node = dom.window.Node;
+  globalThis.HTMLElement = dom.window.HTMLElement;
+  globalThis.Event = dom.window.Event;
+  globalThis.CustomEvent = dom.window.CustomEvent;
+  globalThis.KeyboardEvent = dom.window.KeyboardEvent;
+  globalThis.MouseEvent = dom.window.MouseEvent;
+  globalThis.PointerEvent = dom.window.MouseEvent as unknown as typeof PointerEvent;
+  globalThis.MutationObserver = dom.window.MutationObserver;
+  globalThis.ResizeObserver = TestResizeObserver;
+  globalThis.localStorage = dom.window.localStorage;
+  globalThis.requestAnimationFrame = dom.window.requestAnimationFrame.bind(dom.window);
+  globalThis.cancelAnimationFrame = dom.window.cancelAnimationFrame.bind(dom.window);
+  Object.defineProperty(dom.window.HTMLElement.prototype, "scrollIntoView", { configurable: true, value: () => {} });
+  return dom;
+}
+
+async function renderWorkspace(changes: WorkspaceChangesView) {
+  const dom = installDom();
+  window.go = {
+    main: {
+      App: {
+        ListDir: async () => [],
+        WorkspaceGitHistory: async () => [],
+        WorkspaceChanges: async () => changes,
+      } as Partial<AppBindings> as AppBindings,
+    },
+  };
+  const rootEl = document.getElementById("root");
+  if (!rootEl) throw new Error("missing root");
+  const root = createRoot(rootEl);
+  await act(async () => {
+    root.render(
+      <LocaleProvider>
+        <WorkspacePanel
+          open
+          tabId="tab-a"
+          cwd="/repo"
+          maximized={false}
+          initialViewMode="changed"
+          onClose={() => {}}
+          onToggleMaximized={() => {}}
+        />
+      </LocaleProvider>,
+    );
+    await flushPromises();
+  });
+  await waitFor("workspace changes", () => Boolean(document.querySelector(".workspace-preview__body")));
+  return { dom, root };
+}
+
+console.log("\nworkspace changes git errors");
+
+{
+  const { dom, root } = await renderWorkspace({ files: [], gitAvailable: false });
+  await waitFor("git unavailable warning", () => document.body.textContent?.includes("Git status is unavailable for this workspace.") === true);
+  ok(document.body.textContent?.includes("Git status is unavailable for this workspace.") === true, "gitAvailable=false renders a warning");
+  ok(document.body.textContent?.includes("No changed files") === false, "gitAvailable=false is not shown as a clean workspace");
+  await act(async () => {
+    root.unmount();
+  });
+  dom.window.close();
+}
+
+{
+  const { dom, root } = await renderWorkspace({
+    files: [],
+    gitAvailable: true,
+    gitErr: "git status timed out",
+  });
+  await waitFor("git error warning without files", () => document.body.textContent?.includes("Git status is unavailable for this workspace.") === true);
+  ok(document.body.textContent?.includes("Git status is unavailable for this workspace.") === true, "gitErr without files renders a warning");
+  ok(document.body.textContent?.includes("No changed files") === false, "empty files plus gitErr is not shown as a clean workspace");
+  await act(async () => {
+    root.unmount();
+  });
+  dom.window.close();
+}
+
+{
+  const { dom, root } = await renderWorkspace({
+    files: [
+      {
+        path: "src/app.ts",
+        sources: ["session"],
+        gitStatus: "modified",
+        latestPrompt: "edit app",
+      },
+    ],
+    gitAvailable: true,
+    gitErr: "git status timed out",
+  });
+  await waitFor("git error warning with files", () => document.body.textContent?.includes("app.ts") === true);
+  ok(document.body.textContent?.includes("Git status is unavailable for this workspace.") === true, "gitErr renders a warning");
+  ok(document.body.textContent?.includes("app.ts") === true, "files still render when gitErr is present");
+  await act(async () => {
+    root.unmount();
+  });
+  dom.window.close();
+}
+
+console.log(`\n${passed} passed, ${failed} failed, ${passed + failed} total`);
+if (failed > 0) process.exit(1);

desktop/frontend/src/__tests__/workspace-layout.test.ts

@@ -1,13 +1,19 @@
 // Run: tsx src/__tests__/workspace-layout.test.ts
 
+import { readFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
 import {
   availableWorkspacePanelWidth,
+  resolveLiveWorkspacePanelWidth,
   resolveWorkspacePanelWidth,
   workspacePanelAriaMinWidth,
 } from "../lib/workspaceLayout";
 
 let passed = 0;
 let failed = 0;
+const testDir = dirname(fileURLToPath(import.meta.url));
+const appSource = readFileSync(resolve(testDir, "../App.tsx"), "utf8");
 
 function eq(a: unknown, b: unknown, label: string) {
   if (a === b) {
@@ -24,6 +30,7 @@ const SIDEBAR_WIDTH = 264;
 const RESIZER_WIDTH = 8;
 const PREVIEW_MIN_WIDTH = 420;
 const PREVIEW_DEFAULT_WIDTH = 660;
+const CHAT_COMFORT_MIN_WIDTH = 560;
 
 console.log("\nworkspace dock layout");
 
@@ -108,5 +115,42 @@ eq(
   "maximized panel preserves the saved preferred width",
 );
 
+eq(
+  resolveLiveWorkspacePanelWidth({
+    viewportWidth: 1268,
+    sidebarCollapsed: false,
+    sidebarWidth: 400,
+    chatMinWidth: CHAT_COMFORT_MIN_WIDTH,
+    resizerWidth: RESIZER_WIDTH,
+    open: true,
+    maximized: false,
+    preferredWidth: PREVIEW_MIN_WIDTH,
+    minWidth: PREVIEW_MIN_WIDTH,
+  }),
+  300,
+  "live dock drag clamps the hard minimum to the available dock width",
+);
+
+eq(
+  resolveLiveWorkspacePanelWidth({
+    viewportWidth: 1280,
+    sidebarCollapsed: false,
+    sidebarWidth: 500,
+    chatMinWidth: CHAT_COMFORT_MIN_WIDTH,
+    resizerWidth: RESIZER_WIDTH,
+    open: true,
+    maximized: false,
+    preferredWidth: PREVIEW_DEFAULT_WIDTH,
+    minWidth: PREVIEW_MIN_WIDTH,
+  }),
+  212,
+  "live sidebar drag recomputes dock width from the dragged sidebar width",
+);
+eq(
+  /const closeWorkspacePanel = useCallback\(\(\) => \{[\s\S]*?setLiveWorkspacePanelRenderWidth\(null\);[\s\S]*?setWorkspacePanelOpen\(false\);/.test(appSource),
+  true,
+  "closing the dock clears the transient render width before hiding the panel",
+);
+
 console.log(`\n${passed} passed, ${failed} failed, ${passed + failed} total`);
 if (failed > 0) process.exit(1);

desktop/frontend/src/__tests__/workspace-preview-css.test.ts

@@ -0,0 +1,99 @@
+// Run: tsx src/__tests__/workspace-preview-css.test.ts
+
+import { readFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { JSDOM } from "jsdom";
+
+const testDir = dirname(fileURLToPath(import.meta.url));
+const styles = readFileSync(resolve(testDir, "../styles.css"), "utf8");
+
+let passed = 0;
+let failed = 0;
+
+function eq(a: unknown, b: unknown, label: string) {
+  if (a === b) {
+    process.stdout.write(`  PASS  ${label}\n`);
+    passed += 1;
+  } else {
+    process.stdout.write(`  FAIL  ${label}: expected ${JSON.stringify(b)}, got ${JSON.stringify(a)}\n`);
+    failed += 1;
+  }
+}
+
+function matchingBlocks(selector: string): string[] {
+  const blocks: string[] = [];
+  const rule = /([^{}]+)\{([^{}]*)\}/g;
+  let match: RegExpExecArray | null;
+  while ((match = rule.exec(styles)) !== null) {
+    const selectors = match[1].split(",").map((part) => part.trim());
+    if (selectors.includes(selector)) blocks.push(match[2]);
+  }
+  return blocks;
+}
+
+function finalDeclaration(selector: string, property: string): string | undefined {
+  let value: string | undefined;
+  for (const block of matchingBlocks(selector)) {
+    const declaration = new RegExp(`(?:^|;)\\s*${property}\\s*:\\s*([^;]+)`, "g");
+    let match: RegExpExecArray | null;
+    while ((match = declaration.exec(block)) !== null) {
+      value = match[1].trim();
+    }
+  }
+  return value;
+}
+
+function computedDeclaration(html: string, selector: string, property: string): string {
+  const dom = new JSDOM(html);
+  const style = dom.window.document.createElement("style");
+  style.textContent = styles;
+  dom.window.document.head.append(style);
+  const element = dom.window.document.querySelector(selector);
+  if (!element) throw new Error(`Missing selector in test DOM: ${selector}`);
+  return dom.window.getComputedStyle(element).getPropertyValue(property).trim();
+}
+
+console.log("\nworkspace preview css");
+
+eq(finalDeclaration(".workspace-preview__body--code", "overflow"), "hidden", "code preview body does not create a nested scroller");
+eq(finalDeclaration(".workspace-preview__body--code", "display"), "flex", "code preview body hosts an editor-like viewport");
+eq(finalDeclaration(".workspace-preview__body--code", "flex-direction"), "column", "truncated code notes stack above the code viewport");
+eq(
+  computedDeclaration(
+    `<html data-theme-style="default"><head></head><body><aside class="workspace-panel workspace-panel--embedded"><div class="workspace-preview__body workspace-preview__body--code"></div></aside></body></html>`,
+    ".workspace-preview__body--code",
+    "padding",
+  ),
+  "0px",
+  "code preview body keeps zero padding under embedded and themed cascade",
+);
+eq(finalDeclaration(".workspace-preview__body--code .workspace-note", "flex"), "0 0 auto", "code truncation note keeps its own row");
+eq(finalDeclaration(".workspace-preview__body--code .code-block", "display"), "flex", "code block fills the preview viewport");
+eq(finalDeclaration(".workspace-preview__body--code .code-block__wrap", "display"), "flex", "code wrapper keeps the preview viewport height");
+eq(finalDeclaration(".workspace-preview__body--code .code-block__wrap", "flex"), "1 1 auto", "code wrapper participates in the preview flex height");
+eq(finalDeclaration(".workspace-preview__body--code .code-block__wrap", "min-height"), "0", "code wrapper can shrink around the scrollable code viewport");
+eq(finalDeclaration(".workspace-preview__body--code .code", "overflow"), "auto", "code viewport owns horizontal and vertical scrolling");
+eq(finalDeclaration(".workspace-preview__body--code .code", "min-height"), "0", "code viewport can shrink inside the preview pane");
+eq(finalDeclaration(".workspace-preview__body--code .code", "margin"), "0", "code viewport scrollbar sits at the visible pane bottom");
+eq(
+  finalDeclaration(".workspace-panel--with-tree-rail:not(.workspace-panel--tree-hidden)", "grid-template-columns"),
+  "var(--workspace-tree-rail-width) var(--workspace-tree-width) minmax(var(--workspace-preview-min-width), 1fr)",
+  "split mode keeps a narrow tree toggle rail beside the file tree",
+);
+eq(finalDeclaration(".workspace-panel--with-tree-rail:not(.workspace-panel--tree-hidden) .workspace-files", "grid-column"), "2", "file tree sits beside the rail");
+eq(finalDeclaration(".workspace-panel--with-tree-rail:not(.workspace-panel--tree-hidden) .workspace-preview", "grid-column"), "3", "preview sits after rail and tree");
+eq(
+  finalDeclaration(".workspace-panel--with-tree-rail .workspace-tree-resizer", "left"),
+  "calc(var(--workspace-tree-rail-width) + var(--workspace-tree-width) - 4px)",
+  "tree resizer accounts for the persistent rail",
+);
+eq(
+  finalDeclaration(".workspace-panel--tree-hidden", "grid-template-columns"),
+  "var(--workspace-tree-rail-width) minmax(0, 1fr)",
+  "preview-only mode keeps a narrow tree toggle rail",
+);
+eq(finalDeclaration(".workspace-panel--tree-hidden .workspace-preview", "grid-column"), "2", "preview sits beside the rail");
+
+console.log(`\n${passed} passed, ${failed} failed`);
+if (failed > 0) process.exit(1);

desktop/frontend/src/__tests__/workspace-split.test.ts

@@ -0,0 +1,257 @@
+// Run: tsx src/__tests__/workspace-split.test.ts
+
+import {
+  initialWorkspaceSplitTreeWidth,
+  resolveWorkspaceSplitTreeWidth,
+  shouldInitializeWorkspaceSplitOnFileSelect,
+  workspaceSplitCanFit,
+  workspaceSplitTreeWidthFromPointer,
+} from "../lib/workspaceSplit";
+import { resolveWorkspacePanelWidth } from "../lib/workspaceLayout";
+import { closeWorkspacePreviewTab } from "../lib/workspacePreviewTabs";
+import { shouldScrollWorkspaceTreeSelection } from "../lib/workspaceTreeReveal";
+import { mergeWorkspaceSearchResults } from "../lib/workspaceTreeSearch";
+
+let passed = 0;
+let failed = 0;
+
+function eq(a: unknown, b: unknown, label: string) {
+  if (a === b) {
+    process.stdout.write(`  PASS  ${label}\n`);
+    passed += 1;
+  } else {
+    process.stdout.write(`  FAIL  ${label}: expected ${JSON.stringify(b)}, got ${JSON.stringify(a)}\n`);
+    failed += 1;
+  }
+}
+
+console.log("\nworkspace file split");
+
+const TREE_MIN_WIDTH = 140;
+const TREE_RAIL_WIDTH = 44;
+const PREVIEW_MIN_WIDTH = 140;
+
+eq(
+  initialWorkspaceSplitTreeWidth({
+    panelWidth: 660,
+    railWidth: TREE_RAIL_WIDTH,
+    savedTreeWidth: null,
+    treeMinWidth: TREE_MIN_WIDTH,
+    previewMinWidth: PREVIEW_MIN_WIDTH,
+  }),
+  308,
+  "first split divides the file area evenly after reserving the tree rail",
+);
+
+eq(
+  initialWorkspaceSplitTreeWidth({
+    panelWidth: 660,
+    railWidth: TREE_RAIL_WIDTH,
+    savedTreeWidth: 620,
+    treeMinWidth: TREE_MIN_WIDTH,
+    previewMinWidth: PREVIEW_MIN_WIDTH,
+  }),
+  476,
+  "tree width is clamped so the preview keeps its minimum width",
+);
+
+eq(
+  workspaceSplitTreeWidthFromPointer({
+    clientX: 400,
+    panelLeft: 100,
+    panelWidth: 660,
+    railWidth: TREE_RAIL_WIDTH,
+    treeMinWidth: TREE_MIN_WIDTH,
+    previewMinWidth: PREVIEW_MIN_WIDTH,
+  }),
+  256,
+  "tree resize pointer coordinates start after the tree rail",
+);
+
+eq(
+  workspaceSplitTreeWidthFromPointer({
+    clientX: 700,
+    panelLeft: 100,
+    panelWidth: 660,
+    railWidth: TREE_RAIL_WIDTH,
+    treeMinWidth: TREE_MIN_WIDTH,
+    previewMinWidth: PREVIEW_MIN_WIDTH,
+  }),
+  476,
+  "tree resize pointer clamps against the preview minimum after reserving the rail",
+);
+
+eq(
+  resolveWorkspaceSplitTreeWidth({
+    mode: "even",
+    currentTreeWidth: 140,
+    panelWidth: 660,
+    railWidth: TREE_RAIL_WIDTH,
+    treeMinWidth: TREE_MIN_WIDTH,
+    previewMinWidth: PREVIEW_MIN_WIDTH,
+  }),
+  308,
+  "default split recomputes evenly after the parent preview width applies",
+);
+
+eq(
+  resolveWorkspaceSplitTreeWidth({
+    mode: "manual",
+    currentTreeWidth: 256,
+    panelWidth: 660,
+    railWidth: TREE_RAIL_WIDTH,
+    treeMinWidth: TREE_MIN_WIDTH,
+    previewMinWidth: PREVIEW_MIN_WIDTH,
+  }),
+  256,
+  "manual split width is preserved when the parent width changes",
+);
+
+eq(
+  resolveWorkspacePanelWidth({
+    open: true,
+    maximized: false,
+    preferredWidth: 660,
+    minWidth: 300,
+    availableWidth: 228,
+  }),
+  228,
+  "outer file area can still shrink below split target width",
+);
+
+eq(
+  workspaceSplitCanFit({
+    panelWidth: 323,
+    railWidth: TREE_RAIL_WIDTH,
+    treeMinWidth: TREE_MIN_WIDTH,
+    previewMinWidth: PREVIEW_MIN_WIDTH,
+  }),
+  false,
+  "file tree collapses before rail tree and preview would overflow a narrow panel",
+);
+
+eq(
+  workspaceSplitCanFit({
+    panelWidth: 324,
+    railWidth: TREE_RAIL_WIDTH,
+    treeMinWidth: TREE_MIN_WIDTH,
+    previewMinWidth: PREVIEW_MIN_WIDTH,
+  }),
+  true,
+  "file tree remains available at the exact split minimum width",
+);
+
+eq(
+  workspaceSplitCanFit({
+    panelWidth: undefined,
+    railWidth: TREE_RAIL_WIDTH,
+    treeMinWidth: TREE_MIN_WIDTH,
+    previewMinWidth: PREVIEW_MIN_WIDTH,
+  }),
+  true,
+  "file tree stays visible until the measured panel width is known",
+);
+
+const closedRecentPreview = closeWorkspacePreviewTab(["a.ts", "b.ts", "c.ts"], "c.ts");
+eq(closedRecentPreview.selectedPath, "b.ts", "closing the current preview falls back to the previous recent file");
+eq(closedRecentPreview.openTabs.join(","), "a.ts,b.ts", "closing one preview preserves the other recent files");
+
+eq(
+  shouldInitializeWorkspaceSplitOnFileSelect({ previewVisible: false, treeVisible: true }),
+  true,
+  "opening the first preview initializes an even file split",
+);
+
+eq(
+  shouldInitializeWorkspaceSplitOnFileSelect({ previewVisible: true, treeVisible: true }),
+  false,
+  "switching files while preview and tree are visible preserves the manual split",
+);
+
+eq(
+  shouldInitializeWorkspaceSplitOnFileSelect({ previewVisible: true, treeVisible: false }),
+  true,
+  "revealing the hidden tree initializes an even file split",
+);
+
+const effectiveEvenTreeWidth = resolveWorkspaceSplitTreeWidth({
+  mode: "even",
+  currentTreeWidth: TREE_MIN_WIDTH,
+  panelWidth: 660,
+  railWidth: TREE_RAIL_WIDTH,
+  treeMinWidth: TREE_MIN_WIDTH,
+  previewMinWidth: PREVIEW_MIN_WIDTH,
+});
+
+eq(
+  resolveWorkspaceSplitTreeWidth({
+    mode: "manual",
+    currentTreeWidth: effectiveEvenTreeWidth,
+    panelWidth: 660,
+    railWidth: TREE_RAIL_WIDTH,
+    treeMinWidth: TREE_MIN_WIDTH,
+    previewMinWidth: PREVIEW_MIN_WIDTH,
+  }),
+  effectiveEvenTreeWidth,
+  "entering manual resize from even split keeps the currently rendered tree width",
+);
+
+eq(
+  shouldScrollWorkspaceTreeSelection({
+    selectedPath: "src/App.tsx",
+    pendingRevealPath: "src/App.tsx",
+    actualTreeVisible: true,
+    selectedIndex: 42,
+  }),
+  true,
+  "pending file reveal scrolls once the selected row is present",
+);
+
+eq(
+  shouldScrollWorkspaceTreeSelection({
+    selectedPath: "src/App.tsx",
+    pendingRevealPath: null,
+    actualTreeVisible: true,
+    selectedIndex: 42,
+  }),
+  false,
+  "manual folder changes do not re-scroll to the previous selected file",
+);
+
+eq(
+  shouldScrollWorkspaceTreeSelection({
+    selectedPath: "src/App.tsx",
+    pendingRevealPath: "src/App.tsx",
+    actualTreeVisible: true,
+    selectedIndex: -1,
+  }),
+  false,
+  "pending file reveal waits until async directory loading exposes the row",
+);
+
+eq(
+  mergeWorkspaceSearchResults(
+    [{ path: "README.md", entry: { name: "README.md", isDir: false } }],
+    [
+      { name: "src/deep/README.md", isDir: false },
+      { name: "README.md", isDir: false },
+    ],
+  ).map((row) => `${row.path}:${row.entry.name}`).join("|"),
+  "README.md:README.md|src/deep/README.md:README.md",
+  "workspace filter merges backend deep search results without duplicating loaded rows",
+);
+
+eq(
+  mergeWorkspaceSearchResults(
+    [{ path: "docs/assets/", entry: { name: "assets", isDir: true } }],
+    [
+      { name: "docs/assets", isDir: true },
+      { name: "docs/guides", isDir: true },
+    ],
+  ).map((row) => `${row.path}:${row.entry.name}:${row.entry.isDir}`).join("|"),
+  "docs/assets/:assets:true|docs/guides/:guides:true",
+  "workspace filter normalizes directory search results to tree row paths",
+);
+
+console.log(`\n${passed} passed, ${failed} failed`);
+if (failed > 0) process.exit(1);

desktop/frontend/src/components/AppChrome.tsx

@@ -1,4 +1,4 @@
-import { Minus, PanelLeft, PanelRight, Search, Square, X } from "lucide-react";
+import { PanelLeft, PanelRight, Search } from "lucide-react";
 import { TabBar } from "./TabBar";
 import type { TabMeta } from "../lib/types";
 import { useT } from "../lib/i18n";
@@ -58,14 +58,12 @@ export function AppChrome({
 }: AppChromeProps) {
   const t = useT();
   const darwinChrome = platform === "darwin";
-  const showWindowsPreviewControls = browserPreviewChrome && platform === "windows";
   const chromeClassName = [
     "app-chrome",
     "app-chrome--tabs",
     darwinChrome ? "app-chrome--darwin-tabs" : "app-chrome--native-tabs",
     workbenchChrome ? "app-chrome--workbench" : "",
     !darwinChrome ? "app-chrome--identityless" : "",
-    showWindowsPreviewControls ? "app-chrome--preview-window-controls" : "",
     `app-chrome--platform-${platform}`,
   ].filter(Boolean).join(" ");
   const tabBar = (
@@ -194,19 +192,6 @@ export function AppChrome({
           <PanelRight size={16} />
         </button>
       )}
-      {showWindowsPreviewControls && (
-        <div className="app-chrome__window-controls app-chrome__window-controls--windows" aria-hidden="true">
-          <span className="app-chrome__window-control app-chrome__window-control--minimize">
-            <Minus size={12} strokeWidth={1.9} />
-          </span>
-          <span className="app-chrome__window-control app-chrome__window-control--maximize">
-            <Square size={10} strokeWidth={1.8} />
-          </span>
-          <span className="app-chrome__window-control app-chrome__window-control--close">
-            <X size={12} strokeWidth={1.9} />
-          </span>
-        </div>
-      )}
     </header>
   );
 }

desktop/frontend/src/components/ApprovalModal.tsx

@@ -1,10 +1,31 @@
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { KeyboardEvent as ReactKeyboardEvent } from "react";
 import gsap from "gsap";
 import { useT } from "../lib/i18n";
-import type { WireApproval } from "../lib/types";
+import type { ComposerInsertRequest, DirEntry, WireApproval } from "../lib/types";
 import { PromptAction, PromptBadge, PromptHeaderAction, PromptShelf } from "./PromptShelf";
 import { playAttentionChime } from "../lib/sound";
 import { DUR_FAST } from "../lib/gsapAnimations";
+import {
+  FileReferenceMenu,
+  insertTextAtSelection,
+  pickInlineFileReference,
+  useFileReferenceMenu,
+} from "./FileReferenceMenu";
+
+function animateShelfExit(
+  el: HTMLDivElement,
+  options: { opacity: number; y: number; duration: number; ease: string; onComplete: () => void },
+) {
+  const animator = typeof gsap.to === "function"
+    ? gsap
+    : (gsap as unknown as { default?: typeof gsap }).default;
+  if (animator && typeof animator.to === "function") {
+    animator.to(el, options);
+    return;
+  }
+  options.onComplete();
+}
 
 export function ApprovalModal({
   approval,
@@ -12,33 +33,46 @@ export function ApprovalModal({
   onRevisePlan,
   onExitPlan,
   onStop,
+  cwd,
+  insertRequest,
+  onRevisionActiveChange,
 }: {
   approval: WireApproval;
   onAnswer: (allow: boolean, session: boolean, persist: boolean) => void;
   onRevisePlan?: (text: string) => void;
   onExitPlan?: () => void;
   onStop: () => void;
+  cwd?: string;
+  insertRequest?: ComposerInsertRequest | null;
+  onRevisionActiveChange?: (active: boolean) => void;
 }) {
   const t = useT();
   const isPlanApproval = approval.tool === "exit_plan_mode";
+  const subject = approval.subject.trim();
+  const subjectSummary = subject.split(/\r?\n/).find((line) => line.trim())?.trim() ?? "";
+  const toolMeta = approval.reason?.trim() || subjectSummary || approval.tool;
+  const hasToolDetails = Boolean(approval.reason || subject);
+  const showToolDetailsByDefault = !isPlanApproval && hasToolDetails;
   const [revisionOpen, setRevisionOpen] = useState(false);
   const [revisionText, setRevisionText] = useState("");
+  const [detailsOpen, setDetailsOpen] = useState(() => showToolDetailsByDefault);
   const [selectedIndex, setSelectedIndex] = useState(() => (isPlanApproval ? 1 : 0));
   const cardRef = useRef<HTMLDivElement | null>(null);
   const shelfRef = useRef<HTMLDivElement | null>(null);
   const inputRef = useRef<HTMLTextAreaElement | null>(null);
+  const consumedInsertIdRef = useRef(0);
   // When consecutive approvals arrive, animate the old card out before
   // the new one slides in.  GSAP fromTo on the shelf wrapper avoids the
   // jarring pop when the API cycles through 4+ pending approvals.
   const closingRef = useRef(false);
-  const subject = approval.subject.trim();
+  const fileMenu = useFileReferenceMenu(revisionText, cwd);
 
   const answerWithExit = (fn: () => void) => {
     if (closingRef.current) return;
     closingRef.current = true;
     const el = shelfRef.current;
     if (el) {
-      gsap.to(el, {
+      animateShelfExit(el, {
         opacity: 0,
         y: 8,
         duration: DUR_FAST,
@@ -69,9 +103,10 @@ export function ApprovalModal({
     cardRef.current?.focus();
     setRevisionOpen(false);
     setRevisionText("");
+    setDetailsOpen(showToolDetailsByDefault);
     setSelectedIndex(isPlanApproval ? 1 : 0);
     playAttentionChime();
-  }, [approval.id, isPlanApproval]);
+  }, [approval.id, isPlanApproval, showToolDetailsByDefault]);
 
   const actionCount = isPlanApproval ? 3 : 4;
   const selectedIndexRef = useRef(selectedIndex);
@@ -106,8 +141,75 @@ export function ApprovalModal({
   }, [isPlanApproval, onAnswer, onExitPlan, onStop, actionCount]);
 
   useEffect(() => {
-    if (revisionOpen) inputRef.current?.focus();
-  }, [revisionOpen]);
+    if (revisionOpen) {
+      onRevisionActiveChange?.(true);
+      inputRef.current?.focus();
+      return () => onRevisionActiveChange?.(false);
+    }
+    onRevisionActiveChange?.(false);
+  }, [revisionOpen, onRevisionActiveChange]);
+
+  const focusRevisionInput = (caret = revisionText.length) => {
+    requestAnimationFrame(() => {
+      const input = inputRef.current;
+      if (!input) return;
+      input.focus();
+      input.setSelectionRange(caret, caret);
+    });
+  };
+
+  const insertRevisionText = useCallback((text: string) => {
+    const input = inputRef.current;
+    const start = input?.selectionStart ?? revisionText.length;
+    const end = input?.selectionEnd ?? start;
+    const next = insertTextAtSelection(revisionText, text, start, end);
+    setRevisionText(next.value);
+    focusRevisionInput(next.caret);
+  }, [revisionText]);
+
+  useEffect(() => {
+    if (!insertRequest || insertRequest.id === consumedInsertIdRef.current) return;
+    consumedInsertIdRef.current = insertRequest.id;
+    insertRevisionText(insertRequest.text);
+  }, [insertRequest, insertRevisionText]);
+
+  const pickRevisionFile = (entry: DirEntry) => {
+    const next = pickInlineFileReference(revisionText, fileMenu.atRaw, fileMenu.atDir, entry);
+    setRevisionText(next);
+    focusRevisionInput(next.length);
+  };
+
+  const onRevisionKeyDown = (event: ReactKeyboardEvent<HTMLTextAreaElement>) => {
+    if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+      submitRevision();
+      event.stopPropagation();
+      return;
+    }
+    if (fileMenu.open) {
+      if (event.key === "ArrowDown" && fileMenu.count > 0) {
+        event.preventDefault();
+        fileMenu.setActive((index) => (index + 1) % fileMenu.count);
+        return;
+      }
+      if (event.key === "ArrowUp" && fileMenu.count > 0) {
+        event.preventDefault();
+        fileMenu.setActive((index) => (index - 1 + fileMenu.count) % fileMenu.count);
+        return;
+      }
+      if ((event.key === "Enter" || event.key === "Tab") && fileMenu.count > 0) {
+        event.preventDefault();
+        const entry = fileMenu.items[fileMenu.active];
+        if (entry) pickRevisionFile(entry);
+        return;
+      }
+      if (event.key === "Escape") {
+        event.preventDefault();
+        fileMenu.dismiss();
+        return;
+      }
+    }
+    event.stopPropagation();
+  };
 
   const submitRevision = () => {
     const text = revisionText.trim();
@@ -123,6 +225,7 @@ export function ApprovalModal({
     return (
       <div ref={shelfRef}>
         <PromptShelf
+          className="prompt-shelf--compact prompt-shelf--plan-approval"
           barRef={cardRef}
           titleId="plan-approval-title"
           title={t("approval.planReady")}
@@ -155,11 +258,17 @@ export function ApprovalModal({
                 rows={3}
                 placeholder={t("approval.revisePlanPlaceholder")}
                 onChange={(event) => setRevisionText(event.target.value)}
-                onKeyDown={(event) => {
-                  if ((event.metaKey || event.ctrlKey) && event.key === "Enter") submitRevision();
-                  event.stopPropagation();
-                }}
+                onFocus={() => onRevisionActiveChange?.(true)}
+                onKeyDown={onRevisionKeyDown}
               />
+              {fileMenu.open && (
+                <FileReferenceMenu
+                  items={fileMenu.items}
+                  activeIndex={fileMenu.active}
+                  onPick={pickRevisionFile}
+                  onHover={fileMenu.setActive}
+                />
+              )}
               <div className="plan-revision__actions">
                 <button className="btn" onClick={() => setRevisionOpen(false)}>
                   {t("common.cancel")}
@@ -178,14 +287,23 @@ export function ApprovalModal({
   return (
     <div ref={shelfRef}>
       <PromptShelf
+        className="prompt-shelf--compact prompt-shelf--tool-approval"
         barRef={cardRef}
         titleId="tool-approval-title"
         title={t("approval.toolPending")}
         badges={<PromptBadge>{approval.tool}</PromptBadge>}
+        meta={toolMeta}
         headerActions={
-          <PromptHeaderAction onClick={() => answerWithExit(onStop)} ariaLabel={t("composer.stopShort")}>
-            Esc
-          </PromptHeaderAction>
+          <>
+            {hasToolDetails && (
+              <PromptHeaderAction onClick={() => setDetailsOpen((open) => !open)}>
+                {t(detailsOpen ? "approval.hideDetails" : "approval.details")}
+              </PromptHeaderAction>
+            )}
+            <PromptHeaderAction onClick={() => answerWithExit(onStop)} ariaLabel={t("composer.stopShort")}>
+              Esc
+            </PromptHeaderAction>
+          </>
         }
         actions={
           <>
@@ -196,8 +314,13 @@ export function ApprovalModal({
           </>
         }
       >
-        {subject && (
-          <pre className="approval-subject">{subject}</pre>
+        {detailsOpen && (
+          <div className="approval-details">
+            {approval.reason && <div className="approval-reason">{approval.reason}</div>}
+            {subject && (
+              <pre className="approval-subject">{subject}</pre>
+            )}
+          </div>
         )}
       </PromptShelf>
     </div>

desktop/frontend/src/components/AskCard.tsx

@@ -22,8 +22,10 @@ export function AskCard({
   // Per-question state: selected option labels, and an optional typed answer.
   const [sel, setSel] = useState<Record<string, string[]>>({});
   const [custom, setCustom] = useState<Record<string, string>>({});
+  const [customOpen, setCustomOpen] = useState(false);
   const [active, setActive] = useState(0);
   const shelfRef = useRef<HTMLDivElement | null>(null);
+  const customInputRef = useRef<HTMLInputElement | null>(null);
   const advanceTimer = useRef<number | null>(null);
 
   const questions = ask.questions;
@@ -36,6 +38,7 @@ export function AskCard({
     shelfRef.current?.focus();
     setSel({});
     setCustom({});
+    setCustomOpen(false);
     setActive(0);
     if (advanceTimer.current != null) window.clearTimeout(advanceTimer.current);
     playAttentionChime();
@@ -66,7 +69,15 @@ export function AskCard({
     (sel[question.id]?.length ?? 0) > 0 || (custom[question.id]?.trim() ?? "") !== "";
 
   const currentAnswered = q ? answered(q) : false;
-  const showSubmitAction = q ? q.multi || Boolean(custom[q.id]?.trim()) : false;
+  const showSubmitAction = q ? q.multi || customOpen || Boolean(custom[q.id]?.trim()) : false;
+
+  useEffect(() => {
+    setCustomOpen(false);
+  }, [active]);
+
+  useEffect(() => {
+    if (customOpen) customInputRef.current?.focus();
+  }, [customOpen]);
 
   const finishOrAdvance = (nextSel = sel, nextCustom = custom) => {
     if (advanceTimer.current != null) {
@@ -89,6 +100,7 @@ export function AskCard({
 
     setCustom(nextCustom);
     setSel(nextSel);
+    setCustomOpen(false);
 
     if (!question.multi) {
       if (advanceTimer.current != null) window.clearTimeout(advanceTimer.current);
@@ -148,6 +160,7 @@ export function AskCard({
 
   return (
     <PromptShelf
+      className="prompt-shelf--compact prompt-shelf--ask"
       barRef={shelfRef}
       titleId="ask-shelf-title"
       title={t("ask.title")}
@@ -165,6 +178,9 @@ export function AskCard({
       headerActions={
         <>
           <PromptHeaderAction onClick={onDismiss}>{t("ask.justChat")}</PromptHeaderAction>
+          {!customOpen && (
+            <PromptHeaderAction onClick={() => setCustomOpen(true)}>{t("ask.customAnswer")}</PromptHeaderAction>
+          )}
           <PromptHeaderAction onClick={onStop} ariaLabel={t("composer.stopShort")}>Esc</PromptHeaderAction>
         </>
       }
@@ -213,8 +229,10 @@ export function AskCard({
         )
       }
     >
+      {customOpen && (
       <div className="ask-shelf__custom-row">
         <input
+          ref={customInputRef}
           className="ask-shelf__custom"
           placeholder={t("ask.customPlaceholder")}
           value={custom[q.id] ?? ""}
@@ -225,6 +243,7 @@ export function AskCard({
           }}
         />
       </div>
+      )}
     </PromptShelf>
   );
 }

desktop/frontend/src/components/CapabilitiesPanel.tsx

@@ -1,8 +1,9 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
+import { ShieldCheck, ShieldOff } from "lucide-react";
 import { asArray } from "../lib/array";
 import { app, openExternal } from "../lib/bridge";
 import { useT } from "../lib/i18n";
-import { mcpServerLifecycleActions } from "../lib/mcpServerLifecycle";
+import { mcpServerLifecycleActions, mcpServerRetryableFromAvailableList } from "../lib/mcpServerLifecycle";
 import type { CapabilitiesView, MCPServerInput, ServerView, SkillRootSkillView, SkillRootView, SkillsSettingsView, SkillView, TabMeta } from "../lib/types";
 import { InlineConfirmButton } from "./InlineConfirmButton";
 import { ResizableDrawer } from "./ResizableDrawer";
@@ -108,6 +109,7 @@ export function CapabilitiesPanel({
       active: servers.filter((s) => s.status !== "failed"),
     };
   }, [view]);
+  const retryableActiveServerNames = useMemo(() => retryableAvailableServerNames(serverGroups.active), [serverGroups.active]);
   const toggleSkill = useCallback((name: string) => {
     setExpandedSkills((prev) => {
       const next = new Set(prev);
@@ -213,7 +215,17 @@ export function CapabilitiesPanel({
                 )}
                 {serverGroups.active.length > 0 && (
                   <div className="cap-server-section">
-                    <div className="cap-server-section__title">{t("caps.availableServers")}</div>
+                    <div className="cap-server-section__head">
+                      <div className="cap-server-section__title">{t("caps.availableServers")}</div>
+                      <button
+                        className="btn btn--small"
+                        disabled={busy || retryableActiveServerNames.length === 0}
+                        type="button"
+                        onClick={() => void mutate(() => Promise.allSettled(retryableActiveServerNames.map((name) => app.ReconnectMCPServer(name))))}
+                      >
+                        {t("caps.retryAll")}
+                      </button>
+                    </div>
                     <ServerGroup
                       busy={busy}
                       servers={serverGroups.active}
@@ -228,6 +240,9 @@ export function CapabilitiesPanel({
                       onRetry={(name) => void mutate(() => app.ReconnectMCPServer(name))}
                       onReconnect={(name) => void mutate(() => app.ReconnectMCPServer(name))}
                       onConfirmClearAuth={(name) => void mutate(() => app.ClearMCPServerAuthentication(name))}
+                      onTrustTool={(name, toolName) => void mutate(() => app.TrustMCPServerTool(name, toolName))}
+                      onTrustTools={(name, toolNames) => void mutate(() => app.TrustMCPServerTools(name, toolNames))}
+                      onUntrustTool={(name, toolName) => void mutate(() => app.UntrustMCPServerTool(name, toolName))}
                       onToggle={(name, on) => void mutate(() => app.SetMCPServerEnabled(name, on))}
                       onUpdate={(name, input) =>
                         void mutate(() => app.UpdateMCPServer(name, input)).then((ok) => {
@@ -309,7 +324,9 @@ function normalizeServerViews(servers: ServerView[] | null | undefined): ServerV
       ...server,
       args: asArray(server.args),
       envKeys: asArray(server.envKeys),
+      headerKeys: asArray(server.headerKeys),
       toolList: asArray(server.toolList),
+      trustedReadOnlyTools: asArray(server.trustedReadOnlyTools),
     })),
   );
 }
@@ -640,6 +657,9 @@ function ServerGroup({
   onRetry,
   onReconnect,
   onConfirmClearAuth,
+  onTrustTool,
+  onTrustTools,
+  onUntrustTool,
   onToggle,
   onUpdate,
   onToggleDetails,
@@ -656,6 +676,9 @@ function ServerGroup({
   onRetry: (name: string) => void;
   onReconnect: (name: string) => void;
   onConfirmClearAuth: (name: string) => void;
+  onTrustTool: (name: string, toolName: string) => void;
+  onTrustTools: (name: string, toolNames: string[]) => void;
+  onUntrustTool: (name: string, toolName: string) => void;
   onToggle: (name: string, on: boolean) => void;
   onUpdate: (name: string, input: MCPServerInput) => void;
   onToggleDetails: (name: string) => void;
@@ -678,6 +701,9 @@ function ServerGroup({
           onRetry={() => onRetry(s.name)}
           onReconnect={() => onReconnect(s.name)}
           onConfirmClearAuth={() => onConfirmClearAuth(s.name)}
+          onTrustTool={(toolName) => onTrustTool(s.name, toolName)}
+          onTrustTools={(toolNames) => onTrustTools(s.name, toolNames)}
+          onUntrustTool={(toolName) => onUntrustTool(s.name, toolName)}
           onToggle={(on) => onToggle(s.name, on)}
           onUpdate={(input) => onUpdate(s.name, input)}
           onToggleDetails={() => onToggleDetails(s.name)}
@@ -834,6 +860,9 @@ function ServerRow({
   onRetry,
   onReconnect,
   onConfirmClearAuth,
+  onTrustTool,
+  onTrustTools,
+  onUntrustTool,
   onToggle,
   onUpdate,
   onToggleDetails,
@@ -850,6 +879,9 @@ function ServerRow({
   onRetry: () => void;
   onReconnect: () => void;
   onConfirmClearAuth: () => void;
+  onTrustTool: (toolName: string) => void;
+  onTrustTools: (toolNames: string[]) => void;
+  onUntrustTool: (toolName: string) => void;
   onToggle: (on: boolean) => void;
   onUpdate: (input: MCPServerInput) => void;
   onToggleDetails: () => void;
@@ -933,6 +965,9 @@ function ServerRow({
           onConnectNow={onRetry}
           onReconnect={onReconnect}
           onConfirmClearAuth={onConfirmClearAuth}
+          onTrustTool={onTrustTool}
+          onTrustTools={onTrustTools}
+          onUntrustTool={onUntrustTool}
           toolsExpanded={toolsExpanded}
           editing={editing}
           onEdit={onEdit}
@@ -953,6 +988,9 @@ function ServerDetails({
   onConnectNow,
   onReconnect,
   onConfirmClearAuth,
+  onTrustTool,
+  onTrustTools,
+  onUntrustTool,
   toolsExpanded,
   editing,
   onEdit,
@@ -967,6 +1005,9 @@ function ServerDetails({
   onConnectNow: () => void;
   onReconnect: () => void;
   onConfirmClearAuth: () => void;
+  onTrustTool: (toolName: string) => void;
+  onTrustTools: (toolNames: string[]) => void;
+  onUntrustTool: (toolName: string) => void;
   toolsExpanded: boolean;
   editing: boolean;
   onEdit: () => void;
@@ -983,6 +1024,11 @@ function ServerDetails({
   const canShowTools = s.status === "connected" && ((s.tools ?? 0) > 0 || (tools?.length ?? 0) > 0);
   const showClearAuth = canClearAuth(s);
   const authLabel = serverAuthLabel(s, t);
+  const trustedReadOnlyTools = s.trustedReadOnlyTools ?? [];
+  const trustedReadOnlyToolNames = new Set(trustedReadOnlyTools);
+  const canTrustTool = s.configured && !s.builtIn;
+  const reportedReadOnlyToolNames = (tools ?? []).filter((tool) => tool.readOnlyHint).map((tool) => tool.name);
+  const bulkTrustToolNames = reportedReadOnlyToolNames.filter((name) => !trustedReadOnlyToolNames.has(name));
   if (editing && canEditConfig) {
     return (
       <div className="cap-server-details">
@@ -1019,6 +1065,18 @@ function ServerDetails({
             <span className="cap-detail__value">{s.envKeys.join(", ")}</span>
           </div>
         )}
+        {s.headerKeys && s.headerKeys.length > 0 && (
+          <div className="cap-detail cap-detail--wide">
+            <span className="cap-detail__label">{t("caps.headerKeys")}</span>
+            <span className="cap-detail__value">{s.headerKeys.join(", ")}</span>
+          </div>
+        )}
+        {trustedReadOnlyTools.length > 0 && (
+          <div className="cap-detail cap-detail--wide">
+            <span className="cap-detail__label">{t("caps.trustedReadOnlyTools")}</span>
+            <span className="cap-detail__code">{trustedReadOnlyTools.join(", ")}</span>
+          </div>
+        )}
       </div>
       <div className="cap-detail-actions">
         {canConnectNow && (
@@ -1036,6 +1094,18 @@ function ServerDetails({
             {toolsExpanded ? t("caps.hideTools") : t("caps.showTools")}
           </button>
         )}
+        {canTrustTool && bulkTrustToolNames.length > 0 && (
+          <button
+            className="btn btn--small cap-trust-bulk"
+            disabled={busy}
+            onClick={() => onTrustTools(bulkTrustToolNames)}
+            title={t("caps.trustReportedReadOnlyTitle")}
+            type="button"
+          >
+            <ShieldCheck aria-hidden size={13} strokeWidth={2.2} />
+            {t("caps.trustReportedReadOnly", { count: bulkTrustToolNames.length })}
+          </button>
+        )}
         {showClearAuth && (
           <InlineConfirmButton
             label={t("caps.clearAuth")}
@@ -1065,12 +1135,55 @@ function ServerDetails({
         tools && tools.length > 0 ? (
           <div className="cap-tool-list">
             <div className="cap-tool-list__title">{t("caps.tools")}</div>
-            {tools.map((tool) => (
-              <div className="cap-tool" key={tool.name}>
-                <div className="cap-tool__name">{tool.name}</div>
-                {tool.description && <div className="cap-tool__desc">{tool.description}</div>}
-              </div>
-            ))}
+            {tools.map((tool) => {
+              const trusted = trustedReadOnlyToolNames.has(tool.name);
+              return (
+                <div className="cap-tool" key={tool.name}>
+                  <div className="cap-tool__name">{tool.name}</div>
+                  <div className="cap-tool__desc">
+                    <span>{tool.description}</span>
+                    {tool.readOnlyHint && (
+                      <span className="cap-tool-hint" title={t("caps.reportedReadOnlyTitle")}>
+                        {t("caps.reportedReadOnly")}
+                      </span>
+                    )}
+                  </div>
+                  <div className="cap-tool__action">
+                    {canTrustTool ? (
+                      trusted ? (
+                        <div className="cap-tool-trust-stack">
+                          <span className="cap-tool-trust cap-tool-trust--trusted" title={t("caps.trustedReadOnlyTitle")}>
+                            <ShieldCheck aria-hidden size={12} strokeWidth={2.2} />
+                            {t("caps.trustedReadOnly")}
+                          </span>
+                          <button
+                            className="btn btn--small cap-tool-untrust-btn"
+                            disabled={busy}
+                            onClick={() => onUntrustTool(tool.name)}
+                            title={t("caps.untrustReadOnlyTitle")}
+                            type="button"
+                          >
+                            <ShieldOff aria-hidden size={12} strokeWidth={2.2} />
+                            {t("caps.untrustReadOnly")}
+                          </button>
+                        </div>
+                      ) : (
+                        <button
+                          className="btn btn--small cap-tool-trust-btn"
+                          disabled={busy}
+                          onClick={() => onTrustTool(tool.name)}
+                          title={t("caps.trustReadOnlyTitle")}
+                          type="button"
+                        >
+                          <ShieldCheck aria-hidden size={12} strokeWidth={2.2} />
+                          {t("caps.trustReadOnly")}
+                        </button>
+                      )
+                    ) : null}
+                  </div>
+                </div>
+              );
+            })}
           </div>
         ) : (
           <div className="cap-tool-empty">{t("caps.noToolDetails")}</div>
@@ -1096,19 +1209,23 @@ function EditServerForm({
   const [transport, setTransport] = useState(initialTransport);
   const [command, setCommand] = useState(initialTransport === "stdio" ? serverCommand(s) : "");
   const [url, setUrl] = useState(initialTransport === "stdio" ? "" : s.url || serverCommand(s));
+  const [headers, setHeaders] = useState("");
   const [env, setEnv] = useState("");
   const isStdio = transport === "stdio";
   const ready = isStdio ? command.trim() !== "" : url.trim() !== "";
 
   const submit = () => {
     const envText = env.trim();
+    const headerText = headers.trim();
     onSave({
       name: s.name,
       transport,
       command: isStdio ? command.trim() : "",
       args: [],
       url: isStdio ? "" : url.trim(),
-      env: envText === "" ? null : parseEnvText(envText),
+      env: envText === "" ? null : parseKeyValueText(envText),
+      headers: isStdio || headerText === "" ? null : parseKeyValueText(headerText),
+      trustedReadOnlyTools: s.trustedReadOnlyTools ?? [],
     });
   };
 
@@ -1138,6 +1255,19 @@ function EditServerForm({
             <input className="mem-input" value={url} disabled={busy} onChange={(e) => setUrl(e.target.value)} placeholder={t("caps.urlPlaceholder")} />
           </label>
         )}
+        {!isStdio && (
+          <label className="cap-detail cap-detail--wide">
+            <span className="cap-detail__label">{t("caps.headersLabel")}</span>
+            <textarea className="mem-textarea cap-config-edit__env" value={headers} disabled={busy} onChange={(e) => setHeaders(e.target.value)} placeholder={t("caps.headersPlaceholder")} spellCheck={false} />
+          </label>
+        )}
+        {!isStdio && s.headerKeys && s.headerKeys.length > 0 && (
+          <div className="cap-detail cap-detail--wide">
+            <span className="cap-detail__label">{t("caps.headerKeys")}</span>
+            <span className="cap-detail__value">{s.headerKeys.join(", ")}</span>
+            <span className="cap-edit-hint">{t("caps.headersPreserveHint")}</span>
+          </div>
+        )}
         <label className="cap-detail cap-detail--wide">
           <span className="cap-detail__label">{t("caps.envLabel")}</span>
           <textarea className="mem-textarea cap-config-edit__env" value={env} disabled={busy} onChange={(e) => setEnv(e.target.value)} placeholder={t("caps.envPlaceholder")} spellCheck={false} />
@@ -1171,13 +1301,15 @@ function normalizeTransportValue(transport: string): string {
   return transport === "http" || transport === "sse" ? transport : "stdio";
 }
 
-function parseEnvText(env: string): Record<string, string> {
-  const envMap: Record<string, string> = {};
-  for (const line of env.split("\n")) {
+function parseKeyValueText(text: string): Record<string, string> {
+  const values: Record<string, string> = {};
+  for (const rawLine of text.split("\n")) {
+    const line = rawLine.trim();
+    if (!line) continue;
     const eq = line.indexOf("=");
-    if (eq > 0) envMap[line.slice(0, eq).trim()] = line.slice(eq + 1).trim();
+    if (eq > 0) values[line.slice(0, eq).trim()] = line.slice(eq + 1).trim();
   }
-  return envMap;
+  return values;
 }
 
 function serverStatusLabel(s: ServerView, t: ReturnType<typeof useT>): string {
@@ -1272,6 +1404,10 @@ function canBulkRemoveFailure(server: ServerView): boolean {
   return kind === "missing-command" || kind === "command-unavailable";
 }
 
+function retryableAvailableServerNames(servers: ServerView[]): string[] {
+  return servers.filter(mcpServerRetryableFromAvailableList).map((s) => s.name);
+}
+
 function serverActionLabel(s: ServerView, t: ReturnType<typeof useT>): string {
   const err = (s.error || "").toLowerCase();
   if (shouldOpenAuth(s)) return t("caps.reauthorize");
@@ -1400,24 +1536,23 @@ function AddServerForm({
   const [transport, setTransport] = useState("stdio");
   const [command, setCommand] = useState("");
   const [url, setUrl] = useState("");
+  const [headers, setHeaders] = useState("");
   const [env, setEnv] = useState("");
 
   const isStdio = transport === "stdio";
   const ready = name.trim() !== "" && (isStdio ? command.trim() !== "" : url.trim() !== "");
 
   const submit = () => {
-    const envMap: Record<string, string> = {};
-    for (const line of env.split("\n")) {
-      const eq = line.indexOf("=");
-      if (eq > 0) envMap[line.slice(0, eq).trim()] = line.slice(eq + 1).trim();
-    }
+    const envText = env.trim();
+    const headerText = headers.trim();
     onAdd({
       name: name.trim(),
       transport,
       command: isStdio ? command.trim() : "",
       args: [],
       url: isStdio ? "" : url.trim(),
-      env: envMap,
+      env: envText === "" ? null : parseKeyValueText(envText),
+      headers: isStdio || headerText === "" ? null : parseKeyValueText(headerText),
     });
   };
 
@@ -1435,6 +1570,12 @@ function AddServerForm({
       ) : (
         <input className="mem-input" placeholder={t("caps.urlPlaceholder")} value={url} onChange={(e) => setUrl(e.target.value)} />
       )}
+      {!isStdio && (
+        <>
+          <label className="set-label">{t("caps.headersLabel")}</label>
+          <textarea className="mem-textarea" value={headers} onChange={(e) => setHeaders(e.target.value)} placeholder={t("caps.headersPlaceholder")} spellCheck={false} />
+        </>
+      )}
       <label className="set-label">{t("caps.envLabel")}</label>
       <textarea className="mem-textarea" value={env} onChange={(e) => setEnv(e.target.value)} placeholder={t("caps.envPlaceholder")} spellCheck={false} />
       <div className="prov-card__actions">
@@ -1509,6 +1650,7 @@ export function MCPServersSettingsPage() {
 			active: sorted.filter((s) => s.status !== "failed"),
 		};
 	}, [servers]);
+	const retryableActiveServerNames = useMemo(() => retryableAvailableServerNames(serverGroups.active), [serverGroups.active]);
 	const toggleError = useCallback((name: string) => {
 		setExpandedErrors((prev) => { const next = new Set(prev); if (next.has(name)) next.delete(name); else next.add(name); return next; });
 	}, []);
@@ -1561,7 +1703,17 @@ export function MCPServersSettingsPage() {
 			)}
 			{serverGroups.active.length > 0 && (
 				<div className="cap-server-section">
-					<div className="cap-server-section__title">{t("caps.availableServers")}</div>
+					<div className="cap-server-section__head">
+						<div className="cap-server-section__title">{t("caps.availableServers")}</div>
+						<button
+							className="btn btn--small"
+							disabled={actionBusy || retryableActiveServerNames.length === 0}
+							type="button"
+							onClick={() => void mutate(() => Promise.allSettled(retryableActiveServerNames.map((name) => app.ReconnectMCPServer(name))))}
+						>
+							{t("caps.retryAll")}
+						</button>
+					</div>
 						<ServerGroup
 							busy={actionBusy}
 							servers={serverGroups.active}
@@ -1574,6 +1726,9 @@ export function MCPServersSettingsPage() {
 						onRetry={(name) => void mutate(() => app.ReconnectMCPServer(name))}
 						onReconnect={(name) => void mutate(() => app.ReconnectMCPServer(name))}
 						onConfirmClearAuth={(name) => void mutate(() => app.ClearMCPServerAuthentication(name))}
+						onTrustTool={(name, toolName) => void mutate(() => app.TrustMCPServerTool(name, toolName))}
+						onTrustTools={(name, toolNames) => void mutate(() => app.TrustMCPServerTools(name, toolNames))}
+						onUntrustTool={(name, toolName) => void mutate(() => app.UntrustMCPServerTool(name, toolName))}
 						onToggle={(name, on) => void mutate(() => app.SetMCPServerEnabled(name, on))}
 						onUpdate={(name, input) =>
 							void mutate(() => app.UpdateMCPServer(name, input)).then((ok) => {

desktop/frontend/src/components/CommandPalette.tsx

@@ -1,6 +1,7 @@
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import type { ReactNode } from "react";
 import { Command, Search } from "lucide-react";
+import { useT } from "../lib/i18n";
 import { useMountTransition } from "../lib/useMountTransition";
 
 // CommandPalette is a ⌘K / Ctrl+K modal that surfaces the desktop app's
@@ -57,9 +58,12 @@ export function CommandPalette({
   placeholder: string;
   emptyText: string;
 }) {
+  const t = useT();
   const [query, setQuery] = useState("");
-  const [active, setActive] = useState(0);
+  const [active, setActive] = useState(-1);
   const inputRef = useRef<HTMLInputElement>(null);
+  const isOpenRef = useRef(false);
+  isOpenRef.current = open;
   // Keep the palette mounted through its exit animation after `open` flips
   // false; `status` drives the enter/exit keyframes via data-state.
   const { mounted, status } = useMountTransition(open, 200);
@@ -67,13 +71,27 @@ export function CommandPalette({
   // Re-init whenever the palette opens: clear the query, reset the
   // highlight, and steal focus. Doing it on the open edge (not on every
   // render) means a previously-typed query doesn't leak across opens.
-  useEffect(() => {
+  // useLayoutEffect fires synchronously after DOM mutations, before the
+  // browser paints — ensures focus lands before any paint-time transitions
+  // can interfere.
+  useLayoutEffect(() => {
     if (open) {
       setQuery("");
-      setActive(0);
-      requestAnimationFrame(() => inputRef.current?.focus());
+      setActive(items.length > 0 ? 0 : -1);
+      inputRef.current?.focus();
     }
-  }, [open]);
+  }, [open, items.length]);
+
+  // Callback ref: when the input element mounts while the palette is open,
+  // focus it immediately. This handles the case where the DOM element
+  // becomes available after the useLayoutEffect already ran.
+  const inputCallbackRef = useCallback(
+    (el: HTMLInputElement | null) => {
+      inputRef.current = el;
+      if (el && isOpenRef.current) el.focus();
+    },
+    [],
+  );
 
   // score is the fuzzy match: every space-separated query token must
   // appear (case-insensitively) in the candidate's haystack, in the order
@@ -130,11 +148,11 @@ export function CommandPalette({
   // Clamp the active index whenever the result set shrinks (e.g. user
   // typed something that filtered out the previously-highlighted item).
   useEffect(() => {
-    if (active >= flat.length) setActive(Math.max(0, flat.length - 1));
+    if (active >= 0 && active >= flat.length) setActive(Math.max(0, flat.length - 1));
   }, [flat.length, active]);
 
-  // Reset the highlight to 0 on every query change — the user just refined
-  // their search, the old highlight is rarely still interesting.
+  // Reset the highlight to the first match on every query change — the user
+  // just refined their search, the old highlight is rarely still interesting.
   useEffect(() => {
     setActive(0);
   }, [query]);
@@ -145,6 +163,8 @@ export function CommandPalette({
   useEffect(() => {
     if (!open) return;
     const onKey = (e: KeyboardEvent) => {
+      const closeButtonHasFocus = e.target instanceof HTMLElement && Boolean(e.target.closest("[data-palette-close]"));
+      if (closeButtonHasFocus && (e.key === "Enter" || e.key === " ")) return;
       if (e.key === "Escape") {
         e.preventDefault();
         onClose();
@@ -152,12 +172,12 @@ export function CommandPalette({
       }
       if (e.key === "ArrowDown") {
         e.preventDefault();
-        setActive((i) => (flat.length === 0 ? 0 : (i + 1) % flat.length));
+        setActive((i) => (flat.length === 0 ? -1 : i < 0 ? 0 : (i + 1) % flat.length));
         return;
       }
       if (e.key === "ArrowUp") {
         e.preventDefault();
-        setActive((i) => (flat.length === 0 ? 0 : (i - 1 + flat.length) % flat.length));
+        setActive((i) => (flat.length === 0 ? -1 : i <= 0 ? flat.length - 1 : i - 1));
         return;
       }
       if (e.key === "Enter") {
@@ -189,7 +209,7 @@ export function CommandPalette({
         <div className="palette__inputrow">
           <Search className="palette__search-icon" size={18} aria-hidden="true" />
           <input
-            ref={inputRef}
+            ref={inputCallbackRef}
             className="palette__input"
             value={query}
             onChange={(e) => setQuery(e.target.value)}
@@ -197,7 +217,16 @@ export function CommandPalette({
             spellCheck={false}
             autoComplete="off"
           />
-          <kbd className="palette__esc">esc</kbd>
+          <button
+            className="palette__esc"
+            type="button"
+            onClick={onClose}
+            aria-label={t("common.close")}
+            title={t("common.close")}
+            data-palette-close
+          >
+            esc
+          </button>
         </div>
         <div className="palette__list" role="listbox">
           {flat.length === 0 ? (

desktop/frontend/src/components/ContextPanel.tsx

@@ -1,9 +1,9 @@
 // ContextPanel shows the active tab's context gauge and token usage.
 // All visible text is routed through the i18n dictionary.
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
 import { asArray } from "../lib/array";
 import { app } from "../lib/bridge";
-import { useI18n, type Translator } from "../lib/i18n";
+import { useI18n, type Locale, type Translator } from "../lib/i18n";
 import { formatMoneyLocalized } from "../lib/money";
 import type { DictKey } from "../locales/en";
 import type { BalanceInfo, ContextInfo, ContextPanelInfo, UsageSourceStats, WireUsage } from "../lib/types";
@@ -23,9 +23,9 @@ interface ContextPanelProps {
   refreshKey?: number;
 }
 
-function fmtTokens(n: number): string {
-  if (n >= 1000) return `${Math.round(n / 1000)}k`;
-  return String(n);
+function fmtFullTokens(n: number): string {
+  if (n <= 0) return "0";
+  return String(Math.round(n));
 }
 
 function fmtDuration(ms: number, t: Translator): string {
@@ -42,35 +42,61 @@ function fmtOptionalTokens(tokens?: number): string {
   return tokens.toLocaleString();
 }
 
-function fmtTurns(turns: number | undefined, t: Translator): string {
-  if (typeof turns !== "number" || turns < 0) return "-";
-  return t(turns === 1 ? "history.turnOne" : "history.turnOther", { n: turns });
+interface MetricTokenDisplay {
+  display: string;
+  exact: string;
+}
+
+function numberLocale(locale: Locale | string): string {
+  if (locale === "zh") return "zh-CN";
+  if (locale === "zh-TW") return "zh-TW";
+  return "en";
+}
+
+export function formatMetricTokens(tokens: number | undefined, locale: Locale | string): MetricTokenDisplay {
+  if (typeof tokens !== "number" || tokens <= 0) {
+    return { display: "-", exact: "-" };
+  }
+  const tag = numberLocale(locale);
+  const exact = tokens.toLocaleString(tag);
+  return { display: exact, exact };
 }
 
 function fmtUsageCacheRate(usage?: WireUsage): string {
   if (!usage) return "-";
-  const denom = usage.cacheHitTokens + usage.cacheMissTokens || usage.promptTokens;
+  const denom = usage.cacheHitTokens + usage.cacheMissTokens;
   if (denom <= 0) return "-";
   return `${((usage.cacheHitTokens / denom) * 100).toFixed(2)}%`;
 }
 
-function fmtSessionCacheRate(usage?: WireUsage): string {
-  if (!usage) return "-";
-  const denom = usage.sessionCacheHitTokens + usage.sessionCacheMissTokens;
-  if (denom <= 0) return "-";
-  return `${((usage.sessionCacheHitTokens / denom) * 100).toFixed(2)}%`;
-}
-
 export function formatCacheHitRate(hitTokens: number, missTokens: number): string {
   const denom = hitTokens + missTokens;
   if (denom <= 0) return "-";
   return `${((hitTokens / denom) * 100).toFixed(2)}%`;
 }
 
-interface HealthResult {
+type MetricTone = "accent" | "good" | "notice" | "warn";
+type UsageAnalysisView = "source" | "type";
+
+export function cacheHitTone(hitTokens: number, missTokens: number): MetricTone | undefined {
+  const denom = hitTokens + missTokens;
+  if (denom <= 0) return undefined;
+  const pct = (hitTokens / denom) * 100;
+  if (pct >= 80) return "good";
+  if (pct >= 60) return "notice";
+  return "warn";
+}
+
+function formatSharePercent(value: number, total: number): string {
+  if (total <= 0 || value <= 0) return "-";
+  const pct = (value / total) * 100;
+  if (pct > 0 && pct < 1) return "<1%";
+  return `${Math.round(pct)}%`;
+}
+
+interface ContextWindowStatus {
   tone: "good" | "notice" | "warn";
-  shortKey: DictKey;
-  vars: Record<string, string | number>;
+  key: DictKey;
 }
 
 export function contextCostDisplay({
@@ -158,37 +184,27 @@ export function contextBreakdown(
   };
 }
 
-function contextHealth(usagePct: number, cachePct: number, readCount: number): HealthResult {
-  if (usagePct >= 85) {
-    return {
-      tone: "warn",
-      shortKey: "context.healthNearLimitShort",
-      vars: { pct: usagePct },
-    };
-  }
-  if (readCount >= 8) {
-    return {
-      tone: "notice",
-      shortKey: "context.healthManyFilesShort",
-      vars: { count: readCount },
-    };
-  }
-  if (cachePct > 0 && cachePct < 50) {
-    return {
-      tone: "notice",
-      shortKey: "context.healthLowCacheShort",
-      vars: { pct: cachePct },
-    };
-  }
-  return {
-    tone: "good",
-    shortKey: "context.healthGoodShort",
-    vars: {},
-  };
+export function contextWindowStatus(usagePct: number, compactPct: number): ContextWindowStatus {
+  if (usagePct >= 90) return { tone: "warn", key: "context.windowStatusNearLimit" };
+  if (compactPct > 0 && usagePct >= compactPct) return { tone: "warn", key: "context.windowStatusPastCompact" };
+  if (compactPct > 0 && usagePct >= Math.max(0, compactPct - 10)) return { tone: "notice", key: "context.windowStatusWatch" };
+  return { tone: "good", key: "context.windowStatusHealthy" };
 }
 
 const SOURCE_ORDER = ["executor", "planner", "subagent", "compaction", "classifier", "title"];
 
+function sourceTone(source: string): string {
+  switch (source) {
+    case "executor": return "teal";
+    case "planner": return "blue";
+    case "subagent": return "amber";
+    case "compaction": return "slate";
+    case "classifier": return "violet";
+    case "title": return "rose";
+    default: return "default";
+  }
+}
+
 function sourceLabel(source: string, t: Translator): string {
   switch (source) {
     case "executor": return t("context.sourceExecutor");
@@ -205,11 +221,35 @@ function sourceCost(stats: UsageSourceStats): number {
   return stats.sessionCost && stats.sessionCost > 0 ? stats.sessionCost : stats.sessionCostUsd ?? 0;
 }
 
-function sourceRows(info: ContextPanelInfo | null, sessionCurrency?: string): Array<{ source: string; label: string; cost: number; currency?: string; requests: number }> {
+function sourceTokenTotal(row: Pick<ContextSourceRow, "promptTokens" | "completionTokens" | "totalTokens">): number {
+  return row.totalTokens > 0 ? row.totalTokens : row.promptTokens + row.completionTokens;
+}
+
+export interface ContextSourceRow {
+  source: string;
+  label: string;
+  promptTokens: number;
+  completionTokens: number;
+  cacheHitTokens: number;
+  cacheMissTokens: number;
+  totalTokens: number;
+  cost: number;
+  currency?: string;
+  requests: number;
+}
+
+export function contextSourceRows(info: ContextPanelInfo | null, sessionCurrency?: string): ContextSourceRow[] {
   const entries = Object.entries(info?.sources ?? {});
   if (entries.length === 0) return [];
   return entries
-    .filter(([, stats]) => (stats.requestCount ?? 0) > 0 || sourceCost(stats) > 0)
+    .filter(([, stats]) =>
+      (stats.requestCount ?? 0) > 0 ||
+      (stats.promptTokens ?? 0) > 0 ||
+      (stats.completionTokens ?? 0) > 0 ||
+      (stats.cacheHitTokens ?? 0) > 0 ||
+      (stats.cacheMissTokens ?? 0) > 0 ||
+      sourceCost(stats) > 0
+    )
     .sort(([a], [b]) => {
       const ia = SOURCE_ORDER.indexOf(a);
       const ib = SOURCE_ORDER.indexOf(b);
@@ -219,6 +259,11 @@ function sourceRows(info: ContextPanelInfo | null, sessionCurrency?: string): Ar
     .map(([source, stats]) => ({
       source,
       label: source,
+      promptTokens: stats.promptTokens ?? 0,
+      completionTokens: stats.completionTokens ?? 0,
+      cacheHitTokens: stats.cacheHitTokens ?? 0,
+      cacheMissTokens: stats.cacheMissTokens ?? 0,
+      totalTokens: stats.totalTokens ?? 0,
       cost: sourceCost(stats),
       currency: stats.sessionCurrency || sessionCurrency || info?.sessionCurrency,
       requests: stats.requestCount ?? 0,
@@ -232,7 +277,6 @@ export function ContextPanel({
   sessionTokens,
   sessionCost,
   sessionCurrency,
-  sessionTurns,
   turnTokens,
   turnCost,
   balance,
@@ -241,6 +285,7 @@ export function ContextPanel({
 }: ContextPanelProps) {
   const { locale, t } = useI18n();
   const [info, setInfo] = useState<ContextPanelInfo | null>(null);
+  const [analysisView, setAnalysisView] = useState<UsageAnalysisView>("source");
   const refreshSeq = useRef(0);
 
   const refresh = useCallback(async () => {
@@ -248,17 +293,14 @@ export function ContextPanel({
     const seq = ++refreshSeq.current;
     try {
       const next = await app.ContextPanel(tabId);
-      if (refreshSeq.current === seq) setInfo(next);
+      if (refreshSeq.current === seq) {
+        setInfo(next);
+      }
     } catch {
       /* bridge unavailable */
     }
   }, [tabId]);
 
-  useEffect(() => {
-    const id = window.setInterval(() => void refresh(), 2000);
-    return () => window.clearInterval(id);
-  }, [refresh]);
-
   useEffect(() => {
     refreshSeq.current += 1;
     setInfo(null);
@@ -290,23 +332,25 @@ export function ContextPanel({
         ? usage.totalTokens
         : promptTokens + completionTokens;
   const reasoningTokens = hasPanelUsage ? info?.reasoningTokens ?? 0 : usage?.reasoningTokens ?? 0;
-  const cacheHitTokens = hasPanelUsage ? info?.cacheHitTokens ?? 0 : usage?.cacheHitTokens ?? 0;
-  const cacheMissTokens = hasPanelUsage ? info?.cacheMissTokens ?? 0 : usage?.cacheMissTokens ?? 0;
+  // Session-cumulative values for the top summary.
+  const sessionCacheHit = info?.sessionCacheHitTokens ?? usage?.sessionCacheHitTokens ?? context?.cacheHitTokens ?? 0;
+  const sessionCacheMiss = info?.sessionCacheMissTokens ?? usage?.sessionCacheMissTokens ?? context?.cacheMissTokens ?? 0;
+  const totalTokensMetric = formatMetricTokens(totalTokens, locale);
   const cost = contextCostDisplay({ info, sessionCost, sessionCurrency, usage });
-  const costSources = sourceRows(info, sessionCurrency);
-  const showCostSources = costSources.some((row) => row.source !== "executor") || costSources.length > 1;
+  const sourceUsageRows = contextSourceRows(info, sessionCurrency);
+  const showSourceUsageRows = sourceUsageRows.length > 0;
+  const sourceTotalTokens = sourceUsageRows.reduce((sum, row) => sum + sourceTokenTotal(row), 0);
+  const visibleSourceRows = sourceUsageRows.slice(0, 3);
+  const hiddenSourceRows = sourceUsageRows.slice(3);
   const readFiles = asArray(info?.readFiles);
   const changedFiles = asArray(info?.changedFiles);
 
   const usagePct = windowTokens > 0 ? Math.min(100, Math.round((usedTokens / windowTokens) * 100)) : 0;
-  const compactPct = context?.compactRatio ? Math.round(context.compactRatio * 100) : 0;
-  const cacheDenom = cacheHitTokens + cacheMissTokens;
-  const cachePct = cacheDenom > 0 ? (cacheHitTokens / cacheDenom) * 100 : 0;
-  const cachePctDisplay = formatCacheHitRate(cacheHitTokens, cacheMissTokens);
+  const compactRatio = context?.compactRatio && context.compactRatio > 0 ? context.compactRatio : 0.8;
+  const compactPct = Math.round(compactRatio * 100);
+  const compactTokens = windowTokens > 0 ? Math.round(windowTokens * compactRatio) : 0;
+  const tokensUntilCompact = compactTokens > usedTokens ? compactTokens - usedTokens : 0;
   const breakdown = contextBreakdown(usedTokens, windowTokens, promptTokens, completionTokens, reasoningTokens);
-  const donutStyle = {
-    background: `conic-gradient(#13a7a5 0 ${breakdown.promptPct}%, #2f6df6 ${breakdown.promptPct}% ${breakdown.completionPct}%, #f97316 ${breakdown.completionPct}% ${breakdown.reasoningPct}%, var(--border) ${breakdown.reasoningPct}% ${breakdown.otherPct}%, var(--border-soft) ${breakdown.otherPct}% 100%)`,
-  };
   const eventTimes = [
     ...readFiles.map((file) => file.time),
     ...changedFiles.map((file) => file.latestTime ?? 0),
@@ -315,93 +359,236 @@ export function ContextPanel({
   const elapsed = info?.elapsedMs && info.elapsedMs > 0 ? info.elapsedMs : derivedElapsed;
   const derivedRequestCount = Math.max(readFiles.length + changedFiles.length, 0);
   const requestCount = info?.requestCount && info.requestCount > 0 ? info.requestCount : derivedRequestCount;
-  const health = contextHealth(usagePct, Math.round(cachePct), readFiles.length);
+  const windowStatus = contextWindowStatus(usagePct, compactPct);
   const balanceLabel = balance?.available && balance.display ? balance.display : "-";
   const turnCostLabel = formatMoneyLocalized(turnCost, sessionCurrency, { locale, empty: "dash" });
-  const sessionCostLabel = formatMoneyLocalized(sessionCost, sessionCurrency, { locale, empty: "dash" });
+  const sessionCostLabel = formatMoneyLocalized(cost.amount, cost.currency, { locale, empty: "dash" });
+  const totalTokensTitle = totalTokensMetric.exact === "-" ? "-" : t("context.tokensValue", { value: totalTokensMetric.exact });
+  const usedLabel = fmtFullTokens(usedTokens);
+  const windowLabel = fmtFullTokens(windowTokens);
+  const compactRemainingLabel = tokensUntilCompact > 0 ? fmtFullTokens(tokensUntilCompact) : "0";
+  const compactMarkerPct = Math.max(0, Math.min(100, compactPct));
+  const usageMarkerPct = Math.max(6, Math.min(94, usagePct));
+  const compactLabelPct = Math.max(6, Math.min(94, compactMarkerPct));
+  const usageSummary = t("context.windowUsageSummary", { used: usedLabel, window: windowLabel, pct: usagePct });
+  const compactSummary = t("context.windowCompactRemaining", { used: usedLabel, window: windowLabel, tokens: compactRemainingLabel, pct: compactPct });
+  const activeAnalysisView: UsageAnalysisView = showSourceUsageRows ? analysisView : "type";
+  const tokenTypeRows = [
+    { key: "prompt", label: t("context.prompt"), value: breakdown.promptTokens },
+    { key: "completion", label: t("context.completion"), value: breakdown.completionTokens },
+    { key: "reasoning", label: t("context.reasoning"), value: breakdown.reasoningTokens },
+    { key: "other", label: t("context.other"), value: breakdown.otherTokens },
+  ];
+  const tokenCompositionTotal = tokenTypeRows.reduce((sum, row) => sum + row.value, 0);
+  const renderSourceRow = (row: ContextSourceRow) => {
+    const inputMetric = formatMetricTokens(row.promptTokens, locale);
+    const outputMetric = formatMetricTokens(row.completionTokens, locale);
+    const hitMetric = formatMetricTokens(row.cacheHitTokens, locale);
+    const missMetric = formatMetricTokens(row.cacheMissTokens, locale);
+    const totalMetric = formatMetricTokens(sourceTokenTotal(row), locale);
+    const cacheReported = row.cacheHitTokens + row.cacheMissTokens > 0;
+    const cacheRate = cacheReported ? formatCacheHitRate(row.cacheHitTokens, row.cacheMissTokens) : t("context.cacheNotReported");
+    const costLabel = formatMoneyLocalized(row.cost, row.currency, { locale, empty: "dash" });
+    return (
+      <div className="context-panel__source-row" key={row.source}>
+        <div className="context-panel__source-head">
+          <span>
+            <i className={`context-panel__source-dot context-panel__source-tone--${sourceTone(row.source)}`} aria-hidden="true" />
+            {sourceLabel(row.label, t)}
+          </span>
+          <em>{t("context.sourceRequests", { count: row.requests })}</em>
+        </div>
+        <div className="context-panel__source-summary">
+          <SourceMetric label={t("context.total")} value={totalMetric.display} title={totalMetric.exact} />
+          <SourceMetric label={t("context.sourceCacheRate")} value={cacheRate} />
+          <SourceMetric label={t("context.sourceCost")} value={costLabel} />
+        </div>
+        <details className="context-panel__source-details">
+          <summary>{t("context.sourceDetails")}</summary>
+          <div className="context-panel__source-details-body">
+            <SourceSplitBar
+              label={`${t("context.sourceInput")}/${t("context.sourceOutput")}`}
+              segments={[
+                { label: t("context.sourceInput"), value: row.promptTokens, tone: "input" },
+                { label: t("context.sourceOutput"), value: row.completionTokens, tone: "output" },
+              ]}
+            />
+            {cacheReported ? (
+              <SourceSplitBar
+                label={`${t("context.sourceCacheHit")}/${t("context.sourceCacheMiss")}`}
+                segments={[
+                  { label: t("context.sourceCacheHit"), value: row.cacheHitTokens, tone: "hit" },
+                  { label: t("context.sourceCacheMiss"), value: row.cacheMissTokens, tone: "miss" },
+                ]}
+                compact
+              />
+            ) : (
+              <SourceSplitBar label={`${t("context.sourceCacheHit")}/${t("context.sourceCacheMiss")}`} segments={[]} compact />
+            )}
+            <div className="context-panel__source-metrics">
+              <SourceMetric label={t("context.sourceInput")} value={inputMetric.display} title={inputMetric.exact} />
+              <SourceMetric label={t("context.sourceOutput")} value={outputMetric.display} title={outputMetric.exact} />
+              <SourceMetric label={t("context.sourceCacheHit")} value={hitMetric.display} title={hitMetric.exact} />
+              <SourceMetric label={t("context.sourceCacheMiss")} value={missMetric.display} title={missMetric.exact} />
+            </div>
+          </div>
+        </details>
+      </div>
+    );
+  };
 
   return (
     <div className="context-panel">
       <div className="context-panel__body">
         <section className="context-panel__overview">
           <section className="context-panel__usage">
-            <SectionHeading title={t("context.windowTitle")} meta={t("context.windowSubtitle")} />
-            <div className="context-panel__usage-visual">
-              <div className="context-panel__donut" style={donutStyle}>
-                <div className="context-panel__donut-core">
-                  <strong>{fmtTokens(usedTokens)}</strong>
-                  <span>/ {fmtTokens(windowTokens)} tokens</span>
+            <SectionHeading title={t("context.windowTitle")} />
+            <div className={`context-panel__capacity-card context-panel__capacity-card--${windowStatus.tone}`}>
+              <div className="context-panel__capacity-top">
+                <span className="context-panel__capacity-status">{t(windowStatus.key)}</span>
+                <strong>{usedLabel}/{windowLabel}</strong>
+              </div>
+              <div className="context-panel__usage-progress context-panel__capacity-meter" aria-label={`${t(windowStatus.key)}. ${usageSummary}. ${compactSummary}`}>
+                <div className="context-panel__capacity-scale" aria-hidden="true">
+                  <span className="context-panel__capacity-pin context-panel__capacity-pin--used" style={{ left: `${usageMarkerPct}%` }}>{usagePct}%</span>
+                  <span className="context-panel__capacity-pin context-panel__capacity-pin--compact" style={{ left: `${compactLabelPct}%` }}>{compactPct}%</span>
+                </div>
+                <div className="context-panel__progress-track" aria-hidden="true">
+                  <span className="context-panel__progress-segment context-panel__progress-segment--prompt" style={{ width: `${breakdown.promptPct}%` }} />
+                  <span className="context-panel__progress-segment context-panel__progress-segment--completion" style={{ width: `${Math.max(0, breakdown.completionPct - breakdown.promptPct)}%` }} />
+                  <span className="context-panel__progress-segment context-panel__progress-segment--reasoning" style={{ width: `${Math.max(0, breakdown.reasoningPct - breakdown.completionPct)}%` }} />
+                  <span className="context-panel__progress-segment context-panel__progress-segment--other" style={{ width: `${Math.max(0, breakdown.otherPct - breakdown.reasoningPct)}%` }} />
+                  <span className="context-panel__compact-marker" style={{ left: `${compactMarkerPct}%` }} />
                 </div>
               </div>
-              <div className="context-panel__percent">{usagePct}%</div>
-            </div>
-            <div className="context-panel__usage-progress" aria-label={t("context.windowSubtitle")}>
-              <div className="context-panel__progress-head">
-                <strong>{fmtTokens(usedTokens)} / {fmtTokens(windowTokens)}</strong>
-                <span>{usagePct}%</span>
-              </div>
-              <div className="context-panel__progress-track" aria-hidden="true">
-                <span className="context-panel__progress-fill" style={{ width: `${usagePct}%` }} />
+              <div className="context-panel__capacity-foot">
+                <span>{t("context.windowUsedLabel")}</span>
+                <span className="context-panel__capacity-remaining">
+                  <span>{t("context.windowCompactDistance")}</span>
+                  <strong>{compactRemainingLabel}</strong>
+                </span>
               </div>
             </div>
-            <div className="context-panel__summary-rows">
-              <MiniStat label={t("status.compactLabel")} value={compactPct > 0 ? `${compactPct}%` : "-"} />
-              <MiniStat label={t("status.cacheAvgLabel")} value={fmtSessionCacheRate(usage)} />
-              <MiniStat label={t("context.sessionCost")} value={sessionCostLabel} />
-              <MiniStat label={t("status.sessionTurnsLabel")} value={fmtTurns(sessionTurns, t)} />
-            </div>
-            <div className="context-panel__breakdown">
-              <TokenLegend label={t("context.prompt")} value={breakdown.promptTokens} color="prompt" />
-              <TokenLegend label={t("context.completion")} value={breakdown.completionTokens} color="completion" />
-              <TokenLegend label={t("context.reasoning")} value={breakdown.reasoningTokens} color="reasoning" />
-              <TokenLegend label={t("context.other")} value={breakdown.otherTokens} color="other" />
-              <div className="context-panel__total">
-                <span>{t("context.total")}</span>
-                <strong>{usedTokens.toLocaleString()} / {windowTokens.toLocaleString()}</strong>
+          </section>
+          <section className="context-panel__section context-panel__session-section">
+            <SectionHeading title={t("context.sessionMetrics")} />
+            <div className="context-panel__session-metrics">
+              <div className="context-panel__summary-rows">
+                <MiniStat label={t("status.cacheAvgLabel")} value={formatCacheHitRate(sessionCacheHit, sessionCacheMiss)} tone={cacheHitTone(sessionCacheHit, sessionCacheMiss)} />
+                <MiniStat label={t("context.sessionCost")} value={sessionCostLabel} />
+                <MiniStat label={t("context.time")} value={fmtDuration(elapsed, t)} />
+                <MiniStat label={t("context.requests")} value={requestCount > 0 ? String(requestCount) : "-"} />
+                <MiniStat label={t("context.sessionTokensShort")} value={totalTokensMetric.display} title={totalTokensTitle} wide />
               </div>
             </div>
           </section>
           <section className="context-panel__creation-grid" aria-label={t("context.overview")}>
-            <MetricCard label={t("context.time")} value={fmtDuration(elapsed, t)} />
-            <MetricCard label={t("context.requests")} value={requestCount > 0 ? String(requestCount) : "-"} />
             <MetricCard label={t("status.cacheLabel")} value={fmtUsageCacheRate(usage)} tone="accent" />
             <MetricCard label={t("status.turnTokensLabel")} value={fmtOptionalTokens(turnTokens)} />
             <MetricCard label={t("status.turnCostLabel")} value={turnCostLabel} />
             <MetricCard label={t("status.balanceLabel")} value={balanceLabel} tone="accent" />
           </section>
-          <section className="context-panel__section">
-            <SectionHeading title={t("context.runtimeMetrics")} />
-            <div className="context-panel__stats">
-              <MetricCard label={t("context.time")} value={fmtDuration(elapsed, t)} />
-              <MetricCard label={t("context.requests")} value={requestCount > 0 ? String(requestCount) : "-"} />
-              <MetricCard label={t("context.sessionTokens")} value={totalTokens > 0 ? totalTokens.toLocaleString() : "-"} wide />
-            </div>
-          </section>
-          <section className="context-panel__section">
-            <SectionHeading title={t("context.costMetrics")} />
-            <div className="context-panel__stats">
-              <MetricCard label={t("context.cacheHit")} value={cachePctDisplay} tone="accent" />
-              <MetricCard label={t("context.sessionCost")} value={formatMoneyLocalized(cost.amount, cost.currency, { locale, empty: "dash" })} />
-            </div>
-            {showCostSources && (
-              <div className="context-panel__source-list" aria-label={t("context.costBreakdown")}>
-                {costSources.map((row) => (
-                  <div className="context-panel__source-row" key={row.source}>
-                    <span>{sourceLabel(row.label, t)}</span>
-                    <strong>{formatMoneyLocalized(row.cost, row.currency, { locale, empty: "dash" })}</strong>
-                    <em>{t("context.sourceRequests", { count: row.requests })}</em>
+          <section className="context-panel__section context-panel__analysis">
+            <SectionHeading title={t("context.usageAnalysis")}>
+              {showSourceUsageRows && (
+                <div className="context-panel__view-switch" role="tablist" aria-label={t("context.usageAnalysisView")}>
+                  <button
+                    type="button"
+                    className={`context-panel__view-tab${activeAnalysisView === "source" ? " context-panel__view-tab--active" : ""}`}
+                    role="tab"
+                    aria-selected={activeAnalysisView === "source"}
+                    onClick={() => setAnalysisView("source")}
+                  >
+                    {t("context.usageAnalysisSource")}
+                  </button>
+                  <button
+                    type="button"
+                    className={`context-panel__view-tab${activeAnalysisView === "type" ? " context-panel__view-tab--active" : ""}`}
+                    role="tab"
+                    aria-selected={activeAnalysisView === "type"}
+                    onClick={() => setAnalysisView("type")}
+                  >
+                    {t("context.usageAnalysisType")}
+                  </button>
+                </div>
+              )}
+            </SectionHeading>
+            {activeAnalysisView === "source" ? (
+              <div className="context-panel__source-list" aria-label={t("context.sourceBreakdown")} role="tabpanel">
+                <div className="context-panel__source-overview">
+                  <div className="context-panel__source-overview-head">
+                    <strong>{t("context.sourceShareTitle")}</strong>
                   </div>
-                ))}
+                  <div className="context-panel__source-sharebar" aria-hidden="true">
+                    {sourceUsageRows.map((row) => {
+                      const sharePct = sourceTotalTokens > 0 ? (sourceTokenTotal(row) / sourceTotalTokens) * 100 : 0;
+                      if (sharePct <= 0) return null;
+                      return (
+                        <span
+                          className={`context-panel__source-share context-panel__source-tone--${sourceTone(row.source)}`}
+                          key={row.source}
+                          style={{ width: `${sharePct}%` }}
+                        />
+                      );
+                    })}
+                  </div>
+                  <div className="context-panel__source-legend">
+                    {sourceUsageRows.map((row) => {
+                      const sharePct = sourceTotalTokens > 0 ? (sourceTokenTotal(row) / sourceTotalTokens) * 100 : 0;
+                      return (
+                        <span key={row.source}>
+                          <i className={`context-panel__source-dot context-panel__source-tone--${sourceTone(row.source)}`} aria-hidden="true" />
+                          {sourceLabel(row.label, t)} {sharePct > 0 ? `${sharePct.toFixed(0)}%` : "-"}
+                        </span>
+                      );
+                    })}
+                  </div>
+                </div>
+                {visibleSourceRows.map(renderSourceRow)}
+                {hiddenSourceRows.length > 0 && (
+                  <details className="context-panel__source-more">
+                    <summary>{t("context.moreSources", { count: hiddenSourceRows.length })}</summary>
+                    <div className="context-panel__source-more-list">
+                      {hiddenSourceRows.map(renderSourceRow)}
+                    </div>
+                  </details>
+                )}
+              </div>
+            ) : (
+              <div className="context-panel__type-panel" aria-label={t("context.tokenBreakdown")} role="tabpanel">
+                <div className="context-panel__type-overview">
+                  <div className="context-panel__type-overview-head">
+                    <strong>{t("context.tokenBreakdown")}</strong>
+                  </div>
+                  <div className="context-panel__type-sharebar" aria-hidden="true">
+                    {tokenTypeRows.map((row) => row.value > 0 ? (
+                      <span
+                        className={`context-panel__type-share context-panel__type-share--${row.key}`}
+                        key={row.key}
+                        style={{ width: `${(row.value / Math.max(1, tokenCompositionTotal)) * 100}%` }}
+                      />
+                    ) : null)}
+                  </div>
+                  <div className="context-panel__type-legend">
+                    {tokenTypeRows.map((row) => (
+                      <span key={row.key}>
+                        <i className={`context-panel__type-dot context-panel__type-dot--${row.key}`} aria-hidden="true" />
+                        {row.label} {formatSharePercent(row.value, tokenCompositionTotal)}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+                <details className="context-panel__breakdown-details">
+                  <summary>{t("context.sourceDetails")}</summary>
+                  <div className="context-panel__breakdown">
+                    {tokenTypeRows.map((row) => (
+                      <TokenLegend key={row.key} label={row.label} value={row.value} color={row.key} />
+                    ))}
+                  </div>
+                </details>
               </div>
             )}
           </section>
-          <section className="context-panel__section context-panel__section--status">
-            <SectionHeading title={t("context.sessionStatus")} />
-            <div className="context-panel__stats">
-              <MetricCard label={t("context.health")} value={t(health.shortKey, health.vars)} tone={health.tone} />
-              <MetricCard label={t("context.compaction")} value={compactPct > 0 ? `${compactPct}%` : "-"} />
-            </div>
-          </section>
         </section>
       </div>
 
@@ -409,11 +596,12 @@ export function ContextPanel({
   );
 }
 
-function SectionHeading({ title, meta }: { title: string; meta?: string }) {
+function SectionHeading({ title, meta, children }: { title: string; meta?: string; children?: ReactNode }) {
   return (
     <header className="context-panel__section-head">
       <h3>{title}</h3>
       {meta && <span>{meta}</span>}
+      {children}
     </header>
   );
 }
@@ -428,22 +616,68 @@ function TokenLegend({ label, value, color }: { label: string; value: number; co
   );
 }
 
-function MiniStat({ label, value }: { label: string; value: string }) {
+function MiniStat({ label, value, title, tone, wide }: { label: string; value: string; title?: string; tone?: MetricTone; wide?: boolean }) {
+  const toneClass = tone ? ` context-panel__mini-stat--${tone}` : "";
+  const wideClass = wide ? " context-panel__mini-stat--wide" : "";
+  const exactTitle = title && title !== value ? title : undefined;
   return (
-    <div className="context-panel__mini-stat">
+    <div className={`context-panel__mini-stat${toneClass}${wideClass}`} aria-label={exactTitle ? `${label}: ${exactTitle}` : undefined}>
       <span>{label}</span>
-      <strong>{value}</strong>
+      <strong title={exactTitle}>{value}</strong>
     </div>
   );
 }
 
-function MetricCard({ label, value, tone, wide }: { label: string; value: string; tone?: "accent" | "good" | "notice" | "warn"; wide?: boolean }) {
+function MetricCard({ label, value, valueTitle, tone, wide }: { label: string; value: string; valueTitle?: string; tone?: "accent" | "good" | "notice" | "warn"; wide?: boolean }) {
   const toneClass = tone ? ` context-panel__metric--${tone}` : "";
   const wideClass = wide ? " context-panel__metric--wide" : "";
+  const exactTitle = valueTitle && valueTitle !== value ? valueTitle : undefined;
   return (
-    <div className={`context-panel__metric${toneClass}${wideClass}`}>
+    <div className={`context-panel__metric${toneClass}${wideClass}`} aria-label={exactTitle ? `${label}: ${exactTitle}` : undefined}>
       <span>{label}</span>
-      <strong>{value}</strong>
+      <strong title={exactTitle}>{value}</strong>
+    </div>
+  );
+}
+
+function SourceMetric({ label, value, title }: { label: string; value: string; title?: string }) {
+  const exactTitle = title && title !== value ? title : undefined;
+  return (
+    <div className="context-panel__source-metric" aria-label={exactTitle ? `${label}: ${exactTitle}` : undefined}>
+      <span>{label}</span>
+      <strong title={exactTitle}>{value}</strong>
+    </div>
+  );
+}
+
+function SourceSplitBar({ label, segments, compact }: { label: string; segments: Array<{ label: string; value: number; tone: string }>; compact?: boolean }) {
+  const total = segments.reduce((sum, segment) => sum + Math.max(0, segment.value), 0);
+  const visible = segments.filter((segment) => segment.value > 0);
+  const compactClass = compact ? " context-panel__source-bar--compact" : "";
+  if (total <= 0 || visible.length === 0) {
+    return (
+      <div className="context-panel__source-bar-row">
+        <span>{label}</span>
+        <div className={`context-panel__source-bar context-panel__source-bar--empty${compactClass}`} aria-hidden="true" />
+      </div>
+    );
+  }
+  return (
+    <div className="context-panel__source-bar-row">
+      <span>{label}</span>
+      <div className={`context-panel__source-bar${compactClass}`}>
+        {visible.map((segment) => {
+          const width = (segment.value / total) * 100;
+          return (
+            <span
+              className={`context-panel__source-bar-segment context-panel__source-bar-segment--${segment.tone}`}
+              key={segment.tone}
+              style={{ width: `${width}%` }}
+              title={`${segment.label}: ${segment.value.toLocaleString()}`}
+            />
+          );
+        })}
+      </div>
     </div>
   );
 }

desktop/frontend/src/components/FileReferenceMenu.tsx

@@ -0,0 +1,202 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { FileText, Folder } from "lucide-react";
+import { asArray } from "../lib/array";
+import { filterAtMatches } from "../lib/atMatches";
+import { app } from "../lib/bridge";
+import type { DirEntry } from "../lib/types";
+import { VirtualMenu } from "./VirtualMenu";
+
+export function dirEntrySubmitPath(entry: DirEntry, atDir: string): string {
+  return entry.path || atDir + entry.name;
+}
+
+export function dirEntryMenuLabel(entry: DirEntry): string {
+  return entry.displayName || entry.name;
+}
+
+export function activeFileReferenceToken(text: string): { raw: string; dir: string; frag: string } | null {
+  const match = /(?:^|\s)@([^\s]*)$/.exec(text);
+  if (!match) return null;
+  const raw = match[1];
+  const slash = raw.lastIndexOf("/");
+  return {
+    raw,
+    dir: slash >= 0 ? raw.slice(0, slash + 1) : "",
+    frag: (slash >= 0 ? raw.slice(slash + 1) : raw).toLowerCase(),
+  };
+}
+
+export function pickInlineFileReference(text: string, atRaw: string | null, atDir: string, entry: DirEntry): string {
+  const atPos = text.length - (atRaw?.length ?? 0) - 1;
+  const prefix = text.slice(0, Math.max(0, atPos));
+  const refPath = dirEntrySubmitPath(entry, atDir);
+  return prefix + "@" + refPath + (entry.isDir ? "/" : " ");
+}
+
+export function insertTextAtSelection(
+  value: string,
+  insert: string,
+  selectionStart = value.length,
+  selectionEnd = selectionStart,
+): { value: string; caret: number } {
+  const before = value.slice(0, selectionStart);
+  const after = value.slice(selectionEnd);
+  const needsLeadingSpace = before.length > 0 && !/\s$/.test(before) && !/^\s/.test(insert);
+  const needsTrailingSpace = after.length > 0 && !/\s$/.test(insert) && !/^\s/.test(after);
+  const text = `${needsLeadingSpace ? " " : ""}${insert}${needsTrailingSpace ? " " : ""}`;
+  const next = before + text + after;
+  return { value: next, caret: before.length + text.length };
+}
+
+export function useFileReferenceMenu(text: string, cwd?: string) {
+  const token = useMemo(() => activeFileReferenceToken(text), [text]);
+  const atRaw = token?.raw ?? null;
+  const atDir = token?.dir ?? "";
+  const atFrag = token?.frag ?? "";
+  const [entries, setEntries] = useState<DirEntry[]>([]);
+  const [searchEntries, setSearchEntries] = useState<DirEntry[]>([]);
+  const [active, setActive] = useState(0);
+  const [dismissed, setDismissed] = useState(false);
+  const dirCache = useRef<Record<string, DirEntry[]>>({});
+  const searchCache = useRef<Record<string, DirEntry[]>>({});
+  const prevCwdRef = useRef(cwd);
+
+  useEffect(() => {
+    if (prevCwdRef.current === cwd) return;
+    prevCwdRef.current = cwd;
+    dirCache.current = {};
+    searchCache.current = {};
+    setEntries([]);
+    setSearchEntries([]);
+    setActive(0);
+    setDismissed(false);
+  }, [cwd]);
+
+  useEffect(() => {
+    setActive(0);
+    setDismissed(false);
+  }, [atRaw]);
+
+  useEffect(() => {
+    if (atRaw === null) return;
+    const cached = dirCache.current[atDir];
+    if (cached) {
+      setEntries(cached);
+      return;
+    }
+    let live = true;
+    app
+      .ListDir(atDir)
+      .then((next) => {
+        const list = asArray(next);
+        dirCache.current[atDir] = list;
+        if (live) setEntries(list);
+      })
+      .catch(() => {});
+    return () => {
+      live = false;
+    };
+  }, [atRaw === null, atDir, cwd]);
+
+  useEffect(() => {
+    if (atRaw === null || atDir !== "" || atFrag === "") {
+      setSearchEntries([]);
+      return;
+    }
+    const cached = searchCache.current[atFrag];
+    if (cached) {
+      setSearchEntries(cached);
+      return;
+    }
+    setSearchEntries([]);
+    let live = true;
+    app
+      .SearchFileRefs(atFrag)
+      .then((next) => {
+        const list = next ?? [];
+        searchCache.current[atFrag] = list;
+        if (live) setSearchEntries(list);
+      })
+      .catch(() => {});
+    return () => {
+      live = false;
+    };
+  }, [atRaw === null, atDir, atFrag, cwd]);
+
+  const items = useMemo(() => {
+    if (atRaw === null) return [];
+    return filterAtMatches(entries, searchEntries, atFrag);
+  }, [atRaw, atFrag, entries, searchEntries]);
+
+  useEffect(() => {
+    const maxIdx = Math.max(0, items.length - 1);
+    setActive((prev) => (prev > maxIdx ? 0 : prev));
+  }, [items.length]);
+
+  return {
+    atRaw,
+    atDir,
+    items,
+    active,
+    setActive,
+    count: atRaw !== null && !dismissed ? items.length : 0,
+    open: atRaw !== null && !dismissed,
+    dismiss: () => setDismissed(true),
+  };
+}
+
+export function FileReferenceMenu({
+  items,
+  activeIndex,
+  onPick,
+  onHover,
+}: {
+  items: DirEntry[];
+  activeIndex: number;
+  onPick: (entry: DirEntry) => void;
+  onHover: (index: number) => void;
+}) {
+  const renderEntry = (entry: DirEntry, index: number) => (
+    <button
+      role="option"
+      aria-selected={index === activeIndex}
+      className={`slashmenu__item ${index === activeIndex ? "slashmenu__item--active" : ""}`}
+      onMouseDown={(event) => {
+        event.preventDefault();
+        onPick(entry);
+      }}
+      onMouseMove={() => onHover(index)}
+    >
+      {entry.isDir ? (
+        <Folder size={13} className="filemenu__icon filemenu__icon--dir" />
+      ) : (
+        <FileText size={13} className="filemenu__icon" />
+      )}
+      <span className="slashmenu__name slashmenu__name--file">
+        {dirEntryMenuLabel(entry)}
+        {entry.isDir ? "/" : ""}
+      </span>
+    </button>
+  );
+
+  if (typeof ResizeObserver === "undefined") {
+    return (
+      <div className="slashmenu" role="listbox">
+        {items.map((entry, index) => (
+          <div key={(entry.isDir ? "d:" : "f:") + (entry.path || entry.name)}>
+            {renderEntry(entry, index)}
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <VirtualMenu
+      items={items}
+      activeIndex={activeIndex}
+      itemKey={(entry) => (entry.isDir ? "d:" : "f:") + (entry.path || entry.name)}
+      renderItem={renderEntry}
+    />
+  );
+}

desktop/frontend/src/components/HistoryPanel.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { MouseEvent as ReactMouseEvent } from "react";
 import { Archive, Pencil, Search, Trash2, RotateCcw } from "lucide-react";
 import { t, useT } from "../lib/i18n";
-import { sessionActivityTime } from "../lib/session";
+import { historySessionDisplayTitle, sessionActivityTime } from "../lib/session";
 import type { HistoryMessage, SessionMeta } from "../lib/types";
 import { historyMessagesToItems, type Item } from "../lib/useController";
 import { Transcript } from "./Transcript";
@@ -83,7 +83,7 @@ export function HistoryPanel({
       setEditing(null);
       setPreview({
         path: s.path,
-        title: sessionDisplayTitle(s, tr("history.emptySession")),
+        title: historySessionDisplayTitle(s, tr("history.emptySession")),
         meta: sessionMetaLine(s, tr, isTrash),
         messages: [],
         loading: true,
@@ -464,7 +464,7 @@ export function HistoryPanel({
                               if (!isTrash && !running) onResume(s);
                             }}
                           >
-                            <div className="hist-item__preview">{sessionDisplayTitle(s, tr("history.emptySession"))}</div>
+                            <div className="hist-item__preview">{historySessionDisplayTitle(s, tr("history.emptySession"))}</div>
                             <div className="hist-item__meta">
                               {!isTrash && isChannelSession(s) && <span className="hist-item__badge hist-item__badge--open">{tr("history.channel")}</span>}
                               {!isTrash && s.current && <span className="hist-item__badge hist-item__badge--current">{tr("history.current")}</span>}
@@ -607,7 +607,6 @@ function sessionLocation(s: SessionMeta, tr: ReturnType<typeof useT>): string {
   if (isChannelSession(s)) {
     return [s.channelLabel || s.channel || tr("history.channel"), s.remoteId].filter(Boolean).join(" · ");
   }
-  if (s.topicTitle) return s.topicTitle;
   if (s.workspaceRoot) {
     const parts = s.workspaceRoot.split(/[\\/]/).filter(Boolean);
     return parts[parts.length - 1] || s.workspaceRoot;
@@ -615,10 +614,6 @@ function sessionLocation(s: SessionMeta, tr: ReturnType<typeof useT>): string {
   return sessionScope(s) === "project" ? tr("history.filterProject") : tr("history.filterGlobal");
 }
 
-function sessionDisplayTitle(s: SessionMeta, fallback: string): string {
-  return s.title || s.preview || fallback;
-}
-
 function sessionMetaLine(s: SessionMeta, tr: ReturnType<typeof useT>, isTrash = false): string {
   const time = timeLabel(isTrash ? s.deletedAt || sessionActivityTime(s) : sessionActivityTime(s));
   const suffix = isTrash && s.deletedAt ? ` · ${tr("history.deleted")}` : "";

desktop/frontend/src/components/Markdown.tsx

@@ -4,12 +4,14 @@ const MarkdownRenderer = lazy(() => import("./MarkdownRenderer"));
 
 export const Markdown = memo(function Markdown({
   text,
+  plainStatusBlocks = false,
 }: {
   text: string;
+  plainStatusBlocks?: boolean;
 }) {
   return (
     <Suspense fallback={<div className="md">{text}</div>}>
-      <MarkdownRenderer text={text} />
+      <MarkdownRenderer text={text} plainStatusBlocks={plainStatusBlocks} />
     </Suspense>
   );
 });

desktop/frontend/src/components/MarkdownRenderer.tsx

@@ -1,4 +1,4 @@
-import { memo, useMemo, useRef } from "react";
+import { lazy, memo, Suspense, useMemo, useRef } from "react";
 import ReactMarkdown from "react-markdown";
 import type { Components } from "react-markdown";
 import remarkGfm from "remark-gfm";
@@ -9,6 +9,8 @@ import { CodeViewer } from "./CodeViewer";
 import { normalizeMath } from "./mathNormalize";
 import { openExternal } from "../lib/bridge";
 
+const MermaidDiagram = lazy(() => import("./MermaidDiagram"));
+
 // Markdown rendering via react-markdown + remark-gfm (tables, task lists,
 // strike, autolinks) and remark-math + rehype-katex for $/$$ KaTeX math.
 // Fenced code blocks go through CodeViewer for syntax highlighting; inline
@@ -19,44 +21,125 @@ import { openExternal } from "../lib/bridge";
 // pairs through a classifier to avoid false positives on $5, $PATH, etc.,
 // and runs KaTeX-specific normalisations (text-mode escapes, |→\vert).
 
-const components: Components = {
-  pre: ({ children }) => <>{children}</>,
-  code: ({ className, children }) => {
-    const text = String(children ?? "");
-    const match = /language-([\w-]+)/.exec(className ?? "");
-    const isBlock = match !== null || text.includes("\n");
-    if (isBlock) {
-      return <CodeViewer value={text.replace(/\n$/, "")} language={match?.[1]} maxHeight={360} />;
+const STATUS_MARKER_RE = /(?:✅|☑|☒|✔️?|✓|\[[xX ]\])/;
+const STATUS_MARKER_GLOBAL_RE = /(?:✅|☑|☒|✔️?|✓|\[[xX ]\])/g;
+const BULLET_RE = /^[-*•]\s+\S/;
+const DIVIDER_RE = /^[\s\-_=─━—]+$/;
+
+function splitStatusLine(line: string): string[] {
+  const parts = (line.match(STATUS_MARKER_GLOBAL_RE) ?? []).length > 1
+    ? line.split(/(?=(?:✅|☑|☒|✔️?|✓|\[[xX ]\]))/)
+    : [line];
+  return parts
+    .map((part) => part.replace(/^(?:✅|☑|☒|✔️?|✓|\[[xX ]\]|[-*•])\s*/i, "").trim())
+    .filter(Boolean)
+    .map((part) => part.replace(/\s{2,}/g, " · "));
+}
+
+function looksLikeDiagram(text: string): boolean {
+  return /[←→↔]|<{1,2}-{2,}|-{2,}>{1,2}|[-_=─━]{6,}/.test(text);
+}
+
+function splitPlainBlock(text: string): { preText: string; statusItems: string[] } {
+  const items: string[] = [];
+  const preLines: string[] = [];
+  const lines = text.split(/\r?\n/);
+  const bulletLines = lines.filter((line) => BULLET_RE.test(line.trim())).length;
+  const collectBulletLines = bulletLines >= 2 && !looksLikeDiagram(text);
+  for (const rawLine of lines) {
+    const line = rawLine.trim();
+    const marked = STATUS_MARKER_RE.test(line) || (collectBulletLines && BULLET_RE.test(line));
+    if (marked) {
+      items.push(...splitStatusLine(line));
+    } else if (DIVIDER_RE.test(line) && items.length > 0 && !looksLikeDiagram(text)) {
+      continue;
+    } else {
+      preLines.push(rawLine);
     }
-    return <code className="md-code">{children}</code>;
-  },
-  a: ({ href, children }) => (
-    <a
-      href={href}
-      onClick={(e) => {
-        e.preventDefault();
-        if (href) openExternal(href);
-      }}
-      onAuxClick={(e) => {
-        e.preventDefault();
-        if (href) openExternal(href);
-      }}
-      onMouseDown={(e) => {
-        if (e.button === 1) e.preventDefault();
-      }}
-    >
-      {children}
-    </a>
-  ),
-};
+  }
+  while (preLines.length > 0 && preLines[0].trim() === "") preLines.shift();
+  while (preLines.length > 0 && preLines[preLines.length - 1].trim() === "") preLines.pop();
+  return { preText: preLines.join("\n"), statusItems: items };
+}
+
+function PlainMarkdownBlock({ text }: { text: string }) {
+  const { preText, statusItems } = splitPlainBlock(text);
+  const asList = statusItems.length >= 2;
+  return (
+    <div className={`md-plain-block${asList ? " md-plain-block--split" : " md-plain-block--pre"}`}>
+      <CodeViewer value={text} maxHeight={360} />
+      {asList && preText && (
+        <div className="md-plain-block__diagram">
+          <CodeViewer value={preText} maxHeight={360} />
+        </div>
+      )}
+      {asList && (
+        <div className="md-status-list">
+          {statusItems.map((item, index) => (
+            <div className="md-status-list__item" key={`${index}-${item}`}>
+              <span className="md-status-list__dot" aria-hidden="true" />
+              <span className="md-status-list__text">{item}</span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function createComponents(plainStatusBlocks: boolean): Components {
+  return {
+    pre: ({ children }) => <>{children}</>,
+    code: ({ className, children }) => {
+      const text = String(children ?? "");
+      const match = /language-([\w-]+)/.exec(className ?? "");
+      const lang = match?.[1];
+      const isBlock = match !== null || text.includes("\n");
+      if (isBlock) {
+        const value = text.replace(/\n$/, "");
+        if (lang === "mermaid") {
+          return (
+            <Suspense fallback={<CodeViewer value={value} language="mermaid" maxHeight={360} />}>
+              <MermaidDiagram definition={value} />
+            </Suspense>
+          );
+        }
+        if (!match && plainStatusBlocks) return <PlainMarkdownBlock text={text.replace(/\n$/, "")} />;
+        return <CodeViewer value={value} language={lang} maxHeight={360} />;
+      }
+      return <code className="md-code">{children}</code>;
+    },
+    a: ({ href, children }) => (
+      <a
+        href={href}
+        onClick={(e) => {
+          e.preventDefault();
+          if (href) openExternal(href);
+        }}
+        onAuxClick={(e) => {
+          e.preventDefault();
+          if (href) openExternal(href);
+        }}
+        onMouseDown={(e) => {
+          if (e.button === 1) e.preventDefault();
+        }}
+      >
+        {children}
+      </a>
+    ),
+  };
+}
 
 const MarkdownRenderer = memo(function MarkdownRenderer({
   text,
+  plainStatusBlocks = false,
 }: {
   text: string;
+  plainStatusBlocks?: boolean;
 }) {
   const containerRef = useRef<HTMLDivElement>(null);
   const mathContent = useMemo(() => normalizeMath(text), [text]);
+  const components = useMemo(() => createComponents(plainStatusBlocks), [plainStatusBlocks]);
   return (
     <div className="md" ref={containerRef}>
       <ReactMarkdown

desktop/frontend/src/components/MermaidDiagram.tsx

@@ -0,0 +1,657 @@
+import { memo, type RefObject, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { AlertCircle, Code2, Maximize2, Minimize2, Play, RotateCcw, ZoomIn, ZoomOut } from "lucide-react";
+import { CopyButton } from "./CopyButton";
+import { openExternal } from "../lib/bridge";
+
+interface MermaidDiagramProps {
+  definition: string;
+}
+
+type DiagramState =
+  | { status: "loading" }
+  | { status: "rendered"; svg: string }
+  | { status: "error"; message: string };
+
+type DiagramTab = "preview" | "code";
+type MermaidThemeName = "dark" | "light";
+type MermaidModule = typeof import("mermaid");
+type MermaidApi = MermaidModule["default"];
+type MermaidRenderAdapter = (
+  svgId: string,
+  definition: string,
+  theme: MermaidThemeName,
+  signal: AbortSignal,
+) => Promise<string>;
+
+type PanZoomInstance = {
+  destroy(): void;
+  resize(): unknown;
+  fit(): unknown;
+  center(): unknown;
+  zoomIn(): unknown;
+  zoomOut(): unknown;
+  reset(): unknown;
+};
+
+type PanZoomFactory = (svg: SVGSVGElement, options?: Record<string, unknown>) => PanZoomInstance;
+
+const MAX_TEXT_SIZE = 100000;
+const MIN_ZOOM = 0.3;
+const MAX_ZOOM = 8;
+const SAFE_LINK_PROTOCOLS = new Set(["http:", "https:", "mailto:"]);
+const XLINK_NS = "http://www.w3.org/1999/xlink";
+
+let mermaidApi: MermaidApi | null = null;
+let initPromise: Promise<MermaidApi> | null = null;
+let renderQueue: Promise<void> = Promise.resolve();
+let panZoomFactory: PanZoomFactory | null = null;
+let panZoomPromise: Promise<PanZoomFactory | null> | null = null;
+let renderAdapterForTest: MermaidRenderAdapter | null = null;
+let panZoomFactoryForTest: PanZoomFactory | null | undefined;
+
+export function __setMermaidRenderAdapterForTest(adapter: MermaidRenderAdapter | null): void {
+  renderAdapterForTest = adapter;
+  renderQueue = Promise.resolve();
+}
+
+export function __setMermaidPanZoomFactoryForTest(factory: PanZoomFactory | null | undefined): void {
+  panZoomFactoryForTest = factory;
+}
+
+function mermaidThemeVariables(theme: MermaidThemeName): Record<string, string | number | boolean> {
+  if (theme === "dark") {
+    return {
+      darkMode: true,
+      background: "#111319",
+      fontSize: "13px",
+      fontFamily: "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+      primaryColor: "#1f2937",
+      primaryTextColor: "#f4f5f7",
+      primaryBorderColor: "#374151",
+      mainBkg: "#1f2937",
+      nodeBkg: "#1f2937",
+      nodeBorder: "#374151",
+      nodeTextColor: "#f4f5f7",
+      stateBkg: "#1f2937",
+      stateBorder: "#374151",
+      stateLabelColor: "#f4f5f7",
+      labelColor: "#d1d5db",
+      lineColor: "#6b7280",
+      textColor: "#d1d5db",
+      defaultLinkColor: "#6b7280",
+      edgeLabelBackground: "#111319",
+      clusterBkg: "#0f172a",
+      clusterBorder: "#374151",
+      actorBkg: "#1f2937",
+      actorBorder: "#374151",
+      actorTextColor: "#f4f5f7",
+      actorLineColor: "#4b5563",
+      signalColor: "#d1d5db",
+      signalTextColor: "#f4f5f7",
+      labelBoxBkgColor: "#1f2937",
+      labelBoxBorderColor: "#374151",
+      labelTextColor: "#f4f5f7",
+      loopTextColor: "#f4f5f7",
+      noteBkgColor: "#0f172a",
+      noteBorderColor: "#374151",
+      noteTextColor: "#e5e7eb",
+      classText: "#f4f5f7",
+      classBorder: "#374151",
+      classBkg: "#1f2937",
+      secondaryColor: "#111319",
+      tertiaryColor: "#1f2937",
+    };
+  }
+  return {
+    darkMode: false,
+    background: "#ffffff",
+    fontSize: "13px",
+    fontFamily: "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+    primaryColor: "#f8fafc",
+    primaryTextColor: "#0f172a",
+    primaryBorderColor: "#cbd5e1",
+    mainBkg: "#f8fafc",
+    nodeBkg: "#f8fafc",
+    nodeBorder: "#cbd5e1",
+    nodeTextColor: "#0f172a",
+    stateBkg: "#f8fafc",
+    stateBorder: "#cbd5e1",
+    stateLabelColor: "#0f172a",
+    labelColor: "#475569",
+    lineColor: "#94a3b8",
+    textColor: "#475569",
+    defaultLinkColor: "#94a3b8",
+    edgeLabelBackground: "#ffffff",
+    clusterBkg: "#f1f5f9",
+    clusterBorder: "#e2e8f0",
+    actorBkg: "#f8fafc",
+    actorBorder: "#cbd5e1",
+    actorTextColor: "#0f172a",
+    actorLineColor: "#cbd5e1",
+    signalColor: "#475569",
+    signalTextColor: "#0f172a",
+    labelBoxBkgColor: "#f8fafc",
+    labelBoxBorderColor: "#cbd5e1",
+    labelTextColor: "#0f172a",
+    loopTextColor: "#0f172a",
+    noteBkgColor: "#f1f5f9",
+    noteBorderColor: "#e2e8f0",
+    noteTextColor: "#334155",
+    classText: "#0f172a",
+    classBorder: "#cbd5e1",
+    classBkg: "#f8fafc",
+    secondaryColor: "#f1f5f9",
+    tertiaryColor: "#f8fafc",
+  };
+}
+
+function mermaidConfigForTheme(theme: MermaidThemeName) {
+  return {
+    startOnLoad: false,
+    theme: "base" as const,
+    securityLevel: "antiscript" as const,
+    maxTextSize: MAX_TEXT_SIZE,
+    fontFamily: "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+    flowchart: { htmlLabels: false },
+    themeVariables: mermaidThemeVariables(theme),
+  };
+}
+
+async function ensureMermaid(theme: MermaidThemeName): Promise<MermaidApi> {
+  if (mermaidApi) {
+    mermaidApi.initialize(mermaidConfigForTheme(theme));
+    return mermaidApi;
+  }
+  if (!initPromise) {
+    initPromise = import("mermaid").then((mod) => {
+      mermaidApi = mod.default;
+      mermaidApi.initialize(mermaidConfigForTheme(theme));
+      return mermaidApi;
+    }).catch((err) => {
+      initPromise = null;
+      mermaidApi = null;
+      throw err;
+    });
+  }
+  const api = await initPromise;
+  api.initialize(mermaidConfigForTheme(theme));
+  return api;
+}
+
+function queuedRender(
+  svgId: string,
+  definition: string,
+  theme: MermaidThemeName,
+  signal: AbortSignal,
+): Promise<string> {
+  const promise = renderQueue.then(async () => {
+    if (signal.aborted) throw new DOMException("Aborted", "AbortError");
+    const api = await ensureMermaid(theme);
+    if (signal.aborted) throw new DOMException("Aborted", "AbortError");
+    const { svg } = await api.render(svgId, definition);
+    if (signal.aborted) throw new DOMException("Aborted", "AbortError");
+    return svg;
+  });
+  renderQueue = promise.then(() => {}, () => {});
+  return promise;
+}
+
+async function renderMermaid(
+  svgId: string,
+  definition: string,
+  theme: MermaidThemeName,
+  signal: AbortSignal,
+): Promise<string> {
+  if (renderAdapterForTest) return renderAdapterForTest(svgId, definition, theme, signal);
+  return queuedRender(svgId, definition, theme, signal);
+}
+
+async function ensurePanZoomFactory(): Promise<PanZoomFactory | null> {
+  if (panZoomFactoryForTest !== undefined) return panZoomFactoryForTest;
+  if (panZoomFactory) return panZoomFactory;
+  if (!panZoomPromise) {
+    panZoomPromise = import("svg-pan-zoom").then((mod) => {
+      const factory = (("default" in mod ? mod.default : mod) as unknown) as PanZoomFactory;
+      panZoomFactory = factory;
+      return factory;
+    }).catch(() => null);
+  }
+  return panZoomPromise;
+}
+
+export function isSafeMermaidHref(href: string | null | undefined): boolean {
+  const value = href?.trim();
+  if (!value) return false;
+  if (value.startsWith("#")) return true;
+  try {
+    return SAFE_LINK_PROTOCOLS.has(new URL(value).protocol);
+  } catch {
+    return false;
+  }
+}
+
+export function isOpenableMermaidHref(href: string | null | undefined): boolean {
+  const value = href?.trim();
+  return Boolean(value && !value.startsWith("#") && isSafeMermaidHref(value));
+}
+
+export function getMermaidAnchorHref(anchor: Element): string | null {
+  return anchor.getAttribute("href")
+    ?? anchor.getAttribute("xlink:href")
+    ?? anchor.getAttributeNS(XLINK_NS, "href");
+}
+
+export function sanitizeMermaidSvg(svg: string): string {
+  if (typeof DOMParser === "undefined" || typeof XMLSerializer === "undefined") return svg;
+  const doc = new DOMParser().parseFromString(svg, "image/svg+xml");
+  const svgEl = doc.documentElement;
+  if (svgEl.localName.toLowerCase() !== "svg") return svg;
+
+  const elements = [svgEl, ...Array.from(svgEl.querySelectorAll("*"))];
+  const toRemove: Element[] = [];
+
+  for (const element of elements) {
+    const name = element.localName.toLowerCase();
+    if (name === "script" || name === "iframe" || name === "object" || name === "embed") {
+      toRemove.push(element);
+      continue;
+    }
+    for (const attr of Array.from(element.attributes)) {
+      const attrName = attr.name;
+      const localName = attr.localName.toLowerCase();
+      if (/^on/i.test(attrName)) {
+        element.removeAttribute(attrName);
+        continue;
+      }
+      if (localName === "href" && !isSafeMermaidHref(attr.value)) {
+        element.removeAttribute(attrName);
+      }
+    }
+  }
+
+  for (const element of toRemove) element.parentNode?.removeChild(element);
+  return new XMLSerializer().serializeToString(svgEl);
+}
+
+export function resolveMermaidTheme(): MermaidThemeName {
+  if (typeof document === "undefined") return "dark";
+  const forced = document.documentElement.getAttribute("data-theme");
+  if (forced === "light" || forced === "dark") return forced;
+  return window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
+}
+
+function useMermaidTheme(): MermaidThemeName {
+  const [theme, setTheme] = useState<MermaidThemeName>(resolveMermaidTheme);
+
+  useEffect(() => {
+    const html = document.documentElement;
+    const updateTheme = () => setTheme(resolveMermaidTheme());
+    const observer = new MutationObserver(updateTheme);
+    observer.observe(html, { attributeFilter: ["data-theme", "data-theme-mode"] });
+
+    const mq = window.matchMedia("(prefers-color-scheme: light)");
+    mq.addEventListener("change", updateTheme);
+    return () => {
+      observer.disconnect();
+      mq.removeEventListener("change", updateTheme);
+    };
+  }, []);
+
+  return theme;
+}
+
+function destroyPanZoom(instance: PanZoomInstance | null): void {
+  if (!instance) return;
+  try {
+    instance.destroy();
+  } catch {
+    /* svg-pan-zoom cleanup is best-effort across browser and test DOMs. */
+  }
+}
+
+const MermaidDiagram = memo(function MermaidDiagram({ definition }: MermaidDiagramProps) {
+  const [state, setState] = useState<DiagramState>({ status: "loading" });
+  const [tab, setTab] = useState<DiagramTab>("preview");
+  const [fullscreen, setFullscreen] = useState(false);
+  const [portalTarget, setPortalTarget] = useState<Element | null>(null);
+  const theme = useMermaidTheme();
+  const instanceId = useId().replace(/[^a-zA-Z0-9_-]/g, "-");
+  const svgId = `mermaid-${instanceId}`;
+  const previewRef = useRef<HTMLDivElement>(null);
+  const panZoomRef = useRef<PanZoomInstance | null>(null);
+  const mountedRef = useRef(true);
+  const source = useMemo(() => definition.replace(/\n$/, ""), [definition]);
+
+  useEffect(() => {
+    mountedRef.current = true;
+    const controller = new AbortController();
+    setState({ status: "loading" });
+
+    (async () => {
+      try {
+        const trimmed = source.trim();
+        if (!trimmed) {
+          setState({ status: "error", message: "Empty diagram definition" });
+          return;
+        }
+        const rendered = await renderMermaid(svgId, trimmed, theme, controller.signal);
+        if (controller.signal.aborted || !mountedRef.current) return;
+        setState({ status: "rendered", svg: sanitizeMermaidSvg(rendered) });
+      } catch (err) {
+        if (err instanceof DOMException && err.name === "AbortError") return;
+        if (controller.signal.aborted || !mountedRef.current) return;
+        const message = err instanceof Error ? err.message : String(err);
+        setState({ status: "error", message });
+      }
+    })();
+
+    return () => {
+      controller.abort();
+      mountedRef.current = false;
+    };
+  }, [source, svgId, theme]);
+
+  useLayoutEffect(() => {
+    if (tab !== "preview" || state.status !== "rendered") return;
+    const container = previewRef.current;
+    if (!container) return;
+
+    let cancelled = false;
+    let raf = 0;
+    let instance: PanZoomInstance | null = null;
+
+    void ensurePanZoomFactory().then((factory) => {
+      if (cancelled || !factory) return;
+      raf = window.requestAnimationFrame(() => {
+        const svg = container.querySelector("svg") as SVGSVGElement | null;
+        if (cancelled || !svg) return;
+        svg.removeAttribute("width");
+        svg.removeAttribute("height");
+        svg.style.width = "100%";
+        svg.style.height = "100%";
+        svg.style.maxWidth = "none";
+
+        destroyPanZoom(panZoomRef.current);
+        try {
+          instance = factory(svg, {
+            zoomEnabled: true,
+            panEnabled: true,
+            controlIconsEnabled: false,
+            dblClickZoomEnabled: true,
+            fit: true,
+            center: true,
+            minZoom: MIN_ZOOM,
+            maxZoom: MAX_ZOOM,
+            zoomScaleSensitivity: 0.3,
+          });
+          panZoomRef.current = instance;
+          window.requestAnimationFrame(() => {
+            if (panZoomRef.current !== instance) return;
+            instance?.resize();
+            instance?.fit();
+            instance?.center();
+          });
+        } catch {
+          instance = null;
+          panZoomRef.current = null;
+        }
+      });
+    });
+
+    return () => {
+      cancelled = true;
+      if (raf) window.cancelAnimationFrame(raf);
+      if (panZoomRef.current === instance) panZoomRef.current = null;
+      destroyPanZoom(instance);
+    };
+  }, [state, tab, fullscreen]);
+
+  useEffect(() => {
+    if (!fullscreen) return;
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setFullscreen(false);
+        setPortalTarget(null);
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [fullscreen]);
+
+  useEffect(() => {
+    if (!fullscreen || !panZoomRef.current) return;
+    panZoomRef.current.resize();
+    panZoomRef.current.fit();
+    panZoomRef.current.center();
+  }, [fullscreen]);
+
+  const toggleFullscreen = useCallback(() => {
+    setFullscreen((current) => {
+      const next = !current;
+      setPortalTarget(next ? document.querySelector(".chat-pane") ?? document.body : null);
+      return next;
+    });
+  }, []);
+
+  const zoomIn = useCallback(() => {
+    panZoomRef.current?.zoomIn();
+  }, []);
+
+  const zoomOut = useCallback(() => {
+    panZoomRef.current?.zoomOut();
+  }, []);
+
+  const resetZoom = useCallback(() => {
+    const instance = panZoomRef.current;
+    if (!instance) return;
+    instance.reset();
+    instance.fit();
+    instance.center();
+  }, []);
+
+  const body = (
+    <MermaidBody
+      state={state}
+      source={source}
+      tab={tab}
+      previewRef={previewRef}
+    />
+  );
+
+  const content = (
+    <div className={[
+      "mermaid-diagram",
+      state.status === "error" ? "mermaid-diagram--error" : "",
+      fullscreen ? "mermaid-diagram--fullscreen" : "",
+    ].filter(Boolean).join(" ")}>
+      <MermaidToolbar
+        tab={tab}
+        source={source}
+        fullscreen={fullscreen}
+        onTabChange={setTab}
+        onFullscreenToggle={toggleFullscreen}
+        onZoomIn={zoomIn}
+        onZoomOut={zoomOut}
+        onResetZoom={resetZoom}
+      />
+      {body}
+    </div>
+  );
+
+  if (fullscreen && portalTarget) {
+    return (
+      <>
+        <div className="mermaid-diagram mermaid-diagram--placeholder" aria-hidden="true" />
+        {createPortal(content, portalTarget)}
+      </>
+    );
+  }
+
+  return content;
+});
+
+function MermaidToolbar({
+  tab,
+  source,
+  fullscreen,
+  onTabChange,
+  onFullscreenToggle,
+  onZoomIn,
+  onZoomOut,
+  onResetZoom,
+}: {
+  tab: DiagramTab;
+  source: string;
+  fullscreen: boolean;
+  onTabChange: (tab: DiagramTab) => void;
+  onFullscreenToggle: () => void;
+  onZoomIn: () => void;
+  onZoomOut: () => void;
+  onResetZoom: () => void;
+}) {
+  return (
+    <div className="mermaid-diagram__toolbar">
+      <div className="mermaid-diagram__title" aria-hidden="true">Mermaid</div>
+      <div className="mermaid-diagram__actions">
+        <button
+          type="button"
+          className={`mermaid-diagram__icon-btn${tab === "preview" ? " mermaid-diagram__icon-btn--active" : ""}`}
+          onClick={() => onTabChange("preview")}
+          aria-label="Preview diagram"
+          title="Preview diagram"
+        >
+          <Play size={14} />
+        </button>
+        <button
+          type="button"
+          className={`mermaid-diagram__icon-btn${tab === "code" ? " mermaid-diagram__icon-btn--active" : ""}`}
+          onClick={() => onTabChange("code")}
+          aria-label="Show diagram source"
+          title="Show diagram source"
+        >
+          <Code2 size={14} />
+        </button>
+        <button
+          type="button"
+          className="mermaid-diagram__icon-btn mermaid-diagram__zoom-action"
+          onClick={onZoomOut}
+          aria-label="Zoom out"
+          title="Zoom out"
+        >
+          <ZoomOut size={14} />
+        </button>
+        <button
+          type="button"
+          className="mermaid-diagram__icon-btn mermaid-diagram__zoom-action"
+          onClick={onZoomIn}
+          aria-label="Zoom in"
+          title="Zoom in"
+        >
+          <ZoomIn size={14} />
+        </button>
+        <button
+          type="button"
+          className="mermaid-diagram__icon-btn mermaid-diagram__zoom-action"
+          onClick={onResetZoom}
+          aria-label="Reset zoom"
+          title="Reset zoom"
+        >
+          <RotateCcw size={14} />
+        </button>
+        <CopyButton text={source} className="mermaid-diagram__copy-btn" showInlineLabel={false} />
+        <button
+          type="button"
+          className="mermaid-diagram__icon-btn"
+          onClick={onFullscreenToggle}
+          aria-label={fullscreen ? "Exit fullscreen" : "Open fullscreen"}
+          title={fullscreen ? "Exit fullscreen" : "Open fullscreen"}
+        >
+          {fullscreen ? <Minimize2 size={14} /> : <Maximize2 size={14} />}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function MermaidBody({
+  state,
+  source,
+  tab,
+  previewRef,
+}: {
+  state: DiagramState;
+  source: string;
+  tab: DiagramTab;
+  previewRef: RefObject<HTMLDivElement | null>;
+}) {
+  if (tab === "code") {
+    return (
+      <pre className="code hljs mermaid-diagram__code" data-lang="mermaid">
+        <code>{source}</code>
+      </pre>
+    );
+  }
+
+  if (state.status === "loading") {
+    return (
+      <div className="mermaid-diagram__loading">
+        <span className="mermaid-diagram__spinner" />
+        <span>Rendering diagram...</span>
+      </div>
+    );
+  }
+
+  if (state.status === "error") {
+    return (
+      <div className="mermaid-diagram__error">
+        <div className="mermaid-diagram__error-bar">
+          <AlertCircle size={14} className="mermaid-diagram__error-icon" />
+          <span>Diagram syntax error</span>
+        </div>
+        <pre className="code hljs mermaid-diagram__error-source" data-lang="mermaid">
+          <code>{source}</code>
+        </pre>
+        <details className="mermaid-diagram__error-details">
+          <summary>Error details</summary>
+          <pre className="mermaid-diagram__error-detail-text">{state.message}</pre>
+        </details>
+      </div>
+    );
+  }
+
+  return <SvgPreview refEl={previewRef} svg={state.svg} />;
+}
+
+function SvgPreview({ refEl, svg }: { refEl: RefObject<HTMLDivElement | null>; svg: string }) {
+  const openAnchor = useCallback((event: React.MouseEvent) => {
+    const target = event.target;
+    if (!(target instanceof Element)) return;
+    const anchor = target.closest("a");
+    const href = anchor ? getMermaidAnchorHref(anchor) : null;
+    if (!href) return;
+    event.preventDefault();
+    if (isOpenableMermaidHref(href)) openExternal(href);
+  }, []);
+
+  const preventMiddleButtonNavigation = useCallback((event: React.MouseEvent) => {
+    if (event.button !== 1) return;
+    const target = event.target;
+    if (target instanceof Element && target.closest("a")) event.preventDefault();
+  }, []);
+
+  return (
+    <div className="mermaid-diagram__preview-wrap">
+      <div
+        className="mermaid-diagram__preview"
+        ref={refEl}
+        dangerouslySetInnerHTML={{ __html: svg }}
+        onClick={openAnchor}
+        onAuxClick={openAnchor}
+        onMouseDown={preventMiddleButtonNavigation}
+      />
+    </div>
+  );
+}
+
+export default MermaidDiagram;

desktop/frontend/src/components/Message.tsx

@@ -1,6 +1,6 @@
 import { memo, useEffect, useRef, useState } from "react";
 import type { FormEvent, KeyboardEvent as ReactKeyboardEvent } from "react";
-import { ChevronDown, ChevronRight, FileText, Folder, GitBranch, Image, MessageSquare, Pencil, RotateCcw, ScrollText } from "lucide-react";
+import { BrainCircuit, ChevronDown, ChevronRight, FileText, Folder, GitBranch, Image, MessageSquare, Pencil, RotateCcw, ScrollText } from "lucide-react";
 import { Markdown } from "./Markdown";
 import { CopyButton } from "./CopyButton";
 import { ProcessBrainIcon } from "./ProcessCard";
@@ -10,10 +10,13 @@ import type { DisplayAttachment } from "../lib/attachmentDisplay";
 import { app } from "../lib/bridge";
 import { replaySubmitText } from "../lib/editReplay";
 import { useT } from "../lib/i18n";
+import { Tooltip } from "./Tooltip";
 import { useGSAPCollapse } from "../lib/useGSAPCollapse";
 import { displayReasoningText } from "../lib/reasoningDisplay";
+import { stripMemoryCompilerExecution } from "../lib/memoryCompilerDisplay";
+import { visibleTranscriptMemoryCitations } from "../lib/memoryCitationVisibility";
 import type { Item, MessageActionScope } from "../lib/useController";
-import type { CheckpointMeta } from "../lib/types";
+import type { CheckpointMeta, MemoryCitation } from "../lib/types";
 
 type AssistantItem = Extract<Item, { kind: "assistant" }>;
 export type TurnActionMenu = "summary" | "rewind";
@@ -78,6 +81,60 @@ function mergeDisplayAttachments(existing: DisplayAttachment[], incoming: Displa
   return merged;
 }
 
+function MemoryCitations({ citations }: { citations?: MemoryCitation[] }) {
+  const t = useT();
+  const bodyRef = useRef<HTMLDivElement>(null);
+  const [open, setOpen] = useState(false);
+  const clean = visibleTranscriptMemoryCitations(citations)
+    .filter((citation) => (citation.source ?? citation.id ?? citation.note ?? "").trim() !== "")
+    .slice(0, 5);
+  useGSAPCollapse(bodyRef, open);
+  if (clean.length === 0) return null;
+  return (
+    <div className="msg-memory-citations">
+      <button
+        type="button"
+        className="msg-memory-citations__toggle"
+        aria-expanded={open}
+        onClick={() => setOpen((value) => !value)}
+      >
+        <ChevronRight className={`msg-memory-citations__chevron${open ? " msg-memory-citations__chevron--open" : ""}`} size={15} />
+        <span>{t("msg.memoryCompilerCitationsCount", { n: clean.length })}</span>
+      </button>
+      {open && (
+        <div ref={bodyRef} className="msg-memory-citations__body">
+          {clean.map((citation, index) => {
+            const lines = memoryCitationLines(citation, t);
+            return (
+              <div key={`${citation.id ?? citation.source}-${index}`} className="msg-memory-citations__item">
+                <div className="msg-memory-citations__source">
+                  <span>{memoryCitationSource(citation)}</span>
+                  {lines && <span className="msg-memory-citations__lines">{lines}</span>}
+                </div>
+                {citation.note && <div className="msg-memory-citations__note">{citation.note}</div>}
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function memoryCitationSource(citation: MemoryCitation): string {
+  const source = (citation.source || citation.id || "Memory v5").trim();
+  if (citation.kind === "compiler_reference" && source === "Memory v5") return "Memory v5 compiler";
+  return source;
+}
+
+function memoryCitationLines(citation: MemoryCitation, t: ReturnType<typeof useT>): string {
+  const start = citation.lineStart ?? 0;
+  const end = citation.lineEnd ?? 0;
+  if (start <= 0) return "";
+  if (end > 0 && end !== start) return t("msg.memoryCitationLineRange", { start, end });
+  return t("msg.memoryCitationLine", { line: start });
+}
+
 function messageDate(value?: number): Date {
   return new Date(typeof value === "number" && Number.isFinite(value) && value > 0 ? value : Date.now());
 }
@@ -111,7 +168,8 @@ export function UserMessage({
 }) {
   const t = useT();
   const imSource = parseImSourceMessage(text);
-  const actionText = imSource?.text ?? text;
+  const actionText = stripMemoryCompilerExecution(imSource?.text ?? text);
+  const hasMemoryCompiler = Boolean(submitText?.includes("<memory-compiler-execution>"));
   const { text: displayText, attachments } = parseAttachmentRefsForDisplay(actionText);
   const orderedAttachments = sortDisplayAttachments(attachments);
   const sourceLabel = imSource ? imSourceLabel(imSource, t) : "";
@@ -327,6 +385,11 @@ export function UserMessage({
               {formatMessageTime(sentAt)}
             </time>
           )}
+          {hasMemoryCompiler && (
+            <span className="msg-meta__indicator" title={t("msg.memoryCompilerApplied")} aria-hidden="true">
+              <BrainCircuit size={14} />
+            </span>
+          )}
           <CopyButton text={actionText} label={t("msg.copy")} showInlineLabel={false} className="msg-meta__btn msg-meta__copy" />
           {onEdit && (
             <button
@@ -420,11 +483,34 @@ export function TurnActions({
     }
   };
   const actionMeta = (scope: MessageActionScope): string => {
-    if ((scope === "code" || scope === "both") && checkpoint?.files?.length) {
-      return t("rewind.filesChanged", { count: checkpoint.files.length });
+    const total = checkpoint?.fileCount ?? checkpoint?.files?.length ?? 0;
+    if ((scope === "code" || scope === "both") && total > 0) {
+      const turnCount = checkpoint?.turnFileCount ?? 0;
+      if (turnCount > 0 && turnCount < total) {
+        return `${t("rewind.filesChanged", { count: total })} (${t("rewind.turnFiles", { count: turnCount })})`;
+      }
+      return t("rewind.filesChanged", { count: total });
     }
     return "";
   };
+  const actionTooltipLabel = (scope: MessageActionScope) => {
+    const reason = actionDisabledReason(scope);
+    if (reason) return <span>{reason}</span>;
+    const files = checkpoint?.files ?? [];
+    const total = checkpoint?.fileCount ?? files.length;
+    if ((scope === "code" || scope === "both") && total > 0) {
+      const hidden = Math.max(0, total - files.length);
+      return (
+        <div className="rewind__files-tooltip">
+          {files.map((file) => (
+            <div key={file}>{file.split(/[/\\]/).pop() || file}</div>
+          ))}
+          {hidden > 0 && <div>+{hidden}</div>}
+        </div>
+      );
+    }
+    return undefined;
+  };
   const runAction = (scope: MessageActionScope) => {
     setConfirmScope(null);
     onOpenMenu?.(null);
@@ -441,7 +527,8 @@ export function TurnActions({
   const renderAction = (scope: MessageActionScope, danger = false) => {
     const disabledReason = actionDisabledReason(scope);
     const meta = actionMeta(scope);
-    return (
+    const tipLabel = actionTooltipLabel(scope);
+    const button = (
       <button
         className={[
           "rewind__menu-item",
@@ -450,13 +537,14 @@ export function TurnActions({
         ].filter(Boolean).join(" ")}
         type="button"
         disabled={Boolean(disabledReason)}
-        title={disabledReason || undefined}
+        {...(tipLabel ? {} : { title: disabledReason || undefined })}
         onClick={() => selectRewind(scope)}
       >
         <span>{actionLabel(scope)}</span>
         {meta && <span className="rewind__menu-meta">{meta}</span>}
       </button>
     );
+    return tipLabel ? <Tooltip key={scope} label={tipLabel} side="top" block fill>{button}</Tooltip> : button;
   };
   const forkDisabledReason = canAct ? actionDisabledReason("fork") : "";
   const toggleMenu = (menu: TurnActionMenu) => {
@@ -543,6 +631,7 @@ export const AssistantMessage = memo(function AssistantMessage({
   defaultExpanded = false,
   expandWhileStreaming = true,
   truncateStreamingReasoning = false,
+  creationMode = false,
 }: {
   item: AssistantItem;
   defaultExpanded?: boolean;
@@ -550,6 +639,7 @@ export const AssistantMessage = memo(function AssistantMessage({
   expandWhileStreaming?: boolean;
   /** Opt-in for compact mode to keep live DeepSeek reasoning from growing an unbounded DOM. */
   truncateStreamingReasoning?: boolean;
+  creationMode?: boolean;
 }) {
   const t = useT();
   const reasoningBodyRef = useRef<HTMLDivElement>(null);
@@ -628,9 +718,10 @@ export const AssistantMessage = memo(function AssistantMessage({
       )}
       {hasText && (
         <div className="msg__body">
-          <Markdown text={item.text} />
+          <Markdown text={item.text} plainStatusBlocks={creationMode} />
         </div>
       )}
+      <MemoryCitations citations={item.memoryCitations} />
     </div>
   );
 });

desktop/frontend/src/components/ModelSwitcher.tsx

@@ -5,6 +5,7 @@ import { app } from "../lib/bridge";
 import { useT } from "../lib/i18n";
 import type { ModelInfo } from "../lib/types";
 import { AnchoredPopover } from "./AnchoredPopover";
+import { Tooltip } from "./Tooltip";
 
 // ModelSwitcher opens an upward popover listing configured providers. Selecting
 // one switches the active model while the current conversation continues.
@@ -79,6 +80,7 @@ export function ModelSwitcher({ label, tabId, onPick }: { label: string; tabId?:
     const cur = models.find((m) => m.current) ?? models.find((m) => m.model === label || m.ref === label);
     return cur ? providerLabel(cur.provider, t) : null;
   }, [label, models, t]);
+  const triggerLabel = currentProvider ? `${label} · ${currentProvider}` : label;
 
   const pick = (name: string) => {
     setModels((prev) => prev.map((m) => ({ ...m, current: m.ref === name })));
@@ -88,17 +90,20 @@ export function ModelSwitcher({ label, tabId, onPick }: { label: string; tabId?:
 
   return (
     <div className="modelsw">
-      <button
-        ref={triggerRef}
-        type="button"
-        className="modelsw__trigger"
-        aria-expanded={open}
-        onClick={() => setOpen((v) => !v)}
-      >
-        <Brain size={13} className="modelsw__kind" />
-        <span className="modelsw__label">{label}{currentProvider && <span className="modelsw__provider"> · {currentProvider}</span>}</span>
-        <ChevronsUpDown size={11} />
-      </button>
+      <Tooltip label={triggerLabel} fill>
+        <button
+          ref={triggerRef}
+          type="button"
+          className="modelsw__trigger"
+          aria-label={triggerLabel}
+          aria-expanded={open}
+          onClick={() => setOpen((v) => !v)}
+        >
+          <Brain size={13} className="modelsw__kind" />
+          <span className="modelsw__label">{label}</span>
+          <ChevronsUpDown size={11} />
+        </button>
+      </Tooltip>
       <AnchoredPopover
         open={open}
         anchorRef={triggerRef}
@@ -156,14 +161,6 @@ function providerLabel(provider: string, t: ReturnType<typeof useT>): string {
     case "deepseek-flash":
     case "deepseek-pro":
       return t("settings.providerLabel.deepseek");
-    case "mimo-api":
-    case "mimo":
-    case "xiaomi-mimo":
-      return t("settings.providerLabel.mimoApi");
-    case "mimo-token-plan":
-    case "mimo-pro":
-    case "mimo-flash":
-      return t("settings.providerLabel.mimoTokenPlan");
     default:
       return provider;
   }

desktop/frontend/src/components/ProjectTree.tsx

@@ -12,6 +12,8 @@ import type { ProjectNode, ProjectTopicStatus } from "../lib/types";
 import { topicActivityTime } from "../lib/session";
 import { getLocale, useT, type DictKey, type Translator } from "../lib/i18n";
 import { PROJECT_COLOR_OPTIONS, projectColorValue } from "../lib/projectColors";
+import { topicShortcutLabel, type TopicShortcutEntry } from "../lib/topicShortcuts";
+import type { ShortcutPlatform } from "../lib/keyboardShortcuts";
 import { ContextMenu, contextMenuPointFromEvent, type ContextMenuItem, type ContextMenuPoint } from "./ContextMenu";
 import { Tooltip } from "./Tooltip";
 
@@ -33,6 +35,9 @@ interface ProjectTreeProps {
   onTimeFilterChange: (filter: "all" | "10" | "20" | "1h" | "3h" | "5h" | "1d") => void;
   searchExpanded?: boolean;
   searchFocusSignal?: number;
+  showShortcutBadges?: boolean;
+  shortcutPlatform?: ShortcutPlatform;
+  onVisibleTopicsChange?: (topics: TopicShortcutEntry[]) => void;
 }
 
 type ProjectTreeImTopicSource = {
@@ -72,6 +77,22 @@ export function projectTreeTopicOpenRequest(node: ProjectNode): ProjectTreeTopic
   };
 }
 
+type ProjectTreeTopicClickTarget = {
+  rowKey: string;
+  canRename: boolean;
+};
+
+type ProjectTreePendingTopicOpen = ProjectTreeTopicClickTarget & {
+  timer: ReturnType<typeof setTimeout>;
+};
+
+export function projectTreeShouldSuppressOpenForRename(
+  pending: ProjectTreeTopicClickTarget | null,
+  next: ProjectTreeTopicClickTarget,
+): boolean {
+  return Boolean(pending && pending.rowKey === next.rowKey && pending.canRename && next.canRename);
+}
+
 export type ProjectTreeFolderDisclosure = {
   canExpand: boolean;
   isOpen: boolean;
@@ -138,6 +159,43 @@ function topicStatusLabel(node: ProjectNode, t: Translator): string {
   return status ? t(topicStatusLabels[status]) : "";
 }
 
+function topicActivityAt(node: ProjectNode): number {
+  return node.lastActivityAt || node.createdAt || 0;
+}
+
+export function projectTreeReadActivityKey(node: ProjectNode): string | null {
+  const request = projectTreeTopicOpenRequest(node);
+  if (!request?.topicId) return null;
+  return [
+    request.scope,
+    request.workspaceRoot,
+    request.topicId,
+    request.sessionPath ?? "",
+  ].join("\u001f");
+}
+
+type ProjectTreeReadActivity = Record<string, number>;
+
+export function projectTreeTopicHasUnreadActivity(
+  node: ProjectNode,
+  readActivity: ProjectTreeReadActivity,
+  activeScope?: string,
+  activeWorkspaceRoot?: string,
+  activeTopicId?: string,
+  activeSessionPath?: string,
+): boolean {
+  if (!isTopicNode(node) && !isRuntimeSessionNode(node)) return false;
+  if (topicIsActive(node, activeScope, activeWorkspaceRoot, activeTopicId, activeSessionPath)) return false;
+  if (topicStatus(node) !== "") return false;
+  const key = projectTreeReadActivityKey(node);
+  const activityAt = topicActivityAt(node);
+  return Boolean(key && activityAt > 0 && (readActivity[key] ?? 0) < activityAt);
+}
+
+export function projectTreeShouldRenderTopicActions(isSessionNode: boolean, compactTopics: boolean, unread: boolean): boolean {
+  return !isSessionNode && compactTopics && !unread;
+}
+
 function topicActivityLabel(ms: number, t: Translator, compact = false): string {
   if (ms <= 0) return "";
   const delta = Date.now() - ms;
@@ -205,6 +263,31 @@ type WorkbenchTreeSections = {
 const GLOBAL_PROJECT_ORDER_KEY = "__global__";
 const WORKBENCH_ORGANIZE_KEY = "projectTree:workbenchOrganize";
 const WORKBENCH_SORT_KEY = "projectTree:workbenchSort";
+const READ_ACTIVITY_KEY = "projectTree:readActivity";
+const READ_ACTIVITY_INIT_KEY = "projectTree:readActivityInitialized";
+
+function loadReadActivity(): ProjectTreeReadActivity {
+  try {
+    const raw = localStorage.getItem(READ_ACTIVITY_KEY);
+    if (!raw) return {};
+    const parsed = JSON.parse(raw) as Record<string, unknown>;
+    const out: ProjectTreeReadActivity = {};
+    for (const [key, value] of Object.entries(parsed)) {
+      if (typeof value === "number" && Number.isFinite(value)) out[key] = value;
+    }
+    return out;
+  } catch {
+    return {};
+  }
+}
+
+function saveReadActivity(readActivity: ProjectTreeReadActivity) {
+  try {
+    localStorage.setItem(READ_ACTIVITY_KEY, JSON.stringify(readActivity));
+  } catch {
+    /* localStorage unavailable */
+  }
+}
 
 function loadWorkbenchOrganizeMode(): WorkbenchOrganizeMode {
   try {
@@ -446,6 +529,9 @@ export function ProjectTree({
   onTimeFilterChange,
   searchExpanded = true,
   searchFocusSignal = 0,
+  showShortcutBadges = false,
+  shortcutPlatform,
+  onVisibleTopicsChange,
 }: ProjectTreeProps) {
   const t = useT();
   const { showToast } = useToast();
@@ -473,11 +559,20 @@ export function ProjectTree({
   const [workbenchHeaderMenu, setWorkbenchHeaderMenu] = useState<WorkbenchHeaderMenu>(null);
   const [workbenchOrganizeMode, setWorkbenchOrganizeMode] = useState<WorkbenchOrganizeMode>(loadWorkbenchOrganizeMode);
   const [workbenchSortMode, setWorkbenchSortMode] = useState<WorkbenchSortMode>(loadWorkbenchSortMode);
+  const [readActivity, setReadActivity] = useState<ProjectTreeReadActivity>(loadReadActivity);
   const filterRef = useRef<HTMLDivElement>(null);
   const filterTriggerRef = useRef<HTMLButtonElement>(null);
   const searchInputRef = useRef<HTMLInputElement>(null);
+  const topicIndexRef = useRef(0);
+  const visibleTopicsCollectorRef = useRef<TopicShortcutEntry[]>([]);
   const [filterMenuOpen, setFilterMenuOpen] = useState(false);
   const creatingRef = useRef(false);
+  const clickTimerRef = useRef<ProjectTreePendingTopicOpen | null>(null);
+  useEffect(() => {
+    return () => {
+      if (clickTimerRef.current !== null) clearTimeout(clickTimerRef.current.timer);
+    };
+  }, []);
   const manuallyCollapsedRef = useRef(manuallyCollapsed);
 
   const closeMenu = useCallback(() => {
@@ -530,6 +625,67 @@ export function ProjectTree({
     void refresh();
   }, [refresh, refreshSignal]);
 
+  const markNodeRead = useCallback((node: ProjectNode) => {
+    const key = projectTreeReadActivityKey(node);
+    const activityAt = topicActivityAt(node);
+    if (!key || activityAt <= 0) return;
+    setReadActivity((prev) => {
+      if ((prev[key] ?? 0) >= activityAt) return prev;
+      const next = { ...prev, [key]: activityAt };
+      saveReadActivity(next);
+      return next;
+    });
+  }, []);
+
+  useEffect(() => {
+    if (tree.length === 0) return;
+    try {
+      if (localStorage.getItem(READ_ACTIVITY_INIT_KEY)) return;
+    } catch {
+      return;
+    }
+    const baseline: ProjectTreeReadActivity = {};
+    const collectBaseline = (nodes: ProjectNode[]) => {
+      for (const node of nodes) {
+        if ((isTopicNode(node) || isRuntimeSessionNode(node)) && topicStatus(node) === "") {
+          const key = projectTreeReadActivityKey(node);
+          const activityAt = topicActivityAt(node);
+          if (key && activityAt > 0) baseline[key] = Math.max(baseline[key] ?? 0, activityAt);
+        }
+        collectBaseline(asArray(node.children));
+      }
+    };
+    collectBaseline(tree);
+    try {
+      localStorage.setItem(READ_ACTIVITY_INIT_KEY, "1");
+    } catch {
+      /* localStorage unavailable */
+    }
+    if (Object.keys(baseline).length === 0) return;
+    setReadActivity((prev) => {
+      const next = { ...prev };
+      let changed = false;
+      for (const [key, value] of Object.entries(baseline)) {
+        if ((next[key] ?? 0) >= value) continue;
+        next[key] = value;
+        changed = true;
+      }
+      if (!changed) return prev;
+      saveReadActivity(next);
+      return next;
+    });
+  }, [tree]);
+
+  useEffect(() => {
+    const markActive = (nodes: ProjectNode[]) => {
+      for (const node of nodes) {
+        if (topicIsActive(node, activeScope, activeWorkspaceRoot, activeTopicId, activeSessionPath)) markNodeRead(node);
+        markActive(asArray(node.children));
+      }
+    };
+    markActive(tree);
+  }, [activeScope, activeSessionPath, activeTopicId, activeWorkspaceRoot, markNodeRead, tree]);
+
   useEffect(() => {
     try {
       localStorage.setItem(WORKBENCH_ORGANIZE_KEY, workbenchOrganizeMode);
@@ -954,7 +1110,7 @@ export function ProjectTree({
     });
   }, [activeAncestorKeys, manuallyCollapsed]);
 
-  const renderNode = (node: ProjectNode | null | undefined, depth: number, section: "pinned" | "projects" = "projects") => {
+  const renderNode = (node: ProjectNode | null | undefined, depth: number, section: "pinned" | "projects" = "projects", isVisible = true) => {
     if (!node) return null;
     const key = projectNodeKey(node, depth);
     const children = asArray(node.children);
@@ -978,6 +1134,7 @@ export function ProjectTree({
       const status = topicStatus(node);
       const statusLabel = topicStatusLabel(node, t);
       const showStatusInSide = status === "thinking" || status === "streaming" || status === "waiting_confirmation" || status === "background_job";
+      const unread = projectTreeTopicHasUnreadActivity(node, readActivity, activeScope, activeWorkspaceRoot, activeTopicId, activeSessionPath);
       const topicId = node.topicId ?? "";
       const imSource = scope === "global" && topicId ? imTopicSources[topicId] : undefined;
       const imSourceLabel = imSource?.label || "";
@@ -1029,7 +1186,7 @@ export function ProjectTree({
         return (
           <div
             key={key}
-            className={`project-tree__topic project-tree__topic--editing${active ? " project-tree__topic--active" : ""}${imSource ? " project-tree__topic--im-source" : ""}`}
+            className={`project-tree__topic project-tree__topic--editing${active ? " project-tree__topic--active" : ""}${imSource ? " project-tree__topic--im-source" : ""}${meta ? " project-tree__topic--has-meta" : ""}`}
             style={{ paddingLeft: 14 + depth * 16 }}
           >
             <input
@@ -1037,6 +1194,7 @@ export function ProjectTree({
               className="project-tree__topic-input"
               value={topicDraft}
               onChange={(event) => setTopicDraft(event.target.value)}
+              onFocus={(event) => event.target.select()}
               onKeyDown={(event) => {
                 if (event.key === "Enter") void commitRenameTopic(topicId);
                 if (event.key === "Escape") setEditingTopic(null);
@@ -1046,9 +1204,20 @@ export function ProjectTree({
           </div>
         );
       }
+      const shortcutIndex = showShortcutBadges && isVisible && topicIndexRef.current < 9 ? topicIndexRef.current + 1 : 0;
+      if (shortcutIndex > 0) topicIndexRef.current++;
+      // Collect visible topics in render order for shortcut navigation
+      if (openRequest && isVisible) {
+        visibleTopicsCollectorRef.current.push({
+          scope: openRequest.scope,
+          workspaceRoot: openRequest.workspaceRoot,
+          topicId: openRequest.topicId,
+          sessionPath: openRequest.sessionPath,
+        });
+      }
       const row = (
         <div
-          className={`project-tree__topic${scopeClass}${isSessionNode ? " project-tree__topic--session" : ""}${active ? " project-tree__topic--active" : ""}${node.running ? " project-tree__topic--running" : ""}${status ? ` project-tree__topic--status-${status}` : ""}${!isSessionNode && pinned ? " project-tree__topic--pinned" : ""}${topicMenuOpen ? " project-tree__topic--menu-open" : ""}${sideTimeVisible && (timeLabel || showStatusInSide) ? " project-tree__topic--with-side" : meta ? " project-tree__topic--has-meta" : ""}${imSource ? " project-tree__topic--im-source" : ""}`}
+          className={`project-tree__topic${scopeClass}${isSessionNode ? " project-tree__topic--session" : ""}${active ? " project-tree__topic--active" : ""}${node.running ? " project-tree__topic--running" : ""}${status ? ` project-tree__topic--status-${status}` : ""}${unread ? " project-tree__topic--unread" : ""}${!isSessionNode && pinned ? " project-tree__topic--pinned" : ""}${topicMenuOpen ? " project-tree__topic--menu-open" : ""}${sideTimeVisible && (timeLabel || showStatusInSide) ? " project-tree__topic--with-side" : meta ? " project-tree__topic--has-meta" : ""}${imSource ? " project-tree__topic--im-source" : ""}${shortcutIndex > 0 ? " project-tree__topic--show-shortcut" : ""}`}
           style={accentStyle}
           onContextMenu={isSessionNode ? undefined : openTopicMenu}
         >
@@ -1058,13 +1227,35 @@ export function ProjectTree({
             title={title}
             style={{ paddingLeft: 14 + depth * 16 }}
             onClick={() => {
-              if (openRequest) onOpenTopic(openRequest.scope, openRequest.workspaceRoot, openRequest.topicId, openRequest.sessionPath);
+              if (!openRequest) return;
+              const nextClick = { rowKey: key, canRename: !isSessionNode };
+              const pending = clickTimerRef.current;
+              if (pending !== null) {
+                clearTimeout(pending.timer);
+                clickTimerRef.current = null;
+                if (projectTreeShouldSuppressOpenForRename(pending, nextClick)) return;
+              }
+              const timer = setTimeout(() => {
+                if (clickTimerRef.current?.timer === timer) clickTimerRef.current = null;
+                markNodeRead(node);
+                onOpenTopic(openRequest.scope, openRequest.workspaceRoot, openRequest.topicId, openRequest.sessionPath);
+              }, 200);
+              clickTimerRef.current = { ...nextClick, timer };
             }}
             onKeyDown={(event) => {
               if (event.key === "ContextMenu" || (event.shiftKey && event.key === "F10")) {
                 openTopicMenu(event);
               }
             }}
+            onDoubleClick={(event) => {
+              if (isSessionNode) return;
+              event.stopPropagation();
+              if (clickTimerRef.current !== null && clickTimerRef.current.rowKey === key) {
+                clearTimeout(clickTimerRef.current.timer);
+                clickTimerRef.current = null;
+              }
+              startRenameTopic(node, label);
+            }}
           >
             <span className="project-tree__topic-copy">
               <span className="project-tree__topic-heading">
@@ -1104,7 +1295,8 @@ export function ProjectTree({
               </span>
             )}
           </button>
-          {!isSessionNode && compactTopics && (
+          {unread && <span className="project-tree__topic-unread-dot" aria-hidden="true" />}
+          {projectTreeShouldRenderTopicActions(isSessionNode, compactTopics, unread) && (
             <span className="project-tree__topic-actions" aria-label={t("projectTree.topicActions")}>
               <Tooltip label={pinLabel} side="top" className="project-tree__topic-action-slot">
                 <button
@@ -1147,6 +1339,11 @@ export function ProjectTree({
               onClose={closeMenu}
             />
           )}
+          {shortcutIndex > 0 && (
+            <span className="project-tree__topic-shortcut" aria-hidden="true">
+              {topicShortcutLabel(shortcutIndex, shortcutPlatform)}
+            </span>
+          )}
         </div>
       );
       return (
@@ -1155,7 +1352,7 @@ export function ProjectTree({
           {hasChildren && (
             <div className={`project-tree__children${isExpanded ? " project-tree__children--expanded" : ""}`}>
               <div className="project-tree__children-inner">
-                {children.map((child) => renderNode(child, depth + 1, section))}
+                {children.map((child) => renderNode(child, depth + 1, section, isVisible && isExpanded))}
               </div>
             </div>
           )}
@@ -1386,7 +1583,7 @@ export function ProjectTree({
           {hasChildren && (
             <div className={`project-tree__children${isExpanded ? " project-tree__children--expanded" : ""}`}>
               <div className="project-tree__children-inner">
-                {children.map((child) => renderNode(child, depth + 1, section))}
+                {children.map((child) => renderNode(child, depth + 1, section, isVisible && isExpanded))}
               </div>
             </div>
           )}
@@ -1474,7 +1671,7 @@ export function ProjectTree({
         {hasChildren && (
           <div className={`project-tree__children${isExpanded ? " project-tree__children--expanded" : ""}`}>
             <div className="project-tree__children-inner">
-              {children.map((child) => renderNode(child, depth + 1, section))}
+              {children.map((child) => renderNode(child, depth + 1, section, isVisible && isExpanded))}
             </div>
           </div>
         )}
@@ -1826,6 +2023,16 @@ export function ProjectTree({
 
   const hasWorkbenchRows = workbenchTreeSections.pinned.length > 0 || workbenchTreeSections.projects.length > 0;
 
+  // Report visible topics to parent after render so shortcuts match sidebar order.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => {
+    onVisibleTopicsChange?.(visibleTopicsCollectorRef.current);
+  });
+
+  // Reset topic index counter and visible topics collector before each render.
+  topicIndexRef.current = 0;
+  visibleTopicsCollectorRef.current = [];
+
   return (
     <div className="project-tree">
       {searchVisible && (

desktop/frontend/src/components/PromptShelf.tsx

@@ -1,6 +1,8 @@
 import type { ReactNode, RefObject } from "react";
 
 export function PromptShelf({
+  className,
+  cardClassName,
   titleId,
   title,
   badges,
@@ -13,6 +15,8 @@ export function PromptShelf({
   barRef,
   role = "dialog",
 }: {
+  className?: string;
+  cardClassName?: string;
   titleId: string;
   title: ReactNode;
   badges?: ReactNode;
@@ -26,10 +30,10 @@ export function PromptShelf({
   role?: "dialog" | "region";
 }) {
   return (
-    <div className="prompt-shelf" aria-live="polite">
+    <div className={["prompt-shelf", className ?? ""].filter(Boolean).join(" ")} aria-live="polite">
       <div
         ref={barRef}
-        className="prompt-shelf__card"
+        className={["prompt-shelf__card", cardClassName ?? ""].filter(Boolean).join(" ")}
         role={role}
         aria-modal={role === "dialog" ? "false" : undefined}
         aria-labelledby={titleId}

desktop/frontend/src/components/ResizableDrawer.tsx

@@ -1,7 +1,8 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { CSSProperties, KeyboardEvent, PointerEvent as ReactPointerEvent, ReactNode } from "react";
 import { useT } from "../lib/i18n";
 import { loadLayoutSize, saveLayoutSize, type LayoutSizeKey } from "../lib/layoutPreferences";
+import { createRafResizeUpdater } from "../lib/resizeDrag";
 import { useDeferredClose } from "../lib/useMountTransition";
 
 const DRAWER_DEFAULT_WIDTH = 440;
@@ -51,6 +52,7 @@ export function ResizableDrawer({
 }) {
   const t = useT();
   const config = drawerConfig(wide);
+  const drawerRef = useRef<HTMLElement>(null);
   const [viewportWidth, setViewportWidth] = useState(() => (typeof window === "undefined" ? 1440 : window.innerWidth));
   const [width, setWidth] = useState(() =>
     loadLayoutSize(config.key, config.defaultWidth, (value) => clampDrawerWidth(value, wide)),
@@ -79,14 +81,22 @@ export function ResizableDrawer({
   const startResize = useCallback(
     (event: ReactPointerEvent<HTMLButtonElement>) => {
       if (event.button !== 0) return;
+      const drawer = drawerRef.current;
+      if (!drawer) return;
       event.preventDefault();
       setResizing(true);
       let nextWidth = effectiveWidth;
+      const liveResize = createRafResizeUpdater({
+        target: drawer,
+        separator: event.currentTarget,
+        cssVar: "--drawer-width",
+      });
       const onMove = (moveEvent: PointerEvent) => {
         nextWidth = clampDrawerWidth(window.innerWidth - moveEvent.clientX, wide, window.innerWidth);
-        setWidth(nextWidth);
+        liveResize.schedule(nextWidth);
       };
       const onDone = () => {
+        liveResize.flush();
         setWidth(nextWidth);
         saveLayoutSize(config.key, nextWidth);
         setResizing(false);
@@ -124,6 +134,7 @@ export function ResizableDrawer({
   return (
     <div className={`drawer-backdrop${subtle ? " drawer-backdrop--subtle" : ""}`} data-state={status} onClick={requestClose}>
       <aside
+        ref={drawerRef}
         className={`drawer${wide ? " drawer--wide" : ""}${resizing ? " drawer--resizing" : ""}`}
         data-state={status}
         onClick={(e) => e.stopPropagation()}

desktop/frontend/src/components/StatusBar.tsx

@@ -1,59 +1,13 @@
-import { useEffect, useRef, useState, type ReactNode } from "react";
+import { type ReactNode } from "react";
 import { Activity, CircleDollarSign, CircleGauge, Database, Folder, GitBranch, Layers, Percent, RefreshCw, Wallet, Zap } from "lucide-react";
 import { Tooltip } from "./Tooltip";
 import { useI18n, type Translator } from "../lib/i18n";
 import { formatMoneyLocalized } from "../lib/money";
 import { normalizeStatusBarItems, type StatusBarItemId } from "../lib/statusBarItems";
-import { type BalanceInfo, type CollaborationMode, type ContextInfo, type JobView, type ToolApprovalMode, type WireUsage } from "../lib/types";
+import { type BalanceInfo, type ContextInfo, type UsageSourceStats, type WireUsage } from "../lib/types";
 
 type StatusBarLabelStyle = "icon" | "text";
 
-// JobsChip is the status-bar background-jobs indicator: a count that opens an
-// upward popover listing the running jobs (id · label · status), mirroring the
-// ModelSwitcher's click-to-open pattern. With no jobs it stays hidden so the
-// high-priority status metrics keep the compact left-to-right scan.
-function JobsChip({ jobs }: { jobs: JobView[] }) {
-  const { t } = useI18n();
-  const [open, setOpen] = useState(false);
-  const wrapRef = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    if (!open) return;
-    const closeOnOutsideClick = (event: MouseEvent) => {
-      const target = event.target;
-      if (!(target instanceof Node)) return;
-      if (wrapRef.current?.contains(target)) return;
-      setOpen(false);
-    };
-    document.addEventListener("click", closeOnOutsideClick);
-    return () => document.removeEventListener("click", closeOnOutsideClick);
-  }, [open]);
-  if (jobs.length === 0) {
-    return null;
-  }
-  return (
-    <div className="statusbar__jobswrap" ref={wrapRef}>
-      <Tooltip label={t("status.jobsTitle")}>
-        <button className="stat stat--jobs statusbar__jobs" onClick={() => setOpen((v) => !v)}>
-          <span className="stat__label">{t("status.jobsLabel")}</span>
-          <b>{jobs.length}</b>
-        </button>
-      </Tooltip>
-      {open && (
-        <div className="modelsw__menu jobsmenu" role="listbox">
-          <div className="jobsmenu__head">{t("status.jobsTitle")}</div>
-          {jobs.map((j) => (
-            <div className="jobsmenu__item" key={j.id} role="option">
-              <span className="jobsmenu__id">{j.id}</span>
-              <span className="jobsmenu__label">{j.label || j.kind}</span>
-              <span className="jobsmenu__status">{j.status}</span>
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
 function formatRate(hit: number, denom: number): string | null {
   if (denom <= 0) return null;
   return ((hit / denom) * 100).toFixed(2);
@@ -63,8 +17,7 @@ function formatRate(hit: number, denom: number): string | null {
 // steeper number on a non-compacting DeepSeek session. null when nothing yet.
 function nowRate(u?: WireUsage): string | null {
   if (!u) return null;
-  let denom = u.cacheHitTokens + u.cacheMissTokens;
-  if (denom === 0) denom = u.promptTokens;
+  const denom = u.cacheHitTokens + u.cacheMissTokens;
   return formatRate(u.cacheHitTokens, denom);
 }
 
@@ -78,6 +31,15 @@ function avgRate(u?: WireUsage): string | null {
   return formatRate(u.sessionCacheHitTokens, denom);
 }
 
+// contextAvgRate computes the session-aggregate cache-hit % from ContextInfo
+// cache tokens (loaded from persisted telemetry on session resume). Used as a
+// fallback when no live WireUsage is available yet.
+function contextAvgRate(ctx: ContextInfo): string | null {
+  const hit = ctx.cacheHitTokens ?? 0;
+  const miss = ctx.cacheMissTokens ?? 0;
+  return formatRate(hit, hit + miss);
+}
+
 function rateValueClass(rate: string | null): string {
   if (rate === null) return "stat__value--empty";
   const pct = Number.parseFloat(rate);
@@ -97,6 +59,59 @@ function formatTurnCount(turns: number | undefined, t: Translator): string {
   return t(turns === 1 ? "history.turnOne" : "history.turnOther", { n: turns });
 }
 
+const STATUS_SOURCE_ORDER = ["executor", "planner", "subagent", "compaction", "classifier", "title"];
+
+function sourceLabel(source: string, t: Translator): string {
+  switch (source) {
+    case "executor": return t("context.sourceExecutor");
+    case "planner": return t("context.sourcePlanner");
+    case "subagent": return t("context.sourceSubagent");
+    case "compaction": return t("context.sourceCompaction");
+    case "classifier": return t("context.sourceClassifier");
+    case "title": return t("context.sourceTitle");
+    default: return source;
+  }
+}
+
+function sourceRows(sources?: Record<string, UsageSourceStats>): Array<{ source: string; stats: UsageSourceStats }> {
+  return Object.entries(sources ?? {})
+    .filter(([, stats]) =>
+      (stats.requestCount ?? 0) > 0 ||
+      (stats.promptTokens ?? 0) > 0 ||
+      (stats.completionTokens ?? 0) > 0 ||
+      (stats.cacheHitTokens ?? 0) > 0 ||
+      (stats.cacheMissTokens ?? 0) > 0
+    )
+    .sort(([a], [b]) => {
+      const ia = STATUS_SOURCE_ORDER.indexOf(a);
+      const ib = STATUS_SOURCE_ORDER.indexOf(b);
+      if (ia >= 0 || ib >= 0) return (ia >= 0 ? ia : STATUS_SOURCE_ORDER.length) - (ib >= 0 ? ib : STATUS_SOURCE_ORDER.length);
+      return a.localeCompare(b);
+    })
+    .map(([source, stats]) => ({ source, stats }));
+}
+
+function sourceCacheTooltip(t: Translator, title: string, context: ContextInfo): ReactNode {
+  const rows = sourceRows(context.sources);
+  if (rows.length === 0) return title;
+  return (
+    <span className="statusbar__tooltip-stack">
+      <span>{title}</span>
+      {rows.map(({ source, stats }) => {
+        const denom = stats.cacheHitTokens + stats.cacheMissTokens;
+        const rate = denom > 0 ? `${formatRate(stats.cacheHitTokens, denom)}%` : t("context.cacheNotReported");
+        return (
+          <span key={source}>
+            {sourceLabel(source, t)}: {rate} · {t("context.sourceInput")} {formatTokenCount(stats.promptTokens)}
+            {" · "}{t("context.sourceOutput")} {formatTokenCount(stats.completionTokens)}
+            {" · "}{t("context.sourceRequests", { count: stats.requestCount ?? 0 })}
+          </span>
+        );
+      })}
+    </span>
+  );
+}
+
 function MetricLabel({ style, icon, label }: { style: StatusBarLabelStyle; icon: ReactNode; label: string }) {
   return (
     <span className={`stat__label stat__label--${style}`} aria-hidden={style === "icon" ? "true" : undefined}>
@@ -134,10 +149,7 @@ export function StatusBar({
   context,
   usage,
   balance,
-  jobs,
   running,
-  collaborationMode,
-  toolApprovalMode,
   sessionTurns,
   sessionTokens,
   turnTokens,
@@ -154,10 +166,7 @@ export function StatusBar({
   context: ContextInfo;
   usage?: WireUsage;
   balance?: BalanceInfo;
-  jobs?: JobView[];
   running: boolean;
-  collaborationMode: CollaborationMode;
-  toolApprovalMode: ToolApprovalMode;
   sessionTurns?: number;
   sessionTokens?: number;
   turnTokens?: number;
@@ -177,8 +186,7 @@ export function StatusBar({
   const compactNear = pct !== null && compactPct !== null && pct >= Math.max(0, compactPct - 10);
   const compactReached = pct !== null && compactPct !== null && pct >= compactPct;
   const nowPct = nowRate(usage);
-  const avgPct = avgRate(usage);
-  const jobsList = jobs ?? [];
+  const avgPct = avgRate(usage) ?? contextAvgRate(context);
   const turnCostLabel = formatMoneyLocalized(turnCost, currency, { locale });
   const costLabel = formatMoneyLocalized(cost, currency, { locale });
   const displayWorkspacePath = (workspacePath || workspaceName || "").trim();
@@ -189,10 +197,10 @@ export function StatusBar({
   const tokenLabel = formatTokenCount(sessionTokens);
   const turnTokenLabel = formatTokenCount(turnTokens);
   const balanceLabel = balance?.available && balance.display ? balance.display : "-";
-  const planMode = collaborationMode === "plan";
-  const goalMode = collaborationMode === "goal";
   const metricLabelStyle = labelStyle === "text" ? "text" : "icon";
   const visibleItems = normalizeStatusBarItems(items);
+  const cacheTooltip = sourceCacheTooltip(t, t("status.cacheTitle"), context);
+  const avgCacheTooltip = sourceCacheTooltip(t, t("status.cacheAvgTitle"), context);
   const itemRenderers: Record<StatusBarItemId, ReactNode> = {
     model: (
       <Tooltip label={t("status.modelTitle")}>
@@ -219,7 +227,7 @@ export function StatusBar({
       </Tooltip>
     ) : null,
     cache: (
-      <Tooltip label={t("status.cacheTitle")} className="statusbar__metric statusbar__metric--cache">
+      <Tooltip label={cacheTooltip} className="statusbar__metric statusbar__metric--cache">
         <span className="stat statusbar__cache">
           <MetricLabel style={metricLabelStyle} icon={<Percent size={12} />} label={t("status.cacheLabel")} />
           <b className={rateValueClass(nowPct) || undefined}>{nowPct !== null ? `${nowPct}%` : "-"}</b>
@@ -227,7 +235,7 @@ export function StatusBar({
       </Tooltip>
     ),
     cache_avg: (
-      <Tooltip label={t("status.cacheAvgTitle")} className="statusbar__metric statusbar__metric--avg">
+      <Tooltip label={avgCacheTooltip} className="statusbar__metric statusbar__metric--avg">
         <span className="stat statusbar__avg">
           <MetricLabel style={metricLabelStyle} icon={<Activity size={12} />} label={t("status.cacheAvgLabel")} />
           <b className={rateValueClass(avgPct) || undefined}>{avgPct !== null ? `${avgPct}%` : "-"}</b>
@@ -309,21 +317,6 @@ export function StatusBar({
   const renderedItems = visibleItems
     .map((id) => ({ id, node: itemRenderers[id] }))
     .filter(({ node }) => node !== null && node !== undefined && node !== false);
-  const modeIndicators = [
-    planMode ? <span className="statusbar__plan" key="plan">{t("status.plan")}</span> : null,
-    goalMode ? <span className="statusbar__plan" key="goal">{t("composer.goalMode")}</span> : null,
-    toolApprovalMode === "auto" ? (
-      <Tooltip label={t("composer.accessAutoTitle")} key="auto">
-        <span className="statusbar__yolo">{t("composer.accessAuto")}</span>
-      </Tooltip>
-    ) : null,
-    toolApprovalMode === "yolo" ? (
-      <Tooltip label={t("status.yoloTitle")} key="yolo">
-        <span className="statusbar__yolo">{t("composer.accessYolo")}</span>
-      </Tooltip>
-    ) : null,
-  ].filter(Boolean);
-
   return (
     <div className={`statusbar statusbar--${metricLabelStyle}`}>
       <div className="statusbar__group statusbar__group--items">
@@ -333,12 +326,6 @@ export function StatusBar({
           </span>
         ))}
       </div>
-      {modeIndicators.length > 0 && <div className="statusbar__group statusbar__group--modes">{modeIndicators}</div>}
-      {jobsList.length > 0 && (
-        <div className="statusbar__group statusbar__group--jobs">
-          <JobsChip jobs={jobsList} />
-        </div>
-      )}
     </div>
   );
 }

desktop/frontend/src/components/TodoPanel.tsx

@@ -1,33 +1,75 @@
 import { useEffect, useRef, useState } from "react";
 import { useT } from "../lib/i18n";
 import type { Todo } from "../lib/tools";
+import { shouldOpenTodoPanelByDefault } from "../lib/todoVisibility";
 import { PromptBadge, PromptHeaderAction, PromptShelf } from "./PromptShelf";
 
+const STORAGE_KEY = "todoPanel:openStates";
+const MAX_STORED_OPEN_STATES = 80;
+
+function loadOpenStates(): Record<string, boolean> {
+  try {
+    const saved = localStorage.getItem(STORAGE_KEY);
+    if (!saved) return {};
+    const parsed = JSON.parse(saved) as unknown;
+    if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) return {};
+    const states: Record<string, boolean> = {};
+    for (const [key, value] of Object.entries(parsed)) {
+      if (typeof value === "boolean") states[key] = value;
+    }
+    return states;
+  } catch {
+    return {};
+  }
+}
+
+function loadOpenState(stateKey: string, defaultOpen: boolean): boolean {
+  const states = loadOpenStates();
+  return Object.prototype.hasOwnProperty.call(states, stateKey) ? states[stateKey] : defaultOpen;
+}
+
+function saveOpenState(stateKey: string, open: boolean): void {
+  try {
+    const entries = Object.entries(loadOpenStates()).filter(([key]) => key !== stateKey);
+    entries.push([stateKey, open]);
+    const trimmed = entries.slice(-MAX_STORED_OPEN_STATES);
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(Object.fromEntries(trimmed)));
+  } catch {
+    /* ignore quota errors */
+  }
+}
+
 // TodoPanel is the live task list pinned just above the composer — the kernel's
 // latest todo_write call drives it, and it updates in place as the agent flips
-// items to in_progress / completed. Completed lists collapse automatically so
-// the user still sees the final state without the footer staying tall forever.
+// items to in_progress / completed. Open state follows the current todo batch:
+// new incomplete work opens by default, finished work collapses to a reviewable
+// summary, and manual expand/collapse is restored only for the same batch.
 export function TodoPanel({
-  todoKey,
+  stateKey,
   todos,
   onDismiss,
 }: {
-  todoKey: string;
+  stateKey: string;
   todos: Todo[];
   onDismiss: () => void;
 }) {
   const t = useT();
-  const [open, setOpen] = useState(true);
   const currentRef = useRef<HTMLLIElement | null>(null);
 
   const done = todos.filter((t) => t.status === "completed").length;
   const current = todos.find((t) => t.status === "in_progress");
   const allDone = todos.length > 0 && done === todos.length;
   const summary = current?.activeForm || current?.content || todos[todos.length - 1]?.content || "";
+  const [open, setOpen] = useState(() => loadOpenState(stateKey, shouldOpenTodoPanelByDefault(todos)));
+  const wasAllDoneRef = useRef(allDone);
 
   useEffect(() => {
-    setOpen(!allDone);
-  }, [todoKey, allDone]);
+    if (allDone && !wasAllDoneRef.current) {
+      saveOpenState(stateKey, false);
+      setOpen(false);
+    }
+    wasAllDoneRef.current = allDone;
+  }, [allDone, stateKey]);
 
   useEffect(() => {
     if (!open) return;
@@ -45,7 +87,13 @@ export function TodoPanel({
       role="region"
       headerActions={
         <>
-          <PromptHeaderAction onClick={() => setOpen((value) => !value)}>
+          <PromptHeaderAction
+            onClick={() => setOpen((value) => {
+              const next = !value;
+              saveOpenState(stateKey, next);
+              return next;
+            })}
+          >
             {open ? t("common.collapse") : t("common.expand")}
           </PromptHeaderAction>
           {allDone && (

desktop/frontend/src/components/ToolCard.tsx

@@ -41,7 +41,7 @@ function splitPreview(text: string, n: number): { preview: string; total: number
 // ToolCard renders one tool call. `subcalls` are sub-agent calls nested under a
 // `task` card (their ParentID points at this call); they render inline, live, so
 // the sub-agent's work is visible as it happens.
-export const ToolCard = memo(function ToolCard({ item, subcalls, tabId }: { item: ToolItem; subcalls?: ToolItem[]; tabId?: string }) {
+export const ToolCard = memo(function ToolCard({ item, subcalls, tabId, displayName }: { item: ToolItem; subcalls?: ToolItem[]; tabId?: string; displayName?: string }) {
   const t = useT();
   const nested = subcalls ?? [];
   const hasNested = nested.length > 0;
@@ -131,7 +131,7 @@ export const ToolCard = memo(function ToolCard({ item, subcalls, tabId }: { item
           {item.status === "error" && <span className="tool__status-icon tool__status-icon--err">✗</span>}
           {item.status === "done" && <span className="tool__status-icon tool__status-icon--ok">✓</span>}
           {item.status === "stopped" && <span className="tool__status-icon tool__status-icon--stopped">—</span>}
-          <span className="tool__name">{item.name}</span>
+          <span className="tool__name">{displayName ?? item.name}</span>
           {subject && <span className="tool__subject">{subject}</span>}
         </span>
         {profileText && <span className="tool__profile">{profileText}</span>}
@@ -142,6 +142,12 @@ export const ToolCard = memo(function ToolCard({ item, subcalls, tabId }: { item
             <ChevronRight size={12} />
           </span>
         )}
+        {item.status !== "running" && (
+          <span
+            className={`tool__dot${item.status === "done" ? " tool__dot--ok" : ""}${item.status === "error" ? " tool__dot--err" : ""}${item.status === "stopped" ? " tool__dot--stopped" : ""}`}
+            aria-hidden="true"
+          />
+        )}
       </button>
 
       <div ref={toolBodyRef} className="tool__body">

desktop/frontend/src/components/ToolGroup.tsx

@@ -0,0 +1,141 @@
+import { memo, useRef, useState } from "react";
+import { ChevronRight } from "lucide-react";
+import { useT } from "../lib/i18n";
+import { useGSAPCollapse } from "../lib/useGSAPCollapse";
+import type { Item } from "../lib/useController";
+import { ToolCard } from "./ToolCard";
+
+type ToolItem = Extract<Item, { kind: "tool" }>;
+
+export type ToolGroupKind = "explore" | "modify" | "delegate" | "shell";
+
+const SHELL_TOOLS = new Set(["bash", "bash_output", "wait", "waitJob", "kill_shell"]);
+const EXPLORE_TOOLS = new Set(["read_file", "ls", "grep", "glob", "web_fetch", "code_index", "read_skill", "connect_tool_source"]);
+const MODIFY_TOOLS = new Set(["write_file", "edit_file", "multi_edit", "move_file", "delete_range", "delete_symbol", "notebook_edit"]);
+const DELEGATE_TOOLS = new Set(["task", "run_skill", "explore", "research", "review", "security_review"]);
+
+export function toolGroupKind(item: ToolItem): ToolGroupKind | null {
+  if (item.parentId || item.name === "todo_write" || item.name === "exit_plan_mode") return null;
+  if (SHELL_TOOLS.has(item.name)) return "shell";
+  if (EXPLORE_TOOLS.has(item.name)) return "explore";
+  if (MODIFY_TOOLS.has(item.name)) return "modify";
+  if (DELEGATE_TOOLS.has(item.name)) return "delegate";
+  return item.readOnly ? "explore" : "modify";
+}
+
+export function isCreationGroupableTool(item: ToolItem): boolean {
+  return item.status !== "running" && toolGroupKind(item) !== null;
+}
+
+function count(items: ToolItem[], names: readonly string[]): number {
+  return items.filter((item) => names.includes(item.name)).length;
+}
+
+function titleFor(kind: ToolGroupKind, t: ReturnType<typeof useT>): string {
+  switch (kind) {
+    case "explore": return t("creation.toolGroup.explore");
+    case "modify": return t("creation.toolGroup.modify");
+    case "delegate": return t("creation.toolGroup.delegate");
+    case "shell": return t("creation.toolGroup.shell");
+  }
+}
+
+function groupSummary(kind: ToolGroupKind, items: ToolItem[], t: ReturnType<typeof useT>): string {
+  const parts: string[] = [];
+  if (kind === "explore") {
+    const readCount = count(items, ["read_file", "ls", "web_fetch", "read_skill"]);
+    const searchCount = count(items, ["grep", "glob", "code_index"]);
+    const otherCount = items.length - readCount - searchCount;
+    if (readCount > 0) parts.push(t("creation.toolStat.read", { n: readCount }));
+    if (searchCount > 0) parts.push(t("creation.toolStat.search", { n: searchCount }));
+    if (otherCount > 0) parts.push(t("creation.toolStat.other", { n: otherCount }));
+  } else if (kind === "modify") {
+    const writeCount = count(items, ["write_file"]);
+    const editCount = count(items, ["edit_file", "multi_edit", "notebook_edit"]);
+    const moveCount = count(items, ["move_file"]);
+    const deleteCount = count(items, ["delete_range", "delete_symbol"]);
+    const otherCount = items.length - writeCount - editCount - moveCount - deleteCount;
+    if (writeCount > 0) parts.push(t("creation.toolStat.write", { n: writeCount }));
+    if (editCount > 0) parts.push(t("creation.toolStat.edit", { n: editCount }));
+    if (moveCount > 0) parts.push(t("creation.toolStat.move", { n: moveCount }));
+    if (deleteCount > 0) parts.push(t("creation.toolStat.delete", { n: deleteCount }));
+    if (otherCount > 0) parts.push(t("creation.toolStat.other", { n: otherCount }));
+  } else if (kind === "delegate") {
+    const taskCount = count(items, ["task", "run_skill", "explore", "research", "review", "security_review"]);
+    const otherCount = items.length - taskCount;
+    if (taskCount > 0) parts.push(t("creation.toolStat.task", { n: taskCount }));
+    if (otherCount > 0) parts.push(t("creation.toolStat.other", { n: otherCount }));
+  } else {
+    const commandCount = count(items, ["bash"]);
+    const checkCount = count(items, ["bash_output", "wait", "waitJob"]);
+    const stopCount = count(items, ["kill_shell"]);
+    const otherCount = items.length - commandCount - checkCount - stopCount;
+    if (commandCount > 0) parts.push(t("creation.toolStat.command", { n: commandCount }));
+    if (checkCount > 0) parts.push(t("creation.toolStat.check", { n: checkCount }));
+    if (stopCount > 0) parts.push(t("creation.toolStat.stop", { n: stopCount }));
+    if (otherCount > 0) parts.push(t("creation.toolStat.other", { n: otherCount }));
+  }
+  return parts.join(", ");
+}
+
+function titleCaseName(name: string): string {
+  return name
+    .replace(/[-_]+/g, " ")
+    .split(" ")
+    .filter(Boolean)
+    .map((part) => part.slice(0, 1).toUpperCase() + part.slice(1))
+    .join(" ");
+}
+
+function toolDisplayName(name: string): string {
+  switch (name) {
+    case "read_file": return "Read";
+    case "ls": return "List";
+    case "web_fetch": return "Web Fetch";
+    case "code_index": return "Code Index";
+    case "write_file": return "Write";
+    case "edit_file": return "Edit";
+    case "multi_edit": return "Multi Edit";
+    case "move_file": return "Move";
+    case "bash": return "Shell";
+    case "bash_output": return "Shell Output";
+    case "kill_shell": return "Kill Shell";
+    case "wait":
+    case "waitJob": return "Wait";
+    default: return titleCaseName(name);
+  }
+}
+
+export const ToolGroup = memo(function ToolGroup({
+  kind,
+  items,
+  subcalls,
+  tabId,
+}: {
+  kind: ToolGroupKind;
+  items: ToolItem[];
+  subcalls: ReadonlyMap<string, ToolItem[]>;
+  tabId?: string;
+}) {
+  const t = useT();
+  const [open, setOpen] = useState(false);
+  const bodyRef = useRef<HTMLDivElement>(null);
+  useGSAPCollapse(bodyRef, open);
+
+  if (items.length === 0) return null;
+
+  return (
+    <div className={`tool-group tool-group--${kind}${open ? " tool-group--open" : ""}`} data-kind={kind} data-entrance={items[0]?.id}>
+      <button type="button" className="tool-group__head" onClick={() => setOpen((value) => !value)} aria-expanded={open}>
+        <span className="tool-group__title">{titleFor(kind, t)}</span>
+        <span className="tool-group__summary">{groupSummary(kind, items, t)}</span>
+        <ChevronRight className={`tool-group__chevron${open ? " tool-group__chevron--open" : ""}`} size={12} />
+      </button>
+      <div ref={bodyRef} className="tool-group__body">
+        {items.map((item) => (
+          <ToolCard key={item.id} item={item} subcalls={subcalls.get(item.id)} tabId={tabId} displayName={toolDisplayName(item.name)} />
+        ))}
+      </div>
+    </div>
+  );
+});

desktop/frontend/src/components/Transcript.tsx

@@ -5,15 +5,16 @@ import { useT } from "../lib/i18n";
 import { AssistantMessage, TurnActions, UserMessage } from "./Message";
 import { ProcessCompactIcon, ProcessPhaseIcon } from "./ProcessCard";
 import { ToolCard } from "./ToolCard";
-import { ChevronRight } from "lucide-react";
+import { ArrowDown, ChevronRight } from "lucide-react";
 import { Welcome } from "./Welcome";
 import { ReadOnlyBatch } from "./ReadOnlyBatch";
+import { ToolGroup, isCreationGroupableTool, toolGroupKind, type ToolGroupKind } from "./ToolGroup";
 import { getDisplayMode, onDisplayModeChange, type DisplayMode } from "../lib/displayMode";
 import { isReadOnlyTool } from "../lib/useController";
 import { useGSAPCollapse } from "../lib/useGSAPCollapse";
 import { useEntranceAnimation } from "../lib/useEntranceAnimation";
 import { useScrollManager } from "../lib/useScrollManager";
-import { buildTurnGroups, compactQuestionText, questionAnchorId, scrollVersion, warmUserPreview, type QuestionAnchor, type TurnGroup } from "../lib/transcriptGrouping";
+import { buildStepGroups, buildTurnGroups, compactQuestionText, createWarmLayerState, questionAnchorId, questionTurnsById, scrollVersion, warmColdPageForTurn, warmLayerWithColdPageAtLeast, warmLayerWithExpandedTurn, warmLayerWithNextColdPage, warmPagination, warmUserPreview, type QuestionAnchor, type TurnGroup, type WarmLayerState } from "../lib/transcriptGrouping";
 
 type ToolItem = Extract<Item, { kind: "tool" }>;
 type AssistantItem = Extract<Item, { kind: "assistant" }>;
@@ -27,11 +28,13 @@ const LiveAssistantMessage = memo(function LiveAssistantMessage({
   defaultExpanded = false,
   expandWhileStreaming = true,
   truncateStreamingReasoning = false,
+  creationMode = false,
 }: {
   item: AssistantItem;
   defaultExpanded?: boolean;
   expandWhileStreaming?: boolean;
   truncateStreamingReasoning?: boolean;
+  creationMode?: boolean;
 }) {
   const live = useContext(LiveStreamContext);
   const shown = useMemo(
@@ -47,6 +50,7 @@ const LiveAssistantMessage = memo(function LiveAssistantMessage({
       defaultExpanded={defaultExpanded}
       expandWhileStreaming={expandWhileStreaming}
       truncateStreamingReasoning={truncateStreamingReasoning}
+      creationMode={creationMode}
     />
   );
 });
@@ -86,8 +90,15 @@ export function Transcript({
   running = false,
   questionNavigator = true,
   welcomeVariant = "default",
+  creationMode = false,
   actionHoverMenus = false,
   rewindSignal = 0,
+  revealSignal = 0,
+  hydrating = false,
+  hasOlderHistory = false,
+  olderHistoryCount = 0,
+  loadingOlderHistory = false,
+  onLoadOlderHistory,
 }: {
   items: Item[];
   live?: LiveStream;
@@ -102,22 +113,35 @@ export function Transcript({
   running?: boolean;
   questionNavigator?: boolean;
   welcomeVariant?: "default" | "creation";
+  creationMode?: boolean;
   actionHoverMenus?: boolean;
   rewindSignal?: number;
+  revealSignal?: number;
+  hydrating?: boolean;
+  hasOlderHistory?: boolean;
+  olderHistoryCount?: number;
+  loadingOlderHistory?: boolean;
+  onLoadOlderHistory?: () => void;
 }) {
+  const t = useT();
   const {
     scrollRef,
     stick,
     onScroll,
+    isAtBottom,
     smoothScrollTo,
+    scrollToBottomAfterLayout,
     trackQuestions,
-    repinIfWasPinned,
+    scheduleRepinIfWasPinned,
     resizeFrame,
     lastClientHeight,
     lastFooterHeight,
   } = useScrollManager();
   const autoScrollFrame = useRef<number | null>(null);
+  const pendingRevealBottomScroll = useRef(false);
+  const pendingQuestionJump = useRef<QuestionAnchor | null>(null);
   const sessionKey = useMemo(() => `${items[0]?.id ?? ""}|${items[items.length - 1]?.id ?? ""}`, [items]);
+  const warmLayerSessionKey = useMemo(() => `${tabId ?? ""}|${revealSignal}|${items[0]?.id ?? ""}`, [items, revealSignal, tabId]);
   const entranceRef = useEntranceAnimation<HTMLDivElement>(sessionKey, items.length);
 
   const [displayMode, setDisplayMode] = useState<DisplayMode>(() => getDisplayMode());
@@ -128,7 +152,7 @@ export function Transcript({
     let turn = 0;
     for (const it of items) {
       if (it.kind !== "user") continue;
-      anchors.push({ id: it.id, text: compactQuestionText(it.text), turn });
+      anchors.push({ id: it.id, text: compactQuestionText(it.text), turn, checkpointTurn: it.checkpointTurn });
       turn += 1;
     }
     return anchors;
@@ -144,7 +168,17 @@ export function Transcript({
   // disables auto-scroll when the user had scrolled up in the old tab (#4584).
   useEffect(() => {
     stick.current = true;
-  }, [tabId]);
+    pendingRevealBottomScroll.current = true;
+  }, [tabId, revealSignal]);
+
+  useEffect(() => {
+    if (!pendingRevealBottomScroll.current || items.length === 0) return;
+    pendingRevealBottomScroll.current = false;
+    const frame = requestAnimationFrame(() => {
+      scrollToBottomAfterLayout(5);
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [items.length, revealSignal, scrollToBottomAfterLayout, tabId]);
 
   // Auto-scroll to bottom during streaming. Coalesce fast token/reasoning
   // updates into one layout read/write per animation frame.
@@ -174,11 +208,12 @@ export function Transcript({
     const el = scrollRef.current;
     if (!el || typeof ResizeObserver === "undefined") return;
     lastClientHeight.current = el.clientHeight;
-    const observer = new ResizeObserver(() => {
-      const previous = lastClientHeight.current ?? el.clientHeight;
-      lastClientHeight.current = el.clientHeight;
+    const observer = new ResizeObserver((entries) => {
+      const height = entries[0]?.contentRect.height ?? el.clientHeight;
+      const previous = lastClientHeight.current ?? height;
+      lastClientHeight.current = height;
       if (items.length === 0) return;
-      repinIfWasPinned(el.clientHeight - previous);
+      scheduleRepinIfWasPinned(height - previous);
     });
     observer.observe(el);
     return () => {
@@ -188,7 +223,7 @@ export function Transcript({
         resizeFrame.current = null;
       }
     };
-  }, [items.length]);
+  }, [items.length, scheduleRepinIfWasPinned]);
 
   // Footer height changes → smooth scroll repin with GSAP.
   useEffect(() => {
@@ -197,8 +232,8 @@ export function Transcript({
     const previous = lastFooterHeight.current ?? footerHeight;
     lastFooterHeight.current = footerHeight;
     if (items.length === 0) return;
-    repinIfWasPinned(previous - footerHeight);
-  }, [footerHeight, items.length]);
+    scheduleRepinIfWasPinned(previous - footerHeight);
+  }, [footerHeight, items.length, scheduleRepinIfWasPinned]);
 
   // After a non-fork rewind, scroll to the last user message (the
   // rewound-to point) so the user knows where they are.
@@ -227,8 +262,12 @@ export function Transcript({
   }, [items]);
 
   // ── Layer state ────────────────────────────────────────────────────────────
-  const [expandedWarmTurns, setExpandedWarmTurns] = useState<Set<number>>(new Set());
-  const [coldPage, setColdPage] = useState(0);
+  const [warmLayerState, setWarmLayerState] = useState<WarmLayerState>(() => createWarmLayerState(warmLayerSessionKey));
+  const defaultWarmLayerState = useMemo<WarmLayerState>(() => createWarmLayerState(warmLayerSessionKey), [warmLayerSessionKey]);
+  const activeWarmLayerState = warmLayerState.sessionKey === warmLayerSessionKey
+    ? warmLayerState
+    : defaultWarmLayerState;
+  const { expandedWarmTurns, coldPage } = activeWarmLayerState;
 
   // Compute turn groups from the structural item list. Streaming text updates
   // keep the same items[] reference, so this stays out of the token hot path.
@@ -247,9 +286,20 @@ export function Transcript({
   }, [items]);
 
   // How many turns are in the cold zone (not yet shown).
-  const warmTurnCount = turnGroups.length - Math.min(turnGroups.length, HOT_TURNS);
-  const shownWarmStart = Math.max(0, warmTurnCount - coldPage * WARM_PAGE_SIZE);
-  const coldTurnCount = shownWarmStart;
+  const { warmStartTurn, warmEndTurn, coldTurnCount } = useMemo(
+    () => warmPagination({ turnCount: turnGroups.length, hotTurns: HOT_TURNS, pageSize: WARM_PAGE_SIZE, coldPage }),
+    [coldPage, turnGroups.length],
+  );
+
+  useLayoutEffect(() => {
+    const question = pendingQuestionJump.current;
+    if (!question) return;
+    const node = document.getElementById(questionAnchorId(question.id));
+    if (!node) return;
+    pendingQuestionJump.current = null;
+    stick.current = false;
+    smoothScrollTo(node, 12);
+  }, [expandedWarmTurns, smoothScrollTo, stick, warmStartTurn]);
 
   // ── The turn action menu ──────────────────────────────────────────────────
   const [openAction, setOpenAction] = useState<OpenTurnAction | null>(null);
@@ -263,28 +313,36 @@ export function Transcript({
     return () => document.removeEventListener("mousedown", onDown);
   }, [openAction]);
 
-  const userTurn = useMemo(() => new Map(questions.map((question) => [question.id, question.turn])), [questions]);
+  const userTurn = useMemo(() => questionTurnsById(questions), [questions]);
   const checkpointsByTurn = useMemo(() => new Map(checkpoints.map((checkpoint) => [checkpoint.turn, checkpoint])), [checkpoints]);
 
   // ── JumpBar integration ───────────────────────────────────────────────────
   const jumpToQuestion = (question: QuestionAnchor) => {
     const node = document.getElementById(questionAnchorId(question.id));
     if (!node) return;
+    pendingQuestionJump.current = null;
     stick.current = false;
     smoothScrollTo(node, 12);
   };
 
   const handleJumpToQuestion = useCallback((question: QuestionAnchor) => {
+    pendingQuestionJump.current = question;
     // Auto-expand the warm turn when jumping to an old question.
     const warmTurnStart = turnGroups.length - HOT_TURNS;
     if (question.turn < warmTurnStart) {
-      setExpandedWarmTurns((prev) => {
-        if (prev.has(question.turn)) return prev;
-        return new Set([...prev, question.turn]);
+      const neededColdPage = warmColdPageForTurn({
+        turn: question.turn,
+        turnCount: turnGroups.length,
+        hotTurns: HOT_TURNS,
+        pageSize: WARM_PAGE_SIZE,
+      });
+      setWarmLayerState((prev) => {
+        const paged = warmLayerWithColdPageAtLeast(prev, warmLayerSessionKey, neededColdPage);
+        return warmLayerWithExpandedTurn(paged, warmLayerSessionKey, question.turn, true);
       });
     }
     jumpToQuestion(question);
-  }, [turnGroups.length]);
+  }, [turnGroups.length, warmLayerSessionKey]);
 
   // ── Hot zone: fully rendered from hotStartIdx to end ─────────────────────
   // Memoized separately from the assembly so streaming tokens don't rebuild
@@ -309,37 +367,7 @@ export function Transcript({
   // Each completed non-final step is folded into "Processed".
   const stepGroups = useMemo(() => {
     if (displayMode === "standard") return null;
-    const groups: { items: Item[]; isFinal: boolean; isComplete: boolean }[] = [];
-    let current: Item[] = [];
-
-    for (let i = hotStartIdx; i < items.length; i++) {
-      const it = items[i];
-      if (it.kind === "user") {
-        if (current.length > 0) {
-          const first = current[0];
-          const isFinal = first.kind === "assistant" && !first.streaming && first.text.trim() !== "";
-          groups.push({ items: current, isFinal, isComplete: true });
-          current = [];
-        }
-        groups.push({ items: [it], isFinal: false, isComplete: true });
-        continue;
-      }
-      if (it.kind === "assistant") {
-        if (current.length > 0) {
-          groups.push({ items: current, isFinal: false, isComplete: true });
-          current = [];
-        }
-        current.push(it);
-      } else {
-        current.push(it);
-      }
-    }
-    if (current.length > 0) {
-      const first = current[0];
-      const isFinal = first.kind === "assistant" && !first.streaming && first.text.trim() !== "";
-      groups.push({ items: current, isFinal, isComplete: false });
-    }
-    return groups;
+    return buildStepGroups(items, hotStartIdx);
   }, [displayMode, hotStartIdx, items]);
 
   const hotZoneNodes = useMemo<ReactNode[]>(() => {
@@ -389,6 +417,7 @@ export function Transcript({
             mode={displayMode}
             subcalls={subcallsByParent}
             tabId={tabId}
+            creationMode={creationMode}
           />,
         );
         collapseBatch = [];
@@ -444,6 +473,7 @@ export function Transcript({
               mode={displayMode}
               subcalls={subcallsByParent}
               tabId={tabId}
+              creationMode={creationMode}
             />,
           );
         } else if (nonAssistantItems.length > 0) {
@@ -466,6 +496,7 @@ export function Transcript({
               defaultExpanded={false}
               expandWhileStreaming={false}
               truncateStreamingReasoning={true}
+              creationMode={creationMode}
             />,
           );
           if (!it.streaming && it.text.trim() !== "") {
@@ -479,14 +510,32 @@ export function Transcript({
     } else {
       // Standard mode: flat rendering
       const roBatch: ToolItem[] = [];
+      const toolBatch: ToolItem[] = [];
+      let toolBatchKind: ToolGroupKind | null = null;
       const flushRO = () => {
         if (roBatch.length === 0) return;
         out.push(<ReadOnlyBatch key={`rob-${roBatch[0].id}`} items={[...roBatch]} subcalls={subcallsByParent} tabId={tabId} />);
         roBatch.length = 0;
       };
+      const flushToolBatch = () => {
+        if (!toolBatchKind || toolBatch.length === 0) return;
+        out.push(<ToolGroup key={`tg-${toolBatch[0].id}`} kind={toolBatchKind} items={[...toolBatch]} subcalls={subcallsByParent} tabId={tabId} />);
+        toolBatch.length = 0;
+        toolBatchKind = null;
+      };
       for (let i = hotStartIdx; i < items.length; i++) {
         const it = items[i];
+        if (creationMode && it.kind === "tool" && isCreationGroupableTool(it as ToolItem)) {
+          const kind = toolGroupKind(it as ToolItem);
+          if (kind) {
+            if (toolBatchKind && toolBatchKind !== kind) flushToolBatch();
+            toolBatchKind = kind;
+            toolBatch.push(it as ToolItem);
+            continue;
+          }
+        }
         if (
+          !creationMode &&
           it.kind === "tool" &&
           !it.parentId &&
           it.status !== "running" &&
@@ -497,6 +546,7 @@ export function Transcript({
           roBatch.push(it as ToolItem);
           continue;
         }
+        flushToolBatch();
         flushRO();
         switch (it.kind) {
           case "user": {
@@ -521,7 +571,7 @@ export function Transcript({
             break;
           }
           case "assistant":
-            out.push(<LiveAssistantMessage key={it.id} item={it as AssistantItem} defaultExpanded={false} />);
+            out.push(<LiveAssistantMessage key={it.id} item={it as AssistantItem} defaultExpanded={false} creationMode={creationMode} />);
             if (!it.streaming && it.text.trim() !== "") {
               actionText = it.text;
               actionReady = true;
@@ -538,62 +588,85 @@ export function Transcript({
           case "compaction": out.push(<CompactionCard key={it.id} item={it} />); break;
         }
       }
+      flushToolBatch();
       flushRO();
       if (!running) pushTurnActions();
     }
     return out;
-  }, [hotStartIdx, items, openAction, actionPending, rewindDisabled, running, onEditPrompt, onRewind, subcallsByParent, userTurn, checkpointsByTurn, displayMode, stepGroups, tabId, actionHoverMenus]);
+  }, [hotStartIdx, items, openAction, actionPending, rewindDisabled, running, onEditPrompt, onRewind, subcallsByParent, userTurn, checkpointsByTurn, displayMode, stepGroups, tabId, actionHoverMenus, creationMode]);
 
   // ── Assemble rendered output ──────────────────────────────────────────────
   // Warm/cold zone is a separate memo'd WarmZone component so streaming tokens
   // don't rebuild it. The hot zone uses LiveAssistantMessage (reads live from
   // LiveStreamContext) so streaming updates are captured immediately.
   return (
-    <div
-      className={`transcript${empty ? " transcript--empty" : ""}`}
-      ref={scrollRef}
-      onScroll={onScroll}
-    >
-      {empty && <Welcome onPrompt={onPrompt} variant={welcomeVariant} />}
+    <div className="transcript-shell">
+      <div
+        className={`transcript${empty ? " transcript--empty" : ""}`}
+        ref={scrollRef}
+        onScroll={onScroll}
+      >
+        {empty && !hydrating && <Welcome onPrompt={onPrompt} variant={welcomeVariant} />}
+
+        <LiveStreamContext.Provider value={live}>
+          {hasOlderHistory && (
+            <button
+              type="button"
+              className="warm-collapse"
+              onClick={onLoadOlderHistory}
+              disabled={loadingOlderHistory}
+            >
+              {loadingOlderHistory ? t("common.loading") : t("transcript.showEarlierHistory", { n: olderHistoryCount })}
+            </button>
+          )}
+          {turnGroups.length > HOT_TURNS && (
+            <WarmZone
+              turnGroups={turnGroups}
+              expandedWarmTurns={expandedWarmTurns}
+              warmStartTurn={warmStartTurn}
+              warmEndTurn={warmEndTurn}
+              coldTurnCount={coldTurnCount}
+              scrollRef={scrollRef}
+              warmItems={items}
+              warmSubcalls={subcallsByParent}
+              warmUserTurn={userTurn}
+              warmCheckpoints={checkpointsByTurn}
+              warmOpenAction={openAction}
+              warmActionPending={actionPending}
+              warmRewindDisabled={rewindDisabled}
+              warmActionHoverMenus={actionHoverMenus}
+              warmOnRewind={onRewind}
+              warmSetOpenAction={setOpenAction}
+              warmOnEdit={onEditPrompt}
+              tabId={tabId}
+              creationMode={creationMode}
+              onToggleColdPage={() => setWarmLayerState((prev) => warmLayerWithNextColdPage(prev, warmLayerSessionKey))}
+              onToggleWarmTurn={(g, expand) => {
+                setWarmLayerState((prev) => warmLayerWithExpandedTurn(prev, warmLayerSessionKey, g, expand));
+              }}
+            />
+          )}
+          <div ref={entranceRef}>
+            {hotZoneNodes}
+          </div>
+        </LiveStreamContext.Provider>
+      </div>
 
       {!empty && showQuestionNav && (
         <QuestionJumpBar questions={questions} onJump={handleJumpToQuestion} />
       )}
 
-      <LiveStreamContext.Provider value={live}>
-        {turnGroups.length > HOT_TURNS && (
-          <WarmZone
-            turnGroups={turnGroups}
-            expandedWarmTurns={expandedWarmTurns}
-            shownWarmStart={shownWarmStart}
-            coldTurnCount={coldTurnCount}
-            scrollRef={scrollRef}
-            warmItems={items}
-            warmSubcalls={subcallsByParent}
-            warmUserTurn={userTurn}
-            warmCheckpoints={checkpointsByTurn}
-            warmOpenAction={openAction}
-            warmActionPending={actionPending}
-            warmRewindDisabled={rewindDisabled}
-            warmActionHoverMenus={actionHoverMenus}
-            warmOnRewind={onRewind}
-            warmSetOpenAction={setOpenAction}
-            warmOnEdit={onEditPrompt}
-            tabId={tabId}
-            onToggleColdPage={() => setColdPage((p) => p + 1)}
-            onToggleWarmTurn={(g, expand) => {
-              setExpandedWarmTurns((prev) => {
-                const next = new Set(prev);
-                if (expand) next.add(g); else next.delete(g);
-                return next;
-              });
-            }}
-          />
-        )}
-        <div ref={entranceRef}>
-          {hotZoneNodes}
-        </div>
-      </LiveStreamContext.Provider>
+      {!empty && !isAtBottom && (
+        <button
+          type="button"
+          className="transcript__jump-bottom"
+          onClick={() => scrollToBottomAfterLayout(2)}
+          aria-label={t("transcript.jumpToBottom")}
+          title={t("transcript.jumpToBottom")}
+        >
+          <ArrowDown size={18} strokeWidth={2.2} aria-hidden="true" />
+        </button>
+      )}
     </div>
   );
 }
@@ -605,7 +678,8 @@ export function Transcript({
 const WarmZone = memo(function WarmZone({
   turnGroups,
   expandedWarmTurns,
-  shownWarmStart,
+  warmStartTurn,
+  warmEndTurn,
   coldTurnCount,
   scrollRef,
   warmItems,
@@ -620,12 +694,14 @@ const WarmZone = memo(function WarmZone({
   warmSetOpenAction,
   warmOnEdit,
   tabId,
+  creationMode,
   onToggleColdPage,
   onToggleWarmTurn,
 }: {
   turnGroups: TurnGroup[];
   expandedWarmTurns: ReadonlySet<number>;
-  shownWarmStart: number;
+  warmStartTurn: number;
+  warmEndTurn: number;
   coldTurnCount: number;
   scrollRef: React.RefObject<HTMLDivElement | null>;
   warmItems: readonly Item[];
@@ -640,6 +716,7 @@ const WarmZone = memo(function WarmZone({
   warmSetOpenAction: (action: OpenTurnAction | null) => void;
   warmOnEdit?: (turn: number, displayText: string, submitText?: string) => boolean | void | Promise<boolean | void>;
   tabId?: string;
+  creationMode?: boolean;
   onToggleColdPage: () => void;
   onToggleWarmTurn: (g: number, expand: boolean) => void;
 }) {
@@ -661,10 +738,8 @@ const WarmZone = memo(function WarmZone({
   }
 
   // 2. Warm zone: collapsed/expanded warm turn cards.
-  let warmStartTurn = 0;
   if (turnGroups.length > HOT_TURNS) {
-    warmStartTurn = turnGroups.length - HOT_TURNS - shownWarmStart;
-    for (let g = warmStartTurn; g < turnGroups.length - HOT_TURNS; g++) {
+    for (let g = warmStartTurn; g < warmEndTurn; g++) {
       const group = turnGroups[g];
       if (!group) continue;
       const expanded = expandedWarmTurns.has(g);
@@ -697,6 +772,7 @@ const WarmZone = memo(function WarmZone({
               setOpenAction={warmSetOpenAction}
               onEdit={warmOnEdit}
               tabId={tabId}
+              creationMode={creationMode}
             />
           </WarmTurnCard>,
         );
@@ -743,6 +819,7 @@ function WarmTurnItems({
   setOpenAction,
   onEdit,
   tabId,
+  creationMode = false,
 }: {
   startIdx: number;
   endIdx: number;
@@ -758,6 +835,7 @@ function WarmTurnItems({
   setOpenAction: (action: OpenTurnAction | null) => void;
   onEdit?: (turn: number, displayText: string, submitText?: string) => boolean | void | Promise<boolean | void>;
   tabId?: string;
+  creationMode?: boolean;
 }) {
   const nodes: React.ReactNode[] = [];
   let actionText = "";
@@ -790,20 +868,38 @@ function WarmTurnItems({
 
   // Group consecutive completed read-only tools into ReadOnlyBatch
   const roBatch: ToolItem[] = [];
+  const toolBatch: ToolItem[] = [];
+  let toolBatchKind: ToolGroupKind | null = null;
   const flushRO = () => {
     if (roBatch.length === 0) return;
     nodes.push(<ReadOnlyBatch key={`rob-${roBatch[0].id}`} items={[...roBatch]} subcalls={subcalls} tabId={tabId} />);
     roBatch.length = 0;
   };
+  const flushToolBatch = () => {
+    if (!toolBatchKind || toolBatch.length === 0) return;
+    nodes.push(<ToolGroup key={`tg-${toolBatch[0].id}`} kind={toolBatchKind} items={[...toolBatch]} subcalls={subcalls} tabId={tabId} />);
+    toolBatch.length = 0;
+    toolBatchKind = null;
+  };
 
   for (let i = startIdx; i < endIdx && i < items.length; i++) {
     const it = items[i];
 
     // Completed read-only tools → batch into ReadOnlyBatch
-    if (it.kind === "tool" && !it.parentId && it.name !== "todo_write" && it.name !== "exit_plan_mode" && isReadOnlyTool(it.name)) {
+    if (creationMode && it.kind === "tool" && isCreationGroupableTool(it as ToolItem)) {
+      const kind = toolGroupKind(it as ToolItem);
+      if (kind) {
+        if (toolBatchKind && toolBatchKind !== kind) flushToolBatch();
+        toolBatchKind = kind;
+        toolBatch.push(it as ToolItem);
+        continue;
+      }
+    }
+    if (!creationMode && it.kind === "tool" && !it.parentId && it.name !== "todo_write" && it.name !== "exit_plan_mode" && isReadOnlyTool(it.name)) {
       roBatch.push(it as ToolItem);
       continue;
     }
+    flushToolBatch();
     flushRO();
 
     switch (it.kind) {
@@ -828,7 +924,7 @@ function WarmTurnItems({
         break;
       }
       case "assistant": {
-        nodes.push(<AssistantMessage key={it.id} item={it} defaultExpanded={false} />);
+        nodes.push(<AssistantMessage key={it.id} item={it} defaultExpanded={false} creationMode={creationMode} />);
         if (!it.streaming && it.text.trim() !== "") {
           actionText = it.text;
           actionReady = true;
@@ -847,6 +943,7 @@ function WarmTurnItems({
       case "compaction": nodes.push(<CompactionCard key={it.id} item={it} />); break;
     }
   }
+  flushToolBatch();
   flushRO();
   pushTurnActions();
   return nodes;
@@ -918,9 +1015,10 @@ type TurnCollapseProps = {
   mode: DisplayMode;
   subcalls: Map<string, ToolItem[]>;
   tabId?: string;
+  creationMode?: boolean;
 };
 
-function TurnCollapse({ items, durationMs, mode, subcalls, tabId }: TurnCollapseProps) {
+function TurnCollapse({ items, durationMs, mode, subcalls, tabId, creationMode = false }: TurnCollapseProps) {
   const t = useT();
   const [open, setOpen] = useState(false);
   const bodyRef = useRef<HTMLDivElement>(null);
@@ -960,16 +1058,34 @@ function TurnCollapse({ items, durationMs, mode, subcalls, tabId }: TurnCollapse
   // Pre-compute body: group consecutive completed read-only tools into ReadOnlyBatch
   const body: ReactNode[] = [];
   const roBatch: ToolItem[] = [];
+  const toolBatch: ToolItem[] = [];
+  let toolBatchKind: ToolGroupKind | null = null;
   const flushRO = () => {
     if (roBatch.length === 0) return;
     body.push(<ReadOnlyBatch key={`rob-${roBatch[0].id}`} items={[...roBatch]} subcalls={subcalls} tabId={tabId} />);
     roBatch.length = 0;
   };
+  const flushToolBatch = () => {
+    if (!toolBatchKind || toolBatch.length === 0) return;
+    body.push(<ToolGroup key={`tg-${toolBatch[0].id}`} kind={toolBatchKind} items={[...toolBatch]} subcalls={subcalls} tabId={tabId} />);
+    toolBatch.length = 0;
+    toolBatchKind = null;
+  };
   for (const it of displayItems) {
-    if (it.kind === "tool" && !it.parentId && it.name !== "todo_write" && it.name !== "exit_plan_mode" && it.status !== "running" && isReadOnlyTool(it.name)) {
+    if (creationMode && it.kind === "tool" && isCreationGroupableTool(it as ToolItem)) {
+      const kind = toolGroupKind(it as ToolItem);
+      if (kind) {
+        if (toolBatchKind && toolBatchKind !== kind) flushToolBatch();
+        toolBatchKind = kind;
+        toolBatch.push(it as ToolItem);
+        continue;
+      }
+    }
+    if (!creationMode && it.kind === "tool" && !it.parentId && it.name !== "todo_write" && it.name !== "exit_plan_mode" && it.status !== "running" && isReadOnlyTool(it.name)) {
       roBatch.push(it as ToolItem);
       continue;
     }
+    flushToolBatch();
     flushRO();
     switch (it.kind) {
       case "tool":
@@ -981,11 +1097,12 @@ function TurnCollapse({ items, durationMs, mode, subcalls, tabId }: TurnCollapse
       case "phase": body.push(<PhaseCard key={it.id} text={it.text} />); break;
       case "assistant": {
         const displayItem = it;
-        body.push(<AssistantMessage key={it.id} item={displayItem as AssistantItem} />);
+        body.push(<AssistantMessage key={it.id} item={displayItem as AssistantItem} creationMode={creationMode} />);
         break;
       }
     }
   }
+  flushToolBatch();
   flushRO();
 
   return (

desktop/frontend/src/components/WorkspacePanel.tsx

@@ -26,8 +26,20 @@ import {
 } from "lucide-react";
 import { app } from "../lib/bridge";
 import { useT } from "../lib/i18n";
-import { loadLayoutSize, saveLayoutSize } from "../lib/layoutPreferences";
-import type { DirEntry, FilePreview, GitCommitView, GitCommitDetailView, WorkspaceChangeView } from "../lib/types";
+import {
+  clampWorkspaceSplitTreeWidth,
+  initialWorkspaceSplitTreeWidth,
+  resolveWorkspaceSplitTreeWidth,
+  shouldInitializeWorkspaceSplitOnFileSelect,
+  type WorkspaceSplitTreeWidthMode,
+  workspaceSplitCanFit,
+  workspaceSplitTreeWidthFromPointer,
+} from "../lib/workspaceSplit";
+import { createRafResizeUpdater } from "../lib/resizeDrag";
+import { closeWorkspacePreviewTab } from "../lib/workspacePreviewTabs";
+import { shouldScrollWorkspaceTreeSelection } from "../lib/workspaceTreeReveal";
+import { mergeWorkspaceSearchResults } from "../lib/workspaceTreeSearch";
+import type { DirEntry, FilePreview, GitCommitView, GitCommitDetailView, WorkspaceChangesView } from "../lib/types";
 import { formatWorkspaceReference, WORKSPACE_REF_DRAG_TYPE } from "../lib/workspaceDrag";
 import { cleanGitDiff } from "../lib/diff";
 import { CodeViewer } from "./CodeViewer";
@@ -37,12 +49,11 @@ import { Markdown } from "./Markdown";
 import { Tooltip } from "./Tooltip";
 import { AnchoredPopover } from "./AnchoredPopover";
 
-const WORKSPACE_TREE_MIN_WIDTH = 300;
+const WORKSPACE_TREE_MIN_WIDTH = 140;
 const WORKSPACE_TREE_DEFAULT_WIDTH = 300;
-const WORKSPACE_TREE_MAX_WIDTH = 340;
-const WORKSPACE_PREVIEW_MIN_WIDTH = 360;
+const WORKSPACE_TREE_RAIL_WIDTH = 44;
+const WORKSPACE_PREVIEW_MIN_WIDTH = 140;
 const WORKSPACE_PREVIEW_TARGET_WIDTH = 360;
-const WORKSPACE_DUAL_PANEL_MIN_WIDTH = WORKSPACE_TREE_MIN_WIDTH + WORKSPACE_PREVIEW_MIN_WIDTH;
 const WORKSPACE_DUAL_PANEL_TARGET_WIDTH = WORKSPACE_TREE_DEFAULT_WIDTH + WORKSPACE_PREVIEW_TARGET_WIDTH;
 const WORKSPACE_CONTEXT_MENU_FILE_HEIGHT = 136;
 const WORKSPACE_CONTEXT_MENU_REF_HEIGHT = 92;
@@ -55,20 +66,13 @@ type WorkspaceChangeListEntry = { key: string; path: string; meta: string; time:
 type WorkspaceChangeListRequest = { id: number; changes: WorkspaceChangeListEntry[] };
 
 function clampWorkspaceTreeWidth(width: number, panelWidth?: number): number {
-  const maxForPanel =
-    typeof panelWidth === "number" && Number.isFinite(panelWidth)
-      ? Math.max(WORKSPACE_TREE_MIN_WIDTH, panelWidth - WORKSPACE_PREVIEW_MIN_WIDTH)
-      : WORKSPACE_TREE_MAX_WIDTH;
-  const max = Math.min(WORKSPACE_TREE_MAX_WIDTH, maxForPanel);
-  return Math.min(max, Math.max(WORKSPACE_TREE_MIN_WIDTH, Math.round(width)));
-}
-
-function loadWorkspaceTreeWidth(): number {
-  return loadLayoutSize("workspaceTreeWidth", WORKSPACE_TREE_DEFAULT_WIDTH, clampWorkspaceTreeWidth);
-}
-
-function saveWorkspaceTreeWidth(width: number): void {
-  saveLayoutSize("workspaceTreeWidth", width);
+  return clampWorkspaceSplitTreeWidth({
+    width,
+    panelWidth,
+    railWidth: WORKSPACE_TREE_RAIL_WIDTH,
+    treeMinWidth: WORKSPACE_TREE_MIN_WIDTH,
+    previewMinWidth: WORKSPACE_PREVIEW_MIN_WIDTH,
+  });
 }
 
 function entryPath(dir: string, entry: DirEntry): string {
@@ -241,7 +245,7 @@ export function WorkspacePanel({
   const [loadingPreview, setLoadingPreview] = useState(false);
   const [viewMode, setViewMode] = useState<"files" | "changed">(initialViewMode);
   const [gitHistory, setGitHistory] = useState<GitCommitView[]>([]);
-  const [workspaceChanges, setWorkspaceChanges] = useState<WorkspaceChangeView[] | null>(null);
+  const [workspaceChanges, setWorkspaceChanges] = useState<WorkspaceChangesView | null>(null);
   const [loadingHistory, setLoadingHistory] = useState(false);
   const [expandedCommit, setExpandedCommit] = useState<string | null>(null);
   const [commitDetail, setCommitDetail] = useState<GitCommitDetailView | null>(null);
@@ -250,10 +254,12 @@ export function WorkspacePanel({
   const [treeMenu, setTreeMenu] = useState<{ x: number; y: number; path: string; isDir: boolean } | null>(null);
   const [treeBlankMenuPoint, setTreeBlankMenuPoint] = useState<ContextMenuPoint | null>(null);
   const [filter, setFilter] = useState("");
+  const [searchResults, setSearchResults] = useState<DirEntry[] | null>(null);
   const [scopedFilePaths, setScopedFilePaths] = useState<string[] | null>(null);
   const [scopedChangeRows, setScopedChangeRows] = useState<WorkspaceChangeListEntry[] | null>(null);
   const [treeVisible, setTreeVisible] = useState(true);
-  const [treeWidth, setTreeWidth] = useState(loadWorkspaceTreeWidth);
+  const [treeWidth, setTreeWidth] = useState(WORKSPACE_TREE_DEFAULT_WIDTH);
+  const [treeWidthMode, setTreeWidthMode] = useState<WorkspaceSplitTreeWidthMode>("manual");
   const [treeResizing, setTreeResizing] = useState(false);
   const [recentOpen, setRecentOpen] = useState(false);
   const lastPreviewModeActiveRef = useRef<boolean | null>(null);
@@ -271,6 +277,7 @@ export function WorkspacePanel({
   const commitDetailRequestIdRef = useRef(0);
   const recentAnchorRef = useRef<HTMLButtonElement>(null);
   const openDirsRef = useRef(openDirs);
+  const pendingTreeRevealPathRef = useRef<string | null>(null);
 
   useEffect(() => {
     openDirsRef.current = openDirs;
@@ -307,11 +314,16 @@ export function WorkspacePanel({
     try {
       const result = await app.WorkspaceChanges(requestTabId);
       if (workspaceChangesRequestIdRef.current === requestId && lastWorkspaceTabIdRef.current === requestTabId) {
-        setWorkspaceChanges(result.files && result.files.length > 0 ? result.files : null);
+        setWorkspaceChanges({
+          files: Array.isArray(result?.files) ? result.files : [],
+          gitAvailable: result?.gitAvailable !== false,
+          gitErr: result?.gitErr,
+          gitBranch: result?.gitBranch,
+        });
       }
     } catch {
       if (workspaceChangesRequestIdRef.current === requestId && lastWorkspaceTabIdRef.current === requestTabId) {
-        setWorkspaceChanges(null);
+        setWorkspaceChanges({ files: [], gitAvailable: false });
       }
     }
   }, [tabId]);
@@ -359,7 +371,21 @@ export function WorkspacePanel({
 
   const selectFile = useCallback(
     (path: string) => {
-      onRequestPanelWidth?.(WORKSPACE_DUAL_PANEL_TARGET_WIDTH);
+      const initializeSplit = shouldInitializeWorkspaceSplitOnFileSelect({
+        previewVisible: openTabs.length > 0 || selectedPath !== null,
+        treeVisible,
+      });
+      if (initializeSplit) {
+        setTreeWidth(initialWorkspaceSplitTreeWidth({
+          panelWidth,
+          railWidth: WORKSPACE_TREE_RAIL_WIDTH,
+          savedTreeWidth: null,
+          treeMinWidth: WORKSPACE_TREE_MIN_WIDTH,
+          previewMinWidth: WORKSPACE_PREVIEW_MIN_WIDTH,
+        }));
+        setTreeWidthMode("even");
+      }
+      pendingTreeRevealPathRef.current = path;
       setSelectedPath(path);
       setScopedFilePaths((current) => {
         if (current) dismissedFileListRequestIdRef.current = lastFileListRequestIdRef.current;
@@ -377,7 +403,7 @@ export function WorkspacePanel({
         if (!entriesByDir[dir]) void loadDir(dir);
       });
     },
-    [entriesByDir, loadDir, onRequestPanelWidth],
+    [entriesByDir, loadDir, openTabs.length, panelWidth, selectedPath, treeVisible],
   );
 
   useEffect(() => {
@@ -620,12 +646,13 @@ export function WorkspacePanel({
     setTreeMenu(null);
     if (viewMode === "changed") {
       void loadGitHistory();
+      void loadWorkspaceChanges();
       return;
     }
     const dirs = Array.from(openDirsRef.current);
     setEntriesByDir({});
     dirs.forEach((dir) => void loadDir(dir));
-  }, [loadGitHistory, loadDir, viewMode]);
+  }, [loadGitHistory, loadWorkspaceChanges, loadDir, viewMode]);
 
   const refreshSelected = useCallback(() => {
     if (!selectedPath) return;
@@ -679,36 +706,15 @@ export function WorkspacePanel({
     [entriesByDir, loadDir],
   );
 
-  const closeTab = (path: string) => {
-    if (lastRevealRequestIdRef.current === revealPathRequest?.id && revealPathRequest.path === path) {
-      dismissedRevealRequestIdRef.current = revealPathRequest.id;
-    }
-    if (lastChangeRevealRequestIdRef.current === changeRevealRequest?.id && changeRevealRequest.path === path) {
-      dismissedChangeRevealRequestIdRef.current = changeRevealRequest.id;
-    }
-    setOpenTabs((tabs) => {
-      const next = tabs.filter((tab) => tab !== path);
-      if (selectedPath === path) {
-        const replacement = next[next.length - 1] ?? null;
-        setSelectedPath(replacement);
-        if (!replacement) {
-          setPreview(null);
-          setTreeVisible(true);
-        }
-        setSelectionMenu(null);
-        setTreeMenu(null);
-        setRecentOpen(false);
-      }
-      return next;
-    });
-  };
-
   const breadcrumbDirs = selectedPath ? parentDirs(selectedPath) : [""];
   const pathParts = selectedPath?.split("/").filter(Boolean) ?? [];
   const sessionChanges = useMemo(
-    () => workspaceChanges?.filter((c) => c.sources.includes("session")) ?? null,
+    () => workspaceChanges?.files.filter((c) => c.sources.includes("session")) ?? null,
     [workspaceChanges],
   );
+  const workspaceGitWarning = workspaceChanges && (!workspaceChanges.gitAvailable || workspaceChanges.gitErr?.trim())
+    ? t("workspace.gitUnavailable")
+    : null;
 
   const changedMode = viewMode === "changed";
   const currentFileName = selectedPath ? basename(selectedPath) : t("workspace.noFile");
@@ -720,6 +726,22 @@ export function WorkspacePanel({
     ? scopedChangeRows ? t("context.changedMeta", { count: scopedChangeRows.length }) : shortCwd(cwd) || t("workspace.title")
     : currentFileDir;
   const recentFiles = useMemo(() => [...openTabs].reverse(), [openTabs]);
+
+  useEffect(() => {
+    const q = filter.trim();
+    if (!open || viewMode === "changed" || !q || scopedFilePaths) {
+      setSearchResults(null);
+      return;
+    }
+    let cancelled = false;
+    app.SearchFileRefs(q).then((results) => {
+      if (!cancelled) setSearchResults(results);
+    }).catch(() => {
+      if (!cancelled) setSearchResults(null);
+    });
+    return () => { cancelled = true; };
+  }, [filter, viewMode, scopedFilePaths, open]);
+
   const flattened = useMemo(() => {
     const q = filter.trim().toLowerCase();
     if (scopedFilePaths) {
@@ -735,10 +757,10 @@ export function WorkspacePanel({
       }
     }
     if (!q) return null;
-    return rows
+    return mergeWorkspaceSearchResults(rows, searchResults)
       .filter((row) => row.path.toLowerCase().includes(q))
       .sort((a, b) => a.path.localeCompare(b.path));
-  }, [entriesByDir, filter, scopedFilePaths]);
+  }, [entriesByDir, filter, scopedFilePaths, searchResults]);
 
   const treeRows = useMemo<TreeRow[]>(() => {
     if (flattened) {
@@ -784,34 +806,61 @@ export function WorkspacePanel({
 
   const searchPlaceholder = t(scopedFilePaths ? "workspace.filterReferencedFiles" : changedMode ? "workspace.filterChanges" : "workspace.filter");
 
-  const effectiveTreeWidth = useMemo(() => clampWorkspaceTreeWidth(treeWidth, panelWidth), [panelWidth, treeWidth]);
   const filePreviewActive = openTabs.length > 0 || selectedPath !== null;
   const changeDetailActive = changedMode && expandedCommit !== null;
   const previewVisible = changedMode || filePreviewActive;
-  const selectedFileVisible = selectedPath !== null;
-  const compactTreeRail =
-    treeVisible && selectedFileVisible && panelWidth !== undefined && panelWidth < WORKSPACE_DUAL_PANEL_MIN_WIDTH;
-  const actualTreeVisible = changedMode ? false : treeVisible && !compactTreeRail;
-  const showTreeRail = previewVisible && (!actualTreeVisible || compactTreeRail) && !changedMode;
+  const showTreeRail = previewVisible && !changedMode;
+  const splitPanesFit = useMemo(
+    () =>
+      workspaceSplitCanFit({
+        panelWidth,
+        railWidth: WORKSPACE_TREE_RAIL_WIDTH,
+        treeMinWidth: WORKSPACE_TREE_MIN_WIDTH,
+        previewMinWidth: WORKSPACE_PREVIEW_MIN_WIDTH,
+      }),
+    [panelWidth],
+  );
+  const actualTreeVisible = changedMode ? false : treeVisible && (!previewVisible || splitPanesFit);
   const previewModeActive = open && (filePreviewActive || changeDetailActive);
   const embeddedDockMode = !showViewTabs;
   const showFileTools = showViewTabs || filePreviewActive;
+  const effectiveTreeWidth = useMemo(
+    () =>
+      resolveWorkspaceSplitTreeWidth({
+        mode: treeWidthMode,
+        currentTreeWidth: treeWidth,
+        panelWidth,
+        railWidth: WORKSPACE_TREE_RAIL_WIDTH,
+        treeMinWidth: WORKSPACE_TREE_MIN_WIDTH,
+        previewMinWidth: WORKSPACE_PREVIEW_MIN_WIDTH,
+      }),
+    [panelWidth, treeWidth, treeWidthMode],
+  );
+  const maxTreeWidthForPanel = useMemo(
+    () => Math.max(WORKSPACE_TREE_MIN_WIDTH, (panelWidth ?? WORKSPACE_DUAL_PANEL_TARGET_WIDTH) - WORKSPACE_TREE_RAIL_WIDTH - WORKSPACE_PREVIEW_MIN_WIDTH),
+    [panelWidth],
+  );
 
   useEffect(() => {
-    if (!selectedPath || !actualTreeVisible) return;
-    const selectedIndex = treeRows.findIndex((row) => row.path === selectedPath);
-    if (selectedIndex !== -1) {
-      virtualizer.scrollToIndex(selectedIndex, { align: "auto" });
+    const pendingRevealPath = pendingTreeRevealPathRef.current;
+    if (!pendingRevealPath) return;
+    if (!selectedPath || pendingRevealPath !== selectedPath) {
+      pendingTreeRevealPathRef.current = null;
+      return;
     }
+    const selectedIndex = treeRows.findIndex((row) => row.path === selectedPath);
+    if (!shouldScrollWorkspaceTreeSelection({ selectedPath, pendingRevealPath, actualTreeVisible, selectedIndex })) return;
+    virtualizer.scrollToIndex(selectedIndex, { align: "auto" });
+    pendingTreeRevealPathRef.current = null;
   }, [selectedPath, actualTreeVisible, treeRows, virtualizer]);
 
   const panelStyle = useMemo(
     () =>
       ({
         "--workspace-tree-width": `${effectiveTreeWidth}px`,
-        "--workspace-preview-min-width": compactTreeRail ? "0px" : `${WORKSPACE_PREVIEW_MIN_WIDTH}px`,
+        "--workspace-preview-min-width": `${WORKSPACE_PREVIEW_MIN_WIDTH}px`,
       }) as CSSProperties,
-    [compactTreeRail, effectiveTreeWidth],
+    [effectiveTreeWidth],
   );
 
   useEffect(() => {
@@ -832,11 +881,48 @@ export function WorkspacePanel({
     }
   }, [onClose, previewVisible]);
 
+  const showTreeEvenSplit = useCallback(() => {
+    setTreeWidth(initialWorkspaceSplitTreeWidth({
+      panelWidth,
+      railWidth: WORKSPACE_TREE_RAIL_WIDTH,
+      savedTreeWidth: null,
+      treeMinWidth: WORKSPACE_TREE_MIN_WIDTH,
+      previewMinWidth: WORKSPACE_PREVIEW_MIN_WIDTH,
+    }));
+    setTreeWidthMode("even");
+    setTreeVisible(true);
+  }, [panelWidth]);
+
+  const toggleTreeRail = useCallback(() => {
+    if (actualTreeVisible) {
+      setTreeVisible(false);
+      return;
+    }
+    showTreeEvenSplit();
+  }, [actualTreeVisible, showTreeEvenSplit]);
+
+  const closePreviewArea = useCallback(() => {
+    if (lastRevealRequestIdRef.current === revealPathRequest?.id) {
+      dismissedRevealRequestIdRef.current = revealPathRequest.id;
+    }
+    if (lastChangeRevealRequestIdRef.current === changeRevealRequest?.id) {
+      dismissedChangeRevealRequestIdRef.current = changeRevealRequest.id;
+    }
+    const nextPreviewTabs = closeWorkspacePreviewTab(openTabs, selectedPath);
+    setSelectedPath(nextPreviewTabs.selectedPath);
+    setOpenTabs(nextPreviewTabs.openTabs);
+    setPreview(null);
+    setSelectionMenu(null);
+    setTreeMenu(null);
+    setRecentOpen(false);
+    setTreeVisible(true);
+  }, [changeRevealRequest, openTabs, revealPathRequest, selectedPath]);
+
   const setSavedTreeWidth = useCallback(
     (width: number) => {
       const next = clampWorkspaceTreeWidth(width, panelWidth);
       setTreeWidth(next);
-      saveWorkspaceTreeWidth(next);
+      setTreeWidthMode("manual");
     },
     [panelWidth],
   );
@@ -844,18 +930,34 @@ export function WorkspacePanel({
   const startTreeResize = useCallback(
     (event: ReactPointerEvent<HTMLButtonElement>) => {
       if (!treeVisible) return;
-      const rect = panelRef.current?.getBoundingClientRect();
-      if (!rect) return;
+      const panel = panelRef.current;
+      const rect = panel?.getBoundingClientRect();
+      if (!panel || !rect) return;
       event.preventDefault();
+      const committedTreeWidth = clampWorkspaceTreeWidth(effectiveTreeWidth, panelWidth);
+      setTreeWidth(committedTreeWidth);
+      setTreeWidthMode("manual");
       setTreeResizing(true);
-      let nextWidth = effectiveTreeWidth;
+      let nextWidth = committedTreeWidth;
+      const liveResize = createRafResizeUpdater({
+        target: panel,
+        separator: event.currentTarget,
+        cssVar: "--workspace-tree-width",
+      });
       const onMove = (moveEvent: PointerEvent) => {
-        nextWidth = clampWorkspaceTreeWidth(moveEvent.clientX - rect.left, rect.width);
-        setTreeWidth(nextWidth);
+        nextWidth = workspaceSplitTreeWidthFromPointer({
+          clientX: moveEvent.clientX,
+          panelLeft: rect.left,
+          panelWidth: rect.width,
+          railWidth: WORKSPACE_TREE_RAIL_WIDTH,
+          treeMinWidth: WORKSPACE_TREE_MIN_WIDTH,
+          previewMinWidth: WORKSPACE_PREVIEW_MIN_WIDTH,
+        });
+        liveResize.schedule(nextWidth);
       };
       const onDone = () => {
+        liveResize.flush();
         setTreeWidth(nextWidth);
-        saveWorkspaceTreeWidth(nextWidth);
         setTreeResizing(false);
         window.removeEventListener("pointermove", onMove);
         window.removeEventListener("pointerup", onDone);
@@ -869,7 +971,7 @@ export function WorkspacePanel({
       window.addEventListener("pointerup", onDone);
       window.addEventListener("pointercancel", onDone);
     },
-    [effectiveTreeWidth, treeVisible],
+    [effectiveTreeWidth, panelWidth, treeVisible],
   );
 
   const resizeTreeWithKeyboard = useCallback(
@@ -882,10 +984,10 @@ export function WorkspacePanel({
         setSavedTreeWidth(WORKSPACE_TREE_MIN_WIDTH);
       } else if (event.key === "End") {
         event.preventDefault();
-        setSavedTreeWidth(WORKSPACE_TREE_MAX_WIDTH);
+        setSavedTreeWidth(maxTreeWidthForPanel);
       }
     },
-    [effectiveTreeWidth, setSavedTreeWidth],
+    [effectiveTreeWidth, maxTreeWidthForPanel, setSavedTreeWidth],
   );
 
   if (!open) return null;
@@ -1052,6 +1154,16 @@ export function WorkspacePanel({
   };
 
   const isMarkdown = selectedPath?.toLowerCase().endsWith(".md") ?? false;
+  const codePreviewActive = Boolean(
+    selectedPath &&
+      !changedMode &&
+      preview &&
+      !loadingPreview &&
+      !preview.err &&
+      !preview.kind &&
+      !preview.binary &&
+      !isMarkdown,
+  );
   const treeBlankMenuItems: ContextMenuItem[] = [
     {
       key: "refresh-tree",
@@ -1064,7 +1176,7 @@ export function WorkspacePanel({
   return (
     <aside
       ref={panelRef}
-      className={`workspace-panel${embeddedDockMode ? " workspace-panel--embedded" : ""}${changedMode ? " workspace-panel--detail-only" : ""}${previewVisible && actualTreeVisible ? " workspace-panel--split-preview" : ""}${compactTreeRail ? " workspace-panel--compact-rail" : ""}${actualTreeVisible ? "" : " workspace-panel--tree-hidden"}${previewVisible ? "" : " workspace-panel--preview-hidden"}${treeResizing ? " workspace-panel--tree-resizing" : ""}`}
+      className={`workspace-panel${embeddedDockMode ? " workspace-panel--embedded" : ""}${showTreeRail ? " workspace-panel--with-tree-rail" : ""}${changedMode ? " workspace-panel--detail-only" : ""}${previewVisible && actualTreeVisible ? " workspace-panel--split-preview" : ""}${actualTreeVisible ? "" : " workspace-panel--tree-hidden"}${previewVisible ? "" : " workspace-panel--preview-hidden"}${treeResizing ? " workspace-panel--tree-resizing" : ""}`}
       aria-label={t("workspace.title")}
       style={panelStyle}
     >
@@ -1104,7 +1216,7 @@ export function WorkspacePanel({
             </Tooltip>
             {selectedPath && (
               <Tooltip label={t("workspace.closePreview")}>
-                <button className="workspace-iconbtn" onClick={() => closeTab(selectedPath)}>
+                <button className="workspace-iconbtn" onClick={closePreviewArea}>
                   <X size={15} />
                 </button>
               </Tooltip>
@@ -1148,8 +1260,7 @@ export function WorkspacePanel({
               className="workspace-crumb"
               onClick={() => {
                 setFilter("");
-                setTreeVisible(true);
-                onRequestPanelWidth?.(WORKSPACE_DUAL_PANEL_TARGET_WIDTH);
+                showTreeEvenSplit();
                 setOpenDirs((prev) => new Set([...Array.from(prev), ""]));
               }}
             >
@@ -1167,8 +1278,7 @@ export function WorkspacePanel({
                     className={`workspace-crumb${isLast ? " workspace-crumb--current" : ""}`}
                     onClick={() => {
                       if (isLast) return;
-                      setTreeVisible(true);
-                      onRequestPanelWidth?.(WORKSPACE_DUAL_PANEL_TARGET_WIDTH);
+                      showTreeEvenSplit();
                       setFilter("");
                       setOpenDirs((prev) => new Set([...Array.from(prev), ...breadcrumbDirs, dir]));
                       void loadDir(dir);
@@ -1183,7 +1293,11 @@ export function WorkspacePanel({
           {preview && preview.size > 0 && <span className="workspace-preview__size">{formatBytes(preview.size)}</span>}
         </div>
 
-        <div className="workspace-preview__body" ref={previewBodyRef} onContextMenu={openSelectionMenu}>
+        <div
+          className={`workspace-preview__body${codePreviewActive ? " workspace-preview__body--code" : ""}`}
+          ref={previewBodyRef}
+          onContextMenu={openSelectionMenu}
+        >
           {viewMode === "changed" && scopedChangeRows ? (
             <div className="workspace-change-scope">
               <div className="workspace-change-scope__head">
@@ -1237,6 +1351,11 @@ export function WorkspacePanel({
             </div>
           ) : viewMode === "changed" && !selectedPath ? (
             <div className="workspace-git-history">
+              {workspaceGitWarning && (
+                <div className="workspace-note workspace-note--warning" role="status">
+                  {workspaceGitWarning}
+                </div>
+              )}
               {sessionChanges && sessionChanges.length > 0 && (
                 <div className="workspace-change-scope">
                   <div className="workspace-change-scope__head">
@@ -1271,7 +1390,7 @@ export function WorkspacePanel({
               {loadingHistory ? (
                 <div className="workspace-empty">{t("workspace.loading")}</div>
               ) : gitHistory.length === 0 && !(sessionChanges && sessionChanges.length > 0) ? (
-                <div className="workspace-empty">{t("workspace.noChanges")}</div>
+                <div className="workspace-empty">{workspaceGitWarning ? t("workspace.gitChangesUnknown") : t("workspace.noChanges")}</div>
               ) : (
                 <div className="workspace-git-history__list">
                   {gitHistory.map((commit) => (
@@ -1397,16 +1516,14 @@ export function WorkspacePanel({
       </section>}
 
       {showTreeRail && (
-        <section className="workspace-tree-rail" aria-label={t("workspace.showTree")}>
-          <Tooltip label={t("workspace.showTree")} side="right">
+        <section className="workspace-tree-rail" aria-label={actualTreeVisible ? t("workspace.hideTree") : t("workspace.showTree")}>
+          <Tooltip label={actualTreeVisible ? t("workspace.hideTree") : t("workspace.showTree")} side="right">
             <button
-              className="workspace-tree-reveal workspace-iconbtn workspace-iconbtn--on"
+              className={`workspace-tree-reveal workspace-iconbtn${actualTreeVisible ? " workspace-iconbtn--on" : ""}`}
               type="button"
-              aria-label={t("workspace.showTree")}
-              onClick={() => {
-                setTreeVisible(true);
-                onRequestPanelWidth?.(WORKSPACE_DUAL_PANEL_TARGET_WIDTH);
-              }}
+              aria-label={actualTreeVisible ? t("workspace.hideTree") : t("workspace.showTree")}
+              aria-pressed={actualTreeVisible}
+              onClick={toggleTreeRail}
             >
               <FolderTree size={15} />
             </button>
@@ -1422,7 +1539,7 @@ export function WorkspacePanel({
           aria-orientation="vertical"
           aria-label={t("workspace.resizeTree")}
           aria-valuemin={WORKSPACE_TREE_MIN_WIDTH}
-          aria-valuemax={WORKSPACE_TREE_MAX_WIDTH}
+          aria-valuemax={maxTreeWidthForPanel}
           aria-valuenow={effectiveTreeWidth}
           onPointerDown={startTreeResize}
           onKeyDown={resizeTreeWithKeyboard}
@@ -1433,16 +1550,18 @@ export function WorkspacePanel({
       <section className="workspace-files">
         {showFileTools && (
           <div className={`workspace-files__tools${embeddedDockMode ? " workspace-files__tools--embedded" : ""}`}>
-            <Tooltip label={previewVisible ? t("workspace.hideTree") : t("workspace.close")}>
-              <button
-                className="workspace-iconbtn workspace-iconbtn--on"
-                type="button"
-                aria-label={previewVisible ? t("workspace.hideTree") : t("workspace.close")}
-                onClick={hideTreeOrClosePanel}
-              >
-                {previewVisible ? <FolderX size={15} /> : <X size={15} />}
-              </button>
-            </Tooltip>
+            {showViewTabs && (
+              <Tooltip label={previewVisible ? t("workspace.hideTree") : t("workspace.close")}>
+                <button
+                  className="workspace-iconbtn workspace-iconbtn--on"
+                  type="button"
+                  aria-label={previewVisible ? t("workspace.hideTree") : t("workspace.close")}
+                  onClick={hideTreeOrClosePanel}
+                >
+                  {previewVisible ? <FolderX size={15} /> : <X size={15} />}
+                </button>
+              </Tooltip>
+            )}
             {showViewTabs && (
               <div className="workspace-files__tabs" role="tablist" aria-label={t("workspace.viewMode")}>
                 <button
@@ -1465,7 +1584,7 @@ export function WorkspacePanel({
             )}
             {showViewTabs && (
               <Tooltip label={t("workspace.refreshChanges")}>
-                <button className="workspace-iconbtn" onClick={() => void loadGitHistory()}>
+                <button className="workspace-iconbtn" onClick={() => { void loadGitHistory(); void loadWorkspaceChanges(); }}>
                   <RefreshCw size={14} />
                 </button>
               </Tooltip>