Update index.html

index.html

@@ -15,8 +15,8 @@
     .tog.on  { color:#fff; }
     .tog.off { background:#1e293b !important; color:#64748b; }
     .lbtn {
-      width:22px; height:22px; background:#1e293b; border:1px solid #334155;
-      border-radius:4px; color:#94a3b8; font-weight:bold; font-size:14px;
+      width:20px; height:20px; background:#1e293b; border:1px solid #334155;
+      border-radius:3px; color:#94a3b8; font-weight:bold; font-size:12px;
       cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
     }
     .lbtn:hover { background:#334155; color:#fff; }
@@ -30,8 +30,13 @@
     <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>
+    <!-- Topology inline controls: D · U · L -->
     <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-orange-400 mr-0.5">U</span>
+      <span class="text-yellow-300 mr-0.5">D</span>
+      <button class="lbtn" onclick="quickL('inputs',-1)">−</button>
+      <span id="b-inputs" class="w-3 text-center text-white">1</span>
+      <button class="lbtn" onclick="quickL('inputs',+1)">+</button>
+      <span class="text-orange-400 mx-1">U</span>
       <button class="lbtn" onclick="quickL('upper',-1)">−</button>
       <span id="b-upper" class="w-3 text-center text-white">3</span>
       <button class="lbtn" onclick="quickL('upper',+1)">+</button>
@@ -43,8 +48,8 @@
     <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">
-    <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>
+    <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>
   </div>
 </header>
@@ -86,14 +91,17 @@
 
   <div class="grid grid-cols-2 gap-2">
 
-    <!-- MODE -->
+    <!-- MODE — immediate, no mesh rebuild -->
     <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-2">EXECUTION MODE</div>
+      <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="pick('mode','training',this,'bg-yellow-700')">TRAINING</button>
+          onclick="setMode('training',this,'bg-yellow-700')">TRAINING</button>
         <button class="tog off flex-1 py-2 rounded text-xs font-bold"
-          onclick="pick('mode','inference',this,'bg-yellow-700')">INFERENCE</button>
+          onclick="setMode('inference',this,'bg-yellow-700')">INFERENCE</button>
       </div>
     </div>
 
@@ -113,33 +121,41 @@
         class="w-full accent-orange-500 mt-1"
         oninput="document.getElementById('alpha-val').innerText=(this.value/100).toFixed(2)">
       <div class="text-center text-orange-300 font-bold text-xl mt-0.5" id="alpha-val">0.45</div>
-      <div class="text-[8px] text-slate-600 text-center mt-0.5">elastic coupling A↕B</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-3">
-        HOURGLASS TOPOLOGY
-        <span class="text-slate-500 font-normal ml-1">A → [upper] → C ← [lower] ← B</span>
+      <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-2 gap-3">
-        <div class="bg-slate-800 rounded p-3 text-center border border-orange-900/40">
-          <div class="text-orange-400 text-[8px] mb-1">UPPER BULGE (A-side)</div>
-          <div class="flex items-center justify-center gap-3">
-            <button class="lbtn text-base" onclick="chL('upper',-1)">−</button>
-            <span id="dial-upper" class="text-orange-300 font-bold text-3xl w-8 text-center">3</span>
-            <button class="lbtn text-base" onclick="chL('upper',+1)">+</button>
+      <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-[8px] text-slate-600 mt-1">U nodes</div>
+          <div class="text-[7px] text-slate-600 mt-1">per dim</div>
         </div>
-        <div class="bg-slate-800 rounded p-3 text-center border border-cyan-900/40">
-          <div class="text-cyan-400 text-[8px] mb-1">LOWER BULGE (B-side)</div>
-          <div class="flex items-center justify-center gap-3">
-            <button class="lbtn text-base" onclick="chL('lower',-1)">−</button>
-            <span id="dial-lower" class="text-cyan-300 font-bold text-3xl w-8 text-center">3</span>
-            <button class="lbtn text-base" onclick="chL('lower',+1)">+</button>
+        <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-[8px] text-slate-600 mt-1">L nodes</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>
@@ -148,13 +164,13 @@
 
   <button onclick="applyConfig()"
     class="w-full bg-white text-black py-3 rounded font-bold text-sm hover:bg-slate-200">
-    APPLY CONFIG &amp; RESET MESH
+    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">(hidden from mesh)</span>
+      <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">
@@ -172,26 +188,28 @@
     </div>
   </div>
 
-  <!-- CUSTOM -->
+  <!-- CUSTOM INPUT — accepts comma-separated for n>1 -->
   <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-cyan-400 text-[9px] font-bold mb-1">CUSTOM INPUT
+      <span id="custom-dim-hint" class="text-slate-600 font-normal ml-1">(D=1: single value)</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="number" value="5" step="0.1"
+        <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="number" value="3" step="0.1"
+        <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="number" placeholder="auto" step="0.1"
+        <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>
@@ -205,43 +223,64 @@
 </aside>
 
 <script>
-// ── STATE ──────────────────────────────────────────────────────────────────────
+// ── LOCAL STATE ────────────────────────────────────────────────────────────────
 const cfg  = { mode: 'training', architecture: 'additive' };
-const topo = { upper: 3, lower: 3 };
+const topo = { inputs: 1, upper: 3, lower: 3 };
 
-function springCount() {
-  const { upper: u, lower: l } = topo;
-  return `Springs: ${u} (A→U) + ${u} (U→C) + ${l} (B→L) + ${l} (L→C) = ${2*u + 2*l} total`;
-}
 function updateSpringCount() {
-  document.getElementById('spring-count').innerText = springCount();
+  const { inputs: n, upper: u, lower: l } = topo;
+  const total = n * (2*u + 2*l);
+  document.getElementById('spring-count').innerText =
+    `D=${n}: ${n}×(${u}+${u}+${l}+${l}) = ${total} springs total`;
+  // Update custom input placeholder hints
+  const hint = n === 1
+    ? '(D=1: single value)'
+    : `(D=${n}: comma-separated, e.g. 5,3,7)`;
+  document.getElementById('custom-dim-hint').innerText = hint;
 }
 
 function chL(w, d) {
-  topo[w] = Math.max(1, Math.min(8, topo[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) {
-  const res = await fetch('/set_layer', {
-    method: 'POST', headers: {'Content-Type':'application/json'},
+  const res  = await fetch('/set_layer', {
+    method:'POST', headers:{'Content-Type':'application/json'},
     body: JSON.stringify({ layer: w, delta: d })
   });
   const data = await res.json();
-  topo.upper = data.n_upper; topo.lower = data.n_lower;
-  syncTopoUI();
+  syncTopoUI(data.n_inputs, data.n_upper, data.n_lower);
   meshPlotted = false;
 }
 
-function syncTopoUI() {
-  ['upper','lower'].forEach(k => {
-    document.getElementById(`b-${k}`).innerText    = topo[k];
-    document.getElementById(`dial-${k}`).innerText = topo[k];
-  });
+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();
 }
 
+// Mode toggle — immediate, no mesh rebuild
+async function setMode(m, btn, cls) {
+  cfg.mode = m;
+  btn.parentElement.querySelectorAll('.tog').forEach(b => {
+    b.classList.add('off'); b.classList.remove('on', cls);
+  });
+  btn.classList.remove('off'); btn.classList.add('on', cls);
+  await fetch('/set_mode', {
+    method:'POST', headers:{'Content-Type':'application/json'},
+    body: JSON.stringify({ mode: m })
+  });
+  document.getElementById('b-mode').innerText = m === 'training' ? 'TRAIN' : 'INFER';
+}
+
 function pick(key, val, btn, cls) {
   cfg[key] = val;
   btn.parentElement.querySelectorAll('.tog').forEach(b => {
@@ -260,10 +299,9 @@ async function applyConfig() {
     method:'POST', headers:{'Content-Type':'application/json'},
     body: JSON.stringify({
       ...cfg, dataset: ds, back_alpha: alpha,
-      n_upper: topo.upper, n_lower: topo.lower
+      n_inputs: topo.inputs, n_upper: topo.upper, n_lower: topo.lower
     })
   });
-  document.getElementById('b-mode').innerText  = cfg.mode === 'training' ? 'TRAIN' : 'INFER';
   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();
@@ -297,10 +335,10 @@ async function halt() {
 
 // ── DATASET META ──────────────────────────────────────────────────────────────
 const DS = {
-  housing:       { hint:'A×2.5+B×1.2',  fn:(a,b)=>(a*2.5+b*1.2).toFixed(3), ex:[{a:4,b:2},{a:6,b:3}] },
-  subtraction:   { hint:'A−B',           fn:(a,b)=>(a-b).toFixed(3),          ex:[{a:8,b:3},{a:5,b:5}] },
-  multiplication:{ hint:'A×B',           fn:(a,b)=>(a*b).toFixed(3),          ex:[{a:6,b:7},{a:3,b:9}] },
-  quadratic:     { hint:'A²+B',          fn:(a,b)=>(a*a+b).toFixed(3),        ex:[{a:3,b:2},{a:4,b:5}] },
+  housing:       { hint:'A×2.5+B×1.2 per dimension',  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 dimension',           fn:(a,b)=>(a-b).toFixed(3),          ex:[{a:8,b:3},{a:5,b:5}] },
+  multiplication:{ hint:'A×B per dimension',           fn:(a,b)=>(a*b).toFixed(3),          ex:[{a:6,b:7},{a:3,b:9}] },
+  quadratic:     { hint:'A²+B per dimension',          fn:(a,b)=>(a*a+b).toFixed(3),        ex:[{a:3,b:2},{a:4,b:5}] },
 };
 
 function refreshDS() {
@@ -319,12 +357,29 @@ function fillC(a, b) {
   updateExpected();
 }
 
+function parseInputVals(str) {
+  return String(str).split(',').map(s => parseFloat(s.trim())).filter(x => !isNaN(x));
+}
+
 function updateExpected() {
-  const a = document.getElementById('ca').value, b = document.getElementById('cb').value;
+  const a = document.getElementById('ca').value;
+  const b = document.getElementById('cb').value;
   const ds = document.getElementById('ds-sel').value;
-  if (a && b && DS[ds])
-    document.getElementById('expected-lbl').innerText =
-      `Ground truth: ${DS[ds].fn(parseFloat(a), parseFloat(b))}`;
+  if (!a || !b || !DS[ds]) return;
+  const fn    = DS[ds].fn;
+  const aVals = parseInputVals(a);
+  const bVals = parseInputVals(b);
+  if (!aVals.length || !bVals.length) return;
+  const n = Math.max(topo.inputs, 1);
+  const results = [];
+  for (let i = 0; i < n; i++) {
+    const av = aVals[i % aVals.length];
+    const bv = bVals[i % bVals.length];
+    results.push(fn(av, bv));
+  }
+  document.getElementById('expected-lbl').innerText =
+    n === 1 ? `Ground truth: ${results[0]}`
+            : `Ground truth: [${results.join(', ')}]`;
 }
 
 refreshDS();
@@ -341,63 +396,66 @@ function tab(name) {
 }
 
 // ── VISUALIZATION ─────────────────────────────────────────────────────────────
-//
-//  Vertical bilateral hourglass — exact sketch match:
-//
-//        ┌─────────┐    ← A bus  (top rectangle, orange)
-//        └─────────┘
-//       /  U1 U2 U3 \   ← upper bulge (fan-out from A)
-//      /             \
-//      └──────C──────┘  ← C waist  (center rectangle, cyan)
-//      \             /
-//       \  L1 L2 L3 /   ← lower bulge (fan-in to B)
-//        ┌─────────┐    ← B bus  (bottom rectangle, purple)
-//        └─────────┘
-//
-// Y axis: A=+4.4, upper bulge=+2.0, C=0, lower bulge=-2.0, B=-4.4
-
-const Y = { A: 4.4, U: 2.1, C: 0.0, L: -2.1, B: -4.4 };
-
-function layerX(ids, spread) {
-  const n = ids.length;
-  return ids.map((_, i) => n === 1 ? 0 : spread * (2*i/(n-1) - 1));
-}
 
-function buildPos(layers) {
-  // layers = [['A'], ['U1'..'Un'], ['C'], ['L1'..'Ln'], ['B']]
+function buildPos(layers, n_inputs, n_upper, n_lower) {
   const pos = {};
-  const spreads = [0, 3.8, 0, 3.8, 0];
-  const ys      = [Y.A, Y.U, Y.C, Y.L, Y.B];
+  const Y   = [4.4, 2.1, 0.0, -2.1, -4.4];
+
+  // Column spacing — for n=1 centered, for n>1 evenly spread
+  const COL_W      = n_inputs === 1 ? 0 : Math.min(9.0 / (n_inputs - 1), 4.2);
+  const halfSpan   = COL_W * (n_inputs - 1) / 2;
+  // Within-column spread for bulge nodes
+  const bulgeSprd  = n_inputs === 1 ? 3.8 : Math.min(COL_W * 0.58, 2.0);
+
   layers.forEach((layer, li) => {
-    const xs = layerX(layer, spreads[li]);
-    layer.forEach((id, i) => { pos[id] = [xs[i], ys[li]]; });
+    const y = Y[li];
+    layer.forEach(nid => {
+      const kind = nid[0]; // A U C L B
+      let dim = 1;
+      if (kind === 'A' || kind === 'B' || kind === 'C') {
+        dim = parseInt(nid.slice(1));
+      } else {
+        dim = parseInt(nid.slice(1).split('_')[0]);
+      }
+      const cx = n_inputs === 1 ? 0 : -halfSpan + (dim - 1) * COL_W;
+
+      if (kind === 'A' || kind === 'B' || kind === 'C') {
+        pos[nid] = [cx, y];
+      } else {
+        const j     = parseInt(nid.slice(1).split('_')[1]);
+        const total = kind === 'U' ? n_upper : n_lower;
+        const t     = total === 1 ? 0 : (2*(j-1)/(total-1) - 1);
+        pos[nid] = [cx + bulgeSprd * t, y];
+      }
+    });
   });
   return pos;
 }
 
-// Bus rectangle shapes
-function busShapes(pos) {
-  const sh = [];
-  const rect = (xc, yc, hw, hh, fill, stroke) => sh.push({
-    type: 'rect', xref: 'x', yref: 'y',
-    x0: xc-hw, x1: xc+hw, y0: yc-hh, y1: yc+hh,
-    fillcolor: fill, line: { color: stroke, width: 2 }
+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}
   });
-  rect(0, Y.A, 2.2, 0.35, 'rgba(251,146,60,0.10)', 'rgba(251,146,60,0.65)');  // A bus
-  rect(0, Y.C, 1.8, 0.32, 'rgba(56,189,248,0.10)', 'rgba(56,189,248,0.70)');  // C waist
-  rect(0, Y.B, 2.2, 0.35, 'rgba(192,132,252,0.10)','rgba(192,132,252,0.65)'); // B bus
+  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;
 }
 
-// Spring color: positive = amber warmth, negative = cool blue
 function springColor(k) {
   const t = Math.min(Math.abs(k) / 6, 1);
-  if (k >= 0) return [`rgb(${Math.round(180+t*70)},${Math.round(100+t*80)},30)`,  1.0 + t*3.5];
-  return              [`rgb(30,${Math.round(80+t*100)},${Math.round(140+t*115)})`, 1.0 + t*3.5];
+  if (k >= 0) return [`rgb(${Math.round(180+t*70)},${Math.round(100+t*80)},30)`,  1.0+t*3.5];
+  return              [`rgb(30,${Math.round(80+t*100)},${Math.round(140+t*115)})`, 1.0+t*3.5];
 }
 
-function buildTraces(nodes, springs, layers) {
-  const pos    = buildPos(layers);
+function buildTraces(nodes, springs, layers, n_inputs, n_upper, n_lower) {
+  const pos    = buildPos(layers, n_inputs, n_upper, n_lower);
   const traces = [];
 
   // Edges
@@ -408,44 +466,41 @@ function buildTraces(nodes, springs, layers) {
     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 },
+      line:{color:col, width:wd},
       hoverinfo:'none', showlegend:false
     });
   }
 
-  // Nodes
+  // Nodes — show labels only for A/B/C; hidden nodes are plain dots
   const allN = layers.flat();
-  const nodeCol = id => {
-    if (id === 'A') return '#fb923c';
-    if (id === 'B') return '#c084fc';
-    if (id === 'C') return '#38bdf8';
-    if (id.startsWith('U')) return '#4ade80';
-    return '#67e8f9';
+  const NCOL = id => {
+    const k = id[0];
+    return k==='A'?'#fb923c': k==='B'?'#c084fc': k==='C'?'#38bdf8':
+           k==='U'?'#4ade80': '#67e8f9';
   };
+  const isIO = id => 'ABC'.includes(id[0]);
 
   traces.push({
     type:'scatter', mode:'markers+text',
-    x: allN.map(id => pos[id][0]),
-    y: allN.map(id => pos[id][1]),
+    x: allN.map(id => pos[id]?.[0] ?? 0),
+    y: allN.map(id => pos[id]?.[1] ?? 0),
     text: allN.map(id => {
-      const xv = Number(nodes[id]?.x ?? 0).toFixed(2);
-      return `${id}\n${xv}`;
-    }),
-    textposition: allN.map(id => {
-      if (id === 'A') return 'top center';
-      if (id === 'B') return 'bottom center';
-      return 'top center';
+      if (!isIO(id)) return '';
+      return `${id}\n${Number(nodes[id]?.x ?? 0).toFixed(2)}`;
     }),
-    textfont:{ size:9, color: allN.map(id => nodeCol(id)) },
+    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 = ['A','B','C'].includes(id) ? 20 : 13;
-        return base + Math.min(v * 30, 9);
+        const v = Math.abs(nodes[id]?.vel ?? 0);
+        return (isIO(id) ? 18 : 10) + Math.min(v*30, 8);
       }),
-      color: allN.map(id => nodeCol(id)),
-      opacity: allN.map(id => 0.75 + Math.min(Math.abs(nodes[id]?.vel ?? 0) * 1.8, 0.25)),
-      line:{ width:2.5, color: allN.map(id => nodes[id]?.anchored ? '#ef4444' : '#22c55e') }
+      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:2.5,
+        color: allN.map(id => nodes[id]?.anchored ? '#ef4444' : '#22c55e')
+      }
     },
     hoverinfo:'none', showlegend:false
   });
@@ -453,23 +508,24 @@ function buildTraces(nodes, springs, layers) {
   return traces;
 }
 
-function meshLayout(layers) {
-  const pos = buildPos(layers);
+function meshLayout(layers, n_inputs, n_upper, n_lower) {
+  const pos  = buildPos(layers, n_inputs, n_upper, n_lower);
+  const xMax = Math.max(5.5, n_inputs * 2.8);
   return {
-    margin:{ l:8, r:8, t:8, b:8 },
+    margin:{l:8,r:8,t:8,b:8},
     paper_bgcolor:'transparent', plot_bgcolor:'transparent',
-    xaxis:{ visible:false, range:[-5.5, 5.5] },
-    yaxis:{ visible:false, range:[-5.5, 5.5] },
+    xaxis:{visible:false, range:[-xMax, xMax]},
+    yaxis:{visible:false, range:[-5.5, 5.5]},
     showlegend:false,
-    shapes: busShapes(pos),
+    shapes: busShapes(pos, n_inputs),
   };
 }
 
 const ERR_LAYOUT = {
-  margin:{ l:30, r:6, t:3, b:12 },
+  margin:{l:30,r:6,t:3,b:12},
   paper_bgcolor:'transparent', plot_bgcolor:'transparent',
-  xaxis:{ visible:false },
-  yaxis:{ color:'#334155', gridcolor:'#0f172a', zeroline:true, zerolinecolor:'#22c55e', zerolinewidth:1 },
+  xaxis:{visible:false},
+  yaxis:{color:'#334155', gridcolor:'#0f172a', zeroline:true, zerolinecolor:'#22c55e', zerolinewidth:1},
   showlegend:false,
 };
 
@@ -482,11 +538,17 @@ setInterval(async () => {
     const d = await r.json();
 
     // Sync topo
-    topo.upper = d.n_upper; topo.lower = d.n_lower;
-    syncTopoUI();
+    syncTopoUI(d.n_inputs, d.n_upper, d.n_lower);
     document.getElementById('b-alpha').innerText = `α:${d.back_alpha.toFixed(2)}`;
+    document.getElementById('b-data').innerText  = (d.dataset_type||'').slice(0,6).toUpperCase();
+
+    // Mode badge — reflect actual server state
+    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';
 
-    // Header
     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}`;
@@ -494,22 +556,37 @@ setInterval(async () => {
 
     // Tension
     const e   = Math.abs(d.error);
-    const col = e < 0.05 ? 'text-green-400' : e < 2 ? 'text-yellow-400' : 'text-red-400';
+    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(3)}`;
 
-    // Nodes pane — ordered top→bottom
+    // Prediction display — show all C values for multi-dim
+    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 — A/B/C nodes first, then a summary of hidden
     const order = d.layers.flat();
     let nh = '';
     order.forEach(id => {
       const n = d.nodes[id]; if (!n) return;
+      if (!'ABC'.includes(id[0])) return;  // skip hidden in main list
       const icon = n.anchored ? '<span class="text-red-400">⊠</span>' : '<span class="text-green-500">◎</span>';
-      const vel  = `<span class="text-slate-700 text-[8px] ml-1">v:${(n.vel||0).toFixed(3)}</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 text-sky-300">${id}</span>
-        <span class="text-white font-bold">${Number(n.x).toFixed(4)}</span>${vel}</div>`;
+        ${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>`;
     });
+    // Hidden nodes summary
+    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 border-b border-slate-900">
+        ${hids.length} hidden — avg|vel|=${avgV.toFixed(3)}</div>`;
+    }
     document.getElementById('pane-nodes').innerHTML = nh;
 
     // Springs pane
@@ -528,10 +605,10 @@ setInterval(async () => {
 
     // Mesh plot
     const layerKey = JSON.stringify(d.layers);
-    const traces   = buildTraces(d.nodes, d.springs, d.layers);
-    const layout   = meshLayout(d.layers);
+    const traces   = buildTraces(d.nodes, d.springs, d.layers, d.n_inputs, d.n_upper, d.n_lower);
+    const layout   = meshLayout(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 });
+      Plotly.newPlot('mesh-plot', traces, layout, {displayModeBar:false, responsive:true});
       meshPlotted = true; lastLayerKey = layerKey;
     } else {
       Plotly.react('mesh-plot', traces, layout);
@@ -542,14 +619,14 @@ setInterval(async () => {
     const eTrace = {
       type:'scatter', mode:'lines',
       x: hist.map((_,i)=>i), y: hist,
-      line:{ color:'#f97316', width:1.5 },
+      line:{color:'#f97316',width:1.5},
       fill:'tozeroy', fillcolor:'rgba(249,115,22,0.07)'
     };
     if (!errPlotted) {
-      Plotly.newPlot('err-plot', [eTrace], ERR_LAYOUT, { displayModeBar:false, responsive:true });
+      Plotly.newPlot('err-plot',[eTrace],ERR_LAYOUT,{displayModeBar:false,responsive:true});
       errPlotted = true;
     } else {
-      Plotly.react('err-plot', [eTrace], ERR_LAYOUT);
+      Plotly.react('err-plot',[eTrace],ERR_LAYOUT);
     }
 
   } catch(e) { /* silent */ }