npm - @bakapiano/ccsm - Versions diffs - 0.18.5 → 0.19.0 - Mend

@bakapiano/ccsm 0.18.5 → 0.19.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (22) hide show

package/lib/devices.js +19 -5
package/lib/tunnel.js +151 -0
package/package.json +1 -1
package/public/css/feedback.css +72 -0
package/public/css/responsive.css +18 -8
package/public/css/sidebar.css +11 -5
package/public/css/widgets.css +714 -1
package/public/index.html +8 -1
package/public/js/api.js +23 -7
package/public/js/backend.js +26 -0
package/public/js/components/App.js +2 -0
package/public/js/components/OfflineBanner.js +9 -35
package/public/js/components/PendingApprovalOverlay.js +44 -2
package/public/js/components/RestartOverlay.js +36 -0
package/public/js/components/Sidebar.js +1 -1
package/public/js/components/TerminalView.js +18 -7
package/public/js/icons.js +11 -6
package/public/js/main.js +17 -0
package/public/js/pages/ConfigurePage.js +43 -25
package/public/js/pages/RemotePage.js +318 -152
package/public/js/state.js +6 -0
package/server.js +24 -2

package/public/index.html CHANGED Viewed

@@ -2,7 +2,14 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <!-- maximum-scale=1 stops iOS Safari from auto-zooming the page
+         when the user taps a sub-16px input. xterm's helper textarea
+         inherits the terminal's own font size (11px on phones); if we
+         instead bumped it to 16px via CSS, xterm would measure the
+         cell off the inflated textarea and render every glyph ~50%
+         oversized. Locking page zoom here lets us leave the textarea
+         alone. -->
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
     <!-- Bleeds the cream surface into the Edge/Chrome --app= title bar
          so it visually disappears against the body. The browser does
          honor this in standalone app windows. -->

package/public/js/api.js CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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/components/TerminalView.js CHANGED Viewed

@@ -52,7 +52,8 @@ export function TerminalView({ terminalId, cliType }) {
     // Desktop stays at 13. We re-evaluate on every mount, so a viewport
     // rotation that crosses the breakpoint picks up the new size on
     // next mount (rare; users typically don't rotate mid-session).
-    const baseFontSize = window.matchMedia('(max-width: 640px)').matches ? 11 : 13;
+    const isMobile = window.matchMedia('(max-width: 640px)').matches;
+    const baseFontSize = isMobile ? 11 : 13;
     const term = new Terminal({
       fontFamily: '"Cascadia Mono", "Geist Mono", "JetBrains Mono", Consolas, monospace',
       fontSize: baseFontSize,
@@ -92,12 +93,22 @@ export function TerminalView({ terminalId, cliType }) {
     // syntax-highlighted code). WebGL paints onto a canvas, much smoother
     // at thousands-of-cells per frame. Falls back to DOM if WebGL is
     // unavailable (e.g. older GPU, hardware accel disabled).
-    try {
-      const webgl = new WebglAddon();
-      webgl.onContextLoss(() => { try { webgl.dispose(); } catch {} });
-      term.loadAddon(webgl);
-    } catch (e) {
-      console.warn('[ccsm] WebGL addon failed, using DOM renderer:', e);
+    //
+    // Skipped on phones: @xterm/addon-webgl@0.18.0 miscalculates the glyph
+    // atlas at the fractional DPRs that modern Android handsets report
+    // (Pixel 6/7/8 = 2.625, S24 = 2.625, etc.) — every cell ends up
+    // rendered ~3× wider than the layout grid says it should, blowing out
+    // the terminal. Integer DPRs (1, 2, 3 — desktops, iPhones) and the
+    // common Windows 1.5 are fine, so the gate is on the mobile viewport
+    // breakpoint, not the raw DPR.
+    if (!isMobile) {
+      try {
+        const webgl = new WebglAddon();
+        webgl.onContextLoss(() => { try { webgl.dispose(); } catch {} });
+        term.loadAddon(webgl);
+      } catch (e) {
+        console.warn('[ccsm] WebGL addon failed, using DOM renderer:', e);
+      }
     }
     // Ctrl+C with a selection: by default xterm.js sends \x03 AND the
     // browser's own copy event fires — so the user gets "selection

package/public/js/icons.js CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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>
   `;
 }