@bakapiano/ccsm 0.6.0 → 0.8.4

package/public/js/pages/SessionsPage.js

@@ -0,0 +1,47 @@
+import { html } from '../html.js';
+import { sessions, recentTotal, favoritesList, clockTick } from '../state.js';
+import { Card } from '../components/Card.js';
+import { SessionsTable } from '../components/SessionsTable.js';
+import { RecentTable } from '../components/RecentTable.js';
+import { FavoritesTable } from '../components/FavoritesTable.js';
+import { runFinder } from '../actions.js';
+import { IconSearch, StarSmallFilled } from '../icons.js';
+import { nowClock } from '../util.js';
+
+export function SessionsPage() {
+  void clockTick.value;
+  const sessCount = sessions.value.length;
+  const favCount = favoritesList.value.length;
+
+  const sessionsMeta = sessCount
+    ? `${sessCount} live · refreshed ${nowClock()}`
+    : 'no live sessions';
+  const recentMeta = recentTotal.value
+    ? `${recentTotal.value} total · sorted by jsonl mtime, excluding live`
+    : 'no recent sessions';
+  const favMeta = favCount ? `${favCount} pinned` : 'click ☆ on any row to pin sessions here';
+
+  return html`
+    <div class="page-actions">
+      <span class="page-actions-hint">Looking through your past conversations?</span>
+      <button class="action primary" onClick=${runFinder}
+              title="open a Claude session with context on the ccsm data dir">
+        <${IconSearch} stroke=${2} /> Ask Claude to find a session
+      </button>
+    </div>
+
+    <${Card} foldKey="favorites"
+             title=${html`Favorites <${StarSmallFilled} />`}
+             meta=${favMeta}
+             flush=${true}>
+      <${FavoritesTable} />
+    </${Card}>
+
+    <${Card} foldKey="sessions" title="Live sessions" meta=${sessionsMeta} flush=${true}>
+      <${SessionsTable} />
+    </${Card}>
+
+    <${Card} foldKey="recent" title="Recently closed" meta=${recentMeta} flush=${true}>
+      <${RecentTable} />
+    </${Card}>`;
+}

package/public/js/pages/TerminalsPage.js

@@ -0,0 +1,74 @@
+// Left rail · list of active web sessions + right pane with selected one's xterm.
+
+import { html } from '../html.js';
+import { useEffect } from 'preact/hooks';
+import { webTerminals, activeTerminalId, selectTab } from '../state.js';
+import { loadWebTerminals, killWebTerminal } from '../api.js';
+import { setToast } from '../toast.js';
+import { ccsmConfirm } from '../dialog.js';
+import { TerminalView } from '../components/TerminalView.js';
+import { fmtAgo } from '../util.js';
+
+export function TerminalsPage() {
+  const list = webTerminals.value;
+  const activeId = activeTerminalId.value;
+
+  // Auto-select the first available terminal if nothing is active
+  useEffect(() => {
+    if (!activeId && list.length > 0) activeTerminalId.value = list[0].id;
+    if (activeId && !list.find((t) => t.id === activeId)) {
+      activeTerminalId.value = list[0]?.id || null;
+    }
+  }, [list.map((t) => t.id).join('|'), activeId]);
+
+  if (list.length === 0) {
+    return html`
+      <div class="terminal-empty-page">
+        <div class="card">
+          <div class="card-body" style="text-align: center; padding: 60px var(--s-6);">
+            <p style="font-size: 14px; color: var(--ink-mid); margin-bottom: var(--s-4);">
+              No terminals open yet.
+            </p>
+            <button class="action primary" onClick=${() => selectTab('launch')}>
+              + Launch a session
+            </button>
+          </div>
+        </div>
+      </div>`;
+  }
+
+  return html`
+    <div class="terminals-layout">
+      <aside class="terminals-rail">
+        <div class="terminals-rail-head">
+          <span>${list.length} active</span>
+          <button class="action subtle tiny" title="refresh list" onClick=${() => loadWebTerminals()}>↻</button>
+        </div>
+        ${list.map((t) => html`
+          <button key=${t.id} class=${`terminal-row${activeId === t.id ? ' is-active' : ''}`}
+                  onClick=${() => (activeTerminalId.value = t.id)}>
+            <span class=${`status-mark ${t.exitedAt ? 'unknown' : 'busy'}`}></span>
+            <span class="terminal-row-title">${t.meta.title || t.id.slice(0, 12)}</span>
+            <span class="terminal-row-meta">${fmtAgo(t.meta.startedAt)}</span>
+            <span class="terminal-row-actions">
+              <button class="action tiny danger" title="kill this session"
+                      onClick=${(ev) => { ev.stopPropagation(); confirmKill(t); }}>×</button>
+            </span>
+          </button>`)}
+      </aside>
+      <main class="terminals-main">
+        <${TerminalView} terminalId=${activeId} />
+      </main>
+    </div>`;
+}
+
+async function confirmKill(t) {
+  const ok = await ccsmConfirm(`Kill ${t.meta.title || t.id}? The PTY process will be terminated.`, {
+    title: 'Kill session', okLabel: 'Kill', danger: true,
+  });
+  if (!ok) return;
+  try {
+    await killWebTerminal(t.id);
+    setToast(`killed · ${t.id.slice(0, 12)}`);
+  } catch (e) { setToast(e.message, 'error'); }
+}

package/public/js/state.js

@@ -0,0 +1,87 @@
+// All shared reactive state. Importing a signal anywhere subscribes the
+// reading component, so we never need a store / context wrapper.
+
+import { signal, computed } from '@preact/signals';
+
+// ── server-driven data ──────────────────────────────────────────
+export const config       = signal(null);
+export const terminals    = signal([]);
+export const capabilities = signal({ webTerminal: false });
+export const sessions     = signal([]);
+export const webTerminals = signal([]);          // active in-page PTY sessions
+export const activeTerminalId = signal(null);    // which one's open in the right pane
+export const recent       = signal([]);
+export const recentTotal  = signal(0);
+export const favorites    = signal({});   // { sessionId: {sessionId, cwd, title, gitBranch, addedAt} }
+export const labels       = signal({});   // { sessionId: customLabel }
+export const workspaces   = signal([]);
+export const snapshot     = signal(null);
+export const history      = signal([]);
+export const serverHealth = signal({ state: 'connecting' });
+
+// ── ui state (persisted in localStorage where noted) ───────────
+export const activeTab        = signal('sessions');
+export const sidebarCollapsed = signal(false);
+// 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);
+export const modalOpen        = signal(false);
+export const clockTick        = signal(Date.now());      // re-ticked each second so fmtAgo refreshes
+export const lastRefreshAt    = signal(0);               // ms timestamp of last successful refreshAll()
+export const installPrompt    = signal(null);            // captured beforeinstallprompt event (PWA install)
+export const isInstalledPwa   = signal(false);           // running inside an installed PWA window (display-mode: standalone+)
+
+// ── pagination ──────────────────────────────────────────────────
+export const sessionsOffset  = signal(0);
+export const sessionsLimit   = signal(10);
+export const favoritesOffset = signal(0);
+export const favoritesLimit  = signal(10);
+export const recentOffset    = signal(0);
+export const recentLimit     = signal(10);
+
+// ── derived ─────────────────────────────────────────────────────
+export const favoritesList = computed(() =>
+  Object.values(favorites.value).sort((a, b) => (b.addedAt || 0) - (a.addedAt || 0))
+);
+
+export const TAB_HEADINGS = {
+  sessions:  { title: 'Sessions',  subtitle: 'Live and recently-closed Claude Code sessions on this machine.' },
+  launch:    { title: 'Launch',    subtitle: 'Spin up a new session in a fresh workspace, or restore from snapshot.' },
+  terminals: { title: 'Terminals', subtitle: 'Claude sessions running in this page.' },
+  configure: { title: 'Configure', subtitle: 'Persisted to ~/.ccsm/config.json.' },
+  about:     { title: 'About',     subtitle: 'ccsm — Claude Code Session Manager.' },
+};
+
+// ── persistence helpers (localStorage) ──────────────────────────
+const LS_SIDEBAR = 'ccsm.sidebar-collapsed';
+const LS_FOLD = (k) => `ccsm.fold.${k}`;
+
+export function loadPersisted() {
+  sidebarCollapsed.value = localStorage.getItem(LS_SIDEBAR) === 'true';
+  const folds = { ...cardFolded.value };
+  for (const k of Object.keys(folds)) {
+    folds[k] = localStorage.getItem(LS_FOLD(k)) === '1';
+  }
+  cardFolded.value = folds;
+
+  const hash = location.hash.slice(1);
+  if (TAB_HEADINGS[hash]) activeTab.value = hash;
+}
+
+// ── actions ─────────────────────────────────────────────────────
+export function selectTab(name) {
+  if (!TAB_HEADINGS[name]) name = 'sessions';
+  activeTab.value = name;
+  if (location.hash !== `#${name}`) window.history.replaceState(null, '', `#${name}`);
+}
+
+export function toggleSidebar() {
+  sidebarCollapsed.value = !sidebarCollapsed.value;
+  localStorage.setItem(LS_SIDEBAR, String(sidebarCollapsed.value));
+}
+
+export function toggleCardFold(key) {
+  const next = { ...cardFolded.value, [key]: !cardFolded.value[key] };
+  cardFolded.value = next;
+  localStorage.setItem(LS_FOLD(key), next[key] ? '1' : '0');
+}

package/public/js/streaming.js

@@ -0,0 +1,96 @@
+// NDJSON clone-progress stream + per-repo progress state.
+// Items live in a signal keyed by repo so progress rows are reactive.
+
+import { signal } from '@preact/signals';
+import { httpBase } from './backend.js';
+
+// progressByContext[rootId] = { repoName: { phase, percent, detail, state, indeterminate, name } }
+export const progressByContext = signal({});
+
+export function resetProgress(repos, rootId = 'newSessionProgress') {
+  const next = { ...progressByContext.value };
+  next[rootId] = {};
+  for (const r of repos) {
+    next[rootId][r] = { name: r, phase: 'queued', percent: null, detail: '', state: null, indeterminate: false };
+  }
+  progressByContext.value = next;
+}
+
+function patchProgress(rootId, repo, patch) {
+  const current = progressByContext.value[rootId] || {};
+  const item = current[repo];
+  if (!item) return;
+  const updated = { ...item, ...patch };
+  if (patch.state) {
+    updated.state = (patch.state === 'ok' || patch.state === 'error') ? patch.state : null;
+  }
+  progressByContext.value = {
+    ...progressByContext.value,
+    [rootId]: { ...current, [repo]: updated },
+  };
+}
+
+function applyEvent(ev, rootId) {
+  switch (ev.type) {
+    case 'clone-start':
+      patchProgress(rootId, ev.repo, { phase: 'starting', indeterminate: true, percent: null });
+      break;
+    case 'clone-progress':
+      patchProgress(rootId, ev.repo, {
+        phase: ev.phase,
+        percent: ev.percent,
+        detail: ev.detail || (ev.current != null ? `${ev.current}/${ev.total}` : ''),
+        indeterminate: false,
+      });
+      break;
+    case 'clone-end':
+      if (ev.ok) {
+        patchProgress(rootId, ev.repo, {
+          phase: ev.action || 'done', percent: 100, detail: ev.path || '', state: 'ok', indeterminate: false,
+        });
+      } else {
+        patchProgress(rootId, ev.repo, {
+          phase: 'error', detail: ev.error, state: 'error', indeterminate: false,
+        });
+      }
+      break;
+  }
+}
+
+// onMeta(event) is called for workspace/launched/done events so the caller can
+// surface them in their own result text area.
+export async function streamNewSession(body, { progressRootId = 'newSessionProgress', onMeta } = {}) {
+  const res = await fetch(httpBase() + '/api/sessions/new', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  });
+  if (!res.ok && res.headers.get('content-type')?.startsWith('application/json')) {
+    const j = await res.json();
+    throw new Error(j.error || `HTTP ${res.status}`);
+  }
+  const reader = res.body.getReader();
+  const decoder = new TextDecoder();
+  let buf = '';
+  let final = null;
+  const consume = (raw) => {
+    if (!raw.trim()) return;
+    let event;
+    try { event = JSON.parse(raw); } catch { return; }
+    applyEvent(event, progressRootId);
+    if (onMeta && (event.type === 'workspace' || event.type === 'launched' || event.type === 'done')) {
+      onMeta(event);
+    }
+    if (event.type === 'done') final = event;
+  };
+  while (true) {
+    const { done, value } = await reader.read();
+    if (done) break;
+    buf += decoder.decode(value, { stream: true });
+    const lines = buf.split('\n');
+    buf = lines.pop();
+    for (const line of lines) consume(line);
+  }
+  if (buf) consume(buf);
+  return final || { success: false, error: 'stream ended unexpectedly' };
+}

package/public/js/toast.js

@@ -0,0 +1,14 @@
+// Single-slot toast. setToast('msg', 'ok'|'error') schedules an auto-hide.
+
+import { signal } from '@preact/signals';
+
+export const toastState = signal({ msg: '', kind: 'ok', visible: false });
+let timer = null;
+
+export function setToast(msg, kind = 'ok') {
+  toastState.value = { msg, kind, visible: true };
+  clearTimeout(timer);
+  timer = setTimeout(() => {
+    toastState.value = { ...toastState.value, visible: false };
+  }, 3200);
+}

package/public/js/util.js

@@ -0,0 +1,24 @@
+// Pure formatters · no DOM access.
+
+export function fmtTime(ms) {
+  if (!ms) return '—';
+  return new Date(ms).toLocaleString(undefined, { hour12: false });
+}
+
+export function fmtAgo(ms) {
+  if (!ms) return '—';
+  const sec = Math.floor((Date.now() - ms) / 1000);
+  if (sec < 60) return `${sec}s`;
+  if (sec < 3600) return `${Math.floor(sec / 60)}m`;
+  if (sec < 86400) return `${Math.floor(sec / 3600)}h`;
+  return `${Math.floor(sec / 86400)}d`;
+}
+
+// label override beats claude's ai-title; both empty → "(no title)"
+export function displayTitle(label, fallback) {
+  return label || fallback || '(no title)';
+}
+
+export function nowClock() {
+  return new Date().toLocaleTimeString(undefined, { hour12: false });
+}

package/public/manifest.webmanifest

@@ -0,0 +1,14 @@
+{
+  "name": "ccsm — Claude CLI Sessions Manager",
+  "short_name": "ccsm",
+  "description": "Single pane over every live claude session on this machine.",
+  "start_url": "./",
+  "scope": "./",
+  "display": "standalone",
+  "display_override": ["window-controls-overlay", "standalone"],
+  "background_color": "#faf9f5",
+  "theme_color": "#faf9f5",
+  "icons": [
+    { "src": "favicon.svg", "type": "image/svg+xml", "sizes": "any", "purpose": "any" }
+  ]
+}

package/scripts/install.js

@@ -0,0 +1,132 @@
+#!/usr/bin/env node
+'use strict';
+
+// 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">`
+// from its OfflineBanner and have Windows spawn the backend on demand.
+//
+// Best-effort: any failure MUST NOT break npm install. Each step is in
+// its own try/catch; we just log and move on.
+//
+// No .lnk file, no Start Menu shortcut — just the protocol handler.
+
+const path = require('node:path');
+const fs = require('node:fs');
+const { spawnSync } = require('node:child_process');
+
+function log(msg)  { process.stdout.write(`[ccsm install] ${msg}\n`); }
+function warn(msg) { process.stderr.write(`[ccsm install] ${msg}\n`); }
+
+if (process.platform !== 'win32') {
+  log('non-Windows · skipping ccsm:// registration');
+  process.exit(0);
+}
+// Note: we DO register on npx-cache installs too (not just global). The
+// npx cache path is stable across re-runs of the same package, and even
+// if the user later cleans the cache, the only consequence is the
+// OfflineBanner button no-ops — nothing actively broken. Registering
+// always means a first-time `npx @bakapiano/ccsm` gets the full "click
+// to wake" UX without needing a separate `npm i -g`.
+
+function findCcsmCmd() {
+  const prefix = process.env.npm_config_prefix
+    || (() => {
+      try {
+        const r = spawnSync('npm', ['config', 'get', 'prefix'], { encoding: 'utf8', shell: true });
+        return r.stdout?.trim() || null;
+      } catch { return null; }
+    })();
+  if (!prefix) return null;
+  const candidate = path.join(prefix, 'ccsm.cmd');
+  return fs.existsSync(candidate) ? candidate : null;
+}
+
+// Write a tiny VBScript wrapper that ccsm:// dispatches into. Why VBS:
+// wscript.exe is a Windows-subsystem host (no console window), and
+// `Shell.Run(..., 0, False)` launches the target completely hidden — so
+// when the user clicks ccsm://start, NOTHING flashes on screen, the
+// backend just appears in the next health probe.
+function writeLauncherVbs(ccsmCmd) {
+  const home = process.env.LOCALAPPDATA || process.env.APPDATA;
+  if (!home) throw new Error('no LOCALAPPDATA/APPDATA env var');
+  const dir = path.join(home, 'ccsm');
+  fs.mkdirSync(dir, { recursive: true });
+  const vbsPath = path.join(dir, 'launcher.vbs');
+  // Escape any double-quotes in the cmd path (rare but possible).
+  const cmdEsc = ccsmCmd.replace(/"/g, '""');
+  const vbs = [
+    "' ccsm protocol launcher · invoked by wscript.exe via the registered",
+    "' ccsm:// URL handler. Spawns ccsm.cmd with WindowStyle 0 (hidden) +",
+    "' bWaitOnReturn=False (async), so the click leaves zero visible trace.",
+    'If WScript.Arguments.Count >= 1 Then',
+    '  arg = WScript.Arguments(0)',
+    'Else',
+    '  arg = ""',
+    'End If',
+    'Set sh = CreateObject("WScript.Shell")',
+    `sh.Run """${cmdEsc}"" """ & arg & """", 0, False`,
+    '',
+  ].join('\r\n');
+  fs.writeFileSync(vbsPath, vbs, { encoding: 'utf8' });
+  return vbsPath;
+}
+
+function registerProtocol(vbsPath) {
+  // wscript.exe is a no-console host. The protocol-registered command
+  // hands the entire ccsm:// URL to launcher.vbs as argv[0]; the VBS
+  // forwards it to ccsm.cmd "%1" with a hidden window.
+  const command = `wscript.exe "${vbsPath}" "%1"`;
+  const root = 'HKCU\\Software\\Classes\\ccsm';
+  const calls = [
+    ['add', root, '/ve', '/d', 'URL:ccsm protocol', '/f'],
+    ['add', root, '/v', 'URL Protocol', '/d', '', '/f'],
+    ['add', `${root}\\shell\\open\\command`, '/ve', '/d', command, '/f'],
+  ];
+  for (const args of calls) {
+    const r = spawnSync('reg.exe', args, { windowsHide: true });
+    if (r.status !== 0) {
+      throw new Error(`reg ${args.join(' ')} → exit ${r.status}: ${r.stderr?.toString() || ''}`);
+    }
+  }
+}
+
+const ccsmCmd = (() => {
+  try { return findCcsmCmd(); } catch { return null; }
+})();
+if (!ccsmCmd) {
+  warn('could not locate ccsm.cmd · skipping protocol registration');
+  process.exit(0);
+}
+
+try {
+  const vbsPath = writeLauncherVbs(ccsmCmd);
+  registerProtocol(vbsPath);
+  log(`launcher · ${vbsPath}`);
+  log(`ccsm:// protocol registered (silent · via wscript.exe)`);
+} catch (e) {
+  warn(`failed · ${e.message}`);
+  warn('the hosted frontend\'s "Start ccsm" button will not be able to launch the backend. You can still run `ccsm` manually in a terminal.');
+}
+
+// Auto-launch ccsm after install so the user lands directly in the app
+// without needing a second command. Detached + windowsHide so the npm
+// install command returns immediately. Skip if CCSM_NO_AUTOLAUNCH=1 is
+// set (CI, headless setups).
+if (process.env.CCSM_NO_AUTOLAUNCH !== '1') {
+  try {
+    const { spawn } = require('node:child_process');
+    const child = spawn(ccsmCmd, [], {
+      detached: true,
+      stdio: 'ignore',
+      windowsHide: true,
+      shell: false,
+    });
+    child.unref();
+    log('launching ccsm now · check for the chromeless window');
+    log('(set CCSM_NO_AUTOLAUNCH=1 to skip this on future installs)');
+  } catch (e) {
+    warn(`auto-launch failed · ${e.message}`);
+    warn('run `ccsm` manually to start.');
+  }
+}

package/scripts/uninstall.js

@@ -0,0 +1,56 @@
+#!/usr/bin/env node
+'use strict';
+
+// Reverse of install.js · unregister ccsm:// and ask any running backend
+// to shut down. Triggered by `npm uninstall -g @bakapiano/ccsm`.
+
+const path = require('node:path');
+const fs = require('node:fs');
+const http = require('node:http');
+const { spawnSync } = require('node:child_process');
+
+function log(msg)  { process.stdout.write(`[ccsm uninstall] ${msg}\n`); }
+function warn(msg) { process.stderr.write(`[ccsm uninstall] ${msg}\n`); }
+
+if (process.platform !== 'win32') process.exit(0);
+
+function shutdownIfRunning() {
+  return new Promise((resolve) => {
+    const req = http.request(
+      { hostname: 'localhost', port: 7777, path: '/api/shutdown', method: 'POST', timeout: 1500,
+        headers: { 'Content-Type': 'application/json', 'Content-Length': 2 } },
+      (res) => { res.resume(); res.on('end', resolve); },
+    );
+    req.on('error', () => resolve());
+    req.on('timeout', () => { req.destroy(); resolve(); });
+    req.write('{}');
+    req.end();
+  });
+}
+
+function deleteRegKey() {
+  const r = spawnSync('reg.exe', ['delete', 'HKCU\\Software\\Classes\\ccsm', '/f'], { windowsHide: true });
+  // exit 1 means key didn't exist — fine.
+  if (r.status !== 0 && r.status !== 1) {
+    throw new Error(`reg delete → exit ${r.status}: ${r.stderr?.toString() || ''}`);
+  }
+}
+
+function deleteLauncherVbs() {
+  const home = process.env.LOCALAPPDATA || process.env.APPDATA;
+  if (!home) return;
+  const dir = path.join(home, 'ccsm');
+  const vbs = path.join(dir, 'launcher.vbs');
+  if (fs.existsSync(vbs)) fs.unlinkSync(vbs);
+  // Remove the (now-empty) folder if we created it.
+  try { fs.rmdirSync(dir); } catch {}
+}
+
+(async () => {
+  await shutdownIfRunning();
+  try { deleteRegKey(); log('ccsm:// protocol unregistered'); }
+  catch (e) { warn(`reg cleanup failed · ${e.message}`); }
+  try { deleteLauncherVbs(); log('launcher.vbs removed'); }
+  catch (e) { warn(`vbs cleanup failed · ${e.message}`); }
+  log('done.');
+})();