@bakapiano/ccsm 0.21.3 → 0.21.5

package/lib/config.js

@@ -80,6 +80,11 @@ const DEFAULTS = {
   // Launch button when the user doesn't override.
   clis: DEFAULT_CLIS,
   defaultCliId: 'claude',
+  // External editor command for the "Open in editor" session action.
+  // Spawned as `<editor> "<cwd>"`; default `code` = VS Code (whose Source
+  // Control panel doubles as the review-changes view once the folder's
+  // open). Point it at `cursor`, `code-insiders`, `subl`, … as desired.
+  editor: 'code',
   // Devtunnel state. tunnelId holds the persistent (named) tunnel
   // ccsm minted via `devtunnel create` on first Start. Reusing it
   // across host restarts keeps the public URL — and therefore the
@@ -135,6 +140,7 @@ function mergeWithDefaults(partial) {
 
   if (!Array.isArray(out.repos)) out.repos = DEFAULTS.repos;
   if (!Array.isArray(out.clis)) out.clis = [];
+  if (typeof out.editor !== 'string') out.editor = DEFAULTS.editor;
   // Always inject builtin CLIs (claude, codex) if they're missing or were
   // deleted from a saved config — they're managed by ccsm, the user can
   // tweak args/shell but can't remove them. Preserves any user

package/package.json

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

@@ -349,12 +349,17 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: #fff;
+  /* Follow the terminal foreground so the dots read on both the light
+     (#f0f0f0) and dark (#252526) tab strip. The old hardcoded #fff was
+     invisible on the light strip. */
+  color: var(--term-on);
   cursor: pointer;
   flex-shrink: 0;
   transition: background-color .12s, color .12s;
 }
-.session-menu-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
+/* 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 svg { width: 16px; height: 16px; }
 
 .session-menu {

package/public/js/api.js

@@ -3,7 +3,7 @@
 
 import { signal } from '@preact/signals';
 import * as S from './state.js';
-import { httpBase, getToken, getDeviceId, getDeviceCode, isRemoteAccess } from './backend.js';
+import { httpBase, getToken, getDeviceId, getDeviceCode, isRemoteAccess, estimateTermSize } from './backend.js';
 
 // Global pending-approval signal. Flipped to true whenever any /api
 // call returns 403 {pending:true}; PendingApprovalOverlay watches this
@@ -259,6 +259,13 @@ export async function deleteSession(sessionId) {
   await loadSessions();
 }
 
+// Open the session's working directory in the user's configured editor
+// (Settings → Editor, default `code`). Returns { editor, cwd } so the
+// caller can surface which editor it launched.
+export function openSessionInEditor(sessionId) {
+  return api('POST', `/api/sessions/${sessionId}/open-editor`);
+}
+
 // Per-session in-flight resume promise. Sidebar.onClick and the
 // SessionsPage auto-resume effect can both fire for the same exited
 // session in the same tick (clicking an exited row mounts SessionsPage
@@ -286,6 +293,9 @@ export function resumeSession(sessionId) {
       // Resolved terminal theme → backend sets a matching COLORFGBG so the
       // CLI's light/dark auto-detection follows the ccsm terminal.
       theme: document.documentElement.dataset.theme,
+      // Seed the PTY at the pane's real size so alt-screen CLIs (claude)
+      // don't lay out at node-pty's 30-row default and get stranded short.
+      ...(estimateTermSize() || {}),
     });
     await loadSessions();
     return r.launched;

package/public/js/backend.js

@@ -83,6 +83,45 @@ export function getDeviceId() {
   }
 }
 
+// ── Initial terminal geometry ─────────────────────────────────────
+// Estimate how many cols/rows the live session pane can hold, so a
+// resumed / newly-launched PTY can spawn at roughly the right size
+// instead of node-pty's 120×30 default. Why it matters: an alt-screen
+// TUI like claude lays its entire UI out the instant it starts, using
+// whatever size the PTY had then. xterm only sends the real size once
+// its WebSocket opens — a beat later — and claude, having already
+// painted at 30 rows, doesn't re-expand to fill a tall window until
+// something forces a redraw (e.g. the user resizing it). On a big
+// display that strands the terminal at ~1/4 height. Seeding the spawn
+// with the pane's real dimensions sidesteps the race; xterm's own fit
+// still corrects any few-row estimate error when it attaches.
+// Returns null when nothing measurable is mounted, so the caller omits
+// the hint and the backend keeps its default.
+export function estimateTermSize() {
+  let w, h;
+  const pane = document.querySelector('.terminal-host')
+            || document.querySelector('.session-pane-body');
+  if (pane) {
+    const r = pane.getBoundingClientRect();
+    w = r.width; h = r.height;
+  } else {
+    // Launching from the Launch page — no pane yet. Approximate from the
+    // window minus the sidebar column and the ~70px of top chrome.
+    const sb = document.querySelector('.sidebar');
+    w = window.innerWidth - (sb ? sb.getBoundingClientRect().width : 232) - 32;
+    h = window.innerHeight - 70;
+  }
+  if (!(w > 40) || !(h > 40)) return null;
+  // Mirror TerminalView's font sizing (13px desktop / 11px mobile,
+  // lineHeight 1.2); cell advance ≈ 0.6em for the mono stack.
+  const isMobile = window.matchMedia('(max-width: 640px)').matches;
+  const fontSize = isMobile ? 11 : 13;
+  return {
+    cols: Math.max(20, Math.min(400, Math.floor(w / (fontSize * 0.6)))),
+    rows: Math.max(8, Math.min(200, Math.floor(h / (fontSize * 1.2)))),
+  };
+}
+
 // Per-device 4-digit human-verification code. Sent alongside the
 // device id so the operator approving on the host can match what
 // they see in the Remote page against what the requesting user

package/public/js/components/TerminalView.js

@@ -229,6 +229,20 @@ export function TerminalView({ terminalId, cliType }) {
     scheduleFit();
     termRef.current = term;
 
+    // Web fonts settle AFTER the first fit. The terminal's mono stack
+    // (`Geist Mono` / `JetBrains Mono`) loads async from Google Fonts with
+    // display:swap, so on a machine without a local `Cascadia Mono` the very
+    // first term.open()+fit() measures cell metrics against the fallback font.
+    // When the real font swaps in its cell height changes, making the row
+    // count fit computed wrong — and because the host's box size never changed,
+    // the ResizeObserver never fires to correct it. The terminal ends up a row
+    // or two short of (or past) the host, "sometimes" — depending purely on
+    // whether the font was already cached. Re-fit once fonts settle; it's a
+    // no-op when the metrics didn't actually change (e.g. local font hit).
+    try {
+      document.fonts?.ready?.then(() => { if (termRef.current === term) scheduleFit(); });
+    } catch {}
+
     // Browser WS API can't set Authorization headers — token + device
     // ride as query string when we have them (Remote-mode access).
     // Server's upgrade handler reads both when Host is non-loopback.

package/public/js/pages/ConfigurePage.js

@@ -154,7 +154,7 @@ export function ConfigurePage() {
 
   useEffect(() => {
     if (cfg && !general) {
-      setGeneral({ workDir: cfg.workDir });
+      setGeneral({ workDir: cfg.workDir, editor: cfg.editor });
     }
   }, [cfg]);
 
@@ -167,6 +167,7 @@ export function ConfigurePage() {
       const saved = await api('PUT', '/api/config', {
         ...cfg,
         workDir: (merged.workDir || '').trim(),
+        editor: (merged.editor || '').trim(),
       });
       config.value = saved;
       setToast('saved');
@@ -198,6 +199,13 @@ export function ConfigurePage() {
           <span class="label">Backend</span>
           <${RestartButton} />
         </div>
+        <label class="field">
+          <span class="label">Editor</span>
+          <input type="text" class="mono" value=${general.editor || ''}
+                 placeholder="code"
+                 onChange=${(e) => saveGeneral({ editor: e.target.value })} />
+          <span class="hint">Command for a session's “Open in editor” action. Default <code>code</code> (VS Code). Try <code>cursor</code>, <code>code-insiders</code>, …</span>
+        </label>
       </div>
     </${Section}>
 

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 } from '../api.js';
+import { resumeSession, clearResumeFailure, deleteSession, setSessionTitle, 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 } from '../icons.js';
+import { IconMoreVert, IconPencil, IconClose, IconPlus, IconForCliType, IconTerminal, IconExternal } 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 }) {
+function SessionMenu({ session, onRename, onDelete, onOpenEditor }) {
   const [open, setOpen] = useState(false);
   const anchor = useRef(null);
   return html`
@@ -61,9 +61,12 @@ function SessionMenu({ session, onRename, onDelete }) {
       <${IconMoreVert} />
     </button>
     ${open ? html`
-      <${Popover} anchor=${anchor} align="right" width=${180}
+      <${Popover} anchor=${anchor} align="right" width=${200}
                   onClose=${() => setOpen(false)}>
         <div class="session-menu">
+          <button class="session-menu-item" onClick=${() => { setOpen(false); onOpenEditor(); }}>
+            <${IconExternal} /> Open in editor
+          </button>
           <button class="session-menu-item" onClick=${() => { setOpen(false); onRename(); }}>
             <${IconPencil} /> Rename
           </button>
@@ -129,6 +132,12 @@ export function SessionsPage() {
       activeSessionId.value = null;
     } catch (e) { setToast(e.message, 'error'); }
   };
+  const onOpenEditor = async () => {
+    try {
+      const r = await openSessionInEditor(session.id);
+      setToast(`Opening in ${r?.editor || 'editor'}…`);
+    } catch (e) { setToast(e.message, 'error'); }
+  };
 
   return html`
     <${PageTitleBar} title=${html`
@@ -146,7 +155,7 @@ export function SessionsPage() {
       activeId=${session.id}
       onActivate=${(sid) => selectSession(sid)}
       onNew=${() => selectTab('launch')}
-      kebab=${html`<${SessionMenu} session=${session} onRename=${onRename} onDelete=${onDelete} />`} />
+      kebab=${html`<${SessionMenu} session=${session} onRename=${onRename} onDelete=${onDelete} onOpenEditor=${onOpenEditor} />`} />
     <div class="session-pane">
       <div class="session-pane-body">
         ${running

package/public/js/streaming.js

@@ -2,7 +2,7 @@
 // Items live in a signal keyed by repo so progress rows are reactive.
 
 import { signal } from '@preact/signals';
-import { httpBase } from './backend.js';
+import { httpBase, estimateTermSize } from './backend.js';
 
 // progressByContext[rootId] = { repoName: { phase, percent, detail, state, indeterminate, name } }
 export const progressByContext = signal({});
@@ -63,10 +63,13 @@ export async function streamNewSession(body, { progressRootId = 'newSessionProgr
   // Pass the resolved terminal theme so the backend can hand CLIs a matching
   // COLORFGBG (light/dark detection). dataset.theme is set by applyTheme().
   const theme = document.documentElement.dataset.theme;
+  // Seed the PTY at the pane's real size (estimated from the window here,
+  // since the terminal isn't mounted yet) so alt-screen CLIs don't start
+  // at node-pty's 30-row default and get stranded short of a tall window.
   const res = await fetch(httpBase() + '/api/sessions/new', {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ ...body, theme }),
+    body: JSON.stringify({ ...body, theme, ...(estimateTermSize() || {}) }),
   });
   if (!res.ok && res.headers.get('content-type')?.startsWith('application/json')) {
     const j = await res.json();

package/server.js

@@ -281,7 +281,7 @@ function quoteForCmd(s) {
   return s;
 }
 
-function spawnCliSession({ cli, cwd, sessionId, meta, extraArgs = [], theme }) {
+function spawnCliSession({ cli, cwd, sessionId, meta, extraArgs = [], theme, cols, rows }) {
   if (!webTerminal.available) {
     const e = new Error('node-pty unavailable · cannot spawn web terminal');
     e.code = 'PTY_UNAVAILABLE';
@@ -331,12 +331,22 @@ function spawnCliSession({ cli, cwd, sessionId, meta, extraArgs = [], theme }) {
   if (theme === 'light' || theme === 'dark') {
     env.COLORFGBG = theme === 'light' ? '0;15' : '15;0';
   }
+  // Spawn the PTY at the size the frontend measured for its terminal pane
+  // (clamped against junk), so alt-screen CLIs lay out at the right height
+  // from the first frame instead of node-pty's 120×30 default. Omitted ⇒
+  // webTerminal.spawn keeps its default; xterm's first resize corrects any
+  // small estimate error on attach regardless.
+  const sized = (Number(cols) > 0 && Number(rows) > 0)
+    ? { cols: Math.min(400, Math.max(20, Math.floor(Number(cols)))),
+        rows: Math.min(200, Math.max(8, Math.floor(Number(rows)))) }
+    : {};
   const trySpawn = (executable) => webTerminal.spawn({
     id: sessionId,
     command: executable,
     args,
     cwd,
     env,
+    ...sized,
     meta: { ...meta, cliId: cli.id, cliName: cli.name },
     onData: () => {
       persistedSessions.touch(sessionId).catch(() => {});
@@ -623,6 +633,35 @@ app.delete('/api/sessions/:id', asyncH(async (req, res) => {
   res.json({ removed });
 }));
 
+// Open a session's working directory in the user's configured editor
+// (config.editor, default `code` = VS Code, whose Source Control panel is
+// also the review-changes view once the folder's open). Spawned detached
+// so it outlives ccsm; shell:true so Windows resolves `code.cmd` via
+// PATHEXT and a command like `code --reuse-window` parses, with the cwd
+// quoted so paths with spaces survive the shell. spawnEnv() merges the
+// user-scope PATH so `code`/`cursor` are found even when the inherited
+// env lacks them.
+app.post('/api/sessions/:id/open-editor', asyncH(async (req, res) => {
+  const record = await persistedSessions.get(req.params.id);
+  if (!record) return res.status(404).json({ error: 'session not found' });
+  const cfg = await loadConfig();
+  const editor = (cfg.editor || '').trim() || 'code';
+  const { spawn } = require('node:child_process');
+  try {
+    const child = spawn(editor, [`"${record.cwd}"`], {
+      detached: true, stdio: 'ignore', shell: true,
+      env: spawnEnv(), windowsHide: true,
+    });
+    // A bad editor command fails the shell async (after we've responded);
+    // log it so it's diagnosable, but the happy path needs no await.
+    child.on('error', (e) => console.warn(`[ccsm] open-editor "${editor}" failed:`, e.message));
+    child.unref();
+    res.json({ ok: true, editor, cwd: record.cwd });
+  } catch (e) {
+    res.status(500).json({ error: `failed to launch ${editor}: ${e.message}` });
+  }
+}));
+
 // Reorder sessions within a folder. Body: { folderId, ids } where ids
 // is the new sequence of session ids in their final display order
 // inside that folder. Each session gets `folderId` + `order: 0..N-1`
@@ -867,6 +906,8 @@ app.post('/api/sessions/new', async (req, res) => {
           meta: { title: workspace.name, workspace: workspace.name, cwd: workspace.path },
           extraArgs: [...themeArgs, ...newSessionArgs],
           theme: req.body && req.body.theme,
+          cols: req.body && req.body.cols,
+          rows: req.body && req.body.rows,
         });
         await persistedSessions.markRunning(record.id, entry.meta.pid);
         launched = { id: record.id, pid: entry.meta.pid, cliId: cli.id };
@@ -1004,6 +1045,8 @@ app.post('/api/sessions/:id/resume', asyncH(async (req, res) => {
       meta: { title: record.title || record.workspace, workspace: record.workspace, cwd: record.cwd },
       extraArgs: [...themeArgs, ...extraArgs],
       theme: req.body && req.body.theme,
+      cols: req.body && req.body.cols,
+      rows: req.body && req.body.rows,
     });
     await persistedSessions.markRunning(record.id, entry.meta.pid);
     res.json({ launched: { id: record.id, pid: entry.meta.pid, cliId: cli.id } });