Update frontend/dist/assets/council.js

frontend/dist/assets/council.js

@@ -1,363 +1,285 @@
-/* ============================================================
-   ELYSIUM — council.js
-   Council overlay + Node-detail popover.
-
-   Implements:
-     • 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]));
+/* Council overlay + node-detail popover.
+
+FIXES vs previous build:
+  • Defensive null checks around every DOM lookup so a missing element
+    can never throw "Cannot read properties of null (reading 'classList')".
+  • renderCouncil tolerates a partially-populated `resp` / `runtime`.
+  • Node-detail popover (TASK 3): clicking ANY node opens a rich card
+    with type, payload, incoming/outgoing edges, and node degree.
+*/
+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 overlay = () => $$('council-overlay');
+const pill    = () => $$('council-pill');
+
+let _audio = null;
+let _agentAudios = [];
+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  = $$('co-body');
+  const synth = $$('co-synth');
+  const count = $$('co-count');
+  const audio = $$('debate-audio');
+  if (!ov || !body || !synth || !audio) return; // hard guard
+  _audio = audio;
+
+  const cd = (resp && resp.council_deliberation) || {};
+  const agents = cd.agent_outputs || [];
+  _currentAgents = agents;
+  _agentAudios   = (runtime && runtime.per_agent_audio) || [];
+
+  if (!agents.length) {
+    ov.classList.remove('show');
+    setTimeout(() => ov.classList.add('hidden'), 400);
+    pill()?.classList.add('hidden');
+    body.innerHTML = '';
+    synth.textContent = '';
+    return;
   }
 
-  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();
-          };
-        };
-      });
-
-      // 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;
+  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) => {
+    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
+  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;
       }
-    }
-  };
-
-  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 {} }
-  });
-
-  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');
+      body.querySelectorAll('.play-mini.playing').forEach(b => {
+        b.classList.remove('playing'); b.textContent = '▶';
+      });
+      audio.src = url;
+      audio.play().catch(() => {});
+      btn.classList.add('playing'); btn.textContent = '⏸';
+      highlightAgent(idx);
+      audio.onended = () => {
+        btn.classList.remove('playing'); btn.textContent = '▶';
+        clearHighlight();
+      };
+    };
   });
 
-  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;
+  // Combined audio drama
+  const coPlay  = $$('co-play');
+  const coPause = $$('co-pause');
+  if (runtime && runtime.audio_url) {
+    audio.style.display = 'block';
+    audio.src = runtime.audio_url;
+    audio.dataset.combined = '1';
+    if (coPlay)  coPlay.disabled  = false;
+    if (coPause) coPause.disabled = true;
+    audio.play().then(() => {
+      if (coPlay)  coPlay.disabled  = true;
+      if (coPause) coPause.disabled = false;
     }).catch(() => {});
-  });
 
-  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;
+    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;
       }
-      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);
-    }
-  });
-
-  /* =========================================================
-     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 {}
+    };
+    audio.onended = () => {
+      cards.forEach(c => c.classList.remove('speaking'));
+      if (coPlay)  coPlay.disabled  = false;
+      if (coPause) coPause.disabled = true;
+    };
+  } else {
+    audio.style.display = 'none';
+    audio.removeAttribute('src');
+    if (coPlay)  coPlay.disabled  = true;
+    if (coPause) coPause.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 ── */
+$$('co-close')?.addEventListener('click', () => {
+  const ov = overlay();
+  ov?.classList.remove('show');
+  setTimeout(() => ov?.classList.add('hidden'), 400);
+  pill()?.classList.add('hidden');
+  if (_audio) { _audio.pause(); _audio.currentTime = 0; }
+});
+
+$$('co-min')?.addEventListener('click', () => {
+  overlay()?.classList.add('minimized');
+  if (_currentAgents.length) pill()?.classList.remove('hidden');
+});
+
+$$('council-pill')?.addEventListener('click', () => {
+  overlay()?.classList.remove('minimized');
+  pill()?.classList.add('hidden');
+});
+
+$$('co-play')?.addEventListener('click', () => {
+  if (!_audio || !_audio.src) return;
+  _audio.dataset.combined = '1';
+  _audio.play().then(() => {
+    const p1 = $$('co-play'), p2 = $$('co-pause');
+    if (p1) p1.disabled = true;
+    if (p2) p2.disabled = false;
+  }).catch(() => {});
+});
+
+$$('co-pause')?.addEventListener('click', () => {
+  if (!_audio) return;
+  _audio.pause();
+  const p1 = $$('co-play'), p2 = $$('co-pause');
+  if (p1) p1.disabled = false;
+  if (p2) p2.disabled = true;
+});
+
+$$('my-agent')?.addEventListener('click', () => {
+  const ov = overlay();
+  if (!ov) return;
+  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;
     }
-
-    // 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)}
+    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 — TASK 3
+   Clicking ANY node in the canvas calls window.showNodeDetail()
+   ────────────────────────────────────────────────────────── */
+window.showNodeDetail = async function (n, sx, sy) {
+  if (!n) return;
+  window.elysiumSelect?.(n.node_id);
+  const el = $$('node-detail');
+  if (!el) return;
+
+  // Position popover near the click, clamped to viewport
+  el.style.left = Math.min(innerWidth  - 340, Math.max(10, (sx ?? innerWidth / 2) + 14)) + 'px';
+  el.style.top  = Math.min(innerHeight - 360, Math.max(10, (sy ?? innerHeight / 2) - 40)) + 'px';
+
+  // Initial skeleton
+  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 || 'NODE')}</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 from backend
+  try {
+    const d = await window.ElysiumAPI.nodeDetail(n.node_id);
+    if (!d) {
+      // Local-only data (CORE seed, or node not yet persisted)
+      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 || 'A node of your civilization.');
+      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>
-        <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 */ }
+        <div class="nd-type">${escapeHtml(n.type || 'NODE')}</div>
+        <div class="nd-stats">
+          <div class="nd-pill"><b>0</b>links</div>
+          <div class="nd-pill"><b>0</b>in</div>
+          <div class="nd-pill"><b>0</b>out</div>
+        </div>
+        <div class="nd-section">DESCRIPTION</div>
+        <div class="nd-payload">${escapeHtml(localPayload)}</div>
+      `;
+      return;
     }
-  };
-
-  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 conns = (d.incoming || []).concat(d.outgoing || []);
     const connsHtml = conns.length
       ? 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">${(typeof c.weight === 'number' ? c.weight : 0.5).toFixed(2)}</span>
+            <span class="cw">${(c.weight ?? 0.5).toFixed(2)}</span>
           </div>`).join('')
       : '<div class="nd-conn"><span class="ct">No connections yet</span></div>';
 
@@ -370,14 +292,13 @@
     el.innerHTML = `
       <div class="nd-head">
         <div class="nd-title">
-          <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>
+          <span class="nd-dot" style="background:${n.color};color:${n.color}"></span>
+          ${escapeHtml(d.label)}</div>
+        <button class="nd-close" onclick="window.hideNodeDetail()">×</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 ?? conns.length}</b>links</div>
+        <div class="nd-pill"><b>${d.degree}</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>
@@ -386,30 +307,23 @@
       <div class="nd-section">CONNECTIONS</div>
       <div class="nd-conns">${connsHtml}</div>
     `;
-    const closeBtn = el.querySelector('.nd-close');
-    if (closeBtn) closeBtn.onclick = (ev) => { ev.stopPropagation(); window.hideNodeDetail(); };
+  } catch (e) {
+    console.warn('nodeDetail fetch failed', e);
   }
-
-  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();
-  });
-})();
+};
+
+window.hideNodeDetail = function () {
+  $$('node-detail')?.classList.remove('show');
+  window.ELYSIUM?.nodes.forEach(n => n.selected = false);
+};
+
+// Close popover when clicking outside (but never via canvas — canvas owns its clicks)
+document.addEventListener('pointerdown', e => {
+  const nd = $$('node-detail');
+  if (!nd || !nd.classList.contains('show')) return;
+  if (nd.contains(e.target)) return;
+  if (e.target.id === 'elysium-canvas') return; // canvas handles its own logic
+  // Click on canvas via target tree
+  if (e.target.closest && e.target.closest('#elysium-canvas')) return;
+  window.hideNodeDetail();
+});