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

Reusable Dockerfile-COPY-derived deploy from szl-holdings/a11oy main.
Files: 900 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/_showcase.js

@@ -0,0 +1,445 @@
+// SPDX-License-Identifier: Apache-2.0
+// © 2026 Lutar, Stephen P. Jr. — SZL Holdings · ORCID 0009-0001-0110-4173 · Doctrine v11
+//
+// surfaces/_showcase.js — SHARED showcase-overlay helper for every holographic surface.
+//
+// THE PROBLEM THIS SOLVES: sprawling descriptive text + KPI walls were rendered as a big
+// always-open panel that covered the canvas ("text taking over the view"), and on phones it
+// pushed the 3D subject below the fold. This helper is the ONE reusable fix so every surface
+// (Groups A/B/C/D) shows the SAME compact, collapsible, mobile-friendly chrome:
+//
+//   * default view = 3D scene + a compact title bar + the honesty-badge pill row + a tiny
+//     legend. The full descriptive text + KPI readouts live behind an (i) toggle.
+//   * desktop → small corner card (top-left). mobile (<=640px) → bottom sheet; collapsed it
+//     is just the title bar + pills, so the 3D subject owns the screen above the fold.
+//   * honesty labels stay VERBATIM (rendered as small pills via szl3d_label.chip), never
+//     hidden, never upgraded.
+//   * optional in-scene node labels via createSceneLabels(): hover/tap tooltip + top-N
+//     persistent labels only, billboarded (always camera-facing), size-capped, fade with
+//     distance — so we never render every label at once (the other half of the text bug).
+//
+// 0 runtime CDN. Pure DOM + the page's THREE (passed in via ctx). Palette per doctrine v11:
+//   lattice-blue #5b8dee · violet-blue #8a6bff · proof-teal #3af4c8 · gold #d7b96b · greys.
+//   Void bg #080c14. PURPLE BANNED. Dispose is the caller's job for scene geom; this helper
+//   cleans up every DOM node + listener it creates on destroy().
+//
+// USAGE (see DESIGN_HELPER.md for the full API):
+//   import { createShowcase } from "./_showcase.js";
+//   const show = createShowcase(ctx, {
+//     id: "episodic", title: "Episodic Memory · Temporal KG (live)",
+//     badge,                                  // a szl3d_live badge (kept in the pill row)
+//     chips: [{ label: "MODELED", text: "graph" }],
+//     legend: ["MODELED", "SAMPLE"],          // or true for all 4 doctrine states
+//     description: "<b>…</b> full text moved off the canvas …",
+//     plain: { html: "<b>What this means:</b> …" },  // optional investor/consumer blurb
+//   });
+//   const vN = show.addField("episodes in graph"); // KPI row -> value <span>
+//   show.setChip(0, "MODELED", { text: "graph" });  // live update a pill
+//   … on unmount: show.destroy();
+
+const CSS_ID = "szl-showcase-css";
+const PALETTE = Object.freeze({
+  void: "#080c14", panel: "rgba(10,17,26,.82)", line: "#1c2836",
+  lattice: "#5b8dee", violet: "#8a6bff", proof: "#3af4c8", gold: "#d7b96b",
+  cream: "#e7eef6", para: "#9fb1bf", dim: "#6b7a86",
+});
+
+// One-time stylesheet inject. Media queries + collapse states can't live in inline styles,
+// so the shared classes go here; every surface that imports the helper reuses them.
+function _ensureCSS() {
+  if (typeof document === "undefined" || document.getElementById(CSS_ID)) return;
+  const s = document.createElement("style");
+  s.id = CSS_ID;
+  s.textContent = `
+.szl-show{position:absolute;left:12px;top:12px;z-index:7;
+  width:min(90vw,340px);max-height:calc(100% - 24px);
+  display:flex;flex-direction:column;
+  color:${PALETTE.cream};font:12px/1.5 ui-sans-serif,system-ui,Segoe UI,Roboto,Arial;
+  background:${PALETTE.panel};border:1px solid ${PALETTE.line};border-radius:12px;
+  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
+  box-shadow:0 8px 28px rgba(0,0,0,.42);overflow:hidden}
+.szl-show__bar{display:flex;align-items:center;gap:9px;padding:9px 11px;flex:0 0 auto}
+.szl-show__dot{width:9px;height:9px;border-radius:50%;background:${PALETTE.lattice};
+  box-shadow:0 0 8px ${PALETTE.lattice};flex:0 0 auto}
+.szl-show__title{font-weight:600;font-size:13px;letter-spacing:.3px;flex:1 1 auto;min-width:0;
+  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.szl-show__toggle{flex:0 0 auto;cursor:pointer;width:27px;height:27px;border-radius:8px;
+  border:1px solid ${PALETTE.line};background:#0e1722;color:#9fb6cc;
+  font:600 14px ui-monospace,SFMono-Regular,Menlo,monospace;line-height:1;
+  display:flex;align-items:center;justify-content:center;transition:.12s}
+.szl-show__toggle:hover{border-color:${PALETTE.proof};color:${PALETTE.cream}}
+.szl-show__pills{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding:0 11px 10px;flex:0 0 auto}
+.szl-show__body{padding:0 11px 12px;display:flex;flex-direction:column;gap:10px;
+  overflow:auto;-webkit-overflow-scrolling:touch;min-height:0}
+.szl-show--collapsed .szl-show__body{display:none}
+.szl-show__desc{color:${PALETTE.para};font-size:11px;line-height:1.55}
+.szl-show__desc b{color:${PALETTE.cream}}
+.szl-show__legend{display:flex;gap:5px;flex-wrap:wrap}
+.szl-show__card{background:#0a1117;border:1px solid ${PALETTE.line};border-radius:9px;
+  padding:9px 10px;display:flex;flex-direction:column;gap:5px}
+.szl-show__row{display:flex;justify-content:space-between;gap:12px;font-size:11px;align-items:baseline}
+.szl-show__row .k{color:${PALETTE.para}}
+.szl-show__row .v{font-variant-numeric:tabular-nums;color:${PALETTE.cream};text-align:right;
+  max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.szl-show__foot{font-size:9.5px;color:${PALETTE.dim};line-height:1.5}
+.szl-show__plainbtn{font:11px ui-monospace,Menlo,monospace;padding:5px 11px;border-radius:7px;
+  border:1px solid ${PALETTE.proof};background:#08140f;color:${PALETTE.proof};cursor:pointer;width:fit-content}
+.szl-show__plain{font-size:10.5px;color:#c9d6df;line-height:1.55;border:1px dashed #26333f;
+  border-radius:7px;padding:7px 9px;display:none}
+.szl-show__plain b{color:${PALETTE.cream}}
+.szl-show__plain--on{display:block}
+/* In-scene hover/tap labels: crisp DOM text projected to the node, always camera-facing. */
+.szl-lbl-layer{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden}
+.szl-lbl{position:absolute;transform:translate(-50%,-140%);
+  font:600 11px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.2px;
+  padding:2px 7px;border-radius:6px;white-space:nowrap;
+  background:rgba(8,12,20,.86);border:1px solid ${PALETTE.line};color:${PALETTE.cream};
+  box-shadow:0 2px 8px rgba(0,0,0,.4);will-change:transform,opacity}
+.szl-lbl--hover{border-color:${PALETTE.proof};color:${PALETTE.proof}}
+@media (max-width:640px){
+  .szl-show{left:0;right:0;bottom:0;top:auto;width:auto;max-height:62vh;
+    border-radius:14px 14px 0 0;border-bottom:none;box-shadow:0 -8px 28px rgba(0,0,0,.5)}
+  .szl-show__body{max-height:46vh}
+  .szl-show__bar{padding:10px 12px}
+  .szl-show__title{font-size:13px}
+}
+`;
+  (document.head || document.documentElement).appendChild(s);
+}
+
+function _asNode(x) {
+  if (x == null) return null;
+  if (typeof x === "string") { const d = document.createElement("div"); d.innerHTML = x; return d; }
+  return x; // assume DOM node
+}
+
+// ---------------------------------------------------------------------------
+// createShowcase(ctx, opts) -> controller
+// ---------------------------------------------------------------------------
+export function createShowcase(ctx, opts = {}) {
+  _ensureCSS();
+  const container = (ctx && ctx.container) || document.body;
+  const labelMod = ctx && ctx.label;
+
+  const root = document.createElement("div");
+  root.className = "szl-show";
+  root.setAttribute("data-surface", opts.id || "");
+  // Start collapsed by default so the scene is the star; a surface may pass startExpanded.
+  let expanded = !!opts.startExpanded;
+  if (!expanded) root.classList.add("szl-show--collapsed");
+
+  // --- title bar (always visible): accent dot + title + (i)/× toggle ---------
+  const bar = document.createElement("div");
+  bar.className = "szl-show__bar";
+  const dot = document.createElement("span");
+  dot.className = "szl-show__dot";
+  if (opts.accent) { dot.style.background = opts.accent; dot.style.boxShadow = "0 0 8px " + opts.accent; }
+  const title = document.createElement("div");
+  title.className = "szl-show__title";
+  title.textContent = opts.title || opts.id || "surface";
+  title.title = opts.title || "";
+  const toggle = document.createElement("button");
+  toggle.className = "szl-show__toggle";
+  toggle.type = "button";
+  toggle.setAttribute("aria-label", "Toggle surface details");
+  bar.appendChild(dot); bar.appendChild(title); bar.appendChild(toggle);
+  root.appendChild(bar);
+
+  // --- pill row (always visible): live badge + honesty chips + tiny legend ---
+  const pills = document.createElement("div");
+  pills.className = "szl-show__pills";
+  root.appendChild(pills);
+
+  let badge = opts.badge || null;
+  if (badge && badge.el) pills.appendChild(badge.el);
+
+  // honesty chips (verbatim) — track them so callers can live-update by index/name
+  const chipEls = [];
+  const chipNames = [];
+  function _addChip(spec) {
+    if (!labelMod || !labelMod.chip) return null;
+    const el = labelMod.chip(spec.label, { text: spec.text, title: spec.title });
+    if (spec.name) chipNames.push(spec.name); else chipNames.push(null);
+    chipEls.push(el);
+    pills.appendChild(el);
+    return el;
+  }
+  (opts.chips || []).forEach(_addChip);
+
+  // minimal legend — subset (array of tokens) or all 4 doctrine states (true)
+  if (opts.legend && labelMod && labelMod.chip) {
+    const leg = document.createElement("div");
+    leg.className = "szl-show__legend";
+    const tokens = Array.isArray(opts.legend)
+      ? opts.legend
+      : ["MEASURED", "MODELED", "SAMPLE", "STRUCTURAL-ONLY"];
+    tokens.forEach((t) => { const c = labelMod.chip(t); c.style.opacity = ".9"; leg.appendChild(c); });
+    pills.appendChild(leg);
+  }
+
+  // --- collapsible body: description + KPI card + citations + plain-language --
+  const body = document.createElement("div");
+  body.className = "szl-show__body";
+  root.appendChild(body);
+
+  const descNode = _asNode(opts.description);
+  if (descNode) { descNode.classList.add("szl-show__desc"); body.appendChild(descNode); }
+
+  // default KPI card (surfaces add rows via addField); created lazily
+  let card = null;
+  const fields = {};
+  function _ensureCard() {
+    if (card) return card;
+    card = document.createElement("div");
+    card.className = "szl-show__card";
+    body.appendChild(card);
+    return card;
+  }
+  function addField(label, key) {
+    _ensureCard();
+    const row = document.createElement("div");
+    row.className = "szl-show__row";
+    const k = document.createElement("span"); k.className = "k"; k.textContent = label;
+    const v = document.createElement("span"); v.className = "v"; v.textContent = "—";
+    row.appendChild(k); row.appendChild(v);
+    card.appendChild(row);
+    if (key) fields[key] = v;
+    return v;
+  }
+
+  const citeNode = _asNode(opts.citations);
+  if (citeNode) { citeNode.classList.add("szl-show__foot"); body.appendChild(citeNode); }
+
+  // optional plain-language ("what this means") toggle inside the body
+  let plainBtn = null, plainBox = null, plainOn = false, plainHtmlFn = null;
+  if (opts.plain) {
+    plainBtn = document.createElement("button");
+    plainBtn.type = "button";
+    plainBtn.className = "szl-show__plainbtn";
+    plainBtn.textContent = opts.plain.label || "◑ what this means";
+    plainBox = document.createElement("div");
+    plainBox.className = "szl-show__plain";
+    plainHtmlFn = (typeof opts.plain === "function") ? opts.plain
+      : (typeof opts.plain.html === "function") ? opts.plain.html
+      : () => (opts.plain.html || (typeof opts.plain === "string" ? opts.plain : ""));
+    plainBtn.addEventListener("click", () => {
+      plainOn = !plainOn;
+      plainBox.classList.toggle("szl-show__plain--on", plainOn);
+      plainBtn.style.background = plainOn ? "#0f2a20" : "#08140f";
+      if (plainOn) plainBox.innerHTML = plainHtmlFn() || "";
+    });
+    body.appendChild(plainBtn);
+    body.appendChild(plainBox);
+  }
+
+  // --- collapse behaviour ----------------------------------------------------
+  function _syncToggle() { toggle.textContent = expanded ? "×" : "ⓘ"; }
+  function setExpanded(on) {
+    expanded = !!on;
+    root.classList.toggle("szl-show--collapsed", !expanded);
+    _syncToggle();
+    if (expanded && plainOn && plainBox) plainBox.innerHTML = plainHtmlFn ? (plainHtmlFn() || "") : plainBox.innerHTML;
+  }
+  toggle.addEventListener("click", () => setExpanded(!expanded));
+  _syncToggle();
+
+  container.appendChild(root);
+
+  // --- scene-label sub-helper bound to this container ------------------------
+  let _labels = null;
+  function attachSceneLabels(labelOpts) {
+    _labels = createSceneLabels(ctx, labelOpts);
+    return _labels;
+  }
+
+  function setBadge(b) {
+    if (badge && badge.el && badge.el.parentNode) badge.el.parentNode.removeChild(badge.el);
+    badge = b;
+    if (badge && badge.el) pills.insertBefore(badge.el, pills.firstChild);
+  }
+
+  function setChip(ref, label, o = {}) {
+    let el = null;
+    if (typeof ref === "number") el = chipEls[ref];
+    else { const i = chipNames.indexOf(ref); if (i >= 0) el = chipEls[i]; }
+    if (el && labelMod && labelMod.updateChip) labelMod.updateChip(el, label, o);
+    return el;
+  }
+
+  function refreshPlain() {
+    if (plainOn && plainBox && plainHtmlFn) plainBox.innerHTML = plainHtmlFn() || "";
+  }
+
+  function destroy() {
+    try { if (_labels) _labels.destroy(); } catch (_) {}
+    _labels = null;
+    try { if (root.parentNode) root.parentNode.removeChild(root); } catch (_) {}
+  }
+
+  return {
+    el: root, bar, pills, body,
+    title, toggle,
+    addField, field: (k) => fields[k], fields,
+    addChip: _addChip, setChip,
+    setExpanded, isExpanded: () => expanded,
+    setBadge, refreshPlain,
+    attachSceneLabels,
+    // escape hatch: append custom DOM into the collapsible body
+    appendBody: (n) => { const x = _asNode(n); if (x) body.appendChild(x); return x; },
+    card: _ensureCard,
+    destroy,
+  };
+}
+
+// ---------------------------------------------------------------------------
+// createSceneLabels(ctx, opts) -> controller
+//
+// In-scene node labels done right: a DOM label layer over the canvas that projects each
+// world position to screen every frame (so labels are always camera-facing = "billboarded"),
+// fades with camera distance, and shows text ONLY for the top-N most-connected nodes plus a
+// single hover/tap tooltip. This is the reusable cure for "every label at once".
+//
+// opts:
+//   objects   : () => THREE.Object3D[]   labelable meshes (called live; may change per poll)
+//   text      : (obj) => string          label text for an object (required for any label)
+//   weight    : (obj) => number          ranking for top-N (default 0 → insertion order)
+//   topN      : number                   how many persistent labels (default 0 = hover-only)
+//   hover     : boolean                  enable hover/tap tooltip (default true)
+//   fadeNear  : number                   camera distance at full opacity (default 8)
+//   fadeFar   : number                   camera distance at min opacity  (default 60)
+//   minOpacity: number                   floor opacity for far labels (default 0.15)
+//   container : DOM                      overlay host (default ctx.container)
+// ---------------------------------------------------------------------------
+export function createSceneLabels(ctx, opts = {}) {
+  _ensureCSS();
+  const THREE = ctx.THREE;
+  const stage = ctx.stage;
+  const container = opts.container || ctx.container || document.body;
+  const canvas = stage && stage.renderer && stage.renderer.domElement;
+  const camera = stage && stage.camera;
+  if (!THREE || !stage || !camera) {
+    return { update() {}, destroy() {}, setObjects() {} };
+  }
+
+  const getObjects = typeof opts.objects === "function" ? opts.objects : () => [];
+  const getText = typeof opts.text === "function" ? opts.text : (o) => (o && o.userData && o.userData.label) || "";
+  const getWeight = typeof opts.weight === "function" ? opts.weight : () => 0;
+  const topN = Math.max(0, opts.topN || 0);
+  const hoverOn = opts.hover !== false;
+  const fadeNear = opts.fadeNear != null ? opts.fadeNear : 8;
+  const fadeFar = opts.fadeFar != null ? opts.fadeFar : 60;
+  const minOpacity = opts.minOpacity != null ? opts.minOpacity : 0.15;
+
+  const layer = document.createElement("div");
+  layer.className = "szl-lbl-layer";
+  container.appendChild(layer);
+
+  // pool of persistent DOM labels for the top-N
+  const pool = [];
+  for (let i = 0; i < topN; i++) {
+    const el = document.createElement("div");
+    el.className = "szl-lbl";
+    el.style.display = "none";
+    layer.appendChild(el);
+    pool.push(el);
+  }
+  // single hover label
+  const hoverEl = document.createElement("div");
+  hoverEl.className = "szl-lbl szl-lbl--hover";
+  hoverEl.style.display = "none";
+  layer.appendChild(hoverEl);
+
+  const ray = new THREE.Raycaster();
+  const ndc = new THREE.Vector2();
+  const proj = new THREE.Vector3();
+  let hovered = null, hoverText = "";
+
+  function _rect() { return (canvas && canvas.getBoundingClientRect) ? canvas.getBoundingClientRect() : container.getBoundingClientRect(); }
+
+  function _pick(clientX, clientY) {
+    const r = _rect();
+    ndc.x = ((clientX - r.left) / Math.max(1, r.width)) * 2 - 1;
+    ndc.y = -((clientY - r.top) / Math.max(1, r.height)) * 2 + 1;
+    ray.setFromCamera(ndc, camera);
+    const objs = getObjects();
+    const hits = ray.intersectObjects(objs, true);
+    if (!hits.length) return null;
+    // walk up to the object that is actually in the labelable set
+    let o = hits[0].object;
+    const set = new Set(objs);
+    while (o && !set.has(o)) o = o.parent;
+    return o || hits[0].object;
+  }
+
+  function _onMove(e) {
+    if (!hoverOn) return;
+    const p = ("touches" in e && e.touches[0]) || e;
+    const o = _pick(p.clientX, p.clientY);
+    hovered = o;
+    hoverText = o ? (getText(o) || "") : "";
+    if (!o || !hoverText) hoverEl.style.display = "none";
+  }
+  function _onLeave() { hovered = null; hoverEl.style.display = "none"; }
+
+  if (hoverOn && canvas) {
+    canvas.addEventListener("pointermove", _onMove, { passive: true });
+    canvas.addEventListener("pointerdown", _onMove, { passive: true });
+    canvas.addEventListener("pointerleave", _onLeave, { passive: true });
+  }
+
+  function _place(el, obj, text, isHover) {
+    if (!obj) { el.style.display = "none"; return; }
+    obj.getWorldPosition(proj);
+    const dist = camera.position.distanceTo(proj);
+    proj.project(camera);
+    if (proj.z > 1) { el.style.display = "none"; return; } // behind camera
+    const r = _rect();
+    const x = (proj.x * 0.5 + 0.5) * r.width;
+    const y = (-proj.y * 0.5 + 0.5) * r.height;
+    // fade with distance, size-capped (font stays fixed → size cap)
+    let op = 1;
+    if (dist > fadeNear) op = Math.max(minOpacity, 1 - (dist - fadeNear) / Math.max(1, fadeFar - fadeNear));
+    el.textContent = text;
+    el.style.left = x + "px";
+    el.style.top = y + "px";
+    el.style.opacity = String(isHover ? Math.max(op, 0.9) : op);
+    el.style.display = "block";
+  }
+
+  function update() {
+    const objs = getObjects();
+    // persistent top-N by weight
+    if (topN) {
+      const ranked = objs
+        .map((o) => ({ o, w: getWeight(o) }))
+        .sort((a, b) => b.w - a.w)
+        .slice(0, topN);
+      for (let i = 0; i < pool.length; i++) {
+        const item = ranked[i];
+        if (item && item.o) _place(pool[i], item.o, getText(item.o) || "", false);
+        else pool[i].style.display = "none";
+      }
+    }
+    // hover/tap label
+    if (hoverOn && hovered && hoverText) _place(hoverEl, hovered, hoverText, true);
+    else hoverEl.style.display = "none";
+  }
+
+  // drive updates off the stage frame loop
+  let _reg = true;
+  stage.onFrame(function _lblFrame() { if (_reg) update(); });
+
+  function destroy() {
+    _reg = false;
+    if (hoverOn && canvas) {
+      canvas.removeEventListener("pointermove", _onMove);
+      canvas.removeEventListener("pointerdown", _onMove);
+      canvas.removeEventListener("pointerleave", _onLeave);
+    }
+    try { if (layer.parentNode) layer.parentNode.removeChild(layer); } catch (_) {}
+  }
+
+  return { update, destroy, setObjects() {} };
+}
+
+export default { createShowcase, createSceneLabels, PALETTE };

static/3d/surfaces/agentcoh.js

@@ -44,6 +44,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    = "agentcoh";
 const TITLE = "Multi-Agent Memory Coherence · MESI→artifact (live)";
 
@@ -67,6 +69,7 @@ const ART_DY  = 3.4;  // vertical spacing between artifact blocks
 let _stage = null, _THREE = null, _ctx = null, _group = null, _overlay = null;
 let _frameReg = false, _polls = [], _el = {}, _badge = null;
 let _plain = false;
+let _show = null;
 
 // geometry handles
 let _cells = [];        // Array<THREE.Mesh> — one cell per (artifact, agent, step)
@@ -350,7 +353,20 @@ function _buildOverlay() {
   _el["plain"] = pd;
   _overlay.appendChild(pd);
 
-  (ctx.container || document.body).appendChild(_overlay);
+  // Fold the legacy panel into the shared showcase overlay (surfaces/_showcase.js):
+  // title + live badge + doctrine legend live in the always-visible chrome; the
+  // descriptive text + KPI card become the collapsible body so the 3D scene is the star.
+  _show = createShowcase(_ctx, {
+    id: ID, title: TITLE, accent: "#5b8dee",
+    badge: _badge,
+    legend: true,
+  });
+  _overlay.style.position = "static";
+  _overlay.style.left = _overlay.style.top = "auto";
+  _overlay.style.maxWidth = "none";
+  _overlay.style.font = "inherit";
+  if (_overlay.firstChild) _overlay.removeChild(_overlay.firstChild); // drop duplicate title
+  _show.body.appendChild(_overlay);
   _paintOverlay();
 }
 
@@ -432,7 +448,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) => {
@@ -445,7 +461,7 @@ export function unmount() {
       _stage.scene.remove(_group);
     }
   } catch (_) {}
-  _group = _overlay = null;
+  _group = _overlay = _show = null;
   _cells = []; _flash = []; _links = null;
   _el = {}; _badge = null; _plain = false; _frameReg = false;
   _stage = _THREE = _ctx = null;

static/3d/surfaces/aimc.js

@@ -45,6 +45,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    = "aimc";
 const TITLE = "Analog In-Memory Computing Attention · Gain-Cell Crossbar (live)";
 
@@ -72,6 +74,7 @@ const MIN_BAR_H  = 0.04;    // floor height so a bar never fully vanishes
 let _stage = null, _THREE = null, _ctx = null, _group = null, _overlay = null;
 let _frameReg = false, _polls = [], _el = {}, _badge = null;
 let _plain = false;
+let _show = null;
 
 // geometry handles
 let _floor      = null;
@@ -417,7 +420,20 @@ function _buildOverlay() {
   _el["plain"] = pd;
   _overlay.appendChild(pd);
 
-  (ctx.container || document.body).appendChild(_overlay);
+  // Fold the legacy panel into the shared showcase overlay (surfaces/_showcase.js):
+  // title + live badge + doctrine legend live in the always-visible chrome; the
+  // descriptive text + KPI card become the collapsible body so the 3D scene is the star.
+  _show = createShowcase(_ctx, {
+    id: ID, title: TITLE, accent: "#5b8dee",
+    badge: _badge,
+    legend: true,
+  });
+  _overlay.style.position = "static";
+  _overlay.style.left = _overlay.style.top = "auto";
+  _overlay.style.maxWidth = "none";
+  _overlay.style.font = "inherit";
+  if (_overlay.firstChild) _overlay.removeChild(_overlay.firstChild); // drop duplicate title
+  _show.body.appendChild(_overlay);
   _paintOverlay();
 }
 
@@ -479,7 +495,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) => {
@@ -492,7 +508,7 @@ export function unmount() {
       _stage.scene.remove(_group);
     }
   } catch (_) {}
-  _group = _overlay = null;
+  _group = _overlay = _show = null;
   _floor = null; _crossbar = []; _crossLines = [];
   _barsDig = []; _barsAna = []; _barsCal = []; _query = null;
   _el = {}; _badge = null; _plain = false; _frameReg = false;

static/3d/surfaces/anatomy.js

@@ -25,6 +25,8 @@
 // CONTRACT: ES module default-exporting { id, title, endpoints[], mount(ctx), unmount() }.
 // ctx supplies stage / container / live / label / THREE / szl3d (see Dev0 toolkit).
 
+import { createShowcase } from "./_showcase.js";
+
 const ID = "anatomy";
 const TITLE = "Anatomy · Unified Loop";
 const ENDPOINT = "/api/a11oy/v1/anatomy/loop";
@@ -45,7 +47,7 @@ const C_RESERVOIR = 0x6fb1ff;   // blue — SAMPLE work-credit tank
 const ORGAN_ANGLES = { WAQAYCHAQ: Math.PI * 0.5, KAMAY: Math.PI * 1.1666, RIKUY: Math.PI * 1.8333 };
 
 let _ctx = null, _stage = null, _THREE = null, _handle = null;
-let _root = null, _overlay = null;
+let _root = null, _overlay = null, _show = null;
 let _ring = null, _ringMat = null, _beats = null, _beatMat = null;
 let _beatPhase = null;          // per-particle phase along the ring
 let _organs = {};               // name -> { group, core, halo, sprite }
@@ -247,38 +249,32 @@ function _row(label) {
 }
 
 function _buildHUD() {
-  _overlay = document.createElement("div");
-  _overlay.className = "szl3d-surface-overlay";
-  Object.assign(_overlay.style, {
-    position: "absolute", left: "14px", top: "14px", zIndex: "5",
-    display: "flex", flexDirection: "column", gap: "9px",
-    maxWidth: "min(94%,430px)", padding: "12px 14px",
-    background: "rgba(8,14,20,.72)", border: "1px solid #1d2a36", borderRadius: "10px",
-    backdropFilter: "blur(3px)",
-  });
-
-  const h = document.createElement("div");
-  h.style.cssText = "font:600 13px ui-sans-serif,system-ui;color:#eef3f6;letter-spacing:.4px;" +
-    "display:flex;align-items:center;gap:9px;";
-  h.innerHTML = "<span>◇ " + TITLE + "</span>";
-  _overlay.appendChild(h);
-
   const badge = _ctx.live.createBadge();
   _hud.badge = badge;
-  _overlay.appendChild(badge.el);
 
-  // honesty banner — the doctrine truth, always visible
+  // Shared collapsible showcase: title + honesty badge + chips + legend live in
+  // the compact chrome; the field readout folds into the (collapsed) body so the
+  // 3D loop stays the star and text never takes over the view.
+  _show = createShowcase(_ctx, {
+    id: ID, title: TITLE, accent: "#5b8dee", badge,
+    chips: [
+      { label: "SAMPLE", text: "joules", name: "joules" },
+      { label: "STRUCTURAL-ONLY", text: "organs EXPERIMENTAL", name: "organ" },
+    ],
+    legend: true,
+  });
+
+  // honesty banner — the doctrine truth
   const honesty = document.createElement("div");
   honesty.style.cssText = "font:10.5px ui-monospace,Menlo,monospace;color:#9fb1bf;line-height:1.5;" +
-    "border-left:3px solid " + "#ff8fcf" + ";padding-left:8px;";
+    "border-left:3px solid " + "#5b8dee" + ";padding-left:8px;margin-bottom:8px;";
   honesty.textContent = "organs carry the BEAT (work + receipts), NOT electrons · EXPERIMENTAL tier, " +
     "never proven · joules SAMPLE off-box · Ayni reciprocal, never net-positive · Λ = Conjecture 1";
-  _overlay.appendChild(honesty);
+  _show.body.appendChild(honesty);
 
   // live field readout — each is a demo wired to a real JSON field
   const fields = document.createElement("div");
-  fields.style.cssText = "display:flex;flexDirection:column;gap:5px;margin-top:2px;";
-  fields.style.display = "flex"; fields.style.flexDirection = "column"; fields.style.gap = "5px";
+  fields.style.cssText = "display:flex;flex-direction:column;gap:5px;";
   const mk = (key, lbl) => { const f = _row(lbl); _hud[key] = f.val; fields.appendChild(f.row); };
   mk("intakePosture", "intake · posture");          // DEMO #16
   mk("gridPrice", "intake · grid_price (€/MWh)");    // DEMO #17
@@ -287,23 +283,7 @@ function _buildHUD() {
   mk("credits", "reservoir · work_credits");         // DEMO #20
   mk("receipt", "last_receipt_id");                  // DEMO #21
   mk("ayni", "ayni · intake=output=stored");         // DEMO #22
-  _overlay.appendChild(fields);
-
-  // honesty chips row: joules_label (live) + organ EXPERIMENTAL tier --------
-  const chips = document.createElement("div");
-  chips.style.cssText = "display:flex;gap:6px;flex-wrap:wrap;margin-top:4px;align-items:center;";
-  _hud.joulesChip = _ctx.label.chip("SAMPLE", { text: "joules" });
-  _hud.organChip = _ctx.label.chip("STRUCTURAL-ONLY", { text: "organs EXPERIMENTAL" });
-  chips.appendChild(_hud.joulesChip);
-  chips.appendChild(_hud.organChip);
-  _overlay.appendChild(chips);
-
-  // full doctrine legend (keeps all 4 honesty states + STRUCTURAL-ONLY token)
-  const legend = _ctx.label.legend();
-  legend.style.opacity = "0.85"; legend.style.marginTop = "4px";
-  _overlay.appendChild(legend);
-
-  (_ctx.container || document.body).appendChild(_overlay);
+  _show.body.appendChild(fields);
 }
 
 // ---------------------------------------------------------------------------
@@ -406,12 +386,12 @@ function _onData(json, meta) {
     _hud.ayni.style.color = ok ? "#39d3c4" : "#e8c074";
   }
 
-  // ---- live honesty chips ------------------------------------------------
-  if (_hud.joulesChip) _ctx.label.updateChip(_hud.joulesChip, joulesLabel, { text: "joules" });
-  if (_hud.organChip) {
+  // ---- live honesty chips (verbatim label; never upgraded) ---------------
+  if (_show) {
+    _show.setChip("joules", joulesLabel, { text: "joules" });
     // organs stay EXPERIMENTAL-tier; show flowing count honestly
     const flowingN = organs.filter((o) => o && o.flowing).length;
-    _ctx.label.updateChip(_hud.organChip, "STRUCTURAL-ONLY",
+    _show.setChip("organ", "STRUCTURAL-ONLY",
       { text: `organs EXPERIMENTAL (${flowingN}/${organs.length} flowing)` });
   }
 }
@@ -499,13 +479,14 @@ function mount(ctx) {
 
 function unmount() {
   try { if (_handle) _handle.stop(); } catch (_) {}
+  try { if (_show) _show.destroy(); } catch (_) {}
   try { if (_overlay && _overlay.parentNode) _overlay.parentNode.removeChild(_overlay); } catch (_) {}
   try {
     if (_root && _stage) { _stage.scene.remove(_root); _disposeObj(_root); }
   } catch (_) {}
   try { _stage && _stage.setBloom && _stage.setBloom(false); } catch (_) {}
   _ctx = null; _stage = null; _THREE = null; _handle = null;
-  _root = null; _overlay = null; _ring = null; _ringMat = null;
+  _root = null; _overlay = null; _show = null; _ring = null; _ringMat = null;
   _beats = null; _beatMat = null; _beatPhase = null; _beatComet = null;
   _organs = {}; _reservoir = null; _reservoirFill = null; _reservoirMat = null;
   _ayniGroup = null; _ayniBeam = null; _ayniL = null; _ayniR = null;

static/3d/surfaces/anatomy_body.js

@@ -28,6 +28,8 @@
 //
 // CONTRACT: ES module default-exporting { id, title, endpoints[], mount(ctx), unmount() }.
 
+import { createShowcase } from "./_showcase.js";
+
 const ID = "anatomy_body";
 const TITLE = "Anatomy · Living Body";
 const ENDPOINT = "/api/a11oy/v1/anatomy/vitals";
@@ -53,7 +55,7 @@ const BODY_R = 7.0;          // ring radius the 8 systems sit on
 const LUNG_Y = 3.2;          // lungs sit high on the torso
 
 let _ctx = null, _stage = null, _THREE = null, _handle = null;
-let _root = null, _overlay = null;
+let _root = null, _overlay = null, _show = null;
 let _lungs = [];             // [{ group, mesh, mat, sprite, rateWatts, live }]
 let _heart = null, _heartMat = null;
 let _ring = null, _ringMat = null, _beatComet = null;
@@ -99,7 +101,7 @@ function _buildScene() {
   key.position.set(7, 11, 9);
   _root.add(key);
 
-  _buildLungs();
+  // lungs are built lazily from live breaths[] on first data (see _ensureLungs)
   _buildHeartAndRing();
   _buildSystems();
 
@@ -236,36 +238,30 @@ function _row(label) {
 }
 
 function _buildHUD() {
-  _overlay = document.createElement("div");
-  _overlay.className = "szl3d-surface-overlay";
-  Object.assign(_overlay.style, {
-    position: "absolute", left: "14px", top: "14px", zIndex: "5",
-    display: "flex", flexDirection: "column", gap: "9px",
-    maxWidth: "min(94%,460px)", padding: "12px 14px",
-    background: "rgba(8,14,20,.74)", border: "1px solid #1d2a36", borderRadius: "10px",
-    backdropFilter: "blur(3px)",
-  });
-
-  const h = document.createElement("div");
-  h.style.cssText = "font:600 13px ui-sans-serif,system-ui;color:#eef3f6;letter-spacing:.4px;";
-  h.textContent = "◇ " + TITLE;
-  _overlay.appendChild(h);
-
   const badge = _ctx.live.createBadge();
   _hud.badge = badge;
-  _overlay.appendChild(badge.el);
+
+  _show = createShowcase(_ctx, {
+    id: ID, title: TITLE, accent: "#5b8dee", badge,
+    chips: [
+      { label: "MEASURED", text: "lungs", name: "lungs" },
+      { label: "SAMPLE", text: "joules", name: "joules" },
+      { label: "UNAVAILABLE", text: "organs", name: "organ" },
+    ],
+    legend: true,
+  });
 
   // top-level `view` disclaimer — rendered VERBATIM from the JSON when it arrives.
   _hud.view = document.createElement("div");
   _hud.view.style.cssText = "font:10.5px ui-monospace,Menlo,monospace;color:#9fb1bf;line-height:1.5;" +
-    "border-left:3px solid #5b8dee;padding-left:8px;";
+    "border-left:3px solid #5b8dee;padding-left:8px;margin-bottom:8px;";
   _hud.view.textContent = "MODELED physiological projection over REAL telemetry — a body-systems " +
     "VIEW; SZL is never claimed to be literally alive.";
-  _overlay.appendChild(_hud.view);
+  _show.body.appendChild(_hud.view);
 
   // live field readout
   const fields = document.createElement("div");
-  fields.style.cssText = "display:flex;flex-direction:column;gap:5px;margin-top:2px;";
+  fields.style.cssText = "display:flex;flex-direction:column;gap:5px;";
   const mk = (key, lbl) => { const f = _row(lbl); _hud[key] = f.val; fields.appendChild(f.row); };
   mk("lungs", "lungs · total_watts");
   mk("breathing", "lungs · breathing (∝ watts)");
@@ -274,39 +270,22 @@ function _buildHUD() {
   mk("reservoir", "reservoir · energy_joules");
   mk("systemsLive", "systems · healthy / total");
   mk("organsLive", "organs_live / organs_total");
-  _overlay.appendChild(fields);
+  _show.body.appendChild(fields);
 
   // MODELED next-harvest-window panel (derived from metabolism.intake_rate). Never
   // MEASURED; if intake_rate.label is UNAVAILABLE we say so and invent NO window.
   _hud.harvest = document.createElement("div");
   _hud.harvest.style.cssText = "font:10.5px ui-monospace,Menlo,monospace;color:#cdd8e0;line-height:1.5;" +
-    "border-left:3px solid #8a6bff;padding-left:8px;margin-top:2px;";
+    "border-left:3px solid #8a6bff;padding-left:8px;margin-top:8px;";
   _hud.harvest.textContent = "MODELED next-harvest-window · awaiting intake_rate…";
-  _overlay.appendChild(_hud.harvest);
-
-  // honesty chips
-  const chips = document.createElement("div");
-  chips.style.cssText = "display:flex;gap:6px;flex-wrap:wrap;margin-top:4px;align-items:center;";
-  _hud.lungsChip = _ctx.label.chip("MEASURED", { text: "lungs" });
-  _hud.joulesChip = _ctx.label.chip("SAMPLE", { text: "joules" });
-  _hud.organChip = _ctx.label.chip("UNAVAILABLE", { text: "organs" });
-  chips.appendChild(_hud.lungsChip);
-  chips.appendChild(_hud.joulesChip);
-  chips.appendChild(_hud.organChip);
-  _overlay.appendChild(chips);
-
-  const legend = _ctx.label.legend();
-  legend.style.opacity = "0.85"; legend.style.marginTop = "4px";
-  _overlay.appendChild(legend);
-
-  // honesty footer — Ayni + Λ, always visible
+  _show.body.appendChild(_hud.harvest);
+
+  // honesty footer — Ayni + Λ
   const foot = document.createElement("div");
-  foot.style.cssText = "font:10px ui-monospace,Menlo,monospace;color:#7d8a96;line-height:1.5;margin-top:2px;";
+  foot.style.cssText = "font:10px ui-monospace,Menlo,monospace;color:#7d8a96;line-height:1.5;margin-top:8px;";
   foot.textContent = "Ayni reciprocal, never net-positive (no free energy / over-unity) · " +
     "Λ = Conjecture 1, not a theorem · joules MEASURED only from a reachable NVML exporter, else UNAVAILABLE.";
-  _overlay.appendChild(foot);
-
-  (_ctx.container || document.body).appendChild(_overlay);
+  _show.body.appendChild(foot);
 }
 
 // ---------------------------------------------------------------------------
@@ -349,7 +328,7 @@ function _onData(json, meta) {
       ? Number(b.breathing_rate_watts).toFixed(1) + "W" : "UNAVAILABLE");
     _hud.breathing.textContent = liveN + "/" + breaths.length + " breathing · " + parts.join(" · ");
   }
-  if (_hud.lungsChip) _ctx.label.updateChip(_hud.lungsChip, String(lungs.label || "UNAVAILABLE"), { text: "lungs" });
+  if (_show) _show.setChip("lungs", String(lungs.label || "UNAVAILABLE"), { text: "lungs" });
 
   // ---- CIRCULATION / HEART ----------------------------------------------
   const metab = json.metabolism || {};
@@ -384,7 +363,7 @@ function _onData(json, meta) {
     _hud.reservoir.textContent = (ej === null || ej === undefined ? "NO-LIVE-DATA" : ej) +
       "  (" + String(reservoir.energy_label || "UNAVAILABLE") + ")";
   }
-  if (_hud.joulesChip) _ctx.label.updateChip(_hud.joulesChip, String(reservoir.energy_label || "SAMPLE"), { text: "joules" });
+  if (_show) _show.setChip("joules", String(reservoir.energy_label || "SAMPLE"), { text: "joules" });
 
   // ---- SYSTEMS / ORGANS band FSM ----------------------------------------
   const systems = Array.isArray(json.systems) ? json.systems : [];
@@ -418,8 +397,8 @@ function _onData(json, meta) {
     _hud.organsLive.textContent = String(summary.organs_live != null ? summary.organs_live : "?") +
       " / " + String(summary.organs_total != null ? summary.organs_total : "?");
   }
-  if (_hud.organChip) {
-    _ctx.label.updateChip(_hud.organChip, "UNAVAILABLE",
+  if (_show) {
+    _show.setChip("organ", "UNAVAILABLE",
       { text: "organs " + String(summary.organs_live || 0) + "/" + String(summary.organs_total || 0) + " live" });
   }
 
@@ -522,11 +501,12 @@ function mount(ctx) {
 
 function unmount() {
   try { if (_handle) _handle.stop(); } catch (_) {}
+  try { if (_show) _show.destroy(); } catch (_) {}
   try { if (_overlay && _overlay.parentNode) _overlay.parentNode.removeChild(_overlay); } catch (_) {}
   try { if (_root && _stage) { _stage.scene.remove(_root); _disposeObj(_root); } } catch (_) {}
   try { _stage && _stage.setBloom && _stage.setBloom(false); } catch (_) {}
   _ctx = null; _stage = null; _THREE = null; _handle = null;
-  _root = null; _overlay = null;
+  _root = null; _overlay = null; _show = null;
   _lungs = []; _heart = null; _heartMat = null;
   _ring = null; _ringMat = null; _beatComet = null;
   _systems = []; _hud = {};

static/3d/surfaces/blt.js

@@ -37,6 +37,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    = "blt";
 const TITLE = "Byte Latent Transformer · Entropy-Patching (live)";
 
@@ -61,6 +63,7 @@ const MAX_CUTS    = 96;    // cap on rendered patch-boundary cut-planes (perf)
 let _stage = null, _THREE = null, _ctx = null, _group = null, _overlay = null;
 let _frameReg = false, _polls = [], _el = {}, _badge = null;
 let _plain = false;
+let _show = null;
 
 // geometry handles
 let _floor      = null;
@@ -394,7 +397,20 @@ function _buildOverlay() {
   _el["plain"] = pd;
   _overlay.appendChild(pd);
 
-  (ctx.container || document.body).appendChild(_overlay);
+  // Fold the legacy panel into the shared showcase overlay (surfaces/_showcase.js):
+  // title + live badge + doctrine legend live in the always-visible chrome; the
+  // descriptive text + KPI card become the collapsible body so the 3D scene is the star.
+  _show = createShowcase(_ctx, {
+    id: ID, title: TITLE, accent: "#5b8dee",
+    badge: _badge,
+    legend: true,
+  });
+  _overlay.style.position = "static";
+  _overlay.style.left = _overlay.style.top = "auto";
+  _overlay.style.maxWidth = "none";
+  _overlay.style.font = "inherit";
+  if (_overlay.firstChild) _overlay.removeChild(_overlay.firstChild); // drop duplicate title
+  _show.body.appendChild(_overlay);
   _paintOverlay();
 }
 
@@ -447,7 +463,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) => {
@@ -460,7 +476,7 @@ export function unmount() {
       _stage.scene.remove(_group);
     }
   } catch (_) {}
-  _group = _overlay = null;
+  _group = _overlay = _show = null;
   _floor = null; _spine = null; _ribbon = null; _segMesh = []; _cutPlanes = []; _marker = null;
   _el = {}; _badge = null; _plain = false; _frameReg = false;
   _stage = _THREE = _ctx = null;

static/3d/surfaces/brain.js

@@ -28,6 +28,8 @@
 // Surface export shape: export default { id, title, endpoints, mount(ctx), unmount() }
 //   ctx = { stage, container, live, label, THREE, szl3d }
 
+import { createShowcase } from "./_showcase.js";
+
 const ID    = "brain";
 const TITLE = "Formula-Graph Brain";
 
@@ -64,7 +66,7 @@ const TIER_COLOR = {
 const TIER_RADIUS = { locked: 0.34, semantic: 0.24, experimental: 0.2, borrowed: 0.2, conjecture: 0.18 };
 
 let _stage = null, _THREE = null, _ctx = null, _group = null, _overlay = null;
-let _frameReg = false, _polls = [], _el = {}, _badge = null, _plain = false;
+let _frameReg = false, _polls = [], _el = {}, _badge = null, _plain = false, _show = null;
 
 let _nodeMeshes = {};   // id -> mesh
 let _edgeLines = [];    // line segments
@@ -347,7 +349,14 @@ function _buildOverlay(ctx) {
     '<div style="margin-top:8px"><button id="brain-plain" style="font:11px ui-monospace;background:#0f2027;color:#9fc;' +
       'border:1px solid #1b3a44;border-radius:6px;padding:3px 8px;cursor:pointer">Plain language</button></div>' +
     '<div id="brain-plainbox" style="display:none;margin-top:8px;font-size:10.5px;color:#bcd;line-height:1.55"></div>';
-  (ctx.container || document.body).appendChild(_overlay);
+  _show = createShowcase(ctx, {
+    id: ID, title: TITLE, accent: "#5b8dee", badge: _badge,
+    chips: [{ label: "MODELED", text: "formula graph", name: "br" }],
+    legend: true,
+  });
+  _overlay.style.cssText = "font:12px/1.5 ui-monospace,Menlo,monospace;color:#cfe3ea";
+  if (_overlay.firstChild) _overlay.removeChild(_overlay.firstChild); // drop duplicate title (+ its label span)
+  _show.body.appendChild(_overlay);
   const btn = _overlay.querySelector("#brain-plain");
   if (btn) btn.addEventListener("click", () => { _plain = !_plain; _applyPlain(); });
 }
@@ -366,6 +375,7 @@ function _paintOverlay() {
   const deg = (S.state === "error" || S.state === "degraded");
   const d = deg ? "—" : null;
   _set("brain-label", S.label || "MODELED");
+  if (_show) _show.setChip("br", S.label || "MODELED", { text: "formula graph" });
   _set("brain-ne", d || ((S.nodes.length || "—") + " / " + (S.edges.length || "—")));
   _set("brain-locked", d || (S.lockedCount != null ? String(S.lockedCount) + " (exactly 8)" : "—"));
   _set("brain-reward", d || (S.rewardFinal != null ? (S.rewardFinal * 100).toFixed(1) + "% mass" : "—"));
@@ -419,6 +429,7 @@ function _applyPlain() {
 // =============================================================================
 function unmount() {
   _polls.forEach((p) => { try { p.stop(); } catch (_) {} }); _polls = [];
+  try { if (_show) _show.destroy(); } catch (_) {}
   try { if (_overlay && _overlay.parentNode) _overlay.parentNode.removeChild(_overlay); } catch (_) {}
   try {
     if (_group && _stage) {
@@ -432,7 +443,7 @@ function unmount() {
       _stage.scene.remove(_group);
     }
   } catch (_) {}
-  _group = _overlay = null;
+  _group = _overlay = _show = null;
   _nodeMeshes = {}; _edgeLines = []; _pos = {};
   _el = {}; _badge = null; _plain = false; _frameReg = false;
   _stage = _THREE = _ctx = null;

static/3d/surfaces/catq.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    = "catq";
 const TITLE = "Post-Training Calibration Ternary Quant · CAT-Q (live)";
 
@@ -67,6 +69,7 @@ const ROW_CATQ   = 3.2;    // z-row for the CAT-Q (after) histogram
 let _stage = null, _THREE = null, _ctx = null, _group = null, _overlay = null;
 let _frameReg = false, _polls = [], _el = {}, _badge = null;
 let _plain = false;
+let _show = null;
 
 // geometry handles
 let _floor     = null;
@@ -412,7 +415,20 @@ function _buildOverlay() {
   _el["plain"] = pd;
   _overlay.appendChild(pd);
 
-  (ctx.container || document.body).appendChild(_overlay);
+  // Fold the legacy panel into the shared showcase overlay (surfaces/_showcase.js):
+  // title + live badge + doctrine legend live in the always-visible chrome; the
+  // descriptive text + KPI card become the collapsible body so the 3D scene is the star.
+  _show = createShowcase(_ctx, {
+    id: ID, title: TITLE, accent: "#5b8dee",
+    badge: _badge,
+    legend: true,
+  });
+  _overlay.style.position = "static";
+  _overlay.style.left = _overlay.style.top = "auto";
+  _overlay.style.maxWidth = "none";
+  _overlay.style.font = "inherit";
+  if (_overlay.firstChild) _overlay.removeChild(_overlay.firstChild); // drop duplicate title
+  _show.body.appendChild(_overlay);
   _paintOverlay();
 }
 
@@ -485,7 +501,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) => {
@@ -498,7 +514,7 @@ export function unmount() {
       _stage.scene.remove(_group);
     }
   } catch (_) {}
-  _group = _overlay = null;
+  _group = _overlay = _show = null;
   _floor = null; _barsAbs = []; _barsCatq = []; _gateAbs = null; _gateCatq = null;
   _el = {}; _badge = null; _plain = false; _frameReg = false;
   _stage = _THREE = _ctx = null;

static/3d/surfaces/ccattest.js

@@ -38,6 +38,8 @@
 // Nothing here is in the locked-8. Λ stays Conjecture 1. Trust never 100% — the
 // attestation is MODELED, not real trust.
 
+import { createShowcase } from "./_showcase.js";
+
 const ID    = "ccattest";
 const TITLE = "Confidential-Compute Attestation Chain · TEE / H100 CC (live)";
 
@@ -61,6 +63,7 @@ const MAX_BLOCKS  = 5;      // bootloader..gpu-vbios
 let _stage = null, _THREE = null, _ctx = null, _group = null, _overlay = null;
 let _frameReg = false, _polls = [], _el = {}, _badge = null;
 let _plain = false;
+let _show = null;
 
 // geometry handles
 let _blocks   = [];   // Array<{ mesh: THREE.Mesh, ring: THREE.Mesh }> — stacked hash-blocks
@@ -345,7 +348,20 @@ function _buildOverlay() {
   _el["plain"] = pd;
   _overlay.appendChild(pd);
 
-  (ctx.container || document.body).appendChild(_overlay);
+  // Fold the legacy panel into the shared showcase overlay (surfaces/_showcase.js):
+  // title + live badge + doctrine legend live in the always-visible chrome; the
+  // descriptive text + KPI card become the collapsible body so the 3D scene is the star.
+  _show = createShowcase(_ctx, {
+    id: ID, title: TITLE, accent: "#5b8dee",
+    badge: _badge,
+    legend: true,
+  });
+  _overlay.style.position = "static";
+  _overlay.style.left = _overlay.style.top = "auto";
+  _overlay.style.maxWidth = "none";
+  _overlay.style.font = "inherit";
+  if (_overlay.firstChild) _overlay.removeChild(_overlay.firstChild); // drop duplicate title
+  _show.body.appendChild(_overlay);
   _paintOverlay();
 }
 
@@ -397,7 +413,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) => {
@@ -410,7 +426,7 @@ export function unmount() {
       _stage.scene.remove(_group);
     }
   } catch (_) {}
-  _group = _overlay = null;
+  _group = _overlay = _show = null;
   _blocks = []; _identMarker = null; _floor = null;
   _el = {}; _badge = null; _plain = false; _frameReg = false;
   _stage = _THREE = _ctx = null;

static/3d/surfaces/counter-uas.js

@@ -29,6 +29,8 @@
 //   /api/a11oy/v1/counter-uas/gates        13-axis Λ-gate spec
 //   /static/3d/surfaces/data/drones_db.json  53 verified drone fingerprints (vendored)
 
+import { createShowcase } from "./_showcase.js";
+
 const ID = "counter-uas";
 const TITLE = "Counter-UAS · killinchu";
 
@@ -56,7 +58,7 @@ const CLS = {
 };
 
 let _ctx = null, _stage = null, THREE = null;
-let _group = null, _globe = null, _handles = [], _frameOff = null, _overlay = null;
+let _group = null, _globe = null, _handles = [], _frameOff = null, _overlay = null, _show = null;
 let _disposables = [];
 
 // Live caches (honest: empty until a real fetch lands).
@@ -346,57 +348,48 @@ function buildDsseLock() {
 
 // ── overlay panels (the HUD reads live values + honest labels) ────────────────
 function buildOverlay() {
-  _overlay = document.createElement("div");
-  _overlay.className = "szl3d-surface-overlay";
-  Object.assign(_overlay.style, { position: "absolute", left: "14px", top: "14px", right: "14px",
-    zIndex: "5", display: "flex", justifyContent: "space-between", gap: "12px",
-    pointerEvents: "none", fontFamily: "ui-monospace,Menlo,monospace" });
+  const badge = _ctx.live.createBadge();
 
-  const left = document.createElement("div");
-  Object.assign(left.style, { display: "flex", flexDirection: "column", gap: "8px", maxWidth: "min(46%,360px)", pointerEvents: "auto" });
-  const right = document.createElement("div");
-  Object.assign(right.style, { display: "flex", flexDirection: "column", gap: "8px", maxWidth: "min(46%,360px)", alignItems: "flex-end", pointerEvents: "auto" });
+  // Shared collapsible showcase: title + badge + legend live in the compact chrome;
+  // the verdict / RID / posture / gates / fingerprint panels fold into the (collapsed)
+  // body so the 3D globe stays the star and text never spans the viewport.
+  _show = createShowcase(_ctx, {
+    id: ID, title: TITLE, accent: "#5b8dee", badge, legend: true,
+  });
+
+  // panels flow (wrap) inside the body instead of a full-width two-column banner
+  _overlay = document.createElement("div");
+  Object.assign(_overlay.style, {
+    display: "flex", flexWrap: "wrap", gap: "8px",
+    fontFamily: "ui-monospace,Menlo,monospace",
+  });
 
   const card = (title) => {
     const c = document.createElement("div");
-    c.style.cssText = "background:rgba(8,14,20,.82);border:1px solid #1d2a36;border-radius:9px;padding:9px 11px;display:flex;flex-direction:column;gap:5px;backdrop-filter:blur(3px)";
+    c.style.cssText = "flex:1 1 220px;background:rgba(8,14,20,.82);border:1px solid #1d2a36;border-radius:9px;padding:9px 11px;display:flex;flex-direction:column;gap:5px";
     const h = document.createElement("div");
     h.style.cssText = "font:600 11px ui-sans-serif,system-ui;color:#eef3f6;letter-spacing:.5px;text-transform:uppercase";
     h.textContent = title; c.appendChild(h);
     return c;
   };
 
-  const head = document.createElement("div");
-  head.style.cssText = "font:600 13px ui-sans-serif,system-ui;color:#eef3f6;letter-spacing:.4px";
-  head.textContent = TITLE;
-  left.appendChild(head);
-
-  const badge = _ctx.live.createBadge();
-  left.appendChild(badge.el);
-
   // D14: 13-axis Λ-gate verdict panel
   _verdictPanel = card("Λ-Gate Verdict · senses-and-evidences");
-  left.appendChild(_verdictPanel);
+  _overlay.appendChild(_verdictPanel);
 
   // D15: DSSE signature panel (real ECDSA-P256)
   _fpPanel = null;
   _ridPanel = card("Remote-ID / RID Validator");
-  left.appendChild(_ridPanel);
+  _overlay.appendChild(_ridPanel);
 
-  // right column
   _posturePanel = card("JIATF-401 posture");
-  right.appendChild(_posturePanel);
+  _overlay.appendChild(_posturePanel);
   _gatesPanel = card("13-Axis Λ-Gates");
-  right.appendChild(_gatesPanel);
+  _overlay.appendChild(_gatesPanel);
   _fingerprintCallout = card("Fingerprint match · 53-DB");
-  right.appendChild(_fingerprintCallout);
-
-  const legend = _ctx.label.legend();
-  legend.style.opacity = "0.85"; legend.style.pointerEvents = "none";
-  left.appendChild(legend);
+  _overlay.appendChild(_fingerprintCallout);
 
-  _overlay.appendChild(left); _overlay.appendChild(right);
-  (_ctx.container || document.body).appendChild(_overlay);
+  _show.body.appendChild(_overlay);
   return badge;
 }
 
@@ -583,9 +576,10 @@ function unmount() {
   _frameOff = null;
   for (const d of _disposables) { try { d(); } catch (_) {} }
   _disposables = [];
+  try { if (_show) _show.destroy(); } catch (_) {}
   try { if (_overlay && _overlay.parentNode) _overlay.parentNode.removeChild(_overlay); } catch (_) {}
   try { if (_group && _stage) _stage.scene.remove(_group); } catch (_) {}
-  _overlay = null; _group = null; _globe = null; _trackGroup = null;
+  _overlay = _show = null; _group = null; _globe = null; _trackGroup = null;
   _verdictBeam = null; _dsseLock = null; _stage = null; THREE = null; _ctx = null;
   _state = { evaluate: null, telemetry: null, cued: null, airpicture: null, gates: null, db: null, meta: {}, dbCount: 0 };
 }

static/3d/surfaces/ctxready.js

@@ -41,6 +41,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    = "ctxready";
 const TITLE = "Context-Ready Transformer";
 
@@ -67,6 +69,7 @@ const TILE_GAP = 0.40;  // pointer tile pitch
 let _stage = null, _THREE = null, _ctx = null, _group = null, _overlay = null;
 let _frameReg = false, _polls = [], _el = {}, _badge = null;
 let _plain = false;
+let _show = null;
 
 // geometry handles
 let _floor    = null;
@@ -417,7 +420,20 @@ function _buildOverlay() {
   _el["plain"] = pd;
   _overlay.appendChild(pd);
 
-  (ctx.container || document.body).appendChild(_overlay);
+  // Fold the legacy panel into the shared showcase overlay (surfaces/_showcase.js):
+  // title + live badge + doctrine legend live in the always-visible chrome; the
+  // descriptive text + KPI card become the collapsible body so the 3D scene is the star.
+  _show = createShowcase(_ctx, {
+    id: ID, title: TITLE, accent: "#5b8dee",
+    badge: _badge,
+    legend: true,
+  });
+  _overlay.style.position = "static";
+  _overlay.style.left = _overlay.style.top = "auto";
+  _overlay.style.maxWidth = "none";
+  _overlay.style.font = "inherit";
+  if (_overlay.firstChild) _overlay.removeChild(_overlay.firstChild); // drop duplicate title
+  _show.body.appendChild(_overlay);
   _paintOverlay();
 }
 
@@ -478,7 +494,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) => {
@@ -491,7 +507,7 @@ export function unmount() {
       _stage.scene.remove(_group);
     }
   } catch (_) {}
-  _group = _overlay = null;
+  _group = _overlay = _show = null;
   _floor = null;
   _pplBars = []; _pplGroup = null;
   _tilesK0 = []; _tilesKK = []; _ladGroup = null;

static/3d/surfaces/dla.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    = "dla";
 const TITLE = "Dynamic Linear Attention";
 
@@ -66,6 +68,7 @@ const MAX_PTS  = 16;     // cap points rendered (matches head trim)
 let _stage = null, _THREE = null, _ctx = null, _group = null, _overlay = null;
 let _frameReg = false, _polls = [], _el = {}, _badge = null;
 let _plain = false;
+let _show = null;
 
 // geometry handles
 let _floor       = null;
@@ -456,7 +459,20 @@ function _buildOverlay() {
   _el["plain"] = pd;
   _overlay.appendChild(pd);
 
-  (ctx.container || document.body).appendChild(_overlay);
+  // Fold the legacy panel into the shared showcase overlay (surfaces/_showcase.js):
+  // title + live badge + doctrine legend live in the always-visible chrome; the
+  // descriptive text + KPI card become the collapsible body so the 3D scene is the star.
+  _show = createShowcase(_ctx, {
+    id: ID, title: TITLE, accent: "#5b8dee",
+    badge: _badge,
+    legend: true,
+  });
+  _overlay.style.position = "static";
+  _overlay.style.left = _overlay.style.top = "auto";
+  _overlay.style.maxWidth = "none";
+  _overlay.style.font = "inherit";
+  if (_overlay.firstChild) _overlay.removeChild(_overlay.firstChild); // drop duplicate title
+  _show.body.appendChild(_overlay);
   _paintOverlay();
 }
 
@@ -516,7 +532,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) => {
@@ -529,7 +545,7 @@ export function unmount() {
       _stage.scene.remove(_group);
     }
   } catch (_) {}
-  _group = _overlay = null;
+  _group = _overlay = _show = null;
   _floor = null;
   _seqGroup = null; _tokDots = []; _infoSpikes = []; _bndFixed = []; _bndDla = [];
   _curveGroup = null; _curveFixed = []; _curveDla = [];

static/3d/surfaces/dllm.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    = "dllm";
 const TITLE = "Diffusion-LLM Parallel Denoising (live)";
 
@@ -66,6 +68,7 @@ const MAX_COLS  = 16;     // wrap the row into a grid after this many columns
 let _stage = null, _THREE = null, _ctx = null, _group = null, _overlay = null;
 let _frameReg = false, _polls = [], _el = {}, _badge = null;
 let _plain = false;
+let _show = null;
 
 // geometry handles
 let _cells = [];     // Array<THREE.Mesh> — one per token position
@@ -375,7 +378,20 @@ function _buildOverlay() {
   _el["plain"] = pd;
   _overlay.appendChild(pd);
 
-  (ctx.container || document.body).appendChild(_overlay);
+  // Fold the legacy panel into the shared showcase overlay (surfaces/_showcase.js):
+  // title + live badge + doctrine legend live in the always-visible chrome; the
+  // descriptive text + KPI card become the collapsible body so the 3D scene is the star.
+  _show = createShowcase(_ctx, {
+    id: ID, title: TITLE, accent: "#5b8dee",
+    badge: _badge,
+    legend: true,
+  });
+  _overlay.style.position = "static";
+  _overlay.style.left = _overlay.style.top = "auto";
+  _overlay.style.maxWidth = "none";
+  _overlay.style.font = "inherit";
+  if (_overlay.firstChild) _overlay.removeChild(_overlay.firstChild); // drop duplicate title
+  _show.body.appendChild(_overlay);
   _paintOverlay();
 }
 
@@ -427,7 +443,7 @@ function _paintOverlay() {
 export function unmount() {
   _polls.forEach((p) => { try { p.stop(); } catch (_) {} }); _polls = [];
   if (_playTimer) { try { clearInterval(_playTimer); } catch (_) {} _playTimer = 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,7 +456,7 @@ export function unmount() {
       _stage.scene.remove(_group);
     }
   } catch (_) {}
-  _group = _overlay = null;
+  _group = _overlay = _show = null;
   _cells = []; _floor = null; _roundMarker = null;
   _el = {}; _badge = null; _plain = false; _frameReg = false;
   _playRound = 0;

static/3d/surfaces/elf.js

@@ -45,6 +45,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    = "elf";
 const TITLE = "ELF · Continuous-Embedding Flow Matching (live)";
 
@@ -66,6 +68,7 @@ const SEQ_SPREAD = 2.6;   // z-offset per sequence position (fans the 4 position
 let _stage = null, _THREE = null, _ctx = null, _group = null, _overlay = null;
 let _frameReg = false, _polls = [], _el = {}, _badge = null;
 let _plain = false;
+let _show = null;
 
 // geometry handles
 let _vocabDots = [];   // Array<THREE.Mesh> — the 6 unit-circle symbol embeddings
@@ -392,7 +395,20 @@ function _buildOverlay() {
   _el["plain"] = pd;
   _overlay.appendChild(pd);
 
-  (ctx.container || document.body).appendChild(_overlay);
+  // Fold the legacy panel into the shared showcase overlay (surfaces/_showcase.js):
+  // title + live badge + doctrine legend live in the always-visible chrome; the
+  // descriptive text + KPI card become the collapsible body so the 3D scene is the star.
+  _show = createShowcase(_ctx, {
+    id: ID, title: TITLE, accent: "#5b8dee",
+    badge: _badge,
+    legend: true,
+  });
+  _overlay.style.position = "static";
+  _overlay.style.left = _overlay.style.top = "auto";
+  _overlay.style.maxWidth = "none";
+  _overlay.style.font = "inherit";
+  if (_overlay.firstChild) _overlay.removeChild(_overlay.firstChild); // drop duplicate title
+  _show.body.appendChild(_overlay);
   _paintOverlay();
 }
 
@@ -457,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) => {
@@ -470,7 +486,7 @@ export function unmount() {
       _stage.scene.remove(_group);
     }
   } catch (_) {}
-  _group = _overlay = null;
+  _group = _overlay = _show = null;
   _vocabDots = []; _pathLines = []; _x0Marks = []; _tgtMarks = []; _decMarks = []; _floor = null;
   _el = {}; _badge = null; _plain = false; _frameReg = false;
   _stage = _THREE = _ctx = null;

static/3d/surfaces/energy.js

@@ -39,6 +39,8 @@
 //
 // CONTRACT: default-export { id, title, endpoints[], mount(ctx), unmount() }.
 
+import { createShowcase } from "./_showcase.js";
+
 const ID = "energy";
 const TITLE = "Energy · Harvest";
 const POSTURE_EP = "/api/a11oy/v1/harvest/posture";
@@ -54,6 +56,7 @@ let _stage = null, _THREE = null, _ctx = null;
 let _hPosture = null, _hLoop = null;
 let _root = null;          // THREE.Group holding everything we add (one remove on unmount)
 let _overlay = null;       // DOM HUD panel
+let _show = null;          // shared collapsible showcase chrome
 let _frameFn = null;       // our per-frame callback (guards on _root null after unmount)
 let _hud = {};             // references to live HUD chip/value elements
 let _scene = null;         // built scene-object refs the frame loop + pollers animate
@@ -476,25 +479,21 @@ function build() {
 // ----------------------------------------------------------------------------
 function buildHUD() {
   const lab = _ctx.label;
+  const badge = _ctx.live.createBadge();
+  _hud.badge = badge;
+
+  _show = createShowcase(_ctx, {
+    id: ID, title: TITLE, accent: "#5b8dee", badge, legend: true,
+  });
+
+  // rows fold into the (collapsed) showcase body; the 3D funnel stays the star.
   _overlay = document.createElement("div");
   _overlay.className = "szl3d-energy-hud";
   Object.assign(_overlay.style, {
-    position: "absolute", left: "14px", top: "14px", zIndex: "6",
     display: "flex", flexDirection: "column", gap: "7px",
-    maxWidth: "min(94%,430px)", font: "12px ui-monospace,SFMono-Regular,Menlo,monospace",
-    color: "#cfe0ea", background: "rgba(6,11,16,.72)", 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 = "⚡ Energy · Harvest <span style='color:#46586a;font-weight:400'>· flagship · live joules funnel</span>";
-  _overlay.appendChild(title);
-
-  const badge = _ctx.live.createBadge();
-  _overlay.appendChild(badge.el);
-  _hud.badge = badge;
-
   // a small row factory: label text + value + honesty chip
   function row(key, name) {
     const wrap = document.createElement("div");
@@ -524,10 +523,7 @@ function buildHUD() {
   note.textContent = "joules MEASURED only on-box (NVML exporter). Off-box label=sample, evidence empty — the funnel shows its structure, never a fabricated fill. Modeled on Electricity Maps + deck.gl; rendered in three.js (see manifest).";
   _overlay.appendChild(note);
 
-  const legend = _ctx.label.legend(); legend.style.opacity = "0.85"; legend.style.marginTop = "2px";
-  _overlay.appendChild(legend);
-
-  (_ctx.container || document.body).appendChild(_overlay);
+  _show.body.appendChild(_overlay);
 }
 
 function _setRow(key, text, label) {
@@ -684,6 +680,7 @@ function mount(ctx) {
 function unmount() {
   try { if (_hPosture) _hPosture.stop(); } catch (_) {}
   try { if (_hLoop) _hLoop.stop(); } catch (_) {}
+  try { if (_show) _show.destroy(); } catch (_) {}
   try { if (_overlay && _overlay.parentNode) _overlay.parentNode.removeChild(_overlay); } catch (_) {}
   try { if (_root && _stage) _stage.scene.remove(_root); } catch (_) {}
   // dispose geometries/materials we created under _root
@@ -694,7 +691,7 @@ function unmount() {
     });
   } catch (_) {}
   try { if (_stage) _stage.setBloom(false); } catch (_) {}
-  _hPosture = null; _hLoop = null; _overlay = null; _root = null;
+  _hPosture = null; _hLoop = null; _overlay = null; _show = null; _root = null;
   _scene = null; _frameFn = null; _hud = {}; _ctx = null; _stage = null; _THREE = null;
 }
 

static/3d/surfaces/episodic.js

@@ -41,6 +41,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    = "episodic";
 const TITLE = "Episodic Memory · Temporal Knowledge-Graph (live)";
 
@@ -59,9 +61,8 @@ const C_GRID   = 0x1b3a44;  // floor / link colour
 const N_SLOTS = 16;   // visual episode slots (matches endpoint n_episodes cap)
 const SPAN_X  = 16;   // world-unit span of the time axis
 
-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 = [];        // Array<THREE.Mesh> — one per episode
@@ -269,107 +270,37 @@ function _onFrame() {
 // =============================================================================
 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 graph of <b>episodes</b> (event/fact nodes) laid out on a time axis, sized by ' +
-    '<b>salience</b>, linked by temporal-succession and semantic-relatedness edges. A ' +
-    '<b>RECALL</b> query lights up the top-k episodes by recency\u00d7salience\u00d7relatedness. ' +
-    'Honesty label <b>MODELED</b> (synthetic/public episodes; clean-room-inspired by ' +
-    'MemMachine\u2019s episodic/graph memory idea \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 = "episodic";
-  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("ep-n",       "episodes in graph"));
-  grid.appendChild(kpiRow("ep-query",   "recall query"));
-  grid.appendChild(kpiRow("ep-top1",    "top recall (id, score)"));
-  grid.appendChild(kpiRow("ep-receipt", "receipt type"));
-  grid.appendChild(kpiRow("ep-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 = "MemMachine github.com/MemMachine/MemMachine (Apache-2.0) \u00b7 Tulving (1972) episodic/semantic memory \u00b7 Zep/Graphiti github.com/getzep/graphiti. 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: "episodic graph", name: "ep" }],
+    legend: ["MODELED", "SAMPLE"],
+    description:
+      'A small graph of <b>episodes</b> (event/fact nodes) laid out on a time axis, sized by ' +
+      '<b>salience</b>, linked by temporal-succession and semantic-relatedness edges. A ' +
+      '<b>RECALL</b> query lights up the top-k episodes by recency\u00d7salience\u00d7relatedness. ' +
+      'Honesty label <b>MODELED</b> (synthetic/public episodes; clean-room-inspired by ' +
+      'MemMachine\u2019s episodic/graph memory idea \u2014 not a reproduction). 0 runtime CDN.',
+    citations:
+      "MemMachine github.com/MemMachine/MemMachine (Apache-2.0) \u00b7 Tulving (1972) episodic/semantic memory \u00b7 Zep/Graphiti github.com/getzep/graphiti. MODELED \u00b7 not claimed-as.",
+    plain: { html: _plainHtml },
   });
-  _overlay.appendChild(pl);
 
-  const pd = document.createElement("div");
-  pd.id = "ep-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["ep-n"]       = _show.addField("episodes in graph");
+  _el["ep-query"]   = _show.addField("recall query");
+  _el["ep-top1"]    = _show.addField("top recall (id, score)");
+  _el["ep-receipt"] = _show.addField("receipt type");
+  _el["ep-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 n = S.episodes ? String(S.episodes.length) : "loading\u2026";
   const top0 = (S.topK && S.topK[0]) ? S.topK[0] : null;
   const topTxt = top0 ? (top0.id + " (score " + fx(top0.score, 3) + ")") : "loading\u2026";
   const rtype = S.receiptType || "loading\u2026";
-  pd.innerHTML =
+  return (
     "<b>What this means:</b> Most AI systems today either forget everything between " +
     "sessions or dump raw transcripts into a vector store. This organ demonstrates a " +
     "<b>third option</b>: memories as a small, auditable <b>graph</b> of discrete " +
@@ -381,7 +312,7 @@ function _applyPlain() {
     "cryptographic signing, never faked as one. " +
     "Plain: this is what \u201cthe AI remembers what happened, and can prove what it " +
     "remembers,\u201d looks like \u2014 but this view is a <b>MODELED</b> demonstration with " +
-    "synthetic/public data, not a production memory store.";
+    "synthetic/public data, not a production memory store.");
 }
 
 function _tok(s) {
@@ -404,7 +335,7 @@ function _paintOverlay() {
   _set("ep-receipt", t || (S.receiptType || "\u2014"));
   // honesty label verbatim — never upgraded
   _set("ep-label",   t || (S.label || "MODELED"));
-  if (_plain) _applyPlain();
+  if (_show) { _show.setChip("ep", S.label || "MODELED", { text: "episodic graph" }); _show.refreshPlain(); }
 }
 
 // =============================================================================
@@ -412,7 +343,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) => {
@@ -425,9 +356,9 @@ export function unmount() {
       _stage.scene.remove(_group);
     }
   } catch (_) {}
-  _group = _overlay = null;
+  _group = _show = null;
   _nodes = []; _tempoLinks = null; _semLinks = null; _queryMarker = null;
-  _el = {}; _badge = null; _plain = false; _frameReg = false;
+  _el = {}; _badge = null; _frameReg = false;
   _stage = _THREE = _ctx = null;
   S.label = S.episodes = S.edges = S.topK = S.query = S.formula = S.receiptType = null;
   S.state = "init";