@floless/app 0.11.0 → 0.12.0

package/dist/web/panels.js

@@ -0,0 +1,660 @@
+/* ============================================================================
+ * panels.js — Custom Panels: renders ~/.floless/ui/extensions.json (the
+ * declarative descriptor the terminal AI composes) into the Dashboard view and
+ * extra Inspect tabs. See docs/superpowers/specs/2026-06-10-declarative-ui-
+ * extensions-design.md.
+ *
+ * Pure renderer, by contract: blocks come from the shipped catalog, data payloads
+ * arrive pre-resolved from GET /api/extensions, and EVERY interpolated string is
+ * escaped — no AI/user-authored HTML ever reaches the DOM (text renders as text).
+ * Loaded AFTER app.js + aware.js: reuses their globals (state, renderInspect,
+ * escapeHtml, escapeAttr, showToast) and the minimal window.flolessBridge seams
+ * (api, showHtmlReport, …) instead of duplicating run/report plumbing.
+ * ========================================================================== */
+(() => {
+  const bridge = window.flolessBridge || {};
+  // aware.js always loads first and provides api; this fallback only guards a
+  // pathological load order so the file can't throw at parse time.
+  const api = bridge.api || (async (path, opts) => {
+    const res = await fetch(path, { headers: { 'content-type': 'application/json' }, ...opts });
+    const body = await res.json().catch(() => ({ ok: false, error: `HTTP ${res.status}` }));
+    if (!res.ok || body.ok === false) {
+      const err = new Error(body.error || `HTTP ${res.status}`);
+      err.body = body;
+      throw err;
+    }
+    return body;
+  });
+
+  const $canvasMain = document.getElementById('canvas-main');
+  const $dashboard = document.getElementById('dashboard');
+  const $viewToggle = document.getElementById('view-toggle');
+  const $dashDot = document.getElementById('dash-dot');
+  const $extBadge = document.getElementById('ext-badge');
+  const $extMenu = document.getElementById('ext-menu');
+  const $extHistory = document.getElementById('ext-history');
+  const $centerName = document.getElementById('center-panel-name');
+  const $centerRole = document.getElementById('center-panel-role');
+  const $resetModal = document.getElementById('ext-reset-modal');
+  if (!$dashboard || !$viewToggle) return; // markup absent — nothing to wire
+
+  const LS_VIEW = 'floless:view';
+  let view = 'canvas';
+  try { if (localStorage.getItem(LS_VIEW) === 'dashboard') view = 'dashboard'; } catch { /* private mode */ }
+
+  let booted = false; // flips in boot() — called by aware.js once licensed + AWARE-ready
+  let ext = { descriptor: null, validation: null, data: {} };
+  let pendingCustomize = 0; // queued ui-customize requests (the composer's "waiting" line)
+  // run-app gate cache: appId -> { state, runnable, runState, missing }. Cleared on
+  // every refetch so a Compile elsewhere re-arms the buttons.
+  const appGate = new Map();
+  const RUN_APP_RE = /^run-app:([A-Za-z0-9._-]+)$/;
+
+  // ── descriptor accessors (defensive — the store is loose by design) ─────────
+  function allPanels() {
+    const d = ext.descriptor;
+    if (!d || !Array.isArray(d.panels)) return [];
+    return d.panels.filter((p) => p && typeof p === 'object' && !Array.isArray(p));
+  }
+  // v1 honors two slots. Anything else lands on the Dashboard rather than
+  // vanishing — a panel the user asked for must never silently disappear.
+  const inspectPanels = () => allPanels().filter((p) => p.slot === 'inspect-tab');
+  const dashboardPanels = () => allPanels().filter((p) => p.slot !== 'inspect-tab');
+  const descriptorInvalid = () => !!(ext.validation && ext.validation.valid === false);
+
+  // ── view toggle (Canvas | Dashboard) ─────────────────────────────────────────
+  function applyView() {
+    const dash = view === 'dashboard';
+    if ($canvasMain) $canvasMain.classList.toggle('view-dashboard', dash);
+    $dashboard.hidden = !dash;
+    $viewToggle.querySelectorAll('.view-btn').forEach((b) => {
+      const on = b.dataset.view === view;
+      b.classList.toggle('active', on);
+      b.setAttribute('aria-pressed', on ? 'true' : 'false');
+    });
+    if ($centerName) $centerName.textContent = dash ? 'Dashboard' : 'Canvas';
+    if ($centerRole) $centerRole.textContent = dash ? 'your panels · composed by your terminal AI' : 'transparency layer · read-mostly';
+    if (dash && $dashDot) $dashDot.hidden = true; // seen — clear the "updated" dot
+  }
+  function setView(v) {
+    view = v === 'dashboard' ? 'dashboard' : 'canvas';
+    try { localStorage.setItem(LS_VIEW, view); } catch { /* private mode */ }
+    applyView();
+    if (view === 'dashboard') renderDashboard();
+  }
+  $viewToggle.querySelectorAll('.view-btn').forEach((b) => { b.onclick = () => setView(b.dataset.view); });
+
+  // ── block renderers (all output escaped; placeholders over errors) ──────────
+  const payloadFor = (source) => (typeof source === 'string' ? ext.data[source] : undefined);
+  function rowsFrom(payload) {
+    if (Array.isArray(payload)) return payload;
+    if (payload && typeof payload === 'object' && Array.isArray(payload.rows)) return payload.rows;
+    return null;
+  }
+  const fmtVal = (v) =>
+    typeof v === 'number' || typeof v === 'string' ? String(v) : v == null ? '—' : JSON.stringify(v);
+
+  function placeholderHtml(msg) {
+    return `<div class="ext-placeholder">${escapeHtml(msg)}</div>`;
+  }
+
+  function statHtml(b) {
+    return `<div class="ext-stat">` +
+      `<div class="ext-stat-label">${escapeHtml(String(b.label ?? ''))}</div>` +
+      `<div class="ext-stat-value">${escapeHtml(fmtVal(b.value))}</div>` +
+      (b.hint != null ? `<div class="ext-stat-hint">${escapeHtml(String(b.hint))}</div>` : '') +
+      `</div>`;
+  }
+
+  // Columns: the declared list wins; otherwise the union of keys from a row sample.
+  function columnsFor(rows, declared) {
+    if (Array.isArray(declared) && declared.length && declared.every((c) => typeof c === 'string')) return declared;
+    const cols = [];
+    for (const r of rows.slice(0, 20)) for (const k of Object.keys(r)) if (!cols.includes(k)) cols.push(k);
+    return cols;
+  }
+  // Sort mirroring html-report's #210 semantics: numbers compare numerically,
+  // everything else as strings, and rows MISSING the key sort last — under BOTH
+  // directions (the 0.62 fix).
+  function sortRows(rows, key, desc) {
+    const missing = (v) => v === undefined || v === null || v === '';
+    return rows.slice().sort((a, b) => {
+      const va = a ? a[key] : undefined;
+      const vb = b ? b[key] : undefined;
+      if (missing(va) && missing(vb)) return 0;
+      if (missing(va)) return 1;
+      if (missing(vb)) return -1;
+      const na = typeof va === 'number' ? va : Number(va);
+      const nb = typeof vb === 'number' ? vb : Number(vb);
+      const cmp = !Number.isNaN(na) && !Number.isNaN(nb) ? na - nb : String(va).localeCompare(String(vb));
+      return desc ? -cmp : cmp;
+    });
+  }
+  const MAX_ROWS = 200; // defensive cap; a panel is a glance, not a data dump
+
+  // The last run's trace exists but the server couldn't parse it (corrupt/truncated):
+  // distinct from "no run yet" — don't tell the user to run something that DID run.
+  const traceUnreadable = (payload) =>
+    !!(payload && typeof payload === 'object' && payload.traceUnreadable === true);
+
+  function tableHtml(b) {
+    const payload = payloadFor(b.source);
+    if (traceUnreadable(payload)) {
+      return placeholderHtml(`The last run of “${String(b.source ?? '')}” finished, but its trace couldn’t be read — re-run to refresh this table.`);
+    }
+    const rows = rowsFrom(payload);
+    if (!rows || !rows.length) {
+      if (payload && typeof payload === 'object' && !Array.isArray(payload)) {
+        // A run-output envelope with no row data: the run happened, it just isn't
+        // tabular — say so (and point at the block that fits) instead of "run it".
+        if ('rows' in payload || 'html' in payload) {
+          return placeholderHtml(`The last run of “${String(b.source ?? '')}” produced no table rows${typeof payload.html === 'string' ? ' — use a report block for this source instead' : ''}.`);
+        }
+        // A plain object payload (last-run-status / routine-status) → a field/value
+        // table, mirroring html-report's object auto-render.
+        const entries = Object.entries(payload).filter(([, v]) => typeof v !== 'object' || v === null);
+        if (entries.length) {
+          const body = entries.map(([k, v]) =>
+            `<tr><td>${escapeHtml(k)}</td><td>${escapeHtml(v == null ? '—' : String(v))}</td></tr>`,
+          ).join('');
+          return `<div class="ext-table-wrap"><table class="ext-table"><tbody>${body}</tbody></table></div>`;
+        }
+      }
+      return placeholderHtml(`No data for “${String(b.source ?? '')}” yet — run the workflow to fill this table.`);
+    }
+    let shown = rows.filter((r) => r && typeof r === 'object' && !Array.isArray(r));
+    const cols = columnsFor(shown, b.columns);
+    if (typeof b.sort === 'string' && b.sort) shown = sortRows(shown, b.sort, b['sort-desc'] === true);
+    const more = Math.max(0, shown.length - MAX_ROWS);
+    if (more) shown = shown.slice(0, MAX_ROWS);
+    const isNum = (v) => typeof v === 'number' || (typeof v === 'string' && v.trim() !== '' && !Number.isNaN(Number(v)));
+    const head = cols.map((c) => `<th>${escapeHtml(c)}</th>`).join('');
+    const body = shown.map((r) =>
+      `<tr>${cols.map((c) => {
+        const v = r[c];
+        const txt = v == null ? '' : typeof v === 'object' ? JSON.stringify(v) : String(v);
+        return `<td${isNum(v) ? ' class="num"' : ''}>${escapeHtml(txt)}</td>`;
+      }).join('')}</tr>`,
+    ).join('');
+    return `<div class="ext-table-wrap"><table class="ext-table"><thead><tr>${head}</tr></thead><tbody>${body}</tbody></table></div>` +
+      (more ? `<div class="ext-table-more">…and ${more} more row${more === 1 ? '' : 's'}</div>` : '');
+  }
+
+  function textHtml(b) {
+    const content = typeof b.content === 'string' ? b.content : '';
+    const paras = content.split(/\r?\n\s*\r?\n/).map((p) => p.trim()).filter(Boolean);
+    if (!paras.length) return '';
+    // Escaped FIRST, then single newlines become <br> — markup in content stays text.
+    return `<div class="ext-text">${paras.map((p) => `<p>${escapeHtml(p).replace(/\r?\n/g, '<br>')}</p>`).join('')}</div>`;
+  }
+
+  function reportHtml(b) {
+    const payload = payloadFor(b.source);
+    const title = typeof b.title === 'string' && b.title ? b.title : String(b.source ?? 'Report');
+    if (traceUnreadable(payload)) {
+      return placeholderHtml(`The last run of “${String(b.source ?? '')}” finished, but its trace couldn’t be read — re-run to refresh this report.`);
+    }
+    const html = payload && typeof payload === 'object' && typeof payload.html === 'string' ? payload.html : null;
+    if (!html) return placeholderHtml(`No report for “${String(b.source ?? '')}” yet — run the workflow to generate one.`);
+    return `<div class="ext-report-row">` +
+      `<span class="ext-report-title">${escapeHtml(title)}</span>` +
+      `<button type="button" class="ext-report-open" data-source="${escapeAttr(String(b.source))}" data-title="${escapeAttr(title)}" data-tip="Open in the HTML Viewer — the report the run produced, never composed by the UI">View report ▸</button>` +
+      `</div>`;
+  }
+
+  function actionHtml(b) {
+    const label = escapeHtml(String(b.label ?? 'Action'));
+    const actionId = typeof b['action-id'] === 'string' ? b['action-id'] : '';
+    const m = RUN_APP_RE.exec(actionId);
+    if (!m) {
+      // Declared intent the host doesn't wire yet — inert, honestly labeled.
+      return `<button type="button" class="ext-action" disabled data-tip="${escapeAttr(`This action (“${actionId || 'unnamed'}”) isn't wired in this FloLess version.`)}">${label}</button>`;
+    }
+    const appId = m[1];
+    const gate = appGate.get(appId);
+    let disabled = ' disabled';
+    let tip;
+    if (!gate || gate.state === 'loading') tip = 'Checking workflow state…';
+    else if (gate.missing) tip = `Blocked: workflow “${appId}” is not installed.`;
+    else if (!gate.runnable) {
+      // The same stale-lock language the header Run button teaches.
+      tip = gate.runState === 'drift'
+        ? 'Blocked: the .flo changed since the last approve — Compile first'
+        : 'Blocked: not compiled — Compile first';
+    } else {
+      disabled = '';
+      tip = `Run ${appId} for real against the live host`;
+    }
+    const inputs = b.inputs && typeof b.inputs === 'object' && !Array.isArray(b.inputs) ? b.inputs : {};
+    return `<button type="button" class="ext-action ext-action-run" data-app="${escapeAttr(appId)}" data-inputs="${escapeAttr(JSON.stringify(inputs))}"${disabled} data-tip="${escapeAttr(tip)}">▶ ${label}</button>`;
+  }
+
+  function unknownHtml(b) {
+    return `<div class="ext-placeholder ext-unknown">This “${escapeHtml(String(b.type ?? '?'))}” block needs a newer FloLess — it appears once you update.</div>`;
+  }
+
+  function blocksHtml(blocks) {
+    let html = '';
+    let statRun = []; // consecutive stats render as ONE KPI strip (mirrors AWARE's fallback renderer)
+    const flush = () => { if (statRun.length) { html += `<div class="ext-stat-row">${statRun.join('')}</div>`; statRun = []; } };
+    for (const block of blocks) {
+      if (!block || typeof block !== 'object') continue;
+      if (block.type === 'stat') { statRun.push(statHtml(block)); continue; }
+      flush();
+      switch (block.type) {
+        case 'table': html += tableHtml(block); break;
+        case 'text': html += textHtml(block); break;
+        case 'report': html += reportHtml(block); break;
+        case 'action': html += actionHtml(block); break;
+        default: html += unknownHtml(block);
+      }
+    }
+    flush();
+    return html;
+  }
+
+  function panelHtml(p) {
+    const blocks = Array.isArray(p.blocks) ? p.blocks : [];
+    return `<section class="ext-panel" data-panel="${escapeAttr(String(p.id ?? ''))}">` +
+      `<div class="ext-panel-title">${escapeHtml(String(p.title ?? p.id ?? 'Panel'))}</div>` +
+      blocksHtml(blocks) +
+      `</section>`;
+  }
+
+  // ── Dashboard render ─────────────────────────────────────────────────────────
+  function composerHtml() {
+    return `<div class="ext-composer-wrap">` +
+      `<div class="ext-pending" id="ext-pending" hidden></div>` +
+      `<div class="ext-composer">` +
+        `<input type="text" id="ext-composer-input" placeholder="Describe what to add or change — your terminal AI applies it" autocomplete="off" aria-label="Describe a dashboard change">` +
+        `<button type="button" id="ext-composer-send">Queue for terminal AI</button>` +
+      `</div>` +
+      `<div class="ext-composer-hint">Try: “Show the last BOM run as a table with a re-run button”.</div>` +
+      `</div>`;
+  }
+
+  function renderDashboard() {
+    const v = ext.validation;
+    const panels = descriptorInvalid() ? [] : dashboardPanels();
+    let html = '';
+    if (descriptorInvalid()) {
+      // Server-validated invalid descriptor ⇒ shipped default + a visible warning —
+      // a user file can never brick the app (design hard requirement).
+      const errs = Array.isArray(v.errors) ? v.errors : [];
+      html += `<div class="ext-invalid">` +
+        `<div class="ext-invalid-title">⚠ Your customization file has errors — showing the default view</div>` +
+        (errs.length ? `<ul>${errs.slice(0, 6).map((e) => `<li>${escapeHtml(String(e))}</li>`).join('')}</ul>` : '') +
+        `<div class="ext-invalid-hint">Ask your terminal AI to fix it, or use Undo (Customized, top left).</div>` +
+        `</div>`;
+    } else {
+      if (v && v.valid == null && v.note && panels.length) {
+        html += `<div class="ext-note">${escapeHtml(String(v.note))}</div>`;
+      }
+      if (v && v.valid === true && Array.isArray(v.warnings) && v.warnings.length) {
+        html += `<div class="ext-note">⚠ ${escapeHtml(String(v.warnings[0]))}${v.warnings.length > 1 ? ` (+${v.warnings.length - 1} more)` : ''}</div>`;
+      }
+    }
+    if (panels.length) {
+      html += `<div class="ext-grid">${panels.map(panelHtml).join('')}</div>`;
+    } else if (!descriptorInvalid()) {
+      // Quiet empty state: one sentence + the composer below. Nothing disabled.
+      html += `<div class="ext-empty">No custom panels yet — describe what you want below and your terminal AI builds it.</div>`;
+    }
+    html += composerHtml();
+    // Post-reset escape hatch: with no panels there is no Customized pill — and so
+    // no Undo control — which would strand a mistaken Reset (its dialog promises
+    // recoverability). The empty state offers the newest snapshot back, one click.
+    const offerRestore = !panels.length && !descriptorInvalid();
+    if (offerRestore) html += `<div class="ext-restore" id="ext-restore" hidden></div>`;
+    $dashboard.innerHTML = html;
+    renderPending();
+    ensureGates(collectRunAppIds(panels));
+    if (offerRestore) maybeOfferRestore();
+  }
+
+  // Fill the empty state's restore line iff history holds a snapshot. Disappears
+  // naturally when panels exist (only rendered in the empty branch) or when
+  // history is empty (this leaves it hidden). Re-checked on every re-render.
+  async function maybeOfferRestore() {
+    let history = [];
+    try { ({ history } = await api('/api/extensions/history')); } catch { return; }
+    const el = document.getElementById('ext-restore'); // may be gone if a re-render raced this fetch
+    if (!el || !Array.isArray(history) || !history.length) return;
+    const when = relAgo(String(history[0].timestamp || ''));
+    el.innerHTML = `Previous layout saved${when ? ' ' + escapeHtml(when) : ''} — ` +
+      `<button type="button" class="ext-restore-btn">Restore it</button>`;
+    el.hidden = false;
+  }
+
+  // ── run-app gating (the same runnable gate the header Run button enforces) ──
+  function collectRunAppIds(panels) {
+    const ids = new Set();
+    for (const p of panels) {
+      for (const b of Array.isArray(p.blocks) ? p.blocks : []) {
+        if (b && typeof b === 'object' && b.type === 'action' && typeof b['action-id'] === 'string') {
+          const m = RUN_APP_RE.exec(b['action-id']);
+          if (m) ids.add(m[1]);
+        }
+      }
+    }
+    return [...ids];
+  }
+  function ensureGates(ids) {
+    for (const id of ids) {
+      if (appGate.has(id)) continue;
+      appGate.set(id, { state: 'loading' });
+      api(`/api/app/${encodeURIComponent(id)}`)
+        .then(({ app }) => appGate.set(id, { state: 'ready', runnable: !!app.runnable, runState: app.runState, missing: false }))
+        .catch(() => appGate.set(id, { state: 'ready', runnable: false, runState: 'uncompiled', missing: true }))
+        .then(() => renderActiveSurfaces());
+    }
+  }
+
+  // ── delegated interactions (innerHTML rebuilds; listeners must survive) ─────
+  function onSurfaceClick(e) {
+    if (e.target.closest('#ext-composer-send')) { submitCustomize(); return; }
+    const restore = e.target.closest('.ext-restore-btn');
+    if (restore) { restoreFromHistory(restore); return; }
+    const rep = e.target.closest('.ext-report-open');
+    if (rep) { openReport(rep.dataset.source, rep.dataset.title); return; }
+    const run = e.target.closest('.ext-action-run');
+    if (run && !run.disabled) runAction(run);
+  }
+
+  // The empty state's "Restore it" — the same undo the Customized menu offers,
+  // reachable when the pill (and with it the menu) is gone after a reset.
+  async function restoreFromHistory(btn) {
+    btn.disabled = true;
+    const ok = await undoNow();
+    if (!ok) btn.disabled = false; // success re-renders the dashboard; the line goes away
+  }
+  $dashboard.addEventListener('click', onSurfaceClick);
+  const $inspectBody = document.getElementById('inspect-body');
+  if ($inspectBody) $inspectBody.addEventListener('click', onSurfaceClick);
+  $dashboard.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' && e.target && e.target.id === 'ext-composer-input') {
+      e.preventDefault();
+      submitCustomize();
+    }
+  });
+
+  function openReport(source, title) {
+    const payload = payloadFor(source);
+    const html = payload && typeof payload === 'object' && typeof payload.html === 'string' ? payload.html : null;
+    if (!html) { showToast('No report yet — run the workflow first.', 'info'); return; }
+    if (bridge.showHtmlReport) bridge.showHtmlReport(title || 'Report', html);
+  }
+
+  async function runAction(btn) {
+    const appId = btn.dataset.app;
+    let inputs = {};
+    try { inputs = JSON.parse(btn.dataset.inputs || '{}'); } catch { /* inert inputs */ }
+    const prev = btn.textContent;
+    btn.disabled = true;
+    btn.textContent = '◆ Running…';
+    try {
+      const res = await api('/api/run', { method: 'POST', body: JSON.stringify({ id: appId, simulate: false, inputs }) });
+      if (res.credentialIssue) {
+        showToast(`Session expired — reconnect ${res.credentialIssue.label} (≡ menu → Integrations), then run again.`, 'warn');
+        return;
+      }
+      const html = res.report && res.report.html;
+      if (html && bridge.showHtmlReport) bridge.showHtmlReport(`${appId} · report`, html);
+      else showToast(`Run complete · ${appId}`, 'ok');
+    } catch (err) {
+      const cred = err && err.body && err.body.credentialIssue;
+      if (cred) showToast(`Session expired — reconnect ${cred.label} (≡ menu → Integrations), then run again.`, 'warn');
+      else showToast('Run failed: ' + (err && err.message ? err.message : err), 'warn');
+    } finally {
+      btn.disabled = false;
+      btn.textContent = prev;
+      fetchExtensions(); // last-run bindings just changed (SSE run-ended also fires; refetch is idempotent)
+    }
+  }
+
+  // ── Customize composer (the Tweak reverse channel, dashboard-scoped) ────────
+  async function submitCustomize() {
+    const input = document.getElementById('ext-composer-input');
+    const btn = document.getElementById('ext-composer-send');
+    const instruction = input ? input.value.trim() : '';
+    if (!instruction) { if (input) input.focus(); return; }
+    if (btn) { btn.disabled = true; btn.textContent = 'Queueing…'; }
+    try {
+      const { request } = await api('/api/extensions/customize', { method: 'POST', body: JSON.stringify({ instruction }) });
+      const line = bridge.instructionFor ? bridge.instructionFor(request) : instruction;
+      const copied = bridge.copyToClipboard ? await bridge.copyToClipboard(line) : false;
+      showToast(copied ? 'Queued for your terminal AI · copied to clipboard' : 'Queued for your terminal AI', 'ok');
+      if (input) input.value = '';
+      if (bridge.loadRequests) bridge.loadRequests();
+      refreshPending();
+    } catch (err) {
+      showToast('Couldn’t queue the change: ' + (err && err.message ? err.message : err), 'warn');
+    } finally {
+      if (btn) { btn.disabled = false; btn.textContent = 'Queue for terminal AI'; }
+    }
+  }
+
+  // Between "queued" and "applied" the dashboard looks unchanged — say so inline,
+  // not just in a transient toast (UX review: kill the dead air for non-technical users).
+  async function refreshPending() {
+    if (!booted) return;
+    try {
+      const { requests } = await api('/api/requests');
+      pendingCustomize = (requests || []).filter((r) => r.type === 'ui-customize').length;
+    } catch { pendingCustomize = 0; }
+    renderPending();
+  }
+  function renderPending() {
+    const el = document.getElementById('ext-pending');
+    if (!el) return;
+    el.hidden = pendingCustomize === 0;
+    el.textContent = pendingCustomize === 0 ? '' :
+      `${pendingCustomize} change${pendingCustomize === 1 ? '' : 's'} queued for your terminal AI — paste the copied instruction there, or say “apply my floless request”.`;
+  }
+
+  // ── Customized badge + Undo / History / Reset menu ───────────────────────────
+  function renderBadge() {
+    if (!$extBadge) return;
+    const has = allPanels().length > 0;
+    $extBadge.hidden = !has;
+    if (!has) closeExtMenu();
+  }
+  let extMenuOpen = false;
+  function openExtMenu() {
+    renderHistoryList();
+    const r = $extBadge.getBoundingClientRect();
+    $extMenu.style.left = Math.round(Math.max(8, Math.min(r.left, window.innerWidth - 300))) + 'px';
+    $extMenu.hidden = false;
+    $extMenu.classList.add('show');
+    $extBadge.setAttribute('aria-expanded', 'true');
+    extMenuOpen = true;
+  }
+  function closeExtMenu() {
+    if (!extMenuOpen) return;
+    $extMenu.classList.remove('show');
+    $extMenu.hidden = true;
+    $extBadge.setAttribute('aria-expanded', 'false');
+    extMenuOpen = false;
+  }
+  if ($extBadge) {
+    $extBadge.addEventListener('click', (e) => {
+      e.stopPropagation();
+      if (extMenuOpen) closeExtMenu(); else openExtMenu();
+    });
+    document.addEventListener('click', (e) => {
+      if (extMenuOpen && !$extMenu.contains(e.target) && e.target !== $extBadge) closeExtMenu();
+    });
+    document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && extMenuOpen) closeExtMenu(); });
+  }
+
+  function relAgo(iso) {
+    const ms = Date.now() - new Date(iso).getTime();
+    if (isNaN(ms) || ms < 0) return '';
+    const min = Math.round(ms / 60000);
+    if (min < 1) return 'just now';
+    if (min < 60) return `${min} min ago`;
+    const h = Math.round(min / 60);
+    if (h < 48) return `${h} h ago`;
+    return `${Math.round(h / 24)} d ago`;
+  }
+  async function renderHistoryList() {
+    if (!$extHistory) return;
+    $extHistory.innerHTML = '<div class="ext-history-empty">loading…</div>';
+    try {
+      const { history } = await api('/api/extensions/history');
+      if (!history || !history.length) {
+        $extHistory.innerHTML = '<div class="ext-history-empty">No snapshots yet — every change lands here automatically.</div>';
+        return;
+      }
+      $extHistory.innerHTML = history.slice(0, 8).map((h) => {
+        const when = relAgo(h.timestamp) || (h.timestamp ? new Date(h.timestamp).toLocaleString() : '—');
+        return `<div class="ext-history-item"><span class="ext-history-when" data-tip="${escapeAttr(h.timestamp)}">${escapeHtml(when)}</span>` +
+          `<span class="ext-history-count">${Number(h.panelsCount) || 0} panel${h.panelsCount === 1 ? '' : 's'}</span></div>`;
+      }).join('');
+    } catch {
+      $extHistory.innerHTML = '<div class="ext-history-empty">history unavailable</div>';
+    }
+  }
+
+  // The one undo body — shared by the Customized menu's "Undo last change" and
+  // the empty state's "Restore it". Returns whether the restore happened.
+  async function undoNow() {
+    try {
+      await api('/api/extensions/undo', { method: 'POST' });
+      showToast('Restored the previous layout', 'ok');
+      fetchExtensions();
+      return true;
+    } catch (err) {
+      const msg = err && err.body && err.body.error;
+      if (msg === 'nothing to undo') showToast('Nothing to undo yet', 'info');
+      else showToast('Undo failed: ' + (err && err.message ? err.message : err), 'warn');
+      return false;
+    }
+  }
+  const $extUndo = document.getElementById('ext-undo');
+  if ($extUndo) $extUndo.onclick = () => { closeExtMenu(); undoNow(); };
+
+  // Reset is recoverable (archived to history first) but still asks — mirrors the
+  // routine-delete confirm: Cancel holds focus; Esc/backdrop cancel.
+  function confirmReset() {
+    return new Promise((resolve) => {
+      const $confirm = document.getElementById('ext-reset-confirm');
+      const $cancel = document.getElementById('ext-reset-cancel');
+      $resetModal.classList.add('show');
+      setTimeout(() => $cancel.focus(), 0);
+      const done = (result) => {
+        $resetModal.classList.remove('show');
+        $confirm.onclick = $cancel.onclick = $resetModal.onclick = null;
+        document.removeEventListener('keydown', onKey, true);
+        resolve(result);
+      };
+      const onKey = (e) => { if (e.key === 'Escape') { e.preventDefault(); done(false); } };
+      $confirm.onclick = () => done(true);
+      $cancel.onclick = () => done(false);
+      $resetModal.onclick = (e) => { if (e.target === $resetModal) done(false); };
+      document.addEventListener('keydown', onKey, true);
+    });
+  }
+  const $extReset = document.getElementById('ext-reset');
+  if ($extReset) $extReset.onclick = async () => {
+    closeExtMenu();
+    if (!(await confirmReset())) return;
+    try {
+      await api('/api/extensions/reset', { method: 'POST' });
+      showToast('Dashboard reset — your panels were saved to history', 'ok');
+      fetchExtensions();
+    } catch (err) {
+      const msg = err && err.body && err.body.error;
+      if (msg && /nothing to reset/i.test(msg)) showToast('Already the default dashboard', 'info');
+      else showToast('Reset failed: ' + (err && err.message ? err.message : err), 'warn');
+    }
+  };
+
+  // ── extra Inspect tabs (slot: inspect-tab) ───────────────────────────────────
+  function renderInspectTabs() {
+    const tabs = document.getElementById('tabs');
+    if (!tabs) return;
+    tabs.querySelectorAll('button.ext-tab').forEach((b) => b.remove());
+    const list = descriptorInvalid() ? [] : inspectPanels();
+    for (const p of list) {
+      const b = document.createElement('button');
+      b.className = 'ext-tab';
+      b.dataset.tab = 'ext:' + String(p.id ?? '');
+      b.textContent = String(p.title ?? p.id ?? 'Panel');
+      tabs.appendChild(b); // app.js's delegated $tabs.onclick handles activation
+    }
+    if (typeof state.currentTab === 'string' && state.currentTab.startsWith('ext:')) {
+      const alive = list.some((p) => 'ext:' + String(p.id ?? '') === state.currentTab);
+      if (!alive) state.currentTab = 'description'; // panel renamed/removed — heal to a real tab
+      tabs.querySelectorAll('button').forEach((b) => b.classList.toggle('active', b.dataset.tab === state.currentTab));
+      renderInspect();
+    }
+  }
+
+  function renderExtInspect(panelId) {
+    const $bd = document.getElementById('inspect-body');
+    if (!$bd) return;
+    const p = inspectPanels().find((x) => String(x.id ?? '') === panelId);
+    if (!p) {
+      $bd.innerHTML = '<div class="empty-state">This panel was removed from your customization.</div>';
+      return;
+    }
+    $bd.innerHTML = `<div class="ext-inspect">` +
+      `<div class="inspect-head-row"><div class="inspect-title">${escapeHtml(String(p.title ?? p.id))}</div></div>` +
+      `<div class="inspect-meta">custom panel · composed by your terminal AI</div>` +
+      blocksHtml(Array.isArray(p.blocks) ? p.blocks : []) +
+      `</div>`;
+    ensureGates(collectRunAppIds([p]));
+  }
+
+  // Route ext:* tabs through our renderer; everything else stays app.js's.
+  // (Same reassignment pattern aware.js uses for renderChat/selectAgent.)
+  const _renderInspect = renderInspect;
+  renderInspect = function renderInspectWithPanels() {
+    if (typeof state.currentTab === 'string' && state.currentTab.startsWith('ext:')) {
+      renderExtInspect(state.currentTab.slice(4));
+      return;
+    }
+    _renderInspect();
+  };
+
+  function renderActiveSurfaces() {
+    renderDashboard();
+    if (typeof state.currentTab === 'string' && state.currentTab.startsWith('ext:')) renderInspect();
+  }
+
+  // ── fetch + public surface ───────────────────────────────────────────────────
+  async function fetchExtensions(opts = {}) {
+    if (!booted) return;
+    let res;
+    try {
+      res = await api('/api/extensions');
+    } catch {
+      return; // gated/offline — keep the current render; the next signal retries
+    }
+    ext = { descriptor: res.descriptor ?? null, validation: res.validation ?? null, data: res.data || {} };
+    appGate.clear(); // compiles/installs elsewhere may have changed the gates
+    renderBadge();
+    renderInspectTabs();
+    renderDashboard();
+    // Content changed while the user is on Canvas → light the Dashboard dot
+    // (never auto-switch — don't yank their context).
+    if (opts.fromChange && view === 'canvas' && allPanels().length && $dashDot) $dashDot.hidden = false;
+    refreshPending();
+  }
+
+  function boot() {
+    if (booted) return;
+    booted = true;
+    fetchExtensions();
+  }
+
+  window.flolessPanels = {
+    boot,
+    refresh: (opts) => fetchExtensions(opts || {}),
+    refreshData: () => fetchExtensions(),
+    refreshPending,
+  };
+
+  applyView(); // restore the persisted view immediately (no fetch until boot)
+})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floless/app",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "type": "module",
   "description": "Thin localhost host for floless.app — serves web/ and shells the aware CLI. No engine, no LLM.",
   "bin": {