@bakapiano/ccsm 0.22.0 → 0.22.2

package/public/js/components/XtermTerminal.js

@@ -0,0 +1,198 @@
+// VS Code-style xterm wrapper. Owns the raw xterm.js terminal, renderer
+// addons, theme application, and fit/refresh behavior. It intentionally does
+// not know about ccsm sessions or WebSockets.
+
+import { Terminal } from '@xterm/xterm';
+import { FitAddon } from '@xterm/addon-fit';
+import { WebLinksAddon } from '@xterm/addon-web-links';
+import { ClipboardAddon } from '@xterm/addon-clipboard';
+import { WebglAddon } from '@xterm/addon-webgl';
+import { isDarkTheme } from '../state.js';
+
+// Dark xterm theme - VSCode's Dark+ terminal palette, verbatim (see
+// microsoft/vscode src/.../terminal/common/terminalColorRegistry.ts).
+const THEME_DARK = {
+  background: '#1e1e1e',
+  foreground: '#cccccc',
+  cursor:     '#aeafad',
+  cursorAccent: '#1e1e1e',
+  selectionBackground: '#264f78',
+  black:   '#000000', brightBlack:   '#666666',
+  red:     '#cd3131', brightRed:     '#f14c4c',
+  green:   '#0dbc79', brightGreen:   '#23d18b',
+  yellow:  '#e5e510', brightYellow:  '#f5f543',
+  blue:    '#2472c8', brightBlue:    '#3b8eea',
+  magenta: '#bc3fbc', brightMagenta: '#d670d6',
+  cyan:    '#11a8cd', brightCyan:    '#29b8db',
+  white:   '#e5e5e5', brightWhite:   '#e5e5e5',
+};
+
+// Light xterm theme - VSCode's Light+ terminal palette, verbatim (see
+// microsoft/vscode src/.../terminal/common/terminalColorRegistry.ts).
+const THEME_LIGHT = {
+  background: '#ffffff',
+  foreground: '#333333',
+  cursor:     '#000000',
+  cursorAccent: '#ffffff',
+  selectionBackground: '#add6ff',
+  black:   '#000000', brightBlack:   '#666666',
+  red:     '#cd3131', brightRed:     '#cd3131',
+  green:   '#107c10', brightGreen:   '#14ce14',
+  yellow:  '#949800', brightYellow:  '#b5ba00',
+  blue:    '#0451a5', brightBlue:    '#0451a5',
+  magenta: '#bc05bc', brightMagenta: '#bc05bc',
+  cyan:    '#0598bc', brightCyan:    '#0598bc',
+  white:   '#555555', brightWhite:   '#a5a5a5',
+};
+
+export const themeFor = (dark) => (dark ? THEME_DARK : THEME_LIGHT);
+
+export class XtermTerminal {
+  constructor() {
+    this.isMobile = window.matchMedia('(max-width: 640px)').matches;
+    this.currentTheme = themeFor(isDarkTheme());
+    this.fitAddon = new FitAddon();
+    this.webglAddon = null;
+    this.host = null;
+
+    this.raw = new Terminal({
+      fontFamily: '"Cascadia Mono", "Geist Mono", "JetBrains Mono", Consolas, monospace',
+      fontSize: this.isMobile ? 11 : 13,
+      lineHeight: 1.2,
+      cursorBlink: true,
+      cursorStyle: 'bar',
+      scrollback: 5000,
+      allowProposedApi: true,
+      theme: this.currentTheme,
+      // Same modern keyboard protocols VS Code enables when configured.
+      vtExtensions: {
+        kittyKeyboard: true,
+        win32InputMode: true,
+      },
+    });
+
+    this.raw.loadAddon(this.fitAddon);
+    this.raw.loadAddon(new WebLinksAddon());
+    this.raw.loadAddon(new ClipboardAddon());
+    this._loadRendererAddon();
+    this._installSelectionCopyGuard();
+  }
+
+  get cols() { return this.raw.cols; }
+  get rows() { return this.raw.rows; }
+  get theme() { return this.currentTheme; }
+  get parser() { return this.raw.parser; }
+  get helperTextarea() {
+    return this.host?.querySelector('.xterm-helper-textarea') || null;
+  }
+
+  attachToElement(host) {
+    this.host = host;
+    this.raw.open(host);
+    this.scheduleFit();
+    try {
+      document.fonts?.ready?.then(() => {
+        if (this.host === host) this.scheduleFit();
+      });
+    } catch {}
+  }
+
+  applyResolvedTheme() {
+    const theme = themeFor(isDarkTheme());
+    this.currentTheme = theme;
+    try { this.raw.options.theme = theme; } catch {}
+    return theme;
+  }
+
+  setCursorVisible(visible) {
+    if (visible) {
+      try { this.raw.options.theme = this.currentTheme; } catch {}
+      try { this.raw.write('\x1b[?25h'); } catch {}
+      return;
+    }
+    try {
+      this.raw.options.theme = {
+        ...this.currentTheme,
+        cursor: 'transparent',
+        cursorAccent: 'transparent',
+      };
+    } catch {}
+    try { this.raw.write('\x1b[?25l'); } catch {}
+  }
+
+  scheduleFit() {
+    this.fit();
+    requestAnimationFrame(() => {
+      this.fit();
+      setTimeout(() => this.fit(), 60);
+      setTimeout(() => this.fit(), 200);
+    });
+  }
+
+  fit() {
+    try { this.fitAddon.fit(); } catch {}
+  }
+
+  refresh() {
+    try { this.raw.refresh(0, this.raw.rows - 1); } catch {}
+  }
+
+  clearTextureAtlas() {
+    try { this.raw.clearTextureAtlas?.(); } catch {}
+  }
+
+  write(data, callback) {
+    try { this.raw.write(data, callback); } catch {}
+  }
+
+  reset() {
+    try { this.raw.reset(); } catch {}
+  }
+
+  focus() {
+    try { this.raw.focus(); } catch {}
+  }
+
+  onData(listener) {
+    return this.raw.onData(listener);
+  }
+
+  onResize(listener) {
+    return this.raw.onResize(listener);
+  }
+
+  hasSelection() {
+    return this.raw.hasSelection();
+  }
+
+  dispose() {
+    this.host = null;
+    try { this.raw.dispose(); } catch {}
+  }
+
+  _loadRendererAddon() {
+    // Keep the current mobile guard: @xterm/addon-webgl@0.18 can mis-measure
+    // glyph atlases on fractional mobile DPRs.
+    if (this.isMobile) return;
+    try {
+      const webgl = new WebglAddon();
+      this.webglAddon = webgl;
+      webgl.onContextLoss(() => { try { webgl.dispose(); } catch {} });
+      this.raw.loadAddon(webgl);
+    } catch (e) {
+      console.warn('[ccsm] WebGL addon failed, using DOM renderer:', e);
+    }
+  }
+
+  _installSelectionCopyGuard() {
+    this.raw.attachCustomKeyEventHandler((ev) => {
+      if (ev.type === 'keydown'
+          && ev.ctrlKey && !ev.shiftKey && !ev.altKey && !ev.metaKey
+          && ev.key.toLowerCase() === 'c'
+          && this.raw.hasSelection()) {
+        return false;
+      }
+      return true;
+    });
+  }
+}

package/public/js/icons.js

@@ -141,6 +141,14 @@ export const IconMoreVert = ic('0 0 24 24', html`
   <circle cx="12" cy="19" r="1.6" fill="currentColor" stroke="none"/>
 `, 16);
 
+export const IconPlay = ic('0 0 24 24', html`
+  <polygon points="8 5 19 12 8 19 8 5"/>
+`, 14);
+
+export const IconStop = ic('0 0 24 24', html`
+  <rect x="7" y="7" width="10" height="10" rx="1.5"/>
+`, 14);
+
 // Broadcast / remote — radiating arcs over a centre dot. Used on the
 // Remote nav tab; reads as "this machine is broadcasting" / "remote
 // access available".

package/public/js/pages/SessionsPage.js

@@ -7,13 +7,13 @@
 import { html } from '../html.js';
 import { useEffect, useRef, useState } from 'preact/hooks';
 import { activeSessionId, sessions, config, selectTab, selectSession, clockTick } from '../state.js';
-import { resumeSession, clearResumeFailure, deleteSession, setSessionTitle, openSessionInEditor } from '../api.js';
+import { resumeSession, clearResumeFailure, deleteSession, setSessionTitle, switchSessionCli, stopSession, openSessionInEditor } from '../api.js';
 import { setToast } from '../toast.js';
 import { ccsmConfirm, ccsmPrompt } from '../dialog.js';
 import { TerminalView } from '../components/TerminalView.js';
 import { PageTitleBar } from '../components/PageTitleBar.js';
 import { Popover } from '../components/Popover.js';
-import { IconMoreVert, IconPencil, IconClose, IconPlus, IconForCliType, IconTerminal, IconExternal } from '../icons.js';
+import { IconMoreVert, IconPencil, IconClose, IconPlus, IconForCliType, IconTerminal, IconExternal, IconPlay, IconStop } from '../icons.js';
 import { fmtAgo } from '../util.js';
 
 function SessionTabs({ activeId, onActivate, onNew, kebab }) {
@@ -51,7 +51,7 @@ function SessionTabs({ activeId, onActivate, onNew, kebab }) {
     </div>`;
 }
 
-function SessionMenu({ session, onRename, onDelete, onOpenEditor }) {
+function SessionMenu({ session, switchableClis, onRename, onDelete, onOpenEditor, onSwitchCli }) {
   const [open, setOpen] = useState(false);
   const anchor = useRef(null);
   return html`
@@ -67,6 +67,18 @@ function SessionMenu({ session, onRename, onDelete, onOpenEditor }) {
           <button class="session-menu-item" onClick=${() => { setOpen(false); onOpenEditor(); }}>
             <${IconExternal} /> Open in editor
           </button>
+          ${switchableClis.length ? html`
+            <div class="session-menu-separator"></div>
+            <div class="session-menu-label">Switch CLI</div>
+            ${switchableClis.map((target) => {
+              const TargetIcon = IconForCliType(target.type) || IconTerminal;
+              return html`
+                <button class="session-menu-item" key=${target.id}
+                        onClick=${() => { setOpen(false); onSwitchCli(target); }}>
+                  <${TargetIcon} /> Switch to ${target.name}
+                </button>`;
+            })}
+          ` : null}
           <button class="session-menu-item" onClick=${() => { setOpen(false); onRename(); }}>
             <${IconPencil} /> Rename
           </button>
@@ -77,12 +89,35 @@ function SessionMenu({ session, onRename, onDelete, onOpenEditor }) {
       </${Popover}>` : null}`;
 }
 
+function SessionControls({ running, busy, onStop, onResume }) {
+  return html`
+    <div class="session-controls">
+      ${running ? html`
+        <button class="session-menu-btn session-control-btn danger" type="button"
+                title="Stop session" aria-label="Stop session"
+                disabled=${busy}
+                onClick=${onStop}>
+          <${IconStop} />
+        </button>
+      ` : html`
+        <button class="session-menu-btn session-control-btn" type="button"
+                title=${busy ? 'Resuming session' : 'Resume session'}
+                aria-label=${busy ? 'Resuming session' : 'Resume session'}
+                disabled=${busy}
+                onClick=${onResume}>
+          <${IconPlay} />
+        </button>
+      `}
+    </div>`;
+}
+
 export function SessionsPage() {
   clockTick.value; // resubscribe fmtAgo
   const id = activeSessionId.value;
   const list = sessions.value;
   const session = id ? list.find((s) => s.id === id) : null;
   const [resumeError, setResumeError] = useState(null);
+  const [actionBusy, setActionBusy] = useState(false);
   // Bumps to force the auto-resume effect to re-run on Retry without
   // mutating any signal. Primitive in the dep array → identity changes.
   const [retryNonce, setRetryNonce] = useState(0);
@@ -100,22 +135,50 @@ export function SessionsPage() {
   useEffect(() => {
     if (!session) return;
     if (session.status === 'running') { setResumeError(null); return; }
+    if (session.manualStopped) { setResumeError(null); return; }
     setResumeError(null);
     resumeSession(session.id)
       .then((launched) => { if (launched?.id) selectSession(launched.id); })
       .catch((e) => { setResumeError(e.message); setToast(e.message, 'error'); });
-  }, [session?.id, session?.status, retryNonce]);
+  }, [session?.id, session?.status, session?.cliId, session?.manualStopped, retryNonce]);
 
   if (!session) return null;
 
   const cli = (config.value?.clis || []).find((c) => c.id === session.cliId);
+  const switchableClis = cli
+    ? (config.value?.clis || []).filter((c) => c.id !== cli.id && c.type === cli.type)
+    : [];
   const running = session.status === 'running';
   const title = session.title || session.workspace || session.id.slice(0, 12);
 
-  const onRetry = () => {
+  const onResume = async () => {
     clearResumeFailure(session.id);
     setResumeError(null);
-    setRetryNonce((n) => n + 1);
+    setActionBusy(true);
+    try {
+      const launched = await resumeSession(session.id);
+      if (launched?.id) selectSession(launched.id);
+    } catch (e) {
+      setResumeError(e.message);
+      setToast(e.message, 'error');
+    } finally {
+      setActionBusy(false);
+    }
+  };
+  const onRetry = () => {
+    onResume();
+  };
+  const onStop = async () => {
+    setActionBusy(true);
+    try {
+      await stopSession(session.id);
+      setResumeError(null);
+      setToast('Session stopped');
+    } catch (e) {
+      setToast(e.message, 'error');
+    } finally {
+      setActionBusy(false);
+    }
   };
   const onRename = async () => {
     const next = await ccsmPrompt('Rename session', title, { okLabel: 'Save' });
@@ -138,6 +201,26 @@ export function SessionsPage() {
       setToast(`Opening in ${r?.editor || 'editor'}…`);
     } catch (e) { setToast(e.message, 'error'); }
   };
+  const onSwitchCli = async (target) => {
+    const fromName = cli?.name || session.cliId;
+    if (running) {
+      const ok = await ccsmConfirm(
+        `Switch ${title} from ${fromName} to ${target.name}? The running terminal keeps its current process; ${target.name} is used next time this session resumes.`,
+        { title: 'Switch CLI', okLabel: 'Switch' },
+      );
+      if (!ok) return;
+    }
+    try {
+      const r = await switchSessionCli(session.id, target.id);
+      setToast(r.running
+        ? `CLI switched to ${target.name} for next resume`
+        : `CLI switched to ${target.name}`);
+      if (!running && !session.manualStopped) {
+        clearResumeFailure(session.id);
+        setRetryNonce((n) => n + 1);
+      }
+    } catch (e) { setToast(e.message, 'error'); }
+  };
 
   return html`
     <${PageTitleBar} title=${html`
@@ -148,14 +231,24 @@ export function SessionsPage() {
           <span>${cli ? cli.name : session.cliId}</span>
           ${session.repos.length ? html`<span>·</span><span>${session.repos.join(', ')}</span>` : null}
           <span>·</span>
-          <span>${running ? 'running' : (resumeError ? 'resume failed' : 'resuming…')}</span>
+          <span>${running ? 'running' : (resumeError ? 'resume failed' : (session.manualStopped ? 'stopped' : 'resuming…'))}</span>
         </span>
       `} />
     <${SessionTabs}
       activeId=${session.id}
       onActivate=${(sid) => selectSession(sid)}
       onNew=${() => selectTab('launch')}
-      kebab=${html`<${SessionMenu} session=${session} onRename=${onRename} onDelete=${onDelete} onOpenEditor=${onOpenEditor} />`} />
+      kebab=${html`
+        <${SessionControls} running=${running}
+                            busy=${actionBusy}
+                            onStop=${onStop}
+                            onResume=${onResume} />
+        <${SessionMenu} session=${session}
+                        switchableClis=${switchableClis}
+                        onRename=${onRename}
+                        onDelete=${onDelete}
+                        onOpenEditor=${onOpenEditor}
+                        onSwitchCli=${onSwitchCli} />`} />
     <div class="session-pane">
       <div class="session-pane-body">
         ${running
@@ -165,6 +258,11 @@ export function SessionsPage() {
               ${resumeError ? html`
                 <div>Failed to resume: <span class="mono">${resumeError}</span></div>
                 <button class="action primary" onClick=${onRetry}>Retry</button>
+              ` : session.manualStopped ? html`
+                <div>Session stopped</div>
+                <button class="action primary" onClick=${onResume} disabled=${actionBusy}>
+                  ${actionBusy ? 'Resuming…' : 'Resume'}
+                </button>
               ` : html`
                 <div>Resuming session…</div>
               `}

package/server.js

@@ -217,6 +217,10 @@ function pickCli(cfg, requestedId) {
   return cfg.clis.find((c) => c.id === wanted) || cfg.clis[0];
 }
 
+function findCliById(cfg, id) {
+  return (cfg.clis || []).find((c) => c.id === id) || null;
+}
+
 // Resolve how to spawn a CLI command. Windows quirks:
 // v1.1 — spawn strategy is now caller-controlled via cli.shell:
 //   'direct' — pty.spawn(command, args). Real .exe / absolute paths only.
@@ -639,6 +643,64 @@ app.put('/api/sessions/:id', asyncH(async (req, res) => {
   res.json({ session: updated });
 }));
 
+// Switch the CLI config used to resume an existing session. This is
+// intentionally narrower than the generic PUT route: a session can only
+// move between configured CLIs of the same type (e.g. one claude wrapper
+// to another) so its captured upstream cliSessionId stays meaningful.
+app.post('/api/sessions/:id/switch-cli', asyncH(async (req, res) => {
+  const targetCliId = typeof req.body?.cliId === 'string' ? req.body.cliId.trim() : '';
+  if (!targetCliId) return res.status(400).json({ error: 'cliId required' });
+
+  const record = await persistedSessions.get(req.params.id);
+  if (!record) return res.status(404).json({ error: 'session not found' });
+
+  const cfg = await loadConfig();
+  const currentCli = findCliById(cfg, record.cliId);
+  const targetCli = findCliById(cfg, targetCliId);
+  if (!currentCli) return res.status(400).json({ error: `current CLI ${record.cliId} no longer configured` });
+  if (!targetCli) return res.status(400).json({ error: `target CLI ${targetCliId} not configured` });
+  if (currentCli.type !== targetCli.type) {
+    return res.status(400).json({
+      error: `cannot switch ${currentCli.type} session to ${targetCli.type} CLI`,
+    });
+  }
+
+  if (record.cliId === targetCli.id) {
+    const live = webTerminal.get(record.id);
+    return res.json({ session: record, changed: false, running: !!(live && !live.exitedAt) });
+  }
+
+  const updated = await persistedSessions.update(record.id, { cliId: targetCli.id });
+  const live = webTerminal.get(record.id);
+  res.json({
+    session: updated,
+    changed: true,
+    running: !!(live && !live.exitedAt),
+    fromCliId: currentCli.id,
+    toCliId: targetCli.id,
+    cliType: targetCli.type,
+  });
+}));
+
+// Stop the live PTY for a session without deleting its persisted record.
+// Unlike a natural CLI exit, this is a user intent signal: the frontend
+// should not auto-resume it again until the user explicitly presses Resume.
+app.post('/api/sessions/:id/stop', asyncH(async (req, res) => {
+  const record = await persistedSessions.get(req.params.id);
+  if (!record) return res.status(404).json({ error: 'session not found' });
+  const stopped = webTerminal.kill(record.id);
+  const updated = await persistedSessions.update(record.id, {
+    status: 'exited',
+    pid: null,
+    exitCode: null,
+    exitedAt: Date.now(),
+    manualStopped: true,
+    lastActiveAt: Date.now(),
+  });
+  try { require('./lib/cliActivity').releaseSession(record.id); } catch {}
+  res.json({ stopped, session: updated });
+}));
+
 app.delete('/api/sessions/:id', asyncH(async (req, res) => {
   // Kill PTY first if it's still alive, then drop the record.
   try { webTerminal.kill(req.params.id); } catch {}