@bakapiano/ccsm 0.17.11 → 0.18.0

package/public/css/wco.css

@@ -124,7 +124,8 @@ body.is-app:not(.is-wco) .session-pane {
    title-bar border. Give a little breathing room. Sessions has its
    own full-bleed terminal pane; About has its own hero header. */
 body.is-app:not(.is-wco) [data-panel="configure"],
-body.is-app:not(.is-wco) [data-panel="launch"] {
+body.is-app:not(.is-wco) [data-panel="launch"],
+body.is-app:not(.is-wco) [data-panel="remote"] {
   padding-top: var(--s-4);
 }
 /* Sidebar nav rows (New Session / Settings) also need a top gap in
@@ -149,22 +150,22 @@ body.is-wco .page-title-bar {
 }
 body.is-wco .page-title-bar,
 body.is-wco .sidebar-top {
-  /* env(titlebar-area-height) is Chromium's reported safe-area height, but
-     in practice Edge on Windows often paints the OS controls overlay a few
-     px taller than that value — so sizing our top band to exactly env()
-     leaves a sliver of the strip BELOW (session-tabs) still under the
-     overlay and the kebab gets clipped. Take the max with 40px so we
-     always reserve at least the default page-title-bar height regardless
-     of what env() reports. Matches non-WCO modes too. */
-  height: calc(max(40px, env(titlebar-area-height, 40px)) * var(--anti-zoom, 1));
-  min-height: calc(max(40px, env(titlebar-area-height, 40px)) * var(--anti-zoom, 1));
-  max-height: calc(max(40px, env(titlebar-area-height, 40px)) * var(--anti-zoom, 1));
+  /* --titlebar-h is set from JS reading
+     navigator.windowControlsOverlay.getTitlebarAreaRect().height — the
+     OS-reported strip the overlay reserves for us. CSS env() and a 32px
+     baseline are layered fallbacks when the JS API is unavailable. No
+     min-floor on the JS path: the OS knows its own caption height best,
+     and over-padding (the previous max(40px, …)) made the chrome look
+     visibly chunkier than the rest of the window. */
+  height: calc(var(--titlebar-h, env(titlebar-area-height, 32px)) * var(--anti-zoom, 1));
+  min-height: calc(var(--titlebar-h, env(titlebar-area-height, 32px)) * var(--anti-zoom, 1));
+  max-height: calc(var(--titlebar-h, env(titlebar-area-height, 32px)) * var(--anti-zoom, 1));
 }
 body.is-wco .sidebar-brand,
 body.is-wco .sidebar-brand-button,
 body.is-wco .collapse-toggle {
-  height: max(40px, env(titlebar-area-height, 40px));
-  min-height: max(40px, env(titlebar-area-height, 40px));
+  height: var(--titlebar-h, env(titlebar-area-height, 32px));
+  min-height: var(--titlebar-h, env(titlebar-area-height, 32px));
 }
 /* terminals.css uses the .tab-panel's gap (s-4) plus a -s-4 margin-top on
    .session-tabs to close that gap, so the tab strip visually flushes

package/public/css/widgets.css

@@ -749,8 +749,15 @@
   display: flex;
   flex-direction: column;
   gap: var(--s-4);
-  padding: 4px var(--s-2) var(--s-4) 4px;
-  margin: -4px calc(-1 * var(--s-2)) 0 -4px;
+  /* Negative right margin = -var(--s-4) cancels .main's padding-right
+     so the scroll container — and therefore the scrollbar — reach the
+     full window edge. Padding-right = var(--s-4) preserves the same
+     visual gap between content and the right edge that was there
+     before. Top padding bumped to var(--s-3) so the first section title
+     has visible breathing room from the page-title-bar separator above
+     it (4px was almost flush). Negative margin-top stays in sync. */
+  padding: var(--s-4) var(--s-4) var(--s-4) 4px;
+  margin: -4px calc(-1 * var(--s-4)) 0 -4px;
 }
 /* In a flex column container, items default to flex-shrink:1 which
    causes the cards to compress instead of pushing the scroll container
@@ -1626,3 +1633,270 @@
   background: var(--bg);
   border: 1px solid var(--border);
 }
+
+/* ── Remote page ──────────────────────────────────────────────────
+   Uses the existing .settings-scroll + Section + .config-grid + .field
+   + .chip system from ConfigurePage. Only adds the bits that don't
+   already exist: the inline status line per provider, the token-row
+   input + action cluster, the URL row, the CLI log block, and the
+   bulleted security list. */
+
+.remote-status-line {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--s-2);
+  font-size: 12.5px;
+  color: var(--ink-mid);
+}
+.remote-status-line .small-mono { font-size: 11px; }
+.remote-status-line .warn  { color: #b86a2a; font-weight: 500; }
+.remote-status-line .muted { color: var(--ink-muted); }
+.remote-status-line code {
+  font-family: var(--mono);
+  font-size: 11.5px;
+  background: var(--bg);
+  padding: 1px 5px;
+  border-radius: 3px;
+}
+
+.remote-token-row {
+  display: flex;
+  gap: var(--s-2);
+  align-items: center;
+  flex-wrap: wrap;
+}
+.remote-token-input {
+  flex: 1;
+  min-width: 240px;
+  font-family: var(--mono);
+  font-size: 12.5px;
+  padding: 7px 11px;
+  border: 1px solid var(--border-strong);
+  border-radius: var(--r-sm);
+  background: var(--bg-elev);
+  color: var(--ink);
+}
+.remote-token-input:focus {
+  outline: none;
+  border-color: var(--ink);
+  box-shadow: 0 0 0 1px var(--ink);
+}
+
+.remote-url-line {
+  display: flex;
+  gap: var(--s-2);
+  align-items: center;
+  flex-wrap: wrap;
+}
+.remote-url-value {
+  flex: 1;
+  min-width: 0;
+  font-family: var(--mono);
+  font-size: 12px;
+  color: var(--ink);
+  background: var(--bg);
+  padding: 6px 10px;
+  border-radius: 4px;
+  border: 1px solid var(--border);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.remote-log {
+  font-size: 11.5px;
+  color: var(--ink-mid);
+}
+.remote-log summary { cursor: pointer; user-select: none; }
+.remote-log pre {
+  margin-top: var(--s-2);
+  padding: var(--s-3);
+  background: var(--ink);
+  color: var(--bg-elev);
+  border-radius: var(--r-sm);
+  font-family: var(--mono);
+  font-size: 11px;
+  line-height: 1.5;
+  max-height: 220px;
+  overflow: auto;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.remote-empty {
+  margin: 0;
+  font-size: 12.5px;
+  color: var(--ink-muted);
+  padding: var(--s-3);
+  background: var(--bg);
+  border-radius: var(--r-sm);
+  text-align: center;
+}
+.remote-devices {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-4);
+}
+.remote-devices-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.remote-devices-group-head {
+  display: flex;
+  align-items: baseline;
+  gap: var(--s-2);
+  margin-bottom: 2px;
+}
+.remote-devices-group-title {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--ink-mid);
+}
+.remote-devices-group-count {
+  font-family: var(--mono);
+  font-size: 11px;
+  color: var(--ink-muted);
+  background: var(--bg);
+  padding: 1px 7px;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+}
+.remote-devices-group-hint {
+  font-size: 11px;
+  font-style: italic;
+  color: var(--ink-muted);
+}
+.remote-device {
+  display: flex;
+  align-items: center;
+  gap: var(--s-3);
+  padding: 10px 12px;
+  background: var(--bg-elev);
+  border: 1px solid var(--border);
+  border-radius: var(--r-sm);
+}
+.remote-device.is-pending {
+  border-color: #b86a2a;
+  background: rgba(184, 106, 42, 0.04);
+}
+.remote-device.is-rejected {
+  background: var(--bg);
+  opacity: 0.8;
+}
+.remote-device-main {
+  flex: 1;
+  min-width: 0;
+}
+.remote-device-label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--ink);
+}
+.remote-device-label .icon-btn {
+  background: transparent;
+  border: 0;
+  padding: 2px;
+  cursor: pointer;
+  color: var(--ink-muted);
+  border-radius: 3px;
+  display: inline-flex;
+  align-items: center;
+}
+.remote-device-label .icon-btn:hover { color: var(--ink); background: var(--bg); }
+.remote-device-meta {
+  font-size: 11.5px;
+  color: var(--ink-mid);
+  margin-top: 2px;
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+.remote-device-meta .mono { font-family: var(--mono); font-size: 11px; }
+.remote-device-ua {
+  font-family: var(--mono);
+  font-size: 11px;
+  color: var(--ink-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 380px;
+  white-space: nowrap;
+}
+.remote-device-actions {
+  display: flex;
+  gap: 6px;
+  flex-shrink: 0;
+}
+.remote-device-actions .action.small { padding: 4px 10px; font-size: 11.5px; }
+
+/* Remote · "How access works" — three fact rows separated by hairlines,
+   inset on the left by a 2px ink bar so the section reads as quiet
+   reference material instead of an alert. */
+.remote-facts {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+}
+.remote-fact {
+  position: relative;
+  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-5);
+  border-bottom: 1px solid var(--border);
+}
+.remote-fact:first-child { padding-top: var(--s-2); }
+.remote-fact:last-child  { border-bottom: 0; padding-bottom: var(--s-2); }
+.remote-fact::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: var(--s-3);
+  bottom: var(--s-3);
+  width: 2px;
+  background: var(--ink);
+  border-radius: 1px;
+  opacity: 0.35;
+}
+.remote-fact dt {
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--ink);
+  letter-spacing: -0.005em;
+  margin-bottom: 4px;
+}
+.remote-fact dd {
+  margin: 0;
+  font-size: 12px;
+  color: var(--ink-mid);
+  line-height: 1.6;
+}
+.remote-fact dd code {
+  font-family: var(--mono);
+  font-size: 11px;
+  background: var(--bg);
+  padding: 1px 5px;
+  border-radius: 3px;
+}
+.remote-fact dd strong {
+  color: var(--ink);
+  font-weight: 600;
+}
+.remote-fact dd em {
+  font-style: italic;
+  color: var(--ink);
+}
+.remote-fact-pill {
+  display: inline-block;
+  font-size: 11px;
+  padding: 1px 7px;
+  border-radius: 999px;
+  background: rgba(184, 106, 42, 0.14);
+  color: #8b4f1f;
+  font-weight: 500;
+}

package/public/js/api.js

@@ -1,17 +1,58 @@
 // Fetch wrapper + every loader. Loaders push into signals from ./state.js.
 // Cross-origin (hosted frontend → local backend) flows through httpBase().
 
+import { signal } from '@preact/signals';
 import * as S from './state.js';
-import { httpBase } from './backend.js';
+import { httpBase, getToken, getDeviceId, isRemoteAccess } from './backend.js';
+
+// Global pending-approval signal. Flipped to true whenever any /api
+// call returns 403 {pending:true}; PendingApprovalOverlay watches this
+// and shows the blocking screen. We also stash the server's record so
+// the overlay can display "we recorded you at HH:MM" detail.
+export const pendingDevice = signal(null);
 
 export async function api(method, url, body) {
   const opts = { method, headers: { 'Content-Type': 'application/json' } };
+  // When a remote token is configured (Remote page set it OR the page
+  // was loaded with ?token= and we stashed it in localStorage), attach
+  // it to every API call. The server middleware lets loopback Hosts
+  // through without the token; for tunnel-served pages this is the
+  // only way past the 401.
+  const tok = getToken();
+  if (tok) opts.headers['Authorization'] = `Bearer ${tok}`;
+  // Always send our device id when one exists in localStorage. The host
+  // browser at localhost doesn't strictly need it (loopback bypass),
+  // but harmless — the server simply records lastSeen for it. Required
+  // for any tunnel-served page to clear the device-approval gate.
+  const dev = getDeviceId();
+  if (dev) opts.headers['X-Device-Id'] = dev;
   if (body !== undefined) opts.body = JSON.stringify(body);
   const r = await fetch(httpBase() + url, opts);
   const text = await r.text();
   let json;
   try { json = text ? JSON.parse(text) : {}; } catch { json = { raw: text }; }
-  if (!r.ok) throw new Error(json.error || `HTTP ${r.status}`);
+  if (!r.ok) {
+    // Surface device-approval pending state. Only matters on remote
+    // tabs — host's loopback browser never gets a 401/403 from these
+    // checks.
+    if (isRemoteAccess()) {
+      if (r.status === 403 && json && (json.pending || json.rejected)) {
+        pendingDevice.value = { ...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() };
+      }
+    }
+    throw new Error(json.error || `HTTP ${r.status}`);
+  }
+  // PendingApprovalOverlay clears pendingDevice itself based on the
+  // /api/devices/me body (which can return 200 with status:'pending'
+  // since that endpoint is gate-exempt). Doing an auto-clear here on
+  // any 2xx would race the overlay's poll and dismiss it prematurely.
   return json;
 }
 

package/public/js/backend.js

@@ -1,28 +1,84 @@
-// One source of truth for "where is the ccsm backend reachable".
+// One source of truth for "where is the ccsm backend reachable"
+// and "what auth token (if any) do we attach to every request".
 //
-//   localhost / 127.0.0.1   →  same-origin (page IS the backend)
-//   everything else         →  http://localhost:7777 (hosted frontend
-//                              talks to the user's local backend via CORS)
+//   localhost / 127.0.0.1            same-origin (page IS the backend)
+//   bakapiano.github.io              http://localhost:7777 (the hosted
+//                                      frontend talks to the user's local
+//                                      backend via CORS)
+//   anything else (tunnel domain)    same-origin (the local backend is
+//                                      serving this frontend over the
+//                                      tunnel; API calls go to the same
+//                                      tunnel URL automatically)
 //
 // httpBase is used by fetch(); wsBase is used by WebSocket constructions.
 // Keep both as functions rather than constants so the values reflect
 // `location.*` at call time (matters for tests / route changes).
 
+const HOSTED_HOST = 'bakapiano.github.io';
+
 function isLocal() {
   return location.hostname === 'localhost' || location.hostname === '127.0.0.1';
 }
+function isHosted() {
+  return location.hostname === HOSTED_HOST;
+}
 
 export function httpBase() {
-  return isLocal() ? '' : 'http://localhost:7777';
+  if (isHosted()) return 'http://localhost:7777';
+  // Local OR tunnel-served — both same-origin.
+  return '';
 }
 
 export function wsBase() {
-  if (isLocal()) {
-    return `${location.protocol === 'https:' ? 'wss:' : 'ws:'}//${location.host}`;
-  }
-  return 'ws://localhost:7777';
+  if (isHosted()) return 'ws://localhost:7777';
+  return `${location.protocol === 'https:' ? 'wss:' : 'ws:'}//${location.host}`;
 }
 
 export function isHostedFrontend() {
-  return !isLocal();
+  return isHosted();
+}
+// True when the page is being served via a remote tunnel — neither the
+// host machine itself (localhost) nor the GH-Pages router. Used to gate
+// off "wake backend" affordances that only work locally.
+export function isRemoteAccess() {
+  return !isLocal() && !isHosted();
+}
+
+// ── Remote-access bearer token ────────────────────────────────────
+// Persisted in localStorage so it survives reloads on whatever device
+// loaded the share URL. main.js captures a fresh token from `?token=`
+// on first arrival and stashes it via setToken(), then strips the
+// query string from the URL so the secret doesn't sit in the address
+// bar / browser history.
+const LS_KEY = 'ccsm.token';
+
+export function getToken() {
+  try { return localStorage.getItem(LS_KEY) || null; } catch { return null; }
+}
+export function setToken(t) {
+  try {
+    if (t) localStorage.setItem(LS_KEY, t);
+    else localStorage.removeItem(LS_KEY);
+  } catch {}
+}
+
+// ── Device id ─────────────────────────────────────────────────────
+// Per-browser-profile UUID that identifies this device to the host
+// machine for the approval flow. Generated once, persisted in
+// localStorage, sent on every API call as X-Device-Id. The host pairs
+// the id with the User-Agent the server records on first sight, so
+// the approval UI can show "iPhone · Safari" instead of a raw uuid.
+const LS_DEVICE = 'ccsm.deviceId';
+
+export function getDeviceId() {
+  try {
+    let id = localStorage.getItem(LS_DEVICE);
+    if (!id) {
+      id = (crypto.randomUUID && crypto.randomUUID()) || (Math.random().toString(36).slice(2) + Date.now().toString(36));
+      localStorage.setItem(LS_DEVICE, id);
+    }
+    return id;
+  } catch {
+    return null;
+  }
 }

package/public/js/components/App.js

@@ -1,12 +1,19 @@
 import { html } from '../html.js';
-import { activeTab } from '../state.js';
+import { activeTab, selectTab } from '../state.js';
+import { useEffect } from 'preact/hooks';
+import { isRemoteAccess } from '../backend.js';
+import { PageTitleBar } from './PageTitleBar.js';
 import { Sidebar } from './Sidebar.js';
 import { Toast } from './Toast.js';
 import { DialogHost } from './DialogHost.js';
 import { HealthOverlay } from './HealthOverlay.js';
+import { PendingApprovalOverlay } from './PendingApprovalOverlay.js';
+import { MobileNavFab } from './MobileNavFab.js';
+import { isMobile, mobileDrawerOpen } from '../state.js';
 import { SessionsPage } from '../pages/SessionsPage.js';
 import { LaunchPage } from '../pages/LaunchPage.js';
 import { ConfigurePage } from '../pages/ConfigurePage.js';
+import { RemotePage } from '../pages/RemotePage.js';
 import { AboutPage } from '../pages/AboutPage.js';
 
 function Panel({ name, children }) {
@@ -14,22 +21,51 @@ function Panel({ name, children }) {
   return html`<section class="tab-panel" data-panel=${name} data-active=${active || null}>${children}</section>`;
 }
 
+// Static placeholder for #remote on tunnel-served pages. Remote / device
+// / tunnel management is loopback-only — the server returns 403 on
+// every relevant endpoint — so even if a user navigates here via URL
+// hash we render a clear "host machine only" message instead of a
+// broken RemotePage spamming the console.
+function RemoteHostOnlyPanel() {
+  useEffect(() => {
+    // Bounce back to whatever tab they were on before, after a brief
+    // moment so the message is readable.
+    const t = setTimeout(() => selectTab('sessions'), 2500);
+    return () => clearTimeout(t);
+  }, []);
+  return html`
+    <${PageTitleBar} title="Remote" />
+    <div class="settings-scroll">
+      <p class="remote-empty" style="margin-top:var(--s-6)">
+        Remote management is only available on the host machine.
+        Bouncing back to Sessions…
+      </p>
+    </div>`;
+}
+
 export function App() {
   const tab = activeTab.value;
+  const remoteLocked = tab === 'remote' && isRemoteAccess();
+  const mobile = isMobile.value;
+  const drawer = mobileDrawerOpen.value;
 
   return html`
-    <div class="app">
+    <div class=${`app${mobile ? ' is-mobile' : ''}${mobile && drawer ? ' drawer-open' : ''}`}>
       <${Sidebar} />
       <main class="main">
         <div class="content">
           ${tab === 'sessions'  ? html`<${Panel} name="sessions"><${SessionsPage}   /></${Panel}>` : null}
           ${tab === 'launch'    ? html`<${Panel} name="launch"><${LaunchPage}     /></${Panel}>` : null}
           ${tab === 'configure' ? html`<${Panel} name="configure"><${ConfigurePage} /></${Panel}>` : null}
+          ${tab === 'remote' && !remoteLocked ? html`<${Panel} name="remote"><${RemotePage} /></${Panel}>` : null}
+          ${remoteLocked        ? html`<${Panel} name="remote"><${RemoteHostOnlyPanel} /></${Panel}>` : null}
           ${tab === 'about'     ? html`<${Panel} name="about"><${AboutPage}     /></${Panel}>` : null}
         </div>
       </main>
       <${Toast} />
       <${DialogHost} />
       <${HealthOverlay} />
+      <${PendingApprovalOverlay} />
+      <${MobileNavFab} />
     </div>`;
 }

package/public/js/components/HealthOverlay.js

@@ -21,6 +21,7 @@ import { useEffect } from 'preact/hooks';
 import { serverHealth, hasBootedOnline } from '../state.js';
 import { pollHealth, refreshAll } from '../api.js';
 import { BrandMark } from '../icons.js';
+import { isRemoteAccess } from '../backend.js';
 
 const THRESHOLD = 3;     // failures before we switch from "checking" to "not running"
 const FAST_POLL_MS = 1500;
@@ -66,6 +67,17 @@ export function HealthOverlay() {
           <p class="offline-copy">
             ${count === 0 ? 'Probing localhost:7777.' : `${count} attempt${count > 1 ? 's' : ''}. Hang tight.`}
           </p>
+        ` : isRemoteAccess() ? html`
+          <h1 class="offline-title">Host machine offline</h1>
+          <p class="offline-copy">
+            The ccsm backend you connected to over the tunnel isn't reachable.
+            Only the operator at the host machine can restart it — the tunnel
+            URL is dead until ccsm is running there again.
+          </p>
+          <p class="offline-copy" style="margin-top:8px;font-size:12px;color:var(--ink-muted)">
+            We'll keep polling and reconnect automatically as soon as the
+            backend comes back.
+          </p>
         ` : html`
           <h1 class="offline-title">Backend not running</h1>
           <p class="offline-copy">

package/public/js/components/MobileNavFab.js

@@ -0,0 +1,29 @@
+// Phone-only navigation affordance.
+//
+// On viewports ≤ 640px the sidebar is hidden via CSS (.is-mobile body
+// class). Instead, a circular floating button sits bottom-left; tapping
+// it sets mobileDrawerOpen, which the sidebar reads to flip into a
+// full-screen overlay. A backdrop captures taps outside the sidebar
+// and dismisses.
+//
+// Visible only when isMobile signal is true — saves a render branch
+// elsewhere.
+
+import { html } from '../html.js';
+import { isMobile, mobileDrawerOpen } from '../state.js';
+import { IconSidebarToggle, IconClose } from '../icons.js';
+
+export function MobileNavFab() {
+  if (!isMobile.value) return null;
+  const open = mobileDrawerOpen.value;
+  return html`
+    ${open ? html`
+      <div class="mobile-nav-backdrop"
+           onClick=${() => { mobileDrawerOpen.value = false; }} />
+    ` : null}
+    <button class=${`mobile-nav-fab${open ? ' is-open' : ''}`}
+            aria-label=${open ? 'close navigation' : 'open navigation'}
+            onClick=${() => { mobileDrawerOpen.value = !open; }}>
+      ${open ? html`<${IconClose} />` : html`<${IconSidebarToggle} />`}
+    </button>`;
+}