@bakapiano/ccsm 0.22.4 → 0.22.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bakapiano/ccsm",
-  "version": "0.22.4",
+  "version": "0.22.5",
   "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

@@ -292,45 +292,118 @@
 .page-title-bar + .session-tabs {
   margin-top: calc(-1 * var(--s-4));
 }
-.session-tab {
-  appearance: none;
-  background: var(--term-tab);
-  border: 0;
-  border-bottom: 2px solid transparent;
-  margin-bottom: -1px;          /* overlap container border-bottom */
-  padding: 0 10px;
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  font: inherit;
-  font-size: 12px;
+.session-tab {
+  appearance: none;
+  background: var(--term-tab);
+  border: 0;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;          /* overlap container border-bottom */
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font: inherit;
+  font-size: 12px;
   color: var(--term-tab-text);
-  cursor: pointer;
-  max-width: 200px;
-  min-width: 0;
-  transition: background-color .12s, color .12s;
-}
-.session-tab:hover { background: var(--term-tab-hover); color: var(--term-on); }
-.session-tab.is-active {
-  background: var(--term-surface);
-  color: var(--term-on);
-  border-bottom-color: var(--term-surface);
-}
-.session-tab-icon { display: inline-flex; flex-shrink: 0; }
-.session-tab-icon svg { width: 14px; height: 14px; }
-.session-tab-icon img { width: 14px; height: 14px; }
-.session-tab-label {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  min-width: 0;
-}
-.session-tab-meta { color: var(--term-tab-text); font-size: 11px; }
-.session-tab.is-active .session-tab-meta { color: rgba(255, 255, 255, 0.6); }
-.session-tab-add {
-  background: transparent;
-  max-width: none;
-  padding: 0 8px;
+  cursor: pointer;
+  max-width: 200px;
+  min-width: 0;
+  transition: background-color .12s, color .12s;
+  user-select: none;
+  position: relative;
+}
+.session-tab:hover { background: var(--term-tab-hover); color: var(--term-on); }
+.session-tab.is-active {
+  background: var(--term-surface);
+  color: var(--term-on);
+  border-bottom-color: var(--term-surface);
+}
+.session-tab:focus-visible {
+  outline: 1px solid var(--accent);
+  outline-offset: -2px;
+}
+.session-tab[data-dnd-over="true"] {
+  box-shadow: inset 2px 0 0 var(--accent);
+}
+.session-tab::before {
+  content: "";
+  position: absolute;
+  left: 3px;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  border-radius: 0;
+  background: var(--ink-faint);
+  opacity: .55;
+}
+.session-tab.is-running::before {
+  background: var(--green);
+  opacity: .9;
+}
+.session-tab.is-working::before {
+  background: var(--blue, #4a73a5);
+  opacity: .95;
+}
+.session-tab.is-stopped::before {
+  background: var(--ink-faint);
+  opacity: .45;
+}
+.session-tab-main {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  flex: 1 1 auto;
+  height: 100%;
+  padding: 0 0 0 14px;
+}
+.session-tab-main[draggable="true"] {
+  cursor: grab;
+}
+.session-tab-main[draggable="true"]:active {
+  cursor: grabbing;
+}
+.session-tab-icon { display: inline-flex; flex-shrink: 0; }
+.session-tab-icon svg { width: 14px; height: 14px; }
+.session-tab-icon img { width: 14px; height: 14px; }
+.session-tab-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+.session-tab-close {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: currentColor;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  margin-right: 5px;
+  border-radius: 3px;
+  opacity: 0;
+  flex: 0 0 auto;
+  cursor: pointer;
+}
+.session-tab:hover .session-tab-close,
+.session-tab.is-active .session-tab-close,
+.session-tab:focus-within .session-tab-close {
+  opacity: .72;
+}
+.session-tab-close:hover {
+  opacity: 1;
+  background: rgba(255, 255, 255, 0.12);
+}
+.session-tab-close svg {
+  width: 12px;
+  height: 12px;
+}
+.session-tab-add {
+  background: transparent;
+  max-width: none;
+  padding: 0 8px;
   color: #fff;
 }
 .session-tab-add:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
@@ -472,14 +545,43 @@
   gap: var(--s-2);
   flex-shrink: 0;
 }
-.session-pane-body {
-  flex: 1;
-  min-height: 0;
-  background: var(--term-surface);
-}
-.session-pane-body .terminal-host {
-  height: 100%;
-}
+.session-pane-body {
+  flex: 1;
+  min-height: 0;
+  background: var(--term-surface);
+  position: relative;
+  overflow: hidden;
+}
+.terminal-stack {
+  position: absolute;
+  inset: 0;
+  min-width: 0;
+  min-height: 0;
+}
+.terminal-layer {
+  position: absolute;
+  inset: 0;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  visibility: hidden;
+  pointer-events: none;
+  z-index: 0;
+}
+.terminal-layer.is-active {
+  visibility: visible;
+  pointer-events: auto;
+  z-index: 1;
+}
+.session-pane-body .terminal-host {
+  height: 100%;
+}
+.terminal-layer .terminal-host {
+  flex: 1 1 auto;
+  min-height: 0;
+  height: auto;
+}
 .session-pane-body .terminal-empty {
   background: var(--term-surface);
   color: var(--term-on);

package/public/js/components/TerminalInstance.js

@@ -63,6 +63,14 @@ export class TerminalInstance {
     this.xterm.applyResolvedTheme();
   }
 
+  focus() {
+    this.xterm.focus();
+  }
+
+  blur() {
+    this.xterm.blur();
+  }
+
   layout(width, height, immediate = false) {
     const layoutDimensions = this._resolveLayoutDimensions(width, height);
     if (!layoutDimensions) return null;
@@ -361,6 +369,9 @@ export class TerminalInstance {
     this._beginReplay();
     this.xterm.write(data, () => {
       this._endReplay();
+      if (this.isVisible) {
+        this.scheduleLayout({ immediate: true, retries: true, forceRedraw: true });
+      }
     });
   }
 

package/public/js/components/TerminalView.js

@@ -8,7 +8,7 @@ import { themeMode } from '../state.js';
 import { TerminalKeyBar } from './TerminalKeyBar.js';
 import { TerminalInstance } from './TerminalInstance.js';
 
-export function TerminalView({ terminalId, cliType }) {
+export function TerminalView({ terminalId, cliType, visible = true }) {
   const hostRef = useRef(null);
   const instanceRef = useRef(null);
   const [displaced, setDisplaced] = useState(false);
@@ -38,6 +38,8 @@ export function TerminalView({ terminalId, cliType }) {
     });
     instanceRef.current = instance;
     instance.attachToElement(host);
+    instance.setVisible(visible);
+    if (visible) instance.focus();
 
     return () => {
       if (instanceRef.current === instance) instanceRef.current = null;
@@ -49,6 +51,17 @@ export function TerminalView({ terminalId, cliType }) {
     instanceRef.current?.setCliType(cliType);
   }, [cliType, terminalId, reattachNonce]);
 
+  useEffect(() => {
+    const instance = instanceRef.current;
+    if (!instance) return;
+    instance.setVisible(visible);
+    if (visible) {
+      instance.focus();
+    } else {
+      instance.blur();
+    }
+  }, [visible, terminalId, reattachNonce]);
+
   if (!terminalId) {
     return html`<div class="terminal-empty">Select a terminal on the left, or launch a new one.</div>`;
   }
@@ -80,6 +93,6 @@ export function TerminalView({ terminalId, cliType }) {
   return html`
     <${Fragment}>
       <div key="host" ref=${hostRef} class="terminal-host"></div>
-      <${TerminalKeyBar} send=${sendInput} cliType=${cliType} />
+      ${visible ? html`<${TerminalKeyBar} send=${sendInput} cliType=${cliType} />` : null}
     </${Fragment}>`;
 }

package/public/js/components/XtermTerminal.js

@@ -99,6 +99,7 @@ export class XtermTerminal {
   attachToElement(host) {
     this.host = host;
     this.raw.open(host);
+    host.xterm = this.raw;
     this._enableWebglRenderer();
     try {
       document.fonts?.ready?.then(() => {
@@ -195,6 +196,14 @@ export class XtermTerminal {
     try { this.raw.focus(); } catch {}
   }
 
+  blur() {
+    try {
+      if (this.helperTextarea && document.activeElement === this.helperTextarea) {
+        this.helperTextarea.blur();
+      }
+    } catch {}
+  }
+
   onData(listener) {
     return this.raw.onData(listener);
   }
@@ -208,6 +217,9 @@ export class XtermTerminal {
   }
 
   dispose() {
+    if (this.host?.xterm === this.raw) {
+      try { delete this.host.xterm; } catch { this.host.xterm = undefined; }
+    }
     this.host = null;
     this._disposeWebglRenderer(false);
     this.refreshDimensionListeners.clear();

package/public/js/pages/SessionsPage.js

@@ -13,36 +13,66 @@ 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 { useDragSort } from '../components/useDragSort.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 }) {
-  // For now we only show the currently active session as a single tab —
-  // other open sessions are hidden, and the "+ new" affordance is parked
-  // until multi-tab UX lands.
-  const active = activeId ? sessions.value.find((s) => s.id === activeId) : null;
-  if (!active) return null;
-  const open = [active];
-  return html`
-    <div class="session-tabs" role="tablist">
-      <div class="session-tabs-list">
-        ${open.map((s) => {
+
+function SessionTabs({ activeId, openSessions, onActivate, onClose, onReorder, onNew, kebab }) {
+  const active = activeId ? sessions.value.find((s) => s.id === activeId) : null;
+  const base = Array.isArray(openSessions) ? openSessions : [];
+  const open = active && !base.some((s) => s.id === active.id)
+    ? [...base, active]
+    : base;
+  const dnd = useDragSort(open.map((s) => s.id), onReorder);
+  if (!open.length) return null;
+  return html`
+    <div class="session-tabs" role="tablist">
+      <div class="session-tabs-list">
+        ${open.map((s) => {
           const cli = (config.value?.clis || []).find((c) => c.id === s.cliId);
-          const Icon = IconForCliType(cli?.type) || IconTerminal;
-          const t = s.title || s.workspace || s.id.slice(0, 12);
-          const isActive = s.id === activeId;
-          return html`
-            <button key=${s.id}
-                    role="tab"
-                    aria-selected=${isActive}
-                    class=${`session-tab${isActive ? ' is-active' : ''}`}
-                    onClick=${() => onActivate(s.id)}
-                    title=${`${t} · ${s.cwd}`}>
-              <span class="session-tab-icon"><${Icon} /></span>
-              <span class="session-tab-label">${t}</span>
-              ${s.status !== 'running' ? html`<span class="session-tab-meta">·</span>` : null}
-            </button>`;
-        })}
+          const Icon = IconForCliType(cli?.type) || IconTerminal;
+          const t = s.title || s.workspace || s.id.slice(0, 12);
+          const isActive = s.id === activeId;
+          const running = s.status === 'running';
+          const working = running && s.activity === 'working';
+          const statusText = running ? (working ? 'running, working' : 'running') : 'stopped';
+          const statusClass = `${running ? ' is-running' : ' is-stopped'}${working ? ' is-working' : ''}`;
+          const onKeyDown = (ev) => {
+            if (ev.key !== 'Enter' && ev.key !== ' ') return;
+            ev.preventDefault();
+            onActivate(s.id);
+          };
+          return html`
+            <div key=${s.id}
+                 role="tab"
+                 aria-selected=${isActive}
+                 aria-label=${`${t}, ${statusText}`}
+                 tabIndex=${0}
+                 class=${`session-tab${isActive ? ' is-active' : ''}${statusClass}`}
+                 data-session-id=${s.id}
+                 title=${`${t} · ${statusText} · ${s.cwd}`}
+                 onKeyDown=${onKeyDown}
+                 ...${dnd.rowProps(s.id)}>
+              <div class="session-tab-main"
+                   onClick=${() => onActivate(s.id)}
+                   ...${dnd.handleProps(s.id)}>
+                <span class="session-tab-icon"><${Icon} /></span>
+                <span class="session-tab-label">${t}</span>
+              </div>
+              <button class="session-tab-close"
+                      type="button"
+                      title="Close tab"
+                      aria-label=${`Close ${t}`}
+                      onPointerDown=${(ev) => ev.stopPropagation()}
+                      onClick=${(ev) => {
+                        ev.preventDefault();
+                        ev.stopPropagation();
+                        onClose(s.id);
+                      }}>
+                <${IconClose} />
+              </button>
+            </div>`;
+        })}
         ${/* <button class="session-tab session-tab-add" onClick=${onNew} title="New session">
           <${IconPlus} />
         </button> */ null}
@@ -116,8 +146,10 @@ export function SessionsPage() {
   const id = activeSessionId.value;
   const list = sessions.value;
   const session = id ? list.find((s) => s.id === id) : null;
+  const runningSessions = list.filter((s) => s.status === 'running');
   const [resumeError, setResumeError] = useState(null);
   const [actionBusy, setActionBusy] = useState(false);
+  const [openTerminalIds, setOpenTerminalIds] = useState(() => new Set());
   // 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);
@@ -141,16 +173,79 @@ export function SessionsPage() {
       .then((launched) => { if (launched?.id) selectSession(launched.id); })
       .catch((e) => { setResumeError(e.message); setToast(e.message, 'error'); });
   }, [session?.id, session?.status, session?.cliId, session?.manualStopped, retryNonce]);
-
-  if (!session) return null;
+
+  useEffect(() => {
+    const runningIds = new Set(runningSessions.map((s) => s.id));
+    setOpenTerminalIds((prev) => {
+      const next = new Set();
+      let changed = false;
+      for (const sid of prev) {
+        if (runningIds.has(sid)) {
+          next.add(sid);
+        } else {
+          changed = true;
+        }
+      }
+      if (session?.status === 'running' && !next.has(session.id)) {
+        next.add(session.id);
+        changed = true;
+      }
+      return changed || next.size !== prev.size ? next : prev;
+    });
+  }, [list, session?.id, session?.status]);
+
+  if (!session) return null;
 
   const cli = (config.value?.clis || []).find((c) => c.id === session.cliId);
+  const cliForSession = (s) => (config.value?.clis || []).find((c) => c.id === s.cliId);
   const switchableClis = cli
     ? (config.value?.clis || []).filter((c) => c.id !== cli.id && c.type === cli.type)
     : [];
   const running = session.status === 'running';
+  const retainedSessions = Array.from(openTerminalIds)
+    .map((sid) => list.find((s) => s.id === sid))
+    .filter((s) => s && s.status === 'running');
+  const terminalSessions = running && !retainedSessions.some((s) => s.id === session.id)
+    ? [...retainedSessions, session]
+    : retainedSessions;
   const title = session.title || session.workspace || session.id.slice(0, 12);
-
+
+  const onCloseTab = (sid) => {
+    setOpenTerminalIds((prev) => {
+      if (!prev.has(sid)) return prev;
+      const next = new Set(prev);
+      next.delete(sid);
+      return next;
+    });
+
+    if (sid !== session.id) return;
+    const currentIndex = terminalSessions.findIndex((s) => s.id === sid);
+    const remaining = terminalSessions.filter((s) => s.id !== sid);
+    const replacement = currentIndex >= 0
+      ? remaining[Math.min(currentIndex, remaining.length - 1)] || remaining[remaining.length - 1]
+      : remaining[0];
+    if (replacement) {
+      selectSession(replacement.id);
+    } else {
+      activeSessionId.value = null;
+      selectTab('launch');
+    }
+  };
+
+  const onReorderTabs = (orderedIds) => {
+    const runningIds = new Set(runningSessions.map((s) => s.id));
+    setOpenTerminalIds((prev) => {
+      const nextIds = [];
+      for (const sid of orderedIds) {
+        if (runningIds.has(sid) && !nextIds.includes(sid)) nextIds.push(sid);
+      }
+      for (const sid of prev) {
+        if (runningIds.has(sid) && !nextIds.includes(sid)) nextIds.push(sid);
+      }
+      return new Set(nextIds);
+    });
+  };
+
   const onResume = async () => {
     clearResumeFailure(session.id);
     setResumeError(null);
@@ -236,7 +331,10 @@ export function SessionsPage() {
       `} />
     <${SessionTabs}
       activeId=${session.id}
+      openSessions=${terminalSessions}
       onActivate=${(sid) => selectSession(sid)}
+      onClose=${onCloseTab}
+      onReorder=${onReorderTabs}
       onNew=${() => selectTab('launch')}
       kebab=${html`
         <${SessionControls} running=${running}
@@ -249,12 +347,32 @@ export function SessionsPage() {
                         onDelete=${onDelete}
                         onOpenEditor=${onOpenEditor}
                         onSwitchCli=${onSwitchCli} />`} />
-    <div class="session-pane">
-      <div class="session-pane-body">
-        ${running
-          ? html`<${TerminalView} terminalId=${session.id} cliType=${cli?.type} />`
-          : html`
-            <div class="terminal-empty">
+    <div class="session-pane">
+      <div class="session-pane-body">
+        ${terminalSessions.length ? html`
+          <div class="terminal-stack">
+            ${terminalSessions.map((s) => {
+              const sCli = cliForSession(s);
+              const active = running && s.id === session.id;
+              return html`
+                <div key=${s.id}
+                     class=${`terminal-layer${active ? ' is-active' : ''}`}
+                     data-terminal-id=${s.id}
+                     data-active=${active || null}
+                     aria-hidden=${!active}>
+                  <${TerminalView}
+                    key=${s.id}
+                    terminalId=${s.id}
+                    cliType=${sCli?.type}
+                    visible=${active}
+                  />
+                </div>`;
+            })}
+          </div>
+        ` : null}
+        ${!running
+          ? html`
+            <div class="terminal-empty">
               ${resumeError ? html`
                 <div>Failed to resume: <span class="mono">${resumeError}</span></div>
                 <button class="action primary" onClick=${onRetry}>Retry</button>
@@ -266,7 +384,8 @@ export function SessionsPage() {
               ` : html`
                 <div>Resuming session…</div>
               `}
-            </div>`}
-      </div>
-    </div>`;
-}
+            </div>`
+          : null}
+      </div>
+    </div>`;
+}