Upload folder using huggingface_hub

frontend/dist/assets/api.js

@@ -1,20 +1,53 @@
-/* Tiny client for /api/* endpoints.
-   Supports multiple attachments (max 2 enforced on UI side too). */
+/* ============================================================
+   Elysium API client — talks to FastAPI routes on gr.Server.
+   - Sends multipart/form-data with optional attachments
+   - Hard-caps at 2 files (server also enforces)
+   - Surfaces friendly errors so boot.js can toast them
+   ============================================================ */
 window.ElysiumAPI = {
   async turn(text, files) {
     const fd = new FormData();
     fd.append('user_text', text || '');
-    (files || []).slice(0, 2).forEach(f => fd.append('attachments', f));
+    (files || []).slice(0, 2).forEach(f => fd.append('attachments', f, f.name));
     const r = await fetch('/api/turn', { method: 'POST', body: fd });
-    if (!r.ok) throw new Error('HTTP ' + r.status);
+    if (!r.ok) {
+      let detail = '';
+      try { detail = (await r.text()).slice(0, 200); } catch {}
+      throw new Error(`HTTP ${r.status}${detail ? ': ' + detail : ''}`);
+    }
     return r.json();
   },
-  async health()      { return (await fetch('/api/health')).json(); },
-  async hypergraph()  { return (await fetch('/api/hypergraph')).json(); },
-  async nodeDetail(id){
-    const r = await fetch('/api/node/' + encodeURIComponent(id));
-    if (!r.ok) return null;
-    return r.json();
+
+  async health() {
+    try {
+      const r = await fetch('/api/health');
+      if (!r.ok) return { status: 'error' };
+      return r.json();
+    } catch { return { status: 'offline' }; }
+  },
+
+  async hypergraph() {
+    try {
+      const r = await fetch('/api/hypergraph');
+      if (!r.ok) return { nodes: [], edges: [], node_count: 0, edge_count: 0 };
+      return r.json();
+    } catch {
+      return { nodes: [], edges: [], node_count: 0, edge_count: 0 };
+    }
+  },
+
+  async nodeDetail(id) {
+    try {
+      const r = await fetch('/api/node/' + encodeURIComponent(id));
+      if (!r.ok) return null;
+      return r.json();
+    } catch { return null; }
+  },
+
+  async reset() {
+    try {
+      const r = await fetch('/api/reset', { method: 'POST' });
+      return r.ok ? r.json() : { status: 'error' };
+    } catch { return { status: 'offline' }; }
   },
-  async reset()       { return (await fetch('/api/reset',{method:'POST'})).json(); },
 };

frontend/dist/assets/boot.js

@@ -1,45 +1,83 @@
-/* Main app boot — wires UI ↔ /api/turn.
-   Critical responsibilities:
-     • NEVER render raw JSON on the canvas. JSON is parsed and routed:
-         hypergraph_delta  → canvas nodes/edges
-         council_deliberation → Council overlay + TTS
-         ui_directives     → pulses, focus, alert level
-         direct_answer     → optional toast
-         metrics           → bottom stats bar
-     • Disable input + paperclip + send while model is thinking (busy lock)
-     • File preview strip above textbox (image thumbs + PDF tiles)
-     • Max 2 attachments enforced client-side
-     • Legend updated live from real type counts
-*/
+/* ============================================================
+   ELYSIUM — boot.js
+   ------------------------------------------------------------
+   Wires UI ↔ /api/turn. Critical guarantees:
+
+   • The JSON envelope returned by the model is NEVER rendered
+     as raw text anywhere on screen. It is parsed and ROUTED to:
+        hypergraph_delta     → canvas nodes / edges
+        council_deliberation → council overlay + TTS audio
+        ui_directives        → bioluminescence pulses, focus, alert
+        direct_answer        → optional small toast
+        metrics              → bottom stats bar + legend densities
+
+   • File uploads are previewed above the textbox with X removal
+     and only sent when the user presses Send.
+
+   • Every DOM lookup is defensive — a single missing element
+     never throws an unhandled "Cannot read properties of null".
+     This was the root cause of the previous "classList of null"
+     toast that appeared on top.
+   ============================================================ */
 (() => {
-  const input    = document.getElementById('q-input');
-  const send     = document.getElementById('q-send');
-  const fileEl   = document.getElementById('q-file');
-  const upBtn    = document.getElementById('q-upload');
-  const strip    = document.getElementById('attach-strip');
-  const seedHint = document.getElementById('seed-hint');
-
-  // ── Toast helper ──
+  'use strict';
+
+  // ── Safe element accessor (logs once if missing) ──
+  const _missing = new Set();
+  const $ = (id) => {
+    const el = document.getElementById(id);
+    if (!el && !_missing.has(id)) {
+      _missing.add(id);
+      console.warn('[elysium] missing element:', id);
+    }
+    return el;
+  };
+
+  // Safe wrappers — no-op if element missing
+  const addCls = (el, c) => { if (el && el.classList) el.classList.add(c); };
+  const rmCls  = (el, c) => { if (el && el.classList) el.classList.remove(c); };
+
+  // ── Toast helper (always returns; never throws) ──
   window.toast = function (msg, kind = '') {
+    const host = $('toasts');
+    if (!host) { console.log('[toast]', msg); return; }
     const t = document.createElement('div');
-    t.className = 'toast ' + kind;
-    t.textContent = msg;
-    document.getElementById('toasts').appendChild(t);
-    setTimeout(() => t.remove(), 5200);
+    t.className = 'toast ' + (kind || '');
+    t.textContent = String(msg).slice(0, 280);
+    host.appendChild(t);
+    setTimeout(() => { try { t.remove(); } catch {} }, 5200);
   };
 
-  // ── File attachment state (max 2) ──
+  function escapeHtml(s) {
+    return String(s == null ? '' : s).replace(/[&<>"']/g, c => ({
+      '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'
+    }[c]));
+  }
+
+  // ── DOM references (all may be null — handled defensively) ──
+  const input    = $('q-input');
+  const send     = $('q-send');
+  const fileEl   = $('q-file');
+  const upBtn    = $('q-upload');
+  const strip    = $('attach-strip');
+  const seedHint = $('seed-hint');
+
+  /* =========================================================
+     PART A — FILE ATTACHMENTS (preview above textbox, max 2)
+     ========================================================= */
   const MAX_FILES = 2;
-  let attachments = [];   // {file, name, kind, previewUrl}
+  const MAX_BYTES = 12 * 1024 * 1024;
+  let attachments = [];   // [{file, name, kind:'image'|'pdf', previewUrl}]
 
   function renderStrip() {
+    if (!strip) return;
     if (attachments.length === 0) {
-      strip.classList.add('hidden');
+      addCls(strip, 'hidden');
       strip.innerHTML = '';
       return;
     }
-    strip.classList.remove('hidden');
-    const hintHtml = attachments.length < MAX_FILES
+    rmCls(strip, 'hidden');
+    const hint = attachments.length < MAX_FILES
       ? `<span class="attach-hint">${MAX_FILES - attachments.length} more allowed</span>`
       : `<span class="attach-hint">max ${MAX_FILES} reached</span>`;
     strip.innerHTML = attachments.map((a, i) => {
@@ -48,23 +86,30 @@
         : `<div class="pdf-ico">PDF</div>`;
       const sizeKb = (a.file.size / 1024).toFixed(0);
       return `
-        <div class="preview-tile">
+        <div class="preview-tile" data-i="${i}">
           ${preview}
           <span class="nm" title="${escapeHtml(a.name)}">${escapeHtml(a.name)} · ${sizeKb}KB</span>
-          <button class="x" data-i="${i}" title="Remove">×</button>
+          <button class="x" data-i="${i}" title="Remove attachment" aria-label="Remove">×</button>
         </div>`;
-    }).join('') + hintHtml;
+    }).join('') + hint;
+
+    // Wire remove buttons
     strip.querySelectorAll('.x').forEach(b => {
-      b.onclick = () => {
+      b.onclick = (ev) => {
+        ev.preventDefault();
+        ev.stopPropagation();
         const i = +b.dataset.i;
         const removed = attachments.splice(i, 1)[0];
-        if (removed?.previewUrl) URL.revokeObjectURL(removed.previewUrl);
+        if (removed && removed.previewUrl) {
+          try { URL.revokeObjectURL(removed.previewUrl); } catch {}
+        }
         renderStrip();
       };
     });
   }
 
   function addFiles(files) {
+    if (!files) return;
     const list = Array.from(files);
     for (const f of list) {
       if (attachments.length >= MAX_FILES) {
@@ -75,10 +120,10 @@
       const isImg = mime.startsWith('image/');
       const isPdf = mime === 'application/pdf' || f.name.toLowerCase().endsWith('.pdf');
       if (!isImg && !isPdf) {
-        window.toast(`Unsupported file: ${f.name} (only images & PDFs)`, 'warn');
+        window.toast(`Unsupported: ${f.name} (only images & PDFs)`, 'warn');
         continue;
       }
-      if (f.size > 12 * 1024 * 1024) {
+      if (f.size > MAX_BYTES) {
         window.toast(`${f.name} is too large (>12MB)`, 'warn');
         continue;
       }
@@ -90,183 +135,292 @@
       });
     }
     renderStrip();
-    // reset native input so the same file can be re-selected if user removes it
-    fileEl.value = '';
+    if (fileEl) fileEl.value = '';   // allow re-selecting same file after removal
   }
 
-  fileEl.addEventListener('change', e => addFiles(e.target.files));
+  if (fileEl) {
+    fileEl.addEventListener('change', e => addFiles(e.target.files));
+  }
 
-  // ── Drag-and-drop onto the whole window (bonus polish) ──
+  // Optional polish: drag-and-drop files anywhere on the window
   ['dragenter', 'dragover'].forEach(ev =>
     window.addEventListener(ev, e => { e.preventDefault(); }));
   window.addEventListener('drop', e => {
-    if (!e.dataTransfer || !e.dataTransfer.files.length) return;
+    if (!e.dataTransfer || !e.dataTransfer.files || !e.dataTransfer.files.length) return;
     e.preventDefault();
     addFiles(e.dataTransfer.files);
   });
 
-  // ── Busy lock (disable input while model thinks) ──
+  /* =========================================================
+     PART B — BUSY LOCK (disables input while model thinks)
+     ========================================================= */
   function setBusy(b) {
     document.body.dataset.busy = b ? '1' : '0';
-    input.disabled = b;
-    send.disabled  = b;
+    if (input) input.disabled = b;
+    if (send)  send.disabled  = b;
     if (b) {
-      send.classList.add('loading');
-      upBtn.classList.add('disabled');
-      fileEl.disabled = true;
-      input.dataset.prev = input.placeholder;
-      input.placeholder = 'Council deliberating…';
+      if (send)  send.classList.add('loading');
+      if (upBtn) upBtn.classList.add('disabled');
+      if (fileEl) fileEl.disabled = true;
+      if (input) {
+        input.dataset.prev = input.placeholder || '';
+        input.placeholder = 'Council deliberating…';
+      }
     } else {
-      send.classList.remove('loading');
-      upBtn.classList.remove('disabled');
-      fileEl.disabled = false;
-      input.placeholder = input.dataset.prev || 'Speak to your civilization seed…';
+      if (send)  send.classList.remove('loading');
+      if (upBtn) upBtn.classList.remove('disabled');
+      if (fileEl) fileEl.disabled = false;
+      if (input) {
+        input.placeholder = input.dataset.prev || 'Speak to your civilization seed…';
+      }
     }
   }
 
-  // ── Restore civilization on load ──
+  /* =========================================================
+     PART C — RESTORE existing civilization on page load
+     ========================================================= */
   async function restore() {
     try {
       const h = await ElysiumAPI.hypergraph();
       (h.nodes || []).forEach(n => {
-        if (n.node_id !== 'CORE') window.elysiumAddNode(n);
+        if (n.node_id !== 'CORE' && typeof window.elysiumAddNode === 'function') {
+          window.elysiumAddNode(n);
+        }
+      });
+      (h.edges || []).forEach(e => {
+        if (typeof window.elysiumAddEdge === 'function') window.elysiumAddEdge(e);
       });
-      (h.edges || []).forEach(e => window.elysiumAddEdge(e));
-      if ((h.nodes || []).length > 0) seedHint.classList.add('hidden');
+      if ((h.nodes || []).length > 1) addCls(seedHint, 'hidden');
       updateLegend();
       updateMetrics({
-        nodes: h.node_count, edges: h.edge_count,
-        council_active: 0, knowledge_growth: 0,
+        nodes: h.node_count || (h.nodes || []).length || 1,
+        edges: h.edge_count || (h.edges || []).length || 0,
+        council_active: 0,
+        knowledge_growth: 0,
         civilization_age_min: 0,
-        mycelium_density_pct: h.node_count ? Math.round(Math.min(1, h.edge_count / Math.max(1, h.node_count * 1.4)) * 100) : 0,
+        mycelium_density_pct: h.node_count
+          ? Math.round(Math.min(1, (h.edge_count || 0) / Math.max(1, h.node_count * 1.4)) * 100)
+          : 0,
         coherence_pct: 70,
       });
     } catch (e) {
-      // first boot offline — fine
+      console.warn('[restore] failed', e);
+      updateLegend();
     }
   }
   restore();
 
-  // ── SUBMIT ──
+  /* =========================================================
+     PART D — SUBMIT a turn
+     ========================================================= */
   async function submit() {
     if (document.body.dataset.busy === '1') return;
-    const text = input.value.trim();
+    const text = input ? input.value.trim() : '';
     if (!text && attachments.length === 0) return;
 
     setBusy(true);
-    seedHint.classList.add('hidden');
-    input.value = '';
+    addCls(seedHint, 'hidden');
+    if (input) input.value = '';
 
     const files = attachments.map(a => a.file);
-    // clear preview strip
-    attachments.forEach(a => a.previewUrl && URL.revokeObjectURL(a.previewUrl));
+    // Clear preview strip (response will show separate "Analyzed:" toast)
+    attachments.forEach(a => {
+      if (a.previewUrl) { try { URL.revokeObjectURL(a.previewUrl); } catch {} }
+    });
     attachments = [];
     renderStrip();
 
     try {
       const data = await ElysiumAPI.turn(text, files);
-      handleResponse(data);
+      handleResponse(data || {});
     } catch (e) {
-      window.toast('Inference failed: ' + e.message, 'error');
+      console.error('[submit] failed', e);
+      window.toast('Inference failed: ' + (e.message || e), 'error');
     } finally {
       setBusy(false);
     }
   }
 
-  send.onclick = submit;
-  input.addEventListener('keydown', e => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault();
-      submit();
-    }
-  });
+  if (send)  send.onclick = submit;
+  if (input) {
+    input.addEventListener('keydown', e => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        submit();
+      }
+    });
+  }
 
-  // ── HANDLE MODEL RESPONSE ──
-  // Parses JSON envelope and routes data to the right UI subsystem.
-  // NEVER renders the JSON itself on the canvas.
+  /* =========================================================
+     PART E — HANDLE RESPONSE
+     Parses the JSON envelope and routes it. NEVER renders raw
+     JSON to the canvas or any visible element.
+     ========================================================= */
   function handleResponse(payload) {
-    const resp = payload.elysium_response || {};
-    const rt   = payload._runtime || {};
+    // payload schema: { user_msg, elysium_response, _runtime }
+    let resp = {};
+    let rt   = {};
+    try {
+      resp = payload.elysium_response || {};
+      rt   = payload._runtime || {};
+    } catch (e) {
+      console.error('[handleResponse] malformed payload', e);
+      window.toast('Malformed response from model', 'error');
+      return;
+    }
 
-    // 0. Attachment errors → toast
-    (rt.attachment_errors || []).forEach(e =>
+    // 0. Attachment errors (server-side validation failures) → toast
+    safeArr(rt.attachment_errors).forEach(e =>
       window.toast(`📎 ${e.name}: ${e.error}`, 'warn'));
 
-    // 1. Hypergraph delta → canvas
+    // 1. Hypergraph delta → canvas (NODES then EDGES; build parent map)
     const delta = resp.hypergraph_delta || {};
-    (delta.nodes_added || []).forEach(n => {
-      // Find a parent hint: first edge whose target is this node
-      let parent = null;
-      for (const e of (delta.edges_added || [])) {
-        if (e.target_node_id === n.node_id) { parent = e.source_node_id; break; }
-        if (e.source_node_id === n.node_id) { parent = e.target_node_id; break; }
+    const edgesAdded = safeArr(delta.edges_added);
+    const nodesAdded = safeArr(delta.nodes_added);
+
+    // Build a parent-hint map: for each new node, what's its closest source
+    // (used so spawn animation grows OUT FROM the parent, not the centre).
+    const parentHint = {};
+    edgesAdded.forEach(e => {
+      if (!e) return;
+      if (e.target_node_id && !parentHint[e.target_node_id]) {
+        parentHint[e.target_node_id] = e.source_node_id;
+      }
+      if (e.source_node_id && !parentHint[e.source_node_id]) {
+        // weaker hint (reverse direction) — only if not set
+        if (!parentHint[e.source_node_id]) {
+          parentHint[e.source_node_id] = e.target_node_id;
+        }
+      }
+    });
+
+    nodesAdded.forEach(n => {
+      if (!n || !n.node_id) return;
+      try {
+        if (typeof window.elysiumAddNode === 'function') {
+          window.elysiumAddNode(n, parentHint[n.node_id]);
+        }
+      } catch (err) {
+        console.warn('[handleResponse] addNode failed', n, err);
       }
-      window.elysiumAddNode(n, parent);
     });
-    (delta.edges_added || []).forEach(e => window.elysiumAddEdge(e));
 
-    // 2. UI directives
+    edgesAdded.forEach(e => {
+      if (!e || !e.source_node_id || !e.target_node_id) return;
+      try {
+        if (typeof window.elysiumAddEdge === 'function') window.elysiumAddEdge(e);
+      } catch (err) {
+        console.warn('[handleResponse] addEdge failed', e, err);
+      }
+    });
+
+    // Apply node updates (fields_changed)
+    safeArr(delta.nodes_updated).forEach(u => {
+      if (!u || !u.node_id) return;
+      const node = window.elysiumGetNode && window.elysiumGetNode(u.node_id);
+      if (node && u.fields_changed) {
+        Object.assign(node.payload || (node.payload = {}), u.fields_changed);
+      }
+    });
+
+    // 2. UI directives — pulses, focus, alert
     const ui = resp.ui_directives || {};
-    (ui.bioluminescence_pulse_nodes || []).forEach(id => window.elysiumPulse(id, 1500));
+    safeArr(ui.bioluminescence_pulse_nodes).forEach(id => {
+      if (typeof window.elysiumPulse === 'function') window.elysiumPulse(id, 1600);
+    });
     document.body.dataset.alert = ui.alert_level || 'CALM';
-    if (ui.camera_focus_node_id) {
-      // Pulse + focus for emphasis
-      window.elysiumPulse(ui.camera_focus_node_id, 1800);
-      setTimeout(() => window.elysiumFocus(ui.camera_focus_node_id), 350);
+    if (ui.camera_focus_node_id && typeof window.elysiumFocus === 'function') {
+      if (typeof window.elysiumPulse === 'function')
+        window.elysiumPulse(ui.camera_focus_node_id, 1800);
+      setTimeout(() => {
+        try { window.elysiumFocus(ui.camera_focus_node_id); } catch {}
+      }, 380);
     }
 
     // 3. Council overlay + TTS
-    window.renderCouncil(resp, rt);
+    try {
+      if (typeof window.renderCouncil === 'function') {
+        window.renderCouncil(resp, rt);
+      }
+    } catch (e) {
+      console.error('[council] render failed', e);
+    }
 
-    // 4. Metrics bar (REAL civilization metrics, not fake)
+    // 4. Metrics bar (REAL civilization metrics)
     updateMetrics(rt.metrics || {});
 
     // 5. Agent count badge
-    const ag = (resp.council_deliberation?.agent_outputs || []).length;
-    document.getElementById('agent-count').textContent = `+${ag}`;
+    const ag = safeArr(resp.council_deliberation && resp.council_deliberation.agent_outputs).length;
+    const badge = $('agent-count');
+    if (badge) badge.textContent = `+${ag}`;
 
-    // 6. Legend live update
+    // 6. Legend live update (counts per type)
     updateLegend();
 
     // 7. Tool toasts
-    (rt.tool_results || []).forEach(tr => {
+    safeArr(rt.tool_results).forEach(tr => {
+      if (!tr) return;
       const ok = tr.result && !tr.result.error;
-      window.toast(`🔧 ${tr.tool_name}: ${ok ? 'ok' : (tr.result?.error || 'offline')}`,
-                   ok ? 'info' : 'warn');
+      window.toast(
+        `🔧 ${tr.tool_name || 'tool'}: ${ok ? 'ok' : (tr.result?.error || 'offline')}`,
+        ok ? 'info' : 'warn'
+      );
     });
 
-    // 8. Direct answer toast (only if no council, otherwise it's already in synthesis)
-    if (!ag && resp.direct_answer) {
-      window.toast(resp.direct_answer);
+    // 8. Direct answer toast — ONLY when no council (otherwise it's already
+    //    shown in the overlay synthesis). NEVER dumps raw JSON.
+    if (!ag && resp.direct_answer && typeof resp.direct_answer === 'string') {
+      window.toast(resp.direct_answer.slice(0, 240));
     }
 
-    // 9. Attachment processed confirmation
-    if ((rt.attachments_processed || []).length) {
-      const names = rt.attachments_processed.map(a => a.name).join(', ');
-      window.toast(`📎 Analyzed: ${names}`, 'info');
+    // 9. Confirm attachment analysis
+    const processed = safeArr(rt.attachments_processed);
+    if (processed.length) {
+      const names = processed.map(a => a && a.name).filter(Boolean).join(', ');
+      if (names) window.toast(`📎 Analyzed: ${names}`, 'info');
     }
   }
 
+  function safeArr(x) { return Array.isArray(x) ? x : []; }
+
+  /* =========================================================
+     PART F — Metrics & Legend updates
+     ========================================================= */
   function updateMetrics(m) {
-    document.getElementById('s-nodes').textContent   = (m.nodes ?? window.ELYSIUM?.nodes.size ?? 1);
-    document.getElementById('s-edges').textContent   = (m.edges ?? window.ELYSIUM?.edges.length ?? 0);
-    document.getElementById('s-council').textContent = (m.council_active ?? 0);
-    document.getElementById('s-growth').textContent  = (m.knowledge_growth ?? 0);
-    document.getElementById('s-age').textContent     = (m.civilization_age_min ?? 0);
-    document.getElementById('m-density').textContent  = (m.mycelium_density_pct ?? 0) + '%';
-    document.getElementById('m-coherence').textContent = (m.coherence_pct ?? 70) + '%';
+    m = m || {};
+    const nodes = m.nodes ?? (window.ELYSIUM ? window.ELYSIUM.nodes.size : 1);
+    const edges = m.edges ?? (window.ELYSIUM ? window.ELYSIUM.edges.length : 0);
+    setText('s-nodes',   nodes);
+    setText('s-edges',   edges);
+    setText('s-council', m.council_active ?? 0);
+    setText('s-growth',  m.knowledge_growth ?? 0);
+    setText('s-age',     m.civilization_age_min ?? 0);
+    setText('m-density', (m.mycelium_density_pct ?? 0) + '%');
+    setText('m-coherence', (m.coherence_pct ?? 70) + '%');
+  }
+
+  function setText(id, value) {
+    const el = $(id);
+    if (el) el.textContent = value;
   }
 
   function updateLegend() {
+    const host = $('legend-items');
+    if (!host || !window.ELYSIUM) return;
     const counts = {};
-    window.ELYSIUM.nodes.forEach(n => counts[n.type] = (counts[n.type] || 0) + 1);
+    window.ELYSIUM.nodes.forEach(n => {
+      const t = n.type || 'CONCEPT';
+      counts[t] = (counts[t] || 0) + 1;
+    });
     const order = ['CORE','CIVILIZATION','DOMAIN','AGENT','TOOL','PROJECT',
                    'LIFE_EVENT','EMOTION','PERSON','VALUE','MEMORY','FACT','CONCEPT','QUERY'];
     const seen = new Set();
     const parts = [];
-    order.filter(t => counts[t] && !seen.has(t)).forEach(t => {
+    const colorFn = window.colorFor || (() => '#a76bff');
+    order.forEach(t => {
+      if (!counts[t]) return;
       seen.add(t);
-      const c = window.colorFor(t);
+      const c = colorFn(t);
       parts.push(`
         <div class="legend-item" data-type="${t}">
           <span class="dot" style="background:${c};color:${c}"></span>
@@ -274,42 +428,46 @@
           <span class="lbl">${t.replace(/_/g, ' ').toLowerCase()}</span>
         </div>`);
     });
-    // any types not in canonical order, append
     Object.keys(counts).forEach(t => {
       if (seen.has(t)) return;
-      const c = window.colorFor(t);
-      parts.push(`<div class="legend-item" data-type="${t}">
+      const c = colorFn(t);
+      parts.push(`
+        <div class="legend-item" data-type="${t}">
           <span class="dot" style="background:${c};color:${c}"></span>
           <span class="badge">${counts[t]}</span>
           <span class="lbl">${t.replace(/_/g, ' ').toLowerCase()}</span>
         </div>`);
     });
-    document.getElementById('legend-items').innerHTML = parts.join('');
-    // wire legend filter clicks
-    document.querySelectorAll('#legend-items .legend-item').forEach(el => {
+    host.innerHTML = parts.join('');
+    // Wire legend filter clicks
+    host.querySelectorAll('.legend-item').forEach(el => {
       el.onclick = () => {
         const t = el.dataset.type;
-        window.elysiumFilterType?.(t);
-        // visual feedback
-        document.querySelectorAll('#legend-items .legend-item').forEach(x =>
-          x.style.opacity = window.ELYSIUM.filterType
-            ? (x.dataset.type === window.ELYSIUM.filterType ? '1' : '.45')
-            : '1');
+        if (typeof window.elysiumFilterType === 'function') window.elysiumFilterType(t);
+        const active = window.ELYSIUM && window.ELYSIUM.filterType;
+        host.querySelectorAll('.legend-item').forEach(x => {
+          x.style.opacity = active
+            ? (x.dataset.type === active ? '1' : '.45')
+            : '1';
+        });
       };
     });
   }
 
-  // RI Analysis = fit-to-view + summary toast
-  document.getElementById('ri-analysis').onclick = () => {
-    window.elysiumFitAll();
-    const n = window.ELYSIUM.nodes.size;
-    const e = window.ELYSIUM.edges.length;
-    window.toast(`🔍 Civilization snapshot: ${n} nodes · ${e} threads`, 'info');
-  };
-
-  function escapeHtml(s) {
-    return String(s || '').replace(/[&<>"']/g, c => ({
-      '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'
-    }[c]));
+  /* =========================================================
+     PART G — RI Analysis button (fit + summary)
+     ========================================================= */
+  const ri = $('ri-analysis');
+  if (ri) {
+    ri.onclick = () => {
+      if (typeof window.elysiumFitAll === 'function') window.elysiumFitAll();
+      const n = window.ELYSIUM ? window.ELYSIUM.nodes.size : 0;
+      const e = window.ELYSIUM ? window.ELYSIUM.edges.length : 0;
+      window.toast(`🔍 Civilization snapshot: ${n} nodes · ${e} threads`, 'info');
+    };
   }
+
+  // Expose for debugging (read-only-ish)
+  window.elysiumUpdateLegend  = updateLegend;
+  window.elysiumUpdateMetrics = updateMetrics;
 })();

frontend/dist/assets/canvas.js

@@ -1,7 +1,22 @@
-/* Google-Maps-style infinite-pan canvas with bioluminescent hypergraph.
-   Handles: pan / zoom / pinch / inertia / minimap drag / click-to-detail. */
+/* ============================================================
+   ELYSIUM — canvas.js
+   Google-Maps-style infinite pan/zoom canvas with bioluminescent
+   hypergraph rendering, particles, and a synced minimap.
+
+   Critical behaviours fixed in this version:
+     • Click vs pan is detected with BOTH movement-distance AND
+       elapsed-time thresholds AND a final hit-test on the up
+       location (so even a slight finger jitter still opens
+       the node detail).
+     • The minimap is fully interactive (click + drag to pan).
+     • Every public function is wrapped to be no-op if called
+       before the canvas exists.
+   ============================================================ */
 (() => {
+  'use strict';
+
   const canvas = document.getElementById('elysium-canvas');
+  if (!canvas) { console.warn('[canvas] #elysium-canvas missing'); return; }
   const ctx = canvas.getContext('2d', { alpha: false });
 
   const DPR = Math.max(1, Math.min(2, window.devicePixelRatio || 1));
@@ -21,16 +36,17 @@
     edges: [],
     hover: null,
     selected: null,
-    filterType: null,   // legend click filters
+    filterType: null,
   };
 
-  // Seed CORE
+  // Seed CORE (always present)
   E.nodes.set('CORE', {
     node_id: 'CORE', x: 0, y: 0,
     type: 'CORE', label: 'ELYSIUM',
     radius: 36, color: '#ffb840',
     phase: 0, born: performance.now() - 1000,
     payload: { description: 'The seed of your civilization. Ask anything to grow new nodes.' },
+    embedding_hint: 'The civilization core. All knowledge branches out from here.',
   });
 
   // ──────── COORDS ────────
@@ -46,19 +62,28 @@
     let best = null, bestD = Infinity;
     E.nodes.forEach(n => {
       const d = Math.hypot(n.x - w.x, n.y - w.y);
-      if (d < n.radius * 1.25 && d < bestD) { best = n; bestD = d; }
+      // Use a generous hit radius — at least 18 world-units to make
+      // small nodes tappable on touch devices.
+      const hitR = Math.max(18, n.radius * 1.35);
+      if (d < hitR && d < bestD) { best = n; bestD = d; }
     });
     return best;
   }
 
   // ──────── PAN / TAP ────────
-  let lastX = 0, lastY = 0, downX = 0, downY = 0, downT = 0;
+  let lastX = 0, lastY = 0;
+  let downX = 0, downY = 0, downT = 0;
+  let totalMove = 0;
+  let downOnNode = null;
+
   canvas.addEventListener('pointerdown', e => {
     downX = e.clientX; downY = e.clientY; downT = performance.now();
+    totalMove = 0;
+    downOnNode = hitTest(e.clientX, e.clientY);
     E.cam.drag = true;
     canvas.classList.add('dragging');
     lastX = e.clientX; lastY = e.clientY;
-    canvas.setPointerCapture(e.pointerId);
+    try { canvas.setPointerCapture(e.pointerId); } catch {}
   });
 
   canvas.addEventListener('pointermove', e => {
@@ -68,8 +93,11 @@
       canvas.style.cursor = n ? 'pointer' : '';
       return;
     }
-    const dx = (e.clientX - lastX) / E.cam.z;
-    const dy = (e.clientY - lastY) / E.cam.z;
+    const dxRaw = e.clientX - lastX;
+    const dyRaw = e.clientY - lastY;
+    totalMove += Math.hypot(dxRaw, dyRaw);
+    const dx = dxRaw / E.cam.z;
+    const dy = dyRaw / E.cam.z;
     E.cam.x -= dx; E.cam.y -= dy;
     E.cam.vx = dx * 0.85; E.cam.vy = dy * 0.85;
     E.cam.tx = E.cam.x; E.cam.ty = E.cam.y;
@@ -77,25 +105,31 @@
   });
 
   function endPan(e) {
-    const moved = Math.hypot(e.clientX - downX, e.clientY - downY);
-    const dt    = performance.now() - downT;
+    const dt = performance.now() - downT;
     E.cam.drag = false;
     canvas.classList.remove('dragging');
     try { canvas.releasePointerCapture(e.pointerId); } catch {}
-    // Treat as click if minimal movement + short duration
-    if (moved < 6 && dt < 350) {
-      const n = hitTest(e.clientX, e.clientY);
-      if (n) {
-        if (window.showNodeDetail) window.showNodeDetail(n, e.clientX, e.clientY);
+
+    // Click detection: total movement < 8px AND duration < 500ms.
+    // Either down-or-up location may hit a node (handles touch jitter).
+    const moved = totalMove < 8 && Math.hypot(e.clientX - downX, e.clientY - downY) < 8;
+    if (moved && dt < 500) {
+      const upNode = hitTest(e.clientX, e.clientY);
+      const node = upNode || downOnNode;
+      if (node) {
+        if (typeof window.showNodeDetail === 'function') {
+          window.showNodeDetail(node, e.clientX, e.clientY);
+        }
       } else {
-        if (window.hideNodeDetail) window.hideNodeDetail();
+        if (typeof window.hideNodeDetail === 'function') window.hideNodeDetail();
       }
     }
+    downOnNode = null;
   }
   canvas.addEventListener('pointerup', endPan);
   canvas.addEventListener('pointercancel', endPan);
 
-  // wheel zoom (zoom to cursor)
+  // Wheel zoom (zoom to cursor)
   canvas.addEventListener('wheel', e => {
     e.preventDefault();
     const factor = e.deltaY > 0 ? 0.9 : 1.1;
@@ -111,7 +145,7 @@
     E.cam.tx = w.x; E.cam.ty = w.y;
   });
 
-  // ──────── PINCH ZOOM ────────
+  // Pinch zoom (touch)
   let touchDist = 0, touchMid = null;
   canvas.addEventListener('touchstart', e => {
     if (e.touches.length === 2) {
@@ -135,10 +169,11 @@
   }, { passive: false });
   canvas.addEventListener('touchend', () => { touchDist = 0; });
 
-  // ──────── ZOOM BTNS ────────
-  document.getElementById('z-in').onclick  = () => E.cam.tz = Math.min(4, E.cam.z * 1.35);
-  document.getElementById('z-out').onclick = () => E.cam.tz = Math.max(0.15, E.cam.z / 1.35);
-  document.getElementById('z-fit').onclick = fitAll;
+  // Zoom buttons (defensive)
+  const _btn = (id, fn) => { const el = document.getElementById(id); if (el) el.onclick = fn; };
+  _btn('z-in',  () => E.cam.tz = Math.min(4, E.cam.z * 1.35));
+  _btn('z-out', () => E.cam.tz = Math.max(0.15, E.cam.z / 1.35));
+  _btn('z-fit', () => fitAll());
 
   function fitAll() {
     if (E.nodes.size === 0) return;
@@ -147,7 +182,7 @@
       mnX = Math.min(mnX, n.x); mnY = Math.min(mnY, n.y);
       mxX = Math.max(mxX, n.x); mxY = Math.max(mxY, n.y);
     });
-    const pad = 220;
+    const pad = 240;
     E.cam.tx = (mnX + mxX) / 2;
     E.cam.ty = (mnY + mxY) / 2;
     if (mxX - mnX < 1 && mxY - mnY < 1) {
@@ -160,16 +195,17 @@
   }
   window.elysiumFitAll = fitAll;
 
-  // ──────── MINIMAP (interactive) ────────
+  /* ──────── MINIMAP (interactive — click & drag to pan) ──────── */
   const mini = document.getElementById('minimap');
-  const mctx = mini.getContext('2d');
+  const mctx = mini ? mini.getContext('2d') : null;
 
-  function computeBounds(pad = 100) {
+  function computeBounds(pad = 140) {
     let mnX = Infinity, mnY = Infinity, mxX = -Infinity, mxY = -Infinity;
     E.nodes.forEach(n => {
       mnX = Math.min(mnX, n.x); mnY = Math.min(mnY, n.y);
       mxX = Math.max(mxX, n.x); mxY = Math.max(mxY, n.y);
     });
+    if (!isFinite(mnX)) { mnX = -200; mnY = -200; mxX = 200; mxY = 200; }
     if (mxX - mnX < 100) { mnX -= 200; mxX += 200; }
     if (mxY - mnY < 100) { mnY -= 200; mxY += 200; }
     return { mnX: mnX - pad, mnY: mnY - pad,
@@ -177,26 +213,31 @@
   }
 
   function drawMinimap() {
-    const w = mini.clientWidth, h = mini.clientHeight;
+    if (!mini || !mctx) return;
+    const w = mini.clientWidth || 170;
+    const h = mini.clientHeight || 108;
     if (mini.width !== w * DPR || mini.height !== h * DPR) {
       mini.width = w * DPR; mini.height = h * DPR;
     }
     mctx.save();
     mctx.scale(DPR, DPR);
-    // bg
     mctx.fillStyle = 'rgba(2,16,22,1)';
     mctx.fillRect(0, 0, w, h);
-    // grid
+
+    // Grid
     mctx.strokeStyle = 'rgba(0,229,200,.08)';
     mctx.lineWidth = .5;
-    for (let i = 0; i < w; i += 12) { mctx.beginPath(); mctx.moveTo(i, 0); mctx.lineTo(i, h); mctx.stroke(); }
-    for (let j = 0; j < h; j += 12) { mctx.beginPath(); mctx.moveTo(0, j); mctx.lineTo(w, j); mctx.stroke(); }
+    for (let i = 0; i < w; i += 12) {
+      mctx.beginPath(); mctx.moveTo(i, 0); mctx.lineTo(i, h); mctx.stroke();
+    }
+    for (let j = 0; j < h; j += 12) {
+      mctx.beginPath(); mctx.moveTo(0, j); mctx.lineTo(w, j); mctx.stroke();
+    }
 
-    if (E.nodes.size === 0) { mctx.restore(); return; }
     const { mnX, mnY, mxX, mxY } = computeBounds();
     const sx = w / (mxX - mnX), sy = h / (mxY - mnY);
 
-    // edges
+    // Edges (faint)
     mctx.lineWidth = .6;
     E.edges.forEach(ed => {
       const s = E.nodes.get(ed.src), t = E.nodes.get(ed.dst);
@@ -208,62 +249,93 @@
       mctx.stroke();
     });
 
-    // nodes
+    // Nodes (glowing dots)
     E.nodes.forEach(n => {
       const px = (n.x - mnX) * sx, py = (n.y - mnY) * sy;
       mctx.shadowColor = n.color;
       mctx.shadowBlur  = 6;
       mctx.fillStyle = n.color;
+      const r = (n.type === 'CORE' || n.type === 'CIVILIZATION') ? 3.5
+              : n.type === 'AGENT' ? 2.6 : 2.2;
       mctx.beginPath();
-      mctx.arc(px, py, n.type === 'CORE' ? 3.5 : 2.2, 0, Math.PI * 2);
+      mctx.arc(px, py, r, 0, Math.PI * 2);
       mctx.fill();
     });
     mctx.shadowBlur = 0;
 
-    // viewport rect
+    // Viewport rect
     const vx = (E.cam.x - innerWidth  / 2 / E.cam.z - mnX) * sx;
     const vy = (E.cam.y - innerHeight / 2 / E.cam.z - mnY) * sy;
     const vw = innerWidth  / E.cam.z * sx;
     const vh = innerHeight / E.cam.z * sy;
-    mctx.strokeStyle = 'rgba(25,214,255,.9)';
+    mctx.strokeStyle = 'rgba(25,214,255,.95)';
     mctx.lineWidth = 1.2;
     mctx.setLineDash([3, 3]);
     mctx.strokeRect(vx, vy, vw, vh);
     mctx.setLineDash([]);
+
+    // Selected node marker on minimap
+    if (E.selected) {
+      const px = (E.selected.x - mnX) * sx, py = (E.selected.y - mnY) * sy;
+      mctx.strokeStyle = '#19d6ff';
+      mctx.lineWidth = 1.5;
+      mctx.beginPath(); mctx.arc(px, py, 5, 0, Math.PI * 2); mctx.stroke();
+    }
     mctx.restore();
   }
 
-  // minimap drag / click to pan
-  let miniDrag = false;
-  function miniPan(e) {
-    const rect = mini.getBoundingClientRect();
-    const fx = (e.clientX - rect.left) / rect.width;
-    const fy = (e.clientY - rect.top)  / rect.height;
-    const { mnX, mnY, mxX, mxY } = computeBounds();
-    E.cam.tx = mnX + fx * (mxX - mnX);
-    E.cam.ty = mnY + fy * (mxY - mnY);
+  // Minimap drag / click pan
+  if (mini) {
+    let miniDrag = false;
+    const miniPan = (e) => {
+      const rect = mini.getBoundingClientRect();
+      const fx = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+      const fy = Math.max(0, Math.min(1, (e.clientY - rect.top)  / rect.height));
+      const { mnX, mnY, mxX, mxY } = computeBounds();
+      E.cam.tx = mnX + fx * (mxX - mnX);
+      E.cam.ty = mnY + fy * (mxY - mnY);
+    };
+    mini.addEventListener('pointerdown', e => {
+      miniDrag = true; miniPan(e);
+      try { mini.setPointerCapture(e.pointerId); } catch {}
+    });
+    mini.addEventListener('pointermove', e => { if (miniDrag) miniPan(e); });
+    mini.addEventListener('pointerup',   e => {
+      miniDrag = false;
+      try { mini.releasePointerCapture(e.pointerId); } catch {}
+    });
+    mini.addEventListener('pointercancel', () => { miniDrag = false; });
+    // Mouse wheel on minimap → zoom canvas around centre
+    mini.addEventListener('wheel', e => {
+      e.preventDefault();
+      const factor = e.deltaY > 0 ? 0.9 : 1.1;
+      E.cam.tz = Math.max(0.15, Math.min(4, E.cam.z * factor));
+    }, { passive: false });
   }
-  mini.addEventListener('pointerdown', e => { miniDrag = true; miniPan(e); mini.setPointerCapture(e.pointerId); });
-  mini.addEventListener('pointermove', e => { if (miniDrag) miniPan(e); });
-  mini.addEventListener('pointerup',   e => { miniDrag = false; try { mini.releasePointerCapture(e.pointerId); } catch{} });
-  mini.addEventListener('pointercancel', () => { miniDrag = false; });
 
-  // ──────── PUBLIC API ────────
+  /* ──────── PUBLIC API ──────── */
   const SPAWN_RADIUS = 280;
 
   window.elysiumAddNode = function (node, parentHint) {
-    if (E.nodes.has(node.node_id)) return E.nodes.get(node.node_id);
+    if (!node || !node.node_id) return null;
+    if (E.nodes.has(node.node_id)) {
+      // Update label / payload if changed
+      const existing = E.nodes.get(node.node_id);
+      if (node.label) existing.label = node.label;
+      if (node.payload) existing.payload = node.payload;
+      if (node.embedding_hint) existing.embedding_hint = node.embedding_hint;
+      return existing;
+    }
     const parentId = parentHint || 'CORE';
     const parent = E.nodes.get(parentId) || E.nodes.get('CORE') || { x: 0, y: 0 };
     const idx = E.nodes.size;
-    // golden-angle spiral around parent for organic feel
     const golden = 2.39996;
     const angle = (idx * golden) % (Math.PI * 2);
     const dist  = SPAWN_RADIUS + ((idx * 17) % 220);
     const tx = parent.x + Math.cos(angle) * dist;
     const ty = parent.y + Math.sin(angle) * dist;
     const type   = node.node_type || node.type || 'DOMAIN';
-    const radius = type === 'CORE' || type === 'CIVILIZATION' ? 36
+    const radius = (type === 'CORE' || type === 'CIVILIZATION') ? 36
                  : type === 'AGENT' ? 22
                  : type === 'TOOL'  ? 14
                  : 18;
@@ -273,21 +345,21 @@
       type,
       label: node.label || node.node_id,
       radius,
-      color: window.colorFor(type),
+      color: (window.colorFor || (() => '#a76bff'))(type),
       phase: Math.random() * Math.PI * 2,
       born:  performance.now(),
       payload: node.payload || {},
       embedding_hint: node.embedding_hint || '',
     };
     E.nodes.set(node.node_id, n);
-    // gentle auto-pan toward new node
+    // Gentle auto-pan toward new node
     E.cam.tx = E.cam.x * 0.86 + tx * 0.14;
     E.cam.ty = E.cam.y * 0.86 + ty * 0.14;
     return n;
   };
 
   window.elysiumAddEdge = function (edge) {
-    // de-dupe
+    if (!edge || !edge.source_node_id || !edge.target_node_id) return;
     if (E.edges.some(e =>
         e.src === edge.source_node_id &&
         e.dst === edge.target_node_id &&
@@ -295,12 +367,12 @@
     E.edges.push({
       src: edge.source_node_id,
       dst: edge.target_node_id,
-      type: edge.edge_type,
+      type: edge.edge_type || 'GENERIC',
       weight: edge.weight ?? 0.5,
-      color: edge.edge_type === 'CONFLICT'  ? 'rgba(255,84,105,.6)' :
+      color: edge.edge_type === 'CONFLICT'  ? 'rgba(255,84,105,.6)'  :
              edge.edge_type === 'COALITION' ? 'rgba(167,107,255,.65)' :
-             edge.edge_type === 'CAUSAL'    ? 'rgba(25,214,255,.55)' :
-             edge.edge_type === 'SUPPORTS'  ? 'rgba(92,255,174,.55)' :
+             edge.edge_type === 'CAUSAL'    ? 'rgba(25,214,255,.55)'  :
+             edge.edge_type === 'SUPPORTS'  ? 'rgba(92,255,174,.55)'  :
                                               'rgba(255,184,64,.55)',
       born: performance.now(),
     });
@@ -326,16 +398,15 @@
 
   window.elysiumGetNode = (id) => E.nodes.get(id);
 
-  // legend filter
   window.elysiumFilterType = function (type) {
     E.filterType = (E.filterType === type) ? null : type;
   };
 
-  // ──────── RENDER LOOP ────────
+  /* ──────── RENDER LOOP ──────── */
   function lerp(a, b, t) { return a + (b - a) * t; }
 
   function loop(t) {
-    // animate spawn-to-target
+    // Animate spawn-to-target
     E.nodes.forEach(n => {
       if (n.tx != null) {
         n.x = lerp(n.x, n.tx, 0.12);
@@ -346,7 +417,7 @@
       }
     });
 
-    // smooth camera
+    // Smooth camera
     E.cam.z = lerp(E.cam.z, E.cam.tz, 0.10);
     if (!E.cam.drag) {
       E.cam.x = lerp(E.cam.x, E.cam.tx, 0.12);
@@ -357,7 +428,7 @@
       if (Math.abs(E.cam.vy) < 0.05) E.cam.vy = 0;
     }
 
-    // background
+    // Background
     ctx.fillStyle = '#02080c';
     ctx.fillRect(0, 0, canvas.width, canvas.height);
     const grad = ctx.createRadialGradient(
@@ -370,14 +441,14 @@
 
     drawAmbient(ctx, t);
 
-    // world transform
+    // World transform
     ctx.save();
     ctx.scale(DPR, DPR);
     ctx.translate(innerWidth / 2, innerHeight / 2);
     ctx.scale(E.cam.z, E.cam.z);
     ctx.translate(-E.cam.x, -E.cam.y);
 
-    // edges (under nodes)
+    // Edges
     E.edges.forEach(e => {
       const s = E.nodes.get(e.src), d = E.nodes.get(e.dst);
       if (!s || !d) return;
@@ -402,11 +473,12 @@
     });
     ctx.globalAlpha = 1;
 
-    // nodes
+    // Nodes
     E.nodes.forEach(n => {
       const dim = E.filterType && n.type !== E.filterType ? 0.22 : 1;
       ctx.globalAlpha = dim;
-      window.drawNode(ctx, n, t, E.cam.z);
+      try { window.drawNode(ctx, n, t, E.cam.z); }
+      catch (err) { /* swallow per-node draw errors */ }
     });
     ctx.globalAlpha = 1;
     ctx.restore();
@@ -415,7 +487,7 @@
     requestAnimationFrame(loop);
   }
 
-  // ambient particles
+  // Ambient particles
   const PARTICLES = Array.from({ length: 60 }, () => ({
     x:  Math.random() * innerWidth,
     y:  Math.random() * innerHeight,

frontend/dist/assets/council.js

@@ -1,255 +1,368 @@
-/* Council overlay + node-detail popover.
+/* ============================================================
+   ELYSIUM — council.js
+   Council overlay + Node-detail popover.
+
    Implements:
-     • Council slide-in panel with per-agent boxes (different neon colors)
-     • Play / Pause / Minimize / Close controls
-     • Per-agent mini play buttons synced to the combined audio
-     • Speaking-agent highlight that follows audio timeline
-     • Node-detail popover with payload, type, connections (image 4 style) */
-const AGENT_COLORS = {
-  THE_BUILDER:  '#ff4fa3',
-  THE_GUARDIAN: '#a76bff',
-  THE_ORACLE:   '#19d6ff',
-  THE_WEAVER:   '#ff80c4',
-  THE_WILDCARD: '#5cffae',
-  DYNAMIC:      '#ffb840',
-};
-window.agentColor = (a) => AGENT_COLORS[a] || '#a76bff';
-
-const overlay = () => document.getElementById('council-overlay');
-const pill    = () => document.getElementById('council-pill');
-
-let _audio = null;          // <audio> element
-let _agentAudios = [];      // [{audio_url, ...}, ...]
-let _currentAgents = [];
-
-function escapeHtml(s) {
-  return String(s || '').replace(/[&<>"']/g, c => ({
-    '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'
-  }[c]));
-}
-
-window.renderCouncil = function (resp, runtime) {
-  const ov    = overlay();
-  const body  = document.getElementById('co-body');
-  const synth = document.getElementById('co-synth');
-  const count = document.getElementById('co-count');
-  const audio = document.getElementById('debate-audio');
-  _audio = audio;
-
-  const cd = resp.council_deliberation || {};
-  const agents = cd.agent_outputs || [];
-  _currentAgents = agents;
-  _agentAudios   = (runtime && runtime.per_agent_audio) || [];
-
-  // No agents → hide overlay + pill
-  if (!agents.length) {
-    ov.classList.remove('show');
-    setTimeout(() => ov.classList.add('hidden'), 400);
-    pill().classList.add('hidden');
-    return;
+     • Council slide-in panel with per-agent cards
+     • Combined-track playback (▶ / ⏸)
+     • Per-agent mini play buttons
+     • Speaking-agent highlight synced to audio time
+     • Node-detail popover (Task 3) — fetches /api/node/:id and
+       falls back to local node payload if backend not reachable
+     • All DOM access is defensive — no "classList of null" crashes
+   ============================================================ */
+(() => {
+  'use strict';
+
+  const AGENT_COLORS = {
+    THE_BUILDER:  '#ff4fa3',
+    THE_GUARDIAN: '#a76bff',
+    THE_ORACLE:   '#19d6ff',
+    THE_WEAVER:   '#ff80c4',
+    THE_WILDCARD: '#5cffae',
+    DYNAMIC:      '#ffb840',
+  };
+  window.agentColor = (a) => AGENT_COLORS[a] || '#a76bff';
+
+  const $ = (id) => document.getElementById(id);
+  const safe = (fn) => { try { return fn(); } catch (e) { console.warn(e); } };
+
+  function escapeHtml(s) {
+    return String(s == null ? '' : s).replace(/[&<>"']/g, c => ({
+      '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'
+    }[c]));
   }
 
-  ov.classList.remove('hidden');
-  requestAnimationFrame(() => ov.classList.add('show'));
-
-  count.textContent = `+${agents.length}`;
-  document.getElementById('pill-count').textContent = agents.length;
-
-  // Render each agent as a colored card
-  body.innerHTML = agents.map((a, i) => {
-    const c = window.agentColor(a.archetype);
-    const audioInfo = _agentAudios[i] || {};
-    const hasAudio  = !!audioInfo.audio_url;
-    return `
-      <div class="agent-card" style="border-color:${c}; --card-glow:${c}33; animation-delay:${i * 80}ms"
-           data-aid="${escapeHtml(a.agent_id)}" data-idx="${i}">
-        <div class="row1">
-          <span class="ad-dot" style="background:${c};color:${c}"></span>
-          <span class="name" style="color:${c}">${escapeHtml(a.agent_name || 'Agent')}</span>
-          <span class="archetype">${escapeHtml((a.archetype || 'DYNAMIC').replace(/^THE_/, ''))}</span>
-          ${a.veto_triggered ? '<span class="veto">VETO</span>' : ''}
-        </div>
-        <div class="thinking">${escapeHtml(a.thinking || '')}</div>
-        <div class="stance">${escapeHtml(a.tts_speech_text || a.stance || '')}</div>
-        <div class="footer-row">
-          <div class="conf">confidence ${(a.confidence ?? 0.8).toFixed(2)}</div>
-          ${hasAudio ? `<button class="play-mini" data-aurl="${audioInfo.audio_url}" data-idx="${i}" title="Play this agent's voice">▶</button>` : ''}
-        </div>
-      </div>`;
-  }).join('');
-
-  synth.textContent = cd.final_synthesis || '';
-
-  // Wire per-agent mini-play buttons
-  body.querySelectorAll('.play-mini').forEach(btn => {
-    btn.onclick = (ev) => {
-      ev.stopPropagation();
-      const url = btn.dataset.aurl;
-      const idx = +btn.dataset.idx;
-      if (audio.src.endsWith(url) && !audio.paused) {
-        audio.pause();
-        btn.classList.remove('playing');
-        btn.textContent = '▶';
-        return;
-      }
-      // stop any other mini playing
-      body.querySelectorAll('.play-mini.playing').forEach(b => {
-        b.classList.remove('playing'); b.textContent = '▶';
+  let _audio = null;
+  let _agentAudios = [];
+  let _currentAgents = [];
+
+  /* =========================================================
+     RENDER COUNCIL (called from boot.js handleResponse)
+     ========================================================= */
+  window.renderCouncil = function (resp, runtime) {
+    const ov    = $('council-overlay');
+    const body  = $('co-body');
+    const synth = $('co-synth');
+    const count = $('co-count');
+    const audio = $('debate-audio');
+    if (!ov || !body) return;
+    _audio = audio;
+
+    const cd = (resp && resp.council_deliberation) || {};
+    const agents = Array.isArray(cd.agent_outputs) ? cd.agent_outputs : [];
+    _currentAgents = agents;
+    _agentAudios   = (runtime && Array.isArray(runtime.per_agent_audio))
+                     ? runtime.per_agent_audio : [];
+
+    // No agents → hide overlay + pill
+    if (!agents.length) {
+      ov.classList.remove('show');
+      setTimeout(() => ov.classList.add('hidden'), 400);
+      const pill = $('council-pill'); if (pill) pill.classList.add('hidden');
+      if (synth) synth.textContent = '';
+      if (audio) { try { audio.pause(); } catch {} audio.removeAttribute('src'); audio.style.display='none'; }
+      if (count) count.textContent = '+0';
+      return;
+    }
+
+    ov.classList.remove('hidden');
+    requestAnimationFrame(() => ov.classList.add('show'));
+
+    if (count) count.textContent = `+${agents.length}`;
+    const pillCount = $('pill-count');
+    if (pillCount) pillCount.textContent = agents.length;
+
+    body.innerHTML = agents.map((a, i) => {
+      if (!a) return '';
+      const c = window.agentColor(a.archetype);
+      const audioInfo = _agentAudios[i] || {};
+      const hasAudio  = !!audioInfo.audio_url;
+      const archetype = (a.archetype || 'DYNAMIC').replace(/^THE_/, '');
+      return `
+        <div class="agent-card" style="border-color:${c}; --card-glow:${c}33; animation-delay:${i * 80}ms"
+             data-aid="${escapeHtml(a.agent_id)}" data-idx="${i}">
+          <div class="row1">
+            <span class="ad-dot" style="background:${c};color:${c}"></span>
+            <span class="name" style="color:${c}">${escapeHtml(a.agent_name || 'Agent')}</span>
+            <span class="archetype">${escapeHtml(archetype)}</span>
+            ${a.veto_triggered ? '<span class="veto">VETO</span>' : ''}
+          </div>
+          <div class="thinking">${escapeHtml(a.thinking || '')}</div>
+          <div class="stance">${escapeHtml(a.tts_speech_text || a.stance || '')}</div>
+          <div class="footer-row">
+            <div class="conf">confidence ${(typeof a.confidence === 'number' ? a.confidence : 0.8).toFixed(2)}</div>
+            ${hasAudio ? `<button class="play-mini" data-aurl="${audioInfo.audio_url}" data-idx="${i}" title="Play this agent's voice">▶</button>` : ''}
+          </div>
+        </div>`;
+    }).join('');
+
+    if (synth) synth.textContent = cd.final_synthesis || '';
+
+    // Wire per-agent mini-play buttons
+    if (audio) {
+      body.querySelectorAll('.play-mini').forEach(btn => {
+        btn.onclick = (ev) => {
+          ev.stopPropagation();
+          const url = btn.dataset.aurl;
+          const idx = +btn.dataset.idx;
+          if (audio.src && audio.src.endsWith(url) && !audio.paused) {
+            audio.pause();
+            btn.classList.remove('playing');
+            btn.textContent = '▶';
+            return;
+          }
+          body.querySelectorAll('.play-mini.playing').forEach(b => {
+            b.classList.remove('playing'); b.textContent = '▶';
+          });
+          audio.dataset.combined = '0';
+          audio.src = url;
+          audio.play().catch(() => {});
+          btn.classList.add('playing');
+          btn.textContent = '⏸';
+          highlightAgent(idx);
+          audio.onended = () => {
+            btn.classList.remove('playing'); btn.textContent = '▶';
+            clearHighlight();
+          };
+        };
       });
-      audio.src = url;
-      audio.play().catch(() => {});
-      btn.classList.add('playing');
-      btn.textContent = '⏸';
-      highlightAgent(idx);
-      audio.onended = () => {
-        btn.classList.remove('playing'); btn.textContent = '▶';
-        clearHighlight();
-      };
-    };
+
+      // Combined audio drama (if backend produced one)
+      if (runtime && runtime.audio_url) {
+        audio.style.display = 'block';
+        audio.src = runtime.audio_url;
+        audio.dataset.combined = '1';
+        const playBtn  = $('co-play');
+        const pauseBtn = $('co-pause');
+        if (playBtn)  playBtn.disabled  = false;
+        if (pauseBtn) pauseBtn.disabled = true;
+        audio.play().then(() => {
+          if (playBtn)  playBtn.disabled  = true;
+          if (pauseBtn) pauseBtn.disabled = false;
+        }).catch(() => {});
+
+        const cards = body.querySelectorAll('.agent-card');
+        let idx = 0;
+        if (cards[0]) cards[0].classList.add('speaking');
+        audio.ontimeupdate = () => {
+          if (!audio.duration || audio.dataset.combined !== '1') return;
+          const target = Math.min(cards.length - 1,
+            Math.floor((audio.currentTime / audio.duration) * cards.length));
+          if (target !== idx) {
+            cards[idx]?.classList.remove('speaking');
+            cards[target]?.classList.add('speaking');
+            idx = target;
+          }
+        };
+        audio.onended = () => {
+          cards.forEach(c => c.classList.remove('speaking'));
+          if (playBtn)  playBtn.disabled  = false;
+          if (pauseBtn) pauseBtn.disabled = true;
+        };
+      } else {
+        audio.style.display = 'none';
+        audio.removeAttribute('src');
+        const playBtn  = $('co-play');
+        const pauseBtn = $('co-pause');
+        if (playBtn)  playBtn.disabled  = true;
+        if (pauseBtn) pauseBtn.disabled = true;
+      }
+    }
+  };
+
+  function highlightAgent(idx) {
+    const cards = document.querySelectorAll('#co-body .agent-card');
+    cards.forEach(c => c.classList.remove('speaking'));
+    if (cards[idx]) cards[idx].classList.add('speaking');
+  }
+  function clearHighlight() {
+    document.querySelectorAll('#co-body .agent-card').forEach(c => c.classList.remove('speaking'));
+  }
+
+  /* =========================================================
+     OVERLAY CONTROLS (defensive — only wire if button exists)
+     ========================================================= */
+  const wire = (id, fn) => { const el = $(id); if (el) el.onclick = fn; };
+
+  wire('co-close', () => {
+    const ov = $('council-overlay');
+    if (ov) {
+      ov.classList.remove('show');
+      setTimeout(() => ov.classList.add('hidden'), 400);
+    }
+    const pill = $('council-pill'); if (pill) pill.classList.add('hidden');
+    if (_audio) { try { _audio.pause(); _audio.currentTime = 0; } catch {} }
   });
 
-  // Combined audio drama
-  if (runtime && runtime.audio_url) {
-    audio.style.display = 'block';
-    audio.src = runtime.audio_url;
-    audio.dataset.combined = '1';
-    document.getElementById('co-play').disabled  = false;
-    document.getElementById('co-pause').disabled = true;
-    // optional autoplay (best-effort, browsers may block)
-    audio.play().then(() => {
-      document.getElementById('co-play').disabled  = true;
-      document.getElementById('co-pause').disabled = false;
+  wire('co-min', () => {
+    const ov = $('council-overlay'); if (ov) ov.classList.add('minimized');
+    if (_currentAgents.length) { const p = $('council-pill'); if (p) p.classList.remove('hidden'); }
+  });
+
+  wire('council-pill', () => {
+    const ov = $('council-overlay');
+    if (ov) ov.classList.remove('minimized');
+    const p = $('council-pill'); if (p) p.classList.add('hidden');
+  });
+
+  wire('co-play', () => {
+    if (!_audio || !_audio.src) return;
+    _audio.dataset.combined = '1';
+    _audio.play().then(() => {
+      const playBtn  = $('co-play');
+      const pauseBtn = $('co-pause');
+      if (playBtn)  playBtn.disabled  = true;
+      if (pauseBtn) pauseBtn.disabled = false;
     }).catch(() => {});
+  });
 
-    const cards = body.querySelectorAll('.agent-card');
-    let idx = 0;
-    if (cards[0]) cards[0].classList.add('speaking');
-    audio.ontimeupdate = () => {
-      if (!audio.duration || audio.dataset.combined !== '1') return;
-      const target = Math.min(cards.length - 1,
-        Math.floor((audio.currentTime / audio.duration) * cards.length));
-      if (target !== idx) {
-        cards[idx]?.classList.remove('speaking');
-        cards[target]?.classList.add('speaking');
-        idx = target;
+  wire('co-pause', () => {
+    if (!_audio) return;
+    try { _audio.pause(); } catch {}
+    const playBtn  = $('co-play');
+    const pauseBtn = $('co-pause');
+    if (playBtn)  playBtn.disabled  = false;
+    if (pauseBtn) pauseBtn.disabled = true;
+  });
+
+  // My-Agent button: toggle overlay (and warn if empty)
+  wire('my-agent', () => {
+    const ov = $('council-overlay');
+    if (!ov) return;
+    if (ov.classList.contains('hidden') || ov.classList.contains('minimized')) {
+      if (!_currentAgents.length) {
+        if (window.toast) window.toast('No agents yet — ask a complex question to summon the council', 'info');
+        return;
       }
-    };
-    audio.onended = () => {
-      cards.forEach(c => c.classList.remove('speaking'));
-      document.getElementById('co-play').disabled  = false;
-      document.getElementById('co-pause').disabled = true;
-    };
-  } else {
-    audio.style.display = 'none';
-    audio.removeAttribute('src');
-    document.getElementById('co-play').disabled  = true;
-    document.getElementById('co-pause').disabled = true;
-  }
-};
-
-function highlightAgent(idx) {
-  const cards = document.querySelectorAll('#co-body .agent-card');
-  cards.forEach(c => c.classList.remove('speaking'));
-  cards[idx]?.classList.add('speaking');
-}
-function clearHighlight() {
-  document.querySelectorAll('#co-body .agent-card').forEach(c => c.classList.remove('speaking'));
-}
-
-/* ── Controls ── */
-document.getElementById('co-close').onclick = () => {
-  overlay().classList.remove('show');
-  setTimeout(() => overlay().classList.add('hidden'), 400);
-  pill().classList.add('hidden');
-  if (_audio) { _audio.pause(); _audio.currentTime = 0; }
-};
-
-document.getElementById('co-min').onclick = () => {
-  overlay().classList.add('minimized');
-  if (_currentAgents.length) pill().classList.remove('hidden');
-};
-
-document.getElementById('council-pill').onclick = () => {
-  overlay().classList.remove('minimized');
-  pill().classList.add('hidden');
-};
-
-document.getElementById('co-play').onclick = () => {
-  if (!_audio || !_audio.src) return;
-  _audio.dataset.combined = '1';
-  _audio.play().then(() => {
-    document.getElementById('co-play').disabled  = true;
-    document.getElementById('co-pause').disabled = false;
-  }).catch(() => {});
-};
-document.getElementById('co-pause').onclick = () => {
-  if (!_audio) return;
-  _audio.pause();
-  document.getElementById('co-play').disabled  = false;
-  document.getElementById('co-pause').disabled = true;
-};
-
-/* ── My-Agent button toggles the overlay ── */
-document.getElementById('my-agent').onclick = () => {
-  const ov = overlay();
-  if (ov.classList.contains('hidden') || ov.classList.contains('minimized')) {
-    if (!_currentAgents.length) {
-      window.toast?.('No agents yet — ask a complex question to summon the council', 'info');
-      return;
+      ov.classList.remove('hidden', 'minimized');
+      requestAnimationFrame(() => ov.classList.add('show'));
+      const p = $('council-pill'); if (p) p.classList.add('hidden');
+    } else {
+      ov.classList.remove('show');
+      setTimeout(() => ov.classList.add('hidden'), 400);
     }
-    ov.classList.remove('hidden', 'minimized');
-    requestAnimationFrame(() => ov.classList.add('show'));
-    pill().classList.add('hidden');
-  } else {
-    ov.classList.remove('show');
-    setTimeout(() => ov.classList.add('hidden'), 400);
-  }
-};
-
-/* ──────────────────────────────────────────────────────────
-   NODE DETAIL POPOVER — fetches /api/node/:id and renders
-   payload + type + connections (matches image 4 layout)
-   ────────────────────────────────────────────────────────── */
-window.showNodeDetail = async function (n, sx, sy) {
-  window.elysiumSelect?.(n.node_id);
-  const el = document.getElementById('node-detail');
-  el.style.left = Math.min(innerWidth  - 340, Math.max(10, sx + 14)) + 'px';
-  el.style.top  = Math.min(innerHeight - 340, Math.max(10, sy - 40)) + 'px';
-
-  // Initial skeleton so user sees something instantly
-  el.innerHTML = `
-    <div class="nd-head">
-      <div class="nd-title">
-        <span class="nd-dot" style="background:${n.color};color:${n.color}"></span>
-        ${escapeHtml(n.label)}</div>
-      <button class="nd-close" onclick="window.hideNodeDetail()">×</button>
-    </div>
-    <div class="nd-type">${escapeHtml(n.type)}</div>
-    <div class="nd-stats">
-      <div class="nd-pill"><b>…</b>links</div>
-      <div class="nd-pill"><b>…</b>in</div>
-      <div class="nd-pill"><b>…</b>out</div>
-    </div>
-    <div class="nd-section">DESCRIPTION</div>
-    <div class="nd-payload">${escapeHtml(n.embedding_hint || (n.payload?.description) || 'Loading…')}</div>
-  `;
-  el.classList.add('show');
-
-  // Fetch enriched details
-  try {
-    const d = await window.ElysiumAPI.nodeDetail(n.node_id);
-    if (!d) return;
-    const conns = (d.incoming || []).concat(d.outgoing || []);
+  });
+
+  /* =========================================================
+     NODE DETAIL POPOVER  (Task 3)
+     Click any node → fetch enriched detail from /api/node/:id,
+     fall back to local data if offline.
+     ========================================================= */
+  window.showNodeDetail = async function (n, sx, sy) {
+    const el = $('node-detail');
+    if (!el || !n) return;
+
+    if (typeof window.elysiumSelect === 'function') {
+      try { window.elysiumSelect(n.node_id); } catch {}
+    }
+
+    // Position popover near click but keep on-screen
+    const W = window.innerWidth, H = window.innerHeight;
+    const left = Math.min(W - 340, Math.max(10, (sx || W/2) + 14));
+    const top  = Math.min(H - 360, Math.max(10, (sy || H/2) - 40));
+    el.style.left = left + 'px';
+    el.style.top  = top  + 'px';
+
+    // Initial skeleton with locally-known data (instant render)
+    const localPayload = n.payload && Object.keys(n.payload).length
+      ? Object.entries(n.payload).slice(0, 6).map(([k, v]) =>
+          `${escapeHtml(k)}: ${escapeHtml(typeof v === 'object' ? JSON.stringify(v) : String(v))}`
+        ).join('\n')
+      : (n.embedding_hint || 'Loading details…');
+
+    el.innerHTML = `
+      <div class="nd-head">
+        <div class="nd-title">
+          <span class="nd-dot" style="background:${n.color};color:${n.color}"></span>
+          ${escapeHtml(n.label)}
+        </div>
+        <button class="nd-close" aria-label="Close">×</button>
+      </div>
+      <div class="nd-type">${escapeHtml(n.type)}</div>
+      <div class="nd-stats">
+        <div class="nd-pill"><b>…</b>links</div>
+        <div class="nd-pill"><b>…</b>in</div>
+        <div class="nd-pill"><b>…</b>out</div>
+      </div>
+      <div class="nd-section">PAYLOAD</div>
+      <div class="nd-payload">${escapeHtml(localPayload)}</div>
+      <div class="nd-section">CONNECTIONS</div>
+      <div class="nd-conns"><div class="nd-conn"><span class="ct">Loading…</span></div></div>
+    `;
+    el.classList.remove('hidden');
+    requestAnimationFrame(() => el.classList.add('show'));
+
+    // Wire close
+    const closeBtn = el.querySelector('.nd-close');
+    if (closeBtn) closeBtn.onclick = (ev) => { ev.stopPropagation(); window.hideNodeDetail(); };
+
+    // Compute local connections immediately (works even offline)
+    const localConns = [];
+    if (window.ELYSIUM) {
+      window.ELYSIUM.edges.forEach(e => {
+        if (e.src === n.node_id) {
+          const target = window.ELYSIUM.nodes.get(e.dst);
+          localConns.push({
+            ct: target ? target.label : e.dst,
+            type: e.type,
+            weight: e.weight,
+            dir: 'out',
+          });
+        } else if (e.dst === n.node_id) {
+          const source = window.ELYSIUM.nodes.get(e.src);
+          localConns.push({
+            ct: source ? source.label : e.src,
+            type: e.type,
+            weight: e.weight,
+            dir: 'in',
+          });
+        }
+      });
+    }
+
+    // Render with local data first
+    renderDetail(el, {
+      node_id: n.node_id,
+      label: n.label,
+      node_type: n.type,
+      payload: n.payload || {},
+      embedding_hint: n.embedding_hint || '',
+      incoming: localConns.filter(c => c.dir === 'in').map(c => ({
+        from_label: c.ct, edge_type: c.type, weight: c.weight,
+      })),
+      outgoing: localConns.filter(c => c.dir === 'out').map(c => ({
+        to_label: c.ct, edge_type: c.type, weight: c.weight,
+      })),
+      degree: localConns.length,
+    });
+
+    // Then try to enrich from backend (silent fail)
+    if (window.ElysiumAPI && window.ElysiumAPI.nodeDetail) {
+      try {
+        const d = await window.ElysiumAPI.nodeDetail(n.node_id);
+        if (d) renderDetail(el, d);
+      } catch (e) { /* keep local data */ }
+    }
+  };
+
+  function renderDetail(el, d) {
+    if (!el || !d) return;
+    const n = window.ELYSIUM ? window.ELYSIUM.nodes.get(d.node_id) : null;
+    const color = (n && n.color) || (window.colorFor ? window.colorFor(d.node_type) : '#a76bff');
+
+    const conns = (Array.isArray(d.incoming) ? d.incoming : [])
+      .concat(Array.isArray(d.outgoing) ? d.outgoing : []);
     const connsHtml = conns.length
-      ? conns.slice(0, 6).map(c => `
+      ? conns.slice(0, 8).map(c => `
           <div class="nd-conn">
-            <span class="ct">${escapeHtml(c.from_label || c.to_label || c.from || c.to)}</span>
-            <span class="cw">${(c.weight ?? 0.5).toFixed(2)}</span>
+            <span class="ct">${escapeHtml(c.from_label || c.to_label || c.from || c.to || '?')}</span>
+            <span class="cw">${(typeof c.weight === 'number' ? c.weight : 0.5).toFixed(2)}</span>
           </div>`).join('')
       : '<div class="nd-conn"><span class="ct">No connections yet</span></div>';
 
     const payload = d.payload && Object.keys(d.payload).length
-      ? Object.entries(d.payload).slice(0, 6).map(([k, v]) =>
+      ? Object.entries(d.payload).slice(0, 8).map(([k, v]) =>
           `${escapeHtml(k)}: ${escapeHtml(typeof v === 'object' ? JSON.stringify(v) : String(v))}`
         ).join('\n')
       : (d.embedding_hint || 'No payload data');
@@ -257,13 +370,14 @@ window.showNodeDetail = async function (n, sx, sy) {
     el.innerHTML = `
       <div class="nd-head">
         <div class="nd-title">
-          <span class="nd-dot" style="background:${n.color};color:${n.color}"></span>
-          ${escapeHtml(d.label)}</div>
-        <button class="nd-close" onclick="window.hideNodeDetail()">×</button>
+          <span class="nd-dot" style="background:${color};color:${color}"></span>
+          ${escapeHtml(d.label || d.node_id)}
+        </div>
+        <button class="nd-close" aria-label="Close">×</button>
       </div>
-      <div class="nd-type">${escapeHtml(d.node_type)}</div>
+      <div class="nd-type">${escapeHtml(d.node_type || '')}</div>
       <div class="nd-stats">
-        <div class="nd-pill"><b>${d.degree}</b>links</div>
+        <div class="nd-pill"><b>${d.degree ?? conns.length}</b>links</div>
         <div class="nd-pill"><b>${(d.incoming || []).length}</b>in</div>
         <div class="nd-pill"><b>${(d.outgoing || []).length}</b>out</div>
       </div>
@@ -272,24 +386,30 @@ window.showNodeDetail = async function (n, sx, sy) {
       <div class="nd-section">CONNECTIONS</div>
       <div class="nd-conns">${connsHtml}</div>
     `;
-  } catch (e) {
-    // local-only fallback
+    const closeBtn = el.querySelector('.nd-close');
+    if (closeBtn) closeBtn.onclick = (ev) => { ev.stopPropagation(); window.hideNodeDetail(); };
   }
-};
-
-window.hideNodeDetail = function () {
-  document.getElementById('node-detail').classList.remove('show');
-  window.ELYSIUM?.nodes.forEach(n => n.selected = false);
-};
-
-// Close popover when clicking elsewhere (but not on canvas — canvas handles its own)
-document.addEventListener('pointerdown', e => {
-  const nd = document.getElementById('node-detail');
-  if (nd.classList.contains('show') &&
-      !nd.contains(e.target) &&
-      e.target.id !== 'elysium-canvas') {
-    // canvas click closes via its own logic; only outside-of-popover clicks here
-    if (e.target.closest('#elysium-canvas')) return;
+
+  window.hideNodeDetail = function () {
+    const el = $('node-detail');
+    if (!el) return;
+    el.classList.remove('show');
+    setTimeout(() => el.classList.add('hidden'), 250);
+    if (window.ELYSIUM) window.ELYSIUM.nodes.forEach(n => n.selected = false);
+  };
+
+  // Click outside popover (and outside canvas) → close
+  document.addEventListener('pointerdown', e => {
+    const nd = $('node-detail');
+    if (!nd || nd.classList.contains('hidden')) return;
+    if (nd.contains(e.target)) return;          // click inside popover
+    if (e.target.id === 'elysium-canvas') return; // canvas handles its own
+    if (e.target.closest && e.target.closest('#minimap-wrap')) return;
     window.hideNodeDetail();
-  }
-});
+  });
+
+  // Escape closes popover
+  document.addEventListener('keydown', e => {
+    if (e.key === 'Escape') window.hideNodeDetail();
+  });
+})();

frontend/dist/assets/elysium.css

@@ -1,8 +1,5 @@
 /* ============================================================
    ELYSIUM — Dark Neon Bioluminescent Theme
-   Heavily inspired by the reference images:
-   deep teal-black backdrop, magenta/cyan/violet/gold neon nodes,
-   glassy panels with neon hairline borders.
 ============================================================ */
 :root{
   --bg-0:#02080c;
@@ -45,8 +42,7 @@
 
 *,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
 html,body{margin:0;padding:0;height:100%;width:100%;overflow:hidden;
-  background:
-    radial-gradient(ellipse 90% 70% at 50% 40%, #0a2434 0%, #03101a 55%, #01060b 100%);
+  background:radial-gradient(ellipse 90% 70% at 50% 40%, #0a2434 0%, #03101a 55%, #01060b 100%);
   color:var(--text);font-family:var(--font-sans);font-size:14px;
   user-select:none;-webkit-user-select:none}
 button{font-family:inherit;color:inherit;cursor:pointer}
@@ -56,7 +52,7 @@ button{font-family:inherit;color:inherit;cursor:pointer}
   touch-action:none;z-index:0}
 #elysium-canvas.dragging{cursor:grabbing}
 
-/* ── GLASS PANELS ─────────────────────────────────────── */
+/* ── GLASS ────────────────────────────────────────────── */
 .glass{
   background:linear-gradient(180deg, var(--panel), var(--panel-2));
   border:1px solid var(--border);
@@ -111,16 +107,16 @@ button{font-family:inherit;color:inherit;cursor:pointer}
   box-shadow:inset 0 0 8px rgba(0,229,200,.08)}
 
 /* ── MINIMAP ──────────────────────────────────────────── */
-#minimap-wrap{position:fixed;left:74px;bottom:140px;z-index:15;
+#minimap-wrap{position:fixed;left:74px;bottom:170px;z-index:15;
   background:rgba(2,12,18,.85);border:1px solid var(--border);border-radius:12px;
   padding:6px 6px 4px;box-shadow:var(--shadow);backdrop-filter:blur(10px)}
 .minimap-label{font-size:9px;letter-spacing:2.2px;color:var(--muted);
   text-align:center;margin-bottom:4px;font-weight:600}
 #minimap{display:block;width:170px;height:108px;border-radius:8px;cursor:crosshair;
-  background:rgba(2,16,22,.95)}
+  background:rgba(2,16,22,.95);touch-action:none}
 
 /* ── ZOOM CTRL ────────────────────────────────────────── */
-#zoom-ctrl{position:fixed;right:24px;bottom:140px;display:flex;flex-direction:column;
+#zoom-ctrl{position:fixed;right:24px;bottom:170px;display:flex;flex-direction:column;
   gap:6px;z-index:15}
 #zoom-ctrl button{width:38px;height:38px;background:rgba(6,18,26,.85);
   border:1px solid var(--border);border-radius:10px;color:var(--teal);
@@ -140,7 +136,7 @@ body[data-alert="CRISIS"] #alert-scrim{background:radial-gradient(ellipse at cen
 @keyframes crisisPulse{0%,100%{opacity:.6}50%{opacity:1}}
 
 /* ── STATS BAR ────────────────────────────────────────── */
-#stats{position:fixed;left:58px;right:0;bottom:84px;height:56px;
+#stats{position:fixed;left:58px;right:0;bottom:108px;height:56px;
   display:flex;align-items:center;padding:0 28px;gap:32px;z-index:18;
   border-radius:0;border-left:none;border-right:none;border-bottom:none;
   background:linear-gradient(180deg,rgba(2,12,18,.72),rgba(2,8,12,.92))}
@@ -152,28 +148,36 @@ body[data-alert="CRISIS"] #alert-scrim{background:radial-gradient(ellipse at cen
 .stat-value{font-size:22px;font-family:var(--font-disp);color:var(--cyan);
   font-weight:700;line-height:1;text-shadow:0 0 8px rgba(25,214,255,.45)}
 
-/* ── QUERY AREA (preview strip + bar + mode row) ──────── */
+/* ── QUERY AREA ───────────────────────────────────────── */
 #query-area{position:fixed;left:58px;right:0;bottom:0;z-index:20;
-  display:flex;flex-direction:column;gap:0}
+  display:flex;flex-direction:column;gap:0;padding-bottom:8px}
 
+/* File preview strip — appears ABOVE input when files attached */
 #attach-strip{margin:0 22px 6px;padding:8px 10px;display:flex;gap:8px;
-  flex-wrap:wrap;align-items:center;border-radius:14px 14px 14px 14px;
-  border-bottom:none;max-height:84px;overflow:auto}
+  flex-wrap:wrap;align-items:center;border-radius:14px;
+  max-height:84px;overflow:auto;
+  animation:stripIn .25s ease-out}
+@keyframes stripIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
 .preview-tile{display:flex;align-items:center;gap:8px;
   background:rgba(0,229,200,.06);border:1px solid var(--border-strong);
-  border-radius:10px;padding:4px 8px 4px 4px;font-size:11px;color:var(--text)}
+  border-radius:10px;padding:4px 8px 4px 4px;font-size:11px;color:var(--text);
+  animation:tileIn .3s ease}
+@keyframes tileIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
 .preview-tile img{width:38px;height:38px;border-radius:6px;object-fit:cover;
   box-shadow:0 0 8px rgba(0,229,200,.3)}
 .preview-tile .pdf-ico{width:38px;height:38px;border-radius:6px;display:grid;
   place-items:center;background:linear-gradient(135deg,#3a1a2a,#1a0a14);
   color:var(--magenta);font-family:var(--font-mono);font-size:11px;font-weight:700;
   box-shadow:var(--neon-magenta)}
-.preview-tile .nm{max-width:120px;overflow:hidden;text-overflow:ellipsis;
+.preview-tile .nm{max-width:140px;overflow:hidden;text-overflow:ellipsis;
   white-space:nowrap;font-family:var(--font-mono)}
-.preview-tile .x{background:none;border:none;color:var(--muted);font-size:14px;
-  cursor:pointer;padding:0 4px}
-.preview-tile .x:hover{color:var(--red)}
-.attach-hint{font-size:11px;color:var(--muted-2);margin-left:6px}
+.preview-tile .x{background:rgba(255,84,105,.12);border:1px solid rgba(255,84,105,.25);
+  color:#ffb0b0;font-size:14px;font-weight:bold;
+  cursor:pointer;padding:0;width:20px;height:20px;border-radius:50%;
+  display:grid;place-items:center;transition:all .15s;line-height:1}
+.preview-tile .x:hover{background:var(--red);color:#fff;transform:scale(1.1);
+  box-shadow:0 0 8px rgba(255,84,105,.5)}
+.attach-hint{font-size:11px;color:var(--muted-2);margin-left:6px;font-style:italic}
 
 #query-bar{margin:0 22px 8px;height:54px;
   display:flex;align-items:center;padding:0 12px;gap:10px;
@@ -289,7 +293,7 @@ body[data-alert="CRISIS"] #alert-scrim{background:radial-gradient(ellipse at cen
 #co-synth:empty{display:none}
 #debate-audio{width:100%;margin-top:10px;height:32px;display:none}
 
-/* COUNCIL PILL (minimized state) */
+/* COUNCIL PILL (minimized) */
 #council-pill{position:fixed;left:22px;top:22px;z-index:24;
   padding:8px 16px;border-radius:20px;background:rgba(6,18,26,.92);
   border:1px solid var(--border-strong);color:var(--text);font-size:12px;
@@ -300,12 +304,13 @@ body[data-alert="CRISIS"] #alert-scrim{background:radial-gradient(ellipse at cen
 #council-pill .dot-mini{width:8px;height:8px;border-radius:50%;background:var(--magenta);
   box-shadow:var(--neon-magenta)}
 
-/* ── NODE DETAIL POPOVER ──────────────────────────────── */
+/* ── NODE DETAIL POPOVER (Task 3) ─────────────────────── */
 #node-detail{position:fixed;width:320px;padding:18px;z-index:30;
   opacity:0;transform:translateY(8px);pointer-events:none;
   transition:opacity .25s,transform .25s;
   border:1px solid var(--border-strong);box-shadow:var(--neon-teal),var(--shadow)}
 #node-detail.show{opacity:1;transform:translateY(0);pointer-events:auto}
+#node-detail.hidden{display:none}
 .nd-head{display:flex;justify-content:space-between;align-items:flex-start;
   margin-bottom:8px;gap:8px}
 .nd-title{font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px;
@@ -313,7 +318,7 @@ body[data-alert="CRISIS"] #alert-scrim{background:radial-gradient(ellipse at cen
 .nd-title .nd-dot{width:16px;height:16px;border-radius:50%;flex-shrink:0;
   box-shadow:0 0 12px currentColor}
 .nd-close{background:none;border:none;color:var(--muted);font-size:20px;
-  cursor:pointer;padding:0;line-height:1}
+  cursor:pointer;padding:0;line-height:1;width:24px;height:24px}
 .nd-close:hover{color:var(--text)}
 .nd-type{font-size:10px;letter-spacing:1.6px;color:var(--cyan);
   text-transform:uppercase;margin-bottom:12px;font-family:var(--font-mono);
@@ -329,7 +334,7 @@ body[data-alert="CRISIS"] #alert-scrim{background:radial-gradient(ellipse at cen
 .nd-payload{font-size:11px;color:var(--text);background:rgba(0,0,0,.25);
   padding:8px 10px;border-radius:8px;font-family:var(--font-mono);
   max-height:90px;overflow:auto;line-height:1.5;
-  border-left:2px solid var(--border-strong)}
+  border-left:2px solid var(--border-strong);white-space:pre-wrap;word-break:break-word}
 .nd-conns{font-size:11px;color:var(--muted);max-height:100px;overflow:auto}
 .nd-conn{display:flex;justify-content:space-between;padding:3px 0;
   border-bottom:1px solid rgba(0,229,200,.07)}
@@ -343,7 +348,7 @@ body[data-alert="CRISIS"] #alert-scrim{background:radial-gradient(ellipse at cen
   border-left:3px solid var(--teal);padding:10px 18px;border-radius:10px;
   font-size:12px;color:var(--text);box-shadow:var(--neon-teal),var(--shadow);
   animation:toastIn .35s ease both,toastOut .4s ease 4.5s both;
-  backdrop-filter:blur(10px)}
+  backdrop-filter:blur(10px);max-width:480px}
 .toast.warn{border-left-color:var(--gold);box-shadow:var(--neon-gold),var(--shadow)}
 .toast.error{border-left-color:var(--red);box-shadow:0 0 14px rgba(255,84,105,.5)}
 .toast.info{border-left-color:var(--violet);box-shadow:var(--neon-violet),var(--shadow)}
@@ -362,7 +367,7 @@ body[data-alert="CRISIS"] #alert-scrim{background:radial-gradient(ellipse at cen
 @keyframes hintFloat{0%,100%{opacity:.7;transform:translate(-50%,-50%)}
   50%{opacity:1;transform:translate(-50%,calc(-50% - 6px))}}
 
-/* ── BUSY OVERLAY (blocks input while model thinks) ──── */
+/* ── BUSY OVERLAY ─────────────────────────────────────── */
 #busy-overlay{position:fixed;inset:0;z-index:35;pointer-events:none;
   display:none;place-items:center;background:rgba(2,12,18,0);
   transition:background .3s}
@@ -378,10 +383,10 @@ body[data-busy="1"] #busy-overlay{display:grid;background:rgba(2,12,18,.18)}
 /* ── RESPONSIVE ───────────────────────────────────────── */
 @media (max-width:980px){
   #legend{width:200px;padding:14px;top:14px;right:14px}
-  #minimap-wrap{padding:5px}
+  #minimap-wrap{padding:5px;bottom:160px}
   #minimap{width:140px;height:90px}
-  #zoom-ctrl{right:14px;bottom:124px}
-  #stats{gap:20px;padding:0 16px}
+  #zoom-ctrl{right:14px;bottom:160px}
+  #stats{gap:20px;padding:0 16px;bottom:100px}
   .stat-value{font-size:18px}
   .stat-label{font-size:9px}
   #council-overlay{width:300px}
@@ -391,19 +396,20 @@ body[data-busy="1"] #busy-overlay{display:grid;background:rgba(2,12,18,.18)}
   #legend{width:170px;padding:12px;top:10px;right:10px;font-size:11px}
   #legend .lbl{display:none}
   .meta-row{font-size:10px}
-  #minimap-wrap{left:54px;bottom:118px}
+  #minimap-wrap{left:54px;bottom:140px}
   #minimap{width:120px;height:80px}
-  #stats{gap:14px;padding:0 12px;height:48px;bottom:78px}
+  #stats{gap:14px;padding:0 12px;height:48px;bottom:96px}
   .stat-value{font-size:15px}
   .stat-icon{font-size:14px}
   #query-area{left:44px}
   .mode-row{padding-right:14px}
   #council-overlay{left:8px;right:8px;width:auto;top:8px;
-    max-height:calc(100vh - 200px)}
-  #zoom-ctrl{bottom:78px;right:10px}
+    max-height:calc(100vh - 240px)}
+  #zoom-ctrl{bottom:96px;right:10px}
+  #node-detail{width:280px}
 }
 
-/* ── HIDE GRADIO if ever shown ─────────────────────────── */
+/* Hide any default Gradio surface */
 .gradio-container,footer,.built-with,gradio-app>.main>.contain{display:none!important}
 
 .hidden{display:none!important}

frontend/dist/assets/nodes.js

@@ -1,133 +1,126 @@
-/* Bioluminescent node rendering — dark-neon theme to match reference images. */
-const TYPE_COLOR = {
-  CORE:       '#ffb840',  // golden seed
-  CIVILIZATION: '#ffb840',
-  DOMAIN:     '#a76bff',  // violet
-  AGENT:      '#ff4fa3',  // magenta
-  TOOL:       '#ff9b3c',  // warm orange
-  PROJECT:    '#19d6ff',  // cyan
-  LIFE_EVENT: '#5cffae',  // green
-  EMOTION:    '#ff80c4',  // pink
-  PERSON:     '#ff70b8',  // pink
-  VALUE:      '#7e5cff',  // violet
-  MEMORY:     '#00e5c8',  // teal
-  FACT:       '#19d6ff',  // cyan
-  CONCEPT:    '#a76bff',
-  QUERY:      '#5cffae',
-};
-const DEFAULT_COLOR = '#a76bff';
+/* ============================================================
+   ELYSIUM — nodes.js
+   Bioluminescent node renderer (dark-neon theme).
+   Pure draw helpers; safe to call from animation loop.
+   ============================================================ */
+(() => {
+  'use strict';
 
-function shade(hex, amt) {
-  const c = parseInt(hex.slice(1), 16);
-  let r = (c >> 16) + amt, g = ((c >> 8) & 255) + amt, b = (c & 255) + amt;
-  r = Math.max(0, Math.min(255, r));
-  g = Math.max(0, Math.min(255, g));
-  b = Math.max(0, Math.min(255, b));
-  return '#' + ((r << 16) | (g << 8) | b).toString(16).padStart(6, '0');
-}
+  const TYPE_COLOR = {
+    CORE:         '#ffb840',  // golden seed
+    CIVILIZATION: '#ffb840',
+    DOMAIN:       '#a76bff',  // violet
+    AGENT:        '#ff4fa3',  // magenta
+    TOOL:         '#ff9b3c',  // warm orange
+    PROJECT:      '#19d6ff',  // cyan
+    LIFE_EVENT:   '#5cffae',  // green
+    EMOTION:      '#ff80c4',  // pink
+    PERSON:       '#ff70b8',
+    VALUE:        '#7e5cff',
+    MEMORY:       '#00e5c8',  // teal
+    FACT:         '#19d6ff',
+    CONCEPT:      '#a76bff',
+    QUERY:        '#5cffae',
+  };
+  const DEFAULT_COLOR = '#a76bff';
 
-window.colorFor = (type) => TYPE_COLOR[type] || DEFAULT_COLOR;
-window.TYPE_COLOR = TYPE_COLOR;
-
-window.drawNode = function (ctx, n, t, zoom) {
-  const ageMs = t - (n.born || t);
-  const age = Math.min(1, ageMs / 700);
-  const k = age;
-  const overshoot = age < 1
-    ? 1 + 1.7 * (k - 1) ** 3 + 0.7 * (k - 1) ** 2
-    : 1;
-
-  const pulse = 1 + 0.06 * Math.sin((t / 1000) * 0.55 + (n.phase || 0));
-  const r = n.radius * pulse * overshoot;
-  const x = n.x, y = n.y;
+  function shade(hex, amt) {
+    if (typeof hex !== 'string' || hex.length < 7) return hex || DEFAULT_COLOR;
+    const c = parseInt(hex.slice(1), 16);
+    let r = (c >> 16) + amt;
+    let g = ((c >> 8) & 255) + amt;
+    let b = (c & 255) + amt;
+    r = Math.max(0, Math.min(255, r));
+    g = Math.max(0, Math.min(255, g));
+    b = Math.max(0, Math.min(255, b));
+    return '#' + ((r << 16) | (g << 8) | b).toString(16).padStart(6, '0');
+  }
 
-  ctx.globalAlpha = age;
+  window.colorFor = (type) => TYPE_COLOR[type] || DEFAULT_COLOR;
+  window.TYPE_COLOR = TYPE_COLOR;
 
-  // outer halo (soft glow)
-  const halo = ctx.createRadialGradient(x, y, r * 0.9, x, y, r * 2.6);
-  halo.addColorStop(0, n.color + 'aa');
-  halo.addColorStop(0.5, n.color + '33');
-  halo.addColorStop(1, n.color + '00');
-  ctx.fillStyle = halo;
-  ctx.beginPath(); ctx.arc(x, y, r * 2.6, 0, Math.PI * 2); ctx.fill();
+  window.drawNode = function (ctx, n, t, zoom) {
+    if (!ctx || !n) return;
+    const ageMs = t - (n.born || t);
+    const age = Math.min(1, ageMs / 700);
+    const k = age;
+    const overshoot = age < 1
+      ? 1 + 1.7 * (k - 1) ** 3 + 0.7 * (k - 1) ** 2
+      : 1;
+    const pulse = 1 + 0.06 * Math.sin((t / 1000) * 0.55 + (n.phase || 0));
+    const r = Math.max(2, n.radius * pulse * overshoot);
+    const x = n.x, y = n.y;
+    const color = n.color || DEFAULT_COLOR;
 
-  // rotating dashed orbital ring (CORE only)
-  if (n.type === 'CORE' || n.type === 'CIVILIZATION') {
-    ctx.save();
-    ctx.translate(x, y);
-    ctx.rotate(t * 0.0004);
-    ctx.strokeStyle = n.color + '88';
-    ctx.lineWidth = 1.5 / zoom;
-    ctx.setLineDash([6 / zoom, 6 / zoom]);
-    ctx.beginPath(); ctx.arc(0, 0, r * 1.85, 0, Math.PI * 2); ctx.stroke();
-    ctx.setLineDash([]);
-    ctx.restore();
-  }
+    ctx.globalAlpha = age;
 
-  // main sphere — neon gradient
-  const grad = ctx.createRadialGradient(x - r * 0.35, y - r * 0.35, r * 0.1, x, y, r);
-  grad.addColorStop(0, shade(n.color, 60));
-  grad.addColorStop(0.5, n.color);
-  grad.addColorStop(1, shade(n.color, -70));
+    // Outer halo
+    const halo = ctx.createRadialGradient(x, y, r * 0.9, x, y, r * 2.6);
+    halo.addColorStop(0, color + 'aa');
+    halo.addColorStop(0.5, color + '33');
+    halo.addColorStop(1, color + '00');
+    ctx.fillStyle = halo;
+    ctx.beginPath(); ctx.arc(x, y, r * 2.6, 0, Math.PI * 2); ctx.fill();
 
-  ctx.shadowColor = n.color;
-  ctx.shadowBlur = 28 * pulse;
-  ctx.fillStyle = grad;
-  ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2); ctx.fill();
-  ctx.shadowBlur = 0;
+    // Rotating dashed orbital ring (CORE only)
+    if (n.type === 'CORE' || n.type === 'CIVILIZATION') {
+      ctx.save();
+      ctx.translate(x, y);
+      ctx.rotate(t * 0.0004);
+      ctx.strokeStyle = color + '88';
+      ctx.lineWidth = 1.5 / zoom;
+      ctx.setLineDash([6 / zoom, 6 / zoom]);
+      ctx.beginPath(); ctx.arc(0, 0, r * 1.85, 0, Math.PI * 2); ctx.stroke();
+      ctx.setLineDash([]);
+      ctx.restore();
+    }
 
-  // specular highlight
-  ctx.fillStyle = 'rgba(255,255,255,.5)';
-  ctx.beginPath();
-  ctx.ellipse(x - r * 0.32, y - r * 0.32, r * 0.28, r * 0.17, -0.5, 0, Math.PI * 2);
-  ctx.fill();
+    // Main sphere
+    const grad = ctx.createRadialGradient(x - r * 0.35, y - r * 0.35, r * 0.1, x, y, r);
+    grad.addColorStop(0, shade(color, 60));
+    grad.addColorStop(0.5, color);
+    grad.addColorStop(1, shade(color, -70));
+    ctx.shadowColor = color;
+    ctx.shadowBlur = 28 * pulse;
+    ctx.fillStyle = grad;
+    ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2); ctx.fill();
+    ctx.shadowBlur = 0;
 
-  // selection ring
-  if (n.selected) {
-    ctx.strokeStyle = '#19d6ff';
-    ctx.lineWidth = 2.5 / zoom;
-    ctx.setLineDash([4 / zoom, 4 / zoom]);
-    ctx.beginPath(); ctx.arc(x, y, r + 8 / zoom, 0, Math.PI * 2); ctx.stroke();
-    ctx.setLineDash([]);
-  }
+    // Specular highlight
+    ctx.fillStyle = 'rgba(255,255,255,.5)';
+    ctx.beginPath();
+    ctx.ellipse(x - r * 0.32, y - r * 0.32, r * 0.28, r * 0.17, -0.5, 0, Math.PI * 2);
+    ctx.fill();
 
-  // counter badge
-  if (n.count != null && zoom > 0.5) {
-    const bx = x - r * 1.1, by = y - r * 0.8;
-    ctx.fillStyle = 'rgba(0,0,0,.7)';
-    ctx.strokeStyle = n.color + '88';
-    ctx.lineWidth = 1 / zoom;
-    if (ctx.roundRect) {
-      ctx.beginPath();
-      ctx.roundRect(bx - 12, by - 8, 22, 16, 8);
-      ctx.fill(); ctx.stroke();
+    // Selection ring
+    if (n.selected) {
+      ctx.strokeStyle = '#19d6ff';
+      ctx.lineWidth = 2.5 / zoom;
+      ctx.setLineDash([4 / zoom, 4 / zoom]);
+      ctx.beginPath(); ctx.arc(x, y, r + 8 / zoom, 0, Math.PI * 2); ctx.stroke();
+      ctx.setLineDash([]);
     }
-    ctx.fillStyle = '#fff';
-    ctx.font = `bold ${10}px Space Mono`;
-    ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
-    ctx.fillText(String(n.count), bx - 1, by);
-  }
 
-  // label
-  if (zoom > 0.4 && n.label) {
-    const fs = Math.min(13, 11 * Math.max(1, zoom * 0.85));
-    // text shadow for legibility
-    ctx.fillStyle = 'rgba(0,0,0,.6)';
-    ctx.font = `500 ${fs / zoom}px Inter, sans-serif`;
-    ctx.textAlign = 'center'; ctx.textBaseline = 'top';
-    const lbl = n.label.length > 24 ? n.label.slice(0, 22) + '…' : n.label;
-    ctx.fillText(lbl, x + 1 / zoom, y + r + 7 / zoom);
-    ctx.fillStyle = '#d8f6fa';
-    ctx.fillText(lbl, x, y + r + 6 / zoom);
-  }
+    // Label
+    if (zoom > 0.4 && n.label) {
+      const fs = Math.min(13, 11 * Math.max(1, zoom * 0.85));
+      ctx.fillStyle = 'rgba(0,0,0,.6)';
+      ctx.font = `500 ${fs / zoom}px Inter, sans-serif`;
+      ctx.textAlign = 'center'; ctx.textBaseline = 'top';
+      const lbl = n.label.length > 24 ? n.label.slice(0, 22) + '…' : n.label;
+      ctx.fillText(lbl, x + 1 / zoom, y + r + 7 / zoom);
+      ctx.fillStyle = '#d8f6fa';
+      ctx.fillText(lbl, x, y + r + 6 / zoom);
+    }
 
-  // pulse highlight ring (from UI directive)
-  if (n.pulseUntil && t < n.pulseUntil) {
-    const p = (n.pulseUntil - t) / 1400;
-    ctx.strokeStyle = `rgba(25,214,255,${p})`;
-    ctx.lineWidth = 2.5 / zoom;
-    ctx.beginPath(); ctx.arc(x, y, r + (1 - p) * 36, 0, Math.PI * 2); ctx.stroke();
-  }
+    // Pulse highlight ring (from UI directive)
+    if (n.pulseUntil && t < n.pulseUntil) {
+      const p = (n.pulseUntil - t) / 1400;
+      ctx.strokeStyle = `rgba(25,214,255,${p})`;
+      ctx.lineWidth = 2.5 / zoom;
+      ctx.beginPath(); ctx.arc(x, y, r + (1 - p) * 36, 0, Math.PI * 2); ctx.stroke();
+    }
 
-  ctx.globalAlpha = 1;
-};
+    ctx.globalAlpha = 1;
+  };
+})();

frontend/dist/index.html

@@ -59,7 +59,7 @@
 <!-- ALERT SCRIM (overlay tint for alert levels) -->
 <div id="alert-scrim"></div>
 
-<!-- STATS BAR — REPLACED with meaningful civilization metrics -->
+<!-- STATS BAR — meaningful civilization metrics -->
 <section id="stats" class="glass">
   <div class="stat" title="Total nodes in your civilization mycelium">
     <div class="stat-icon">🌐</div>