@bakapiano/ccsm 0.6.0 → 0.8.4

package/lib/webTerminal.js

@@ -0,0 +1,173 @@
+'use strict';
+
+// ccsm in-process PTY pool. Used by the "web terminal" launch path:
+// claude (or any cmd) runs as a child of ccsm and its stdio is bridged
+// to one or more WebSocket clients via xterm.js in the browser.
+//
+// Lifecycle: a PTY entry is created by spawn(), broadcasts every output
+// chunk to all attached sockets, keeps a rolling history ring so a fresh
+// connection can replay recent output. attach() wires a websocket to an
+// entry, kill() ends a PTY explicitly, list() returns metadata for UI.
+//
+// node-pty is optional (Windows native binary). If it failed to load,
+// `available` is false and spawn() throws — server.js gates the
+// /api/sessions/web route on this flag so install failures degrade
+// gracefully to wt-only mode.
+
+const path = require('node:path');
+
+let pty = null;
+let loadError = null;
+try {
+  pty = require('node-pty');
+} catch (e) {
+  loadError = e;
+}
+
+const HISTORY_BYTES = 256 * 1024;
+
+// Map<id, { id, pty, history, sockets:Set<ws>, meta }>
+const sessions = new Map();
+
+function genId() {
+  return 'web-' + Date.now().toString(36) + '-' + Math.random().toString(36).slice(2, 8);
+}
+
+// Spawn a new PTY. `command` and `args` are passed straight to node-pty.
+// `meta` is whatever the caller wants surfaced to the UI (title, cwd, etc).
+// Throws if node-pty isn't available.
+function spawn({ command, args = [], cwd, env, cols = 120, rows = 30, meta = {} }) {
+  if (!pty) {
+    const err = new Error('node-pty is not available · ' + (loadError && loadError.message || 'unknown'));
+    err.code = 'PTY_UNAVAILABLE';
+    throw err;
+  }
+  const id = genId();
+  const proc = pty.spawn(command, args, {
+    name: 'xterm-256color',
+    cols, rows,
+    cwd: cwd ? path.resolve(cwd) : process.cwd(),
+    env: { ...process.env, ...(env || {}) },
+  });
+  const entry = {
+    id,
+    pty: proc,
+    history: '',
+    sockets: new Set(),
+    meta: { ...meta, startedAt: Date.now(), command, args, cwd: cwd || process.cwd(), pid: proc.pid },
+    exitCode: null,
+    exitedAt: null,
+  };
+  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);
+    }
+    const frame = JSON.stringify({ type: 'output', data });
+    for (const ws of entry.sockets) {
+      try { ws.send(frame); } catch {}
+    }
+  });
+  proc.onExit(({ exitCode, signal }) => {
+    entry.exitCode = exitCode;
+    entry.exitedAt = Date.now();
+    const frame = JSON.stringify({ type: 'exit', code: exitCode, signal });
+    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);
+  });
+  sessions.set(id, entry);
+  return entry;
+}
+
+// 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.
+function attach(id, ws) {
+  const entry = sessions.get(id);
+  if (!entry) {
+    try { ws.close(4404, 'no such terminal'); } catch {}
+    return;
+  }
+  entry.sockets.add(ws);
+  if (entry.history) {
+    try { ws.send(JSON.stringify({ type: 'output', data: entry.history })); } catch {}
+  }
+  if (entry.exitedAt) {
+    try { ws.send(JSON.stringify({ type: 'exit', code: entry.exitCode })); } catch {}
+  } else {
+    try { ws.send(JSON.stringify({ type: 'attached', meta: entry.meta })); } catch {}
+  }
+
+  ws.on('message', (msg) => {
+    let event;
+    try { event = JSON.parse(msg.toString()); } catch { return; }
+    if (entry.exitedAt) return;  // PTY is dead, ignore further input
+    switch (event.type) {
+      case 'input':
+        if (typeof event.data === 'string') entry.pty.write(event.data);
+        break;
+      case 'resize':
+        if (Number(event.cols) > 0 && Number(event.rows) > 0) {
+          try { entry.pty.resize(Number(event.cols), Number(event.rows)); } catch {}
+        }
+        break;
+      case 'kill':
+        kill(id);
+        break;
+    }
+  });
+
+  ws.on('close', () => {
+    entry.sockets.delete(ws);
+  });
+}
+
+function kill(id) {
+  const entry = sessions.get(id);
+  if (!entry || entry.exitedAt) return false;
+  try { entry.pty.kill(); } catch {}
+  return true;
+}
+
+// Public summary for the frontend. Don't leak the pty / sockets objects.
+function describe(entry) {
+  return {
+    id: entry.id,
+    meta: entry.meta,
+    attached: entry.sockets.size,
+    exitedAt: entry.exitedAt,
+    exitCode: entry.exitCode,
+  };
+}
+
+function list() {
+  return Array.from(sessions.values()).map(describe);
+}
+
+function get(id) {
+  const e = sessions.get(id);
+  return e ? describe(e) : null;
+}
+
+function killAll() {
+  for (const e of sessions.values()) {
+    try { e.pty.kill(); } catch {}
+  }
+}
+
+module.exports = {
+  available: !!pty,
+  loadError,
+  spawn,
+  attach,
+  kill,
+  list,
+  get,
+  killAll,
+};

package/package.json

@@ -1,26 +1,34 @@
 {
   "name": "@bakapiano/ccsm",
-  "version": "0.6.0",
+  "version": "0.8.4",
   "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",
   "bin": {
-    "ccsm": "./server.js"
+    "ccsm": "./bin/ccsm.js"
   },
   "files": [
     "server.js",
+    "bin/",
     "lib/",
     "public/",
+    "scripts/",
     "README.md",
     "CLAUDE.md"
   ],
   "scripts": {
     "start": "node server.js",
-    "dev": "node --watch server.js"
+    "dev": "node --watch server.js",
+    "postinstall": "node scripts/install.js",
+    "preuninstall": "node scripts/uninstall.js"
   },
   "dependencies": {
     "express": "^4.21.2"
   },
+  "optionalDependencies": {
+    "node-pty": "^1.0.0",
+    "ws": "^8.18.0"
+  },
   "engines": {
     "node": ">=20"
   },

package/public/css/base.css

@@ -0,0 +1,82 @@
+/* Reset, root typography, global accents, scrollbars, inline code/kbd. */
+
+* { box-sizing: border-box; margin: 0; padding: 0; }
+[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;
+}
+html, body {
+  background: var(--bg);
+  color: var(--ink);
+  font-family: var(--body);
+  font-size: 14px;
+  line-height: 1.5;
+  font-variant-numeric: tabular-nums;
+  min-height: 100vh;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+::selection { background: var(--ink); color: var(--bg-elev); }
+
+code, .kbd {
+  font-family: var(--mono);
+  font-size: 11.5px;
+  padding: 1px 5px;
+  background: var(--bg);
+  border: 1px solid var(--border-soft);
+  border-radius: 4px;
+  color: var(--ink-mid);
+}
+
+/* Fixed scrollbar look so it doesn't fade in/out or shift width on focus.
+   WebKit (Edge/Chrome): pseudo-elements. Firefox: scrollbar-* properties. */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--border-strong) transparent;
+}
+::-webkit-scrollbar { width: 10px; height: 10px; background: transparent; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb {
+  background: var(--border-strong);
+  border-radius: 8px;
+  border: 2px solid var(--bg);
+  /* Forced minimum height so dragging the thumb is always practical even on
+     very long pages. */
+  min-height: 32px;
+}
+::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }
+::-webkit-scrollbar-corner { background: transparent; }
+
+.row { display: flex; align-items: center; }
+.gap-row { gap: var(--s-3); flex-wrap: wrap; }
+.divider-dot { color: var(--ink-faint); padding: 0 var(--s-1); }
+
+.muted-text { color: var(--ink-muted); font-size: 12.5px; }
+.muted-text strong { color: var(--ink-mid); font-weight: 600; }
+
+.post-result {
+  margin-top: var(--s-3);
+  font-family: var(--mono);
+  font-size: 11.5px;
+  color: var(--ink-muted);
+}
+
+.empty {
+  padding: var(--s-12) var(--s-6);
+  text-align: center;
+  font-size: 13px;
+  color: var(--ink-muted);
+}
+.empty code {
+  font-family: var(--mono);
+  font-size: 12px;
+  color: var(--ink-mid);
+  background: var(--bg);
+  padding: 1px 5px;
+  border-radius: 4px;
+}

package/public/css/cards.css

@@ -0,0 +1,149 @@
+/* Card surfaces · head with fold toggle · body · title with icon */
+
+.card {
+  background: var(--bg-elev);
+  border: 1px solid var(--border);
+  border-radius: var(--r-md);
+  overflow: hidden;
+  box-shadow: var(--shadow);
+}
+
+.card-head {
+  padding: var(--s-4) var(--s-6) var(--s-3);
+  border-bottom: 1px solid var(--border-soft);
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: var(--s-3);
+}
+/* Whole header clickable to fold, only when card is foldable */
+.card[data-fold-key] .card-head {
+  cursor: pointer;
+  user-select: none;
+  transition: background .12s ease;
+}
+.card[data-fold-key] .card-head:hover {
+  background: var(--bg);
+}
+.card[data-collapsed] .card-head { border-bottom-color: transparent; }
+.card-titles { flex: 1; min-width: 0; }
+
+.card-fold {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  padding: 4px;
+  margin: 0;
+  cursor: pointer;
+  color: var(--ink-muted);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  transition: color .12s ease, background .12s ease, transform .25s cubic-bezier(.4, 0, .2, 1);
+  line-height: 0;
+  flex: 0 0 auto;
+}
+.card-fold:hover {
+  color: var(--ink);
+  background: var(--bg);
+}
+.card[data-collapsed] .card-fold { transform: rotate(-90deg); }
+.card[data-collapsed] .card-body { display: none; }
+
+.card-title {
+  font-size: 15.5px;
+  font-weight: 600;
+  letter-spacing: -0.012em;
+  color: var(--ink);
+}
+.card-title .title-icon {
+  color: var(--ink-mid);
+  margin-right: 6px;
+  vertical-align: -2px;
+}
+.card-title .title-icon-after {
+  margin-right: 0;
+  margin-left: 6px;
+  vertical-align: -1px;
+}
+.card-meta {
+  margin-top: 2px;
+  font-size: 12.5px;
+  color: var(--ink-muted);
+  font-family: var(--body);
+}
+.card-meta code {
+  font-family: var(--mono);
+  font-size: 11.5px;
+  color: var(--ink-mid);
+  background: var(--bg);
+  padding: 1px 5px;
+  border-radius: 4px;
+  border: 1px solid var(--border-soft);
+}
+
+.card-body { padding: var(--s-5) var(--s-6); }
+.card-body-flush { padding: 0; }
+
+/* ── About page ── */
+.about-block { display: flex; flex-direction: column; gap: var(--s-5); max-width: 640px; }
+.about-hero { display: flex; gap: var(--s-4); align-items: center; }
+.about-mark { display: inline-flex; }
+.about-mark svg { width: 48px; height: 48px; }
+.about-name {
+  font-size: 20px;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  color: var(--ink);
+}
+.about-version {
+  font-family: var(--mono);
+  font-size: 12px;
+  color: var(--ink-muted);
+  margin-left: 6px;
+  font-weight: 400;
+}
+.about-tagline {
+  margin-top: 2px;
+  font-size: 13px;
+  color: var(--ink-mid);
+}
+.about-tagline code {
+  font-size: 11px;
+  padding: 1px 4px;
+}
+.about-copy {
+  font-size: 13.5px;
+  color: var(--ink-mid);
+  line-height: 1.6;
+  max-width: 560px;
+}
+.about-links {
+  display: flex;
+  gap: var(--s-3);
+  flex-wrap: wrap;
+}
+.about-links .action {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  text-decoration: none;
+}
+.about-meta {
+  display: grid;
+  grid-template-columns: 140px 1fr;
+  gap: 8px var(--s-4);
+  font-size: 12.5px;
+  padding-top: var(--s-3);
+  border-top: 1px solid var(--border-soft);
+}
+.about-meta dt {
+  color: var(--ink-muted);
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  font-size: 10.5px;
+  padding-top: 2px;
+}
+.about-meta dd { color: var(--ink); }

package/public/css/feedback.css

@@ -0,0 +1,219 @@
+/* Page-actions CTA banner · server-status pill · toast ·
+   dirty-banner + save-pulse for unsaved settings */
+
+/* CTA-style banner — neutral surface, ink left bar, distinct from .card
+   so it reads as "tip / shortcut" rather than another data section */
+.page-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--s-4);
+  padding: var(--s-3) var(--s-5);
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--r-sm);
+  box-shadow: none;
+  position: relative;
+}
+.page-actions::before {
+  content: "";
+  position: absolute;
+  left: 0; top: 8px; bottom: 8px;
+  width: 2px;
+  background: var(--ink);
+  border-radius: 0 2px 2px 0;
+}
+.page-actions-hint {
+  font-size: 13px;
+  color: var(--ink-mid);
+  font-weight: 500;
+  padding-left: var(--s-2);
+}
+.page-actions .action svg { stroke-width: 2; }
+
+/* "Refresh · 12s ago" timestamp inside the top-right Refresh button */
+.refresh-ago {
+  margin-left: 6px;
+  padding-left: 7px;
+  border-left: 1px solid var(--border);
+  font-family: var(--mono);
+  font-size: 10.5px;
+  color: var(--ink-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+/* Top-right page-head-meta · server-status pill + Refresh button share
+   the same height, padding, font-size and pill shape so they read as a
+   coherent control group. Explicit min-height keeps them aligned even
+   though they use different fonts and one carries an icon. */
+.page-head-meta { align-items: center; }
+.page-head-meta .action.small,
+.page-head-meta .server-status {
+  min-height: 28px;
+  border-radius: 999px;
+  box-sizing: border-box;
+  line-height: 1;
+}
+
+/* "● online v0.5.0" pill in top-right page-head-meta */
+.server-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border-radius: 999px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  font-family: var(--mono);
+  font-size: 12px;
+  letter-spacing: 0.02em;
+  color: var(--ink-mid);
+  transition: background .15s ease, border-color .15s ease, color .15s ease;
+  cursor: default;
+}
+.server-status .status-pulse {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--ink-faint);
+  flex: 0 0 7px;
+  position: relative;
+}
+.server-status[data-state="online"] {
+  border-color: rgba(74, 138, 74, 0.35);
+  background: rgba(74, 138, 74, 0.06);
+  color: var(--green);
+}
+.server-status[data-state="online"] .status-pulse {
+  background: var(--green);
+  animation: server-pulse 2.2s ease-in-out infinite;
+}
+.server-status[data-state="offline"] {
+  border-color: rgba(183, 63, 63, 0.4);
+  background: rgba(183, 63, 63, 0.06);
+  color: var(--red);
+}
+.server-status[data-state="offline"] .status-pulse { background: var(--red); }
+.server-status[data-state="connecting"] {
+  border-color: rgba(196, 137, 43, 0.4);
+  background: rgba(196, 137, 43, 0.06);
+  color: var(--yellow);
+}
+.server-status[data-state="connecting"] .status-pulse {
+  background: var(--yellow);
+  animation: server-pulse 1s ease-in-out infinite;
+}
+@keyframes server-pulse {
+  0%, 100% { box-shadow: 0 0 0 0 currentColor; }
+  50%      { box-shadow: 0 0 0 4px transparent; }
+}
+
+/* Offline banner · shown when /api/health is unreachable. Sticks to the
+   top of the main column above all cards. Contains a ccsm:// link that
+   asks Windows to spawn the backend. */
+.offline-banner {
+  background: #fff7e8;
+  border: 1px solid #d4b27a;
+  border-radius: var(--r-sm);
+  padding: var(--s-3) var(--s-5);
+  position: sticky;
+  top: var(--s-3);
+  z-index: 50;
+  box-shadow: 0 3px 10px -8px rgba(26, 24, 21, 0.15);
+}
+.offline-banner-inner {
+  display: flex;
+  align-items: center;
+  gap: var(--s-3);
+}
+.offline-banner-text {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  font-size: 13px;
+  color: var(--ink);
+}
+.offline-banner-text .muted-text {
+  font-size: 11.5px;
+  color: var(--ink-mid);
+}
+.offline-banner-actions { display: flex; gap: var(--s-2); }
+.offline-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--red);
+  flex: 0 0 10px;
+  animation: dirty-pulse 2s ease-in-out infinite;
+}
+
+/* Toast bottom-right — auto-hides via JS */
+.toast {
+  position: fixed;
+  bottom: var(--s-6);
+  right: var(--s-6);
+  z-index: 100;
+  max-width: 420px;
+  padding: var(--s-3) var(--s-4);
+  background: var(--bg-elev);
+  border: 1px solid var(--border-strong);
+  border-left: 3px solid var(--ink);
+  border-radius: var(--r-sm);
+  font-size: 13px;
+  color: var(--ink);
+  letter-spacing: -0.005em;
+  opacity: 0;
+  transform: translateY(8px);
+  transition: opacity .2s ease, transform .2s ease;
+  pointer-events: none;
+  box-shadow: var(--shadow-md);
+}
+.toast.show {
+  opacity: 1;
+  transform: translateY(0);
+}
+.toast.error { border-left-color: var(--red); }
+.toast.ok    { border-left-color: var(--green); }
+
+/* Sticky "you have unsaved changes" banner above the Configure card */
+.dirty-banner {
+  display: flex;
+  align-items: center;
+  gap: var(--s-3);
+  padding: var(--s-3) var(--s-5);
+  background: var(--bg);
+  border: 1px solid var(--ink);
+  border-radius: var(--r-sm);
+  color: var(--ink);
+  font-size: 13px;
+  font-weight: 500;
+  position: sticky;
+  top: var(--s-3);
+  z-index: 10;
+  box-shadow: 0 3px 10px -8px rgba(26, 24, 21, 0.15);
+  animation: banner-in .25s cubic-bezier(.4, 0, .2, 1);
+}
+@keyframes banner-in {
+  from { opacity: 0; transform: translateY(-6px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+.dirty-banner .dirty-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--ink);
+  flex: 0 0 8px;
+  box-shadow: 0 0 0 0 rgba(26, 24, 21, 0.35);
+  animation: dirty-pulse 2s ease-in-out infinite;
+}
+.dirty-banner .dirty-text { flex: 1; }
+
+/* Save button pulse — mirrors dirty banner */
+.action.primary.is-dirty {
+  animation: save-pulse 1.6s ease-in-out infinite;
+}
+@keyframes save-pulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(26, 24, 21, 0.25); }
+  50%      { box-shadow: 0 0 0 4px rgba(26, 24, 21, 0); }
+}