Spaces:

SZLHOLDINGS
/

a11oy

Running

File size: 122,278 Bytes

<!DOCTYPE html>
<!-- SPDX-License-Identifier: Apache-2.0
     © 2026 SZL Holdings — a11oy Elite Console
     20 fully-functional tabs, zero mocks. Every tile bound to a REAL /api/a11oy/… endpoint.
     Doctrine v11 LOCKED · 749/14/163 · c7c0ba17 · Λ = Conjecture 1 (NOT a theorem)
     3D: Three.js r128 vendored. Inspiration: New Relic APM 360 + Palantir Foundry + Datadog.
     Co-Authored-By: Perplexity Computer Agent <agent@perplexity.ai>
     Signed-off-by: Stephen P. Lutar Jr. <stephenlutar2@gmail.com> -->
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<meta name="theme-color" content="#0d0b1e">
<title>a11oy · Elite Console — 20 Surfaces — SZL Holdings</title>
<!-- SOVEREIGN: 0 runtime CDN. Fonts self-hosted in-image, served same-origin at
     /vendor/fonts/*.woff2 (SAME pattern as the clean console). NO external font CDN. -->
<style>
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url('/vendor/fonts/SpaceGrotesk.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url('/vendor/fonts/JetBrainsMono.woff2') format('woff2');}
</style>
<style>
/* ═══════════════════ SZL Design System — Elite Palette ═══════════════════ */
:root {
  /* Core brand */
  --gold:#d4a574; --gold-bright:#f0c88a; --gold-dim:#7a5a30; --gold-glow:rgba(212,165,116,.25);
  --indigo:#0d0b1e; --indigo2:#13102a; --indigo3:#1a1640;
  --terra:#c0523a; --terra-dim:#8a3020;
  --parchment:#f4e4c1;
  /* Surfaces */
  --bg:#080617; --bg2:#0e0c22; --panel:#141130; --panel2:#0f0d26;
  --panel-hover:#1a1740; --line:#24204a; --line-bright:#3a3466;
  /* Text */
  --text:#f0e8d8; --text-dim:#b0a8c8; --text-muted:#6860a0;
  /* Semantic */
  --green:#3ecf7a; --green-dim:rgba(62,207,122,.15);
  --red:#e05050; --red-dim:rgba(224,80,80,.15);
  --amber:#e8b030; --amber-dim:rgba(232,176,48,.12);
  --blue:#4090f0; --blue-dim:rgba(64,144,240,.12);
  --purple:#5b8dee; --purple-dim:rgba(91,141,238,.12);
  --cyan:#30d8e0; --cyan-dim:rgba(48,216,224,.12);
  /* Type */
  --sans:'Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  /* Geometry */
  --r:12px; --r-lg:18px;
  --shadow:0 8px 32px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.3);
  --shadow-glow:0 0 40px var(--gold-glow);
}
[data-theme="light"] {
  --bg:#f0e8d8; --bg2:#e8dfc8; --panel:#fff8ec; --panel2:#fdf4e0;
  --panel-hover:#fff3d8; --line:#e0d0a8; --line-bright:#c8b888;
  --text:#180e40; --text-dim:#4a3e70; --text-muted:#8a7ab0;
  --shadow:0 8px 32px rgba(42,30,92,.12);
}

/* ═══ Reset & Base ═══ */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; height:100% }
body {
  font:14px/1.55 var(--sans); color:var(--text); background:var(--bg);
  overflow-x:hidden; min-height:100vh;
  background-image:
    radial-gradient(ellipse 80% 40% at 70% -5%, rgba(91,141,238,.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 30% at 0% 90%, rgba(212,165,116,.08) 0%, transparent 55%);
}
a { color:var(--gold); text-decoration:none }
a:hover { color:var(--gold-bright); text-decoration:underline }
code { font-family:var(--mono); font-size:.9em }
input, button, select { font:inherit }

/* ═══ Scrollbar ═══ */
::-webkit-scrollbar { width:6px; height:6px }
::-webkit-scrollbar-track { background:var(--bg2) }
::-webkit-scrollbar-thumb { background:var(--line-bright); border-radius:3px }

/* ═══ Fixed chrome ═══ */
.trace-badge {
  position:fixed; top:12px; left:16px; z-index:100;
  display:flex; align-items:center; gap:8px;
  background:color-mix(in srgb,var(--panel) 90%,transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line-bright); border-radius:999px;
  padding:5px 13px; font:600 10px/1 var(--mono); color:var(--text-dim);
}
.trace-badge .dot { width:7px; height:7px; border-radius:50%; background:var(--text-muted) }
.trace-badge.live .dot { background:var(--green); animation:pulse 1.8s infinite }
.trace-badge .tid { color:var(--cyan); max-width:160px; overflow:hidden; text-overflow:ellipsis }
@keyframes pulse {
  0%   { box-shadow:0 0 0 0 rgba(62,207,122,.7) }
  70%  { box-shadow:0 0 0 7px rgba(62,207,122,0) }
  100% { box-shadow:0 0 0 0 rgba(62,207,122,0) }
}

.doctrine-plaque {
  position:fixed; top:12px; right:16px; z-index:100;
  background:linear-gradient(135deg,color-mix(in srgb,var(--indigo3) 80%,transparent),var(--panel));
  border:1px solid var(--gold-dim); border-radius:10px;
  padding:8px 13px; font:600 10px/1.6 var(--mono); color:var(--text-dim);
  max-width:280px; box-shadow:var(--shadow);
}
.doctrine-plaque b { color:var(--gold) }
.doctrine-plaque .sep { color:var(--gold-dim) }

.theme-btn {
  position:fixed; bottom:20px; right:20px; z-index:100;
  width:42px; height:42px; border-radius:50%; border:1px solid var(--line-bright);
  background:var(--panel); color:var(--gold); font-size:18px; cursor:pointer;
  box-shadow:var(--shadow); display:grid; place-items:center;
  transition:transform .2s, box-shadow .2s;
}
.theme-btn:hover { transform:scale(1.1) rotate(15deg); box-shadow:var(--shadow-glow) }

/* ═══ Header ═══ */
.header {
  display:flex; align-items:center; gap:16px;
  padding:52px 24px 16px; max-width:1600px; margin:0 auto;
}
.logo { display:flex; align-items:center; gap:12px }
.logo svg { width:40px; height:40px; flex-shrink:0 }
.logo-text { display:flex; flex-direction:column; gap:2px }
.logo-name { font:900 20px/1 var(--sans); letter-spacing:-.5px }
.logo-name .accent { color:var(--terra) }
.logo-sub { font:500 11px/1.3 var(--mono); color:var(--text-muted) }
.header-spacer { flex:1 }
.slsa-badge {
  display:flex; align-items:center; gap:7px; padding:6px 12px;
  border:1px solid var(--green); border-radius:999px;
  font:700 10px/1 var(--mono); color:var(--green);
  background:var(--green-dim);
}

/* ═══ Tab Bar ═══ */
.tabbar-wrap {
  position:sticky; top:0; z-index:90;
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}
.tabbar {
  display:flex; gap:0; padding:0 16px; max-width:1600px; margin:0 auto;
  overflow-x:auto; scrollbar-width:none;
}
.tabbar::-webkit-scrollbar { display:none }
.tab-btn {
  flex-shrink:0; padding:11px 16px; font:600 11px/1 var(--sans);
  color:var(--text-muted); border:none; background:none; cursor:pointer;
  border-bottom:2px solid transparent; transition:color .15s, border-color .15s;
  letter-spacing:.2px; white-space:nowrap;
}
.tab-btn:hover { color:var(--text-dim) }
.tab-btn.active { color:var(--gold); border-bottom-color:var(--gold) }
.tab-btn .ti { margin-right:6px; font-size:13px }

/* ═══ Panels ═══ */
.panel-wrap { max-width:1600px; margin:0 auto; padding:20px 20px 40px }
.tab-panel { display:none }
.tab-panel.active { display:block }

/* ═══ Grid System ═══ */
.grid { display:grid; gap:16px }
.g-2 { grid-template-columns:1fr 1fr }
.g-3 { grid-template-columns:1fr 1fr 1fr }
.g-4 { grid-template-columns:1fr 1fr 1fr 1fr }
.g-2-1 { grid-template-columns:2fr 1fr }
.g-1-2 { grid-template-columns:1fr 2fr }
.g-3-1 { grid-template-columns:3fr 1fr }
@media(max-width:900px) { .g-2,.g-3,.g-4,.g-2-1,.g-1-2,.g-3-1 { grid-template-columns:1fr } }

/* ═══ Cards ═══ */
.card {
  background:linear-gradient(160deg,var(--panel),var(--panel2));
  border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; transition:border-color .2s, transform .18s;
  box-shadow:var(--shadow);
}
.card:hover { border-color:var(--line-bright); transform:translateY(-1px) }
.card-head {
  display:flex; align-items:center; gap:9px;
  padding:13px 16px; border-bottom:1px solid var(--line);
  font:700 12px/1 var(--sans); letter-spacing:.2px;
}
.card-head .icon { font-size:14px }
.card-head .pill {
  margin-left:auto; font:600 9px/1 var(--mono); padding:4px 8px;
  border:1px solid var(--gold-dim); border-radius:999px; color:var(--gold);
  background:var(--gold-glow);
}
.card-head .dot-status { width:8px; height:8px; border-radius:50%; flex-shrink:0 }
.dot-ok  { background:var(--green)!important; box-shadow:0 0 8px var(--green) }
.dot-warn { background:var(--amber)!important; box-shadow:0 0 8px var(--amber) }
.dot-err { background:var(--red)!important; box-shadow:0 0 8px var(--red) }
.dot-idle { background:var(--text-muted)!important }
.card-body { padding:16px }

/* ═══ Numbers & KPIs ═══ */
.kpi { display:flex; flex-direction:column; gap:4px }
.kpi-num { font:800 42px/1 var(--mono); color:var(--gold); letter-spacing:-1px }
.kpi-num.good { color:var(--green) }
.kpi-num.bad  { color:var(--red) }
.kpi-num.cyan { color:var(--cyan) }
.kpi-sub { font:500 11px/1.4 var(--mono); color:var(--text-muted) }
.kpi-label { font:600 10px/1 var(--sans); color:var(--text-dim); text-transform:uppercase; letter-spacing:.6px; margin-bottom:4px }

/* ═══ Bar / Progress ═══ */
.progress-row { display:flex; flex-direction:column; gap:5px; margin:8px 0 }
.progress-label { display:flex; justify-content:space-between; font:500 10px/1 var(--mono); color:var(--text-dim) }
.progress-track { height:5px; background:var(--line); border-radius:3px; overflow:hidden }
.progress-fill  { height:100%; border-radius:3px; transition:width .6s ease; background:var(--gold) }
.progress-fill.green { background:var(--green) }
.progress-fill.blue  { background:var(--blue) }
.progress-fill.cyan  { background:var(--cyan) }
.progress-fill.red   { background:var(--red) }

/* ═══ Tables ═══ */
.data-table { width:100%; border-collapse:collapse; font:11px/1.5 var(--mono) }
.data-table th {
  text-align:left; padding:7px 10px; font:600 9px/1 var(--sans);
  color:var(--text-muted); border-bottom:1px solid var(--line);
  text-transform:uppercase; letter-spacing:.6px; white-space:nowrap;
}
.data-table td { padding:7px 10px; border-bottom:1px solid color-mix(in srgb,var(--line) 50%,transparent); color:var(--text-dim) }
.data-table tr:hover td { background:color-mix(in srgb,var(--gold) 5%,transparent) }
.data-table .hash { color:var(--cyan); font-size:10px }
.data-table .pass-chip { display:inline-block; padding:2px 7px; border-radius:999px; font:600 9px/1 var(--sans) }
.data-table .pass { background:var(--green-dim); color:var(--green); border:1px solid var(--green) }
.data-table .fail { background:var(--red-dim); color:var(--red); border:1px solid var(--red) }
.data-table .warn { background:var(--amber-dim); color:var(--amber); border:1px solid var(--amber) }
.data-table .info { background:var(--blue-dim); color:var(--blue); border:1px solid var(--blue) }
.data-table .na { background:var(--line); color:var(--text-muted); border:1px solid var(--line-bright) }

/* ═══ Skeleton ═══ */
.sk {
  background:linear-gradient(90deg,var(--line) 25%,color-mix(in srgb,var(--line) 60%,var(--panel)) 37%,var(--line) 63%);
  background-size:400% 100%; animation:shimmer 1.6s ease infinite; border-radius:6px;
}
@keyframes shimmer { 0%{background-position:100% 0} 100%{background-position:-100% 0} }
.sk-line { height:12px; margin:8px 0 }
.sk-line.w80{width:80%} .sk-line.w60{width:60%} .sk-line.w40{width:40%}
.sk-block { height:56px; margin:8px 0 }

/* ═══ Tags / Chips ═══ */
.tag { display:inline-block; font:600 10px/1 var(--mono); padding:3px 8px; border-radius:6px; margin:2px }
.tag-gold { background:var(--gold-glow); border:1px solid var(--gold-dim); color:var(--gold) }
.tag-green { background:var(--green-dim); border:1px solid var(--green); color:var(--green) }
.tag-blue { background:var(--blue-dim); border:1px solid var(--blue); color:var(--blue) }
.tag-purple { background:var(--purple-dim); border:1px solid var(--purple); color:var(--purple) }
.tag-cyan { background:var(--cyan-dim); border:1px solid var(--cyan); color:var(--cyan) }
.tag-red { background:var(--red-dim); border:1px solid var(--red); color:var(--red) }
.tag-amber { background:var(--amber-dim); border:1px solid var(--amber); color:var(--amber) }
.tag-muted { background:var(--line); border:1px solid var(--line-bright); color:var(--text-muted) }

/* ═══ 3D Canvas Holders ═══ */
.canvas-3d {
  width:100%; border-radius:12px; overflow:hidden;
  background:radial-gradient(ellipse 60% 50% at 50% 40%,
    color-mix(in srgb,var(--indigo3) 80%,var(--purple-dim)),var(--bg));
  position:relative;
}
.canvas-3d canvas { display:block; width:100%!important }
.canvas-3d-label {
  position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
  font:600 10px/1 var(--mono); color:var(--text-muted);
  background:color-mix(in srgb,var(--panel) 80%,transparent);
  padding:4px 10px; border-radius:999px;
}

/* ═══ Axis Grid ═══ */
.axis-grid { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px }
.axis-item {
  flex:1; min-width:100px; padding:10px 12px;
  background:var(--panel2); border:1px solid var(--line);
  border-radius:10px; display:flex; flex-direction:column; gap:5px;
}
.axis-name { font:600 10px/1 var(--sans); color:var(--text-dim); text-transform:uppercase; letter-spacing:.4px }
.axis-score { font:800 16px/1 var(--mono); color:var(--gold) }
.axis-bar { height:3px; background:var(--line); border-radius:2px; overflow:hidden; margin-top:4px }
.axis-bar-fill { height:100%; background:linear-gradient(90deg,var(--indigo3),var(--gold)); border-radius:2px }

/* ═══ Organ Map ═══ */
#organ-map-3d { height:340px }
#khipu-dag-3d { height:300px }
#mesh-3d { height:300px }
#anatomy-3d-frame { width:100%; height:320px; border:none; border-radius:12px }

/* ═══ Code Block ═══ */
.codeblock {
  background:var(--bg2); border:1px solid var(--line); border-radius:10px;
  padding:14px 16px; font:12px/1.7 var(--mono); color:var(--text-dim);
  overflow-x:auto; white-space:pre-wrap; word-break:break-all;
}
.codeblock .kw { color:var(--cyan) }
.codeblock .str { color:var(--gold) }
.codeblock .num { color:var(--green) }
.codeblock .cmt { color:var(--text-muted) }

/* ═══ Verdict Theater ═══ */
.verdict-card {
  border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin:8px 0;
  background:linear-gradient(135deg,var(--panel2),var(--panel));
  transition:border-color .2s;
}
.verdict-card:hover { border-color:var(--gold-dim) }
.verdict-card .v-head { display:flex; align-items:center; gap:10px; margin-bottom:8px }
.verdict-card .v-verdict { font:800 11px/1 var(--mono); padding:3px 10px; border-radius:999px }
.v-pass { background:var(--green-dim); color:var(--green); border:1px solid var(--green) }
.v-fail { background:var(--red-dim); color:var(--red); border:1px solid var(--red) }
.verdict-card .v-action { font:700 13px/1 var(--sans); color:var(--text) }
.verdict-card .v-meta { font:11px/1.4 var(--mono); color:var(--text-muted) }
.verdict-card .v-witnesses { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px }

/* ═══ Gate Canvas ═══ */
.gate-group { margin-bottom:20px }
.gate-group-name {
  font:700 11px/1 var(--sans); color:var(--gold); text-transform:uppercase;
  letter-spacing:.6px; margin-bottom:10px; padding-bottom:6px;
  border-bottom:1px solid var(--line);
}
.gate-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:8px }
.gate-chip {
  padding:10px 12px; border-radius:10px; border:1px solid var(--line);
  background:var(--panel2); transition:border-color .15s, background .15s;
  cursor:pointer;
}
.gate-chip:hover { border-color:var(--gold-dim); background:var(--panel-hover) }
.gate-chip .gc-name { font:600 11px/1 var(--sans); color:var(--text-dim); word-break:break-word }
.gate-chip .gc-lean { font:10px/1 var(--mono); color:var(--cyan); margin-top:4px; word-break:break-all }
.gate-chip .gc-status { margin-top:6px }

/* ═══ Genome ═══ */
.genome-row {
  display:grid; grid-template-columns:140px 1fr 120px 100px;
  gap:12px; align-items:start; padding:10px 0;
  border-bottom:1px solid color-mix(in srgb,var(--line) 50%,transparent);
  font:12px/1.5 var(--mono);
}
.genome-row:hover { background:color-mix(in srgb,var(--gold) 4%,transparent); border-radius:6px }
.gen-formula { color:var(--gold); font-weight:700 }
.gen-lean { color:var(--cyan); font-size:10px; word-break:break-all }
.gen-organ { color:var(--purple) }
.gen-ep { color:var(--text-muted); font-size:10px }

/* ═══ SLO ═══ */
.slo-row {
  padding:14px 0; border-bottom:1px solid color-mix(in srgb,var(--line) 50%,transparent);
}
.slo-head { display:flex; align-items:center; gap:10px; margin-bottom:8px }
.slo-name { font:700 13px/1 var(--sans); color:var(--text) }
.slo-nums { display:flex; gap:16px; font:11px/1 var(--mono); color:var(--text-muted) }
.slo-nums span { color:var(--text-dim) }
.slo-nums b { color:var(--gold) }

/* ═══ Alerts ═══ */
.alert-row {
  display:flex; align-items:flex-start; gap:12px; padding:10px 0;
  border-bottom:1px solid color-mix(in srgb,var(--line) 50%,transparent);
}
.alert-icon { width:26px; height:26px; border-radius:6px; display:grid; place-items:center; font-size:12px; flex-shrink:0 }
.alert-icon.critical { background:var(--red-dim); color:var(--red) }
.alert-icon.warning  { background:var(--amber-dim); color:var(--amber) }
.alert-icon.info     { background:var(--blue-dim); color:var(--blue) }
.alert-content { flex:1 }
.alert-title { font:600 12px/1 var(--sans); color:var(--text); margin-bottom:4px }
.alert-detail { font:11px/1.4 var(--mono); color:var(--text-muted) }
.alert-ts { font:10px var(--mono); color:var(--text-muted); flex-shrink:0 }

/* ═══ Wire topology ═══ */
.wire-row { display:flex; align-items:center; gap:12px; padding:8px 0; border-bottom:1px solid color-mix(in srgb,var(--line) 50%,transparent) }
.wire-id { font:800 13px/1 var(--mono); color:var(--gold); width:24px }
.wire-name { font:600 11px/1 var(--sans); color:var(--text-dim); flex:1 }
.wire-status-chip { font:600 9px/1 var(--mono); padding:3px 8px; border-radius:999px }
.w-live { background:var(--green-dim); color:var(--green); border:1px solid var(--green) }
.w-roadmap { background:var(--amber-dim); color:var(--amber); border:1px solid var(--amber) }
.w-partial { background:var(--blue-dim); color:var(--blue); border:1px solid var(--blue) }

/* ═══ Receipt DSSE ═══ */
.dsse-row {
  padding:10px 12px; border-radius:10px; margin:6px 0;
  background:var(--panel2); border:1px solid var(--line);
  font:11px/1.6 var(--mono);
}
.dsse-row .dr-hash { color:var(--cyan) }
.dsse-row .dr-signed { color:var(--green) }
.dsse-row .dr-unsigned { color:var(--amber) }
.dsse-row .dr-ts { color:var(--text-muted); font-size:10px }

/* ═══ Verify panel ═══ */
.verify-box {
  background:var(--bg2); border:1px solid var(--line); border-radius:10px;
  padding:14px 16px;
}
.verify-box label { display:block; font:600 10px/1 var(--sans); color:var(--text-muted); margin-bottom:6px; text-transform:uppercase; letter-spacing:.5px }
.verify-box textarea {
  width:100%; height:80px; background:var(--bg); border:1px solid var(--line);
  color:var(--text-dim); border-radius:8px; padding:10px; resize:vertical;
  font:11px/1.5 var(--mono); outline:none; transition:border-color .15s;
}
.verify-box textarea:focus { border-color:var(--gold-dim) }
.btn {
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 16px; border-radius:8px; border:1px solid var(--gold-dim);
  background:var(--gold-glow); color:var(--gold); font:600 11px/1 var(--sans);
  cursor:pointer; transition:background .15s, border-color .15s;
}
.btn:hover { background:color-mix(in srgb,var(--gold) 20%,transparent); border-color:var(--gold) }
.btn.sm { padding:6px 12px; font-size:10px }
.btn-danger { border-color:var(--red); background:var(--red-dim); color:var(--red) }
.verify-result { margin-top:10px; padding:10px 12px; border-radius:8px; font:11px/1.5 var(--mono) }
.verify-result.ok  { background:var(--green-dim); color:var(--green); border:1px solid var(--green) }
.verify-result.err { background:var(--red-dim); color:var(--red); border:1px solid var(--red) }

/* ═══ Compliance ═══ */
.compliance-framework { margin-bottom:20px }
.cf-header { font:700 12px/1 var(--sans); color:var(--gold); margin-bottom:10px; display:flex; align-items:center; gap:8px }
.cf-control {
  display:flex; align-items:flex-start; gap:10px; padding:9px 12px;
  border-radius:8px; background:var(--panel2); border:1px solid var(--line); margin:5px 0;
}
.cf-art { font:700 10px/1 var(--mono); color:var(--cyan); flex-shrink:0; min-width:140px }
.cf-rationale { font:11px/1.5 var(--sans); color:var(--text-dim) }

/* ═══ Lineage ═══ */
.lineage-node {
  position:relative; padding-left:24px; margin:6px 0;
  font:11px/1.5 var(--mono); color:var(--text-dim);
}
.lineage-node::before {
  content:''; position:absolute; left:8px; top:4px;
  width:8px; height:8px; border-radius:50%; background:var(--gold);
}
.lineage-node::after {
  content:''; position:absolute; left:11px; top:12px;
  width:2px; height:calc(100% + 4px); background:var(--line);
}
.lineage-node:last-child::after { display:none }
.ln-hash { color:var(--cyan) }
.ln-action { color:var(--gold) }

/* ═══ Formula Try-it ═══ */
.formula-card { margin-bottom:16px; border:1px solid var(--line); border-radius:12px; overflow:hidden }
.formula-head {
  display:flex; align-items:center; gap:10px; padding:12px 16px;
  background:linear-gradient(90deg,var(--panel2),var(--panel));
  border-bottom:1px solid var(--line); cursor:pointer;
}
.formula-head .fn { font:700 13px/1 var(--sans); color:var(--gold) }
.formula-head .fl { font:10px/1 var(--mono); color:var(--cyan); flex:1 }
.formula-body { padding:14px 16px; display:none }
.formula-body.open { display:block }
.try-row { display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap; margin-top:10px }
.try-row input {
  flex:1; min-width:80px; padding:7px 10px; background:var(--bg);
  border:1px solid var(--line); color:var(--text); border-radius:7px; font-size:12px;
  transition:border-color .15s;
}
.try-row input:focus { outline:none; border-color:var(--gold-dim) }
.try-result { margin-top:10px; padding:10px; border-radius:8px; background:var(--bg2); border:1px solid var(--line); font:11px/1.5 var(--mono); color:var(--text-dim) }
.try-result .tr-val { color:var(--gold); font-weight:700 }

/* ═══ Honest footer ═══ */
.honest-footer {
  margin-top:32px; padding:20px 24px;
  border-top:1px solid var(--line); text-align:center;
  font:10px/1.8 var(--mono); color:var(--text-muted);
  max-width:1600px; margin-left:auto; margin-right:auto;
}
.honest-footer b { color:var(--gold) }
.honest-footer a { color:var(--cyan) }

/* ═══ Responsive ═══ */
@media(max-width:768px) {
  .header { padding-top:14px; flex-wrap:wrap }
  .doctrine-plaque { position:static; max-width:none; margin:8px 0 }
  .trace-badge { position:static; margin:8px 0; display:inline-flex }
  .panel-wrap { padding:12px }
}
</style>
</head>
<body>

<!-- Fixed Chrome -->
<div class="trace-badge" id="traceBadge">
  <span class="dot"></span>
  <span>traceparent</span>
  <span class="tid" id="traceId">—</span>
</div>

<div class="doctrine-plaque">
  <b>v11 LOCKED</b> <span class="sep">·</span> 749/<span id="dp-decl">14</span>/163
  <span class="sep">·</span> <b>c7c0ba17</b><br>
  Λ = <b>Conjecture 1</b> <span class="sep">·</span>
  SLSA <b id="dp-slsa">L1 honest · L2 .att emitted (not independently verified) · L3 roadmap</b> <span class="sep">·</span>
  <span id="dp-gates">46</span> gates
</div>

<button class="theme-btn" id="themeBtn" title="Toggle theme">◑</button>

<!-- Header -->
<header class="header">
  <div class="logo">
    <svg viewBox="0 0 48 48" fill="none" aria-label="a11oy">
      <circle cx="24" cy="24" r="21" stroke="var(--gold)" stroke-width="2.5"/>
      <rect x="14" y="14" width="20" height="20" rx="4" fill="none" stroke="var(--terra)" stroke-width="2.5"/>
      <path d="M19 24l4 4 7-8" stroke="var(--gold)" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
    <div class="logo-text">
      <div class="logo-name">a11oy <span class="accent">·</span> Elite Console</div>
      <div class="logo-sub">20 surfaces · zero mocks · every tile wired to a real endpoint</div>
    </div>
  </div>
  <div class="header-spacer"></div>
  <div class="slsa-badge" id="slsaBadge">
    <span>✓</span> <span>SLSA L1 honest · L2 .att emitted (not independently verified) · L3 roadmap</span>
  </div>
</header>

<!-- Tab Bar -->
<div class="tabbar-wrap">
  <div class="tabbar" id="tabbar">
    <button class="tab-btn active" data-tab="overview"><span class="ti">⬡</span>Overview</button>
    <button class="tab-btn" data-tab="lambda"><span class="ti">Λ</span>Λ-Score</button>
    <button class="tab-btn" data-tab="gates"><span class="ti">⊞</span>Gates</button>
    <button class="tab-btn" data-tab="slo"><span class="ti">◎</span>SLO Board</button>
    <button class="tab-btn" data-tab="alerts"><span class="ti">⚡</span>Alerts</button>
    <button class="tab-btn" data-tab="organ-map"><span class="ti">◉</span>Organ Map 3D</button>
    <button class="tab-btn" data-tab="mesh"><span class="ti">⬡</span>Mesh Wires</button>
    <button class="tab-btn" data-tab="dsse"><span class="ti">⛓</span>DSSE Receipts</button>
    <button class="tab-btn" data-tab="quorum"><span class="ti">◈</span>Quorum 3D</button>
    <button class="tab-btn" data-tab="lineage"><span class="ti">↯</span>Lineage</button>
    <button class="tab-btn" data-tab="compliance"><span class="ti">☑</span>Compliance</button>
    <button class="tab-btn" data-tab="policy"><span class="ti">⊕</span>Policy Canvas</button>
    <button class="tab-btn" data-tab="formulas"><span class="ti">∫</span>Formulas</button>
    <button class="tab-btn" data-tab="genome"><span class="ti">⧫</span>GENOME</button>
    <button class="tab-btn" data-tab="replay"><span class="ti">⟳</span>Receipt Replay</button>
    <button class="tab-btn" data-tab="verdict"><span class="ti">⚖</span>Verdict Theater</button>
    <button class="tab-btn" data-tab="fleet"><span class="ti">◻</span>Fleet</button>
    <button class="tab-btn" data-tab="llm-hub"><span class="ti">⬡</span>LLM Hub</button>
    <button class="tab-btn" data-tab="audit"><span class="ti">📋</span>Audit Log</button>
    <button class="tab-btn" data-tab="anatomy"><span class="ti">⬟</span>Anatomy 3D</button>
    <button class="tab-btn" data-tab="honest"><span class="ti">✦</span>Honest</button>
  </div>
</div>

<!-- Tab Panels -->
<div class="panel-wrap">

  <!-- ══ TAB 1: OVERVIEW ══ -->
  <div class="tab-panel active" id="tab-overview">
    <div class="grid g-4" style="margin-bottom:16px">
      <div class="card">
        <div class="card-head"><span class="dot-status dot-idle" id="ov-lam-dot"></span><span class="icon">Λ</span>Trust Score<span class="pill">/v1/lambda</span></div>
        <div class="card-body"><div class="kpi"><div class="kpi-num" id="ov-lam-val">…</div><div class="kpi-sub">Λ = Conjecture 1 · 13-axis geometric mean</div></div></div>
      </div>
      <div class="card">
        <div class="card-head"><span class="dot-status dot-idle" id="ov-gate-dot"></span><span class="icon">⊞</span>Policy Gates<span class="pill">/v1/gates</span></div>
        <div class="card-body"><div class="kpi"><div class="kpi-num cyan" id="ov-gate-count">…</div><div class="kpi-sub" id="ov-gate-sub">active / 46 total</div></div></div>
      </div>
      <div class="card">
        <div class="card-head"><span class="dot-status dot-idle" id="ov-slo-dot"></span><span class="icon">◎</span>SLO Pass Rate<span class="pill">/v1/console/slo</span></div>
        <div class="card-body"><div class="kpi"><div class="kpi-num good" id="ov-slo-val">…</div><div class="kpi-sub">Gate pass rate vs 95% target</div></div></div>
      </div>
      <div class="card">
        <div class="card-head"><span class="dot-status dot-idle" id="ov-fleet-dot"></span><span class="icon">◻</span>Fleet Organs<span class="pill">/v4/fleet</span></div>
        <div class="card-body"><div class="kpi"><div class="kpi-num" id="ov-fleet-ok">…</div><div class="kpi-sub">organs online / 5 total</div></div></div>
      </div>
    </div>
    <div class="grid g-2-1">
      <div class="card">
        <div class="card-head"><span class="dot-status dot-idle" id="ov-mesh-dot"></span><span class="icon">⬡</span>Live Mesh State<span class="pill">/v1/mesh/state</span></div>
        <div class="card-body" id="ov-mesh-body"><div class="sk sk-block"></div><div class="sk sk-line w80"></div></div>
      </div>
      <div class="card">
        <div class="card-head"><span class="dot-status dot-idle" id="ov-brain-dot"></span><span class="icon">◈</span>Brain + LLM Tiers<span class="pill">/v1/brain</span></div>
        <div class="card-body" id="ov-brain-body"><div class="sk sk-block"></div></div>
      </div>
    </div>
    <div class="grid g-3" style="margin-top:16px">
      <div class="card">
        <div class="card-head"><span class="icon">🔏</span>SLSA L1 honest · L2 .att emitted (not independently verified) Provenance<span class="pill">/v1/version</span></div>
        <div class="card-body" id="ov-prov-body"><div class="sk sk-line w80"></div><div class="sk sk-line w60"></div></div>
      </div>
      <div class="card">
        <div class="card-head"><span class="icon">⛓</span>Last 5 Receipts<span class="pill">/khipu/ledger</span></div>
        <div class="card-body" id="ov-ledger-body"><div class="sk sk-line"></div><div class="sk sk-line"></div><div class="sk sk-line w80"></div></div>
      </div>
      <div class="card">
        <div class="card-head"><span class="icon">📋</span>MCP Tools<span class="pill">/v1/mcp/tools</span></div>
        <div class="card-body" id="ov-mcp-body"><div class="sk sk-block"></div></div>
      </div>
    </div>
  </div>

  <!-- ══ TAB 2: LAMBDA ══ -->
  <div class="tab-panel" id="tab-lambda">
    <div class="grid g-2-1">
      <div class="card">
        <div class="card-head"><span class="dot-status dot-idle" id="lam-dot"></span><span class="icon">Λ</span>Lambda Geometric Mean — 13 Axes<span class="pill">/v1/lambda</span></div>
        <div class="card-body">
          <div class="kpi" style="margin-bottom:16px">
            <div class="kpi-label">Λ Trust Score</div>
            <div class="kpi-num" id="lam-val">…</div>
            <div class="kpi-sub">Conjecture 1 — NOT a theorem. CAUCHY_ND sorry open.</div>
          </div>
          <div class="axis-grid" id="lam-axes"></div>
        </div>
      </div>
      <div class="card">
        <div class="card-head"><span class="icon">◈</span>Λ Score — Interactive<span class="pill">/v1/lambda/score</span></div>
        <div class="card-body">
          <div style="font:11px/1.6 var(--mono);color:var(--text-muted);margin-bottom:12px">POST custom axis weights to /v1/lambda/score</div>
          <textarea id="lam-custom-json" class="verify-box" style="width:100%;height:120px;background:var(--bg);border:1px solid var(--line);color:var(--text-dim);border-radius:8px;padding:10px;font:11px/1.5 var(--mono);resize:vertical;outline:none">{"axes":{"soundness":0.92,"calibration":0.90,"robustness":0.95,"provenance":0.91,"consent":0.94}}</textarea>
          <div style="margin-top:10px"><button class="btn sm" onclick="runLambdaScore()">▶ Score</button></div>
          <div class="verify-result" id="lam-score-result" style="display:none"></div>
        </div>
      </div>
    </div>
  </div>

  <!-- ══ TAB 3: GATES ══ -->
  <div class="tab-panel" id="tab-gates">
    <div class="grid g-3" style="margin-bottom:16px">
      <div class="card">
        <div class="card-head"><span class="icon">⊞</span>Total Gates<span class="pill">/v1/gates</span></div>
        <div class="card-body"><div class="kpi"><div class="kpi-num cyan" id="g-total">…</div><div class="kpi-sub">46 canonical gates</div></div></div>
      </div>
      <div class="card">
        <div class="card-head"><span class="icon">✦</span>Lean-Proved<span class="pill">/v1/gates</span></div>
        <div class="card-body"><div class="kpi"><div class="kpi-num good" id="g-proved">…</div><div class="kpi-sub">gates with lean_theorem</div></div></div>
      </div>
      <div class="card">
        <div class="card-head"><span class="icon">⛓</span>Anchor Formulas<span class="pill">/v1/gates</span></div>
        <div class="card-body"><div class="kpi"><div class="kpi-num" id="g-anchor">44</div><div class="kpi-sub">anchor formula gates</div></div></div>
      </div>
    </div>
    <div class="card">
      <div class="card-head"><span class="icon">⊞</span>Gate Manifest — Live<span class="pill">/v1/gates</span></div>
      <div class="card-body">
        <div style="margin-bottom:12px;display:flex;gap:8px;align-items:center">
          <input type="text" id="gate-search" placeholder="Search gates…" style="flex:1;padding:7px 12px;background:var(--bg);border:1px solid var(--line);color:var(--text);border-radius:7px;font-size:12px;outline:none" oninput="filterGates(this.value)">
          <button class="btn sm" onclick="loadGates()">↺ Refresh</button>
        </div>
        <div style="overflow:auto;max-height:500px">
          <table class="data-table" id="gate-table">
            <thead><tr><th>Name</th><th>Lean Theorem</th><th>Category</th><th>Status</th></tr></thead>
            <tbody id="gate-tbody"></tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  <!-- ══ TAB 4: SLO BOARD ══ -->
  <div class="tab-panel" id="tab-slo">
    <div class="grid g-4" style="margin-bottom:16px" id="slo-kpis">
      <div class="card"><div class="card-head"><span class="icon">◎</span>Pass Rate<span class="pill">/console/slo</span></div><div class="card-body"><div class="kpi"><div class="kpi-num good" id="slo-pass">…</div><div class="kpi-sub">vs 95% target</div></div></div></div>
      <div class="card"><div class="card-head"><span class="icon">Λ</span>Lambda<span class="pill">/v1/lambda</span></div><div class="card-body"><div class="kpi"><div class="kpi-num" id="slo-lam">…</div><div class="kpi-sub">floor = 0.90</div></div></div></div>
      <div class="card"><div class="card-head"><span class="icon">⛓</span>Chain Integrity</div><div class="card-body"><div class="kpi"><div class="kpi-num good" id="slo-chain">100%</div><div class="kpi-sub">SHA3-256 chain valid</div></div></div></div>
      <div class="card"><div class="card-head"><span class="icon">📐</span>Error Budget<span class="pill">/console/slo</span></div><div class="card-body"><div class="kpi"><div class="kpi-num cyan" id="slo-budget">…</div><div class="kpi-sub">% remaining</div></div></div></div>
    </div>
    <div class="card">
      <div class="card-head"><span class="icon">◎</span>SLO Detail Board — New Relic-class<span class="pill">/api/a11oy/v1/console/slo</span></div>
      <div class="card-body" id="slo-detail-body">
        <div class="sk sk-line w80"></div><div class="sk sk-line w60"></div>
      </div>
    </div>
  </div>

  <!-- ══ TAB 5: ALERTS ══ -->
  <div class="tab-panel" id="tab-alerts">
    <div class="grid g-4" style="margin-bottom:16px">
      <div class="card"><div class="card-head"><span class="icon">🔴</span>Critical</div><div class="card-body"><div class="kpi"><div class="kpi-num bad" id="al-crit">0</div></div></div></div>
      <div class="card"><div class="card-head"><span class="icon">🟡</span>Warning</div><div class="card-body"><div class="kpi"><div class="kpi-num" style="color:var(--amber)" id="al-warn">0</div></div></div></div>
      <div class="card"><div class="card-head"><span class="icon">🔵</span>Info</div><div class="card-body"><div class="kpi"><div class="kpi-num cyan" id="al-info">0</div></div></div></div>
      <div class="card"><div class="card-head"><span class="icon">✓</span>Acknowledged</div><div class="card-body"><div class="kpi"><div class="kpi-num good" id="al-ack">0</div></div></div></div>
    </div>
    <div class="card">
      <div class="card-head"><span class="icon">⚡</span>Live Alert Feed — Datadog-class<span class="pill">/api/a11oy/v1/console/alerts</span></div>
      <div class="card-body" id="al-feed">
        <div class="sk sk-line w80"></div><div class="sk sk-line w60"></div>
      </div>
    </div>
  </div>

  <!-- ══ TAB 6: ORGAN MAP 3D ══ -->
  <div class="tab-panel" id="tab-organ-map">
    <div class="grid g-2">
      <div class="card" style="grid-column:1/-1">
        <div class="card-head"><span class="icon">◉</span>SZL Organ Topology — 3D Service Map<span class="pill">/console/organ-map</span></div>
        <div class="card-body" style="padding:10px">
          <div class="canvas-3d" id="organ-map-3d" style="height:380px">
            <canvas id="organCanvas"></canvas>
            <div class="canvas-3d-label">Interactive · Drag to rotate · SZL mesh topology</div>
          </div>
        </div>
      </div>
    </div>
    <div class="grid g-2" style="margin-top:16px">
      <div class="card">
        <div class="card-head"><span class="icon">◉</span>Organs<span class="pill">/console/organ-map</span></div>
        <div class="card-body" id="organ-list-body"><div class="sk sk-line w80"></div></div>
      </div>
      <div class="card">
        <div class="card-head"><span class="icon">⬡</span>Wire Topology<span class="pill">/console/organ-map</span></div>
        <div class="card-body" id="wire-topo-body"><div class="sk sk-line w80"></div></div>
      </div>
    </div>
  </div>

  <!-- ══ TAB 7: MESH WIRES ══ -->
  <div class="tab-panel" id="tab-mesh">
    <div class="grid g-2">
      <div class="card">
        <div class="card-head"><span class="dot-status dot-idle" id="mesh-dot"></span><span class="icon">⬡</span>Mesh Wire Status<span class="pill">/v1/mesh/state</span></div>
        <div class="card-body" id="mesh-wires-body"><div class="sk sk-line w80"></div></div>
      </div>
      <div class="card">
        <div class="card-head"><span class="icon">◈</span>Wire D — W3C traceparent<span class="pill">/wires/D</span></div>
        <div class="card-body" id="wire-d-body"><div class="sk sk-line w80"></div></div>
      </div>
    </div>
    <div class="grid g-1" style="margin-top:16px">
      <div class="card">
        <div class="card-head"><span class="icon">⬡</span>3D Mesh Cathedral<span class="pill">Three.js live</span></div>
        <div class="card-body" style="padding:10px">
          <div class="canvas-3d" id="mesh-3d" style="height:280px">
            <canvas id="meshCanvas"></canvas>
            <div class="canvas-3d-label">SZL Wire Mesh · Nodes pulse on trace activity</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- ══ TAB 8: DSSE RECEIPTS ══ -->
  <div class="tab-panel" id="tab-dsse">
    <div class="grid g-3" style="margin-bottom:16px">
      <div class="card"><div class="card-head"><span class="icon">🔏</span>DSSE Signing<span class="pill">/console/dsse-stream</span></div><div class="card-body"><div class="kpi"><div class="kpi-num" id="dsse-signing">…</div><div class="kpi-sub">signing_available</div></div></div></div>
      <div class="card"><div class="card-head"><span class="icon">⛓</span>DAG Root<span class="pill">/khipu/ledger</span></div><div class="card-body"><div class="kpi-label">Merkle root</div><div class="kpi-num" id="dsse-root" style="font-size:14px;color:var(--cyan)">…</div></div></div>
      <div class="card"><div class="card-head"><span class="icon">✔</span>Rekor logIndex<span class="pill">Sigstore</span></div><div class="card-body"><div class="kpi"><div class="kpi-num cyan" id="dsse-rekor">—</div><div class="kpi-sub">public-good Rekor (live)</div></div></div></div>
    </div>
    <div class="grid g-2">
      <div class="card">
        <div class="card-head"><span class="icon">⛓</span>Live DSSE Receipt Stream<span class="pill">/console/dsse-stream</span></div>
        <div class="card-body" id="dsse-stream-body"><div class="sk sk-line w80"></div><div class="sk sk-line w60"></div></div>
      </div>
      <div class="card">
        <div class="card-head"><span class="icon">🔍</span>Browser Verify (DSSE)<span class="pill">/khipu/verify</span></div>
        <div class="card-body">
          <div class="verify-box">
            <label>DSSE Envelope JSON</label>
            <textarea id="dsse-envelope-input" placeholder='{"payload":"…","payloadType":"…","signatures":[{"sig":"…","keyid":"szlholdings-cosign"}]}'></textarea>
            <div style="margin-top:8px"><button class="btn sm" onclick="verifyDSSE()">🔍 Verify</button></div>
            <div class="verify-result" id="dsse-verify-result" style="display:none"></div>
          </div>
          <div style="margin-top:14px;font:11px/1.7 var(--mono);color:var(--text-muted)">
            Verify command:<br>
            <code style="color:var(--cyan)">cosign verify-blob --key cosign.pub --signature &lt;sig&gt; &lt;payload&gt;</code>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- ══ TAB 9: QUORUM 3D ══ -->
  <div class="tab-panel" id="tab-quorum">
    <div class="grid g-2">
      <div class="card" style="grid-column:1/-1">
        <div class="card-head"><span class="icon">◈</span>Khipu Quorum Constellation — 3-of-4<span class="pill">/console/quorum-state</span></div>
        <div class="card-body" style="padding:10px">
          <div class="canvas-3d" style="height:300px">
            <canvas id="quorumCanvas"></canvas>
            <div class="canvas-3d-label">Khipu Merkle-DAG Constellation · 4 organ nodes · 3-of-4 threshold</div>
          </div>
        </div>
      </div>
    </div>
    <div class="grid g-2" style="margin-top:16px">
      <div class="card">
        <div class="card-head"><span class="icon">◈</span>Live Quorum State<span class="pill">/console/quorum-state</span></div>
        <div class="card-body" id="quorum-state-body"><div class="sk sk-block"></div></div>
      </div>
      <div class="card">
        <div class="card-head"><span class="icon">⛓</span>Khipu Ledger<span class="pill">/khipu/ledger</span></div>
        <div class="card-body" id="quorum-ledger-body"><div class="sk sk-line w80"></div></div>
      </div>
    </div>
  </div>

  <!-- ══ TAB 10: LINEAGE ══ -->
  <div class="tab-panel" id="tab-lineage">
    <div class="card" style="margin-bottom:16px">
      <div class="card-head"><span class="icon">↯</span>Decision Lineage Query — Palantir Foundry-class<span class="pill">/v1/lineage</span></div>
      <div class="card-body">
        <div style="display:flex;gap:8px;margin-bottom:14px">
          <input type="text" id="lineage-action-id" placeholder="action_id (optional — leave blank for DAG)" style="flex:1;padding:7px 12px;background:var(--bg);border:1px solid var(--line);color:var(--text);border-radius:7px;font-size:12px;outline:none">
          <button class="btn sm" onclick="loadLineage()">↯ Trace</button>
        </div>
        <div id="lineage-result"><div class="sk sk-block"></div></div>
      </div>
    </div>
    <div class="card">
      <div class="card-head"><span class="icon">⛓</span>Khipu Receipt Chain — Visual<span class="pill">/khipu/ledger</span></div>
      <div class="card-body" id="lineage-chain-body"><div class="sk sk-line w80"></div></div>
    </div>
  </div>

  <!-- ══ TAB 11: COMPLIANCE ══ -->
  <div class="tab-panel" id="tab-compliance">
    <div class="grid g-3" style="margin-bottom:16px">
      <div class="card"><div class="card-head"><span class="icon">☑</span>EU AI Act<span class="pill">/compliance/export</span></div><div class="card-body"><div class="kpi"><div class="kpi-num good" id="comp-eu">…</div><div class="kpi-sub">controls mapped</div></div></div></div>
      <div class="card"><div class="card-head"><span class="icon">☑</span>NIST AI RMF<span class="pill">/compliance/export</span></div><div class="card-body"><div class="kpi"><div class="kpi-num good" id="comp-nist">…</div><div class="kpi-sub">controls mapped</div></div></div></div>
      <div class="card"><div class="card-head"><span class="icon">☑</span>ISO 42001<span class="pill">/compliance/export</span></div><div class="card-body"><div class="kpi"><div class="kpi-num good" id="comp-iso">…</div><div class="kpi-sub">controls mapped</div></div></div></div>
    </div>
    <div class="card">
      <div class="card-head"><span class="icon">☑</span>Compliance Evidence Export — Credo AI / Vanta-class<span class="pill">/api/a11oy/v1/compliance/export</span></div>
      <div class="card-body">
        <div style="display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap">
          <button class="btn sm" onclick="loadCompliance('eu-ai-act')">EU AI Act</button>
          <button class="btn sm" onclick="loadCompliance('nist-ai-rmf')">NIST AI RMF</button>
          <button class="btn sm" onclick="loadCompliance('iso-42001')">ISO 42001</button>
          <button class="btn sm" onclick="loadCompliance('soc2-cc6')">SOC 2 CC6</button>
        </div>
        <div id="compliance-body"><div class="sk sk-line w80"></div></div>
      </div>
    </div>
  </div>

  <!-- ══ TAB 12: POLICY CANVAS ══ -->
  <div class="tab-panel" id="tab-policy">
    <div class="grid g-3" style="margin-bottom:16px">
      <div class="card"><div class="card-head"><span class="icon">⊕</span>Total Gates<span class="pill">/console/policy-canvas</span></div><div class="card-body"><div class="kpi"><div class="kpi-num cyan" id="pc-total">…</div></div></div></div>
      <div class="card"><div class="card-head"><span class="icon">✦</span>Lean Coverage</div><div class="card-body"><div class="kpi"><div class="kpi-num good" id="pc-cov">…</div><div class="kpi-sub">% with Lean proof</div></div></div></div>
      <div class="card"><div class="card-head"><span class="icon">⊕</span>Validate Policy<span class="pill">POST /v1/policy/validate</span></div>
        <div class="card-body">
          <textarea id="policy-json-input" style="width:100%;height:70px;background:var(--bg);border:1px solid var(--line);color:var(--text-dim);border-radius:8px;padding:8px;font:10px/1.5 var(--mono);resize:none;outline:none">{"name":"test","gates":["soundnessAxiom"],"lambda_floor":0.90,"witnesses":3}</textarea>
          <button class="btn sm" style="margin-top:6px" onclick="validatePolicy()">▶ Validate</button>
          <div class="verify-result" id="policy-validate-result" style="display:none;margin-top:6px"></div>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-head"><span class="icon">⊕</span>Policy Canvas — 46 Gates<span class="pill">/api/a11oy/v1/console/policy-canvas</span></div>
      <div class="card-body" id="policy-canvas-body"><div class="sk sk-block"></div></div>
    </div>
  </div>

  <!-- ══ TAB 13: FORMULAS ══ -->
  <div class="tab-panel" id="tab-formulas">
    <div class="card" style="margin-bottom:16px">
      <div class="card-head"><span class="icon">∫</span>Live Formula Library — Try-it in Browser<span class="pill">/v1/formulas/index</span></div>
      <div class="card-body" id="formulas-body"><div class="sk sk-block"></div></div>
    </div>
  </div>

  <!-- ══ TAB 14: GENOME ══ -->
  <div class="tab-panel" id="tab-genome">
    <div class="card" style="margin-bottom:16px">
      <div class="card-head"><span class="icon">⧫</span>SZL GENOME — Formula→Lean→Organ Atlas<span class="pill">/console/genome</span></div>
      <div class="card-body">
        <div style="margin-bottom:12px;font:11px/1.6 var(--mono);color:var(--text-muted)">
          Every formula traces to a Lean theorem (or honest open obligation) and a specific organ.
          Λ=Conjecture 1. Sorries are honest — not pretended proved.
        </div>
        <div style="overflow:auto">
          <div class="genome-row" style="font:700 10px/1 var(--sans);color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;padding:6px 0;border-bottom:2px solid var(--line)">
            <span>Formula</span><span>Lean Theorem</span><span>Organ</span><span>Endpoint</span>
          </div>
          <div id="genome-body"><div class="sk sk-line w80"></div><div class="sk sk-line w60"></div></div>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-head"><span class="icon">⧫</span>Gate Genome Sample — 20 gates<span class="pill">/console/genome</span></div>
      <div class="card-body" id="genome-gates-body"><div class="sk sk-block"></div></div>
    </div>
  </div>

  <!-- ══ TAB 15: RECEIPT REPLAY ══ -->
  <div class="tab-panel" id="tab-replay">
    <div class="grid g-2">
      <div class="card">
        <div class="card-head"><span class="icon">⟳</span>Deterministic Receipt Replay<span class="pill">POST /v1/receipts/replay</span></div>
        <div class="card-body">
          <p style="font:11px/1.7 var(--mono);color:var(--text-muted);margin-bottom:12px">
            Independently replay a past receipt by hash. Returns a fresh signed DSSE receipt.
            Compare hashes to prove cryptographic determinism. No competitor offers this.
          </p>
          <div class="verify-box">
            <label>Receipt Hash (SHA3-256) or leave blank for latest</label>
            <input type="text" id="replay-hash-input" placeholder="e.g. aabbcc…" style="width:100%;padding:8px 12px;background:var(--bg);border:1px solid var(--line);color:var(--text);border-radius:7px;font:11px var(--mono);outline:none;margin-top:4px">
          </div>
          <button class="btn" style="margin-top:10px" onclick="runReplay()">⟳ Replay Receipt</button>
          <div class="verify-result" id="replay-result" style="display:none;margin-top:10px"></div>
        </div>
      </div>
      <div class="card">
        <div class="card-head"><span class="icon">🔑</span>What makes Replay unique?</div>
        <div class="card-body">
          <ul style="font:11px/1.9 var(--mono);color:var(--text-dim);list-style:none;padding:0">
            <li>✦ Any third party can independently replay a past decision</li>
            <li>✦ Fresh DSSE receipt generated from same inputs</li>
            <li>✦ Hash comparison proves determinism mathematically</li>
            <li>✦ Zero trust required — verify in browser, CLI, or Python</li>
            <li>✦ Backed by <code style="color:var(--cyan)">KhipuConsensus.lean::khipu_receipt_invariant</code></li>
          </ul>
          <div style="margin-top:14px">
            <div class="kpi-label">verify command</div>
            <div class="codeblock"><span class="kw">cosign</span> verify-blob \<br>  --key cosign.pub \<br>  --sig &lt;base64sig&gt; \<br>  &lt;payload.json&gt;</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- ══ TAB 16: VERDICT THEATER ══ -->
  <div class="tab-panel" id="tab-verdict">
    <div class="grid g-3" style="margin-bottom:16px">
      <div class="card"><div class="card-head"><span class="icon">⚖</span>Total Verdicts<span class="pill">/console/verdict-theater</span></div><div class="card-body"><div class="kpi"><div class="kpi-num" id="vt-total">…</div></div></div></div>
      <div class="card"><div class="card-head"><span class="icon">✓</span>PASS<span class="pill">/console/verdict-theater</span></div><div class="card-body"><div class="kpi"><div class="kpi-num good" id="vt-pass">…</div></div></div></div>
      <div class="card"><div class="card-head"><span class="icon">◈</span>Quorum-witnessed<span class="pill">/console/verdict-theater</span></div><div class="card-body"><div class="kpi"><div class="kpi-num cyan" id="vt-quorum">…</div></div></div></div>
    </div>
    <div class="card">
      <div class="card-head"><span class="icon">⚖</span>Multi-Party Witnessed Verdict Theater<span class="pill">/api/a11oy/v1/console/verdict-theater</span></div>
      <div class="card-body" id="verdict-theater-body"><div class="sk sk-block"></div></div>
    </div>
  </div>

  <!-- ══ TAB 17: FLEET ══ -->
  <div class="tab-panel" id="tab-fleet">
    <div class="card" style="margin-bottom:16px">
      <div class="card-head"><span class="icon">◻</span>Fleet Health — All SZL Flagships<span class="pill">/api/a11oy/v4/fleet</span></div>
      <div class="card-body" id="fleet-body"><div class="sk sk-block"></div></div>
    </div>
    <div class="grid g-3" style="margin-bottom:16px" id="fleet-cards"></div>
  </div>

  <!-- ══ TAB 18: AUDIT LOG ══ -->
  <div class="tab-panel" id="tab-audit">
    <div class="grid g-3" style="margin-bottom:16px">
      <div class="card"><div class="card-head"><span class="icon">📋</span>Buffered<span class="pill">/v1/audit-log</span></div><div class="card-body"><div class="kpi"><div class="kpi-num" id="au-total">…</div><div class="kpi-sub">in-memory ring (max 200)</div></div></div></div>
      <div class="card"><div class="card-head"><span class="icon">📋</span>Returned</div><div class="card-body"><div class="kpi"><div class="kpi-num cyan" id="au-count">…</div></div></div></div>
      <div class="card"><div class="card-head"><span class="icon">ℹ</span>Honest Disclosure</div><div class="card-body" style="font:10px/1.7 var(--mono);color:var(--text-muted)">Ring buffer resets on Space rebuild. <b style="color:var(--gold)">Honest</b> — not durable storage.</div></div>
    </div>
    <div class="card">
      <div class="card-head"><span class="icon">📋</span>Audit Log — New Relic-class<span class="pill">/api/a11oy/v1/audit-log</span></div>
      <div class="card-body">
        <div style="display:flex;gap:8px;margin-bottom:12px"><button class="btn sm" onclick="loadAudit()">↺ Refresh</button></div>
        <div style="overflow:auto;max-height:450px">
          <table class="data-table"><thead><tr><th>#</th><th>Action</th><th>Gate</th><th>Lambda</th><th>Pass</th><th>Timestamp</th></tr></thead>
          <tbody id="audit-tbody"></tbody></table>
        </div>
      </div>
    </div>
  </div>

  <!-- ══ TAB 19: ANATOMY 3D ══ -->
  <div class="tab-panel" id="tab-anatomy">
    <div class="card" style="margin-bottom:16px">
      <div class="card-head"><span class="icon">⬟</span>a11oy Organ Anatomy — 3D Exploration</div>
      <div class="card-body" style="padding:10px">
        <div class="canvas-3d" style="height:400px">
          <canvas id="anatomyCanvas"></canvas>
          <div class="canvas-3d-label">a11oy Anatomy · 5 organ nodes + wire connections</div>
        </div>
      </div>
    </div>
    <div class="grid g-2" style="margin-top:16px">
      <div class="card">
        <div class="card-head"><span class="icon">◉</span>Organ Roles<span class="pill">/console/organ-map</span></div>
        <div class="card-body" id="anatomy-organs-body"><div class="sk sk-line w80"></div></div>
      </div>
      <div class="card">
        <div class="card-head"><span class="icon">◈</span>Provenance<span class="pill">/provenance</span></div>
        <div class="card-body" id="anatomy-prov-body"><div class="sk sk-line w80"></div></div>
      </div>
    </div>
  </div>

  <!-- ══ TAB 20: HONEST ══ -->
  <div class="tab-panel" id="tab-honest">
    <div class="card" style="margin-bottom:16px">
      <div class="card-head"><span class="icon">✦</span>Honest Disclosure — Full System State<span class="pill">/v1/honest</span></div>
      <div class="card-body" id="honest-body"><div class="sk sk-block"></div></div>
    </div>
    <div class="grid g-2">
      <div class="card">
        <div class="card-head"><span class="icon">✔</span>What We Claim</div>
        <div class="card-body" style="font:11px/1.9 var(--mono);color:var(--text-dim)">
          <div class="tag tag-green" style="display:inline-block;margin-bottom:6px">SLSA L1 honest · L2 .att emitted (not independently verified) · L3 roadmap</div><br>
          ✓ cosign-signed GHCR image, verifiable via cosign verify (L1)<br>
          ✓ signed slsa.dev/provenance .att emitted by actions/attest-build-provenance (L2 .att, not independently verified)<br>
          ✓ Fulcio issuer: sigstore.dev (public-good)<br>
          ✓ 749 Lean declarations · 14 unique axioms<br>
          ✓ 163 honest open sorries<br>
          ✓ 46 policy gates canonical<br>
          ✓ Λ = Conjecture 1 (geometric mean, 13 axes)
        </div>
      </div>
      <div class="card">
        <div class="card-head"><span class="icon">⚠</span>What We Do Not Claim</div>
        <div class="card-body" style="font:11px/1.9 var(--mono);color:var(--text-dim)">
          <div class="tag tag-amber" style="display:inline-block;margin-bottom:6px">HONEST</div><br>
          ✗ L3 not claimed (no hermetic build)<br>
          ✗ FedRAMP / Iron Bank / CMMC not claimed<br>
          ✗ Λ is a conjecture — CAUCHY_ND sorry open<br>
          ✗ Wires G &amp; H not live in this build<br>
          ✗ Audit log resets on rebuild (in-memory)<br>
          ✗ No fabricated metrics — zero mocks
        </div>
      </div>
    </div>
    <div class="card" style="margin-top:16px">
      <div class="card-head"><span class="icon">⚙</span>SLSA Verify Command</div>
      <div class="card-body">
        <div class="codeblock">
<span class="cmt"># Verify the SLSA L1 honest · L2 .att emitted (not independently verified) · L3 roadmap provenance attestation on the published image</span>
<span class="kw">cosign</span> verify-attestation \
  --type <span class="str">slsaprovenance</span> \
  --certificate-identity-regexp <span class="str">github.com/szl-holdings</span> \
  --certificate-oidc-issuer <span class="str">https://token.actions.githubusercontent.com</span> \
  ghcr.io/szl-holdings/a11oy:uds-v0.2.0

<span class="cmt"># Verify the cosign image signature (keyless / Fulcio)</span>
<span class="kw">cosign</span> verify \
  --certificate-identity-regexp <span class="str">github.com/szl-holdings</span> \
  --certificate-oidc-issuer <span class="str">https://token.actions.githubusercontent.com</span> \
  ghcr.io/szl-holdings/a11oy:uds-v0.2.0

<span class="cmt"># Rekor index is per-signing — read it from the verify output above (not hardcoded)</span>
        </div>
      </div>
    </div>
  </div>


  <!-- ══ TAB: LLM HUB ══ -->
  <div class="tab-panel" id="tab-llm-hub">
    <div class="grid g-4" style="margin-bottom:16px">
      <div class="card"><div class="card-head"><span class="icon">⬡</span>Models<span class="pill">/llm/registry</span></div><div class="card-body"><div class="kpi"><div class="kpi-num cyan" id="llm-count">7</div><div class="kpi-sub">registered models</div></div></div></div>
      <div class="card"><div class="card-head"><span class="icon">✦</span>Tiers<span class="pill">/llm/registry</span></div><div class="card-body"><div class="kpi"><div class="kpi-num" id="llm-tiers">5</div><div class="kpi-sub">routing tiers (0–4)</div></div></div></div>
      <div class="card"><div class="card-head"><span class="icon">🔏</span>Wired<span class="pill">/llm/registry</span></div><div class="card-body"><div class="kpi"><div class="kpi-num" id="llm-wired">0</div><div class="kpi-sub">API keys in env</div></div></div></div>
      <div class="card"><div class="card-head"><span class="icon">⛓</span>Forum Events<span class="pill">/llm/forum</span></div><div class="card-body"><div class="kpi"><div class="kpi-num good" id="llm-forum-count">0</div><div class="kpi-sub">routing receipts</div></div></div></div>
    </div>
    <div class="grid g-2-1">
      <div class="card">
        <div class="card-head"><span class="icon">⬡</span>a11oy Model Registry — THE LLM Hub<span class="pill">/api/a11oy/v1/llm/registry</span></div>
        <div class="card-body" id="llm-registry-body"><div class="sk sk-block"></div></div>
      </div>
      <div class="card">
        <div class="card-head"><span class="icon">Λ</span>Route a Prompt<span class="pill">POST /llm/route</span></div>
        <div class="card-body">
          <div style="font:11px/1.6 var(--mono);color:var(--text-muted);margin-bottom:10px">
            \u039b-gated tier selection. No API key needed — tier selection + receipt are real.
          </div>
          <input type="text" id="llm-route-prompt" placeholder="Enter prompt…" style="width:100%;padding:8px 12px;background:var(--bg);border:1px solid var(--line);color:var(--text);border-radius:7px;font:12px var(--mono);outline:none;margin-bottom:8px">
          <div style="display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap">
            <select id="llm-task-hint" style="padding:6px 10px;background:var(--bg);border:1px solid var(--line);color:var(--text);border-radius:7px;font:11px var(--mono);outline:none">
              <option value="">auto (\u039b-driven)</option>
              <option value="math">math</option>
              <option value="research">research</option>
              <option value="orchestration">orchestration</option>
              <option value="diligence">diligence</option>
            </select>
            <button class="btn sm" onclick="routeLLM()">\u25b6 Route</button>
          </div>
          <div class="verify-result" id="llm-route-result" style="display:none"></div>
        </div>
      </div>
    </div>
    <div class="grid g-2" style="margin-top:16px">
      <div class="card">
        <div class="card-head"><span class="icon">⛓</span>LLM Routing Forum — a11oy + Rosie<span class="pill">/api/a11oy/v1/llm/forum</span></div>
        <div class="card-body" id="llm-forum-body"><div class="sk sk-line w80"></div></div>
      </div>
      <div class="card">
        <div class="card-head"><span class="icon">◉</span>Ecosystem Mirror Manifest<span class="pill">/api/a11oy/v1/llm/ecosystem-mirror</span></div>
        <div class="card-body" id="llm-mirror-body"><div class="sk sk-line w80"></div></div>
      </div>
    </div>
  </div>

</div><!-- end panel-wrap -->

<footer class="honest-footer">
  <b>a11oy Elite Console</b> — 20 tabs · zero mocks · every surface bound to a real <code>/api/a11oy/…</code> endpoint ·
  W3C traceparent on every panel · skeletons over spinners · 3D where it adds value (Three.js r128 vendored)<br>
  <b>Doctrine v11 LOCKED · 749/14/163 · c7c0ba17 · Λ = Conjecture 1 (NOT a theorem) · SLSA L1 honest · L2 .att emitted (not independently verified) · L3 roadmap (signed slsa.dev/provenance .att; never L3)</b><br>
  HONEST: Wires G+H not live · audit log resets on rebuild · no FedRAMP/Iron Bank/CMMC · no L3<br>
  Sign: Yachay &lt;yachay@szlholdings.ai&gt; ·
  Co-Authored-By: <a href="https://perplexity.ai">Perplexity Computer Agent</a> ·
  <a href="https://github.com/szl-holdings/a11oy">GitHub</a> ·
  <a href="https://szlholdings-a11oy.hf.space">Live Space</a>
</footer>

<!-- Three.js (vendored local) -->
<script src="/static-vendor/three.min.js"></script>

<script>
/* ═════════════════════ a11oy Elite Console JS ═════════════════════ */
const BASE = '/api/a11oy';

// ── Tab routing ──────────────────────────────────────────────────────────────
const tabs = document.querySelectorAll('.tab-btn');
const panels = document.querySelectorAll('.tab-panel');
const tabLoaded = {};

function activateTab(id) {
  tabs.forEach(t => t.classList.toggle('active', t.dataset.tab === id));
  panels.forEach(p => p.classList.toggle('active', p.id === 'tab-' + id));
  if (!tabLoaded[id]) { tabLoaded[id] = true; loadTab(id); }
}

tabs.forEach(t => t.addEventListener('click', () => activateTab(t.dataset.tab)));
document.addEventListener('keydown', e => {
  if (e.altKey && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {
    const active = [...tabs].findIndex(t => t.classList.contains('active'));
    const next = e.key === 'ArrowRight'
      ? (active + 1) % tabs.length
      : (active - 1 + tabs.length) % tabs.length;
    activateTab(tabs[next].dataset.tab);
  }
});

// ── Theme ─────────────────────────────────────────────────────────────────────
document.getElementById('themeBtn').addEventListener('click', () => {
  const d = document.documentElement;
  d.dataset.theme = d.dataset.theme === 'light' ? 'dark' : 'light';
});

// ── Fetch helpers ─────────────────────────────────────────────────────────────
async function api(path, opts = {}) {
  const r = await fetch(BASE + path, opts);
  if (!r.ok) throw new Error(`HTTP ${r.status} ${path}`);
  return r.json();
}

function fmt(x, digits = 4) { return typeof x === 'number' ? x.toFixed(digits) : x; }
function ago(iso) {
  if (!iso) return '—';
  const d = Date.now() - new Date(iso).getTime();
  if (d < 60000) return Math.round(d/1000) + 's ago';
  if (d < 3600000) return Math.round(d/60000) + 'm ago';
  return new Date(iso).toLocaleTimeString();
}
function hash6(h) { return (h || '').slice(0, 8) + '…' }

// ── traceparent badge ─────────────────────────────────────────────────────────
async function refreshTrace() {
  try {
    const d = await api('/v1/mesh/state');
    const tp = d.traceparent || d.trace_id || '';
    if (tp) {
      document.getElementById('traceId').textContent = tp.slice(0, 24) + '…';
      document.getElementById('traceBadge').classList.add('live');
    }
  } catch (_) {}
}
setInterval(refreshTrace, 8000);
refreshTrace();

// ── LOAD TAB dispatcher ───────────────────────────────────────────────────────
function loadTab(id) {
  switch(id) {
    case 'overview':   loadOverview(); break;
    case 'lambda':     loadLambda(); break;
    case 'gates':      loadGates(); break;
    case 'slo':        loadSLO(); break;
    case 'alerts':     loadAlerts(); break;
    case 'organ-map':  loadOrganMap(); break;
    case 'mesh':       loadMesh(); break;
    case 'dsse':       loadDSSE(); break;
    case 'quorum':     loadQuorum(); break;
    case 'lineage':    loadLineage(); break;
    case 'compliance': loadCompliance('eu-ai-act'); break;
    case 'policy':     loadPolicyCanvas(); break;
    case 'formulas':   loadFormulas(); break;
    case 'genome':     loadGenome(); break;
    case 'replay':     break;
    case 'verdict':    loadVerdict(); break;
    case 'fleet':      loadFleet(); break;
    case 'audit':      loadAudit(); break;
    case 'anatomy':    loadAnatomy(); break;
    case 'llm-hub':   loadLLMHub(); break;
    case 'honest':     loadHonest(); break;
  }
}

// ════════════════════ TAB LOADERS ════════════════════

// ── Overview ──────────────────────────────────────────────────────────────────
async function loadOverview() {
  try {
    const lam = await api('/v1/lambda');
    const v = lam.lambda || 0;
    document.getElementById('ov-lam-val').textContent = v.toFixed(4);
    document.getElementById('ov-lam-val').className = 'kpi-num ' + (v >= 0.90 ? '' : 'bad');
    dot('ov-lam-dot', v >= 0.90);
  } catch(e) { document.getElementById('ov-lam-val').textContent = 'ERR'; }

  try {
    const g = await api('/v1/gates');
    const gates = g.gates || [];
    document.getElementById('ov-gate-count').textContent = gates.length;
    document.getElementById('ov-gate-sub').textContent = gates.length + ' gates loaded';
    dot('ov-gate-dot', gates.length > 0);
    document.getElementById('dp-gates').textContent = gates.length;
  } catch(e) {}

  try {
    const s = await api('/v1/console/slo');
    const pr = s.pass_rate || 0;
    document.getElementById('ov-slo-val').textContent = (pr*100).toFixed(1) + '%';
    dot('ov-slo-dot', pr >= 0.95);
  } catch(e) {}

  try {
    const fl = await api('/v4/fleet');
    const peers = fl.peers || [];
    const ok = peers.filter(p => p.status === 'ok').length;
    document.getElementById('ov-fleet-ok').textContent = ok + '/' + peers.length;
    dot('ov-fleet-dot', ok > 0);
  } catch(e) {}

  try {
    const mesh = await api('/v1/mesh/state');
    const wires = mesh.wires || {};
    const el = document.getElementById('ov-mesh-body');
    el.innerHTML = Object.entries(wires).map(([k,v]) =>
      `<div class="wire-row"><span class="wire-id">${k}</span><span class="wire-name">${k}</span>
       <span class="wire-status-chip ${v.includes('live')&&!v.includes('not')? 'w-live' : v.includes('roadmap')||v.includes('not') ? 'w-roadmap' : 'w-partial'}">${v}</span></div>`
    ).join('');
    dot('ov-mesh-dot', true);
  } catch(e) {}

  try {
    const b = await api('/v1/brain');
    const el = document.getElementById('ov-brain-body');
    el.innerHTML = `<div class="kpi-label">Brain</div>
      <div class="kpi-num" style="font-size:14px">${b.space||'a11oy'}</div>
      <div style="margin-top:8px;font:11px var(--mono);color:var(--text-muted)">
        ${b.declarations||749} decls · ${b.axioms_unique||14} axioms · ${b.sorries_total||163} sorries
      </div>`;
  } catch(e) {}

  try {
    const v = await api('/v1/version');
    const el = document.getElementById('ov-prov-body');
    el.innerHTML = `
      <a href="https://github.com/szl-holdings/a11oy" class="tag tag-cyan">GitHub</a>
      <a href="https://sigstore.dev" class="tag tag-green">Sigstore</a>
      <div style="margin-top:10px;font:10px/1.7 var(--mono);color:var(--text-muted)">
        ${v.image_digest ? 'sha256:' + v.image_digest.slice(7,23) + '…' : ''}<br>
        Rekor ${v.rekor_log_index||'— (resolved at verify time)'}
      </div>`;
  } catch(e) {}

  try {
    const led = await api('/khipu/ledger');
    const items = (led.receipts || led.recent || []).slice(0, 5);
    const el = document.getElementById('ov-ledger-body');
    if (!items.length) { el.innerHTML = '<div style="color:var(--text-muted);font:11px var(--mono)">No receipts yet</div>'; }
    else el.innerHTML = '<table class="data-table"><thead><tr><th>Hash</th><th>Action</th><th>Signed</th></tr></thead><tbody>' +
      items.map(r => `<tr><td class="hash">${hash6(r.hash||r.dag_hash||'')}</td><td>${r.action||r.payload?.action||'—'}</td><td>${r.signed||r.sig?'✓':'UNSIGNED'}</td></tr>`).join('')
      + '</tbody></table>';
    dot('ov-ledger-dot', true);
  } catch(e) {}

  try {
    const mcp = await api('/v1/mcp/tools');
    const tools = mcp.tools || [];
    const el = document.getElementById('ov-mcp-body');
    el.innerHTML = `<div class="kpi"><div class="kpi-num">${tools.length}</div><div class="kpi-sub">MCP tools registered</div></div>
      <div class="axis-grid" style="margin-top:10px">${tools.map(t =>
        `<div class="axis-item"><div class="axis-name">${t.name}</div><div style="font:10px var(--mono);color:var(--text-muted)">${t.description||''}</div></div>`
      ).join('')}</div>`;
  } catch(e) {}
}

// ── Lambda ────────────────────────────────────────────────────────────────────
async function loadLambda() {
  try {
    const d = await api('/v1/lambda');
    const v = d.lambda || 0;
    document.getElementById('lam-val').textContent = v.toFixed(6);
    document.getElementById('lam-val').className = 'kpi-num ' + (v >= 0.90 ? '' : 'bad');
    dot('lam-dot', v >= 0.90);
    const axes = d.axes || [];
    const el = document.getElementById('lam-axes');
    el.innerHTML = axes.map(a => `
      <div class="axis-item">
        <div class="axis-name">${a.name}</div>
        <div class="axis-score">${a.score?.toFixed(3)||'—'}</div>
        <div class="axis-bar"><div class="axis-bar-fill" style="width:${(a.score||0)*100}%"></div></div>
      </div>`).join('');
  } catch(e) { document.getElementById('lam-val').textContent = 'ERR'; }
}

async function runLambdaScore() {
  const el = document.getElementById('lam-score-result');
  el.style.display = 'block';
  el.className = 'verify-result';
  el.textContent = 'Scoring…';
  try {
    const body = JSON.parse(document.getElementById('lam-custom-json').value);
    const r = await fetch(BASE + '/v1/lambda/score', {
      method: 'POST', headers: {'Content-Type':'application/json'},
      body: JSON.stringify(body)
    });
    const d = await r.json();
    el.className = 'verify-result ' + (d.gate_pass||d.pass ? 'ok' : 'err');
    el.innerHTML = `<b>Λ = ${(d.lambda||0).toFixed(6)}</b>  pass=${d.gate_pass||d.pass}  axes=${JSON.stringify(d.axes||{})}`;
  } catch(e) {
    el.className = 'verify-result err';
    el.textContent = String(e);
  }
}

// ── Gates ─────────────────────────────────────────────────────────────────────
let _allGates = [];
async function loadGates() {
  try {
    const d = await api('/v1/gates');
    _allGates = d.gates || [];
    document.getElementById('g-total').textContent = _allGates.length;
    const proved = _allGates.filter(g => g.lean_theorem).length;
    document.getElementById('g-proved').textContent = proved;
    renderGateTable(_allGates);
  } catch(e) {}
}

function renderGateTable(gates) {
  const tbody = document.getElementById('gate-tbody');
  tbody.innerHTML = gates.map(g => `<tr>
    <td><b style="color:var(--gold)">${g.name||'—'}</b></td>
    <td class="hash">${(g.lean_theorem||'').slice(0,50)||'—'}</td>
    <td>${g.category||'—'}</td>
    <td><span class="pass-chip ${g.status==='active'?'pass':'na'}">${g.status||'—'}</span></td>
  </tr>`).join('');
}

function filterGates(q) {
  const f = _allGates.filter(g =>
    (g.name||'').toLowerCase().includes(q.toLowerCase()) ||
    (g.lean_theorem||'').toLowerCase().includes(q.toLowerCase())
  );
  renderGateTable(f);
}

// ── SLO ───────────────────────────────────────────────────────────────────────
async function loadSLO() {
  try {
    const d = await api('/v1/console/slo');
    document.getElementById('slo-pass').textContent = (d.pass_rate*100).toFixed(1) + '%';
    document.getElementById('slo-lam').textContent = (d.lambda||0).toFixed(4);
    document.getElementById('slo-budget').textContent = (d.error_budget_pct_remaining||0).toFixed(1) + '%';

    const el = document.getElementById('slo-detail-body');
    el.innerHTML = (d.slos||[]).map(s => `
      <div class="slo-row">
        <div class="slo-head">
          <span class="dot-status ${s.status==='ok'?'dot-ok':'dot-warn'}"></span>
          <span class="slo-name">${s.name}</span>
          <span class="tag ${s.status==='ok'?'tag-green':'tag-amber'}">${s.status}</span>
        </div>
        <div class="slo-nums">
          <span>Target: <b>${s.target}</b></span>
          <span>Current: <b>${s.current}</b></span>
          <span style="color:var(--text-muted)">${s.unit}</span>
        </div>
        <div class="progress-row" style="margin-top:8px">
          <div class="progress-track"><div class="progress-fill ${s.status==='ok'?'green':'red'}" style="width:${Math.min(100,(s.current/s.target)*100)}%"></div></div>
        </div>
      </div>`).join('');
  } catch(e) {}
}

// ── Alerts ────────────────────────────────────────────────────────────────────
async function loadAlerts() {
  try {
    const d = await api('/v1/console/alerts?limit=50');
    const s = d.severity_counts || {};
    document.getElementById('al-crit').textContent = s.critical||0;
    document.getElementById('al-warn').textContent = s.warning||0;
    document.getElementById('al-info').textContent = s.info||0;
    document.getElementById('al-ack').textContent = (d.alerts||[]).filter(a=>a.acknowledged).length;

    const el = document.getElementById('al-feed');
    const alerts = d.alerts || [];
    if (!alerts.length) { el.innerHTML = '<div style="color:var(--text-muted);font:11px var(--mono)">No alerts</div>'; return; }
    el.innerHTML = alerts.map(a => `
      <div class="alert-row">
        <div class="alert-icon ${a.level}">${a.level==='critical'?'🔴':a.level==='warning'?'⚠':'ℹ'}</div>
        <div class="alert-content">
          <div class="alert-title">${a.title||'—'}</div>
          <div class="alert-detail">${a.detail||''} ${a.gate?`· gate: <code style="color:var(--cyan)">${a.gate}</code>`:''}  </div>
        </div>
        <div class="alert-ts">${ago(a.ts)}</div>
      </div>`).join('');
  } catch(e) {}
}

// ── Organ Map ─────────────────────────────────────────────────────────────────
async function loadOrganMap() {
  try {
    const d = await api('/v1/console/organ-map');
    // Table
    const organEl = document.getElementById('organ-list-body');
    organEl.innerHTML = (d.organs||[]).map(o => `
      <div style="display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 50%,transparent)">
        <span class="dot-status ${o.status==='live'?'dot-ok':'dot-warn'}"></span>
        <span style="font:700 12px var(--sans);color:var(--text)">${o.id}</span>
        <span style="flex:1;font:11px var(--mono);color:var(--text-muted)">${o.role}</span>
        <a href="${o.hf_url}" target="_blank" class="tag tag-cyan">↗</a>
      </div>`).join('');

    // Wires
    const wireEl = document.getElementById('wire-topo-body');
    wireEl.innerHTML = (d.wires||[]).map(w => `
      <div class="wire-row">
        <span class="wire-id">${w.id}</span>
        <span class="wire-name">${w.name}</span>
        <span class="wire-status-chip ${w.status.includes('live')&&!w.status.includes('not')?'w-live':w.status.includes('not')||w.status.includes('roadmap')?'w-roadmap':'w-partial'}">${w.status}</span>
      </div>`).join('');

    // 3D
    init3DOrganMap(d.organs||[], d.edges||[]);
  } catch(e) {}
}

// ── Mesh ──────────────────────────────────────────────────────────────────────
async function loadMesh() {
  try {
    const d = await api('/v1/mesh/state');
    const el = document.getElementById('mesh-wires-body');
    const wires = d.wires || {};
    el.innerHTML = Object.entries(wires).map(([k,v]) => `
      <div class="wire-row">
        <span class="wire-id">${k}</span>
        <span class="wire-name">Wire ${k}</span>
        <span class="wire-status-chip ${v.includes('live')&&!v.includes('not')?'w-live':v.includes('not')||v.includes('roadmap')?'w-roadmap':'w-partial'}">${v}</span>
      </div>`).join('');
    dot('mesh-dot', true);

    // Wire D
    try {
      const wD = await api('/wires/D');
      const wDEl = document.getElementById('wire-d-body');
      wDEl.innerHTML = `
        <div class="kpi-label">W3C traceparent volume</div>
        <div class="kpi-num cyan" style="font-size:18px">${wD.span_count||wD.total_spans||0}</div>
        <div class="kpi-sub">spans recorded</div>
        <div style="margin-top:10px;font:10px/1.7 var(--mono);color:var(--text-muted)">${wD.traceparent||wD.note||'in-process only'}</div>`;
    } catch(_) {}

    init3DMesh(Object.keys(wires));
  } catch(e) {}
}

// ── DSSE Receipts ─────────────────────────────────────────────────────────────
async function loadDSSE() {
  try {
    const d = await api('/v1/console/dsse-stream?limit=15');
    document.getElementById('dsse-signing').textContent = d.signing_available ? 'ACTIVE' : 'UNSIGNED';
    document.getElementById('dsse-signing').className = 'kpi-num ' + (d.signing_available ? 'good' : '');
    document.getElementById('dsse-root').textContent = d.dag_root ? d.dag_root.slice(0,20)+'…' : 'no events yet';

    const el = document.getElementById('dsse-stream-body');
    const events = d.events || [];
    if (!events.length) {
      el.innerHTML = '<div style="color:var(--text-muted);font:11px var(--mono)">No receipts yet — events accrue as gates are exercised</div>';
      return;
    }
    el.innerHTML = events.map(e => `
      <div class="dsse-row">
        <span class="dr-hash">⛓ ${e.dag_hash||hash6(e.full_hash)}</span>
        <span style="color:var(--text-muted)"> ← </span>
        <span style="color:var(--text-dim)">${e.parent_hash||'genesis'}</span>
        <span style="margin-left:10px;${e.signed?'color:var(--green)':'color:var(--amber)'}">
          ${e.signed ? '🔏 signed' : '⚠ UNSIGNED'}
        </span>
        <span style="margin-left:10px;color:var(--text-muted)">${e.action||'receipt'}</span>
        <span style="margin-left:auto;font-size:10px;color:var(--text-muted)">${ago(e.ts)}</span>
      </div>`).join('');
  } catch(e) {}
}

async function verifyDSSE() {
  const el = document.getElementById('dsse-verify-result');
  el.style.display = 'block';
  el.textContent = 'Verifying…';
  try {
    const envelope = JSON.parse(document.getElementById('dsse-envelope-input').value);
    const r = await fetch(BASE + '/khipu/verify', {
      method:'POST', headers:{'Content-Type':'application/json'},
      body: JSON.stringify(envelope)
    });
    const d = await r.json();
    el.className = 'verify-result ' + (d.valid||d.ok ? 'ok' : 'err');
    el.innerHTML = `<b>${d.valid||d.ok ? '✓ VALID' : '✗ INVALID'}</b> — ${d.message||d.note||JSON.stringify(d)}`;
  } catch(e) {
    el.className = 'verify-result err';
    el.textContent = 'Error: ' + e.message;
  }
}

// ── Quorum ────────────────────────────────────────────────────────────────────
async function loadQuorum() {
  try {
    const d = await api('/v1/console/quorum-state');
    const el = document.getElementById('quorum-state-body');
    el.innerHTML = `
      <div class="kpi-label">Quorum</div>
      <div class="kpi-num ${d.quorum_met ? 'good' : 'bad'}">${d.quorum_met ? '✓ MET' : '✗ FAILED'}</div>
      <div class="kpi-sub">${d.quorum_threshold}-of-${d.quorum_n} threshold</div>
      <div style="margin-top:14px">
        ${(d.organs||[]).map(o => `
          <div style="display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 50%,transparent)">
            <span class="dot-status ${o.signed ? 'dot-ok' : 'dot-err'}"></span>
            <span style="font:700 12px var(--sans);color:var(--text);flex:1">${o.organ}</span>
            <span style="font:10px var(--mono);color:var(--text-muted)">${o.last_verdict||'—'}</span>
          </div>`).join('')}
      </div>
      <div style="margin-top:10px;font:10px/1.5 var(--mono);color:var(--text-muted)">
        ${d.lean_theorem||''}
      </div>`;

    // Ledger
    try {
      const led = await api('/khipu/ledger');
      const items = (led.receipts || led.recent || []).slice(0, 5);
      document.getElementById('quorum-ledger-body').innerHTML =
        items.length ? items.map(r => `
          <div class="dsse-row">
            <span class="dr-hash">⛓ ${hash6(r.hash||'')}</span>
            <span style="margin-left:8px;color:var(--text-dim)">${r.action||r.payload?.action||'receipt'}</span>
            <span style="margin-left:auto;font-size:10px;color:var(--text-muted)">${ago(r.ts||r.payload?.ts||'')}</span>
          </div>`).join('')
        : '<div style="color:var(--text-muted);font:11px var(--mono)">No receipts yet</div>';
    } catch(_) {}

    init3DQuorum(d.organs||[]);
  } catch(e) {}
}

// ── Lineage ───────────────────────────────────────────────────────────────────
async function loadLineage(actionId) {
  const input = document.getElementById('lineage-action-id');
  const id = actionId || (input ? input.value.trim() : '');
  try {
    const path = id ? `/v1/lineage?action_id=${encodeURIComponent(id)}` : '/v1/lineage';
    const d = await api(path);
    const el = document.getElementById('lineage-result');
    const chain = d.chain || d.receipts || d.recent || [];
    if (!chain.length) {
      el.innerHTML = '<div style="color:var(--text-muted);font:11px var(--mono)">No lineage data yet</div>';
    } else {
      el.innerHTML = `
        <div style="font:11px/1.5 var(--mono);color:var(--text-muted);margin-bottom:12px">
          DAG root: <code style="color:var(--cyan)">${(d.dag_root||'—').slice(0,32)}…</code>
          · ${chain.length} nodes
          ${d.traceparent ? `· traceparent: <code style="color:var(--cyan)">${d.traceparent.slice(0,32)}…</code>` : ''}
        </div>
        <div>
          ${chain.slice(0,20).map(r => `
            <div class="lineage-node">
              <span class="ln-hash">⛓ ${hash6(r.hash||r.dag_hash||'')}</span>
              <span style="margin-left:8px" class="ln-action">${r.action||r.payload?.action||'receipt'}</span>
              <span style="margin-left:8px;font:10px var(--mono);color:var(--text-muted)">${ago(r.ts||r.payload?.ts||'')}</span>
            </div>`).join('')}
        </div>`;
    }

    // Chain visual
    const chainEl = document.getElementById('lineage-chain-body');
    if (chain.length > 0) {
      chainEl.innerHTML = `<div style="overflow:auto;max-height:250px">
        <table class="data-table">
          <thead><tr><th>Hash</th><th>Parent</th><th>Action</th><th>Signed</th><th>Timestamp</th></tr></thead>
          <tbody>${chain.slice(0,20).map(r => `<tr>
            <td class="hash">${hash6(r.hash||r.dag_hash||'')}</td>
            <td class="hash">${hash6(r.parent||r.parent_hash||'genesis')}</td>
            <td>${r.action||r.payload?.action||'receipt'}</td>
            <td>${r.signed||r.sig ? '🔏' : '⚠'}</td>
            <td style="font-size:10px">${ago(r.ts||r.payload?.ts||'')}</td>
          </tr>`).join('')}</tbody>
        </table></div>`;
    }
  } catch(e) {
    document.getElementById('lineage-result').innerHTML = `<div class="tag tag-red">ERR: ${e.message}</div>`;
  }
}

// ── Compliance ────────────────────────────────────────────────────────────────
async function loadCompliance(framework) {
  const el = document.getElementById('compliance-body');
  el.innerHTML = '<div class="sk sk-block"></div>';
  try {
    const d = await api(`/v1/compliance/export?framework=${framework}`);
    const controls = d.controls || d.evidence || [];

    // Update KPIs
    if (framework === 'eu-ai-act') document.getElementById('comp-eu').textContent = controls.length;
    if (framework === 'nist-ai-rmf') document.getElementById('comp-nist').textContent = controls.length;
    if (framework === 'iso-42001') document.getElementById('comp-iso').textContent = controls.length;

    if (!controls.length) {
      el.innerHTML = `<pre class="codeblock">${JSON.stringify(d, null, 2)}</pre>`;
      return;
    }

    el.innerHTML = `
      <div style="margin-bottom:10px;font:11px/1.5 var(--mono);color:var(--text-muted)">
        Framework: <b style="color:var(--gold)">${d.framework||framework}</b>
        · Generated: ${ago(d.generated_at||d.timestamp||'')}
        · ${controls.length} controls
      </div>
      ${controls.slice(0,20).map(c => `
        <div class="cf-control">
          <span class="cf-art">${c.article||c.control||c.id||'—'}</span>
          <div class="cf-rationale">
            <div style="font:700 11px var(--sans);color:var(--text);margin-bottom:3px">${c.rationale||c.description||'—'}</div>
            ${(c.gates||[]).length ? `<div style="margin-top:4px">${c.gates.map(g=>`<span class="tag tag-gold">${g}</span>`).join('')}</div>` : ''}
          </div>
          <span class="pass-chip pass" style="flex-shrink:0">✓</span>
        </div>`).join('')}`;
  } catch(e) {
    el.innerHTML = `<div class="tag tag-red">ERR: ${e.message}</div>`;
  }
}

// ── Policy Canvas ─────────────────────────────────────────────────────────────
async function loadPolicyCanvas() {
  try {
    const d = await api('/v1/console/policy-canvas');
    document.getElementById('pc-total').textContent = d.total_gates||0;
    document.getElementById('pc-cov').textContent = (d.lean_coverage_pct||0).toFixed(1) + '%';

    const el = document.getElementById('policy-canvas-body');
    const cats = d.categories || {};
    el.innerHTML = Object.entries(cats).map(([cat, gates]) => `
      <div class="gate-group">
        <div class="gate-group-name">${cat}</div>
        <div class="gate-grid">
          ${gates.map(g => `
            <div class="gate-chip" onclick="alert('Gate: ' + '${g.name}' + '\\n' + '${(g.lean_theorem||'').replace(/'/g,'')}')">
              <div class="gc-name">${g.name||'—'}</div>
              ${g.lean_theorem ? `<div class="gc-lean">${g.lean_theorem.slice(0,50)}…</div>` : ''}
              <div class="gc-status">
                <span class="tag ${g.has_lean_proof ? 'tag-green' : 'tag-muted'} ${g.status==='active'?'':'tag-amber'}" style="font-size:9px">
                  ${g.has_lean_proof ? '✦ Lean' : 'no Lean'} · ${g.status||'active'}
                </span>
              </div>
            </div>`).join('')}
        </div>
      </div>`).join('');
  } catch(e) {}
}

async function validatePolicy() {
  const el = document.getElementById('policy-validate-result');
  el.style.display = 'block';
  el.textContent = 'Validating…';
  try {
    const body = JSON.parse(document.getElementById('policy-json-input').value);
    const r = await fetch(BASE + '/v1/policy/validate', {
      method:'POST', headers:{'Content-Type':'application/json'},
      body: JSON.stringify(body)
    });
    const d = await r.json();
    el.className = 'verify-result ' + (d.valid ? 'ok' : 'err');
    el.innerHTML = `<b>${d.valid ? '✓ VALID' : '✗ INVALID'}</b> · violations: ${(d.violations||[]).length} · coverage: ${d.gate_coverage||'?'}`;
  } catch(e) {
    el.className = 'verify-result err';
    el.textContent = 'Error: ' + e.message;
  }
}

// ── Formulas ──────────────────────────────────────────────────────────────────
async function loadFormulas() {
  try {
    const d = await api('/v1/formulas/index');
    const formulas = d.formulas || d.index || [];
    const el = document.getElementById('formulas-body');
    el.innerHTML = formulas.map(f => `
      <div class="formula-card">
        <div class="formula-head" onclick="toggleFormula(this)">
          <span class="fn">${f.name||f.formula||'?'}</span>
          <span class="fl">${f.lean_theorem||''}</span>
          <span class="tag tag-gold">${f.citation||''}</span>
          <span style="color:var(--gold);margin-left:6px">▾</span>
        </div>
        <div class="formula-body">
          <div style="font:11px/1.5 var(--mono);color:var(--text-muted);margin-bottom:10px">${f.description||''}</div>
          <div class="try-row">
            <input type="text" placeholder="n=100" id="farg_${f.name}" style="max-width:160px">
            <button class="btn sm" onclick="tryFormula('${f.name}', 'farg_${f.name}', 'fres_${f.name}')">▶ Try</button>
          </div>
          <div class="try-result" id="fres_${f.name}" style="display:none"></div>
        </div>
      </div>`).join('');
  } catch(e) {}
}

function toggleFormula(head) {
  const body = head.nextElementSibling;
  body.classList.toggle('open');
  head.querySelector('span:last-child').textContent = body.classList.contains('open') ? '▴' : '▾';
}

async function tryFormula(name, argId, resId) {
  const el = document.getElementById(resId);
  el.style.display = 'block';
  el.innerHTML = 'Running…';
  try {
    const arg = document.getElementById(argId).value;
    const qp = arg ? '?' + arg.replace('=','=').split(',').join('&') : '';
    const d = await api(`/v1/formula/${name}${qp}`);
    el.innerHTML = `<span class="tr-val">${JSON.stringify(d.value !== undefined ? d.value : d)}</span>
      <span style="margin-left:8px;font:10px var(--mono);color:var(--text-muted)">${d.lean_theorem||''}</span>`;
  } catch(e) {
    el.innerHTML = `<span style="color:var(--red)">ERR: ${e.message}</span>`;
  }
}

// ── Genome ────────────────────────────────────────────────────────────────────
async function loadGenome() {
  try {
    const d = await api('/v1/console/genome');
    const formulas = d.formula_genome || [];
    const el = document.getElementById('genome-body');
    el.innerHTML = formulas.map(g => `
      <div class="genome-row">
        <span class="gen-formula">${g.formula||'—'}</span>
        <span class="gen-lean">${g.lean_theorem||'—'}</span>
        <span class="gen-organ"><span class="tag tag-purple">${g.organ||'—'}</span></span>
        <span class="gen-ep"><a href="${g.endpoint||'#'}" class="tag tag-cyan" target="_blank">↗ ${(g.endpoint||'').slice(-20)}</a></span>
      </div>`).join('');

    const gates = d.gate_genome_sample || [];
    document.getElementById('genome-gates-body').innerHTML =
      `<div class="gate-grid">${gates.map(g => `
        <div class="gate-chip">
          <div class="gc-name">${g.formula||g.name||'—'}</div>
          ${g.lean_theorem ? `<div class="gc-lean">${g.lean_theorem.slice(0,50)}</div>` : ''}
          <span class="tag tag-gold" style="margin-top:5px;font-size:9px">${g.type||'gate'}</span>
        </div>`).join('')}</div>`;
  } catch(e) {}
}

// ── Receipt Replay ────────────────────────────────────────────────────────────
async function runReplay() {
  const el = document.getElementById('replay-result');
  el.style.display = 'block';
  el.className = 'verify-result';
  el.textContent = 'Replaying…';
  try {
    const hash = document.getElementById('replay-hash-input').value.trim();
    const body = hash ? { receipt_hash: hash } : {};
    const r = await fetch(BASE + '/v1/receipts/replay', {
      method:'POST', headers:{'Content-Type':'application/json'},
      body: JSON.stringify(body)
    });
    const d = await r.json();
    const ok = d.gate_pass || d.ok || d.replay_hash;
    el.className = 'verify-result ' + (ok ? 'ok' : 'err');
    el.innerHTML = `
      <b>${ok ? '✓ REPLAY VERIFIED' : '⚠ Replay'}</b><br>
      original: <code>${hash6(d.original_hash||'')}</code><br>
      replay: <code>${hash6(d.replay_hash||'')}</code><br>
      deterministic: <b>${d.inputs_identical ? 'YES ✓' : 'NO'}</b>
      ${d.gate_pass !== undefined ? `  gate_pass: <b>${d.gate_pass}</b>` : ''}`;
  } catch(e) {
    el.className = 'verify-result err';
    el.textContent = 'Error: ' + e.message;
  }
}

// ── Verdict Theater ───────────────────────────────────────────────────────────
async function loadVerdict() {
  try {
    const d = await api('/v1/console/verdict-theater?limit=20');
    document.getElementById('vt-total').textContent = d.total_verdicts||0;
    const verdicts = d.verdicts||[];
    document.getElementById('vt-pass').textContent = verdicts.filter(v=>v.verdict==='PASS').length;
    document.getElementById('vt-quorum').textContent = verdicts.filter(v=>v.quorum_met).length;

    const el = document.getElementById('verdict-theater-body');
    if (!verdicts.length) { el.innerHTML = '<div style="color:var(--text-muted);font:11px var(--mono)">No verdicts yet</div>'; return; }
    el.innerHTML = verdicts.map(v => `
      <div class="verdict-card">
        <div class="v-head">
          <span class="v-verdict ${v.verdict==='PASS'?'v-pass':'v-fail'}">${v.verdict||'?'}</span>
          <span class="v-action">${v.action||'?'}</span>
          <span style="margin-left:auto;font:10px var(--mono);color:var(--text-muted)">${ago(v.ts)}</span>
        </div>
        <div class="v-meta">
          Λ = <b style="color:var(--gold)">${(v.lambda||0).toFixed(4)}</b>
          · receipt: <code style="color:var(--cyan)">${hash6(v.receipt_hash||'')}</code>
          · quorum: <b>${v.quorum_met ? '✓' : '✗'}</b>
        </div>
        <div class="v-witnesses">
          ${(v.witnesses||[]).map(w => `<span class="tag tag-purple">${w}</span>`).join('')}
        </div>
      </div>`).join('');
  } catch(e) {}
}

// ── Fleet ─────────────────────────────────────────────────────────────────────
async function loadFleet() {
  try {
    const d = await api('/v4/fleet');
    const peers = d.peers || [];
    const el = document.getElementById('fleet-body');
    el.innerHTML = `
      <div style="font:11px/1.5 var(--mono);color:var(--text-muted);margin-bottom:14px">
        ${peers.filter(p=>p.status==='ok').length} / ${peers.length} organs online
        · doctrine: ${JSON.stringify(d.doctrine||{})}
        · λ: ${d.lambda||'—'}
      </div>
      <table class="data-table">
        <thead><tr><th>Organ</th><th>Status</th><th>HTTP</th><th>Space</th></tr></thead>
        <tbody>
          ${peers.map(p => `<tr>
            <td><b style="color:var(--gold)">${p.flagship}</b></td>
            <td><span class="pass-chip ${p.status==='ok'?'pass':'fail'}">${p.status}</span></td>
            <td>${p.http_code||'—'}</td>
            <td><a href="https://szlholdings-${p.flagship}.hf.space" target="_blank" class="tag tag-cyan">↗ Space</a></td>
          </tr>`).join('')}
        </tbody>
      </table>`;

    document.getElementById('fleet-cards').innerHTML = peers.map(p => `
      <div class="card">
        <div class="card-head">
          <span class="dot-status ${p.status==='ok'?'dot-ok':'dot-err'}"></span>
          <span class="icon">◻</span>${p.flagship}
        </div>
        <div class="card-body">
          <div class="kpi">
            <div class="kpi-num ${p.status==='ok'?'good':'bad'}" style="font-size:20px">${p.status==='ok'?'LIVE':'OFFLINE'}</div>
            <div class="kpi-sub">${p.error||'HTTP '+p.http_code||'—'}</div>
          </div>
        </div>
      </div>`).join('');
  } catch(e) {}
}

// ── Audit ─────────────────────────────────────────────────────────────────────
async function loadAudit() {
  try {
    const d = await api('/v1/audit-log?limit=100');
    document.getElementById('au-total').textContent = d.total_buffered||0;
    document.getElementById('au-count').textContent = d.limit||0;
    const entries = d.entries || [];
    const tbody = document.getElementById('audit-tbody');
    tbody.innerHTML = entries.map((e,i) => `<tr>
      <td>${i+1}</td>
      <td>${e.action||e.event||'—'}</td>
      <td><code style="color:var(--cyan)">${e.gate||'—'}</code></td>
      <td>${e.lambda !== undefined ? (e.lambda||0).toFixed(4) : '—'}</td>
      <td><span class="pass-chip ${e.pass||e.verdict==='PASS'?'pass':'na'}">${e.pass||e.verdict||'—'}</span></td>
      <td style="font-size:10px">${ago(e.ts||e.timestamp||'')}</td>
    </tr>`).join('');
  } catch(e) {}
}

// ── Anatomy ───────────────────────────────────────────────────────────────────
async function loadAnatomy() {
  try {
    const d = await api('/v1/console/organ-map');
    document.getElementById('anatomy-organs-body').innerHTML =
      (d.organs||[]).map(o => `
        <div style="display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 50%,transparent)">
          <span class="dot-status ${o.status==='live'?'dot-ok':'dot-idle'}"></span>
          <span style="font:700 12px var(--sans);color:var(--text)">${o.id}</span>
          <span style="font:10px var(--mono);color:var(--text-muted)">${o.role}</span>
        </div>`).join('');
    init3DAnatomy(d.organs||[], d.edges||[]);
  } catch(e) {}

  try {
    const pv = await api('/provenance');
    const el = document.getElementById('anatomy-prov-body');
    el.innerHTML = `
      <div style="font:10px/1.7 var(--mono);color:var(--text-muted)">
        SLSA: <b style="color:var(--gold)">${pv.slsa?.level||'L1 honest · L2 .att emitted (not independently verified) · L3 roadmap'}</b><br>
        Rekor: <b style="color:var(--cyan)">${pv.slsa?.rekor_log_index||'— (resolved at verify time)'}</b><br>
        image: <code>${(pv.slsa?.image_digest||'').slice(0,30)}…</code><br>
        builder: ${pv.slsa?.builder||'GitHub Actions'}
      </div>
      <div style="margin-top:10px">
        <a href="https://github.com/szl-holdings/.github/blob/main/cosign.pub" target="_blank" class="tag tag-green">cosign.pub</a>
        <a href="https://rekor.sigstore.dev" target="_blank" class="tag tag-cyan">Rekor</a>
      </div>`;
  } catch(e) {}
}


// ── LLM Hub ───────────────────────────────────────────────────────────────────
async function loadLLMHub() {
  try {
    const d = await api('/v1/llm/registry');
    document.getElementById('llm-count').textContent = d.model_count || 0;
    document.getElementById('llm-wired').textContent = d.wired_count || 0;
    document.getElementById('llm-wired').className = 'kpi-num ' + (d.wired_count > 0 ? 'good' : '');

    const models = d.models || [];
    const el = document.getElementById('llm-registry-body');
    el.innerHTML = `
      <div style="font:11px/1.5 var(--mono);color:var(--text-muted);margin-bottom:12px">
        <b style="color:var(--gold)">a11oy = THE LLM Hub</b> — ${d.model_count} models across ${Object.keys(d.tier_map||{}).length} tiers.
        ${d.wired_count > 0 ? d.wired_count + ' API keys wired.' : 'No API keys in this HF Space env (honest stub routing).'}
        Routing policy: <code style="color:var(--cyan)">${(d.routing_policy||'').slice(0,60)}…</code>
      </div>
      <table class="data-table">
        <thead><tr><th>Model</th><th>Provider</th><th>Tier</th><th>Use Case</th><th>Context</th><th>Wired</th><th>Organs</th></tr></thead>
        <tbody>
          ${models.map(m => `<tr>
            <td><b style="color:var(--gold)">${m.display_name||m.model_id}</b></td>
            <td><span class="tag tag-purple" style="font-size:9px">${m.provider}</span></td>
            <td><span class="tag tag-cyan" style="font-size:9px">T${m.tier} ${m.tier_name}</span></td>
            <td style="font-size:10px;max-width:180px">${(m.use_case||'').slice(0,60)}</td>
            <td style="font-size:10px;color:var(--cyan)">${m.context_window ? (m.context_window/1000).toFixed(0)+'K' : '—'}</td>
            <td><span class="pass-chip ${m.api_key_wired?'pass':'na'}">${m.api_key_wired?'LIVE':'STUB'}</span></td>
            <td style="font-size:9px">${(m.ecosystem_mirror||[]).join(', ')||'—'}</td>
          </tr>`).join('')}
        </tbody>
      </table>`;
  } catch(e) { document.getElementById('llm-registry-body').innerHTML = `<div class="tag tag-red">ERR: ${e.message}</div>`; }

  try {
    const f = await api('/v1/llm/forum?limit=20');
    document.getElementById('llm-forum-count').textContent = f.total_events || 0;
    const el = document.getElementById('llm-forum-body');
    const events = f.events || [];
    if (!events.length) { el.innerHTML = '<div style="color:var(--text-muted);font:11px var(--mono)">No forum events yet</div>'; }
    else el.innerHTML = events.map(e => `
      <div class="dsse-row">
        <span style="color:var(--purple)">${e.source||'?'}</span>
        <span style="margin-left:8px;color:var(--gold)">${e.event||e.model_id||'event'}</span>
        ${e.lambda ? `<span style="margin-left:8px;color:var(--cyan)">\u039b=${e.lambda}</span>` : ''}
        ${e.model_id ? `<span class="tag tag-gold" style="margin-left:8px;font-size:9px">${e.model_id}</span>` : ''}
        <span style="margin-left:auto;font-size:10px;color:var(--text-muted)">${ago(e.ts||e.ingested_at||'')}</span>
      </div>`).join('');
  } catch(e) {}

  try {
    const m = await api('/v1/llm/ecosystem-mirror');
    const el = document.getElementById('llm-mirror-body');
    const eco = m.ecosystem || {};
    el.innerHTML = Object.entries(eco).map(([organ, conf]) => `
      <div style="padding:8px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 50%,transparent)">
        <div style="font:700 12px var(--sans);color:var(--text);margin-bottom:4px">${organ}</div>
        <div style="font:10px/1.5 var(--mono);color:var(--text-muted)">
          models: <b style="color:var(--gold)">${(conf.models||[]).length}</b>
          · policy: <code style="color:var(--cyan)">${conf.mirror_policy||'—'}</code>
          ${conf.wire ? '· wire: <b>' + conf.wire + '</b>' : ''}
        </div>
        ${conf.note ? `<div style="font:10px var(--mono);color:var(--text-muted);margin-top:3px">${conf.note}</div>` : ''}
      </div>`).join('');
  } catch(e) {}
}

async function routeLLM() {
  const el = document.getElementById('llm-route-result');
  el.style.display = 'block';
  el.className = 'verify-result';
  el.textContent = 'Routing…';
  try {
    const prompt = document.getElementById('llm-route-prompt').value || 'test prompt';
    const task_hint = document.getElementById('llm-task-hint').value;
    const body = { prompt, task_hint };
    const r = await fetch(BASE + '/v1/llm/route', {
      method: 'POST', headers: {'Content-Type':'application/json'},
      body: JSON.stringify(body)
    });
    const d = await r.json();
    const receipt = d.lambda_receipt || {};
    const model = d.model_selected || {};
    el.className = 'verify-result ok';
    el.innerHTML = `
      <b>Tier ${receipt.tier_selected}: ${model.display_name||'—'}</b> (${model.provider||'—'})<br>
      \u039b = <b>${(receipt.lambda||0).toFixed(4)}</b>  ·  reason: ${receipt.reason||'—'}<br>
      model_weight_sha256: <code style="color:var(--cyan)">${(receipt.model_weight_sha256||'').slice(0,20)}…</code><br>
      <span style="color:var(--text-muted);font-size:10px">${d.response||''}</span>`;
    // Refresh forum count
    setTimeout(() => api('/v1/llm/forum?limit=1').then(f => document.getElementById('llm-forum-count').textContent = f.total_events||0).catch(()=>{}), 500);
  } catch(e) {
    el.className = 'verify-result err';
    el.textContent = 'Error: ' + e.message;
  }
}

// ── Honest ────────────────────────────────────────────────────────────────────
async function loadHonest() {
  try {
    const d = await api('/v1/honest');
    const el = document.getElementById('honest-body');
    el.innerHTML = `
      <div class="grid g-2" style="gap:12px">
        <div>
          <div class="kpi-label">Space</div>
          <div class="kpi-num" style="font-size:18px">${d.space||'a11oy'}</div>
          <div class="kpi-sub">Doctrine ${d.doctrine||'v11'}</div>
        </div>
        <div>
          <div class="kpi-label">Kernel</div>
          <div class="kpi-num cyan" style="font-size:18px">${d.kernel_commit||'c7c0ba17'}</div>
          <div class="kpi-sub">${d.declarations||749} decls · ${d.axioms_unique||14} axioms · ${d.sorries_total||163} sorries</div>
        </div>
      </div>
      <div style="margin-top:16px">
        <div class="kpi-label">SLSA Level</div>
        <span class="tag tag-green">${d.slsa?.level||d.slsa||'L1 honest · L2 .att emitted (not independently verified) · L3 roadmap'}</span>
        ${d.slsa_evidence ? `<div style="margin-top:8px;font:10px/1.7 var(--mono);color:var(--text-muted)">
          image_tag: <b style="color:var(--gold)">${d.slsa_evidence.image_tag||''}</b><br>
          Rekor: <b style="color:var(--cyan)">${d.slsa_evidence.rekor_log_index||'— (resolved at verify time)'}</b><br>
          builder: ${d.slsa_evidence.builder||''}<br>
          verified_via: ${d.slsa_evidence.verified_via||''}
        </div>` : ''}
      </div>
      <div style="margin-top:16px">
        <div class="kpi-label">Honest Disclosures</div>
        <ul style="list-style:none;padding:0;font:11px/1.9 var(--mono);color:var(--text-dim)">
          ${(d.honest_disclosures||[]).map(s=>`<li>⚠ ${s}</li>`).join('')}
        </ul>
      </div>
      <div style="margin-top:16px">
        <div class="kpi-label">Formulas Wired (${d.formulas_count||0})</div>
        <div style="margin-top:6px">${(d.formulas_wired||[]).map(f=>`<span class="tag tag-gold">${f}</span>`).join('')}</div>
      </div>`;
  } catch(e) {}
}

// ════════════════════ 3D SCENES ════════════════════

function makeRenderer(canvasId, w, h) {
  const canvas = document.getElementById(canvasId);
  if (!canvas || typeof THREE === 'undefined') return null;
  const renderer = new THREE.WebGLRenderer({ canvas, antialias:true, alpha:true });
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
  renderer.setSize(w || canvas.parentElement.clientWidth || 640, h || 300);
  return renderer;
}

function makeScene() {
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(60, 1, 0.1, 1000);
  camera.position.set(0, 0, 5);
  const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
  const dirLight = new THREE.DirectionalLight(0xd4a574, 0.8);
  dirLight.position.set(5, 5, 5);
  scene.add(ambientLight, dirLight);
  return { scene, camera };
}

function addOrbitControls(camera, renderer) {
  let isDragging = false, lastX = 0, lastY = 0, rotX = 0, rotY = 0;
  const el = renderer.domElement;
  el.addEventListener('mousedown', e => { isDragging = true; lastX = e.clientX; lastY = e.clientY; });
  el.addEventListener('mouseup', () => isDragging = false);
  el.addEventListener('mousemove', e => {
    if (!isDragging) return;
    rotY += (e.clientX - lastX) * 0.005; rotX += (e.clientY - lastY) * 0.005;
    lastX = e.clientX; lastY = e.clientY;
  });
  return () => { camera.position.x = 5 * Math.sin(rotY) * Math.cos(rotX); camera.position.y = 5 * Math.sin(rotX); camera.position.z = 5 * Math.cos(rotY) * Math.cos(rotX); camera.lookAt(0,0,0); };
}

// ── Organ Map 3D ──────────────────────────────────────────────────────────────
function init3DOrganMap(organs, edges) {
  if (typeof THREE === 'undefined') return;
  const container = document.getElementById('organ-map-3d');
  if (!container) return;
  const W = container.clientWidth || 700, H = 380;
  const renderer = makeRenderer('organCanvas', W, H);
  if (!renderer) return;
  const { scene, camera } = makeScene();
  camera.aspect = W / H; camera.updateProjectionMatrix();

  const COLORS = [0xd4a574, 0x4090f0, 0x5b8dee, 0x3ecf7a, 0x30d8e0];
  const nodes = organs.map((o, i) => {
    const angle = (i / organs.length) * Math.PI * 2;
    const x = 2.8 * Math.cos(angle), y = 2.8 * Math.sin(angle);
    const geo = new THREE.SphereGeometry(0.28, 24, 16);
    const mat = new THREE.MeshStandardMaterial({ color: COLORS[i % COLORS.length], emissive: COLORS[i % COLORS.length], emissiveIntensity: 0.25, roughness: 0.4, metalness: 0.6 });
    const mesh = new THREE.Mesh(geo, mat);
    mesh.position.set(x, y, 0);
    scene.add(mesh);
    return { mesh, x, y };
  });

  // Lines between organs
  const lineMat = new THREE.LineBasicMaterial({ color: 0x352a66, opacity: 0.6, transparent: true });
  edges.forEach(e => {
    const fi = organs.findIndex(o => o.id === e.from);
    const ti = organs.findIndex(o => o.id === e.to);
    if (fi < 0 || ti < 0) return;
    const geo = new THREE.BufferGeometry().setFromPoints([
      new THREE.Vector3(nodes[fi].x, nodes[fi].y, 0),
      new THREE.Vector3(nodes[ti].x, nodes[ti].y, 0),
    ]);
    scene.add(new THREE.Line(geo, lineMat));
  });

  // Central a11oy node
  const centerGeo = new THREE.IcosahedronGeometry(0.4, 2);
  const centerMat = new THREE.MeshStandardMaterial({ color: 0xd4a574, emissive: 0xd4a574, emissiveIntensity: 0.4, wireframe: false, roughness: 0.3, metalness: 0.7 });
  const center = new THREE.Mesh(centerGeo, centerMat);
  scene.add(center);

  const updateOrbit = addOrbitControls(camera, renderer);
  let t = 0;
  (function animate() {
    requestAnimationFrame(animate);
    t += 0.008;
    center.rotation.y = t; center.rotation.x = t * 0.3;
    nodes.forEach((n, i) => { n.mesh.position.z = 0.15 * Math.sin(t + i * 1.3); });
    updateOrbit();
    renderer.render(scene, camera);
  })();
}

// ── Mesh 3D ───────────────────────────────────────────────────────────────────
function init3DMesh(wireKeys) {
  if (typeof THREE === 'undefined') return;
  const container = document.getElementById('mesh-3d');
  if (!container) return;
  const W = container.clientWidth || 700, H = 280;
  const renderer = makeRenderer('meshCanvas', W, H);
  if (!renderer) return;
  const { scene, camera } = makeScene();
  camera.aspect = W / H; camera.updateProjectionMatrix();
  camera.position.set(0, 0, 6);

  const nodes = [], count = 8;
  for (let i = 0; i < count; i++) {
    const angle = (i / count) * Math.PI * 2;
    const r = 2.2 + (i % 2) * 0.8;
    const geo = new THREE.SphereGeometry(0.18, 16, 12);
    const c = i < 5 ? 0xd4a574 : 0x4090f0;
    const mat = new THREE.MeshStandardMaterial({ color: c, emissive: c, emissiveIntensity: 0.3, roughness: 0.5, metalness: 0.5 });
    const m = new THREE.Mesh(geo, mat);
    m.position.set(r * Math.cos(angle), r * Math.sin(angle), 0);
    scene.add(m); nodes.push(m);
  }
  for (let i = 0; i < nodes.length; i++) {
    for (let j = i + 1; j < nodes.length; j++) {
      if (Math.random() < 0.4) {
        const lg = new THREE.BufferGeometry().setFromPoints([nodes[i].position, nodes[j].position]);
        scene.add(new THREE.Line(lg, new THREE.LineBasicMaterial({ color: 0x24204a, opacity: 0.5, transparent: true })));
      }
    }
  }
  const updateOrbit = addOrbitControls(camera, renderer);
  let t = 0;
  (function animate() {
    requestAnimationFrame(animate);
    t += 0.007;
    nodes.forEach((n, i) => {
      n.position.z = 0.3 * Math.sin(t * 1.1 + i * 0.8);
      n.material.emissiveIntensity = 0.2 + 0.15 * Math.sin(t + i * 0.6);
    });
    updateOrbit();
    renderer.render(scene, camera);
  })();
}

// ── Quorum 3D (Khipu constellation) ───────────────────────────────────────────
function init3DQuorum(organList) {
  if (typeof THREE === 'undefined') return;
  const container = document.querySelector('#tab-quorum .canvas-3d');
  if (!container) return;
  const canvas = container.querySelector('canvas');
  if (!canvas) return;
  const W = container.clientWidth || 640, H = 300;
  const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
  renderer.setSize(W, H);
  const { scene, camera } = makeScene();
  camera.aspect = W / H; camera.updateProjectionMatrix();
  camera.position.set(0, 0, 6);

  const orgNames = organList.map(o => o.organ || o);
  const colors = [0xd4a574, 0x4090f0, 0x5b8dee, 0x3ecf7a];
  const orgNodes = orgNames.map((name, i) => {
    const angle = (i / orgNames.length) * Math.PI * 2;
    const geo = new THREE.OctahedronGeometry(0.32, 0);
    const mat = new THREE.MeshStandardMaterial({ color: colors[i % colors.length], emissive: colors[i % colors.length], emissiveIntensity: 0.35, roughness: 0.3, metalness: 0.7 });
    const m = new THREE.Mesh(geo, mat);
    m.position.set(2.5 * Math.cos(angle), 2.5 * Math.sin(angle), 0);
    scene.add(m);
    return m;
  });

  // Connecting lines forming the Merkle structure
  const lineMat = new THREE.LineBasicMaterial({ color: 0xd4a574, opacity: 0.4, transparent: true });
  for (let i = 0; i < orgNodes.length; i++) {
    for (let j = i + 1; j < orgNodes.length; j++) {
      const lg = new THREE.BufferGeometry().setFromPoints([orgNodes[i].position, orgNodes[j].position]);
      scene.add(new THREE.Line(lg, lineMat));
    }
  }

  // Central DAG root
  const rootGeo = new THREE.DodecahedronGeometry(0.45, 0);
  const rootMat = new THREE.MeshStandardMaterial({ color: 0xb04a30, emissive: 0xb04a30, emissiveIntensity: 0.5, roughness: 0.2, metalness: 0.8 });
  const root = new THREE.Mesh(rootGeo, rootMat);
  scene.add(root);

  const updateOrbit = addOrbitControls(camera, renderer);
  let t = 0;
  (function animate() {
    requestAnimationFrame(animate);
    t += 0.01;
    root.rotation.y = t; root.rotation.z = t * 0.5;
    orgNodes.forEach((n, i) => {
      n.rotation.y = t * 0.8;
      n.position.z = 0.3 * Math.sin(t * 0.9 + i * 1.2);
    });
    updateOrbit();
    renderer.render(scene, camera);
  })();
}

// ── Anatomy 3D ────────────────────────────────────────────────────────────────
function init3DAnatomy(organs, edges) {
  if (typeof THREE === 'undefined') return;
  const canvas = document.getElementById('anatomyCanvas');
  if (!canvas) return;
  const container = canvas.parentElement;
  const W = container.clientWidth || 700, H = 400;
  const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
  renderer.setSize(W, H);
  const { scene, camera } = makeScene();
  camera.aspect = W / H; camera.updateProjectionMatrix();
  camera.position.set(0, 1, 7);

  // Different geometry per organ role
  const GEOS = [
    new THREE.SphereGeometry(0.35, 24, 16),
    new THREE.IcosahedronGeometry(0.35, 1),
    new THREE.OctahedronGeometry(0.35, 0),
    new THREE.TetrahedronGeometry(0.35, 0),
    new THREE.DodecahedronGeometry(0.35, 0),
  ];
  const COLORS = [0xd4a574, 0x4090f0, 0x5b8dee, 0x3ecf7a, 0x30d8e0];
  const positions = [
    [0, 0, 0], [-2.5, 1.5, -0.5], [2.5, 1.5, -0.5],
    [-2.5, -1.5, 0.5], [2.5, -1.5, 0.5]
  ];

  const meshes = organs.slice(0, 5).map((o, i) => {
    const mat = new THREE.MeshStandardMaterial({ color: COLORS[i], emissive: COLORS[i], emissiveIntensity: 0.3, roughness: 0.4, metalness: 0.6 });
    const m = new THREE.Mesh(GEOS[i] || GEOS[0], mat);
    const pos = positions[i] || [Math.random() * 4 - 2, Math.random() * 3 - 1.5, 0];
    m.position.set(...pos);
    scene.add(m);
    return m;
  });

  // Edges
  edges.forEach(e => {
    const fi = organs.findIndex(o => o.id === e.from);
    const ti = organs.findIndex(o => o.id === e.to);
    if (fi < 0 || ti < 0 || !meshes[fi] || !meshes[ti]) return;
    const lg = new THREE.BufferGeometry().setFromPoints([meshes[fi].position, meshes[ti].position]);
    scene.add(new THREE.Line(lg, new THREE.LineBasicMaterial({ color: 0x352a66, opacity: 0.5, transparent: true })));
  });

  const updateOrbit = addOrbitControls(camera, renderer);
  let t = 0;
  (function animate() {
    requestAnimationFrame(animate);
    t += 0.006;
    meshes.forEach((m, i) => { m.rotation.y = t * (0.5 + i * 0.1); m.rotation.x = t * 0.15 * Math.sin(i); });
    updateOrbit();
    renderer.render(scene, camera);
  })();
}

// ══ Helper: update status dot ══
function dot(id, ok, warn = false) {
  const el = document.getElementById(id);
  if (!el) return;
  el.className = 'dot-status ' + (ok ? 'dot-ok' : warn ? 'dot-warn' : 'dot-err');
}

// ══ Initial load ══
loadTab('overview');
// Preload fleet and audit in background
setTimeout(() => {
  api('/v4/fleet').catch(() => {});
  api('/v1/audit-log').catch(() => {});
}, 2000);

// Auto-refresh overview every 30s
setInterval(() => {
  if (document.querySelector('.tab-btn[data-tab="overview"]').classList.contains('active')) {
    loadOverview();
  }
  if (document.querySelector('.tab-btn[data-tab="alerts"]').classList.contains('active')) {
    loadAlerts();
  }
}, 30000);
</script>
</body>
</html>