deploy(hf): sync szl-holdings/a11oy@main derived COPY set

Reusable Dockerfile-COPY-derived deploy from szl-holdings/a11oy main.
Files: 905 Pruned: 0
Derived from Dockerfile COPY sources (NO hand-maintained allowlist).

Signed-off-by: SZL Holdings <noreply@szlholdings.ai>
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

static/3d/surfaces/estate.js

@@ -26,6 +26,8 @@
 //
 // CONTRACT: default-export { id, title, endpoints[], mount(ctx), unmount() }.
 
+import { createShowcase } from "./_showcase.js";
+
 const ID = "estate";
 const TITLE = "Estate Hologram";
 
@@ -44,8 +46,8 @@ const C = {
 
 let _stage = null, _THREE = null, _ctx = null;
 let _root = null, _overlay = null, _frameFn = null;
+let _show = null;              // shared collapsible showcase chrome
 let _hud = {};                 // live HUD chip/value rows
-let _plain = false, _plainEl = null;  // "what this means" plain-language toggle
 let _scene = null;             // built scene-object refs the frame loop animates
 const _anim = {};              // eased animation targets
 const _handles = [];           // every poll handle (stopped on unmount)
@@ -206,25 +208,33 @@ function buildScene() {
 // ----------------------------------------------------------------------------
 function buildHud() {
   const lab = _ctx.label;
+
+  // one shared LIVE badge follows the PRIMARY (kpi-board) poll
+  const badge = _ctx.live.createBadge();
+  _hud.badge = badge;
+
+  // Shared collapsible showcase supplies the compact chrome: title + LIVE badge +
+  // legend (all four doctrine states used across the five surfaces) + the moved
+  // descriptive note + the "what this means" plain-language toggle. The KPI rows fold
+  // into the (collapsed) body below so the 3D estate stays the star.
+  _show = createShowcase(_ctx, {
+    id: ID, title: TITLE, accent: "#5b8dee", badge,
+    legend: ["LIVE", "MEASURED", "MODELED", "SAMPLE", "STRUCTURAL-ONLY"],
+    description:
+      "Unified overview: governance arc (kpi-board) + energy ring + fabric hex + PNT " +
+      "horizon + anatomy beat glance. Every value wired live; NO-LIVE-DATA shown grayed, " +
+      "never fabricated. Λ = Conjecture 1, clamped < 1.0.",
+    plain: { html: _plainHtml },
+  });
+
+  // rows fold into a plain (position:static) container inside the showcase body.
   _overlay = document.createElement("div");
   _overlay.className = "szl3d-estate-hud";
   Object.assign(_overlay.style, {
-    position: "absolute", left: "14px", top: "14px", zIndex: "6",
     display: "flex", flexDirection: "column", gap: "6px",
-    maxWidth: "min(94%,440px)", font: "12px ui-monospace,SFMono-Regular,Menlo,monospace",
-    color: "#cfe0ea", background: "rgba(6,11,16,.74)", border: "1px solid #15212c",
-    borderRadius: "10px", padding: "12px 14px", backdropFilter: "blur(3px)",
+    font: "12px ui-monospace,SFMono-Regular,Menlo,monospace", color: "#cfe0ea",
   });
 
-  const title = document.createElement("div");
-  title.style.cssText = "font:600 13px ui-sans-serif,system-ui;color:#eef3f6;letter-spacing:.4px;display:flex;gap:8px;align-items:center";
-  title.innerHTML = "◇ Estate Hologram <span style='color:#46586a;font-weight:400'>· 5 endpoints · one scene</span>";
-  _overlay.appendChild(title);
-
-  const badge = _ctx.live.createBadge();
-  _overlay.appendChild(badge.el);
-  _hud.badge = badge;
-
   function row(key, name) {
     const wrap = document.createElement("div");
     wrap.style.cssText = "display:flex;align-items:center;gap:8px;justify-content:space-between";
@@ -256,42 +266,11 @@ function buildHud() {
   row("credits", "reservoir work_credits");   // anatomy
   row("ayni", "Ayni balance");                // anatomy
 
-  const note = document.createElement("div");
-  note.style.cssText = "color:#6d7d8a;font-size:10.5px;line-height:1.45;margin-top:4px;border-top:1px solid #15212c;padding-top:6px";
-  note.textContent = "Unified overview: governance arc (kpi-board) + energy ring + fabric hex + PNT horizon + anatomy beat glance. Every value wired live; NO-LIVE-DATA shown grayed, never fabricated. Λ = Conjecture 1, clamped < 1.0.";
-  _overlay.appendChild(note);
-
-  const legend = _ctx.label.legend(); legend.style.opacity = "0.85"; legend.style.marginTop = "2px";
-  _overlay.appendChild(legend);
-
-  // "what this means" plain-language toggle (matches the research surfaces).
-  const pl = document.createElement("button");
-  pl.textContent = "◑ what this means";
-  pl.title = "Toggle plain-language explanation for investors & consumers.";
-  pl.style.cssText = "font:11px ui-monospace,monospace;padding:5px 11px;border-radius:7px;" +
-    "border:1px solid #3af4c8;background:#08140f;color:#3af4c8;cursor:pointer;width:fit-content;margin-top:4px";
-  pl.addEventListener("click", () => {
-    _plain = !_plain;
-    pl.style.background = _plain ? "#0f2a20" : "#08140f";
-    _applyPlain();
-  });
-  _overlay.appendChild(pl);
-
-  const pd = document.createElement("div");
-  pd.style.cssText = "font-size:10.5px;color:#c9d6df;line-height:1.55;border:1px dashed #26333f;" +
-    "border-radius:7px;padding:7px 9px;display:none;margin-top:4px";
-  _plainEl = pd;
-  _overlay.appendChild(pd);
-
-  (_ctx.container || document.body).appendChild(_overlay);
+  _show.body.appendChild(_overlay);
 }
 
-function _applyPlain() {
-  const pd = _plainEl;
-  if (!pd) return;
-  pd.style.display = _plain ? "block" : "none";
-  if (!_plain) return;
-  pd.innerHTML =
+function _plainHtml() {
+  return (
     "<b>What this means:</b> This is a single command view that pulls together five separate " +
     "live feeds at once — <b>governance</b> (which formulas are locked-proven, the Λ safety " +
     "aggregator, and the CHAPAQ verdict), <b>energy</b> (grid price, renewable share, and any " +
@@ -301,7 +280,7 @@ function _applyPlain() {
     "means a real sensor/probe delta, <b>MODELED</b>/<b>SAMPLE</b> mean a simulation or a stand-in, " +
     "and anything not live is shown as <b>NO-LIVE-DATA</b> rather than a made-up number. The " +
     "locked-8 count is always exactly 8 and Λ is a <b>conjecture</b> clamped below 1.0 — nothing " +
-    "here is inflated or fabricated.";
+    "here is inflated or fabricated.");
 }
 
 function _setRow(key, text, label) {
@@ -516,7 +495,7 @@ function mount(ctx) {
 function unmount() {
   for (const h of _handles) { try { h && h.stop && h.stop(); } catch (_) {} }
   _handles.length = 0;
-  try { if (_overlay && _overlay.parentNode) _overlay.parentNode.removeChild(_overlay); } catch (_) {}
+  try { if (_show) _show.destroy(); } catch (_) {}
   try {
     if (_root) {
       _root.traverse((o) => {
@@ -530,7 +509,7 @@ function unmount() {
     }
   } catch (_) {}
   try { if (_stage) _stage.setBloom(false); } catch (_) {}
-  _root = null; _overlay = null; _scene = null; _frameFn = null; _hud = {}; _plain = false; _plainEl = null; _stage = null; _THREE = null; _ctx = null;
+  _root = null; _overlay = null; _show = null; _scene = null; _frameFn = null; _hud = {}; _stage = null; _THREE = null; _ctx = null;
 }
 
 export default { id: ID, title: TITLE, endpoints: [EP_KPI, EP_ENERGY, EP_FABRIC, EP_PNT, EP_LOOP], mount, unmount };

static/3d/surfaces/fabric.js

@@ -28,6 +28,8 @@
 //     not a measured bandwidth — we do NOT claim measured NVLink bytes/sec. The reach
 //     counts ARE measured (live probe), labeled accordingly in the HUD.
 
+import { createShowcase } from "./_showcase.js";
+
 const ID = "fabric";
 const TITLE = "Compute Fabric";
 const ENDPOINT = "/api/a11oy/v1/compute-pool-hardened";
@@ -46,7 +48,7 @@ const C = {
 };
 
 let _ctx = null, _stage = null, _THREE = null;
-let _handle = null, _overlay = null, _panel = null, _detailChip = null;
+let _handle = null, _overlay = null, _panel = null, _detailChip = null, _show = null;
 let _root = null;          // group holding the whole mesh (rotates slowly)
 let _nodeMeshes = [];      // [{ data, group, core, ring, glow, orbit[], labelSprite, basePos }]
 let _edges = [];           // [{ line, a, b, hot }]
@@ -114,17 +116,10 @@ function _nodeColor(node) {
 // HUD overlay (left): title, LIVE badge, fabric-health ring readout, counts,
 // honesty legend. Right panel: node-detail (click a node).
 // ----------------------------------------------------------------------------
-function _styleOverlay(el) {
-  Object.assign(el.style, {
-    position: "absolute", left: "14px", top: "14px", zIndex: "5",
-    display: "flex", flexDirection: "column", gap: "8px",
-    maxWidth: "min(92%,360px)", pointerEvents: "none",
-  });
-}
 function _row(label, valId) {
   const r = document.createElement("div");
   r.style.cssText = "display:flex;justify-content:space-between;gap:14px;" +
-    "font:11px ui-monospace,SFMono-Regular,Menlo,monospace;color:" + C.para + ";pointerEvents:none";
+    "font:11px ui-monospace,SFMono-Regular,Menlo,monospace;color:" + C.para;
   const k = document.createElement("span"); k.textContent = label;
   const v = document.createElement("span"); v.id = valId;
   v.style.cssText = "color:" + C.text + ";font-weight:600;letter-spacing:.3px";
@@ -135,22 +130,29 @@ function _row(label, valId) {
 }
 
 function _buildOverlay() {
-  const ov = document.createElement("div");
-  ov.className = "szl3d-fabric-overlay";
-  _styleOverlay(ov);
+  const badge = _ctx.live.createBadge();
 
-  const h = document.createElement("div");
-  h.style.cssText = "font:600 13px ui-sans-serif,system-ui;color:" + C.text + ";letter-spacing:.4px";
-  h.textContent = "◇ " + TITLE + " · live node mesh";
-  ov.appendChild(h);
+  // Shared collapsible showcase supplies the compact chrome: title + LIVE badge +
+  // legend + the moved descriptive note + the "what this means" plain-language toggle.
+  // The counts rows fold into the (collapsed) body so the 3D node mesh stays the star.
+  _show = createShowcase(_ctx, {
+    id: ID, title: TITLE, accent: "#5b8dee", badge,
+    legend: ["LIVE", "MEASURED", "STRUCTURAL-ONLY"],
+    description: "reachable = REAL TCP probe this sweep · sovereign = owned-hardware " +
+      "property, never inferred · topology is STRUCTURAL-ONLY (no measured NVLink bytes).",
+    plain: { html: _plainHtml },
+  });
 
-  const badge = _ctx.live.createBadge();
-  badge.el.style.pointerEvents = "auto";
-  ov.appendChild(badge.el);
+  // rows fold into a plain (position:static) container inside the showcase body.
+  const ov = document.createElement("div");
+  ov.className = "szl3d-fabric-overlay";
+  Object.assign(ov.style, {
+    display: "flex", flexDirection: "column", gap: "8px",
+  });
 
   const card = document.createElement("div");
   card.style.cssText = "background:#0b121b;border:1px solid #1b2734;border-radius:9px;" +
-    "padding:9px 11px;display:flex;flexDirection:column;gap:5px;pointerEvents:none";
+    "padding:9px 11px;display:flex;flexDirection:column;gap:5px";
   card.appendChild(_row("fabric health", "v_health"));
   card.appendChild(_row("nodes reachable", "v_reach"));
   card.appendChild(_row("GPU nodes live", "v_gpu"));
@@ -159,45 +161,12 @@ function _buildOverlay() {
   card.appendChild(_row("reach probe", "v_label"));
   ov.appendChild(card);
 
-  const note = document.createElement("div");
-  note.style.cssText = "font:9.5px ui-monospace,monospace;color:#6c7a86;line-height:1.5;pointerEvents:none";
-  note.textContent = "reachable = REAL TCP probe this sweep · sovereign = owned-hardware " +
-    "property, never inferred · topology is STRUCTURAL-ONLY (no measured NVLink bytes).";
-  ov.appendChild(note);
-
-  const legend = _ctx.label.legend();
-  legend.style.opacity = "0.85";
-  legend.style.pointerEvents = "none";
-  ov.appendChild(legend);
-
-  // "what this means" plain-language toggle (matches the research surfaces).
-  const pl = document.createElement("button");
-  pl.textContent = "◑ what this means";
-  pl.title = "Toggle plain-language explanation for investors & consumers.";
-  pl.style.cssText = "font:11px ui-monospace,monospace;padding:5px 11px;border-radius:7px;" +
-    "border:1px solid #3af4c8;background:#08140f;color:#3af4c8;cursor:pointer;width:fit-content;pointer-events:auto";
-  pl.addEventListener("click", () => {
-    _plain = !_plain;
-    pl.style.background = _plain ? "#0f2a20" : "#08140f";
-    _applyPlain();
-  });
-  ov.appendChild(pl);
-
-  const pd = document.createElement("div");
-  pd.style.cssText = "font-size:10.5px;color:#c9d6df;line-height:1.55;border:1px dashed #26333f;" +
-    "border-radius:7px;padding:7px 9px;display:none;pointer-events:none";
-  _plainEl = pd;
-  ov.appendChild(pd);
-
+  _show.body.appendChild(ov);
   return { ov, badge };
 }
 
-function _applyPlain() {
-  const pd = _plainEl;
-  if (!pd) return;
-  pd.style.display = _plain ? "block" : "none";
-  if (!_plain) return;
-  pd.innerHTML =
+function _plainHtml() {
+  return (
     "<b>What this means:</b> This is a live map of the actual machines that make up the " +
     "compute pool — each glowing node is one server. Every few seconds the app runs a " +
     "real network probe (a <b>TCP reachability check</b>) against each node and colours it by " +
@@ -207,7 +176,7 @@ function _applyPlain() {
     "result, not a cached guess. The links between nodes show the pool’s <b>structure only</b>; " +
     "we do <b>not</b> claim to measure the bandwidth flowing over them. The ‘secondary lung’ row " +
     "reports whether a designated failover node is currently reachable, so you can see at a glance " +
-    "if the backup capacity is online.";
+    "if the backup capacity is online.");
 }
 
 function _buildPanel() {
@@ -695,8 +664,7 @@ function mount(ctx) {
   _t = 0; _selected = null; _lastJson = null; _hud = {};
 
   const built = _buildOverlay();
-  _overlay = built.ov;
-  (ctx.container || document.body).appendChild(_overlay);
+  _overlay = built.ov;   // lives inside _show.body (appended by _buildOverlay)
 
   _panel = _buildPanel();
   (ctx.container || document.body).appendChild(_panel);
@@ -737,10 +705,10 @@ function unmount() {
       _domEl._szlFabricDown = null;
     }
   } catch (_) {}
+  try { if (_show) _show.destroy(); } catch (_) {}
   try { _clearMesh(); } catch (_) {}
-  try { if (_overlay && _overlay.parentNode) _overlay.parentNode.removeChild(_overlay); } catch (_) {}
   try { if (_panel && _panel.parentNode) _panel.parentNode.removeChild(_panel); } catch (_) {}
-  _handle = null; _overlay = null; _panel = null; _detailChip = null;
+  _handle = null; _overlay = null; _show = null; _panel = null; _detailChip = null;
   _nodeMeshes = []; _edges = []; _root = null; _hubMesh = null;
   _healthRing = null; _healthFill = null; _frameCb = null; _ray = null;
   _pointer = null; _onClick = null; _onMove = null; _domEl = null;

static/3d/surfaces/flowmatch.js

@@ -43,6 +43,8 @@
 // DOCTRINE v11: degrades gracefully (grey) on 404/error; honesty label still shown.
 // Nothing here is in the locked-8. Λ stays Conjecture 1. Trust never 100%.
 
+import { createShowcase } from "./_showcase.js";
+
 const ID    = "flowmatch";
 const TITLE = "Rectified Flow · Flow-Matching ODE Sampler (live)";
 
@@ -61,9 +63,8 @@ const C_GRID    = 0x1b3a44;  // floor / link colour
 // path layout geometry
 const PATH_SCALE = 1.6;   // world-units per unit of raw x/y/z coordinate
 
-let _stage = null, _THREE = null, _ctx = null, _group = null, _overlay = null;
+let _stage = null, _THREE = null, _ctx = null, _group = null, _show = null;
 let _frameReg = false, _polls = [], _el = {}, _badge = null;
-let _plain = false;
 
 // geometry handles
 let _pathLine  = null;    // THREE.Line — Euler-integrated trajectory
@@ -275,110 +276,39 @@ function _onFrame() {
 // overlay
 // =============================================================================
 function _buildOverlay() {
-  const ctx = _ctx;
-  _overlay = document.createElement("div");
-  Object.assign(_overlay.style, {
-    position: "absolute", left: "14px", top: "14px", zIndex: "6",
-    display: "flex", flexDirection: "column", gap: "8px",
-    maxWidth: "min(94%,440px)",
-    font: "12px ui-sans-serif,system-ui,Segoe UI,Roboto,Arial",
-    color: "#eef3f6",
-  });
-
-  const h = document.createElement("div");
-  h.style.cssText = "font:600 13px ui-sans-serif,system-ui;letter-spacing:.4px";
-  h.textContent = TITLE;
-  _overlay.appendChild(h);
-
-  const sub = document.createElement("div");
-  sub.style.cssText = "color:#9fb1bf;font-size:11px;line-height:1.55";
-  sub.innerHTML =
-    'A <b>rectified-flow ODE sampler</b>: integrate dx/dt = v(x,t) = x1 \u2212 x0 (a ' +
-    '<b>straight-line velocity field</b>) from noise x0 to a target x1 with Euler steps. ' +
-    'Honesty label <b>MODELED</b> (analytic toy case; NOT a trained flow/diffusion model; ' +
-    'never claimed as FLUX or SD3). 0 runtime CDN.';
-  _overlay.appendChild(sub);
-
-  const brow = document.createElement("div");
-  brow.style.cssText = "display:flex;gap:8px;align-items:center;flex-wrap:wrap";
-  if (_badge && _badge.el) brow.appendChild(_badge.el);
-  _overlay.appendChild(brow);
-
-  const card = document.createElement("div");
-  card.style.cssText = "background:#0a1117;border:1px solid #1d2a36;border-radius:9px;padding:9px 10px;display:flex;flex-direction:column;gap:6px";
-
-  const chead = document.createElement("div");
-  chead.style.cssText = "display:flex;align-items:center;gap:8px;flex-wrap:wrap";
-  const dot = document.createElement("span");
-  dot.style.cssText = "width:9px;height:9px;border-radius:50%;background:#5b8dee;box-shadow:0 0 7px #5b8dee";
-  const nm = document.createElement("b");
-  nm.style.cssText = "font-size:12px;color:#5b8dee;letter-spacing:.3px";
-  nm.textContent = "flow-matching";
-  chead.appendChild(dot); chead.appendChild(nm);
-  card.appendChild(chead);
-
-  const grid = document.createElement("div");
-  grid.style.cssText = "display:grid;grid-template-columns:1fr;gap:4px";
-
-  function kpiRow(id, label) {
-    const r = document.createElement("div");
-    r.style.cssText = "display:flex;justify-content:space-between;gap:10px;font-size:11px";
-    const l = document.createElement("span"); l.style.cssText = "color:#9fb1bf"; l.textContent = label;
-    const v = document.createElement("b");
-    v.id = id;
-    v.style.cssText = "font-variant-numeric:tabular-nums;color:#eef3f6;text-align:right;max-width:58%";
-    v.textContent = "\u2014";
-    _el[id] = v;
-    r.appendChild(l); r.appendChild(v); return r;
-  }
-
-  grid.appendChild(kpiRow("fm-dims",   "dims"));
-  grid.appendChild(kpiRow("fm-steps",  "steps (Euler)"));
-  grid.appendChild(kpiRow("fm-err",    "final_error \u2014 MODELED"));
-  grid.appendChild(kpiRow("fm-straight","straightness_score"));
-  grid.appendChild(kpiRow("fm-conv",   "steps_to_converge"));
-  grid.appendChild(kpiRow("fm-few",    "few-step error"));
-  grid.appendChild(kpiRow("fm-many",   "many-step error"));
-  grid.appendChild(kpiRow("fm-label",  "honesty label"));
-  card.appendChild(grid);
-
-  const fn = document.createElement("div");
-  fn.style.cssText = "font-size:9.5px;color:#6b7a86;line-height:1.5";
-  fn.textContent = "Lipman et al. arXiv:2210.02747 (Flow Matching) \u00b7 Liu et al. arXiv:2209.03003 (Rectified Flow) \u00b7 FLUX github.com/black-forest-labs/flux (cited only). MODELED \u00b7 not claimed-as.";
-  card.appendChild(fn);
-  _overlay.appendChild(card);
-
-  const pl = document.createElement("button");
-  pl.textContent = "\u25d1 what this means";
-  pl.title = "Toggle plain-language explanation for investors & consumers.";
-  pl.style.cssText = "font:11px ui-monospace,monospace;padding:5px 11px;border-radius:7px;border:1px solid #3af4c8;background:#08140f;color:#3af4c8;cursor:pointer;width:fit-content";
-  pl.addEventListener("click", () => {
-    _plain = !_plain;
-    pl.style.background = _plain ? "#0f2a20" : "#08140f";
-    _applyPlain();
+  _show = createShowcase(_ctx, {
+    id: ID, title: TITLE, accent: "#5b8dee",
+    badge: _badge,
+    chips: [{ label: "MODELED", text: "flow-matching", name: "fm" }],
+    legend: ["MODELED"],
+    description:
+      'A <b>rectified-flow ODE sampler</b>: integrate dx/dt = v(x,t) = x1 \u2212 x0 (a ' +
+      '<b>straight-line velocity field</b>) from noise x0 to a target x1 with Euler steps. ' +
+      'Honesty label <b>MODELED</b> (analytic toy case; NOT a trained flow/diffusion model; ' +
+      'never claimed as FLUX or SD3). 0 runtime CDN.',
+    citations:
+      "Lipman et al. arXiv:2210.02747 (Flow Matching) \u00b7 Liu et al. arXiv:2209.03003 (Rectified Flow) \u00b7 FLUX github.com/black-forest-labs/flux (cited only). MODELED \u00b7 not claimed-as.",
+    plain: { html: _plainHtml },
   });
-  _overlay.appendChild(pl);
 
-  const pd = document.createElement("div");
-  pd.id = "fm-plain";
-  pd.style.cssText = "font-size:10.5px;color:#c9d6df;line-height:1.55;border:1px dashed #26333f;border-radius:7px;padding:7px 9px;display:none";
-  _el["plain"] = pd;
-  _overlay.appendChild(pd);
+  _el["fm-dims"]     = _show.addField("dims");
+  _el["fm-steps"]    = _show.addField("steps (Euler)");
+  _el["fm-err"]      = _show.addField("final_error \u2014 MODELED");
+  _el["fm-straight"] = _show.addField("straightness_score");
+  _el["fm-conv"]     = _show.addField("steps_to_converge");
+  _el["fm-few"]      = _show.addField("few-step error");
+  _el["fm-many"]     = _show.addField("many-step error");
+  _el["fm-label"]    = _show.addField("honesty label");
 
-  (ctx.container || document.body).appendChild(_overlay);
   _paintOverlay();
 }
 
-function _applyPlain() {
-  const pd = _el["plain"];
-  if (!pd) return;
-  pd.style.display = _plain ? "block" : "none";
-  if (!_plain) return;
+function _plainHtml() {
   const steps = S.steps != null ? String(S.steps) : "loading\u2026";
   const few   = S.fewSteps != null ? String(S.fewSteps) : "1";
   const many  = S.manySteps != null ? String(S.manySteps) : "128";
   const str   = S.straightness != null ? (S.straightness * 100).toFixed(2) + "%" : "loading\u2026";
-  pd.innerHTML =
+  return (
     "<b>What this means:</b> Older generative-AI samplers (like standard diffusion) need " +
     "<i>many small steps</i> to trace a curved path from random noise to a real output. " +
     "<b>Rectified flow</b> instead learns (or here, defines) a <b>straight-line path</b> " +
@@ -387,7 +317,7 @@ function _applyPlain() {
     "with barely any extra benefit. The path here is <b>" + str + " straight</b>. This is " +
     "the same core idea behind fast production image generators like FLUX. This view is a " +
     "<b>MODELED</b> analytic toy case (not a trained model, not FLUX itself), used at " +
-    "steps=" + steps + " to show the effect live.";
+    "steps=" + steps + " to show the effect live.");
 }
 
 function _tok(s) {
@@ -414,7 +344,7 @@ function _paintOverlay() {
   _set("fm-many",     t || (S.manySteps != null ? `${sci(S.manyError, 2)} (n=${S.manySteps})` : "\u2014"));
   // honesty label verbatim — never upgraded
   _set("fm-label", t || (S.label || "MODELED"));
-  if (_plain) _applyPlain();
+  if (_show) { _show.setChip("fm", S.label || "MODELED", { text: "flow-matching" }); _show.refreshPlain(); }
 }
 
 // =============================================================================
@@ -422,7 +352,7 @@ function _paintOverlay() {
 // =============================================================================
 export function unmount() {
   _polls.forEach((p) => { try { p.stop(); } catch (_) {} }); _polls = [];
-  try { if (_overlay && _overlay.parentNode) _overlay.parentNode.removeChild(_overlay); } catch (_) {}
+  try { if (_show) _show.destroy(); } catch (_) {}
   try {
     if (_group && _stage) {
       _group.traverse((o) => {
@@ -435,9 +365,9 @@ export function unmount() {
       _stage.scene.remove(_group);
     }
   } catch (_) {}
-  _group = _overlay = null;
+  _group = _show = null;
   _pathLine = null; _pathDots = []; _x0Marker = null; _x1Marker = null; _converge = null; _floor = null;
-  _el = {}; _badge = null; _plain = false; _frameReg = false;
+  _el = {}; _badge = null; _frameReg = false;
   _stage = _THREE = _ctx = null;
   S.label = S.dims = S.steps = S.x0 = S.x1 = S.trajectory = null;
   S.finalError = S.straightness = S.stepsToConverge = null;

static/3d/surfaces/formalmath.js

@@ -40,6 +40,8 @@
 // DOCTRINE v11: degrades gracefully (grey) on 404/error; honesty label still shown.
 // Nothing here is in the locked-8. Λ stays Conjecture 1. Trust never 100%.
 
+import { createShowcase } from "./_showcase.js";
+
 const ID    = "formalmath";
 const TITLE = "Formal-Math Retrieval-Augmented Tactic Selection (live)";
 
@@ -62,9 +64,8 @@ const MAX_DEPTH   = 6;     // matches server _MAX_DEPTH
 const MAX_TRACE   = 64;    // matches server search_trace cap
 const BRANCH      = 3;     // matches server _BRANCH_FACTOR (layout hint only)
 
-let _stage = null, _THREE = null, _ctx = null, _group = null, _overlay = null;
+let _stage = null, _THREE = null, _ctx = null, _group = null, _show = null;
 let _frameReg = false, _polls = [], _el = {}, _badge = null;
-let _plain = false;
 
 // geometry handles
 let _floor        = null;
@@ -319,110 +320,39 @@ function _onFrame() {
 // overlay
 // =============================================================================
 function _buildOverlay() {
-  const ctx = _ctx;
-  _overlay = document.createElement("div");
-  Object.assign(_overlay.style, {
-    position: "absolute", left: "14px", top: "14px", zIndex: "6",
-    display: "flex", flexDirection: "column", gap: "8px",
-    maxWidth: "min(94%,440px)",
-    font: "12px ui-sans-serif,system-ui,Segoe UI,Roboto,Arial",
-    color: "#eef3f6",
-  });
-
-  const h = document.createElement("div");
-  h.style.cssText = "font:600 13px ui-sans-serif,system-ui;letter-spacing:.4px";
-  h.textContent = TITLE;
-  _overlay.appendChild(h);
-
-  const sub = document.createElement("div");
-  sub.style.cssText = "color:#9fb1bf;font-size:11px;line-height:1.55";
-  sub.innerHTML =
-    'Retrieves the most relevant <b>premises</b> for a goal by <b>cosine similarity</b> over ' +
-    'hand-rolled bag-of-tokens vectors (no embeddings), then runs a deterministic ' +
-    '<b>best-first search</b> over a synthetic tactic tree, biased by the retrieved premises ' +
-    '\u2014 the LeanDojo/ReProver premise-selection concept. Honesty label <b>MODELED</b> ' +
-    '(NOT connected to Lean 4 or Mathlib). 0 runtime CDN.';
-  _overlay.appendChild(sub);
-
-  const brow = document.createElement("div");
-  brow.style.cssText = "display:flex;gap:8px;align-items:center;flex-wrap:wrap";
-  if (_badge && _badge.el) brow.appendChild(_badge.el);
-  _overlay.appendChild(brow);
-
-  const card = document.createElement("div");
-  card.style.cssText = "background:#0a1117;border:1px solid #1d2a36;border-radius:9px;padding:9px 10px;display:flex;flex-direction:column;gap:6px";
-
-  const chead = document.createElement("div");
-  chead.style.cssText = "display:flex;align-items:center;gap:8px;flex-wrap:wrap";
-  const dot = document.createElement("span");
-  dot.style.cssText = "width:9px;height:9px;border-radius:50%;background:#3af4c8;box-shadow:0 0 7px #3af4c8";
-  const nm = document.createElement("b");
-  nm.style.cssText = "font-size:12px;color:#3af4c8;letter-spacing:.3px";
-  nm.textContent = "formal-math retrieval + tactic search";
-  chead.appendChild(dot); chead.appendChild(nm);
-  card.appendChild(chead);
-
-  const grid = document.createElement("div");
-  grid.style.cssText = "display:grid;grid-template-columns:1fr;gap:4px";
-
-  function kpiRow(id, label) {
-    const r = document.createElement("div");
-    r.style.cssText = "display:flex;justify-content:space-between;gap:10px;font-size:11px";
-    const l = document.createElement("span"); l.style.cssText = "color:#9fb1bf"; l.textContent = label;
-    const v = document.createElement("b");
-    v.id = id;
-    v.style.cssText = "font-variant-numeric:tabular-nums;color:#eef3f6;text-align:right;max-width:58%";
-    v.textContent = "\u2014";
-    _el[id] = v;
-    r.appendChild(l); r.appendChild(v); return r;
-  }
-
-  grid.appendChild(kpiRow("fm-goal",    "goal"));
-  grid.appendChild(kpiRow("fm-corpus",  "corpus_size"));
-  grid.appendChild(kpiRow("fm-k",       "k (top-k retrieved)"));
-  grid.appendChild(kpiRow("fm-top",     "top premise \u2014 MODELED"));
-  grid.appendChild(kpiRow("fm-sim",     "top similarity"));
-  grid.appendChild(kpiRow("fm-depth",   "proof-tree depth"));
-  grid.appendChild(kpiRow("fm-nodes",   "nodes expanded"));
-  grid.appendChild(kpiRow("fm-label",   "honesty label"));
-  card.appendChild(grid);
-
-  const fn = document.createElement("div");
-  fn.style.cssText = "font-size:9.5px;color:#6b7a86;line-height:1.5";
-  fn.textContent = "LeanDojo github.com/lean-dojo/LeanDojo \u00b7 ReProver github.com/lean-dojo/ReProver \u00b7 DeepSeek-Prover-V2 arXiv:2504.21801. MODELED \u00b7 not claimed-as.";
-  card.appendChild(fn);
-  _overlay.appendChild(card);
-
-  const pl = document.createElement("button");
-  pl.textContent = "\u25d1 what this means";
-  pl.title = "Toggle plain-language explanation for investors & consumers.";
-  pl.style.cssText = "font:11px ui-monospace,monospace;padding:5px 11px;border-radius:7px;border:1px solid #3af4c8;background:#08140f;color:#3af4c8;cursor:pointer;width:fit-content";
-  pl.addEventListener("click", () => {
-    _plain = !_plain;
-    pl.style.background = _plain ? "#0f2a20" : "#08140f";
-    _applyPlain();
+  _show = createShowcase(_ctx, {
+    id: ID, title: TITLE, accent: "#5b8dee",
+    badge: _badge,
+    chips: [{ label: "MODELED", text: "formal-math retrieval + tactic search", name: "hl" }],
+    legend: ["MODELED"],
+    description:
+      'Retrieves the most relevant <b>premises</b> for a goal by <b>cosine similarity</b> over ' +
+      'hand-rolled bag-of-tokens vectors (no embeddings), then runs a deterministic ' +
+      '<b>best-first search</b> over a synthetic tactic tree, biased by the retrieved premises ' +
+      '\u2014 the LeanDojo/ReProver premise-selection concept. Honesty label <b>MODELED</b> ' +
+      '(NOT connected to Lean 4 or Mathlib). 0 runtime CDN.',
+    citations:
+      "LeanDojo github.com/lean-dojo/LeanDojo \u00b7 ReProver github.com/lean-dojo/ReProver \u00b7 DeepSeek-Prover-V2 arXiv:2504.21801. MODELED \u00b7 not claimed-as.",
+    plain: { html: _plainHtml },
   });
-  _overlay.appendChild(pl);
 
-  const pd = document.createElement("div");
-  pd.id = "fm-plain";
-  pd.style.cssText = "font-size:10.5px;color:#c9d6df;line-height:1.55;border:1px dashed #26333f;border-radius:7px;padding:7px 9px;display:none";
-  _el["plain"] = pd;
-  _overlay.appendChild(pd);
+  _el["fm-goal"]   = _show.addField("goal");
+  _el["fm-corpus"] = _show.addField("corpus_size");
+  _el["fm-k"]      = _show.addField("k (top-k retrieved)");
+  _el["fm-top"]    = _show.addField("top premise \u2014 MODELED");
+  _el["fm-sim"]    = _show.addField("top similarity");
+  _el["fm-depth"]  = _show.addField("proof-tree depth");
+  _el["fm-nodes"]  = _show.addField("nodes expanded");
+  _el["fm-label"]  = _show.addField("honesty label");
 
-  (ctx.container || document.body).appendChild(_overlay);
   _paintOverlay();
 }
 
-function _applyPlain() {
-  const pd = _el["plain"];
-  if (!pd) return;
-  pd.style.display = _plain ? "block" : "none";
-  if (!_plain) return;
+function _plainHtml() {
   const top    = (S.topPremises && S.topPremises[0]) ? S.topPremises[0].name : "loading\u2026";
   const simPct = (S.topPremises && S.topPremises[0]) ? (S.topPremises[0].similarity * 100).toFixed(1) + "%" : "loading\u2026";
   const depth  = S.treeDepth != null ? String(S.treeDepth) : "loading\u2026";
-  pd.innerHTML =
+  return (
     "<b>What this means:</b> Proving a math theorem in a system like Lean often needs the " +
     "<i>right supporting fact</i> (a \u201cpremise\u201d) from a huge library. Instead of " +
     "searching blindly, this organ scores every candidate premise by how many words it shares " +
@@ -431,7 +361,7 @@ function _applyPlain() {
     "first \u2014 reaching a simulated depth of <b>" + depth + "</b> steps. Plain: find the most " +
     "relevant facts first, then search smart instead of exhaustively. This is a <b>MODELED</b> " +
     "toy simulation of the LeanDojo/ReProver idea \u2014 it is not connected to real Lean 4 or " +
-    "Mathlib, and is not DeepSeek-Prover or ReProver output.";
+    "Mathlib, and is not DeepSeek-Prover or ReProver output.");
 }
 
 function _tok(s) {
@@ -458,7 +388,7 @@ function _paintOverlay() {
   _set("fm-nodes",  t || (S.nodesExpand != null ? String(S.nodesExpand) : "\u2014"));
   // honesty label verbatim — never upgraded
   _set("fm-label",  t || (S.label || "MODELED"));
-  if (_plain) _applyPlain();
+  if (_show) { _show.setChip("hl", S.label || "MODELED", { text: "formal-math retrieval + tactic search" }); _show.refreshPlain(); }
 }
 
 // =============================================================================
@@ -466,7 +396,7 @@ function _paintOverlay() {
 // =============================================================================
 export function unmount() {
   _polls.forEach((p) => { try { p.stop(); } catch (_) {} }); _polls = [];
-  try { if (_overlay && _overlay.parentNode) _overlay.parentNode.removeChild(_overlay); } catch (_) {}
+  try { if (_show) _show.destroy(); } catch (_) {}
   try {
     if (_group && _stage) {
       _group.traverse((o) => {
@@ -479,9 +409,9 @@ export function unmount() {
       _stage.scene.remove(_group);
     }
   } catch (_) {}
-  _group = _overlay = null;
+  _group = _show = null;
   _floor = null; _spine = null; _nodeMesh = []; _edgeLines = []; _unexplLines = []; _marker = null;
-  _el = {}; _badge = null; _plain = false; _frameReg = false;
+  _el = {}; _badge = null; _frameReg = false;
   _stage = _THREE = _ctx = null;
   S.label = S.goal = S.corpusSize = S.k = S.topPremises = S.simScores = null;
   S.treeDepth = S.nodesExpand = S.trace = null;

static/3d/surfaces/frontier.js

@@ -37,6 +37,8 @@
 // NOTHING here is in the locked-8. Λ = Conjecture 1. Trust < 100%. Endpoints that 404/error/
 // degrade render honest NO-LIVE-DATA/DEGRADED and grey their geometry. 0 runtime CDN.
 
+import { createShowcase } from "./_showcase.js";
+
 const ID = "frontier";
 const TITLE = "Frontier · Experimental Tier (live)";
 
@@ -63,7 +65,7 @@ function ring(i, y) { const a = Math.PI / 2 - (i / N_ORG) * Math.PI * 2; return
 const POS = { ent: ring(0, 3), neu: ring(1, 3), qb: ring(2, 3), en: ring(3, 3), scale: ring(4, 3), sc: ring(5, 3), conj: ring(6, 3), pubs: ring(7, 3), eco: ring(8, 3) };
 const HUB = [0, 3, 0];
 
-let _stage = null, _THREE = null, _ctx = null, _group = null, _overlay = null;
+let _stage = null, _THREE = null, _ctx = null, _group = null, _overlay = null, _show = null;
 let _frameReg = false, _polls = [], _el = {}, _badges = {}, _webgpu = false, _computeReady = false;
 let _ent = {}, _neu = {}, _qb = {}, _sc = {}, _en = {}, _scale = {}, _conj = {}, _pubs = {}, _eco = {};
 let _splatlib = null, _lkg = null, _plain = false;   // real-3DGS codec, Looking Glass runtime, plain-language mode
@@ -478,14 +480,26 @@ function _onFrame() {
 function _buildOverlay() {
   const ctx = _ctx;
   ["ent", "neu", "qbcoh", "qbcomp", "sc", "en", "scale", "conj", "pubs", "eco"].forEach((k) => { _badges[k] = ctx.live.createBadge(); });
-  _overlay = document.createElement("div");
-  Object.assign(_overlay.style, { position: "absolute", left: "14px", top: "14px", zIndex: "6", display: "flex", flexDirection: "column", gap: "8px", maxWidth: "min(94%,450px)", maxHeight: "calc(100vh - 130px)", overflowY: "auto", font: "12px ui-sans-serif,system-ui,Segoe UI,Roboto,Arial", color: "#eef3f6", paddingRight: "6px" });
 
-  const h = document.createElement("div"); h.style.cssText = "font:600 13px ui-sans-serif,system-ui;letter-spacing:.4px"; h.textContent = TITLE; _overlay.appendChild(h);
-  const sub = document.createElement("div"); sub.style.cssText = "color:#9fb1bf;font-size:11px;line-height:1.55";
-  sub.innerHTML = 'The experimental tier as one holographic lattice \u2014 <b>nine frontier organs</b> on a ring, each lit by a <b>live</b> a11oy endpoint. ' +
-    'Quantum-bio renders as a <b>Gaussian-splat volumetric field</b> (WebGPU compute when enabled). Every label is read <b>verbatim</b> from the JSON. NOT in the locked-8 \u00b7 \u039b = Conjecture 1 \u00b7 trust &lt; 100%.';
-  _overlay.appendChild(sub);
+  // Shared collapsible showcase chrome FIRST: compact title bar + honesty legend live in
+  // the always-visible chrome. This surface has MANY per-organ badges, so we omit a single
+  // `badge` and instead relocate the whole badge/card cluster into the (collapsed) body,
+  // keeping the 3D lattice the star. Long descriptive text -> description; the "adopted &
+  // cited" footnote -> citations (both verbatim).
+  _show = createShowcase(ctx, {
+    id: ID, title: TITLE, accent: "#5b8dee",
+    legend: ["RIGOROUS", "VERIFIED", "PUBLISHED", "OPEN", "CONJECTURE", "ROADMAP"],
+    description:
+      'The experimental tier as one holographic lattice \u2014 <b>nine frontier organs</b> on a ring, each lit by a <b>live</b> a11oy endpoint. ' +
+      'Quantum-bio renders as a <b>Gaussian-splat volumetric field</b> (WebGPU compute when enabled). Every label is read <b>verbatim</b> from the JSON. NOT in the locked-8 \u00b7 \u039b = Conjecture 1 \u00b7 trust &lt; 100%.',
+    citations:
+      "Open techniques adopted & cited, NOT claimed-as (clean-room): QuTiP \u00b7 quimb \u00b7 RadicalPy \u00b7 quantum_HEOM \u00b7 Avalanche \u00b7 ncps/LTC \u00b7 Prime Intellect OpenDiLoCo \u00b7 NVIDIA nvtrust \u00b7 CodeCarbon \u00b7 GSF SCI \u00b7 three.js WebGPU \u00b7 GaussianSplats3D \u00b7 Looking Glass quilt. Papers: Kerbl 3DGS 2308.04079 \u00b7 Cirac-Verstraete 2011.12127 \u00b7 Dohare-Sutton (Nature 2024) \u00b7 Hore 2508.21350 \u00b7 Streaming DiLoCo 2501.18512. EXPERIMENTAL tier; not in the locked-8.",
+  });
+
+  // rows/cards fold into the showcase body as a PLAIN static container (no absolute chrome,
+  // no own title, no standalone legend \u2014 the showcase provides those).
+  _overlay = document.createElement("div");
+  Object.assign(_overlay.style, { display: "flex", flexDirection: "column", gap: "8px", font: "12px ui-sans-serif,system-ui,Segoe UI,Roboto,Arial", color: "#eef3f6" });
 
   const ctl = document.createElement("div"); ctl.style.cssText = "display:flex;gap:8px;align-items:center;flex-wrap:wrap";
   _el.rchip = document.createElement("span"); _el.rchip.style.cssText = "font:10px ui-monospace,monospace;padding:3px 8px;border-radius:6px;border:1px solid #1d2a36;color:" + (_webgpu ? "#6dd47e" : "#6fb1ff"); _el.rchip.textContent = _webgpu ? "splat: WebGPU compute" : "splat: WebGL2"; ctl.appendChild(_el.rchip);
@@ -512,11 +526,9 @@ function _buildOverlay() {
   _overlay.appendChild(_card("publications", "#9fd0ff", _badges.pubs, [["pubs-locked", "locked-proven"], ["pubs-lambda", "\u039b status"], ["pubs-kernel", "experimental kernel"]], "SZL corpus: 41 Zenodo DOIs, thesis v1\u2192v25 (Ouroboros \u2192 Lutar Invariant \u2192 GPD), ORCID 0009-0001-0110-4173. Locked-proven read live; \u039b = Conjecture 1 (unconditional machine-checked FALSE)."));
   _overlay.appendChild(_card("ecosystem", "#3af4c8", _badges.eco, [["eco-count", "governed capabilities"], ["eco-proven", "locked-proven"], ["eco-mix", "honesty mix"]], "The investor/consumer headline: the live governed-capability genome (/genome). 5-tier honesty mix read VERBATIM \u2014 what is proven vs evidence-backed vs conjecture. The honest mix IS the diligence signal."));
 
-  const lg = ctx.label.legend(); lg.style.opacity = "0.85"; _overlay.appendChild(lg);
-  const src = document.createElement("div"); src.style.cssText = "font-size:9.5px;color:#5b6c78;line-height:1.6;margin-top:2px";
-  src.textContent = "Open techniques adopted & cited, NOT claimed-as (clean-room): QuTiP \u00b7 quimb \u00b7 RadicalPy \u00b7 quantum_HEOM \u00b7 Avalanche \u00b7 ncps/LTC \u00b7 Prime Intellect OpenDiLoCo \u00b7 NVIDIA nvtrust \u00b7 CodeCarbon \u00b7 GSF SCI \u00b7 three.js WebGPU \u00b7 GaussianSplats3D \u00b7 Looking Glass quilt. Papers: Kerbl 3DGS 2308.04079 \u00b7 Cirac-Verstraete 2011.12127 \u00b7 Dohare-Sutton (Nature 2024) \u00b7 Hore 2508.21350 \u00b7 Streaming DiLoCo 2501.18512. EXPERIMENTAL tier; not in the locked-8.";
-  _overlay.appendChild(src);
-  (ctx.container || document.body).appendChild(_overlay);
+  // fold the whole control + badge/card cluster into the collapsible showcase body
+  // (the showcase provides the title bar + honesty legend; footnote moved to citations).
+  _show.body.appendChild(_overlay);
   _paintEnt(); _paintNeu(); _paintQb(); _paintSc(); _paintEn(); _paintScale(); _paintConj(); _paintPubs(); _paintEco();
 }
 
@@ -623,11 +635,11 @@ function _paintEco() { const t = _tok(S.eco.state); _set("eco-count", t || (S.ec
 // =========================================================================================
 function unmount() {
   _polls.forEach((p) => { try { p.stop(); } catch (_) {} }); _polls = [];
-  try { if (_overlay && _overlay.parentNode) _overlay.parentNode.removeChild(_overlay); } catch (_) {}
+  try { if (_show) _show.destroy(); } catch (_) {}
   try { if (_group && _stage) { _group.traverse((o) => { if (o.geometry && o.geometry.dispose) o.geometry.dispose(); if (o.material) { const m = Array.isArray(o.material) ? o.material : [o.material]; m.forEach((x) => { if (x.map && x.map.dispose) x.map.dispose(); if (x.dispose) x.dispose(); }); } }); _stage.scene.remove(_group); } } catch (_) {}
   _splatTex = null;
   try { if (_qb.real && _qb.real.dispose) _qb.real.dispose(); } catch (_) {}
-  _group = _overlay = null; _ent = {}; _neu = {}; _qb = {}; _sc = {}; _en = {}; _scale = {}; _conj = {}; _pubs = {}; _eco = {}; _el = {}; _badges = {};
+  _group = _overlay = _show = null; _ent = {}; _neu = {}; _qb = {}; _sc = {}; _en = {}; _scale = {}; _conj = {}; _pubs = {}; _eco = {}; _el = {}; _badges = {};
   _splatlib = _lkg = _realBytes = null; _plain = false;
   _computeNode = _cohBuf = _uTau = _uT = null; _computeReady = false;
   S.ent = { entropy: null, concurrence: null, negativity: null, state: "init" };

static/3d/surfaces/genie.js

@@ -47,6 +47,8 @@
 // 0 RUNTIME CDN. Vendored three.js r170 via page importmap.
 // DOCTRINE v11: degrades gracefully (grey) on 404/error; honesty label still shown.
 
+import { createShowcase } from "./_showcase.js";
+
 const ID    = "genie";
 const TITLE = "Genie · Generative Latent-Action World (live)";
 
@@ -66,9 +68,8 @@ const MAX_GRID = 16;   // visual cap on grid_size (endpoint clamps grid<=64; we
 const CELL     = 0.62; // world-unit spacing between generated cells
 const STEP_MS  = 650;  // ms between generated-rollout steps (one latent action applied per tick)
 
-let _stage = null, _THREE = null, _ctx = null, _group = null, _overlay = null;
+let _stage = null, _THREE = null, _ctx = null, _group = null, _show = null;
 let _frameReg = false, _polls = [], _el = {}, _badge = null;
-let _plain = false;
 
 // geometry handles
 let _cells = [];       // Array<THREE.Mesh> — one per generated grid cell (row-major)
@@ -285,106 +286,35 @@ function _onFrame() {
 // overlay
 // =============================================================================
 function _buildOverlay() {
-  const ctx = _ctx;
-  _overlay = document.createElement("div");
-  Object.assign(_overlay.style, {
-    position: "absolute", left: "14px", top: "14px", zIndex: "6",
-    display: "flex", flexDirection: "column", gap: "8px",
-    maxWidth: "min(94%,440px)",
-    font: "12px ui-sans-serif,system-ui,Segoe UI,Roboto,Arial",
-    color: "#eef3f6",
-  });
-
-  const h = document.createElement("div");
-  h.style.cssText = "font:600 13px ui-sans-serif,system-ui;letter-spacing:.4px";
-  h.textContent = TITLE;
-  _overlay.appendChild(h);
-
-  const sub = document.createElement("div");
-  sub.style.cssText = "color:#9fb1bf;font-size:11px;line-height:1.55";
-  sub.innerHTML =
-    'A small <b>latent-action codebook</b> is clustered from state deltas, then applied ' +
-    'step-by-step to <b>GENERATE</b> a brand-new grid-world \u2014 the grid you see evolving ' +
-    'below \u2014 rather than predicting a pre-recorded path. Honesty label <b>MODELED</b> ' +
-    '(a toy simulation of the Genie-style computation shape \u2014 no trained dynamics model, ' +
-    'no video tokenizer, no borrowed weights). 0 runtime CDN.';
-  _overlay.appendChild(sub);
-
-  const brow = document.createElement("div");
-  brow.style.cssText = "display:flex;gap:8px;align-items:center;flex-wrap:wrap";
-  if (_badge && _badge.el) brow.appendChild(_badge.el);
-  _overlay.appendChild(brow);
-
-  const card = document.createElement("div");
-  card.style.cssText = "background:#0a1117;border:1px solid #1d2a36;border-radius:9px;padding:9px 10px;display:flex;flex-direction:column;gap:6px";
-
-  const chead = document.createElement("div");
-  chead.style.cssText = "display:flex;align-items:center;gap:8px;flex-wrap:wrap";
-  const dot = document.createElement("span");
-  dot.style.cssText = "width:9px;height:9px;border-radius:50%;background:#5b8dee;box-shadow:0 0 7px #5b8dee";
-  const nm = document.createElement("b");
-  nm.style.cssText = "font-size:12px;color:#5b8dee;letter-spacing:.3px";
-  nm.textContent = "genie";
-  chead.appendChild(dot); chead.appendChild(nm);
-  card.appendChild(chead);
-
-  const grid = document.createElement("div");
-  grid.style.cssText = "display:grid;grid-template-columns:1fr;gap:4px";
-
-  function kpiRow(id, label) {
-    const r = document.createElement("div");
-    r.style.cssText = "display:flex;justify-content:space-between;gap:10px;font-size:11px";
-    const l = document.createElement("span"); l.style.cssText = "color:#9fb1bf"; l.textContent = label;
-    const v = document.createElement("b");
-    v.id = id;
-    v.style.cssText = "font-variant-numeric:tabular-nums;color:#eef3f6;text-align:right;max-width:58%";
-    v.textContent = "\u2014";
-    _el[id] = v;
-    r.appendChild(l); r.appendChild(v); return r;
-  }
-
-  grid.appendChild(kpiRow("gn-grid",   "grid_size \u00d7 n_latent_actions"));
-  grid.appendChild(kpiRow("gn-step",   "step (action code applied)"));
-  grid.appendChild(kpiRow("gn-seq",    "action-code sequence"));
-  grid.appendChild(kpiRow("gn-coh",    "coherence score \u2014 MODELED"));
-  grid.appendChild(kpiRow("gn-label",  "honesty label"));
-  card.appendChild(grid);
-
-  const fn = document.createElement("div");
-  fn.style.cssText = "font-size:9.5px;color:#6b7a86;line-height:1.5";
-  fn.textContent = "Bruce, Segar, Mnih et al. arXiv:2402.15391 (Genie) \u00b7 deepmind.google Genie 2 blog \u00b7 deepmind.google Genie 3 blog. MODELED \u00b7 not claimed-as \u00b7 not claimed at parity.";
-  card.appendChild(fn);
-  _overlay.appendChild(card);
-
-  const pl = document.createElement("button");
-  pl.textContent = "\u25d1 what this means";
-  pl.title = "Toggle plain-language explanation for investors & consumers.";
-  pl.style.cssText = "font:11px ui-monospace,monospace;padding:5px 11px;border-radius:7px;border:1px solid #3af4c8;background:#08140f;color:#3af4c8;cursor:pointer;width:fit-content";
-  pl.addEventListener("click", () => {
-    _plain = !_plain;
-    pl.style.background = _plain ? "#0f2a20" : "#08140f";
-    _applyPlain();
+  _show = createShowcase(_ctx, {
+    id: ID, title: TITLE, accent: "#5b8dee",
+    badge: _badge,
+    chips: [{ label: "MODELED", text: "genie", name: "hl" }],
+    legend: ["MODELED"],
+    description:
+      'A small <b>latent-action codebook</b> is clustered from state deltas, then applied ' +
+      'step-by-step to <b>GENERATE</b> a brand-new grid-world \u2014 the grid you see evolving ' +
+      'below \u2014 rather than predicting a pre-recorded path. Honesty label <b>MODELED</b> ' +
+      '(a toy simulation of the Genie-style computation shape \u2014 no trained dynamics model, ' +
+      'no video tokenizer, no borrowed weights). 0 runtime CDN.',
+    citations:
+      "Bruce, Segar, Mnih et al. arXiv:2402.15391 (Genie) \u00b7 deepmind.google Genie 2 blog \u00b7 deepmind.google Genie 3 blog. MODELED \u00b7 not claimed-as \u00b7 not claimed at parity.",
+    plain: { html: _plainHtml },
   });
-  _overlay.appendChild(pl);
 
-  const pd = document.createElement("div");
-  pd.id = "gn-plain";
-  pd.style.cssText = "font-size:10.5px;color:#c9d6df;line-height:1.55;border:1px dashed #26333f;border-radius:7px;padding:7px 9px;display:none";
-  _el["plain"] = pd;
-  _overlay.appendChild(pd);
+  _el["gn-grid"]  = _show.addField("grid_size \u00d7 n_latent_actions");
+  _el["gn-step"]  = _show.addField("step (action code applied)");
+  _el["gn-seq"]   = _show.addField("action-code sequence");
+  _el["gn-coh"]   = _show.addField("coherence score \u2014 MODELED");
+  _el["gn-label"] = _show.addField("honesty label");
 
-  (ctx.container || document.body).appendChild(_overlay);
   _paintOverlay();
 }
 
-function _applyPlain() {
-  const pd = _el["plain"];
-  if (!pd) return;
-  pd.style.display = _plain ? "block" : "none";
-  if (!_plain) return;
+function _plainHtml() {
   const coh = S.coherence != null ? (S.coherence * 100).toFixed(1) + "%" : "loading\u2026";
   const na  = S.nActions != null ? String(S.nActions) : "loading\u2026";
-  pd.innerHTML =
+  return (
     "<b>What this means:</b> Instead of just watching and predicting a pre-recorded clip, " +
     "this organ <b>generates a brand-new interactive world</b> one step at a time \u2014 each " +
     "step conditioned on one of <b>" + na + "</b> discrete \u201clatent actions\u201d, the same " +
@@ -394,7 +324,7 @@ function _applyPlain() {
     "step-to-step. " +
     "Plain: this is the shape of computation behind a playable AI-generated world \u2014 but " +
     "this view is a <b>MODELED</b> toy simulation of the technique, not a readout from any " +
-    "trained Genie model or real video.";
+    "trained Genie model or real video.");
 }
 
 function _tok(s) {
@@ -418,7 +348,7 @@ function _paintOverlay(latestDelta) {
   _set("gn-coh",   t || fx(S.coherence, 4));
   // honesty label verbatim — never upgraded
   _set("gn-label", t || (S.label || "MODELED"));
-  if (_plain) _applyPlain();
+  if (_show) { _show.setChip("hl", S.label || "MODELED", { text: "genie" }); _show.refreshPlain(); }
 }
 
 // =============================================================================
@@ -427,7 +357,7 @@ function _paintOverlay(latestDelta) {
 export function unmount() {
   _polls.forEach((p) => { try { p.stop(); } catch (_) {} }); _polls = [];
   if (_stepTimer) { clearInterval(_stepTimer); _stepTimer = null; }
-  try { if (_overlay && _overlay.parentNode) _overlay.parentNode.removeChild(_overlay); } catch (_) {}
+  try { if (_show) _show.destroy(); } catch (_) {}
   try {
     if (_group && _stage) {
       _group.traverse((o) => {
@@ -440,9 +370,9 @@ export function unmount() {
       _stage.scene.remove(_group);
     }
   } catch (_) {}
-  _group = _overlay = null;
+  _group = _show = null;
   _cells = []; _halo = null; _floor = null;
-  _el = {}; _badge = null; _plain = false; _frameReg = false;
+  _el = {}; _badge = null; _frameReg = false;
   _stage = _THREE = _ctx = null;
   S.label = S.gridSize = S.nActions = S.horizon = null;
   S.actionCodes = S.codebook = S.states = S.coherence = null;

static/3d/surfaces/gitthoughts.js

@@ -50,6 +50,8 @@
 // DOCTRINE v11: degrades gracefully (grey) on 404/error; honesty label still shown.
 // Nothing here is in the locked-8. Λ stays Conjecture 1. Trust never 100%.
 
+import { createShowcase } from "./_showcase.js";
+
 const ID    = "gitthoughts";
 const TITLE = "GitOfThoughts (Version-Controlled Reasoning)";
 
@@ -84,9 +86,8 @@ const CURVE_H   = 3.2;    // curve panel height (accuracy 0..1)
 const BAR_W     = 0.7;    // diff/merge bar width
 const BAR_YSC   = 0.32;   // world-units per commit in the bars
 
-let _stage = null, _THREE = null, _ctx = null, _group = null, _overlay = null;
+let _stage = null, _THREE = null, _ctx = null, _group = null, _show = null;
 let _frameReg = false, _polls = [], _el = {}, _badge = null;
-let _plain = false;
 
 // geometry handles
 let _floor      = null;
@@ -453,119 +454,48 @@ function _onFrame() {
 // overlay
 // =============================================================================
 function _buildOverlay() {
-  const ctx = _ctx;
-  _overlay = document.createElement("div");
-  Object.assign(_overlay.style, {
-    position: "absolute", left: "14px", top: "14px", zIndex: "6",
-    display: "flex", flexDirection: "column", gap: "8px",
-    maxWidth: "min(94%,480px)",
-    font: "12px ui-sans-serif,system-ui,Segoe UI,Roboto,Arial",
-    color: "#eef3f6",
-  });
-
-  const h = document.createElement("div");
-  h.style.cssText = "font:600 13px ui-sans-serif,system-ui;letter-spacing:.4px";
-  h.textContent = TITLE;
-  _overlay.appendChild(h);
-
-  const sub = document.createElement("div");
-  sub.style.cssText = "color:#9fb1bf;font-size:11px;line-height:1.55";
-  sub.innerHTML =
+  _show = createShowcase(_ctx, {
+    id: ID, title: TITLE, accent: "#5b8dee",
+    badge: _badge,
+    chips: [{ label: "MODELED", text: "version-controlled reasoning", name: "hl" }],
+    legend: ["MEASURED", "MODELED"],
+    description:
     'GitOfThoughts stores an agent\u2019s reasoning tree as a <b>git repository</b>: every scored thought is a ' +
     '<b>commit</b> (sha256 over parent+content+score \u2014 a Merkle DAG), scores are <b>notes</b>, outcomes are ' +
     '<b>tags</b>, and retrieval is a <b>git log</b> DAG walk. This organ models the substrate \u2014 <b>log, replay, ' +
     'diff, merge</b> \u2014 and the paper\u2019s honest <b>copyability threshold</b>: memory only helps once the ' +
     'retrieved case is a near-duplicate (cosine similarity above <b>~0.8</b>); below it there is <b>no gain</b> ' +
     '(the model finds the answer, it does not transfer the method). Panels: commit tree, threshold curve, ' +
-    'diff/merge bars. Honesty label <b>MODELED</b> (data-structure + finding reproduction; runs no LLM). 0 runtime CDN.';
-  _overlay.appendChild(sub);
-
-  const brow = document.createElement("div");
-  brow.style.cssText = "display:flex;gap:8px;align-items:center;flex-wrap:wrap";
-  if (_badge && _badge.el) brow.appendChild(_badge.el);
-  _overlay.appendChild(brow);
-
-  const card = document.createElement("div");
-  card.style.cssText = "background:#0a1117;border:1px solid #1d2a36;border-radius:9px;padding:9px 10px;display:flex;flex-direction:column;gap:6px";
-
-  const chead = document.createElement("div");
-  chead.style.cssText = "display:flex;align-items:center;gap:8px;flex-wrap:wrap";
-  const dot = document.createElement("span");
-  dot.style.cssText = "width:9px;height:9px;border-radius:50%;background:#3af4c8;box-shadow:0 0 7px #3af4c8";
-  const nm = document.createElement("b");
-  nm.style.cssText = "font-size:12px;color:#3af4c8;letter-spacing:.3px";
-  nm.textContent = "gitofthoughts version-controlled reasoning";
-  chead.appendChild(dot); chead.appendChild(nm);
-  card.appendChild(chead);
-
-  const grid = document.createElement("div");
-  grid.style.cssText = "display:grid;grid-template-columns:1fr;gap:4px";
-
-  function kpiRow(id, label) {
-    const r = document.createElement("div");
-    r.style.cssText = "display:flex;justify-content:space-between;gap:10px;font-size:11px";
-    const l = document.createElement("span"); l.style.cssText = "color:#9fb1bf"; l.textContent = label;
-    const v = document.createElement("b");
-    v.id = id;
-    v.style.cssText = "font-variant-numeric:tabular-nums;color:#eef3f6;text-align:right;max-width:56%";
-    v.textContent = "\u2014";
-    _el[id] = v;
-    r.appendChild(l); r.appendChild(v); return r;
-  }
-
-  grid.appendChild(kpiRow("gt-tree",    "reasoning tree (depth \u00d7 branch)"));
-  grid.appendChild(kpiRow("gt-commits", "commits (thoughts)"));
-  grid.appendChild(kpiRow("gt-leaves",  "terminal thoughts (tagged)"));
-  grid.appendChild(kpiRow("gt-head",    "HEAD sha (highest-scoring leaf)"));
-  grid.appendChild(kpiRow("gt-log",     "git log length (HEAD\u2192root)"));
-  grid.appendChild(kpiRow("gt-replay",  "replay verified (shas re-derived)"));
-  grid.appendChild(kpiRow("gt-diff",    "diff (onlyA / shared / onlyB)"));
-  grid.appendChild(kpiRow("gt-merge",   "merge (commits / conflicts)"));
-  grid.appendChild(kpiRow("gt-tags",    "outcomes (solved / partial / dead)"));
-  grid.appendChild(kpiRow("gt-thr",     "copyability threshold (cosine)"));
-  grid.appendChild(kpiRow("gt-jump",    "accuracy jump across threshold"));
-  grid.appendChild(kpiRow("gt-below",   "gain BELOW threshold (MEASURED)"));
-  grid.appendChild(kpiRow("gt-above",   "gain ABOVE threshold (MEASURED)"));
-  grid.appendChild(kpiRow("gt-label",   "honesty label"));
-  card.appendChild(grid);
-
-  const fn = document.createElement("div");
-  fn.style.cssText = "font-size:9.5px;color:#6b7a86;line-height:1.5";
-  fn.textContent = "GitOfThoughts \u2014 Shekar, Abhishek H S, Krishnan, arXiv:2606.14470 (arxiv.org/abs/2606.14470) \u00b7 git object model, Pro Git. MODELED \u00b7 data-structure + copyability-threshold reproduction; runs no LLM; memory does NOT improve novel-problem accuracy (reproduced honestly).";
-  card.appendChild(fn);
-  _overlay.appendChild(card);
-
-  const pl = document.createElement("button");
-  pl.textContent = "\u25d1 what this means";
-  pl.title = "Toggle plain-language explanation for investors & consumers.";
-  pl.style.cssText = "font:11px ui-monospace,monospace;padding:5px 11px;border-radius:7px;border:1px solid #3af4c8;background:#08140f;color:#3af4c8;cursor:pointer;width:fit-content";
-  pl.addEventListener("click", () => {
-    _plain = !_plain;
-    pl.style.background = _plain ? "#0f2a20" : "#08140f";
-    _applyPlain();
+    'diff/merge bars. Honesty label <b>MODELED</b> (data-structure + finding reproduction; runs no LLM). 0 runtime CDN.',
+    citations:
+      "GitOfThoughts \u2014 Shekar, Abhishek H S, Krishnan, arXiv:2606.14470 (arxiv.org/abs/2606.14470) \u00b7 git object model, Pro Git. MODELED \u00b7 data-structure + copyability-threshold reproduction; runs no LLM; memory does NOT improve novel-problem accuracy (reproduced honestly).",
+    plain: { html: _plainHtml },
   });
-  _overlay.appendChild(pl);
 
-  const pd = document.createElement("div");
-  pd.id = "gt-plain";
-  pd.style.cssText = "font-size:10.5px;color:#c9d6df;line-height:1.55;border:1px dashed #26333f;border-radius:7px;padding:7px 9px;display:none";
-  _el["plain"] = pd;
-  _overlay.appendChild(pd);
+  _el["gt-tree"]    = _show.addField("reasoning tree (depth \u00d7 branch)");
+  _el["gt-commits"] = _show.addField("commits (thoughts)");
+  _el["gt-leaves"]  = _show.addField("terminal thoughts (tagged)");
+  _el["gt-head"]    = _show.addField("HEAD sha (highest-scoring leaf)");
+  _el["gt-log"]     = _show.addField("git log length (HEAD\u2192root)");
+  _el["gt-replay"]  = _show.addField("replay verified (shas re-derived)");
+  _el["gt-diff"]    = _show.addField("diff (onlyA / shared / onlyB)");
+  _el["gt-merge"]   = _show.addField("merge (commits / conflicts)");
+  _el["gt-tags"]    = _show.addField("outcomes (solved / partial / dead)");
+  _el["gt-thr"]     = _show.addField("copyability threshold (cosine)");
+  _el["gt-jump"]    = _show.addField("accuracy jump across threshold");
+  _el["gt-below"]   = _show.addField("gain BELOW threshold (MEASURED)");
+  _el["gt-above"]   = _show.addField("gain ABOVE threshold (MEASURED)");
+  _el["gt-label"]   = _show.addField("honesty label");
 
-  (ctx.container || document.body).appendChild(_overlay);
   _paintOverlay();
 }
 
-function _applyPlain() {
-  const pd = _el["plain"];
-  if (!pd) return;
-  pd.style.display = _plain ? "block" : "none";
-  if (!_plain) return;
+function _plainHtml() {
   const thr   = S.threshold != null ? S.threshold.toFixed(2)   : "~0.80";
   const jump  = S.jumpSize   != null ? (S.jumpSize * 100).toFixed(0) + " pts" : "loading\u2026";
   const below = S.gainBelow  != null ? (S.gainBelow * 100).toFixed(1) + "%"   : "loading\u2026";
   const comm  = S.commitCount != null ? String(S.commitCount) : "loading\u2026";
-  pd.innerHTML =
+  return (
     "<b>What this means:</b> When an AI reasons, its train of thought vanishes the moment it finishes \u2014 you " +
     "cannot audit it, replay it, or combine two agents\u2019 histories. GitOfThoughts fixes that by saving every " +
     "thought as a <b>git commit</b>, exactly like version-controlling code: each thought gets a fingerprint " +
@@ -577,7 +507,7 @@ function _applyPlain() {
     "method. Below that line, the gain is essentially zero (<b>" + below + "</b> here). This view reproduces both the " +
     "data structure AND that honesty: the accuracy curve is flat until it <b>jumps by ~" + jump + "</b> right at the " +
     "threshold. This is a <b>MODELED</b> demo \u2014 it runs no real AI and claims no accuracy improvement. The value of " +
-    "git-as-memory is <b>auditability and mergeability</b>, not smarter answers.";
+    "git-as-memory is <b>auditability and mergeability</b>, not smarter answers.");
 }
 
 function _tok(s) {
@@ -609,7 +539,7 @@ function _paintOverlay() {
   _set("gt-above",   t || pct(S.gainAbove, 1));
   // honesty label verbatim — never upgraded
   _set("gt-label",   t || (S.label || "MODELED"));
-  if (_plain) _applyPlain();
+  if (_show) { _show.setChip("hl", S.label || "MODELED", { text: "version-controlled reasoning" }); _show.refreshPlain(); }
 }
 
 function fx0(v) { return typeof v === "number" ? String(v) : "\u2014"; }
@@ -619,7 +549,7 @@ function fx0(v) { return typeof v === "number" ? String(v) : "\u2014"; }
 // =============================================================================
 export function unmount() {
   _polls.forEach((p) => { try { p.stop(); } catch (_) {} }); _polls = [];
-  try { if (_overlay && _overlay.parentNode) _overlay.parentNode.removeChild(_overlay); } catch (_) {}
+  try { if (_show) _show.destroy(); } catch (_) {}
   try {
     if (_group && _stage) {
       _group.traverse((o) => {
@@ -632,12 +562,12 @@ export function unmount() {
       _stage.scene.remove(_group);
     }
   } catch (_) {}
-  _group = _overlay = null;
+  _group = _show = null;
   _floor = null;
   _treeGroup = null;
   _curveGroup = null;
   _barGroup = null;
-  _el = {}; _badge = null; _plain = false; _frameReg = false;
+  _el = {}; _badge = null; _frameReg = false;
   _stage = _THREE = _ctx = null;
   S.label = S.depth = S.branch = S.commitCount = S.leafCount = null;
   S.headSha = S.rootSha = null;

static/3d/surfaces/goat.js

@@ -44,6 +44,8 @@
 // DOCTRINE v11: degrades gracefully (grey) on 404/error; honesty label still shown.
 // Nothing here is in the locked-8. Λ stays Conjecture 1. Trust never 100%.
 
+import { createShowcase } from "./_showcase.js";
+
 const ID    = "goat";
 const TITLE = "GOAT · Optimal-Transport Attention (live)";
 
@@ -68,9 +70,8 @@ const BAR_MAXH   = 4.2;    // max bar height for weight = 1.0
 const CONV_LEN   = 6.0;    // world-length of the convergence trace along X
 const MAX_CONV   = 40;     // cap on residual points rendered
 
-let _stage = null, _THREE = null, _ctx = null, _group = null, _overlay = null;
+let _stage = null, _THREE = null, _ctx = null, _group = null, _show = null;
 let _frameReg = false, _polls = [], _el = {}, _badge = null;
-let _plain = false;
 
 // geometry handles
 let _floor       = null;
@@ -344,110 +345,39 @@ function _onFrame() {
 // overlay
 // =============================================================================
 function _buildOverlay() {
-  const ctx = _ctx;
-  _overlay = document.createElement("div");
-  Object.assign(_overlay.style, {
-    position: "absolute", left: "14px", top: "14px", zIndex: "6",
-    display: "flex", flexDirection: "column", gap: "8px",
-    maxWidth: "min(94%,460px)",
-    font: "12px ui-sans-serif,system-ui,Segoe UI,Roboto,Arial",
-    color: "#eef3f6",
-  });
-
-  const h = document.createElement("div");
-  h.style.cssText = "font:600 13px ui-sans-serif,system-ui;letter-spacing:.4px";
-  h.textContent = TITLE;
-  _overlay.appendChild(h);
-
-  const sub = document.createElement("div");
-  sub.style.cssText = "color:#9fb1bf;font-size:11px;line-height:1.55";
-  sub.innerHTML =
-    'Plain <b>softmax</b> attention (left, lattice-blue) dumps runaway mass onto one token \u2014 the ' +
-    '<b>attention sink</b> (usually token 0). <b>GOAT</b> (right, proof-teal) reframes each attention row ' +
-    'as an <b>optimal-transport</b> problem: an entropic <b>Sinkhorn</b> plan with a <b>trainable key prior</b> ' +
-    'that pins the column mass, so the sink is structurally removed and mass spreads by relevance. ' +
-    'Honesty label <b>MODELED</b> (deterministic OT/Sinkhorn simulation; NOT a trained transformer). 0 runtime CDN.';
-  _overlay.appendChild(sub);
-
-  const brow = document.createElement("div");
-  brow.style.cssText = "display:flex;gap:8px;align-items:center;flex-wrap:wrap";
-  if (_badge && _badge.el) brow.appendChild(_badge.el);
-  _overlay.appendChild(brow);
-
-  const card = document.createElement("div");
-  card.style.cssText = "background:#0a1117;border:1px solid #1d2a36;border-radius:9px;padding:9px 10px;display:flex;flex-direction:column;gap:6px";
-
-  const chead = document.createElement("div");
-  chead.style.cssText = "display:flex;align-items:center;gap:8px;flex-wrap:wrap";
-  const dot = document.createElement("span");
-  dot.style.cssText = "width:9px;height:9px;border-radius:50%;background:#3af4c8;box-shadow:0 0 7px #3af4c8";
-  const nm = document.createElement("b");
-  nm.style.cssText = "font-size:12px;color:#3af4c8;letter-spacing:.3px";
-  nm.textContent = "optimal-transport attention";
-  chead.appendChild(dot); chead.appendChild(nm);
-  card.appendChild(chead);
-
-  const grid = document.createElement("div");
-  grid.style.cssText = "display:grid;grid-template-columns:1fr;gap:4px";
-
-  function kpiRow(id, label) {
-    const r = document.createElement("div");
-    r.style.cssText = "display:flex;justify-content:space-between;gap:10px;font-size:11px";
-    const l = document.createElement("span"); l.style.cssText = "color:#9fb1bf"; l.textContent = label;
-    const v = document.createElement("b");
-    v.id = id;
-    v.style.cssText = "font-variant-numeric:tabular-nums;color:#eef3f6;text-align:right;max-width:58%";
-    v.textContent = "\u2014";
-    _el[id] = v;
-    r.appendChild(l); r.appendChild(v); return r;
-  }
-
-  grid.appendChild(kpiRow("gt-dims",    "queries \u00d7 keys (n_q \u00d7 n_k)"));
-  grid.appendChild(kpiRow("gt-reg",     "Sinkhorn reg (temperature)"));
-  grid.appendChild(kpiRow("gt-prior",   "key prior (trainable)"));
-  grid.appendChild(kpiRow("gt-sinks",   "sink mass on token 0 \u2014 softmax"));
-  grid.appendChild(kpiRow("gt-sinkg",   "sink mass on token 0 \u2014 GOAT"));
-  grid.appendChild(kpiRow("gt-sinkred", "sink removed by GOAT \u2014 MODELED"));
-  grid.appendChild(kpiRow("gt-conv",    "Sinkhorn converged?"));
-  grid.appendChild(kpiRow("gt-label",   "honesty label"));
-  card.appendChild(grid);
-
-  const fn = document.createElement("div");
-  fn.style.cssText = "font-size:9.5px;color:#6b7a86;line-height:1.5";
-  fn.textContent = "GOAT arXiv:2601.15380 (attention-as-OT) \u00b7 Sinkhorn: Cuturi arXiv:1306.0895 \u00b7 attention sinks: Xiao et al. arXiv:2309.17453. MODELED \u00b7 not claimed-as.";
-  card.appendChild(fn);
-  _overlay.appendChild(card);
-
-  const pl = document.createElement("button");
-  pl.textContent = "\u25d1 what this means";
-  pl.title = "Toggle plain-language explanation for investors & consumers.";
-  pl.style.cssText = "font:11px ui-monospace,monospace;padding:5px 11px;border-radius:7px;border:1px solid #3af4c8;background:#08140f;color:#3af4c8;cursor:pointer;width:fit-content";
-  pl.addEventListener("click", () => {
-    _plain = !_plain;
-    pl.style.background = _plain ? "#0f2a20" : "#08140f";
-    _applyPlain();
+  _show = createShowcase(_ctx, {
+    id: ID, title: TITLE, accent: "#5b8dee",
+    badge: _badge,
+    chips: [{ label: "MODELED", text: "optimal-transport attention", name: "hl" }],
+    legend: ["MODELED"],
+    description:
+      'Plain <b>softmax</b> attention (left, lattice-blue) dumps runaway mass onto one token \u2014 the ' +
+      '<b>attention sink</b> (usually token 0). <b>GOAT</b> (right, proof-teal) reframes each attention row ' +
+      'as an <b>optimal-transport</b> problem: an entropic <b>Sinkhorn</b> plan with a <b>trainable key prior</b> ' +
+      'that pins the column mass, so the sink is structurally removed and mass spreads by relevance. ' +
+      'Honesty label <b>MODELED</b> (deterministic OT/Sinkhorn simulation; NOT a trained transformer). 0 runtime CDN.',
+    citations:
+      "GOAT arXiv:2601.15380 (attention-as-OT) \u00b7 Sinkhorn: Cuturi arXiv:1306.0895 \u00b7 attention sinks: Xiao et al. arXiv:2309.17453. MODELED \u00b7 not claimed-as.",
+    plain: { html: _plainHtml },
   });
-  _overlay.appendChild(pl);
 
-  const pd = document.createElement("div");
-  pd.id = "gt-plain";
-  pd.style.cssText = "font-size:10.5px;color:#c9d6df;line-height:1.55;border:1px dashed #26333f;border-radius:7px;padding:7px 9px;display:none";
-  _el["plain"] = pd;
-  _overlay.appendChild(pd);
+  _el["gt-dims"]    = _show.addField("queries \u00d7 keys (n_q \u00d7 n_k)");
+  _el["gt-reg"]     = _show.addField("Sinkhorn reg (temperature)");
+  _el["gt-prior"]   = _show.addField("key prior (trainable)");
+  _el["gt-sinks"]   = _show.addField("sink mass on token 0 \u2014 softmax");
+  _el["gt-sinkg"]   = _show.addField("sink mass on token 0 \u2014 GOAT");
+  _el["gt-sinkred"] = _show.addField("sink removed by GOAT \u2014 MODELED");
+  _el["gt-conv"]    = _show.addField("Sinkhorn converged?");
+  _el["gt-label"]   = _show.addField("honesty label");
 
-  (ctx.container || document.body).appendChild(_overlay);
   _paintOverlay();
 }
 
-function _applyPlain() {
-  const pd = _el["plain"];
-  if (!pd) return;
-  pd.style.display = _plain ? "block" : "none";
-  if (!_plain) return;
+function _plainHtml() {
   const ss  = S.sinkSoft != null ? (S.sinkSoft * 100).toFixed(0) + "%" : "loading\u2026";
   const sg  = S.sinkGoat != null ? (S.sinkGoat * 100).toFixed(0) + "%" : "loading\u2026";
   const red = S.sinkRed  != null ? (S.sinkRed  * 100).toFixed(0) + "%" : "loading\u2026";
-  pd.innerHTML =
+  return (
     "<b>What this means:</b> When a language model \u201cpays attention,\u201d it decides how much weight to put " +
     "on each earlier word. Normal attention (<b>softmax</b>) has a bad habit: it parks a huge chunk of that " +
     "weight on one throwaway token \u2014 usually the very first one \u2014 just to keep the rest of the row tidy. " +
@@ -456,7 +386,7 @@ function _applyPlain() {
     "cargo\u201d and, crucially, a <b>learned rule</b> caps how much any single token is allowed to receive \u2014 so no " +
     "token can hoard it. After GOAT, the sink token holds only about <b>" + sg + "</b>, a <b>" + red + " reduction</b>, " +
     "and the freed-up attention flows to genuinely relevant words. This view is a <b>MODELED</b> deterministic " +
-    "simulation of the optimal-transport math (Sinkhorn), not a run of a real trained model.";
+    "simulation of the optimal-transport math (Sinkhorn), not a run of a real trained model.");
 }
 
 function _tok(s) {
@@ -482,7 +412,7 @@ function _paintOverlay() {
   _set("gt-conv",    t || (S.converged === true ? "yes (marginals matched)" : S.converged === false ? "not yet" : "\u2014"));
   // honesty label verbatim — never upgraded
   _set("gt-label",   t || (S.label || "MODELED"));
-  if (_plain) _applyPlain();
+  if (_show) { _show.setChip("hl", S.label || "MODELED", { text: "optimal-transport attention" }); _show.refreshPlain(); }
 }
 
 // =============================================================================
@@ -490,7 +420,7 @@ function _paintOverlay() {
 // =============================================================================
 export function unmount() {
   _polls.forEach((p) => { try { p.stop(); } catch (_) {} }); _polls = [];
-  try { if (_overlay && _overlay.parentNode) _overlay.parentNode.removeChild(_overlay); } catch (_) {}
+  try { if (_show) _show.destroy(); } catch (_) {}
   try {
     if (_group && _stage) {
       _group.traverse((o) => {
@@ -503,10 +433,10 @@ export function unmount() {
       _stage.scene.remove(_group);
     }
   } catch (_) {}
-  _group = _overlay = null;
+  _group = _show = null;
   _floor = null; _softBars = []; _goatBars = [];
   _convLine = null; _convDots = []; _sinkRingS = null; _sinkRingG = null;
-  _el = {}; _badge = null; _plain = false; _frameReg = false;
+  _el = {}; _badge = null; _frameReg = false;
   _stage = _THREE = _ctx = null;
   S.label = S.nQ = S.nK = S.iters = S.reg = S.prior = null;
   S.sinkSoft = S.sinkGoat = S.sinkRed = S.residuals = S.attnSoft = S.attnGoat = S.converged = null;

static/3d/surfaces/governance.js

@@ -45,6 +45,8 @@
 //
 // CONTRACT: default-export { id, title, endpoints[], mount(ctx), unmount() }.
 
+import { createShowcase } from "./_showcase.js";
+
 const ID = "governance";
 const TITLE = "AI Governance · Assurance";
 
@@ -79,6 +81,7 @@ let _handles = [];                // poll handles to stop on unmount
 let _overlay = null, _graphPanel = null, _graph = null, _hud = {};
 let _frameCb = null, _fgScript = null;
 let _plain = false, _plainEl = null;  // "what this means" plain-language toggle
+let _show = null;                     // shared collapsible showcase chrome
 const _state = {};                // last meta per endpoint (for HUD)
 
 // ---------------------------------------------------------------------------
@@ -535,14 +538,19 @@ function _updateSbomFromArtifact(json) {
 // OVERLAY HUD — badges per route + legend + teaching callout + SBOM panel
 // ===========================================================================
 function _buildOverlay(ctx) {
-  _overlay = el("div", "position:absolute;left:14px;top:14px;z-index:5;display:flex;flex-direction:column;gap:9px;max-width:min(94%,440px);pointer-events:none");
-
-  const head = el("div", "font:600 14px ui-sans-serif,system-ui;color:#eef3f6;letter-spacing:.4px", TITLE);
-  _overlay.appendChild(head);
+  // Shared collapsible showcase chrome FIRST: compact title bar + honesty legend live in
+  // the always-visible chrome; the per-route badges + posture/gate/honest readouts + the
+  // teaching callout fold into the (collapsed) body so the 3D estate stays the star.
+  _show = createShowcase(ctx, {
+    id: ID, title: TITLE, accent: "#5b8dee",
+    legend: ["MEASURED", "MODELED", "HEURISTIC", "STRUCTURAL-ONLY"],
+    description:
+      "modeled on GUAC v1.0 · Sigstore/Rekor · SCITT — knowledge graph + Merkle hash-chain + crosswalk",
+  });
 
-  const sub = el("div", "font:10.5px ui-monospace,Menlo,monospace;color:#9fb1bf;line-height:1.5",
-    "modeled on GUAC v1.0 · Sigstore/Rekor · SCITT — knowledge graph + Merkle hash-chain + crosswalk");
-  _overlay.appendChild(sub);
+  // rows fold into the showcase body as a PLAIN static container (no absolute chrome,
+  // no own title, no standalone legend — the showcase provides those).
+  _overlay = el("div", "display:flex;flex-direction:column;gap:9px");
 
   // per-route live badges: LIVE routes first (drive the tab), then the PENDING ones.
   const badgeWrap = el("div", "display:flex;flex-direction:column;gap:5px;pointer-events:auto");
@@ -576,10 +584,6 @@ function _buildOverlay(ctx) {
   _hud.honest = el("div", "font:10px ui-monospace,Menlo,monospace;color:#7d8a96;line-height:1.5;pointer-events:auto", "build: awaiting /honest…");
   _overlay.appendChild(_hud.honest);
 
-  // honesty legend (doctrine chips)
-  const legend = _label.legend(); legend.style.opacity = "0.9"; legend.style.pointerEvents = "auto";
-  _overlay.appendChild(legend);
-
   // teaching callout (doctrine): signature ≠ safety
   const teach = el("div",
     "pointer-events:auto;margin-top:2px;padding:8px 10px;border:1px solid #3a2330;border-radius:8px;" +
@@ -619,8 +623,10 @@ function _buildOverlay(ctx) {
   _hud.sbom = el("div", "position:absolute;left:8px;bottom:6px;z-index:2;font:9.5px ui-monospace,monospace;color:#7d8a96", "STRUCTURAL-ONLY · awaiting /assurance/artifact");
   _graphPanel.appendChild(gh); _graphPanel.appendChild(_hud.sbom);
 
+  // fold the rows into the collapsible showcase body; the SBOM graph panel keeps its own
+  // absolute placement (it hosts the vendored ForceGraph3D canvas, which owns its GL context).
+  _show.body.appendChild(_overlay);
   const host = ctx.container || document.body;
-  host.appendChild(_overlay);
   host.appendChild(_graphPanel);
 }
 
@@ -862,14 +868,17 @@ function _refreshStatus() {
 function unmount() {
   _handles.forEach((h) => { try { h.stop && h.stop(); } catch (_) {} });
   _handles = [];
+  try { if (_show) _show.destroy(); } catch (_) {}
   try { if (_frameCb && _stage && _stage.offFrame) _stage.offFrame(_frameCb); } catch (_) {}
   _frameCb = null;
   try { if (_graph && _graph._destructor) _graph._destructor(); } catch (_) {}
   _graph = null;
   try { if (_root && _stage) { disposeObj(_root); _stage.scene.remove(_root); } } catch (_) {}
   _root = null;
-  [_overlay, _graphPanel].forEach((n) => { try { if (n && n.parentNode) n.parentNode.removeChild(n); } catch (_) {} });
-  _overlay = null; _graphPanel = null; _hud = {}; _plain = false; _plainEl = null;
+  // _overlay now lives inside the showcase (removed by _show.destroy()); only the SBOM
+  // graph panel is a standalone positioned node.
+  try { if (_graphPanel && _graphPanel.parentNode) _graphPanel.parentNode.removeChild(_graphPanel); } catch (_) {}
+  _show = null; _overlay = null; _graphPanel = null; _hud = {}; _plain = false; _plainEl = null;
   _stage = null; _THREE = null; _label = null; _live = null;
   for (const k in _state) delete _state[k];
 }

static/3d/surfaces/graphmem.js

@@ -42,6 +42,8 @@
 // 0 RUNTIME CDN. three.js via ctx.THREE (vendored r170 through the page importmap).
 // DOCTRINE v11: degrades gracefully (grey) on 404/error; honesty label still shown.
 
+import { createShowcase } from "./_showcase.js";
+
 const ID    = "graphmem";
 const TITLE = "Multi-Graph Agentic Memory · MAGMA (live)";
 
@@ -63,9 +65,8 @@ const LAYER_EDGE_COL = { semantic: C_NODE, temporal: C_NODE, causal: C_TOP, enti
 const N_SLOTS = 12;   // memory items in the fixed synthetic corpus
 const RADIUS  = 6.5;  // radius of the node ring within each layer plane
 
-let _stage = null, _THREE = null, _ctx = null, _group = null, _overlay = null;
+let _stage = null, _THREE = null, _ctx = null, _group = null, _show = null;
 let _frameReg = false, _polls = [], _el = {}, _badge = null;
-let _plain = false;
 
 // geometry handles
 let _nodes = {};        // { layerName: Array<THREE.Mesh> } — node ring replicated per layer
@@ -309,111 +310,40 @@ function _onFrame() {
 // overlay
 // =============================================================================
 function _buildOverlay() {
-  const ctx = _ctx;
-  _overlay = document.createElement("div");
-  Object.assign(_overlay.style, {
-    position: "absolute", left: "14px", top: "14px", zIndex: "6",
-    display: "flex", flexDirection: "column", gap: "8px",
-    maxWidth: "min(94%,460px)",
-    font: "12px ui-sans-serif,system-ui,Segoe UI,Roboto,Arial",
-    color: "#eef3f6",
-  });
-
-  const h = document.createElement("div");
-  h.style.cssText = "font:600 13px ui-sans-serif,system-ui;letter-spacing:.4px";
-  h.textContent = TITLE;
-  _overlay.appendChild(h);
-
-  const sub = document.createElement("div");
-  sub.style.cssText = "color:#9fb1bf;font-size:11px;line-height:1.55";
-  sub.innerHTML =
-    'One synthetic memory corpus stored across <b>four typed graphs</b> \u2014 semantic, ' +
-    'temporal, causal, entity \u2014 shown as four stacked layers. A query runs a fixed ' +
-    '<b>policy-guided traversal</b>; the teal <b>PATH</b> shows exactly which node it ' +
-    'reached via which graph, versus a monolithic flat-BFS baseline. Honesty label ' +
-    '<b>MODELED</b> (toy symbolic sim; clean-room-inspired by MAGMA \u2014 not a ' +
-    'reproduction). 0 runtime CDN.';
-  _overlay.appendChild(sub);
-
-  const brow = document.createElement("div");
-  brow.style.cssText = "display:flex;gap:8px;align-items:center;flex-wrap:wrap";
-  if (_badge && _badge.el) brow.appendChild(_badge.el);
-  _overlay.appendChild(brow);
-
-  const card = document.createElement("div");
-  card.style.cssText = "background:#0a1117;border:1px solid #1d2a36;border-radius:9px;padding:9px 10px;display:flex;flex-direction:column;gap:6px";
-
-  const chead = document.createElement("div");
-  chead.style.cssText = "display:flex;align-items:center;gap:8px;flex-wrap:wrap";
-  const dot = document.createElement("span");
-  dot.style.cssText = "width:9px;height:9px;border-radius:50%;background:#5b8dee;box-shadow:0 0 7px #5b8dee";
-  const nm = document.createElement("b");
-  nm.style.cssText = "font-size:12px;color:#5b8dee;letter-spacing:.3px";
-  nm.textContent = "graphmem";
-  chead.appendChild(dot); chead.appendChild(nm);
-  card.appendChild(chead);
-
-  const grid = document.createElement("div");
-  grid.style.cssText = "display:grid;grid-template-columns:1fr;gap:4px";
-
-  function kpiRow(id, label) {
-    const r = document.createElement("div");
-    r.style.cssText = "display:flex;justify-content:space-between;gap:10px;font-size:11px";
-    const l = document.createElement("span"); l.style.cssText = "color:#9fb1bf"; l.textContent = label;
-    const v = document.createElement("b");
-    v.id = id;
-    v.style.cssText = "font-variant-numeric:tabular-nums;color:#eef3f6;text-align:right;max-width:60%";
-    v.textContent = "\u2014";
-    _el[id] = v;
-    r.appendChild(l); r.appendChild(v); return r;
-  }
-
-  grid.appendChild(kpiRow("gm-query",  "query type"));
-  grid.appendChild(kpiRow("gm-typed",  "typed traversal (retrieved \u2192 F1)"));
-  grid.appendChild(kpiRow("gm-flat",   "flat baseline (retrieved \u2192 F1)"));
-  grid.appendChild(kpiRow("gm-gain",   "F1 gain (typed \u2212 flat)"));
-  grid.appendChild(kpiRow("gm-hops",   "traversal PATH hops"));
-  grid.appendChild(kpiRow("gm-label",  "honesty label"));
-  card.appendChild(grid);
-
-  const fn = document.createElement("div");
-  fn.style.cssText = "font-size:9.5px;color:#6b7a86;line-height:1.5";
-  fn.textContent = "MAGMA arxiv.org/abs/2601.03236 (Jiang, Li, Li, Li) \u00b7 Multi-Agent Memory arxiv.org/abs/2603.10062 (Yu et al.). MODELED \u00b7 not claimed-as.";
-  card.appendChild(fn);
-  _overlay.appendChild(card);
-
-  const pl = document.createElement("button");
-  pl.textContent = "\u25d1 what this means";
-  pl.title = "Toggle plain-language explanation for investors & consumers.";
-  pl.style.cssText = "font:11px ui-monospace,monospace;padding:5px 11px;border-radius:7px;border:1px solid #3af4c8;background:#08140f;color:#3af4c8;cursor:pointer;width:fit-content";
-  pl.addEventListener("click", () => {
-    _plain = !_plain;
-    pl.style.background = _plain ? "#0f2a20" : "#08140f";
-    _applyPlain();
+  _show = createShowcase(_ctx, {
+    id: ID, title: TITLE, accent: "#5b8dee",
+    badge: _badge,
+    chips: [{ label: "MODELED", text: "graphmem", name: "hl" }],
+    legend: ["MODELED"],
+    description:
+      'One synthetic memory corpus stored across <b>four typed graphs</b> \u2014 semantic, ' +
+      'temporal, causal, entity \u2014 shown as four stacked layers. A query runs a fixed ' +
+      '<b>policy-guided traversal</b>; the teal <b>PATH</b> shows exactly which node it ' +
+      'reached via which graph, versus a monolithic flat-BFS baseline. Honesty label ' +
+      '<b>MODELED</b> (toy symbolic sim; clean-room-inspired by MAGMA \u2014 not a ' +
+      'reproduction). 0 runtime CDN.',
+    citations:
+      "MAGMA arxiv.org/abs/2601.03236 (Jiang, Li, Li, Li) \u00b7 Multi-Agent Memory arxiv.org/abs/2603.10062 (Yu et al.). MODELED \u00b7 not claimed-as.",
+    plain: { html: _plainHtml },
   });
-  _overlay.appendChild(pl);
 
-  const pd = document.createElement("div");
-  pd.id = "gm-plain";
-  pd.style.cssText = "font-size:10.5px;color:#c9d6df;line-height:1.55;border:1px dashed #26333f;border-radius:7px;padding:7px 9px;display:none";
-  _el["plain"] = pd;
-  _overlay.appendChild(pd);
+  _el["gm-query"] = _show.addField("query type");
+  _el["gm-typed"] = _show.addField("typed traversal (retrieved \u2192 F1)");
+  _el["gm-flat"]  = _show.addField("flat baseline (retrieved \u2192 F1)");
+  _el["gm-gain"]  = _show.addField("F1 gain (typed \u2212 flat)");
+  _el["gm-hops"]  = _show.addField("traversal PATH hops");
+  _el["gm-label"] = _show.addField("honesty label");
 
-  (ctx.container || document.body).appendChild(_overlay);
   _paintOverlay();
 }
 
-function _applyPlain() {
-  const pd = _el["plain"];
-  if (!pd) return;
-  pd.style.display = _plain ? "block" : "none";
-  if (!_plain) return;
+function _plainHtml() {
   const qt = S.queryText || S.queryType || "loading\u2026";
   const ts = (S.scores && S.scores.typed_traversal) ? S.scores.typed_traversal : null;
   const bs = (S.scores && S.scores.flat_baseline) ? S.scores.flat_baseline : null;
   const tf = ts ? fx(ts.f1, 3) : "\u2026";
   const bf = bs ? fx(bs.f1, 3) : "\u2026";
-  pd.innerHTML =
+  return (
     "<b>What this means:</b> Most AI memory today is one big \u201csimilarity\u201d pile: ask " +
     "a question and it hands back whatever looks vaguely related, with no way to say <i>how</i> " +
     "it\u2019s related. This organ demonstrates a <b>different design</b>: the same memories are " +
@@ -428,7 +358,7 @@ function _applyPlain() {
     "machine, not a learned agent; \u201crelevance\u201d is scored against a hand-labeled gold set. It " +
     "shows the ordering/explainability advantage of typed traversal on constructed queries; it " +
     "does <b>not</b> reproduce MAGMA\u2019s LoCoMo/LongMemEval results and makes no claim about real " +
-    "long-horizon agent performance.";
+    "long-horizon agent performance.");
 }
 
 function _tok(s) {
@@ -456,7 +386,7 @@ function _paintOverlay() {
   _set("gm-hops",  t || (S.path ? String(S.path.length) : "\u2014"));
   // honesty label verbatim — never upgraded
   _set("gm-label", t || (S.label || "MODELED"));
-  if (_plain) _applyPlain();
+  if (_show) { _show.setChip("hl", S.label || "MODELED", { text: "graphmem" }); _show.refreshPlain(); }
 }
 
 // =============================================================================
@@ -464,7 +394,7 @@ function _paintOverlay() {
 // =============================================================================
 export function unmount() {
   _polls.forEach((p) => { try { p.stop(); } catch (_) {} }); _polls = [];
-  try { if (_overlay && _overlay.parentNode) _overlay.parentNode.removeChild(_overlay); } catch (_) {}
+  try { if (_show) _show.destroy(); } catch (_) {}
   try {
     if (_group && _stage) {
       _group.traverse((o) => {
@@ -477,9 +407,9 @@ export function unmount() {
       _stage.scene.remove(_group);
     }
   } catch (_) {}
-  _group = _overlay = null;
+  _group = _show = null;
   _nodes = {}; _edgeLines = {}; _pathLines = null; _startMarker = {};
-  _el = {}; _badge = null; _plain = false; _frameReg = false;
+  _el = {}; _badge = null; _frameReg = false;
   _stage = _THREE = _ctx = null;
   S.label = S.corpus = S.graphs = S.path = S.retrieved = S.baseRetr = null;
   S.queryType = S.queryText = S.scores = null;

static/3d/surfaces/grpo.js

@@ -42,6 +42,8 @@
 // DOCTRINE v11: degrades gracefully (grey) on 404/error; honesty label still shown.
 // Nothing here is in the locked-8. Λ stays Conjecture 1. Trust never 100%.
 
+import { createShowcase } from "./_showcase.js";
+
 const ID    = "grpo";
 const TITLE = "GRPO Reward Dynamics · Group-Relative Advantage (live)";
 
@@ -71,9 +73,8 @@ const MAX_STEPS   = 14;    // number of recent steps rendered along the axis
 const MAX_SAMPLES = 16;    // cap on group_size rendered per step (perf)
 const ADV_SCALE   = 1.6;   // world-units of height per unit of |advantage|
 
-let _stage = null, _THREE = null, _ctx = null, _group = null, _overlay = null;
+let _stage = null, _THREE = null, _ctx = null, _group = null, _show = null;
 let _frameReg = false, _polls = [], _el = {}, _badge = null;
-let _plain = false;
 
 // geometry handles
 let _floor      = null;
@@ -332,112 +333,41 @@ function _onFrame() {
 // overlay
 // =============================================================================
 function _buildOverlay() {
-  const ctx = _ctx;
-  _overlay = document.createElement("div");
-  Object.assign(_overlay.style, {
-    position: "absolute", left: "14px", top: "14px", zIndex: "6",
-    display: "flex", flexDirection: "column", gap: "8px",
-    maxWidth: "min(94%,440px)",
-    font: "12px ui-sans-serif,system-ui,Segoe UI,Roboto,Arial",
-    color: "#eef3f6",
-  });
-
-  const h = document.createElement("div");
-  h.style.cssText = "font:600 13px ui-sans-serif,system-ui;letter-spacing:.4px";
-  h.textContent = TITLE;
-  _overlay.appendChild(h);
-
-  const sub = document.createElement("div");
-  sub.style.cssText = "color:#9fb1bf;font-size:11px;line-height:1.55";
-  sub.innerHTML =
-    'GRPO samples a <b>group</b> of completions per step and normalizes each reward against ' +
-    'the group\'s own mean/std \u2014 <b>no critic network</b> needed. The policy is updated via a ' +
-    'PPO-clip surrogate (\u03b5=0.2) on that group-relative advantage, plus a KL penalty vs a fixed ' +
-    'reference policy. Honesty label <b>MODELED</b> (deterministic group-advantage + PPO-clip + KL ' +
-    'arithmetic; NOT a trained policy). 0 runtime CDN.';
-  _overlay.appendChild(sub);
-
-  const brow = document.createElement("div");
-  brow.style.cssText = "display:flex;gap:8px;align-items:center;flex-wrap:wrap";
-  if (_badge && _badge.el) brow.appendChild(_badge.el);
-  _overlay.appendChild(brow);
-
-  const card = document.createElement("div");
-  card.style.cssText = "background:#0a1117;border:1px solid #1d2a36;border-radius:9px;padding:9px 10px;display:flex;flex-direction:column;gap:6px";
-
-  const chead = document.createElement("div");
-  chead.style.cssText = "display:flex;align-items:center;gap:8px;flex-wrap:wrap";
-  const dot = document.createElement("span");
-  dot.style.cssText = "width:9px;height:9px;border-radius:50%;background:#3af4c8;box-shadow:0 0 7px #3af4c8";
-  const nm = document.createElement("b");
-  nm.style.cssText = "font-size:12px;color:#3af4c8;letter-spacing:.3px";
-  nm.textContent = "GRPO reward dynamics";
-  chead.appendChild(dot); chead.appendChild(nm);
-  card.appendChild(chead);
-
-  const grid = document.createElement("div");
-  grid.style.cssText = "display:grid;grid-template-columns:1fr;gap:4px";
-
-  function kpiRow(id, label) {
-    const r = document.createElement("div");
-    r.style.cssText = "display:flex;justify-content:space-between;gap:10px;font-size:11px";
-    const l = document.createElement("span"); l.style.cssText = "color:#9fb1bf"; l.textContent = label;
-    const v = document.createElement("b");
-    v.id = id;
-    v.style.cssText = "font-variant-numeric:tabular-nums;color:#eef3f6;text-align:right;max-width:58%";
-    v.textContent = "\u2014";
-    _el[id] = v;
-    r.appendChild(l); r.appendChild(v); return r;
-  }
-
-  grid.appendChild(kpiRow("gr-groupsize", "group_size (G samples/step)"));
-  grid.appendChild(kpiRow("gr-steps",     "steps simulated"));
-  grid.appendChild(kpiRow("gr-klbeta",    "kl_beta (KL-penalty coeff.)"));
-  grid.appendChild(kpiRow("gr-clipeps",   "clip_eps (PPO-clip \u03b5)"));
-  grid.appendChild(kpiRow("gr-reward",    "mean_reward \u2014 MODELED"));
-  grid.appendChild(kpiRow("gr-adv",       "mean_advantage \u2014 MODELED"));
-  grid.appendChild(kpiRow("gr-kl",        "kl_divergence (k3) \u2014 MODELED"));
-  grid.appendChild(kpiRow("gr-clipfrac",  "clip_fraction \u2014 MODELED"));
-  grid.appendChild(kpiRow("gr-score",     "final_policy_score \u2014 MODELED"));
-  grid.appendChild(kpiRow("gr-label",     "honesty label"));
-  card.appendChild(grid);
-
-  const fn = document.createElement("div");
-  fn.style.cssText = "font-size:9.5px;color:#6b7a86;line-height:1.5";
-  fn.textContent = "Shao et al. (DeepSeekMath GRPO) arXiv:2402.03300 \u00b7 DeepSeek-R1 arXiv:2501.12948. MODELED \u00b7 not claimed-as.";
-  card.appendChild(fn);
-  _overlay.appendChild(card);
-
-  const pl = document.createElement("button");
-  pl.textContent = "\u25d1 what this means";
-  pl.title = "Toggle plain-language explanation for investors & consumers.";
-  pl.style.cssText = "font:11px ui-monospace,monospace;padding:5px 11px;border-radius:7px;border:1px solid #3af4c8;background:#08140f;color:#3af4c8;cursor:pointer;width:fit-content";
-  pl.addEventListener("click", () => {
-    _plain = !_plain;
-    pl.style.background = _plain ? "#0f2a20" : "#08140f";
-    _applyPlain();
+  _show = createShowcase(_ctx, {
+    id: ID, title: TITLE, accent: "#5b8dee",
+    badge: _badge,
+    chips: [{ label: "MODELED", text: "reward dynamics", name: "hl" }],
+    legend: ["MODELED", "SAMPLE"],
+    description:
+      'GRPO samples a <b>group</b> of completions per step and normalizes each reward against ' +
+      'the group\'s own mean/std \u2014 <b>no critic network</b> needed. The policy is updated via a ' +
+      'PPO-clip surrogate (\u03b5=0.2) on that group-relative advantage, plus a KL penalty vs a fixed ' +
+      'reference policy. Honesty label <b>MODELED</b> (deterministic group-advantage + PPO-clip + KL ' +
+      'arithmetic; NOT a trained policy). 0 runtime CDN.',
+    citations:
+      "Shao et al. (DeepSeekMath GRPO) arXiv:2402.03300 \u00b7 DeepSeek-R1 arXiv:2501.12948. MODELED \u00b7 not claimed-as.",
+    plain: { html: _plainHtml },
   });
-  _overlay.appendChild(pl);
 
-  const pd = document.createElement("div");
-  pd.id = "gr-plain";
-  pd.style.cssText = "font-size:10.5px;color:#c9d6df;line-height:1.55;border:1px dashed #26333f;border-radius:7px;padding:7px 9px;display:none";
-  _el["plain"] = pd;
-  _overlay.appendChild(pd);
+  _el["gr-groupsize"] = _show.addField("group_size (G samples/step)");
+  _el["gr-steps"]     = _show.addField("steps simulated");
+  _el["gr-klbeta"]    = _show.addField("kl_beta (KL-penalty coeff.)");
+  _el["gr-clipeps"]   = _show.addField("clip_eps (PPO-clip \u03b5)");
+  _el["gr-reward"]    = _show.addField("mean_reward \u2014 MODELED");
+  _el["gr-adv"]       = _show.addField("mean_advantage \u2014 MODELED");
+  _el["gr-kl"]        = _show.addField("kl_divergence (k3) \u2014 MODELED");
+  _el["gr-clipfrac"]  = _show.addField("clip_fraction \u2014 MODELED");
+  _el["gr-score"]     = _show.addField("final_policy_score \u2014 MODELED");
+  _el["gr-label"]     = _show.addField("honesty label");
 
-  (ctx.container || document.body).appendChild(_overlay);
   _paintOverlay();
 }
 
-function _applyPlain() {
-  const pd = _el["plain"];
-  if (!pd) return;
-  pd.style.display = _plain ? "block" : "none";
-  if (!_plain) return;
+function _plainHtml() {
   const g       = S.groupSize   != null ? String(S.groupSize) : "loading\u2026";
   const reward  = S.meanReward  != null ? (S.meanReward * 100).toFixed(1) + "%" : "loading\u2026";
   const score   = S.policyScore != null ? (S.policyScore * 100).toFixed(1) + "%" : "loading\u2026";
-  pd.innerHTML =
+  return (
     "<b>What this means:</b> Instead of training a second, separate \u201ccritic\u201d network to judge how " +
     "good an answer is (as classic PPO does), GRPO just generates <b>" + g + " candidate answers</b> to the " +
     "same question and compares them <i>to each other</i> \u2014 the group's own average becomes the yardstick. " +
@@ -446,7 +376,7 @@ function _applyPlain() {
     "from where it started. Over simulated training, the average reward per group reaches about <b>" + reward + "</b> " +
     "and a convergence proxy (<b>policy_score</b>) climbs to about <b>" + score + "</b>. This view is a <b>MODELED</b> " +
     "closed-form simulation of the group-advantage/PPO-clip/KL arithmetic from the DeepSeekMath paper, not a run of " +
-    "DeepSeek-R1 or DeepSeekMath training.";
+    "DeepSeek-R1 or DeepSeekMath training.");
 }
 
 function _tok(s) {
@@ -474,7 +404,7 @@ function _paintOverlay() {
   _set("gr-score",     t || pct(S.policyScore, 2));
   // honesty label verbatim — never upgraded
   _set("gr-label", t || (S.label || "MODELED"));
-  if (_plain) _applyPlain();
+  if (_show) { _show.setChip("hl", S.label || "MODELED", { text: "reward dynamics" }); _show.refreshPlain(); }
 }
 
 // =============================================================================
@@ -482,7 +412,7 @@ function _paintOverlay() {
 // =============================================================================
 export function unmount() {
   _polls.forEach((p) => { try { p.stop(); } catch (_) {} }); _polls = [];
-  try { if (_overlay && _overlay.parentNode) _overlay.parentNode.removeChild(_overlay); } catch (_) {}
+  try { if (_show) _show.destroy(); } catch (_) {}
   try {
     if (_group && _stage) {
       _group.traverse((o) => {
@@ -495,9 +425,9 @@ export function unmount() {
       _stage.scene.remove(_group);
     }
   } catch (_) {}
-  _group = _overlay = null;
+  _group = _show = null;
   _floor = null; _plane = null; _spine = null; _sampleMesh = []; _tethers = []; _marker = null;
-  _el = {}; _badge = null; _plain = false; _frameReg = false;
+  _el = {}; _badge = null; _frameReg = false;
   _stage = _THREE = _ctx = null;
   S.label = S.groupSize = S.steps = S.klBeta = S.clipEps = null;
   S.meanReward = S.meanAdv = S.klDiv = S.clipFrac = S.policyScore = null;

static/3d/surfaces/herotq.js

@@ -51,6 +51,8 @@
 // DOCTRINE v11: degrades gracefully (grey) on 404/error; honesty label still shown.
 // Nothing here is in the locked-8. Λ stays Conjecture 1. Trust never 100%.
 
+import { createShowcase } from "./_showcase.js";
+
 const ID    = "herotq";
 const TITLE = "HeRo-Q Hessian-Conditioned Quantization";
 
@@ -76,9 +78,8 @@ const W_DX      = 0.22;   // world-units per weight coordinate
 const W_YSC     = 2.2;    // world-units per unit weight value
 const BAR_W     = 0.7;    // metric bar width
 
-let _stage = null, _THREE = null, _ctx = null, _group = null, _overlay = null;
+let _stage = null, _THREE = null, _ctx = null, _group = null, _show = null;
 let _frameReg = false, _polls = [], _el = {}, _badge = null;
-let _plain = false;
 
 // geometry handles
 let _floor      = null;
@@ -371,25 +372,13 @@ function _onFrame() {
 // overlay
 // =============================================================================
 function _buildOverlay() {
-  const ctx = _ctx;
-  _overlay = document.createElement("div");
-  Object.assign(_overlay.style, {
-    position: "absolute", left: "14px", top: "14px", zIndex: "6",
-    display: "flex", flexDirection: "column", gap: "8px",
-    maxWidth: "min(94%,470px)",
-    font: "12px ui-sans-serif,system-ui,Segoe UI,Roboto,Arial",
-    color: "#eef3f6",
-  });
-
-  const h = document.createElement("div");
-  h.style.cssText = "font:600 13px ui-sans-serif,system-ui;letter-spacing:.4px";
-  h.textContent = TITLE;
-  _overlay.appendChild(h);
-
-  const sub = document.createElement("div");
-  sub.style.cssText = "color:#9fb1bf;font-size:11px;line-height:1.55";
-  sub.innerHTML =
-    'HeRo-Q (\u201cHessian Robust Quantization\u201d) fixes the <b>\u201clow error, high loss\u201d</b> paradox in ' +
+  _show = createShowcase(_ctx, {
+    id: ID, title: TITLE, accent: "#5b8dee",
+    badge: _badge,
+    chips: [{ label: "MODELED", text: "hessian-conditioned quant", name: "hl" }],
+    legend: ["MEASURED", "MODELED"],
+    description:
+      'HeRo-Q (\u201cHessian Robust Quantization\u201d) fixes the <b>\u201clow error, high loss\u201d</b> paradox in ' +
     'low-bit quantization: naive rounding minimizes weight ERROR, but the loss actually depends on the ' +
     '<b>Hessian</b> \u2014 a few <b>high-curvature directions</b> (large eigenvalues) are extremely ' +
     'perturbation-sensitive. HeRo-Q applies a <b>rotation-compression</b> transform in the Hessian ' +
@@ -397,94 +386,35 @@ function _buildOverlay() {
     '<b>reduces the largest Hessian eigenvalue</b> before quantizing. Panels: Hessian spectrum ' +
     '(before vs after), weight reconstruction (raw / naive / HeRo-Q), metric bars (quant MSE & ' +
     'curvature-weighted loss ½\u00b7\u0394w\u1d40H\u0394w). Honesty label <b>MODELED</b> (deterministic mechanism ' +
-    'reproduction on a toy matrix; quantizes nothing real). 0 runtime CDN.';
-  _overlay.appendChild(sub);
-
-  const brow = document.createElement("div");
-  brow.style.cssText = "display:flex;gap:8px;align-items:center;flex-wrap:wrap";
-  if (_badge && _badge.el) brow.appendChild(_badge.el);
-  _overlay.appendChild(brow);
-
-  const card = document.createElement("div");
-  card.style.cssText = "background:#0a1117;border:1px solid #1d2a36;border-radius:9px;padding:9px 10px;display:flex;flex-direction:column;gap:6px";
-
-  const chead = document.createElement("div");
-  chead.style.cssText = "display:flex;align-items:center;gap:8px;flex-wrap:wrap";
-  const dot = document.createElement("span");
-  dot.style.cssText = "width:9px;height:9px;border-radius:50%;background:#3af4c8;box-shadow:0 0 7px #3af4c8";
-  const nm = document.createElement("b");
-  nm.style.cssText = "font-size:12px;color:#3af4c8;letter-spacing:.3px";
-  nm.textContent = "hero-q hessian-conditioned quantization";
-  chead.appendChild(dot); chead.appendChild(nm);
-  card.appendChild(chead);
-
-  const grid = document.createElement("div");
-  grid.style.cssText = "display:grid;grid-template-columns:1fr;gap:4px";
-
-  function kpiRow(id, label) {
-    const r = document.createElement("div");
-    r.style.cssText = "display:flex;justify-content:space-between;gap:10px;font-size:11px";
-    const l = document.createElement("span"); l.style.cssText = "color:#9fb1bf"; l.textContent = label;
-    const v = document.createElement("b");
-    v.id = id;
-    v.style.cssText = "font-variant-numeric:tabular-nums;color:#eef3f6;text-align:right;max-width:56%";
-    v.textContent = "\u2014";
-    _el[id] = v;
-    r.appendChild(l); r.appendChild(v); return r;
-  }
-
-  grid.appendChild(kpiRow("hq-size",  "weight / Hessian size"));
-  grid.appendChild(kpiRow("hq-bits",  "quantization bits (levels)"));
-  grid.appendChild(kpiRow("hq-eigb",  "max Hessian \u03bb \u2014 BEFORE"));
-  grid.appendChild(kpiRow("hq-eiga",  "max Hessian \u03bb \u2014 AFTER"));
-  grid.appendChild(kpiRow("hq-eigr",  "eigenvalue reduction"));
-  grid.appendChild(kpiRow("hq-cond",  "condition \u03ba (before \u2192 after)"));
-  grid.appendChild(kpiRow("hq-msen",  "quant MSE \u2014 naive"));
-  grid.appendChild(kpiRow("hq-mseh",  "quant MSE \u2014 HeRo-Q"));
-  grid.appendChild(kpiRow("hq-lossn", "loss-proxy \u00bd\u0394w\u1d40H\u0394w \u2014 naive"));
-  grid.appendChild(kpiRow("hq-lossh", "loss-proxy \u00bd\u0394w\u1d40H\u0394w \u2014 HeRo-Q"));
-  grid.appendChild(kpiRow("hq-lossr", "loss reduction"));
-  grid.appendChild(kpiRow("hq-para",  "\u201clow error, high loss\u201d (naive)"));
-  grid.appendChild(kpiRow("hq-label", "honesty label"));
-  card.appendChild(grid);
-
-  const fn = document.createElement("div");
-  fn.style.cssText = "font-size:9.5px;color:#6b7a86;line-height:1.5";
-  fn.textContent = "HeRo-Q \u2014 Zhang, Jinhao et al. \u201cHeRo-Q: A General Framework for Stable Low Bit Quantization via Hessian Conditioning\u201d arXiv:2601.21626. MODELED \u00b7 Hessian-conditioning demo on a toy matrix, not a trained model. Does NOT reproduce the GSM8K/Llama3-8B numbers.";
-  card.appendChild(fn);
-  _overlay.appendChild(card);
-
-  const pl = document.createElement("button");
-  pl.textContent = "\u25d1 what this means";
-  pl.title = "Toggle plain-language explanation for investors & consumers.";
-  pl.style.cssText = "font:11px ui-monospace,monospace;padding:5px 11px;border-radius:7px;border:1px solid #3af4c8;background:#08140f;color:#3af4c8;cursor:pointer;width:fit-content";
-  pl.addEventListener("click", () => {
-    _plain = !_plain;
-    pl.style.background = _plain ? "#0f2a20" : "#08140f";
-    _applyPlain();
+    'reproduction on a toy matrix; quantizes nothing real). 0 runtime CDN.',
+    citations:
+      "HeRo-Q \u2014 Zhang, Jinhao et al. \u201cHeRo-Q: A General Framework for Stable Low Bit Quantization via Hessian Conditioning\u201d arXiv:2601.21626. MODELED \u00b7 Hessian-conditioning demo on a toy matrix, not a trained model. Does NOT reproduce the GSM8K/Llama3-8B numbers.",
+    plain: { html: _plainHtml },
   });
-  _overlay.appendChild(pl);
 
-  const pd = document.createElement("div");
-  pd.id = "hq-plain";
-  pd.style.cssText = "font-size:10.5px;color:#c9d6df;line-height:1.55;border:1px dashed #26333f;border-radius:7px;padding:7px 9px;display:none";
-  _el["plain"] = pd;
-  _overlay.appendChild(pd);
+  _el["hq-size"]  = _show.addField("weight / Hessian size");
+  _el["hq-bits"]  = _show.addField("quantization bits (levels)");
+  _el["hq-eigb"]  = _show.addField("max Hessian \u03bb \u2014 BEFORE");
+  _el["hq-eiga"]  = _show.addField("max Hessian \u03bb \u2014 AFTER");
+  _el["hq-eigr"]  = _show.addField("eigenvalue reduction");
+  _el["hq-cond"]  = _show.addField("condition \u03ba (before \u2192 after)");
+  _el["hq-msen"]  = _show.addField("quant MSE \u2014 naive");
+  _el["hq-mseh"]  = _show.addField("quant MSE \u2014 HeRo-Q");
+  _el["hq-lossn"] = _show.addField("loss-proxy \u00bd\u0394w\u1d40H\u0394w \u2014 naive");
+  _el["hq-lossh"] = _show.addField("loss-proxy \u00bd\u0394w\u1d40H\u0394w \u2014 HeRo-Q");
+  _el["hq-lossr"] = _show.addField("loss reduction");
+  _el["hq-para"]  = _show.addField("\u201clow error, high loss\u201d (naive)");
+  _el["hq-label"] = _show.addField("honesty label");
 
-  (ctx.container || document.body).appendChild(_overlay);
   _paintOverlay();
 }
 
-function _applyPlain() {
-  const pd = _el["plain"];
-  if (!pd) return;
-  pd.style.display = _plain ? "block" : "none";
-  if (!_plain) return;
+function _plainHtml() {
   const eb  = S.maxBefore != null ? S.maxBefore.toFixed(1) : "loading\u2026";
   const ea  = S.maxAfter  != null ? S.maxAfter.toFixed(2)  : "loading\u2026";
   const er  = S.eigRed    != null ? S.eigRed.toFixed(1) + "\u00d7" : "loading\u2026";
   const lr  = S.lossRed   != null ? S.lossRed.toFixed(1) + "\u00d7" : "loading\u2026";
-  pd.innerHTML =
+  return (
     "<b>What this means:</b> To make a big model small and fast, we store its numbers with very few " +
     "bits \u2014 like rounding prices to the nearest dollar. Plain rounding keeps the <b>numbers</b> close, " +
     "but the model can still get much <b>worse</b>, because a few \u201cstiff\u201d directions matter far more " +
@@ -497,7 +427,7 @@ function _applyPlain() {
     "<b>MODELED</b> deterministic reproduction of that turn-and-rescale MECHANISM on a small synthetic " +
     "matrix \u2014 it <b>quantizes no real model</b> and runs no benchmark. The paper\u2019s headline " +
     "\u201c70.15% GSM8K on Llama3-8B at 3-bit\u201d is a <b>claim about a real model</b> the estate does not " +
-    "independently verify.";
+    "independently verify.");
 }
 
 function _tok(s) {
@@ -527,7 +457,7 @@ function _paintOverlay() {
   _set("hq-para",  t || (S.paradox != null ? (S.paradox ? "PRESENT \u2192 fixed" : "\u2014") : "\u2014"));
   // honesty label verbatim — never upgraded
   _set("hq-label", t || (S.label || "MODELED"));
-  if (_plain) _applyPlain();
+  if (_show) { _show.setChip("hl", S.label || "MODELED", { text: "hessian-conditioned quant" }); _show.refreshPlain(); }
 }
 
 // =============================================================================
@@ -535,7 +465,7 @@ function _paintOverlay() {
 // =============================================================================
 export function unmount() {
   _polls.forEach((p) => { try { p.stop(); } catch (_) {} }); _polls = [];
-  try { if (_overlay && _overlay.parentNode) _overlay.parentNode.removeChild(_overlay); } catch (_) {}
+  try { if (_show) _show.destroy(); } catch (_) {}
   try {
     if (_group && _stage) {
       _group.traverse((o) => {
@@ -548,12 +478,12 @@ export function unmount() {
       _stage.scene.remove(_group);
     }
   } catch (_) {}
-  _group = _overlay = null;
+  _group = _show = null;
   _floor = null;
   _specGroup = null; _specBefore = []; _specAfter = [];
   _wGroup = null;
   _barGroup = null; _barMseN = _barMseH = _barLossN = _barLossH = null;
-  _el = {}; _badge = null; _plain = false; _frameReg = false;
+  _el = {}; _badge = null; _frameReg = false;
   _stage = _THREE = _ctx = null;
   S.label = S.size = S.bits = S.levels = null;
   S.eigs = null;

static/3d/surfaces/hrm.js

@@ -49,6 +49,8 @@
 // DOCTRINE v11: degrades gracefully (grey) on 404/error; honesty label still
 //   shown. Nothing here is in the locked-8. Λ stays Conjecture 1. Trust never 100%.
 
+import { createShowcase } from "./_showcase.js";
+
 const ID    = "hrm";
 const TITLE = "Hierarchical Reasoning Model · H-slow / L-fast (live)";
 
@@ -69,9 +71,8 @@ const MAX_N     = 9;    // largest grid side we pre-allocate cells for
 const CELL      = 1.15; // world-units between grid cells
 const MAX_CELLS = MAX_N * MAX_N;
 
-let _stage = null, _THREE = null, _ctx = null, _group = null, _overlay = null;
+let _stage = null, _THREE = null, _ctx = null, _group = null, _show = null;
 let _frameReg = false, _polls = [], _el = {}, _badge = null;
-let _plain = false;
 
 // geometry handles
 let _floor     = null;
@@ -300,31 +301,22 @@ function _onFrame() {
 // overlay
 // =============================================================================
 function _buildOverlay() {
-  const ctx = _ctx;
-  _overlay = document.createElement("div");
-  Object.assign(_overlay.style, {
-    position: "absolute", left: "14px", top: "14px", zIndex: "6",
-    display: "flex", flexDirection: "column", gap: "8px",
-    maxWidth: "min(94%,470px)",
-    font: "12px ui-sans-serif,system-ui,Segoe UI,Roboto,Arial",
-    color: "#eef3f6",
+  _show = createShowcase(_ctx, {
+    id: ID, title: TITLE, accent: "#5b8dee",
+    badge: _badge,
+    chips: [{ label: "MODELED", text: "hierarchical reasoning model", name: "hl" }],
+    legend: ["MODELED"],
+    description:
+      'Two interdependent recurrent modules at different timescales solve a mini-Sudoku: a ' +
+      '<b>fast low-level executor (L)</b> propagates local cell constraints to convergence, and a ' +
+      '<b>slow high-level planner (H)</b> advances an abstract plan once per tick and nudges the ' +
+      'executor when it stalls. Cells glow <b>teal</b> as they solve. ' +
+      'Honesty label <b>MODELED</b> (deterministic control-loop simulation on a toy grid; NOT the HRM network). 0 runtime CDN.',
+    citations:
+      "Wang et al. arXiv:2506.21734 (HRM) · github.com/sapientinc/HRM · ARC Prize analysis arcprize.org/blog/hrm-analysis. MODELED · not claimed-as.",
+    plain: { html: _plainHtml },
   });
 
-  const h = document.createElement("div");
-  h.style.cssText = "font:600 13px ui-sans-serif,system-ui;letter-spacing:.4px";
-  h.textContent = TITLE;
-  _overlay.appendChild(h);
-
-  const sub = document.createElement("div");
-  sub.style.cssText = "color:#9fb1bf;font-size:11px;line-height:1.55";
-  sub.innerHTML =
-    'Two interdependent recurrent modules at different timescales solve a mini-Sudoku: a ' +
-    '<b>fast low-level executor (L)</b> propagates local cell constraints to convergence, and a ' +
-    '<b>slow high-level planner (H)</b> advances an abstract plan once per tick and nudges the ' +
-    'executor when it stalls. Cells glow <b>teal</b> as they solve. ' +
-    'Honesty label <b>MODELED</b> (deterministic control-loop simulation on a toy grid; NOT the HRM network). 0 runtime CDN.';
-  _overlay.appendChild(sub);
-
   // explicit honesty-caveat banner (the ARC Prize finding) — always shown
   const dist = document.createElement("div");
   dist.style.cssText = "font-size:10.5px;color:#c9d6df;line-height:1.5;border:1px solid #26333f;border-radius:7px;padding:7px 9px;background:#0a1117";
@@ -336,90 +328,28 @@ function _buildOverlay() {
     'drivers were an <b>outer refinement loop</b>, heavy <b>data augmentation</b>, and a per-task ' +
     '<b>puzzle-embedding</b>. So this organ shows the H/L result <i>beside</i> a size-matched ' +
     '<b>flat baseline</b> (violet bar) \u2014 they end up nearly equal. We do <i>not</i> overclaim the hierarchy.';
-  _overlay.appendChild(dist);
-
-  const brow = document.createElement("div");
-  brow.style.cssText = "display:flex;gap:8px;align-items:center;flex-wrap:wrap";
-  if (_badge && _badge.el) brow.appendChild(_badge.el);
-  _overlay.appendChild(brow);
-
-  const card = document.createElement("div");
-  card.style.cssText = "background:#0a1117;border:1px solid #1d2a36;border-radius:9px;padding:9px 10px;display:flex;flex-direction:column;gap:6px";
-
-  const chead = document.createElement("div");
-  chead.style.cssText = "display:flex;align-items:center;gap:8px;flex-wrap:wrap";
-  const dot = document.createElement("span");
-  dot.style.cssText = "width:9px;height:9px;border-radius:50%;background:#3af4c8;box-shadow:0 0 7px #3af4c8";
-  const nm = document.createElement("b");
-  nm.style.cssText = "font-size:12px;color:#3af4c8;letter-spacing:.3px";
-  nm.textContent = "hierarchical reasoning model";
-  chead.appendChild(dot); chead.appendChild(nm);
-  card.appendChild(chead);
-
-  const grid = document.createElement("div");
-  grid.style.cssText = "display:grid;grid-template-columns:1fr;gap:4px";
-
-  function kpiRow(id, label) {
-    const r = document.createElement("div");
-    r.style.cssText = "display:flex;justify-content:space-between;gap:10px;font-size:11px";
-    const l = document.createElement("span"); l.style.cssText = "color:#9fb1bf"; l.textContent = label;
-    const v = document.createElement("b");
-    v.id = id;
-    v.style.cssText = "font-variant-numeric:tabular-nums;color:#eef3f6;text-align:right;max-width:58%";
-    v.textContent = "\u2014";
-    _el[id] = v;
-    r.appendChild(l); r.appendChild(v); return r;
-  }
-
-  grid.appendChild(kpiRow("hrm-grid",     "puzzle (mini-Sudoku n\u00d7n)"));
-  grid.appendChild(kpiRow("hrm-clues",    "clues / empty at start"));
-  grid.appendChild(kpiRow("hrm-hsolved",  "H/L hierarchical: solved?"));
-  grid.appendChild(kpiRow("hrm-hticks",   "H-slow ticks used"));
-  grid.appendChild(kpiRow("hrm-hupdates", "H/L total updates \u2014 MODELED"));
-  grid.appendChild(kpiRow("hrm-fsolved",  "flat baseline (size-matched): solved?"));
-  grid.appendChild(kpiRow("hrm-fupdates", "flat total updates \u2014 MODELED"));
-  grid.appendChild(kpiRow("hrm-ratio",    "updates ratio (hier / flat)"));
-  grid.appendChild(kpiRow("hrm-verdict",  "honest verdict"));
-  grid.appendChild(kpiRow("hrm-label",    "honesty label"));
-  card.appendChild(grid);
-
-  const fn = document.createElement("div");
-  fn.style.cssText = "font-size:9.5px;color:#6b7a86;line-height:1.5";
-  fn.textContent = "Wang et al. arXiv:2506.21734 (HRM) \u00b7 github.com/sapientinc/HRM \u00b7 ARC Prize analysis arcprize.org/blog/hrm-analysis. MODELED \u00b7 not claimed-as.";
-  card.appendChild(fn);
-  _overlay.appendChild(card);
-
-  const pl = document.createElement("button");
-  pl.textContent = "\u25d1 what this means";
-  pl.title = "Toggle plain-language explanation for investors & consumers.";
-  pl.style.cssText = "font:11px ui-monospace,monospace;padding:5px 11px;border-radius:7px;border:1px solid #3af4c8;background:#08140f;color:#3af4c8;cursor:pointer;width:fit-content";
-  pl.addEventListener("click", () => {
-    _plain = !_plain;
-    pl.style.background = _plain ? "#0f2a20" : "#08140f";
-    _applyPlain();
-  });
-  _overlay.appendChild(pl);
-
-  const pd = document.createElement("div");
-  pd.id = "hrm-plain";
-  pd.style.cssText = "font-size:10.5px;color:#c9d6df;line-height:1.55;border:1px dashed #26333f;border-radius:7px;padding:7px 9px;display:none";
-  _el["plain"] = pd;
-  _overlay.appendChild(pd);
+  _show.appendBody(dist);
+
+  _el["hrm-grid"]     = _show.addField("puzzle (mini-Sudoku n\u00d7n)");
+  _el["hrm-clues"]    = _show.addField("clues / empty at start");
+  _el["hrm-hsolved"]  = _show.addField("H/L hierarchical: solved?");
+  _el["hrm-hticks"]   = _show.addField("H-slow ticks used");
+  _el["hrm-hupdates"] = _show.addField("H/L total updates \u2014 MODELED");
+  _el["hrm-fsolved"]  = _show.addField("flat baseline (size-matched): solved?");
+  _el["hrm-fupdates"] = _show.addField("flat total updates \u2014 MODELED");
+  _el["hrm-ratio"]    = _show.addField("updates ratio (hier / flat)");
+  _el["hrm-verdict"]  = _show.addField("honest verdict");
+  _el["hrm-label"]    = _show.addField("honesty label");
 
-  (ctx.container || document.body).appendChild(_overlay);
   _paintOverlay();
 }
 
-function _applyPlain() {
-  const pd = _el["plain"];
-  if (!pd) return;
-  pd.style.display = _plain ? "block" : "none";
-  if (!_plain) return;
+function _plainHtml() {
   const nn      = S.n != null ? (S.n + "\u00d7" + S.n) : "small";
   const hSolved = S.hier && S.hier.solved ? "yes" : "not yet";
   const ratio   = S.edge && S.edge.updates_ratio != null ? S.edge.updates_ratio.toFixed(2) : "\u2248 1";
   const verdict = S.edge && typeof S.edge.verdict === "string" ? S.edge.verdict : null;
-  pd.innerHTML =
+  return (
     "<b>What this means:</b> A hard puzzle (here a " + nn + " mini-Sudoku) is solved by two " +
     "cooperating parts of one model running at different speeds: a <b>fast \u201cworker\u201d</b> that " +
     "fills in whatever cells are locally forced, and a <b>slow \u201cplanner\u201d</b> that steps back " +
@@ -435,7 +365,7 @@ function _applyPlain() {
     (verdict ? " \u2014 <i>" + verdict + "</i>" : "") + ". " +
     "The hierarchy gives a <b>small, real</b> benefit, not the dominant one the paper implies. " +
     "This whole view is a <b>MODELED</b> simulation of the control loop on a toy grid, not a run " +
-    "of the real 27M-parameter HRM network.";
+    "of the real 27M-parameter HRM network.");
 }
 
 function _tok(s) {
@@ -464,7 +394,7 @@ function _paintOverlay() {
     : "\u2014"));
   // honesty label verbatim — never upgraded
   _set("hrm-label", t || (S.label || "MODELED"));
-  if (_plain) _applyPlain();
+  if (_show) { _show.setChip("hl", S.label || "MODELED", { text: "hierarchical reasoning model" }); _show.refreshPlain(); }
 }
 
 // =============================================================================
@@ -472,7 +402,7 @@ function _paintOverlay() {
 // =============================================================================
 export function unmount() {
   _polls.forEach((p) => { try { p.stop(); } catch (_) {} }); _polls = [];
-  try { if (_overlay && _overlay.parentNode) _overlay.parentNode.removeChild(_overlay); } catch (_) {}
+  try { if (_show) _show.destroy(); } catch (_) {}
   try {
     if (_group && _stage) {
       _group.traverse((o) => {
@@ -485,9 +415,9 @@ export function unmount() {
       _stage.scene.remove(_group);
     }
   } catch (_) {}
-  _group = _overlay = null;
+  _group = _show = null;
   _floor = null; _cellMesh = []; _planBar = null; _flatBar = null; _marker = null;
-  _el = {}; _badge = null; _plain = false; _frameReg = false;
+  _el = {}; _badge = null; _frameReg = false;
   _stage = _THREE = _ctx = null;
   S.label = S.n = S.hTicks = S.lSteps = S.clues = S.emptyStart = null;
   S.hier = S.flat = S.edge = S.finalGrid = S.caveat = null;

static/3d/surfaces/inplacettt.js

@@ -53,6 +53,8 @@
 // DOCTRINE v11: degrades gracefully (grey) on 404/error; honesty label still shown.
 // Nothing here is in the locked-8. Λ stays Conjecture 1. Trust never 100%.
 
+import { createShowcase } from "./_showcase.js";
+
 const ID    = "inplacettt";
 const TITLE = "In-Place Test-Time Training · W_down as Fast Weights (live)";
 
@@ -78,9 +80,8 @@ const MAX_CURVE   = 96;     // cap on loss-curve points rendered (== payload cap
 const CURVE_SPAN  = 12.0;   // world-units the loss ribbons span along X
 const CURVE_Y     = 4.2;    // baseline height of the loss ribbons
 
-let _stage = null, _THREE = null, _ctx = null, _group = null, _overlay = null;
+let _stage = null, _THREE = null, _ctx = null, _group = null, _show = null;
 let _frameReg = false, _polls = [], _el = {}, _badge = null;
-let _plain = false;
 
 // geometry handles
 let _floor      = null;
@@ -383,114 +384,43 @@ function _onFrame() {
 // overlay
 // =============================================================================
 function _buildOverlay() {
-  const ctx = _ctx;
-  _overlay = document.createElement("div");
-  Object.assign(_overlay.style, {
-    position: "absolute", left: "14px", top: "14px", zIndex: "6",
-    display: "flex", flexDirection: "column", gap: "8px",
-    maxWidth: "min(94%,460px)",
-    font: "12px ui-sans-serif,system-ui,Segoe UI,Roboto,Arial",
-    color: "#eef3f6",
-  });
-
-  const h = document.createElement("div");
-  h.style.cssText = "font:600 13px ui-sans-serif,system-ui;letter-spacing:.4px";
-  h.textContent = TITLE;
-  _overlay.appendChild(h);
-
-  const sub = document.createElement("div");
-  sub.style.cssText = "color:#9fb1bf;font-size:11px;line-height:1.55";
-  sub.innerHTML =
-    'Test-time adaptation with <b>no new module</b>: a stock MLP block\u2019s existing ' +
-    '<b>down-projection W_down</b> is re-purposed as <b>fast weights</b> (updated at inference), ' +
-    'while <b>W_up / W_gate stay frozen</b>. The update target is built by a <b>strictly-causal</b> ' +
-    '1-D convolution over past tokens (no future leakage), and one gradient step runs <b>per chunk</b>. ' +
-    'The <b>adapting</b> run\u2019s next-token loss <b>falls</b>; the <b>frozen-W_down control</b> stays <b>flat</b>. ' +
-    'Honesty label <b>MODELED</b> (inspired-not-real toy simulation; NOT the ByteDance model). 0 runtime CDN.';
-  _overlay.appendChild(sub);
-
-  const brow = document.createElement("div");
-  brow.style.cssText = "display:flex;gap:8px;align-items:center;flex-wrap:wrap";
-  if (_badge && _badge.el) brow.appendChild(_badge.el);
-  _overlay.appendChild(brow);
-
-  const card = document.createElement("div");
-  card.style.cssText = "background:#0a1117;border:1px solid #1d2a36;border-radius:9px;padding:9px 10px;display:flex;flex-direction:column;gap:6px";
-
-  const chead = document.createElement("div");
-  chead.style.cssText = "display:flex;align-items:center;gap:8px;flex-wrap:wrap";
-  const dot = document.createElement("span");
-  dot.style.cssText = "width:9px;height:9px;border-radius:50%;background:#3af4c8;box-shadow:0 0 7px #3af4c8";
-  const nm = document.createElement("b");
-  nm.style.cssText = "font-size:12px;color:#3af4c8;letter-spacing:.3px";
-  nm.textContent = "in-place test-time training";
-  chead.appendChild(dot); chead.appendChild(nm);
-  card.appendChild(chead);
-
-  const grid = document.createElement("div");
-  grid.style.cssText = "display:grid;grid-template-columns:1fr;gap:4px";
-
-  function kpiRow(id, label) {
-    const r = document.createElement("div");
-    r.style.cssText = "display:flex;justify-content:space-between;gap:10px;font-size:11px";
-    const l = document.createElement("span"); l.style.cssText = "color:#9fb1bf"; l.textContent = label;
-    const v = document.createElement("b");
-    v.id = id;
-    v.style.cssText = "font-variant-numeric:tabular-nums;color:#eef3f6;text-align:right;max-width:58%";
-    v.textContent = "\u2014";
-    _el[id] = v;
-    r.appendChild(l); r.appendChild(v); return r;
-  }
-
-  grid.appendChild(kpiRow("ip-fast",   "fast weights (mutated)"));
-  grid.appendChild(kpiRow("ip-frozen", "frozen slow weights"));
-  grid.appendChild(kpiRow("ip-chunks", "chunks \u00d7 chunk_size"));
-  grid.appendChild(kpiRow("ip-lr",     "learning_rate (per chunk)"));
-  grid.appendChild(kpiRow("ip-causal", "causal guard (no future leak)"));
-  grid.appendChild(kpiRow("ip-adapt",  "adapt loss (start \u2192 end) \u2014 MODELED"));
-  grid.appendChild(kpiRow("ip-frozenl","frozen-control loss (flat)"));
-  grid.appendChild(kpiRow("ip-improve","improvement (adapting advantage)"));
-  grid.appendChild(kpiRow("ip-delta",  "W_down movement (L1)"));
-  grid.appendChild(kpiRow("ip-label",  "honesty label"));
-  card.appendChild(grid);
-
-  const fn = document.createElement("div");
-  fn.style.cssText = "font-size:9.5px;color:#6b7a86;line-height:1.5";
-  fn.textContent = "Feng et al. 2026 (ByteDance Seed + Peking Univ) \u00b7 In-Place Test-Time Training \u00b7 arXiv:2604.06169 (ICLR 2026 Oral) \u00b7 github.com/ByteDance-Seed/In-Place-TTT. MODELED \u00b7 inspired-not-real \u00b7 not claimed-as.";
-  card.appendChild(fn);
-  _overlay.appendChild(card);
-
-  const pl = document.createElement("button");
-  pl.textContent = "\u25d1 what this means";
-  pl.title = "Toggle plain-language explanation for investors & consumers.";
-  pl.style.cssText = "font:11px ui-monospace,monospace;padding:5px 11px;border-radius:7px;border:1px solid #3af4c8;background:#08140f;color:#3af4c8;cursor:pointer;width:fit-content";
-  pl.addEventListener("click", () => {
-    _plain = !_plain;
-    pl.style.background = _plain ? "#0f2a20" : "#08140f";
-    _applyPlain();
+  _show = createShowcase(_ctx, {
+    id: ID, title: TITLE, accent: "#5b8dee",
+    badge: _badge,
+    chips: [{ label: "MODELED", text: "in-place test-time training", name: "hl" }],
+    legend: ["MODELED"],
+    description:
+      'Test-time adaptation with <b>no new module</b>: a stock MLP block\u2019s existing ' +
+      '<b>down-projection W_down</b> is re-purposed as <b>fast weights</b> (updated at inference), ' +
+      'while <b>W_up / W_gate stay frozen</b>. The update target is built by a <b>strictly-causal</b> ' +
+      '1-D convolution over past tokens (no future leakage), and one gradient step runs <b>per chunk</b>. ' +
+      'The <b>adapting</b> run\u2019s next-token loss <b>falls</b>; the <b>frozen-W_down control</b> stays <b>flat</b>. ' +
+      'Honesty label <b>MODELED</b> (inspired-not-real toy simulation; NOT the ByteDance model). 0 runtime CDN.',
+    citations:
+      "Feng et al. 2026 (ByteDance Seed + Peking Univ) \u00b7 In-Place Test-Time Training \u00b7 arXiv:2604.06169 (ICLR 2026 Oral) \u00b7 github.com/ByteDance-Seed/In-Place-TTT. MODELED \u00b7 inspired-not-real \u00b7 not claimed-as.",
+    plain: { html: _plainHtml },
   });
-  _overlay.appendChild(pl);
 
-  const pd = document.createElement("div");
-  pd.id = "ip-plain";
-  pd.style.cssText = "font-size:10.5px;color:#c9d6df;line-height:1.55;border:1px dashed #26333f;border-radius:7px;padding:7px 9px;display:none";
-  _el["plain"] = pd;
-  _overlay.appendChild(pd);
+  _el["ip-fast"]    = _show.addField("fast weights (mutated)");
+  _el["ip-frozen"]  = _show.addField("frozen slow weights");
+  _el["ip-chunks"]  = _show.addField("chunks \u00d7 chunk_size");
+  _el["ip-lr"]      = _show.addField("learning_rate (per chunk)");
+  _el["ip-causal"]  = _show.addField("causal guard (no future leak)");
+  _el["ip-adapt"]   = _show.addField("adapt loss (start \u2192 end) \u2014 MODELED");
+  _el["ip-frozenl"] = _show.addField("frozen-control loss (flat)");
+  _el["ip-improve"] = _show.addField("improvement (adapting advantage)");
+  _el["ip-delta"]   = _show.addField("W_down movement (L1)");
+  _el["ip-label"]   = _show.addField("honesty label");
 
-  (ctx.container || document.body).appendChild(_overlay);
   _paintOverlay();
 }
 
-function _applyPlain() {
-  const pd = _el["plain"];
-  if (!pd) return;
-  pd.style.display = _plain ? "block" : "none";
-  if (!_plain) return;
+function _plainHtml() {
   const chunks = S.numChunks   != null ? String(S.numChunks) : "loading\u2026";
   const aS = S.adaptStart != null ? S.adaptStart.toFixed(4) : "loading\u2026";
   const aE = S.adaptEnd   != null ? S.adaptEnd.toFixed(4)   : "loading\u2026";
   const fE = S.frozenEnd  != null ? S.frozenEnd.toFixed(4)  : "loading\u2026";
-  pd.innerHTML =
+  return (
     "<b>What this means:</b> Normally an AI model\u2019s weights are <b>frozen</b> once training ends \u2014 " +
     "it can\u2019t learn anything new while it answers you. In-Place Test-Time Training lets the model " +
     "keep learning <i>as it reads</i>, <b>without bolting on any new part</b>: it quietly re-uses one " +
@@ -504,7 +434,7 @@ function _applyPlain() {
     "ByteDance model</b> and does <b>NOT</b> reproduce the paper\u2019s 128k-context or 4B-parameter results; " +
     "the loss drop is a qualitative demonstration on a controlled stream, not a benchmark claim. " +
     "(Different from <b>titans</b>, which adds a whole new memory module, and from <b>testtime</b>, which " +
-    "just spends more compute without changing any weights \u2014 here an existing weight actually moves.)";
+    "just spends more compute without changing any weights \u2014 here an existing weight actually moves.)");
 }
 
 function _tok(s) {
@@ -535,7 +465,7 @@ function _paintOverlay() {
   _set("ip-delta",  t || fx(S.deltaNorm, 3));
   // honesty label verbatim — never upgraded
   _set("ip-label", t || (S.label || "MODELED"));
-  if (_plain) _applyPlain();
+  if (_show) { _show.setChip("hl", S.label || "MODELED", { text: "in-place test-time training" }); _show.refreshPlain(); }
 }
 
 // =============================================================================
@@ -543,7 +473,7 @@ function _paintOverlay() {
 // =============================================================================
 export function unmount() {
   _polls.forEach((p) => { try { p.stop(); } catch (_) {} }); _polls = [];
-  try { if (_overlay && _overlay.parentNode) _overlay.parentNode.removeChild(_overlay); } catch (_) {}
+  try { if (_show) _show.destroy(); } catch (_) {}
   try {
     if (_group && _stage) {
       _group.traverse((o) => {
@@ -556,10 +486,10 @@ export function unmount() {
       _stage.scene.remove(_group);
     }
   } catch (_) {}
-  _group = _overlay = null;
+  _group = _show = null;
   _floor = null; _lattice = []; _upBar = null; _gateBar = null;
   _adaptLine = null; _frozenLine = null; _core = null;
-  _el = {}; _badge = null; _plain = false; _frameReg = false;
+  _el = {}; _badge = null; _frameReg = false;
   _stage = _THREE = _ctx = null;
   S.label = S.dModel = S.dFf = S.vocab = null;
   S.chunkSize = S.numChunks = S.learningRate = null;

static/3d/surfaces/interpretability.js

@@ -36,6 +36,8 @@
 // 0 RUNTIME CDN. Vendored three.js r170 via page importmap.
 // DOCTRINE v11: degrades gracefully (grey) on 404/error; honesty label still shown.
 
+import { createShowcase } from "./_showcase.js";
+
 const ID    = "interpretability";
 const TITLE = "Interpretability · Sparse-Autoencoder Features (live)";
 
@@ -59,9 +61,8 @@ const C_GRID   = 0x1b3a44;  // floor / link colour
 const N_SLOTS = 16;   // visual dictionary slots on the ring (matches endpoint feature bank)
 const RADIUS  = 4.2;  // world-unit ring radius
 
-let _stage = null, _THREE = null, _ctx = null, _group = null, _overlay = null;
+let _stage = null, _THREE = null, _ctx = null, _group = null, _show = null;
 let _frameReg = false, _polls = [], _el = {}, _badge = null;
-let _plain = false;
 
 // geometry handles
 let _slots = [];        // Array<THREE.Mesh> — one per dictionary slot on the ring
@@ -270,106 +271,35 @@ function _onFrame() {
 // overlay
 // =============================================================================
 function _buildOverlay() {
-  const ctx = _ctx;
-  _overlay = document.createElement("div");
-  Object.assign(_overlay.style, {
-    position: "absolute", left: "14px", top: "14px", zIndex: "6",
-    display: "flex", flexDirection: "column", gap: "8px",
-    maxWidth: "min(94%,440px)",
-    font: "12px ui-sans-serif,system-ui,Segoe UI,Roboto,Arial",
-    color: "#eef3f6",
-  });
-
-  const h = document.createElement("div");
-  h.style.cssText = "font:600 13px ui-sans-serif,system-ui;letter-spacing:.4px";
-  h.textContent = TITLE;
-  _overlay.appendChild(h);
-
-  const sub = document.createElement("div");
-  sub.style.cssText = "color:#9fb1bf;font-size:11px;line-height:1.55";
-  sub.innerHTML =
-    'A <b>JumpReLU sparse autoencoder</b> decomposes a model\u2019s internal activation into a ' +
-    'few human-readable <b>features</b>; each fired feature is a node on the ring, and we ' +
-    '<b>causally ablate</b> it to measure the output shift (KL). Honesty label <b>MODELED</b> ' +
-    '(a simulation of the method \u2014 no proprietary weights, no measured logits). 0 runtime CDN.';
-  _overlay.appendChild(sub);
-
-  const brow = document.createElement("div");
-  brow.style.cssText = "display:flex;gap:8px;align-items:center;flex-wrap:wrap";
-  if (_badge && _badge.el) brow.appendChild(_badge.el);
-  _overlay.appendChild(brow);
-
-  const card = document.createElement("div");
-  card.style.cssText = "background:#0a1117;border:1px solid #1d2a36;border-radius:9px;padding:9px 10px;display:flex;flex-direction:column;gap:6px";
-
-  const chead = document.createElement("div");
-  chead.style.cssText = "display:flex;align-items:center;gap:8px;flex-wrap:wrap";
-  const dot = document.createElement("span");
-  dot.style.cssText = "width:9px;height:9px;border-radius:50%;background:#5b8dee;box-shadow:0 0 7px #5b8dee";
-  const nm = document.createElement("b");
-  nm.style.cssText = "font-size:12px;color:#5b8dee;letter-spacing:.3px";
-  nm.textContent = "interpretability";
-  chead.appendChild(dot); chead.appendChild(nm);
-  card.appendChild(chead);
-
-  const grid = document.createElement("div");
-  grid.style.cssText = "display:grid;grid-template-columns:1fr;gap:4px";
-
-  function kpiRow(id, label) {
-    const r = document.createElement("div");
-    r.style.cssText = "display:flex;justify-content:space-between;gap:10px;font-size:11px";
-    const l = document.createElement("span"); l.style.cssText = "color:#9fb1bf"; l.textContent = label;
-    const v = document.createElement("b");
-    v.id = id;
-    v.style.cssText = "font-variant-numeric:tabular-nums;color:#eef3f6;text-align:right;max-width:58%";
-    v.textContent = "\u2014";
-    _el[id] = v;
-    r.appendChild(l); r.appendChild(v); return r;
-  }
-
-  grid.appendChild(kpiRow("ip-l0",     "L0 sparsity (active / dict)"));
-  grid.appendChild(kpiRow("ip-active", "active features"));
-  grid.appendChild(kpiRow("ip-recon",  "reconstruction cos \u2014 MODELED"));
-  grid.appendChild(kpiRow("ip-topf",   "top feature (by causal KL)"));
-  grid.appendChild(kpiRow("ip-label",  "honesty label"));
-  card.appendChild(grid);
-
-  const fn = document.createElement("div");
-  fn.style.cssText = "font-size:9.5px;color:#6b7a86;line-height:1.5";
-  fn.textContent = "Cunningham et al. arXiv:2309.08600 \u00b7 Rajamanoharan et al. arXiv:2407.14435 (JumpReLU) \u00b7 Marks et al. arXiv:2406.02395 (sparse feature circuits) \u00b7 Anthropic transformer-circuits.pub. MODELED \u00b7 not claimed-as.";
-  card.appendChild(fn);
-  _overlay.appendChild(card);
-
-  const pl = document.createElement("button");
-  pl.textContent = "\u25d1 what this means";
-  pl.title = "Toggle plain-language explanation for investors & consumers.";
-  pl.style.cssText = "font:11px ui-monospace,monospace;padding:5px 11px;border-radius:7px;border:1px solid #3af4c8;background:#08140f;color:#3af4c8;cursor:pointer;width:fit-content";
-  pl.addEventListener("click", () => {
-    _plain = !_plain;
-    pl.style.background = _plain ? "#0f2a20" : "#08140f";
-    _applyPlain();
+  _show = createShowcase(_ctx, {
+    id: ID, title: TITLE, accent: "#5b8dee",
+    badge: _badge,
+    chips: [{ label: "MODELED", text: "interpretability", name: "hl" }],
+    legend: ["MODELED"],
+    description:
+      'A <b>JumpReLU sparse autoencoder</b> decomposes a model\u2019s internal activation into a ' +
+      'few human-readable <b>features</b>; each fired feature is a node on the ring, and we ' +
+      '<b>causally ablate</b> it to measure the output shift (KL). Honesty label <b>MODELED</b> ' +
+      '(a simulation of the method \u2014 no proprietary weights, no measured logits). 0 runtime CDN.',
+    citations:
+      "Cunningham et al. arXiv:2309.08600 \u00b7 Rajamanoharan et al. arXiv:2407.14435 (JumpReLU) \u00b7 Marks et al. arXiv:2406.02395 (sparse feature circuits) \u00b7 Anthropic transformer-circuits.pub. MODELED \u00b7 not claimed-as.",
+    plain: { html: _plainHtml },
   });
-  _overlay.appendChild(pl);
 
-  const pd = document.createElement("div");
-  pd.id = "ip-plain";
-  pd.style.cssText = "font-size:10.5px;color:#c9d6df;line-height:1.55;border:1px dashed #26333f;border-radius:7px;padding:7px 9px;display:none";
-  _el["plain"] = pd;
-  _overlay.appendChild(pd);
+  _el["ip-l0"]     = _show.addField("L0 sparsity (active / dict)");
+  _el["ip-active"] = _show.addField("active features");
+  _el["ip-recon"]  = _show.addField("reconstruction cos \u2014 MODELED");
+  _el["ip-topf"]   = _show.addField("top feature (by causal KL)");
+  _el["ip-label"]  = _show.addField("honesty label");
 
-  (ctx.container || document.body).appendChild(_overlay);
   _paintOverlay();
 }
 
-function _applyPlain() {
-  const pd = _el["plain"];
-  if (!pd) return;
-  pd.style.display = _plain ? "block" : "none";
-  if (!_plain) return;
+function _plainHtml() {
   const act = S.active != null ? String(S.active) : "loading\u2026";
   const l0  = S.l0 != null ? (S.l0 * 100).toFixed(3) + "% of the dictionary" : "loading\u2026";
   const top = (S.top && S.top[0] && S.top[0].feature) ? S.top[0].feature : "loading\u2026";
-  pd.innerHTML =
+  return (
     "<b>What this means:</b> Instead of treating the model as a black box, a sparse " +
     "autoencoder breaks one internal activation into a handful of named, human-readable " +
     "<b>features</b> \u2014 here <b>" + act + "</b> fired (only <b>" + l0 + "</b>). " +
@@ -377,7 +307,7 @@ function _applyPlain() {
     "the model\u2019s output the most. " +
     "Plain: this is how you audit <i>why</i> an AI produced an answer and prove which internal " +
     "concept drove it \u2014 but this view is a <b>MODELED</b> simulation of the technique, not a " +
-    "readout from a live production model.";
+    "readout from a live production model.");
 }
 
 function _tok(s) {
@@ -400,7 +330,7 @@ function _paintOverlay() {
   _set("ip-topf",   t || (top0 ? (top0.feature + "  (KL " + fx(top0.causal_ablation_kl, 3) + ")") : "\u2014"));
   // honesty label verbatim — never upgraded
   _set("ip-label",  t || (S.label || "MODELED"));
-  if (_plain) _applyPlain();
+  if (_show) { _show.setChip("hl", S.label || "MODELED", { text: "interpretability" }); _show.refreshPlain(); }
 }
 
 // =============================================================================
@@ -408,7 +338,7 @@ function _paintOverlay() {
 // =============================================================================
 export function unmount() {
   _polls.forEach((p) => { try { p.stop(); } catch (_) {} }); _polls = [];
-  try { if (_overlay && _overlay.parentNode) _overlay.parentNode.removeChild(_overlay); } catch (_) {}
+  try { if (_show) _show.destroy(); } catch (_) {}
   try {
     if (_group && _stage) {
       _group.traverse((o) => {
@@ -421,9 +351,9 @@ export function unmount() {
       _stage.scene.remove(_group);
     }
   } catch (_) {}
-  _group = _overlay = null;
+  _group = _show = null;
   _slots = []; _links = null; _hub = null; _ring = null;
-  _el = {}; _badge = null; _plain = false; _frameReg = false;
+  _el = {}; _badge = null; _frameReg = false;
   _stage = _THREE = _ctx = null;
   S.label = S.l0 = S.active = S.recon = S.top = null;
   S.state = "init";

static/3d/surfaces/kan.js

@@ -36,6 +36,8 @@
 // DOCTRINE v11: degrades gracefully (grey) on 404/error; honesty label still shown.
 // Nothing here is in the locked-8. Lambda stays Conjecture 1. Trust never 100%.
 
+import { createShowcase } from "./_showcase.js";
+
 const ID    = "kan";
 const TITLE = "Kolmogorov-Arnold Network · Per-Edge Splines (live)";
 
@@ -57,9 +59,8 @@ const NODE_GAP    = 1.6;   // world-units between nodes within a layer (Y)
 const MAX_HIDDEN  = 8;     // pre-allocated hidden-node capacity (perf cap)
 const CURVE_SEGS  = 23;    // spline sample segments per edge (matches server's 24 samples)
 
-let _stage = null, _THREE = null, _ctx = null, _group = null, _overlay = null;
+let _stage = null, _THREE = null, _ctx = null, _group = null, _show = null;
 let _frameReg = false, _polls = [], _el = {}, _badge = null;
-let _plain = false;
 let _markerBaseScale = 1.0;
 
 // geometry handles
@@ -326,109 +327,38 @@ function _onFrame() {
 // overlay
 // =============================================================================
 function _buildOverlay() {
-  const ctx = _ctx;
-  _overlay = document.createElement("div");
-  Object.assign(_overlay.style, {
-    position: "absolute", left: "14px", top: "14px", zIndex: "6",
-    display: "flex", flexDirection: "column", gap: "8px",
-    maxWidth: "min(94%,460px)",
-    font: "12px ui-sans-serif,system-ui,Segoe UI,Roboto,Arial",
-    color: "#eef3f6",
-  });
-
-  const h = document.createElement("div");
-  h.style.cssText = "font:600 13px ui-sans-serif,system-ui;letter-spacing:.4px";
-  h.textContent = TITLE;
-  _overlay.appendChild(h);
-
-  const sub = document.createElement("div");
-  sub.style.cssText = "color:#9fb1bf;font-size:11px;line-height:1.55";
-  sub.innerHTML =
-    'A <b>Kolmogorov-Arnold Network</b> puts a learnable curve (spline) on every ' +
-    '<b>edge</b> instead of a single scalar weight; nodes just sum their inputs. ' +
-    'Fitted here on the toy task <code>f(x,y)=exp(sin(\u03c0x)+y\u00b2)</code>, each curved ' +
-    'line below is one edge\u2019s own learned shape. Honesty label <b>MODELED</b> ' +
-    '(small from-scratch fit; NOT pykan). 0 runtime CDN.';
-  _overlay.appendChild(sub);
-
-  const brow = document.createElement("div");
-  brow.style.cssText = "display:flex;gap:8px;align-items:center;flex-wrap:wrap";
-  if (_badge && _badge.el) brow.appendChild(_badge.el);
-  _overlay.appendChild(brow);
-
-  const card = document.createElement("div");
-  card.style.cssText = "background:#0a1117;border:1px solid #1d2a36;border-radius:9px;padding:9px 10px;display:flex;flex-direction:column;gap:6px";
-
-  const chead = document.createElement("div");
-  chead.style.cssText = "display:flex;align-items:center;gap:8px;flex-wrap:wrap";
-  const dot = document.createElement("span");
-  dot.style.cssText = "width:9px;height:9px;border-radius:50%;background:#3af4c8;box-shadow:0 0 7px #3af4c8";
-  const nm = document.createElement("b");
-  nm.style.cssText = "font-size:12px;color:#3af4c8;letter-spacing:.3px";
-  nm.textContent = "kolmogorov-arnold network";
-  chead.appendChild(dot); chead.appendChild(nm);
-  card.appendChild(chead);
-
-  const grid = document.createElement("div");
-  grid.style.cssText = "display:grid;grid-template-columns:1fr;gap:4px";
-
-  function kpiRow(id, label) {
-    const r = document.createElement("div");
-    r.style.cssText = "display:flex;justify-content:space-between;gap:10px;font-size:11px";
-    const l = document.createElement("span"); l.style.cssText = "color:#9fb1bf"; l.textContent = label;
-    const v = document.createElement("b");
-    v.id = id;
-    v.style.cssText = "font-variant-numeric:tabular-nums;color:#eef3f6;text-align:right;max-width:58%";
-    v.textContent = "\u2014";
-    _el[id] = v;
-    r.appendChild(l); r.appendChild(v); return r;
-  }
-
-  grid.appendChild(kpiRow("kan-formula",  "target f(x,y)"));
-  grid.appendChild(kpiRow("kan-params",   "KAN params \u2014 MODELED"));
-  grid.appendChild(kpiRow("kan-mse",      "KAN final MSE"));
-  grid.appendChild(kpiRow("kan-mlpparams","MLP-baseline params"));
-  grid.appendChild(kpiRow("kan-mlpmse",   "MLP-baseline final MSE"));
-  grid.appendChild(kpiRow("kan-fewer",    "KAN fewer params?"));
-  grid.appendChild(kpiRow("kan-label",    "honesty label"));
-  card.appendChild(grid);
-
-  const fn = document.createElement("div");
-  fn.style.cssText = "font-size:9.5px;color:#6b7a86;line-height:1.5";
-  fn.textContent = "Liu et al. 2024 arXiv:2404.19756 (KAN) \u00b7 pykan github.com/KindXiaoming/pykan (reference only). MODELED \u00b7 not claimed-as.";
-  card.appendChild(fn);
-  _overlay.appendChild(card);
-
-  const pl = document.createElement("button");
-  pl.textContent = "\u25d1 what this means";
-  pl.title = "Toggle plain-language explanation for investors & consumers.";
-  pl.style.cssText = "font:11px ui-monospace,monospace;padding:5px 11px;border-radius:7px;border:1px solid #3af4c8;background:#08140f;color:#3af4c8;cursor:pointer;width:fit-content";
-  pl.addEventListener("click", () => {
-    _plain = !_plain;
-    pl.style.background = _plain ? "#0f2a20" : "#08140f";
-    _applyPlain();
+  _show = createShowcase(_ctx, {
+    id: ID, title: TITLE, accent: "#5b8dee",
+    badge: _badge,
+    chips: [{ label: "MODELED", text: "kolmogorov-arnold network", name: "hl" }],
+    legend: ["MODELED"],
+    description:
+      'A <b>Kolmogorov-Arnold Network</b> puts a learnable curve (spline) on every ' +
+      '<b>edge</b> instead of a single scalar weight; nodes just sum their inputs. ' +
+      'Fitted here on the toy task <code>f(x,y)=exp(sin(\u03c0x)+y\u00b2)</code>, each curved ' +
+      'line below is one edge\u2019s own learned shape. Honesty label <b>MODELED</b> ' +
+      '(small from-scratch fit; NOT pykan). 0 runtime CDN.',
+    citations:
+      "Liu et al. 2024 arXiv:2404.19756 (KAN) \u00b7 pykan github.com/KindXiaoming/pykan (reference only). MODELED \u00b7 not claimed-as.",
+    plain: { html: _plainHtml },
   });
-  _overlay.appendChild(pl);
 
-  const pd = document.createElement("div");
-  pd.id = "kan-plain";
-  pd.style.cssText = "font-size:10.5px;color:#c9d6df;line-height:1.55;border:1px dashed #26333f;border-radius:7px;padding:7px 9px;display:none";
-  _el["plain"] = pd;
-  _overlay.appendChild(pd);
+  _el["kan-formula"]   = _show.addField("target f(x,y)");
+  _el["kan-params"]    = _show.addField("KAN params \u2014 MODELED");
+  _el["kan-mse"]       = _show.addField("KAN final MSE");
+  _el["kan-mlpparams"] = _show.addField("MLP-baseline params");
+  _el["kan-mlpmse"]    = _show.addField("MLP-baseline final MSE");
+  _el["kan-fewer"]     = _show.addField("KAN fewer params?");
+  _el["kan-label"]     = _show.addField("honesty label");
 
-  (ctx.container || document.body).appendChild(_overlay);
   _paintOverlay();
 }
 
-function _applyPlain() {
-  const pd = _el["plain"];
-  if (!pd) return;
-  pd.style.display = _plain ? "block" : "none";
-  if (!_plain) return;
+function _plainHtml() {
   const kp = S.kanParams != null ? String(S.kanParams) : "loading\u2026";
   const mp = S.mlpParams != null ? String(S.mlpParams) : "loading\u2026";
   const km = S.kanMse != null ? S.kanMse.toFixed(4) : "loading\u2026";
-  pd.innerHTML =
+  return (
     "<b>What this means:</b> Most neural networks learn a number (a \u201cweight\u201d) for " +
     "each connection. A Kolmogorov-Arnold Network instead learns a whole <b>curve</b> for " +
     "each connection \u2014 you can see the exact shape of every one of those curves above. " +
@@ -437,7 +367,7 @@ function _applyPlain() {
     "match accuracy with fewer connections at larger scale. Here it has <b>" + kp + "</b> " +
     "learned numbers vs a same-size ordinary network's <b>" + mp + "</b>, reaching a fit " +
     "error of <b>" + km + "</b> on the toy formula shown. This view is a small, from-scratch, " +
-    "<b>MODELED</b> demonstration \u2014 not the original pykan library or a large-scale KAN.";
+    "<b>MODELED</b> demonstration \u2014 not the original pykan library or a large-scale KAN.");
 }
 
 function _tok(s) {
@@ -461,7 +391,7 @@ function _paintOverlay() {
   _set("kan-fewer",     t || (S.fewerParams === true ? "yes" : S.fewerParams === false ? "no" : "\u2014"));
   // honesty label verbatim — never upgraded
   _set("kan-label", t || (S.label || "MODELED"));
-  if (_plain) _applyPlain();
+  if (_show) { _show.setChip("hl", S.label || "MODELED", { text: "kolmogorov-arnold network" }); _show.refreshPlain(); }
 }
 
 // =============================================================================
@@ -469,7 +399,7 @@ function _paintOverlay() {
 // =============================================================================
 export function unmount() {
   _polls.forEach((p) => { try { p.stop(); } catch (_) {} }); _polls = [];
-  try { if (_overlay && _overlay.parentNode) _overlay.parentNode.removeChild(_overlay); } catch (_) {}
+  try { if (_show) _show.destroy(); } catch (_) {}
   try {
     if (_group && _stage) {
       _group.traverse((o) => {
@@ -482,10 +412,10 @@ export function unmount() {
       _stage.scene.remove(_group);
     }
   } catch (_) {}
-  _group = _overlay = null;
+  _group = _show = null;
   _floor = null; _inputNodes = []; _hiddenNodes = []; _outputNode = null;
   _edgeCurves1 = []; _edgeCurves2 = []; _marker = null;
-  _el = {}; _badge = null; _plain = false; _frameReg = false; _markerBaseScale = 1.0;
+  _el = {}; _badge = null; _frameReg = false; _markerBaseScale = 1.0;
   _stage = _THREE = _ctx = null;
   S.label = S.formula = S.kanParams = S.kanMse = S.kanLoss = null;
   S.mlpParams = S.mlpMse = S.fewerParams = S.edgeShapes = S.distilled = null;