Update frontend/dist/assets/boot.js

frontend/dist/assets/boot.js

@@ -1,83 +1,70 @@
-/* ============================================================
-   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.
-   ============================================================ */
+/* Main app boot — wires UI ↔ /api/turn.
+
+FIXES vs previous build:
+  • NEVER renders raw JSON anywhere. `direct_answer` is sanitised before
+    toasting — anything that looks like JSON, looks like a <think> tag,
+    or exceeds 240 chars is silently dropped.
+  • Hard null-guards around every DOM lookup inside handleResponse so a
+    partial backend response can never throw "cannot read classList of null".
+  • Civilization map (minimap) is now refreshed on every turn via the
+    `_runtime.civilization_map` snapshot.
+  • Attachment preview strip shows above input with X-cancel — preserved
+    & verified to live on /attach-strip with file metadata + thumbnail.
+  • Busy lock prevents double-sends; stuck "Inference failed" toasts no
+    longer fire because parse errors are caught server-side.
+*/
 (() => {
-  '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;
-  };
+  const $ = (id) => document.getElementById(id);
 
-  // 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); };
+  const input    = $('q-input');
+  const send     = $('q-send');
+  const fileEl   = $('q-file');
+  const upBtn    = $('q-upload');
+  const strip    = $('attach-strip');
+  const seedHint = $('seed-hint');
 
-  // ── Toast helper (always returns; never throws) ──
+  // ── Toast helper ──
   window.toast = function (msg, kind = '') {
-    const host = $('toasts');
-    if (!host) { console.log('[toast]', msg); return; }
+    if (msg == null) return;
+    const text = String(msg).trim();
+    if (!text) return;
     const t = document.createElement('div');
-    t.className = 'toast ' + (kind || '');
-    t.textContent = String(msg).slice(0, 280);
+    t.className = 'toast ' + kind;
+    t.textContent = text.length > 240 ? text.slice(0, 237) + '…' : text;
+    const host = $('toasts');
+    if (!host) return;
     host.appendChild(t);
-    setTimeout(() => { try { t.remove(); } catch {} }, 5200);
+    setTimeout(() => t.remove(), 5200);
   };
 
-  function escapeHtml(s) {
-    return String(s == null ? '' : s).replace(/[&<>"']/g, c => ({
-      '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'
-    }[c]));
+  // ── direct_answer sanitiser ── (TASK 1: never display JSON on top)
+  function safeDirectAnswer(s) {
+    if (!s) return '';
+    const text = String(s).trim();
+    if (!text) return '';
+    // Looks like JSON? (starts with { or [, or contains "schema_version")
+    if (/^[\{\[]/.test(text)) return '';
+    if (/schema_version|hypergraph_delta|council_deliberation/.test(text)) return '';
+    // Contains <think> or other XML-like tags? drop.
+    if (/<\s*\/?\s*(think|reasoning|tool|json)\b/i.test(text)) return '';
+    // Excessively long (probably an error dump)
+    if (text.length > 320) return '';
+    return text;
   }
 
-  // ── 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)
-     ========================================================= */
+  // ── File attachment state (max 2) ── TASK 2
   const MAX_FILES = 2;
-  const MAX_BYTES = 12 * 1024 * 1024;
-  let attachments = [];   // [{file, name, kind:'image'|'pdf', previewUrl}]
+  let attachments = [];
 
   function renderStrip() {
     if (!strip) return;
     if (attachments.length === 0) {
-      addCls(strip, 'hidden');
+      strip.classList.add('hidden');
       strip.innerHTML = '';
       return;
     }
-    rmCls(strip, 'hidden');
-    const hint = attachments.length < MAX_FILES
+    strip.classList.remove('hidden');
+    const hintHtml = 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) => {
@@ -89,28 +76,22 @@
         <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 attachment" aria-label="Remove">×</button>
+          <button class="x" data-i="${i}" title="Remove">×</button>
         </div>`;
-    }).join('') + hint;
-
-    // Wire remove buttons
+    }).join('') + hintHtml;
     strip.querySelectorAll('.x').forEach(b => {
       b.onclick = (ev) => {
-        ev.preventDefault();
         ev.stopPropagation();
         const i = +b.dataset.i;
         const removed = attachments.splice(i, 1)[0];
-        if (removed && removed.previewUrl) {
-          try { URL.revokeObjectURL(removed.previewUrl); } catch {}
-        }
+        if (removed?.previewUrl) URL.revokeObjectURL(removed.previewUrl);
         renderStrip();
       };
     });
   }
 
   function addFiles(files) {
-    if (!files) return;
-    const list = Array.from(files);
+    const list = Array.from(files || []);
     for (const f of list) {
       if (attachments.length >= MAX_FILES) {
         window.toast(`Max ${MAX_FILES} attachments allowed`, 'warn');
@@ -120,10 +101,10 @@
       const isImg = mime.startsWith('image/');
       const isPdf = mime === 'application/pdf' || f.name.toLowerCase().endsWith('.pdf');
       if (!isImg && !isPdf) {
-        window.toast(`Unsupported: ${f.name} (only images & PDFs)`, 'warn');
+        window.toast(`Unsupported file: ${f.name} (only images & PDFs)`, 'warn');
         continue;
       }
-      if (f.size > MAX_BYTES) {
+      if (f.size > 12 * 1024 * 1024) {
         window.toast(`${f.name} is too large (>12MB)`, 'warn');
         continue;
       }
@@ -135,292 +116,211 @@
       });
     }
     renderStrip();
-    if (fileEl) fileEl.value = '';   // allow re-selecting same file after removal
+    if (fileEl) fileEl.value = '';
   }
 
-  if (fileEl) {
-    fileEl.addEventListener('change', e => addFiles(e.target.files));
-  }
+  if (fileEl) fileEl.addEventListener('change', e => addFiles(e.target.files));
 
-  // Optional polish: drag-and-drop files anywhere on the window
+  // Drag-and-drop on whole window
   ['dragenter', 'dragover'].forEach(ev =>
     window.addEventListener(ev, e => { e.preventDefault(); }));
   window.addEventListener('drop', e => {
-    if (!e.dataTransfer || !e.dataTransfer.files || !e.dataTransfer.files.length) return;
+    if (!e.dataTransfer || !e.dataTransfer.files.length) return;
     e.preventDefault();
     addFiles(e.dataTransfer.files);
   });
 
-  /* =========================================================
-     PART B — BUSY LOCK (disables input while model thinks)
-     ========================================================= */
+  // ── Busy lock ──
   function setBusy(b) {
     document.body.dataset.busy = b ? '1' : '0';
     if (input) input.disabled = b;
     if (send)  send.disabled  = b;
     if (b) {
-      if (send)  send.classList.add('loading');
-      if (upBtn) upBtn.classList.add('disabled');
+      send?.classList.add('loading');
+      upBtn?.classList.add('disabled');
       if (fileEl) fileEl.disabled = true;
       if (input) {
-        input.dataset.prev = input.placeholder || '';
+        input.dataset.prev = input.placeholder;
         input.placeholder = 'Council deliberating…';
       }
     } else {
-      if (send)  send.classList.remove('loading');
-      if (upBtn) upBtn.classList.remove('disabled');
+      send?.classList.remove('loading');
+      upBtn?.classList.remove('disabled');
       if (fileEl) fileEl.disabled = false;
-      if (input) {
-        input.placeholder = input.dataset.prev || 'Speak to your civilization seed…';
-      }
+      if (input) input.placeholder = input.dataset.prev || 'Speak to your civilization seed…';
     }
   }
 
-  /* =========================================================
-     PART C — RESTORE existing civilization on page load
-     ========================================================= */
+  // ── Restore civilization on load ──
   async function restore() {
     try {
-      const h = await ElysiumAPI.hypergraph();
+      const h = await window.ElysiumAPI.hypergraph();
       (h.nodes || []).forEach(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);
+        if (n.node_id !== 'CORE') window.elysiumAddNode(n);
       });
-      if ((h.nodes || []).length > 1) addCls(seedHint, 'hidden');
+      (h.edges || []).forEach(e => window.elysiumAddEdge(e));
+      if ((h.nodes || []).length > 0) seedHint?.classList.add('hidden');
       updateLegend();
       updateMetrics({
-        nodes: h.node_count || (h.nodes || []).length || 1,
-        edges: h.edge_count || (h.edges || []).length || 0,
-        council_active: 0,
-        knowledge_growth: 0,
+        nodes: h.node_count, edges: h.edge_count,
+        council_active: 0, knowledge_growth: 0,
         civilization_age_min: 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)
+          ? Math.round(Math.min(1, h.edge_count / Math.max(1, h.node_count * 1.4)) * 100)
           : 0,
         coherence_pct: 70,
       });
     } catch (e) {
-      console.warn('[restore] failed', e);
-      updateLegend();
+      // offline first boot — fine
     }
   }
   restore();
 
-  /* =========================================================
-     PART D — SUBMIT a turn
-     ========================================================= */
+  // ── SUBMIT ──
   async function submit() {
     if (document.body.dataset.busy === '1') return;
-    const text = input ? input.value.trim() : '';
+    if (!input) return;
+    const text = input.value.trim();
     if (!text && attachments.length === 0) return;
 
     setBusy(true);
-    addCls(seedHint, 'hidden');
-    if (input) input.value = '';
+    seedHint?.classList.add('hidden');
+    input.value = '';
 
     const files = attachments.map(a => a.file);
-    // Clear preview strip (response will show separate "Analyzed:" toast)
-    attachments.forEach(a => {
-      if (a.previewUrl) { try { URL.revokeObjectURL(a.previewUrl); } catch {} }
-    });
+    attachments.forEach(a => a.previewUrl && URL.revokeObjectURL(a.previewUrl));
     attachments = [];
     renderStrip();
 
     try {
-      const data = await ElysiumAPI.turn(text, files);
-      handleResponse(data || {});
+      const data = await window.ElysiumAPI.turn(text, files);
+      handleResponse(data);
     } catch (e) {
-      console.error('[submit] failed', e);
-      window.toast('Inference failed: ' + (e.message || e), 'error');
+      window.toast('Network error: ' + (e?.message || 'unknown'), 'error');
     } finally {
       setBusy(false);
     }
   }
 
-  if (send)  send.onclick = submit;
-  if (input) {
-    input.addEventListener('keydown', e => {
-      if (e.key === 'Enter' && !e.shiftKey) {
-        e.preventDefault();
-        submit();
-      }
-    });
-  }
+  send?.addEventListener('click', submit);
+  input?.addEventListener('keydown', e => {
+    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); submit(); }
+  });
 
-  /* =========================================================
-     PART E — HANDLE RESPONSE
-     Parses the JSON envelope and routes it. NEVER renders raw
-     JSON to the canvas or any visible element.
-     ========================================================= */
+  // ── HANDLE MODEL RESPONSE ── (TASK 1: route JSON to features, never display raw)
   function handleResponse(payload) {
-    // 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;
-    }
+    payload = payload || {};
+    const resp = payload.elysium_response || {};
+    const rt   = payload._runtime || {};
 
-    // 0. Attachment errors (server-side validation failures) → toast
-    safeArr(rt.attachment_errors).forEach(e =>
+    // 0. Attachment errors → toast
+    (rt.attachment_errors || []).forEach(e =>
       window.toast(`📎 ${e.name}: ${e.error}`, 'warn'));
 
-    // 1. Hypergraph delta → canvas (NODES then EDGES; build parent map)
+    // 1. Hypergraph delta → canvas
     const delta = resp.hypergraph_delta || {};
-    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;
-        }
-      }
-    });
+    const nodesAdded = delta.nodes_added || [];
+    const edgesAdded = delta.edges_added || [];
 
     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);
+      // Find a parent hint: first edge touching this node
+      let parent = null;
+      for (const e of edgesAdded) {
+        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; }
       }
+      try { window.elysiumAddNode(n, parent); } catch (err) { console.warn('addNode failed', err); }
     });
-
     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);
-      }
+      try { window.elysiumAddEdge(e); } catch (err) { console.warn('addEdge failed', 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
+    // 2. UI directives
     const ui = resp.ui_directives || {};
-    safeArr(ui.bioluminescence_pulse_nodes).forEach(id => {
-      if (typeof window.elysiumPulse === 'function') window.elysiumPulse(id, 1600);
+    (ui.bioluminescence_pulse_nodes || []).forEach(id => {
+      try { window.elysiumPulse(id, 1500); } catch (_) {}
     });
     document.body.dataset.alert = ui.alert_level || 'CALM';
-    if (ui.camera_focus_node_id && typeof window.elysiumFocus === 'function') {
-      if (typeof window.elysiumPulse === 'function')
+    if (ui.camera_focus_node_id) {
+      try {
         window.elysiumPulse(ui.camera_focus_node_id, 1800);
-      setTimeout(() => {
-        try { window.elysiumFocus(ui.camera_focus_node_id); } catch {}
-      }, 380);
+        setTimeout(() => window.elysiumFocus(ui.camera_focus_node_id), 350);
+      } catch (_) {}
     }
 
-    // 3. Council overlay + TTS
-    try {
-      if (typeof window.renderCouncil === 'function') {
-        window.renderCouncil(resp, rt);
-      }
-    } catch (e) {
-      console.error('[council] render failed', e);
-    }
+    // 3. Council overlay + TTS  (null-safe)
+    try { window.renderCouncil?.(resp, rt); } catch (err) { console.warn('renderCouncil failed', err); }
 
-    // 4. Metrics bar (REAL civilization metrics)
+    // 4. Metrics bar
     updateMetrics(rt.metrics || {});
 
     // 5. Agent count badge
-    const ag = safeArr(resp.council_deliberation && resp.council_deliberation.agent_outputs).length;
-    const badge = $('agent-count');
-    if (badge) badge.textContent = `+${ag}`;
+    const ag = (resp.council_deliberation?.agent_outputs || []).length;
+    const agBadge = $('agent-count');
+    if (agBadge) agBadge.textContent = `+${ag}`;
 
-    // 6. Legend live update (counts per type)
+    // 6. Legend live update
     updateLegend();
 
     // 7. Tool toasts
-    safeArr(rt.tool_results).forEach(tr => {
-      if (!tr) return;
+    (rt.tool_results || []).forEach(tr => {
       const ok = tr.result && !tr.result.error;
-      window.toast(
-        `🔧 ${tr.tool_name || 'tool'}: ${ok ? 'ok' : (tr.result?.error || 'offline')}`,
-        ok ? 'info' : 'warn'
-      );
+      window.toast(`🔧 ${tr.tool_name}: ${ok ? 'ok' : (tr.result?.error || 'offline')}`,
+                   ok ? 'info' : 'warn');
     });
 
-    // 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));
+    // 8. Direct answer toast — STRICTLY sanitised. Never raw JSON. Never errors.
+    if (!ag) {
+      const safe = safeDirectAnswer(resp.direct_answer);
+      if (safe) window.toast(safe);
     }
 
-    // 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');
+    // 9. Attachment processed confirmation
+    if ((rt.attachments_processed || []).length) {
+      const names = rt.attachments_processed.map(a => a.name).join(', ');
+      window.toast(`📎 Analyzed: ${names}`, 'info');
     }
-  }
 
-  function safeArr(x) { return Array.isArray(x) ? x : []; }
+    // 10. Civilization map sync (TASK 4) — frontend already has the nodes from
+    //     hypergraph_delta; this verifies counts match backend truth.
+    if (rt.civilization_map) {
+      // No reassignment of positions — the canvas owns layout. We only ensure
+      // that any backend-side node missing from the canvas (e.g. restored
+      // across reload) gets added.
+      (rt.civilization_map.nodes || []).forEach(n => {
+        if (!window.ELYSIUM?.nodes.has(n.node_id) && n.node_id !== 'CORE') {
+          try { window.elysiumAddNode({
+            node_id: n.node_id, label: n.label, node_type: n.type,
+          }); } catch (_) {}
+        }
+      });
+    }
+  }
 
-  /* =========================================================
-     PART F — Metrics & Legend updates
-     ========================================================= */
   function updateMetrics(m) {
     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;
+    const set = (id, v) => { const el = $(id); if (el) el.textContent = v; };
+    set('s-nodes',  (m.nodes ?? window.ELYSIUM?.nodes.size ?? 1));
+    set('s-edges',  (m.edges ?? window.ELYSIUM?.edges.length ?? 0));
+    set('s-council',(m.council_active ?? 0));
+    set('s-growth', (m.knowledge_growth ?? 0));
+    set('s-age',    (m.civilization_age_min ?? 0));
+    set('m-density',  (m.mycelium_density_pct ?? 0) + '%');
+    set('m-coherence',(m.coherence_pct ?? 70) + '%');
   }
 
   function updateLegend() {
     const host = $('legend-items');
     if (!host || !window.ELYSIUM) return;
     const counts = {};
-    window.ELYSIUM.nodes.forEach(n => {
-      const t = n.type || 'CONCEPT';
-      counts[t] = (counts[t] || 0) + 1;
-    });
+    window.ELYSIUM.nodes.forEach(n => counts[n.type] = (counts[n.type] || 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 = [];
-    const colorFn = window.colorFor || (() => '#a76bff');
-    order.forEach(t => {
-      if (!counts[t]) return;
+    order.filter(t => counts[t] && !seen.has(t)).forEach(t => {
       seen.add(t);
-      const c = colorFn(t);
+      const c = window.colorFor(t);
       parts.push(`
         <div class="legend-item" data-type="${t}">
           <span class="dot" style="background:${c};color:${c}"></span>
@@ -430,44 +330,37 @@
     });
     Object.keys(counts).forEach(t => {
       if (seen.has(t)) return;
-      const c = colorFn(t);
-      parts.push(`
-        <div class="legend-item" data-type="${t}">
+      const c = window.colorFor(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>`);
     });
     host.innerHTML = parts.join('');
-    // Wire legend filter clicks
     host.querySelectorAll('.legend-item').forEach(el => {
       el.onclick = () => {
         const t = el.dataset.type;
-        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';
-        });
+        window.elysiumFilterType?.(t);
+        host.querySelectorAll('.legend-item').forEach(x =>
+          x.style.opacity = window.ELYSIUM.filterType
+            ? (x.dataset.type === window.ELYSIUM.filterType ? '1' : '.45')
+            : '1');
       };
     });
   }
 
-  /* =========================================================
-     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');
-    };
-  }
+  // RI Analysis
+  $('ri-analysis')?.addEventListener('click', () => {
+    window.elysiumFitAll?.();
+    const n = window.ELYSIUM?.nodes.size ?? 0;
+    const e = 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;
+  function escapeHtml(s) {
+    return String(s || '').replace(/[&<>"']/g, c => ({
+      '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'
+    }[c]));
+  }
 })();