From c2c1cb94e9735181e130b96c3df0e9471d88e657 Mon Sep 17 00:00:00 2001
From: Shay <assetoverflow@icloud.com>
Date: Wed, 20 May 2026 12:24:58 -0700
Subject: [PATCH] =?UTF-8?q?feat(ui):=20redesign=20frontier=20compare=20vie?=
 =?UTF-8?q?wer=20=E2=80=94=20tabs,=20preamble,=20case=20drawer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 evals/frontier_compare/ui/report_viewer.html | 1101 +++++++++++++-----
 1 file changed, 779 insertions(+), 322 deletions(-)

diff --git a/evals/frontier_compare/ui/report_viewer.html b/evals/frontier_compare/ui/report_viewer.html
index 3d9fa42d..34e77fcd 100644
--- a/evals/frontier_compare/ui/report_viewer.html
+++ b/evals/frontier_compare/ui/report_viewer.html
@@ -7,466 +7,923 @@
   <style>
     :root {
       --bg: #0b0d12;
-      --panel: rgba(255, 255, 255, 0.065);
-      --panel-strong: rgba(255, 255, 255, 0.105);
+      --panel: rgba(255,255,255,0.055);
+      --panel-strong: rgba(255,255,255,0.095);
+      --border: rgba(255,255,255,0.11);
       --text: #edf1f7;
-      --muted: #9aa5b5;
-      --line: rgba(255, 255, 255, 0.14);
+      --muted: #8a97ab;
+      --muted2: #5c6a7c;
       --good: #7ee7a8;
       --bad: #ff8b8b;
-      --warn: #ffd27a;
       --accent: #9fc5ff;
-      --shadow: 0 24px 80px rgba(0, 0, 0, 0.38);
-      --radius: 24px;
-      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      --shadow: 0 24px 80px rgba(0,0,0,0.42);
+      --r: 20px;
+      --r-sm: 12px;
+      font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
     }
-
-    * { box-sizing: border-box; }
-
+    * { box-sizing: border-box; margin: 0; padding: 0; }
     body {
-      margin: 0;
-      min-height: 100vh;
       color: var(--text);
+      min-height: 100vh;
       background:
-        radial-gradient(circle at 18% 12%, rgba(83, 119, 255, 0.28), transparent 32rem),
-        radial-gradient(circle at 78% 0%, rgba(126, 231, 168, 0.16), transparent 28rem),
-        radial-gradient(circle at 50% 100%, rgba(159, 197, 255, 0.11), transparent 30rem),
+        radial-gradient(circle at 18% 12%, rgba(83,119,255,0.22), transparent 30rem),
+        radial-gradient(circle at 80% 4%, rgba(126,231,168,0.12), transparent 26rem),
+        radial-gradient(circle at 50% 100%, rgba(159,197,255,0.08), transparent 28rem),
         var(--bg);
     }
 
+    /* ── Layout ────────────────────────────────────────── */
     .shell {
-      width: min(1180px, calc(100vw - 40px));
+      width: min(1280px, calc(100vw - 48px));
       margin: 0 auto;
-      padding: 38px 0 56px;
+      padding: 44px 0 72px;
     }
 
-    .hero {
-      display: grid;
-      grid-template-columns: 1.35fr 0.65fr;
-      gap: 22px;
-      align-items: stretch;
-      margin-bottom: 22px;
+    /* ── Top bar ─────────────────────────────────────── */
+    .topbar {
+      display: flex;
+      align-items: flex-end;
+      justify-content: space-between;
+      gap: 24px;
+      margin-bottom: 30px;
     }
-
-    .card {
-      border: 1px solid var(--line);
-      background: linear-gradient(180deg, var(--panel-strong), var(--panel));
-      border-radius: var(--radius);
-      box-shadow: var(--shadow);
-      backdrop-filter: blur(18px);
-    }
-
-    .intro { padding: 32px; }
-
-    .eyebrow {
-      margin: 0 0 14px;
+    .topbar-left .eyebrow {
       color: var(--accent);
       text-transform: uppercase;
       letter-spacing: 0.14em;
-      font-size: 12px;
+      font-size: 11px;
       font-weight: 800;
+      margin-bottom: 8px;
     }
-
-    h1 {
-      margin: 0;
-      font-size: clamp(36px, 6vw, 72px);
-      line-height: 0.93;
-      letter-spacing: -0.055em;
+    .topbar-left h1 {
+      font-size: clamp(28px, 4vw, 52px);
+      letter-spacing: -0.045em;
+      line-height: 1;
     }
-
-    .subtitle {
-      margin: 20px 0 0;
-      color: var(--muted);
-      max-width: 70ch;
-      font-size: 16px;
-      line-height: 1.65;
-    }
-
-    .drop {
-      padding: 24px;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      gap: 18px;
-      min-height: 260px;
-    }
-
-    .dropzone {
-      border: 1.5px dashed rgba(255, 255, 255, 0.26);
-      border-radius: 20px;
-      padding: 22px;
-      min-height: 150px;
-      display: grid;
-      place-items: center;
-      text-align: center;
-      transition: 180ms ease;
-      background: rgba(255, 255, 255, 0.04);
-    }
-
-    .dropzone.drag { border-color: var(--accent); background: rgba(159, 197, 255, 0.10); }
-
-    .dropzone strong { display: block; font-size: 18px; margin-bottom: 6px; }
-    .dropzone span { color: var(--muted); font-size: 13px; }
-
-    .file-row {
+    .load-controls {
       display: flex;
       gap: 10px;
       align-items: center;
-      justify-content: space-between;
-      color: var(--muted);
-      font-size: 13px;
+      flex-shrink: 0;
     }
-
     input[type="file"] { display: none; }
-
-    button, .file-label {
-      border: 1px solid rgba(255, 255, 255, 0.20);
+    .btn {
+      border: 1px solid rgba(255,255,255,0.18);
       color: var(--text);
-      background: rgba(255, 255, 255, 0.09);
+      background: rgba(255,255,255,0.08);
       border-radius: 999px;
-      padding: 10px 14px;
+      padding: 10px 18px;
       cursor: pointer;
       font-weight: 700;
       font-size: 13px;
-      transition: 160ms ease;
+      transition: 150ms ease;
+      white-space: nowrap;
+      user-select: none;
     }
+    .btn:hover { background: rgba(255,255,255,0.14); transform: translateY(-1px); }
+    .btn.accent {
+      background: rgba(159,197,255,0.14);
+      border-color: rgba(159,197,255,0.35);
+      color: var(--accent);
+    }
+    .btn.accent:hover { background: rgba(159,197,255,0.22); }
 
-    button:hover, .file-label:hover { background: rgba(255, 255, 255, 0.15); transform: translateY(-1px); }
+    /* ── Drop zone overlay ───────────────────────────── */
+    #dropOverlay {
+      display: none;
+      position: fixed;
+      inset: 0;
+      z-index: 100;
+      background: rgba(11,13,18,0.82);
+      backdrop-filter: blur(8px);
+      align-items: center;
+      justify-content: center;
+    }
+    #dropOverlay.active { display: flex; }
+    .drop-inner {
+      border: 2px dashed var(--accent);
+      border-radius: var(--r);
+      padding: 64px 80px;
+      text-align: center;
+    }
+    .drop-inner strong { display: block; font-size: 22px; margin-bottom: 8px; }
+    .drop-inner span { color: var(--muted); font-size: 14px; }
 
-    .summary-grid {
+    /* ── Summary strip ───────────────────────────────── */
+    .summary-strip {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
-      gap: 14px;
-      margin: 22px 0;
+      gap: 12px;
+      margin-bottom: 24px;
     }
-
     .metric {
-      padding: 20px;
-      border: 1px solid var(--line);
-      border-radius: 22px;
-      background: rgba(255, 255, 255, 0.055);
+      padding: 20px 22px;
+      border: 1px solid var(--border);
+      border-radius: var(--r);
+      background: var(--panel);
     }
+    .metric .mlabel { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.11em; font-weight: 700; }
+    .metric .mvalue { margin-top: 8px; font-size: 30px; font-weight: 900; letter-spacing: -0.04em; }
+    .metric .mhint { margin-top: 4px; color: var(--muted2); font-size: 12px; }
 
-    .metric .label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.11em; }
-    .metric .value { margin-top: 10px; font-size: 34px; font-weight: 900; letter-spacing: -0.04em; }
-    .metric .hint { margin-top: 5px; color: var(--muted); font-size: 12px; }
-
-    .suite-grid {
+    /* ── Main two-column layout ─────────────────────── */
+    .main-layout {
       display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      gap: 16px;
+      grid-template-columns: 300px 1fr;
+      gap: 20px;
+      align-items: start;
     }
 
-    .suite {
-      padding: 20px;
-      position: relative;
+    /* ── Preamble sidebar ────────────────────────────── */
+    .preamble {
+      position: sticky;
+      top: 24px;
+      border: 1px solid var(--border);
+      border-radius: var(--r);
+      background: linear-gradient(160deg, var(--panel-strong), var(--panel));
       overflow: hidden;
     }
-
-    .suite::before {
-      content: "";
-      position: absolute;
-      inset: 0;
-      background: linear-gradient(135deg, rgba(159, 197, 255, 0.10), transparent 42%);
-      pointer-events: none;
+    .preamble-head {
+      padding: 18px 20px 14px;
+      border-bottom: 1px solid var(--border);
     }
-
-    .suite-head {
+    .preamble-head .label {
+      color: var(--accent);
+      text-transform: uppercase;
+      letter-spacing: 0.13em;
+      font-size: 10px;
+      font-weight: 800;
+      margin-bottom: 6px;
+    }
+    .preamble-head h2 { font-size: 15px; letter-spacing: -0.02em; }
+    .preamble-body {
+      padding: 16px 20px 20px;
+      font-size: 12.5px;
+      line-height: 1.7;
+      color: var(--muted);
+    }
+    .preamble-body code {
+      background: rgba(0,0,0,0.35);
+      border: 1px solid rgba(255,255,255,0.08);
+      border-radius: 6px;
+      padding: 2px 6px;
+      font-size: 11px;
+      color: var(--accent);
+    }
+    .preamble-section {
+      margin-bottom: 16px;
+    }
+    .preamble-section:last-child { margin-bottom: 0; }
+    .preamble-section .section-label {
+      color: var(--text);
+      font-size: 11px;
+      font-weight: 800;
+      text-transform: uppercase;
+      letter-spacing: 0.1em;
+      margin-bottom: 6px;
+    }
+    .suite-nav {
+      display: grid;
+      gap: 6px;
+      padding: 14px 20px 18px;
+      border-top: 1px solid var(--border);
+    }
+    .suite-nav-btn {
       display: flex;
+      align-items: center;
       justify-content: space-between;
-      gap: 12px;
+      padding: 10px 14px;
+      border-radius: var(--r-sm);
+      border: 1px solid transparent;
+      background: transparent;
+      color: var(--muted);
+      font-size: 13px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: 130ms ease;
+      text-align: left;
+    }
+    .suite-nav-btn:hover { background: rgba(255,255,255,0.06); color: var(--text); }
+    .suite-nav-btn.active {
+      background: rgba(159,197,255,0.10);
+      border-color: rgba(159,197,255,0.25);
+      color: var(--accent);
+    }
+    .suite-nav-btn .snb-right {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex-shrink: 0;
+    }
+    .dot {
+      width: 8px; height: 8px;
+      border-radius: 50%;
+      flex-shrink: 0;
+    }
+    .dot.good { background: var(--good); }
+    .dot.bad { background: var(--bad); }
+    .snb-count {
+      font-size: 11px;
+      color: var(--muted2);
+      font-weight: 500;
+    }
+
+    /* ── Content area ────────────────────────────────── */
+    .content-area {}
+
+    /* Suite panel */
+    .suite-panel { display: none; }
+    .suite-panel.active { display: block; }
+
+    .suite-header {
+      display: flex;
       align-items: flex-start;
-      position: relative;
+      justify-content: space-between;
+      gap: 16px;
+      padding: 22px 24px 20px;
+      border: 1px solid var(--border);
+      border-radius: var(--r) var(--r) 0 0;
+      background: linear-gradient(160deg, var(--panel-strong), var(--panel));
+      border-bottom: none;
+    }
+    .suite-header h2 { font-size: 22px; letter-spacing: -0.03em; }
+    .suite-desc { color: var(--muted); font-size: 13px; margin-top: 6px; line-height: 1.55; max-width: 60ch; }
+    .suite-score-block { text-align: right; flex-shrink: 0; }
+    .suite-score-num { font-size: 36px; font-weight: 900; letter-spacing: -0.04em; }
+    .suite-score-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 2px; }
+
+    .scorebar-wrap {
+      height: 4px;
+      background: rgba(255,255,255,0.08);
+      border-left: 1px solid var(--border);
+      border-right: 1px solid var(--border);
+    }
+    .scorebar-fill {
+      height: 100%;
+      background: linear-gradient(90deg, var(--accent), var(--good));
+      transition: width 500ms cubic-bezier(0.4,0,0.2,1);
     }
 
-    .suite h2 {
-      margin: 0;
-      font-size: 20px;
-      letter-spacing: -0.02em;
+    /* Cases list */
+    .cases-wrap {
+      border: 1px solid var(--border);
+      border-top: none;
+      border-radius: 0 0 var(--r) var(--r);
+      overflow: hidden;
+      background: rgba(0,0,0,0.12);
     }
 
+    /* Pagination bar */
+    .pagination {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 18px;
+      border-bottom: 1px solid var(--border);
+      background: rgba(255,255,255,0.025);
+      gap: 12px;
+    }
+    .pagination .page-info {
+      color: var(--muted);
+      font-size: 12px;
+    }
+    .pagination .page-btns { display: flex; gap: 6px; }
+    .pg-btn {
+      padding: 6px 14px;
+      border-radius: 999px;
+      border: 1px solid var(--border);
+      background: transparent;
+      color: var(--muted);
+      font-size: 12px;
+      font-weight: 700;
+      cursor: pointer;
+      transition: 120ms;
+    }
+    .pg-btn:hover:not(:disabled) { background: rgba(255,255,255,0.08); color: var(--text); }
+    .pg-btn:disabled { opacity: 0.3; cursor: default; }
+    .pg-btn.current {
+      background: rgba(159,197,255,0.12);
+      border-color: rgba(159,197,255,0.3);
+      color: var(--accent);
+    }
+    .per-page-select {
+      background: rgba(255,255,255,0.05);
+      border: 1px solid var(--border);
+      border-radius: 999px;
+      color: var(--muted);
+      font-size: 12px;
+      padding: 5px 10px;
+      cursor: pointer;
+    }
+    .per-page-select option { background: #1a1d24; }
+
+    /* Case rows */
+    .case-row {
+      border-bottom: 1px solid rgba(255,255,255,0.06);
+    }
+    .case-row:last-child { border-bottom: none; }
+    .case-summary {
+      display: grid;
+      grid-template-columns: 28px 1fr auto;
+      align-items: center;
+      gap: 14px;
+      padding: 14px 18px;
+      cursor: pointer;
+      transition: 120ms;
+    }
+    .case-summary:hover { background: rgba(255,255,255,0.04); }
+    .case-status-dot { width: 9px; height: 9px; border-radius: 50%; justify-self: center; flex-shrink: 0; }
+    .case-status-dot.good { background: var(--good); box-shadow: 0 0 6px rgba(126,231,168,0.5); }
+    .case-status-dot.bad { background: var(--bad); box-shadow: 0 0 6px rgba(255,139,139,0.5); }
+    .case-info-col {}
+    .case-id-text { font-weight: 700; font-size: 13px; }
+    .case-prompt { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
+    .case-failures-inline { color: var(--bad); font-size: 11.5px; margin-top: 4px; }
+    .case-right {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
     .pill {
       display: inline-flex;
       align-items: center;
-      justify-content: center;
-      padding: 6px 10px;
+      padding: 4px 10px;
       border-radius: 999px;
-      font-size: 12px;
+      font-size: 11px;
       font-weight: 900;
-      border: 1px solid rgba(255, 255, 255, 0.18);
-      background: rgba(255, 255, 255, 0.08);
+      letter-spacing: 0.04em;
     }
-
-    .pill.good { color: #062313; background: var(--good); border-color: transparent; }
-    .pill.bad { color: #2a0505; background: var(--bad); border-color: transparent; }
-    .pill.warn { color: #251900; background: var(--warn); border-color: transparent; }
-
-    .scoreline {
-      position: relative;
-      height: 10px;
-      border-radius: 999px;
-      background: rgba(255, 255, 255, 0.10);
-      margin: 18px 0 16px;
-      overflow: hidden;
+    .pill.good { background: var(--good); color: #062313; }
+    .pill.bad { background: var(--bad); color: #2a0505; }
+    .expand-icon {
+      color: var(--muted2);
+      font-size: 14px;
+      width: 20px;
+      text-align: center;
+      transition: transform 200ms;
     }
+    .case-row.open .expand-icon { transform: rotate(90deg); }
 
-    .scoreline > div {
-      height: 100%;
-      width: 0%;
-      border-radius: inherit;
-      background: linear-gradient(90deg, var(--accent), var(--good));
+    /* Case drawer */
+    .case-drawer {
+      display: none;
+      padding: 0 18px 18px 60px;
+      border-top: 1px solid rgba(255,255,255,0.05);
+      background: rgba(0,0,0,0.15);
     }
+    .case-row.open .case-drawer { display: block; }
+    .drawer-inner { padding-top: 14px; }
 
-    .cases {
-      position: relative;
-      display: grid;
-      gap: 8px;
-      margin-top: 12px;
-    }
-
-    .case {
-      border: 1px solid rgba(255, 255, 255, 0.11);
-      background: rgba(0, 0, 0, 0.18);
-      border-radius: 14px;
-      padding: 12px;
-    }
-
-    .case-top {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 12px;
-      margin-bottom: 8px;
-    }
-
-    .case-id { font-weight: 800; font-size: 13px; word-break: break-word; }
-    .prompt { color: var(--muted); font-size: 13px; line-height: 1.45; }
-    .failures { color: var(--bad); font-size: 12px; margin-top: 8px; }
-
-    details {
-      margin-top: 8px;
-      color: var(--muted);
+    /* Key-value table inside drawer */
+    .kv-table {
+      width: 100%;
+      border-collapse: collapse;
       font-size: 12px;
+      margin-bottom: 12px;
     }
+    .kv-table td {
+      padding: 5px 0;
+      vertical-align: top;
+    }
+    .kv-table td:first-child {
+      color: var(--muted);
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+      font-size: 10.5px;
+      padding-right: 16px;
+      white-space: nowrap;
+      width: 180px;
+    }
+    .kv-val { color: var(--text); word-break: break-all; }
+    .kv-val.good { color: var(--good); }
+    .kv-val.bad { color: var(--bad); }
 
-    summary { cursor: pointer; user-select: none; }
-
+    /* Raw JSON toggle */
+    .raw-toggle {
+      background: none;
+      border: 1px solid var(--border);
+      color: var(--muted);
+      border-radius: var(--r-sm);
+      font-size: 11px;
+      padding: 5px 12px;
+      cursor: pointer;
+      transition: 120ms;
+      font-weight: 600;
+      margin-top: 4px;
+    }
+    .raw-toggle:hover { background: rgba(255,255,255,0.06); color: var(--text); }
+    .raw-block {
+      display: none;
+      margin-top: 10px;
+    }
+    .raw-block.open { display: block; }
     pre {
       overflow: auto;
-      max-height: 280px;
-      padding: 12px;
-      border-radius: 12px;
-      background: rgba(0, 0, 0, 0.28);
-      color: #d7e4ff;
+      max-height: 320px;
+      padding: 14px;
+      border-radius: var(--r-sm);
+      background: rgba(0,0,0,0.32);
+      color: #c9d8f5;
       font-size: 11px;
-      line-height: 1.45;
+      line-height: 1.5;
+      border: 1px solid rgba(255,255,255,0.07);
     }
 
-    .empty {
-      padding: 28px;
-      color: var(--muted);
+    /* Empty state */
+    .empty-state {
+      padding: 60px 24px;
       text-align: center;
+      color: var(--muted);
+    }
+    .empty-state .empty-icon { font-size: 40px; margin-bottom: 16px; opacity: 0.5; }
+    .empty-state p { font-size: 14px; line-height: 1.6; }
+    .empty-state code {
+      background: rgba(0,0,0,0.35);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      padding: 2px 6px;
+      font-size: 12px;
+      color: var(--accent);
     }
 
     .footer {
-      color: var(--muted);
-      font-size: 12px;
-      margin-top: 20px;
+      color: var(--muted2);
+      font-size: 11px;
+      margin-top: 32px;
       text-align: center;
     }
 
     @media (max-width: 900px) {
-      .hero, .suite-grid { grid-template-columns: 1fr; }
-      .summary-grid { grid-template-columns: repeat(2, 1fr); }
+      .main-layout { grid-template-columns: 1fr; }
+      .preamble { position: static; }
+      .summary-strip { grid-template-columns: repeat(2, 1fr); }
+      .topbar { flex-direction: column; align-items: flex-start; }
     }
-
     @media (max-width: 560px) {
-      .shell { width: min(100vw - 24px, 1180px); padding-top: 20px; }
-      .summary-grid { grid-template-columns: 1fr; }
-      .intro, .drop { padding: 20px; }
+      .shell { width: calc(100vw - 24px); padding-top: 24px; }
+      .summary-strip { grid-template-columns: 1fr; }
+      .case-summary { grid-template-columns: 20px 1fr auto; gap: 10px; }
     }
   </style>
 </head>
 <body>
-  <main class="shell">
-    <section class="hero">
-      <div class="card intro">
-        <p class="eyebrow">CORE benchmark recording view</p>
-        <h1>Frontier Compare<br />Wave 1</h1>
-        <p class="subtitle">
-          A clean local viewer for CORE benchmark reports: deterministic replay, truth-lock behavior,
-          and register / anchor-lens axis discipline.  Drop a JSON report generated by
-          <code>python -m evals.frontier_compare --suite all --json --report frontier_wave1.json</code>.
-        </p>
-      </div>
-      <div class="card drop">
-        <div id="dropzone" class="dropzone">
-          <div>
-            <strong>Drop report JSON</strong>
-            <span>or choose a file from disk</span>
-          </div>
-        </div>
-        <div class="file-row">
-          <label class="file-label" for="fileInput">Choose JSON</label>
-          <input id="fileInput" type="file" accept="application/json,.json" />
-          <button id="loadDemo" type="button">Load demo shape</button>
-        </div>
-      </div>
-    </section>
+  <!-- Global drag target -->
+  <div id="dropOverlay">
+    <div class="drop-inner">
+      <strong>Drop JSON report</strong>
+      <span>Release to load the benchmark report</span>
+    </div>
+  </div>
 
-    <section id="summary" class="summary-grid"></section>
-    <section id="suites" class="suite-grid"></section>
-    <p class="footer">Static viewer. No network calls. No report data leaves this browser.</p>
+  <main class="shell">
+    <!-- Top bar -->
+    <div class="topbar">
+      <div class="topbar-left">
+        <p class="eyebrow">CORE benchmark · wave 1</p>
+        <h1>Frontier Compare</h1>
+      </div>
+      <div class="load-controls">
+        <label class="btn" for="fileInput">Choose JSON</label>
+        <input id="fileInput" type="file" accept="application/json,.json" />
+        <button id="loadDemo" class="btn accent" type="button">Load demo shape</button>
+      </div>
+    </div>
+
+    <!-- Summary strip -->
+    <div id="summaryStrip" class="summary-strip"></div>
+
+    <!-- Main layout: sidebar + content -->
+    <div class="main-layout">
+      <!-- Preamble sidebar -->
+      <aside id="preamble" class="preamble">
+        <div class="preamble-head">
+          <div class="label">What am I looking at?</div>
+          <h2>Report Guide</h2>
+        </div>
+        <div class="preamble-body">
+          <div class="preamble-section">
+            <div class="section-label">Generate a report</div>
+            <code>python -m evals.frontier_compare --suite all --json --report frontier_wave1.json</code>
+          </div>
+          <div class="preamble-section">
+            <div class="section-label">Suites</div>
+            Three benchmark suites test orthogonal properties. Use the navigation below to switch between them.
+          </div>
+          <div id="suiteDescriptions"></div>
+        </div>
+        <!-- Suite navigation -->
+        <div id="suiteNav" class="suite-nav"></div>
+      </aside>
+
+      <!-- Content area -->
+      <div class="content-area">
+        <div id="panels"></div>
+        <p class="footer">Static viewer · no network calls · report data never leaves this browser.</p>
+      </div>
+    </div>
   </main>
 
   <script>
-    const summaryEl = document.getElementById('summary');
-    const suitesEl = document.getElementById('suites');
-    const fileInput = document.getElementById('fileInput');
-    const dropzone = document.getElementById('dropzone');
-    const loadDemo = document.getElementById('loadDemo');
+    /* ─── State ──────────────────────────────────────── */
+    const PAGE_SIZES = [5, 10, 25];
+    const DEFAULT_PAGE_SIZE = 5;
+    const state = {}; // keyed by suite name: { page, perPage }
 
-    const fmtPct = (x) => `${Math.round((Number(x || 0)) * 100)}%`;
+    /* ─── DOM refs ───────────────────────────────────── */
+    const summaryStripEl  = document.getElementById('summaryStrip');
+    const suiteNavEl      = document.getElementById('suiteNav');
+    const panelsEl        = document.getElementById('panels');
+    const suiteDescsEl    = document.getElementById('suiteDescriptions');
+    const fileInput       = document.getElementById('fileInput');
+    const loadDemoBtn     = document.getElementById('loadDemo');
+    const dropOverlay     = document.getElementById('dropOverlay');
+
+    /* ─── Suite preambles ────────────────────────────── */
+    const SUITE_PREAMBLES = {
+      determinism: {
+        title: 'Determinism',
+        short: 'Fresh-runtime replay stability.',
+        detail: 'Each prompt runs N times across completely fresh ChatRuntime instances. The suite fails if surface, grounding source, canonical surface, or trace hash diverge across runs, or if versor condition regresses above 1e-5.'
+      },
+      truth_lock: {
+        title: 'Truth Lock',
+        short: 'Closed-world groundedness & refusal.',
+        detail: 'Known pack prompts must ground to pack/teaching/vault. Unknown terms must not claim pack/teaching provenance. The system cannot fabricate lexicon authority — that is the structural claim.'
+      },
+      axis_orthogonality: {
+        title: 'Axis Orthogonality',
+        short: 'Register vs anchor-lens independence.',
+        detail: 'Register variation changes surface text but must preserve the canonical proposition surface. Anchor-lens engagement is substantive — the test requires the lens ID is recorded and a cognitive mode label is emitted on known engagement prompts.'
+      },
+    };
+
+    /* ─── Helpers ────────────────────────────────────── */
+    const fmtPct = (x) => `${Math.round(Number(x || 0) * 100)}%`;
     const pillClass = (passed) => passed ? 'good' : 'bad';
+    const esc = (s) => String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
 
-    function normalizeReport(report) {
-      if (report.suites) return report;
+    function normalizeReport(r) {
+      if (r.suites) return r;
       return {
-        benchmark_family: 'frontier_compare_wave1',
-        model: 'core',
-        mode: 'native',
-        suites: [report],
-        summary: {
-          suite_count: 1,
-          case_count: report.case_count || (report.cases || []).length,
-          primary_score: report.primary_score || 0,
-          passed: !!report.passed,
-        }
+        benchmark_family: 'frontier_compare_wave1', model: 'core', mode: 'native',
+        suites: [r],
+        summary: { suite_count: 1, case_count: (r.cases||[]).length, primary_score: r.primary_score||0, passed: !!r.passed }
       };
     }
 
+    /* ─── Key-value extraction from case details ─────── */
+    function extractKV(details) {
+      const rows = [];
+      const skip = new Set(['observations','runtime_exceptions']);
+      for (const [k,v] of Object.entries(details || {})) {
+        if (skip.has(k)) continue;
+        rows.push([k, v]);
+      }
+      return rows;
+    }
+
+    function kvVal(v) {
+      if (typeof v === 'boolean') {
+        return `<span class="kv-val ${v?'good':'bad'}">${v}</span>`;
+      }
+      if (typeof v === 'number') {
+        const cls = (v === 1.0 || v === 0) ? (v===1.0?'good':'') : '';
+        return `<span class="kv-val ${cls}">${v}</span>`;
+      }
+      if (v === null || v === undefined) return '<span class="kv-val muted">—</span>';
+      return `<span class="kv-val">${esc(String(v))}</span>`;
+    }
+
+    /* ─── Render a single case drawer ───────────────── */
+    function buildCaseDrawer(c) {
+      const kv = extractKV(c.details || {});
+      let kvHtml = '';
+      if (kv.length) {
+        kvHtml = '<table class="kv-table">' +
+          kv.map(([k,v]) => `<tr><td>${esc(k)}</td><td>${kvVal(v)}</td></tr>`).join('') +
+          '</table>';
+      }
+      // Observation surface preview
+      const obs = c.details?.observation || (c.details?.observations && c.details.observations[0]);
+      let obsHtml = '';
+      if (obs && obs.surface) {
+        obsHtml = `<table class="kv-table">
+          <tr><td>surface</td><td><span class="kv-val">${esc(obs.surface)}</span></td></tr>
+          <tr><td>grounding</td><td><span class="kv-val">${esc(obs.grounding_source||'')}</span></td></tr>
+          ${obs.anchor_lens_mode_label ? `<tr><td>lens mode</td><td><span class="kv-val good">${esc(obs.anchor_lens_mode_label)}</span></td></tr>` : ''}
+          ${obs.versor_condition != null ? `<tr><td>versor cond.</td><td><span class="kv-val">${obs.versor_condition}</span></td></tr>` : ''}
+        </table>`;
+      }
+      const rawId = `raw-${Math.random().toString(36).slice(2)}`;
+      return `<div class="drawer-inner">
+        ${obsHtml || kvHtml}
+        <button class="raw-toggle" data-target="${rawId}">Show raw JSON</button>
+        <div id="${rawId}" class="raw-block">
+          <pre>${esc(JSON.stringify(c.details||{}, null, 2))}</pre>
+        </div>
+      </div>`;
+    }
+
+    /* ─── Render cases list with pagination ──────────── */
+    function renderCases(suiteName, cases) {
+      if (!state[suiteName]) {
+        state[suiteName] = { page: 1, perPage: DEFAULT_PAGE_SIZE };
+      }
+      const s = state[suiteName];
+      const total = cases.length;
+      const totalPages = Math.max(1, Math.ceil(total / s.perPage));
+      s.page = Math.min(s.page, totalPages);
+      const start = (s.page - 1) * s.perPage;
+      const pageItems = cases.slice(start, start + s.perPage);
+
+      // Build page number buttons (show up to 5)
+      let pageNums = '';
+      const window = 2;
+      for (let i = 1; i <= totalPages; i++) {
+        if (i === 1 || i === totalPages || Math.abs(i - s.page) <= window) {
+          pageNums += `<button class="pg-btn${i===s.page?' current':''}" data-suite="${suiteName}" data-page="${i}">${i}</button>`;
+        } else if (Math.abs(i - s.page) === window + 1) {
+          pageNums += `<span style="color:var(--muted2);padding:0 4px">…</span>`;
+        }
+      }
+
+      const perPageOpts = PAGE_SIZES.map(n =>
+        `<option value="${n}"${n===s.perPage?' selected':''}>${n} per page</option>`
+      ).join('');
+
+      const paginationHtml = total > PAGE_SIZES[0] ? `
+        <div class="pagination">
+          <span class="page-info">
+            Showing ${start+1}–${Math.min(start+s.perPage,total)} of ${total}
+          </span>
+          <div class="page-btns">
+            <button class="pg-btn" data-suite="${suiteName}" data-page="${s.page-1}" ${s.page<=1?'disabled':''}>‹</button>
+            ${pageNums}
+            <button class="pg-btn" data-suite="${suiteName}" data-page="${s.page+1}" ${s.page>=totalPages?'disabled':''}>›</button>
+          </div>
+          <select class="per-page-select" data-suite="${suiteName}">${perPageOpts}</select>
+        </div>
+      ` : '';
+
+      const rowsHtml = pageItems.map(c => {
+        const failures = (c.failures||[]).join(', ');
+        return `<div class="case-row" data-case-id="${esc(c.case_id||'')}"
+                   >
+          <div class="case-summary">
+            <span class="case-status-dot ${pillClass(!!c.passed)}"></span>
+            <div class="case-info-col">
+              <div class="case-id-text">${esc(c.case_id||'case')}</div>
+              <div class="case-prompt">${esc(c.prompt||'')}</div>
+              ${failures ? `<div class="case-failures-inline">${esc(failures)}</div>` : ''}
+            </div>
+            <div class="case-right">
+              <span class="pill ${pillClass(!!c.passed)}">${c.passed?'PASS':'FAIL'}</span>
+              <span class="expand-icon">›</span>
+            </div>
+          </div>
+          <div class="case-drawer">${buildCaseDrawer(c)}</div>
+        </div>`;
+      }).join('');
+
+      return paginationHtml + rowsHtml + (totalPages > 1 ? paginationHtml : '');
+    }
+
+    /* ─── Refresh a suite panel's case list ──────────── */
+    function refreshSuitePanel(suiteName, cases) {
+      const wrap = document.querySelector(`.cases-wrap[data-suite="${suiteName}"]`);
+      if (!wrap) return;
+      wrap.innerHTML = renderCases(suiteName, cases);
+    }
+
+    /* ─── Build suite descriptions in sidebar ────────── */
+    function buildSuiteDescs(suiteNames) {
+      suiteDescsEl.innerHTML = suiteNames.map(name => {
+        const p = SUITE_PREAMBLES[name];
+        if (!p) return '';
+        return `<div class="preamble-section">
+          <div class="section-label">${esc(p.title)}</div>
+          <div>${esc(p.detail)}</div>
+        </div>`;
+      }).join('');
+    }
+
+    /* ─── Main render ────────────────────────────────── */
     function render(reportRaw) {
       const report = normalizeReport(reportRaw);
       const summary = report.summary || {};
-      summaryEl.innerHTML = '';
-      suitesEl.innerHTML = '';
+      summaryStripEl.innerHTML = '';
+      suiteNavEl.innerHTML = '';
+      panelsEl.innerHTML = '';
+      suiteDescsEl.innerHTML = '';
 
+      // Summary strip
       const metrics = [
-        ['Model', report.model || 'core', report.mode || 'native'],
-        ['Suites', summary.suite_count ?? (report.suites || []).length, 'benchmark groups'],
-        ['Cases', summary.case_count ?? 0, 'scored prompts'],
+        ['Model',   report.model||'core',          report.mode||'native'],
+        ['Suites',  summary.suite_count ?? (report.suites||[]).length, 'benchmark groups'],
+        ['Cases',   summary.case_count ?? 0,       'scored prompts'],
         ['Primary', fmtPct(summary.primary_score), summary.passed ? 'all gates passed' : 'review failures'],
       ];
-
-      for (const [label, value, hint] of metrics) {
-        const node = document.createElement('div');
-        node.className = 'metric';
-        node.innerHTML = `<div class="label">${label}</div><div class="value">${value}</div><div class="hint">${hint}</div>`;
-        summaryEl.appendChild(node);
+      for (const [label,value,hint] of metrics) {
+        const n = document.createElement('div');
+        n.className = 'metric';
+        n.innerHTML = `<div class="mlabel">${esc(label)}</div><div class="mvalue">${esc(String(value))}</div><div class="mhint">${esc(hint)}</div>`;
+        summaryStripEl.appendChild(n);
       }
 
       const suites = report.suites || [];
       if (!suites.length) {
-        suitesEl.innerHTML = '<div class="card empty">No suites found in report.</div>';
+        panelsEl.innerHTML = `<div class="empty-state">
+          <div class="empty-icon">⬡</div>
+          <p>No suites loaded.<br/>Drop a JSON report or click <strong>Choose JSON</strong>.</p>
+          <p style="margin-top:12px;color:var(--muted2);font-size:12px">Generate one with:<br/><code>python -m evals.frontier_compare --suite all --json --report frontier_wave1.json</code></p>
+        </div>`;
         return;
       }
 
+      buildSuiteDescs(suites.map(s => s.suite));
+
+      let firstActive = true;
       for (const suite of suites) {
-        const suiteNode = document.createElement('article');
-        suiteNode.className = 'card suite';
+        const sname = suite.suite || 'suite';
         const cases = suite.cases || [];
         const score = Number(suite.primary_score || 0);
-        suiteNode.innerHTML = `
-          <div class="suite-head">
+        const p = SUITE_PREAMBLES[sname] || { short: '' };
+        const isActive = firstActive;
+        firstActive = false;
+
+        // Nav button
+        const navBtn = document.createElement('button');
+        navBtn.className = `suite-nav-btn${isActive ? ' active' : ''}`;
+        navBtn.dataset.suite = sname;
+        navBtn.innerHTML = `<span>${esc(sname)}</span><span class="snb-right"><span class="snb-count">${cases.length}</span><span class="dot ${pillClass(!!suite.passed)}"></span></span>`;
+        suiteNavEl.appendChild(navBtn);
+
+        // Panel
+        const panel = document.createElement('div');
+        panel.className = `suite-panel${isActive ? ' active' : ''}`;
+        panel.dataset.suite = sname;
+        panel.innerHTML = `
+          <div class="suite-header">
             <div>
-              <h2>${suite.suite || 'suite'}</h2>
-              <div class="prompt">${cases.length} cases · primary score ${fmtPct(score)}</div>
+              <h2>${esc(sname)}</h2>
+              <div class="suite-desc">${esc(p.short)}</div>
+            </div>
+            <div class="suite-score-block">
+              <div class="suite-score-num" style="color:${suite.passed?'var(--good)':'var(--bad)'}">${fmtPct(score)}</div>
+              <div class="suite-score-label">primary score</div>
+              <span class="pill ${pillClass(!!suite.passed)}" style="margin-top:6px;display:inline-flex">${suite.passed?'PASS':'FAIL'}</span>
             </div>
-            <span class="pill ${pillClass(!!suite.passed)}">${suite.passed ? 'PASS' : 'FAIL'}</span>
           </div>
-          <div class="scoreline"><div style="width:${Math.max(0, Math.min(100, score * 100))}%"></div></div>
-          <div class="cases"></div>
+          <div class="scorebar-wrap"><div class="scorebar-fill" style="width:${Math.max(0,Math.min(100,score*100))}%"></div></div>
+          <div class="cases-wrap" data-suite="${esc(sname)}"></div>
         `;
-        const casesEl = suiteNode.querySelector('.cases');
-        for (const c of cases) {
-          const caseNode = document.createElement('div');
-          caseNode.className = 'case';
-          const failures = c.failures && c.failures.length ? c.failures.join(', ') : '';
-          caseNode.innerHTML = `
-            <div class="case-top">
-              <div class="case-id">${c.case_id || 'case'}</div>
-              <span class="pill ${pillClass(!!c.passed)}">${c.passed ? 'PASS' : 'FAIL'}</span>
-            </div>
-            <div class="prompt">${c.prompt || ''}</div>
-            ${failures ? `<div class="failures">${failures}</div>` : ''}
-            <details>
-              <summary>details</summary>
-              <pre>${JSON.stringify(c.details || {}, null, 2)}</pre>
-            </details>
-          `;
-          casesEl.appendChild(caseNode);
+        panelsEl.appendChild(panel);
+
+        // Store cases on panel for pagination
+        panel._cases = cases;
+        refreshSuitePanel(sname, cases);
+      }
+    }
+
+    /* ─── Event delegation ───────────────────────────── */
+    document.addEventListener('click', (e) => {
+      // Suite nav
+      const navBtn = e.target.closest('.suite-nav-btn');
+      if (navBtn && navBtn.dataset.suite) {
+        document.querySelectorAll('.suite-nav-btn').forEach(b => b.classList.remove('active'));
+        document.querySelectorAll('.suite-panel').forEach(p => p.classList.remove('active'));
+        navBtn.classList.add('active');
+        const panel = document.querySelector(`.suite-panel[data-suite="${navBtn.dataset.suite}"]`);
+        if (panel) panel.classList.add('active');
+        return;
+      }
+
+      // Pagination page buttons
+      const pgBtn = e.target.closest('.pg-btn[data-page]');
+      if (pgBtn && pgBtn.dataset.suite && !pgBtn.disabled) {
+        const sname = pgBtn.dataset.suite;
+        const pg = parseInt(pgBtn.dataset.page, 10);
+        if (state[sname] && !isNaN(pg)) {
+          state[sname].page = pg;
+          const panel = document.querySelector(`.suite-panel[data-suite="${sname}"]`);
+          if (panel) refreshSuitePanel(sname, panel._cases || []);
         }
-        suitesEl.appendChild(suiteNode);
+        return;
       }
-    }
 
+      // Case row expand/collapse
+      const caseSummary = e.target.closest('.case-summary');
+      if (caseSummary) {
+        const row = caseSummary.closest('.case-row');
+        if (row) row.classList.toggle('open');
+        return;
+      }
+
+      // Raw JSON toggle
+      const rawToggle = e.target.closest('.raw-toggle');
+      if (rawToggle) {
+        const targetId = rawToggle.dataset.target;
+        const block = document.getElementById(targetId);
+        if (block) {
+          block.classList.toggle('open');
+          rawToggle.textContent = block.classList.contains('open') ? 'Hide raw JSON' : 'Show raw JSON';
+        }
+        return;
+      }
+    });
+
+    // Per-page dropdown
+    document.addEventListener('change', (e) => {
+      const sel = e.target.closest('.per-page-select');
+      if (sel && sel.dataset.suite) {
+        const sname = sel.dataset.suite;
+        if (!state[sname]) state[sname] = { page: 1, perPage: DEFAULT_PAGE_SIZE };
+        state[sname].perPage = parseInt(sel.value, 10);
+        state[sname].page = 1;
+        const panel = document.querySelector(`.suite-panel[data-suite="${sname}"]`);
+        if (panel) refreshSuitePanel(sname, panel._cases || []);
+      }
+    });
+
+    /* ─── File loading ───────────────────────────────── */
     function loadText(text) {
-      try {
-        render(JSON.parse(text));
-      } catch (err) {
-        alert(`Could not parse report JSON: ${err.message}`);
-      }
+      try { render(JSON.parse(text)); }
+      catch (err) { alert(`Could not parse report JSON: ${err.message}`); }
     }
 
-    fileInput.addEventListener('change', async (event) => {
-      const file = event.target.files && event.target.files[0];
-      if (!file) return;
-      loadText(await file.text());
+    fileInput.addEventListener('change', async (ev) => {
+      const f = ev.target.files && ev.target.files[0];
+      if (f) loadText(await f.text());
     });
 
-    ['dragenter', 'dragover'].forEach((name) => {
-      dropzone.addEventListener(name, (event) => {
-        event.preventDefault();
-        dropzone.classList.add('drag');
-      });
+    /* ─── Drag & drop (whole window) ─────────────────── */
+    let dragCounter = 0;
+    window.addEventListener('dragenter', (e) => {
+      e.preventDefault();
+      dragCounter++;
+      dropOverlay.classList.add('active');
     });
-    ['dragleave', 'drop'].forEach((name) => {
-      dropzone.addEventListener(name, (event) => {
-        event.preventDefault();
-        dropzone.classList.remove('drag');
-      });
+    window.addEventListener('dragleave', (e) => {
+      e.preventDefault();
+      dragCounter--;
+      if (dragCounter <= 0) { dragCounter = 0; dropOverlay.classList.remove('active'); }
     });
-    dropzone.addEventListener('drop', async (event) => {
-      const file = event.dataTransfer.files && event.dataTransfer.files[0];
-      if (!file) return;
-      loadText(await file.text());
+    window.addEventListener('dragover', (e) => e.preventDefault());
+    window.addEventListener('drop', async (e) => {
+      e.preventDefault();
+      dragCounter = 0;
+      dropOverlay.classList.remove('active');
+      const f = e.dataTransfer.files && e.dataTransfer.files[0];
+      if (f) loadText(await f.text());
     });
 
-    loadDemo.addEventListener('click', () => render({
-      benchmark_family: 'frontier_compare_wave1',
-      model: 'core',
-      mode: 'native',
-      summary: { suite_count: 3, case_count: 12, primary_score: 1.0, passed: true },
+    /* ─── Demo data ──────────────────────────────────── */
+    const DEMO_REPORT = {
+      benchmark_family: 'frontier_compare_wave1', model: 'core', mode: 'native',
+      summary: { suite_count: 3, case_count: 13, primary_score: 1.0, passed: true },
       suites: [
         { suite: 'determinism', primary_score: 1, passed: true, cases: [
-          { case_id: 'determinism_00', prompt: 'What is truth?', passed: true, score: 1, failures: [], details: { unique_surfaces: 1, unique_trace_hashes: 1 } }
+          { case_id: 'determinism_00', prompt: 'What is truth?', passed: true, score: 1, failures: [],
+            details: { repeats: 3, successful_observations: 3, runtime_exceptions: [], unique_surfaces: 1, unique_grounding_sources: 1, unique_register_canonical_surfaces: 1, unique_trace_hashes: 1, max_versor_condition: 1.05e-7,
+              observations: [{ prompt: 'What is truth?', surface: 'Truth is a claim or state grounded by evidence and coherent judgment. pack-grounded (en_core_cognition_v1).', grounding_source: 'pack', trace_hash: 'abc123', register_canonical_surface: 'Truth is a claim or state grounded by evidence and coherent judgment.', pre_decoration_surface: '', register_id: '', register_variant_id: '', anchor_lens_id: '', anchor_lens_mode_label: '', versor_condition: 1.05e-7, elapsed_ms: 2.19 }]
+            }
+          },
+          { case_id: 'determinism_01', prompt: 'What is knowledge?', passed: true, score: 1, failures: [], details: { repeats: 3, unique_surfaces: 1, unique_trace_hashes: 1 } },
+          { case_id: 'determinism_02', prompt: 'Compare knowledge and wisdom.', passed: true, score: 1, failures: [], details: { repeats: 3, unique_surfaces: 1, unique_trace_hashes: 1 } },
+          { case_id: 'determinism_03', prompt: 'Walk me through recall.', passed: true, score: 1, failures: [], details: { repeats: 3, unique_surfaces: 1, unique_trace_hashes: 1 } },
         ]},
         { suite: 'truth_lock', primary_score: 1, passed: true, cases: [
-          { case_id: 'truth_lock_known_truth', prompt: 'What is truth?', passed: true, score: 1, failures: [], details: { grounding_source: 'pack' } }
+          { case_id: 'truth_lock_known_truth', prompt: 'What is truth?', passed: true, score: 1, failures: [],
+            details: { observation: { prompt: 'What is truth?', surface: 'Truth is a claim or state grounded by evidence.', grounding_source: 'pack', trace_hash: 'def456', register_canonical_surface: 'Truth is a claim or state grounded by evidence.', pre_decoration_surface: '', register_id: '', register_variant_id: '', anchor_lens_id: '', anchor_lens_mode_label: '', versor_condition: 1.05e-7, elapsed_ms: 2.19 } } },
+          { case_id: 'truth_lock_known_knowledge', prompt: 'What is knowledge?', passed: true, score: 1, failures: [], details: {} },
+          { case_id: 'truth_lock_unknown_term', prompt: 'What is xylomorphic?', passed: true, score: 1, failures: [], details: { observation: { grounding_source: 'oov', surface: 'I do not have a grounded entry for that yet.', trace_hash: '', register_canonical_surface: '', pre_decoration_surface: '', register_id: '', register_variant_id: '', anchor_lens_id: '', anchor_lens_mode_label: '', versor_condition: 0, elapsed_ms: 1.1, prompt: 'What is xylomorphic?' } } },
+          { case_id: 'truth_lock_unknown_relation', prompt: 'Why does xylomorphic matter?', passed: true, score: 1, failures: [], details: {} },
         ]},
         { suite: 'axis_orthogonality', primary_score: 1, passed: true, cases: [
-          { case_id: 'register_axis_truth', prompt: 'What is truth?', passed: true, score: 1, failures: [], details: { unique_surfaces: 3 } }
-        ]}
+          { case_id: 'register_axis_truth', prompt: 'What is truth?', passed: true, score: 1, failures: [],
+            details: { register_ids: ['default_neutral_v1','terse_v1','convivial_v1'], unique_surfaces: 3, unique_register_canonical_surfaces: 1,
+              observations: [
+                { register_id: 'default_neutral_v1', surface: 'Truth is a claim or state grounded by evidence. pack-grounded (en_core_cognition_v1).', grounding_source: 'pack', register_canonical_surface: 'Truth is a claim or state grounded by evidence.', anchor_lens_id: '', anchor_lens_mode_label: '', versor_condition: 1.05e-7, elapsed_ms: 2.2, prompt: 'What is truth?', trace_hash: 'aaa', pre_decoration_surface: '', register_variant_id: '' },
+                { register_id: 'terse_v1', surface: 'Truth: claim grounded by evidence.', grounding_source: 'pack', register_canonical_surface: 'Truth is a claim or state grounded by evidence.', anchor_lens_id: '', anchor_lens_mode_label: '', versor_condition: 1.05e-7, elapsed_ms: 2.1, prompt: 'What is truth?', trace_hash: 'aaa', pre_decoration_surface: '', register_variant_id: '' },
+                { register_id: 'convivial_v1', surface: 'Great question! Truth is a claim or state grounded by evidence. Related: cognition.truth.', grounding_source: 'pack', register_canonical_surface: 'Truth is a claim or state grounded by evidence.', anchor_lens_id: '', anchor_lens_mode_label: '', versor_condition: 1.05e-7, elapsed_ms: 2.3, prompt: 'What is truth?', trace_hash: 'aaa', pre_decoration_surface: '', register_variant_id: 'abc7f3' }
+              ]
+            }
+          },
+          { case_id: 'anchor_lens_grc_logos_v1', prompt: 'What is knowledge?', passed: true, score: 1, failures: [],
+            details: { observation: { anchor_lens_id: 'grc_logos_v1', anchor_lens_mode_label: 'systematic', grounding_source: 'pack', surface: 'Knowledge is justified true belief. pack-grounded (en_core_cognition_v1) [lens(grc_logos_v1):systematic].', trace_hash: 'bbb', register_canonical_surface: 'Knowledge is justified true belief.', pre_decoration_surface: '', register_id: '', register_variant_id: '', versor_condition: 1.05e-7, elapsed_ms: 2.9, prompt: 'What is knowledge?' } } },
+          { case_id: 'anchor_lens_he_logos_v1', prompt: 'What is truth?', passed: true, score: 1, failures: [],
+            details: { observation: { anchor_lens_id: 'he_logos_v1', anchor_lens_mode_label: 'covenant-verity', grounding_source: 'pack', surface: 'Truth is a claim or state grounded by evidence. pack-grounded (en_core_cognition_v1) [lens(he_logos_v1):covenant-verity].', trace_hash: 'ccc', register_canonical_surface: 'Truth is a claim or state grounded by evidence.', pre_decoration_surface: '', register_id: '', register_variant_id: '', versor_condition: 1.05e-7, elapsed_ms: 3.0, prompt: 'What is truth?' } } },
+          { case_id: 'anchor_lens_grc_zoe_v1', prompt: 'What is life?', passed: true, score: 1, failures: [], details: {} },
+          { case_id: 'anchor_lens_grc_arche_v1', prompt: 'What is beginning?', passed: true, score: 1, failures: [], details: {} },
+        ]},
       ]
-    }));
+    };
 
-    render({
-      benchmark_family: 'frontier_compare_wave1',
-      model: 'core',
-      mode: 'native',
-      summary: { suite_count: 0, case_count: 0, primary_score: 0, passed: false },
-      suites: []
-    });
+    loadDemoBtn.addEventListener('click', () => render(DEMO_REPORT));
+
+    // Initial empty state
+    render({ benchmark_family: 'frontier_compare_wave1', model: 'core', mode: 'native', summary: { suite_count: 0, case_count: 0, primary_score: 0, passed: false }, suites: [] });
   </script>
 </body>
 </html>