testing_space

Runtime error

App Files Files Community

everydaytok commited on 6 days ago

Commit

7518706

verified ·

1 Parent(s): 731b39e

Update index.html

Browse files

Files changed (1) hide show

index.html +160 -418

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>
@@ -11,224 +11,129 @@
     .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-upper" class="w-3 text-center text-white">3</span>
-      <button class="lbtn" onclick="quickL('upper',+1)">+</button>
-      <span class="text-cyan-400 mx-1">L</span>
-      <button class="lbtn" onclick="quickL('lower',-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]'
@@ -236,261 +141,98 @@ function tab(name) {
   });
 }
-// ── 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
-  });
-  return traces;
-}
-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 ──────────────────────────────────────────────────────────────────────
 setInterval(async () => {
   try {
-    const r = await fetch('/state');
-    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>

 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Scalar Fabric Logic Mesh</title>
   <script src="https://cdn.tailwindcss.com"></script>
   <script src="https://cdn.plot.ly/plotly-2.24.1.min.js"></script>
   <style>
     .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%); }
     .ptype { display:inline-block; padding:1px 5px; border-radius:3px; font-size:9px; font-weight:bold; }
+    .pt-blend { background:#1e3a2f; color:#4ade80; }
+    .pt-diff  { background:#1e2d4a; color:#60a5fa; }
+    .pt-route { background:#3a1e3a; color:#e879f9; }
+    .pt-manual{ background:#3a2a1e; color:#fb923c; }
   </style>
 </head>
 <body class="flex flex-col h-screen overflow-hidden">
 <header class="glass flex-shrink-0 px-2 py-1.5 flex justify-between items-center gap-1">
   <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-slate-800 text-slate-400 border border-slate-700">IDLE</span>
+    <span id="b-type" class="ptype pt-blend">—</span>
+    <span id="b-dim" class="px-1.5 py-0.5 rounded bg-slate-900 text-slate-600 border border-slate-800">D:8</span>
   </div>
   <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="postAct('/halt')" class="text-[9px] bg-red-900 hover:bg-red-800 px-2 py-1 rounded font-bold shadow">■ HALT</button>
+    <button onclick="openDrawer()" class="text-[9px] bg-slate-700 hover:bg-slate-600 px-2 py-1 rounded font-bold shadow">⚙ CONTROLS</button>
   </div>
 </header>
+<div class="flex-grow flex flex-col min-h-[30vh] overflow-hidden relative">
+  <div id="error-box" class="hidden absolute top-0 w-full bg-red-900 text-white p-2 text-xs font-bold z-50"></div>
+  <div id="mesh-plot" class="flex-grow w-full"></div>
+  <div id="err-plot" style="height:56px" class="flex-shrink-0 border-t border-slate-900 hidden md:block"></div>
 </div>
+<div class="glass flex-shrink-0 border-t border-slate-800 h-48">
   <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 (A, C, B)</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">
+    <div class="w-24 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">mean error</div>
+      <div id="err-big" class="text-xl font-bold text-red-400 leading-none">0.00</div>
     </div>
+    <div class="flex-grow overflow-y-auto p-1.5 text-[10px] pb-6">
       <div id="pane-nodes"></div>
       <div id="pane-accuracy" class="hidden"></div>
+      <div id="pane-logs" class="hidden text-[9px] text-slate-500"></div>
     </div>
   </div>
 </div>
+<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 pb-10 shadow-2xl">
   <div class="flex justify-between items-center">
+    <span class="text-orange-400 font-bold">FABRIC CONTROL</span>
     <button onclick="closeDrawer()" class="text-slate-400 text-2xl leading-none">✕</button>
   </div>
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
+    <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</div>
+      <div class="flex gap-2 items-center">
+        <input id="ep-n" type="number" value="15" class="w-16 bg-black border border-slate-700 p-1 text-white text-sm text-center rounded">
+        <label class="text-[9px] text-slate-500 flex-1">Epochs</label>
+        <button onclick="doTrain()" class="bg-purple-800 hover:bg-purple-700 px-4 py-2 text-xs font-bold rounded">⚡ TRAIN</button>
       </div>
     </div>
+    <div class="bg-slate-900 rounded p-3 border border-green-900/50">
+      <div class="text-green-400 text-[9px] font-bold mb-2">BATCH INFERENCE (EWC)</div>
+      <div class="flex gap-2 items-center">
+        <input id="inf-n" type="number" value="200" class="w-16 bg-black border border-slate-700 p-1 text-white text-sm text-center rounded">
+        <label class="text-[9px] text-slate-500 flex-1">Samples</label>
+        <button onclick="doInfer()" class="bg-green-800 hover:bg-green-700 px-4 py-2 text-xs font-bold rounded">▶ RUN</button>
+      </div>
     </div>
   </div>
+  <div class="bg-slate-900 rounded p-3 border border-orange-900/50">
+    <div class="text-orange-400 text-[9px] font-bold mb-2">MANUAL INJECTION (D:8)</div>
+    <div class="space-y-2">
+      <div>
+        <label class="text-[8px] text-slate-500 block mb-0.5">Input A</label>
+        <input id="man-a" type="text" value="0.9, 0.1, 0.5, 0.2, 0.8, 0.3, 0.7, 0.4" class="w-full bg-black border border-slate-700 p-1.5 text-orange-200 text-xs rounded font-mono">
+      </div>
+      <div>
+        <label class="text-[8px] text-slate-500 block mb-0.5">Input B</label>
+        <input id="man-b" type="text" value="0.1, 0.9, 0.5, 0.8, 0.2, 0.7, 0.3, 0.6" class="w-full bg-black border border-slate-700 p-1.5 text-cyan-200 text-xs rounded font-mono">
+      </div>
+      <button onclick="doManual()" class="w-full bg-orange-900 hover:bg-orange-800 py-2 text-xs font-bold rounded mt-1">INJECT MANUAL ARRAYS</button>
     </div>
   </div>
 </aside>
 <script>
+let plotted = false;
 function openDrawer()  { document.getElementById('drawer').classList.remove('drawer-closed'); }
 function closeDrawer() { document.getElementById('drawer').classList.add('drawer-closed'); }
+async function postAct(route) { try { await fetch(route, {method:'POST'}); } catch(e) { showError("Connection lost."); } }
+async function doTrain() {
   const ep = parseInt(document.getElementById('ep-n').value);
+  await fetch('/train', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({epochs:ep})});
+  closeDrawer();
 }
 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 doManual() {
+  const a = document.getElementById('man-a').value;
+  const b = document.getElementById('man-b').value;
+  const res = await fetch('/manual', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({a:a, b:b})});
+  const data = await res.json();
+  if(!data.ok) alert(data.error); else closeDrawer();
+}
+function showError(msg) {
+    const box = document.getElementById('error-box');
+    box.innerText = msg; box.classList.remove('hidden');
+}
 function tab(name) {
+  ['nodes','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]'
   });
 }
 setInterval(async () => {
   try {
+      const res = await fetch('/state');
+      if (!res.ok) throw new Error("Server error");
+      const d = await res.json();
+      document.getElementById('error-box').classList.add('hidden');
+      const mcolor = {train:'bg-yellow-700 text-yellow-100', infer:'bg-green-800 text-green-100', manual:'bg-orange-800 text-orange-100'}[d.mode] || 'bg-slate-800';
+      document.getElementById('b-mode').className = `px-1.5 py-0.5 rounded text-[8px] font-bold ${mcolor}`;
+      document.getElementById('b-mode').innerText = (d.mode||'IDLE').toUpperCase();
+      document.getElementById('b-type').className = `ptype pt-${d.current_type}`;
+      document.getElementById('b-type').innerText = d.current_type;
+      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}`;
+      const col = d.error < 0.05 ? 'text-green-400' : d.error < 0.15 ? '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('pane-logs').innerHTML = d.logs.map(l => `<div>${l}</div>`).join('');
+      let ah = "";
+      if(Object.keys(d.type_acc).length > 0) {
+          ah += `<table class="w-full text-left border-collapse">
+            <tr class="text-slate-600 border-b border-slate-800"><th>Type</th><th>N</th><th>Avg Err</th></tr>`;
+          for(const [t, v] of Object.entries(d.type_acc)) {
+              ah += `<tr class="border-b border-slate-900/60">
+                <td class="py-1 text-orange-300 font-bold">${t}</td>
+                <td class="text-slate-400">${v.n}</td>
+                <td class="text-white">${v.avg_err}</td>
+              </tr>`;
+          }
+          ah += `</table>`;
+      } else { ah = "No inference data yet. Run Batch Inference."; }
+      document.getElementById('pane-accuracy').innerHTML = ah;
+      let nh = "";
+      ['A','C','B'].forEach(kind => {
+         const k_nodes = Object.values(d.nodes).filter(n => n.kind === kind).sort((a,b)=>a.col-b.col);
+         if(k_nodes.length === 0) return;
+         const vals = k_nodes.map(n => n.x.toFixed(2)).join(', ');
+         const color = kind==='A'?'text-orange-400':kind==='B'?'text-purple-400':'text-sky-400';
+         nh += `<div class="mb-1"><span class="${color} font-bold w-4 inline-block">${kind}:</span><span class="font-mono text-slate-300 tracking-wider">${vals}</span></div>`;
+      });
+      document.getElementById('pane-nodes').innerHTML = nh;
+      const traces = [];
+      const nodes = Object.values(d.nodes);
+      for(const [key, K] of Object.entries(d.springs)) {
+          const parts = key.split('|');
+          if (parts.length !== 2) continue;
+          if(!d.nodes[parts[0]] || !d.nodes[parts[1]]) continue;
+          const pu = d.nodes[parts[0]].pos, pv = d.nodes[parts[1]].pos;
+          // Stiff/Positive = Amber, Repulsive/Negative = Cyan
+          const color = K > 0 ? `rgba(217,119,6,${Math.min(K/1.5,1)})` : `rgba(6,182,212,${Math.min(Math.abs(K)/1.5,1)})`;
+          traces.push({
+              type:'scatter', mode:'lines', x:[pu[0], pv[0]], y:[pu[1], pv[1]],
+              line:{ color: color, width: 1.0 + Math.abs(K)*2.0 }, hoverinfo:'none', showlegend:false
+          });
       }
+      traces.push({
+          type:'scatter', mode:'markers+text',
+          x: nodes.map(n => n.pos[0]), y: nodes.map(n => n.pos[1]),
+          text: nodes.map(n => n.x.toFixed(2)),
+          textposition: 'top center', textfont: {size: 10, color: '#9ca3af'},
+          marker: {
+              size: 16, color: nodes.map(n => n.x), colorscale: 'Viridis',
+              line: {color: nodes.map(n => ['A','B','C'].includes(n.kind)?'#ef4444':'#171717'), width: 2}
+          },
+          showlegend:false
+      });
+      const layout = {
+          margin:{l:5,r:5,t:5,b:5}, paper_bgcolor:'transparent', plot_bgcolor:'transparent',
+          xaxis:{visible:false}, yaxis:{visible:false, scaleanchor:'x'},
+      };
+      if(!plotted) { Plotly.newPlot('mesh-plot', traces, layout, {responsive:true}); plotted = true; }
+      else { Plotly.react('mesh-plot', traces, layout); }
+      if(document.getElementById('err-plot').offsetWidth > 0 && d.hist.length > 0) {
+        Plotly.react('err-plot', [{y: d.hist, type:'scatter', line:{color:'#22c55e'}}], {
+            margin:{l:30,r:10,t:10,b:15}, paper_bgcolor:'transparent', plot_bgcolor:'transparent',
+            xaxis:{visible:false}, yaxis:{gridcolor:'#262626'}
+        });
+      }
+  } catch (e) { showError("UI Error: " + e.message); }
+}, 250);
 </script>
 </body>
 </html>