@bakapiano/ccsm 0.18.2 → 0.18.3

package/lib/tunnel.js

@@ -17,10 +17,12 @@
 // dirs. Returns the absolute path so we can spawn the child regardless
 // of whether the post-install PATH refresh has reached this Node process.
 
-const { spawn, execFileSync } = require('node:child_process');
+const { spawn, execFile } = require('node:child_process');
 const path = require('node:path');
 const fs = require('node:fs');
 const os = require('node:os');
+const { promisify } = require('node:util');
+const execFileP = promisify(execFile);
 
 const PROVIDERS = {
   cloudflared: {
@@ -61,19 +63,15 @@ let token = null;     // Remote-access bearer token. Null = no remote
 function getToken() { return token; }
 function setToken(t) { token = t ? String(t) : null; return token; }
 
-function findBinary(provider) {
+async function findBinary(provider) {
   const p = PROVIDERS[provider];
   if (!p) return null;
   // PATH lookup via where.exe — works regardless of how the CLI got
-  // installed (winget, choco, manual, in-tree).
+  // installed (winget, choco, manual, in-tree). windowsHide stops the
+  // conhost window from flashing.
   try {
-    // windowsHide: true stops each execFileSync from briefly flashing
-    // a black conhost window. The Remote page polls /api/tunnel/status
-    // every 2.5s and probe() (when its 30s cache is cold) fires 4-6
-    // execs back-to-back — without this flag the screen popcorns with
-    // little windows every cache cycle.
-    const out = execFileSync('where.exe', [p.binary], { stdio: ['ignore', 'pipe', 'ignore'], windowsHide: true })
-      .toString().trim().split(/\r?\n/)[0];
+    const { stdout } = await execFileP('where.exe', [p.binary], { windowsHide: true });
+    const out = String(stdout).trim().split(/\r?\n/)[0];
     if (out && fs.existsSync(out)) return out;
   } catch { /* not on PATH */ }
   // Fall back to known install locations (winget's PATH update doesn't
@@ -97,20 +95,18 @@ function findBinary(provider) {
   return null;
 }
 
-function getVersion(provider, exe) {
+async function getVersion(provider, exe) {
   try {
-    const out = execFileSync(exe, ['--version'], { stdio: ['ignore', 'pipe', 'pipe'], windowsHide: true })
-      .toString().trim().split(/\r?\n/)[0];
-    return out || null;
+    const { stdout } = await execFileP(exe, ['--version'], { windowsHide: true });
+    return String(stdout).trim().split(/\r?\n/)[0] || null;
   } catch { return null; }
 }
 
-function checkDevtunnelLogin(exe) {
+async function checkDevtunnelLogin(exe) {
   try {
-    const out = execFileSync(exe, ['user', 'show'], { stdio: ['ignore', 'pipe', 'ignore'], timeout: 5000, windowsHide: true })
-      .toString().trim();
+    const { stdout } = await execFileP(exe, ['user', 'show'], { windowsHide: true, timeout: 5000 });
     // "Logged in as <email> using <provider>." vs "Not logged in"
-    const m = out.match(/Logged in as (\S+)/);
+    const m = String(stdout).trim().match(/Logged in as (\S+)/);
     if (m) return { loggedIn: true, user: m[1] };
     return { loggedIn: false, user: null };
   } catch {
@@ -128,31 +124,39 @@ const PROBE_TTL_MS = 30_000;
 let probeCache = null;
 let probeCacheAt = 0;
 
-function probe(force = false) {
+async function probe(force = false) {
   if (!force && probeCache && Date.now() - probeCacheAt < PROBE_TTL_MS) {
     return probeCache;
   }
-  const out = {};
-  for (const id of Object.keys(PROVIDERS)) {
-    const exe = findBinary(id);
-    const p = { installed: !!exe, exe, version: exe ? getVersion(id, exe) : null };
-    if (id === 'devtunnel' && exe) {
-      Object.assign(p, checkDevtunnelLogin(exe));
+  // All providers in parallel; within each, --version and the
+  // devtunnel `user show` check run together too. Cold probe drops
+  // from ~1.5s serial to ~700ms (capped by the slowest exec —
+  // typically `devtunnel user show`).
+  const ids = Object.keys(PROVIDERS);
+  const results = await Promise.all(ids.map(async (id) => {
+    const exe = await findBinary(id);
+    const p = { installed: !!exe, exe, version: null };
+    if (exe) {
+      const tasks = [getVersion(id, exe)];
+      if (id === 'devtunnel') tasks.push(checkDevtunnelLogin(exe));
+      const [version, devUser] = await Promise.all(tasks);
+      p.version = version;
+      if (devUser) Object.assign(p, devUser);
     }
-    out[id] = p;
-  }
-  probeCache = out;
+    return [id, p];
+  }));
+  probeCache = Object.fromEntries(results);
   probeCacheAt = Date.now();
-  return out;
+  return probeCache;
 }
 
 // Invalidate the cache when callers know the on-disk state likely changed
 // (post-install, post-login, etc.). Next probe() re-shells.
 function invalidateProbe() { probeCache = null; probeCacheAt = 0; }
 
-function status() {
+async function status() {
   return {
-    providers: probe(),
+    providers: await probe(),
     running: !!current,
     provider: current?.provider || null,
     url: current?.url || null,
@@ -174,10 +178,10 @@ async function start({ provider, port }) {
   if (current) throw new Error('tunnel already running');
   const p = PROVIDERS[provider];
   if (!p) throw new Error(`unknown provider: ${provider}`);
-  const exe = findBinary(provider);
+  const exe = await findBinary(provider);
   if (!exe) throw new Error(`${p.label} is not installed`);
   if (provider === 'devtunnel') {
-    const { loggedIn } = checkDevtunnelLogin(exe);
+    const { loggedIn } = await checkDevtunnelLogin(exe);
     if (!loggedIn) throw new Error('devtunnel requires login — run `devtunnel user login` first');
   }
 
@@ -211,7 +215,7 @@ async function start({ provider, port }) {
   // Wait up to 25s for the URL to show up in stdout.
   const deadline = Date.now() + 25_000;
   while (Date.now() < deadline) {
-    if (entry.url) return status();
+    if (entry.url) return await status();
     if (!current || current !== entry) {
       throw new Error('tunnel exited before reporting a URL · ' + entry.log.slice(-3).join(' / '));
     }
@@ -219,7 +223,7 @@ async function start({ provider, port }) {
   }
   // Timed out — keep the child alive (the URL might appear later) but
   // tell the caller we don't have one yet.
-  return status();
+  return await status();
 }
 
 function stop() {

package/lib/webTerminal.js

@@ -138,6 +138,17 @@ function attach(id, ws) {
     try { ws.close(4404, 'no such terminal'); } catch {}
     return;
   }
+  // Latest-wins: a session has at most one live WebSocket at any
+  // moment. The new attach displaces any existing ones — keeps PTY
+  // resize semantics unambiguous (each client sends its own dimensions
+  // for its own viewport; with two clients fighting, claude's TUI
+  // re-renders for whichever sent last and the other side sees a
+  // mis-sized layout). Close code 4001 + reason lets the displaced
+  // client show a clearer message than the generic "[disconnected]".
+  for (const other of entry.sockets) {
+    try { other.close(4001, 'displaced by another client'); } catch {}
+  }
+  entry.sockets.clear();
   entry.sockets.add(ws);
   if (entry.history) {
     try { ws.send(JSON.stringify({ type: 'output', data: scrubReplayResponses(entry.history) })); } catch {}

package/package.json

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

@@ -440,3 +440,57 @@
   background: #faf9f5;
   border-color: #faf9f5;
 }
+
+/* Displaced state — shown when the server kicks us off because another
+   client attached to the same session (latest-wins). Same dark surface
+   as terminal-empty so the transition from running terminal → displaced
+   doesn't flash a colour change. */
+.terminal-displaced {
+  background: #1a1815;
+  color: #e8e3d5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: var(--s-5);
+}
+.terminal-displaced-card {
+  max-width: 460px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-3);
+}
+.terminal-displaced-card h2 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #faf9f5;
+  letter-spacing: -0.005em;
+}
+.terminal-displaced-card p {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.55;
+  color: rgba(232, 227, 213, 0.72);
+}
+.terminal-displaced-actions {
+  margin-top: var(--s-2);
+  display: flex;
+  justify-content: center;
+}
+.terminal-displaced-card .action.primary {
+  background: #e8e3d5;
+  color: #1a1815;
+  border-color: #e8e3d5;
+  padding: 9px 20px;
+  font-size: 13px;
+}
+.terminal-displaced-card .action.primary:hover {
+  background: #faf9f5;
+  border-color: #faf9f5;
+}
+.terminal-displaced-hint {
+  font-size: 11.5px !important;
+  color: rgba(232, 227, 213, 0.45) !important;
+}

package/public/css/widgets.css

@@ -1724,6 +1724,27 @@
   word-break: break-all;
 }
 
+.remote-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--s-3);
+  min-height: 260px;
+  color: var(--ink-muted);
+  font-size: 13px;
+}
+.remote-loading p { margin: 0; }
+.remote-loading-spinner {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  border: 2px solid var(--border-strong);
+  border-top-color: var(--ink);
+  animation: remote-spin 0.75s linear infinite;
+}
+@keyframes remote-spin { to { transform: rotate(360deg); } }
+
 .remote-empty {
   margin: 0;
   font-size: 12.5px;

package/public/js/components/TerminalView.js

@@ -3,7 +3,7 @@
 // output frames into xterm. Disposes everything on unmount or id change.
 
 import { html } from '../html.js';
-import { useEffect, useRef } from 'preact/hooks';
+import { useEffect, useRef, useState } from 'preact/hooks';
 import { Terminal } from '@xterm/xterm';
 import { FitAddon } from '@xterm/addon-fit';
 import { WebLinksAddon } from '@xterm/addon-web-links';
@@ -36,6 +36,13 @@ export function TerminalView({ terminalId }) {
   const hostRef = useRef(null);
   const termRef = useRef(null);
   const wsRef = useRef(null);
+  // Set when ws.onclose receives our custom "displaced by another
+  // client" code (4001) from lib/webTerminal.js's latest-wins policy.
+  // Renders a full-pane prompt with a "Take it back" button that bumps
+  // reattachNonce → useEffect re-runs → new WS, displacing whoever
+  // currently holds the session.
+  const [displaced, setDisplaced] = useState(false);
+  const [reattachNonce, setReattach] = useState(0);
 
   useEffect(() => {
     if (!terminalId || !hostRef.current) return;
@@ -148,8 +155,19 @@ export function TerminalView({ terminalId }) {
         term.write(`\r\n\x1b[2m[process exited · code ${frame.code}]\x1b[0m\r\n`);
       }
     };
-    ws.onclose = () => {
-      term.write('\r\n\x1b[2m[disconnected]\x1b[0m\r\n');
+    ws.onclose = (ev) => {
+      // Server uses code 4001 + reason "displaced by another client"
+      // when a fresh attach takes over the session (latest-wins policy
+      // in lib/webTerminal.js's attach). We replace the terminal with
+      // a full-pane prompt + Take it back button via setDisplaced(true).
+      // Generic disconnects (network blip, server restart, PTY exit)
+      // get the dim inline notice as before — those usually self-heal
+      // and aren't worth a modal.
+      if (ev && ev.code === 4001) {
+        setDisplaced(true);
+      } else {
+        term.write('\r\n\x1b[2m[disconnected]\x1b[0m\r\n');
+      }
     };
 
     const onData = (data) => {
@@ -328,10 +346,50 @@ export function TerminalView({ terminalId }) {
       termRef.current = null;
       wsRef.current = null;
     };
-  }, [terminalId]);
+  }, [terminalId, reattachNonce]);
 
   if (!terminalId) {
     return html`<div class="terminal-empty">Select a terminal on the left, or launch a new one.</div>`;
   }
-  return html`<div ref=${hostRef} class="terminal-host"></div>`;
+  if (displaced) {
+    // Distinct key (and a non-div tag) forces Preact's reconciler to
+    // UNMOUNT the host <div> and mount a fresh element. Without this,
+    // Preact reuses the same DOM node, only flipping its className —
+    // and the xterm canvases stay parented inside, visible behind our
+    // overlay text. Re-mount on reattach: bumping reattachNonce reruns
+    // the effect with a fresh Terminal + WebSocket pair, which the
+    // server's latest-wins gate handles by displacing the current
+    // holder.
+    return html`
+      <section key="displaced" class="terminal-displaced">
+        <div class="terminal-displaced-card">
+          <h2>Another device picked up this session</h2>
+          <p>
+            Only one client at a time can attach. Your terminal here was
+            closed when another browser opened this session — its keystrokes
+            and resize events would otherwise fight yours.
+          </p>
+          <div class="terminal-displaced-actions">
+            <button class="action primary"
+                    onClick=${() => {
+                      // Clear displaced FIRST so the next render swaps the
+                      // overlay out for the host div — that's the only
+                      // way hostRef.current populates. Then bump the nonce
+                      // so the effect re-runs with the freshly-mounted
+                      // host and opens a new WS. Doing both in one tick
+                      // batches the state updates; React renders, mounts
+                      // the host, then flushes effects.
+                      setDisplaced(false);
+                      setReattach((n) => n + 1);
+                    }}>
+              Take it back
+            </button>
+          </div>
+          <p class="terminal-displaced-hint">
+            Taking it back will close the other client the same way.
+          </p>
+        </div>
+      </section>`;
+  }
+  return html`<div key="host" ref=${hostRef} class="terminal-host"></div>`;
 }

package/public/js/pages/RemotePage.js

@@ -124,6 +124,12 @@ export function RemotePage() {
   const [token, setTokenLocal] = useState('');
   const [busy, setBusy] = useState(false);
   const [deviceList, setDeviceList] = useState([]);
+  // First /api/tunnel/status round-trip is the slow one — even with
+  // 30s server-side cache + parallel probe, a cold call shells out to
+  // where.exe / --version / `devtunnel user show` and adds ~700ms.
+  // We hide the form behind a spinner during that window so the user
+  // doesn't see empty radios + placeholders that suddenly fill in.
+  const [loading, setLoading] = useState(true);
   const pollRef = useRef(null);
 
   async function refresh() {
@@ -143,6 +149,7 @@ export function RemotePage() {
         return cur || 'cloudflared';
       });
     } catch (e) { setToast(`status load failed · ${e.message}`, 'error'); }
+    finally { setLoading(false); }
   }
 
   useEffect(() => {
@@ -245,6 +252,17 @@ export function RemotePage() {
   const cf      = status?.providers?.cloudflared;
   const dt      = status?.providers?.devtunnel;
 
+  if (loading) {
+    return html`
+      <${PageTitleBar} title="Remote" />
+      <div class="settings-scroll">
+        <div class="remote-loading">
+          <div class="remote-loading-spinner" aria-hidden="true"></div>
+          <p>Probing tunnel providers…</p>
+        </div>
+      </div>`;
+  }
+
   return html`
     <${PageTitleBar} title="Remote" />
     <div class="settings-scroll">

package/server.js

@@ -1035,9 +1035,9 @@ app.post('/api/shutdown', (_req, res) => {
 // the chosen tunnel CLI. URL appears asynchronously in the CLI's
 // stdout; lib/tunnel parses it. /status returns the latest snapshot
 // for the page to poll.
-app.get('/api/tunnel/status', (_req, res) => {
-  res.json(tunnel.status());
-});
+app.get('/api/tunnel/status', asyncH(async (_req, res) => {
+  res.json(await tunnel.status());
+}));
 app.post('/api/tunnel/start', asyncH(async (req, res) => {
   const { provider, token } = req.body || {};
   if (!token || String(token).length < 8) {
@@ -1048,20 +1048,20 @@ app.post('/api/tunnel/start', asyncH(async (req, res) => {
     const result = await tunnel.start({ provider, port: currentPort });
     res.json(result);
   } catch (e) {
-    res.status(400).json({ error: e.message, providers: tunnel.probe() });
+    res.status(400).json({ error: e.message, providers: await tunnel.probe().catch(() => ({})) });
   }
 }));
-app.post('/api/tunnel/stop', (_req, res) => {
+app.post('/api/tunnel/stop', asyncH(async (_req, res) => {
   const stopped = tunnel.stop();
-  res.json({ stopped, ...tunnel.status() });
-});
-app.post('/api/tunnel/token', (req, res) => {
+  res.json({ stopped, ...(await tunnel.status()) });
+}));
+app.post('/api/tunnel/token', asyncH(async (req, res) => {
   // Bare token update without touching the running tunnel.
   // POST { token: '' } to clear and disable remote auth.
   const t = (req.body && req.body.token) || '';
   tunnel.setToken(t);
-  res.json(tunnel.status());
-});
+  res.json(await tunnel.status());
+}));
 app.post('/api/tunnel/install', asyncH(async (req, res) => {
   const { provider } = req.body || {};
   try {