@bakapiano/ccsm 0.17.11 → 0.18.0

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

@@ -131,6 +131,30 @@ export const IconMoreVert = ic('0 0 24 24', html`
   <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.
 export const IconClaudeColor = () => html`

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,13 +105,24 @@ 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.
+
+// 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
@@ -105,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
@@ -113,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();
@@ -143,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(); });