testing_space

Runtime error

App Files Files Community

everydaytok commited on 5 days ago

Commit

e76c9eb

verified ·

1 Parent(s): cff549e

Update index.html

Browse files

Files changed (1) hide show

index.html +285 -452

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Elastic Mesh Lab</title>
   <script src="https://cdn.tailwindcss.com"></script>
   <script src="https://cdn.plot.ly/plotly-2.24.1.min.js"></script>
   <style>
@@ -30,8 +30,11 @@
     <span id="b-mode"  class="px-1.5 py-0.5 rounded bg-yellow-900/60 text-yellow-300 border border-yellow-800/60">TRAIN</span>
     <span id="b-arch"  class="px-1.5 py-0.5 rounded bg-blue-900/60   text-blue-300   border border-blue-800/60">ADDIT</span>
     <span id="b-alpha" class="px-1.5 py-0.5 rounded bg-orange-900/60 text-orange-300 border border-orange-800/60">α:0.45</span>
-    <!-- D · U · L controls -->
     <span class="px-1.5 py-0.5 rounded bg-green-900/60 text-green-300 border border-green-800/60 flex items-center gap-0.5">
       <span class="text-yellow-300 mr-0.5">D</span>
       <button class="lbtn" onclick="quickL('inputs',-1)">−</button>
@@ -47,18 +50,17 @@
       <button class="lbtn" onclick="quickL('lower',+1)">+</button>
     </span>
-    <!-- CROSS CONNECT toggle -->
-    <button id="b-cross" onclick="toggleCross()"
-      class="px-1.5 py-0.5 rounded border font-bold text-[8px] transition-all
-             bg-slate-900 text-slate-600 border-slate-700">
-      CROSS:OFF
-    </button>
-    <span id="b-data" class="px-1.5 py-0.5 rounded bg-pink-900/60 text-pink-300 border border-pink-800/60">HOUSNG</span>
   </div>
   <div class="flex items-center gap-2 ml-1">
-    <!-- bridge counter, hidden when 0 -->
-    <span id="bridge-lbl" class="text-[7px] text-amber-500"></span>
     <span id="q-lbl"   class="text-[8px] text-slate-600">Q:0</span>
     <div   id="run-dot" class="w-2 h-2 rounded-full bg-slate-700"></div>
     <button onclick="openDrawer()" class="text-[10px] bg-blue-700 hover:bg-blue-600 px-2 py-1 rounded font-bold">⚙ DIALS</button>
@@ -74,7 +76,7 @@
 <!-- ── BOTTOM PANEL ─────────────────────────────────────────────────────────── -->
 <div class="glass flex-shrink-0 border-t border-slate-800" style="height:174px">
   <div class="flex border-b border-slate-800 text-[10px]">
-    <button onclick="tab('nodes')"   id="tab-nodes"   class="flex-1 py-1.5 bg-blue-900/40 text-blue-300 font-bold">NODES</button>
     <button onclick="tab('springs')" id="tab-springs" class="flex-1 py-1.5 text-slate-500">SPRINGS</button>
     <button onclick="tab('logs')"    id="tab-logs"    class="flex-1 py-1.5 text-slate-500">LOGS</button>
   </div>
@@ -82,7 +84,7 @@
     <div class="w-20 flex-shrink-0 border-r border-slate-800 flex flex-col items-center justify-center p-1 gap-0.5">
       <div class="text-[7px] text-slate-600 uppercase tracking-widest">Tension</div>
       <div id="err-big"  class="text-xl font-bold text-red-400 leading-none">0.00</div>
-      <div id="pred-val" class="text-[8px] text-slate-500">P:—</div>
       <div id="iter-lbl" class="text-[8px] text-slate-700">IT:0</div>
     </div>
     <div class="flex-grow overflow-y-auto p-1.5 text-[10px]">
@@ -96,7 +98,7 @@
 <!-- ── DRAWER ───────────────────────────────────────────────────────────────── -->
 <aside id="drawer" class="drawer-closed fixed inset-x-0 bottom-0 glass border-t border-slate-700 p-4 flex flex-col gap-3 max-h-[93vh] overflow-y-auto">
   <div class="flex justify-between items-center">
-    <span class="text-orange-400 font-bold text-sm">ELASTIC MESH LABORATORY</span>
     <button onclick="closeDrawer()" class="text-slate-400 text-2xl leading-none">✕</button>
   </div>
@@ -104,10 +106,7 @@
     <!-- MODE -->
     <div class="col-span-2 bg-slate-900 rounded p-3 border border-yellow-900/50">
-      <div class="text-yellow-400 text-[9px] font-bold mb-1">
-        EXECUTION MODE
-        <span class="text-slate-600 font-normal ml-1">switches instantly, springs kept</span>
-      </div>
       <div class="flex gap-2">
         <button class="tog on flex-1 py-2 rounded text-xs font-bold bg-yellow-700"
           onclick="setMode('training',this,'bg-yellow-700')">TRAINING</button>
@@ -116,7 +115,47 @@
       </div>
     </div>
-    <!-- ARCH -->
     <div class="bg-slate-900 rounded p-3 border border-blue-900/50">
       <div class="text-blue-400 text-[9px] font-bold mb-2">NODE ACTIVATION</div>
       <button class="tog on w-full mb-1 py-2 rounded text-[10px] font-bold bg-blue-700"
@@ -125,7 +164,6 @@
         onclick="pick('architecture','multiplicative',this,'bg-blue-700')">MULTIPLICATIVE Π</button>
     </div>
-    <!-- ALPHA -->
     <div class="bg-slate-900 rounded p-3 border border-orange-900/50">
       <div class="text-orange-400 text-[9px] font-bold mb-1">BACK-TENSION α</div>
       <input id="alpha-sl" type="range" min="0" max="100" value="45" step="5"
@@ -134,61 +172,24 @@
       <div class="text-center text-orange-300 font-bold text-xl mt-0.5" id="alpha-val">0.45</div>
     </div>
-    <!-- CROSS CONNECT -->
-    <div class="col-span-2 bg-slate-900 rounded p-3 border border-amber-900/50">
-      <div class="text-amber-400 text-[9px] font-bold mb-1">
-        CROSS-CONNECT
-        <span class="text-slate-600 font-normal ml-1">passive bridge vertices</span>
-      </div>
-      <div class="text-[9px] text-slate-500 mb-2">
-        OFF → N independent parallel hourglasses (default)<br>
-        ON  → a passive bridge vertex is inserted between each adjacent<br>
-        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dimension pair (upper &amp; lower). Bridge springs are fixed<br>
-        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;and never learned — cross-talk happens through physics only.
-      </div>
-      <button id="drawer-cross-btn" onclick="toggleCross()"
-        class="w-full py-2 rounded text-xs font-bold border border-slate-700 bg-slate-800 text-slate-400">
-        CROSS-CONNECT: OFF
-      </button>
-      <div id="cross-info" class="text-[8px] text-slate-600 mt-1 text-center"></div>
-    </div>
-    <!-- TOPOLOGY -->
-    <div class="col-span-2 bg-slate-900 rounded p-3 border border-green-900/50">
-      <div class="text-green-400 text-[9px] font-bold mb-2">
-        TOPOLOGY
-        <span class="text-slate-500 font-normal ml-1">A[D]→[D×U]→C[D]←[D×L]←B[D]</span>
-      </div>
-      <div class="grid grid-cols-3 gap-2">
-        <div class="bg-slate-800 rounded p-2 text-center border border-yellow-900/40">
-          <div class="text-yellow-400 text-[8px] mb-1">DIMENSIONS (D)</div>
-          <div class="flex items-center justify-center gap-2">
-            <button class="lbtn text-sm" onclick="chL('inputs',-1)">−</button>
-            <span id="dial-inputs" class="text-yellow-300 font-bold text-2xl w-8 text-center">1</span>
-            <button class="lbtn text-sm" onclick="chL('inputs',+1)">+</button>
-          </div>
-          <div class="text-[7px] text-slate-600 mt-1">max 8</div>
-        </div>
-        <div class="bg-slate-800 rounded p-2 text-center border border-orange-900/40">
-          <div class="text-orange-400 text-[8px] mb-1">UPPER (A-side)</div>
-          <div class="flex items-center justify-center gap-2">
-            <button class="lbtn text-sm" onclick="chL('upper',-1)">−</button>
-            <span id="dial-upper" class="text-orange-300 font-bold text-2xl w-8 text-center">3</span>
-            <button class="lbtn text-sm" onclick="chL('upper',+1)">+</button>
-          </div>
-          <div class="text-[7px] text-slate-600 mt-1">per dim</div>
         </div>
-        <div class="bg-slate-800 rounded p-2 text-center border border-cyan-900/40">
-          <div class="text-cyan-400 text-[8px] mb-1">LOWER (B-side)</div>
-          <div class="flex items-center justify-center gap-2">
-            <button class="lbtn text-sm" onclick="chL('lower',-1)">−</button>
-            <span id="dial-lower" class="text-cyan-300 font-bold text-2xl w-8 text-center">3</span>
-            <button class="lbtn text-sm" onclick="chL('lower',+1)">+</button>
-          </div>
-          <div class="text-[7px] text-slate-600 mt-1">per dim</div>
         </div>
       </div>
-      <div id="spring-count" class="text-center text-[8px] text-slate-600 mt-2"></div>
     </div>
   </div>
@@ -197,129 +198,57 @@
     APPLY &amp; REBUILD TOPOLOGY
   </button>
-  <!-- DATASET -->
-  <div class="bg-slate-900 rounded p-3 border border-pink-900/50">
-    <div class="text-pink-400 text-[9px] font-bold mb-2">DATASET
-      <span class="text-slate-600 font-normal ml-1">(applied per dimension)</span>
-    </div>
-    <select id="ds-sel" onchange="refreshDS()"
-      class="w-full bg-black border border-slate-700 p-2 text-white text-xs rounded mb-2">
-      <option value="housing">Housing — A×2.5 + B×1.2</option>
-      <option value="subtraction">Subtraction — A − B</option>
-      <option value="multiplication">Multiplication — A × B</option>
-      <option value="quadratic">Quadratic — A² + B</option>
-    </select>
-    <p id="ds-hint" class="text-[9px] text-slate-500 italic mb-2"></p>
-    <div class="flex gap-2">
-      <input id="batch-n" type="number" value="30" min="5" max="200"
-        class="w-16 bg-black border border-slate-700 p-2 text-white text-sm text-center rounded">
-      <button onclick="startBatch()"
-        class="flex-1 bg-pink-800 hover:bg-pink-700 py-2 text-xs font-bold rounded">START BATCH</button>
     </div>
-  </div>
-  <!-- CUSTOM -->
-  <div class="bg-slate-900 rounded p-3 border border-cyan-900/50">
-    <div class="text-cyan-400 text-[9px] font-bold mb-1">CUSTOM INPUT
-      <span id="custom-dim-hint" class="text-slate-600 font-normal ml-1"></span>
-    </div>
-    <div id="ds-examples" class="text-[9px] text-slate-500 mb-2"></div>
-    <div class="grid grid-cols-3 gap-2 mb-2">
-      <div>
-        <div class="text-[8px] text-slate-600 mb-1">A (top)</div>
-        <input id="ca" type="text" value="5"
-          class="w-full bg-black border border-slate-700 p-2 text-white text-sm text-center rounded"
-          oninput="updateExpected()">
-      </div>
-      <div>
-        <div class="text-[8px] text-slate-600 mb-1">B (bottom)</div>
-        <input id="cb" type="text" value="3"
-          class="w-full bg-black border border-slate-700 p-2 text-white text-sm text-center rounded"
-          oninput="updateExpected()">
-      </div>
-      <div>
-        <div class="text-[8px] text-slate-600 mb-1">C target</div>
-        <input id="cc" type="text" placeholder="auto"
-          class="w-full bg-black border border-slate-700 p-2 text-white text-sm text-center rounded">
-      </div>
     </div>
-    <div id="expected-lbl" class="text-[9px] text-yellow-400 mb-2 min-h-[14px]"></div>
-    <button onclick="runCustom()"
-      class="w-full bg-cyan-800 hover:bg-cyan-700 py-2 text-xs font-bold rounded">RUN CUSTOM</button>
   </div>
-  <button onclick="halt()"
-    class="w-full border border-red-700 text-red-500 py-2 rounded text-xs font-bold">HALT ENGINE</button>
 </aside>
 <script>
 // ── STATE ──────────────────────────────────────────────────────────────────────
 const cfg  = { mode: 'training', architecture: 'additive' };
-const topo = { inputs: 1, upper: 3, lower: 3 };
-let crossConnect = false;
-let nBridges     = 0;
-let bridgeK      = 0.20;
-// ── CROSS CONNECT ─────────────────────────────────────────────────────────────
-async function toggleCross() {
-  const res  = await fetch('/toggle_cross', { method: 'POST' });
-  const data = await res.json();
-  crossConnect = data.cross_connect;
-  nBridges     = data.n_bridges || 0;
-  bridgeK      = data.bridge_k  || 0.20;
-  updateCrossUI();
-  meshPlotted = false;
-}
-function updateCrossUI() {
-  const btn1 = document.getElementById('b-cross');
-  const btn2 = document.getElementById('drawer-cross-btn');
-  const info = document.getElementById('cross-info');
-  const blbl = document.getElementById('bridge-lbl');
-  const n    = topo.inputs;
-  // Estimated bridge count when server hasn't confirmed yet
-  const nb = nBridges || (crossConnect && n >= 2 ? (n - 1) * 2 : 0);
-  if (crossConnect) {
-    btn1.className = 'px-1.5 py-0.5 rounded border font-bold text-[8px] transition-all bg-amber-800 text-amber-200 border-amber-600';
-    btn1.innerText = 'CROSS:ON';
-    btn2.className = 'w-full py-2 rounded text-xs font-bold border border-amber-600 bg-amber-900/60 text-amber-200';
-    btn2.innerText = 'CROSS-CONNECT: ON  (click to disable)';
-    info.innerText = nb
-      ? `${nb} bridge ${nb !== 1 ? 'vertices' : 'vertex'} — passive k=${bridgeK}, not learned`
-      : 'No bridges (need D≥2)';
-    blbl.innerText  = nb ? `⬡${nb}` : '';
-    blbl.className  = 'text-[7px] text-amber-500';
   } else {
-    btn1.className = 'px-1.5 py-0.5 rounded border font-bold text-[8px] transition-all bg-slate-900 text-slate-600 border-slate-700';
-    btn1.innerText = 'CROSS:OFF';
-    btn2.className = 'w-full py-2 rounded text-xs font-bold border border-slate-700 bg-slate-800 text-slate-400';
-    btn2.innerText = 'CROSS-CONNECT: OFF  (click to enable)';
-    info.innerText = `${n} independent parallel hourglass${n !== 1 ? 'es' : ''}`;
-    blbl.innerText = '';
   }
 }
-// ── TOPOLOGY ──────────────────────────────────────────────────────────────────
-function updateSpringCount() {
-  const { inputs: n, upper: u, lower: l } = topo;
-  const nb = crossConnect && n >= 2 ? (n - 1) * 2 : 0;   // XU + XL per pair
-  const learnSprings  = n * (2*u + 2*l);
-  const bridgeSprings = nb * 2;                            // each bridge has 2 springs
-  const totalNodes    = 3*n + n*u + n*l + nb;
-  document.getElementById('spring-count').innerText =
-    `${learnSprings} learned + ${bridgeSprings} bridge springs | ${totalNodes} nodes`;
-  document.getElementById('custom-dim-hint').innerText =
-    n === 1 ? '(single value)' : `(${n} values, comma-separated)`;
-  updateCrossUI();
-}
 function chL(w, d) {
-  const lim = { inputs:[1,8], upper:[1,16], lower:[1,16] };
   topo[w] = Math.max(lim[w][0], Math.min(lim[w][1], topo[w]+d));
   document.getElementById(`dial-${w}`).innerText = topo[w];
-  updateSpringCount();
 }
 async function quickL(w, d) {
@@ -328,19 +257,21 @@ async function quickL(w, d) {
     body: JSON.stringify({ layer: w, delta: d })
   });
   const data = await res.json();
-  syncTopoUI(data.n_inputs, data.n_upper, data.n_lower);
   meshPlotted = false;
 }
-function syncTopoUI(ni, nu, nl) {
-  topo.inputs = ni; topo.upper = nu; topo.lower = nl;
-  document.getElementById('b-inputs').innerText    = ni;
-  document.getElementById('b-upper').innerText     = nu;
-  document.getElementById('b-lower').innerText     = nl;
-  document.getElementById('dial-inputs').innerText = ni;
-  document.getElementById('dial-upper').innerText  = nu;
-  document.getElementById('dial-lower').innerText  = nl;
-  updateSpringCount();
 }
 async function setMode(m, btn, cls) {
@@ -364,21 +295,28 @@ function pick(key, val, btn, cls) {
   btn.classList.remove('off'); btn.classList.add('on', cls);
 }
-function openDrawer()  { document.getElementById('drawer').classList.remove('drawer-closed'); refreshDS(); }
 function closeDrawer() { document.getElementById('drawer').classList.add('drawer-closed'); }
 async function applyConfig() {
   const ds    = document.getElementById('ds-sel').value;
   const alpha = parseFloat(document.getElementById('alpha-sl').value) / 100;
   await fetch('/config', {
     method:'POST', headers:{'Content-Type':'application/json'},
     body: JSON.stringify({
-      ...cfg, dataset: ds, back_alpha: alpha,
-      n_inputs: topo.inputs, n_upper: topo.upper, n_lower: topo.lower
     })
   });
   document.getElementById('b-arch').innerText  = cfg.architecture.slice(0,5).toUpperCase();
   document.getElementById('b-alpha').innerText = `α:${alpha.toFixed(2)}`;
   document.getElementById('b-data').innerText  = ds.slice(0,6).toUpperCase();
   meshPlotted = false;
   closeDrawer();
@@ -393,12 +331,13 @@ async function startBatch() {
 }
 async function runCustom() {
-  const a = document.getElementById('ca').value;
-  const b = document.getElementById('cb').value;
-  const c = document.getElementById('cc').value;
   await fetch('/run_custom', {
     method:'POST', headers:{'Content-Type':'application/json'},
-    body: JSON.stringify({ a, b, c: c !== '' ? c : null })
   });
   closeDrawer();
 }
@@ -408,52 +347,6 @@ async function halt() {
   closeDrawer();
 }
-// ── DATASET META ──────────────────────────────────────────────────────────────
-const DS = {
-  housing:       { hint:'A×2.5+B×1.2 per dim',  fn:(a,b)=>(a*2.5+b*1.2).toFixed(3), ex:[{a:4,b:2},{a:6,b:3}] },
-  subtraction:   { hint:'A−B per dim',           fn:(a,b)=>(a-b).toFixed(3),          ex:[{a:8,b:3},{a:5,b:5}] },
-  multiplication:{ hint:'A×B per dim',           fn:(a,b)=>(a*b).toFixed(3),          ex:[{a:6,b:7},{a:3,b:9}] },
-  quadratic:     { hint:'A²+B per dim',          fn:(a,b)=>(a*a+b).toFixed(3),        ex:[{a:3,b:2},{a:4,b:5}] },
-};
-function refreshDS() {
-  const ds = document.getElementById('ds-sel').value, m = DS[ds];
-  document.getElementById('ds-hint').innerText = m.hint;
-  document.getElementById('ds-examples').innerHTML = 'e.g. ' +
-    m.ex.map(e => `<span class="cursor-pointer text-cyan-500 underline"
-      onclick="fillC(${e.a},${e.b})">A=${e.a} B=${e.b}→${m.fn(e.a,e.b)}</span>`).join('  ');
-  updateExpected();
-}
-function fillC(a, b) {
-  document.getElementById('ca').value = a;
-  document.getElementById('cb').value = b;
-  document.getElementById('cc').value = '';
-  updateExpected();
-}
-function parseVals(str) {
-  return String(str).split(',').map(s => parseFloat(s.trim())).filter(x => !isNaN(x));
-}
-function updateExpected() {
-  const a = document.getElementById('ca').value;
-  const b = document.getElementById('cb').value;
-  const ds = document.getElementById('ds-sel').value;
-  if (!a || !b || !DS[ds]) return;
-  const fn = DS[ds].fn;
-  const av = parseVals(a), bv = parseVals(b);
-  if (!av.length || !bv.length) return;
-  const n = Math.max(topo.inputs, 1);
-  const results = Array.from({length:n}, (_,i) => fn(av[i%av.length], bv[i%bv.length]));
-  document.getElementById('expected-lbl').innerText =
-    n === 1 ? `Ground truth: ${results[0]}` : `Ground truth: [${results.join(', ')}]`;
-}
-refreshDS();
-updateSpringCount();
-// ── TABS ──────────────────────────────────────────────────────────────────────
 function tab(name) {
   ['nodes','springs','logs'].forEach(t => {
     document.getElementById(`pane-${t}`).classList.toggle('hidden', t !== name);
@@ -463,71 +356,9 @@ function tab(name) {
   });
 }
-// ── VISUALIZATION ─────────────────────────────────────────────────────────────
-/**
- * Build x,y positions for every node.
- * Bridge nodes (XU{d}, XL{d}) sit at the midpoint between their two
- * adjacent boundary hidden nodes, on the same Y row.
- */
-function buildPos(layers, n_inputs, n_upper, n_lower, bridgeNodeIds = []) {
-  const pos    = {};
-  const Y      = [4.4, 2.1, 0.0, -2.1, -4.4];
-  const COL_W  = n_inputs === 1 ? 0 : Math.min(9.0 / (n_inputs - 1), 4.2);
-  const halfSp = COL_W * (n_inputs - 1) / 2;
-  const bSprd  = n_inputs === 1 ? 3.8 : Math.min(COL_W * 0.55, 1.8);
-  layers.forEach((layer, li) => {
-    const y = Y[li];
-    layer.forEach(nid => {
-      const kind = nid[0];
-      let dim = 1, j = 1, total = 1;
-      if ('ABC'.includes(kind)) {
-        dim = parseInt(nid.slice(1));
-      } else {
-        const parts = nid.slice(1).split('_');
-        dim   = parseInt(parts[0]);
-        j     = parseInt(parts[1]);
-        total = kind === 'U' ? n_upper : n_lower;
-      }
-      const cx = n_inputs === 1 ? 0 : -halfSp + (dim - 1) * COL_W;
-      if ('ABC'.includes(kind)) {
-        pos[nid] = [cx, y];
-      } else {
-        const t  = total === 1 ? 0 : (2*(j-1)/(total-1) - 1);
-        pos[nid] = [cx + bSprd * t, y];
-      }
-    });
-  });
-  // Bridge nodes: midpoint between right boundary of dim d and left of dim d+1
-  // x = -halfSp + (d - 0.5) * COL_W  (simplifies to the column midpoint)
-  bridgeNodeIds.forEach(nid => {
-    const side = nid[1];                        // 'U' or 'L'
-    const d    = parseInt(nid.slice(2));
-    const yVal = side === 'U' ? Y[1] : Y[3];   // same row as upper/lower hidden
-    const xVal = -halfSp + (d - 0.5) * COL_W;
-    pos[nid]   = [xVal, yVal];
-  });
-  return pos;
-}
-function busShapes(pos, n_inputs) {
-  const sh = [];
-  const mg = n_inputs === 1 ? 1.4 : 0.8;
-  const xs = k => Object.entries(pos).filter(([id]) => id[0] === k).map(([,v]) => v[0]);
-  const rect = (mn, mx, yc, hh, fill, stroke) => sh.push({
-    type:'rect', xref:'x', yref:'y',
-    x0:mn-mg, x1:mx+mg, y0:yc-hh, y1:yc+hh,
-    fillcolor:fill, line:{color:stroke, width:2}
-  });
-  const aXs=xs('A'), cXs=xs('C'), bXs=xs('B');
-  rect(Math.min(...aXs),Math.max(...aXs), 4.4, 0.35,'rgba(251,146,60,0.10)','rgba(251,146,60,0.65)');
-  rect(Math.min(...cXs),Math.max(...cXs), 0.0, 0.32,'rgba(56,189,248,0.10)','rgba(56,189,248,0.70)');
-  rect(Math.min(...bXs),Math.max(...bXs),-4.4, 0.35,'rgba(192,132,252,0.10)','rgba(192,132,252,0.65)');
-  return sh;
-}
 function springColor(k) {
   const t = Math.min(Math.abs(k) / 6, 1);
@@ -536,99 +367,123 @@ function springColor(k) {
 }
 /**
- * Build all Plotly traces.
- * Learnable springs: solid colour based on spring constant.
- * Bridge springs:    dashed amber lines.
- * Bridge nodes:      amber diamonds, distinct from regular hidden nodes.
  */
-function buildTraces(nodes, springs, bridgeSprings, layers, n_inputs, n_upper, n_lower) {
-  const bridgeNodeIds = Object.keys(nodes).filter(id => id[0] === 'X');
-  const pos    = buildPos(layers, n_inputs, n_upper, n_lower, bridgeNodeIds);
   const traces = [];
-  // 1. Learnable spring edges
-  for (const [key, k] of Object.entries(springs)) {
-    const [u, v] = key.split('→');
-    if (!pos[u] || !pos[v]) continue;
-    const [col, wd] = springColor(k);
-    traces.push({
-      type:'scatter', mode:'lines',
-      x:[pos[u][0], pos[v][0]], y:[pos[u][1], pos[v][1]],
-      line:{color:col, width:wd},
-      hoverinfo:'none', showlegend:false
     });
-  }
-  // 2. Bridge spring edges — amber dashed, drawn on top
-  for (const key of Object.keys(bridgeSprings)) {
-    const [u, v] = key.split('→');
-    if (!pos[u] || !pos[v]) continue;
-    traces.push({
-      type:'scatter', mode:'lines',
-      x:[pos[u][0], pos[v][0]], y:[pos[u][1], pos[v][1]],
-      line:{color:'#f59e0b', width:2.0, dash:'dot'},
-      hoverinfo:'none', showlegend:false
-    });
-  }
-  // 3. All nodes (regular + bridge)
-  const regularNodes = layers.flat();
-  const allN = [...regularNodes, ...bridgeNodeIds];
-  const NCOL = id => {
-    const k = id[0];
-    return k==='A'?'#fb923c': k==='B'?'#c084fc': k==='C'?'#38bdf8':
-           k==='X'?'#f59e0b': k==='U'?'#4ade80': '#67e8f9';
-  };
-  const isIO     = id => 'ABC'.includes(id[0]);
-  const isBridge = id => id[0] === 'X';
   traces.push({
     type:'scatter', mode:'markers+text',
-    x: allN.map(id => pos[id]?.[0] ?? 0),
-    y: allN.map(id => pos[id]?.[1] ?? 0),
-    text: allN.map(id => {
-      if (!isIO(id)) return '';
-      return `${id}\n${Number(nodes[id]?.x ?? 0).toFixed(2)}`;
-    }),
-    textposition: allN.map(id => id[0]==='B' ? 'bottom center' : 'top center'),
-    textfont:{ size:9, color: allN.map(id => NCOL(id)) },
     marker:{
-      size: allN.map(id => {
-        const v    = Math.abs(nodes[id]?.vel ?? 0);
-        const base = isIO(id) ? 18 : isBridge(id) ? 13 : 10;
-        return base + Math.min(v*30, 8);
-      }),
-      symbol: allN.map(id => isBridge(id) ? 'diamond' : 'circle'),
-      color:  allN.map(id => NCOL(id)),
-      opacity: allN.map(id => 0.75 + Math.min(Math.abs(nodes[id]?.vel??0)*1.8, 0.25)),
-      line:{
-        width: allN.map(id => isBridge(id) ? 3.0 : 2.5),
-        color: allN.map(id =>
-          isBridge(id)          ? '#d97706'
-          : nodes[id]?.anchored ? '#ef4444'
-                                : '#22c55e'
-        )
-      }
     },
-    hoverinfo:'none', showlegend:false
   });
-  return traces;
-}
-function meshLayout(nodes, layers, n_inputs, n_upper, n_lower) {
-  const bridgeNodeIds = Object.keys(nodes).filter(id => id[0] === 'X');
-  const pos  = buildPos(layers, n_inputs, n_upper, n_lower, bridgeNodeIds);
-  const xMax = Math.max(5.5, n_inputs * 2.8);
-  return {
-    margin:{l:8,r:8,t:8,b:8},
-    paper_bgcolor:'transparent', plot_bgcolor:'transparent',
-    xaxis:{visible:false, range:[-xMax, xMax]},
-    yaxis:{visible:false, range:[-5.5, 5.5]},
-    showlegend:false,
-    shapes: busShapes(pos, n_inputs),
-  };
 }
 const ERR_LAYOUT = {
@@ -647,86 +502,65 @@ setInterval(async () => {
     const r = await fetch('/state');
     const d = await r.json();
-    syncTopoUI(d.n_inputs, d.n_upper, d.n_lower);
-    crossConnect = d.cross_connect;
-    nBridges     = d.n_bridges || 0;
-    bridgeK      = d.bridge_k  || 0.20;
-    updateCrossUI();
-    document.getElementById('b-alpha').innerText  = `α:${d.back_alpha.toFixed(2)}`;
-    document.getElementById('b-data').innerText   = (d.dataset_type||'').slice(0,6).toUpperCase();
     const mBadge = document.getElementById('b-mode');
-    mBadge.innerText  = d.mode === 'training' ? 'TRAIN' : 'INFER';
-    mBadge.className  = d.mode === 'training'
       ? 'px-1.5 py-0.5 rounded bg-yellow-900/60 text-yellow-300 border border-yellow-800/60 text-[8px] font-bold'
       : 'px-1.5 py-0.5 rounded bg-green-900/60 text-green-300 border border-green-800/60 text-[8px] font-bold';
-    document.getElementById('run-dot').className =
-      `w-2 h-2 rounded-full ${d.running ? 'bg-green-400' : 'bg-slate-700'}`;
     document.getElementById('q-lbl').innerText    = `Q:${d.queue_size}`;
     document.getElementById('iter-lbl').innerText = `IT:${d.iter}`;
-    const e   = Math.abs(d.error);
     const col = e < 0.02 ? 'text-green-400' : e < 2 ? 'text-yellow-400' : 'text-red-400';
     document.getElementById('err-big').className = `text-xl font-bold ${col} leading-none`;
-    document.getElementById('err-big').innerText  = d.error.toFixed(4);
-    const preds = d.predictions || [d.prediction];
-    document.getElementById('pred-val').innerText =
-      preds.length === 1 ? `P:${preds[0].toFixed(3)}`
-                         : `P:[${preds.map(v=>v.toFixed(2)).join(',')}]`;
-    // Nodes pane
-    const order = d.layers.flat();
     let nh = '';
-    order.forEach(id => {
-      const n = d.nodes[id]; if (!n || !'ABC'.includes(id[0])) return;
-      const icon = n.anchored ? '<span class="text-red-400">⊠</span>' : '<span class="text-green-500">◎</span>';
-      const COLS = {A:'#fb923c',B:'#c084fc',C:'#38bdf8'};
-      nh += `<div class="flex justify-between items-center py-0.5 border-b border-slate-900">
-        ${icon}<span class="ml-1 font-bold" style="color:${COLS[id[0]]}">${id}</span>
-        <span class="text-white font-bold">${Number(n.x).toFixed(4)}</span>
-        <span class="text-slate-700 text-[8px]">v:${(n.vel||0).toFixed(3)}</span>
-      </div>`;
-    });
-    // Bridge nodes summary
-    const bridgeIds = Object.keys(d.nodes).filter(id => id[0] === 'X');
-    if (bridgeIds.length) {
-      nh += `<div class="text-[8px] text-amber-600 py-0.5 border-b border-slate-900">
-        ⬡ ${bridgeIds.length} bridge nodes — passive k=${bridgeK}</div>`;
-      bridgeIds.forEach(id => {
-        const n = d.nodes[id];
         nh += `<div class="flex justify-between items-center py-0.5 border-b border-slate-900/50">
-          <span class="text-amber-500 text-[9px]">◆ ${id}</span>
-          <span class="text-amber-300 font-bold">${Number(n.x).toFixed(4)}</span>
-          <span class="text-slate-700 text-[8px]">v:${(n.vel||0).toFixed(3)}</span>
         </div>`;
       });
-    }
-    const hids = order.filter(id => 'UL'.includes(id[0]));
-    if (hids.length) {
-      const avgV = hids.reduce((s,id) => s + Math.abs(d.nodes[id]?.vel||0), 0) / hids.length;
-      nh += `<div class="text-[8px] text-slate-600 py-0.5">${hids.length} hidden — avg|vel|=${avgV.toFixed(3)}</div>`;
-    }
     document.getElementById('pane-nodes').innerHTML = nh;
-    // Springs pane — learnable first, then bridge springs in amber
     let sh = '';
-    for (const [key, k] of Object.entries(d.springs)) {
-      const kc  = k < 0 ? 'text-blue-300' : k > 4 ? 'text-yellow-200' : 'text-purple-300';
-      sh += `<div class="flex justify-between py-0.5 border-b border-slate-900">
-        <span class="text-slate-500 text-[9px]">${key}</span>
-        <span class="${kc} font-bold text-[10px]">${k.toFixed(4)}</span></div>`;
-    }
-    const bs = d.bridge_springs || {};
-    if (Object.keys(bs).length) {
-      sh += `<div class="text-[8px] text-amber-600 py-0.5 border-b border-slate-800 mt-1">⬡ BRIDGE (passive, fixed)</div>`;
-      for (const [key, k] of Object.entries(bs)) {
-        sh += `<div class="flex justify-between py-0.5 border-b border-slate-900/50">
-          <span class="text-amber-700 text-[9px]">${key}</span>
-          <span class="text-amber-400 font-bold text-[10px]">${k.toFixed(4)}</span></div>`;
-      }
-    }
     document.getElementById('pane-springs').innerHTML = sh;
     // Logs
@@ -734,10 +568,9 @@ setInterval(async () => {
       d.logs.map(l => `<div class="py-0.5 border-b border-slate-900/50">${l}</div>`).join('');
     // Mesh plot
-    const layerKey = JSON.stringify(d.layers) + d.cross_connect + d.n_bridges;
-    const bridgeSprings = d.bridge_springs || {};
-    const traces  = buildTraces(d.nodes, d.springs, bridgeSprings, d.layers, d.n_inputs, d.n_upper, d.n_lower);
-    const layout  = meshLayout(d.nodes, d.layers, d.n_inputs, d.n_upper, d.n_lower);
     if (!meshPlotted || layerKey !== lastLayerKey) {
       Plotly.newPlot('mesh-plot', traces, layout, {displayModeBar:false, responsive:true});
       meshPlotted = true; lastLayerKey = layerKey;

 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Stacked Elastic Mesh Lab</title>
   <script src="https://cdn.tailwindcss.com"></script>
   <script src="https://cdn.plot.ly/plotly-2.24.1.min.js"></script>
   <style>
     <span id="b-mode"  class="px-1.5 py-0.5 rounded bg-yellow-900/60 text-yellow-300 border border-yellow-800/60">TRAIN</span>
     <span id="b-arch"  class="px-1.5 py-0.5 rounded bg-blue-900/60   text-blue-300   border border-blue-800/60">ADDIT</span>
     <span id="b-alpha" class="px-1.5 py-0.5 rounded bg-orange-900/60 text-orange-300 border border-orange-800/60">α:0.45</span>
+    <span id="b-stack" class="px-1.5 py-0.5 rounded bg-emerald-900/60 text-emerald-300 border border-emerald-800/60">STACK:0</span>
+    <span id="b-cred"  class="px-1.5 py-0.5 rounded bg-fuchsia-900/60 text-fuchsia-300 border border-fuchsia-800/60">CREDIT</span>
+    <span id="b-data"  class="px-1.5 py-0.5 rounded bg-pink-900/60 text-pink-300 border border-pink-800/60">HOUSNG</span>
+    <!-- D · U · L quick buttons -->
     <span class="px-1.5 py-0.5 rounded bg-green-900/60 text-green-300 border border-green-800/60 flex items-center gap-0.5">
       <span class="text-yellow-300 mr-0.5">D</span>
       <button class="lbtn" onclick="quickL('inputs',-1)">−</button>
       <button class="lbtn" onclick="quickL('lower',+1)">+</button>
     </span>
+    <!-- STIFFNESS INDICATOR -->
+    <div class="flex items-center gap-1.5 px-2 border-l border-slate-700 ml-2" title="Realtime active LMS adjustments">
+      <span class="text-[7px] text-slate-500 uppercase tracking-wider">Learning</span>
+      <div class="w-16 bg-slate-900 rounded-sm h-2 overflow-hidden border border-slate-700">
+        <div id="stiff-bar" class="bg-amber-400 h-full transition-all duration-500 ease-out" style="width:0%"></div>
+      </div>
+      <span id="stiff-lbl" class="text-[8px] text-amber-500 w-5 text-right font-bold">0%</span>
+    </div>
   </div>
   <div class="flex items-center gap-2 ml-1">
     <span id="q-lbl"   class="text-[8px] text-slate-600">Q:0</span>
     <div   id="run-dot" class="w-2 h-2 rounded-full bg-slate-700"></div>
     <button onclick="openDrawer()" class="text-[10px] bg-blue-700 hover:bg-blue-600 px-2 py-1 rounded font-bold">⚙ DIALS</button>
 <!-- ── BOTTOM PANEL ─────────────────────────────────────────────────────────── -->
 <div class="glass flex-shrink-0 border-t border-slate-800" style="height:174px">
   <div class="flex border-b border-slate-800 text-[10px]">
+    <button onclick="tab('nodes')"   id="tab-nodes"   class="flex-1 py-1.5 bg-blue-900/40 text-blue-300 font-bold">UNITS</button>
     <button onclick="tab('springs')" id="tab-springs" class="flex-1 py-1.5 text-slate-500">SPRINGS</button>
     <button onclick="tab('logs')"    id="tab-logs"    class="flex-1 py-1.5 text-slate-500">LOGS</button>
   </div>
     <div class="w-20 flex-shrink-0 border-r border-slate-800 flex flex-col items-center justify-center p-1 gap-0.5">
       <div class="text-[7px] text-slate-600 uppercase tracking-widest">Tension</div>
       <div id="err-big"  class="text-xl font-bold text-red-400 leading-none">0.00</div>
+      <div id="pred-val" class="text-[8px] text-slate-500 text-center w-full truncate">P:—</div>
       <div id="iter-lbl" class="text-[8px] text-slate-700">IT:0</div>
     </div>
     <div class="flex-grow overflow-y-auto p-1.5 text-[10px]">
 <!-- ── DRAWER ───────────────────────────────────────────────────────────────── -->
 <aside id="drawer" class="drawer-closed fixed inset-x-0 bottom-0 glass border-t border-slate-700 p-4 flex flex-col gap-3 max-h-[93vh] overflow-y-auto">
   <div class="flex justify-between items-center">
+    <span class="text-emerald-400 font-bold text-sm">STACKED ELASTIC MESH (TRE)</span>
     <button onclick="closeDrawer()" class="text-slate-400 text-2xl leading-none">✕</button>
   </div>
     <!-- MODE -->
     <div class="col-span-2 bg-slate-900 rounded p-3 border border-yellow-900/50">
+      <div class="text-yellow-400 text-[9px] font-bold mb-1">EXECUTION MODE</div>
       <div class="flex gap-2">
         <button class="tog on flex-1 py-2 rounded text-xs font-bold bg-yellow-700"
           onclick="setMode('training',this,'bg-yellow-700')">TRAINING</button>
       </div>
     </div>
+    <!-- STACK TOPOLOGY -->
+    <div class="col-span-2 bg-slate-900 rounded p-3 border border-emerald-900/50">
+      <div class="text-emerald-400 text-[9px] font-bold mb-2">STACKED ARCHITECTURE (Binary Tree)</div>
+      <div class="flex gap-2 items-center mb-2">
+        <select id="cfg-stack" onchange="updateTopoUI()" class="flex-1 bg-black border border-slate-700 p-2 text-white text-xs rounded">
+          <option value="0">Flat (Level 0 Only) - Independent HGs</option>
+          <option value="1">Stack Level 1 (2 inputs → 1 final HG)</option>
+          <option value="2">Stack Level 2 (4 inputs → 2 HGs → 1 final HG)</option>
+          <option value="3">Stack Level 3 (8 inputs → 4 HGs → 2 HGs → 1 final)</option>
+          <option value="4">Stack Level 4 (16 inputs → 8 → 4 → 2 → 1 final)</option>
+        </select>
+        <div class="bg-slate-800 p-2 rounded text-center border border-slate-700 w-24">
+          <div class="text-slate-400 text-[8px] mb-1">RAW DIMS</div>
+          <input id="cfg-inputs" type="number" value="1" min="1" max="16" class="w-full bg-black border border-slate-700 text-center text-white rounded text-sm p-0.5">
+        </div>
+      </div>
+      <div class="flex gap-4">
+        <label class="flex items-center gap-1.5 cursor-pointer">
+          <input type="checkbox" id="cfg-rev" class="accent-emerald-500 w-3 h-3">
+          <span class="text-[9px] text-slate-400">Reverse Mode (C → A/B Decoder)</span>
+        </label>
+        <label class="flex items-center gap-1.5 cursor-pointer">
+          <input type="checkbox" id="cfg-ind" class="accent-emerald-500 w-3 h-3">
+          <span class="text-[9px] text-slate-400">Train Leaves on local GT</span>
+        </label>
+      </div>
+    </div>
+    <!-- CREDIT ASSIGNMENT -->
+    <div class="col-span-2 bg-slate-900 rounded p-3 border border-fuchsia-900/50">
+      <div class="text-fuchsia-400 text-[9px] font-bold mb-2">CREDIT ASSIGNMENT (Training)</div>
+      <select id="cfg-cred" class="w-full bg-black border border-slate-700 p-2 text-white text-xs rounded">
+        <option value="elastic_backprop">Elastic Backprop (Sensitivity Chain Rule)</option>
+        <option value="greedy">Greedy Depth Scaling</option>
+        <option value="param_hg">Parametric HG (Full Error Shared)</option>
+        <option value="independent">Independent Layer Training</option>
+      </select>
+      <div class="text-[8px] text-slate-500 mt-1 italic">Determines how final C error flows backwards to intermediate springs.</div>
+    </div>
+    <!-- ARCH & ALPHA -->
     <div class="bg-slate-900 rounded p-3 border border-blue-900/50">
       <div class="text-blue-400 text-[9px] font-bold mb-2">NODE ACTIVATION</div>
       <button class="tog on w-full mb-1 py-2 rounded text-[10px] font-bold bg-blue-700"
         onclick="pick('architecture','multiplicative',this,'bg-blue-700')">MULTIPLICATIVE Π</button>
     </div>
     <div class="bg-slate-900 rounded p-3 border border-orange-900/50">
       <div class="text-orange-400 text-[9px] font-bold mb-1">BACK-TENSION α</div>
       <input id="alpha-sl" type="range" min="0" max="100" value="45" step="5"
       <div class="text-center text-orange-300 font-bold text-xl mt-0.5" id="alpha-val">0.45</div>
     </div>
+    <!-- H-BULGES -->
+    <div class="col-span-2 bg-slate-900 rounded p-2 text-center border border-slate-700 grid grid-cols-2 gap-2">
+      <div class="bg-slate-800 rounded p-2 text-center border border-orange-900/40">
+        <div class="text-orange-400 text-[8px] mb-1">UPPER ROW (U)</div>
+        <div class="flex items-center justify-center gap-2">
+          <button class="lbtn text-sm" onclick="chL('upper',-1)">−</button>
+          <span id="dial-upper" class="text-orange-300 font-bold text-2xl w-8 text-center">3</span>
+          <button class="lbtn text-sm" onclick="chL('upper',+1)">+</button>
         </div>
+      </div>
+      <div class="bg-slate-800 rounded p-2 text-center border border-cyan-900/40">
+        <div class="text-cyan-400 text-[8px] mb-1">LOWER ROW (L)</div>
+        <div class="flex items-center justify-center gap-2">
+          <button class="lbtn text-sm" onclick="chL('lower',-1)">−</button>
+          <span id="dial-lower" class="text-cyan-300 font-bold text-2xl w-8 text-center">3</span>
+          <button class="lbtn text-sm" onclick="chL('lower',+1)">+</button>
         </div>
       </div>
     </div>
   </div>
     APPLY &amp; REBUILD TOPOLOGY
   </button>
+  <!-- DATASET & CUSTOM -->
+  <div class="grid grid-cols-2 gap-2">
+    <div class="bg-slate-900 rounded p-3 border border-pink-900/50">
+      <div class="text-pink-400 text-[9px] font-bold mb-2">DATASET</div>
+      <select id="ds-sel" onchange="refreshDS()" class="w-full bg-black border border-slate-700 p-2 text-white text-xs rounded mb-2">
+        <option value="housing">Housing (A×2.5+B×1.2)</option>
+        <option value="subtraction">Subtraction (A−B)</option>
+        <option value="multiplication">Multiplication (A×B)</option>
+        <option value="quadratic">Quadratic (A²+B)</option>
+      </select>
+      <div class="flex gap-2">
+        <input id="batch-n" type="number" value="30" class="w-16 bg-black border border-slate-700 p-2 text-white text-sm text-center rounded">
+        <button onclick="startBatch()" class="flex-1 bg-pink-800 hover:bg-pink-700 py-2 text-xs font-bold rounded">START BATCH</button>
+      </div>
     </div>
+    <div class="bg-slate-900 rounded p-3 border border-cyan-900/50">
+      <div class="text-cyan-400 text-[9px] font-bold mb-1">CUSTOM INPUT</div>
+      <div class="text-[8px] text-slate-500 mb-1">Comma-separated if D>1</div>
+      <input id="ca" type="text" value="5" placeholder="A vals" class="w-full bg-black border border-slate-700 p-1.5 text-white text-xs text-center rounded mb-1">
+      <input id="cb" type="text" value="3" placeholder="B vals" class="w-full bg-black border border-slate-700 p-1.5 text-white text-xs text-center rounded mb-1">
+      <input id="cc" type="text" placeholder="C target (auto)" class="w-full bg-black border border-slate-700 p-1.5 text-white text-xs text-center rounded mb-2">
+      <button onclick="runCustom()" class="w-full bg-cyan-800 hover:bg-cyan-700 py-2 text-xs font-bold rounded">RUN CUSTOM</button>
     </div>
   </div>
+  <button onclick="halt()" class="w-full border border-red-700 text-red-500 py-2 rounded text-xs font-bold">HALT ENGINE</button>
 </aside>
 <script>
 // ── STATE ──────────────────────────────────────────────────────────────────────
 const cfg  = { mode: 'training', architecture: 'additive' };
+const topo = { inputs: 1, upper: 3, lower: 3, stack: 0 };
+function updateTopoUI() {
+  const stack = parseInt(document.getElementById('cfg-stack').value);
+  const dimInput = document.getElementById('cfg-inputs');
+  if (stack > 0) {
+    dimInput.value = Math.pow(2, stack);
+    dimInput.disabled = true;
+    dimInput.className = "w-full bg-slate-800 border border-slate-700 text-center text-slate-500 rounded text-sm p-0.5 cursor-not-allowed";
   } else {
+    dimInput.disabled = false;
+    dimInput.className = "w-full bg-black border border-slate-700 text-center text-white rounded text-sm p-0.5";
   }
 }
 function chL(w, d) {
+  const lim = { upper:[1,16], lower:[1,16] };
   topo[w] = Math.max(lim[w][0], Math.min(lim[w][1], topo[w]+d));
   document.getElementById(`dial-${w}`).innerText = topo[w];
 }
 async function quickL(w, d) {
     body: JSON.stringify({ layer: w, delta: d })
   });
   const data = await res.json();
+  syncTopoUI(data);
   meshPlotted = false;
 }
+function syncTopoUI(d) {
+  topo.inputs = d.n_inputs; topo.upper = d.n_upper; topo.lower = d.n_lower; topo.stack = d.stack_levels;
+  document.getElementById('b-inputs').innerText = d.n_inputs;
+  document.getElementById('b-upper').innerText  = d.n_upper;
+  document.getElementById('b-lower').innerText  = d.n_lower;
+  document.getElementById('dial-upper').innerText = d.n_upper;
+  document.getElementById('dial-lower').innerText = d.n_lower;
+  document.getElementById('cfg-inputs').value = d.n_inputs;
+  document.getElementById('cfg-stack').value  = d.stack_levels;
+  document.getElementById('b-stack').innerText = `STACK:${d.stack_levels}`;
+  updateTopoUI();
 }
 async function setMode(m, btn, cls) {
   btn.classList.remove('off'); btn.classList.add('on', cls);
 }
+function openDrawer()  { document.getElementById('drawer').classList.remove('drawer-closed'); }
 function closeDrawer() { document.getElementById('drawer').classList.add('drawer-closed'); }
 async function applyConfig() {
   const ds    = document.getElementById('ds-sel').value;
+  const cred  = document.getElementById('cfg-cred').value;
+  const rev   = document.getElementById('cfg-rev').checked;
+  const ind   = document.getElementById('cfg-ind').checked;
   const alpha = parseFloat(document.getElementById('alpha-sl').value) / 100;
   await fetch('/config', {
     method:'POST', headers:{'Content-Type':'application/json'},
     body: JSON.stringify({
+      ...cfg, dataset: ds, back_alpha: alpha, credit_mode: cred, reverse_mode: rev, individual_train: ind,
+      n_inputs: parseInt(document.getElementById('cfg-inputs').value),
+      n_upper: topo.upper, n_lower: topo.lower,
+      stack_levels: parseInt(document.getElementById('cfg-stack').value)
     })
   });
   document.getElementById('b-arch').innerText  = cfg.architecture.slice(0,5).toUpperCase();
   document.getElementById('b-alpha').innerText = `α:${alpha.toFixed(2)}`;
+  document.getElementById('b-cred').innerText  = cred.replace('_','').slice(0,7).toUpperCase();
   document.getElementById('b-data').innerText  = ds.slice(0,6).toUpperCase();
   meshPlotted = false;
   closeDrawer();
 }
 async function runCustom() {
   await fetch('/run_custom', {
     method:'POST', headers:{'Content-Type':'application/json'},
+    body: JSON.stringify({
+      a: document.getElementById('ca').value,
+      b: document.getElementById('cb').value,
+      c: document.getElementById('cc').value || null
+    })
   });
   closeDrawer();
 }
   closeDrawer();
 }
 function tab(name) {
   ['nodes','springs','logs'].forEach(t => {
     document.getElementById(`pane-${t}`).classList.toggle('hidden', t !== name);
   });
 }
+function refreshDS() {} // stub
+// ── VISUALIZATION (Horizontal Hierarchy) ───────────────────────────────────────
 function springColor(k) {
   const t = Math.min(Math.abs(k) / 6, 1);
 }
 /**
+ * Renders the stacked architecture side-to-side (Data flows Left -> Right).
+ * Each unit draws its A (top-left), B (bottom-left), U/L (middle), and C (right).
  */
+function buildTraces(d) {
+  const pos = {};
   const traces = [];
+  // Layout spacing configurations
+  const W_SPREAD = 5.5; // X-distance between hierarchy levels
+  const H_SPREAD = 4.0; // Y-distance between adjacent units in same level
+  const HG_W     = 2.5; // Internal width of a single Hourglass (A to C)
+  const HG_H     = 1.5; // Internal height (A to B offset)
+  // 1. Calculate positions for every unit
+  d.topology.forEach((level, lv) => {
+    const baseX = lv * W_SPREAD;
+    const N = level.length;
+    level.forEach((uid, i) => {
+      // Center Y vertically
+      const baseY = (i - (N - 1) / 2) * -H_SPREAD;
+      const u = d.units[uid];
+      // Standard Hourglass Nodes >
+      pos[`${uid}_A`] = [baseX - (HG_W/2), baseY + HG_H];
+      pos[`${uid}_B`] = [baseX - (HG_W/2), baseY - HG_H];
+      pos[`${uid}_C`] = [baseX + (HG_W/2), baseY];
+      // Bulge / Hidden nodes
+      for(let j=1; j<=u.n_upper; j++) {
+        const ty = u.n_upper === 1 ? 0 : (j-1)/(u.n_upper-1) - 0.5;
+        pos[`${uid}_U${j}`] = [baseX, baseY + (HG_H*0.7) - ty * 1.5];
+      }
+      for(let j=1; j<=u.n_lower; j++) {
+        const ty = u.n_lower === 1 ? 0 : (j-1)/(u.n_lower-1) - 0.5;
+        pos[`${uid}_L${j}`] = [baseX, baseY - (HG_H*0.7) - ty * 1.5];
+      }
     });
+  });
+  // 2. Macro-connections (Inter-Unit wiring)
+  d.connections.forEach(conn => {
+    const p1 = pos[`${conn.from_uid}_C`];
+    const p2 = pos[`${conn.to_uid}_${conn.to_port}`];
+    if(p1 && p2) {
+      // Draw bezier curves for beautiful flowing tree
+      const midX = (p1[0] + p2[0]) / 2;
+      traces.push({
+        type:'scatter', mode:'lines',
+        x: [p1[0], midX, midX, p2[0]],
+        y: [p1[1], p1[1], p2[1], p2[1]],
+        line:{color:'rgba(255,255,255,0.15)', width:2, shape:'spline'},
+        hoverinfo:'none'
+      });
+    }
+  });
+  // 3. Intra-Unit Springs
+  const allN = [];
+  Object.keys(d.units).forEach(uid => {
+    const u = d.units[uid];
+    // Spring Lines
+    Object.entries(u.springs).forEach(([key, k]) => {
+      const [n1, n2] = key.split('→');
+      const p1 = pos[`${uid}_${n1}`], p2 = pos[`${uid}_${n2}`];
+      if(p1 && p2) {
+        const [col, wd] = springColor(k);
+        traces.push({
+          type:'scatter', mode:'lines', x:[p1[0], p2[0]], y:[p1[1], p2[1]],
+          line:{color:col, width:wd}, hoverinfo:'none'
+        });
+      }
+    });
+    // Collect nodes for scatter
+    allN.push({ id:`${uid}_A`, x:pos[`${uid}_A`][0], y:pos[`${uid}_A`][1], v:u.a_val, t:'A' });
+    allN.push({ id:`${uid}_B`, x:pos[`${uid}_B`][0], y:pos[`${uid}_B`][1], v:u.b_val, t:'B' });
+    allN.push({ id:`${uid}_C`, x:pos[`${uid}_C`][0], y:pos[`${uid}_C`][1], v:u.c_val, t:'C' });
+    for(let j=1; j<=u.n_upper; j++) {
+      const nd = u.nodes[`U${j}`];
+      allN.push({ id:`${uid}_U${j}`, x:pos[`${uid}_U${j}`][0], y:pos[`${uid}_U${j}`][1], vel:nd.vel, t:'U' });
+    }
+    for(let j=1; j<=u.n_lower; j++) {
+      const nd = u.nodes[`L${j}`];
+      allN.push({ id:`${uid}_L${j}`, x:pos[`${uid}_L${j}`][0], y:pos[`${uid}_L${j}`][1], vel:nd.vel, t:'L' });
+    }
+  });
+  // 4. Node Markers
+  const NCOL = t => t==='A'?'#fb923c': t==='B'?'#c084fc': t==='C'?'#38bdf8': t==='U'?'#4ade80':'#67e8f9';
   traces.push({
     type:'scatter', mode:'markers+text',
+    x: allN.map(n => n.x), y: allN.map(n => n.y),
+    text: allN.map(n => 'ABC'.includes(n.t) ? Number(n.v).toFixed(2) : ''),
+    textposition: 'top center',
+    textfont:{ size:9, color: allN.map(n => NCOL(n.t)) },
     marker:{
+      size: allN.map(n => 'ABC'.includes(n.t) ? 14 : 10 + Math.min(Math.abs(n.vel||0)*30, 8)),
+      color: allN.map(n => NCOL(n.t)),
+      line:{ width:2, color:'#22c55e' }
     },
+    hoverinfo:'none'
   });
+  const N_Lvs = d.topology.length;
+  const N_Max = d.topology[0].length;
+  const xMax = (N_Lvs - 1) * W_SPREAD + (HG_W*1.5);
+  const xMin = -(HG_W*1.5);
+  const yMax = Math.max(5, (N_Max/2) * H_SPREAD + 1);
+  return { traces, layout: {
+    margin:{l:8,r:8,t:8,b:8}, paper_bgcolor:'transparent', plot_bgcolor:'transparent',
+    xaxis:{visible:false, range:[xMin, xMax]}, yaxis:{visible:false, range:[-yMax, yMax]},
+    showlegend:false
+  }};
 }
 const ERR_LAYOUT = {
     const r = await fetch('/state');
     const d = await r.json();
+    // Sync UI Top Bar variables
+    syncTopoUI(d);
+    document.getElementById('b-cred').innerText  = d.credit_mode.replace('_','').slice(0,7).toUpperCase();
+    document.getElementById('b-alpha').innerText = `α:${d.back_alpha.toFixed(2)}`;
+    document.getElementById('b-data').innerText  = (d.dataset_type||'').slice(0,6).toUpperCase();
     const mBadge = document.getElementById('b-mode');
+    mBadge.innerText = d.mode === 'training' ? 'TRAIN' : 'INFER';
+    mBadge.className = d.mode === 'training'
       ? 'px-1.5 py-0.5 rounded bg-yellow-900/60 text-yellow-300 border border-yellow-800/60 text-[8px] font-bold'
       : 'px-1.5 py-0.5 rounded bg-green-900/60 text-green-300 border border-green-800/60 text-[8px] font-bold';
+    // Stiffness Bar Animation
+    const stiffAct = d.stiffness_active || 0;
+    const sBar = document.getElementById('stiff-bar');
+    sBar.style.width = `${stiffAct}%`;
+    sBar.className = `h-full transition-all duration-500 ease-out ${stiffAct > 0.1 ? 'bg-amber-400' : 'bg-slate-700'}`;
+    document.getElementById('stiff-lbl').innerText = `${stiffAct.toFixed(1)}%`;
+    document.getElementById('run-dot').className = `w-2 h-2 rounded-full ${d.running ? 'bg-green-400' : 'bg-slate-700'}`;
     document.getElementById('q-lbl').innerText    = `Q:${d.queue_size}`;
     document.getElementById('iter-lbl').innerText = `IT:${d.iter}`;
+    const e = Math.abs(d.error);
     const col = e < 0.02 ? 'text-green-400' : e < 2 ? 'text-yellow-400' : 'text-red-400';
     document.getElementById('err-big').className = `text-xl font-bold ${col} leading-none`;
+    document.getElementById('err-big').innerText = d.error.toFixed(4);
+    document.getElementById('pred-val').innerText = `P: ${d.prediction.toFixed(4)}`;
+    // Nodes/Units pane
     let nh = '';
+    d.topology.forEach((level, lv) => {
+      nh += `<div class="text-[8px] text-emerald-600 py-1 font-bold border-b border-slate-800 mt-1">LEVEL ${lv} UNITS</div>`;
+      level.forEach(uid => {
+        const u = d.units[uid];
+        const kCol = u.stiffness_delta > 0 ? 'text-amber-400' : 'text-slate-600';
         nh += `<div class="flex justify-between items-center py-0.5 border-b border-slate-900/50">
+          <span class="text-white font-bold text-[9px] w-12">${uid.replace('HG_','')}</span>
+          <span class="text-slate-500 text-[8px] font-mono">I:[<span class="text-orange-300">${u.a_val.toFixed(2)}</span>,<span class="text-purple-300">${u.b_val.toFixed(2)}</span>] → O:<span class="text-cyan-300">${u.c_val.toFixed(3)}</span></span>
+          <span class="${kCol} text-[8px] w-10 text-right">Δk:${u.stiffness_delta.toFixed(0)}%</span>
         </div>`;
       });
+    });
     document.getElementById('pane-nodes').innerHTML = nh;
+    // Springs pane
     let sh = '';
+    d.topology.forEach((level, lv) => {
+      level.forEach(uid => {
+        const u = d.units[uid];
+        sh += `<div class="text-[8px] text-emerald-700 py-1 font-bold border-b border-slate-800 mt-1">${uid.replace('HG_','')}</div>`;
+        Object.entries(u.springs).forEach(([key, k]) => {
+          const kc = k < 0 ? 'text-blue-300' : k > 4 ? 'text-yellow-200' : 'text-purple-300';
+          sh += `<div class="flex justify-between py-0.5 border-b border-slate-900/50">
+            <span class="text-slate-500 text-[9px]">${key}</span>
+            <span class="${kc} font-bold text-[10px]">${k.toFixed(4)}</span></div>`;
+        });
+      });
+    });
     document.getElementById('pane-springs').innerHTML = sh;
     // Logs
       d.logs.map(l => `<div class="py-0.5 border-b border-slate-900/50">${l}</div>`).join('');
     // Mesh plot
+    const layerKey = JSON.stringify(d.topology) + d.n_upper + d.n_lower;
+    const { traces, layout } = buildTraces(d);
     if (!meshPlotted || layerKey !== lastLayerKey) {
       Plotly.newPlot('mesh-plot', traces, layout, {displayModeBar:false, responsive:true});
       meshPlotted = true; lastLayerKey = layerKey;