@miller-tech/uap 1.133.2 → 1.135.1

package/web/dashboard.html

@@ -8,391 +8,9 @@
       rel="icon"
       href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>&#x26A1;</text></svg>"
     />
-    <link rel="stylesheet" href="/vendor/uPlot.min.css">
+    <link rel="stylesheet" href="/vendor/uPlot.min.css" />
+    <link rel="stylesheet" href="/dash/styles.css" />
     <script src="/vendor/uPlot.iife.min.js"></script>
-    <style>
-      :root {
-        --bg: #0d1117;
-        --bg2: #161b22;
-        --bg3: #21262d;
-        --fg: #c9d1d9;
-        --fg2: #8b949e;
-        --fg3: #484f58;
-        --cyan: #58a6ff;
-        --green: #3fb950;
-        --yellow: #d29922;
-        --red: #f85149;
-        --purple: #bc8cff;
-        --orange: #d18616;
-        --border: #30363d;
-        --radius: 8px;
-      }
-      * { margin: 0; padding: 0; box-sizing: border-box; }
-      body {
-        font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
-        background: var(--bg);
-        color: var(--fg);
-        font-size: 13px;
-        line-height: 1.5;
-      }
-      .container { max-width: 1600px; margin: 0 auto; padding: 16px; }
-
-      /* ── Header ── */
-      header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 12px 0;
-        border-bottom: 1px solid var(--border);
-        margin-bottom: 16px;
-        flex-wrap: wrap;
-        gap: 8px;
-      }
-      header h1 { font-size: 18px; color: var(--cyan); font-weight: 600; }
-      .header-center {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        font-size: 11px;
-        color: var(--fg3);
-      }
-      .sys-badge {
-        padding: 2px 8px;
-        border-radius: 4px;
-        background: var(--bg3);
-        border: 1px solid var(--border);
-        font-size: 11px;
-      }
-      .sys-badge .label { color: var(--fg3); }
-      .sys-badge .val { color: var(--fg); font-weight: 500; }
-      .sys-badge .val.cyan { color: var(--cyan); }
-      .sys-badge .val.green { color: var(--green); }
-      .sys-badge .val.yellow { color: var(--yellow); }
-      .header-right {
-        display: flex;
-        align-items: center;
-        gap: 12px;
-      }
-      .header-ts { color: var(--fg3); font-size: 11px; }
-      .status-dot {
-        display: inline-block;
-        width: 8px;
-        height: 8px;
-        border-radius: 50%;
-        margin-right: 6px;
-      }
-      .status-dot.connected { background: var(--green); box-shadow: 0 0 4px var(--green); }
-      .status-dot.disconnected { background: var(--red); }
-      .status-dot.polling { background: var(--yellow); }
-      .refresh-info { color: var(--fg3); font-size: 11px; }
-
-      /* ── Layout ── */
-      .hero-row {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 16px;
-        margin-bottom: 16px;
-      }
-      .metrics-row {
-        display: grid;
-        grid-template-columns: repeat(3, 1fr);
-        gap: 16px;
-        margin-bottom: 16px;
-      }
-      .split-row {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 16px;
-        margin-bottom: 16px;
-      }
-      .full-row { margin-bottom: 16px; }
-      @media (max-width: 1000px) {
-        .hero-row, .metrics-row, .split-row { grid-template-columns: 1fr; }
-      }
-
-      /* ── Panels ── */
-      .panel {
-        background: var(--bg2);
-        border: 1px solid var(--border);
-        border-radius: var(--radius);
-        padding: 16px;
-        overflow: hidden;
-      }
-      .panel h2 {
-        font-size: 14px;
-        color: var(--cyan);
-        margin-bottom: 12px;
-        font-weight: 600;
-        border-bottom: 1px solid var(--border);
-        padding-bottom: 8px;
-      }
-      .panel h3 {
-        font-size: 12px;
-        color: var(--fg2);
-        margin: 12px 0 6px;
-        text-transform: uppercase;
-        letter-spacing: 0.5px;
-      }
-      .kv { display: flex; justify-content: space-between; padding: 3px 0; }
-      .kv .label { color: var(--fg2); }
-      .kv .value { color: var(--fg); font-weight: 500; }
-      .kv .value.green { color: var(--green); }
-      .kv .value.yellow { color: var(--yellow); }
-      .kv .value.red { color: var(--red); }
-      .kv .value.cyan { color: var(--cyan); }
-      .kv .value.purple { color: var(--purple); }
-      .kv .value.orange { color: var(--orange); }
-      .table-wrap { overflow-x: auto; }
-      table { width: 100%; border-collapse: collapse; font-size: 12px; }
-      th {
-        text-align: left;
-        color: var(--fg2);
-        font-weight: 500;
-        padding: 4px 8px;
-        border-bottom: 1px solid var(--border);
-        white-space: nowrap;
-      }
-      td { padding: 4px 8px; border-bottom: 1px solid var(--bg3); }
-      .badge {
-        display: inline-block;
-        padding: 1px 6px;
-        border-radius: 3px;
-        font-size: 11px;
-        font-weight: 600;
-      }
-      .badge.required { background: rgba(248,81,73,0.15); color: var(--red); }
-      .badge.recommended { background: rgba(210,153,34,0.15); color: var(--yellow); }
-      .badge.optional { background: rgba(72,79,88,0.15); color: var(--fg3); }
-      .badge.on { background: rgba(63,185,80,0.15); color: var(--green); }
-      .badge.off { background: rgba(248,81,73,0.15); color: var(--red); }
-      .badge.active { background: rgba(88,166,255,0.15); color: var(--cyan); }
-      .badge.idle { background: rgba(72,79,88,0.15); color: var(--fg3); }
-      .badge.droid { background: rgba(188,140,255,0.15); color: var(--purple); }
-      .badge.subagent { background: rgba(209,134,22,0.15); color: var(--orange); }
-      .badge.main { background: rgba(88,166,255,0.15); color: var(--cyan); }
-      .badge.file-only { background: rgba(72,79,88,0.15); color: var(--fg3); }
-
-      /* ── Bars ── */
-      .bar-container { display: flex; align-items: center; gap: 8px; margin: 3px 0; }
-      .bar-label { width: 80px; color: var(--fg2); font-size: 12px; }
-      .bar { height: 14px; border-radius: 3px; min-width: 2px; transition: width 0.3s; }
-      .bar.cyan { background: var(--cyan); }
-      .bar.green { background: var(--green); }
-      .bar.yellow { background: var(--yellow); }
-      .bar.red { background: var(--red); }
-      .bar.purple { background: var(--purple); }
-      .bar-value { color: var(--fg2); font-size: 11px; min-width: 20px; }
-
-      /* ── Charts ── */
-      .chart-container { position: relative; width: 100%; }
-      .chart-container .uplot { width: 100% !important; }
-      .chart-hero { height: 280px; }
-      .chart-spark { height: 80px; margin: 8px 0; }
-
-      /* uPlot dark theme overrides */
-      .uplot .u-title { color: var(--fg2) !important; font-size: 11px !important; }
-      .uplot .u-legend { font-size: 11px !important; }
-      .uplot .u-legend th { color: var(--fg2) !important; }
-      .uplot .u-legend td { color: var(--fg) !important; }
-      .uplot .u-series > * { padding: 2px 6px !important; }
-      .u-tooltip {
-        position: absolute;
-        z-index: 100;
-        background: var(--bg2);
-        border: 1px solid var(--border);
-        border-radius: 6px;
-        padding: 8px 12px;
-        font-size: 11px;
-        pointer-events: none;
-        box-shadow: 0 4px 12px rgba(0,0,0,0.4);
-        white-space: nowrap;
-      }
-      .u-tooltip .tt-time { color: var(--fg3); margin-bottom: 4px; font-size: 10px; }
-      .u-tooltip .tt-row { display: flex; gap: 8px; align-items: center; padding: 1px 0; }
-      .u-tooltip .tt-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
-      .u-tooltip .tt-label { color: var(--fg2); }
-      .u-tooltip .tt-val { color: var(--fg); font-weight: 600; margin-left: auto; }
-
-      /* ── Buttons ── */
-      .btn {
-        background: var(--bg3);
-        border: 1px solid var(--border);
-        color: var(--fg);
-        padding: 3px 8px;
-        border-radius: 4px;
-        cursor: pointer;
-        font-size: 11px;
-        font-family: inherit;
-      }
-      .btn:hover { background: var(--border); }
-      .btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
-      select {
-        background: var(--bg3);
-        border: 1px solid var(--border);
-        color: var(--fg);
-        padding: 2px 6px;
-        border-radius: 4px;
-        font-size: 11px;
-        font-family: inherit;
-      }
-      select:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
-
-      /* ── Audit / Events ── */
-      .audit-row {
-        display: flex;
-        gap: 8px;
-        padding: 3px 0;
-        font-size: 12px;
-        border-bottom: 1px solid var(--bg3);
-      }
-      .audit-time { color: var(--fg3); width: 80px; flex-shrink: 0; font-size: 11px; }
-      .audit-icon { width: 40px; flex-shrink: 0; font-weight: 600; }
-      .audit-icon.pass { color: var(--green); }
-      .audit-icon.block { color: var(--red); }
-      .audit-op { color: var(--fg); flex: 1; }
-      .audit-policy { color: var(--fg3); width: 80px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
-      .audit-reason { color: var(--fg3); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-
-      .event-feed { max-height: 200px; overflow-y: auto; }
-      .event-row {
-        display: flex;
-        gap: 6px;
-        padding: 2px 0;
-        font-size: 11px;
-        border-bottom: 1px solid var(--bg3);
-        animation: event-in 0.2s ease-out;
-      }
-      .event-row .event-cat {
-        padding: 0 4px;
-        border-radius: 3px;
-        font-weight: 600;
-        font-size: 10px;
-        text-transform: uppercase;
-      }
-      .event-row .event-time { color: var(--fg3); min-width: 60px; }
-      .event-row .event-msg { color: var(--fg2); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-      @keyframes event-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
-
-      .cat-policy { background: rgba(248,81,73,0.15); color: var(--red); }
-      .cat-memory { background: rgba(188,140,255,0.15); color: var(--purple); }
-      .cat-deploy { background: rgba(88,166,255,0.15); color: var(--cyan); }
-      .cat-agent { background: rgba(209,134,22,0.15); color: var(--orange); }
-      .cat-task { background: rgba(63,185,80,0.15); color: var(--green); }
-      .cat-skill { background: rgba(210,153,34,0.15); color: var(--yellow); }
-      .cat-pattern { background: rgba(188,140,255,0.15); color: var(--purple); }
-      .cat-cost { background: rgba(63,185,80,0.15); color: var(--green); }
-      .cat-system { background: rgba(72,79,88,0.3); color: var(--fg2); }
-
-      /* ── Gauge ── */
-      .gauge-track { background: var(--bg3); border-radius: 3px; height: 8px; margin: 6px 0; overflow: hidden; }
-      .gauge-fill { height: 100%; border-radius: 3px; transition: width 0.3s; }
-
-      /* ── Cost Savings ── */
-      .cost-savings {
-        background: rgba(63,185,80,0.08);
-        border: 1px solid rgba(63,185,80,0.2);
-        border-radius: var(--radius);
-        padding: 8px 12px;
-        margin-top: 8px;
-      }
-      .cost-savings .big-number { font-size: 20px; font-weight: 700; color: var(--green); }
-      .cost-savings .sub { font-size: 11px; color: var(--fg2); }
-
-      /* ── Agent rows ── */
-      .agent-row {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        padding: 4px 0;
-        border-bottom: 1px solid var(--bg3);
-        font-size: 12px;
-      }
-      .agent-name { color: var(--fg); font-weight: 500; min-width: 100px; }
-      .agent-task { color: var(--fg2); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-      .agent-tokens { color: var(--fg3); font-size: 11px; min-width: 60px; text-align: right; }
-
-      /* ── Chips ── */
-      .chip-list { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
-      .chip {
-        display: inline-block;
-        padding: 2px 8px;
-        border-radius: 10px;
-        font-size: 11px;
-        border: 1px solid var(--border);
-        color: var(--fg2);
-      }
-      .chip.active { border-color: var(--cyan); color: var(--cyan); background: rgba(88,166,255,0.08); }
-      .chip.inactive { opacity: 0.5; }
-
-      /* ── Progress ── */
-      .progress-track { background: var(--bg3); border-radius: 3px; height: 6px; margin: 6px 0; overflow: hidden; }
-      .progress-fill { height: 100%; border-radius: 3px; background: var(--cyan); transition: width 0.3s; }
-
-      /* ── Kanban Board ── */
-      .kanban { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; min-height: 200px; }
-      .kanban-col { flex: 1; min-width: 180px; max-width: 280px; display: flex; flex-direction: column; gap: 8px; }
-      .kanban-col-header {
-        display: flex; align-items: center; gap: 6px; padding: 6px 8px;
-        border-radius: 6px; font-size: 12px; font-weight: 600; background: var(--bg3);
-      }
-      .kanban-col-header .col-count { margin-left: auto; font-weight: 400; color: var(--fg3); font-size: 11px; }
-      .kanban-col-header.open { border-left: 3px solid var(--fg2); }
-      .kanban-col-header.in_progress { border-left: 3px solid var(--cyan); color: var(--cyan); }
-      .kanban-col-header.blocked { border-left: 3px solid var(--red); color: var(--red); }
-      .kanban-col-header.done { border-left: 3px solid var(--green); color: var(--green); }
-      .kanban-col-header.wont_do { border-left: 3px solid var(--fg3); color: var(--fg3); }
-      .kanban-cards { display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 40px; }
-      .kanban-group { font-size: 10px; color: var(--fg2); text-transform: uppercase; letter-spacing: 0.5px; padding: 4px 4px 0; border-top: 1px dashed var(--border); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-      .kanban-group:first-child { border-top: none; margin-top: 0; }
-      .kanban-card.card-child { margin-left: 8px; border-left: 2px solid var(--border); }
-      .kanban-card .card-crumb { color: var(--fg3); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-      .kanban-card {
-        background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
-        padding: 8px 10px; cursor: default;
-        transition: transform 0.2s ease, opacity 0.3s ease, box-shadow 0.2s ease;
-        animation: card-enter 0.35s ease-out;
-      }
-      .kanban-card:hover { border-color: var(--cyan); box-shadow: 0 0 8px rgba(88,166,255,0.15); transform: translateY(-1px); }
-      .kanban-card.card-exit { animation: card-exit 0.3s ease-in forwards; }
-      .kanban-card .card-id { font-size: 10px; color: var(--cyan); font-weight: 600; }
-      .kanban-card .card-title { font-size: 12px; color: var(--fg); margin: 3px 0; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
-      .kanban-card .card-meta { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--fg3); }
-      .kanban-card .card-priority { padding: 0 4px; border-radius: 3px; font-weight: 600; font-size: 10px; }
-      .card-priority.p0 { background: rgba(248,81,73,0.2); color: var(--red); }
-      .card-priority.p1 { background: rgba(210,153,34,0.2); color: var(--yellow); }
-      .card-priority.p2 { background: rgba(88,166,255,0.15); color: var(--cyan); }
-      .card-priority.p3, .card-priority.p4 { background: rgba(72,79,88,0.2); color: var(--fg3); }
-      .kanban-empty { color: var(--fg3); font-size: 11px; font-style: italic; text-align: center; padding: 16px 4px; border: 1px dashed var(--border); border-radius: 6px; }
-      @keyframes card-enter { 0% { opacity: 0; transform: translateY(-12px) scale(0.95); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
-      @keyframes card-exit { 0% { opacity: 1; transform: translateX(0) scale(1); } 100% { opacity: 0; transform: translateX(30px) scale(0.9); } }
-
-      /* ── Toasts ── */
-      .toast-container { position: fixed; top: 16px; right: 16px; z-index: 1000; display: flex; flex-direction: column; gap: 8px; }
-      .toast { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 14px; font-size: 12px; color: var(--fg); animation: toast-in 0.2s ease-out; max-width: 320px; }
-      .toast.success { border-color: var(--green); color: var(--green); }
-      .toast.error { border-color: var(--red); color: var(--red); }
-      @keyframes toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
-
-      /* ── Collapsible ── */
-      .collapsible-header {
-        cursor: pointer;
-        user-select: none;
-        display: flex;
-        align-items: center;
-        gap: 6px;
-      }
-      .collapsible-header::before {
-        content: '\25B6';
-        font-size: 10px;
-        color: var(--fg3);
-        transition: transform 0.2s;
-      }
-      .collapsible-header.open::before { transform: rotate(90deg); }
-      .collapsible-body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
-      .collapsible-body.open { max-height: 600px; }
-
-      .empty { color: var(--fg3); font-style: italic; padding: 8px 0; }
-    </style>
   </head>
   <body>
     <div class="toast-container" id="toast-container"></div>
@@ -408,934 +26,25 @@
           <span class="header-ts" id="data-ts"></span>
           <div>
             <span class="status-dot disconnected" id="ws-status" role="status" aria-label="Connection status: disconnected"></span>
-            <span class="refresh-info" id="refresh-info">Connecting...</span>
+            <span class="refresh-info" id="refresh-info">Connecting…</span>
           </div>
         </div>
       </header>
 
-      <!-- Hero Charts -->
-      <div class="hero-row">
-        <div class="panel">
-          <h2>Tasks &amp; Agents</h2>
-          <div class="chart-container chart-hero" id="chart-tasks"></div>
-        </div>
-        <div class="panel">
-          <h2>Compression &amp; Memory</h2>
-          <div class="chart-container chart-hero" id="chart-compression"></div>
-        </div>
-      </div>
-
-      <!-- Core Metrics -->
-      <div class="metrics-row">
-        <div class="panel">
-          <h2>Models &amp; Routing</h2>
-          <div id="model-roles"></div>
-          <h3>Router</h3>
-          <div id="model-router"></div>
-          <h3>Cost Optimization</h3>
-          <div id="model-cost-opt"></div>
-          <h3>Routing Matrix</h3>
-          <div id="model-routing-matrix" class="table-wrap"></div>
-          <h3>Recent Routing Decisions</h3>
-          <div id="model-routes" class="table-wrap"><div class="empty">No routing decisions yet</div></div>
-          <h3>Session Usage by Model</h3>
-          <div id="model-usage" class="table-wrap"></div>
-          <div class="kv" style="margin-top:8px;border-top:1px solid var(--border);padding-top:6px">
-            <span class="label" style="font-weight:600">Total Cost</span>
-            <span class="value green" id="model-cost">$0.0000</span>
-          </div>
-        </div>
+      <nav class="tabbar" id="tabbar" role="tablist"></nav>
 
-        <div class="panel">
-          <h2>Memory</h2>
-          <div id="memory-panel">
-            <div class="kv"><span class="label">L1 Working</span><span class="value" id="mem-l1">-</span></div>
-            <div class="kv"><span class="label">L2 Session</span><span class="value" id="mem-l2">-</span></div>
-            <div class="kv"><span class="label">L3 Semantic</span><span class="value" id="mem-l3">-</span></div>
-            <div class="kv"><span class="label">L4 Knowledge</span><span class="value" id="mem-l4">-</span></div>
-          </div>
-          <h3>Memory Hit Rate</h3>
-          <div id="mem-hitrate-panel">
-            <div class="kv"><span class="label">Hits</span><span class="value green" id="mem-hits">0</span></div>
-            <div class="kv"><span class="label">Misses</span><span class="value red" id="mem-misses">0</span></div>
-            <div class="kv"><span class="label">Rate</span><span class="value" id="mem-hitrate">N/A</span></div>
-            <div class="gauge-track"><div class="gauge-fill" id="mem-hitrate-gauge" style="width:0%;background:var(--green)"></div></div>
-          </div>
-          <div class="chart-container chart-spark" id="chart-hitrate"></div>
-          <h3>Context Compression</h3>
-          <div id="compression-panel">
-            <div class="kv"><span class="label">Raw</span><span class="value" id="comp-raw">0 KB</span></div>
-            <div class="kv"><span class="label">Compressed</span><span class="value" id="comp-ctx">0 KB</span></div>
-            <div class="kv"><span class="label">Savings</span><span class="value green" id="comp-savings">0%</span></div>
-            <div class="kv"><span class="label">Tool Calls</span><span class="value" id="comp-calls">0</span></div>
-          </div>
-          <h3>Recent Memory Queries</h3>
-          <div id="memory-recent-queries"><div class="empty">No recent queries</div></div>
-        </div>
-
-        <div class="panel">
-          <h2>Deploy Pipeline</h2>
-          <div id="deploy-buckets">
-            <div class="bar-container"><span class="bar-label">Queued</span><div class="bar yellow" id="deploy-queued" style="width:0%"></div><span class="bar-value" id="deploy-queued-count">0</span></div>
-            <div class="bar-container"><span class="bar-label">Batched</span><div class="bar purple" id="deploy-batched" style="width:0%"></div><span class="bar-value" id="deploy-batched-count">0</span></div>
-            <div class="bar-container"><span class="bar-label">Executing</span><div class="bar cyan" id="deploy-executing" style="width:0%"></div><span class="bar-value" id="deploy-executing-count">0</span></div>
-            <div class="bar-container"><span class="bar-label">Done</span><div class="bar green" id="deploy-done" style="width:0%"></div><span class="bar-value" id="deploy-done-count">0</span></div>
-            <div class="bar-container"><span class="bar-label">Failed</span><div class="bar red" id="deploy-failed" style="width:0%"></div><span class="bar-value" id="deploy-failed-count">0</span></div>
-            <div class="kv" style="margin-top:8px;border-top:1px solid var(--border);padding-top:6px">
-              <span class="label">Batches</span><span class="value" id="deploy-batch-count">0</span>
-            </div>
-            <div class="kv"><span class="label">Saved Ops</span><span class="value green" id="deploy-saved-ops">0</span></div>
-          </div>
-          <h3>Deploy Trend</h3>
-          <div class="chart-container chart-spark" id="chart-deploy"></div>
-          <h3>Coordination</h3>
-          <div id="coord-panel">
-            <div class="kv"><span class="label">Active Agents</span><span class="value" id="coord-agents">0</span></div>
-            <div class="kv"><span class="label">Total Agents</span><span class="value" id="coord-total-agents">0</span></div>
-            <div class="kv"><span class="label">Completed</span><span class="value green" id="coord-completed-agents">0</span></div>
-            <div class="kv"><span class="label">Resource Claims</span><span class="value" id="coord-claims">0</span></div>
-            <div class="kv"><span class="label">Pending Deploys</span><span class="value" id="coord-deploys">0</span></div>
-            <div class="kv"><span class="label">Active Worktrees</span><span class="value cyan" id="coord-worktrees">0</span></div>
-            <div class="kv"><span class="label">Pattern Uses</span><span class="value" id="coord-pattern-hits">0</span></div>
-            <div class="kv"><span class="label">Pattern Successes</span><span class="value green" id="coord-pattern-successes">0</span></div>
-          </div>
-          <h3>Recent Agents</h3>
-          <div id="coord-agents-table" class="table-wrap"><div class="empty">No agents registered</div></div>
-        </div>
-      </div>
-
-      <!-- Session Telemetry -->
-      <div class="full-row" id="session-panel" style="display:none">
-        <div class="panel">
-          <h2>Session Telemetry <span style="font-size:11px;color:var(--fg3);font-weight:400" id="sess-label">(current)</span></h2>
-          <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px">
-            <div>
-              <h3>Overview</h3>
-              <div class="kv"><span class="label">Session ID</span><span class="value cyan" id="sess-id">-</span></div>
-              <div class="kv"><span class="label">Uptime</span><span class="value" id="sess-uptime">-</span></div>
-              <div class="kv"><span class="label">Tokens Used</span><span class="value" id="sess-tokens">0</span></div>
-              <div class="kv"><span class="label">Tokens Saved</span><span class="value green" id="sess-saved">0</span></div>
-              <div class="kv"><span class="label">Tool Calls</span><span class="value" id="sess-tools">0</span></div>
-              <div class="kv"><span class="label">Policy Checks</span><span class="value" id="sess-checks">0</span></div>
-              <div class="kv"><span class="label">Policy Blocks</span><span class="value red" id="sess-blocks">0</span></div>
-              <div class="kv"><span class="label">Errors</span><span class="value red" id="sess-errors">0</span></div>
-              <div id="sess-token-io-detail"></div>
-              <div id="sess-progress-wrap" style="display:none">
-                <h3>Step Progress</h3>
-                <div class="kv"><span class="label" id="sess-step-name">-</span><span class="value" id="sess-step-count">0/0</span></div>
-                <div class="progress-track"><div class="progress-fill" id="sess-progress-bar" style="width:0%"></div></div>
-              </div>
-            </div>
-            <div>
-              <h3>Cost</h3>
-              <div class="kv"><span class="label">Session Cost</span><span class="value" id="sess-cost">$0.0000</span></div>
-              <div class="kv"><span class="label">Without UAP</span><span class="value" id="sess-cost-without">$0.0000</span></div>
-              <div class="cost-savings" id="sess-savings-box">
-                <div class="big-number" id="sess-savings-pct">0%</div>
-                <div class="sub">estimated savings with UAP</div>
-              </div>
-              <h3>Agents</h3>
-              <div id="sess-agents"><div class="empty">No active agents</div></div>
-              <h3>Per-Agent Breakdown</h3>
-              <div id="sess-agent-breakdown" class="table-wrap"><div class="empty">No agent data</div></div>
-            </div>
-            <div>
-              <h3>Skills</h3>
-              <div id="sess-skills" class="chip-list"><span class="empty">No skills loaded</span></div>
-              <h3>Patterns</h3>
-              <div id="sess-patterns" class="chip-list"><span class="empty">No patterns matched</span></div>
-              <h3>Deploys</h3>
-              <div id="sess-deploys"><div class="empty">No deploys</div></div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Compliance -->
-      <div class="split-row">
-        <div class="panel">
-          <h2>Policies</h2>
-          <div id="policy-table" class="table-wrap"></div>
-          <h3>Enforcement Stages</h3>
-          <div id="policy-stages"></div>
-        </div>
-        <div class="panel">
-          <h2>Compliance &amp; Audit</h2>
-          <h3>Block Rate Trend</h3>
-          <div class="chart-container chart-spark" id="chart-compliance"></div>
-          <h3>Failures by Mechanism</h3>
-          <div id="compliance-mechanisms"></div>
-          <h3>Recent Failures</h3>
-          <div id="compliance-failures" class="table-wrap"><div class="empty">No recent failures</div></div>
-          <h3>Audit Trail</h3>
-          <div id="audit-trail"></div>
-          <h3>Live Events</h3>
-          <div class="event-feed" id="live-events"><div class="empty">Connecting to event stream...</div></div>
-        </div>
-      </div>
-
-      <!-- Session History -->
-      <div class="full-row" id="session-history-panel" style="display:none">
-        <div class="panel">
-          <h2>Session History</h2>
-          <div id="session-history-table" class="table-wrap"><div class="empty">No session history</div></div>
-        </div>
-      </div>
-
-      <!-- Token Savings by Influence -->
-      <div class="full-row" id="savings-panel">
-        <div class="panel">
-          <h2>Token Savings by Influence</h2>
-          <div id="savings-summary" style="margin-bottom:12px;font-size:14px"></div>
-          <div id="savings-table" class="table-wrap"><div class="empty">No savings data</div></div>
-        </div>
-      </div>
-
-      <!-- Orchestrations & Hierarchy -->
-      <div class="full-row" id="orch-panel">
-        <div class="panel">
-          <h2>Orchestrations &amp; Hierarchy <span style="font-size:11px;color:var(--fg3);font-weight:400" id="orch-label"></span></h2>
-          <div id="orch-tree"><div class="empty">No orchestrations yet</div></div>
-        </div>
-      </div>
-
-      <!-- Task Board -->
-      <div class="full-row" id="kanban-panel" style="display:none">
-        <div class="panel">
-          <h2>Task Board</h2>
-          <div class="kanban" id="kanban-board">
-            <div class="kanban-col" data-status="open"><div class="kanban-col-header open"><span>Open</span><span class="col-count" id="kb-open-count">0</span></div><div class="kanban-cards" id="kb-open"></div></div>
-            <div class="kanban-col" data-status="in_progress"><div class="kanban-col-header in_progress"><span>In Progress</span><span class="col-count" id="kb-progress-count">0</span></div><div class="kanban-cards" id="kb-progress"></div></div>
-            <div class="kanban-col" data-status="blocked"><div class="kanban-col-header blocked"><span>Blocked</span><span class="col-count" id="kb-blocked-count">0</span></div><div class="kanban-cards" id="kb-blocked"></div></div>
-            <div class="kanban-col" data-status="done"><div class="kanban-col-header done"><span>Done</span><span class="col-count" id="kb-done-count">0</span></div><div class="kanban-cards" id="kb-done"></div></div>
-            <div class="kanban-col" data-status="wont_do"><div class="kanban-col-header wont_do"><span>Won't Do</span><span class="col-count" id="kb-wontdo-count">0</span></div><div class="kanban-cards" id="kb-wontdo"></div></div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Performance (collapsible) -->
-      <div class="full-row">
-        <div class="panel">
-          <h2 class="collapsible-header" id="perf-toggle" onclick="toggleCollapsible('perf')">Performance</h2>
-          <div class="collapsible-body" id="perf-body">
-            <div id="perf-panel"><div class="empty">No performance data</div></div>
-          </div>
-        </div>
-      </div>
+      <main id="view"></main>
     </div>
 
     <script>
-      const WS_URL = `ws://${location.host}`;
-      const API_URL = `http://${location.host}`;
-      // Per-session token for policy mutations (security audit D1). The server
-      // injects it into this page (same-origin only); it is sent as a custom
-      // header so a cross-site request can't forge it. Falls back to '' when the
-      // page is opened without the server substitution (mutations then 401).
-      const DASHBOARD_TOKEN = '__UAP_DASHBOARD_TOKEN__'.startsWith('__UAP') ? '' : '__UAP_DASHBOARD_TOKEN__';
-      const MUTATION_HEADERS = { 'X-Uap-Dashboard-Token': DASHBOARD_TOKEN };
-      // Server-injected push cadence (uap dash serve --refresh); the fallback
-      // poll below matches it. 2000 when opened without server substitution.
-      const REFRESH_MS = Number('__UAP_DASH_REFRESH_MS__') > 0 ? Number('__UAP_DASH_REFRESH_MS__') : 2000;
-      let ws = null;
-      let reconnectTimer = null;
-      let reconnectDelay = 1000;
-      const MAX_RECONNECT_DELAY = 30000;
-      let chartTasks = null, chartCompression = null, chartDeploy = null, chartHitrate = null, chartCompliance = null;
-      const uplotReady = typeof uPlot !== 'undefined';
-
-      function showToast(message, type = 'info') {
-        const c = document.getElementById('toast-container');
-        const t = document.createElement('div');
-        t.className = 'toast ' + type;
-        t.textContent = message;
-        c.appendChild(t);
-        setTimeout(() => t.remove(), 3000);
-      }
-
-      function toggleCollapsible(id) {
-        document.getElementById(id + '-toggle').classList.toggle('open');
-        document.getElementById(id + '-body').classList.toggle('open');
-      }
-
-      // ── WebSocket ──
-      function connect() {
-        clearTimeout(reconnectTimer);
-        if (ws && (ws.readyState === WebSocket.OPEN || ws.readyState === WebSocket.CONNECTING)) return;
-        ws = new WebSocket(WS_URL);
-        ws.onopen = () => {
-          reconnectDelay = 1000;
-          const dot = document.getElementById('ws-status');
-          dot.className = 'status-dot connected';
-          dot.setAttribute('aria-label', 'Connection status: live');
-          document.getElementById('refresh-info').textContent = 'Live';
-          document.title = 'UAP Dashboard - Live';
-        };
-        ws.onmessage = (e) => {
-          try { render(JSON.parse(e.data)); } catch (err) { console.error('Render error:', err); }
-          document.getElementById('refresh-info').textContent = 'Live - ' + new Date().toLocaleTimeString();
-        };
-        ws.onclose = () => {
-          document.getElementById('ws-status').className = 'status-dot disconnected';
-          document.getElementById('refresh-info').textContent = 'Disconnected - reconnecting...';
-          document.title = 'UAP Dashboard - Disconnected';
-          reconnectTimer = setTimeout(connect, reconnectDelay);
-          reconnectDelay = Math.min(reconnectDelay * 1.5, MAX_RECONNECT_DELAY);
-        };
-        ws.onerror = () => ws.close();
-      }
-
-      // ── SSE Event Stream ──
-      let eventSource = null;
-      const liveEvents = [];
-      function connectSSE() {
-        try {
-          eventSource = new EventSource(API_URL + '/api/events');
-          eventSource.onmessage = (e) => {
-            try {
-              const ev = JSON.parse(e.data);
-              // Dedup by id: the connect-burst and the cross-process poller can
-              // briefly overlap. Ignore events we already hold.
-              if (ev.id != null && liveEvents.some((x) => x.id === ev.id)) return;
-              liveEvents.unshift(ev);
-              if (liveEvents.length > 20) liveEvents.pop();
-              renderLiveEvents();
-            } catch {}
-          };
-          // Full live snapshot (cross-process) — used when the WebSocket is down so
-          // SSE alone keeps the dashboard live rather than falling to slow polling. (C)
-          eventSource.addEventListener('snapshot', (e) => {
-            if (ws && ws.readyState === WebSocket.OPEN) return;
-            try {
-              render(JSON.parse(e.data));
-              document.getElementById('ws-status').className = 'status-dot connected';
-              document.getElementById('refresh-info').textContent = 'Live (SSE) - ' + new Date().toLocaleTimeString();
-            } catch {}
-          });
-          eventSource.onerror = () => { eventSource.close(); setTimeout(connectSSE, 5000); };
-        } catch {}
-      }
-      function renderLiveEvents() {
-        const c = document.getElementById('live-events');
-        if (!c || !liveEvents.length) return;
-        let html = '';
-        for (const ev of liveEvents) {
-          const cat = ev.category || ev.type || 'system';
-          const ts = ev.timestamp ? new Date(ev.timestamp).toLocaleTimeString() : '';
-          const title = ev.title || ev.message || '';
-          const detail = ev.detail || '';
-          const msg = (title && detail) ? `${title} — ${detail}` : (title || detail || JSON.stringify(ev.data || '').slice(0, 80));
-          html += `<div class="event-row"><span class="event-time">${esc(ts)}</span><span class="event-cat cat-${esc(cat)}">${esc(cat)}</span><span class="event-msg">${esc(msg)}</span></div>`;
-        }
-        c.innerHTML = html;
-      }
-
-      // ══════════════════════════════
-      // ── CHARTS (uPlot) ──
-      // ══════════════════════════════
-
-      const CC = {
-        done:'#3fb950', inProg:'#58a6ff', blocked:'#f85149', open:'#484f58', agents:'#bc8cff',
-        raw:'#58a6ff', ctx:'#3fb950', hitRate:'#bc8cff', deploy:'#58a6ff', blockRate:'#f85149',
+      // Server injects these at serve time (same-origin only). The token gates
+      // every mutation; the refresh cadence matches `uap dash serve --refresh`.
+      window.__UAP_BOOT = {
+        token: '__UAP_DASHBOARD_TOKEN__'.indexOf('__UAP') === 0 ? '' : '__UAP_DASHBOARD_TOKEN__',
+        refreshMs: Number('__UAP_DASH_REFRESH_MS__') > 0 ? Number('__UAP_DASH_REFRESH_MS__') : 2000,
       };
-
-      function tsUnix(arr) { return arr.map(p => new Date(p.timestamp).getTime() / 1000); }
-
-      function addTooltip(u, colors, labels, fmtVal) {
-        const tt = document.createElement('div');
-        tt.className = 'u-tooltip'; tt.style.display = 'none';
-        u.root.appendChild(tt);
-        u.hooks.setCursor = u.hooks.setCursor || [];
-        u.hooks.setCursor.push(() => {
-          const { idx, left, top } = u.cursor;
-          if (idx == null) { tt.style.display = 'none'; return; }
-          const date = new Date(u.data[0][idx] * 1000);
-          let rows = `<div class="tt-time">${date.toLocaleTimeString()}</div>`;
-          for (let i = 1; i < u.series.length; i++) {
-            if (!u.series[i].show) continue;
-            const val = u.data[i][idx];
-            if (val == null) continue;
-            const c = colors[i-1] || '#fff', l = labels[i-1] || '';
-            const v = fmtVal ? fmtVal(val, i) : val.toLocaleString();
-            rows += `<div class="tt-row"><span class="tt-dot" style="background:${c}"></span><span class="tt-label">${l}</span><span class="tt-val">${v}</span></div>`;
-          }
-          tt.innerHTML = rows; tt.style.display = '';
-          tt.style.left = (left + 16) + 'px'; tt.style.top = Math.max(0, top - 10) + 'px';
-        });
-      }
-
-      function mkChart(elId, ts, extractors, opts) {
-        if (!uplotReady || !ts || ts.length < 2) return null;
-        const el = document.getElementById(elId);
-        if (!el) return null;
-        el.innerHTML = '';
-        const timestamps = tsUnix(ts);
-        const data = [timestamps, ...extractors.map(fn => ts.map(fn))];
-        const u = new uPlot(opts(el.clientWidth), data, el);
-        return u;
-      }
-
-      function initChartTasks(ts) {
-        const colors = [CC.done, CC.inProg, CC.blocked, CC.open, CC.agents];
-        const labels = ['Done', 'In Progress', 'Blocked', 'Open', 'Active Agents'];
-        const extractors = [
-          p => p.tasks?.done || 0, p => p.tasks?.inProgress || 0,
-          p => p.tasks?.blocked || 0, p => p.tasks?.open || 0,
-          p => p.coordination?.activeAgents || 0,
-        ];
-        const u = mkChart('chart-tasks', ts, extractors, (w) => ({
-          width: w, height: 260,
-          cursor: { sync: { key: 'uap' }, focus: { prox: 30 } },
-          scales: { x: { time: true }, y: { min: 0 }, agents: { min: 0 } },
-          axes: [
-            { stroke: '#484f58', grid: { stroke: '#21262d' }, ticks: { stroke: '#21262d' }, font: '10px SF Mono,monospace' },
-            { stroke: '#484f58', grid: { stroke: '#21262d' }, ticks: { stroke: '#21262d' }, font: '10px SF Mono,monospace', size: 50 },
-            { stroke: CC.agents, grid: { show: false }, side: 1, font: '10px SF Mono,monospace', size: 50, scale: 'agents' },
-          ],
-          series: [
-            {},
-            { label: 'Done', stroke: CC.done, fill: CC.done+'30', width: 2 },
-            { label: 'In Prog', stroke: CC.inProg, fill: CC.inProg+'30', width: 2 },
-            { label: 'Blocked', stroke: CC.blocked, fill: CC.blocked+'20', width: 2 },
-            { label: 'Open', stroke: CC.open, fill: CC.open+'20', width: 1, dash: [4,2] },
-            { label: 'Agents', stroke: CC.agents, width: 2, dash: [6,3], scale: 'agents' },
-          ],
-        }));
-        if (u) addTooltip(u, colors, labels);
-        return u;
-      }
-
-      function initChartCompression(ts) {
-        const colors = [CC.raw, CC.ctx, CC.hitRate];
-        const labels = ['Raw KB', 'Compressed KB', 'Hit Rate %'];
-        const parseHR = p => { const h = p.memoryHitsMisses?.hitRate; return typeof h === 'string' ? parseFloat(h)||0 : h||0; };
-        const extractors = [
-          p => Math.round((p.compression?.rawBytes||0)/1024),
-          p => Math.round((p.compression?.contextBytes||0)/1024),
-          parseHR,
-        ];
-        const u = mkChart('chart-compression', ts, extractors, (w) => ({
-          width: w, height: 260,
-          cursor: { sync: { key: 'uap' }, focus: { prox: 30 } },
-          scales: { x: { time: true }, y: { min: 0 }, pct: { min: 0, max: 100 } },
-          axes: [
-            { stroke: '#484f58', grid: { stroke: '#21262d' }, ticks: { stroke: '#21262d' }, font: '10px SF Mono,monospace' },
-            { stroke: '#484f58', grid: { stroke: '#21262d' }, ticks: { stroke: '#21262d' }, font: '10px SF Mono,monospace', size: 50, values: (_,v) => v.map(x => x+' KB') },
-            { stroke: CC.hitRate, grid: { show: false }, side: 1, font: '10px SF Mono,monospace', size: 50, scale: 'pct', values: (_,v) => v.map(x => x+'%') },
-          ],
-          series: [
-            {},
-            { label: 'Raw', stroke: CC.raw, fill: CC.raw+'20', width: 2 },
-            { label: 'Compressed', stroke: CC.ctx, fill: CC.ctx+'20', width: 2 },
-            { label: 'Hit Rate', stroke: CC.hitRate, width: 2, dash: [6,3], scale: 'pct' },
-          ],
-        }));
-        if (u) addTooltip(u, colors, labels, (v,i) => i===3 ? v+'%' : v+' KB');
-        return u;
-      }
-
-      function initSparkline(elId, ts, fn, color, label) {
-        if (!uplotReady || !ts || ts.length < 2) return null;
-        const el = document.getElementById(elId);
-        if (!el) return null;
-        el.innerHTML = '';
-        const timestamps = tsUnix(ts);
-        const values = ts.map(fn);
-        const data = [timestamps, values];
-        const u = new uPlot({
-          width: el.clientWidth, height: 60,
-          cursor: { sync: { key: 'uap' }, focus: { prox: 30 }, points: { show: false } },
-          legend: { show: false },
-          scales: { x: { time: true }, y: { min: 0 } },
-          axes: [{ show: false }, { show: false }],
-          series: [{}, { stroke: color, fill: color+'25', width: 1.5 }],
-        }, data, el);
-        // Sparkline tooltip
-        const tt = document.createElement('div');
-        tt.className = 'u-tooltip'; tt.style.display = 'none';
-        u.root.appendChild(tt);
-        u.hooks.setCursor = u.hooks.setCursor || [];
-        u.hooks.setCursor.push(() => {
-          const { idx } = u.cursor;
-          if (idx == null) { tt.style.display = 'none'; return; }
-          tt.innerHTML = `<div class="tt-time">${new Date(data[0][idx]*1000).toLocaleTimeString()}</div><div class="tt-row"><span class="tt-label">${label}</span><span class="tt-val">${typeof values[idx]==='number'?values[idx].toLocaleString():values[idx]}</span></div>`;
-          tt.style.display = ''; tt.style.left = (u.cursor.left+12)+'px'; tt.style.top = '0px';
-        });
-        return u;
-      }
-
-      let chartsInit = false;
-      // Seed each uPlot legend to the LATEST data point so the values read as
-      // live numbers instead of '--' until the user hovers. Fail-safe per chart.
-      function seedLegends() {
-        [chartTasks, chartCompression, chartDeploy, chartHitrate, chartCompliance].forEach(u => {
-          try { if (u && u.data && u.data[0] && u.data[0].length) u.setLegend({ idx: u.data[0].length - 1 }); } catch (e) { /* legend seed best-effort */ }
-        });
-      }
-      function updateAllCharts(ts) {
-        if (!uplotReady || !ts || ts.length < 2) return;
-        const parseHR = p => { const h=p.memoryHitsMisses?.hitRate; return typeof h==='string'?parseFloat(h)||0:h||0; };
-        const parseBR = p => { const b=p.compliance?.blockRate; return typeof b==='string'?parseFloat(b)||0:b||0; };
-        if (!chartsInit) {
-          chartTasks = initChartTasks(ts);
-          chartCompression = initChartCompression(ts);
-          chartDeploy = initSparkline('chart-deploy', ts, p=>(p.deployBuckets?.queued||0)+(p.deployBuckets?.executing||0)+(p.deployBuckets?.batched||0), CC.deploy, 'Active Deploys');
-          chartHitrate = initSparkline('chart-hitrate', ts, parseHR, CC.hitRate, 'Hit Rate %');
-          chartCompliance = initSparkline('chart-compliance', ts, parseBR, CC.blockRate, 'Block Rate %');
-          chartsInit = true;
-          seedLegends();
-          return;
-        }
-        // Update data
-        const timestamps = tsUnix(ts);
-        if (chartTasks) chartTasks.setData([timestamps, ts.map(p=>p.tasks?.done||0), ts.map(p=>p.tasks?.inProgress||0), ts.map(p=>p.tasks?.blocked||0), ts.map(p=>p.tasks?.open||0), ts.map(p=>p.coordination?.activeAgents||0)]);
-        if (chartCompression) chartCompression.setData([timestamps, ts.map(p=>Math.round((p.compression?.rawBytes||0)/1024)), ts.map(p=>Math.round((p.compression?.contextBytes||0)/1024)), ts.map(parseHR)]);
-        if (chartDeploy) chartDeploy.setData([timestamps, ts.map(p=>(p.deployBuckets?.queued||0)+(p.deployBuckets?.executing||0)+(p.deployBuckets?.batched||0))]);
-        if (chartHitrate) chartHitrate.setData([timestamps, ts.map(parseHR)]);
-        if (chartCompliance) chartCompliance.setData([timestamps, ts.map(parseBR)]);
-        seedLegends();
-      }
-
-      // ══════════════════════════════
-      // ── MAIN RENDER ──
-      // ══════════════════════════════
-
-      function render(data) {
-        if (!data) return;
-        const _errors = [];
-        function safe(label, fn) { try { fn(); } catch(e) { _errors.push(label+': '+(e.message||e)); console.error('Render ['+label+']:', e); } }
-
-        const sys = data.system || {};
-        const tasks = data.tasks || {};
-        const coord = data.coordination || {};
-        const models = data.models || { roles:{}, sessionUsage:[], totalCost:0, strategy:'unknown' };
-        const mem = data.memory || {};
-        const l1 = mem.l1 || { entries:0, sizeKB:0 };
-        const l2 = mem.l2 || { entries:0 };
-        const l3 = mem.l3 || { status:'Unknown', uptime:'' };
-        const l4 = mem.l4 || { entities:0, relationships:0 };
-        const comp = mem.compression || { rawBytes:0, contextBytes:0, savingsPercent:'0%', totalCalls:0 };
-        const hm = mem.hitsMisses || { hits:0, misses:0, hitRate:'N/A' };
-        const policies = data.policies || [];
-        const policyFiles = data.policyFiles || [];
-        const audit = data.auditTrail || [];
-        const timeSeries = data.timeSeries || [];
-        const compliance = data.compliance || {};
-        const session = data.session || null;
-
-        safe('timestamp', () => { if (data.timestamp) setText('data-ts', new Date(data.timestamp).toLocaleTimeString()); });
-
-        safe('system', () => {
-          setText('sys-version', sys.version || '?');
-          setText('sys-branch', sys.branch || '?');
-          const el = document.getElementById('sys-dirty');
-          if (el) { const d = sys.dirty||0; el.textContent = d > 0 ? d+' files' : 'clean'; el.className = 'val '+(d > 0 ? 'yellow' : 'green'); }
-        });
-
-        safe('charts', () => updateAllCharts(timeSeries));
-
-        safe('coordination', () => {
-          setText('coord-agents', coord.activeAgents||0);
-          setText('coord-total-agents', coord.totalAgents||0);
-          setText('coord-completed-agents', coord.completedAgents||0);
-          setText('coord-claims', coord.activeClaims||0);
-          setText('coord-deploys', coord.pendingDeploys||0);
-          setText('coord-worktrees', coord.activeWorktrees||0);
-          setText('coord-pattern-hits', coord.patternHits||0);
-          setText('coord-pattern-successes', coord.patternSuccesses||0);
-        });
-
-        safe('agents-table', () => {
-          const agents = coord.agents || [];
-          if (agents.length > 0) {
-            let h = '<table><tr><th>ID</th><th>Name</th><th>Status</th><th>Started</th></tr>';
-            for (const a of agents) {
-              const cls = a.status==='active'?'active':a.status==='completed'?'on':'idle';
-              h += `<tr><td style="color:var(--fg3);font-size:11px">${esc((a.id||'').slice(0,16))}</td><td>${esc(a.name||'-')}</td><td><span class="badge ${cls}">${esc(a.status||'-')}</span></td><td style="color:var(--fg3)">${esc(a.startedAt?a.startedAt.slice(0,19).replace('T',' '):'-')}</td></tr>`;
-            }
-            document.getElementById('coord-agents-table').innerHTML = h + '</table>';
-          } else { document.getElementById('coord-agents-table').innerHTML = '<div class="empty">No agents registered</div>'; }
-        });
-
-        safe('deploy', () => {
-          const d = data.deployBuckets || {};
-          const total = d.totalActions || (d.done||0)+(d.failed||0)+(d.queued||0)+(d.batched||0)+(d.executing||0) || 1;
-          const max = Math.max(total, 1);
-          const setBar = (id, val) => { const el=document.getElementById(id),ce=document.getElementById(id+'-count'); if(el)el.style.width=Math.min(Math.round((val/max)*100),100)+'%'; if(ce)ce.textContent=val; };
-          setBar('deploy-queued',d.queued||0); setBar('deploy-batched',d.batched||0);
-          setBar('deploy-executing',d.executing||0); setBar('deploy-done',d.done||0); setBar('deploy-failed',d.failed||0);
-          setText('deploy-batch-count',d.batchCount||0); setText('deploy-saved-ops',d.savedOps||0);
-        });
-
-        safe('models', () => {
-          // Roles
-          let rh = '';
-          for (const [role, model] of Object.entries(models.roles||{})) {
-            const c = role==='planner'?'green':role==='executor'?'cyan':role==='reviewer'?'purple':'';
-            rh += `<div class="kv"><span class="label">${esc(capitalize(role))}</span><span class="value ${c}">${model?esc(modelName(String(model))):'—'}</span></div>`;
-          }
-          document.getElementById('model-roles').innerHTML = rh;
-
-          // Router
-          document.getElementById('model-router').innerHTML = `<div class="kv"><span class="label">Strategy</span><span class="value cyan">${esc(models.strategy||'unknown')}</span></div><div class="kv"><span class="label">Available</span><span class="value">${models.availableModels?models.availableModels.length:0}</span></div><div class="kv"><span class="label">Enabled</span><span class="value ${models.enabled?'green':'yellow'}">${models.enabled?'Yes':'No'}</span></div>`;
-
-          // Cost Optimization
-          const co = models.costOptimization || {};
-          document.getElementById('model-cost-opt').innerHTML = `<div class="kv"><span class="label">Enabled</span><span class="value ${co.enabled?'green':'yellow'}">${co.enabled?'Yes':'No'}</span></div><div class="kv"><span class="label">Target Reduction</span><span class="value">${co.targetReduction?co.targetReduction.toFixed(0)+'%':'N/A'}</span></div><div class="kv"><span class="label">Max Degradation</span><span class="value">${co.maxPerformanceDegradation?co.maxPerformanceDegradation.toFixed(0)+'%':'N/A'}</span></div>`;
-
-          // Routing Matrix
-          const mx = Object.entries(models.routingMatrix||{});
-          if (mx.length > 0) {
-            let h = '<table><tr><th>Task Type</th><th>Planner</th><th>Executor</th></tr>';
-            for (const [tt, m] of mx) {
-              const isObj = m && typeof m === 'object';
-              const planner = isObj ? (m.planner||'-') : '-';
-              const executor = isObj ? (m.executor||'-') : String(m);
-              h += `<tr><td>${esc(tt)}</td><td style="color:var(--green)">${esc(modelName(planner))}</td><td style="color:var(--cyan)">${esc(modelName(executor))}</td></tr>`;
-            }
-            document.getElementById('model-routing-matrix').innerHTML = h+'</table>';
-          } else { document.getElementById('model-routing-matrix').innerHTML = '<div class="empty">No routing matrix</div>'; }
-
-          // Routing Decisions
-          const rd = models.recentRoutingDecisions || [];
-          if (rd.length > 0) {
-            let h = '<table><tr><th>Time</th><th>Model</th><th>Task</th><th>Tokens</th><th>Cost</th><th>Result</th></tr>';
-            for (const r of rd.slice(0,10)) {
-              const t = r.timestamp?r.timestamp.slice(11,19):'-';
-              h += `<tr><td style="color:var(--fg3);font-size:11px">${esc(t)}</td><td style="color:var(--purple)">${esc(modelName(r.modelUsed))}</td><td>${esc(r.taskType||'?')}</td><td>${fmt((r.tokensIn||0)+(r.tokensOut||0))}</td><td style="color:var(--green)">${typeof r.cost==='number'?'$'+r.cost.toFixed(4):'$0'}</td><td><span class="value ${r.success?'green':'red'}">${r.success?'OK':'FAIL'}</span></td></tr>`;
-            }
-            document.getElementById('model-routes').innerHTML = h+'</table>';
-          } else { document.getElementById('model-routes').innerHTML = '<div class="empty">No routing decisions yet</div>'; }
-
-          // Usage table
-          const usage = models.sessionUsage || [];
-          if (usage.length > 0) {
-            let h = '<table><tr><th>Model</th><th>Tasks</th><th>In</th><th>Out</th><th>Cost</th><th>Success</th></tr>';
-            for (const u of usage) {
-              const rate = typeof u.successRate==='number'?(u.successRate*100).toFixed(0):'0';
-              h += `<tr><td style="color:var(--cyan)">${esc(modelName(u.modelId))}</td><td>${u.taskCount||0}</td><td>${fmt(u.totalTokensIn||0)}</td><td>${fmt(u.totalTokensOut||0)}</td><td>$${(u.totalCost||0).toFixed(4)}</td><td><span class="value ${rate>=90?'green':rate>=70?'yellow':'red'}">${rate}%</span></td></tr>`;
-            }
-            document.getElementById('model-usage').innerHTML = h+'</table>';
-          } else { document.getElementById('model-usage').innerHTML = '<div class="empty">No usage recorded</div>'; }
-          setText('model-cost', '$'+(typeof models.totalCost==='number'?models.totalCost.toFixed(4):'0.0000'));
-        });
-
-        safe('memory', () => {
-          setText('mem-l1', l1.entries+' entries ('+l1.sizeKB+' KB)');
-          setText('mem-l2', l2.entries+' entries');
-          const l3El = document.getElementById('mem-l3');
-          if (l3El) { l3El.textContent = l3.status==='Running'?'Qdrant '+(l3.uptime||''):l3.status||'Stopped'; l3El.className = 'value '+(l3.status==='Running'?'green':'yellow'); }
-          setText('mem-l4', l4.entities+' entities, '+l4.relationships+' rels');
-          setText('mem-hits', hm.hits||0);
-          setText('mem-misses', hm.misses||0);
-          const hrStr = String(hm.hitRate||'N/A');
-          const hrVal = parseFloat(hrStr)||0;
-          setText('mem-hitrate', hrStr.includes('%')?hrStr:hrStr==='N/A'?hrStr:hrStr+'%');
-          const g = document.getElementById('mem-hitrate-gauge');
-          if (g) { g.style.width = Math.min(hrVal,100)+'%'; g.style.background = hrVal>80?'var(--green)':hrVal>50?'var(--yellow)':'var(--red)'; }
-          const hrEl = document.getElementById('mem-hitrate');
-          if (hrEl) hrEl.className = 'value '+(hrVal>80?'green':hrVal>50?'yellow':'red');
-        });
-
-        safe('compression', () => {
-          setText('comp-raw', Math.round((comp.rawBytes||0)/1024)+' KB');
-          setText('comp-ctx', Math.round((comp.contextBytes||0)/1024)+' KB');
-          setText('comp-savings', comp.savingsPercent||'0%');
-          setText('comp-calls', comp.totalCalls||0);
-        });
-
-        safe('memory-queries', () => {
-          const rq = mem.recentQueries || [];
-          if (rq.length > 0) {
-            let h = '<table><tr><th>Type</th><th>Query</th><th>Time</th></tr>';
-            for (const q of rq.slice(0,8)) h += `<tr><td><span class="badge active">${esc(q.type||'memory')}</span></td><td style="max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(q.query||'-')}</td><td style="color:var(--fg3);font-size:11px">${esc(q.timestamp?q.timestamp.slice(11,19):'-')}</td></tr>`;
-            document.getElementById('memory-recent-queries').innerHTML = h+'</table>';
-          } else { document.getElementById('memory-recent-queries').innerHTML = '<div class="empty">No recent queries</div>'; }
-        });
-
-        safe('session', () => {
-          const sp = document.getElementById('session-panel');
-          if (!session) { sp.style.display = 'none'; return; }
-          sp.style.display = '';
-          setText('sess-id', (session.sessionId||'').slice(0,12));
-          setText('sess-uptime', session.uptime||'-');
-          setText('sess-tokens', fmt(session.tokensUsed||0));
-          setText('sess-saved', fmt(session.tokensSaved||0));
-          setText('sess-tools', session.toolCalls||0);
-          setText('sess-checks', session.policyChecks||0);
-          setText('sess-blocks', session.policyBlocks||0);
-          setText('sess-errors', session.errors||0);
-          const td = document.getElementById('sess-token-io-detail');
-          if (td) td.innerHTML = (session.tokensIn>0||session.tokensOut>0) ? `<div class="kv"><span class="label">Tokens In</span><span class="value cyan">${fmt(session.tokensIn||0)}</span></div><div class="kv"><span class="label">Tokens Out</span><span class="value green">${fmt(session.tokensOut||0)}</span></div>` : '';
-          setText('sess-cost', '$'+(typeof session.totalCostUsd==='number'?session.totalCostUsd.toFixed(4):'0.0000'));
-          setText('sess-cost-without', '$'+(typeof session.estimatedCostWithoutUap==='number'?session.estimatedCostWithoutUap.toFixed(4):'0.0000'));
-          setText('sess-savings-pct', typeof session.costSavingsPercent==='number'?session.costSavingsPercent.toFixed(0)+'%':'0%');
-          const pw = document.getElementById('sess-progress-wrap');
-          if (session.stepsTotal>0) { pw.style.display=''; setText('sess-step-name',session.currentStep||'Working...'); setText('sess-step-count',(session.stepsCompleted||0)+'/'+session.stepsTotal); document.getElementById('sess-progress-bar').style.width=Math.round(((session.stepsCompleted||0)/session.stepsTotal)*100)+'%'; }
-          else { pw.style.display='none'; }
-
-          const agents = session.agents||[];
-          if (agents.length > 0) {
-            let ah=''; for (const a of agents) { const ml=a.model&&a.model!=='unknown'?' <span style="color:var(--purple);font-size:11px">'+esc(modelName(a.model))+'</span>':''; ah+=`<div class="agent-row"><span class="badge ${a.type||'main'}">${esc(a.type||'agent')}</span><span class="agent-name">${esc(a.name||a.id||'?')}${ml}</span><span class="badge ${a.status==='active'?'active':'idle'}">${esc(a.status||'idle')}</span><span class="agent-task">${esc(a.task||'-')}</span><span class="agent-tokens">${fmt(a.tokensUsed||0)} tok</span></div>`; }
-            document.getElementById('sess-agents').innerHTML = ah;
-            let bh='<table><tr><th>Agent</th><th>Model</th><th>Status</th><th>In</th><th>Out</th><th>Total</th><th>Cost</th></tr>';
-            for (const a of agents) { const tI=a.tokensIn||0,tO=a.tokensOut||0,tT=tI+tO||a.tokensUsed||0; bh+=`<tr><td style="font-weight:500">${esc(a.name||a.id||'?')}</td><td style="color:var(--purple)">${esc(modelName(a.model||'?'))}</td><td><span class="badge ${a.status==='active'?'active':a.status==='done'?'on':'idle'}">${esc(a.status||'idle')}</span></td><td>${fmt(tI)}</td><td>${fmt(tO)}</td><td style="font-weight:500">${fmt(tT)}</td><td style="color:var(--green)">${typeof a.cost==='number'?'$'+a.cost.toFixed(4):'$0.0000'}</td></tr>`; }
-            const tI=agents.reduce((s,a)=>s+(a.tokensIn||0),0),tO=agents.reduce((s,a)=>s+(a.tokensOut||0),0),tA=tI+tO||agents.reduce((s,a)=>s+(a.tokensUsed||0),0),tC=agents.reduce((s,a)=>s+(a.cost||0),0);
-            bh+=`<tr style="border-top:2px solid var(--border);font-weight:600"><td>TOTAL</td><td></td><td></td><td style="color:var(--cyan)">${fmt(tI)}</td><td style="color:var(--green)">${fmt(tO)}</td><td style="color:var(--purple)">${fmt(tA)}</td><td style="color:var(--green)">$${tC.toFixed(4)}</td></tr></table>`;
-            document.getElementById('sess-agent-breakdown').innerHTML = bh;
-          } else { document.getElementById('sess-agents').innerHTML='<div class="empty">No active agents</div>'; document.getElementById('sess-agent-breakdown').innerHTML='<div class="empty">No agent data</div>'; }
-
-          document.getElementById('sess-skills').innerHTML = (session.skills||[]).length>0 ? session.skills.map(s=>`<span class="chip ${s.active?'active':'inactive'}" title="${esc(s.reason||'')}">${esc(s.name||'?')}</span>`).join('') : '<span class="empty">No skills loaded</span>';
-          document.getElementById('sess-patterns').innerHTML = (session.patterns||[]).length>0 ? session.patterns.map(p=>`<span class="chip ${p.active?'active':'inactive'}" title="Weight: ${p.weight||0}">${esc(p.name||p.id||'?')}</span>`).join('') : '<span class="empty">No patterns matched</span>';
-          const batch = session.deployBatchSummary;
-          document.getElementById('sess-deploys').innerHTML = batch&&batch.totalActions>0 ? `<div class="kv"><span class="label">Total</span><span class="value">${batch.totalActions}</span></div><div class="kv"><span class="label">Done</span><span class="value green">${batch.done||0}</span></div><div class="kv"><span class="label">Failed</span><span class="value red">${batch.failed||0}</span></div><div class="kv"><span class="label">Saved</span><span class="value green">${batch.savedOps||0}</span></div>` : '<div class="empty">No deploys</div>';
-        });
-
-        safe('session-history', () => {
-          const sessions = data.sessions||[];
-          const hp = document.getElementById('session-history-panel');
-          if (!sessions.length) { hp.style.display='none'; return; }
-          hp.style.display='';
-          let h='<table><tr><th>Session</th><th>Started</th><th>Duration</th><th>Status</th><th>Model</th><th>In</th><th>Out</th><th>Total</th><th>Cost</th><th>Agents</th><th>Tasks</th></tr>';
-          for (const s of sessions) {
-            const isCur=s.status==='active', hl=isCur?' style="background:rgba(139,233,253,0.08)"':'', lb=isCur?' <span style="color:var(--cyan);font-size:10px">(live)</span>':'';
-            const tI=s.tokensIn||0,tO=s.tokensOut||0;
-            h+=`<tr${hl}><td style="font-weight:500">${esc(s.sessionId||'-').slice(0,12)}${lb}</td><td>${s.startedAt?new Date(s.startedAt).toLocaleString():'-'}</td><td>${s.durationMs>0?Math.round(s.durationMs/60000)+'m':'-'}</td><td><span class="badge ${isCur?'active':s.status==='completed'?'on':'idle'}">${esc(s.status||'?')}</span></td><td style="color:var(--purple)">${esc(modelName(s.model||'-'))}</td><td>${fmt(tI)}</td><td>${fmt(tO)}</td><td style="font-weight:500">${fmt(tI+tO)}</td><td style="color:var(--green)">${typeof s.totalCost==='number'?'$'+s.totalCost.toFixed(4):'$0.00'}</td><td>${s.agentCount||0}</td><td>${s.taskCount||0}</td></tr>`;
-          }
-          const sI=sessions.reduce((a,s)=>a+(s.tokensIn||0),0),sO=sessions.reduce((a,s)=>a+(s.tokensOut||0),0),sC=sessions.reduce((a,s)=>a+(s.totalCost||0),0),sT=sessions.reduce((a,s)=>a+(s.taskCount||0),0);
-          h+=`<tr style="border-top:2px solid var(--border);font-weight:600"><td>ALL (${sessions.length})</td><td></td><td></td><td></td><td></td><td style="color:var(--cyan)">${fmt(sI)}</td><td style="color:var(--green)">${fmt(sO)}</td><td style="color:var(--purple)">${fmt(sI+sO)}</td><td style="color:var(--green)">$${sC.toFixed(4)}</td><td></td><td>${sT}</td></tr></table>`;
-          document.getElementById('session-history-table').innerHTML = h;
-        });
-
-        // Unified Policies
-        safe('policies', () => {
-          const pm = new Map();
-          for (const p of policies) pm.set(p.name||p.id, {...p, source:'db'});
-          for (const pf of policyFiles) { if (!pm.has(pf.name)) pm.set(pf.name, {id:pf.filename, name:pf.name, category:pf.category, level:'-', enforcementStage:'-', isActive:null, tags:[], priority:0, source:'file'}); }
-          const all = [...pm.values()];
-          if (all.length > 0) {
-            let h='<table><tr><th>Name</th><th>Category</th><th>Level</th><th>Stage</th><th>Status</th><th>Actions</th></tr>';
-            for (const p of all) {
-              const isDb = p.source==='db';
-              const status = isDb ? `<span class="badge ${p.isActive?'on':'off'}">${p.isActive?'ON':'OFF'}</span>` : '<span class="badge file-only">FILE</span>';
-              const actions = isDb ? `<button class="btn" onclick="togglePolicy('${esc(p.id)}')">${p.isActive?'Disable':'Enable'}</button> <select onchange="setStage('${esc(p.id)}',this.value)">${['pre-exec','post-exec','review','always'].map(s=>`<option value="${s}" ${s===p.enforcementStage?'selected':''}>${s}</option>`).join('')}</select> <select onchange="setLevel('${esc(p.id)}',this.value)">${['REQUIRED','RECOMMENDED','OPTIONAL'].map(l=>`<option value="${l}" ${l===p.level?'selected':''}>${l}</option>`).join('')}</select>` : '<span style="color:var(--fg3);font-size:11px">file-only</span>';
-              h+=`<tr><td style="font-weight:500">${esc(p.name||'-')}</td><td>${esc(p.category||'-')}</td><td><span class="badge ${(p.level||'').toLowerCase()}">${esc(p.level||'-')}</span></td><td>${esc(p.enforcementStage||'-')}</td><td>${status}</td><td>${actions}</td></tr>`;
-            }
-            document.getElementById('policy-table').innerHTML = h+'</table>';
-            const stages = {'pre-exec':0,'post-exec':0,review:0,always:0};
-            for (const p of all) if (p.enforcementStage && stages[p.enforcementStage]!=null) stages[p.enforcementStage]++;
-            const maxS = Math.max(...Object.values(stages),1);
-            let sh=''; for (const [s,c] of Object.entries(stages)) sh+=`<div class="bar-container"><span class="bar-label">${esc(s)}</span><div class="bar cyan" style="width:${Math.round((c/maxS)*200)}px"></div><span class="bar-value">${c}</span></div>`;
-            document.getElementById('policy-stages').innerHTML = sh;
-          } else { document.getElementById('policy-table').innerHTML='<div class="empty">No policies</div>'; document.getElementById('policy-stages').innerHTML=''; }
-        });
-
-        safe('compliance', () => {
-          const fbm = compliance.failuresByMechanism || {};
-          const me = Object.entries(fbm);
-          if (me.length > 0) {
-            const max = Math.max(...me.map(([,v])=>v),1);
-            let h=''; for (const [m,c] of me.sort((a,b)=>b[1]-a[1])) h+=`<div class="bar-container"><span class="bar-label" style="width:120px">${esc(m)}</span><div class="bar red" style="width:${Math.round((c/max)*180)}px"></div><span class="bar-value">${c}</span></div>`;
-            document.getElementById('compliance-mechanisms').innerHTML = h;
-          } else { document.getElementById('compliance-mechanisms').innerHTML='<div class="empty">No failure mechanisms</div>'; }
-
-          const rf = compliance.recentFailures || [];
-          if (rf.length > 0) {
-            let h='<table><tr><th>Time</th><th>Policy</th><th>Op</th><th>Mechanism</th><th>Reason</th></tr>';
-            for (const f of rf.slice(0,10)) h+=`<tr><td style="color:var(--fg3);font-size:11px">${esc(f.executedAt?f.executedAt.slice(11,19):'-')}</td><td style="color:var(--red)">${esc(f.policyName||f.policyId||'-')}</td><td>${esc(f.operation||'-')}</td><td><span class="badge required">${esc(f.defeatedMechanism||'-')}</span></td><td style="color:var(--fg3);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(f.reason||'-')}</td></tr>`;
-            document.getElementById('compliance-failures').innerHTML = h+'</table>';
-          } else { document.getElementById('compliance-failures').innerHTML='<div class="empty">No recent failures</div>'; }
-        });
-
-        safe('audit', () => {
-          if (audit.length > 0) {
-            let h=''; for (const e of audit.slice(0,15)) {
-              const cls=e.allowed?'pass':'block', ts=typeof e.executedAt==='string'&&e.executedAt.length>=19?e.executedAt.slice(11,19):e.executedAt||'-';
-              h+=`<div class="audit-row"><span class="audit-time">${esc(ts)}</span><span class="audit-icon ${cls}">${e.allowed?'PASS':'BLOCK'}</span><span class="audit-policy" title="${esc(e.policyId||'')}">${esc(e.policyId?e.policyId.slice(0,8):'')}</span><span class="audit-op">${esc(e.operation||'')}</span><span class="audit-reason">${esc(e.reason||'')}</span></div>`;
-            }
-            document.getElementById('audit-trail').innerHTML = h;
-          } else { document.getElementById('audit-trail').innerHTML='<div class="empty">No audit entries</div>'; }
-        });
-
-        safe('kanban', () => renderKanban(tasks));
-        safe('savings', () => renderSavings(data.savingsByInfluence));
-        safe('orchestration', () => renderOrchestration(data.orchestrationTree));
-
-        safe('performance', () => {
-          const hp = (data.performance||{}).hotPaths || [];
-          const pp = document.getElementById('perf-panel');
-          if (!pp) return;
-          if (hp.length > 0) {
-            let h='<table><tr><th>Operation</th><th>Avg (ms)</th><th>P95 (ms)</th><th>Calls</th></tr>';
-            for (const p of hp) h+=`<tr><td style="color:var(--cyan)">${esc(p.name)}</td><td class="value ${p.avgMs>500?'red':p.avgMs>100?'yellow':'green'}">${p.avgMs}</td><td class="value ${p.p95Ms>1000?'red':p.p95Ms>300?'yellow':'green'}">${p.p95Ms}</td><td>${p.count}</td></tr>`;
-            pp.innerHTML = h+'</table>';
-          } else { pp.innerHTML='<div class="empty">No performance data</div>'; }
-        });
-
-        if (_errors.length > 0) {
-          let eb = document.getElementById('render-errors');
-          if (!eb) { eb=document.createElement('div'); eb.id='render-errors'; eb.style.cssText='position:fixed;bottom:0;left:0;right:0;background:var(--red);color:#fff;padding:8px 16px;font-size:12px;z-index:9999;max-height:120px;overflow:auto;'; document.body.appendChild(eb); }
-          eb.innerHTML='<strong>Render errors:</strong> '+_errors.map(e=>esc(e)).join(' | '); eb.style.display='';
-        } else { const eb=document.getElementById('render-errors'); if(eb) eb.style.display='none'; }
-      }
-
-      // ── API Actions ──
-      async function togglePolicy(id) { try { const r=await fetch(`${API_URL}/api/policy/${id}/toggle`,{method:'POST',headers:MUTATION_HEADERS}); if(!r.ok)throw new Error(); const d=await r.json(); showToast(`Policy ${d.isActive?'enabled':'disabled'}`,'success'); } catch { showToast('Failed to toggle policy','error'); } }
-      async function setStage(id,stage) { try { const r=await fetch(`${API_URL}/api/policy/${id}/stage`,{method:'POST',headers:{'Content-Type':'application/json',...MUTATION_HEADERS},body:JSON.stringify({stage})}); if(!r.ok)throw new Error(); showToast(`Stage: ${stage}`,'success'); } catch { showToast('Failed to set stage','error'); } }
-      async function setLevel(id,level) { try { const r=await fetch(`${API_URL}/api/policy/${id}/level`,{method:'POST',headers:{'Content-Type':'application/json',...MUTATION_HEADERS},body:JSON.stringify({level})}); if(!r.ok)throw new Error(); showToast(`Level: ${level}`,'success'); } catch { showToast('Failed to set level','error'); } }
-
-      // ── Kanban ──
-      const TYPE_ICONS = {task:'\u25C6',bug:'\uD83D\uDC1B',feature:'\u2728',epic:'\uD83C\uDFAF',chore:'\uD83D\uDD27',story:'\uD83D\uDCD6'};
-      const PRIO_LABELS = ['P0','P1','P2','P3','P4'];
-      let prevCardMap = new Map();
-      function renderSavings(sv) {
-        sv = sv || { influences: [], totalTokensSaved: 0, totalCostSavedUsd: 0 };
-        const badge = (q) => {
-          const c = q === 'measured' ? '#3fb950' : q === 'estimated' ? '#d29922' : '#484f58';
-          return `<span style="color:${c};font-size:10px;text-transform:uppercase;border:1px solid ${c};border-radius:3px;padding:1px 5px">${q}</span>`;
-        };
-        setHTML('savings-summary',
-          `<strong style="color:#58a6ff;font-size:18px">${fmt(sv.totalTokensSaved)}</strong> tokens · ` +
-          `<strong style="color:#3fb950;font-size:18px">$${(sv.totalCostSavedUsd||0).toFixed(2)}</strong> saved across all UAP influences`);
-        if (!sv.influences.length) { setHTML('savings-table', '<div class="empty">No savings data</div>'); return; }
-        // Unmeasured influences (e.g. routing with no UAP-driven calls yet) render an
-        // explicit dimmed "—" rather than a real-looking $0, so idle != broken.
-        const idleCell = '<span style="color:var(--fg3)" title="not active / no data recorded yet">\u2014</span>';
-        const rows = sv.influences.map(i => {
-          const idle = i.quality === 'unmeasured';
-          const tok = idle ? idleCell : fmt(i.tokensSaved);
-          const cost = idle ? idleCell : `<span style="color:#3fb950">$${(i.costSavedUsd||0).toFixed(4)}</span>`;
-          return `<tr${idle ? ' style="opacity:.55"' : ''}><td>${esc(i.influence)}</td>` +
-            `<td style="text-align:right">${tok}</td>` +
-            `<td style="text-align:right">${cost}</td>` +
-            `<td>${badge(i.quality)}</td><td style="color:var(--fg3);font-size:11px">${esc(i.detail||'')}</td></tr>`;
-        }).join('');
-        setHTML('savings-table',
-          `<table><thead><tr><th>Influence</th><th style="text-align:right">Tokens saved</th>` +
-          `<th style="text-align:right">Cost saved</th><th>Quality</th><th>Detail</th></tr></thead><tbody>${rows}</tbody></table>`);
-      }
-
-      function orchNode(n, depth) {
-        const pad = depth * 16;
-        const sc = { done:'#3fb950', in_progress:'#58a6ff', blocked:'#f85149', failed:'#f85149', open:'#8b949e', pending:'#8b949e' }[n.status] || '#8b949e';
-        const icon = n.type === 'epic' ? '🎯' : n.type === 'feature' ? '✨' : n.type === 'phase' ? '▶' : '•';
-        const agents = (n.agents && n.agents.length) ? ` <span style="color:#a371f7;font-size:10px">[${n.agents.join(', ')}]</span>` : '';
-        let html = `<div style="padding:3px 0 3px ${pad}px;border-left:1px solid var(--border)">` +
-          `<span style="color:${sc}">●</span> ${icon} <span>${esc((n.title||n.id).slice(0,70))}</span>` +
-          ` <span style="color:var(--fg3);font-size:10px">${n.status}</span>${agents}</div>`;
-        for (const c of (n.children||[])) html += orchNode(c, depth + 1);
-        return html;
-      }
-
-      function renderOrchestration(ot) {
-        ot = ot || { missions: [], ledger: null, agents: [], hasHierarchy: false };
-        setText('orch-label', `${ot.missions.length} root(s) · ${ot.agents.length} agent(s)`);
-        let html = '';
-        if (ot.ledger) {
-          const L = ot.ledger;
-          html += `<div style="margin-bottom:14px;padding:10px;background:var(--bg2);border-radius:6px">` +
-            `<div style="font-weight:600;margin-bottom:6px">Active build: ${L.mission.slice(0,80)} ` +
-            `<span style="color:#58a6ff">${L.done}/${L.total} (${L.pct}%)</span></div>`;
-          html += L.items.map(it => {
-            const sc = { done:'#3fb950', in_progress:'#58a6ff', failed:'#f85149', pending:'#8b949e' }[it.status] || '#8b949e';
-            const dep = it.deps && it.deps.length ? ` <span style="color:var(--fg3);font-size:10px">⇠ ${it.deps.join(',')}</span>` : '';
-            return `<div style="padding:2px 0"><span style="color:${sc}">●</span> ${it.kind==='epic'?'🎯':'•'} ${esc(it.title.slice(0,70))} <span style="color:var(--fg3);font-size:10px">${it.status}</span>${dep}</div>`;
-          }).join('');
-          html += `</div>`;
-        }
-        const withKids = ot.missions.filter(m => (m.children||[]).length > 0);
-        const shown = (withKids.length ? withKids : ot.missions).slice(0, 20);
-        if (!ot.ledger && shown.length === 0) { setHTML('orch-tree', '<div class="empty">No orchestrations yet — run an epic/orchestrated build</div>'); return; }
-        html += shown.map(m => orchNode(m, 0)).join('');
-        setHTML('orch-tree', html);
-      }
-
-      function renderKanban(tasks) {
-        const items=tasks.items||[], cols={open:[],in_progress:[],blocked:[],done:[],wont_do:[]}, ncm=new Map();
-        // A "family" is a group with real hierarchy anywhere on the board \u2014
-        // those get headers + indenting; standalone tasks keep the flat look.
-        const groupCounts=new Map(), families=new Set();
-        for (const i of items) {
-          if(cols[i.status]) cols[i.status].push(i); ncm.set(i.id,i.status);
-          const g=i.groupId||i.id; groupCounts.set(g,(groupCounts.get(g)||0)+1);
-          if((i.depth||0)>0) families.add(g);
-        }
-        for (const [g,n] of groupCounts) if(n>1) families.add(g);
-        setText('kb-open-count',cols.open.length); setText('kb-progress-count',cols.in_progress.length);
-        setText('kb-blocked-count',cols.blocked.length); setText('kb-done-count',cols.done.length); setText('kb-wontdo-count',cols.wont_do.length);
-        renderCol('kb-open',cols.open,ncm,families); renderCol('kb-progress',cols.in_progress,ncm,families); renderCol('kb-blocked',cols.blocked,ncm,families); renderCol('kb-done',cols.done,ncm,families); renderCol('kb-wontdo',cols.wont_do,ncm,families);
-        const p=document.getElementById('kanban-panel'); if(p) p.style.display=items.length>0?'':'none';
-        prevCardMap=ncm;
-      }
-      function renderCol(cid,items,ncm,families) {
-        const c=document.getElementById(cid); if(!c) return;
-        if(!items.length) { c.innerHTML='<div class="kanban-empty">No tasks</div>'; return; }
-        // Families first (clustered per group: root, then children by depth),
-        // then ungrouped singles \u2014 priority breaks ties everywhere.
-        const fam=families||new Set();
-        const sorted=[...items].sort((a,b)=>{
-          const ga=fam.has(a.groupId||a.id)?0:1, gb=fam.has(b.groupId||b.id)?0:1;
-          if(ga!==gb) return ga-gb;
-          if((a.groupId||a.id)!==(b.groupId||b.id))
-            // Tiebreak on groupId: distinct groups with identical titles
-            // (auto-created deliver missions) must not interleave.
-            return String(a.groupTitle||a.title||'').localeCompare(String(b.groupTitle||b.title||''))
-              || String(a.groupId||a.id).localeCompare(String(b.groupId||b.id));
-          if((a.depth||0)!==(b.depth||0)) return (a.depth||0)-(b.depth||0);
-          return (a.priority!=null?a.priority:2)-(b.priority!=null?b.priority:2);
-        });
-        const ids=new Set(items.map(i=>i.id));
-        c.querySelectorAll('.kanban-card').forEach(el=>{
-          if(ids.has(el.dataset.id)||el.classList.contains('card-exit')) return;
-          // Clear the inline animation:none that reconciliation sets on live
-          // cards — it outranks the .card-exit rule, and a never-starting
-          // animation means animationend never fires and the card never leaves.
-          el.style.animation='';
-          el.classList.add('card-exit');
-          el.addEventListener('animationend',()=>el.remove(),{once:true});
-          setTimeout(()=>el.remove(),600); // fallback if the animation is skipped
-        });
-        c.querySelectorAll('.kanban-group,.kanban-empty').forEach(el=>el.remove());
-        let lastGroup=null;
-        for (const item of sorted) {
-          const g=item.groupId||item.id;
-          if(fam.has(g)&&g!==lastGroup){
-            const h=document.createElement('div');h.className='kanban-group';h.textContent='\u25B8 '+(item.groupTitle||g);h.title=item.groupTitle||g;c.appendChild(h);
-          }
-          lastGroup=g;
-          let card=c.querySelector('.kanban-card[data-id="'+item.id+'"]');
-          if(!card){card=document.createElement('div');card.className='kanban-card';card.dataset.id=item.id;if(prevCardMap.has(item.id)&&prevCardMap.get(item.id)!==item.status){card.style.animation='none';requestAnimationFrame(()=>{card.style.animation='';});}}else{card.style.animation='none';}
-          c.appendChild(card); // appendChild moves existing nodes into group order
-          card.classList.toggle('card-child',(item.depth||0)>0);
-          const ti=TYPE_ICONS[item.type]||'\u25C6',pl=PRIO_LABELS[item.priority]||'P2',pc='p'+(item.priority!=null?item.priority:2),as=item.assignee?' \u00B7 '+esc(item.assignee):'';
-          // Grandchildren carry a breadcrumb to their direct parent \u2014 the group
-          // header only names the root.
-          const crumb=(item.depth||0)>1&&item.parentId?'<div class="card-crumb">\u21B3 '+esc(item.parentTitle||item.parentId)+'</div>':'';
-          card.innerHTML='<div style="display:flex;justify-content:space-between;align-items:center"><span class="card-id">'+esc(item.id)+'</span><span>'+ti+'</span></div>'+crumb+'<div class="card-title">'+esc(item.title||'Untitled')+'</div><div class="card-meta"><span class="card-priority '+pc+'">'+pl+'</span><span>'+esc(item.type)+as+'</span></div>';
-        }
-      }
-
-      // ── Helpers ──
-      function setText(id,val){const e=document.getElementById(id);if(e)e.textContent=String(val);}
-      function setHTML(id,html){const e=document.getElementById(id);if(e)e.innerHTML=html;}
-      function fmt(n){if(typeof n!=='number'||isNaN(n))return'0';return Math.round(n).toLocaleString();}
-      function capitalize(s){return s?s.charAt(0).toUpperCase()+s.slice(1):'';}
-      const MODEL_NAMES={'fable-5':'Fable 5','opus-4.8':'Claude Opus 4.8','opus-4.6':'Claude Opus 4.6','sonnet-5':'Claude Sonnet 5','sonnet-4.6':'Claude Sonnet 4.6','haiku-4.5':'Claude Haiku 4.5','qwen36-a3b':'Qwen 3.6 35B A3B','qwen35-a3b':'Qwen 3.5 35B A3B','qwen35':'Qwen 3.5 35B A3B','gpt-5.4':'GPT 5.4','gpt-5.3-codex':'GPT 5.3 Codex'};
-      function modelName(id){return MODEL_NAMES[id]||id||'unknown';}
-      function esc(s){const d=document.createElement('div');d.textContent=s||'';return d.innerHTML;}
-
-      // ── Init ──
-      connect();
-      connectSSE();
-
-      // Fallback poll
-      setInterval(async()=>{
-        if(ws&&ws.readyState===WebSocket.OPEN)return;
-        try{const r=await fetch(API_URL+'/api/dashboard');if(!r.ok)return;const d=await r.json();if(d)render(d);document.getElementById('ws-status').className='status-dot polling';document.getElementById('refresh-info').textContent='Polling - '+new Date().toLocaleTimeString();document.title='UAP Dashboard - Polling';}catch{}
-      }, REFRESH_MS);
-
-      // Resize: re-init charts
-      let resizeT;
-      window.addEventListener('resize',()=>{clearTimeout(resizeT);resizeT=setTimeout(()=>{chartsInit=false;chartTasks=chartCompression=chartDeploy=chartHitrate=chartCompliance=null;},300);});
     </script>
+    <script src="/dash/core.js"></script>
+    <script src="/dash/tabs.js"></script>
   </body>
 </html>