Spaces:

SZLHOLDINGS
/

a11oy

Running

App Files Files Community

a11oy / web /elite_console.html

betterwithage

fix(sweep): reclaim dormant anatomy-3D pages + purge sunset-domain/purple (byte-aligned GitHub de9e538)

41cbff8 verified about 1 month ago

Raw

History Blame Contribute Delete

122 kB

	<!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 <sig> <payload></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 <base64sig> \<br> <payload.json></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 & 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 <yachay@szlholdings.ai> ·
	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>