Pi Web fork: focus as Claude Code Desktop draws it; sidebar, session info and Settings aligned

piweb/hf-design.patch

@@ -1,5 +1,5 @@
 diff --git a/AGENTS.md b/AGENTS.md
-index a5c8983..749afce 100644
+index a5c8983..1b769c5 100644
 --- a/AGENTS.md
 +++ b/AGENTS.md
 @@ -65,8 +65,13 @@ app/api/
@@ -156,7 +156,7 @@ index a5c8983..749afce 100644
  
  ## Pi Session File Format
  
-@@ -274,3 +317,38 @@ Location: `~/.pi/agent/sessions/<encoded-cwd>/<timestamp>_<uuid>.jsonl`
+@@ -274,3 +317,32 @@ Location: `~/.pi/agent/sessions/<encoded-cwd>/<timestamp>_<uuid>.jsonl`
  --accent --user-bg --tool-bg
  --font-mono
  ```
@@ -179,22 +179,16 @@ index a5c8983..749afce 100644
 +newer parts, menus, tooltips and popovers in `app/ui.css`, the header and tiles in `app/shell.css`)
 +are styled there too.
 +`--accent` is a neutral gray in light and dark (no blue anywhere: links are told apart by their
-+underline, focus by a 2px ring), `--accent-soft` its tint; Mist, Rose and Pine keep their own hues.
++underline, focus by its line and halo), `--accent-soft` its tint; Mist, Rose and Pine keep their own hues.
 +All code (fences, the file viewer, tool inputs and outputs, diffs) is highlighted by Shiki in `lib/diffs-theme.ts`'s neutral themes (`components/highlighting.ts`); the terminal keeps its ANSI hues.
-+Keyboard focus is `app/focus.css`, imported last: one 2px `--focus-ring` ring, inset on controls,
-+rows and fields (a row draws it on the row; its link or toggle draws nothing), 2px off ink-filled
-+controls and text links. Hidden row actions fold to width 0 (never `display: none`: Tab would drop
++Keyboard focus is `app/focus.css`, imported last, drawn as Claude Code Desktop's (its shadow-focus):
++a 1px line at 70% of `--focus-ring` (`--focus-line`) with a 3px halo at 16% (`--focus-glow`), never
++a thick ring. The line sits 1px inside controls, rows and fields with the halo outside (a row draws
++them on the row; its link or toggle draws nothing, halo included); what is focusable by tabindex
++alone (a menu's surface, a tile) takes the line only, keeping its shadow; ink-filled controls and
++text links take the line 2px off, no halo. `app/focus.test.mjs` checks that no 2px ring is left
++(the gateway's sheets too) and that the line keeps 3:1 on every surface. Hidden row actions fold to width 0 (never `display: none`: Tab would drop
 +focus); closed panels are `inert`; modals use `keepTabInside`.
-+
-+<!-- BEGIN:nextjs-agent-rules -->
-+
-+# This is NOT the Next.js you know
-+
-+This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` (resolved from this file's directory; in monorepos the `next` package may not be visible from the repo root) before writing any code. Heed deprecation notices.
-+
-+This block is written and re-added by `next dev` — verify at `node_modules/next/dist/server/lib/generate-agent-files.js`. Removing it from a diff only re-creates the uncommitted change; committing it with your work keeps the tree clean.
-+
-+<!-- END:nextjs-agent-rules -->
 diff --git a/app/api/browser/events/route.ts b/app/api/browser/events/route.ts
 new file mode 100644
 index 0000000..84aa812
@@ -1198,34 +1192,54 @@ x=WyK>Q474TgO3Dx+=lt**@4jiTmoXh>QX;DqIUnCXbm^o4n^-mRR&Qm{tL_JHERF>
 
 diff --git a/app/focus.css b/app/focus.css
 new file mode 100644
-index 0000000..f8b1d1c
+index 0000000..4aa9f5b
 --- /dev/null
 +++ b/app/focus.css
-@@ -0,0 +1,293 @@
+@@ -0,0 +1,331 @@
 +/* Keyboard focus, one way everywhere (the design system's "Motion and states").
 +   Imported last (app/layout.tsx), so these rules win over each component's.
 +
-+   One indicator: a 2px ring in --focus-ring, the neutral accent gray. Never a
++   One indicator, as Claude Code Desktop draws it (its shadow-focus: a 1px
++   ring and a soft glow, no thick outline) in Pi Web's neutral ink: a 1px line
++   at 70% of --focus-ring (--focus-line) and a 3px halo at 16% (--focus-glow).
++   A 2px ring at full strength drew a heavy white box in dark themes. Never a
 +   ring and a second ring, never a box around a row's text:
-+   - inset (-2px), following the control's own corners, on everything that is
-+     not filled with ink: ghost and icon buttons, pickers, tabs, options, menu
-+     items, fields. A row draws the ring on the whole row (its inner control
-+     draws nothing), so it fits the row's box and is never clipped;
-+   - 2px off the edge on what is filled with ink (primary and Send buttons, a
-+     switch, floating round buttons), where an inset ring would vanish into
-+     the fill;
-+   - 2px off, with small corners, around a link in running text.
++   - on the edge (the line 1px inside, following the control's own corners;
++     the halo outside) on everything that is not filled with ink: ghost and
++     icon buttons, pickers, tabs, options, menu items, fields. A row draws it
++     on the whole row (its inner control draws nothing), so the line fits the
++     row's box and is never clipped;
++   - the line 2px off the edge, no halo, on what is filled with ink (primary
++     and Send buttons, a switch, floating round buttons), where a line on the
++     edge would vanish into the fill;
++   - the line 2px off, with small corners, around a link in running text.
++   The line keeps at least 3:1 against every surface it sits on (4.5:1 and up
++   on canvas and surface in dark, 4:1 in light).
 +   Mouse focus shows nothing (:focus-visible); text fields show their caret,
 +   and other fields the inset ring too, except the composer, which is always
 +   where typing goes. */
 +
++:root {
++  --focus-line: color-mix(in srgb, var(--focus-ring) 70%, transparent);
++  --focus-halo: color-mix(in srgb, var(--focus-ring) 16%, transparent);
++  --focus-glow: 0 0 0 3px var(--focus-halo);
++}
++
 +:where(button, summary, [role="button"], [role="tab"], [role="menuitem"], [role="menuitemradio"], [role="menuitemcheckbox"], [role="option"], [role="switch"], [role="treeitem"], [tabindex]:not(input):not(textarea):not(select)):focus {
 +  outline: none;
 +}
 +
-+:where(button, summary, [role="button"], [role="tab"], [role="menuitem"], [role="menuitemradio"], [role="menuitemcheckbox"], [role="option"], [role="switch"], [role="treeitem"], [tabindex]:not(input):not(textarea):not(select)):focus-visible {
-+  outline: 2px solid var(--focus-ring);
-+  outline-offset: -2px;
++/* Anything focusable by tabindex alone (a menu's or a sheet's surface, a tile, a
++   scroll region) takes the line only: its own shadow stays. Controls add the halo. */
++:where([tabindex]:not(input):not(textarea):not(select)):focus-visible {
++  outline: 1px solid var(--focus-line);
++  outline-offset: -1px;
++}
++
++:where(button, summary, [role="button"], [role="tab"], [role="menuitem"], [role="menuitemradio"], [role="menuitemcheckbox"], [role="option"], [role="switch"], [role="treeitem"]):focus-visible {
++  outline: 1px solid var(--focus-line);
++  outline-offset: -1px;
++  box-shadow: var(--focus-glow);
 +}
 +
 +:where(a[href]):focus {
@@ -1233,18 +1247,19 @@ index 0000000..f8b1d1c
 +}
 +
 +:where(a[href]):focus-visible {
-+  outline: 2px solid var(--focus-ring);
++  outline: 1px solid var(--focus-line);
 +  outline-offset: 2px;
 +  border-radius: var(--radius-xs);
 +}
 +
 +:where(input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), select, textarea):focus-visible {
-+  outline: 2px solid var(--focus-ring);
-+  outline-offset: -2px;
++  outline: 1px solid var(--focus-line);
++  outline-offset: -1px;
++  box-shadow: var(--focus-glow);
 +}
 +
 +:where(input[type="checkbox"], input[type="radio"]):focus-visible {
-+  outline: 2px solid var(--focus-ring);
++  outline: 1px solid var(--focus-line);
 +  outline-offset: 2px;
 +}
 +
@@ -1252,12 +1267,14 @@ index 0000000..f8b1d1c
 +.chat-input-textarea:focus,
 +.chat-input-textarea:focus-visible {
 +  outline: none;
++  box-shadow: none;
 +}
 +
 +/* A visually hidden input inside an option (a theme, the send key) leaves the
 +   ring to the option. */
 +input.sr-only:focus-visible {
 +  outline: none;
++  box-shadow: none;
 +}
 +
 +/* ---------------------------------------------------------------- filled with ink: 2px off */
@@ -1269,7 +1286,7 @@ index 0000000..f8b1d1c
 +.web-login-form button:focus-visible,
 +.chat-scroll-to-bottom:focus-visible,
 +.image-preview-close:focus-visible {
-+  outline: 2px solid var(--focus-ring);
++  outline: 1px solid var(--focus-line);
 +  outline-offset: 2px;
 +}
 +
@@ -1298,8 +1315,9 @@ index 0000000..f8b1d1c
 +.extension-status-command:focus-visible,
 +button.extension-widget-trigger:focus-visible,
 +.new-session-update:focus-visible {
-+  outline: 2px solid var(--focus-ring);
-+  outline-offset: -2px;
++  outline: 1px solid var(--focus-line);
++  outline-offset: -1px;
++  box-shadow: var(--focus-glow);
 +}
 +
 +.settings-section-tab:focus-visible,
@@ -1314,29 +1332,31 @@ index 0000000..f8b1d1c
 +
 +/* A Terminal tab being renamed: the tab is the field, its pill takes the ring (Desktop's
 +   has-[:focus-visible] on the tab), the bare input none. */
-+.terminal-tab-input:focus-visible { outline: none; }
++.terminal-tab-input:focus-visible { outline: none; box-shadow: none; }
 +.terminal-tab:has(.terminal-tab-input:focus-visible) {
-+  outline: 2px solid var(--focus-ring);
-+  outline-offset: -2px;
++  outline: 1px solid var(--focus-line);
++  outline-offset: -1px;
++  box-shadow: var(--focus-glow);
 +}
 +
 +/* An option whose input is visually hidden: the option is the control. */
 +.settings-theme-option:has(input:focus-visible),
 +.settings-send-mode-option:has(input:focus-visible) {
-+  outline: 2px solid var(--focus-ring);
-+  outline-offset: -2px;
++  outline: 1px solid var(--focus-line);
++  outline-offset: -1px;
++  box-shadow: var(--focus-glow);
 +}
 +
-+/* Fields, the filled ones too: inset, no glow, no border change. */
++/* Fields, the filled ones too: the line inside, the halo, no border change. */
 +.settings-font-input:focus-visible,
 +.sidebar-search-input:focus,
 +.sidebar-search-input:focus-visible,
 +.sidebar-menu-filter-input:focus-visible,
 +.directory-picker-path:focus-visible {
 +  border-color: transparent !important;
-+  box-shadow: none;
-+  outline: 2px solid var(--focus-ring);
-+  outline-offset: -2px;
++  box-shadow: var(--focus-glow);
++  outline: 1px solid var(--focus-line);
++  outline-offset: -1px;
 +}
 +
 +.sidebar-search-input:focus:not(:focus-visible) {
@@ -1345,13 +1365,14 @@ index 0000000..f8b1d1c
 +
 +.web-login-composer:focus-within {
 +  border-color: transparent;
-+  box-shadow: none;
-+  outline: 2px solid var(--focus-ring);
-+  outline-offset: -2px;
++  box-shadow: var(--focus-glow);
++  outline: 1px solid var(--focus-line);
++  outline-offset: -1px;
 +}
 +
 +.web-login-composer :is(input, textarea):focus-visible {
 +  outline: none;
++  box-shadow: none;
 +}
 +
 +/* The top bar's 36px edge buttons (the sidebar toggle): a
@@ -1362,8 +1383,9 @@ index 0000000..f8b1d1c
 +}
 +
 +.topbar-edge-button:focus-visible {
-+  outline: 2px solid var(--focus-ring);
++  outline: 1px solid var(--focus-line);
 +  outline-offset: -4px;
++  box-shadow: none;
 +}
 +
 +/* ---------------------------------------------------------------- rows: the ring is the row's */
@@ -1372,21 +1394,25 @@ index 0000000..f8b1d1c
 +.session-tree .session-tree-main:focus-visible,
 +.session-tree a.session-tree-main:focus-visible {
 +  outline: none;
++  box-shadow: none;
 +}
 +
 +.session-tree-session:has(> .session-tree-main:focus-visible) {
-+  outline: 2px solid var(--focus-ring);
-+  outline-offset: -2px;
++  outline: 1px solid var(--focus-line);
++  outline-offset: -1px;
++  box-shadow: var(--focus-glow);
 +}
 +
 +/* A project header: the same, on the header's box (its + and ⋯ ring themselves). */
 +.session-tree .session-tree-group-toggle:focus-visible {
 +  outline: none;
++  box-shadow: none;
 +}
 +
 +.session-tree-group:has(> .session-tree-group-toggle:focus-visible) {
-+  outline: 2px solid var(--focus-ring);
-+  outline-offset: -2px;
++  outline: 1px solid var(--focus-line);
++  outline-offset: -1px;
++  box-shadow: var(--focus-glow);
 +}
 +
 +/* Rows whose control spans the row: the control's own box, with the row's corners. */
@@ -1395,18 +1421,21 @@ index 0000000..f8b1d1c
 +.session-tree .session-tree-more-toggle:focus-visible,
 +.sidebar-files-section-toggle:focus-visible {
 +  border-radius: var(--radius-sm);
-+  outline: 2px solid var(--focus-ring);
-+  outline-offset: -2px;
++  outline: 1px solid var(--focus-line);
++  outline-offset: -1px;
++  box-shadow: var(--focus-glow);
 +}
 +
 +/* A tool call or a thought: the whole step line, its time included. */
 +.tool-call-head:focus-visible {
 +  outline: none;
++  box-shadow: none;
 +}
 +
 +.tool-call-row:has(> .tool-call-head:focus-visible) {
-+  outline: 2px solid var(--focus-ring);
-+  outline-offset: -2px;
++  outline: 1px solid var(--focus-line);
++  outline-offset: -1px;
++  box-shadow: var(--focus-glow);
 +}
 +
 +/* Browsers without :has() keep the ring on the inner control. */
@@ -1415,14 +1444,16 @@ index 0000000..f8b1d1c
 +  .session-tree .session-tree-group-toggle:focus-visible,
 +  .tool-call-head:focus-visible {
 +    border-radius: var(--radius-sm);
-+    outline: 2px solid var(--focus-ring);
-+    outline-offset: -2px;
++    outline: 1px solid var(--focus-line);
++    outline-offset: -1px;
++    box-shadow: var(--focus-glow);
 +  }
 +}
 +
-+/* A resize handle: its line turns into the ring's colour, 2px, nothing around it. */
++/* A resize handle: its line turns into the focus line's colour, nothing around it. */
 +.panel-resize-handle:focus-visible {
 +  outline: none;
++  box-shadow: none;
 +}
 +
 +/* ---------------------------------------------------------------- sliders
@@ -1439,6 +1470,7 @@ index 0000000..f8b1d1c
 +input[type="range"]:focus,
 +input[type="range"]:focus-visible {
 +  outline: none;
++  box-shadow: none;
 +}
 +
 +input[type="range"]::-webkit-slider-runnable-track {
@@ -1480,11 +1512,11 @@ index 0000000..f8b1d1c
 +}
 +
 +input[type="range"]:focus-visible::-webkit-slider-thumb {
-+  box-shadow: 0 0 0 2px var(--bg-elevated, var(--bg)), 0 0 0 4px var(--focus-ring);
++  box-shadow: 0 0 0 2px var(--bg-elevated, var(--bg)), 0 0 0 3px var(--focus-line), 0 0 0 6px var(--focus-halo);
 +}
 +
 +input[type="range"]:focus-visible::-moz-range-thumb {
-+  box-shadow: 0 0 0 2px var(--bg-elevated, var(--bg)), 0 0 0 4px var(--focus-ring);
++  box-shadow: 0 0 0 2px var(--bg-elevated, var(--bg)), 0 0 0 3px var(--focus-line), 0 0 0 6px var(--focus-halo);
 +}
 +
 +input[type="range"]:disabled {
@@ -1493,8 +1525,109 @@ index 0000000..f8b1d1c
 +}
 +
 +.panel-resize-handle:focus-visible::after {
-+  background: var(--focus-ring);
++  background: var(--focus-line);
 +}
+diff --git a/app/focus.test.mjs b/app/focus.test.mjs
+new file mode 100644
+index 0000000..0b281f4
+--- /dev/null
++++ b/app/focus.test.mjs
+@@ -0,0 +1,95 @@
++import assert from "node:assert/strict";
++import { existsSync, readFileSync, readdirSync } from "node:fs";
++import test from "node:test";
++
++const read = (name) => readFileSync(new URL(name, import.meta.url), "utf8");
++const focus = read("./focus.css");
++const globals = read("./globals.css");
++const sheets = readdirSync(new URL("./", import.meta.url)).filter((name) => name.endsWith(".css")).map((name) => [name, read(`./${name}`)]);
++// The Hugging Face gateway's own sheets, where this checkout sits beside them (the Space's folder).
++const gatewayDir = new URL("../../space/gateway/static/", import.meta.url);
++const gateway = existsSync(gatewayDir) ? ["pi-overlay.css", "app.css"].map((name) => [name, readFileSync(new URL(name, gatewayDir), "utf8")]) : [];
++
++function rules(css) {
++  const clean = css.replace(/\/\*[\s\S]*?\*\//g, "");
++  return [...clean.matchAll(/([^{}]+)\{([^{}]*)\}/g)].map(([, selector, body]) => ({ selector: selector.trim(), body }));
++}
++
++test("no focus state draws the thick 2px ring any more: a 1px line and a soft halo, as Desktop's", () => {
++  for (const [name, css] of [...sheets, ...gateway]) {
++    for (const { selector, body } of rules(css)) {
++      if (!selector.includes(":focus")) continue;
++      assert.doesNotMatch(body, /outline:\s*2px solid/, `${name}: ${selector}`);
++      assert.doesNotMatch(body, /box-shadow:[^;]*\b0 0 0 2px var\(--(focus-ring|accent)\)/, `${name}: ${selector}`);
++    }
++  }
++  assert.match(focus, /--focus-line: color-mix\(in srgb, var\(--focus-ring\) 70%, transparent\);/);
++  assert.match(focus, /--focus-glow: 0 0 0 3px var\(--focus-halo\);/);
++  // The message being edited was a 2px ring too.
++  assert.match(globals, /\.user-bubble\.is-editing \{[^}]*box-shadow: 0 0 0 1px var\(--focus-line\), var\(--focus-glow\);/);
++});
++
++test("controls take the halo; what is focusable by tabindex alone keeps its own shadow", () => {
++  const all = rules(focus);
++  const containers = all.find(({ selector }) => selector.startsWith(":where([tabindex]"));
++  assert.ok(containers && !/box-shadow/.test(containers.body), "a menu's or a tile's surface keeps its shadow");
++  const controls = all.find(({ selector }) => selector.startsWith(":where(button, summary") && selector.endsWith(":focus-visible"));
++  assert.match(controls.body, /box-shadow: var\(--focus-glow\)/);
++  // An inner control whose row draws the ring draws neither the line nor the halo.
++  for (const inner of [".session-tree .session-tree-group-toggle:focus-visible", ".tool-call-head:focus-visible", ".chat-input-textarea:focus-visible", ".panel-resize-handle:focus-visible"]) {
++    const rule = all.find(({ selector }) => selector.split(",").map((part) => part.trim()).includes(inner));
++    assert.ok(rule, inner);
++    assert.match(rule.body, /outline: none;[\s\S]*box-shadow: none;/, inner);
++  }
++});
++
++function hex(value) {
++  const n = Number.parseInt(value.slice(1), 16);
++  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
++}
++function luminance([r, g, b]) {
++  const lin = (c) => { const s = c / 255; return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4; };
++  return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
++}
++function contrast(a, b) {
++  const [x, y] = [luminance(a), luminance(b)].sort((p, q) => q - p);
++  return (x + 0.05) / (y + 0.05);
++}
++
++test("the focus line keeps 3:1 or more on every surface it sits on, in light and dark", () => {
++  const tokens = globals.slice(globals.indexOf("/* tokens:begin */"), globals.indexOf("/* tokens:end */"));
++  const blocks = [tokens.slice(0, tokens.indexOf("html.dark")), tokens.slice(tokens.indexOf("html.dark"))];
++  for (const block of blocks) {
++    const get = (name) => hex(block.match(new RegExp(`--${name}: (#[0-9a-f]{6});`))[1]);
++    const ring = get("focus-ring");
++    for (const surface of ["bg", "bg-surface", "bg-elevated"]) {
++      const under = get(surface);
++      const line = ring.map((c, i) => Math.round(c * 0.7 + under[i] * 0.3));
++      assert.ok(contrast(line, under) >= 3, `${surface}: ${contrast(line, under).toFixed(2)}:1`);
++    }
++  }
++});
++
++test("the sidebar's footer rows stand on the brand's columns, and Settings' pages under its title", () => {
++  const footer = globals.match(/\.sidebar-footer-button \{([^}]*)\}/)[1];
++  assert.match(footer, /justify-content: flex-start;/);
++  assert.match(footer, /gap: 9px;/);
++  assert.match(footer, /padding: 0 5px;/);
++  if (gateway.length) {
++    const account = gateway[0][1].match(/\.hfpi-account-button \{([^}]*)\}/)[1];
++    assert.match(account, /gap: 9px;/);
++    assert.match(account, /padding: 0 5px;/);
++  }
++  const settings = read("./settings.css");
++  const header = settings.match(/\.settings-dialog-header \{[^}]*padding: 0 48px 0 (\d+)px;/)[1];
++  const general = settings.match(/\.settings-general \{[^}]*padding: 18px (\d+)px 28px;/)[1];
++  assert.equal(general, header);
++});
++
++test("section labels are quiet and in sentence case, never small bold capitals", () => {
++  for (const [name, css] of sheets) {
++    for (const { selector, body } of rules(css)) {
++      if (/text-transform:\s*uppercase/.test(body)) assert.match(selector, /::first-letter/, `${name}: ${selector}`);
++    }
++  }
++});
 diff --git a/app/fonts/Geist-Variable.woff2 b/app/fonts/Geist-Variable.woff2
 new file mode 100644
 index 0000000000000000000000000000000000000000..9983e92a03de482b5708201694101c330b6ae9b8
@@ -3822,7 +3955,7 @@ 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..959b58f 100644
+index d6b5535..9f01813 100644
 --- a/app/globals.css
 +++ b/app/globals.css
 @@ -24,46 +24,109 @@
@@ -4120,6 +4253,15 @@ index d6b5535..959b58f 100644
    background: var(--accent);
    color: var(--accent-contrast);
    cursor: pointer;
+@@ -322,7 +405,7 @@ html.dark .web-login-error {
+ }
+ 
+ .web-login-form button:focus-visible {
+-  outline: 2px solid var(--accent);
++  outline: 1px solid var(--focus-line);
+   outline-offset: 2px;
+ }
+ 
 @@ -332,110 +415,139 @@ html.dark .web-login-error {
    cursor: not-allowed;
  }
@@ -4412,7 +4554,19 @@ index d6b5535..959b58f 100644
  
  
  .extension-status-shelf {
-@@ -703,9 +797,9 @@ button.extension-widget-trigger:focus-visible {
+@@ -686,8 +780,9 @@ button.extension-widget-trigger:hover,
+ }
+ 
+ button.extension-widget-trigger:focus-visible {
+-  outline: 2px solid var(--accent);
+-  outline-offset: -2px;
++  outline: 1px solid var(--focus-line);
++  outline-offset: -1px;
++  box-shadow: var(--focus-glow);
+ }
+ 
+ .extension-widget-placement {
+@@ -703,9 +798,9 @@ button.extension-widget-trigger:focus-visible {
  
  .extension-widget-placement-icon {
    display: block;
@@ -4425,7 +4579,19 @@ index d6b5535..959b58f 100644
    fill: currentColor;
  }
  
-@@ -826,8 +920,8 @@ button.extension-widget-trigger:focus-visible {
+@@ -803,8 +898,9 @@ button.extension-widget-trigger:focus-visible {
+ }
+ 
+ .extension-status-command:focus-visible {
+-  outline: 2px solid var(--accent);
+-  outline-offset: -2px;
++  outline: 1px solid var(--focus-line);
++  outline-offset: -1px;
++  box-shadow: var(--focus-glow);
+ }
+ 
+ .extension-status-command:disabled {
+@@ -826,8 +922,8 @@ button.extension-widget-trigger:focus-visible {
  }
  
  :root {
@@ -4436,7 +4602,7 @@ index d6b5535..959b58f 100644
    --font-ui: var(--font-ui-default);
    --font-mono: var(--font-mono-default);
    --font-ui-weight: 400;
-@@ -883,11 +977,11 @@ pre, code {
+@@ -883,11 +979,11 @@ pre, code {
  .markdown-body ol > li { list-style-type: decimal; }
  .markdown-body li > p { margin: 0; }
  .markdown-body li::marker {
@@ -4451,7 +4617,7 @@ index d6b5535..959b58f 100644
    font-weight: 700;
  }
  .markdown-body em { color: var(--text-muted); }
-@@ -896,24 +990,23 @@ pre, code {
+@@ -896,24 +992,23 @@ pre, code {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
@@ -4480,7 +4646,7 @@ index d6b5535..959b58f 100644
  }
  .markdown-body .contains-task-list {
    padding-left: 0;
-@@ -935,7 +1028,7 @@ pre, code {
+@@ -935,7 +1030,7 @@ pre, code {
    height: 14px;
    margin: 0;
    border: 1px solid var(--border);
@@ -4489,7 +4655,7 @@ index d6b5535..959b58f 100644
    background: var(--bg);
    display: inline-grid;
    place-content: center;
-@@ -967,8 +1060,8 @@ pre, code {
+@@ -967,8 +1062,8 @@ pre, code {
    margin: 8px 0;
    overflow-x: auto;
    overflow-y: hidden;
@@ -4500,7 +4666,7 @@ index d6b5535..959b58f 100644
  }
  .markdown-body table {
    border-collapse: separate;
-@@ -1088,7 +1181,7 @@ pre, code {
+@@ -1088,7 +1183,7 @@ pre, code {
    padding: 7px 8px;
    overflow: auto;
    border: 1px solid var(--border);
@@ -4509,7 +4675,7 @@ index d6b5535..959b58f 100644
    background: var(--bg-panel);
    font-family: var(--font-mono);
    font-size: 11px;
-@@ -1108,16 +1201,13 @@ pre, code {
+@@ -1108,16 +1203,13 @@ pre, code {
    min-width: 0;
    max-width: 100%;
    margin: 6px 0;
@@ -4529,7 +4695,7 @@ index d6b5535..959b58f 100644
    color: var(--text-dim);
    font-size: 11px;
    display: flex;
-@@ -1137,7 +1227,7 @@ pre, code {
+@@ -1137,7 +1229,7 @@ pre, code {
  }
  .markdown-code-action {
    border: 1px solid var(--border);
@@ -4538,7 +4704,19 @@ index d6b5535..959b58f 100644
    padding: 2px 7px;
    background: var(--bg);
    color: var(--text-muted);
-@@ -1228,7 +1318,7 @@ pre, code {
+@@ -1191,8 +1283,9 @@ pre, code {
+   opacity: 0.85;
+ }
+ .mermaid-preview-button:focus-visible {
+-  outline: 2px solid var(--accent);
+-  outline-offset: -2px;
++  outline: 1px solid var(--focus-line);
++  outline-offset: -1px;
++  box-shadow: var(--focus-glow);
+ }
+ 
+ .image-preview-dialog {
+@@ -1228,7 +1321,7 @@ pre, code {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
@@ -4547,7 +4725,7 @@ index d6b5535..959b58f 100644
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  }
  
-@@ -1244,7 +1334,7 @@ pre, code {
+@@ -1244,7 +1337,7 @@ pre, code {
    height: 36px;
    padding: 0;
    border: 1px solid var(--border);
@@ -4556,7 +4734,16 @@ index d6b5535..959b58f 100644
    background: var(--bg-panel);
    color: var(--text-muted);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
-@@ -1320,7 +1410,7 @@ pre, code {
+@@ -1259,7 +1352,7 @@ pre, code {
+ }
+ 
+ .image-preview-close:focus-visible {
+-  outline: 2px solid var(--accent);
++  outline: 1px solid var(--focus-line);
+   outline-offset: 2px;
+ }
+ 
+@@ -1320,7 +1413,7 @@ pre, code {
    height: 24px;
    overflow: hidden;
    border: 1px solid var(--border);
@@ -4565,7 +4752,7 @@ index d6b5535..959b58f 100644
    background: var(--bg);
  }
  .mermaid-zoom-stepper button,
-@@ -1347,7 +1437,7 @@ pre, code {
+@@ -1347,7 +1440,7 @@ pre, code {
  .mermaid-zoom-icon-button {
    flex: 0 0 24px;
    border: 1px solid var(--border);
@@ -4574,7 +4761,19 @@ index d6b5535..959b58f 100644
  }
  .mermaid-zoom-stepper button:hover:not(:disabled),
  .mermaid-zoom-icon-button:hover {
-@@ -1384,7 +1474,7 @@ pre, code {
+@@ -1360,8 +1453,9 @@ pre, code {
+ }
+ .mermaid-zoom-stepper button:focus-visible,
+ .mermaid-zoom-icon-button:focus-visible {
+-  outline: 2px solid var(--accent);
+-  outline-offset: -2px;
++  outline: 1px solid var(--focus-line);
++  outline-offset: -1px;
++  box-shadow: var(--focus-glow);
+ }
+ .mermaid-zoom-value {
+   min-width: 48px;
+@@ -1384,7 +1478,7 @@ pre, code {
  .mermaid-zoom-canvas {
    padding: 12px;
    border: 1px solid var(--border);
@@ -4583,7 +4782,7 @@ index d6b5535..959b58f 100644
    background: var(--bg-panel);
    margin: 0 auto;
    transition: width 0.15s ease;
-@@ -1460,7 +1550,7 @@ pre, code {
+@@ -1460,7 +1554,7 @@ pre, code {
    height: 24px;
    overflow: hidden;
    border: 1px solid var(--border);
@@ -4592,7 +4791,7 @@ index d6b5535..959b58f 100644
  }
  
  .file-viewer-mode-button {
-@@ -1503,12 +1593,11 @@ pre, code {
+@@ -1503,12 +1597,11 @@ pre, code {
    height: 32px;
    padding: 0;
    box-sizing: border-box;
@@ -4607,7 +4806,16 @@ index d6b5535..959b58f 100644
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
-@@ -1566,11 +1655,13 @@ pre, code {
+@@ -1542,7 +1635,7 @@ pre, code {
+ }
+ 
+ .chat-scroll-to-bottom:focus-visible {
+-  outline: 2px solid var(--accent);
++  outline: 1px solid var(--focus-line);
+   outline-offset: 2px;
+ }
+ 
+@@ -1566,11 +1659,13 @@ pre, code {
    }
  }
  
@@ -4625,7 +4833,7 @@ index d6b5535..959b58f 100644
    margin: 0 auto;
  }
  
-@@ -1584,22 +1675,21 @@ pre, code {
+@@ -1584,22 +1679,21 @@ pre, code {
  
  .new-session-logo {
    flex: none;
@@ -4654,7 +4862,7 @@ index d6b5535..959b58f 100644
    line-height: 1.15;
    white-space: nowrap;
  }
-@@ -1613,7 +1703,8 @@ pre, code {
+@@ -1613,7 +1707,8 @@ pre, code {
    gap: 6px;
    min-width: 0;
    color: var(--text-dim);
@@ -4664,7 +4872,7 @@ index d6b5535..959b58f 100644
    line-height: 1.4;
    white-space: nowrap;
  }
-@@ -1638,7 +1729,7 @@ pre, code {
+@@ -1638,7 +1733,7 @@ pre, code {
    gap: 3px;
    margin: -3px -4px;
    padding: 3px 4px;
@@ -4673,16 +4881,18 @@ index d6b5535..959b58f 100644
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
-@@ -1652,7 +1743,7 @@ pre, code {
+@@ -1652,38 +1747,27 @@ pre, code {
  
  /* The ring inside the box, clear of the "→" and "·" beside it. */
  .new-session-update:focus-visible {
 -  outline: 2px solid var(--accent);
-+  outline: 2px solid var(--focus-ring);
-   outline-offset: -2px;
+-  outline-offset: -2px;
++  outline: 1px solid var(--focus-line);
++  outline-offset: -1px;
++  box-shadow: var(--focus-glow);
  }
  
-@@ -1660,30 +1751,18 @@ pre, code {
+ .new-session-update svg {
    flex: none;
  }
  
@@ -4716,7 +4926,7 @@ index d6b5535..959b58f 100644
    }
  }
  
-@@ -1700,8 +1779,8 @@ pre, code {
+@@ -1700,8 +1784,8 @@ pre, code {
     tab's stacked boxes, the row below the sessions), as the sidebar drew it
     on main: two grey boxes in the header buttons' material, 11px, the
     project's whole path and the worktree's branch in code type, cut at their
@@ -4727,7 +4937,7 @@ index d6b5535..959b58f 100644
  .project-picker {
    display: flex;
    align-items: center;
-@@ -1722,52 +1801,14 @@ pre, code {
+@@ -1722,52 +1806,14 @@ pre, code {
    min-width: 0;
    height: 29px;
    padding: 0 10px;
@@ -4783,7 +4993,7 @@ index d6b5535..959b58f 100644
  }
  
  /* The project's name (its display name, else its folder's), cut at its
-@@ -1781,8 +1822,9 @@ pre, code {
+@@ -1781,8 +1827,9 @@ pre, code {
    max-width: 28ch;
    overflow: hidden;
    color: var(--text-dim);
@@ -4794,7 +5004,7 @@ index d6b5535..959b58f 100644
  }
  
  .project-picker-parent {
-@@ -1800,10 +1842,6 @@ pre, code {
+@@ -1800,10 +1847,6 @@ pre, code {
    text-overflow: ellipsis;
  }
  
@@ -4805,7 +5015,19 @@ index d6b5535..959b58f 100644
  .project-picker-button:hover,
  .project-picker-button[aria-expanded="true"] {
    background: var(--bg-selected);
-@@ -1851,7 +1889,8 @@ pre, code {
+@@ -1811,8 +1854,9 @@ pre, code {
+ }
+ 
+ .project-picker-button:focus-visible {
+-  outline: 2px solid var(--accent);
+-  outline-offset: 1px;
++  outline: 1px solid var(--focus-line);
++  outline-offset: -1px;
++  box-shadow: var(--focus-glow);
+ }
+ 
+ .project-picker-icon,
+@@ -1851,7 +1895,8 @@ pre, code {
     path's color and code type, cut at its end. */
  .project-picker-label.is-alias {
    color: var(--text);
@@ -4815,7 +5037,7 @@ index d6b5535..959b58f 100644
  }
  
  /* A path or a branch, cut at its left (rtl), the text itself kept left to
-@@ -1901,7 +1940,8 @@ pre, code {
+@@ -1901,7 +1946,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);
@@ -4825,7 +5047,7 @@ index d6b5535..959b58f 100644
  }
  
  /* No worktree list here (the files tab): a box that says why, and does nothing. */
-@@ -1978,7 +2018,7 @@ pre, code {
+@@ -1978,7 +2024,7 @@ pre, code {
    box-sizing: border-box;
    flex: 0 0 24px;
    border: 1px solid var(--border);
@@ -4834,7 +5056,19 @@ index d6b5535..959b58f 100644
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
-@@ -2037,7 +2077,7 @@ pre, code {
+@@ -2003,8 +2049,9 @@ pre, code {
+ 
+ .file-viewer-mode-button:focus-visible,
+ .file-viewer-icon-button:focus-visible {
+-  outline: 2px solid var(--accent);
+-  outline-offset: -2px;
++  outline: 1px solid var(--focus-line);
++  outline-offset: -1px;
++  box-shadow: var(--focus-glow);
+ }
+ 
+ .directory-picker-path:focus-visible {
+@@ -2037,7 +2084,7 @@ pre, code {
  .markdown-file-preview pre {
    background: var(--bg-panel);
    border: 1px solid var(--border);
@@ -4843,7 +5077,7 @@ index d6b5535..959b58f 100644
    padding: 12px 16px;
    overflow-x: auto;
    font-family: var(--font-mono);
-@@ -2049,7 +2089,7 @@ pre, code {
+@@ -2049,7 +2096,7 @@ pre, code {
    font-size: 0.9em;
    background: var(--bg-panel);
    padding: 1px 5px;
@@ -4852,7 +5086,7 @@ index d6b5535..959b58f 100644
  }
  .markdown-file-preview pre code {
    background: none;
-@@ -2061,7 +2101,7 @@ pre, code {
+@@ -2061,7 +2108,7 @@ pre, code {
    margin-bottom: 20px;
    padding: 14px 16px 12px;
    border: 1px solid var(--border);
@@ -4861,7 +5095,7 @@ index d6b5535..959b58f 100644
    background: var(--bg-panel);
  }
  .markdown-frontmatter-title {
-@@ -2114,18 +2154,6 @@ pre, code {
+@@ -2114,18 +2161,6 @@ pre, code {
    text-underline-offset: 2px;
  }
  
@@ -4880,7 +5114,7 @@ index d6b5535..959b58f 100644
  @keyframes drop-zone-in {
    from { opacity: 0; transform: scale(0.97); }
    to   { opacity: 1; transform: scale(1); }
-@@ -2230,10 +2258,6 @@ span.token.table {
+@@ -2230,10 +2265,6 @@ span.token.table {
  .panel-resize-handle.is-resizing::after {
    background: color-mix(in srgb, var(--text-muted) 70%, var(--border));
  }
@@ -4891,7 +5125,7 @@ index d6b5535..959b58f 100644
  /* Desktop sidebar: animate width */
  @media (min-width: 641px) {
    .sidebar-overlay-backdrop {
-@@ -2264,119 +2288,6 @@ span.token.table {
+@@ -2264,119 +2295,6 @@ span.token.table {
    }
  }
  
@@ -5011,7 +5245,7 @@ index d6b5535..959b58f 100644
  /* Mobile sidebar: slide in/out as overlay */
  @media (max-width: 640px) {
    .chat-stats-center {
-@@ -2401,31 +2312,7 @@ span.token.table {
+@@ -2401,31 +2319,7 @@ span.token.table {
      box-shadow: none;
    }
  
@@ -5044,7 +5278,7 @@ index d6b5535..959b58f 100644
      display: none;
    }
    .directory-picker-back,
-@@ -2474,3 +2361,475 @@ span.token.table {
+@@ -2474,3 +2368,479 @@ span.token.table {
      display: none !important;
    }
  }
@@ -5192,7 +5426,7 @@ index d6b5535..959b58f 100644
 +}
 +.user-bubble.is-editing {
 +  background: color-mix(in srgb, var(--accent) 14%, var(--user-bg));
-+  box-shadow: 0 0 0 2px var(--focus-ring);
++  box-shadow: 0 0 0 1px var(--focus-line), var(--focus-glow);
 +}
 +/* The actions under a message: icon buttons that show on hover or focus. */
 +.message-actions {
@@ -5447,8 +5681,12 @@ index d6b5535..959b58f 100644
 +.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"]). */
++/* The sidebar's bottom row (AppShell): Settings; under it, the row a host may
++   fill ([data-host-slot="sidebar-footer"], the gateway's Workspace row). Both
++   on the brand's columns: the icon 11px from the sidebar's edge, the label at
++   34px (the 6px row inset, 5px padding, a 14px icon, a 9px gap), so the
++   sidebar's top and bottom line up; a lone centred Settings once floated
++   between them. */
 +.sidebar-footer {
 +  display: flex;
 +  flex-shrink: 0;
@@ -5470,11 +5708,11 @@ index d6b5535..959b58f 100644
 +  display: flex;
 +  flex: 1 1 0;
 +  align-items: center;
-+  justify-content: center;
-+  gap: 5px;
++  justify-content: flex-start;
++  gap: 9px;
 +  min-width: 0;
 +  height: var(--size-control-sm);
-+  padding: 0 6px;
++  padding: 0 5px;
 +  border: 0;
 +  border-radius: var(--radius-sm);
 +  background: none;
@@ -5645,7 +5883,7 @@ index 79c8282..97731f1 100644
      lang: "en",
      icons: [
 diff --git a/app/settings.css b/app/settings.css
-index 0bf21eb..e8788d8 100644
+index 0bf21eb..11530a5 100644
 --- a/app/settings.css
 +++ b/app/settings.css
 @@ -40,9 +40,9 @@
@@ -5679,7 +5917,43 @@ index 0bf21eb..e8788d8 100644
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
-@@ -153,8 +153,9 @@
+@@ -122,6 +122,7 @@
+   margin-bottom: 6px;
+ }
+ 
++/* A section label as every dropdown's and the design system's: quiet, 12px, sentence case (no small bold capitals). */
+ .config-sidebar-group-label {
+   display: flex;
+   align-items: center;
+@@ -129,11 +130,10 @@
+   padding: 4px 8px 3px;
+   color: var(--text-dim);
+   font-family: inherit;
+-  font-size: 10px;
+-  font-weight: 600;
++  font-size: 12px;
++  font-weight: 400;
+   line-height: 1.4;
+   letter-spacing: 0;
+-  text-transform: uppercase;
+ }
+ 
+ .config-sidebar-group-label-text {
+@@ -144,6 +144,13 @@
+   white-space: nowrap;
+ }
+ 
++/* Sentence case: the scopes they name are lowercase words elsewhere (a profile's
++   "built-in" chip), so the label capitalises its own first letter. */
++.config-sidebar-group-label-text::first-letter,
++.config-section-title::first-letter {
++  text-transform: uppercase;
++}
++
+ /* Sits in the heading row, so the sidebar gains no height for it. */
+ .config-sidebar-group-switch {
+   display: inline-flex;
+@@ -153,8 +160,9 @@
  }
  
  .config-sidebar-group-count {
@@ -5690,7 +5964,7 @@ index 0bf21eb..e8788d8 100644
  }
  
  /* Three lines, then scroll: the phone layout gives the whole sidebar 190px. */
-@@ -188,7 +189,7 @@
+@@ -188,7 +196,7 @@
    height: 30px;
    padding: 0 8px;
    border: 0;
@@ -5699,7 +5973,19 @@ index 0bf21eb..e8788d8 100644
    outline: none;
    background: transparent;
    color: var(--text);
-@@ -236,8 +237,9 @@
+@@ -206,8 +214,9 @@
+ }
+ 
+ .config-sidebar-item:focus-visible {
+-  outline: 2px solid var(--accent);
+-  outline-offset: -2px;
++  outline: 1px solid var(--focus-line);
++  outline-offset: -1px;
++  box-shadow: var(--focus-glow);
+ }
+ 
+ .config-sidebar-item[aria-current="page"] {
+@@ -236,8 +245,9 @@
  .models-sidebar-badge {
    flex-shrink: 0;
    color: var(--text-dim);
@@ -5710,7 +5996,7 @@ index 0bf21eb..e8788d8 100644
  }
  
  .oauth-paste-panel {
-@@ -277,9 +279,8 @@
+@@ -277,9 +287,8 @@
    /* An input's intrinsic width would otherwise push the button out of a narrow pane. */
    min-width: 0;
    padding: 6px 9px;
@@ -5722,7 +6008,7 @@ index 0bf21eb..e8788d8 100644
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 12px;
-@@ -290,9 +291,9 @@
+@@ -290,9 +299,9 @@
    flex-shrink: 0;
    padding: 6px 12px;
    border: none;
@@ -5735,7 +6021,7 @@ index 0bf21eb..e8788d8 100644
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
-@@ -370,8 +371,9 @@
+@@ -370,8 +379,9 @@
  .enabled-models-count {
    margin-right: auto;
    color: var(--text-dim);
@@ -5746,7 +6032,7 @@ index 0bf21eb..e8788d8 100644
  }
  
  .enabled-models-note {
-@@ -383,7 +385,7 @@
+@@ -383,7 +393,7 @@
  .enabled-models-error {
    padding: 7px 9px;
    border: 1px solid rgba(239, 68, 68, 0.3);
@@ -5755,7 +6041,7 @@ index 0bf21eb..e8788d8 100644
    color: #ef4444;
    font-size: 11px;
    line-height: 1.4;
-@@ -401,10 +403,9 @@
+@@ -401,10 +411,9 @@
    box-sizing: border-box;
    height: 30px;
    padding: 0 9px;
@@ -5768,7 +6054,7 @@ index 0bf21eb..e8788d8 100644
    color: var(--text);
    font-family: inherit;
    font-size: 12px;
-@@ -413,7 +414,7 @@
+@@ -413,7 +422,7 @@
  .enabled-models-list {
    max-height: 360px;
    border: 1px solid var(--border);
@@ -5777,7 +6063,7 @@ index 0bf21eb..e8788d8 100644
    background: var(--bg-panel);
    overflow-y: auto;
  }
-@@ -457,9 +458,9 @@
+@@ -457,9 +466,9 @@
  .enabled-models-pin {
    flex-shrink: 0;
    padding: 1px 4px;
@@ -5790,7 +6076,7 @@ index 0bf21eb..e8788d8 100644
    font-size: 9px;
  }
  
-@@ -497,7 +498,7 @@
+@@ -497,7 +506,7 @@
    justify-content: space-between;
    gap: 18px;
    min-height: 68px;
@@ -5799,7 +6085,7 @@ index 0bf21eb..e8788d8 100644
    border-bottom: 1px solid var(--border);
    background: var(--bg-panel);
  }
-@@ -541,7 +542,7 @@
+@@ -541,7 +550,7 @@
    height: 28px;
    padding: 0 6px;
    border: 1px solid var(--border);
@@ -5808,7 +6094,7 @@ index 0bf21eb..e8788d8 100644
    background: var(--bg);
    color: var(--text);
    font: inherit;
-@@ -566,7 +567,7 @@
+@@ -566,7 +575,7 @@
    flex: 1;
    min-width: 0;
    min-height: 0;
@@ -5817,7 +6103,24 @@ index 0bf21eb..e8788d8 100644
    overflow-y: auto;
    font-family: inherit;
    font-size: 12px;
-@@ -662,7 +663,7 @@
+@@ -628,13 +637,13 @@
+   line-height: 1.35;
+ }
+ 
++/* A section label as every dropdown's and the design system's: quiet, 12px, sentence case (no small bold capitals). */
+ .config-section-title {
+   color: var(--text-dim);
+-  font-size: 11px;
+-  font-weight: 600;
++  font-size: 12px;
++  font-weight: 400;
+   line-height: 1.35;
+   letter-spacing: 0;
+-  text-transform: uppercase;
+ }
+ 
+ .config-field {
+@@ -662,7 +671,7 @@
    background: var(--border);
    border: 5px solid transparent;
    background-clip: padding-box;
@@ -5826,7 +6129,7 @@ index 0bf21eb..e8788d8 100644
  }
  
  .config-field-label {
-@@ -697,15 +698,15 @@
+@@ -697,15 +706,15 @@
  .config-scope-tag {
    flex-shrink: 0;
    padding: 1px 5px;
@@ -5845,7 +6148,7 @@ index 0bf21eb..e8788d8 100644
  }
  
  .config-scope-switch-field {
-@@ -730,7 +731,7 @@
+@@ -730,7 +739,7 @@
    height: 30px;
    overflow: hidden;
    border: 1px solid var(--border);
@@ -5854,7 +6157,7 @@ index 0bf21eb..e8788d8 100644
  }
  
  .config-scope-switch-option {
-@@ -760,7 +761,7 @@
+@@ -760,7 +769,7 @@
  .config-scope-switch.is-small {
    display: flex;
    height: auto;
@@ -5863,7 +6166,7 @@ index 0bf21eb..e8788d8 100644
    font-size: 12px;
  }
  
-@@ -891,9 +892,8 @@
+@@ -891,9 +900,8 @@
    width: 100%;
    height: 36px;
    padding: 0 11px;
@@ -5875,7 +6178,7 @@ index 0bf21eb..e8788d8 100644
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 12px;
-@@ -935,7 +935,7 @@
+@@ -935,7 +943,7 @@
    min-height: 30px;
    padding: 6px 9px;
    border: 1px solid var(--border);
@@ -5884,7 +6187,7 @@ index 0bf21eb..e8788d8 100644
    background: var(--bg-panel);
    color: var(--text-dim);
    cursor: pointer;
-@@ -976,7 +976,7 @@
+@@ -976,7 +984,7 @@
  }
  
  .config-notice {
@@ -5893,7 +6196,7 @@ index 0bf21eb..e8788d8 100644
    border-bottom: 1px solid var(--border);
    background: var(--bg-panel);
    color: var(--text-muted);
-@@ -1104,7 +1104,7 @@
+@@ -1104,7 +1112,7 @@
    align-items: center;
    gap: 8px;
    min-height: 52px;
@@ -5902,7 +6205,7 @@ index 0bf21eb..e8788d8 100644
    border-top: 1px solid var(--border);
  }
  
-@@ -1159,7 +1159,7 @@
+@@ -1159,7 +1167,7 @@
    gap: 6px;
    border-width: 1px;
    border-style: solid;
@@ -5911,7 +6214,7 @@ index 0bf21eb..e8788d8 100644
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0;
-@@ -1168,35 +1168,39 @@
+@@ -1168,35 +1176,39 @@
    transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
  }
  
@@ -5967,7 +6270,7 @@ index 0bf21eb..e8788d8 100644
  }
  
  .config-button-ghost {
-@@ -1206,20 +1210,27 @@
+@@ -1206,24 +1218,31 @@
  }
  
  .config-button-primary:not(:disabled):hover {
@@ -6002,7 +6305,12 @@ index 0bf21eb..e8788d8 100644
  }
  
  .config-button:focus-visible {
-@@ -1254,9 +1265,9 @@
+-  outline: 2px solid var(--accent);
++  outline: 1px solid var(--focus-line);
+   outline-offset: 2px;
+ }
+ 
+@@ -1254,9 +1273,9 @@
    width: 32px;
    height: 18px;
    padding: 0;
@@ -6014,7 +6322,16 @@ index 0bf21eb..e8788d8 100644
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
  }
-@@ -1342,7 +1353,7 @@
+@@ -1322,7 +1341,7 @@
+ }
+ 
+ .config-switch:focus-visible {
+-  outline: 2px solid var(--accent);
++  outline: 1px solid var(--focus-line);
+   outline-offset: 2px;
+ }
+ 
+@@ -1342,7 +1361,7 @@
    min-height: 30px;
    padding: 0 8px;
    border: 0;
@@ -6023,7 +6340,7 @@ index 0bf21eb..e8788d8 100644
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
-@@ -1358,7 +1369,7 @@
+@@ -1358,7 +1377,7 @@
  
  .config-list-action-button[aria-current="page"] {
    background: var(--bg-selected);
@@ -6032,7 +6349,7 @@ index 0bf21eb..e8788d8 100644
  }
  
  .config-list-action-button:disabled {
-@@ -1405,10 +1416,9 @@
+@@ -1405,10 +1424,9 @@
    height: 84vh;
    max-height: calc(100dvh - 16px);
    overflow: hidden;
@@ -6046,7 +6363,7 @@ index 0bf21eb..e8788d8 100644
  }
  
  .settings-dialog-header {
-@@ -1417,7 +1427,7 @@
+@@ -1417,7 +1435,7 @@
    flex-shrink: 0;
    align-items: center;
    min-height: 50px;
@@ -6055,7 +6372,7 @@ index 0bf21eb..e8788d8 100644
    border-bottom: 1px solid var(--border);
  }
  
-@@ -1467,7 +1477,7 @@
+@@ -1467,7 +1485,7 @@
    width: 24px;
    height: 2px;
    border-radius: 2px 2px 0 0;
@@ -6064,7 +6381,7 @@ index 0bf21eb..e8788d8 100644
    content: "";
    opacity: 0;
    transform: translateX(-50%) scaleX(0.5);
-@@ -1494,7 +1504,7 @@
+@@ -1494,7 +1512,7 @@
  }
  
  .settings-section-tab:focus-visible:not([aria-current="page"]) {
@@ -6073,16 +6390,23 @@ index 0bf21eb..e8788d8 100644
    background: var(--bg-hover);
    color: var(--text);
  }
-@@ -1542,7 +1552,7 @@
+@@ -1538,11 +1556,13 @@
+ }
+ 
+ /* The page scrolls across the dialog's full width, so its scrollbar sits at the
+-   dialog's edge; only the content keeps a readable column. */
++   dialog's edge; only the content keeps a readable column. Its sides are the
++   header's (16px), so the headings stand under "Settings": a 3vw side (28px on
++   a desktop) once set them 12px in from the title and the other tabs' lists. */
  .settings-general {
    width: 100%;
    height: 100%;
 -  padding: 26px clamp(18px, 4vw, 40px) 40px;
-+  padding: 18px clamp(16px, 3vw, 28px) 28px;
++  padding: 18px 16px 28px;
    overflow-y: auto;
  }
  
-@@ -1593,21 +1603,21 @@
+@@ -1593,21 +1613,21 @@
    justify-content: center;
    gap: 7px;
    min-width: 0;
@@ -6109,7 +6433,19 @@ index 0bf21eb..e8788d8 100644
  }
  
  .settings-theme-option:not(:has(input:checked)):hover {
-@@ -1657,9 +1667,8 @@
+@@ -1615,8 +1635,9 @@
+ }
+ 
+ .settings-theme-option:has(input:focus-visible) {
+-  outline: 2px solid var(--accent);
+-  outline-offset: 1px;
++  outline: 1px solid var(--focus-line);
++  outline-offset: -1px;
++  box-shadow: var(--focus-glow);
+ }
+ 
+ .settings-theme-option-label {
+@@ -1657,9 +1678,8 @@
    height: 26px;
    margin: 0;
    padding: 0 8px;
@@ -6121,7 +6457,19 @@ index 0bf21eb..e8788d8 100644
    color: var(--text);
    font-family: var(--font-ui);
    font-weight: var(--font-ui-weight);
-@@ -1722,8 +1731,9 @@
+@@ -1676,8 +1696,9 @@
+ }
+ 
+ .settings-font-input:focus-visible {
+-  outline: 2px solid var(--accent);
+-  outline-offset: 1px;
++  outline: 1px solid var(--focus-line);
++  outline-offset: -1px;
++  box-shadow: var(--focus-glow);
+ }
+ 
+ @media (max-width: 640px) {
+@@ -1722,8 +1743,9 @@
  
  .settings-chat-range-header output {
    color: var(--text-muted);
@@ -6132,7 +6480,7 @@ index 0bf21eb..e8788d8 100644
  }
  
  .settings-send-mode-options {
-@@ -1732,7 +1742,7 @@
+@@ -1732,7 +1754,7 @@
    gap: 3px;
    padding: 3px;
    border: 1px solid var(--border);
@@ -6141,7 +6489,7 @@ index 0bf21eb..e8788d8 100644
  }
  
  .settings-send-mode-option {
-@@ -1744,7 +1754,7 @@
+@@ -1744,7 +1766,7 @@
    min-height: 26px;
    padding: 0 10px;
    border: 0;
@@ -6150,7 +6498,7 @@ index 0bf21eb..e8788d8 100644
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
-@@ -1754,8 +1764,8 @@
+@@ -1754,8 +1776,8 @@
  
  .settings-send-mode-option:has(input:checked) {
    background: var(--bg-selected);
@@ -6161,7 +6509,19 @@ index 0bf21eb..e8788d8 100644
  }
  
  .settings-send-mode-option:not(:has(input:checked)):hover {
-@@ -1781,7 +1791,7 @@
+@@ -1763,8 +1785,9 @@
+ }
+ 
+ .settings-send-mode-option:has(input:focus-visible) {
+-  outline: 2px solid var(--accent);
+-  outline-offset: 1px;
++  outline: 1px solid var(--focus-line);
++  outline-offset: -1px;
++  box-shadow: var(--focus-glow);
+ }
+ 
+ .settings-send-mode-label {
+@@ -1781,7 +1804,7 @@
    display: block;
    width: 100%;
    margin-top: 2px;
@@ -6170,7 +6530,7 @@ index 0bf21eb..e8788d8 100644
  }
  
  .settings-language-options {
-@@ -1799,7 +1809,7 @@
+@@ -1799,7 +1822,7 @@
    height: 44px;
    padding: 0 10px;
    border: 0;
@@ -6179,7 +6539,7 @@ index 0bf21eb..e8788d8 100644
    background: transparent;
    color: var(--text);
    cursor: pointer;
-@@ -1857,7 +1867,7 @@
+@@ -1857,7 +1880,7 @@
    max-width: 420px;
    min-height: 44px;
    padding: 0 10px;
@@ -6188,7 +6548,7 @@ index 0bf21eb..e8788d8 100644
    background: var(--bg-panel);
    color: var(--text);
    font-size: 12px;
-@@ -1923,7 +1933,7 @@
+@@ -1923,7 +1946,7 @@
      margin-left: 14px;
      padding: 0 9px;
      border: 1px solid var(--border);
@@ -6197,7 +6557,7 @@ index 0bf21eb..e8788d8 100644
      background: var(--bg-panel);
      color: var(--text);
      font-size: 16px;
-@@ -2066,7 +2076,7 @@
+@@ -2066,7 +2089,7 @@
    max-width: 100%;
    padding: 0 5px;
    border: 1px solid var(--border);
@@ -6206,7 +6566,7 @@ index 0bf21eb..e8788d8 100644
    background: var(--bg-panel);
    color: var(--text);
    font-family: var(--font-mono);
-@@ -2085,7 +2095,7 @@
+@@ -2085,7 +2108,7 @@
    padding: 6px 8px;
    overflow: auto;
    border: 1px solid var(--border);
@@ -6215,7 +6575,7 @@ index 0bf21eb..e8788d8 100644
    background: var(--bg-panel);
    color: var(--text-muted);
    font-family: var(--font-mono);
-@@ -2172,9 +2182,8 @@
+@@ -2172,9 +2195,8 @@
    min-width: 0;
    height: 32px;
    padding: 0 10px;
@@ -6227,7 +6587,7 @@ index 0bf21eb..e8788d8 100644
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 12px;
-@@ -2266,10 +2275,9 @@ select.mcp-add-input {
+@@ -2266,10 +2288,9 @@ select.mcp-add-input {
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
@@ -6241,7 +6601,7 @@ index 0bf21eb..e8788d8 100644
  }
  
  /* 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 {
+@@ -2282,7 +2303,7 @@ select.mcp-add-input {
    flex: 1 1 auto;
    gap: 12px;
    min-height: 0;
@@ -6250,7 +6610,7 @@ index 0bf21eb..e8788d8 100644
    overflow: auto;
    overscroll-behavior: contain;
  }
-@@ -2315,7 +2323,7 @@ select.mcp-add-input {
+@@ -2315,7 +2336,7 @@ select.mcp-add-input {
    margin-top: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border);
@@ -6259,7 +6619,7 @@ index 0bf21eb..e8788d8 100644
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-mono);
-@@ -2333,7 +2341,7 @@ select.mcp-add-input {
+@@ -2333,7 +2354,7 @@ select.mcp-add-input {
  .project-trust-error {
    flex-shrink: 0;
    max-height: 30vh;
@@ -6268,7 +6628,7 @@ index 0bf21eb..e8788d8 100644
    overflow: auto;
    color: #ef4444;
    font-size: 12px;
-@@ -2353,19 +2361,20 @@ select.mcp-add-input {
+@@ -2353,19 +2374,20 @@ select.mcp-add-input {
    flex-shrink: 0;
    justify-content: flex-end;
    gap: 8px;
@@ -6296,7 +6656,7 @@ index 0bf21eb..e8788d8 100644
  }
  
  .project-trust-button:disabled {
-@@ -2373,10 +2382,8 @@ select.mcp-add-input {
+@@ -2373,10 +2395,8 @@ select.mcp-add-input {
  }
  
  .project-trust-button.is-primary {
@@ -6309,7 +6669,7 @@ index 0bf21eb..e8788d8 100644
  }
  
  .project-trust-button.is-primary:disabled {
-@@ -2450,7 +2457,7 @@ select.mcp-add-input {
+@@ -2450,7 +2470,7 @@ select.mcp-add-input {
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--border);
@@ -6318,7 +6678,7 @@ index 0bf21eb..e8788d8 100644
    background: var(--bg);
  }
  
-@@ -2472,7 +2479,7 @@ select.mcp-add-input {
+@@ -2472,7 +2492,7 @@ select.mcp-add-input {
  .project-trust-mcp-tag {
    flex-shrink: 0;
    padding: 1px 5px;
@@ -6327,7 +6687,7 @@ index 0bf21eb..e8788d8 100644
    background: rgba(120, 120, 120, 0.12);
    color: var(--text-dim);
    font-size: 10px;
-@@ -2493,7 +2500,7 @@ select.mcp-add-input {
+@@ -2493,7 +2513,7 @@ select.mcp-add-input {
    display: inline-block;
    margin: 2px 4px 0 0;
    padding: 0 4px;
@@ -6338,7 +6698,7 @@ index 0bf21eb..e8788d8 100644
    font-family: var(--font-mono);
 diff --git a/app/shell.css b/app/shell.css
 new file mode 100644
-index 0000000..7cefafc
+index 0000000..a3dc745
 --- /dev/null
 +++ b/app/shell.css
 @@ -0,0 +1,720 @@
@@ -6879,7 +7239,7 @@ index 0000000..7cefafc
 +  color: var(--text);
 +  font: inherit;
 +}
-+.review-comment-input:focus { box-shadow: 0 0 0 2px var(--focus-ring); }
++.review-comment-input:focus { box-shadow: inset 0 0 0 1px var(--focus-line), var(--focus-glow); }
 +.review-comment-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
 +.review-comment-hint { flex: 1 1 auto; color: var(--text-dim); font-size: 11.5px; }
 +
@@ -6923,7 +7283,7 @@ index 0000000..7cefafc
 +  font: inherit;
 +  font-size: 12.5px;
 +}
-+.browser-address input:focus { box-shadow: 0 0 0 2px var(--focus-ring); }
++.browser-address input:focus { box-shadow: inset 0 0 0 1px var(--focus-line), var(--focus-glow); }
 +.browser-error-count { color: var(--danger); font-size: 11.5px; font-variant-numeric: tabular-nums; }
 +.browser-tabs {
 +  display: flex;
@@ -6994,7 +7354,7 @@ index 0000000..7cefafc
 +  background: #fff;
 +  cursor: default;
 +}
-+.browser-canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--focus-ring); }
++.browser-canvas:focus-visible { box-shadow: inset 0 0 0 1px var(--focus-line); }
 +.browser-canvas.is-picking { cursor: crosshair; }
 +.browser-agent-pill, .browser-picking-hint {
 +  position: absolute;
@@ -7063,7 +7423,7 @@ index 0000000..7cefafc
 +.browser-console-text { flex: 1 1 auto; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
 +.browser-console-location { flex: none; max-width: 40%; overflow: hidden; color: var(--text-dim); text-overflow: ellipsis; white-space: nowrap; direction: rtl; }
 diff --git a/app/sidebar-menu.css b/app/sidebar-menu.css
-index 737e7a5..d0fd174 100644
+index 737e7a5..c098317 100644
 --- a/app/sidebar-menu.css
 +++ b/app/sidebar-menu.css
 @@ -19,13 +19,14 @@
@@ -7553,7 +7913,19 @@ index 737e7a5..d0fd174 100644
    font-size: 15px;
  }
  
-@@ -583,11 +493,10 @@ html[data-keyboard-open] .sidebar-sheet {
+@@ -562,8 +472,9 @@ html[data-keyboard-open] .sidebar-sheet {
+ }
+ 
+ .sidebar-sheet-cancel:focus-visible {
+-  outline: 2px solid var(--accent);
+-  outline-offset: -2px;
++  outline: 1px solid var(--focus-line);
++  outline-offset: -1px;
++  box-shadow: var(--focus-glow);
+ }
+ 
+ /* Undo toast: in place at the bottom of the sidebar root (position: relative). */
+@@ -583,11 +494,10 @@ html[data-keyboard-open] .sidebar-sheet {
    height: 36px;
    padding: 0 4px 0 12px;
    box-sizing: border-box;
@@ -7568,7 +7940,7 @@ index 737e7a5..d0fd174 100644
    font-size: 12px;
    pointer-events: auto;
    animation: sidebar-toast-in 0.16s ease-out;
-@@ -634,7 +543,7 @@ html[data-keyboard-open] .sidebar-sheet {
+@@ -634,7 +544,7 @@ html[data-keyboard-open] .sidebar-sheet {
    height: 26px;
    padding: 0 7px;
    border: 0;
@@ -7577,7 +7949,7 @@ index 737e7a5..d0fd174 100644
    background: transparent;
    color: var(--accent);
    font: inherit;
-@@ -657,7 +566,7 @@ html[data-keyboard-open] .sidebar-sheet {
+@@ -657,7 +567,7 @@ html[data-keyboard-open] .sidebar-sheet {
    height: 24px;
    padding: 0;
    border: 0;
@@ -7586,7 +7958,19 @@ index 737e7a5..d0fd174 100644
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
-@@ -716,23 +625,23 @@ html[data-keyboard-open] .sidebar-sheet {
+@@ -670,8 +580,9 @@ html[data-keyboard-open] .sidebar-sheet {
+ 
+ .sidebar-toast-action:focus-visible,
+ .sidebar-toast-dismiss:focus-visible {
+-  outline: 2px solid var(--accent);
+-  outline-offset: -2px;
++  outline: 1px solid var(--focus-line);
++  outline-offset: -1px;
++  box-shadow: var(--focus-glow);
+ }
+ 
+ @media (pointer: coarse) {
+@@ -716,23 +627,23 @@ html[data-keyboard-open] .sidebar-sheet {
  /* A worktree menu's "New worktree…" form (a custom menu body; components/WorktreeCreateForm.tsx),
     and its removal body. */
  .sidebar-worktree-form {
@@ -7616,7 +8000,7 @@ index 737e7a5..d0fd174 100644
    user-select: text;
    -webkit-user-select: text;
  }
-@@ -747,33 +656,31 @@ html[data-keyboard-open] .sidebar-sheet {
+@@ -747,33 +658,31 @@ html[data-keyboard-open] .sidebar-sheet {
  .sidebar-worktree-force,
  .sidebar-worktree-cancel {
    flex: 1;
@@ -7662,7 +8046,16 @@ index 737e7a5..d0fd174 100644
  }
  
  .sidebar-worktree-create:disabled,
-@@ -791,22 +698,21 @@ html[data-keyboard-open] .sidebar-sheet {
+@@ -785,28 +694,28 @@ html[data-keyboard-open] .sidebar-sheet {
+ .sidebar-worktree-create:focus-visible,
+ .sidebar-worktree-force:focus-visible,
+ .sidebar-worktree-cancel:focus-visible {
+-  outline: 2px solid var(--accent);
+-  outline-offset: 1px;
++  outline: 1px solid var(--focus-line);
++  outline-offset: -1px;
++  box-shadow: var(--focus-glow);
+ }
  
  /* A worktree menu's removal body (components/ProjectWorktreePicker.tsx): what Force would do. */
  .sidebar-worktree-message {
@@ -7689,7 +8082,7 @@ index 737e7a5..d0fd174 100644
  }
  
  .sidebar-sheet .sidebar-worktree-input,
-@@ -820,19 +726,18 @@ html[data-keyboard-open] .sidebar-sheet {
+@@ -820,19 +729,18 @@ html[data-keyboard-open] .sidebar-sheet {
  /* A project menu's "Delete all sessions" question (a custom menu body;
     components/SessionSidebar.tsx): what goes, then Delete and Cancel. */
  .sidebar-menu-question {
@@ -7713,7 +8106,7 @@ index 737e7a5..d0fd174 100644
    line-height: 1.4;
  }
  
-@@ -846,26 +751,25 @@ html[data-keyboard-open] .sidebar-sheet {
+@@ -846,26 +754,25 @@ html[data-keyboard-open] .sidebar-sheet {
  .sidebar-menu-question-cancel {
    flex: 1;
    min-width: 0;
@@ -7749,7 +8142,15 @@ index 737e7a5..d0fd174 100644
  }
  
  .sidebar-menu-question-confirm:disabled {
-@@ -880,7 +784,7 @@ html[data-keyboard-open] .sidebar-sheet {
+@@ -875,12 +782,13 @@ html[data-keyboard-open] .sidebar-sheet {
+ 
+ .sidebar-menu-question-confirm:focus-visible,
+ .sidebar-menu-question-cancel:focus-visible {
+-  outline: 2px solid var(--accent);
+-  outline-offset: 1px;
++  outline: 1px solid var(--focus-line);
++  outline-offset: -1px;
++  box-shadow: var(--focus-glow);
  }
  
  .sidebar-sheet .sidebar-menu-question {
@@ -7759,18 +8160,34 @@ index 737e7a5..d0fd174 100644
  
  .sidebar-sheet .sidebar-menu-question-text {
 diff --git a/app/sidebar.css b/app/sidebar.css
-index 86728a2..98fb8f2 100644
+index 86728a2..e2f5bba 100644
 --- a/app/sidebar.css
 +++ b/app/sidebar.css
-@@ -91,7 +91,7 @@
+@@ -91,8 +91,9 @@
  
  .session-tree button:focus-visible,
  .session-tree a.session-tree-main:focus-visible {
 -  outline: 2px solid var(--accent);
-+  outline: 2px solid var(--focus-ring);
-   outline-offset: -2px;
+-  outline-offset: -2px;
++  outline: 1px solid var(--focus-line);
++  outline-offset: -1px;
++  box-shadow: var(--focus-glow);
+ }
+ 
+ /*
+@@ -146,10 +147,9 @@
+   color: var(--text);
+ }
+ 
++/* Quiet and in sentence case, as every section label is (no small bold capitals). */
+ .session-tree-pinned-label {
+-  font-weight: 600;
+-  letter-spacing: 0.05em;
+-  text-transform: uppercase;
++  font-weight: 400;
  }
  
+ .session-tree-pinned-count {
 @@ -171,20 +171,22 @@
  }
  
@@ -8273,18 +8690,20 @@ index 86728a2..98fb8f2 100644
  }
  
  .sidebar-brand:focus {
-@@ -1064,8 +1090,8 @@ a.session-tree-main {
+@@ -1064,8 +1090,10 @@ a.session-tree-main {
  }
  
  .sidebar-brand:focus-visible {
 -  outline: 2px solid var(--accent);
 -  outline-offset: 1px;
-+  outline: 2px solid var(--focus-ring);
++  outline: 1px solid var(--focus-line);
++  outline-offset: -1px;
++  box-shadow: var(--focus-glow);
 +  outline-offset: 0;
  }
  
  .sidebar-header-spacer {
-@@ -1078,7 +1104,7 @@ a.session-tree-main {
+@@ -1078,7 +1106,7 @@ a.session-tree-main {
  }
  
  .sidebar-search-toggle {
@@ -8293,7 +8712,7 @@ index 86728a2..98fb8f2 100644
    padding: 0;
  }
  
-@@ -1093,7 +1119,7 @@ a.session-tree-main {
+@@ -1093,7 +1121,7 @@ a.session-tree-main {
     label is still each one's name. */
  .sidebar-header[data-fit="1"] .sidebar-new-button,
  .sidebar-header[data-fit="2"] .sidebar-new-button {
@@ -8302,7 +8721,7 @@ index 86728a2..98fb8f2 100644
    padding: 0;
  }
  
-@@ -1105,6 +1131,11 @@ a.session-tree-main {
+@@ -1105,6 +1133,11 @@ a.session-tree-main {
    font-size: 11px;
  }
  
@@ -8314,7 +8733,19 @@ index 86728a2..98fb8f2 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 {
-@@ -1202,7 +1233,7 @@ a.session-tree-main {
+@@ -1122,8 +1155,9 @@ a.session-tree-main {
+ .sidebar-archive-back:focus-visible,
+ .sidebar-tool-button:focus-visible,
+ .sidebar-files-section-toggle:focus-visible {
+-  outline: 2px solid var(--accent);
+-  outline-offset: -2px;
++  outline: 1px solid var(--focus-line);
++  outline-offset: -1px;
++  box-shadow: var(--focus-glow);
+ }
+ 
+ .sidebar-panel {
+@@ -1202,7 +1236,7 @@ a.session-tree-main {
     the root too), and its time 4px inside the row. The header row's keys and
     the picker's boxes end there. */
  .session-sidebar.is-files-below {
@@ -8323,7 +8754,7 @@ index 86728a2..98fb8f2 100644
  }
  
  /* The files section's header row (files below the sessions only), one row
-@@ -1246,7 +1277,7 @@ a.session-tree-main {
+@@ -1246,7 +1280,7 @@ a.session-tree-main {
    padding: 0 5px;
    overflow: hidden;
    border: 0;
@@ -8332,7 +8763,19 @@ index 86728a2..98fb8f2 100644
    background: transparent;
    color: var(--text-muted);
    font: inherit;
-@@ -1304,7 +1335,7 @@ a.session-tree-main {
+@@ -1272,10 +1306,8 @@ a.session-tree-main {
+ .sidebar-files-section-label {
+   min-width: 0;
+   overflow: hidden;
+-  font-weight: 600;
+-  letter-spacing: 0.05em;
++  font-weight: 400;
+   text-overflow: ellipsis;
+-  text-transform: uppercase;
+ }
+ 
+ /* The changed files' count, as the pinned section's (.session-tree-pinned-count). */
+@@ -1304,7 +1336,7 @@ a.session-tree-main {
    min-width: 18px;
    max-width: 26px;
    height: 26px;
@@ -8341,7 +8784,7 @@ index 86728a2..98fb8f2 100644
  }
  
  /* Under that row (or the whole files tab): the head, then the tree filling
-@@ -1329,16 +1360,16 @@ a.session-tree-main {
+@@ -1329,16 +1361,17 @@ a.session-tree-main {
    height: 29px;
    padding: 0 10px;
    box-sizing: border-box;
@@ -8358,12 +8801,13 @@ index 86728a2..98fb8f2 100644
 -.sidebar-search-input:focus {
 -  outline: 2px solid var(--accent);
 +.sidebar-search-input:focus-visible {
-+  outline: 2px solid var(--focus-ring);
-+  outline-offset: -2px;
++  outline: 1px solid var(--focus-line);
++  outline-offset: -1px;
++  box-shadow: var(--focus-glow);
  }
  
  /* The tree and the archive view under the search, in one cell: the archive
-@@ -1413,7 +1444,7 @@ a.session-tree-main {
+@@ -1413,7 +1446,7 @@ a.session-tree-main {
    height: 26px;
    padding: 0 6px;
    border: 0;
@@ -8372,7 +8816,7 @@ index 86728a2..98fb8f2 100644
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
-@@ -1502,7 +1533,7 @@ a.session-tree-main {
+@@ -1502,7 +1535,7 @@ a.session-tree-main {
    height: 32px;
    padding: 0;
    border: 0;
@@ -8383,7 +8827,7 @@ index 86728a2..98fb8f2 100644
    cursor: pointer;
 diff --git a/app/ui.css b/app/ui.css
 new file mode 100644
-index 0000000..69db8d7
+index 0000000..b4b8a1d
 --- /dev/null
 +++ b/app/ui.css
 @@ -0,0 +1,634 @@
@@ -8609,7 +9053,7 @@ index 0000000..69db8d7
 +  white-space: nowrap;
 +  cursor: pointer;
 +}
-+.ui-dropdown-row:focus-visible { outline: none; }
++.ui-dropdown-row:focus-visible { outline: none; box-shadow: none; }
 +.ui-dropdown-row[aria-selected="true"] { color: var(--text-strong); }
 +.ui-dropdown-row.has-gutter { padding-right: calc(var(--popup-row-pad) + 28px); }
 +.ui-dropdown-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: var(--popup-icon); height: var(--popup-icon); color: var(--text-muted); }
@@ -9169,7 +9613,7 @@ index e232a55..0000000
 -  assert.deepEqual(saved, { tabs: [{ ...tab, restored: true }], activeId: null, open: false });
 -});
 diff --git a/components/AppShell.tsx b/components/AppShell.tsx
-index c8c4ba9..a7151eb 100644
+index c8c4ba9..51d811c 100644
 --- a/components/AppShell.tsx
 +++ b/components/AppShell.tsx
 @@ -3,6 +3,8 @@
@@ -10902,7 +11346,16 @@ index c8c4ba9..a7151eb 100644
                          <div style={{ display: "grid", gridTemplateColumns: "auto minmax(0, 1fr) auto", columnGap: 12, rowGap: 8, alignItems: "start" }}>
                            {sessionRows.map((row) => (
                              <div key={`session-info:${row.label}`} style={{ display: "contents" }}>
-@@ -2477,7 +2218,7 @@ export function AppShell() {
+@@ -2468,6 +2209,8 @@ export function AppShell() {
+                                 overflowWrap: "anywhere",
+                                 wordBreak: "break-word",
+                                 whiteSpace: "normal",
++                                // Paths, the ID and the branch are code; a name or a duration is not.
++                                fontFamily: row.copyField ? "var(--font-mono)" : undefined,
+                               }}>{row.value}</div>
+                               <div>{row.copyField ? copyButton(row.copyField, row.value) : null}</div>
+                             </div>
+@@ -2477,7 +2220,7 @@ export function AppShell() {
                      );
                      const projectInfoSection = projectRows.length > 0 ? (
                        <div style={{ minWidth: 0 }}>
@@ -10911,7 +11364,32 @@ index c8c4ba9..a7151eb 100644
                          <div style={{ display: "grid", gridTemplateColumns: "auto minmax(0, 1fr) auto", columnGap: 12, rowGap: 8, alignItems: "start" }}>
                            {projectRows.map((row) => (
                              <div key={`project-info:${row.label}`} style={{ display: "contents" }}>
-@@ -2529,8 +2270,14 @@ export function AppShell() {
+@@ -2488,6 +2231,8 @@ export function AppShell() {
+                                 overflowWrap: "anywhere",
+                                 wordBreak: "break-word",
+                                 whiteSpace: "normal",
++                                // Paths, the ID and the branch are code; a name or a duration is not.
++                                fontFamily: row.copyField ? "var(--font-mono)" : undefined,
+                               }}>{row.value}</div>
+                               <div>{row.copyField ? copyButton(row.copyField, row.value) : null}</div>
+                             </div>
+@@ -2505,13 +2250,13 @@ export function AppShell() {
+                         gap: isMobile ? 16 : 24,
+                         fontSize: 12,
+                         lineHeight: 1.5,
+-                        fontFamily: "var(--font-mono)",
++                        fontVariantNumeric: "tabular-nums",
+                       }}>
+                         <div style={{ display: "flex", flexDirection: "column", gap: isMobile ? 16 : 20 }}>
+                           {sessionInfoSection}
+                           {projectInfoSection}
+                         </div>
+-                         {section(translate("session.messages"), messageRows)}
++                         {section(translate("session.messages"), messageRows, "right", true)}
+                          {section(translate("session.tokens"), [...tokenRows, ...extraTokenRows], "right", true)}
+                       </div>
+                     );
+@@ -2529,8 +2274,14 @@ export function AppShell() {
          {isMobile && renderProjectTrustWarning(true)}
          </div>
  
@@ -10928,7 +11406,7 @@ index c8c4ba9..a7151eb 100644
            {showChat ? (
              <ChatWindow
                key={sessionKey}
-@@ -2568,7 +2315,6 @@ export function AppShell() {
+@@ -2568,7 +2319,6 @@ export function AppShell() {
                initialPrompt={pendingQuotePrompt?.sessionId === selectedSession?.id ? pendingQuotePrompt?.text : undefined}
                onInitialPromptConsumed={() => setPendingQuotePrompt(null)}
                soundEnabled={soundEnabled}
@@ -10936,7 +11414,7 @@ index c8c4ba9..a7151eb 100644
                playDoneSound={playDoneSound}
                unlockAudio={unlockAudio}
                holdAudio={holdAudio}
-@@ -2601,9 +2347,7 @@ export function AppShell() {
+@@ -2601,9 +2351,7 @@ export function AppShell() {
                </div>
              ) : (
                <div style={{ position: "absolute", top: 12, left: 12, display: "flex", alignItems: "flex-start", gap: 8, userSelect: "none", pointerEvents: "none" }}>
@@ -10947,7 +11425,7 @@ index c8c4ba9..a7151eb 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 }}>
-@@ -2614,146 +2358,15 @@ export function AppShell() {
+@@ -2614,146 +2362,15 @@ export function AppShell() {
                </div>
              )
            ) : null}
@@ -11101,7 +11579,7 @@ index c8c4ba9..a7151eb 100644
        </div>
      </div>
      {settingsSection && (
-@@ -2763,6 +2376,8 @@ export function AppShell() {
+@@ -2763,6 +2380,8 @@ export function AppShell() {
          initialSection={settingsSection}
          quoteSelectionEnabled={quoteSelectionEnabled}
          onQuoteSelectionChange={handleQuoteSelectionChange}
@@ -11110,7 +11588,7 @@ index c8c4ba9..a7151eb 100644
          onClose={() => {
            setSettingsSection(null);
            setModelsRefreshKey((key) => key + 1);
-@@ -2786,6 +2401,6 @@ export function AppShell() {
+@@ -2786,6 +2405,6 @@ export function AppShell() {
          onStatus={setProjectTrust}
        />
      )}
@@ -20712,7 +21190,7 @@ index ba912ee..0283a47 100644
                          onSelect={() => choose(option)}
                          star={onSetDefault ? {
 diff --git a/components/ModelsConfig.tsx b/components/ModelsConfig.tsx
-index 9f6b556..470db1f 100644
+index 9f6b556..c1f7dd6 100644
 --- a/components/ModelsConfig.tsx
 +++ b/components/ModelsConfig.tsx
 @@ -54,6 +54,8 @@ import { providerBadgeLabel } from "./enabled-models-helpers";
@@ -20892,6 +21370,15 @@ index 9f6b556..470db1f 100644
                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",
+@@ -1175,7 +1168,7 @@ function ModelDetail({
+         </div>
+ 
+         <div style={{ marginTop: 16 }}>
+-          <div style={{ fontSize: 10, color: "var(--text-dim)", fontWeight: 600, textTransform: "uppercase" }}>
++          <div style={{ fontSize: 12, color: "var(--text-dim)", fontWeight: 400 }}>
+             {t("models.costPerMillion")}
+           </div>
+           {costEditing ? (
 @@ -1227,20 +1220,7 @@ function ModelDetail({
                {advancedSummary}
              </span>
@@ -20976,7 +21463,16 @@ index 9f6b556..470db1f 100644
            <input
              ref={inputRef}
              value={search}
-@@ -1782,10 +1758,8 @@ function AddProviderPicker({
+@@ -1769,7 +1745,7 @@ function AddProviderPicker({
+           ) : (
+             <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(min(240px, 100%), 1fr))", gap: 8 }}>
+               {showCustom && (
+-                 <div style={{ gridColumn: "1 / -1", fontSize: 10, fontWeight: 600, color: "var(--text-dim)", textTransform: "uppercase", letterSpacing: "0.07em" }}>{t("i18n.custom")}</div>
++                 <div style={{ gridColumn: "1 / -1", fontSize: 12, fontWeight: 400, color: "var(--text-dim)" }}>{t("i18n.custom")}</div>
+               )}
+               {showCustom && (
+                 <button
+@@ -1782,16 +1758,14 @@ 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>
@@ -20989,6 +21485,22 @@ index 9f6b556..470db1f 100644
                    </span>
                  </button>
                )}
+ 
+               {availableOAuth.length > 0 && (
+-                 <div style={{ gridColumn: "1 / -1", paddingTop: showCustom ? 6 : 0, fontSize: 10, fontWeight: 600, color: "var(--text-dim)", textTransform: "uppercase", letterSpacing: "0.07em" }}>{t("i18n.subscriptions")}</div>
++                 <div style={{ gridColumn: "1 / -1", paddingTop: showCustom ? 6 : 0, fontSize: 12, fontWeight: 400, color: "var(--text-dim)" }}>{t("i18n.subscriptions")}</div>
+               )}
+               {availableOAuth.map((p) => (
+                 <button key={p.id} onClick={() => { onSelectOAuth(p.id); onClose(); }}
+@@ -1808,7 +1782,7 @@ function AddProviderPicker({
+               ))}
+ 
+               {availableApiKey.length > 0 && (
+-                <div style={{ gridColumn: "1 / -1", paddingTop: availableOAuth.length > 0 ? 6 : 0, fontSize: 10, fontWeight: 600, color: "var(--text-dim)", textTransform: "uppercase", letterSpacing: "0.07em" }}>API Key</div>
++                <div style={{ gridColumn: "1 / -1", paddingTop: availableOAuth.length > 0 ? 6 : 0, fontSize: 12, fontWeight: 400, color: "var(--text-dim)" }}>API key</div>
+               )}
+               {availableApiKey.map((p) => (
+                 <button key={p.id} onClick={() => { onSelectApiKey(p.id); onClose(); }}
 @@ -2177,13 +2151,7 @@ export function ModelsConfig({ onClose, embedded = false, cwd = null }: {
                        onClick={() => setSelection({ type: "provider", name: pName })}
                        active={isProviderSelected}
@@ -21242,7 +21754,7 @@ index b9e6dde..1a67841 100644
    );
  }
 diff --git a/components/PluginsConfig.tsx b/components/PluginsConfig.tsx
-index 83fddc9..69cbd44 100644
+index 83fddc9..5926818 100644
 --- a/components/PluginsConfig.tsx
 +++ b/components/PluginsConfig.tsx
 @@ -1,5 +1,6 @@
@@ -21252,7 +21764,20 @@ index 83fddc9..69cbd44 100644
  import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
  import { sendAgentCommand } from "@/lib/agent-client";
  import type {
-@@ -275,14 +276,7 @@ function AddPluginPanel({
+@@ -197,10 +198,9 @@ function ResourceList({ pkg }: { pkg: PluginPackageInfo }) {
+         >
+           <div
+             style={{
+-              fontSize: 10,
+-              fontWeight: 700,
++              fontSize: 12,
++              fontWeight: 400,
+               color: "var(--text-dim)",
+-              textTransform: "uppercase",
+               marginBottom: 6,
+             }}
+           >
+@@ -275,14 +275,7 @@ function AddPluginPanel({
          href: "https://pi.dev/packages",
          label: "pi.dev/packages",
          icon: (
@@ -21268,7 +21793,7 @@ index 83fddc9..69cbd44 100644
          ),
        }]}
        target={
-@@ -370,7 +364,7 @@ function PackageDetail({
+@@ -370,7 +363,7 @@ function PackageDetail({
                  style={{
                    fontSize: 10,
                    padding: "1px 5px",
@@ -21277,7 +21802,7 @@ index 83fddc9..69cbd44 100644
                    background: "rgba(120,120,120,0.12)",
                    color: "var(--text-dim)",
                  }}
-@@ -382,7 +376,7 @@ function PackageDetail({
+@@ -382,7 +375,7 @@ function PackageDetail({
                  style={{
                    fontSize: 10,
                    padding: "1px 5px",
@@ -25477,7 +26002,7 @@ index 0000000..3d8fca8
 +});
 diff --git a/components/highlighting.ts b/components/highlighting.ts
 new file mode 100644
-index 0000000..ae9fdae
+index 0000000..773b858
 --- /dev/null
 +++ b/components/highlighting.ts
 @@ -0,0 +1,157 @@
@@ -25562,7 +26087,7 @@ index 0000000..ae9fdae
 +[data-separator=line-info-basic] { height: 24px; }
 +[data-separator-content] { font-size: 12px; }
 +[data-expand-index] [data-separator-wrapper] { grid-template-columns: 28px auto; }
-+[data-expand-button]:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
++[data-expand-button]:focus-visible { outline: 1px solid var(--focus-line); outline-offset: -1px; box-shadow: var(--focus-glow); }
 +`;
 +
 +// The library's expand controls are role=button divs out of the tab order: give them a place in
@@ -33727,7 +34252,7 @@ index fa76036..0000000
 -  };
 -}
 diff --git a/lib/i18n/messages/en.ts b/lib/i18n/messages/en.ts
-index cd39a31..132c15c 100644
+index cd39a31..078f061 100644
 --- a/lib/i18n/messages/en.ts
 +++ b/lib/i18n/messages/en.ts
 @@ -22,8 +22,8 @@ export const enLocale: LocalePlugin = {
@@ -33768,7 +34293,31 @@ index cd39a31..132c15c 100644
      "subagent.tabLabel": "Sub-agent {name}",
      "subagent.refresh": "Refresh",
      "subagent.viewer.starting": "Sub-agent session is starting…",
-@@ -246,8 +246,8 @@ export const enLocale: LocalePlugin = {
+@@ -227,18 +227,18 @@ export const enLocale: LocalePlugin = {
+     "tools.guidelines": "Prompt guidelines",
+     "session.info": "Session info",
+     "session.name": "Name",
+-    "session.file": "Session File",
++    "session.file": "Session file",
+     "session.inMemory": "In-memory",
+     "session.id": "ID",
+     "session.user": "User",
+     "session.assistant": "Assistant",
+-    "session.toolCalls": "Tool Calls",
+-    "session.toolResults": "Tool Results",
++    "session.toolCalls": "Tool calls",
++    "session.toolResults": "Tool results",
+     "session.total": "Total",
+     "session.input": "Input",
+     "session.output": "Output",
+-    "session.cacheRead": "Cache Read",
+-    "session.cacheWrite": "Cache Write",
++    "session.cacheRead": "Cache read",
++    "session.cacheWrite": "Cache write",
+     "session.cost": "Cost",
+     "session.context": "Context",
+     "session.cacheHitRate": "Avg cache hit rate",
+@@ -246,15 +246,15 @@ export const enLocale: LocalePlugin = {
      "session.copied": "Copied",
      "session.title": "Session info",
      "session.load": "Send a message or run /session to load session info",
@@ -33778,7 +34327,17 @@ index cd39a31..132c15c 100644
 +    "session.projectSection": "Project info",
      "session.messages": "Messages",
      "session.tokens": "Tokens",
-     "session.totalActive": "Active Time",
+-    "session.totalActive": "Active Time",
++    "session.totalActive": "Active time",
+     "session.copyFile": "Copy file path",
+     "session.copyId": "Copy session ID",
+-    "session.projectDir": "Project Dir",
+-    "session.gitBranch": "Git Branch",
++    "session.projectDir": "Project folder",
++    "session.gitBranch": "Git branch",
+     "session.gitWorktree": "Worktree",
+     "session.copyProjectDir": "Copy project directory",
+     "session.copyGitBranch": "Copy git branch",
 @@ -269,13 +269,9 @@ export const enLocale: LocalePlugin = {
      "workspace.stepModels": "Open Settings at the bottom, then choose Models",
      "workspace.newSessionContext": "New session location",