diff --git "a/piweb/hf-design.patch" "b/piweb/hf-design.patch"
--- "a/piweb/hf-design.patch"
+++ "b/piweb/hf-design.patch"
@@ -1,8 +1,16 @@
 diff --git a/AGENTS.md b/AGENTS.md
-index a5c8983..e9a1459 100644
+index a5c8983..0f7f118 100644
 --- a/AGENTS.md
 +++ b/AGENTS.md
-@@ -174,7 +174,8 @@ lib/
+@@ -138,6 +138,7 @@ lib/
+   extension-ui-queue.ts     FIFO queues for extension dialogs and custom panels, by request id; isBlockingExtensionUiRequest() (which method a run waits on)
+   markdown.ts               shared markdown helpers
+   markdown-blocks.ts        splitMarkdownBlocks(): where a streaming reply may be cut into blocks parsed apart
++  step-summary.ts           a turn's steps counted by kind (ran, read, edited, …) for their one summary line above the answer
+   highlight-queue.ts        code fences past a task's highlight budget get their colors in idle slices
+   prism-languages.ts        loadPrismLanguages(): every Prism language in a chunk of its own, loaded when a highlighter first needs it
+   gfm-autolink-email-loader.cjs  bundler loader: remark-gfm's email regex without a lookbehind literal
+@@ -174,7 +175,8 @@ lib/
  components/
    AppShell.tsx             layout, URL state, tab management
    SessionSidebar.tsx       toolbar row (Sessions | Files tabs, or the Pi Web brand with the files below them; new, search): tree, archive, menus, toast; files section (resizable, foldable; one header row with the file keys and changed-files count, the picker's row) or tab (picker boxes + file buttons), FileExplorer
@@ -12,7 +20,7 @@ index a5c8983..e9a1459 100644
    SessionTree.tsx          virtualized rows of the session tree and the archive view
    SidebarMenu.tsx          sidebar popup menu (bottom sheet on phones), portaled to body: filter field, item secondary actions, the files tab's classic look
    ProjectWorktreePicker.tsx project and worktree boxes + menus: the files' (one row below the sessions, stacked in the tab) and the new-session bar's
-@@ -274,3 +275,14 @@ Location: `~/.pi/agent/sessions/<encoded-cwd>/<timestamp>_<uuid>.jsonl`
+@@ -274,3 +276,20 @@ Location: `~/.pi/agent/sessions/<encoded-cwd>/<timestamp>_<uuid>.jsonl`
  --accent --user-bg --tool-bg
  --font-mono
  ```
@@ -27,6 +35,12 @@ index a5c8983..e9a1459 100644
 +
 +Its light and dark values are written by the design system's `design/build.py` between
 +`tokens:begin` and `tokens:end`; `--border` is transparent (fills tell surfaces apart).
++The same block defines the scales components use instead of literals: `--radius-xs` … `--radius-xl`
++(4, 6, 8, 10, 12px), `--size-control-lg` / `-control` / `-control-sm` / `-control-xs` (36, 32, 28,
++24px, Claude Desktop's button heights), `--size-row`, `--size-bar` and `--space-*`. Buttons are the
++`.ui-btn` classes in `app/globals.css` (`--sm`, `--xs`, `--lg`, `--icon`, `--primary`, …); the
++transcript's pieces (`.turn-user`, `.turn-reply`, `.steps-summary`, `.tool-call-row`, `.composer`)
++are styled there too.
 diff --git a/app/favicon.ico b/app/favicon.ico
 index 2da6b7dc00c64c59ef23cff153a6051478ad9315..b407f41443e3e94f4204a1862227e0d457f7d823 100644
 GIT binary patch
@@ -3066,10 +3080,10 @@ index 0000000..8d003fe
 +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
 +OTHER DEALINGS IN THE FONT SOFTWARE.
 diff --git a/app/globals.css b/app/globals.css
-index d6b5535..401412e 100644
+index d6b5535..69eff6c 100644
 --- a/app/globals.css
 +++ b/app/globals.css
-@@ -24,46 +24,80 @@
+@@ -24,46 +24,107 @@
    --font-mono-font: var(--font-mono);
  }
  
@@ -3170,15 +3184,42 @@ index d6b5535..401412e 100644
 +  --border: transparent;
 +  --shadow-pop: 0 12px 36px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4);
 +}
++
++:root {
++  --space-0\.5: 2px;
++  --space-1: 4px;
++  --space-1\.5: 6px;
++  --space-2: 8px;
++  --space-3: 12px;
++  --space-4: 16px;
++  --space-5: 20px;
++  --space-6: 24px;
++  --space-8: 32px;
++  --space-12: 48px;
++  --radius-xs: 4px;
++  --radius-sm: 6px;
++  --radius-md: 8px;
++  --radius-lg: 10px;
++  --radius-xl: 12px;
++  --radius-full: 999px;
++  --size-bar: 36px;
++  --size-row: 28px;
++  --size-control-lg: 36px;
++  --size-control: 32px;
++  --size-control-sm: 28px;
++  --size-control-xs: 24px;
++  --size-sidebar: 260px;
++  --size-content: 720px;
++}
 +/* tokens:end */
 +
 +:root {
-+  --chat-content-max-width: 820px;
++  --chat-content-max-width: 720px;
 +  --chat-content-font-size: 14px;
  }
  
  [data-theme="mist"] {
-@@ -72,7 +106,7 @@ html.dark,
+@@ -72,7 +133,7 @@ html.dark,
    --bg-panel: #e9f0ee;
    --bg-hover: #e0eae7;
    --bg-selected: #d7e4df;
@@ -3187,7 +3228,7 @@ index d6b5535..401412e 100644
    --text: #202e2b;
    --text-muted: #455f56;
    --text-dim: #52685f;
-@@ -83,6 +117,18 @@ html.dark,
+@@ -83,6 +144,18 @@ html.dark,
    --assistant-bg: #f4f8f7;
    --tool-bg: #ecf3f0;
    --bg-subtle: rgba(24,65,50,0.04);
@@ -3206,7 +3247,7 @@ index d6b5535..401412e 100644
  }
  
  [data-theme="rose"] {
-@@ -91,7 +137,7 @@ html.dark,
+@@ -91,7 +164,7 @@ html.dark,
    --bg-panel: #f3edef;
    --bg-hover: #eee3e7;
    --bg-selected: #e8dce1;
@@ -3215,7 +3256,7 @@ index d6b5535..401412e 100644
    --text: #34282e;
    --text-muted: #65505a;
    --text-dim: #705b65;
-@@ -102,6 +148,18 @@ html.dark,
+@@ -102,6 +175,18 @@ html.dark,
    --assistant-bg: #fcf7f8;
    --tool-bg: #f7eef2;
    --bg-subtle: rgba(89,39,62,0.04);
@@ -3234,7 +3275,7 @@ index d6b5535..401412e 100644
  }
  
  html[data-theme="pine"],
-@@ -111,7 +169,7 @@ html[data-theme="pine"],
+@@ -111,7 +196,7 @@ html[data-theme="pine"],
    --bg-panel: #212b28;
    --bg-hover: #2b3632;
    --bg-selected: #35433c;
@@ -3243,7 +3284,7 @@ index d6b5535..401412e 100644
    --text: #e6ede8;
    --text-muted: #c3d0c6;
    --text-dim: #afc2b5;
-@@ -122,6 +180,18 @@ html[data-theme="pine"],
+@@ -122,6 +207,18 @@ html[data-theme="pine"],
    --assistant-bg: #19201f;
    --tool-bg: #222d29;
    --bg-subtle: rgba(210,236,219,0.04);
@@ -3262,7 +3303,7 @@ index d6b5535..401412e 100644
  }
  
  /* WebKit reports dvh/innerHeight without the status-bar strip for installed
-@@ -135,28 +205,12 @@ html[data-theme="pine"],
+@@ -135,28 +232,12 @@ html[data-theme="pine"],
    }
  }
  
@@ -3295,7 +3336,7 @@ index d6b5535..401412e 100644
  }
  
  /* Theme toggle: circular wipe via View Transitions API.
-@@ -218,9 +272,9 @@ body {
+@@ -218,9 +299,9 @@ body {
    margin-bottom: 22px;
  }
  
@@ -3307,7 +3348,52 @@ index d6b5535..401412e 100644
  }
  
  .web-login-brand h1 {
-@@ -703,9 +757,9 @@ button.extension-widget-trigger:focus-visible {
+@@ -247,7 +328,7 @@ body {
+   min-width: 0;
+   padding: 10px 10px 10px 14px;
+   border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
+-  border-radius: 14px;
++  border-radius: var(--radius-xl);
+   background: var(--bg);
+   box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.10);
+   transition: border-color 0.15s, box-shadow 0.15s;
+@@ -307,7 +388,7 @@ html.dark .web-login-error {
+   min-height: 32px;
+   padding: 7px 14px;
+   border: none;
+-  border-radius: 8px;
++  border-radius: var(--radius-md);
+   background: var(--accent);
+   color: var(--accent-contrast);
+   cursor: pointer;
+@@ -388,7 +469,7 @@ html.dark .web-login-error {
+   flex-shrink: 0;
+   padding: 0 8px;
+   border: 1px solid #343a46;
+-  border-radius: 5px;
++  border-radius: var(--radius-sm);
+   background: transparent;
+   color: #9ca3af;
+   cursor: pointer;
+@@ -502,7 +583,7 @@ html[data-keyboard-open] .terminal-extra-keys {
+   background-color: color-mix(in srgb, var(--text-dim) 45%, transparent);
+   background-clip: padding-box;
+   border: 2px solid transparent;
+-  border-radius: 5px;
++  border-radius: var(--radius-sm);
+ }
+ /* Only ever set background-color here: the `background` shorthand resets
+    background-clip and would snap the thumb to the full 10px on hover. */
+@@ -538,7 +619,7 @@ html[data-keyboard-open] .terminal-extra-keys {
+   }
+   ::-webkit-scrollbar-thumb {
+     border-width: 1px;
+-    border-radius: 3px;
++    border-radius: var(--radius-xs);
+   }
+ }
+ 
+@@ -703,9 +784,9 @@ button.extension-widget-trigger:focus-visible {
  
  .extension-widget-placement-icon {
    display: block;
@@ -3320,7 +3406,7 @@ index d6b5535..401412e 100644
    fill: currentColor;
  }
  
-@@ -826,8 +880,8 @@ button.extension-widget-trigger:focus-visible {
+@@ -826,8 +907,8 @@ button.extension-widget-trigger:focus-visible {
  }
  
  :root {
@@ -3331,12 +3417,32 @@ index d6b5535..401412e 100644
    --font-ui: var(--font-ui-default);
    --font-mono: var(--font-mono-default);
    --font-ui-weight: 400;
-@@ -908,12 +962,11 @@ pre, code {
+@@ -883,11 +964,11 @@ pre, code {
+ .markdown-body ol > li { list-style-type: decimal; }
+ .markdown-body li > p { margin: 0; }
+ .markdown-body li::marker {
+-  color: color-mix(in srgb, var(--accent) 72%, var(--text-muted));
+-  font-weight: 600;
++  color: var(--text-dim);
++  font-weight: 500;
+ }
+ .markdown-body strong {
+-  color: color-mix(in srgb, var(--text) 88%, var(--accent));
++  color: var(--text-strong);
+   font-weight: 700;
+ }
+ .markdown-body em { color: var(--text-muted); }
+@@ -904,16 +985,15 @@ pre, code {
+   max-width: 100%;
+   height: auto;
+   margin: 8px 0;
+-  border-radius: 6px;
++  border-radius: var(--radius-sm);
  }
  .markdown-body .markdown-inline-code {
    background: var(--bg-subtle);
 -  border-radius: 5px;
-+  border-radius: 4px;
++  border-radius: var(--radius-xs);
    padding: 1px 5px;
    color: var(--text);
    font-family: var(--font-mono);
@@ -3345,24 +3451,42 @@ index d6b5535..401412e 100644
  }
  .markdown-body .contains-task-list {
    padding-left: 0;
-@@ -967,8 +1020,8 @@ pre, code {
+@@ -935,7 +1015,7 @@ pre, code {
+   height: 14px;
+   margin: 0;
+   border: 1px solid var(--border);
+-  border-radius: 4px;
++  border-radius: var(--radius-xs);
+   background: var(--bg);
+   display: inline-grid;
+   place-content: center;
+@@ -967,8 +1047,8 @@ pre, code {
    margin: 8px 0;
    overflow-x: auto;
    overflow-y: hidden;
 -  border: 1px solid var(--border);
 -  border-radius: 7px;
-+  border-radius: 10px;
++  border-radius: var(--radius-lg);
 +  background: var(--bg-surface);
  }
  .markdown-body table {
    border-collapse: separate;
-@@ -1108,16 +1161,13 @@ pre, code {
+@@ -1088,7 +1168,7 @@ pre, code {
+   padding: 7px 8px;
+   overflow: auto;
+   border: 1px solid var(--border);
+-  border-radius: 6px;
++  border-radius: var(--radius-sm);
+   background: var(--bg-panel);
+   font-family: var(--font-mono);
+   font-size: 11px;
+@@ -1108,16 +1188,13 @@ pre, code {
    min-width: 0;
    max-width: 100%;
    margin: 6px 0;
 -  border: 1px solid var(--border);
 -  border-radius: 7px;
-+  border-radius: 10px;
++  border-radius: var(--radius-lg);
    overflow: hidden;
 -  background: var(--bg);
 -  box-shadow: 0 1px 0 color-mix(in srgb, var(--border) 42%, transparent);
@@ -3376,7 +3500,70 @@ index d6b5535..401412e 100644
    color: var(--text-dim);
    font-size: 11px;
    display: flex;
-@@ -1503,12 +1553,11 @@ pre, code {
+@@ -1137,7 +1214,7 @@ pre, code {
+ }
+ .markdown-code-action {
+   border: 1px solid var(--border);
+-  border-radius: 5px;
++  border-radius: var(--radius-sm);
+   padding: 2px 7px;
+   background: var(--bg);
+   color: var(--text-muted);
+@@ -1228,7 +1305,7 @@ pre, code {
+   max-width: 100%;
+   max-height: 100%;
+   object-fit: contain;
+-  border-radius: 8px;
++  border-radius: var(--radius-md);
+   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
+ }
+ 
+@@ -1244,7 +1321,7 @@ pre, code {
+   height: 36px;
+   padding: 0;
+   border: 1px solid var(--border);
+-  border-radius: 6px;
++  border-radius: var(--radius-sm);
+   background: var(--bg-panel);
+   color: var(--text-muted);
+   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
+@@ -1320,7 +1397,7 @@ pre, code {
+   height: 24px;
+   overflow: hidden;
+   border: 1px solid var(--border);
+-  border-radius: 5px;
++  border-radius: var(--radius-sm);
+   background: var(--bg);
+ }
+ .mermaid-zoom-stepper button,
+@@ -1347,7 +1424,7 @@ pre, code {
+ .mermaid-zoom-icon-button {
+   flex: 0 0 24px;
+   border: 1px solid var(--border);
+-  border-radius: 5px;
++  border-radius: var(--radius-sm);
+ }
+ .mermaid-zoom-stepper button:hover:not(:disabled),
+ .mermaid-zoom-icon-button:hover {
+@@ -1384,7 +1461,7 @@ pre, code {
+ .mermaid-zoom-canvas {
+   padding: 12px;
+   border: 1px solid var(--border);
+-  border-radius: 7px;
++  border-radius: var(--radius-sm);
+   background: var(--bg-panel);
+   margin: 0 auto;
+   transition: width 0.15s ease;
+@@ -1460,7 +1537,7 @@ pre, code {
+   height: 24px;
+   overflow: hidden;
+   border: 1px solid var(--border);
+-  border-radius: 5px;
++  border-radius: var(--radius-sm);
+ }
+ 
+ .file-viewer-mode-button {
+@@ -1503,12 +1580,11 @@ pre, code {
    height: 32px;
    padding: 0;
    box-sizing: border-box;
@@ -3391,7 +3578,7 @@ index d6b5535..401412e 100644
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
-@@ -1584,22 +1633,21 @@ pre, code {
+@@ -1584,22 +1660,21 @@ pre, code {
  
  .new-session-logo {
    flex: none;
@@ -3420,7 +3607,7 @@ index d6b5535..401412e 100644
    line-height: 1.15;
    white-space: nowrap;
  }
-@@ -1613,7 +1661,8 @@ pre, code {
+@@ -1613,7 +1688,8 @@ pre, code {
    gap: 6px;
    min-width: 0;
    color: var(--text-dim);
@@ -3430,7 +3617,16 @@ index d6b5535..401412e 100644
    line-height: 1.4;
    white-space: nowrap;
  }
-@@ -1652,7 +1701,7 @@ pre, code {
+@@ -1638,7 +1714,7 @@ pre, code {
+   gap: 3px;
+   margin: -3px -4px;
+   padding: 3px 4px;
+-  border-radius: 5px;
++  border-radius: var(--radius-sm);
+   color: var(--accent);
+   font-weight: 600;
+   text-decoration: none;
+@@ -1652,7 +1728,7 @@ pre, code {
  
  /* The ring inside the box, clear of the "→" and "·" beside it. */
  .new-session-update:focus-visible {
@@ -3439,7 +3635,7 @@ index d6b5535..401412e 100644
    outline-offset: -2px;
  }
  
-@@ -1678,12 +1727,12 @@ pre, code {
+@@ -1678,12 +1754,12 @@ pre, code {
    }
  
    .new-session-logo {
@@ -3455,13 +3651,14 @@ index d6b5535..401412e 100644
    }
  }
  
-@@ -1722,14 +1771,14 @@ pre, code {
+@@ -1722,14 +1798,14 @@ pre, code {
    min-width: 0;
    height: 29px;
    padding: 0 10px;
 -  border: 1px solid var(--border);
-   border-radius: 7px;
+-  border-radius: 7px;
 -  background: var(--bg-hover);
++  border-radius: var(--radius-sm);
 +  background: var(--bg-subtle);
    color: var(--text-muted);
    font: inherit;
@@ -3472,7 +3669,16 @@ index d6b5535..401412e 100644
  }
  
  /* Above a fresh composer (inline): no box until hovered or open, 12px, the
-@@ -1781,8 +1830,9 @@ pre, code {
+@@ -1752,7 +1828,7 @@ pre, code {
+   height: 26px;
+   padding: 0 6px;
+   border: 0;
+-  border-radius: 6px;
++  border-radius: var(--radius-sm);
+   background: transparent;
+ }
+ 
+@@ -1781,8 +1857,9 @@ pre, code {
    max-width: 28ch;
    overflow: hidden;
    color: var(--text-dim);
@@ -3483,7 +3689,7 @@ index d6b5535..401412e 100644
  }
  
  .project-picker-parent {
-@@ -1851,7 +1901,8 @@ pre, code {
+@@ -1851,7 +1928,8 @@ pre, code {
     path's color and code type, cut at its end. */
  .project-picker-label.is-alias {
    color: var(--text);
@@ -3493,7 +3699,7 @@ index d6b5535..401412e 100644
  }
  
  /* A path or a branch, cut at its left (rtl), the text itself kept left to
-@@ -1901,7 +1952,8 @@ pre, code {
+@@ -1901,7 +1979,8 @@ pre, code {
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    background: color-mix(in srgb, var(--accent) 6%, transparent);
    color: var(--text-dim);
@@ -3503,30 +3709,391 @@ index d6b5535..401412e 100644
  }
  
  /* No worktree list here (the files tab): a box that says why, and does nothing. */
-@@ -2474,3 +2526,103 @@ span.token.table {
+@@ -1978,7 +2057,7 @@ pre, code {
+   box-sizing: border-box;
+   flex: 0 0 24px;
+   border: 1px solid var(--border);
+-  border-radius: 5px;
++  border-radius: var(--radius-sm);
+   background: transparent;
+   color: var(--text-muted);
+   cursor: pointer;
+@@ -2037,7 +2116,7 @@ pre, code {
+ .markdown-file-preview pre {
+   background: var(--bg-panel);
+   border: 1px solid var(--border);
+-  border-radius: 6px;
++  border-radius: var(--radius-sm);
+   padding: 12px 16px;
+   overflow-x: auto;
+   font-family: var(--font-mono);
+@@ -2049,7 +2128,7 @@ pre, code {
+   font-size: 0.9em;
+   background: var(--bg-panel);
+   padding: 1px 5px;
+-  border-radius: 3px;
++  border-radius: var(--radius-xs);
+ }
+ .markdown-file-preview pre code {
+   background: none;
+@@ -2061,7 +2140,7 @@ pre, code {
+   margin-bottom: 20px;
+   padding: 14px 16px 12px;
+   border: 1px solid var(--border);
+-  border-radius: 8px;
++  border-radius: var(--radius-md);
+   background: var(--bg-panel);
+ }
+ .markdown-frontmatter-title {
+@@ -2474,3 +2553,428 @@ span.token.table {
      display: none !important;
    }
  }
 +
-+/* A tool call in the transcript (MessageView ToolCallView): one 24px line
-+   with no outline until it is opened, as Traces and HuggingChat show them; a
-+   fill once open, a red tint when the call failed. */
-+.tool-call {
-+  border-radius: 8px;
-+  transition: background 0.12s;
++/* ---------------------------------------------------------------- buttons
++   Measured on Claude Desktop's: a 32px button with 12px sides and 6px corners
++   (.ui-btn), 28px in toolbars and the composer (--sm), 24px under messages and
++   inside rows (--xs), 36px with 8px corners for a page's one main action
++   (--lg). Ghost by default: no fill until hovered; pressed, it gives a little. */
++.ui-btn {
++  display: inline-flex;
++  flex-shrink: 0;
++  align-items: center;
++  justify-content: center;
++  gap: 6px;
++  height: var(--size-control);
++  min-width: 0;
++  padding: 0 12px;
++  border: 0;
++  border-radius: var(--radius-sm);
++  background: transparent;
++  color: var(--text-muted);
++  font: inherit;
++  font-size: 13px;
++  font-weight: 500;
++  line-height: 1;
++  white-space: nowrap;
++  cursor: pointer;
++  transition: background-color 0.12s, color 0.12s, opacity 0.12s, transform 0.1s;
 +}
-+
-+.tool-call:not(.is-open):not(.is-error):hover {
++.ui-btn:not(:disabled):hover,
++.ui-btn[aria-expanded="true"] {
 +  background: var(--bg-hover);
++  color: var(--text-strong);
 +}
++.ui-btn:not(:disabled):active { transform: scale(0.97); }
++.ui-btn:disabled { cursor: not-allowed; opacity: 0.45; }
++.ui-btn > svg { flex: none; }
++.ui-btn .ui-btn-chevron { margin-left: -2px; color: var(--text-dim); }
++.ui-btn--lg { height: var(--size-control-lg); padding: 0 16px; border-radius: var(--radius-md); font-size: 14px; }
++.ui-btn--sm { height: var(--size-control-sm); padding: 0 8px; gap: 5px; }
++.ui-btn--xs { height: var(--size-control-xs); padding: 0 6px; gap: 4px; font-size: 12px; }
++.ui-btn--icon { width: var(--size-control); padding: 0; }
++.ui-btn--icon.ui-btn--sm { width: var(--size-control-sm); }
++.ui-btn--icon.ui-btn--xs { width: var(--size-control-xs); }
++.ui-btn--primary { background: var(--primary); color: var(--primary-contrast); }
++.ui-btn--primary:not(:disabled):hover { background: var(--primary); color: var(--primary-contrast); opacity: 0.86; }
++.ui-btn--secondary { background: var(--bg-subtle); color: var(--text-strong); }
++.ui-btn--secondary:not(:disabled):hover { background: var(--bg-selected); }
++.ui-btn--danger { background: var(--danger-soft); color: var(--danger); }
++.ui-btn--danger:not(:disabled):hover { background: color-mix(in srgb, var(--danger) 22%, transparent); color: var(--danger); }
++.ui-btn[data-active] { color: var(--accent); }
++.ui-btn[aria-pressed="true"] { background: var(--bg-selected); color: var(--text-strong); }
++.ui-btn[data-off] { color: var(--text-dim); }
++/* Send: a quiet square until there is something to send, then ink. */
++.ui-btn--send { background: var(--bg-selected); color: var(--text-dim); opacity: 1; }
++.ui-btn--send:disabled { opacity: 1; }
++.ui-btn--send[data-ready] { background: var(--primary); color: var(--primary-contrast); }
++.ui-btn--send[data-ready]:not(:disabled):hover { background: var(--primary); color: var(--primary-contrast); opacity: 0.86; }
++/* Steer and Follow-up while the agent runs: a tint says where the message goes. */
++.ui-btn--tint[data-tint="steer"] { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--warning); }
++.ui-btn--tint[data-tint="follow-up"] { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
++.ui-btn--tint:not(:disabled):hover { filter: brightness(1.12); }
++.ui-btn--tint:disabled { background: var(--bg-subtle); color: var(--text-dim); }
 +
-+.tool-call.is-open {
++/* ---------------------------------------------------------------- session header
++   The conversation's top bar leads with the session's title (Claude Desktop's
++   header); its actions are 28px icon buttons on the right. */
++.session-header-title {
++  flex: 1 1 auto;
++  min-width: 0;
++  padding: 0 10px 0 12px;
++  overflow: hidden;
++  color: var(--text-strong);
++  font-size: 13px;
++  font-weight: 500;
++  white-space: nowrap;
++  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
++  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
++}
++.session-header-title.is-new { color: var(--text-muted); font-weight: 400; }
++
++/* ---------------------------------------------------------------- composer
++   One filled box, as in Claude: the draft on top, the toolbar inside it (attach
++   and model on the left; reasoning, tools, compact, sound, then Send). No
++   outline; 12px corners. */
++.composer {
++  display: flex;
++  flex-direction: column;
++  gap: 6px;
++  min-width: 0;
++  padding: 10px 8px 8px 14px;
++  border-radius: var(--radius-xl);
 +  background: var(--bg-surface);
++  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
++  transition: background 0.15s;
++}
++.composer .chat-input-textarea { padding: 0 6px 0 0; }
++.composer-toolbar {
++  display: flex;
++  align-items: center;
++  gap: 4px;
++  min-width: 0;
++  margin-left: -6px;
++}
++.composer-toolbar > .chat-input-controls {
++  flex: 1 1 auto;
++  min-width: 0;
++  align-items: center;
++  gap: 2px;
++}
++.composer-send {
++  display: flex;
++  flex: none;
++  align-items: center;
++  gap: 4px;
++}
++@media (max-width: 640px) {
++  .composer { padding: 8px 6px 6px 12px; }
 +}
 +
-+.tool-call.is-error {
-+  background: var(--danger-soft);
++/* ---------------------------------------------------------------- transcript
++   Claude Desktop's hierarchy: the person's prompt in a small filled bubble on
++   the right; the agent's reply as plain text with no label or container; what
++   the agent did on the way (its steps) folded into one summary line above the
++   reply; the reply's actions in one quiet row under it. */
++.turn-user {
++  display: flex;
++  flex-direction: column;
++  align-items: flex-end;
++  gap: 2px;
++  margin: 0 0 6px;
++}
++.user-bubble {
++  min-width: 0;
++  max-width: min(85%, 640px);
++  padding: 6px 12px;
++  border-radius: var(--radius-md);
++  background: var(--user-bg);
++  color: var(--text-strong);
++  font-size: calc(14px + var(--chat-font-size-offset, 0px));
++  line-height: 1.6;
++  overflow-wrap: anywhere;
++  overflow-y: auto;
++}
++.user-bubble.is-editing {
++  background: color-mix(in srgb, var(--accent) 14%, var(--user-bg));
++  box-shadow: 0 0 0 2px var(--focus-ring);
++}
++/* The actions under a message: icon buttons that show on hover or focus. */
++.message-actions {
++  display: flex;
++  align-items: center;
++  gap: 0;
++  min-height: var(--size-control-xs);
++}
++.message-actions .ui-btn { color: var(--text-dim); }
++.message-actions .ui-btn:not(:disabled):hover { color: var(--text-strong); }
++.message-actions .ui-btn[data-done] { color: var(--success); }
++.message-actions .ui-btn[data-busy] { color: var(--accent); }
++.message-actions-reveal {
++  display: flex;
++  align-items: center;
++  opacity: 0;
++  transition: opacity 0.12s;
 +}
++:is(.turn-user, .turn-reply):is(:hover, :focus-within) .message-actions-reveal,
++.message-actions-reveal.is-pinned { opacity: 1; }
++.message-meta {
++  padding: 0 6px;
++  color: var(--text-dim);
++  font-size: 11px;
++  font-variant-numeric: tabular-nums;
++  white-space: nowrap;
++}
++.turn-reply { margin: 0 0 22px; }
++.turn-reply > .message-actions { margin: 4px 0 0 -6px; }
++.turn-reply.is-step { margin: 0; }
++.reply-blocks { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
++
++/* The steps of a turn: one summary line, "Ran 2 commands, read a file", that
++   opens onto the steps themselves along a thin rail. */
++.turn-steps { margin: 0 0 8px; }
++.steps-summary {
++  display: inline-flex;
++  align-items: center;
++  gap: 6px;
++  max-width: 100%;
++  min-height: 26px;
++  margin-left: -6px;
++  padding: 0 8px 0 6px;
++  border: 0;
++  border-radius: var(--radius-sm);
++  background: transparent;
++  color: var(--text-muted);
++  font: inherit;
++  font-size: 13px;
++  text-align: left;
++  cursor: pointer;
++  transition: background-color 0.12s, color 0.12s;
++}
++.steps-summary:hover { background: var(--bg-hover); color: var(--text-strong); }
++.steps-summary > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
++.steps-summary .steps-count { flex: none; color: var(--text-dim); font-variant-numeric: tabular-nums; }
++.disclosure-chevron { flex: none; color: var(--text-dim); transition: transform 0.15s; }
++[aria-expanded="true"] > .disclosure-chevron { transform: rotate(90deg); }
++.steps-list {
++  position: relative;
++  display: flex;
++  flex-direction: column;
++  gap: 4px;
++  margin: 4px 0 4px 1px;
++  padding-left: 16px;
++}
++/* A drawing, not a border: the rail the steps hang from. */
++.steps-list::before {
++  content: "";
++  position: absolute;
++  top: 4px;
++  bottom: 4px;
++  left: 0;
++  width: 1px;
++  background: var(--line);
++}
++.steps-list .markdown-body { color: var(--text-muted); }
++
++/* A tool call or a thought: one 26px line until opened ("[icon] bash  npm test  2.4s");
++   opened, its detail sits below in a filled box. A failed call names itself in red. */
++.tool-call { min-width: 0; margin-left: -6px; }
++.tool-call-row {
++  display: flex;
++  align-items: center;
++  gap: 4px;
++  min-width: 0;
++  min-height: 26px;
++  padding-right: 6px;
++  border-radius: var(--radius-sm);
++  transition: background-color 0.12s;
++}
++.tool-call-row:hover { background: var(--bg-hover); }
++.tool-call-head {
++  display: flex;
++  flex: 1;
++  align-items: center;
++  gap: 8px;
++  min-width: 0;
++  min-height: 26px;
++  padding: 0 0 0 6px;
++  border: 0;
++  border-radius: var(--radius-sm);
++  background: transparent;
++  color: var(--text-muted);
++  font: inherit;
++  font-size: 13px;
++  text-align: left;
++  cursor: pointer;
++}
++.tool-call-icon { flex: none; color: var(--text-dim); }
++.tool-call-name { flex: none; color: var(--text-muted); font-weight: 500; }
++.tool-call-row:hover .tool-call-name,
++.tool-call.is-open .tool-call-name { color: var(--text-strong); }
++.tool-call.is-error .tool-call-name,
++.tool-call.is-error .tool-call-icon { color: var(--danger); }
++.tool-call-arg {
++  flex: 1;
++  min-width: 0;
++  overflow: hidden;
++  color: var(--text-dim);
++  font-family: var(--font-mono);
++  font-size: 12px;
++  text-overflow: ellipsis;
++  white-space: nowrap;
++}
++.tool-call-arg.is-prose { color: var(--text-muted); font-family: inherit; font-size: 13px; }
++.tool-call-arg.is-prose > p { display: inline; margin: 0; }
++.tool-call-meta { flex: none; color: var(--text-dim); font-size: 11px; font-variant-numeric: tabular-nums; }
++.tool-call-body {
++  margin: 2px 0 6px 6px;
++  overflow: hidden;
++  border-radius: var(--radius-md);
++  background: var(--bg-surface);
++  font-size: 12px;
++}
++.tool-call.is-error .tool-call-body { background: var(--danger-soft); }
++.thinking-body {
++  margin: 2px 0 6px 28px;
++  color: var(--text-muted);
++  font-size: calc(13px + var(--chat-font-size-offset, 0px));
++  line-height: 1.6;
++  white-space: pre-wrap;
++  overflow-wrap: anywhere;
++}
++.tool-call-side { flex: none; }
++
++/* A diff in a tool call (MessageView UnifiedFilesView): line number, mark, code;
++   added and removed lines tinted, no rules between them. */
++.unified-diff {
++  max-height: 560px;
++  overflow: auto;
++  padding: 6px 0;
++  font-family: var(--font-mono);
++  font-weight: var(--font-mono-weight);
++  font-size: calc(12px + var(--chat-font-size-offset, 0px));
++  line-height: 1.6;
++}
++.unified-diff-file + .unified-diff-file { margin-top: 8px; }
++.unified-diff-path {
++  padding: 2px 12px 4px;
++  overflow: hidden;
++  color: var(--text-muted);
++  text-overflow: ellipsis;
++  white-space: nowrap;
++}
++.unified-diff-line { display: flex; min-width: 0; }
++.unified-diff-line.is-added { background: color-mix(in srgb, var(--success) 14%, transparent); }
++.unified-diff-line.is-removed { background: color-mix(in srgb, var(--danger) 14%, transparent); }
++.unified-diff-no {
++  flex: none;
++  width: 44px;
++  padding-right: 8px;
++  color: var(--text-dim);
++  text-align: right;
++  user-select: none;
++}
++.unified-diff-mark { flex: none; width: 16px; color: var(--text-dim); user-select: none; }
++.unified-diff-line.is-added .unified-diff-mark { color: var(--success); }
++.unified-diff-line.is-removed .unified-diff-mark { color: var(--danger); }
++.unified-diff-line.is-empty .unified-diff-text { color: var(--text-dim); }
++.unified-diff-text {
++  flex: 1;
++  min-width: 0;
++  padding-right: 12px;
++  color: var(--text);
++  white-space: pre-wrap;
++  overflow-wrap: anywhere;
++}
++
++/* An error or a cut-off reply under the agent's text: a tinted note, no outline. */
++.reply-notice {
++  padding: 8px 12px;
++  border-radius: var(--radius-md);
++  font-size: 13px;
++  line-height: 1.5;
++  white-space: pre-wrap;
++  overflow-wrap: anywhere;
++}
++.reply-notice.is-error { background: var(--danger-soft); color: var(--danger); }
++.reply-notice.is-warning { background: color-mix(in srgb, var(--warning) 12%, transparent); color: var(--warning); }
 +
 +/* The sidebar's bottom row (AppShell): Models, Skills, Settings; under it,
 +   the row a host may fill ([data-host-slot="sidebar-footer"]). */
@@ -3535,7 +4102,7 @@ index d6b5535..401412e 100644
 +  flex-shrink: 0;
 +  justify-content: space-between;
 +  gap: 2px;
-+  padding: 6px;
++  padding: 4px 6px;
 +}
 +
 +.sidebar-host-slot {
@@ -3554,10 +4121,10 @@ index d6b5535..401412e 100644
 +  justify-content: center;
 +  gap: 5px;
 +  min-width: 0;
-+  height: 30px;
++  height: var(--size-control-sm);
 +  padding: 0 6px;
 +  border: 0;
-+  border-radius: 8px;
++  border-radius: var(--radius-sm);
 +  background: none;
 +  color: var(--text-muted);
 +  font: inherit;
@@ -3725,7 +4292,7 @@ index 79c8282..97731f1 100644
      lang: "en",
      icons: [
 diff --git a/app/settings.css b/app/settings.css
-index 0bf21eb..0dbe4c5 100644
+index 0bf21eb..4938ff2 100644
 --- a/app/settings.css
 +++ b/app/settings.css
 @@ -40,9 +40,9 @@
@@ -3735,12 +4302,30 @@ index 0bf21eb..0dbe4c5 100644
 -  border: 1px solid var(--border);
 -  border-radius: 8px;
 -  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
-+  border-radius: 14px;
++  border-radius: var(--radius-xl);
 +  box-shadow: var(--shadow-pop);
 +  background: var(--bg-elevated);
  }
  
  .config-panel-header {
+@@ -51,7 +51,7 @@
+   align-items: center;
+   gap: 10px;
+   height: 50px;
+-  padding: 0 14px 0 18px;
++  padding: 0 12px 0 16px;
+   border-bottom: 1px solid var(--border);
+ }
+ 
+@@ -78,7 +78,7 @@
+   margin-left: auto;
+   padding: 0;
+   border: 0;
+-  border-radius: 5px;
++  border-radius: var(--radius-sm);
+   background: transparent;
+   color: var(--text-muted);
+   cursor: pointer;
 @@ -153,8 +153,9 @@
  }
  
@@ -3752,6 +4337,15 @@ index 0bf21eb..0dbe4c5 100644
  }
  
  /* Three lines, then scroll: the phone layout gives the whole sidebar 190px. */
+@@ -188,7 +189,7 @@
+   height: 30px;
+   padding: 0 8px;
+   border: 0;
+-  border-radius: 5px;
++  border-radius: var(--radius-sm);
+   outline: none;
+   background: transparent;
+   color: var(--text);
 @@ -236,8 +237,9 @@
  .models-sidebar-badge {
    flex-shrink: 0;
@@ -3768,12 +4362,26 @@ index 0bf21eb..0dbe4c5 100644
    min-width: 0;
    padding: 6px 9px;
 -  border: 1px solid var(--border);
-   border-radius: 5px;
+-  border-radius: 5px;
 -  background: var(--bg);
++  border-radius: var(--radius-sm);
 +  background: var(--bg-surface);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 12px;
+@@ -290,9 +291,9 @@
+   flex-shrink: 0;
+   padding: 6px 12px;
+   border: none;
+-  border-radius: 5px;
+-  background: var(--accent);
+-  color: var(--accent-contrast);
++  border-radius: var(--radius-sm);
++  background: var(--primary);
++  color: var(--primary-contrast);
+   cursor: pointer;
+   font-size: 12px;
+   font-weight: 600;
 @@ -370,8 +371,9 @@
  .enabled-models-count {
    margin-right: auto;
@@ -3785,43 +4393,214 @@ index 0bf21eb..0dbe4c5 100644
  }
  
  .enabled-models-note {
+@@ -383,7 +385,7 @@
+ .enabled-models-error {
+   padding: 7px 9px;
+   border: 1px solid rgba(239, 68, 68, 0.3);
+-  border-radius: 5px;
++  border-radius: var(--radius-sm);
+   color: #ef4444;
+   font-size: 11px;
+   line-height: 1.4;
 @@ -401,10 +403,9 @@
    box-sizing: border-box;
    height: 30px;
    padding: 0 9px;
 -  border: 1px solid var(--border);
-   border-radius: 5px;
+-  border-radius: 5px;
++  border-radius: var(--radius-sm);
    outline: none;
 -  background: var(--bg);
 +  background: var(--bg-surface);
    color: var(--text);
    font-family: inherit;
    font-size: 12px;
+@@ -413,7 +414,7 @@
+ .enabled-models-list {
+   max-height: 360px;
+   border: 1px solid var(--border);
+-  border-radius: 6px;
++  border-radius: var(--radius-sm);
+   background: var(--bg-panel);
+   overflow-y: auto;
+ }
+@@ -457,7 +458,7 @@
+ .enabled-models-pin {
+   flex-shrink: 0;
+   padding: 1px 4px;
+-  border-radius: 3px;
++  border-radius: var(--radius-xs);
+   background: rgba(99, 102, 241, 0.12);
+   color: rgba(99, 102, 241, 0.8);
+   font-size: 9px;
+@@ -497,7 +498,7 @@
+   justify-content: space-between;
+   gap: 18px;
+   min-height: 68px;
+-  padding: 10px 18px;
++  padding: 8px 16px;
+   border-bottom: 1px solid var(--border);
+   background: var(--bg-panel);
+ }
+@@ -541,7 +542,7 @@
+   height: 28px;
+   padding: 0 6px;
+   border: 1px solid var(--border);
+-  border-radius: 4px;
++  border-radius: var(--radius-xs);
+   background: var(--bg);
+   color: var(--text);
+   font: inherit;
+@@ -566,7 +567,7 @@
+   flex: 1;
+   min-width: 0;
+   min-height: 0;
+-  padding: 20px;
++  padding: 16px;
+   overflow-y: auto;
+   font-family: inherit;
+   font-size: 12px;
+@@ -662,7 +663,7 @@
+   background: var(--border);
+   border: 5px solid transparent;
+   background-clip: padding-box;
+-  border-radius: 7px;
++  border-radius: var(--radius-sm);
+ }
+ 
+ .config-field-label {
+@@ -697,7 +698,7 @@
+ .config-scope-tag {
+   flex-shrink: 0;
+   padding: 1px 5px;
+-  border-radius: 3px;
++  border-radius: var(--radius-xs);
+   background: rgba(120, 120, 120, 0.12);
+   color: var(--text-dim);
+   font-size: 10px;
+@@ -730,7 +731,7 @@
+   height: 30px;
+   overflow: hidden;
+   border: 1px solid var(--border);
+-  border-radius: 7px;
++  border-radius: var(--radius-sm);
+ }
+ 
+ .config-scope-switch-option {
+@@ -760,7 +761,7 @@
+ .config-scope-switch.is-small {
+   display: flex;
+   height: auto;
+-  border-radius: 5px;
++  border-radius: var(--radius-sm);
+   font-size: 12px;
+ }
+ 
 @@ -891,9 +892,8 @@
    width: 100%;
    height: 36px;
    padding: 0 11px;
 -  border: 1px solid var(--border);
-   border-radius: 6px;
+-  border-radius: 6px;
 -  background: var(--bg-panel);
++  border-radius: var(--radius-sm);
 +  background: var(--bg-surface);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 12px;
-@@ -1181,9 +1181,9 @@
+@@ -935,7 +935,7 @@
+   min-height: 30px;
+   padding: 6px 9px;
+   border: 1px solid var(--border);
+-  border-radius: 6px;
++  border-radius: var(--radius-sm);
+   background: var(--bg-panel);
+   color: var(--text-dim);
+   cursor: pointer;
+@@ -976,7 +976,7 @@
+ }
+ 
+ .config-notice {
+-  padding: 8px 18px;
++  padding: 6px 16px;
+   border-bottom: 1px solid var(--border);
+   background: var(--bg-panel);
+   color: var(--text-muted);
+@@ -1104,7 +1104,7 @@
+   align-items: center;
+   gap: 8px;
+   min-height: 52px;
+-  padding: 9px 14px;
++  padding: 8px 12px;
+   border-top: 1px solid var(--border);
+ }
+ 
+@@ -1159,7 +1159,7 @@
+   gap: 6px;
+   border-width: 1px;
+   border-style: solid;
+-  border-radius: 5px;
++  border-radius: var(--radius-sm);
+   cursor: pointer;
+   font-family: inherit;
+   letter-spacing: 0;
+@@ -1168,35 +1168,39 @@
+   transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
+ }
+ 
++/* Claude Desktop's button metrics, as .ui-btn (app/globals.css): 32px with 12px
++   sides, 28px with 8px sides, 6px corners, 13px medium labels. */
+ .config-button-default {
+-  height: 32px;
+-  padding: 0 14px;
+-  font-size: 12px;
++  height: var(--size-control);
++  padding: 0 12px;
++  font-size: 13px;
++  font-weight: 500;
+ }
+ 
+ .config-button-small {
+-  height: 28px;
+-  padding: 0 10px;
+-  font-size: 11px;
++  height: var(--size-control-sm);
++  padding: 0 8px;
++  font-size: 12px;
++  font-weight: 500;
  }
  
  .config-button-primary {
 -  border-color: var(--accent);
 -  background: var(--accent);
 -  color: var(--accent-contrast);
+-  font-weight: 600;
 +  border-color: transparent;
 +  background: var(--primary);
 +  color: var(--primary-contrast);
-   font-weight: 600;
++  font-weight: 500;
  }
  
-@@ -1206,8 +1206,9 @@
+ .config-button-secondary {
+-  border-color: var(--border);
+-  background: transparent;
+-  color: var(--text-muted);
++  border-color: transparent;
++  background: var(--bg-subtle);
++  color: var(--text-strong);
+ }
+ 
+ .config-button-danger {
+-  border-color: rgba(239, 68, 68, 0.35);
+-  background: rgba(239, 68, 68, 0.06);
+-  color: #ef4444;
++  border-color: transparent;
++  background: var(--danger-soft);
++  color: var(--danger);
+ }
+ 
+ .config-button-ghost {
+@@ -1206,20 +1210,27 @@
  }
  
  .config-button-primary:not(:disabled):hover {
@@ -3830,10 +4609,33 @@ index 0bf21eb..0dbe4c5 100644
 +  border-color: transparent;
 +  background: var(--primary);
 +  opacity: 0.86;
++}
++
++.config-button-secondary:not(:disabled):hover {
++  background: var(--bg-selected);
++  color: var(--text-strong);
  }
  
- .config-button-secondary:not(:disabled):hover,
-@@ -1254,9 +1255,9 @@
+-.config-button-secondary:not(:disabled):hover,
+ .config-button-ghost:not(:disabled):hover {
+-  border-color: var(--border);
+   background: var(--bg-hover);
+-  color: var(--text);
++  color: var(--text-strong);
+ }
+ 
+ .config-button-danger:not(:disabled):hover {
+-  border-color: rgba(239, 68, 68, 0.5);
+-  background: rgba(239, 68, 68, 0.12);
++  background: color-mix(in srgb, var(--danger) 22%, transparent);
++}
++
++.config-button:not(:disabled):active {
++  transform: scale(0.97);
+ }
+ 
+ .config-button:focus-visible {
+@@ -1254,9 +1265,9 @@
    width: 32px;
    height: 18px;
    padding: 0;
@@ -3845,7 +4647,25 @@ index 0bf21eb..0dbe4c5 100644
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
  }
-@@ -1405,10 +1406,9 @@
+@@ -1342,7 +1353,7 @@
+   min-height: 30px;
+   padding: 0 8px;
+   border: 0;
+-  border-radius: 5px;
++  border-radius: var(--radius-sm);
+   background: transparent;
+   color: var(--text-dim);
+   cursor: pointer;
+@@ -1358,7 +1369,7 @@
+ 
+ .config-list-action-button[aria-current="page"] {
+   background: var(--bg-selected);
+-  color: var(--accent);
++  color: var(--text-strong);
+ }
+ 
+ .config-list-action-button:disabled {
+@@ -1405,10 +1416,9 @@
    height: 84vh;
    max-height: calc(100dvh - 16px);
    overflow: hidden;
@@ -3853,24 +4673,88 @@ index 0bf21eb..0dbe4c5 100644
 -  border-radius: 8px;
 -  background: var(--bg);
 -  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
-+  border-radius: 14px;
++  border-radius: var(--radius-xl);
 +  background: var(--bg-elevated);
 +  box-shadow: var(--shadow-pop);
  }
  
  .settings-dialog-header {
-@@ -1657,9 +1657,8 @@
+@@ -1417,7 +1427,7 @@
+   flex-shrink: 0;
+   align-items: center;
+   min-height: 50px;
+-  padding: 0 52px 0 18px;
++  padding: 0 48px 0 16px;
+   border-bottom: 1px solid var(--border);
+ }
+ 
+@@ -1467,7 +1477,7 @@
+   width: 24px;
+   height: 2px;
+   border-radius: 2px 2px 0 0;
+-  background: var(--accent);
++  background: var(--text-strong);
+   content: "";
+   opacity: 0;
+   transform: translateX(-50%) scaleX(0.5);
+@@ -1494,7 +1504,7 @@
+ }
+ 
+ .settings-section-tab:focus-visible:not([aria-current="page"]) {
+-  border-radius: 4px;
++  border-radius: var(--radius-xs);
+   background: var(--bg-hover);
+   color: var(--text);
+ }
+@@ -1542,7 +1552,7 @@
+ .settings-general {
+   width: 100%;
+   height: 100%;
+-  padding: 26px clamp(18px, 4vw, 40px) 40px;
++  padding: 18px clamp(16px, 3vw, 28px) 28px;
+   overflow-y: auto;
+ }
+ 
+@@ -1593,21 +1603,21 @@
+   justify-content: center;
+   gap: 7px;
+   min-width: 0;
+-  min-height: 44px;
++  min-height: var(--size-control);
+   padding: 0 6px;
+   border: 0;
+-  border-radius: 5px;
++  border-radius: var(--radius-sm);
+   background: transparent;
+   color: var(--text-muted);
+   cursor: pointer;
+-  font-size: 12px;
++  font-size: 13px;
+   font-weight: 400;
+ }
+ 
+ .settings-theme-option:has(input:checked) {
+   background: var(--bg-selected);
+-  color: var(--accent);
+-  font-weight: 600;
++  color: var(--text-strong);
++  font-weight: 500;
+ }
+ 
+ .settings-theme-option:not(:has(input:checked)):hover {
+@@ -1657,9 +1667,8 @@
    height: 26px;
    margin: 0;
    padding: 0 8px;
 -  border: 1px solid var(--border);
-   border-radius: 5px;
+-  border-radius: 5px;
 -  background: var(--bg);
++  border-radius: var(--radius-sm);
 +  background: var(--bg-surface);
    color: var(--text);
    font-family: var(--font-ui);
    font-weight: var(--font-ui-weight);
-@@ -1722,8 +1721,9 @@
+@@ -1722,8 +1731,9 @@
  
  .settings-chat-range-header output {
    color: var(--text-muted);
@@ -3881,18 +4765,102 @@ index 0bf21eb..0dbe4c5 100644
  }
  
  .settings-send-mode-options {
-@@ -2172,9 +2172,8 @@
+@@ -1732,7 +1742,7 @@
+   gap: 3px;
+   padding: 3px;
+   border: 1px solid var(--border);
+-  border-radius: 6px;
++  border-radius: var(--radius-sm);
+ }
+ 
+ .settings-send-mode-option {
+@@ -1744,7 +1754,7 @@
+   min-height: 26px;
+   padding: 0 10px;
+   border: 0;
+-  border-radius: 4px;
++  border-radius: var(--radius-xs);
+   background: transparent;
+   color: var(--text-muted);
+   cursor: pointer;
+@@ -1754,8 +1764,8 @@
+ 
+ .settings-send-mode-option:has(input:checked) {
+   background: var(--bg-selected);
+-  color: var(--accent);
+-  font-weight: 600;
++  color: var(--text-strong);
++  font-weight: 500;
+ }
+ 
+ .settings-send-mode-option:not(:has(input:checked)):hover {
+@@ -1781,7 +1791,7 @@
+   display: block;
+   width: 100%;
+   margin-top: 2px;
+-  accent-color: var(--accent);
++  accent-color: var(--text-strong);
+ }
+ 
+ .settings-language-options {
+@@ -1799,7 +1809,7 @@
+   height: 44px;
+   padding: 0 10px;
+   border: 0;
+-  border-radius: 5px;
++  border-radius: var(--radius-sm);
+   background: transparent;
+   color: var(--text);
+   cursor: pointer;
+@@ -1857,7 +1867,7 @@
+   max-width: 420px;
+   min-height: 44px;
+   padding: 0 10px;
+-  border-radius: 5px;
++  border-radius: var(--radius-sm);
+   background: var(--bg-panel);
+   color: var(--text);
+   font-size: 12px;
+@@ -1923,7 +1933,7 @@
+     margin-left: 14px;
+     padding: 0 9px;
+     border: 1px solid var(--border);
+-    border-radius: 5px;
++    border-radius: var(--radius-sm);
+     background: var(--bg-panel);
+     color: var(--text);
+     font-size: 16px;
+@@ -2066,7 +2076,7 @@
+   max-width: 100%;
+   padding: 0 5px;
+   border: 1px solid var(--border);
+-  border-radius: 3px;
++  border-radius: var(--radius-xs);
+   background: var(--bg-panel);
+   color: var(--text);
+   font-family: var(--font-mono);
+@@ -2085,7 +2095,7 @@
+   padding: 6px 8px;
+   overflow: auto;
+   border: 1px solid var(--border);
+-  border-radius: 4px;
++  border-radius: var(--radius-xs);
+   background: var(--bg-panel);
+   color: var(--text-muted);
+   font-family: var(--font-mono);
+@@ -2172,9 +2182,8 @@
    min-width: 0;
    height: 32px;
    padding: 0 10px;
 -  border: 1px solid var(--border);
-   border-radius: 6px;
+-  border-radius: 6px;
 -  background: var(--bg-panel);
++  border-radius: var(--radius-sm);
 +  background: var(--bg-surface);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 12px;
-@@ -2266,10 +2265,9 @@ select.mcp-add-input {
+@@ -2266,10 +2275,9 @@ select.mcp-add-input {
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
@@ -3900,14 +4868,109 @@ index 0bf21eb..0dbe4c5 100644
 -  border-radius: 8px;
 -  background: var(--bg-panel);
 -  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.24);
-+  border-radius: 14px;
++  border-radius: var(--radius-xl);
 +  background: var(--bg-elevated);
 +  box-shadow: var(--shadow-pop);
  }
  
  /* Focus moves to the dialog itself when it opens (tabIndex -1); it is not a control, so no ring. */
+@@ -2282,7 +2290,7 @@ select.mcp-add-input {
+   flex: 1 1 auto;
+   gap: 12px;
+   min-height: 0;
+-  padding: 18px 18px 14px;
++  padding: 14px 16px 10px;
+   overflow: auto;
+   overscroll-behavior: contain;
+ }
+@@ -2315,7 +2323,7 @@ select.mcp-add-input {
+   margin-top: 10px;
+   padding: 8px 10px;
+   border: 1px solid var(--border);
+-  border-radius: 5px;
++  border-radius: var(--radius-sm);
+   background: var(--bg);
+   color: var(--text);
+   font-family: var(--font-mono);
+@@ -2333,7 +2341,7 @@ select.mcp-add-input {
+ .project-trust-error {
+   flex-shrink: 0;
+   max-height: 30vh;
+-  padding: 0 18px 10px;
++  padding: 0 16px 8px;
+   overflow: auto;
+   color: #ef4444;
+   font-size: 12px;
+@@ -2353,19 +2361,20 @@ select.mcp-add-input {
+   flex-shrink: 0;
+   justify-content: flex-end;
+   gap: 8px;
+-  padding: 10px 18px;
++  padding: 8px 16px;
+   border-top: 1px solid var(--border);
+ }
+ 
+ .project-trust-button {
+-  height: 32px;
++  height: var(--size-control);
+   padding: 0 12px;
+-  border: 1px solid var(--border);
+-  border-radius: 5px;
+-  background: transparent;
+-  color: var(--text-muted);
++  border: 0;
++  border-radius: var(--radius-sm);
++  background: var(--bg-subtle);
++  color: var(--text-strong);
+   cursor: pointer;
+-  font-size: 12px;
++  font-size: 13px;
++  font-weight: 500;
+ }
+ 
+ .project-trust-button:disabled {
+@@ -2373,10 +2382,8 @@ select.mcp-add-input {
+ }
+ 
+ .project-trust-button.is-primary {
+-  border-color: var(--accent);
+-  background: var(--accent);
+-  color: var(--accent-contrast);
+-  font-weight: 600;
++  background: var(--primary);
++  color: var(--primary-contrast);
+ }
+ 
+ .project-trust-button.is-primary:disabled {
+@@ -2450,7 +2457,7 @@ select.mcp-add-input {
+   min-width: 0;
+   padding: 8px 10px;
+   border: 1px solid var(--border);
+-  border-radius: 5px;
++  border-radius: var(--radius-sm);
+   background: var(--bg);
+ }
+ 
+@@ -2472,7 +2479,7 @@ select.mcp-add-input {
+ .project-trust-mcp-tag {
+   flex-shrink: 0;
+   padding: 1px 5px;
+-  border-radius: 3px;
++  border-radius: var(--radius-xs);
+   background: rgba(120, 120, 120, 0.12);
+   color: var(--text-dim);
+   font-size: 10px;
+@@ -2493,7 +2500,7 @@ select.mcp-add-input {
+   display: inline-block;
+   margin: 2px 4px 0 0;
+   padding: 0 4px;
+-  border-radius: 3px;
++  border-radius: var(--radius-xs);
+   background: var(--bg-hover);
+   color: var(--text);
+   font-family: var(--font-mono);
 diff --git a/app/sidebar-menu.css b/app/sidebar-menu.css
-index 737e7a5..86bdb58 100644
+index 737e7a5..19466a2 100644
 --- a/app/sidebar-menu.css
 +++ b/app/sidebar-menu.css
 @@ -20,11 +20,10 @@
@@ -3917,7 +4980,7 @@ index 737e7a5..86bdb58 100644
 -  border: 1px solid var(--border);
 -  border-radius: 8px;
 -  background: var(--bg);
-+  border-radius: 10px;
++  border-radius: var(--radius-lg);
 +  background: var(--bg-elevated);
    color: var(--text);
 -  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
@@ -3925,6 +4988,15 @@ index 737e7a5..86bdb58 100644
    font-size: 12px;
    animation: sidebar-menu-in 0.12s ease-out;
  }
+@@ -53,7 +52,7 @@
+   padding: 0 8px;
+   box-sizing: border-box;
+   border: 0;
+-  border-radius: 5px;
++  border-radius: var(--radius-sm);
+   background: transparent;
+   color: var(--text);
+   font: inherit;
 @@ -126,8 +125,9 @@
  .sidebar-menu-shortcut {
    flex-shrink: 0;
@@ -3936,6 +5008,15 @@ index 737e7a5..86bdb58 100644
  }
  
  .sidebar-menu-separator {
+@@ -166,7 +166,7 @@
+   height: 28px;
+   padding: 0;
+   border: 0;
+-  border-radius: 5px;
++  border-radius: var(--radius-sm);
+   background: transparent;
+   color: var(--text-dim);
+   cursor: pointer;
 @@ -202,8 +202,7 @@
    z-index: 1;
    margin: -4px -4px 4px;
@@ -3952,13 +5033,31 @@ index 737e7a5..86bdb58 100644
    box-sizing: border-box;
 -  border: 1px solid var(--border);
 -  border-radius: 5px;
-+  border-radius: 7px;
++  border-radius: var(--radius-sm);
    outline: none;
 -  background: var(--bg);
 +  background: var(--bg-surface);
    color: var(--text);
    font: inherit;
    font-size: 12px;
+@@ -346,7 +344,7 @@
+ .sidebar-menu.is-classic .sidebar-worktree-cancel {
+   height: auto;
+   padding: 4px 0;
+-  border-radius: 5px;
++  border-radius: var(--radius-sm);
+   font-size: 11px;
+ }
+ 
+@@ -388,7 +386,7 @@
+   flex: none;
+   height: auto;
+   padding: 3px 9px;
+-  border-radius: 5px;
++  border-radius: var(--radius-sm);
+   font-size: 11px;
+ }
+ 
 @@ -583,11 +581,10 @@ html[data-keyboard-open] .sidebar-sheet {
    height: 36px;
    padding: 0 4px 0 12px;
@@ -3966,7 +5065,7 @@ index 737e7a5..86bdb58 100644
 -  border: 1px solid var(--border);
 -  border-radius: 8px;
 -  background: var(--bg);
-+  border-radius: 10px;
++  border-radius: var(--radius-lg);
 +  background: var(--bg-elevated);
    color: var(--text);
 -  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
@@ -3974,8 +5073,53 @@ index 737e7a5..86bdb58 100644
    font-size: 12px;
    pointer-events: auto;
    animation: sidebar-toast-in 0.16s ease-out;
+@@ -634,7 +631,7 @@ html[data-keyboard-open] .sidebar-sheet {
+   height: 26px;
+   padding: 0 7px;
+   border: 0;
+-  border-radius: 5px;
++  border-radius: var(--radius-sm);
+   background: transparent;
+   color: var(--accent);
+   font: inherit;
+@@ -657,7 +654,7 @@ html[data-keyboard-open] .sidebar-sheet {
+   height: 24px;
+   padding: 0;
+   border: 0;
+-  border-radius: 5px;
++  border-radius: var(--radius-sm);
+   background: transparent;
+   color: var(--text-dim);
+   cursor: pointer;
+@@ -726,7 +723,7 @@ html[data-keyboard-open] .sidebar-sheet {
+   padding: 0 8px;
+   box-sizing: border-box;
+   border: 1px solid var(--accent);
+-  border-radius: 5px;
++  border-radius: var(--radius-sm);
+   outline: none;
+   background: var(--bg);
+   color: var(--text);
+@@ -749,7 +746,7 @@ html[data-keyboard-open] .sidebar-sheet {
+   flex: 1;
+   height: 26px;
+   border: 1px solid var(--border);
+-  border-radius: 6px;
++  border-radius: var(--radius-sm);
+   background: var(--bg);
+   color: var(--text-muted);
+   font: inherit;
+@@ -848,7 +845,7 @@ html[data-keyboard-open] .sidebar-sheet {
+   min-width: 0;
+   height: 26px;
+   border: 1px solid var(--border);
+-  border-radius: 6px;
++  border-radius: var(--radius-sm);
+   background: var(--bg);
+   color: var(--text-muted);
+   font: inherit;
 diff --git a/app/sidebar.css b/app/sidebar.css
-index 86728a2..e5780e6 100644
+index 86728a2..fd45b6f 100644
 --- a/app/sidebar.css
 +++ b/app/sidebar.css
 @@ -91,7 +91,7 @@
@@ -3987,6 +5131,15 @@ index 86728a2..e5780e6 100644
    outline-offset: -2px;
  }
  
+@@ -184,7 +184,7 @@
+   right: var(--session-tree-inset-right);
+   left: var(--session-tree-inset-left);
+   padding: 0 4px 0 20px;
+-  border-radius: 7px;
++  border-radius: var(--radius-sm);
+   cursor: pointer;
+   overflow: hidden;
+ }
 @@ -197,32 +197,11 @@
    background: var(--bg-selected);
  }
@@ -4061,6 +5214,15 @@ index 86728a2..e5780e6 100644
  }
  
  .session-tree-title-base {
+@@ -393,7 +377,7 @@ a.session-tree-main {
+   height: 24px;
+   margin-left: 2px;
+   padding: 0;
+-  border-radius: 6px;
++  border-radius: var(--radius-sm);
+   color: var(--text-dim);
+ }
+ 
 @@ -408,13 +392,17 @@ a.session-tree-main {
    background: var(--bg-hover);
  }
@@ -4081,6 +5243,51 @@ index 86728a2..e5780e6 100644
  .session-tree-meta.is-running {
    color: var(--accent);
  }
+@@ -454,7 +442,7 @@ a.session-tree-main {
+   padding: 0 8px;
+   box-sizing: border-box;
+   border: 1px solid var(--accent);
+-  border-radius: 5px;
++  border-radius: var(--radius-sm);
+   outline: none;
+   background: var(--bg);
+   color: var(--text);
+@@ -483,7 +471,7 @@ a.session-tree-main {
+   gap: 4px;
+   height: 24px;
+   padding: 0 10px;
+-  border-radius: 6px;
++  border-radius: var(--radius-sm);
+   font-size: 12px;
+   white-space: nowrap;
+ }
+@@ -519,7 +507,7 @@ a.session-tree-main {
+   left: var(--session-tree-inset-left);
+   gap: 2px;
+   padding: 0 4px 0 0;
+-  border-radius: 7px;
++  border-radius: var(--radius-sm);
+   -webkit-user-select: none;
+   user-select: none;
+   -webkit-touch-callout: none;
+@@ -548,7 +536,7 @@ a.session-tree-main {
+   position: absolute;
+   right: var(--session-tree-inset-right);
+   left: var(--session-tree-inset-left);
+-  border-radius: 7px;
++  border-radius: var(--radius-sm);
+   background: color-mix(in srgb, var(--bg-panel) 55%, transparent);
+   pointer-events: none;
+ }
+@@ -589,7 +577,7 @@ a.session-tree-main {
+   height: 22px;
+   padding: 0 10px;
+   border: 1px solid var(--border);
+-  border-radius: 11px;
++  border-radius: var(--radius-lg);
+   background: var(--bg-panel);
+   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
+   color: var(--text);
 @@ -618,7 +606,7 @@ a.session-tree-main {
    padding: 0 0 0 5px;
    color: var(--text-muted);
@@ -4090,6 +5297,24 @@ index 86728a2..e5780e6 100644
    text-align: left;
    white-space: nowrap;
  }
+@@ -726,7 +714,7 @@ a.session-tree-main {
+   width: 22px;
+   height: 22px;
+   padding: 0;
+-  border-radius: 6px;
++  border-radius: var(--radius-sm);
+   color: var(--text-dim);
+ }
+ 
+@@ -787,7 +775,7 @@ a.session-tree-main {
+   gap: 3px;
+   min-width: 0;
+   padding: 0 4px 0 5px;
+-  border-radius: 7px;
++  border-radius: var(--radius-sm);
+   color: var(--text-dim);
+   font-size: 12px;
+   text-align: left;
 @@ -838,7 +826,10 @@ a.session-tree-main {
  
  /* Phone layout: 44px rows, a step larger type for titles and project names,
@@ -4137,7 +5362,7 @@ index 86728a2..e5780e6 100644
    border: 0;
 -  border-top: 2px solid transparent;
 -  border-radius: 0;
-+  border-radius: 7px;
++  border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
@@ -4202,7 +5427,8 @@ index 86728a2..e5780e6 100644
 +  margin: 0 0 0 6px;
 +  padding: 0 5px;
    border: 0;
-   border-radius: 6px;
+-  border-radius: 6px;
++  border-radius: var(--radius-sm);
    background: transparent;
 -  color: var(--text);
 -  font-family: var(--font-mono);
@@ -4274,19 +5500,56 @@ index 86728a2..e5780e6 100644
  .sidebar-header[data-fit="1"] .sidebar-new-label,
  .sidebar-header[data-fit="2"] .sidebar-new-label,
  .sidebar-header[data-fit="2"] .sidebar-tab-label {
+@@ -1246,7 +1234,7 @@ a.session-tree-main {
+   padding: 0 5px;
+   overflow: hidden;
+   border: 0;
+-  border-radius: 7px;
++  border-radius: var(--radius-sm);
+   background: transparent;
+   color: var(--text-muted);
+   font: inherit;
+@@ -1304,7 +1292,7 @@ a.session-tree-main {
+   min-width: 18px;
+   max-width: 26px;
+   height: 26px;
+-  border-radius: 6px;
++  border-radius: var(--radius-sm);
+ }
+ 
+ /* Under that row (or the whole files tab): the head, then the tree filling
 @@ -1329,9 +1317,8 @@ a.session-tree-main {
    height: 29px;
    padding: 0 10px;
    box-sizing: border-box;
 -  border: 1px solid var(--border);
-   border-radius: 7px;
+-  border-radius: 7px;
 -  background: var(--bg);
++  border-radius: var(--radius-sm);
 +  background: var(--bg-surface);
    color: var(--text);
    font: inherit;
    font-size: 12px;
+@@ -1413,7 +1400,7 @@ a.session-tree-main {
+   height: 26px;
+   padding: 0 6px;
+   border: 0;
+-  border-radius: 6px;
++  border-radius: var(--radius-sm);
+   background: transparent;
+   color: var(--text-muted);
+   font-size: 12px;
+@@ -1502,7 +1489,7 @@ a.session-tree-main {
+   height: 32px;
+   padding: 0;
+   border: 0;
+-  border-radius: 7px;
++  border-radius: var(--radius-sm);
+   background: transparent;
+   color: var(--text-dim);
+   cursor: pointer;
 diff --git a/components/AgentSessionPanel.tsx b/components/AgentSessionPanel.tsx
-index a899c62..051b2df 100644
+index a899c62..1e5fe9a 100644
 --- a/components/AgentSessionPanel.tsx
 +++ b/components/AgentSessionPanel.tsx
 @@ -3,6 +3,8 @@
@@ -4340,8 +5603,17 @@ index a899c62..051b2df 100644
          )}
        </span>
        <span style={{ minWidth: 0 }}>
+@@ -205,7 +197,7 @@ export function AgentSessionPanel({ rootSession, subagents, selectedSessionId, r
+               aria-label={t("agentSwitcher.search")}
+               style={{
+                 width: "100%", height: 32, padding: "0 10px",
+-                border: "1px solid var(--border)", borderRadius: 6,
++                border: "1px solid var(--border)", borderRadius: "var(--radius-sm)",
+                 background: "var(--bg)", color: "var(--text)", fontSize: 12, outline: "none",
+               }}
+             />
 diff --git a/components/AgentsConfig.tsx b/components/AgentsConfig.tsx
-index 861a1c6..e791a20 100644
+index 861a1c6..d5d466e 100644
 --- a/components/AgentsConfig.tsx
 +++ b/components/AgentsConfig.tsx
 @@ -38,6 +38,8 @@ import {
@@ -4353,6 +5625,15 @@ index 861a1c6..e791a20 100644
  
  const TOOL_OPTIONS = ["read", "bash", "edit", "write", "grep", "find", "ls"];
  const THINKING_OPTIONS = ["", "off", "minimal", "low", "medium", "high", "xhigh", "max"] as const;
+@@ -67,7 +69,7 @@ const inputStyle: CSSProperties = {
+   height: 34,
+   padding: "0 9px",
+   border: "1px solid var(--border)",
+-  borderRadius: 5,
++  borderRadius: "var(--radius-sm)",
+   background: "var(--bg)",
+   color: "var(--text)",
+   fontSize: 12,
 @@ -727,9 +729,7 @@ export function AgentsConfig({
              className={savedOk ? "is-success" : undefined}
            >
@@ -4365,10 +5646,19 @@ index 861a1c6..e791a20 100644
              <span>{savedOk ? t("i18n.saved") : saving ? t("agents.saving") : t("agents.save")}</span>
            </ConfigButton>
 diff --git a/components/AppShell.tsx b/components/AppShell.tsx
-index c8c4ba9..ed04857 100644
+index c8c4ba9..fb61efb 100644
 --- a/components/AppShell.tsx
 +++ b/components/AppShell.tsx
-@@ -74,6 +74,8 @@ import type { FileViewerState } from "@/lib/file-viewer-state";
+@@ -3,6 +3,8 @@
+ import { useState, useCallback, useRef, useEffect, useLayoutEffect, useMemo } from "react";
+ import { useRouter, useSearchParams } from "next/navigation";
+ import { useGlobalKeyboardShortcuts } from "@/hooks/useKeyboardShortcuts";
++import { sessionRowTitle } from "./SessionTree";
++import { skillExpansionToCommand } from "@/lib/slash-display";
+ import { SessionSidebar, type SelectSessionOptions, type SessionSidebarControl } from "./SessionSidebar";
+ import { ChatWindow } from "./ChatWindow";
+ import { NewSessionContextBar, type NewSessionContextControl } from "./NewSessionContextBar";
+@@ -74,6 +76,8 @@ import type { FileViewerState } from "@/lib/file-viewer-state";
  import { PRESET_READ_ONLY, type ToolEntry } from "@/lib/tool-presets";
  import { getSessionFamily } from "@/lib/session-family";
  import { getLastSettingsSection, settingsSectionRequiresProject, type SettingsSection } from "@/lib/settings-navigation";
@@ -4377,7 +5667,21 @@ index c8c4ba9..ed04857 100644
  
  type SessionCopyField = "file" | "id" | "projectDir" | "gitBranch" | "gitWorktree";
  type AutoNameStatus =
-@@ -1422,7 +1424,7 @@ export function AppShell() {
+@@ -83,6 +87,13 @@ type AutoNameStatus =
+   | { kind: "error"; message: string };
+ 
+ const TOP_BAR_ICON_BUTTON_SIZE = 36;
++
++/** The header's title: the session's name, else its whole first line (the row's title stops at 50 characters). */
++function sessionHeaderTitle(session: SessionInfo): string {
++  if (session.name) return session.name;
++  const first = (skillExpansionToCommand(session.firstMessage) ?? session.firstMessage ?? "").split("\n")[0].trim();
++  return first || sessionRowTitle(session);
++}
+ const AGENT_PANEL_WIDTH = 420;
+ // pi's built-in tools that never change a file; any other tool may (#1144).
+ const READ_ONLY_TOOL_NAMES = new Set(PRESET_READ_ONLY);
+@@ -1422,7 +1433,7 @@ export function AppShell() {
          onRunningSessionIdsChange={handleRunningSessionIdsChange}
          onSessionsChange={handleSessionsChange}
        />
@@ -4386,7 +5690,7 @@ index c8c4ba9..ed04857 100644
          {([
            ["models", translate("common.models")],
            ["skills", translate("common.skills")],
-@@ -1432,19 +1434,11 @@ export function AppShell() {
+@@ -1432,19 +1443,11 @@ export function AppShell() {
              <button
                key={section}
                type="button"
@@ -4407,7 +5711,7 @@ index c8c4ba9..ed04857 100644
              >
                <SettingsSectionIcon section={section} size={14} strokeWidth={2} />
                <span>{label}</span>
-@@ -1453,22 +1447,19 @@ export function AppShell() {
+@@ -1453,22 +1456,19 @@ export function AppShell() {
          })}
          <button
            type="button"
@@ -4435,7 +5739,7 @@ index c8c4ba9..ed04857 100644
      </>
    );
  
-@@ -1502,22 +1493,7 @@ export function AppShell() {
+@@ -1502,22 +1502,7 @@ export function AppShell() {
          }}
          data-mobile-trust-banner={mobileBanner ? "true" : undefined}
        >
@@ -4459,29 +5763,52 @@ index c8c4ba9..ed04857 100644
          <span>{translate("trust.resourcesNotLoaded")}</span>
        </button>
      );
-@@ -1542,17 +1518,16 @@ export function AppShell() {
-             justifyContent: "center",
-             gap: 6,
-             width: mobile ? TOP_BAR_ICON_BUTTON_SIZE : undefined,
+@@ -1526,9 +1511,10 @@ export function AppShell() {
+   const renderChatToolbarActions = (mobile: boolean) => {
+     if (!mobile && !showChat) return null;
+     return (
+-      <div style={{ display: "flex", alignItems: "stretch", height: "100%" }}>
++      <div style={{ display: "flex", alignItems: "stretch", flexShrink: 0, gap: mobile ? 0 : 2, height: "100%" }}>
+         <button
+           type="button"
++          className="ui-btn ui-btn--sm ui-btn--icon"
+           onClick={() => {
+             handleViewFullHistory();
+             if (mobile && isNarrowMobile) setMobileToolbarMoreOpen(true);
+@@ -1536,57 +1522,10 @@ export function AppShell() {
+           disabled={!selectedSession}
+           title={selectedSession ? translate("history.full") : translate("history.unsaved")}
+           aria-label={translate("history.full")}
+-          style={{
+-            display: "flex",
+-            alignItems: "center",
+-            justifyContent: "center",
+-            gap: 6,
+-            width: mobile ? TOP_BAR_ICON_BUTTON_SIZE : undefined,
 -            height: "100%",
-+            height: 28, alignSelf: "center",
-             padding: mobile ? 0 : "0 12px",
-             background: "none",
-             border: "none",
+-            padding: mobile ? 0 : "0 12px",
+-            background: "none",
+-            border: "none",
 -            borderTop: "2px solid transparent",
 -            borderRight: "1px solid var(--border)",
-+            borderTop: "none", borderRadius: 7,
-             color: selectedSession ? "var(--text-muted)" : "var(--text-dim)",
-             cursor: selectedSession ? "pointer" : "not-allowed",
-             opacity: selectedSession ? 1 : 0.45,
-             flexShrink: 0,
+-            color: selectedSession ? "var(--text-muted)" : "var(--text-dim)",
+-            cursor: selectedSession ? "pointer" : "not-allowed",
+-            opacity: selectedSession ? 1 : 0.45,
+-            flexShrink: 0,
 -            fontSize: 11,
-+            fontSize: 12,
-             whiteSpace: "nowrap",
-             transition: "color 0.1s, background 0.1s, opacity 0.1s",
-           }}
-@@ -1567,25 +1542,10 @@ export function AppShell() {
-           }}
+-            whiteSpace: "nowrap",
+-            transition: "color 0.1s, background 0.1s, opacity 0.1s",
+-          }}
+-          onMouseEnter={(event) => {
+-            if (!selectedSession) return;
+-            event.currentTarget.style.color = "var(--text)";
+-            event.currentTarget.style.background = "var(--bg-hover)";
+-          }}
+-          onMouseLeave={(event) => {
+-            event.currentTarget.style.color = selectedSession ? "var(--text-muted)" : "var(--text-dim)";
+-            event.currentTarget.style.background = "none";
+-          }}
++          style={mobile ? { width: TOP_BAR_ICON_BUTTON_SIZE, alignSelf: "center" } : { alignSelf: "center" }}
            data-mobile-toolbar-action={mobile ? "history" : undefined}
          >
 -          <svg
@@ -4494,9 +5821,8 @@ index c8c4ba9..ed04857 100644
 -            strokeLinecap="round"
 -            strokeLinejoin="round"
 -            style={{
-+          <CarbonIcon icon={Carbon.RecentlyViewed} size={12} style={{
-               color: selectedSession ? "var(--text-muted)" : "var(--text-dim)",
-               flexShrink: 0,
+-              color: selectedSession ? "var(--text-muted)" : "var(--text-dim)",
+-              flexShrink: 0,
 -            }}
 -            aria-hidden="true"
 -          >
@@ -4504,72 +5830,110 @@ index c8c4ba9..ed04857 100644
 -            <path d="M3 3v5h5" />
 -            <path d="M12 7v5l3 2" />
 -          </svg>
-+            }} />
-           {!mobile && <span>{translate("history.label")}</span>}
+-          {!mobile && <span>{translate("history.label")}</span>}
++          <CarbonIcon icon={Carbon.RecentlyViewed} size={16} />
          </button>
          {(() => {
-@@ -1625,14 +1585,13 @@ export function AppShell() {
+           // 上下文压缩后当前消息可能不再包含 user 消息，需同时参考会话文件的消息总数。
+@@ -1615,6 +1554,8 @@ export function AppShell() {
+           return (
+             <button
+               type="button"
++              className="ui-btn ui-btn--sm ui-btn--icon"
++              data-active={isSuccess || undefined}
+               onClick={() => {
+                 void handleAutoName();
+                 if (mobile && isNarrowMobile) setMobileToolbarMoreOpen(true);
+@@ -1623,26 +1564,10 @@ export function AppShell() {
+               title={title}
+               aria-label={label}
                style={{
-                 display: "flex", alignItems: "center", justifyContent: "center", gap: 6,
-                 width: mobile ? TOP_BAR_ICON_BUTTON_SIZE : undefined,
+-                display: "flex", alignItems: "center", justifyContent: "center", gap: 6,
+-                width: mobile ? TOP_BAR_ICON_BUTTON_SIZE : undefined,
 -                height: "100%", padding: mobile ? 0 : "0 12px",
-+                height: 28, alignSelf: "center", padding: mobile ? 0 : "0 12px",
-                 background: "none", border: "none",
+-                background: "none", border: "none",
 -                borderTop: "2px solid transparent",
 -                borderRight: "1px solid var(--border)",
-+                borderTop: "none", borderRadius: 7,
-                 color: isError ? "#dc2626" : isSuccess ? "var(--accent)" : disabled ? "var(--text-dim)" : "var(--text-muted)",
-                 cursor: disabled ? "not-allowed" : "pointer",
-                 opacity: disabled && autoNameStatus.kind !== "naming" ? 0.45 : 1,
+-                color: isError ? "#dc2626" : isSuccess ? "var(--accent)" : disabled ? "var(--text-dim)" : "var(--text-muted)",
+-                cursor: disabled ? "not-allowed" : "pointer",
+-                opacity: disabled && autoNameStatus.kind !== "naming" ? 0.45 : 1,
 -                flexShrink: 0, fontSize: 11, whiteSpace: "nowrap",
-+                flexShrink: 0, fontSize: 12, whiteSpace: "nowrap",
-                 transition: "color 0.1s, background 0.1s, opacity 0.1s",
+-                transition: "color 0.1s, background 0.1s, opacity 0.1s",
+-              }}
+-              onMouseEnter={(event) => {
+-                if (disabled) return;
+-                event.currentTarget.style.color = isError ? "#dc2626" : "var(--text)";
+-                event.currentTarget.style.background = "var(--bg-hover)";
+-              }}
+-              onMouseLeave={(event) => {
+-                event.currentTarget.style.color = isError ? "#dc2626" : isSuccess ? "var(--accent)" : disabled ? "var(--text-dim)" : "var(--text-muted)";
+-                event.currentTarget.style.background = "none";
++                ...(mobile ? { width: TOP_BAR_ICON_BUTTON_SIZE } : null),
++                alignSelf: "center",
++                color: isError ? "var(--danger)" : undefined,
++                opacity: disabled && autoNameStatus.kind === "naming" ? 1 : undefined,
                }}
-               onMouseEnter={(event) => {
-@@ -1652,15 +1611,9 @@ export function AppShell() {
+               data-mobile-toolbar-action={mobile ? "name" : undefined}
+             >
+@@ -1652,51 +1577,30 @@ export function AppShell() {
                    <path d="M21 12a9 9 0 0 0-9-9" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
                  </svg>
                ) : isSuccess ? (
 -                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
 -                  <polyline points="20 6 9 17 4 12" />
 -                </svg>
-+                <CarbonIcon icon={Carbon.Checkmark} size={13} />
++                <CarbonIcon icon={Carbon.Checkmark} size={16} />
                ) : (
 -                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
 -                  <path d="m15 4 5 5L7 22l-5-5Z" />
 -                  <path d="m14 5 5 5" />
 -                  <path d="M6 4V2M5 3H3M19 19v3M17.5 20.5h3" />
 -                </svg>
-+                <CarbonIcon icon={Carbon.MagicWand} size={13} />
++                <CarbonIcon icon={Carbon.MagicWand} size={16} />
                )}
-               {!mobile && <span>{label}</span>}
+-              {!mobile && <span>{label}</span>}
              </button>
-@@ -1677,20 +1630,17 @@ export function AppShell() {
-               position: "relative",
-               display: "flex", alignItems: "center", justifyContent: "center", gap: 6,
-               width: mobile ? TOP_BAR_ICON_BUTTON_SIZE : undefined,
+           );
+         })()}
+         {hasSubagentSessions && (
+           <button
+             type="button"
++            className="ui-btn ui-btn--sm"
+             onClick={() => toggleTopPanel("agents", mobile)}
+             title={translate("agentSwitcher.title")}
+             aria-label={translate("agentSwitcher.title")}
+             aria-pressed={activeTopPanel === "agents"}
+-            style={{
+-              position: "relative",
+-              display: "flex", alignItems: "center", justifyContent: "center", gap: 6,
+-              width: mobile ? TOP_BAR_ICON_BUTTON_SIZE : undefined,
 -              height: "100%", padding: mobile ? 0 : "0 12px",
-+              height: 28, alignSelf: "center", padding: mobile ? 0 : "0 12px",
-               background: activeTopPanel === "agents" ? "var(--bg-selected)" : "none",
-               border: "none",
+-              background: activeTopPanel === "agents" ? "var(--bg-selected)" : "none",
+-              border: "none",
 -              borderTop: activeTopPanel === "agents" ? "2px solid var(--accent)" : "2px solid transparent",
 -              borderRight: "1px solid var(--border)",
-+              borderTop: "none", borderRadius: 7,
-               color: activeTopPanel === "agents" ? "var(--text)" : "var(--text-muted)",
+-              color: activeTopPanel === "agents" ? "var(--text)" : "var(--text-muted)",
 -              cursor: "pointer", flexShrink: 0, fontSize: 11, whiteSpace: "nowrap",
-+              cursor: "pointer", flexShrink: 0, fontSize: 12, whiteSpace: "nowrap",
-               transition: "color 0.1s, background 0.1s",
-             }}
+-              transition: "color 0.1s, background 0.1s",
+-            }}
++            style={{ position: "relative", alignSelf: "center", ...(mobile ? { width: TOP_BAR_ICON_BUTTON_SIZE, padding: 0 } : null) }}
              data-mobile-toolbar-action={mobile ? "agents" : undefined}
            >
 -            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
 -              <rect x="5" y="7" width="14" height="11" rx="2" /><path d="M9 11h.01M15 11h.01M9 15h6M12 7V4M10 4h4" />
 -            </svg>
-+            <CarbonIcon icon={Carbon.Bot} size={13} />
-             {!mobile && <span>{translate("agentSwitcher.title")}</span>}
+-            {!mobile && <span>{translate("agentSwitcher.title")}</span>}
++            <CarbonIcon icon={Carbon.Bot} size={16} />
              <span
                aria-hidden="true"
-@@ -1714,22 +1664,16 @@ export function AppShell() {
+               style={{
+                 minWidth: 15, height: 15, padding: "0 4px", display: "grid", placeItems: "center",
+-                borderRadius: 7, background: "var(--bg-selected)", color: "var(--accent)",
++                borderRadius: "var(--radius-sm)", background: "var(--bg-selected)", color: "var(--accent)",
+                 fontSize: 10, lineHeight: 1, fontVariantNumeric: "tabular-nums",
+                 ...(mobile ? { position: "absolute", top: 2, right: 2, minWidth: 13, height: 13, padding: "0 3px", fontSize: 9 } : {}),
+               }}
+@@ -1714,22 +1618,16 @@ export function AppShell() {
              aria-pressed={activeTopPanel === "branches"}
              style={{
                display: "flex", alignItems: "center", justifyContent: "center",
@@ -4579,7 +5943,7 @@ index c8c4ba9..ed04857 100644
                border: "none",
 -              borderTop: activeTopPanel === "branches" ? "2px solid var(--accent)" : "2px solid transparent",
 -              borderRight: "1px solid var(--border)",
-+              borderTop: "none", borderRadius: 7,
++              borderTop: "none", borderRadius: "var(--radius-sm)",
                color: activeTopPanel === "branches" ? "var(--text)" : "var(--text-muted)",
                cursor: "pointer", flexShrink: 0,
              }}
@@ -4595,27 +5959,37 @@ index c8c4ba9..ed04857 100644
            </button>
          ) : (
            <BranchNavigator
-@@ -1755,15 +1699,14 @@ export function AppShell() {
-           style={{
-             display: "flex", alignItems: "center", justifyContent: "center", gap: 6,
-             width: mobile ? TOP_BAR_ICON_BUTTON_SIZE : undefined,
+@@ -1747,74 +1645,29 @@ export function AppShell() {
+         <button
+           ref={systemBtnRef}
+           type="button"
++          className="ui-btn ui-btn--sm ui-btn--icon"
+           onClick={() => handleSystemInfoToggle("system", mobile)}
+           disabled={mobile && !showChat}
+           title={translate("system.prompt")}
+           aria-label={translate("system.prompt")}
+           aria-pressed={activeTopPanel === "system"}
+-          style={{
+-            display: "flex", alignItems: "center", justifyContent: "center", gap: 6,
+-            width: mobile ? TOP_BAR_ICON_BUTTON_SIZE : undefined,
 -            height: "100%", padding: mobile ? 0 : "0 12px",
-+            height: 28, alignSelf: "center", padding: mobile ? 0 : "0 12px",
-             background: activeTopPanel === "system" ? "var(--bg-selected)" : "none",
-             border: "none",
+-            background: activeTopPanel === "system" ? "var(--bg-selected)" : "none",
+-            border: "none",
 -            borderTop: activeTopPanel === "system" ? "2px solid var(--accent)" : "2px solid transparent",
 -            borderRight: "1px solid var(--border)",
-+            borderTop: "none", borderRadius: 7,
-             cursor: mobile && !showChat ? "not-allowed" : "pointer",
-             color: activeTopPanel === "system" ? "var(--text)" : "var(--text-muted)",
-             opacity: mobile && !showChat ? 0.45 : 1,
+-            cursor: mobile && !showChat ? "not-allowed" : "pointer",
+-            color: activeTopPanel === "system" ? "var(--text)" : "var(--text-muted)",
+-            opacity: mobile && !showChat ? 0.45 : 1,
 -            fontSize: 11, whiteSpace: "nowrap", transition: "color 0.1s, background 0.1s",
-+            fontSize: 12, whiteSpace: "nowrap", transition: "color 0.1s, background 0.1s",
-           }}
-           onMouseEnter={(event) => {
-             if (mobile && !showChat) return;
-@@ -1774,12 +1717,7 @@ export function AppShell() {
-           }}
+-          }}
+-          onMouseEnter={(event) => {
+-            if (mobile && !showChat) return;
+-            event.currentTarget.style.color = "var(--text)";
+-          }}
+-          onMouseLeave={(event) => {
+-            event.currentTarget.style.color = activeTopPanel === "system" ? "var(--text)" : "var(--text-muted)";
+-          }}
++          style={mobile ? { width: TOP_BAR_ICON_BUTTON_SIZE, alignSelf: "center" } : { alignSelf: "center" }}
            data-mobile-toolbar-action={mobile ? "system" : undefined}
          >
 -          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ color: systemPrompt ? "var(--accent)" : "var(--text-dim)", flexShrink: 0 }} aria-hidden="true">
@@ -4624,45 +5998,63 @@ index c8c4ba9..ed04857 100644
 -            <line x1="8" y1="13" x2="16" y2="13" />
 -            <line x1="8" y1="17" x2="13" y2="17" />
 -          </svg>
-+          <CarbonIcon icon={Carbon.Document} size={12} style={{ color: systemPrompt ? "var(--accent)" : "var(--text-dim)", flexShrink: 0 }} />
-           {!mobile && <span>{translate("system.label")}</span>}
+-          {!mobile && <span>{translate("system.label")}</span>}
++          <CarbonIcon icon={Carbon.Document} size={16} />
          </button>
          <button
-@@ -1792,15 +1730,14 @@ export function AppShell() {
-           style={{
-             display: "flex", alignItems: "center", justifyContent: "center", gap: 6,
-             width: mobile ? TOP_BAR_ICON_BUTTON_SIZE : undefined,
+           type="button"
++          className="ui-btn ui-btn--sm ui-btn--icon"
+           onClick={() => handleSystemInfoToggle("tools", mobile)}
+           disabled={mobile && !showChat}
+           title={translate("tools.title")}
+           aria-label={translate("tools.title")}
+           aria-pressed={activeTopPanel === "tools"}
+-          style={{
+-            display: "flex", alignItems: "center", justifyContent: "center", gap: 6,
+-            width: mobile ? TOP_BAR_ICON_BUTTON_SIZE : undefined,
 -            height: "100%", padding: mobile ? 0 : "0 12px",
-+            height: 28, alignSelf: "center", padding: mobile ? 0 : "0 12px",
-             background: activeTopPanel === "tools" ? "var(--bg-selected)" : "none",
-             border: "none",
+-            background: activeTopPanel === "tools" ? "var(--bg-selected)" : "none",
+-            border: "none",
 -            borderTop: activeTopPanel === "tools" ? "2px solid var(--accent)" : "2px solid transparent",
 -            borderRight: "1px solid var(--border)",
-+            borderTop: "none", borderRadius: 7,
-             cursor: mobile && !showChat ? "not-allowed" : "pointer",
-             color: activeTopPanel === "tools" ? "var(--text)" : "var(--text-muted)",
-             opacity: mobile && !showChat ? 0.45 : 1,
+-            cursor: mobile && !showChat ? "not-allowed" : "pointer",
+-            color: activeTopPanel === "tools" ? "var(--text)" : "var(--text-muted)",
+-            opacity: mobile && !showChat ? 0.45 : 1,
 -            fontSize: 11, whiteSpace: "nowrap", transition: "color 0.1s, background 0.1s",
-+            fontSize: 12, whiteSpace: "nowrap", transition: "color 0.1s, background 0.1s",
-           }}
-           onMouseEnter={(event) => {
-             if (mobile && !showChat) return;
-@@ -1811,9 +1748,7 @@ export function AppShell() {
-           }}
+-          }}
+-          onMouseEnter={(event) => {
+-            if (mobile && !showChat) return;
+-            event.currentTarget.style.color = "var(--text)";
+-          }}
+-          onMouseLeave={(event) => {
+-            event.currentTarget.style.color = activeTopPanel === "tools" ? "var(--text)" : "var(--text-muted)";
+-          }}
++          style={mobile ? { width: TOP_BAR_ICON_BUTTON_SIZE, alignSelf: "center" } : { alignSelf: "center" }}
            data-mobile-toolbar-action={mobile ? "tools" : undefined}
          >
 -          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ color: systemTools?.some((tool) => tool.active) ? "var(--accent)" : "var(--text-dim)", flexShrink: 0 }} aria-hidden="true">
 -            <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.8-3.8a6 6 0 0 1-7.9 7.9l-6.9 6.9a2.1 2.1 0 0 1-3-3l6.9-6.9a6 6 0 0 1 7.9-7.9z" />
 -          </svg>
-+          <CarbonIcon icon={Carbon.Tools} size={12} style={{ color: systemTools?.some((tool) => tool.active) ? "var(--accent)" : "var(--text-dim)", flexShrink: 0 }} />
-           {!mobile && <span>{translate("tools.label")}</span>}
+-          {!mobile && <span>{translate("tools.label")}</span>}
++          <CarbonIcon icon={Carbon.Tools} size={16} />
          </button>
        </div>
-@@ -1885,14 +1820,14 @@ export function AppShell() {
-           gap: mobile ? 7 : 10,
-           paddingLeft: mobile ? 6 : 12,
-           paddingRight: mobile ? 6 : 12,
+     );
+@@ -1880,19 +1733,20 @@ export function AppShell() {
+         style={{
+           marginLeft: mobile ? 0 : "auto",
+           display: "flex", alignItems: "center", justifyContent: "flex-end",
+-          flex: mobile ? 1 : undefined,
++          // Desktop: the title gives way, never the numbers.
++          flex: mobile ? 1 : "none",
+           minWidth: 0,
+-          gap: mobile ? 7 : 10,
+-          paddingLeft: mobile ? 6 : 12,
+-          paddingRight: mobile ? 6 : 12,
 -          height: "100%",
++          gap: mobile ? 7 : 8,
++          paddingLeft: mobile ? 6 : 8,
++          paddingRight: mobile ? 6 : 8,
 +          height: 28, alignSelf: "center",
            overflow: "hidden",
            visibility: covered ? "hidden" : "visible",
@@ -4671,12 +6063,20 @@ index c8c4ba9..ed04857 100644
            border: "none",
 -          borderTop: activeTopPanel === "session" ? "2px solid var(--accent)" : "2px solid transparent",
 -          fontSize: 11, color: "var(--text-muted)",
-+          borderTop: "none", borderRadius: 7,
-+          fontSize: 12, color: "var(--text-muted)",
++          borderTop: "none", borderRadius: "var(--radius-sm)",
++          fontSize: 12, color: activeTopPanel === "session" ? "var(--text)" : "var(--text-dim)",
            whiteSpace: "nowrap", cursor: showChat ? "pointer" : "default",
            fontVariantNumeric: "tabular-nums",
            transition: "color 0.1s, background 0.1s",
-@@ -1908,17 +1843,13 @@ export function AppShell() {
+@@ -1901,24 +1755,20 @@ export function AppShell() {
+           if (showChat && !covered) event.currentTarget.style.color = "var(--text)";
+         }}
+         onMouseLeave={(event) => {
+-          event.currentTarget.style.color = activeTopPanel === "session" ? "var(--text)" : "var(--text-muted)";
++          event.currentTarget.style.color = activeTopPanel === "session" ? "var(--text)" : "var(--text-dim)";
+         }}
+       >
+         {mobile ? (
            <>
              {tokens && tokens.input > 0 && (
                <span className="mobile-session-stat-io" style={{ display: "flex", alignItems: "center", gap: 2, flexShrink: 0 }}>
@@ -4696,7 +6096,7 @@ index c8c4ba9..ed04857 100644
                  {formatCompact(tokens.output)}
                </span>
              )}
-@@ -1942,25 +1873,19 @@ export function AppShell() {
+@@ -1942,25 +1792,19 @@ export function AppShell() {
            <>
              {tokens && tokens.input > 0 && (
                <span style={{ display: "flex", alignItems: "center", gap: 4 }}>
@@ -4725,7 +6125,7 @@ index c8c4ba9..ed04857 100644
                  {formatCompact(tokens.cacheRead)}
                </span>
              )}
-@@ -1971,9 +1896,7 @@ export function AppShell() {
+@@ -1971,9 +1815,7 @@ export function AppShell() {
              )}
              {desktopContextText && (
                <span style={{ display: "flex", alignItems: "center", gap: 4, color: contextColor }}>
@@ -4736,7 +6136,7 @@ index c8c4ba9..ed04857 100644
                  {desktopContextText}
                </span>
              )}
-@@ -2011,9 +1934,7 @@ export function AppShell() {
+@@ -2011,9 +1853,7 @@ export function AppShell() {
          onMouseEnter={(event) => { if (!covered) event.currentTarget.style.color = "var(--text)"; }}
          onMouseLeave={(event) => { event.currentTarget.style.color = rightPanelOpen ? "var(--text)" : "var(--text-muted)"; }}
        >
@@ -4747,7 +6147,7 @@ index c8c4ba9..ed04857 100644
        </button>
      );
    };
-@@ -2178,13 +2099,9 @@ export function AppShell() {
+@@ -2178,13 +2018,9 @@ export function AppShell() {
              onMouseLeave={(e) => { e.currentTarget.style.color = "var(--text-muted)"; }}
            >
              {sidebarOpen ? (
@@ -4763,7 +6163,7 @@ index c8c4ba9..ed04857 100644
              )}
            </button>
            {isMobile && (
-@@ -2221,13 +2138,9 @@ export function AppShell() {
+@@ -2221,13 +2057,9 @@ export function AppShell() {
                    }}
                  >
                    {mobileToolbarMoreOpen ? (
@@ -4779,7 +6179,31 @@ index c8c4ba9..ed04857 100644
                    )}
                  </button>
                )}
-@@ -2443,14 +2356,9 @@ export function AppShell() {
+@@ -2262,6 +2094,14 @@ export function AppShell() {
+           {!isMobile && (
+             <>
+               {renderProjectTrustWarning(false)}
++              {/* The session's title leads the header, as in Claude Desktop; its actions
++                  are quiet icons on the right, then the session's usage. */}
++              <div
++                className={`session-header-title${selectedSession ? "" : " is-new"}`}
++                title={selectedSession ? sessionHeaderTitle(selectedSession) : undefined}
++              >
++                {showChat ? (selectedSession ? sessionHeaderTitle(selectedSession) : translate("i18n.newSession")) : null}
++              </div>
+               {renderChatToolbarActions(false)}
+               {renderSessionStatsButton(false)}
+             </>
+@@ -2426,7 +2266,7 @@ export function AppShell() {
+                             color: copied ? "var(--accent)" : "var(--text-dim)",
+                             background: "transparent",
+                             border: "1px solid var(--border)",
+-                            borderRadius: 4,
++                            borderRadius: "var(--radius-xs)",
+                             cursor: "pointer",
+                             flex: "0 0 auto",
+                             transition: "color 0.12s, border-color 0.12s, background 0.12s",
+@@ -2443,14 +2283,9 @@ export function AppShell() {
                            }}
                          >
                            {copied ? (
@@ -4796,7 +6220,7 @@ index c8c4ba9..ed04857 100644
                            )}
                          </button>
                        );
-@@ -2601,9 +2509,7 @@ export function AppShell() {
+@@ -2601,9 +2436,7 @@ export function AppShell() {
                </div>
              ) : (
                <div style={{ position: "absolute", top: 12, left: 12, display: "flex", alignItems: "flex-start", gap: 8, userSelect: "none", pointerEvents: "none" }}>
@@ -4807,7 +6231,7 @@ index c8c4ba9..ed04857 100644
                  <div>
                     <div style={{ fontSize: 18, fontWeight: 600, color: "var(--text)", marginBottom: 8 }}>{translate("workspace.getStarted")}</div>
                    <div style={{ fontSize: 12, color: "var(--text-muted)", lineHeight: 1.8 }}>
-@@ -2673,11 +2579,7 @@ export function AppShell() {
+@@ -2673,11 +2506,7 @@ export function AppShell() {
              title={translate(rightPanelFullWidth ? "files.restorePanelWidth" : "files.expandPanel")}
              aria-label={translate(rightPanelFullWidth ? "files.restorePanelWidth" : "files.expandPanel")}
            >
@@ -4820,7 +6244,7 @@ index c8c4ba9..ed04857 100644
            </button>
            <button
              type="button"
-@@ -2695,9 +2597,7 @@ export function AppShell() {
+@@ -2695,9 +2524,7 @@ export function AppShell() {
              onMouseEnter={(event) => { event.currentTarget.style.color = "var(--accent)"; }}
              onMouseLeave={(event) => { event.currentTarget.style.color = "var(--text)"; }}
            >
@@ -4832,7 +6256,7 @@ index c8c4ba9..ed04857 100644
          </div>
  
 diff --git a/components/BranchNavigator.tsx b/components/BranchNavigator.tsx
-index 0f8186b..e8bafeb 100644
+index 0f8186b..e7fde3d 100644
 --- a/components/BranchNavigator.tsx
 +++ b/components/BranchNavigator.tsx
 @@ -3,6 +3,8 @@
@@ -4844,6 +6268,15 @@ index 0f8186b..e8bafeb 100644
  
  interface Props {
    tree: SessionTreeNode[];
+@@ -209,7 +211,7 @@ function TreeNodeView({ node, activePathIds, depth, isLast, parentLines, onSelec
+             color: role === "user" ? "var(--accent)" : "var(--text-dim)",
+             background: role === "user" ? "rgba(37,99,235,0.08)" : "var(--bg-hover)",
+             border: `1px solid ${role === "user" ? "rgba(37,99,235,0.2)" : "var(--border)"}`,
+-            borderRadius: 3,
++            borderRadius: "var(--radius-xs)",
+             padding: "0 4px",
+             marginRight: 5,
+             flexShrink: 0,
 @@ -304,18 +306,11 @@ export function BranchNavigator({ tree, activeLeafId, onLeafChange, inline, cont
    const hasContent = !noBranchReason && topLevel.length > 0;
  
@@ -4909,6 +6342,26 @@ index 0000000..00d78bd
 +    </svg>
 +  );
 +}
+diff --git a/components/ChatAppearance.test.mjs b/components/ChatAppearance.test.mjs
+index 42d3545..8418d90 100644
+--- a/components/ChatAppearance.test.mjs
++++ b/components/ChatAppearance.test.mjs
+@@ -6,9 +6,12 @@ const jiti = createJiti(import.meta.url);
+ const { clampChatContentWidth, clampChatContentFontSize } = await jiti.import("../hooks/useChatAppearance.ts");
+ 
+ test("chat width validation preserves the default and supported range", () => {
+-  assert.equal(clampChatContentWidth(undefined), 820);
+-  assert.equal(clampChatContentWidth("invalid"), 820);
+-  assert.equal(clampChatContentWidth(700), 820);
++  assert.equal(clampChatContentWidth(undefined), 720);
++  assert.equal(clampChatContentWidth(null), 720, "nothing saved in localStorage is the default");
++  assert.equal(clampChatContentWidth(""), 720);
++  assert.equal(clampChatContentWidth("invalid"), 720);
++  assert.equal(clampChatContentWidth(600), 640);
++  assert.equal(clampChatContentWidth(700), 700);
+   assert.equal(clampChatContentWidth(1104), 1104);
+   assert.equal(clampChatContentWidth(2400), 2000);
+ });
 diff --git a/components/ChatInput.test.mjs b/components/ChatInput.test.mjs
 index adfcc12..cb17981 100644
 --- a/components/ChatInput.test.mjs
@@ -4923,7 +6376,7 @@ index adfcc12..cb17981 100644
    assert.doesNotMatch(html, /type="file"|Attach files|Change tool preset/);
  });
 diff --git a/components/ChatInput.tsx b/components/ChatInput.tsx
-index 9a0a1b7..a7549d0 100644
+index 9a0a1b7..7dd9112 100644
 --- a/components/ChatInput.tsx
 +++ b/components/ChatInput.tsx
 @@ -35,6 +35,8 @@ import { useFontPreferences } from "@/hooks/useFontPreferences";
@@ -4935,7 +6388,15 @@ index 9a0a1b7..a7549d0 100644
  
  export { filterModelOptions } from "./ModelSelector";
  
-@@ -572,22 +574,7 @@ function ModelNoticeBanner({ tone, title, body, onClose }: { tone: "error" | "wa
+@@ -565,29 +567,14 @@ function ModelNoticeBanner({ tone, title, body, onClose }: { tone: "error" | "wa
+         padding: "7px 10px",
+         overflowY: "auto",
+         border: `1px solid rgba(${color},0.3)`,
+-        borderRadius: 6,
++        borderRadius: "var(--radius-sm)",
+         background: `rgba(${color},0.07)`,
+         color: `rgb(${color})`,
+         fontSize: 11,
          lineHeight: 1.45,
        }}
      >
@@ -4959,6 +6420,33 @@ index 9a0a1b7..a7549d0 100644
        <div style={{ minWidth: 0, flex: 1 }}>
          <div style={{ fontWeight: 600 }}>{title}</div>
          <div style={{ whiteSpace: "pre-wrap", overflowWrap: "anywhere" }}>{body}</div>
+@@ -1729,7 +1716,7 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
+         style={{ display: "none" }}
+         onChange={handleFilePick}
+       />}
+-      <div style={{ maxWidth: "var(--chat-content-max-width, 820px)", margin: "0 auto" }}>
++      <div style={{ maxWidth: "var(--chat-content-max-width, 720px)", margin: "0 auto" }}>
+         <ModelErrorBanner error={modelError} />
+         <ModelScopeWarningBanner warnings={modelScopeWarnings} />
+         {showImageUnsupportedWarning && (() => {
+@@ -1748,7 +1735,7 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
+           <div style={{
+             marginBottom: 8,
+             border: "1px solid var(--border)",
+-            borderRadius: 6,
++            borderRadius: "var(--radius-sm)",
+             background: "var(--bg-panel)",
+             padding: "5px 0",
+           }}>
+@@ -1781,7 +1768,7 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
+                     color: "var(--text)",
+                     background: "transparent",
+                     border: "1px solid var(--border)",
+-                    borderRadius: 7,
++                    borderRadius: "var(--radius-sm)",
+                     cursor: "pointer",
+                     transition: "background 0.12s, border-color 0.12s",
+                     whiteSpace: "nowrap",
 @@ -1795,10 +1782,7 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
                      e.currentTarget.style.borderColor = "var(--border)";
                    }}
@@ -4971,8 +6459,12 @@ index 9a0a1b7..a7549d0 100644
                     {t("chat.recall")}
                  </button>
                )}
-@@ -1819,10 +1803,7 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
-             borderRadius: 6, fontSize: 12, color: "rgba(180,130,0,0.9)",
+@@ -1816,13 +1800,10 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
+           <div style={{
+             marginBottom: 8, padding: "5px 10px",
+             background: "rgba(234,179,8,0.08)", border: "1px solid rgba(234,179,8,0.25)",
+-            borderRadius: 6, fontSize: 12, color: "rgba(180,130,0,0.9)",
++            borderRadius: "var(--radius-sm)", fontSize: 12, color: "rgba(180,130,0,0.9)",
              display: "flex", alignItems: "center", gap: 6,
            }}>
 -            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}>
@@ -4983,8 +6475,12 @@ index 9a0a1b7..a7549d0 100644
               {t("chat.retrying", { attempt: retryInfo.attempt, max: retryInfo.maxAttempts })}{retryInfo.errorMessage && <span style={{ opacity: 0.7, marginLeft: 4 }}>— {retryInfo.errorMessage}</span>}
            </div>
          )}
-@@ -1833,9 +1814,7 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
-             borderRadius: 6, fontSize: 12, color: "rgba(5,150,105,0.95)",
+@@ -1830,12 +1811,10 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
+           <div style={{
+             marginBottom: 8, padding: "5px 10px",
+             background: "rgba(16,185,129,0.08)", border: "1px solid rgba(16,185,129,0.24)",
+-            borderRadius: 6, fontSize: 12, color: "rgba(5,150,105,0.95)",
++            borderRadius: "var(--radius-sm)", fontSize: 12, color: "rgba(5,150,105,0.95)",
              display: "flex", alignItems: "center", gap: 6,
            }}>
 -            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}>
@@ -4994,6 +6490,24 @@ index 9a0a1b7..a7549d0 100644
              {compactResultText}
            </div>
          )}
+@@ -1850,7 +1829,7 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
+               padding: onDismissCompactError ? "3px 3px 3px 10px" : "7px 10px",
+               background: "rgba(239,68,68,0.07)",
+               border: "1px solid rgba(239,68,68,0.3)",
+-              borderRadius: 6,
++              borderRadius: "var(--radius-sm)",
+               color: "#ef4444",
+               fontFamily: "var(--font-mono)",
+               fontSize: 12,
+@@ -1871,7 +1850,7 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
+                   <img
+                     src={img.previewUrl}
+                     alt=""
+-                    style={{ width: 56, height: 56, objectFit: "cover", borderRadius: 6, border: "1px solid var(--border)", display: "block" }}
++                    style={{ width: 56, height: 56, objectFit: "cover", borderRadius: "var(--radius-sm)", border: "1px solid var(--border)", display: "block" }}
+                   />
+                 </ImagePreview>
+                 <button
 @@ -1885,9 +1864,7 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
                      cursor: "pointer", padding: 0, color: "var(--text-muted)",
                    }}
@@ -5005,6 +6519,20 @@ index 9a0a1b7..a7549d0 100644
                  </button>
                </div>
              ))}
+@@ -1905,10 +1882,10 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
+                 right: 0,
+                 bottom: "calc(100% + 8px)",
+                 zIndex: 120,
+-                background: "var(--bg)",
++                background: "var(--bg-elevated)",
+                 border: "1px solid var(--border)",
+-                borderRadius: 8,
+-                boxShadow: "0 -6px 20px rgba(0,0,0,0.12)",
++                borderRadius: "var(--radius-lg)",
++                boxShadow: "var(--shadow-pop)",
+                 overflow: "hidden",
+                 maxHeight: "min(44vh, 360px)",
+               }}
 @@ -1924,21 +1901,7 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
                    color: "var(--text-dim)",
                  }}
@@ -5028,11 +6556,85 @@ index 9a0a1b7..a7549d0 100644
                </div>
                <div style={{ maxHeight: "calc(min(44vh, 360px) - 31px)", overflowY: "auto", padding: 4 }}>
                  {inputHistory.map((item, index) => {
-@@ -2245,14 +2208,14 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
-               flexDirection: compact ? "column" : "row",
+@@ -1962,7 +1925,7 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
+                         gap: 8,
+                         padding: "7px 8px",
+                         border: "none",
+-                        borderRadius: 6,
++                        borderRadius: "var(--radius-sm)",
+                         background: active ? "var(--bg-selected)" : "none",
+                         color: "var(--text)",
+                         cursor: "pointer",
+@@ -1992,10 +1955,10 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
+                 right: 0,
+                 bottom: "calc(100% + 8px)",
+                 zIndex: 120,
+-                background: "var(--bg)",
++                background: "var(--bg-elevated)",
+                 border: "1px solid var(--border)",
+-                borderRadius: 8,
+-                boxShadow: "0 -6px 20px rgba(0,0,0,0.12)",
++                borderRadius: "var(--radius-lg)",
++                boxShadow: "var(--shadow-pop)",
+                 overflow: "hidden",
+                 boxSizing: "border-box",
+                 display: "flex",
+@@ -2081,7 +2044,7 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
+                                 justifyContent: "center",
+                                 padding: "9px 10px",
+                                 border: `1px solid ${active ? "var(--accent)" : "var(--border)"}`,
+-                                borderRadius: 7,
++                                borderRadius: "var(--radius-sm)",
+                                 background: active ? "var(--bg-selected)" : "var(--bg-panel)",
+                                 color: "var(--text)",
+                                 cursor: "pointer",
+@@ -2102,7 +2065,7 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
+                                     marginLeft: 6,
+                                     padding: "0 4px",
+                                     border: "1px solid var(--border)",
+-                                    borderRadius: 3,
++                                    borderRadius: "var(--radius-xs)",
+                                     fontSize: 9,
+                                     color: "var(--text-dim)",
+                                     whiteSpace: "nowrap",
+@@ -2151,10 +2114,10 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
+                   right: 0,
+                   bottom: "calc(100% + 8px)",
+                   zIndex: 120,
+-                  background: "var(--bg)",
++                  background: "var(--bg-elevated)",
+                   border: "1px solid var(--border)",
+-                  borderRadius: 8,
+-                  boxShadow: "0 -6px 20px rgba(0,0,0,0.12)",
++                  borderRadius: "var(--radius-lg)",
++                  boxShadow: "var(--shadow-pop)",
+                   overflow: "hidden",
+                   boxSizing: "border-box",
+                   display: "flex",
+@@ -2213,7 +2176,7 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
+                             gap: 8,
+                             padding: "6px 8px",
+                             border: "none",
+-                            borderRadius: 6,
++                            borderRadius: "var(--radius-sm)",
+                             background: active ? "var(--bg-selected)" : "none",
+                             color: "var(--text)",
+                             cursor: "pointer",
+@@ -2239,21 +2202,15 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
+             );
+           })()}
+           <div
+-            style={{
++            className={compact ? undefined : "composer"}
++            style={compact ? {
+               minWidth: 0,
+               display: "flex",
+-              flexDirection: compact ? "column" : "row",
++              flexDirection: "column",
                gap: 8,
-               alignItems: compact ? "stretch" : "center",
--              background: "var(--bg)",
+-              alignItems: compact ? "stretch" : "center",
++              alignItems: "stretch",
+               background: "var(--bg)",
 -              border: compact ? "none" : `1px solid ${bashMode ? "var(--tool-bg)" : isStreaming && (onSteer || onFollowUp)
 -                ? "rgba(234,179,8,0.4)"
 -                : "color-mix(in srgb, var(--border) 70%, transparent)"}`,
@@ -5040,114 +6642,400 @@ index 9a0a1b7..a7549d0 100644
 -              padding: compact ? 0 : isMobile ? "6px 6px 6px 12px" : "10px 10px 10px 14px",
 -              boxShadow: compact ? "none" : "0 1px 2px rgba(15,23,42,0.04), 0 8px 24px -12px rgba(15,23,42,0.10)",
 -              transition: "border-color 0.15s, background 0.15s, box-shadow 0.15s",
-+              // A filled box, no outline (the design system's composer): the
-+              // Steer / Follow-up buttons say when a message would join a run.
-+              background: compact ? "var(--bg)" : "var(--bg-surface)",
-+              border: "none",
-+              borderRadius: compact ? 0 : 18,
-+              padding: compact ? 0 : isMobile ? "6px 6px 6px 12px" : "10px 10px 10px 16px",
-+              boxShadow: "none",
-+              transition: "background 0.15s",
-             } as React.CSSProperties}
+-            } as React.CSSProperties}
++            } : undefined}
            >
            <textarea
-@@ -2317,18 +2280,16 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
-                   style={{
-                     display: "flex", alignItems: "center", gap: 5,
-                     padding: "7px 12px",
+             ref={textareaRef}
+@@ -2290,7 +2247,9 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
+             }
+             rows={1}
+             style={{
+-              flex: compact ? "none" : 1,
++              // Its own height (set from the draft): the box is a column now, where flex: 1 would
++              // make that height 0 and keep a long draft on one scrolling line.
++              flex: "none",
+               minWidth: 0,
+               width: "100%",
+               background: "none",
+@@ -2307,562 +2266,447 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
+             }}
+           />
+ 
+-          {isStreaming ? (
+-            <div style={{ display: "flex", alignItems: "center", gap: 6, flexShrink: 0, alignSelf: "flex-end" }}>
+-              {onSteer && (
+-                <button
+-                  onClick={() => sendQueued("steer")}
+-                  disabled={!canQueueStreamingMessage}
+-                  title={t("chat.steerHint")}
+-                  style={{
+-                    display: "flex", alignItems: "center", gap: 5,
+-                    padding: "7px 12px",
 -                    background: canQueueStreamingMessage ? "rgba(234,179,8,0.12)" : "none",
 -                    border: "1px solid rgba(234,179,8,0.35)",
 -                    borderRadius: 8,
-+                    background: canQueueStreamingMessage ? "rgba(234,179,8,0.14)" : "var(--bg-subtle)",
-+                    border: "none",
-+                    borderRadius: 9,
-                     color: canQueueStreamingMessage ? "rgba(180,130,0,1)" : "var(--text-dim)",
-                     cursor: canQueueStreamingMessage ? "pointer" : "not-allowed",
-                     fontSize: 13, fontWeight: 600, letterSpacing: "-0.01em",
-                     transition: "background 0.12s",
-                   }}
-                 >
+-                    color: canQueueStreamingMessage ? "rgba(180,130,0,1)" : "var(--text-dim)",
+-                    cursor: canQueueStreamingMessage ? "pointer" : "not-allowed",
+-                    fontSize: 13, fontWeight: 600, letterSpacing: "-0.01em",
+-                    transition: "background 0.12s",
+-                  }}
+-                >
 -                  <svg width="12" height="12" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
 -                    <path d="M5 1 L9 5 L5 9" /><line x1="1" y1="5" x2="9" y2="5" />
 -                  </svg>
-+                  <CarbonIcon icon={Carbon.ArrowRight} size={12} />
-                   {t("chat.steer")}
-                 </button>
-               )}
-@@ -2341,19 +2302,16 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
-                   style={{
-                     display: "flex", alignItems: "center", gap: 5,
-                     padding: "7px 12px",
+-                  {t("chat.steer")}
+-                </button>
+-              )}
+-              {onFollowUp && (
+-                <button
+-                  onClick={() => sendQueued("followup")}
+-                  disabled={!canQueueStreamingMessage}
+-                  title={`${t("chat.followUpHint")} (${isMobile ? "Ctrl/Cmd+" : ""}Alt/Option+Enter)`}
+-                  aria-keyshortcuts={isMobile ? "Control+Alt+Enter Meta+Alt+Enter" : "Alt+Enter"}
+-                  style={{
+-                    display: "flex", alignItems: "center", gap: 5,
+-                    padding: "7px 12px",
 -                    background: canQueueStreamingMessage ? "rgba(129,140,248,0.12)" : "none",
 -                    border: "1px solid rgba(129,140,248,0.35)",
 -                    borderRadius: 8,
-+                    background: canQueueStreamingMessage ? "rgba(129,140,248,0.14)" : "var(--bg-subtle)",
-+                    border: "none",
-+                    borderRadius: 9,
-                     color: canQueueStreamingMessage ? "rgba(99,102,241,1)" : "var(--text-dim)",
-                     cursor: canQueueStreamingMessage ? "pointer" : "not-allowed",
-                     fontSize: 13, fontWeight: 600, letterSpacing: "-0.01em",
-                     transition: "background 0.12s",
-                   }}
-                 >
+-                    color: canQueueStreamingMessage ? "rgba(99,102,241,1)" : "var(--text-dim)",
+-                    cursor: canQueueStreamingMessage ? "pointer" : "not-allowed",
+-                    fontSize: 13, fontWeight: 600, letterSpacing: "-0.01em",
+-                    transition: "background 0.12s",
+-                  }}
+-                >
 -                  <svg width="12" height="12" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
 -                    <line x1="5" y1="1" x2="5" y2="6" /><polyline points="2.5 3.5 5 1 7.5 3.5" />
 -                    <line x1="2" y1="9" x2="8" y2="9" />
 -                  </svg>
-+                  <CarbonIcon icon={Carbon.Queued} size={12} />
-                   {t("chat.followUp")}
-                 </button>
-               )}
-@@ -2367,26 +2325,18 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
-               style={{
-                 flexShrink: 0,
-                 alignSelf: "flex-end",
+-                  {t("chat.followUp")}
+-                </button>
+-              )}
+-            </div>
+-          ) : (
+-            <button
+-              onClick={handleSend}
+-              disabled={!value.trim() && !attachedImages.length}
+-              title={t("chat.send")}
+-              aria-label={t("chat.send")}
+-              style={{
+-                flexShrink: 0,
+-                alignSelf: "flex-end",
 -                display: "flex", alignItems: "center", justifyContent: "center", gap: 6,
 -                // Mobile: icon-only so the placeholder and draft keep the width.
 -                ...(isMobile ? { width: 36, height: 36, padding: 0 } : { padding: "7px 14px" }),
 -                background: (value.trim() || attachedImages.length) ? "var(--accent)" : "var(--bg-panel)",
-+                display: "flex", alignItems: "center", justifyContent: "center",
-+                // A square icon button, as in Claude and HuggingChat: the draft keeps the width.
-+                width: isMobile ? 36 : 32, height: isMobile ? 36 : 32, padding: 0,
-+                background: (value.trim() || attachedImages.length) ? "var(--primary)" : "var(--bg-selected)",
-                 border: "none",
+-                border: "none",
 -                borderRadius: 8,
 -                color: (value.trim() || attachedImages.length) ? "var(--accent-contrast)" : "var(--text-dim)",
-+                borderRadius: 9,
-+                color: (value.trim() || attachedImages.length) ? "var(--primary-contrast)" : "var(--text-dim)",
-                 cursor: (value.trim() || attachedImages.length) ? "pointer" : "not-allowed",
+-                cursor: (value.trim() || attachedImages.length) ? "pointer" : "not-allowed",
 -                fontSize: 13,
 -                fontWeight: 600,
 -                letterSpacing: "-0.01em",
 -                boxShadow: (value.trim() || attachedImages.length) ? "0 1px 3px color-mix(in srgb, var(--accent) 25%, transparent)" : "none",
 -                transition: "background 0.15s, box-shadow 0.15s",
-+                transition: "background 0.15s, color 0.15s",
-               }}
-             >
+-              }}
+-            >
 -              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
 -                <line x1="2" y1="7" x2="11" y2="7" />
 -                <polyline points="7.5 3 12 7 7.5 11" />
 -              </svg>
 -              {!isMobile && t("chat.send")}
-+              <CarbonIcon icon={Carbon.ArrowUp} size={16} />
-             </button>
-           )}
-           </div>
-@@ -2432,11 +2382,7 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
-                 e.currentTarget.style.color = attachedImages.length ? "var(--accent)" : "var(--text-muted)";
-               }}
-             >
+-            </button>
+-          )}
+-          </div>
+-        </div>
+-
+-        {/* Bash mode status label */}
+-        {bashMode && (
+-          <div className="text-xs px-2 py-1" style={{ color: bashExcluded ? "var(--text-muted)" : "var(--accent)", marginTop: 4 }}>
+-             {t("chat.shell")} · {bashExcluded ? t("chat.outputLocal") : t("chat.outputModel")}
+-          </div>
+-        )}
+-
+-        {/* Bottom bar: left | center (context) | right */}
+-        {!compact && <div className="chat-input-controls" style={{
+-          marginTop: isMobile ? 4 : 8,
+-          display: isMobile ? "grid" : "flex",
+-          gridTemplateColumns: isMobile ? "minmax(0, 1fr) auto" : undefined,
+-          alignItems: "center",
+-          gap: 6,
+-        }}>
+-
+-          {/* LEFT: attach + model selector (idle) or steer/followup toggle (streaming) */}
+-          <div style={{ flex: isMobile ? "1 1 auto" : "0 0 auto", minWidth: 0, display: "flex", alignItems: "center", gap: 2 }}>
+-            <button
+-              onClick={() => fileInputRef.current?.click()}
+-             title={t("chat.attachFiles")}
+-              style={{
+-                flexShrink: 0, display: "flex", alignItems: "center", justifyContent: "center",
+-                width: 32, height: 32, padding: 0,
+-                background: "none", border: "none",
+-                borderRadius: 9,
+-                color: attachedImages.length ? "var(--accent)" : "var(--text-muted)",
+-                cursor: "pointer",
+-                opacity: 1,
+-                transition: "background 0.12s, color 0.12s",
+-              }}
+-              onMouseEnter={(e) => {
+-                e.currentTarget.style.background = "var(--bg-hover)";
+-                e.currentTarget.style.color = attachedImages.length ? "var(--accent)" : "var(--text)";
+-              }}
+-              onMouseLeave={(e) => {
+-                e.currentTarget.style.background = "none";
+-                e.currentTarget.style.color = attachedImages.length ? "var(--accent)" : "var(--text-muted)";
+-              }}
+-            >
 -              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
 -                <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
 -                <circle cx="8.5" cy="8.5" r="1.5" />
 -                <polyline points="21 15 16 10 5 21" />
 -              </svg>
-+              <CarbonIcon icon={Carbon.Attachment} size={15} />
-             </button>
-             {/* Model selector - visible always, disabled while the session or switch is busy */}
-             {(modelOptions.length > 0 || model || modelError) && onModelChange && (
-@@ -2559,11 +2505,7 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
-                     e.currentTarget.style.color = "var(--text-muted)";
+-            </button>
+-            {/* Model selector - visible always, disabled while the session or switch is busy */}
+-            {(modelOptions.length > 0 || model || modelError) && onModelChange && (
+-              <ModelSelector
+-                options={modelOptions}
+-                value={model}
+-                onChange={onModelChange}
+-                disabled={isStreaming}
+-                busy={modelSwitching}
+-                isAutoSelection={isAutoModelSelection}
+-                defaultValue={defaultModel}
+-                onSetDefault={onSetDefaultModel}
+-              />
+-            )}
+-          </div>
+-
+-          {/* spacer */}
+-          {!isMobile && <div style={{ flex: 1 }} />}
+-
+-          {/* RIGHT: thinking + tools preset + compact + sound (idle) | Stop + sound (streaming) */}
+-          <div ref={controlsMenuRef} style={{
+-            flex: "0 0 auto",
+-            display: "flex",
+-            alignItems: "center",
+-            justifyContent: "flex-end",
+-            position: "relative",
+-            marginLeft: isMobile ? 0 : "auto",
+-          }}>
+-            {isMobile && (
++          {compact && (isStreaming ? (
++              <div style={{ display: "flex", alignItems: "center", gap: 6, flexShrink: 0, alignSelf: "flex-end" }}>
++                {onSteer && (
++                  <button
++                    onClick={() => sendQueued("steer")}
++                    disabled={!canQueueStreamingMessage}
++                    title={t("chat.steerHint")}
++                    style={{
++                      display: "flex", alignItems: "center", gap: 5,
++                      padding: "7px 12px",
++                      background: canQueueStreamingMessage ? "rgba(234,179,8,0.14)" : "var(--bg-subtle)",
++                      border: "none",
++                      borderRadius: "var(--radius-sm)",
++                      color: canQueueStreamingMessage ? "rgba(180,130,0,1)" : "var(--text-dim)",
++                      cursor: canQueueStreamingMessage ? "pointer" : "not-allowed",
++                      fontSize: 13, fontWeight: 600, letterSpacing: "-0.01em",
++                      transition: "background 0.12s",
++                    }}
++                  >
++                    <CarbonIcon icon={Carbon.ArrowRight} size={12} />
++                    {t("chat.steer")}
++                  </button>
++                )}
++                {onFollowUp && (
++                  <button
++                    onClick={() => sendQueued("followup")}
++                    disabled={!canQueueStreamingMessage}
++                    title={`${t("chat.followUpHint")} (${isMobile ? "Ctrl/Cmd+" : ""}Alt/Option+Enter)`}
++                    aria-keyshortcuts={isMobile ? "Control+Alt+Enter Meta+Alt+Enter" : "Alt+Enter"}
++                    style={{
++                      display: "flex", alignItems: "center", gap: 5,
++                      padding: "7px 12px",
++                      background: canQueueStreamingMessage ? "rgba(129,140,248,0.14)" : "var(--bg-subtle)",
++                      border: "none",
++                      borderRadius: "var(--radius-sm)",
++                      color: canQueueStreamingMessage ? "rgba(99,102,241,1)" : "var(--text-dim)",
++                      cursor: canQueueStreamingMessage ? "pointer" : "not-allowed",
++                      fontSize: 13, fontWeight: 600, letterSpacing: "-0.01em",
++                      transition: "background 0.12s",
++                    }}
++                  >
++                    <CarbonIcon icon={Carbon.Queued} size={12} />
++                    {t("chat.followUp")}
++                  </button>
++                )}
++              </div>
++            ) : (
+               <button
+-                type="button"
+-                 title={controlsMenuOpen ? undefined : t("chat.moreControls")}
+-                 aria-label={t("chat.moreControls")}
+-                aria-expanded={controlsMenuOpen}
+-                aria-hidden={controlsMenuOpen || undefined}
+-                tabIndex={controlsMenuOpen ? -1 : undefined}
+-                onClick={() => {
+-                  setControlsMenuOpen(true);
+-                }}
++                onClick={handleSend}
++                disabled={!value.trim() && !attachedImages.length}
++                title={t("chat.send")}
++                aria-label={t("chat.send")}
+                 style={{
+-                  display: "flex",
+-                  alignItems: "center",
+-                  justifyContent: "center",
+-                  width: "100%",
+-                  height: 32,
+-                  padding: "8px 10px",
+-                  background: "none",
++                  flexShrink: 0,
++                  alignSelf: "flex-end",
++                  display: "flex", alignItems: "center", justifyContent: "center",
++                  // A square icon button, as in Claude and HuggingChat: the draft keeps the width.
++                  width: isMobile ? 36 : 32, height: isMobile ? 36 : 32, padding: 0,
++                  background: (value.trim() || attachedImages.length) ? "var(--primary)" : "var(--bg-selected)",
+                   border: "none",
+-                  borderRadius: 9,
+-                  color: "var(--text-muted)",
+-                  cursor: controlsMenuOpen ? "default" : "pointer",
+-                  fontSize: 12,
+-                  fontWeight: 500,
+-                  visibility: controlsMenuOpen ? "hidden" : "visible",
+-                  pointerEvents: controlsMenuOpen ? "none" : "auto",
+-                  transition: "background 0.12s, color 0.12s",
+-                }}
+-                onMouseEnter={(e) => {
+-                  if (controlsMenuOpen) return;
+-                  e.currentTarget.style.background = "var(--bg-hover)";
+-                  e.currentTarget.style.color = "var(--text)";
+-                }}
+-                onMouseLeave={(e) => {
+-                  if (controlsMenuOpen) return;
+-                  e.currentTarget.style.background = "none";
+-                  e.currentTarget.style.color = "var(--text-muted)";
++                  borderRadius: "var(--radius-sm)",
++                  color: (value.trim() || attachedImages.length) ? "var(--primary-contrast)" : "var(--text-dim)",
++                  cursor: (value.trim() || attachedImages.length) ? "pointer" : "not-allowed",
++                  transition: "background 0.15s, color 0.15s",
+                 }}
+               >
+-                {t("chat.moreControls")}
++                <CarbonIcon icon={Carbon.ArrowUp} size={16} />
+               </button>
+-            )}
+-            <div style={{
+-              display: isMobile ? (controlsMenuOpen ? "flex" : "none") : "flex",
++            ))}
++          {/* The composer's toolbar, inside its box as in Claude: attach and model on the left;
++              reasoning, tools, compact and sound on the right; then Send (Steer / Follow-up and
++              Stop while the agent runs). */}
++          {!compact && (
++            <div className="composer-toolbar">
++          <div className="chat-input-controls" style={{
++            display: isMobile ? "grid" : "flex",
++            gridTemplateColumns: isMobile ? "minmax(0, 1fr) auto" : undefined,
++          }}>
++
++            {/* LEFT: attach + model selector (idle) or steer/followup toggle (streaming) */}
++            <div style={{ flex: isMobile ? "1 1 auto" : "0 0 auto", minWidth: 0, display: "flex", alignItems: "center", gap: 2 }}>
++              <button
++                type="button"
++                className="ui-btn ui-btn--sm ui-btn--icon"
++                data-active={attachedImages.length > 0 || undefined}
++                onClick={() => fileInputRef.current?.click()}
++                title={t("chat.attachFiles")}
++                aria-label={t("chat.attachFiles")}
++              >
++                <CarbonIcon icon={Carbon.Attachment} size={16} />
++              </button>
++              {/* Model selector - visible always, disabled while the session or switch is busy */}
++              {(modelOptions.length > 0 || model || modelError) && onModelChange && (
++                <ModelSelector
++                  options={modelOptions}
++                  value={model}
++                  onChange={onModelChange}
++                  disabled={isStreaming}
++                  busy={modelSwitching}
++                  isAutoSelection={isAutoModelSelection}
++                  defaultValue={defaultModel}
++                  onSetDefault={onSetDefaultModel}
++                />
++              )}
++            </div>
++
++            {/* spacer */}
++            {!isMobile && <div style={{ flex: 1 }} />}
++
++            {/* RIGHT: thinking + tools preset + compact + sound (idle) | Stop + sound (streaming) */}
++            <div ref={controlsMenuRef} style={{
++              flex: "0 0 auto",
++              display: "flex",
+               alignItems: "center",
+-              gap: isMobile ? 1 : 2,
+-              ...(isMobile ? {
+-                position: "absolute",
+-                right: 0,
+-                bottom: 0,
+-                zIndex: 60,
+-                padding: 1,
+-                width: "max-content",
+-                maxWidth: "calc(100vw - 32px)",
+-                flexWrap: "nowrap",
+-                justifyContent: "flex-end",
+-                border: "1px solid color-mix(in srgb, var(--border) 72%, transparent)",
+-                borderRadius: 10,
+-                background: "color-mix(in srgb, var(--bg-panel) 92%, var(--bg))",
+-                boxShadow: "0 8px 24px rgba(0,0,0,0.14)",
+-                backdropFilter: "blur(10px)",
+-              } : null),
++              justifyContent: "flex-end",
++              position: "relative",
++              marginLeft: isMobile ? 0 : "auto",
+             }}>
+-            {onThinkingLevelChange && (
+-              <div ref={thinkingDropdownRef} style={{ position: "relative" }}>
++              {isMobile && (
+                 <button
+-                  onClick={() => setThinkingDropdownOpen((v) => !v)}
+-                  title={isStreaming
+-                    ? t("chat.currentReasoning", { level: thinkingDisplayLabel })
+-                    : t("chat.changeReasoning", { level: thinkingDisplayLabel })}
+-                  aria-label={t("chat.changeReasoningLabel")}
+-                  style={{
+-                    display: "flex", alignItems: "center", justifyContent: "center", gap: 5,
+-                    padding: isMobile ? "0 6px" : "8px 12px",
+-                    width: isMobile ? "auto" : undefined,
+-                    height: 32,
+-                    background: thinkingDropdownOpen ? "var(--bg-hover)" : "none",
+-                    border: "none",
+-                    borderRadius: 9,
+-                    color: "var(--text-muted)",
+-                    cursor: "pointer",
+-                    fontSize: 12,
+-                    transition: "background 0.12s, color 0.12s",
+-                  }}
+-                  onMouseEnter={(e) => {
+-                    e.currentTarget.style.background = "var(--bg-hover)";
+-                    e.currentTarget.style.color = "var(--text)";
++                  type="button"
++                  className="ui-btn ui-btn--sm"
++                  title={controlsMenuOpen ? undefined : t("chat.moreControls")}
++                  aria-label={t("chat.moreControls")}
++                  aria-expanded={controlsMenuOpen}
++                  aria-hidden={controlsMenuOpen || undefined}
++                  tabIndex={controlsMenuOpen ? -1 : undefined}
++                  onClick={() => {
++                    setControlsMenuOpen(true);
+                   }}
+-                  onMouseLeave={(e) => {
+-                    e.currentTarget.style.background = thinkingDropdownOpen ? "var(--bg-hover)" : "none";
+-                    e.currentTarget.style.color = "var(--text-muted)";
++                  style={{
++                    width: "100%",
++                    visibility: controlsMenuOpen ? "hidden" : "visible",
++                    pointerEvents: controlsMenuOpen ? "none" : "auto",
                    }}
                  >
 -                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
@@ -5155,88 +7043,601 @@ index 9a0a1b7..a7549d0 100644
 -                    <line x1="7" y1="18" x2="12" y2="18" />
 -                    <line x1="8" y1="21" x2="11" y2="21" />
 -                  </svg>
-+                  <CarbonIcon icon={Carbon.Idea} size={11} />
-                   {(!isMobile || controlsMenuOpen) && <span style={{ whiteSpace: "nowrap" }}>{thinkingDisplayLabel}</span>}
+-                  {(!isMobile || controlsMenuOpen) && <span style={{ whiteSpace: "nowrap" }}>{thinkingDisplayLabel}</span>}
++                  {t("chat.moreControls")}
                  </button>
-                 {thinkingDropdownOpen && (
-@@ -2654,9 +2596,7 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
-                     e.currentTarget.style.color = "var(--text-muted)";
-                   }}
+-                {thinkingDropdownOpen && (
+-                  <div style={{
+-                    position: "absolute", bottom: "calc(100% + 6px)",
+-                    ...(isMobile ? { left: 0 } : { right: 0 }),
+-                    zIndex: 100, background: "var(--bg)", border: "1px solid var(--border)",
+-                    borderRadius: 8, boxShadow: "0 -4px 16px rgba(0,0,0,0.10)",
+-                    overflow: "hidden", minWidth: 180,
+-                  }}>
+-                    {THINKING_LEVELS.filter((lvl) => {
+-                      if (!availableThinkingLevels) return true;
+-                      if (lvl === "auto") return true;
+-                      return availableThinkingLevels.includes(lvl);
+-                    }).map((lvl) => {
+-                      const isActive = lvl === "auto"
+-                        ? isAutoThinkingSelection
+-                        : !isAutoThinkingSelection && resolvedThinkingLevel === lvl;
+-                      const desc = t(THINKING_LEVEL_DESC_KEYS[lvl]);
+-                      const mappedVal = (lvl !== "auto" && thinkingLevelMap) ? thinkingLevelMap[lvl] : undefined;
+-                      const displayLabel = (mappedVal != null && mappedVal !== lvl) ? mappedVal : lvl;
+-                      const showOriginal = mappedVal != null && mappedVal !== lvl;
+-                      return (
+-                        <SelectorRow
+-                          key={lvl}
+-                          active={isActive}
+-                          onSelect={() => {
+-                            setThinkingDropdownOpen(false);
+-                            if (lvl === "auto") {
+-                              if (!isAutoThinkingSelection) onThinkingLevelChange("auto");
+-                              return;
+-                            }
+-                            if (!isActive || isAutoThinkingSelection) onThinkingLevelChange(lvl);
+-                          }}
+-                          gutter={Boolean(onSetDefaultThinkingLevel)}
+-                          star={onSetDefaultThinkingLevel && lvl !== "auto"
+-                            ? {
+-                                isDefault: savedDefaultThinkingLevel === lvl,
+-                                saveLabel: t("chat.saveDefaultThinking"),
+-                                defaultLabel: t("chat.defaultThinking"),
+-                                onSave: () => {
+-                                  setThinkingDropdownOpen(false);
+-                                  onSetDefaultThinkingLevel(lvl);
+-                                },
++              )}
++              <div style={{
++                display: isMobile ? (controlsMenuOpen ? "flex" : "none") : "flex",
++                alignItems: "center",
++                gap: isMobile ? 1 : 2,
++                ...(isMobile ? {
++                  position: "absolute",
++                  right: 0,
++                  bottom: 0,
++                  zIndex: 60,
++                  padding: 1,
++                  width: "max-content",
++                  maxWidth: "calc(100vw - 32px)",
++                  flexWrap: "nowrap",
++                  justifyContent: "flex-end",
++                  border: "1px solid color-mix(in srgb, var(--border) 72%, transparent)",
++                  borderRadius: "var(--radius-lg)",
++                  background: "var(--bg-elevated)",
++                  boxShadow: "var(--shadow-pop)",
++                  backdropFilter: "blur(10px)",
++                } : null),
++              }}>
++              {onThinkingLevelChange && (
++                <div ref={thinkingDropdownRef} style={{ position: "relative" }}>
++                  <button
++                    type="button"
++                    className="ui-btn ui-btn--sm"
++                    onClick={() => setThinkingDropdownOpen((v) => !v)}
++                    title={isStreaming
++                      ? t("chat.currentReasoning", { level: thinkingDisplayLabel })
++                      : t("chat.changeReasoning", { level: thinkingDisplayLabel })}
++                    aria-label={t("chat.changeReasoningLabel")}
++                    aria-expanded={thinkingDropdownOpen}
++                  >
++                    <CarbonIcon icon={Carbon.Idea} size={14} />
++                    {(!isMobile || controlsMenuOpen) && <span style={{ whiteSpace: "nowrap" }}>{thinkingDisplayLabel}</span>}
++                    {!isMobile && <CarbonIcon icon={Carbon.ChevronDown} size={12} className="ui-btn-chevron" />}
++                  </button>
++                  {thinkingDropdownOpen && (
++                    <div style={{
++                      position: "absolute", bottom: "calc(100% + 6px)",
++                      ...(isMobile ? { left: 0 } : { right: 0 }),
++                      zIndex: 100, background: "var(--bg-elevated)", border: "1px solid var(--border)",
++                      borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-pop)",
++                      overflow: "hidden", minWidth: 180, padding: "4px 0",
++                    }}>
++                      {THINKING_LEVELS.filter((lvl) => {
++                        if (!availableThinkingLevels) return true;
++                        if (lvl === "auto") return true;
++                        return availableThinkingLevels.includes(lvl);
++                      }).map((lvl) => {
++                        const isActive = lvl === "auto"
++                          ? isAutoThinkingSelection
++                          : !isAutoThinkingSelection && resolvedThinkingLevel === lvl;
++                        const desc = t(THINKING_LEVEL_DESC_KEYS[lvl]);
++                        const mappedVal = (lvl !== "auto" && thinkingLevelMap) ? thinkingLevelMap[lvl] : undefined;
++                        const displayLabel = (mappedVal != null && mappedVal !== lvl) ? mappedVal : lvl;
++                        const showOriginal = mappedVal != null && mappedVal !== lvl;
++                        return (
++                          <SelectorRow
++                            key={lvl}
++                            active={isActive}
++                            onSelect={() => {
++                              setThinkingDropdownOpen(false);
++                              if (lvl === "auto") {
++                                if (!isAutoThinkingSelection) onThinkingLevelChange("auto");
++                                return;
+                               }
+-                            : undefined}
+-                        >
+-                          <span style={{ flex: 1 }}>
+-                            {displayLabel}
+-                            {showOriginal && <span style={{ fontSize: 10, color: "var(--text-dim)", fontFamily: "var(--font-mono)", marginLeft: 5 }}>({lvl})</span>}
+-                          </span>
+-                          <span style={{ fontSize: 11, color: "var(--text-dim)", marginLeft: 8 }}>{desc}</span>
+-                        </SelectorRow>
+-                      );
+-                    })}
+-                  </div>
+-                )}
+-              </div>
+-            )}
+-            {!isStreaming && onToolPresetChange && (
+-              <div ref={toolDropdownRef} style={{ position: "relative" }}>
++                              if (!isActive || isAutoThinkingSelection) onThinkingLevelChange(lvl);
++                            }}
++                            gutter={Boolean(onSetDefaultThinkingLevel)}
++                            star={onSetDefaultThinkingLevel && lvl !== "auto"
++                              ? {
++                                  isDefault: savedDefaultThinkingLevel === lvl,
++                                  saveLabel: t("chat.saveDefaultThinking"),
++                                  defaultLabel: t("chat.defaultThinking"),
++                                  onSave: () => {
++                                    setThinkingDropdownOpen(false);
++                                    onSetDefaultThinkingLevel(lvl);
++                                  },
++                                }
++                              : undefined}
++                          >
++                            <span style={{ flex: 1 }}>
++                              {displayLabel}
++                              {showOriginal && <span style={{ fontSize: 10, color: "var(--text-dim)", fontFamily: "var(--font-mono)", marginLeft: 5 }}>({lvl})</span>}
++                            </span>
++                            <span style={{ fontSize: 11, color: "var(--text-dim)", marginLeft: 8 }}>{desc}</span>
++                          </SelectorRow>
++                        );
++                      })}
++                    </div>
++                  )}
++                </div>
++              )}
++              {!isStreaming && onToolPresetChange && (
++                <div ref={toolDropdownRef} style={{ position: "relative" }}>
++                  <button
++                    type="button"
++                    className="ui-btn ui-btn--sm"
++                    onClick={(e) => { if (!isStreaming && !isStrayClick(e)) setToolDropdownOpen((v) => !v); }}
++                    disabled={isStreaming}
++                    title={t("chat.changeToolPreset") + `: ${toolPresetLabel}`}
++                    aria-label={t("chat.changeToolPreset")}
++                    aria-expanded={toolDropdownOpen}
++                  >
++                    <CarbonIcon icon={Carbon.Tools} size={14} />
++                    {(!isMobile || controlsMenuOpen) && <span style={{ whiteSpace: "nowrap" }}>{toolPresetLabel}</span>}
++                    {!isMobile && <CarbonIcon icon={Carbon.ChevronDown} size={12} className="ui-btn-chevron" />}
++                  </button>
++                  {toolDropdownOpen && (
++                    <div style={{
++                      position: "absolute",
++                      bottom: "calc(100% + 6px)",
++                      right: isMobile ? undefined : 0,
++                      left: isMobile ? 0 : undefined,
++                      zIndex: 100, background: "var(--bg-elevated)", border: "1px solid var(--border)",
++                      borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-pop)",
++                      overflow: "hidden", minWidth: 120, padding: "4px",
++                    }}>
++                      {TOOL_PRESETS.map((lvl) => {
++                        const preset = TOOL_PRESET_MAP[lvl];
++                        const isActive = (toolPreset ?? "configured") === preset;
++                        let desc: string;
++                        if (lvl === "configured") desc = t("chat.configuredTools");
++                        else if (lvl === "chat-only") desc = t("chat.chatOnly");
++                        else if (lvl === "read-only") desc = t("chat.readOnlyTools", { count: 4 });
++                        else if (lvl === "default") desc = t("chat.builtInTools", { count: 4 });
++                        else desc = t("chat.allBuiltInTools");
++                        return (
++                          <button
++                            key={lvl}
++                            onClick={() => { setToolDropdownOpen(false); if (!isActive) onToolPresetChange(preset); }}
++                            style={{
++                              display: "flex", alignItems: "center", gap: 8,
++                              width: "100%", padding: "7px 12px",
++                              background: isActive ? "var(--bg-selected)" : "none",
++                              border: "none",
++                              borderRadius: "var(--radius-sm)",
++                              color: isActive ? "var(--text-strong)" : "var(--text)",
++                              cursor: "pointer", fontSize: 13, textAlign: "left",
++                              fontWeight: isActive ? 500 : 400,
++                              whiteSpace: "nowrap",
++                            }}
++                            onMouseEnter={(e) => { if (!isActive) e.currentTarget.style.background = "var(--bg-hover)"; }}
++                            onMouseLeave={(e) => { if (!isActive) e.currentTarget.style.background = "none"; }}
++                          >
++                            {isActive
++                              ? <CarbonIcon icon={Carbon.Checkmark} size={12} style={{ flexShrink: 0 }} />
++                              : <span style={{ width: 12, flexShrink: 0 }} />}
++                            <span style={{ flex: 1 }}>{lvl}</span>
++                            <span style={{ fontSize: 11, color: "var(--text-dim)", marginLeft: 8 }}>{desc}</span>
++                          </button>
++                        );
++                      })}
++                    </div>
++                  )}
++                </div>
++              )}
++
++              {(!isStreaming || isCompacting) && onCompact && (
++                <div>
++                  <button
++                    type="button"
++                    className={`ui-btn ui-btn--sm${isCompacting ? " ui-btn--danger" : ""}`}
++                    onClick={isCompacting ? onAbortCompaction : (e) => { if (!isStrayClick(e)) onCompact(); }}
++                    title={isCompacting ? t("chat.stopCompaction") : t("chat.compactContext")}
++                    aria-label={isCompacting ? t("chat.stopCompaction") : t("chat.compactContext")}
++                  >
++                    {isCompacting ? (
++                      <><CarbonIcon icon={Carbon.StopFilledAlt} size={12} />{(!isMobile || controlsMenuOpen) && <span style={{ whiteSpace: "nowrap" }}>{t("chat.compacting")}</span>}</>
++                    ) : (
++                      <><CarbonIcon icon={Carbon.Minimize} size={14} />{(!isMobile || controlsMenuOpen) && <span style={{ whiteSpace: "nowrap" }}>{t("chat.compact")}</span>}</>
++                    )}
++                  </button>
++                </div>
++              )}
++
++
++              {onSoundToggle !== undefined && (
+                 <button
+-                  onClick={(e) => { if (!isStreaming && !isStrayClick(e)) setToolDropdownOpen((v) => !v); }}
+-                  disabled={isStreaming}
+-                  title={t("chat.changeToolPreset") + `: ${toolPresetLabel}`}
+-                  aria-label={t("chat.changeToolPreset")}
+-                  style={{
+-                    display: "flex", alignItems: "center", justifyContent: "center", gap: 5,
+-                    padding: isMobile ? "0 6px" : "8px 12px",
+-                    width: isMobile ? "auto" : undefined,
+-                    height: 32,
+-                    background: toolDropdownOpen ? "var(--bg-hover)" : "none",
+-                    border: "none",
+-                    borderRadius: 9,
+-                    color: "var(--text-muted)",
+-                    cursor: isStreaming ? "not-allowed" : "pointer",
+-                    fontSize: 12,
+-                    opacity: isStreaming ? 0.5 : 1,
+-                    transition: "background 0.12s, color 0.12s",
+-                  }}
+-                  onMouseEnter={(e) => {
+-                    if (isStreaming) return;
+-                    e.currentTarget.style.background = "var(--bg-hover)";
+-                    e.currentTarget.style.color = "var(--text)";
+-                  }}
+-                  onMouseLeave={(e) => {
+-                    e.currentTarget.style.background = toolDropdownOpen ? "var(--bg-hover)" : "none";
+-                    e.currentTarget.style.color = "var(--text-muted)";
+-                  }}
++                  type="button"
++                  className="ui-btn ui-btn--sm ui-btn--icon"
++                  data-off={!soundEnabled || undefined}
++                  onClick={onSoundToggle}
++                  title={soundEnabled ? t("chat.disableSound") : t("chat.enableSound")}
++                  aria-label={soundEnabled ? t("chat.disableSound") : t("chat.enableSound")}
                  >
 -                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
 -                    <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" />
 -                  </svg>
-+                  <CarbonIcon icon={Carbon.Tools} size={11} />
-                   {(!isMobile || controlsMenuOpen) && <span style={{ whiteSpace: "nowrap" }}>{toolPresetLabel}</span>}
+-                  {(!isMobile || controlsMenuOpen) && <span style={{ whiteSpace: "nowrap" }}>{toolPresetLabel}</span>}
++                  {soundEnabled ? (
++                    <CarbonIcon icon={Carbon.VolumeUp} size={16} />
++                  ) : (
++                    <CarbonIcon icon={Carbon.VolumeMute} size={16} />
++                  )}
                  </button>
-                 {toolDropdownOpen && (
-@@ -2696,7 +2636,7 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
-                           onMouseLeave={(e) => { if (!isActive) e.currentTarget.style.background = "none"; }}
-                         >
-                           {isActive
+-                {toolDropdownOpen && (
+-                  <div style={{
+-                    position: "absolute",
+-                    bottom: "calc(100% + 6px)",
+-                    right: isMobile ? undefined : 0,
+-                    left: isMobile ? 0 : undefined,
+-                    zIndex: 100, background: "var(--bg)", border: "1px solid var(--border)",
+-                    borderRadius: 8, boxShadow: "0 -4px 16px rgba(0,0,0,0.10)",
+-                    overflow: "hidden", minWidth: 120,
+-                  }}>
+-                    {TOOL_PRESETS.map((lvl) => {
+-                      const preset = TOOL_PRESET_MAP[lvl];
+-                      const isActive = (toolPreset ?? "configured") === preset;
+-                      let desc: string;
+-                      if (lvl === "configured") desc = t("chat.configuredTools");
+-                      else if (lvl === "chat-only") desc = t("chat.chatOnly");
+-                      else if (lvl === "read-only") desc = t("chat.readOnlyTools", { count: 4 });
+-                      else if (lvl === "default") desc = t("chat.builtInTools", { count: 4 });
+-                      else desc = t("chat.allBuiltInTools");
+-                      return (
+-                        <button
+-                          key={lvl}
+-                          onClick={() => { setToolDropdownOpen(false); if (!isActive) onToolPresetChange(preset); }}
+-                          style={{
+-                            display: "flex", alignItems: "center", gap: 8,
+-                            width: "100%", padding: "7px 12px",
+-                            background: isActive ? "var(--bg-selected)" : "none",
+-                            border: "none",
+-                            color: isActive ? "var(--text)" : "var(--text-muted)",
+-                            cursor: "pointer", fontSize: 12, textAlign: "left",
+-                            fontWeight: isActive ? 600 : 400,
+-                            whiteSpace: "nowrap",
+-                          }}
+-                          onMouseEnter={(e) => { if (!isActive) e.currentTarget.style.background = "var(--bg-hover)"; }}
+-                          onMouseLeave={(e) => { if (!isActive) e.currentTarget.style.background = "none"; }}
+-                        >
+-                          {isActive
 -                            ? <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="var(--accent)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}><polyline points="1.5 5 4 7.5 8.5 2.5" /></svg>
-+                            ? <CarbonIcon icon={Carbon.Checkmark} size={10} color="var(--accent)" style={{ flexShrink: 0 }} />
-                             : <span style={{ width: 10, flexShrink: 0 }} />}
-                           <span style={{ flex: 1 }}>{lvl}</span>
-                           <span style={{ fontSize: 11, color: "var(--text-dim)", marginLeft: 8 }}>{desc}</span>
-@@ -2737,12 +2677,9 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
-                    aria-label={isCompacting ? t("chat.stopCompaction") : t("chat.compactContext")}
+-                            : <span style={{ width: 10, flexShrink: 0 }} />}
+-                          <span style={{ flex: 1 }}>{lvl}</span>
+-                          <span style={{ fontSize: 11, color: "var(--text-dim)", marginLeft: 8 }}>{desc}</span>
+-                        </button>
+-                      );
+-                    })}
+-                  </div>
+-                )}
+-              </div>
+-            )}
+-
+-            {(!isStreaming || isCompacting) && onCompact && (
+-              <div>
++              )}
++              {isMobile && controlsMenuOpen && (
+                 <button
+-                  onClick={isCompacting ? onAbortCompaction : (e) => { if (!isStrayClick(e)) onCompact(); }}
++                  type="button"
++                   title={t("chat.collapseControls")}
++                   aria-label={t("chat.collapseControls")}
++                  aria-expanded={true}
++                  onClick={() => {
++                    setToolDropdownOpen(false);
++                    setThinkingDropdownOpen(false);
++                    setControlsMenuOpen(false);
++                  }}
+                   style={{
+-                    display: "flex", alignItems: "center", justifyContent: "center", gap: 5,
+-                    padding: isMobile ? "0 6px" : "8px 12px",
+-                    width: isMobile ? "auto" : undefined,
++                    display: "flex",
++                    alignItems: "center",
++                    justifyContent: "center",
++                    width: 36,
+                     height: 32,
+-                    background: isCompacting ? "rgba(239,68,68,0.08)" : "none",
++                    padding: 0,
++                    marginLeft: 0,
++                    background: "var(--bg-hover)",
+                     border: "none",
+-                    borderRadius: 9,
+-                    color: isCompacting ? "#ef4444" : "var(--text-muted)",
++                    borderLeft: "1px solid color-mix(in srgb, var(--border) 72%, transparent)",
++                    borderRadius: "0 9px 9px 0",
++                    color: "var(--text)",
+                     cursor: "pointer",
+-                    fontSize: 12,
+                     transition: "background 0.12s, color 0.12s",
+                   }}
+                   onMouseEnter={(e) => {
+-                    e.currentTarget.style.background = isCompacting ? "rgba(239,68,68,0.16)" : "var(--bg-hover)";
+-                    e.currentTarget.style.color = isCompacting ? "#ef4444" : "var(--text)";
++                    e.currentTarget.style.background = "var(--bg-selected)";
+                   }}
+                   onMouseLeave={(e) => {
+-                    e.currentTarget.style.background = isCompacting ? "rgba(239,68,68,0.08)" : "none";
+-                    e.currentTarget.style.color = isCompacting ? "#ef4444" : "var(--text-muted)";
++                    e.currentTarget.style.background = "var(--bg-hover)";
+                   }}
+-                   title={isCompacting ? t("chat.stopCompaction") : t("chat.compactContext")}
+-                   aria-label={isCompacting ? t("chat.stopCompaction") : t("chat.compactContext")}
                  >
-                   {isCompacting ? (
+-                  {isCompacting ? (
 -                    <><svg width="10" height="10" viewBox="0 0 10 10" fill="none"><rect x="2" y="2" width="6" height="6" rx="1" fill="currentColor" /></svg>{(!isMobile || controlsMenuOpen) && <span style={{ whiteSpace: "nowrap" }}>{t("chat.compacting")}</span>}</>
-+                    <><CarbonIcon icon={Carbon.StopFilledAlt} size={10} />{(!isMobile || controlsMenuOpen) && <span style={{ whiteSpace: "nowrap" }}>{t("chat.compacting")}</span>}</>
-                   ) : (
+-                  ) : (
 -                    <><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
 -                      <polyline points="4 14 10 14 10 20" /><polyline points="20 10 14 10 14 4" />
 -                      <line x1="10" y1="14" x2="3" y2="21" /><line x1="21" y1="3" x2="14" y2="10" />
 -                    </svg>{(!isMobile || controlsMenuOpen) && <span style={{ whiteSpace: "nowrap" }}>{t("chat.compact")}</span>}</>
-+                    <><CarbonIcon icon={Carbon.Minimize} size={11} />{(!isMobile || controlsMenuOpen) && <span style={{ whiteSpace: "nowrap" }}>{t("chat.compact")}</span>}</>
-                   )}
+-                  )}
++                  <CarbonIcon icon={Carbon.Close} size={13} />
                  </button>
++              )}
                </div>
-@@ -2768,9 +2705,7 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
-                 onMouseEnter={(e) => { e.currentTarget.style.background = "rgba(239,68,68,0.16)"; }}
-                 onMouseLeave={(e) => { e.currentTarget.style.background = "rgba(239,68,68,0.08)"; }}
-               >
+-            )}
+-
+-            {isStreaming && (
+-              <button
+-                onClick={onAbort}
+-                 title={t("chat.stopAgent")}
+-                style={{
+-                  display: "flex", alignItems: "center", gap: 6,
+-                  padding: "8px 14px",
+-                  height: 32,
+-                  background: "rgba(239,68,68,0.08)",
+-                  border: "1px solid rgba(239,68,68,0.3)",
+-                  borderRadius: 9,
+-                  color: "#ef4444",
+-                  cursor: "pointer",
+-                  fontSize: 12, fontWeight: 600,
+-                  whiteSpace: "nowrap", letterSpacing: "-0.01em",
+-                  transition: "background 0.12s",
+-                }}
+-                onMouseEnter={(e) => { e.currentTarget.style.background = "rgba(239,68,68,0.16)"; }}
+-                onMouseLeave={(e) => { e.currentTarget.style.background = "rgba(239,68,68,0.08)"; }}
+-              >
 -                <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
 -                  <rect x="1.5" y="1.5" width="7" height="7" rx="1.5" fill="currentColor" />
 -                </svg>
-+                <CarbonIcon icon={Carbon.StopFilledAlt} size={10} />
-                  {t("chat.stop")}
-               </button>
-             )}
-@@ -2805,17 +2740,9 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
-                 }}
-               >
-                 {soundEnabled ? (
+-                 {t("chat.stop")}
+-              </button>
+-            )}
++            </div>
+ 
+-            {onSoundToggle !== undefined && (
+-              <button
+-                onClick={onSoundToggle}
+-                 title={soundEnabled ? t("chat.disableSound") : t("chat.enableSound")}
+-                 aria-label={soundEnabled ? t("chat.disableSound") : t("chat.enableSound")}
+-                style={{
+-                  display: "flex", alignItems: "center", justifyContent: "center", gap: 5,
+-                  width: isMobile ? 32 : 32,
+-                  height: 32,
+-                  padding: 0,
+-                  background: "none",
+-                  border: "none",
+-                  borderRadius: 9,
+-                  color: soundEnabled ? "var(--text-muted)" : "var(--text-dim)",
+-                  cursor: "pointer",
+-                  opacity: soundEnabled ? 1 : 0.55,
+-                  transition: "background 0.12s, color 0.12s, opacity 0.12s",
+-                }}
+-                onMouseEnter={(e) => {
+-                  e.currentTarget.style.background = "var(--bg-hover)";
+-                  e.currentTarget.style.color = "var(--text)";
+-                  e.currentTarget.style.opacity = "1";
+-                }}
+-                onMouseLeave={(e) => {
+-                  e.currentTarget.style.background = "none";
+-                  e.currentTarget.style.color = soundEnabled ? "var(--text-muted)" : "var(--text-dim)";
+-                  e.currentTarget.style.opacity = soundEnabled ? "1" : "0.55";
+-                }}
+-              >
+-                {soundEnabled ? (
 -                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
 -                    <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
 -                    <path d="M15.54 8.46a5 5 0 0 1 0 7.07" />
 -                    <path d="M19.07 4.93a10 10 0 0 1 0 14.14" />
 -                  </svg>
-+                  <CarbonIcon icon={Carbon.VolumeUp} size={12} />
++          </div>
++              <div className="composer-send">
++                {isStreaming ? (
++                  <>
++                    {onSteer && (
++                      <button
++                        type="button"
++                        className="ui-btn ui-btn--sm ui-btn--tint"
++                        data-tint="steer"
++                        onClick={() => sendQueued("steer")}
++                        disabled={!canQueueStreamingMessage}
++                        title={t("chat.steerHint")}
++                      >
++                        <CarbonIcon icon={Carbon.ArrowRight} size={12} />
++                        {t("chat.steer")}
++                      </button>
++                    )}
++                    {onFollowUp && (
++                      <button
++                        type="button"
++                        className="ui-btn ui-btn--sm ui-btn--tint"
++                        data-tint="follow-up"
++                        onClick={() => sendQueued("followup")}
++                        disabled={!canQueueStreamingMessage}
++                        title={`${t("chat.followUpHint")} (${isMobile ? "Ctrl/Cmd+" : ""}Alt/Option+Enter)`}
++                        aria-keyshortcuts={isMobile ? "Control+Alt+Enter Meta+Alt+Enter" : "Alt+Enter"}
++                      >
++                        <CarbonIcon icon={Carbon.Queued} size={12} />
++                        {t("chat.followUp")}
++                      </button>
++                    )}
++                    {/* Stop takes Send's place, as in Claude. */}
++                    <button
++                      type="button"
++                      className="ui-btn ui-btn--sm ui-btn--icon ui-btn--primary"
++                      onClick={onAbort}
++                      title={t("chat.stopAgent")}
++                      aria-label={t("chat.stopAgent")}
++                    >
++                      <CarbonIcon icon={Carbon.StopFilledAlt} size={12} />
++                    </button>
++                  </>
                  ) : (
 -                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
 -                    <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
 -                    <line x1="23" y1="9" x2="17" y2="15" />
 -                    <line x1="17" y1="9" x2="23" y2="15" />
 -                  </svg>
-+                  <CarbonIcon icon={Carbon.VolumeMute} size={12} />
++                  <button
++                    type="button"
++                    // A square icon button, as in Claude: ink once there is something to send.
++                    className="ui-btn ui-btn--sm ui-btn--icon ui-btn--send"
++                    data-ready={Boolean(value.trim() || attachedImages.length) || undefined}
++                    onClick={handleSend}
++                    disabled={!value.trim() && !attachedImages.length}
++                    title={t("chat.send")}
++                    aria-label={t("chat.send")}
++                  >
++                    <CarbonIcon icon={Carbon.ArrowUp} size={16} />
++                  </button>
                  )}
-               </button>
-             )}
-@@ -2853,10 +2780,7 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
-                   e.currentTarget.style.background = "var(--bg-hover)";
-                 }}
-               >
+-              </button>
+-            )}
+-            {isMobile && controlsMenuOpen && (
+-              <button
+-                type="button"
+-                 title={t("chat.collapseControls")}
+-                 aria-label={t("chat.collapseControls")}
+-                aria-expanded={true}
+-                onClick={() => {
+-                  setToolDropdownOpen(false);
+-                  setThinkingDropdownOpen(false);
+-                  setControlsMenuOpen(false);
+-                }}
+-                style={{
+-                  display: "flex",
+-                  alignItems: "center",
+-                  justifyContent: "center",
+-                  width: 36,
+-                  height: 32,
+-                  padding: 0,
+-                  marginLeft: 0,
+-                  background: "var(--bg-hover)",
+-                  border: "none",
+-                  borderLeft: "1px solid color-mix(in srgb, var(--border) 72%, transparent)",
+-                  borderRadius: "0 9px 9px 0",
+-                  color: "var(--text)",
+-                  cursor: "pointer",
+-                  transition: "background 0.12s, color 0.12s",
+-                }}
+-                onMouseEnter={(e) => {
+-                  e.currentTarget.style.background = "var(--bg-selected)";
+-                }}
+-                onMouseLeave={(e) => {
+-                  e.currentTarget.style.background = "var(--bg-hover)";
+-                }}
+-              >
 -                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
 -                  <line x1="18" y1="6" x2="6" y2="18" />
 -                  <line x1="6" y1="6" x2="18" y2="18" />
 -                </svg>
-+                <CarbonIcon icon={Carbon.Close} size={13} />
-               </button>
-             )}
+-              </button>
+-            )}
++              </div>
              </div>
++          )}
+           </div>
++        </div>
+ 
+-        </div>}
++        {/* Bash mode status label */}
++        {bashMode && (
++          <div className="text-xs px-2 py-1" style={{ color: bashExcluded ? "var(--text-muted)" : "var(--accent)", marginTop: 4 }}>
++             {t("chat.shell")} · {bashExcluded ? t("chat.outputLocal") : t("chat.outputModel")}
++          </div>
++        )}
+       </div>
+     </fieldset>
+   );
+diff --git a/components/ChatMinimap.module.css b/components/ChatMinimap.module.css
+index 6a40447..f33f911 100644
+--- a/components/ChatMinimap.module.css
++++ b/components/ChatMinimap.module.css
+@@ -283,7 +283,7 @@
+   height: 30px;
+   padding: 0;
+   border: 0;
+-  border-radius: 8px;
++  border-radius: var(--radius-md);
+   background: transparent;
+   color: var(--text-dim);
+   cursor: pointer;
 diff --git a/components/ChatMinimap.tsx b/components/ChatMinimap.tsx
 index 2c78471..12d53ec 100644
 --- a/components/ChatMinimap.tsx
@@ -5277,25 +7678,35 @@ index 2c78471..12d53ec 100644
  
        {minimapHovered && allNodes.length > 0 && (
 diff --git a/components/ChatWindow.tsx b/components/ChatWindow.tsx
-index 6c540a4..14fd340 100644
+index 6c540a4..900d76c 100644
 --- a/components/ChatWindow.tsx
 +++ b/components/ChatWindow.tsx
-@@ -1,6 +1,5 @@
+@@ -1,19 +1,20 @@
  "use client";
  import { registerAbortHandler } from "@/hooks/useKeyboardShortcuts";
 -import Image from "next/image";
  import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, type ReactNode } from "react";
  import { createPortal } from "react-dom";
- import type { AgentMessage, AssistantContentBlock, AssistantMessage, BashExecutionMessage, BlockingExtensionUiRequest, ExtensionUiRequest, SessionInfo, SessionTreeNode, ToolResultMessage } from "@/lib/types";
-@@ -13,6 +12,7 @@ import { extractTurnWrittenFiles, type WrittenFile } from "@/lib/turn-written-fi
+-import type { AgentMessage, AssistantContentBlock, AssistantMessage, BashExecutionMessage, BlockingExtensionUiRequest, ExtensionUiRequest, SessionInfo, SessionTreeNode, ToolResultMessage } from "@/lib/types";
++import type { AgentMessage, AssistantContentBlock, AssistantMessage, BashExecutionMessage, BlockingExtensionUiRequest, ExtensionUiRequest, SessionInfo, SessionTreeNode, ToolCallContent, ToolResultMessage } from "@/lib/types";
+ import { normalizeCustomPanelLines } from "@/lib/ansi";
+ import { splitNoticeText } from "@/lib/notice-text";
+ import { EXTENSION_DIALOG_BASE_WIDTH, fitExtensionDialogWidth } from "@/lib/extension-dialog-fit";
+ import { asBracketedPaste, toTerminalKeyData } from "@/lib/terminal-input";
+-import { collapsesProcessDetails, countToolCallBlocks, getDisplayableAssistantBlocks, hasAssistantAnswer, isHiddenCustomMessage, isMessageGroupAnchor, splitFinalAssistantBlocks } from "@/lib/message-display";
++import { collapsesProcessDetails, getDisplayableAssistantBlocks, hasAssistantAnswer, isHiddenCustomMessage, isMessageGroupAnchor, splitFinalAssistantBlocks } from "@/lib/message-display";
+ import { extractTurnWrittenFiles, type WrittenFile } from "@/lib/turn-written-files";
  import { getFinalAnswerViews, keepWrittenFiles, type FinalAnswerViews } from "@/lib/turn-views";
  import { buildQuotedSelection } from "@/lib/quoted-selection";
  import { dropMentionText, splitDroppedItems, uploadFiles, type DroppedItem } from "@/lib/file-upload-client";
+-import { MessageView } from "./MessageView";
 +import { PiLogo } from "./PiLogo";
- import { MessageView } from "./MessageView";
++import { MessageView, type UsageTotals } from "./MessageView";
++import { countStepKinds } from "@/lib/step-summary";
  import { MarkdownBody } from "./MarkdownBody";
  import { ChatInput, type ChatInputHandle } from "./ChatInput";
-@@ -41,6 +41,8 @@ import {
+ import { ChatMinimap, useMessageRefs } from "./ChatMinimap";
+@@ -41,6 +42,8 @@ import {
    restoreScrollTop,
    VISIBLE_PAGE_SIZE,
  } from "@/lib/chat-lazy-load";
@@ -5304,7 +7715,7 @@ index 6c540a4..14fd340 100644
  
  interface Props {
    session: SessionInfo | null;
-@@ -151,10 +153,7 @@ function NewSessionUpdateLink({
+@@ -151,10 +154,7 @@ function NewSessionUpdateLink({
          aria-label={accessibleLabel}
        >
          v{update.latestVersion}
@@ -5316,18 +7727,98 @@ index 6c540a4..14fd340 100644
        </a>
      </>
    );
-@@ -221,9 +220,7 @@ function ProcessDetailsGroup({ messageCount, toolCallCount, defaultExpanded = fa
-         }}
+@@ -191,45 +191,38 @@ function getUserInputText(message: AgentMessage): string | null {
+   return text.length > 0 ? text : null;
+ }
+ 
+-function ProcessDetailsGroup({ messageCount, toolCallCount, defaultExpanded = false, reveal = false, children, t }: { messageCount: number; toolCallCount: number; defaultExpanded?: boolean; reveal?: boolean; children: ReactNode; t: (key: string, params?: Record<string, string | number>) => string }) {
++/**
++ * A turn's steps (what the agent said and did before its answer) as one summary
++ * line, "Ran 2 commands, read a file, edited 2 files", as Claude Desktop sums up a
++ * turn's tool use; opened, the steps hang from a thin rail under it.
++ */
++function ProcessDetailsGroup({ messageCount, toolCalls, defaultExpanded = false, reveal = false, children, t }: { messageCount: number; toolCalls: ToolCallContent[]; defaultExpanded?: boolean; reveal?: boolean; children: ReactNode; t: (key: string, params?: Record<string, string | number>) => string }) {
+   const [expanded, setExpanded] = useState(defaultExpanded);
+   useLayoutEffect(() => {
+     if (reveal) setExpanded(true);
+   }, [reveal]);
+-  const parts = [t("chat.processDetails"), `${messageCount} ${t(messageCount === 1 ? "chat.message" : "chat.messages")}`];
+-  if (toolCallCount > 0) parts.push(`${toolCallCount} ${t(toolCallCount === 1 ? "chat.toolCall" : "chat.toolCalls")}`);
++  const kinds = countStepKinds(toolCalls);
++  const phrase = kinds.length > 0
++    ? kinds.map(({ kind, count }) => t(`chat.steps.${kind}.${count === 1 ? "one" : "other"}`, { count })).join(t("chat.steps.separator"))
++    : t(messageCount === 1 ? "chat.steps.count.one" : "chat.steps.count.other", { count: messageCount });
++  const summary = phrase.charAt(0).toLocaleUpperCase() + phrase.slice(1);
++  const open = expanded || reveal;
+ 
+   return (
+-    <div style={{ marginBottom: 14 }}>
++    <div className="turn-steps">
+       <button
+         type="button"
+-        aria-expanded={expanded || reveal}
++        className="steps-summary"
++        aria-expanded={open}
++        aria-label={`${t("chat.processDetails")}: ${summary}`}
+         onClick={() => setExpanded((v) => !v)}
+-        style={{
+-          display: "flex",
+-          alignItems: "center",
+-          gap: 8,
+-          width: "auto",
+-          minHeight: 24,
+-          padding: "2px 0",
+-          border: "none",
+-          background: "transparent",
+-          color: "var(--text-muted)",
+-          cursor: "pointer",
+-          fontSize: 12,
+-          textAlign: "left",
+-        }}
          title={expanded ? t("chat.collapseProcess") : t("chat.expandProcess")}
        >
 -        <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0, transform: expanded ? "rotate(90deg)" : "none", transition: "transform 0.15s" }}>
 -          <polyline points="4 2.5 7.5 6 4 9.5" />
 -        </svg>
-+        <CarbonIcon icon={Carbon.ChevronRight} size={12} style={{ flexShrink: 0, transform: expanded ? "rotate(90deg)" : "none", transition: "transform 0.15s" }} />
-         <span style={{ minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
-           {parts.join(" · ")}
-         </span>
-@@ -1024,24 +1021,7 @@ export function ChatWindow({ session, searchTarget, onSearchTargetHandled, initi
+-        <span style={{ minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+-          {parts.join(" · ")}
+-        </span>
++        <CarbonIcon icon={Carbon.ChevronRight} size={12} className="disclosure-chevron" />
++        <span>{summary}</span>
+       </button>
+-      {(expanded || reveal) && (
+-        <div style={{ marginTop: 8 }}>
++      {open && (
++        <div className="steps-list">
+           {children}
+         </div>
+       )}
+@@ -237,6 +230,24 @@ function ProcessDetailsGroup({ messageCount, toolCallCount, defaultExpanded = fa
+   );
+ }
+ 
++/** The usage of a turn's assistant messages from `from` to `to`, summed. */
++function sumTurnUsage(messages: AgentMessage[], from: number, to: number): UsageTotals | undefined {
++  let total: UsageTotals | undefined;
++  for (let i = Math.max(0, from); i <= to && i < messages.length; i++) {
++    const message = messages[i];
++    if (message.role !== "assistant") continue;
++    const usage = (message as AssistantMessage).usage;
++    if (!usage) continue;
++    total ??= { input: 0, output: 0, cacheRead: 0, cacheWrite: 0, cost: { total: 0 } };
++    total.input += usage.input ?? 0;
++    total.output += usage.output ?? 0;
++    total.cacheRead += usage.cacheRead ?? 0;
++    total.cacheWrite += usage.cacheWrite ?? 0;
++    total.cost.total += usage.cost?.total ?? 0;
++  }
++  return total;
++}
++
+ export function ChatWindow({ session, searchTarget, onSearchTargetHandled, initialScrollPosition, onScrollPositionChange, sessionRunning, newSessionCwd, newSessionDraftKey, newSessionContextBar, initialNewSessionChoices, onNewSessionChoicesChange, onAgentEnd, onToolEnd, onAttentionNeeded, onSessionCreated, onSessionForked, modelsRefreshKey, chatInputRef, onBranchDataChange, onSystemPromptChange, onSystemToolsChange, onSystemInfoLoaderChange, onSessionStatsChange, onSessionStatsPanelOpen, onOpenSettings, onContextUsageChange, onOpenFile, onFilesUploaded, onOpenSubagent, onAskInNewChat, quoteSelectionEnabled = false, initialPrompt, onInitialPromptConsumed, soundEnabled = true, onSoundToggle, playDoneSound = () => {}, unlockAudio, holdAudio }: Props) {
+   const { t } = useI18n();
+   const isMobile = useIsMobile();
+@@ -1024,24 +1035,7 @@ export function ChatWindow({ session, searchTarget, onSearchTargetHandled, initi
                />
              ))}
            </div>
@@ -5353,7 +7844,86 @@ index 6c540a4..14fd340 100644
          </div>
        )}
  
-@@ -1367,7 +1347,7 @@ export function ChatWindow({ session, searchTarget, onSearchTargetHandled, initi
+@@ -1080,7 +1074,7 @@ export function ChatWindow({ session, searchTarget, onSearchTargetHandled, initi
+           style={{ visibility: pendingScrollRestore ? "hidden" : undefined }}
+         >
+           <div style={{ minWidth: 0, padding: `0 ${CHAT_COLUMN_PADDING}px` }}>
+-            <div ref={messageContentRef} onPointerUp={captureQuotedSelection} style={{ width: "100%", minWidth: 0, maxWidth: "var(--chat-content-max-width, 820px)", margin: "0 auto" }}>
++            <div ref={messageContentRef} onPointerUp={captureQuotedSelection} style={{ width: "100%", minWidth: 0, maxWidth: "var(--chat-content-max-width, 720px)", margin: "0 auto" }}>
+             {(() => {
+               let lastUserIdx = -1;
+               for (let i = messages.length - 1; i >= 0; i--) {
+@@ -1107,7 +1101,7 @@ export function ChatWindow({ session, searchTarget, onSearchTargetHandled, initi
+                 if (idx === lastUserIdx) { (lastUserMsgRef as { current: HTMLDivElement | null }).current = el; }
+               };
+ 
+-              const renderMessage = (idx: number, options: { attachRef?: boolean; keyPrefix?: string; messageOverride?: AgentMessage; showTimestamp?: boolean; writtenFiles?: WrittenFile[]; recoverTruncation?: boolean } = {}): ReactNode => {
++              const renderMessage = (idx: number, options: { attachRef?: boolean; keyPrefix?: string; messageOverride?: AgentMessage; showTimestamp?: boolean; writtenFiles?: WrittenFile[]; recoverTruncation?: boolean; inSteps?: boolean; turnUsage?: UsageTotals } = {}): ReactNode => {
+                 const msg = options.messageOverride ?? messages[idx];
+                 if (isHiddenCustomMessage(msg)) return null;
+                 const isVisible = isMessageGroupAnchor(msg) || msg.role === "assistant";
+@@ -1151,6 +1145,8 @@ export function ChatWindow({ session, searchTarget, onSearchTargetHandled, initi
+                     onCompact={options.recoverTruncation ? handleCompact : undefined}
+                     isCompacting={options.recoverTruncation ? isCompacting : undefined}
+                     compactError={options.recoverTruncation ? compactError : undefined}
++                    inSteps={options.inSteps}
++                    turnUsage={options.turnUsage}
+                   />
+                 );
+                 if (!isVisible || currentRefIdx === undefined) return view;
+@@ -1204,7 +1200,7 @@ export function ChatWindow({ session, searchTarget, onSearchTargetHandled, initi
+                 const finalAnswerMessage = finalViews.answer;
+ 
+                 const processViews: ReactNode[] = [];
+-                let processToolCount = 0;
++                const processCalls: ToolCallContent[] = [];
+                 let processRefIdx: number | undefined;
+                 let revealProcess = false;
+ 
+@@ -1222,13 +1218,14 @@ export function ChatWindow({ session, searchTarget, onSearchTargetHandled, initi
+                   const blocks = getDisplayableAssistantBlocks(message);
+                   if (blocks.length === 0) continue;
+                   processRefIdx ??= visibleRefIndexByMessage.get(processIdx);
+-                  processToolCount += countToolCallBlocks(blocks);
++                  for (const block of blocks) if (block.type === "toolCall") processCalls.push(block as ToolCallContent);
+                   revealProcess ||= Boolean(pendingSearchScroll && entryIds[processIdx] === pendingSearchScroll.entryId && (!searchBlock || blocks.includes(searchBlock)));
+                   processViews.push(renderMessage(processIdx, {
+                     attachRef: false,
+                     keyPrefix: "process",
+                     messageOverride: message,
+                     showTimestamp: false,
++                    inSteps: true,
+                   }));
+                 }
+ 
+@@ -1244,7 +1241,7 @@ export function ChatWindow({ session, searchTarget, onSearchTargetHandled, initi
+                           would otherwise stay open once its answer shows up, e.g. when
+                           switching between an answered and an unanswered leaf of the same
+                           turn. Manual toggles survive every other re-render. */}
+-                      <ProcessDetailsGroup key={answered ? "answered" : "unanswered"} messageCount={processViews.length} toolCallCount={processToolCount} defaultExpanded={!answered} reveal={revealProcess} t={t}>
++                      <ProcessDetailsGroup key={answered ? "answered" : "unanswered"} messageCount={processViews.length} toolCalls={processCalls} defaultExpanded={!answered} reveal={revealProcess} t={t}>
+                         {processViews}
+                       </ProcessDetailsGroup>
+                     </div>,
+@@ -1267,6 +1264,8 @@ export function ChatWindow({ session, searchTarget, onSearchTargetHandled, initi
+                   rendered.push(renderMessage(finalAssistantIdx, {
+                     messageOverride: finalAnswerMessage,
+                     writtenFiles,
++                    // The answer's actions row carries the whole turn's usage, its steps' included.
++                    turnUsage: processViews.length > 0 ? sumTurnUsage(messages, userIdx + 1, finalAssistantIdx) : undefined,
+                     recoverTruncation: endIdx === messages.length && !isStreaming && !hasAssistantAnswer(finalAnswerMessage),
+                   }));
+                 }
+@@ -1353,7 +1352,7 @@ export function ChatWindow({ session, searchTarget, onSearchTargetHandled, initi
+             overflowY: "auto",
+             padding: quoteInputOpen ? 12 : 3,
+             border: "1px solid var(--border)",
+-            borderRadius: 6,
++            borderRadius: "var(--radius-sm)",
+             background: "var(--bg)",
+             boxShadow: "0 2px 10px rgba(0,0,0,0.12)",
+           }}
+@@ -1367,7 +1366,7 @@ export function ChatWindow({ session, searchTarget, onSearchTargetHandled, initi
                <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                  <span style={{ flex: 1, minWidth: 0, fontSize: 12, fontWeight: 600 }}>{t("chat.askInNewChat")}</span>
                  <button type="button" className="file-viewer-icon-button" title={t("i18n.close")} aria-label={t("i18n.close")} disabled={quoteSubmitting} onClick={closeQuotedSelection} style={{ border: "none" }}>
@@ -5362,7 +7932,7 @@ index 6c540a4..14fd340 100644
                  </button>
                </div>
                <ChatInput
-@@ -1402,9 +1382,7 @@ export function ChatWindow({ session, searchTarget, onSearchTargetHandled, initi
+@@ -1402,9 +1401,7 @@ export function ChatWindow({ session, searchTarget, onSearchTargetHandled, initi
                onClick={() => { setQuoteInputOpen(true); window.getSelection()?.removeAllRanges(); }}
                style={{ width: "auto", height: 35, flex: "0 0 auto", gap: 5, padding: "0 10px", border: "none", fontSize: 12, fontWeight: 500 }}
              >
@@ -5373,7 +7943,7 @@ index 6c540a4..14fd340 100644
                <span>{t("chat.askInNewChat")}</span>
              </button>
            )}
-@@ -1435,9 +1413,7 @@ export function ChatWindow({ session, searchTarget, onSearchTargetHandled, initi
+@@ -1435,9 +1432,7 @@ export function ChatWindow({ session, searchTarget, onSearchTargetHandled, initi
                aria-label={t("chat.scrollToLatest")}
                onClick={() => scrollToBottom("smooth")}
              >
@@ -5384,16 +7954,19 @@ index 6c540a4..14fd340 100644
              </button>
            </div>
          )}
-@@ -1450,7 +1426,7 @@ export function ChatWindow({ session, searchTarget, onSearchTargetHandled, initi
+@@ -1448,9 +1443,9 @@ export function ChatWindow({ session, searchTarget, onSearchTargetHandled, initi
+             width are inline here). */}
+         {isEmptyNew && (
            <div className="new-session-hero" style={{ paddingLeft: 16, paddingRight: isMobile ? 16 : 52 }}>
-             <div className="new-session-hero-inner" style={{ maxWidth: "var(--chat-content-max-width, 820px)" }}>
+-            <div className="new-session-hero-inner" style={{ maxWidth: "var(--chat-content-max-width, 820px)" }}>
++            <div className="new-session-hero-inner" style={{ maxWidth: "var(--chat-content-max-width, 720px)" }}>
                <div className="new-session-brand">
 -                <Image src="/icons/apple-touch-icon.png" width={40} height={40} alt="" priority className="new-session-logo" />
 +                <PiLogo size={28} className="new-session-logo" />
                  <div className="new-session-brand-text">
                    <span className="new-session-brand-name">Pi Web</span>
                    <span className="new-session-meta">
-@@ -1648,11 +1624,7 @@ function ExtensionWaitingCount({ count }: { count: number }) {
+@@ -1648,11 +1643,7 @@ function ExtensionWaitingCount({ count }: { count: number }) {
  /** Corner brackets pointing outward; when expanded they point inward (restore). */
  function ExtensionSizeIcon({ expanded }: { expanded: boolean }) {
    return (
@@ -5406,7 +7979,43 @@ index 6c540a4..14fd340 100644
    );
  }
  
-@@ -1862,9 +1834,7 @@ function ExtensionDialog({
+@@ -1767,7 +1758,7 @@ function ExtensionDialog({
+             width: "100%",
+             padding: "10px 12px",
+             border: "1px solid var(--border)",
+-            borderRadius: 8,
++            borderRadius: "var(--radius-md)",
+             background: "var(--bg)",
+             boxShadow: "0 12px 32px rgba(0,0,0,0.18)",
+             color: "var(--text)",
+@@ -1806,7 +1797,7 @@ function ExtensionDialog({
+           display: "flex",
+           flexDirection: "column",
+           border: "1px solid var(--border)",
+-          borderRadius: 8,
++          borderRadius: "var(--radius-md)",
+           background: "var(--bg)",
+           boxShadow: "0 20px 60px rgba(0,0,0,0.28)",
+           overflow: "hidden",
+@@ -1833,7 +1824,7 @@ function ExtensionDialog({
+               placeItems: "center",
+               width: 28,
+               height: 28,
+-              borderRadius: 6,
++              borderRadius: "var(--radius-sm)",
+               border: "1px solid var(--border)",
+               background: "var(--bg-panel)",
+               color: "var(--text-muted)",
+@@ -1854,7 +1845,7 @@ function ExtensionDialog({
+               placeItems: "center",
+               width: 28,
+               height: 28,
+-              borderRadius: 6,
++              borderRadius: "var(--radius-sm)",
+               border: "1px solid var(--border)",
+               background: "var(--bg-panel)",
+               color: "var(--text-muted)",
+@@ -1862,9 +1853,7 @@ function ExtensionDialog({
                flexShrink: 0,
              }}
            >
@@ -5417,7 +8026,88 @@ index 6c540a4..14fd340 100644
            </button>
          </div>
  
-@@ -2200,9 +2170,7 @@ function ExtensionCustomPanel({
+@@ -1911,7 +1900,7 @@ function ExtensionDialog({
+                   style={{
+                     width: "100%",
+                     padding: "9px 10px",
+-                    borderRadius: 7,
++                    borderRadius: "var(--radius-sm)",
+                     border: "1px solid var(--border)",
+                     background: "var(--bg-panel)",
+                     color: "var(--text)",
+@@ -1944,7 +1933,7 @@ function ExtensionDialog({
+               style={{
+                 width: "100%",
+                 padding: "9px 10px",
+-                borderRadius: 7,
++                borderRadius: "var(--radius-sm)",
+                 border: "1px solid var(--border)",
+                 background: "var(--bg-panel)",
+                 color: "var(--text)",
+@@ -1965,7 +1954,7 @@ function ExtensionDialog({
+                 width: "100%",
+                 minHeight: 220,
+                 padding: 10,
+-                borderRadius: 7,
++                borderRadius: "var(--radius-sm)",
+                 border: "1px solid var(--border)",
+                 background: "var(--bg-panel)",
+                 color: "var(--text)",
+@@ -1985,7 +1974,7 @@ function ExtensionDialog({
+             onClick={() => onRespond(request, { cancelled: true })}
+             style={{
+               padding: "6px 10px",
+-              borderRadius: 6,
++              borderRadius: "var(--radius-sm)",
+               border: "1px solid var(--border)",
+               background: "var(--bg)",
+               color: "var(--text-muted)",
+@@ -1999,7 +1988,7 @@ function ExtensionDialog({
+               onClick={submitValue}
+               style={{
+                 padding: "6px 10px",
+-                borderRadius: 6,
++                borderRadius: "var(--radius-sm)",
+                 border: "1px solid var(--accent)",
+                 background: "var(--accent)",
+                 color: "var(--accent-contrast)",
+@@ -2013,7 +2002,7 @@ function ExtensionDialog({
+               onClick={submitValue}
+               style={{
+                 padding: "6px 10px",
+-                borderRadius: 6,
++                borderRadius: "var(--radius-sm)",
+                 border: "1px solid var(--accent)",
+                 background: "var(--accent)",
+                 color: "var(--accent-contrast)",
+@@ -2080,7 +2069,7 @@ function ExtensionCustomPanel({
+             width: "100%",
+             padding: "10px 12px",
+             border: "1px solid var(--border)",
+-            borderRadius: 8,
++            borderRadius: "var(--radius-md)",
+             background: "var(--bg)",
+             boxShadow: "0 12px 32px rgba(0,0,0,0.18)",
+             color: "var(--text)",
+@@ -2122,7 +2111,7 @@ function ExtensionCustomPanel({
+           display: "flex",
+           flexDirection: "column",
+           border: "1px solid var(--border)",
+-          borderRadius: 8,
++          borderRadius: "var(--radius-md)",
+           background: "var(--bg)",
+           boxShadow: "0 20px 60px rgba(0,0,0,0.28)",
+           overflow: "hidden",
+@@ -2192,7 +2181,7 @@ function ExtensionCustomPanel({
+                 placeItems: "center",
+                 width: 28,
+                 height: 28,
+-                borderRadius: 6,
++                borderRadius: "var(--radius-sm)",
+                 border: "1px solid var(--border)",
+                 background: "var(--bg-panel)",
+                 color: "var(--text-muted)",
+@@ -2200,15 +2189,13 @@ function ExtensionCustomPanel({
                  flexShrink: 0,
                }}
              >
@@ -5428,8 +8118,15 @@ index 6c540a4..14fd340 100644
              </button>
              <button
                onClick={() => onInput(request, "\x03")}
+               style={{
+                 padding: "5px 9px",
+-                borderRadius: 6,
++                borderRadius: "var(--radius-sm)",
+                 border: "1px solid var(--border)",
+                 background: "var(--bg-panel)",
+                 color: "var(--text-muted)",
 diff --git a/components/DirectoryPicker.tsx b/components/DirectoryPicker.tsx
-index 433cd89..e9c895d 100644
+index 433cd89..344b0c2 100644
 --- a/components/DirectoryPicker.tsx
 +++ b/components/DirectoryPicker.tsx
 @@ -3,6 +3,8 @@
@@ -5441,6 +8138,33 @@ index 433cd89..e9c895d 100644
  
  interface DirectoryEntry {
    name: string;
+@@ -27,7 +29,7 @@ const panelSurfaceStyle: CSSProperties = {
+   overflow: "hidden",
+   background: "var(--bg)",
+   border: "1px solid var(--border)",
+-  borderRadius: 10,
++  borderRadius: "var(--radius-lg)",
+   boxShadow: "0 8px 32px rgba(0,0,0,0.18)",
+ };
+ 
+@@ -35,7 +37,7 @@ const textInputStyle: CSSProperties = {
+   height: 36,
+   padding: "0 10px",
+   border: "1px solid var(--border)",
+-  borderRadius: 6,
++  borderRadius: "var(--radius-sm)",
+   outline: "none",
+   background: "var(--bg-panel)",
+   color: "var(--text)",
+@@ -45,7 +47,7 @@ const textInputStyle: CSSProperties = {
+ 
+ const actionButtonStyle: CSSProperties = {
+   padding: "6px 16px",
+-  borderRadius: 6,
++  borderRadius: "var(--radius-sm)",
+   fontSize: 13,
+ };
+ 
 @@ -87,19 +89,13 @@ async function createDirectory(parentPath: string, name: string): Promise<string
  
  function FolderIcon() {
@@ -5463,19 +8187,48 @@ index 433cd89..e9c895d 100644
    );
  }
  
-@@ -226,9 +222,7 @@ export function DirectoryPicker({ onCancel, onSelect, initialPath, busy = false,
+@@ -225,10 +221,8 @@ export function DirectoryPicker({ onCancel, onSelect, initialPath, busy = false,
+         </div>
  
          <form onSubmit={handlePathSubmit} style={{ display: "flex", alignItems: "center", gap: 8, flexShrink: 0, padding: "10px 14px", borderBottom: "1px solid var(--border)" }}>
-           <button className="directory-picker-back" type="button" onClick={() => void navigateTo(parentDirectory ?? undefined)} disabled={loading || !canNavigateUp} title={t("directoryPicker.goToParent")} aria-label={t("directoryPicker.goToParent")} style={{ width: 36, height: 36, padding: 0, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, border: "1px solid var(--border)", borderRadius: 6, background: "var(--bg-hover)", color: "var(--text-muted)", cursor: canNavigateUp ? "pointer" : "default", opacity: canNavigateUp ? 1 : 0.45 }}>
+-          <button className="directory-picker-back" type="button" onClick={() => void navigateTo(parentDirectory ?? undefined)} disabled={loading || !canNavigateUp} title={t("directoryPicker.goToParent")} aria-label={t("directoryPicker.goToParent")} style={{ width: 36, height: 36, padding: 0, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, border: "1px solid var(--border)", borderRadius: 6, background: "var(--bg-hover)", color: "var(--text-muted)", cursor: canNavigateUp ? "pointer" : "default", opacity: canNavigateUp ? 1 : 0.45 }}>
 -            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
 -              <path d="m18 15-6-6-6 6" />
 -            </svg>
++          <button className="directory-picker-back" type="button" onClick={() => void navigateTo(parentDirectory ?? undefined)} disabled={loading || !canNavigateUp} title={t("directoryPicker.goToParent")} aria-label={t("directoryPicker.goToParent")} style={{ width: 36, height: 36, padding: 0, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, border: "1px solid var(--border)", borderRadius: "var(--radius-sm)", background: "var(--bg-hover)", color: "var(--text-muted)", cursor: canNavigateUp ? "pointer" : "default", opacity: canNavigateUp ? 1 : 0.45 }}>
 +            <CarbonIcon icon={Carbon.ChevronUp} size={16} />
            </button>
            <label htmlFor="directory-path" style={{ position: "absolute", width: 1, height: 1, padding: 0, margin: -1, overflow: "hidden", clip: "rect(0, 0, 0, 0)", whiteSpace: "nowrap", border: 0 }}>
              {t("directoryPicker.directoryPath")}
+@@ -253,7 +247,7 @@ export function DirectoryPicker({ onCancel, onSelect, initialPath, busy = false,
+             type="submit"
+             disabled={loading || !pathInput.trim()}
+             title={t("directoryPicker.goToDirectory")}
+-            style={{ minWidth: 58, height: 36, padding: "0 12px", border: "1px solid var(--border)", borderRadius: 6, background: "var(--bg-hover)", color: "var(--text-muted)", cursor: loading || !pathInput.trim() ? "default" : "pointer", opacity: loading || !pathInput.trim() ? 0.6 : 1 }}
++            style={{ minWidth: 58, height: 36, padding: "0 12px", border: "1px solid var(--border)", borderRadius: "var(--radius-sm)", background: "var(--bg-hover)", color: "var(--text-muted)", cursor: loading || !pathInput.trim() ? "default" : "pointer", opacity: loading || !pathInput.trim() ? 0.6 : 1 }}
+           >
+             {t("directoryPicker.go")}
+           </button>
+@@ -272,7 +266,7 @@ export function DirectoryPicker({ onCancel, onSelect, initialPath, busy = false,
+                     type="button"
+                     onClick={() => void navigateTo(drive.path)}
+                     title={drive.path}
+-                    style={{ width: "100%", minHeight: 34, display: "flex", alignItems: "center", gap: 7, padding: "6px 8px", border: 0, borderRadius: 5, background: "none", color: "var(--text-muted)", cursor: "pointer", textAlign: "left", fontFamily: "var(--font-mono)", fontSize: 11 }}
++                    style={{ width: "100%", minHeight: 34, display: "flex", alignItems: "center", gap: 7, padding: "6px 8px", border: 0, borderRadius: "var(--radius-sm)", background: "none", color: "var(--text-muted)", cursor: "pointer", textAlign: "left", fontFamily: "var(--font-mono)", fontSize: 11 }}
+                   >
+                     <DriveIcon />
+                     <span>{drive.name}</span>
+@@ -290,7 +284,7 @@ export function DirectoryPicker({ onCancel, onSelect, initialPath, busy = false,
+                 type="button"
+                 onClick={() => void navigateTo(entry.path)}
+                 title={entry.path}
+-                style={{ width: "100%", minHeight: 30, display: "flex", alignItems: "center", gap: 7, padding: "5px 8px", border: 0, borderRadius: 5, background: "none", color: "var(--text-muted)", cursor: "pointer", textAlign: "left", fontFamily: "var(--font-mono)", fontSize: 11 }}
++                style={{ width: "100%", minHeight: 30, display: "flex", alignItems: "center", gap: 7, padding: "5px 8px", border: 0, borderRadius: "var(--radius-sm)", background: "none", color: "var(--text-muted)", cursor: "pointer", textAlign: "left", fontFamily: "var(--font-mono)", fontSize: 11 }}
+               >
+                 <FolderIcon />
+                 <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{entry.name}</span>
 diff --git a/components/DismissButton.tsx b/components/DismissButton.tsx
-index d4b99df..f6144f6 100644
+index d4b99df..7355c49 100644
 --- a/components/DismissButton.tsx
 +++ b/components/DismissButton.tsx
 @@ -1,5 +1,7 @@
@@ -5486,7 +8239,12 @@ index d4b99df..f6144f6 100644
  /** Close button for an inline error or result notice. */
  export function DismissButton({ onClick, title }: { onClick: () => void; title: string }) {
    return (
-@@ -12,10 +14,7 @@ export function DismissButton({ onClick, title }: { onClick: () => void; title:
+@@ -8,14 +10,11 @@ export function DismissButton({ onClick, title }: { onClick: () => void; title:
+       onClick={onClick}
+       title={title}
+       aria-label={title}
+-      style={{ width: 24, height: 24, padding: 0, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, border: "none", borderRadius: 4, background: "none", color: "var(--text-dim)", cursor: "pointer" }}
++      style={{ width: 24, height: 24, padding: 0, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, border: "none", borderRadius: "var(--radius-xs)", background: "none", color: "var(--text-dim)", cursor: "pointer" }}
        onMouseEnter={(event) => { event.currentTarget.style.color = "var(--text-muted)"; event.currentTarget.style.background = "var(--bg-hover)"; }}
        onMouseLeave={(event) => { event.currentTarget.style.color = "var(--text-dim)"; event.currentTarget.style.background = "none"; }}
      >
@@ -5537,7 +8295,7 @@ index 5bd7070..f6586f6 100644
                  <span className="extension-widget-key">{widget.key}</span>
                </>
 diff --git a/components/FileExplorer.tsx b/components/FileExplorer.tsx
-index 94cf736..f3fd525 100644
+index 94cf736..77f0807 100644
 --- a/components/FileExplorer.tsx
 +++ b/components/FileExplorer.tsx
 @@ -18,6 +18,8 @@ import { buildSearchTree, type SearchTreeNode } from "@/lib/search-tree";
@@ -5572,7 +8330,13 @@ index 94cf736..f3fd525 100644
    );
  }
  
-@@ -354,13 +349,7 @@ export function TreeNode({
+@@ -349,18 +344,12 @@ export function TreeNode({
+           height: 24,
+           cursor: "pointer",
+           background: hovered ? "var(--bg-hover)" : "transparent",
+-          borderRadius: 4,
++          borderRadius: "var(--radius-xs)",
+           userSelect: "none",
          }}
        >
          {node.isDir && (
@@ -5598,6 +8362,24 @@ index 94cf736..f3fd525 100644
          )}
          {onAtMention && hovered && (
            <button
+@@ -443,7 +430,7 @@ export function TreeNode({
+               height: 20,
+               background: "var(--bg-panel)",
+               border: "1px solid var(--border)",
+-              borderRadius: 4,
++              borderRadius: "var(--radius-xs)",
+               color: "var(--accent)",
+               cursor: "pointer",
+               fontSize: 11,
+@@ -474,7 +461,7 @@ export function TreeNode({
+               height: 20,
+               background: "var(--bg-panel)",
+               border: "1px solid var(--border)",
+-              borderRadius: 4,
++              borderRadius: "var(--radius-xs)",
+               color: "var(--text-muted)",
+               cursor: "pointer",
+               fontSize: 11,
 @@ -483,11 +470,7 @@ export function TreeNode({
                textDecoration: "none",
              }}
@@ -5611,6 +8393,33 @@ index 94cf736..f3fd525 100644
            </a>
          )}
        </div>
+@@ -520,7 +503,7 @@ export function TreeNode({
+               padding: "0 8px",
+               background: "var(--bg-panel)",
+               border: "1px solid var(--border)",
+-              borderRadius: 4,
++              borderRadius: "var(--radius-xs)",
+               color: "var(--accent)",
+               cursor: allowingLink ? "default" : "pointer",
+               opacity: allowingLink ? 0.6 : 1,
+@@ -612,7 +595,7 @@ function ChangeRow({
+         height: 24,
+         cursor: "pointer",
+         background: hovered ? "var(--bg-hover)" : "transparent",
+-        borderRadius: 4,
++        borderRadius: "var(--radius-xs)",
+         userSelect: "none",
+         position: "relative",
+       }}
+@@ -678,7 +661,7 @@ function ChangeRow({
+             height: 20,
+             background: "var(--bg-panel)",
+             border: "1px solid var(--border)",
+-            borderRadius: 4,
++            borderRadius: "var(--radius-xs)",
+             color: "var(--accent)",
+             cursor: "pointer",
+             fontSize: 11,
 @@ -1022,11 +1005,7 @@ export const FileExplorer = forwardRef<FileExplorerHandle, Props>(function FileE
                    <path d="M21 12a9 9 0 1 1-5.7-8.4" />
                  </svg>
@@ -5624,6 +8433,32 @@ index 94cf736..f3fd525 100644
                )}
                {uploadPhase === "uploading" && <span style={{ fontSize: 10 }}>{uploadProgress}%</span>}
              </div>
+@@ -1039,7 +1018,7 @@ export const FileExplorer = forwardRef<FileExplorerHandle, Props>(function FileE
+         )}
+ 
+         {pendingConflict && (
+-          <div role="alert" style={{ padding: 7, border: "1px solid color-mix(in srgb, #f59e0b 55%, var(--border))", borderRadius: 4, background: "color-mix(in srgb, #f59e0b 9%, var(--bg-panel))" }}>
++          <div role="alert" style={{ padding: 7, border: "1px solid color-mix(in srgb, #f59e0b 55%, var(--border))", borderRadius: "var(--radius-xs)", background: "color-mix(in srgb, #f59e0b 9%, var(--bg-panel))" }}>
+             <div style={{ fontSize: 11, color: "var(--text)", lineHeight: 1.35, overflowWrap: "anywhere" }}>
+               {t("files.conflictSummary", { count: pendingConflict.conflicts.length, countSuffix: pendingConflict.conflicts.length === 1 ? "" : "s", files: pendingConflict.conflicts.join(", ") })}
+             </div>
+@@ -1049,13 +1028,13 @@ export const FileExplorer = forwardRef<FileExplorerHandle, Props>(function FileE
+               </div>
+             )}
+             <div style={{ display: "flex", gap: 5, marginTop: 7 }}>
+-              <button type="button" onClick={() => void performUpload(pendingConflict.files, "overwrite")} style={{ height: 22, padding: "0 7px", border: "1px solid #ef4444", borderRadius: 4, background: "transparent", color: "#ef4444", cursor: "pointer", fontSize: 10 }}>
++              <button type="button" onClick={() => void performUpload(pendingConflict.files, "overwrite")} style={{ height: 22, padding: "0 7px", border: "1px solid #ef4444", borderRadius: "var(--radius-xs)", background: "transparent", color: "#ef4444", cursor: "pointer", fontSize: 10 }}>
+                 {t("files.replace")}
+               </button>
+-              <button type="button" onClick={() => void performUpload(pendingConflict.files, "skip")} style={{ height: 22, padding: "0 7px", border: "1px solid var(--border)", borderRadius: 4, background: "var(--bg-panel)", color: "var(--text)", cursor: "pointer", fontSize: 10 }}>
++              <button type="button" onClick={() => void performUpload(pendingConflict.files, "skip")} style={{ height: 22, padding: "0 7px", border: "1px solid var(--border)", borderRadius: "var(--radius-xs)", background: "var(--bg-panel)", color: "var(--text)", cursor: "pointer", fontSize: 10 }}>
+                 {t("files.skipExisting")}
+               </button>
+-              <button type="button" onClick={() => setPendingConflict(null)} style={{ height: 22, padding: "0 7px", border: "none", borderRadius: 4, background: "transparent", color: "var(--text-muted)", cursor: "pointer", fontSize: 10 }}>
++              <button type="button" onClick={() => setPendingConflict(null)} style={{ height: 22, padding: "0 7px", border: "none", borderRadius: "var(--radius-xs)", background: "transparent", color: "var(--text-muted)", cursor: "pointer", fontSize: 10 }}>
+                 {t("files.cancel")}
+               </button>
+             </div>
 @@ -1075,28 +1054,19 @@ export const FileExplorer = forwardRef<FileExplorerHandle, Props>(function FileE
                <div style={{ minWidth: 0, flex: 1, display: "flex", alignItems: "center", gap: 8 }}>
                  {uploadSummary.uploaded.length > 0 && (
@@ -5656,6 +8491,15 @@ index 94cf736..f3fd525 100644
                      <span>{uploadSummary.errors.length}</span>
                    </span>
                  )}
+@@ -1107,7 +1077,7 @@ export const FileExplorer = forwardRef<FileExplorerHandle, Props>(function FileE
+                   onClick={addUploadedFilesToChat}
+                   title={uploadSummary.uploaded.length === 1 ? t("files.addUploadedFile") : t("files.addAllUploadedFiles")}
+                   aria-label={uploadSummary.uploaded.length === 1 ? t("files.addUploadedFile") : t("files.addAllUploadedFiles")}
+-                  style={{ height: 22, padding: "0 7px", display: "flex", alignItems: "center", justifyContent: "center", gap: 4, flexShrink: 0, border: "1px solid var(--border)", borderRadius: 4, background: "var(--bg-panel)", color: "var(--accent)", cursor: "pointer", fontSize: 11, fontWeight: 600, whiteSpace: "nowrap" }}
++                  style={{ height: 22, padding: "0 7px", display: "flex", alignItems: "center", justifyContent: "center", gap: 4, flexShrink: 0, border: "1px solid var(--border)", borderRadius: "var(--radius-xs)", background: "var(--bg-panel)", color: "var(--accent)", cursor: "pointer", fontSize: 11, fontWeight: 600, whiteSpace: "nowrap" }}
+                 >
+                   <MentionIcon />
+                   {t("files.mention")}
 @@ -1117,11 +1087,7 @@ export const FileExplorer = forwardRef<FileExplorerHandle, Props>(function FileE
              </div>
              {uploadSummary.errors.map((item) => (
@@ -5680,7 +8524,21 @@ index 94cf736..f3fd525 100644
            <input
              ref={searchInputRef}
              id="file-search-input"
-@@ -1156,9 +1120,7 @@ export const FileExplorer = forwardRef<FileExplorerHandle, Props>(function FileE
+@@ -1144,7 +1108,7 @@ export const FileExplorer = forwardRef<FileExplorerHandle, Props>(function FileE
+             onKeyDown={(event) => { if (event.key === "Escape") onFileSearchOpenChange?.(false); }}
+             placeholder={t("sidebar.searchFilesPlaceholder")}
+             aria-label={t("sidebar.searchFiles")}
+-            style={{ width: "100%", boxSizing: "border-box", padding: "6px 24px", border: "1px solid var(--border)", borderRadius: 8, outline: "none", background: "var(--bg)", color: "var(--text)", fontFamily: "var(--font-mono)", fontSize: 11 }}
++            style={{ width: "100%", boxSizing: "border-box", padding: "6px 24px", border: "1px solid var(--border)", borderRadius: "var(--radius-md)", outline: "none", background: "var(--bg)", color: "var(--text)", fontFamily: "var(--font-mono)", fontSize: 11 }}
+           />
+           {searchQuery && (
+             <button
+@@ -1152,13 +1116,11 @@ export const FileExplorer = forwardRef<FileExplorerHandle, Props>(function FileE
+               onClick={() => setSearchQuery("")}
+               title={t("sidebar.clearSearch")}
+               aria-label={t("sidebar.clearSearch")}
+-              style={{ position: "absolute", right: 4, top: "50%", transform: "translateY(-50%)", display: "flex", alignItems: "center", justifyContent: "center", width: 18, height: 18, padding: 0, border: "none", borderRadius: 4, background: "none", color: "var(--text-dim)", cursor: "pointer" }}
++              style={{ position: "absolute", right: 4, top: "50%", transform: "translateY(-50%)", display: "flex", alignItems: "center", justifyContent: "center", width: 18, height: 18, padding: 0, border: "none", borderRadius: "var(--radius-xs)", background: "none", color: "var(--text-dim)", cursor: "pointer" }}
                onMouseEnter={(e) => { e.currentTarget.style.background = "var(--bg-hover)"; e.currentTarget.style.color = "var(--text)"; }}
                onMouseLeave={(e) => { e.currentTarget.style.background = "none"; e.currentTarget.style.color = "var(--text-dim)"; }}
              >
@@ -5763,7 +8621,7 @@ index b46d21a..8a8b640 100644
  
  export function FolderIcon({ size = 14, open = false }: IconProps & { open?: boolean }) {
 diff --git a/components/FileViewer.tsx b/components/FileViewer.tsx
-index 9426211..b47d4ce 100644
+index 9426211..5c5712b 100644
 --- a/components/FileViewer.tsx
 +++ b/components/FileViewer.tsx
 @@ -34,6 +34,8 @@ import {
@@ -5814,6 +8672,15 @@ index 9426211..b47d4ce 100644
                  </button>
                </>
              )}
+@@ -1733,7 +1723,7 @@ function TextFileViewer({
+             gap: 10,
+             padding: "5px 8px",
+             border: "1px solid var(--border)",
+-            borderRadius: 6,
++            borderRadius: "var(--radius-sm)",
+             color: "var(--text-dim)",
+             fontSize: 11,
+           }}
 diff --git a/components/FontSettings.tsx b/components/FontSettings.tsx
 index 7e4c208..de44269 100644
 --- a/components/FontSettings.tsx
@@ -5945,10 +8812,23 @@ index 515b033..eeb4c1e 100644
  
  test("collapses a displayed custom message from its header alone", () => {
 diff --git a/components/MessageView.tsx b/components/MessageView.tsx
-index f2ff1de..226059e 100644
+index f2ff1de..de7e3d6 100644
 --- a/components/MessageView.tsx
 +++ b/components/MessageView.tsx
-@@ -35,6 +35,8 @@ import type {
+@@ -1,10 +1,11 @@
+ "use client";
+ 
+-import { memo, useState, useRef, useEffect, useMemo } from "react";
++import { memo, useState, useRef, useEffect, useLayoutEffect, useMemo } from "react";
+ import ReactMarkdown from "react-markdown";
+ import { MarkdownBody } from "./MarkdownBody";
+ import { ImagePreview } from "./ImagePreview";
+ import { ThinkingIcon } from "./ThinkingIcon";
++import { stepKind } from "@/lib/step-summary";
+ import { copyText } from "@/lib/clipboard";
+ import { useI18n } from "@/hooks/useI18n";
+ import { parseCompactionSummary } from "@/lib/compaction-summary";
+@@ -35,6 +36,8 @@ import type {
    ToolCallContent,
    ThinkingContent,
  } from "@/lib/types";
@@ -5957,25 +8837,140 @@ index f2ff1de..226059e 100644
  
  // CJK chars ~1 token each (GLM/DeepSeek/GPT-o200k); other chars ~4 chars/token.
  const CJK_PATTERN = /[\u3000-\u30ff\u3400-\u9fff\uf900-\ufaff\u{20000}-\u{2fa1f}\uac00-\ud7af]/u;
-@@ -420,10 +422,10 @@ function UserMessageView({ message, cwd, onOpenFile, entryId, onFork, forking, o
-             flex: 1,
-             minWidth: 0,
-             background: isEditing ? "color-mix(in srgb, var(--accent) 14%, var(--user-bg))" : "var(--user-bg)",
+@@ -122,7 +125,7 @@ function SafeMarkdownBody({ children, className, ...props }: React.ComponentProp
+           margin: "4px 0",
+           padding: "7px 10px",
+           border: "1px solid var(--border)",
+-          borderRadius: 6,
++          borderRadius: "var(--radius-sm)",
+           background: "var(--bg-panel)",
+           color: "var(--text-muted)",
+           cursor: "pointer",
+@@ -213,6 +216,19 @@ interface Props {
+   onCompact?: () => void;
+   isCompacting?: boolean;
+   compactError?: string | null;
++  /** A step of a longer turn, shown inside its summary line: no actions row. */
++  inSteps?: boolean;
++  /** The whole turn's usage, summed by the caller, for the answer's actions row. */
++  turnUsage?: UsageTotals;
++}
++
++/** Token counts and cost, of one reply or summed over a turn. */
++export interface UsageTotals {
++  input: number;
++  output: number;
++  cacheRead: number;
++  cacheWrite: number;
++  cost: { total: number };
+ }
+ 
+ export function getModelDisplayName(
+@@ -280,12 +296,12 @@ function haveSameRelevantToolResults(
+   return true;
+ }
+ 
+-export const MessageView = memo(function MessageView({ message, isStreaming, toolResults, modelNames, cwd, onOpenFile, onOpenSubagent, entryId, searchBlock, onFork, forking, onEditContent, onCancelEdit, isEditing, showTimestamp, prevTimestamp, sessionId, writtenFiles, onCompact, isCompacting, compactError }: Props) {
++export const MessageView = memo(function MessageView({ message, isStreaming, toolResults, modelNames, cwd, onOpenFile, onOpenSubagent, entryId, searchBlock, onFork, forking, onEditContent, onCancelEdit, isEditing, showTimestamp, prevTimestamp, sessionId, writtenFiles, onCompact, isCompacting, compactError, inSteps, turnUsage }: Props) {
+   if (message.role === "user") {
+     return <UserMessageView message={message as UserMessage} cwd={cwd} onOpenFile={onOpenFile} entryId={entryId} onFork={onFork} forking={forking} onEditContent={onEditContent} onCancelEdit={onCancelEdit} isEditing={isEditing} />;
+   }
+   if (message.role === "assistant") {
+-    return <AssistantMessageView message={message as AssistantMessage} isStreaming={isStreaming} toolResults={toolResults} modelNames={modelNames} cwd={cwd} onOpenFile={onOpenFile} onOpenSubagent={onOpenSubagent} showTimestamp={showTimestamp} prevTimestamp={prevTimestamp} sessionId={sessionId} entryId={entryId} searchBlock={searchBlock} writtenFiles={writtenFiles} onCompact={onCompact} isCompacting={isCompacting} compactError={compactError} />;
++    return <AssistantMessageView message={message as AssistantMessage} isStreaming={isStreaming} toolResults={toolResults} modelNames={modelNames} cwd={cwd} onOpenFile={onOpenFile} onOpenSubagent={onOpenSubagent} showTimestamp={showTimestamp} prevTimestamp={prevTimestamp} sessionId={sessionId} entryId={entryId} searchBlock={searchBlock} writtenFiles={writtenFiles} onCompact={onCompact} isCompacting={isCompacting} compactError={compactError} inSteps={inSteps} turnUsage={turnUsage} />;
+   }
+   if (message.role === "toolResult") {
+     // Rendered inline under its toolCall — skip standalone rendering if paired
+@@ -322,9 +338,18 @@ export const MessageView = memo(function MessageView({ message, isStreaming, too
+     && prev.sessionId === next.sessionId
+     && prev.onCompact === next.onCompact
+     && prev.isCompacting === next.isCompacting
+-    && prev.compactError === next.compactError;
++    && prev.compactError === next.compactError
++    && prev.inSteps === next.inSteps
++    && sameUsage(prev.turnUsage, next.turnUsage);
+ });
+ 
++function sameUsage(a?: UsageTotals, b?: UsageTotals): boolean {
++  if (a === b) return true;
++  if (!a || !b) return false;
++  return a.input === b.input && a.output === b.output && a.cacheRead === b.cacheRead
++    && a.cacheWrite === b.cacheWrite && a.cost?.total === b.cost?.total;
++}
++
+ function UserMessageView({ message, cwd, onOpenFile, entryId, onFork, forking, onEditContent, onCancelEdit, isEditing }: {
+   message: UserMessage;
+   cwd?: string;
+@@ -337,7 +362,6 @@ function UserMessageView({ message, cwd, onOpenFile, entryId, onFork, forking, o
+   isEditing?: boolean;
+ }) {
+   const { t } = useI18n();
+-  const [hovered, setHovered] = useState(false);
+   const [copied, setCopied] = useState(false);
+   const [expanded, setExpanded] = useState(false);
+ 
+@@ -391,7 +415,7 @@ function UserMessageView({ message, cwd, onOpenFile, entryId, onFork, forking, o
+             <img
+               src={src}
+               alt=""
+-              style={{ maxWidth: 240, maxHeight: 240, borderRadius: 6, objectFit: "contain", display: "block", border: "1px solid rgba(59,130,246,0.15)" }}
++              style={{ maxWidth: 240, maxHeight: 240, borderRadius: "var(--radius-sm)", objectFit: "contain", display: "block", border: "1px solid rgba(59,130,246,0.15)" }}
+             />
+           </ImagePreview>
+         );
+@@ -409,228 +433,120 @@ function UserMessageView({ message, cwd, onOpenFile, entryId, onFork, forking, o
+   };
+ 
+   return (
+-    <div
+-      style={{ marginBottom: 16, display: "flex", flexDirection: "column", alignItems: "flex-end" }}
+-      onMouseEnter={() => setHovered(true)}
+-      onMouseLeave={() => setHovered(false)}
+-    >
+-      <div style={{ display: "flex", alignItems: "flex-end", gap: 6, maxWidth: "85%" }}>
+-        <div
+-          style={{
+-            flex: 1,
+-            minWidth: 0,
+-            background: isEditing ? "color-mix(in srgb, var(--accent) 14%, var(--user-bg))" : "var(--user-bg)",
 -            border: isEditing ? "1px solid color-mix(in srgb, var(--accent) 62%, var(--user-bg))" : "1px solid rgba(59,130,246,0.2)",
 -            boxShadow: isEditing ? "0 0 0 2px color-mix(in srgb, var(--accent) 16%, transparent)" : undefined,
 -            borderRadius: 12,
 -            padding: "8px 12px",
-+            border: "none",
-+            boxShadow: isEditing ? "0 0 0 2px var(--focus-ring)" : undefined,
-+            borderRadius: 16,
-+            padding: "8px 14px",
-             fontSize: "calc(14px + var(--chat-font-size-offset, 0px))",
-             lineHeight: 1.6,
-             color: "var(--text)",
-@@ -458,20 +460,7 @@ function UserMessageView({ message, cwd, onOpenFile, entryId, onFork, forking, o
-                   <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
-                     {commandName}
-                   </span>
+-            fontSize: "calc(14px + var(--chat-font-size-offset, 0px))",
+-            lineHeight: 1.6,
+-            color: "var(--text)",
+-            wordBreak: "break-word",
+-            maxHeight: USER_BUBBLE_MAX_HEIGHT,
+-            overflowY: "auto",
+-          }}
+-        >
+-          {commandText ? (
+-            <div style={{ display: "flex", flexDirection: "column", gap: 6, minWidth: 0 }}>
+-              {imageBlocksNode}
+-              <div style={{ display: "flex", alignItems: "flex-start", gap: 8, flexWrap: "wrap" }}>
+-                <button
+-                  onClick={() => setExpanded((prev) => !prev)}
+-                  title={expanded ? t("i18n.collapse") : t("i18n.expand")}
+-                  aria-expanded={expanded}
+-                  style={{
+-                    display: "flex",
+-                    alignItems: "center",
+-                    gap: 6,
+-                    flexShrink: 0,
+-                    padding: 0,
+-                    background: "none",
+-                    border: "none",
+-                    cursor: "pointer",
+-                    color: "var(--accent)",
+-                    fontFamily: "var(--font-mono)",
+-                    fontSize: "calc(13px + var(--chat-font-size-offset, 0px))",
+-                    textAlign: "left",
+-                  }}
+-                >
+-                  <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+-                    {commandName}
+-                  </span>
 -                  <svg
 -                    width="11"
 -                    height="11"
@@ -5990,96 +8985,521 @@ index f2ff1de..226059e 100644
 -                  >
 -                    <polyline points="6 9 12 15 18 9" />
 -                  </svg>
-+                  <CarbonIcon icon={Carbon.ChevronDown} size={11} style={{ flexShrink: 0, opacity: 0.75, transform: expanded ? "rotate(180deg)" : "none", transition: "transform 0.15s" }} />
-                 </button>
-                 {commandArgs && (
-                   <span style={{
-@@ -531,14 +520,9 @@ function UserMessageView({ message, cwd, onOpenFile, entryId, onFork, forking, o
-               onMouseLeave={(e) => { if (!copied) e.currentTarget.style.color = "var(--text-dim)"; }}
+-                </button>
+-                {commandArgs && (
+-                  <span style={{
+-                    color: "var(--text)",
+-                    fontSize: "calc(14px + var(--chat-font-size-offset, 0px))",
+-                    lineHeight: 1.6,
+-                    whiteSpace: "pre-wrap",
+-                    wordBreak: "break-word",
+-                    minWidth: 0,
+-                    flex: 1,
+-                  }}>
+-                    {commandArgs}
+-                  </span>
+-                )}
+-              </div>
+-              {expanded && (
+-                <MarkdownBody className="markdown-user-message" keepLineBreaks cwd={cwd} onOpenFile={onOpenFile}>{content}</MarkdownBody>
++    // The person's prompt: a small filled bubble on the right, as in Claude; its
++    // actions (copy, edit from here, a new session from here) and time show under
++    // it on hover or keyboard focus.
++    <div className="turn-user">
++      <div
++        className={`user-bubble${isEditing ? " is-editing" : ""}`}
++        style={{ maxHeight: USER_BUBBLE_MAX_HEIGHT }}
++      >
++        {commandText ? (
++          <div style={{ display: "flex", flexDirection: "column", gap: 6, minWidth: 0 }}>
++            {imageBlocksNode}
++            <div style={{ display: "flex", alignItems: "flex-start", gap: 8, flexWrap: "wrap" }}>
++              <button
++                onClick={() => setExpanded((prev) => !prev)}
++                title={expanded ? t("i18n.collapse") : t("i18n.expand")}
++                aria-expanded={expanded}
++                style={{
++                  display: "flex",
++                  alignItems: "center",
++                  gap: 6,
++                  flexShrink: 0,
++                  padding: 0,
++                  background: "none",
++                  border: "none",
++                  cursor: "pointer",
++                  color: "var(--accent)",
++                  fontFamily: "var(--font-mono)",
++                  fontSize: "calc(13px + var(--chat-font-size-offset, 0px))",
++                  textAlign: "left",
++                }}
++              >
++                <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
++                  {commandName}
++                </span>
++                <CarbonIcon icon={Carbon.ChevronDown} size={11} style={{ flexShrink: 0, opacity: 0.75, transform: expanded ? "rotate(180deg)" : "none", transition: "transform 0.15s" }} />
++              </button>
++              {commandArgs && (
++                <span style={{
++                  color: "var(--text)",
++                  fontSize: "calc(14px + var(--chat-font-size-offset, 0px))",
++                  lineHeight: 1.6,
++                  whiteSpace: "pre-wrap",
++                  wordBreak: "break-word",
++                  minWidth: 0,
++                  flex: 1,
++                }}>
++                  {commandArgs}
++                </span>
+               )}
+             </div>
+-          ) : (
++            {expanded && (
++              <MarkdownBody className="markdown-user-message" keepLineBreaks cwd={cwd} onOpenFile={onOpenFile}>{content}</MarkdownBody>
++            )}
++          </div>
++        ) : (
+           <>
+-          {imageBlocksNode}
+-          {content && <SafeMarkdownBody className="markdown-user-message" keepLineBreaks cwd={cwd} onOpenFile={onOpenFile}>{content}</SafeMarkdownBody>}
++            {imageBlocksNode}
++            {content && <SafeMarkdownBody className="markdown-user-message" keepLineBreaks cwd={cwd} onOpenFile={onOpenFile}>{content}</SafeMarkdownBody>}
+           </>
+-          )}
+-        </div>
+-
++        )}
+       </div>
+ 
+-      {/* Bottom row: action buttons + timestamp */}
+-      {(time || canFork || canEdit || true) && (
+-        <div style={{
+-          display: "flex", alignItems: "center", justifyContent: "flex-end",
+-          gap: 6, marginTop: 3,
+-        }}>
+-          <div style={{
+-            display: "flex", gap: 3,
+-            opacity: hovered ? 1 : 0,
+-            pointerEvents: hovered ? "auto" : "none",
+-            transition: "opacity 0.12s",
+-          }}>
++      <div className="message-actions">
++        <div className={`message-actions-reveal${forking || canCancelEdit ? " is-pinned" : ""}`}>
++          {time && <span className="message-meta">{time}</span>}
++          <button
++            type="button"
++            className="ui-btn ui-btn--xs ui-btn--icon"
++            data-done={copied || undefined}
++            onClick={copyContent}
++            title={t("i18n.copyMessage")}
++            aria-label={copied ? t("i18n.copied") : t("i18n.copyMessage")}
++          >
++            <CarbonIcon icon={copied ? Carbon.Checkmark : Carbon.Copy} size={14} />
++          </button>
++          {canEdit && !canCancelEdit && (
+             <button
+-              onClick={copyContent}
+-               title={t("i18n.copyMessage")}
+-              style={{
+-                display: "flex", alignItems: "center", gap: 4,
+-                padding: "3px 8px", height: 22,
+-                background: "none", border: "none",
+-                borderRadius: 5,
+-                color: copied ? "var(--accent)" : "var(--text-dim)",
+-                cursor: "pointer",
+-                fontSize: 11, fontWeight: 400,
+-                whiteSpace: "nowrap",
+-                transition: "color 0.12s",
+-              }}
+-              onMouseEnter={(e) => { if (!copied) e.currentTarget.style.color = "var(--accent)"; }}
+-              onMouseLeave={(e) => { if (!copied) e.currentTarget.style.color = "var(--text-dim)"; }}
++              type="button"
++              className="ui-btn ui-btn--xs ui-btn--icon"
++              onClick={() => onEditContent!(editTarget, entryId!)}
++              title={t("i18n.editFromHereTitle")}
++              aria-label={t("i18n.editFromHere")}
              >
-               {copied ? (
+-              {copied ? (
 -                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
 -                  <polyline points="20 6 9 17 4 12" />
 -                </svg>
-+                <CarbonIcon icon={Carbon.Checkmark} size={11} />
-               ) : (
+-              ) : (
 -                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
 -                  <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
 -                  <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
 -                </svg>
-+                <CarbonIcon icon={Carbon.Copy} size={11} />
-               )}
-                {copied ? t("i18n.copied") : t("i18n.copy")}
+-              )}
+-               {copied ? t("i18n.copied") : t("i18n.copy")}
++              <CarbonIcon icon={Carbon.Edit} size={14} />
++            </button>
++          )}
++          {canCancelEdit && (
++            <button
++              type="button"
++              className="ui-btn ui-btn--xs"
++              data-busy
++              onClick={onCancelEdit}
++              title={t("i18n.cancel")}
++              aria-label={t("i18n.cancel")}
++            >
++              <CarbonIcon icon={Carbon.Close} size={12} />
++              {t("i18n.cancel")}
++            </button>
++          )}
++          {canFork && (
++            <button
++              type="button"
++              className="ui-btn ui-btn--xs ui-btn--icon"
++              data-busy={forking || undefined}
++              onClick={() => { onFork!(entryId!); }}
++              disabled={forking}
++              title={forking ? t("i18n.creatingSession") : t("i18n.newSessionTitle")}
++              aria-label={forking ? t("i18n.creating") : t("i18n.newSession")}
++            >
++              <CarbonIcon icon={Carbon.Branch} size={14} />
              </button>
-@@ -568,10 +552,7 @@ function UserMessageView({ message, cwd, onOpenFile, entryId, onFork, forking, o
-                   onMouseEnter={(e) => { e.currentTarget.style.color = "var(--accent)"; }}
-                   onMouseLeave={(e) => { e.currentTarget.style.color = "var(--text-dim)"; }}
-                 >
+-          </div>
+-          {(canFork || canEdit || canCancelEdit) && (
+-            <div style={{
+-              display: "flex", gap: 3,
+-              opacity: (hovered || forking || canCancelEdit) ? 1 : 0,
+-              pointerEvents: (hovered || forking || canCancelEdit) ? "auto" : "none",
+-              transition: "opacity 0.12s",
+-            }}>
+-              {canEdit && !canCancelEdit && (
+-                <button
+-                  onClick={() => onEditContent!(editTarget, entryId!)}
+-                   title={t("i18n.editFromHereTitle")}
+-                  style={{
+-                    display: "flex", alignItems: "center", gap: 4,
+-                    padding: "3px 8px", height: 22,
+-                    background: "none", border: "none",
+-                    borderRadius: 5,
+-                    color: "var(--text-dim)",
+-                    cursor: "pointer",
+-                    fontSize: 11, fontWeight: 400,
+-                    whiteSpace: "nowrap",
+-                    transition: "color 0.12s",
+-                  }}
+-                  onMouseEnter={(e) => { e.currentTarget.style.color = "var(--accent)"; }}
+-                  onMouseLeave={(e) => { e.currentTarget.style.color = "var(--text-dim)"; }}
+-                >
 -                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
 -                    <polyline points="15 10 20 15 15 20" />
 -                    <path d="M4 4v7a4 4 0 0 0 4 4h12" />
 -                  </svg>
-+                  <CarbonIcon icon={Carbon.ArrowDownRight} size={11} />
-                    {t("i18n.editFromHere")}
-                 </button>
-               )}
-@@ -592,9 +573,7 @@ function UserMessageView({ message, cwd, onOpenFile, entryId, onFork, forking, o
-                     whiteSpace: "nowrap",
-                   }}
-                 >
+-                   {t("i18n.editFromHere")}
+-                </button>
+-              )}
+-              {canCancelEdit && (
+-                <button
+-                  type="button"
+-                  onClick={onCancelEdit}
+-                  title={t("i18n.cancel")}
+-                  aria-label={t("i18n.cancel")}
+-                  style={{
+-                    display: "flex", alignItems: "center", gap: 4,
+-                    padding: "3px 8px", height: 22,
+-                    background: "none", border: "none",
+-                    borderRadius: 5,
+-                    color: "var(--accent)",
+-                    cursor: "pointer",
+-                    fontSize: 11, fontWeight: 500,
+-                    whiteSpace: "nowrap",
+-                  }}
+-                >
 -                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
 -                    <path d="M6 6l12 12M18 6L6 18" />
 -                  </svg>
-+                  <CarbonIcon icon={Carbon.Close} size={11} />
-                   {t("i18n.cancel")}
-                 </button>
-               )}
-@@ -617,12 +596,7 @@ function UserMessageView({ message, cwd, onOpenFile, entryId, onFork, forking, o
-                   onMouseEnter={(e) => { if (!forking) e.currentTarget.style.color = "var(--accent)"; }}
-                   onMouseLeave={(e) => { if (!forking) e.currentTarget.style.color = "var(--text-dim)"; }}
-                 >
+-                  {t("i18n.cancel")}
+-                </button>
+-              )}
+-              {canFork && (
+-                <button
+-                  onClick={() => { onFork!(entryId!); }}
+-                  disabled={forking}
+-                   title={forking ? t("i18n.creatingSession") : t("i18n.newSessionTitle")}
+-                  style={{
+-                    display: "flex", alignItems: "center", gap: 4,
+-                    padding: "3px 8px", height: 22,
+-                    background: "none", border: "none",
+-                    borderRadius: 5,
+-                    color: forking ? "var(--accent)" : "var(--text-dim)",
+-                    cursor: forking ? "not-allowed" : "pointer",
+-                    fontSize: 11, fontWeight: 400,
+-                    whiteSpace: "nowrap",
+-                    transition: "color 0.12s",
+-                  }}
+-                  onMouseEnter={(e) => { if (!forking) e.currentTarget.style.color = "var(--accent)"; }}
+-                  onMouseLeave={(e) => { if (!forking) e.currentTarget.style.color = "var(--text-dim)"; }}
+-                >
 -                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
 -                    <line x1="6" y1="3" x2="6" y2="15" />
 -                    <circle cx="18" cy="6" r="3" />
 -                    <circle cx="6" cy="18" r="3" />
 -                    <path d="M18 9a9 9 0 0 1-9 9" />
 -                  </svg>
-+                  <CarbonIcon icon={Carbon.Branch} size={11} />
-                    {forking ? t("i18n.creating") : t("i18n.newSession")}
-                 </button>
-               )}
-@@ -833,9 +807,7 @@ function AssistantMessageView({
-               {est > 0 && (
-                 <span style={{ display: "flex", alignItems: "center", gap: 4, color: "var(--text)" }} title={t("i18n.estimatedTokens")}>
-                   <span style={{ display: "flex", alignItems: "center", gap: 2, fontSize: 11, fontWeight: 400 }}>
+-                   {forking ? t("i18n.creating") : t("i18n.newSession")}
+-                </button>
+-              )}
+-            </div>
+           )}
+-          {time && <span style={{ fontSize: 10, color: "var(--text-dim)" }}>{time}</span>}
+         </div>
+-      )}
++      </div>
+     </div>
+   );
+ }
+@@ -652,6 +568,8 @@ function AssistantMessageView({
+   onCompact,
+   isCompacting,
+   compactError,
++  inSteps,
++  turnUsage,
+ }: {
+   message: AssistantMessage;
+   isStreaming?: boolean;
+@@ -669,6 +587,8 @@ function AssistantMessageView({
+   onCompact?: () => void;
+   isCompacting?: boolean;
+   compactError?: string | null;
++  inSteps?: boolean;
++  turnUsage?: UsageTotals;
+ }) {
+   const { t } = useI18n();
+   const time = showTimestamp ? formatTime(message.timestamp) : null;
+@@ -679,7 +599,6 @@ function AssistantMessageView({
+   const providerError = getAssistantErrorMessage(message, { isStreaming });
+   const truncated = isAssistantTruncated(message, { isStreaming });
+   const unansweredTruncation = truncated && !hasAssistantAnswer(message);
+-  const [hovered, setHovered] = useState(false);
+   const [copied, setCopied] = useState(false);
+   const streamStartRef = useRef<StreamRateStart | null>(null);
+   const rateKey = streamRateKey(message);
+@@ -803,123 +722,59 @@ function AssistantMessageView({
+ 
+   if (blocks.length === 0 && !isStreaming && !providerError && !truncated) return null;
+ 
++  const modelName = message.provider ? getModelDisplayName(message.provider, message.model, modelNames) : null;
++  const shownUsage = turnUsage ?? message.usage;
++  const est = Math.round(estimatedTokens);
++
+   return (
++    // The agent's reply: plain text with no label or container, as in Claude. A
++    // step of a longer turn (inSteps, inside its summary line) is only its blocks;
++    // the turn's answer ends with one quiet row: copy, then the model, the turn's
++    // usage and the time, which show on hover or focus.
+     <div
+       data-message-role="assistant"
+       data-entry-id={entryId}
+-      style={{ marginBottom: 16 }}
+-      onMouseEnter={() => setHovered(true)}
+-      onMouseLeave={() => setHovered(false)}
++      className={`turn-reply${inSteps ? " is-step" : ""}`}
+     >
+-      {/* Model label */}
+-      <div
+-        style={{
+-          fontSize: 11,
+-          color: "var(--text-dim)",
+-          marginBottom: 4,
+-          display: "flex",
+-          alignItems: "center",
+-          gap: 6,
+-        }}
+-      >
+-        {message.provider && (
+-          <span>{getModelDisplayName(message.provider, message.model, modelNames)}</span>
+-        )}
+-        {isStreaming && (() => {
+-          const est = Math.round(estimatedTokens);
+-          return (
+-            <>
+-
+-              {est > 0 && (
+-                <span style={{ display: "flex", alignItems: "center", gap: 4, color: "var(--text)" }} title={t("i18n.estimatedTokens")}>
+-                  <span style={{ display: "flex", alignItems: "center", gap: 2, fontSize: 11, fontWeight: 400 }}>
 -                    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
 -                      <line x1="5" y1="1.5" x2="5" y2="8.5" /><polyline points="2 6 5 8.5 8 6" />
 -                    </svg>
-+                    <CarbonIcon icon={Carbon.ArrowDown} size={10} />
-                     {est}
-                   </span>
-                   {tps !== null && (() => {
-@@ -957,14 +929,9 @@ function AssistantMessageView({
-             onMouseLeave={(e) => { if (!copied) e.currentTarget.style.color = "var(--text-dim)"; }}
+-                    {est}
+-                  </span>
+-                  {tps !== null && (() => {
+-                    const bg = tps >= 50 ? "#53b3cb" : tps >= 30 ? "#9bc53d" : tps >= 15 ? "#f9c22e" : "#e01a4f";
+-                    return (
+-                      <span style={{ marginLeft: 6, padding: "1px 6px", borderRadius: 4, background: bg, color: "#fff", fontSize: 11, fontWeight: 400 }}>
+-                        {tps.toFixed(1)} t/s
+-                      </span>
+-                    );
+-                  })()}
+-                </span>
+-              )}
+-            </>
+-          );
+-        })()}
+-      </div>
++      {isStreaming && est > 0 && (
++        <div className="message-meta" style={{ display: "flex", alignItems: "center", gap: 6, padding: 0, marginBottom: 4 }} title={t("i18n.estimatedTokens")}>
++          {modelName && <span>{modelName}</span>}
++          <span style={{ display: "inline-flex", alignItems: "center", gap: 2 }}>
++            <CarbonIcon icon={Carbon.ArrowDown} size={10} />
++            {est}
++          </span>
++          {tps !== null && <span>{tps.toFixed(1)} t/s</span>}
++        </div>
++      )}
+ 
+-      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
++      <div className="reply-blocks">
+         {blockItems.map(({ block, originalIndex }) => (
+           <BlockView key={`${entryId ?? "stream"}-${originalIndex}`} block={block} searchTarget={block === searchBlock} toolResults={toolResults} isStreaming={isStreaming} streamingDuration={streamingDurations.get(originalIndex) ?? (block.type === "thinking" ? thinkingDurationFromFile : undefined)} toolCallDurations={toolCallDurations} cwd={cwd} onOpenFile={onOpenFile} onOpenSubagent={onOpenSubagent} sessionId={sessionId} entryId={entryId} blockIndex={originalIndex} />
+         ))}
+       </div>
+ 
+       {providerError && (
+-        <div
+-          role="alert"
+-          style={{
+-            marginTop: blocks.length > 0 ? 8 : 0,
+-            padding: "7px 10px",
+-            border: "1px solid rgba(239,68,68,0.3)",
+-            borderRadius: 6,
+-            background: "rgba(239,68,68,0.07)",
+-            color: "#ef4444",
+-            fontFamily: "var(--font-mono)",
+-            fontSize: 12,
+-            lineHeight: 1.5,
+-            whiteSpace: "pre-wrap",
+-            overflowWrap: "anywhere",
+-          }}
+-        >
++        <div role="alert" className="reply-notice is-error" style={{ marginTop: blocks.length > 0 ? 8 : 0 }}>
+           Error: {providerError}
+         </div>
+       )}
+ 
+       {truncated && (
+-        <div
+-          role="alert"
+-          style={{
+-            marginTop: blocks.length > 0 || providerError ? 8 : 0,
+-            padding: "7px 10px",
+-            border: "1px solid rgba(234,179,8,0.3)",
+-            borderRadius: 6,
+-            background: "rgba(234,179,8,0.07)",
+-            color: "#ca8a04",
+-            fontFamily: "var(--font-mono)",
+-            fontSize: 12,
+-            lineHeight: 1.5,
+-            whiteSpace: "pre-wrap",
+-            overflowWrap: "anywhere",
+-          }}
+-        >
++        <div role="alert" className="reply-notice is-warning" style={{ marginTop: blocks.length > 0 || providerError ? 8 : 0 }}>
+           {t(unansweredTruncation ? "chat.truncatedWithoutAnswer" : "chat.truncatedByOutputLimit")}
+           {unansweredTruncation && onCompact && (
+             <button
+               type="button"
++              className="ui-btn ui-btn--sm ui-btn--secondary"
+               onClick={onCompact}
+               disabled={isCompacting}
+-              style={{
+-                display: "block",
+-                marginTop: 8,
+-                padding: "3px 8px",
+-                border: "1px solid currentColor",
+-                borderRadius: 5,
+-                background: "transparent",
+-                color: "inherit",
+-                cursor: isCompacting ? "default" : "pointer",
+-                font: "inherit",
+-              }}
++              style={{ display: "flex", marginTop: 8 }}
+             >
+               {t(isCompacting ? "chat.compacting" : "chat.compactContext")}
+             </button>
+           )}
+           {unansweredTruncation && compactError && (
+-            <div style={{ marginTop: 8, color: "#ef4444", whiteSpace: "pre-wrap" }}>{compactError}</div>
++            <div style={{ marginTop: 8, color: "var(--danger)", whiteSpace: "pre-wrap" }}>{compactError}</div>
+           )}
+         </div>
+       )}
+@@ -928,51 +783,28 @@ function AssistantMessageView({
+         <TurnWrittenFiles files={writtenFiles} onOpenFile={onOpenFile} />
+       )}
+ 
+-      <div style={{
+-        display: "flex", alignItems: "center", gap: 8, marginTop: 4,
+-      }}>
+-        {message.usage && !isStreaming && (
+-          <div style={{ fontSize: 11, color: "var(--text-dim)" }}>
+-            {formatUsage(message.usage)}
+-          </div>
+-        )}
+-        {textContent && !isStreaming && (
++      {/* Only an answer has an actions row: a step that only called tools has nothing to copy. */}
++      {!inSteps && !isStreaming && textContent && (
++        <div className="message-actions">
+           <button
++            type="button"
++            className="ui-btn ui-btn--xs ui-btn--icon"
++            data-done={copied || undefined}
+             onClick={copyContent}
+-             title={t("i18n.copyMessage")}
+-            style={{
+-              display: "flex", alignItems: "center", gap: 4,
+-              padding: "3px 8px", height: 22,
+-              background: "none", border: "none",
+-              borderRadius: 5,
+-              color: copied ? "var(--accent)" : "var(--text-dim)",
+-              cursor: "pointer",
+-              fontSize: 11, fontWeight: 400,
+-              whiteSpace: "nowrap",
+-              opacity: hovered ? 1 : 0,
+-              pointerEvents: hovered ? "auto" : "none",
+-              transition: "opacity 0.12s, color 0.12s",
+-            }}
+-            onMouseEnter={(e) => { if (!copied) e.currentTarget.style.color = "var(--accent)"; }}
+-            onMouseLeave={(e) => { if (!copied) e.currentTarget.style.color = "var(--text-dim)"; }}
++            title={t("i18n.copyMessage")}
++            aria-label={copied ? t("i18n.copied") : t("i18n.copyMessage")}
            >
-             {copied ? (
+-            {copied ? (
 -              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
 -                <polyline points="20 6 9 17 4 12" />
 -              </svg>
-+              <CarbonIcon icon={Carbon.Checkmark} size={11} />
-             ) : (
+-            ) : (
 -              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
 -                <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
 -                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
 -              </svg>
-+              <CarbonIcon icon={Carbon.Copy} size={11} />
-             )}
-              {copied ? t("i18n.copied") : t("i18n.copy")}
+-            )}
+-             {copied ? t("i18n.copied") : t("i18n.copy")}
++            <CarbonIcon icon={copied ? Carbon.Checkmark : Carbon.Copy} size={14} />
            </button>
-@@ -1053,13 +1020,12 @@ export function ThinkingBlock({ block, duration, sessionId, entryId, blockIndex
+-        )}
+-        {time && !isStreaming && (
+-          <span style={{ fontSize: 10, color: "var(--text-dim)", marginLeft: "auto" }}>{time}</span>
+-        )}
+-      </div>
++          <div className="message-actions-reveal">
++            {modelName && <span className="message-meta">{modelName}</span>}
++            {shownUsage && formatUsageShort(shownUsage) && (
++              <span className="message-meta" title={formatUsage(shownUsage)}>{formatUsageShort(shownUsage)}</span>
++            )}
++            {time && <span className="message-meta">{time}</span>}
++          </div>
++        </div>
++      )}
+     </div>
+   );
+ }
+@@ -1052,62 +884,34 @@ export function ThinkingBlock({ block, duration, sessionId, entryId, blockIndex
+   }, [expanded, block.deferred, content, sessionId, entryId, blockIndex]);
  
    return (
-     <div style={{
+-    <div style={{
 -      display: "flex", alignItems: "flex-start", gap: 6, minWidth: 0,
 -      border: "1px solid var(--border)",
 -      borderRadius: 7,
@@ -6087,99 +9507,308 @@ index f2ff1de..226059e 100644
 -      background: "var(--bg)",
 -      fontFamily: "var(--font-mono)",
 -      fontSize: "calc(11px + var(--chat-font-size-offset, 0px))",
-+      // A quiet line like a tool call's: the reasoning is prose, in the interface type.
-+      display: "flex", alignItems: "flex-start", gap: 7, minWidth: 0,
-+      borderRadius: 8,
-+      padding: "3px 10px",
-+      background: expanded ? "var(--bg-surface)" : "transparent",
-+      fontSize: "calc(12px + var(--chat-font-size-offset, 0px))",
-       lineHeight: 1.5,
-     }}>
-       <button
-@@ -1178,12 +1144,12 @@ function ToolCallBlock({ block, result, duration, onOpenSubagent }: { block: Too
- 
+-      lineHeight: 1.5,
+-    }}>
+-      <button
+-        type="button"
+-        aria-expanded={expanded}
+-        aria-label={`${t("i18n.thinking")}${preview ? `: ${preview}` : ""}`}
+-        title={t("i18n.thinking")}
+-        onClick={() => setExpanded((v) => !v)}
+-        style={{
+-          display: "inline-flex",
+-          alignItems: "center",
+-          gap: 6,
+-          width: expanded ? 14 : "100%",
+-          flexShrink: expanded ? 0 : 1,
+-          minWidth: 0,
+-          minHeight: "1.5em",
+-          padding: 0,
+-          background: "transparent",
+-          border: "none",
+-          color: "var(--text-muted)",
+-          cursor: "pointer",
+-          font: "inherit",
+-          textAlign: "left",
+-        }}
+-      >
+-        <ThinkingIcon active={expanded} />
+-        {!expanded && (
+-          <span style={{ minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+-            {preview ? <ReactMarkdown allowedElements={[]} unwrapDisallowed skipHtml>{preview}</ReactMarkdown> : "..."}
++    // A thought is a step line like a tool call's: the bulb and the first line of the
++    // reasoning, its time on the right; opened, the whole reasoning below in the
++    // interface type, muted.
++    <div className={`tool-call is-thinking${expanded ? " is-open" : ""}`}>
++      <div className="tool-call-row">
++        <button
++          type="button"
++          className="tool-call-head"
++          aria-expanded={expanded}
++          aria-label={`${t("i18n.thinking")}${preview ? `: ${preview}` : ""}`}
++          title={t("i18n.thinking")}
++          onClick={() => setExpanded((v) => !v)}
++        >
++          <ThinkingIcon active={expanded} />
++          {/* Closed, the reasoning's first line; open, just the word, the whole text being below. */}
++          <span className="tool-call-arg is-prose">
++            {expanded
++              ? t("i18n.thinking")
++              : preview ? <ReactMarkdown allowedElements={[]} unwrapDisallowed skipHtml>{preview}</ReactMarkdown> : "..."}
+           </span>
+-        )}
+-      </button>
++        </button>
++        {duration !== undefined && <span className="tool-call-meta">{duration}s</span>}
++      </div>
+       {expanded && (
+-        <div
+-          style={{
+-            flex: 1,
+-            minWidth: 0,
+-            color: error ? "#f87171" : "var(--text-muted)",
+-            whiteSpace: "pre-wrap",
+-            overflowWrap: "anywhere",
+-          }}
+-        >
+-           {loading ? t("i18n.loadingThinking") : error ?? (block.deferred ? content : block.thinking)}
++        <div className="thinking-body" style={error ? { color: "var(--danger)" } : undefined}>
++          {loading ? t("i18n.loadingThinking") : error ?? (block.deferred ? content : block.thinking)}
+         </div>
+       )}
+-      {duration !== undefined && (
+-        <span style={{ flexShrink: 0, color: "var(--text-dim)", fontVariantNumeric: "tabular-nums" }}>{duration}s</span>
+-      )}
+     </div>
+   );
+ }
+@@ -1176,136 +980,131 @@ function ToolCallBlock({ block, result, duration, onOpenSubagent }: { block: Too
+   const subagent = isSubagentToolDetails(result?.details) ? result.details : null;
+   const codemodeCallCount = codemode ? codemode.calls.length + codemode.omitted : 0;
+ 
++  const hasBody = expanded && (
++    ((isStreamingInput || !isEditTool) && !patchFiles)
++    || Boolean(codemode)
++    || Boolean(patchFiles)
++    || Boolean(result && (patchFiles ? isError : !codemodeRunning && (resultDiff || !resultIsEmpty || resultImages.length === 0)))
++  );
++
    return (
-     <div
-+      className={`tool-call${expanded ? " is-open" : ""}${isError ? " is-error" : ""}`}
-       style={{
+-    <div
+-      style={{
 -        borderRadius: 7,
-+        // One quiet line until opened (app/globals.css .tool-call): no outline,
-+        // a fill once open, a red tint when it failed.
-         overflow: "hidden",
-         fontSize: 12,
+-        overflow: "hidden",
+-        fontSize: 12,
 -        border: isError ? "1px solid rgba(248,113,113,0.45)" : "1px solid rgba(34,197,94,0.25)",
 -        background: isError ? "rgba(248,113,113,0.05)" : "rgba(34,197,94,0.04)",
-       }}
-     >
-       {/* ── Tool call header ── */}
-@@ -1196,7 +1162,8 @@ function ToolCallBlock({ block, result, duration, onOpenSubagent }: { block: Too
-             gap: 7,
-             flex: 1,
-             minWidth: 0,
+-      }}
+-    >
+-      {/* ── Tool call header ── */}
+-      <div style={{ display: "flex", alignItems: "stretch", minWidth: 0 }}>
+-        <button
+-          onClick={toggleExpanded}
+-          style={{
+-            display: "flex",
+-            alignItems: "center",
+-            gap: 7,
+-            flex: 1,
+-            minWidth: 0,
 -            padding: "6px 10px",
-+            padding: "3px 10px",
-+            minHeight: 24,
-             background: "none",
-             border: "none",
-             color: "var(--text-muted)",
-@@ -1207,7 +1174,7 @@ function ToolCallBlock({ block, result, duration, onOpenSubagent }: { block: Too
-         >
-           <span
-             title={mcpLabel ? block.toolName : undefined}
+-            background: "none",
+-            border: "none",
+-            color: "var(--text-muted)",
+-            cursor: "pointer",
+-            fontSize: 12,
+-            textAlign: "left",
+-          }}
+-        >
+-          <span
+-            title={mcpLabel ? block.toolName : undefined}
 -            style={{ color: isError ? "#f87171" : "#16a34a", fontFamily: "var(--font-mono)", fontWeight: 600, fontSize: 11, flexShrink: 0 }}
-+            style={{ color: isError ? "var(--danger)" : "var(--text-muted)", fontWeight: 500, fontSize: 12, flexShrink: 0 }}
-           >
+-          >
++    // One step line until opened: what kind of tool (its icon), its name, what it was
++    // given and how long it took. Opened, its input and result sit below in a filled
++    // box; a failed call names itself in red.
++    <div className={`tool-call${expanded ? " is-open" : ""}${isError ? " is-error" : ""}`}>
++      <div className="tool-call-row">
++        <button type="button" className="tool-call-head" aria-expanded={expanded} onClick={toggleExpanded}>
++          <CarbonIcon icon={toolIcon(block.toolName)} size={14} className="tool-call-icon" />
++          <span className="tool-call-name" title={mcpLabel ? block.toolName : undefined}>
              {mcpLabel ? (
                <>
-@@ -1216,7 +1183,7 @@ function ToolCallBlock({ block, result, duration, onOpenSubagent }: { block: Too
+-                <span style={{ fontWeight: 500, opacity: 0.75 }}>{mcpLabel.server}/</span>
++                <span style={{ opacity: 0.75 }}>{mcpLabel.server}/</span>
+                 {mcpLabel.tool}
                </>
              ) : block.toolName}
            </span>
 -          <span style={{ color: "var(--text-dim)", fontFamily: "var(--font-mono)", fontSize: 11, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", flex: 1, minWidth: 0 }}>
-+          <span style={{ color: "var(--text-dim)", fontFamily: "var(--font-mono)", fontSize: 11.5, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", flex: 1, minWidth: 0 }}>
++          <span className="tool-call-arg">
              {isStreamingInput
                ? t("chat.generatingToolInput")
                : (patchLabel ?? (codemode ? codemodeScriptPreview(codemode.code) : getToolPreview(block)))}
-@@ -1229,9 +1196,7 @@ function ToolCallBlock({ block, result, duration, onOpenSubagent }: { block: Too
-           {duration !== undefined && (
-             <span style={{ fontSize: 11, color: "var(--text-dim)", flexShrink: 0, fontVariantNumeric: "tabular-nums" }}>{formatToolDuration(duration)}</span>
+           </span>
+           {codemodeCallCount > 0 && (
+-            <span style={{ fontSize: 11, color: "var(--text-dim)", flexShrink: 0, fontVariantNumeric: "tabular-nums" }}>
++            <span className="tool-call-meta">
+               {codemodeCallCount === 1 ? t("codemode.callCountOne") : t("codemode.callCount", { count: codemodeCallCount })}
+             </span>
            )}
+-          {duration !== undefined && (
+-            <span style={{ fontSize: 11, color: "var(--text-dim)", flexShrink: 0, fontVariantNumeric: "tabular-nums" }}>{formatToolDuration(duration)}</span>
+-          )}
 -          <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="var(--text-dim)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0, transform: expanded ? "rotate(180deg)" : "none", transition: "transform 0.15s" }}>
 -            <polyline points="2 3.5 5 6.5 8 3.5" />
 -          </svg>
-+          <CarbonIcon icon={Carbon.ChevronDown} size={10} color="var(--text-dim)" style={{ flexShrink: 0, transform: expanded ? "rotate(180deg)" : "none", transition: "transform 0.15s" }} />
++          {duration !== undefined && <span className="tool-call-meta">{formatToolDuration(duration)}</span>}
          </button>
          {subagent && onOpenSubagent && (
            <button
-@@ -1241,7 +1206,7 @@ function ToolCallBlock({ block, result, duration, onOpenSubagent }: { block: Too
+             type="button"
++            className="ui-btn ui-btn--xs ui-btn--icon tool-call-side"
+             onClick={() => onOpenSubagent(subagent.sessionId, subagent.description || subagent.profile)}
+             title={t("subagent.openTab")}
              aria-label={t("subagent.openTab")}
-             style={{ width: 32, display: "grid", placeItems: "center", border: "none", borderLeft: "1px solid var(--border)", background: "none", color: "var(--text-muted)", cursor: "pointer", flexShrink: 0 }}
+-            style={{ width: 32, display: "grid", placeItems: "center", border: "none", borderLeft: "1px solid var(--border)", background: "none", color: "var(--text-muted)", cursor: "pointer", flexShrink: 0 }}
            >
 -            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><rect x="5" y="7" width="14" height="11" rx="2" /><path d="M9 11h.01M15 11h.01M9 15h6M12 7V4M10 4h4" /></svg>
 +            <CarbonIcon icon={Carbon.Bot} size={14} />
            </button>
          )}
        </div>
-@@ -1256,8 +1221,7 @@ function ToolCallBlock({ block, result, duration, onOpenSubagent }: { block: Too
-             fontSize: "calc(12px + var(--chat-font-size-offset, 0px))",
-             lineHeight: 1.5,
-             overflow: "auto",
+ 
+-      {/* ── Expanded: input args (only when no richer view exists); a codemode script in place of its JSON ── */}
+-      {expanded && (isStreamingInput || !isEditTool) && !patchFiles && (
+-        <pre
+-          style={{
+-            margin: 0,
+-            padding: "8px 10px",
+-            color: "var(--text-muted)",
+-            fontSize: "calc(12px + var(--chat-font-size-offset, 0px))",
+-            lineHeight: 1.5,
+-            overflow: "auto",
 -            background: "var(--bg-subtle)",
 -            borderTop: isError ? "1px solid rgba(248,113,113,0.25)" : "1px solid rgba(34,197,94,0.2)",
-+            background: "transparent",
-             whiteSpace: "pre-wrap",
-             wordBreak: "break-all",
-           }}
-@@ -1276,7 +1240,7 @@ function ToolCallBlock({ block, result, duration, onOpenSubagent }: { block: Too
+-            whiteSpace: "pre-wrap",
+-            wordBreak: "break-all",
+-          }}
+-        >
+-          {codemode ? codemode.code.replace(/\r/g, "").trimEnd() : inputStr}
+-        </pre>
+-      )}
+-
+-      {/* ── Expanded: the calls a codemode script made ── */}
+-      {expanded && codemode && (
+-        <CodemodeCallList calls={codemode.calls} omitted={codemode.omitted} isError={isError} />
+-      )}
+-
+       {/* ── Result images — always visible, independent of the collapsed details ── */}
+       {resultImages.length > 0 && <ResultImages images={resultImages} isError={isError} />}
  
-       {/* ── Expanded: applied-patch split diff ── */}
-       {expanded && patchFiles && (
+-      {/* ── Expanded: applied-patch split diff ── */}
+-      {expanded && patchFiles && (
 -        <div style={{ borderTop: "1px solid rgba(34,197,94,0.15)", background: "var(--bg)" }}>
-+        <div style={{ background: "var(--bg)" }}>
-           <SplitFilesView files={patchFiles} />
-         </div>
+-          <SplitFilesView files={patchFiles} />
+-        </div>
+-      )}
++      {hasBody && (
++        <div className="tool-call-body">
++          {/* ── Input args (only when no richer view exists); a codemode script in place of its JSON ── */}
++          {(isStreamingInput || !isEditTool) && !patchFiles && (
++            <pre
++              style={{
++                margin: 0,
++                padding: "8px 10px",
++                color: "var(--text-muted)",
++                fontSize: "calc(12px + var(--chat-font-size-offset, 0px))",
++                lineHeight: 1.5,
++                overflow: "auto",
++                background: "transparent",
++                whiteSpace: "pre-wrap",
++                wordBreak: "break-all",
++              }}
++            >
++              {codemode ? codemode.code.replace(/\r/g, "").trimEnd() : inputStr}
++            </pre>
++          )}
+ 
+-      {/* ── Paired result — only shown when expanded ── */}
+-      {expanded && result && patchFiles && isError && (
+-        <PairedResult
+-          text={resultText ?? ""}
+-          isEmpty={resultIsEmpty}
+-          isError={isError}
+-        />
+-      )}
+-      {expanded && result && !patchFiles && !codemodeRunning && (
+-        resultDiff ? (
+-          <PairedDiffResult
+-            diff={resultDiff}
+-          />
+-        ) : (!resultIsEmpty || resultImages.length === 0) && (
+-          <PairedResult
+-            text={resultText ?? ""}
+-            isEmpty={resultIsEmpty}
+-            isError={isError}
+-          />
+-        )
++          {/* ── The calls a codemode script made ── */}
++          {codemode && (
++            <CodemodeCallList calls={codemode.calls} omitted={codemode.omitted} isError={isError} />
++          )}
++
++          {/* ── Applied-patch split diff ── */}
++          {patchFiles && (
++            <div style={{ background: "var(--bg)" }}>
++              <SplitFilesView files={patchFiles} />
++            </div>
++          )}
++
++          {/* ── Paired result ── */}
++          {result && patchFiles && isError && (
++            <PairedResult
++              text={resultText ?? ""}
++              isEmpty={resultIsEmpty}
++              isError={isError}
++            />
++          )}
++          {result && !patchFiles && !codemodeRunning && (
++            resultDiff ? (
++              <PairedDiffResult
++                diff={resultDiff}
++              />
++            ) : (!resultIsEmpty || resultImages.length === 0) && (
++              <PairedResult
++                text={resultText ?? ""}
++                isEmpty={resultIsEmpty}
++                isError={isError}
++              />
++            )
++          )}
++        </div>
        )}
-@@ -1316,7 +1280,6 @@ function PairedDiffResult({ diff }: {
+     </div>
+   );
+ }
+ 
++/** A tool call's icon, by what the tool does (lib/step-summary): run, read, change, search, fetch, delegate. */
++function toolIcon(toolName: string): Carbon.CarbonIconData {
++  if (toolName === CODEMODE_TOOL_NAME) return Carbon.Code;
++  switch (stepKind(toolName)) {
++    case "ran": return Carbon.Terminal;
++    case "read": return Carbon.Document;
++    case "edited": return Carbon.Edit;
++    case "searched": return Carbon.Search;
++    case "fetched": return Carbon.Link;
++    case "delegated": return Carbon.Bot;
++    default: return Carbon.Tools;
++  }
++}
++
+ interface ResultDiff {
+   text: string;
+ }
+@@ -1316,7 +1115,6 @@ function PairedDiffResult({ diff }: {
    return (
      <div
        style={{
@@ -6187,7 +9816,86 @@ index f2ff1de..226059e 100644
          background: "var(--bg)",
        }}
      >
-@@ -1587,7 +1550,6 @@ function ResultImages({ images, isError }: { images: ImageContent[]; isError: bo
+@@ -1331,7 +1129,78 @@ function SplitPatchView({ text }: { text: string }) {
+   return <SplitFilesView files={files} />;
+ }
+ 
++/** Side by side only where both halves have room for code: 960px or more. */
++const SPLIT_DIFF_MIN_WIDTH = 960;
++
++/**
++ * A diff in the transcript: unified, one column with a line number, as Claude
++ * Desktop shows edits, in the default 720px column; side by side once the chat
++ * column is wide enough for two halves of code.
++ */
+ function SplitFilesView({ files }: { files: SplitDiffFile[] }) {
++  const ref = useRef<HTMLDivElement | null>(null);
++  const [wide, setWide] = useState(false);
++  useLayoutEffect(() => {
++    const el = ref.current;
++    if (!el || typeof ResizeObserver === "undefined") return;
++    const update = () => setWide(el.clientWidth >= SPLIT_DIFF_MIN_WIDTH);
++    update();
++    const observer = new ResizeObserver(update);
++    observer.observe(el);
++    return () => observer.disconnect();
++  }, []);
++  return (
++    <div ref={ref} style={{ minWidth: 0 }}>
++      {wide ? <SideBySideFilesView files={files} /> : <UnifiedFilesView files={files} />}
++    </div>
++  );
++}
++
++/** One column: removed lines, then the lines that replaced them, each with its line number. */
++function UnifiedFilesView({ files }: { files: SplitDiffFile[] }) {
++  const showFileHeaders = files.length > 1;
++  return (
++    <div className="unified-diff">
++      {files.map((file, fileIndex) => {
++        const lines: { key: string; cell: SplitDiffCell }[] = [];
++        let added: SplitDiffCell[] = [];
++        const flush = () => {
++          for (const cell of added) lines.push({ key: `a${lines.length}`, cell });
++          added = [];
++        };
++        file.rows.forEach((row) => {
++          if (row.type === "hunk") {
++            flush();
++            if (lines.length > 0) lines.push({ key: `h${lines.length}`, cell: { type: "empty", lineNo: null, text: "⋯" } });
++            return;
++          }
++          if (row.left.type === "context") {
++            flush();
++            lines.push({ key: `c${lines.length}`, cell: row.right.type === "context" ? row.right : row.left });
++            return;
++          }
++          if (row.left.type === "removed") lines.push({ key: `r${lines.length}`, cell: row.left });
++          if (row.right.type === "added") added.push(row.right);
++        });
++        flush();
++        return (
++          <div key={fileIndex} className="unified-diff-file">
++            {showFileHeaders && <div className="unified-diff-path" title={file.newPath || file.oldPath}>{file.newPath || file.oldPath}</div>}
++            {lines.map(({ key, cell }) => (
++              <div key={key} className={`unified-diff-line is-${cell.type}`}>
++                <span className="unified-diff-no">{cell.lineNo ?? ""}</span>
++                <span className="unified-diff-mark">{cell.type === "added" ? "+" : cell.type === "removed" ? "-" : ""}</span>
++                <span className="unified-diff-text">{cell.text || "\u00a0"}</span>
++              </div>
++            ))}
++          </div>
++        );
++      })}
++    </div>
++  );
++}
++
++function SideBySideFilesView({ files }: { files: SplitDiffFile[] }) {
+   const { t } = useI18n();
+   const showFileHeaders = files.length > 1;
+ 
+@@ -1587,7 +1456,6 @@ function ResultImages({ images, isError }: { images: ImageContent[]; isError: bo
          flexWrap: "wrap",
          padding: "10px",
          background: "var(--bg)",
@@ -6195,7 +9903,16 @@ index f2ff1de..226059e 100644
        }}
      >
        {images.map((image, index) => {
-@@ -1629,8 +1591,7 @@ function PairedResult({ text, isEmpty, isError }: {
+@@ -1608,7 +1476,7 @@ function ResultImages({ images, isError }: { images: ImageContent[]; isError: bo
+                 display: "block",
+                 maxWidth: "min(100%, 720px)",
+                 maxHeight: 520,
+-                borderRadius: 6,
++                borderRadius: "var(--radius-sm)",
+                 objectFit: "contain",
+                 border: "1px solid var(--border)",
+               }}
+@@ -1629,8 +1497,7 @@ function PairedResult({ text, isEmpty, isError }: {
    return (
      <div
        style={{
@@ -6205,7 +9922,16 @@ index f2ff1de..226059e 100644
        }}
      >
        <pre
-@@ -1710,9 +1671,7 @@ function CompactionMessageView({ message }: { message: CustomMessage }) {
+@@ -1668,7 +1535,7 @@ function CompactionMessageView({ message }: { message: CustomMessage }) {
+       <div
+         style={{
+           border: "1px solid var(--border)",
+-          borderRadius: 8,
++          borderRadius: "var(--radius-md)",
+           overflow: "hidden",
+           background: "var(--bg)",
+         }}
+@@ -1710,9 +1577,7 @@ function CompactionMessageView({ message }: { message: CustomMessage }) {
                textAlign: "left",
              }}
            >
@@ -6216,7 +9942,16 @@ index f2ff1de..226059e 100644
              <span style={{ minWidth: 0 }}>
                <span style={{ display: "block", fontSize: "calc(15px + var(--chat-font-size-offset, 0px))", fontWeight: 700, lineHeight: 1.35 }}>
                  {t("i18n.conversationCompacted")}
-@@ -1852,9 +1811,7 @@ function CustomMessageView({ message, cwd, onOpenFile }: { message: CustomMessag
+@@ -1806,7 +1671,7 @@ function CustomMessageView({ message, cwd, onOpenFile }: { message: CustomMessag
+       <div
+         style={{
+           border: "1px solid var(--border)",
+-          borderRadius: 8,
++          borderRadius: "var(--radius-md)",
+           overflow: "hidden",
+           background: "var(--bg)",
+         }}
+@@ -1852,9 +1717,7 @@ function CustomMessageView({ message, cwd, onOpenFile }: { message: CustomMessag
                </span>
              )}
              {time && <span style={{ marginLeft: "auto", color: "var(--text-dim)", fontSize: 10, flexShrink: 0 }}>{time}</span>}
@@ -6227,8 +9962,41 @@ index f2ff1de..226059e 100644
            </button>
          </div>
  
+@@ -1872,7 +1735,7 @@ function CustomMessageView({ message, cwd, onOpenFile }: { message: CustomMessag
+                         <img
+                           src={src}
+                           alt=""
+-                          style={{ maxWidth: 240, maxHeight: 240, borderRadius: 6, objectFit: "contain", display: "block", border: "1px solid var(--border)" }}
++                          style={{ maxWidth: 240, maxHeight: 240, borderRadius: "var(--radius-sm)", objectFit: "contain", display: "block", border: "1px solid var(--border)" }}
+                         />
+                       </ImagePreview>
+                     );
+@@ -2021,13 +1884,16 @@ function getToolPreview(block: ToolCallContent): string {
+   return String(first).slice(0, 120);
+ }
+ 
+-function formatUsage(usage: {
+-  input: number;
+-  output: number;
+-  cacheRead: number;
+-  cacheWrite: number;
+-  cost: { total: number };
+-}): string {
++/** What a reply's usage line shows by default; the full breakdown is its tooltip. */
++function formatUsageShort(usage: UsageTotals): string {
++  const parts = [];
++  if (usage.input) parts.push(`${usage.input.toLocaleString()} in`);
++  if (usage.output) parts.push(`${usage.output.toLocaleString()} out`);
++  if (usage.cost?.total) parts.push(`$${usage.cost.total.toFixed(4)}`);
++  return parts.join(" · ");
++}
++
++function formatUsage(usage: UsageTotals): string {
+   const parts = [];
+   if (usage.input) parts.push(`${usage.input.toLocaleString()} in`);
+   if (usage.output) parts.push(`${usage.output.toLocaleString()} out`);
 diff --git a/components/ModelSelector.tsx b/components/ModelSelector.tsx
-index ba912ee..a27d0f0 100644
+index ba912ee..db662d8 100644
 --- a/components/ModelSelector.tsx
 +++ b/components/ModelSelector.tsx
 @@ -4,6 +4,8 @@ import { useEffect, useRef, useState, type CSSProperties } from "react";
@@ -6240,10 +10008,49 @@ index ba912ee..a27d0f0 100644
  
  export interface ModelSelectorOption {
    provider: string;
-@@ -204,20 +206,11 @@ export function ModelSelector({
+@@ -110,11 +112,11 @@ export function ModelSelector({
+         gap: 7,
+         width: "100%",
+         minWidth: 0,
+-        height: 34,
+-        padding: "0 9px",
++        height: "var(--size-control)",
++        padding: "0 10px",
+         overflow: "hidden",
+         border: "1px solid var(--border)",
+-        borderRadius: 5,
++        borderRadius: "var(--radius-sm)",
+         background: locked ? "var(--bg-panel)" : "var(--bg)",
+         color: locked ? "var(--text-dim)" : "var(--text)",
+         cursor: locked ? "default" : "pointer",
+@@ -128,15 +130,18 @@ export function ModelSelector({
+         gap: 6,
+         width: isMobile ? "100%" : undefined,
+         maxWidth: isMobile ? "100%" : 220,
+-        height: 32,
+-        padding: isMobile ? "8px 10px" : "8px 12px",
++        // A 28px picker in the composer's toolbar, like Claude's model picker.
++        height: "var(--size-control-sm)",
++        padding: "0 8px",
+         overflow: "hidden",
+         border: "none",
+-        borderRadius: 9,
++        borderRadius: "var(--radius-sm)",
+         background: open ? "var(--bg-hover)" : "none",
+         color: "var(--text-muted)",
+         cursor: locked ? "not-allowed" : "pointer",
+-        fontSize: 12,
++        fontSize: 13,
++        fontWeight: 500,
++        textAlign: "left",
+         opacity: locked ? 0.5 : 1,
+         transition: "background 0.12s, color 0.12s",
+       };
+@@ -203,22 +208,12 @@ export function ModelSelector({
+           <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" style={{ animation: "spin 0.8s linear infinite", flexShrink: 0 }} aria-hidden="true">
              <path d="M21 12a9 9 0 1 1-2.64-6.36" />
            </svg>
-         ) : (
+-        ) : (
 -          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" style={{ flexShrink: 0 }}>
 -            <rect x="4" y="4" width="16" height="16" rx="2" />
 -            <rect x="9" y="9" width="6" height="6" />
@@ -6252,19 +10059,54 @@ index ba912ee..a27d0f0 100644
 -            <line x1="20" y1="9" x2="23" y2="9" /><line x1="20" y1="14" x2="23" y2="14" />
 -            <line x1="1" y1="9" x2="4" y2="9" /><line x1="1" y1="14" x2="4" y2="14" />
 -          </svg>
+-        )}
++        ) : variant === "field" ? (
 +          <CarbonIcon icon={Carbon.Chip} size={11} style={{ flexShrink: 0 }} />
-         )}
++        ) : null}
          <span style={{ flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{currentName}</span>
-         {variant === "field" && (
+-        {variant === "field" && (
 -          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" style={{ flexShrink: 0, color: "var(--text-dim)" }}>
 -            <polyline points="6 9 12 15 18 9" />
 -          </svg>
-+          <CarbonIcon icon={Carbon.ChevronDown} size={12} style={{ flexShrink: 0, color: "var(--text-dim)" }} />
-         )}
+-        )}
++        {/* The name and a chevron, as Claude's model picker: the toolbar's pickers all read "value ⌄". */}
++        <CarbonIcon icon={Carbon.ChevronDown} size={12} style={{ flexShrink: 0, color: "var(--text-dim)" }} />
        </button>
  
+       {open && anchorRect && (() => {
+@@ -250,9 +245,9 @@ export function ModelSelector({
+               maxHeight,
+               overflow: "hidden",
+               border: "1px solid var(--border)",
+-              borderRadius: 8,
+-              background: "var(--bg)",
+-              boxShadow: openAbove ? "0 -4px 16px rgba(0,0,0,0.10)" : "0 4px 16px rgba(0,0,0,0.10)",
++              borderRadius: "var(--radius-lg)",
++              background: "var(--bg-elevated)",
++              boxShadow: "var(--shadow-pop)",
+             }}
+           >
+             {showFilter && (
+@@ -274,7 +269,7 @@ export function ModelSelector({
+                     minWidth: isMobile ? 0 : 220,
+                     padding: "5px 8px",
+                     border: "1px solid var(--border)",
+-                    borderRadius: 5,
++                    borderRadius: "var(--radius-sm)",
+                     outline: "none",
+                     background: "var(--bg)",
+                     color: "var(--text)",
+@@ -284,7 +279,7 @@ export function ModelSelector({
+                 />
+               </div>
+             )}
+-            <div style={{ minHeight: 0, overflowY: "auto" }}>
++            <div style={{ minHeight: 0, overflowY: "auto", padding: "4px 0" }}>
+               {onClear && !filter.trim() && (
+                 <SelectorRow active={!value} gutter={Boolean(onSetDefault)} onSelect={() => {
+                   setOpen(false);
 diff --git a/components/ModelsConfig.tsx b/components/ModelsConfig.tsx
-index 9f6b556..6a6a46b 100644
+index 9f6b556..7063172 100644
 --- a/components/ModelsConfig.tsx
 +++ b/components/ModelsConfig.tsx
 @@ -54,6 +54,8 @@ import { providerBadgeLabel } from "./enabled-models-helpers";
@@ -6276,6 +10118,15 @@ index 9f6b556..6a6a46b 100644
  
  // ── Types ─────────────────────────────────────────────────────────────────────
  
+@@ -184,7 +186,7 @@ const inputStyle = {
+   padding: "6px 9px",
+   background: "var(--bg-panel)",
+   border: "1px solid var(--border)",
+-  borderRadius: 5,
++  borderRadius: "var(--radius-sm)",
+   color: "var(--text)",
+   fontSize: 12,
+   outline: "none",
 @@ -258,17 +260,9 @@ function SecretTextInput({
          }}
        >
@@ -6296,6 +10147,105 @@ index 9f6b556..6a6a46b 100644
          )}
        </button>
      </div>
+@@ -413,7 +407,7 @@ function ProviderDetail({ name, editingName, provider, onChange, onEditingNameCh
+         <TextInput value={editingName} onChange={onEditingNameChange} placeholder="provider-name" mono />
+         {editingName !== name && editingName.trim() && (
+           <button onClick={() => onRename(editingName.trim())}
+-            style={{ marginTop: 4, padding: "3px 10px", background: "var(--accent)", border: "none", borderRadius: 4, color: "var(--accent-contrast)", cursor: "pointer", fontSize: 11, alignSelf: "flex-start" }}>
++            style={{ marginTop: 4, padding: "3px 10px", background: "var(--accent)", border: "none", borderRadius: "var(--radius-xs)", color: "var(--accent-contrast)", cursor: "pointer", fontSize: 11, alignSelf: "flex-start" }}>
+              {t("i18n.rename")}
+           </button>
+         )}
+@@ -455,7 +449,7 @@ function ProviderDetail({ name, editingName, provider, onChange, onEditingNameCh
+             onClick={handleDiscoverModels}
+             disabled={discoveryState.phase === "loading"}
+             style={{
+-              alignSelf: "flex-start", height: 30, padding: "0 12px", border: "1px solid var(--border)", borderRadius: 5,
++              alignSelf: "flex-start", height: 30, padding: "0 12px", border: "1px solid var(--border)", borderRadius: "var(--radius-sm)",
+               background: "var(--bg-panel)", color: discoveryState.phase === "loading" ? "var(--text-dim)" : "var(--text-muted)",
+               cursor: discoveryState.phase === "loading" ? "not-allowed" : "pointer", fontSize: 11,
+             }}
+@@ -465,7 +459,7 @@ function ProviderDetail({ name, editingName, provider, onChange, onEditingNameCh
+         )}
+ 
+         {discoveryState.phase === "error" && (
+-          <div style={{ padding: "7px 9px", border: "1px solid rgba(239,68,68,0.3)", borderRadius: 5, color: "#ef4444", fontSize: 11, lineHeight: 1.4 }}>
++          <div style={{ padding: "7px 9px", border: "1px solid rgba(239,68,68,0.3)", borderRadius: "var(--radius-sm)", color: "#ef4444", fontSize: 11, lineHeight: 1.4 }}>
+             {discoveryState.message}
+           </div>
+         )}
+@@ -480,7 +474,7 @@ function ProviderDetail({ name, editingName, provider, onChange, onEditingNameCh
+               style={{ ...inputStyle, width: "100%", minWidth: 0 }}
+             />
+ 
+-            <div style={{ maxHeight: 220, overflowY: "auto", border: "1px solid var(--border)", borderRadius: 6, background: "var(--bg-panel)" }}>
++            <div style={{ maxHeight: 220, overflowY: "auto", border: "1px solid var(--border)", borderRadius: "var(--radius-sm)", background: "var(--bg-panel)" }}>
+               <label
+                 style={{
+                   minHeight: 32, padding: "5px 9px", display: "flex", alignItems: "center", gap: 8,
+@@ -539,7 +533,7 @@ function ProviderDetail({ name, editingName, provider, onChange, onEditingNameCh
+               <button
+                 onClick={addSelectedModels}
+                 disabled={selectedCount === 0}
+-                style={{ height: 28, padding: "0 11px", border: "none", borderRadius: 5, background: selectedCount ? "var(--accent)" : "var(--bg-panel)", color: selectedCount ? "var(--accent-contrast)" : "var(--text-dim)", cursor: selectedCount ? "pointer" : "not-allowed", fontSize: 11, fontWeight: 600, whiteSpace: "nowrap" }}
++                style={{ height: 28, padding: "0 11px", border: "none", borderRadius: "var(--radius-sm)", background: selectedCount ? "var(--accent)" : "var(--bg-panel)", color: selectedCount ? "var(--accent-contrast)" : "var(--text-dim)", cursor: selectedCount ? "pointer" : "not-allowed", fontSize: 11, fontWeight: 600, whiteSpace: "nowrap" }}
+               >
+                 {selectedCount
+                   ? t("models.discoveryAddSelectedCount", { count: selectedCount })
+@@ -627,7 +621,7 @@ function ThinkingLevelMapEditor({
+               alignItems: "center",
+               gap: 8,
+               padding: "5px 4px",
+-              borderRadius: 6,
++              borderRadius: "var(--radius-sm)",
+               background: "transparent",
+               border: "1px solid transparent",
+             }}
+@@ -644,7 +638,7 @@ function ThinkingLevelMapEditor({
+               </span>
+             </div>
+ 
+-            <div style={{ display: "flex", borderRadius: 5, border: "1px solid var(--border)", overflow: "hidden", flexShrink: 0 }}>
++            <div style={{ display: "flex", borderRadius: "var(--radius-sm)", border: "1px solid var(--border)", overflow: "hidden", flexShrink: 0 }}>
+               <button
+                 onClick={() => setLevel(level, "omit")}
+                 style={{ ...btnBase, ...(state === "omit" ? btnActive : {}) }}
+@@ -659,7 +653,7 @@ function ThinkingLevelMapEditor({
+               </button>
+             </div>
+ 
+-            <div style={{ display: "flex", borderRadius: 5, border: `1px solid ${state === "string" ? "var(--accent)" : "var(--border)"}`, overflow: "hidden", transition: "border-color 0.1s" }}>
++            <div style={{ display: "flex", borderRadius: "var(--radius-sm)", border: `1px solid ${state === "string" ? "var(--accent)" : "var(--border)"}`, overflow: "hidden", transition: "border-color 0.1s" }}>
+               <button
+                 onClick={() => setLevel(level, strVal || level)}
+                 style={{ ...btnBase, ...(state === "string" ? btnActive : {}), borderRight: "1px solid var(--border)", flexShrink: 0 }}
+@@ -747,7 +741,7 @@ function HeaderListEditor({ headers, onChange }: {
+     padding: "6px 9px",
+     background: "none",
+     border: "1px solid rgba(239,68,68,0.3)",
+-    borderRadius: 4,
++    borderRadius: "var(--radius-xs)",
+     color: "#ef4444",
+     cursor: "pointer",
+     fontSize: 11,
+@@ -768,7 +762,7 @@ function HeaderListEditor({ headers, onChange }: {
+         ...current,
+         { id: nextRowIdRef.current++, name: "", value: "" },
+       ])}
+-        style={{ padding: "5px 9px", background: "none", border: "1px solid var(--border)", borderRadius: 4, color: "var(--text-muted)", cursor: "pointer", fontSize: 11, display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 5, alignSelf: "flex-start" }}>
++        style={{ padding: "5px 9px", background: "none", border: "1px solid var(--border)", borderRadius: "var(--radius-xs)", color: "var(--text-muted)", cursor: "pointer", fontSize: 11, display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 5, alignSelf: "flex-start" }}>
+         + Add header
+       </button>
+     </div>
+@@ -1051,7 +1045,7 @@ function ModelDetail({
+                 height: 28,
+                 padding: "0 8px",
+                 border: `1px solid ${testState.phase === "error" ? "#fecaca" : testState.phase === "success" ? "#bbf7d0" : "var(--border)"}`,
+-                borderRadius: 4,
++                borderRadius: "var(--radius-xs)",
+                 background: testState.phase === "error" ? "#fee2e2" : testState.phase === "success" ? "#dcfce7" : "#e5e7eb",
+                 color: "#111827",
+                 fontSize: 11,
 @@ -1075,9 +1069,7 @@ function ModelDetail({
              className={testState.phase === "success" ? "is-success" : undefined}
            >
@@ -6307,6 +10257,15 @@ index 9f6b556..6a6a46b 100644
              )}
               {testState.phase === "testing" ? t("i18n.checking") : testState.phase === "success" ? t("common.ok") : t("i18n.test")}
            </ConfigButton>
+@@ -1096,7 +1088,7 @@ function ModelDetail({
+             onClick={() => void handleCatalogFill()}
+             disabled={!model.id.trim() || catalogState.phase === "loading"}
+             style={{
+-              height: 28, padding: "0 10px", border: "1px solid var(--border)", borderRadius: 5,
++              height: 28, padding: "0 10px", border: "1px solid var(--border)", borderRadius: "var(--radius-sm)",
+               background: "var(--bg-panel)",
+               color: !model.id.trim() || catalogState.phase === "loading" ? "var(--text-dim)" : "var(--text-muted)",
+               cursor: !model.id.trim() || catalogState.phase === "loading" ? "not-allowed" : "pointer",
 @@ -1227,20 +1219,7 @@ function ModelDetail({
                {advancedSummary}
              </span>
@@ -6329,6 +10288,33 @@ index 9f6b556..6a6a46b 100644
          </button>
  
          {advancedOpen && (
+@@ -1492,7 +1471,7 @@ function OAuthDetail({ provider, onRefresh, enabledModels }: {
+                 <button
+                   key={option.id}
+                   onClick={() => submitSelection(loginState.token, option.id)}
+-                  style={{ padding: "6px 9px", background: "var(--bg)", border: "1px solid var(--border)", borderRadius: 5, color: "var(--text)", cursor: "pointer", fontSize: 12, textAlign: "left" }}
++                  style={{ padding: "6px 9px", background: "var(--bg)", border: "1px solid var(--border)", borderRadius: "var(--radius-sm)", color: "var(--text)", cursor: "pointer", fontSize: 12, textAlign: "left" }}
+                 >
+                   {option.label}
+                 </button>
+@@ -1527,7 +1506,7 @@ function OAuthDetail({ provider, onRefresh, enabledModels }: {
+             <p style={{ margin: 0, fontSize: 12, color: "var(--text-muted)", lineHeight: 1.5 }}>
+               Open the verification page and enter this code:
+             </p>
+-            <div style={{ padding: "8px 10px", background: "var(--bg)", border: "1px solid var(--border)", borderRadius: 5, color: "var(--text)", fontSize: 16, fontWeight: 700, fontFamily: "var(--font-mono)", letterSpacing: 0 }}>
++            <div style={{ padding: "8px 10px", background: "var(--bg)", border: "1px solid var(--border)", borderRadius: "var(--radius-sm)", color: "var(--text)", fontSize: 16, fontWeight: 700, fontFamily: "var(--font-mono)", letterSpacing: 0 }}>
+               {loginState.userCode}
+             </div>
+             <p style={{ margin: 0, fontSize: 11, color: "var(--text-dim)", lineHeight: 1.5 }}>
+@@ -1666,7 +1645,7 @@ function ApiKeyDetail({ provider, onRefresh, enabledModels }: {
+           style={{
+             padding: "6px 12px",
+             background: savedOk ? "#16a34a" : apiKey.trim() ? "var(--accent)" : "var(--bg-panel)",
+-            border: "none", borderRadius: 5,
++            border: "none", borderRadius: "var(--radius-sm)",
+             color: savedOk ? "#fff" : apiKey.trim() ? "var(--accent-contrast)" : "var(--text-dim)",
+             cursor: (saving || !apiKey.trim() || savedOk) ? "not-allowed" : "pointer",
+             fontSize: 12, fontWeight: 600, flexShrink: 0,
 @@ -1674,9 +1653,7 @@ function ApiKeyDetail({ provider, onRefresh, enabledModels }: {
            }}
          >
@@ -6340,8 +10326,21 @@ index 9f6b556..6a6a46b 100644
            )}
             {savedOk ? t("i18n.saved") : saving ? t("i18n.saving") : t("i18n.save")}
          </button>
-@@ -1750,9 +1727,7 @@ function AddProviderPicker({
-       <div style={{ width: 820, maxWidth: "calc(100vw - 32px)", maxHeight: "min(72vh, calc(100vh - 32px))", background: "var(--bg)", border: "1px solid var(--border)", borderRadius: 10, display: "flex", flexDirection: "column", boxShadow: "0 8px 32px rgba(0,0,0,0.22)", overflow: "hidden" }}>
+@@ -1725,7 +1702,7 @@ function AddProviderPicker({
+     padding: "10px 12px",
+     background: "var(--bg-panel)",
+     border: "1px solid var(--border)",
+-    borderRadius: 7,
++    borderRadius: "var(--radius-sm)",
+     boxSizing: "border-box",
+     cursor: "pointer",
+     minWidth: 0,
+@@ -1747,12 +1724,10 @@ function AddProviderPicker({
+         onClose();
+       }}
+     >
+-      <div style={{ width: 820, maxWidth: "calc(100vw - 32px)", maxHeight: "min(72vh, calc(100vh - 32px))", background: "var(--bg)", border: "1px solid var(--border)", borderRadius: 10, display: "flex", flexDirection: "column", boxShadow: "0 8px 32px rgba(0,0,0,0.22)", overflow: "hidden" }}>
++      <div style={{ width: 820, maxWidth: "calc(100vw - 32px)", maxHeight: "min(72vh, calc(100vh - 32px))", background: "var(--bg)", border: "1px solid var(--border)", borderRadius: "var(--radius-lg)", display: "flex", flexDirection: "column", boxShadow: "0 8px 32px rgba(0,0,0,0.22)", overflow: "hidden" }}>
          {/* Search */}
          <div style={{ padding: "10px 14px", borderBottom: "1px solid var(--border)", flexShrink: 0, display: "flex", alignItems: "center", gap: 8 }}>
 -          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ color: "var(--text-dim)", flexShrink: 0 }}>
@@ -6351,13 +10350,15 @@ index 9f6b556..6a6a46b 100644
            <input
              ref={inputRef}
              value={search}
-@@ -1783,9 +1758,7 @@ function AddProviderPicker({
+@@ -1782,10 +1757,8 @@ function AddProviderPicker({
+                     <div style={{ fontSize: 12, fontWeight: 600, color: "var(--text)", lineHeight: 1.3, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>OpenAI / Anthropic compatible</div>
                       <div style={{ fontSize: 10, color: "var(--text-dim)", marginTop: 2 }}>{t("i18n.customEndpoint")}</div>
                    </div>
-                   <span style={{ width: 26, height: 26, borderRadius: 5, background: "var(--bg-hover)", border: "1px dashed var(--border)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
+-                  <span style={{ width: 26, height: 26, borderRadius: 5, background: "var(--bg-hover)", border: "1px dashed var(--border)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
 -                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ color: "var(--text-dim)" }}>
 -                      <line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" />
 -                    </svg>
++                  <span style={{ width: 26, height: 26, borderRadius: "var(--radius-sm)", background: "var(--bg-hover)", border: "1px dashed var(--border)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
 +                    <CarbonIcon icon={Carbon.Add} size={13} style={{ color: "var(--text-dim)" }} />
                    </span>
                  </button>
@@ -6377,6 +10378,15 @@ index 9f6b556..6a6a46b 100644
                        <ConfigSidebarText className="is-grow">
                          {pName}
                        </ConfigSidebarText>
+@@ -2204,7 +2171,7 @@ export function ModelsConfig({ onClose, embedded = false, cwd = null }: {
+                              {m.id || t("i18n.newModel")}
+                           </ConfigSidebarText>
+                           {m.reasoning && (
+-                            <span style={{ fontSize: 9, padding: "1px 4px", background: "rgba(99,102,241,0.12)", color: "rgba(99,102,241,0.8)", borderRadius: 3, flexShrink: 0 }}>T</span>
++                            <span style={{ fontSize: 9, padding: "1px 4px", background: "rgba(99,102,241,0.12)", color: "rgba(99,102,241,0.8)", borderRadius: "var(--radius-xs)", flexShrink: 0 }}>T</span>
+                           )}
+                         </ConfigSidebarItem>
+                       );
 @@ -2250,10 +2217,7 @@ export function ModelsConfig({ onClose, embedded = false, cwd = null }: {
              className={savedOk ? "is-success" : undefined}
            >
@@ -6503,7 +10513,7 @@ index b9e6dde..1a67841 100644
    );
  }
 diff --git a/components/PluginsConfig.tsx b/components/PluginsConfig.tsx
-index 83fddc9..29fe048 100644
+index 83fddc9..69cbd44 100644
 --- a/components/PluginsConfig.tsx
 +++ b/components/PluginsConfig.tsx
 @@ -1,5 +1,6 @@
@@ -6529,6 +10539,24 @@ index 83fddc9..29fe048 100644
          ),
        }]}
        target={
+@@ -370,7 +364,7 @@ function PackageDetail({
+                 style={{
+                   fontSize: 10,
+                   padding: "1px 5px",
+-                  borderRadius: 3,
++                  borderRadius: "var(--radius-xs)",
+                   background: "rgba(120,120,120,0.12)",
+                   color: "var(--text-dim)",
+                 }}
+@@ -382,7 +376,7 @@ function PackageDetail({
+                 style={{
+                   fontSize: 10,
+                   padding: "1px 5px",
+-                  borderRadius: 3,
++                  borderRadius: "var(--radius-xs)",
+                   background: "rgba(245,158,11,0.12)",
+                   color: "#d97706",
+                 }}
 diff --git a/components/ProjectTrustDialog.tsx b/components/ProjectTrustDialog.tsx
 index 37702d6..5fe5ce0 100644
 --- a/components/ProjectTrustDialog.tsx
@@ -6565,8 +10593,21 @@ index 37702d6..5fe5ce0 100644
            <div className="project-trust-content">
              <div id="project-trust-title" className="project-trust-title">
                {t("trust.dialogTitle")}
+diff --git a/components/ProviderIcon.tsx b/components/ProviderIcon.tsx
+index 29d1cd9..b811a8a 100644
+--- a/components/ProviderIcon.tsx
++++ b/components/ProviderIcon.tsx
+@@ -75,7 +75,7 @@ export function ProviderIcon({ id, size }: { id: string; size: number }) {
+         width: size,
+         height: size,
+         border: "1px solid var(--border)",
+-        borderRadius: 4,
++        borderRadius: "var(--radius-xs)",
+         color: "var(--text-dim)",
+         display: "inline-flex",
+         alignItems: "center",
 diff --git a/components/ProviderUsageSummary.tsx b/components/ProviderUsageSummary.tsx
-index cf38be6..cede408 100644
+index cf38be6..c08aaef 100644
 --- a/components/ProviderUsageSummary.tsx
 +++ b/components/ProviderUsageSummary.tsx
 @@ -4,6 +4,8 @@ import { useCallback, useEffect, useRef, useState } from "react";
@@ -6578,8 +10619,12 @@ index cf38be6..cede408 100644
  
  type UsageBucket = {
    id: string;
-@@ -100,14 +102,9 @@ function ProviderUsageContent({ providerId, enabled }: { providerId: string; ena
-           style={{ position: "relative", display: "flex", alignItems: "center", justifyContent: "center", width: 32, height: 30, padding: 0, background: "none", border: "none", color: refreshDone ? "#4ade80" : "var(--text-dim)", cursor: enabled && !querying ? "pointer" : "default", borderRadius: 5, flexShrink: 0, opacity: enabled ? 1 : 0.6, transition: "color 0.3s" }}
+@@ -97,17 +99,12 @@ function ProviderUsageContent({ providerId, enabled }: { providerId: string; ena
+           disabled={!enabled || querying}
+           title={t(querying ? "providerUsage.refreshing" : "providerUsage.refresh")}
+           aria-label={t(querying ? "providerUsage.refreshing" : "providerUsage.refresh")}
+-          style={{ position: "relative", display: "flex", alignItems: "center", justifyContent: "center", width: 32, height: 30, padding: 0, background: "none", border: "none", color: refreshDone ? "#4ade80" : "var(--text-dim)", cursor: enabled && !querying ? "pointer" : "default", borderRadius: 5, flexShrink: 0, opacity: enabled ? 1 : 0.6, transition: "color 0.3s" }}
++          style={{ position: "relative", display: "flex", alignItems: "center", justifyContent: "center", width: 32, height: 30, padding: 0, background: "none", border: "none", color: refreshDone ? "#4ade80" : "var(--text-dim)", cursor: enabled && !querying ? "pointer" : "default", borderRadius: "var(--radius-sm)", flexShrink: 0, opacity: enabled ? 1 : 0.6, transition: "color 0.3s" }}
          >
            {refreshDone ? (
 -            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#4ade80" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
@@ -6596,7 +10641,7 @@ index cf38be6..cede408 100644
          </button>
          {report && (
 diff --git a/components/SelectorRow.tsx b/components/SelectorRow.tsx
-index 555da8f..3262e7e 100644
+index 555da8f..e64352a 100644
 --- a/components/SelectorRow.tsx
 +++ b/components/SelectorRow.tsx
 @@ -2,12 +2,12 @@
@@ -6615,15 +10660,44 @@ index 555da8f..3262e7e 100644
    );
  }
  
-@@ -77,7 +77,7 @@ export function SelectorRow({
+@@ -58,6 +58,9 @@ export function SelectorRow({
+       }}
+       style={{
+         position: "relative",
++        // Inset with small corners, as the sidebar's menus and Claude's.
++        margin: "0 4px",
++        borderRadius: "var(--radius-sm)",
+         background: active ? "var(--bg-selected)" : hovered ? "var(--bg-hover)" : "transparent",
+         transition: "background 0.1s",
+       }}
+@@ -71,14 +74,14 @@ export function SelectorRow({
+           display: "flex", alignItems: "center", gap: 8,
+           width: "100%", minWidth: 0, padding: gutter ? "7px 36px 7px 12px" : "7px 12px",
+           border: "none", background: "none",
+-          color: active ? "var(--text)" : "var(--text-muted)",
+-          cursor: "pointer", fontSize: 12, fontWeight: active ? 600 : 400,
++          color: active ? "var(--text-strong)" : "var(--text)",
++          cursor: "pointer", fontSize: 13, fontWeight: active ? 500 : 400,
+           textAlign: "left", whiteSpace: "nowrap",
          }}
        >
          {active
 -          ? <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="var(--accent)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }} aria-hidden="true"><polyline points="1.5 5 4 7.5 8.5 2.5" /></svg>
-+          ? <CarbonIcon icon={Carbon.Checkmark} size={10} color="var(--accent)" style={{ flexShrink: 0 }} />
-           : <span style={{ width: 10, flexShrink: 0 }} />}
+-          : <span style={{ width: 10, flexShrink: 0 }} />}
++          ? <CarbonIcon icon={Carbon.Checkmark} size={12} style={{ flexShrink: 0 }} />
++          : <span style={{ width: 12, flexShrink: 0 }} />}
          {children}
        </button>
+       {star?.isDefault && (
+@@ -111,7 +114,7 @@ export function SelectorRow({
+             display: "flex", alignItems: "center", justifyContent: "center",
+             width: 24, height: 24, padding: 0,
+             background: "var(--bg-hover)", border: "1px solid var(--border)",
+-            borderRadius: 6, color: "var(--text-muted)",
++            borderRadius: "var(--radius-sm)", color: "var(--text-muted)",
+             cursor: "pointer",
+             opacity: showSave ? 1 : 0,
+             pointerEvents: showSave ? "auto" : "none",
 diff --git a/components/SessionSidebar.test.mjs b/components/SessionSidebar.test.mjs
 index 6bc923f..70b9e80 100644
 --- a/components/SessionSidebar.test.mjs
@@ -7128,8 +11202,21 @@ index 451bcd2..cef4ae2 100644
    const spinner = renderToStaticMarkup(h(SpinnerIcon, { size: 12, label: "Agent running", className: "row-status" }));
    assert.match(spinner, /width="12"/);
    assert.match(spinner, /stroke-width="2\.8"/);
+diff --git a/components/SkillsConfig.tsx b/components/SkillsConfig.tsx
+index de0d8ee..6b744f7 100644
+--- a/components/SkillsConfig.tsx
++++ b/components/SkillsConfig.tsx
+@@ -433,7 +433,7 @@ function AddSkillPanel({
+               fontSize: 12,
+               background: "var(--bg-panel)",
+               border: "1px solid var(--border)",
+-              borderRadius: 6,
++              borderRadius: "var(--radius-sm)",
+               color: "var(--text)",
+               outline: "none",
+             }}
 diff --git a/components/SubagentViewer.tsx b/components/SubagentViewer.tsx
-index 4604083..6ca365e 100644
+index 4604083..fcde29d 100644
 --- a/components/SubagentViewer.tsx
 +++ b/components/SubagentViewer.tsx
 @@ -6,6 +6,8 @@ import { StatusIcon, statusColor } from "./AgentSessionPanel";
@@ -7152,7 +11239,13 @@ index 4604083..6ca365e 100644
          </span>
          <strong
            style={{ flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", fontSize: 12, fontWeight: 600 }}
-@@ -224,9 +224,7 @@ export function SubagentViewer({ sessionId, fallbackLabel, running, onOpenFile }
+@@ -219,14 +219,12 @@ export function SubagentViewer({ sessionId, fallbackLabel, running, onOpenFile }
+           aria-label={t("subagent.refresh")}
+           style={{
+             display: "grid", placeItems: "center", width: 24, height: 24, flexShrink: 0,
+-            background: "none", border: "none", borderRadius: 4, color: "var(--text-dim)", cursor: "pointer", padding: 0,
++            background: "none", border: "none", borderRadius: "var(--radius-xs)", color: "var(--text-dim)", cursor: "pointer", padding: 0,
+           }}
            onMouseEnter={(event) => { event.currentTarget.style.color = "var(--text)"; }}
            onMouseLeave={(event) => { event.currentTarget.style.color = "var(--text-dim)"; }}
          >
@@ -7163,8 +11256,17 @@ index 4604083..6ca365e 100644
          </button>
        </div>
  
+@@ -254,7 +252,7 @@ export function SubagentViewer({ sessionId, fallbackLabel, running, onOpenFile }
+                   onClick={loadEarlier}
+                   disabled={loadingEarlier}
+                   style={{
+-                    fontSize: 11, padding: "4px 12px", borderRadius: 6,
++                    fontSize: 11, padding: "4px 12px", borderRadius: "var(--radius-sm)",
+                     border: "1px solid var(--border)", background: "var(--bg-panel)", color: "var(--text-muted)",
+                     cursor: loadingEarlier ? "default" : "pointer",
+                   }}
 diff --git a/components/TabBar.tsx b/components/TabBar.tsx
-index 23e0c79..a49f66c 100644
+index 23e0c79..2919906 100644
 --- a/components/TabBar.tsx
 +++ b/components/TabBar.tsx
 @@ -4,6 +4,8 @@ import { useState } from "react";
@@ -7192,6 +11294,15 @@ index 23e0c79..a49f66c 100644
                ) : getFileIcon(tab.label, 13)}
              </span>
              <span
+@@ -127,7 +125,7 @@ export function TabBar({ tabs, activeTabId, onSelectTab, onCloseTab }: Props) {
+                 width: 24, height: 24,
+                 background: hoveredClose === tab.id ? "var(--bg-hover)" : "transparent",
+                 border: "none",
+-                borderRadius: 4,
++                borderRadius: "var(--radius-xs)",
+                 color: hoveredClose === tab.id ? "var(--text)" : "var(--text-dim)",
+                 cursor: "pointer",
+                 padding: 0,
 @@ -137,10 +135,7 @@ export function TabBar({ tabs, activeTabId, onSelectTab, onCloseTab }: Props) {
                 title={t(tab.kind === "terminal" ? "terminal.close" : "i18n.close")}
                 aria-label={`${t(tab.kind === "terminal" ? "terminal.close" : "i18n.close")} ${tab.label}`}
@@ -7284,14 +11395,14 @@ index 5ff97ee..d3c477a 100644
 +  return <CarbonIcon icon={icon} size={size} />;
  }
 diff --git a/components/ThinkingIcon.tsx b/components/ThinkingIcon.tsx
-index 322f65e..831c0eb 100644
+index 322f65e..c42673c 100644
 --- a/components/ThinkingIcon.tsx
 +++ b/components/ThinkingIcon.tsx
 @@ -1,14 +1,14 @@
 +import { CarbonIcon } from "./CarbonIcon";
 +import * as Carbon from "./carbon/icons";
 +
-+/** The reasoning toggle's light bulb (IBM Carbon "idea"), lit in amber while the block is open. */
++/** A thought's light bulb (IBM Carbon "idea"): faint, in the ink of an opened step while its reasoning shows. */
  export function ThinkingIcon({ active, size = 14 }: { active: boolean; size?: number }) {
    return (
 -    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" style={{ flexShrink: 0 }}>
@@ -7307,11 +11418,24 @@ index 322f65e..831c0eb 100644
 +    <CarbonIcon
 +      icon={Carbon.Idea}
 +      size={size}
-+      color={active ? "#d4a017" : undefined}
-+      style={{ flexShrink: 0, filter: active ? "drop-shadow(0 0 2px rgba(250, 204, 21, 0.35))" : "none" }}
++      color={active ? "var(--text-strong)" : "var(--text-dim)"}
++      style={{ flexShrink: 0 }}
 +    />
    );
  }
+diff --git a/components/TurnWrittenFiles.tsx b/components/TurnWrittenFiles.tsx
+index ab857b3..ca44e67 100644
+--- a/components/TurnWrittenFiles.tsx
++++ b/components/TurnWrittenFiles.tsx
+@@ -38,7 +38,7 @@ export function TurnWrittenFiles({ files, onOpenFile }: {
+               color: "var(--text)",
+               background: "var(--bg-subtle)",
+               border: "1px solid var(--border)",
+-              borderRadius: 6,
++              borderRadius: "var(--radius-sm)",
+               cursor: "pointer",
+             }}
+           >
 diff --git a/components/carbon/LICENSE-carbon-icons.txt b/components/carbon/LICENSE-carbon-icons.txt
 new file mode 100644
 index 0000000..78e09cf
@@ -7745,8 +11869,83 @@ index 0000000..5547fb4
 +export const Warning: CarbonIconData = { viewBox: "0 0 16 16", shapes: [["path", {"d":"M8,1C4.1,1,1,4.1,1,8s3.1,7,7,7s7-3.1,7-7S11.9,1,8,1z M8,14c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S11.3,14,8,14z"}], ["path", {"d":"M7.5 4H8.5V9H7.5z"}], ["path", {"d":"M8,10.2c-0.4,0-0.8,0.3-0.8,0.8s0.3,0.8,0.8,0.8c0.4,0,0.8-0.3,0.8-0.8S8.4,10.2,8,10.2z"}]] };
 +/** carbon: warning--alt */
 +export const WarningAlt: CarbonIconData = { viewBox: "0 0 16 16", shapes: [["path", {"d":"M14.5,14h-13c-0.2,0-0.3-0.1-0.4-0.2c-0.1-0.2-0.1-0.3,0-0.5l6.5-12C7.7,1,8,0.9,8.2,1.1c0.1,0,0.2,0.1,0.2,0.2l6.5,12\tc0.1,0.2,0.1,0.3,0,0.5C14.9,13.9,14.7,14,14.5,14z M2.3,13h11.3L8,2.5L2.3,13z"}], ["path", {"d":"M7.5 6H8.5V9.5H7.5z"}], ["path", {"d":"M8,10.8c-0.4,0-0.8,0.3-0.8,0.8s0.3,0.8,0.8,0.8c0.4,0,0.8-0.3,0.8-0.8S8.4,10.8,8,10.8z"}]] };
+diff --git a/e2e/chat-appearance.mjs b/e2e/chat-appearance.mjs
+index f1bd91a..6c1667a 100644
+--- a/e2e/chat-appearance.mjs
++++ b/e2e/chat-appearance.mjs
+@@ -9,7 +9,7 @@ export async function checkChatAppearanceReset(page) {
+   await width.press("End");
+   await fontSize.press("End");
+   await resetWidth.click();
+-  assert.equal(await width.inputValue(), "820");
++  assert.equal(await width.inputValue(), "720");
+   assert.equal(await fontSize.inputValue(), "24", "Resetting width must preserve font size");
+   await width.press("End");
+   await resetFontSize.click();
+@@ -21,12 +21,12 @@ export async function checkChatAppearanceReset(page) {
+     fontSize: localStorage.getItem("pi-chat-content-font-size"),
+     appliedWidth: document.documentElement.style.getPropertyValue("--chat-content-max-width"),
+     appliedFontSize: document.documentElement.style.getPropertyValue("--chat-content-font-size"),
+-  })), { width: "820", fontSize: "14", appliedWidth: "820px", appliedFontSize: "14px" });
++  })), { width: "720", fontSize: "14", appliedWidth: "720px", appliedFontSize: "14px" });
+   await page.reload({ waitUntil: "networkidle" });
+   const showSidebar = page.getByRole("button", { name: "Show sidebar", exact: true });
+   if (await showSidebar.isVisible()) await showSidebar.click();
+   await page.getByRole("button", { name: "Settings", exact: true }).click();
+-  assert.equal(await width.inputValue(), "820");
++  assert.equal(await width.inputValue(), "720");
+   assert.equal(await fontSize.inputValue(), "14");
+   assert.equal(await resetWidth.isDisabled(), true);
+   assert.equal(await resetFontSize.isDisabled(), true);
+@@ -49,7 +49,7 @@ export async function checkChatAppearance(page) {
+   };
+ 
+   await openSettings();
+-  assert.equal(await width.inputValue(), "820");
++  assert.equal(await width.inputValue(), "720");
+   assert.equal(await fontSize.inputValue(), "14");
+   await width.press("End");
+   await closeSettings();
+diff --git a/e2e/font-preferences.mjs b/e2e/font-preferences.mjs
+index b3e0140..04a27d3 100644
+--- a/e2e/font-preferences.mjs
++++ b/e2e/font-preferences.mjs
+@@ -99,7 +99,7 @@ export async function checkFontPreferences(page) {
+     monoWeight: localStorage.getItem("pi-mono-font-weight"),
+     width: localStorage.getItem("pi-chat-content-width"),
+     fontSize: localStorage.getItem("pi-chat-content-font-size"),
+-  })), { ui: null, mono: null, uiWeight: null, monoWeight: null, width: "820", fontSize: "14" });
++  })), { ui: null, mono: null, uiWeight: null, monoWeight: null, width: "720", fontSize: "14" });
+   assert.equal(await resetUi.isDisabled(), true);
+   assert.equal(await resetMono.isDisabled(), true);
+   console.log("PASS: font families and weights, persistence, cross-tab sync, independent reset, emphasis and draft resizing");
+diff --git a/hooks/useChatAppearance.ts b/hooks/useChatAppearance.ts
+index cb888c4..a0c5783 100644
+--- a/hooks/useChatAppearance.ts
++++ b/hooks/useChatAppearance.ts
+@@ -2,8 +2,9 @@
+ 
+ import { useSyncExternalStore } from "react";
+ 
+-export const CHAT_CONTENT_WIDTH_DEFAULT = 820;
+-export const CHAT_CONTENT_WIDTH_MIN = 820;
++// Claude Desktop's column: the transcript and the composer share 720px; wider is a setting.
++export const CHAT_CONTENT_WIDTH_DEFAULT = 720;
++export const CHAT_CONTENT_WIDTH_MIN = 640;
+ export const CHAT_CONTENT_WIDTH_MAX = 2000;
+ export const CHAT_CONTENT_WIDTH_STORAGE_KEY = "pi-chat-content-width";
+ export const CHAT_CONTENT_FONT_SIZE_DEFAULT = 14;
+@@ -24,6 +25,8 @@ let appearance: ChatAppearance | null = null;
+ const listeners = new Set<() => void>();
+ 
+ export function clampChatContentWidth(value: unknown): number {
++  // Nothing saved (null, "") is the default, not Number(null)'s 0 clamped to the minimum.
++  if (value === null || value === undefined || value === "") return CHAT_CONTENT_WIDTH_DEFAULT;
+   const width = Number(value);
+   if (!Number.isFinite(width)) return CHAT_CONTENT_WIDTH_DEFAULT;
+   return Math.max(CHAT_CONTENT_WIDTH_MIN, Math.min(CHAT_CONTENT_WIDTH_MAX, Math.round(width)));
 diff --git a/lib/i18n/messages/en.ts b/lib/i18n/messages/en.ts
-index cd39a31..b89d8ba 100644
+index cd39a31..d2a4229 100644
 --- a/lib/i18n/messages/en.ts
 +++ b/lib/i18n/messages/en.ts
 @@ -22,8 +22,8 @@ export const enLocale: LocalePlugin = {
@@ -7760,8 +11959,32 @@ index cd39a31..b89d8ba 100644
      "settings.resetUiFont": "Reset interface font",
      "settings.resetMonoFont": "Reset monospace font",
      "settings.fontDescription": "Names of fonts installed on this device, comma-separated; leave blank for the default. The monospace font is used for code and the terminal. Saved in this browser only.",
+@@ -475,6 +475,23 @@ export const enLocale: LocalePlugin = {
+     "chat.toolCalls": "tool calls",
+     "chat.collapseProcess": "Collapse process details",
+     "chat.expandProcess": "Expand process details",
++    "chat.steps.ran.one": "ran a command",
++    "chat.steps.ran.other": "ran {count} commands",
++    "chat.steps.read.one": "read a file",
++    "chat.steps.read.other": "read {count} files",
++    "chat.steps.searched.one": "ran a search",
++    "chat.steps.searched.other": "ran {count} searches",
++    "chat.steps.edited.one": "edited a file",
++    "chat.steps.edited.other": "edited {count} files",
++    "chat.steps.fetched.one": "fetched a page",
++    "chat.steps.fetched.other": "fetched {count} pages",
++    "chat.steps.delegated.one": "ran a subagent",
++    "chat.steps.delegated.other": "ran {count} subagents",
++    "chat.steps.used.one": "used a tool",
++    "chat.steps.used.other": "used {count} tools",
++    "chat.steps.count.one": "1 step",
++    "chat.steps.count.other": "{count} steps",
++    "chat.steps.separator": ", ",
+     "chat.filesWritten": "Files changed",
+     "chat.openWrittenFile": "Open {name}",
+     "chat.loadEarlier": "Scroll up to load earlier messages",
 diff --git a/lib/i18n/messages/zh-CN.ts b/lib/i18n/messages/zh-CN.ts
-index 96c75c3..56af408 100644
+index 96c75c3..67daaec 100644
 --- a/lib/i18n/messages/zh-CN.ts
 +++ b/lib/i18n/messages/zh-CN.ts
 @@ -22,8 +22,8 @@ export const zhCNLocale: LocalePlugin = {
@@ -7775,8 +11998,32 @@ index 96c75c3..56af408 100644
      "settings.resetUiFont": "重置界面字体",
      "settings.resetMonoFont": "重置等宽字体",
      "settings.fontDescription": "填写本机已安装的字体名，多个用逗号分隔，留空使用默认。等宽字体用于代码和终端。仅保存在当前浏览器。",
+@@ -475,6 +475,23 @@ export const zhCNLocale: LocalePlugin = {
+     "chat.toolCalls": "次工具调用",
+     "chat.collapseProcess": "收起处理详情",
+     "chat.expandProcess": "展开处理详情",
++    "chat.steps.ran.one": "运行了 1 条命令",
++    "chat.steps.ran.other": "运行了 {count} 条命令",
++    "chat.steps.read.one": "读取了 1 个文件",
++    "chat.steps.read.other": "读取了 {count} 个文件",
++    "chat.steps.searched.one": "搜索了 1 次",
++    "chat.steps.searched.other": "搜索了 {count} 次",
++    "chat.steps.edited.one": "编辑了 1 个文件",
++    "chat.steps.edited.other": "编辑了 {count} 个文件",
++    "chat.steps.fetched.one": "获取了 1 个网页",
++    "chat.steps.fetched.other": "获取了 {count} 个网页",
++    "chat.steps.delegated.one": "运行了 1 个子代理",
++    "chat.steps.delegated.other": "运行了 {count} 个子代理",
++    "chat.steps.used.one": "使用了 1 个工具",
++    "chat.steps.used.other": "使用了 {count} 个工具",
++    "chat.steps.count.one": "1 个步骤",
++    "chat.steps.count.other": "{count} 个步骤",
++    "chat.steps.separator": "，",
+     "chat.filesWritten": "改动的文件",
+     "chat.openWrittenFile": "打开 {name}",
+     "chat.loadEarlier": "向上滚动以加载更早的消息",
 diff --git a/lib/i18n/messages/zh-TW.ts b/lib/i18n/messages/zh-TW.ts
-index d8b6d41..6ca1fe6 100644
+index d8b6d41..e9a45e1 100644
 --- a/lib/i18n/messages/zh-TW.ts
 +++ b/lib/i18n/messages/zh-TW.ts
 @@ -22,8 +22,8 @@ export const zhTWLocale: LocalePlugin = {
@@ -7790,6 +12037,132 @@ index d8b6d41..6ca1fe6 100644
      "settings.resetUiFont": "重設介面字體",
      "settings.resetMonoFont": "重設等寬字體",
      "settings.fontDescription": "填寫本機已安裝的字體名稱，多個以逗號分隔，留空使用預設。等寬字體用於程式碼和終端。僅儲存在目前瀏覽器。",
+@@ -475,6 +475,23 @@ export const zhTWLocale: LocalePlugin = {
+     "chat.toolCalls": "次工具呼叫",
+     "chat.collapseProcess": "收起處理詳細資料",
+     "chat.expandProcess": "展開處理詳細資料",
++    "chat.steps.ran.one": "執行了 1 個指令",
++    "chat.steps.ran.other": "執行了 {count} 個指令",
++    "chat.steps.read.one": "讀取了 1 個檔案",
++    "chat.steps.read.other": "讀取了 {count} 個檔案",
++    "chat.steps.searched.one": "搜尋了 1 次",
++    "chat.steps.searched.other": "搜尋了 {count} 次",
++    "chat.steps.edited.one": "編輯了 1 個檔案",
++    "chat.steps.edited.other": "編輯了 {count} 個檔案",
++    "chat.steps.fetched.one": "擷取了 1 個網頁",
++    "chat.steps.fetched.other": "擷取了 {count} 個網頁",
++    "chat.steps.delegated.one": "執行了 1 個子代理",
++    "chat.steps.delegated.other": "執行了 {count} 個子代理",
++    "chat.steps.used.one": "使用了 1 個工具",
++    "chat.steps.used.other": "使用了 {count} 個工具",
++    "chat.steps.count.one": "1 個步驟",
++    "chat.steps.count.other": "{count} 個步驟",
++    "chat.steps.separator": "，",
+     "chat.filesWritten": "已變更的檔案",
+     "chat.openWrittenFile": "開啟 {name}",
+     "chat.loadEarlier": "向上捲動以載入較早的訊息",
+diff --git a/lib/step-summary.test.mjs b/lib/step-summary.test.mjs
+new file mode 100644
+index 0000000..6cbe005
+--- /dev/null
++++ b/lib/step-summary.test.mjs
+@@ -0,0 +1,37 @@
++import assert from "node:assert/strict";
++import test from "node:test";
++
++const importTs = () => import("./step-summary.ts");
++
++const call = (toolName, input = {}) => ({ type: "toolCall", toolCallId: Math.random().toString(36), toolName, input });
++
++test("names a tool's kind from its name, MCP prefix and all", async () => {
++  const { stepKind } = await importTs();
++  assert.equal(stepKind("bash"), "ran");
++  assert.equal(stepKind("read"), "read");
++  assert.equal(stepKind("edit"), "edited");
++  assert.equal(stepKind("apply_patch"), "edited");
++  assert.equal(stepKind("grep"), "searched");
++  assert.equal(stepKind("mcp__github__search_code"), "searched");
++  assert.equal(stepKind("web_fetch"), "fetched");
++  assert.equal(stepKind("subagent"), "delegated");
++  assert.equal(stepKind("lint_check"), "used");
++});
++
++test("counts kinds in the order the turn used them, distinct files for reads and edits", async () => {
++  const { countStepKinds } = await importTs();
++  assert.deepEqual(countStepKinds([
++    call("read", { path: "a.py" }),
++    call("bash", { command: "ls" }),
++    call("read", { path: "a.py" }),
++    call("edit", { path: "a.py" }),
++    call("edit", { path: "a.py" }),
++    call("edit", { file_path: "b.py" }),
++    call("bash", { command: "pytest" }),
++  ]), [
++    { kind: "read", count: 1 },
++    { kind: "ran", count: 2 },
++    { kind: "edited", count: 2 },
++  ]);
++  assert.deepEqual(countStepKinds([]), []);
++});
+diff --git a/lib/step-summary.ts b/lib/step-summary.ts
+new file mode 100644
+index 0000000..b0253eb
+--- /dev/null
++++ b/lib/step-summary.ts
+@@ -0,0 +1,53 @@
++import type { ToolCallContent } from "./types";
++
++/**
++ * What a turn's steps did, for the one line that stands for them above the answer
++ * ("Ran 2 commands, read a file, edited 2 files"), as Claude Desktop sums up a
++ * turn's tool use. Client-safe and pure.
++ */
++export type StepKind = "ran" | "read" | "searched" | "edited" | "fetched" | "delegated" | "used";
++
++/** A tool's kind, by its name: run, read, search, change, fetch, delegate, or anything else. */
++export function stepKind(toolName: string): StepKind {
++  const name = toolName.toLowerCase().replace(/^mcp__[^_]+__/, "");
++  if (/(^|_)(bash|shell|exec|powershell|terminal|run)($|_)/.test(name)) return "ran";
++  if (/(^|_)(edit|write|multiedit|apply_patch|patch|create|replace)($|_)/.test(name)) return "edited";
++  if (/(^|_)(read|view|cat|open)($|_)/.test(name)) return "read";
++  if (/(^|_)(grep|find|ls|glob|search|list)($|_)/.test(name)) return "searched";
++  if (/(^|_)(fetch|web|http|url|browse)($|_)/.test(name)) return "fetched";
++  if (/(^|_)(agent|subagent|task|delegate)($|_)/.test(name)) return "delegated";
++  return "used";
++}
++
++function filePath(call: ToolCallContent): string | null {
++  const input = call.input ?? {};
++  for (const key of ["path", "file_path", "filePath"]) {
++    const value = input[key];
++    if (typeof value === "string" && value) return value;
++  }
++  return null;
++}
++
++/**
++ * The kinds of a turn's tool calls with their counts, in the order the turn first
++ * used them. Reads and edits count distinct files when the calls name them, so
++ * three edits of one file are "edited a file".
++ */
++export function countStepKinds(calls: ToolCallContent[]): { kind: StepKind; count: number }[] {
++  const order: StepKind[] = [];
++  const counts = new Map<StepKind, number>();
++  const files = new Map<StepKind, Set<string>>();
++  for (const call of calls) {
++    const kind = stepKind(call.toolName);
++    if (!counts.has(kind)) order.push(kind);
++    const path = kind === "read" || kind === "edited" ? filePath(call) : null;
++    if (path) {
++      const seen = files.get(kind) ?? new Set<string>();
++      if (seen.has(path)) { counts.set(kind, counts.get(kind) ?? 0); continue; }
++      seen.add(path);
++      files.set(kind, seen);
++    }
++    counts.set(kind, (counts.get(kind) ?? 0) + 1);
++  }
++  return order.map((kind) => ({ kind, count: counts.get(kind) ?? 0 })).filter((entry) => entry.count > 0);
++}
 diff --git a/public/icons/apple-touch-icon.png b/public/icons/apple-touch-icon.png
 index 5f7f2b155e7b5c4517b8556909f9dcbe6d9d6f40..17beb7135ed0a030d2d6e6b0342749914855c071 100644
 GIT binary patch