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

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

a11oy_code_orchestrator.py

@@ -68,7 +68,12 @@ from fastapi.responses import JSONResponse, PlainTextResponse, StreamingResponse
 # never break the existing orchestrator routes (Zero-Bandaid: degrade honestly).
 # ---------------------------------------------------------------------------
 try:
-    import a11oy_agent_loop as _agent  # governed FSM
+    # Prefer the installable shared substrate; fall back to the local vendored
+    # copy if the package is absent (guarded — the outer except is the final net).
+    try:
+        from szl_substrate import a11oy_agent_loop as _agent  # governed FSM
+    except Exception:
+        import a11oy_agent_loop as _agent  # governed FSM
 except Exception as _exc:  # pragma: no cover
     _agent = None
     _AGENT_IMPORT_ERROR = str(_exc)

static/3d/holographic.html

@@ -159,7 +159,7 @@ const SURFACES = [
   { id: "dla",         title: "Dynamic Linear Attention",                    mod: "/static/3d/surfaces/dla.js" },
   { id: "ctxready",    title: "Context-Ready Transformer",                   mod: "/static/3d/surfaces/ctxready.js" },
   { id: "opera",       title: "OPERA Perplexity-Reward Alignment",           mod: "/static/3d/surfaces/opera.js" },
-  { id: "brain",       title: "Formula-Graph Brain",                         mod: "/static/3d/surfaces/brain.js" },
+  { id: "brain",       title: "Brain — live knowledge graph",                mod: "/static/3d/surfaces/brain.js" },
   { id: "zkinfer",     title: "zkML Proof-of-Inference (Cryptographic Receipts)", mod: "/static/3d/surfaces/zkinfer.js" },
   { id: "flower", title: "Flower Brain", mod: "/static/3d/surfaces/flower.js" },
   { id: "agentmem",    title: "AgentMem · Λ-Governed Agent Memory (synthesis)",   mod: "/static/3d/surfaces/agentmem.js" },

static/3d/surfaces/brain.js

@@ -1,29 +1,37 @@
 // SPDX-License-Identifier: Apache-2.0
-// © 2026 Lutar, Stephen P. — SZL Holdings · ORCID 0009-0001-0110-4173 · Doctrine v11
+// © 2026 Lutar, Stephen P. Jr. — SZL Holdings · ORCID 0009-0001-0110-4173 · Doctrine v11
 //
-// surfaces/brain.js — FORMULA-GRAPH BRAIN (SZL ORIGINAL). Renders the estate's
-// OWN proven-formula library as a self-organizing LIVING GRAPH: each formula is
-// a NODE, each real proof/semantic dependency is an EDGE, and a MODELED
-// spreading-activation ("firing") pulse propagates outward from the locked-8
-// proven core across K rounds. This is the "make it our own" fusion — it reuses
-// three field-leader mechanisms purely as visualization primitives:
-//   * DLA (arXiv:2606.10650)      — importance-aware activation ROUTING (edge weights)
-//   * OPERA (arXiv:2606.25757)    — intrinsic firing REWARD = proven-mass reached
-//   * Context-Ready (arXiv:2606.27538) — K-UNROLL as K spreading rounds
+// surfaces/brain.js — LIVING NEURAL-BRAIN (SZL ORIGINAL). Renders the estate's
+// OWN harvested knowledge graph (GET /api/a11oy/v1/brain/graph) as a
+// neural-network-shaped brain: the SZL answer to the leaked Obsidian
+// "self-writing neural-vault", but real, owned, and honest.
 //
-// THE GRAPH IS REAL: every node traces to a named Lean declaration in a cited
-// lutar-lean file (kernel c7c0ba17) or a real DOI/arXiv. The FIRING DYNAMIC is
-// MODELED (a deterministic toy on the real topology), read VERBATIM from
-// /api/killinchu/v1/fgbrain/{graph,fire}. The honesty label "MODELED" is shown
-// as-is and never upgraded.
+// FEED-FORWARD LAYERS (the `layer` field on every node):
+//   field (-1)  harvested field leaders (outer world; papers/repos/people/orgs)
+//   input (0)   repos + surfaces (the estate's own inputs)
+//   hidden (1)  topic clusters
+//   hidden (2)  formulas — the locked-8 {F1,F4,F7,F11,F12,F18,F19,F22} highlighted
+//   output (3)  estate root + live endpoints (the thesis)
+// Links fire along edges; node size scales with connectivity (degree).
 //
-// HARD INVARIANTS (Doctrine v11):
-//   * locked-proven = EXACTLY 8 {F1,F4,F7,F11,F12,F18,F19,F22}.
-//   * Λ unconditional uniqueness = Conjecture 1 -> GRAY node, NEVER green/proven.
-//   * Khipu BFT (Conj-2/3) -> GRAY, never green.
-//   * COLOURS: lattice-blue 0x5b8dee, violet-blue 0x8a6bff, proof-teal 0x3af4c8,
-//     greys. Purple BANNED as UI/background.
-//   * 0 runtime CDN (three.js via ctx.THREE). Degrades gracefully on 404.
+// PERFORMANCE (the graph is ~9.4k nodes / ~14k edges — never render it all):
+//   * ?summary=1 first → instant honest count pills + the axis-expand list.
+//   * full graph fetched once (progressive) → we render a PERFORMANT SUBSET:
+//     the estate core (layers 0..3) + the top-connected field leaders, with a
+//     per-axis expand control. Long-tail field leaders draw via ONE InstancedMesh
+//     (LOD); the estate core + top leaders draw as individual meshes so the shared
+//     showcase labels (top-N + hover/tap) can target them. Hard cap on rendered
+//     nodes keeps it smooth on mobile.
+//
+// HONESTY (Doctrine v11 — read VERBATIM, never upgraded):
+//   * BOTH counts shown: distinct_artifacts (the honest headline) AND the raw
+//     node_count, with the endpoint's note that ~56% of nodes are arXiv
+//     co-author `person` nodes — NEVER present the raw total as distinct work.
+//   * locked-proven = EXACTLY 8; harvest adds nothing to it.
+//   * Λ = Conjecture 1 → GREY node, NEVER green/proven.
+//   * palette: lattice-blue 0x5b8dee · violet-blue 0x8a6bff · proof-teal 0x3af4c8
+//     · greys. PURPLE BANNED. 0 runtime CDN (three.js via ctx.THREE).
+//   * inspiration (leaked neural-vault) is cited as prior art, never claimed.
 //
 // Surface export shape: export default { id, title, endpoints, mount(ctx), unmount() }
 //   ctx = { stage, container, live, label, THREE, szl3d }
@@ -31,433 +39,550 @@
 import { createShowcase } from "./_showcase.js";
 
 const ID    = "brain";
-const TITLE = "Formula-Graph Brain";
-
-const EP_GRAPH  = "https://szlholdings-killinchu.hf.space/api/killinchu/v1/fgbrain/graph";
-const EP_FIRE   = "https://szlholdings-killinchu.hf.space/api/killinchu/v1/fgbrain/fire?seed=42&K=10";
-// wave-16: self-repair probe (lesion F1, a known articulation point, and heal)
-const EP_REPAIR = "https://szlholdings-killinchu.hf.space/api/killinchu/v1/fgbrain/repair?down=F1&steps=12";
-// wave-17: multi-timescale plasticity probe (Hebb/BCM/STDP/EWC per-tier learning rates)
-const EP_PLAST  = "https://szlholdings-killinchu.hf.space/api/killinchu/v1/fgbrain/plasticity?seed=42&rounds=30";
-// wave-18: write-back memory loop (HEART/BLOOD hash-chain + A-MEM reconsolidation)
-const EP_MEM    = "https://szlholdings-killinchu.hf.space/api/killinchu/v1/fgbrain/memory?seed=42&sessions=5";
-// wave-19: homeostatic self-regulation (MAPE-K + HRRL drive-reduction, meta-stats only)
-const EP_VITALS = "https://szlholdings-killinchu.hf.space/api/killinchu/v1/fgbrain/vitals?seed=42&rounds=12";
-// wave-20: evolutionary self-improvement (MAP-Elites/DGM archive; kernel gate disposes)
-const EP_EVOLVE = "https://szlholdings-killinchu.hf.space/api/killinchu/v1/fgbrain/evolve?seed=42&generations=15";
-// wave-21: one authoritative energy signal (szl-energy-attest; MEASURED or honest UNAVAILABLE)
-const EP_ENERGY = "https://szlholdings-killinchu.hf.space/api/killinchu/v1/fgbrain/vitals/energy";
-
-// tier -> colour. proof-teal for the proven core, lattice-blue for verified/experimental,
-// violet-blue for borrowed fusions, GREY for conjectures (never green).
-const C_LOCKED = 0x3af4c8;  // proof-teal  (locked-proven core)
-const C_SEMANT = 0x5b8dee;  // lattice-blue (semantic-verified)
-const C_EXPER  = 0x5b8dee;  // lattice-blue (experimental, dimmer)
-const C_BORROW = 0x8a6bff;  // violet-blue (borrowed field-leader fusions)
-const C_CONJ   = 0x5a6570;  // GREY (conjectures — never green)
-const C_EDGE   = 0x1b3a44;  // dim link
-const C_DIM    = 0x42505d;  // grey (degraded / no live data)
-const C_FIRE   = 0x3af4c8;  // firing pulse (proof-teal)
-
-const TIER_COLOR = {
-  locked: C_LOCKED, semantic: C_SEMANT, experimental: C_EXPER,
-  borrowed: C_BORROW, conjecture: C_CONJ,
-};
-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, _show = null;
-
-let _nodeMeshes = {};   // id -> mesh
-let _edgeLines = [];    // line segments
-let _pos = {};          // id -> THREE.Vector3
-let _t0 = 0;
+const TITLE = "Brain — live knowledge graph";
+
+// same-origin a11oy endpoints (canonical a-11-oy.com in prod; relative here)
+const EP_SUMMARY = "/api/a11oy/v1/brain/graph?summary=1";
+const EP_GRAPH   = "/api/a11oy/v1/brain/graph";
+
+// palette (doctrine v11) — NO purple
+const C_FIELD   = 0x3a5a8c;  // lattice-blue (dim) — harvested field leaders
+const C_INPUT   = 0x5b8dee;  // lattice-blue — repos + surfaces (input)
+const C_TOPIC   = 0x8a6bff;  // violet-blue — topic clusters
+const C_FORMULA = 0x8a6bff;  // violet-blue — formulas
+const C_LOCKED  = 0x3af4c8;  // proof-teal — locked-proven core
+const C_ESTATE  = 0x3af4c8;  // proof-teal — estate root (output)
+const C_ENDPT   = 0x5b8dee;  // lattice-blue — live endpoints
+const C_CONJ    = 0x5a6570;  // GREY — conjectures (Λ) — never green
+const C_EDGE    = 0x1b3a44;  // dim link
+const C_FIRE    = 0x3af4c8;  // firing pulse (proof-teal)
+
+// feed-forward x-position per layer (field outer-left → estate output-right)
+const LAYER_X = { "-1": -14, "0": -6.5, "1": -1.0, "2": 4.5, "3": 10.5 };
+// disc radius per layer (field ring is broad; the estate core is compact)
+const LAYER_R = { "-1": 8.5, "0": 4.2, "1": 2.0, "2": 3.2, "3": 1.6 };
+
+// render budget (LOD): keep the estate core + this many top-connected leaders
+const FIELD_TOP  = 480;   // default top-connected field leaders
+const MAX_NODES  = 1650;  // hard cap on rendered nodes (mobile-safe)
+const LABEL_MESH_MAX = 220; // nodes drawn as individual meshes (labelable)
+const MAX_EDGES  = 6500;  // rendered edge cap
+const FIRE_MAX   = 220;   // simultaneous firing pulses
+
+let _stage = null, _THREE = null, _ctx = null, _group = null, _show = null;
+let _badge = null, _polls = [], _frameReg = false, _t0 = 0;
+
+// scene objects
+let _sphereGeo = null;                 // shared unit sphere for individual meshes
+let _labelMeshes = [];                 // individual Mesh nodes (labelable/hover)
+let _inst = null, _instGeo = null, _instMat = null; // InstancedMesh long tail
+let _edges = null, _edgeGeo = null, _edgeMat = null; // LineSegments
+let _fire = null, _fireGeo = null, _fireMat = null;  // firing pulse Points
+let _fireEdges = [];                   // [{a:Vec3, b:Vec3, off}] sampled edges
+let _pos = {};                         // id -> Vector3 (rendered nodes)
+
+// axis expand control
+let _activeAxes = new Set();           // axes fully included beyond top-N
+let _axisBtns = {};                    // axis -> button el
 
 const S = {
-  label: null, nodes: [], edges: [], tierCounts: null,
-  lockedCount: null, rewardPerK: null, rewardFinal: null,
-  nodesFired: null, conjGreen: null, state: "init",
-  lesion: null, bodyHealth: null, lam2Before: null, lam2After: null, connectedAfter: null,
-  lockedFrozen: null, plastScore: null, ewcCore: null,
-  beats: null, chainOk: null, reconsGain: null,
-  energyStatus: null, energyJoules: null,
-  driveFinal: null, viability: null, inBand: null, setpointCount: null,
-  lockedUntouched: null, failClosed: null,
-  archiveCells: null, archiveCellsPossible: null, modeledPromotions: null,
-  gateImmutable: null, claimPinningOk: null, rollbackRestored: null,
+  label: null, state: "init", loaded: false,
+  // honest counts (from ?summary=1 / full)
+  nodeCount: null, linkCount: null, distinct: null, persons: null,
+  artifactNote: null, lockedFlagged: null,
+  byLayer: null, byKind: null, byAxis: null,
+  // full graph (client cache)
+  nodes: null, links: null, byId: null,
+  // render stats
+  renderedNodes: 0, renderedEdges: 0, fieldShown: 0,
 };
 
-// deterministic layout: concentric shells by tier (locked core -> outward),
-// angle from a hash of the id (stable, no RNG needed on the client).
-const SHELL = { locked: 0.0, semantic: 2.2, experimental: 3.6, borrowed: 4.8, conjecture: 6.0 };
-function _hash(str) { let h = 2166136261 >>> 0; for (let i = 0; i < str.length; i++) { h ^= str.charCodeAt(i); h = Math.imul(h, 16777619) >>> 0; } return h; }
+// -------------------------------------------------------------------------- //
+// deterministic layout: golden-angle disc in the Y-Z plane per layer, laid
+// out along X feed-forward. Stable (hash-seeded), no RNG needed on the client.
+// -------------------------------------------------------------------------- //
+function _hash(str) {
+  let h = 2166136261 >>> 0;
+  for (let i = 0; i < str.length; i++) { h ^= str.charCodeAt(i); h = Math.imul(h, 16777619) >>> 0; }
+  return h;
+}
 
-function _layout(nodes) {
+function _layout(rendered) {
   _pos = {};
-  const byTier = {};
-  nodes.forEach((n) => { (byTier[n.tier] = byTier[n.tier] || []).push(n); });
-  Object.keys(byTier).forEach((tier) => {
-    const arr = byTier[tier];
-    const r = SHELL[tier] != null ? SHELL[tier] : 5.0;
+  const byLayer = {};
+  rendered.forEach((n) => { const L = String(n.layer); (byLayer[L] = byLayer[L] || []).push(n); });
+  Object.keys(byLayer).forEach((L) => {
+    const arr = byLayer[L];
+    const x = LAYER_X[L] != null ? LAYER_X[L] : 0;
+    const R = LAYER_R[L] != null ? LAYER_R[L] : 4;
+    const N = arr.length;
     arr.forEach((n, i) => {
-      const base = (_hash(n.id) % 360) * Math.PI / 180;
-      const ang = base + (i / Math.max(1, arr.length)) * 2 * Math.PI * 0.15;
-      const tilt = ((_hash(n.id + "y") % 200) / 200 - 0.5) * (tier === "locked" ? 1.1 : 2.2);
-      _pos[n.id] = new _THREE.Vector3(Math.cos(ang) * r, tilt, Math.sin(ang) * r);
+      const r = R * Math.sqrt((i + 0.5) / N);
+      const theta = i * 2.399963229728653; // golden angle
+      const jx = ((_hash(n.id) % 200) / 200 - 0.5) * 1.6; // depth jitter along x
+      _pos[n.id] = new _THREE.Vector3(x + jx, r * Math.cos(theta), r * Math.sin(theta));
     });
   });
 }
 
+// node visual: colour + radius by kind/layer/degree. Conjectures stay grey.
+function _isConj(n) {
+  return (n.conjecture != null) || n.formula_id === "F23";
+}
+function _nodeColor(n) {
+  if (_isConj(n)) return C_CONJ;
+  if (n.kind === "formula") return n.locked ? C_LOCKED : C_FORMULA;
+  if (n.kind === "estate") return C_ESTATE;
+  if (n.kind === "endpoint") return C_ENDPT;
+  if (n.kind === "topic") return C_TOPIC;
+  if (n.layer === 0) return C_INPUT;
+  return C_FIELD;
+}
+function _nodeRadius(n) {
+  const deg = n.degree || 0;
+  let r = 0.14 + 0.055 * Math.sqrt(deg);
+  if (n.locked) r = Math.max(r, 0.42);
+  if (n.kind === "estate") r = Math.max(r, 0.55);
+  return Math.min(r, 0.9);
+}
+
+// -------------------------------------------------------------------------- //
+// mount
+// -------------------------------------------------------------------------- //
 function mount(ctx) {
   _ctx = ctx; _stage = ctx.stage; _THREE = ctx.THREE;
   _group = new _THREE.Group();
   _stage.scene.add(_group);
   _t0 = (typeof performance !== "undefined" ? performance.now() : Date.now());
+  _sphereGeo = new _THREE.SphereGeometry(1, 10, 8);
 
   _buildOverlay(ctx);
   _badge = ctx.live.createBadge();
-
-  // Pull the real graph once, then poll the firing snapshot.
-  _polls.push(ctx.live.poll(EP_GRAPH, 0, _onGraph, { badge: _badge, onState: (m) => { S.state = m.state; _paintOverlay(); } }));
-  _polls.push(ctx.live.poll(EP_FIRE, 5000, _onFire, { onState: (m) => { S.state = m.state; _paintOverlay(); } }));
-  _polls.push(ctx.live.poll(EP_REPAIR, 0, _onRepair, {}));
-  _polls.push(ctx.live.poll(EP_PLAST, 0, _onPlast, {}));
-  _polls.push(ctx.live.poll(EP_MEM, 0, _onMem, {}));
-  _polls.push(ctx.live.poll(EP_ENERGY, 0, _onEnergy, {}));
-  _polls.push(ctx.live.poll(EP_VITALS, 0, _onVitals, {}));
-  _polls.push(ctx.live.poll(EP_EVOLVE, 0, _onEvolve, {}));
+  if (_show) _show.setBadge(_badge);
+
+  // Phase 1: tiny summary → honest count pills + axis list (polls, keeps badge live).
+  _polls.push(ctx.live.poll(EP_SUMMARY, 20000, _onSummary, {
+    badge: _badge, onState: (m) => { S.state = m.state; _paintOverlay(); },
+  }));
+  // Phase 2: full graph fetched ONCE (progressive) → render a performant subset.
+  _fetchFullGraph();
+
+  // top-N + hover/tap labels bound to the labelable individual meshes only.
+  if (_show) {
+    _show.attachSceneLabels({
+      objects: () => _labelMeshes,
+      text: (o) => (o.userData && o.userData.node && (o.userData.node.title || o.userData.node.id)) || "",
+      weight: (o) => (o.userData && o.userData.node && o.userData.node.degree) || 0,
+      topN: 12, hover: true, fadeNear: 10, fadeFar: 70,
+    });
+  }
 
   if (!_frameReg && _stage.onFrame) { _stage.onFrame(_animate); _frameReg = true; }
 }
 
 function _readLabel(j) {
-  const lbl = (j && j.label != null) ? j.label
-            : (j && j.payload && j.payload.label != null) ? j.payload.label : "MODELED";
+  const lbl = (j && j.label != null) ? j.label : "MODELED";
   return String(lbl).toUpperCase();
 }
 
-function _onGraph(j) {
-  if (!j || !_group) { S.state = "error"; _paintOverlay(); return; }
-  const p = j.payload || j;
+function _onSummary(j) {
+  if (!j) { S.state = "error"; _paintOverlay(); return; }
   S.label = _readLabel(j);
-  S.nodes = Array.isArray(p.nodes) ? p.nodes : [];
-  S.edges = Array.isArray(p.edges) ? p.edges : [];
-  S.lockedCount = p.locked_count != null ? p.locked_count : null;
-  _rebuildGraph();
+  const sm = j.summary || {};
+  S.nodeCount = j.node_count != null ? j.node_count : sm.node_count;
+  S.linkCount = j.link_count != null ? j.link_count : sm.link_count;
+  S.distinct  = j.distinct_artifacts != null ? j.distinct_artifacts : sm.distinct_artifacts;
+  S.persons   = j.person_node_count != null ? j.person_node_count : sm.person_node_count;
+  S.artifactNote = j.artifact_note || null;
+  S.lockedFlagged = sm.locked_flagged != null ? sm.locked_flagged : S.lockedFlagged;
+  S.byLayer = sm.by_layer || S.byLayer;
+  S.byKind  = sm.by_kind || S.byKind;
+  S.byAxis  = sm.by_axis || S.byAxis;
+  _buildAxisControls();
   _paintOverlay();
 }
 
-function _onFire(j) {
-  if (!j) return;
-  const p = j.payload || j;
-  S.label = _readLabel(j);
-  S.tierCounts = p.tier_counts || null;
-  S.rewardPerK = Array.isArray(p.firing_reward_per_k) ? p.firing_reward_per_k : null;
-  S.rewardFinal = p.firing_reward_final != null ? p.firing_reward_final : null;
-  S.nodesFired = p.nodes_fired != null ? p.nodes_fired : null;
-  S.conjGreen = p.conjecture_rendered_green != null ? p.conjecture_rendered_green : null;
-  if (p.locked_count != null) S.lockedCount = p.locked_count;
-  _paintOverlay();
+function _fetchFullGraph() {
+  fetch(EP_GRAPH, { headers: { accept: "application/json" } })
+    .then((r) => (r.ok ? r.json() : Promise.reject(new Error("http " + r.status))))
+    .then((j) => {
+      const nodes = Array.isArray(j.nodes) ? j.nodes : [];
+      const links = Array.isArray(j.links) ? j.links : [];
+      if (!nodes.length) return;
+      S.nodes = nodes; S.links = links;
+      S.byId = {};
+      nodes.forEach((n) => { S.byId[n.id] = n; });
+      S.label = _readLabel(j);
+      // full payload carries the honest counts too — prefer them
+      if (j.node_count != null) S.nodeCount = j.node_count;
+      if (j.link_count != null) S.linkCount = j.link_count;
+      if (j.distinct_artifacts != null) S.distinct = j.distinct_artifacts;
+      if (j.person_node_count != null) S.persons = j.person_node_count;
+      if (j.artifact_note) S.artifactNote = j.artifact_note;
+      if (j.summary) {
+        S.byAxis = j.summary.by_axis || S.byAxis;
+        S.byKind = j.summary.by_kind || S.byKind;
+        S.byLayer = j.summary.by_layer || S.byLayer;
+        if (j.summary.locked_flagged != null) S.lockedFlagged = j.summary.locked_flagged;
+      }
+      S.loaded = true;
+      _buildAxisControls();
+      _rebuild();
+      _paintOverlay();
+    })
+    .catch(() => { S.state = "error"; _paintOverlay(); });
 }
 
-function _clearGraph() {
-  Object.values(_nodeMeshes).forEach((m) => {
-    if (m.geometry && m.geometry.dispose) m.geometry.dispose();
-    if (m.material && m.material.dispose) m.material.dispose();
-    _group.remove(m);
-  });
-  _edgeLines.forEach((l) => {
-    if (l.geometry && l.geometry.dispose) l.geometry.dispose();
-    if (l.material && l.material.dispose) l.material.dispose();
-    _group.remove(l);
-  });
-  _nodeMeshes = {}; _edgeLines = [];
+// -------------------------------------------------------------------------- //
+// subset selection + build
+// -------------------------------------------------------------------------- //
+function _selectRendered() {
+  const nodes = S.nodes || [];
+  const core = [];   // layers 0..3 — always rendered
+  const field = [];  // layer -1
+  nodes.forEach((n) => { (n.layer === -1 ? field : core).push(n); });
+  field.sort((a, b) => (b.degree || 0) - (a.degree || 0));
+
+  const chosen = new Map();
+  core.forEach((n) => chosen.set(n.id, n));
+
+  // top-connected field leaders (LOD default set)
+  for (let i = 0; i < field.length && chosen.size < MAX_NODES && i < FIELD_TOP; i++) {
+    chosen.set(field[i].id, field[i]);
+  }
+  // axis-expand: fully include leaders on any active axis (up to the cap)
+  if (_activeAxes.size) {
+    for (let i = 0; i < field.length && chosen.size < MAX_NODES; i++) {
+      const n = field[i];
+      if (n.axis && _activeAxes.has(n.axis)) chosen.set(n.id, n);
+    }
+  }
+  const rendered = Array.from(chosen.values());
+  S.fieldShown = rendered.filter((n) => n.layer === -1).length;
+  return rendered;
 }
 
-function _rebuildGraph() {
-  if (!_group || !S.nodes.length) return;
-  _clearGraph();
-  _layout(S.nodes);
-
-  // edges first (behind nodes)
-  S.edges.forEach((e) => {
-    const a = _pos[e.src], b = _pos[e.dst];
-    if (!a || !b) return;
-    const g = new _THREE.BufferGeometry().setFromPoints([a, b]);
-    const m = new _THREE.LineBasicMaterial({ color: C_EDGE, transparent: true, opacity: 0.5 });
-    const line = new _THREE.Line(g, m);
-    _edgeLines.push(line); _group.add(line);
+function _rebuild() {
+  if (!_group || !S.nodes) return;
+  _clearScene();
+  const rendered = _selectRendered();
+  S.renderedNodes = rendered.length;
+  _layout(rendered);
+
+  // pick which nodes get an individual (labelable) mesh: highest-degree first,
+  // but always keep the estate core (layers 1..3) individual so the thesis is
+  // hoverable. The long tail draws via one InstancedMesh.
+  const ranked = rendered.slice().sort((a, b) => {
+    const pa = a.layer >= 1 ? 1e9 : 0, pb = b.layer >= 1 ? 1e9 : 0;
+    return (pb + (b.degree || 0)) - (pa + (a.degree || 0));
   });
+  const individualSet = new Set(ranked.slice(0, Math.min(LABEL_MESH_MAX, ranked.length)).map((n) => n.id));
 
-  // nodes
-  S.nodes.forEach((n) => {
-    const isConj = n.tier === "conjecture";
-    const col = TIER_COLOR[n.tier] != null ? TIER_COLOR[n.tier] : C_DIM;
-    const rad = TIER_RADIUS[n.tier] != null ? TIER_RADIUS[n.tier] : 0.2;
-    const geo = new _THREE.SphereGeometry(rad, 18, 18);
-    // conjecture nodes are flat/emissive-free grey so they can NEVER read as "fired green"
-    const mat = new _THREE.MeshStandardMaterial({
-      color: col,
-      emissive: isConj ? 0x000000 : col,
-      emissiveIntensity: isConj ? 0.0 : 0.28,
-      metalness: 0.1, roughness: isConj ? 0.95 : 0.5,
-      transparent: true, opacity: isConj ? 0.55 : 0.95,
-    });
-    const mesh = new _THREE.Mesh(geo, mat);
-    mesh.position.copy(_pos[n.id]);
-    mesh.userData = { id: n.id, tier: n.tier, isConj };
-    _nodeMeshes[n.id] = mesh; _group.add(mesh);
+  const tail = [];
+  rendered.forEach((n) => {
+    if (individualSet.has(n.id)) _addLabelMesh(n);
+    else tail.push(n);
   });
+  _buildInstanced(tail);
+  _buildEdges(rendered);
+  _buildFire();
 }
 
-function _animate() {
-  if (!_group) return;
-  const now = (typeof performance !== "undefined" ? performance.now() : Date.now());
-  const t = (now - _t0) / 1000;
-  _group.rotation.y = t * 0.12;
-
-  // MODELED firing pulse: a wave that expands from the locked core outward each
-  // K, brightening proven nodes; conjecture nodes NEVER brighten (stay grey).
-  const K = S.rewardPerK ? S.rewardPerK.length : 10;
-  const phase = (t * 0.6) % (K + 2);
-  Object.values(_nodeMeshes).forEach((m) => {
-    if (!m.material) return;
-    if (m.userData.isConj) { m.material.emissiveIntensity = 0.0; return; }  // gray-only invariant
-    const shell = SHELL[m.userData.tier] != null ? SHELL[m.userData.tier] : 5.0;
-    const reach = Math.max(0, 1 - Math.abs(phase - shell) * 0.8);
-    const base = m.userData.tier === "locked" ? 0.35 : 0.2;
-    m.material.emissiveIntensity = base + 0.6 * reach;
+function _addLabelMesh(n) {
+  const mat = new _THREE.MeshStandardMaterial({
+    color: _nodeColor(n),
+    emissive: _isConj(n) ? 0x000000 : _nodeColor(n),
+    emissiveIntensity: _isConj(n) ? 0.0 : 0.32,
+    metalness: 0.1, roughness: _isConj(n) ? 0.95 : 0.5,
+    transparent: true, opacity: _isConj(n) ? 0.6 : 0.96,
   });
+  const mesh = new _THREE.Mesh(_sphereGeo, mat);
+  const r = _nodeRadius(n);
+  mesh.scale.setScalar(r);
+  mesh.position.copy(_pos[n.id]);
+  mesh.userData = { node: n, baseEmissive: mat.emissiveIntensity, isConj: _isConj(n) };
+  _labelMeshes.push(mesh);
+  _group.add(mesh);
 }
 
-function _onRepair(j) {
-  if (!j) return;
-  const p = j.payload || j;
-  S.lesion = p.lesion != null ? p.lesion : null;
-  S.bodyHealth = p.body_health_excl_lesion != null ? p.body_health_excl_lesion : null;
-  S.lam2Before = p.fiedler_lambda2_before != null ? p.fiedler_lambda2_before : null;
-  S.lam2After = p.fiedler_lambda2_after != null ? p.fiedler_lambda2_after : null;
-  S.connectedAfter = p.still_connected_after_lesion != null ? p.still_connected_after_lesion : null;
-  _paintOverlay();
+function _buildInstanced(tail) {
+  if (!tail.length) return;
+  _instGeo = new _THREE.SphereGeometry(1, 8, 6);
+  _instMat = new _THREE.MeshStandardMaterial({
+    metalness: 0.1, roughness: 0.6, transparent: true, opacity: 0.9,
+    emissiveIntensity: 0.28, vertexColors: false,
+  });
+  _inst = new _THREE.InstancedMesh(_instGeo, _instMat, tail.length);
+  _inst.instanceColor = new _THREE.InstancedBufferAttribute(new Float32Array(tail.length * 3), 3);
+  const m = new _THREE.Matrix4();
+  const q = new _THREE.Quaternion();
+  const s = new _THREE.Vector3();
+  const c = new _THREE.Color();
+  tail.forEach((n, i) => {
+    const r = _nodeRadius(n);
+    s.set(r, r, r);
+    m.compose(_pos[n.id], q, s);
+    _inst.setMatrixAt(i, m);
+    c.setHex(_nodeColor(n));
+    _inst.setColorAt(i, c);
+  });
+  _inst.instanceMatrix.needsUpdate = true;
+  if (_inst.instanceColor) _inst.instanceColor.needsUpdate = true;
+  // give the instanced material a base emissive so the tail is visible under bloom
+  _instMat.emissive = new _THREE.Color(C_FIELD);
+  _group.add(_inst);
 }
 
-function _onPlast(j) {
-  if (!j) return;
-  const p = j.payload || j;
-  S.lockedFrozen = p.locked_edges_unchanged != null ? p.locked_edges_unchanged : null;
-  S.plastScore = p.plasticity_score != null ? p.plasticity_score : null;
-  S.ewcCore = p.ewc_core_protection_penalty != null ? p.ewc_core_protection_penalty : null;
-  _paintOverlay();
+function _buildEdges(rendered) {
+  const ids = new Set(rendered.map((n) => n.id));
+  const links = S.links || [];
+  const pts = [];
+  const sample = [];
+  for (let i = 0; i < links.length && pts.length / 2 < MAX_EDGES; i++) {
+    const l = links[i];
+    const a = _pos[l.source], b = _pos[l.target];
+    if (!a || !b || !ids.has(l.source) || !ids.has(l.target)) continue;
+    pts.push(a.x, a.y, a.z, b.x, b.y, b.z);
+    if (sample.length < FIRE_MAX && (i % 3 === 0)) sample.push({ a, b, off: Math.random() });
+  }
+  S.renderedEdges = pts.length / 2;
+  if (!pts.length) return;
+  _edgeGeo = new _THREE.BufferGeometry();
+  _edgeGeo.setAttribute("position", new _THREE.Float32BufferAttribute(pts, 3));
+  _edgeMat = new _THREE.LineBasicMaterial({ color: C_EDGE, transparent: true, opacity: 0.22 });
+  _edges = new _THREE.LineSegments(_edgeGeo, _edgeMat);
+  _group.add(_edges);
+  _fireEdges = sample;
 }
 
-function _onMem(j) {
-  if (!j) return;
-  const p = j.payload || j;
-  S.beats = p.beats_written != null ? p.beats_written : null;
-  S.chainOk = p.chain_intact != null ? p.chain_intact : null;
-  S.reconsGain = p.reconsolidation_gain != null ? p.reconsolidation_gain : null;
-  _paintOverlay();
+function _buildFire() {
+  if (!_fireEdges.length) return;
+  _fireGeo = new _THREE.BufferGeometry();
+  _fireGeo.setAttribute("position", new _THREE.Float32BufferAttribute(new Float32Array(_fireEdges.length * 3), 3));
+  _fireMat = new _THREE.PointsMaterial({
+    color: C_FIRE, size: 0.32, transparent: true, opacity: 0.95,
+    blending: _THREE.AdditiveBlending, depthWrite: false, sizeAttenuation: true,
+  });
+  _fire = new _THREE.Points(_fireGeo, _fireMat);
+  _group.add(_fire);
 }
 
-function _onVitals(j) {
-  if (!j) return;
-  const p = j.payload || j;
-  S.driveFinal = p.drive_final != null ? p.drive_final : null;
-  S.viability = p.viability_horizon != null ? p.viability_horizon : null;
-  S.inBand = p.in_band_count != null ? p.in_band_count : null;
-  S.setpointCount = p.setpoint_count != null ? p.setpoint_count : null;
-  S.lockedUntouched = p.locked_untouched != null ? p.locked_untouched : null;
-  S.failClosed = p.fail_closed != null ? p.fail_closed : null;
-  if (p.locked_count != null) S.lockedCount = p.locked_count;
-  _paintOverlay();
+function _clearScene() {
+  _labelMeshes.forEach((m) => {
+    if (m.material && m.material.dispose) m.material.dispose();
+    _group.remove(m);
+  });
+  _labelMeshes = [];
+  if (_inst) { _group.remove(_inst); _inst.dispose && _inst.dispose(); }
+  if (_instGeo) _instGeo.dispose();
+  if (_instMat) _instMat.dispose();
+  _inst = _instGeo = _instMat = null;
+  if (_edges) { _group.remove(_edges); }
+  if (_edgeGeo) _edgeGeo.dispose();
+  if (_edgeMat) _edgeMat.dispose();
+  _edges = _edgeGeo = _edgeMat = null;
+  if (_fire) { _group.remove(_fire); }
+  if (_fireGeo) _fireGeo.dispose();
+  if (_fireMat) _fireMat.dispose();
+  _fire = _fireGeo = _fireMat = null;
+  _fireEdges = [];
 }
 
-function _onEvolve(j) {
-  if (!j) return;
-  const p = j.payload || j;
-  S.archiveCells = p.archive_cells_filled != null ? p.archive_cells_filled : null;
-  S.archiveCellsPossible = p.archive_cells_possible != null ? p.archive_cells_possible : null;
-  S.modeledPromotions = p.modeled_promotions != null ? p.modeled_promotions : null;
-  S.gateImmutable = p.gate_immutable != null ? p.gate_immutable : null;
-  S.claimPinningOk = p.claim_pinning_ok != null ? p.claim_pinning_ok : null;
-  S.rollbackRestored = p.rollback_restored != null ? p.rollback_restored : null;
-  if (p.locked_count != null) S.lockedCount = p.locked_count;
-  _paintOverlay();
-}
+// -------------------------------------------------------------------------- //
+// animation: gentle rotation + firing pulses travelling source→target
+// -------------------------------------------------------------------------- //
+function _animate() {
+  if (!_group) return;
+  const now = (typeof performance !== "undefined" ? performance.now() : Date.now());
+  const t = (now - _t0) / 1000;
+  _group.rotation.y = Math.sin(t * 0.08) * 0.5 + t * 0.03;
+
+  // firing pulses: each sampled edge carries a point that travels src→dst on loop
+  if (_fire && _fireGeo && _fireEdges.length) {
+    const arr = _fireGeo.attributes.position.array;
+    for (let i = 0; i < _fireEdges.length; i++) {
+      const e = _fireEdges[i];
+      let f = (t * 0.5 + e.off) % 1;
+      const j = i * 3;
+      arr[j]     = e.a.x + (e.b.x - e.a.x) * f;
+      arr[j + 1] = e.a.y + (e.b.y - e.a.y) * f;
+      arr[j + 2] = e.a.z + (e.b.z - e.a.z) * f;
+    }
+    _fireGeo.attributes.position.needsUpdate = true;
+  }
 
-function _onEnergy(j) {
-  if (!j) return;
-  const p = j.payload || j;
-  const e = p.energy || {};
-  S.energyStatus = e.status != null ? e.status : null;
-  S.energyJoules = e.joules != null ? e.joules : null;
-  _paintOverlay();
+  // subtle "breathing" on the locked-8 / estate individual meshes so the proven
+  // core reads as alive (conjecture meshes stay flat grey — never brighten).
+  const pulse = 0.32 + 0.18 * (0.5 + 0.5 * Math.sin(t * 1.6));
+  _labelMeshes.forEach((m) => {
+    if (!m.material || m.userData.isConj) return;
+    const n = m.userData.node;
+    if (n && (n.locked || n.kind === "estate")) m.material.emissiveIntensity = pulse;
+  });
 }
 
-// =============================================================================
-// overlay HUD
-// =============================================================================
+// -------------------------------------------------------------------------- //
+// overlay (shared showcase helper)
+// -------------------------------------------------------------------------- //
 function _buildOverlay(ctx) {
-  _overlay = document.createElement("div");
-  _overlay.style.cssText =
-    "position:absolute;top:12px;left:12px;max-width:360px;font:12px/1.5 ui-monospace,Menlo,monospace;" +
-    "color:#cfe3ea;background:rgba(15,32,39,0.82);border:1px solid #1b3a44;border-radius:10px;padding:12px 14px;" +
-    "pointer-events:auto;backdrop-filter:blur(3px);z-index:20;";
-  _overlay.innerHTML =
-    '<div style="font-weight:700;letter-spacing:.03em;color:#eaf6f9;font-size:13px">Formula-Graph Brain ' +
-      '<span id="brain-label" style="float:right;font-size:10px;padding:1px 7px;border-radius:8px;background:#123;color:#3af4c8;border:1px solid #1b3a44">MODELED</span></div>' +
-    '<div style="margin-top:2px;color:#8fb3bd;font-size:10.5px">Our 180+ formulas as a living graph — the proven-8 core fires outward.</div>' +
-    '<hr style="border:0;border-top:1px solid #1b3a44;margin:8px 0">' +
-    _row("Nodes / Edges", "brain-ne") +
-    _row("Locked-proven", "brain-locked") +
-    _row("Firing reward (final)", "brain-reward") +
-    _row("Proven nodes fired", "brain-fired") +
-    _row("Conjectures shown green", "brain-conjgreen") +
-    '<hr style="border:0;border-top:1px solid #1b3a44;margin:8px 0">' +
-    '<div style="font-size:10.5px;color:#8fb3bd;margin-bottom:2px">Self-repair (lesion &rarr; heal)</div>' +
-    _row("Lesioned node", "brain-lesion") +
-    _row("Body health (healed)", "brain-bodyhealth") +
-    _row("Connectivity \u03bb2 aft.", "brain-lam2") +
-    _row("Still one mind?", "brain-connected") +
-    '<hr style="border:0;border-top:1px solid #1b3a44;margin:8px 0">' +
-    '<div style="font-size:10.5px;color:#8fb3bd;margin-bottom:2px">Plasticity (multi-timescale)</div>' +
-    _row("Locked canon frozen", "brain-frozen") +
-    _row("Plasticity score", "brain-plast") +
-    _row("EWC core protection", "brain-ewc") +
-    '<hr style="border:0;border-top:1px solid #1b3a44;margin:8px 0">' +
-    '<div style="font-size:10.5px;color:#8fb3bd;margin-bottom:2px">Memory (write-back loop)</div>' +
-    _row("Receipt beats written", "brain-beats") +
-    _row("Hash chain intact", "brain-chain") +
-    _row("Reconsolidation gain", "brain-recons") +
-    _row("Energy (authoritative)", "brain-energy") +
-    '<hr style="border:0;border-top:1px solid #1b3a44;margin:8px 0">' +
-    '<div style="font-size:10.5px;color:#8fb3bd;margin-bottom:2px">Homeostasis (self-regulation)</div>' +
-    _row("Drive (final)", "brain-drive") +
-    _row("In-band set-points", "brain-inband") +
-    _row("Viability horizon", "brain-viab") +
-    _row("Locked untouched", "brain-untouched") +
-    '<hr style="border:0;border-top:1px solid #1b3a44;margin:8px 0">' +
-    '<div style="font-size:10.5px;color:#8fb3bd;margin-bottom:2px">Evolution (proposes; kernel disposes)</div>' +
-    _row("Archive cells filled", "brain-archive") +
-    _row("Promotions (MODELED)", "brain-promos") +
-    _row("Kernel gate immutable", "brain-gate") +
-    _row("Drift rollback restored", "brain-rollback") +
-    '<div id="brain-tiers" style="margin-top:6px;font-size:10.5px;color:#8fb3bd"></div>' +
-    '<div style="margin-top:8px;display:flex;gap:10px;flex-wrap:wrap;font-size:10px;color:#9fc">' +
-      _leg(C_LOCKED, "proven-8") + _leg(C_SEMANT, "verified") + _leg(C_BORROW, "borrowed") + _leg(C_CONJ, "conjecture (gray)") +
-    '</div>' +
-    '<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>';
   _show = createShowcase(ctx, {
-    id: ID, title: TITLE, accent: "#5b8dee", badge: _badge,
-    chips: [{ label: "MODELED", text: "formula graph", name: "br" }],
-    legend: true,
+    id: ID, title: TITLE, accent: "#5b8dee",
+    chips: [{ label: "MODELED", text: "knowledge graph", name: "src" }],
+    legend: ["MEASURED", "MODELED", "SAMPLE"],
+    description:
+      "<b>The estate's own brain.</b> Every node is a REAL harvested artifact — a repo, " +
+      "surface, formula, topic, or a field leader (paper / lab / org / person) — laid out " +
+      "feed-forward: harvested field leaders (outer) &rarr; repos &amp; surfaces (input) &rarr; " +
+      "topics &rarr; formulas (the <b>locked-8</b> proven core in proof-teal) &rarr; the estate " +
+      "thesis (output). Pulses fire along real edges; node size grows with connectivity. " +
+      "This is the SZL answer to the leaked Obsidian neural-vault — but real, owned, and honest.",
+    citations:
+      "Graph is LIVE from /api/a11oy/v1/brain/graph (pure read — no signing on GET). " +
+      "Inspiration: the viral “self-writing Obsidian neural-vault”, cited as prior art, " +
+      "never claimed as ours. Λ = Conjecture 1 (grey, never proven green).",
+    plain: { html: _plainHtml },
   });
-  _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(); });
+
+  // HONEST count pills (always visible in the pill row): BOTH the distinct
+  // headline AND the raw total, with the ~56% co-author note in the tooltip.
+  _pillDistinct = _mkPill("— distinct", "Distinct real artifacts (repos+papers+orgs+datasets+…) — the honest headline.");
+  _pillNodes    = _mkPill("— nodes", "Raw node total. Includes arXiv co-author person nodes (~56%); NOT all distinct work.");
+  _show.pills.appendChild(_pillDistinct);
+  _show.pills.appendChild(_pillNodes);
+
+  // KPI rows (collapsible body)
+  _el.distinct = _show.addField("Distinct artifacts");
+  _el.nodes    = _show.addField("Total nodes");
+  _el.persons  = _show.addField("Co-author nodes");
+  _el.links    = _show.addField("Edges");
+  _el.locked   = _show.addField("Locked-proven");
+  _el.rendered = _show.addField("Rendered (subset)");
+  _el.field    = _show.addField("Field leaders shown");
+
+  // axis-expand control container (populated once summary/full arrives)
+  _axisWrap = document.createElement("div");
+  _axisWrap.style.cssText = "display:flex;flex-direction:column;gap:6px;margin-top:2px";
+  const cap = document.createElement("div");
+  cap.textContent = "Expand an axis (adds its field leaders):";
+  cap.style.cssText = "font-size:10.5px;color:#9fb1bf";
+  _axisRow = document.createElement("div");
+  _axisRow.style.cssText = "display:flex;flex-wrap:wrap;gap:5px";
+  _axisWrap.appendChild(cap); _axisWrap.appendChild(_axisRow);
+  _show.appendBody(_axisWrap);
+
+  // honest artifact note (verbatim from the endpoint)
+  _noteEl = document.createElement("div");
+  _noteEl.style.cssText = "font-size:9.5px;color:#6b7a86;line-height:1.5;margin-top:2px";
+  _show.appendBody(_noteEl);
+}
+
+let _pillDistinct = null, _pillNodes = null, _axisWrap = null, _axisRow = null, _noteEl = null;
+const _el = {};
+
+function _mkPill(text, title) {
+  const el = document.createElement("span");
+  el.title = title || "";
+  el.textContent = text;
+  el.style.cssText =
+    "font:600 10.5px ui-monospace,SFMono-Regular,Menlo,monospace;padding:3px 9px;border-radius:999px;" +
+    "border:1px solid #1c2836;background:#0a1117;color:#cfe3ea;letter-spacing:.2px;white-space:nowrap";
+  return el;
 }
-function _row(k, id) {
-  return '<div style="display:flex;justify-content:space-between;gap:12px;margin-top:3px">' +
-    '<span style="color:#8fb3bd">' + k + '</span><span id="' + id + '" style="color:#eaf6f9;font-variant-numeric:tabular-nums">—</span></div>';
+
+function _fmt(n) { return (n == null) ? "—" : Number(n).toLocaleString("en-US"); }
+
+function _buildAxisControls() {
+  if (!_axisRow || !S.byAxis) return;
+  const top = Object.keys(S.byAxis).slice(0, 8);
+  // only (re)build if the set of buttons changed
+  const have = Object.keys(_axisBtns).sort().join(",");
+  const want = top.slice().sort().join(",");
+  if (have === want) return;
+  _axisRow.textContent = "";
+  _axisBtns = {};
+  top.forEach((ax) => {
+    const b = document.createElement("button");
+    b.type = "button";
+    b.textContent = ax + " (" + S.byAxis[ax] + ")";
+    b.dataset.axis = ax;
+    _styleAxisBtn(b, _activeAxes.has(ax));
+    b.addEventListener("click", () => {
+      if (_activeAxes.has(ax)) _activeAxes.delete(ax); else _activeAxes.add(ax);
+      _styleAxisBtn(b, _activeAxes.has(ax));
+      if (S.loaded) { _rebuild(); _paintOverlay(); }
+    });
+    _axisBtns[ax] = b;
+    _axisRow.appendChild(b);
+  });
 }
-function _leg(hex, txt) {
-  const c = "#" + hex.toString(16).padStart(6, "0");
-  return '<span><span style="display:inline-block;width:9px;height:9px;border-radius:50%;background:' + c + ';margin-right:4px;vertical-align:middle"></span>' + txt + '</span>';
+
+function _styleAxisBtn(b, on) {
+  b.style.cssText =
+    "font:11px ui-monospace,Menlo,monospace;padding:3px 8px;border-radius:7px;cursor:pointer;" +
+    (on
+      ? "border:1px solid #3af4c8;background:#08201a;color:#3af4c8;"
+      : "border:1px solid #1c2836;background:#0e1722;color:#9fb6cc;");
 }
-function _set(id, v) { const e = _overlay && _overlay.querySelector("#" + id); if (e) e.textContent = v; }
 
 function _paintOverlay() {
-  if (!_overlay) return;
-  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" : "—"));
-  _set("brain-fired", d || (S.nodesFired != null ? String(S.nodesFired) : "—"));
-  _set("brain-conjgreen", d || (S.conjGreen != null ? (S.conjGreen + " (must be 0)") : "—"));
-  _set("brain-lesion", d || (S.lesion != null ? String(S.lesion) : "\u2014"));
-  _set("brain-bodyhealth", d || (S.bodyHealth != null ? (S.bodyHealth * 100).toFixed(1) + "%" : "\u2014"));
-  _set("brain-lam2", d || (S.lam2After != null ? (S.lam2Before != null ? S.lam2Before.toFixed(3) + " \u2192 " : "") + S.lam2After.toFixed(3) : "\u2014"));
-  _set("brain-connected", d || (S.connectedAfter != null ? (S.connectedAfter ? "yes" : "no \u2014 cut-vertex") : "\u2014"));
-  _set("brain-frozen", d || (S.lockedFrozen != null ? (S.lockedFrozen ? "yes (never drifts)" : "NO \u2014 alert") : "\u2014"));
-  _set("brain-plast", d || (S.plastScore != null ? S.plastScore.toFixed(3) : "\u2014"));
-  _set("brain-ewc", d || (S.ewcCore != null ? S.ewcCore.toFixed(5) : "\u2014"));
-  _set("brain-beats", d || (S.beats != null ? String(S.beats) : "\u2014"));
-  _set("brain-chain", d || (S.chainOk != null ? (S.chainOk ? "yes (tamper-evident)" : "NO \u2014 alert") : "\u2014"));
-  _set("brain-recons", d || (S.reconsGain != null ? (S.reconsGain >= 0 ? "+" : "") + S.reconsGain + " nodes" : "\u2014"));
-  _set("brain-energy", d || (S.energyStatus != null ? (S.energyStatus === "MEASURED" ? (S.energyJoules + " J") : "UNAVAILABLE (honest)") : "\u2014"));
-  _set("brain-drive", d || (S.driveFinal != null ? S.driveFinal.toFixed(4) + (S.failClosed ? " (fail-closed)" : "") : "\u2014"));
-  _set("brain-inband", d || (S.inBand != null && S.setpointCount != null ? S.inBand + " / " + S.setpointCount : "\u2014"));
-  _set("brain-viab", d || (S.viability != null ? S.viability + " cycles" : "\u2014"));
-  _set("brain-untouched", d || (S.lockedUntouched != null ? (S.lockedUntouched ? "yes (meta-stats only)" : "NO \u2014 alert") : "\u2014"));
-  _set("brain-archive", d || (S.archiveCells != null ? (S.archiveCells + (S.archiveCellsPossible != null ? " / " + S.archiveCellsPossible : "")) : "\u2014"));
-  _set("brain-promos", d || (S.modeledPromotions != null ? (S.modeledPromotions + " (MODELED, not locked-8)") : "\u2014"));
-  _set("brain-gate", d || (S.gateImmutable != null ? (S.gateImmutable ? "yes" : "NO \u2014 alert") : "\u2014"));
-  _set("brain-rollback", d || (S.rollbackRestored != null ? (S.rollbackRestored ? "yes" : "NO \u2014 alert") : "\u2014"));
-  if (S.tierCounts) {
-    const t = S.tierCounts;
-    _set("brain-tiers", "tiers: locked " + (t.locked || 0) + " · semantic " + (t.semantic || 0) +
-      " · experimental " + (t.experimental || 0) + " · borrowed " + (t.borrowed || 0) + " · conjecture " + (t.conjecture || 0));
-  }
-  if (_plain) _applyPlain();
+  if (!_show) return;
+  const deg = (S.state === "error");
+  _show.setChip("src", S.label || "MODELED", { text: "knowledge graph" });
+
+  if (_pillDistinct) _pillDistinct.textContent = _fmt(S.distinct) + " distinct";
+  if (_pillNodes) _pillNodes.textContent = _fmt(S.nodeCount) + " nodes";
+
+  const set = (k, v) => { if (_el[k]) _el[k].textContent = v; };
+  set("distinct", deg ? "—" : _fmt(S.distinct));
+  set("nodes", deg ? "—" : _fmt(S.nodeCount));
+  set("persons", deg ? "—" : (S.persons != null ? _fmt(S.persons) + " (~56%, not distinct work)" : "—"));
+  set("links", deg ? "—" : _fmt(S.linkCount));
+  set("locked", deg ? "—" : (S.lockedFlagged != null ? S.lockedFlagged + " (exactly 8)" : "8 (exactly 8)"));
+  set("rendered", S.loaded ? _fmt(S.renderedNodes) + " nodes · " + _fmt(S.renderedEdges) + " edges" : "loading…");
+  const fieldTotal = S.byLayer && S.byLayer["-1"] != null ? S.byLayer["-1"] : null;
+  set("field", S.loaded ? _fmt(S.fieldShown) + (fieldTotal != null ? " of " + _fmt(fieldTotal) : "") : "loading…");
+
+  if (_noteEl) _noteEl.textContent = S.artifactNote || "";
+  if (_show.refreshPlain) _show.refreshPlain();
 }
 
-function _applyPlain() {
-  const box = _overlay && _overlay.querySelector("#brain-plainbox");
-  if (!box) return;
-  box.style.display = _plain ? "block" : "none";
-  if (_plain) {
-    box.innerHTML =
-      "Each ball is one of our math formulas. The bright teal balls in the middle are the " +
-      "<b>8 that are actually machine-proven</b>. Lines are real proof dependencies. A pulse " +
-      "spreads out from the proven core across " + (S.rewardPerK ? S.rewardPerK.length : 10) + " rounds — that's the " +
-      "\u201Cfiring.\u201D The grey balls are <b>conjectures we have NOT proven</b> (like \u039B\u2019s " +
-      "uniqueness) — they stay grey and never light up green, on purpose. The routing/reward/spread " +
-      "borrow ideas from three 2026 papers (DLA, OPERA, Context-Ready) but train nothing. Label is " +
-      "<b>" + (S.label || "MODELED") + "</b> — a faithful drawing of our real proof structure, not a computation.";
-  }
+function _plainHtml() {
+  return (
+    "Each ball is one real thing our estate knows about — a code repo, a live surface, one of " +
+    "our math formulas, a topic, or a leader out in the field (a paper, lab, company, or author). " +
+    "They're arranged like a neural network reading left-to-right: the outside world flows in " +
+    "through our inputs, through topics and formulas, to the estate's thesis on the right. The " +
+    "bright teal balls are the <b>8 formulas we've actually machine-proven</b>; grey balls (like " +
+    "Λ) are things we <b>have not</b> proven and never light up green. Two counts are shown on " +
+    "purpose: <b>" + _fmt(S.distinct) + " distinct artifacts</b> is the honest headline, while the raw " +
+    "<b>" + _fmt(S.nodeCount) + " nodes</b> includes ~56% arXiv co-author names — real, but not distinct " +
+    "work. We render a fast subset (the estate core + the best-connected leaders); tap an axis to " +
+    "pull in more. Label <b>" + (S.label || "MODELED") + "</b> — a faithful drawing of our real graph."
+  );
 }
 
-// =============================================================================
+// -------------------------------------------------------------------------- //
 // unmount
-// =============================================================================
+// -------------------------------------------------------------------------- //
 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) {
-      _group.traverse((o) => {
-        if (o.geometry && o.geometry.dispose) o.geometry.dispose();
-        if (o.material) {
-          const ms = Array.isArray(o.material) ? o.material : [o.material];
-          ms.forEach((m) => { if (m.dispose) m.dispose(); });
-        }
-      });
-      _stage.scene.remove(_group);
-    }
-  } catch (_) {}
-  _group = _overlay = _show = null;
-  _nodeMeshes = {}; _edgeLines = []; _pos = {};
-  _el = {}; _badge = null; _plain = false; _frameReg = false;
+  try { _clearScene(); } catch (_) {}
+  try { if (_sphereGeo) _sphereGeo.dispose(); } catch (_) {}
+  try { if (_group && _stage) _stage.scene.remove(_group); } catch (_) {}
+  _sphereGeo = null;
+  _group = _show = _badge = null;
+  _pillDistinct = _pillNodes = _axisWrap = _axisRow = _noteEl = null;
+  _axisBtns = {}; _activeAxes = new Set();
+  Object.keys(_el).forEach((k) => delete _el[k]);
+  _pos = {}; _frameReg = false;
   _stage = _THREE = _ctx = null;
-  S.label = null; S.nodes = []; S.edges = []; S.tierCounts = null;
-  S.lockedCount = S.rewardPerK = S.rewardFinal = S.nodesFired = S.conjGreen = null;
-  S.lesion = S.bodyHealth = S.lam2Before = S.lam2After = S.connectedAfter = null;
-  S.lockedFrozen = S.plastScore = S.ewcCore = null;
-  S.beats = S.chainOk = S.reconsGain = null;
-  S.energyStatus = S.energyJoules = null;
-  S.driveFinal = S.viability = S.inBand = S.setpointCount = null;
-  S.lockedUntouched = S.failClosed = null;
-  S.archiveCells = S.archiveCellsPossible = S.modeledPromotions = null;
-  S.gateImmutable = S.claimPinningOk = S.rollbackRestored = null;
-  S.state = "init";
+  S.label = null; S.state = "init"; S.loaded = false;
+  S.nodeCount = S.linkCount = S.distinct = S.persons = null;
+  S.artifactNote = null; S.lockedFlagged = null;
+  S.byLayer = S.byKind = S.byAxis = null;
+  S.nodes = S.links = S.byId = null;
+  S.renderedNodes = S.renderedEdges = S.fieldShown = 0;
 }
 
-export default { id: ID, title: TITLE, endpoints: [EP_GRAPH, EP_FIRE, EP_REPAIR, EP_PLAST, EP_MEM, EP_VITALS, EP_ENERGY, EP_EVOLVE], mount, unmount };
+export default { id: ID, title: TITLE, endpoints: [EP_SUMMARY, EP_GRAPH], mount, unmount };

static/3d/surfaces/keyless.js

@@ -39,6 +39,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    = "keyless";
 const TITLE = "Keyless Attention (Value-Only Cache)";
 
@@ -60,9 +62,8 @@ const HEAT_GAP   = 0.17;   // heatmap cell pitch
 const HEAT_MAX   = 8;      // cap cells per axis rendered (matches head trim)
 const BAR_W      = 0.9;    // cache-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;
@@ -323,115 +324,45 @@ 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%,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 =
-    'Keyless Attention <b>eliminates the key projection</b> entirely: a value-space <b>routing matrix R</b> ' +
-    'replaces W<sub>k</sub>, so logits are formed as softmax((Q\u00b7R)\u00b7V\u1d40/\u221ad) and the decode ' +
-    'cache stores <b>values only</b>. Standard QKV attention caches both K and V (2\u00b7L\u00b7d); keyless caches ' +
-    'V alone (L\u00b7d) \u2014 an <b>exactly 50%</b> reduction. Panels: cache-size bars (standard vs keyless), ' +
-    'attention-map heatmaps (standard vs keyless), and an output-fidelity bar (mean per-token cosine similarity ' +
-    'between the two outputs). Honesty label <b>MODELED</b> (deterministic mechanism reproduction on a toy ' +
-    'sequence; trains nothing). 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 = "keyless attention \u00b7 value-only cache";
-  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("kl-dims",     "sequence (L \u00d7 d)"));
-  grid.appendChild(kpiRow("kl-m",        "factorization depth m"));
-  grid.appendChild(kpiRow("kl-entstd",   "cache entries \u2014 STANDARD (K+V)"));
-  grid.appendChild(kpiRow("kl-entkey",   "cache entries \u2014 KEYLESS (V-only)"));
-  grid.appendChild(kpiRow("kl-bytestd",  "cache bytes \u2014 STANDARD"));
-  grid.appendChild(kpiRow("kl-bytekey",  "cache bytes \u2014 KEYLESS"));
-  grid.appendChild(kpiRow("kl-reduction","KV-cache reduction"));
-  grid.appendChild(kpiRow("kl-cosmean",  "output fidelity \u2014 mean cosine (MEASURED)"));
-  grid.appendChild(kpiRow("kl-cosmin",   "output fidelity \u2014 min cosine"));
-  grid.appendChild(kpiRow("kl-mse",      "output MSE (standard vs keyless)"));
-  grid.appendChild(kpiRow("kl-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 = "Keyless Attention \u2014 Xin Gao, \u201cValue-Space Routing and Value-Only Caching for Efficient Transformers\u201d arXiv:2606.21848 (arxiv.org/abs/2606.21848). MODELED \u00b7 mechanism demo on a toy sequence, not a trained transformer.";
-  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: "value-only cache", name: "kl" }],
+    legend: ["MODELED", "SAMPLE"],
+    description:
+      'Keyless Attention <b>eliminates the key projection</b> entirely: a value-space <b>routing matrix R</b> ' +
+      'replaces W<sub>k</sub>, so logits are formed as softmax((Q\u00b7R)\u00b7V\u1d40/\u221ad) and the decode ' +
+      'cache stores <b>values only</b>. Standard QKV attention caches both K and V (2\u00b7L\u00b7d); keyless caches ' +
+      'V alone (L\u00b7d) \u2014 an <b>exactly 50%</b> reduction. Panels: cache-size bars (standard vs keyless), ' +
+      'attention-map heatmaps (standard vs keyless), and an output-fidelity bar (mean per-token cosine similarity ' +
+      'between the two outputs). Honesty label <b>MODELED</b> (deterministic mechanism reproduction on a toy ' +
+      'sequence; trains nothing). 0 runtime CDN.',
+    citations:
+      "Keyless Attention \u2014 Xin Gao, \u201cValue-Space Routing and Value-Only Caching for Efficient Transformers\u201d arXiv:2606.21848 (arxiv.org/abs/2606.21848). MODELED \u00b7 mechanism demo on a toy sequence, not a trained transformer.",
+    plain: { html: _plainHtml },
   });
-  _overlay.appendChild(pl);
 
-  const pd = document.createElement("div");
-  pd.id = "kl-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["kl-dims"]      = _show.addField("sequence (L \u00d7 d)");
+  _el["kl-m"]         = _show.addField("factorization depth m");
+  _el["kl-entstd"]    = _show.addField("cache entries \u2014 STANDARD (K+V)");
+  _el["kl-entkey"]    = _show.addField("cache entries \u2014 KEYLESS (V-only)");
+  _el["kl-bytestd"]   = _show.addField("cache bytes \u2014 STANDARD");
+  _el["kl-bytekey"]   = _show.addField("cache bytes \u2014 KEYLESS");
+  _el["kl-reduction"] = _show.addField("KV-cache reduction");
+  _el["kl-cosmean"]   = _show.addField("output fidelity \u2014 mean cosine (MEASURED)");
+  _el["kl-cosmin"]    = _show.addField("output fidelity \u2014 min cosine");
+  _el["kl-mse"]       = _show.addField("output MSE (standard vs keyless)");
+  _el["kl-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 red  = S.reduction != null ? S.reduction.toFixed(1) + "%" : "loading\u2026";
   const cos  = S.cosMean   != null ? S.cosMean.toFixed(3)         : "loading\u2026";
   const bs   = S.kvBytesStd != null ? S.kvBytesStd + " B"         : "loading\u2026";
   const bk   = S.kvBytesKey != null ? S.kvBytesKey + " B"         : "loading\u2026";
-  pd.innerHTML =
+  return (
     "<b>What this means:</b> To generate text fast, a model keeps a running memory of every earlier word \u2014 " +
     "the \u201cKV cache.\u201d Normally it stores two things per word (a <b>key</b> and a <b>value</b>). Keyless " +
     "Attention throws away the key entirely and reroutes the lookup through the values themselves, so it only " +
@@ -441,7 +372,7 @@ function _applyPlain() {
     "deterministic reproduction of that cache-halving MECHANISM on a tiny synthetic sequence \u2014 it <b>trains " +
     "no model</b> and runs no GPU kernel. The paper\u2019s headline that keyless matches or beats standard " +
     "attention on <b>real</b> models (GPT-2, Pythia, Qwen2, Llama 3.2) is a <b>claim about real training runs</b> " +
-    "the estate does not independently verify.";
+    "the estate does not independently verify.");
 }
 
 function _tok(s) {
@@ -469,7 +400,7 @@ function _paintOverlay() {
   _set("kl-mse",       t || fx(S.mse, 4));
   // honesty label verbatim — never upgraded
   _set("kl-label",     t || (S.label || "MODELED"));
-  if (_plain) _applyPlain();
+  if (_show) { _show.setChip("kl", S.label || "MODELED", { text: "value-only cache" }); _show.refreshPlain(); }
 }
 
 // =============================================================================
@@ -477,7 +408,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) => {
@@ -490,11 +421,11 @@ export function unmount() {
       _stage.scene.remove(_group);
     }
   } catch (_) {}
-  _group = _overlay = null;
+  _group = _show = null;
   _floor = null;
   _heatStd = []; _heatKeyless = []; _heatGroup = null;
   _barStd = null; _barKeyless = null; _barFid = null; _barGroup = null;
-  _el = {}; _badge = null; _plain = false; _frameReg = false;
+  _el = {}; _badge = null; _frameReg = false;
   _stage = _THREE = _ctx = null;
   S.label = S.L = S.d = S.m = null;
   S.bytesPer = S.kvEntStd = S.kvEntKey = S.kvBytesStd = S.kvBytesKey = null;

static/3d/surfaces/kla.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    = "kla";
 const TITLE = "Kaczmarz Linear Attention · Projection State-Update (live)";
 
@@ -61,9 +63,8 @@ const KLA_Z       = -1.4;  // Z lane for the KLA track
 const GATED_Z     = 1.4;   // Z lane for the gated baseline track
 const MAX_H       = 6.0;   // max bar height (world units) at max error
 
-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;
@@ -307,111 +308,41 @@ 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%,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 =
+  _show = createShowcase(ctx, {
+    id: ID, title: TITLE, accent: "#5b8dee",
+    badge: _badge,
+    chips: [{ label: "MODELED", text: "projection update", name: "kla" }],
+    legend: ["MODELED", "SAMPLE"],
+    description:
     'A linear-attention layer stores memory as a matrix <b>S</b>. Each new key-value pair ' +
     '(<b>k</b>,<b>v</b>) defines a constraint <b>S·k = v</b>; <b>KLA</b> updates the state by ' +
     'the orthogonal <b>Kaczmarz projection</b> onto that constraint ' +
     '(step = lr·(v \\u2212 S·k) k<sup>T</sup>/(k·k)) \\u2014 a <i>principled</i> scalar replacing ' +
     'the <b>ad-hoc gate</b> of gated linear attention. Teal track = KLA, grey track = gated ' +
     'baseline; bar height = reconstruction error. ' +
-    'Honesty label <b>MODELED</b> (deterministic projection simulation; NOT a trained 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 = "kaczmarz linear 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("kla-dim",       "state dim (S is dim\\u00d7dim)"));
-  grid.appendChild(kpiRow("kla-steps",     "key-value pairs streamed"));
-  grid.appendChild(kpiRow("kla-klaerr",    "KLA recon error \\u2014 MODELED"));
-  grid.appendChild(kpiRow("kla-gatederr",  "gated recon error (baseline)"));
-  grid.appendChild(kpiRow("kla-improve",   "improvement_ratio (gated\\u00f7kla)"));
-  grid.appendChild(kpiRow("kla-klaconv",   "KLA convergence step"));
-  grid.appendChild(kpiRow("kla-gatedconv", "gated convergence step"));
-  grid.appendChild(kpiRow("kla-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 = "Kaczmarz Linear Attention arXiv:2605.08587 (orthogonal projection state-update vs ad-hoc gate). 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();
+    'Honesty label <b>MODELED</b> (deterministic projection simulation; NOT a trained model). 0 runtime CDN.',
+    citations:
+      "Kaczmarz Linear Attention arXiv:2605.08587 (orthogonal projection state-update vs ad-hoc gate). MODELED \u00b7 not claimed-as.",
+    plain: { html: _plainHtml },
   });
-  _overlay.appendChild(pl);
 
-  const pd = document.createElement("div");
-  pd.id = "kla-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["kla-dim"]       = _show.addField("state dim (S is dim\\u00d7dim)");
+  _el["kla-steps"]     = _show.addField("key-value pairs streamed");
+  _el["kla-klaerr"]    = _show.addField("KLA recon error \\u2014 MODELED");
+  _el["kla-gatederr"]  = _show.addField("gated recon error (baseline)");
+  _el["kla-improve"]   = _show.addField("improvement_ratio (gated\\u00f7kla)");
+  _el["kla-klaconv"]   = _show.addField("KLA convergence step");
+  _el["kla-gatedconv"] = _show.addField("gated convergence step");
+  _el["kla-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 imp = S.improve != null ? S.improve.toFixed(2) + "\u00d7" : "loading\u2026";
   const ke  = S.klaErr != null ? S.klaErr.toFixed(3) : "loading\u2026";
   const ge  = S.gatedErr != null ? S.gatedErr.toFixed(3) : "loading\u2026";
-  pd.innerHTML =
+  return (
     "<b>What this means:</b> A fast \\u201clinear attention\\u201d model remembers things in a running " +
     "memory <b>M</b> instead of re-reading the whole past every time. When a new fact arrives, older " +
     "systems just <i>fade</i> the memory by a hand-tuned amount (an \\u201cad-hoc gate\\u201d) and hope " +
@@ -421,7 +352,7 @@ function _applyPlain() {
     "Here KLA rebuilds the stream of facts with error <b>" + ke + "</b> versus the old gate\\u2019s <b>" + ge + "</b>, " +
     "about a <b>" + imp + "</b> improvement, and it locks in sooner. Plain: a principled dial replaces a " +
     "guessed one, so the model remembers more accurately. This view is a <b>MODELED</b> simulation of " +
-    "the projection math (arXiv:2605.08587), not a run of a trained model.";
+    "the projection math (arXiv:2605.08587), not a run of a trained model.");
 }
 
 function _tok(s) {
@@ -446,7 +377,7 @@ function _paintOverlay() {
   _set("kla-gatedconv", t || (S.gatedConv != null ? String(S.gatedConv) : "\u2014"));
   // honesty label verbatim — never upgraded
   _set("kla-label", t || (S.label || "MODELED"));
-  if (_plain) _applyPlain();
+  if (_show) { _show.setChip("kla", S.label || "MODELED", { text: "projection update" }); _show.refreshPlain(); }
 }
 
 // =============================================================================
@@ -454,7 +385,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) => {
@@ -467,10 +398,10 @@ export function unmount() {
       _stage.scene.remove(_group);
     }
   } catch (_) {}
-  _group = _overlay = null;
+  _group = _show = null;
   _floor = null; _spine = null; _plane = null;
   _klaBars = []; _gatedBars = []; _marker = null;
-  _el = {}; _badge = null; _plain = false; _frameReg = false;
+  _el = {}; _badge = null; _frameReg = false;
   _stage = _THREE = _ctx = null;
   S.label = S.dim = S.steps = S.lr = S.tol = null;
   S.klaErr = S.gatedErr = S.klaConv = S.gatedConv = S.improve = null;

static/3d/surfaces/kvcache.js

@@ -39,6 +39,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    = "kvcache";
 const TITLE = "KV-Cache H2O Eviction · Heavy-Hitter Oracle (live)";
 
@@ -60,9 +62,8 @@ const MAX_TOKENS = 160;    // cap on tokens rendered in the row (perf)
 const ROW_Y      = 0.4;    // resting height of a kept token
 const EVICT_Y    = -1.6;   // dropped height of an evicted token
 
-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;
@@ -256,112 +257,42 @@ 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 decoding stream accumulates a KV cache entry per token. <b>H2O</b> (Heavy-Hitter Oracle) ' +
-    'keeps a bounded cache by retaining the top cumulative-attention-mass \u201cheavy hitters\u201d ' +
-    'plus a sliding recent <b>window</b>, instead of evicting purely by recency. HUD compares ' +
-    'H2O against a sliding-window-only baseline and the full-cache (no eviction) oracle. ' +
-    'Honesty label <b>MODELED</b> (deterministic simulation on a synthetic attention trace; NOT a ' +
-    'real KV cache or trained 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 = "kv-cache h2o eviction";
-  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("kv-seqlen",   "seq_len (decoded tokens)"));
-  grid.appendChild(kpiRow("kv-capacity", "capacity (KV-cache slots)"));
-  grid.appendChild(kpiRow("kv-window",   "window (recent tokens reserved)"));
-  grid.appendChild(kpiRow("kv-memratio", "memory_ratio (capacity/seq_len)"));
-  grid.appendChild(kpiRow("kv-h2o",      "H2O mass_retained \u2014 MODELED"));
-  grid.appendChild(kpiRow("kv-sliding",  "sliding-window mass_retained"));
-  grid.appendChild(kpiRow("kv-full",     "full-cache mass_retained (oracle)"));
-  grid.appendChild(kpiRow("kv-gain",     "H2O vs sliding gain"));
-  grid.appendChild(kpiRow("kv-evicted",  "evicted_count"));
-  grid.appendChild(kpiRow("kv-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 = "H2O \u2014 Zhang et al. arXiv:2306.14048 \u00b7 StreamingLLM \u2014 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: "#3af4c8",
+    badge: _badge,
+    chips: [{ label: "MODELED", text: "h2o eviction", name: "kv" }],
+    legend: ["MODELED", "SAMPLE"],
+    description:
+      'A decoding stream accumulates a KV cache entry per token. <b>H2O</b> (Heavy-Hitter Oracle) ' +
+      'keeps a bounded cache by retaining the top cumulative-attention-mass \u201cheavy hitters\u201d ' +
+      'plus a sliding recent <b>window</b>, instead of evicting purely by recency. HUD compares ' +
+      'H2O against a sliding-window-only baseline and the full-cache (no eviction) oracle. ' +
+      'Honesty label <b>MODELED</b> (deterministic simulation on a synthetic attention trace; NOT a ' +
+      'real KV cache or trained model). 0 runtime CDN.',
+    citations:
+      "H2O \u2014 Zhang et al. arXiv:2306.14048 \u00b7 StreamingLLM \u2014 Xiao et al. arXiv:2309.17453. MODELED \u00b7 not claimed-as.",
+    plain: { html: _plainHtml },
   });
-  _overlay.appendChild(pl);
 
-  const pd = document.createElement("div");
-  pd.id = "kv-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["kv-seqlen"]   = _show.addField("seq_len (decoded tokens)");
+  _el["kv-capacity"] = _show.addField("capacity (KV-cache slots)");
+  _el["kv-window"]   = _show.addField("window (recent tokens reserved)");
+  _el["kv-memratio"] = _show.addField("memory_ratio (capacity/seq_len)");
+  _el["kv-h2o"]      = _show.addField("H2O mass_retained \u2014 MODELED");
+  _el["kv-sliding"]  = _show.addField("sliding-window mass_retained");
+  _el["kv-full"]     = _show.addField("full-cache mass_retained (oracle)");
+  _el["kv-gain"]     = _show.addField("H2O vs sliding gain");
+  _el["kv-evicted"]  = _show.addField("evicted_count");
+  _el["kv-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 mem     = S.memoryRatio         != null ? (S.memoryRatio * 100).toFixed(1) + "%" : "loading\u2026";
   const h2oPct  = S.h2oMassRetained     != null ? (S.h2oMassRetained * 100).toFixed(1) + "%" : "loading\u2026";
   const slidPct = S.slidingMassRetained != null ? (S.slidingMassRetained * 100).toFixed(1) + "%" : "loading\u2026";
-  pd.innerHTML =
+  return (
     "<b>What this means:</b> A language model keeps a running \u201cnotebook\u201d (the KV cache) of " +
     "every word it has generated so it can pay attention back to earlier words. That notebook grows " +
     "forever unless something is thrown away. Here the notebook is capped at just <b>" + mem + "</b> " +
@@ -370,7 +301,7 @@ function _applyPlain() {
     "out to matter most so far (the \u201cheavy hitters\u201d), plus the most recent few \u2014 and keeps " +
     "<b>" + h2oPct + "</b> of the important information at the SAME notebook size. This view is a " +
     "<b>MODELED</b> deterministic simulation of that keep/discard rule on a synthetic attention trace, " +
-    "not a run of a real trained model or KV cache.";
+    "not a run of a real trained model or KV cache.");
 }
 
 function _tok(s) {
@@ -398,7 +329,7 @@ function _paintOverlay() {
   _set("kv-evicted",  t || (S.evictedCount != null ? String(S.evictedCount) : "\u2014"));
   // honesty label verbatim — never upgraded
   _set("kv-label", t || (S.label || "MODELED"));
-  if (_plain) _applyPlain();
+  if (_show) { _show.setChip("kv", S.label || "MODELED", { text: "h2o eviction" }); _show.refreshPlain(); }
 }
 
 // =============================================================================
@@ -406,7 +337,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) => {
@@ -419,9 +350,9 @@ export function unmount() {
       _stage.scene.remove(_group);
     }
   } catch (_) {}
-  _group = _overlay = null;
+  _group = _show = null;
   _floor = null; _spine = null; _tokenMesh = []; _marker = null;
-  _el = {}; _badge = null; _plain = false; _frameReg = false;
+  _el = {}; _badge = null; _frameReg = false;
   _stage = _THREE = _ctx = null;
   S.label = S.seqLen = S.capacity = S.window = S.memoryRatio = null;
   S.h2oMassRetained = S.slidingMassRetained = S.fullMassRetained = null;

static/3d/surfaces/matgran.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    = "matgran";
 const TITLE = "Matryoshka Representation Granularity · Prefix-Truncation Simulator (live)";
 
@@ -64,9 +66,8 @@ const MAX_BAR_H  = 7.0;    // world-units — bar height at accuracy = 1.0
 const MIN_BAR_H  = 0.12;   // world-units — floor height so a bar never vanishes
 const SAVE_H     = 4.0;    // world-units — storage-saving marker height at saving = 1.0
 
-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;
@@ -266,106 +267,36 @@ 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%,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 embedding is trained so its <b>front prefixes</b> are each usable embeddings ' +
-    '\u2014 truncate to the first 2/4/8/16/32 dims to trade accuracy for storage with no ' +
-    'retraining. The <b>lattice-blue</b> bars are the <b>nested</b> (front-loaded) embedding\u2019s ' +
-    'accuracy at each prefix; the <b>grey</b> bars are a <b>non-nested</b> control (same directions, ' +
-    'shuffled); the <b>proof-teal</b> markers are the storage saving at each prefix. Nested stays ' +
-    'accurate under truncation; non-nested collapses. Honesty label <b>MODELED</b> ' +
-    '(deterministic toy sim; NOT a trained encoder). 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 = "matryoshka representation granularity";
-  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:62%";
-    v.textContent = "\u2014";
-    _el[id] = v;
-    r.appendChild(l); r.appendChild(v); return r;
-  }
-
-  grid.appendChild(kpiRow("mg-D",       "D (full width)"));
-  grid.appendChild(kpiRow("mg-prefixes","prefixes evaluated"));
-  grid.appendChild(kpiRow("mg-nested",  "nested acc @ prefixes"));
-  grid.appendChild(kpiRow("mg-nonnest", "non-nested acc @ prefixes"));
-  grid.appendChild(kpiRow("mg-saving",  "storage saving @ prefixes"));
-  grid.appendChild(kpiRow("mg-full",    "full_accuracy (d = D)"));
-  grid.appendChild(kpiRow("mg-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 = "MIPIC arXiv:2604.24374 (refines nested reps) \u00b7 MRL arXiv:2205.13147 (foundational). 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: "#d7b96b",
+    badge: _badge,
+    chips: [{ label: "MODELED", text: "nested embedding", name: "mg" }],
+    legend: ["MODELED", "SAMPLE"],
+    description:
+      'One embedding is trained so its <b>front prefixes</b> are each usable embeddings ' +
+      '\u2014 truncate to the first 2/4/8/16/32 dims to trade accuracy for storage with no ' +
+      'retraining. The <b>lattice-blue</b> bars are the <b>nested</b> (front-loaded) embedding\u2019s ' +
+      'accuracy at each prefix; the <b>grey</b> bars are a <b>non-nested</b> control (same directions, ' +
+      'shuffled); the <b>proof-teal</b> markers are the storage saving at each prefix. Nested stays ' +
+      'accurate under truncation; non-nested collapses. Honesty label <b>MODELED</b> ' +
+      '(deterministic toy sim; NOT a trained encoder). 0 runtime CDN.',
+    citations:
+      "MIPIC arXiv:2604.24374 (refines nested reps) \u00b7 MRL arXiv:2205.13147 (foundational). MODELED \u00b7 not claimed-as.",
+    plain: { html: _plainHtml },
   });
-  _overlay.appendChild(pl);
 
-  const pd = document.createElement("div");
-  pd.id = "mg-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["mg-D"]        = _show.addField("D (full width)");
+  _el["mg-prefixes"] = _show.addField("prefixes evaluated");
+  _el["mg-nested"]   = _show.addField("nested acc @ prefixes");
+  _el["mg-nonnest"]  = _show.addField("non-nested acc @ prefixes");
+  _el["mg-saving"]   = _show.addField("storage saving @ prefixes");
+  _el["mg-full"]     = _show.addField("full_accuracy (d = D)");
+  _el["mg-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() {
   let lowGain = "loading\u2026";
   if (Array.isArray(S.curve) && S.curve.length) {
     const c0 = S.curve[0];
@@ -374,7 +305,7 @@ function _applyPlain() {
                 "% vs non-nested " + (c0.non_nested_accuracy * 100).toFixed(0) + "%";
     }
   }
-  pd.innerHTML =
+  return (
     "<b>What this means:</b> An embedding is a list of numbers that captures the meaning of " +
     "something (a word, an image). Normally, if you want a shorter, cheaper embedding you have " +
     "to train a whole new model. <b>Matryoshka</b> embeddings are trained so the FIRST few " +
@@ -389,7 +320,7 @@ function _applyPlain() {
     "self-distillation over real models. It shows WHY prefix-nested embeddings degrade " +
     "gracefully versus a non-nested control; it does NOT reproduce MIPIC\u2019s STS/NLI/" +
     "classification results or MRL\u2019s ImageNet speed-ups, and the \u201cself-distillation\u201d " +
-    "step is a one-pass toy stand-in. Not a run of MIPIC or MRL.";
+    "step is a one-pass toy stand-in. Not a run of MIPIC or MRL.");
 }
 
 function _tok(s) {
@@ -424,7 +355,7 @@ function _paintOverlay() {
   _set("mg-full",    t || (S.fullAcc != null ? S.fullAcc.toFixed(3) : "\u2014"));
   // honesty label verbatim — never upgraded
   _set("mg-label", t || (S.label || "MODELED"));
-  if (_plain) _applyPlain();
+  if (_show) { _show.setChip("mg", S.label || "MODELED", { text: "nested embedding" }); _show.refreshPlain(); }
 }
 
 // =============================================================================
@@ -432,7 +363,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,11 +376,11 @@ export function unmount() {
       _stage.scene.remove(_group);
     }
   } catch (_) {}
-  _group = _overlay = null;
+  _group = _show = null;
   _floor = null;
   _nestBars = []; _nonBars = []; _saveMk = [];
   _nestTargetH = []; _nonTargetH = []; _saveTargetH = [];
-  _el = {}; _badge = null; _plain = false; _frameReg = false;
+  _el = {}; _badge = null; _frameReg = false;
   _stage = _THREE = _ctx = null;
   S.label = S.D = S.prefixes = S.curve = S.fullAcc = null;
   S.state = "init";

static/3d/surfaces/mla.js

@@ -39,6 +39,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    = "mla";
 const TITLE = "Multi-Head Latent Attention · KV-Compression Simulator (live)";
 
@@ -60,9 +62,8 @@ const COL_GAP      = 2.4;   // world-units between the full-KV and latent column
 const MAX_FULL_H   = 8.0;   // world-units — height of the full-KV column at scale=1
 const MIN_LATENT_H = 0.15;  // world-units — floor height so the latent column never vanishes
 
-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;
@@ -260,110 +261,40 @@ 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 =
-    'Per-token Key/Value vectors across all heads are jointly <b>down-projected</b> to a ' +
-    'shared low-rank <b>latent</b> vector (only this gets cached), then <b>up-projected</b> ' +
-    'back on demand. The tall <b>lattice-blue</b> column is the full/uncompressed KV cache; ' +
-    'the short <b>proof-teal</b> column is the compressed latent cache; the faint grey ghost ' +
-    'shows the reconstruction. Honesty label <b>MODELED</b> (deterministic low-rank ' +
-    'down/up-projection simulation; NOT trained DeepSeek 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:#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 = "multi-head latent 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("mla-seqlen",  "seq_len (positions)"));
-  grid.appendChild(kpiRow("mla-heads",   "n_heads \u00d7 d_head"));
-  grid.appendChild(kpiRow("mla-dlatent", "d_latent (compressed width)"));
-  grid.appendChild(kpiRow("mla-mhacache","mha_cache_size (elements)"));
-  grid.appendChild(kpiRow("mla-mlacache","mla_cache_size (elements)"));
-  grid.appendChild(kpiRow("mla-ratio",   "compression_ratio \u2014 MODELED"));
-  grid.appendChild(kpiRow("mla-err",     "reconstruction_error (mean L2)"));
-  grid.appendChild(kpiRow("mla-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 = "DeepSeek-V2 arXiv:2405.04434 (introduces MLA) \u00b7 DeepSeek-V3 arXiv:2412.19437 (adopts MLA). 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: "KV compression", name: "mla" }],
+    legend: ["MODELED", "SAMPLE"],
+    description:
+      'Per-token Key/Value vectors across all heads are jointly <b>down-projected</b> to a ' +
+      'shared low-rank <b>latent</b> vector (only this gets cached), then <b>up-projected</b> ' +
+      'back on demand. The tall <b>lattice-blue</b> column is the full/uncompressed KV cache; ' +
+      'the short <b>proof-teal</b> column is the compressed latent cache; the faint grey ghost ' +
+      'shows the reconstruction. Honesty label <b>MODELED</b> (deterministic low-rank ' +
+      'down/up-projection simulation; NOT trained DeepSeek weights). 0 runtime CDN.',
+    citations:
+      "DeepSeek-V2 arXiv:2405.04434 (introduces MLA) \u00b7 DeepSeek-V3 arXiv:2412.19437 (adopts MLA). MODELED \u00b7 not claimed-as.",
+    plain: { html: _plainHtml },
   });
-  _overlay.appendChild(pl);
 
-  const pd = document.createElement("div");
-  pd.id = "mla-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["mla-seqlen"]   = _show.addField("seq_len (positions)");
+  _el["mla-heads"]    = _show.addField("n_heads \u00d7 d_head");
+  _el["mla-dlatent"]  = _show.addField("d_latent (compressed width)");
+  _el["mla-mhacache"] = _show.addField("mha_cache_size (elements)");
+  _el["mla-mlacache"] = _show.addField("mla_cache_size (elements)");
+  _el["mla-ratio"]    = _show.addField("compression_ratio \u2014 MODELED");
+  _el["mla-err"]      = _show.addField("reconstruction_error (mean L2)");
+  _el["mla-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 ratio = S.ratio    != null ? S.ratio.toFixed(2) + "\u00d7" : "loading\u2026";
   const err   = S.reconErr != null ? S.reconErr.toFixed(3) : "loading\u2026";
   const dl    = S.dLatent  != null ? String(S.dLatent) : "loading\u2026";
-  pd.innerHTML =
+  return (
     "<b>What this means:</b> Normally, a model must remember a separate \u201ckey\u201d and " +
     "\u201cvalue\u201d vector for every attention head, for every word it has generated so far " +
     "\u2014 this memory (the KV cache) grows huge for long conversations. <b>Multi-Head Latent " +
@@ -374,7 +305,7 @@ function _applyPlain() {
     "(<b>" + err + "</b> average error) since a random squeeze loses some detail. In real " +
     "DeepSeek-V2/V3 models, that squeeze is <i>trained</i> to keep the mismatch tiny; this " +
     "view uses an untrained, deterministic squeeze to demonstrate the compression math " +
-    "honestly \u2014 it is a <b>MODELED</b> simulation, not a run of DeepSeek's actual model.";
+    "honestly \u2014 it is a <b>MODELED</b> simulation, not a run of DeepSeek's actual model.");
 }
 
 function _tok(s) {
@@ -399,7 +330,7 @@ function _paintOverlay() {
   _set("mla-err",      t || fx(S.reconErr, 4));
   // honesty label verbatim — never upgraded
   _set("mla-label", t || (S.label || "MODELED"));
-  if (_plain) _applyPlain();
+  if (_show) { _show.setChip("mla", S.label || "MODELED", { text: "KV compression" }); _show.refreshPlain(); }
 }
 
 // =============================================================================
@@ -407,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) => {
@@ -420,10 +351,10 @@ export function unmount() {
       _stage.scene.remove(_group);
     }
   } catch (_) {}
-  _group = _overlay = null;
+  _group = _show = null;
   _floor = null; _fullCol = null; _latentCol = null; _ghostCol = null; _linkLine = null;
   _fullTargetH = 0.4; _latentTargetH = 0.4; _ghostTargetH = 0.4;
-  _el = {}; _badge = null; _plain = false; _frameReg = false;
+  _el = {}; _badge = null; _frameReg = false;
   _stage = _THREE = _ctx = null;
   S.label = S.seqLen = S.nHeads = S.dHead = S.dLatent = null;
   S.mhaCache = S.mlaCache = S.ratio = S.reconErr = null;

static/3d/surfaces/moe.js

@@ -46,6 +46,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    = "moe";
 const TITLE = "MoE Sparse-Upcycling Router Simulator (live)";
 
@@ -66,9 +68,8 @@ const CELL_X = 1.1;          // world-units per expert column
 const CELL_Z = 1.3;          // world-units per routing round row
 const MAX_BAR_H = 5.0;       // world-units of max bar height (cumulative load 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 _floor = null;
@@ -260,110 +261,40 @@ 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 =
+  _show = createShowcase(ctx, {
+    id: ID, title: TITLE, accent: "#5b8dee",
+    badge: _badge,
+    chips: [{ label: "MODELED", text: "router load", name: "moe" }],
+    legend: ["MODELED", "SAMPLE"],
+    description:
     'A <b>top-K softmax router</b> dispatches each synthetic token to its highest-weight ' +
     'experts. The heat-surface shows <b>cumulative expert load</b> building up across ' +
     'routing rounds (X = expert, Z = round, Y = cumulative load). <b style="color:#5b8dee">Blue</b> ' +
     'peaks are <b>under-loaded</b> experts (below mean); <b style="color:#3af4c8">teal</b> peaks are ' +
     '<b>balanced/at-or-above-mean</b>. Honesty label <b>MODELED</b> (deterministic router ' +
     'simulation — no trained MoE, never claimed as DeepSeekMoE/Gemma-MoE/any production ' +
-    'router). 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 = "moe-router";
-  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("moe-tokens",  "tokens routed"));
-  grid.appendChild(kpiRow("moe-experts", "experts N"));
-  grid.appendChild(kpiRow("moe-topk",    "top-K per token"));
-  grid.appendChild(kpiRow("moe-cv",      "load_balance_cv"));
-  grid.appendChild(kpiRow("moe-minmax",  "min / max expert load"));
-  grid.appendChild(kpiRow("moe-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 = "Komatsuzaki et al. arXiv:2212.05055 (Sparse Upcycling) \u00b7 Dai et al. arXiv:2401.06066 (DeepSeekMoE) \u00b7 github.com/amazon-science/expert-upcycling (Expert Upcycling). 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();
+    'router). 0 runtime CDN.',
+    citations:
+      "Komatsuzaki et al. arXiv:2212.05055 (Sparse Upcycling) \u00b7 Dai et al. arXiv:2401.06066 (DeepSeekMoE) \u00b7 github.com/amazon-science/expert-upcycling (Expert Upcycling). MODELED \u00b7 not claimed-as.",
+    plain: { html: _plainHtml },
   });
-  _overlay.appendChild(pl);
 
-  const pd = document.createElement("div");
-  pd.id = "moe-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["moe-tokens"]  = _show.addField("tokens routed");
+  _el["moe-experts"] = _show.addField("experts N");
+  _el["moe-topk"]    = _show.addField("top-K per token");
+  _el["moe-cv"]      = _show.addField("load_balance_cv");
+  _el["moe-minmax"]  = _show.addField("min / max expert load");
+  _el["moe-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 tokens = S.tokens != null ? String(S.tokens) : "loading\u2026";
   const experts = S.experts != null ? String(S.experts) : "loading\u2026";
   const topk = S.topk != null ? String(S.topk) : "loading\u2026";
   const cv = S.loadCV != null ? S.loadCV.toFixed(3) : "loading\u2026";
-  pd.innerHTML =
+  return (
     "<b>What this means:</b> A Mixture-of-Experts (MoE) layer has many small \u2018expert\u2019 " +
     "sub-networks, but only sends each token to a handful of them (here: top-<b>" + topk +
     "</b> out of <b>" + experts + "</b> experts) \u2014 this is what makes MoE models cheap to " +
@@ -377,7 +308,7 @@ function _applyPlain() {
     "= some experts are getting hammered while others sit idle). " +
     "Plain: this is a toy, fully-deterministic stand-in for the router-fairness problem " +
     "real MoE systems have to solve \u2014 it is a <b>MODELED</b> simulation, not a trained " +
-    "MoE and not a benchmark of any named production model.";
+    "MoE and not a benchmark of any named production model.");
 }
 
 function _tok(s) {
@@ -404,7 +335,7 @@ function _paintOverlay() {
   }
   // honesty label verbatim — never upgraded
   _set("moe-label", t || (S.label || "MODELED"));
-  if (_plain) _applyPlain();
+  if (_show) { _show.setChip("moe", S.label || "MODELED", { text: "router load" }); _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) => {
@@ -426,9 +357,9 @@ export function unmount() {
     }
   } catch (_) {}
   if (_barGeo && _barGeo.dispose) { try { _barGeo.dispose(); } catch (_) {} }
-  _group = _overlay = null;
+  _group = _show = null;
   _bars = []; _barGeo = null; _floor = null; _labelGroup = null;
-  _el = {}; _badge = null; _plain = false; _frameReg = false;
+  _el = {}; _badge = null; _frameReg = false;
   _stage = _THREE = _ctx = null;
   S.label = S.tokens = S.experts = S.topk = null;
   S.routingTable = S.loadCounts = S.loadCV = null;

static/3d/surfaces/mor.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    = "mor";
 const TITLE = "Mixture-of-Recursions · Adaptive Per-Token Depth (live)";
 
@@ -65,9 +67,8 @@ const ROWS       = 16;    // heatmap rows  (COLS*ROWS = 256 = default token coun
 const CELL       = 0.62;  // world-units between heatmap cells
 const MAX_CELLS  = COLS * ROWS;
 
-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;
@@ -308,122 +309,47 @@ 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%,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 =
+  _show = createShowcase(ctx, {
+    id: ID, title: TITLE, accent: "#5b8dee",
+    badge: _badge,
+    chips: [{ label: "MODELED", text: "adaptive depth", name: "mor" }],
+    legend: ["MODELED", "SAMPLE"],
+    description:
     'ONE shared transformer block is applied a <b>variable number of times per token</b>: a lightweight ' +
     'router gives each token a recursion <b>depth</b> (1…N loops of the <i>same</i> weights). ' +
     'Easy tokens exit early; hard tokens recurse deeper. Cells below are coloured by depth ' +
     '(blue = shallow → teal = deep); height = compute spent. ' +
-    'Honesty label <b>MODELED</b> (deterministic depth-routing simulation; NOT the MoR model). 0 runtime CDN.';
-  _overlay.appendChild(sub);
-
-  // explicit router-vs-mor distinction banner
-  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";
-  dist.innerHTML =
+    'Honesty label <b>MODELED</b> (deterministic depth-routing simulation; NOT the MoR model). 0 runtime CDN.' +
+    '<br><br>' +
     '<b style="color:#3af4c8">Not the &lsquo;router&rsquo; organ.</b> ' +
     'The <b>router</b> organ is parameter <b>SELECTION</b> — it dispatches each token to one of several ' +
     '<i>different, independently-parameterized</i> models/experts (<i>which</i> weights). ' +
     '<b>Mixture-of-Recursions</b> is parameter <b>REUSE</b> — it loops <i>one</i> shared block a variable ' +
-    'number of times per token (<i>how many times</i> the same weights). One weight set here; only the depth changes.';
-  _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 = "mixture-of-recursions";
-  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("mor-tokens",   "tokens routed"));
-  grid.appendChild(kpiRow("mor-maxdepth", "max_depth (loops of ONE block)"));
-  grid.appendChild(kpiRow("mor-meandepth","mean recursion depth"));
-  grid.appendChild(kpiRow("mor-saved",    "compute_saved vs fixed-depth \u2014 MODELED"));
-  grid.appendChild(kpiRow("mor-speedup",  "speedup_vs_fixed \u2014 MODELED"));
-  grid.appendChild(kpiRow("mor-kv",       "KV-cache footprint vs uniform"));
-  grid.appendChild(kpiRow("mor-quality",  "quality_retained (proxy)"));
-  grid.appendChild(kpiRow("mor-shared",   "shared block? (parameter REUSE)"));
-  grid.appendChild(kpiRow("mor-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 = "Bae et al. arXiv:2507.10524 (Mixture-of-Recursions) \u00b7 github.com/raymin0223/mixture_of_recursions. 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();
+    'number of times per token (<i>how many times</i> the same weights). One weight set here; only the depth changes.',
+    citations:
+      "Bae et al. arXiv:2507.10524 (Mixture-of-Recursions) \u00b7 github.com/raymin0223/mixture_of_recursions. MODELED \u00b7 not claimed-as.",
+    plain: { html: _plainHtml },
   });
-  _overlay.appendChild(pl);
 
-  const pd = document.createElement("div");
-  pd.id = "mor-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["mor-tokens"]    = _show.addField("tokens routed");
+  _el["mor-maxdepth"]  = _show.addField("max_depth (loops of ONE block)");
+  _el["mor-meandepth"] = _show.addField("mean recursion depth");
+  _el["mor-saved"]     = _show.addField("compute_saved vs fixed-depth \u2014 MODELED");
+  _el["mor-speedup"]   = _show.addField("speedup_vs_fixed \u2014 MODELED");
+  _el["mor-kv"]        = _show.addField("KV-cache footprint vs uniform");
+  _el["mor-quality"]   = _show.addField("quality_retained (proxy)");
+  _el["mor-shared"]    = _show.addField("shared block? (parameter REUSE)");
+  _el["mor-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 md      = S.maxDepth  != null ? String(S.maxDepth) : "loading\u2026";
   const mean    = S.meanDepth != null ? S.meanDepth.toFixed(2) : "loading\u2026";
   const savedPc = S.savedFrac != null ? (S.savedFrac * 100).toFixed(1) + "%" : "loading\u2026";
   const spd     = S.speedup   != null ? S.speedup.toFixed(2) + "\u00d7" : "loading\u2026";
-  pd.innerHTML =
+  return (
     "<b>What this means:</b> A normal model runs every word through the <i>same</i> amount of work. " +
     "Mixture-of-Recursions reuses <b>one</b> block of the model and simply <b>loops it more times " +
     "for hard words and fewer times for easy words</b> (up to <b>" + md + "</b> loops). On average each " +
@@ -432,7 +358,7 @@ function _applyPlain() {
     "because only the genuinely hard words get the deep treatment. " +
     "<b>Key difference from a &lsquo;router&rsquo;:</b> a router picks <i>which</i> of several different " +
     "models to use; MoR reuses <i>one</i> model and only changes <i>how many times</i> it runs. " +
-    "This view is a <b>MODELED</b> simulation of the depth-routing math, not a run of the real MoR model.";
+    "This view is a <b>MODELED</b> simulation of the depth-routing math, not a run of the real MoR model.");
 }
 
 function _tok(s) {
@@ -459,7 +385,7 @@ function _paintOverlay() {
   _set("mor-shared",    t || (S.sharedBlock === true ? "yes (ONE reused block)" : S.sharedBlock === false ? "no" : "\u2014"));
   // honesty label verbatim — never upgraded
   _set("mor-label", t || (S.label || "MODELED"));
-  if (_plain) _applyPlain();
+  if (_show) { _show.setChip("mor", S.label || "MODELED", { text: "adaptive depth" }); _show.refreshPlain(); }
 }
 
 // =============================================================================
@@ -467,7 +393,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) => {
@@ -480,9 +406,9 @@ export function unmount() {
       _stage.scene.remove(_group);
     }
   } catch (_) {}
-  _group = _overlay = null;
+  _group = _show = null;
   _floor = null; _cellMesh = []; _column = null; _colBars = []; _marker = null;
-  _el = {}; _badge = null; _plain = false; _frameReg = false;
+  _el = {}; _badge = null; _frameReg = false;
   _stage = _THREE = _ctx = null;
   S.label = S.tokens = S.maxDepth = S.threshold = null;
   S.perToken = S.histogram = S.meanDepth = S.savedFrac = null;

static/3d/surfaces/muon.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    = "muon";
 const TITLE = "Muon Orthogonalized-Momentum Optimizer";
 
@@ -68,9 +70,8 @@ const HEAT_GAP   = 0.17;   // heatmap cell pitch
 const HEAT_MAX   = 24;     // cap cells per axis rendered (perf)
 const BAR_W      = 0.9;    // condition-number 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;
@@ -379,115 +380,45 @@ 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%,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 =
+  _show = createShowcase(ctx, {
+    id: ID, title: TITLE, accent: "#5b8dee",
+    badge: _badge,
+    chips: [{ label: "MODELED", text: "orthogonalization", name: "muon" }],
+    legend: ["MODELED", "SAMPLE"],
+    description:
     'Muon (\u201cMomentUm Orthogonalized by Newton\u2013Schulz\u201d) replaces a momentum update matrix ' +
     'with the nearest <b>semi-orthogonal</b> matrix (UV\u1d40 from its SVD) via a hand-tuned <b>quintic ' +
     'Newton\u2013Schulz</b> recurrence X<sub>k+1</sub> = a\u00b7X + b\u00b7(XX\u1d40)X + c\u00b7(XX\u1d40)\u00b2X ' +
     '(a=3.4445, b=\u22124.7750, c=2.0315). This <b>flattens the singular-value spectrum</b> toward the ' +
     'non-convergent <b>[0.68, 1.13]</b> band so no direction dominates the step. Panels: singular-value ' +
     'trajectory, before/after matrix heatmap, condition-number bars (raw vs orthogonalized). Honesty label ' +
-    '<b>MODELED</b> (deterministic mechanism reproduction on a toy matrix; trains nothing). 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 = "muon orthogonalized-momentum optimizer";
-  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("mu-dims",   "momentum matrix (m \u00d7 n)"));
-  grid.appendChild(kpiRow("mu-ns",     "Newton\u2013Schulz iterations"));
-  grid.appendChild(kpiRow("mu-coeffs", "quintic coefficients (a / b / c)"));
-  grid.appendChild(kpiRow("mu-rank",   "singular values tracked (rank)"));
-  grid.appendChild(kpiRow("mu-condr",  "condition \u03ba \u2014 RAW"));
-  grid.appendChild(kpiRow("mu-condo",  "condition \u03ba \u2014 ORTHOGONALIZED"));
-  grid.appendChild(kpiRow("mu-condi",  "spectral-flattening factor"));
-  grid.appendChild(kpiRow("mu-band",   "convergence band"));
-  grid.appendChild(kpiRow("mu-frac",   "final \u03c3 inside band (MEASURED)"));
-  grid.appendChild(kpiRow("mu-svrange","final \u03c3 range (min \u2192 max)"));
-  grid.appendChild(kpiRow("mu-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 = "Muon \u2014 Keller Jordan et al. (kellerjordan.github.io/posts/muon) \u00b7 Moonshot AI \u201cMuon is Scalable for LLM Training\u201d arXiv:2502.16982 \u00b7 github.com/KellerJordan/Muon. MODELED \u00b7 Newton\u2013Schulz demo, not a trained model.";
-  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();
+    '<b>MODELED</b> (deterministic mechanism reproduction on a toy matrix; trains nothing). 0 runtime CDN.',
+    citations:
+      "Muon \u2014 Keller Jordan et al. (kellerjordan.github.io/posts/muon) \u00b7 Moonshot AI \u201cMuon is Scalable for LLM Training\u201d arXiv:2502.16982 \u00b7 github.com/KellerJordan/Muon. MODELED \u00b7 Newton\u2013Schulz demo, not a trained model.",
+    plain: { html: _plainHtml },
   });
-  _overlay.appendChild(pl);
 
-  const pd = document.createElement("div");
-  pd.id = "mu-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["mu-dims"]    = _show.addField("momentum matrix (m \u00d7 n)");
+  _el["mu-ns"]      = _show.addField("Newton\u2013Schulz iterations");
+  _el["mu-coeffs"]  = _show.addField("quintic coefficients (a / b / c)");
+  _el["mu-rank"]    = _show.addField("singular values tracked (rank)");
+  _el["mu-condr"]   = _show.addField("condition \u03ba \u2014 RAW");
+  _el["mu-condo"]   = _show.addField("condition \u03ba \u2014 ORTHOGONALIZED");
+  _el["mu-condi"]   = _show.addField("spectral-flattening factor");
+  _el["mu-band"]    = _show.addField("convergence band");
+  _el["mu-frac"]    = _show.addField("final \u03c3 inside band (MEASURED)");
+  _el["mu-svrange"] = _show.addField("final \u03c3 range (min \u2192 max)");
+  _el["mu-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 cr   = S.condRaw    != null ? S.condRaw.toFixed(1)    : "loading\u2026";
   const co   = S.condOrtho  != null ? S.condOrtho.toFixed(2)  : "loading\u2026";
   const imp  = S.condImp    != null ? S.condImp.toFixed(1) + "\u00d7" : "loading\u2026";
   const frac = S.fracInBand != null ? (S.fracInBand * 100).toFixed(0) + "%" : "loading\u2026";
-  pd.innerHTML =
+  return (
     "<b>What this means:</b> When a model learns, each update is a grid of numbers (a \u201cmatrix\u201d). Some " +
     "directions in that grid can be far bigger than others, so the step lurches. Muon first <b>rebalances</b> " +
     "the update so every direction has roughly equal weight \u2014 like normalizing the volume across a mixing " +
@@ -498,7 +429,7 @@ function _applyPlain() {
     "<b>0.68\u20131.13</b> range the method aims for. This view is a <b>MODELED</b> deterministic reproduction " +
     "of that rebalancing MECHANISM on a small synthetic matrix \u2014 it <b>trains no model</b> and runs no GPU " +
     "kernel. The \u201c\u2248 2\u00d7 faster training vs. AdamW\u201d headline is a <b>claim about real training " +
-    "runs</b> (Keller Jordan / Moonshot AI) that the estate does not independently verify.";
+    "runs</b> (Keller Jordan / Moonshot AI) that the estate does not independently verify.");
 }
 
 function _tok(s) {
@@ -527,7 +458,7 @@ function _paintOverlay() {
   _set("mu-svrange", t || ((S.svMinFinal != null && S.svMaxFinal != null) ? (fx(S.svMinFinal, 3) + " \u2192 " + fx(S.svMaxFinal, 3)) : "\u2014"));
   // honesty label verbatim — never upgraded
   _set("mu-label",   t || (S.label || "MODELED"));
-  if (_plain) _applyPlain();
+  if (_show) { _show.setChip("muon", S.label || "MODELED", { text: "orthogonalization" }); _show.refreshPlain(); }
 }
 
 // =============================================================================
@@ -535,7 +466,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 +479,12 @@ export function unmount() {
       _stage.scene.remove(_group);
     }
   } catch (_) {}
-  _group = _overlay = null;
+  _group = _show = null;
   _floor = null;
   _trajGroup = null;
   _heatRaw = []; _heatOrtho = []; _heatGroup = null;
   _barRaw = null; _barOrtho = null; _barGroup = null;
-  _el = {}; _badge = null; _plain = false; _frameReg = false;
+  _el = {}; _badge = null; _frameReg = false;
   _stage = _THREE = _ctx = null;
   S.label = S.m = S.n = S.nsSteps = null;
   S.coA = S.coB = S.coC = null;

static/3d/surfaces/nested.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    = "nested";
 const TITLE = "Nested Learning · Continuum Memory System (live)";
 
@@ -73,9 +75,8 @@ const RING_SEG    = 64;                // ring outline segments
 const MAX_BLOCKS  = 96;                // cap on forgetting-curve markers rendered
 const CURVE_SPAN  = 12.0;              // world-units the forgetting curve spans along X
 
-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;
@@ -352,111 +353,41 @@ 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%,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 model as a stack of memory levels updating at <b>different clocks</b> (fast/medium/slow), with ' +
-    'the <b>optimizer itself as associative memory</b>. On a toy continual-learning stream, the slow ' +
-    '<b>protected core</b> (a surprise-gated timescale) <b>retains earlier tasks</b> where a single-clock ' +
-    'baseline overwrites and <b>forgets</b> them. ' +
-    'Honesty label <b>MODELED</b> (deterministic scheduling simulation; NOT the Hope architecture). 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 = "nested learning / continuum memory system";
-  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("ne-tasks",   "continual-learning tasks"));
-  grid.appendChild(kpiRow("ne-clocks",  "clocks k_fast / k_med / k_slow"));
-  grid.appendChild(kpiRow("ne-gate",    "slow-core surprise gate"));
-  grid.appendChild(kpiRow("ne-retbase", "task-A retained \u2014 single-clock"));
-  grid.appendChild(kpiRow("ne-retcms",  "task-A retained \u2014 CMS (MODELED)"));
-  grid.appendChild(kpiRow("ne-delta",   "retention gain (CMS \u2212 baseline)"));
-  grid.appendChild(kpiRow("ne-writes",  "slow-core writes CMS / baseline"));
-  grid.appendChild(kpiRow("ne-surprise","mean / peak surprise"));
-  grid.appendChild(kpiRow("ne-momentum","momentum (optimizer-as-memory)"));
-  grid.appendChild(kpiRow("ne-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 = "Behrouz, Razaviyayn, Zhong & Mirrokni 2025 (Google Research) \u00b7 Nested Learning: The Illusion of Deep Learning Architectures \u00b7 NeurIPS 2025 \u00b7 arXiv:2512.24695 \u00b7 research.google/blog Nested Learning. 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: "CMS schedule", name: "nl" }],
+    legend: ["MODELED", "SAMPLE"],
+    description:
+      'A model as a stack of memory levels updating at <b>different clocks</b> (fast/medium/slow), with ' +
+      'the <b>optimizer itself as associative memory</b>. On a toy continual-learning stream, the slow ' +
+      '<b>protected core</b> (a surprise-gated timescale) <b>retains earlier tasks</b> where a single-clock ' +
+      'baseline overwrites and <b>forgets</b> them. ' +
+      'Honesty label <b>MODELED</b> (deterministic scheduling simulation; NOT the Hope architecture). 0 runtime CDN.',
+    citations:
+      "Behrouz, Razaviyayn, Zhong & Mirrokni 2025 (Google Research) \u00b7 Nested Learning: The Illusion of Deep Learning Architectures \u00b7 NeurIPS 2025 \u00b7 arXiv:2512.24695 \u00b7 research.google/blog Nested Learning. MODELED \u00b7 not claimed-as.",
+    plain: { html: _plainHtml },
   });
-  _overlay.appendChild(pl);
 
-  const pd = document.createElement("div");
-  pd.id = "ne-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["ne-tasks"]    = _show.addField("continual-learning tasks");
+  _el["ne-clocks"]   = _show.addField("clocks k_fast / k_med / k_slow");
+  _el["ne-gate"]     = _show.addField("slow-core surprise gate");
+  _el["ne-retbase"]  = _show.addField("task-A retained \u2014 single-clock");
+  _el["ne-retcms"]   = _show.addField("task-A retained \u2014 CMS (MODELED)");
+  _el["ne-delta"]    = _show.addField("retention gain (CMS \u2212 baseline)");
+  _el["ne-writes"]   = _show.addField("slow-core writes CMS / baseline");
+  _el["ne-surprise"] = _show.addField("mean / peak surprise");
+  _el["ne-momentum"] = _show.addField("momentum (optimizer-as-memory)");
+  _el["ne-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 rBase = S.retainBase != null ? (S.retainBase * 100).toFixed(0) + "%" : "loading\u2026";
   const rCms  = S.retainCms  != null ? (S.retainCms  * 100).toFixed(0) + "%" : "loading\u2026";
   const dPct  = S.retDelta   != null ? "+" + (S.retDelta * 100).toFixed(0) + " points" : "loading\u2026";
-  pd.innerHTML =
+  return (
     "<b>What this means:</b> When an AI learns a new skill it often <b>forgets the old one</b> " +
     "(\u201ccatastrophic forgetting\u201d). Nested Learning treats the model as a <b>stack of memories that " +
     "update at different speeds</b> \u2014 a fast one that chases whatever it is learning right now, and " +
@@ -470,7 +401,7 @@ function _applyPlain() {
     "tasks, hand-set clocks), <b>not the \u201cHope\u201d model</b>. The paper was noted publicly to lack full " +
     "ablations in its first version, so this only shows the <b>scheduling mechanism</b> reduces forgetting " +
     "on a controlled stream \u2014 it does <b>not</b> reproduce Hope's language-modeling or needle-in-haystack " +
-    "results or its claimed wins over Titans / Transformers.";
+    "results or its claimed wins over Titans / Transformers.");
 }
 
 function _tok(s) {
@@ -507,7 +438,7 @@ function _paintOverlay() {
   _set("ne-momentum", t || fx(S.momentum, 2));
   // honesty label verbatim — never upgraded
   _set("ne-label", t || (S.label || "MODELED"));
-  if (_plain) _applyPlain();
+  if (_show) { _show.setChip("nl", S.label || "MODELED", { text: "CMS schedule" }); _show.refreshPlain(); }
 }
 
 // =============================================================================
@@ -515,7 +446,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) => {
@@ -528,9 +459,9 @@ export function unmount() {
       _stage.scene.remove(_group);
     }
   } catch (_) {}
-  _group = _overlay = null;
+  _group = _show = null;
   _floor = null; _rings = []; _tiers = []; _baseMarks = []; _cmsMarks = []; _core = null;
-  _el = {}; _badge = null; _plain = false; _frameReg = false;
+  _el = {}; _badge = null; _frameReg = false;
   _stage = _THREE = _ctx = null;
   S.label = S.numTasks = S.blockLen = S.nTokens = null;
   S.kFast = S.kMed = S.kSlow = S.gate = null;

static/3d/surfaces/neuromorphic.js

@@ -35,6 +35,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    = "neuromorphic";
 const TITLE = "Neuromorphic · Spiking Neural Compute (live)";
 
@@ -52,9 +54,8 @@ const GRID_DIM  = 4;
 const N_NEURONS = GRID_DIM * GRID_DIM * GRID_DIM;  // 64
 const SPACING   = 1.15;  // world units between nodes
 
-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 neuron
@@ -91,13 +92,13 @@ export function mount(ctx) {
   _buildFloor();
   _buildLattice();
   _buildHub();
-  _buildOverlay();
 
   if (!_frameReg) { _stage.onFrame(_onFrame); _frameReg = true; }
 
   _badge = ctx.live.createBadge();
   _polls.push(ctx.live.poll(EP, 4000, _onSpikes, { badge: _badge, onState: (m) => { S.state = m.state; _paintOverlay(); } }));
 
+  _buildOverlay();
   return { id: ID, started: true };
 }
 
@@ -264,109 +265,38 @@ 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%,420px)",
-    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 =
-    '<b>LIF (Leaky Integrate-and-Fire)</b> neuron population — 64 nodes on a 3D lattice, ' +
-    'each pulsing from a live deterministic simulation. Honesty label <b>MODELED</b> ' +
-    '(simulation, not measured silicon). Energy estimate cites Intel Loihi\u00a02 ' +
-    '(Davies\u00a0et\u00a0al.\u00a02021\u00a0JPROC). 0\u00a0runtime\u00a0CDN.';
-  _overlay.appendChild(sub);
-
-  // badge row
-  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);
-
-  // KPI card
-  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 = "neuromorphic";
-  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("nm-hz",      "mean firing rate (Hz)"));
-  grid.appendChild(kpiRow("nm-sparse",  "event sparsity"));
-  grid.appendChild(kpiRow("nm-energy",  "energy / spike (pJ) \u2014 MODELED"));
-  grid.appendChild(kpiRow("nm-spikes",  "total spikes"));
-  grid.appendChild(kpiRow("nm-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 = "Gerstner & Kistler \"Spiking Neuron Models\" (2002) \u00b7 Intel Loihi\u00a02 Davies\u00a0et\u00a0al.\u00a02021 DOI:10.1109/JPROC.2021.3067593 \u00b7 Lava\u00a0OSS github.com/lava-nc/lava (BSD-3) \u00b7 Neftci\u00a0et\u00a0al.\u00a0arXiv:1901.09948 \u00b7 BrainScaleS. MODELED \u00b7 not\u00a0claimed-as.";
-  card.appendChild(fn);
-  _overlay.appendChild(card);
-
-  // plain-language toggle
-  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: "LIF spikes", name: "spk" },
+      { label: "MODELED", text: "energy est.", name: "energy" },
+    ],
+    legend: ["MODELED", "SAMPLE"],
+    description:
+      '<b>LIF (Leaky Integrate-and-Fire)</b> neuron population \u2014 64 nodes on a 3D lattice, ' +
+      'each pulsing from a live deterministic simulation. Honesty label <b>MODELED</b> ' +
+      '(simulation, not measured silicon). Energy estimate cites Intel Loihi\u00a02 ' +
+      '(Davies\u00a0et\u00a0al.\u00a02021\u00a0JPROC). 0\u00a0runtime\u00a0CDN.',
+    citations:
+      "Gerstner & Kistler \"Spiking Neuron Models\" (2002) \u00b7 Intel Loihi\u00a02 Davies\u00a0et\u00a0al.\u00a02021 DOI:10.1109/JPROC.2021.3067593 \u00b7 Lava\u00a0OSS github.com/lava-nc/lava (BSD-3) \u00b7 Neftci\u00a0et\u00a0al.\u00a0arXiv:1901.09948 \u00b7 BrainScaleS. MODELED \u00b7 not\u00a0claimed-as.",
+    plain: { html: _plainHtml },
   });
-  _overlay.appendChild(pl);
 
-  // plain-language div (hidden by default)
-  const pd = document.createElement("div");
-  pd.id = "nm-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["nm-hz"]     = _show.addField("mean firing rate (Hz)");
+  _el["nm-sparse"] = _show.addField("event sparsity");
+  _el["nm-energy"] = _show.addField("energy / spike (pJ) \u2014 MODELED");
+  _el["nm-spikes"] = _show.addField("total spikes");
+  _el["nm-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 hz = S.mean_hz != null ? S.mean_hz.toFixed(2) + " Hz" : "loading\u2026";
   const sp = S.sparsity != null ? (S.sparsity * 100).toFixed(1) + "% idle slots" : "loading\u2026";
   const ep = S.energy_pj != null ? S.energy_pj + " pJ/spike (MODELED, citing Loihi\u00a02)" : "loading\u2026";
-  pd.innerHTML =
+  return (
     "<b>What this means:</b> A simulated population of 64 spiking neurons is firing " +
     "at roughly <b>" + hz + "</b> on average. " +
     "Neuromorphic chips fire only on events \u2014 <b>" + sp + "</b> means most circuits " +
@@ -374,7 +304,7 @@ function _applyPlain() {
     "Energy per spike is <b>" + ep + "</b> \u2014 this is a <b>MODELED</b> estimate from " +
     "Intel\u2019s published Loihi\u00a02 specs, not a measured chip reading. " +
     "Plain: spiking neural chips could be far more energy-efficient than dense matrix " +
-    "multiplication, but this number comes from a simulation, not a running chip.";
+    "multiplication, but this number comes from a simulation, not a running chip.");
 }
 
 function _tok(s) {
@@ -396,7 +326,11 @@ function _paintOverlay() {
   _set("nm-spikes", t || (S.total_spikes != null ? String(S.total_spikes) : "\u2014"));
   // honesty label verbatim — never upgraded
   _set("nm-label",  t || (S.label || "MODELED"));
-  if (_plain) _applyPlain();
+  if (_show) {
+    _show.setChip("spk", S.label || "MODELED", { text: "LIF spikes" });
+    _show.setChip("energy", S.energy_label || "MODELED", { text: "energy est." });
+    _show.refreshPlain();
+  }
 }
 
 // =============================================================================
@@ -404,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) => {
@@ -417,9 +351,9 @@ export function unmount() {
       _stage.scene.remove(_group);
     }
   } catch (_) {}
-  _group = _overlay = null;
+  _group = _show = null;
   _nodes = []; _edgeLines = null; _hubSphere = null;
-  _el = {}; _badge = null; _plain = false; _frameReg = false;
+  _el = {}; _badge = null; _frameReg = false;
   _stage = _THREE = _ctx = null;
   S.label = S.mean_hz = S.sparsity = S.energy_pj = S.total_spikes = null;
   S.spike_counts = S.membrane_v = S.energy_label = null;

static/3d/surfaces/nsa.js

@@ -38,6 +38,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    = "nsa";
 const TITLE = "Native Sparse Attention · Compress + Select + Slide (live)";
 
@@ -60,9 +62,8 @@ const SPINE_LEN    = 22;   // world-units the full spine spans along X
 const SUMMARY_Y    = 1.6;  // height above spine for compression summary tokens
 const WINDOW_Z     = 0.0;  // spine sits at z=0; selected blocks nudge +z, summaries -z visually via y
 
-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;
@@ -327,112 +328,42 @@ 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%,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 =
-    'Three parallel branches replace one dense O(L\u00b2) attention pass: a coarse ' +
-    '<b>compression</b> branch pools blocks of tokens into summaries, a <b>top-k selection</b> ' +
-    'branch scores blocks cheaply then attends fully only to the winners, and a local ' +
-    '<b>sliding-window</b> branch always covers recent context. A fixed-weight gate combines ' +
-    'all three. Honesty label <b>MODELED</b> (deterministic reimplementation over synthetic, ' +
-    'LCG-seeded data; NOT a trained 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 = "native sparse 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("nsa-seqlen",   "seq_len (tokens)"));
-  grid.appendChild(kpiRow("nsa-blocks",   "block_size / topk / window"));
-  grid.appendChild(kpiRow("nsa-nsummary", "compression summary tokens"));
-  grid.appendChild(kpiRow("nsa-selblocks","selected blocks (top-k)"));
-  grid.appendChild(kpiRow("nsa-gate",     "gate_combined_score \u2014 MODELED"));
-  grid.appendChild(kpiRow("nsa-evals",    "NSA vs dense evals (this query)"));
-  grid.appendChild(kpiRow("nsa-sparsity", "sparsity ratio \u2014 MODELED"));
-  grid.appendChild(kpiRow("nsa-recall",   "recall vs dense oracle"));
-  grid.appendChild(kpiRow("nsa-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 = "DeepSeek-AI, Yuan et al. 2025 arXiv:2502.11089 (Native Sparse Attention) \u00b7 " +
-    "discussion news.ycombinator.com/item?id=46181231. 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: "3-branch sparse", name: "nsa" }],
+    legend: ["MODELED", "SAMPLE"],
+    description:
+      'Three parallel branches replace one dense O(L\u00b2) attention pass: a coarse ' +
+      '<b>compression</b> branch pools blocks of tokens into summaries, a <b>top-k selection</b> ' +
+      'branch scores blocks cheaply then attends fully only to the winners, and a local ' +
+      '<b>sliding-window</b> branch always covers recent context. A fixed-weight gate combines ' +
+      'all three. Honesty label <b>MODELED</b> (deterministic reimplementation over synthetic, ' +
+      'LCG-seeded data; NOT a trained model). 0 runtime CDN.',
+    citations:
+      "DeepSeek-AI, Yuan et al. 2025 arXiv:2502.11089 (Native Sparse Attention) \u00b7 " +
+      "discussion news.ycombinator.com/item?id=46181231. MODELED \u00b7 not claimed-as.",
+    plain: { html: _plainHtml },
   });
-  _overlay.appendChild(pl);
 
-  const pd = document.createElement("div");
-  pd.id = "nsa-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["nsa-seqlen"]    = _show.addField("seq_len (tokens)");
+  _el["nsa-blocks"]    = _show.addField("block_size / topk / window");
+  _el["nsa-nsummary"]  = _show.addField("compression summary tokens");
+  _el["nsa-selblocks"] = _show.addField("selected blocks (top-k)");
+  _el["nsa-gate"]      = _show.addField("gate_combined_score \u2014 MODELED");
+  _el["nsa-evals"]     = _show.addField("NSA vs dense evals (this query)");
+  _el["nsa-sparsity"]  = _show.addField("sparsity ratio \u2014 MODELED");
+  _el["nsa-recall"]    = _show.addField("recall vs dense oracle");
+  _el["nsa-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 seq     = S.seqLen        != null ? String(S.seqLen) : "loading\u2026";
   const ratio   = S.sparsityRatio != null ? (S.sparsityRatio * 100).toFixed(1) + "%" : "loading\u2026";
   const rec     = S.recall        != null ? (S.recall * 100).toFixed(1) + "%" : "loading\u2026";
-  pd.innerHTML =
+  return (
     "<b>What this means:</b> Normal (\u201cdense\u201d) attention checks every word against every " +
     "other word \u2014 cost grows with the square of the text length. Native Sparse Attention instead " +
     "splits the job three ways: a cheap <b>skim</b> of the whole document (compression), a focused " +
@@ -441,7 +372,7 @@ function _applyPlain() {
     "about <b>" + ratio + "</b> of the work a full dense pass would need on a " + seq + "-token " +
     "sequence, while still covering about <b>" + rec + "</b> of the spots a full dense scan would " +
     "have flagged as important. This is a <b>MODELED</b> demonstration of the sparsity pattern on " +
-    "synthetic data \u2014 not a trained model, not the original DeepSeek-AI kernel.";
+    "synthetic data \u2014 not a trained model, not the original DeepSeek-AI kernel.");
 }
 
 function _tok(s) {
@@ -470,7 +401,7 @@ function _paintOverlay() {
   _set("nsa-recall",   t || pct(S.recall, 1));
   // honesty label verbatim — never upgraded
   _set("nsa-label", t || (S.label || "MODELED"));
-  if (_plain) _applyPlain();
+  if (_show) { _show.setChip("nsa", S.label || "MODELED", { text: "3-branch sparse" }); _show.refreshPlain(); }
 }
 
 // =============================================================================
@@ -478,7 +409,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,9 +422,9 @@ export function unmount() {
       _stage.scene.remove(_group);
     }
   } catch (_) {}
-  _group = _overlay = null;
+  _group = _show = null;
   _floor = null; _spineLine = null; _tokenMesh = []; _summaryMesh = []; _summaryLinks = []; _gateMarker = null;
-  _el = {}; _badge = null; _plain = false; _frameReg = false;
+  _el = {}; _badge = null; _frameReg = false;
   _stage = _THREE = _ctx = null;
   S.label = S.seqLen = S.dim = S.blockSize = S.topk = S.window = S.queryPos = null;
   S.windowPositions = S.selectedBlocks = S.nSummary = S.gateScore = S.gateWeights = null;

static/3d/surfaces/nvfp4.js

@@ -48,6 +48,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    = "nvfp4";
 const TITLE = "NVFP4 4-bit Training Format";
 
@@ -64,9 +66,8 @@ const C_ZERO    = 0x5a6570;  // grey (zero baseline / neutral)
 const C_DIM     = 0x42505d;  // grey (degraded / no-live-data)
 const C_GRID    = 0x1b3a44;  // floor / link colour
 
-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;
@@ -355,125 +356,54 @@ 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%,470px)",
-    font: "12px ui-sans-serif,system-ui,Segoe UI,Roboto,Arial",
-    color: "#eef3f6",
+  _show = createShowcase(ctx, {
+    id: ID, title: TITLE + " (live)", accent: "#5b8dee",
+    badge: _badge,
+    chips: [{ label: "MODELED", text: "FP4 arithmetic", name: "nv" }],
+    legend: ["MODELED", "SAMPLE"],
+    description:
+      'A synthetic tensor with a few injected <b>outliers</b> is quantized to 4-bit float (<b>FP4 E2M1</b>) three ways, ' +
+      'then dequantized: <b>naive</b> (one global scale) vs <b>MXFP4</b> (32-elem blocks, power-of-two scale) vs ' +
+      '<b>NVFP4</b> (16-elem blocks, <b>E4M3</b> FP8 block scale + <b>FP32</b> global \u2014 <b>two-level</b>). Bars show ' +
+      'the MEASURED reconstruction <b>MSE</b> per scheme (shown, NOT hidden). The line plot contrasts <b>deterministic</b> ' +
+      'round-to-nearest (drifts) vs <b>stochastic</b> rounding (near zero) over repeated roundings. Honesty label ' +
+      '<b>MODELED</b> \u2014 arithmetic demonstration only, no GPU kernel executed. 0 runtime CDN.',
+    citations:
+      "NVFP4 \u2014 Agrusa, Rouhani, Micikevicius, Patwary, Shoeybi et al. (NVIDIA) arXiv:2509.25149 \u00b7 MXFP4/OCP arXiv:2310.10537 \u00b7 TetraJet arXiv:2502.20853. MODELED \u00b7 arithmetic-only \u00b7 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 + " (live)";
-  _overlay.appendChild(h);
-
-  const sub = document.createElement("div");
-  sub.style.cssText = "color:#9fb1bf;font-size:11px;line-height:1.55";
-  sub.innerHTML =
-    'A synthetic tensor with a few injected <b>outliers</b> is quantized to 4-bit float (<b>FP4 E2M1</b>) three ways, ' +
-    'then dequantized: <b>naive</b> (one global scale) vs <b>MXFP4</b> (32-elem blocks, power-of-two scale) vs ' +
-    '<b>NVFP4</b> (16-elem blocks, <b>E4M3</b> FP8 block scale + <b>FP32</b> global \u2014 <b>two-level</b>). Bars show ' +
-    'the MEASURED reconstruction <b>MSE</b> per scheme (shown, NOT hidden). The line plot contrasts <b>deterministic</b> ' +
-    'round-to-nearest (drifts) vs <b>stochastic</b> rounding (near zero) over repeated roundings. Honesty label ' +
-    '<b>MODELED</b> \u2014 arithmetic demonstration only, no GPU kernel executed. 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 = "nvfp4 4-bit training format";
-  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("nv-size",    "tensor (size \u00d7 size)"));
-  grid.appendChild(kpiRow("nv-outl",    "injected outliers"));
-  grid.appendChild(kpiRow("nv-amax",    "tensor max |value|"));
-  grid.appendChild(kpiRow("nv-naive",   "MSE \u2014 naive-FP4 (global scale)"));
-  grid.appendChild(kpiRow("nv-mx",      "MSE \u2014 MXFP4 (32-blk pow2)"));
-  grid.appendChild(kpiRow("nv-nv",      "MSE \u2014 NVFP4 (16-blk E4M3+FP32)"));
-  grid.appendChild(kpiRow("nv-best",    "best scheme (lowest MSE)"));
-  grid.appendChild(kpiRow("nv-rn",      "rounding demo \u2014 N roundings"));
-  grid.appendChild(kpiRow("nv-det",     "cumulative bias \u2014 deterministic"));
-  grid.appendChild(kpiRow("nv-stoch",   "cumulative bias \u2014 stochastic"));
-  grid.appendChild(kpiRow("nv-label",   "honesty label"));
-  card.appendChild(grid);
-
-  // scaling-pipeline legend (two-level)
-  const pipe = document.createElement("div");
-  pipe.style.cssText = "font-size:10px;color:#9fb1bf;line-height:1.5;border-top:1px solid #1d2a36;padding-top:6px";
-  pipe.innerHTML =
+  _el["nv-size"]  = _show.addField("tensor (size \u00d7 size)");
+  _el["nv-outl"]  = _show.addField("injected outliers");
+  _el["nv-amax"]  = _show.addField("tensor max |value|");
+  _el["nv-naive"] = _show.addField("MSE \u2014 naive-FP4 (global scale)");
+  _el["nv-mx"]    = _show.addField("MSE \u2014 MXFP4 (32-blk pow2)");
+  _el["nv-nv"]    = _show.addField("MSE \u2014 NVFP4 (16-blk E4M3+FP32)");
+  _el["nv-best"]  = _show.addField("best scheme (lowest MSE)");
+  _el["nv-rn"]    = _show.addField("rounding demo \u2014 N roundings");
+  _el["nv-det"]   = _show.addField("cumulative bias \u2014 deterministic");
+  _el["nv-stoch"] = _show.addField("cumulative bias \u2014 stochastic");
+  _el["nv-label"] = _show.addField("honesty label");
+
+  // scaling-pipeline legend (two-level) \u2014 appended into the collapsible body
+  _show.appendBody(
+    "<div style='font-size:10px;color:#9fb1bf;line-height:1.5'>" +
     "<b style='color:#c9d6df'>two-level scaling pipeline:</b><br>" +
     "tensor <span style='color:#8a6bff'>\u25a0</span> \u2192 FP32 global scale <span style='color:#8a6bff'>\u25c8</span> " +
-    "\u2192 E4M3 block scale <span style='color:#5b8dee'>\u25c8</span> \u2192 FP4 value <span style='color:#3af4c8'>\u2b21</span>";
-  card.appendChild(pipe);
-
-  const fn = document.createElement("div");
-  fn.style.cssText = "font-size:9.5px;color:#6b7a86;line-height:1.5";
-  fn.textContent = "NVFP4 \u2014 Agrusa, Rouhani, Micikevicius, Patwary, Shoeybi et al. (NVIDIA) arXiv:2509.25149 \u00b7 MXFP4/OCP arXiv:2310.10537 \u00b7 TetraJet arXiv:2502.20853. MODELED \u00b7 arithmetic-only \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 = "nv-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);
+    "\u2192 E4M3 block scale <span style='color:#5b8dee'>\u25c8</span> \u2192 FP4 value <span style='color:#3af4c8'>\u2b21</span>" +
+    "</div>");
 
-  (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 nvMse    = _schemeByName("NVFP4");
   const naiveMse = _schemeByName("naive-FP4");
   const nvTxt    = (nvMse && typeof nvMse.mse === "number")       ? nvMse.mse.toExponential(2)    : "loading\u2026";
   const naiveTxt = (naiveMse && typeof naiveMse.mse === "number") ? naiveMse.mse.toExponential(2) : "loading\u2026";
   const detTxt   = S.detFinal   != null ? S.detFinal.toFixed(2)   : "loading\u2026";
   const stochTxt = S.stochFinal != null ? S.stochFinal.toFixed(2) : "loading\u2026";
-  pd.innerHTML =
+  return (
     "<b>What this means:</b> Training big models in only 4 bits per number saves memory and speeds up the math, " +
     "but 4 bits is very coarse \u2014 so how you pick the <i>scale</i> matters enormously. The <b>naive</b> approach uses " +
     "one scale for the whole tensor; a single large \u201coutlier\u201d value then crushes precision for everything else " +
@@ -484,7 +414,7 @@ function _applyPlain() {
     "<b>stochastic</b> rounding \u2014 flipping a weighted coin each time \u2014 cancels out (stays near <b>" + stochTxt + "</b>). " +
     "This view is <b>MODELED</b>: a deterministic arithmetic demonstration on a tiny synthetic tensor, with the error " +
     "MEASURED and shown. <b>No GPU kernel runs here</b>, and it does not reproduce NVIDIA's 12-billion-parameter, " +
-    "10-trillion-token training run or its speed claims \u2014 those are NVIDIA's, not independently verified.";
+    "10-trillion-token training run or its speed claims \u2014 those are NVIDIA's, not independently verified.");
 }
 
 function _tok(s) {
@@ -515,7 +445,7 @@ function _paintOverlay() {
   _set("nv-stoch", t || (typeof S.stochFinal === "number" ? S.stochFinal.toFixed(3) : "\u2014"));
   // honesty label verbatim — never upgraded
   _set("nv-label", t || (S.label || "MODELED"));
-  if (_plain) _applyPlain();
+  if (_show) { _show.setChip("nv", S.label || "MODELED", { text: "FP4 arithmetic" }); _show.refreshPlain(); }
 }
 
 // =============================================================================
@@ -523,7 +453,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) => {
@@ -536,9 +466,9 @@ export function unmount() {
       _stage.scene.remove(_group);
     }
   } catch (_) {}
-  _group = _overlay = null;
+  _group = _show = null;
   _floor = null; _bars = []; _detLine = null; _stochLine = null; _biasZero = null; _pipe = [];
-  _el = {}; _badge = null; _plain = false; _frameReg = false;
+  _el = {}; _badge = null; _frameReg = false;
   _stage = _THREE = _ctx = null;
   S.label = S.size = S.outliers = S.tensorAmax = S.bestScheme = null;
   S.fp4Levels = S.schemes = null;

static/3d/surfaces/opera.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    = "opera";
 const TITLE = "OPERA Perplexity-Reward Alignment";
 
@@ -63,9 +65,8 @@ const CURVE_MAXN = 6;      // max curves rendered (matches head trim)
 const CURVE_MAXP = 64;     // max points per curve
 const BAR_W      = 0.8;    // reward-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;
@@ -357,114 +358,44 @@ 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%,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 =
-    'OPERA replaces an unreliable <b>LLM-as-a-judge</b> reward (prone to stylistic bias and positional ' +
-    'inconsistency) with an <b>intrinsic reward from perplexity dynamics</b>: the uncertainty reduction ' +
-    '(perplexity <b>drop</b>) at <b>critical reflective states</b> of a reasoning trace. Panels: per-trace ' +
-    'perplexity curves (drops at reflective steps = where reward accrues), reward\u2013correlation bars ' +
-    '(OPERA vs noisy judge against the ground-truth logical-consistency label), and reward-stability bars ' +
-    '(variance; the judge is the taller/unstable one). Honesty label <b>MODELED</b> (deterministic mechanism ' +
-    'reproduction on toy traces; trains nothing). 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 = "opera \u00b7 intrinsic perplexity reward";
-  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("op-dims",     "traces \u00d7 steps"));
-  grid.appendChild(kpiRow("op-refl",     "reflective steps"));
-  grid.appendChild(kpiRow("op-oreward",  "OPERA reward \u2014 mean (MEASURED)"));
-  grid.appendChild(kpiRow("op-jreward",  "judge reward \u2014 mean (MEASURED)"));
-  grid.appendChild(kpiRow("op-corropera","corr(OPERA, consistency)"));
-  grid.appendChild(kpiRow("op-corrjudge","corr(judge, consistency)"));
-  grid.appendChild(kpiRow("op-ovar",     "OPERA reward variance"));
-  grid.appendChild(kpiRow("op-jvar",     "judge reward variance (higher=unstable)"));
-  grid.appendChild(kpiRow("op-cons",     "consistency rate (ground truth)"));
-  grid.appendChild(kpiRow("op-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 = "OPERA \u2014 Wenxuan Jiang et al., \u201cAligning Open-Ended Reasoning via Objective Perplexity-based Reinforcement Learning\u201d arXiv:2606.25757 (arxiv.org/abs/2606.25757). MODELED \u00b7 intrinsic perplexity-reward mechanism demo on toy traces, not a trained model or real RL rollout.";
-  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: "#3af4c8",
+    badge: _badge,
+    chips: [{ label: "MODELED", text: "intrinsic perplexity reward", name: "op" }],
+    legend: ["MODELED", "SAMPLE"],
+    description:
+      'OPERA replaces an unreliable <b>LLM-as-a-judge</b> reward (prone to stylistic bias and positional ' +
+      'inconsistency) with an <b>intrinsic reward from perplexity dynamics</b>: the uncertainty reduction ' +
+      '(perplexity <b>drop</b>) at <b>critical reflective states</b> of a reasoning trace. Panels: per-trace ' +
+      'perplexity curves (drops at reflective steps = where reward accrues), reward\u2013correlation bars ' +
+      '(OPERA vs noisy judge against the ground-truth logical-consistency label), and reward-stability bars ' +
+      '(variance; the judge is the taller/unstable one). Honesty label <b>MODELED</b> (deterministic mechanism ' +
+      'reproduction on toy traces; trains nothing). 0 runtime CDN.',
+    citations:
+      "OPERA \u2014 Wenxuan Jiang et al., \u201cAligning Open-Ended Reasoning via Objective Perplexity-based Reinforcement Learning\u201d arXiv:2606.25757 (arxiv.org/abs/2606.25757). MODELED \u00b7 intrinsic perplexity-reward mechanism demo on toy traces, not a trained model or real RL rollout.",
+    plain: { html: _plainHtml },
   });
-  _overlay.appendChild(pl);
 
-  const pd = document.createElement("div");
-  pd.id = "op-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["op-dims"]      = _show.addField("traces \u00d7 steps");
+  _el["op-refl"]      = _show.addField("reflective steps");
+  _el["op-oreward"]   = _show.addField("OPERA reward \u2014 mean (MEASURED)");
+  _el["op-jreward"]   = _show.addField("judge reward \u2014 mean (MEASURED)");
+  _el["op-corropera"] = _show.addField("corr(OPERA, consistency)");
+  _el["op-corrjudge"] = _show.addField("corr(judge, consistency)");
+  _el["op-ovar"]      = _show.addField("OPERA reward variance");
+  _el["op-jvar"]      = _show.addField("judge reward variance (higher=unstable)");
+  _el["op-cons"]      = _show.addField("consistency rate (ground truth)");
+  _el["op-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 co = S.corrOpera != null ? S.corrOpera.toFixed(2) : "loading\u2026";
   const cj = S.corrJudge != null ? S.corrJudge.toFixed(2) : "loading\u2026";
   const jv = S.judgeVar  != null ? S.judgeVar.toFixed(2)  : "loading\u2026";
   const ov = S.operaVar  != null ? S.operaVar.toFixed(2)  : "loading\u2026";
-  pd.innerHTML =
+  return (
     "<b>What this means:</b> To train a model on open-ended tasks (like creative writing) you need a " +
     "<b>reward</b> \u2014 a score for how good an answer is. A common trick is to ask another AI to be the " +
     "\u201cjudge,\u201d but judges are swayed by <b>style and ordering</b>, so their scores are noisy and " +
@@ -477,7 +408,7 @@ function _applyPlain() {
     "deterministic reproduction of that reward MECHANISM on tiny synthetic traces \u2014 it <b>trains no " +
     "model</b> and runs no reinforcement learning. The paper\u2019s headline that OPERA on <b>Qwen3-8B</b> " +
     "reaches SOTA and rivals Gemini2.5 / MiniMax-M2.5 is a <b>claim about real training runs</b> " +
-    "the estate does not independently verify.";
+    "the estate does not independently verify.");
 }
 
 function _tok(s) {
@@ -504,7 +435,7 @@ function _paintOverlay() {
   _set("op-cons",      t || (S.consRate != null ? (100.0 * S.consRate).toFixed(1) + "%" : "\u2014"));
   // honesty label verbatim — never upgraded
   _set("op-label",     t || (S.label || "MODELED"));
-  if (_plain) _applyPlain();
+  if (_show) { _show.setChip("op", S.label || "MODELED", { text: "intrinsic perplexity reward" }); _show.refreshPlain(); }
 }
 
 // =============================================================================
@@ -512,7 +443,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) => {
@@ -525,13 +456,13 @@ export function unmount() {
       _stage.scene.remove(_group);
     }
   } catch (_) {}
-  _group = _overlay = null;
+  _group = _show = null;
   _floor = null;
   _curveGroup = null; _curves = [];
   _reflGroup = null; _reflMarks = [];
   _barGroup = null;
   _barCorrOpera = _barCorrJudge = _barVarOpera = _barVarJudge = null;
-  _el = {}; _badge = null; _plain = false; _frameReg = false;
+  _el = {}; _badge = null; _frameReg = false;
   _stage = _THREE = _ctx = null;
   S.label = S.traces = S.steps = S.reflective = null;
   S.operaReward = S.operaVar = S.judgeReward = S.judgeVar = null;

static/3d/surfaces/pfield.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    = "pfield";
 const TITLE = "PFIELD · Pressure-Field Stigmergic Coordination (live)";
 
@@ -69,9 +71,8 @@ const ABL_LEN    = 6.0;    // world-length of the ablation bar pair along X
 const AGENT_ORBIT = 5.4;   // radius agents orbit the artifact at (visual only)
 const MAX_AGENTS = 32;     // cap on agent motes 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;
@@ -373,112 +374,42 @@ 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%,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 =
-    'Instead of a planner messaging executors, N agents coordinate <b>implicitly</b> through a ' +
-    'shared constraint-grid artifact: each agent reads a local <b>pressure</b> (constraint-violation ' +
-    'count), takes the pressure-reducing edit, and a <b>temporal-decay</b> schedule keeps stale ' +
-    'pressure from locking the system in \u2014 <b>zero inter-agent messages</b> (stigmergy). Shown ' +
-    'against sequential + hierarchical baselines. Honesty label <b>MODELED</b> (deterministic ' +
-    'simulation; NOT real agents). 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 = "pressure-field coordination";
-  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("pf-agents",   "n_agents \u00d7 grid"));
-  grid.appendChild(kpiRow("pf-decay",    "temporal decay (per step)"));
-  grid.appendChild(kpiRow("pf-steps",    "pfield steps-to-converge \u2014 MODELED"));
-  grid.appendChild(kpiRow("pf-msgs",     "pfield inter-agent messages"));
-  grid.appendChild(kpiRow("pf-seq",      "sequential steps-to-converge \u2014 MODELED"));
-  grid.appendChild(kpiRow("pf-hier",     "hierarchical steps / messages \u2014 MODELED"));
-  grid.appendChild(kpiRow("pf-match",    "pfield matches hierarchical?"));
-  grid.appendChild(kpiRow("pf-runaway",  "no-decay pressure runaway \u2014 MODELED"));
-  grid.appendChild(kpiRow("pf-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 = "Rodriguez 2026 \u00b7 Pressure Fields + Temporal Decay \u00b7 arXiv:2601.08129. 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: "#3af4c8",
+    badge: _badge,
+    chips: [{ label: "MODELED", text: "pressure-field coordination", name: "pf" }],
+    legend: ["MODELED", "SAMPLE"],
+    description:
+      'Instead of a planner messaging executors, N agents coordinate <b>implicitly</b> through a ' +
+      'shared constraint-grid artifact: each agent reads a local <b>pressure</b> (constraint-violation ' +
+      'count), takes the pressure-reducing edit, and a <b>temporal-decay</b> schedule keeps stale ' +
+      'pressure from locking the system in \u2014 <b>zero inter-agent messages</b> (stigmergy). Shown ' +
+      'against sequential + hierarchical baselines. Honesty label <b>MODELED</b> (deterministic ' +
+      'simulation; NOT real agents). 0 runtime CDN.',
+    citations:
+      "Rodriguez 2026 \u00b7 Pressure Fields + Temporal Decay \u00b7 arXiv:2601.08129. MODELED \u00b7 not claimed-as.",
+    plain: { html: _plainHtml },
   });
-  _overlay.appendChild(pl);
 
-  const pd = document.createElement("div");
-  pd.id = "pf-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["pf-agents"]  = _show.addField("n_agents \u00d7 grid");
+  _el["pf-decay"]   = _show.addField("temporal decay (per step)");
+  _el["pf-steps"]   = _show.addField("pfield steps-to-converge \u2014 MODELED");
+  _el["pf-msgs"]    = _show.addField("pfield inter-agent messages");
+  _el["pf-seq"]     = _show.addField("sequential steps-to-converge \u2014 MODELED");
+  _el["pf-hier"]    = _show.addField("hierarchical steps / messages \u2014 MODELED");
+  _el["pf-match"]   = _show.addField("pfield matches hierarchical?");
+  _el["pf-runaway"] = _show.addField("no-decay pressure runaway \u2014 MODELED");
+  _el["pf-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 na  = S.nAgents  != null ? String(S.nAgents) : "loading\u2026";
   const pfs = S.stepsConv != null ? String(S.stepsConv) : "loading\u2026";
   const hms = S.hierMsgs != null ? String(S.hierMsgs) : "loading\u2026";
   const rw  = S.runawayX != null ? S.runawayX.toFixed(0) + "x" : "loading\u2026";
-  pd.innerHTML =
+  return (
     "<b>What this means:</b> Getting many AI agents to work together usually needs a <i>boss</i> agent " +
     "that hands out tasks and collects results \u2014 lots of back-and-forth messages that pile up as you add " +
     "workers. This approach skips the boss entirely. All <b>" + na + " agents</b> scribble on one shared " +
@@ -487,7 +418,7 @@ function _applyPlain() {
     "another. Here it finishes in about <b>" + pfs + " rounds with zero messages</b>, matching the boss-based " +
     "method that needed roughly <b>" + hms + " messages</b>. One catch: the pressure has to <b>fade over time</b>, " +
     "or it snowballs \u2014 turning decay off makes the pressure blow up about <b>" + rw + "</b>. This view is a " +
-    "<b>MODELED</b> deterministic simulation of that coordination math, not a run of real AI agents.";
+    "<b>MODELED</b> deterministic simulation of that coordination math, not a run of real AI agents.");
 }
 
 function _tok(s) {
@@ -513,7 +444,7 @@ function _paintOverlay() {
   _set("pf-runaway", t || (S.runawayX != null ? (S.runawayX.toFixed(1) + "\u00d7 without decay") : "\u2014"));
   // honesty label verbatim — never upgraded
   _set("pf-label",   t || (S.label || "MODELED"));
-  if (_plain) _applyPlain();
+  if (_show) { _show.setChip("pf", S.label || "MODELED", { text: "pressure-field coordination" }); _show.refreshPlain(); }
 }
 
 // =============================================================================
@@ -536,7 +467,7 @@ function _disposeCells() {
 
 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) => {
@@ -549,10 +480,10 @@ export function unmount() {
       _stage.scene.remove(_group);
     }
   } catch (_) {}
-  _group = _overlay = null;
+  _group = _show = null;
   _floor = null; _cells = []; _cellSide = 0; _agents = [];
   _ablDecay = null; _ablNoDecay = null;
-  _el = {}; _badge = null; _plain = false; _frameReg = false;
+  _el = {}; _badge = null; _frameReg = false;
   _stage = _THREE = _ctx = null;
   S.label = S.nAgents = S.grid = S.decay = S.steps = null;
   S.solved = S.stepsConv = S.finalViol = S.peakPress = S.messages = null;

static/3d/surfaces/pinn.js

@@ -33,6 +33,8 @@
 // The shell shares ONE Stage across surfaces; we add objects to ctx.stage.scene, register
 // per-frame work via ctx.stage.onFrame, and on unmount stop every poll + remove what we added.
 
+import { createShowcase } from "./_showcase.js";
+
 const ID = "pinn";
 const TITLE = "PINN Thermal/Field";
 
@@ -49,7 +51,7 @@ const VOX = 48;
 let _ctx = null, _stage = null, _THREE = null;
 let _group = null;             // root group holding all scene objects we add
 let _handles = [];             // poll handles to stop on unmount
-let _overlay = null;           // DOM HUD
+let _show = null;              // shared showcase controller (owns the DOM chrome)
 let _frameReg = null;          // our onFrame closure (guards on null after unmount)
 let _disposables = [];         // geometries / materials / textures to dispose
 
@@ -544,31 +546,36 @@ function _human(x) {
 // interactive controls (iso threshold / splats / arrows / residual displacement).
 // ---------------------------------------------------------------------------
 function _buildHUD() {
+  // Compact chrome (title bar + honesty pills + legend + description/citations) is
+  // provided by the shared showcase; the cert/bounds/residual/control panels fold into
+  // its collapsible body. Create the live badge FIRST so the showcase can host it.
+  const badge = _ctx.live.createBadge();
+
+  _show = createShowcase(_ctx, {
+    id: ID, title: "PINN Thermal/Field  ·  ray-march volume + MEASURED+SIGNED cert",
+    accent: "#5b8dee",
+    badge,
+    chips: [{ label: F.certLabel || "SAMPLE", text: "field", name: "cert" }],
+    legend: true,
+    description:
+      "Modeled on Kitware VTK.js/VolView + three.js TSL compute. " +
+      "Field render is MODELED (analytic PINN surrogate seeded by MEASURED telemetry). " +
+      "Certificate is MEASURED + SIGNED.",
+    citations:
+      "Doctrine v11 · Λ = Conjecture 1 (advisory) · field MODELED, cert MEASURED+SIGNED · " +
+      "no fabricated field numbers · WebGPU→WebGL2 fallback · 0 runtime CDN",
+  });
+
+  // KPI/panel container — plain + static so it nests cleanly inside the showcase body
+  // (no absolute chrome / card of its own; the showcase owns the panel styling).
   const wrap = document.createElement("div");
   wrap.className = "szl3d-pinn-hud";
   Object.assign(wrap.style, {
-    position: "absolute", left: "14px", top: "14px", zIndex: "6",
+    position: "static",
     display: "flex", flexDirection: "column", gap: "8px",
-    maxWidth: "min(94%, 440px)", maxHeight: "calc(100% - 28px)", overflow: "auto",
     font: "12px ui-monospace,SFMono-Regular,Menlo,monospace", color: "#cfe0ea",
   });
 
-  const title = document.createElement("div");
-  title.style.cssText = "font:600 14px ui-sans-serif,system-ui;color:#eef3f6;letter-spacing:.4px";
-  title.textContent = "◇ PINN Thermal/Field  ·  ray-march volume + MEASURED+SIGNED cert";
-  wrap.appendChild(title);
-
-  const sub = document.createElement("div");
-  sub.style.cssText = "color:#9fb1bf;font-size:11px;line-height:1.45";
-  sub.textContent = "Modeled on Kitware VTK.js/VolView + three.js TSL compute. " +
-    "Field render is MODELED (analytic PINN surrogate seeded by MEASURED telemetry). " +
-    "Certificate is MEASURED + SIGNED.";
-  wrap.appendChild(sub);
-
-  // live badge row (filled by poll)
-  const badge = _ctx.live.createBadge();
-  wrap.appendChild(badge.el);
-
   // backend indicator
   const back = document.createElement("div");
   back.id = "pinn-backend";
@@ -618,19 +625,7 @@ function _buildHUD() {
   }));
   wrap.appendChild(ctrls);
 
-  // ---- honesty legend ----
-  const legend = _ctx.label.legend();
-  legend.style.opacity = "0.85";
-  wrap.appendChild(legend);
-
-  const foot = document.createElement("div");
-  foot.style.cssText = "color:#7d8a96;font-size:10px;line-height:1.4";
-  foot.textContent = "Doctrine v11 · Λ = Conjecture 1 (advisory) · field MODELED, cert MEASURED+SIGNED · " +
-    "no fabricated field numbers · WebGPU→WebGL2 fallback · 0 runtime CDN";
-  wrap.appendChild(foot);
-
-  (_ctx.container || document.body).appendChild(wrap);
-  _overlay = wrap;
+  _show.body.appendChild(wrap);
   return { wrap, badge, cert, bounds, resid, back };
 }
 
@@ -733,6 +728,8 @@ function _onCert(json, meta) {
   _updateBoundsLadder(_ladder);
   _renderCertHUD();
   _renderBoundsHUD();
+  // route the FIELD honesty label (verbatim: MODELED / SAMPLE) through the showcase pill
+  if (_show) _show.setChip("cert", F.certLabel || "SAMPLE", { text: "field" });
 }
 
 function _rebuildFieldGeometry(hot) {
@@ -964,9 +961,9 @@ function unmount() {
   // stop polls
   _handles.forEach((h) => { try { h.stop(); } catch (_) {} });
   _handles = [];
-  // remove our DOM
-  try { if (_overlay && _overlay.parentNode) _overlay.parentNode.removeChild(_overlay); } catch (_) {}
-  _overlay = null; _hud = null;
+  // tear down the shared showcase (it owns all of our DOM chrome now)
+  try { if (_show) _show.destroy(); } catch (_) {}
+  _show = null; _hud = null;
   // neutralize our frame callback (the shell keeps its callback list; we guard on _group)
   _frameReg = null;
   // remove our scene group + dispose resources

static/3d/surfaces/pnt.js

@@ -29,6 +29,8 @@
 // ctx = { stage, container, live, label, THREE, szl3d }. Frame callbacks accumulate on the
 // shared stage and are NOT removed on unmount, so every onFrame closure guards on _alive.
 
+import { createShowcase } from "./_showcase.js";
+
 const ID = "pnt";
 const TITLE = "PNT · Quantum Nav";
 const ENDPOINT = "/api/a11oy/v1/pnt/sensor";
@@ -49,7 +51,7 @@ let _alive = false;
 const _handles = [];        // every live-poll handle (stopped on unmount)
 const _objs = [];           // every scene object we add (removed on unmount)
 const _disposables = [];    // geometries/materials/textures to dispose
-let _overlay = null, _hud = null;
+let _hud = null, _show = null;
 const _spin = [];           // { obj, sx, sy } per-frame rotators
 const _frameFns = [];       // per-frame animators invoked while _alive
 
@@ -83,44 +85,31 @@ function _lineMat(hex, opacity) {
 }
 
 // ----------------------------------------------------------------------------
-// HUD (DOM overlay) — every readout chip carries its honesty label.
+// HUD (folded into the shared showcase body) — every readout chip carries its
+// honesty label. The compact chrome (title bar + honesty pills + legend) is
+// provided by the shared showcase; the KPI rows nest statically inside its body.
 // ----------------------------------------------------------------------------
 function _buildOverlay(ctx) {
-  _overlay = document.createElement("div");
-  _overlay.className = "szl3d-surface-overlay szl3d-pnt-overlay";
-  Object.assign(_overlay.style, {
-    position: "absolute", left: "14px", top: "14px", zIndex: "5",
-    display: "flex", flexDirection: "column", gap: "8px",
-    maxWidth: "min(94%,440px)", pointerEvents: "none",
-  });
-
-  const h = document.createElement("div");
-  h.style.cssText = "font:600 13px ui-sans-serif,system-ui;color:#eef3f6;letter-spacing:.4px";
-  h.textContent = TITLE + "  ·  modeled on Q-CTRL Ironstone Opal + Advanced Navigation";
-  _overlay.appendChild(h);
-
-  const honesty = document.createElement("div");
-  honesty.style.cssText = "font:10.5px ui-monospace,Menlo,monospace;color:#9fb1bf;line-height:1.45;" +
-    "background:#0a1117;border:1px solid #1d2a36;border-radius:7px;padding:6px 9px;max-width:430px";
-  honesty.innerHTML =
-    "MODELED closed-form physics — <b>NOT flown hardware</b>, not a real flight. " +
-    "Sensor cert is VERIFIED (MODELED) · UNSIGNED (STRUCTURAL-ONLY). Every value below " +
-    "traces to a live /api/a11oy/v1/pnt/* endpoint; nothing is hardcoded.";
-  _overlay.appendChild(honesty);
-
   const badge = ctx.live.createBadge();
-  _overlay.appendChild(badge.el);
 
-  _hud = document.createElement("div");
-  _hud.style.cssText = "display:flex;flex-direction:column;gap:5px;font:11px ui-monospace,Menlo,monospace;color:#cfe0ea";
-  _overlay.appendChild(_hud);
+  _show = createShowcase(ctx, {
+    id: ID, title: TITLE + "  ·  modeled on Q-CTRL Ironstone Opal + Advanced Navigation",
+    accent: "#5b8dee",
+    badge,
+    chips: [{ label: _sensorLabel || "MODELED", text: "quantum sensor", name: "sensor" }],
+    legend: true,
+    description:
+      "MODELED closed-form physics — <b>NOT flown hardware</b>, not a real flight. " +
+      "Sensor cert is VERIFIED (MODELED) · UNSIGNED (STRUCTURAL-ONLY). Every value below " +
+      "traces to a live /api/a11oy/v1/pnt/* endpoint; nothing is hardcoded.",
+  });
 
-  const legend = ctx.label.legend();
-  legend.style.opacity = "0.85";
-  legend.style.marginTop = "2px";
-  _overlay.appendChild(legend);
+  // KPI rows live in a plain static container nested inside the collapsible body
+  // (no absolute chrome of its own — the showcase owns the card/panel styling).
+  _hud = document.createElement("div");
+  _hud.style.cssText = "position:static;display:flex;flex-direction:column;gap:5px;font:11px ui-monospace,Menlo,monospace;color:#cfe0ea";
+  _show.body.appendChild(_hud);
 
-  (ctx.container || document.body).appendChild(_overlay);
   return badge;
 }
 
@@ -520,6 +509,7 @@ function _onSensor(json, meta) {
   _sensor = json;
   const lab = meta.label || (json && json.label) || "MODELED";
   _sensorLabel = lab;
+  if (_show) _show.setChip("sensor", lab, { text: "quantum sensor" });
   const cf = (json && json.closed_form_stdlib) || {};
   _setRow(_rows.keff, _fmtSci(cf.k_eff_per_m), lab);
   _setRow(_rows.phase, _fmtSci(cf.shot_noise_phase_rad), lab);
@@ -622,7 +612,8 @@ function unmount() {
   _alive = false;
   for (const h of _handles) { try { h.stop(); } catch (_) {} }
   _handles.length = 0;
-  try { if (_overlay && _overlay.parentNode) _overlay.parentNode.removeChild(_overlay); } catch (_) {}
+  try { if (_show) _show.destroy(); } catch (_) {}
+  _show = null;
   if (_stage) {
     for (const o of _objs) { try { _stage.scene.remove(o); } catch (_) {} }
   }
@@ -634,7 +625,7 @@ function unmount() {
   _ellipsoidC = _ellipsoidQ = _crlbMesh = _crlbBeacon = _sqlPlane = null;
   _verdictOrb = _drift = _keffRing = _phaseDial = _asdCol = _foMHalo = null;
   _sensor = _coast = _resil = _limits = null; _sensorLabel = null;
-  _overlay = _hud = _stage = _THREE = _label = null;
+  _hud = _stage = _THREE = _label = null;
 }
 
 // STRUCTURAL-ONLY is carried in the ladder billboards: the pillar names are present as

szl_factory.py

@@ -192,7 +192,11 @@ def _brain_state() -> Dict[str, Any]:
                                  "(retrieve->quarantine->tool_call->policy_check->kernel_check->emit).")
     # The PLAN->ACT->VERIFY agent FSM, if present (honest about its guards).
     try:
-        import a11oy_agent_loop as _al  # type: ignore  # noqa: F401
+        # Prefer the installable shared substrate; fall back to the local copy.
+        try:
+            from szl_substrate import a11oy_agent_loop as _al  # type: ignore  # noqa: F401
+        except Exception:
+            import a11oy_agent_loop as _al  # type: ignore  # noqa: F401
         out["agent_loop"] = {
             "module": "a11oy_agent_loop",
             "fsm": "INTAKE->PLAN->RETRIEVE->ACT->OBSERVE->VERIFY->(REFLECT->ACT)->FINALIZE|HALT",

szl_mbse.py

@@ -60,7 +60,12 @@ _MODELED_LABEL = "MODELED/SIMULATED \u2014 not physical hardware"
 # ---------------------------------------------------------------------------
 def _cosim() -> Optional[Any]:
     try:
-        import szl_mbse_cosim as _c  # type: ignore
+        # Prefer the installable shared substrate; fall back to the local
+        # vendored copy if the package is absent (guarded — never crashes).
+        try:
+            from szl_substrate import szl_mbse_cosim as _c  # type: ignore
+        except Exception:
+            import szl_mbse_cosim as _c  # type: ignore
         return _c
     except Exception:
         return None

szl_nemo_agents.py

@@ -277,7 +277,10 @@ def _waqay_status() -> dict:
     trust = 0.99
     n_receipts = None
     try:
-        import szl_waqay as w
+        try:
+            from szl_substrate import szl_waqay as w  # prefer shared substrate
+        except Exception:
+            import szl_waqay as w                      # fall back to local copy
         doc = dict(getattr(w, "DOCTRINE", {}))
         trust = getattr(w, "TRUST_CEILING", 0.99)
         n_receipts = len(getattr(w, "_RECEIPTS", []))
@@ -319,7 +322,10 @@ def _yupay_status() -> dict:
     trust = 0.97
     n_receipts = None
     try:
-        import szl_yupay as y
+        try:
+            from szl_substrate import szl_yupay as y  # prefer shared substrate
+        except Exception:
+            import szl_yupay as y                      # fall back to local copy
         doc = dict(getattr(y, "DOCTRINE", {}))
         at = getattr(y, "AUDIT_TASK", {})
         task = {"id": at.get("id"), "issues_known": len(at.get("known_issues", []))}
@@ -418,12 +424,18 @@ def register(app, ns: str = "a11oy", sign_fn=None) -> dict:
     except Exception as e:  # noqa: BLE001
         result["errors"]["szl_qhawaq_import"] = repr(e)
     try:
-        import szl_waqay as _w
+        try:
+            from szl_substrate import szl_waqay as _w  # prefer shared substrate
+        except Exception:
+            import szl_waqay as _w                      # fall back to local copy
         _wire("szl_waqay", lambda: _w.register(app, ns=ns))
     except Exception as e:  # noqa: BLE001
         result["errors"]["szl_waqay_import"] = repr(e)
     try:
-        import szl_yupay as _y
+        try:
+            from szl_substrate import szl_yupay as _y  # prefer shared substrate
+        except Exception:
+            import szl_yupay as _y                      # fall back to local copy
         _wire("szl_yupay", lambda: _y.register(app, ns=ns))
     except Exception as e:  # noqa: BLE001
         result["errors"]["szl_yupay_import"] = repr(e)