@bakapiano/ccsm 0.22.0 → 0.22.1

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.1",
   "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/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 {}