@bakapiano/ccsm 0.9.0 → 0.10.1

package/public/js/main.js

@@ -4,13 +4,23 @@
 
 import { render } from 'preact';
 import { html } from './html.js';
-import { loadPersisted, clockTick, lastRefreshAt, installPrompt, isInstalledPwa } from './state.js';
+import { loadPersisted, clockTick, lastRefreshAt, installPrompt, isInstalledPwa, sidebarForcedCollapsed } from './state.js';
 import { httpBase } from './backend.js';
-import { loadConfig, refreshAll, loadSessions, loadRecent, loadSnapshot, loadWorkspaces, loadWebTerminals, pollHealth } from './api.js';
+import { loadConfig, refreshAll, loadSessions, loadFolders, loadWorkspaces, pollHealth } from './api.js';
 import { setToast } from './toast.js';
 import { App } from './components/App.js';
 
 loadPersisted();
+// Pin the document title to "CCSM" — some Chromium builds will inject the
+// current URL or path into the standalone window title bar if the page
+// title is empty / changes; locking it here keeps the OS title bar text
+// stable across navigation, tab switches, and PWA-install refresh.
+const lockTitle = () => { if (document.title !== 'CCSM') document.title = 'CCSM'; };
+lockTitle();
+new MutationObserver(lockTitle).observe(
+  document.querySelector('title') || document.head,
+  { childList: true, subtree: true, characterData: true }
+);
 render(html`<${App} />`, document.getElementById('app'));
 
 // PWA install affordance — Chromium fires `beforeinstallprompt` when the
@@ -43,7 +53,22 @@ function applyIsAppClass() {
 applyIsAppClass();
 matchMedia('(display-mode: browser)').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);
+
 (async () => {
+  // Version-mismatch guard runs FIRST. If the user's backend has been
+  // upgraded since this per-version frontend was loaded, bounce back to
+  // the router immediately — no point loading config from a server that
+  // speaks a different API revision. Runs in dev too (it no-ops without
+  // the build-time <meta>).
+  await bootVersionGuard();
+
   try {
     await loadConfig();
     await refreshAll();
@@ -61,7 +86,7 @@ matchMedia('(display-mode: browser)').addEventListener('change', applyIsAppClass
   // move in/out of a workspace silently and the grid stays stale.
   setInterval(async () => {
     try {
-      await Promise.all([loadSessions(), loadRecent(), loadSnapshot(), loadWorkspaces(), loadWebTerminals()]);
+      await Promise.all([loadSessions(), loadFolders(), loadWorkspaces()]);
       lastRefreshAt.value = Date.now();
     } catch { /* swallow — next tick retries */ }
     pollHealth();
@@ -79,3 +104,29 @@ matchMedia('(display-mode: browser)').addEventListener('change', applyIsAppClass
   setInterval(ping, 10_000);
   document.addEventListener('visibilitychange', () => { if (!document.hidden) ping(); });
 })();
+
+// ─── version routing guard ───────────────────────────────────────────
+// Each deployed frontend is pinned to one backend version. The GH-Pages
+// workflow bakes the version into <meta name="ccsm-frontend-version">
+// so we can detect "backend has been upgraded since this frontend was
+// loaded" and bounce back through the router at /ccsm/ for a fresh
+// match. In dev (no meta tag, same-origin served-by-backend), the check
+// no-ops — we're always running the frontend that ships with this
+// backend by definition.
+async function bootVersionGuard() {
+  const meta = document.querySelector('meta[name="ccsm-frontend-version"]');
+  if (!meta) return;                          // dev mode
+  const myVer = meta.getAttribute('content');
+  if (!myVer) return;
+  let backendVer = null;
+  try {
+    const r = await fetch(httpBase() + '/api/health', { cache: 'no-store' });
+    if (!r.ok) return;
+    backendVer = (await r.json()).version;
+  } catch { return; }                          // offline → OfflineBanner takes over
+  if (!backendVer || backendVer === myVer) return;
+  // Mismatch. Bounce up one level to the router. The router will
+  // probe /api/health again and redirect to ./<backendVer>/.
+  console.warn(`[ccsm] frontend ${myVer} ≠ backend ${backendVer} — re-routing`);
+  location.replace('../');
+}

package/public/js/pages/AboutPage.js

@@ -1,7 +1,10 @@
 import { html } from '../html.js';
+import { useEffect, useState } from 'preact/hooks';
 import { serverHealth, installPrompt, isInstalledPwa } from '../state.js';
 import { setToast } from '../toast.js';
+import { api } from '../api.js';
 import { Card } from '../components/Card.js';
+import { PageTitleBar } from '../components/PageTitleBar.js';
 import { BrandMark, IconGithub, IconExternal } from '../icons.js';
 
 const REPO_URL = 'https://github.com/bakapiano/ccsm';
@@ -40,10 +43,87 @@ function InstallCard() {
     </${Card}>`;
 }
 
+function UpgradeCard() {
+  const [info, setInfo] = useState(null);    // { current, latest, updateAvailable, fetchedAt, error? }
+  const [checking, setChecking] = useState(true);
+  const [upgrading, setUpgrading] = useState(false);
+
+  const refresh = async (force = false) => {
+    setChecking(true);
+    try {
+      const r = await api('GET', '/api/version' + (force ? '?refresh=1' : ''));
+      setInfo(r);
+    } catch (e) {
+      setInfo({ error: e.message });
+    } finally {
+      setChecking(false);
+    }
+  };
+  useEffect(() => { refresh(false); }, []);
+
+  const onUpgrade = async () => {
+    if (!info?.updateAvailable) return;
+    setUpgrading(true);
+    try {
+      await api('POST', '/api/upgrade', { target: 'latest' });
+      setToast(`upgrading to v${info.latest} · backend will restart`);
+    } catch (e) {
+      setUpgrading(false);
+      setToast(e.message, 'error');
+    }
+    // No "finally" reset — the server is about to shut down, and the
+    // OfflineBanner takes over UI. When the router reroutes us to the new
+    // version's frontend, this component re-mounts fresh.
+  };
+
+  const current = info?.current || serverHealth.value.version || '';
+  const latest  = info?.latest;
+  const updateAvailable = !!info?.updateAvailable;
+
+  return html`
+    <${Card} title="Version">
+      <div class="about-version-row">
+        <div>
+          <div class="about-version-line">
+            Installed · <span class="mono">v${current || '?'}</span>
+          </div>
+          ${latest && !updateAvailable ? html`
+            <div class="muted-text" style="margin-top:4px">You're on the latest release.</div>
+          ` : null}
+          ${updateAvailable ? html`
+            <div class="about-update-line">
+              Update available · <span class="mono">v${latest}</span>
+            </div>
+          ` : null}
+          ${info?.error ? html`
+            <div class="muted-text" style="margin-top:4px">Couldn't reach npm registry.</div>
+          ` : null}
+        </div>
+        <div class="about-version-actions">
+          <button class="action subtle" onClick=${() => refresh(true)} disabled=${checking || upgrading}>
+            ${checking ? 'Checking…' : 'Check'}
+          </button>
+          ${updateAvailable ? html`
+            <button class="action primary" onClick=${onUpgrade} disabled=${upgrading}>
+              ${upgrading ? 'Upgrading…' : `Upgrade to v${latest}`}
+            </button>
+          ` : null}
+        </div>
+      </div>
+      ${upgrading ? html`
+        <p class="muted-text" style="margin-top:var(--s-3)">
+          Running <code>npm i -g @bakapiano/ccsm@latest</code>. The backend will restart automatically — you'll see the "Backend not running" screen briefly.
+        </p>
+      ` : null}
+    </${Card}>`;
+}
+
 export function AboutPage() {
   const version = serverHealth.value.version;
 
   return html`
+    <${PageTitleBar} title="About" />
+    <${UpgradeCard} />
     <${InstallCard} />
     <${Card} title="ccsm">
       <div class="about-block">