Pi Web: no blue anywhere (neutral gray accent, underlined links, neutral code keywords and diagrams)

piweb/hf-design.patch

@@ -1,16 +1,17 @@
 diff --git a/AGENTS.md b/AGENTS.md
-index a5c8983..0f7f118 100644
+index a5c8983..c40477c 100644
 --- a/AGENTS.md
 +++ b/AGENTS.md
-@@ -138,6 +138,7 @@ lib/
+@@ -138,6 +138,8 @@ 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
++  neutral-code-theme.ts     the Prism themes (dark+, vs) with their blue tokens in neutral grays, keywords bold; Mermaid's neutral base theme
    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/
+@@ -174,7 +176,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
@@ -20,7 +21,7 @@ index a5c8983..0f7f118 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 +276,20 @@ Location: `~/.pi/agent/sessions/<encoded-cwd>/<timestamp>_<uuid>.jsonl`
+@@ -274,3 +277,23 @@ Location: `~/.pi/agent/sessions/<encoded-cwd>/<timestamp>_<uuid>.jsonl`
  --accent --user-bg --tool-bg
  --font-mono
  ```
@@ -41,6 +42,53 @@ index a5c8983..0f7f118 100644
 +`.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.
++`--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.
++Code blocks and the file viewer use `lib/neutral-code-theme.ts`; the terminal keeps its ANSI hues.
+diff --git a/app/api/files/[...path]/route.ts b/app/api/files/[...path]/route.ts
+index d4d7df6..25f95bd 100644
+--- a/app/api/files/[...path]/route.ts
++++ b/app/api/files/[...path]/route.ts
+@@ -394,7 +394,7 @@ function wrapDocxPreviewHtml(bodyHtml: string, fileName: string): string {
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <style>
+   :root { color-scheme: light; }
+-  html, body { margin: 0; min-height: 100%; background: #eef1f5; color: #171717; }
++  html, body { margin: 0; min-height: 100%; background: #f5f5f5; color: #171717; }
+   body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; padding: 28px; }
+   main {
+     box-sizing: border-box;
+@@ -403,23 +403,24 @@ function wrapDocxPreviewHtml(bodyHtml: string, fileName: string): string {
+     margin: 0 auto;
+     padding: 56px 64px;
+     background: #fff;
+-    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.14);
++    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
+   }
+   .file-title {
+     margin: 0 0 28px;
+     padding-bottom: 10px;
+-    border-bottom: 1px solid #e5e7eb;
+-    color: #6b7280;
++    border-bottom: 1px solid #e5e5e5;
++    color: #666666;
+     font: 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+     word-break: break-word;
+   }
+-  h1, h2, h3, h4, h5, h6 { line-height: 1.3; margin: 1.1em 0 0.45em; color: #111827; }
++  h1, h2, h3, h4, h5, h6 { line-height: 1.3; margin: 1.1em 0 0.45em; color: #0a0a0a; }
+   p { margin: 0.65em 0; line-height: 1.7; }
+   table { border-collapse: collapse; max-width: 100%; margin: 1em 0; }
+-  th, td { border: 1px solid #d1d5db; padding: 6px 9px; vertical-align: top; }
++  th, td { border: 1px solid #d4d4d4; padding: 6px 9px; vertical-align: top; }
+   img { max-width: 100%; height: auto; }
+   pre { white-space: pre-wrap; overflow-wrap: anywhere; }
+-  a { color: #2563eb; }
++  a { color: #404040; text-decoration: underline; text-underline-offset: 3px; }
++  a:hover { color: #0a0a0a; }
+   @media (max-width: 720px) {
+     body { padding: 0; background: #fff; }
+     main { min-height: 100vh; padding: 28px 22px; box-shadow: none; }
 diff --git a/app/favicon.ico b/app/favicon.ico
 index 2da6b7dc00c64c59ef23cff153a6051478ad9315..b407f41443e3e94f4204a1862227e0d457f7d823 100644
 GIT binary patch
@@ -3080,10 +3128,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..69eff6c 100644
+index d6b5535..46c0a53 100644
 --- a/app/globals.css
 +++ b/app/globals.css
-@@ -24,46 +24,107 @@
+@@ -24,46 +24,109 @@
    --font-mono-font: var(--font-mono);
  }
  
@@ -3110,10 +3158,11 @@ index d6b5535..69eff6c 100644
 +  --text: #2e2e2e;
 +  --text-muted: #525252;
 +  --text-dim: #666666;
-+  --accent: #155dfc;
-+  --accent-hover: #1447e6;
++  --accent: #404040;
++  --accent-hover: #0a0a0a;
    --accent-contrast: #ffffff;
 -  --user-bg: #eff6ff;
++  --accent-soft: rgba(10, 10, 10, 0.07);
 +  --user-bg: #f5f5f5;
    --assistant-bg: #ffffff;
 -  --tool-bg: #f9fafb;
@@ -3131,7 +3180,7 @@ index d6b5535..69eff6c 100644
 +  --danger-soft: rgba(193, 0, 7, 0.07);
 +  --success: #008236;
 +  --warning: #bb4d00;
-+  --focus-ring: #155dfc;
++  --focus-ring: #404040;
 +  --scrim: rgba(10, 10, 10, 0.32);
 +  --border: transparent;
 +  --shadow-pop: 0 10px 30px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
@@ -3163,9 +3212,10 @@ index d6b5535..69eff6c 100644
 +  --text: #d4d4d4;
 +  --text-muted: #a3a3a3;
 +  --text-dim: #8a8a8a;
-+  --accent: #51a2ff;
-+  --accent-hover: #8ec5ff;
++  --accent: #e5e5e5;
++  --accent-hover: #ffffff;
 +  --accent-contrast: #0a0a0a;
++  --accent-soft: rgba(255, 255, 255, 0.10);
 +  --user-bg: #1a1a1a;
 +  --assistant-bg: #0a0a0a;
 +  --tool-bg: #1a1a1a;
@@ -3179,7 +3229,7 @@ index d6b5535..69eff6c 100644
 +  --danger-soft: rgba(255, 100, 103, 0.10);
 +  --success: #05df72;
 +  --warning: #ffb900;
-+  --focus-ring: #51a2ff;
++  --focus-ring: #e5e5e5;
 +  --scrim: rgba(0, 0, 0, 0.6);
 +  --border: transparent;
 +  --shadow-pop: 0 12px 36px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4);
@@ -3219,7 +3269,7 @@ index d6b5535..69eff6c 100644
  }
  
  [data-theme="mist"] {
-@@ -72,7 +133,7 @@ html.dark,
+@@ -72,7 +135,7 @@ html.dark,
    --bg-panel: #e9f0ee;
    --bg-hover: #e0eae7;
    --bg-selected: #d7e4df;
@@ -3228,7 +3278,7 @@ index d6b5535..69eff6c 100644
    --text: #202e2b;
    --text-muted: #455f56;
    --text-dim: #52685f;
-@@ -83,6 +144,18 @@ html.dark,
+@@ -83,6 +146,18 @@ html.dark,
    --assistant-bg: #f4f8f7;
    --tool-bg: #ecf3f0;
    --bg-subtle: rgba(24,65,50,0.04);
@@ -3247,7 +3297,7 @@ index d6b5535..69eff6c 100644
  }
  
  [data-theme="rose"] {
-@@ -91,7 +164,7 @@ html.dark,
+@@ -91,7 +166,7 @@ html.dark,
    --bg-panel: #f3edef;
    --bg-hover: #eee3e7;
    --bg-selected: #e8dce1;
@@ -3256,7 +3306,7 @@ index d6b5535..69eff6c 100644
    --text: #34282e;
    --text-muted: #65505a;
    --text-dim: #705b65;
-@@ -102,6 +175,18 @@ html.dark,
+@@ -102,6 +177,18 @@ html.dark,
    --assistant-bg: #fcf7f8;
    --tool-bg: #f7eef2;
    --bg-subtle: rgba(89,39,62,0.04);
@@ -3275,7 +3325,7 @@ index d6b5535..69eff6c 100644
  }
  
  html[data-theme="pine"],
-@@ -111,7 +196,7 @@ html[data-theme="pine"],
+@@ -111,7 +198,7 @@ html[data-theme="pine"],
    --bg-panel: #212b28;
    --bg-hover: #2b3632;
    --bg-selected: #35433c;
@@ -3284,7 +3334,7 @@ index d6b5535..69eff6c 100644
    --text: #e6ede8;
    --text-muted: #c3d0c6;
    --text-dim: #afc2b5;
-@@ -122,6 +207,18 @@ html[data-theme="pine"],
+@@ -122,6 +209,18 @@ html[data-theme="pine"],
    --assistant-bg: #19201f;
    --tool-bg: #222d29;
    --bg-subtle: rgba(210,236,219,0.04);
@@ -3303,7 +3353,7 @@ index d6b5535..69eff6c 100644
  }
  
  /* WebKit reports dvh/innerHeight without the status-bar strip for installed
-@@ -135,28 +232,12 @@ html[data-theme="pine"],
+@@ -135,28 +234,12 @@ html[data-theme="pine"],
    }
  }
  
@@ -3336,7 +3386,7 @@ index d6b5535..69eff6c 100644
  }
  
  /* Theme toggle: circular wipe via View Transitions API.
-@@ -218,9 +299,9 @@ body {
+@@ -218,9 +301,9 @@ body {
    margin-bottom: 22px;
  }
  
@@ -3348,16 +3398,26 @@ index d6b5535..69eff6c 100644
  }
  
  .web-login-brand h1 {
-@@ -247,7 +328,7 @@ body {
+@@ -247,15 +330,15 @@ 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);
+-  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.10);
++  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px -12px rgba(0, 0, 0, 0.10);
    transition: border-color 0.15s, box-shadow 0.15s;
-@@ -307,7 +388,7 @@ html.dark .web-login-error {
+ }
+ 
+ .web-login-composer:focus-within {
+   border-color: var(--accent);
+-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent), 0 8px 24px -12px rgba(15, 23, 42, 0.10);
++  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent), 0 8px 24px -12px rgba(0, 0, 0, 0.10);
+ }
+ 
+ .web-login-label {
+@@ -307,7 +390,7 @@ html.dark .web-login-error {
    min-height: 32px;
    padding: 7px 14px;
    border: none;
@@ -3366,16 +3426,80 @@ index d6b5535..69eff6c 100644
    background: var(--accent);
    color: var(--accent-contrast);
    cursor: pointer;
-@@ -388,7 +469,7 @@ html.dark .web-login-error {
+@@ -339,7 +422,7 @@ html.dark .web-login-error {
+   height: 100%;
+   min-width: 0;
+   min-height: 0;
+-  background: #111318;
++  background: #111111;
+ }
+ 
+ .terminal-panel-header {
+@@ -350,7 +433,7 @@ html.dark .web-login-error {
+   padding: 0 10px 0 13px;
+   border-bottom: 1px solid #2f3540;
+   background: #181b21;
+-  color: #9ca3af;
++  color: #a3a3a3;
+   font-family: var(--font-mono);
+   font-size: 11px;
+ }
+@@ -388,23 +471,23 @@ 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;
+-  color: #9ca3af;
++  color: #a3a3a3;
    cursor: pointer;
-@@ -502,7 +583,7 @@ html[data-keyboard-open] .terminal-extra-keys {
+   font: inherit;
+ }
+ 
+ .terminal-panel-exit {
+   padding: 7px 12px;
+-  color: #9ca3af;
++  color: #a3a3a3;
+   font-family: var(--font-mono);
+   font-size: 11px;
+ }
+ 
+ .terminal-panel-header button:hover {
+   background: #242932;
+-  color: #e5e7eb;
++  color: #e5e5e5;
+ }
+ 
+ .terminal-panel-error {
+@@ -451,7 +534,7 @@ html[data-keyboard-open] .terminal-extra-keys {
+   padding: 0;
+   border: none;
+   background: transparent;
+-  color: #d7dce5;
++  color: #d4d4d4;
+   font-family: var(--font-mono);
+   font-size: 12px;
+   touch-action: manipulation;
+@@ -471,7 +554,7 @@ html[data-keyboard-open] .terminal-extra-keys {
+ }
+ 
+ .terminal-extra-keys button.is-active {
+-  color: #60a5fa;
++  color: #e5e5e5;
+ }
+ 
+ .terminal-xterm-host {
+@@ -480,7 +563,7 @@ html[data-keyboard-open] .terminal-extra-keys {
+ }
+ 
+ .terminal-xterm .xterm-viewport {
+-  background-color: #111318;
++  background-color: #111111;
+ }
+ 
+ /*
+@@ -502,7 +585,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;
@@ -3384,7 +3508,7 @@ index d6b5535..69eff6c 100644
  }
  /* 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 {
+@@ -538,7 +621,7 @@ html[data-keyboard-open] .terminal-extra-keys {
    }
    ::-webkit-scrollbar-thumb {
      border-width: 1px;
@@ -3393,7 +3517,7 @@ index d6b5535..69eff6c 100644
    }
  }
  
-@@ -703,9 +784,9 @@ button.extension-widget-trigger:focus-visible {
+@@ -703,9 +786,9 @@ button.extension-widget-trigger:focus-visible {
  
  .extension-widget-placement-icon {
    display: block;
@@ -3406,7 +3530,7 @@ index d6b5535..69eff6c 100644
    fill: currentColor;
  }
  
-@@ -826,8 +907,8 @@ button.extension-widget-trigger:focus-visible {
+@@ -826,8 +909,8 @@ button.extension-widget-trigger:focus-visible {
  }
  
  :root {
@@ -3417,13 +3541,13 @@ index d6b5535..69eff6c 100644
    --font-ui: var(--font-ui-default);
    --font-mono: var(--font-mono-default);
    --font-ui-weight: 400;
-@@ -883,11 +964,11 @@ pre, code {
+@@ -883,11 +966,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);
++  color: var(--text-muted);
 +  font-weight: 500;
  }
  .markdown-body strong {
@@ -3432,7 +3556,17 @@ index d6b5535..69eff6c 100644
    font-weight: 700;
  }
  .markdown-body em { color: var(--text-muted); }
-@@ -904,16 +985,15 @@ pre, code {
+@@ -896,24 +979,23 @@ pre, code {
+   text-decoration: underline;
+   text-decoration-thickness: 1px;
+   text-underline-offset: 3px;
+-  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
++  text-decoration-color: color-mix(in srgb, var(--accent) 50%, transparent);
+ }
+-.markdown-body a:hover { text-decoration-color: var(--accent); }
++.markdown-body a:hover { color: var(--accent-hover); text-decoration-color: var(--accent-hover); }
+ .markdown-body img {
+   display: block;
    max-width: 100%;
    height: auto;
    margin: 8px 0;
@@ -3451,7 +3585,7 @@ index d6b5535..69eff6c 100644
  }
  .markdown-body .contains-task-list {
    padding-left: 0;
-@@ -935,7 +1015,7 @@ pre, code {
+@@ -935,7 +1017,7 @@ pre, code {
    height: 14px;
    margin: 0;
    border: 1px solid var(--border);
@@ -3460,7 +3594,7 @@ index d6b5535..69eff6c 100644
    background: var(--bg);
    display: inline-grid;
    place-content: center;
-@@ -967,8 +1047,8 @@ pre, code {
+@@ -967,8 +1049,8 @@ pre, code {
    margin: 8px 0;
    overflow-x: auto;
    overflow-y: hidden;
@@ -3471,7 +3605,7 @@ index d6b5535..69eff6c 100644
  }
  .markdown-body table {
    border-collapse: separate;
-@@ -1088,7 +1168,7 @@ pre, code {
+@@ -1088,7 +1170,7 @@ pre, code {
    padding: 7px 8px;
    overflow: auto;
    border: 1px solid var(--border);
@@ -3480,7 +3614,7 @@ index d6b5535..69eff6c 100644
    background: var(--bg-panel);
    font-family: var(--font-mono);
    font-size: 11px;
-@@ -1108,16 +1188,13 @@ pre, code {
+@@ -1108,16 +1190,13 @@ pre, code {
    min-width: 0;
    max-width: 100%;
    margin: 6px 0;
@@ -3500,7 +3634,7 @@ index d6b5535..69eff6c 100644
    color: var(--text-dim);
    font-size: 11px;
    display: flex;
-@@ -1137,7 +1214,7 @@ pre, code {
+@@ -1137,7 +1216,7 @@ pre, code {
  }
  .markdown-code-action {
    border: 1px solid var(--border);
@@ -3509,7 +3643,7 @@ index d6b5535..69eff6c 100644
    padding: 2px 7px;
    background: var(--bg);
    color: var(--text-muted);
-@@ -1228,7 +1305,7 @@ pre, code {
+@@ -1228,7 +1307,7 @@ pre, code {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
@@ -3518,7 +3652,7 @@ index d6b5535..69eff6c 100644
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  }
  
-@@ -1244,7 +1321,7 @@ pre, code {
+@@ -1244,7 +1323,7 @@ pre, code {
    height: 36px;
    padding: 0;
    border: 1px solid var(--border);
@@ -3527,7 +3661,7 @@ index d6b5535..69eff6c 100644
    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 {
+@@ -1320,7 +1399,7 @@ pre, code {
    height: 24px;
    overflow: hidden;
    border: 1px solid var(--border);
@@ -3536,7 +3670,7 @@ index d6b5535..69eff6c 100644
    background: var(--bg);
  }
  .mermaid-zoom-stepper button,
-@@ -1347,7 +1424,7 @@ pre, code {
+@@ -1347,7 +1426,7 @@ pre, code {
  .mermaid-zoom-icon-button {
    flex: 0 0 24px;
    border: 1px solid var(--border);
@@ -3545,7 +3679,7 @@ index d6b5535..69eff6c 100644
  }
  .mermaid-zoom-stepper button:hover:not(:disabled),
  .mermaid-zoom-icon-button:hover {
-@@ -1384,7 +1461,7 @@ pre, code {
+@@ -1384,7 +1463,7 @@ pre, code {
  .mermaid-zoom-canvas {
    padding: 12px;
    border: 1px solid var(--border);
@@ -3554,7 +3688,7 @@ index d6b5535..69eff6c 100644
    background: var(--bg-panel);
    margin: 0 auto;
    transition: width 0.15s ease;
-@@ -1460,7 +1537,7 @@ pre, code {
+@@ -1460,7 +1539,7 @@ pre, code {
    height: 24px;
    overflow: hidden;
    border: 1px solid var(--border);
@@ -3563,7 +3697,7 @@ index d6b5535..69eff6c 100644
  }
  
  .file-viewer-mode-button {
-@@ -1503,12 +1580,11 @@ pre, code {
+@@ -1503,12 +1582,11 @@ pre, code {
    height: 32px;
    padding: 0;
    box-sizing: border-box;
@@ -3578,7 +3712,7 @@ index d6b5535..69eff6c 100644
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
-@@ -1584,22 +1660,21 @@ pre, code {
+@@ -1584,22 +1662,21 @@ pre, code {
  
  .new-session-logo {
    flex: none;
@@ -3607,7 +3741,7 @@ index d6b5535..69eff6c 100644
    line-height: 1.15;
    white-space: nowrap;
  }
-@@ -1613,7 +1688,8 @@ pre, code {
+@@ -1613,7 +1690,8 @@ pre, code {
    gap: 6px;
    min-width: 0;
    color: var(--text-dim);
@@ -3617,7 +3751,7 @@ index d6b5535..69eff6c 100644
    line-height: 1.4;
    white-space: nowrap;
  }
-@@ -1638,7 +1714,7 @@ pre, code {
+@@ -1638,7 +1716,7 @@ pre, code {
    gap: 3px;
    margin: -3px -4px;
    padding: 3px 4px;
@@ -3626,7 +3760,7 @@ index d6b5535..69eff6c 100644
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
-@@ -1652,7 +1728,7 @@ pre, code {
+@@ -1652,7 +1730,7 @@ pre, code {
  
  /* The ring inside the box, clear of the "→" and "·" beside it. */
  .new-session-update:focus-visible {
@@ -3635,7 +3769,7 @@ index d6b5535..69eff6c 100644
    outline-offset: -2px;
  }
  
-@@ -1678,12 +1754,12 @@ pre, code {
+@@ -1678,12 +1756,12 @@ pre, code {
    }
  
    .new-session-logo {
@@ -3651,7 +3785,7 @@ index d6b5535..69eff6c 100644
    }
  }
  
-@@ -1722,14 +1798,14 @@ pre, code {
+@@ -1722,14 +1800,14 @@ pre, code {
    min-width: 0;
    height: 29px;
    padding: 0 10px;
@@ -3669,7 +3803,7 @@ index d6b5535..69eff6c 100644
  }
  
  /* Above a fresh composer (inline): no box until hovered or open, 12px, the
-@@ -1752,7 +1828,7 @@ pre, code {
+@@ -1752,7 +1830,7 @@ pre, code {
    height: 26px;
    padding: 0 6px;
    border: 0;
@@ -3678,7 +3812,7 @@ index d6b5535..69eff6c 100644
    background: transparent;
  }
  
-@@ -1781,8 +1857,9 @@ pre, code {
+@@ -1781,8 +1859,9 @@ pre, code {
    max-width: 28ch;
    overflow: hidden;
    color: var(--text-dim);
@@ -3689,7 +3823,7 @@ index d6b5535..69eff6c 100644
  }
  
  .project-picker-parent {
-@@ -1851,7 +1928,8 @@ pre, code {
+@@ -1851,7 +1930,8 @@ pre, code {
     path's color and code type, cut at its end. */
  .project-picker-label.is-alias {
    color: var(--text);
@@ -3699,7 +3833,7 @@ index d6b5535..69eff6c 100644
  }
  
  /* A path or a branch, cut at its left (rtl), the text itself kept left to
-@@ -1901,7 +1979,8 @@ pre, code {
+@@ -1901,7 +1981,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);
@@ -3709,7 +3843,7 @@ index d6b5535..69eff6c 100644
  }
  
  /* No worktree list here (the files tab): a box that says why, and does nothing. */
-@@ -1978,7 +2057,7 @@ pre, code {
+@@ -1978,7 +2059,7 @@ pre, code {
    box-sizing: border-box;
    flex: 0 0 24px;
    border: 1px solid var(--border);
@@ -3718,7 +3852,7 @@ index d6b5535..69eff6c 100644
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
-@@ -2037,7 +2116,7 @@ pre, code {
+@@ -2037,7 +2118,7 @@ pre, code {
  .markdown-file-preview pre {
    background: var(--bg-panel);
    border: 1px solid var(--border);
@@ -3727,7 +3861,7 @@ index d6b5535..69eff6c 100644
    padding: 12px 16px;
    overflow-x: auto;
    font-family: var(--font-mono);
-@@ -2049,7 +2128,7 @@ pre, code {
+@@ -2049,7 +2130,7 @@ pre, code {
    font-size: 0.9em;
    background: var(--bg-panel);
    padding: 1px 5px;
@@ -3736,7 +3870,7 @@ index d6b5535..69eff6c 100644
  }
  .markdown-file-preview pre code {
    background: none;
-@@ -2061,7 +2140,7 @@ pre, code {
+@@ -2061,7 +2142,7 @@ pre, code {
    margin-bottom: 20px;
    padding: 14px 16px 12px;
    border: 1px solid var(--border);
@@ -3745,7 +3879,7 @@ index d6b5535..69eff6c 100644
    background: var(--bg-panel);
  }
  .markdown-frontmatter-title {
-@@ -2474,3 +2553,428 @@ span.token.table {
+@@ -2474,3 +2555,428 @@ span.token.table {
      display: none !important;
    }
  }
@@ -4292,7 +4426,7 @@ index 79c8282..97731f1 100644
      lang: "en",
      icons: [
 diff --git a/app/settings.css b/app/settings.css
-index 0bf21eb..4938ff2 100644
+index 0bf21eb..e8788d8 100644
 --- a/app/settings.css
 +++ b/app/settings.css
 @@ -40,9 +40,9 @@
@@ -4424,15 +4558,19 @@ index 0bf21eb..4938ff2 100644
    background: var(--bg-panel);
    overflow-y: auto;
  }
-@@ -457,7 +458,7 @@
+@@ -457,9 +458,9 @@
  .enabled-models-pin {
    flex-shrink: 0;
    padding: 1px 4px;
 -  border-radius: 3px;
+-  background: rgba(99, 102, 241, 0.12);
+-  color: rgba(99, 102, 241, 0.8);
 +  border-radius: var(--radius-xs);
-   background: rgba(99, 102, 241, 0.12);
-   color: rgba(99, 102, 241, 0.8);
++  background: var(--bg-subtle);
++  color: var(--text-muted);
    font-size: 9px;
+ }
+ 
 @@ -497,7 +498,7 @@
    justify-content: space-between;
    gap: 18px;
@@ -4469,7 +4607,7 @@ index 0bf21eb..4938ff2 100644
  }
  
  .config-field-label {
-@@ -697,7 +698,7 @@
+@@ -697,15 +698,15 @@
  .config-scope-tag {
    flex-shrink: 0;
    padding: 1px 5px;
@@ -4478,6 +4616,16 @@ index 0bf21eb..4938ff2 100644
    background: rgba(120, 120, 120, 0.12);
    color: var(--text-dim);
    font-size: 10px;
+ }
+ 
+ .config-scope-tag.is-project {
+-  background: rgba(99, 102, 241, 0.12);
+-  color: rgba(99, 102, 241, 0.8);
++  background: var(--bg-subtle);
++  color: var(--text-muted);
+ }
+ 
+ .config-scope-switch-field {
 @@ -730,7 +731,7 @@
    height: 30px;
    overflow: hidden;
@@ -5119,7 +5267,7 @@ index 737e7a5..19466a2 100644
    color: var(--text-muted);
    font: inherit;
 diff --git a/app/sidebar.css b/app/sidebar.css
-index 86728a2..fd45b6f 100644
+index 86728a2..1d59f26 100644
 --- a/app/sidebar.css
 +++ b/app/sidebar.css
 @@ -91,7 +91,7 @@
@@ -5131,6 +5279,15 @@ index 86728a2..fd45b6f 100644
    outline-offset: -2px;
  }
  
+@@ -171,7 +171,7 @@
+ }
+ 
+ .session-tree-pinned-dot.is-unread {
+-  background: #0891b2;
++  background: var(--text-strong);
+ }
+ 
+ /* Session row: title, branch, time; actions take the time's place on
 @@ -184,7 +184,7 @@
    right: var(--session-tree-inset-right);
    left: var(--session-tree-inset-left);
@@ -5176,6 +5333,23 @@ index 86728a2..fd45b6f 100644
    cursor: default;
  }
  
+@@ -255,14 +234,14 @@ a.session-tree-main {
+   width: 6px;
+   height: 6px;
+   border-radius: 50%;
+-  background: #0891b2;
++  background: var(--text-strong);
+ }
+ 
+ .session-tree-unread::after {
+   content: "";
+   position: absolute;
+   inset: -3px;
+-  border: 1.4px solid #0891b2;
++  border: 1.4px solid var(--text-strong);
+   border-radius: 50%;
+   opacity: 0.35;
+   animation: session-tree-status-pulse 1.6s ease-in-out infinite;
 @@ -297,20 +276,23 @@ a.session-tree-main {
    }
  }
@@ -5297,6 +5471,15 @@ index 86728a2..fd45b6f 100644
    text-align: left;
    white-space: nowrap;
  }
+@@ -669,7 +657,7 @@ a.session-tree-main {
+   width: 6px;
+   height: 6px;
+   border-radius: 50%;
+-  background: #0891b2;
++  background: var(--text-strong);
+ }
+ 
+ .session-tree-group-actions {
 @@ -726,7 +714,7 @@ a.session-tree-main {
    width: 22px;
    height: 22px;
@@ -5646,7 +5829,7 @@ index 861a1c6..d5d466e 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..fb61efb 100644
+index c8c4ba9..0d90e2b 100644
 --- a/components/AppShell.tsx
 +++ b/components/AppShell.tsx
 @@ -3,6 +3,8 @@
@@ -6147,6 +6330,15 @@ index c8c4ba9..fb61efb 100644
        </button>
      );
    };
+@@ -2033,7 +1873,7 @@ export function AppShell() {
+           transform: translateY(0);
+           filter: blur(0);
+           background: color-mix(in srgb, var(--accent) 8%, var(--bg-panel));
+-          box-shadow: 0 18px 44px rgba(37,99,235,0.16);
++          box-shadow: 0 18px 44px rgba(0,0,0,0.16);
+         }
+         100% {
+           opacity: 1;
 @@ -2178,13 +2018,9 @@ export function AppShell() {
              onMouseLeave={(e) => { e.currentTarget.style.color = "var(--text-muted)"; }}
            >
@@ -6256,7 +6448,7 @@ index c8c4ba9..fb61efb 100644
          </div>
  
 diff --git a/components/BranchNavigator.tsx b/components/BranchNavigator.tsx
-index 0f8186b..e7fde3d 100644
+index 0f8186b..d31883a 100644
 --- a/components/BranchNavigator.tsx
 +++ b/components/BranchNavigator.tsx
 @@ -3,6 +3,8 @@
@@ -6268,11 +6460,15 @@ index 0f8186b..e7fde3d 100644
  
  interface Props {
    tree: SessionTreeNode[];
-@@ -209,7 +211,7 @@ function TreeNodeView({ node, activePathIds, depth, isLast, parentLines, onSelec
+@@ -207,9 +209,9 @@ function TreeNodeView({ node, activePathIds, depth, isLast, parentLines, onSelec
+             fontSize: 9,
+             fontFamily: "var(--font-mono)",
              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)"}`,
+-            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,
++            background: role === "user" ? "var(--accent-soft)" : "var(--bg-hover)",
++            border: "1px solid var(--border)",
 +            borderRadius: "var(--radius-xs)",
              padding: "0 4px",
              marginRight: 5,
@@ -6376,7 +6572,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..7dd9112 100644
+index 9a0a1b7..80465c6 100644
 --- a/components/ChatInput.tsx
 +++ b/components/ChatInput.tsx
 @@ -35,6 +35,8 @@ import { useFontPreferences } from "@/hooks/useFontPreferences";
@@ -6853,10 +7049,10 @@ index 9a0a1b7..7dd9112 100644
 +                    style={{
 +                      display: "flex", alignItems: "center", gap: 5,
 +                      padding: "7px 12px",
-+                      background: canQueueStreamingMessage ? "rgba(129,140,248,0.14)" : "var(--bg-subtle)",
++                      background: canQueueStreamingMessage ? "var(--accent-soft)" : "var(--bg-subtle)",
 +                      border: "none",
 +                      borderRadius: "var(--radius-sm)",
-+                      color: canQueueStreamingMessage ? "rgba(99,102,241,1)" : "var(--text-dim)",
++                      color: canQueueStreamingMessage ? "var(--text-strong)" : "var(--text-dim)",
 +                      cursor: canQueueStreamingMessage ? "pointer" : "not-allowed",
 +                      fontSize: 13, fontWeight: 600, letterSpacing: "-0.01em",
 +                      transition: "background 0.12s",
@@ -7678,7 +7874,7 @@ index 2c78471..12d53ec 100644
  
        {minimapHovered && allNodes.length > 0 && (
 diff --git a/components/ChatWindow.tsx b/components/ChatWindow.tsx
-index 6c540a4..900d76c 100644
+index 6c540a4..57ffd84 100644
 --- a/components/ChatWindow.tsx
 +++ b/components/ChatWindow.tsx
 @@ -1,19 +1,20 @@
@@ -7818,7 +8014,19 @@ index 6c540a4..900d76c 100644
  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
+@@ -1014,34 +1025,17 @@ export function ChatWindow({ session, searchTarget, onSearchTargetHandled, initi
+       onDrop={handleDrop}
+     >
+       {isDragOver && (
+-        <div className="pointer-events-none absolute inset-0 z-50 flex animate-[drop-zone-in_0.15s_ease_both] items-center justify-center bg-[rgba(37,99,235,0.06)] backdrop-blur-[1px]">
++        <div className="pointer-events-none absolute inset-0 z-50 flex animate-[drop-zone-in_0.15s_ease_both] items-center justify-center bg-[var(--accent-soft)] backdrop-blur-[1px]">
+           <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+             {[0, 0.8, 1.6].map((delay) => (
+               <div
+                 key={delay}
+-                className="absolute h-[720px] w-[720px] rounded-full border-[1.5px] border-solid border-[rgba(37,99,235,0.5)] animate-[drop-ripple_2.4s_ease-out_infinite_backwards]"
++                className="absolute h-[720px] w-[720px] rounded-full border-[1.5px] border-solid border-[var(--text-dim)] animate-[drop-ripple_2.4s_ease-out_infinite_backwards]"
+                 style={{ transformOrigin: "center", animationDelay: `${delay}s` }}
                />
              ))}
            </div>
@@ -7966,6 +8174,17 @@ index 6c540a4..900d76c 100644
                  <div className="new-session-brand-text">
                    <span className="new-session-brand-name">Pi Web</span>
                    <span className="new-session-meta">
+@@ -1562,8 +1557,8 @@ function NoticeShelf({ notices, floating = false, onPauseChange }: { notices: No
+               width: "fit-content",
+               maxWidth: "min(100%, 620px)",
+               boxShadow: floating
+-                ? "0 1px 2px rgba(15,23,42,0.05), 0 10px 28px -14px rgba(15,23,42,0.24)"
+-                : "0 1px 2px rgba(15,23,42,0.04), 0 8px 24px -12px rgba(15,23,42,0.10)",
++                ? "0 1px 2px rgba(0,0,0,0.05), 0 10px 28px -14px rgba(0,0,0,0.24)"
++                : "0 1px 2px rgba(0,0,0,0.04), 0 8px 24px -12px rgba(0,0,0,0.10)",
+               fontSize: 14,
+               lineHeight: 1.5,
+               transformOrigin: "top right",
 @@ -1648,11 +1643,7 @@ function ExtensionWaitingCount({ count }: { count: number }) {
  /** Corner brackets pointing outward; when expanded they point inward (restore). */
  function ExtensionSizeIcon({ expanded }: { expanded: boolean }) {
@@ -8295,7 +8514,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..77f0807 100644
+index 94cf736..f4fc956 100644
 --- a/components/FileExplorer.tsx
 +++ b/components/FileExplorer.tsx
 @@ -18,6 +18,8 @@ import { buildSearchTree, type SearchTreeNode } from "@/lib/search-tree";
@@ -8307,6 +8526,15 @@ index 94cf736..77f0807 100644
  type Translate = ReturnType<typeof useI18n>["t"];
  
  /** Why a listed entry is normally left out; only listings with `hidden=1` report it. */
+@@ -144,7 +146,7 @@ const GIT_STATUS_COLORS: Record<GitFileStatusKind, string> = {
+   modified: "#d6a84b",
+   added: "#4ade80",
+   deleted: "#f87171",
+-  renamed: "#60a5fa",
++  renamed: "var(--text-muted)",
+   untracked: "#4ade80",
+   conflict: "#f87171",
+ };
 @@ -174,20 +176,13 @@ function GitStatusBadge({ status, t }: { status: GitFileStatus; t: Translate })
  
  function MentionIcon({ size = 11 }: { size?: number }) {
@@ -8351,6 +8579,15 @@ index 94cf736..77f0807 100644
          )}
          {!node.isDir && <span style={{ width: 10, flexShrink: 0 }} />}
          <span style={{ flexShrink: 0, display: "flex", alignItems: "center", opacity: hidden ? HIDDEN_ENTRY_OPACITY : 1 }}>
+@@ -396,7 +385,7 @@ export function TreeNode({
+             aria-label={t("files.newlyUploaded")}
+             style={{ width: 14, height: 14, flexShrink: 0, display: "flex", alignItems: "center", justifyContent: "center" }}
+           >
+-            <span style={{ width: 6, height: 6, borderRadius: "50%", background: "#3b82f6" }} />
++            <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--text-strong)" }} />
+           </span>
+         )}
+         {!hovered && !node.isDir && gitStatus && (
 @@ -419,9 +408,7 @@ export function TreeNode({
            </span>
          )}
@@ -8621,10 +8858,18 @@ 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..5c5712b 100644
+index 9426211..5f0943f 100644
 --- a/components/FileViewer.tsx
 +++ b/components/FileViewer.tsx
-@@ -34,6 +34,8 @@ import {
+@@ -6,6 +6,7 @@ import SyntaxHighlighter from "react-syntax-highlighter/dist/esm/prism-light";
+ import renderSyntaxNode from "react-syntax-highlighter/dist/esm/create-element";
+ import { vs } from "react-syntax-highlighter/dist/cjs/styles/prism";
+ import { vscDarkPlus } from "react-syntax-highlighter/dist/cjs/styles/prism";
++import { neutralCodeTheme } from "@/lib/neutral-code-theme";
+ import ReactMarkdown from "react-markdown";
+ import { useTheme } from "@/hooks/useTheme";
+ import { usePrismLanguages } from "@/hooks/usePrismLanguages";
+@@ -34,6 +35,8 @@ import {
    type FileViewerDisplayMode as DisplayMode,
    type FileViewerState,
  } from "@/lib/file-viewer-state";
@@ -8633,7 +8878,24 @@ index 9426211..5c5712b 100644
  
  export type { FileViewerState } from "@/lib/file-viewer-state";
  
-@@ -119,10 +121,7 @@ interface SelectedLineRange {
+@@ -81,12 +84,14 @@ const FILE_CODE_STYLE: CSSProperties = {
+ // dark theme's shorthand is dropped, as CodeBlock does: a theme switch then never
+ // makes React remove one beside the other (it warned, and the view lost its
+ // background).
+-const fileViewerDarkTheme = {
++const fileViewerDarkTheme = neutralCodeTheme({
+   ...vscDarkPlus,
+   'pre[class*="language-"]': {
+     ...vscDarkPlus['pre[class*="language-"]'],
+   },
+-};
++}, "dark");
++// Both without blue: lib/neutral-code-theme.ts.
++const fileViewerLightTheme = neutralCodeTheme(vs, "light");
+ delete fileViewerDarkTheme['pre[class*="language-"]'].background;
+ 
+ const FILE_LINE_NUMBER_STYLE: CSSProperties = {
+@@ -119,10 +124,7 @@ interface SelectedLineRange {
  
  function MentionIcon() {
    return (
@@ -8645,7 +8907,7 @@ index 9426211..5c5712b 100644
    );
  }
  
-@@ -252,11 +251,7 @@ function DownloadLink({ filePath, sourceSessionId }: { filePath: string; sourceS
+@@ -252,11 +254,7 @@ function DownloadLink({ filePath, sourceSessionId }: { filePath: string; sourceS
        aria-label={t("i18n.downloadFile")}
        className="file-viewer-icon-button"
      >
@@ -8658,7 +8920,16 @@ index 9426211..5c5712b 100644
      </a>
    );
  }
-@@ -1708,12 +1703,7 @@ function TextFileViewer({
+@@ -1442,7 +1440,7 @@ function TextFileViewer({
+       <SyntaxHighlighter
+         className={wrapLines ? "file-source-view is-wrapped" : "file-source-view"}
+         language={language === "text" || !prismReady ? "plaintext" : language}
+-        style={isDark ? fileViewerDarkTheme : vs}
++        style={isDark ? fileViewerDarkTheme : fileViewerLightTheme}
+         showLineNumbers
+         lineNumberStyle={{
+           ...FILE_LINE_NUMBER_STYLE,
+@@ -1708,12 +1706,7 @@ function TextFileViewer({
                      color: wrapLines ? "var(--text)" : "var(--text-muted)",
                    }}
                  >
@@ -8672,7 +8943,7 @@ index 9426211..5c5712b 100644
                  </button>
                </>
              )}
-@@ -1733,7 +1723,7 @@ function TextFileViewer({
+@@ -1733,7 +1726,7 @@ function TextFileViewer({
              gap: 10,
              padding: "5px 8px",
              border: "1px solid var(--border)",
@@ -8730,19 +9001,29 @@ index 9b81f64..22b3e6d 100644
          </dialog>
        )}
 diff --git a/components/MermaidBlock.tsx b/components/MermaidBlock.tsx
-index 25e4a63..75bd5f2 100644
+index 25e4a63..8ce9799 100644
 --- a/components/MermaidBlock.tsx
 +++ b/components/MermaidBlock.tsx
-@@ -10,6 +10,8 @@ import { usePrismLanguages } from "@/hooks/usePrismLanguages";
+@@ -10,6 +10,9 @@ import { usePrismLanguages } from "@/hooks/usePrismLanguages";
  import { copyText } from "@/lib/clipboard";
  import { takeHighlightBudget, waitForHighlight } from "@/lib/highlight-queue";
  import { prismLanguagesLoaded } from "@/lib/prism-languages";
++import { neutralCodeTheme, neutralMermaidTheme } from "@/lib/neutral-code-theme";
 +import { CarbonIcon } from "./CarbonIcon";
 +import * as Carbon from "./carbon/icons";
  
  interface MermaidBlockProps {
    code: string;
-@@ -194,9 +196,7 @@ function MermaidZoomDialog({ svg, onClose }: { svg: string; onClose: () => void
+@@ -59,7 +62,7 @@ export function MermaidBlock({ code, isStreaming, defaultPreview = false }: Merm
+         startOnLoad: false,
+         securityLevel: "strict",
+         suppressErrorRendering: true,
+-        theme: isDark ? "dark" : "default",
++        ...neutralMermaidTheme(isDark),
+       });
+ 
+       const parsed = await mermaid.parse(code, { suppressErrors: true });
+@@ -194,9 +197,7 @@ function MermaidZoomDialog({ svg, onClose }: { svg: string; onClose: () => void
                  title={t("i18n.zoomOut")}
                  aria-label={t("i18n.zoomOut")}
                >
@@ -8753,7 +9034,7 @@ index 25e4a63..75bd5f2 100644
                </button>
                <span className="mermaid-zoom-value">{Math.round(zoom * 100)}%</span>
                <button
-@@ -206,9 +206,7 @@ function MermaidZoomDialog({ svg, onClose }: { svg: string; onClose: () => void
+@@ -206,9 +207,7 @@ function MermaidZoomDialog({ svg, onClose }: { svg: string; onClose: () => void
                  title={t("i18n.zoomIn")}
                  aria-label={t("i18n.zoomIn")}
                >
@@ -8764,7 +9045,7 @@ index 25e4a63..75bd5f2 100644
                </button>
              </div>
              <button
-@@ -218,9 +216,7 @@ function MermaidZoomDialog({ svg, onClose }: { svg: string; onClose: () => void
+@@ -218,9 +217,7 @@ function MermaidZoomDialog({ svg, onClose }: { svg: string; onClose: () => void
                title={t("i18n.fitToWidth")}
                aria-label={t("i18n.fitToWidth")}
              >
@@ -8775,7 +9056,7 @@ index 25e4a63..75bd5f2 100644
              </button>
              <button
                type="button"
-@@ -229,9 +225,7 @@ function MermaidZoomDialog({ svg, onClose }: { svg: string; onClose: () => void
+@@ -229,9 +226,7 @@ function MermaidZoomDialog({ svg, onClose }: { svg: string; onClose: () => void
                title={t("i18n.close")}
                aria-label={t("i18n.close")}
              >
@@ -8786,6 +9067,32 @@ index 25e4a63..75bd5f2 100644
              </button>
            </div>
          </div>
+@@ -262,12 +257,14 @@ interface CodeBlockProps {
+ // Prism's light theme uses backgroundColor, while its dark theme uses the
+ // background shorthand. Keep the pre background solely in customStyle so a
+ // theme switch cannot remove/update one and reset the other in React's diff.
+-const codeBlockDarkTheme = {
++const codeBlockDarkTheme = neutralCodeTheme({
+   ...vscDarkPlus,
+   'pre[class*="language-"]': {
+     ...vscDarkPlus['pre[class*="language-"]'],
+   },
+-};
++}, "dark");
++// Both without blue: lib/neutral-code-theme.ts.
++const codeBlockLightTheme = neutralCodeTheme(vs, "light");
+ delete codeBlockDarkTheme['pre[class*="language-"]'].background;
+ 
+ /**
+@@ -337,7 +334,7 @@ export const CodeBlock = memo(function CodeBlock({ code, lang, headerAction, isS
+       ) : (
+         <SyntaxHighlighter
+           language={highlighted ? lang || "text" : "text"}
+-          style={isDark ? codeBlockDarkTheme : vs}
++          style={isDark ? codeBlockDarkTheme : codeBlockLightTheme}
+           showLineNumbers
+           lineNumberStyle={{ color: "var(--text-dim)", fontStyle: "normal" }}
+           customStyle={{
 diff --git a/components/MessageView.test.mjs b/components/MessageView.test.mjs
 index 515b033..eeb4c1e 100644
 --- a/components/MessageView.test.mjs
@@ -8812,7 +9119,7 @@ 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..de7e3d6 100644
+index f2ff1de..d98d368 100644
 --- a/components/MessageView.tsx
 +++ b/components/MessageView.tsx
 @@ -1,10 +1,11 @@
@@ -8914,7 +9221,7 @@ index f2ff1de..de7e3d6 100644
                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)" }}
++              style={{ maxWidth: 240, maxHeight: 240, borderRadius: "var(--radius-sm)", objectFit: "contain", display: "block", border: "none" }}
              />
            </ImagePreview>
          );
@@ -9895,6 +10202,30 @@ index f2ff1de..de7e3d6 100644
    const { t } = useI18n();
    const showFileHeaders = files.length > 1;
  
+@@ -1483,12 +1352,12 @@ function PatchTextView({ text }: { text: string }) {
+         const bg =
+           kind === "added" ? "rgba(34,197,94,0.12)" :
+           kind === "removed" ? "rgba(248,113,113,0.13)" :
+-          kind === "hunk" ? "rgba(96,165,250,0.12)" :
++          kind === "hunk" ? "var(--bg-subtle)" :
+           "transparent";
+         const color =
+           kind === "added" ? "#22c55e" :
+           kind === "removed" ? "#f87171" :
+-          kind === "hunk" ? "var(--accent)" :
++          kind === "hunk" ? "var(--text-dim)" :
+           "var(--text)";
+ 
+         return (
+@@ -1502,7 +1371,7 @@ function PatchTextView({ text }: { text: string }) {
+                 : kind === "removed"
+                 ? "3px solid #f87171"
+                 : kind === "hunk"
+-                ? "3px solid var(--accent)"
++                ? "3px solid var(--line)"
+                 : "3px solid transparent",
+             }}
+           >
 @@ -1587,7 +1456,6 @@ function ResultImages({ images, isError }: { images: ImageContent[]; isError: bo
          flexWrap: "wrap",
          padding: "10px",
@@ -10106,7 +10437,7 @@ index ba912ee..db662d8 100644
                  <SelectorRow active={!value} gutter={Boolean(onSetDefault)} onSelect={() => {
                    setOpen(false);
 diff --git a/components/ModelsConfig.tsx b/components/ModelsConfig.tsx
-index 9f6b556..7063172 100644
+index 9f6b556..470db1f 100644
 --- a/components/ModelsConfig.tsx
 +++ b/components/ModelsConfig.tsx
 @@ -54,6 +54,8 @@ import { providerBadgeLabel } from "./enabled-models-helpers";
@@ -10192,7 +10523,23 @@ index 9f6b556..7063172 100644
                >
                  {selectedCount
                    ? t("models.discoveryAddSelectedCount", { count: selectedCount })
-@@ -627,7 +621,7 @@ function ThinkingLevelMapEditor({
+@@ -561,10 +555,11 @@ type ThinkingLevel = typeof THINKING_LEVELS[number];
+ 
+ const LEVEL_COLORS: Record<ThinkingLevel, string> = {
+   off:     "var(--text-dim)",
+-  minimal: "#6b7280",
+-  low:     "#60a5fa",
+-  medium:  "#a78bfa",
+-  high:    "#f472b6",
++  // Neutral grays up to medium, then the warm state colours: no blue or violet.
++  minimal: "var(--text-dim)",
++  low:     "var(--text-muted)",
++  medium:  "var(--text-strong)",
++  high:    "#f59e0b",
+   xhigh:   "#fb923c",
+   max:     "#ef4444",
+ };
+@@ -627,7 +622,7 @@ function ThinkingLevelMapEditor({
                alignItems: "center",
                gap: 8,
                padding: "5px 4px",
@@ -10201,7 +10548,7 @@ index 9f6b556..7063172 100644
                background: "transparent",
                border: "1px solid transparent",
              }}
-@@ -644,7 +638,7 @@ function ThinkingLevelMapEditor({
+@@ -644,7 +639,7 @@ function ThinkingLevelMapEditor({
                </span>
              </div>
  
@@ -10210,7 +10557,7 @@ index 9f6b556..7063172 100644
                <button
                  onClick={() => setLevel(level, "omit")}
                  style={{ ...btnBase, ...(state === "omit" ? btnActive : {}) }}
-@@ -659,7 +653,7 @@ function ThinkingLevelMapEditor({
+@@ -659,7 +654,7 @@ function ThinkingLevelMapEditor({
                </button>
              </div>
  
@@ -10219,7 +10566,7 @@ index 9f6b556..7063172 100644
                <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 }: {
+@@ -747,7 +742,7 @@ function HeaderListEditor({ headers, onChange }: {
      padding: "6px 9px",
      background: "none",
      border: "1px solid rgba(239,68,68,0.3)",
@@ -10228,7 +10575,7 @@ index 9f6b556..7063172 100644
      color: "#ef4444",
      cursor: "pointer",
      fontSize: 11,
-@@ -768,7 +762,7 @@ function HeaderListEditor({ headers, onChange }: {
+@@ -768,7 +763,7 @@ function HeaderListEditor({ headers, onChange }: {
          ...current,
          { id: nextRowIdRef.current++, name: "", value: "" },
        ])}
@@ -10237,16 +10584,20 @@ index 9f6b556..7063172 100644
          + Add header
        </button>
      </div>
-@@ -1051,7 +1045,7 @@ function ModelDetail({
+@@ -1051,9 +1046,9 @@ function ModelDetail({
                  height: 28,
                  padding: "0 8px",
                  border: `1px solid ${testState.phase === "error" ? "#fecaca" : testState.phase === "success" ? "#bbf7d0" : "var(--border)"}`,
 -                borderRadius: 4,
+-                background: testState.phase === "error" ? "#fee2e2" : testState.phase === "success" ? "#dcfce7" : "#e5e7eb",
+-                color: "#111827",
 +                borderRadius: "var(--radius-xs)",
-                 background: testState.phase === "error" ? "#fee2e2" : testState.phase === "success" ? "#dcfce7" : "#e5e7eb",
-                 color: "#111827",
++                background: testState.phase === "error" ? "#fee2e2" : testState.phase === "success" ? "#dcfce7" : "#e5e5e5",
++                color: "#0a0a0a",
                  fontSize: 11,
-@@ -1075,9 +1069,7 @@ function ModelDetail({
+                 display: "inline-flex",
+                 alignItems: "center",
+@@ -1075,9 +1070,7 @@ function ModelDetail({
              className={testState.phase === "success" ? "is-success" : undefined}
            >
              {testState.phase === "success" && (
@@ -10257,7 +10608,7 @@ index 9f6b556..7063172 100644
              )}
               {testState.phase === "testing" ? t("i18n.checking") : testState.phase === "success" ? t("common.ok") : t("i18n.test")}
            </ConfigButton>
-@@ -1096,7 +1088,7 @@ function ModelDetail({
+@@ -1096,7 +1089,7 @@ function ModelDetail({
              onClick={() => void handleCatalogFill()}
              disabled={!model.id.trim() || catalogState.phase === "loading"}
              style={{
@@ -10266,7 +10617,7 @@ index 9f6b556..7063172 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",
-@@ -1227,20 +1219,7 @@ function ModelDetail({
+@@ -1227,20 +1220,7 @@ function ModelDetail({
                {advancedSummary}
              </span>
            </span>
@@ -10288,7 +10639,7 @@ index 9f6b556..7063172 100644
          </button>
  
          {advancedOpen && (
-@@ -1492,7 +1471,7 @@ function OAuthDetail({ provider, onRefresh, enabledModels }: {
+@@ -1492,7 +1472,7 @@ function OAuthDetail({ provider, onRefresh, enabledModels }: {
                  <button
                    key={option.id}
                    onClick={() => submitSelection(loginState.token, option.id)}
@@ -10297,7 +10648,7 @@ index 9f6b556..7063172 100644
                  >
                    {option.label}
                  </button>
-@@ -1527,7 +1506,7 @@ function OAuthDetail({ provider, onRefresh, enabledModels }: {
+@@ -1527,7 +1507,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>
@@ -10306,7 +10657,7 @@ index 9f6b556..7063172 100644
                {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 }: {
+@@ -1666,7 +1646,7 @@ function ApiKeyDetail({ provider, onRefresh, enabledModels }: {
            style={{
              padding: "6px 12px",
              background: savedOk ? "#16a34a" : apiKey.trim() ? "var(--accent)" : "var(--bg-panel)",
@@ -10315,7 +10666,7 @@ index 9f6b556..7063172 100644
              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 }: {
+@@ -1674,9 +1654,7 @@ function ApiKeyDetail({ provider, onRefresh, enabledModels }: {
            }}
          >
            {savedOk && (
@@ -10326,7 +10677,7 @@ index 9f6b556..7063172 100644
            )}
             {savedOk ? t("i18n.saved") : saving ? t("i18n.saving") : t("i18n.save")}
          </button>
-@@ -1725,7 +1702,7 @@ function AddProviderPicker({
+@@ -1725,7 +1703,7 @@ function AddProviderPicker({
      padding: "10px 12px",
      background: "var(--bg-panel)",
      border: "1px solid var(--border)",
@@ -10335,7 +10686,7 @@ index 9f6b556..7063172 100644
      boxSizing: "border-box",
      cursor: "pointer",
      minWidth: 0,
-@@ -1747,12 +1724,10 @@ function AddProviderPicker({
+@@ -1747,12 +1725,10 @@ function AddProviderPicker({
          onClose();
        }}
      >
@@ -10350,7 +10701,7 @@ index 9f6b556..7063172 100644
            <input
              ref={inputRef}
              value={search}
-@@ -1782,10 +1757,8 @@ function AddProviderPicker({
+@@ -1782,10 +1758,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>
@@ -10363,7 +10714,7 @@ index 9f6b556..7063172 100644
                    </span>
                  </button>
                )}
-@@ -2177,13 +2150,7 @@ export function ModelsConfig({ onClose, embedded = false, cwd = null }: {
+@@ -2177,13 +2151,7 @@ export function ModelsConfig({ onClose, embedded = false, cwd = null }: {
                        onClick={() => setSelection({ type: "provider", name: pName })}
                        active={isProviderSelected}
                      >
@@ -10378,16 +10729,16 @@ index 9f6b556..7063172 100644
                        <ConfigSidebarText className="is-grow">
                          {pName}
                        </ConfigSidebarText>
-@@ -2204,7 +2171,7 @@ export function ModelsConfig({ onClose, embedded = false, cwd = null }: {
+@@ -2204,7 +2172,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>
++                            <span style={{ fontSize: 9, padding: "1px 4px", background: "var(--bg-subtle)", color: "var(--text-muted)", borderRadius: "var(--radius-xs)", flexShrink: 0 }}>T</span>
                            )}
                          </ConfigSidebarItem>
                        );
-@@ -2250,10 +2217,7 @@ export function ModelsConfig({ onClose, embedded = false, cwd = null }: {
+@@ -2250,10 +2218,7 @@ export function ModelsConfig({ onClose, embedded = false, cwd = null }: {
              className={savedOk ? "is-success" : undefined}
            >
              {savedOk && (
@@ -10641,7 +10992,7 @@ index cf38be6..c08aaef 100644
          </button>
          {report && (
 diff --git a/components/SelectorRow.tsx b/components/SelectorRow.tsx
-index 555da8f..e64352a 100644
+index 555da8f..5bd340c 100644
 --- a/components/SelectorRow.tsx
 +++ b/components/SelectorRow.tsx
 @@ -2,12 +2,12 @@
@@ -10698,6 +11049,15 @@ index 555da8f..e64352a 100644
              cursor: "pointer",
              opacity: showSave ? 1 : 0,
              pointerEvents: showSave ? "auto" : "none",
+@@ -120,7 +123,7 @@ export function SelectorRow({
+           onMouseEnter={(event) => {
+             event.currentTarget.style.background = "var(--bg-selected)";
+             event.currentTarget.style.color = "var(--accent)";
+-            event.currentTarget.style.borderColor = "rgba(37,99,235,0.35)";
++            event.currentTarget.style.borderColor = "var(--border)";
+           }}
+           onMouseLeave={(event) => {
+             event.currentTarget.style.background = "var(--bg-hover)";
 diff --git a/components/SessionSidebar.test.mjs b/components/SessionSidebar.test.mjs
 index 6bc923f..70b9e80 100644
 --- a/components/SessionSidebar.test.mjs
@@ -10730,7 +11090,7 @@ index 6bc923f..70b9e80 100644
    // search in the toolbar row's place.
    const head = html.slice(html.indexOf('<div class="sidebar-files-head">'), html.indexOf('<div class="sidebar-files-scroll'));
 diff --git a/components/SessionTree.test.mjs b/components/SessionTree.test.mjs
-index fb53e4b..f6596f1 100644
+index fb53e4b..060f6d0 100644
 --- a/components/SessionTree.test.mjs
 +++ b/components/SessionTree.test.mjs
 @@ -119,7 +119,7 @@ test("the pinned header toggles the section and shows activity dots only while c
@@ -10751,12 +11111,14 @@ index fb53e4b..f6596f1 100644
    assert.match(html, /<span class="session-tree-group-name">app<\/span><svg[^>]*class="session-tree-group-pin"[\s\S]*?<\/svg><span class="session-tree-summary">/);
    // No folder: a project group is no second file tree.
    assert.doesNotMatch(html, /session-tree-group-icon/);
-@@ -468,11 +468,12 @@ test("row CSS stays flat, themed and quiet", () => {
+@@ -467,12 +467,13 @@ test("row CSS stays flat, themed and quiet", () => {
+   assert.doesNotMatch(css, /&/, "no CSS nesting");
    assert.doesNotMatch(css, /@starting-style|prefers-color-scheme/);
    const colors = new Set((css.match(/#[0-9a-fA-F]{3,8}\b/g) ?? []).map((color) => color.toLowerCase()));
-   for (const color of colors) assert.ok(["#ef4444", "#0891b2", "#d97706", "#f87171", "#fff"].includes(color), `unexpected color ${color}`);
+-  for (const color of colors) assert.ok(["#ef4444", "#0891b2", "#d97706", "#f87171", "#fff"].includes(color), `unexpected color ${color}`);
 -  // Three text colors: content, labels, meta (plus the accent for states,
 -  // the errors' red and the delete button's white). No mixes of their own.
++  for (const color of colors) assert.ok(["#ef4444", "#d97706", "#f87171", "#fff"].includes(color), `unexpected color ${color}`);
 +  // Three text colors: content, labels, meta, the selected title a step
 +  // stronger (plus the accent for states, the errors' red and the delete
 +  // button's white). No mixes of their own.
@@ -11316,7 +11678,7 @@ index 23e0c79..2919906 100644
            </div>
          );
 diff --git a/components/TerminalPanel.tsx b/components/TerminalPanel.tsx
-index d24bb94..28a4582 100644
+index d24bb94..77b2f58 100644
 --- a/components/TerminalPanel.tsx
 +++ b/components/TerminalPanel.tsx
 @@ -18,6 +18,8 @@ import {
@@ -11328,7 +11690,25 @@ index d24bb94..28a4582 100644
  
  interface Props {
    tab: TerminalTab;
-@@ -260,15 +262,11 @@ export function TerminalPanel({ tab, active, onRestart, onClosed, onCloseError }
+@@ -94,11 +96,12 @@ export function TerminalPanel({ tab, active, onRestart, onClosed, onCloseError }
+       screenReaderMode: true,
+       disableStdin: true,
+       theme: {
+-        background: "#111318", foreground: "#d7dce5", cursor: "#60a5fa",
+-        selectionBackground: "#365b8a",
+-        black: "#1d222b", red: "#f87171", green: "#4ade80", yellow: "#facc15",
+-        blue: "#60a5fa", magenta: "#c084fc", cyan: "#22d3ee", white: "#e5e7eb",
+-        brightBlack: "#6b7280", brightRed: "#fca5a5", brightGreen: "#86efac",
++        // Neutral grays like the rest of the app; the ANSI hues stay, they are the programs' own colours.
++        background: "#111111", foreground: "#d4d4d4", cursor: "#e5e5e5",
++        selectionBackground: "#3d3d3d",
++        black: "#1f1f1f", red: "#f87171", green: "#4ade80", yellow: "#facc15",
++        blue: "#60a5fa", magenta: "#c084fc", cyan: "#22d3ee", white: "#e5e5e5",
++        brightBlack: "#737373", brightRed: "#fca5a5", brightGreen: "#86efac",
+         brightYellow: "#fde047", brightBlue: "#93c5fd", brightMagenta: "#d8b4fe",
+         brightCyan: "#67e8f9", brightWhite: "#ffffff",
+       },
+@@ -260,15 +263,11 @@ export function TerminalPanel({ tab, active, onRestart, onClosed, onCloseError }
          </div>
          {status === "error" && (
            <button type="button" onClick={() => setReconnectKey((key) => key + 1)} disabled={Boolean(tab.closing)} title={t("terminal.reconnect")} aria-label={t("terminal.reconnect")}>
@@ -12061,6 +12441,123 @@ index d8b6d41..e9a45e1 100644
      "chat.filesWritten": "已變更的檔案",
      "chat.openWrittenFile": "開啟 {name}",
      "chat.loadEarlier": "向上捲動以載入較早的訊息",
+diff --git a/lib/neutral-code-theme.test.mjs b/lib/neutral-code-theme.test.mjs
+new file mode 100644
+index 0000000..a9dc596
+--- /dev/null
++++ b/lib/neutral-code-theme.test.mjs
+@@ -0,0 +1,45 @@
++import assert from "node:assert/strict";
++import test from "node:test";
++import { createRequire } from "node:module";
++
++const require = createRequire(import.meta.url);
++const { vscDarkPlus, vs } = require("react-syntax-highlighter/dist/cjs/styles/prism");
++const load = () => import("./neutral-code-theme.ts");
++
++// A colour is blue when its hue sits between cyan and violet and it is not a gray.
++function isBlue(hex) {
++  const m = /^#([0-9a-f]{6})$/i.exec(hex ?? "");
++  if (!m) return false;
++  const [r, g, b] = [0, 2, 4].map((i) => parseInt(m[1].slice(i, i + 2), 16) / 255);
++  const max = Math.max(r, g, b), min = Math.min(r, g, b), d = max - min, l = (max + min) / 2;
++  if (d < 0.06) return false;
++  const s = d / (1 - Math.abs(2 * l - 1));
++  let h = max === r ? ((g - b) / d) % 6 : max === g ? (b - r) / d + 2 : (r - g) / d + 4;
++  h = (h * 60 + 360) % 360;
++  return s > 0.2 && h >= 180 && h <= 275;
++}
++
++test("no token of either code theme is blue; keywords keep standing out by weight", async () => {
++  const { neutralCodeTheme } = await load();
++  for (const [theme, mode, keyword] of [[vscDarkPlus, "dark", "keyword"], [vs, "light", "keyword"]]) {
++    const out = neutralCodeTheme(theme, mode);
++    const blue = Object.entries(out).filter(([, style]) => isBlue(style.color)).map(([k, style]) => `${k} ${style.color}`);
++    assert.deepEqual(blue, [], `${mode}: blue tokens left`);
++    assert.equal(out[keyword].fontWeight, 600, `${mode}: keywords are bold`);
++  }
++  // the other hues stay: strings, comments
++  assert.equal(neutralCodeTheme(vscDarkPlus, "dark").string.color, vscDarkPlus.string.color);
++  assert.equal(neutralCodeTheme(vs, "light").comment.color, vs.comment.color);
++  // the source themes are not changed
++  assert.equal(vscDarkPlus.keyword.color.toLowerCase(), "#569cd6");
++});
++
++test("Mermaid diagrams use the base theme with neutral variables only", async () => {
++  const { neutralMermaidTheme } = await load();
++  for (const dark of [true, false]) {
++    const { theme, themeVariables } = neutralMermaidTheme(dark);
++    assert.equal(theme, "base");
++    const blue = Object.entries(themeVariables).filter(([, v]) => typeof v === "string" && isBlue(v));
++    assert.deepEqual(blue, []);
++  }
++});
+diff --git a/lib/neutral-code-theme.ts b/lib/neutral-code-theme.ts
+new file mode 100644
+index 0000000..ff0d9d6
+--- /dev/null
++++ b/lib/neutral-code-theme.ts
+@@ -0,0 +1,60 @@
++import type { CSSProperties } from "react";
++
++/**
++ * The Prism themes Pi Web highlights code with (VS Code's dark+ and light "vs"),
++ * with their blue tokens turned into the design system's neutral grays: no blue
++ * anywhere in the app, code blocks included. Keywords keep standing out by weight
++ * (600) instead of hue; strings, numbers, functions and comments keep their own
++ * colours. Client-safe and pure.
++ */
++type PrismTheme = Record<string, CSSProperties>;
++
++const DARK: Record<string, CSSProperties> = {
++  "#569cd6": { color: "#e5e5e5", fontWeight: 600 }, // keywords, tags, booleans
++  "#9cdcfe": { color: "#e5e5e5" },                  // properties, constants, attribute names
++};
++
++const LIGHT: Record<string, CSSProperties> = {
++  "#0000ff": { color: "#0a0a0a", fontWeight: 600 }, // keywords, at-rules, attribute values
++  "#00009f": { color: "#0a0a0a", fontWeight: 600 },
++  "#2b91af": { color: "#404040", fontWeight: 500 }, // class names, JSON keys
++  "#36acaa": { color: "#5c5c5c" },                  // numbers, booleans, variables
++};
++
++export function neutralCodeTheme(theme: PrismTheme, mode: "dark" | "light"): PrismTheme {
++  const map = mode === "dark" ? DARK : LIGHT;
++  const out: PrismTheme = {};
++  for (const [selector, style] of Object.entries(theme)) {
++    const color = typeof style.color === "string" ? style.color.toLowerCase() : "";
++    out[selector] = map[color] ? { ...style, ...map[color] } : { ...style };
++  }
++  return out;
++}
++
++/** Mermaid's diagrams in the same neutral grays ("base" theme), never its lavender and blue defaults. */
++export function neutralMermaidTheme(isDark: boolean) {
++  return {
++    theme: "base" as const,
++    themeVariables: isDark
++      ? {
++          darkMode: true, background: "#0a0a0a", fontFamily: "Geist, ui-sans-serif, system-ui, sans-serif",
++          primaryColor: "#1f1f1f", primaryTextColor: "#ededed", primaryBorderColor: "#525252",
++          secondaryColor: "#2a2a2a", secondaryTextColor: "#ededed", secondaryBorderColor: "#525252",
++          tertiaryColor: "#1a1a1a", tertiaryTextColor: "#d4d4d4", tertiaryBorderColor: "#3d3d3d",
++          lineColor: "#a3a3a3", textColor: "#d4d4d4", mainBkg: "#1f1f1f", nodeBorder: "#525252",
++          clusterBkg: "#141414", clusterBorder: "#3d3d3d", edgeLabelBackground: "#1a1a1a",
++          noteBkgColor: "#2a2a2a", noteTextColor: "#ededed", noteBorderColor: "#525252",
++          actorBkg: "#1f1f1f", actorBorder: "#525252", actorTextColor: "#ededed", signalColor: "#d4d4d4", signalTextColor: "#d4d4d4",
++        }
++      : {
++          darkMode: false, background: "#ffffff", fontFamily: "Geist, ui-sans-serif, system-ui, sans-serif",
++          primaryColor: "#f5f5f5", primaryTextColor: "#0a0a0a", primaryBorderColor: "#a3a3a3",
++          secondaryColor: "#e5e5e5", secondaryTextColor: "#0a0a0a", secondaryBorderColor: "#a3a3a3",
++          tertiaryColor: "#fafafa", tertiaryTextColor: "#2e2e2e", tertiaryBorderColor: "#d4d4d4",
++          lineColor: "#525252", textColor: "#2e2e2e", mainBkg: "#f5f5f5", nodeBorder: "#a3a3a3",
++          clusterBkg: "#fafafa", clusterBorder: "#d4d4d4", edgeLabelBackground: "#ffffff",
++          noteBkgColor: "#f5f5f5", noteTextColor: "#0a0a0a", noteBorderColor: "#a3a3a3",
++          actorBkg: "#f5f5f5", actorBorder: "#a3a3a3", actorTextColor: "#0a0a0a", signalColor: "#2e2e2e", signalTextColor: "#2e2e2e",
++        },
++  };
++}
 diff --git a/lib/step-summary.test.mjs b/lib/step-summary.test.mjs
 new file mode 100644
 index 0000000..6cbe005