From 3dfc8d11a639e49dbd087f3a2c8d1fdc4040bde1 Mon Sep 17 00:00:00 2001
From: Sivan <liuxw96@foxmail.com>
Date: Fri, 29 May 2026 19:05:04 +0800
Subject: [PATCH 01/10] fix(cli): restore TUI scroll and copy command

---
 docs/CLI-REFERENCE.md               |  22 +--
 docs/cli-ref-i18n.js                |  18 ++-
 docs/cli-reference.html             |  66 ++-------
 src/cli/commands/chat.tsx           |  21 +--
 src/cli/ui/App.tsx                  |   3 +
 src/cli/ui/copy-history.ts          | 211 ++++++++++++++++++++++++++++
 src/cli/ui/history-scroll-mode.ts   |   3 +-
 src/cli/ui/mouse-mode.ts            |  10 +-
 src/cli/ui/slash/commands.ts        |   6 +
 src/cli/ui/slash/handlers/basic.ts  |  24 ++++
 src/cli/ui/slash/types.ts           |   3 +
 src/cli/ui/stdin-reader.ts          |   8 +-
 src/config.ts                       |   4 +-
 src/i18n/EN.ts                      |  22 ++-
 src/i18n/JA.ts                      |   2 +-
 src/i18n/de.ts                      |   2 +-
 src/i18n/zh-CN.ts                   |  18 ++-
 tests/chat-scroll-wheel.test.ts     |  20 ++-
 tests/copy-history.test.ts          |  77 ++++++++++
 tests/slash.test.ts                 |  45 +++++-
 tests/stdin-reader.test.ts          |  12 ++
 tests/ui-slash-suggestions.test.tsx |   6 +-
 22 files changed, 489 insertions(+), 114 deletions(-)
 create mode 100644 src/cli/ui/copy-history.ts
 create mode 100644 tests/copy-history.test.ts

diff --git a/docs/CLI-REFERENCE.md b/docs/CLI-REFERENCE.md
index 8575920ce..f9be9d7ae 100644
--- a/docs/CLI-REFERENCE.md
+++ b/docs/CLI-REFERENCE.md
@@ -40,7 +40,7 @@ Run `reasonix --help` (or any subcommand with `--help`) for the full flag list.
 | `--no-config` | Ignore `~/.reasonix/config.json` for this run |
 | `--no-dashboard` | Don't auto-start the embedded web dashboard |
 | `--no-alt-screen` | Render to scrollback instead of the alt-screen buffer (preserves chat in shell history; legacy mode, can ghost on resize) |
-| `--no-mouse` | Disable DECSET 1007 (alternate-scroll); wheel reverts to native terminal scroll |
+| `--no-mouse` | Disable app-managed mouse tracking; wheel reverts to native terminal scroll |
 
 ---
 
@@ -57,7 +57,7 @@ Type `/` mid-chat to open the picker. Aliases shown in parentheses. Code-mode-on
 | `/retry` | Truncate and resend your last message — fresh sample |
 | `/compact` | Fold older turns into a summary (cache-safe). Auto-fires at 50% ctx; this is the manual trigger |
 | `/stop` | Abort the current model turn (typed alternative to Esc) |
-| `/copy` | Open vim/tmux-style copy mode — `j`/`k` navigate, `v` select, `y` yank to clipboard. The right answer for SSH / mosh / tmux where drag-select can't extend past the viewport |
+| `/copy [all\|last\|assistant\|N]` | Copy the latest assistant response by default; `all` copies the whole chat and `N` copies the last N items |
 
 ### Setup
 
@@ -176,7 +176,7 @@ Type `/` mid-chat to open the picker. Aliases shown in parentheses. Code-mode-on
 | Drag | Selects text natively — no modifier needed |
 | Right-click | Terminal-native (e.g. paste menu on Windows Terminal) |
 
-Reasonix sets DECSET 1007 (alternate-scroll) only — wheel events translate to ↑/↓ keypresses for the app, but native click/drag selection is left untouched. Pass `--no-mouse` to opt out entirely.
+In auto/app scroll mode, Reasonix captures mouse-wheel reports so chat history can scroll inside terminals whose native scrollback does not move TUI content. Pass `--no-mouse` to opt out entirely.
 
 ---
 
@@ -195,23 +195,9 @@ The default path is **terminal-native**. Drag to select, then use your terminal'
 
 In SSH / mosh / tmux, the alt-screen buffer prevents the terminal from extending the selection past the visible viewport — there is no scrollback above the alt-screen to drag into. Two fixes:
 
-1. **`/copy`** — open vim/tmux-style copy mode in-app. Snapshots the current chat to a navigable buffer; `y` yanks to clipboard via OSC 52 (with a temp-file fallback for terminals that don't support it).
+1. **`/copy`** — copy the latest assistant response through OSC 52. Use `/copy all` for the full chat or `/copy N` for the last N serialized chat items. Oversized content falls back to a temp file path.
 2. **`--no-alt-screen`** — render to shell scrollback instead. Drag-select then works terminal-natively (the chat content is real lines in the scrollback above your cursor). Trade-off: redraw can ghost on resize.
 
-### `/copy` — copy mode keys
-
-| Key | What it does |
-|---|---|
-| `j` / `↓` | Cursor down one line |
-| `k` / `↑` | Cursor up one line |
-| `PgUp` / `PgDn` | Page up / down |
-| `g` / `G` | Jump to top / bottom |
-| `v` | Start (or cancel) selection at the cursor |
-| `y` / `Enter` | Yank selection to clipboard, exit |
-| `q` / `Esc` | Quit without yanking |
-
-`y` with no active selection yanks just the current line. The yank goes through OSC 52 first (works through SSH, mosh, tmux with `set -g set-clipboard on`); content larger than 75 KB falls back to a temp file whose path is printed on exit.
-
 ---
 
 ## Where this lives
diff --git a/docs/cli-ref-i18n.js b/docs/cli-ref-i18n.js
index b746a9839..91b234366 100644
--- a/docs/cli-ref-i18n.js
+++ b/docs/cli-ref-i18n.js
@@ -47,7 +47,7 @@
 
     "ms.title": "Mouse",
     "ms.body":
-      "Reasonix sets DECSET 1007 (alternate-scroll) only — wheel events translate to ↑/↓ keypresses for the app, but native click/drag selection is left untouched. Pass <code>--no-mouse</code> to opt out entirely.",
+      "In auto/app scroll mode, Reasonix captures mouse-wheel reports so chat history can scroll inside terminals whose native scrollback does not move TUI content. Pass <code>--no-mouse</code> to opt out entirely.",
 
     "cp.title": "Copy / paste",
     "cp.body":
@@ -56,12 +56,11 @@
     "cp.body.drag":
       "In SSH / mosh / tmux, the alt-screen buffer prevents the terminal from extending the selection past the visible viewport — there is no scrollback above the alt-screen to drag into. Two fixes:",
     "cp.fix1":
-      "<strong><code>/copy</code></strong> — open vim/tmux-style copy mode in-app. Snapshots the current chat to a navigable buffer; <code>y</code> yanks to clipboard via OSC 52 (with a temp-file fallback for terminals that don't support it).",
+      "<strong><code>/copy</code></strong> — copy the latest assistant response through OSC 52. Use <code>/copy all</code> for the full chat or <code>/copy N</code> for the last N serialized chat items. Oversized content falls back to a temp file path.",
     "cp.fix2":
       "<strong><code>--no-alt-screen</code></strong> — render to shell scrollback instead. Drag-select then works terminal-natively (the chat content is real lines in the scrollback above your cursor). Trade-off: redraw can ghost on resize.",
-    "cp.h.copymode": "<code>/copy</code> — copy mode keys",
-    "cp.body.osc":
-      "<code>y</code> with no active selection yanks just the current line. The yank goes through OSC 52 first (works through SSH, mosh, tmux with <code>set -g set-clipboard on</code>); content larger than 75 KB falls back to a temp file whose path is printed on exit.",
+    "cp.h.copymode": "<code>/copy</code>",
+    "cp.body.osc": "<code>/copy</code> uses OSC 52 first; large content falls back to a temp file.",
   };
 
   var zh = {
@@ -105,7 +104,7 @@
 
     "ms.title": "鼠标",
     "ms.body":
-      "Reasonix 只设置 DECSET 1007（alternate-scroll）——滚轮事件转为 ↑/↓ 按键传给应用，原生点击/拖拽选择不受影响。加 <code>--no-mouse</code> 可完全关闭。",
+      "在 auto/app 滚动模式下，Reasonix 会捕获鼠标滚轮事件，让原生 scrollback 无法滚动 TUI 内容的终端也能滚聊天。加 <code>--no-mouse</code> 可完全关闭。",
 
     "cp.title": "复制 / 粘贴",
     "cp.body":
@@ -114,12 +113,11 @@
     "cp.body.drag":
       "SSH / mosh / tmux 下，alt-screen 缓冲区会阻止终端把选区延伸到可视视口以外——alt-screen 上方根本没有 scrollback 可拖入。两种解决方式：",
     "cp.fix1":
-      "<strong><code>/copy</code></strong> — 在应用内打开 vim/tmux 风格的复制模式，把当前聊天快照到可导航的缓冲区；<code>y</code> 通过 OSC 52 复制到剪贴板（不支持 OSC 52 的终端会退到临时文件）。",
+      "<strong><code>/copy</code></strong> — 通过 OSC 52 复制最近一条 assistant 回复。用 <code>/copy all</code> 复制完整聊天，或 <code>/copy N</code> 复制最近 N 个序列化聊天项；内容过大时退到临时文件路径。",
     "cp.fix2":
       "<strong><code>--no-alt-screen</code></strong> — 改为渲染到 shell scrollback。拖拽选择恢复终端原生（聊天内容就是光标上方的真实行）。代价：窗口大小改变时可能出现重绘残影。",
-    "cp.h.copymode": "<code>/copy</code> — 复制模式快捷键",
-    "cp.body.osc":
-      "没有活动选区时按 <code>y</code> 只复制当前行。复制先走 OSC 52（通过 SSH、mosh、开了 <code>set -g set-clipboard on</code> 的 tmux 均可用）；超过 75 KB 的内容退到临时文件，路径在退出时打印。",
+    "cp.h.copymode": "<code>/copy</code>",
+    "cp.body.osc": "<code>/copy</code> 优先使用 OSC 52；大内容会退到临时文件。",
   };
 
   var DICT = { en: en, zh: zh };
diff --git a/docs/cli-reference.html b/docs/cli-reference.html
index 6de88325b..7fbbef186 100644
--- a/docs/cli-reference.html
+++ b/docs/cli-reference.html
@@ -302,7 +302,7 @@ <h3 data-i18n="sh.flags.title">Notable runtime flags (chat / code)</h3>
                 </tr>
                 <tr>
                   <td><code>--no-mouse</code></td>
-                  <td>Disable DECSET 1007 (alternate-scroll); wheel reverts to native terminal scroll</td>
+                  <td>Disable app-managed mouse tracking; wheel reverts to native terminal scroll</td>
                 </tr>
               </tbody>
             </table>
@@ -345,8 +345,8 @@ <h3 data-i18n="sl.h.chatops">Chat ops</h3>
                   <td>Abort the current model turn (typed alternative to Esc)</td>
                 </tr>
                 <tr>
-                  <td><code>/copy</code></td>
-                  <td>Open vim/tmux-style copy mode — <code>j</code>/<code>k</code> navigate, <code>v</code> select, <code>y</code> yank to clipboard. The right answer for SSH / mosh / tmux where drag-select can't extend past the viewport</td>
+                  <td><code>/copy [all|last|assistant|N]</code></td>
+                  <td>Copy the latest assistant response by default; <code>all</code> copies the whole chat and <code>N</code> copies the last N items</td>
                 </tr>
               </tbody>
             </table>
@@ -685,9 +685,9 @@ <h2 data-i18n="ms.title">Mouse</h2>
               </tbody>
             </table>
             <p data-i18n="ms.body">
-              Reasonix sets DECSET 1007 (alternate-scroll) only — wheel events translate to
-              ↑/↓ keypresses for the app, but native click/drag selection is left untouched.
-              Pass <code>--no-mouse</code> to opt out entirely.
+              In auto/app scroll mode, Reasonix captures mouse-wheel reports so chat history can
+              scroll inside terminals whose native scrollback does not move TUI content. Pass
+              <code>--no-mouse</code> to opt out entirely.
             </p>
           </section>
 
@@ -732,10 +732,10 @@ <h3 data-i18n="cp.h.drag">When drag-select doesn't work</h3>
             </p>
             <ol>
               <li data-i18n="cp.fix1">
-                <strong><code>/copy</code></strong> — open vim/tmux-style copy mode in-app.
-                Snapshots the current chat to a navigable buffer; <code>y</code> yanks to
-                clipboard via OSC 52 (with a temp-file fallback for terminals that don't
-                support it).
+                <strong><code>/copy</code></strong> — copy the latest assistant response through
+                OSC 52. Use <code>/copy all</code> for the full chat or <code>/copy N</code>
+                for the last N serialized chat items. Oversized content falls back to a temp
+                file path.
               </li>
               <li data-i18n="cp.fix2">
                 <strong><code>--no-alt-screen</code></strong> — render to shell scrollback
@@ -744,52 +744,6 @@ <h3 data-i18n="cp.h.drag">When drag-select doesn't work</h3>
                 resize.
               </li>
             </ol>
-
-            <h3 data-i18n="cp.h.copymode"><code>/copy</code> — copy mode keys</h3>
-            <table class="cmd-table">
-              <thead>
-                <tr>
-                  <th data-i18n="th.key">Key</th>
-                  <th data-i18n="th.what">What it does</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td><code>j</code> / <code>↓</code></td>
-                  <td>Cursor down one line</td>
-                </tr>
-                <tr>
-                  <td><code>k</code> / <code>↑</code></td>
-                  <td>Cursor up one line</td>
-                </tr>
-                <tr>
-                  <td><code>PgUp</code> / <code>PgDn</code></td>
-                  <td>Page up / down</td>
-                </tr>
-                <tr>
-                  <td><code>g</code> / <code>G</code></td>
-                  <td>Jump to top / bottom</td>
-                </tr>
-                <tr>
-                  <td><code>v</code></td>
-                  <td>Start (or cancel) selection at the cursor</td>
-                </tr>
-                <tr>
-                  <td><code>y</code> / <code>Enter</code></td>
-                  <td>Yank selection to clipboard, exit</td>
-                </tr>
-                <tr>
-                  <td><code>q</code> / <code>Esc</code></td>
-                  <td>Quit without yanking</td>
-                </tr>
-              </tbody>
-            </table>
-            <p data-i18n="cp.body.osc">
-              <code>y</code> with no active selection yanks just the current line. The yank
-              goes through OSC 52 first (works through SSH, mosh, tmux with
-              <code>set -g set-clipboard on</code>); content larger than 75 KB falls back to
-              a temp file whose path is printed on exit.
-            </p>
           </section>
         </article>
       </div>
diff --git a/src/cli/commands/chat.tsx b/src/cli/commands/chat.tsx
index 7bb36c3e8..278bccf05 100644
--- a/src/cli/commands/chat.tsx
+++ b/src/cli/commands/chat.tsx
@@ -314,11 +314,14 @@ export async function chatCommand(opts: ChatOptions): Promise<void> {
   const mcpSpecs = [...requestedSpecs];
   const mcpServers: McpServerSummary[] = [];
   const cfg = readConfig();
-  const historyScrollMode = resolveHistoryScrollMode({
-    configured: loadHistoryScrollMode(),
-    env: process.env,
-    platform: process.platform,
-  });
+  const historyScrollMode =
+    opts.noMouse || cfg.mouseTracking === false
+      ? "native"
+      : resolveHistoryScrollMode({
+          configured: loadHistoryScrollMode(),
+          env: process.env,
+          platform: process.platform,
+        });
   const startupInfoHints: string[] = [];
   const hasAnyMcp = normalizeMcpConfig(cfg).length > 0 || mcpSpecs.length > 0;
   if (cfg.setupCompleted === true && !hasAnyMcp) {
@@ -424,10 +427,10 @@ export async function chatCommand(opts: ChatOptions): Promise<void> {
   // path so N cards don't accumulate N native stdout listeners.
   installResizeBroadcaster();
 
-  // Wheel scrolling. Opt-out via `mouseTracking: false` for users who
-  // prefer native drag-select copy (Shift+drag still selects with mouse
-  // mode on in most terminals). exit hooks cover hard kills so the
-  // sequence doesn't leak into the parent shell.
+  // Wheel scrolling. Opt-out via `--no-mouse` / `mouseTracking: false` also
+  // forces native history mode so the terminal, not CardStream, owns wheel
+  // movement. Exit hooks cover hard kills so the sequence doesn't leak into
+  // the parent shell.
   if (!opts.noMouse && cfg.mouseTracking !== false) {
     enableMouseMode(historyScrollMode);
     process.once("exit", disableMouseMode);
diff --git a/src/cli/ui/App.tsx b/src/cli/ui/App.tsx
index 5d5c6daec..80d72c94c 100644
--- a/src/cli/ui/App.tsx
+++ b/src/cli/ui/App.tsx
@@ -488,6 +488,7 @@ function AppInner({
   markPhase("app_inner_start");
   const log = useScrollback();
   const agentStore = useAgentStore();
+  const getCardsForSlash = useCallback(() => agentStore.getState().cards, [agentStore]);
   const hasConversation = useAgentState((s) =>
     s.cards.some((c) => c.kind === "user" || c.kind === "streaming"),
   );
@@ -3083,6 +3084,7 @@ function AppInner({
               footer: args.footer,
               oneTime: false,
             }),
+          getCards: getCardsForSlash,
           dispatch: agentStore.dispatch,
           markPlanStepDone: (stepId: string) => {
             const steps = planStepsRef.current;
@@ -3678,6 +3680,7 @@ function AppInner({
       startDashboard,
       stopDashboard,
       getDashboardUrl,
+      getCardsForSlash,
       broadcastDashboardEvent,
       touchedPaths,
       model,
diff --git a/src/cli/ui/copy-history.ts b/src/cli/ui/copy-history.ts
new file mode 100644
index 000000000..57a50bea4
--- /dev/null
+++ b/src/cli/ui/copy-history.ts
@@ -0,0 +1,211 @@
+import type { Card } from "./state/cards.js";
+
+export type CopyHistoryMode =
+  | { kind: "latest-assistant" }
+  | { kind: "all" }
+  | { kind: "last"; count: number };
+
+export interface CopyHistorySelection {
+  label: string;
+  text: string;
+}
+
+export function parseCopyHistoryArgs(args: readonly string[]): CopyHistoryMode | { error: string } {
+  if (args.length === 0) return { kind: "latest-assistant" };
+  if (args.length === 1) {
+    const raw = args[0]!.toLowerCase();
+    if (raw === "last" || raw === "assistant" || raw === "reply" || raw === "response") {
+      return { kind: "latest-assistant" };
+    }
+    if (raw === "all") return { kind: "all" };
+    if (/^\d+$/.test(raw)) {
+      const count = Number.parseInt(raw, 10);
+      if (count > 0) return { kind: "last", count };
+    }
+  }
+  return { error: "usage" };
+}
+
+export function selectCopyHistory(
+  cards: ReadonlyArray<Card>,
+  mode: CopyHistoryMode = { kind: "latest-assistant" },
+): CopyHistorySelection | null {
+  if (mode.kind === "latest-assistant") {
+    for (let i = cards.length - 1; i >= 0; i--) {
+      const card = cards[i]!;
+      if (card.kind !== "streaming") continue;
+      const text = normalize(card.text);
+      if (text) return { label: "last assistant response", text };
+    }
+    return null;
+  }
+
+  const entries = cards.flatMap(cardToCopyEntries).filter((entry) => entry.text.length > 0);
+  const selected = mode.kind === "all" ? entries : entries.slice(-mode.count);
+  if (selected.length === 0) return null;
+  return {
+    label: mode.kind === "all" ? "conversation" : `last ${selected.length} item(s)`,
+    text: selected.map((entry) => `${entry.label}:\n${entry.text}`).join("\n\n"),
+  };
+}
+
+interface CopyEntry {
+  label: string;
+  text: string;
+}
+
+function cardToCopyEntries(card: Card): CopyEntry[] {
+  switch (card.kind) {
+    case "user":
+      return [{ label: "User", text: normalize(card.text) }];
+    case "streaming":
+      return [{ label: "Assistant", text: normalize(card.text) }];
+    case "tool": {
+      const args = card.args === undefined ? "" : formatJson(card.args);
+      const body = [args ? `Args:\n${args}` : "", card.output ? `Output:\n${card.output}` : ""]
+        .filter(Boolean)
+        .join("\n\n");
+      return [{ label: `Tool ${card.name}`, text: normalize(body) }];
+    }
+    case "reasoning":
+      return [{ label: "Reasoning", text: normalize(card.text) }];
+    case "live":
+      return [
+        { label: "Info", text: normalize(card.meta ? `${card.text}\n${card.meta}` : card.text) },
+      ];
+    case "warn":
+      return [
+        {
+          label: "Warning",
+          text: normalize([card.title, card.message, card.detail].filter(Boolean).join("\n")),
+        },
+      ];
+    case "error":
+      return [
+        {
+          label: "Error",
+          text: normalize([card.title, card.message, card.stack].filter(Boolean).join("\n")),
+        },
+      ];
+    case "plan":
+      return [
+        {
+          label: "Plan",
+          text: normalize(
+            [card.title, ...card.steps.map((step) => `- [${step.status}] ${step.title}`)].join(
+              "\n",
+            ),
+          ),
+        },
+      ];
+    case "task":
+      return [
+        {
+          label: "Task",
+          text: normalize(
+            [
+              `${card.title} (${card.status})`,
+              ...card.steps.map((step) => `- [${step.status}] ${step.title}`),
+            ].join("\n"),
+          ),
+        },
+      ];
+    case "diff":
+      return [
+        {
+          label: `Diff ${card.file}`,
+          text: normalize(
+            card.hunks
+              .map((hunk) =>
+                [
+                  hunk.header,
+                  ...hunk.lines.map(
+                    (line) =>
+                      `${line.kind === "add" ? "+" : line.kind === "del" ? "-" : " "}${line.text}`,
+                  ),
+                ].join("\n"),
+              )
+              .join("\n\n"),
+          ),
+        },
+      ];
+    case "usage":
+      return [
+        {
+          label: "Usage",
+          text: normalize(
+            `turn ${card.turn}: prompt ${card.tokens.prompt}, reasoning ${card.tokens.reason}, output ${card.tokens.output}, cost $${card.cost}`,
+          ),
+        },
+      ];
+    case "memory":
+      return [
+        {
+          label: "Memory",
+          text: normalize(
+            card.entries.map((entry) => `- ${entry.category}: ${entry.summary}`).join("\n"),
+          ),
+        },
+      ];
+    case "subagent":
+      return [
+        {
+          label: `Subagent ${card.name}`,
+          text: normalize(
+            [
+              `${card.task} (${card.status})`,
+              ...card.children
+                .flatMap(cardToCopyEntries)
+                .map((entry) => `${entry.label}:\n${entry.text}`),
+            ].join("\n\n"),
+          ),
+        },
+      ];
+    case "search":
+      return [
+        {
+          label: "Search",
+          text: normalize(
+            [
+              `query: ${card.query}`,
+              ...card.hits.map((hit) => `${hit.file}:${hit.line}: ${hit.preview}`),
+            ].join("\n"),
+          ),
+        },
+      ];
+    case "ctx":
+      return [{ label: "Context", text: normalize(card.text) }];
+    case "tip":
+      return [
+        {
+          label: "Tip",
+          text: normalize(
+            [
+              card.topic,
+              ...card.sections.flatMap((section) => [
+                section.title ? `[${section.title}]` : "",
+                ...section.rows.map((row) => `${row.key}\t${row.text}`),
+              ]),
+              card.footer ?? "",
+            ].join("\n"),
+          ),
+        },
+      ];
+    case "compaction":
+      return [{ label: "Compaction", text: normalize(card.summary) }];
+    default:
+      return [];
+  }
+}
+
+function normalize(text: string): string {
+  return text.trim();
+}
+
+function formatJson(value: unknown): string {
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+}
diff --git a/src/cli/ui/history-scroll-mode.ts b/src/cli/ui/history-scroll-mode.ts
index b7af60b3c..8df54b861 100644
--- a/src/cli/ui/history-scroll-mode.ts
+++ b/src/cli/ui/history-scroll-mode.ts
@@ -15,11 +15,12 @@ export function resolveHistoryScrollMode({
 }: ResolveHistoryScrollModeInput = {}): ResolvedHistoryScrollMode {
   if (configured === "native") return "native";
   if (configured === "app") return "app";
+  if ((env.TERM_PROGRAM ?? "").toLowerCase() === "apple_terminal") return "native";
   if (isKnownJumpProneTerminal(env)) return "app";
   if (platform === "win32" && env.TERM_PROGRAM === undefined && env.MSYSTEM === undefined) {
     return "native";
   }
-  return "native";
+  return "app";
 }
 
 function isKnownJumpProneTerminal(env: NodeJS.ProcessEnv | Record<string, string | undefined>) {
diff --git a/src/cli/ui/mouse-mode.ts b/src/cli/ui/mouse-mode.ts
index adbee93ea..2af9cf245 100644
--- a/src/cli/ui/mouse-mode.ts
+++ b/src/cli/ui/mouse-mode.ts
@@ -1,8 +1,8 @@
-// Reasonix is append-only now: the terminal owns scrollback, copy, and the
-// mouse wheel. On most terminals, startup emits disables for common
-// mouse-capture modes so stale state from a prior crashed TUI can't keep
-// eating wheel events. Apple Terminal has had native crashes in its renderer
-// after receiving these private mouse-mode toggles, so its default is silent.
+// In native history mode the terminal owns scrollback, copy, and the mouse
+// wheel. In app history mode Reasonix captures wheel reports so CardStream can
+// scroll consistently in terminals whose native scrollback does not move TUI
+// content. Apple Terminal has had native crashes in its renderer after
+// receiving these private mouse-mode toggles, so its default is silent.
 // REASONIX_MOUSE_MODE remains an escape hatch.
 
 type Mode = "alternate-scroll" | "sgr" | "off" | "apple-terminal-off";
diff --git a/src/cli/ui/slash/commands.ts b/src/cli/ui/slash/commands.ts
index 15f1a12aa..929580818 100644
--- a/src/cli/ui/slash/commands.ts
+++ b/src/cli/ui/slash/commands.ts
@@ -63,6 +63,12 @@ export const SLASH_COMMANDS: readonly SlashCommandSpec[] = [
     group: "chat",
     summary: "abort the current model turn (typed alternative to Esc)",
   },
+  {
+    cmd: "copy",
+    group: "chat",
+    argsHint: "[all|last|assistant|N]",
+    summary: "copy the latest assistant response, the whole conversation, or the last N items",
+  },
   {
     cmd: "btw",
     group: "chat",
diff --git a/src/cli/ui/slash/handlers/basic.ts b/src/cli/ui/slash/handlers/basic.ts
index 53cdcafaa..c1bcba019 100644
--- a/src/cli/ui/slash/handlers/basic.ts
+++ b/src/cli/ui/slash/handlers/basic.ts
@@ -1,6 +1,8 @@
 import { wrapToCells } from "@/cli/ui/text-width.js";
 import { t, tObj } from "@/i18n/index.js";
 import { VERSION } from "@/version.js";
+import { writeClipboard } from "../../clipboard.js";
+import { parseCopyHistoryArgs, selectCopyHistory } from "../../copy-history.js";
 import { formatDuration, formatLoopStatus, parseLoopCommand } from "../../loop.js";
 import { SLASH_COMMANDS, SLASH_GROUP_ORDER, orderSlashCommandsByGroup } from "../commands.js";
 import type { SlashHandler } from "../dispatch.js";
@@ -151,6 +153,27 @@ const keys: SlashHandler = (_args, _loop, ctx) => {
   return {};
 };
 
+const copy: SlashHandler = (args, _loop, ctx) => {
+  if (!ctx.getCards) return { info: t("handlers.basic.copyNeedsTui") };
+  const mode = parseCopyHistoryArgs(args);
+  if ("error" in mode) return { info: t("handlers.basic.copyUsage") };
+  const selection = selectCopyHistory(ctx.getCards(), mode);
+  if (!selection) return { info: t("handlers.basic.copyNothing") };
+  const result = writeClipboard(selection.text);
+  if (!result.osc52 && result.filePath) {
+    return {
+      info: t("handlers.basic.copySavedFile", {
+        label: selection.label,
+        chars: result.size,
+        path: result.filePath,
+      }),
+    };
+  }
+  return {
+    info: t("handlers.basic.copyDone", { label: selection.label, chars: result.size }),
+  };
+};
+
 const about: SlashHandler = () => {
   const lines = [
     t("handlers.basic.aboutHeader", { version: VERSION }),
@@ -169,5 +192,6 @@ export const handlers: Record<string, SlashHandler> = {
   retry,
   loop,
   keys,
+  copy,
   about,
 };
diff --git a/src/cli/ui/slash/types.ts b/src/cli/ui/slash/types.ts
index ff4b58d0c..deed1ef29 100644
--- a/src/cli/ui/slash/types.ts
+++ b/src/cli/ui/slash/types.ts
@@ -3,6 +3,7 @@ import type { EditMode } from "../../../config.js";
 import type { McpServerSummary } from "../../../mcp/summary.js";
 import type { JobRegistry } from "../../../tools/jobs.js";
 import type { PlanStep } from "../../../tools/plan.js";
+import type { Card } from "../state/cards.js";
 import type { CodeUndoOutput } from "../undo-context.js";
 
 export type { McpServerSummary } from "../../../mcp/summary.js";
@@ -111,6 +112,8 @@ export interface SlashContext {
     }>;
     footer?: string;
   }) => void;
+  /** Current TUI scrollback cards; used by `/copy`. */
+  getCards?: () => ReadonlyArray<Card>;
   dispatch?: (event: import("../state/events.js").AgentEvent) => void;
   setPlanMode?: (on: boolean, source?: PlanModeToggleSource) => void;
   /** Manual escape valve when the model forgot to call `mark_step_complete` — used by `/plans done <id>`. */
diff --git a/src/cli/ui/stdin-reader.ts b/src/cli/ui/stdin-reader.ts
index e4cb70e53..399909a58 100644
--- a/src/cli/ui/stdin-reader.ts
+++ b/src/cli/ui/stdin-reader.ts
@@ -131,8 +131,12 @@ function decodeSgrMouseBody(body: string): KeyEvent | null {
   if (!Number.isFinite(btn) || !Number.isFinite(col) || !Number.isFinite(row)) return null;
   const tail = m[4]!;
   if (tail === "m") return { input: "", mouseRelease: true, mouseRow: row, mouseCol: col };
-  if (btn === 64) return { input: "", mouseScrollUp: true, mouseRow: row, mouseCol: col };
-  if (btn === 65) return { input: "", mouseScrollDown: true, mouseRow: row, mouseCol: col };
+  const wheelButton = btn & 0x43;
+  if (wheelButton === 64 || wheelButton === 65) {
+    return wheelButton === 64
+      ? { input: "", mouseScrollUp: true, mouseRow: row, mouseCol: col }
+      : { input: "", mouseScrollDown: true, mouseRow: row, mouseCol: col };
+  }
   if (btn === 0) return { input: "", mouseClick: true, mouseRow: row, mouseCol: col };
   if (btn === 32) return { input: "", mouseDrag: true, mouseRow: row, mouseCol: col };
   return null;
diff --git a/src/config.ts b/src/config.ts
index b73b6f100..1df81bf6b 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -238,11 +238,11 @@ export interface ReasonixConfig {
   /** Brave Search API key. Falls back to BRAVE_SEARCH_API_KEY env var. Free 2000/mo signup at https://brave.com/search/api/ */
   braveApiKey?: string;
 
-  /** TUI mouse-wheel scrolling via SGR mouse tracking. Default true. Set false to fall back to native terminal drag-select for copy (then wheel is terminal-dependent — most terminals translate wheel→arrow in alt-screen, some don't). */
+  /** TUI mouse-wheel scrolling via app-managed mouse tracking when historyScrollMode resolves to "app". Default true. Set false to leave the wheel entirely to the terminal. */
   mouseTracking?: boolean;
   /** Rows scrolled per single SGR mouse-wheel report. Default 1 — most terminals emit 2-5 reports per physical notch, so 1 already produces 2-5 rows per notch (#1419). Bump to 3-5 only if your terminal emits one report per notch and scrolling feels slow (#1494). Clamped to [1, 10]. */
   mouseWheelRows?: number;
-  /** Chat-history scrolling: "native" leaves terminal scrollback in charge; "app" captures wheel/PgUp/PgDn/End inside the TUI; "auto" enables app mode for terminals with known jumpy native scrollback. */
+  /** Chat-history scrolling: "native" leaves terminal scrollback in charge; "app" captures wheel/PgUp/PgDn/End inside the TUI; "auto" prefers app mode except terminals where native scrollback is safer. */
   historyScrollMode?: HistoryScrollMode;
   /** Diff display mode for edit_file / write_file / multi_edit results in CLI. */
   diffDisplay?: DiffDisplay;
diff --git a/src/i18n/EN.ts b/src/i18n/EN.ts
index fe3a50648..97d85b2d7 100644
--- a/src/i18n/EN.ts
+++ b/src/i18n/EN.ts
@@ -120,6 +120,10 @@ export const EN: TranslationSchema = {
               text: "your terminal's native menu (paste / copy on Windows Terminal etc.)",
             },
             { key: "wheel", text: "scrolls chat history (works on web/cloud/SSH terminals too)" },
+            {
+              key: "/copy",
+              text: "copy the latest assistant response; `/copy all` copies the chat",
+            },
             {
               key: "↑ / ↓",
               text: "prompt history (or per-line cursor in a multi-line draft) — Ctrl+P / Ctrl+N alias",
@@ -175,6 +179,10 @@ export const EN: TranslationSchema = {
               text: "Ctrl+Shift+C (Win/Linux) · Cmd+C (macOS) — or auto-copy-on-select if your terminal does it",
             },
             { key: "paste", text: "Ctrl+V or Ctrl+Shift+V (Win/Linux) · Cmd+V (macOS)" },
+            {
+              key: "/copy",
+              text: "copy latest assistant response · `/copy all` for the full chat · `/copy N` for last N items",
+            },
             {
               key: "bracketed paste",
               text: "multi-line pastes stay one block — no auto-submit on intermediate newlines",
@@ -191,7 +199,7 @@ export const EN: TranslationSchema = {
         },
       ],
       footer:
-        "Wheel scrolls chat on most terminals (web/cloud/SSH included) — SGR mouse tracking is on by default and stays out of the way of native drag-select and right-click. Pass --no-mouse to opt out.",
+        "Wheel scrolls chat on most terminals (web/cloud/SSH included). If your terminal traps selection while mouse tracking is active, use /copy or pass --no-mouse.",
     },
     tipShownOnce: "shown once",
     modelOverride: "override the default model",
@@ -357,6 +365,11 @@ export const EN: TranslationSchema = {
     feedback: { description: "open a GitHub issue with diagnostic info copied to clipboard" },
     about: { description: "project info — version, website, repo, license" },
     keys: { description: "keyboard + mouse + copy/paste reference" },
+    copy: {
+      description:
+        "copy the latest assistant response, the whole conversation (`all`), or the last N items",
+      argsHint: "[all|last|assistant|N]",
+    },
     plans: { description: "list this session's active + archived plans, newest first" },
     replay: {
       description: "load an archived plan as a read-only Time Travel snapshot (default: newest)",
@@ -856,6 +869,11 @@ export const EN: TranslationSchema = {
       loopStarted:
         '▸ loop started — re-submitting "{prompt}" every {duration}. Type anything (or /loop stop) to cancel.',
       keysNeedsTui: "/keys needs a TUI context (postKeys wired).",
+      copyNeedsTui: "/copy is only available in the interactive TUI.",
+      copyUsage: "usage: /copy [all|last|assistant|N]",
+      copyNothing: "nothing to copy yet.",
+      copyDone: "▸ copied {label} to clipboard ({chars} chars).",
+      copySavedFile: "▸ {label} is too large for terminal clipboard; saved {chars} chars to {path}",
       aboutHeader: "Reasonix v{version} — a cache-first DeepSeek coding agent",
       aboutWebsiteLabel: "Website",
       aboutRepoLabel: "GitHub ",
@@ -1937,7 +1955,7 @@ export const EN: TranslationSchema = {
     scrollAbovePlural: " \u2191 {scroll} / {max} rows above",
     scrollMore: " \u2014 {remaining} more",
     scrollPgUp: " \u00b7 PgUp / wheel",
-    scrollCopy: " \u00b7 /copy enters copy mode",
+    scrollCopy: " \u00b7 /copy copies reply",
   },
   slashArgPicker: {
     noMatch: 'no match for "{partial}"',
diff --git a/src/i18n/JA.ts b/src/i18n/JA.ts
index 91c4fd830..295ca2f85 100644
--- a/src/i18n/JA.ts
+++ b/src/i18n/JA.ts
@@ -1985,7 +1985,7 @@ export const JA: TranslationSchema = {
     scrollAbovePlural: " \u2191 {scroll} / {max} 行上",
     scrollMore: " \u2014 さらに {remaining} 件",
     scrollPgUp: " \u00b7 PgUp / ホイール",
-    scrollCopy: " \u00b7 /copy でコピーモード",
+    scrollCopy: " \u00b7 /copy で返信をコピー",
   },
   slashArgPicker: {
     ...EN.slashArgPicker,
diff --git a/src/i18n/de.ts b/src/i18n/de.ts
index fa7e57e13..7a7f7ee95 100644
--- a/src/i18n/de.ts
+++ b/src/i18n/de.ts
@@ -1889,7 +1889,7 @@ export const de: TranslationSchema = {
     scrollAbovePlural: " ↑ {scroll} / {max} Zeilen darüber",
     scrollMore: " — {remaining} weitere",
     scrollPgUp: " · Bild↑ / Mausrad",
-    scrollCopy: " · /copy aktiviert Kopiermodus",
+    scrollCopy: " · /copy kopiert Antwort",
   },
   slashArgPicker: {
     ...EN.slashArgPicker,
diff --git a/src/i18n/zh-CN.ts b/src/i18n/zh-CN.ts
index f3f03151e..889a8dd9f 100644
--- a/src/i18n/zh-CN.ts
+++ b/src/i18n/zh-CN.ts
@@ -116,6 +116,7 @@ export const zhCN: TranslationSchema = {
               text: "终端原生菜单（Windows Terminal 等的复制 / 粘贴）",
             },
             { key: "滚轮", text: "滚动聊天记录（Web / 云端 / SSH 终端也能用）" },
+            { key: "/copy", text: "复制最近一条 assistant 回复；`/copy all` 复制整个聊天" },
             {
               key: "↑ / ↓",
               text: "输入历史（多行草稿时按行移动光标）— Ctrl+P / Ctrl+N 同义",
@@ -168,6 +169,10 @@ export const zhCN: TranslationSchema = {
               text: "Ctrl+Shift+C（Win/Linux）· Cmd+C（macOS）— 或选中即复制（看终端设置）",
             },
             { key: "粘贴", text: "Ctrl+V 或 Ctrl+Shift+V（Win/Linux）· Cmd+V（macOS）" },
+            {
+              key: "/copy",
+              text: "复制最近回复 · `/copy all` 复制完整聊天 · `/copy N` 复制最近 N 项",
+            },
             {
               key: "bracketed paste",
               text: "多行粘贴整体进入 — 中间换行不会触发提交",
@@ -184,7 +189,7 @@ export const zhCN: TranslationSchema = {
         },
       ],
       footer:
-        "滚轮在大多数终端（含 Web / 云端 / SSH）都能滚聊天 — 默认开启 SGR 鼠标跟踪，但不会影响终端原生拖选和右键菜单。直接拖动选中文本无需 Shift。传入 --no-mouse 可关闭。",
+        "滚轮在大多数终端（含 Web / 云端 / SSH）都能滚聊天。如果鼠标跟踪让终端选区受限，可用 /copy 或传入 --no-mouse。",
     },
     tipShownOnce: "仅显示一次",
     modelOverride: "覆盖默认模型",
@@ -335,6 +340,10 @@ export const zhCN: TranslationSchema = {
       argsHint: "[tokens]",
     },
     keys: { description: "键盘 + 鼠标 + 复制粘贴参考" },
+    copy: {
+      description: "复制最近一条 assistant 回复、完整聊天（all），或最近 N 项",
+      argsHint: "[all|last|assistant|N]",
+    },
     cwd: {
       description:
         "切换工作区根目录 — 重新指向文件/Shell/记忆工具，重载项目 hooks，刷新 @ 引用遍历器",
@@ -813,6 +822,11 @@ export const zhCN: TranslationSchema = {
       loopStarted:
         '▸ 循环已启动 — 每 {duration} 重新提交 "{prompt}"。输入任何内容（或 /loop stop）取消。',
       keysNeedsTui: "/keys 需要 TUI 上下文（postKeys 已连接）。",
+      copyNeedsTui: "/copy 仅在交互式 TUI 中可用。",
+      copyUsage: "用法：/copy [all|last|assistant|N]",
+      copyNothing: "还没有可复制的内容。",
+      copyDone: "▸ 已复制 {label} 到剪贴板（{chars} 字符）。",
+      copySavedFile: "▸ {label} 超出终端剪贴板限制；已将 {chars} 字符保存到 {path}",
       aboutHeader: "Reasonix v{version} — 缓存优先的 DeepSeek 编码代理",
       aboutWebsiteLabel: "官网",
       aboutRepoLabel: "仓库",
@@ -1830,7 +1844,7 @@ export const zhCN: TranslationSchema = {
     scrollAbovePlural: " \u2191 {scroll}/{max} 行",
     scrollMore: " \u2014 还有 {remaining} 行",
     scrollPgUp: " \u00b7 PgUp/\u6eda\u8f6e",
-    scrollCopy: " \u00b7 /copy \u8fdb\u5165\u590d\u5236\u6a21\u5f0f",
+    scrollCopy: " \u00b7 /copy \u590d\u5236\u56de\u590d",
   },
   slashArgPicker: {
     noMatch: '\u6ca1\u6709\u5339\u914d "{partial}"',
diff --git a/tests/chat-scroll-wheel.test.ts b/tests/chat-scroll-wheel.test.ts
index 57f7846ba..bc8d5024f 100644
--- a/tests/chat-scroll-wheel.test.ts
+++ b/tests/chat-scroll-wheel.test.ts
@@ -94,13 +94,31 @@ describe("history scroll mode resolution", () => {
     );
   });
 
-  it("keeps native scrollback for unknown terminals in auto mode", () => {
+  it("prefers app-managed scrolling for unknown terminals in auto mode", () => {
     expect(
       resolveHistoryScrollMode({
         configured: "auto",
         env: { TERM: "xterm-256color" },
         platform: "linux",
       }),
+    ).toBe("app");
+  });
+
+  it("keeps native scrollback for terminals where app mouse tracking is risky", () => {
+    expect(
+      resolveHistoryScrollMode({
+        configured: "auto",
+        env: { TERM_PROGRAM: "Apple_Terminal" },
+        platform: "darwin",
+      }),
+    ).toBe("native");
+
+    expect(
+      resolveHistoryScrollMode({
+        configured: "auto",
+        env: {},
+        platform: "win32",
+      }),
     ).toBe("native");
   });
 });
diff --git a/tests/copy-history.test.ts b/tests/copy-history.test.ts
new file mode 100644
index 000000000..1bdfc6bb6
--- /dev/null
+++ b/tests/copy-history.test.ts
@@ -0,0 +1,77 @@
+import { describe, expect, it } from "vitest";
+import {
+  type CopyHistoryMode,
+  parseCopyHistoryArgs,
+  selectCopyHistory,
+} from "../src/cli/ui/copy-history.js";
+import type { Card } from "../src/cli/ui/state/cards.js";
+
+const ts = 1;
+
+function user(id: string, text: string): Card {
+  return { kind: "user", id, ts, text };
+}
+
+function assistant(id: string, text: string): Card {
+  return { kind: "streaming", id, ts, text, done: true };
+}
+
+function tool(id: string, name: string, output: string): Card {
+  return { kind: "tool", id, ts, name, args: { ok: true }, output, done: true, elapsedMs: 12 };
+}
+
+describe("copy history selection", () => {
+  it("defaults to the latest assistant response", () => {
+    const selected = selectCopyHistory([
+      user("u1", "hello"),
+      assistant("a1", "first"),
+      assistant("a2", "second"),
+    ]);
+
+    expect(selected).toEqual({ label: "last assistant response", text: "second" });
+  });
+
+  it("copies the whole conversation when requested", () => {
+    const selected = selectCopyHistory(
+      [user("u1", "hello"), assistant("a1", "hi"), tool("t1", "run_command", "done")],
+      { kind: "all" },
+    );
+
+    expect(selected?.text).toContain("User:\nhello");
+    expect(selected?.text).toContain("Assistant:\nhi");
+    expect(selected?.text).toContain("Tool run_command:");
+    expect(selected?.text).toContain("Output:\ndone");
+  });
+
+  it("copies the last N serializable entries", () => {
+    const selected = selectCopyHistory(
+      [user("u1", "one"), assistant("a1", "two"), user("u2", "three")],
+      { kind: "last", count: 2 },
+    );
+
+    expect(selected?.label).toBe("last 2 item(s)");
+    expect(selected?.text).not.toContain("one");
+    expect(selected?.text).toContain("Assistant:\ntwo");
+    expect(selected?.text).toContain("User:\nthree");
+  });
+
+  it("returns null when there is no matching content", () => {
+    expect(selectCopyHistory([], { kind: "latest-assistant" })).toBeNull();
+  });
+});
+
+describe("parseCopyHistoryArgs", () => {
+  it.each([
+    [[], { kind: "latest-assistant" }],
+    [["all"], { kind: "all" }],
+    [["assistant"], { kind: "latest-assistant" }],
+    [["3"], { kind: "last", count: 3 }],
+  ] as Array<[string[], CopyHistoryMode]>)("parses %j", (args, expected) => {
+    expect(parseCopyHistoryArgs(args)).toEqual(expected);
+  });
+
+  it("rejects unsupported forms", () => {
+    expect(parseCopyHistoryArgs(["0"])).toEqual({ error: "usage" });
+    expect(parseCopyHistoryArgs(["all", "extra"])).toEqual({ error: "usage" });
+  });
+});
diff --git a/tests/slash.test.ts b/tests/slash.test.ts
index 44e820bcf..efd61b808 100644
--- a/tests/slash.test.ts
+++ b/tests/slash.test.ts
@@ -520,6 +520,48 @@ describe("handleSlash", () => {
     expect(r.info).toMatch(/\/retry/);
   });
 
+  it("/copy copies the latest assistant response through OSC 52", () => {
+    const write = vi.spyOn(process.stdout, "write").mockImplementation(() => true);
+    try {
+      const r = handleSlash("copy", [], makeLoop(), {
+        getCards: () => [
+          { kind: "user", id: "u1", ts: 1, text: "hello" },
+          { kind: "streaming", id: "a1", ts: 2, text: "copy me", done: true },
+        ],
+      });
+
+      expect(r.info).toContain("copied");
+      const expectedB64 = Buffer.from("copy me", "utf8").toString("base64");
+      expect(write).toHaveBeenCalledWith(`\x1b]52;c;${expectedB64}\x1b\\`);
+    } finally {
+      write.mockRestore();
+    }
+  });
+
+  it("/copy all serializes the conversation", () => {
+    const write = vi.spyOn(process.stdout, "write").mockImplementation(() => true);
+    try {
+      const r = handleSlash("copy", ["all"], makeLoop(), {
+        getCards: () => [
+          { kind: "user", id: "u1", ts: 1, text: "hello" },
+          { kind: "streaming", id: "a1", ts: 2, text: "hi back", done: true },
+        ],
+      });
+
+      expect(r.info).toContain("copied");
+      const expected = "User:\nhello\n\nAssistant:\nhi back";
+      const expectedB64 = Buffer.from(expected, "utf8").toString("base64");
+      expect(write).toHaveBeenCalledWith(`\x1b]52;c;${expectedB64}\x1b\\`);
+    } finally {
+      write.mockRestore();
+    }
+  });
+
+  it("/copy requires TUI cards", () => {
+    const r = handleSlash("copy", [], makeLoop());
+    expect(r.info).toMatch(/interactive TUI/);
+  });
+
   describe("detectSlashArgContext", () => {
     it("returns null before the user commits to a slash name", () => {
       expect(detectSlashArgContext("/pr")).toBeNull();
@@ -684,6 +726,7 @@ describe("handleSlash", () => {
       "compact",
       "sessions",
       "new",
+      "copy",
       "exit",
       "apply",
       "discard",
@@ -700,7 +743,7 @@ describe("handleSlash", () => {
     // Case-insensitive.
     expect(suggestSlashCommands("HE").map((s) => s.cmd)).toEqual(["help"]);
     // Empty prefix returns the full non-advanced release list, including code commands.
-    expect(suggestSlashCommands("", true)).toHaveLength(48);
+    expect(suggestSlashCommands("", true)).toHaveLength(49);
     expect(suggestSlashCommands("", true).map((s) => s.cmd)).toContain("logs");
     expect(suggestSlashCommands("", true).map((s) => s.cmd)).toContain("language");
     expect(suggestSlashCommands("", true).map((s) => s.cmd)).toContain("weixin");
diff --git a/tests/stdin-reader.test.ts b/tests/stdin-reader.test.ts
index 613a0ba58..7288abfe4 100644
--- a/tests/stdin-reader.test.ts
+++ b/tests/stdin-reader.test.ts
@@ -391,6 +391,18 @@ describe("StdinReader — SGR mouse reports (issue #867)", () => {
     expect(events).toEqual([{ input: "", mouseScrollDown: true, mouseRow: 5, mouseCol: 10 }]);
   });
 
+  it("decodes modified wheel reports as scroll events", () => {
+    const { reader, events } = setup();
+    reader.feed("\x1b[<68;10;5M");
+    reader.feed("\x1b[<69;11;5M");
+    reader.feed("\x1b[<80;12;5M");
+    expect(events).toEqual([
+      { input: "", mouseScrollUp: true, mouseRow: 5, mouseCol: 10 },
+      { input: "", mouseScrollDown: true, mouseRow: 5, mouseCol: 11 },
+      { input: "", mouseScrollUp: true, mouseRow: 5, mouseCol: 12 },
+    ]);
+  });
+
   it("dispatches left-click press + release", () => {
     const { reader, events } = setup();
     reader.feed("\x1b[<0;3;7M");
diff --git a/tests/ui-slash-suggestions.test.tsx b/tests/ui-slash-suggestions.test.tsx
index 3afb18021..5a67379fb 100644
--- a/tests/ui-slash-suggestions.test.tsx
+++ b/tests/ui-slash-suggestions.test.tsx
@@ -86,7 +86,7 @@ describe("SlashSuggestions", () => {
     );
   });
 
-  it("renders the bare slash release command surface as 48 total commands", () => {
+  it("renders the bare slash release command surface as 49 total commands", () => {
     const matches = suggestSlashCommands("", true);
     const names = matches.map((spec) => spec.cmd);
     const { lastFrame, unmount } = render(
@@ -95,13 +95,13 @@ describe("SlashSuggestions", () => {
     const frame = lastFrame() ?? "";
     unmount();
 
-    expect(matches).toHaveLength(48);
+    expect(matches).toHaveLength(49);
     expect(names).toContain("language");
     expect(names).toContain("weixin");
     expect(names).toContain("btw");
     expect(names).toContain("about");
     expect(countAdvancedCommands(true)).toBe(10);
-    expect(frame).toContain("48 commands");
+    expect(frame).toContain("49 commands");
     expect(frame).toContain("+ 10 advanced");
   });
 

From b8c91b0e99a7560d9a34cedb2d0821e97b4e5fcf Mon Sep 17 00:00:00 2001
From: Sivan <liuxw96@foxmail.com>
Date: Fri, 29 May 2026 19:28:45 +0800
Subject: [PATCH 02/10] fix(cli): restrict copy cards to local TUI

---
 src/cli/ui/App.tsx                |  8 +++-
 src/cli/ui/slash.ts               |  1 +
 src/cli/ui/slash/submit-origin.ts |  9 +++++
 tests/auto-git-rollback.test.ts   | 62 +++++++++++++++++--------------
 tests/slash.test.ts               | 19 ++++++++++
 5 files changed, 70 insertions(+), 29 deletions(-)
 create mode 100644 src/cli/ui/slash/submit-origin.ts

diff --git a/src/cli/ui/App.tsx b/src/cli/ui/App.tsx
index 80d72c94c..54a378d84 100644
--- a/src/cli/ui/App.tsx
+++ b/src/cli/ui/App.tsx
@@ -196,6 +196,7 @@ import {
   type PlanModeToggleSource,
   handleSlash,
   parseSlash,
+  shouldExposeTuiCardsToSlash,
   suggestSlashCommands,
 } from "./slash.js";
 import { TurnTranslator } from "./state/TurnTranslator.js";
@@ -3009,6 +3010,11 @@ function AppInner({
       if (slash) {
         const sink = eventSinkRef.current;
         const eventizer = eventizerRef.current;
+        const exposeTuiCards = shouldExposeTuiCardsToSlash({
+          fromQQ,
+          fromTelegram,
+          fromWeixin,
+        });
         if (sink && eventizer) {
           sink.append(
             eventizer.emitSlashInvoked(loop.currentTurn, slash.cmd, slash.args.join(" ")),
@@ -3084,7 +3090,7 @@ function AppInner({
               footer: args.footer,
               oneTime: false,
             }),
-          getCards: getCardsForSlash,
+          getCards: exposeTuiCards ? getCardsForSlash : undefined,
           dispatch: agentStore.dispatch,
           markPlanStepDone: (stepId: string) => {
             const steps = planStepsRef.current;
diff --git a/src/cli/ui/slash.ts b/src/cli/ui/slash.ts
index 0cf77135a..e239047d1 100644
--- a/src/cli/ui/slash.ts
+++ b/src/cli/ui/slash.ts
@@ -14,6 +14,7 @@ export {
   suggestSlashCommands,
 } from "./slash/commands.js";
 export { handleSlash } from "./slash/dispatch.js";
+export { shouldExposeTuiCardsToSlash } from "./slash/submit-origin.js";
 export type { SlashHandler } from "./slash/dispatch.js";
 export type {
   McpServerSummary,
diff --git a/src/cli/ui/slash/submit-origin.ts b/src/cli/ui/slash/submit-origin.ts
new file mode 100644
index 000000000..ef715812b
--- /dev/null
+++ b/src/cli/ui/slash/submit-origin.ts
@@ -0,0 +1,9 @@
+export interface SlashSubmitOrigin {
+  fromQQ: boolean;
+  fromTelegram: boolean;
+  fromWeixin: boolean;
+}
+
+export function shouldExposeTuiCardsToSlash(origin: SlashSubmitOrigin): boolean {
+  return !(origin.fromQQ || origin.fromTelegram || origin.fromWeixin);
+}
diff --git a/tests/auto-git-rollback.test.ts b/tests/auto-git-rollback.test.ts
index 0ed119e34..2dbfd334b 100644
--- a/tests/auto-git-rollback.test.ts
+++ b/tests/auto-git-rollback.test.ts
@@ -9,6 +9,8 @@ import { ToolRegistry } from "../src/tools.js";
 import { registerFilesystemTools } from "../src/tools/filesystem.js";
 import { ReadTracker } from "../src/tools/read-tracker.js";
 
+const AMBIENT_GIT_ENV_TEST_TIMEOUT_MS = process.platform === "win32" ? 20_000 : 5_000;
+
 function cleanGitEnv(overrides: NodeJS.ProcessEnv = {}): NodeJS.ProcessEnv {
   const env: NodeJS.ProcessEnv = { ...process.env };
   for (const key of Object.keys(env)) {
@@ -175,32 +177,36 @@ describe("auto-git-rollback memory guard", () => {
     expect(await fs.readFile(join(root, "tracked.txt"), "utf8")).toBe("baseline\n");
   });
 
-  it("ignores ambient Git hook environment variables when checkpointing", async () => {
-    const outerRoot = await mkdtemp(join(tmpdir(), "reasonix-auto-git-outer-"));
-    git(outerRoot, ["init", "-q"]);
-    const previousGitDir = process.env.GIT_DIR;
-    const previousGitWorkTree = process.env.GIT_WORK_TREE;
-    process.env.GIT_DIR = join(outerRoot, ".git");
-    process.env.GIT_WORK_TREE = outerRoot;
-
-    try {
-      enableAutoGitRollback(home, root);
-      await fs.writeFile(join(root, "tracked.txt"), "dirty-before-edit\n", "utf8");
-
-      await tools.dispatch("read_file", { path: "tracked.txt" }, { readTracker });
-      const out = await tools.dispatch(
-        "edit_file",
-        { path: "tracked.txt", search: "dirty-before-edit", replace: "after-edit" },
-        { readTracker },
-      );
-
-      expect(out).toMatch(/edited tracked\.txt/);
-      expect(git(root, ["show", "HEAD:tracked.txt"])).toBe("dirty-before-edit");
-      expect(git(root, ["log", "-1", "--format=%s"])).toMatch(/pre-edit: edit_file tracked\.txt/);
-    } finally {
-      restoreProcessEnv("GIT_DIR", previousGitDir);
-      restoreProcessEnv("GIT_WORK_TREE", previousGitWorkTree);
-      await rm(outerRoot, { recursive: true, force: true });
-    }
-  });
+  it(
+    "ignores ambient Git hook environment variables when checkpointing",
+    async () => {
+      const outerRoot = await mkdtemp(join(tmpdir(), "reasonix-auto-git-outer-"));
+      git(outerRoot, ["init", "-q"]);
+      const previousGitDir = process.env.GIT_DIR;
+      const previousGitWorkTree = process.env.GIT_WORK_TREE;
+      process.env.GIT_DIR = join(outerRoot, ".git");
+      process.env.GIT_WORK_TREE = outerRoot;
+
+      try {
+        enableAutoGitRollback(home, root);
+        await fs.writeFile(join(root, "tracked.txt"), "dirty-before-edit\n", "utf8");
+
+        await tools.dispatch("read_file", { path: "tracked.txt" }, { readTracker });
+        const out = await tools.dispatch(
+          "edit_file",
+          { path: "tracked.txt", search: "dirty-before-edit", replace: "after-edit" },
+          { readTracker },
+        );
+
+        expect(out).toMatch(/edited tracked\.txt/);
+        expect(git(root, ["show", "HEAD:tracked.txt"])).toBe("dirty-before-edit");
+        expect(git(root, ["log", "-1", "--format=%s"])).toMatch(/pre-edit: edit_file tracked\.txt/);
+      } finally {
+        restoreProcessEnv("GIT_DIR", previousGitDir);
+        restoreProcessEnv("GIT_WORK_TREE", previousGitWorkTree);
+        await rm(outerRoot, { recursive: true, force: true });
+      }
+    },
+    AMBIENT_GIT_ENV_TEST_TIMEOUT_MS,
+  );
 });
diff --git a/tests/slash.test.ts b/tests/slash.test.ts
index efd61b808..7f3ba233e 100644
--- a/tests/slash.test.ts
+++ b/tests/slash.test.ts
@@ -8,6 +8,7 @@ import {
   detectSlashArgContext,
   handleSlash,
   parseSlash,
+  shouldExposeTuiCardsToSlash,
   suggestSlashCommands,
 } from "../src/cli/ui/slash.js";
 import { DeepSeekClient, Usage } from "../src/client.js";
@@ -562,6 +563,24 @@ describe("handleSlash", () => {
     expect(r.info).toMatch(/interactive TUI/);
   });
 
+  it("only exposes TUI card history to local slash submissions", () => {
+    expect(
+      shouldExposeTuiCardsToSlash({
+        fromQQ: false,
+        fromTelegram: false,
+        fromWeixin: false,
+      }),
+    ).toBe(true);
+
+    for (const origin of [
+      { fromQQ: true, fromTelegram: false, fromWeixin: false },
+      { fromQQ: false, fromTelegram: true, fromWeixin: false },
+      { fromQQ: false, fromTelegram: false, fromWeixin: true },
+    ]) {
+      expect(shouldExposeTuiCardsToSlash(origin)).toBe(false);
+    }
+  });
+
   describe("detectSlashArgContext", () => {
     it("returns null before the user commits to a slash name", () => {
       expect(detectSlashArgContext("/pr")).toBeNull();

From d7a591aba9a2cba1509ac7145ce97a7c7d6d0a36 Mon Sep 17 00:00:00 2001
From: lab1 <liuxw96@foxmail.com>
Date: Fri, 29 May 2026 21:17:16 +0800
Subject: [PATCH 03/10] fix(loop): preserve long-session history on abort

---
 dashboard/src/App.tsx                 |  5 ++
 dashboard/src/i18n/de.ts              |  1 +
 dashboard/src/i18n/en.ts              |  1 +
 dashboard/src/i18n/zh-CN.ts           |  1 +
 dashboard/src/ui/statusbar.tsx        | 10 +++-
 desktop/src/App.test.ts               | 30 ++++++++++-
 desktop/src/App.tsx                   |  4 ++
 desktop/src/i18n/de.ts                |  1 +
 desktop/src/i18n/en.ts                |  1 +
 desktop/src/i18n/ja.ts                |  1 +
 desktop/src/i18n/zh-CN.ts             |  1 +
 desktop/src/ui/context-panel.test.tsx |  1 +
 desktop/src/ui/statusbar.tsx          | 10 +++-
 src/loop.ts                           |  2 +-
 tests/desktop-btw-status.test.ts      |  1 +
 tests/desktop-user-message.test.ts    |  1 +
 tests/loop-user-persist.test.ts       | 78 +++++++++++++++++++++++++++
 17 files changed, 143 insertions(+), 6 deletions(-)

diff --git a/dashboard/src/App.tsx b/dashboard/src/App.tsx
index d7126ba91..1b535fbe6 100644
--- a/dashboard/src/App.tsx
+++ b/dashboard/src/App.tsx
@@ -166,6 +166,7 @@ export type PendingRevision = {
 
 export type UsageStats = {
   totalCostUsd: number;
+  turnCostUsd: number;
   totalPromptTokens: number;
   totalCompletionTokens: number;
   cacheHitTokens: number;
@@ -548,6 +549,7 @@ function mergeSessionFiles(existing: SessionFile[], adds: SessionFile[]): Sessio
 function zeroUsage(): UsageStats {
   return {
     totalCostUsd: 0,
+    turnCostUsd: 0,
     totalPromptTokens: 0,
     totalCompletionTokens: 0,
     cacheHitTokens: 0,
@@ -584,6 +586,7 @@ function applyIncomingRaw(state: State, ev: IncomingEvent): State {
       return {
         ...state,
         busy: true,
+        usage: { ...state.usage, turnCostUsd: 0 },
         messages: [
           ...state.messages,
           {
@@ -751,6 +754,7 @@ function applyIncomingRaw(state: State, ev: IncomingEvent): State {
           totalCompletionTokens: ev.totalCompletionTokens,
           cacheHitTokens: ev.cacheHitTokens,
           cacheMissTokens: ev.cacheMissTokens,
+          turnCostUsd: empty ? 0 : state.usage.turnCostUsd,
           lastCallCacheHit: empty ? null : state.usage.lastCallCacheHit,
           lastCallCacheMiss: empty ? null : state.usage.lastCallCacheMiss,
         },
@@ -956,6 +960,7 @@ function applyIncomingRaw(state: State, ev: IncomingEvent): State {
       const hasCall = callHit > 0 || callMiss > 0;
       const usage: UsageStats = {
         totalCostUsd: state.usage.totalCostUsd + (ev.costUsd ?? 0),
+        turnCostUsd: state.usage.turnCostUsd + (ev.costUsd ?? 0),
         totalPromptTokens: state.usage.totalPromptTokens + (u?.prompt_tokens ?? 0),
         totalCompletionTokens: state.usage.totalCompletionTokens + (u?.completion_tokens ?? 0),
         cacheHitTokens: state.usage.cacheHitTokens + callHit,
diff --git a/dashboard/src/i18n/de.ts b/dashboard/src/i18n/de.ts
index 73ab4df3b..de0ac2beb 100644
--- a/dashboard/src/i18n/de.ts
+++ b/dashboard/src/i18n/de.ts
@@ -1306,6 +1306,7 @@ export const de: typeof en = {
     themeStyleGlacier: "Gletscher",
     themeStyleMidnight: "Mitternacht",
     thisTurn: "Dieser Turn",
+    session: "Sitzung",
     tokens: "Tokens",
   },
   thread: {
diff --git a/dashboard/src/i18n/en.ts b/dashboard/src/i18n/en.ts
index bc047d945..95bc8c07d 100644
--- a/dashboard/src/i18n/en.ts
+++ b/dashboard/src/i18n/en.ts
@@ -1258,6 +1258,7 @@ export const en = {
     themeStyleGlacier: "Glacier",
     themeStyleMidnight: "Midnight",
     thisTurn: "This turn",
+    session: "Session",
     tokens: "Tokens",
   },
   thread: {
diff --git a/dashboard/src/i18n/zh-CN.ts b/dashboard/src/i18n/zh-CN.ts
index 33078958f..c84a4b6de 100644
--- a/dashboard/src/i18n/zh-CN.ts
+++ b/dashboard/src/i18n/zh-CN.ts
@@ -1233,6 +1233,7 @@ export const zhCN = {
     themeStyleGlacier: "冰川",
     themeStyleMidnight: "午夜",
     thisTurn: "本轮",
+    session: "会话",
     tokens: "Tokens",
   },
   thread: {
diff --git a/dashboard/src/ui/statusbar.tsx b/dashboard/src/ui/statusbar.tsx
index ed257d5dc..5d72b536e 100644
--- a/dashboard/src/ui/statusbar.tsx
+++ b/dashboard/src/ui/statusbar.tsx
@@ -70,7 +70,8 @@ export function StatusBar({
       ? `${usage.cacheHitTokens.toLocaleString()} / ${totalTokens.toLocaleString()} tokens (${cacheHitPctDisplay}%)`
       : "";
   const runningJobs = jobs.filter((j) => j.running).length;
-  const spent = formatMoney(usage.totalCostUsd, currency);
+  const turnSpent = formatMoney(usage.turnCostUsd, currency);
+  const sessionSpent = formatMoney(usage.totalCostUsd, currency);
   const balanceLabel = balance
     ? `${balance.currency === "USD" ? "$" : "¥"} ${balance.total.toFixed(2)}`
     : "—";
@@ -113,7 +114,12 @@ export function StatusBar({
       <span className="seg">
         <I.coin size={11} />
         <span>{t("statusbar.thisTurn")}</span>
-        <span className="v ok">{spent}</span>
+        <span className="v ok">{turnSpent}</span>
+      </span>
+      <span className="seg">
+        <I.coin size={11} />
+        <span>{t("statusbar.session")}</span>
+        <span className="v ok">{sessionSpent}</span>
       </span>
 
       <span className="grow" />
diff --git a/desktop/src/App.test.ts b/desktop/src/App.test.ts
index 5cf003f22..9f858e3c6 100644
--- a/desktop/src/App.test.ts
+++ b/desktop/src/App.test.ts
@@ -52,6 +52,7 @@ function initialState(): Parameters<typeof reduce>[0] {
     activePlan: null,
     usage: {
       totalCostUsd: 0,
+      turnCostUsd: 0,
       totalPromptTokens: 0,
       totalCompletionTokens: 0,
       cacheHitTokens: 0,
@@ -136,7 +137,7 @@ function makePathPrompt(
 }
 
 describe("Desktop App reducer — usage", () => {
-  it("falls back prompt tokens to cache miss tokens when cache fields are absent", () => {
+  it("falls back prompt tokens to cache miss tokens and tracks turn cost", () => {
     const next = reduce(initialState(), {
       t: "incoming",
       event: {
@@ -151,9 +152,36 @@ describe("Desktop App reducer — usage", () => {
     });
 
     expect(next.usage.totalPromptTokens).toBe(1234);
+    expect(next.usage.turnCostUsd).toBe(0.001);
     expect(next.usage.cacheHitTokens).toBe(0);
     expect(next.usage.cacheMissTokens).toBe(1234);
     expect(next.usage.lastCallCacheMiss).toBe(1234);
+
+    const accumulated = reduce(next, {
+      t: "incoming",
+      event: {
+        type: "model.final",
+        id: 2,
+        ts: "2026-05-27T00:00:01.000Z",
+        turn: 1,
+        content: "ok again",
+        usage: { prompt_tokens: 10, completion_tokens: 2, total_tokens: 12 },
+        costUsd: 0.002,
+      },
+    });
+    expect(accumulated.usage.turnCostUsd).toBeCloseTo(0.003, 6);
+
+    const reset = reduce(accumulated, {
+      t: "incoming",
+      event: {
+        type: "user.message",
+        id: 3,
+        ts: "2026-05-27T00:00:02.000Z",
+        turn: 2,
+        text: "next turn",
+      },
+    });
+    expect(reset.usage.turnCostUsd).toBe(0);
   });
 
   it("settles the pending assistant message when an error ends the turn (#1660)", () => {
diff --git a/desktop/src/App.tsx b/desktop/src/App.tsx
index 286a4868e..11acfbdfe 100644
--- a/desktop/src/App.tsx
+++ b/desktop/src/App.tsx
@@ -221,6 +221,7 @@ export type PendingRevision = {
 
 export type UsageStats = {
   totalCostUsd: number;
+  turnCostUsd: number;
   totalPromptTokens: number;
   totalCompletionTokens: number;
   cacheHitTokens: number;
@@ -780,6 +781,7 @@ function mergeSessionFiles(existing: SessionFile[], adds: SessionFile[]): Sessio
 function zeroUsage(): UsageStats {
   return {
     totalCostUsd: 0,
+    turnCostUsd: 0,
     totalPromptTokens: 0,
     totalCompletionTokens: 0,
     cacheHitTokens: 0,
@@ -813,6 +815,7 @@ function applyIncomingRaw(state: State, ev: IncomingEvent): State {
       return {
         ...state,
         busy: true,
+        usage: { ...state.usage, turnCostUsd: 0 },
         messages: [
           ...state.messages,
           {
@@ -1197,6 +1200,7 @@ function applyIncomingRaw(state: State, ev: IncomingEvent): State {
       const hasCall = promptTokens > 0 || callHit > 0 || callMiss > 0;
       const usage: UsageStats = {
         totalCostUsd: state.usage.totalCostUsd + (ev.costUsd ?? 0),
+        turnCostUsd: state.usage.turnCostUsd + (ev.costUsd ?? 0),
         totalPromptTokens: state.usage.totalPromptTokens + promptTokens,
         totalCompletionTokens: state.usage.totalCompletionTokens + (u?.completion_tokens ?? 0),
         cacheHitTokens: state.usage.cacheHitTokens + callHit,
diff --git a/desktop/src/i18n/de.ts b/desktop/src/i18n/de.ts
index 679e32dd3..93f8e3763 100644
--- a/desktop/src/i18n/de.ts
+++ b/desktop/src/i18n/de.ts
@@ -667,6 +667,7 @@ export const de: typeof en = {
     cache: "Cache",
     tokens: "Tokens",
     thisTurn: "dieser Turn",
+    session: "Sitzung",
     switchWorkspace: "Arbeitsbereich wechseln · {workspace}",
     switchCurrency: "Währung wechseln (CNY / USD)",
     balance: "Guthaben",
diff --git a/desktop/src/i18n/en.ts b/desktop/src/i18n/en.ts
index 059e95b71..c913a00a3 100644
--- a/desktop/src/i18n/en.ts
+++ b/desktop/src/i18n/en.ts
@@ -638,6 +638,7 @@ export const en = {
     cache: "cache",
     tokens: "tokens",
     thisTurn: "this turn",
+    session: "session",
     switchWorkspace: "Switch workspace · {workspace}",
     switchCurrency: "Switch currency (CNY / USD)",
     balance: "balance",
diff --git a/desktop/src/i18n/ja.ts b/desktop/src/i18n/ja.ts
index 32981d30d..f5ecc3ea4 100644
--- a/desktop/src/i18n/ja.ts
+++ b/desktop/src/i18n/ja.ts
@@ -661,6 +661,7 @@ export const ja: typeof en = {
     cache: "キャッシュ",
     tokens: "トークン",
     thisTurn: "このターン",
+    session: "セッション",
     switchWorkspace: "ワークスペース切替 · {workspace}",
     switchCurrency: "通貨切替 (CNY / USD)",
     balance: "残高",
diff --git a/desktop/src/i18n/zh-CN.ts b/desktop/src/i18n/zh-CN.ts
index 11f80343c..4f1831fbd 100644
--- a/desktop/src/i18n/zh-CN.ts
+++ b/desktop/src/i18n/zh-CN.ts
@@ -439,6 +439,7 @@ export const zhCN: typeof en = {
     cache: "缓存",
     tokens: "tokens",
     thisTurn: "本次",
+    session: "会话",
     switchWorkspace: "切换工作区 · {workspace}",
     switchCurrency: "切换货币 (CNY / USD)",
     balance: "余额",
diff --git a/desktop/src/ui/context-panel.test.tsx b/desktop/src/ui/context-panel.test.tsx
index 622832100..70c681969 100644
--- a/desktop/src/ui/context-panel.test.tsx
+++ b/desktop/src/ui/context-panel.test.tsx
@@ -13,6 +13,7 @@ vi.mock("@tauri-apps/plugin-opener", () => ({ openPath: vi.fn() }));
 
 const usage: UsageStats = {
   totalCostUsd: 0,
+  turnCostUsd: 0,
   totalPromptTokens: 0,
   totalCompletionTokens: 0,
   cacheHitTokens: 0,
diff --git a/desktop/src/ui/statusbar.tsx b/desktop/src/ui/statusbar.tsx
index 4e3bc2d77..e299c024a 100644
--- a/desktop/src/ui/statusbar.tsx
+++ b/desktop/src/ui/statusbar.tsx
@@ -74,7 +74,8 @@ export function StatusBar({
       ? `${usage.cacheHitTokens.toLocaleString()} / ${cacheDenom.toLocaleString()} tokens (${cacheHitPctDisplay}%)`
       : "";
   const runningJobs = jobs.filter((j) => j.running).length;
-  const spent = formatMoney(usage.totalCostUsd, currency);
+  const turnSpent = formatMoney(usage.turnCostUsd, currency);
+  const sessionSpent = formatMoney(usage.totalCostUsd, currency);
   const balanceLabel = balance
     ? `${balance.currency === "USD" ? "$" : "¥"} ${balance.total.toFixed(2)}`
     : "—";
@@ -117,7 +118,12 @@ export function StatusBar({
       <span className="seg">
         <I.coin size={11} />
         <span>{t("statusbar.thisTurn")}</span>
-        <span className="v ok">{spent}</span>
+        <span className="v ok">{turnSpent}</span>
+      </span>
+      <span className="seg">
+        <I.coin size={11} />
+        <span>{t("statusbar.session")}</span>
+        <span className="v ok">{sessionSpent}</span>
       </span>
 
       <span className="grow" />
diff --git a/src/loop.ts b/src/loop.ts
index 40fd0ee1e..09fe57e06 100644
--- a/src/loop.ts
+++ b/src/loop.ts
@@ -744,7 +744,7 @@ export class CacheFirstLoop {
     // when the user navigates away before the model responds). A failed
     // first round-trip still leaves the message in the log; the user can
     // /retry without re-typing.
-    const turnStartLogIndex = this.log.length;
+    const turnStartLogIndex = this.log.totalLength;
     this.appendAndPersist({ role: "user", content: userInput });
     const toolSpecs = this.prefix.tools();
     const rateLimitState = { shown: false };
diff --git a/tests/desktop-btw-status.test.ts b/tests/desktop-btw-status.test.ts
index 7ae7a4e28..06fdb2a7b 100644
--- a/tests/desktop-btw-status.test.ts
+++ b/tests/desktop-btw-status.test.ts
@@ -58,6 +58,7 @@ function makeState(): AppState {
     activePlan: null,
     usage: {
       totalCostUsd: 0,
+      turnCostUsd: 0,
       totalPromptTokens: 0,
       totalCompletionTokens: 0,
       cacheHitTokens: 0,
diff --git a/tests/desktop-user-message.test.ts b/tests/desktop-user-message.test.ts
index b705905a7..28c59394f 100644
--- a/tests/desktop-user-message.test.ts
+++ b/tests/desktop-user-message.test.ts
@@ -60,6 +60,7 @@ function makeState(messages: ChatMessage[] = []): AppState {
     activePlan: null,
     usage: {
       totalCostUsd: 0,
+      turnCostUsd: 0,
       totalPromptTokens: 0,
       totalCompletionTokens: 0,
       cacheHitTokens: 0,
diff --git a/tests/loop-user-persist.test.ts b/tests/loop-user-persist.test.ts
index cc533a5f2..6e202f25d 100644
--- a/tests/loop-user-persist.test.ts
+++ b/tests/loop-user-persist.test.ts
@@ -224,4 +224,82 @@ describe("loop persists user message at step entry (issue #943)", () => {
     expect(secondRequestUsers).toEqual(["请按这次要求完整重写，不要局部微调"]);
     expect(loadSessionMessages(sessionName).filter((m) => m.role === "user")).toHaveLength(1);
   });
+
+  it("discarding an aborted turn preserves history outside the in-memory window", async () => {
+    const requestMessages: ChatMessage[][] = [];
+    let callCount = 0;
+    let markFirstRequestStarted!: () => void;
+    const firstRequestStarted = new Promise<void>((resolve) => {
+      markFirstRequestStarted = resolve;
+    });
+    const client = new DeepSeekClient({
+      apiKey: "sk-test",
+      fetch: vi.fn(
+        async (_url: unknown, init: { body?: string; signal?: AbortSignal } | undefined) => {
+          const body = init?.body ? JSON.parse(init.body) : {};
+          requestMessages.push(body.messages as ChatMessage[]);
+          if (callCount++ === 0) {
+            markFirstRequestStarted();
+            return new Promise<Response>((_resolve, reject) => {
+              init?.signal?.addEventListener("abort", () =>
+                reject(new DOMException("This operation was aborted", "AbortError")),
+              );
+            });
+          }
+          return new Response(
+            JSON.stringify({
+              choices: [
+                {
+                  index: 0,
+                  message: { role: "assistant", content: "ok" },
+                  finish_reason: "stop",
+                },
+              ],
+              usage: { prompt_tokens: 1, completion_tokens: 1, total_tokens: 2 },
+            }),
+            { status: 200, headers: { "Content-Type": "application/json" } },
+          );
+        },
+      ) as unknown as typeof fetch,
+      retry: { maxAttempts: 1 },
+    });
+
+    const sessionName = "bug2287-discard-window-history";
+    const loop = new CacheFirstLoop({
+      client,
+      prefix: new ImmutablePrefix({ system: "s" }),
+      stream: false,
+      session: sessionName,
+      model: "deepseek-chat",
+    });
+
+    for (let i = 0; i < 105; i++) {
+      loop.appendAndPersist({ role: "user", content: `prior q ${i}` });
+      loop.appendAndPersist({ role: "assistant", content: `prior a ${i}` });
+    }
+    expect(loop.log.totalLength).toBeGreaterThan(loop.log.length);
+
+    const interrupted = (async () => {
+      for await (const ev of loop.step("aborted current prompt")) {
+        if (ev.role === "done") break;
+      }
+    })();
+
+    await firstRequestStarted;
+    loop.abort({ discardCurrentTurn: true });
+    await interrupted;
+
+    await loop.run("next prompt");
+
+    const secondRequestContents = requestMessages[1]!.map((m) => m.content);
+    expect(secondRequestContents).toContain("prior q 104");
+    expect(secondRequestContents).toContain("prior a 104");
+    expect(secondRequestContents).not.toContain("aborted current prompt");
+    expect(secondRequestContents).toContain("next prompt");
+
+    const persistedContents = loadSessionMessages(sessionName).map((m) => m.content);
+    expect(persistedContents).toContain("prior q 104");
+    expect(persistedContents).toContain("prior a 104");
+    expect(persistedContents).not.toContain("aborted current prompt");
+  });
 });

From 93f90e6d45848c947b7ca7afd6fb47536a6d4517 Mon Sep 17 00:00:00 2001
From: lab1 <liuxw96@foxmail.com>
Date: Fri, 29 May 2026 21:34:34 +0800
Subject: [PATCH 04/10] fix(ui): preserve turn cost on steer messages

---
 dashboard/src/App.tsx   | 16 ++++++++++++++--
 desktop/src/App.test.ts | 29 +++++++++++++++++++++++++++--
 desktop/src/App.tsx     | 16 ++++++++++++++--
 3 files changed, 55 insertions(+), 6 deletions(-)

diff --git a/dashboard/src/App.tsx b/dashboard/src/App.tsx
index 1b535fbe6..264c007ca 100644
--- a/dashboard/src/App.tsx
+++ b/dashboard/src/App.tsx
@@ -320,6 +320,13 @@ function nextMessageTurn(messages: ChatMessage[]): number {
   return lastTurn + 1;
 }
 
+function isIncomingUserNewTurn(state: State, turn: number): boolean {
+  return (
+    !state.busy ||
+    !state.messages.some((m) => (m.kind === "user" || m.kind === "assistant") && m.turn === turn)
+  );
+}
+
 function reduce(state: State, action: Action): State {
   return withElidedTranscript(reduceRaw(state, action));
 }
@@ -330,6 +337,7 @@ function reduceRaw(state: State, action: Action): State {
       return {
         ...state,
         busy: true,
+        usage: { ...state.usage, turnCostUsd: 0 },
         messages: [
           ...state.messages,
           { kind: "user", text: action.text, clientId: action.clientId, turn: nextMessageTurn(state.messages) },
@@ -342,6 +350,7 @@ function reduceRaw(state: State, action: Action): State {
         ...state,
         busy: true,
         activeSkill: action.skill,
+        usage: { ...state.usage, turnCostUsd: 0 },
         messages: [
           ...state.messages,
           {
@@ -583,17 +592,20 @@ function applyIncomingRaw(state: State, ev: IncomingEvent): State {
       if (state.busy && last?.kind === "user" && last.text === ev.text) {
         return state;
       }
+      const turn = ev.turn > 0 ? ev.turn : nextMessageTurn(state.messages);
       return {
         ...state,
         busy: true,
-        usage: { ...state.usage, turnCostUsd: 0 },
+        usage: isIncomingUserNewTurn(state, turn)
+          ? { ...state.usage, turnCostUsd: 0 }
+          : state.usage,
         messages: [
           ...state.messages,
           {
             kind: "user",
             text: ev.text,
             clientId: `remote-${ev.id}`,
-            turn: ev.turn > 0 ? ev.turn : nextMessageTurn(state.messages),
+            turn,
           },
         ],
       };
diff --git a/desktop/src/App.test.ts b/desktop/src/App.test.ts
index 9f858e3c6..8f727fc14 100644
--- a/desktop/src/App.test.ts
+++ b/desktop/src/App.test.ts
@@ -171,17 +171,42 @@ describe("Desktop App reducer — usage", () => {
     });
     expect(accumulated.usage.turnCostUsd).toBeCloseTo(0.003, 6);
 
+    const steered = reduce(
+      {
+        ...accumulated,
+        busy: true,
+        messages: [{ kind: "assistant", turn: 1, segments: [], pending: false }],
+      },
+      {
+        t: "incoming",
+        event: {
+          type: "user.message",
+          id: 3,
+          ts: "2026-05-27T00:00:02.000Z",
+          turn: 1,
+          text: "same-turn steer",
+        },
+      },
+    );
+    expect(steered.usage.turnCostUsd).toBeCloseTo(0.003, 6);
+
     const reset = reduce(accumulated, {
       t: "incoming",
       event: {
         type: "user.message",
-        id: 3,
-        ts: "2026-05-27T00:00:02.000Z",
+        id: 4,
+        ts: "2026-05-27T00:00:03.000Z",
         turn: 2,
         text: "next turn",
       },
     });
     expect(reset.usage.turnCostUsd).toBe(0);
+
+    const localReset = reduce(
+      { ...accumulated, usage: { ...accumulated.usage, turnCostUsd: 0.004 } },
+      { t: "send_user", text: "local next turn", clientId: "local-1" },
+    );
+    expect(localReset.usage.turnCostUsd).toBe(0);
   });
 
   it("settles the pending assistant message when an error ends the turn (#1660)", () => {
diff --git a/desktop/src/App.tsx b/desktop/src/App.tsx
index 11acfbdfe..ebe959e8a 100644
--- a/desktop/src/App.tsx
+++ b/desktop/src/App.tsx
@@ -452,6 +452,13 @@ function nextMessageTurn(messages: ChatMessage[]): number {
   return lastTurn + 1;
 }
 
+function isIncomingUserNewTurn(state: State, turn: number): boolean {
+  return (
+    !state.busy ||
+    !state.messages.some((m) => (m.kind === "user" || m.kind === "assistant") && m.turn === turn)
+  );
+}
+
 let _errSeq = 0;
 function nextErrorId(): string {
   _errSeq += 1;
@@ -468,6 +475,7 @@ function reduceRaw(state: State, action: Action): State {
       return {
         ...state,
         busy: true,
+        usage: { ...state.usage, turnCostUsd: 0 },
         messages: [
           ...state.messages,
           { kind: "user", text: action.text, clientId: action.clientId, turn: nextMessageTurn(state.messages) },
@@ -480,6 +488,7 @@ function reduceRaw(state: State, action: Action): State {
         ...state,
         busy: true,
         activeSkill: action.skill,
+        usage: { ...state.usage, turnCostUsd: 0 },
         messages: [
           ...state.messages,
           {
@@ -812,17 +821,20 @@ export function applyIncoming(state: State, ev: IncomingEvent): State {
 function applyIncomingRaw(state: State, ev: IncomingEvent): State {
   switch (ev.type) {
     case "user.message": {
+      const turn = ev.turn > 0 ? ev.turn : nextMessageTurn(state.messages);
       return {
         ...state,
         busy: true,
-        usage: { ...state.usage, turnCostUsd: 0 },
+        usage: isIncomingUserNewTurn(state, turn)
+          ? { ...state.usage, turnCostUsd: 0 }
+          : state.usage,
         messages: [
           ...state.messages,
           {
             kind: "user",
             text: ev.text,
             clientId: `remote-${ev.id}`,
-            turn: ev.turn > 0 ? ev.turn : nextMessageTurn(state.messages),
+            turn,
           },
         ],
       };

From e520d04a39423a040c92abe4c0357c3321835888 Mon Sep 17 00:00:00 2001
From: lab1 <liuxw96@foxmail.com>
Date: Fri, 29 May 2026 22:19:36 +0800
Subject: [PATCH 05/10] test(cache): add offline cache regression guard

---
 .github/workflows/ci.yml     |   3 +
 package.json                 |   1 +
 scripts/cache-guard.ts       |  26 ++
 src/telemetry/cache-guard.ts | 690 +++++++++++++++++++++++++++++++++++
 tests/cache-guard.test.ts    |  95 +++++
 5 files changed, 815 insertions(+)
 create mode 100644 scripts/cache-guard.ts
 create mode 100644 src/telemetry/cache-guard.ts
 create mode 100644 tests/cache-guard.test.ts

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index fd36fcd29..1c3abf644 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -33,6 +33,9 @@ jobs:
       - name: Typecheck
         run: npm run typecheck
 
+      - name: Cache guard
+        run: npm run cache:guard
+
       - name: Build (tsup + dashboard)
         run: npm run build
 
diff --git a/package.json b/package.json
index 2886a814a..fb7efaabf 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
     "test:mutation": "stryker run",
+    "cache:guard": "tsx scripts/cache-guard.ts",
     "lint": "biome check src tests",
     "lint:fix": "biome check --write src tests",
     "format": "biome format --write src tests",
diff --git a/scripts/cache-guard.ts b/scripts/cache-guard.ts
new file mode 100644
index 000000000..8212051f6
--- /dev/null
+++ b/scripts/cache-guard.ts
@@ -0,0 +1,26 @@
+#!/usr/bin/env tsx
+import { renderCacheGuardReport, runCacheGuard } from "../src/telemetry/cache-guard.js";
+
+function readFlag(name: string): string | null {
+  const prefix = `--${name}=`;
+  const match = process.argv.slice(2).find((arg) => arg.startsWith(prefix));
+  return match ? match.slice(prefix.length) : null;
+}
+
+const json = process.argv.includes("--json");
+const keepTemp = process.argv.includes("--keep-temp");
+const thresholdRaw = readFlag("threshold");
+const threshold = thresholdRaw === null ? undefined : Number(thresholdRaw);
+
+if (threshold !== undefined && (!Number.isFinite(threshold) || threshold <= 0 || threshold > 1)) {
+  process.stderr.write("--threshold must be a number in (0, 1]. Example: --threshold=0.92\n");
+  process.exit(2);
+}
+
+const report = await runCacheGuard({ minHitRatio: threshold, keepTemp });
+if (json) {
+  process.stdout.write(`${JSON.stringify(report, null, 2)}\n`);
+} else {
+  process.stdout.write(`${renderCacheGuardReport(report)}\n`);
+}
+process.exitCode = report.passed ? 0 : 1;
diff --git a/src/telemetry/cache-guard.ts b/src/telemetry/cache-guard.ts
new file mode 100644
index 000000000..d70f42302
--- /dev/null
+++ b/src/telemetry/cache-guard.ts
@@ -0,0 +1,690 @@
+import { createHash } from "node:crypto";
+import { mkdtempSync, rmSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { DeepSeekClient } from "../client.js";
+import { CacheFirstLoop } from "../loop.js";
+import { buildAssistantMessage } from "../loop/messages.js";
+import { ImmutablePrefix } from "../memory/runtime.js";
+import { appendSessionMessage } from "../memory/session.js";
+import { countTokensBounded, estimateRequestTokens } from "../tokenizer.js";
+import { ToolRegistry } from "../tools.js";
+import type { ChatMessage, ToolCall, ToolSpec } from "../types.js";
+
+const DEFAULT_MIN_HIT_RATIO = 0.85;
+const MODEL = "deepseek-v4-flash";
+const MESSAGE_CACHE_KEYS = [
+  "role",
+  "content",
+  "name",
+  "tool_call_id",
+  "tool_calls",
+  "reasoning_content",
+] as const satisfies readonly (keyof ChatMessage)[];
+
+export interface CacheGuardOptions {
+  /** Minimum estimated cache-hit ratio for transitions that should be warm. */
+  minHitRatio?: number;
+  /** Keep the temporary HOME used for synthetic session files. */
+  keepTemp?: boolean;
+}
+
+export interface CapturedCacheRequest {
+  model: string;
+  messages: ChatMessage[];
+  tools: ToolSpec[];
+  rendered: string;
+  renderedTokens: number;
+  requestTokens: number;
+  immutablePrefixHash: string;
+}
+
+export interface CacheGuardTransition {
+  from: number;
+  to: number;
+  estimatedHitRatio: number;
+  estimatedMissTokens: number;
+  immutablePrefixChanged: boolean;
+  expectedBreak: boolean;
+  passed: boolean;
+  reason?: string;
+}
+
+export interface CacheGuardScenarioResult {
+  name: string;
+  description: string;
+  requests: number;
+  minEstimatedHitRatio: number | null;
+  maxEstimatedMissTokens: number;
+  expectedBreaks: number;
+  transitions: CacheGuardTransition[];
+  passed: boolean;
+  error?: string;
+}
+
+export interface CacheGuardReport {
+  passed: boolean;
+  threshold: number;
+  tempHome: string;
+  scenarios: CacheGuardScenarioResult[];
+}
+
+interface ScriptedResponse {
+  content: string;
+  reasoningContent?: string | null;
+  toolCalls?: ToolCall[];
+  completionTokens?: number;
+}
+
+interface ScenarioRun {
+  name: string;
+  description: string;
+  driver: ScriptedDeepSeek;
+  expectedBreaks: Set<number>;
+}
+
+class ScriptedDeepSeek {
+  readonly requests: CapturedCacheRequest[] = [];
+  private readonly responses: ScriptedResponse[] = [];
+
+  enqueue(...responses: ScriptedResponse[]): void {
+    this.responses.push(...responses);
+  }
+
+  readonly fetch: typeof fetch = async (_url, init) => {
+    const payload = parsePayload(init?.body);
+    const request = capturePayload(payload);
+    const previous = this.requests[this.requests.length - 1];
+    this.requests.push(request);
+
+    const next = this.responses.shift();
+    if (!next) {
+      return new Response("cache guard has no scripted response left", { status: 500 });
+    }
+
+    const hitRatio = previous ? estimateRenderedHitRatio(previous.rendered, request.rendered) : 0;
+    const promptTokens = request.requestTokens;
+    const promptCacheHitTokens = Math.floor(promptTokens * hitRatio);
+    const promptCacheMissTokens = Math.max(0, promptTokens - promptCacheHitTokens);
+    const completionTokens = next.completionTokens ?? countTokensBounded(next.content || "ok");
+
+    return new Response(
+      JSON.stringify({
+        choices: [
+          {
+            index: 0,
+            message: {
+              role: "assistant",
+              content: next.content,
+              reasoning_content: next.reasoningContent ?? "",
+              ...(next.toolCalls && next.toolCalls.length > 0
+                ? { tool_calls: next.toolCalls }
+                : {}),
+            },
+            finish_reason: next.toolCalls && next.toolCalls.length > 0 ? "tool_calls" : "stop",
+          },
+        ],
+        usage: {
+          prompt_tokens: promptTokens,
+          completion_tokens: completionTokens,
+          total_tokens: promptTokens + completionTokens,
+          prompt_cache_hit_tokens: promptCacheHitTokens,
+          prompt_cache_miss_tokens: promptCacheMissTokens,
+        },
+      }),
+      { status: 200, headers: { "Content-Type": "application/json" } },
+    );
+  };
+}
+
+export async function runCacheGuard(opts: CacheGuardOptions = {}): Promise<CacheGuardReport> {
+  const threshold = opts.minHitRatio ?? DEFAULT_MIN_HIT_RATIO;
+  const tempHome = mkdtempSync(join(tmpdir(), "reasonix-cache-guard-"));
+  const previousHome = process.env.HOME;
+  const previousUserProfile = process.env.USERPROFILE;
+  process.env.HOME = tempHome;
+  process.env.USERPROFILE = tempHome;
+
+  try {
+    const scenarioRuns = await Promise.all([
+      runPlainDialogueScenario(),
+      runToolRoundTripScenario(),
+      runMultiToolScenario(),
+      runReasoningRetentionScenario(),
+      runLongSessionResumeScenario(),
+      runMcpHotAddScenario(),
+      runProOneShotScenario(),
+    ]);
+    const scenarios = scenarioRuns.map((run) =>
+      analyzeScenario(
+        run.name,
+        run.description,
+        run.driver.requests,
+        run.expectedBreaks,
+        threshold,
+      ),
+    );
+    return {
+      passed: scenarios.every((scenario) => scenario.passed),
+      threshold,
+      tempHome,
+      scenarios,
+    };
+  } finally {
+    if (previousHome === undefined) Reflect.deleteProperty(process.env, "HOME");
+    else process.env.HOME = previousHome;
+    if (previousUserProfile === undefined) Reflect.deleteProperty(process.env, "USERPROFILE");
+    else process.env.USERPROFILE = previousUserProfile;
+    if (!opts.keepTemp) rmSync(tempHome, { recursive: true, force: true });
+  }
+}
+
+export function renderCacheGuardReport(report: CacheGuardReport): string {
+  const lines = [
+    `cache guard: ${report.passed ? "PASS" : "FAIL"}  threshold=${pct(report.threshold)}`,
+    "",
+    "scenario                         req  min-hit  max-miss  breaks  result",
+  ];
+  for (const scenario of report.scenarios) {
+    const minHit =
+      scenario.minEstimatedHitRatio === null ? "n/a" : pct(scenario.minEstimatedHitRatio);
+    lines.push(
+      `${pad(scenario.name, 32)} ${String(scenario.requests).padStart(3)}  ${minHit.padStart(7)}  ${String(
+        scenario.maxEstimatedMissTokens,
+      ).padStart(8)}  ${String(scenario.expectedBreaks).padStart(6)}  ${
+        scenario.passed ? "PASS" : "FAIL"
+      }`,
+    );
+    for (const transition of scenario.transitions) {
+      if (transition.passed) continue;
+      lines.push(
+        `  - ${transition.from}->${transition.to}: hit=${pct(
+          transition.estimatedHitRatio,
+        )}, miss~${transition.estimatedMissTokens}, ${transition.reason ?? "cache regression"}`,
+      );
+    }
+    if (scenario.error) lines.push(`  - error: ${scenario.error}`);
+  }
+  return lines.join("\n");
+}
+
+export function analyzeScenario(
+  name: string,
+  description: string,
+  requests: readonly CapturedCacheRequest[],
+  expectedBreaks: ReadonlySet<number>,
+  threshold: number,
+): CacheGuardScenarioResult {
+  const transitions: CacheGuardTransition[] = [];
+  for (let i = 1; i < requests.length; i++) {
+    const previous = requests[i - 1]!;
+    const current = requests[i]!;
+    const expectedBreak = expectedBreaks.has(i);
+    const estimatedHitRatio = estimateRenderedHitRatio(previous.rendered, current.rendered);
+    const estimatedMissTokens = Math.max(
+      0,
+      Math.round(current.requestTokens * (1 - estimatedHitRatio)),
+    );
+    const immutablePrefixChanged = previous.immutablePrefixHash !== current.immutablePrefixHash;
+    const passed = expectedBreak || (!immutablePrefixChanged && estimatedHitRatio >= threshold);
+    const reason = passed
+      ? undefined
+      : immutablePrefixChanged
+        ? "immutable prefix changed unexpectedly"
+        : "estimated cache-hit ratio below threshold";
+    transitions.push({
+      from: i - 1,
+      to: i,
+      estimatedHitRatio,
+      estimatedMissTokens,
+      immutablePrefixChanged,
+      expectedBreak,
+      passed,
+      reason,
+    });
+  }
+  const warmTransitions = transitions.filter((transition) => !transition.expectedBreak);
+  const minEstimatedHitRatio =
+    warmTransitions.length === 0
+      ? null
+      : Math.min(...warmTransitions.map((transition) => transition.estimatedHitRatio));
+  const maxEstimatedMissTokens =
+    warmTransitions.length === 0
+      ? 0
+      : Math.max(...warmTransitions.map((transition) => transition.estimatedMissTokens));
+  return {
+    name,
+    description,
+    requests: requests.length,
+    minEstimatedHitRatio,
+    maxEstimatedMissTokens,
+    expectedBreaks: transitions.filter((transition) => transition.expectedBreak).length,
+    transitions,
+    passed: transitions.every((transition) => transition.passed),
+  };
+}
+
+function makeLoop(driver: ScriptedDeepSeek, opts: { session?: string } = {}): CacheFirstLoop {
+  const tools = makeGuardTools();
+  const prefix = new ImmutablePrefix({
+    system: stableSystemPrompt(),
+    toolSpecs: tools.specs(),
+  });
+  const client = new DeepSeekClient({
+    apiKey: "sk-cache-guard",
+    fetch: driver.fetch,
+    retry: { maxAttempts: 1 },
+  });
+  return new CacheFirstLoop({
+    client,
+    prefix,
+    tools,
+    stream: false,
+    model: MODEL,
+    maxIterPerTurn: 8,
+    session: opts.session,
+  });
+}
+
+async function runPlainDialogueScenario(): Promise<ScenarioRun> {
+  const driver = new ScriptedDeepSeek();
+  driver.enqueue(
+    { content: "I inspected the request shape." },
+    { content: "The follow-up keeps the prefix stable." },
+    { content: "The final answer still reuses the warmed prefix." },
+  );
+  const loop = makeLoop(driver);
+  await runUser(loop, "Explain the current cache strategy in one paragraph.");
+  await runUser(loop, "Now summarize the risk if the system prompt changes.");
+  await runUser(loop, "Close with the mitigation.");
+  return {
+    name: "plain-dialogue",
+    description: "普通多轮问答，覆盖 assistant 历史追加后的 warm prefix。",
+    driver,
+    expectedBreaks: new Set(),
+  };
+}
+
+async function runToolRoundTripScenario(): Promise<ScenarioRun> {
+  const driver = new ScriptedDeepSeek();
+  driver.enqueue(
+    {
+      content: "",
+      reasoningContent: "Need to inspect a file before answering.",
+      toolCalls: [toolCall("read_file", { path: "src/loop.ts" }, "call_read_loop")],
+    },
+    { content: "The file read result was incorporated without changing the immutable prefix." },
+    { content: "A second user turn stays warm after the tool result is in history." },
+  );
+  const loop = makeLoop(driver);
+  await runUser(loop, "Read the loop implementation and explain where messages are built.");
+  await runUser(loop, "What cache-sensitive invariant should we keep?");
+  return {
+    name: "tool-roundtrip",
+    description: "单工具调用 + tool result 上传 + 下一轮用户追问。",
+    driver,
+    expectedBreaks: new Set(),
+  };
+}
+
+async function runMultiToolScenario(): Promise<ScenarioRun> {
+  const driver = new ScriptedDeepSeek();
+  driver.enqueue(
+    {
+      content: "",
+      reasoningContent: "Search first, then inspect the matching file.",
+      toolCalls: [
+        toolCall("search_content", { query: "healActiveLogBeforeSend" }, "call_search"),
+        toolCall("list_directory", { path: "src/loop" }, "call_list"),
+      ],
+    },
+    { content: "Both tool results were consumed in one continuation." },
+    { content: "The next turn remains cache-friendly." },
+  );
+  const loop = makeLoop(driver);
+  await runUser(loop, "Find the cache-sensitive healing paths.");
+  await runUser(loop, "Now give the short conclusion.");
+  return {
+    name: "multi-tool",
+    description: "同一轮多个 tool_calls，覆盖并行/批量结果进入下一次 prompt。",
+    driver,
+    expectedBreaks: new Set(),
+  };
+}
+
+async function runReasoningRetentionScenario(): Promise<ScenarioRun> {
+  const driver = new ScriptedDeepSeek();
+  driver.enqueue(
+    { content: "Reasoning-bearing answer.", reasoningContent: "private reasoning block" },
+    { content: "Follow-up after reasoning retention pruning." },
+    { content: "Another follow-up confirms the warmed prefix." },
+  );
+  const loop = makeLoop(driver);
+  await runUser(loop, "Answer with thinking-mode metadata present.");
+  await runUser(loop, "Ask a follow-up after the assistant reasoning is historical.");
+  await runUser(loop, "Ask one more follow-up.");
+  return {
+    name: "reasoning-retention",
+    description: "thinking-mode assistant reasoning round-trip / prune 路径。",
+    driver,
+    expectedBreaks: new Set(),
+  };
+}
+
+async function runLongSessionResumeScenario(): Promise<ScenarioRun> {
+  const session = "cache-guard-long-session";
+  for (let i = 0; i < 130; i++) {
+    appendSessionMessage(session, {
+      role: "user",
+      content: `historical user turn ${i}: ${longStableLine(i)}`,
+    });
+    appendSessionMessage(
+      session,
+      buildAssistantMessage(`historical assistant turn ${i}: ${longStableLine(i)}`, [], MODEL, ""),
+    );
+  }
+  const driver = new ScriptedDeepSeek();
+  driver.enqueue(
+    { content: "Resumed long session successfully." },
+    { content: "Follow-up after resume stayed warm." },
+  );
+  const loop = makeLoop(driver, { session });
+  await runUser(loop, "Resume this long session and answer briefly.");
+  await runUser(loop, "One more follow-up in the same long session.");
+  return {
+    name: "long-session-resume",
+    description: "超过 200 条消息的窗口日志恢复，覆盖 toFullHistory()/session fallback。",
+    driver,
+    expectedBreaks: new Set(),
+  };
+}
+
+async function runMcpHotAddScenario(): Promise<ScenarioRun> {
+  const driver = new ScriptedDeepSeek();
+  driver.enqueue(
+    { content: "Before MCP hot-add." },
+    { content: "After MCP hot-add; one cache break is expected." },
+    { content: "The following turn should be warm again." },
+  );
+  const expectedBreaks = new Set<number>();
+  const loop = makeLoop(driver);
+  await runUser(loop, "Start before adding an MCP-like tool.");
+  expectedBreaks.add(driver.requests.length);
+  const mcpSpec = makeMcpToolSpec();
+  loop.tools.register({
+    name: mcpSpec.function.name,
+    description: mcpSpec.function.description,
+    parameters: mcpSpec.function.parameters,
+    readOnly: true,
+    fn: () => "mcp result",
+  });
+  loop.prefix.addTool(mcpSpec);
+  await runUser(loop, "Now continue after the MCP tool was hot-added.");
+  await runUser(loop, "Verify the re-warmed prefix.");
+  return {
+    name: "mcp-hot-add",
+    description: "MCP 工具热添加允许一次预期 cache break，随后必须恢复高命中。",
+    driver,
+    expectedBreaks,
+  };
+}
+
+async function runProOneShotScenario(): Promise<ScenarioRun> {
+  const driver = new ScriptedDeepSeek();
+  driver.enqueue(
+    { content: "<<<NEEDS_PRO: cache guard escalation check>>>" },
+    { content: "Pro one-shot answer." },
+    { content: "Back on flash after one-shot escalation." },
+    { content: "A stable flash follow-up." },
+  );
+  const loop = makeLoop(driver);
+  await runUser(loop, "Use the pro one-shot path if needed.");
+  const expectedBreaks = new Set([1, 2]);
+  await runUser(loop, "Confirm the model restored to flash.");
+  await runUser(loop, "Confirm the next flash turn is warm.");
+  return {
+    name: "pro-one-shot",
+    description: "Flash -> Pro one-shot escalation 是预期 break，恢复后下一轮必须 warm。",
+    driver,
+    expectedBreaks,
+  };
+}
+
+async function runUser(loop: CacheFirstLoop, prompt: string): Promise<void> {
+  const errors: string[] = [];
+  await loop.run(prompt, (event) => {
+    if (event.role === "error") errors.push(event.error ?? "unknown loop error");
+  });
+  if (errors.length > 0) throw new Error(errors.join("; "));
+}
+
+function makeGuardTools(): ToolRegistry {
+  const tools = new ToolRegistry();
+  tools.register({
+    name: "read_file",
+    description:
+      "Read a UTF-8 text file from the project and return a bounded excerpt with path, line count, and relevant content.",
+    readOnly: true,
+    parameters: {
+      type: "object",
+      properties: { path: { type: "string", description: "Project-relative file path." } },
+      required: ["path"],
+    },
+    fn: (args: { path: string }) =>
+      `file ${args.path}\n1 export function healActiveLogBeforeSend() {}\n2 // stable cache guard fixture`,
+  });
+  tools.register({
+    name: "search_content",
+    description:
+      "Search project text with a literal query and return matching file paths with compact snippets.",
+    readOnly: true,
+    parameters: {
+      type: "object",
+      properties: { query: { type: "string", description: "Literal query to search." } },
+      required: ["query"],
+    },
+    fn: (args: { query: string }) =>
+      JSON.stringify({ query: args.query, matches: ["src/loop.ts:555", "src/tokenizer.ts:612"] }),
+  });
+  tools.register({
+    name: "list_directory",
+    description:
+      "List a project directory with stable ordering, including file names, child counts, and short type labels.",
+    readOnly: true,
+    parameters: {
+      type: "object",
+      properties: { path: { type: "string", description: "Project-relative directory path." } },
+      required: ["path"],
+    },
+    fn: (args: { path: string }) =>
+      JSON.stringify({ path: args.path, entries: ["healing.ts", "messages.ts", "streaming.ts"] }),
+  });
+  tools.register({
+    name: "edit_file",
+    description:
+      "Apply a SEARCH/REPLACE edit block to one file. Included in the guard to keep mutating tool schemas in the prefix.",
+    parameters: {
+      type: "object",
+      properties: {
+        path: { type: "string" },
+        search: { type: "string" },
+        replace: { type: "string" },
+      },
+      required: ["path", "search", "replace"],
+    },
+    fn: () => "edit accepted by cache guard fixture",
+  });
+  tools.register({
+    name: "todo_write",
+    description:
+      "Write the current task checklist with pending, in_progress, and completed states.",
+    parameters: {
+      type: "object",
+      properties: {
+        todos: {
+          type: "array",
+          items: {
+            type: "object",
+            properties: {
+              content: { type: "string" },
+              status: { type: "string", enum: ["pending", "in_progress", "completed"] },
+            },
+            required: ["content", "status"],
+          },
+        },
+      },
+      required: ["todos"],
+    },
+    fn: () => "todos saved",
+  });
+  return tools;
+}
+
+function capturePayload(payload: {
+  model?: string;
+  messages?: ChatMessage[];
+  tools?: ToolSpec[];
+}): CapturedCacheRequest {
+  const model = payload.model ?? MODEL;
+  const messages = payload.messages ?? [];
+  const tools = payload.tools ?? [];
+  const rendered = renderCacheGuardSurface({ model, messages, tools });
+  return {
+    model,
+    messages,
+    tools,
+    rendered,
+    renderedTokens: countTokensBounded(rendered),
+    requestTokens: estimateRequestTokens(messages, tools, true),
+    immutablePrefixHash: hashImmutablePrefix(model, messages, tools),
+  };
+}
+
+export function renderCacheGuardSurface(req: {
+  model: string;
+  messages: ChatMessage[];
+  tools: ToolSpec[];
+}): string {
+  const systemMessages = req.messages
+    .filter((message) => message.role === "system")
+    .map(normalizeMessageForCache);
+  const conversationMessages = req.messages
+    .filter((message) => message.role !== "system")
+    .map(normalizeMessageForCache);
+  return [
+    `model:${req.model}`,
+    `tools:${stableStringify(req.tools)}`,
+    `system:${stableStringify(systemMessages)}`,
+    `conversation:${stableStringify(conversationMessages)}`,
+  ].join("\n");
+}
+
+function hashImmutablePrefix(model: string, messages: ChatMessage[], tools: ToolSpec[]): string {
+  const system = messages.find((message) => message.role === "system")?.content ?? "";
+  return hash({ model, system, tools });
+}
+
+function estimateRenderedHitRatio(previous: string, current: string): number {
+  const shared = commonPrefixLength(previous, current);
+  if (current.length === 0) return 1;
+  return Math.min(1, countTokensBounded(current.slice(0, shared)) / countTokensBounded(current));
+}
+
+function commonPrefixLength(a: string, b: string): number {
+  const max = Math.min(a.length, b.length);
+  let i = 0;
+  while (i < max && a.charCodeAt(i) === b.charCodeAt(i)) i++;
+  return i;
+}
+
+function normalizeMessageForCache(message: ChatMessage): Record<string, unknown> {
+  const normalized: Record<string, unknown> = {};
+  for (const key of MESSAGE_CACHE_KEYS) {
+    const value = message[key];
+    if (value !== undefined) normalized[key] = value;
+  }
+  return normalized;
+}
+
+function stableStringify(value: unknown): string {
+  return JSON.stringify(sortJson(value));
+}
+
+function sortJson(value: unknown): unknown {
+  if (Array.isArray(value)) return value.map((item) => sortJson(item));
+  if (value !== null && typeof value === "object") {
+    const input = value as Record<string, unknown>;
+    const sorted: Record<string, unknown> = {};
+    for (const key of Object.keys(input).sort()) {
+      const child = input[key];
+      if (child !== undefined) sorted[key] = sortJson(child);
+    }
+    return sorted;
+  }
+  return value;
+}
+
+function parsePayload(body: unknown): {
+  model?: string;
+  messages?: ChatMessage[];
+  tools?: ToolSpec[];
+} {
+  if (typeof body === "string") return JSON.parse(body);
+  if (body instanceof Uint8Array) return JSON.parse(new TextDecoder().decode(body));
+  return {};
+}
+
+function stableSystemPrompt(): string {
+  const lines = Array.from(
+    { length: 220 },
+    (_, i) =>
+      `Cache invariant ${String(i + 1).padStart(2, "0")}: preserve stable system text, tool schema order, message history, reasoning retention, MCP append semantics, and long-session recovery.`,
+  );
+  return [
+    "You are the Reasonix cache guard fixture. This prompt is intentionally large and deterministic.",
+    ...lines,
+  ].join("\n");
+}
+
+function longStableLine(i: number): string {
+  return `cache-safe historical payload ${i} ${"alpha beta gamma delta ".repeat(8)}`;
+}
+
+function toolCall(name: string, args: Record<string, unknown>, id: string): ToolCall {
+  return {
+    id,
+    type: "function",
+    function: { name, arguments: JSON.stringify(args) },
+  };
+}
+
+function makeMcpToolSpec(): ToolSpec {
+  return {
+    type: "function",
+    function: {
+      name: "exa_search",
+      description:
+        "MCP-provided semantic web search tool. Hot-added in the cache guard to model an expected one-turn cache break.",
+      parameters: {
+        type: "object",
+        properties: {
+          query: { type: "string" },
+          domains: { type: "array", items: { type: "string" } },
+        },
+        required: ["query"],
+      },
+    },
+  };
+}
+
+function hash(value: unknown): string {
+  return createHash("sha256").update(JSON.stringify(value)).digest("hex").slice(0, 16);
+}
+
+function pct(value: number): string {
+  return `${(value * 100).toFixed(1)}%`;
+}
+
+function pad(value: string, width: number): string {
+  return value.length >= width ? value : value + " ".repeat(width - value.length);
+}
diff --git a/tests/cache-guard.test.ts b/tests/cache-guard.test.ts
new file mode 100644
index 000000000..131305efa
--- /dev/null
+++ b/tests/cache-guard.test.ts
@@ -0,0 +1,95 @@
+import { describe, expect, it } from "vitest";
+import {
+  type CapturedCacheRequest,
+  analyzeScenario,
+  renderCacheGuardSurface,
+  runCacheGuard,
+} from "../src/telemetry/cache-guard.js";
+import type { ChatMessage, ToolSpec } from "../src/types.js";
+
+describe("cache guard", () => {
+  it("passes the built-in cache-sensitive dialogue scenarios", async () => {
+    const report = await runCacheGuard();
+
+    expect(report.passed).toBe(true);
+    expect(report.scenarios.map((scenario) => scenario.name)).toEqual([
+      "plain-dialogue",
+      "tool-roundtrip",
+      "multi-tool",
+      "reasoning-retention",
+      "long-session-resume",
+      "mcp-hot-add",
+      "pro-one-shot",
+    ]);
+    for (const scenario of report.scenarios) {
+      expect(scenario.passed, scenario.name).toBe(true);
+      expect(scenario.requests, scenario.name).toBeGreaterThan(1);
+    }
+  });
+
+  it("fails an unexpected immutable-prefix change", () => {
+    const base = {
+      model: "deepseek-v4-flash",
+      messages: [],
+      tools: [],
+      rendered: "model:deepseek-v4-flash\ntools:[]\nprompt:system-a user-a",
+      renderedTokens: 100,
+      requestTokens: 100,
+      immutablePrefixHash: "same",
+    };
+    const changed = {
+      ...base,
+      rendered: 'model:deepseek-v4-flash\ntools:[{"name":"new"}]\nprompt:system-a user-a',
+      immutablePrefixHash: "changed",
+    };
+
+    const result = analyzeScenario("fixture", "fixture", [base, changed], new Set(), 0.9);
+
+    expect(result.passed).toBe(false);
+    expect(result.transitions[0]?.reason).toBe("immutable prefix changed unexpectedly");
+  });
+
+  it("fails when historical thinking-mode assistant shape loses empty reasoning_content", () => {
+    const tools: ToolSpec[] = [];
+    const system: ChatMessage = {
+      role: "system",
+      content: "stable cache prefix ".repeat(800),
+    };
+    const history: ChatMessage[] = Array.from({ length: 12 }, (_, i) => [
+      { role: "user" as const, content: `question ${i}` },
+      { role: "assistant" as const, content: `answer ${i}`, reasoning_content: "" },
+    ]).flat();
+    const currentHistory = history.map((message, i) =>
+      i === 1 ? { role: "assistant" as const, content: message.content } : message,
+    );
+
+    const previous = cacheRequest([system, ...history], tools);
+    const current = cacheRequest(
+      [...currentHistory, { role: "user", content: "next question" }],
+      tools,
+    );
+
+    expect(previous.rendered).toContain('"reasoning_content":""');
+    const result = analyzeScenario("fixture", "fixture", [previous, current], new Set(), 0.85);
+
+    expect(result.passed).toBe(false);
+    expect(result.transitions[0]?.reason).toBe("estimated cache-hit ratio below threshold");
+  });
+});
+
+function cacheRequest(messages: ChatMessage[], tools: ToolSpec[]): CapturedCacheRequest {
+  const rendered = renderCacheGuardSurface({
+    model: "deepseek-v4-flash",
+    messages,
+    tools,
+  });
+  return {
+    model: "deepseek-v4-flash",
+    messages,
+    tools,
+    rendered,
+    renderedTokens: 100,
+    requestTokens: 100,
+    immutablePrefixHash: "same",
+  };
+}

From a8eb58043def4729042bd2018a27b1750c60b97e Mon Sep 17 00:00:00 2001
From: lab1 <liuxw96@foxmail.com>
Date: Sat, 30 May 2026 10:48:43 +0800
Subject: [PATCH 06/10] fix(desktop): improve chat UX and add regression gates

---
 .github/PULL_REQUEST_TEMPLATE.md              |    2 +
 .github/workflows/ci.yml                      |    9 +
 desktop/src/App.test.ts                       |   18 +-
 desktop/src/App.tsx                           |  881 +++++++--
 desktop/src/CodeView.tsx                      |  131 +-
 desktop/src/CommandPalette.tsx                |   29 +-
 desktop/src/Markdown.tsx                      |   32 +-
 desktop/src/i18n/de.ts                        |    9 +-
 desktop/src/i18n/en.ts                        |    3 +-
 desktop/src/i18n/ja.ts                        |    4 +-
 desktop/src/i18n/zh-CN.ts                     |    3 +-
 desktop/src/icons.tsx                         |  330 +++-
 desktop/src/main.tsx                          |    7 +-
 desktop/src/notifications.test.ts             |    2 +-
 desktop/src/notifications.ts                  |    5 +-
 desktop/src/styles.css                        | 1738 +++++++++++++----
 desktop/src/ui/about.tsx                      |   21 +-
 desktop/src/ui/cards.tsx                      |  139 +-
 desktop/src/ui/composer.tsx                   |  289 ++-
 desktop/src/ui/context-panel.tsx              |   74 +-
 desktop/src/ui/extra-cards.tsx                |   79 +-
 desktop/src/ui/jobs-pop.tsx                   |   68 +-
 desktop/src/ui/jump-bar.tsx                   |   34 +-
 desktop/src/ui/live.tsx                       |   55 +-
 desktop/src/ui/settings.tsx                   |   73 +-
 desktop/src/ui/shortcut.tsx                   |   14 +-
 desktop/src/ui/sidebar.tsx                    |  150 +-
 desktop/src/ui/splash.tsx                     |    2 +-
 desktop/src/ui/statusbar.tsx                  |   46 +-
 desktop/src/ui/thread.tsx                     |   71 +-
 desktop/src/ui/useAutoCollapse.ts             |    4 +-
 desktop/src/ui/useAutoScroll.ts               |    4 +-
 desktop/src/ui/useDisableTextAssist.ts        |    4 +-
 desktop/src/ui/workdir-pop.tsx                |   36 +-
 desktop/vite.config.ts                        |   36 +-
 package.json                                  |   12 +-
 tests/desktop-sidebar-new-chat-layout.test.ts |    3 +-
 37 files changed, 3349 insertions(+), 1068 deletions(-)

diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index ea827b0bb..a2def8e57 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -15,6 +15,8 @@
 ## Checklist
 
 - [ ] `npm run verify` passes locally (lint + typecheck + tests + comment-policy gate)
+- [ ] If desktop UI changed: `npm run verify:desktop` passes
+- [ ] If desktop UI changed: buttons, popovers, sidebars, and chat auto-scroll were checked at narrow desktop widths
 - [ ] No `Co-Authored-By: Claude` trailer in commits
 - [ ] Comments follow CONTRIBUTING.md (no module-essay headers, no incident history)
 - [ ] No edits to `CHANGELOG.md` — release notes are maintainer-written at release time
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index fd36fcd29..30268ab30 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -23,10 +23,16 @@ jobs:
         with:
           node-version: ${{ matrix.node }}
           cache: npm
+          cache-dependency-path: |
+            package-lock.json
+            desktop/package-lock.json
 
       - name: Install dependencies
         run: npm ci
 
+      - name: Install desktop dependencies
+        run: npm ci --prefix desktop
+
       - name: Lint (biome)
         run: npm run lint
 
@@ -36,6 +42,9 @@ jobs:
       - name: Build (tsup + dashboard)
         run: npm run build
 
+      - name: Build desktop
+        run: npm run build:desktop
+
       - name: Test (vitest + coverage)
         run: npm run test:coverage
 
diff --git a/desktop/src/App.test.ts b/desktop/src/App.test.ts
index 6cced4463..31c76b007 100644
--- a/desktop/src/App.test.ts
+++ b/desktop/src/App.test.ts
@@ -395,14 +395,14 @@ describe("desktop thread layout", () => {
     const side = 244;
     const ctx = 320;
 
-    expect(
-      getThreadMaxWidth({ viewportWidth: 1000, visibleSide: side, visibleCtx: ctx }),
-    ).toBe(580);
-    expect(
-      getThreadMaxWidth({ viewportWidth: 1400, visibleSide: side, visibleCtx: ctx }),
-    ).toBe(756);
-    expect(
-      getThreadMaxWidth({ viewportWidth: 1800, visibleSide: side, visibleCtx: ctx }),
-    ).toBe(1120);
+    expect(getThreadMaxWidth({ viewportWidth: 1000, visibleSide: side, visibleCtx: ctx })).toBe(
+      580,
+    );
+    expect(getThreadMaxWidth({ viewportWidth: 1400, visibleSide: side, visibleCtx: ctx })).toBe(
+      756,
+    );
+    expect(getThreadMaxWidth({ viewportWidth: 1800, visibleSide: side, visibleCtx: ctx })).toBe(
+      1120,
+    );
   });
 });
diff --git a/desktop/src/App.tsx b/desktop/src/App.tsx
index a06e4715f..95bf73a6a 100644
--- a/desktop/src/App.tsx
+++ b/desktop/src/App.tsx
@@ -7,22 +7,53 @@ import {
   requestPermission as requestNotificationPermission,
   sendNotification,
 } from "@tauri-apps/plugin-notification";
+import { openUrl } from "@tauri-apps/plugin-opener";
 import { relaunch } from "@tauri-apps/plugin-process";
 import { type Update, check } from "@tauri-apps/plugin-updater";
-import { useCallback, useEffect, useReducer, useRef, useState } from "react";
+import {
+  type ReactNode,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useReducer,
+  useRef,
+  useState,
+} from "react";
+import { type ScrollerProps, Virtuoso, type VirtuosoHandle } from "react-virtuoso";
 import { CommandPalette, Toast, buildCommands, useCommandPalette } from "./CommandPalette";
 import { WorkspaceProvider } from "./Markdown";
-import {
-  nextAbortDraftCandidate,
-  restoreAbortedDraft,
-  type AbortDraftSource,
-} from "./abort-draft";
+import { type AbortDraftSource, nextAbortDraftCandidate, restoreAbortedDraft } from "./abort-draft";
 import { getLang, getLangLabel, getSupportedLangs, setLang, t, useLang } from "./i18n";
 import { I } from "./icons";
 import {
+  type ApprovalSnapshot,
+  deriveDesktopNotifications,
+  dispatchDesktopNotifications,
+  shouldShowCompletionToast,
+} from "./notifications";
+import type {
+  CheckpointVerdict,
+  ChoiceVerdict,
+  ConfirmationChoice,
+  ExternalSessionApp,
+  ExternalSessionSource,
+  IncomingEvent,
+  JobInfo,
+  McpSpecInfo,
+  MemoryDetail,
+  MemoryEntryInfo,
+  OutgoingCommand,
+  PlanVerdict,
+  RevisionVerdict,
+  SettingsPatch,
+  SkillInfo,
+} from "./protocol";
+import type { QQDesktopSettingsState } from "./qq-settings";
+import {
+  type SlashSettingsCommand,
   buildSlashSettingsDescriptors,
   parseSlashSettingsCommand,
-  type SlashSettingsCommand,
 } from "./slash-settings";
 import {
   FONT_FAMILY,
@@ -41,47 +72,23 @@ import {
   isThemeStyle,
   themeForStyle,
 } from "./theme";
-import type {
-  CheckpointVerdict,
-  ChoiceVerdict,
-  ConfirmationChoice,
-  ExternalSessionApp,
-  ExternalSessionSource,
-  IncomingEvent,
-  JobInfo,
-  McpSpecInfo,
-  MemoryDetail,
-  MemoryEntryInfo,
-  OutgoingCommand,
-  PlanVerdict,
-  RevisionVerdict,
-  SettingsPatch,
-  SkillInfo,
-} from "./protocol";
-import { type QQDesktopSettingsState } from "./qq-settings";
+import { AboutModal } from "./ui/about";
+import { parseEditResult } from "./ui/cards";
 import { Composer, type SlashCmd } from "./ui/composer";
 import { ContextPanel } from "./ui/context-panel";
 import { JobsPop } from "./ui/jobs-pop";
+import { JumpBar } from "./ui/jump-bar";
 import { useElapsed } from "./ui/live";
-import { AboutModal } from "./ui/about";
 import { SettingsModal, type PageId as SettingsPageId } from "./ui/settings";
-import { JumpBar } from "./ui/jump-bar";
-import { Virtuoso, type VirtuosoHandle } from "react-virtuoso";
-import { Sidebar } from "./ui/sidebar";
 import { Shortcut, localizeShortcutText, shortcutText } from "./ui/shortcut";
+import { Sidebar } from "./ui/sidebar";
 import { Splash, shouldShowSplash } from "./ui/splash";
-import { StatusBar } from "./ui/statusbar";
 import {
   StartupFailure,
-  coerceStartupFailure,
   type StartupFailureState,
+  coerceStartupFailure,
 } from "./ui/startup-failure";
-import {
-  dispatchDesktopNotifications,
-  deriveDesktopNotifications,
-  shouldShowCompletionToast,
-  type ApprovalSnapshot,
-} from "./notifications";
+import { StatusBar } from "./ui/statusbar";
 import {
   ActivePlanTaskCard,
   AssistantMsg,
@@ -95,18 +102,16 @@ import {
   TurnDivider,
   UserMsg,
 } from "./ui/thread";
-import { WorkdirPop } from "./ui/workdir-pop";
-import { parseEditResult } from "./ui/cards";
-import { useAutoCollapse } from "./ui/useAutoCollapse";
-import { useResizable } from "./ui/useResizable";
-import { useAutoScroll } from "./ui/useAutoScroll";
-import { useDisableTextAssist } from "./ui/useDisableTextAssist";
 import { getThreadMaxWidth } from "./ui/thread-layout";
 import { elideTranscriptMessages } from "./ui/transcript-elision";
-import { openUrl } from "@tauri-apps/plugin-opener";
+import { useAutoCollapse } from "./ui/useAutoCollapse";
+import { useDisableTextAssist } from "./ui/useDisableTextAssist";
+import { useResizable } from "./ui/useResizable";
+import { WorkdirPop } from "./ui/workdir-pop";
 
 const RIGHT_SIDEBAR_COLLAPSE_WIDTH = 1120;
 const LEFT_SIDEBAR_COLLAPSE_WIDTH = 760;
+const THREAD_BOTTOM_THRESHOLD = 80;
 
 const RESPONSIVE_STAGE = {
   WIDE: "wide",
@@ -116,12 +121,30 @@ const RESPONSIVE_STAGE = {
 
 type ResponsiveStage = (typeof RESPONSIVE_STAGE)[keyof typeof RESPONSIVE_STAGE];
 
+type ApprovalQueueItem = {
+  key: string;
+  label: string;
+  node: ReactNode;
+};
+
 function responsiveStage(width: number): ResponsiveStage {
   if (width < LEFT_SIDEBAR_COLLAPSE_WIDTH) return RESPONSIVE_STAGE.NARROW;
   if (width < RIGHT_SIDEBAR_COLLAPSE_WIDTH) return RESPONSIVE_STAGE.COMPACT;
   return RESPONSIVE_STAGE.WIDE;
 }
 
+function ThreadTail() {
+  return <div className="thread-tail" />;
+}
+
+function hasScrollableOverflow(el: HTMLElement): boolean {
+  return el.scrollHeight > el.clientHeight + THREAD_BOTTOM_THRESHOLD;
+}
+
+function isElementAtBottom(el: HTMLElement): boolean {
+  return el.scrollTop + el.clientHeight >= el.scrollHeight - THREAD_BOTTOM_THRESHOLD;
+}
+
 export type AssistantSegment =
   | { kind: "text"; text: string }
   | { kind: "reasoning"; text: string }
@@ -230,13 +253,20 @@ export type UsageStats = {
   liveLogTokens: number;
 };
 
-type WindowControls = Pick<ReturnType<typeof getCurrentWindow>, "isFullscreen" | "isMaximized" | "setFullscreen" | "toggleMaximize">;
+type WindowControls = Pick<
+  ReturnType<typeof getCurrentWindow>,
+  "isFullscreen" | "isMaximized" | "setFullscreen" | "toggleMaximize"
+>;
 
 export function readWindowExpanded(win: WindowControls, isMac: boolean): Promise<boolean> {
   return isMac ? win.isFullscreen() : win.isMaximized();
 }
 
-export function toggleWindowExpanded(win: WindowControls, isMac: boolean, expanded: boolean): Promise<void> {
+export function toggleWindowExpanded(
+  win: WindowControls,
+  isMac: boolean,
+  expanded: boolean,
+): Promise<void> {
   if (isMac) return win.setFullscreen(!expanded);
   return win.toggleMaximize();
 }
@@ -410,9 +440,7 @@ function fallbackSkillDesc(skill: SkillInfo): string {
         ? t("app.skill.scope.global")
         : t("app.skill.scope.project");
   const runAs =
-    skill.runAs === "subagent"
-      ? t("app.skill.runAs.subagent")
-      : t("app.skill.runAs.inline");
+    skill.runAs === "subagent" ? t("app.skill.runAs.subagent") : t("app.skill.runAs.inline");
   return t("app.skill.generic", { scope, runAs });
 }
 
@@ -442,7 +470,12 @@ function reduceRaw(state: State, action: Action): State {
         busy: true,
         messages: [
           ...state.messages,
-          { kind: "user", text: action.text, clientId: action.clientId, turn: nextMessageTurn(state.messages) },
+          {
+            kind: "user",
+            text: action.text,
+            clientId: action.clientId,
+            turn: nextMessageTurn(state.messages),
+          },
         ],
       };
     }
@@ -594,9 +627,7 @@ function reduceRaw(state: State, action: Action): State {
     case "dismiss_error":
       return {
         ...state,
-        messages: state.messages.filter(
-          (m) => !(m.kind === "error" && m.id === action.id),
-        ),
+        messages: state.messages.filter((m) => !(m.kind === "error" && m.id === action.id)),
       };
     case "mention_results":
       return { ...state, mentionResults: action.results };
@@ -671,16 +702,13 @@ function DiffStats({ stats }: { stats: FileStats }) {
   const total = stats.entries.length;
   return (
     <div className="diff-stats">
-      <button
-        type="button"
-        className="diff-stats-head"
-        onClick={() => setOpen((v) => !v)}
-      >
+      <button type="button" className="diff-stats-head" onClick={() => setOpen((v) => !v)}>
         <span className="ico">
           <I.diff size={11} />
         </span>
         <span>
-          {total} {total === 1 ? "file" : "files"} changed · +{stats.totalAdded} / −{stats.totalRemoved} {stats.totalRemoved === 1 ? "line" : "lines"}
+          {total} {total === 1 ? "file" : "files"} changed · +{stats.totalAdded} / −
+          {stats.totalRemoved} {stats.totalRemoved === 1 ? "line" : "lines"}
         </span>
         <span className="chev">{open ? <I.chev size={10} /> : <I.chevR size={10} />}</span>
       </button>
@@ -1095,10 +1123,7 @@ function applyIncomingRaw(state: State, ev: IncomingEvent): State {
           ...state.messages,
           {
             kind: "error",
-            message:
-              `Session "${ev.name}" loaded with no messages (${sizeNote}). ` +
-              `The file ~/.reasonix/sessions/${ev.name}.jsonl exists but couldn't be parsed — ` +
-              `start a new chat or restore from .jsonl.bak if you have one.`,
+            message: `Session "${ev.name}" loaded with no messages (${sizeNote}). The file ~/.reasonix/sessions/${ev.name}.jsonl exists but couldn't be parsed — start a new chat or restore from .jsonl.bak if you have one.`,
             id: nextErrorId(),
           },
         ],
@@ -1147,8 +1172,10 @@ function applyIncomingRaw(state: State, ev: IncomingEvent): State {
         const m = state.messages[i]!;
         if (m.kind !== "assistant" || m.turn !== ev.turn) continue;
         let updated = m;
-        if (ev.channel === "content") updated = { ...m, segments: appendTextSegment(m.segments, "text", ev.text) };
-        else if (ev.channel === "reasoning") updated = { ...m, segments: appendTextSegment(m.segments, "reasoning", ev.text) };
+        if (ev.channel === "content")
+          updated = { ...m, segments: appendTextSegment(m.segments, "text", ev.text) };
+        else if (ev.channel === "reasoning")
+          updated = { ...m, segments: appendTextSegment(m.segments, "reasoning", ev.text) };
         const next = [...state.messages];
         next[i] = updated;
         return { ...state, messages: next };
@@ -1158,8 +1185,7 @@ function applyIncomingRaw(state: State, ev: IncomingEvent): State {
     case "model.final": {
       const u = ev.usage;
       const promptTokens =
-        u?.prompt_tokens ??
-        (u?.prompt_cache_hit_tokens ?? 0) + (u?.prompt_cache_miss_tokens ?? 0);
+        u?.prompt_tokens ?? (u?.prompt_cache_hit_tokens ?? 0) + (u?.prompt_cache_miss_tokens ?? 0);
       const callHit = u?.prompt_cache_hit_tokens ?? 0;
       const callMiss = u?.prompt_cache_miss_tokens ?? Math.max(0, promptTokens - callHit);
       const hasCall = promptTokens > 0 || callHit > 0 || callMiss > 0;
@@ -1176,18 +1202,19 @@ function applyIncomingRaw(state: State, ev: IncomingEvent): State {
       };
       // Walk backwards to clear pending flag on the matching assistant
       let settledPending = false;
+      let messages = state.messages;
       for (let i = state.messages.length - 1; i >= 0; i--) {
         const m = state.messages[i]!;
         if (m.kind !== "assistant" || m.turn !== ev.turn) continue;
         if (m.pending) {
           const s = [...state.messages];
           s[i] = { ...m, pending: false };
-          state = { ...state, messages: s };
+          messages = s;
         }
         settledPending = true;
         break;
       }
-      return settledPending ? { ...state, usage } : { ...state, usage };
+      return settledPending ? { ...state, messages, usage } : { ...state, usage };
     }
     case "tool.preparing": {
       for (let i = state.messages.length - 1; i >= 0; i--) {
@@ -1195,7 +1222,19 @@ function applyIncomingRaw(state: State, ev: IncomingEvent): State {
         if (m.kind !== "assistant" || m.turn !== ev.turn) continue;
         if (m.segments.some((s) => s.kind === "tool" && s.callId === ev.callId)) return state;
         const next = [...state.messages];
-        next[i] = { ...m, segments: [...m.segments, { kind: "tool" as const, callId: ev.callId, name: ev.name, args: "", startedAt: Date.now() }] };
+        next[i] = {
+          ...m,
+          segments: [
+            ...m.segments,
+            {
+              kind: "tool" as const,
+              callId: ev.callId,
+              name: ev.name,
+              args: "",
+              startedAt: Date.now(),
+            },
+          ],
+        };
         return { ...state, messages: next };
       }
       return state;
@@ -1209,13 +1248,26 @@ function applyIncomingRaw(state: State, ev: IncomingEvent): State {
         const idx = m.segments.findIndex((s) => s.kind === "tool" && s.callId === ev.callId);
         if (idx >= 0) {
           const segs = [...m.segments];
-          if (segs[idx]?.kind === "tool") segs[idx] = { ...(segs[idx] as AssistantSegment & { kind: "tool" }), args: ev.args };
+          if (segs[idx]?.kind === "tool")
+            segs[idx] = { ...(segs[idx] as AssistantSegment & { kind: "tool" }), args: ev.args };
           const msgs = [...nextState.messages];
           msgs[i] = { ...m, segments: segs };
           nextState = { ...nextState, messages: msgs };
         } else {
           const msgs = [...nextState.messages];
-          msgs[i] = { ...m, segments: [...m.segments, { kind: "tool" as const, callId: ev.callId, name: ev.name, args: ev.args, startedAt: Date.now() }] };
+          msgs[i] = {
+            ...m,
+            segments: [
+              ...m.segments,
+              {
+                kind: "tool" as const,
+                callId: ev.callId,
+                name: ev.name,
+                args: ev.args,
+                startedAt: Date.now(),
+              },
+            ],
+          };
           nextState = { ...nextState, messages: msgs };
         }
         break;
@@ -1247,10 +1299,7 @@ function applyIncomingRaw(state: State, ev: IncomingEvent): State {
       return {
         ...state,
         busy: false,
-        messages: [
-          ...state.messages,
-          { kind: "status", text: `≫ btw\n${ev.answer}` },
-        ],
+        messages: [...state.messages, { kind: "status", text: `≫ btw\n${ev.answer}` }],
       };
     case "status":
       return state;
@@ -1303,7 +1352,11 @@ function formatConversationMarkdown(messages: ChatMessage[], userLabel: string):
 }
 
 function sanitizeFilename(name: string): string {
-  return name.replace(/[<>:"/\\|?*\x00-\x1f]/g, "_").replace(/^\.+/, "").slice(0, 200) || "session";
+  const cleaned = Array.from(name, (ch) => {
+    const code = ch.charCodeAt(0);
+    return code < 32 || '<>:"/\\|?*'.includes(ch) ? "_" : ch;
+  }).join("");
+  return cleaned.replace(/^\.+/, "").slice(0, 200) || "session";
 }
 
 function defaultExportFilename(session: string): string {
@@ -1423,12 +1476,19 @@ function TabRuntime({
   >(undefined);
   const composerRef = useRef<HTMLTextAreaElement>(null);
   const threadRef = useRef<HTMLDivElement>(null);
-  const threadInnerRef = useRef<HTMLDivElement>(null);
   const virtuosoRef = useRef<VirtuosoHandle>(null);
+  const virtuosoScrollerRef = useRef<HTMLDivElement | null>(null);
+  const [virtuosoScroller, setVirtuosoScroller] = useState<HTMLDivElement | null>(null);
+  const autoFollowRef = useRef(true);
+  const userDetachedScrollRef = useRef(false);
+  const scrollFrameRef = useRef<number>(0);
+  const scrollBusyRef = useRef(false);
+  const restoredScrollSessionRef = useRef<string | null>(null);
   const [settingsOpen, setSettingsOpen] = useState(false);
   const [settingsPage, setSettingsPage] = useState<SettingsPageId>("general");
   const [jobsOpen, setJobsOpen] = useState(false);
   const [aboutOpen, setAboutOpen] = useState(false);
+  const [approvalTrayExpanded, setApprovalTrayExpanded] = useState(false);
   const previousApprovalSnapshotRef = useRef<ApprovalSnapshot>({
     confirms: [],
     pathAccess: [],
@@ -1455,6 +1515,26 @@ function TabRuntime({
     setSettingsOpen(true);
   }, []);
   const palette = useCommandPalette(active);
+  const VirtuosoScroller = useMemo(
+    () =>
+      forwardRef<HTMLDivElement, ScrollerProps>(function VirtuosoScroller(props, ref) {
+        const setScrollerRef = useCallback(
+          (node: HTMLDivElement | null) => {
+            virtuosoScrollerRef.current = node;
+            setVirtuosoScroller(node);
+            if (typeof ref === "function") {
+              ref(node);
+            } else if (ref) {
+              ref.current = node;
+            }
+          },
+          [ref],
+        );
+
+        return <div {...props} className="thread-scroller" ref={setScrollerRef} />;
+      }),
+    [],
+  );
 
   useEffect(() => {
     registerDispatch(tabId, dispatch);
@@ -1537,13 +1617,10 @@ function TabRuntime({
     }
   }, [clearAbortDraft, saveSettings, state.settings?.workspaceDir]);
 
-  const flashToast = useCallback(
-    (msg: string, opts?: { yolo?: boolean; duration?: number }) => {
-      setToast({ msg, yolo: opts?.yolo });
-      window.setTimeout(() => setToast(null), opts?.duration ?? 1600);
-    },
-    [],
-  );
+  const flashToast = useCallback((msg: string, opts?: { yolo?: boolean; duration?: number }) => {
+    setToast({ msg, yolo: opts?.yolo });
+    window.setTimeout(() => setToast(null), opts?.duration ?? 1600);
+  }, []);
 
   const applyReasoningEffort = useCallback(
     (reasoningEffort: Settings["reasoningEffort"]) => {
@@ -1595,10 +1672,7 @@ function TabRuntime({
         const handle = await webview.onDragDropEvent((event) => {
           if (!dropActiveRef.current) return;
           if (event.payload.type === "enter") {
-            document.body.style.setProperty(
-              "--drop-overlay-label",
-              `"${t("dragDrop.overlay")}"`,
-            );
+            document.body.style.setProperty("--drop-overlay-label", `"${t("dragDrop.overlay")}"`);
             document.body.dataset.dragOver = "1";
             return;
           }
@@ -1692,7 +1766,12 @@ function TabRuntime({
           const clientId = `skill-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
           const trimmedArgs = args?.trim() ?? "";
           recordAbortDraft("skill_run", text);
-          dispatch({ t: "start_skill", skill: { name: skill.name, runAs: skill.runAs }, args: trimmedArgs, clientId });
+          dispatch({
+            t: "start_skill",
+            skill: { name: skill.name, runAs: skill.runAs },
+            args: trimmedArgs,
+            clientId,
+          });
           sendRpc({ cmd: "skill_run", name: skill.name, args: trimmedArgs || undefined });
           if (!override) setDraft("");
           return;
@@ -1736,13 +1815,15 @@ function TabRuntime({
   }, [clearAbortDraft]);
 
   // When /retry returns the last user text, set it as the composer draft
+  const retryTextRef = useRef(state.retryText);
+  retryTextRef.current = state.retryText;
   useEffect(() => {
-    if (state.retryNonce > 0 && state.retryText) {
-      setDraft(state.retryText);
+    const retryText = retryTextRef.current;
+    if (state.retryNonce > 0 && retryText) {
+      setDraft(retryText);
       composerRef.current?.focus();
     }
     // Only fire when retryNonce changes — retryText alone would re-fire on re-renders
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [state.retryNonce]);
 
   const onEditUserMsg = useCallback((t: string) => {
@@ -1761,17 +1842,30 @@ function TabRuntime({
   useEffect(() => {
     const currentSnapshot: ApprovalSnapshot = {
       confirms: state.pendingConfirms.map((c) => ({ id: c.id, command: c.command })),
-      pathAccess: state.pendingPathAccess.map((p) => ({ id: p.id, path: p.path, intent: p.intent })),
+      pathAccess: state.pendingPathAccess.map((p) => ({
+        id: p.id,
+        path: p.path,
+        intent: p.intent,
+      })),
       choices: state.pendingChoices.map((c) => ({ id: c.id, question: c.question })),
       plans: state.pendingPlans.map((p) => ({ id: p.id, summary: p.summary, plan: p.plan })),
-      checkpoints: state.pendingCheckpoints.map((c) => ({ id: c.id, title: c.title, result: c.result })),
-      revisions: state.pendingRevisions.map((r) => ({ id: r.id, summary: r.summary, reason: r.reason })),
+      checkpoints: state.pendingCheckpoints.map((c) => ({
+        id: c.id,
+        title: c.title,
+        result: c.result,
+      })),
+      revisions: state.pendingRevisions.map((r) => ({
+        id: r.id,
+        summary: r.summary,
+        reason: r.reason,
+      })),
     };
     const previousSnapshot = previousApprovalSnapshotRef.current;
     const wasBusy = wasBusyRef.current;
-    const busyDurationMs = wasBusy && !state.busy && busyStartedAtRef.current
-      ? Date.now() - busyStartedAtRef.current
-      : 0;
+    const busyDurationMs =
+      wasBusy && !state.busy && busyStartedAtRef.current
+        ? Date.now() - busyStartedAtRef.current
+        : 0;
 
     if (state.busy && busyStartedAtRef.current === null) {
       busyStartedAtRef.current = Date.now();
@@ -1822,6 +1916,18 @@ function TabRuntime({
     state.pendingRevisions,
   ]);
 
+  const pendingApprovalCount =
+    state.pendingPlans.length +
+    state.pendingCheckpoints.length +
+    state.pendingRevisions.length +
+    state.pendingConfirms.length +
+    state.pendingPathAccess.length +
+    state.pendingChoices.length;
+
+  useEffect(() => {
+    if (pendingApprovalCount <= 1) setApprovalTrayExpanded(false);
+  }, [pendingApprovalCount]);
+
   const resolveConfirm = useCallback(
     (id: number, response: ConfirmationChoice) => {
       sendRpc({ cmd: "confirm_response", id, response });
@@ -1891,17 +1997,169 @@ function TabRuntime({
   }, []);
 
   const [showJumpButton, setShowJumpButton] = useState(false);
-  const { scrollToBottom } = useAutoScroll(
-    threadRef,
-    threadInnerRef,
-    state.busy,
-    restoreScrollTop,
+  const refreshJumpButton = useCallback(() => {
+    const el = virtuosoScrollerRef.current;
+    if (!el) return;
+    setShowJumpButton(
+      userDetachedScrollRef.current && hasScrollableOverflow(el) && !isElementAtBottom(el),
+    );
+  }, []);
+
+  const scrollToBottom = useCallback(
+    (smooth = true) => {
+      autoFollowRef.current = true;
+      userDetachedScrollRef.current = false;
+      setShowJumpButton(false);
+
+      const lastIndex = messageItems.length - 1;
+      if (lastIndex >= 0) {
+        virtuosoRef.current?.scrollToIndex({
+          index: lastIndex,
+          align: "end",
+          behavior: smooth ? "smooth" : "auto",
+        });
+      }
+
+      const el = virtuosoScrollerRef.current;
+      if (el) {
+        el.scrollTo({
+          top: el.scrollHeight,
+          behavior: smooth ? "smooth" : "auto",
+        });
+      }
+    },
+    [messageItems.length],
+  );
+
+  const scheduleScrollToBottom = useCallback(
+    (smooth = false) => {
+      if (scrollFrameRef.current) cancelAnimationFrame(scrollFrameRef.current);
+      scrollFrameRef.current = requestAnimationFrame(() => {
+        scrollFrameRef.current = 0;
+        scrollToBottom(smooth);
+      });
+    },
+    [scrollToBottom],
+  );
+
+  const handleAtBottomStateChange = useCallback(
+    (atBottom: boolean) => {
+      if (atBottom) {
+        autoFollowRef.current = true;
+        userDetachedScrollRef.current = false;
+        setShowJumpButton(false);
+        return;
+      }
+      refreshJumpButton();
+    },
+    [refreshJumpButton],
   );
 
+  const followOutput = useCallback((isAtBottom: boolean) => {
+    return isAtBottom || autoFollowRef.current ? "auto" : false;
+  }, []);
+
+  useEffect(() => {
+    const el = virtuosoScroller;
+    if (!el) return;
+
+    let pendingFrame = 0;
+    const markUserScrollIntent = () => {
+      if (pendingFrame) cancelAnimationFrame(pendingFrame);
+      pendingFrame = requestAnimationFrame(() => {
+        pendingFrame = 0;
+        const atBottom = isElementAtBottom(el);
+        autoFollowRef.current = atBottom;
+        userDetachedScrollRef.current = !atBottom;
+        refreshJumpButton();
+      });
+    };
+
+    let draggingScrollbar = false;
+    const onPointerDown = () => {
+      draggingScrollbar = true;
+      markUserScrollIntent();
+      el.addEventListener("scroll", markUserScrollIntent, { passive: true });
+    };
+    const onPointerEnd = () => {
+      if (!draggingScrollbar) return;
+      draggingScrollbar = false;
+      el.removeEventListener("scroll", markUserScrollIntent);
+      markUserScrollIntent();
+    };
+
+    el.addEventListener("wheel", markUserScrollIntent, { passive: true });
+    el.addEventListener("touchmove", markUserScrollIntent, { passive: true });
+    el.addEventListener("keydown", markUserScrollIntent);
+    el.addEventListener("pointerdown", onPointerDown);
+    window.addEventListener("pointerup", onPointerEnd);
+    window.addEventListener("pointercancel", onPointerEnd);
+
+    return () => {
+      if (pendingFrame) cancelAnimationFrame(pendingFrame);
+      el.removeEventListener("wheel", markUserScrollIntent);
+      el.removeEventListener("touchmove", markUserScrollIntent);
+      el.removeEventListener("keydown", markUserScrollIntent);
+      el.removeEventListener("pointerdown", onPointerDown);
+      el.removeEventListener("scroll", markUserScrollIntent);
+      window.removeEventListener("pointerup", onPointerEnd);
+      window.removeEventListener("pointercancel", onPointerEnd);
+    };
+  }, [refreshJumpButton, virtuosoScroller]);
+
+  useEffect(() => {
+    if (scrollBusyRef.current !== state.busy) {
+      if (state.busy || !userDetachedScrollRef.current) {
+        scheduleScrollToBottom(state.busy);
+      }
+      scrollBusyRef.current = state.busy;
+    }
+  }, [scheduleScrollToBottom, state.busy]);
+
+  useEffect(() => {
+    if (messageItems.length === 0) return;
+    if (!autoFollowRef.current) {
+      refreshJumpButton();
+      return;
+    }
+    scheduleScrollToBottom(false);
+  }, [messageItems, refreshJumpButton, scheduleScrollToBottom]);
+
+  useEffect(() => {
+    return () => {
+      if (scrollFrameRef.current) cancelAnimationFrame(scrollFrameRef.current);
+    };
+  }, []);
+
+  useEffect(() => {
+    const el = virtuosoScroller;
+    const sessionKey = state.currentSession ?? "__new__";
+    if (!el || restoredScrollSessionRef.current === sessionKey) return;
+    restoredScrollSessionRef.current = sessionKey;
+    const id = window.setTimeout(() => {
+      const restore = restoreScrollTop();
+      if (restore != null && restore > THREAD_BOTTOM_THRESHOLD) {
+        autoFollowRef.current = false;
+        userDetachedScrollRef.current = true;
+        el.scrollTop = restore;
+        refreshJumpButton();
+        return;
+      }
+      scheduleScrollToBottom(false);
+    }, 80);
+    return () => window.clearTimeout(id);
+  }, [
+    refreshJumpButton,
+    restoreScrollTop,
+    scheduleScrollToBottom,
+    state.currentSession,
+    virtuosoScroller,
+  ]);
+
   // Persist the transcript scroll offset per session so a restart reopens
   // the conversation where the user left it (#1244).
   useEffect(() => {
-    const el = threadRef.current;
+    const el = virtuosoScroller;
     const session = state.currentSession;
     if (!el || !session) return;
     const key = `reasonix.scroll.${session}`;
@@ -1919,7 +2177,7 @@ function TabRuntime({
       el.removeEventListener("scroll", onScroll);
       clearTimeout(timer);
     };
-  }, [state.currentSession]);
+  }, [state.currentSession, virtuosoScroller]);
 
   useEffect(() => {
     if (!active) return;
@@ -2080,7 +2338,12 @@ function TabRuntime({
         composerRef.current?.focus();
       },
     },
-    { cmd: "/new", desc: t("app.cmd.newSession"), run: () => newChat(), kb: shortcutText(["mod", "N"]) },
+    {
+      cmd: "/new",
+      desc: t("app.cmd.newSession"),
+      run: () => newChat(),
+      kb: shortcutText(["mod", "N"]),
+    },
     { cmd: "/clear", desc: t("app.cmd.clearChat"), run: () => clearConversation() },
     { cmd: "/abort", desc: t("app.cmd.abort"), run: () => abort(), kb: "esc" },
     {
@@ -2239,6 +2502,81 @@ function TabRuntime({
     flashToast(t("app.toast.copiedMd"));
   }, [state.messages, flashToast]);
 
+  const approvalItems: ApprovalQueueItem[] = [
+    ...state.pendingPlans.map((p) => ({
+      key: `pp-${p.id}`,
+      label: t("thread.planConfirmationKind"),
+      node: (
+        <PlanApprovalCard
+          p={p}
+          onApprove={() => resolvePlan(p.id, { type: "approve" })}
+          onRefine={() => resolvePlan(p.id, { type: "refine" })}
+          onCancel={() => resolvePlan(p.id, { type: "cancel" })}
+        />
+      ),
+    })),
+    ...state.pendingCheckpoints.map((c) => ({
+      key: `cp-${c.id}`,
+      label: t("thread.checkpointKind"),
+      node: (
+        <CheckpointApprovalCard
+          c={c}
+          onContinue={() => resolveCheckpoint(c.id, { type: "continue" })}
+          onRevise={() => resolveCheckpoint(c.id, { type: "revise" })}
+          onStop={() => resolveCheckpoint(c.id, { type: "stop" })}
+        />
+      ),
+    })),
+    ...state.pendingRevisions.map((r) => ({
+      key: `rv-${r.id}`,
+      label: t("thread.planRevisionKind"),
+      node: (
+        <RevisionApprovalCard
+          r={r}
+          onAccept={() => resolveRevision(r.id, { type: "accepted" })}
+          onReject={() => resolveRevision(r.id, { type: "rejected" })}
+        />
+      ),
+    })),
+    ...state.pendingConfirms.map((c) => ({
+      key: `cc-${c.id}`,
+      label: t("thread.shellConfirmationKind"),
+      node: (
+        <ConfirmApprovalCard
+          prompt={c.prompt}
+          onAllow={() => resolveConfirm(c.id, { type: "run_once" })}
+          onAlwaysAllow={(prefix) => resolveConfirm(c.id, { type: "always_allow", prefix })}
+          onDeny={() => resolveConfirm(c.id, { type: "deny" })}
+        />
+      ),
+    })),
+    ...state.pendingPathAccess.map((p) => ({
+      key: `pa-${p.id}`,
+      label: t("thread.pathAccessKind"),
+      node: (
+        <PathAccessApprovalCard
+          prompt={p.prompt}
+          onAllow={() => resolvePathAccess(p.id, { type: "run_once" })}
+          onAlwaysAllow={(prefix) => resolvePathAccess(p.id, { type: "always_allow", prefix })}
+          onDeny={() => resolvePathAccess(p.id, { type: "deny" })}
+        />
+      ),
+    })),
+    ...state.pendingChoices.map((c) => ({
+      key: `ch-${c.id}`,
+      label: t("thread.userChoiceKind"),
+      node: (
+        <ChoiceApprovalCard
+          c={c}
+          onPick={(optionId) => resolveChoice(c.id, { type: "pick", optionId })}
+          onCancel={() => resolveChoice(c.id, { type: "cancel" })}
+        />
+      ),
+    })),
+  ];
+  const visibleApprovalItems = approvalTrayExpanded ? approvalItems : approvalItems.slice(0, 1);
+  const hiddenApprovalCount = Math.max(approvalItems.length - visibleApprovalItems.length, 0);
+
   return (
     <WorkspaceProvider
       value={{ dir: state.settings?.workspaceDir, editor: state.settings?.editor }}
@@ -2357,7 +2695,10 @@ function TabRuntime({
                         if (trimmed.startsWith("/")) {
                           const cmd = trimmed.split(/\s+/)[0] ?? "";
                           const match = slashCommands.find((s) => s.cmd === cmd);
-                          if (match) { match.run(); return; }
+                          if (match) {
+                            match.run();
+                            return;
+                          }
                         }
                         send(text);
                       }}
@@ -2369,18 +2710,28 @@ function TabRuntime({
                     ref={virtuosoRef}
                     style={{ height: "100%" }}
                     totalCount={messageItems.length}
-                    followOutput={"auto"}
-                    atBottomStateChange={(atBottom) => setShowJumpButton(!atBottom)}
+                    alignToBottom
+                    followOutput={followOutput}
+                    atBottomThreshold={THREAD_BOTTOM_THRESHOLD}
+                    atBottomStateChange={handleAtBottomStateChange}
+                    increaseViewportBy={{ top: 360, bottom: 720 }}
+                    overscan={{ main: 240, reverse: 240 }}
                     components={{
-                      Header: state.activePlan ? () => (
-                        <div className="thread-inner">
-                          <PlanBanner
-                            plan={state.activePlan!}
-                            onDismiss={state.busy ? undefined : () => dispatch({ t: "dismiss_plan" })}
-                          />
-                          <ActivePlanTaskCard plan={state.activePlan!} />
-                        </div>
-                      ) : undefined,
+                      Scroller: VirtuosoScroller,
+                      Footer: ThreadTail,
+                      Header: state.activePlan
+                        ? () => (
+                            <div className="thread-inner">
+                              <PlanBanner
+                                plan={state.activePlan!}
+                                onDismiss={
+                                  state.busy ? undefined : () => dispatch({ t: "dismiss_plan" })
+                                }
+                              />
+                              <ActivePlanTaskCard plan={state.activePlan!} />
+                            </div>
+                          )
+                        : undefined,
                     }}
                     itemContent={(index) => {
                       const m = state.messages[index]!;
@@ -2415,6 +2766,7 @@ function TabRuntime({
                 )}
                 {showJumpButton ? (
                   <button
+                    type="button"
                     className="thread-jump-bottom"
                     onClick={() => scrollToBottom(true)}
                     title={t("app.jumpToBottom") ?? "Jump to bottom"}
@@ -2425,15 +2777,51 @@ function TabRuntime({
                 ) : null}
               </div>
 
-              {state.pendingPlans.length > 0 || state.pendingCheckpoints.length > 0 || state.pendingRevisions.length > 0 || state.pendingConfirms.length > 0 || state.pendingPathAccess.length > 0 || state.pendingChoices.length > 0 || !state.ready ? (
-                <div style={{ maxWidth: "var(--thread-max-width, 740px)", margin: "0 auto", padding: "0 32px", width: "100%" }}>
-                  {state.pendingPlans.map((p) => (<PlanApprovalCard key={`pp-${p.id}`} p={p} onApprove={() => resolvePlan(p.id, { type: "approve" })} onRefine={() => resolvePlan(p.id, { type: "refine" })} onCancel={() => resolvePlan(p.id, { type: "cancel" })} />))}
-                  {state.pendingCheckpoints.map((c) => (<CheckpointApprovalCard key={`cp-${c.id}`} c={c} onContinue={() => resolveCheckpoint(c.id, { type: "continue" })} onRevise={() => resolveCheckpoint(c.id, { type: "revise" })} onStop={() => resolveCheckpoint(c.id, { type: "stop" })} />))}
-                  {state.pendingRevisions.map((r) => (<RevisionApprovalCard key={`rv-${r.id}`} r={r} onAccept={() => resolveRevision(r.id, { type: "accepted" })} onReject={() => resolveRevision(r.id, { type: "rejected" })} />))}
-                  {state.pendingConfirms.map((c) => (<ConfirmApprovalCard key={`cc-${c.id}`} prompt={c.prompt} onAllow={() => resolveConfirm(c.id, { type: "run_once" })} onAlwaysAllow={(prefix) => resolveConfirm(c.id, { type: "always_allow", prefix })} onDeny={() => resolveConfirm(c.id, { type: "deny" })} />))}
-                  {state.pendingPathAccess.map((p) => (<PathAccessApprovalCard key={`pa-${p.id}`} prompt={p.prompt} onAllow={() => resolvePathAccess(p.id, { type: "run_once" })} onAlwaysAllow={(prefix) => resolvePathAccess(p.id, { type: "always_allow", prefix })} onDeny={() => resolvePathAccess(p.id, { type: "deny" })} />))}
-                  {state.pendingChoices.map((c) => (<ChoiceApprovalCard key={`ch-${c.id}`} c={c} onPick={(optionId) => resolveChoice(c.id, { type: "pick", optionId })} onCancel={() => resolveChoice(c.id, { type: "cancel" })} />))}
-                  {!state.ready ? (<div style={{ padding: 12, color: "var(--muted)", fontFamily: "Geist Mono, monospace", fontSize: 11 }}>{t("app.connecting")}</div>) : null}
+              {approvalItems.length > 0 || !state.ready ? (
+                <div className="approval-tray" data-expanded={approvalTrayExpanded}>
+                  <div className="approval-tray-head">
+                    <span className="approval-tray-title">
+                      <I.shield size={13} />
+                      <span>{approvalItems[0]?.label ?? t("app.connecting")}</span>
+                    </span>
+                    {pendingApprovalCount > 1 ? (
+                      <span className="approval-tray-count">{pendingApprovalCount}</span>
+                    ) : null}
+                    <span className="grow" />
+                    {approvalItems.length > 1 ? (
+                      <button
+                        type="button"
+                        className="approval-tray-toggle"
+                        onClick={() => setApprovalTrayExpanded((v) => !v)}
+                      >
+                        {approvalTrayExpanded
+                          ? t("thread.collapse")
+                          : `${t("app.titlebar.more")} ${hiddenApprovalCount}`}
+                      </button>
+                    ) : null}
+                  </div>
+                  <div className="approval-stack">
+                    {visibleApprovalItems.map((item) => (
+                      <div className="approval-slot" key={item.key}>
+                        {item.node}
+                      </div>
+                    ))}
+                    {!approvalTrayExpanded && hiddenApprovalCount > 0 ? (
+                      <button
+                        type="button"
+                        className="approval-queue-more"
+                        onClick={() => setApprovalTrayExpanded(true)}
+                      >
+                        <I.more size={13} />
+                        <span>
+                          {t("app.titlebar.more")} · {hiddenApprovalCount}
+                        </span>
+                      </button>
+                    ) : null}
+                    {!state.ready ? (
+                      <div className="approval-connecting">{t("app.connecting")}</div>
+                    ) : null}
+                  </div>
                 </div>
               ) : null}
 
@@ -2612,6 +3000,7 @@ function TabRuntime({
 function WinMinimize() {
   return (
     <svg width="10" height="1" viewBox="0 0 10 1" aria-hidden>
+      <title>Minimize</title>
       <rect width="10" height="1" fill="currentColor" />
     </svg>
   );
@@ -2619,23 +3008,66 @@ function WinMinimize() {
 function WinMaximize() {
   return (
     <svg width="10" height="10" viewBox="0 0 10 10" aria-hidden>
-      <rect x="0.5" y="0.5" width="9" height="9" fill="none" stroke="currentColor" strokeWidth="1" />
+      <title>Maximize</title>
+      <rect
+        x="0.5"
+        y="0.5"
+        width="9"
+        height="9"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1"
+      />
     </svg>
   );
 }
 function WinRestore() {
   return (
     <svg width="10" height="10" viewBox="0 0 10 10" aria-hidden>
-      <rect x="2.5" y="0.5" width="7" height="7" fill="none" stroke="currentColor" strokeWidth="1" />
-      <rect x="0.5" y="2.5" width="7" height="7" fill="var(--bg-2, #eee)" stroke="currentColor" strokeWidth="1" />
+      <title>Restore</title>
+      <rect
+        x="2.5"
+        y="0.5"
+        width="7"
+        height="7"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1"
+      />
+      <rect
+        x="0.5"
+        y="2.5"
+        width="7"
+        height="7"
+        fill="var(--bg-2, #eee)"
+        stroke="currentColor"
+        strokeWidth="1"
+      />
     </svg>
   );
 }
 function WinClose() {
   return (
     <svg width="10" height="10" viewBox="0 0 10 10" aria-hidden>
-      <line x1="0.5" y1="0.5" x2="9.5" y2="9.5" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
-      <line x1="9.5" y1="0.5" x2="0.5" y2="9.5" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
+      <title>Close</title>
+      <line
+        x1="0.5"
+        y1="0.5"
+        x2="9.5"
+        y2="9.5"
+        stroke="currentColor"
+        strokeWidth="1.2"
+        strokeLinecap="round"
+      />
+      <line
+        x1="9.5"
+        y1="0.5"
+        x2="0.5"
+        y2="9.5"
+        stroke="currentColor"
+        strokeWidth="1.2"
+        strokeLinecap="round"
+      />
     </svg>
   );
 }
@@ -2680,13 +3112,21 @@ function TitleBar({
     };
     void syncWindowState();
     let unlisten: (() => void) | undefined;
-    win.listen("tauri://resize", async () => {
-      await syncWindowState();
-    }).then((fn) => { unlisten = fn; });
+    win
+      .listen("tauri://resize", async () => {
+        await syncWindowState();
+      })
+      .then((fn) => {
+        unlisten = fn;
+      });
     let fullscreenUnlisten: (() => void) | undefined;
-    win.listen("tauri://fullscreen", async () => {
-      await syncWindowState();
-    }).then((fn) => { fullscreenUnlisten = fn; });
+    win
+      .listen("tauri://fullscreen", async () => {
+        await syncWindowState();
+      })
+      .then((fn) => {
+        fullscreenUnlisten = fn;
+      });
     return () => {
       unlisten?.();
       fullscreenUnlisten?.();
@@ -2799,43 +3239,100 @@ function TitleBar({
           {menuOpen ? (
             <div
               className="popup"
-              style={{ top: "calc(100% + 6px)", right: 0, left: "auto", bottom: "auto", width: 220 }}
+              style={{
+                top: "calc(100% + 6px)",
+                right: 0,
+                left: "auto",
+                bottom: "auto",
+                width: 220,
+              }}
             >
               <div className="popup-list">
-                <div className="popup-item" onClick={() => { onOpenCommands(); setMenuOpen(false); }}>
-                  <span className="ico"><I.search size={12} /></span>
-                  <div className="nm"><span>{t("app.titlebar.commandPalette")}</span></div>
+                <button
+                  type="button"
+                  className="popup-item"
+                  onClick={() => {
+                    onOpenCommands();
+                    setMenuOpen(false);
+                  }}
+                >
+                  <span className="ico">
+                    <I.search size={12} />
+                  </span>
+                  <div className="nm">
+                    <span>{t("app.titlebar.commandPalette")}</span>
+                  </div>
                   <span className="kb">
                     <Shortcut keys={["mod", "K"]} />
                   </span>
-                </div>
-                <div
+                </button>
+                <button
+                  type="button"
                   className="popup-item"
-                  onClick={() => { if (hasMessages) onCopy(); setMenuOpen(false); }}
+                  aria-disabled={!hasMessages}
+                  onClick={() => {
+                    if (hasMessages) onCopy();
+                    setMenuOpen(false);
+                  }}
                   style={{ opacity: hasMessages ? 1 : 0.5 }}
                 >
-                  <span className="ico"><I.copy size={12} /></span>
-                  <div className="nm"><span>{t("app.titlebar.copyMd")}</span></div>
-                </div>
-                <div
+                  <span className="ico">
+                    <I.copy size={12} />
+                  </span>
+                  <div className="nm">
+                    <span>{t("app.titlebar.copyMd")}</span>
+                  </div>
+                </button>
+                <button
+                  type="button"
                   className="popup-item"
-                  onClick={() => { if (hasMessages) onExport(); setMenuOpen(false); }}
+                  aria-disabled={!hasMessages}
+                  onClick={() => {
+                    if (hasMessages) onExport();
+                    setMenuOpen(false);
+                  }}
                   style={{ opacity: hasMessages ? 1 : 0.5 }}
                 >
-                  <span className="ico"><I.download size={12} /></span>
-                  <div className="nm"><span>{t("app.titlebar.exportMd")}</span></div>
-                </div>
-                <div className="popup-item" onClick={() => { onClear(); setMenuOpen(false); }}>
-                  <span className="ico"><I.x size={12} /></span>
-                  <div className="nm"><span>{t("app.titlebar.clearChat")}</span></div>
-                </div>
-                <div className="popup-item" onClick={() => { onOpenSettings(); setMenuOpen(false); }}>
-                  <span className="ico"><I.cog size={12} /></span>
-                  <div className="nm"><span>{t("app.titlebar.settings")}</span></div>
+                  <span className="ico">
+                    <I.download size={12} />
+                  </span>
+                  <div className="nm">
+                    <span>{t("app.titlebar.exportMd")}</span>
+                  </div>
+                </button>
+                <button
+                  type="button"
+                  className="popup-item"
+                  onClick={() => {
+                    onClear();
+                    setMenuOpen(false);
+                  }}
+                >
+                  <span className="ico">
+                    <I.x size={12} />
+                  </span>
+                  <div className="nm">
+                    <span>{t("app.titlebar.clearChat")}</span>
+                  </div>
+                </button>
+                <button
+                  type="button"
+                  className="popup-item"
+                  onClick={() => {
+                    onOpenSettings();
+                    setMenuOpen(false);
+                  }}
+                >
+                  <span className="ico">
+                    <I.cog size={12} />
+                  </span>
+                  <div className="nm">
+                    <span>{t("app.titlebar.settings")}</span>
+                  </div>
                   <span className="kb">
                     <Shortcut keys={["mod", ","]} />
                   </span>
-                </div>
+                </button>
               </div>
             </div>
           ) : null}
@@ -2848,7 +3345,10 @@ function TitleBar({
               type="button"
               className="win-ctrl"
               title={t("app.titlebar.minimize")}
-              onMouseDown={(e) => { e.stopPropagation(); win.minimize(); }}
+              onMouseDown={(e) => {
+                e.stopPropagation();
+                win.minimize();
+              }}
             >
               <WinMinimize />
             </button>
@@ -2856,7 +3356,10 @@ function TitleBar({
               type="button"
               className="win-ctrl"
               title={isMaximized ? t("app.titlebar.restore") : t("app.titlebar.maximize")}
-              onMouseDown={(e) => { e.stopPropagation(); void toggleWindowExpanded(win, false, isMaximized); }}
+              onMouseDown={(e) => {
+                e.stopPropagation();
+                void toggleWindowExpanded(win, false, isMaximized);
+              }}
             >
               {isMaximized ? <WinRestore /> : <WinMaximize />}
             </button>
@@ -2864,7 +3367,10 @@ function TitleBar({
               type="button"
               className="win-ctrl close"
               title={t("app.titlebar.close")}
-              onMouseDown={(e) => { e.stopPropagation(); win.close(); }}
+              onMouseDown={(e) => {
+                e.stopPropagation();
+                win.close();
+              }}
             >
               <WinClose />
             </button>
@@ -2891,6 +3397,7 @@ function TabBar({
   singleTab?: boolean;
 }) {
   useLang();
+  const closeLabel = t("app.titlebar.close");
   return (
     <div className="tabbar">
       {tabs.map((t) => {
@@ -2901,33 +3408,37 @@ function TabBar({
             .split(/[\\/]/)
             .pop() || "workspace";
         return (
-          <div
-            key={t.id}
-            className="tab"
-            data-active={t.id === activeId}
-            onClick={() => setActive(t.id)}
-            title={ws || label}
-          >
-            <span className="dot" data-state="running" />
-            <span className="label">{label}</span>
+          <div key={t.id} className="tab" data-active={t.id === activeId} title={ws || label}>
+            <button type="button" className="tab-main" onClick={() => setActive(t.id)}>
+              <span className="dot" data-state="running" />
+              <span className="label">{label}</span>
+            </button>
             {!singleTab ? (
-              <span
+              <button
+                type="button"
                 className="close"
                 onClick={(e) => {
                   e.stopPropagation();
                   onClose(t.id);
                 }}
+                title={closeLabel}
+                aria-label={closeLabel}
               >
                 <I.x size={11} />
-              </span>
+              </button>
             ) : null}
           </div>
         );
       })}
-      <div className="tab newtab" title={localizeShortcutText(t("app.tab.newTabTitle"))} onClick={onNew}>
+      <button
+        type="button"
+        className="tab newtab"
+        title={localizeShortcutText(t("app.tab.newTabTitle"))}
+        onClick={onNew}
+      >
         <I.plus size={12} />
         <span style={{ fontSize: 11, marginLeft: 4 }}>{t("app.tab.newTab")}</span>
-      </div>
+      </button>
     </div>
   );
 }
@@ -2972,17 +3483,17 @@ function MainHead({
           ) : null}
         </h1>
         <div className="sub">
-          <span
+          <button
+            type="button"
             className="ws-crumb"
             onClick={(e) => {
               const r = (e.currentTarget as HTMLElement).getBoundingClientRect();
               onOpenWorkdir({ top: r.bottom + 6, left: r.left });
             }}
-            style={{ cursor: "pointer" }}
             title={workspaceDir ?? t("app.header.clickToSelect")}
           >
             <I.folder size={10} /> {wsLabel}
-          </span>
+          </button>
           {model ? (
             <span className="pill">
               <I.brain size={10} /> {model}
@@ -3186,7 +3697,7 @@ function UpdateOverlay({
 }) {
   useLang();
   const ratio =
-    progress && progress.total && progress.total > 0
+    progress?.total && progress.total > 0
       ? Math.min(1, progress.downloaded / progress.total)
       : null;
   const statusText =
@@ -3377,7 +3888,7 @@ export function App() {
     const stack =
       fontFamily === FONT_FAMILY.CUSTOM && custom
         ? custom
-        : FONT_FAMILY_STACK[fontFamily] ?? FONT_FAMILY_STACK.sans;
+        : (FONT_FAMILY_STACK[fontFamily] ?? FONT_FAMILY_STACK.sans);
     document.documentElement.style.setProperty("--font-sans", stack);
     localStorage.setItem("reasonix.fontFamily", fontFamily);
     localStorage.setItem("reasonix.customFontFamily", customFontFamily);
@@ -3483,7 +3994,7 @@ export function App() {
       }
     };
 
-    const setup = async () => {
+    const setup = async (_retryAttempt: number) => {
       startupStderrRef.current = [];
       setStartupFailure(null);
       const subs = await Promise.all([
@@ -3617,7 +4128,7 @@ export function App() {
         }
       }
     };
-    void setup();
+    void setup(startupRetryNonce);
     return () => {
       cancelled = true;
       for (const c of cleanups) c();
diff --git a/desktop/src/CodeView.tsx b/desktop/src/CodeView.tsx
index 661f21323..d42abfbbc 100644
--- a/desktop/src/CodeView.tsx
+++ b/desktop/src/CodeView.tsx
@@ -4,13 +4,25 @@ import { useEffect, useRef, useState } from "react";
 const DARK_THEME: PrismTheme = {
   plain: { color: "#dde1ea", backgroundColor: "transparent" },
   styles: [
-    { types: ["comment", "prolog", "doctype", "cdata"], style: { color: "#6d6e80", fontStyle: "italic" } },
+    {
+      types: ["comment", "prolog", "doctype", "cdata"],
+      style: { color: "#6d6e80", fontStyle: "italic" },
+    },
     { types: ["punctuation"], style: { color: "#a8a9b8" } },
-    { types: ["property", "tag", "boolean", "number", "constant", "symbol", "deleted"], style: { color: "#fbbf24" } },
-    { types: ["selector", "attr-name", "string", "char", "builtin", "inserted"], style: { color: "#86dcb1" } },
+    {
+      types: ["property", "tag", "boolean", "number", "constant", "symbol", "deleted"],
+      style: { color: "#fbbf24" },
+    },
+    {
+      types: ["selector", "attr-name", "string", "char", "builtin", "inserted"],
+      style: { color: "#86dcb1" },
+    },
     { types: ["operator", "entity", "url"], style: { color: "#84b9e8" } },
     { types: ["atrule", "attr-value", "keyword"], style: { color: "#b4a8f0" } },
-    { types: ["function", "class-name", "maybe-class-name"], style: { color: "#84b9e8", fontWeight: "500" } },
+    {
+      types: ["function", "class-name", "maybe-class-name"],
+      style: { color: "#84b9e8", fontWeight: "500" },
+    },
     { types: ["regex", "important", "variable"], style: { color: "#f0c062" } },
     { types: ["important", "bold"], style: { fontWeight: "bold" } },
     { types: ["italic"], style: { fontStyle: "italic" } },
@@ -20,13 +32,25 @@ const DARK_THEME: PrismTheme = {
 const LIGHT_THEME: PrismTheme = {
   plain: { color: "#24292e", backgroundColor: "transparent" },
   styles: [
-    { types: ["comment", "prolog", "doctype", "cdata"], style: { color: "#6a737d", fontStyle: "italic" } },
+    {
+      types: ["comment", "prolog", "doctype", "cdata"],
+      style: { color: "#6a737d", fontStyle: "italic" },
+    },
     { types: ["punctuation"], style: { color: "#24292e" } },
-    { types: ["property", "tag", "boolean", "number", "constant", "symbol", "deleted"], style: { color: "#d73a49" } },
-    { types: ["selector", "attr-name", "string", "char", "builtin", "inserted"], style: { color: "#032f62" } },
+    {
+      types: ["property", "tag", "boolean", "number", "constant", "symbol", "deleted"],
+      style: { color: "#d73a49" },
+    },
+    {
+      types: ["selector", "attr-name", "string", "char", "builtin", "inserted"],
+      style: { color: "#032f62" },
+    },
     { types: ["operator", "entity", "url"], style: { color: "#d73a49" } },
     { types: ["atrule", "attr-value", "keyword"], style: { color: "#d73a49" } },
-    { types: ["function", "class-name", "maybe-class-name"], style: { color: "#6f42c1", fontWeight: "500" } },
+    {
+      types: ["function", "class-name", "maybe-class-name"],
+      style: { color: "#6f42c1", fontWeight: "500" },
+    },
     { types: ["regex", "important", "variable"], style: { color: "#e36209" } },
     { types: ["important", "bold"], style: { fontWeight: "bold" } },
     { types: ["italic"], style: { fontStyle: "italic" } },
@@ -56,37 +80,82 @@ function usePrismTheme(): PrismTheme {
 
 export const PRISM_THEME = DARK_THEME;
 
+function hashString(value: string): string {
+  let hash = 0;
+  for (let i = 0; i < value.length; i++) {
+    hash = (hash * 31 + value.charCodeAt(i)) | 0;
+  }
+  return `${value.length}-${(hash >>> 0).toString(36)}`;
+}
+
+function keyed<T>(items: readonly T[], keyFor: (item: T) => string): { item: T; key: string }[] {
+  const seen = new Map<string, number>();
+  return items.map((item) => {
+    const base = keyFor(item);
+    const count = seen.get(base) ?? 0;
+    seen.set(base, count + 1);
+    return { item, key: count === 0 ? base : `${base}-${count}` };
+  });
+}
+
 const EXTS: Record<string, string> = {
-  ts: "typescript", tsx: "tsx", mts: "typescript", cts: "typescript",
-  js: "javascript", jsx: "jsx", mjs: "javascript", cjs: "javascript",
-  py: "python", pyi: "python",
+  ts: "typescript",
+  tsx: "tsx",
+  mts: "typescript",
+  cts: "typescript",
+  js: "javascript",
+  jsx: "jsx",
+  mjs: "javascript",
+  cjs: "javascript",
+  py: "python",
+  pyi: "python",
   rs: "rust",
   go: "go",
-  json: "json", jsonc: "json",
-  md: "markdown", mdx: "markdown",
-  css: "css", scss: "scss", less: "less",
-  html: "markup", htm: "markup", xml: "markup", svg: "markup",
-  yaml: "yaml", yml: "yaml",
+  json: "json",
+  jsonc: "json",
+  md: "markdown",
+  mdx: "markdown",
+  css: "css",
+  scss: "scss",
+  less: "less",
+  html: "markup",
+  htm: "markup",
+  xml: "markup",
+  svg: "markup",
+  yaml: "yaml",
+  yml: "yaml",
   toml: "toml",
-  sh: "bash", bash: "bash", zsh: "bash", fish: "bash",
+  sh: "bash",
+  bash: "bash",
+  zsh: "bash",
+  fish: "bash",
   sql: "sql",
   rb: "ruby",
-  java: "java", kt: "kotlin",
+  java: "java",
+  kt: "kotlin",
   swift: "swift",
-  c: "c", h: "c",
-  cpp: "cpp", cc: "cpp", cxx: "cpp", hpp: "cpp", hxx: "cpp",
+  c: "c",
+  h: "c",
+  cpp: "cpp",
+  cc: "cpp",
+  cxx: "cpp",
+  hpp: "cpp",
+  hxx: "cpp",
   cs: "csharp",
   php: "php",
   lua: "lua",
   dart: "dart",
-  ex: "elixir", exs: "elixir",
+  ex: "elixir",
+  exs: "elixir",
   erl: "erlang",
   hs: "haskell",
-  clj: "clojure", cljs: "clojure",
+  clj: "clojure",
+  cljs: "clojure",
   zig: "zig",
   vue: "markup",
   svelte: "markup",
-  graphql: "graphql", gql: "graphql",
+  graphql: "graphql",
+  gql: "graphql",
   proto: "protobuf",
   dockerfile: "docker",
 };
@@ -117,14 +186,16 @@ export function CodeView({
     <Highlight theme={theme} code={text} language={lang}>
       {({ className, tokens, getLineProps, getTokenProps }) => (
         <pre className={`codeview ${className}`}>
-          {tokens.map((line, i) => (
-            <div key={i} {...getLineProps({ line })} className="codeview-line">
-              {showLineNumbers && (
-                <span className="codeview-line-num">{i + startLine}</span>
-              )}
+          {keyed(tokens, (line) =>
+            hashString(line.map((token) => `${token.types.join(".")}:${token.content}`).join("|")),
+          ).map(({ item: line, key }, i) => (
+            <div key={key} {...getLineProps({ line })} className="codeview-line">
+              {showLineNumbers && <span className="codeview-line-num">{i + startLine}</span>}
               <span className="codeview-line-content">
-                {line.map((token, k) => (
-                  <span key={k} {...getTokenProps({ token })} />
+                {keyed(line, (token) =>
+                  hashString(`${token.types.join(".")}:${token.content}`),
+                ).map(({ item: token, key: tokenKey }) => (
+                  <span key={tokenKey} {...getTokenProps({ token })} />
                 ))}
               </span>
             </div>
diff --git a/desktop/src/CommandPalette.tsx b/desktop/src/CommandPalette.tsx
index 63f903394..787538ef0 100644
--- a/desktop/src/CommandPalette.tsx
+++ b/desktop/src/CommandPalette.tsx
@@ -28,7 +28,7 @@ export type Command = {
   run: () => void;
 };
 
-export function useCommandPalette(active: boolean = true) {
+export function useCommandPalette(active = true) {
   const [open, setOpen] = useState(false);
   useEffect(() => {
     // Skip in background tabs — each TabRuntime calls this hook, so without the gate Cmd+K toggles every tab's palette at once.
@@ -181,10 +181,14 @@ const GROUP_ORDER: CommandGroup[] = ["nav", "action", "workspace", "settings"];
 
 function groupLabel(g: CommandGroup): string {
   switch (g) {
-    case "nav": return t("palette.groupNav");
-    case "action": return t("palette.groupAction");
-    case "workspace": return t("palette.groupWorkspace");
-    case "settings": return t("palette.groupSettings");
+    case "nav":
+      return t("palette.groupNav");
+    case "action":
+      return t("palette.groupAction");
+    case "workspace":
+      return t("palette.groupWorkspace");
+    case "settings":
+      return t("palette.groupSettings");
   }
 }
 
@@ -235,9 +239,9 @@ export function CommandPalette({
       arr.push(c);
       byGroup.set(c.group, arr);
     }
-    return GROUP_ORDER
-      .map((g) => ({ group: g, items: byGroup.get(g) ?? [] }))
-      .filter((s) => s.items.length > 0);
+    return GROUP_ORDER.map((g) => ({ group: g, items: byGroup.get(g) ?? [] })).filter(
+      (s) => s.items.length > 0,
+    );
   }, [filtered]);
 
   if (!open) return null;
@@ -276,16 +280,15 @@ export function CommandPalette({
           </span>
         </div>
         <div className="cmdk-body" ref={listRef}>
-          {filtered.length === 0 ? (
-            <div className="cmdk-empty">{t("palette.empty")}</div>
-          ) : null}
+          {filtered.length === 0 ? <div className="cmdk-empty">{t("palette.empty")}</div> : null}
           {grouped.map((section) => (
             <div className="cmdk-group" key={section.group}>
               <div className="cmdk-gh">{groupLabel(section.group)}</div>
               {section.items.map((c) => {
                 const i = filtered.indexOf(c);
                 return (
-                  <div
+                  <button
+                    type="button"
                     key={c.id}
                     data-idx={i}
                     className="cmdk-row"
@@ -303,7 +306,7 @@ export function CommandPalette({
                     ) : (
                       <span className="kb-empty" />
                     )}
-                  </div>
+                  </button>
                 );
               })}
             </div>
diff --git a/desktop/src/Markdown.tsx b/desktop/src/Markdown.tsx
index 9544f4347..82ab54501 100644
--- a/desktop/src/Markdown.tsx
+++ b/desktop/src/Markdown.tsx
@@ -3,11 +3,11 @@ import { openPath, openUrl } from "@tauri-apps/plugin-opener";
 import { Check, Copy, ExternalLink, FileText } from "lucide-react";
 import {
   Children,
+  type ReactNode,
   cloneElement,
   createContext,
   isValidElement,
   memo,
-  type ReactNode,
   useContext,
   useState,
 } from "react";
@@ -24,7 +24,7 @@ async function openWithEditor(
   abs: string,
   line?: number,
 ): Promise<void> {
-  if (editor && editor.trim()) {
+  if (editor?.trim()) {
     await invoke("open_in_editor", { command: editor, path: abs, line: line ?? null });
     return;
   }
@@ -145,28 +145,21 @@ function FilePill({ path, line }: { path: string; line?: string }) {
     }
   };
   return (
-    <span
+    <button
+      type="button"
       className={`file-pill ${done ? "done" : ""}`}
-      role="button"
-      tabIndex={0}
       onClick={openInEditor}
       onContextMenu={(e) => {
         e.preventDefault();
         void copyOnly(e);
       }}
-      onKeyDown={(e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          void openInEditor();
-        }
-      }}
       title={t("markdown.filePillTitle")}
     >
       <FileText size={10} className="file-pill-icon" />
       <span className="file-pill-path">{path}</span>
       {line && <span className="file-pill-line">:{line}</span>}
       {done && <Check size={10} className="file-pill-check" />}
-    </span>
+    </button>
   );
 }
 
@@ -230,16 +223,18 @@ function normalizeMathDelimiters(source: string): string {
     .replace(/\\\(/g, "$$")
     .replace(/\\\)/g, "$$");
   // Restore protected sequences
-  result = result.replace(/\x00LB\x00/g, "\\\\[");
+  result = result.split(LB).join("\\\\[");
 
   // Replace | with \vert inside math to prevent GFM table column splitting.
   // \vert renders identically to | in KaTeX — it's the same vertical-bar
   // glyph — but the markdown parser won't mistake it for a table separator.
-  result = result.replace(/\$\$([\s\S]*?)\$\$/g, (_: string, m: string) =>
-    "$$" + m.replace(/\|/g, "\\vert ") + "$$",
+  result = result.replace(
+    /\$\$([\s\S]*?)\$\$/g,
+    (_: string, m: string) => `\$\$${m.replace(/\|/g, "\\vert ")}\$\$`,
   );
-  result = result.replace(/\$([^$\n]+)\$/g, (_: string, m: string) =>
-    "$" + m.replace(/\|/g, "\\vert ") + "$",
+  result = result.replace(
+    /\$([^$\n]+)\$/g,
+    (_: string, m: string) => `\$${m.replace(/\|/g, "\\vert ")}\$`,
   );
 
   return result;
@@ -349,7 +344,8 @@ export function extractFencedLang(children: ReactNode): string {
 function flattenChildText(node: ReactNode): string {
   if (typeof node === "string" || typeof node === "number") return String(node);
   if (Array.isArray(node)) return node.map(flattenChildText).join("");
-  if (isValidElement(node)) return flattenChildText((node.props as { children?: ReactNode }).children);
+  if (isValidElement(node))
+    return flattenChildText((node.props as { children?: ReactNode }).children);
   return "";
 }
 
diff --git a/desktop/src/i18n/de.ts b/desktop/src/i18n/de.ts
index 384ff0236..e51df3438 100644
--- a/desktop/src/i18n/de.ts
+++ b/desktop/src/i18n/de.ts
@@ -186,7 +186,8 @@ export const de: typeof en = {
     webSearchEngineTavily: "tavily — 1000/Monat kostenlos (TAVILY_API_KEY setzen)",
     webSearchEnginePerplexity: "perplexity — AI-native (PERPLEXITY_API_KEY setzen)",
     webSearchEngineExa: "exa — AI-native 1000/Monat kostenlos (EXA_API_KEY setzen)",
-    webSearchEngineBrave: "brave — unabhängiger Index, 2000/Monat kostenlos (BRAVE_SEARCH_API_KEY setzen)",
+    webSearchEngineBrave:
+      "brave — unabhängiger Index, 2000/Monat kostenlos (BRAVE_SEARCH_API_KEY setzen)",
     webSearchEngineOllama: "ollama — Ollama Cloud-Websuche (OLLAMA_API_KEY setzen)",
     webSearchEngineNote: "gilt für den nächsten web_search-Aufruf",
     webSearchEndpoint: "SearXNG-Endpunkt",
@@ -288,7 +289,8 @@ export const de: typeof en = {
       "Jede OpenAI-kompatible ID, die dein Endpunkt bereitstellt (vLLM, Ollama, Together, …).",
     modelCustomActive: "Läuft aktuell auf benutzerdefinierter ID: {model}",
     contextTokensLabel: "Kontextfenstergröße",
-    contextTokensHint: "Überschreiben Sie die Prompt-seitige Token-Obergrenze für das aktuelle Modell (z. B. 1000000 für 1M). Leer lassen für den eingebauten Standard.",
+    contextTokensHint:
+      "Überschreiben Sie die Prompt-seitige Token-Obergrenze für das aktuelle Modell (z. B. 1000000 für 1M). Leer lassen für den eingebauten Standard.",
     contextTokensPlaceholder: "Automatisch",
     effortSection: "Reasoning-Effort",
     ctxWindow: "Kontext",
@@ -699,7 +701,8 @@ export const de: typeof en = {
     importSessionCount: "{count} Sitzungen · importiert alle",
     importNotFound: "Keine lokalen Sitzungen gefunden",
     importPrivacyHint: "Bestehende App-Einstellungen bleiben unverändert.",
-    importResult: "{imported} Sitzung(en) importiert, {skipped} übersprungen, {failed} fehlgeschlagen.",
+    importResult:
+      "{imported} Sitzung(en) importiert, {skipped} übersprungen, {failed} fehlgeschlagen.",
     continue: "Weiter",
     refresh: "Aktualisieren",
     importSource: "Quelle",
diff --git a/desktop/src/i18n/en.ts b/desktop/src/i18n/en.ts
index 773fba16f..fba816a28 100644
--- a/desktop/src/i18n/en.ts
+++ b/desktop/src/i18n/en.ts
@@ -276,7 +276,8 @@ export const en = {
     modelCustomHint: "Any OpenAI-compatible id your endpoint serves (vLLM, Ollama, Together, …).",
     modelCustomActive: "Currently running on a custom id: {model}",
     contextTokensLabel: "Context window size",
-    contextTokensHint: "Override the prompt-side token cap for the current model (e.g. 1000000 for 1M). Leave empty to use the built-in default.",
+    contextTokensHint:
+      "Override the prompt-side token cap for the current model (e.g. 1000000 for 1M). Leave empty to use the built-in default.",
     contextTokensPlaceholder: "auto",
     effortSection: "Reasoning effort",
     ctxWindow: "Context",
diff --git a/desktop/src/i18n/ja.ts b/desktop/src/i18n/ja.ts
index 3a2a79bbf..0a9aaf871 100644
--- a/desktop/src/i18n/ja.ts
+++ b/desktop/src/i18n/ja.ts
@@ -51,6 +51,7 @@ export const ja = {
     searchPlaceholder: "最近のパスを検索…",
     empty: "最近のワークスペースはありません",
     browse: "ローカルを参照…",
+    removeRecent: "最近の一覧から削除",
   },
   sidebar: {
     newChat: "新しいチャット",
@@ -273,7 +274,8 @@ export const ja = {
     modelCustomHint: "エンドポイントが提供するOpenAI互換ID (vLLM, Ollama, Together, …)。",
     modelCustomActive: "現在カスタムIDで実行中: {model}",
     contextTokensLabel: "コンテキストウィンドウサイズ",
-    contextTokensHint: "現在のモデルのプロンプト側トークン上限を上書きします（例: 1000000 で 1M）。空欄なら既定値を使用。",
+    contextTokensHint:
+      "現在のモデルのプロンプト側トークン上限を上書きします（例: 1000000 で 1M）。空欄なら既定値を使用。",
     contextTokensPlaceholder: "自動",
     effortSection: "推論努力",
     ctxWindow: "コンテキスト",
diff --git a/desktop/src/i18n/zh-CN.ts b/desktop/src/i18n/zh-CN.ts
index 769b3e8e9..cab089ea4 100644
--- a/desktop/src/i18n/zh-CN.ts
+++ b/desktop/src/i18n/zh-CN.ts
@@ -270,7 +270,8 @@ export const zhCN: typeof en = {
     modelCustomHint: "任何 OpenAI 兼容的 ID（vLLM、Ollama、Together …）。",
     modelCustomActive: "当前运行自定义 ID：{model}",
     contextTokensLabel: "上下文窗口大小",
-    contextTokensHint: "为当前模型覆盖提示侧 token 上限（如 1000000 表示 1M）。留空使用内置默认值。",
+    contextTokensHint:
+      "为当前模型覆盖提示侧 token 上限（如 1000000 表示 1M）。留空使用内置默认值。",
     contextTokensPlaceholder: "自动",
     effortSection: "推理强度",
     ctxWindow: "上下文",
diff --git a/desktop/src/icons.tsx b/desktop/src/icons.tsx
index ade0d397a..b40385c07 100644
--- a/desktop/src/icons.tsx
+++ b/desktop/src/icons.tsx
@@ -14,6 +14,8 @@ function Ic({ size = 14, children, ...rest }: IconProps & { children: React.Reac
       strokeWidth="1.8"
       strokeLinecap="round"
       strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
       {...rest}
     >
       {children}
@@ -22,61 +24,291 @@ function Ic({ size = 14, children, ...rest }: IconProps & { children: React.Reac
 }
 
 export const I = {
-  plus: (p: IconProps) => (<Ic {...p}><path d="M12 5v14M5 12h14" /></Ic>),
-  search: (p: IconProps) => (<Ic {...p}><circle cx="11" cy="11" r="7" /><path d="m20 20-3.5-3.5" /></Ic>),
-  send: (p: IconProps) => (<Ic {...p}><path d="M4 12 20 4l-6 16-3-7-7-1Z" /></Ic>),
-  chev: (p: IconProps) => (<Ic {...p}><path d="m6 9 6 6 6-6" /></Ic>),
-  chevR: (p: IconProps) => (<Ic {...p}><path d="m9 6 6 6-6 6" /></Ic>),
-  check: (p: IconProps) => (<Ic {...p}><path d="m5 12 5 5L20 7" /></Ic>),
-  x: (p: IconProps) => (<Ic {...p}><path d="M6 6l12 12M18 6 6 18" /></Ic>),
-  pencil: (p: IconProps) => (<Ic {...p}><path d="m4 20 4-1L20 7l-3-3L5 16l-1 4Z" /><path d="m14 6 4 4" /></Ic>),
-  terminal: (p: IconProps) => (<Ic {...p}><rect x="3" y="4" width="18" height="16" rx="2" /><path d="m7 9 3 3-3 3M13 15h4" /></Ic>),
+  plus: (p: IconProps) => (
+    <Ic {...p}>
+      <path d="M12 5v14M5 12h14" />
+    </Ic>
+  ),
+  search: (p: IconProps) => (
+    <Ic {...p}>
+      <circle cx="11" cy="11" r="7" />
+      <path d="m20 20-3.5-3.5" />
+    </Ic>
+  ),
+  send: (p: IconProps) => (
+    <Ic {...p}>
+      <path d="M4 12 20 4l-6 16-3-7-7-1Z" />
+    </Ic>
+  ),
+  chev: (p: IconProps) => (
+    <Ic {...p}>
+      <path d="m6 9 6 6 6-6" />
+    </Ic>
+  ),
+  chevR: (p: IconProps) => (
+    <Ic {...p}>
+      <path d="m9 6 6 6-6 6" />
+    </Ic>
+  ),
+  check: (p: IconProps) => (
+    <Ic {...p}>
+      <path d="m5 12 5 5L20 7" />
+    </Ic>
+  ),
+  x: (p: IconProps) => (
+    <Ic {...p}>
+      <path d="M6 6l12 12M18 6 6 18" />
+    </Ic>
+  ),
+  pencil: (p: IconProps) => (
+    <Ic {...p}>
+      <path d="m4 20 4-1L20 7l-3-3L5 16l-1 4Z" />
+      <path d="m14 6 4 4" />
+    </Ic>
+  ),
+  terminal: (p: IconProps) => (
+    <Ic {...p}>
+      <rect x="3" y="4" width="18" height="16" rx="2" />
+      <path d="m7 9 3 3-3 3M13 15h4" />
+    </Ic>
+  ),
   brain: (p: IconProps) => (
     <Ic {...p}>
       <path d="M9 4a3 3 0 0 0-3 3v0a3 3 0 0 0-2 5 3 3 0 0 0 2 5 3 3 0 0 0 3 3h0a3 3 0 0 0 3-3V4" />
       <path d="M15 4a3 3 0 0 1 3 3 3 3 0 0 1 2 5 3 3 0 0 1-2 5 3 3 0 0 1-3 3" />
     </Ic>
   ),
-  list: (p: IconProps) => (<Ic {...p}><path d="M4 6h2M4 12h2M4 18h2M9 6h11M9 12h11M9 18h11" /></Ic>),
-  diff: (p: IconProps) => (<Ic {...p}><path d="M7 4v11a3 3 0 0 0 3 3h2M17 20V9a3 3 0 0 0-3-3h-2" /><circle cx="7" cy="20" r="2" /><circle cx="17" cy="4" r="2" /></Ic>),
-  globe: (p: IconProps) => (<Ic {...p}><circle cx="12" cy="12" r="9" /><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18" /></Ic>),
-  link: (p: IconProps) => (<Ic {...p}><path d="M10 14a4 4 0 0 1 0-6l3-3a4 4 0 0 1 6 6l-2 2" /><path d="M14 10a4 4 0 0 1 0 6l-3 3a4 4 0 0 1-6-6l2-2" /></Ic>),
-  wrench: (p: IconProps) => (<Ic {...p}><path d="M14 7a4 4 0 1 0 4 4l3 3-3 3-3-3a4 4 0 0 1-4-4l-3-3-3 3 3 3a4 4 0 0 0 6 0" /></Ic>),
-  bot: (p: IconProps) => (<Ic {...p}><rect x="4" y="7" width="16" height="12" rx="3" /><path d="M12 3v4M8 12h.01M16 12h.01M9 16h6" /></Ic>),
-  archive: (p: IconProps) => (<Ic {...p}><rect x="3" y="3" width="18" height="5" rx="1" /><path d="M5 8v11a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8M10 12h4" /></Ic>),
-  bookmark: (p: IconProps) => (<Ic {...p}><path d="M6 3h12v18l-6-4-6 4Z" /></Ic>),
-  warning: (p: IconProps) => (<Ic {...p}><path d="M12 3 2 21h20Z" /><path d="M12 10v5M12 18h.01" /></Ic>),
-  zap: (p: IconProps) => (<Ic {...p}><path d="M13 3 4 14h7l-1 7 9-11h-7Z" /></Ic>),
-  database: (p: IconProps) => (<Ic {...p}><ellipse cx="12" cy="5" rx="8" ry="3" /><path d="M4 5v6c0 1.7 3.6 3 8 3s8-1.3 8-3V5M4 11v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6" /></Ic>),
-  cpu: (p: IconProps) => (<Ic {...p}><rect x="5" y="5" width="14" height="14" rx="2" /><rect x="9" y="9" width="6" height="6" /><path d="M9 2v3M15 2v3M9 19v3M15 19v3M2 9h3M2 15h3M19 9h3M19 15h3" /></Ic>),
-  coin: (p: IconProps) => (<Ic {...p}><circle cx="12" cy="12" r="9" /><path d="M12 7v10M9 10h4a2 2 0 0 1 0 4H9" /></Ic>),
-  file: (p: IconProps) => (<Ic {...p}><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9Z" /><path d="M14 3v6h6" /></Ic>),
-  folder: (p: IconProps) => (<Ic {...p}><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z" /></Ic>),
-  image: (p: IconProps) => (<Ic {...p}><rect x="3" y="4" width="18" height="16" rx="2" /><circle cx="9" cy="10" r="2" /><path d="m3 18 5-5 4 4 3-3 6 6" /></Ic>),
-  paperclip: (p: IconProps) => (<Ic {...p}><path d="M21 12 12 21a5 5 0 0 1-7-7L14 5a3 3 0 0 1 4 4l-9 9a1 1 0 0 1-2-2l8-8" /></Ic>),
-  mic: (p: IconProps) => (<Ic {...p}><rect x="9" y="3" width="6" height="12" rx="3" /><path d="M5 11a7 7 0 0 0 14 0M12 18v3M9 21h6" /></Ic>),
-  sun: (p: IconProps) => (<Ic {...p}><circle cx="12" cy="12" r="4" /><path d="M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.5 1.5M17.5 17.5 19 19M5 19l1.5-1.5M17.5 6.5 19 5" /></Ic>),
-  moon: (p: IconProps) => (<Ic {...p}><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z" /></Ic>),
-  panel_l: (p: IconProps) => (<Ic {...p}><rect x="3" y="4" width="18" height="16" rx="2" /><path d="M9 4v16" /></Ic>),
-  panel_r: (p: IconProps) => (<Ic {...p}><rect x="3" y="4" width="18" height="16" rx="2" /><path d="M15 4v16" /></Ic>),
-  cog: (p: IconProps) => (<Ic {...p}><path d="M12 3.6 19.2 7.8v8.4L12 20.4 4.8 16.2V7.8Z" /><circle cx="12" cy="12" r="3.7" /></Ic>),
-  stop: (p: IconProps) => (<Ic {...p}><rect x="6" y="6" width="12" height="12" rx="2" /></Ic>),
-  play: (p: IconProps) => (<Ic {...p}><path d="M7 5v14l12-7Z" /></Ic>),
-  more: (p: IconProps) => (<Ic {...p}><circle cx="6" cy="12" r="1.6" fill="currentColor" /><circle cx="12" cy="12" r="1.6" fill="currentColor" /><circle cx="18" cy="12" r="1.6" fill="currentColor" /></Ic>),
-  pin: (p: IconProps) => (<Ic {...p}><path d="M15 3 9 9l-4 1 9 9 1-4 6-6ZM4 20l5-5" /></Ic>),
-  rotate: (p: IconProps) => (<Ic {...p}><path d="M3 12a9 9 0 1 0 3-6.7L3 8" /><path d="M3 3v5h5" /></Ic>),
-  branch: (p: IconProps) => (<Ic {...p}><circle cx="6" cy="4" r="2" /><circle cx="6" cy="20" r="2" /><circle cx="18" cy="8" r="2" /><path d="M6 6v12M6 14a6 6 0 0 0 6-6h4" /></Ic>),
-  at: (p: IconProps) => (<Ic {...p}><circle cx="12" cy="12" r="4" /><path d="M16 8v6a3 3 0 0 0 5-2 9 9 0 1 0-4 7" /></Ic>),
-  slash: (p: IconProps) => (<Ic {...p}><path d="M16 4 8 20" /></Ic>),
-  layers: (p: IconProps) => (<Ic {...p}><path d="m12 3 9 5-9 5-9-5Z" /><path d="m3 13 9 5 9-5M3 18l9 5 9-5" /></Ic>),
-  download: (p: IconProps) => (<Ic {...p}><path d="M12 4v12M6 12l6 6 6-6M4 20h16" /></Ic>),
-  upload: (p: IconProps) => (<Ic {...p}><path d="M12 20V8M6 12l6-6 6 6M4 4h16" /></Ic>),
-  history: (p: IconProps) => (<Ic {...p}><path d="M3 12a9 9 0 1 0 3-6.7L3 8M12 7v5l3 2" /></Ic>),
-  shield: (p: IconProps) => (<Ic {...p}><path d="M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6Z" /><path d="m9 12 2 2 4-4" /></Ic>),
-  warn: (p: IconProps) => (<Ic {...p}><path d="M12 3 2 21h20Z" /><path d="M12 10v5M12 18h.01" /></Ic>),
-  help: (p: IconProps) => (<Ic {...p}><circle cx="12" cy="12" r="9" /><path d="M9.5 9a2.5 2.5 0 0 1 5 0c0 1.5-2.5 2-2.5 4M12 17h.01" /></Ic>),
-  refresh: (p: IconProps) => (<Ic {...p}><path d="M3 12a9 9 0 0 1 15-6.7L21 8M21 4v4h-4M21 12a9 9 0 0 1-15 6.7L3 16M3 20v-4h4" /></Ic>),
-  copy: (p: IconProps) => (<Ic {...p}><rect x="8" y="8" width="12" height="12" rx="2" /><path d="M4 16V6a2 2 0 0 1 2-2h10" /></Ic>),
+  list: (p: IconProps) => (
+    <Ic {...p}>
+      <path d="M4 6h2M4 12h2M4 18h2M9 6h11M9 12h11M9 18h11" />
+    </Ic>
+  ),
+  diff: (p: IconProps) => (
+    <Ic {...p}>
+      <path d="M7 4v11a3 3 0 0 0 3 3h2M17 20V9a3 3 0 0 0-3-3h-2" />
+      <circle cx="7" cy="20" r="2" />
+      <circle cx="17" cy="4" r="2" />
+    </Ic>
+  ),
+  globe: (p: IconProps) => (
+    <Ic {...p}>
+      <circle cx="12" cy="12" r="9" />
+      <path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18" />
+    </Ic>
+  ),
+  link: (p: IconProps) => (
+    <Ic {...p}>
+      <path d="M10 14a4 4 0 0 1 0-6l3-3a4 4 0 0 1 6 6l-2 2" />
+      <path d="M14 10a4 4 0 0 1 0 6l-3 3a4 4 0 0 1-6-6l2-2" />
+    </Ic>
+  ),
+  wrench: (p: IconProps) => (
+    <Ic {...p}>
+      <path d="M14 7a4 4 0 1 0 4 4l3 3-3 3-3-3a4 4 0 0 1-4-4l-3-3-3 3 3 3a4 4 0 0 0 6 0" />
+    </Ic>
+  ),
+  bot: (p: IconProps) => (
+    <Ic {...p}>
+      <rect x="4" y="7" width="16" height="12" rx="3" />
+      <path d="M12 3v4M8 12h.01M16 12h.01M9 16h6" />
+    </Ic>
+  ),
+  archive: (p: IconProps) => (
+    <Ic {...p}>
+      <rect x="3" y="3" width="18" height="5" rx="1" />
+      <path d="M5 8v11a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8M10 12h4" />
+    </Ic>
+  ),
+  bookmark: (p: IconProps) => (
+    <Ic {...p}>
+      <path d="M6 3h12v18l-6-4-6 4Z" />
+    </Ic>
+  ),
+  warning: (p: IconProps) => (
+    <Ic {...p}>
+      <path d="M12 3 2 21h20Z" />
+      <path d="M12 10v5M12 18h.01" />
+    </Ic>
+  ),
+  zap: (p: IconProps) => (
+    <Ic {...p}>
+      <path d="M13 3 4 14h7l-1 7 9-11h-7Z" />
+    </Ic>
+  ),
+  database: (p: IconProps) => (
+    <Ic {...p}>
+      <ellipse cx="12" cy="5" rx="8" ry="3" />
+      <path d="M4 5v6c0 1.7 3.6 3 8 3s8-1.3 8-3V5M4 11v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6" />
+    </Ic>
+  ),
+  cpu: (p: IconProps) => (
+    <Ic {...p}>
+      <rect x="5" y="5" width="14" height="14" rx="2" />
+      <rect x="9" y="9" width="6" height="6" />
+      <path d="M9 2v3M15 2v3M9 19v3M15 19v3M2 9h3M2 15h3M19 9h3M19 15h3" />
+    </Ic>
+  ),
+  coin: (p: IconProps) => (
+    <Ic {...p}>
+      <circle cx="12" cy="12" r="9" />
+      <path d="M12 7v10M9 10h4a2 2 0 0 1 0 4H9" />
+    </Ic>
+  ),
+  file: (p: IconProps) => (
+    <Ic {...p}>
+      <path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9Z" />
+      <path d="M14 3v6h6" />
+    </Ic>
+  ),
+  folder: (p: IconProps) => (
+    <Ic {...p}>
+      <path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z" />
+    </Ic>
+  ),
+  image: (p: IconProps) => (
+    <Ic {...p}>
+      <rect x="3" y="4" width="18" height="16" rx="2" />
+      <circle cx="9" cy="10" r="2" />
+      <path d="m3 18 5-5 4 4 3-3 6 6" />
+    </Ic>
+  ),
+  paperclip: (p: IconProps) => (
+    <Ic {...p}>
+      <path d="M21 12 12 21a5 5 0 0 1-7-7L14 5a3 3 0 0 1 4 4l-9 9a1 1 0 0 1-2-2l8-8" />
+    </Ic>
+  ),
+  mic: (p: IconProps) => (
+    <Ic {...p}>
+      <rect x="9" y="3" width="6" height="12" rx="3" />
+      <path d="M5 11a7 7 0 0 0 14 0M12 18v3M9 21h6" />
+    </Ic>
+  ),
+  sun: (p: IconProps) => (
+    <Ic {...p}>
+      <circle cx="12" cy="12" r="4" />
+      <path d="M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.5 1.5M17.5 17.5 19 19M5 19l1.5-1.5M17.5 6.5 19 5" />
+    </Ic>
+  ),
+  moon: (p: IconProps) => (
+    <Ic {...p}>
+      <path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z" />
+    </Ic>
+  ),
+  panel_l: (p: IconProps) => (
+    <Ic {...p}>
+      <rect x="3" y="4" width="18" height="16" rx="2" />
+      <path d="M9 4v16" />
+    </Ic>
+  ),
+  panel_r: (p: IconProps) => (
+    <Ic {...p}>
+      <rect x="3" y="4" width="18" height="16" rx="2" />
+      <path d="M15 4v16" />
+    </Ic>
+  ),
+  cog: (p: IconProps) => (
+    <Ic {...p}>
+      <path d="M12 3.6 19.2 7.8v8.4L12 20.4 4.8 16.2V7.8Z" />
+      <circle cx="12" cy="12" r="3.7" />
+    </Ic>
+  ),
+  stop: (p: IconProps) => (
+    <Ic {...p}>
+      <rect x="6" y="6" width="12" height="12" rx="2" />
+    </Ic>
+  ),
+  play: (p: IconProps) => (
+    <Ic {...p}>
+      <path d="M7 5v14l12-7Z" />
+    </Ic>
+  ),
+  more: (p: IconProps) => (
+    <Ic {...p}>
+      <circle cx="6" cy="12" r="1.6" fill="currentColor" />
+      <circle cx="12" cy="12" r="1.6" fill="currentColor" />
+      <circle cx="18" cy="12" r="1.6" fill="currentColor" />
+    </Ic>
+  ),
+  pin: (p: IconProps) => (
+    <Ic {...p}>
+      <path d="M15 3 9 9l-4 1 9 9 1-4 6-6ZM4 20l5-5" />
+    </Ic>
+  ),
+  rotate: (p: IconProps) => (
+    <Ic {...p}>
+      <path d="M3 12a9 9 0 1 0 3-6.7L3 8" />
+      <path d="M3 3v5h5" />
+    </Ic>
+  ),
+  branch: (p: IconProps) => (
+    <Ic {...p}>
+      <circle cx="6" cy="4" r="2" />
+      <circle cx="6" cy="20" r="2" />
+      <circle cx="18" cy="8" r="2" />
+      <path d="M6 6v12M6 14a6 6 0 0 0 6-6h4" />
+    </Ic>
+  ),
+  at: (p: IconProps) => (
+    <Ic {...p}>
+      <circle cx="12" cy="12" r="4" />
+      <path d="M16 8v6a3 3 0 0 0 5-2 9 9 0 1 0-4 7" />
+    </Ic>
+  ),
+  slash: (p: IconProps) => (
+    <Ic {...p}>
+      <path d="M16 4 8 20" />
+    </Ic>
+  ),
+  layers: (p: IconProps) => (
+    <Ic {...p}>
+      <path d="m12 3 9 5-9 5-9-5Z" />
+      <path d="m3 13 9 5 9-5M3 18l9 5 9-5" />
+    </Ic>
+  ),
+  download: (p: IconProps) => (
+    <Ic {...p}>
+      <path d="M12 4v12M6 12l6 6 6-6M4 20h16" />
+    </Ic>
+  ),
+  upload: (p: IconProps) => (
+    <Ic {...p}>
+      <path d="M12 20V8M6 12l6-6 6 6M4 4h16" />
+    </Ic>
+  ),
+  history: (p: IconProps) => (
+    <Ic {...p}>
+      <path d="M3 12a9 9 0 1 0 3-6.7L3 8M12 7v5l3 2" />
+    </Ic>
+  ),
+  shield: (p: IconProps) => (
+    <Ic {...p}>
+      <path d="M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6Z" />
+      <path d="m9 12 2 2 4-4" />
+    </Ic>
+  ),
+  warn: (p: IconProps) => (
+    <Ic {...p}>
+      <path d="M12 3 2 21h20Z" />
+      <path d="M12 10v5M12 18h.01" />
+    </Ic>
+  ),
+  help: (p: IconProps) => (
+    <Ic {...p}>
+      <circle cx="12" cy="12" r="9" />
+      <path d="M9.5 9a2.5 2.5 0 0 1 5 0c0 1.5-2.5 2-2.5 4M12 17h.01" />
+    </Ic>
+  ),
+  refresh: (p: IconProps) => (
+    <Ic {...p}>
+      <path d="M3 12a9 9 0 0 1 15-6.7L21 8M21 4v4h-4M21 12a9 9 0 0 1-15 6.7L3 16M3 20v-4h4" />
+    </Ic>
+  ),
+  copy: (p: IconProps) => (
+    <Ic {...p}>
+      <rect x="8" y="8" width="12" height="12" rx="2" />
+      <path d="M4 16V6a2 2 0 0 1 2-2h10" />
+    </Ic>
+  ),
   trash: (p: IconProps) => (
     <Ic {...p}>
       <path d="M3 6h18" />
diff --git a/desktop/src/main.tsx b/desktop/src/main.tsx
index 6e44cafd1..76aa99fc1 100644
--- a/desktop/src/main.tsx
+++ b/desktop/src/main.tsx
@@ -12,12 +12,7 @@ import "@fontsource/inter/700.css";
 import "katex/dist/katex.min.css";
 import { createRoot } from "react-dom/client";
 import { App } from "./App";
-import {
-  defaultStyleForTheme,
-  isTheme,
-  isThemeStyle,
-  themeForStyle,
-} from "./theme";
+import { defaultStyleForTheme, isTheme, isThemeStyle, themeForStyle } from "./theme";
 
 const stored = localStorage.getItem("reasonix.theme");
 const storedStyle = localStorage.getItem("reasonix.themeStyle");
diff --git a/desktop/src/notifications.test.ts b/desktop/src/notifications.test.ts
index 1829a40c5..fcf8d7a45 100644
--- a/desktop/src/notifications.test.ts
+++ b/desktop/src/notifications.test.ts
@@ -1,9 +1,9 @@
 import { describe, expect, it } from "vitest";
 import { setLang } from "./i18n";
 import {
+  type ApprovalSnapshot,
   COMPLETION_NOTIFY_MIN_MS,
   deriveDesktopNotifications,
-  type ApprovalSnapshot,
 } from "./notifications";
 
 function emptySnapshot(): ApprovalSnapshot {
diff --git a/desktop/src/notifications.ts b/desktop/src/notifications.ts
index d38634053..ee2124d3e 100644
--- a/desktop/src/notifications.ts
+++ b/desktop/src/notifications.ts
@@ -115,10 +115,7 @@ export function shouldShowCompletionToast(args: {
   focused: boolean;
 }): boolean {
   return (
-    args.focused &&
-    args.wasBusy &&
-    !args.isBusy &&
-    args.busyDurationMs >= COMPLETION_NOTIFY_MIN_MS
+    args.focused && args.wasBusy && !args.isBusy && args.busyDurationMs >= COMPLETION_NOTIFY_MIN_MS
   );
 }
 
diff --git a/desktop/src/styles.css b/desktop/src/styles.css
index a93b368f7..0dc3ad568 100644
--- a/desktop/src/styles.css
+++ b/desktop/src/styles.css
@@ -95,11 +95,11 @@ body[data-drag-over="1"]::after {
   --card: oklch(99.5% 0.003 80);
   --card-hover: oklch(96.5% 0.009 78);
   --border: oklch(88% 0.016 76);
-  --border-strong: oklch(78% 0.020 72);
+  --border-strong: oklch(78% 0.02 72);
   --fg: oklch(22% 0.014 55);
   --fg-2: oklch(36% 0.013 55);
   --muted: oklch(53% 0.011 60);
-  --muted-2: oklch(67% 0.010 65);
+  --muted-2: oklch(67% 0.01 65);
 
   --accent: oklch(60% 0.19 38);
   --accent-soft: oklch(60% 0.19 38 / 0.1);
@@ -113,11 +113,11 @@ body[data-drag-over="1"]::after {
   --danger-soft: oklch(54% 0.2 22 / 0.1);
   /* warm amber replaces cool violet in light mode */
   --violet: oklch(62% 0.16 52);
-  --violet-soft: oklch(62% 0.16 52 / 0.10);
+  --violet-soft: oklch(62% 0.16 52 / 0.1);
 
   --shadow-sm: 0 1px 0 oklch(30% 0.05 50 / 0.05);
   --shadow-md: 0 8px 24px -10px oklch(30% 0.05 50 / 0.13);
-  --shadow-lg: 0 24px 60px -20px oklch(30% 0.05 50 / 0.20);
+  --shadow-lg: 0 24px 60px -20px oklch(30% 0.05 50 / 0.2);
 }
 
 [data-theme-style="porcelain"] {
@@ -366,6 +366,15 @@ html[data-platform="macos"] .app {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.tab .tab-main {
+  min-width: 0;
+  flex: 1;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: inherit;
+  text-align: left;
+}
 .tab .close {
   width: 16px;
   height: 16px;
@@ -401,8 +410,7 @@ html[data-platform="macos"] .app {
   display: grid;
   place-items: center;
   padding: 32px;
-  background:
-    radial-gradient(circle at top, var(--accent-soft), transparent 36%),
+  background: radial-gradient(circle at top, var(--accent-soft), transparent 36%),
     linear-gradient(180deg, transparent, oklch(0% 0 0 / 0.04));
 }
 
@@ -842,10 +850,10 @@ html[data-platform="macos"] .titlebar .tb-left {
 }
 
 .side-head {
-  padding: 10px 12px 8px;
+  padding: 10px 10px 8px;
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 6px;
 }
 .side-head .new-btn {
   flex: 1;
@@ -854,14 +862,17 @@ html[data-platform="macos"] .titlebar .tb-left {
   display: inline-flex;
   align-items: center;
   flex-wrap: nowrap;
-  gap: 8px;
-  padding: 0 10px;
-  font-size: 14px;
+  gap: 6px;
+  padding: 0 9px;
+  font-size: 13px;
+  line-height: 1;
   font-weight: 500;
   border-radius: 6px;
   background: var(--accent);
   color: oklch(99% 0 0);
   box-shadow: var(--shadow-sm);
+  white-space: nowrap;
+  overflow: hidden;
 }
 .side-head .new-btn:hover {
   background: var(--accent-strong);
@@ -877,7 +888,7 @@ html[data-platform="macos"] .titlebar .tb-left {
 }
 .side-head .new-btn kbd {
   font-family: inherit;
-  font-size: 14px;
+  font-size: 11px;
   background: oklch(100% 0 0 / 0.18);
   padding: 1px 5px;
   border-radius: 3px;
@@ -890,7 +901,7 @@ html[data-platform="macos"] .titlebar .tb-left {
 }
 .side-head .new-btn .shortcut kbd {
   min-width: 0;
-  font-size: 14px;
+  font-size: 11px;
   font-weight: 500;
   line-height: inherit;
   color: inherit;
@@ -900,16 +911,11 @@ html[data-platform="macos"] .titlebar .tb-left {
   padding: 1px 5px;
   box-shadow: none;
 }
-@container sidebar (min-width: 191px) {
+@container sidebar (min-width: 272px) {
   .side-head .new-btn .shortcut {
     display: inline-flex;
   }
 }
-@container sidebar (max-width: 240px) {
-  .side-head .new-btn .shortcut {
-    display: none;
-  }
-}
 @container sidebar (max-width: 190px) {
   .side-head .new-btn > span:not(.shortcut) {
     display: none;
@@ -1399,27 +1405,44 @@ html[data-platform="macos"] .titlebar .tb-left {
   color: var(--fg-2);
   cursor: pointer;
 }
-.session-menu .sm-item > svg { flex-shrink: 0; opacity: 0.7; }
+.session-menu .sm-item > svg {
+  flex-shrink: 0;
+  opacity: 0.7;
+}
 .session-menu .sm-item:hover {
   background: var(--panel);
   color: var(--fg);
 }
-.session-menu .sm-item:hover > svg { opacity: 1; }
+.session-menu .sm-item:hover > svg {
+  opacity: 1;
+}
 .session-menu .sm-item:disabled {
   opacity: 0.35;
   cursor: not-allowed;
 }
-.session-menu .sm-item.danger { color: var(--danger); }
-.session-menu .sm-item.danger > svg { opacity: 0.8; }
-.session-menu .sm-item.danger:hover { background: var(--danger-soft); }
+.session-menu .sm-item.danger {
+  color: var(--danger);
+}
+.session-menu .sm-item.danger > svg {
+  opacity: 0.8;
+}
+.session-menu .sm-item.danger:hover {
+  background: var(--danger-soft);
+}
 .session-menu .sm-sep {
   height: 1px;
   background: var(--border);
   margin: 4px 0;
 }
 @keyframes sm-confirm-in {
-  from { opacity: 0; transform: scale(0.96) translateY(4px); }
-  to   { opacity: 1; transform: none; }
+  from {
+    opacity: 0;
+    transform: scale(0.96) translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
 }
 .session-menu .sm-confirm {
   padding: 14px 12px 12px;
@@ -1480,18 +1503,24 @@ html[data-platform="macos"] .titlebar .tb-left {
   background: var(--card);
   color: var(--fg-2);
 }
-.session-menu .sm-confirm-cancel:hover { background: var(--panel); color: var(--fg); }
+.session-menu .sm-confirm-cancel:hover {
+  background: var(--panel);
+  color: var(--fg);
+}
 .session-menu .sm-confirm-ok {
   border: 1px solid transparent;
   background: var(--danger);
   color: oklch(99% 0 0);
 }
-.session-menu .sm-confirm-ok:hover { background: oklch(52% 0.22 25); }
+.session-menu .sm-confirm-ok:hover {
+  background: oklch(52% 0.22 25);
+}
 
 /* ---- session delete confirmation popover (right-click) ---- */
 .session-delete-popover {
   position: fixed;
   z-index: 80;
+  margin: 0;
   background: var(--card);
   border: 1px solid var(--border-strong);
   border-radius: 8px;
@@ -1499,6 +1528,8 @@ html[data-platform="macos"] .titlebar .tb-left {
   padding: 12px;
   min-width: 220px;
   max-width: 280px;
+  max-height: min(72vh, 360px);
+  overflow-y: auto;
   font-size: 14px;
   color: var(--fg);
   animation: rise 0.16s ease-out;
@@ -1519,10 +1550,12 @@ html[data-platform="macos"] .titlebar .tb-left {
 }
 .session-delete-popover .actions {
   display: flex;
+  flex-wrap: wrap;
   gap: 6px;
 }
 .session-delete-popover button {
-  flex: 1;
+  flex: 1 1 92px;
+  min-width: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1533,6 +1566,9 @@ html[data-platform="macos"] .titlebar .tb-left {
   font-weight: 500;
   font-family: inherit;
   cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
   transition: background 0.12s ease, color 0.12s ease;
 }
 .session-delete-popover button.cancel {
@@ -1556,8 +1592,12 @@ html[data-platform="macos"] .titlebar .tb-left {
 .session-import-popover {
   position: fixed;
   z-index: 80;
+  margin: 0;
   width: 320px;
   max-width: min(320px, calc(100vw - 16px));
+  max-height: min(82vh, 560px);
+  overflow-y: auto;
+  overscroll-behavior: contain;
   background: var(--card);
   border: 1px solid var(--border-strong);
   border-radius: 10px;
@@ -1780,17 +1820,22 @@ html[data-platform="macos"] .titlebar .tb-left {
 }
 .session-import-popover .actions {
   display: flex;
+  flex-wrap: wrap;
   gap: 6px;
   margin-top: 4px;
 }
 .session-import-popover .actions button {
-  flex: 1;
+  flex: 1 1 120px;
+  min-width: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 5px;
   padding: 8px 12px;
   border: 1px solid var(--border-strong);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .session-import-popover .actions button.cancel {
   background: transparent;
@@ -1807,7 +1852,9 @@ html[data-platform="macos"] .titlebar .tb-left {
 }
 
 /* Folder-delete confirm needs more room: workspace name + session count */
-.folder-menu { max-width: 260px; }
+.folder-menu {
+  max-width: 260px;
+}
 .folder-menu .sm-confirm-desc {
   max-width: 220px;
   -webkit-line-clamp: 3;
@@ -1831,12 +1878,17 @@ html[data-platform="macos"] .titlebar .tb-left {
 .side-foot .row {
   display: flex;
   align-items: center;
+  width: 100%;
   gap: 8px;
   padding: 6px 8px;
+  border: 0;
   border-radius: 6px;
+  background: transparent;
   font-size: 14px;
+  font-family: inherit;
   color: var(--fg-2);
   cursor: pointer;
+  text-align: left;
 }
 .side-foot .row:hover {
   background: var(--panel);
@@ -1969,32 +2021,44 @@ html:not([data-platform="macos"]) .shortcut kbd[data-key="mod"] {
   flex: 1;
   min-height: 0;
   position: relative;
+  overflow: hidden;
 }
-.thread::-webkit-scrollbar {
+.thread-scroller {
+  scrollbar-width: thin;
+  scrollbar-color: var(--border) transparent;
+  overscroll-behavior: contain;
+}
+.thread-scroller:focus {
+  outline: none;
+}
+.thread-scroller::-webkit-scrollbar {
   width: 8px;
 }
-.thread::-webkit-scrollbar-thumb {
+.thread-scroller::-webkit-scrollbar-thumb {
   background-clip: content-box;
   border: 2px solid transparent;
   background-color: var(--border);
   border-radius: 999px;
   transition: border-width 150ms, background-color 200ms;
 }
-.thread::-webkit-scrollbar-thumb:hover {
+.thread-scroller::-webkit-scrollbar-thumb:hover {
   border-width: 0;
   background-color: var(--border-strong);
 }
-.thread::-webkit-scrollbar-track {
+.thread-scroller::-webkit-scrollbar-track {
   background: transparent;
 }
 .thread-inner {
   max-width: var(--thread-max-width, 740px);
-  margin: 0 auto 28px;
+  margin: 0 auto 18px;
   padding: 0 32px;
 }
 .thread-inner--standalone {
   margin-top: 28px;
 }
+.thread-tail {
+  height: 10px;
+}
 .thread-inner > div[data-turn] {
   content-visibility: auto;
   contain-intrinsic-size: auto 100px;
@@ -2022,7 +2086,13 @@ html:not([data-platform="macos"]) .shortcut kbd[data-key="mod"] {
   max-height: 240px;
   overflow-y: auto;
   scrollbar-width: none;
-  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    transparent 0%,
+    #000 16%,
+    #000 84%,
+    transparent 100%
+  );
   mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
 }
 .jump-scroll::-webkit-scrollbar {
@@ -2035,18 +2105,31 @@ html:not([data-platform="macos"]) .shortcut kbd[data-key="mod"] {
   justify-content: flex-end;
   width: 32px;
   min-height: 14px;
+  padding: 0;
+  border: 0;
+  background: transparent;
   cursor: pointer;
   flex-shrink: 0;
 }
+.jump-item:focus-visible {
+  outline: 1px solid var(--accent);
+  outline-offset: 2px;
+}
 .jump-dot {
   height: 3px;
   border-radius: 2px;
   background: var(--border-strong);
   transition: background 200ms, width 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
 }
-.jump-dot[data-d="0"] { background: var(--accent); }
-.jump-dot[data-d="1"] { background: color-mix(in srgb, var(--accent) 60%, transparent); }
-.jump-dot[data-d="2"] { background: color-mix(in srgb, var(--accent) 35%, transparent); }
+.jump-dot[data-d="0"] {
+  background: var(--accent);
+}
+.jump-dot[data-d="1"] {
+  background: color-mix(in srgb, var(--accent) 60%, transparent);
+}
+.jump-dot[data-d="2"] {
+  background: color-mix(in srgb, var(--accent) 35%, transparent);
+}
 .jump-preview {
   position: absolute;
   right: 100%;
@@ -2070,7 +2153,7 @@ html:not([data-platform="macos"]) .shortcut kbd[data-key="mod"] {
 
 /* Jump-to-bottom button — shown when user has scrolled up during streaming */
 .thread-jump-bottom {
-  position: sticky;
+  position: absolute;
   bottom: 16px;
   left: 50%;
   transform: translateX(-50%);
@@ -2085,7 +2168,7 @@ html:not([data-platform="macos"]) .shortcut kbd[data-key="mod"] {
   background: var(--bg);
   color: var(--fg);
   cursor: pointer;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
   transition: opacity 0.15s, transform 0.15s;
   opacity: 0.9;
 }
@@ -2095,7 +2178,7 @@ html:not([data-platform="macos"]) .shortcut kbd[data-key="mod"] {
   transform: translateX(-50%) scale(1.05);
 }
 [data-theme="light"] .thread-jump-bottom {
-  box-shadow: 0 2px 12px rgba(0,0,0,0.10);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
 }
 
 /* ---------- TURN HEADERS ---------- */
@@ -2282,13 +2365,18 @@ html:not([data-platform="macos"]) .shortcut kbd[data-key="mod"] {
 .markdown li:last-child {
   margin-bottom: 0;
 }
-.msg-text ul ul, .markdown ul ul,
-.msg-text ol ol, .markdown ol ol,
-.msg-text ul ol, .markdown ul ol,
-.msg-text ol ul, .markdown ol ul {
+.msg-text ul ul,
+.markdown ul ul,
+.msg-text ol ol,
+.markdown ol ol,
+.msg-text ul ol,
+.markdown ul ol,
+.msg-text ol ul,
+.markdown ol ul {
   margin: 4px 0;
 }
-.msg-text h1, .markdown h1 {
+.msg-text h1,
+.markdown h1 {
   font-size: 1.45em;
   font-weight: 700;
   letter-spacing: -0.02em;
@@ -2296,7 +2384,8 @@ html:not([data-platform="macos"]) .shortcut kbd[data-key="mod"] {
   margin: 22px 0 10px;
   color: var(--fg);
 }
-.msg-text h2, .markdown h2 {
+.msg-text h2,
+.markdown h2 {
   font-size: 1.2em;
   font-weight: 700;
   letter-spacing: -0.015em;
@@ -2304,24 +2393,31 @@ html:not([data-platform="macos"]) .shortcut kbd[data-key="mod"] {
   margin: 20px 0 8px;
   color: var(--fg);
 }
-.msg-text h3, .markdown h3 {
+.msg-text h3,
+.markdown h3 {
   font-size: 1.05em;
   font-weight: 600;
   line-height: 1.35;
   margin: 18px 0 6px;
   color: var(--fg);
 }
-.msg-text h4, .markdown h4,
-.msg-text h5, .markdown h5,
-.msg-text h6, .markdown h6 {
+.msg-text h4,
+.markdown h4,
+.msg-text h5,
+.markdown h5,
+.msg-text h6,
+.markdown h6 {
   font-size: 1em;
   font-weight: 600;
   margin: 14px 0 4px;
   color: var(--fg-2);
 }
-.msg-text h1:first-child, .markdown h1:first-child,
-.msg-text h2:first-child, .markdown h2:first-child,
-.msg-text h3:first-child, .markdown h3:first-child {
+.msg-text h1:first-child,
+.markdown h1:first-child,
+.msg-text h2:first-child,
+.markdown h2:first-child,
+.msg-text h3:first-child,
+.markdown h3:first-child {
   margin-top: 0;
 }
 .msg-text blockquote,
@@ -2607,9 +2703,7 @@ html:not([data-platform="macos"]) .shortcut kbd[data-key="mod"] {
   cursor: pointer;
   vertical-align: baseline;
   text-decoration: none;
-  transition:
-    background 0.12s,
-    color 0.12s;
+  transition: background 0.12s, color 0.12s;
   white-space: nowrap;
 }
 .file-pill:hover {
@@ -2755,10 +2849,7 @@ html:not([data-platform="macos"]) .shortcut kbd[data-key="mod"] {
   border-radius: 999px;
   box-shadow: var(--shadow-sm);
   cursor: pointer;
-  transition:
-    background 0.13s ease,
-    color 0.13s ease,
-    transform 0.13s ease;
+  transition: background 0.13s ease, color 0.13s ease, transform 0.13s ease;
 }
 .proc-group.is-clipped .proc-group-toggle {
   position: absolute;
@@ -3246,11 +3337,7 @@ html:not([data-platform="macos"]) .shortcut kbd[data-key="mod"] {
   width: 80px;
   height: 56px;
   border-radius: 6px;
-  background: repeating-linear-gradient(
-    -45deg,
-    var(--panel-2) 0 6px,
-    var(--card) 6px 12px
-  );
+  background: repeating-linear-gradient(-45deg, var(--panel-2) 0 6px, var(--card) 6px 12px);
   border: 1px solid var(--border);
   display: flex;
   align-items: center;
@@ -3571,6 +3658,12 @@ html:not([data-platform="macos"]) .shortcut kbd[data-key="mod"] {
 .chip .x {
   cursor: pointer;
   opacity: 0.5;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  color: inherit;
+  display: inline-flex;
+  align-items: center;
 }
 .chip .x:hover {
   opacity: 1;
@@ -3608,7 +3701,9 @@ html:not([data-platform="macos"]) .shortcut kbd[data-key="mod"] {
   color: var(--muted);
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   gap: 5px;
+  min-width: 30px;
 }
 .composer-foot .cf-btn:hover {
   background: var(--panel);
@@ -3654,6 +3749,35 @@ html:not([data-platform="macos"]) .shortcut kbd[data-key="mod"] {
   padding: 1px 5px;
   border-radius: 3px;
 }
+.composer-model-direct {
+  position: relative;
+  min-width: 0;
+  flex: 0 1 auto;
+}
+.composer-tools-more {
+  position: relative;
+  display: none;
+  flex-shrink: 0;
+}
+.composer-tools-menu {
+  left: auto;
+  right: 0;
+  width: min(360px, calc(100vw - 44px));
+  max-height: min(70vh, 520px);
+  display: block;
+  overflow-y: auto;
+}
+.composer-tools-menu .popup-list {
+  overflow: visible;
+}
+.composer-tools-actions {
+  border-bottom: 1px solid var(--border);
+}
+.popup-item:is(button) {
+  border: 0;
+  background: transparent;
+  font: inherit;
+}
 
 .send-btn {
   width: 30px;
@@ -3685,7 +3809,9 @@ html:not([data-platform="macos"]) .shortcut kbd[data-key="mod"] {
   font-size: 14px;
   color: var(--muted-2);
 }
-.hint-row .grow { flex: 1; }
+.hint-row .grow {
+  flex: 1;
+}
 .hint-row .hint-sep {
   width: 1px;
   height: 12px;
@@ -3751,6 +3877,20 @@ html:not([data-platform="macos"]) .shortcut kbd[data-key="mod"] {
 .popup .ph .grow {
   flex: 1;
 }
+.popup-close {
+  border: 0;
+  padding: 2px;
+  border-radius: 5px;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+}
+.popup-close:hover {
+  background: var(--panel);
+  color: var(--fg);
+}
 .popup-list {
   overflow-y: auto;
   overflow-x: auto;
@@ -3760,6 +3900,7 @@ html:not([data-platform="macos"]) .shortcut kbd[data-key="mod"] {
   min-width: max-content;
 }
 .popup-item {
+  width: 100%;
   display: grid;
   grid-template-columns: 24px 1fr auto;
   align-items: center;
@@ -3768,6 +3909,8 @@ html:not([data-platform="macos"]) .shortcut kbd[data-key="mod"] {
   border-radius: 6px;
   cursor: pointer;
   font-size: 14px;
+  color: inherit;
+  text-align: left;
 }
 .popup-item:hover,
 .popup-item[data-active="true"] {
@@ -3860,9 +4003,15 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
   font-size: 14px;
   color: var(--muted);
   border-radius: 5px 5px 0 0;
+  border: 1px solid transparent;
+  background: transparent;
   font-family: inherit;
   cursor: pointer;
 }
+.ctx-tab:focus-visible {
+  outline: 1px solid var(--accent);
+  outline-offset: -2px;
+}
 .ctx-tab:hover {
   color: var(--fg);
 }
@@ -4178,18 +4327,36 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
   gap: 6px;
   padding: 0 10px;
   height: 100%;
+  max-width: min(280px, 42vw);
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
   cursor: pointer;
+  min-width: 0;
+}
+.statusbar .seg:disabled {
+  cursor: default;
+  opacity: 0.75;
 }
 .statusbar .seg:hover {
   background: var(--panel);
   color: var(--fg);
 }
+.statusbar .seg:disabled:hover {
+  background: transparent;
+  color: var(--muted);
+}
 .statusbar .seg.theme-trigger.active {
   background: var(--accent-soft);
   color: var(--accent);
 }
 .statusbar .seg .v {
   color: var(--fg);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .statusbar .seg .v.ok {
   color: var(--success);
@@ -4359,7 +4526,9 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
   display: inline-block;
   flex-shrink: 0;
 }
-.status-dot.warn { background: var(--warning); }
+.status-dot.warn {
+  background: var(--warning);
+}
 
 .meta-label {
   font-size: 10px;
@@ -4393,12 +4562,7 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
 
 /* shimmer for streaming text */
 .shimmer {
-  background: linear-gradient(
-    90deg,
-    var(--fg-2) 0%,
-    var(--accent) 50%,
-    var(--fg-2) 100%
-  );
+  background: linear-gradient(90deg, var(--fg-2) 0%, var(--accent) 50%, var(--fg-2) 100%);
   background-size: 200% 100%;
   -webkit-background-clip: text;
   background-clip: text;
@@ -4453,7 +4617,9 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
   animation-delay: 0.3s;
 }
 @keyframes bounce {
-  0%, 80%, 100% {
+  0%,
+  80%,
+  100% {
     transform: translateY(0);
     opacity: 0.4;
   }
@@ -4464,12 +4630,7 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
 }
 
 .thinking .label .sh {
-  background: linear-gradient(
-    90deg,
-    var(--muted) 0%,
-    var(--accent) 50%,
-    var(--muted) 100%
-  );
+  background: linear-gradient(90deg, var(--muted) 0%, var(--accent) 50%, var(--muted) 100%);
   background-size: 200% 100%;
   -webkit-background-clip: text;
   background-clip: text;
@@ -4606,11 +4767,21 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
     background-position: -100% 0;
   }
 }
-.skel-line.w-90 { width: 92%; }
-.skel-line.w-70 { width: 72%; }
-.skel-line.w-60 { width: 64%; }
-.skel-line.w-40 { width: 44%; }
-.skel-line.w-30 { width: 34%; }
+.skel-line.w-90 {
+  width: 92%;
+}
+.skel-line.w-70 {
+  width: 72%;
+}
+.skel-line.w-60 {
+  width: 64%;
+}
+.skel-line.w-40 {
+  width: 44%;
+}
+.skel-line.w-30 {
+  width: 34%;
+}
 
 /* progressive log (tool live output) */
 .live-log {
@@ -4639,15 +4810,27 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
   opacity: 0;
   animation: line-in 0.25s ease-out forwards;
 }
-.live-log .line.ok { color: var(--success); }
-.live-log .line.dim { color: var(--muted); }
+.live-log .line.ok {
+  color: var(--success);
+}
+.live-log .line.dim {
+  color: var(--muted);
+}
 @keyframes line-in {
-  to { opacity: 1; }
+  to {
+    opacity: 1;
+  }
 }
 
 @keyframes rise {
-  from { opacity: 0; transform: translateY(8px); }
-  to { opacity: 1; transform: translateY(0); }
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 .composer-busy-status {
@@ -4713,7 +4896,10 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
   justify-content: center;
   width: 14px;
   height: 14px;
+  border: 0;
   border-radius: 50%;
+  padding: 0;
+  background: transparent;
   cursor: pointer;
   color: var(--muted);
 }
@@ -4741,8 +4927,12 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
   border-radius: 50%;
   background: var(--accent);
 }
-.queue-strip .pip.q { background: var(--muted-2); }
-.queue-strip .pip.w { background: var(--warning); }
+.queue-strip .pip.q {
+  background: var(--muted-2);
+}
+.queue-strip .pip.w {
+  background: var(--warning);
+}
 
 /* ---- token stream rate bar ---- */
 .tps {
@@ -4770,14 +4960,34 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
   opacity: 0.65;
   animation: bar 0.9s ease-in-out infinite;
 }
-.tps .bars span:nth-child(1) { height: 30%; animation-delay: 0s; }
-.tps .bars span:nth-child(2) { height: 65%; animation-delay: 0.1s; }
-.tps .bars span:nth-child(3) { height: 90%; animation-delay: 0.2s; }
-.tps .bars span:nth-child(4) { height: 50%; animation-delay: 0.3s; }
-.tps .bars span:nth-child(5) { height: 75%; animation-delay: 0.4s; }
+.tps .bars span:nth-child(1) {
+  height: 30%;
+  animation-delay: 0s;
+}
+.tps .bars span:nth-child(2) {
+  height: 65%;
+  animation-delay: 0.1s;
+}
+.tps .bars span:nth-child(3) {
+  height: 90%;
+  animation-delay: 0.2s;
+}
+.tps .bars span:nth-child(4) {
+  height: 50%;
+  animation-delay: 0.3s;
+}
+.tps .bars span:nth-child(5) {
+  height: 75%;
+  animation-delay: 0.4s;
+}
 @keyframes bar {
-  0%, 100% { transform: scaleY(0.5); }
-  50% { transform: scaleY(1); }
+  0%,
+  100% {
+    transform: scaleY(0.5);
+  }
+  50% {
+    transform: scaleY(1);
+  }
 }
 
 /* shell card while running */
@@ -4805,8 +5015,13 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
   animation: pulse-soft 1.6s ease-in-out infinite;
 }
 @keyframes pulse-soft {
-  0%, 100% { opacity: 0; }
-  50% { opacity: 1; }
+  0%,
+  100% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
 }
 .user-status {
   display: inline-flex;
@@ -4842,8 +5057,12 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
   background: oklch(0% 0 0 / 0.18);
 }
 @keyframes fade-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 .settings {
@@ -4876,12 +5095,17 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
 .settings-side .row {
   display: flex;
   align-items: center;
+  width: 100%;
   gap: 10px;
   padding: 7px 10px;
+  border: 0;
   border-radius: 6px;
+  background: transparent;
   font-size: 14px;
+  font-family: inherit;
   color: var(--fg-2);
   cursor: pointer;
+  text-align: left;
 }
 .settings-side .row:hover {
   background: var(--panel);
@@ -4927,7 +5151,9 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
   font-size: 14px;
   margin-top: 2px;
 }
-.settings-head .grow { flex: 1; }
+.settings-head .grow {
+  flex: 1;
+}
 .settings-head .close-btn {
   width: 26px;
   height: 26px;
@@ -5284,7 +5510,9 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
   color: var(--muted);
   margin-top: 2px;
 }
-.scard .grow { flex: 1; }
+.scard .grow {
+  flex: 1;
+}
 .scard .mcp-spec-body {
   min-width: 0;
   flex: 1 1 auto;
@@ -5339,6 +5567,10 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
   padding: 14px;
   position: relative;
   cursor: pointer;
+  color: var(--fg);
+  font: inherit;
+  text-align: left;
+  width: 100%;
 }
 .mcard[data-on="true"] {
   border-color: var(--accent);
@@ -5372,8 +5604,12 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
   font-family: inherit;
   font-size: 14px;
 }
-.mcard .spec .k { color: var(--muted); }
-.mcard .spec .v { color: var(--fg); }
+.mcard .spec .k {
+  color: var(--muted);
+}
+.mcard .spec .v {
+  color: var(--fg);
+}
 .mcard .price {
   margin-top: 8px;
   padding-top: 8px;
@@ -5445,13 +5681,16 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
   text-transform: uppercase;
 }
 .mem-edit .scope[data-s="project"] {
-  background: var(--accent-soft); color: var(--accent);
+  background: var(--accent-soft);
+  color: var(--accent);
 }
 .mem-edit .scope[data-s="user"] {
-  background: var(--violet-soft); color: var(--violet);
+  background: var(--violet-soft);
+  color: var(--violet);
 }
 .mem-edit .scope[data-s="global"] {
-  background: var(--success-soft); color: var(--success);
+  background: var(--success-soft);
+  color: var(--success);
 }
 .mem-edit .txt {
   font-size: 14px;
@@ -5489,8 +5728,12 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
   margin-top: 4px;
   letter-spacing: -0.02em;
 }
-.bill-card .v.ok { color: var(--success); }
-.bill-card .v.acc { color: var(--accent); }
+.bill-card .v.ok {
+  color: var(--success);
+}
+.bill-card .v.acc {
+  color: var(--accent);
+}
 .bill-card .sub {
   font-size: 14px;
   color: var(--muted);
@@ -5540,8 +5783,12 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
 .usage-table td.num {
   text-align: right;
 }
-.usage-table td .pos { color: var(--accent); }
-.usage-table td .ok  { color: var(--success); }
+.usage-table td .pos {
+  color: var(--accent);
+}
+.usage-table td .ok {
+  color: var(--success);
+}
 
 /* plan-approved banner inline in thread */
 .plan-banner {
@@ -5628,47 +5875,149 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
    TONE PALETTE — systematized
    ============================================================ */
 :root {
-  --tone-ok:        oklch(72% 0.16 152);
-  --tone-ok-soft:   oklch(72% 0.16 152 / 0.12);
-  --tone-warn:      oklch(78% 0.16 80);
+  --tone-ok: oklch(72% 0.16 152);
+  --tone-ok-soft: oklch(72% 0.16 152 / 0.12);
+  --tone-warn: oklch(78% 0.16 80);
   --tone-warn-soft: oklch(78% 0.16 80 / 0.14);
-  --tone-err:       oklch(68% 0.20 25);
-  --tone-err-soft:  oklch(68% 0.20 25 / 0.14);
-  --tone-info:      oklch(70% 0.13 230);
+  --tone-err: oklch(68% 0.2 25);
+  --tone-err-soft: oklch(68% 0.2 25 / 0.14);
+  --tone-info: oklch(70% 0.13 230);
   --tone-info-soft: oklch(70% 0.13 230 / 0.14);
-  --tone-brand:     oklch(66% 0.18 38);
-  --tone-brand-soft:oklch(66% 0.18 38 / 0.14);
-  --tone-accent:    var(--accent);
+  --tone-brand: oklch(66% 0.18 38);
+  --tone-brand-soft: oklch(66% 0.18 38 / 0.14);
+  --tone-accent: var(--accent);
   --tone-accent-soft: var(--accent-soft);
-  --tone-ghost:     oklch(60% 0.005 250);
-  --tone-ghost-soft:oklch(60% 0.005 250 / 0.10);
+  --tone-ghost: oklch(60% 0.005 250);
+  --tone-ghost-soft: oklch(60% 0.005 250 / 0.1);
   /* states */
-  --st-running:  oklch(72% 0.16 200);
-  --st-done:     var(--tone-ok);
-  --st-failed:   var(--tone-err);
-  --st-queued:   oklch(65% 0.005 250);
-  --st-blocked:  oklch(70% 0.14 50);
-  --st-skipped:  oklch(60% 0.04 250);
-  --st-aborted:  oklch(60% 0.13 25);
+  --st-running: oklch(72% 0.16 200);
+  --st-done: var(--tone-ok);
+  --st-failed: var(--tone-err);
+  --st-queued: oklch(65% 0.005 250);
+  --st-blocked: oklch(70% 0.14 50);
+  --st-skipped: oklch(60% 0.04 250);
+  --st-aborted: oklch(60% 0.13 25);
 }
 [data-theme="light"] {
-  --tone-ok:        oklch(50% 0.16 152);
-  --tone-warn:      oklch(58% 0.16 75);
-  --tone-err:       oklch(56% 0.20 25);
-  --tone-info:      oklch(55% 0.15 230);
-  --tone-brand:     oklch(50% 0.18 258);
-  --tone-ghost:     oklch(45% 0.005 250);
+  --tone-ok: oklch(50% 0.16 152);
+  --tone-warn: oklch(58% 0.16 75);
+  --tone-err: oklch(56% 0.2 25);
+  --tone-info: oklch(55% 0.15 230);
+  --tone-brand: oklch(50% 0.18 258);
+  --tone-ghost: oklch(45% 0.005 250);
 }
 
 /* ============================================================
    APPROVAL CARD — universal (plan / edit / shell / path / checkpoint / refinement / revision)
    ============================================================ */
-.approval {
-  border: 1px solid var(--border);
-  background: var(--card);
-  border-radius: 10px;
-  overflow: hidden;
-  position: relative;
+.approval-tray {
+  width: 100%;
+  max-width: var(--thread-max-width, 740px);
+  margin: 0 auto;
+  padding: 0 32px 8px;
+  flex-shrink: 0;
+}
+.approval-tray-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 2px;
+  color: var(--muted);
+  font-size: 14px;
+}
+.approval-tray-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  color: var(--fg-2);
+}
+.approval-tray-title span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.approval-tray-count {
+  min-width: 20px;
+  height: 20px;
+  padding: 0 6px;
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--accent-soft);
+  color: var(--accent);
+  font-size: 12px;
+  font-weight: 600;
+}
+.approval-tray-head .grow {
+  flex: 1;
+}
+.approval-tray-toggle,
+.approval-queue-more {
+  border: 1px solid var(--border);
+  background: var(--panel);
+  color: var(--fg-2);
+  border-radius: 6px;
+  font: inherit;
+  font-size: 13px;
+  cursor: pointer;
+}
+.approval-tray-toggle {
+  padding: 3px 8px;
+  flex-shrink: 0;
+}
+.approval-tray-toggle:hover,
+.approval-queue-more:hover {
+  background: var(--panel-2);
+  color: var(--fg);
+}
+.approval-stack {
+  display: grid;
+  gap: 8px;
+  max-height: min(28vh, 340px);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding-right: 4px;
+  scrollbar-width: thin;
+  scrollbar-color: var(--border) transparent;
+}
+.approval-stack::-webkit-scrollbar {
+  width: 8px;
+}
+.approval-stack::-webkit-scrollbar-thumb {
+  background-color: var(--border);
+  border: 2px solid transparent;
+  background-clip: content-box;
+  border-radius: 999px;
+}
+.approval-slot {
+  min-width: 0;
+}
+.approval-queue-more {
+  min-height: 34px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 7px 10px;
+}
+.approval-connecting {
+  padding: 10px 12px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--panel);
+  color: var(--muted);
+  font-family: inherit;
+  font-size: 13px;
+}
+.approval {
+  border: 1px solid var(--border);
+  background: var(--card);
+  border-radius: 10px;
+  overflow: hidden;
+  position: relative;
 }
 .approval::before {
   content: "";
@@ -5677,12 +6026,24 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
   width: 3px;
   background: var(--approval-accent, var(--accent));
 }
-.approval[data-tone="ok"]      { --approval-accent: var(--tone-ok); }
-.approval[data-tone="warn"]    { --approval-accent: var(--tone-warn); }
-.approval[data-tone="danger"]  { --approval-accent: var(--tone-err); }
-.approval[data-tone="info"]    { --approval-accent: var(--tone-info); }
-.approval[data-tone="brand"]   { --approval-accent: var(--tone-brand); }
-.approval[data-tone="ghost"]   { --approval-accent: var(--tone-ghost); }
+.approval[data-tone="ok"] {
+  --approval-accent: var(--tone-ok);
+}
+.approval[data-tone="warn"] {
+  --approval-accent: var(--tone-warn);
+}
+.approval[data-tone="danger"] {
+  --approval-accent: var(--tone-err);
+}
+.approval[data-tone="info"] {
+  --approval-accent: var(--tone-info);
+}
+.approval[data-tone="brand"] {
+  --approval-accent: var(--tone-brand);
+}
+.approval[data-tone="ghost"] {
+  --approval-accent: var(--tone-ghost);
+}
 
 .approval .ap-head {
   display: flex;
@@ -5700,7 +6061,9 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
   background: var(--approval-accent);
   color: oklch(99% 0 0);
 }
-[data-theme="light"] .approval .ap-ico { color: oklch(100% 0 0); }
+[data-theme="light"] .approval .ap-ico {
+  color: oklch(100% 0 0);
+}
 .approval .ap-kind {
   font-family: inherit;
   font-size: 14px;
@@ -5769,16 +6132,42 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
 .approval .ap-foot {
   display: flex;
   align-items: center;
+  justify-content: flex-end;
+  flex-wrap: wrap;
   gap: 6px;
   padding: 8px 12px;
   border-top: 1px solid var(--border);
   background: var(--bg-2);
 }
-.approval .ap-foot .grow { flex: 1; }
+.approval .ap-foot .btn {
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.approval .ap-foot .grow {
+  flex: 1 1 16px;
+  min-width: 12px;
+}
 .approval .ap-foot .meta {
   font-family: inherit;
   font-size: 14px;
   color: var(--muted);
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: right;
+}
+.approval .ap-body .btn {
+  min-width: 0;
+  max-width: 100%;
+}
+.approval .ap-body .btn > div {
+  min-width: 0;
+  overflow: hidden;
 }
 
 /* ============================================================
@@ -5798,20 +6187,43 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
   border-bottom: 1px solid var(--border);
 }
 .task-card .th .ico {
-  width: 24px; height: 24px; border-radius: 6px;
-  display: inline-flex; align-items: center; justify-content: center;
-  background: var(--accent-soft); color: var(--accent);
+  width: 24px;
+  height: 24px;
+  border-radius: 6px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--accent-soft);
+  color: var(--accent);
+}
+.task-card .th .tt {
+  font-size: 14px;
+  font-weight: 600;
+}
+.task-card .th .ss {
+  font-family: inherit;
+  font-size: 14px;
+  color: var(--muted);
+  margin-top: 1px;
+}
+.task-card .th .grow {
+  flex: 1;
 }
-.task-card .th .tt { font-size: 14px; font-weight: 600; }
-.task-card .th .ss { font-family: inherit; font-size: 14px; color: var(--muted); margin-top: 1px; }
-.task-card .th .grow { flex: 1; }
 .task-card .th .meter {
-  width: 64px; height: 4px; border-radius: 999px;
+  width: 64px;
+  height: 4px;
+  border-radius: 999px;
   background: var(--panel);
   overflow: hidden;
 }
-.task-card .th .meter > span { display: block; height: 100%; background: var(--accent); }
-.task-card .tb { padding: 6px 0; }
+.task-card .th .meter > span {
+  display: block;
+  height: 100%;
+  background: var(--accent);
+}
+.task-card .tb {
+  padding: 6px 0;
+}
 .task-step {
   display: grid;
   grid-template-columns: 48px 18px 1fr auto;
@@ -5820,11 +6232,23 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
   padding: 8px 14px;
   border-left: 2px solid transparent;
 }
-.task-step[data-state="running"] { border-left-color: var(--st-running); background: oklch(72% 0.16 200 / 0.04); }
-.task-step[data-state="done"]    { border-left-color: var(--st-done); }
-.task-step[data-state="failed"]  { border-left-color: var(--st-failed); background: oklch(68% 0.20 25 / 0.05); }
-.task-step[data-state="blocked"] { border-left-color: var(--st-blocked); }
-.task-step[data-state="skipped"] { opacity: 0.55; }
+.task-step[data-state="running"] {
+  border-left-color: var(--st-running);
+  background: oklch(72% 0.16 200 / 0.04);
+}
+.task-step[data-state="done"] {
+  border-left-color: var(--st-done);
+}
+.task-step[data-state="failed"] {
+  border-left-color: var(--st-failed);
+  background: oklch(68% 0.2 25 / 0.05);
+}
+.task-step[data-state="blocked"] {
+  border-left-color: var(--st-blocked);
+}
+.task-step[data-state="skipped"] {
+  opacity: 0.55;
+}
 .task-step .nx {
   font-family: inherit;
   font-size: 14px;
@@ -5832,34 +6256,127 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
   padding-top: 1px;
 }
 .task-step .st {
-  width: 14px; height: 14px; border-radius: 50%;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
   margin-top: 2px;
   position: relative;
 }
-.task-step[data-state="queued"]  .st { border: 1.5px dashed var(--border-strong); }
-.task-step[data-state="running"] .st { background: var(--st-running); animation: pulse 1.4s ease-in-out infinite; }
-.task-step[data-state="done"]    .st { background: var(--st-done); }
-.task-step[data-state="done"]    .st::after { content:"\2713"; position:absolute; inset:0; color:#fff; font-size:14px; display:flex; align-items:center; justify-content:center; }
-.task-step[data-state="failed"]  .st { background: var(--st-failed); }
-.task-step[data-state="failed"]  .st::after { content:"!"; position:absolute; inset:0; color:#fff; font-size:14px; font-weight:700; display:flex; align-items:center; justify-content:center; }
-.task-step[data-state="blocked"] .st { background: var(--st-blocked); }
-.task-step[data-state="blocked"] .st::after { content:"\f7"; position:absolute; inset:0; color:#fff; font-size:14px; display:flex; align-items:center; justify-content:center; }
-.task-step[data-state="skipped"] .st { background: var(--st-skipped); }
-.task-step[data-state="skipped"] .st::after { content:"\2014"; position:absolute; inset:0; color:#fff; font-size:14px; display:flex; align-items:center; justify-content:center; }
-.task-step .l { font-size: 14px; color: var(--fg); }
-.task-step .l .h { color: var(--muted); font-size: 14px; margin-top: 2px; font-family: inherit; }
-.task-step .t { font-family: inherit; font-size: 14px; color: var(--muted); }
+.task-step[data-state="queued"] .st {
+  border: 1.5px dashed var(--border-strong);
+}
+.task-step[data-state="running"] .st {
+  background: var(--st-running);
+  animation: pulse 1.4s ease-in-out infinite;
+}
+.task-step[data-state="done"] .st {
+  background: var(--st-done);
+}
+.task-step[data-state="done"] .st::after {
+  content: "\2713";
+  position: absolute;
+  inset: 0;
+  color: #fff;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.task-step[data-state="failed"] .st {
+  background: var(--st-failed);
+}
+.task-step[data-state="failed"] .st::after {
+  content: "!";
+  position: absolute;
+  inset: 0;
+  color: #fff;
+  font-size: 14px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.task-step[data-state="blocked"] .st {
+  background: var(--st-blocked);
+}
+.task-step[data-state="blocked"] .st::after {
+  content: "\f7";
+  position: absolute;
+  inset: 0;
+  color: #fff;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.task-step[data-state="skipped"] .st {
+  background: var(--st-skipped);
+}
+.task-step[data-state="skipped"] .st::after {
+  content: "\2014";
+  position: absolute;
+  inset: 0;
+  color: #fff;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.task-step .l {
+  font-size: 14px;
+  color: var(--fg);
+}
+.task-step .l .h {
+  color: var(--muted);
+  font-size: 14px;
+  margin-top: 2px;
+  font-family: inherit;
+}
+.task-step .t {
+  font-family: inherit;
+  font-size: 14px;
+  color: var(--muted);
+}
 
 /* plan state extensions */
-.plan-row[data-state="failed"]  .check { background: var(--st-failed); border-color: var(--st-failed); }
-.plan-row[data-state="blocked"] .check { background: var(--st-blocked); border-color: var(--st-blocked); }
-.plan-row[data-state="skipped"] .check { background: var(--st-skipped); border-color: var(--st-skipped); }
-.plan-row[data-state="failed"]  .check::after  { content:"!"; color:#fff; font-size:14px; font-weight:700; }
-.plan-row[data-state="blocked"] .check::after  { content:"\f7"; color:#fff; font-size:14px; }
-.plan-row[data-state="skipped"] .check::after  { content:"\2014"; color:#fff; font-size:14px; }
-.plan-row[data-state="failed"]  > .body > .l { color: var(--st-failed); }
-.plan-row[data-state="blocked"] > .body > .l { color: var(--st-blocked); }
-.plan-row[data-state="skipped"] > .body > .l { color: var(--st-skipped); text-decoration: line-through; }
+.plan-row[data-state="failed"] .check {
+  background: var(--st-failed);
+  border-color: var(--st-failed);
+}
+.plan-row[data-state="blocked"] .check {
+  background: var(--st-blocked);
+  border-color: var(--st-blocked);
+}
+.plan-row[data-state="skipped"] .check {
+  background: var(--st-skipped);
+  border-color: var(--st-skipped);
+}
+.plan-row[data-state="failed"] .check::after {
+  content: "!";
+  color: #fff;
+  font-size: 14px;
+  font-weight: 700;
+}
+.plan-row[data-state="blocked"] .check::after {
+  content: "\f7";
+  color: #fff;
+  font-size: 14px;
+}
+.plan-row[data-state="skipped"] .check::after {
+  content: "\2014";
+  color: #fff;
+  font-size: 14px;
+}
+.plan-row[data-state="failed"] > .body > .l {
+  color: var(--st-failed);
+}
+.plan-row[data-state="blocked"] > .body > .l {
+  color: var(--st-blocked);
+}
+.plan-row[data-state="skipped"] > .body > .l {
+  color: var(--st-skipped);
+  text-decoration: line-through;
+}
 
 /* ============================================================
    WARN CARD
@@ -5873,10 +6390,27 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
   grid-template-columns: 24px 1fr;
   gap: 10px;
 }
-.warn-card .ico { color: var(--tone-warn); margin-top: 1px; }
-.warn-card .tt { font-size: 14px; font-weight: 600; color: var(--fg); }
-.warn-card .ds { font-size: 14px; color: var(--fg-2); margin-top: 4px; line-height: 1.55; }
-.warn-card .ds code { background: var(--panel); padding: 1px 5px; border-radius: 3px; font-size: 14px; }
+.warn-card .ico {
+  color: var(--tone-warn);
+  margin-top: 1px;
+}
+.warn-card .tt {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--fg);
+}
+.warn-card .ds {
+  font-size: 14px;
+  color: var(--fg-2);
+  margin-top: 4px;
+  line-height: 1.55;
+}
+.warn-card .ds code {
+  background: var(--panel);
+  padding: 1px 5px;
+  border-radius: 3px;
+  font-size: 14px;
+}
 
 /* ============================================================
    TIP CARD
@@ -5888,16 +6422,28 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
   padding: 12px 14px 8px;
 }
 .tip-card .head {
-  display: flex; align-items: center; gap: 8px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
   margin-bottom: 8px;
 }
 .tip-card .head .ico {
-  width: 22px; height: 22px; border-radius: 5px;
-  display: inline-flex; align-items: center; justify-content: center;
-  background: var(--tone-info); color: oklch(99% 0 0);
+  width: 22px;
+  height: 22px;
+  border-radius: 5px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--tone-info);
+  color: oklch(99% 0 0);
+}
+.tip-card .head .topic {
+  font-size: 14px;
+  font-weight: 600;
+}
+.tip-card .head .grow {
+  flex: 1;
 }
-.tip-card .head .topic { font-size: 14px; font-weight: 600; }
-.tip-card .head .grow { flex: 1; }
 .tip-card .head .pill {
   font-family: inherit;
   font-size: 14px;
@@ -5906,7 +6452,9 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
   border-radius: 4px;
   color: var(--tone-info);
 }
-.tip-card .sec { margin-bottom: 8px; }
+.tip-card .sec {
+  margin-bottom: 8px;
+}
 .tip-card .sec .stt {
   font-family: inherit;
   font-size: 14px;
@@ -5946,26 +6494,47 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
   overflow: hidden;
 }
 .doctor-card .dh {
-  display: flex; align-items: center; gap: 10px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
   padding: 10px 12px;
   border-bottom: 1px solid var(--border);
 }
 .doctor-card .dh .ico {
-  width: 24px; height: 24px; border-radius: 6px;
-  background: var(--tone-info-soft); color: var(--tone-info);
-  display: inline-flex; align-items: center; justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 6px;
+  background: var(--tone-info-soft);
+  color: var(--tone-info);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.doctor-card .dh .tt {
+  font-size: 14px;
+  font-weight: 600;
+}
+.doctor-card .dh .grow {
+  flex: 1;
 }
-.doctor-card .dh .tt { font-size: 14px; font-weight: 600; }
-.doctor-card .dh .grow { flex: 1; }
 .doctor-card .dh .summary {
   font-family: inherit;
   font-size: 14px;
-  display: inline-flex; gap: 8px;
+  display: inline-flex;
+  gap: 8px;
+}
+.doctor-card .dh .summary .b {
+  font-weight: 600;
+}
+.doctor-card .dh .summary .ok {
+  color: var(--tone-ok);
+}
+.doctor-card .dh .summary .warn {
+  color: var(--tone-warn);
+}
+.doctor-card .dh .summary .err {
+  color: var(--tone-err);
 }
-.doctor-card .dh .summary .b { font-weight: 600; }
-.doctor-card .dh .summary .ok { color: var(--tone-ok); }
-.doctor-card .dh .summary .warn { color: var(--tone-warn); }
-.doctor-card .dh .summary .err { color: var(--tone-err); }
 .doctor-row {
   display: grid;
   grid-template-columns: 22px 1fr auto;
@@ -5974,22 +6543,46 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
   border-bottom: 1px dashed var(--border);
   align-items: center;
 }
-.doctor-row:last-child { border-bottom: none; }
+.doctor-row:last-child {
+  border-bottom: none;
+}
 .doctor-row .ic {
-  width: 18px; height: 18px; border-radius: 50%;
-  display: inline-flex; align-items: center; justify-content: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   color: oklch(99% 0 0);
-  font-size: 14px; font-weight: 700;
+  font-size: 14px;
+  font-weight: 700;
+}
+.doctor-row[data-s="ok"] .ic {
+  background: var(--tone-ok);
+}
+.doctor-row[data-s="warn"] .ic {
+  background: var(--tone-warn);
+}
+.doctor-row[data-s="fail"] .ic {
+  background: var(--tone-err);
 }
-.doctor-row[data-s="ok"]   .ic { background: var(--tone-ok); }
-.doctor-row[data-s="warn"] .ic { background: var(--tone-warn); }
-.doctor-row[data-s="fail"] .ic { background: var(--tone-err); }
 .doctor-row .ic::after {
   content: attr(data-mark);
 }
-.doctor-row .body .nm { font-size: 14px; }
-.doctor-row .body .sub { font-family: inherit; font-size:14px; color: var(--muted); margin-top: 2px; }
-.doctor-row .v { font-family: inherit; font-size:14px; color: var(--fg-2); }
+.doctor-row .body .nm {
+  font-size: 14px;
+}
+.doctor-row .body .sub {
+  font-family: inherit;
+  font-size: 14px;
+  color: var(--muted);
+  margin-top: 2px;
+}
+.doctor-row .v {
+  font-family: inherit;
+  font-size: 14px;
+  color: var(--fg-2);
+}
 
 /* ============================================================
    USAGE CARD — full
@@ -6003,11 +6596,23 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
 .usage-full .uh {
   padding: 10px 14px;
   border-bottom: 1px solid var(--border);
-  display: flex; gap: 8px; align-items: center;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.usage-full .uh .grow {
+  flex: 1;
+}
+.usage-full .uh .tt {
+  font-size: 14px;
+  font-weight: 600;
+}
+.usage-full .uh .ss {
+  font-family: inherit;
+  font-size: 14px;
+  color: var(--muted);
+  margin-top: 1px;
 }
-.usage-full .uh .grow { flex: 1; }
-.usage-full .uh .tt { font-size: 14px; font-weight: 600; }
-.usage-full .uh .ss { font-family: inherit; font-size: 14px; color: var(--muted); margin-top:1px; }
 .usage-full .ub {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
@@ -6016,7 +6621,9 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
   padding: 12px 14px;
   border-right: 1px solid var(--border);
 }
-.usage-full .ucol:last-child { border-right: none; }
+.usage-full .ucol:last-child {
+  border-right: none;
+}
 .usage-full .ucol .l {
   font-family: inherit;
   font-size: 14px;
@@ -6025,34 +6632,67 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
   color: var(--muted);
 }
 .usage-full .ucol .v {
-  font-size: 17px; font-weight: 600;
+  font-size: 17px;
+  font-weight: 600;
   margin-top: 4px;
   letter-spacing: -0.02em;
 }
-.usage-full .ucol .v.acc { color: var(--accent); }
-.usage-full .ucol .v.ok  { color: var(--tone-ok); }
-.usage-full .ucol .v.vio { color: var(--violet); }
-.usage-full .ucol .pct { font-family: inherit; font-size: 14px; color: var(--muted); margin-top: 2px; }
+.usage-full .ucol .v.acc {
+  color: var(--accent);
+}
+.usage-full .ucol .v.ok {
+  color: var(--tone-ok);
+}
+.usage-full .ucol .v.vio {
+  color: var(--violet);
+}
+.usage-full .ucol .pct {
+  font-family: inherit;
+  font-size: 14px;
+  color: var(--muted);
+  margin-top: 2px;
+}
 .usage-full .stack {
-  display: flex; height: 6px;
+  display: flex;
+  height: 6px;
   border-top: 1px solid var(--border);
 }
-.usage-full .stack span { display: block; height: 100%; }
-.usage-full .stack .s1 { background: var(--accent); }
-.usage-full .stack .s2 { background: var(--violet); }
-.usage-full .stack .s3 { background: var(--tone-ok); }
-.usage-full .stack .s4 { background: var(--border-strong); }
+.usage-full .stack span {
+  display: block;
+  height: 100%;
+}
+.usage-full .stack .s1 {
+  background: var(--accent);
+}
+.usage-full .stack .s2 {
+  background: var(--violet);
+}
+.usage-full .stack .s3 {
+  background: var(--tone-ok);
+}
+.usage-full .stack .s4 {
+  background: var(--border-strong);
+}
 .usage-full .uf {
-  display: flex; gap: 6px; flex-wrap: wrap;
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
   padding: 8px 14px;
   border-top: 1px solid var(--border);
   background: var(--bg-2);
-  font-family: inherit; font-size: 14px;
+  font-family: inherit;
+  font-size: 14px;
   color: var(--muted);
 }
-.usage-full .uf .x { display:inline-flex; align-items:center; gap:4px; }
+.usage-full .uf .x {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
 .usage-full .uf .x .sw {
-  width: 8px; height: 8px; border-radius: 2px;
+  width: 8px;
+  height: 8px;
+  border-radius: 2px;
 }
 
 /* ============================================================
@@ -6065,7 +6705,9 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
   overflow: hidden;
 }
 .mem-groups .gh {
-  display: flex; align-items: center; gap: 8px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
   padding: 9px 12px;
   border-bottom: 1px solid var(--border);
   font-family: inherit;
@@ -6075,13 +6717,26 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
   color: var(--muted);
   background: var(--bg-2);
 }
-.mem-groups .gh.first {}
-.mem-groups .gh .sw { width: 6px; height: 6px; border-radius: 50%; }
-.mem-groups .gh[data-g="user"] .sw { background: var(--violet); }
-.mem-groups .gh[data-g="feedback"] .sw { background: var(--tone-warn); }
-.mem-groups .gh[data-g="project"] .sw { background: var(--accent); }
-.mem-groups .gh[data-g="reference"] .sw { background: var(--tone-info); }
-.mem-groups .gh .grow { flex: 1; }
+.mem-groups .gh .sw {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+}
+.mem-groups .gh[data-g="user"] .sw {
+  background: var(--violet);
+}
+.mem-groups .gh[data-g="feedback"] .sw {
+  background: var(--tone-warn);
+}
+.mem-groups .gh[data-g="project"] .sw {
+  background: var(--accent);
+}
+.mem-groups .gh[data-g="reference"] .sw {
+  background: var(--tone-info);
+}
+.mem-groups .gh .grow {
+  flex: 1;
+}
 .mem-groups .gh .cnt {
   background: var(--card);
   border: 1px solid var(--border);
@@ -6099,10 +6754,20 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
   color: var(--fg-2);
   align-items: start;
 }
-.mem-groups .mrow:last-child { border-bottom: none; }
-.mem-groups .mrow .b { color: var(--muted-2); }
-.mem-groups .mrow .t { line-height: 1.55; }
-.mem-groups .mrow .meta { font-family: inherit; font-size: 14px; color: var(--muted); }
+.mem-groups .mrow:last-child {
+  border-bottom: none;
+}
+.mem-groups .mrow .b {
+  color: var(--muted-2);
+}
+.mem-groups .mrow .t {
+  line-height: 1.55;
+}
+.mem-groups .mrow .meta {
+  font-family: inherit;
+  font-size: 14px;
+  color: var(--muted);
+}
 
 /* ============================================================
    SUBAGENT NESTED
@@ -6114,18 +6779,34 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
   overflow: hidden;
 }
 .subagent-nested .sh {
-  display: flex; align-items: center; gap: 8px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
   padding: 10px 12px;
   border-bottom: 1px solid var(--border);
 }
 .subagent-nested .sh .ico {
-  width: 22px; height: 22px; border-radius: 5px;
-  background: var(--violet-soft); color: var(--violet);
-  display: inline-flex; align-items: center; justify-content: center;
+  width: 22px;
+  height: 22px;
+  border-radius: 5px;
+  background: var(--violet-soft);
+  color: var(--violet);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.subagent-nested .sh .nm {
+  font-size: 14px;
+  font-weight: 600;
+}
+.subagent-nested .sh .ss {
+  font-family: inherit;
+  font-size: 14px;
+  color: var(--muted);
+}
+.subagent-nested .sh .grow {
+  flex: 1;
 }
-.subagent-nested .sh .nm { font-size: 14px; font-weight: 600; }
-.subagent-nested .sh .ss { font-family: inherit; font-size: 14px; color: var(--muted); }
-.subagent-nested .sh .grow { flex: 1; }
 .subagent-nested .nest {
   border-left: 2px solid var(--violet);
   margin-left: 22px;
@@ -6147,20 +6828,61 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
   color: var(--muted);
   margin-bottom: 4px;
 }
-.subagent-nested .nest .lab .dot {
-  display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 5px; vertical-align: middle;
-}
-.subagent-nested .nest .lab.reason .dot { background: var(--violet); }
-.subagent-nested .nest .lab.tool   .dot { background: var(--accent); }
-.subagent-nested .nest .lab.stream .dot { background: var(--tone-info); }
-.subagent-nested .nest .lab.diff   .dot { background: var(--tone-ok); }
-.subagent-nested .nest .lab.err    .dot { background: var(--tone-err); }
-.subagent-nested .nest .txt { color: var(--fg-2); line-height: 1.55; }
-.subagent-nested .nest .txt code { background: var(--panel); padding:1px 5px; border-radius:3px; font-size:14px; }
-.subagent-nested .nest .mono { font-family: "Geist Mono", monospace; font-size: 14px; color: var(--fg-2); white-space: pre; }
-.subagent-nested .nest .diffbox { font-family: "Geist Mono", monospace; font-size: 14px; }
-.subagent-nested .nest .diffbox .add { color: var(--tone-ok); background: oklch(72% 0.16 152 / 0.08); padding: 0 4px; }
-.subagent-nested .nest .diffbox .del { color: var(--tone-err); background: oklch(68% 0.20 25 / 0.08); padding: 0 4px; text-decoration: line-through; opacity: 0.85; }
+.subagent-nested .nest .lab .dot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  margin-right: 5px;
+  vertical-align: middle;
+}
+.subagent-nested .nest .lab.reason .dot {
+  background: var(--violet);
+}
+.subagent-nested .nest .lab.tool .dot {
+  background: var(--accent);
+}
+.subagent-nested .nest .lab.stream .dot {
+  background: var(--tone-info);
+}
+.subagent-nested .nest .lab.diff .dot {
+  background: var(--tone-ok);
+}
+.subagent-nested .nest .lab.err .dot {
+  background: var(--tone-err);
+}
+.subagent-nested .nest .txt {
+  color: var(--fg-2);
+  line-height: 1.55;
+}
+.subagent-nested .nest .txt code {
+  background: var(--panel);
+  padding: 1px 5px;
+  border-radius: 3px;
+  font-size: 14px;
+}
+.subagent-nested .nest .mono {
+  font-family: "Geist Mono", monospace;
+  font-size: 14px;
+  color: var(--fg-2);
+  white-space: pre;
+}
+.subagent-nested .nest .diffbox {
+  font-family: "Geist Mono", monospace;
+  font-size: 14px;
+}
+.subagent-nested .nest .diffbox .add {
+  color: var(--tone-ok);
+  background: oklch(72% 0.16 152 / 0.08);
+  padding: 0 4px;
+}
+.subagent-nested .nest .diffbox .del {
+  color: var(--tone-err);
+  background: oklch(68% 0.2 25 / 0.08);
+  padding: 0 4px;
+  text-decoration: line-through;
+  opacity: 0.85;
+}
 
 /* ============================================================
    CODE SEARCH
@@ -6174,17 +6896,29 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
 .code-search .ch {
   padding: 9px 12px;
   border-bottom: 1px solid var(--border);
-  display: flex; align-items: center; gap: 8px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 .code-search .ch .pat {
   font-family: inherit;
   font-size: 14px;
   color: var(--accent);
 }
-.code-search .ch .grow { flex: 1; }
-.code-search .ch .stat { font-family: inherit; font-size: 14px; color: var(--muted); }
-.code-search .file-block { border-bottom: 1px solid var(--border); }
-.code-search .file-block:last-child { border-bottom: none; }
+.code-search .ch .grow {
+  flex: 1;
+}
+.code-search .ch .stat {
+  font-family: inherit;
+  font-size: 14px;
+  color: var(--muted);
+}
+.code-search .file-block {
+  border-bottom: 1px solid var(--border);
+}
+.code-search .file-block:last-child {
+  border-bottom: none;
+}
 .code-search .fh {
   padding: 6px 12px;
   background: var(--bg-2);
@@ -6194,7 +6928,10 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
   display: flex;
   gap: 8px;
 }
-.code-search .fh .n { color: var(--muted); margin-left: auto; }
+.code-search .fh .n {
+  color: var(--muted);
+  margin-left: auto;
+}
 .code-search .hit {
   display: grid;
   grid-template-columns: 44px 1fr;
@@ -6204,9 +6941,19 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
   padding: 3px 12px;
   align-items: center;
 }
-.code-search .hit:hover { background: var(--bg-2); }
-.code-search .hit .ln { color: var(--muted-2); text-align: right; }
-.code-search .hit .ct { color: var(--fg-2); white-space: pre; overflow: hidden; text-overflow: ellipsis; }
+.code-search .hit:hover {
+  background: var(--bg-2);
+}
+.code-search .hit .ln {
+  color: var(--muted-2);
+  text-align: right;
+}
+.code-search .hit .ct {
+  color: var(--fg-2);
+  white-space: pre;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 .code-search .hit .ct mark {
   background: oklch(78% 0.16 80 / 0.35);
   color: var(--fg);
@@ -6224,22 +6971,49 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
   padding: 12px 14px 10px;
 }
 .ctx-card .h {
-  display: flex; align-items: baseline; gap: 6px;
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
   margin-bottom: 8px;
 }
-.ctx-card .h .tt { font-size: 14px; font-weight: 600; }
-.ctx-card .h .grow { flex: 1; }
-.ctx-card .h .v { font-family: inherit; font-size: 14px; color: var(--fg); }
-.ctx-card .h .v .mut { color: var(--muted); }
+.ctx-card .h .tt {
+  font-size: 14px;
+  font-weight: 600;
+}
+.ctx-card .h .grow {
+  flex: 1;
+}
+.ctx-card .h .v {
+  font-family: inherit;
+  font-size: 14px;
+  color: var(--fg);
+}
+.ctx-card .h .v .mut {
+  color: var(--muted);
+}
 .ctx-card .bar {
-  display: flex; height: 8px; border-radius: 999px; overflow: hidden;
+  display: flex;
+  height: 8px;
+  border-radius: 999px;
+  overflow: hidden;
   background: var(--panel);
 }
-.ctx-card .bar span { display: block; height: 100%; }
-.ctx-card .bar .system { background: var(--accent); }
-.ctx-card .bar .tools  { background: var(--violet); }
-.ctx-card .bar .log    { background: var(--tone-ok); }
-.ctx-card .bar .input  { background: var(--tone-warn); }
+.ctx-card .bar span {
+  display: block;
+  height: 100%;
+}
+.ctx-card .bar .system {
+  background: var(--accent);
+}
+.ctx-card .bar .tools {
+  background: var(--violet);
+}
+.ctx-card .bar .log {
+  background: var(--tone-ok);
+}
+.ctx-card .bar .input {
+  background: var(--tone-warn);
+}
 .ctx-card .legend {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
@@ -6248,10 +7022,23 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
   font-family: inherit;
   font-size: 14px;
 }
-.ctx-card .legend > div { display: flex; gap: 5px; align-items: center; }
-.ctx-card .legend .sw { width: 8px; height: 8px; border-radius: 2px; }
-.ctx-card .legend .l { color: var(--muted); }
-.ctx-card .legend .v { color: var(--fg); margin-left: auto; }
+.ctx-card .legend > div {
+  display: flex;
+  gap: 5px;
+  align-items: center;
+}
+.ctx-card .legend .sw {
+  width: 8px;
+  height: 8px;
+  border-radius: 2px;
+}
+.ctx-card .legend .l {
+  color: var(--muted);
+}
+.ctx-card .legend .v {
+  color: var(--fg);
+  margin-left: auto;
+}
 .ctx-card .ttop {
   margin-top: 12px;
   padding-top: 9px;
@@ -6274,10 +7061,24 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
   font-size: 14px;
   align-items: center;
 }
-.ctx-card .ttop .row .n { color: var(--fg-2); }
-.ctx-card .ttop .row .bbar { background: var(--panel); border-radius:2px; height: 4px; overflow:hidden; }
-.ctx-card .ttop .row .bbar span { display:block; height:100%; background: var(--violet); }
-.ctx-card .ttop .row .v { color: var(--muted); text-align: right; }
+.ctx-card .ttop .row .n {
+  color: var(--fg-2);
+}
+.ctx-card .ttop .row .bbar {
+  background: var(--panel);
+  border-radius: 2px;
+  height: 4px;
+  overflow: hidden;
+}
+.ctx-card .ttop .row .bbar span {
+  display: block;
+  height: 100%;
+  background: var(--violet);
+}
+.ctx-card .ttop .row .v {
+  color: var(--muted);
+  text-align: right;
+}
 
 /* ============================================================
    FALLBACK
@@ -6297,10 +7098,21 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
   font-size: 14px;
   color: var(--muted);
 }
-.fallback-card .hd { color: var(--fg-2); margin-bottom: 4px; }
-.fallback-card .kv { display: grid; grid-template-columns: 70px 1fr; gap: 4px 12px; }
-.fallback-card .kv .k { color: var(--muted-2); }
-.fallback-card .kv .v { color: var(--fg-2); }
+.fallback-card .hd {
+  color: var(--fg-2);
+  margin-bottom: 4px;
+}
+.fallback-card .kv {
+  display: grid;
+  grid-template-columns: 70px 1fr;
+  gap: 4px 12px;
+}
+.fallback-card .kv .k {
+  color: var(--muted-2);
+}
+.fallback-card .kv .v {
+  color: var(--fg-2);
+}
 
 /* ============================================================
    LIVE CARD VARIANTS
@@ -6319,37 +7131,86 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
   max-width: 100%;
 }
 .live-card .lc-ico {
-  width: 16px; height: 16px;
-  display: inline-flex; align-items: center; justify-content: center;
+  width: 16px;
+  height: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--lc-color);
+}
+.live-card .lc-body {
+  color: var(--fg-2);
+  font-size: 14px;
+}
+.live-card .lc-body .b {
   color: var(--lc-color);
+  font-weight: 600;
+}
+.live-card .lc-act {
+  color: var(--lc-color);
+  padding: 0 6px;
+}
+.live-card .lc-act:hover {
+  background: var(--lc-soft);
+  border-radius: 4px;
+}
+
+.live-card[data-v="thinking"] {
+  --lc-color: var(--violet);
+  --lc-soft: var(--violet-soft);
+}
+.live-card[data-v="undo"] {
+  --lc-color: var(--tone-info);
+  --lc-soft: var(--tone-info-soft);
+}
+.live-card[data-v="ctxPressure"] {
+  --lc-color: var(--tone-warn);
+  --lc-soft: var(--tone-warn-soft);
+}
+.live-card[data-v="aborted"] {
+  --lc-color: var(--st-aborted);
+  --lc-soft: oklch(60% 0.13 25 / 0.1);
+}
+.live-card[data-v="retry"] {
+  --lc-color: var(--tone-warn);
+  --lc-soft: var(--tone-warn-soft);
+}
+.live-card[data-v="checkpoint"] {
+  --lc-color: var(--tone-ok);
+  --lc-soft: var(--tone-ok-soft);
+}
+.live-card[data-v="stepProgress"] {
+  --lc-color: var(--accent);
+  --lc-soft: var(--accent-soft);
+}
+.live-card[data-v="mcpEvent"] {
+  --lc-color: var(--violet);
+  --lc-soft: var(--violet-soft);
+}
+.live-card[data-v="sessionOp"] {
+  --lc-color: var(--tone-ghost);
+  --lc-soft: var(--tone-ghost-soft);
 }
-.live-card .lc-body { color: var(--fg-2); font-size: 14px; }
-.live-card .lc-body .b { color: var(--lc-color); font-weight: 600; }
-.live-card .lc-act { color: var(--lc-color); padding: 0 6px; }
-.live-card .lc-act:hover { background: var(--lc-soft); border-radius: 4px; }
-
-.live-card[data-v="thinking"]    { --lc-color: var(--violet); --lc-soft: var(--violet-soft); }
-.live-card[data-v="undo"]        { --lc-color: var(--tone-info); --lc-soft: var(--tone-info-soft); }
-.live-card[data-v="ctxPressure"] { --lc-color: var(--tone-warn); --lc-soft: var(--tone-warn-soft); }
-.live-card[data-v="aborted"]     { --lc-color: var(--st-aborted); --lc-soft: oklch(60% 0.13 25 / 0.10); }
-.live-card[data-v="retry"]       { --lc-color: var(--tone-warn); --lc-soft: var(--tone-warn-soft); }
-.live-card[data-v="checkpoint"]  { --lc-color: var(--tone-ok); --lc-soft: var(--tone-ok-soft); }
-.live-card[data-v="stepProgress"]{ --lc-color: var(--accent); --lc-soft: var(--accent-soft); }
-.live-card[data-v="mcpEvent"]    { --lc-color: var(--violet); --lc-soft: var(--violet-soft); }
-.live-card[data-v="sessionOp"]   { --lc-color: var(--tone-ghost); --lc-soft: var(--tone-ghost-soft); }
 
 .live-row {
-  display: flex; flex-wrap: wrap; gap: 6px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
 }
 
 .live-card.step .lc-meter {
-  width: 60px; height: 4px;
+  width: 60px;
+  height: 4px;
   background: var(--panel);
   border-radius: 999px;
   overflow: hidden;
   margin-left: 4px;
 }
-.live-card.step .lc-meter > span { display: block; height: 100%; background: var(--accent); }
+.live-card.step .lc-meter > span {
+  display: block;
+  height: 100%;
+  background: var(--accent);
+}
 
 /* tone palette gallery */
 .tone-gallery {
@@ -6370,8 +7231,9 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
   letter-spacing: 0.04em;
   text-transform: uppercase;
 }
-[data-theme="light"] .tone-gallery .sw { color: oklch(100% 0 0); }
-
+[data-theme="light"] .tone-gallery .sw {
+  color: oklch(100% 0 0);
+}
 
 /* horizontal-cramp fixes */
 .main-head h1 {
@@ -6401,7 +7263,9 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
   overflow-x: auto;
   scrollbar-width: none;
 }
-.statusbar::-webkit-scrollbar { display: none; }
+.statusbar::-webkit-scrollbar {
+  display: none;
+}
 /* ============================================================
    Composer narrow-width adaptation
    ============================================================ */
@@ -6454,14 +7318,35 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
 /* Collapse composer-foot when the composer column itself is cramped —
    container query so panel state, not viewport width, drives it. */
 @container composer (max-width: 620px) {
-  .composer-foot .cf-btn .label { display: none; }
+  .composer-foot .cf-btn .label {
+    display: none;
+  }
+}
+@container composer (max-width: 560px) {
+  .composer-foot .composer-secondary-action {
+    display: none;
+  }
+  .composer-tools-more {
+    display: inline-flex;
+  }
 }
 @container composer (max-width: 520px) {
-  .hint-row > span:first-child { display: none; }
-  .composer-foot .model-pill { max-width: 140px; }
+  .hint-row > span:first-child {
+    display: none;
+  }
+  .composer-foot .model-pill {
+    max-width: 140px;
+  }
+}
+@container composer (max-width: 460px) {
+  .composer-model-direct {
+    display: none;
+  }
 }
 @container composer (max-width: 420px) {
-  .composer-foot .model-pill { max-width: 100px; }
+  .composer-foot .model-pill {
+    max-width: 100px;
+  }
 }
 
 /* Main head — same compression behavior */
@@ -6469,7 +7354,9 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
   white-space: nowrap;
 }
 @media (max-width: 1000px) {
-  .main-head .h-btn:not(.primary) span:not(:first-child) { display: none; }
+  .main-head .h-btn:not(.primary) span:not(:first-child) {
+    display: none;
+  }
 }
 
 /* ============================================================
@@ -6487,12 +7374,17 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
 }
 .mode-switch[data-mode="yolo"] {
   border-color: var(--tone-err);
-  box-shadow: 0 0 0 2px oklch(68% 0.20 25 / 0.18);
+  box-shadow: 0 0 0 2px oklch(68% 0.2 25 / 0.18);
   animation: yolo-pulse 1.8s ease-in-out infinite;
 }
 @keyframes yolo-pulse {
-  0%, 100% { box-shadow: 0 0 0 2px oklch(68% 0.20 25 / 0.18); }
-  50%      { box-shadow: 0 0 0 3px oklch(68% 0.20 25 / 0.32); }
+  0%,
+  100% {
+    box-shadow: 0 0 0 2px oklch(68% 0.2 25 / 0.18);
+  }
+  50% {
+    box-shadow: 0 0 0 3px oklch(68% 0.2 25 / 0.32);
+  }
 }
 .ms-seg {
   display: inline-flex;
@@ -6504,25 +7396,33 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
   color: var(--muted);
   transition: background 0.12s ease, color 0.12s ease;
 }
-.ms-seg:hover { color: var(--fg); }
+.ms-seg:hover {
+  color: var(--fg);
+}
 .ms-seg[data-on="true"][data-k="review"] {
-  background: var(--tone-info-soft); color: var(--tone-info);
+  background: var(--tone-info-soft);
+  color: var(--tone-info);
 }
 .ms-seg[data-on="true"][data-k="plan"] {
-  background: var(--tone-warn-soft); color: var(--tone-warn);
+  background: var(--tone-warn-soft);
+  color: var(--tone-warn);
 }
 .ms-seg[data-on="true"][data-k="auto"] {
-  background: var(--accent-soft); color: var(--accent);
+  background: var(--accent-soft);
+  color: var(--accent);
 }
 .ms-seg[data-on="true"][data-k="yolo"] {
-  background: var(--tone-err); color: oklch(99% 0 0);
+  background: var(--tone-err);
+  color: oklch(99% 0 0);
+}
+[data-theme="light"] .ms-seg[data-on="true"][data-k="yolo"] {
+  color: oklch(100% 0 0);
 }
-[data-theme="light"] .ms-seg[data-on="true"][data-k="yolo"] { color: oklch(100% 0 0); }
 
 /* YOLO toast variant */
 .toast-yolo {
   border-color: var(--tone-err);
-  box-shadow: 0 0 0 1px oklch(68% 0.20 25 / 0.18), var(--shadow-lg);
+  box-shadow: 0 0 0 1px oklch(68% 0.2 25 / 0.18), var(--shadow-lg);
   display: flex;
   align-items: center;
   gap: 8px;
@@ -6544,8 +7444,12 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
 
 /* Hide mode labels when narrow; keep icons */
 @media (max-width: 1100px) {
-  .mode-switch .ms-seg > span { display: none; }
-  .mode-switch .ms-seg { padding: 4px 7px; }
+  .mode-switch .ms-seg > span {
+    display: none;
+  }
+  .mode-switch .ms-seg {
+    padding: 4px 7px;
+  }
 }
 
 /* ============================================================
@@ -6569,8 +7473,14 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
   white-space: nowrap;
 }
 @keyframes toast-rise {
-  from { opacity: 0; transform: translateY(8px); }
-  to   { opacity: 1; transform: none; }
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
 }
 
 /* ============================================================
@@ -6588,7 +7498,9 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
   padding-top: 12vh;
   animation: fade-in 0.18s ease-out;
 }
-[data-theme="light"] .cmdk-mask { background: oklch(0% 0 0 / 0.2); }
+[data-theme="light"] .cmdk-mask {
+  background: oklch(0% 0 0 / 0.2);
+}
 .cmdk {
   width: min(640px, 92vw);
   max-height: 70vh;
@@ -6630,7 +7542,9 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
   overflow-y: auto;
   padding: 4px 0;
 }
-.cmdk-group { padding: 4px 0; }
+.cmdk-group {
+  padding: 4px 0;
+}
 .cmdk-gh {
   padding: 6px 14px 2px;
   font-family: inherit;
@@ -6644,8 +7558,13 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
   grid-template-columns: 22px 1fr auto auto;
   gap: 10px;
   align-items: center;
+  width: 100%;
   padding: 7px 14px;
+  border: 0;
+  background: transparent;
+  font: inherit;
   font-size: 14px;
+  text-align: left;
   cursor: pointer;
   color: var(--fg-2);
 }
@@ -6653,7 +7572,9 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
   background: var(--accent-soft);
   color: var(--fg);
 }
-.cmdk-row[data-active="true"] .ic { color: var(--accent); }
+.cmdk-row[data-active="true"] .ic {
+  color: var(--accent);
+}
 .cmdk-row .ic {
   color: var(--muted);
   display: inline-flex;
@@ -6680,7 +7601,10 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
   padding: 1px 5px;
   border-radius: 4px;
 }
-.cmdk-row .kb-empty { display: inline-block; width: 1px; }
+.cmdk-row .kb-empty {
+  display: inline-block;
+  width: 1px;
+}
 .cmdk-empty {
   padding: 24px;
   text-align: center;
@@ -6752,16 +7676,38 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
 }
 .wd-row {
   display: grid;
-  grid-template-columns: 20px 1fr auto;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  padding: 0 8px 0 0;
+}
+.wd-row:hover {
+  background: var(--bg-2);
+}
+.wd-row-main {
+  display: grid;
+  grid-template-columns: 20px minmax(0, 1fr);
   gap: 8px;
   align-items: center;
-  padding: 7px 12px;
+  min-width: 0;
+  width: 100%;
+  padding: 7px 0 7px 12px;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
   cursor: pointer;
 }
-.wd-row:hover { background: var(--bg-2); }
-.wd-row .ic { color: var(--muted); display: inline-flex; }
-.wd-row .b { min-width: 0; }
-.wd-row .b .p {
+.wd-row-main .ic {
+  color: var(--muted);
+  display: inline-flex;
+}
+.wd-row-main .b {
+  min-width: 0;
+  display: block;
+}
+.wd-row-main .b .p {
+  display: block;
   font-size: 14px;
   font-family: inherit;
   color: var(--fg);
@@ -6769,7 +7715,8 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.wd-row .b .br {
+.wd-row-main .b .br {
+  display: block;
   font-family: inherit;
   font-size: 14px;
   color: var(--muted);
@@ -6778,7 +7725,9 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
   text-overflow: ellipsis;
   margin-top: 1px;
 }
-.wd-row .pin { color: var(--accent); }
+.wd-row .pin {
+  color: var(--accent);
+}
 .wd-row .wd-del {
   background: transparent;
   border: none;
@@ -6796,7 +7745,7 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
   opacity: 1;
 }
 .wd-row .wd-del:hover {
-  background: var(--bg-3, rgba(255,255,255,0.08));
+  background: var(--bg-3, rgba(255, 255, 255, 0.08));
   color: var(--tone-err, #ff3b30);
 }
 .wd-foot {
@@ -6830,6 +7779,13 @@ html:not([data-platform="macos"]) .cmdk-row .kb .shortcut kbd[data-key="mod"] {
 .main-head .sub .ws-crumb:hover {
   color: var(--accent);
 }
+.main-head .sub .ws-crumb {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: inherit;
+  cursor: pointer;
+}
 
 /* ============================================================
    Splash — opening intro (sub-sea drift, "Reasonix" reveal)
@@ -6923,7 +7879,8 @@ html[data-platform="macos"] .splash {
   animation-delay: 0.32s;
 }
 @keyframes splash-pulse {
-  0%, 100% {
+  0%,
+  100% {
     opacity: 0.25;
     transform: scale(0.8);
   }
@@ -7052,16 +8009,34 @@ html[data-platform="macos"] .splash {
 .jobs-body > .job-row:first-child {
   border-top: none;
 }
+.jr-line {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: stretch;
+}
+.jr-line:hover {
+  background: var(--bg-2);
+}
 .jr-main {
   display: grid;
-  grid-template-columns: 22px auto 1fr 60px auto;
+  grid-template-columns: 22px auto minmax(0, 1fr) 60px;
   gap: 10px;
   align-items: center;
+  width: 100%;
   padding: 10px 14px;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
   cursor: pointer;
 }
 .jr-main:hover {
-  background: var(--bg-2);
+  background: transparent;
+}
+.jr-main:focus-visible {
+  outline: 1px solid var(--accent);
+  outline-offset: -2px;
 }
 .jr-state {
   display: inline-flex;
@@ -7124,6 +8099,7 @@ html[data-platform="macos"] .splash {
   display: inline-flex;
   gap: 4px;
   align-items: center;
+  padding-right: 14px;
 }
 .jr-exit {
   font-family: inherit;
@@ -7279,8 +8255,14 @@ html[data-platform="macos"] .splash {
 }
 
 @keyframes slide-down {
-  from { opacity: 0; transform: translateY(-6px); }
-  to { opacity: 1; transform: translateY(0); }
+  from {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 .msg-approval {
@@ -7288,8 +8270,14 @@ html[data-platform="macos"] .splash {
 }
 
 @keyframes card-in {
-  from { opacity: 0; transform: translateY(4px) scale(0.98); }
-  to { opacity: 1; transform: translateY(0) scale(1); }
+  from {
+    opacity: 0;
+    transform: translateY(4px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
 }
 
 .toast {
@@ -7297,8 +8285,14 @@ html[data-platform="macos"] .splash {
 }
 
 @keyframes toast-fall {
-  from { opacity: 1; transform: translateY(0); }
-  to { opacity: 0; transform: translateY(12px); }
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(12px);
+  }
 }
 
 .statusbar .seg {
diff --git a/desktop/src/ui/about.tsx b/desktop/src/ui/about.tsx
index c475acc53..f1023419a 100644
--- a/desktop/src/ui/about.tsx
+++ b/desktop/src/ui/about.tsx
@@ -49,9 +49,19 @@ export function AboutModal({ onClose }: { onClose: () => void }) {
   }, []);
 
   return (
-    <div className="about-mask" onClick={onClose}>
-      <div className="about-modal" onClick={(e) => e.stopPropagation()}>
-        <button type="button" className="about-close" onClick={onClose} aria-label={t("about.close")}>
+    <div
+      className="about-mask"
+      onMouseDown={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div className="about-modal">
+        <button
+          type="button"
+          className="about-close"
+          onClick={onClose}
+          aria-label={t("about.close")}
+        >
           <I.x size={14} />
         </button>
         <div className="about-brand">
@@ -88,10 +98,7 @@ export function AboutModal({ onClose }: { onClose: () => void }) {
   );
 }
 
-function CheckStatus({
-  check,
-  onOpenReleases,
-}: { check: CheckState; onOpenReleases: () => void }) {
+function CheckStatus({ check, onOpenReleases }: { check: CheckState; onOpenReleases: () => void }) {
   if (check.kind === "idle" || check.kind === "checking") return null;
   if (check.kind === "up-to-date") {
     return (
diff --git a/desktop/src/ui/cards.tsx b/desktop/src/ui/cards.tsx
index 6dbde8d36..db2533ee1 100644
--- a/desktop/src/ui/cards.tsx
+++ b/desktop/src/ui/cards.tsx
@@ -1,11 +1,55 @@
-import { memo, useState, type ReactNode } from "react";
-import { I } from "../icons";
+import { type ReactNode, memo, useState } from "react";
 import { Markdown } from "../Markdown";
 import { t, useLang } from "../i18n";
+import { I } from "../icons";
 import { Shortcut } from "./shortcut";
 
 type Tone = "default" | "success" | "warning" | "danger" | "accent" | "violet";
 
+function hashString(value: string): string {
+  let hash = 0;
+  for (let i = 0; i < value.length; i++) {
+    hash = (hash * 31 + value.charCodeAt(i)) | 0;
+  }
+  return `${value.length}-${(hash >>> 0).toString(36)}`;
+}
+
+function keyed<T>(items: readonly T[], keyFor: (item: T) => string): { item: T; key: string }[] {
+  const seen = new Map<string, number>();
+  return items.map((item) => {
+    const base = keyFor(item);
+    const count = seen.get(base) ?? 0;
+    seen.set(base, count + 1);
+    return { item, key: count === 0 ? base : `${base}-${count}` };
+  });
+}
+
+function renderReasoningInline(text: string): ReactNode[] {
+  const out: ReactNode[] = [];
+  const re = /`([^`]+)`|\*\*([^*]+)\*\*/g;
+  let last = 0;
+  let match: RegExpExecArray | null = re.exec(text);
+  while (match) {
+    if (match.index > last) out.push(text.slice(last, match.index));
+    const code = match[1];
+    const strong = match[2];
+    const raw = match[0];
+    if (code !== undefined) {
+      out.push(
+        <span className="hl" key={`code-${hashString(raw)}-${out.length}`}>
+          {code}
+        </span>,
+      );
+    } else if (strong !== undefined) {
+      out.push(<strong key={`strong-${hashString(raw)}-${out.length}`}>{strong}</strong>);
+    }
+    last = match.index + raw.length;
+    match = re.exec(text);
+  }
+  if (last < text.length) out.push(text.slice(last));
+  return out;
+}
+
 export function Card({
   tone = "default",
   icon,
@@ -70,15 +114,25 @@ export type PlanItem = {
   note?: string;
 };
 
-function derivePlanBadge(items: PlanItem[]): { state: "running" | "done" | "failed" | "waiting" | "blocked"; label: string } {
-  if (items.some((x) => x.status === "failed")) return { state: "failed", label: t("planBadge.failed") };
-  if (items.some((x) => x.status === "blocked")) return { state: "blocked", label: t("planBadge.blocked") };
-  if (items.some((x) => x.status === "active")) return { state: "running", label: t("planBadge.running") };
-  if (items.length > 0 && items.every((x) => x.status === "done")) return { state: "done", label: t("planBadge.done") };
+function derivePlanBadge(items: PlanItem[]): {
+  state: "running" | "done" | "failed" | "waiting" | "blocked";
+  label: string;
+} {
+  if (items.some((x) => x.status === "failed"))
+    return { state: "failed", label: t("planBadge.failed") };
+  if (items.some((x) => x.status === "blocked"))
+    return { state: "blocked", label: t("planBadge.blocked") };
+  if (items.some((x) => x.status === "active"))
+    return { state: "running", label: t("planBadge.running") };
+  if (items.length > 0 && items.every((x) => x.status === "done"))
+    return { state: "done", label: t("planBadge.done") };
   return { state: "waiting", label: t("planBadge.pending") };
 }
 
-function StatusIcon({ state, label }: { state: "running" | "done" | "failed" | "waiting" | "blocked"; label: string }) {
+function StatusIcon({
+  state,
+  label,
+}: { state: "running" | "done" | "failed" | "waiting" | "blocked"; label: string }) {
   switch (state) {
     case "running":
       return <span className="spin-meta" role="img" aria-label={label} title={label} />;
@@ -127,7 +181,9 @@ export function PlanCardView({ items, title }: { items: PlanItem[]; title?: stri
                 </div>
               ) : null}
             </div>
-            <span className="stat">{it.status === "active" ? <span className="spin" /> : null}</span>
+            <span className="stat">
+              {it.status === "active" ? <span className="spin" /> : null}
+            </span>
           </li>
         ))}
       </ul>
@@ -151,6 +207,7 @@ export function ReasoningCard({
   model?: string;
 }) {
   useLang();
+  const paragraphs = keyed(text.split(/\n\n+/), hashString);
   return (
     <Card
       tone="violet"
@@ -178,15 +235,8 @@ export function ReasoningCard({
     >
       <div className="reason">
         <div className="stream">
-          {text.split(/\n\n+/).map((para, i) => (
-            <p
-              key={i}
-              dangerouslySetInnerHTML={{
-                __html: para
-                  .replace(/`([^`]+)`/g, '<span class="hl">$1</span>')
-                  .replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>"),
-              }}
-            />
+          {paragraphs.map(({ item: para, key }) => (
+            <p key={key}>{renderReasoningInline(para)}</p>
           ))}
         </div>
         {model || tokens !== undefined ? (
@@ -231,6 +281,7 @@ export function ShellCard({
 }) {
   useLang();
   const tone: Tone = state === "failed" ? "danger" : state === "done" ? "success" : "warning";
+  const outputLines = output ? keyed(output.split("\n"), hashString) : [];
   return (
     <Card
       tone={tone}
@@ -263,20 +314,20 @@ export function ShellCard({
         </div>
         {output ? (
           <pre className="out">
-            {output.split("\n").map((ln, i) => {
+            {outputLines.map(({ item: ln, key }) => {
               if (ln.startsWith(" ✓") || ln.startsWith("✓"))
                 return (
-                  <div key={i}>
+                  <div key={key}>
                     <span className="ok">{ln}</span>
                   </div>
                 );
               if (ln.startsWith(" ✗") || ln.startsWith("✗") || /error/i.test(ln))
                 return (
-                  <div key={i}>
+                  <div key={key}>
                     <span className="err">{ln}</span>
                   </div>
                 );
-              return <div key={i}>{ln}</div>;
+              return <div key={key}>{ln}</div>;
             })}
           </pre>
         ) : null}
@@ -484,6 +535,7 @@ export function DiffCard({
   useLang();
   const adds = lines.filter((x) => x.t === "add").length;
   const rms = lines.filter((x) => x.t === "rm").length;
+  const keyedLines = keyed(lines, (line) => hashString(JSON.stringify(line)));
   return (
     <Card
       tone={applied ? "success" : "accent"}
@@ -504,10 +556,10 @@ export function DiffCard({
     >
       <div className="diff">
         <div className="lines">
-          {lines.map((ln, i) => {
+          {keyedLines.map(({ item: ln, key }) => {
             if (ln.t === "hunk")
               return (
-                <div key={i} className="ln hunk">
+                <div key={key} className="ln hunk">
                   <span className="code">{ln.s}</span>
                 </div>
               );
@@ -515,7 +567,7 @@ export function DiffCard({
             const l = ln.t === "ctx" ? ln.l : ln.t === "rm" ? ln.l : undefined;
             const r = ln.t === "ctx" ? ln.r : ln.t === "add" ? ln.r : undefined;
             return (
-              <div key={i} className={`ln ${cls}`}>
+              <div key={key} className={`ln ${cls}`}>
                 <span className="num">{l ?? ""}</span>
                 <span className="num">{r ?? ""}</span>
                 <span className="code">
@@ -552,7 +604,11 @@ export function DiffCard({
 
 // ---- Error ----
 
-export function ErrorCard({ message, hint, code }: { message: string; hint?: ReactNode; code?: string }) {
+export function ErrorCard({
+  message,
+  hint,
+  code,
+}: { message: string; hint?: ReactNode; code?: string }) {
   useLang();
   return (
     <Card
@@ -576,6 +632,10 @@ export type SearchHit = { url: string; title: string; snippet: string };
 
 export function WebSearchCard({ query, results }: { query: string; results: SearchHit[] }) {
   useLang();
+  const keyedResults = keyed(
+    results,
+    (r) => `${hashString(r.url)}-${hashString(r.title)}-${hashString(r.snippet)}`,
+  );
   return (
     <Card
       tone="default"
@@ -585,13 +645,15 @@ export function WebSearchCard({ query, results }: { query: string; results: Sear
       meta={
         <>
           <span>"{query}"</span>
-          <span className="pill-tag ok">{results.length} {t("cards.hits")}</span>
+          <span className="pill-tag ok">
+            {results.length} {t("cards.hits")}
+          </span>
         </>
       }
     >
       <div className="search-results">
-        {results.map((r, i) => (
-          <div className="search-result" key={i}>
+        {keyedResults.map(({ item: r, key }) => (
+          <div className="search-result" key={key}>
             <div className="url">
               <span className="favicon" />
               <span>{r.url}</span>
@@ -625,6 +687,10 @@ export function SubagentCard({
 }) {
   useLang();
   const done = children.filter((c) => c.status === "done").length;
+  const keyedChildren = keyed(
+    children,
+    (child) => `${child.avatar}-${child.what}-${child.role}-${child.status}`,
+  );
   return (
     <Card
       tone="violet"
@@ -647,8 +713,8 @@ export function SubagentCard({
       }
     >
       <div className="sub-card">
-        {children.map((c, i) => (
-          <div className="sub-row" key={i}>
+        {keyedChildren.map(({ item: c, key }) => (
+          <div className="sub-row" key={key}>
             <span className="av">{c.avatar}</span>
             <div className="what">
               <div>{c.what}</div>
@@ -674,17 +740,22 @@ export type MemRow = { scope: string; txt: string };
 
 export function MemoryCard({ rows }: { rows: MemRow[] }) {
   useLang();
+  const keyedRows = keyed(rows, (m) => `${m.scope}-${m.txt}`);
   return (
     <Card
       tone="violet"
       icon={<I.bookmark size={12} />}
       kind="memory"
       name={t("cards.memoryName")}
-      meta={<span>+ {rows.length} {t("cards.memoryCountSuffix")}</span>}
+      meta={
+        <span>
+          + {rows.length} {t("cards.memoryCountSuffix")}
+        </span>
+      }
     >
       <div className="mem">
-        {rows.map((m, i) => (
-          <div className="mem-row" key={i}>
+        {keyedRows.map(({ item: m, key }) => (
+          <div className="mem-row" key={key}>
             <span className="scope">{m.scope}</span>
             <span className="txt">{m.txt}</span>
           </div>
diff --git a/desktop/src/ui/composer.tsx b/desktop/src/ui/composer.tsx
index bfa8bb503..e1d06280e 100644
--- a/desktop/src/ui/composer.tsx
+++ b/desktop/src/ui/composer.tsx
@@ -1,3 +1,5 @@
+import { invoke } from "@tauri-apps/api/core";
+import { open as openFileDialog } from "@tauri-apps/plugin-dialog";
 import {
   type ChangeEvent,
   type KeyboardEvent,
@@ -9,14 +11,9 @@ import {
   useState,
 } from "react";
 import type React from "react";
-import { invoke } from "@tauri-apps/api/core";
-import { open as openFileDialog } from "@tauri-apps/plugin-dialog";
-import { t, type TKey } from "../i18n";
+import { type TKey, t } from "../i18n";
 import { I } from "../icons";
-import {
-  DEFAULT_COMPOSER_ROWS,
-  applyComposerTextareaAutosize,
-} from "./composer-sizing";
+import { DEFAULT_COMPOSER_ROWS, applyComposerTextareaAutosize } from "./composer-sizing";
 import { fmtElapsed } from "./live";
 import { Shortcut } from "./shortcut";
 
@@ -29,7 +26,12 @@ const EFFORTS: readonly ReasoningEffort[] = ["low", "medium", "high", "max"];
 
 const MODE_INFO: ModeEntry[] = [
   { k: "plan", label: "editMode.plan", icon: <I.list size={11} />, hint: "editMode.planHint" },
-  { k: "review", label: "editMode.review", icon: <I.shield size={11} />, hint: "editMode.reviewHint" },
+  {
+    k: "review",
+    label: "editMode.review",
+    icon: <I.shield size={11} />,
+    hint: "editMode.reviewHint",
+  },
   { k: "auto", label: "editMode.auto", icon: <I.zap size={11} />, hint: "editMode.autoHint" },
   { k: "yolo", label: "editMode.yolo", icon: <I.warn size={11} />, hint: "editMode.yoloHint" },
 ];
@@ -74,14 +76,9 @@ export type MentionItem = {
   desc?: string;
 };
 
-export type Chip =
-  | { kind: "at"; label: string }
-  | { kind: "slash"; label: string };
+export type Chip = { kind: "at"; label: string } | { kind: "slash"; label: string };
 
-type Popup =
-  | { kind: "slash"; query: string }
-  | { kind: "at"; query: string; nonce: number }
-  | null;
+type Popup = { kind: "slash"; query: string } | { kind: "at"; query: string; nonce: number } | null;
 
 function slashIcon(cmd: string) {
   const m: Record<string, React.ReactNode> = {
@@ -193,8 +190,10 @@ export function Composer({
   const [popup, setPopup] = useState<Popup>(null);
   const [activeIdx, setActiveIdx] = useState(0);
   const [modelMenuOpen, setModelMenuOpen] = useState(false);
+  const [toolsMenuOpen, setToolsMenuOpen] = useState(false);
   const nonceRef = useRef(0);
   const modelWrapRef = useRef<HTMLDivElement>(null);
+  const toolsWrapRef = useRef<HTMLDivElement>(null);
   // macOS Chinese IME fires compositionend BEFORE the confirm keydown.
   const composingRef = useRef(false);
   const compositionEndedAtRef = useRef(0);
@@ -203,6 +202,23 @@ export function Composer({
   const historyRef = useRef<string[]>(initialHistory ? [...initialHistory].reverse() : []);
   const [browseIdx, setBrowseIdx] = useState(-1);
   const savedDraftRef = useRef("");
+  const queuedSendRows = useMemo(() => {
+    const seen = new Map<string, number>();
+    return (queuedSends ?? []).map((text, index) => {
+      const occurrence = seen.get(text) ?? 0;
+      seen.set(text, occurrence + 1);
+      return { key: `${text}-${occurrence}`, text, index };
+    });
+  }, [queuedSends]);
+  const chipRows = useMemo(() => {
+    const seen = new Map<string, number>();
+    return chips.map((chip, index) => {
+      const base = `${chip.kind}-${chip.label}`;
+      const occurrence = seen.get(base) ?? 0;
+      seen.set(base, occurrence + 1);
+      return { key: `${base}-${occurrence}`, chip, index };
+    });
+  }, [chips]);
 
   // `initialHistory` arrives asynchronously (settings load after mount).
   // Sync historyRef when it first becomes available and the user hasn't
@@ -218,9 +234,7 @@ export function Composer({
       workspaceDir && picked.startsWith(workspaceDir)
         ? picked.slice(workspaceDir.length).replace(/^[\\/]+/, "")
         : picked;
-    setDraft((current) =>
-      current ? `${current.replace(/\s+$/, "")} @${rel} ` : `@${rel} `,
-    );
+    setDraft((current) => (current ? `${current.replace(/\s+$/, "")} @${rel} ` : `@${rel} `));
     setChips((c) => [...c, { kind: "at", label: rel }]);
     onMentionPicked?.(rel);
     textareaRef.current?.focus();
@@ -245,10 +259,7 @@ export function Composer({
   useEffect(() => {
     if (!modelMenuOpen) return;
     const onDown = (e: MouseEvent) => {
-      if (
-        modelWrapRef.current &&
-        !modelWrapRef.current.contains(e.target as Node)
-      ) {
+      if (modelWrapRef.current && !modelWrapRef.current.contains(e.target as Node)) {
         setModelMenuOpen(false);
       }
     };
@@ -256,6 +267,17 @@ export function Composer({
     return () => window.removeEventListener("mousedown", onDown);
   }, [modelMenuOpen]);
 
+  useEffect(() => {
+    if (!toolsMenuOpen) return;
+    const onDown = (e: MouseEvent) => {
+      if (toolsWrapRef.current && !toolsWrapRef.current.contains(e.target as Node)) {
+        setToolsMenuOpen(false);
+      }
+    };
+    window.addEventListener("mousedown", onDown);
+    return () => window.removeEventListener("mousedown", onDown);
+  }, [toolsMenuOpen]);
+
   const attachFile = async (filter?: "image") => {
     try {
       const picked = await openFileDialog({
@@ -325,12 +347,14 @@ export function Composer({
     return base;
   }, [popup, mentionResults]);
 
-  const items =
-    popup?.kind === "slash" ? slashItems : popup?.kind === "at" ? atItems : [];
+  const popupKind = popup?.kind;
+  const items = popupKind === "slash" ? slashItems : popupKind === "at" ? atItems : [];
 
   useEffect(() => {
-    setActiveIdx(0);
-  }, [popup?.kind]);
+    if (!popupKind || popupKind === "slash" || popupKind === "at") {
+      setActiveIdx(0);
+    }
+  }, [popupKind]);
 
   useEffect(() => {
     setActiveIdx((i) => (items.length ? Math.min(i, items.length - 1) : 0));
@@ -361,6 +385,19 @@ export function Composer({
 
   const dismiss = () => setPopup(null);
 
+  const openSlashPopup = () => {
+    setToolsMenuOpen(false);
+    setModelMenuOpen(false);
+    setPopup({ kind: "slash", query: "" });
+  };
+
+  const openMentionPopup = () => {
+    setToolsMenuOpen(false);
+    setModelMenuOpen(false);
+    const nonce = ++nonceRef.current;
+    setPopup({ kind: "at", query: "", nonce });
+  };
+
   const pickItem = (idx: number) => {
     const it = items[idx];
     if (!it || !popup) return;
@@ -436,9 +473,7 @@ export function Composer({
       }
       if (e.key === "ArrowUp") {
         e.preventDefault();
-        setActiveIdx((i) =>
-          items.length ? (i - 1 + items.length) % items.length : 0,
-        );
+        setActiveIdx((i) => (items.length ? (i - 1 + items.length) % items.length : 0));
         return;
       }
       if (e.key === "Escape") {
@@ -513,18 +548,23 @@ export function Composer({
   return (
     <div className="composer-wrap">
       <div className="composer-inner">
-        {queuedSends && queuedSends.length > 0 ? (
+        {queuedSendRows.length > 0 ? (
           <div className="composer-queued">
             <span className="composer-queued-label">
-              {t("composer.queueCount", { n: queuedSends.length })}
+              {t("composer.queueCount", { n: queuedSendRows.length })}
             </span>
-            {queuedSends.map((text, i) => (
-              <span key={i} className="composer-queue-chip" title={text}>
-                <span className="text">{text}</span>
+            {queuedSendRows.map((row) => (
+              <span key={row.key} className="composer-queue-chip" title={row.text}>
+                <span className="text">{row.text}</span>
                 {onDequeueSend ? (
-                  <span className="x" onClick={() => onDequeueSend(i)}>
+                  <button
+                    type="button"
+                    className="x"
+                    onClick={() => onDequeueSend(row.index)}
+                    title={t("composer.close")}
+                  >
                     <I.x size={10} />
-                  </span>
+                  </button>
                 ) : null}
               </span>
             ))}
@@ -537,9 +577,7 @@ export function Composer({
               <span className="composer-busy-status">
                 <span className="composer-busy-pip" />
                 <span className="composer-busy-label">{busyLabel}</span>
-                <span className="composer-busy-time">
-                  {fmtElapsed(busyElapsedMs ?? 0)}
-                </span>
+                <span className="composer-busy-time">{fmtElapsed(busyElapsedMs ?? 0)}</span>
               </span>
               <span className="grow" />
               <ModeSwitch mode={editMode} onChange={onEditModeChange} />
@@ -568,24 +606,20 @@ export function Composer({
         </div>
 
         <div className="composer">
-          {chips.length > 0 ? (
+          {chipRows.length > 0 ? (
             <div className="composer-tags">
-              {chips.map((c, i) => (
-                <span key={i} className={`chip ${c.kind}`}>
-                  {c.kind === "slash" ? (
-                    <I.slash size={11} />
-                  ) : (
-                    <I.at size={11} />
-                  )}
-                  <span>{c.label}</span>
-                  <span
+              {chipRows.map((row) => (
+                <span key={row.key} className={`chip ${row.chip.kind}`}>
+                  {row.chip.kind === "slash" ? <I.slash size={11} /> : <I.at size={11} />}
+                  <span>{row.chip.label}</span>
+                  <button
+                    type="button"
                     className="x"
-                    onClick={() =>
-                      setChips((cs) => cs.filter((_, j) => j !== i))
-                    }
+                    onClick={() => setChips((cs) => cs.filter((_, j) => j !== row.index))}
+                    title={t("composer.close")}
                   >
                     <I.x size={10} />
-                  </span>
+                  </button>
                 </span>
               ))}
             </div>
@@ -598,7 +632,9 @@ export function Composer({
             onChange={handleChange}
             onPaste={(e) => void handlePaste(e)}
             onKeyDown={handleKeyDown}
-            onCompositionStart={() => { composingRef.current = true; }}
+            onCompositionStart={() => {
+              composingRef.current = true;
+            }}
             onCompositionEnd={() => {
               composingRef.current = false;
               compositionEndedAtRef.current = Date.now();
@@ -630,8 +666,8 @@ export function Composer({
             </button>
             <button
               type="button"
-              className="cf-btn"
-              onClick={() => setPopup({ kind: "slash", query: "" })}
+              className="cf-btn composer-secondary-action"
+              onClick={openSlashPopup}
             >
               <span className="ico">
                 <I.slash size={14} />
@@ -640,11 +676,8 @@ export function Composer({
             </button>
             <button
               type="button"
-              className="cf-btn"
-              onClick={() => {
-                const nonce = ++nonceRef.current;
-                setPopup({ kind: "at", query: "", nonce });
-              }}
+              className="cf-btn composer-secondary-action"
+              onClick={openMentionPopup}
             >
               <span className="ico">
                 <I.at size={14} />
@@ -654,11 +687,14 @@ export function Composer({
 
             <span className="grow" />
 
-            <div ref={modelWrapRef} style={{ position: "relative" }}>
+            <div ref={modelWrapRef} className="composer-model-direct">
               <button
                 type="button"
                 className="model-pill"
-                onClick={() => setModelMenuOpen((v) => !v)}
+                onClick={() => {
+                  setToolsMenuOpen(false);
+                  setModelMenuOpen((v) => !v);
+                }}
                 title={t("composer.switchModel")}
               >
                 <I.brain size={12} />
@@ -681,6 +717,62 @@ export function Composer({
                 />
               ) : null}
             </div>
+            <div ref={toolsWrapRef} className="composer-tools-more">
+              <button
+                type="button"
+                className="cf-btn composer-more-btn"
+                onClick={() => {
+                  setModelMenuOpen(false);
+                  setToolsMenuOpen((v) => !v);
+                }}
+                title={t("app.titlebar.more")}
+                aria-label={t("app.titlebar.more")}
+              >
+                <span className="ico">
+                  <I.more size={14} />
+                </span>
+              </button>
+              {toolsMenuOpen ? (
+                <div className="popup composer-tools-menu">
+                  <div className="ph">
+                    <span className="tok">...</span>
+                    <span>{t("app.titlebar.more")}</span>
+                  </div>
+                  <div className="popup-list composer-tools-actions">
+                    <button type="button" className="popup-item" onClick={openSlashPopup}>
+                      <span className="ico">
+                        <I.slash size={12} />
+                      </span>
+                      <div className="nm">
+                        <span className="cmd">{t("composer.commandsLabel")}</span>
+                        <span className="desc">{t("composer.slashHeader")}</span>
+                      </div>
+                    </button>
+                    <button type="button" className="popup-item" onClick={openMentionPopup}>
+                      <span className="ico">
+                        <I.at size={12} />
+                      </span>
+                      <div className="nm">
+                        <span className="cmd">{t("composer.mentionLabel")}</span>
+                        <span className="desc">{t("composer.atHeader")}</span>
+                      </div>
+                    </button>
+                  </div>
+                  <ModelEffortContent
+                    modelLabel={modelLabel}
+                    currentEffort={reasoningEffort}
+                    onPickModel={(m) => {
+                      onModelChange(m);
+                      setToolsMenuOpen(false);
+                    }}
+                    onPickEffort={(e) => {
+                      onEffortChange(e);
+                      setToolsMenuOpen(false);
+                    }}
+                  />
+                </div>
+              ) : null}
+            </div>
             {busy ? (
               <button
                 type="button"
@@ -750,7 +842,7 @@ function Popup({
 
   useEffect(() => {
     requestAnimationFrame(() => {
-      const el = listRef.current?.querySelector<HTMLElement>(`[data-active="true"]`);
+      const el = listRef.current?.querySelector<HTMLElement>(`[data-index="${activeIdx}"]`);
       el?.scrollIntoView?.({ block: "nearest", inline: "nearest" });
     });
   }, [activeIdx]);
@@ -759,15 +851,17 @@ function Popup({
     <div className="popup" onMouseDown={(e) => e.preventDefault()}>
       <div className="ph">
         <span className="tok">{kind === "slash" ? "/" : "@"}</span>
-        <span>
-          {kind === "slash"
-            ? t("composer.slashHeader")
-            : t("composer.atHeader")}
-        </span>
+        <span>{kind === "slash" ? t("composer.slashHeader") : t("composer.atHeader")}</span>
         <span className="grow" />
-        <span style={{ cursor: "pointer" }} onClick={onClose}>
+        <button
+          type="button"
+          className="popup-close"
+          onClick={onClose}
+          title={t("composer.close")}
+          aria-label={t("composer.close")}
+        >
           <I.x size={11} />
-        </span>
+        </button>
       </div>
       <div className={kind === "at" ? "popup-list at-popup-list" : "popup-list"} ref={listRef}>
         {items.length === 0 ? (
@@ -783,9 +877,15 @@ function Popup({
           </div>
         ) : null}
         {items.map((it, i) => (
-          <div
-            key={i}
+          <button
+            type="button"
+            key={
+              kind === "slash"
+                ? (it as SlashCmd).cmd
+                : `${(it as MentionItem).kind}-${(it as MentionItem).name}`
+            }
             className="popup-item"
+            data-index={i}
             data-active={i === activeIdx}
             onClick={() => onPick(i)}
             onMouseEnter={() => onHover(i, it)}
@@ -810,10 +910,8 @@ function Popup({
                 </>
               )}
             </div>
-            <span className="kb">
-              {kind === "slash" ? ((it as SlashCmd).kb ?? "") : ""}
-            </span>
-          </div>
+            <span className="kb">{kind === "slash" ? ((it as SlashCmd).kb ?? "") : ""}</span>
+          </button>
         ))}
       </div>
       <div className="popup-foot">
@@ -844,7 +942,6 @@ function ModelEffortMenu({
   onPickModel: (model: string) => void;
   onPickEffort: (effort: ReasoningEffort) => void;
 }) {
-  const [draft, setDraft] = useState(modelLabel);
   return (
     <div
       className="popup"
@@ -856,13 +953,38 @@ function ModelEffortMenu({
         position: "absolute",
       }}
     >
+      <ModelEffortContent
+        modelLabel={modelLabel}
+        currentEffort={currentEffort}
+        onPickModel={onPickModel}
+        onPickEffort={onPickEffort}
+      />
+    </div>
+  );
+}
+
+function ModelEffortContent({
+  modelLabel,
+  currentEffort,
+  onPickModel,
+  onPickEffort,
+}: {
+  modelLabel: string;
+  currentEffort: ReasoningEffort;
+  onPickModel: (model: string) => void;
+  onPickEffort: (effort: ReasoningEffort) => void;
+}) {
+  const [draft, setDraft] = useState(modelLabel);
+  return (
+    <>
       <div className="ph">
         <span className="tok">M</span>
         <span>{t("composer.switchModel")}</span>
       </div>
       <div className="popup-list">
         {KNOWN_MODELS.map((m) => (
-          <div
+          <button
+            type="button"
             key={m}
             className="popup-item"
             data-active={m === modelLabel}
@@ -874,7 +996,7 @@ function ModelEffortMenu({
             <div className="nm">
               <span className="cmd">{m}</span>
             </div>
-          </div>
+          </button>
         ))}
         <div style={{ padding: "6px 8px", display: "flex", gap: 6 }}>
           <input
@@ -900,7 +1022,8 @@ function ModelEffortMenu({
       </div>
       <div className="popup-list">
         {EFFORTS.map((e) => (
-          <div
+          <button
+            type="button"
             key={e}
             className="popup-item"
             data-active={e === currentEffort}
@@ -913,9 +1036,9 @@ function ModelEffortMenu({
               <span className="cmd">{e}</span>
               <div className="desc">{t(`effort.${e}Desc` as TKey)}</div>
             </div>
-          </div>
+          </button>
         ))}
       </div>
-    </div>
+    </>
   );
 }
diff --git a/desktop/src/ui/context-panel.tsx b/desktop/src/ui/context-panel.tsx
index 876d77169..f81b95d1c 100644
--- a/desktop/src/ui/context-panel.tsx
+++ b/desktop/src/ui/context-panel.tsx
@@ -44,21 +44,26 @@ export function ContextPanel({
   const usedPct = Math.min(100, (used / CONTEXT_MAX_TOKENS) * 100);
   const cachedPct = Math.min(100, (cached / CONTEXT_MAX_TOKENS) * 100);
   const free = Math.max(0, CONTEXT_MAX_TOKENS - reserved - used - cached);
+  const tabs: { id: Tab; label: string }[] = [
+    { id: "files", label: t("contextPanel.filesTab") },
+    { id: "tools", label: t("contextPanel.toolsTab") },
+    { id: "memory", label: t("contextPanel.memoryTab") },
+    { id: "rules", label: t("contextPanel.rulesTab") },
+  ];
   return (
     <aside className="ctx">
       <div className="ctx-tabs">
-        <div className="ctx-tab" data-active={tab === "files"} onClick={() => setTab("files")}>
-          {t("contextPanel.filesTab")}
-        </div>
-        <div className="ctx-tab" data-active={tab === "tools"} onClick={() => setTab("tools")}>
-          {t("contextPanel.toolsTab")}
-        </div>
-        <div className="ctx-tab" data-active={tab === "memory"} onClick={() => setTab("memory")}>
-          {t("contextPanel.memoryTab")}
-        </div>
-        <div className="ctx-tab" data-active={tab === "rules"} onClick={() => setTab("rules")}>
-          {t("contextPanel.rulesTab")}
-        </div>
+        {tabs.map((item) => (
+          <button
+            type="button"
+            className="ctx-tab"
+            data-active={tab === item.id}
+            key={item.id}
+            onClick={() => setTab(item.id)}
+          >
+            {item.label}
+          </button>
+        ))}
       </div>
 
       <div className="ctx-body">
@@ -66,8 +71,7 @@ export function ContextPanel({
           <div className="h">
             <span>{t("contextPanel.contextTokens")}</span>
             <span className="right">
-              {(reserved + used + cached).toLocaleString()} /{" "}
-              {CONTEXT_MAX_TOKENS.toLocaleString()}
+              {(reserved + used + cached).toLocaleString()} / {CONTEXT_MAX_TOKENS.toLocaleString()}
             </span>
           </div>
           <div className="meter">
@@ -210,7 +214,11 @@ function CtxFiles({ files, settings }: { files: SessionFile[]; settings: Setting
                 <span
                   className="dot"
                   data-s={n.status}
-                  title={n.status === "m" ? t("contextPanel.fileModified") : t("contextPanel.fileInContext")}
+                  title={
+                    n.status === "m"
+                      ? t("contextPanel.fileModified")
+                      : t("contextPanel.fileInContext")
+                  }
                 />
                 <button
                   type="button"
@@ -307,7 +315,10 @@ function CtxMemory({
   onRead: (path: string) => void;
 }) {
   return (
-    <div className="ctx-block" style={{ display: "flex", flexDirection: "column", flex: 1, minHeight: 0 }}>
+    <div
+      className="ctx-block"
+      style={{ display: "flex", flexDirection: "column", flex: 1, minHeight: 0 }}
+    >
       <div className="h">
         <span>{t("contextPanel.memoryTitle")}</span>
         <span className="right">
@@ -317,7 +328,10 @@ function CtxMemory({
       {entries.length === 0 ? (
         <div className="ctx-empty">{t("contextPanel.noMemoriesMsg")}</div>
       ) : (
-        <div className="mem" style={{ display: "flex", flexDirection: "column", flex: 1, minHeight: 0 }}>
+        <div
+          className="mem"
+          style={{ display: "flex", flexDirection: "column", flex: 1, minHeight: 0 }}
+        >
           <div style={{ flexShrink: 0 }}>
             {entries.map((m) => (
               <button
@@ -328,7 +342,9 @@ function CtxMemory({
                 onClick={() => onRead(m.path)}
               >
                 <span className="scope" data-s={m.scope}>
-                  {m.scope === "project" ? t("contextPanel.scopeProject") : t("contextPanel.scopeGlobal")}
+                  {m.scope === "project"
+                    ? t("contextPanel.scopeProject")
+                    : t("contextPanel.scopeGlobal")}
                 </span>
                 <span className="txt">{m.description || m.name}</span>
               </button>
@@ -352,13 +368,23 @@ function CtxRules({ settings }: { settings: Settings | null }) {
       ? [{ p: "*", allow: true, desc: t("contextPanel.ruleYolo") }]
       : editMode === "auto"
         ? [
-            { p: "read_file, list_directory, search_files, *", allow: true, desc: t("contextPanel.ruleReadOnly") },
-            { p: "run_command (allowlist)", allow: true, desc: t("contextPanel.ruleShellAllowlist") },
-            { p: "edit_file, write_file, run_command (other)", allow: false, desc: t("contextPanel.ruleWritesAsk") },
+            {
+              p: "read_file, list_directory, search_files, *",
+              allow: true,
+              desc: t("contextPanel.ruleReadOnly"),
+            },
+            {
+              p: "run_command (allowlist)",
+              allow: true,
+              desc: t("contextPanel.ruleShellAllowlist"),
+            },
+            {
+              p: "edit_file, write_file, run_command (other)",
+              allow: false,
+              desc: t("contextPanel.ruleWritesAsk"),
+            },
           ]
-        : [
-            { p: "*", allow: false, desc: t("contextPanel.ruleReview") },
-          ];
+        : [{ p: "*", allow: false, desc: t("contextPanel.ruleReview") }];
   return (
     <div className="ctx-block">
       <div className="h">
diff --git a/desktop/src/ui/extra-cards.tsx b/desktop/src/ui/extra-cards.tsx
index 92b800521..180171ec3 100644
--- a/desktop/src/ui/extra-cards.tsx
+++ b/desktop/src/ui/extra-cards.tsx
@@ -1,9 +1,35 @@
 import type { ReactNode } from "react";
-import { I } from "../icons";
 import { t, useLang } from "../i18n";
+import { I } from "../icons";
 
 export type ApprovalTone = "ok" | "warn" | "danger" | "info" | "brand" | "ghost";
 
+function hashString(value: string): string {
+  let hash = 0;
+  for (let i = 0; i < value.length; i++) {
+    hash = (hash * 31 + value.charCodeAt(i)) | 0;
+  }
+  return `${value.length}-${(hash >>> 0).toString(36)}`;
+}
+
+function keyed<T>(items: readonly T[], keyFor: (item: T) => string): { item: T; key: string }[] {
+  const seen = new Map<string, number>();
+  return items.map((item) => {
+    const base = keyFor(item);
+    const count = seen.get(base) ?? 0;
+    seen.set(base, count + 1);
+    return { item, key: count === 0 ? base : `${base}-${count}` };
+  });
+}
+
+function reactNodeKey(node: ReactNode): string {
+  if (typeof node === "string" || typeof node === "number") return hashString(String(node));
+  if (node && typeof node === "object" && "key" in node && node.key != null) {
+    return String(node.key);
+  }
+  return hashString(String(node));
+}
+
 export function ApprovalCard({
   kind,
   tone = "info",
@@ -167,11 +193,11 @@ export function TipCard({
         <span className="grow" />
         {command ? <span className="pill">{command}</span> : null}
       </div>
-      {sections.map((sec, i) => (
-        <div className="sec" key={i}>
+      {keyed(sections, (sec) => sec.title).map(({ item: sec, key }) => (
+        <div className="sec" key={key}>
           <div className="stt">{sec.title}</div>
-          {sec.rows.map((r, j) => (
-            <div className="row" key={j}>
+          {keyed(sec.rows, reactNodeKey).map(({ item: r, key: rowKey }) => (
+            <div className="row" key={rowKey}>
               {r}
             </div>
           ))}
@@ -184,7 +210,10 @@ export function TipCard({
 
 export type DoctorRow = { s: "ok" | "warn" | "fail"; nm: string; sub: string; v: string };
 
-export function DoctorCard({ rows, headerSubtitle }: { rows: DoctorRow[]; headerSubtitle?: string }) {
+export function DoctorCard({
+  rows,
+  headerSubtitle,
+}: { rows: DoctorRow[]; headerSubtitle?: string }) {
   useLang();
   const c = { ok: 0, warn: 0, fail: 0 };
   for (const r of rows) c[r.s]++;
@@ -222,8 +251,8 @@ export function DoctorCard({ rows, headerSubtitle }: { rows: DoctorRow[]; header
           </span>
         </div>
       </div>
-      {rows.map((r, i) => (
-        <div className="doctor-row" key={i} data-s={r.s}>
+      {keyed(rows, (r) => `${r.s}-${r.nm}-${r.sub}-${r.v}`).map(({ item: r, key }) => (
+        <div className="doctor-row" key={key} data-s={r.s}>
           <span className="ic" data-mark={r.s === "ok" ? "✓" : r.s === "warn" ? "!" : "✕"} />
           <div className="body">
             <div className="nm">{r.nm}</div>
@@ -330,7 +359,12 @@ export function UsageFull({
 
 // ---- Context window breakdown ----
 
-export type CtxPart = { k: "system" | "tools" | "log" | "input"; label: string; value: string; widthPct: number };
+export type CtxPart = {
+  k: "system" | "tools" | "log" | "input";
+  label: string;
+  value: string;
+  widthPct: number;
+};
 export type CtxTopRow = { name: string; widthPct: number; value: string };
 
 export function CtxCard({
@@ -377,15 +411,17 @@ export function CtxCard({
       {topTools.length > 0 ? (
         <div className="ttop">
           <div className="stt">{t("extraCards.topToolsUsage")}</div>
-          {topTools.map((t, i) => (
-            <div className="row" key={i}>
-              <span className="n">{t.name}</span>
-              <div className="bbar">
-                <span style={{ width: `${t.widthPct}%` }} />
+          {keyed(topTools, (tool) => `${tool.name}-${tool.value}-${tool.widthPct}`).map(
+            ({ item: t, key }) => (
+              <div className="row" key={key}>
+                <span className="n">{t.name}</span>
+                <div className="bbar">
+                  <span style={{ width: `${t.widthPct}%` }} />
+                </div>
+                <span className="v">{t.value}</span>
               </div>
-              <span className="v">{t.value}</span>
-            </div>
-          ))}
+            ),
+          )}
         </div>
       ) : null}
     </div>
@@ -421,8 +457,8 @@ export function MemoryGroups({ data }: { data: MemGroups }) {
               <span className="grow" />
               <span className="cnt">{rows.length}</span>
             </div>
-            {rows.map((r, i) => (
-              <div className="mrow" key={i}>
+            {keyed(rows, (r) => `${r.text}-${r.meta ?? ""}`).map(({ item: r, key }) => (
+              <div className="mrow" key={key}>
                 <span className="b">·</span>
                 <div className="t">{r.text}</div>
                 {r.meta ? <span className="meta">{r.meta}</span> : null}
@@ -437,7 +473,10 @@ export function MemoryGroups({ data }: { data: MemGroups }) {
 
 // ---- Fallback ----
 
-export function FallbackCard({ kindLabel, payload }: { kindLabel: string; payload: Record<string, string> }) {
+export function FallbackCard({
+  kindLabel,
+  payload,
+}: { kindLabel: string; payload: Record<string, string> }) {
   useLang();
   return (
     <div className="fallback-card">
diff --git a/desktop/src/ui/jobs-pop.tsx b/desktop/src/ui/jobs-pop.tsx
index 4dcf7390a..d6149f9a9 100644
--- a/desktop/src/ui/jobs-pop.tsx
+++ b/desktop/src/ui/jobs-pop.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
-import { I } from "../icons";
 import { t, useLang } from "../i18n";
+import { I } from "../icons";
 import type { JobInfo } from "../protocol";
 import { Shortcut } from "./shortcut";
 
@@ -42,8 +42,13 @@ export function JobsPop({
   if (!open) return null;
 
   return (
-    <div className="jobs-mask" onClick={onClose}>
-      <div className="jobs-pop" onClick={(e) => e.stopPropagation()}>
+    <div
+      className="jobs-mask"
+      onMouseDown={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div className="jobs-pop">
         <div className="jobs-head">
           <span className="ico">
             <I.cpu size={13} />
@@ -97,8 +102,8 @@ export function JobsPop({
             </span>
             <span className="grow" />
             <span>
-              <Shortcut keys={["mod", "J"]} /> {t("jobs.kbToggle")} ·{" "}
-              <Shortcut keys={["esc"]} /> {t("jobs.kbClose")}
+              <Shortcut keys={["mod", "J"]} /> {t("jobs.kbToggle")} · <Shortcut keys={["esc"]} />{" "}
+              {t("jobs.kbClose")}
             </span>
           </div>
         </div>
@@ -130,33 +135,36 @@ function JobRow({
   const liveMs = job.running ? Date.now() - job.startedAt : elapsedMs;
   // tick is referenced so the row re-renders for the running clock
   void tick;
+  const toggleExpanded = () => setExp((v) => !v);
   return (
     <div className="job-row" data-status={job.running ? "running" : "exited"}>
-      <div className="jr-main" onClick={() => setExp((v) => !v)}>
-        <span className="jr-state">
-          {job.running ? (
-            <span className="spin" />
-          ) : (
-            <I.history size={11} style={{ color: "var(--muted-2)" }} />
-          )}
-        </span>
-        <span className="jr-kind">
-          <I.terminal size={11} />
-          <span>shell</span>
-        </span>
-        <div className="jr-body">
-          <div className="nm" title={job.command}>
-            {job.command}
-          </div>
-          <div className="sub">
-            <span className="ses">{job.sessionLabel}</span>
-            {job.spawnError ? <span className="rk">· {job.spawnError}</span> : null}
-            {!job.running && job.exitCode !== null && job.exitCode !== 0 ? (
-              <span className="rk">· exit {job.exitCode}</span>
-            ) : null}
-          </div>
-        </div>
-        <div className="jr-time">{formatElapsed(liveMs)}</div>
+      <div className="jr-line">
+        <button type="button" className="jr-main" aria-expanded={exp} onClick={toggleExpanded}>
+          <span className="jr-state">
+            {job.running ? (
+              <span className="spin" />
+            ) : (
+              <I.history size={11} style={{ color: "var(--muted-2)" }} />
+            )}
+          </span>
+          <span className="jr-kind">
+            <I.terminal size={11} />
+            <span>shell</span>
+          </span>
+          <span className="jr-body">
+            <span className="nm" title={job.command}>
+              {job.command}
+            </span>
+            <span className="sub">
+              <span className="ses">{job.sessionLabel}</span>
+              {job.spawnError ? <span className="rk">· {job.spawnError}</span> : null}
+              {!job.running && job.exitCode !== null && job.exitCode !== 0 ? (
+                <span className="rk">· exit {job.exitCode}</span>
+              ) : null}
+            </span>
+          </span>
+          <span className="jr-time">{formatElapsed(liveMs)}</span>
+        </button>
         <div className="jr-act">
           {job.running ? (
             <button
diff --git a/desktop/src/ui/jump-bar.tsx b/desktop/src/ui/jump-bar.tsx
index 5e198443a..292e33a14 100644
--- a/desktop/src/ui/jump-bar.tsx
+++ b/desktop/src/ui/jump-bar.tsx
@@ -15,8 +15,9 @@ export function JumpBar({ messages, threadEl }: JumpBarProps) {
   const items = useMemo(
     () =>
       messages
-        .filter((m): m is { kind: "user"; text: string; turn: number } =>
-          m.kind === "user" && typeof m.text === "string" && typeof m.turn === "number",
+        .filter(
+          (m): m is { kind: "user"; text: string; turn: number } =>
+            m.kind === "user" && typeof m.text === "string" && typeof m.turn === "number",
         )
         .map((m) => ({ turn: m.turn, text: m.text.slice(0, 80) })),
     [messages],
@@ -43,7 +44,7 @@ export function JumpBar({ messages, threadEl }: JumpBarProps) {
     const q = el.querySelectorAll<HTMLElement>(".jump-item");
     const barRect = el.getBoundingClientRect();
     let closest = -1;
-    let closestDist = Infinity;
+    let closestDist = Number.POSITIVE_INFINITY;
     q.forEach((item, i) => {
       const r = item.getBoundingClientRect();
       const midY = r.top + r.height / 2;
@@ -76,7 +77,9 @@ export function JumpBar({ messages, threadEl }: JumpBarProps) {
   ): { style: React.CSSProperties; "data-d"?: string } => {
     const isActive = active === turn;
     if (hoverIdx < 0) {
-      return { style: { width: isActive ? 18 : 12, background: isActive ? "var(--accent)" : undefined } };
+      return {
+        style: { width: isActive ? 18 : 12, background: isActive ? "var(--accent)" : undefined },
+      };
     }
     const d = Math.abs(idx - hoverIdx);
     const width = d === 0 ? 32 : d === 1 ? 20 : d === 2 ? 14 : isActive ? 18 : 12;
@@ -88,12 +91,27 @@ export function JumpBar({ messages, threadEl }: JumpBarProps) {
   };
 
   return (
-    <div className="jump-bar" ref={barRef} onMouseMove={onMove} onMouseLeave={() => { setHovered(null); setShowPreview(false); }}>
+    <div
+      className="jump-bar"
+      ref={barRef}
+      onMouseMove={onMove}
+      onMouseLeave={() => {
+        setHovered(null);
+        setShowPreview(false);
+      }}
+    >
       <div className="jump-scroll">
         {items.map((item, idx) => (
-          <div className="jump-item" key={item.turn} data-turn={item.turn} onClick={() => scrollTo(item.turn)}>
-            <div className="jump-dot" {...dotProps(idx, item.turn)} />
-          </div>
+          <button
+            type="button"
+            className="jump-item"
+            key={item.turn}
+            data-turn={item.turn}
+            onClick={() => scrollTo(item.turn)}
+            title={item.text}
+          >
+            <span className="jump-dot" {...dotProps(idx, item.turn)} />
+          </button>
         ))}
       </div>
       {showPreview && hoverText && (
diff --git a/desktop/src/ui/live.tsx b/desktop/src/ui/live.tsx
index 832369b27..1951cfe56 100644
--- a/desktop/src/ui/live.tsx
+++ b/desktop/src/ui/live.tsx
@@ -1,6 +1,24 @@
 import { useEffect, useRef, useState } from "react";
-import { I } from "../icons";
 import { t, useLang } from "../i18n";
+import { I } from "../icons";
+
+function hashString(value: string): string {
+  let hash = 0;
+  for (let i = 0; i < value.length; i++) {
+    hash = (hash * 31 + value.charCodeAt(i)) | 0;
+  }
+  return `${value.length}-${(hash >>> 0).toString(36)}`;
+}
+
+function keyed<T>(items: readonly T[], keyFor: (item: T) => string): { item: T; key: string }[] {
+  const seen = new Map<string, number>();
+  return items.map((item) => {
+    const base = keyFor(item);
+    const count = seen.get(base) ?? 0;
+    seen.set(base, count + 1);
+    return { item, key: count === 0 ? base : `${base}-${count}` };
+  });
+}
 
 export function fmtElapsed(ms: number): string {
   const s = ms / 1000;
@@ -35,11 +53,7 @@ export function ThinkingPill({
   elapsedMs: number;
 }) {
   const color =
-    phase === "queued"
-      ? "var(--muted)"
-      : phase === "tool"
-        ? "var(--warning)"
-        : "var(--accent)";
+    phase === "queued" ? "var(--muted)" : phase === "tool" ? "var(--warning)" : "var(--accent)";
   return (
     <div className="thinking">
       <span className="dots" style={{ color }}>
@@ -57,13 +71,14 @@ export function ThinkingPill({
 
 export function LiveReasoning({ lines }: { lines: string[] }) {
   useLang();
+  const keyedLines = keyed(lines, hashString);
   return (
     <div className="live-reason">
       <div className="head">
         <span className="dot" /> {t("live.reasoning")}
       </div>
-      {lines.map((line, i) => (
-        <div key={i}>
+      {keyedLines.map(({ item: line, key }, i) => (
+        <div key={key}>
           {line}
           {i === lines.length - 1 ? <span className="stream-caret" /> : null}
         </div>
@@ -84,8 +99,19 @@ export function ToolRunningCard({
   logLines?: { text: string; tone?: "ok" | "dim" }[];
 }) {
   useLang();
+  const keyedLogLines = logLines
+    ? keyed(logLines, (line) => `${hashString(line.text)}-${line.tone ?? ""}`)
+    : [];
   const ic =
-    kind === "shell" ? <I.terminal size={12} /> : kind === "fetch" ? <I.globe size={12} /> : kind === "search" ? <I.search size={12} /> : <I.wrench size={12} />;
+    kind === "shell" ? (
+      <I.terminal size={12} />
+    ) : kind === "fetch" ? (
+      <I.globe size={12} />
+    ) : kind === "search" ? (
+      <I.search size={12} />
+    ) : (
+      <I.wrench size={12} />
+    );
   return (
     <div className="skel-card">
       <div className="h">
@@ -93,14 +119,19 @@ export function ToolRunningCard({
         <span className="kind">{kind}</span>
         <span style={{ color: "var(--fg)", fontWeight: 500 }}>{name}</span>
         <span className="grow" />
-        <span className="spin-meta" role="img" aria-label={t("live.running")} title={t("live.running")} />
+        <span
+          className="spin-meta"
+          role="img"
+          aria-label={t("live.running")}
+          title={t("live.running")}
+        />
         <span className="timer">{fmtElapsed(elapsedMs)}</span>
       </div>
       {logLines && logLines.length > 0 ? (
         <div className="live-log">
-          {logLines.map((ln, i) => (
+          {keyedLogLines.map(({ item: ln, key }, i) => (
             <div
-              key={i}
+              key={key}
               className={`line ${ln.tone ?? ""}`}
               style={{ animationDelay: `${i * 0.25}s` }}
             >
diff --git a/desktop/src/ui/settings.tsx b/desktop/src/ui/settings.tsx
index 5d6dade61..a0e025f2f 100644
--- a/desktop/src/ui/settings.tsx
+++ b/desktop/src/ui/settings.tsx
@@ -11,10 +11,10 @@ import type {
   SkillInfo,
 } from "../protocol";
 import {
+  type QQDesktopSettingsState,
   describeQQRowSummary,
   getQQConnectIntent,
   getQQStatusLabel,
-  type QQDesktopSettingsState,
 } from "../qq-settings";
 import {
   FONT_FAMILY,
@@ -133,12 +133,18 @@ export function SettingsModal({
   }, [onClose]);
   const currentMeta = PAGE_META.find((p) => p.id === page) ?? PAGE_META[0]!;
   return (
-    <div className="settings-mask" onClick={onClose}>
-      <div className="settings" onClick={(e) => e.stopPropagation()}>
+    <div
+      className="settings-mask"
+      onMouseDown={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div className="settings">
         <nav className="settings-side">
           <div className="sg">{t("settings.title")}</div>
           {PAGE_META.map((p) => (
-            <div
+            <button
+              type="button"
               key={p.id}
               className="row"
               data-active={page === p.id}
@@ -146,7 +152,7 @@ export function SettingsModal({
             >
               <span className="ico">{I[p.icon]({ size: 13 })}</span>
               <span>{t(`settings.page${p.id[0]!.toUpperCase()}${p.id.slice(1)}Label` as any)}</span>
-            </div>
+            </button>
           ))}
         </nav>
         <div className="settings-main">
@@ -282,7 +288,7 @@ export function QQChannelSection({
     setAppId(current.appId ?? "");
     setAppSecret(current.appSecret ?? "");
     setSandbox(current.sandbox ?? true);
-  }, [current.appId, current.appSecret, current.sandbox, configureOpen]);
+  }, [current.appId, current.appSecret, current.sandbox]);
 
   const savePatch = { appId, appSecret, sandbox };
 
@@ -607,7 +613,12 @@ function PageGeneral({
           </div>
           <div className="seg-ctrl">
             {getSupportedLangs().map((code) => (
-              <button type="button" key={code} data-on={lang === code} onClick={() => setLang(code)}>
+              <button
+                type="button"
+                key={code}
+                data-on={lang === code}
+                onClick={() => setLang(code)}
+              >
                 {getLangLabel(code)}
               </button>
             ))}
@@ -990,6 +1001,33 @@ const KNOWN_MODELS = ["deepseek-v4-flash", "deepseek-v4-pro"] as const;
 const EFFORT_VALUES = ["low", "medium", "high", "max"] as const;
 type EffortValue = (typeof EFFORT_VALUES)[number];
 
+function McpSpecFormatHint() {
+  const raw = t("settings.mcpSpecFormat");
+  const nodes: ReactNode[] = [];
+  let inCode = false;
+  let key = 0;
+  for (const part of raw.split(/(<code>|<\/code>)/)) {
+    if (part === "<code>") {
+      inCode = true;
+      continue;
+    }
+    if (part === "</code>") {
+      inCode = false;
+      continue;
+    }
+    if (!part) continue;
+    key += 1;
+    nodes.push(
+      inCode ? (
+        <code key={`${key}-${part}`}>{part}</code>
+      ) : (
+        <span key={`${key}-${part}`}>{part}</span>
+      ),
+    );
+  }
+  return <div className="h">{nodes}</div>;
+}
+
 function PageModels({
   settings,
   onSave,
@@ -1006,14 +1044,15 @@ function PageModels({
         <div className="stitle">{t("settings.defaultModelCurrent", { model: settings.model })}</div>
         <div className="model-grid">
           {KNOWN_MODELS.map((id) => (
-            <div
+            <button
+              type="button"
               key={id}
               className="mcard"
               data-on={settings.model === id}
               onClick={() => onSave({ model: id })}
             >
               <div className="nm">{id}</div>
-            </div>
+            </button>
           ))}
         </div>
         <div className="setting-row" style={{ marginTop: 12 }}>
@@ -1056,7 +1095,7 @@ function PageModels({
               value={settings.contextTokens?.[settings.model] ?? ""}
               onChange={(e) => {
                 const raw = e.target.value.trim();
-                const num = raw ? parseInt(raw, 10) : 0;
+                const num = raw ? Number.parseInt(raw, 10) : 0;
                 const next = { ...(settings.contextTokens ?? {}) };
                 if (num > 0 && Number.isFinite(num)) {
                   next[settings.model] = num;
@@ -1177,7 +1216,7 @@ function PageMCP({
         <div className="setting-row">
           <div className="l">
             <div className="n">{t("settings.mcpSpecLabel")}</div>
-            <div className="h" dangerouslySetInnerHTML={{ __html: t("settings.mcpSpecFormat") }} />
+            <McpSpecFormatHint />
           </div>
           <div style={{ display: "flex", gap: 6 }}>
             <input
@@ -1255,9 +1294,7 @@ function PageSkills({
                   className="field"
                   style={{ marginLeft: "auto", minWidth: 96 }}
                   value={subagentModels[s.name] ?? "flash"}
-                  onChange={(e) =>
-                    setSubagentModel(s.name, e.target.value as "flash" | "pro")
-                  }
+                  onChange={(e) => setSubagentModel(s.name, e.target.value as "flash" | "pro")}
                   title={t("settings.subagentModelHint")}
                 >
                   <option value="flash">{t("settings.subagentModelFlash")}</option>
@@ -1314,9 +1351,7 @@ function PageMemory({
               </button>
             ))}
           </div>
-          <pre className="memory-detail">
-            {detail ? detail.body : t("settings.memoryDesc")}
-          </pre>
+          <pre className="memory-detail">{detail ? detail.body : t("settings.memoryDesc")}</pre>
         </div>
       )}
     </section>
@@ -1435,8 +1470,8 @@ function PageShortcuts() {
   return (
     <section className="section">
       <div className="kbd-grid">
-        {rows.map((s, i) => (
-          <SectionRow key={i} nm={s.nm} keys={s.keys} />
+        {rows.map((s) => (
+          <SectionRow key={s.nm} nm={s.nm} keys={s.keys} />
         ))}
       </div>
     </section>
diff --git a/desktop/src/ui/shortcut.tsx b/desktop/src/ui/shortcut.tsx
index 965307e84..3f8717d43 100644
--- a/desktop/src/ui/shortcut.tsx
+++ b/desktop/src/ui/shortcut.tsx
@@ -40,6 +40,16 @@ export function localizeShortcutText(text: string): string {
   return text.replace(/⌘/g, keyLabel("mod", isMacPlatform()));
 }
 
+function keyedShortcutKeys(keys: readonly ShortcutKey[]): { key: ShortcutKey; id: string }[] {
+  const seen = new Map<string, number>();
+  return keys.map((key) => {
+    const raw = String(key);
+    const count = seen.get(raw) ?? 0;
+    seen.set(raw, count + 1);
+    return { key, id: count === 0 ? raw : `${raw}-${count}` };
+  });
+}
+
 export function Shortcut({
   keys,
   className,
@@ -50,8 +60,8 @@ export function Shortcut({
   const mac = isMacPlatform();
   return (
     <span className={["shortcut", className].filter(Boolean).join(" ")}>
-      {keys.map((key, index) => (
-        <kbd key={`${key}-${index}`} data-key={key}>
+      {keyedShortcutKeys(keys).map(({ key, id }) => (
+        <kbd key={id} data-key={key}>
           {keyLabel(key, mac)}
         </kbd>
       ))}
diff --git a/desktop/src/ui/sidebar.tsx b/desktop/src/ui/sidebar.tsx
index a15dab792..c45ef00e3 100644
--- a/desktop/src/ui/sidebar.tsx
+++ b/desktop/src/ui/sidebar.tsx
@@ -1,5 +1,5 @@
-import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { open as openFileDialog } from "@tauri-apps/plugin-dialog";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import type { SessionInfo } from "../App";
 import { t, useLang } from "../i18n";
 import { I } from "../icons";
@@ -23,7 +23,7 @@ type PendingImport = {
 type ImportSource = ExternalSessionSource;
 
 function prettyName(s: SessionInfo): string {
-  if (s.summary && s.summary.trim()) return s.summary.trim();
+  if (s.summary?.trim()) return s.summary.trim();
   const m = s.name.match(/^desktop-(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(?:-(\d+))?$/);
   if (m) {
     const [, , month, day, hh, mm, tab] = m;
@@ -89,15 +89,14 @@ export function Sidebar({
   const [pendingImport, setPendingImport] = useState<PendingImport | null>(null);
   const [editingName, setEditingName] = useState<string | null>(null);
   const [editValue, setEditValue] = useState("");
+  const editInputRef = useRef<HTMLInputElement>(null);
   const workspaceLabel = workspaceDir
     ? workspaceDir.split(/[\\/]/).pop() || workspaceDir
     : t("sidebarPanel.noWorkspace");
   const filtered = query
     ? sessions.filter((s) => {
         const q = query.toLowerCase();
-        return (
-          prettyName(s).toLowerCase().includes(q) || s.name.toLowerCase().includes(q)
-        );
+        return prettyName(s).toLowerCase().includes(q) || s.name.toLowerCase().includes(q);
       })
     : sessions;
 
@@ -120,6 +119,10 @@ export function Sidebar({
     };
   }, [pendingDelete, pendingImport]);
 
+  useEffect(() => {
+    if (editingName) editInputRef.current?.focus();
+  }, [editingName]);
+
   return (
     <aside className="sidebar">
       <div className="side-head">
@@ -259,8 +262,8 @@ export function Sidebar({
                 <div className="body">
                   {editing ? (
                     <input
+                      ref={editInputRef}
                       className="title-edit"
-                      autoFocus
                       value={editValue}
                       maxLength={RENAME_MAX_CHARS}
                       placeholder={t("sidebarPanel.renamePlaceholder")}
@@ -339,19 +342,19 @@ export function Sidebar({
       </div>
 
       <div className="side-foot">
-        <div className="row" onClick={onOpenRules}>
+        <button type="button" className="row" onClick={onOpenRules}>
           <span className="ico">
             <I.shield size={13} />
           </span>
           <span>{t("sidebarPanel.approvalRules")}</span>
-        </div>
-        <div className="row" onClick={onOpenAbout}>
+        </button>
+        <button type="button" className="row" onClick={onOpenAbout}>
           <span className="ico">
             <I.help size={13} />
           </span>
           <span>{t("about.sidebarLabel")}</span>
-        </div>
-        <div className="row" onClick={onOpenSettings}>
+        </button>
+        <button type="button" className="row" onClick={onOpenSettings}>
           <span className="ico">
             <I.cog size={13} />
           </span>
@@ -359,7 +362,7 @@ export function Sidebar({
           <span className="right">
             <Shortcut keys={["mod", ","]} />
           </span>
-        </div>
+        </button>
       </div>
 
       {pendingDelete ? (
@@ -401,7 +404,7 @@ function SessionDeletePopover({
   onCancel: () => void;
   onConfirm: () => void;
 }) {
-  const ref = useRef<HTMLDivElement>(null);
+  const ref = useRef<HTMLDialogElement>(null);
   const cancelRef = useRef<HTMLButtonElement>(null);
   const [pos, setPos] = useState<{ left: number; top: number }>({
     left: target.x,
@@ -424,10 +427,10 @@ function SessionDeletePopover({
   }, [target.x, target.y, pos.left, pos.top]);
 
   return (
-    <div
+    <dialog
+      open
       ref={ref}
       className="session-delete-popover"
-      role="dialog"
       aria-modal="true"
       style={{ left: pos.left, top: pos.top }}
     >
@@ -444,7 +447,7 @@ function SessionDeletePopover({
           {t("sidebarPanel.delete")}
         </button>
       </div>
-    </div>
+    </dialog>
   );
 }
 
@@ -463,7 +466,7 @@ function SessionImportPopover({
   onImportDetected: (sources: ImportSource[]) => void;
   onImport: (payload: { source: ImportSource; path: string; name?: string }) => void;
 }) {
-  const ref = useRef<HTMLDivElement>(null);
+  const ref = useRef<HTMLDialogElement>(null);
   const firstInputRef = useRef<HTMLInputElement>(null);
   const [pos, setPos] = useState<{ left: number; top: number }>({
     left: target.x,
@@ -534,16 +537,21 @@ function SessionImportPopover({
   };
 
   return (
-    <div
+    <dialog
+      open
       ref={ref}
       className="session-import-popover"
-      role="dialog"
       aria-modal="true"
       style={{ left: pos.left, top: pos.top }}
     >
       <div className="head">
         <span>{t("sidebarPanel.importSessions")}</span>
-        <button type="button" className="close" onClick={onCancel} aria-label={t("sidebarPanel.cancel")}>
+        <button
+          type="button"
+          className="close"
+          onClick={onCancel}
+          aria-label={t("sidebarPanel.cancel")}
+        >
           <I.x size={12} />
         </button>
       </div>
@@ -614,56 +622,60 @@ function SessionImportPopover({
         </>
       ) : (
         <>
-      <div className="field">
-        <span className="label">{t("sidebarPanel.importSource")}</span>
-        <div className="seg">
-          <button type="button" data-on={source === "claude"} onClick={() => setSource("claude")}>
-            {t("sidebarPanel.importFromClaude")}
-          </button>
-          <button type="button" data-on={source === "codex"} onClick={() => setSource("codex")}>
-            {t("sidebarPanel.importFromCodex")}
-          </button>
-        </div>
-      </div>
-      <div className="field">
-        <span className="label">{t("sidebarPanel.importPath")}</span>
-        <div className="path-row">
-          <input
-            ref={firstInputRef}
-            value={path}
-            placeholder={t("sidebarPanel.importPath")}
-            onChange={(e) => setPath(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === "Enter" && path.trim()) submit();
-            }}
-          />
-          <button type="button" onClick={() => void browse()}>
-            {t("sidebarPanel.browse")}
-          </button>
-        </div>
-      </div>
-      <div className="field">
-        <span className="label">{t("sidebarPanel.importName")}</span>
-        <input
-          value={name}
-          placeholder={t("sidebarPanel.importNamePlaceholder")}
-          onChange={(e) => setName(e.target.value)}
-          onKeyDown={(e) => {
-            if (e.key === "Enter" && path.trim()) submit();
-          }}
-        />
-      </div>
-      <div className="actions">
-        <button type="button" className="cancel" onClick={onCancel}>
-          {t("sidebarPanel.cancel")}
-        </button>
-        <button type="button" className="confirm" disabled={!path.trim()} onClick={submit}>
-          <I.upload size={11} />
-          {t("sidebarPanel.importConfirm")}
-        </button>
-      </div>
+          <div className="field">
+            <span className="label">{t("sidebarPanel.importSource")}</span>
+            <div className="seg">
+              <button
+                type="button"
+                data-on={source === "claude"}
+                onClick={() => setSource("claude")}
+              >
+                {t("sidebarPanel.importFromClaude")}
+              </button>
+              <button type="button" data-on={source === "codex"} onClick={() => setSource("codex")}>
+                {t("sidebarPanel.importFromCodex")}
+              </button>
+            </div>
+          </div>
+          <div className="field">
+            <span className="label">{t("sidebarPanel.importPath")}</span>
+            <div className="path-row">
+              <input
+                ref={firstInputRef}
+                value={path}
+                placeholder={t("sidebarPanel.importPath")}
+                onChange={(e) => setPath(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" && path.trim()) submit();
+                }}
+              />
+              <button type="button" onClick={() => void browse()}>
+                {t("sidebarPanel.browse")}
+              </button>
+            </div>
+          </div>
+          <div className="field">
+            <span className="label">{t("sidebarPanel.importName")}</span>
+            <input
+              value={name}
+              placeholder={t("sidebarPanel.importNamePlaceholder")}
+              onChange={(e) => setName(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && path.trim()) submit();
+              }}
+            />
+          </div>
+          <div className="actions">
+            <button type="button" className="cancel" onClick={onCancel}>
+              {t("sidebarPanel.cancel")}
+            </button>
+            <button type="button" className="confirm" disabled={!path.trim()} onClick={submit}>
+              <I.upload size={11} />
+              {t("sidebarPanel.importConfirm")}
+            </button>
+          </div>
         </>
       )}
-    </div>
+    </dialog>
   );
 }
diff --git a/desktop/src/ui/splash.tsx b/desktop/src/ui/splash.tsx
index f2c9a73ba..d9a00a4b4 100644
--- a/desktop/src/ui/splash.tsx
+++ b/desktop/src/ui/splash.tsx
@@ -52,7 +52,7 @@ export function Splash({ onDone }: { onDone: () => void }) {
   };
 
   return (
-    <div className="splash" data-leaving={leaving} onClick={skipClick}>
+    <div className="splash" data-leaving={leaving} onPointerDown={skipClick}>
       <div className="splash-card">
         <div className="splash-mark" />
         <div className="splash-name">Reasonix</div>
diff --git a/desktop/src/ui/statusbar.tsx b/desktop/src/ui/statusbar.tsx
index 4e3bc2d77..94e7169b4 100644
--- a/desktop/src/ui/statusbar.tsx
+++ b/desktop/src/ui/statusbar.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from "react";
-import { I } from "../icons";
-import { t } from "../i18n";
 import type { Balance, Settings, UsageStats } from "../App";
+import { t } from "../i18n";
+import { I } from "../icons";
 import type { JobInfo } from "../protocol";
 import { THEME, THEME_STYLES, type Theme, type ThemeStyle, themeForStyle } from "../theme";
 import { localizeShortcutText } from "./shortcut";
@@ -81,7 +81,7 @@ export function StatusBar({
   const connState = !ready ? "off" : busy ? "running" : "online";
   const [themeOpen, setThemeOpen] = useState(false);
   const themePopRef = useRef<HTMLDivElement | null>(null);
-  const themeButtonRef = useRef<HTMLSpanElement | null>(null);
+  const themeButtonRef = useRef<HTMLButtonElement | null>(null);
 
   useEffect(() => {
     if (!themeOpen) return;
@@ -102,7 +102,9 @@ export function StatusBar({
           style={connState === "off" ? { background: "var(--danger)" } : undefined}
         />
         <span>{settings?.baseUrl?.replace(/^https?:\/\//, "") ?? "api.deepseek.com"}</span>
-        <span className="v">{!ready ? t("statusbar.offline") : busy ? t("statusbar.busy") : t("statusbar.online")}</span>
+        <span className="v">
+          {!ready ? t("statusbar.offline") : busy ? t("statusbar.busy") : t("statusbar.online")}
+        </span>
       </span>
       <span className="seg" title={cacheHitDetail || t("statusbar.cacheHit")}>
         <I.zap size={11} style={{ color: "var(--accent)" }} />
@@ -122,7 +124,8 @@ export function StatusBar({
 
       <span className="grow" />
 
-      <span
+      <button
+        type="button"
         className={`seg jobs ${jobsOpen ? "active" : ""}`}
         onClick={onToggleJobs}
         title={localizeShortcutText(t("statusbar.jobsTip"))}
@@ -130,24 +133,26 @@ export function StatusBar({
         <I.cpu size={11} />
         <span>{t("statusbar.jobs")}</span>
         <span className={runningJobs > 0 ? "v acc" : "v"}>{runningJobs}</span>
-      </span>
+      </button>
 
       {settings?.workspaceDir ? (
-        <span
+        <button
+          type="button"
           className="seg"
           title={t("statusbar.switchWorkspace", { workspace: settings.workspaceDir })}
-          style={onOpenWorkdir ? { cursor: "pointer" } : undefined}
+          disabled={!onOpenWorkdir}
           onClick={(e) => {
             if (!onOpenWorkdir) return;
-            const r = (e.currentTarget as HTMLElement).getBoundingClientRect();
+            const r = e.currentTarget.getBoundingClientRect();
             onOpenWorkdir({ bottom: window.innerHeight - r.top + 6, left: r.left });
           }}
         >
           <I.folder size={11} />
           <span className="v">{settings.workspaceDir.split(/[\\/]/).pop() || "ws"}</span>
-        </span>
+        </button>
       ) : null}
-      <span
+      <button
+        type="button"
         className="seg"
         title={`model · effort ${settings?.reasoningEffort ?? "high"}`}
         onClick={onOpenSettings}
@@ -155,8 +160,9 @@ export function StatusBar({
         <I.brain size={11} style={{ color: "var(--violet)" }} />
         <span className="v vio">{settings?.model ?? "—"}</span>
         <span className="v">{settings?.reasoningEffort ?? "high"}</span>
-      </span>
-      <span
+      </button>
+      <button
+        type="button"
         className="seg"
         title={t("statusbar.switchCurrency")}
         onClick={onToggleCurrency}
@@ -170,8 +176,9 @@ export function StatusBar({
                 .join(" / ")
             : balanceLabel}
         </span>
-      </span>
-      <span
+      </button>
+      <button
+        type="button"
         ref={themeButtonRef}
         className={`seg theme-trigger ${themeOpen ? "active" : ""}`}
         title={t("statusbar.switchTheme")}
@@ -181,9 +188,14 @@ export function StatusBar({
         <span className="v">
           {t(`statusbar.themeStyle${themeStyle[0]!.toUpperCase()}${themeStyle.slice(1)}` as any)}
         </span>
-      </span>
+      </button>
       {themeOpen ? (
-        <div ref={themePopRef} className="theme-pop" role="menu" aria-label={t("settings.themeStyle")}>
+        <div
+          ref={themePopRef}
+          className="theme-pop"
+          role="menu"
+          aria-label={t("settings.themeStyle")}
+        >
           <div className="theme-pop-head">
             <div className="tt">{t("settings.themeStyle")}</div>
             <div className="ss">{t("statusbar.switchTheme")}</div>
diff --git a/desktop/src/ui/thread.tsx b/desktop/src/ui/thread.tsx
index 090aefd3c..8189b62c5 100644
--- a/desktop/src/ui/thread.tsx
+++ b/desktop/src/ui/thread.tsx
@@ -103,21 +103,30 @@ export const UserMsg = memo(function UserMsg({
   );
 });
 
-function ToolGroupShell({ segs, renderTool: rt }: {
+function ToolGroupShell({
+  segs,
+  renderTool: rt,
+}: {
   segs: (AssistantSegment & { kind: "tool" })[];
-  renderTool: (s: AssistantSegment & { kind: "tool" }, idx: number, expanded?: boolean) => ReactNode;
+  renderTool: (
+    s: AssistantSegment & { kind: "tool" },
+    idx: number,
+    expanded?: boolean,
+  ) => ReactNode;
 }) {
   const [open, setOpen] = useState(false);
   return (
     <div className="tool-group">
-      <button className="tool-group-header" onClick={() => setOpen((o) => !o)}>
-        <span>{segs.length > 1 ? t("thread.toolCalls", { count: segs.length }) : t("thread.oneToolCall")}</span>
+      <button type="button" className="tool-group-header" onClick={() => setOpen((o) => !o)}>
+        <span>
+          {segs.length > 1
+            ? t("thread.toolCalls", { count: segs.length })
+            : t("thread.oneToolCall")}
+        </span>
         <span className={`chevron ${open ? "open" : ""}`}>{I.chev({ size: 12 })}</span>
       </button>
       {open && (
-        <div className="tool-group-body">
-          {segs.map((ts) => rt(ts, segs.indexOf(ts), true))}
-        </div>
+        <div className="tool-group-body">{segs.map((ts) => rt(ts, segs.indexOf(ts), true))}</div>
       )}
     </div>
   );
@@ -160,7 +169,8 @@ export const AssistantMsg = memo(function AssistantMsg({
   const rendered: ReactNode[] = [];
 
   let firstReasoningShown = false;
-  let toolGroup: { segments: (AssistantSegment & { kind: "tool" })[]; indices: number[] } | null = null;
+  let toolGroup: { segments: (AssistantSegment & { kind: "tool" })[]; indices: number[] } | null =
+    null;
 
   function flushToolGroup(): void {
     if (!toolGroup) return;
@@ -169,12 +179,18 @@ export const AssistantMsg = memo(function AssistantMsg({
     if (tSegs.length === 1) {
       rendered.push(renderTool(tSegs[0]!, groupKey));
     } else {
-      rendered.push(<ToolGroupShell key={`tool-group-${groupKey}`} segs={tSegs} renderTool={renderTool} />);
+      rendered.push(
+        <ToolGroupShell key={`tool-group-${groupKey}`} segs={tSegs} renderTool={renderTool} />,
+      );
     }
     toolGroup = null;
   }
 
-  function renderTool(s: AssistantSegment & { kind: "tool" }, idx: number, expanded?: boolean): ReactNode {
+  function renderTool(
+    s: AssistantSegment & { kind: "tool" },
+    idx: number,
+    expanded?: boolean,
+  ): ReactNode {
     const pendingConfirm =
       (s.name === "run_command" || s.name === "run_background") && s.result === undefined
         ? pendingConfirms.find((c) => c.command === extractCommand(s.args))
@@ -213,16 +229,37 @@ export const AssistantMsg = memo(function AssistantMsg({
       const files = parseEditResult(s.result);
       return files.length > 0 ? (
         <>
-          {files.map((f, fi) => (
-            <DiffCard key={`${idx}-${fi}`} filename={f.filename} lines={f.lines} applied={s.ok !== false} />
+          {files.map((f) => (
+            <DiffCard
+              key={`${idx}-${f.filename}-${f.lines.length}-${f.lines[0] ?? ""}-${f.lines.at(-1) ?? ""}`}
+              filename={f.filename}
+              lines={f.lines}
+              applied={s.ok !== false}
+            />
           ))}
         </>
       ) : (
-        <ToolCard key={idx} name={s.name} args={s.args} result={s.result} ok={s.ok} durationMs={s.durationMs} defaultOpen={expanded} />
+        <ToolCard
+          key={idx}
+          name={s.name}
+          args={s.args}
+          result={s.result}
+          ok={s.ok}
+          durationMs={s.durationMs}
+          defaultOpen={expanded}
+        />
       );
     }
     return (
-      <ToolCard key={idx} name={s.name} args={s.args} result={s.result} ok={s.ok} durationMs={s.durationMs} defaultOpen={expanded} />
+      <ToolCard
+        key={idx}
+        name={s.name}
+        args={s.args}
+        result={s.result}
+        ok={s.ok}
+        durationMs={s.durationMs}
+        defaultOpen={expanded}
+      />
     );
   }
 
@@ -243,7 +280,11 @@ export const AssistantMsg = memo(function AssistantMsg({
       if (!firstReasoningShown) {
         firstReasoningShown = true;
         rendered.push(
-          <ReasoningCard key={`r-${i}`} text={s.text} streaming={pending && i === segments.length - 1} />,
+          <ReasoningCard
+            key={`r-${i}`}
+            text={s.text}
+            streaming={pending && i === segments.length - 1}
+          />,
         );
       }
       // Subsequent reasoning segments are intermediate tool-calling thought — hidden
diff --git a/desktop/src/ui/useAutoCollapse.ts b/desktop/src/ui/useAutoCollapse.ts
index f7c8b09d3..ede7efba4 100644
--- a/desktop/src/ui/useAutoCollapse.ts
+++ b/desktop/src/ui/useAutoCollapse.ts
@@ -11,9 +11,7 @@ export function useAutoCollapse(persistKey: string): {
   requireCollapsed: () => void;
   releaseCollapsed: () => void;
 } {
-  const [collapsed, setCollapsed] = useState(
-    () => localStorage.getItem(persistKey) === "1",
-  );
+  const [collapsed, setCollapsed] = useState(() => localStorage.getItem(persistKey) === "1");
   const sourceRef = useRef<"user" | "auto">("user");
 
   const toggle = useCallback(() => {
diff --git a/desktop/src/ui/useAutoScroll.ts b/desktop/src/ui/useAutoScroll.ts
index 3eaac7989..088c28f51 100644
--- a/desktop/src/ui/useAutoScroll.ts
+++ b/desktop/src/ui/useAutoScroll.ts
@@ -32,9 +32,7 @@ export function useAutoScroll(
   const refreshJumpButton = useCallback(() => {
     const el = containerRef.current;
     if (!el) return;
-    setShowJumpButton(
-      !isPinnedRef.current && el.scrollHeight > el.clientHeight + PIN_THRESHOLD,
-    );
+    setShowJumpButton(!isPinnedRef.current && el.scrollHeight > el.clientHeight + PIN_THRESHOLD);
   }, [containerRef]);
 
   const scrollToBottom = useCallback(
diff --git a/desktop/src/ui/useDisableTextAssist.ts b/desktop/src/ui/useDisableTextAssist.ts
index 93d0ae095..edcf252ad 100644
--- a/desktop/src/ui/useDisableTextAssist.ts
+++ b/desktop/src/ui/useDisableTextAssist.ts
@@ -57,11 +57,11 @@ export function useDisableTextAssist() {
 
     const observer = new MutationObserver((mutations) => {
       for (const mutation of mutations) {
-        mutation.addedNodes.forEach((node) => {
+        for (const node of mutation.addedNodes) {
           if (node instanceof Element) {
             applyWithin(node);
           }
-        });
+        }
       }
     });
 
diff --git a/desktop/src/ui/workdir-pop.tsx b/desktop/src/ui/workdir-pop.tsx
index 710f17ee9..bc45788a5 100644
--- a/desktop/src/ui/workdir-pop.tsx
+++ b/desktop/src/ui/workdir-pop.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from "react";
-import { I } from "../icons";
 import { t, useLang } from "../i18n";
+import { I } from "../icons";
 import { Shortcut } from "./shortcut";
 
 type Anchor = { top?: number; bottom?: number; left: number };
@@ -101,22 +101,23 @@ export function WorkdirPop({
             const isCurrent = p === current;
             const name = p.split(/[\\/]/).filter(Boolean).pop() ?? p;
             return (
-              <div
-                key={p}
-                className="wd-row"
-                onClick={() => {
-                  if (!isCurrent) onPick(p);
-                  onClose();
-                }}
-                title={p}
-              >
-                <span className="ic">
-                  <I.folder size={12} />
-                </span>
-                <div className="b">
-                  <div className="p">{name}</div>
-                  <div className="br">{p}</div>
-                </div>
+              <div key={p} className="wd-row" title={p}>
+                <button
+                  type="button"
+                  className="wd-row-main"
+                  onClick={() => {
+                    if (!isCurrent) onPick(p);
+                    onClose();
+                  }}
+                >
+                  <span className="ic">
+                    <I.folder size={12} />
+                  </span>
+                  <span className="b">
+                    <span className="p">{name}</span>
+                    <span className="br">{p}</span>
+                  </span>
+                </button>
                 {isCurrent ? (
                   <span className="pin">
                     <I.check size={11} />
@@ -125,7 +126,6 @@ export function WorkdirPop({
                   <button
                     type="button"
                     className="wd-del"
-                    onMouseDown={(e) => e.stopPropagation()}
                     onClick={(e) => {
                       e.stopPropagation();
                       onRemoveRecent(p);
diff --git a/desktop/vite.config.ts b/desktop/vite.config.ts
index 37eb70ec3..a55c7cc6b 100644
--- a/desktop/vite.config.ts
+++ b/desktop/vite.config.ts
@@ -1,6 +1,6 @@
 import { readFileSync } from "node:fs";
-import { fileURLToPath } from "node:url";
 import { resolve } from "node:path";
+import { fileURLToPath } from "node:url";
 import react from "@vitejs/plugin-react";
 import { type Plugin, defineConfig } from "vite";
 
@@ -45,8 +45,14 @@ export default defineConfig({
   },
   resolve: {
     alias: {
-      "@reasonix/core-utils/compaction": resolve(__dirname, "../packages/core-utils/src/compaction.ts"),
-      "@reasonix/core-utils/derive-prefix": resolve(__dirname, "../packages/core-utils/src/derive-prefix.ts"),
+      "@reasonix/core-utils/compaction": resolve(
+        __dirname,
+        "../packages/core-utils/src/compaction.ts",
+      ),
+      "@reasonix/core-utils/derive-prefix": resolve(
+        __dirname,
+        "../packages/core-utils/src/derive-prefix.ts",
+      ),
       "@reasonix/core-utils": resolve(__dirname, "../packages/core-utils/src/index.ts"),
     },
   },
@@ -54,5 +60,29 @@ export default defineConfig({
     target: "es2022",
     minify: "esbuild",
     sourcemap: true,
+    rollupOptions: {
+      output: {
+        manualChunks(id) {
+          if (!id.includes("node_modules")) return undefined;
+          if (id.includes("/react/") || id.includes("/react-dom/")) return "vendor-react";
+          if (id.includes("/@tauri-apps/")) return "vendor-tauri";
+          if (id.includes("/lucide-react/") || id.includes("/react-virtuoso/")) return "vendor-ui";
+          if (id.includes("/prism-react-renderer/")) return "vendor-code";
+          if (
+            id.includes("/react-markdown/") ||
+            id.includes("/remark-") ||
+            id.includes("/rehype-") ||
+            id.includes("/katex/") ||
+            id.includes("/unified/") ||
+            id.includes("/mdast-") ||
+            id.includes("/hast-") ||
+            id.includes("/micromark")
+          ) {
+            return "vendor-markdown";
+          }
+          return undefined;
+        },
+      },
+    },
   },
 });
diff --git a/package.json b/package.json
index 37c96bfc5..c81aefbcd 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
   "scripts": {
     "postinstall": "node scripts/postinstall.mjs",
     "build:dashboard": "npm --prefix dashboard run build",
+    "build:desktop": "npm --prefix desktop run build",
     "build": "npm run build:dashboard && tsup && node scripts/copy-dashboard-vendor-css.mjs && node scripts/copy-tree-sitter-grammars.mjs",
     "dev": "tsx src/cli/index.ts",
     "chat": "tsx src/cli/index.ts chat",
@@ -40,11 +41,14 @@
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
     "test:mutation": "stryker run",
-    "lint": "biome check src tests",
-    "lint:fix": "biome check --write src tests",
-    "format": "biome format --write src tests",
+    "lint:core": "biome check src tests",
+    "lint:desktop": "biome check desktop/src desktop/vite.config.ts --max-diagnostics 300 --no-errors-on-unmatched",
+    "lint": "npm run lint:core && npm run lint:desktop",
+    "lint:fix": "biome check --write src tests desktop/src desktop/vite.config.ts",
+    "format": "biome format --write src tests desktop/src desktop/vite.config.ts",
     "typecheck": "tsc --noEmit && tsc --noEmit -p dashboard",
-    "verify": "npm run build && npm run lint && npm run typecheck && npm run test --silent",
+    "verify:desktop": "npm run lint:desktop && npm run build:desktop",
+    "verify": "npm run build && npm run lint:core && npm run typecheck && npm run test --silent && npm run verify:desktop",
     "prepare": "simple-git-hooks || true",
     "prepublishOnly": "npm run lint && npm run typecheck && npm run build && npm run test",
     "pitch:pptx": "npx -y @marp-team/marp-cli pitch/pitch.md -o pitch/dist/pitch.pptx --allow-local-files",
diff --git a/tests/desktop-sidebar-new-chat-layout.test.ts b/tests/desktop-sidebar-new-chat-layout.test.ts
index 0a7c691c5..44c825461 100644
--- a/tests/desktop-sidebar-new-chat-layout.test.ts
+++ b/tests/desktop-sidebar-new-chat-layout.test.ts
@@ -21,7 +21,8 @@ describe("desktop sidebar new chat button layout", () => {
     );
     expect(cssRule(".side-head .new-btn .shortcut")).toContain("flex: 0 0 auto");
     expect(cssRule(".side-head .new-btn .shortcut")).toContain("display: none");
-    expect(css).toContain("@container sidebar (min-width: 191px)");
+    expect(css).toContain("@container sidebar (min-width: 272px)");
+    expect(css).toContain("@container sidebar (max-width: 190px)");
     expect(css).toContain("display: inline-flex");
     expect(css).toContain("display: none");
     expect(cssRule(".side-head .icon-btn")).toContain("flex: 0 0 auto");

From 4f899c211512fcde88f6dece18b99e7a3469bee5 Mon Sep 17 00:00:00 2001
From: lab1 <liuxw96@foxmail.com>
Date: Sat, 30 May 2026 11:15:27 +0800
Subject: [PATCH 07/10] Fix desktop jump bar navigation

---
 desktop/src/App.tsx              | 76 +++++++++++++++++++++++++++++---
 desktop/src/styles.css           | 19 ++++++--
 desktop/src/ui/jump-bar.test.tsx | 48 ++++++++++++++++++++
 desktop/src/ui/jump-bar.tsx      | 49 +++++++-------------
 4 files changed, 152 insertions(+), 40 deletions(-)
 create mode 100644 desktop/src/ui/jump-bar.test.tsx

diff --git a/desktop/src/App.tsx b/desktop/src/App.tsx
index 95bf73a6a..6ec5a6a71 100644
--- a/desktop/src/App.tsx
+++ b/desktop/src/App.tsx
@@ -20,7 +20,7 @@ import {
   useRef,
   useState,
 } from "react";
-import { type ScrollerProps, Virtuoso, type VirtuosoHandle } from "react-virtuoso";
+import { type ListRange, type ScrollerProps, Virtuoso, type VirtuosoHandle } from "react-virtuoso";
 import { CommandPalette, Toast, buildCommands, useCommandPalette } from "./CommandPalette";
 import { WorkspaceProvider } from "./Markdown";
 import { type AbortDraftSource, nextAbortDraftCandidate, restoreAbortedDraft } from "./abort-draft";
@@ -77,7 +77,7 @@ import { parseEditResult } from "./ui/cards";
 import { Composer, type SlashCmd } from "./ui/composer";
 import { ContextPanel } from "./ui/context-panel";
 import { JobsPop } from "./ui/jobs-pop";
-import { JumpBar } from "./ui/jump-bar";
+import { JumpBar, type JumpBarItem } from "./ui/jump-bar";
 import { useElapsed } from "./ui/live";
 import { SettingsModal, type PageId as SettingsPageId } from "./ui/settings";
 import { Shortcut, localizeShortcutText, shortcutText } from "./ui/shortcut";
@@ -1475,7 +1475,6 @@ function TabRuntime({
     { top?: number; bottom?: number; left: number } | undefined
   >(undefined);
   const composerRef = useRef<HTMLTextAreaElement>(null);
-  const threadRef = useRef<HTMLDivElement>(null);
   const virtuosoRef = useRef<VirtuosoHandle>(null);
   const virtuosoScrollerRef = useRef<HTMLDivElement | null>(null);
   const [virtuosoScroller, setVirtuosoScroller] = useState<HTMLDivElement | null>(null);
@@ -1987,6 +1986,28 @@ function TabRuntime({
   const currentSessionRef = useRef(state.currentSession);
   currentSessionRef.current = state.currentSession;
   const messageItems = state.messages;
+  const [activeJumpTurn, setActiveJumpTurn] = useState<number | null>(null);
+  const jumpItems = useMemo<JumpBarItem[]>(
+    () =>
+      messageItems.flatMap((message, index) =>
+        message.kind === "user"
+          ? [{ index, turn: message.turn, text: message.text.slice(0, 80) }]
+          : [],
+      ),
+    [messageItems],
+  );
+
+  useEffect(() => {
+    if (jumpItems.length === 0) {
+      setActiveJumpTurn(null);
+      return;
+    }
+    setActiveJumpTurn((current) =>
+      current !== null && jumpItems.some((item) => item.turn === current)
+        ? current
+        : jumpItems[jumpItems.length - 1]!.turn,
+    );
+  }, [jumpItems]);
 
   const restoreScrollTop = useCallback(() => {
     const session = currentSessionRef.current;
@@ -2004,6 +2025,50 @@ function TabRuntime({
       userDetachedScrollRef.current && hasScrollableOverflow(el) && !isElementAtBottom(el),
     );
   }, []);
+  const handleJumpBarJump = useCallback(
+    (item: JumpBarItem) => {
+      setActiveJumpTurn(item.turn);
+      autoFollowRef.current = false;
+      userDetachedScrollRef.current = true;
+      setShowJumpButton(item.index < messageItems.length - 1);
+      virtuosoRef.current?.scrollToIndex({
+        index: item.index,
+        align: "start",
+        behavior: "smooth",
+      });
+      window.requestAnimationFrame(refreshJumpButton);
+    },
+    [messageItems.length, refreshJumpButton],
+  );
+  const handleThreadRangeChanged = useCallback(
+    (range: ListRange) => {
+      if (messageItems.length === 0) {
+        setActiveJumpTurn(null);
+        return;
+      }
+
+      let nextTurn: number | null = null;
+      const startIndex = Math.max(0, Math.min(range.startIndex, messageItems.length - 1));
+      for (let index = startIndex; index >= 0; index--) {
+        const message = messageItems[index];
+        if (message?.kind === "user") {
+          nextTurn = message.turn;
+          break;
+        }
+      }
+      if (nextTurn === null) {
+        for (let index = startIndex + 1; index <= range.endIndex; index++) {
+          const message = messageItems[index];
+          if (message?.kind === "user") {
+            nextTurn = message.turn;
+            break;
+          }
+        }
+      }
+      setActiveJumpTurn((current) => (current === nextTurn ? current : nextTurn));
+    },
+    [messageItems],
+  );
 
   const scrollToBottom = useCallback(
     (smooth = true) => {
@@ -2662,7 +2727,6 @@ function TabRuntime({
         ) : null}
 
         <main className="main" style={{ position: "relative" }}>
-          <JumpBar messages={state.messages} threadEl={threadRef.current} />
           {state.needsSetup ? (
             <NeedsSetupView
               workspaceDir={state.settings?.workspaceDir}
@@ -2686,7 +2750,8 @@ function TabRuntime({
                   setWdOpen(true);
                 }}
               />
-              <div className="thread" ref={threadRef}>
+              <div className="thread">
+                <JumpBar activeTurn={activeJumpTurn} items={jumpItems} onJump={handleJumpBarJump} />
                 {state.messages.length === 0 ? (
                   <div className="thread-inner thread-inner--standalone">
                     <EmptyState
@@ -2712,6 +2777,7 @@ function TabRuntime({
                     totalCount={messageItems.length}
                     alignToBottom
                     followOutput={followOutput}
+                    rangeChanged={handleThreadRangeChanged}
                     atBottomThreshold={THREAD_BOTTOM_THRESHOLD}
                     atBottomStateChange={handleAtBottomStateChange}
                     increaseViewportBy={{ top: 360, bottom: 720 }}
diff --git a/desktop/src/styles.css b/desktop/src/styles.css
index 0dc3ad568..c083f2e41 100644
--- a/desktop/src/styles.css
+++ b/desktop/src/styles.css
@@ -2068,14 +2068,21 @@ html:not([data-platform="macos"]) .shortcut kbd[data-key="mod"] {
 
 .jump-bar {
   position: absolute;
-  right: 13px;
+  right: 12px;
   top: 50%;
   transform: translateY(-50%);
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 0 12px;
+  padding: 6px 10px;
   z-index: 20;
+  opacity: 0.18;
+  transition: opacity 150ms ease, transform 150ms ease;
+}
+.thread:hover .jump-bar,
+.jump-bar:focus-within,
+.jump-bar:hover {
+  opacity: 0.9;
 }
 .jump-scroll {
   display: flex;
@@ -2083,7 +2090,7 @@ html:not([data-platform="macos"]) .shortcut kbd[data-key="mod"] {
   align-items: center;
   gap: 6px;
   padding: 8px 0;
-  max-height: 240px;
+  max-height: min(220px, calc(100vh - 360px));
   overflow-y: auto;
   scrollbar-width: none;
   -webkit-mask-image: linear-gradient(
@@ -2110,6 +2117,12 @@ html:not([data-platform="macos"]) .shortcut kbd[data-key="mod"] {
   background: transparent;
   cursor: pointer;
   flex-shrink: 0;
+  opacity: 0.78;
+  transition: opacity 120ms ease;
+}
+.jump-item:hover,
+.jump-item:focus-visible {
+  opacity: 1;
 }
 .jump-item:focus-visible {
   outline: 1px solid var(--accent);
diff --git a/desktop/src/ui/jump-bar.test.tsx b/desktop/src/ui/jump-bar.test.tsx
new file mode 100644
index 000000000..7ddff9b1e
--- /dev/null
+++ b/desktop/src/ui/jump-bar.test.tsx
@@ -0,0 +1,48 @@
+// @vitest-environment jsdom
+
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
+import { JumpBar, type JumpBarItem } from "./jump-bar";
+
+const items: JumpBarItem[] = [
+  { index: 0, turn: 1, text: "First question" },
+  { index: 2, turn: 2, text: "Second question" },
+  { index: 4, turn: 3, text: "Third question" },
+];
+
+beforeAll(() => {
+  HTMLElement.prototype.scrollIntoView = vi.fn();
+});
+
+afterEach(cleanup);
+
+describe("JumpBar", () => {
+  it("hides when there is only one user turn", () => {
+    const { container } = render(
+      <JumpBar activeTurn={1} items={items.slice(0, 1)} onJump={() => {}} />,
+    );
+
+    expect(container.querySelector(".jump-bar")).toBeNull();
+  });
+
+  it("calls onJump with the selected item", () => {
+    const onJump = vi.fn();
+    render(<JumpBar activeTurn={2} items={items} onJump={onJump} />);
+
+    fireEvent.click(screen.getByRole("button", { name: /Jump to turn 1/ }));
+
+    expect(onJump).toHaveBeenCalledTimes(1);
+    expect(onJump).toHaveBeenCalledWith(items[0]);
+  });
+
+  it("marks the active turn", () => {
+    render(<JumpBar activeTurn={2} items={items} onJump={() => {}} />);
+
+    const activeDot = screen
+      .getByRole("button", { name: /Jump to turn 2/ })
+      .querySelector(".jump-dot") as HTMLElement;
+
+    expect(activeDot.style.width).toBe("18px");
+    expect(activeDot.style.background).toBe("var(--accent)");
+  });
+});
diff --git a/desktop/src/ui/jump-bar.tsx b/desktop/src/ui/jump-bar.tsx
index 292e33a14..0b03dc8d2 100644
--- a/desktop/src/ui/jump-bar.tsx
+++ b/desktop/src/ui/jump-bar.tsx
@@ -1,37 +1,28 @@
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
+
+export interface JumpBarItem {
+  index: number;
+  turn: number;
+  text: string;
+}
 
 interface JumpBarProps {
-  messages: { kind: string; text?: string; turn?: number }[];
-  threadEl: HTMLElement | null;
+  activeTurn: number | null;
+  items: JumpBarItem[];
+  onJump: (item: JumpBarItem) => void;
 }
 
-export function JumpBar({ messages, threadEl }: JumpBarProps) {
+export function JumpBar({ activeTurn, items, onJump }: JumpBarProps) {
   const [hovered, setHovered] = useState<number | null>(null);
-  const [active, setActive] = useState<number | null>(null);
   const barRef = useRef<HTMLDivElement>(null);
   const previewTop = useRef(0);
   const [showPreview, setShowPreview] = useState(false);
 
-  const items = useMemo(
-    () =>
-      messages
-        .filter(
-          (m): m is { kind: "user"; text: string; turn: number } =>
-            m.kind === "user" && typeof m.text === "string" && typeof m.turn === "number",
-        )
-        .map((m) => ({ turn: m.turn, text: m.text.slice(0, 80) })),
-    [messages],
-  );
-
   useEffect(() => {
-    if (items.length > 0) setActive(items[items.length - 1]!.turn);
-  }, [items]);
-
-  useEffect(() => {
-    if (active === null) return;
-    const el = barRef.current?.querySelector(`[data-turn="${active}"]`);
+    if (activeTurn === null) return;
+    const el = barRef.current?.querySelector(`[data-turn="${activeTurn}"]`);
     el?.scrollIntoView({ block: "nearest" });
-  }, [active]);
+  }, [activeTurn]);
 
   if (items.length < 2) return null;
 
@@ -64,18 +55,11 @@ export function JumpBar({ messages, threadEl }: JumpBarProps) {
     }
   };
 
-  const scrollTo = (turn: number) => {
-    setActive(turn);
-    threadEl
-      ?.querySelector(`[data-turn="${turn}"]`)
-      ?.scrollIntoView({ behavior: "smooth", block: "start" });
-  };
-
   const dotProps = (
     idx: number,
     turn: number,
   ): { style: React.CSSProperties; "data-d"?: string } => {
-    const isActive = active === turn;
+    const isActive = activeTurn === turn;
     if (hoverIdx < 0) {
       return {
         style: { width: isActive ? 18 : 12, background: isActive ? "var(--accent)" : undefined },
@@ -107,8 +91,9 @@ export function JumpBar({ messages, threadEl }: JumpBarProps) {
             className="jump-item"
             key={item.turn}
             data-turn={item.turn}
-            onClick={() => scrollTo(item.turn)}
+            onClick={() => onJump(item)}
             title={item.text}
+            aria-label={`Jump to turn ${item.turn}: ${item.text}`}
           >
             <span className="jump-dot" {...dotProps(idx, item.turn)} />
           </button>

From 5e215abdcde3a3dd4a99582b9e76a9c3996a308c Mon Sep 17 00:00:00 2001
From: lab1 <liuxw96@foxmail.com>
Date: Sat, 30 May 2026 12:43:28 +0800
Subject: [PATCH 08/10] ci: add windows beta packaging path

---
 .github/workflows/release.yml | 47 +++++++++++++++++------------------
 1 file changed, 23 insertions(+), 24 deletions(-)

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 2df4c3503..62406f690 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -26,9 +26,6 @@ jobs:
         target:
           # macOS now ships two single-arch shards so Apple Silicon and Intel
           # users get separate DMGs. `rust` and `tauri` stay aligned per shard.
-          - { os: ubuntu-22.04, label: "linux-x64", rust: "x86_64-unknown-linux-gnu", tauri: "x86_64-unknown-linux-gnu" }
-          - { os: macos-15-intel, label: "macos-x64", rust: "x86_64-apple-darwin", tauri: "x86_64-apple-darwin" }
-          - { os: macos-14, label: "macos-arm64", rust: "aarch64-apple-darwin", tauri: "aarch64-apple-darwin" }
           - { os: windows-latest, label: "windows-x64", rust: "x86_64-pc-windows-msvc", tauri: "x86_64-pc-windows-msvc" }
     runs-on: ${{ matrix.target.os }}
     # secrets.* isn't accessible from step-level if:, so expose presence as a
@@ -116,27 +113,9 @@ jobs:
           test -f dist/index.html
           ls dist/assets/*.js >/dev/null
 
-      # tauri-action signs OS bundles whenever the corresponding env vars are
-      # defined — including when they're defined to the empty string, which is
-      # what `secrets.UNSET` evaluates to. Gate each signing block on its
-      # certificate being non-empty so unsigned prereleases don't trip
-      # `security import` / `signtool` on missing certs.
-      - name: Build Tauri bundle (unsigned)
-        if: >-
-          (matrix.target.os != 'windows-latest' || env.HAS_WIN_CERT != 'true')
-          && (!startsWith(matrix.target.os, 'macos-') || env.HAS_APPLE_CERT != 'true')
-        uses: tauri-apps/tauri-action@v0
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY }}
-          TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY_PASSWORD }}
-        with:
-          projectPath: desktop
-          tagName: ${{ steps.tag.outputs.name }}
-          releaseName: Reasonix ${{ steps.tag.outputs.name }}
-          releaseDraft: true
-          prerelease: false
-          args: --target ${{ matrix.target.tauri }}
+      - name: Build Tauri bundle (Windows, unsigned)
+        working-directory: desktop
+        run: npm run tauri -- build --target ${{ matrix.target.tauri }}
 
       - name: Build Tauri bundle (Windows, signed)
         if: matrix.target.os == 'windows-latest' && env.HAS_WIN_CERT == 'true'
@@ -155,6 +134,26 @@ jobs:
           prerelease: false
           args: --target ${{ matrix.target.tauri }}
 
+      - name: Upload Windows bundle artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: reasonix-windows-x64-${{ steps.tag.outputs.name }}
+          path: |
+            desktop/src-tauri/target/x86_64-pc-windows-msvc/release/bundle/msi/*.msi
+            desktop/src-tauri/target/x86_64-pc-windows-msvc/release/bundle/nsis/*.exe
+
+      - name: Upload Windows bundle to draft release
+        uses: softprops/action-gh-release@v2
+        with:
+          tag_name: ${{ steps.tag.outputs.name }}
+          name: Reasonix ${{ steps.tag.outputs.name }}
+          target_commitish: ${{ github.sha }}
+          draft: true
+          prerelease: true
+          files: |
+            desktop/src-tauri/target/x86_64-pc-windows-msvc/release/bundle/msi/*.msi
+            desktop/src-tauri/target/x86_64-pc-windows-msvc/release/bundle/nsis/*.exe
+
       - name: Build Tauri bundle (macOS, signed + notarized)
         if: startsWith(matrix.target.os, 'macos-') && env.HAS_APPLE_CERT == 'true'
         uses: tauri-apps/tauri-action@v0

From 2ebd147f55b235f1fd8dd842b0b9c7422df1e96e Mon Sep 17 00:00:00 2001
From: lab1 <liuxw96@foxmail.com>
Date: Sat, 30 May 2026 12:54:48 +0800
Subject: [PATCH 09/10] ci: disable updater artifacts for unsigned windows beta

---
 .github/workflows/release.yml | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 62406f690..3326d452a 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -113,6 +113,11 @@ jobs:
           test -f dist/index.html
           ls dist/assets/*.js >/dev/null
 
+      - name: Disable updater artifacts for unsigned Windows beta
+        shell: bash
+        run: |
+          node -e "const fs=require('fs'); const p='desktop/src-tauri/tauri.conf.json'; const c=JSON.parse(fs.readFileSync(p,'utf8')); c.bundle.createUpdaterArtifacts=false; fs.writeFileSync(p, JSON.stringify(c, null, 2) + '\n');"
+
       - name: Build Tauri bundle (Windows, unsigned)
         working-directory: desktop
         run: npm run tauri -- build --target ${{ matrix.target.tauri }}

From e1b6b064e07f0d8128324ae2f96d57c1a98a0ad9 Mon Sep 17 00:00:00 2001
From: lab1 <liuxw96@foxmail.com>
Date: Sat, 30 May 2026 13:43:18 +0800
Subject: [PATCH 10/10] fix(desktop): remove mention token with closed chip

---
 desktop/src/ui/composer-at-popup.test.tsx | 92 +++++++++++++++++++++++
 desktop/src/ui/composer.tsx               | 29 ++++++-
 2 files changed, 117 insertions(+), 4 deletions(-)

diff --git a/desktop/src/ui/composer-at-popup.test.tsx b/desktop/src/ui/composer-at-popup.test.tsx
index 7a05fe89f..6ee517d71 100644
--- a/desktop/src/ui/composer-at-popup.test.tsx
+++ b/desktop/src/ui/composer-at-popup.test.tsx
@@ -253,4 +253,96 @@ describe("desktop Composer @ popup", () => {
     expect(typeof draftUpdate).toBe("function");
     expect((draftUpdate as (current: string) => string)("@foo")).toBe("@src/very/deep/foo.ts ");
   });
+
+  it("removes the matching @ token when closing a picked mention chip", async () => {
+    const setDraft = vi.fn();
+    const { container, rerender, onMentionQuery } = renderComposer({
+      draft: "",
+      setDraft,
+    });
+    const textarea = container.querySelector("textarea");
+    if (!textarea) throw new Error("missing textarea");
+
+    fireEvent.change(textarea, {
+      target: {
+        value: "inspect @foo before send",
+        selectionStart: "inspect @foo".length,
+        selectionEnd: "inspect @foo".length,
+      },
+    });
+    await waitFor(() => expect(onMentionQuery).toHaveBeenCalled());
+    const nonce = onMentionQuery.mock.calls[0]?.[1] as number;
+
+    rerender(
+      <Composer
+        draft="inspect @foo before send"
+        setDraft={setDraft}
+        onSend={vi.fn()}
+        onAbort={vi.fn()}
+        disabled={false}
+        busy={false}
+        modelLabel="deepseek-v4-flash"
+        reasoningEffort="high"
+        onModelChange={vi.fn()}
+        onEffortChange={vi.fn()}
+        editMode="review"
+        onEditModeChange={vi.fn()}
+        textareaRef={createRef<HTMLTextAreaElement>()}
+        slashCommands={[]}
+        onMentionQuery={onMentionQuery}
+        onMentionPreview={vi.fn()}
+        onMentionPicked={vi.fn()}
+        mentionResults={{ nonce, query: "foo", results: ["src/very/deep/foo.ts"] }}
+        workspaceDir="/repo"
+      />,
+    );
+
+    const row = await waitFor(() => {
+      const item = container.querySelector(".popup-item");
+      expect(item).not.toBeNull();
+      return item as HTMLElement;
+    });
+
+    fireEvent.click(row);
+    const pickDraftUpdate = setDraft.mock.calls.at(-1)?.[0];
+    expect(typeof pickDraftUpdate).toBe("function");
+    const pickedDraft = (pickDraftUpdate as (current: string) => string)(
+      "inspect @foo before send",
+    );
+    expect(pickedDraft).toBe("inspect @src/very/deep/foo.ts before send");
+
+    rerender(
+      <Composer
+        draft={pickedDraft}
+        setDraft={setDraft}
+        onSend={vi.fn()}
+        onAbort={vi.fn()}
+        disabled={false}
+        busy={false}
+        modelLabel="deepseek-v4-flash"
+        reasoningEffort="high"
+        onModelChange={vi.fn()}
+        onEffortChange={vi.fn()}
+        editMode="review"
+        onEditModeChange={vi.fn()}
+        textareaRef={createRef<HTMLTextAreaElement>()}
+        slashCommands={[]}
+        onMentionQuery={onMentionQuery}
+        onMentionPreview={vi.fn()}
+        onMentionPicked={vi.fn()}
+        mentionResults={null}
+        workspaceDir="/repo"
+      />,
+    );
+
+    const close = container.querySelector(".composer-tags .x");
+    expect(close).not.toBeNull();
+    fireEvent.click(close!);
+
+    const closeDraftUpdate = setDraft.mock.calls.at(-1)?.[0];
+    expect(typeof closeDraftUpdate).toBe("function");
+    expect((closeDraftUpdate as (current: string) => string)(pickedDraft)).toBe(
+      "inspect before send",
+    );
+  });
 });
diff --git a/desktop/src/ui/composer.tsx b/desktop/src/ui/composer.tsx
index f260fa102..886c5a3e5 100644
--- a/desktop/src/ui/composer.tsx
+++ b/desktop/src/ui/composer.tsx
@@ -79,6 +79,10 @@ export type MentionItem = {
 
 export type Chip = { kind: "at"; label: string } | { kind: "slash"; label: string };
 
+function escapeRegExp(value: string): string {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
 /** For long paths show only the filename; truncate filename if it's still too long. */
 function chipLabel(label: string, maxLen = 32): string {
   if (label.length <= maxLen) return label;
@@ -132,6 +136,20 @@ function highlightTokens(text: string): React.ReactNode {
   return parts.length > 0 ? parts : text;
 }
 
+function removeAtTokenFromDraft(text: string, label: string): string {
+  const re = new RegExp(`(^|\\s+)@${escapeRegExp(label)}(\\s+|$)`, "g");
+  let next = text;
+  let prev = "";
+  while (next !== prev) {
+    prev = next;
+    next = next.replace(re, (_match, leading: string, trailing: string) => {
+      if (!leading || !trailing) return "";
+      return " ";
+    });
+  }
+  return next;
+}
+
 function slashIcon(cmd: string) {
   const m: Record<string, React.ReactNode> = {
     "/clear": <I.x size={12} />,
@@ -258,7 +276,7 @@ export function Composer({
     const result: Chip[] = [];
     for (const [label, kind] of pickedChips) {
       const sigil = kind === "at" ? "@" : "/";
-      const escaped = sigil + label.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+      const escaped = sigil + escapeRegExp(label);
       const re = new RegExp(`(?:^|\\s)${escaped}(?:\\s|$)`);
       if (re.test(draft)) {
         result.push({ kind, label });
@@ -737,13 +755,16 @@ export function Composer({
                   <button
                     type="button"
                     className="x"
-                    onClick={() =>
+                    onClick={() => {
                       setPickedChips((prev) => {
                         const next = new Map(prev);
                         next.delete(row.chip.label);
                         return next;
-                      })
-                    }
+                      });
+                      if (row.chip.kind === "at") {
+                        setDraft((current) => removeAtTokenFromDraft(current, row.chip.label));
+                      }
+                    }}
                     title={t("composer.close")}
                     aria-label={t("composer.close")}
                   >