Spaces:

SZLHOLDINGS
/

a11oy

Running

App Files Files Community

betterwithage commited on Jun 7

Commit

77c22aa

verified ·

1 Parent(s): c3db402

Warhacker: expand demo tab to full 5x5 = 25 demos (per-problem demos, real tamper, honest formula panels, sovereign canvas globe fallback)

Browse files

Backend: 25-demo registry reusing KhipuChain/Merkle/RFC-6962 inclusion/point-in-polygon/conformal/CPA; real perf_counter timeline, always-on single-byte tamper test breaking the signed SHA-256 Merkle chain, honest formula statuses (locked-proven {F11,M2,CP1,G1,S2,B1}; conformal=W5-3/CP1; Lambda=Conjecture 1). register25() mounts /warhacker/index + /warhacker/run/{problem}/{demo}; /wh-demo backward-compat kept. Frontend: 5x5 picker, nominal/tamper, full panels, 23 vendored-lib viz renderers (zero CDN), sovereign 2D-canvas orbital fallback, mobile-responsive.

Files changed (2) hide show

pages/warhacker.html +796 -281
szl_warhacker_demos.py +0 -0

pages/warhacker.html CHANGED Viewed

@@ -3,9 +3,9 @@
 <head>
   <meta charset="UTF-8"/>
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-  <title>a11oy — Warhacker Demos · SZL Holdings</title>
-  <meta name="description" content="Five exhaustive, step-by-step Warhacker demos: each runs a real mechanism in-image, shows the step timeline, the catch tree that caught the line-crossing, a single-byte tamper test that breaks the signed chain, and the proven formulas behind the fix. CANNONICO is real today; the other four show the proven horizontal substrate on labelled sample data."/>
-  <!-- SOVEREIGN: zero runtime CDN. System font stack only; no network fonts, no external scripts. -->
   <style>
     :root{
       --ground:#0a0a0a; --panel:#0c0c0c; --panel2:#070707;
@@ -20,12 +20,12 @@
       --display:'Segoe UI','Helvetica Neue',Arial,system-ui,-apple-system,sans-serif;
     }
     *{box-sizing:border-box;}
-    html,body{margin:0;padding:0;background:var(--ground);color:var(--cream);
       font-family:var(--display);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
     .mono{font-family:var(--mono);}
     a{color:inherit;}
     :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px;}
-    .ribbon{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:1.1rem;
       flex-wrap:wrap;padding:0.5rem 1.25rem;font-family:var(--mono);font-size:10px;
       letter-spacing:0.12em;text-transform:uppercase;color:var(--gold);
       background:rgba(10,10,10,0.92);backdrop-filter:blur(10px);
@@ -38,7 +38,7 @@
     .live-dot{width:6px;height:6px;border-radius:50%;background:var(--live);
       box-shadow:0 0 6px var(--live);animation:pulseDot 2.2s ease-in-out infinite;}
     @keyframes pulseDot{0%,100%{opacity:1;}50%{opacity:.35;}}
-    .hero{position:relative;overflow:hidden;padding:3rem 1.5rem 2rem;text-align:center;}
     .grid-bg{position:absolute;inset:0;pointer-events:none;
       background-image:
         linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
@@ -48,91 +48,97 @@
       mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);}
     .hero-inner{position:relative;z-index:2;max-width:64rem;margin:0 auto;}
     .eyebrow{display:inline-flex;align-items:center;gap:.5rem;padding:.3rem .85rem;
-      border-radius:999px;border:1px solid var(--gold-line);background:var(--gold-soft);margin-bottom:1.5rem;}
     .eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--gold);
       animation:pulseDot 2.2s ease-in-out infinite;}
     .eyebrow-text{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);}
-    .headline{font-size:clamp(2.1rem,5vw,3.8rem);font-weight:300;line-height:1.05;
-      letter-spacing:-.03em;margin:0 0 1.1rem;color:var(--cream);}
     .headline .accent{background:linear-gradient(120deg,var(--cream) 20%,var(--gold) 90%);
       -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
-    .support{font-size:15.5px;line-height:1.65;color:var(--paragraph);max-width:46rem;margin:0 auto 1.6rem;}
-    .runall{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.5rem;font-size:12.5px;
-      font-weight:600;font-family:var(--mono);border-radius:8px;border:1px solid var(--gold);
-      background:var(--gold);color:var(--ground);cursor:pointer;letter-spacing:.06em;margin-top:.3rem;}
-    .runall:hover{background:var(--gold-bright);}
-    .runall:disabled{opacity:.5;cursor:not-allowed;}
-    .stats{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;max-width:60rem;margin:1.8rem auto 0;}
-    .stat{flex:1 1 150px;min-width:140px;border:1px solid var(--gold-line);border-radius:8px;
-      background:var(--panel);padding:.85rem 1rem;text-align:left;}
     .stat .k{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
-    .stat .v{font-size:1.3rem;font-weight:600;color:var(--gold);margin-top:.25rem;}
     .stat .v.teal{color:var(--teal);}
-    .stat .v.err{color:var(--err-bright);}
-    /* tabs */
-    .tabs-bar{position:sticky;top:0;z-index:40;display:flex;gap:.35rem;flex-wrap:wrap;justify-content:center;
-      padding:.6rem 1rem;background:rgba(10,10,10,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--gold-line);}
-    .tab-btn{font-family:var(--mono);font-size:11px;letter-spacing:.03em;padding:.5rem .85rem;border-radius:7px;
       border:1px solid var(--gold-line);background:transparent;color:var(--paragraph);cursor:pointer;transition:all .18s ease;}
     .tab-btn:hover{color:var(--gold);border-color:rgba(201,183,135,.35);}
     .tab-btn.active{background:var(--gold);color:var(--ground);border-color:var(--gold);font-weight:600;}
-    .tab-btn .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--dim);margin-right:.4rem;vertical-align:middle;}
-    .tab-btn .dot.ok{background:var(--live-bright);box-shadow:0 0 5px var(--live);}
-    .tab-btn .dot.err{background:var(--err-bright);box-shadow:0 0 5px var(--err);}
-    .tab-btn .dot.loading{background:var(--gold);animation:pulseDot 1s ease-in-out infinite;}
-    .panel-wrap{max-width:62rem;margin:1.6rem auto 3rem;padding:0 1.25rem;}
     .panel{display:none;}
     .panel.active{display:block;animation:fade .3s ease;}
     @keyframes fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
     .p-head{margin-bottom:.9rem;}
     .p-titlerow{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-bottom:.4rem;}
-    .p-title{font-size:1.55rem;font-weight:400;letter-spacing:-.02em;margin:0;color:var(--cream);}
     .label-real,.label-roadmap{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
       padding:.2rem .55rem;border-radius:5px;font-weight:600;}
     .label-real{color:var(--live-bright);border:1px solid rgba(121,199,154,.45);background:rgba(90,138,110,.12);}
     .label-roadmap{color:var(--amber);border:1px solid rgba(214,178,74,.4);background:rgba(214,178,74,.08);}
-    .p-blurb{font-size:13px;line-height:1.6;color:var(--paragraph);max-width:46rem;margin:0;}
     .roadmap-note{font-size:11.5px;line-height:1.55;color:var(--amber);background:rgba(214,178,74,.06);
       border:1px solid rgba(214,178,74,.25);border-radius:7px;padding:.55rem .8rem;margin:.7rem 0 0;}
-    .seg{display:inline-flex;gap:.3rem;margin:.85rem 0 .4rem;flex-wrap:wrap;}
-    .card-controls{display:flex;flex-wrap:wrap;gap:.5rem;margin:.7rem 0 1rem;}
     .r-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1rem;font-size:11.5px;
       font-weight:500;font-family:var(--mono);border-radius:6px;border:1px solid var(--gold-line);
       background:transparent;color:var(--gold);cursor:pointer;letter-spacing:.04em;
       transition:background .18s ease,border-color .18s ease;}
     .r-btn:hover{background:rgba(201,183,135,.08);border-color:rgba(201,183,135,.35);}
-    .r-btn:active{opacity:.75;}
     .r-btn:disabled{opacity:.4;cursor:not-allowed;}
     .r-btn-primary{background:var(--gold);color:var(--ground);border-color:var(--gold);}
     .r-btn-primary:hover{background:var(--gold-bright);border-color:var(--gold-bright);}
     .r-btn-danger{color:var(--err-bright);border-color:rgba(176,106,90,.45);}
     .r-btn-danger:hover{background:rgba(176,106,90,.1);}
-    .seg .r-btn.sel{background:var(--gold);color:var(--ground);border-color:var(--gold);}
     .verdict{display:flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:12.5px;
-      padding:.5rem .8rem;border-radius:7px;margin-bottom:.8rem;visibility:hidden;font-weight:600;}
-    .verdict.show{visibility:visible;}
     .verdict.ok{color:var(--live-bright);border:1px solid rgba(90,138,110,.45);background:rgba(90,138,110,.1);}
     .verdict.err{color:var(--err-bright);border:1px solid rgba(176,106,90,.5);background:rgba(176,106,90,.1);}
-    /* section blocks */
     .block{border:1px solid var(--gold-line);border-radius:10px;background:var(--panel);
       padding:.9rem 1rem 1rem;margin-bottom:1rem;}
     .block-h{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
-      color:var(--muted);margin:0 0 .65rem;display:flex;align-items:center;gap:.5rem;}
     .block-h .pillc{color:var(--teal);border:1px solid var(--teal-line);background:var(--teal-soft);
       border-radius:4px;padding:.05rem .35rem;font-size:9px;}
     /* step timeline */
     .tl{list-style:none;margin:0;padding:0;}
     .tl li{display:flex;gap:.65rem;align-items:flex-start;padding:.5rem 0;border-bottom:1px solid var(--gold-soft);}
     .tl li:last-child{border-bottom:none;}
     .tl .ic{flex:0 0 auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;
       font-family:var(--mono);font-size:10px;margin-top:1px;border:1px solid var(--dim);color:var(--dim);background:transparent;}
-    .tl li.pending .ic{border-color:var(--dim);color:var(--dim);}
     .tl li.running .ic{border-color:var(--gold);color:var(--gold);animation:pulseDot 1s ease-in-out infinite;}
     .tl li.complete .ic{background:rgba(90,138,110,.18);color:var(--live-bright);border-color:rgba(90,138,110,.5);}
     .tl li.failed .ic{background:rgba(176,106,90,.18);color:var(--err-bright);border-color:rgba(176,106,90,.55);}
@@ -147,7 +153,7 @@
     /* catch tree */
     .ct{list-style:none;margin:0;padding:0;}
     .ct li{font-family:var(--mono);font-size:11.5px;padding:.32rem .6rem;border-radius:5px;margin-bottom:.25rem;
-      display:flex;align-items:flex-start;gap:.5rem;border:1px solid transparent;}
     .ct li.pass{color:var(--paragraph);}
     .ct li.pass .mark{color:var(--live-bright);}
     .ct li.fail{color:var(--err-bright);background:rgba(176,106,90,.1);border-color:rgba(176,106,90,.4);}
@@ -160,10 +166,10 @@
     .ct .firstbadge{font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--err-bright);
       border:1px solid rgba(224,138,118,.5);border-radius:3px;padding:.02rem .3rem;margin-left:.45rem;}
-    /* tamper test */
     .tamper-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;}
     @media(max-width:560px){.tamper-grid{grid-template-columns:1fr;}}
-    .tamper-cell{border:1px solid var(--gold-soft);border-radius:6px;padding:.5rem .65rem;}
     .tamper-cell .tk{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
     .tamper-cell .tv{font-family:var(--mono);font-size:11px;margin-top:.2rem;word-break:break-all;}
     .tv.bad{color:var(--err-bright);} .tv.good{color:var(--live-bright);}
@@ -174,6 +180,13 @@
     .bytediff .b4{color:var(--paragraph);} .bytediff .af{color:var(--err-bright);}
     .bytediff .hl{background:rgba(224,138,118,.35);color:#fff;border-radius:2px;padding:0 1px;}
     /* formula panel */
     .fp{list-style:none;margin:0;padding:0;}
     .fp li{border:1px solid var(--gold-soft);border-radius:7px;padding:.55rem .7rem;margin-bottom:.5rem;}
@@ -186,27 +199,20 @@
     .fp .status b.roadmap{color:var(--amber);}
     .fp .where{font-family:var(--mono);font-size:9.5px;color:var(--muted);margin-top:.3rem;}
-    /* raw out */
     .out{position:relative;border:1px solid var(--gold-line);border-radius:8px;background:var(--panel2);overflow:hidden;}
     .out-label{display:flex;align-items:center;justify-content:space-between;padding:.45rem .85rem;
       border-bottom:1px solid var(--gold-line);font-family:var(--mono);font-size:9px;
       letter-spacing:.1em;text-transform:uppercase;color:var(--muted);cursor:pointer;}
-    .out-status{display:inline-flex;align-items:center;gap:.4rem;}
-    .status-dot{width:6px;height:6px;border-radius:50%;background:var(--dim);transition:background .3s;}
-    .status-dot.ok{background:var(--live-bright);box-shadow:0 0 6px var(--live);}
-    .status-dot.err{background:var(--err-bright);box-shadow:0 0 6px var(--err);}
-    .status-dot.loading{background:var(--gold);animation:pulseDot 1s ease-in-out infinite;}
     .out-pre{margin:0;padding:.85rem;font-family:var(--mono);font-size:10px;line-height:1.55;
       color:var(--paragraph);white-space:pre-wrap;word-break:break-word;max-height:340px;overflow-y:auto;
       scrollbar-width:thin;scrollbar-color:var(--dim) transparent;display:none;}
     .out-pre.show{display:block;}
-    .out-pre:empty::before{content:"— run this demo to call the live mechanism —";color:var(--dim);font-style:italic;}
     .honesty-note{font-family:var(--mono);font-size:10.5px;color:var(--teal);line-height:1.55;
       margin-top:.8rem;border-left:2px solid var(--teal-line);padding-left:.7rem;}
     .footer{border-top:1px solid var(--gold-line);padding:2rem 1.5rem;text-align:center;}
     .footer .note{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);}
-    .honest{max-width:62rem;margin:0 auto 2rem;padding:0 1.25rem;}
     .honest-box{border:1px solid var(--teal-line);border-radius:8px;background:var(--teal-soft);
       padding:.9rem 1.1rem;font-size:12px;color:var(--paragraph);line-height:1.6;}
     .honest-box b{color:var(--teal);}
@@ -217,66 +223,56 @@
 <body>
   <div class="ribbon">
     <span class="live"><span class="live-dot"></span>a11oy</span>
-    <span class="sep">·</span><span>Warhacker Demos</span>
-    <span class="sep">·</span><span class="teal">in-image · real mechanism · signed · re-verifiable</span>
     <a href="/console">console →</a>
   </div>
   <section class="hero">
     <div class="grid-bg"></div>
     <div class="hero-inner">
-      <span class="eyebrow"><span class="eyebrow-dot"></span><span class="eyebrow-text">Five exhaustive demos · live on this Space</span></span>
-      <h1 class="headline">Prove the fix.<br/><span class="accent">Step by step. No hollow PASS.</span></h1>
-      <p class="support">Each demo below runs a <b>real mechanism</b> inside this container and shows its work:
-        an ordered step timeline with real durations and computed values, the catch tree that caught the exact
-        line-crossing, a single-byte tamper test that visibly breaks the signed chain, and the proven formulas
-        behind the fix. CANNONICO is real today; the other four run the proven horizontal substrate on clearly
-        labelled sample data while the vertical stands up.</p>
-      <button class="runall" id="runAll">▶ Run all five (nominal)</button>
       <div class="stats">
-        <div class="stat"><div class="k">Demos run</div><div class="v" id="stRun">0 / 5</div></div>
-        <div class="stat"><div class="k">Records signed</div><div class="v teal" id="stSigned">0</div></div>
         <div class="stat"><div class="k">Tamper caught</div><div class="v teal" id="stTamper">0 / 0</div></div>
-        <div class="stat"><div class="k">Backend</div><div class="v teal" id="stBackend">—</div></div>
       </div>
     </div>
   </section>
-  <div class="tabs-bar" id="tabsBar">
-    <button class="tab-btn active" data-tab="cannonico"><span class="dot" id="dot-cannonico"></span>1 · CANNONICO</button>
-    <button class="tab-btn" data-tab="tychee"><span class="dot" id="dot-tychee"></span>2 · TYCHEE</button>
-    <button class="tab-btn" data-tab="hangar2apps"><span class="dot" id="dot-hangar2apps"></span>3 · HANGAR2APPS</button>
-    <button class="tab-btn" data-tab="cyber_rts"><span class="dot" id="dot-cyber_rts"></span>4 · CYBER RTS</button>
-    <button class="tab-btn" data-tab="raven"><span class="dot" id="dot-raven"></span>5 · RAVEN</button>
-    <button class="tab-btn" data-tab="ai-sbom"><span class="dot" id="dot-ai-sbom"></span>6 · AI-SBOM</button>
-    <button class="tab-btn" data-tab="agentic-provenance"><span class="dot" id="dot-agentic-provenance"></span>7 · AGENTIC PROV</button>
-  </div>
-  <div class="panel-wrap" id="panelWrap">
-    <!-- panels injected by JS from a template, one per problem -->
-  </div>
   <div class="honest">
     <div class="honest-box">
-      <b>What is real here.</b> Every demo runs live in this container. CANNONICO is a real, working mechanism today:
-      a 13-axis conjunctive ROE gate, an STL robustness value, PolyCARP-style geofence containment, and a conformal
-      confidence interval — all computed live, sealed into a DSSE envelope signed by an in-image ECDSA-P256 key
-      (verifiable against <a href="/cosign.pub" style="color:var(--teal)">/cosign.pub</a>) and chained into a SHA-256
-      Merkle/Khipu log with a Rekor-style inclusion proof. Change one byte and the chain breaks on screen. The other
-      four demos run the <b>proven horizontal substrate</b> — signed bundles, SHA-256/Merkle integrity, conjunctive
-      admission, FHIR parse, reimplemented SGP4 propagation, TPM-quote attestation — on clearly labelled sample/replay
-      data; they are labelled ROADMAP because the operational vertical (real registry, real feed, real TPM hardware,
-      production ATO) is a fast stand-up, not claimed as done. The trust score (&Lambda;) uniqueness is Conjecture 1
-      (conditional/CI-green; unconditional is false). Conjunctive gate soundness is P2 PROVEN. SLSA L1 is honest; L2 is roadmap.
     </div>
   </div>
-  <footer class="footer"><span class="note">a11oy · SZL Holdings · Warhacker demos · in-image · signed · re-verifiable · zero CDN</span></footer>
 <script>
 (function(){
   "use strict";
-  // SOVEREIGN: no external scripts. API base: /api/a11oy/v1 (Node proxy) with /v1 fallback.
   var BASES = ["/api/a11oy/v1", "/v1"];
   function api(path, opts){
     var i = 0;
@@ -284,130 +280,544 @@
       return fetch(BASES[i] + path, opts).then(function(r){
         if(!r.ok && r.status === 404 && i < BASES.length-1){ i++; return attempt(); }
         return r.json().then(function(j){ return {ok:r.ok, status:r.status, json:j}; });
-      }).catch(function(e){
-        if(i < BASES.length-1){ i++; return attempt(); }
-        throw e;
-      });
     }
     return attempt();
   }
   function getJSON(p){ return api(p, {method:"GET"}); }
-  function postJSON(p, body){
-    return api(p, {method:"POST", headers:{"Content-Type":"application/json"}, body:JSON.stringify(body||{})});
-  }
   var $ = function(id){ return document.getElementById(id); };
   function esc(s){ return String(s==null?"":s).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;"); }
   function pretty(o){ try{ return JSON.stringify(o, null, 2); }catch(e){ return String(o); } }
   function compactVal(v){
     if(v==null) return "";
     if(typeof v !== "object") return String(v);
-    // one-line compact JSON, trimmed
     var s = JSON.stringify(v);
-    return s.length>220 ? s.slice(0,217)+"…" : s;
-  }
-  // ---- the five problems (tab key -> meta) ----
-  var PROBLEMS = [
-    {key:"cannonico", title:"CANNONICO — AI oversight for autonomous drones",
-     blurb:"An autonomous (lost-contact) drone is checked against its full authorized envelope. The 13-axis conjunctive ROE gate, the STL robustness value, the PolyCARP-style geofence and the conformal confidence interval are all computed live, then sealed into a signed, tamper-evident record. Run it nominal, then run the tamper test to see one changed byte break the chain.",
-     nominalLabel:"Nominal flight (inside envelope)", tamperLabel:"Line-crossing flight"},
-    {key:"tychee", title:"TYCHEE — air-gapped ground-software deploy",
-     blurb:"A satellite ground-software bundle (UDS-style, Zarf-packaged) is admitted into an air-gapped cluster only if every OCI layer digest matches the cosign attestation and the Merkle bundle root verifies. The tamper test flips one byte in a layer — the digest no longer matches and admission is blocked.",
-     nominalLabel:"Clean bundle", tamperLabel:"Tampered layer"},
-    {key:"hangar2apps", title:"HANGAR2APPS — readiness dashboard + audit",
-     blurb:"A service member's FHIR R4 record (sample, no PHI) is parsed and run through a 5-axis conjunctive readiness gate. A signed Task attestation is chained for the audit trail. The tamper test deletes the influenza immunization — the same gate flips the member to NON-DEPLOYABLE.",
-     nominalLabel:"Medically ready", tamperLabel:"Missing immunization"},
-    {key:"cyber_rts", title:"CYBER RTS — trajectory/orbit operational context",
-     blurb:"A real ISS TLE is parsed and propagated by our reimplemented SGP4 mean-element propagator; CPA/TCPA against a labelled synthetic object is computed live and run through the collision/accuracy gate. The tamper test ages the TLE epoch by 21 days — the accuracy gate flags it before operational use.",
-     nominalLabel:"Fresh TLE", tamperLabel:"Stale epoch (+21d)"},
-    {key:"raven", title:"RAVEN — authorize a workload at the disconnected edge",
-     blurb:"A workload is admitted on a disconnected edge node only if the TPM quote matches the known-good measurement, the image is cosign-verified, and the mission is authorized (conjunctive admission). The tamper test injects an unknown binary into the IMA PCR — the quote no longer matches and admission is denied.",
-     nominalLabel:"Trusted node", tamperLabel:"PCR drift (implant)"},
-    {key:"ai-sbom", title:"AI-SBOM — air-gap binding of running model weights",
-     blurb:"A CycloneDX 1.6 MLBOM is generated in-image and the running model weights are SHA-256'd. The conjunctive admission gate admits the deployment only if the running weight hash equals the authorized MLBOM hash (one of 5 conjunctive axes) and the MLBOM is DSSE-signed. The tamper test swaps the weights — the running hash no longer matches the authorized MLBOM hash, axis S1 flips FALSE, the deployment is REJECTED and the rejection is logged indelibly to the append-only Merkle chain.",
-     nominalLabel:"Authorized weights", tamperLabel:"Shadow model (weight swap)"},
-    {key:"agentic-provenance", title:"AGENTIC PROVENANCE — who authorized that action?",
-     blurb:"A per-action provenance chain binds an autonomous action to (a) the exact agent version hash, (b) the operator delegation receipt, (c) the inputs hash, and (d) the policy-gate Λ vector — each a DSSE-signed leaf in the append-only chain. Four provenance links are then verified plus an inclusion proof. The tamper test forges the operator delegation — the delegation_chain_valid link FAILS and the action is shown to be non-attributable.",
-     nominalLabel:"Authorized delegation", tamperLabel:"Forged delegation"}
-  ];
-  var state = { run:{}, signed:0, tamperCaught:0, tamperRun:0 };
-  // ---- build panel DOM for each problem ----
-  var wrap = $("panelWrap");
-  PROBLEMS.forEach(function(p, idx){
-    var sec = document.createElement("section");
-    sec.className = "panel" + (idx===0?" active":"");
-    sec.id = "panel-"+p.key;
-    sec.innerHTML =
-      '<div class="p-head">'+
-        '<div class="p-titlerow">'+
-          '<h2 class="p-title">'+esc(p.title)+'</h2>'+
-          '<span id="lbl-'+p.key+'"></span>'+
-        '</div>'+
-        '<p class="p-blurb">'+esc(p.blurb)+'</p>'+
-        '<div id="rmnote-'+p.key+'"></div>'+
-      '</div>'+
-      '<div class="card-controls">'+
-        '<button class="r-btn r-btn-primary" data-act="nominal" data-k="'+p.key+'">▶ '+esc(p.nominalLabel)+'</button>'+
-        '<button class="r-btn r-btn-danger" data-act="tamper" data-k="'+p.key+'">⚠ Tamper test — '+esc(p.tamperLabel)+'</button>'+
-      '</div>'+
-      '<div id="verdict-'+p.key+'" class="verdict"></div>'+
-      '<div class="block"><div class="block-h"><span class="pillc">step timeline</span> real wall-clock durations · computed values</div>'+
-        '<ul class="tl" id="tl-'+p.key+'"><li class="empty">— run a demo to populate the timeline —</li></ul></div>'+
-      '<div class="block" id="ctblock-'+p.key+'"><div class="block-h"><span class="pillc">catch tree</span> first failing condition auto-expanded</div>'+
-        '<ul class="ct" id="ct-'+p.key+'"><li class="empty">— run a demo —</li></ul></div>'+
-      '<div class="block" id="chainselfblock-'+p.key+'"><div class="block-h"><span class="pillc">live chain</span> this run\u2019s own signed chain — re-verified intact</div>'+
-        '<div id="chainself-'+p.key+'"><div class="empty">— run a demo to verify the live signed chain —</div></div></div>'+
-      '<div class="block" id="tamperblock-'+p.key+'"><div class="block-h"><span class="pillc">tamper test</span> one byte flipped → chain breaks</div>'+
-        '<div id="tamper-'+p.key+'"><div class="empty">— run the tamper test to flip one byte and watch the signed chain break —</div></div></div>'+
-      '<div class="block"><div class="block-h"><span class="pillc">formula-proof panel</span> exact formulas + honest status</div>'+
-        '<ul class="fp" id="fp-'+p.key+'"><li class="empty">— run a demo —</li></ul></div>'+
-      '<div class="out">'+
-        '<div class="out-label" data-toggle="raw-'+p.key+'"><span>raw signed record (click to expand)</span>'+
-          '<span class="out-status"><span class="status-dot" id="dotr-'+p.key+'"></span><span id="status-'+p.key+'">idle</span></span></div>'+
-        '<pre class="out-pre" id="raw-'+p.key+'"></pre></div>'+
-      '<div class="honesty-note" id="honesty-'+p.key+'"></div>';
-    wrap.appendChild(sec);
-  });
-  // ---- tab switching ----
-  var tabBtns = document.querySelectorAll(".tab-btn");
-  tabBtns.forEach(function(b){
-    b.addEventListener("click", function(){
-      tabBtns.forEach(function(x){ x.classList.remove("active"); });
-      b.classList.add("active");
-      document.querySelectorAll(".panel").forEach(function(pp){ pp.classList.remove("active"); });
-      $("panel-"+b.dataset.tab).classList.add("active");
     });
-  });
-  // ---- raw toggles ----
-  document.querySelectorAll(".out-label[data-toggle]").forEach(function(el){
-    el.addEventListener("click", function(){ var t=$(el.dataset.toggle); if(t) t.classList.toggle("show"); });
-  });
-  function setStatus(key, st, txt){
-    var d=$("dotr-"+key); if(d) d.className="status-dot"+(st?(" "+st):"");
-    var s=$("status-"+key); if(s) s.textContent=txt||st||"";
   }
-  function setTabDot(key, st){ var d=$("dot-"+key); if(d) d.className="dot"+(st?(" "+st):""); }
-  function refreshStats(){
-    var n = Object.keys(state.run).length;
-    $("stRun").textContent = n + " / 5";
-    $("stSigned").textContent = state.signed;
-    $("stTamper").textContent = state.tamperCaught + " / " + state.tamperRun;
   }
-  // ---- renderers ----
   function renderTimeline(key, timeline, animate){
-    var ul = $("tl-"+key); ul.innerHTML = "";
     var lis = [];
     (timeline||[]).forEach(function(t){
       var li = document.createElement("li");
-      var status = animate ? "pending" : (t.ok ? "complete" : "failed");
-      li.className = status;
       var icon = animate ? "•" : (t.ok ? "✓" : "✕");
       li.innerHTML =
         '<span class="ic">'+icon+'</span>'+
@@ -418,49 +828,37 @@
       ul.appendChild(li); lis.push({li:li, t:t});
     });
     if(!animate) return Promise.resolve();
-    // animate: pending -> running -> complete/failed in sequence
     return new Promise(function(resolve){
       var i = 0;
       function tick(){
         if(i >= lis.length){ resolve(); return; }
-        var o = lis[i];
-        o.li.className = "running";
-        o.li.querySelector(".ic").textContent = "•";
-        setTimeout(function(){
-          var ok = o.t.ok;
-          o.li.className = ok ? "complete" : "failed";
-          o.li.querySelector(".ic").textContent = ok ? "✓" : "✕";
-          i++; tick();
-        }, Math.min(380, 120 + (o.t.duration_ms||0)*4));
       }
       tick();
     });
   }
   function renderCatchTree(key, tree, firstFail){
-    var ul = $("ct-"+key); ul.innerHTML = "";
     if(!tree || !tree.length){ ul.innerHTML = '<li class="empty">— no catch tree —</li>'; return; }
     tree.forEach(function(c){
       var pass = !!c.pass;
       var li = document.createElement("li");
-      li.className = pass ? "pass" : "fail" + (c.node===firstFail ? " firstfail" : "");
       var marginTxt = (c.margin!=null) ? ("margin "+c.margin) : (c.detail||"");
       li.innerHTML =
         '<span class="mark">'+(pass?"✓":"✕")+'</span>'+
         '<span class="nm">'+esc(c.node)+'</span>'+
         (c.node===firstFail ? '<span class="firstbadge">caught here</span>' : '')+
         '<span class="margin">'+esc(marginTxt)+'</span>';
-      // label line under name
-      if(c.label){
-        var sub = document.createElement("div");
         sub.style.cssText="font-size:10px;color:var(--muted);width:100%;margin-left:1.6rem;margin-top:-.1rem;";
-        sub.textContent = c.label;
-        li.appendChild(sub);
-      }
       ul.appendChild(li);
     });
   }
   function flipDiff(before, after){
     if(before==null || after==null) return esc(String(after));
     var b=String(before), a=String(after), i=0;
@@ -468,11 +866,9 @@
     var pre=esc(a.slice(0,i)), ch=esc(a.slice(i,i+1)), post=esc(a.slice(i+1));
     return '<span class="b4">before: '+esc(b)+'</span><br><span class="af">after:&nbsp; '+pre+'<span class="hl">'+ch+'</span>'+post+'</span>';
   }
   function renderChainSelf(key, cs){
-    var box = $("chainself-"+key);
-    if(!box) return;
-    if(!cs){ box.innerHTML = ""; return; }
     var intact = (cs.chain_intact===true) && (cs.merkle_root_matches===true);
     box.innerHTML =
       '<div class="tamper-grid">'+
@@ -482,9 +878,8 @@
         '<div class="tamper-cell"><div class="tk">chain depth</div><div class="tv">'+esc(cs.depth)+'</div></div>'+
       '</div>';
   }
-  function renderTamper(key, tt, problem){
-    var box = $("tamper-"+key);
     if(!tt){ box.innerHTML = '<div class="empty">— no tamper data —</div>'; return false; }
     var incl = tt.inclusion || {};
     var caught = (tt.chain_intact===false) || (tt.merkle_root_matches===false) || (incl.inclusion_valid===false);
@@ -493,10 +888,10 @@
       ? ('TAMPER CAUGHT — flipped 1 byte in receipt #'+(t.tampered_seq!=null?t.tampered_seq:"?")+' field "'+esc(t.field||"?")+'". '+
          'Chain intact: false (break at receipt #'+(tt.chain_break_at_seq!=null?tt.chain_break_at_seq:"?")+'). '+
          'Merkle root match: false. Inclusion proof valid: false.')
-      : 'No break detected (unexpected).';
     box.innerHTML =
       '<div class="tamper-summary">'+summary+'</div>'+
-      (t.before!=null ? '<div class="tamper-cell"><div class="tk">single-byte flip ('+esc(t.bytes_changed||1)+' byte) in '+esc(t.field||"")+'</div><div class="bytediff">'+flipDiff(t.before,t.after)+'</div></div>' : '')+
       '<div class="tamper-grid" style="margin-top:.5rem">'+
         '<div class="tamper-cell"><div class="tk">chain intact</div><div class="tv '+(tt.chain_intact?"good":"bad")+'">'+esc(tt.chain_intact)+'</div></div>'+
         '<div class="tamper-cell"><div class="tk">chain break at receipt</div><div class="tv '+(tt.chain_break_at_seq!=null?"bad":"good")+'">#'+esc(tt.chain_break_at_seq)+'</div></div>'+
@@ -507,18 +902,35 @@
       '</div>';
     return caught;
   }
   function renderFormula(key, panel){
-    var ul = $("fp-"+key); ul.innerHTML="";
     if(!panel || !panel.length){ ul.innerHTML='<li class="empty">— no formula panel —</li>'; return; }
     panel.forEach(function(f){
       var li=document.createElement("li");
-      var st = String(f.status||"");
-      // bold the proven/roadmap keywords honestly
-      var stHtml = esc(st)
         .replace(/PROVEN/g,'<b class="proven">PROVEN</b>')
         .replace(/roadmap/gi,'<b class="roadmap">roadmap</b>')
-        .replace(/Conjecture 1/g,'<b class="roadmap">Conjecture 1</b>');
       li.innerHTML =
         '<div class="fn">'+esc(f.formula)+(f.role?'<span class="role">'+esc(f.role)+'</span>':'')+'</div>'+
         (f.expr?'<div class="expr">'+esc(f.expr)+'</div>':'')+
@@ -527,87 +939,190 @@
       ul.appendChild(li);
     });
   }
   function setLabel(key, realOrRoadmap){
     var el=$("lbl-"+key); if(!el) return;
     var isReal = /REAL TODAY/i.test(realOrRoadmap||"");
     el.className = isReal ? "label-real" : "label-roadmap";
     el.textContent = isReal ? "REAL TODAY" : "ROADMAP · substrate real";
-    var note=$("rmnote-"+key);
-    if(note){
-      if(isReal){ note.innerHTML=""; }
-      else { note.className="roadmap-note"; note.textContent = realOrRoadmap; }
-    }
   }
-  // ---- run one demo ----
-  function runDemo(key, mode){
-    setStatus(key, "loading", mode==="tamper"?"tamper run…":"running…");
-    setTabDot(key, "loading");
-    // clear timeline to pending state quickly
-    return postJSON("/wh-demo/run/"+key, {mode:mode}).then(function(r){
       var d = r.json;
       if(!d || d.ok===false){
-        setStatus(key,"err","error"); setTabDot(key,"err");
-        $("raw-"+key).textContent = pretty(d); $("raw-"+key).classList.add("show");
         return d;
       }
-      setLabel(key, d.real_or_roadmap);
-      // verdict
-      var v=$("verdict-"+key);
       var ok = !!d.authorized;
-      v.className = "verdict show " + (ok?"ok":"err");
       v.innerHTML = '<span>'+(ok?"✓":"✕")+'</span><span>'+esc(d.decision)+' — '+esc(d.headline)+'</span>';
-      // timeline (animated)
-      var anim = renderTimeline(key, d.timeline, true);
-      // catch tree
-      renderCatchTree(key, d.catch_tree, d.first_failing_node);
-      // live-run chain self-verification (this run's OWN chain, intact)
-      renderChainSelf(key, d.chain_self);
-      // tamper test (always present — the negative test)
-      var caught = renderTamper(key, d.tamper_test, key);
-      // formula panel
-      renderFormula(key, d.formula_panel);
-      // raw
-      $("raw-"+key).textContent = pretty(d);
-      // honesty
-      $("honesty-"+key).textContent = d.honesty || "";
       // stats
-      if(!state.run[key]) state.run[key]=true;
-      if(d.sealed && d.sealed.signed) state.signed++;
       state.tamperRun++; if(caught) state.tamperCaught++;
       refreshStats();
       anim.then(function(){
-        setStatus(key, ok?"ok":"err", ok?"sealed + signed":"line crossed · caught");
-        setTabDot(key, ok?"ok":"err");
       });
       return d;
     }).catch(function(e){
-      setStatus(key,"err","error"); setTabDot(key,"err");
-      $("raw-"+key).textContent = String(e); $("raw-"+key).classList.add("show");
     });
   }
-  // ---- bind buttons ----
-  document.querySelectorAll(".r-btn[data-act]").forEach(function(b){
-    b.addEventListener("click", function(){ runDemo(b.dataset.k, b.dataset.act); });
-  });
-  // ---- run all ----
-  $("runAll").addEventListener("click", function(){
-    var btn=$("runAll"); btn.disabled=true; btn.textContent="running all five…";
-    var seq = PROBLEMS.map(function(p){ return p.key; });
-    var chain = Promise.resolve();
-    seq.forEach(function(k){ chain = chain.then(function(){ return runDemo(k,"nominal"); }); });
-    chain.then(function(){ btn.disabled=false; btn.textContent="✓ all five ran — open any tab, then try a tamper test"; })
-         .catch(function(){ btn.disabled=false; btn.textContent="▶ Run all five (nominal)"; });
-  });
-  // ---- backend probe ----
-  getJSON("/wh-demo/index").then(function(r){
-    if(r.json && r.json.ok){ $("stBackend").textContent="LIVE"; }
-    else { $("stBackend").textContent="—"; }
-  }).catch(function(){ $("stBackend").textContent="—"; });
   refreshStats();
 })();

 <head>
   <meta charset="UTF-8"/>
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>a11oy — Warhacker · 25 demos · SZL Holdings</title>
+  <meta name="description" content="Twenty-five step-by-step Warhacker demos across five official problems (CANNONICO, TYCHEE, HANGAR2APPS, CYBER-RTS, RAVEN). Each runs a real mechanism in-image: step timeline with real perf_counter durations and computed values, a single-byte tamper test that breaks the signed SHA-256 Merkle chain, an honest formula-proof panel, a signed-receipt verify, and a unique 3D/graph visualization. CANNONICO is real today; the other four run the proven horizontal substrate on clearly labelled sample data."/>
+  <!-- SOVEREIGN: zero runtime CDN. System font stack only. Viz libs vendored at /vendor/*. -->
   <style>
     :root{
       --ground:#0a0a0a; --panel:#0c0c0c; --panel2:#070707;
       --display:'Segoe UI','Helvetica Neue',Arial,system-ui,-apple-system,sans-serif;
     }
     *{box-sizing:border-box;}
+    html,body{margin:0;padding:0;background:var(--ground);color:var(--cream);overflow-x:hidden;
       font-family:var(--display);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
     .mono{font-family:var(--mono);}
     a{color:inherit;}
     :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px;}
+    .ribbon{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:1.1rem;
       flex-wrap:wrap;padding:0.5rem 1.25rem;font-family:var(--mono);font-size:10px;
       letter-spacing:0.12em;text-transform:uppercase;color:var(--gold);
       background:rgba(10,10,10,0.92);backdrop-filter:blur(10px);
     .live-dot{width:6px;height:6px;border-radius:50%;background:var(--live);
       box-shadow:0 0 6px var(--live);animation:pulseDot 2.2s ease-in-out infinite;}
     @keyframes pulseDot{0%,100%{opacity:1;}50%{opacity:.35;}}
+    .hero{position:relative;overflow:hidden;padding:2.6rem 1.5rem 1.6rem;text-align:center;}
     .grid-bg{position:absolute;inset:0;pointer-events:none;
       background-image:
         linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
       mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);}
     .hero-inner{position:relative;z-index:2;max-width:64rem;margin:0 auto;}
     .eyebrow{display:inline-flex;align-items:center;gap:.5rem;padding:.3rem .85rem;
+      border-radius:999px;border:1px solid var(--gold-line);background:var(--gold-soft);margin-bottom:1.2rem;}
     .eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--gold);
       animation:pulseDot 2.2s ease-in-out infinite;}
     .eyebrow-text{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);}
+    .headline{font-size:clamp(2rem,5vw,3.5rem);font-weight:300;line-height:1.05;
+      letter-spacing:-.03em;margin:0 0 1rem;color:var(--cream);}
     .headline .accent{background:linear-gradient(120deg,var(--cream) 20%,var(--gold) 90%);
       -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
+    .support{font-size:15px;line-height:1.62;color:var(--paragraph);max-width:46rem;margin:0 auto 1.4rem;}
+    .stats{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;max-width:62rem;margin:1.4rem auto 0;}
+    .stat{flex:1 1 140px;min-width:130px;border:1px solid var(--gold-line);border-radius:8px;
+      background:var(--panel);padding:.8rem 1rem;text-align:left;}
     .stat .k{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
+    .stat .v{font-size:1.25rem;font-weight:600;color:var(--gold);margin-top:.25rem;}
     .stat .v.teal{color:var(--teal);}
+    /* problem tabs */
+    .tabs-bar{position:sticky;top:33px;z-index:50;display:flex;gap:.35rem;flex-wrap:wrap;justify-content:center;
+      padding:.55rem 1rem;background:rgba(10,10,10,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--gold-line);}
+    .tab-btn{font-family:var(--mono);font-size:11px;letter-spacing:.02em;padding:.45rem .8rem;border-radius:7px;
       border:1px solid var(--gold-line);background:transparent;color:var(--paragraph);cursor:pointer;transition:all .18s ease;}
     .tab-btn:hover{color:var(--gold);border-color:rgba(201,183,135,.35);}
     .tab-btn.active{background:var(--gold);color:var(--ground);border-color:var(--gold);font-weight:600;}
+    .panel-wrap{max-width:64rem;margin:1.4rem auto 3rem;padding:0 1.25rem;}
     .panel{display:none;}
     .panel.active{display:block;animation:fade .3s ease;}
     @keyframes fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
     .p-head{margin-bottom:.9rem;}
     .p-titlerow{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-bottom:.4rem;}
+    .p-title{font-size:1.45rem;font-weight:400;letter-spacing:-.02em;margin:0;color:var(--cream);}
     .label-real,.label-roadmap{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
       padding:.2rem .55rem;border-radius:5px;font-weight:600;}
     .label-real{color:var(--live-bright);border:1px solid rgba(121,199,154,.45);background:rgba(90,138,110,.12);}
     .label-roadmap{color:var(--amber);border:1px solid rgba(214,178,74,.4);background:rgba(214,178,74,.08);}
+    .p-blurb{font-size:12.5px;line-height:1.6;color:var(--paragraph);max-width:48rem;margin:0;}
     .roadmap-note{font-size:11.5px;line-height:1.55;color:var(--amber);background:rgba(214,178,74,.06);
       border:1px solid rgba(214,178,74,.25);border-radius:7px;padding:.55rem .8rem;margin:.7rem 0 0;}
+    /* demo picker (5 per problem) */
+    .demo-pick{display:flex;gap:.4rem;flex-wrap:wrap;margin:.9rem 0 .2rem;}
+    .demo-chip{flex:1 1 auto;min-width:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.02em;
+      padding:.5rem .55rem;border-radius:7px;border:1px solid var(--gold-line);background:transparent;
+      color:var(--paragraph);cursor:pointer;transition:all .16s ease;text-align:left;line-height:1.3;}
+    .demo-chip:hover{color:var(--gold);border-color:rgba(201,183,135,.35);}
+    .demo-chip.sel{background:rgba(201,183,135,.1);border-color:var(--gold);color:var(--gold);font-weight:600;}
+    .demo-chip .cid{display:inline-block;color:var(--teal);font-weight:700;margin-right:.35rem;}
+    .demo-chip .cdot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--dim);margin-left:.35rem;vertical-align:middle;}
+    .demo-chip .cdot.ok{background:var(--live-bright);box-shadow:0 0 5px var(--live);}
+    .demo-chip .cdot.err{background:var(--err-bright);box-shadow:0 0 5px var(--err);}
+    .demo-title{font-size:1.05rem;font-weight:500;color:var(--cream);margin:1.1rem 0 .15rem;letter-spacing:-.01em;}
+    .card-controls{display:flex;flex-wrap:wrap;gap:.5rem;margin:.55rem 0 .9rem;}
     .r-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1rem;font-size:11.5px;
       font-weight:500;font-family:var(--mono);border-radius:6px;border:1px solid var(--gold-line);
       background:transparent;color:var(--gold);cursor:pointer;letter-spacing:.04em;
       transition:background .18s ease,border-color .18s ease;}
     .r-btn:hover{background:rgba(201,183,135,.08);border-color:rgba(201,183,135,.35);}
     .r-btn:disabled{opacity:.4;cursor:not-allowed;}
     .r-btn-primary{background:var(--gold);color:var(--ground);border-color:var(--gold);}
     .r-btn-primary:hover{background:var(--gold-bright);border-color:var(--gold-bright);}
     .r-btn-danger{color:var(--err-bright);border-color:rgba(176,106,90,.45);}
     .r-btn-danger:hover{background:rgba(176,106,90,.1);}
     .verdict{display:flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:12.5px;
+      padding:.5rem .8rem;border-radius:7px;margin-bottom:.8rem;font-weight:600;line-height:1.45;}
     .verdict.ok{color:var(--live-bright);border:1px solid rgba(90,138,110,.45);background:rgba(90,138,110,.1);}
     .verdict.err{color:var(--err-bright);border:1px solid rgba(176,106,90,.5);background:rgba(176,106,90,.1);}
     .block{border:1px solid var(--gold-line);border-radius:10px;background:var(--panel);
       padding:.9rem 1rem 1rem;margin-bottom:1rem;}
     .block-h{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
+      color:var(--muted);margin:0 0 .65rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;}
     .block-h .pillc{color:var(--teal);border:1px solid var(--teal-line);background:var(--teal-soft);
       border-radius:4px;padding:.05rem .35rem;font-size:9px;}
+    /* viz */
+    .viz-title{font-family:var(--mono);font-size:11px;color:var(--gold);margin:0 0 .55rem;line-height:1.45;}
+    .viz-canvas{width:100%;height:300px;max-width:100%;border-radius:8px;background:var(--panel2);
+      border:1px solid var(--gold-soft);overflow:hidden;position:relative;}
+    @media(max-width:560px){.viz-canvas{height:240px;}}
+    .viz-fallback{font-family:var(--mono);font-size:11px;color:var(--paragraph);line-height:1.6;padding:.6rem;}
+    .viz-legend{font-family:var(--mono);font-size:9.5px;color:var(--muted);margin-top:.45rem;display:flex;gap:1rem;flex-wrap:wrap;}
+    .viz-legend .sw{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:.3rem;vertical-align:middle;}
     /* step timeline */
     .tl{list-style:none;margin:0;padding:0;}
     .tl li{display:flex;gap:.65rem;align-items:flex-start;padding:.5rem 0;border-bottom:1px solid var(--gold-soft);}
     .tl li:last-child{border-bottom:none;}
     .tl .ic{flex:0 0 auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;
       font-family:var(--mono);font-size:10px;margin-top:1px;border:1px solid var(--dim);color:var(--dim);background:transparent;}
     .tl li.running .ic{border-color:var(--gold);color:var(--gold);animation:pulseDot 1s ease-in-out infinite;}
     .tl li.complete .ic{background:rgba(90,138,110,.18);color:var(--live-bright);border-color:rgba(90,138,110,.5);}
     .tl li.failed .ic{background:rgba(176,106,90,.18);color:var(--err-bright);border-color:rgba(176,106,90,.55);}
     /* catch tree */
     .ct{list-style:none;margin:0;padding:0;}
     .ct li{font-family:var(--mono);font-size:11.5px;padding:.32rem .6rem;border-radius:5px;margin-bottom:.25rem;
+      display:flex;align-items:flex-start;gap:.5rem;border:1px solid transparent;flex-wrap:wrap;}
     .ct li.pass{color:var(--paragraph);}
     .ct li.pass .mark{color:var(--live-bright);}
     .ct li.fail{color:var(--err-bright);background:rgba(176,106,90,.1);border-color:rgba(176,106,90,.4);}
     .ct .firstbadge{font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--err-bright);
       border:1px solid rgba(224,138,118,.5);border-radius:3px;padding:.02rem .3rem;margin-left:.45rem;}
+    /* tamper / chain cells */
     .tamper-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;}
     @media(max-width:560px){.tamper-grid{grid-template-columns:1fr;}}
+    .tamper-cell{border:1px solid var(--gold-soft);border-radius:6px;padding:.5rem .65rem;min-width:0;}
     .tamper-cell .tk{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
     .tamper-cell .tv{font-family:var(--mono);font-size:11px;margin-top:.2rem;word-break:break-all;}
     .tv.bad{color:var(--err-bright);} .tv.good{color:var(--live-bright);}
     .bytediff .b4{color:var(--paragraph);} .bytediff .af{color:var(--err-bright);}
     .bytediff .hl{background:rgba(224,138,118,.35);color:#fff;border-radius:2px;padding:0 1px;}
+    /* receipt verify */
+    .receipt{display:flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:11.5px;flex-wrap:wrap;}
+    .receipt .badge{padding:.25rem .6rem;border-radius:5px;font-weight:600;letter-spacing:.05em;}
+    .receipt .badge.pass{color:var(--live-bright);border:1px solid rgba(90,138,110,.5);background:rgba(90,138,110,.12);}
+    .receipt .badge.fail{color:var(--err-bright);border:1px solid rgba(176,106,90,.5);background:rgba(176,106,90,.12);}
+    .receipt .kv{color:var(--muted);}
     /* formula panel */
     .fp{list-style:none;margin:0;padding:0;}
     .fp li{border:1px solid var(--gold-soft);border-radius:7px;padding:.55rem .7rem;margin-bottom:.5rem;}
     .fp .status b.roadmap{color:var(--amber);}
     .fp .where{font-family:var(--mono);font-size:9.5px;color:var(--muted);margin-top:.3rem;}
     .out{position:relative;border:1px solid var(--gold-line);border-radius:8px;background:var(--panel2);overflow:hidden;}
     .out-label{display:flex;align-items:center;justify-content:space-between;padding:.45rem .85rem;
       border-bottom:1px solid var(--gold-line);font-family:var(--mono);font-size:9px;
       letter-spacing:.1em;text-transform:uppercase;color:var(--muted);cursor:pointer;}
     .out-pre{margin:0;padding:.85rem;font-family:var(--mono);font-size:10px;line-height:1.55;
       color:var(--paragraph);white-space:pre-wrap;word-break:break-word;max-height:340px;overflow-y:auto;
       scrollbar-width:thin;scrollbar-color:var(--dim) transparent;display:none;}
     .out-pre.show{display:block;}
     .honesty-note{font-family:var(--mono);font-size:10.5px;color:var(--teal);line-height:1.55;
       margin-top:.8rem;border-left:2px solid var(--teal-line);padding-left:.7rem;}
     .footer{border-top:1px solid var(--gold-line);padding:2rem 1.5rem;text-align:center;}
     .footer .note{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);}
+    .honest{max-width:64rem;margin:0 auto 2rem;padding:0 1.25rem;}
     .honest-box{border:1px solid var(--teal-line);border-radius:8px;background:var(--teal-soft);
       padding:.9rem 1.1rem;font-size:12px;color:var(--paragraph);line-height:1.6;}
     .honest-box b{color:var(--teal);}
 <body>
   <div class="ribbon">
     <span class="live"><span class="live-dot"></span>a11oy</span>
+    <span class="sep">·</span><span>Warhacker · 25 demos</span>
+    <span class="sep">·</span><span class="teal">in-image · real mechanism · signed · re-verifiable · zero CDN</span>
     <a href="/console">console →</a>
   </div>
   <section class="hero">
     <div class="grid-bg"></div>
     <div class="hero-inner">
+      <span class="eyebrow"><span class="eyebrow-dot"></span><span class="eyebrow-text">5 problems × 5 demos · live on this Space</span></span>
+      <h1 class="headline">Twenty-five proofs.<br/><span class="accent">Step by step. No hollow PASS.</span></h1>
+      <p class="support">Pick any of the 25 demos. Each runs a <b>real mechanism</b> inside this container and shows its work:
+        an ordered step timeline with real wall-clock durations and computed values, the catch tree that caught the exact
+        line-crossing, a single-byte tamper test that visibly breaks the signed SHA-256 Merkle chain, the proven formulas
+        behind the fix, a signed-receipt verify, and a unique visualization. CANNONICO is real today; the other four run
+        the proven horizontal substrate on clearly labelled sample data.</p>
       <div class="stats">
+        <div class="stat"><div class="k">Problems</div><div class="v" id="stProblems">5</div></div>
+        <div class="stat"><div class="k">Demos</div><div class="v" id="stDemos">25</div></div>
+        <div class="stat"><div class="k">Demos run</div><div class="v teal" id="stRun">0</div></div>
         <div class="stat"><div class="k">Tamper caught</div><div class="v teal" id="stTamper">0 / 0</div></div>
+        <div class="stat"><div class="k">Backend</div><div class="v teal" id="stBackend">…</div></div>
       </div>
     </div>
   </section>
+  <div class="tabs-bar" id="tabsBar"></div>
+  <div class="panel-wrap" id="panelWrap"></div>
   <div class="honest">
     <div class="honest-box">
+      <b>What is real here.</b> Every demo runs live in this container. <b>CANNONICO is real today</b>: STL robustness,
+      PolyCARP-style geofence containment, A* safe-return and a real SHA-256 Merkle/Khipu hash chain with a Rekor-style
+      inclusion proof — all computed live, sealed into a DSSE envelope signed by an in-image ECDSA-P256 key (verifiable
+      against <a href="/cosign.pub" style="color:var(--teal)">/cosign.pub</a>). Change one byte and the chain breaks on
+      screen. The other four problems run the <b>proven horizontal substrate</b> — SHA-256/Merkle integrity, conjunctive
+      admission, conformal coverage, reimplemented SGP4 propagation, Byzantine quorum — on clearly labelled sample data;
+      labelled ROADMAP because the operational vertical (real registry, real feed, real TPM hardware, production ATO) is
+      a fast stand-up, not claimed as done. Locked-proven (zero-sorry Lean): F11 STL, M2 Hash-Chain, CP1 Conformal,
+      G1 CPA, S2 Simplex, B1 Byzantine. The trust score (&Lambda;) uniqueness is <b>Conjecture 1</b>
+      (conditional/CI-green; unconditional is false). SLSA L1 honest; L2 roadmap. GIN-GRU / PEGASUS are external,
+      experimental predictors shown on sample data.
     </div>
   </div>
+  <footer class="footer"><span class="note">a11oy · SZL Holdings · Warhacker · 25 demos · in-image · signed · re-verifiable · zero CDN</span></footer>
+  <!-- SOVEREIGN: viz libraries vendored locally (NO CDN). Loaded lazily on first use. -->
 <script>
 (function(){
   "use strict";
   var BASES = ["/api/a11oy/v1", "/v1"];
   function api(path, opts){
     var i = 0;
       return fetch(BASES[i] + path, opts).then(function(r){
         if(!r.ok && r.status === 404 && i < BASES.length-1){ i++; return attempt(); }
         return r.json().then(function(j){ return {ok:r.ok, status:r.status, json:j}; });
+      }).catch(function(e){ if(i < BASES.length-1){ i++; return attempt(); } throw e; });
     }
     return attempt();
   }
   function getJSON(p){ return api(p, {method:"GET"}); }
+  function postJSON(p, body){ return api(p, {method:"POST", headers:{"Content-Type":"application/json"}, body:JSON.stringify(body||{})}); }
   var $ = function(id){ return document.getElementById(id); };
   function esc(s){ return String(s==null?"":s).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;"); }
   function pretty(o){ try{ return JSON.stringify(o, null, 2); }catch(e){ return String(o); } }
   function compactVal(v){
     if(v==null) return "";
     if(typeof v !== "object") return String(v);
     var s = JSON.stringify(v);
+    return s.length>240 ? s.slice(0,237)+"…" : s;
+  }
+  /* ---------- lazy vendored-script loader (zero CDN; from /vendor/*) ---------- */
+  var _loaded = {};
+  function loadScript(file){
+    if(_loaded[file]) return _loaded[file];
+    _loaded[file] = new Promise(function(res, rej){
+      var s = document.createElement("script");
+      s.src = "/vendor/" + file; s.async = true;
+      s.onload = function(){ res(true); };
+      s.onerror = function(){ rej(new Error("vendor load failed: "+file)); };
+      document.head.appendChild(s);
     });
+    return _loaded[file];
+  }
+  // which vendor files each viz kind needs
+  var VIZ_DEPS = {
+    vectorfield:["echarts.min.js"], geofence:["echarts.min.js"], scatter_trails:["echarts.min.js"],
+    thermal_field:["echarts.min.js"], byzantine:["echarts.min.js"], fusion_ellipse:["echarts.min.js"],
+    iq_scatter:["echarts.min.js"], vital_band:["echarts.min.js"], scatter_simplex:["echarts.min.js"],
+    httpvfs_console:["echarts.min.js"],
+    tamper_dag:["cytoscape.min.js"], cascade_tree:["cytoscape.min.js"],
+    globe_conjunction:["three.min.js","globe.gl.min.js"], globe_tube:["three.min.js","globe.gl.min.js"],
+    killchain_globe:["three.min.js","globe.gl.min.js"],
+    sankey_stl:["d3.min.js","d3-sankey.min.js"], sankey_info:["d3.min.js","d3-sankey.min.js"]
+    // boids -> canvas (no dep); waterfall -> svg (no dep);
+    // pathgraph/galaxy/mesh_graph/tactical_galaxy -> built-in canvas graph (no dep)
+  };
+  function ensureDeps(kind){
+    var deps = VIZ_DEPS[kind] || [];
+    var chain = Promise.resolve();
+    deps.forEach(function(f){ chain = chain.then(function(){ return loadScript(f); }); });
+    return chain;
+  }
+  var GOLD="#c9b787", TEAL="#5fb3a3", ERR="#e08a76", LIVE="#79c79a", DIM="#555", CREAM="#f5f5f5", PANEL="#070707";
+  /* ---------- the 5 problems / 25 demos (filled from /warhacker/index) ---------- */
+  var PROBLEMS = []; // [{key,title,blurb,real_or_roadmap,demos:[{id,title,...}]}]
+  var state = { run:{}, tamperCaught:0, tamperRun:0 };
+  var sel = {}; // problemKey -> selected demo id
+  /* ============================ VIZ RENDERERS ============================ */
+  var _charts = {}; // containerId -> echarts instance / cleanup
+  function clearViz(cid){
+    var c = $(cid); if(!c) return;
+    if(_charts[cid]){ try{ _charts[cid](); }catch(e){} delete _charts[cid]; }
+    c.innerHTML = "";
+  }
+  function vizFallback(cid, viz){
+    var c=$(cid); if(!c) return;
+    var rows = Object.keys(viz).filter(function(k){return k!=="kind"&&k!=="lib"&&k!=="title";})
+      .map(function(k){ return '<div><span style="color:'+TEAL+'">'+esc(k)+'</span>: '+esc(compactVal(viz[k]))+'</div>'; }).join("");
+    c.innerHTML = '<div class="viz-fallback">'+rows+'</div>';
+  }
+  function echartInit(cid){
+    var c=$(cid); if(!c||!window.echarts) return null;
+    var inst = window.echarts.init(c, null, {renderer:"canvas"});
+    _charts[cid] = function(){ try{ inst.dispose(); }catch(e){} window.removeEventListener("resize", rs); };
+    var rs = function(){ try{ inst.resize(); }catch(e){} };
+    window.addEventListener("resize", rs);
+    return inst;
+  }
+  var ECBASE = { backgroundColor:"transparent", textStyle:{color:"#9a9a9a",fontFamily:"monospace"},
+    grid:{left:48,right:18,top:30,bottom:38}, animationDuration:600 };
+  function renderViz(cid, viz){
+    clearViz(cid);
+    if(!viz){ return; }
+    var kind = viz.kind;
+    ensureDeps(kind).then(function(){
+      try{ _renderVizImpl(cid, viz); }
+      catch(e){ vizFallback(cid, viz); }
+    }).catch(function(){ vizFallback(cid, viz); });
   }
+  function _renderVizImpl(cid, viz){
+    var k = viz.kind;
+    switch(k){
+      case "vectorfield": return vizVectorField(cid, viz);
+      case "geofence": return vizGeofence(cid, viz);
+      case "scatter_trails": return vizTrails(cid, viz, "AI confidence", "floor");
+      case "scatter_simplex": return vizTrails(cid, viz, "deterioration score", "thr", true);
+      case "thermal_field": return vizThermal(cid, viz);
+      case "vital_band": return vizVitalBand(cid, viz);
+      case "byzantine": return vizByzantine(cid, viz);
+      case "fusion_ellipse": return vizFusion(cid, viz);
+      case "iq_scatter": return vizIQ(cid, viz);
+      case "httpvfs_console": return vizHttpvfs(cid, viz);
+      case "tamper_dag": return vizDag(cid, viz);
+      case "cascade_tree": return vizCascade(cid, viz);
+      case "globe_conjunction":
+      case "killchain_globe":
+      case "globe_tube": return vizGlobe(cid, viz);
+      case "sankey_stl": return vizSankeySTL(cid, viz);
+      case "sankey_info": return vizSankeyInfo(cid, viz);
+      case "boids": return vizBoids(cid, viz);
+      case "waterfall": return vizWaterfall(cid, viz);
+      case "pathgraph":
+      case "galaxy":
+      case "mesh_graph":
+      case "tactical_galaxy": return vizGraph(cid, viz);
+      default: return vizFallback(cid, viz);
+    }
+  }
+  /* --- ECharts-based --- */
+  function vizVectorField(cid, v){
+    var ec = echartInit(cid); if(!ec) return vizFallback(cid, v);
+    var pts = (v.series||[]).map(function(s){ return [s.t, s.alt]; });
+    var danger = (v.series||[]).filter(function(s){return s.alt>(v.threshold_x||1e9);}).map(function(s){return [s.t,s.alt];});
+    ec.setOption(Object.assign({}, ECBASE, {
+      xAxis:{name:"t (10Hz)", type:"value", axisLine:{lineStyle:{color:DIM}}, splitLine:{show:false}},
+      yAxis:{name:v.y_label||"alt", type:"value", axisLine:{lineStyle:{color:DIM}}, splitLine:{lineStyle:{color:"rgba(255,255,255,.04)"}}},
+      series:[
+        {type:"line", data:pts, smooth:true, symbol:"circle", symbolSize:7, lineStyle:{color:GOLD,width:2},
+         itemStyle:{color:GOLD}, areaStyle:{color:"rgba(201,183,135,.06)"},
+         markLine:{silent:true, data:[{yAxis:v.threshold_x, lineStyle:{color:ERR,type:"dashed"}, label:{formatter:"ceiling "+v.threshold_x, color:ERR}}]}},
+        {type:"scatter", data:danger, symbolSize:12, itemStyle:{color:ERR}}
+      ]
+    }));
+  }
+  function vizGeofence(cid, v){
+    var ec = echartInit(cid); if(!ec) return vizFallback(cid, v);
+    var poly = (v.polygon||[]).map(function(p){return [p[1],p[0]];}); // [lon,lat]
+    if(poly.length) poly.push(poly[0]);
+    var d = v.drone||{};
+    ec.setOption(Object.assign({}, ECBASE, {
+      xAxis:{name:"lon", type:"value", scale:true, axisLine:{lineStyle:{color:DIM}}, splitLine:{show:false}},
+      yAxis:{name:"lat", type:"value", scale:true, axisLine:{lineStyle:{color:DIM}}, splitLine:{show:false}},
+      series:[
+        {type:"line", data:poly, lineStyle:{color:ERR,width:2}, areaStyle:{color:"rgba(176,106,90,.12)"}, symbol:"none", name:"keep-out"},
+        {type:"scatter", data:[[d.lon,d.lat]], symbolSize:16, symbol:"diamond",
+         itemStyle:{color:v.inside?ERR:LIVE}, label:{show:true, formatter:v.inside?"INSIDE (incursion)":"clear", color:v.inside?ERR:LIVE, position:"right"}}
+      ]
+    }));
+  }
+  function vizTrails(cid, v, yname, thrKey, rising){
+    var ec = echartInit(cid); if(!ec) return vizFallback(cid, v);
+    var arr = v.conf || v.score || [];
+    var data = arr.map(function(y,i){ return [i,y]; });
+    var thr = v[thrKey];
+    var marks = [];
+    if(v.warn_idx!=null) marks.push({xAxis:v.warn_idx, lineStyle:{color:TEAL,type:"dashed"}, label:{formatter:"warn τ", color:TEAL}});
+    if(v.actual_idx!=null) marks.push({xAxis:v.actual_idx, lineStyle:{color:ERR}, label:{formatter:"crossing", color:ERR}});
+    ec.setOption(Object.assign({}, ECBASE, {
+      xAxis:{name:"t", type:"value", axisLine:{lineStyle:{color:DIM}}, splitLine:{show:false}},
+      yAxis:{name:yname, type:"value", scale:true, axisLine:{lineStyle:{color:DIM}}, splitLine:{lineStyle:{color:"rgba(255,255,255,.04)"}}},
+      series:[{type:"line", data:data, smooth:true, symbol:"circle", symbolSize:6, lineStyle:{color:GOLD,width:2}, itemStyle:{color:GOLD},
+        markLine:{silent:true, data:[{yAxis:thr, lineStyle:{color:ERR,type:"dashed"}, label:{formatter:(rising?"face ":"floor ")+thr, color:ERR}}].concat(marks)}}]
+    }));
+  }
+  function vizThermal(cid, v){
+    var ec = echartInit(cid); if(!ec) return vizFallback(cid, v);
+    var data = (v.temp||[]).map(function(y,i){return [i,y];});
+    var marks=[{yAxis:v.limit, lineStyle:{color:ERR,type:"dashed"}, label:{formatter:"limit "+v.limit, color:ERR}}];
+    if(v.warn_idx!=null) marks.push({xAxis:v.warn_idx, lineStyle:{color:TEAL,type:"dashed"}, label:{formatter:"W5-3 warn", color:TEAL}});
+    ec.setOption(Object.assign({}, ECBASE, {
+      xAxis:{name:"t", type:"value", axisLine:{lineStyle:{color:DIM}}, splitLine:{show:false}},
+      yAxis:{name:"°C", type:"value", scale:true, axisLine:{lineStyle:{color:DIM}}, splitLine:{lineStyle:{color:"rgba(255,255,255,.04)"}}},
+      series:[{type:"line", data:data, smooth:true, symbol:"circle", symbolSize:6, lineStyle:{color:GOLD,width:2}, itemStyle:{color:GOLD},
+        areaStyle:{color:"rgba(214,178,74,.06)"}, markLine:{silent:true, data:marks}}]
+    }));
+  }
+  function vizVitalBand(cid, v){
+    var ec = echartInit(cid); if(!ec) return vizFallback(cid, v);
+    var data=(v.spo2||[]).map(function(y,i){return [i,y];});
+    var lo=(v.band||[])[0], hi=(v.band||[])[1];
+    ec.setOption(Object.assign({}, ECBASE, {
+      xAxis:{name:"session", type:"value", axisLine:{lineStyle:{color:DIM}}, splitLine:{show:false}},
+      yAxis:{name:"SpO₂ %", type:"value", scale:true, axisLine:{lineStyle:{color:DIM}}, splitLine:{lineStyle:{color:"rgba(255,255,255,.04)"}}},
+      series:[{type:"line", data:data, smooth:true, symbol:"circle", symbolSize:7,
+        lineStyle:{color:v.in_interval?GOLD:ERR,width:2}, itemStyle:{color:v.in_interval?GOLD:ERR},
+        markLine:{silent:true, data:[
+          {yAxis:hi, lineStyle:{color:TEAL,type:"dashed"}, label:{formatter:"CP1 hi "+hi, color:TEAL}},
+          {yAxis:lo, lineStyle:{color:TEAL,type:"dashed"}, label:{formatter:"CP1 lo "+lo, color:TEAL}}]}}]
+    }));
+  }
+  function vizByzantine(cid, v){
+    var ec = echartInit(cid); if(!ec) return vizFallback(cid, v);
+    var w=v.witnesses||[];
+    var data=w.map(function(x){return {value:1, name:x.id, itemStyle:{color:x.valid?LIVE:ERR}}; });
+    ec.setOption({backgroundColor:"transparent", textStyle:{color:"#9a9a9a",fontFamily:"monospace"},
+      grid:{left:90,right:20,top:20,bottom:30},
+      xAxis:{type:"value", max:1.4, axisLine:{lineStyle:{color:DIM}}, splitLine:{show:false},
+        markLine:{}},
+      yAxis:{type:"category", data:w.map(function(x){return x.id;}), axisLine:{lineStyle:{color:DIM}}},
+      series:[{type:"bar", data:data, barWidth:"50%",
+        markLine:{silent:true, symbol:"none", data:[{xAxis:0}]} }],
+      graphic:[{type:"text", right:18, top:8, style:{text:"quorum "+v.quorum+"/"+w.length+"  ·  valid "+v.valid+"  ·  "+(v.reached?"REACHED":"NOT REACHED"),
+        fill:v.reached?LIVE:ERR, font:"11px monospace"}}]
+    });
+  }
+  function vizFusion(cid, v){
+    var ec = echartInit(cid); if(!ec) return vizFallback(cid, v);
+    var sens=v.sensors||[]; var f=v.fused||[0,0]; var a=(v.semi_axes||[1,1]);
+    // covariance ellipse (2-sigma) as a polyline
+    var ell=[]; for(var th=0; th<=360; th+=12){ var r=th*Math.PI/180;
+      ell.push([f[0]+2*a[0]*Math.cos(r), f[1]+2*a[1]*Math.sin(r)]); }
+    var pts=sens.map(function(s){ return {value:[s.x,s.y], itemStyle:{color:(s.maha>2?ERR:TEAL)},
+      label:{show:true, formatter:s.id+" (m="+s.maha+")", color:(s.maha>2?ERR:"#9a9a9a"), position:"top", fontSize:9}}; });
+    ec.setOption(Object.assign({}, ECBASE, {
+      xAxis:{type:"value", scale:true, axisLine:{lineStyle:{color:DIM}}, splitLine:{show:false}},
+      yAxis:{type:"value", scale:true, axisLine:{lineStyle:{color:DIM}}, splitLine:{show:false}},
+      series:[
+        {type:"line", data:ell, symbol:"none", lineStyle:{color:GOLD,type:"dashed",width:1.5}, name:"2σ ellipse"},
+        {type:"scatter", data:[{value:f, itemStyle:{color:GOLD}, symbolSize:14, symbol:"diamond", label:{show:true,formatter:"fused",color:GOLD,position:"bottom",fontSize:9}}], symbolSize:14},
+        {type:"scatter", data:pts, symbolSize:12}
+      ]
+    }));
+  }
+  function vizIQ(cid, v){
+    var ec = echartInit(cid); if(!ec) return vizFallback(cid, v);
+    function map(arr){ return (arr||[]).map(function(p){ return Array.isArray(p)?p:[p.i,p.q]; }); }
+    ec.setOption(Object.assign({}, ECBASE, {
+      legend:{top:4, textStyle:{color:"#9a9a9a"}, data:[v.labelA||"A", v.labelB||"B"]},
+      xAxis:{name:"I", type:"value", scale:true, axisLine:{lineStyle:{color:DIM}}, splitLine:{show:false}},
+      yAxis:{name:"Q", type:"value", scale:true, axisLine:{lineStyle:{color:DIM}}, splitLine:{show:false}},
+      series:[
+        {name:v.labelA||"A", type:"scatter", data:map(v.iqA), symbolSize:7, itemStyle:{color:TEAL}},
+        {name:v.labelB||"B", type:"scatter", data:map(v.iqB), symbolSize:7, itemStyle:{color:ERR}}
+      ]
+    }));
+  }
+  function vizHttpvfs(cid, v){
+    var ec = echartInit(cid); if(!ec) return vizFallback(cid, v);
+    ec.setOption({backgroundColor:"transparent", textStyle:{color:"#9a9a9a",fontFamily:"monospace"},
+      grid:{left:50,right:20,top:30,bottom:34},
+      xAxis:{type:"category", data:["DB pages","range reqs (O(log n))"], axisLine:{lineStyle:{color:DIM}}},
+      yAxis:{type:"value", axisLine:{lineStyle:{color:DIM}}, splitLine:{lineStyle:{color:"rgba(255,255,255,.04)"}}},
+      series:[{type:"bar", barWidth:"45%", data:[
+        {value:v.db_pages, itemStyle:{color:TEAL}}, {value:v.range_requests, itemStyle:{color:GOLD}}]}],
+      graphic:[{type:"text", right:18, top:8, style:{text:"integrity "+(v.integrity?"OK":"FAIL"),
+        fill:v.integrity?LIVE:ERR, font:"11px monospace"}}]
+    });
+  }
+  /* --- cytoscape DAGs --- */
+  function vizDag(cid, v){
+    var c=$(cid); if(!c||!window.cytoscape) return vizFallback(cid, v);
+    var els=[];
+    (v.nodes||[]).forEach(function(n){ els.push({data:{id:n.id, label:n.label||n.id,
+      cls:(n.tampered?"tamp":(n.cascade?"casc":"ok"))}}); });
+    (v.edges||[]).forEach(function(e){ els.push({data:{source:e.s, target:e.t}}); });
+    var cy = window.cytoscape({ container:c, elements:els, userZoomingEnabled:false, autoungrabify:true,
+      layout:{name:"breadthfirst", directed:true, spacingFactor:1.15, padding:14},
+      style:[
+        {selector:"node", style:{"background-color":TEAL,"label":"data(label)","color":CREAM,"font-size":"9px",
+          "font-family":"monospace","text-valign":"bottom","text-margin-y":4,"width":22,"height":22}},
+        {selector:'node[cls="tamp"]', style:{"background-color":ERR,"border-width":3,"border-color":"#fff","width":28,"height":28}},
+        {selector:'node[cls="casc"]', style:{"background-color":"#b06a5a"}},
+        {selector:"edge", style:{"width":2,"line-color":"#444","target-arrow-color":"#444","target-arrow-shape":"triangle","curve-style":"bezier"}}
+      ]});
+    cy.fit(undefined, 18);
+    _charts[cid]=function(){ try{cy.destroy();}catch(e){} };
+  }
+  function vizCascade(cid, v){
+    var c=$(cid); if(!c||!window.cytoscape) return vizFallback(cid, v);
+    var gates=v.gates||[]; var halt=v.halted_at;
+    var els=[]; var prev=null;
+    gates.forEach(function(g,i){
+      var id="g"+i; var failed = (g.pass===false)||(halt!=null && (g.name===halt||i===halt));
+      els.push({data:{id:id, label:(g.name||("gate"+i)), cls:(failed?"fail":"pass")}});
+      if(prev) els.push({data:{source:prev, target:id}});
+      prev=id;
+    });
+    var cy=window.cytoscape({container:c, elements:els, userZoomingEnabled:false, autoungrabify:true,
+      layout:{name:"breadthfirst", directed:true, spacingFactor:1.1, padding:14},
+      style:[
+        {selector:"node", style:{"background-color":LIVE,"label":"data(label)","color":CREAM,"font-size":"9px",
+          "font-family":"monospace","text-valign":"bottom","text-margin-y":4,"width":22,"height":22}},
+        {selector:'node[cls="fail"]', style:{"background-color":ERR,"border-width":3,"border-color":"#fff","width":28,"height":28}},
+        {selector:"edge", style:{"width":2,"line-color":"#444","target-arrow-color":"#444","target-arrow-shape":"triangle","curve-style":"bezier"}}
+      ]});
+    cy.fit(undefined,18);
+    _charts[cid]=function(){ try{cy.destroy();}catch(e){} };
+  }
+  /* --- globe.gl globes --- */
+  function vizGlobe(cid, v){
+    var c=$(cid); if(!c||!window.Globe) return vizGlobeCanvas(cid, v);
+    var w=c.clientWidth||300, h=c.clientHeight||300;
+    var g;
+    try{
+      g = window.Globe()(c)
+        .width(w).height(h)
+        .backgroundColor("rgba(0,0,0,0)")
+        .showGlobe(true).showAtmosphere(true).atmosphereColor(TEAL).atmosphereAltitude(0.18)
+        .globeImageUrl("/vendor/earth-night.jpg");
+    }catch(e){ try{c.innerHTML="";}catch(_){}; return vizGlobeCanvas(cid, v); }
+    try{ g.controls().autoRotate = true; g.controls().autoRotateSpeed = 0.6; g.controls().enableZoom=false; }catch(e){}
+    try{
+      function ring(seed, color){
+        var pts=[]; for(var i=0;i<=40;i++){ var t=i/40*Math.PI*2;
+          pts.push({lat: 45*Math.sin(t+seed), lng: (i*9 - 180), color:color}); }
+        return pts;
+      }
+      var pathsData = [ring(0.3, TEAL), ring(1.1, ERR)];
+      g.pathsData(pathsData).pathPointLat("lat").pathPointLng("lng")
+        .pathColor(function(p){ return p[0]&&p[0].color?p[0].color:TEAL; })
+        .pathStroke(1.5).pathDashLength(0.3).pathDashGap(0.1).pathDashAnimateTime(6000);
+      var label = (v.d_cpa_km!=null) ? ("CPA "+v.d_cpa_km+" km @ t+"+(v.t_cpa_s||0)+"s") : (v.title||"");
+      var alert = (v.conjunction===true) || (v.blocked && v.blocked.length>0);
+      g.pointsData([{lat:20, lng:-30, size:0.6}]).pointColor(function(){return alert?ERR:GOLD;})
+        .pointAltitude(0.12).pointRadius(0.6);
+      c.setAttribute("data-cpa", label);
+    }catch(e){ try{c.innerHTML="";}catch(_){}; return vizGlobeCanvas(cid, v); }
+    var rs=function(){ try{ g.width(c.clientWidth).height(c.clientHeight); }catch(e){} };
+    window.addEventListener("resize", rs);
+    _charts[cid]=function(){ window.removeEventListener("resize",rs); try{ c.innerHTML=""; }catch(e){} };
+  }
+  /* --- 2D canvas orbital fallback (sovereign, no WebGL/globe.gl dependency) --- */
+  function vizGlobeCanvas(cid, v){
+    var c=$(cid); if(!c) return;
+    c.innerHTML="";
+    var w=c.clientWidth||300, h=c.clientHeight||300;
+    var cv=document.createElement("canvas"); cv.width=w; cv.height=h;
+    cv.style.width="100%"; cv.style.height="100%"; cv.style.display="block";
+    c.appendChild(cv);
+    var ctx=cv.getContext("2d");
+    var cx=w/2, cy=h/2, R=Math.min(w,h)*0.32;
+    var alert = (v.conjunction===true) || (v.blocked && v.blocked.length>0);
+    var label = (v.d_cpa_km!=null) ? ("CPA "+v.d_cpa_km+" km @ t+"+(v.t_cpa_s||0)+"s")
+              : (v.title||"orbital geometry");
+    var ang=0, raf=null;
+    function draw(){
+      ctx.clearRect(0,0,w,h);
+      // earth disc
+      var grd=ctx.createRadialGradient(cx-R*0.3,cy-R*0.3,R*0.2,cx,cy,R);
+      grd.addColorStop(0,"#13343a"); grd.addColorStop(1,"#05131a");
+      ctx.beginPath(); ctx.arc(cx,cy,R,0,Math.PI*2); ctx.fillStyle=grd; ctx.fill();
+      ctx.strokeStyle="rgba(95,179,163,0.5)"; ctx.lineWidth=1; ctx.stroke();
+      // atmosphere
+      ctx.beginPath(); ctx.arc(cx,cy,R+5,0,Math.PI*2);
+      ctx.strokeStyle="rgba(95,179,163,0.18)"; ctx.lineWidth=6; ctx.stroke();
+      // graticule
+      ctx.strokeStyle="rgba(95,179,163,0.12)"; ctx.lineWidth=0.6;
+      for(var k=1;k<3;k++){ ctx.beginPath(); ctx.ellipse(cx,cy,R*(k/3),R,0,0,Math.PI*2); ctx.stroke(); }
+      ctx.beginPath(); ctx.ellipse(cx,cy,R,R*0.45,0,0,Math.PI*2); ctx.stroke();
+      // two orbit rings (tilted ellipses)
+      function orbit(rx,ry,rot,color,off){
+        ctx.save(); ctx.translate(cx,cy); ctx.rotate(rot);
+        ctx.beginPath(); ctx.ellipse(0,0,rx,ry,0,0,Math.PI*2);
+        ctx.strokeStyle=color; ctx.lineWidth=1.4; ctx.setLineDash([5,4]); ctx.stroke();
+        ctx.setLineDash([]);
+        // moving satellite
+        var a=ang+off; var sx=Math.cos(a)*rx, sy=Math.sin(a)*ry;
+        ctx.beginPath(); ctx.arc(sx,sy,3.2,0,Math.PI*2); ctx.fillStyle=color; ctx.fill();
+        ctx.restore();
+      }
+      orbit(R*1.45,R*0.7,0.4,TEAL,0);
+      orbit(R*1.25,R*0.95,-0.6,(alert?ERR:GOLD),Math.PI*0.7);
+      // CPA marker
+      ctx.fillStyle=alert?ERR:GOLD;
+      ctx.font="11px ui-monospace,monospace"; ctx.textAlign="center";
+      ctx.fillText(label, cx, h-12);
+      if(alert){ ctx.beginPath(); ctx.arc(cx+R*0.5,cy-R*0.2,5,0,Math.PI*2); ctx.fillStyle=ERR; ctx.fill(); }
+      ang+=0.012; raf=requestAnimationFrame(draw);
+    }
+    draw();
+    c.setAttribute("data-cpa", label);
+    _charts[cid]=function(){ if(raf) cancelAnimationFrame(raf); try{c.innerHTML="";}catch(e){} };
+  }
+  /* --- d3-sankey --- */
+  function vizSankeySTL(cid, v){
+    var c=$(cid); if(!c||!window.d3||!window.d3.sankey) return vizFallback(cid, v);
+    var stages=v.stages||[];
+    var nodes=stages.map(function(s){return {name:s.name};});
+    var links=[]; for(var i=0;i<stages.length-1;i++){
+      links.push({source:i, target:i+1, value:Math.max(0.4, Math.abs(stages[i].rho)||1), violated:(stages[i].rho<0)}); }
+    drawSankey(c, nodes, links, function(l){ return l.violated?ERR:TEAL; });
+  }
+  function vizSankeyInfo(cid, v){
+    var c=$(cid); if(!c||!window.d3||!window.d3.sankey) return vizFallback(cid, v);
+    var fnd=v.findings||[]; var summ=v.summary||[];
+    var nodes=[{name:"raw_vitals"},{name:"extractor"},{name:"summary"}];
+    var links=[{source:0,target:1,value:Math.max(1,fnd.length)},{source:1,target:2,value:Math.max(1,summ.length)}];
+    drawSankey(c, nodes, links, function(){ return TEAL; });
+  }
+  function drawSankey(c, nodes, links, colorFn){
+    var w=c.clientWidth||300, h=c.clientHeight||280;
+    var d3=window.d3;
+    c.innerHTML="";
+    var svg=d3.select(c).append("svg").attr("width",w).attr("height",h).style("display","block");
+    var sankey=d3.sankey().nodeWidth(14).nodePadding(16).extent([[8,12],[w-8,h-12]]);
+    var graph=sankey({nodes:nodes.map(function(d){return Object.assign({},d);}),
+      links:links.map(function(d){return Object.assign({},d);})});
+    svg.append("g").selectAll("path").data(graph.links).join("path")
+      .attr("d", d3.sankeyLinkHorizontal())
+      .attr("stroke", colorFn).attr("stroke-opacity",0.4)
+      .attr("stroke-width", function(d){return Math.max(2,d.width);}).attr("fill","none");
+    var node=svg.append("g").selectAll("g").data(graph.nodes).join("g");
+    node.append("rect").attr("x",function(d){return d.x0;}).attr("y",function(d){return d.y0;})
+      .attr("height",function(d){return Math.max(2,d.y1-d.y0);}).attr("width",function(d){return d.x1-d.x0;})
+      .attr("fill",GOLD).attr("rx",2);
+    node.append("text").attr("x",function(d){return d.x0<w/2?d.x1+5:d.x0-5;})
+      .attr("y",function(d){return (d.y0+d.y1)/2;}).attr("dy","0.35em")
+      .attr("text-anchor",function(d){return d.x0<w/2?"start":"end";})
+      .attr("fill",CREAM).attr("font-size","9px").attr("font-family","monospace")
+      .text(function(d){return d.name;});
+  }
+  /* --- built-in canvas force graph (pathgraph / galaxy / mesh / tactical) --- */
+  function vizGraph(cid, v){
+    var c=$(cid); if(!c) return;
+    var w=c.clientWidth||300, h=c.clientHeight||300;
+    var cv=document.createElement("canvas"); cv.width=w; cv.height=h; cv.style.width="100%"; cv.style.height="100%";
+    c.appendChild(cv); var ctx=cv.getContext("2d");
+    // normalize nodes/edges from various shapes
+    var rawNodes = v.nodes || v.points || v.files || [];
+    var nodes = rawNodes.map(function(n,i){
+      if(typeof n==="string") return {id:n};
+      return Object.assign({id:(n.id||n.name||("n"+i))}, n);
+    });
+    var idIndex={}; nodes.forEach(function(n,i){ idIndex[n.id]=i; });
+    var rawEdges = v.edges || v.links || [];
+    var edges = rawEdges.map(function(e){ return {s:(e.s||e.source||e.from), t:(e.t||e.target||e.to)}; })
+      .filter(function(e){ return idIndex[e.s]!=null && idIndex[e.t]!=null; });
+    var pathSet={}; (v.path||[]).forEach(function(p,i,arr){ if(i<arr.length-1){ pathSet[p+"->"+arr[i+1]]=1; pathSet[arr[i+1]+"->"+p]=1; } });
+    var pathNodes={}; (v.path||[]).forEach(function(p){ pathNodes[p]=1; });
+    var outlier = v.outlier;
+    // circular / seeded layout
+    nodes.forEach(function(n,i){
+      if(n.lat!=null && n.lon!=null){ n._x=n.lon; n._y=n.lat; }
+      else { var a=i/nodes.length*Math.PI*2; n._x=Math.cos(a); n._y=Math.sin(a); }
+    });
+    // scale to canvas
+    var xs=nodes.map(function(n){return n._x;}), ys=nodes.map(function(n){return n._y;});
+    var minx=Math.min.apply(null,xs), maxx=Math.max.apply(null,xs);
+    var miny=Math.min.apply(null,ys), maxy=Math.max.apply(null,ys);
+    var pad=36;
+    function sx(x){ return pad + (maxx-minx? (x-minx)/(maxx-minx):0.5)*(w-2*pad); }
+    function sy(y){ return (h-pad) - (maxy-miny? (y-miny)/(maxy-miny):0.5)*(h-2*pad); }
+    ctx.clearRect(0,0,w,h);
+    // edges
+    edges.forEach(function(e){
+      var a=nodes[idIndex[e.s]], b=nodes[idIndex[e.t]];
+      var onPath = pathSet[e.s+"->"+e.t];
+      ctx.beginPath(); ctx.moveTo(sx(a._x),sy(a._y)); ctx.lineTo(sx(b._x),sy(b._y));
+      ctx.strokeStyle = onPath?GOLD:"rgba(120,120,120,.35)"; ctx.lineWidth = onPath?2.4:1; ctx.stroke();
+    });
+    // nodes
+    nodes.forEach(function(n){
+      var col = (n.id===outlier)?ERR : (pathNodes[n.id]?GOLD : TEAL);
+      var r = (n.id===outlier||pathNodes[n.id])?6:4;
+      ctx.beginPath(); ctx.arc(sx(n._x),sy(n._y),r,0,Math.PI*2); ctx.fillStyle=col; ctx.fill();
+      ctx.fillStyle="#9a9a9a"; ctx.font="8px monospace"; ctx.fillText(String(n.id).slice(0,8), sx(n._x)+7, sy(n._y)+3);
+    });
   }
+  /* --- boids canvas animation --- */
+  function vizBoids(cid, v){
+    var c=$(cid); if(!c) return;
+    var w=c.clientWidth||300, h=c.clientHeight||300;
+    var cv=document.createElement("canvas"); cv.width=w; cv.height=h; cv.style.width="100%"; cv.style.height="100%";
+    c.appendChild(cv); var ctx=cv.getContext("2d");
+    var drones=(v.drones||[]).map(function(d,i){
+      return {x:(d.x!=null?d.x:Math.random()*w), y:(d.y!=null?d.y:Math.random()*h),
+        vx:(Math.random()-0.5)*1.2, vy:(Math.random()-0.5)*1.2, id:(d.id!=null?d.id:i)};
+    });
+    if(!drones.length){ for(var i=0;i<8;i++) drones.push({x:Math.random()*w,y:Math.random()*h,vx:(Math.random()-0.5),vy:(Math.random()-0.5),id:i}); }
+    // place inside canvas if coords look like world units
+    var maxc=Math.max.apply(null, drones.map(function(d){return Math.max(Math.abs(d.x),Math.abs(d.y));}).concat([1]));
+    if(maxc>1) drones.forEach(function(d){ d.x=(d.x/maxc)*0.7*w+0.15*w; d.y=(d.y/maxc)*0.7*h+0.15*h; });
+    var sep = v.rho_sep||30; var raf;
+    function step(){
+      ctx.fillStyle="rgba(7,7,7,.35)"; ctx.fillRect(0,0,w,h);
+      // boids: cohesion + separation + alignment (light)
+      var cx=0,cy=0; drones.forEach(function(d){cx+=d.x;cy+=d.y;}); cx/=drones.length; cy/=drones.length;
+      var minD=1e9, pair=null;
+      for(var i=0;i<drones.length;i++){ for(var j=i+1;j<drones.length;j++){
+        var dx=drones[i].x-drones[j].x, dy=drones[i].y-drones[j].y; var dd=Math.sqrt(dx*dx+dy*dy);
+        if(dd<minD){minD=dd;pair=[i,j];}
+      }}
+      drones.forEach(function(d){
+        d.vx += (cx-d.x)*0.0006; d.vy += (cy-d.y)*0.0006;
+        drones.forEach(function(o){ if(o!==d){ var dx=d.x-o.x, dy=d.y-o.y; var dd=Math.sqrt(dx*dx+dy*dy)||1;
+          if(dd<28){ d.vx += dx/dd*0.06; d.vy += dy/dd*0.06; } }});
+        var sp=Math.sqrt(d.vx*d.vx+d.vy*d.vy)||1; var max=1.6; if(sp>max){ d.vx=d.vx/sp*max; d.vy=d.vy/sp*max; }
+        d.x+=d.vx; d.y+=d.vy;
+        if(d.x<6||d.x>w-6) d.vx*=-1; if(d.y<6||d.y>h-6) d.vy*=-1;
+        d.x=Math.max(6,Math.min(w-6,d.x)); d.y=Math.max(6,Math.min(h-6,d.y));
+      });
+      // draw closest-pair link
+      if(pair){ var a=drones[pair[0]], b=drones[pair[1]]; ctx.beginPath(); ctx.moveTo(a.x,a.y); ctx.lineTo(b.x,b.y);
+        ctx.strokeStyle = minD<28?ERR:"rgba(95,179,163,.4)"; ctx.lineWidth=1.5; ctx.stroke(); }
+      drones.forEach(function(d){ ctx.beginPath(); ctx.arc(d.x,d.y,4,0,Math.PI*2);
+        ctx.fillStyle=GOLD; ctx.fill(); });
+      raf=requestAnimationFrame(step);
+    }
+    step();
+    _charts[cid]=function(){ if(raf) cancelAnimationFrame(raf); };
+  }
+  /* --- waterfall SVG --- */
+  function vizWaterfall(cid, v){
+    var c=$(cid); if(!c) return;
+    var steps=v.steps||[]; var dv=v.diverge_at;
+    var rows = steps.map(function(s,i){
+      var bad = (s.match===false) || (dv!=null && (s.name===dv||i>=dv));
+      return '<div style="display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem;font-family:monospace;font-size:11px;">'+
+        '<span style="width:110px;color:'+CREAM+'">'+esc(s.name)+'</span>'+
+        '<span style="flex:1;height:10px;border-radius:3px;background:'+(bad?ERR:TEAL)+';opacity:.7;"></span>'+
+        '<span style="width:70px;color:'+(bad?ERR:DIM)+'">'+esc(s.orig||"")+'</span>'+
+        '<span style="width:70px;color:'+(bad?ERR:DIM)+'">'+esc(s.replay||"")+'</span>'+
+        '<span style="width:16px;color:'+(bad?ERR:LIVE)+'">'+(bad?"✕":"✓")+'</span>'+
+      '</div>';
+    }).join("");
+    c.innerHTML = '<div style="padding:.7rem;">'+
+      '<div style="display:flex;gap:.5rem;font-family:monospace;font-size:8.5px;color:'+DIM+';text-transform:uppercase;letter-spacing:.08em;margin-bottom:.5rem;">'+
+        '<span style="width:110px;">span</span><span style="flex:1;">replay overlay</span><span style="width:70px;">orig</span><span style="width:70px;">replay</span><span style="width:16px;">=</span></div>'+
+      rows + '</div>';
+  }
+  /* ============================ end VIZ ============================ */
+  /* ---------- renderers (timeline / catch / chain / tamper / formula / receipt) ---------- */
   function renderTimeline(key, timeline, animate){
+    var ul = $("tl-"+key); if(!ul) return Promise.resolve(); ul.innerHTML = "";
     var lis = [];
     (timeline||[]).forEach(function(t){
       var li = document.createElement("li");
+      li.className = animate ? "running" : (t.ok ? "complete" : "failed");
       var icon = animate ? "•" : (t.ok ? "✓" : "✕");
       li.innerHTML =
         '<span class="ic">'+icon+'</span>'+
       ul.appendChild(li); lis.push({li:li, t:t});
     });
     if(!animate) return Promise.resolve();
     return new Promise(function(resolve){
       var i = 0;
       function tick(){
         if(i >= lis.length){ resolve(); return; }
+        var o = lis[i]; o.li.className = "running"; o.li.querySelector(".ic").textContent="•";
+        setTimeout(function(){ var ok=o.t.ok; o.li.className= ok?"complete":"failed";
+          o.li.querySelector(".ic").textContent= ok?"✓":"✕"; i++; tick(); },
+          Math.min(260, 90 + (o.t.duration_ms||0)*3));
       }
       tick();
     });
   }
   function renderCatchTree(key, tree, firstFail){
+    var ul = $("ct-"+key); if(!ul) return; ul.innerHTML = "";
     if(!tree || !tree.length){ ul.innerHTML = '<li class="empty">— no catch tree —</li>'; return; }
     tree.forEach(function(c){
       var pass = !!c.pass;
       var li = document.createElement("li");
+      li.className = pass ? "pass" : ("fail" + (c.node===firstFail ? " firstfail" : ""));
       var marginTxt = (c.margin!=null) ? ("margin "+c.margin) : (c.detail||"");
       li.innerHTML =
         '<span class="mark">'+(pass?"✓":"✕")+'</span>'+
         '<span class="nm">'+esc(c.node)+'</span>'+
         (c.node===firstFail ? '<span class="firstbadge">caught here</span>' : '')+
         '<span class="margin">'+esc(marginTxt)+'</span>';
+      if(c.label){ var sub=document.createElement("div");
         sub.style.cssText="font-size:10px;color:var(--muted);width:100%;margin-left:1.6rem;margin-top:-.1rem;";
+        sub.textContent=c.label; li.appendChild(sub); }
       ul.appendChild(li);
     });
   }
   function flipDiff(before, after){
     if(before==null || after==null) return esc(String(after));
     var b=String(before), a=String(after), i=0;
     var pre=esc(a.slice(0,i)), ch=esc(a.slice(i,i+1)), post=esc(a.slice(i+1));
     return '<span class="b4">before: '+esc(b)+'</span><br><span class="af">after:&nbsp; '+pre+'<span class="hl">'+ch+'</span>'+post+'</span>';
   }
   function renderChainSelf(key, cs){
+    var box = $("chainself-"+key); if(!box) return;
+    if(!cs){ box.innerHTML = '<div class="empty">— run a demo —</div>'; return; }
     var intact = (cs.chain_intact===true) && (cs.merkle_root_matches===true);
     box.innerHTML =
       '<div class="tamper-grid">'+
         '<div class="tamper-cell"><div class="tk">chain depth</div><div class="tv">'+esc(cs.depth)+'</div></div>'+
       '</div>';
   }
+  function renderTamper(key, tt){
+    var box = $("tamper-"+key); if(!box) return false;
     if(!tt){ box.innerHTML = '<div class="empty">— no tamper data —</div>'; return false; }
     var incl = tt.inclusion || {};
     var caught = (tt.chain_intact===false) || (tt.merkle_root_matches===false) || (incl.inclusion_valid===false);
       ? ('TAMPER CAUGHT — flipped 1 byte in receipt #'+(t.tampered_seq!=null?t.tampered_seq:"?")+' field "'+esc(t.field||"?")+'". '+
          'Chain intact: false (break at receipt #'+(tt.chain_break_at_seq!=null?tt.chain_break_at_seq:"?")+'). '+
          'Merkle root match: false. Inclusion proof valid: false.')
+      : 'No break detected.';
     box.innerHTML =
       '<div class="tamper-summary">'+summary+'</div>'+
+      (t.before!=null ? '<div class="tamper-cell"><div class="tk">single-byte flip in '+esc(t.field||"")+'</div><div class="bytediff">'+flipDiff(t.before,t.after)+'</div></div>' : '')+
       '<div class="tamper-grid" style="margin-top:.5rem">'+
         '<div class="tamper-cell"><div class="tk">chain intact</div><div class="tv '+(tt.chain_intact?"good":"bad")+'">'+esc(tt.chain_intact)+'</div></div>'+
         '<div class="tamper-cell"><div class="tk">chain break at receipt</div><div class="tv '+(tt.chain_break_at_seq!=null?"bad":"good")+'">#'+esc(tt.chain_break_at_seq)+'</div></div>'+
       '</div>';
     return caught;
   }
+  function renderReceipt(key, d){
+    var box=$("receipt-"+key); if(!box) return;
+    var sealed = d.sealed||{}; var env = sealed.envelope||{};
+    var signed = !!sealed.signed;
+    var mode = d.mode;
+    // honest receipt verification: nominal -> chain self intact = verifiable PASS;
+    // tamper of a tamper_dag demo (the demo IS the tamper) -> FAIL by design.
+    var cs = d.chain_self||{}; var live = (cs.chain_intact===true && cs.merkle_root_matches===true);
+    var pass = signed && live;
+    box.innerHTML =
+      '<div class="receipt">'+
+        '<span class="badge '+(pass?"pass":"fail")+'">'+(pass?"RECEIPT VERIFIED":"RECEIPT INVALID")+'</span>'+
+        '<span class="kv">DSSE signed: '+esc(signed)+'</span>'+
+        '<span class="kv">payloadType: '+esc(env.payloadType||sealed.payloadType||"in-toto")+'</span>'+
+        '<span class="kv">seq #'+esc(sealed.chain_seq!=null?sealed.chain_seq:"–")+'</span>'+
+        '<span class="kv">merkle: '+esc(String(sealed.merkle_root||"").slice(0,18))+'…</span>'+
+      '</div>';
+  }
   function renderFormula(key, panel){
+    var ul = $("fp-"+key); if(!ul) return; ul.innerHTML="";
     if(!panel || !panel.length){ ul.innerHTML='<li class="empty">— no formula panel —</li>'; return; }
     panel.forEach(function(f){
       var li=document.createElement("li");
+      var stHtml = esc(String(f.status||""))
+        .replace(/LOCKED-PROVEN/g,'<b class="proven">LOCKED-PROVEN</b>')
         .replace(/PROVEN/g,'<b class="proven">PROVEN</b>')
         .replace(/roadmap/gi,'<b class="roadmap">roadmap</b>')
+        .replace(/Conjecture 1/g,'<b class="roadmap">Conjecture 1</b>')
+        .replace(/CI-green/g,'<b class="roadmap">CI-green</b>');
       li.innerHTML =
         '<div class="fn">'+esc(f.formula)+(f.role?'<span class="role">'+esc(f.role)+'</span>':'')+'</div>'+
         (f.expr?'<div class="expr">'+esc(f.expr)+'</div>':'')+
       ul.appendChild(li);
     });
   }
   function setLabel(key, realOrRoadmap){
     var el=$("lbl-"+key); if(!el) return;
     var isReal = /REAL TODAY/i.test(realOrRoadmap||"");
     el.className = isReal ? "label-real" : "label-roadmap";
     el.textContent = isReal ? "REAL TODAY" : "ROADMAP · substrate real";
+  }
+  function setDemoDot(pkey, demoId, st){
+    var d=$("cdot-"+pkey+"-"+demoId); if(d) d.className="cdot"+(st?(" "+st):"");
   }
+  /* ---------- run one demo ---------- */
+  function runDemo(pkey, demoId, mode){
+    var statusEl=$("status-"+pkey);
+    if(statusEl) statusEl.textContent = mode==="tamper"?"tamper run…":"running…";
+    setDemoDot(pkey, demoId, "loading");
+    return postJSON("/warhacker/run/"+pkey+"/"+demoId, {mode:mode}).then(function(r){
       var d = r.json;
+      var raw=$("raw-"+pkey); if(raw) raw.textContent = pretty(d);
       if(!d || d.ok===false){
+        setDemoDot(pkey, demoId, "err");
+        var v=$("verdict-"+pkey); if(v){ v.className="verdict err"; v.innerHTML='<span>✕</span><span>backend error — see raw record</span>'; }
+        if(raw) raw.classList.add("show");
         return d;
       }
+      setLabel(pkey, d.real_or_roadmap);
+      $("demo-title-"+pkey).textContent = d.title || demoId;
+      var v=$("verdict-"+pkey);
       var ok = !!d.authorized;
+      v.className = "verdict " + (ok?"ok":"err");
       v.innerHTML = '<span>'+(ok?"✓":"✕")+'</span><span>'+esc(d.decision)+' — '+esc(d.headline)+'</span>';
+      var anim = renderTimeline(pkey, d.timeline, true);
+      renderCatchTree(pkey, d.catch_tree, d.first_failing_node);
+      renderChainSelf(pkey, d.chain_self);
+      var caught = renderTamper(pkey, d.tamper_test);
+      renderReceipt(pkey, d);
+      renderFormula(pkey, d.formula_panel);
+      $("honesty-"+pkey).textContent = d.honesty || "";
+      // viz
+      var vt=$("viztitle-"+pkey); if(vt) vt.textContent = (d.viz&&d.viz.title)||"";
+      renderViz("viz-"+pkey, d.viz);
       // stats
+      state.run[pkey+"/"+demoId]=true;
       state.tamperRun++; if(caught) state.tamperCaught++;
       refreshStats();
       anim.then(function(){
+        if(statusEl) statusEl.textContent = ok?"sealed + signed":"line crossed · caught";
+        setDemoDot(pkey, demoId, ok?"ok":"err");
       });
       return d;
     }).catch(function(e){
+      setDemoDot(pkey, demoId, "err");
+      var raw=$("raw-"+pkey); if(raw){ raw.textContent = String(e); raw.classList.add("show"); }
     });
   }
+  function selectDemo(pkey, demoId){
+    sel[pkey]=demoId;
+    document.querySelectorAll('.demo-chip[data-p="'+pkey+'"]').forEach(function(ch){
+      ch.classList.toggle("sel", ch.dataset.d===demoId);
+    });
+    var prob = PROBLEMS.filter(function(p){return p.key===pkey;})[0];
+    var dm = (prob.demos||[]).filter(function(x){return x.id===demoId;})[0] || {};
+    $("demo-title-"+pkey).textContent = dm.title || demoId;
+    // reset run panels for the newly selected demo
+    var v=$("verdict-"+pkey); if(v){ v.className="verdict"; v.style.display="none"; }
+  }
+  function refreshStats(){
+    $("stRun").textContent = Object.keys(state.run).length;
+    $("stTamper").textContent = state.tamperCaught + " / " + state.tamperRun;
+  }
+  /* ---------- build UI from index ---------- */
+  function buildUI(){
+    var bar=$("tabsBar"); var wrap=$("panelWrap");
+    bar.innerHTML=""; wrap.innerHTML="";
+    PROBLEMS.forEach(function(p, idx){
+      var b=document.createElement("button");
+      b.className="tab-btn"+(idx===0?" active":""); b.dataset.tab=p.key;
+      b.textContent=(idx+1)+" · "+p.shortName;
+      b.addEventListener("click", function(){
+        document.querySelectorAll(".tab-btn").forEach(function(x){x.classList.remove("active");});
+        b.classList.add("active");
+        document.querySelectorAll(".panel").forEach(function(pp){pp.classList.remove("active");});
+        $("panel-"+p.key).classList.add("active");
+      });
+      bar.appendChild(b);
+      var sec=document.createElement("section");
+      sec.className="panel"+(idx===0?" active":""); sec.id="panel-"+p.key;
+      var chips = (p.demos||[]).map(function(dm){
+        return '<button class="demo-chip" data-p="'+p.key+'" data-d="'+dm.id+'">'+
+          '<span class="cid">'+esc(dm.id)+'</span>'+esc(dm.short||dm.title||dm.id)+
+          '<span class="cdot" id="cdot-'+p.key+'-'+dm.id+'"></span></button>';
+      }).join("");
+      sec.innerHTML =
+        '<div class="p-head">'+
+          '<div class="p-titlerow"><h2 class="p-title">'+esc(p.title)+'</h2><span id="lbl-'+p.key+'" class="'+(/REAL TODAY/i.test(p.real_or_roadmap)?"label-real":"label-roadmap")+'">'+(/REAL TODAY/i.test(p.real_or_roadmap)?"REAL TODAY":"ROADMAP · substrate real")+'</span></div>'+
+          '<p class="p-blurb">'+esc(p.blurb||"")+'</p>'+
+          (/REAL TODAY/i.test(p.real_or_roadmap)?'':'<div class="roadmap-note">'+esc(p.real_or_roadmap)+'</div>')+
+        '</div>'+
+        '<div class="block-h" style="margin-top:.4rem"><span class="pillc">pick a demo</span> 5 demos · click one, then run nominal or tamper</div>'+
+        '<div class="demo-pick">'+chips+'</div>'+
+        '<div class="demo-title" id="demo-title-'+p.key+'"></div>'+
+        '<div class="card-controls">'+
+          '<button class="r-btn r-btn-primary" data-act="nominal" data-p="'+p.key+'">▶ Run nominal</button>'+
+          '<button class="r-btn r-btn-danger" data-act="tamper" data-p="'+p.key+'">⚠ Run tamper test</button>'+
+          '<span style="font-family:var(--mono);font-size:10px;color:var(--muted);align-self:center" id="status-'+p.key+'">idle</span>'+
+        '</div>'+
+        '<div id="verdict-'+p.key+'" class="verdict" style="display:none"></div>'+
+        '<div class="block"><div class="block-h"><span class="pillc">visualization</span> unique per demo · vendored libs · zero CDN</div>'+
+          '<div class="viz-title" id="viztitle-'+p.key+'"></div>'+
+          '<div class="viz-canvas" id="viz-'+p.key+'"></div></div>'+
+        '<div class="block"><div class="block-h"><span class="pillc">step timeline</span> real perf_counter durations · computed values</div>'+
+          '<ul class="tl" id="tl-'+p.key+'"><li class="empty">— run a demo to populate the timeline —</li></ul></div>'+
+        '<div class="block"><div class="block-h"><span class="pillc">catch tree</span> first failing condition auto-flagged</div>'+
+          '<ul class="ct" id="ct-'+p.key+'"><li class="empty">— run a demo —</li></ul></div>'+
+        '<div class="block"><div class="block-h"><span class="pillc">live chain</span> this run\u2019s own signed chain — re-verified intact</div>'+
+          '<div id="chainself-'+p.key+'"><div class="empty">— run a demo —</div></div></div>'+
+        '<div class="block"><div class="block-h"><span class="pillc">tamper test</span> one byte flipped → chain breaks</div>'+
+          '<div id="tamper-'+p.key+'"><div class="empty">— run a demo; the always-on negative test flips one byte —</div></div></div>'+
+        '<div class="block"><div class="block-h"><span class="pillc">signed receipt</span> DSSE / ECDSA-P256 · verify PASS/FAIL</div>'+
+          '<div id="receipt-'+p.key+'"><div class="empty">— run a demo —</div></div></div>'+
+        '<div class="block"><div class="block-h"><span class="pillc">formula-proof panel</span> exact formulas + honest status</div>'+
+          '<ul class="fp" id="fp-'+p.key+'"><li class="empty">— run a demo —</li></ul></div>'+
+        '<div class="out">'+
+          '<div class="out-label" data-toggle="raw-'+p.key+'"><span>raw signed record (click to expand)</span></div>'+
+          '<pre class="out-pre" id="raw-'+p.key+'"></pre></div>'+
+        '<div class="honesty-note" id="honesty-'+p.key+'"></div>';
+      wrap.appendChild(sec);
+    });
+    // bind chip selection
+    document.querySelectorAll(".demo-chip").forEach(function(ch){
+      ch.addEventListener("click", function(){ selectDemo(ch.dataset.p, ch.dataset.d); });
+    });
+    // bind run buttons
+    document.querySelectorAll(".r-btn[data-act]").forEach(function(b){
+      b.addEventListener("click", function(){
+        var pkey=b.dataset.p; var demoId=sel[pkey];
+        if(!demoId){ // default to first demo
+          var prob=PROBLEMS.filter(function(p){return p.key===pkey;})[0];
+          demoId=(prob.demos[0]||{}).id; selectDemo(pkey, demoId);
+        }
+        var vd=$("verdict-"+pkey); if(vd) vd.style.display="flex";
+        runDemo(pkey, demoId, b.dataset.act);
+      });
+    });
+    // raw toggles
+    document.querySelectorAll(".out-label[data-toggle]").forEach(function(el){
+      el.addEventListener("click", function(){ var t=$(el.dataset.toggle); if(t) t.classList.toggle("show"); });
+    });
+    // pre-select first demo per problem
+    PROBLEMS.forEach(function(p){ if(p.demos&&p.demos.length) selectDemo(p.key, p.demos[0].id); });
+  }
+  // short tab names + short demo labels (fallbacks; index may already provide)
+  var SHORT = {cannonico:"CANNONICO", tychee:"TYCHEE", hangar2apps:"HANGAR2APPS", cyber_rts:"CYBER-RTS", raven:"RAVEN"};
+  /* ---------- load index ---------- */
+  getJSON("/warhacker/index").then(function(r){
+    var j=r.json||{};
+    var probs = j.problems || [];
+    if(!probs.length){ $("stBackend").textContent="—"; return; }
+    PROBLEMS = probs.map(function(p){
+      return {
+        key: p.key, title: p.title || p.key,
+        shortName: SHORT[p.key] || (p.title||p.key).split(/[ \-—]/)[0].toUpperCase(),
+        blurb: p.blurb || p.summary || p.description || "",
+        real_or_roadmap: p.real_or_roadmap || "",
+        demos: (p.demos||[]).map(function(d){
+          return {id:d.id, title:d.title||d.id, short:d.short||d.subtitle||d.title||d.id};
+        })
+      };
+    });
+    var totDemos = PROBLEMS.reduce(function(a,p){return a+(p.demos?p.demos.length:0);},0);
+    $("stProblems").textContent = PROBLEMS.length;
+    $("stDemos").textContent = totDemos;
+    $("stBackend").textContent = (j.ok!==false)?"LIVE":"—";
+    buildUI();
+  }).catch(function(e){
+    $("stBackend").textContent="—";
+    $("panelWrap").innerHTML = '<div class="empty" style="text-align:center;padding:2rem">Could not load the demo index. The backend may still be starting — refresh in a moment.</div>';
+  });
   refreshStats();
 })();

szl_warhacker_demos.py CHANGED Viewed

The diff for this file is too large to render. See raw diff