@bakapiano/ccsm 0.20.0 → 0.20.1

package/lib/tunnel.js

@@ -288,13 +288,39 @@ async function probe(force = false) {
   return probeCache;
 }
 
+// Kick a single background probe refresh, deduped so overlapping callers
+// share one shell-out. Never throws.
+let probeRefreshing = null;
+function kickProbeRefresh() {
+  if (!probeRefreshing) {
+    probeRefreshing = probe(true)
+      .catch(() => probeCache)
+      .finally(() => { probeRefreshing = null; });
+  }
+  return probeRefreshing;
+}
+
 // 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; }
+// (post-install, post-login, etc.) and immediately start repopulating it
+// in the background so the next status poll is already fresh.
+function invalidateProbe() { probeCache = null; probeCacheAt = 0; kickProbeRefresh(); }
+
+// Stale-while-revalidate accessor used by status(). NEVER shells out in
+// the request path: returns whatever's cached right now (possibly stale,
+// or null on the very first call before the boot prewarm lands) and kicks
+// off a background refresh when the cache is stale. This is what keeps
+// /api/tunnel/status — and therefore the whole Remote page's live refresh
+// (plus the device list, which the client used to bundle into the same
+// round-trip) — from stalling ~700ms every time the 30s cache expires.
+function probeCachedSWR() {
+  const fresh = probeCache && Date.now() - probeCacheAt < PROBE_TTL_MS;
+  if (!fresh) kickProbeRefresh();
+  return probeCache;
+}
 
 async function status() {
   return {
-    providers: await probe(),
+    providers: probeCachedSWR(),
     running: !!current,
     provider: current?.provider || null,
     url: current?.url || null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bakapiano/ccsm",
-  "version": "0.20.0",
+  "version": "0.20.1",
   "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/dark.css

@@ -22,6 +22,10 @@
   border-color: #ffffff;
   box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.6);
 }
+/* .fab base is var(--ink) (a light slab in dark mode) with var(--bg-elev)
+   text; its hover hardcoded #000, which would render dark text on black.
+   Send the hover lighter instead, matching .action.primary. */
+[data-theme="dark"] .fab:hover { background: #ffffff; }
 /* Focus rings / hover shadows used a dark ink wash that vanishes on a dark
    ground — switch to a light wash so the affordance stays visible. */
 [data-theme="dark"] .action:hover { box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.5); }

package/public/css/feedback.css

@@ -202,39 +202,50 @@
   text-align: center;
 }
 
-/* RestartOverlay — small top-of-viewport pill (not fullscreen) while
-   a user-initiated backend restart is in flight. Slides down from the
-   top, slides out on dismiss. Pinned center so it survives PWA WCO /
-   standalone window-control overlays without bumping into them. */
+/* RestartOverlay — a transient pill shown while a user-initiated backend
+   restart is in flight. Styled as a toast and pinned to the same
+   bottom-right slot so every floating notification in the app lives in
+   one place and reads the same. (It only ever coexists with a real toast
+   on restart *failure*, by which point the banner has already unmounted,
+   so sharing the slot doesn't collide.) Colors track the theme via
+   var(--ink)/var(--bg) — the old hardcoded #fff text went invisible on
+   the light pill dark mode produces. */
 .restart-banner {
   position: fixed;
-  top: env(titlebar-area-height, 16px);
-  left: 50%;
-  transform: translateX(-50%);
+  bottom: var(--s-5);
+  right: var(--s-5);
   z-index: 1200;
-  display: inline-flex;
+  display: flex;
   align-items: center;
-  gap: 10px;
-  padding: 8px 16px;
-  border-radius: 999px;
+  gap: 12px;
+  max-width: 380px;
+  padding: 11px 16px 11px 14px;
   background: var(--ink);
-  color: #fff;
+  color: var(--bg);
+  border-radius: 6px;
   font-size: 12.5px;
-  font-weight: 500;
+  font-weight: 400;
   letter-spacing: -0.005em;
-  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
-  animation: restart-banner-in .18s ease-out;
+  line-height: 1.45;
+  box-shadow:
+    0 10px 32px -8px rgba(26, 24, 21, 0.30),
+    0 2px 6px rgba(26, 24, 21, 0.12),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
+  animation: toast-pop-in .28s cubic-bezier(.34, 1.4, .64, 1);
 }
-@keyframes restart-banner-in {
-  from { opacity: 0; transform: translate(-50%, -8px); }
-  to   { opacity: 1; transform: translate(-50%, 0); }
+@keyframes toast-pop-in {
+  from { opacity: 0; transform: translateY(10px) scale(0.98); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
 }
 .restart-banner-spinner {
-  width: 12px;
-  height: 12px;
+  width: 13px;
+  height: 13px;
+  flex-shrink: 0;
   border-radius: 50%;
-  border: 2px solid rgba(255, 255, 255, 0.25);
-  border-top-color: #fff;
+  /* currentColor = the pill's text color (var(--bg)), so the spinner
+     stays legible in both themes without a hardcoded white. */
+  border: 2px solid color-mix(in srgb, currentColor 28%, transparent);
+  border-top-color: currentColor;
   animation: restart-spin 0.7s linear infinite;
 }
 .restart-banner-text { white-space: nowrap; }
@@ -312,8 +323,11 @@
   font-weight: 500;
   padding: 3px 6px;
   border-radius: 4px;
-  background: rgba(255, 255, 255, 0.10);
-  color: rgba(255, 255, 255, 0.75);
+  /* currentColor = the pill's text (var(--bg)), so the default chip stays
+     visible whether the pill is dark (light theme) or light (dark theme).
+     The .ok / .error variants below override with their own colored bg. */
+  background: color-mix(in srgb, currentColor 14%, transparent);
+  color: currentColor;
   flex-shrink: 0;
   line-height: 1;
 }

package/public/css/forms.css

@@ -63,7 +63,11 @@
 .action.danger {
   background: var(--red);
   border-color: var(--red);
-  color: var(--bg-elev);
+  /* Always light text — the danger red is dark in both themes, so it must
+     NOT follow --bg-elev (which is a dark surface in dark mode and would
+     render black text on red). In light mode --bg-elev was #fff anyway,
+     so this is identical there. */
+  color: #fff;
 }
 .action.danger:hover {
   background: #9a3636;
@@ -121,11 +125,15 @@ textarea {
   font-family: var(--body);
   font-size: 12.5px;
   font-weight: 500;
-  padding: 5px 14px;
+  padding: 5px 13px;
   border-radius: 6px;
   cursor: pointer;
   transition: background .14s ease, color .14s ease;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
 }
+.seg-btn svg { width: 14px; height: 14px; opacity: 0.85; }
 .seg-btn:hover { color: var(--ink); }
 .seg-btn.is-active {
   background: var(--bg-elev);

package/public/css/widgets.css

@@ -1334,12 +1334,14 @@
 .adopt-tab.is-active {
   background: var(--ink);
   border-color: var(--ink);
-  color: #fff;
+  /* var(--bg-elev), not #fff — the slab is var(--ink), which is LIGHT in
+     dark mode, so white text would be invisible. --bg-elev tracks it. */
+  color: var(--bg-elev);
   font-weight: 500;
 }
 .adopt-tab.is-active .adopt-tab-count {
-  background: rgba(255, 255, 255, 0.22);
-  color: #fff;
+  background: color-mix(in srgb, var(--bg-elev) 22%, transparent);
+  color: var(--bg-elev);
 }
 .adopt-tab-icon { display: inline-flex; width: 16px; height: 16px; }
 .adopt-tab-icon svg { width: 100%; height: 100%; }
@@ -2582,7 +2584,9 @@
   padding: 1px 7px;
   border-radius: 999px;
   background: var(--ink);
-  color: #fff;
+  /* var(--bg-elev) tracks the --ink slab (light in dark mode) so the code
+     stays legible; #fff would be white-on-light. */
+  color: var(--bg-elev);
   font-variant-numeric: tabular-nums;
 }
 .remote-device-name { min-width: 0; }

package/public/js/icons.js

@@ -113,6 +113,15 @@ export const IconMonitor = ic('0 0 24 24', html`
   <line x1="12" y1="16" x2="12" y2="20"/>
 `, 13);
 
+// Light / dark theme glyphs for the Appearance toggle.
+export const IconSun = ic('0 0 24 24', html`
+  <circle cx="12" cy="12" r="4"/>
+  <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/>
+`, 14);
+export const IconMoon = ic('0 0 24 24', html`
+  <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
+`, 14);
+
 // "> _" terminal prompt — for the Terminals nav tab
 export const IconTerminal = ic('0 0 24 24', html`
   <polyline points="4 17 10 11 4 5"/>

package/public/js/pages/ConfigurePage.js

@@ -24,7 +24,7 @@ import { Card } from '../components/Card.js';
 import { PageTitleBar } from '../components/PageTitleBar.js';
 import { EntityFormModal } from '../components/EntityFormModal.js';
 import { useDragSort } from '../components/useDragSort.js';
-import { IconPlus, IconPencil, IconClose, IconTerminal, IconFolder, IconBranch, IconRefresh, IconChevronUp, IconChevronDown, IconForCliType, IconClaudeColor, IconCodexColor, IconCopilotColor } from '../icons.js';
+import { IconPlus, IconPencil, IconClose, IconTerminal, IconFolder, IconBranch, IconRefresh, IconChevronUp, IconChevronDown, IconForCliType, IconClaudeColor, IconCodexColor, IconCopilotColor, IconSun, IconMoon, IconMonitor } from '../icons.js';
 import { parseArgs, formatArgs } from '../util.js';
 
 // Tokenize the three free-form args fields into string[] before they hit
@@ -584,9 +584,9 @@ function RestartButton() {
 function ThemeToggle() {
   const mode = themeMode.value;
   const opts = [
-    { id: 'light', label: 'Light' },
-    { id: 'dark', label: 'Dark' },
-    { id: 'system', label: 'System' },
+    { id: 'light', label: 'Light', icon: IconSun },
+    { id: 'dark', label: 'Dark', icon: IconMoon },
+    { id: 'system', label: 'System', icon: IconMonitor },
   ];
   return html`
     <div class="seg" role="group" aria-label="Appearance">
@@ -594,7 +594,9 @@ function ThemeToggle() {
         <button key=${o.id} type="button"
                 class=${`seg-btn${mode === o.id ? ' is-active' : ''}`}
                 aria-pressed=${mode === o.id}
-                onClick=${() => setThemeMode(o.id)}>${o.label}</button>`)}
+                onClick=${() => setThemeMode(o.id)}>
+          <${o.icon} /><span>${o.label}</span>
+        </button>`)}
     </div>`;
 }
 

package/public/js/pages/RemotePage.js

@@ -311,14 +311,16 @@ export function RemotePage() {
   const [deviceList, setDeviceList] = useState([]);
   const pollRef = useRef(null);
 
-  async function refresh() {
+  // Tunnel status and the device list are fetched INDEPENDENTLY, not as a
+  // bundled Promise.all. /api/tunnel/status can lag behind a cold provider
+  // probe; the device list is cheap. Coupling them made the (fast) device
+  // list wait on the (slow) status round-trip, so the whole page appeared
+  // to refresh in one delayed lump. Now each updates its own state the
+  // moment its own fetch lands.
+  async function refreshStatus() {
     try {
-      const [s, devs] = await Promise.all([
-        api('GET', '/api/tunnel/status'),
-        api('GET', '/api/devices').catch(() => ({ devices: [] })),
-      ]);
+      const s = await api('GET', '/api/tunnel/status');
       setStatus(s);
-      setDeviceList(devs.devices || []);
       setTokenLocal((cur) => cur || s.token || '');
       setProvider((cur) => {
         if (s.running && s.provider) return s.provider;
@@ -336,6 +338,13 @@ export function RemotePage() {
       } catch {}
     } catch (e) { setToast(`status load failed · ${e.message}`, 'error'); }
   }
+  async function refreshDevices() {
+    try {
+      const devs = await api('GET', '/api/devices');
+      setDeviceList(devs.devices || []);
+    } catch { /* non-critical — keep the last good list on a transient error */ }
+  }
+  function refresh() { refreshStatus(); refreshDevices(); }
 
   useEffect(() => {
     refresh();
@@ -344,11 +353,11 @@ export function RemotePage() {
   }, []);
 
   async function onApproveDevice(id) {
-    try { await api('POST', `/api/devices/${encodeURIComponent(id)}/approve`); refresh(); setToast('Device approved', 'ok'); }
+    try { await api('POST', `/api/devices/${encodeURIComponent(id)}/approve`); refreshDevices(); setToast('Device approved', 'ok'); }
     catch (e) { setToast(`approve failed · ${e.message}`, 'error'); }
   }
   async function onRejectDevice(id) {
-    try { await api('POST', `/api/devices/${encodeURIComponent(id)}/reject`); refresh(); setToast('Device rejected', 'ok'); }
+    try { await api('POST', `/api/devices/${encodeURIComponent(id)}/reject`); refreshDevices(); setToast('Device rejected', 'ok'); }
     catch (e) { setToast(`reject failed · ${e.message}`, 'error'); }
   }
   async function onDeleteDevice(d) {
@@ -357,7 +366,7 @@ export function RemotePage() {
       { title: 'Delete device record', okLabel: 'Delete', danger: true },
     );
     if (!ok) return;
-    try { await api('DELETE', `/api/devices/${encodeURIComponent(d.id)}`); refresh(); setToast('Device deleted', 'ok'); }
+    try { await api('DELETE', `/api/devices/${encodeURIComponent(d.id)}`); refreshDevices(); setToast('Device deleted', 'ok'); }
     catch (e) { setToast(`delete failed · ${e.message}`, 'error'); }
   }
   async function onRevokeDevice(d) {
@@ -365,13 +374,13 @@ export function RemotePage() {
       title: 'Revoke device', okLabel: 'Revoke', danger: true,
     });
     if (!ok) return;
-    try { await api('POST', `/api/devices/${encodeURIComponent(d.id)}/revoke`); refresh(); setToast('Access revoked', 'ok'); }
+    try { await api('POST', `/api/devices/${encodeURIComponent(d.id)}/revoke`); refreshDevices(); setToast('Access revoked', 'ok'); }
     catch (e) { setToast(`revoke failed · ${e.message}`, 'error'); }
   }
   async function onRenameDevice(d) {
     const next = await ccsmPrompt('Rename device', d.label || '', { okLabel: 'Save' });
     if (next === null) return;
-    try { await api('PUT', `/api/devices/${encodeURIComponent(d.id)}`, { label: next.trim() }); refresh(); }
+    try { await api('PUT', `/api/devices/${encodeURIComponent(d.id)}`, { label: next.trim() }); refreshDevices(); }
     catch (e) { setToast(`rename failed · ${e.message}`, 'error'); }
   }