@bakapiano/ccsm 0.18.6 → 0.19.0

package/public/js/api.js

@@ -3,7 +3,7 @@
 
 import { signal } from '@preact/signals';
 import * as S from './state.js';
-import { httpBase, getToken, getDeviceId, isRemoteAccess } from './backend.js';
+import { httpBase, getToken, getDeviceId, getDeviceCode, isRemoteAccess } from './backend.js';
 
 // Global pending-approval signal. Flipped to true whenever any /api
 // call returns 403 {pending:true}; PendingApprovalOverlay watches this
@@ -26,6 +26,12 @@ export async function api(method, url, body) {
   // for any tunnel-served page to clear the device-approval gate.
   const dev = getDeviceId();
   if (dev) opts.headers['X-Device-Id'] = dev;
+  // 4-digit identification code (see getDeviceCode in backend.js).
+  // Server stores it on first sight; the Remote page renders it
+  // alongside each pending device so the operator can confirm "yes,
+  // this is the request I just made on my phone" before approving.
+  const code = getDeviceCode();
+  if (code) opts.headers['X-Device-Code'] = code;
   if (body !== undefined) opts.body = JSON.stringify(body);
   const r = await fetch(httpBase() + url, opts);
   const text = await r.text();
@@ -37,14 +43,24 @@ export async function api(method, url, body) {
     // checks.
     if (isRemoteAccess()) {
       if (r.status === 403 && json && (json.pending || json.rejected)) {
-        pendingDevice.value = { ...json, at: Date.now() };
+        // Merge into the existing pendingDevice rather than overwriting
+        // so the "we recorded you at HH:MM" detail (only present on the
+        // initial /me hit, not subsequent gate 403s) survives. Without
+        // this merge, the first failing /api/sessions tick after the
+        // overlay mounts wipes the firstSeen timestamp and the copy
+        // reverts to a generic "The host machine got your request".
+        const prev = pendingDevice.value || {};
+        pendingDevice.value = { ...prev, ...json, at: Date.now() };
       } else if (r.status === 401) {
         // Server doesn't recognise our device — either fresh page load
-        // (no /api/devices/me hit yet) or our record got deleted /
-        // pruned. Drop into the pending overlay; its /me poll will
-        // re-register us using the token we still have in localStorage,
-        // and the response sets pendingDevice to the correct state.
-        pendingDevice.value = { pending: true, at: Date.now() };
+        // (no /api/devices/me hit yet) or our record got pruned (24h
+        // pending TTL) AND our token no longer matches the host's
+        // current one. PendingApprovalOverlay's /me poll will try to
+        // re-register; on token mismatch /me itself 401s and the
+        // overlay flips into "token expired" state. We just nudge the
+        // overlay alive here.
+        const prev = pendingDevice.value || {};
+        pendingDevice.value = { ...prev, pending: true, at: Date.now() };
       }
     }
     throw new Error(json.error || `HTTP ${r.status}`);

package/public/js/backend.js

@@ -82,3 +82,29 @@ export function getDeviceId() {
     return null;
   }
 }
+
+// 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
+// reads off their own screen — guards against approving the wrong
+// pending request when two devices arrive in quick succession.
+// Purely identification, NOT a credential — no secrecy assumed.
+const LS_DEVICE_CODE = 'ccsm.deviceCode';
+
+export function getDeviceCode() {
+  try {
+    let c = localStorage.getItem(LS_DEVICE_CODE);
+    if (!c || !/^\d{4}$/.test(c)) {
+      // 1000..9999 inclusive so the leading digit is never 0 — keeps
+      // the code visually consistent at 4 characters wherever it
+      // shows up. Random.value covers 9000 possibilities, plenty for
+      // a "which of these is yours" disambiguator.
+      const n = 1000 + Math.floor(Math.random() * 9000);
+      c = String(n);
+      localStorage.setItem(LS_DEVICE_CODE, c);
+    }
+    return c;
+  } catch {
+    return null;
+  }
+}

package/public/js/components/App.js

@@ -8,6 +8,7 @@ import { Toast } from './Toast.js';
 import { DialogHost } from './DialogHost.js';
 import { HealthOverlay } from './HealthOverlay.js';
 import { PendingApprovalOverlay } from './PendingApprovalOverlay.js';
+import { RestartOverlay } from './RestartOverlay.js';
 import { MobileNavFab } from './MobileNavFab.js';
 import { isMobile, mobileDrawerOpen } from '../state.js';
 import { SessionsPage } from '../pages/SessionsPage.js';
@@ -65,6 +66,7 @@ export function App() {
       <${Toast} />
       <${DialogHost} />
       <${HealthOverlay} />
+      <${RestartOverlay} />
       <${PendingApprovalOverlay} />
       <${MobileNavFab} />
     </div>`;

package/public/js/components/OfflineBanner.js

@@ -13,48 +13,22 @@
 import { html } from '../html.js';
 import { useEffect, useState } from 'preact/hooks';
 import { serverHealth } from '../state.js';
-import { refreshAll, pollHealth } from '../api.js';
+import { refreshAll } from '../api.js';
 import { BrandMark } from '../icons.js';
 
-// Silent ccsm:// launch via hidden iframe. Same trick as the router.
-// If the protocol is registered AND the user has already OK'd the
-// Windows confirmation prompt, ccsm wakes up within ~2s and the
-// banner auto-dismisses on the next health poll. On a cold first
-// visit (protocol not registered, or "Always allow" not yet ticked),
-// the iframe noops silently and the manual "Start ccsm" button is
-// still there as fallback.
-function silentProtocolLaunch() {
-  try {
-    const f = document.createElement('iframe');
-    f.style.display = 'none';
-    f.src = 'ccsm://start';
-    document.body.appendChild(f);
-    setTimeout(() => { try { f.remove(); } catch {} }, 1500);
-  } catch {}
-}
-
 export function OfflineBanner() {
   const h = serverHealth.value;
   const offline = h.state === 'offline';
   const [clicked, setClicked] = useState(false);
-  const [autoTried, setAutoTried] = useState(false);
 
-  // First time we see offline state, try a silent ccsm:// launch and
-  // tighten the health-poll cadence for a few seconds so the redirect
-  // happens within ~2-3s without any visible UI flash.
-  useEffect(() => {
-    if (!offline || autoTried) return;
-    setAutoTried(true);
-    silentProtocolLaunch();
-    let n = 0;
-    const tick = async () => {
-      if (n++ > 12) return;                  // ~6s of tight polling
-      await pollHealth();
-      if (serverHealth.value.state === 'online') return;
-      setTimeout(tick, 500);
-    };
-    setTimeout(tick, 500);
-  }, [offline]);
+  // We used to silently fire ccsm://start via a hidden iframe the
+  // moment the backend went offline. Even when the user had OK'd
+  // "Always allow" once, some browsers still flashed a momentary
+  // confirmation prompt — and first-time visitors got a "Open
+  // ccsm.cmd?" dialog with no apparent trigger, which is a bad UX.
+  // The Start button below is the only path that fires the protocol
+  // now; the health poll picks the backend up automatically once
+  // the user clicks it (or starts ccsm from a terminal / shortcut).
 
   useEffect(() => {
     if (h.state === 'online' && clicked) {

package/public/js/components/PendingApprovalOverlay.js

@@ -13,6 +13,7 @@
 import { html } from '../html.js';
 import { useEffect } from 'preact/hooks';
 import { api, pendingDevice, loadConfig, refreshAll } from '../api.js';
+import { getDeviceCode } from '../backend.js';
 import { BrandMark } from '../icons.js';
 
 const POLL_MS = 3000;
@@ -41,15 +42,38 @@ export function PendingApprovalOverlay() {
           loadConfig().catch(() => {});
           refreshAll().catch(() => {});
         } else if (d) {
+          // Preserve any fields already set (firstSeen survives the
+          // overlay's repeated polls; staleToken from a previous tick
+          // gets cleared since we just got a 200).
           pendingDevice.value = {
+            ...(pendingDevice.value || {}),
             pending: d.status === 'pending',
             rejected: d.status === 'rejected',
             deviceId: d.id,
             firstSeen: d.firstSeen,
+            staleToken: false,
             at: Date.now(),
           };
         }
-      } catch { /* network blip — try again next tick */ }
+      } catch (e) {
+        // /me 401s in exactly one situation: our device record was
+        // pruned (24h pending TTL) AND the host's current token no
+        // longer matches the one in our localStorage. We can't
+        // self-recover from this — a fresh share URL is needed. Surface
+        // it so the user gets honest feedback instead of an indefinite
+        // "Waiting for approval" loop.
+        const msg = String(e?.message || '');
+        if (/401/.test(msg) || /token/i.test(msg)) {
+          pendingDevice.value = {
+            ...(pendingDevice.value || {}),
+            staleToken: true,
+            pending: false,
+            rejected: false,
+            at: Date.now(),
+          };
+        }
+        /* anything else: network blip — try again next tick */
+      }
     };
     const id = setInterval(tick, POLL_MS);
     tick();
@@ -59,13 +83,24 @@ export function PendingApprovalOverlay() {
   if (!p) return null;
 
   const rejected = !!p.rejected;
+  const staleToken = !!p.staleToken;
   const firstSeen = p.firstSeen ? new Date(p.firstSeen).toLocaleTimeString() : null;
 
   return html`
     <div class="offline-overlay" role="dialog" aria-modal="true" aria-live="polite">
       <div class="offline-card">
         <div class="offline-brand"><${BrandMark} /></div>
-        ${rejected ? html`
+        ${staleToken ? html`
+          <h1 class="offline-title">Link expired</h1>
+          <p class="offline-copy">
+            This share link no longer works — the host either rotated the
+            registration token or this device was pruned after sitting
+            unapproved for 24 hours.
+          </p>
+          <p class="offline-copy" style="margin-top:6px;font-size:12px;color:var(--ink-muted)">
+            Ask the operator to send a fresh share URL from the Remote page.
+          </p>
+        ` : rejected ? html`
           <h1 class="offline-title">Access declined</h1>
           <p class="offline-copy">
             The host machine rejected this device. If you think this was a
@@ -77,6 +112,13 @@ export function PendingApprovalOverlay() {
             The host machine got your request${firstSeen ? ` at ${firstSeen}` : ''}.
             Approve this device from the Remote page over there to continue.
           </p>
+          ${getDeviceCode() ? html`
+            <div class="offline-code-block">
+              <div class="offline-code-label">Your code</div>
+              <div class="offline-code">${getDeviceCode()}</div>
+              <div class="offline-code-hint">Match this against what the host sees before they Approve.</div>
+            </div>
+          ` : null}
           <p class="offline-copy" style="margin-top:6px;font-size:12px;color:var(--ink-muted)">
             We'll auto-unlock the moment the host clicks Approve.
           </p>

package/public/js/components/RestartOverlay.js

@@ -0,0 +1,36 @@
+// Small top-of-viewport banner shown while a user-initiated backend
+// restart is in flight. Used to be a full-screen blocking modal;
+// turned out the user just wanted visible "we're working" feedback,
+// not a giant card-and-button covering the page. Self-dismisses when
+// /api/health reports a fresh PID (different from the one we captured
+// at click time), or after 30s as a safety net.
+
+import { html } from '../html.js';
+import { useEffect } from 'preact/hooks';
+import { restartInFlight, serverHealth } from '../state.js';
+import { refreshAll } from '../api.js';
+
+export function RestartOverlay() {
+  const info = restartInFlight.value;
+  const h = serverHealth.value;
+
+  useEffect(() => {
+    if (!info) return;
+    if (h.state === 'online' && h.pid && h.pid !== info.prevPid) {
+      restartInFlight.value = null;
+      refreshAll().catch(() => {});
+    }
+    const id = setTimeout(() => {
+      if (restartInFlight.value === info) restartInFlight.value = null;
+    }, 30_000);
+    return () => clearTimeout(id);
+  }, [info, h.state, h.pid]);
+
+  if (!info) return null;
+
+  return html`
+    <div class="restart-banner" role="status" aria-live="polite">
+      <span class="restart-banner-spinner" aria-hidden="true"></span>
+      <span class="restart-banner-text">Restarting backend…</span>
+    </div>`;
+}

package/public/js/components/Sidebar.js

@@ -358,10 +358,10 @@ export function Sidebar() {
 
       <nav class="sidebar-nav compact" role="tablist" aria-label="Sections">
         <${NavItem} tab="launch"    icon=${html`<${IconLaunch} />`}    label="New Session" />
-        <${NavItem} tab="configure" icon=${html`<${IconConfigure} />`} label="Settings" dirty=${configDirty.value} />
         ${!isRemoteAccess() ? html`
           <${NavItem} tab="remote"  icon=${html`<${IconRemote} />`}    label="Remote" />
         ` : null}
+        <${NavItem} tab="configure" icon=${html`<${IconConfigure} />`} label="Settings" dirty=${configDirty.value} />
       </nav>
 
       ${!collapsed ? html`<${SessionTree} />` : null}

package/public/js/icons.js

@@ -14,7 +14,8 @@ export const IconSessions = ic('0 0 24 24', html`
 `, 18);
 
 export const IconLaunch = ic('0 0 24 24', html`
-  <path d="M7 17L17 7"/><path d="M9 7h8v8"/>
+  <path d="M19 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h6"/>
+  <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
 `, 18);
 
 export const IconConfigure = ic('0 0 24 24', html`
@@ -135,11 +136,11 @@ export const IconMoreVert = ic('0 0 24 24', html`
 // Remote nav tab; reads as "this machine is broadcasting" / "remote
 // access available".
 export const IconRemote = ic('0 0 24 24', html`
-  <circle cx="12" cy="12" r="2"/>
-  <path d="M8.5 8.5a5 5 0 0 0 0 7"/>
-  <path d="M15.5 8.5a5 5 0 0 1 0 7"/>
-  <path d="M5.5 5.5a9 9 0 0 0 0 13"/>
-  <path d="M18.5 5.5a9 9 0 0 1 0 13"/>
+  <circle cx="18" cy="5" r="2.5"/>
+  <circle cx="6" cy="12" r="2.5"/>
+  <circle cx="18" cy="19" r="2.5"/>
+  <line x1="8.2" y1="10.8" x2="15.8" y2="6.2"/>
+  <line x1="8.2" y1="13.2" x2="15.8" y2="17.8"/>
 `, 18);
 
 // Copy — two stacked rectangles. For "copy to clipboard" affordance
@@ -163,6 +164,10 @@ export const IconCodexColor = () => html`
   <img src="./assets/codex-color.svg" alt="" width="18" height="18" style="display:block" />`;
 export const IconCopilotColor = () => html`
   <img src="./assets/copilot-color.svg" alt="" width="18" height="18" style="display:block" />`;
+export const IconCloudflareColor = ({ size = 28 } = {}) => html`
+  <img src="./assets/cloudflare-color.svg" alt="" width=${size} height=${size} style="display:block" />`;
+export const IconMicrosoftColor = ({ size = 28 } = {}) => html`
+  <img src="./assets/microsoft-color.svg" alt="" width=${size} height=${size} style="display:block" />`;
 
 // Pick the right icon for a CLI based on its type field.
 export const IconForCliType = (type) => {

package/public/js/main.js

@@ -201,7 +201,19 @@ navigator.windowControlsOverlay?.addEventListener?.('geometrychange', syncTitleb
   // loadWorkspaces is included because the workspace "in use" flag is
   // derived from live session cwds server-side — without it, sessions
   // move in/out of a workspace silently and the grid stays stale.
+  // Skipped while a remote tab is sitting in the pending-approval
+  // overlay — every call would 403, fill the console with red, and the
+  // user can't see anything anyway. PendingApprovalOverlay handles its
+  // own re-hydrate the moment we get approved.
   setInterval(async () => {
+    if (pendingDevice.value) {
+      // Skip the data fetches (every one would 403) but still poll
+      // health so the OfflineBanner can show if the host goes down
+      // while we're sitting on the approval screen.
+      pollHealth();
+      clockTick.value = Date.now();
+      return;
+    }
     try {
       await Promise.all([loadSessions(), loadFolders(), loadWorkspaces()]);
       lastRefreshAt.value = Date.now();
@@ -217,6 +229,11 @@ navigator.windowControlsOverlay?.addEventListener?.('geometrychange', syncTitleb
   // caught by the post-close decision in server.js; long enough not to be
   // chatty.
   const ping = () => {
+    // While we're stuck on the pending-approval overlay, /api/heartbeat
+    // would 403 every 10s. Pointless noise — the host's watchdog is
+    // gated on real user activity anyway. Resumes automatically once
+    // pendingDevice clears.
+    if (pendingDevice.value) return Promise.resolve();
     const headers = {};
     // Heartbeat doesn't go through api.js' wrapper but still needs the
     // bearer token + device id when called via tunnel (the middleware

package/public/js/pages/ConfigurePage.js

@@ -6,6 +6,7 @@ import { html } from '../html.js';
 import { useEffect, useState } from 'preact/hooks';
 import {
   config, configDirty, accentColor, folders, workspaces, serverHealth,
+  restartInFlight,
   setAccentColor, ACCENT_DEFAULT,
 } from '../state.js';
 import {
@@ -493,39 +494,55 @@ function VersionField() {
   const latest  = info?.latest;
   const updateAvailable = !!info?.updateAvailable;
 
-  const hint = info?.error
-    ? "Couldn't reach npm registry."
-    : updateAvailable ? `Update available · v${latest}`
-    : latest ? "You're on the latest release."
-    : 'Checks npm registry (cached 30 min).';
-
   return html`
-    <div style="display:flex; align-items:center; gap:12px; flex-wrap:wrap;">
-      <span class="mono">v${current || '?'}</span>
-      ${updateAvailable ? html`
-        <button class="action primary" disabled=${upgrading} onClick=${onUpgrade}>
-          ${upgrading ? 'Upgrading…' : `Upgrade to v${latest}`}
+    <div class=${`version-card${updateAvailable ? ' has-update' : info?.error ? ' has-error' : ''}`}>
+      <div class="version-card-main">
+        <div class="version-card-current">
+          <span class="version-card-label">Installed</span>
+          <span class="version-card-version">v${current || '?'}</span>
+          ${!updateAvailable && !info?.error && latest ? html`
+            <span class="version-card-badge">Latest</span>
+          ` : null}
+        </div>
+        <div class="version-card-meta">
+          ${info?.error
+            ? html`<span class="version-card-error">Couldn't reach npm registry · <code>${info.error}</code></span>`
+            : updateAvailable
+              ? html`Update available · <span class="mono">v${latest}</span>`
+              : latest
+                ? `You're on the latest release. Checks npm registry (cached 30 min).`
+                : 'Checks npm registry (cached 30 min).'}
+        </div>
+      </div>
+      <div class="version-card-actions">
+        ${updateAvailable ? html`
+          <button class="action primary" disabled=${upgrading} onClick=${onUpgrade}>
+            ${upgrading ? 'Upgrading…' : `Upgrade to v${latest}`}
+          </button>
+        ` : null}
+        <button class="action version-card-check" disabled=${checking || upgrading} onClick=${() => refresh(true)}>
+          <${IconRefresh} /> ${checking ? 'Checking…' : 'Check now'}
         </button>
-      ` : null}
-      <button class="action" disabled=${checking || upgrading} onClick=${() => refresh(true)}>
-        ${checking ? 'Checking…' : 'Check for updates'}
-      </button>
-      <span class="hint">${hint}</span>
+      </div>
     </div>
   `;
 }
 
 function RestartButton() {
-  const [busy, setBusy] = useState(false);
   const onClick = async () => {
     const ok = await ccsmConfirm(
       'Restart the ccsm backend? Active sessions will be killed and reattached on next launch.',
       { okLabel: 'Restart', danger: true });
     if (!ok) return;
-    setBusy(true);
+    // Drop the fullscreen RestartOverlay BEFORE firing /api/restart —
+    // the request itself takes ~0ms (response is "ok, restarting") but
+    // the server then begins tearing PTYs down. If we wait for the
+    // response before opening the overlay, the user gets a frozen
+    // button + half-a-second of confusion.
+    const prevPid = serverHealth.value.pid || null;
+    restartInFlight.value = { startedAt: Date.now(), prevPid };
     try {
       const r = await restartBackend();
-      setToast('restarting backend…');
       if (r?.closeFrontend) {
         // Backend respawn will pop a fresh browser window — close this
         // one so the user isn't stuck on the OfflineBanner during the
@@ -534,17 +551,18 @@ function RestartButton() {
         // which is the right behavior for them.
         setTimeout(() => { try { window.close(); } catch {} }, 400);
       }
+      // RestartOverlay self-dismisses once /api/health reports a fresh
+      // pid, so no further work here. If the new backend never comes
+      // back, the overlay has its own 30s safety timeout + OfflineBanner
+      // takes over.
     } catch (e) {
-      setBusy(false);
+      restartInFlight.value = null;
       setToast(e.message, 'error');
     }
   };
   return html`
-    <div style="display:flex; align-items:center; gap:12px; flex-wrap:wrap;">
-      <button class="action" disabled=${busy} onClick=${onClick}>
-        ${busy ? 'Restarting…' : 'Restart backend'}
-      </button>
-      <span class="hint">Stops the server, then spawns a fresh one on the same port.</span>
+    <div class="restart-button-wrap">
+      <button class="action" onClick=${onClick}>Restart backend</button>
     </div>
   `;
 }