@bakapiano/ccsm 0.9.0 → 0.10.1

package/lib/folders.js

@@ -0,0 +1,96 @@
+'use strict';
+
+// User-curated folders. Sessions reference these by id. Order is
+// user-controlled (drag-reorder in sidebar). The store is a flat list
+// in $DATA_DIR/folders.json:
+//   [{ id, name, order, createdAt }]
+//
+// Top-level "Unsorted" is implicit — sessions with folderId === null
+// render under it. The user can't delete or rename it; we just synthesise
+// the bucket in the frontend.
+
+const path = require('node:path');
+const fs = require('node:fs/promises');
+const { DATA_DIR } = require('./config');
+
+const FILE = path.join(DATA_DIR, 'folders.json');
+
+async function loadAll() {
+  try {
+    const raw = await fs.readFile(FILE, 'utf8');
+    const j = JSON.parse(raw);
+    return Array.isArray(j) ? j : [];
+  } catch (e) {
+    if (e.code === 'ENOENT') return [];
+    throw e;
+  }
+}
+
+async function saveAll(list) {
+  await fs.writeFile(FILE, JSON.stringify(list, null, 2));
+}
+
+function genId() {
+  return 'folder-' + Date.now().toString(36) + '-' + Math.random().toString(36).slice(2, 8);
+}
+
+async function create({ name }) {
+  if (!name || typeof name !== 'string') throw new Error('name required');
+  const list = await loadAll();
+  const entry = {
+    id: genId(),
+    name: name.trim(),
+    order: list.length,
+    createdAt: Date.now(),
+  };
+  list.push(entry);
+  await saveAll(list);
+  return entry;
+}
+
+async function update(id, patch) {
+  const list = await loadAll();
+  const idx = list.findIndex((f) => f.id === id);
+  if (idx < 0) return null;
+  // Allow rename + reorder, ignore other keys.
+  const allowed = {};
+  if (typeof patch.name === 'string') allowed.name = patch.name.trim();
+  if (typeof patch.order === 'number') allowed.order = patch.order;
+  list[idx] = { ...list[idx], ...allowed };
+  await saveAll(list);
+  return list[idx];
+}
+
+async function remove(id) {
+  const list = await loadAll();
+  const idx = list.findIndex((f) => f.id === id);
+  if (idx < 0) return false;
+  list.splice(idx, 1);
+  await saveAll(list);
+  return true;
+}
+
+async function reorder(idsInOrder) {
+  if (!Array.isArray(idsInOrder)) throw new Error('idsInOrder must be array');
+  const list = await loadAll();
+  const byId = new Map(list.map((f) => [f.id, f]));
+  const next = [];
+  idsInOrder.forEach((id, i) => {
+    const f = byId.get(id);
+    if (f) {
+      f.order = i;
+      next.push(f);
+      byId.delete(id);
+    }
+  });
+  // Append any folders not mentioned in the new order, preserving original
+  // relative order. Prevents accidentally dropping folders.
+  for (const f of byId.values()) {
+    f.order = next.length;
+    next.push(f);
+  }
+  await saveAll(next);
+  return next;
+}
+
+module.exports = { loadAll, create, update, remove, reorder, FILE };

package/lib/localCliSessions.js

@@ -0,0 +1,177 @@
+'use strict';
+
+// Discover existing CLI sessions on this machine and surface them so
+// ccsm can "adopt" them — i.e. create a persistedSessions record that
+// resumes the same upstream conversation later.
+//
+// Per CLI:
+//   claude  · ~/.claude/projects/<slug>/<uuid>.jsonl   (uuid = id)
+//   codex   · ~/.codex/sessions/**/<uuid>.jsonl        (uuid = id)
+//   copilot · ~/.copilot/session-state/<uuid>/         (uuid = dir name;
+//              cwd + summary in workspace.yaml)
+//
+// Each session is reported as:
+//   { cliType, cliSessionId, cwd, mtime, summary }
+//
+// Heuristic for `summary`: the first user message text (claude/codex)
+// or the YAML `summary:` line (copilot). Truncated to 120 chars.
+
+const fs = require('node:fs');
+const fsp = require('node:fs/promises');
+const path = require('node:path');
+const os = require('node:os');
+const readline = require('node:readline');
+
+const SUMMARY_MAX = 120;
+
+async function listClaude() {
+  const root = path.join(os.homedir(), '.claude', 'projects');
+  let slugs;
+  try { slugs = await fsp.readdir(root, { withFileTypes: true }); }
+  catch { return []; }
+  const out = [];
+  for (const slug of slugs) {
+    if (!slug.isDirectory()) continue;
+    const slugDir = path.join(root, slug.name);
+    let files;
+    try { files = await fsp.readdir(slugDir, { withFileTypes: true }); }
+    catch { continue; }
+    for (const f of files) {
+      if (!f.isFile() || !f.name.endsWith('.jsonl')) continue;
+      const filepath = path.join(slugDir, f.name);
+      const id = f.name.replace(/\.jsonl$/, '');
+      let st; try { st = await fsp.stat(filepath); } catch { continue; }
+      const { cwd, summary } = await parseClaudeJsonl(filepath);
+      if (!cwd) continue;
+      out.push({
+        cliType: 'claude',
+        cliSessionId: id,
+        cwd,
+        mtime: st.mtimeMs,
+        summary,
+      });
+    }
+  }
+  return out;
+}
+
+async function listCodex() {
+  const root = path.join(os.homedir(), '.codex', 'sessions');
+  const out = [];
+  await walkFiles(root, async (filepath) => {
+    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;
+    let st; try { st = await fsp.stat(filepath); } catch { return; }
+    const { cwd, summary } = await parseClaudeJsonl(filepath); // same shape
+    if (!cwd) return;
+    out.push({
+      cliType: 'codex',
+      cliSessionId: m[1],
+      cwd,
+      mtime: st.mtimeMs,
+      summary,
+    });
+  });
+  return out;
+}
+
+async function listCopilot() {
+  const root = path.join(os.homedir(), '.copilot', 'session-state');
+  let dirs;
+  try { dirs = await fsp.readdir(root, { withFileTypes: true }); }
+  catch { return []; }
+  const out = [];
+  for (const d of dirs) {
+    if (!d.isDirectory()) continue;
+    const id = d.name;
+    if (!/^[0-9a-f-]+$/i.test(id)) continue;
+    const dirpath = path.join(root, id);
+    let st; try { st = await fsp.stat(dirpath); } catch { continue; }
+    const yaml = path.join(dirpath, 'workspace.yaml');
+    let txt;
+    try { txt = await fsp.readFile(yaml, 'utf8'); }
+    catch { continue; }
+    const cwd = (txt.match(/^\s*cwd\s*:\s*(.+?)\s*$/m) || [])[1] || null;
+    const summary = (txt.match(/^\s*summary\s*:\s*(.+?)\s*$/m) || [])[1] || '';
+    const updated = (txt.match(/^\s*updated_at\s*:\s*(.+?)\s*$/m) || [])[1];
+    if (!cwd) continue;
+    out.push({
+      cliType: 'copilot',
+      cliSessionId: id,
+      cwd: cwd.trim(),
+      mtime: updated ? Date.parse(updated) || st.mtimeMs : st.mtimeMs,
+      summary: truncate(summary, SUMMARY_MAX),
+    });
+  }
+  return out;
+}
+
+async function listForType(cliType) {
+  if (cliType === 'claude')  return listClaude();
+  if (cliType === 'codex')   return listCodex();
+  if (cliType === 'copilot') return listCopilot();
+  return [];
+}
+
+module.exports = { listForType, listClaude, listCodex, listCopilot };
+
+// ── helpers ─────────────────────────────────────────────────────────
+
+async function walkFiles(root, visit) {
+  let entries;
+  try { entries = await fsp.readdir(root, { withFileTypes: true }); }
+  catch { return; }
+  for (const e of entries) {
+    const p = path.join(root, e.name);
+    if (e.isDirectory()) await walkFiles(p, visit);
+    else await visit(p);
+  }
+}
+
+function truncate(s, n) {
+  if (!s) return '';
+  const t = String(s).replace(/\s+/g, ' ').trim();
+  return t.length > n ? t.slice(0, n - 1) + '…' : t;
+}
+
+// Returns { cwd, summary } from the first ~30 lines of a claude/codex
+// jsonl. Looks for the first object with a `cwd` field, plus the first
+// user message text content for a 1-line preview.
+async function parseClaudeJsonl(filepath) {
+  return new Promise((resolve) => {
+    let stream;
+    try { stream = fs.createReadStream(filepath, { encoding: 'utf8' }); }
+    catch { resolve({ cwd: null, summary: '' }); return; }
+    const rl = readline.createInterface({ input: stream });
+    let count = 0;
+    let cwd = null;
+    let summary = '';
+    let settled = false;
+    const done = () => {
+      if (settled) return;
+      settled = true;
+      try { rl.close(); } catch {}
+      try { stream.destroy(); } catch {}
+      resolve({ cwd, summary });
+    };
+    rl.on('line', (line) => {
+      count++;
+      try {
+        const obj = JSON.parse(line);
+        if (!cwd && obj && obj.cwd) cwd = obj.cwd;
+        if (!summary && obj) {
+          // First user text wins.
+          if (obj.type === 'user' && obj.message?.content) {
+            const c = obj.message.content;
+            if (typeof c === 'string') summary = truncate(c, SUMMARY_MAX);
+          }
+        }
+      } catch {}
+      if (count >= 30 || (cwd && summary)) done();
+    });
+    rl.on('close', done);
+    rl.on('error', done);
+  });
+}

package/lib/persistedSessions.js

@@ -0,0 +1,134 @@
+'use strict';
+
+// ccsm-owned session records. Replaces the old "scan ~/.claude/sessions/
+// + tasklist" path entirely: we no longer try to enumerate every claude
+// process on the machine. Instead, every session ccsm starts (via the
+// web terminal) gets recorded here, and the user organises them in
+// folders.
+//
+// Each entry:
+//   {
+//     id: 'sess-...',          // ccsm's session id (matches webTerminal id)
+//     cliId: 'claude',         // which CLI from config.clis
+//     cwd: '...',              // absolute workspace path
+//     workspace: 'ws-3',       // basename of cwd (display)
+//     title: '',               // user-edited label (Configure / sidebar tree)
+//     folderId: null,          // nullable; null = "Unsorted" top-level
+//     repos: ['foo','bar'],    // names of repos cloned into cwd at launch
+//     createdAt: 1234,
+//     lastActiveAt: 1234,      // updated on attach/input; drives sort
+//     status: 'running'|'exited',
+//     exitedAt: null,
+//     exitCode: null,
+//     pid: null,               // current pid if running
+//     cliSessionId: null,      // upstream CLI's session UUID (captured
+//                              //   by lib/cliSessionWatcher after spawn);
+//                              //   used for precise --resume <id>.
+//   }
+
+const path = require('node:path');
+const fs = require('node:fs/promises');
+const { DATA_DIR } = require('./config');
+
+const FILE = path.join(DATA_DIR, 'sessions.json');
+
+async function loadAll() {
+  try {
+    const raw = await fs.readFile(FILE, 'utf8');
+    const j = JSON.parse(raw);
+    return Array.isArray(j) ? j : [];
+  } catch (e) {
+    if (e.code === 'ENOENT') return [];
+    throw e;
+  }
+}
+
+async function saveAll(list) {
+  await fs.writeFile(FILE, JSON.stringify(list, null, 2));
+}
+
+function genId() {
+  return 'sess-' + Date.now().toString(36) + '-' + Math.random().toString(36).slice(2, 8);
+}
+
+async function create({ cliId, cwd, workspace, repos = [], folderId = null, title = '', status = 'running', cliSessionId = null }) {
+  const list = await loadAll();
+  const entry = {
+    id: genId(),
+    cliId,
+    cwd,
+    workspace,
+    title,
+    folderId,
+    repos,
+    createdAt: Date.now(),
+    lastActiveAt: Date.now(),
+    status,
+    exitedAt: status === 'exited' ? Date.now() : null,
+    exitCode: null,
+    pid: null,
+    cliSessionId,
+  };
+  list.push(entry);
+  await saveAll(list);
+  return entry;
+}
+
+async function get(id) {
+  const list = await loadAll();
+  return list.find((s) => s.id === id) || null;
+}
+
+async function update(id, patch) {
+  const list = await loadAll();
+  const idx = list.findIndex((s) => s.id === id);
+  if (idx < 0) return null;
+  list[idx] = { ...list[idx], ...patch };
+  await saveAll(list);
+  return list[idx];
+}
+
+async function remove(id) {
+  const list = await loadAll();
+  const idx = list.findIndex((s) => s.id === id);
+  if (idx < 0) return false;
+  list.splice(idx, 1);
+  await saveAll(list);
+  return true;
+}
+
+// Convenience helpers used at runtime so callers don't have to do
+// load/find/update/save themselves.
+async function markRunning(id, pid) {
+  return update(id, { status: 'running', pid, exitedAt: null, exitCode: null, lastActiveAt: Date.now() });
+}
+
+async function markExited(id, exitCode) {
+  return update(id, { status: 'exited', exitCode: exitCode ?? null, exitedAt: Date.now(), pid: null });
+}
+
+async function touch(id) {
+  return update(id, { lastActiveAt: Date.now() });
+}
+
+async function setFolder(id, folderId) {
+  return update(id, { folderId: folderId || null });
+}
+
+async function setTitle(id, title) {
+  return update(id, { title: title || '' });
+}
+
+module.exports = {
+  loadAll,
+  create,
+  get,
+  update,
+  remove,
+  markRunning,
+  markExited,
+  touch,
+  setFolder,
+  setTitle,
+  FILE,
+};

package/lib/webTerminal.js

@@ -37,22 +37,19 @@ function genId() {
 
 // 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).
+// `id` lets the caller dictate the session id (so persistedSessions can
+// keep PTY id == record id); defaults to an auto-generated one.
+// `onData` / `onExit` are optional callbacks fired alongside the built-in
+// history-recording + socket-broadcast, so persistedSessions can mark
+// status/lastActiveAt without us having to drill the dependency in here.
 // Throws if node-pty isn't available.
-function spawn({ command, args = [], cwd, env, cols = 120, rows = 30, meta = {} }) {
+function spawn({ command, args = [], cwd, env, cols = 120, rows = 30, meta = {}, id, onData, onExit }) {
   if (!pty) {
     const err = new Error('node-pty is not available · ' + (loadError && loadError.message || 'unknown'));
     err.code = 'PTY_UNAVAILABLE';
     throw err;
   }
-  const id = genId();
-  // 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 entryId = id || genId();
   const ptyOpts = {
     name: 'xterm-256color',
     cols, rows,
@@ -65,16 +62,17 @@ function spawn({ command, args = [], cwd, env, cols = 120, rows = 30, meta = {}
   }
   const proc = pty.spawn(command, args, ptyOpts);
   const entry = {
-    id,
+    id: entryId,
     pty: proc,
     history: '',
     sockets: new Set(),
     meta: { ...meta, startedAt: Date.now(), command, args, cwd: cwd || process.cwd(), pid: proc.pid },
     exitCode: null,
     exitedAt: null,
+    onDataExtra: onData,
+    onExitExtra: onExit,
   };
   proc.onData((data) => {
-    // Append to ring; truncate to last HISTORY_BYTES so memory stays bounded.
     entry.history = (entry.history + data);
     if (entry.history.length > HISTORY_BYTES) {
       entry.history = entry.history.slice(-HISTORY_BYTES);
@@ -83,6 +81,7 @@ function spawn({ command, args = [], cwd, env, cols = 120, rows = 30, meta = {}
     for (const ws of entry.sockets) {
       try { ws.send(frame); } catch {}
     }
+    if (entry.onDataExtra) { try { entry.onDataExtra(data); } catch {} }
   });
   proc.onExit(({ exitCode, signal }) => {
     entry.exitCode = exitCode;
@@ -91,15 +90,29 @@ function spawn({ command, args = [], cwd, env, cols = 120, rows = 30, meta = {}
     for (const ws of entry.sockets) {
       try { ws.send(frame); } catch {}
     }
-    // Keep the entry around briefly so a reconnecting client can see the
-    // exit code + final transcript, then drop it. 30s is enough for a UI
-    // re-render but won't hoard memory forever.
-    setTimeout(() => sessions.delete(id), 30_000);
+    if (entry.onExitExtra) { try { entry.onExitExtra({ exitCode, signal }); } catch {} }
+    setTimeout(() => sessions.delete(entryId), 30_000);
   });
-  sessions.set(id, entry);
+  sessions.set(entryId, entry);
   return entry;
 }
 
+// Strip ANSI sequences from history that would cause spurious
+// terminal-to-host responses if a fresh xterm.js re-parses the replay.
+// Specifically: device-attribute / device-status queries (CSI c, CSI 0c,
+// CSI >0c, CSI 5n, CSI 6n, …) — the original xterm already answered
+// them, but on attach we replay everything; without scrubbing, the new
+// xterm answers them too, the reply goes through our onData→PTY pipe,
+// the CLI sees garbage bytes in its stdin, and echoes them back as
+// visible junk like `[?12;2c`.
+function scrubReplayResponses(history) {
+  return history
+    // CSI [ ? Ps c   (primary DA query)
+    .replace(/\x1b\[[?>0-9]*c/g, '')
+    // CSI [ Ps n     (device status / cursor position queries)
+    .replace(/\x1b\[[?>0-9;]*n/g, '');
+}
+
 // Wire a websocket to a session. Replays history immediately so the
 // client sees recent context; then forwards input/resize messages from
 // the client to the PTY and broadcast outputs back via onData above.
@@ -111,7 +124,7 @@ function attach(id, ws) {
   }
   entry.sockets.add(ws);
   if (entry.history) {
-    try { ws.send(JSON.stringify({ type: 'output', data: entry.history })); } catch {}
+    try { ws.send(JSON.stringify({ type: 'output', data: scrubReplayResponses(entry.history) })); } catch {}
   }
   if (entry.exitedAt) {
     try { ws.send(JSON.stringify({ type: 'exit', code: entry.exitCode })); } catch {}

package/lib/workspace.js

@@ -4,7 +4,6 @@ const fs = require('node:fs/promises');
 const fsSync = require('node:fs');
 const path = require('node:path');
 const { spawn } = require('node:child_process');
-const { listSessions } = require('./sessions');
 
 function normWin(p) {
   return path.resolve(String(p)).toLowerCase();
@@ -71,11 +70,9 @@ async function describeWorkspace(workspacePath, repos, busyPaths) {
   };
 }
 
-async function listWorkspaces({ workDir, repos }) {
+async function listWorkspaces({ workDir, repos, busyPaths = [] }) {
   await ensureDir(workDir);
   const subdirs = await listSubdirs(workDir);
-  const sessions = await listSessions();
-  const busyPaths = sessions.map((s) => s.cwd);
 
   const workspaces = await Promise.all(
     subdirs.map((name) =>
@@ -224,10 +221,35 @@ async function ensureReposInWorkspace({ workspacePath, repos, onProgress, onLine
   return results;
 }
 
+async function dirSize(p) {
+  let total = 0;
+  async function walk(dir) {
+    let entries;
+    try {
+      entries = await fs.readdir(dir, { withFileTypes: true });
+    } catch { return; }
+    await Promise.all(entries.map(async (e) => {
+      const full = path.join(dir, e.name);
+      if (e.isSymbolicLink()) return; // don't follow symlinks
+      if (e.isDirectory()) {
+        await walk(full);
+      } else if (e.isFile()) {
+        try {
+          const st = await fs.stat(full);
+          total += st.size;
+        } catch { /* skip */ }
+      }
+    }));
+  }
+  await walk(p);
+  return total;
+}
+
 module.exports = {
   listWorkspaces,
   findOrCreateWorkspace,
   ensureReposInWorkspace,
   isInside,
   nextWorkspaceName,
+  dirSize,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bakapiano/ccsm",
-  "version": "0.9.0",
+  "version": "0.10.1",
   "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/claude-color.svg

@@ -0,0 +1 @@
+<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Claude</title><path d="M4.709 15.955l4.72-2.647.08-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.908-1.312-.006.006z" fill="#D97757" fill-rule="nonzero"></path></svg>

package/public/assets/codex-color.svg

@@ -0,0 +1 @@
+<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Codex</title><path d="M19.503 0H4.496A4.496 4.496 0 000 4.496v15.007A4.496 4.496 0 004.496 24h15.007A4.496 4.496 0 0024 19.503V4.496A4.496 4.496 0 0019.503 0z" fill="#fff"></path><path d="M9.064 3.344a4.578 4.578 0 012.285-.312c1 .115 1.891.54 2.673 1.275.01.01.024.017.037.021a.09.09 0 00.043 0 4.55 4.55 0 013.046.275l.047.022.116.057a4.581 4.581 0 012.188 2.399c.209.51.313 1.041.315 1.595a4.24 4.24 0 01-.134 1.223.123.123 0 00.03.115c.594.607.988 1.33 1.183 2.17.289 1.425-.007 2.71-.887 3.854l-.136.166a4.548 4.548 0 01-2.201 1.388.123.123 0 00-.081.076c-.191.551-.383 1.023-.74 1.494-.9 1.187-2.222 1.846-3.711 1.838-1.187-.006-2.239-.44-3.157-1.302a.107.107 0 00-.105-.024c-.388.125-.78.143-1.204.138a4.441 4.441 0 01-1.945-.466 4.544 4.544 0 01-1.61-1.335c-.152-.202-.303-.392-.414-.617a5.81 5.81 0 01-.37-.961 4.582 4.582 0 01-.014-2.298.124.124 0 00.006-.056.085.085 0 00-.027-.048 4.467 4.467 0 01-1.034-1.651 3.896 3.896 0 01-.251-1.192 5.189 5.189 0 01.141-1.6c.337-1.112.982-1.985 1.933-2.618.212-.141.413-.251.601-.33.215-.089.43-.164.646-.227a.098.098 0 00.065-.066 4.51 4.51 0 01.829-1.615 4.535 4.535 0 011.837-1.388zm3.482 10.565a.637.637 0 000 1.272h3.636a.637.637 0 100-1.272h-3.636zM8.462 9.23a.637.637 0 00-1.106.631l1.272 2.224-1.266 2.136a.636.636 0 101.095.649l1.454-2.455a.636.636 0 00.005-.64L8.462 9.23z" fill="url(#lobe-icons-codex-_R_0_)"></path><defs><linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-codex-_R_0_" x1="12" x2="12" y1="3" y2="21"><stop stop-color="#B1A7FF"></stop><stop offset=".5" stop-color="#7A9DFF"></stop><stop offset="1" stop-color="#3941FF"></stop></linearGradient></defs></svg>

package/public/assets/copilot-color.svg

@@ -0,0 +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>

package/public/css/base.css

@@ -4,10 +4,9 @@
 [hidden] { display: none !important; }
 
 html {
-  /* Reserve the scrollbar lane so the layout never shifts horizontally
-     when content grows past one viewport. Both columns of scroll-gutter
-     stay symmetric (Firefox/Chromium both honor this). */
-  scrollbar-gutter: stable;
+  /* No reserved scrollbar gutter — the sessions page is full-bleed and a
+     reserved right-side lane shows as visible empty space against the
+     terminal. Pages that overflow get the standard overlay scrollbar. */
 }
 html, body {
   background: var(--bg);
@@ -16,12 +15,30 @@ html, body {
   font-size: 14px;
   line-height: 1.5;
   font-variant-numeric: tabular-nums;
+  font-feature-settings: "ss01", "ss02", "cv11";
   min-height: 100vh;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
 }
 
+/* Layer the paper grain over the entire app surface — fixed so panning
+   doesn't shift the noise pattern under the cursor. Subtle enough that
+   you only notice it on cream regions, never on terminals or images. */
+body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+  background-image: var(--paper-noise);
+  opacity: 0.55;
+  mix-blend-mode: multiply;
+}
+#app { position: relative; z-index: 1; }
+
 ::selection { background: var(--ink); color: var(--bg-elev); }
+::-moz-selection { background: var(--ink); color: var(--bg-elev); }
 
 code, .kbd {
   font-family: var(--mono);
@@ -43,7 +60,7 @@ code, .kbd {
 ::-webkit-scrollbar-track { background: transparent; }
 ::-webkit-scrollbar-thumb {
   background: var(--border-strong);
-  border-radius: 8px;
+  border-radius: 4px;
   border: 2px solid var(--bg);
   /* Forced minimum height so dragging the thumb is always practical even on
      very long pages. */