@phenx-inc/ctlsurf 0.14.2 → 0.15.0

package/out/renderer/assets/{javascript-D6OeziKX.js → javascript-D0vPLEJg.js}

@@ -1,5 +1,5 @@
-import { conf as conf$1, language as language$1 } from "./typescript-ZBQlq256.js";
-import "./index-BJNR4hRK.js";
+import { conf as conf$1, language as language$1 } from "./typescript-CDA0Hhef.js";
+import "./index-5azC4yNn.js";
 const conf = conf$1;
 const language = {
   // Set defaultToken to invalid to see what you do not tokenize yet

package/out/renderer/assets/{jsonMode-t5SESE75.js → jsonMode-DBvR0zMu.js}

@@ -1,6 +1,6 @@
-import { c as createWebWorker, l as languages, e as editor } from "./index-BJNR4hRK.js";
-import { f as DocumentFormattingEditProvider, g as DocumentRangeFormattingEditProvider, C as CompletionAdapter, H as HoverAdapter, b as DocumentSymbolAdapter, d as DocumentColorAdapter, F as FoldingRangeAdapter, S as SelectionRangeAdapter, e as DiagnosticsAdapter } from "./lspLanguageFeatures-BEgiDCIW.js";
-import { a, D, h, R, c, i, j, t, k } from "./lspLanguageFeatures-BEgiDCIW.js";
+import { c as createWebWorker, l as languages, e as editor } from "./index-5azC4yNn.js";
+import { f as DocumentFormattingEditProvider, g as DocumentRangeFormattingEditProvider, C as CompletionAdapter, H as HoverAdapter, b as DocumentSymbolAdapter, d as DocumentColorAdapter, F as FoldingRangeAdapter, S as SelectionRangeAdapter, e as DiagnosticsAdapter } from "./lspLanguageFeatures-CiaMaQoY.js";
+import { a, D, h, R, c, i, j, t, k } from "./lspLanguageFeatures-CiaMaQoY.js";
 const STOP_WHEN_IDLE_FOR = 2 * 60 * 1e3;
 class WorkerManager {
   constructor(defaults) {

package/out/renderer/assets/{liquid-B5Wjh0p_.js → liquid-CLoc6Tx7.js}

@@ -1,4 +1,4 @@
-import { l as languages } from "./index-BJNR4hRK.js";
+import { l as languages } from "./index-5azC4yNn.js";
 const EMPTY_ELEMENTS = [
   "area",
   "base",

package/out/renderer/assets/{lspLanguageFeatures-BEgiDCIW.js → lspLanguageFeatures-CiaMaQoY.js}

@@ -1,4 +1,4 @@
-import { R as Range$1, l as languages, e as editor, U as Uri, M as MarkerSeverity } from "./index-BJNR4hRK.js";
+import { R as Range$1, l as languages, e as editor, U as Uri, M as MarkerSeverity } from "./index-5azC4yNn.js";
 var DocumentUri;
 (function(DocumentUri2) {
   function is(value) {

package/out/renderer/assets/{mdx-ByNAXh8t.js → mdx-DTsq6tlv.js}

@@ -1,4 +1,4 @@
-import { l as languages } from "./index-BJNR4hRK.js";
+import { l as languages } from "./index-5azC4yNn.js";
 const conf = {
   comments: {
     blockComment: ["{/*", "*/}"]

package/out/renderer/assets/{python-CIFO0XQW.js → python-D04DpZDr.js}

@@ -1,4 +1,4 @@
-import { l as languages } from "./index-BJNR4hRK.js";
+import { l as languages } from "./index-5azC4yNn.js";
 const conf = {
   comments: {
     lineComment: "#",

package/out/renderer/assets/{razor-LXHhGcNO.js → razor-Di6CJ6s8.js}

@@ -1,4 +1,4 @@
-import { l as languages } from "./index-BJNR4hRK.js";
+import { l as languages } from "./index-5azC4yNn.js";
 const EMPTY_ELEMENTS = [
   "area",
   "base",

package/out/renderer/assets/{tsMode-WiO8CDaI.js → tsMode-mfv6mHOv.js}

@@ -1,4 +1,4 @@
-import { c as createWebWorker, e as editor, U as Uri, a as MarkerTag, M as MarkerSeverity, l as languages, t as typescriptDefaults, R as Range } from "./index-BJNR4hRK.js";
+import { c as createWebWorker, e as editor, U as Uri, a as MarkerTag, M as MarkerSeverity, l as languages, t as typescriptDefaults, R as Range } from "./index-5azC4yNn.js";
 class WorkerManager {
   constructor(_modeId, _defaults) {
     this._modeId = _modeId;

package/out/renderer/assets/{typescript-ZBQlq256.js → typescript-CDA0Hhef.js}

@@ -1,4 +1,4 @@
-import { l as languages } from "./index-BJNR4hRK.js";
+import { l as languages } from "./index-5azC4yNn.js";
 const conf = {
   wordPattern: /(-?\d*\.\d\w*)|([^\`\~\!\@\#\%\^\&\*\(\)\-\=\+\[\{\]\}\\\|\;\:\'\"\,\.\<\>\/\?\s]+)/g,
   comments: {

package/out/renderer/assets/{xml-DBaLJlQU.js → xml-BU0voRuq.js}

@@ -1,4 +1,4 @@
-import { l as languages } from "./index-BJNR4hRK.js";
+import { l as languages } from "./index-5azC4yNn.js";
 const conf = {
   comments: {
     blockComment: ["<!--", "-->"]

package/out/renderer/assets/{yaml-CId9skah.js → yaml-qzFWnaZJ.js}

@@ -1,4 +1,4 @@
-import { l as languages } from "./index-BJNR4hRK.js";
+import { l as languages } from "./index-5azC4yNn.js";
 const conf = {
   comments: {
     lineComment: "#"

package/out/renderer/index.html

@@ -4,10 +4,42 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>ctlsurf-worker</title>
+  <!-- Stamp the theme before the first paint. This has to be an inline,
+       synchronous script in <head>: reading the pref over IPC (or waiting for
+       the bundle) would let one frame of the wrong theme through, which reads
+       as a flash every launch. lib/theme.ts owns the same key afterwards. -->
+  <script>
+    (function () {
+      var DARK = 'tokyo-night', LIGHT = 'tokyo-day'
+      var a = null
+      try {
+        var raw = localStorage.getItem('ctlsurf.appearance')
+        if (raw) a = JSON.parse(raw)
+        else {
+          // Migrate the original system/light/dark preference. lib/theme.ts
+          // performs the same mapping; both must agree or the first frame
+          // disagrees with the second.
+          var legacy = localStorage.getItem('ctlsurf.theme')
+          if (legacy === 'light') a = { sync: false, theme: LIGHT }
+          else if (legacy === 'dark') a = { sync: false, theme: DARK }
+        }
+      } catch (e) { /* private mode, or corrupt JSON */ }
+      var prefersLight = window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches
+      var id
+      if (a && a.sync === false) id = a.theme
+      else if (a) id = prefersLight ? a.light : a.dark
+      else id = prefersLight ? LIGHT : DARK
+      document.documentElement.setAttribute('data-theme', id || (prefersLight ? LIGHT : DARK))
+    })()
+  </script>
   <!-- Boot splash styles are inlined here so they paint on the first frame,
        before the JS bundle and styles.css have loaded. Without this the window
-       shows an empty dark pane while React mounts and the startup IPC runs. -->
+       shows an empty dark pane while React mounts and the startup IPC runs.
+       They cannot use the tokens in styles.css for the same reason, so the two
+       palettes are repeated here — keep them in step with :root there. -->
   <style>
+    :root { color-scheme: dark }
+    :root[data-theme='tokyo-day'], :root[data-theme='catppuccin-latte'] { color-scheme: light }
     #boot-splash {
       position: fixed;
       inset: 0;
@@ -48,9 +80,34 @@
       letter-spacing: 0.04em;
       color: #565f89;
     }
+    /* One rule per theme: the splash paints before styles.css exists, so it
+       cannot use the tokens. Keep in step with the :root blocks there. */
+    :root[data-theme='tokyo-day'] #boot-splash { background: #e9eaef; }
+    :root[data-theme='tokyo-day'] .boot-spinner {
+      border-color: rgba(46, 125, 233, 0.22);
+      border-top-color: #2e7de9;
+    }
+    :root[data-theme='tokyo-day'] .boot-splash-title { color: #1b1e33; }
+    :root[data-theme='tokyo-day'] .boot-splash-label { color: #6b7190; }
+
+    :root[data-theme='catppuccin-mocha'] #boot-splash { background: #1e1e2e; }
+    :root[data-theme='catppuccin-mocha'] .boot-spinner {
+      border-color: rgba(137, 180, 250, 0.22);
+      border-top-color: #89b4fa;
+    }
+    :root[data-theme='catppuccin-mocha'] .boot-splash-title { color: #cdd6f4; }
+    :root[data-theme='catppuccin-mocha'] .boot-splash-label { color: #7f849c; }
+
+    :root[data-theme='catppuccin-latte'] #boot-splash { background: #eff1f5; }
+    :root[data-theme='catppuccin-latte'] .boot-spinner {
+      border-color: rgba(30, 102, 245, 0.22);
+      border-top-color: #1e66f5;
+    }
+    :root[data-theme='catppuccin-latte'] .boot-splash-title { color: #2f3145; }
+    :root[data-theme='catppuccin-latte'] .boot-splash-label { color: #7c7f93; }
   </style>
-  <script type="module" crossorigin src="./assets/index-BJNR4hRK.js"></script>
-  <link rel="stylesheet" crossorigin href="./assets/index-BpCORklm.css">
+  <script type="module" crossorigin src="./assets/index-5azC4yNn.js"></script>
+  <link rel="stylesheet" crossorigin href="./assets/index-3sFJEz7i.css">
 </head>
 <body>
   <div id="boot-splash">

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@phenx-inc/ctlsurf",
-  "version": "0.14.2",
-  "description": "Agent-agnostic terminal and desktop app for ctlsurf \u2014 run Claude Code, Codex, or any coding agent with live session logging and remote control",
+  "version": "0.15.0",
+  "description": "Agent-agnostic terminal and desktop app for ctlsurf — run Claude Code, Codex, or any coding agent with live session logging and remote control",
   "main": "out/main/index.js",
   "bin": {
     "ctlsurf": "./bin/ctlsurf-worker.js",
@@ -15,7 +15,8 @@
     "src/",
     "package.json",
     "electron-vite.config.ts",
-    "tsconfig*.json"
+    "tsconfig*.json",
+    "THIRD-PARTY-NOTICES.md"
   ],
   "scripts": {
     "dev": "electron-vite dev",
@@ -84,4 +85,4 @@
   "bugs": {
     "email": "phenx@phenx.io"
   }
-}
+}

package/src/main/index.ts

@@ -1,4 +1,4 @@
-import { app, BrowserWindow, ipcMain, dialog, nativeImage, clipboard } from 'electron'
+import { app, BrowserWindow, ipcMain, dialog, nativeImage, clipboard, nativeTheme } from 'electron'
 import path from 'path'
 import fs from 'fs'
 
@@ -233,12 +233,24 @@ const orchestrator = new Orchestrator(
 // ─── Window ───────────────────────────────────────
 
 function createWindow(): void {
+  // Replay last session's appearance choice before the window exists, so the
+  // frame Electron paints before the renderer loads is already the right
+  // colour. The renderer re-asserts this over app:setAppearance once booted.
+  const saved = orchestrator.settingsData
+  if (saved.themeSource === 'light' || saved.themeSource === 'dark' || saved.themeSource === 'system') {
+    nativeTheme.themeSource = saved.themeSource
+  }
+  const savedBg = typeof saved.themeBackground === 'string' && /^#[0-9a-fA-F]{6}$/.test(saved.themeBackground)
+    ? saved.themeBackground
+    : null
+
   mainWindow = new BrowserWindow({
     width: 1400,
     height: 900,
     minWidth: 600,
     minHeight: 400,
     title: 'ctlsurf-worker',
+    backgroundColor: savedBg ?? (nativeTheme.shouldUseDarkColors ? '#1a1b26' : '#e9eaef'),
     titleBarStyle: 'hiddenInset',
     icon: path.join(__dirname, '../../resources/icon.png'),
     webPreferences: {
@@ -388,6 +400,45 @@ ipcMain.handle('app:homePath', () => app.getPath('home'))
 ipcMain.handle('app:cwd', () => process.env.CTLSURF_WORKER_CWD || process.cwd())
 ipcMain.handle('app:projectName', () => orchestrator.projectName)
 
+// The renderer owns the theme preference (see lib/theme.ts) and mirrors it here
+// so the parts Chromium paints for us — native form controls, scrollbars, and
+// the window background between loads — match the app chrome. Also remembered
+// so the next launch can paint the right backgroundColor before the renderer
+// has booted.
+// The renderer owns the appearance preference (see renderer/lib/theme.ts) and
+// mirrors it here for two reasons: so Chromium paints native form controls,
+// scrollbars and the pre-load window background to match, and so createWindow
+// can pick the right backgroundColor on the *next* launch, before the renderer
+// has booted. It is also the recovery source if localStorage is ever wiped.
+ipcMain.handle('app:getAppearance', () => ({
+  pref: orchestrator.settingsData.appearance ?? null,
+}))
+
+ipcMain.handle('app:setAppearance', (_e, data: {
+  pref?: unknown
+  source?: 'system' | 'light' | 'dark'
+  background?: string
+}) => {
+  const source = data?.source
+  if (source !== 'system' && source !== 'light' && source !== 'dark') return { ok: false }
+  nativeTheme.themeSource = source
+
+  const settings = orchestrator.settingsData
+  if (data.pref && typeof data.pref === 'object') {
+    settings.appearance = data.pref as Record<string, unknown>
+  }
+  settings.themeSource = source
+  // Only trust a plain hex colour — this value is handed straight to Electron.
+  if (typeof data.background === 'string' && /^#[0-9a-fA-F]{6}$/.test(data.background)) {
+    settings.themeBackground = data.background
+    if (mainWindow && !mainWindow.isDestroyed()) {
+      mainWindow.setBackgroundColor(data.background)
+    }
+  }
+  orchestrator.saveSettings()
+  return { ok: true }
+})
+
 ipcMain.handle('app:browseCwd', async () => {
   if (!mainWindow) return null
   const result = await dialog.showOpenDialog(mainWindow, {

package/src/main/orchestrator.ts

@@ -43,6 +43,14 @@ export interface SettingsData {
   // src/main/observer/. Requires an Anthropic API key for Tiers 1–2;
   // without one it still records the ledger, Tier-0 tags, and spans.
   observer?: ObserverSettings
+  // Mirror of the renderer's appearance preference (localStorage owns the
+  // authoritative copy — index.html has to read it before first paint). Kept
+  // here so createWindow can pick the right backgroundColor on the next launch
+  // before the renderer boots, and so the choice survives a wiped localStorage.
+  // Shape is owned by renderer/lib/theme.ts; the main process only round-trips it.
+  appearance?: Record<string, unknown>
+  themeSource?: 'system' | 'light' | 'dark'
+  themeBackground?: string
 }
 
 export interface OrchestratorEvents {

package/src/preload/index.ts

@@ -79,6 +79,16 @@ const api = {
   },
   browseCwd: (): Promise<string | null> =>
     ipcRenderer.invoke('app:browseCwd'),
+  // Mirror the renderer's appearance preference onto Chromium's nativeTheme and
+  // persist it. localStorage stays the source of truth (see renderer/lib/theme.ts);
+  // this copy backs the pre-load window background and localStorage recovery.
+  setAppearance: (data: {
+    pref: unknown
+    source: 'system' | 'light' | 'dark'
+    background: string
+  }): Promise<{ ok: boolean }> => ipcRenderer.invoke('app:setAppearance', data),
+  getAppearance: (): Promise<{ pref: unknown }> =>
+    ipcRenderer.invoke('app:getAppearance'),
 
   // Clipboard — write a rich-HTML table (+ plain-text fallback) for email paste.
   // `ok` reflects a read-back verification in the main process, not just that the

package/src/renderer/App.tsx

@@ -50,6 +50,8 @@ declare global {
       getProjectName: () => Promise<string | null>
       onProjectChanged: (callback: (name: string | null) => void) => () => void
       browseCwd: () => Promise<string | null>
+      setAppearance?: (data: { pref: unknown; source: 'system' | 'light' | 'dark'; background: string }) => Promise<{ ok: boolean }>
+      getAppearance?: () => Promise<{ pref: unknown }>
       getSetting: (key: string) => Promise<string | null>
       setSetting: (key: string, value: string) => Promise<{ ok: boolean }>
       getAllSettings: () => Promise<Record<string, string | null>>

package/src/renderer/components/CtlsurfPanel.tsx

@@ -190,7 +190,7 @@ export function CtlsurfPanel({ navigate }: CtlsurfPanelProps) {
           />
         ) : (
           <div className="ctlsurf-webview-loading">
-            <span style={{ color: '#565f89', fontSize: '13px' }}>Loading ctlsurf...</span>
+            <span style={{ color: 'var(--text-muted)', fontSize: '13px' }}>Loading ctlsurf...</span>
           </div>
         )}
       </div>

package/src/renderer/components/EditorPanel.tsx

@@ -6,6 +6,8 @@ import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
 import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
 import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
 import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
+import { useAppearance } from '../lib/theme'
+import { THEMES } from '../lib/themes'
 
 // Configure Monaco workers for Vite
 self.MonacoEnvironment = {
@@ -21,6 +23,31 @@ self.MonacoEnvironment = {
 // Use local monaco instead of CDN
 loader.config({ monaco })
 
+// One Monaco theme per scheme. Monaco only ships 'vs' / 'vs-dark', so each
+// scheme inherits the matching base (keeping its syntax highlighting) and
+// overrides the surfaces, which are what would otherwise clash with the
+// surrounding chrome. Registered at module load — Monaco resolves a theme by
+// name at render time, so these must exist before the first <Editor> mounts.
+for (const t of THEMES) {
+  monaco.editor.defineTheme(`ctlsurf-${t.id}`, {
+    base: t.editor.base,
+    inherit: true,
+    rules: [],
+    colors: {
+      'editor.background': t.editor.background,
+      'editor.foreground': t.editor.foreground,
+      'editor.lineHighlightBackground': t.editor.lineHighlight,
+      'editor.selectionBackground': t.editor.selection,
+      'editorLineNumber.foreground': t.swatch.surface,
+      'editorLineNumber.activeForeground': t.swatch.accent,
+      'editorGutter.background': t.editor.background,
+      'editorWidget.background': t.editor.lineHighlight,
+      'editorCursor.foreground': t.terminal.cursor,
+      'scrollbarSlider.background': `${t.swatch.surface}99`,
+    },
+  })
+}
+
 interface FileEntry {
   name: string
   path: string
@@ -86,6 +113,7 @@ interface EditorPanelProps {
 }
 
 export function EditorPanel({ cwd }: EditorPanelProps) {
+  const { theme } = useAppearance()
   const [rootEntries, setRootEntries] = useState<FileEntry[]>([])
   const [openFile, setOpenFile] = useState<string | null>(null)
   const [fileContent, setFileContent] = useState<string>('')
@@ -208,7 +236,7 @@ export function EditorPanel({ cwd }: EditorPanelProps) {
                 language={getLanguage(openFile)}
                 value={fileContent}
                 onChange={(val) => { setFileContent(val || ''); setModified(true) }}
-                theme="vs-dark"
+                theme={`ctlsurf-${theme.id}`}
                 options={{
                   minimap: { enabled: false },
                   fontSize: 13,

package/src/renderer/components/ObserverPanel.tsx

@@ -43,13 +43,15 @@ const SENSITIVITY_LEVELS: Array<{ value: Sensitivity; label: string; hint: strin
   { value: 'all', label: 'All signals', hint: 'Everything, including low-confidence observations' },
 ]
 
+// Resolved from the token layer so both themes get a legible variant; see the
+// :root blocks in styles.css.
 const SEVERITY_COLORS: Record<string, string> = {
-  info: '#7aa2f7',
-  warn: '#e0af68',
-  high: '#ff9e64',
-  critical: '#f7768e',
+  info: 'var(--accent)',
+  warn: 'var(--warning)',
+  high: 'var(--sev-high)',
+  critical: 'var(--danger)',
 }
-const DIGEST_COLOR = '#bb9af7'
+const DIGEST_COLOR = 'var(--sev-digest)'
 
 function EyeIcon({ size = 16 }: { size?: number }) {
   return (
@@ -67,9 +69,14 @@ function formatTime(iso: string): string {
   return d.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' })
 }
 
+// `${color}55` only worked while the colours were hex literals; token
+// references have to be blended for real.
+const tint = (color: string, pct: number): string =>
+  `color-mix(in srgb, ${color} ${pct}%, transparent)`
+
 function Chip({ color, label }: { color: string; label: string }) {
   return (
-    <span className="obs-chip" style={{ color, borderColor: `${color}55`, background: `${color}14` }}>
+    <span className="obs-chip" style={{ color, borderColor: tint(color, 33), background: tint(color, 8) }}>
       <span className="obs-chip-dot" style={{ background: color }} />
       {label}
     </span>

package/src/renderer/components/SettingsDialog.tsx

@@ -1,4 +1,37 @@
 import { useState, useEffect } from 'react'
+import { useAppearance } from '../lib/theme'
+import { THEMES, themesByMode, type ThemeDef } from '../lib/themes'
+
+// A tile per scheme. The swatch is drawn from the theme's own literal colours
+// (not the active tokens) so each preview shows what it actually is.
+function ThemeGrid({ themes, value, onChange }: {
+  themes: ThemeDef[]
+  value: string
+  onChange: (id: string) => void
+}) {
+  return (
+    <div className="theme-options" role="radiogroup">
+      {themes.map(t => (
+        <button
+          key={t.id}
+          type="button"
+          role="radio"
+          aria-checked={value === t.id}
+          title={t.name}
+          className={`theme-option ${value === t.id ? 'active' : ''}`}
+          onClick={() => onChange(t.id)}
+        >
+          <span className="theme-swatch" style={{ background: t.swatch.bg }} aria-hidden="true">
+            <span className="theme-swatch-bar" style={{ background: t.swatch.surface }} />
+            <span className="theme-swatch-dot" style={{ background: t.swatch.accent }} />
+            <span className="theme-swatch-line" style={{ background: t.swatch.text }} />
+          </span>
+          <span className="theme-option-label">{t.name}</span>
+        </button>
+      ))}
+    </div>
+  )
+}
 
 interface ProfileSummary {
   id: string
@@ -21,6 +54,7 @@ interface SettingsDialogProps {
 }
 
 export function SettingsDialog({ open, onClose }: SettingsDialogProps) {
+  const { appearance, theme, update: updateAppearance } = useAppearance()
   const [profileList, setProfileList] = useState<ProfileListResponse | null>(null)
   const [activeProfileId, setActiveProfileId] = useState('production')
   const [editingId, setEditingId] = useState<string | null>(null)
@@ -157,6 +191,54 @@ export function SettingsDialog({ open, onClose }: SettingsDialogProps) {
       <div className="settings-dialog" onClick={e => e.stopPropagation()}>
         <h3>Settings</h3>
 
+        {!editingId && (
+          // ─── Appearance (global) ───────────────
+          <div className="settings-section">
+            <h4>Appearance</h4>
+            <p className="settings-hint">
+              Applies everywhere, including the terminal and code editor.
+            </p>
+
+            <label className="settings-checkbox">
+              <input
+                type="checkbox"
+                checked={appearance.sync}
+                onChange={e => updateAppearance({ sync: e.target.checked })}
+              />
+              <span>Sync with system appearance</span>
+              <span className="settings-hint">
+                Switches between your light and dark picks as the OS changes.
+              </span>
+            </label>
+
+            {appearance.sync ? (
+              <>
+                <div className="theme-group-label">Light</div>
+                <ThemeGrid
+                  themes={themesByMode('light')}
+                  value={appearance.light}
+                  onChange={id => updateAppearance({ light: id })}
+                />
+                <div className="theme-group-label">Dark</div>
+                <ThemeGrid
+                  themes={themesByMode('dark')}
+                  value={appearance.dark}
+                  onChange={id => updateAppearance({ dark: id })}
+                />
+                <span className="settings-hint">
+                  Currently {theme.name}.
+                </span>
+              </>
+            ) : (
+              <ThemeGrid
+                themes={THEMES}
+                value={appearance.theme}
+                onChange={id => updateAppearance({ theme: id })}
+              />
+            )}
+          </div>
+        )}
+
         {editingId ? (
           // ─── Profile Edit Form ─────────────────
           <div className="settings-section">

package/src/renderer/components/TerminalPanel.tsx

@@ -5,6 +5,7 @@ import { WebLinksAddon } from '@xterm/addon-web-links'
 import '@xterm/xterm/css/xterm.css'
 import { convertToEmailTable } from '../lib/tableToHtml'
 import { speech } from '../lib/speech'
+import { currentTheme, subscribeTheme } from '../lib/theme'
 
 // Show a transient toast in the active terminal panel. Broadcast as a window
 // event so module-level helpers (which have no component scope) can trigger it.
@@ -137,6 +138,16 @@ type TermState = {
 
 const _terminals = new Map<string, TermState>()
 
+// Terminals are cached here and outlive the components that render them, so
+// the palette swap is driven from module scope rather than a component effect.
+// xterm paints to a canvas, so the CSS tokens in styles.css cannot reach it —
+// each theme carries its own 16-colour palette in lib/themes.ts.
+subscribeTheme((theme) => {
+  for (const state of _terminals.values()) {
+    state.terminal.options.theme = theme.terminal
+  }
+})
+
 // Within a couple of lines of the bottom still counts as "at bottom", so a
 // small redraw delta doesn't strand the view just shy of the end.
 function isAtBottom(terminal: Terminal): boolean {
@@ -197,28 +208,7 @@ function getOrCreateTerminal(tabId: string, onExit: (tabId: string) => void): {
     macOptionClickForcesSelection: true,
     fontSize: 14,
     fontFamily: "'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', monospace",
-    theme: {
-      background: '#1a1b26',
-      foreground: '#a9b1d6',
-      cursor: '#c0caf5',
-      selectionBackground: '#33467C',
-      black: '#15161e',
-      red: '#f7768e',
-      green: '#9ece6a',
-      yellow: '#e0af68',
-      blue: '#7aa2f7',
-      magenta: '#bb9af7',
-      cyan: '#7dcfff',
-      white: '#a9b1d6',
-      brightBlack: '#414868',
-      brightRed: '#f7768e',
-      brightGreen: '#9ece6a',
-      brightYellow: '#e0af68',
-      brightBlue: '#7aa2f7',
-      brightMagenta: '#bb9af7',
-      brightCyan: '#7dcfff',
-      brightWhite: '#c0caf5'
-    },
+    theme: currentTheme().terminal,
     scrollback: 10000,
     scrollOnUserInput: true,
     allowTransparency: false

package/src/renderer/components/TicketPanel.tsx

@@ -2,20 +2,27 @@ import { useState, useEffect, useCallback } from 'react'
 
 interface Option { value: string; color: string }
 
+// Token references rather than literals, so the pills follow the theme. They
+// are also alpha-blended below via color-mix, which needs a var() to mix into.
 const STATUS_OPTIONS: Option[] = [
-  { value: 'Open', color: '#7aa2f7' },
-  { value: 'In Progress', color: '#e0af68' },
-  { value: 'Blocked', color: '#f7768e' },
-  { value: 'Done', color: '#9ece6a' },
+  { value: 'Open', color: 'var(--accent)' },
+  { value: 'In Progress', color: 'var(--warning)' },
+  { value: 'Blocked', color: 'var(--danger)' },
+  { value: 'Done', color: 'var(--success)' },
 ]
 const PRIORITY_OPTIONS: Option[] = [
-  { value: 'Low', color: '#565f89' },
-  { value: 'Med', color: '#e0af68' },
-  { value: 'High', color: '#f7768e' },
+  { value: 'Low', color: 'var(--text-muted)' },
+  { value: 'Med', color: 'var(--warning)' },
+  { value: 'High', color: 'var(--danger)' },
 ]
 
 const colorOf = (opts: Option[], value: string): string =>
-  opts.find(o => o.value === value)?.color ?? '#565f89'
+  opts.find(o => o.value === value)?.color ?? 'var(--text-muted)'
+
+// `${color}1f` used to work because the colours were hex literals; tokens need
+// a real blend.
+const tint = (color: string, pct: number): string =>
+  `color-mix(in srgb, ${color} ${pct}%, transparent)`
 
 interface Ticket {
   id: string
@@ -100,7 +107,7 @@ function Segmented({ options, value, onChange }: SegmentedProps) {
             key={o.value}
             type="button"
             className={`ticket-seg ${active ? 'active' : ''}`}
-            style={active ? { borderColor: o.color, color: o.color, background: `${o.color}1f` } : undefined}
+            style={active ? { borderColor: o.color, color: o.color, background: tint(o.color, 12) } : undefined}
             onClick={() => onChange(o.value)}
           >
             <span className="ticket-seg-dot" style={{ background: o.color }} />
@@ -132,7 +139,7 @@ function TicketCard({ ticket, onClick, onSend }: { ticket: Ticket; onClick: () =
         </div>
         <span
           className="ticket-card-pri"
-          style={{ color: colorOf(PRIORITY_OPTIONS, ticket.priority), borderColor: `${colorOf(PRIORITY_OPTIONS, ticket.priority)}66` }}
+          style={{ color: colorOf(PRIORITY_OPTIONS, ticket.priority), borderColor: tint(colorOf(PRIORITY_OPTIONS, ticket.priority), 40) }}
         >
           {ticket.priority}
         </span>