npm - thevoidforge - Versions diffs - 21.0.0 → 21.0.1 - Mend

thevoidforge 21.0.0 → 21.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/dist/wizard/danger-room.config.json +5 -0
package/dist/wizard/ui/app.js +1231 -0
package/dist/wizard/ui/danger-room-prophecy.js +217 -0
package/dist/wizard/ui/danger-room.html +626 -0
package/dist/wizard/ui/danger-room.js +880 -0
package/dist/wizard/ui/deploy.html +177 -0
package/dist/wizard/ui/deploy.js +582 -0
package/dist/wizard/ui/favicon.svg +11 -0
package/dist/wizard/ui/index.html +394 -0
package/dist/wizard/ui/lobby.html +228 -0
package/dist/wizard/ui/lobby.js +783 -0
package/dist/wizard/ui/login.html +110 -0
package/dist/wizard/ui/login.js +184 -0
package/dist/wizard/ui/rollback.js +107 -0
package/dist/wizard/ui/styles.css +1029 -0
package/dist/wizard/ui/tower.html +171 -0
package/dist/wizard/ui/tower.js +444 -0
package/dist/wizard/ui/war-room-prophecy.js +217 -0
package/dist/wizard/ui/war-room.html +219 -0
package/dist/wizard/ui/war-room.js +285 -0
package/package.json +2 -2

package/dist/wizard/ui/danger-room.html ADDED Viewed

@@ -0,0 +1,626 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Danger Room — VoidForge</title>
+  <link rel="icon" type="image/svg+xml" href="favicon.svg">
+  <link rel="stylesheet" href="styles.css">
+  <style>
+    body { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--text); }
+    /* Danger Room Layout — 5-row grid: header, tab-bar, banner, main+sidebar, ticker */
+    .danger-room { display: grid; grid-template-columns: 1fr 280px; grid-template-rows: auto auto auto 1fr auto; height: 100vh; }
+    .danger-room-header { grid-column: 1 / -1; grid-row: 1; padding: 12px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
+    .danger-room-title { font-size: 16px; font-weight: 700; color: var(--accent); }
+    .danger-room-version { font-size: 12px; color: var(--text-dim); }
+    .danger-room-nav { display: flex; gap: 8px; }
+    .danger-room-nav a { color: var(--text-dim); text-decoration: none; font-size: 13px; padding: 4px 10px; border-radius: 4px; }
+    .danger-room-nav a:hover { background: var(--bg-card); color: var(--text); }
+    /* Main Panel Area */
+    .main-panels { grid-column: 1; grid-row: 4; padding: 16px; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; }
+    /* Sidebar */
+    .sidebar { grid-column: 2; grid-row: 4; border-left: 1px solid var(--border); padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
+    /* Panel Card */
+    .panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
+    .panel-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); margin-bottom: 8px; }
+    .panel-full { grid-column: 1 / -1; }
+    /* Campaign Timeline */
+    .timeline { display: flex; gap: 4px; flex-wrap: wrap; }
+    .timeline-item { width: 28px; height: 28px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; }
+    .timeline-complete { background: #065f46; color: var(--success); }
+    .timeline-active { background: #713f12; color: var(--warning); animation: pulse 2s infinite; }
+    .timeline-pending { background: var(--bg); color: var(--text-dim); border: 1px solid var(--border); }
+    .timeline-blocked { background: #7f1d1d; color: #fca5a5; }
+    @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
+    /* Phase Pipeline */
+    .pipeline { display: flex; flex-direction: column; gap: 3px; }
+    .pipeline-phase { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 3px 0; }
+    .pipeline-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
+    .pipeline-dot.complete { background: var(--success); }
+    .pipeline-dot.active { background: var(--warning); animation: pulse 2s infinite; }
+    .pipeline-dot.pending { background: var(--border); }
+    .pipeline-dot.skipped { background: var(--text-dim); opacity: 0.5; }
+    .pipeline-label { color: var(--text-dim); }
+    /* Finding Scoreboard */
+    .scoreboard { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
+    .score-item { text-align: center; padding: 8px 4px; border-radius: 4px; }
+    .score-critical { background: #7f1d1d; }
+    .score-high { background: #713f12; }
+    .score-medium { background: #1e3a5f; }
+    .score-low { background: #1a2e1a; }
+    .score-count { font-size: 20px; font-weight: 700; }
+    .score-label { font-size: 9px; text-transform: uppercase; color: var(--text-dim); margin-top: 2px; }
+    /* Context Gauge */
+    .gauge { position: relative; width: 80px; height: 80px; margin: 0 auto; }
+    .gauge svg { width: 80px; height: 80px; transform: rotate(-90deg); }
+    .gauge-track { fill: none; stroke: var(--border); stroke-width: 6; }
+    .gauge-fill { fill: none; stroke: var(--success); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 0.5s, stroke 0.5s; }
+    .gauge-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }
+    /* Agent Activity Ticker */
+    .ticker { grid-column: 1 / -1; grid-row: 5; border-top: 1px solid var(--border); padding: 6px 20px; font-size: 11px; color: var(--text-dim); overflow: hidden; white-space: nowrap; }
+    .ticker-item { display: inline; margin-right: 24px; }
+    .ticker-agent { color: var(--accent); font-weight: 600; }
+    /* ── Data Tier Sections (v13.0 Information Architecture) ── */
+    .tier-section { grid-column: 1 / -1; margin-top: 4px; }
+    .tier-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); opacity: 0.85; padding: 4px 0; border-bottom: 1px solid var(--border); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
+    .tier-label::before { content: ''; width: 8px; height: 8px; flex-shrink: 0; }
+    .tier-live .tier-label::before { background: var(--success); border-radius: 50%; animation: pulse 2s infinite; }
+    .tier-campaign .tier-label::before { background: var(--warning); border-radius: 2px; } /* square = campaign */
+    .tier-system .tier-label::before { opacity: 0.5; border-radius: 50%; border: 1px solid var(--text-dim); background: none; } /* hollow circle = system */
+    .tier-live .tier-content { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
+    .tier-campaign .tier-content { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+    .tier-system .tier-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
+    .tier-system .panel { padding: 10px; }
+    .tier-system .panel-title { font-size: 9px; margin-bottom: 4px; }
+    .tier-system .score-count { font-size: 12px; }
+    /* Empty state with guidance */
+    .empty-guidance { font-size: 11px; color: var(--text-dim); margin-top: 4px; }
+    .empty-guidance code { background: var(--bg); padding: 2px 5px; border-radius: 3px; font-size: 10px; }
+    /* Deploy Status */
+    .deploy-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
+    .deploy-dot { width: 8px; height: 8px; border-radius: 50%; }
+    .deploy-dot.live { background: var(--success); }
+    .deploy-dot.down { background: var(--error); }
+    .deploy-dot.unknown { background: var(--border); }
+    /* Version Badge */
+    .version-badge { font-size: 13px; font-weight: 600; color: var(--accent); }
+    .branch-status { font-size: 11px; color: var(--text-dim); margin-top: 4px; }
+    /* Focus management */
+    a:focus-visible, .panel:focus-visible, .tab-panel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
+    /* ── Tab Navigation (§9.20.2) ── */
+    .tab-bar { display: none; gap: 2px; padding: 0 20px; border-bottom: 1px solid var(--border); background: var(--bg); grid-column: 1 / -1; grid-row: 2; }
+    .tab-bar.active { display: flex; }
+    .tab-bar [role="tab"] {
+      padding: 8px 16px; font-size: 12px; font-weight: 600; color: var(--text-dim);
+      background: none; border: none; border-bottom: 2px solid transparent;
+      cursor: pointer; text-transform: uppercase; letter-spacing: 0.05em;
+    }
+    .tab-bar [role="tab"]:hover { color: var(--text); }
+    .tab-bar [role="tab"][aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
+    .tab-bar [role="tab"]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+    .tab-panel { display: none; }
+    .tab-panel.active { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; }
+    /* Financial Color Tokens — defined in styles.css :root (§9.15.3) */
+    /* ── Growth Tab Panels ── */
+    .kpi-row { display: flex; gap: 12px; grid-column: 1 / -1; }
+    .kpi-card { flex: 1; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; text-align: center; }
+    .kpi-value { font-size: 22px; font-weight: 700; }
+    .kpi-label { font-size: 10px; text-transform: uppercase; color: var(--text-dim); margin-top: 4px; }
+    .kpi-trend { font-size: 11px; margin-top: 2px; }
+    .kpi-trend.up { color: var(--fin-positive); }
+    .kpi-trend.down { color: var(--fin-negative); }
+    .kpi-trend.flat { color: var(--fin-neutral); }
+    .empty-state { grid-column: 1 / -1; text-align: center; padding: 48px 24px; color: var(--text-dim); font-size: 14px; }
+    .empty-state-action { margin-top: 12px; color: var(--accent); text-decoration: none; font-size: 13px; }
+    /* ── Freeze Button (§9.20.8) ── */
+    .freeze-btn { display: none; padding: 6px 14px; font-size: 12px; font-weight: 600; border-radius: 4px; cursor: pointer; }
+    .freeze-btn.visible { display: inline-flex; align-items: center; gap: 6px; }
+    .freeze-btn:not(.frozen) { background: none; border: 1px solid var(--fin-negative); color: var(--fin-negative); }
+    .freeze-btn:not(.frozen):hover { background: var(--fin-negative); color: white; }
+    .freeze-btn.frozen { background: var(--fin-frozen); border: 1px solid var(--fin-frozen); color: white; }
+    .freeze-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+    /* ── Reconnection Banner (§9.19.9) ── */
+    .reconnect-banner { display: none; grid-column: 1 / -1; grid-row: 3; padding: 8px 20px; font-size: 12px; text-align: center; }
+    .reconnect-banner.reconnecting { display: block; background: var(--fin-warning); color: #000; }
+    .reconnect-banner.failed { display: block; background: var(--fin-negative); color: white; }
+    /* ── System Status Summary ── */
+    .system-status { font-size: 11px; color: var(--text-dim); padding: 4px 0; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
+    /* ── Responsive ── */
+    @media (max-width: 700px) {
+      .danger-room { grid-template-columns: 1fr; grid-template-rows: auto auto auto 1fr auto auto; }
+      .danger-room-header { grid-column: 1; grid-row: 1; }
+      .tab-bar { grid-column: 1; grid-row: 2; }
+      .reconnect-banner { grid-column: 1; grid-row: 3; }
+      .main-panels { grid-column: 1; grid-row: 4; grid-template-columns: 1fr; }
+      .sidebar { grid-column: 1; grid-row: 5; border-left: none; border-top: 1px solid var(--border); }
+      .ticker { grid-column: 1; grid-row: 6; }
+      .tab-panel.active { grid-template-columns: 1fr; }
+      .tier-live .tier-content { grid-template-columns: 1fr; }
+      .tier-campaign .tier-content { grid-template-columns: 1fr; }
+      .tier-system .tier-content { grid-template-columns: 1fr 1fr; }
+      .kpi-row { flex-direction: column; }
+      .tab-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; }
+      /* Mobile freeze FAB (§9.20.8) */
+      .freeze-fab { display: none; position: fixed; bottom: max(16px, env(safe-area-inset-bottom, 16px)); right: 16px; width: 56px; height: 56px; border-radius: 50%; font-size: 20px; z-index: 100; border: none; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
+      .freeze-fab.visible { display: flex; align-items: center; justify-content: center; }
+      .freeze-fab:not(.frozen) { background: var(--fin-negative); color: white; }
+      .freeze-fab.frozen { background: var(--fin-frozen); color: white; }
+    }
+    @media (min-width: 701px) { .freeze-fab { display: none !important; } }
+    /* Reduced motion */
+    @media (prefers-reduced-motion: reduce) {
+      .timeline-active, .pipeline-dot.active { animation: none; }
+    }
+  </style>
+</head>
+<body>
+  <a href="#danger-room-grid" class="skip-nav">Skip to main content</a>
+  <noscript><div class="noscript-msg">VoidForge requires JavaScript to run.</div></noscript>
+  <div class="danger-room">
+    <!-- Header -->
+    <header class="danger-room-header">
+      <div>
+        <div class="danger-room-title">Danger Room</div>
+        <div class="danger-room-version" id="version-display">VoidForge v—</div>
+      </div>
+      <div style="display:flex;align-items:center;gap:12px;">
+        <span id="header-context" style="font-size:11px;font-weight:600;color:var(--text-dim);padding:2px 8px;border:1px solid var(--border);border-radius:4px;" title="Context usage (always visible)" aria-label="Context usage">—%</span>
+        <button class="freeze-btn" id="freeze-btn" role="button"
+          aria-label="Emergency freeze: pause all automated spending" aria-pressed="false">❄ Freeze Spend</button>
+        <nav class="danger-room-nav" aria-label="Danger Room navigation">
+          <a href="lobby.html">Lobby</a>
+          <a href="danger-room.html" aria-current="page" style="background:var(--bg-card);color:var(--text);">Danger Room</a>
+        </nav>
+      </div>
+    </header>
+    <!-- Tab Bar (§9.20.2 — shown when Cultivation is installed) -->
+    <div class="tab-bar" id="tab-bar" role="tablist" aria-label="Danger Room tabs">
+      <button role="tab" id="tab-ops" aria-selected="true" aria-controls="panel-ops" data-tab="ops">Ops</button>
+      <button role="tab" id="tab-growth" aria-selected="false" aria-controls="panel-growth" data-tab="growth">Growth</button>
+      <button role="tab" id="tab-campaigns" aria-selected="false" aria-controls="panel-campaigns" data-tab="campaigns">Campaigns</button>
+      <button role="tab" id="tab-treasury" aria-selected="false" aria-controls="panel-treasury" data-tab="treasury">Treasury</button>
+      <button role="tab" id="tab-heartbeat" aria-selected="false" aria-controls="panel-heartbeat" data-tab="heartbeat">Heartbeat</button>
+      <button role="tab" id="tab-current" aria-selected="false" aria-controls="panel-current" data-tab="current">Deep Current</button>
+    </div>
+    <!-- Reconnection Banner (§9.19.9) -->
+    <div class="reconnect-banner" id="reconnect-banner" role="status" aria-live="polite"></div>
+    <!-- Mobile Freeze FAB (§9.20.8) -->
+    <button class="freeze-fab" id="freeze-fab" aria-label="Emergency freeze: pause all automated spending">❄</button>
+    <!-- Main Panels -->
+    <main class="main-panels" id="danger-room-grid">
+      <!-- ═══ OPS TAB ═══ -->
+      <div class="tab-panel active" id="panel-ops" role="tabpanel" aria-labelledby="tab-ops" tabindex="0">
+      <!-- ═══ TIER 1: LIVE FEED (real-time, changes per-second) ═══ -->
+      <div class="tier-section tier-live" role="region" aria-label="Live Feed">
+        <div class="tier-label">Live Feed</div>
+        <div class="tier-content">
+          <!-- Context Gauge (inline — moved from sidebar for prominence) -->
+          <div class="panel" role="region" aria-label="Context Usage">
+            <div class="gauge" id="context-gauge" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-label="Context window usage">
+              <svg viewBox="0 0 36 36"><circle class="gauge-track" cx="18" cy="18" r="14" /><circle class="gauge-fill" id="gauge-fill" cx="18" cy="18" r="14" stroke-dasharray="88" stroke-dashoffset="88" /></svg>
+              <div class="gauge-text" id="gauge-text">&mdash;%</div>
+            </div>
+            <div style="text-align:center;margin-top:4px;font-size:10px;color:var(--text-dim);" id="context-model"></div>
+            <div class="empty-guidance" id="context-empty" style="text-align:center;">Add <code>statusLine</code> to <code>~/.claude/settings.json</code></div>
+          </div>
+          <!-- Agent Activity (live ticker — was at bottom, now prominent) -->
+          <div class="panel" role="region" aria-label="Agent Activity" aria-live="polite">
+            <h2 class="panel-title">Agent Activity</h2>
+            <div id="agent-ticker-panel" style="font-size:12px;min-height:60px;">
+              <span class="ticker-item"><span class="ticker-agent">Sisko</span> standing by...</span>
+              <div class="empty-guidance">Run <code>/assemble</code> or <code>/campaign</code> to see live agent activity</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- ═══ TIER 2: CAMPAIGN STATE (changes per-mission, ~30min cycles) ═══ -->
+      <div class="tier-section tier-campaign" role="region" aria-label="Campaign State">
+        <div class="tier-label">Campaign State</div>
+        <div class="tier-content">
+          <!-- Campaign Timeline -->
+          <div class="panel panel-full" role="region" aria-label="Campaign Timeline">
+            <h2 class="panel-title" id="title-timeline">Campaign Timeline</h2>
+            <div class="timeline" id="campaign-timeline" aria-labelledby="title-timeline">
+              <div class="timeline-item timeline-pending">—</div>
+            </div>
+          </div>
+          <!-- Phase Pipeline -->
+          <div class="panel" role="region" aria-label="Phase Pipeline">
+            <h2 class="panel-title" id="title-pipeline">Phase Pipeline</h2>
+            <div class="pipeline" id="phase-pipeline">
+              <div class="pipeline-phase"><span class="pipeline-dot pending"></span><span class="pipeline-label">No active build</span></div>
+            </div>
+          </div>
+          <!-- Finding Scoreboard -->
+          <div class="panel" role="region" aria-label="Finding Scoreboard">
+            <h2 class="panel-title" id="title-findings">Open Findings</h2>
+            <div class="scoreboard" id="finding-scoreboard" aria-labelledby="title-findings" role="group">
+              <div class="score-item score-critical"><div class="score-count" id="score-critical">0</div><div class="score-label">Critical</div></div>
+              <div class="score-item score-high"><div class="score-count" id="score-high">0</div><div class="score-label">High</div></div>
+              <div class="score-item score-medium"><div class="score-count" id="score-medium">0</div><div class="score-label">Medium</div></div>
+              <div class="score-item score-low"><div class="score-count" id="score-low">0</div><div class="score-label">Low</div></div>
+            </div>
+          </div>
+          <!-- PRD Coverage -->
+          <div class="panel panel-full" role="region" aria-label="PRD Coverage">
+            <h2 class="panel-title" id="title-prd">PRD Coverage</h2>
+            <div id="prd-coverage" style="font-size:13px;color:var(--text-dim);">No campaign active</div>
+          </div>
+          <!-- Prophecy Graph -->
+          <div class="panel panel-full" role="region" aria-label="Prophecy Graph">
+            <h2 class="panel-title" id="title-prophecy">Prophecy Graph</h2>
+            <div id="prophecy-graph" style="min-height:100px;"></div>
+            <div id="prophecy-detail" style="font-size:12px;margin-top:6px;min-height:40px;color:var(--text-dim);"></div>
+          </div>
+        </div>
+      </div>
+      <!-- ═══ TIER 3: SYSTEM STATUS (changes rarely, background monitoring) ═══ -->
+      <div class="tier-section tier-system" role="region" aria-label="System Status">
+        <div class="tier-label">System Status</div>
+        <div class="tier-content">
+          <div class="panel" role="region" aria-label="Version">
+            <h2 class="panel-title">Version</h2>
+            <div class="version-badge" id="version-badge">—</div>
+            <div class="branch-status" id="branch-status">—</div>
+          </div>
+          <div class="panel" role="region" aria-label="Deploy">
+            <h2 class="panel-title">Deploy</h2>
+            <div class="deploy-badge" id="deploy-status"><span class="deploy-dot unknown"></span><span>No deploy data</span></div>
+          </div>
+          <div class="panel" role="region" aria-label="Tests">
+            <h2 class="panel-title">Tests</h2>
+            <div id="test-status" style="font-size:12px;color:var(--text-dim);">No test data</div>
+          </div>
+          <div class="panel" role="region" aria-label="Experiments">
+            <h2 class="panel-title" id="title-experiments">Experiments</h2>
+            <div id="experiment-dashboard" aria-labelledby="title-experiments" style="font-size:12px;color:var(--text-dim);">No experiments</div>
+          </div>
+        </div>
+      </div>
+      </div><!-- /panel-ops -->
+      <!-- ═══ GROWTH TAB (§9.10 — read-only, placeholder data) ═══ -->
+      <div class="tab-panel" id="panel-growth" role="tabpanel" aria-labelledby="tab-growth" tabindex="0">
+        <!-- System Status Summary (§9.20.2) -->
+        <div class="system-status" id="growth-system-status" aria-live="polite" style="grid-column:1/-1;">
+          Cultivation: not installed — run <code>/cultivation install</code> to begin
+        </div>
+        <!-- Empty State (§9.15.7) -->
+        <div class="empty-state" id="growth-empty-state">
+          <div>No growth data yet.</div>
+          <div style="margin-top:8px;">Run <code>/grow</code> to start your first growth campaign.</div>
+          <a href="https://github.com/tmcleod3/voidforge#grow" class="empty-state-action">Learn about /grow →</a>
+        </div>
+        <!-- KPI Cards (hidden until data exists) -->
+        <div class="kpi-row" id="growth-kpi-row" style="display:none;">
+          <div class="kpi-card">
+            <div class="kpi-value" id="kpi-revenue">$0</div>
+            <div class="kpi-label">Revenue</div>
+            <div class="kpi-trend flat" id="kpi-revenue-trend">— MoM</div>
+          </div>
+          <div class="kpi-card">
+            <div class="kpi-value" id="kpi-spend">$0</div>
+            <div class="kpi-label">Spend</div>
+            <div class="kpi-trend flat" id="kpi-spend-trend">— MoM</div>
+          </div>
+          <div class="kpi-card">
+            <div class="kpi-value" id="kpi-net">$0</div>
+            <div class="kpi-label">Net</div>
+            <div class="kpi-trend flat" id="kpi-roas">0.0x</div>
+          </div>
+        </div>
+        <!-- Funding Indicators (v19.0 — hidden until stablecoin data exists) -->
+        <div class="kpi-row" id="growth-funding-row" style="display:none;">
+          <div class="kpi-card">
+            <div class="kpi-value" id="growth-runway-badge" style="font-size:18px;">&mdash;</div>
+            <div class="kpi-label">Runway</div>
+          </div>
+          <div class="kpi-card">
+            <div class="kpi-value" id="growth-funding-risk" style="font-size:14px;">&mdash;</div>
+            <div class="kpi-label">Funding Risk</div>
+          </div>
+          <div class="kpi-card">
+            <div class="kpi-value" id="growth-next-event" style="font-size:12px;font-weight:400;">&mdash;</div>
+            <div class="kpi-label">Next Event</div>
+          </div>
+        </div>
+        <!-- ROAS by Platform (placeholder) -->
+        <div class="panel panel-full" id="growth-roas-panel" style="display:none;" role="region" aria-label="ROAS by Platform">
+          <h2 class="panel-title">ROAS by Platform</h2>
+          <div style="font-size:13px;color:var(--text-dim);">No platform data</div>
+        </div>
+        <!-- Traffic Sources (placeholder) -->
+        <div class="panel" id="growth-traffic-panel" style="display:none;" role="region" aria-label="Traffic Sources">
+          <h2 class="panel-title">Traffic Sources</h2>
+          <div style="font-size:13px;color:var(--text-dim);">No traffic data</div>
+        </div>
+        <!-- Conversion Funnel (placeholder) -->
+        <div class="panel" id="growth-funnel-panel" style="display:none;" role="region" aria-label="Conversion Funnel">
+          <h2 class="panel-title">Conversion Funnel</h2>
+          <div style="font-size:13px;color:var(--text-dim);">No conversion data</div>
+        </div>
+      </div><!-- /panel-growth -->
+      <!-- ═══ AD CAMPAIGNS TAB (§9.10, §9.20.2 — v11.2) ═══ -->
+      <div class="tab-panel" id="panel-campaigns" role="tabpanel" aria-labelledby="tab-campaigns" tabindex="0">
+        <!-- Empty State -->
+        <div class="empty-state" id="campaigns-empty-state">
+          <div>No ad campaigns yet.</div>
+          <div style="margin-top:8px;">Run <code>/grow --distribute</code> to create campaigns.</div>
+        </div>
+        <!-- Campaign Table (hidden until data — becomes card layout on mobile §9.15.6) -->
+        <div class="panel panel-full" id="campaigns-table-panel" style="display:none;" role="region" aria-label="Ad Campaigns">
+          <h2 class="panel-title">Active Campaigns</h2>
+          <table style="width:100%;font-size:12px;border-collapse:collapse;" aria-label="Ad campaign performance">
+            <thead>
+              <tr style="text-align:left;color:var(--text-dim);border-bottom:1px solid var(--border);">
+                <th scope="col" style="padding:6px 8px;">Platform</th>
+                <th scope="col" style="padding:6px 8px;">Campaign</th>
+                <th scope="col" style="padding:6px 8px;">Spend</th>
+                <th scope="col" style="padding:6px 8px;">Conv</th>
+                <th scope="col" style="padding:6px 8px;" aria-sort="none">ROAS</th>
+                <th scope="col" style="padding:6px 8px;">Status</th>
+              </tr>
+            </thead>
+            <tbody id="campaigns-tbody">
+              <tr><td colspan="6" style="padding:12px;color:var(--text-dim);text-align:center;">Loading...</td></tr>
+            </tbody>
+          </table>
+        </div>
+        <!-- A/B Test Groups (§9.20.3) -->
+        <div class="panel" id="campaigns-ab-panel" style="display:none;" role="region" aria-label="A/B Test Groups">
+          <h2 class="panel-title">A/B Tests</h2>
+          <div id="campaigns-ab-tests" style="font-size:13px;color:var(--text-dim);">No active tests</div>
+        </div>
+        <!-- Agent Recommendations (§9.20.6) -->
+        <div class="panel" id="campaigns-recommendations-panel" style="display:none;" role="region" aria-label="Agent Recommendations">
+          <h2 class="panel-title">Recommendations</h2>
+          <div id="campaigns-recommendations" style="font-size:13px;color:var(--text-dim);">No recommendations</div>
+        </div>
+      </div><!-- /panel-campaigns -->
+      <!-- ═══ TREASURY TAB (§9.10 — financial summary) ═══ -->
+      <div class="tab-panel" id="panel-treasury" role="tabpanel" aria-labelledby="tab-treasury" tabindex="0">
+        <!-- Empty State -->
+        <div class="empty-state" id="treasury-empty-state">
+          <div>No treasury data yet.</div>
+          <div style="margin-top:8px;">Run <code>/treasury setup</code> to connect revenue sources.</div>
+        </div>
+        <!-- Stablecoin Funding Rail (v19.0 — hidden until configured) -->
+        <div class="panel panel-full" id="treasury-funding-panel" style="display:none;" role="region" aria-label="Stablecoin Funding Rail">
+          <h2 class="panel-title">Funding Rail</h2>
+          <div id="treasury-funding-content" style="font-size:13px;"></div>
+        </div>
+        <!-- Financial Summary (hidden until data) -->
+        <div class="kpi-row" id="treasury-kpi-row" style="display:none;">
+          <div class="kpi-card">
+            <div class="kpi-value" id="treasury-revenue">$0</div>
+            <div class="kpi-label">Revenue</div>
+          </div>
+          <div class="kpi-card">
+            <div class="kpi-value" id="treasury-spend">$0</div>
+            <div class="kpi-label">Spend</div>
+          </div>
+          <div class="kpi-card">
+            <div class="kpi-value" id="treasury-net">$0</div>
+            <div class="kpi-label">Net</div>
+          </div>
+          <div class="kpi-card">
+            <div class="kpi-value" id="treasury-roas">0.0x</div>
+            <div class="kpi-label">ROAS</div>
+          </div>
+        </div>
+        <!-- Budget Utilization -->
+        <div class="panel panel-full" id="treasury-budget-panel" style="display:none;" role="region" aria-label="Budget Utilization">
+          <h2 class="panel-title">Budget</h2>
+          <div style="background:var(--bg);border-radius:4px;height:24px;overflow:hidden;position:relative;">
+            <div id="treasury-budget-bar" style="height:100%;background:var(--fin-positive);width:0%;transition:width 0.5s;" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" aria-valuetext="0% of budget used"></div>
+          </div>
+          <div style="display:flex;justify-content:space-between;font-size:11px;color:var(--text-dim);margin-top:4px;">
+            <span id="treasury-budget-used">$0 used</span>
+            <span id="treasury-budget-total">$0 total</span>
+          </div>
+        </div>
+        <!-- Platform Connections -->
+        <div class="panel" id="treasury-connections-panel" style="display:none;" role="region" aria-label="Platform Connections">
+          <h2 class="panel-title">Connections</h2>
+          <div id="treasury-connections" style="font-size:13px;"></div>
+        </div>
+        <!-- Reconciliation Status -->
+        <div class="panel" id="treasury-reconciliation-panel" style="display:none;" role="region" aria-label="Reconciliation">
+          <h2 class="panel-title">Reconciliation</h2>
+          <div id="treasury-reconciliation" style="font-size:13px;color:var(--text-dim);">No reconciliation data</div>
+        </div>
+      </div><!-- /panel-treasury -->
+      <!-- ═══ HEARTBEAT TAB (§9.10, §9.20.2 — v11.3) ═══ -->
+      <div class="tab-panel" id="panel-heartbeat" role="tabpanel" aria-labelledby="tab-heartbeat" tabindex="0">
+        <!-- Empty State -->
+        <div class="empty-state" id="heartbeat-empty-state">
+          <div>Heartbeat daemon not running.</div>
+          <div style="margin-top:8px;">Run <code>voidforge heartbeat start</code> to begin monitoring.</div>
+        </div>
+        <!-- Daemon Status (hidden until data) -->
+        <div class="panel panel-full" id="heartbeat-status-panel" style="display:none;" role="region" aria-label="Daemon Status" aria-live="polite">
+          <h2 class="panel-title">Status</h2>
+          <div style="display:flex;gap:24px;font-size:13px;">
+            <div><span style="color:var(--text-dim);">State:</span> <span id="hb-state">—</span></div>
+            <div><span style="color:var(--text-dim);">PID:</span> <span id="hb-pid">—</span></div>
+            <div><span style="color:var(--text-dim);">Uptime:</span> <span id="hb-uptime">—</span></div>
+            <div><span style="color:var(--text-dim);">Last beat:</span> <span id="hb-last-beat">—</span></div>
+          </div>
+        </div>
+        <!-- Token Health -->
+        <div class="panel" id="heartbeat-tokens-panel" style="display:none;" role="region" aria-label="Token Health">
+          <h2 class="panel-title">Token Health</h2>
+          <div id="hb-token-list" style="font-size:13px;">
+            <!-- Dynamically populated: platform + status + expiry -->
+          </div>
+        </div>
+        <!-- Scheduled Jobs -->
+        <div class="panel" id="heartbeat-jobs-panel" style="display:none;" role="region" aria-label="Scheduled Jobs">
+          <h2 class="panel-title">Next Scheduled Jobs</h2>
+          <div id="hb-jobs-list" style="font-size:13px;color:var(--text-dim);">
+            <!-- Dynamically populated: job name + next run time -->
+          </div>
+        </div>
+        <!-- Anomaly Alerts (aria-live="assertive" for financial alerts §9.15.8) -->
+        <div class="panel panel-full" id="heartbeat-alerts-panel" style="display:none;" role="region" aria-label="Alerts" aria-live="assertive">
+          <h2 class="panel-title">Alerts</h2>
+          <div id="hb-alerts" style="font-size:13px;">No alerts</div>
+        </div>
+        <!-- Funding Operations (v19.0 — provider sync, pending ops, reconciliation) -->
+        <div class="panel panel-full" id="heartbeat-funding-ops-panel" style="display:none;" role="region" aria-label="Funding Operations">
+          <h2 class="panel-title">Funding Operations</h2>
+          <div id="hb-funding-ops" style="font-size:13px;color:var(--text-dim);">No funding operations data</div>
+        </div>
+      </div><!-- /panel-heartbeat -->
+      <!-- ═══ DEEP CURRENT TAB (v12.1 — Tuvok's advisory) ═══ -->
+      <div class="tab-panel" id="panel-current" role="tabpanel" aria-labelledby="tab-current" tabindex="0">
+        <!-- Empty State -->
+        <div class="empty-state" id="current-empty-state">
+          <div>Deep Current not initialized.</div>
+          <div style="margin-top:8px;">Run <code>/current --scan</code> to analyze your project, or <code>/current --intake</code> for a new project.</div>
+        </div>
+        <!-- Situation Model (5-dimension radar display) -->
+        <div class="panel panel-full" id="current-situation-panel" style="display:none;" role="region" aria-label="Situation Model">
+          <h2 class="panel-title">Situation Model</h2>
+          <div style="display:flex;gap:16px;flex-wrap:wrap;" id="current-dimensions">
+            <div class="kpi-card" style="flex:1;min-width:120px;">
+              <div class="kpi-value" id="dim-feature">—</div>
+              <div class="kpi-label">Feature</div>
+            </div>
+            <div class="kpi-card" style="flex:1;min-width:120px;">
+              <div class="kpi-value" id="dim-quality">—</div>
+              <div class="kpi-label">Quality</div>
+            </div>
+            <div class="kpi-card" style="flex:1;min-width:120px;">
+              <div class="kpi-value" id="dim-performance">—</div>
+              <div class="kpi-label">Performance</div>
+            </div>
+            <div class="kpi-card" style="flex:1;min-width:120px;">
+              <div class="kpi-value" id="dim-growth">—</div>
+              <div class="kpi-label">Growth</div>
+            </div>
+            <div class="kpi-card" style="flex:1;min-width:120px;">
+              <div class="kpi-value" id="dim-revenue">—</div>
+              <div class="kpi-label">Revenue</div>
+            </div>
+          </div>
+        </div>
+        <!-- Active Proposal -->
+        <div class="panel panel-full" id="current-proposal-panel" style="display:none;" role="region" aria-label="Campaign Recommendation">
+          <h2 class="panel-title">Tuvok Recommends</h2>
+          <div id="current-proposal-name" style="font-size:16px;font-weight:700;margin-bottom:8px;"></div>
+          <div id="current-proposal-case" style="font-size:13px;color:var(--text-dim);margin-bottom:12px;"></div>
+          <div id="current-proposal-impact" style="font-size:13px;color:var(--fin-positive);margin-bottom:12px;"></div>
+          <div style="display:flex;gap:8px;">
+            <button style="padding:6px 16px;background:var(--accent);color:white;border:none;border-radius:4px;cursor:pointer;font-size:12px;" aria-label="Launch recommended campaign">Launch Campaign</button>
+            <button style="padding:6px 16px;background:none;border:1px solid var(--border);color:var(--text-dim);border-radius:4px;cursor:pointer;font-size:12px;" aria-label="Dismiss recommendation">Dismiss</button>
+          </div>
+        </div>
+        <!-- Prediction History -->
+        <div class="panel" id="current-predictions-panel" style="display:none;" role="region" aria-label="Prediction Accuracy">
+          <h2 class="panel-title">Prediction Accuracy</h2>
+          <div id="current-predictions" style="font-size:13px;color:var(--text-dim);">No campaigns with tracked predictions yet.</div>
+        </div>
+        <!-- Autonomy Status -->
+        <div class="panel" id="current-autonomy-panel" style="display:none;" role="region" aria-label="Autonomy Status">
+          <h2 class="panel-title">Autonomy</h2>
+          <div style="font-size:13px;">
+            <span style="color:var(--text-dim);">Tier:</span> <span id="current-tier">1 (Advisor)</span><br>
+            <span style="color:var(--text-dim);">Campaigns run:</span> <span id="current-campaign-count">0</span><br>
+            <span style="color:var(--text-dim);">Last scan:</span> <span id="current-last-scan">Never</span>
+          </div>
+        </div>
+      </div><!-- /panel-current -->
+    </main>
+    <!-- Sidebar -->
+    <aside class="sidebar">
+      <!-- Session Cost (compact — data from Status Line bridge) -->
+      <div class="panel">
+        <h2 class="panel-title">Session Cost</h2>
+        <div id="cost-display" style="font-size:18px;font-weight:700;color:var(--text);">—</div>
+        <div class="empty-guidance" id="cost-empty">Wired via Status Line bridge</div>
+      </div>
+      <!-- Quick Links -->
+      <div class="panel">
+        <h2 class="panel-title">Quick Actions</h2>
+        <div style="font-size:11px;color:var(--text-dim);line-height:1.8;">
+          <code>/campaign --blitz</code> — Build everything<br>
+          <code>/gauntlet</code> — Full review<br>
+          <code>/debrief --inbox</code> — Triage reports
+        </div>
+      </div>
+    </aside>
+    <!-- Agent Activity Ticker (scrolling footer — mirrors Tier 1 panel) -->
+    <footer class="ticker" id="agent-ticker" aria-live="polite" aria-label="Agent activity feed">
+      <span class="ticker-item"><span class="ticker-agent">Sisko</span> standing by...</span>
+    </footer>
+  </div>
+  <script src="danger-room-prophecy.js"></script>
+  <script src="danger-room.js"></script>
+</body>
+</html>