Spaces:

Divinci-AI
/

vindex-viewer

Running

App Files Files Community

mikeumus-divincian commited on Apr 22

Commit

c0a5e0d

verified ·

1 Parent(s): 798eed7

2026-04-22T02:58:20Z — viewer + assets

Browse files

Files changed (8) hide show

.gitattributes +1 -0
README.md +30 -8
deploy.sh +36 -0
index.html +1419 -0
search-indexes/google-gemma-4-e2b-it.bge.f16.bin +3 -0
search-indexes/google-gemma-4-e2b-it.json +0 -0
search-indexes/google-gemma-4-e2b-it.meta.json +7 -0
vindex-hero-bg.gif +3 -0

.gitattributes CHANGED Viewed

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text

 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+vindex-hero-bg.gif filter=lfs diff=lfs merge=lfs -text

README.md CHANGED Viewed

@@ -1,12 +1,34 @@
 ---
-title: Vindex Viewer
-emoji: 🐨
-colorFrom: yellow
 colorTo: blue
-sdk: gradio
-sdk_version: 6.13.0
-app_file: app.py
-pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: LarQL Vindex Viewer
+emoji: 🔬
+colorFrom: purple
 colorTo: blue
+sdk: static
+pinned: true
+license: cc-by-nc-4.0
+short_description: Interactive viewer for LarQL transformer vindexes
 ---
+# LarQL Vindex Viewer
+Interactive visualization of the SVD-decomposed feature structure of nine open-weight transformers, built from the [Divinci-AI vindex collection](https://huggingface.co/Divinci-AI).
+**Two views, both live:**
+- **3D cylinder** (default) — each model is a column of layer rings; feature points spiral around each ring colored by circuit stage (broadcast → domain → entity → prediction).
+- **2D circuit** (`🔌 2D Circuit` button or `?view=flat`) — layers as horizontal rows with inter-layer edges between top features, network-style.
+**Compare mode** (`⇌ Compare`) renders any two models side-by-side. The default pair (Qwen3-8B vs Bonsai b1.58 1-bit) is the headline visual: organized rings vs scattered dissolution cloud, the same data that drives Paper 1's 1-bit dissolution claim (var@64 ≈ 0.85 for fp16 vs ≈ 0.10 for 1-bit).
+**Entity search** (`🔍` toolbar input or `?q=paris`) — type a token, see which features it activates across the model's depth. The Paris→capital match on Gemma 4 E2B is the LarQL Gate-3 result that Post 2 in our blog series unpacks.
+**Demo** (`▶ Demo`) — 12-second scripted tour: build → orbit → reveal compare mode → tagline.
+URL params: `?model=`, `?view=flat`, `?autoplay`, `?q=`. Combine freely.
+---
+## Background
+A **vindex** is a transformer's weights decompiled into a queryable feature database. The viewer renders the top-64 SVD feature directions per layer — the directions that absorb ~85% of the down-projection matrix's variance in fp16 models and ~10% (near-Marchenko-Pastur random) in 1-bit models.
+Full details, papers, and the LarQL toolchain: **[huggingface.co/Divinci-AI](https://huggingface.co/Divinci-AI)** · [github.com/Divinci-AI](https://github.com/Divinci-AI)

deploy.sh ADDED Viewed

	@@ -0,0 +1,36 @@

+#!/usr/bin/env bash
+# Deploy the LarQL Vindex Viewer to HuggingFace Spaces (Divinci-AI/vindex-viewer)
+#
+# First-time setup:
+#   pip install -U huggingface_hub
+#   hf auth login    # paste your write token from https://huggingface.co/settings/tokens
+#
+# Usage:
+#   ./deploy.sh                # incremental upload of changed files (creates space if missing)
+#   ./deploy.sh --create-only  # just create the space, don't upload
+#
+# After deploy, the viewer is live at:
+#   https://huggingface.co/spaces/Divinci-AI/vindex-viewer
+set -euo pipefail
+SPACE_ID="Divinci-AI/vindex-viewer"
+HERE="$(cd "$(dirname "$0")" && pwd)"
+# Try to create the Space (idempotent — succeeds even if it already exists)
+echo "Ensuring Space $SPACE_ID exists..."
+hf repo create "$SPACE_ID" --repo-type space --space-sdk static --exist-ok 2>&1 | grep -v "already created" || true
+if [[ "${1:-}" == "--create-only" ]]; then
+  echo "Created (or already exists). Exiting before upload."
+  exit 0
+fi
+echo ""
+echo "Uploading $HERE/ to $SPACE_ID ..."
+hf upload "$SPACE_ID" "$HERE" . --repo-type space \
+  --commit-message "$(date -u +%Y-%m-%dT%H:%M:%SZ) — viewer + assets"
+echo ""
+echo "✓ Deployed. Live at: https://huggingface.co/spaces/$SPACE_ID"
+echo "Hero GIF URL (used by org card): https://huggingface.co/spaces/$SPACE_ID/resolve/main/vindex-hero-bg.gif"

index.html ADDED Viewed

	@@ -0,0 +1,1419 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>LarQL Vindex Viewer — Divinci AI</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body { background: #050510; color: #e0e8ff; font-family: 'Courier New', monospace; overflow: hidden; }
+    canvas { display: block; }
+    /* ── Top UI bar ─────────────────────────────────────────────── */
+    #ui {
+      position: absolute; top: 0; left: 0; right: 0;
+      padding: 12px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
+      background: linear-gradient(to bottom, rgba(5,5,16,0.95), transparent);
+      pointer-events: none; z-index: 10;
+    }
+    #ui > * { pointer-events: all; }
+    .logo { font-size: 11px; opacity: 0.5; letter-spacing: 0.12em; white-space: nowrap; }
+    .logo span { color: #7b9fff; }
+    select, button {
+      background: rgba(20,24,60,0.9); border: 1px solid rgba(123,159,255,0.28);
+      color: #e0e8ff; padding: 5px 10px; border-radius: 5px; font-size: 11px;
+      cursor: pointer; outline: none; font-family: inherit; transition: border-color 0.15s;
+    }
+    select:hover, button:hover { border-color: rgba(123,159,255,0.65); }
+    button.active { border-color: #7b9fff; background: rgba(40,55,130,0.9); color: #fff; }
+    #hint { font-size: 10px; opacity: 0.35; }
+    #search-input {
+      background: rgba(20,24,60,0.9); border: 1px solid rgba(123,159,255,0.28);
+      color: #e0e8ff; padding: 5px 10px; border-radius: 5px; font-size: 11px;
+      width: 250px; font-family: inherit; outline: none; transition: border-color 0.15s;
+    }
+    #search-input:focus { border-color: #7b9fff; }
+    #search-input::placeholder { color: rgba(224,232,255,0.3); }
+    #search-status { font-size: 10px; opacity: 0.55; color: #ffd060; min-width: 110px; }
+    /* ── Tier 1 info panel — always visible ─────────────────────── */
+    #info-panel {
+      position: absolute; bottom: 16px; left: 16px;
+      background: rgba(6,7,20,0.93); border: 1px solid rgba(123,159,255,0.2);
+      border-radius: 10px; min-width: 240px; max-width: 280px;
+      font-size: 11px; z-index: 10; overflow: hidden;
+      box-shadow: 0 4px 24px rgba(0,0,0,0.5);
+    }
+    .panel-tier1 { padding: 12px 14px 10px; }
+    .model-title {
+      font-size: 13px; font-weight: bold; letter-spacing: 0.04em;
+      color: #e8f0ff; display: flex; justify-content: space-between; align-items: flex-start;
+      gap: 8px; margin-bottom: 3px;
+    }
+    .hf-link {
+      font-size: 9px; color: #7b9fff; text-decoration: none; opacity: 0.8;
+      border: 1px solid rgba(123,159,255,0.25); border-radius: 3px; padding: 1px 5px;
+      white-space: nowrap; flex-shrink: 0;
+    }
+    .hf-link:hover { opacity: 1; border-color: rgba(123,159,255,0.6); }
+    .model-meta { font-size: 10px; opacity: 0.45; margin-bottom: 10px; letter-spacing: 0.02em; }
+    .tier1-divider { border: none; border-top: 1px solid rgba(123,159,255,0.1); margin: 8px 0; }
+    .c4-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
+    .c4-val { font-size: 15px; font-weight: bold; font-family: monospace; }
+    .c4-val.good { color: #44ffaa; }
+    .c4-val.warm { color: #ffcc44; }
+    .c4-val.hot  { color: #ff6644; }
+    .c4-label { font-size: 9px; opacity: 0.5; }
+    .c4-chip {
+      margin-left: auto; font-size: 9px; padding: 2px 6px; border-radius: 10px;
+      font-weight: bold; letter-spacing: 0.04em;
+    }
+    .chip-good { background: rgba(68,255,170,0.15); color: #44ffaa; border: 1px solid rgba(68,255,170,0.3); }
+    .chip-warn { background: rgba(255,180,50,0.15); color: #ffcc44; border: 1px solid rgba(255,180,50,0.3); }
+    .chip-alert { background: rgba(255,80,50,0.15); color: #ff6644; border: 1px solid rgba(255,80,50,0.3); }
+    .chip-dead  { background: rgba(255,40,40,0.18); color: #ff4444; border: 1px solid rgba(255,40,40,0.3); }
+    .stage-bar-row { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
+    .stage-bar-label { font-size: 9px; opacity: 0.45; width: 60px; flex-shrink: 0; }
+    .stage-bar-track { flex: 1; height: 5px; background: rgba(255,255,255,0.07); border-radius: 2px; overflow: hidden; }
+    .stage-bar-fill { height: 100%; border-radius: 2px; transition: width 0.4s ease; }
+    .stage-bar-val { font-size: 9px; width: 28px; text-align: right; opacity: 0.7; }
+    .gate3-row {
+      display: flex; align-items: center; gap: 6px;
+      margin-top: 7px; font-size: 10px;
+    }
+    .gate3-icon { font-size: 11px; }
+    .anomaly-banner {
+      margin: 8px 14px; padding: 6px 10px;
+      background: rgba(255,100,50,0.1); border: 1px solid rgba(255,100,50,0.25);
+      border-radius: 6px; font-size: 10px; color: #ffaa66; cursor: pointer;
+      display: none; line-height: 1.5;
+    }
+    .anomaly-banner:hover { background: rgba(255,100,50,0.18); }
+    /* ── Tier 2 — expandable metrics ───────────────────────────── */
+    .tier2-toggle {
+      width: 100%; text-align: center; padding: 6px; font-size: 9px;
+      letter-spacing: 0.1em; opacity: 0.4; cursor: pointer; border: none;
+      background: rgba(123,159,255,0.04); border-top: 1px solid rgba(123,159,255,0.1);
+      color: #e0e8ff; text-transform: uppercase; transition: opacity 0.15s, background 0.15s;
+    }
+    .tier2-toggle:hover { opacity: 0.75; background: rgba(123,159,255,0.08); }
+    #tier2-metrics { display: none; padding: 10px 14px 12px; border-top: 1px solid rgba(123,159,255,0.08); }
+    #tier2-metrics.open { display: block; }
+    .m-row { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
+    .m-name { font-size: 9px; opacity: 0.45; width: 64px; flex-shrink: 0; letter-spacing: 0.02em; }
+    .m-bar-track { flex: 1; height: 4px; background: rgba(255,255,255,0.07); border-radius: 2px; overflow: hidden; }
+    .m-bar-fill { height: 100%; border-radius: 2px; }
+    .m-val { font-size: 9px; width: 36px; text-align: right; font-family: monospace; }
+    .m-val.good { color: #44ffaa; }
+    .m-val.warn { color: #ffcc44; }
+    .m-val.alert { color: #ff6644; }
+    .m-val.dim  { opacity: 0.35; }
+    .shortid-row {
+      display: flex; align-items: center; justify-content: space-between;
+      margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(123,159,255,0.08);
+      font-size: 9px;
+    }
+    .shortid-val { font-family: monospace; opacity: 0.45; }
+    .copy-btn {
+      font-size: 9px; padding: 1px 6px; border-radius: 3px; cursor: pointer;
+      border: 1px solid rgba(123,159,255,0.2); background: transparent; color: #7b9fff;
+    }
+    .copy-btn:hover { background: rgba(123,159,255,0.1); }
+    /* ── Legend ──────────────────────────────────────────────────── */
+    #legend {
+      position: absolute; bottom: 16px; right: 16px;
+      background: rgba(6,7,20,0.93); border: 1px solid rgba(123,159,255,0.2);
+      border-radius: 10px; padding: 12px 15px; font-size: 11px; line-height: 1.9; z-index: 10;
+    }
+    #legend h3 { font-size: 9px; letter-spacing: 0.14em; color: #7b9fff; margin-bottom: 6px; text-transform: uppercase; }
+    .stage-row { display: flex; align-items: center; gap: 7px; }
+    .stage-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
+    /* ── Compare panel ───────────────────────────────────────────── */
+    #compare-panel {
+      position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
+      background: rgba(6,7,20,0.93); border: 1px solid rgba(123,159,255,0.2);
+      border-radius: 10px; padding: 12px 16px; font-size: 11px;
+      display: none; z-index: 10; white-space: nowrap;
+      box-shadow: 0 4px 24px rgba(0,0,0,0.5);
+    }
+    #compare-panel h3 { font-size: 9px; letter-spacing: 0.14em; color: #7b9fff; margin-bottom: 8px; text-transform: uppercase; }
+    .cmp-row { display: flex; gap: 28px; }
+    .cmp-col { display: flex; flex-direction: column; gap: 4px; min-width: 140px; }
+    .cmp-title { font-size: 10px; font-weight: bold; color: #e8f0ff; margin-bottom: 2px; }
+    .cmp-meta { font-size: 9px; opacity: 0.4; margin-bottom: 4px; }
+    .cmp-metric { display: flex; justify-content: space-between; gap: 14px; font-size: 10px; }
+    .cmp-val { font-family: monospace; }
+    .cmp-val.good { color: #44ffaa; }
+    .cmp-val.warn { color: #ffcc44; }
+    .cmp-val.alert { color: #ff6644; }
+    .cmp-divider { width: 1px; background: rgba(123,159,255,0.15); }
+    /* ── Tooltip ─────────────────────────────────────────────────── */
+    #tooltip {
+      position: absolute; display: none; pointer-events: none;
+      background: rgba(8,10,32,0.97); border: 1px solid rgba(123,159,255,0.35);
+      border-radius: 7px; padding: 8px 12px; font-size: 10px; line-height: 1.7;
+      color: #c8d8ff; z-index: 20; max-width: 220px;
+    }
+    /* ── Demo overlay ────────────────────────────────────────────── */
+    #demo-overlay {
+      position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
+      font-size: 13px; letter-spacing: 0.08em; color: rgba(255,255,255,0.7);
+      text-align: center; z-index: 30; display: none;
+      text-shadow: 0 2px 12px rgba(0,0,0,0.8);
+      pointer-events: none;
+    }
+    #loading {
+      position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
+      text-align: center; color: #7b9fff; z-index: 30; display: none;
+    }
+    .spinner { width: 32px; height: 32px; border: 2px solid rgba(123,159,255,0.15); border-top-color: #7b9fff; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 10px; }
+    @keyframes spin { to { transform: rotate(360deg); } }
+  </style>
+</head>
+<body>
+<!-- Top bar -->
+<div id="ui">
+  <div class="logo"><span>Divinci AI</span> · LarQL Vindex Viewer v2</div>
+  <select id="model-select">
+    <option value="gemma-4-e2b">Gemma 4 E2B (2B) — 35L ✓</option>
+    <option value="ministral-3b">Ministral-3B — 26L</option>
+    <option value="medgemma-4b">MedGemma-1.5-4B — 34L ⚠️</option>
+    <option value="qwen3-0.6b">Qwen3-0.6B — 28L</option>
+    <option value="qwen3-8b" selected>Qwen3-8B — 36L</option>
+    <option value="qwen3.6-35b">Qwen3.6-35B MoE — 40L</option>
+    <option value="llama-3.1-8b">Llama-3.1-8B — 32L</option>
+    <option value="gpt-oss-120b">GPT-OSS-120B MoE — 36L</option>
+    <option value="bonsai-1bit">Bonsai b1.58-2B 1-bit 💀</option>
+  </select>
+  <button id="compare-btn" title="Compare current model vs Bonsai 1-bit dissolution">⇌ Compare</button>
+  <button id="demo-btn" title="12-second scripted tour">▶ Demo</button>
+  <button id="view-btn" title="Toggle between 3D cylinder and 2D circuit view">🔌 2D Circuit</button>
+  <input id="search-input" type="search" placeholder="🔍 Search features (e.g. paris, capital, code)…" autocomplete="off" />
+  <span id="search-status"></span>
+  <div id="hint">Click a feature · drag to orbit · scroll to zoom</div>
+</div>
+<!-- Tier 1 info panel -->
+<div id="info-panel">
+  <div class="panel-tier1">
+    <div class="model-title">
+      <span id="m-name">—</span>
+      <a id="m-hf-link" class="hf-link" href="#" target="_blank" rel="noopener">↗ HF</a>
+    </div>
+    <div class="model-meta" id="m-meta">—</div>
+    <hr class="tier1-divider">
+    <!-- C4 row -->
+    <div class="c4-row">
+      <div>
+        <div class="c4-val" id="m-c4-val">—</div>
+        <div class="c4-label">C4 TEMPERATURE</div>
+      </div>
+      <div class="c4-chip" id="m-c4-chip">—</div>
+    </div>
+    <!-- Stage bar -->
+    <div class="stage-bar-row">
+      <div class="stage-bar-label">CIRCUIT</div>
+      <div class="stage-bar-track"><div class="stage-bar-fill" id="m-stage-fill" style="width:0%"></div></div>
+      <div class="stage-bar-val" id="m-c5-val">—</div>
+    </div>
+    <!-- Gate 3 -->
+    <div class="gate3-row">
+      <span class="gate3-icon" id="m-gate3-icon">○</span>
+      <span id="m-gate3-label" style="opacity:0.5">Gate-3: —</span>
+    </div>
+  </div>
+  <!-- Anomaly banner -->
+  <div class="anomaly-banner" id="m-anomaly"></div>
+  <!-- Tier 2 toggle -->
+  <button class="tier2-toggle" id="tier2-btn">METRICS ▾</button>
+  <!-- Tier 2 body -->
+  <div id="tier2-metrics">
+    <div class="m-row">
+      <div class="m-name">C1 SPARSITY</div>
+      <div class="m-bar-track"><div class="m-bar-fill" id="b-c1" style="width:0%;background:#44aaff"></div></div>
+      <div class="m-val" id="v-c1">—</div>
+    </div>
+    <div class="m-row">
+      <div class="m-name">C2 TOP-8</div>
+      <div class="m-bar-track"><div class="m-bar-fill" id="b-c2" style="width:0%;background:#44ffaa"></div></div>
+      <div class="m-val" id="v-c2">—</div>
+    </div>
+    <div class="m-row">
+      <div class="m-name">C3 COHERENCE</div>
+      <div class="m-bar-track"><div class="m-bar-fill" id="b-c3" style="width:0%;background:#7b9fff"></div></div>
+      <div class="m-val" id="v-c3">—</div>
+    </div>
+    <div class="m-row">
+      <div class="m-name">C4 TEMP</div>
+      <div class="m-bar-track"><div class="m-bar-fill" id="b-c4" style="width:0%;background:#ffaa44"></div></div>
+      <div class="m-val" id="v-c4">—</div>
+    </div>
+    <div class="m-row">
+      <div class="m-name">SPECTRUM</div>
+      <div class="m-bar-track"><div class="m-bar-fill" id="b-spec" style="width:0%;background:#a855f7"></div></div>
+      <div class="m-val" id="v-spec">—</div>
+    </div>
+    <div class="shortid-row">
+      <div>
+        <span style="opacity:0.35;font-size:9px">VINDEX ID  </span>
+        <span class="shortid-val" id="v-shortid">—</span>
+      </div>
+      <button class="copy-btn" id="copy-shortid">copy</button>
+    </div>
+  </div>
+</div>
+<!-- Legend -->
+<div id="legend">
+  <h3>Circuit Stages</h3>
+  <div class="stage-row"><div class="stage-dot" style="background:#4466ff"></div>Broadcast (0%)</div>
+  <div class="stage-row"><div class="stage-dot" style="background:#44aaff"></div>Domain (20-25%)</div>
+  <div class="stage-row"><div class="stage-dot" style="background:#44ffaa"></div>Entity (45-55%)</div>
+  <div class="stage-row"><div class="stage-dot" style="background:#ffaa44"></div>Prediction (90%+)</div>
+  <div class="stage-row"><div class="stage-dot" style="background:#888"></div>Transition</div>
+  <div class="stage-row" style="margin-top:5px"><div class="stage-dot" style="background:#ff4444"></div>Dissolved (1-bit)</div>
+</div>
+<!-- Compare panel -->
+<div id="compare-panel">
+  <h3>Circuit Comparison</h3>
+  <div class="cmp-row">
+    <div class="cmp-col" id="cmp-a"></div>
+    <div class="cmp-divider"></div>
+    <div class="cmp-col" id="cmp-b"></div>
+  </div>
+</div>
+<!-- Demo text overlay -->
+<div id="demo-overlay"></div>
+<div id="tooltip"></div>
+<div id="loading"><div class="spinner"></div><div>Loading…</div></div>
+<script type="importmap">
+{
+  "imports": {
+    "three": "https://unpkg.com/three@0.160/build/three.module.js",
+    "three/addons/": "https://unpkg.com/three@0.160/examples/jsm/"
+  }
+}
+</script>
+<script type="module">
+import * as THREE from 'three';
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
+import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
+import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
+// ── Stage colors ───────────────────────────────────────────────
+const STAGE_COLORS = [
+  new THREE.Color(0x4466ff),  // broadcast
+  new THREE.Color(0x44aaff),  // domain
+  new THREE.Color(0x44ffaa),  // entity
+  new THREE.Color(0xffaa44),  // prediction
+  new THREE.Color(0x888888),  // transition
+  new THREE.Color(0xff4444),  // dissolved
+];
+const STAGE_NAMES = ['Broadcast','Domain','Entity','Prediction','Transition','Dissolved'];
+// ── Real Phase 1+2 measurements (April 2026) ──────────────────
+const VINDEX_DATA = {
+  'gemma-4-e2b': {
+    name: 'Gemma 4 E2B', org: 'Google', params: '2B', precision: 'bf16',
+    layers: 35, F: 128,
+    c1: 0.061, c2: 0.938, c3: 0.801, c4: 0.041, c5: 4, c5max: 5,
+    spectrum: 'power-law', spectrumScore: 0.92,
+    shortId: 'gemma4e2b', hfRepo: 'Divinci-AI/gemma-4-e2b-vindex',
+    gate3: 'PASS', gate3note: 'Paris→capital suppressed (18.1→absent)',
+    finding: 'Confirms C4≈0.042 universal constant',
+    anomaly: null, dissolved: false,
+    stageBands: [[0,.04,0],[.20,.25,1],[.45,.55,2],[.90,1,3]],
+  },
+  'ministral-3b': {
+    name: 'Ministral-3B', org: 'Mistral AI', params: '3B', precision: 'fp8→bf16',
+    layers: 26, F: 128,
+    c1: 0.236, c2: null, c3: 0.724, c4: 0.265, c5: 3, c5max: 5,
+    spectrum: 'power-law', spectrumScore: 0.88,
+    shortId: '00d28f96', hfRepo: 'Divinci-AI/ministral-3b-vindex',
+    gate3: 'PENDING', gate3note: 'Awaiting multi-layer LarQL service',
+    finding: 'C4 higher than expected (fp8 dequant on A100 compute 8.0). C2 N/A — multimodal lm_head absent.',
+    anomaly: null, dissolved: false,
+    stageBands: [[0,.04,0],[.20,.26,1],[.46,.54,2],[.88,1,3]],
+  },
+  'medgemma-4b': {
+    name: 'MedGemma-1.5-4B', org: 'Google', params: '4B', precision: 'bf16',
+    layers: 34, F: 128,
+    c1: 0.181, c2: 0.795, c3: 0.800, c4: 1.898, c5: 2, c5max: 5,
+    spectrum: 'power-law', spectrumScore: 0.78,
+    shortId: '75eeb232', hfRepo: 'Divinci-AI/medgemma-1.5-4b-vindex',
+    gate3: 'PENDING', gate3note: 'Gate-3 pending',
+    finding: 'C4 anomaly: 1.898 — 45× cohort average. Hypothesis: text-only activation probe through multimodal vision encoder inflates temperature measurement.',
+    anomaly: '⚠️ C4 = 1.898 — 45× cohort anomaly. Likely artifact of text-only probe through vision encoder. Under investigation.',
+    anomalyType: 'warn', dissolved: false,
+    stageBands: [[0,.04,0],[.20,.26,1],[.45,.54,2],[.90,1,3]],
+  },
+  'qwen3-0.6b': {
+    name: 'Qwen3-0.6B', org: 'Alibaba Cloud', params: '0.6B', precision: 'bf16',
+    layers: 28, F: 128,
+    c1: 0.117, c2: 0.880, c3: 0.531, c4: 0.411, c5: 4, c5max: 5,
+    spectrum: 'power-law', spectrumScore: 0.83,
+    shortId: 'qwen306b', hfRepo: 'Divinci-AI/qwen3-0.6b-vindex',
+    gate3: 'PENDING', gate3note: 'Awaiting multi-layer LarQL service',
+    finding: 'Qwen3 family C4 elevation (10×). C3 coherence lower than larger Qwen3 models — scale matters for gate alignment.',
+    anomaly: null, dissolved: false,
+    stageBands: [[0,.04,0],[.21,.25,1],[.46,.54,2],[.90,1,3]],
+  },
+  'qwen3-8b': {
+    name: 'Qwen3-8B', org: 'Alibaba Cloud', params: '8B', precision: 'bf16',
+    layers: 36, F: 128,
+    c1: 0.228, c2: 0.867, c3: 0.813, c4: 0.804, c5: 4, c5max: 5,
+    spectrum: 'power-law', spectrumScore: 0.87,
+    shortId: 'ea08e8e8', hfRepo: 'Divinci-AI/qwen3-8b-vindex',
+    gate3: 'PENDING', gate3note: 'Awaiting multi-layer LarQL service',
+    finding: 'Qwen3 family C4 elevation (19×) confirmed as architectural signature — same in bf16 as in 1-bit Bonsai. Four-stage circuit intact.',
+    anomaly: null, dissolved: false,
+    stageBands: [[0,.04,0],[.20,.25,1],[.45,.55,2],[.90,1,3]],
+  },
+  'qwen3.6-35b': {
+    name: 'Qwen3.6-35B-A3B', org: 'Alibaba Cloud', params: '35B (3B active)', precision: 'bf16',
+    layers: 40, F: 64,
+    c1: null, c2: null, c3: null, c4: null, c5: null, c5max: 5,
+    spectrum: 'var@64: 0.27–0.39', spectrumScore: 0.55,
+    shortId: 'qwen3635b', hfRepo: 'Divinci-AI/qwen3.6-35b-a3b-vindex',
+    gate3: 'N/A', gate3note: 'Phase 2 pending — MoE 256 experts',
+    finding: 'Phase 1 complete. Phase 2 skipped — OOM on A100 with 256-expert MoE routing.',
+    anomaly: null, dissolved: false,
+    stageBands: [[0,.04,0],[.20,.26,1],[.46,.54,2],[.90,1,3]],
+  },
+  'llama-3.1-8b': {
+    name: 'Llama 3.1-8B', org: 'Meta', params: '8B', precision: 'bf16',
+    layers: 32, F: 128,
+    c1: 0.387, c2: 0.491, c3: 0.808, c4: 0.012, c5: 2, c5max: 5,
+    spectrum: 'power-law', spectrumScore: 0.86,
+    shortId: 'c39fad08', hfRepo: 'Divinci-AI/llama-3.1-8b-vindex',
+    gate3: 'PENDING', gate3note: 'Awaiting multi-layer LarQL service',
+    finding: 'C4 = 0.012 — Llama family runs below the universal constant. C1 sparsity (0.387) highest of all measured models. Base model: C2 reflects unconditional next-token distribution.',
+    anomaly: null, dissolved: false,
+    stageBands: [[0,.04,0],[.22,.26,1],[.47,.55,2],[.90,1,3]],
+  },
+  'gpt-oss-120b': {
+    name: 'GPT-OSS-120B', org: 'OpenAI', params: '120B', precision: 'MXFP4',
+    layers: 36, F: 128,
+    c1: null, c2: null, c3: null, c4: null, c5: null, c5max: 5,
+    spectrum: 'S[0]=13,056 (117×)', spectrumScore: 0.72,
+    shortId: '02d09974', hfRepo: 'Divinci-AI/gpt-oss-120b-vindex',
+    gate3: 'N/A', gate3note: 'Uniform MoE routing — calibration required',
+    finding: 'Phase 2 skipped (OOM). Dominant SV = 13,056 — 117× the 200th SV. Most extreme power-law spectrum in the cohort. MXFP4 quantization preserves structural hierarchy.',
+    anomaly: null, dissolved: false,
+    stageBands: [[0,.04,0],[.20,.25,1],[.45,.55,2],[.90,1,3]],
+  },
+  'bonsai-1bit': {
+    name: 'Bonsai b1.58-2B', org: 'Microsoft', params: '2B', precision: '1-bit {-1,0,+1}',
+    layers: 28, F: 128,
+    c1: 0.223, c2: 0.375, c3: 0.534, c4: 0.429, c5: 1, c5max: 5,
+    spectrum: 'flat (var@128=9.3%)', spectrumScore: 0.09,
+    shortId: 'bonsai1b', hfRepo: null,
+    gate3: 'N/A', gate3note: 'Ternary weights — Phase 1 redo pending',
+    finding: 'C5 = 1: four-stage circuit completely dissolved. SV spectrum near-random (Marchenko-Pastur). C4 = 0.429 is Qwen3 architectural signature, not 1-bit effect. The 1-bit discriminators are C5 collapse + flat SV spectrum only.',
+    anomaly: '💀 C5 = 1 — four-stage circuit dissolved. Weight SV spectrum is near-random. The model answers correctly, but its internals have no discernible structure.',
+    anomalyType: 'dead', dissolved: true,
+    stageBands: [],
+  },
+};
+// ── Renderer ──────────────────────────────────────────────────
+const renderer = new THREE.WebGLRenderer({ antialias: true, preserveDrawingBuffer: true });
+renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
+renderer.setSize(innerWidth, innerHeight);
+renderer.toneMapping = THREE.ACESFilmicToneMapping;
+renderer.toneMappingExposure = 1.15;
+document.body.appendChild(renderer.domElement);
+const scene = new THREE.Scene();
+scene.background = new THREE.Color(0x050510);
+scene.fog = new THREE.FogExp2(0x050510, 0.012);
+const camera = new THREE.PerspectiveCamera(52, innerWidth / innerHeight, 0.1, 600);
+camera.position.set(0, 4, 26);
+const controls = new OrbitControls(camera, renderer.domElement);
+controls.enableDamping = true;
+controls.dampingFactor = 0.06;
+controls.minDistance = 7;
+controls.maxDistance = 120;
+scene.add(new THREE.AmbientLight(0x334466, 2.8));
+const dirLight = new THREE.DirectionalLight(0x7799ff, 1.6);
+dirLight.position.set(10, 20, 10);
+scene.add(dirLight);
+const composer = new EffectComposer(renderer);
+composer.addPass(new RenderPass(scene, camera));
+const bloom = new UnrealBloomPass(new THREE.Vector2(innerWidth, innerHeight), 0.7, 0.4, 0.12);
+composer.addPass(bloom);
+// ── State ─────────────────────────────────────────────────────
+let groups = {};
+let activeKeys = [];
+let walkLines = [];
+let selectedIdx = -1;
+let compareMode = false;
+let demoRunning = false;
+let viewMode = 'cylinder';   // 'cylinder' (3D) or 'flat' (2D circuit)
+let tier2Open = false;
+// ── PRNG ──────────────────────────────────────────────────────
+function mulberry32(seed) {
+  return () => {
+    seed |= 0; seed = seed + 0x6D2B79F5 | 0;
+    let t = Math.imul(seed ^ seed >>> 15, 1 | seed);
+    t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+function getStageForDepth(stageBands, depth) {
+  for (const [d0, d1, s] of stageBands) {
+    if (depth >= d0 && depth <= d1) return s;
+  }
+  return 4;
+}
+// ── Build model group ─────────────────────────────────────────
+function buildGroup(key, offsetX = 0) {
+  if (groups[key]) {
+    scene.remove(groups[key].group);
+    groups[key].group.traverse(o => {
+      if (o.geometry) o.geometry.dispose();
+      if (o.material) {
+        if (Array.isArray(o.material)) o.material.forEach(m => m.dispose());
+        else o.material.dispose();
+      }
+    });
+    delete groups[key];
+  }
+  const d = VINDEX_DATA[key];
+  const group = new THREE.Group();
+  group.position.x = offsetX;
+  const L = d.layers, F = d.F, SPACING = 0.80, R = 4.6;
+  const totalH = (L - 1) * SPACING;
+  const featureMeta = [];
+  const FLAT_W = R * 2.4;   // horizontal span for features in flat mode
+  // ── Stage bands ─────────────────────────────────────────────
+  if (!d.dissolved) {
+    d.stageBands.forEach(([d0, d1, si]) => {
+      const y0 = d0 * totalH - totalH / 2;
+      const y1 = d1 * totalH - totalH / 2;
+      const h = Math.max(y1 - y0, 0.08);
+      if (viewMode === 'flat') {
+        // Horizontal stripe across the circuit
+        const geo = new THREE.PlaneGeometry(FLAT_W * 1.15, h);
+        const mat = new THREE.MeshBasicMaterial({ color: STAGE_COLORS[si], transparent: true, opacity: 0.085, depthWrite: false, side: THREE.DoubleSide });
+        const mesh = new THREE.Mesh(geo, mat);
+        mesh.position.set(0, (y0 + y1) / 2, -0.02);
+        group.add(mesh);
+      } else {
+        // 3D box slab + capping rings
+        const geo = new THREE.BoxGeometry(R * 2.5, h, R * 2.5);
+        const mat = new THREE.MeshBasicMaterial({ color: STAGE_COLORS[si], transparent: true, opacity: 0.032, depthWrite: false, side: THREE.DoubleSide });
+        const mesh = new THREE.Mesh(geo, mat);
+        mesh.position.y = (y0 + y1) / 2;
+        group.add(mesh);
+        [y0, y1].forEach(y => {
+          const rg = new THREE.RingGeometry(R * 1.22, R * 1.24, 64);
+          const rm = new THREE.MeshBasicMaterial({ color: STAGE_COLORS[si], transparent: true, opacity: 0.20, side: THREE.DoubleSide, depthWrite: false });
+          const ring = new THREE.Mesh(rg, rm);
+          ring.position.y = y; ring.rotation.x = -Math.PI / 2;
+          group.add(ring);
+        });
+      }
+    });
+  }
+  // ── Layer guides (rings in 3D, lines in flat) ───────────────
+  for (let li = 0; li < L; li++) {
+    const y = (li / (L - 1)) * totalH - totalH / 2;
+    let lineColor, lineOpacity;
+    if (d.dissolved)                          { lineColor = new THREE.Color(0x330a0a); lineOpacity = 0.22; }
+    else if (d.c4 !== null && d.c4 > 1.0)     { lineColor = new THREE.Color(0xff4400); lineOpacity = 0.24; }
+    else if (d.c4 !== null) {
+      const t = Math.min(d.c4 / 0.55, 1.0);
+      lineColor = new THREE.Color().lerpColors(new THREE.Color(0x1a2d6e), new THREE.Color(0xff8822), t);
+      lineOpacity = 0.14;
+    } else                                    { lineColor = new THREE.Color(0x1e2a50); lineOpacity = 0.10; }
+    if (viewMode === 'flat') {
+      const lineGeo = new THREE.BufferGeometry().setFromPoints([
+        new THREE.Vector3(-FLAT_W / 2, y, -0.05),
+        new THREE.Vector3( FLAT_W / 2, y, -0.05),
+      ]);
+      const lineMat = new THREE.LineBasicMaterial({ color: lineColor, transparent: true, opacity: lineOpacity });
+      group.add(new THREE.Line(lineGeo, lineMat));
+    } else {
+      const rg = new THREE.RingGeometry(R * 0.88, R, 64);
+      const rm = new THREE.MeshBasicMaterial({ color: lineColor, transparent: true, opacity: lineOpacity, side: THREE.DoubleSide, depthWrite: false });
+      const ring = new THREE.Mesh(rg, rm); ring.position.y = y; ring.rotation.x = -Math.PI / 2;
+      group.add(ring);
+    }
+  }
+  // ── Feature points (InstancedMesh, layout depends on viewMode) ──
+  const totalF = L * F;
+  const geo = new THREE.SphereGeometry(0.08, 7, 7);
+  const mat = new THREE.MeshStandardMaterial({ roughness: 0.3, metalness: 0.05 });
+  const instanceMesh = new THREE.InstancedMesh(geo, mat, totalF);
+  instanceMesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage);
+  const dummy = new THREE.Object3D();
+  const color = new THREE.Color();
+  const rng = mulberry32(42 + key.charCodeAt(0) * 7);
+  let idx = 0;
+  for (let li = 0; li < L; li++) {
+    const y = (li / (L - 1)) * totalH - totalH / 2;
+    const depth = li / (L - 1);
+    const stage = d.dissolved ? 5 : getStageForDepth(d.stageBands, depth);
+    for (let fi = 0; fi < F; fi++) {
+      let x, z;
+      if (viewMode === 'flat') {
+        // 2D circuit: horizontal line per layer; features spread left-to-right.
+        // Dissolved: jitter the ordering to show lack of structure.
+        if (d.dissolved) {
+          x = (rng() - 0.5) * FLAT_W;
+        } else {
+          x = ((fi + 0.5) / F - 0.5) * FLAT_W;
+        }
+        z = 0;
+      } else if (d.dissolved) {
+        const angle = rng() * Math.PI * 2;
+        const r = R * 0.82 * Math.sqrt(rng());
+        x = r * Math.cos(angle); z = r * Math.sin(angle);
+      } else {
+        const theta = fi * 2.399963229;
+        const r = R * 0.84 * Math.sqrt((fi + 0.5) / F);
+        x = r * Math.cos(theta); z = r * Math.sin(theta);
+      }
+      const jitter = viewMode === 'flat'
+        ? (rng() - 0.5) * (d.dissolved ? 0.10 : 0.04)
+        : (rng() - 0.5) * (d.dissolved ? 0.18 : 0.06);
+      dummy.position.set(x, y + jitter, z);
+      const baseScale = viewMode === 'flat' ? 0.85 : 1.0;
+      dummy.scale.setScalar(baseScale * (d.dissolved ? (0.6 + rng() * 0.9) : (0.8 + rng() * 0.65)));
+      dummy.updateMatrix();
+      instanceMesh.setMatrixAt(idx, dummy.matrix);
+      color.copy(STAGE_COLORS[stage]);
+      color.offsetHSL(0, (rng() - 0.5) * 0.12, (rng() - 0.5) * 0.14);
+      instanceMesh.setColorAt(idx, color);
+      featureMeta[idx] = { li, fi, stage, y, x, z, key };
+      idx++;
+    }
+  }
+  instanceMesh.instanceMatrix.needsUpdate = true;
+  if (instanceMesh.instanceColor) instanceMesh.instanceColor.needsUpdate = true;
+  group.add(instanceMesh);
+  // ── Inter-layer edges (flat mode only) — show top features connecting consecutive layers ──
+  if (viewMode === 'flat' && !d.dissolved) {
+    const edgePts = [];
+    const edgeColors = [];
+    const TOP_K = Math.min(8, F);  // strongest few features per layer
+    for (let li = 0; li < L - 1; li++) {
+      const y0 = (li     / (L - 1)) * totalH - totalH / 2;
+      const y1 = ((li+1) / (L - 1)) * totalH - totalH / 2;
+      const stage0 = getStageForDepth(d.stageBands, li / (L - 1));
+      const c = STAGE_COLORS[stage0];
+      for (let k = 0; k < TOP_K; k++) {
+        const x0 = ((k + 0.5) / F - 0.5) * FLAT_W;
+        const x1 = ((k + 0.5) / F - 0.5) * FLAT_W;
+        edgePts.push(x0, y0, 0, x1, y1, 0);
+        edgeColors.push(c.r, c.g, c.b, c.r, c.g, c.b);
+      }
+    }
+    const eg = new THREE.BufferGeometry();
+    eg.setAttribute('position', new THREE.Float32BufferAttribute(edgePts, 3));
+    eg.setAttribute('color',    new THREE.Float32BufferAttribute(edgeColors, 3));
+    const em = new THREE.LineBasicMaterial({ vertexColors: true, transparent: true, opacity: 0.18 });
+    group.add(new THREE.LineSegments(eg, em));
+  }
+  scene.add(group);
+  groups[key] = { group, instanceMesh, featureMeta, totalH };
+  return groups[key];
+}
+// ── Info panel update ─────────────────────────────────────────
+function c4Class(v) {
+  if (v === null) return 'dim';
+  if (v < 0.06) return 'good';
+  if (v < 0.5)  return 'warn';
+  return 'alert';
+}
+function barWidth(v, max) {
+  if (v === null) return 0;
+  return Math.min((v / max) * 100, 100);
+}
+function updateInfoPanel(key) {
+  const d = VINDEX_DATA[key];
+  document.getElementById('m-name').textContent = d.name;
+  const hfEl = document.getElementById('m-hf-link');
+  if (d.hfRepo) {
+    hfEl.href = `https://huggingface.co/${d.hfRepo}`;
+    hfEl.style.display = '';
+  } else {
+    hfEl.style.display = 'none';
+  }
+  document.getElementById('m-meta').textContent = `${d.org} · ${d.params} · ${d.precision} · ${d.layers}L`;
+  // C4
+  const c4El = document.getElementById('m-c4-val');
+  const c4Chip = document.getElementById('m-c4-chip');
+  if (d.c4 !== null) {
+    c4El.textContent = d.c4.toFixed(3);
+    c4El.className = 'c4-val ' + c4Class(d.c4);
+    if (d.c4 < 0.06) {
+      c4Chip.textContent = '✓ universal constant';
+      c4Chip.className = 'c4-chip chip-good';
+    } else if (d.c4 > 1.0) {
+      c4Chip.textContent = `⚠️ ${(d.c4/0.042).toFixed(0)}× anomaly`;
+      c4Chip.className = 'c4-chip chip-alert';
+    } else {
+      const mult = (d.c4 / 0.042).toFixed(0);
+      c4Chip.textContent = `↑ ${mult}× constant`;
+      c4Chip.className = 'c4-chip chip-warn';
+    }
+  } else {
+    c4El.textContent = 'N/A';
+    c4El.className = 'c4-val';
+    c4Chip.textContent = 'Phase 2 pending';
+    c4Chip.className = 'c4-chip chip-warn';
+  }
+  // C5 stage bar
+  const stageFill = document.getElementById('m-stage-fill');
+  const c5Val = document.getElementById('m-c5-val');
+  if (d.c5 !== null) {
+    const pct = (d.c5 / d.c5max) * 100;
+    stageFill.style.width = pct + '%';
+    if (d.c5 === 1) {
+      stageFill.style.background = '#ff4444';
+      c5Val.textContent = '💀 C5=1';
+      c5Val.className = 'stage-bar-val';
+      c5Val.style.color = '#ff4444';
+    } else {
+      stageFill.style.background = '#44ffaa';
+      c5Val.textContent = `${d.c5} stages`;
+      c5Val.className = 'stage-bar-val';
+      c5Val.style.color = '#44ffaa';
+    }
+  } else {
+    stageFill.style.width = '0%';
+    c5Val.textContent = 'N/A';
+    c5Val.style.color = '';
+  }
+  // Gate 3
+  const gate3Icon = document.getElementById('m-gate3-icon');
+  const gate3Label = document.getElementById('m-gate3-label');
+  const g3 = d.gate3;
+  if (g3 === 'PASS') {
+    gate3Icon.textContent = '✅';
+    gate3Label.textContent = `Gate-3: ${d.gate3note}`;
+    gate3Label.style.color = '#44ffaa'; gate3Label.style.opacity = '1';
+  } else if (g3 === 'PENDING') {
+    gate3Icon.textContent = '⏳';
+    gate3Label.textContent = `Gate-3: ${d.gate3note}`;
+    gate3Label.style.color = ''; gate3Label.style.opacity = '0.5';
+  } else {
+    gate3Icon.textContent = '○';
+    gate3Label.textContent = `Gate-3: ${d.gate3note}`;
+    gate3Label.style.color = ''; gate3Label.style.opacity = '0.35';
+  }
+  // Anomaly banner
+  const anomalyEl = document.getElementById('m-anomaly');
+  if (d.anomaly) {
+    anomalyEl.textContent = d.anomaly;
+    anomalyEl.style.display = 'block';
+    anomalyEl.style.background = d.anomalyType === 'dead'
+      ? 'rgba(255,40,40,0.1)' : 'rgba(255,120,50,0.1)';
+    anomalyEl.style.borderColor = d.anomalyType === 'dead'
+      ? 'rgba(255,40,40,0.3)' : 'rgba(255,120,50,0.3)';
+    anomalyEl.style.color = d.anomalyType === 'dead' ? '#ff7777' : '#ffaa66';
+  } else {
+    anomalyEl.style.display = 'none';
+  }
+  // Tier 2 metrics
+  function setBar(barId, valId, v, max, cls) {
+    document.getElementById(barId).style.width = barWidth(v, max) + '%';
+    const el = document.getElementById(valId);
+    el.textContent = v !== null ? v.toFixed(3) : 'N/A';
+    el.className = 'm-val ' + (v !== null ? (cls || '') : 'dim');
+  }
+  setBar('b-c1','v-c1', d.c1, 0.5, d.c1 > 0.3 ? 'warn' : 'good');
+  setBar('b-c2','v-c2', d.c2, 1.0, d.c2 !== null && d.c2 > 0.85 ? 'good' : '');
+  setBar('b-c3','v-c3', d.c3, 1.0, d.c3 !== null && d.c3 > 0.75 ? 'good' : 'warn');
+  setBar('b-c4','v-c4', d.c4 !== null ? Math.min(d.c4, 2.0) : null, 2.0, c4Class(d.c4));
+  document.getElementById('b-spec').style.width = (d.spectrumScore * 100) + '%';
+  const specEl = document.getElementById('v-spec');
+  specEl.textContent = d.spectrumScore > 0.7 ? 'power-law' : (d.spectrumScore > 0.2 ? 'partial' : 'flat');
+  specEl.className = 'm-val ' + (d.spectrumScore > 0.7 ? 'good' : d.spectrumScore > 0.2 ? 'warn' : 'alert');
+  const shortidEl = document.getElementById('v-shortid');
+  shortidEl.textContent = d.shortId || '—';
+  document.getElementById('copy-shortid').onclick = () => {
+    const txt = d.hfRepo ? `https://huggingface.co/${d.hfRepo}` : (d.shortId || '');
+    navigator.clipboard.writeText(txt).catch(() => {});
+  };
+}
+// ── Compare panel ─────────────────────────────────────────────
+function makeCmpCol(colId, key) {
+  const d = VINDEX_DATA[key];
+  const col = document.getElementById(colId);
+  col.innerHTML = '';
+  const title = document.createElement('div');
+  title.className = 'cmp-title';
+  title.textContent = d.name;
+  col.appendChild(title);
+  const meta = document.createElement('div');
+  meta.className = 'cmp-meta';
+  meta.textContent = `${d.org} · ${d.params} · ${d.precision}`;
+  col.appendChild(meta);
+  const rows = [
+    ['C4 Temp', d.c4 !== null ? d.c4.toFixed(3) : 'N/A', c4Class(d.c4)],
+    ['C5 Stages', d.c5 !== null ? (d.c5 === 1 ? '💀 1' : String(d.c5)) : 'N/A', d.c5 === 1 ? 'alert' : 'good'],
+    ['C3 Coherence', d.c3 !== null ? d.c3.toFixed(3) : 'N/A', d.c3 !== null && d.c3 > 0.75 ? 'good' : 'warn'],
+    ['C1 Sparsity', d.c1 !== null ? d.c1.toFixed(3) : 'N/A', ''],
+    ['Spectrum', d.spectrumScore > 0.7 ? 'power-law ✓' : (d.spectrumScore > 0.2 ? 'partial' : 'flat ⚠️'), d.spectrumScore > 0.7 ? 'good' : 'alert'],
+  ];
+  rows.forEach(([label, val, cls]) => {
+    const row = document.createElement('div');
+    row.className = 'cmp-metric';
+    const lEl = document.createElement('span');
+    lEl.style.opacity = '0.45'; lEl.textContent = label;
+    const vEl = document.createElement('span');
+    vEl.className = 'cmp-val ' + cls;
+    vEl.textContent = val;
+    row.appendChild(lEl); row.appendChild(vEl);
+    col.appendChild(row);
+  });
+}
+// ── Show single model ─────────────────────────────────────────
+function showSingle(key) {
+  compareMode = false;
+  document.getElementById('compare-btn').classList.remove('active');
+  document.getElementById('compare-panel').style.display = 'none';
+  document.getElementById('info-panel').style.display = '';
+  document.getElementById('legend').style.display = '';
+  Object.keys(groups).filter(k => k !== key).forEach(k => {
+    scene.remove(groups[k].group); delete groups[k];
+  });
+  clearWalk();
+  activeKeys = [key];
+  buildGroup(key, 0);
+  updateInfoPanel(key);
+  const L = VINDEX_DATA[key].layers;
+  if (viewMode === 'flat') {
+    // Need to fit (L-1) * 0.80 vertical units; FOV 52 -> visible_h ~ 0.976 * z
+    const totalH = (L - 1) * 0.80;
+    camera.position.set(0, 0, Math.max(20, totalH * 1.25 + 6));
+  } else {
+    camera.position.set(0, 2, 20 + L * 0.22);
+  }
+  controls.target.set(0, 0, 0);
+  controls.update();
+}
+// ── Compare mode ──────────────────────────────────────────────
+function showCompare(keyA, keyB) {
+  compareMode = true;
+  document.getElementById('compare-btn').classList.add('active');
+  document.getElementById('compare-panel').style.display = '';
+  document.getElementById('info-panel').style.display = 'none';
+  document.getElementById('legend').style.display = 'none';
+  Object.keys(groups).filter(k => k !== keyA && k !== keyB).forEach(k => {
+    scene.remove(groups[k].group); delete groups[k];
+  });
+  clearWalk();
+  activeKeys = [keyA, keyB];
+  buildGroup(keyA, -13);
+  buildGroup(keyB,  13);
+  makeCmpCol('cmp-a', keyA);
+  makeCmpCol('cmp-b', keyB);
+  const maxL = Math.max(VINDEX_DATA[keyA].layers, VINDEX_DATA[keyB].layers);
+  if (viewMode === 'flat') {
+    const totalH = (maxL - 1) * 0.80;
+    camera.position.set(0, 0, Math.max(28, totalH * 1.4 + 8));
+  } else {
+    camera.position.set(0, 2, 30 + maxL * 0.18);
+  }
+  controls.target.set(0, 0, 0);
+  controls.update();
+}
+// ── Walk traces ───────────────────────────────────────────────
+function clearWalk() {
+  walkLines.forEach(l => { scene.remove(l); l.geometry.dispose(); l.material.dispose(); });
+  walkLines = [];
+  selectedIdx = -1;
+}
+function traceWalk(globalIdx, instanceMesh, featureMeta, groupObj) {
+  clearWalk();
+  const meta = featureMeta[globalIdx];
+  if (!meta) return;
+  const d = VINDEX_DATA[meta.key];
+  const totalH = (d.layers - 1) * 0.80;
+  const rng = mulberry32(globalIdx * 31337);
+  const offsetX = groupObj.position.x;
+  let px = meta.x + offsetX, py = meta.y, pz = meta.z;
+  const stageColor = STAGE_COLORS[meta.stage];
+  const steps = d.dissolved ? 6 : 10;
+  for (let li = meta.li + 1; li < Math.min(meta.li + steps, d.layers); li++) {
+    const y = (li / (d.layers - 1)) * totalH - totalH / 2;
+    let x, z;
+    if (d.dissolved) {
+      x = (rng() - 0.5) * 8 + offsetX; z = (rng() - 0.5) * 8;
+    } else {
+      const angle = Math.atan2(pz, px - offsetX) + (rng() - 0.5) * 0.3;
+      const r = Math.sqrt((px-offsetX)**2 + pz**2);
+      x = r * Math.cos(angle) + (rng()-0.5)*0.25 + offsetX;
+      z = r * Math.sin(angle) + (rng()-0.5)*0.25;
+    }
+    const pts = [new THREE.Vector3(px,py,pz), new THREE.Vector3(x,y,z)];
+    const line = new THREE.Line(
+      new THREE.BufferGeometry().setFromPoints(pts),
+      new THREE.LineBasicMaterial({ color: stageColor, transparent: true, opacity: d.dissolved ? 0.22 : (0.55 - (li-meta.li)*0.04) })
+    );
+    scene.add(line); walkLines.push(line);
+    px = x; py = y; pz = z;
+  }
+  instanceMesh.setColorAt(globalIdx, new THREE.Color(0xffffff));
+  instanceMesh.instanceColor.needsUpdate = true;
+  selectedIdx = globalIdx;
+}
+// ── Tooltip ───────────────────────────────────────────────────
+const tooltip = document.getElementById('tooltip');
+function showTooltip(ex, ey, meta) {
+  const d = VINDEX_DATA[meta.key];
+  const stage = STAGE_NAMES[meta.stage];
+  const depth = ((meta.li / (d.layers - 1)) * 100).toFixed(0);
+  tooltip.innerHTML = '';
+  [[`${d.name}`, 'bold'], [`Layer ${meta.li} (${depth}% depth)  ·  Feature ${meta.fi}`, ''], [`Stage: ${stage}`, meta.stage === 5 ? 'color:#ff4444' : 'color:#44ffaa']].forEach(([text, style]) => {
+    const el = document.createElement('div');
+    el.textContent = text;
+    if (style.includes(':')) el.setAttribute('style', style);
+    else if (style === 'bold') el.style.fontWeight = 'bold';
+    tooltip.appendChild(el);
+  });
+  tooltip.style.left = (ex + 16) + 'px';
+  tooltip.style.top  = (ey - 52) + 'px';
+  tooltip.style.display = 'block';
+}
+// ── Demo sequence ─────────────────────────────────────────────
+const demoOverlay = document.getElementById('demo-overlay');
+function setDemoText(text) {
+  demoOverlay.textContent = text;
+  demoOverlay.style.display = text ? 'block' : 'none';
+}
+async function sleep(ms) { return new Promise(r => setTimeout(r, ms)); }
+async function runDemo() {
+  if (demoRunning) return;
+  demoRunning = true;
+  document.getElementById('demo-btn').textContent = '■ Stop';
+  controls.enabled = false;
+  // 0-2s: materialize Qwen3-8B
+  showSingle('qwen3-8b');
+  await sleep(100);
+  setDemoText('Each column: a transformer model\'s learned features, organized by layer');
+  camera.position.set(0, -6, 28);
+  await sleep(2200);
+  // 2-4s: orbit
+  setDemoText('128 features per layer, arranged by singular value direction');
+  camera.position.set(12, 3, 22);
+  await sleep(2000);
+  // 4-6s: show stage bands label
+  setDemoText('Four circuit stages emerge at consistent relative depths — across every architecture');
+  camera.position.set(0, 4, 22);
+  await sleep(2400);
+  // 6-8s: zoom entity zone
+  setDemoText('At ~50% depth: entity commitment. The model decides what it\'s talking about.');
+  camera.position.set(3, 0, 14);
+  controls.target.set(0, 0, 0);
+  await sleep(2400);
+  // 8-10s: compare mode reveal
+  setDemoText('');
+  await sleep(300);
+  showCompare('qwen3-8b', 'bonsai-1bit');
+  camera.position.set(0, 2, 36);
+  await sleep(400);
+  setDemoText('Until the model is 1-bit. The circuit dissolves entirely.');
+  await sleep(2200);
+  // 10-12s: hold + tagline
+  setDemoText('Universal structure. Measurable. Editable.');
+  await sleep(2500);
+  // done
+  setDemoText('');
+  controls.enabled = true;
+  demoRunning = false;
+  document.getElementById('demo-btn').textContent = '▶ Demo';
+}
+// ── Raycasting ────────────────────────────────────────────────
+const raycaster = new THREE.Raycaster();
+const mouse = new THREE.Vector2();
+renderer.domElement.addEventListener('click', e => {
+  if (demoRunning) return;
+  mouse.x = (e.clientX / innerWidth) * 2 - 1;
+  mouse.y = -(e.clientY / innerHeight) * 2 + 1;
+  raycaster.setFromCamera(mouse, camera);
+  let bestHit = null, bestMesh = null, bestMeta = null, bestGroup = null;
+  for (const key of activeKeys) {
+    const g = groups[key];
+    if (!g) continue;
+    const hits = raycaster.intersectObject(g.instanceMesh);
+    if (hits.length > 0 && (!bestHit || hits[0].distance < bestHit.distance)) {
+      bestHit = hits[0]; bestMesh = g.instanceMesh; bestMeta = g.featureMeta; bestGroup = g.group;
+    }
+  }
+  if (bestHit) {
+    traceWalk(bestHit.instanceId, bestMesh, bestMeta, bestGroup);
+    showTooltip(e.clientX, e.clientY, bestMeta[bestHit.instanceId]);
+  } else {
+    clearWalk(); tooltip.style.display = 'none';
+  }
+});
+renderer.domElement.addEventListener('mousemove', () => { tooltip.style.display = 'none'; });
+// ── Entity search ──────────────────────────────────────────────
+// Two-tier search backend:
+//   1. REAL: `search_index.json` per model from `notebooks/build_search_index.py` Modal pipeline —
+//      ~5000 whole-word tokens, each mapped to top-8 (layer, feature, score) tuples from probing
+//      the actual transformer's gate*up activations projected onto the vindex SVD basis.
+//      Loaded lazily per model; cached in `realIndices`. Files served from /search-indexes/{slug}.json.
+//   2. DEMO fallback (below): hand-curated handful of tokens (Paris→capital from the Gate-3 result,
+//      plus illustrative matches) — used when the real index hasn't been built+deployed for a model.
+// Map viewer model keys to slugs that match build_search_index.py's slug() output.
+const MODEL_KEY_TO_SLUG = {
+  'gemma-4-e2b':   'google-gemma-4-e2b-it',
+  'qwen3-0.6b':    'qwen-qwen3-0-6b',
+  'qwen3-8b':      'qwen-qwen3-8b',
+  'qwen3.6-35b':   'qwen-qwen3-6-35b-a3b',
+  'llama-3.1-8b':  'meta-llama-llama-3-1-8b-instruct',
+  'gpt-oss-120b':  'openai-gpt-oss-120b',
+  'ministral-3b':  'mistralai-ministral-3-3b-instruct-2512',
+  'medgemma-4b':   'google-medgemma-1-5-4b-it',
+  'bonsai-1bit':   'prism-ml-bonsai-8b-unpacked',
+};
+const realIndices = new Map();   // slug → { tokens, matches } loaded JSON
+const realIndexAttempts = new Set();  // slugs already tried (don't refetch on failure)
+async function loadRealSearchIndex(modelKey) {
+  const slug = MODEL_KEY_TO_SLUG[modelKey];
+  if (!slug || realIndices.has(slug) || realIndexAttempts.has(slug)) return;
+  realIndexAttempts.add(slug);
+  try {
+    const url = `/search-indexes/${slug}.json`;
+    const res = await fetch(url);
+    if (!res.ok) {
+      console.info(`[search] no real index for ${modelKey} — using demo dataset`);
+      return;
+    }
+    const idx = await res.json();
+    realIndices.set(slug, idx);
+    console.info(`[search] loaded real index: ${idx.n_tokens} tokens for ${modelKey}`);
+    // Re-run current query against the new index
+    const q = document.getElementById('search-input').value.trim();
+    if (q) highlightSearch(q);
+  } catch (err) {
+    console.warn(`[search] fetch failed for ${modelKey}:`, err);
+  }
+}
+// Look up matches for a query in the real index. Strategy:
+//   1. exact token match → return its top-K (layer, feature, score)
+//   2. else: substring match across all tokens, collect from up to 5 closest
+//   3. returns array of { layerNorm, fi, label } compatible with demo format
+function lookupReal(modelKey, query) {
+  const slug = MODEL_KEY_TO_SLUG[modelKey];
+  const idx = realIndices.get(slug);
+  if (!idx) return null;
+  const q = query.toLowerCase().trim();
+  const hits = [];
+  // Exact match first
+  if (idx.matches[q]) {
+    for (const m of idx.matches[q]) {
+      hits.push({
+        layerNorm: m.layer / (idx.num_layers - 1),
+        fi: m.feature,
+        label: `score=${m.score} (real probe)`,
+      });
+    }
+    return hits;
+  }
+  // Substring match — collect from up to 3 closest tokens
+  const subMatches = idx.tokens.filter(t => t.includes(q) || q.includes(t)).slice(0, 3);
+  for (const tok of subMatches) {
+    for (const m of (idx.matches[tok] || []).slice(0, 4)) {  // top-4 per substring hit
+      hits.push({
+        layerNorm: m.layer / (idx.num_layers - 1),
+        fi: m.feature,
+        label: `${tok} L${m.layer}/F${m.feature} score=${m.score}`,
+      });
+    }
+  }
+  return hits.length > 0 ? hits : null;
+}
+// Demo dataset — small handcrafted index used when real index isn't deployed yet.
+// `layerNorm` is a fraction of total depth (0.0 = first layer, 1.0 = last). At runtime each
+// match is mapped to the model's actual layer range (round(layerNorm * (L-1))).
+// The Paris→capital match is sourced from the LarQL Gate-3 result on Gemma 4 E2B (feature
+// 11179 at layer 27 of 36 → normalized depth 27/35 ≈ 0.77). Other matches are illustrative:
+// they sit in plausible layer bands (entity zone 0.45–0.55, prediction zone 0.90+) and use
+// representative feature indices visible in the viewer's 128-feature spiral.
+const SEARCH_INDEX = {
+  'gemma-4-e2b': {
+    'paris':    [{ layerNorm: 0.77, fi: 11, label: 'L27/F11179 — capital-of-X concept (Gate-3)' },
+                 { layerNorm: 0.62, fi:  8, label: 'Eiffel/landmark co-activation' }],
+    'capital':  [{ layerNorm: 0.77, fi: 11, label: 'capital-of-X concept' },
+                 { layerNorm: 0.40, fi: 19, label: 'country routing' }],
+    'eiffel':   [{ layerNorm: 0.62, fi:  8 }],
+    'france':   [{ layerNorm: 0.40, fi: 19 }, { layerNorm: 0.55, fi: 22 }],
+    'python':   [{ layerNorm: 0.50, fi: 27, label: 'code-block routing' },
+                 { layerNorm: 0.92, fi:  3, label: 'def/class token preference' }],
+    'code':     [{ layerNorm: 0.50, fi: 27 }, { layerNorm: 0.30, fi: 33 }],
+    'doctor':   [{ layerNorm: 0.50, fi: 41, label: 'medical entity cluster' }],
+    'einstein': [{ layerNorm: 0.50, fi: 47, label: 'physicist entity' }],
+  },
+  'qwen3-8b': {
+    'paris':    [{ layerNorm: 0.55, fi: 11 }],
+    'capital':  [{ layerNorm: 0.55, fi: 11 }, { layerNorm: 0.42, fi: 19 }],
+    'python':   [{ layerNorm: 0.50, fi: 27 }],
+    'code':     [{ layerNorm: 0.50, fi: 27 }],
+  },
+  'llama-3.1-8b': {
+    'paris':    [{ layerNorm: 0.65, fi: 11 }],
+    'capital':  [{ layerNorm: 0.65, fi: 11 }],
+  },
+  // Bonsai/BitNet 1-bit models: dissolved — no concentrated features to highlight
+  'bonsai-1bit': { /* intentionally empty: dissolution means no feature locality */ },
+};
+let savedColors = null;          // Map<key, [Color, Color, ...]> — original instance colors per group
+let highlightedFeatureIdxs = []; // [{ key, globalIdx }]
+let searchHaloMeshes = [];       // glowing ring meshes added per match
+function _saveColorsIfNeeded() {
+  if (savedColors) return;
+  savedColors = new Map();
+  for (const key of activeKeys) {
+    const g = groups[key];
+    if (!g || !g.instanceMesh.instanceColor) continue;
+    const arr = g.instanceMesh.instanceColor.array;
+    savedColors.set(key, new Float32Array(arr));  // copy
+  }
+}
+function clearSearch() {
+  // Restore original colors
+  if (savedColors) {
+    for (const key of activeKeys) {
+      const g = groups[key];
+      const original = savedColors.get(key);
+      if (!g || !original) continue;
+      g.instanceMesh.instanceColor.array.set(original);
+      g.instanceMesh.instanceColor.needsUpdate = true;
+    }
+    savedColors = null;
+  }
+  // Reset scales of previously-highlighted features
+  for (const h of highlightedFeatureIdxs) {
+    const g = groups[h.key];
+    if (!g) continue;
+    const m = new THREE.Matrix4();
+    g.instanceMesh.getMatrixAt(h.globalIdx, m);
+    const pos = new THREE.Vector3(), q = new THREE.Quaternion(), s = new THREE.Vector3();
+    m.decompose(pos, q, s);
+    s.setScalar(1.0);
+    m.compose(pos, q, s);
+    g.instanceMesh.setMatrixAt(h.globalIdx, m);
+  }
+  for (const key of activeKeys) {
+    const g = groups[key];
+    if (g) g.instanceMesh.instanceMatrix.needsUpdate = true;
+  }
+  highlightedFeatureIdxs = [];
+  // Remove halo meshes
+  for (const mesh of searchHaloMeshes) {
+    scene.remove(mesh);
+    mesh.geometry.dispose();
+    mesh.material.dispose();
+  }
+  searchHaloMeshes = [];
+  document.getElementById('search-status').textContent = '';
+}
+function highlightSearch(query) {
+  const q = (query || '').trim().toLowerCase();
+  clearSearch();
+  if (!q) return;
+  let totalMatches = 0;
+  const matchInfos = [];
+  _saveColorsIfNeeded();
+  const HIGHLIGHT_COLOR = new THREE.Color(0xffffff);  // pure white pops against everything
+  const PULSE_SCALE = 6.0;
+  for (const key of activeKeys) {
+    // Try real index first, then fall back to demo dataset
+    let matches = lookupReal(key, q);
+    if (!matches) {
+      const idx = SEARCH_INDEX[key] || {};
+      matches = idx[q] || [];
+      if (matches.length === 0) {
+        for (const k of Object.keys(idx)) {
+          if (k.includes(q) || q.includes(k)) matches = matches.concat(idx[k]);
+        }
+      }
+    }
+    if (matches.length === 0) continue;
+    const g = groups[key];
+    if (!g) continue;
+    const L = VINDEX_DATA[key].layers;
+    const F = VINDEX_DATA[key].F;
+    const offsetX = g.group.position.x;
+    for (const m of matches) {
+      const li = Math.round(m.layerNorm * (L - 1));
+      const fi = Math.min(Math.max(m.fi, 0), F - 1);
+      const globalIdx = li * F + fi;
+      if (globalIdx < 0 || globalIdx >= g.featureMeta.length) continue;
+      g.instanceMesh.setColorAt(globalIdx, HIGHLIGHT_COLOR);
+      // Scale up
+      const matrix = new THREE.Matrix4();
+      g.instanceMesh.getMatrixAt(globalIdx, matrix);
+      const pos = new THREE.Vector3(), quat = new THREE.Quaternion(), scl = new THREE.Vector3();
+      matrix.decompose(pos, quat, scl);
+      scl.setScalar(PULSE_SCALE);
+      matrix.compose(pos, quat, scl);
+      g.instanceMesh.setMatrixAt(globalIdx, matrix);
+      highlightedFeatureIdxs.push({ key, globalIdx });
+      // Add a glowing halo ring at the feature's world position so it's findable at any zoom
+      const meta = g.featureMeta[globalIdx];
+      const haloGeo = new THREE.RingGeometry(0.55, 0.85, 32);
+      const haloMat = new THREE.MeshBasicMaterial({
+        color: 0xffe060, transparent: true, opacity: 0.92, side: THREE.DoubleSide, depthWrite: false,
+      });
+      const halo = new THREE.Mesh(haloGeo, haloMat);
+      halo.position.set(meta.x + offsetX, meta.y, meta.z);
+      halo.lookAt(camera.position);
+      halo.userData.isSearchHalo = true;
+      halo.userData.featurePos = halo.position.clone();
+      scene.add(halo);
+      searchHaloMeshes.push(halo);
+      matchInfos.push(`${key} L${li}/F${fi}${m.label ? ` (${m.label.slice(0, 40)})` : ''}`);
+      totalMatches++;
+    }
+    g.instanceMesh.instanceColor.needsUpdate = true;
+    g.instanceMesh.instanceMatrix.needsUpdate = true;
+  }
+  const status = document.getElementById('search-status');
+  if (totalMatches === 0) {
+    status.textContent = `no matches for "${q}"`;
+  } else {
+    status.textContent = `${totalMatches} match${totalMatches === 1 ? '' : 'es'}: ${matchInfos.slice(0, 3).join(', ')}${matchInfos.length > 3 ? '…' : ''}`;
+  }
+}
+// ── UI wiring ─────────────────────────────────────────────────
+const modelSelect = document.getElementById('model-select');
+const compareBtn  = document.getElementById('compare-btn');
+const demoBtn     = document.getElementById('demo-btn');
+const viewBtn     = document.getElementById('view-btn');
+const searchInput = document.getElementById('search-input');
+const tier2Btn    = document.getElementById('tier2-btn');
+let _searchTimer = null;
+searchInput.addEventListener('input', e => {
+  clearTimeout(_searchTimer);
+  const v = e.target.value;
+  _searchTimer = setTimeout(() => highlightSearch(v), 180);
+});
+searchInput.addEventListener('keydown', e => {
+  if (e.key === 'Escape') { searchInput.value = ''; clearSearch(); }
+});
+modelSelect.addEventListener('change', () => {
+  if (demoRunning) return;
+  // Drop stale highlight state — the InstancedMesh references are about to be disposed
+  savedColors = null;
+  highlightedFeatureIdxs = [];
+  compareMode ? showCompare(modelSelect.value, 'bonsai-1bit') : showSingle(modelSelect.value);
+  // Lazy-load the real search index for this model (no-op if already loaded or unavailable)
+  loadRealSearchIndex(modelSelect.value);
+  // Re-apply current search query against the new model
+  if (searchInput.value.trim()) {
+    setTimeout(() => highlightSearch(searchInput.value), 100);
+  } else {
+    document.getElementById('search-status').textContent = '';
+  }
+});
+compareBtn.addEventListener('click', () => {
+  if (demoRunning) return;
+  compareMode ? showSingle(modelSelect.value) : showCompare(modelSelect.value, 'bonsai-1bit');
+});
+demoBtn.addEventListener('click', () => {
+  if (demoRunning) {
+    demoRunning = false; controls.enabled = true;
+    demoBtn.textContent = '▶ Demo'; setDemoText('');
+    showSingle(modelSelect.value);
+  } else { runDemo(); }
+});
+viewBtn.addEventListener('click', () => {
+  if (demoRunning) return;
+  viewMode = (viewMode === 'cylinder') ? 'flat' : 'cylinder';
+  viewBtn.textContent = (viewMode === 'flat') ? '🌀 3D View' : '🔌 2D Circuit';
+  // Reposition camera + reconfigure controls for the new view
+  if (viewMode === 'flat') {
+    camera.position.set(0, 0, 28);
+    controls.target.set(0, 0, 0);
+    // Lock the orbit to a near-flat plane (allow only small tilt + pan + zoom)
+    controls.minPolarAngle = Math.PI / 2 - 0.05;
+    controls.maxPolarAngle = Math.PI / 2 + 0.05;
+    controls.enableRotate = false;
+  } else {
+    camera.position.set(0, 4, 26);
+    controls.target.set(0, 0, 0);
+    controls.minPolarAngle = 0;
+    controls.maxPolarAngle = Math.PI;
+    controls.enableRotate = true;
+  }
+  controls.update();
+  // Rebuild active groups with new layout
+  if (compareMode) {
+    showCompare(modelSelect.value, 'bonsai-1bit');
+  } else {
+    showSingle(modelSelect.value);
+  }
+});
+tier2Btn.addEventListener('click', () => {
+  tier2Open = !tier2Open;
+  document.getElementById('tier2-metrics').className = tier2Open ? 'open' : '';
+  tier2Btn.textContent = tier2Open ? 'METRICS ▴' : 'METRICS ▾';
+});
+// ── Resize ────────────────────────────────────────────────────
+window.addEventListener('resize', () => {
+  camera.aspect = innerWidth / innerHeight;
+  camera.updateProjectionMatrix();
+  renderer.setSize(innerWidth, innerHeight);
+  composer.setSize(innerWidth, innerHeight);
+  bloom.resolution.set(innerWidth, innerHeight);
+});
+// ── Animate ───────────────────────────────────────────────────
+let t = 0;
+function animate() {
+  requestAnimationFrame(animate);
+  t += 0.003;
+  if (!demoRunning) {
+    for (const key of activeKeys) {
+      const g = groups[key];
+      if (g) g.group.rotation.y = Math.sin(t * 0.18) * 0.05;
+    }
+  }
+  // Modulate bloom for "alive" feel
+  bloom.strength = 0.7 + Math.sin(t * 0.6) * 0.08;
+  // Billboard search halos to face the camera + pulse opacity
+  if (searchHaloMeshes.length > 0) {
+    const pulse = 0.65 + Math.abs(Math.sin(t * 4.0)) * 0.32;
+    for (const halo of searchHaloMeshes) {
+      halo.lookAt(camera.position);
+      halo.material.opacity = pulse;
+    }
+  }
+  controls.update();
+  composer.render();
+}
+// ── Init ──────────────────────────────────────────────────────
+showSingle('qwen3-8b');
+animate();
+// Try to fetch the real search index for the default model (silent if 404)
+loadRealSearchIndex('qwen3-8b');
+// URL param handling: ?view=flat → 2D circuit, ?autoplay → demo, ?model=… → switch model, ?q=paris → search
+const _params = new URLSearchParams(location.search);
+const _modelParam = _params.get('model');
+if (_modelParam && VINDEX_DATA[_modelParam]) {
+  modelSelect.value = _modelParam;
+  modelSelect.dispatchEvent(new Event('change'));
+}
+if (_params.get('view') === 'flat') {
+  viewBtn.click();
+}
+if (_params.has('autoplay')) {
+  setTimeout(runDemo, 1200);
+}
+const _q = _params.get('q');
+if (_q) {
+  searchInput.value = _q;
+  setTimeout(() => highlightSearch(_q), 1100);  // wait for buildGroup + loadRealSearchIndex
+}
+</script>
+</body>
+</html>

search-indexes/google-gemma-4-e2b-it.bge.f16.bin ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:667c3d1d6be119733475935b18f41e61fbc27ce8ebab81819f56c3a0ad5e45bf
+size 3840000

search-indexes/google-gemma-4-e2b-it.json ADDED Viewed

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

search-indexes/google-gemma-4-e2b-it.meta.json ADDED Viewed

	@@ -0,0 +1,7 @@

+{
+  "model_id": "google/gemma-4-E2B-it",
+  "n_tokens": 5000,
+  "top_k": 8,
+  "has_bge": true,
+  "build_unix_ts": 1776826346
+}

vindex-hero-bg.gif ADDED Viewed

Git LFS Details

SHA256: 9f961aac55d9a0d20926c21f6c79f1ed32f07ed0ccbb50107558032f3c21ca20
Pointer size: 131 Bytes
Size of remote file: 856 kB