@bakapiano/ccsm 0.8.3 → 0.9.0

package/public/js/components/TerminalView.js

@@ -7,6 +7,8 @@ import { useEffect, useRef } from 'preact/hooks';
 import { Terminal } from '@xterm/xterm';
 import { FitAddon } from '@xterm/addon-fit';
 import { WebLinksAddon } from '@xterm/addon-web-links';
+import { ClipboardAddon } from '@xterm/addon-clipboard';
+import { WebglAddon } from '@xterm/addon-webgl';
 import { wsBase } from '../backend.js';
 
 // Dark xterm theme. We give the terminal a near-black ink background to
@@ -47,10 +49,43 @@ export function TerminalView({ terminalId }) {
       scrollback: 5000,
       allowProposedApi: true,
       theme: THEME,
+      // Modern keyboard protocols. Without these, xterm.js encodes
+      // Shift+Enter, Ctrl+Enter, Ctrl+Shift+key etc. the same as their
+      // unmodified versions (e.g. both Enter and Shift+Enter send \r),
+      // so TUIs like claude code can't tell them apart.
+      //
+      // - kittyKeyboard: opt-in protocol that apps enable per-session;
+      //   xterm emits CSI u sequences that uniquely encode every modifier
+      //   combo. Claude / vim / fish recognise it.
+      // - win32InputMode: ConPTY-specific protocol that surfaces raw
+      //   Win32 KEY_EVENT_RECORD to the child process, again preserving
+      //   modifier info. Required for full key fidelity on Windows.
+      // (Same set VSCode enables — see vscode/src/.../xtermTerminal.ts)
+      vtExtensions: {
+        kittyKeyboard: true,
+        win32InputMode: true,
+      },
     });
     const fit = new FitAddon();
     term.loadAddon(fit);
     term.loadAddon(new WebLinksAddon());
+    // OSC 52 clipboard integration. Lets TUI apps initiate clipboard reads/
+    // writes via escape sequences (e.g. `tmux set-buffer` or claude code
+    // saying "copied to clipboard"). Does NOT handle the browser-side
+    // Ctrl+V — that's still our document-level paste handler below.
+    term.loadAddon(new ClipboardAddon());
+    // WebGL renderer for performance. The default DOM renderer struggles
+    // when claude code produces dense color output (its diff panels,
+    // syntax-highlighted code). WebGL paints onto a canvas, much smoother
+    // at thousands-of-cells per frame. Falls back to DOM if WebGL is
+    // unavailable (e.g. older GPU, hardware accel disabled).
+    try {
+      const webgl = new WebglAddon();
+      webgl.onContextLoss(() => { try { webgl.dispose(); } catch {} });
+      term.loadAddon(webgl);
+    } catch (e) {
+      console.warn('[ccsm] WebGL addon failed, using DOM renderer:', e);
+    }
     term.open(hostRef.current);
     // Defer fit one tick so the container has measured layout
     requestAnimationFrame(() => { try { fit.fit(); } catch {} });
@@ -92,7 +127,138 @@ export function TerminalView({ terminalId }) {
     // give focus to terminal so user can type immediately
     term.focus();
 
+    // Explicit paste handler. xterm.js relies on the browser routing paste
+    // events to its hidden .xterm-helper-textarea, which only works if that
+    // textarea has focus at the moment of Ctrl+V. When the user clicks
+    // elsewhere then hits Ctrl+V over the terminal, or pastes via the
+    // right-click menu on the host div, the event lands on the host and
+    // xterm never sees it. Catch it here and route through term.paste()
+    // so xterm wraps the text in bracketed-paste markers when the app
+    // (claude code) has DECSET 2004 enabled — that's what makes claude
+    // show the "[Pasted text]" affordance instead of treating it as
+    // typed input.
+    const isOurs = () => {
+      const ae = document.activeElement;
+      return ae && host.contains(ae);
+    };
+    const doPaste = (text) => {
+      if (!text) return;
+      if (ws.readyState !== 1) return;
+      // Normalize line endings to \r (CR / Enter). This mirrors VSCode's
+      // terminal sendText path (terminalInstance.ts ~L1385):
+      //   text = text.replace(/\r?\n/g, '\r');
+      // Bracketed-paste markers protect each \r from being interpreted
+      // as a submit by the host app — claude / pwsh / vim all treat
+      // bracketed contents as opaque payload regardless of what's inside.
+      // Use \n instead and you trip apps that look for "real" line breaks.
+      const normalized = text.replace(/\r?\n/g, '\r');
+      // Wrap in bracketed-paste markers. Claude Code enables DECSET 2004
+      // on startup, so the markers let it detect a paste and render
+      // "[Pasted text]". If the host app doesn't have bracketed paste on,
+      // it just sees two ignored escape sequences plus the text.
+      const wrapped = `\x1b[200~${normalized}\x1b[201~`;
+      ws.send(JSON.stringify({ type: 'input', data: wrapped }));
+    };
+    const onPaste = async (ev) => {
+      if (!isOurs()) return;
+      let text = '';
+      if (ev.clipboardData) text = ev.clipboardData.getData('text');
+      if (!text && navigator.clipboard) {
+        try { text = await navigator.clipboard.readText(); } catch {}
+      }
+      if (!text) return;
+      ev.preventDefault();
+      ev.stopPropagation();
+      doPaste(text);
+    };
+    document.addEventListener('paste', onPaste, true);
+
+    // Ctrl/Cmd+V fallback for cases the paste event is suppressed (some
+    // extensions, or when our IME workaround moved the helper textarea
+    // off-screen and the browser refuses to fire paste on it).
+    // IMPORTANT: preventDefault must happen synchronously, BEFORE the
+    // await on navigator.clipboard.readText(). If we let the event tick
+    // run first, xterm's keystroke handler converts Ctrl+V into the raw
+    // ^V (0x16) control byte and ships it before our async paste even
+    // resolves.
+    const onKey = (ev) => {
+      const meta = ev.ctrlKey || ev.metaKey;
+      if (!meta || ev.key.toLowerCase() !== 'v') return;
+      if (ev.shiftKey || ev.altKey) return;
+      if (!isOurs()) return;
+      if (!navigator.clipboard?.readText) return;
+      ev.preventDefault();
+      ev.stopPropagation();
+      ev.stopImmediatePropagation();
+      navigator.clipboard.readText().then((text) => {
+        if (text) doPaste(text);
+      }).catch(() => {});
+    };
+    document.addEventListener('keydown', onKey, true);
+
+    // Shift+Enter / Ctrl+Enter → insert literal newline, don't submit.
+    // Background: xterm.js encodes BOTH plain Enter and Shift+Enter and
+    // Ctrl+Enter as \r (0x0D / CR). The kitty keyboard / win32 input
+    // protocols (enabled in vtExtensions above) WOULD distinguish them,
+    // but they're opt-in by the running app — claude code doesn't enable
+    // either, so we never get the distinction "for free".
+    //
+    // Send the LF (0x0A) explicitly. Claude code (and most modern TUIs)
+    // treat \n inside a prompt as a literal newline insert, \r as submit.
+    // Alt+Enter already works (xterm sends \x1b\r → meta-enter) so we
+    // leave that alone.
+    const onShiftEnter = (ev) => {
+      if (ev.key !== 'Enter') return;
+      if (!(ev.shiftKey || ev.ctrlKey)) return;
+      if (ev.metaKey || ev.altKey) return;
+      if (!isOurs()) return;
+      ev.preventDefault();
+      ev.stopPropagation();
+      ev.stopImmediatePropagation();
+      if (ws.readyState === 1) {
+        ws.send(JSON.stringify({ type: 'input', data: '\n' }));
+      }
+    };
+    document.addEventListener('keydown', onShiftEnter, true);
+
+    // IME fix: xterm positions .xterm-helper-textarea via `left: <col-px>`
+    // following the cursor. When the cursor is near the right edge and the
+    // user starts composing (e.g. Chinese pinyin), the textarea + native
+    // composition popup grow with the composed string and overflow the
+    // terminal host — which visually pushes the layout right. We can't cap
+    // width / change wrapping (that breaks Chromium's IME event flow), but
+    // we CAN re-anchor the textarea to the right edge while composing so
+    // it grows leftward instead. Toggling a class on the host is enough;
+    // the CSS in terminals.css does the rest.
+    const host = hostRef.current;
+    const onCompStart = () => {
+      if (host) host.classList.add('is-composing');
+      // The terminal cursor is rendered on canvas (THEME.cursor), so CSS
+      // can't hide it. Theme swap alone doesn't reliably stop the blink
+      // frame loop, so also issue the DECTCEM hide sequence which the
+      // renderer honours immediately.
+      try { term.options.theme = { ...THEME, cursor: 'transparent', cursorAccent: 'transparent' }; } catch {}
+      try { term.write('\x1b[?25l'); } catch {}
+    };
+    const onCompEnd   = () => {
+      if (host) host.classList.remove('is-composing');
+      try { term.options.theme = THEME; } catch {}
+      try { term.write('\x1b[?25h'); } catch {}
+    };
+    const helper = host?.querySelector('.xterm-helper-textarea');
+    if (helper) {
+      helper.addEventListener('compositionstart', onCompStart);
+      helper.addEventListener('compositionend', onCompEnd);
+    }
+
     return () => {
+      document.removeEventListener('paste', onPaste, true);
+      document.removeEventListener('keydown', onKey, true);
+      document.removeEventListener('keydown', onShiftEnter, true);
+      if (helper) {
+        helper.removeEventListener('compositionstart', onCompStart);
+        helper.removeEventListener('compositionend', onCompEnd);
+      }
       ro.disconnect();
       try { ws.close(); } catch {}
       try { term.dispose(); } catch {}

package/public/js/pages/AboutPage.js

@@ -4,7 +4,7 @@ import { setToast } from '../toast.js';
 import { Card } from '../components/Card.js';
 import { BrandMark, IconGithub, IconExternal } from '../icons.js';
 
-const REPO_URL = 'https://github.com/bakapiano/cssm';
+const REPO_URL = 'https://github.com/bakapiano/ccsm';
 const NPM_URL  = 'https://www.npmjs.com/package/@bakapiano/ccsm';
 
 async function onInstall() {

package/public/js/pages/ConfigurePage.js

@@ -5,7 +5,7 @@
 
 import { html } from '../html.js';
 import { useEffect, useState } from 'preact/hooks';
-import { config, terminals, configDirty } from '../state.js';
+import { config, terminals, configDirty, accentColor, setAccentColor, ACCENT_DEFAULT } from '../state.js';
 import { api, loadWorkspaces } from '../api.js';
 import { setToast } from '../toast.js';
 import { ccsmConfirm } from '../dialog.js';
@@ -22,6 +22,7 @@ function defaultsFrom(cfg) {
     claudeCommand: cfg.claudeCommand || 'claude',
     terminal: cfg.terminal,
     commandShell: cfg.commandShell || 'pwsh',
+    defaultTerminalMode: cfg.defaultTerminalMode || 'wt',
     autoFocusOnLaunch: cfg.autoFocusOnLaunch !== false,
     focusMovesToCenter: cfg.focusMovesToCenter === true,
     browserMode: cfg.browserMode || (cfg.autoOpenBrowser === false ? 'none' : 'app'),
@@ -62,6 +63,7 @@ export function ConfigurePage() {
       claudeCommand: (draft.claudeCommand || 'claude').trim(),
       terminal: draft.terminal || 'wt',
       commandShell: draft.commandShell || 'pwsh',
+      defaultTerminalMode: draft.defaultTerminalMode === 'web' ? 'web' : 'wt',
       browserMode: draft.browserMode || 'app',
       workDir: (draft.workDir || '').trim(),
       repos: (cfg.repos || []).filter((r) => r.name && r.url),
@@ -127,6 +129,15 @@ export function ConfigurePage() {
                  onInput=${(e) => update({ claudeCommand: e.target.value })} />
           <span class="hint">alias / function / exe name</span>
         </label>
+        <label class="field">
+          <span class="label">Default mode <span class="hint inline">(new · resume · continue · finder)</span></span>
+          <select class="input" value=${draft.defaultTerminalMode}
+                  onChange=${(e) => update({ defaultTerminalMode: e.target.value })}>
+            <option value="wt">system terminal · open a real ${draft.terminal || 'wt'} window</option>
+            <option value="web">web · in-page xterm under the Terminals tab</option>
+          </select>
+          <span class="hint">web requires node-pty; per-launch radios can override</span>
+        </label>
         <label class="field">
           <span class="label">Terminal</span>
           <select class="input" value=${draft.terminal}
@@ -176,6 +187,12 @@ export function ConfigurePage() {
           <span class="hint">passed as initial prompt to the finder session</span>
         </label>
 
+        <div class="field">
+          <span class="label">Theme accent</span>
+          <${AccentPicker} />
+          <span class="hint">also tints the OS title bar (theme-color)</span>
+        </div>
+
         <div class="field full">
           <div class="repos-head">
             <span class="label">Repositories</span>
@@ -192,3 +209,57 @@ export function ConfigurePage() {
       </div>
     </${Card}>`;
 }
+
+// Curated preset palette + free hex input. Each preset is a hand-picked
+// brand color that reads well on the cream surface. Selecting a swatch
+// applies immediately via setAccentColor (which writes CSS vars +
+// localStorage) — no save button needed since this is a per-browser
+// UI preference, not part of the server-side config.
+const PRESETS = [
+  { name: 'Claude copper', hex: '#b3614a' },   // default
+  { name: 'Anthropic ink', hex: '#1a1815' },
+  { name: 'Ocean',         hex: '#2f6fa3' },
+  { name: 'Forest',        hex: '#3f7a4a' },
+  { name: 'Amber',         hex: '#c4892b' },
+  { name: 'Berry',         hex: '#a44b78' },
+  { name: 'Slate',         hex: '#4a5563' },
+  { name: 'Crimson',       hex: '#b73f3f' },
+];
+
+function AccentPicker() {
+  const current = accentColor.value;
+  const [text, setText] = useState(current);
+  // Keep the text input in sync if the signal changes from elsewhere
+  // (preset click, reset). useState would otherwise drift on subsequent
+  // applies. eslint-disable-next-line — intentionally re-syncing on prop change.
+  useEffect(() => { setText(current); }, [current]);
+
+  const onText = (e) => {
+    const v = e.target.value.trim();
+    setText(v);
+    // Apply live only when it's a valid hex; otherwise let the user
+    // keep typing without flicker.
+    if (/^#[0-9a-fA-F]{6}$/.test(v)) setAccentColor(v);
+  };
+
+  return html`
+    <div class="accent-picker">
+      <div class="accent-swatches">
+        ${PRESETS.map((p) => html`
+          <button key=${p.hex} class=${`accent-swatch${current.toLowerCase() === p.hex.toLowerCase() ? ' is-active' : ''}`}
+                  style=${`background:${p.hex}`}
+                  title=${`${p.name} · ${p.hex}`}
+                  aria-label=${p.name}
+                  onClick=${() => setAccentColor(p.hex)}></button>`)}
+      </div>
+      <div class="accent-custom">
+        <input type="color" value=${current}
+               onInput=${(e) => setAccentColor(e.target.value)} />
+        <input type="text" class="accent-hex" value=${text}
+               spellcheck="false" maxlength="7"
+               onInput=${onText} placeholder="#rrggbb" />
+        <button class="action subtle small"
+                onClick=${() => setAccentColor(ACCENT_DEFAULT)}>Reset</button>
+      </div>
+    </div>`;
+}

package/public/js/pages/LaunchPage.js

@@ -1,12 +1,13 @@
 import { html } from '../html.js';
 import { useState } from 'preact/hooks';
 import { signal } from '@preact/signals';
-import { capabilities, activeTerminalId, selectTab } from '../state.js';
-import { loadWorkspaces, loadWebTerminals } from '../api.js';
+import { capabilities, activeTerminalId, selectTab, config } from '../state.js';
+import { api, loadWorkspaces, loadWebTerminals } from '../api.js';
 import { setToast } from '../toast.js';
 import { streamNewSession, resetProgress } from '../streaming.js';
 import { Card } from '../components/Card.js';
 import { RepoPicker } from '../components/RepoPicker.js';
+import { ReposEditor, addEmptyRepo } from '../components/ReposEditor.js';
 import { WorkspacePicker } from '../components/WorkspacePicker.js';
 import { ProgressList } from '../components/ProgressList.js';
 import { WorkspacesGrid, WorkspacesHeader } from '../components/WorkspacesGrid.js';
@@ -17,16 +18,30 @@ const inlineSelected = signal(new Set());
 
 function NewSessionCard() {
   const [workspace, setWorkspace] = useState('');
-  // 'web' = run inside this page (in-process PTY · bridges to xterm.js)
-  // 'wt'  = open a new Windows Terminal window
-  const initialMode = capabilities.value.webTerminal ? 'web' : 'wt';
-  const [terminal, setTerminal] = useState(initialMode);
   const [result, setResult] = useState('');
   const [busy, setBusy] = useState(false);
+  const [reposSavedAt, setReposSavedAt] = useState('');
+  const repos = config.value?.repos || [];
+  const hasRepos = repos.length > 0;
+  // Always follow the global Configure → "Default mode" setting. The
+  // per-launch picker was removed; users who want a one-off override
+  // change the global setting first. This keeps "new" / "resume" /
+  // "continue" / "finder" all consistent.
+  const cfgDefault = config.value?.defaultTerminalMode || 'wt';
+  const terminal = capabilities.value.webTerminal ? cfgDefault : 'wt';
+
+  const onSaveRepos = async () => {
+    try {
+      const cfg = await api('PUT', '/api/config', config.value);
+      config.value = cfg;
+      setReposSavedAt(`saved · ${new Date().toLocaleTimeString(undefined, { hour12: false })}`);
+      setToast('repos saved');
+    } catch (e) { setToast(e.message, 'error'); }
+  };
 
   const onLaunch = async () => {
     const repos = [...inlineSelected.value];
-    if (repos.length === 0) return setToast('select at least one repo', 'error');
+    // Allow zero-repo launches: workspace is created empty, claude opens there.
     setBusy(true);
     setResult('');
     resetProgress(repos, ROOT_ID);
@@ -77,24 +92,21 @@ function NewSessionCard() {
              meta=${html`Picks an unused workspace, clones missing repos, opens <code>claude</code> in a fresh terminal.`}>
       <div class="form-row">
         <span class="form-label">Repos</span>
-        <${RepoPicker} selectedSig=${inlineSelected} />
+        ${hasRepos
+          ? html`<${RepoPicker} selectedSig=${inlineSelected} />`
+          : html`<span class="muted-text">no repos configured · add one below, or launch with no repos for an empty workspace</span>`}
       </div>
-      ${capabilities.value.webTerminal ? html`
-        <div class="form-row">
-          <span class="form-label">Open in</span>
-          <div class="radio-row">
-            <label class=${`radio${terminal === 'web' ? ' is-checked' : ''}`}>
-              <input type="radio" name="terminal" value="web"
-                     checked=${terminal === 'web'} onChange=${() => setTerminal('web')} />
-              this page
-            </label>
-            <label class=${`radio${terminal === 'wt' ? ' is-checked' : ''}`}>
-              <input type="radio" name="terminal" value="wt"
-                     checked=${terminal === 'wt'} onChange=${() => setTerminal('wt')} />
-              wt window
-            </label>
+      <details class="repos-inline-config" open=${!hasRepos}>
+        <summary>Manage repos</summary>
+        <div class="repos-inline-body">
+          <${ReposEditor} />
+          <div class="repos-inline-actions">
+            <button class="action small" onClick=${() => addEmptyRepo()}>+ Add repo</button>
+            <button class="action small primary" onClick=${onSaveRepos}>Save changes</button>
+            <span class="muted-text">${reposSavedAt}</span>
           </div>
-        </div>` : null}
+        </div>
+      </details>
       <div class="form-row">
         <label class="form-label">Workspace</label>
         <${WorkspacePicker} value=${workspace} onChange=${setWorkspace} />

package/public/js/state.js

@@ -22,6 +22,8 @@ export const serverHealth = signal({ state: 'connecting' });
 // ── ui state (persisted in localStorage where noted) ───────────
 export const activeTab        = signal('sessions');
 export const sidebarCollapsed = signal(false);
+export const sidebarWidth     = signal(232);     // px when expanded, persisted in localStorage
+export const accentColor      = signal('#b3614a'); // user-chosen brand accent, persisted
 // fold state for the three cards on the Sessions tab
 export const cardFolded       = signal({ favorites: false, sessions: false, recent: false });
 export const configDirty      = signal(false);
@@ -54,10 +56,29 @@ export const TAB_HEADINGS = {
 
 // ── persistence helpers (localStorage) ──────────────────────────
 const LS_SIDEBAR = 'ccsm.sidebar-collapsed';
+const LS_SIDEBAR_W = 'ccsm.sidebar-width';
+const LS_ACCENT = 'ccsm.accent';
 const LS_FOLD = (k) => `ccsm.fold.${k}`;
 
+// Resizable sidebar width (when not collapsed). Clamp range matches the
+// CSS min/max — too narrow truncates labels, too wide eats main content.
+export const SIDEBAR_MIN = 180;
+export const SIDEBAR_MAX = 400;
+export const SIDEBAR_DEFAULT = 232;
+export const ACCENT_DEFAULT = '#b3614a';
+
 export function loadPersisted() {
   sidebarCollapsed.value = localStorage.getItem(LS_SIDEBAR) === 'true';
+  const w = Number(localStorage.getItem(LS_SIDEBAR_W));
+  if (Number.isFinite(w) && w >= SIDEBAR_MIN && w <= SIDEBAR_MAX) {
+    sidebarWidth.value = w;
+  }
+  applySidebarWidthCssVar();
+  const a = localStorage.getItem(LS_ACCENT);
+  if (isHexColor(a)) {
+    accentColor.value = a;
+  }
+  applyAccentCssVars();
   const folds = { ...cardFolded.value };
   for (const k of Object.keys(folds)) {
     folds[k] = localStorage.getItem(LS_FOLD(k)) === '1';
@@ -68,6 +89,100 @@ export function loadPersisted() {
   if (TAB_HEADINGS[hash]) activeTab.value = hash;
 }
 
+// Push the current sidebar width into the CSS custom property so the grid
+// in layout.css picks it up. Called on load and whenever the user drags
+// the handle.
+function applySidebarWidthCssVar() {
+  document.documentElement.style.setProperty('--sidebar-w', `${sidebarWidth.value}px`);
+}
+
+export function setSidebarWidth(px) {
+  const clamped = Math.min(SIDEBAR_MAX, Math.max(SIDEBAR_MIN, Math.round(px)));
+  sidebarWidth.value = clamped;
+  applySidebarWidthCssVar();
+  localStorage.setItem(LS_SIDEBAR_W, String(clamped));
+}
+
+// ── theme accent ────────────────────────────────────────────────
+// We expose 4 derived CSS vars: --accent, --accent-deep, --accent-soft,
+// --accent-softer. The user only picks the base; deep/soft are computed
+// (darken / rgba alpha) so things stay self-consistent.
+function isHexColor(s) {
+  return typeof s === 'string' && /^#[0-9a-fA-F]{6}$/.test(s);
+}
+function hexToRgb(hex) {
+  const n = parseInt(hex.slice(1), 16);
+  return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
+}
+function rgbToHex({ r, g, b }) {
+  const h = (n) => Math.max(0, Math.min(255, Math.round(n))).toString(16).padStart(2, '0');
+  return `#${h(r)}${h(g)}${h(b)}`;
+}
+function darken({ r, g, b }, amount) {
+  // amount 0..1; pull each channel toward 0
+  return { r: r * (1 - amount), g: g * (1 - amount), b: b * (1 - amount) };
+}
+function lighten({ r, g, b }, amount) {
+  // amount 0..1; pull each channel toward 255
+  return { r: r + (255 - r) * amount, g: g + (255 - g) * amount, b: b + (255 - b) * amount };
+}
+// Mix the accent into white at a tiny ratio to get a faint warm/cool tint
+// for surfaces. `t` controls strength (0 = pure white, 1 = pure accent).
+// Surfaces use very low t (0.02–0.08) so the page reads as "white with
+// a hint of the brand color" rather than colored.
+function mixWithWhite({ r, g, b }, t) {
+  return { r: r * t + 255 * (1 - t), g: g * t + 255 * (1 - t), b: b * t + 255 * (1 - t) };
+}
+function applyAccentCssVars() {
+  const base = accentColor.value;
+  const rgb = hexToRgb(base);
+  const deep = rgbToHex(darken(rgb, 0.2));
+  const soft = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.10)`;
+  const softer = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.04)`;
+  // Surface tints derived from the accent. Each surface keeps its
+  // relative brightness from the original palette (cream → white → cream
+  // hover → cream active) but its hue follows the chosen accent. Mixed
+  // weights chosen to roughly match the warm copper defaults:
+  //   --bg        was #faf9f5  → t≈0.04
+  //   --bg-elev   was #ffffff  → t=0    (kept pure white)
+  //   --sidebar-hover  was #f0ece0  → t≈0.10
+  //   --sidebar-active was #e8e3d5  → t≈0.15
+  //   --border         was #e8e3d5  → t≈0.15
+  //   --border-soft    was #ece8da  → t≈0.12
+  //   --border-strong  was #d4cdb8  → t≈0.25
+  const bg           = rgbToHex(mixWithWhite(rgb, 0.04));
+  const sidebarHover = rgbToHex(mixWithWhite(rgb, 0.10));
+  const sidebarActive= rgbToHex(mixWithWhite(rgb, 0.15));
+  const border       = rgbToHex(mixWithWhite(rgb, 0.15));
+  const borderSoft   = rgbToHex(mixWithWhite(rgb, 0.12));
+  const borderStrong = rgbToHex(mixWithWhite(rgb, 0.25));
+  const root = document.documentElement.style;
+  root.setProperty('--accent', base);
+  root.setProperty('--accent-deep', deep);
+  root.setProperty('--accent-soft', soft);
+  root.setProperty('--accent-softer', softer);
+  root.setProperty('--bg', bg);
+  root.setProperty('--sidebar-bg', bg);
+  root.setProperty('--sidebar-hover', sidebarHover);
+  root.setProperty('--sidebar-active', sidebarActive);
+  root.setProperty('--border', border);
+  root.setProperty('--border-soft', borderSoft);
+  root.setProperty('--border-strong', borderStrong);
+  // --bg-elev stays pure white so cards "lift" off the tinted surface.
+  // Sync the meta theme-color to the tinted surface so the OS title bar
+  // matches what the user sees (was previously the raw accent — too
+  // saturated).
+  const meta = document.querySelector('meta[name="theme-color"]');
+  if (meta) meta.setAttribute('content', bg);
+}
+
+export function setAccentColor(hex) {
+  if (!isHexColor(hex)) return;
+  accentColor.value = hex;
+  applyAccentCssVars();
+  localStorage.setItem(LS_ACCENT, hex);
+}
+
 // ── actions ─────────────────────────────────────────────────────
 export function selectTab(name) {
   if (!TAB_HEADINGS[name]) name = 'sessions';

package/scripts/install.js

@@ -3,7 +3,7 @@
 
 // ccsm postinstall · Windows-only · runs after `npm install -g @bakapiano/ccsm`.
 // Registers the `ccsm://` URL protocol in HKCU so the hosted frontend
-// (https://bakapiano.github.io/cssm/v1/) can fire `<a href="ccsm://start">`
+// (https://bakapiano.github.io/ccsm/v1/) can fire `<a href="ccsm://start">`
 // from its OfflineBanner and have Windows spawn the backend on demand.
 //
 // Best-effort: any failure MUST NOT break npm install. Each step is in
@@ -104,8 +104,29 @@ try {
   registerProtocol(vbsPath);
   log(`launcher · ${vbsPath}`);
   log(`ccsm:// protocol registered (silent · via wscript.exe)`);
-  log('open https://bakapiano.github.io/cssm/v1/ and click "Start ccsm" on the offline banner to launch the backend.');
 } catch (e) {
   warn(`failed · ${e.message}`);
   warn('the hosted frontend\'s "Start ccsm" button will not be able to launch the backend. You can still run `ccsm` manually in a terminal.');
 }
+
+// Auto-launch ccsm after install so the user lands directly in the app
+// without needing a second command. Detached + windowsHide so the npm
+// install command returns immediately. Skip if CCSM_NO_AUTOLAUNCH=1 is
+// set (CI, headless setups).
+if (process.env.CCSM_NO_AUTOLAUNCH !== '1') {
+  try {
+    const { spawn } = require('node:child_process');
+    const child = spawn(ccsmCmd, [], {
+      detached: true,
+      stdio: 'ignore',
+      windowsHide: true,
+      shell: false,
+    });
+    child.unref();
+    log('launching ccsm now · check for the chromeless window');
+    log('(set CCSM_NO_AUTOLAUNCH=1 to skip this on future installs)');
+  } catch (e) {
+    warn(`auto-launch failed · ${e.message}`);
+    warn('run `ccsm` manually to start.');
+  }
+}