@bakapiano/ccsm 0.22.0 → 0.22.2

package/CLAUDE.md

@@ -311,6 +311,8 @@ allows `https://bakapiano.github.io` only — never `*`.
 | GET | `/api/sessions` | list persisted sessions |
 | PUT | `/api/sessions/:id` | rename / move to folder |
 | DELETE | `/api/sessions/:id` | kill PTY + drop record |
+| POST | `/api/sessions/:id/switch-cli` | change the persisted `cliId` for future resumes; current and target CLI must share `type` |
+| POST | `/api/sessions/:id/stop` | kill the live PTY but keep the record; sets `manualStopped:true` so UI won't auto-resume |
 | POST | `/api/sessions/new` | body `{cliId, cwd?, repos?, folderId?, title?}` — NDJSON stream (workspace · clone-progress · launched) |
 | POST | `/api/sessions/:id/resume` | re-spawn at `cwd` with `cli.resumeIdArgs <id>` (fallback `resumeArgs`) |
 | GET | `/api/cli-sessions/:type` | scan disk for unimported `claude`/`codex`/`copilot` sessions |

package/lib/persistedSessions.js

@@ -26,6 +26,9 @@
 //                              //   newSessionIdArgs (claude, copilot); set
 //                              //   from disk for adopted sessions. Used
 //                              //   for precise --resume <id>.
+//     manualStopped: false,    // true only when the user explicitly stopped
+//                              //   it from ccsm; prevents auto-resume until
+//                              //   they press Resume.
 //   }
 
 const path = require('node:path');
@@ -73,6 +76,7 @@ async function create(opts) {
       exitCode: null,
       pid: null,
       cliSessionId,
+      manualStopped: false,
     };
     list.push(entry);
     await saveAll(list);
@@ -110,7 +114,7 @@ async function remove(id) {
 // 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() });
+  return update(id, { status: 'running', pid, exitedAt: null, exitCode: null, manualStopped: false, lastActiveAt: Date.now() });
 }
 
 async function markExited(id, exitCode) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bakapiano/ccsm",
-  "version": "0.22.0",
+  "version": "0.22.2",
   "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/css/terminals.css

@@ -282,6 +282,7 @@
   display: flex;
   align-items: center;
   flex-shrink: 0;
+  gap: 4px;
   padding-right: 2px;
 }
 /* Close the gap to the page-title-bar above — only when there IS one.
@@ -335,6 +336,27 @@
 .session-tab-add:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
 .session-tab-add svg { width: 14px; height: 14px; }
 
+.session-controls {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+.session-control-btn.danger {
+  color: #f4b8b8;
+}
+.session-control-btn.danger:hover:not(:disabled) {
+  color: #ffd1d1;
+  background: rgba(183, 63, 63, 0.22);
+}
+.session-control-btn:disabled {
+  opacity: .55;
+  cursor: wait;
+}
+.session-control-btn svg {
+  width: 13px;
+  height: 13px;
+}
+
 /* Kebab in the page-title-bar (top-right). Compact 24px square so it
    doesn't dominate the masthead. In WCO mode the title-bar already
    reserves padding-right for OS controls, so this slides cleanly to
@@ -359,7 +381,8 @@
 }
 /* Neutral-grey hover tint works on either strip colour (darkens the light
    one, lightens the dark one) without needing a per-theme override. */
-.session-menu-btn:hover { background: rgba(128, 128, 128, 0.2); color: var(--term-on); }
+.session-menu-btn:hover:not(:disabled) { background: rgba(128, 128, 128, 0.2); color: var(--term-on); }
+.session-menu-btn:disabled { opacity: .55; cursor: wait; }
 .session-menu-btn svg { width: 16px; height: 16px; }
 
 .session-menu {
@@ -391,6 +414,20 @@
 .session-menu-item.danger { color: var(--danger, #b73f3f); }
 .session-menu-item.danger:hover { background: rgba(183, 63, 63, 0.08); }
 .session-menu-item svg { width: 14px; height: 14px; }
+.session-menu-item img { width: 14px; height: 14px; }
+.session-menu-separator {
+  height: 1px;
+  background: var(--border);
+  margin: 3px 2px;
+}
+.session-menu-label {
+  padding: 4px 10px 2px;
+  font-size: 11px;
+  line-height: 1.2;
+  color: var(--ink-muted);
+  text-transform: uppercase;
+  letter-spacing: 0;
+}
 
 .session-pane-head {
   display: flex;

package/public/js/api.js

@@ -254,6 +254,20 @@ export async function setSessionTitle(sessionId, title) {
   await loadSessions();
 }
 
+export async function switchSessionCli(sessionId, cliId) {
+  const r = await api('POST', `/api/sessions/${sessionId}/switch-cli`, { cliId });
+  resumeFailed.delete(sessionId);
+  await loadSessions();
+  return r;
+}
+
+export async function stopSession(sessionId) {
+  const r = await api('POST', `/api/sessions/${sessionId}/stop`);
+  resumeFailed.delete(sessionId);
+  await loadSessions();
+  return r.session;
+}
+
 export async function deleteSession(sessionId) {
   await api('DELETE', `/api/sessions/${sessionId}`);
   await loadSessions();

package/public/js/components/Sidebar.js

@@ -54,10 +54,9 @@ function SessionRow({ s, folderId, siblingIds }) {
   const onClick = async (ev) => {
     ev.preventDefault();
     selectSession(s.id);
-    // Auto-resume on click if the session is stopped — saves the user
-    // from a second click on the "Resume" button in the right pane.
-    // No-op if already running.
-    if (s.status !== 'running') {
+    // Auto-resume on click if the session stopped on its own. Explicitly
+    // stopped sessions stay stopped until the user presses Resume.
+    if (s.status !== 'running' && !s.manualStopped) {
       try { await resumeSession(s.id); }
       catch (e) { setToast(e.message, 'error'); }
     }

package/public/js/components/TerminalInstance.js

@@ -0,0 +1,266 @@
+// VS Code-style terminal instance lifecycle for a single ccsm session.
+// Owns attach/detach, WebSocket transport, xterm input/output forwarding,
+// resize propagation, paste handling, and browser/mobile lifecycle hooks.
+
+import { wsBase, getToken, getDeviceId } from '../backend.js';
+import { XtermTerminal } from './XtermTerminal.js';
+
+export class TerminalInstance {
+  constructor({ terminalId, cliType, onDisplaced }) {
+    this.terminalId = terminalId;
+    this.cliType = cliType;
+    this.onDisplaced = onDisplaced;
+    this.xterm = new XtermTerminal();
+    this.ws = null;
+    this.host = null;
+    this.closedByUs = false;
+    this.reconnectTimer = null;
+    this.attempts = 0;
+    this.everOpened = false;
+    this.disposables = [];
+    this.helperTextarea = null;
+  }
+
+  attachToElement(host) {
+    this.host = host;
+    this.xterm.attachToElement(host);
+    this._registerColorOscHandlers();
+    this._connect();
+    this._wireXtermEvents();
+    this._wireDomLifecycle();
+    this.xterm.focus();
+  }
+
+  sendInput(data) {
+    this._sendFrame({ type: 'input', data });
+  }
+
+  setCliType(cliType) {
+    this.cliType = cliType;
+  }
+
+  applyTheme() {
+    this.xterm.applyResolvedTheme();
+  }
+
+  dispose() {
+    this.closedByUs = true;
+    if (this.reconnectTimer) clearTimeout(this.reconnectTimer);
+    for (const dispose of this.disposables.splice(0)) {
+      try { dispose(); } catch {}
+    }
+    try { this.ws?.close(); } catch {}
+    this.ws = null;
+    this.helperTextarea = null;
+    this.xterm.dispose();
+  }
+
+  _connect() {
+    const ws = new WebSocket(this._wsUrl());
+    ws.binaryType = 'arraybuffer';
+    this.ws = ws;
+
+    ws.onopen = () => {
+      if (this.everOpened) {
+        this.xterm.reset();
+      }
+      this.everOpened = true;
+      this.attempts = 0;
+      this.xterm.scheduleFit();
+      this._sendFrame({ type: 'resize', cols: this.xterm.cols, rows: this.xterm.rows });
+    };
+    ws.onmessage = (ev) => {
+      let frame;
+      try { frame = JSON.parse(ev.data); } catch { return; }
+      if (frame.type === 'output') {
+        this.xterm.write(frame.data);
+      } else if (frame.type === 'exit') {
+        this.xterm.write(`\r\n\x1b[2m[process exited · code ${frame.code}]\x1b[0m\r\n`);
+      }
+    };
+    ws.onclose = (ev) => this._handleClose(ev);
+  }
+
+  _handleClose(ev) {
+    if (this.closedByUs) return;
+    if (ev && ev.code === 4001) {
+      this.onDisplaced?.();
+      return;
+    }
+    if (ev && ev.code === 4404) {
+      this.xterm.write('\r\n\x1b[2m[session ended]\x1b[0m\r\n');
+      return;
+    }
+    this.attempts++;
+    const delay = Math.min(8000, 500 * 2 ** Math.min(this.attempts - 1, 4));
+    this.xterm.write('\r\n\x1b[2m[disconnected · reconnecting…]\x1b[0m\r\n');
+    this.reconnectTimer = setTimeout(() => {
+      if (!this.closedByUs) this._connect();
+    }, delay);
+  }
+
+  _wireXtermEvents() {
+    const dataDisposable = this.xterm.onData((data) => {
+      this._sendFrame({ type: 'input', data });
+    });
+    const resizeDisposable = this.xterm.onResize(({ cols, rows }) => {
+      this._sendFrame({ type: 'resize', cols, rows });
+    });
+    this.disposables.push(
+      () => dataDisposable.dispose(),
+      () => resizeDisposable.dispose(),
+    );
+  }
+
+  _wireDomLifecycle() {
+    const host = this.host;
+    const ro = new ResizeObserver(() => this.xterm.fit());
+    ro.observe(host);
+    this.disposables.push(() => ro.disconnect());
+
+    const vv = window.visualViewport;
+    const onVisualResize = () => this.xterm.scheduleFit();
+    vv?.addEventListener?.('resize', onVisualResize);
+    vv?.addEventListener?.('scroll', onVisualResize);
+    this.disposables.push(() => {
+      vv?.removeEventListener?.('resize', onVisualResize);
+      vv?.removeEventListener?.('scroll', onVisualResize);
+    });
+
+    const onHostClick = () => this.xterm.focus();
+    if (this.xterm.isMobile) {
+      host.addEventListener('click', onHostClick);
+      this.disposables.push(() => host.removeEventListener('click', onHostClick));
+    }
+
+    this._wireTabVisibilityRefresh(host);
+    this._wirePasteHandlers(host);
+    this._wireModifiedEnterHandler(host);
+    this._wireCompositionHandlers();
+  }
+
+  _wireTabVisibilityRefresh(host) {
+    const panel = host.closest('.tab-panel');
+    if (!panel) return;
+    const panelMo = new MutationObserver(() => {
+      if (panel.hasAttribute('data-active')) {
+        requestAnimationFrame(() => {
+          this.xterm.clearTextureAtlas();
+          this.xterm.scheduleFit();
+          this.xterm.refresh();
+        });
+      }
+    });
+    panelMo.observe(panel, { attributes: true, attributeFilter: ['data-active'] });
+    this.disposables.push(() => panelMo.disconnect());
+  }
+
+  _wirePasteHandlers(host) {
+    const isOurs = () => {
+      const ae = document.activeElement;
+      return ae && host.contains(ae);
+    };
+    const doPaste = (text) => {
+      if (!text) return;
+      const normalized = text.replace(/\r?\n/g, '\r');
+      this.sendInput(`\x1b[200~${normalized}\x1b[201~`);
+    };
+    const onPaste = async (ev) => {
+      if (!isOurs()) return;
+      let text = '';
+      if (ev.clipboardData) text = ev.clipboardData.getData('text');
+      if (!text && navigator.clipboard) {
+        try { text = await navigator.clipboard.readText(); } catch {}
+      }
+      if (!text) return;
+      ev.preventDefault();
+      ev.stopPropagation();
+      doPaste(text);
+    };
+    const onKey = (ev) => {
+      const meta = ev.ctrlKey || ev.metaKey;
+      if (!meta || ev.key.toLowerCase() !== 'v') return;
+      if (ev.shiftKey || ev.altKey) return;
+      if (!isOurs()) return;
+      if (!navigator.clipboard?.readText) return;
+      ev.preventDefault();
+      ev.stopPropagation();
+      ev.stopImmediatePropagation();
+      navigator.clipboard.readText().then((text) => {
+        if (text) doPaste(text);
+      }).catch(() => {});
+    };
+    document.addEventListener('paste', onPaste, true);
+    document.addEventListener('keydown', onKey, true);
+    this.disposables.push(
+      () => document.removeEventListener('paste', onPaste, true),
+      () => document.removeEventListener('keydown', onKey, true),
+    );
+  }
+
+  _wireModifiedEnterHandler(host) {
+    const isOurs = () => {
+      const ae = document.activeElement;
+      return ae && host.contains(ae);
+    };
+    const onShiftEnter = (ev) => {
+      if (ev.key !== 'Enter') return;
+      if (!(ev.shiftKey || ev.ctrlKey)) return;
+      if (ev.metaKey || ev.altKey) return;
+      if (!isOurs()) return;
+      const data = this.cliType === 'claude' ? '\n' : '\x1b\r';
+      ev.preventDefault();
+      ev.stopPropagation();
+      ev.stopImmediatePropagation();
+      this.sendInput(data);
+    };
+    document.addEventListener('keydown', onShiftEnter, true);
+    this.disposables.push(() => document.removeEventListener('keydown', onShiftEnter, true));
+  }
+
+  _wireCompositionHandlers() {
+    const helper = this.xterm.helperTextarea;
+    this.helperTextarea = helper;
+    if (!helper) return;
+    const onCompStart = () => this.xterm.setCursorVisible(false);
+    const onCompEnd = () => this.xterm.setCursorVisible(true);
+    helper.addEventListener('compositionstart', onCompStart);
+    helper.addEventListener('compositionend', onCompEnd);
+    this.disposables.push(() => {
+      helper.removeEventListener('compositionstart', onCompStart);
+      helper.removeEventListener('compositionend', onCompEnd);
+    });
+  }
+
+  _registerColorOscHandlers() {
+    const answerColorOsc = (code, getHex) => (data) => {
+      if (data !== '?') return false;
+      const hex = getHex();
+      const ch = (i) => parseInt(hex.slice(i, i + 2), 16);
+      const w = (v) => (v * 257).toString(16).padStart(4, '0');
+      const reply = `\x1b]${code};rgb:${w(ch(1))}/${w(ch(3))}/${w(ch(5))}\x07`;
+      this.sendInput(reply);
+      return true;
+    };
+    try {
+      this.xterm.parser.registerOscHandler(11, answerColorOsc(11, () => this.xterm.theme.background));
+      this.xterm.parser.registerOscHandler(10, answerColorOsc(10, () => this.xterm.theme.foreground));
+    } catch {}
+  }
+
+  _sendFrame(frame) {
+    if (this.ws && this.ws.readyState === 1) {
+      this.ws.send(JSON.stringify(frame));
+    }
+  }
+
+  _wsUrl() {
+    const tok = getToken();
+    const dev = getDeviceId();
+    const params = new URLSearchParams();
+    if (tok) params.set('token', tok);
+    if (dev) params.set('device', dev);
+    const qs = params.toString();
+    return `${wsBase()}/ws/terminal/${encodeURIComponent(this.terminalId)}${qs ? `?${qs}` : ''}`;
+  }
+}