testing_space

Runtime error

App Files Files Community

everydaytok commited on 9 days ago

Commit

78f28cf

verified ·

1 Parent(s): 86fab25

Update index.html

Browse files

Files changed (1) hide show

index.html +284 -347

index.html CHANGED Viewed

@@ -11,25 +11,33 @@
     .glass { background:rgba(10,18,35,0.98); border:1px solid #1e2d40; }
     #drawer { transition:transform .3s ease; z-index:200; }
     .drawer-closed { transform:translateY(100%); }
-    .tog { transition:all .15s; }
-    .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;
       cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
     }
     .lbtn:hover { background:#334155; color:#fff; }
   </style>
 </head>
 <body class="flex flex-col h-screen overflow-hidden">
 <!-- ── HEADER ──────────────────────────────────────────────────────────────── -->
-<header class="glass flex-shrink-0 px-2 py-1.5 flex justify-between items-center">
-  <div class="flex flex-wrap gap-1 text-[8px] font-bold items-center">
-    <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 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>
       <button class="lbtn" onclick="quickL('upper',-1)">−</button>
@@ -40,412 +48,279 @@
       <span id="b-lower" class="w-3 text-center text-white">3</span>
       <button class="lbtn" onclick="quickL('lower',+1)">+</button>
     </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>
   </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>
   </div>
 </header>
 <!-- ── PLOTS ────────────────────────────────────────────────────────────────── -->
 <div class="flex-grow flex flex-col min-h-0 overflow-hidden">
   <div id="mesh-plot" class="flex-grow min-h-0"></div>
-  <div id="err-plot" style="height:58px" class="flex-shrink-0 border-t border-slate-900"></div>
 </div>
 <!-- ── 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>
   <div class="flex h-full overflow-hidden">
     <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]">
       <div id="pane-nodes"></div>
-      <div id="pane-springs" class="hidden"></div>
-      <div id="pane-logs"    class="hidden text-[9px] text-slate-500"></div>
     </div>
   </div>
 </div>
 <!-- ── 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>
-  <div class="grid grid-cols-2 gap-2">
-    <!-- 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-2">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="pick('mode','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>
-      </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"
-        onclick="pick('architecture','additive',this,'bg-blue-700')">ADDITIVE Σ</button>
-      <button class="tog off w-full py-2 rounded text-[10px] font-bold"
-        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"
-        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>
-      <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>
-          <div class="text-[8px] text-slate-600 mt-1">U nodes</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>
-          <div class="text-[8px] text-slate-600 mt-1">L nodes</div>
         </div>
       </div>
-      <div id="spring-count" class="text-center text-[8px] text-slate-600 mt-2"></div>
     </div>
   </div>
-  <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
-  </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>
     </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</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"
-          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"
-          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"
-          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 = { 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();
-}
-function chL(w, d) {
-  topo[w] = Math.max(1, Math.min(8, 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'},
-    body: JSON.stringify({ layer: w, delta: d })
-  });
-  const data = await res.json();
-  topo.upper = data.n_upper; topo.lower = data.n_lower;
-  syncTopoUI();
-  meshPlotted = false;
-}
-function syncTopoUI() {
   ['upper','lower'].forEach(k => {
     document.getElementById(`b-${k}`).innerText    = topo[k];
     document.getElementById(`dial-${k}`).innerText = topo[k];
   });
-  updateSpringCount();
 }
-function pick(key, val, btn, cls) {
-  cfg[key] = val;
-  btn.parentElement.querySelectorAll('.tog').forEach(b => {
-    b.classList.add('off'); b.classList.remove('on', 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_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();
-  meshPlotted = false;
-  closeDrawer();
 }
-async function startBatch() {
-  await fetch('/generate', {
-    method:'POST', headers:{'Content-Type':'application/json'},
-    body: JSON.stringify({ count: parseInt(document.getElementById('batch-n').value) })
-  });
-  closeDrawer();
 }
-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();
 }
-async function halt() {
-  await fetch('/halt', { method:'POST' });
-  closeDrawer();
-}
-// ── 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}] },
-};
-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 updateExpected() {
-  const a = document.getElementById('ca').value, 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))}`;
-}
-refreshDS();
-updateSpringCount();
 // ── TABS ──────────────────────────────────────────────────────────────────────
 function tab(name) {
-  ['nodes','springs','logs'].forEach(t => {
     document.getElementById(`pane-${t}`).classList.toggle('hidden', t !== name);
     document.getElementById(`tab-${t}`).className = t === name
-      ? 'flex-1 py-1.5 bg-blue-900/40 text-blue-300 font-bold text-[10px]'
-      : 'flex-1 py-1.5 text-slate-500 text-[10px]';
   });
 }
 // ── 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']]
   const pos = {};
-  const spreads = [0, 3.8, 0, 3.8, 0];
-  const ys      = [Y.A, Y.U, Y.C, Y.L, Y.B];
   layers.forEach((layer, li) => {
-    const xs = layerX(layer, spreads[li]);
-    layer.forEach((id, i) => { pos[id] = [xs[i], ys[li]]; });
   });
   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 }
   });
-  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
   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];
 }
 function buildTraces(nodes, springs, layers) {
-  const pos    = buildPos(layers);
   const traces = [];
-  // 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
     });
   }
-  // Nodes
   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';
-  };
   traces.push({
     type:'scatter', mode:'markers+text',
     x: allN.map(id => pos[id][0]),
     y: allN.map(id => pos[id][1]),
     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';
-    }),
-    textfont:{ size:9, color: allN.map(id => nodeCol(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);
       }),
-      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') }
     },
     hoverinfo:'none', showlegend:false
   });
@@ -454,25 +329,36 @@ function buildTraces(nodes, springs, layers) {
 }
 function meshLayout(layers) {
-  const pos = buildPos(layers);
   return {
-    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] },
     showlegend:false,
-    shapes: busShapes(pos),
   };
 }
 const ERR_LAYOUT = {
-  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 },
   showlegend:false,
 };
 let meshPlotted = false, errPlotted = false, lastLayerKey = '';
 // ── POLL ──────────────────────────────────────────────────────────────────────
@@ -482,78 +368,129 @@ setInterval(async () => {
     const d = await r.json();
     // Sync topo
-    topo.upper = d.n_upper; topo.lower = d.n_lower;
-    syncTopoUI();
-    document.getElementById('b-alpha').innerText = `α:${d.back_alpha.toFixed(2)}`;
-    // 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}`;
-    document.getElementById('iter-lbl').innerText = `IT:${d.iter}`;
-    // Tension
-    const e   = Math.abs(d.error);
-    const col = e < 0.05 ? '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
-    const order = d.layers.flat();
     let nh = '';
-    order.forEach(id => {
       const n = d.nodes[id]; if (!n) return;
       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>`;
-      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>`;
     });
     document.getElementById('pane-nodes').innerHTML = nh;
-    // Springs pane
     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>`;
     }
     document.getElementById('pane-springs').innerHTML = sh;
-    // Logs
     document.getElementById('pane-logs').innerHTML =
-      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);
     const traces   = buildTraces(d.nodes, d.springs, d.layers);
     const layout   = meshLayout(d.layers);
     if (!meshPlotted || layerKey !== lastLayerKey) {
-      Plotly.newPlot('mesh-plot', traces, layout, { displayModeBar:false, responsive:true });
-      meshPlotted = true; lastLayerKey = layerKey;
     } else {
       Plotly.react('mesh-plot', traces, layout);
     }
-    // Error chart
-    const hist = d.history;
     const eTrace = {
       type:'scatter', mode:'lines',
-      x: hist.map((_,i)=>i), y: hist,
-      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 });
       errPlotted = true;
     } else {
       Plotly.react('err-plot', [eTrace], ERR_LAYOUT);
     }
   } catch(e) { /* silent */ }
-}, 200);
 </script>
 </body>
 </html>

     .glass { background:rgba(10,18,35,0.98); border:1px solid #1e2d40; }
     #drawer { transition:transform .3s ease; z-index:200; }
     .drawer-closed { transform:translateY(100%); }
     .lbtn {
+      width:20px; height:20px; background:#1e293b; border:1px solid #334155;
+      border-radius:3px; color:#94a3b8; font-weight:bold; font-size:13px;
       cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
     }
     .lbtn:hover { background:#334155; color:#fff; }
+    .ptype { display:inline-block; padding:1px 5px; border-radius:3px; font-size:9px; font-weight:bold; }
+    .pt-box_proj  { background:#1e3a2f; color:#4ade80; }
+    .pt-halfspace { background:#1e2d4a; color:#60a5fa; }
+    .pt-sphere    { background:#3a1e3a; color:#e879f9; }
+    .pt-simplex   { background:#3a2a1e; color:#fb923c; }
+    .pt-elastic   { background:#3a1e1e; color:#f87171; }
+    .pt-unknown   { background:#1e1e1e; color:#64748b; }
   </style>
 </head>
 <body class="flex flex-col h-screen overflow-hidden">
 <!-- ── HEADER ──────────────────────────────────────────────────────────────── -->
+<header class="glass flex-shrink-0 px-2 py-1.5 flex justify-between items-center gap-1">
+  <!-- Mode + topology badges -->
+  <div class="flex flex-wrap gap-1 items-center text-[8px] font-bold">
+    <span id="b-mode"  class="px-1.5 py-0.5 rounded bg-yellow-900/60 text-yellow-300 border border-yellow-800/60">IDLE</span>
+    <span id="b-type"  class="px-1.5 py-0.5 rounded bg-slate-800 text-slate-400 border border-slate-700">—</span>
+    <span id="b-dim"   class="px-1.5 py-0.5 rounded bg-slate-900 text-slate-600 border border-slate-800">D:32</span>
+    <!-- Inline topology 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>
       <button class="lbtn" onclick="quickL('upper',-1)">−</button>
       <span id="b-lower" class="w-3 text-center text-white">3</span>
       <button class="lbtn" onclick="quickL('lower',+1)">+</button>
     </span>
   </div>
+  <!-- Controls -->
+  <div class="flex items-center gap-1 flex-shrink-0">
+    <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="doTrainOffline()" class="text-[9px] bg-purple-800 hover:bg-purple-700 px-2 py-1 rounded font-bold">⚡ TRAIN</button>
+    <button onclick="doTrainVisual()"  class="text-[9px] bg-blue-800   hover:bg-blue-700   px-2 py-1 rounded font-bold">👁 VIZ</button>
+    <button onclick="doInfer()"        class="text-[9px] bg-green-800  hover:bg-green-700  px-2 py-1 rounded font-bold">▶ INFER</button>
+    <button onclick="doHalt()"         class="text-[9px] bg-red-900    hover:bg-red-800    px-2 py-1 rounded font-bold">■</button>
+    <button onclick="openDrawer()"     class="text-[9px] bg-slate-700  hover:bg-slate-600  px-2 py-1 rounded font-bold">⚙</button>
   </div>
 </header>
 <!-- ── PLOTS ────────────────────────────────────────────────────────────────── -->
 <div class="flex-grow flex flex-col min-h-0 overflow-hidden">
   <div id="mesh-plot" class="flex-grow min-h-0"></div>
+  <div id="err-plot"  style="height:56px" class="flex-shrink-0 border-t border-slate-900"></div>
 </div>
 <!-- ── BOTTOM PANEL ─────────────────��───────────────────────────────────────── -->
+<div class="glass flex-shrink-0 border-t border-slate-800" style="height:180px">
   <div class="flex border-b border-slate-800 text-[10px]">
+    <button onclick="tab('nodes')"    id="tab-nodes"    class="flex-1 py-1 bg-blue-900/40 text-blue-300 font-bold">NODES</button>
+    <button onclick="tab('springs')"  id="tab-springs"  class="flex-1 py-1 text-slate-500">SPRINGS</button>
+    <button onclick="tab('accuracy')" id="tab-accuracy" class="flex-1 py-1 text-slate-500">ACCURACY</button>
+    <button onclick="tab('logs')"     id="tab-logs"     class="flex-1 py-1 text-slate-500">LOGS</button>
   </div>
   <div class="flex h-full overflow-hidden">
+    <!-- Tension meter -->
     <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">‖error‖</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">‖C‖:—</div>
       <div id="iter-lbl" class="text-[8px] text-slate-700">IT:0</div>
+      <div id="step-lbl" class="text-[7px] text-slate-800">S:0</div>
     </div>
+    <!-- Panes -->
     <div class="flex-grow overflow-y-auto p-1.5 text-[10px]">
       <div id="pane-nodes"></div>
+      <div id="pane-springs"  class="hidden"></div>
+      <div id="pane-accuracy" class="hidden"></div>
+      <div id="pane-logs"     class="hidden text-[9px] text-slate-500"></div>
     </div>
   </div>
 </div>
 <!-- ── 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-[90vh] overflow-y-auto">
   <div class="flex justify-between items-center">
+    <span class="text-orange-400 font-bold">ELASTIC MESH LABORATORY</span>
     <button onclick="closeDrawer()" class="text-slate-400 text-2xl leading-none">✕</button>
   </div>
+  <!-- Architecture info (read-only for now) -->
+  <div class="bg-slate-900 rounded p-3 border border-blue-900/50 text-[9px]">
+    <div class="text-blue-400 font-bold mb-2">ARCHITECTURE</div>
+    <div class="text-slate-400 space-y-1">
+      <div>• Spring type: <span class="text-white">Matrix K ∈ ℝ^(D×D)</span> per edge</div>
+      <div>• Update rule: <span class="text-white">Matrix LMS — joint optimal step</span></div>
+      <div>• Inference:   <span class="text-white">EWC-regularised online adaptation</span></div>
+      <div>• Convergence: <span class="text-white">‖error‖ &lt; 0.08 or 400 steps</span></div>
     </div>
+  </div>
+  <!-- Topology controls (detailed) -->
+  <div class="bg-slate-900 rounded p-3 border border-green-900/50">
+    <div class="text-green-400 text-[9px] font-bold mb-2">TOPOLOGY  A → [U] → C ← [L] ← B</div>
+    <div class="grid grid-cols-2 gap-2">
+      <div class="bg-slate-800 rounded p-2 text-center border border-orange-900/30">
+        <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-base" onclick="quickL('upper',-1)">−</button>
+          <span id="dial-upper" class="text-orange-300 font-bold text-2xl">3</span>
+          <button class="lbtn text-base" onclick="quickL('upper',+1)">+</button>
         </div>
+      </div>
+      <div class="bg-slate-800 rounded p-2 text-center border border-cyan-900/30">
+        <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-base" onclick="quickL('lower',-1)">−</button>
+          <span id="dial-lower" class="text-cyan-300 font-bold text-2xl">3</span>
+          <button class="lbtn text-base" onclick="quickL('lower',+1)">+</button>
         </div>
       </div>
     </div>
+    <div id="spring-info" class="text-[8px] text-slate-600 mt-2 text-center"></div>
   </div>
+  <!-- Training controls -->
+  <div class="bg-slate-900 rounded p-3 border border-purple-900/50">
+    <div class="text-purple-400 text-[9px] font-bold mb-2">OFFLINE TRAINING  (fast, no display)</div>
+    <div class="flex gap-2 items-center mb-2">
+      <label class="text-[9px] text-slate-500 w-16">Epochs</label>
+      <input id="ep-n" type="number" value="5" min="1" max="50"
+        class="w-16 bg-black border border-slate-700 p-1 text-white text-sm text-center rounded">
+      <button onclick="doTrainOffline()"
+        class="flex-1 bg-purple-800 hover:bg-purple-700 py-2 text-xs font-bold rounded">⚡ START</button>
     </div>
+    <div class="text-[8px] text-slate-600">
+      Runs full LMS epochs at CPU speed. Fisher info accumulates for EWC.
     </div>
   </div>
+  <!-- Inference controls -->
+  <div class="bg-slate-900 rounded p-3 border border-green-900/50">
+    <div class="text-green-400 text-[9px] font-bold mb-2">INFERENCE TEST</div>
+    <div class="flex gap-2 items-center mb-2">
+      <label class="text-[9px] text-slate-500 w-16">N samples</label>
+      <input id="inf-n" type="number" value="200" min="10" max="556"
+        class="w-16 bg-black border border-slate-700 p-1 text-white text-sm text-center rounded">
+      <button onclick="doInfer()"
+        class="flex-1 bg-green-800 hover:bg-green-700 py-2 text-xs font-bold rounded">▶ RUN</button>
+    </div>
+    <div class="text-[8px] text-slate-600">
+      Mesh sees A+B only. C_pred vs C_target → accuracy per problem type.
     </div>
   </div>
+  <div class="flex gap-2">
+    <button onclick="doReset()"
+      class="flex-1 border border-slate-600 text-slate-400 py-2 rounded text-xs font-bold">RESET SPRINGS</button>
+    <button onclick="doHalt(); closeDrawer()"
+      class="flex-1 border border-red-700 text-red-500 py-2 rounded text-xs font-bold">HALT</button>
+  </div>
 </aside>
 <script>
+// ── LOCAL STATE ───────────────────────────────────────────────────────────────
 const topo = { upper: 3, lower: 3 };
+function syncTopoUI(nu, nl) {
+  topo.upper = nu; topo.lower = nl;
   ['upper','lower'].forEach(k => {
     document.getElementById(`b-${k}`).innerText    = topo[k];
     document.getElementById(`dial-${k}`).innerText = topo[k];
   });
+  const d = 32; // from server dim
+  const n = nu + nl;
+  document.getElementById('spring-info').innerText =
+    `${2*n} spring matrices × D²  =  ${2*n}×${d*d} = ${2*n*d*d} parameters`;
 }
+async function quickL(w, d) {
+  const r = await fetch('/set_layer', {
+    method:'POST', headers:{'Content-Type':'application/json'},
+    body: JSON.stringify({ layer: w, delta: d })
   });
+  const data = await r.json();
+  syncTopoUI(data.n_upper, data.n_lower);
+  meshPlotted = false;
 }
+function openDrawer()  { document.getElementById('drawer').classList.remove('drawer-closed'); }
 function closeDrawer() { document.getElementById('drawer').classList.add('drawer-closed'); }
+// ── ACTIONS ───────────────────────────────────────────────────────────────────
+async function doTrainOffline() {
+  const ep = parseInt(document.getElementById('ep-n').value);
+  await fetch('/train_offline', {
     method:'POST', headers:{'Content-Type':'application/json'},
+    body: JSON.stringify({ epochs: ep })
   });
 }
+async function doTrainVisual() {
+  await fetch('/train_visual', { method:'POST', headers:{'Content-Type':'application/json'}, body:'{}' });
 }
+async function doInfer() {
+  const n = parseInt(document.getElementById('inf-n').value);
+  await fetch('/infer', {
     method:'POST', headers:{'Content-Type':'application/json'},
+    body: JSON.stringify({ n })
   });
   closeDrawer();
 }
+async function doHalt()  { await fetch('/halt',  { method:'POST' }); }
+async function doReset() { await fetch('/reset', { method:'POST' }); meshPlotted = false; }
 // ── TABS ──────────────────────────────────────────────────────────────────────
 function tab(name) {
+  ['nodes','springs','accuracy','logs'].forEach(t => {
     document.getElementById(`pane-${t}`).classList.toggle('hidden', t !== name);
     document.getElementById(`tab-${t}`).className = t === name
+      ? 'flex-1 py-1 bg-blue-900/40 text-blue-300 font-bold text-[10px]'
+      : 'flex-1 py-1 text-slate-500 text-[10px]';
   });
 }
 // ── VISUALIZATION ─────────────────────────────────────────────────────────────
+// Vertical bilateral hourglass:
+//   A  (top bus)   → U1..Un (upper bulge)  → C (center waist)
+//   B  (bot bus)   → L1..Ln (lower bulge)  → C
+const Y = { A:4.3, U:2.0, C:0.0, L:-2.0, B:-4.3 };
+const SPREAD = { A:0, U:3.6, C:0, L:3.6, B:0 };
+const NCOL = id =>
+  id==='A' ? '#fb923c' : id==='B' ? '#c084fc' : id==='C' ? '#38bdf8' :
+  id.startsWith('U') ? '#4ade80' : '#67e8f9';
+function nodePos(layers) {
   const pos = {};
+  const ymap  = [Y.A, Y.U, Y.C, Y.L, Y.B];
+  const smap  = [SPREAD.A, SPREAD.U, SPREAD.C, SPREAD.L, SPREAD.B];
   layers.forEach((layer, li) => {
+    const n = layer.length;
+    const s = smap[li] || 0;
+    layer.forEach((id, i) => {
+      pos[id] = [n===1 ? 0 : s*(2*i/(n-1)-1), ymap[li]];
+    });
   });
   return pos;
 }
 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}
   });
+  rect(0, Y.A, 2.0, 0.32, 'rgba(251,146,60,0.09)', 'rgba(251,146,60,0.60)');
+  rect(0, Y.C, 1.6, 0.30, 'rgba(56,189,248,0.09)', 'rgba(56,189,248,0.65)');
+  rect(0, Y.B, 2.0, 0.32, 'rgba(192,132,252,0.09)','rgba(192,132,252,0.60)');
   return sh;
 }
+function springColor(frob, mean) {
+  const t = Math.min(frob / 4, 1);
+  const r = mean >= 0
+    ? [Math.round(160+t*90), Math.round(90+t*80), 30]
+    : [30, Math.round(80+t*100), Math.round(120+t*135)];
+  return [`rgb(${r[0]},${r[1]},${r[2]})`, 0.8 + t*3.2];
 }
 function buildTraces(nodes, springs, layers) {
+  const pos    = nodePos(layers);
   const traces = [];
+  // Edge traces
+  for (const [key, s] of Object.entries(springs)) {
     const [u, v] = key.split('→');
     if (!pos[u] || !pos[v]) continue;
+    const [col, wd] = springColor(s.frob, s.mean);
     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
     });
   }
+  // Node trace
   const allN = layers.flat();
   traces.push({
     type:'scatter', mode:'markers+text',
     x: allN.map(id => pos[id][0]),
     y: allN.map(id => pos[id][1]),
     text: allN.map(id => {
+      const n = nodes[id];
+      return `${id}\n‖${n?.norm?.toFixed(2) ?? '?'}‖`;
     }),
+    textposition: allN.map(id => id==='B' ? 'bottom center' : 'top center'),
+    textfont:{ size:9, color: allN.map(id => NCOL(id)) },
     marker:{
       size: allN.map(id => {
+        const vn = nodes[id]?.vel_norm ?? 0;
         const base = ['A','B','C'].includes(id) ? 20 : 13;
+        return base + Math.min(vn*20, 8);
       }),
+      color:   allN.map(id => NCOL(id)),
+      opacity: allN.map(id => 0.75 + Math.min((nodes[id]?.vel_norm??0)*1.5, 0.25)),
+      line:{
+        width:2.5,
+        color: allN.map(id => nodes[id]?.anchored ? '#ef4444' : '#22c55e')
+      }
     },
     hoverinfo:'none', showlegend:false
   });
 }
 function meshLayout(layers) {
   return {
+    margin:{l:6,r:6,t:6,b:6},
     paper_bgcolor:'transparent', plot_bgcolor:'transparent',
+    xaxis:{visible:false, range:[-5.5, 5.5]},
+    yaxis:{visible:false, range:[-5.5, 5.5]},
     showlegend:false,
+    shapes: busShapes(nodePos(layers)),
   };
 }
 const ERR_LAYOUT = {
+  margin:{l:28,r:5,t:3,b:10},
   paper_bgcolor:'transparent', plot_bgcolor:'transparent',
+  xaxis:{visible:false},
+  yaxis:{
+    color:'#334155', gridcolor:'#0f172a',
+    zeroline:true, zerolinecolor:'#22c55e', zerolinewidth:1
+  },
   showlegend:false,
 };
+// Problem type color mapping
+const TYPE_COL = {
+  box_proj:  '#4ade80',
+  halfspace: '#60a5fa',
+  sphere:    '#e879f9',
+  simplex:   '#fb923c',
+  elastic:   '#f87171',
+};
 let meshPlotted = false, errPlotted = false, lastLayerKey = '';
 // ── POLL ──────────────────────────────────────────────────────────────────────
     const d = await r.json();
     // Sync topo
+    syncTopoUI(d.n_upper, d.n_lower);
+    // Header badges
+    const modeColor = {
+      training:  'bg-yellow-700 text-yellow-100',
+      inference: 'bg-green-800 text-green-100',
+      idle:      'bg-slate-800 text-slate-400',
+    }[d.mode] || 'bg-slate-800 text-slate-400';
+    document.getElementById('b-mode').className  = `px-1.5 py-0.5 rounded text-[8px] font-bold ${modeColor}`;
+    document.getElementById('b-mode').innerText  = d.mode.toUpperCase();
+    document.getElementById('b-type').innerText  = d.current_type || '—';
+    document.getElementById('b-type').className  =
+      `ptype pt-${d.current_type || 'unknown'}`;
+    document.getElementById('b-dim').innerText   = `D:${d.dim}`;
     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}`;
+    // Tension meter
+    const e   = d.error;
+    const col = e < 0.05 ? 'text-green-400' : e < 0.5 ? 'text-yellow-400' : 'text-red-400';
     document.getElementById('err-big').className = `text-xl font-bold ${col} leading-none`;
+    document.getElementById('err-big').innerText  = e.toFixed(4);
+    document.getElementById('pred-val').innerText = `‖C‖:${d.pred_norm.toFixed(2)}`;
+    document.getElementById('iter-lbl').innerText = `IT:${d.iter}`;
+    document.getElementById('step-lbl').innerText = `S:${d.step_count}`;
+    // ── Nodes pane ───��─────────────────────────────────────────────────────
     let nh = '';
+    (d.layers || []).flat().forEach(id => {
       const n = d.nodes[id]; if (!n) return;
       const icon = n.anchored ? '<span class="text-red-400">⊠</span>' : '<span class="text-green-500">◎</span>';
+      const vcol = n.anchored ? 'text-orange-300' : 'text-sky-300';
+      const head = (n.x_head || []).map(v => v.toFixed(2)).join('  ');
+      nh += `<div class="py-0.5 border-b border-slate-900/60">
+        <div class="flex justify-between">
+          ${icon}<span class="${vcol} ml-1 font-bold">${id}</span>
+          <span class="text-white">‖x‖=${n.norm}</span>
+          <span class="text-slate-600 text-[8px]">v=${n.vel_norm.toFixed(3)}</span>
+        </div>
+        <div class="text-[8px] text-slate-700 mt-0.5 font-mono">[${head}…]</div>
+      </div>`;
     });
     document.getElementById('pane-nodes').innerHTML = nh;
+    // ── Springs pane ───────────────────────────────────────────────────────
     let sh = '';
+    for (const [key, s] of Object.entries(d.springs || {})) {
+      const fc = s.frob > 3 ? 'text-yellow-200' : s.mean < 0 ? 'text-blue-300' : 'text-purple-300';
+      const fi = s.fish > 0.01 ? 'text-orange-400' : 'text-slate-700';
+      sh += `<div class="flex justify-between py-0.5 border-b border-slate-900/60 items-center">
         <span class="text-slate-500 text-[9px]">${key}</span>
+        <span class="${fc} font-bold text-[10px]">‖K‖=${s.frob}</span>
+        <span class="text-slate-600 text-[8px]">μ=${s.mean}</span>
+        <span class="${fi} text-[8px]">F=${s.fish}</span>
+      </div>`;
     }
     document.getElementById('pane-springs').innerHTML = sh;
+    // ── Accuracy pane ──────────────────────────────────────────────────────
+    const acc  = d.type_acc || {};
+    const done = d.n_test_done || 0;
+    const total= d.test_size || 0;
+    let ah = `<div class="text-[9px] text-slate-500 mb-2">
+      Test progress: <span class="text-white font-bold">${done}</span> / ${total}
+    </div>`;
+    if (Object.keys(acc).length > 0) {
+      ah += `<table class="w-full text-[9px] border-collapse">
+        <tr class="text-slate-600 border-b border-slate-800">
+          <th class="text-left py-0.5">Type</th>
+          <th class="text-right py-0.5">N</th>
+          <th class="text-right py-0.5">Acc%</th>
+          <th class="text-right py-0.5">Avg‖e‖</th>
+        </tr>`;
+      for (const [t, v] of Object.entries(acc)) {
+        const aCol = v.acc >= 80 ? 'text-green-400' : v.acc >= 50 ? 'text-yellow-400' : 'text-red-400';
+        ah += `<tr class="border-b border-slate-900/60">
+          <td class="py-0.5"><span class="ptype pt-${t}">${t}</span></td>
+          <td class="text-right text-slate-400">${v.n}</td>
+          <td class="text-right ${aCol} font-bold">${v.acc}%</td>
+          <td class="text-right text-slate-400">${v.avg_err}</td>
+        </tr>`;
+      }
+      ah += '</table>';
+    } else {
+      ah += '<div class="text-slate-700 text-[9px]">Run inference to see per-type accuracy.</div>';
+    }
+    document.getElementById('pane-accuracy').innerHTML = ah;
+    // ── Logs pane ──────────────────────────────────────────────────────────
     document.getElementById('pane-logs').innerHTML =
+      d.logs.map(l => `<div class="py-0.5 border-b border-slate-900/40 font-mono">${l}</div>`).join('');
+    // ── Mesh plot ──────────────────────────────────────────────────────────
     const layerKey = JSON.stringify(d.layers);
     const traces   = buildTraces(d.nodes, d.springs, d.layers);
     const layout   = meshLayout(d.layers);
     if (!meshPlotted || layerKey !== lastLayerKey) {
+      Plotly.newPlot('mesh-plot', traces, layout, {displayModeBar:false, responsive:true});
+      meshPlotted  = true;
+      lastLayerKey = layerKey;
     } else {
       Plotly.react('mesh-plot', traces, layout);
     }
+    // ── Error history chart ────────────────────────────────────────────────
+    const hist = d.history || [];
     const eTrace = {
       type:'scatter', mode:'lines',
+      x: hist.map((_,i) => i), y: hist,
+      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});
       errPlotted = true;
     } else {
       Plotly.react('err-plot', [eTrace], ERR_LAYOUT);
     }
   } catch(e) { /* silent */ }
+}, 220);
 </script>
 </body>
 </html>