@bakapiano/ccsm 0.17.10 → 0.18.0

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

package/public/js/components/PendingApprovalOverlay.js

@@ -0,0 +1,86 @@
+// Full-screen blocker shown on the remote browser while waiting for
+// the host to approve this device. Triggered by api.js setting the
+// pendingDevice signal in response to a 403 {pending:true}.
+//
+// While visible, polls /api/devices/me every 3s. When the server
+// flips status to 'approved', the next polled api() call clears
+// pendingDevice (api.js does that on any 2xx response), the overlay
+// unmounts, and the rest of the app keeps loading.
+//
+// Reuses .offline-overlay / .offline-card classes so styling matches
+// the existing HealthOverlay's blocking modal aesthetic.
+
+import { html } from '../html.js';
+import { useEffect } from 'preact/hooks';
+import { api, pendingDevice, loadConfig, refreshAll } from '../api.js';
+import { BrandMark } from '../icons.js';
+
+const POLL_MS = 3000;
+
+export function PendingApprovalOverlay() {
+  const p = pendingDevice.value;
+
+  useEffect(() => {
+    if (!p) return;
+    let stopped = false;
+    const tick = async () => {
+      if (stopped) return;
+      try {
+        // /api/devices/me is gate-exempt: returns 200 with the current
+        // device record regardless of approval state. We inspect the
+        // body ourselves to decide whether to dismiss the overlay.
+        const d = await api('GET', '/api/devices/me');
+        if (d && d.status === 'approved') {
+          pendingDevice.value = null;
+          // First load failed because we weren't approved yet — main.js'
+          // boot tried /api/config and got 401, no auto-retry. Now that
+          // we're through the gate, kick a one-shot load so config +
+          // sessions/folders/workspaces hydrate without waiting for the
+          // 5s tick (and config without that ever happening, since the
+          // periodic loop doesn't include loadConfig).
+          loadConfig().catch(() => {});
+          refreshAll().catch(() => {});
+        } else if (d) {
+          pendingDevice.value = {
+            pending: d.status === 'pending',
+            rejected: d.status === 'rejected',
+            deviceId: d.id,
+            firstSeen: d.firstSeen,
+            at: Date.now(),
+          };
+        }
+      } catch { /* network blip — try again next tick */ }
+    };
+    const id = setInterval(tick, POLL_MS);
+    tick();
+    return () => { stopped = true; clearInterval(id); };
+  }, [!!p]);
+
+  if (!p) return null;
+
+  const rejected = !!p.rejected;
+  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`
+          <h1 class="offline-title">Access declined</h1>
+          <p class="offline-copy">
+            The host machine rejected this device. If you think this was a
+            mistake, ask the operator to re-approve from the Remote page.
+          </p>
+        ` : html`
+          <h1 class="offline-title">Waiting for host approval</h1>
+          <p class="offline-copy">
+            The host machine got your request${firstSeen ? ` at ${firstSeen}` : ''}.
+            Approve this device from the Remote page over there to continue.
+          </p>
+          <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>
+        `}
+      </div>
+    </div>`;
+}

package/public/js/components/Sidebar.js

@@ -1,18 +1,19 @@
 import { html } from '../html.js';
 import { signal } from '@preact/signals';
 import {
-  activeTab, sidebarCollapsed, sidebarForcedCollapsed, configDirty, capabilities,
+  activeTab, sidebarCollapsed, sidebarForcedCollapsed, isMobile, configDirty, capabilities,
   sessions, folders, sessionsByFolder, foldersCollapsed, activeSessionId,
   selectTab, selectSession, toggleSidebar, toggleFolder, setSidebarWidth,
 } from '../state.js';
 import { createFolder, renameFolder, deleteFolder, reorderFolders, setSessionFolder, reorderSessions, deleteSession, resumeSession, setSessionTitle } from '../api.js';
+import { isRemoteAccess } from '../backend.js';
 import { ccsmPrompt, ccsmConfirm } from '../dialog.js';
 import { setToast } from '../toast.js';
 import { fmtAgo } from '../util.js';
 import { clockTick } from '../state.js';
 import { useDragSort } from './useDragSort.js';
 import {
-  IconLaunch, IconConfigure,
+  IconLaunch, IconConfigure, IconRemote,
   IconSidebarToggle, IconPencil, IconClose, IconFolder, IconFolderOpen, IconPlus, BrandMark,
 } from '../icons.js';
 
@@ -309,8 +310,13 @@ function SessionTree() {
 }
 
 export function Sidebar() {
-  const collapsed = sidebarCollapsed.value || sidebarForcedCollapsed.value;
-  const forced = sidebarForcedCollapsed.value;
+  // On phones the sidebar is rendered inside a full-screen drawer
+  // (App applies .is-mobile + .drawer-open classes). It should always
+  // appear in EXPANDED form there — full labels + sessions tree.
+  // Desktop/tablet keeps the original collapse behaviour.
+  const mobile = isMobile.value;
+  const collapsed = !mobile && (sidebarCollapsed.value || sidebarForcedCollapsed.value);
+  const forced = !mobile && sidebarForcedCollapsed.value;
 
   const onResizeStart = (ev) => {
     if (collapsed) return;
@@ -346,6 +352,9 @@ 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}
       </nav>
 
       ${!collapsed ? html`<${SessionTree} />` : null}

package/public/js/components/TerminalView.js

@@ -9,7 +9,7 @@ import { FitAddon } from '@xterm/addon-fit';
 import { WebLinksAddon } from '@xterm/addon-web-links';
 import { ClipboardAddon } from '@xterm/addon-clipboard';
 import { WebglAddon } from '@xterm/addon-webgl';
-import { wsBase } from '../backend.js';
+import { wsBase, getToken, getDeviceId } from '../backend.js';
 
 // Dark xterm theme. We give the terminal a near-black ink background to
 // match what claude code's TUI assumes (it paints its own input box +
@@ -40,9 +40,15 @@ export function TerminalView({ terminalId }) {
   useEffect(() => {
     if (!terminalId || !hostRef.current) return;
 
+    // Mobile viewports (≤ 640px) get a smaller default font so claude's
+    // UI fits ~50 cols instead of the ~26 that 13px would buy at 390px.
+    // 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 term = new Terminal({
       fontFamily: '"Cascadia Mono", "Geist Mono", "JetBrains Mono", Consolas, monospace',
-      fontSize: 13,
+      fontSize: baseFontSize,
       lineHeight: 1.2,
       cursorBlink: true,
       cursorStyle: 'bar',
@@ -108,7 +114,17 @@ export function TerminalView({ terminalId }) {
     requestAnimationFrame(() => { try { fit.fit(); } catch {} });
     termRef.current = term;
 
-    const ws = new WebSocket(`${wsBase()}/ws/terminal/${encodeURIComponent(terminalId)}`);
+    // Browser WS API can't set Authorization headers — token + device
+    // ride as query string when we have them (Remote-mode access).
+    // Server's upgrade handler reads both when Host is non-loopback.
+    const tok = getToken();
+    const dev = getDeviceId();
+    const params = new URLSearchParams();
+    if (tok) params.set('token', tok);
+    if (dev) params.set('device', dev);
+    const qs = params.toString();
+    const wsUrl = `${wsBase()}/ws/terminal/${encodeURIComponent(terminalId)}${qs ? `?${qs}` : ''}`;
+    const ws = new WebSocket(wsUrl);
     ws.binaryType = 'arraybuffer';
     wsRef.current = ws;
 

package/public/js/icons.js

@@ -125,6 +125,35 @@ export const IconBranch = ic('0 0 24 24', html`
   <circle cx="6" cy="18" r="3"/>
   <path d="M18 9a9 9 0 0 1-9 9"/>
 `, 18);
+export const IconMoreVert = ic('0 0 24 24', html`
+  <circle cx="12" cy="5" r="1.6" fill="currentColor" stroke="none"/>
+  <circle cx="12" cy="12" r="1.6" fill="currentColor" stroke="none"/>
+  <circle cx="12" cy="19" r="1.6" fill="currentColor" stroke="none"/>
+`, 16);
+
+// Broadcast / remote — radiating arcs over a centre dot. Used on the
+// 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"/>
+`, 18);
+
+// Copy — two stacked rectangles. For "copy to clipboard" affordance
+// next to URLs / tokens in the Remote page.
+export const IconCopy = ic('0 0 24 24', html`
+  <rect x="9" y="9" width="11" height="11" rx="2"/>
+  <path d="M5 15V6a2 2 0 0 1 2-2h9"/>
+`, 13);
+
+// Recycle / regenerate — for "regenerate token" button.
+export const IconRecycle = ic('0 0 24 24', html`
+  <polyline points="23 4 23 10 17 10"/>
+  <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/>
+`, 14);
 
 // Brand-colored CLI marks. These use external SVG assets (full color),
 // rendered as <img> so the gradients / fills in the file are preserved.

package/public/js/main.js

@@ -5,13 +5,34 @@
 import { render } from 'preact';
 import { effect } from '@preact/signals';
 import { html } from './html.js';
-import { loadPersisted, clockTick, lastRefreshAt, installPrompt, isInstalledPwa, sidebarForcedCollapsed, activeTab, activeSessionId, sessions, TAB_HEADINGS } from './state.js';
-import { httpBase } from './backend.js';
-import { loadConfig, refreshAll, loadSessions, loadFolders, loadWorkspaces, pollHealth } from './api.js';
+import { loadPersisted, clockTick, lastRefreshAt, installPrompt, isInstalledPwa, sidebarForcedCollapsed, isMobile, mobileDrawerOpen, activeTab, activeSessionId, sessions, TAB_HEADINGS } from './state.js';
+import { httpBase, setToken, getDeviceId, isRemoteAccess } from './backend.js';
+import { api, loadConfig, refreshAll, loadSessions, loadFolders, loadWorkspaces, pollHealth, pendingDevice } from './api.js';
 import { setToast } from './toast.js';
 import { App } from './components/App.js';
 import { installGlobalKeybindings } from './keybindings.js';
 
+// First thing we do on boot: if the URL carries `?token=…` it's a fresh
+// share link from the Remote page on the host machine. Stash it in
+// localStorage so api.js / TerminalView pick it up, then strip the query
+// string from the URL via history.replaceState — keeps the secret out
+// of the address bar / browser history / clipboard sharing later.
+// Also ensure a device id exists in localStorage right away — getDeviceId
+// is a side-effecting getter (creates + persists on first call). Calling
+// it here means api.js sees a stable id from the very first fetch.
+(() => {
+  try {
+    const u = new URL(location.href);
+    const t = u.searchParams.get('token');
+    if (t) {
+      setToken(t);
+      u.searchParams.delete('token');
+      history.replaceState(null, '', u.pathname + (u.search ? `?${u.searchParams.toString()}` : '') + u.hash);
+    }
+    getDeviceId();
+  } catch {}
+})();
+
 loadPersisted();
 installGlobalKeybindings();
 // Window/tab title — reactive. In standalone PWA mode we hide our own
@@ -84,16 +105,26 @@ matchMedia('(display-mode: browser)').addEventListener('change', applyIsAppClass
 matchMedia('(display-mode: window-controls-overlay)').addEventListener('change', applyIsAppClass);
 matchMedia('(display-mode: standalone)').addEventListener('change', applyIsAppClass);
 
-// Force-collapse the sidebar on narrow viewports. Mirrors the responsive
-// CSS so JS state (toggle visibility, tree-render gating) agrees with the
-// rendered layout.
-const narrowMq = matchMedia('(max-width: 900px)');
-function applyNarrow() { sidebarForcedCollapsed.value = narrowMq.matches; }
-applyNarrow();
-narrowMq.addEventListener('change', applyNarrow);
+// The old 640–900px "force-collapse" mode is gone — narrow desktops
+// keep the full sidebar, phone viewports get the FAB drawer below.
+// `sidebarForcedCollapsed` is left at its default `false` so any
+// remaining readers (Sidebar resize handle gate, etc.) behave like
+// desktop. Removing the signal entirely would mean touching every
+// consumer; leaving it inert is a smaller blast radius.
 
-// Counter-zoom for chrome bars (page-title-bar, session-actions). Browser
-// page zoom (Ctrl+wheel) scales every CSS px including our header heights;
+// Phone-sized viewports get a different nav model: sidebar hidden,
+// floating bottom-left button opens a full-screen drawer.
+const mobileMq = matchMedia('(max-width: 640px)');
+function applyMobile() {
+  isMobile.value = mobileMq.matches;
+  // Always close the drawer on a breakpoint flip so the user doesn't
+  // resize from desktop into mobile with a phantom open drawer.
+  if (mobileDrawerOpen.value) mobileDrawerOpen.value = false;
+}
+applyMobile();
+mobileMq.addEventListener('change', applyMobile);
+
+// Counter-zoom for the page-title-bar. Browser page zoom (Ctrl+wheel) scales every CSS px including our header heights;
 // without this, the header gets visually taller at 150%+ which the user
 // usually doesn't want. We detect zoom via outerWidth/innerWidth and write
 // 1/zoom into --anti-zoom so the CSS can `calc(40px * var(--anti-zoom))`
@@ -106,6 +137,25 @@ function syncAntiZoom() {
 syncAntiZoom();
 window.addEventListener('resize', syncAntiZoom);
 
+// WCO title-bar height — read the actual OS strip height via
+// navigator.windowControlsOverlay.getTitlebarAreaRect() and publish it
+// as --titlebar-h. CSS env(titlebar-area-height) is the analogous value
+// but Chromium occasionally lies (under-reports by a couple px on Edge),
+// and we don't get a JS handle to drive other measurements from. The
+// JS API is the source of truth here; the rect's height is exactly the
+// strip the OS leaves us. Fires on geometrychange so window-move-across-
+// monitors / DPI-flip / restore-from-maximize re-sync.
+function syncTitlebarHeight() {
+  try {
+    const r = navigator.windowControlsOverlay?.getTitlebarAreaRect?.();
+    if (r && r.height > 0) {
+      document.documentElement.style.setProperty('--titlebar-h', `${r.height}px`);
+    }
+  } catch { /* unsupported · CSS falls back to env() then 32px */ }
+}
+syncTitlebarHeight();
+navigator.windowControlsOverlay?.addEventListener?.('geometrychange', syncTitlebarHeight);
+
 (async () => {
   // Version-mismatch guard runs FIRST. If the user's backend has been
   // upgraded since this per-version frontend was loaded, bounce back to
@@ -114,6 +164,28 @@ window.addEventListener('resize', syncAntiZoom);
   // the build-time <meta>).
   await bootVersionGuard();
 
+  // On a remote browser we MUST register at /api/devices/me before any
+  // other /api/* call — the device gate 401s with "unknown device"
+  // otherwise. The /me handler accepts the token from the share URL,
+  // creates a pending record, and (post-approval) keeps returning the
+  // existing record without a token. Setting pendingDevice from the
+  // response wakes PendingApprovalOverlay; on approval the signal
+  // clears in there.
+  if (isRemoteAccess()) {
+    try {
+      const me = await api('GET', '/api/devices/me');
+      if (me && me.status !== 'approved') {
+        pendingDevice.value = {
+          pending: me.status === 'pending',
+          rejected: me.status === 'rejected',
+          deviceId: me.id,
+          firstSeen: me.firstSeen,
+          at: Date.now(),
+        };
+      }
+    } catch (e) { /* token bad / network blip — surfaces via other calls */ }
+  }
+
   try {
     await loadConfig();
     await refreshAll();
@@ -144,7 +216,17 @@ window.addEventListener('resize', syncAntiZoom);
   // 10s cadence is short enough that any tab open for one full cycle gets
   // caught by the post-close decision in server.js; long enough not to be
   // chatty.
-  const ping = () => fetch(httpBase() + '/api/heartbeat', { method: 'POST', keepalive: true }).catch(() => {});
+  const ping = () => {
+    const headers = {};
+    // Heartbeat doesn't go through api.js' wrapper but still needs the
+    // bearer token + device id when called via tunnel (the middleware
+    // blocks it otherwise and the server thinks the session went idle).
+    const t = (typeof localStorage !== 'undefined') ? localStorage.getItem('ccsm.token') : null;
+    if (t) headers['Authorization'] = `Bearer ${t}`;
+    const d = getDeviceId();
+    if (d) headers['X-Device-Id'] = d;
+    return fetch(httpBase() + '/api/heartbeat', { method: 'POST', headers, keepalive: true }).catch(() => {});
+  };
   ping();
   setInterval(ping, 10_000);
   document.addEventListener('visibilitychange', () => { if (!document.hidden) ping(); });