Land Claude Design 3D convergence valley + polished UI pass

Replaces the SAE debug placeholder with ConvergenceValley.jsx (3D Plotly surface over training_curve metrics, switchable EV / dead% / recon / L0 via tweaks panel). Polished pass across components and styles.

app.jsx

@@ -48,7 +48,8 @@ const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
   "warmth": 1.0,
   "showIngestCard": true,
   "showSQL": true,
-  "atlasDensity": "comfortable"
+  "atlasDensity": "comfortable",
+  "saeMetric": "ev"
 }/*EDITMODE-END*/;
 
 function applyWarmth(w) {
@@ -254,6 +255,11 @@ function App({ onShowLanding }) {
           </div>
         </div>
 
+        <ConvergenceValley
+          metric={t.saeMetric || 'ev'}
+          onMetricChange={v => setTweak('saeMetric', v)}
+        />
+
         <div className="section-grid">
           <div className="card" data-screen-label="layer-deepdive">
             <LayerDeepDive
@@ -271,10 +277,6 @@ function App({ onShowLanding }) {
               <SQLBox />
             </div>
           )}
-
-          <div className="card" data-screen-label="sae-debug">
-            <SAEDebugPanel />
-          </div>
         </div>
 
         <Footer />
@@ -305,6 +307,13 @@ function App({ onShowLanding }) {
           value={t.showSQL}
           onChange={v => setTweak('showSQL', v)}
         />
+        <TweakSection label="Convergence valley" />
+        <TweakRadio
+          label="Surface metric"
+          value={t.saeMetric || 'ev'}
+          options={['ev', 'dead_pct', 'recon_loss', 'mean_l0']}
+          onChange={v => setTweak('saeMetric', v)}
+        />
       </TweaksPanel>
     </div>
   );

components/ConvergenceValley.jsx

@@ -0,0 +1,612 @@
+// Convergence Valley — a 3D pastel terrain of every SAE's training trajectory.
+// x = layer · y = training progress · z = chosen metric (default: EV).
+//
+// Drape on top: dashed scatter3d ribbons for the *stable* L2 / L3 runs we
+// chose NOT to use, so the L3 stable failure reads as a visible canyon below
+// the converged rolling surface. Hover, orbit (Plotly), scrub through training
+// time, swap the driving metric.
+
+const {
+  useState:  useStateCV,
+  useEffect: useEffectCV,
+  useRef:    useRefCV,
+  useMemo:   useMemoCV,
+} = React;
+
+const CV_METRICS = {
+  ev: {
+    label: 'EV',
+    sub:   'explained variance',
+    fmt:   v => (v == null || !isFinite(v)) ? '—' : v.toFixed(3),
+    zRange: [0, 1.05],
+    rising: true,
+    ramp:  'dawn',
+    story: 'rises as the SAE learns to reconstruct the layer',
+  },
+  dead_pct: {
+    label: 'dead %',
+    sub:   'features that never fire',
+    fmt:   v => (v == null || !isFinite(v)) ? '—' : v.toFixed(1) + '%',
+    zRange: null,
+    rising: false,
+    ramp:  'rose',
+    story: 'over-sparsification — rising while EV plateaus is bad',
+  },
+  recon_loss: {
+    label: 'recon loss',
+    sub:   'reconstruction error',
+    fmt:   v => (v == null || !isFinite(v)) ? '—' : v.toFixed(4),
+    zRange: null,
+    rising: false,
+    ramp:  'sage',
+    story: 'reconstruction error — drops as training progresses',
+  },
+  mean_l0: {
+    label: 'mean L0',
+    sub:   'active features / token',
+    fmt:   v => (v == null || !isFinite(v)) ? '—' : Math.round(v).toLocaleString(),
+    zRange: null,
+    rising: false,
+    ramp:  'lavender',
+    story: 'sparsity — how many features fire per token',
+  },
+};
+
+// Soft, watercolor-grade ramps — all land on cream so the surface feels lit.
+const CV_RAMPS = {
+  dawn: [
+    [0.00, '#eee6f3'],
+    [0.18, '#d8c4dc'],
+    [0.36, '#c9a8c2'],
+    [0.54, '#d8a3b2'],
+    [0.72, '#e8aea0'],
+    [0.88, '#f0c890'],
+    [1.00, '#f4dfa0'],
+  ],
+  rose: [
+    [0.00, '#f6ecdf'],
+    [0.22, '#f5d6c6'],
+    [0.44, '#eeb6b9'],
+    [0.66, '#dba8b0'],
+    [0.85, '#cf8d96'],
+    [1.00, '#b87280'],
+  ],
+  sage: [
+    [0.00, '#f2eedb'],
+    [0.22, '#dde2c2'],
+    [0.44, '#bcd4ad'],
+    [0.66, '#9cc59a'],
+    [0.85, '#7da272'],
+    [1.00, '#5b8460'],
+  ],
+  lavender: [
+    [0.00, '#f1eaf4'],
+    [0.22, '#dcc8e4'],
+    [0.44, '#c4a8d8'],
+    [0.66, '#aa90c8'],
+    [0.85, '#9a87cf'],
+    [1.00, '#7d6cb0'],
+  ],
+};
+
+const CV_LAYER_LABELS = ['L0','L1','L2','L3','L4','L5','L6','L7','L8'];
+const CV_N_PROG = 56;     // resampled training-progress steps per layer
+const CV_HOST   = 'https://huggingface.co/datasets';
+const CV_GHOST_REPO = 'juiceb0xc0de/gemma-4-e2b-saes'; // the stable run (rolling lives elsewhere)
+const CV_GHOST_LAYERS = [2, 3];                        // these are the swapped-out ones
+
+// Smooth, monotonic resample of a per-checkpoint curve onto a uniform grid.
+function cvResample(arr, N) {
+  if (!arr || arr.length === 0) return null;
+  if (arr.length === 1) return Array(N).fill(arr[0]);
+  const out = new Array(N);
+  for (let i = 0; i < N; i++) {
+    const t   = i / (N - 1);
+    const pos = t * (arr.length - 1);
+    const a   = Math.floor(pos);
+    const b   = Math.min(arr.length - 1, a + 1);
+    const f   = pos - a;
+    out[i] = arr[a] * (1 - f) + arr[b] * f;
+  }
+  return out;
+}
+
+async function cvFetchGhost(layer) {
+  const suffix = (window.AtlasData?.SAE?._manifest?.feature_suffix) || 's0';
+  const url = `${CV_HOST}/${CV_GHOST_REPO}/resolve/main/layer_${String(layer).padStart(2,'0')}_${suffix}/meta.json`;
+  try {
+    const r = await fetch(url);
+    if (!r.ok) return null;
+    return await r.json();
+  } catch { return null; }
+}
+
+// ───────────────────────────── main component ─────────────────────────────
+
+function ConvergenceValley({ metric, onMetricChange }) {
+  const [tick,      setTick]      = useStateCV(0);          // re-render on sae-data-ready
+  const [progress,  setProgress]  = useStateCV(1);          // 0..1 of training
+  const [playing,   setPlaying]   = useStateCV(false);
+  const [showGhost, setShowGhost] = useStateCV(true);
+  const [ghosts,    setGhosts]    = useStateCV({});         // {2: meta, 3: meta}
+  const [cameraTag, setCameraTag] = useStateCV(0);          // bump to apply preset
+  const plotRef = useRefCV(null);
+
+  // Pick up SAE data when it lands.
+  useEffectCV(() => {
+    const fn = () => setTick(t => t + 1);
+    window.addEventListener('sae-data-ready', fn);
+    return () => window.removeEventListener('sae-data-ready', fn);
+  }, []);
+
+  // Fetch the two stable-run ghosts (L2 + L3 from the saes repo) once.
+  useEffectCV(() => {
+    let dead = false;
+    (async () => {
+      const results = await Promise.all(CV_GHOST_LAYERS.map(cvFetchGhost));
+      if (dead) return;
+      const out = {};
+      CV_GHOST_LAYERS.forEach((L, i) => { if (results[i]) out[L] = results[i]; });
+      setGhosts(out);
+    })();
+    return () => { dead = true; };
+  }, []);
+
+  // Playback (scrub the surface forward through training time).
+  useEffectCV(() => {
+    if (!playing) return;
+    const DURATION = 6500;
+    const start = performance.now() - progress * DURATION;
+    let raf;
+    const step = (now) => {
+      const t = (now - start) / DURATION;
+      if (t >= 1) { setProgress(1); setPlaying(false); return; }
+      setProgress(t);
+      raf = requestAnimationFrame(step);
+    };
+    raf = requestAnimationFrame(step);
+    return () => cancelAnimationFrame(raf);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [playing]);
+
+  const sae    = window.AtlasData?.SAE;
+  const loaded = !!sae && Array.isArray(sae.layers) && sae.layers.length > 0;
+
+  // Build the full [9 × CV_N_PROG] grid for the chosen metric.
+  const grid = useMemoCV(() => {
+    if (!loaded) return null;
+    const z = [];
+    for (let L = 0; L < 9; L++) {
+      const rec   = sae.byLayer[L];
+      const curve = rec?.training_curve?.[metric];
+      const r     = cvResample(curve, CV_N_PROG);
+      z.push(r || Array(CV_N_PROG).fill(NaN));
+    }
+    return z;
+  }, [loaded, metric, tick]);
+
+  // Scrub: NaN out checkpoints past the playhead so the surface "grows".
+  const zScrubbed = useMemoCV(() => {
+    if (!grid) return null;
+    const cutoff = Math.max(1, Math.round(progress * CV_N_PROG));
+    return grid.map(row => row.map((v, i) => (i < cutoff ? v : NaN)));
+  }, [grid, progress]);
+
+  // Ghost (stable-run) trajectories for L2 and L3.
+  const ghostTraces = useMemoCV(() => {
+    if (!showGhost) return [];
+    const traces = [];
+    const cutoff = Math.max(1, Math.round(progress * CV_N_PROG));
+    for (const L of CV_GHOST_LAYERS) {
+      const g = ghosts[L];
+      const curve = g?.training_curve?.[metric];
+      const r = cvResample(curve, CV_N_PROG);
+      if (!r) continue;
+      const isFailed = (L === 3); // stable L3 == the famous failed run
+      const xs = [], ys = [], zs = [];
+      for (let i = 0; i < cutoff; i++) {
+        xs.push(L);
+        ys.push(i / (CV_N_PROG - 1));
+        zs.push(r[i]);
+      }
+      traces.push({
+        type: 'scatter3d', mode: 'lines',
+        x: xs, y: ys, z: zs,
+        line: {
+          color: isFailed ? '#cf8d96' : '#9a87cf',
+          width: isFailed ? 7 : 5,
+          dash: 'dash',
+        },
+        opacity: 0.95,
+        name: `L${L} · stable run${isFailed ? ' · failed' : ''}`,
+        hovertemplate:
+          `<b>L${L} · stable run${isFailed ? ' · failed' : ''}</b><br>` +
+          `progress %{y:.0%}<br>` +
+          `${CV_METRICS[metric].label}: %{z:.4f}<extra></extra>`,
+        showlegend: false,
+      });
+    }
+    return traces;
+  }, [ghosts, metric, progress, showGhost]);
+
+  // Z-axis annotations: a small "failed run" callout pinned to L3 stable.
+  const sceneAnnotations = useMemoCV(() => {
+    const out = [];
+    if (showGhost && ghosts[3]?.final_metrics) {
+      const z = ghosts[3].final_metrics[metric];
+      if (z != null && isFinite(z) && progress > 0.6) {
+        out.push({
+          x: 3, y: 0.98, z,
+          text: 'L3 stable · failed run',
+          font: { family: 'Inter Tight, sans-serif', size: 10.5, color: '#a25462' },
+          bgcolor: 'rgba(255,247,243,0.92)',
+          bordercolor: '#cf8d96',
+          borderwidth: 0.8,
+          borderpad: 5,
+          arrowcolor: '#cf8d96',
+          arrowwidth: 1,
+          arrowsize: 0.9,
+          ax: 40, ay: -34,
+        });
+      }
+    }
+    return out;
+  }, [ghosts, metric, progress, showGhost]);
+
+  // Render to Plotly whenever inputs change.
+  useEffectCV(() => {
+    if (!plotRef.current || !zScrubbed || typeof Plotly === 'undefined') return;
+    const m    = CV_METRICS[metric];
+    const ramp = CV_RAMPS[m.ramp];
+
+    // Plotly surface wants z as [y][x].
+    const ys = Array.from({length: CV_N_PROG}, (_, i) => i / (CV_N_PROG - 1));
+    const zT = ys.map((_, i) => zScrubbed.map(row => row[i]));
+
+    const surface = {
+      type: 'surface',
+      x: [0,1,2,3,4,5,6,7,8],
+      y: ys,
+      z: zT,
+      colorscale: ramp,
+      cmin: m.zRange ? m.zRange[0] : undefined,
+      cmax: m.zRange ? m.zRange[1] : undefined,
+      showscale: false,
+      opacity: 0.97,
+      contours: {
+        z: {
+          show: true,
+          usecolormap: false,
+          color: 'rgba(74,58,68,0.18)',
+          width: 1,
+          highlight: true,
+          highlightcolor: '#cf8d96',
+          highlightwidth: 2,
+          project: { z: false },
+        },
+      },
+      lighting: {
+        ambient:  0.78,
+        diffuse:  0.50,
+        specular: 0.05,
+        roughness: 0.92,
+        fresnel: 0.10,
+      },
+      lightposition: { x: 4, y: -1, z: 4 },
+      hoverlabel: {
+        bgcolor: 'rgba(255,247,235,0.95)',
+        bordercolor: '#cf8d96',
+        font: { family: 'Inter Tight, sans-serif', color: '#3a2a30', size: 12 },
+      },
+      hovertemplate:
+        '<b>L%{x}</b> · progress %{y:.0%}<br>' +
+        m.label + ': %{z:.4f}<extra></extra>',
+    };
+
+    const traces = [surface, ...ghostTraces];
+
+    const axisCommon = {
+      gridcolor:     'rgba(74,58,68,0.10)',
+      zerolinecolor: 'rgba(74,58,68,0.22)',
+      backgroundcolor: 'rgba(255,255,255,0)',
+      showbackground: true,
+      color: '#84686c',
+      titlefont: { family: 'Inter Tight, sans-serif', size: 11, color: '#84686c' },
+      tickfont:  { family: 'JetBrains Mono, monospace', size: 10, color: '#84686c' },
+    };
+
+    const layout = {
+      paper_bgcolor: 'rgba(0,0,0,0)',
+      plot_bgcolor:  'rgba(0,0,0,0)',
+      margin: { l: 0, r: 0, t: 0, b: 0 },
+      showlegend: false,
+      hovermode: 'closest',
+      scene: {
+        xaxis: {
+          ...axisCommon,
+          title: { text: 'layer' },
+          tickvals: [0,1,2,3,4,5,6,7,8],
+          ticktext: CV_LAYER_LABELS,
+        },
+        yaxis: {
+          ...axisCommon,
+          title: { text: 'training →' },
+          tickvals: [0, 0.25, 0.5, 0.75, 1.0],
+          ticktext: ['start', '¼', '½', '¾', 'final'],
+        },
+        zaxis: {
+          ...axisCommon,
+          title: { text: m.label },
+          range: m.zRange || undefined,
+        },
+        camera: { eye: { x: 1.55, y: -1.65, z: 0.95 }, up: { x: 0, y: 0, z: 1 } },
+        aspectratio: { x: 1.5, y: 1.05, z: 0.7 },
+        annotations: sceneAnnotations,
+      },
+    };
+
+    const config = { displayModeBar: false, responsive: true, doubleClick: 'reset' };
+
+    // Only reset the camera on metric change / preset bump — not every frame
+    // of the scrub, which would yank the user out of an orbit.
+    const cameraKey = `${metric}::${cameraTag}`;
+    const last = plotRef.current.__cvCameraKey;
+    if (last !== cameraKey) {
+      plotRef.current.__cvCameraKey = cameraKey;
+      Plotly.react(plotRef.current, traces, layout, config);
+    } else {
+      // Preserve current camera.
+      const cur = plotRef.current.layout?.scene?.camera;
+      if (cur) layout.scene.camera = cur;
+      Plotly.react(plotRef.current, traces, layout, config);
+    }
+  }, [zScrubbed, ghostTraces, metric, sceneAnnotations, cameraTag]);
+
+  // Handle window resizes.
+  useEffectCV(() => {
+    const onResize = () => {
+      if (plotRef.current && typeof Plotly !== 'undefined') {
+        Plotly.Plots.resize(plotRef.current);
+      }
+    };
+    window.addEventListener('resize', onResize);
+    return () => window.removeEventListener('resize', onResize);
+  }, []);
+
+  // Polled live-text status while loading.
+  const [loaderState, setLoaderState] = useStateCV(window.SAELoader?.state || {});
+  useEffectCV(() => {
+    if (!window.SAELoader) return;
+    return window.SAELoader.subscribe(setLoaderState);
+  }, []);
+
+  const m = CV_METRICS[metric];
+  const ramp = CV_RAMPS[m.ramp];
+  const swatchCSS = `linear-gradient(90deg, ${ramp.map(s => s[1]).join(', ')})`;
+
+  return (
+    <div className="cv card" data-screen-label="convergence-valley">
+      <div className="cv-head">
+        <div className="cv-head-left">
+          <div className="cv-eyebrow">SAE training trajectory</div>
+          <div className="cv-title">
+            Convergence <em>valley</em>
+          </div>
+          <div className="cv-sub">
+            {loaded ? (
+              <>per-checkpoint progression across <b>{sae.layers.length}</b> sparse autoencoders ·
+              {' '}<span className="cv-sub-quiet">{m.story}</span></>
+            ) : (
+              <>fetching {loaderState.count ?? 0} / {loaderState.expected ?? 9} layers from HuggingFace…</>
+            )}
+          </div>
+        </div>
+        <CVMetricPicker value={metric} onChange={onMetricChange} />
+      </div>
+
+      <div className="cv-body">
+        <div className="cv-stage">
+          <div ref={plotRef} className="cv-plot" />
+          {!loaded && <div className="cv-loading-veil">
+            <div className="cv-loading-pulse" />
+            <div className="cv-loading-msg">
+              {loaderState.status === 'error'
+                ? <>couldn't reach the SAE dataset</>
+                : <>terrain materializing… <b>{loaderState.count ?? 0}</b> / <b>{loaderState.expected ?? 9}</b> layers</>}
+            </div>
+          </div>}
+          <div className="cv-stage-foot">
+            <div className="cv-legend">
+              <span className="cv-legend-label">low</span>
+              <span className="cv-legend-swatch" style={{ background: swatchCSS }} />
+              <span className="cv-legend-label">high</span>
+              <span className="cv-legend-metric">· {m.label}</span>
+            </div>
+            <div className="cv-hint">drag to orbit · scroll to zoom · double-click resets</div>
+          </div>
+        </div>
+
+        <CVSidebar
+          sae={sae}
+          ghosts={ghosts}
+          metric={metric}
+          showGhost={showGhost}
+          onToggleGhost={setShowGhost}
+          onResetCamera={() => setCameraTag(c => c + 1)}
+        />
+      </div>
+
+      <CVScrubber
+        progress={progress}
+        playing={playing}
+        onScrub={v => { setPlaying(false); setProgress(v); }}
+        onTogglePlay={() => setPlaying(p => !p)}
+        onReset={() => { setPlaying(false); setProgress(0); }}
+        cutoffPct={Math.round(progress * 100)}
+      />
+    </div>
+  );
+}
+
+// ───────────────────────────── pieces ─────────────────────────────
+
+function CVMetricPicker({ value, onChange }) {
+  const keys = ['ev', 'dead_pct', 'recon_loss', 'mean_l0'];
+  return (
+    <div className="cv-metric-pick" role="tablist" aria-label="surface metric">
+      {keys.map(k => (
+        <button
+          key={k}
+          role="tab"
+          aria-selected={value === k}
+          className={'cv-metric-chip ' + (value === k ? 'is-active' : '')}
+          onClick={() => onChange(k)}
+        >
+          <span className="cv-metric-label">{CV_METRICS[k].label}</span>
+          <span className="cv-metric-sub">{CV_METRICS[k].sub}</span>
+        </button>
+      ))}
+    </div>
+  );
+}
+
+function CVSidebar({ sae, ghosts, metric, showGhost, onToggleGhost, onResetCamera }) {
+  const m = CV_METRICS[metric];
+  const layers = sae?.layers || [];
+  const ghostL3 = ghosts?.[3]?.final_metrics;
+  const ghostL2 = ghosts?.[2]?.final_metrics;
+
+  return (
+    <div className="cv-side">
+      <div className="cv-side-actions">
+        <label className="cv-toggle">
+          <input
+            type="checkbox"
+            checked={showGhost}
+            onChange={e => onToggleGhost(e.target.checked)}
+          />
+          <span className="cv-toggle-dot" />
+          <span className="cv-toggle-label">stable-run ghost</span>
+        </label>
+        <button className="cv-camera-reset" onClick={onResetCamera} title="reset camera">
+          ↺ camera
+        </button>
+      </div>
+
+      <div className="cv-side-head">
+        <div className="cv-side-eyebrow">per-layer ledger</div>
+        <div className="cv-side-sub">final checkpoint · all metrics</div>
+      </div>
+
+      <div className="cv-table" role="table">
+        <div className="cv-row cv-row-head" role="row">
+          <span>layer</span>
+          <span>source</span>
+          <span className="cv-num">EV</span>
+          <span className="cv-num">L0</span>
+          <span className="cv-num">dead</span>
+          <span className="cv-num">recon</span>
+        </div>
+        {layers.length === 0
+          ? <div className="cv-row cv-row-empty">awaiting data…</div>
+          : layers.map(L => {
+              const rolling = (L.repo || '').endsWith('rolling');
+              const isHighlight = (metric === 'ev'         && L.layer === 3) ||
+                                  (metric === 'dead_pct'   && L.layer === 2);
+              return (
+                <div
+                  key={L.layer}
+                  className={'cv-row' + (rolling ? ' is-rolling' : '') + (isHighlight ? ' is-highlight' : '')}
+                  role="row"
+                >
+                  <span className="cv-layer">L{L.layer}</span>
+                  <span className="cv-src">
+                    <span className={'cv-src-dot ' + (rolling ? 'rolling' : 'stable')} />
+                    <span className="cv-src-name">{rolling ? 'rolling' : 'stable'}</span>
+                  </span>
+                  <span className="cv-num mono">{CV_METRICS.ev.fmt(L.ev)}</span>
+                  <span className="cv-num mono">{CV_METRICS.mean_l0.fmt(L.mean_l0)}</span>
+                  <span className="cv-num mono">{CV_METRICS.dead_pct.fmt(L.dead_pct)}</span>
+                  <span className="cv-num mono">{CV_METRICS.recon_loss.fmt(L.recon_loss)}</span>
+                </div>
+              );
+            })
+        }
+      </div>
+
+      {(ghostL2 || ghostL3) && (
+        <div className="cv-ghost-card">
+          <div className="cv-ghost-eyebrow">why two of these are different</div>
+          <div className="cv-ghost-rows">
+            {ghostL2 && (
+              <div className="cv-ghost-row">
+                <span className="cv-ghost-layer">L2 · stable</span>
+                <span className="cv-ghost-stats mono">
+                  EV {CV_METRICS.ev.fmt(ghostL2.ev)} · dead {CV_METRICS.dead_pct.fmt(ghostL2.dead_pct)}
+                </span>
+                <span className="cv-ghost-tag tone-amber">over-sparsified</span>
+              </div>
+            )}
+            {ghostL3 && (
+              <div className="cv-ghost-row">
+                <span className="cv-ghost-layer">L3 · stable</span>
+                <span className="cv-ghost-stats mono">
+                  EV {CV_METRICS.ev.fmt(ghostL3.ev)} · L0 {CV_METRICS.mean_l0.fmt(ghostL3.mean_l0)}
+                </span>
+                <span className="cv-ghost-tag tone-rose">never converged</span>
+              </div>
+            )}
+          </div>
+          <div className="cv-ghost-note">
+            L2 &amp; L3 swap to the <b>rolling</b> run on the surface above. The dashed lines mark where the
+            <b> stable</b> run actually landed — the L3 dip is the failed run.
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function CVScrubber({ progress, playing, onScrub, onTogglePlay, onReset, cutoffPct }) {
+  return (
+    <div className="cv-scrub">
+      <button
+        className={'cv-play ' + (playing ? 'is-playing' : '')}
+        onClick={onTogglePlay}
+        aria-label={playing ? 'pause' : 'play'}
+      >
+        <span className="cv-play-glyph">{playing ? '❚❚' : '▶'}</span>
+      </button>
+      <div className="cv-range-wrap">
+        <div className="cv-range-track">
+          <div className="cv-range-fill" style={{ width: cutoffPct + '%' }} />
+        </div>
+        <input
+          type="range"
+          min={0}
+          max={1000}
+          step={1}
+          value={Math.round(progress * 1000)}
+          onChange={e => onScrub(Number(e.target.value) / 1000)}
+          className="cv-range"
+          aria-label="training progress"
+        />
+        <div className="cv-range-ticks">
+          <span>start</span>
+          <span>¼</span>
+          <span>½</span>
+          <span>¾</span>
+          <span>final</span>
+        </div>
+      </div>
+      <div className="cv-scrub-readout">
+        <span className="cv-scrub-num">{cutoffPct}%</span>
+        <span className="cv-scrub-label">of training</span>
+      </div>
+      <button className="cv-scrub-reset" onClick={onReset}>↺ reset</button>
+    </div>
+  );
+}
+
+window.ConvergenceValley = ConvergenceValley;
+window.CV_METRICS = CV_METRICS;

components/DataSource.jsx

@@ -1,21 +1,13 @@
 // Live data-source pill — shows status + per-config progress bars.
 
-const { useState: useStateDS, useEffect: useEffectDS, useRef: useRefDS } = React;
+const { useState: useStateDS, useEffect: useEffectDS } = React;
 
 function DataSource() {
   const [s, setS] = useStateDS(window.AtlasLoader.state);
   const [expanded, setExpanded] = useStateDS(false);
-  const [panelPos, setPanelPos] = useStateDS({ top: 0, right: 0 });
-  const pillRef = useRefDS(null);
 
   useEffectDS(() => window.AtlasLoader.subscribe(setS), []);
 
-  useEffectDS(() => {
-    if (!expanded || !pillRef.current) return;
-    const r = pillRef.current.getBoundingClientRect();
-    setPanelPos({ top: r.bottom + 10, right: window.innerWidth - r.right });
-  }, [expanded]);
-
   const dot = {
     idle:    { c: 'var(--cream-dim)', label: 'idle' },
     loading: { c: 'var(--gold)',      label: 'streaming' },
@@ -32,9 +24,15 @@ function DataSource() {
     pillLabel = 'live · juiceb0xc0de';
   }
 
-  const panel = expanded && ReactDOM.createPortal(
-    <div className="ds-panel card" data-screen-label="datasource"
-         style={{ position: 'fixed', top: panelPos.top, right: panelPos.right, zIndex: 9999 }}>
+  return (
+    <div className={"ds " + (expanded ? 'is-open' : '')}>
+      <button className="ds-pill" onClick={() => setExpanded(!expanded)}>
+        <span className="ds-led" style={{ background: dot.c, boxShadow: `0 0 10px ${dot.c}` }} />
+        <span className="ds-label">{pillLabel}</span>
+        <span className="ds-chev">{expanded ? '▾' : '▸'}</span>
+      </button>
+      {expanded && (
+        <div className="ds-panel card" data-screen-label="datasource">
           <div className="ds-head">
             <div>
               <div className="bf-eyebrow">connected to</div>
@@ -88,20 +86,10 @@ function DataSource() {
 
           <div className="ds-note muted">
             Real-time fetch of the published configs from the HuggingFace datasets-server.
-            <b> compliance_scores</b> (52 MB of raw per-feature vectors) is intentionally skipped to keep page load fast — query via SQL instead.
+            <b> bouncer_scores</b> (52 MB of raw per-feature vectors) is intentionally skipped to keep page load fast — query via SQL instead.
           </div>
-        </div>,
-    document.body
-  );
-
-  return (
-    <div className={"ds " + (expanded ? 'is-open' : '')}>
-      <button ref={pillRef} className="ds-pill" onClick={() => setExpanded(!expanded)}>
-        <span className="ds-led" style={{ background: dot.c, boxShadow: `0 0 10px ${dot.c}` }} />
-        <span className="ds-label">{pillLabel}</span>
-        <span className="ds-chev">{expanded ? '▾' : '▸'}</span>
-      </button>
-      {panel}
+        </div>
+      )}
     </div>
   );
 }

components/Heatmap.jsx

@@ -121,7 +121,7 @@ function Heatmap({ matrix, behaviorMatrix, behaviorLabel, onCellClick, selectedC
           <>
             <span className="mono">L{hover.layer} · {hover.component}</span>
             <span className="dot">·</span>
-            <span>F-stat <b>{Number.isFinite(hover.v) ? hover.v.toFixed(2) : '—'}</b></span>
+            <span>F-stat <b>{hover.v.toFixed(2)}</b></span>
             {behaviorLabel && (<><span className="dot">·</span><span>{behaviorLabel} overlay</span></>)}
           </>
         ) : (

components/Landing.jsx

@@ -66,11 +66,11 @@ function Landing({ onEnter }) {
           />
           <Step
             n="ii"
-            title="Compliance probe"
+            title="Bouncer probe"
             tint="rose"
-            body={<>A second corpus pairs "corporate voice" stems against "authentic voice" completions. A per-feature F-test against those labels yields the <b>compliance F-statistic</b> and a signed Δ — how strongly, and which direction, the feature leans on this single axis.</>}
-            tag="compliance_features · 24.6 k rows"
-            icon={<IconCompliance />}
+            body={<>A second corpus pairs "corporate voice" stems against "authentic voice" completions. A per-feature F-test against those labels yields the <b>bouncer F-statistic</b> and a signed Δ — how strongly, and which direction, the feature leans on this single axis.</>}
+            tag="bouncer_analysis · 24.6 k rows"
+            icon={<IconBouncer />}
           />
           <Step
             n="iii"
@@ -199,7 +199,7 @@ function IconCensus() {
   );
 }
 
-function IconCompliance() {
+function IconBouncer() {
   // two clouds of dots — corp vs auth — with a decision boundary
   return (
     <svg width="40" height="40" viewBox="0 0 40 40" fill="none">

components/LayerDeepDive.jsx

@@ -94,11 +94,11 @@ function LayerDeepDive({ selected, onPickCell }) {
         </div>
 
         <div className="ld-section">
-          <div className="ld-eyebrow">Top compliance features at L{layer} · {component}</div>
+          <div className="ld-eyebrow">Top bouncer features at L{layer} · {component}</div>
           {feats.length === 0 ? (
             <div className="ld-empty muted">
-              No compliance features for L{layer} · {component} — likely not in the analyzed component set
-              (compliance analysis runs on <span className="mono">mlp</span> and <span className="mono">gate</span> right now).
+              No bouncer features for L{layer} · {component} — likely not in the analyzed component set
+              (bouncer analysis runs on <span className="mono">mlp</span> and <span className="mono">gate</span> right now).
             </div>
           ) : (
             <div className="ld-feats">

components/SAEDebugPanel.jsx

@@ -1,90 +0,0 @@
-// ───────────────────────────────────────────────────────────────────────────
-// PLACEHOLDER / SCAFFOLDING — intentionally unstyled.
-// This is a raw verification table for the SAE data layer (window.AtlasData.SAE,
-// populated by sae-loader.js). It exists so we can confirm the metrics are wired
-// correctly before visual design. Claude Design: feel free to restyle or replace
-// this entirely. The interesting data for visualization is each layer's
-// `training_curve` (per-checkpoint EV / L0 / dead% arrays) — see SAE_CONTRACT.md.
-// ───────────────────────────────────────────────────────────────────────────
-
-function SAEDebugPanel() {
-  const [st, setSt] = React.useState(window.SAELoader ? window.SAELoader.state : { status: 'idle' });
-  const [, tick] = React.useReducer(x => x + 1, 0);
-
-  React.useEffect(() => {
-    if (!window.SAELoader) return;
-    const unsub = window.SAELoader.subscribe(setSt);
-    const onReady = () => tick();
-    window.addEventListener('sae-data-ready', onReady);
-    return () => { unsub && unsub(); window.removeEventListener('sae-data-ready', onReady); };
-  }, []);
-
-  const sae = (window.AtlasData && window.AtlasData.SAE) || null;
-  const layers = sae ? sae.layers : [];
-  const fmt = (v, d = 3) => (typeof v === 'number' ? v.toFixed(d) : '—');
-  const repoShort = r => (r ? r.split('/').pop().replace('gemma-4-e2b-', '') : '—');
-
-  return (
-    <div data-screen-label="sae-debug" style={{ fontFamily: 'var(--mono, monospace)', fontSize: 12 }}>
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 6 }}>
-        <div>
-          <div className="bf-eyebrow">SAE training metrics</div>
-          <div className="bf-sub">
-            placeholder scaffolding · {st.status}
-            {st.status === 'loading' ? ` · ${Math.round((st.progress || 0) * 100)}%` : ''}
-            {sae ? ` · ${sae.meta.loaded}/${sae.meta.expected} layers` : ''}
-          </div>
-        </div>
-        <span style={{ opacity: 0.6, fontStyle: 'italic' }}>raw data check — restyle me</span>
-      </div>
-
-      {st.status === 'error' && (
-        <div style={{ color: '#a33', padding: 8 }}>SAE load failed: {st.error}</div>
-      )}
-
-      {layers.length > 0 ? (
-        <table style={{ borderCollapse: 'collapse', width: '100%' }}>
-          <thead>
-            <tr style={{ textAlign: 'right', opacity: 0.7 }}>
-              <th style={{ textAlign: 'left', padding: '3px 8px' }}>layer</th>
-              <th style={{ textAlign: 'left', padding: '3px 8px' }}>source</th>
-              <th style={{ padding: '3px 8px' }}>EV</th>
-              <th style={{ padding: '3px 8px' }}>mean L0</th>
-              <th style={{ padding: '3px 8px' }}>dead %</th>
-              <th style={{ padding: '3px 8px' }}>recon</th>
-              <th style={{ padding: '3px 8px' }}>steps</th>
-              <th style={{ padding: '3px 8px' }}>ckpts</th>
-            </tr>
-          </thead>
-          <tbody>
-            {layers.map(L => (
-              <tr key={L.layer} style={{ borderTop: '1px solid rgba(0,0,0,0.08)', textAlign: 'right' }}
-                  title={L.note || ''}>
-                <td style={{ textAlign: 'left', padding: '3px 8px' }}>L{L.layer}</td>
-                <td style={{ textAlign: 'left', padding: '3px 8px' }}>
-                  {repoShort(L.repo)}{L.note ? ' *' : ''}
-                </td>
-                <td style={{ padding: '3px 8px' }}>{fmt(L.ev)}</td>
-                <td style={{ padding: '3px 8px' }}>{fmt(L.mean_l0, 1)}</td>
-                <td style={{ padding: '3px 8px' }}>{fmt(L.dead_pct, 1)}</td>
-                <td style={{ padding: '3px 8px' }}>{fmt(L.recon_loss, 5)}</td>
-                <td style={{ padding: '3px 8px' }}>{L.n_steps ?? '—'}</td>
-                <td style={{ padding: '3px 8px' }}>{(L.training_curve && L.training_curve.ev.length) || 0}</td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      ) : (
-        st.status !== 'error' && <div style={{ opacity: 0.6, padding: 8 }}>loading SAE metrics…</div>
-      )}
-
-      {layers.some(L => L.note) && (
-        <div style={{ opacity: 0.6, marginTop: 6, fontSize: 11 }}>
-          * source switched for this layer — hover the row for why.
-        </div>
-      )}
-    </div>
-  );
-}
-
-window.SAEDebugPanel = SAEDebugPanel;

components/SQLBox.jsx

@@ -1,5 +1,5 @@
 // SQL query box — accepts SELECT statements against the live atlas tables.
-// Tables: features (compliance features), per_head, prompts, layers, components, behaviors
+// Tables: features (bouncer_analysis), per_head, prompts, layers, components, behaviors
 
 const { useState: useStateSQL, useMemo: useMemoSQL } = React;
 
@@ -25,15 +25,6 @@ function buildTables() {
     };
   });
 
-  const ov_circuits = (raw.ovCircuits || []).map(r => ({
-    layer: r.layer, head: r.head, kv_head: r.kv_head,
-    top_singular_val: round(r.top_singular_val, 3),
-    spectral_conc:    round(r.spectral_conc, 4),
-    eff_rank:         round(r.eff_rank, 2),
-    compliance_score: round(r.compliance_score, 4),
-    layer_comp_strength: round(r.layer_comp_strength, 4),
-  }));
-
   const per_head = phRaw.map(r => ({
     layer: r.layer, component: r.component, head: r.head,
     dims: r.dims, non_zero_var: r.non_zero_var,
@@ -64,17 +55,15 @@ function buildTables() {
     position: round(x.layer / Math.max(1, (window.AtlasData?.N_LAYERS || 1) - 1), 3),
   }));
 
-  // components table: prefer component_summary (has tax/fstat data) over COMPONENTS list
-  const csRaw = raw.componentSummary || [];
-  const components = csRaw.length > 0
-    ? csRaw.map(r => ({ ...r }))
-    : (window.AtlasData?.COMPONENTS || []).map(c => ({ component: c.id, kind: c.kind, label: c.label }));
+  const components = (window.AtlasData?.COMPONENTS || []).map(c => ({
+    component: c.id, kind: c.kind, label: c.label,
+  }));
 
   const behaviors = (window.AtlasData?.BEHAVIORS || []).map(b => ({
     behavior: b.id, label: b.label, prompt_count: b.count,
   }));
 
-  return { features, per_head, prompts, layers, components, behaviors, ov_circuits };
+  return { features, per_head, prompts, layers, components, behaviors };
 }
 
 function round(v, p) {
@@ -148,22 +137,18 @@ function parseAndRun(sql, tables) {
 }
 
 const EXAMPLES = [
-  { label: 'sharpest compliance features',
+  { label: 'sharpest corp-leaning features',
     sql: "SELECT layer, component, feature, fstat, delta\nFROM features\nWHERE leaning = 'corp'\nORDER BY fstat DESC\nLIMIT 20" },
-  { label: 'gate dormancy by layer',
-    sql: "SELECT layer, component, tax_non_activated, n_features,\n  ROUND(100.0 * tax_non_activated / n_features, 1) AS dead_pct\nFROM components\nWHERE component = 'gate'\nORDER BY dead_pct DESC\nLIMIT 20" },
-  { label: 'sharpest separator heads',
+  { label: 'auth/corp split by layer',
+    sql: "SELECT layer, leaning, fstat FROM features\nWHERE rank < 3\nORDER BY layer ASC\nLIMIT 50" },
+  { label: 'sharpest heads',
     sql: "SELECT layer, component, head, top_sep_score, top_code_spec\nFROM per_head\nORDER BY top_sep_score DESC\nLIMIT 25" },
-  { label: 'L0 entanglement vs selectivity',
-    sql: "SELECT layer, component, code_entangled, code_selective,\n  ROUND(1.0 * code_selective / MAX(code_entangled, 1), 2) AS sel_ratio\nFROM components\nORDER BY layer ASC, sel_ratio DESC\nLIMIT 30" },
+  { label: 'highly-specialized dims',
+    sql: "SELECT layer, component, head, top_code_dim, top_code_spec\nFROM per_head\nWHERE top_code_spec > 0.3\nORDER BY top_code_spec DESC\nLIMIT 20" },
   { label: 'richest layers',
     sql: "SELECT layer, mean_fstat, max_fstat, n_features FROM layers\nORDER BY mean_fstat DESC\nLIMIT 12" },
   { label: 'creative-writing prompts',
     sql: "SELECT idx, subcategory, prompt FROM prompts\nWHERE category = 'Creative Writing'\nLIMIT 15" },
-  { label: 'sharpest OV circuits',
-    sql: "SELECT layer, head, spectral_conc, eff_rank, compliance_score\nFROM ov_circuits\nORDER BY spectral_conc DESC\nLIMIT 20" },
-  { label: 'compliance-aligned heads',
-    sql: "SELECT layer, head, compliance_score, spectral_conc, eff_rank\nFROM ov_circuits\nORDER BY compliance_score DESC\nLIMIT 20" },
 ];
 
 function SQLBox() {

components/SurgicalTargets.jsx

@@ -64,7 +64,7 @@ function SurgicalTargets({ rows, onPick }) {
       <div className="st-head">
         <div>
           <div className="bf-eyebrow">Feature inventory</div>
-          <div className="bf-sub">Every catalogued compliance feature, sorted by how cleanly it separates the corporate/authentic axis.</div>
+          <div className="bf-sub">Every catalogued feature, sorted by how cleanly it separates the bouncer-axis labels.</div>
         </div>
         <div className="st-filters">
           {splits.length > 1 && (

index.html

@@ -31,7 +31,7 @@
   <script type="text/babel" src="components/LayerDeepDive.jsx"></script>
   <script type="text/babel" src="components/SQLBox.jsx"></script>
   <script type="text/babel" src="components/DataSource.jsx"></script>
-  <script type="text/babel" src="components/SAEDebugPanel.jsx"></script>
+  <script type="text/babel" src="components/ConvergenceValley.jsx"></script>
   <script type="text/babel" src="app.jsx"></script>
 
   <script type="text/babel">

loader.js

@@ -4,13 +4,11 @@
 // already on window.AtlasData if anything fails.
 
 (function () {
-  const REPO    = 'juiceb0xc0de/gemma-4-e2b-atlas';
-  const TOKEN   = window.HF_TOKEN || '';
-  const HEADERS = TOKEN ? { Authorization: `Bearer ${TOKEN}` } : {};
-  const ROWS    = (cfg, split, off, len) =>
+  const REPO   = 'juiceb0xc0de/gemma-4-e2b-atlas';
+  const ROWS   = (cfg, split, off, len) =>
     `https://datasets-server.huggingface.co/rows?dataset=${encodeURIComponent(REPO)}&config=${cfg}&split=${split}&offset=${off}&length=${len}`;
-  const SPLITS  = `https://datasets-server.huggingface.co/splits?dataset=${encodeURIComponent(REPO)}`;
-  const SIZE    = `https://datasets-server.huggingface.co/size?dataset=${encodeURIComponent(REPO)}`;
+  const SPLITS = `https://datasets-server.huggingface.co/splits?dataset=${encodeURIComponent(REPO)}`;
+  const SIZE   = `https://datasets-server.huggingface.co/size?dataset=${encodeURIComponent(REPO)}`;
 
   const state = {
     status: 'idle',          // idle | loading | live | error
@@ -28,7 +26,7 @@
     // /splits gives us configs+splits but NOT row counts; /size gives counts.
     let splits = [];
     try {
-      const r = await fetch(SPLITS, { headers: HEADERS });
+      const r = await fetch(SPLITS);
       if (r.ok) {
         const j = await r.json();
         splits = (j.splits || []).map(s => ({ config: s.config, split: s.split, num_rows: null }));
@@ -36,7 +34,7 @@
     } catch {}
     // augment with row counts from /size
     try {
-      const r = await fetch(SIZE, { headers: HEADERS });
+      const r = await fetch(SIZE);
       if (r.ok) {
         const j = await r.json();
         const sizes = (j.size && j.size.splits) || [];
@@ -51,26 +49,7 @@
   }
   async function fetchSize() { return null; /* folded into fetchSplits */ }
 
-  // Fetch one page with up to `retries` retries and exponential back-off.
-  async function fetchPage(url, retries = 4) {
-    let delay = 800;
-    for (let attempt = 0; attempt <= retries; attempt++) {
-      try {
-        const r = await fetch(url, { headers: HEADERS });
-        if (r.ok) return r;
-        if (r.status === 429 || r.status >= 500) {
-          if (attempt < retries) { await new Promise(res => setTimeout(res, delay)); delay *= 2; continue; }
-        }
-        throw new Error(`HTTP ${r.status}`);
-      } catch (e) {
-        if (attempt < retries) { await new Promise(res => setTimeout(res, delay)); delay *= 2; }
-        else throw e;
-      }
-    }
-  }
-
   // Paginate /rows. If `total` is null, pages until an empty page comes back.
-  // Returns whatever rows were fetched even if a page fails mid-way.
   async function fetchAllRows(cfg, split, total, onProgress) {
     const PAGE = 100;
     const out = [];
@@ -79,20 +58,15 @@
     while (true) {
       const want = total != null ? Math.min(PAGE, total - off) : PAGE;
       if (want <= 0) break;
-      let r;
-      try {
-        r = await fetchPage(ROWS(cfg, split, off, want));
-      } catch (e) {
-        console.warn(`[AtlasLoader] ${cfg} @${off} failed after retries:`, e.message, '— using partial data');
-        break;
-      }
+      const r = await fetch(ROWS(cfg, split, off, want));
+      if (!r.ok) throw new Error(`rows ${cfg} @${off}: ${r.status}`);
       const j = await r.json();
       const rows = j.rows || [];
       if (rows.length === 0) break;
       for (const row of rows) out.push(row.row);
       done += rows.length;
       off += rows.length;
-      const denom = total != null ? total : (done + PAGE);
+      const denom = total != null ? total : (done + PAGE); // jittered estimate while exploring
       onProgress && onProgress(done, denom);
       if (rows.length < want) break;
     }
@@ -250,7 +224,7 @@
     return { matrix, covered };
   }
 
-  // ---- Feature inventory from real compliance features ----------------------
+  // ---- Feature inventory from real bouncer features ----------------------
   function buildSurgicalTargets(features) {
     // Selectivity = log(1 + F-stat) × (1 - |Δ|), scaled to ~0..100.
     // High = the feature separates the labeled axes cleanly with a moderate
@@ -305,13 +279,7 @@
         meanFstat: r.mean_sep_score,
         topCodeDim: r.top_code_dim,
         topCodeSpec: parseFloat(r.top_code_spec),
-        taxonomy: {
-          all_shared:    r.tax_all_shared    ?? 0,
-          broadly_shared:r.tax_broadly_shared?? 0,
-          partial_shared:r.tax_partial_shared?? 0,
-          specific:      r.tax_specific      ?? 0,
-          non_activated: r.tax_non_activated ?? 0,
-        },
+        taxonomy: parsePyDict(r.taxonomy),
         dims: r.dims, nonZeroVar: r.non_zero_var,
       })).sort((a, b) => b.fstat - a.fstat);
     };
@@ -319,15 +287,9 @@
 
   // Derive an interpretable role from taxonomy + spec.
   function pickRole(r) {
-    const dims = r.dims || 1;
-    const tax = {
-      non_activated: r.tax_non_activated ?? 0,
-      all_shared:    r.tax_all_shared    ?? 0,
-      broadly_shared:r.tax_broadly_shared?? 0,
-      partial_shared:r.tax_partial_shared?? 0,
-      specific:      r.tax_specific      ?? 0,
-    };
+    const tax = parsePyDict(r.taxonomy) || {};
     const spec = parseFloat(r.top_code_spec) || 0;
+    const dims = r.dims || 1;
     const nonAct = (tax.non_activated || 0) / dims;
     const allShared = (tax.all_shared || 0) / dims;
     const broadly = (tax.broadly_shared || 0) / dims;
@@ -379,9 +341,6 @@
       const phSplit = findSplit('per_head');
       const bSplit  = findSplit('bouncer_analysis');
       const pSplit  = findSplit('prompts');
-      const csSplit = findSplit('component_summary');
-      const caSplit = findSplit('code_analysis');
-      const ovSplit = findSplit('ov_circuits');
       if (!phSplit || !bSplit || !pSplit) {
         throw new Error('expected configs missing — has per_head / bouncer_analysis / prompts been published?');
       }
@@ -392,13 +351,10 @@
       };
       notify();
 
-      const [perHead, bouncer, prompts, componentSummary, codeAnalysis, ovCircuits] = await Promise.all([
-        fetchAllRows('per_head',          'train', phSplit.num_rows  ?? null, (d, t) => { state.progress.perHead = t ? d/t : 0; notify(); }),
-        fetchAllRows('bouncer_analysis',  'train', bSplit.num_rows   ?? null, (d, t) => { state.progress.bouncer = t ? d/t : 0; notify(); }),
-        fetchAllRows('prompts',           'train', pSplit.num_rows   ?? null, (d, t) => { state.progress.prompts = t ? d/t : 0; notify(); }),
-        csSplit ? fetchAllRows('component_summary', 'train', csSplit.num_rows ?? null, null) : Promise.resolve([]),
-        caSplit ? fetchAllRows('code_analysis',     'train', caSplit.num_rows ?? null, null) : Promise.resolve([]),
-        ovSplit ? fetchAllRows('ov_circuits',        'train', ovSplit.num_rows  ?? null, null) : Promise.resolve([]),
+      const [perHead, bouncer, prompts] = await Promise.all([
+        fetchAllRows('per_head',         'train', phSplit.num_rows ?? null, (d, t) => { state.progress.perHead = t ? d/t : 0; notify(); }),
+        fetchAllRows('bouncer_analysis', 'train', bSplit.num_rows  ?? null, (d, t) => { state.progress.bouncer = t ? d/t : 0; notify(); }),
+        fetchAllRows('prompts',          'train', pSplit.num_rows  ?? null, (d, t) => { state.progress.prompts = t ? d/t : 0; notify(); }),
       ]);
 
       // ---- assemble ----
@@ -468,7 +424,7 @@
           authorHandle: 'juiceb0xc0de',
           source: 'live',
         },
-        _RAW: { perHead, bouncer: bn.features, prompts, componentSummary, codeAnalysis, ovCircuits }, // for SQL box
+        _RAW: { perHead, bouncer: bn.features, prompts }, // for SQL box
       };
 
       state.status = 'live';

sae-loader.js

@@ -6,7 +6,8 @@
 // same way. No token required — the SAE datasets are public.
 
 (function () {
-  const MANIFEST = '/assets/sae_manifest.json';
+  // Try the HF Space path first (deployed), fall back to project-relative (local).
+  const MANIFEST_CANDIDATES = ['./sae_manifest.json', '/assets/sae_manifest.json'];
   const RESOLVE = (repo, rev, layer, suffix) =>
     `https://huggingface.co/datasets/${repo}/resolve/${rev}/layer_${String(layer).padStart(2, '0')}_${suffix}/meta.json`;
 
@@ -38,6 +39,15 @@
     }
   }
 
+  async function loadManifest() {
+    let lastErr;
+    for (const url of MANIFEST_CANDIDATES) {
+      try { return await fetchJSON(url, 0); }
+      catch (e) { lastErr = e; }
+    }
+    throw lastErr || new Error('manifest not found');
+  }
+
   // Normalize one meta.json into the SAE layer record the UI consumes.
   function buildLayer(entry, meta) {
     const fm = meta.final_metrics || {};
@@ -84,7 +94,7 @@
     notify();
 
     try {
-      const manifest = await fetchJSON(MANIFEST);
+      const manifest = await loadManifest();
       const entries = manifest.layers || [];
       const suffix = manifest.feature_suffix || 's0';
       state.expected = entries.length;

styles.css

@@ -107,8 +107,6 @@ body {
   box-shadow: var(--shadow-soft);
   margin-bottom: 24px;
   backdrop-filter: blur(4px);
-  position: relative;
-  z-index: 100;
 }
 .brand { display: flex; align-items: center; gap: 14px; }
 .brand-mark {
@@ -1043,6 +1041,474 @@ body {
   .landing-mark, .landing-meta, .landing-process, .landing-foot { opacity: 1; transform: none; }
 }
 
+/* ============================================================ */
+/* === CONVERGENCE VALLEY — 3D SAE training-trajectory hero === */
+/* ============================================================ */
+
+.cv {
+  margin-bottom: 22px;
+  padding: 26px 28px 22px;
+  display: flex; flex-direction: column;
+  gap: 18px;
+  position: relative;
+  overflow: hidden;
+  background:
+    linear-gradient(160deg, rgba(255,255,255,0.45), rgba(255,255,255,0.18)),
+    linear-gradient(180deg, var(--bg-3), var(--bg-2));
+}
+.cv::before {
+  content: ''; position: absolute;
+  top: -120px; right: -120px;
+  width: 380px; height: 380px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(201,184,230,0.32), transparent 70%);
+  pointer-events: none;
+  z-index: 0;
+}
+.cv::after {
+  content: ''; position: absolute;
+  bottom: -160px; left: -120px;
+  width: 420px; height: 420px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(244,217,158,0.28), transparent 70%);
+  pointer-events: none;
+  z-index: 0;
+}
+.cv > * { position: relative; z-index: 1; }
+
+/* — header — */
+
+.cv-head {
+  display: flex; justify-content: space-between; align-items: flex-start;
+  gap: 28px;
+  flex-wrap: wrap;
+}
+.cv-head-left { display: flex; flex-direction: column; gap: 4px; }
+.cv-eyebrow {
+  font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
+  color: var(--lavender-2); font-weight: 600;
+}
+.cv-title {
+  font-family: var(--serif); font-weight: 400;
+  font-size: 30px; line-height: 1.0;
+  letter-spacing: -0.015em;
+  color: var(--ink);
+  margin-top: 2px;
+}
+.cv-title em { font-style: italic; color: var(--rose-2); }
+.cv-sub {
+  font-family: var(--serif); font-style: italic;
+  font-size: 14px; color: var(--ink-2);
+  margin-top: 6px;
+  max-width: 56ch;
+  line-height: 1.5;
+}
+.cv-sub b { font-style: normal; font-family: var(--sans); font-weight: 600; color: var(--ink); }
+.cv-sub-quiet { color: var(--ink-3); }
+
+.cv-metric-pick {
+  display: flex; gap: 6px;
+  padding: 4px;
+  background: rgba(255,255,255,0.55);
+  border: 1px solid var(--hairline);
+  border-radius: 14px;
+  box-shadow: var(--shadow-soft);
+}
+.cv-metric-chip {
+  appearance: none; background: transparent; border: none;
+  padding: 8px 14px 9px;
+  border-radius: 10px;
+  cursor: pointer;
+  font-family: var(--sans);
+  display: flex; flex-direction: column; align-items: flex-start;
+  gap: 2px;
+  transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
+}
+.cv-metric-chip:hover { background: rgba(201,184,230,0.16); }
+.cv-metric-chip.is-active {
+  background: linear-gradient(170deg, rgba(201,184,230,0.55), rgba(236,181,190,0.30));
+  box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 4px 12px rgba(154,135,207,0.25);
+}
+.cv-metric-label {
+  font-size: 12.5px; font-weight: 600;
+  color: var(--ink-2); letter-spacing: 0.02em;
+}
+.cv-metric-chip.is-active .cv-metric-label { color: var(--ink); }
+.cv-metric-sub {
+  font-size: 10px; color: var(--ink-3);
+  letter-spacing: 0.02em;
+}
+.cv-metric-chip.is-active .cv-metric-sub { color: var(--rose-2); }
+
+/* — body grid: 3D stage + ledger sidebar — */
+
+.cv-body {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 360px;
+  gap: 22px;
+}
+
+.cv-stage {
+  position: relative;
+  display: flex; flex-direction: column;
+  background:
+    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(244,217,158,0.20), transparent 60%),
+    linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.30));
+  border: 1px solid var(--hairline);
+  border-radius: var(--radius-lg);
+  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5), 0 1px 0 rgba(255,255,255,0.7) inset;
+  min-height: 560px;
+  overflow: hidden;
+}
+.cv-plot {
+  width: 100%; flex: 1;
+  min-height: 500px;
+}
+.cv-stage-foot {
+  display: flex; justify-content: space-between; align-items: center;
+  padding: 10px 18px 14px;
+  border-top: 1px dashed var(--hairline);
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.cv-legend {
+  display: flex; align-items: center; gap: 8px;
+  font-size: 11px; color: var(--ink-3);
+}
+.cv-legend-label { font-family: var(--mono); font-size: 10.5px; }
+.cv-legend-swatch {
+  width: 140px; height: 8px;
+  border-radius: 4px;
+  box-shadow: inset 0 0 0 1px var(--hairline);
+}
+.cv-legend-metric {
+  font-family: var(--mono); font-size: 10.5px;
+  color: var(--lavender-2);
+  margin-left: 4px;
+}
+.cv-hint {
+  font-size: 10.5px; letter-spacing: 0.04em;
+  color: var(--ink-3); font-family: var(--mono);
+}
+
+/* loading veil over the plot area */
+.cv-loading-veil {
+  position: absolute; inset: 0;
+  display: flex; flex-direction: column;
+  align-items: center; justify-content: center;
+  gap: 18px;
+  background: linear-gradient(180deg, rgba(255,255,255,0.40), rgba(255,255,255,0.10));
+  backdrop-filter: blur(2px);
+  pointer-events: none;
+  z-index: 2;
+}
+.cv-loading-pulse {
+  width: 64px; height: 64px;
+  border-radius: 50%;
+  background:
+    radial-gradient(circle at 30% 30%, #fff, var(--lavender) 50%, var(--rose) 100%);
+  box-shadow: 0 0 40px rgba(201,184,230,0.45);
+  animation: cv-pulse 2.2s ease-in-out infinite;
+}
+@keyframes cv-pulse {
+  0%, 100% { transform: scale(0.92); opacity: 0.85; }
+  50%      { transform: scale(1.06); opacity: 1.0;  }
+}
+.cv-loading-msg {
+  font-family: var(--mono); font-size: 11.5px;
+  color: var(--ink-2);
+  background: rgba(255,255,255,0.7);
+  padding: 6px 14px;
+  border-radius: 999px;
+  border: 1px solid var(--hairline);
+}
+.cv-loading-msg b { color: var(--rose-2); font-weight: 600; }
+
+/* — sidebar / per-layer ledger — */
+
+.cv-side {
+  display: flex; flex-direction: column;
+  gap: 14px;
+  min-width: 0;
+}
+.cv-side-actions {
+  display: flex; align-items: center; justify-content: space-between;
+  gap: 10px;
+}
+.cv-toggle {
+  display: inline-flex; align-items: center; gap: 9px;
+  cursor: pointer;
+  font-size: 11.5px; color: var(--ink-2);
+  user-select: none;
+}
+.cv-toggle input { position: absolute; opacity: 0; pointer-events: none; }
+.cv-toggle-dot {
+  width: 30px; height: 17px;
+  border-radius: 999px;
+  background: rgba(74,58,68,0.12);
+  position: relative;
+  transition: background 180ms ease;
+}
+.cv-toggle-dot::after {
+  content: '';
+  position: absolute; top: 2px; left: 2px;
+  width: 13px; height: 13px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 1px 2px rgba(74,58,68,0.25);
+  transition: transform 180ms cubic-bezier(.4,0,.2,1);
+}
+.cv-toggle input:checked + .cv-toggle-dot {
+  background: linear-gradient(180deg, var(--rose), var(--rose-2));
+}
+.cv-toggle input:checked + .cv-toggle-dot::after { transform: translateX(13px); }
+.cv-toggle-label { font-family: var(--sans); letter-spacing: 0.01em; }
+
+.cv-camera-reset {
+  appearance: none;
+  background: rgba(255,255,255,0.6);
+  border: 1px solid var(--hairline);
+  border-radius: 999px;
+  padding: 5px 11px 6px;
+  font-family: var(--mono); font-size: 10.5px;
+  color: var(--ink-2); letter-spacing: 0.04em;
+  cursor: pointer;
+  transition: all 140ms ease;
+}
+.cv-camera-reset:hover {
+  background: rgba(201,184,230,0.20);
+  border-color: var(--lavender-2);
+  color: var(--ink);
+}
+
+.cv-side-head { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; }
+.cv-side-eyebrow {
+  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
+  color: var(--lavender-2); font-weight: 600;
+}
+.cv-side-sub {
+  font-family: var(--serif); font-style: italic;
+  font-size: 13px; color: var(--ink-2);
+}
+
+/* table */
+.cv-table {
+  display: flex; flex-direction: column;
+  background: rgba(255,255,255,0.55);
+  border: 1px solid var(--hairline);
+  border-radius: var(--radius);
+  overflow: hidden;
+  box-shadow: var(--shadow-soft);
+}
+.cv-row {
+  display: grid;
+  grid-template-columns: 28px 64px 1fr 1fr 1fr 1fr;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  font-size: 11.5px;
+  color: var(--ink-2);
+  border-top: 1px solid var(--hairline);
+  transition: background 120ms ease;
+}
+.cv-row:first-child { border-top: none; }
+.cv-row-head {
+  background: var(--bg-2);
+  color: var(--ink-3);
+  font-size: 9.5px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  font-weight: 600;
+  padding-top: 9px; padding-bottom: 9px;
+}
+.cv-row-empty {
+  padding: 14px 12px; color: var(--ink-3); font-family: var(--mono); font-size: 11px;
+  grid-template-columns: 1fr;
+}
+.cv-row.is-rolling { background: linear-gradient(180deg, rgba(201,184,230,0.10), rgba(201,184,230,0.04)); }
+.cv-row.is-highlight {
+  background: linear-gradient(180deg, rgba(236,181,190,0.20), rgba(236,181,190,0.08));
+  box-shadow: inset 3px 0 0 var(--rose-2);
+}
+.cv-row:hover:not(.cv-row-head):not(.cv-row-empty) { background: rgba(201,184,230,0.08); }
+
+.cv-layer {
+  font-family: var(--serif); font-size: 14px; color: var(--ink);
+  font-weight: 500;
+}
+.cv-src {
+  display: inline-flex; align-items: center; gap: 6px;
+  font-family: var(--mono); font-size: 10px;
+  color: var(--ink-2);
+}
+.cv-src-dot {
+  width: 6px; height: 6px; border-radius: 50%;
+  flex: 0 0 auto;
+}
+.cv-src-dot.rolling { background: var(--rose-2); box-shadow: 0 0 0 2px rgba(207,141,150,0.20); }
+.cv-src-dot.stable  { background: var(--lavender-2); box-shadow: 0 0 0 2px rgba(154,135,207,0.20); }
+.cv-src-name { letter-spacing: 0.04em; }
+.cv-num { text-align: right; font-size: 11.5px; color: var(--ink); }
+.cv-num.mono { font-size: 11px; }
+
+/* ghost-run info card */
+.cv-ghost-card {
+  background:
+    linear-gradient(160deg, rgba(236,181,190,0.18), rgba(244,217,158,0.10));
+  border: 1px solid var(--hairline);
+  border-radius: var(--radius);
+  padding: 12px 14px 13px;
+  display: flex; flex-direction: column; gap: 10px;
+}
+.cv-ghost-eyebrow {
+  font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase;
+  color: var(--rose-2); font-weight: 600;
+}
+.cv-ghost-rows { display: flex; flex-direction: column; gap: 6px; }
+.cv-ghost-row {
+  display: grid;
+  grid-template-columns: 78px 1fr auto;
+  align-items: center;
+  gap: 8px;
+  font-size: 11px;
+  color: var(--ink-2);
+}
+.cv-ghost-layer {
+  font-family: var(--serif); font-size: 12.5px;
+  color: var(--ink);
+}
+.cv-ghost-stats { font-size: 10.5px; color: var(--ink-2); }
+.cv-ghost-tag {
+  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.04em;
+  padding: 2px 7px; border-radius: 999px;
+  font-weight: 500;
+}
+.cv-ghost-tag.tone-rose  { background: rgba(207,141,150,0.30); color: #8a4756; }
+.cv-ghost-tag.tone-amber { background: rgba(240,201,138,0.40); color: #8a6a32; }
+.cv-ghost-note {
+  font-size: 11px; line-height: 1.55;
+  color: var(--ink-3);
+  padding-top: 6px;
+  border-top: 1px dashed var(--hairline);
+}
+.cv-ghost-note b { color: var(--ink); font-weight: 600; }
+
+/* — scrubber — */
+
+.cv-scrub {
+  display: grid;
+  grid-template-columns: auto 1fr auto auto;
+  align-items: center;
+  gap: 16px;
+  padding: 14px 18px;
+  background:
+    linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.30));
+  border: 1px solid var(--hairline);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-soft);
+}
+.cv-play {
+  appearance: none;
+  width: 38px; height: 38px;
+  border-radius: 50%;
+  border: 1px solid var(--lavender-2);
+  background: linear-gradient(180deg, var(--lavender), var(--lavender-2));
+  color: #fff;
+  cursor: pointer;
+  display: flex; align-items: center; justify-content: center;
+  box-shadow: 0 4px 12px rgba(154,135,207,0.30), inset 0 1px 0 rgba(255,255,255,0.5);
+  transition: transform 120ms ease, box-shadow 140ms ease;
+}
+.cv-play:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(154,135,207,0.45), inset 0 1px 0 rgba(255,255,255,0.5); }
+.cv-play.is-playing { background: linear-gradient(180deg, var(--rose), var(--rose-2)); border-color: var(--rose-2); box-shadow: 0 4px 12px rgba(207,141,150,0.40), inset 0 1px 0 rgba(255,255,255,0.5); }
+.cv-play-glyph {
+  font-size: 12px;
+  letter-spacing: 0;
+  line-height: 1;
+  margin-left: 2px; /* optical alignment of the play triangle */
+}
+.cv-play.is-playing .cv-play-glyph { margin-left: 0; font-size: 11px; }
+
+.cv-range-wrap { position: relative; padding: 4px 4px 0; min-width: 0; }
+.cv-range-track {
+  height: 8px; border-radius: 999px;
+  background: rgba(74,58,68,0.08);
+  overflow: hidden;
+  position: relative;
+}
+.cv-range-fill {
+  height: 100%;
+  background: linear-gradient(90deg, var(--lavender), var(--rose), var(--coral), var(--gold));
+  border-radius: 999px;
+  box-shadow: 0 0 14px rgba(245,185,163,0.40);
+  transition: width 80ms linear;
+}
+.cv-range {
+  position: absolute; inset: 0;
+  appearance: none;
+  width: 100%; height: 100%;
+  background: transparent;
+  margin: 0; padding: 0;
+  cursor: pointer;
+}
+.cv-range::-webkit-slider-thumb {
+  appearance: none;
+  width: 18px; height: 18px;
+  border-radius: 50%;
+  background: #fff;
+  border: 2px solid var(--rose-2);
+  box-shadow: 0 2px 6px rgba(74,58,68,0.22);
+  cursor: grab;
+  transition: transform 120ms ease;
+}
+.cv-range::-webkit-slider-thumb:active { transform: scale(1.12); cursor: grabbing; }
+.cv-range::-moz-range-thumb {
+  width: 18px; height: 18px;
+  border-radius: 50%;
+  background: #fff;
+  border: 2px solid var(--rose-2);
+  box-shadow: 0 2px 6px rgba(74,58,68,0.22);
+  cursor: grab;
+}
+.cv-range-ticks {
+  display: flex; justify-content: space-between;
+  font-family: var(--mono); font-size: 9.5px;
+  color: var(--ink-3);
+  padding: 6px 2px 0;
+  letter-spacing: 0.04em;
+}
+
+.cv-scrub-readout {
+  display: flex; flex-direction: column; align-items: flex-end;
+  line-height: 1.0;
+}
+.cv-scrub-num {
+  font-family: var(--serif); font-weight: 500;
+  font-size: 20px; color: var(--ink);
+  letter-spacing: -0.01em;
+}
+.cv-scrub-label {
+  font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase;
+  color: var(--ink-3); margin-top: 4px;
+}
+.cv-scrub-reset {
+  appearance: none;
+  background: rgba(255,255,255,0.6);
+  border: 1px solid var(--hairline);
+  border-radius: 999px;
+  padding: 6px 12px 7px;
+  font-family: var(--mono); font-size: 10.5px;
+  color: var(--ink-2);
+  cursor: pointer;
+  letter-spacing: 0.04em;
+  transition: all 140ms ease;
+}
+.cv-scrub-reset:hover {
+  background: rgba(201,184,230,0.18);
+  border-color: var(--lavender-2);
+  color: var(--ink);
+}
+
 /* === Responsive === */
 @media (max-width: 1180px) {
   .hero-band { grid-template-columns: 1fr; }
@@ -1051,4 +1517,12 @@ body {
   .ld-comps  { grid-template-columns: repeat(2, 1fr); }
   .bf        { min-height: auto; }
   .hm-card   { min-height: 620px; }
+  .cv-body   { grid-template-columns: 1fr; }
+  .cv-stage  { min-height: 460px; }
+  .cv-plot   { min-height: 420px; }
+}
+@media (max-width: 760px) {
+  .cv-scrub  { grid-template-columns: auto 1fr; row-gap: 10px; }
+  .cv-scrub-readout, .cv-scrub-reset { grid-column: 1 / -1; }
+  .cv-scrub-readout { flex-direction: row; gap: 10px; align-items: baseline; }
 }