@ashlr/hub 2.2.0 → 3.0.0

package/dist/core/web/public/app.js

@@ -24,8 +24,8 @@
 // Constants
 // ---------------------------------------------------------------------------
 
-const VIEWS = ['overview', 'runs', 'swarms', 'pulse', 'genome', 'portfolio', 'inbox', 'daemon'];
-const DEFAULT_VIEW = 'overview';
+const VIEWS = ['control', 'overview', 'runs', 'swarms', 'pulse', 'genome', 'portfolio', 'inbox', 'daemon', 'fleet'];
+const DEFAULT_VIEW = 'control';
 const API_BASE = '';  // same origin
 
 // sessionStorage key for the session token (never localStorage, never URL).
@@ -64,6 +64,9 @@ const state = {
   inbox: { pending: 0, proposals: [] },
   inboxDetail: null,        // currently-open Proposal (full, with diff)
   daemon: null,             // DaemonState | null
+  fleet: null,              // M49: FleetStatus | null
+  control: null,            // M61: GET /api/control composite view
+  controlInterval: null,    // M61: 4s polling timer
   inboxBadge: 0,            // pending count from SSE, drives nav badge
   loading: {},   // viewName -> boolean
   error: {},     // viewName -> string | null
@@ -269,6 +272,8 @@ function connectSSE() {
       try {
         state.daemon = JSON.parse(e.data);
         if (state.activeView === 'daemon') renderDaemon();
+        // M61: control view picks up daemon events
+        if (state.activeView === 'control') loadControl();
       } catch {}
     });
     es.addEventListener('error', () => {
@@ -322,7 +327,8 @@ async function onHashChange() {
 
 function renderActiveView() {
   const view = state.activeView;
-  if (view === 'overview') renderOverview();
+  if (view === 'control') renderControl();
+  else if (view === 'overview') renderOverview();
   else if (view === 'runs') renderRuns();
   else if (view === 'swarms') renderSwarms();
   else if (view === 'pulse') renderPulse();
@@ -330,10 +336,17 @@ function renderActiveView() {
   else if (view === 'portfolio') renderPortfolio();
   else if (view === 'inbox') renderInbox();
   else if (view === 'daemon') renderDaemon();
+  else if (view === 'fleet') renderFleet();
 }
 
 async function loadView(view) {
-  if (view === 'overview') await loadOverview();
+  // Stop control polling when navigating away
+  if (view !== 'control' && state.controlInterval) {
+    clearInterval(state.controlInterval);
+    state.controlInterval = null;
+  }
+  if (view === 'control') await loadControl();
+  else if (view === 'overview') await loadOverview();
   else if (view === 'runs') await loadRuns();
   else if (view === 'swarms') await loadSwarms();
   else if (view === 'pulse') await loadPulse();
@@ -341,6 +354,7 @@ async function loadView(view) {
   else if (view === 'portfolio') await loadPortfolio();
   else if (view === 'inbox') await loadInbox();
   else if (view === 'daemon') await loadDaemon();
+  else if (view === 'fleet') await loadFleet();
 }
 
 // ---------------------------------------------------------------------------
@@ -362,6 +376,7 @@ function renderShell() {
 
   // Nav icons per view (inline SVG path data)
   const VIEW_ICONS = {
+    control:   '<rect x="1" y="1" width="14" height="9" rx="1.5" stroke="currentColor" stroke-width="1.4" fill="none"/><line x1="4" y1="13" x2="12" y2="13" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><line x1="8" y1="10" x2="8" y2="13" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><circle cx="5" cy="5.5" r="1.3" fill="currentColor" opacity=".9"/><circle cx="8" cy="5.5" r="1.3" fill="currentColor" opacity=".6"/><circle cx="11" cy="5.5" r="1.3" fill="currentColor" opacity=".35"/>',
     overview:  '<rect x="1" y="1" width="6" height="6" rx="1" fill="currentColor" opacity=".85"/><rect x="9" y="1" width="6" height="6" rx="1" fill="currentColor" opacity=".55"/><rect x="1" y="9" width="6" height="6" rx="1" fill="currentColor" opacity=".55"/><rect x="9" y="9" width="6" height="6" rx="1" fill="currentColor" opacity=".3"/>',
     runs:      '<circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5"/><polyline points="5.5,8 7.5,10 10.5,6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>',
     swarms:    '<circle cx="8" cy="3" r="2" fill="currentColor" opacity=".9"/><circle cx="3" cy="13" r="2" fill="currentColor" opacity=".7"/><circle cx="13" cy="13" r="2" fill="currentColor" opacity=".7"/><line x1="8" y1="5" x2="3" y2="11" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/><line x1="8" y1="5" x2="13" y2="11" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/><line x1="3" y1="13" x2="13" y2="13" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>',
@@ -382,8 +397,10 @@ function renderShell() {
     iconSvg.setAttribute('aria-hidden', 'true');
     iconSvg.innerHTML = VIEW_ICONS[v] ?? '';
 
-    const label = document.createTextNode(v.charAt(0).toUpperCase() + v.slice(1));
-    const a = el('a', { cls: 'nav-link', href: `#${v}`, 'data-view': v });
+    const VIEW_LABELS = { control: 'Mission Control' };
+    const labelText = VIEW_LABELS[v] ?? (v.charAt(0).toUpperCase() + v.slice(1));
+    const label = document.createTextNode(labelText);
+    const a = el('a', { cls: `nav-link${v === 'control' ? ' nav-link--control' : ''}`, href: `#${v}`, 'data-view': v });
     a.appendChild(iconSvg);
     a.appendChild(label);
 
@@ -1843,6 +1860,108 @@ function renderDaemon() {
   main.appendChild(section);
 }
 
+// ---------------------------------------------------------------------------
+// M49: Fleet view — read-only fleet control plane snapshot
+// ---------------------------------------------------------------------------
+
+async function loadFleet() {
+  showLoading('fleet');
+  try {
+    state.fleet = await apiFetch('/api/fleet');
+    renderFleet();
+  } catch (err) {
+    showError('fleet', err.message);
+  }
+}
+
+function quotaTag(quota) {
+  const map = {
+    ok: 'var(--status-done)',
+    warn: 'var(--status-aborted)',
+    over: 'var(--status-failed)',
+    unlimited: 'var(--text-dim, #888)',
+  };
+  return el('span', {
+    cls: 'fleet-quota',
+    style: `color:${map[quota] || 'inherit'}`,
+    title: `quota: ${quota}`,
+  }, quota);
+}
+
+function renderFleet() {
+  if (state.activeView !== 'fleet') return;
+  const main = getMain();
+  if (!main) return;
+  main.innerHTML = '';
+
+  const section = el('section', { cls: 'view-section' });
+  section.appendChild(el('div', { cls: 'view-header' },
+    el('h1', { cls: 'view-title' }, 'Fleet'),
+    el('span', { cls: 'view-subtitle' }, 'Control plane & observability')
+  ));
+
+  const f = state.fleet;
+  if (!f) {
+    section.appendChild(el('div', { cls: 'empty-state' },
+      el('p', {}, 'Fleet status unavailable.'),
+      el('p', { cls: 'hint' }, 'Try again, or check the daemon with `ashlr fleet status`.')
+    ));
+    main.appendChild(section);
+    return;
+  }
+
+  // Paused / killed banner
+  if (f.killed) {
+    section.appendChild(el('div', { cls: 'fleet-banner fleet-banner--paused' },
+      el('strong', {}, 'Fleet paused'),
+      el('span', {}, ' — the kill switch is engaged. Resume with `ashlr fleet resume`.')
+    ));
+  }
+
+  // Daemon + queue + merges summary card
+  const summary = el('div', { cls: 'fleet-card card' });
+  summary.appendChild(infoGrid([
+    ['Daemon', f.daemon.running ? 'running' : 'stopped'],
+    ['Last tick', f.daemon.lastTickAt ? fmtRelative(f.daemon.lastTickAt) : '—'],
+    ['Spend today', f.daemon.todaySpentUsd != null ? `$${f.daemon.todaySpentUsd.toFixed(4)}` : '—'],
+    ['Backlog queue', f.queue?.backlogItems ?? '—'],
+    ['Merges (24h)', f.merges?.recent ?? '—'],
+  ]));
+  section.appendChild(summary);
+
+  // Backends table
+  const backendsCard = el('div', { cls: 'fleet-card card' });
+  backendsCard.appendChild(el('h2', { cls: 'card-title' }, 'Backends'));
+  const backends = Array.isArray(f.backends) ? f.backends : [];
+  if (backends.length === 0) {
+    backendsCard.appendChild(el('p', { cls: 'hint' }, 'No backends configured.'));
+  } else {
+    const list = el('div', { cls: 'fleet-backends' });
+    for (const b of backends) {
+      const row = el('div', { cls: 'fleet-backend-row' },
+        el('span', { cls: 'fleet-backend-name' }, b.backend),
+        el('span', { cls: 'fleet-backend-dispatches' }, `${b.dispatchesRecent} dispatch(es) / 24h`),
+        quotaTag(b.quota)
+      );
+      list.appendChild(row);
+    }
+    backendsCard.appendChild(list);
+  }
+  section.appendChild(backendsCard);
+
+  // Proposals card
+  const propsCard = el('div', { cls: 'fleet-card card' });
+  propsCard.appendChild(el('h2', { cls: 'card-title' }, 'Proposals'));
+  propsCard.appendChild(infoGrid([
+    ['Pending', f.proposals?.pending ?? 0],
+    ['Frontier pending', f.proposals?.frontierPending ?? 0],
+    ['Applied', f.proposals?.applied ?? 0],
+  ]));
+  section.appendChild(propsCard);
+
+  main.appendChild(section);
+}
+
 /** Format a signed delta for the portfolio "today" block. null → em-dash. */
 function fmtDelta(n, prefix = '') {
   if (n === null || n === undefined || typeof n !== 'number' || !isFinite(n)) return '—';
@@ -1879,6 +1998,393 @@ function updateSseDot(connected) {
   dot.classList.toggle('connected', connected);
 }
 
+// ---------------------------------------------------------------------------
+// Mission Control (M61) — /api/control composite live view
+// ---------------------------------------------------------------------------
+
+async function loadControl() {
+  // Guard against overlapping fetches: /api/control aggregates a usage rollup
+  // that can take a beat, and on single-threaded Node a stacked poll would pile
+  // up requests (and freeze the tab waiting). Skip if one is already in flight.
+  if (state.controlLoading) return;
+  state.controlLoading = true;
+  // Don't show skeleton loading flash on poll refreshes — only on first load
+  if (!state.control) showLoading('control');
+  try {
+    state.control = await apiFetch('/api/control');
+    renderControl();
+  } catch (err) {
+    if (!state.control) showError('control', err.message);
+    // On poll failure keep stale data visible — don't replace with error
+  } finally {
+    state.controlLoading = false;
+  }
+
+  // Start polling (8s) if not already running and we're still on this view.
+  if (state.activeView === 'control' && !state.controlInterval) {
+    state.controlInterval = setInterval(() => {
+      if (state.activeView !== 'control') {
+        clearInterval(state.controlInterval);
+        state.controlInterval = null;
+        return;
+      }
+      loadControl();
+    }, 8000);
+  }
+}
+
+function renderControl() {
+  if (state.activeView !== 'control') return;
+  const main = getMain();
+  if (!main) return;
+  // Preserve scroll position across the 8s poll re-render (otherwise a watched
+  // dashboard jumps to the top every refresh).
+  const _scrollY = window.scrollY;
+  main.innerHTML = '';
+
+  const d = state.control;
+  const section = el('section', { cls: 'view-section' });
+
+  section.appendChild(el('div', { cls: 'view-header' },
+    el('h1', { cls: 'view-title' }, 'Mission Control'),
+    el('span', { cls: 'view-subtitle' }, d ? `Updated ${fmtRelative(d.ts)}` : 'Live fleet overview')
+  ));
+
+  if (!d) {
+    section.appendChild(el('div', { cls: 'empty-state' },
+      el('p', {}, 'Control data unavailable.'),
+      el('p', { cls: 'hint' }, 'Ensure the daemon is running and the server serves /api/control.')
+    ));
+    main.appendChild(section);
+    return;
+  }
+
+  // ── 1. Fleet Pulse (hero) ──────────────────────────────────────────────
+  const fleet = d.fleet ?? d.daemon ?? {};
+  const daemon = d.daemon ?? fleet.daemon ?? {};
+  const queue  = d.fleet?.queue ?? fleet.queue ?? {};
+  const props  = d.fleet?.proposals ?? fleet.proposals ?? {};
+  const merges = d.fleet?.merges ?? fleet.merges ?? {};
+  const isRunning = daemon.running ?? false;
+  const isKilled  = d.fleet?.killed ?? false;
+
+  if (isKilled) {
+    section.appendChild(el('div', { cls: 'ctrl-banner ctrl-banner--paused' },
+      el('strong', {}, 'Fleet paused'),
+      el('span', {}, ' — kill switch engaged. Resume with `ashlr fleet resume`.')
+    ));
+  }
+
+  const heroPulse = el('div', { cls: 'ctrl-hero' });
+  const daemonStatusEl = el('div', { cls: 'ctrl-daemon-status' },
+    el('span', { cls: `ctrl-live-dot${isRunning ? ' running' : ''}`, title: isRunning ? 'Running' : 'Stopped' }),
+    el('span', { cls: `ctrl-daemon-label${isRunning ? ' running' : ''}` }, isRunning ? 'Daemon running' : 'Daemon stopped'),
+    daemon.pid ? el('span', { cls: 'ctrl-pid' }, `PID ${daemon.pid}`) : null
+  );
+  heroPulse.appendChild(daemonStatusEl);
+
+  if (daemon.lastTickAt) {
+    heroPulse.appendChild(el('div', { cls: 'ctrl-last-tick' }, `Last tick ${fmtRelative(daemon.lastTickAt)}`));
+  }
+
+  const heroMetrics = el('div', { cls: 'ctrl-hero-metrics' });
+  heroMetrics.appendChild(controlMetric('Spend today', daemon.todaySpentUsd != null ? `$${daemon.todaySpentUsd.toFixed(4)}` : '—', '#fbbf24'));
+  heroMetrics.appendChild(controlMetric('Queue depth', queue.backlogItems ?? '—', '#60a5fa'));
+  heroMetrics.appendChild(controlMetric('Proposals', props.pending ?? 0, '#a78bfa'));
+  heroMetrics.appendChild(controlMetric('Merges (24h)', merges.recent ?? '—', '#4ade80'));
+  heroMetrics.appendChild(controlMetric('Kill switch', isKilled ? 'ENGAGED' : 'off', isKilled ? '#f87171' : '#64748b'));
+  heroPulse.appendChild(heroMetrics);
+  section.appendChild(heroPulse);
+
+  // ── 2. Local models ────────────────────────────────────────────────────
+  const modelsData = d.models ?? {};
+  const providers  = Array.isArray(modelsData.providers) ? modelsData.providers : [];
+  const activeProvider = modelsData.activeProvider ?? '';
+
+  const modelsCard = el('div', { cls: 'ctrl-card card' });
+  modelsCard.appendChild(el('div', { cls: 'card-header' },
+    el('span', { cls: 'card-title' }, 'Local Models'),
+    el('span', { cls: 'card-subtitle' }, activeProvider ? `active: ${activeProvider}` : 'no active provider')
+  ));
+  const modelsBody = el('div', { cls: 'card-body' });
+
+  if (providers.length === 0) {
+    modelsBody.appendChild(el('p', { cls: 'hint' }, 'No local model providers detected.'));
+  } else {
+    for (const prov of providers) {
+      const isActive = prov.id === activeProvider;
+      const row = el('div', { cls: `ctrl-provider-row${isActive ? ' active' : ''}` });
+      row.appendChild(el('span', { cls: `ctrl-health-dot ${prov.up ? 'up' : 'down'}`, title: prov.up ? 'Up' : 'Down' }));
+      row.appendChild(el('span', { cls: 'ctrl-provider-name' }, prov.id));
+      if (prov.kind) row.appendChild(el('span', { cls: 'ctrl-provider-kind' }, prov.kind));
+      if (prov.baseUrl) row.appendChild(el('span', { cls: 'ctrl-provider-url' }, prov.baseUrl));
+      if (isActive) row.appendChild(el('span', { cls: 'ctrl-active-badge' }, 'active'));
+      const chips = el('div', { cls: 'ctrl-model-chips' });
+      const models = Array.isArray(prov.models) ? prov.models : [];
+      if (models.length === 0) {
+        chips.appendChild(el('span', { cls: 'ctrl-model-chip muted' }, 'no models'));
+      } else {
+        models.forEach((m) => chips.appendChild(el('span', { cls: 'ctrl-model-chip' }, typeof m === 'string' ? m : (m.id ?? m.name ?? String(m)))));
+      }
+      row.appendChild(chips);
+      modelsBody.appendChild(row);
+    }
+  }
+  modelsCard.appendChild(modelsBody);
+  section.appendChild(modelsCard);
+
+  // ── 3. Backends & limits ───────────────────────────────────────────────
+  const backends  = Array.isArray(d.fleet?.backends) ? d.fleet.backends : [];
+  const limits    = Array.isArray(d.limits) ? d.limits : [];
+  const subLimits = d.subscriptionLimits ?? {};
+
+  const backendsCard = el('div', { cls: 'ctrl-card card' });
+  backendsCard.appendChild(el('div', { cls: 'card-header' },
+    el('span', { cls: 'card-title' }, 'Backends & Limits')
+  ));
+  const backendsBody = el('div', { cls: 'card-body' });
+
+  if (subLimits.note) {
+    backendsBody.appendChild(el('div', { cls: 'ctrl-sub-note' },
+      el('span', { cls: 'ctrl-sub-icon' }, '⚠'),
+      el('span', {}, subLimits.note)
+    ));
+  }
+
+  // ── M63: rolling-window usage (REAL, from local transcripts) ──────────────
+  const subWindows = Array.isArray(subLimits.windows) ? subLimits.windows : [];
+  if (subWindows.length > 0) {
+    backendsBody.appendChild(el('div', { cls: 'ctrl-limits-heading' }, 'Rolling usage (transcript-sourced)'));
+    // Group by window label so we render 5h then 24h sections
+    for (const windowLabel of ['5h', '24h']) {
+      const rows = subWindows.filter((w) => w.window === windowLabel);
+      if (rows.length === 0) continue;
+      const section = el('div', { cls: 'ctrl-win-section' });
+      section.appendChild(el('div', { cls: 'ctrl-win-label' }, `Last ${windowLabel}`));
+      for (const w of rows) {
+        const tokStr  = typeof w.tokens  === 'number' ? fmtK(w.tokens)              : '—';
+        const costStr = typeof w.costUsd === 'number' ? `$${fmt(w.costUsd, 4)}`     : '—';
+        section.appendChild(el('div', { cls: 'ctrl-win-row' },
+          el('span', { cls: 'ctrl-win-provider' }, w.provider ?? '?'),
+          el('span', { cls: 'ctrl-win-tokens' },   tokStr),
+          el('span', { cls: 'ctrl-win-cost' },     costStr)
+        ));
+      }
+      backendsBody.appendChild(section);
+    }
+  }
+
+  // ── M63/M64: provider subscription/key status ────────────────────────────
+  const subProviders = Array.isArray(subLimits.providers) ? subLimits.providers : [];
+  if (subProviders.length > 0) {
+    backendsBody.appendChild(el('div', { cls: 'ctrl-limits-heading' }, 'Provider status'));
+    for (const p of subProviders) {
+      const kindBadge = el('span', {
+        cls: `ctrl-prov-kind-badge ${p.kind === 'api-key' ? 'api-key' : 'subscription'}`
+      }, p.kind === 'api-key' ? 'API key' : 'subscription');
+
+      // M64: for providers with real used% (e.g. Codex), render a usage bar + reset time
+      // p.used is used_percent (0-100) when coming from Codex rate-limits
+      const hasUsedPct = typeof p.used === 'number' && p.used >= 0 && p.used <= 100;
+      const isSubscriptionPct = p.kind === 'subscription' && hasUsedPct;
+
+      const row = el('div', { cls: 'ctrl-prov-status-row' },
+        el('span', { cls: 'ctrl-prov-status-name' }, p.provider ?? '?'),
+        kindBadge,
+        el('span', { cls: 'ctrl-prov-status-detail' }, p.detail ?? ''),
+        // API-key providers show raw token counts; subscription providers with used%
+        // get a percentage badge (not "tok")
+        !isSubscriptionPct && typeof p.used === 'number'
+          ? el('span', { cls: 'ctrl-prov-status-used' }, fmtK(p.used) + ' tok')
+          : null
+      );
+
+      // Rate-limit bar for subscription providers with real used% data (Codex)
+      if (isSubscriptionPct) {
+        const pct = Math.min(100, Math.round(p.used));
+        const barColor = pct >= 90 ? 'var(--status-failed)'
+                       : pct >= 70 ? 'var(--status-aborted)'
+                       : 'var(--accent)';
+        const resetStr = p.resetAt
+          ? new Date(p.resetAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+          : null;
+        const barWrap = el('div', { cls: 'ctrl-prov-rl-wrap' },
+          el('div', { cls: 'ctrl-prov-rl-bar-track' },
+            el('div', { cls: 'ctrl-prov-rl-bar', style: `width:${pct}%;background:${barColor}` })
+          ),
+          el('span', { cls: 'ctrl-prov-rl-pct' }, `${pct}%`),
+          resetStr ? el('span', { cls: 'ctrl-prov-rl-reset' }, `resets ${resetStr}`) : null
+        );
+        row.appendChild(barWrap);
+      }
+
+      backendsBody.appendChild(row);
+    }
+  }
+
+  if (backends.length === 0 && limits.length === 0) {
+    backendsBody.appendChild(el('p', { cls: 'hint' }, 'No backends configured.'));
+  }
+
+  if (backends.length > 0) {
+    const bList = el('div', { cls: 'ctrl-backend-list' });
+    for (const b of backends) {
+      bList.appendChild(el('div', { cls: 'ctrl-backend-row' },
+        el('span', { cls: 'ctrl-backend-name' }, b.id ?? b.backend ?? '?'),
+        el('span', { cls: 'ctrl-backend-dispatches' }, `${b.dispatchesRecent ?? 0} dispatch(es) / 24h`),
+        quotaTag(b.quota ?? 'ok')
+      ));
+    }
+    backendsBody.appendChild(bList);
+  }
+
+  if (limits.length > 0) {
+    backendsBody.appendChild(el('div', { cls: 'ctrl-limits-heading' }, 'Rate windows'));
+    for (const lim of limits) {
+      const used = lim.used ?? 0;
+      const max  = lim.max  ?? 1;
+      const pct  = Math.min(100, max > 0 ? Math.round((used / max) * 100) : 0);
+      const standing = lim.standing ?? 'ok';
+      const barColor = standing === 'over' ? 'var(--status-failed)'
+                     : standing === 'warn' ? 'var(--status-aborted)'
+                     : 'var(--accent)';
+      backendsBody.appendChild(el('div', { cls: 'ctrl-limit-row' },
+        el('span', { cls: 'ctrl-limit-backend' }, lim.backend ?? '?'),
+        el('span', { cls: 'ctrl-limit-window' }, lim.window ?? ''),
+        el('div', { cls: 'ctrl-limit-bar-wrap' },
+          el('div', { cls: 'ctrl-limit-bar', style: `width:${pct}%;background:${barColor}` })
+        ),
+        el('span', { cls: 'ctrl-limit-label' }, `${used}/${max === Infinity ? '∞' : max}`),
+        el('span', { cls: `ctrl-standing ${standing}` }, standing)
+      ));
+    }
+  }
+
+  backendsCard.appendChild(backendsBody);
+  section.appendChild(backendsCard);
+
+  // ── 4. Usage (7d) ─────────────────────────────────────────────────────
+  const usage = d.usage ?? {};
+  const byProvider = Array.isArray(usage.byProvider) ? usage.byProvider : [];
+
+  const usageCard = el('div', { cls: 'ctrl-card card' });
+  usageCard.appendChild(el('div', { cls: 'card-header' },
+    el('span', { cls: 'card-title' }, `Usage${usage.window ? ` (${usage.window})` : ''}`)
+  ));
+  const usageBody = el('div', { cls: 'card-body' });
+
+  const usageTotals = el('div', { cls: 'ctrl-usage-totals' });
+  usageTotals.appendChild(controlMetric('Total tokens', usage.totalTokens != null ? fmtK(usage.totalTokens) : '—', '#60a5fa'));
+  usageTotals.appendChild(controlMetric('Total cost', usage.totalCostUsd != null ? `$${fmt(usage.totalCostUsd)}` : '—', '#fbbf24'));
+  usageTotals.appendChild(controlMetric('Local savings', usage.localSavingsUsd != null ? `$${fmt(usage.localSavingsUsd)}` : '—', '#4ade80'));
+  usageBody.appendChild(usageTotals);
+
+  if (byProvider.length > 0) {
+    usageBody.appendChild(el('div', { cls: 'ctrl-prov-heading' }, 'By provider'));
+    for (const p of byProvider) {
+      const pct = Math.min(100, Math.round(p.sharePct ?? 0));
+      const isLocal = (p.tier === 'local');
+      usageBody.appendChild(el('div', { cls: 'ctrl-prov-row' },
+        el('span', { cls: `ctrl-prov-label${isLocal ? ' local' : ''}` },
+          `${p.provider ?? '?'}${p.tier ? ` (${p.tier})` : ''}`),
+        el('div', { cls: 'ctrl-prov-bar-wrap' },
+          el('div', { cls: `ctrl-prov-bar${isLocal ? ' local' : ''}`, style: `width:${pct}%` })
+        ),
+        el('span', { cls: 'ctrl-prov-pct' }, `${pct}%`),
+        el('span', { cls: 'ctrl-prov-cost' }, p.costUsd != null ? `$${fmt(p.costUsd)}` : ''),
+        el('span', { cls: 'ctrl-prov-tokens' }, p.tokens != null ? fmtK(p.tokens) : '')
+      ));
+    }
+  }
+  usageCard.appendChild(usageBody);
+  section.appendChild(usageCard);
+
+  // ── 5. Security (M67) ─────────────────────────────────────────────────
+  const sec = d.security ?? {};
+  const secFindings = Array.isArray(sec.findings) ? sec.findings : [];
+  const secCounts = sec.counts ?? {};
+
+  const secCard = el('div', { cls: 'ctrl-card card' });
+  secCard.appendChild(el('div', { cls: 'card-header' },
+    el('span', { cls: 'card-title' }, 'Security'),
+    el('span', { cls: 'card-subtitle' }, sec.available ? `${secFindings.length} finding(s)` : 'no data')
+  ));
+  const secBody = el('div', { cls: 'card-body' });
+
+  if (!sec.available || secFindings.length === 0) {
+    secBody.appendChild(el('p', { cls: 'hint' }, 'No security findings in cached backlog. Run a backlog scan to populate.'));
+  } else {
+    // Severity count badges
+    const countsRow = el('div', { cls: 'ctrl-sec-counts' });
+    if (secCounts.critical > 0) {
+      countsRow.appendChild(el('span', { cls: 'ctrl-sec-badge ctrl-sec-badge--critical' }, `${secCounts.critical} critical`));
+    }
+    if (secCounts.high > 0) {
+      countsRow.appendChild(el('span', { cls: 'ctrl-sec-badge ctrl-sec-badge--high' }, `${secCounts.high} high`));
+    }
+    if (secCounts.medium > 0) {
+      countsRow.appendChild(el('span', { cls: 'ctrl-sec-badge ctrl-sec-badge--medium' }, `${secCounts.medium} medium`));
+    }
+    if (secCounts.low > 0) {
+      countsRow.appendChild(el('span', { cls: 'ctrl-sec-badge ctrl-sec-badge--low' }, `${secCounts.low} low`));
+    }
+    secBody.appendChild(countsRow);
+
+    // Findings list (capped at 20 to keep the panel scannable)
+    const list = el('div', { cls: 'ctrl-sec-list' });
+    for (const f of secFindings.slice(0, 20)) {
+      const sev = f.severity ?? 'low';
+      list.appendChild(el('div', { cls: 'ctrl-sec-row' },
+        el('span', { cls: `ctrl-sec-sev ctrl-sec-sev--${sev}` }, sev),
+        el('span', { cls: 'ctrl-sec-repo' }, f.repo ?? '?'),
+        el('span', { cls: 'ctrl-sec-title' }, f.title ?? '')
+      ));
+    }
+    if (secFindings.length > 20) {
+      list.appendChild(el('p', { cls: 'hint' }, `+${secFindings.length - 20} more — run \`ashlr backlog\` to view all.`));
+    }
+    secBody.appendChild(list);
+  }
+  secCard.appendChild(secBody);
+  section.appendChild(secCard);
+
+  // ── 6. Activity log ───────────────────────────────────────────────────
+  const logs = Array.isArray(d.logs) ? [...d.logs].reverse() : [];
+
+  const logsCard = el('div', { cls: 'ctrl-card card' });
+  logsCard.appendChild(el('div', { cls: 'card-header' },
+    el('span', { cls: 'card-title' }, 'Activity Log'),
+    el('span', { cls: 'card-subtitle' }, `${logs.length} recent entries`)
+  ));
+  const logsBody = el('div', { cls: 'ctrl-log-body' });
+
+  if (logs.length === 0) {
+    logsBody.appendChild(el('p', { cls: 'hint' }, 'No recent activity.'));
+  } else {
+    for (const entry of logs.slice(0, 50)) {
+      const kind = entry.kind ?? 'info';
+      logsBody.appendChild(el('div', { cls: `ctrl-log-row ctrl-log-row--${kind}` },
+        el('span', { cls: 'ctrl-log-ts' }, entry.ts ? fmtRelative(entry.ts) : '—'),
+        el('span', { cls: `ctrl-log-kind ctrl-log-kind--${kind}` }, kind),
+        el('span', { cls: 'ctrl-log-msg' }, entry.msg ?? '')
+      ));
+    }
+  }
+  logsCard.appendChild(logsBody);
+  section.appendChild(logsCard);
+
+  main.appendChild(section);
+  if (_scrollY > 0) window.scrollTo(0, _scrollY);
+}
+
+// Small metric block used in the Mission Control hero + usage panel
+function controlMetric(label, value, accent) {
+  return el('div', { cls: 'ctrl-metric' },
+    el('div', { cls: 'ctrl-metric-value', style: `color:${accent}` }, String(value)),
+    el('div', { cls: 'ctrl-metric-label' }, label)
+  );
+}
+
 // ---------------------------------------------------------------------------
 // Boot
 // ---------------------------------------------------------------------------