@bakapiano/ccsm 0.8.4 → 0.10.0

package/public/js/dialog.js

@@ -18,11 +18,19 @@ function push(entry) {
   });
 }
 
+const CLOSE_X = html`
+  <button class="modal-close" type="button" aria-label="Close" data-action="cancel">
+    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+      <line x1="3" y1="3" x2="13" y2="13"/>
+      <line x1="13" y1="3" x2="3" y2="13"/>
+    </svg>
+  </button>`;
+
 export function ccsmConfirm(message, opts = {}) {
   const { title = 'Confirm', okLabel = 'Confirm', cancelLabel = 'Cancel', danger = false } = opts;
   return push({
     render: () => html`<div class="modal modal-dialog">
-      <header class="modal-head"><h2>${title}</h2></header>
+      <header class="modal-head"><h2>${title}</h2>${CLOSE_X}</header>
       <div class="modal-body"><p class="dialog-msg">${message}</p></div>
       <footer class="modal-foot">
         <button class="action" data-action="cancel">${cancelLabel}</button>
@@ -37,7 +45,7 @@ export function ccsmPrompt(message, defaultValue = '', opts = {}) {
   const { title, okLabel = 'Save', cancelLabel = 'Cancel', placeholder = '' } = opts;
   return push({
     render: () => html`<div class="modal modal-dialog">
-      <header class="modal-head"><h2>${title || message}</h2></header>
+      <header class="modal-head"><h2>${title || message}</h2>${CLOSE_X}</header>
       <div class="modal-body">
         ${title ? html`<p class="dialog-msg">${message}</p>` : null}
         <input type="text" class="input" placeholder=${placeholder} value=${defaultValue} />

package/public/js/icons.js

@@ -29,7 +29,33 @@ export const IconRefresh = ic('0 0 24 24', html`
 `, 16);
 
 export const IconChevronLeft = ic('0 0 24 24', html`<polyline points="15 18 9 12 15 6"/>`, 14);
+export const IconChevronRight = ic('0 0 24 24', html`<polyline points="9 18 15 12 9 6"/>`, 14);
+export const IconChevronUp = ic('0 0 24 24', html`<polyline points="18 15 12 9 6 15"/>`, 14);
 export const IconChevronDown = ic('0 0 24 24', html`<polyline points="6 9 12 15 18 9"/>`, 14);
+export const IconArrowRight = ic('0 0 24 24', html`<line x1="5" y1="12" x2="19" y2="12"/><polyline points="13 6 19 12 13 18"/>`, 14);
+export const IconHome = ic('0 0 24 24', html`
+  <path d="M3 11l9-8 9 8"/>
+  <path d="M5 10v10a1 1 0 0 0 1 1h4v-6h4v6h4a1 1 0 0 0 1-1V10"/>
+`, 14);
+export const IconSparkle = ic('0 0 24 24', html`
+  <path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z"/>
+  <path d="M19 17l.8 1.6L21 20l-1.2.4L19 22l-.8-1.6L17 20l1.2-.4z"/>
+`, 18);
+// "Workspace" — stacked layers / cube. Used for the launch-page
+// destination pill so it doesn't clash with the folder-tag pill that
+// uses IconFolder.
+export const IconWorkspace = ic('0 0 24 24', html`
+  <path d="M12 2l9 5-9 5-9-5z"/>
+  <path d="M3 12l9 5 9-5"/>
+  <path d="M3 17l9 5 9-5"/>
+`, 16);
+// Sidebar-toggle icon (panel-left). A rectangle with a vertical divider
+// near the left — universally recognised "show/hide sidebar" affordance
+// (Notion, Codex, Linear all use this shape).
+export const IconSidebarToggle = ic('0 0 24 24', html`
+  <rect x="3" y="4" width="18" height="16" rx="2"/>
+  <line x1="9" y1="4" x2="9" y2="20"/>
+`, 14);
 
 export const IconSearch = ic('0 0 24 24', html`
   <circle cx="11" cy="11" r="7"/>
@@ -46,6 +72,17 @@ export const IconPlus = ic('0 0 24 24', html`
   <line x1="5" y1="12" x2="19" y2="12"/>
 `, 22);
 
+// Folder + folder-open. Used in the sidebar session tree to mirror the
+// icon-first style of the top nav items. Open variant for expanded
+// folders so the chevron isn't doing double duty.
+export const IconFolder = ic('0 0 24 24', html`
+  <path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z"/>
+`, 16);
+export const IconFolderOpen = ic('0 0 24 24', html`
+  <path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v1H3V7z"/>
+  <path d="M3 10h18l-2 7a2 2 0 0 1-2 1.5H5A2 2 0 0 1 3 17V10z"/>
+`, 16);
+
 export const IconPencil = ic('0 0 24 24', html`
   <path d="M12 20h9"/>
   <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/>
@@ -81,6 +118,31 @@ export const IconTerminal = ic('0 0 24 24', html`
   <line x1="12" y1="19" x2="20" y2="19"/>
 `, 18);
 
+// Git branch — for repo selection
+export const IconBranch = ic('0 0 24 24', html`
+  <line x1="6" y1="3" x2="6" y2="15"/>
+  <circle cx="18" cy="6" r="3"/>
+  <circle cx="6" cy="18" r="3"/>
+  <path d="M18 9a9 9 0 0 1-9 9"/>
+`, 18);
+
+// 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`
+  <img src="./assets/claude-color.svg" alt="" width="18" height="18" style="display:block" />`;
+export const IconCodexColor = () => html`
+  <img src="./assets/codex-color.svg" alt="" width="18" height="18" style="display:block" />`;
+export const IconCopilotColor = () => html`
+  <img src="./assets/copilot-color.svg" alt="" width="18" height="18" style="display:block" />`;
+
+// Pick the right icon for a CLI based on its type field.
+export const IconForCliType = (type) => {
+  if (type === 'claude')  return IconClaudeColor;
+  if (type === 'codex')   return IconCodexColor;
+  if (type === 'copilot') return IconCopilotColor;
+  return IconTerminal;
+};
+
 // Two variants used in the StarButton.
 export const StarOutline = ({ size = 15 } = {}) => html`
   <svg viewBox="0 0 24 24" width=${size} height=${size} fill="none" stroke="currentColor"
@@ -105,9 +167,10 @@ export const BrandMark = () => html`
   <svg viewBox="0 0 32 32" width="32" height="32">
     <rect x="2" y="4" width="28" height="24" rx="3" fill="#1a1815"/>
     <line x1="2" y1="10" x2="30" y2="10" stroke="#faf9f5" stroke-width="0.6" opacity="0.45"/>
-    <circle cx="6"   cy="7" r="1" fill="#faf9f5"/>
-    <circle cx="9.5" cy="7" r="1" fill="#faf9f5" opacity="0.65"/>
-    <circle cx="13"  cy="7" r="1" fill="#faf9f5" opacity="0.4"/>
+    <!-- macOS traffic-light style: red / yellow / green -->
+    <circle cx="6"   cy="7" r="1" fill="#ed6a5e"/>
+    <circle cx="9.5" cy="7" r="1" fill="#f4be4f"/>
+    <circle cx="13"  cy="7" r="1" fill="#62c554"/>
     <text x="16" y="19.5" text-anchor="middle" dominant-baseline="central"
           font-family="'JetBrains Mono', 'Cascadia Mono', 'Consolas', monospace"
           font-weight="700" font-size="10" fill="#faf9f5">ccsm</text>

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,10 +1,13 @@
 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/cssm';
+const REPO_URL = 'https://github.com/bakapiano/ccsm';
 const NPM_URL  = 'https://www.npmjs.com/package/@bakapiano/ccsm';
 
 async function onInstall() {
@@ -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">