npm - genoma-evolution - Versions diffs - 1.0.0 - Mend

genoma-evolution 1.0.0

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 (445) hide show

package/.claude/worktrees/phase-2-mcp/stitch/agent_dashboard/prototype.html ADDED Viewed

@@ -0,0 +1,676 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>GENOMA — Agent Evolution Dashboard</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<style>
+  :root {
+    --primary: #002444;
+    --primary-80: rgba(0,36,68,0.8);
+    --primary-10: rgba(0,36,68,0.1);
+    --primary-5: rgba(0,36,68,0.05);
+    --accent: #a93800;
+    --surface: #faf9fc;
+    --surface-low: #f4f3f6;
+    --surface-container: #eeedf1;
+    --on-surface: #1a1c1e;
+    --on-surface-variant: #43474e;
+    --outline: #73777f;
+    --outline-variant: #c3c6cf;
+    --success: #4caf50;
+    --success-bg: rgba(76,175,80,0.1);
+    --warning: #f59e0b;
+    --warning-bg: rgba(245,158,11,0.1);
+    --error: #ba1a1a;
+    --error-bg: rgba(186,26,26,0.1);
+    --neutral-bg: rgba(115,119,127,0.08);
+  }
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body { font-family: 'Inter', sans-serif; background: var(--surface); color: var(--on-surface); font-size: 14px; line-height: 20px; }
+  .mono { font-family: 'JetBrains Mono', monospace; }
+  /* Header */
+  .header {
+    height: 56px; background: var(--primary); display: flex; align-items: center;
+    justify-content: space-between; padding: 0 24px; position: sticky; top: 0; z-index: 100;
+  }
+  .header-left { display: flex; align-items: center; gap: 12px; color: white; font-weight: 600; font-size: 16px; }
+  .header-logo { width: 28px; height: 28px; background: rgba(255,255,255,0.15); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 16px; }
+  .header-status { display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,0.7); font-size: 13px; }
+  .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 6px var(--success); }
+  .header-user { color: rgba(255,255,255,0.7); font-size: 13px; cursor: pointer; }
+  /* Tabs */
+  .tabs {
+    height: 48px; background: var(--surface); border-bottom: 1px solid var(--outline-variant);
+    display: flex; align-items: flex-end; padding: 0 24px; position: sticky; top: 56px; z-index: 99;
+  }
+  .tab { padding: 12px 16px; cursor: pointer; font-size: 14px; color: var(--outline); border-bottom: 3px solid transparent; transition: all 0.15s; margin-bottom: -1px; }
+  .tab:hover { color: var(--on-surface); }
+  .tab.active { color: var(--primary); font-weight: 600; border-bottom-color: var(--primary); }
+  /* Layout */
+  .layout { display: flex; min-height: calc(100vh - 104px); }
+  .sidebar { width: 256px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--outline-variant); padding: 20px 16px; }
+  .main { flex: 1; padding: 24px; max-width: 1184px; }
+  .sidebar-section { margin-bottom: 24px; }
+  .sidebar-label { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; color: var(--outline); text-transform: uppercase; margin-bottom: 8px; }
+  .sidebar-item { padding: 8px 10px; border-radius: 4px; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--on-surface-variant); transition: background 0.1s; }
+  .sidebar-item:hover { background: var(--surface-low); }
+  .sidebar-item.active { background: var(--primary-10); color: var(--primary); font-weight: 500; }
+  .agent-dot { width: 7px; height: 7px; border-radius: 50%; }
+  /* Page title */
+  .page-title { font-size: 20px; font-weight: 600; margin-bottom: 20px; }
+  /* Stat cards */
+  .stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
+  .stat-card { background: white; border: 1px solid var(--primary-10); border-radius: 8px; padding: 16px; }
+  .stat-label { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; color: var(--on-surface-variant); text-transform: uppercase; margin-bottom: 8px; }
+  .stat-value { font-family: 'JetBrains Mono', monospace; font-size: 28px; font-weight: 500; color: var(--on-surface); line-height: 1; margin-bottom: 12px; }
+  .sparkline { height: 32px; background: linear-gradient(to right, var(--primary-10), var(--primary-5)); border-radius: 2px; position: relative; overflow: hidden; }
+  .sparkline-line { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--primary); opacity: 0.4; }
+  /* Section header */
+  .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
+  .section-title { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; color: var(--outline); text-transform: uppercase; }
+  /* Table */
+  .table-wrap { background: white; border: 1px solid var(--primary-10); border-radius: 8px; overflow: hidden; margin-bottom: 24px; }
+  table { width: 100%; border-collapse: collapse; }
+  thead tr { background: var(--surface-low); }
+  th { padding: 10px 16px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; color: var(--outline); text-align: left; text-transform: uppercase; }
+  td { padding: 0 16px; height: 40px; border-top: 1px solid var(--outline-variant); font-size: 13px; color: var(--on-surface); vertical-align: middle; }
+  tr:hover td { background: var(--surface-low); cursor: pointer; }
+  .td-mono { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--on-surface-variant); }
+  /* Pills */
+  .pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 500; }
+  .pill-success { color: var(--success); background: var(--success-bg); }
+  .pill-failure { color: var(--error); background: var(--error-bg); }
+  .pill-partial { color: var(--warning); background: var(--warning-bg); }
+  .score-badge { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 4px; }
+  .score-high { background: var(--primary); color: white; }
+  .score-mid { background: var(--warning-bg); color: #92400e; }
+  .score-low { background: var(--error-bg); color: var(--error); }
+  /* Agent chip */
+  .agent-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 4px; border: 1px solid var(--outline-variant); font-size: 12px; color: var(--primary); }
+  /* Delta indicator */
+  .delta { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 500; }
+  .delta-pos { color: var(--success); }
+  .delta-neg { color: var(--error); }
+  .delta-neu { color: var(--outline); }
+  /* Filter bar */
+  .filter-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
+  .filter-btn { padding: 6px 14px; border: 1px solid var(--outline-variant); border-radius: 4px; background: white; font-size: 13px; color: var(--on-surface); cursor: pointer; display: flex; align-items: center; gap: 6px; }
+  .filter-btn:hover { border-color: var(--primary); }
+  .filter-btn.active { background: var(--primary); color: white; border-color: var(--primary); }
+  .filter-spacer { flex: 1; }
+  .btn-secondary { padding: 6px 14px; border: 1px solid var(--primary); border-radius: 4px; background: white; font-size: 13px; color: var(--primary); cursor: pointer; }
+  .btn-primary { padding: 6px 14px; border: none; border-radius: 4px; background: var(--primary); font-size: 13px; color: white; cursor: pointer; }
+  /* Two-col */
+  .two-col { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
+  /* Score distribution */
+  .score-dist { background: white; border: 1px solid var(--primary-10); border-radius: 8px; padding: 16px; }
+  .bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
+  .bar-label { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--on-surface-variant); width: 90px; flex-shrink: 0; }
+  .bar-track { flex: 1; height: 8px; background: var(--surface-container); border-radius: 2px; overflow: hidden; }
+  .bar-fill { height: 100%; background: var(--primary); border-radius: 2px; }
+  .bar-value { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--on-surface); width: 32px; text-align: right; }
+  .dist-section { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; color: var(--outline); text-transform: uppercase; margin: 16px 0 10px; }
+  /* Drawer */
+  .drawer-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.2); z-index: 200; }
+  .drawer-overlay.open { display: block; }
+  .drawer { position: fixed; right: 0; top: 0; bottom: 0; width: 520px; background: white; box-shadow: -4px 0 24px rgba(0,0,0,0.1); z-index: 201; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.25s ease-out; }
+  .drawer-overlay.open .drawer { transform: translateX(0); }
+  .drawer-head { padding: 20px 20px 16px; border-bottom: 1px solid var(--outline-variant); }
+  .drawer-run-id { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--outline); margin-bottom: 4px; }
+  .drawer-task { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
+  .drawer-meta { font-size: 13px; color: var(--on-surface-variant); display: flex; align-items: center; gap: 12px; }
+  .drawer-close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border: none; background: var(--surface-low); border-radius: 4px; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; }
+  .drawer-body { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 20px; }
+  .drawer-section-title { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; color: var(--outline); text-transform: uppercase; margin-bottom: 12px; }
+  .agg-score-block { text-align: center; padding: 20px; background: var(--surface-low); border-radius: 8px; }
+  .agg-score-num { font-family: 'JetBrains Mono', monospace; font-size: 40px; font-weight: 500; color: var(--primary); line-height: 1; }
+  .score-bar { height: 8px; background: var(--surface-container); border-radius: 4px; margin-top: 12px; overflow: hidden; }
+  .score-bar-fill { height: 100%; background: var(--primary); border-radius: 4px; }
+  .breakdown-table { width: 100%; border-collapse: collapse; }
+  .breakdown-table th { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; color: var(--outline); text-transform: uppercase; padding: 6px 8px; text-align: left; }
+  .breakdown-table td { padding: 8px 8px; border-top: 1px solid var(--outline-variant); font-size: 13px; }
+  .breakdown-table tr.total td { background: var(--surface-low); font-weight: 600; }
+  .metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+  .metric-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--surface-low); }
+  .metric-key { font-size: 12px; color: var(--on-surface-variant); }
+  .metric-val { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--on-surface); }
+  .drawer-footer { padding: 16px 20px; border-top: 1px solid var(--outline-variant); display: flex; gap: 10px; }
+  /* Regression */
+  .regression-page { max-width: 900px; }
+  .run-selector { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 20px; }
+  .run-select-box { padding: 14px 16px; border: 1px solid var(--outline-variant); border-radius: 6px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; background: white; }
+  .run-select-label { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; color: var(--outline); text-transform: uppercase; margin-bottom: 6px; }
+  .run-select-id { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--primary); }
+  .run-select-task { font-size: 13px; color: var(--on-surface-variant); }
+  .delta-banner { padding: 14px 20px; border-radius: 6px; margin-bottom: 20px; display: flex; align-items: center; gap: 12px; }
+  .delta-banner.improvement { background: var(--success-bg); border: 1px solid var(--success); }
+  .delta-banner.regression { background: var(--error-bg); border: 1px solid var(--error); }
+  .delta-banner.neutral { background: var(--neutral-bg); border: 1px solid var(--outline-variant); }
+  .delta-banner-icon { font-size: 20px; }
+  .delta-banner-title { font-size: 14px; font-weight: 600; }
+  .delta-banner-sub { font-size: 13px; color: var(--on-surface-variant); }
+  .compare-table th, .compare-table td { padding: 10px 14px; border: 1px solid var(--outline-variant); font-size: 13px; }
+  .compare-table th { background: var(--surface-low); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--outline); }
+  .compare-table td.delta-pos { color: var(--success); font-family: 'JetBrains Mono', monospace; font-weight: 500; }
+  .compare-table td.delta-neg { color: var(--error); font-family: 'JetBrains Mono', monospace; font-weight: 500; }
+  .compare-table td.delta-neu { color: var(--outline); font-family: 'JetBrains Mono', monospace; }
+  .compare-table tr.improved td:first-child { border-left: 3px solid var(--success); }
+  .compare-table tr.regressed td:first-child { border-left: 3px solid var(--error); }
+  .threshold-row { display: flex; align-items: center; gap: 16px; padding: 12px 0; }
+  .threshold-label { font-size: 13px; color: var(--on-surface-variant); width: 80px; }
+  input[type=range] { flex: 1; accent-color: var(--primary); }
+  .threshold-val { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--primary); width: 36px; }
+  /* Tab content */
+  .tab-content { display: none; }
+  .tab-content.active { display: block; }
+</style>
+</head>
+<body>
+<!-- Header -->
+<div class="header">
+  <div class="header-left">
+    <div class="header-logo">⬡</div>
+    GENOMA
+  </div>
+  <div class="header-status">
+    <div class="status-dot"></div>
+    All Systems Active — last sync 3s ago
+  </div>
+  <div class="header-user">👤 Leandro</div>
+</div>
+<!-- Tabs -->
+<div class="tabs">
+  <div class="tab active" onclick="showTab('agents')">Agents</div>
+  <div class="tab" onclick="showTab('runs')">Runs</div>
+  <div class="tab" onclick="showTab('regression')">Regression</div>
+  <div class="tab" onclick="showTab('scorers')">Scorers</div>
+</div>
+<div class="layout">
+  <!-- Sidebar -->
+  <div class="sidebar">
+    <div class="sidebar-section">
+      <div class="sidebar-label">Agents</div>
+      <div class="sidebar-item active">
+        <div class="agent-dot" style="background:#4caf50"></div>
+        hermes
+      </div>
+      <div class="sidebar-item">
+        <div class="agent-dot" style="background:#4caf50"></div>
+        claude-code
+      </div>
+      <div class="sidebar-item">
+        <div class="agent-dot" style="background:#73777f"></div>
+        codex
+      </div>
+    </div>
+    <div class="sidebar-section">
+      <div class="sidebar-label">Quick Stats</div>
+      <div style="padding:8px 10px; font-size:12px; color:var(--on-surface-variant); line-height:22px;">
+        <div style="display:flex;justify-content:space-between"><span>Total runs</span><span class="mono">1,247</span></div>
+        <div style="display:flex;justify-content:space-between"><span>Avg success</span><span class="mono" style="color:var(--success)">87.4%</span></div>
+        <div style="display:flex;justify-content:space-between"><span>Avg score</span><span class="mono" style="color:var(--primary)">0.83</span></div>
+      </div>
+    </div>
+  </div>
+  <!-- Main -->
+  <div class="main">
+    <!-- ── AGENTS TAB ── -->
+    <div class="tab-content active" id="tab-agents">
+      <div class="page-title">Agent Overview</div>
+      <div class="stat-cards">
+        <div class="stat-card">
+          <div class="stat-label">Agents</div>
+          <div class="stat-value">3</div>
+          <div class="sparkline"><div class="sparkline-line"></div></div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-label">Total Runs</div>
+          <div class="stat-value">1,247</div>
+          <div class="sparkline"><div class="sparkline-line"></div></div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-label">Avg Success</div>
+          <div class="stat-value" style="color:var(--success)">87.4%</div>
+          <div class="sparkline"><div class="sparkline-line"></div></div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-label">Avg Agg. Score</div>
+          <div class="stat-value" style="color:var(--primary)">0.83</div>
+          <div class="sparkline"><div class="sparkline-line"></div></div>
+        </div>
+      </div>
+      <div class="two-col">
+        <div>
+          <div class="table-wrap">
+            <table>
+              <thead>
+                <tr>
+                  <th>Agent</th>
+                  <th>Runs</th>
+                  <th>Success</th>
+                  <th>Avg Tokens</th>
+                  <th>Agg Score</th>
+                  <th>Last Run</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr onclick="showTab('runs')">
+                  <td><div style="display:flex;align-items:center;gap:8px"><div class="agent-dot" style="background:var(--success)"></div><span style="font-weight:500">hermes</span></div></td>
+                  <td class="td-mono">524</td>
+                  <td><span style="color:var(--success);font-weight:500">94.2%</span></td>
+                  <td class="td-mono">6,240</td>
+                  <td><span class="score-badge score-high">0.89</span></td>
+                  <td class="td-mono" style="color:var(--outline)">2m ago</td>
+                </tr>
+                <tr onclick="showTab('runs')">
+                  <td><div style="display:flex;align-items:center;gap:8px"><div class="agent-dot" style="background:var(--success)"></div><span style="font-weight:500">claude-code</span></div></td>
+                  <td class="td-mono">412</td>
+                  <td><span style="color:var(--warning);font-weight:500">85.1%</span></td>
+                  <td class="td-mono">8,100</td>
+                  <td><span class="score-badge score-mid">0.81</span></td>
+                  <td class="td-mono" style="color:var(--outline)">15m ago</td>
+                </tr>
+                <tr onclick="showTab('runs')">
+                  <td><div style="display:flex;align-items:center;gap:8px"><div class="agent-dot" style="background:var(--outline)"></div><span style="font-weight:500">codex</span></div></td>
+                  <td class="td-mono">311</td>
+                  <td><span style="color:var(--error);font-weight:500">79.3%</span></td>
+                  <td class="td-mono">9,800</td>
+                  <td><span class="score-badge score-mid">0.76</span></td>
+                  <td class="td-mono" style="color:var(--outline)">1h ago</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+        <div class="score-dist">
+          <div class="section-title">Score Distribution</div>
+          <div style="margin-top:12px">
+            <div class="bar-row">
+              <div class="bar-label">hermes</div>
+              <div class="bar-track"><div class="bar-fill" style="width:89%"></div></div>
+              <div class="bar-value">0.89</div>
+            </div>
+            <div class="bar-row">
+              <div class="bar-label">claude-code</div>
+              <div class="bar-track"><div class="bar-fill" style="width:81%"></div></div>
+              <div class="bar-value">0.81</div>
+            </div>
+            <div class="bar-row">
+              <div class="bar-label">codex</div>
+              <div class="bar-track"><div class="bar-fill" style="width:76%"></div></div>
+              <div class="bar-value">0.76</div>
+            </div>
+          </div>
+          <div class="dist-section">By Scorer</div>
+          <div class="bar-row">
+            <div class="bar-label">outcome</div>
+            <div class="bar-track"><div class="bar-fill" style="width:91%"></div></div>
+            <div class="bar-value">0.91</div>
+          </div>
+          <div class="bar-row">
+            <div class="bar-label">tool_eff</div>
+            <div class="bar-track"><div class="bar-fill" style="width:68%"></div></div>
+            <div class="bar-value">0.68</div>
+          </div>
+          <div class="bar-row">
+            <div class="bar-label">token_cost</div>
+            <div class="bar-track"><div class="bar-fill" style="width:84%"></div></div>
+            <div class="bar-value">0.84</div>
+          </div>
+          <div class="bar-row">
+            <div class="bar-label">error_recov</div>
+            <div class="bar-track"><div class="bar-fill" style="width:80%"></div></div>
+            <div class="bar-value">0.80</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- ── RUNS TAB ── -->
+    <div class="tab-content" id="tab-runs">
+      <div class="page-title">Runs</div>
+      <div class="filter-bar">
+        <button class="filter-btn active">Agent ▾</button>
+        <button class="filter-btn">Outcome ▾</button>
+        <button class="filter-btn">Since: 7d ▾</button>
+        <div class="filter-spacer"></div>
+        <button class="btn-secondary">↓ Export</button>
+      </div>
+      <div class="table-wrap">
+        <table>
+          <thead>
+            <tr>
+              <th style="width:32px"><input type="checkbox"></th>
+              <th>Run ID</th>
+              <th>Agent</th>
+              <th>Task</th>
+              <th>Outcome</th>
+              <th>Agg Score</th>
+              <th>Time</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr onclick="openDrawer('run-001','Refactor auth module','hermes','success',0.91,3,7000)">
+              <td><input type="checkbox" onclick="event.stopPropagation()"></td>
+              <td class="td-mono">run-001</td>
+              <td><span class="agent-chip">⬡ hermes</span></td>
+              <td>Refactor auth module</td>
+              <td><span class="pill pill-success">✓ success</span></td>
+              <td><span class="score-badge score-high">0.91</span></td>
+              <td class="td-mono" style="color:var(--outline)">2m</td>
+            </tr>
+            <tr onclick="openDrawer('run-002','Fix N+1 query in list','claude-code','success',0.84,2,9100)">
+              <td><input type="checkbox" onclick="event.stopPropagation()"></td>
+              <td class="td-mono">run-002</td>
+              <td><span class="agent-chip">≡ claude-code</span></td>
+              <td>Fix N+1 query in list</td>
+              <td><span class="pill pill-success">✓ success</span></td>
+              <td><span class="score-badge score-mid">0.84</span></td>
+              <td class="td-mono" style="color:var(--outline)">15m</td>
+            </tr>
+            <tr onclick="openDrawer('run-003','Add dark mode toggle','claude-code','failure',0.21,0,4200)">
+              <td><input type="checkbox" onclick="event.stopPropagation()"></td>
+              <td class="td-mono">run-003</td>
+              <td><span class="agent-chip">≡ claude-code</span></td>
+              <td>Add dark mode toggle</td>
+              <td><span class="pill pill-failure">✗ failure</span></td>
+              <td><span class="score-badge score-low">0.21</span></td>
+              <td class="td-mono" style="color:var(--outline)">23m</td>
+            </tr>
+            <tr onclick="openDrawer('run-004','Optimize skill prompt','hermes','partial',0.55,1,18000)">
+              <td><input type="checkbox" onclick="event.stopPropagation()"></td>
+              <td class="td-mono">run-004</td>
+              <td><span class="agent-chip">⬡ hermes</span></td>
+              <td>Optimize skill prompt</td>
+              <td><span class="pill pill-partial">~ partial</span></td>
+              <td><span class="score-badge score-mid">0.55</span></td>
+              <td class="td-mono" style="color:var(--outline)">45m</td>
+            </tr>
+            <tr onclick="openDrawer('run-005','Implement search feature','codex','success',0.77,5,12000)">
+              <td><input type="checkbox" onclick="event.stopPropagation()"></td>
+              <td class="td-mono">run-005</td>
+              <td><span class="agent-chip">⊕ codex</span></td>
+              <td>Implement search feature</td>
+              <td><span class="pill pill-success">✓ success</span></td>
+              <td><span class="score-badge score-mid">0.77</span></td>
+              <td class="td-mono" style="color:var(--outline)">1h</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div style="display:flex;justify-content:space-between;align-items:center;color:var(--outline);font-size:13px;">
+        <span>Showing 1–50 of 584 runs</span>
+        <div style="display:flex;gap:8px">
+          <button class="btn-secondary">← Prev</button>
+          <button class="btn-primary">1</button>
+          <button class="btn-secondary">2</button>
+          <button class="btn-secondary">3</button>
+          <button class="btn-secondary">Next →</button>
+        </div>
+      </div>
+    </div>
+    <!-- ── REGRESSION TAB ── -->
+    <div class="tab-content" id="tab-regression">
+      <div class="regression-page">
+        <div class="page-title">Regression Detection</div>
+        <div class="run-selector">
+          <div>
+            <div class="run-select-label">Baseline</div>
+            <div class="run-select-box">
+              <div>
+                <div class="run-select-id">run-001</div>
+                <div class="run-select-task">hermes · Refactor auth module</div>
+              </div>
+              <span style="color:var(--outline)">▾</span>
+            </div>
+          </div>
+          <div>
+            <div class="run-select-label">Evolved</div>
+            <div class="run-select-box">
+              <div>
+                <div class="run-select-id">run-002</div>
+                <div class="run-select-task">claude-code · Fix N+1 query</div>
+              </div>
+              <span style="color:var(--outline)">▾</span>
+            </div>
+          </div>
+        </div>
+        <div class="threshold-row">
+          <div class="threshold-label">Threshold</div>
+          <input type="range" min="1" max="20" value="5" id="threshold-slider" oninput="updateThreshold(this.value)">
+          <div class="threshold-val" id="threshold-val">0.05</div>
+        </div>
+        <div class="delta-banner improvement" id="delta-banner">
+          <div class="delta-banner-icon" style="color:var(--success)">▲</div>
+          <div>
+            <div class="delta-banner-title" style="color:var(--success)">IMPROVEMENT DETECTED &nbsp;<span class="mono">+0.07</span> &nbsp;<span style="font-weight:400;font-size:12px;color:var(--on-surface-variant)">(threshold: 0.05)</span></div>
+            <div class="delta-banner-sub">Evolved run significantly outperforms baseline</div>
+          </div>
+        </div>
+        <div class="table-wrap">
+          <table class="compare-table" style="width:100%">
+            <thead>
+              <tr>
+                <th>Scorer</th>
+                <th>Baseline</th>
+                <th>Evolved</th>
+                <th>Delta</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td style="font-weight:600;font-size:14px;">Aggregate</td>
+                <td class="td-mono">0.84</td>
+                <td class="td-mono">0.91</td>
+                <td class="delta-pos">+0.07 ▲</td>
+              </tr>
+              <tr class="improved">
+                <td>outcome</td>
+                <td class="td-mono">1.00 ✓</td>
+                <td class="td-mono">1.00 ✓</td>
+                <td class="delta-neu">+0.00 ●</td>
+              </tr>
+              <tr class="improved">
+                <td>tool_efficiency</td>
+                <td class="td-mono">0.45 ✗</td>
+                <td class="td-mono">0.67 ✓</td>
+                <td class="delta-pos">+0.22 ▲</td>
+              </tr>
+              <tr class="regressed">
+                <td>token_cost</td>
+                <td class="td-mono">0.91 ✓</td>
+                <td class="td-mono">0.86 ✓</td>
+                <td class="delta-neg">-0.05 ▼</td>
+              </tr>
+              <tr>
+                <td>error_recovery</td>
+                <td class="td-mono">1.00 ✓</td>
+                <td class="td-mono">1.00 ✓</td>
+                <td class="delta-neu">+0.00 ●</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+    <!-- ── SCORERS TAB ── -->
+    <div class="tab-content" id="tab-scorers">
+      <div class="page-title">Scorers</div>
+      <div class="table-wrap">
+        <table>
+          <thead>
+            <tr>
+              <th>Scorer</th>
+              <th>Logic</th>
+              <th>Applies to</th>
+              <th>Pass condition</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td style="font-weight:500;font-family:'JetBrains Mono',monospace;font-size:12px">outcome</td>
+              <td style="font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--on-surface-variant)">success=1.0, partial=0.5, failure=0.0, unknown=0.3</td>
+              <td><span class="pill" style="background:var(--primary-5);color:var(--primary)">all runs</span></td>
+              <td class="td-mono">score > 0.5</td>
+            </tr>
+            <tr>
+              <td style="font-weight:500;font-family:'JetBrains Mono',monospace;font-size:12px">tool_efficiency</td>
+              <td style="font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--on-surface-variant)">unique_tools / total_calls</td>
+              <td><span class="pill" style="background:var(--neutral-bg);color:var(--outline)">w/ tool_calls</span></td>
+              <td class="td-mono">ratio > 0.3</td>
+            </tr>
+            <tr>
+              <td style="font-weight:500;font-family:'JetBrains Mono',monospace;font-size:12px">token_cost</td>
+              <td style="font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--on-surface-variant)">max(0, 1 - tokens/50000)</td>
+              <td><span class="pill" style="background:var(--neutral-bg);color:var(--outline)">w/ metrics</span></td>
+              <td class="td-mono">tokens &lt; 50,000</td>
+            </tr>
+            <tr>
+              <td style="font-weight:500;font-family:'JetBrains Mono',monospace;font-size:12px">error_recovery</td>
+              <td style="font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--on-surface-variant)">success_no_err=1.0, w_err=0.8, failure=0.0</td>
+              <td><span class="pill" style="background:var(--primary-5);color:var(--primary)">all runs</span></td>
+              <td class="td-mono">outcome = success</td>
+            </tr>
+            <tr>
+              <td style="font-weight:500;font-family:'JetBrains Mono',monospace;font-size:12px">delta</td>
+              <td style="font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--on-surface-variant)">wraps DeltaValidator (DSPy+GEPA holdout)</td>
+              <td><span class="pill" style="background:rgba(169,56,0,0.08);color:var(--accent)">hermes only</span></td>
+              <td class="td-mono">|Δ| ≥ threshold</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- Run Detail Drawer -->
+<div class="drawer-overlay" id="drawer-overlay" onclick="closeDrawer(event)">
+  <div class="drawer" id="drawer">
+    <button class="drawer-close" onclick="closeDrawerDirect()">✕</button>
+    <div class="drawer-head">
+      <div class="drawer-run-id" id="d-run-id">run-001</div>
+      <div class="drawer-task" id="d-task">Refactor auth module</div>
+      <div class="drawer-meta">
+        <span class="agent-chip" id="d-agent">⬡ hermes</span>
+        <span id="d-outcome"><span class="pill pill-success">✓ success</span></span>
+        <span style="color:var(--outline)">2m ago</span>
+      </div>
+    </div>
+    <div class="drawer-body">
+      <div>
+        <div class="drawer-section-title">Aggregate Score</div>
+        <div class="agg-score-block">
+          <div class="stat-label">AGGREGATE SCORE</div>
+          <div class="agg-score-num" id="d-agg-score">0.91</div>
+          <div class="score-bar"><div class="score-bar-fill" id="d-score-bar" style="width:91%"></div></div>
+        </div>
+      </div>
+      <div>
+        <div class="drawer-section-title">Scorer Breakdown</div>
+        <table class="breakdown-table">
+          <thead><tr><th>Scorer</th><th>Score</th><th>Passed</th><th>Details</th></tr></thead>
+          <tbody id="d-breakdown">
+          </tbody>
+        </table>
+      </div>
+      <div>
+        <div class="drawer-section-title">Metrics</div>
+        <div id="d-metrics"></div>
+      </div>
+    </div>
+    <div class="drawer-footer">
+      <button class="btn-primary" onclick="closeDrawerDirect();showTab('regression')">Compare with...</button>
+      <button class="btn-secondary">Re-evaluate</button>
+    </div>
+  </div>
+</div>
+<script>
+function showTab(name) {
+  document.querySelectorAll('.tab').forEach((t,i) => {
+    const tabs = ['agents','runs','regression','scorers'];
+    t.classList.toggle('active', tabs[i] === name);
+  });
+  document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
+  document.getElementById('tab-'+name).classList.add('active');
+}
+function openDrawer(runId, task, agent, outcome, aggScore, toolCalls, tokens) {
+  document.getElementById('d-run-id').textContent = runId;
+  document.getElementById('d-task').textContent = task;
+  document.getElementById('d-agent').textContent = (agent === 'hermes' ? '⬡ ' : '≡ ') + agent;
+  document.getElementById('d-agg-score').textContent = aggScore.toFixed(2);
+  document.getElementById('d-score-bar').style.width = (aggScore*100) + '%';
+  const outcomeEl = document.getElementById('d-outcome');
+  if (outcome === 'success') outcomeEl.innerHTML = '<span class="pill pill-success">✓ success</span>';
+  else if (outcome === 'failure') outcomeEl.innerHTML = '<span class="pill pill-failure">✗ failure</span>';
+  else outcomeEl.innerHTML = '<span class="pill pill-partial">~ partial</span>';
+  const tokenScore = Math.max(0, 1 - tokens/50000);
+  const toolScore = toolCalls > 0 ? 0.67 : 1.0;
+  const outcomeScore = outcome === 'success' ? 1.0 : outcome === 'partial' ? 0.5 : 0.0;
+  const errorScore = outcome === 'success' ? 1.0 : 0.0;
+  const rows = [
+    ['outcome', outcomeScore.toFixed(2), outcomeScore > 0.5, `outcome: ${outcome}`],
+    ['tool_efficiency', toolScore.toFixed(2), toolScore > 0.3, toolCalls > 0 ? `${toolCalls} calls` : 'no tools'],
+    ['token_cost', tokenScore.toFixed(2), tokens < 50000, `${tokens.toLocaleString()} tokens`],
+    ['error_recovery', errorScore.toFixed(2), outcome === 'success', `outcome: ${outcome}`],
+  ];
+  document.getElementById('d-breakdown').innerHTML = rows.map(([s,sc,p,d]) =>
+    `<tr><td class="mono" style="font-size:12px">${s}</td><td class="mono">${sc}</td><td>${p?'<span style="color:var(--success)">✓</span>':'<span style="color:var(--error)">✗</span>'}</td><td class="td-mono">${d}</td></tr>`
+  ).join('') + `<tr class="total"><td>aggregate</td><td class="mono">${aggScore.toFixed(2)}</td><td></td><td></td></tr>`;
+  document.getElementById('d-metrics').innerHTML = `
+    <div class="metric-row"><span class="metric-key">total_tokens</span><span class="metric-val">${tokens.toLocaleString()}</span></div>
+    <div class="metric-row"><span class="metric-key">tool_calls</span><span class="metric-val">${toolCalls}</span></div>
+    <div class="metric-row"><span class="metric-key">outcome</span><span class="metric-val">${outcome}</span></div>
+  `;
+  document.getElementById('drawer-overlay').classList.add('open');
+}
+function closeDrawer(e) { if (e.target === document.getElementById('drawer-overlay')) closeDrawerDirect(); }
+function closeDrawerDirect() { document.getElementById('drawer-overlay').classList.remove('open'); }
+function updateThreshold(val) {
+  document.getElementById('threshold-val').textContent = '0.0' + (val < 10 ? val : val);
+}
+</script>
+</body>
+</html>