@bakapiano/ccsm 0.9.0 → 0.10.1

package/public/index.html

@@ -8,17 +8,49 @@
          honor this in standalone app windows. -->
     <meta name="theme-color" content="#faf9f5" />
     <meta name="color-scheme" content="light" />
-    <title>CCSM — Claude CLI Sessions Manager</title>
+    <title>CCSM</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/ccsm/v1/ (GH Pages hosted). -->
     <link rel="icon" type="image/svg+xml" href="./favicon.svg" />
     <link rel="manifest" href="./manifest.webmanifest" />
+    <!-- Apply saved accent color BEFORE stylesheets/paint to avoid a
+         flash of the default theme. Mirrors applyAccentCssVars() in
+         state.js (only the bg-tinted vars that affect first paint). -->
+    <script>
+      (function () {
+        try {
+          var hex = localStorage.getItem('ccsm.accent');
+          if (!/^#[0-9a-fA-F]{6}$/.test(hex || '')) return;
+          var n = parseInt(hex.slice(1), 16);
+          var r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;
+          var toHex = function (v) { v = Math.max(0, Math.min(255, Math.round(v))); var s = v.toString(16); return s.length < 2 ? '0' + s : s; };
+          var mix = function (t) { return '#' + toHex(r * t + 255 * (1 - t)) + toHex(g * t + 255 * (1 - t)) + toHex(b * t + 255 * (1 - t)); };
+          var darken = function (a) { return '#' + toHex(r * (1 - a)) + toHex(g * (1 - a)) + toHex(b * (1 - a)); };
+          var bg = mix(0.04);
+          var root = document.documentElement.style;
+          root.setProperty('--accent', hex);
+          root.setProperty('--accent-deep', darken(0.2));
+          root.setProperty('--accent-soft',   'rgba(' + r + ',' + g + ',' + b + ',0.10)');
+          root.setProperty('--accent-softer', 'rgba(' + r + ',' + g + ',' + b + ',0.04)');
+          root.setProperty('--bg', bg);
+          root.setProperty('--sidebar-bg', bg);
+          root.setProperty('--sidebar-hover', mix(0.10));
+          root.setProperty('--sidebar-active', mix(0.15));
+          root.setProperty('--border', mix(0.15));
+          root.setProperty('--border-soft', mix(0.12));
+          root.setProperty('--border-strong', mix(0.25));
+          root.setProperty('--ui-bg', mix(0.10));
+          var meta = document.querySelector('meta[name="theme-color"]');
+          if (meta) meta.setAttribute('content', bg);
+        } catch (_) {}
+      })();
+    </script>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
       rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=Geist:wght@300..700&family=JetBrains+Mono:wght@400..600&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Geist:wght@300..700&family=Geist+Mono:wght@400..600&family=JetBrains+Mono:wght@400..600&display=swap"
     />
     <link rel="stylesheet" href="./css/tokens.css" />
     <link rel="stylesheet" href="./css/base.css" />
@@ -39,6 +71,7 @@
         "imports": {
           "preact":             "https://esm.sh/preact@10.27.0",
           "preact/hooks":       "https://esm.sh/preact@10.27.0/hooks",
+          "preact/compat":      "https://esm.sh/preact@10.27.0/compat",
           "@preact/signals":    "https://esm.sh/@preact/signals@1.3.2?deps=preact@10.27.0",
           "htm":                "https://esm.sh/htm@3.1.1",
           "@xterm/xterm":       "https://esm.sh/@xterm/xterm@5.5.0",

package/public/js/api.js

@@ -16,62 +16,200 @@ export async function api(method, url, body) {
 }
 
 export async function loadConfig() {
-  const [cfg, terms, caps] = await Promise.all([
+  const [cfg, caps] = await Promise.all([
     api('GET', '/api/config'),
-    api('GET', '/api/terminals'),
     api('GET', '/api/capabilities').catch(() => ({ webTerminal: false })),
   ]);
   S.config.value = cfg;
-  S.terminals.value = terms.terminals;
   S.capabilities.value = caps;
 }
 
-export async function loadWebTerminals() {
-  try {
-    const r = await api('GET', '/api/sessions/web');
-    S.webTerminals.value = r.terminals || [];
-  } catch { /* node-pty might be unavailable */ }
+// Update an existing CLI by id. patch is shallow-merged into the record.
+export async function updateCli(id, patch) {
+  const cfg = S.config.value || (await api('GET', '/api/config'));
+  const target = (cfg.clis || []).find((c) => c.id === id);
+  // Built-in CLIs lock down identity-defining fields. UI already greys these
+  // out; we belt-and-braces here so a tampered request from elsewhere
+  // can't change them either.
+  if (target?.builtin) {
+    delete patch.command;
+    delete patch.id;
+    delete patch.builtin;
+  }
+  const toArr = (v, fallback) => Array.isArray(v) ? v :
+    typeof v === 'string' ? v.split(/\s+/).filter(Boolean) : fallback;
+  const next = {
+    ...cfg,
+    clis: (cfg.clis || []).map((c) => c.id === id ? {
+      ...c, ...patch,
+      args: toArr(patch.args, c.args),
+      resumeArgs: toArr(patch.resumeArgs, c.resumeArgs || []),
+      shell: ['direct', 'pwsh', 'cmd'].includes(patch.shell ?? c.shell) ? (patch.shell ?? c.shell) : 'direct',
+    } : c),
+  };
+  const saved = await api('PUT', '/api/config', next);
+  S.config.value = saved;
+  return id;
+}
+
+export async function deleteCli(id) {
+  const cfg = S.config.value || (await api('GET', '/api/config'));
+  const target = (cfg.clis || []).find((c) => c.id === id);
+  if (target?.builtin) throw new Error(`"${target.name}" is built-in and can't be deleted`);
+  const clis = (cfg.clis || []).filter((c) => c.id !== id);
+  if (clis.length === 0) throw new Error('cannot delete the last CLI');
+  const next = { ...cfg, clis };
+  if (next.defaultCliId === id) next.defaultCliId = clis[0].id;
+  const saved = await api('PUT', '/api/config', next);
+  S.config.value = saved;
+}
+
+export async function updateRepo(name, patch) {
+  const cfg = S.config.value || (await api('GET', '/api/config'));
+  const next = {
+    ...cfg,
+    repos: (cfg.repos || []).map((r) => r.name === name ? {
+      ...r,
+      name: (patch.name ?? r.name).trim(),
+      url: (patch.url ?? r.url).trim(),
+      defaultSelected: patch.defaultSelected ?? r.defaultSelected,
+    } : r),
+  };
+  const saved = await api('PUT', '/api/config', next);
+  S.config.value = saved;
+}
+
+export async function deleteRepo(name) {
+  const cfg = S.config.value || (await api('GET', '/api/config'));
+  const next = { ...cfg, repos: (cfg.repos || []).filter((r) => r.name !== name) };
+  const saved = await api('PUT', '/api/config', next);
+  S.config.value = saved;
 }
 
-export async function killWebTerminal(id) {
-  await api('DELETE', `/api/sessions/web/${id}`);
-  await loadWebTerminals();
+export async function setDefaultCli(id) {
+  const cfg = S.config.value || (await api('GET', '/api/config'));
+  const saved = await api('PUT', '/api/config', { ...cfg, defaultCliId: id });
+  S.config.value = saved;
+}
+
+// Add a new CLI to config.clis and return its id. Generates a fresh id
+// from the command name + an integer suffix when collisions exist.
+export async function createCli({ name, command, args, resumeArgs, shell, type }) {
+  const cfg = S.config.value || (await api('GET', '/api/config'));
+  const base = (name || command || 'cli').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '') || 'cli';
+  let id = base, n = 1;
+  while ((cfg.clis || []).some((c) => c.id === id)) { id = `${base}-${++n}`; }
+  const toArr = (v) => Array.isArray(v) ? v : (typeof v === 'string' ? v.split(/\s+/).filter(Boolean) : []);
+  const next = {
+    ...cfg,
+    clis: [...(cfg.clis || []), {
+      id,
+      name: (name || command || id).trim(),
+      command: (command || '').trim(),
+      args: toArr(args),
+      resumeArgs: toArr(resumeArgs),
+      shell: ['direct', 'pwsh', 'cmd'].includes(shell) ? shell : 'direct',
+      type: ['claude', 'codex', 'other'].includes(type) ? type : 'other',
+    }],
+  };
+  const saved = await api('PUT', '/api/config', next);
+  S.config.value = saved;
+  return id;
+}
+
+// Add a new repo to config.repos. Repos are addressed by name (which must
+// be unique). Returns the name on success, throws on duplicate.
+export async function createRepo({ name, url, defaultSelected }) {
+  const cfg = S.config.value || (await api('GET', '/api/config'));
+  const cleanName = (name || '').trim();
+  const cleanUrl = (url || '').trim();
+  if (!cleanName) throw new Error('repo name required');
+  if (!cleanUrl) throw new Error('repo url required');
+  if ((cfg.repos || []).some((r) => r.name === cleanName)) {
+    throw new Error(`repo "${cleanName}" already exists`);
+  }
+  const next = {
+    ...cfg,
+    repos: [...(cfg.repos || []), {
+      name: cleanName,
+      url: cleanUrl,
+      defaultSelected: !!defaultSelected,
+    }],
+  };
+  const saved = await api('PUT', '/api/config', next);
+  S.config.value = saved;
+  return cleanName;
 }
 
 export async function loadSessions() {
   const r = await api('GET', '/api/sessions');
-  S.sessions.value = r.sessions;
+  S.sessions.value = r.sessions || [];
+  try { localStorage.setItem('ccsm.sessions-cache', JSON.stringify(S.sessions.value)); } catch {}
 }
 
-export async function loadRecent() {
-  const r = await api('GET', `/api/sessions/recent?limit=${S.recentLimit.value}&offset=${S.recentOffset.value}`);
-  S.recent.value = r.recent;
-  S.recentTotal.value = r.total || 0;
-  S.recentLimit.value = r.limit || S.recentLimit.value;
-  S.recentOffset.value = r.offset || 0;
+export async function loadFolders() {
+  const r = await api('GET', '/api/folders');
+  S.folders.value = (r.folders || []).sort((a, b) => (a.order || 0) - (b.order || 0));
+  try { localStorage.setItem('ccsm.folders-cache', JSON.stringify(S.folders.value)); } catch {}
 }
 
-export async function loadFavorites() {
-  try {
-    const r = await api('GET', '/api/favorites');
-    const map = {};
-    for (const f of r.favorites || []) map[f.sessionId] = f;
-    S.favorites.value = map;
-  } catch (e) { /* ignore — endpoint may not exist on older servers */ }
+export async function createFolder(name) {
+  const r = await api('POST', '/api/folders', { name });
+  await loadFolders();
+  return r.folder;
 }
 
-export async function loadLabels() {
-  try {
-    const r = await api('GET', '/api/labels');
-    S.labels.value = r.labels || {};
-  } catch (e) { /* ignore */ }
+export async function renameFolder(id, name) {
+  const r = await api('PUT', `/api/folders/${id}`, { name });
+  await loadFolders();
+  return r.folder;
+}
+
+export async function deleteFolder(id) {
+  await api('DELETE', `/api/folders/${id}`);
+  await Promise.all([loadFolders(), loadSessions()]);
+}
+
+export async function reorderFolders(ids) {
+  const r = await api('POST', '/api/folders/reorder', { ids });
+  await loadFolders();
+  return r.folders;
+}
+
+export async function setSessionFolder(sessionId, folderId) {
+  await api('PUT', `/api/sessions/${sessionId}`, { folderId: folderId || null });
+  await loadSessions();
+}
+
+export async function setSessionTitle(sessionId, title) {
+  await api('PUT', `/api/sessions/${sessionId}`, { title });
+  await loadSessions();
+}
+
+export async function deleteSession(sessionId) {
+  await api('DELETE', `/api/sessions/${sessionId}`);
+  await loadSessions();
 }
 
-export async function loadSnapshot() {
-  const r = await api('GET', '/api/snapshot');
-  S.snapshot.value = r.snapshot;
-  const h = await api('GET', '/api/snapshot/history');
-  S.history.value = h.history;
+// Per-session in-flight resume promise. Sidebar.onClick and the
+// SessionsPage auto-resume effect can both fire for the same exited
+// session in the same tick (clicking an exited row mounts SessionsPage
+// which runs its effect AND awaits Sidebar's own POST). Without this
+// dedup the backend gets two concurrent /resume requests and may spawn
+// two PTYs against the same record. Cleared on resolve/reject.
+const resumeInFlight = new Map(); // sessionId → Promise
+
+export function resumeSession(sessionId) {
+  const cached = resumeInFlight.get(sessionId);
+  if (cached) return cached;
+  const p = (async () => {
+    const r = await api('POST', `/api/sessions/${sessionId}/resume`);
+    await loadSessions();
+    return r.launched;
+  })();
+  resumeInFlight.set(sessionId, p);
+  p.finally(() => { resumeInFlight.delete(sessionId); });
+  return p;
 }
 
 export async function loadWorkspaces() {
@@ -79,14 +217,33 @@ export async function loadWorkspaces() {
   S.workspaces.value = r.workspaces;
 }
 
+export async function deleteWorkspace(name) {
+  await api('DELETE', `/api/workspaces/${encodeURIComponent(name)}`);
+}
+
 export async function refreshAll() {
   await Promise.all([
-    loadSessions(), loadRecent(), loadSnapshot(),
-    loadWorkspaces(), loadFavorites(), loadLabels(), loadWebTerminals(),
+    loadSessions(),
+    loadFolders(),
+    loadWorkspaces(),
   ]);
   S.lastRefreshAt.value = Date.now();
 }
 
+// List existing CLI sessions discovered on disk for a given cli type.
+// Returns array of { cliType, cliSessionId, cwd, mtime, summary, adopted }.
+export async function listLocalCliSessions(cliType) {
+  const r = await api('GET', `/api/cli-sessions/${cliType}`);
+  return r.sessions || [];
+}
+
+// Adopt an existing upstream CLI session into ccsm. Returns the created
+// (or existing) persistedSessions record.
+export async function adoptSession({ cliId, cliSessionId, cwd, title, folderId }) {
+  const r = await api('POST', '/api/sessions/adopt', { cliId, cliSessionId, cwd, title, folderId });
+  return r;
+}
+
 export async function pollHealth() {
   const ctrl = new AbortController();
   const t = setTimeout(() => ctrl.abort(), 3000);

package/public/js/components/AdoptModal.js

@@ -0,0 +1,171 @@
+// "Import existing session" modal. Browses sessions discovered on disk
+// for claude / codex / copilot, lets the user pick one, choose which
+// configured CLI it should be tied to, and adopts it — a ccsm
+// persistedSessions record is created with the upstream session id
+// pre-filled so clicking it later runs `<cli> --resume <id>` (via
+// cli.resumeIdArgs).
+//
+// Props:
+//   onClose()                    — close request
+//   onAdopted(sessionId)         — fires after a successful adopt with
+//                                  the new (or pre-existing) record id
+//
+// Shows a row of cli-type tabs at the top. Each tab loads on first
+// click. Adopted rows are greyed out and labelled.
+
+import { html } from '../html.js';
+import { useState, useEffect } from 'preact/hooks';
+import { Modal } from './Modal.js';
+import { config } from '../state.js';
+import { listLocalCliSessions, adoptSession } from '../api.js';
+import { setToast } from '../toast.js';
+import { IconForCliType, IconClaudeColor, IconCodexColor, IconCopilotColor } from '../icons.js';
+
+const TABS = [
+  { type: 'claude',  label: 'Claude',  Icon: IconClaudeColor },
+  { type: 'codex',   label: 'Codex',   Icon: IconCodexColor },
+  { type: 'copilot', label: 'Copilot', Icon: IconCopilotColor },
+];
+
+export function AdoptModal({ onClose, onAdopted }) {
+  const [tab, setTab] = useState('claude');
+  // cache per tab so flipping back is instant
+  const [cache, setCache] = useState({}); // { claude: {loading, error, items} }
+  const [adopting, setAdopting] = useState(null); // cliSessionId being adopted
+
+  const load = async (type, { force = false } = {}) => {
+    if (!force && cache[type] && !cache[type].error) return;
+    setCache((c) => ({ ...c, [type]: { loading: true, items: [], error: null } }));
+    try {
+      const items = await listLocalCliSessions(type);
+      setCache((c) => ({ ...c, [type]: { loading: false, items, error: null } }));
+    } catch (e) {
+      setCache((c) => ({ ...c, [type]: { loading: false, items: [], error: e.message } }));
+    }
+  };
+
+  useEffect(() => { load(tab); /* eslint-disable-next-line */ }, [tab]);
+
+  const cfg = config.value || {};
+  const clis = cfg.clis || [];
+  // Pick first matching configured CLI for the current upstream type; fall
+  // back to the configured default. Users can change per-row via the select.
+  const defaultCliFor = (type) => {
+    const match = clis.find((c) => c.type === type);
+    if (match) return match.id;
+    return cfg.defaultCliId || clis[0]?.id || '';
+  };
+  const [chosenCli, setChosenCli] = useState({}); // cliSessionId → cli id override
+
+  const adopt = async (item) => {
+    const cliId = chosenCli[item.cliSessionId] || defaultCliFor(item.cliType);
+    if (!cliId) { setToast('configure a CLI first', 'error'); return; }
+    setAdopting(item.cliSessionId);
+    try {
+      const r = await adoptSession({
+        cliId,
+        cliSessionId: item.cliSessionId,
+        cwd: item.cwd,
+        title: item.summary || '',
+      });
+      if (r.alreadyAdopted) {
+        setToast('already in ccsm — opened existing record');
+      } else {
+        setToast(`imported · ${item.cliSessionId.slice(0, 8)}…`);
+      }
+      // Mark adopted in the cache so the UI updates instantly.
+      setCache((c) => ({
+        ...c,
+        [tab]: c[tab] ? {
+          ...c[tab],
+          items: c[tab].items.map((x) => x.cliSessionId === item.cliSessionId
+            ? { ...x, adopted: true } : x),
+        } : c[tab],
+      }));
+      onAdopted?.(r.session?.id);
+    } catch (e) {
+      setToast(e.message, 'error');
+    } finally {
+      setAdopting(null);
+    }
+  };
+
+  const state = cache[tab] || { loading: true, items: [], error: null };
+
+  return html`
+    <${Modal} title="Import existing session" onClose=${onClose} width=${640}>
+      <div class="adopt-tabs">
+        ${TABS.map((t) => html`
+          <button type="button"
+                  class=${`adopt-tab${tab === t.type ? ' is-active' : ''}`}
+                  onClick=${() => setTab(t.type)}>
+            <span class="adopt-tab-icon"><${t.Icon} /></span>
+            <span>${t.label}</span>
+          </button>`)}
+        <button type="button" class="action subtle adopt-refresh"
+                title="Rescan"
+                onClick=${() => load(tab, { force: true })}>Refresh</button>
+      </div>
+
+      <div class="adopt-body">
+        ${state.loading ? html`
+          <div class="adopt-empty">Scanning…</div>
+        ` : state.error ? html`
+          <div class="adopt-empty adopt-error">${state.error}</div>
+        ` : state.items.length === 0 ? html`
+          <div class="adopt-empty">No ${tab} sessions found on this machine.</div>
+        ` : html`
+          <ul class="adopt-list">
+            ${state.items.map((it) => html`
+              <li class=${`adopt-item${it.adopted ? ' is-adopted' : ''}`}
+                  key=${it.cliSessionId}>
+                <div class="adopt-main">
+                  <div class="adopt-title">
+                    ${it.summary || html`<span class="ink-faint">(no preview)</span>`}
+                  </div>
+                  <div class="adopt-meta mono">
+                    ${it.cwd}
+                    <span class="adopt-sep">·</span>
+                    ${relTime(it.mtime)}
+                    <span class="adopt-sep">·</span>
+                    ${it.cliSessionId.slice(0, 8)}…
+                  </div>
+                </div>
+                <div class="adopt-actions">
+                  ${clis.length > 1 ? html`
+                    <select class="adopt-cli-select"
+                            value=${chosenCli[it.cliSessionId] || defaultCliFor(it.cliType)}
+                            onChange=${(e) => setChosenCli((m) => ({ ...m, [it.cliSessionId]: e.target.value }))}
+                            disabled=${it.adopted}>
+                      ${clis.map((c) => html`<option value=${c.id}>${c.name}</option>`)}
+                    </select>
+                  ` : null}
+                  ${it.adopted ? html`
+                    <span class="adopt-badge">Imported</span>
+                  ` : html`
+                    <button type="button" class="action primary adopt-btn"
+                            disabled=${adopting === it.cliSessionId}
+                            onClick=${() => adopt(it)}>
+                      ${adopting === it.cliSessionId ? 'Importing…' : 'Import'}
+                    </button>
+                  `}
+                </div>
+              </li>`)}
+          </ul>
+        `}
+      </div>
+    </${Modal}>`;
+}
+
+function relTime(ms) {
+  if (!ms) return '';
+  const d = Date.now() - ms;
+  const s = Math.round(d / 1000);
+  if (s < 60) return `${s}s ago`;
+  const m = Math.round(s / 60);
+  if (m < 60) return `${m}m ago`;
+  const h = Math.round(m / 60);
+  if (h < 48) return `${h}h ago`;
+  const days = Math.round(h / 24);
+  return `${days}d ago`;
+}

package/public/js/components/App.js

@@ -1,16 +1,11 @@
 import { html } from '../html.js';
 import { activeTab } from '../state.js';
 import { Sidebar } from './Sidebar.js';
-import { PageHead } from './PageHead.js';
-import { Footer } from './Footer.js';
 import { Toast } from './Toast.js';
-import { Fab } from './Fab.js';
-import { NewSessionModal } from './NewSessionModal.js';
 import { DialogHost } from './DialogHost.js';
 import { OfflineBanner } from './OfflineBanner.js';
 import { SessionsPage } from '../pages/SessionsPage.js';
 import { LaunchPage } from '../pages/LaunchPage.js';
-import { TerminalsPage } from '../pages/TerminalsPage.js';
 import { ConfigurePage } from '../pages/ConfigurePage.js';
 import { AboutPage } from '../pages/AboutPage.js';
 
@@ -26,19 +21,14 @@ export function App() {
     <div class="app">
       <${Sidebar} />
       <main class="main">
-        <${PageHead} />
-        <${OfflineBanner} />
         <div class="content">
           ${tab === 'sessions'  ? html`<${Panel} name="sessions"><${SessionsPage}   /></${Panel}>` : null}
           ${tab === 'launch'    ? html`<${Panel} name="launch"><${LaunchPage}     /></${Panel}>` : null}
-          ${tab === 'terminals' ? html`<${Panel} name="terminals"><${TerminalsPage} /></${Panel}>` : null}
           ${tab === 'configure' ? html`<${Panel} name="configure"><${ConfigurePage} /></${Panel}>` : null}
           ${tab === 'about'     ? html`<${Panel} name="about"><${AboutPage}     /></${Panel}>` : null}
         </div>
-        <${Footer} />
       </main>
-      <${Fab} />
-      <${NewSessionModal} />
+      <${OfflineBanner} />
       <${Toast} />
       <${DialogHost} />
     </div>`;