@bakapiano/ccsm 0.8.4 → 0.9.0

package/CLAUDE.md

@@ -16,12 +16,12 @@ at-a-glance list and a snapshot/restore safety net.
 
 The single most important fact about ccsm v0.8+ is that **the frontend
 is no longer bundled into the npm package** in production. It lives at
-`https://bakapiano.github.io/cssm/v1/`, served by GitHub Pages, deployed
+`https://bakapiano.github.io/ccsm/v1/`, served by GitHub Pages, deployed
 via the workflow at `.github/workflows/deploy-pages.yml`.
 
 ```
 ┌── browser ────────────────────────────┐
-│  https://bakapiano.github.io/cssm/v1/    ← static frontend
+│  https://bakapiano.github.io/ccsm/v1/    ← static frontend
 └────────────┬──────────────────────────┘
              │  fetch /api/*   (CORS, allow-list)
              │  ws://localhost:7777/ws/*
@@ -62,7 +62,7 @@ Terminal returns immediately (the server is spawned detached). Close
 the window → server saves a final snapshot and exits within ~12s.
 
 If you don't want the auto-opened window (e.g. you live in the PWA),
-just visit `https://bakapiano.github.io/cssm/v1/` — when backend is
+just visit `https://bakapiano.github.io/ccsm/v1/` — when backend is
 down you see an OfflineBanner with a **Start ccsm** button.
 
 Default port `7777`, default workDir `~/ccsm-workspaces`. Config +

package/README.md

@@ -4,11 +4,11 @@ A single pane over every live Claude Code session on your machine.
 Hosted web UI + tiny local Node daemon. Windows-first; cross-platform
 in progress.
 
-[![open](https://img.shields.io/badge/open-bakapiano.github.io%2Fcssm%2Fv1-1a1815?style=flat-square)](https://bakapiano.github.io/cssm/v1/)
+[![open](https://img.shields.io/badge/open-bakapiano.github.io%2Fccsm%2Fv1-1a1815?style=flat-square)](https://bakapiano.github.io/ccsm/v1/)
 
 ```
 ┌── browser ─────────────────────────┐
-│  https://bakapiano.github.io/cssm/v1/   ← static frontend
+│  https://bakapiano.github.io/ccsm/v1/   ← static frontend
 └────────────┬───────────────────────┘
              │  fetch /api/*   (CORS)
              │  ws://localhost:7777/ws/*
@@ -51,7 +51,7 @@ gets registered.
 ccsm                       # starts the backend, opens the frontend
 ```
 
-Or just visit **https://bakapiano.github.io/cssm/v1/** in any browser.
+Or just visit **https://bakapiano.github.io/ccsm/v1/** in any browser.
 If the backend isn't running, you'll see a "Backend not running" banner
 with a **Start ccsm** button — click it, Windows asks once whether to
 open the `ccsm://` handler (check "Always allow"), and the backend
@@ -119,7 +119,7 @@ ccsm/
 
 ## How "wake on click" works
 
-The hosted frontend (https://bakapiano.github.io/cssm/v1/) lives entirely
+The hosted frontend (https://bakapiano.github.io/ccsm/v1/) lives entirely
 in the browser sandbox — it cannot spawn processes. So when the backend
 is down, the OfflineBanner's **Start ccsm** is a plain
 `<a href="ccsm://start">`. The OS hands that off to a per-user URL
@@ -151,7 +151,7 @@ Every gracefulShutdown saves a final snapshot before exit.
 ## Dev
 
 ```bash
-git clone https://github.com/bakapiano/cssm
+git clone https://github.com/bakapiano/ccsm
 cd cssm
 npm install
 node server.js
@@ -175,8 +175,8 @@ build feature-detects via `/api/capabilities`, so a slightly older
 backend still works as long as it advertises the needed feature.
 
 ```
-https://bakapiano.github.io/cssm/v1/   ← current
-https://bakapiano.github.io/cssm/v2/   ← future, when /api breaking-changes
+https://bakapiano.github.io/ccsm/v1/   ← current
+https://bakapiano.github.io/ccsm/v2/   ← future, when /api breaking-changes
 ```
 
 Installed PWAs are pinned to whichever path they were installed from.

package/bin/ccsm.js

@@ -176,7 +176,7 @@ function isSameVersion(running) {
   }
   console.log(`ccsm started · v${ready.version}`);
   console.log(`backend:  http://localhost:${actualPort}${actualPort !== port ? `  (preferred ${port} was taken)` : ''}`);
-  console.log(`frontend: https://bakapiano.github.io/cssm/v1/`);
+  console.log(`frontend: https://bakapiano.github.io/ccsm/v1/`);
   console.log(`logs:     ${LOG}`);
 
   // First-run hint — printed once, then a marker file makes us quiet.

package/lib/config.js

@@ -21,6 +21,11 @@ const DEFAULTS = {
   claudeCommand: 'claude',
   terminal: 'wt',
   commandShell: 'pwsh',
+  // 'wt'  — open a new Windows Terminal window (or whatever `terminal` is set to)
+  // 'web' — spawn in-process PTY, attach via xterm.js in the Terminals tab
+  // Used as the default for new sessions, resume, continue, finder.
+  // Per-launch radio in the UI can still override.
+  defaultTerminalMode: 'wt',
   autoFocusOnLaunch: true,
   focusMovesToCenter: false,
   // 'app'  — Edge/Chrome --app=<url> chromeless window (looks like a desktop app)

package/lib/webTerminal.js

@@ -33,6 +33,8 @@ function genId() {
   return 'web-' + Date.now().toString(36) + '-' + Math.random().toString(36).slice(2, 8);
 }
 
+
+
 // Spawn a new PTY. `command` and `args` are passed straight to node-pty.
 // `meta` is whatever the caller wants surfaced to the UI (title, cwd, etc).
 // Throws if node-pty isn't available.
@@ -43,12 +45,25 @@ function spawn({ command, args = [], cwd, env, cols = 120, rows = 30, meta = {}
     throw err;
   }
   const id = genId();
-  const proc = pty.spawn(command, args, {
+  // useConpty: new ConPTY API (Win10 1809+). node-pty defaults this true on
+  // Windows, but spell it out so we know we're on the modern path.
+  // useConptyDll: opt-in to the newest, separately-versioned conpty.dll
+  // (node-pty 1.0+, Windows 10 1809+ if the dll is present). This is the
+  // path VSCode uses (see vscode/src/vs/platform/terminal/node/terminalProcess.ts)
+  // — it has a larger stdin buffer and doesn't split bracketed-paste
+  // payloads across multiple child-process reads, so claude code's
+  // [Pasted text] chip detection actually fires.
+  const ptyOpts = {
     name: 'xterm-256color',
     cols, rows,
     cwd: cwd ? path.resolve(cwd) : process.cwd(),
     env: { ...process.env, ...(env || {}) },
-  });
+  };
+  if (process.platform === 'win32') {
+    ptyOpts.useConpty = true;
+    ptyOpts.useConptyDll = true;
+  }
+  const proc = pty.spawn(command, args, ptyOpts);
   const entry = {
     id,
     pty: proc,
@@ -110,7 +125,14 @@ function attach(id, ws) {
     if (entry.exitedAt) return;  // PTY is dead, ignore further input
     switch (event.type) {
       case 'input':
-        if (typeof event.data === 'string') entry.pty.write(event.data);
+        if (typeof event.data === 'string') {
+          if (process.env.CCSM_DEBUG_PASTE === '1') {
+            const d = event.data;
+            const hex = Buffer.from(d, 'utf8').toString('hex').match(/.{1,2}/g).join(' ');
+            console.log(`[pty.write id=${id}] len=${d.length} hex=${hex.slice(0, 400)}${hex.length > 400 ? '...' : ''}`);
+          }
+          entry.pty.write(event.data);
+        }
         break;
       case 'resize':
         if (Number(event.cols) > 0 && Number(event.rows) > 0) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bakapiano/ccsm",
-  "version": "0.8.4",
+  "version": "0.9.0",
   "description": "Claude Code Session Manager — Windows web UI to manage many concurrent claude sessions: live list, snapshot/restore, focus existing window, new session in an isolated workspace with repo clones",
   "license": "MIT",
   "main": "server.js",
@@ -44,12 +44,12 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/bakapiano/cssm.git"
+    "url": "git+https://github.com/bakapiano/ccsm.git"
   },
   "bugs": {
-    "url": "https://github.com/bakapiano/cssm/issues"
+    "url": "https://github.com/bakapiano/ccsm/issues"
   },
-  "homepage": "https://github.com/bakapiano/cssm#readme",
+  "homepage": "https://github.com/bakapiano/ccsm#readme",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"

package/public/css/forms.css

@@ -280,3 +280,54 @@ input[type="checkbox"]:checked::after {
 .repos-table thead th:last-child,
 .repos-table tbody td:last-child { padding-right: var(--s-2); }
 .repos-table tbody td input { font-size: 12px; max-width: none; }
+
+/* Theme accent picker (Configure tab). 8 swatches + native color picker
+   + hex input + reset. Swatches are filled circles; the active one wears
+   a subtle ring in --ink so it pops on any accent. */
+.accent-picker {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-3);
+}
+.accent-swatches {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--s-2);
+}
+.accent-swatch {
+  appearance: none;
+  width: 24px;
+  height: 24px;
+  border-radius: 999px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  padding: 0;
+  transition: transform .12s ease, box-shadow .12s ease;
+}
+.accent-swatch:hover { transform: scale(1.08); }
+.accent-swatch.is-active {
+  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink);
+}
+.accent-custom {
+  display: flex;
+  align-items: center;
+  gap: var(--s-2);
+}
+.accent-custom input[type="color"] {
+  width: 36px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: var(--r-sm);
+  background: var(--bg-elev);
+  cursor: pointer;
+}
+.accent-hex {
+  font-family: var(--mono);
+  font-size: 12px;
+  width: 96px;
+  padding: 4px 8px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-sm);
+  background: var(--bg-elev);
+}

package/public/css/layout.css

@@ -9,6 +9,11 @@
 .app:has(.sidebar[data-collapsed="true"]) {
   grid-template-columns: var(--sidebar-w-collapsed) 1fr;
 }
+/* While dragging the sidebar resize handle, kill the transition so the
+   grid tracks pointermove pixel-for-pixel instead of lagging behind. */
+body.is-resizing-sidebar .app {
+  transition: none;
+}
 
 .main {
   display: flex;

package/public/css/sidebar.css

@@ -9,7 +9,10 @@
   display: flex;
   flex-direction: column;
   padding: var(--s-4) var(--s-3);
-  overflow: hidden;
+  /* visible: let the resize handle (positioned at right: -3px) overflow the
+     sidebar's right edge. We instead clip the things that USED to need
+     this via the .sidebar-nav scroll region. */
+  overflow: visible;
   transition: padding .25s cubic-bezier(.4, 0, .2, 1);
 }
 .sidebar[data-collapsed="true"] {
@@ -163,3 +166,37 @@
 .sidebar[data-collapsed="true"] .collapse-toggle .nav-icon {
   transform: rotate(180deg);
 }
+
+/* Drag-to-resize handle. Sits absolutely against the sidebar's right
+   border so the cursor target spans the full height. 6px wide hit area
+   centered on the visible 1px border — easy to grab without bumping
+   into adjacent layout. */
+.sidebar-resize-handle {
+  position: absolute;
+  top: 0;
+  right: -3px;
+  width: 6px;
+  height: 100%;
+  cursor: col-resize;
+  z-index: 5;
+  touch-action: none;
+  /* Subtle hover indicator: deepens the border-right color on hover so the
+     user knows the edge is interactive. */
+  background: transparent;
+  transition: background .12s ease;
+}
+.sidebar-resize-handle:hover,
+body.is-resizing-sidebar .sidebar-resize-handle {
+  background: linear-gradient(to right, transparent 0, transparent 2px,
+                              var(--ink-mid) 2px, var(--ink-mid) 3px,
+                              transparent 3px);
+}
+/* While dragging, freeze global cursor + suppress text selection so the
+   whole page tracks resize cleanly even if pointer leaves the handle. */
+body.is-resizing-sidebar {
+  cursor: col-resize !important;
+  user-select: none;
+}
+body.is-resizing-sidebar * {
+  cursor: col-resize !important;
+}

package/public/css/terminals.css

@@ -91,6 +91,50 @@
   flex: 1;
   min-height: 0;
   width: 100%;
+  /* IME composition (Chinese/Japanese pinyin) lives in absolutely-positioned
+     .xterm-helper-textarea + .composition-view that grow with the composed
+     string. Near the right edge they overflow the viewport and trigger a
+     horizontal scrollbar that visually "pushes" the layout. Clip here so
+     the overflow is silently absorbed instead of expanding the page.
+     Do NOT touch the textarea/composition-view's own text properties —
+     xterm relies on their single-line behaviour to keep IME events firing
+     correctly (forcing pre-wrap / break-all eats compositionupdate events
+     in Chromium and Chinese input stops working entirely). */
+  overflow: hidden;
+  contain: layout;
+}
+/* While the user is composing (IME), pin the helper textarea to the right
+   edge of the terminal so it grows leftward instead of pushing the layout
+   rightward. Only touches positioning — NOT width / wrap / max-width, which
+   would break Chromium's compositionupdate event flow and stop Chinese
+   input from working. The class is toggled by TerminalView.js. */
+.terminal-host.is-composing .xterm-helper-textarea {
+  left: auto !important;
+  right: 0 !important;
+  text-align: right;
+  /* xterm un-hides the textarea during composition so the user can see the
+     composed string inline. We've moved it to the right edge to stop it
+     pushing layout — but that means the composed pinyin would now visibly
+     appear on the right. Hide its glyphs (caret + text) so the user only
+     sees the OS-native IME candidate popup, which floats independently
+     and is unaffected. */
+  color: transparent !important;
+  caret-color: transparent !important;
+  background: transparent !important;
+  text-shadow: none !important;
+}
+/* xterm also overlays a .composition-view (a small box at the cursor with
+   the in-progress string + a gold caret using THEME.cursor). We can't
+   display:none it — Chromium needs it in the layout tree to keep the IME
+   compositionupdate events flowing — but we can make it visually invisible
+   while leaving it laid out. */
+.terminal-host .composition-view {
+  opacity: 0 !important;
+  color: transparent !important;
+  background: transparent !important;
+  border-color: transparent !important;
+  box-shadow: none !important;
+  pointer-events: none;
 }
 /* Don't override xterm's background — its renderer (canvas/WebGL) assumes
    an opaque surface and ghosts on scroll if we force transparent. The

package/public/css/wco.css

@@ -58,6 +58,34 @@ body.is-app .sidebar-brand {
 }
 body.is-app .page-head {
   padding-top: var(--s-8); /* 32px = old main.pt */
+  /* Reserve space on the right for the OS window controls (close /
+     maximize / minimize) that float over the top-right of every
+     chromeless app window — both --app= (display-mode: standalone)
+     and PWA. Without this, the server-status pill + Refresh button
+     slide under those controls and stop being clickable. ~150px covers
+     three Windows controls + a little breathing room; macOS traffic
+     lights are on the left so this is harmless there. The WCO override
+     below uses the precise env() value when the API is available. */
+  padding-right: 150px;
+}
+
+/* In app/PWA mode, hide the in-page title/subtitle entirely. The sidebar
+   nav already tells the user which section they're on, and the OS title
+   bar (or the floating WCO controls) is the only chrome we want. This
+   reclaims a chunky 60+ px of vertical real estate at the top of every
+   tab — really noticeable in the Terminals tab where xterm benefits
+   from every pixel. The page-head wrapper survives because it still
+   hosts the status pill + Refresh button on the right and remains
+   draggable. */
+body.is-app .page-title,
+body.is-app .page-subtitle {
+  display: none;
+}
+body.is-app .page-head {
+  padding-bottom: 0;
+  border-bottom: 0;
+  align-items: center;
+  min-height: 28px;
 }
 
 /* WCO-only · the OS title bar is fully gone, so right-pad the page-head
@@ -66,5 +94,6 @@ body.is-app .page-head {
 @media (display-mode: window-controls-overlay) {
   .page-head {
     padding-right: calc(var(--s-10) + 100vw - env(titlebar-area-width, 100vw));
+    min-height: env(titlebar-area-height, 32px);
   }
 }

package/public/index.html

@@ -11,7 +11,7 @@
     <title>CCSM — Claude CLI Sessions Manager</title>
     <!-- All asset paths are RELATIVE so the same index.html works when
          served from localhost:7777/ (backend bundle) AND from
-         https://bakapiano.github.io/cssm/v1/ (GH Pages hosted). -->
+         https://bakapiano.github.io/ccsm/v1/ (GH Pages hosted). -->
     <link rel="icon" type="image/svg+xml" href="./favicon.svg" />
     <link rel="manifest" href="./manifest.webmanifest" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -43,7 +43,9 @@
           "htm":                "https://esm.sh/htm@3.1.1",
           "@xterm/xterm":       "https://esm.sh/@xterm/xterm@5.5.0",
           "@xterm/addon-fit":   "https://esm.sh/@xterm/addon-fit@0.10.0?deps=@xterm/xterm@5.5.0",
-          "@xterm/addon-web-links": "https://esm.sh/@xterm/addon-web-links@0.11.0?deps=@xterm/xterm@5.5.0"
+          "@xterm/addon-web-links": "https://esm.sh/@xterm/addon-web-links@0.11.0?deps=@xterm/xterm@5.5.0",
+          "@xterm/addon-clipboard": "https://esm.sh/@xterm/addon-clipboard@0.1.0?deps=@xterm/xterm@5.5.0",
+          "@xterm/addon-webgl": "https://esm.sh/@xterm/addon-webgl@0.18.0?deps=@xterm/xterm@5.5.0"
         }
       }
     </script>

package/public/js/actions.js

@@ -1,8 +1,8 @@
 // Mutation actions shared by SessionsPage, FavoritesTable etc. — each
 // optimistically updates the relevant signal and rolls back on error.
 
-import { favorites, labels, sessions, recent } from './state.js';
-import { api, loadSessions, loadRecent } from './api.js';
+import { favorites, labels, sessions, recent, config, capabilities, activeTerminalId, selectTab } from './state.js';
+import { api, loadSessions, loadRecent, loadWebTerminals } from './api.js';
 import { setToast } from './toast.js';
 import { ccsmPrompt } from './dialog.js';
 
@@ -68,10 +68,20 @@ export async function focusSession(sessionId) {
 
 export async function resumeSession(sessionId, cwd, { kind = 'resume' } = {}) {
   if (!cwd) return setToast('no cwd for this session', 'error');
+  const wantWeb = capabilities.value?.webTerminal
+    && (config.value?.defaultTerminalMode || 'wt') === 'web';
+  const terminal = wantWeb ? 'web' : 'wt';
   try {
-    await api('POST', `/api/sessions/${sessionId}/resume`, { cwd });
-    const verb = kind === 'continue' ? 'continuing' : 'opening wt';
-    setToast(`${verb} · ${sessionId.slice(0, 8)}…`);
+    const r = await api('POST', `/api/sessions/${sessionId}/resume`, { cwd, terminal });
+    if (r.launched?.mode === 'web') {
+      setToast(`${kind === 'continue' ? 'continuing' : 'resuming'} in web · ${sessionId.slice(0, 8)}…`);
+      await loadWebTerminals();
+      if (r.launched.id) activeTerminalId.value = r.launched.id;
+      selectTab('terminals');
+    } else {
+      const verb = kind === 'continue' ? 'continuing' : 'opening wt';
+      setToast(`${verb} · ${sessionId.slice(0, 8)}…`);
+    }
     if (kind === 'continue') {
       setTimeout(() => loadSessions().catch(() => {}), 3000);
       setTimeout(() => loadRecent().catch(() => {}), 4000);
@@ -80,8 +90,18 @@ export async function resumeSession(sessionId, cwd, { kind = 'resume' } = {}) {
 }
 
 export async function runFinder() {
+  const wantWeb = capabilities.value?.webTerminal
+    && (config.value?.defaultTerminalMode || 'wt') === 'web';
+  const terminal = wantWeb ? 'web' : 'wt';
   try {
-    await api('POST', '/api/sessions/finder');
-    setToast('finder session launching in a new wt window');
+    const r = await api('POST', '/api/sessions/finder', { terminal });
+    if (r.launched?.mode === 'web') {
+      await loadWebTerminals();
+      if (r.launched.id) activeTerminalId.value = r.launched.id;
+      selectTab('terminals');
+      setToast('finder launching in web terminal');
+    } else {
+      setToast('finder session launching in a new wt window');
+    }
   } catch (e) { setToast(e.message, 'error'); }
 }

package/public/js/components/NewSessionModal.js

@@ -5,8 +5,8 @@
 import { html } from '../html.js';
 import { useEffect, useState } from 'preact/hooks';
 import { signal } from '@preact/signals';
-import { modalOpen, config } from '../state.js';
-import { api, loadWorkspaces } from '../api.js';
+import { modalOpen, config, capabilities, activeTerminalId, selectTab } from '../state.js';
+import { api, loadWorkspaces, loadWebTerminals } from '../api.js';
 import { setToast } from '../toast.js';
 import { streamNewSession, resetProgress } from '../streaming.js';
 import { IconClose } from '../icons.js';
@@ -51,29 +51,40 @@ function ModalBody() {
 
   const onLaunch = async () => {
     const repos = [...modalSelected.value];
-    if (repos.length === 0) return setToast('select at least one repo', 'error');
     setBusy(true);
     setResult('');
     resetProgress(repos, ROOT_ID);
+    const wantWeb = capabilities.value?.webTerminal
+      && (config.value?.defaultTerminalMode || 'wt') === 'web';
+    const terminal = wantWeb ? 'web' : 'wt';
     try {
       const final = await streamNewSession(
-        { repos, workspace: workspace || undefined },
+        { repos, workspace: workspace || undefined, terminal },
         {
           progressRootId: ROOT_ID,
           onMeta: (ev) => {
             if (ev.type === 'workspace') {
               setResult(`workspace: ${ev.workspace.path}${ev.created ? ' · newly created' : ''}`);
             } else if (ev.type === 'launched') {
-              setResult(`terminal launching · pid ${ev.launched.pid} · ${ev.launched.terminal}`);
+              const l = ev.launched || {};
+              if (l.mode === 'web') setResult(`web terminal launched · pid ${l.pid} · id ${l.id}`);
+              else setResult(`terminal launching · pid ${l.pid} · ${l.terminal}`);
             }
           },
         },
       );
       if (final.success) {
         const summary = (final.cloneResults || []).map((c) => `${c.repo}: ${c.action || c.error}`).join(' · ');
-        setResult(`launched in ${final.workspace.path}${final.created ? ' · newly created' : ''} — ${summary}`);
+        setResult(`launched in ${final.workspace.path}${final.created ? ' · newly created' : ''}${summary ? ' — ' + summary : ''}`);
         setToast(`launched · ${final.workspace.name}`);
-        setTimeout(close, 1500);
+        if (terminal === 'web' && final.launched?.id) {
+          activeTerminalId.value = final.launched.id;
+          await loadWebTerminals();
+          selectTab('terminals');
+          modalOpen.value = false;
+        } else {
+          setTimeout(close, 1500);
+        }
       } else {
         setResult(`error: ${final.error}`);
         setToast(final.error || 'new session failed', 'error');

package/public/js/components/OfflineBanner.js

@@ -1,5 +1,5 @@
 // Shown when the backend probe fails. The hosted frontend (running at
-// https://bakapiano.github.io/cssm/v1/) can't spawn processes directly,
+// https://bakapiano.github.io/ccsm/v1/) can't spawn processes directly,
 // so we surface a ccsm://start link instead. Windows / OS will hand that
 // off to the registered protocol handler (ccsm.cmd), which spawns the
 // backend silently. Our health probe picks it up on the next tick and

package/public/js/components/Sidebar.js

@@ -1,7 +1,7 @@
 import { html } from '../html.js';
 import {
   activeTab, sidebarCollapsed, configDirty, sessions, webTerminals, capabilities,
-  selectTab, toggleSidebar,
+  selectTab, toggleSidebar, setSidebarWidth, SIDEBAR_MIN, SIDEBAR_MAX,
 } from '../state.js';
 import {
   IconSessions, IconLaunch, IconTerminal, IconConfigure, IconInfo,
@@ -23,6 +23,29 @@ function NavItem({ tab, icon, label, badge, dirty }) {
 export function Sidebar() {
   const collapsed = sidebarCollapsed.value;
 
+  // Drag-to-resize handle. Pointer events let one handler cover mouse,
+  // touch, pen uniformly + setPointerCapture means dragging continues
+  // even if cursor leaves the 4px-wide handle. Collapsed sidebars don't
+  // expose a handle — Collapse-toggle is the only way out/in.
+  const onResizeStart = (ev) => {
+    if (collapsed) return;
+    ev.preventDefault();
+    const el = ev.currentTarget;
+    el.setPointerCapture(ev.pointerId);
+    document.body.classList.add('is-resizing-sidebar');
+    const move = (e) => setSidebarWidth(e.clientX);
+    const up = (e) => {
+      el.releasePointerCapture(ev.pointerId);
+      document.body.classList.remove('is-resizing-sidebar');
+      el.removeEventListener('pointermove', move);
+      el.removeEventListener('pointerup', up);
+      el.removeEventListener('pointercancel', up);
+    };
+    el.addEventListener('pointermove', move);
+    el.addEventListener('pointerup', up);
+    el.addEventListener('pointercancel', up);
+  };
+
   return html`
     <aside class="sidebar" data-collapsed=${collapsed ? 'true' : 'false'}>
       <div class="sidebar-brand">
@@ -48,5 +71,13 @@ export function Sidebar() {
           <span class="nav-label">Collapse</span>
         </button>
       </div>
+
+      ${!collapsed ? html`
+        <div class="sidebar-resize-handle" role="separator" aria-orientation="vertical"
+             aria-label="resize sidebar"
+             title="drag to resize · double-click to reset"
+             onPointerDown=${onResizeStart}
+             onDblClick=${() => setSidebarWidth(232)}></div>
+      ` : null}
     </aside>`;
 }

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

package/server.js

@@ -101,7 +101,7 @@ app.use((req, res, next) => {
 // so a contributor can iterate without pushing to GH Pages; (b) hot-reload
 // SSE endpoint that watches public/ for changes. CCSM_NO_DEV=1 disables
 // both explicitly. In production (npm-installed), backend is API-only —
-// frontend lives at https://bakapiano.github.io/cssm/v1/.
+// frontend lives at https://bakapiano.github.io/ccsm/v1/.
 const IS_DEV = !__dirname.includes(`${path.sep}node_modules${path.sep}`) && process.env.CCSM_NO_DEV !== '1';
 
 if (IS_DEV) {
@@ -313,13 +313,17 @@ app.post('/api/sessions/new', async (req, res) => {
 
   try {
     const cfg = await loadConfig();
-    const wantedNames = Array.isArray(req.body && req.body.repos)
+    const explicitRepos = Array.isArray(req.body && req.body.repos);
+    const wantedNames = explicitRepos
       ? req.body.repos
       : cfg.repos.filter((r) => r.defaultSelected).map((r) => r.name);
 
     const wantedRepos = cfg.repos.filter((r) => wantedNames.includes(r.name));
-    if (wantedRepos.length === 0) {
-      return fail('No repos selected and no defaults available');
+    // Allow launching with zero repos — caller explicitly passed [] (or no
+    // defaults exist). The workspace is still created; claude just opens
+    // in an empty directory.
+    if (wantedRepos.length === 0 && !explicitRepos && wantedNames.length > 0) {
+      return fail('No matching repos found');
     }
 
     let workspace;
@@ -433,8 +437,26 @@ app.post('/api/sessions/new', async (req, res) => {
 });
 
 // ---- launch finder session (a claude session in the ccsm data dir pre-pointed at session data) ----
-app.post('/api/sessions/finder', asyncH(async (_req, res) => {
+app.post('/api/sessions/finder', asyncH(async (req, res) => {
   const cfg = await loadConfig();
+  const mode = (req.body && req.body.terminal)
+    || cfg.defaultTerminalMode
+    || 'wt';
+  if (mode === 'web') {
+    if (!webTerminal.available) {
+      return res.status(400).json({ error: 'node-pty unavailable · cannot launch finder in web terminal' });
+    }
+    const cmd = cfg.claudeCommand || 'claude';
+    const wrap = (cfg.commandShell || 'pwsh') === 'powershell' ? 'powershell.exe' : 'pwsh.exe';
+    const promptArg = cfg.finderPrompt ? ` '${cfg.finderPrompt.replace(/'/g, "''")}'` : '';
+    const entry = webTerminal.spawn({
+      command: wrap,
+      args: ['-NoExit', '-NoLogo', '-Command', `Set-Location -LiteralPath '${DATA_DIR.replace(/'/g, "''")}'; & '${cmd.replace(/'/g, "''")}'${promptArg}`],
+      cwd: DATA_DIR,
+      meta: { title: 'ccsm finder', cwd: DATA_DIR },
+    });
+    return res.json({ launched: { mode: 'web', id: entry.id, pid: entry.meta.pid, terminal: 'web' }, cwd: DATA_DIR, prompt: cfg.finderPrompt });
+  }
   const beforeHwnds = await snapshotWindowsOf(processNameFor(cfg.terminal) || 'WindowsTerminal.exe');
   const launched = launchNewClaude({
     cwd: DATA_DIR,
@@ -449,7 +471,7 @@ app.post('/api/sessions/finder', asyncH(async (_req, res) => {
     beforeHwnds,
     autoFocus: cfg.autoFocusOnLaunch !== false,
   });
-  res.json({ launched, cwd: DATA_DIR, prompt: cfg.finderPrompt });
+  res.json({ launched: { mode: 'wt', ...launched }, cwd: DATA_DIR, prompt: cfg.finderPrompt });
 }));
 
 // ---- resume single session ----
@@ -458,6 +480,23 @@ app.post('/api/sessions/:sessionId/resume', asyncH(async (req, res) => {
   const cwd = req.body && req.body.cwd;
   if (!cwd) return res.status(400).json({ error: 'cwd required in body' });
   const cfg = await loadConfig();
+  const mode = (req.body && req.body.terminal)
+    || cfg.defaultTerminalMode
+    || 'wt';
+  if (mode === 'web') {
+    if (!webTerminal.available) {
+      return res.status(400).json({ error: 'node-pty unavailable · cannot resume in web terminal' });
+    }
+    const cmd = cfg.claudeCommand || 'claude';
+    const wrap = (cfg.commandShell || 'pwsh') === 'powershell' ? 'powershell.exe' : 'pwsh.exe';
+    const entry = webTerminal.spawn({
+      command: wrap,
+      args: ['-NoExit', '-NoLogo', '-Command', `Set-Location -LiteralPath '${cwd.replace(/'/g, "''")}'; & '${cmd.replace(/'/g, "''")}' --resume '${sessionId.replace(/'/g, "''")}'`],
+      cwd,
+      meta: { title: `resume ${sessionId.slice(0, 8)}`, cwd, sessionId },
+    });
+    return res.json({ launched: { mode: 'web', id: entry.id, pid: entry.meta.pid, terminal: 'web' } });
+  }
   const beforeHwnds = await snapshotWindowsOf(processNameFor(cfg.terminal) || 'WindowsTerminal.exe');
   const launched = launchResume({
     cwd,
@@ -471,7 +510,7 @@ app.post('/api/sessions/:sessionId/resume', asyncH(async (req, res) => {
     beforeHwnds,
     autoFocus: cfg.autoFocusOnLaunch !== false,
   });
-  res.json({ launched });
+  res.json({ launched: { mode: 'wt', ...launched } });
 }));
 
 // ---- focus the wt window that's already hosting this session ----
@@ -645,7 +684,10 @@ function openInBrowser(url, mode) {
 
 (async () => {
   const cfg = await loadConfig();
-  const { server, port } = await listenWithFallback(cfg.port);
+  // CCSM_PORT env var wins over config — handy for running a dev instance
+  // on a non-default port (e.g. 7778) while a prod ccsm keeps 7777.
+  const preferredPort = process.env.CCSM_PORT ? Number(process.env.CCSM_PORT) : cfg.port;
+  const { server, port } = await listenWithFallback(preferredPort);
   currentPort = port;
 
   // WebSocket upgrade for /ws/terminal/:id → bridges xterm.js to a PTY
@@ -688,7 +730,7 @@ function openInBrowser(url, mode) {
   //   prod → hosted frontend on GH Pages (backend is API-only)
   const FRONTEND_URL = IS_DEV
     ? apiUrl
-    : 'https://bakapiano.github.io/cssm/v1/';
+    : 'https://bakapiano.github.io/ccsm/v1/';
   frontendUrl = FRONTEND_URL;
   console.log(`ccsm listening on ${apiUrl}${port !== cfg.port ? `  (requested ${cfg.port}, was taken)` : ''}`);
   console.log(`frontend at      ${FRONTEND_URL}`);