@bakapiano/ccsm 0.20.1 → 0.21.0

package/lib/codexSeed.js

@@ -14,8 +14,8 @@
 // Filename timestamp uses dashes-only (codex's convention), but it's
 // purely cosmetic — codex looks up sessions by UUID, not filename.
 //
-// CODEX_HOME resolution. Wrappers like `cxp` relocate CODEX_HOME to a
-// non-default dir (e.g. %LOCALAPPDATA%\gc2cc\codex-home) so the seed has
+// CODEX_HOME resolution. Some wrappers relocate CODEX_HOME to a
+// non-default dir (e.g. %LOCALAPPDATA%\<wrapper>\codex-home) so the seed has
 // to land there or `resume <id>` won't find it. We probe by running
 // `<cli.command> doctor` once per (command, shell) pair and parsing the
 // "CODEX_HOME ... (dir)" line out of its output. Cached for the life of
@@ -25,6 +25,7 @@ const fs = require('node:fs/promises');
 const path = require('node:path');
 const os = require('node:os');
 const { execFile } = require('node:child_process');
+const { spawnEnv } = require('./winPath');
 
 function isoForFilename(d = new Date()) {
   // 2026-05-25T15:39:11 → 2026-05-25T15-39-11 (codex strips ms + colons)
@@ -42,6 +43,9 @@ function execWithTimeout(exe, args, { timeoutMs = 8000 } = {}) {
       windowsHide: true,
       timeout: timeoutMs,
       maxBuffer: 1024 * 1024,
+      // Use the registry-merged user PATH so wrapper commands resolve
+      // even when the long-running server inherited a stale PATH at boot.
+      env: spawnEnv(),
     }, (err, stdout, stderr) => {
       resolve({ err, stdout: String(stdout || ''), stderr: String(stderr || '') });
     });
@@ -50,10 +54,14 @@ function execWithTimeout(exe, args, { timeoutMs = 8000 } = {}) {
 
 // Parse `CODEX_HOME    <path> (dir)` out of `codex doctor` output. Codex
 // formats it with variable whitespace; the `(dir)` / `(file)` suffix is
-// the easiest anchor to identify the path end.
+// the easiest anchor to identify the path end. Some wrappers colour
+// the label (`\x1b[7mCODEX_HOME\x1b[0m`), so strip ANSI SGR codes first —
+// otherwise `CODEX_HOME` is followed by an escape, not whitespace, and the
+// match fails.
 function parseCodexHomeFromDoctor(text) {
   if (!text) return null;
-  const m = text.match(/\bCODEX_HOME\s+(.+?)\s*\((?:dir|file)\)/);
+  const clean = String(text).replace(/\x1b\[[0-9;]*m/g, '');
+  const m = clean.match(/\bCODEX_HOME\s+(.+?)\s*\((?:dir|file)\)/);
   if (!m) return null;
   const p = m[1].trim();
   return p || null;
@@ -99,7 +107,7 @@ async function probeCodexHome({ command, shell }) {
   const inv = buildDoctorInvocation(command, shell);
   if (!inv) { codexHomeCache.set(key, null); return null; }
   const { stdout, stderr } = await execWithTimeout(inv.exe, inv.args);
-  // Wrappers like cxp print their banner to stderr; doctor itself prints
+  // Some wrappers print their banner to stderr; doctor itself prints
   // the CODEX_HOME line to stdout. Search both to be safe.
   const home = parseCodexHomeFromDoctor(stdout) || parseCodexHomeFromDoctor(stderr);
   codexHomeCache.set(key, home);
@@ -109,7 +117,7 @@ async function probeCodexHome({ command, shell }) {
 async function seedCodexSession({ id, cwd, cli }) {
   if (!id || !cwd) throw new Error('seedCodexSession: id and cwd required');
   // Resolution order:
-  //   1. `<cli.command> doctor` probe (handles wrappers like cxp that
+  //   1. `<cli.command> doctor` probe (handles wrappers that
   //      relocate CODEX_HOME)
   //   2. process.env.CODEX_HOME (global override)
   //   3. ~/.codex (codex's own default)

package/lib/config.js

@@ -70,7 +70,7 @@ const DEFAULTS = {
   // Repos available for cloning into a fresh workspace at launch time.
   //   { name: 'foo', url: 'https://github.com/me/foo.git', defaultSelected: true }
   repos: [],
-  // Pluggable CLIs. Add wrappers like `ccp` (gc2cc) or self-hosted
+  // Pluggable CLIs. Add custom wrappers or self-hosted
   // proxies by appending an entry. defaultCliId picks one for the
   // Launch button when the user doesn't override.
   clis: DEFAULT_CLIS,
@@ -170,8 +170,8 @@ function mergeWithDefaults(partial) {
       type: ['claude', 'codex', 'copilot', 'other'].includes(rest.type) ? rest.type : 'other',
       builtin: !!rest.builtin,
     };
-    // Type-based fallback for non-builtin CLIs (wrappers like `ccp`
-    // that just call claude under the hood). If user picked
+    // Type-based fallback for non-builtin CLIs (wrappers that
+    // just call claude under the hood). If user picked
     // type='claude' but left newSessionIdArgs / resumeIdArgs blank,
     // assume they want the same args claude / copilot / codex use
     // canonically — without this the wrapped CLI gets spawned with

package/lib/localCliSessions.js

@@ -103,16 +103,47 @@ async function discoverClaude() {
   return all;
 }
 
+// Codex sessions can live under a RELOCATED CODEX_HOME. Some wrappers
+// point it at e.g. %LOCALAPPDATA%\<wrapper>\codex-home, so `~/.codex` is empty
+// of the sessions the user actually created. Seeding already honours this
+// (codexSeed.probeCodexHome runs `<cli> doctor`); the import scan must too,
+// or those relocated sessions are invisible in the adopt modal. Gather every
+// candidate `<home>/sessions` dir: each configured codex CLI's detected
+// home, the CODEX_HOME env override, and codex's own ~/.codex default.
+async function codexSessionRoots() {
+  const roots = new Set();
+  try {
+    const { loadConfig } = require('./config');
+    const { probeCodexHome } = require('./codexSeed');
+    const cfg = await loadConfig();
+    const codexClis = (cfg?.clis || []).filter((c) => c.type === 'codex' || c.id === 'codex');
+    for (const c of codexClis) {
+      if (!c.command) continue;
+      let home = null;
+      try { home = await probeCodexHome({ command: c.command, shell: c.shell }); }
+      catch { /* probe is best-effort */ }
+      if (home) roots.add(path.join(home, 'sessions'));
+    }
+  } catch { /* config/probe unavailable — fall through to defaults */ }
+  if (process.env.CODEX_HOME) roots.add(path.join(process.env.CODEX_HOME, 'sessions'));
+  roots.add(path.join(os.homedir(), '.codex', 'sessions'));
+  return [...roots];
+}
+
 async function discoverCodex() {
-  const root = path.join(os.homedir(), '.codex', 'sessions');
+  const roots = await codexSessionRoots();
   const candidates = [];
-  await walkFiles(root, async (filepath, st) => {
-    if (!filepath.endsWith('.jsonl')) return;
-    const base = path.basename(filepath);
-    const m = base.match(/([0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12})\.jsonl$/i);
-    if (!m) return;
-    candidates.push({ id: m[1], filepath, mtimeMs: st.mtimeMs });
-  });
+  const seen = new Set();   // dedup by session id across homes
+  for (const root of roots) {
+    await walkFiles(root, async (filepath, st) => {
+      if (!filepath.endsWith('.jsonl')) return;
+      const base = path.basename(filepath);
+      const m = base.match(/([0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12})\.jsonl$/i);
+      if (!m || seen.has(m[1])) return;
+      seen.add(m[1]);
+      candidates.push({ id: m[1], filepath, mtimeMs: st.mtimeMs });
+    });
+  }
   candidates.sort((a, b) => b.mtimeMs - a.mtimeMs);
   return candidates;
 }
@@ -121,8 +152,14 @@ async function discoverCodex() {
 // records by parsing each jsonl head. cliType is the discriminator in the
 // returned record.
 async function hydrateJsonl(candidates, cliType) {
+  // codex prepends a big system preamble (<permissions instructions> +
+  // <environment_context>, ~32KB) before the first user message, so 16KB
+  // catches the cwd (line 1) but not the summary. Read a larger head for
+  // codex; its dataset is tiny so the extra bytes are free. claude/copilot
+  // keep the cheap 16KB.
+  const headBytes = cliType === 'codex' ? 48 * 1024 : HEAD_BYTES;
   const parseTasks = candidates.map((c) => async () => {
-    const { cwd, summary } = await parseJsonlHead(c.filepath, c.mtimeMs);
+    const { cwd, summary } = await parseJsonlHead(c.filepath, c.mtimeMs, headBytes);
     if (!cwd) return null;
     return {
       cliType,
@@ -328,74 +365,53 @@ async function listForTypeWithActive(cliType) {
   }));
 }
 
-// Paginated list — the fast path used by the import modal.
-//
-// Strategy:
-//   1. Discover phase = stat all candidates. Cheap, even at 1000+ files.
-//   2. Compute active set in parallel.
-//   3. ALWAYS hydrate every active candidate (they go first, never paged
-//      out — user explicitly wants live sessions visible up top).
-//   4. For non-active, hydrate only `[offset, offset+limit)` sorted mtime
-//      desc. "Load more" = call again with the next offset.
+// Page-based list for the import modal. offset/limit is a window into the
+// full candidate set, ordered active-first then newest-first. Each call
+// returns exactly that page — the modal renders ‹ Prev · X–Y of Z · Next ›.
 //
-// Returns: { sessions, totalActive, totalNonActive, offset, limit, hasMore }
-async function listPaginated(cliType, { offset = 0, limit = 30 } = {}) {
-  // copilot's "discover" is also the parse (no separate jsonl head to read
-  // cheaply), so for now we just list all of it. Codex/Claude get the
-  // proper two-phase treatment.
+// Returns: { sessions, total, totalActive, totalNonActive, offset, limit, hasMore }
+async function listPaginated(cliType, { offset = 0, limit = 20 } = {}) {
+  const now = Date.now();
+
+  // copilot's "discover" is also the parse (no cheap jsonl head), so we
+  // already have the full hydrated list — just slice the requested page.
   if (cliType === 'copilot') {
     const all = await listForTypeWithActive('copilot');
-    all.sort((a, b) => {
-      if (a.active !== b.active) return a.active ? -1 : 1;
-      return b.mtime - a.mtime;
-    });
+    all.sort((a, b) => (a.active !== b.active ? (a.active ? -1 : 1) : b.mtime - a.mtime));
+    const totalActive = all.filter((x) => x.active).length;
     return {
-      sessions: all,
-      totalActive: all.filter((x) => x.active).length,
-      totalNonActive: all.filter((x) => !x.active).length,
-      offset: 0,
-      limit: all.length,
-      hasMore: false,
+      sessions: all.slice(offset, offset + limit),
+      total: all.length,
+      totalActive,
+      totalNonActive: all.length - totalActive,
+      offset, limit,
+      hasMore: offset + limit < all.length,
     };
   }
 
+  // claude / codex: two-phase — cheap discover (stat only), hydrate just the
+  // page's slice.
   const discover = cliType === 'codex' ? discoverCodex : discoverClaude;
-  const [candidates, activeIds] = await Promise.all([
-    discover(),
-    getActiveIds(cliType),
-  ]);
-  // Already sorted mtime desc inside discover.
-  const now = Date.now();
-  const isActiveCand = (c) =>
-    activeIds.has(c.id) || (now - c.mtimeMs) < RECENT_MS;
-  const active = candidates.filter(isActiveCand);
-  const rest = candidates.filter((c) => !isActiveCand(c));
-
-  // Slice non-active to the requested page.
-  const slice = rest.slice(offset, offset + limit);
-
-  // Hydrate active (always all) + slice of non-active.
-  // First page: hydrate both. Later pages: only the slice — frontend
-  // already has the active set from page 0.
-  const toHydrate = offset === 0 ? [...active, ...slice] : slice;
-  const hydrated = await hydrateJsonl(toHydrate, cliType);
-
-  // Stamp active flag back on. Doing it post-hydrate so we don't have
-  // to thread it through hydrateJsonl.
-  const activeIdSet = new Set(active.map((c) => c.id));
+  const [candidates, activeIds] = await Promise.all([discover(), getActiveIds(cliType)]);
+  const isActive = (c) => activeIds.has(c.id) || (now - c.mtimeMs) < RECENT_MS;
+  // Active-first; discover already sorted mtime-desc so a stable partition
+  // keeps newest-first within each group.
+  const ordered = [...candidates.filter(isActive), ...candidates.filter((c) => !isActive(c))];
+  const totalActive = ordered.length - candidates.filter((c) => !isActive(c)).length;
+
+  const slice = ordered.slice(offset, offset + limit);
+  const hydrated = await hydrateJsonl(slice, cliType);
   for (const s of hydrated) {
-    s.active = activeIdSet.has(s.cliSessionId)
-      || activeIds.has(s.cliSessionId)
-      || (now - s.mtime) < RECENT_MS;
+    s.active = activeIds.has(s.cliSessionId) || (now - s.mtime) < RECENT_MS;
   }
 
   return {
     sessions: hydrated,
-    totalActive: active.length,
-    totalNonActive: rest.length,
-    offset,
-    limit,
-    hasMore: offset + limit < rest.length,
+    total: candidates.length,
+    totalActive,
+    totalNonActive: candidates.length - totalActive,
+    offset, limit,
+    hasMore: offset + limit < candidates.length,
   };
 }
 
@@ -442,17 +458,17 @@ function truncate(s, n) {
 // cwd lives in the head of every jsonl (it's part of the per-message
 // envelope), so 16KB is more than enough. First user text usually too;
 // if it's beyond the head we just don't preview, that's fine.
-async function parseJsonlHead(filepath, mtimeMs) {
+async function parseJsonlHead(filepath, mtimeMs, headBytes = HEAD_BYTES) {
   const cached = cacheGet(filepath, mtimeMs);
   if (cached) return cached;
 
   let fh;
   try { fh = await fsp.open(filepath, 'r'); }
   catch { return { cwd: null, summary: '' }; }
-  const buf = Buffer.allocUnsafe(HEAD_BYTES);
+  const buf = Buffer.allocUnsafe(headBytes);
   let bytesRead = 0;
   try {
-    const r = await fh.read(buf, 0, HEAD_BYTES, 0);
+    const r = await fh.read(buf, 0, headBytes, 0);
     bytesRead = r.bytesRead || 0;
   } catch {
     /* leave bytesRead = 0 */
@@ -468,7 +484,7 @@ async function parseJsonlHead(filepath, mtimeMs) {
   const text = buf.slice(0, bytesRead).toString('utf8');
   // Drop the trailing partial line — JSON.parse on it will fail anyway.
   const lines = text.split('\n');
-  if (bytesRead === HEAD_BYTES) lines.pop();
+  if (bytesRead === headBytes) lines.pop();
 
   let cwd = null;
   let summary = '';
@@ -477,10 +493,24 @@ async function parseJsonlHead(filepath, mtimeMs) {
     if (!line) continue;
     let obj;
     try { obj = JSON.parse(line); } catch { continue; }
-    if (!cwd && obj && obj.cwd) cwd = obj.cwd;
-    if (!summary && obj && obj.type === 'user' && obj.message?.content) {
-      const c = obj.message.content;
-      if (typeof c === 'string') summary = truncate(c, SUMMARY_MAX);
+    if (!obj) continue;
+    // cwd —
+    //   claude · top-level { cwd: "..." } on every message envelope
+    //   codex  · session_meta line { payload: { cwd: "..." } }
+    if (!cwd) {
+      if (typeof obj.cwd === 'string') cwd = obj.cwd;
+      else if (obj.payload && typeof obj.payload.cwd === 'string') cwd = obj.payload.cwd;
+    }
+    // first user message (preview) —
+    //   claude · { type:'user', message:{ content:'...' } }
+    //   codex  · { type:'event_msg', payload:{ type:'user_message', message:'...' } }
+    if (!summary) {
+      if (obj.type === 'user' && typeof obj.message?.content === 'string') {
+        summary = truncate(obj.message.content, SUMMARY_MAX);
+      } else if (obj.type === 'event_msg' && obj.payload?.type === 'user_message'
+                 && typeof obj.payload.message === 'string') {
+        summary = truncate(obj.payload.message, SUMMARY_MAX);
+      }
     }
   }
   const v = { cwd, summary };

package/lib/winPath.js

@@ -0,0 +1,67 @@
+'use strict';
+
+// Windows user-PATH merge. A long-running ccsm server inherits whatever PATH
+// it was launched with, which can be stale — e.g. a CLI (or a wrapper for one)
+// installed or put on PATH AFTER the server started. We read the
+// persisted user PATH from the registry and merge it in, then hand the
+// deduped env to every child we spawn. server.js uses this for session
+// launches; codexSeed uses it for the `<cli> doctor` home probe so the wrapper
+// resolves regardless of the parent process's PATH.
+//
+// (server.js keeps its own equivalent inline for the hot spawn path; this
+// module is the shared copy used by lib/ code that can't depend on server.js.)
+
+const { spawnSync } = require('node:child_process');
+
+let _merged = null; // cached for the process lifetime
+
+function buildMergedUserPath() {
+  if (process.platform !== 'win32') return process.env.PATH;
+  try {
+    const r = spawnSync('reg.exe', ['query', 'HKCU\\Environment', '/v', 'PATH'],
+      { encoding: 'utf8', windowsHide: true });
+    if (r.status !== 0 || !r.stdout) return process.env.PATH;
+    const line = r.stdout.split(/\r?\n/).find((l) => /\bPATH\b/i.test(l) && /REG_(EXPAND_)?SZ/i.test(l));
+    if (!line) return process.env.PATH;
+    const m = line.match(/REG_(?:EXPAND_)?SZ\s+(.+)$/);
+    if (!m) return process.env.PATH;
+    // REG_EXPAND_SZ keeps %VAR% literal — expand against the current env.
+    const userPath = m[1].replace(/%([^%]+)%/g, (_, name) => process.env[name] || '');
+    const existing = (process.env.PATH || '').split(';').map((s) => s.trim()).filter(Boolean);
+    const adds = userPath.split(';').map((s) => s.trim()).filter(Boolean);
+    const merged = [];
+    const seen = new Set();
+    for (const p of [...adds, ...existing]) {
+      const k = p.toLowerCase();
+      if (seen.has(k)) continue;
+      seen.add(k);
+      merged.push(p);
+    }
+    return merged.join(';');
+  } catch {
+    return process.env.PATH;
+  }
+}
+
+function mergedUserPath() {
+  if (_merged === null) _merged = buildMergedUserPath();
+  return _merged;
+}
+
+// Fresh env for a child spawn: process.env + extras, every case variant of
+// PATH stripped and replaced by the merged user PATH. Windows resolves the
+// FIRST path-case key in the env block, so a stale inherited `Path` would
+// otherwise shadow our `PATH`.
+function spawnEnv(extraEnv = {}) {
+  const env = { ...process.env, ...extraEnv };
+  if (process.platform === 'win32') {
+    for (const k of Object.keys(env)) {
+      if (k.toLowerCase() === 'path') delete env[k];
+    }
+  }
+  const mp = mergedUserPath();
+  if (mp) env.PATH = mp;
+  return env;
+}
+
+module.exports = { mergedUserPath, spawnEnv, buildMergedUserPath };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bakapiano/ccsm",
-  "version": "0.20.1",
+  "version": "0.21.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",

package/public/assets/copilot-color.svg

@@ -1 +1 @@
-<svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>GithubCopilot</title><path d="M19.245 5.364c1.322 1.36 1.877 3.216 2.11 5.817.622 0 1.2.135 1.592.654l.73.964c.21.278.323.61.323.955v2.62c0 .339-.173.669-.453.868C20.239 19.602 16.157 21.5 12 21.5c-4.6 0-9.205-2.583-11.547-4.258-.28-.2-.452-.53-.453-.868v-2.62c0-.345.113-.679.321-.956l.73-.963c.392-.517.974-.654 1.593-.654l.029-.297c.25-2.446.81-4.213 2.082-5.52 2.461-2.54 5.71-2.851 7.146-2.864h.198c1.436.013 4.685.323 7.146 2.864zm-7.244 4.328c-.284 0-.613.016-.962.05-.123.447-.305.85-.57 1.108-1.05 1.023-2.316 1.18-2.994 1.18-.638 0-1.306-.13-1.851-.464-.516.165-1.012.403-1.044.996a65.882 65.882 0 00-.063 2.884l-.002.48c-.002.563-.005 1.126-.013 1.69.002.326.204.63.51.765 2.482 1.102 4.83 1.657 6.99 1.657 2.156 0 4.504-.555 6.985-1.657a.854.854 0 00.51-.766c.03-1.682.006-3.372-.076-5.053-.031-.596-.528-.83-1.046-.996-.546.333-1.212.464-1.85.464-.677 0-1.942-.157-2.993-1.18-.266-.258-.447-.661-.57-1.108-.32-.032-.64-.049-.96-.05zm-2.525 4.013c.539 0 .976.426.976.95v1.753c0 .525-.437.95-.976.95a.964.964 0 01-.976-.95v-1.752c0-.525.437-.951.976-.951zm5 0c.539 0 .976.426.976.95v1.753c0 .525-.437.95-.976.95a.964.964 0 01-.976-.95v-1.752c0-.525.437-.951.976-.951zM7.635 5.087c-1.05.102-1.935.438-2.385.906-.975 1.037-.765 3.668-.21 4.224.405.394 1.17.657 1.995.657h.09c.649-.013 1.785-.176 2.73-1.11.435-.41.705-1.433.675-2.47-.03-.834-.27-1.52-.63-1.813-.39-.336-1.275-.482-2.265-.394zm6.465.394c-.36.292-.6.98-.63 1.813-.03 1.037.24 2.06.675 2.47.968.957 2.136 1.104 2.776 1.11h.044c.825 0 1.59-.263 1.995-.657.555-.556.765-3.187-.21-4.224-.45-.468-1.335-.804-2.385-.906-.99-.088-1.875.058-2.265.394zM12 7.615c-.24 0-.525.015-.84.044.03.16.045.336.06.526l-.001.159a2.94 2.94 0 01-.014.25c.225-.022.425-.027.612-.028h.366c.187 0 .387.006.612.028-.015-.146-.015-.277-.015-.409.015-.19.03-.365.06-.526a9.29 9.29 0 00-.84-.044z"></path></svg>
+<svg fill="#8957e5" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>GithubCopilot</title><path d="M19.245 5.364c1.322 1.36 1.877 3.216 2.11 5.817.622 0 1.2.135 1.592.654l.73.964c.21.278.323.61.323.955v2.62c0 .339-.173.669-.453.868C20.239 19.602 16.157 21.5 12 21.5c-4.6 0-9.205-2.583-11.547-4.258-.28-.2-.452-.53-.453-.868v-2.62c0-.345.113-.679.321-.956l.73-.963c.392-.517.974-.654 1.593-.654l.029-.297c.25-2.446.81-4.213 2.082-5.52 2.461-2.54 5.71-2.851 7.146-2.864h.198c1.436.013 4.685.323 7.146 2.864zm-7.244 4.328c-.284 0-.613.016-.962.05-.123.447-.305.85-.57 1.108-1.05 1.023-2.316 1.18-2.994 1.18-.638 0-1.306-.13-1.851-.464-.516.165-1.012.403-1.044.996a65.882 65.882 0 00-.063 2.884l-.002.48c-.002.563-.005 1.126-.013 1.69.002.326.204.63.51.765 2.482 1.102 4.83 1.657 6.99 1.657 2.156 0 4.504-.555 6.985-1.657a.854.854 0 00.51-.766c.03-1.682.006-3.372-.076-5.053-.031-.596-.528-.83-1.046-.996-.546.333-1.212.464-1.85.464-.677 0-1.942-.157-2.993-1.18-.266-.258-.447-.661-.57-1.108-.32-.032-.64-.049-.96-.05zm-2.525 4.013c.539 0 .976.426.976.95v1.753c0 .525-.437.95-.976.95a.964.964 0 01-.976-.95v-1.752c0-.525.437-.951.976-.951zm5 0c.539 0 .976.426.976.95v1.753c0 .525-.437.95-.976.95a.964.964 0 01-.976-.95v-1.752c0-.525.437-.951.976-.951zM7.635 5.087c-1.05.102-1.935.438-2.385.906-.975 1.037-.765 3.668-.21 4.224.405.394 1.17.657 1.995.657h.09c.649-.013 1.785-.176 2.73-1.11.435-.41.705-1.433.675-2.47-.03-.834-.27-1.52-.63-1.813-.39-.336-1.275-.482-2.265-.394zm6.465.394c-.36.292-.6.98-.63 1.813-.03 1.037.24 2.06.675 2.47.968.957 2.136 1.104 2.776 1.11h.044c.825 0 1.59-.263 1.995-.657.555-.556.765-3.187-.21-4.224-.45-.468-1.335-.804-2.385-.906-.99-.088-1.875.058-2.265.394zM12 7.615c-.24 0-.525.015-.84.044.03.16.045.336.06.526l-.001.159a2.94 2.94 0 01-.014.25c.225-.022.425-.027.612-.028h.366c.187 0 .387.006.612.028-.015-.146-.015-.277-.015-.409.015-.19.03-.365.06-.526a9.29 9.29 0 00-.84-.044z"></path></svg>

package/public/css/dark.css

@@ -14,18 +14,41 @@
  * session tabs, and the mobile key bar — those are dark in both themes. */
 
 /* ── buttons ─────────────────────────────────────────────────────── */
-/* .action.primary is bg:var(--ink)/text:var(--bg-elev) — already inverts
-   correctly (light slab, dark text) when the vars flip. Only its hover
-   hardcoded #000, which would darken the wrong way; send it brighter. */
+/* Primary CTA. In light mode it's the ink slab (near-black bg, light
+   text). The faithful inversion in dark mode is a near-WHITE slab, which
+   reads as a harsh pure-white button floating in the dark popups (the
+   Create / Done / Save buttons). Use the accent instead — that's the
+   conventional dark-UI primary and matches the accent-colored Launch CTA,
+   so every "do this" button in dark mode is one coherent color. */
+[data-theme="dark"] .action.primary {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #fff;
+}
 [data-theme="dark"] .action.primary:hover {
-  background: #ffffff;
-  border-color: #ffffff;
+  background: var(--accent-deep);
+  border-color: var(--accent-deep);
   box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.6);
 }
-/* .fab base is var(--ink) (a light slab in dark mode) with var(--bg-elev)
-   text; its hover hardcoded #000, which would render dark text on black.
-   Send the hover lighter instead, matching .action.primary. */
-[data-theme="dark"] .fab:hover { background: #ffffff; }
+/* .fab is the same ink-slab pattern (var(--ink) bg) — give it the same
+   accent treatment so it isn't a white circle either. */
+[data-theme="dark"] .fab {
+  background: var(--accent);
+  color: #fff;
+}
+[data-theme="dark"] .fab:hover { background: var(--accent-deep); }
+/* Active "Working directory" mode card (Launch page). Its selected
+   highlight uses var(--ink) for the border + icon chip, which flips to
+   light cream in dark mode → a glaring white frame + white icon square.
+   Use the accent highlight instead, matching the dark primary button. */
+[data-theme="dark"] .workdir-mode-opt.is-active {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 1px var(--accent) inset;
+}
+[data-theme="dark"] .workdir-mode-opt.is-active .workdir-mode-icon {
+  background: var(--accent);
+  color: #fff;
+}
 /* Focus rings / hover shadows used a dark ink wash that vanishes on a dark
    ground — switch to a light wash so the affordance stays visible. */
 [data-theme="dark"] .action:hover { box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.5); }
@@ -36,9 +59,11 @@
 [data-theme="dark"] textarea:focus { box-shadow: 0 0 0 3px rgba(236, 231, 218, 0.12); }
 [data-theme="dark"] .action.danger:hover { background: #c75050; border-color: #c75050; }
 
-/* The select chevron SVG is baked with a mid-gray stroke; lighten it. */
+/* Filled triangle (see forms.css note) tinted to the faint dark-mode ink
+   so the select arrow is a calm solid mark instead of a pair of bright
+   jagged strokes. */
 [data-theme="dark"] select {
-  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23b4ab98' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='1,1 6,7 11,1'/></svg>");
+  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'><path d='M1 1 L5 5 L9 1 Z' fill='%236d6a62'/></svg>");
 }
 
 /* ── brand mark ──────────────────────────────────────────────────── */
@@ -49,6 +74,22 @@
    fill untouched — it's already legible there.) */
 [data-theme="dark"] .brand-rect { fill: #38342f; }
 
+/* ── notifications (toast + restart pill) ────────────────────────── */
+/* Both use var(--ink) as their surface and var(--bg) as their text — a
+   deliberate high-contrast inverted pill in light mode. But var(--ink)
+   flips to light cream in dark mode, so the bottom-right notification
+   showed up as a pale pill that read as "still light / not following the
+   theme". In dark mode, give them a dark elevated surface with light text
+   + a defined border so they sit IN the dark theme like a snackbar. The
+   ::before chip and the spinner already use currentColor, so they invert
+   along with the text for free. */
+[data-theme="dark"] .toast,
+[data-theme="dark"] .restart-banner {
+  background: var(--bg-elev);
+  color: var(--ink);
+  border: 1px solid var(--border-strong);
+}
+
 /* ── paper grain ─────────────────────────────────────────────────── */
 /* The noise texture is a dark-tinted SVG multiplied over the surface —
    invisible (and wrong blend) on a dark ground. Screen-blend it at low

package/public/css/forms.css

@@ -76,7 +76,14 @@
 
 .input, input[type="text"], input[type="number"], select, textarea {
   appearance: none;
-  background: var(--bg-elev);
+  /* background-COLOR, not the `background` shorthand — the shorthand resets
+     background-repeat/position/size to their initial values (repeat / 0% 0%
+     / auto), and since this rule matches <select> via the higher-specificity
+     `.input` selector, it was overriding the `select` rule's no-repeat +
+     positioning. Result: the dropdown arrow SVG tiled across the whole
+     select as a grid of little triangles. Setting only the color leaves the
+     select rule's background-* longhands intact. */
+  background-color: var(--bg-elev);
   border: 1px solid var(--border-strong);
   color: var(--ink);
   padding: 8px 12px;
@@ -94,7 +101,10 @@
   box-shadow: 0 0 0 3px rgba(26, 24, 21, 0.08);
 }
 select {
-  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%238a8475' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='1,1 6,7 11,1'/></svg>");
+  /* A single FILLED triangle, not a 2-stroke chevron. Thin strokes alias
+     into jagged "teeth" at this ~9px size; a solid shape anti-aliases
+     cleanly and reads as one arrow rather than a pair of serrations. */
+  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'><path d='M1 1 L5 5 L9 1 Z' fill='%238a8475'/></svg>");
   background-repeat: no-repeat;
   background-position: right 10px center;
   background-size: 10px;

package/public/css/responsive.css

@@ -14,7 +14,15 @@
    layout; a circular floating button bottom-left toggles a full-screen
    drawer that re-mounts the sidebar over everything else. */
 @media (max-width: 640px) {
-  .app.is-mobile { grid-template-columns: 1fr !important; }
+  /* Shrink the whole app to the visible area ABOVE the soft keyboard.
+     --app-vh is the visualViewport height (main.js); the layout-viewport
+     100vh never shrinks for the keyboard, which left the terminal's bottom
+     rows hidden behind it. 100dvh is the fallback before the JS runs. */
+  .app.is-mobile { grid-template-columns: 1fr !important; height: var(--app-vh, 100dvh); }
+  /* Keyboard up: keep the terminal's content above the floating key bar
+     (TerminalKeyBar, ~50px). Only the terminal pane needs this — other
+     pages have their own scroll padding. */
+  body.kb-open .app.is-mobile .session-pane-body { padding-bottom: 50px; }
   .app.is-mobile .sidebar {
     /* Collapsed (drawer closed): out of the flow + invisible. */
     position: fixed;
@@ -58,6 +66,22 @@
      the FAB sits over the terminal corner — leave it; the user can
      scroll the terminal independently. */
 
+  /* Touch scrolling: drive xterm's OWN scrollable .xterm-viewport natively
+     so finger drags get real momentum and never "drop" mid-flick. A
+     JS-intercepted scroll can't: the moment Chrome's compositor decides the
+     drag is a vertical pan it cancels the touch sequence, so the handler
+     only ever sees the opening frames — the "滑一点就断触" symptom. The
+     catch is that the .xterm-screen layer (DOM rows on mobile) sits ON TOP
+     of the viewport and swallows every touch; only the thin scrollbar strip
+     at the right edge reached the viewport, which is exactly the
+     "中间滑不动、侧边能滑" report. Make the screen transparent to pointers so
+     the drag lands on the viewport underneath; pan-y marks it a vertical
+     scroller so the compositor scrolls it directly. (Tap-to-focus is then
+     re-added in JS — see TerminalView — since taps no longer reach xterm's
+     own focus path.) */
+  .app.is-mobile .terminal-host .xterm-screen { pointer-events: none; }
+  .app.is-mobile .terminal-host .xterm-viewport { touch-action: pan-y; }
+
   /* Long inline code (URLs, paths) in the About / Remote bodies break
      out of card edges on a narrow viewport. Let them wrap on any
      character instead of stretching the line. */
@@ -96,7 +120,7 @@
    scrolling the page while the user is dragging the FAB. */
 .mobile-nav-fab {
   position: fixed;
-  z-index: 210;
+  z-index: 220;                 /* above the terminal key bar (215) */
   width: 52px;
   height: 52px;
   border-radius: 50%;
@@ -112,8 +136,12 @@
   cursor: grab;
   touch-action: none;
   user-select: none;
-  transition: box-shadow .15s, background .15s;
+  transition: box-shadow .15s, background .15s, transform .18s ease;
 }
+/* When the soft keyboard (and the terminal key bar that floats above it)
+   is up, lift the FAB clear of the key bar so they don't overlap. The
+   key bar is ~50px tall; nudge up a bit more for breathing room. */
+body.kb-open .mobile-nav-fab { transform: translateY(-60px); }
 /* No translateY on hover — would fight the inline left/bottom we set
    on every pointermove during drag, making the FAB jitter under the
    finger as :hover toggles on/off. Background-only hover for desktop
@@ -141,7 +169,7 @@
 .mobile-nav-backdrop {
   position: fixed;
   inset: 0;
-  z-index: 199;     /* below sidebar (200) + fab (210), above content */
+  z-index: 199;     /* below sidebar (200) + fab (220), above content */
   background: rgba(26, 24, 21, 0.45);
   backdrop-filter: blur(2px);
   animation: panel-in .15s ease-out;