@bakapiano/ccsm 0.14.0 → 0.15.1

package/public/js/main.js

@@ -1,132 +1,132 @@
-// Entry. Loads persisted ui state → boots data → mounts App → spins up
-// the 5s auto-refresh + 1s clock tick. No imperative DOM access outside
-// the mount root.
-
-import { render } from 'preact';
-import { html } from './html.js';
-import { loadPersisted, clockTick, lastRefreshAt, installPrompt, isInstalledPwa, sidebarForcedCollapsed } from './state.js';
-import { httpBase } from './backend.js';
-import { loadConfig, refreshAll, loadSessions, loadFolders, loadWorkspaces, pollHealth } from './api.js';
-import { setToast } from './toast.js';
-import { App } from './components/App.js';
-
-loadPersisted();
-// Window/tab title pinned to "CCSM". A MutationObserver guards against
-// Chromium standalone builds that occasionally try to inject the URL
-// into the title bar.
-const expected = 'CCSM';
-function lockTitle() { if (document.title !== expected) document.title = expected; }
-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
-// manifest meets install criteria (served over localhost / https, has icon,
-// not already installed). We stash the event so the About page can offer
-// a one-click install button that triggers it.
-window.addEventListener('beforeinstallprompt', (ev) => {
-  ev.preventDefault();
-  installPrompt.value = ev;
-});
-window.addEventListener('appinstalled', () => {
-  installPrompt.value = null;
-  isInstalledPwa.value = true;
-});
-// On boot, detect if we're already running as an installed PWA window
-// (display-mode standalone covers both plain PWA + WCO). When true, the
-// "install" affordance hides itself.
-const mq = matchMedia('(display-mode: standalone), (display-mode: window-controls-overlay)');
-isInstalledPwa.value = mq.matches;
-mq.addEventListener('change', () => { isInstalledPwa.value = mq.matches; });
-
-// "is-app" body class · everything that isn't a regular browser tab
-// (display-mode: browser) gets it. Used by wco.css to gate user-select
-// on drag regions so chromeless --app= windows can be dragged by
-// clicking the page title, while normal tabs still allow text select.
-function applyIsAppClass() {
-  const isApp = !matchMedia('(display-mode: browser)').matches;
-  document.body.classList.toggle('is-app', isApp);
-}
-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();
-    pollHealth();
-  } catch (e) {
-    setToast('initial load failed · ' + e.message, 'error');
-  }
-
-  // 5s data refresh + clock tick (same cadence so fmtAgo "Ns ago" relative
-  // labels naturally track the data refresh; bumping clockTick more
-  // frequently would just cause needless re-renders since fmtAgo's
-  // resolution is coarse — 5s buckets under a minute, then m/h/d).
-  // loadWorkspaces is included because the workspace "in use" flag is
-  // derived from live session cwds server-side — without it, sessions
-  // move in/out of a workspace silently and the grid stays stale.
-  setInterval(async () => {
-    try {
-      await Promise.all([loadSessions(), loadFolders(), loadWorkspaces()]);
-      lastRefreshAt.value = Date.now();
-    } catch { /* swallow — next tick retries */ }
-    pollHealth();
-    clockTick.value = Date.now();
-  }, 5000);
-
-  // Heartbeat · the server uses this to (a) decide whether to shut down
-  // when its own spawned browser closes (multi-client check), and (b) as
-  // a 90s watchdog backup if the browser-exit signal is missed entirely.
-  // 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(() => {});
-  ping();
-  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('../');
-}
+// Entry. Loads persisted ui state → boots data → mounts App → spins up
+// the 5s auto-refresh + 1s clock tick. No imperative DOM access outside
+// the mount root.
+
+import { render } from 'preact';
+import { html } from './html.js';
+import { loadPersisted, clockTick, lastRefreshAt, installPrompt, isInstalledPwa, sidebarForcedCollapsed } from './state.js';
+import { httpBase } from './backend.js';
+import { loadConfig, refreshAll, loadSessions, loadFolders, loadWorkspaces, pollHealth } from './api.js';
+import { setToast } from './toast.js';
+import { App } from './components/App.js';
+
+loadPersisted();
+// Window/tab title pinned to "CCSM". A MutationObserver guards against
+// Chromium standalone builds that occasionally try to inject the URL
+// into the title bar.
+const expected = 'CCSM';
+function lockTitle() { if (document.title !== expected) document.title = expected; }
+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
+// manifest meets install criteria (served over localhost / https, has icon,
+// not already installed). We stash the event so the About page can offer
+// a one-click install button that triggers it.
+window.addEventListener('beforeinstallprompt', (ev) => {
+  ev.preventDefault();
+  installPrompt.value = ev;
+});
+window.addEventListener('appinstalled', () => {
+  installPrompt.value = null;
+  isInstalledPwa.value = true;
+});
+// On boot, detect if we're already running as an installed PWA window
+// (display-mode standalone covers both plain PWA + WCO). When true, the
+// "install" affordance hides itself.
+const mq = matchMedia('(display-mode: standalone), (display-mode: window-controls-overlay)');
+isInstalledPwa.value = mq.matches;
+mq.addEventListener('change', () => { isInstalledPwa.value = mq.matches; });
+
+// "is-app" body class · everything that isn't a regular browser tab
+// (display-mode: browser) gets it. Used by wco.css to gate user-select
+// on drag regions so chromeless --app= windows can be dragged by
+// clicking the page title, while normal tabs still allow text select.
+function applyIsAppClass() {
+  const isApp = !matchMedia('(display-mode: browser)').matches;
+  document.body.classList.toggle('is-app', isApp);
+}
+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();
+    pollHealth();
+  } catch (e) {
+    setToast('initial load failed · ' + e.message, 'error');
+  }
+
+  // 5s data refresh + clock tick (same cadence so fmtAgo "Ns ago" relative
+  // labels naturally track the data refresh; bumping clockTick more
+  // frequently would just cause needless re-renders since fmtAgo's
+  // resolution is coarse — 5s buckets under a minute, then m/h/d).
+  // loadWorkspaces is included because the workspace "in use" flag is
+  // derived from live session cwds server-side — without it, sessions
+  // move in/out of a workspace silently and the grid stays stale.
+  setInterval(async () => {
+    try {
+      await Promise.all([loadSessions(), loadFolders(), loadWorkspaces()]);
+      lastRefreshAt.value = Date.now();
+    } catch { /* swallow — next tick retries */ }
+    pollHealth();
+    clockTick.value = Date.now();
+  }, 5000);
+
+  // Heartbeat · the server uses this to (a) decide whether to shut down
+  // when its own spawned browser closes (multi-client check), and (b) as
+  // a 90s watchdog backup if the browser-exit signal is missed entirely.
+  // 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(() => {});
+  ping();
+  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,165 +1,173 @@
-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';
-const NPM_URL  = 'https://www.npmjs.com/package/@bakapiano/ccsm';
-
-async function onInstall() {
-  const ev = installPrompt.value;
-  if (!ev) return setToast('install prompt not available right now · try opening this URL in a regular Edge tab', 'error');
-  ev.prompt();
-  const { outcome } = await ev.userChoice;
-  installPrompt.value = null;
-  if (outcome === 'accepted') {
-    setToast('installed · close + relaunch via npx ccsm to enable Window Controls Overlay');
-  }
-}
-
-function InstallCard() {
-  if (isInstalledPwa.value) return null;
-  const canPrompt = !!installPrompt.value;
-  return html`
-    <${Card} title="Install as app">
-      <p class="about-copy" style="margin-bottom: var(--s-3);">
-        ccsm runs best as a Chromium PWA — title bar collapses into the page (Window Controls Overlay),
-        and the launch shortcut becomes a standalone app. One-click install on supported browsers below.
-      </p>
-      <div class="about-links">
-        <button class="action ${canPrompt ? 'primary' : 'subtle'}" onClick=${onInstall} disabled=${!canPrompt}>
-          ${canPrompt ? 'Install ccsm' : 'Install not available'}
-        </button>
-      </div>
-      ${!canPrompt ? html`
-        <p class="muted-text" style="margin-top: var(--s-3);">
-          If the button stays disabled: open <code>http://localhost:7777</code> in a regular Edge tab,
-          click the address-bar install icon (⊕), then re-launch via <code>npx ccsm</code>.
-        </p>` : null}
-    </${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">
-        <div class="about-hero">
-          <span class="about-mark"><${BrandMark} /></span>
-          <div>
-            <div class="about-name">ccsm <span class="about-version">${version ? `v${version}` : ''}</span></div>
-            <div class="about-tagline">Claude Code Session Manager · a single pane over every live <code>claude</code> session on this box.</div>
-          </div>
-        </div>
-
-        <p class="about-copy">
-          Lists live and recently-closed sessions, snapshots them every minute, restores them through Windows Terminal,
-          and launches fresh sessions inside isolated workspaces. Designed for running 8–10 concurrent sessions across
-          ad-hoc repo clones.
-        </p>
-
-        <div class="about-links">
-          <a class="action" href=${REPO_URL} target="_blank" rel="noopener">
-            <${IconGithub} /> GitHub <${IconExternal} />
-          </a>
-          <a class="action subtle" href=${NPM_URL} target="_blank" rel="noopener">
-            npm <${IconExternal} />
-          </a>
-        </div>
-
-        <dl class="about-meta">
-          <dt>Install</dt>
-          <dd><code>npx @bakapiano/ccsm</code></dd>
-          <dt>Data directory</dt>
-          <dd><code>~/.ccsm/</code> (override with <code>CCSM_HOME</code>)</dd>
-          <dt>Platform</dt>
-          <dd>Windows · Node 18+</dd>
-          <dt>License</dt>
-          <dd>MIT</dd>
-        </dl>
-      </div>
-    </${Card}>`;
-}
+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';
+const NPM_URL  = 'https://www.npmjs.com/package/@bakapiano/ccsm';
+
+async function onInstall() {
+  const ev = installPrompt.value;
+  if (!ev) return setToast('install prompt not available right now · try opening this URL in a regular Edge tab', 'error');
+  ev.prompt();
+  const { outcome } = await ev.userChoice;
+  installPrompt.value = null;
+  if (outcome === 'accepted') {
+    setToast('installed · close + relaunch via npx ccsm to enable Window Controls Overlay');
+  }
+}
+
+function InstallCard() {
+  if (isInstalledPwa.value) return null;
+  const canPrompt = !!installPrompt.value;
+  return html`
+    <${Card} title="Install as app">
+      <p class="about-copy" style="margin-bottom: var(--s-3);">
+        ccsm runs best as a Chromium PWA — title bar collapses into the page (Window Controls Overlay),
+        and the launch shortcut becomes a standalone app. One-click install on supported browsers below.
+      </p>
+      <div class="about-links">
+        <button class="action ${canPrompt ? 'primary' : 'subtle'}" onClick=${onInstall} disabled=${!canPrompt}>
+          ${canPrompt ? 'Install ccsm' : 'Install not available'}
+        </button>
+      </div>
+      ${!canPrompt ? html`
+        <p class="muted-text" style="margin-top: var(--s-3);">
+          If the button stays disabled: open <code>http://localhost:7777</code> in a regular Edge tab,
+          click the address-bar install icon (⊕), then re-launch via <code>npx ccsm</code>.
+        </p>` : null}
+    </${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 {
+      const r = await api('POST', '/api/upgrade', { target: 'latest' });
+      setToast(`upgrading to v${info.latest} · backend will restart`);
+      if (r?.closeFrontend) {
+        // Backend will respawn with a fresh browser window — close this
+        // one so the user isn't stuck on the OfflineBanner during the
+        // upgrade window. window.close() only works when the window was
+        // script-opened (Edge --app=, our spawned browser); regular tabs
+        // ignore it silently, which is fine (OfflineBanner takes over).
+        setTimeout(() => { try { window.close(); } catch {} }, 400);
+      }
+    } 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">
+        <div class="about-hero">
+          <span class="about-mark"><${BrandMark} /></span>
+          <div>
+            <div class="about-name">ccsm <span class="about-version">${version ? `v${version}` : ''}</span></div>
+            <div class="about-tagline">Claude Code Session Manager · a single pane over every live <code>claude</code> session on this box.</div>
+          </div>
+        </div>
+
+        <p class="about-copy">
+          Lists live and recently-closed sessions, snapshots them every minute, restores them through Windows Terminal,
+          and launches fresh sessions inside isolated workspaces. Designed for running 8–10 concurrent sessions across
+          ad-hoc repo clones.
+        </p>
+
+        <div class="about-links">
+          <a class="action" href=${REPO_URL} target="_blank" rel="noopener">
+            <${IconGithub} /> GitHub <${IconExternal} />
+          </a>
+          <a class="action subtle" href=${NPM_URL} target="_blank" rel="noopener">
+            npm <${IconExternal} />
+          </a>
+        </div>
+
+        <dl class="about-meta">
+          <dt>Install</dt>
+          <dd><code>npx @bakapiano/ccsm</code></dd>
+          <dt>Data directory</dt>
+          <dd><code>~/.ccsm/</code> (override with <code>CCSM_HOME</code>)</dd>
+          <dt>Platform</dt>
+          <dd>Windows · Node 18+</dd>
+          <dt>License</dt>
+          <dd>MIT</dd>
+        </dl>
+      </div>
+    </${Card}>`;
+}