Upload folder using huggingface_hub

backend/config.py

@@ -1,6 +1,6 @@
 """Path detection — HF Spaces /data bucket vs local ./local_data clone.
 
-Environment variables (defaults match the real published repo):
+Environment variables (defaults match the REAL published repo):
     ELYSIUM_MODEL_REPO   default: build-small-hackathon/elysium-MiniCPM-V-4.6-F16-GGUF
     ELYSIUM_GGUF_FILE    default: elysium-f16.gguf
     ELYSIUM_MMPROJ_FILE  default: ""   (no mmproj file is published yet — vision auto-disables)
@@ -28,22 +28,23 @@ NODE_POSITIONS  = DATA_PATH / "node_positions"
 REMINDERS_DB    = DATA_PATH / "reminders.db"
 CALENDAR_ICS    = DATA_PATH / "calendar.ics"
 OUTBOX          = DATA_PATH / "outbox"
+UPLOADS_DIR     = DATA_PATH / "uploads"
 
-for d in (HYPERGRAPH_DB.parent, FOSSILS_DIR, AUDIO_CACHE, NODE_POSITIONS, OUTBOX):
+for d in (HYPERGRAPH_DB.parent, FOSSILS_DIR, AUDIO_CACHE, NODE_POSITIONS, OUTBOX, UPLOADS_DIR):
     d.mkdir(parents=True, exist_ok=True)
 
-# ─── Model configuration ─────────────────────────────────────────────────────
-# These defaults point at the REAL published repository:
-#   https://huggingface.co/build-small-hackathon/elysium-MiniCPM-V-4.6-F16-GGUF
-# which currently contains:
-#   - elysium-f16.gguf   (the main MiniCPM-V 4.6 fine-tuned weights)
-# No mmproj file is published yet, so MMPROJ_FILE defaults to "" and vision
-# is gracefully disabled at load time.
+# ─── Model configuration (REAL published repo) ──────────────────────────────
 MODEL_REPO   = os.environ.get("ELYSIUM_MODEL_REPO",   "build-small-hackathon/elysium-MiniCPM-V-4.6-F16-GGUF")
 GGUF_FILE    = os.environ.get("ELYSIUM_GGUF_FILE",    "elysium-f16.gguf")
 MMPROJ_FILE  = os.environ.get("ELYSIUM_MMPROJ_FILE",  "")   # empty → no vision
 
-# Optional auth token (read token works for public repos too and avoids rate limits)
 HF_TOKEN     = os.environ.get("HF_TOKEN") or os.environ.get("HUGGING_FACE_HUB_TOKEN") or None
-
 OFFLINE_MODE = os.environ.get("ELYSIUM_OFFLINE", "0") == "1"
+
+# ─── Upload limits ──────────────────────────────────────────────────────────
+MAX_UPLOAD_FILES   = 2
+MAX_UPLOAD_BYTES   = 12 * 1024 * 1024  # 12 MB per file
+ALLOWED_MIME_TYPES = {
+    "image/png", "image/jpeg", "image/webp", "image/gif",
+    "application/pdf",
+}

backend/prompt_builder.py

@@ -1,14 +1,14 @@
 """Build messages for llama-cpp-python chat completion.
 
-If vision is available (mmproj loaded), images are embedded as data URIs in
-a multimodal `content` list. Otherwise, we fall back to a text-only message
-so the model never errors out on image input.
+Supports up to 2 multimodal attachments (images or PDFs). For PDFs we extract
+text inline (since the vision projector handles images only). If vision is
+unavailable we degrade gracefully to text-only.
 """
 import base64
 import io
 import uuid
 import datetime
-from typing import Optional
+from typing import Optional, List, Dict, Any
 from PIL import Image
 
 from .model_loader import MMPROJ_PATH
@@ -19,12 +19,18 @@ ElysiumResponse schema v1.0.0. No preamble. No markdown fences. JSON only.
 
 Decide complexity dynamically:
 - SIMPLE_REPLY: trivial Q — no agents (council_deliberation.agent_outputs = [])
-- QUERY / MORNING_BRIEFING / EVENING_REPORT: spawn 1–5 agents in agent_outputs,
-  each with thinking + stance + tts_speech_text + tts_voice_design{voice_id,pace,tone}
+- COUNCIL_REPLY / QUERY / MORNING_BRIEFING / EVENING_REPORT: spawn 1–5 agents in
+  agent_outputs, each with thinking + stance + tts_speech_text +
+  tts_voice_design{voice_id,pace,tone}
 - TOOL_REQUIRED: populate tool_calls when external data is needed
 - SPECIATION_EVENT: only on unresolved cross-domain tension
 - Always populate ui_directives (camera_focus_node_id, pulses, threads)
 - All node_id and edge_id values must be unique strings
+- Always include 'direct_answer' — a short human-readable answer to surface in toasts.
+
+When the user attaches images or PDFs, analyze them, populate
+multimodal_perception fields (ocr_extracted_text, image_scene_description,
+document_type, visual_entities_detected), and reference them in your reasoning.
 """
 
 
@@ -34,28 +40,70 @@ def _img_to_data_uri(img: Image.Image) -> str:
     return "data:image/jpeg;base64," + base64.b64encode(buf.getvalue()).decode()
 
 
-def build_messages(user_text: str, image: Optional[Image.Image], hg_context: str = ""):
+def _pdf_to_text(pdf_bytes: bytes, max_chars: int = 8000) -> str:
+    try:
+        from PyPDF2 import PdfReader
+        rd = PdfReader(io.BytesIO(pdf_bytes))
+        out = []
+        for page in rd.pages[:12]:
+            try:
+                out.append(page.extract_text() or "")
+            except Exception:
+                continue
+        txt = "\n".join(out).strip()
+        return txt[:max_chars] if txt else "(PDF contained no extractable text)"
+    except Exception as e:
+        return f"(PDF parse error: {e})"
+
+
+def build_messages(user_text: str,
+                   attachments: Optional[List[Dict[str, Any]]] = None,
+                   hg_context: str = ""):
+    """attachments: list of {'kind': 'image'|'pdf', 'image': PIL.Image | None,
+                              'bytes': bytes | None, 'name': str}
+    """
     ctx = f"\n\n[Hypergraph context]\n{hg_context}" if hg_context else ""
+    attachments = attachments or []
+
+    # Gather image and pdf attachments separately
+    image_atts = [a for a in attachments if a["kind"] == "image" and a.get("image") is not None]
+    pdf_atts   = [a for a in attachments if a["kind"] == "pdf"   and a.get("bytes")]
+
+    # Build inline PDF text block
+    pdf_block = ""
+    for i, p in enumerate(pdf_atts):
+        pdf_block += f"\n\n[Attached PDF #{i+1}: {p.get('name','document.pdf')}]\n"
+        pdf_block += _pdf_to_text(p["bytes"])
 
     # Vision available → multimodal content list
-    if image is not None and MMPROJ_PATH:
-        user_content = [
-            {"type": "image_url", "image_url": {"url": _img_to_data_uri(image)}},
-            {"type": "text", "text": user_text + ctx},
-        ]
+    if image_atts and MMPROJ_PATH:
+        user_content = []
+        for img_att in image_atts[:2]:
+            user_content.append({
+                "type": "image_url",
+                "image_url": {"url": _img_to_data_uri(img_att["image"])},
+            })
+        user_content.append({
+            "type": "text",
+            "text": (user_text or "(no text)") + pdf_block + ctx,
+        })
         return [
             {"role": "system", "content": SYSTEM_PROMPT},
             {"role": "user", "content": user_content},
         ]
 
-    # No vision → plain text. If user attached an image, note it textually.
+    # No vision: include note if user attached images but vision is off
     note = ""
-    if image is not None and not MMPROJ_PATH:
-        note = "\n\n[Note: user attached an image but the vision projector is not loaded; respond based on text only.]"
+    if image_atts and not MMPROJ_PATH:
+        note = (f"\n\n[Note: user attached {len(image_atts)} image(s) but vision "
+                "projector is not loaded; describe based on filename + text only.]")
+        for img_att in image_atts:
+            note += f"\n - image filename: {img_att.get('name','image')}"
 
     return [
         {"role": "system", "content": SYSTEM_PROMPT},
-        {"role": "user", "content": user_text + ctx + note},
+        {"role": "user",
+         "content": (user_text or "(no text)") + pdf_block + note + ctx},
     ]
 
 

backend/server.py

@@ -1,158 +1,299 @@
-"""FastAPI routes attached to gr.Server. The frontend talks ONLY to /api/*."""
-import io, json, traceback, base64
-from PIL import Image
-from fastapi import UploadFile, File, Form, HTTPException
-from fastapi.responses import JSONResponse, FileResponse
-from fastapi.staticfiles import StaticFiles
-
-import spaces
-
-from .config import AUDIO_CACHE
-from .model_loader import make_llm
-from .grammar import load_grammar
-from .prompt_builder import build_messages, new_session_meta
-from .schema import ElysiumEnvelope, ElysiumResponse
-from .hypergraph import persistence
-from .hypergraph.engine import Hypergraph
-from .tools.dispatcher import execute_all
-from .tts.debate_sequencer import build_debate
-
-
-# ─── Singletons ───
-HG: Hypergraph = persistence.load()
-GRAMMAR = load_grammar()
-
-
-# ─── GPU-bound inference ───
-@spaces.GPU(duration=120)
-def _gpu_infer(messages: list, max_tokens: int = 4096) -> str:
-    llm = make_llm()
-    out = llm.create_chat_completion(
-        messages=messages,
-        max_tokens=max_tokens,
-        temperature=0.7,
-        grammar=GRAMMAR,          # strict JSON at sampling time
-    )
-    return out["choices"][0]["message"]["content"]
-
-
-def _fallback_envelope(user_text: str, err: str) -> dict:
-    meta = new_session_meta()
-    resp = ElysiumResponse(
-        session_id=meta["session_id"],
-        timestamp_utc=meta["timestamp_utc"],
-        interaction_type="SIMPLE_REPLY",
-        direct_answer=f"(fallback) {err}",
-    )
-    return {"user_msg": user_text, "elysium_response": resp.model_dump()}
-
-
-def attach(app):
-    """Register all /api routes on the gr.Server FastAPI app."""
-
-    # mount /audio for generated debate wavs
-    app.mount("/audio", StaticFiles(directory=str(AUDIO_CACHE)), name="audio")
-
-    @app.get("/api/health")
-    async def health():
-        return {"status": "ok",
-                "nodes": HG.node_count(),
-                "edges": HG.edge_count(),
-                "grammar": GRAMMAR is not None}
-
-    @app.get("/api/hypergraph")
-    async def hypergraph():
-        nodes, edges = [], []
-        for i in HG.g.node_indexes():
-            d = HG.g[i]
-            nodes.append({"node_id": d["node_id"], "label": d["label"],
-                          "node_type": d["node_type"], "payload": d.get("payload", {})})
-        for s, t in HG.g.edge_list():
-            d = HG.g.get_edge_data(s, t)
-            edges.append({"edge_id": d["edge_id"],
-                          "source_node_id": HG.g[s]["node_id"],
-                          "target_node_id": HG.g[t]["node_id"],
-                          "edge_type": d["edge_type"], "weight": d["weight"]})
-        return {"nodes": nodes, "edges": edges,
-                "node_count": HG.node_count(), "edge_count": HG.edge_count()}
-
-    @app.post("/api/turn")
-    async def turn(user_text: str = Form(""), image: UploadFile = File(None)):
-        try:
-            # 1. Load image if present
-            img = None
-            if image is not None:
-                content = await image.read()
-                if content:
-                    try:
-                        img = Image.open(io.BytesIO(content))
-                    except Exception:
-                        img = None
-
-            # 2. Build messages with hypergraph context
-            messages = build_messages(user_text, img, HG.context_summary())
-
-            # 3. GPU inference (returns strict JSON)
-            raw = _gpu_infer(messages)
-
-            # 4. Parse
-            try:
-                envelope = ElysiumEnvelope.model_validate_json(raw)
-            except Exception as parse_err:
-                # try to extract any JSON object from raw
-                try:
-                    blob = json.loads(raw)
-                    if "elysium_response" not in blob:
-                        # wrap as direct_answer
-                        meta = new_session_meta()
-                        envelope = ElysiumEnvelope(
-                            user_msg=user_text,
-                            elysium_response=ElysiumResponse(
-                                session_id=meta["session_id"],
-                                timestamp_utc=meta["timestamp_utc"],
-                                interaction_type="SIMPLE_REPLY",
-                                direct_answer=str(blob)[:600]))
-                    else:
-                        envelope = ElysiumEnvelope.model_validate(blob)
-                except Exception:
-                    return JSONResponse(_fallback_envelope(user_text, f"parse_error: {parse_err}"))
-
-            resp = envelope.elysium_response
-
-            # 5. Apply hypergraph delta
-            HG.apply_delta(resp.hypergraph_delta)
-            persistence.save(HG)
-
-            # 6. Execute tools
-            tool_results = execute_all(resp.tool_calls) if resp.tool_calls else []
-
-            # 7. Build audio drama if needed
-            audio_url = None
-            if resp.council_deliberation.debate_mode == "AUDIO_DRAMA" \
-               and resp.council_deliberation.agent_outputs:
-                try:
-                    audio_url = build_debate(
-                        [a.model_dump() for a in resp.council_deliberation.agent_outputs]
-                    )
-                except Exception as e:
-                    print(f"[tts] debate failed: {e}")
-
-            payload = envelope.model_dump()
-            payload["_runtime"] = {
-                "tool_results": tool_results,
-                "audio_url": audio_url,
-                "hypergraph": {"nodes": HG.node_count(), "edges": HG.edge_count()},
-            }
-            return JSONResponse(payload)
-
-        except Exception as e:
-            traceback.print_exc()
-            return JSONResponse(_fallback_envelope(user_text, str(e)), status_code=200)
-
-    @app.post("/api/reset")
-    async def reset():
-        """Wipe the hypergraph — start a new civilization."""
-        global HG
-        HG = Hypergraph()
-        persistence.save(HG)
-        return {"status": "reset"}
+"""FastAPI routes attached to gr.Server.
+
+Key changes vs previous build:
+  • /api/turn now accepts up to 2 attachments (images or PDFs) via repeated
+    'attachments' multipart fields.
+  • Hypergraph maintains per-node spawn parent so frontend can draw correct
+    mycelium threads.
+  • Returns a `metrics` block with civilization-meaningful values
+    (mycelium_density, council_activity, knowledge_growth, civilization_age)
+    instead of fake compliance/laws numbers.
+  • Audio drama segments are returned per-agent so the frontend can sync
+    play/pause + speaking highlight to each utterance.
+  • Removes the raw-JSON dump from the canvas: the frontend never displays
+    raw JSON; it consumes it for nodes / edges / council / TTS only.
+"""
+import io
+import json
+import time
+import traceback
+from typing import List, Optional
+from PIL import Image
+from fastapi import UploadFile, File, Form, HTTPException
+from fastapi.responses import JSONResponse
+from fastapi.staticfiles import StaticFiles
+
+import spaces
+
+from .config import (AUDIO_CACHE, MAX_UPLOAD_FILES, MAX_UPLOAD_BYTES,
+                     ALLOWED_MIME_TYPES)
+from .model_loader import make_llm
+from .grammar import load_grammar
+from .prompt_builder import build_messages, new_session_meta
+from .schema import ElysiumEnvelope, ElysiumResponse
+from .hypergraph import persistence
+from .hypergraph.engine import Hypergraph
+from .tools.dispatcher import execute_all
+from .tts.debate_sequencer import build_debate, build_per_agent_audio
+
+
+# ─── Singletons ─────────────────────────────────────────────────────────────
+HG: Hypergraph = persistence.load()
+GRAMMAR = load_grammar()
+CIVILIZATION_START_TS = time.time()
+
+
+# ─── GPU-bound inference ────────────────────────────────────────────────────
+@spaces.GPU(duration=120)
+def _gpu_infer(messages: list, max_tokens: int = 4096) -> str:
+    llm = make_llm()
+    out = llm.create_chat_completion(
+        messages=messages,
+        max_tokens=max_tokens,
+        temperature=0.7,
+        grammar=GRAMMAR,
+    )
+    return out["choices"][0]["message"]["content"]
+
+
+def _fallback_envelope(user_text: str, err: str) -> dict:
+    meta = new_session_meta()
+    resp = ElysiumResponse(
+        session_id=meta["session_id"],
+        timestamp_utc=meta["timestamp_utc"],
+        interaction_type="SIMPLE_REPLY",
+        direct_answer=f"(fallback) {err}",
+    )
+    return {"user_msg": user_text, "elysium_response": resp.model_dump()}
+
+
+def _civilization_metrics(resp: ElysiumResponse) -> dict:
+    """Real, meaningful metrics derived from the hypergraph state."""
+    nodes = HG.node_count()
+    edges = HG.edge_count()
+
+    # Mycelium density = edges per node, normalized to 0-100%
+    density = 0.0
+    if nodes > 0:
+        density = min(1.0, edges / max(1, nodes * 1.4))
+
+    # Council activity = number of active agents (capped at 5)
+    council_active = len(resp.council_deliberation.agent_outputs or [])
+
+    # Knowledge growth (this turn) = nodes added
+    knowledge_growth = len(resp.hypergraph_delta.nodes_added or [])
+
+    # Coherence = inverse of cognitive strain
+    coherence = 1.0 - float(resp.strain_metadata.cognitive_strain or 0.3)
+
+    age_seconds = time.time() - CIVILIZATION_START_TS
+    age_minutes = int(age_seconds / 60)
+
+    return {
+        "mycelium_density_pct": round(density * 100),
+        "council_active":       council_active,
+        "knowledge_growth":     knowledge_growth,
+        "coherence_pct":        round(max(0.0, min(1.0, coherence)) * 100),
+        "civilization_age_min": age_minutes,
+        "nodes":                nodes,
+        "edges":                edges,
+        "alert_level":          resp.ui_directives.alert_level or "CALM",
+    }
+
+
+async def _load_attachment(uf: UploadFile) -> Optional[dict]:
+    if uf is None or not uf.filename:
+        return None
+    raw = await uf.read()
+    if not raw:
+        return None
+    if len(raw) > MAX_UPLOAD_BYTES:
+        return {"kind": "error", "name": uf.filename,
+                "error": f"file too large ({len(raw)} > {MAX_UPLOAD_BYTES} bytes)"}
+    mime = (uf.content_type or "").lower()
+    if mime not in ALLOWED_MIME_TYPES:
+        # also accept by extension as last resort
+        low = uf.filename.lower()
+        if low.endswith(".pdf"):
+            mime = "application/pdf"
+        elif low.endswith((".png", ".jpg", ".jpeg", ".webp", ".gif")):
+            mime = "image/jpeg"
+        else:
+            return {"kind": "error", "name": uf.filename, "error": f"unsupported type: {mime}"}
+
+    if mime == "application/pdf":
+        return {"kind": "pdf", "bytes": raw, "name": uf.filename}
+    # image
+    try:
+        img = Image.open(io.BytesIO(raw))
+        img.load()
+        return {"kind": "image", "image": img, "name": uf.filename, "bytes": raw}
+    except Exception as e:
+        return {"kind": "error", "name": uf.filename, "error": f"image decode failed: {e}"}
+
+
+def attach(app):
+    """Register all /api routes on the gr.Server FastAPI app."""
+
+    app.mount("/audio", StaticFiles(directory=str(AUDIO_CACHE)), name="audio")
+
+    @app.get("/api/health")
+    async def health():
+        return {"status": "ok",
+                "nodes": HG.node_count(),
+                "edges": HG.edge_count(),
+                "grammar": GRAMMAR is not None,
+                "max_upload_files": MAX_UPLOAD_FILES}
+
+    @app.get("/api/hypergraph")
+    async def hypergraph():
+        nodes, edges = [], []
+        for i in HG.g.node_indexes():
+            d = HG.g[i]
+            nodes.append({
+                "node_id":   d["node_id"],
+                "label":     d.get("label", d["node_id"]),
+                "node_type": d.get("node_type", "DOMAIN"),
+                "payload":   d.get("payload", {}),
+                "embedding_hint": d.get("embedding_hint", ""),
+            })
+        for s, t in HG.g.edge_list():
+            d = HG.g.get_edge_data(s, t)
+            edges.append({
+                "edge_id":         d.get("edge_id", f"e_{s}_{t}"),
+                "source_node_id":  HG.g[s]["node_id"],
+                "target_node_id":  HG.g[t]["node_id"],
+                "edge_type":       d.get("edge_type", "GENERIC"),
+                "weight":          d.get("weight", 0.5),
+                "payload":         d.get("payload", {}),
+            })
+        return {
+            "nodes": nodes, "edges": edges,
+            "node_count": HG.node_count(), "edge_count": HG.edge_count(),
+        }
+
+    @app.get("/api/node/{node_id}")
+    async def node_detail(node_id: str):
+        """Detail view for one node: payload, connections, related agents."""
+        if node_id not in HG._idx:
+            raise HTTPException(404, "node not found")
+        idx = HG._idx[node_id]
+        n   = HG.g[idx]
+
+        incoming, outgoing = [], []
+        for s, t in HG.g.edge_list():
+            d = HG.g.get_edge_data(s, t)
+            if t == idx:
+                incoming.append({
+                    "from": HG.g[s]["node_id"],
+                    "from_label": HG.g[s].get("label", ""),
+                    "edge_type": d.get("edge_type", ""),
+                    "weight": d.get("weight", 0.5),
+                })
+            if s == idx:
+                outgoing.append({
+                    "to": HG.g[t]["node_id"],
+                    "to_label": HG.g[t].get("label", ""),
+                    "edge_type": d.get("edge_type", ""),
+                    "weight": d.get("weight", 0.5),
+                })
+        return {
+            "node_id":  n["node_id"],
+            "label":    n.get("label", n["node_id"]),
+            "node_type": n.get("node_type", ""),
+            "payload":  n.get("payload", {}),
+            "embedding_hint": n.get("embedding_hint", ""),
+            "incoming": incoming,
+            "outgoing": outgoing,
+            "degree":   len(incoming) + len(outgoing),
+        }
+
+    @app.post("/api/turn")
+    async def turn(user_text: str = Form(""),
+                   attachments: List[UploadFile] = File(default=[])):
+        try:
+            # 1. Process up to MAX_UPLOAD_FILES attachments
+            atts = []
+            for uf in (attachments or [])[:MAX_UPLOAD_FILES]:
+                a = await _load_attachment(uf)
+                if a:
+                    atts.append(a)
+
+            errors = [a for a in atts if a.get("kind") == "error"]
+            valid  = [a for a in atts if a.get("kind") in ("image", "pdf")]
+
+            # 2. Build messages with hypergraph context
+            messages = build_messages(user_text, valid, HG.context_summary())
+
+            # 3. GPU inference (returns strict JSON)
+            raw = _gpu_infer(messages)
+
+            # 4. Parse
+            try:
+                envelope = ElysiumEnvelope.model_validate_json(raw)
+            except Exception as parse_err:
+                try:
+                    blob = json.loads(raw)
+                    if "elysium_response" not in blob:
+                        meta = new_session_meta()
+                        envelope = ElysiumEnvelope(
+                            user_msg=user_text,
+                            elysium_response=ElysiumResponse(
+                                session_id=meta["session_id"],
+                                timestamp_utc=meta["timestamp_utc"],
+                                interaction_type="SIMPLE_REPLY",
+                                direct_answer=str(blob)[:600]))
+                    else:
+                        envelope = ElysiumEnvelope.model_validate(blob)
+                except Exception:
+                    return JSONResponse(
+                        _fallback_envelope(user_text, f"parse_error: {parse_err}"))
+
+            resp = envelope.elysium_response
+
+            # 5. Apply hypergraph delta
+            HG.apply_delta(resp.hypergraph_delta)
+            persistence.save(HG)
+
+            # 6. Execute tools
+            tool_results = execute_all(resp.tool_calls) if resp.tool_calls else []
+
+            # 7. Build audio drama if needed (combined + per-agent)
+            audio_url = None
+            per_agent_audio = []
+            if resp.council_deliberation.debate_mode in ("AUDIO_DRAMA", "SILENT") \
+               and resp.council_deliberation.agent_outputs:
+                try:
+                    agents_dump = [a.model_dump() for a in resp.council_deliberation.agent_outputs]
+                    if resp.council_deliberation.debate_mode == "AUDIO_DRAMA":
+                        audio_url = build_debate(agents_dump)
+                    per_agent_audio = build_per_agent_audio(agents_dump)
+                except Exception as e:
+                    print(f"[tts] debate failed: {e}")
+                    traceback.print_exc()
+
+            payload = envelope.model_dump()
+            payload["_runtime"] = {
+                "tool_results":    tool_results,
+                "audio_url":       audio_url,
+                "per_agent_audio": per_agent_audio,
+                "metrics":         _civilization_metrics(resp),
+                "attachment_errors": [{"name": e["name"], "error": e["error"]} for e in errors],
+                "attachments_processed": [
+                    {"kind": a["kind"], "name": a["name"]} for a in valid
+                ],
+            }
+            return JSONResponse(payload)
+
+        except Exception as e:
+            traceback.print_exc()
+            return JSONResponse(
+                _fallback_envelope(user_text, str(e)), status_code=200)
+
+    @app.post("/api/reset")
+    async def reset():
+        global HG, CIVILIZATION_START_TS
+        HG = Hypergraph()
+        persistence.save(HG)
+        CIVILIZATION_START_TS = time.time()
+        return {"status": "reset"}

backend/tts/debate_sequencer.py

@@ -1,26 +1,72 @@
-"""Sequences multiple agent utterances into one debate audio drama."""
-import uuid
-from pathlib import Path
-from pydub import AudioSegment
-from ..config import AUDIO_CACHE
-from .voxcpm_engine import synthesize
-
-
-def build_debate(agent_outputs: list) -> str | None:
-    """Returns a server-relative path under /audio/... for the frontend."""
-    if not agent_outputs:
-        return None
-    track = AudioSegment.silent(duration=300)
-    for ao in agent_outputs:
-        text  = ao.get("tts_speech_text", "")
-        voice = ao.get("tts_voice_design", {}) or {}
-        wav_path = synthesize(text, voice)
-        try:
-            seg = AudioSegment.from_wav(wav_path)
-            track += seg + AudioSegment.silent(duration=400)
-        except Exception:
-            continue
-    out_path = AUDIO_CACHE / f"debate_{uuid.uuid4().hex}.wav"
-    track.export(out_path, format="wav")
-    # Return /audio/<filename> for the static mount
-    return f"/audio/{out_path.name}"
+"""Sequences agent utterances into both a combined debate track AND
+per-agent clips so the frontend can play them independently with synced
+speaking highlights.
+"""
+import uuid
+from pathlib import Path
+from pydub import AudioSegment
+from ..config import AUDIO_CACHE
+from .voxcpm_engine import synthesize
+
+
+def _agent_clip(ao: dict) -> str | None:
+    """Synthesize and return server path to one agent's audio clip."""
+    text  = ao.get("tts_speech_text", "")
+    voice = ao.get("tts_voice_design", {}) or {}
+    if not text.strip():
+        return None
+    try:
+        wav_path = synthesize(text, voice)
+        # voxcpm writes into AUDIO_CACHE already → just return /audio/<name>
+        return f"/audio/{Path(wav_path).name}"
+    except Exception as e:
+        print(f"[tts] clip failed for agent {ao.get('agent_id')}: {e}")
+        return None
+
+
+def build_per_agent_audio(agent_outputs: list) -> list:
+    """Returns [{agent_id, agent_name, archetype, audio_url}] for each agent
+    with a clip. Frontend uses these for the My-Agent overlay's per-agent
+    play buttons.
+    """
+    out = []
+    for ao in agent_outputs:
+        url = _agent_clip(ao)
+        out.append({
+            "agent_id":   ao.get("agent_id", ""),
+            "agent_name": ao.get("agent_name", "Agent"),
+            "archetype":  ao.get("archetype", "DYNAMIC"),
+            "audio_url":  url,
+            "tts_text":   ao.get("tts_speech_text", ""),
+            "confidence": ao.get("confidence", 0.8),
+            "stance":     ao.get("stance", ""),
+            "thinking":   ao.get("thinking", ""),
+            "voice_design": ao.get("tts_voice_design", {}),
+        })
+    return out
+
+
+def build_debate(agent_outputs: list) -> str | None:
+    """Returns a server-relative path under /audio/... for the combined track."""
+    if not agent_outputs:
+        return None
+    track = AudioSegment.silent(duration=200)
+    for ao in agent_outputs:
+        text  = ao.get("tts_speech_text", "")
+        voice = ao.get("tts_voice_design", {}) or {}
+        if not text.strip():
+            continue
+        try:
+            wav_path = synthesize(text, voice)
+            seg = AudioSegment.from_wav(wav_path)
+            track += seg + AudioSegment.silent(duration=350)
+        except Exception as e:
+            print(f"[tts] segment failed: {e}")
+            continue
+    out_path = AUDIO_CACHE / f"debate_{uuid.uuid4().hex}.wav"
+    try:
+        track.export(out_path, format="wav")
+    except Exception as e:
+        print(f"[tts] export failed: {e}")
+        return None
+    return f"/audio/{out_path.name}"

frontend/dist/assets/api.js

@@ -1,13 +1,20 @@
-/* Tiny client for /api/* endpoints. */
-window.ElysiumAPI = {
-  async turn(text, file) {
-    const fd = new FormData();
-    fd.append('user_text', text);
-    if (file) fd.append('image', file);
-    const r = await fetch('/api/turn', { method: 'POST', body: fd });
-    return r.json();
-  },
-  async health() { return (await fetch('/api/health')).json(); },
-  async hypergraph() { return (await fetch('/api/hypergraph')).json(); },
-  async reset() { return (await fetch('/api/reset', { method: 'POST' })).json(); },
-};
+/* Tiny client for /api/* endpoints.
+   Supports multiple attachments (max 2 enforced on UI side too). */
+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));
+    const r = await fetch('/api/turn', { method: 'POST', body: fd });
+    if (!r.ok) throw new Error('HTTP ' + r.status);
+    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 reset()       { return (await fetch('/api/reset',{method:'POST'})).json(); },
+};

frontend/dist/assets/boot.js

@@ -1,122 +1,315 @@
-/* Main app boot: wire input → /api/turn → update canvas + council. */
-(() => {
-  const input     = document.getElementById('q-input');
-  const send      = document.getElementById('q-send');
-  const file      = document.getElementById('q-file');
-  const seedHint  = document.getElementById('seed-hint');
-
-  function toast(msg, kind = '') {
-    const t = document.createElement('div');
-    t.className = 'toast ' + kind; t.textContent = msg;
-    document.getElementById('toasts').appendChild(t);
-    setTimeout(() => t.remove(), 4500);
-  }
-
-  // Restore hypergraph on load
-  async function restore() {
-    try {
-      const h = await ElysiumAPI.hypergraph();
-      (h.nodes || []).forEach(n => window.elysiumAddNode(n));
-      (h.edges || []).forEach(e => window.elysiumAddEdge(e));
-      if ((h.nodes || []).length > 1) seedHint.classList.add('hidden');
-      updateLegend();
-      document.getElementById('s-engage').textContent = h.node_count || 0;
-      document.getElementById('s-laws').textContent   = h.edge_count || 0;
-    } catch(e) { /* offline first-boot */ }
-  }
-  restore();
-
-  // Wire send
-  let busy = false;
-  async function submit() {
-    if (busy) return;
-    const text = input.value.trim();
-    if (!text && !file.files.length) return;
-    busy = true; send.classList.add('loading'); send.textContent = '◐';
-    seedHint.classList.add('hidden');
-    input.value = ''; input.placeholder = 'Council deliberating…';
-    try {
-      const data = await ElysiumAPI.turn(text, file.files[0]);
-      file.value = '';
-      handleResponse(data);
-    } catch(e) {
-      toast('Inference failed: ' + e.message, 'error');
-    } finally {
-      busy = false; send.classList.remove('loading'); send.textContent = '→';
-      input.placeholder = 'Speak to your council…';
-    }
-  }
-  send.onclick = submit;
-  input.addEventListener('keydown', e => { if (e.key === 'Enter') submit(); });
-
-  function handleResponse(payload) {
-    const resp = payload.elysium_response || {};
-    const rt   = payload._runtime || {};
-    // 1. apply hypergraph delta
-    const delta = resp.hypergraph_delta || {};
-    (delta.nodes_added || []).forEach(n => window.elysiumAddNode(n));
-    (delta.edges_added || []).forEach(e => window.elysiumAddEdge(e));
-
-    // 2. UI directives
-    const ui = resp.ui_directives || {};
-    (ui.bioluminescence_pulse_nodes || []).forEach(id => window.elysiumPulse(id, 1400));
-    document.body.dataset.alert = ui.alert_level || 'CALM';
-    if (ui.camera_focus_node_id) window.elysiumFocus(ui.camera_focus_node_id);
-
-    // 3. council
-    window.renderCouncil(resp, rt);
-
-    // 4. stats
-    const meta = resp.metadata || {};
-    document.getElementById('s-engage').textContent = meta.hypergraph_node_count ?? '0';
-    document.getElementById('s-laws').textContent   = meta.hypergraph_edge_count ?? '0';
-    document.getElementById('s-impl').textContent   =
-      Math.round((1 - (resp.strain_metadata?.cognitive_strain ?? 0.3)) * 100) + '%';
-    document.getElementById('s-health').textContent = `${(rt.hypergraph?.nodes ?? 0)}`;
-
-    // 5. agent count
-    const ag = (resp.council_deliberation?.agent_outputs || []).length;
-    document.getElementById('agent-count').textContent = `+${ag}`;
-
-    // 6. legend
-    updateLegend();
-
-    // 7. tool toasts
-    (rt.tool_results || []).forEach(tr => {
-      const ok = tr.result && !tr.result.error;
-      toast(`🔧 ${tr.tool_name}: ${ok ? 'ok' : (tr.result?.error || 'offline')}`,
-            ok ? '' : 'warn');
-    });
-
-    // 8. direct answer toast if no agents
-    if (!ag && resp.direct_answer) toast(resp.direct_answer);
-  }
-
-  function updateLegend() {
-    const counts = {};
-    window.ELYSIUM.nodes.forEach(n => counts[n.type] = (counts[n.type] || 0) + 1);
-    const order = ['CORE','DOMAIN','AGENT','TOOL','PROJECT','LIFE_EVENT','EMOTION','PERSON','VALUE','MEMORY'];
-    const items = order.filter(t => counts[t]).map(t => {
-      const c = window.colorFor(t);
-      return `<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('_',' ').toLowerCase()}</span>
-      </div>`;
-    }).join('');
-    document.getElementById('legend-items').innerHTML = items;
-    document.getElementById('legend-gaps').textContent =
-      Math.min(99, Math.round((1 - (counts.AGENT || 0) / Math.max(1, counts.DOMAIN || 1)) * 50)) + '%';
-    document.getElementById('legend-updates').textContent =
-      Math.min(99, window.ELYSIUM.nodes.size * 3) + '%';
-  }
-
-  // RI Analysis = fit all + show health
-  document.getElementById('ri-analysis').onclick = () => {
-    window.elysiumFitAll();
-    toast('🔍 RI Analysis: civilization-wide view');
-  };
-  document.getElementById('my-agent').onclick = () => {
-    toast(`🤖 Active agents: ${document.getElementById('agent-count').textContent}`);
-  };
-})();
+/* 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
+*/
+(() => {
+  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 ──
+  window.toast = function (msg, kind = '') {
+    const t = document.createElement('div');
+    t.className = 'toast ' + kind;
+    t.textContent = msg;
+    document.getElementById('toasts').appendChild(t);
+    setTimeout(() => t.remove(), 5200);
+  };
+
+  // ── File attachment state (max 2) ──
+  const MAX_FILES = 2;
+  let attachments = [];   // {file, name, kind, previewUrl}
+
+  function renderStrip() {
+    if (attachments.length === 0) {
+      strip.classList.add('hidden');
+      strip.innerHTML = '';
+      return;
+    }
+    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) => {
+      const preview = a.kind === 'image'
+        ? `<img src="${a.previewUrl}" alt="">`
+        : `<div class="pdf-ico">PDF</div>`;
+      const sizeKb = (a.file.size / 1024).toFixed(0);
+      return `
+        <div class="preview-tile">
+          ${preview}
+          <span class="nm" title="${escapeHtml(a.name)}">${escapeHtml(a.name)} · ${sizeKb}KB</span>
+          <button class="x" data-i="${i}" title="Remove">×</button>
+        </div>`;
+    }).join('') + hintHtml;
+    strip.querySelectorAll('.x').forEach(b => {
+      b.onclick = () => {
+        const i = +b.dataset.i;
+        const removed = attachments.splice(i, 1)[0];
+        if (removed?.previewUrl) URL.revokeObjectURL(removed.previewUrl);
+        renderStrip();
+      };
+    });
+  }
+
+  function addFiles(files) {
+    const list = Array.from(files);
+    for (const f of list) {
+      if (attachments.length >= MAX_FILES) {
+        window.toast(`Max ${MAX_FILES} attachments allowed`, 'warn');
+        break;
+      }
+      const mime = (f.type || '').toLowerCase();
+      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');
+        continue;
+      }
+      if (f.size > 12 * 1024 * 1024) {
+        window.toast(`${f.name} is too large (>12MB)`, 'warn');
+        continue;
+      }
+      attachments.push({
+        file: f,
+        name: f.name,
+        kind: isImg ? 'image' : 'pdf',
+        previewUrl: isImg ? URL.createObjectURL(f) : null,
+      });
+    }
+    renderStrip();
+    // reset native input so the same file can be re-selected if user removes it
+    fileEl.value = '';
+  }
+
+  fileEl.addEventListener('change', e => addFiles(e.target.files));
+
+  // ── Drag-and-drop onto the whole window (bonus polish) ──
+  ['dragenter', 'dragover'].forEach(ev =>
+    window.addEventListener(ev, e => { e.preventDefault(); }));
+  window.addEventListener('drop', e => {
+    if (!e.dataTransfer || !e.dataTransfer.files.length) return;
+    e.preventDefault();
+    addFiles(e.dataTransfer.files);
+  });
+
+  // ── Busy lock (disable input while model thinks) ──
+  function setBusy(b) {
+    document.body.dataset.busy = b ? '1' : '0';
+    input.disabled = b;
+    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…';
+    } else {
+      send.classList.remove('loading');
+      upBtn.classList.remove('disabled');
+      fileEl.disabled = false;
+      input.placeholder = input.dataset.prev || 'Speak to your civilization seed…';
+    }
+  }
+
+  // ── Restore civilization on load ──
+  async function restore() {
+    try {
+      const h = await ElysiumAPI.hypergraph();
+      (h.nodes || []).forEach(n => {
+        if (n.node_id !== 'CORE') window.elysiumAddNode(n);
+      });
+      (h.edges || []).forEach(e => window.elysiumAddEdge(e));
+      if ((h.nodes || []).length > 0) seedHint.classList.add('hidden');
+      updateLegend();
+      updateMetrics({
+        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 / Math.max(1, h.node_count * 1.4)) * 100) : 0,
+        coherence_pct: 70,
+      });
+    } catch (e) {
+      // first boot offline — fine
+    }
+  }
+  restore();
+
+  // ── SUBMIT ──
+  async function submit() {
+    if (document.body.dataset.busy === '1') return;
+    const text = input.value.trim();
+    if (!text && attachments.length === 0) return;
+
+    setBusy(true);
+    seedHint.classList.add('hidden');
+    input.value = '';
+
+    const files = attachments.map(a => a.file);
+    // clear preview strip
+    attachments.forEach(a => a.previewUrl && URL.revokeObjectURL(a.previewUrl));
+    attachments = [];
+    renderStrip();
+
+    try {
+      const data = await ElysiumAPI.turn(text, files);
+      handleResponse(data);
+    } catch (e) {
+      window.toast('Inference failed: ' + e.message, 'error');
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  send.onclick = submit;
+  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.
+  function handleResponse(payload) {
+    const resp = payload.elysium_response || {};
+    const rt   = payload._runtime || {};
+
+    // 0. Attachment errors → toast
+    (rt.attachment_errors || []).forEach(e =>
+      window.toast(`📎 ${e.name}: ${e.error}`, 'warn'));
+
+    // 1. Hypergraph delta → canvas
+    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; }
+      }
+      window.elysiumAddNode(n, parent);
+    });
+    (delta.edges_added || []).forEach(e => window.elysiumAddEdge(e));
+
+    // 2. UI directives
+    const ui = resp.ui_directives || {};
+    (ui.bioluminescence_pulse_nodes || []).forEach(id => window.elysiumPulse(id, 1500));
+    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);
+    }
+
+    // 3. Council overlay + TTS
+    window.renderCouncil(resp, rt);
+
+    // 4. Metrics bar (REAL civilization metrics, not fake)
+    updateMetrics(rt.metrics || {});
+
+    // 5. Agent count badge
+    const ag = (resp.council_deliberation?.agent_outputs || []).length;
+    document.getElementById('agent-count').textContent = `+${ag}`;
+
+    // 6. Legend live update
+    updateLegend();
+
+    // 7. Tool toasts
+    (rt.tool_results || []).forEach(tr => {
+      const ok = tr.result && !tr.result.error;
+      window.toast(`🔧 ${tr.tool_name}: ${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);
+    }
+
+    // 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 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) + '%';
+  }
+
+  function updateLegend() {
+    const counts = {};
+    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 = [];
+    order.filter(t => counts[t] && !seen.has(t)).forEach(t => {
+      seen.add(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>`);
+    });
+    // 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}">
+          <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 => {
+      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');
+      };
+    });
+  }
+
+  // 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]));
+  }
+})();

frontend/dist/assets/canvas.js

@@ -1,339 +1,444 @@
-/* Google-Maps-style infinite-pan canvas with bioluminescent hypergraph. */
-(() => {
-  const canvas = document.getElementById('elysium-canvas');
-  const ctx = canvas.getContext('2d', { alpha: false });
-
-  const DPR = Math.max(1, Math.min(2, window.devicePixelRatio || 1));
-  function resize() {
-    canvas.width = innerWidth * DPR;
-    canvas.height = innerHeight * DPR;
-    canvas.style.width = innerWidth + 'px';
-    canvas.style.height = innerHeight + 'px';
-  }
-  resize(); addEventListener('resize', resize);
-
-  // World state
-  const E = window.ELYSIUM = {
-    cam: { x: 0, y: 0, z: 1, tx: 0, ty: 0, tz: 1, vx: 0, vy: 0, drag: false },
-    nodes: new Map(), edges: [], spawning: [],
-    hover: null, selected: null,
-  };
-
-  // Seed CORE
-  E.nodes.set('CORE', {
-    node_id: 'CORE', x: 0, y: 0, type: 'CORE', label: 'ELYSIUM',
-    radius: 34, color: '#c8a44a', phase: 0, born: performance.now() - 1000,
-  });
-
-  // ──────── PAN / ZOOM ────────
-  let lastX = 0, lastY = 0;
-  function clientToWorld(cx, cy) {
-    return {
-      x: (cx - innerWidth / 2) / E.cam.z + E.cam.x,
-      y: (cy - innerHeight / 2) / E.cam.z + E.cam.y,
-    };
-  }
-
-  canvas.addEventListener('pointerdown', e => {
-    // hit-test a node first
-    const w = clientToWorld(e.clientX, e.clientY);
-    let hit = null;
-    E.nodes.forEach(n => {
-      if (Math.hypot(n.x - w.x, n.y - w.y) < n.radius * 1.15) hit = n;
-    });
-    if (hit) { showNodeDetail(hit, e.clientX, e.clientY); return; }
-    E.cam.drag = true; canvas.classList.add('dragging');
-    lastX = e.clientX; lastY = e.clientY;
-    canvas.setPointerCapture(e.pointerId);
-  });
-  canvas.addEventListener('pointermove', e => {
-    if (!E.cam.drag) {
-      const w = clientToWorld(e.clientX, e.clientY);
-      let hover = null;
-      E.nodes.forEach(n => { if (Math.hypot(n.x - w.x, n.y - w.y) < n.radius * 1.15) hover = n; });
-      E.hover = hover; canvas.style.cursor = hover ? 'pointer' : '';
-      return;
-    }
-    const dx = (e.clientX - lastX) / E.cam.z;
-    const dy = (e.clientY - lastY) / 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;
-    lastX = e.clientX; lastY = e.clientY;
-  });
-  function endPan(e){ E.cam.drag = false; canvas.classList.remove('dragging');
-                      try { canvas.releasePointerCapture(e.pointerId); } catch{} }
-  canvas.addEventListener('pointerup', endPan);
-  canvas.addEventListener('pointercancel', endPan);
-
-  // wheel zoom
-  canvas.addEventListener('wheel', e => {
-    e.preventDefault();
-    const factor = e.deltaY > 0 ? 0.9 : 1.1;
-    const w = clientToWorld(e.clientX, e.clientY);
-    E.cam.tz = Math.max(0.15, Math.min(4, E.cam.z * factor));
-    E.cam.tx = w.x - (e.clientX - innerWidth / 2) / E.cam.tz;
-    E.cam.ty = w.y - (e.clientY - innerHeight / 2) / E.cam.tz;
-  }, { passive: false });
-
-  // double-click zoom-in
-  canvas.addEventListener('dblclick', e => {
-    const w = clientToWorld(e.clientX, e.clientY);
-    E.cam.tz = Math.min(4, E.cam.z * 1.6);
-    E.cam.tx = w.x; E.cam.ty = w.y;
-  });
-
-  // ──────── TOUCH (pinch) ────────
-  let touchDist = 0, touchMid = null;
-  canvas.addEventListener('touchstart', e => {
-    if (e.touches.length === 2) {
-      e.preventDefault();
-      const [a, b] = e.touches;
-      touchDist = Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY);
-      touchMid  = { x: (a.clientX + b.clientX) / 2, y: (a.clientY + b.clientY) / 2 };
-    }
-  }, { passive: false });
-  canvas.addEventListener('touchmove', e => {
-    if (e.touches.length === 2 && touchDist) {
-      e.preventDefault();
-      const [a, b] = e.touches;
-      const d = Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY);
-      const factor = d / touchDist; touchDist = d;
-      const w = clientToWorld(touchMid.x, touchMid.y);
-      E.cam.tz = Math.max(0.15, Math.min(4, E.cam.z * factor));
-      E.cam.tx = w.x - (touchMid.x - innerWidth / 2) / E.cam.tz;
-      E.cam.ty = w.y - (touchMid.y - innerHeight / 2) / E.cam.tz;
-    }
-  }, { 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;
-
-  function fitAll() {
-    if (E.nodes.size === 0) return;
-    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); });
-    const pad = 180;
-    E.cam.tx = (mnX + mxX) / 2;
-    E.cam.ty = (mnY + mxY) / 2;
-    E.cam.tz = Math.min(4, Math.max(0.25,
-      Math.min(innerWidth / (mxX - mnX + pad), innerHeight / (mxY - mnY + pad))));
-  }
-  window.elysiumFitAll = fitAll;
-
-  // ──────── MINIMAP ────────
-  const mini = document.getElementById('minimap');
-  const mctx = mini.getContext('2d');
-  function drawMinimap() {
-    mini.width = 160; mini.height = 100;
-    mctx.fillStyle = 'rgba(8,24,30,.95)';
-    mctx.fillRect(0, 0, 160, 100);
-    if (E.nodes.size === 0) return;
-    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); });
-    const pad = 80; mnX -= pad; mnY -= pad; mxX += pad; mxY += pad;
-    const sx = 160 / (mxX - mnX), sy = 100 / (mxY - mnY);
-    // edges
-    mctx.strokeStyle = 'rgba(0,200,160,.18)'; mctx.lineWidth = .5;
-    E.edges.forEach(ed => {
-      const s = E.nodes.get(ed.src), t = E.nodes.get(ed.dst);
-      if (!s || !t) return;
-      mctx.beginPath();
-      mctx.moveTo((s.x - mnX) * sx, (s.y - mnY) * sy);
-      mctx.lineTo((t.x - mnX) * sx, (t.y - mnY) * sy);
-      mctx.stroke();
-    });
-    // nodes
-    E.nodes.forEach(n => {
-      mctx.fillStyle = n.color;
-      mctx.beginPath(); mctx.arc((n.x - mnX) * sx, (n.y - mnY) * sy, 2.2, 0, Math.PI * 2);
-      mctx.fill();
-    });
-    // 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, vh = innerHeight / E.cam.z * sy;
-    mctx.strokeStyle = 'rgba(0,229,255,.7)'; mctx.lineWidth = 1;
-    mctx.setLineDash([3, 3]);
-    mctx.strokeRect(vx, vy, vw, vh);
-    mctx.setLineDash([]);
-  }
-  // minimap click → pan
-  mini.addEventListener('click', e => {
-    if (E.nodes.size === 0) return;
-    const rect = mini.getBoundingClientRect();
-    const fx = (e.clientX - rect.left) / rect.width;
-    const fy = (e.clientY - rect.top) / rect.height;
-    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); });
-    const pad = 80; mnX -= pad; mnY -= pad; mxX += pad; mxY += pad;
-    E.cam.tx = mnX + fx * (mxX - mnX);
-    E.cam.ty = mnY + fy * (mxY - mnY);
-  });
-
-  // ──────── NODE DETAIL POPOVER ────────
-  function showNodeDetail(n, sx, sy) {
-    const el = document.getElementById('node-detail');
-    el.style.left = Math.min(innerWidth - 300, sx + 16) + 'px';
-    el.style.top  = Math.min(innerHeight - 200, sy) + 'px';
-    el.innerHTML = `
-      <div class="nd-title">
-        <span style="width:14px;height:14px;border-radius:50%;background:${n.color};
-                     box-shadow:0 0 8px ${n.color}"></span>${n.label || n.node_id}</div>
-      <div class="nd-type">${n.type}</div>
-      <div class="nd-stats">
-        <div class="nd-pill"><b>${(Math.random()*40+10|0)}</b>activity</div>
-        <div class="nd-pill"><b>${(Math.random()*70+10|0)}%</b>weight</div>
-        <div class="nd-pill"><b>${(Math.random()*30+5|0)}</b>links</div>
-      </div>
-      <div style="font-size:11px;color:var(--muted);line-height:1.5">
-        Node connected to your civilization mycelium. Pan and zoom to explore.
-      </div>`;
-    el.classList.add('show');
-    clearTimeout(showNodeDetail._t);
-    showNodeDetail._t = setTimeout(() => el.classList.remove('show'), 4500);
-  }
-
-  // ──────── PUBLIC API ────────
-  const SPAWN_RADIUS = 280;
-  window.elysiumAddNode = function (node, parentId = 'CORE') {
-    if (E.nodes.has(node.node_id)) return;
-    const parent = E.nodes.get(parentId) || E.nodes.get('CORE') || { x: 0, y: 0 };
-    const idx = E.nodes.size;
-    const angle = idx * 0.7 + Math.random() * 0.6 - 0.3;
-    const dist = SPAWN_RADIUS + (idx * 14) % 180;
-    const tx = parent.x + Math.cos(angle) * dist;
-    const ty = parent.y + Math.sin(angle) * dist;
-    const type = node.node_type || 'DOMAIN';
-    const radius = type === 'CORE' ? 34 :
-                   type === 'AGENT' ? 22 :
-                   type === 'TOOL'  ? 14 : 18;
-    E.nodes.set(node.node_id, {
-      node_id: node.node_id,
-      x: parent.x, y: parent.y, tx, ty,
-      type, label: node.label || node.node_id,
-      radius, color: window.colorFor(type),
-      phase: Math.random() * Math.PI * 2,
-      born: performance.now(),
-      spawnFrom: parentId,
-    });
-    // auto-pan a little toward new node
-    E.cam.tx = E.cam.x * 0.85 + tx * 0.15;
-    E.cam.ty = E.cam.y * 0.85 + ty * 0.15;
-  };
-
-  window.elysiumAddEdge = function (edge) {
-    E.edges.push({
-      src: edge.source_node_id, dst: edge.target_node_id,
-      type: edge.edge_type, weight: edge.weight ?? 0.5,
-      color: edge.edge_type === 'CONFLICT'  ? 'rgba(220,80,80,.55)' :
-             edge.edge_type === 'COALITION' ? 'rgba(120,190,255,.6)' :
-             edge.edge_type === 'CAUSAL'    ? 'rgba(0,229,255,.45)' :
-                                              'rgba(200,164,74,.5)',
-      born: performance.now(), dashOffset: 0,
-    });
-  };
-
-  window.elysiumPulse = function (nodeId, ms = 1200) {
-    const n = E.nodes.get(nodeId); if (n) n.pulseUntil = performance.now() + ms;
-  };
-
-  window.elysiumFocus = function (nodeId) {
-    const n = E.nodes.get(nodeId); if (!n) return;
-    E.cam.tx = n.x; E.cam.ty = n.y;
-    E.cam.tz = Math.max(1, E.cam.z);
-  };
-
-  // ──────── RENDER LOOP ────────
-  function lerp(a, b, t) { return a + (b - a) * t; }
-  function loop(t) {
-    // animate spawning nodes toward target
-    E.nodes.forEach(n => {
-      if (n.tx != null) {
-        n.x = lerp(n.x, n.tx, 0.12);
-        n.y = lerp(n.y, n.ty, 0.12);
-        if (Math.abs(n.x - n.tx) < 0.3 && Math.abs(n.y - n.ty) < 0.3) {
-          n.x = n.tx; n.y = n.ty; n.tx = null; n.ty = null;
-        }
-      }
-    });
-    // 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);
-      E.cam.y = lerp(E.cam.y, E.cam.ty, 0.12);
-      E.cam.x -= E.cam.vx; E.cam.y -= E.cam.vy;
-      E.cam.vx *= 0.92; E.cam.vy *= 0.92;
-      if (Math.abs(E.cam.vx) < 0.05) E.cam.vx = 0;
-      if (Math.abs(E.cam.vy) < 0.05) E.cam.vy = 0;
-    }
-
-    // background haze
-    ctx.fillStyle = '#0a1a20';
-    ctx.fillRect(0, 0, canvas.width, canvas.height);
-    const grad = ctx.createRadialGradient(canvas.width/2, canvas.height/2, 0,
-                                          canvas.width/2, canvas.height/2, canvas.width*0.55);
-    grad.addColorStop(0, 'rgba(10,48,64,.22)');
-    grad.addColorStop(1, 'rgba(6,14,18,0)');
-    ctx.fillStyle = grad; ctx.fillRect(0, 0, canvas.width, canvas.height);
-
-    // particles (subtle ambient)
-    drawAmbient(ctx, t);
-
-    // 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
-    E.edges.forEach(e => {
-      const s = E.nodes.get(e.src), d = E.nodes.get(e.dst); if (!s || !d) return;
-      ctx.strokeStyle = e.color;
-      ctx.lineWidth = (0.8 + (e.weight ?? .5) * 0.8) / E.cam.z;
-      if (e.type === 'COALITION' || e.type === 'CAUSAL') {
-        ctx.setLineDash([6 / E.cam.z, 4 / E.cam.z]);
-        ctx.lineDashOffset = -(t * 0.02);
-      } else {
-        ctx.setLineDash([]);
-      }
-      ctx.beginPath(); ctx.moveTo(s.x, s.y); ctx.lineTo(d.x, d.y); ctx.stroke();
-      ctx.setLineDash([]);
-    });
-
-    // nodes
-    E.nodes.forEach(n => window.drawNode(ctx, n, t, E.cam.z));
-    ctx.restore();
-
-    drawMinimap();
-    requestAnimationFrame(loop);
-  }
-
-  // ambient floating particles
-  const PARTICLES = Array.from({length: 50}, () => ({
-    x: Math.random() * innerWidth, y: Math.random() * innerHeight,
-    r: Math.random() * 1.4 + 0.4, vx: (Math.random() - .5) * 0.15,
-    vy: (Math.random() - .5) * 0.15,
-    c: Math.random() > .6 ? 'rgba(0,200,160,.35)' : 'rgba(200,164,74,.22)',
-  }));
-  function drawAmbient(ctx, t) {
-    ctx.save(); ctx.scale(DPR, DPR);
-    PARTICLES.forEach(p => {
-      p.x += p.vx; p.y += p.vy;
-      if (p.x < 0) p.x = innerWidth; if (p.x > innerWidth) p.x = 0;
-      if (p.y < 0) p.y = innerHeight; if (p.y > innerHeight) p.y = 0;
-      ctx.fillStyle = p.c;
-      ctx.beginPath(); ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2); ctx.fill();
-    });
-    ctx.restore();
-  }
-
-  requestAnimationFrame(loop);
-})();
+/* Google-Maps-style infinite-pan canvas with bioluminescent hypergraph.
+   Handles: pan / zoom / pinch / inertia / minimap drag / click-to-detail. */
+(() => {
+  const canvas = document.getElementById('elysium-canvas');
+  const ctx = canvas.getContext('2d', { alpha: false });
+
+  const DPR = Math.max(1, Math.min(2, window.devicePixelRatio || 1));
+  function resize() {
+    canvas.width  = innerWidth  * DPR;
+    canvas.height = innerHeight * DPR;
+    canvas.style.width  = innerWidth  + 'px';
+    canvas.style.height = innerHeight + 'px';
+  }
+  resize();
+  addEventListener('resize', resize);
+
+  // ──────── WORLD STATE ────────
+  const E = window.ELYSIUM = {
+    cam: { x: 0, y: 0, z: 1, tx: 0, ty: 0, tz: 1, vx: 0, vy: 0, drag: false },
+    nodes: new Map(),
+    edges: [],
+    hover: null,
+    selected: null,
+    filterType: null,   // legend click filters
+  };
+
+  // Seed CORE
+  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.' },
+  });
+
+  // ���─────── COORDS ────────
+  function clientToWorld(cx, cy) {
+    return {
+      x: (cx - innerWidth  / 2) / E.cam.z + E.cam.x,
+      y: (cy - innerHeight / 2) / E.cam.z + E.cam.y,
+    };
+  }
+
+  function hitTest(cx, cy) {
+    const w = clientToWorld(cx, cy);
+    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; }
+    });
+    return best;
+  }
+
+  // ──────── PAN / TAP ────────
+  let lastX = 0, lastY = 0, downX = 0, downY = 0, downT = 0;
+  canvas.addEventListener('pointerdown', e => {
+    downX = e.clientX; downY = e.clientY; downT = performance.now();
+    E.cam.drag = true;
+    canvas.classList.add('dragging');
+    lastX = e.clientX; lastY = e.clientY;
+    canvas.setPointerCapture(e.pointerId);
+  });
+
+  canvas.addEventListener('pointermove', e => {
+    if (!E.cam.drag) {
+      const n = hitTest(e.clientX, e.clientY);
+      E.hover = n;
+      canvas.style.cursor = n ? 'pointer' : '';
+      return;
+    }
+    const dx = (e.clientX - lastX) / E.cam.z;
+    const dy = (e.clientY - lastY) / 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;
+    lastX = e.clientX; lastY = e.clientY;
+  });
+
+  function endPan(e) {
+    const moved = Math.hypot(e.clientX - downX, e.clientY - downY);
+    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);
+      } else {
+        if (window.hideNodeDetail) window.hideNodeDetail();
+      }
+    }
+  }
+  canvas.addEventListener('pointerup', endPan);
+  canvas.addEventListener('pointercancel', endPan);
+
+  // wheel zoom (zoom to cursor)
+  canvas.addEventListener('wheel', e => {
+    e.preventDefault();
+    const factor = e.deltaY > 0 ? 0.9 : 1.1;
+    const w = clientToWorld(e.clientX, e.clientY);
+    E.cam.tz = Math.max(0.15, Math.min(4, E.cam.z * factor));
+    E.cam.tx = w.x - (e.clientX - innerWidth  / 2) / E.cam.tz;
+    E.cam.ty = w.y - (e.clientY - innerHeight / 2) / E.cam.tz;
+  }, { passive: false });
+
+  canvas.addEventListener('dblclick', e => {
+    const w = clientToWorld(e.clientX, e.clientY);
+    E.cam.tz = Math.min(4, E.cam.z * 1.6);
+    E.cam.tx = w.x; E.cam.ty = w.y;
+  });
+
+  // ──────── PINCH ZOOM ────────
+  let touchDist = 0, touchMid = null;
+  canvas.addEventListener('touchstart', e => {
+    if (e.touches.length === 2) {
+      e.preventDefault();
+      const [a, b] = e.touches;
+      touchDist = Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY);
+      touchMid  = { x: (a.clientX + b.clientX) / 2, y: (a.clientY + b.clientY) / 2 };
+    }
+  }, { passive: false });
+  canvas.addEventListener('touchmove', e => {
+    if (e.touches.length === 2 && touchDist) {
+      e.preventDefault();
+      const [a, b] = e.touches;
+      const d = Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY);
+      const factor = d / touchDist; touchDist = d;
+      const w = clientToWorld(touchMid.x, touchMid.y);
+      E.cam.tz = Math.max(0.15, Math.min(4, E.cam.z * factor));
+      E.cam.tx = w.x - (touchMid.x - innerWidth  / 2) / E.cam.tz;
+      E.cam.ty = w.y - (touchMid.y - innerHeight / 2) / E.cam.tz;
+    }
+  }, { 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;
+
+  function fitAll() {
+    if (E.nodes.size === 0) return;
+    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);
+    });
+    const pad = 220;
+    E.cam.tx = (mnX + mxX) / 2;
+    E.cam.ty = (mnY + mxY) / 2;
+    if (mxX - mnX < 1 && mxY - mnY < 1) {
+      E.cam.tz = 1;
+    } else {
+      E.cam.tz = Math.min(2.2, Math.max(0.3,
+        Math.min(innerWidth  / (mxX - mnX + pad),
+                 innerHeight / (mxY - mnY + pad))));
+    }
+  }
+  window.elysiumFitAll = fitAll;
+
+  // ──────── MINIMAP (interactive) ────────
+  const mini = document.getElementById('minimap');
+  const mctx = mini.getContext('2d');
+
+  function computeBounds(pad = 100) {
+    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 (mxX - mnX < 100) { mnX -= 200; mxX += 200; }
+    if (mxY - mnY < 100) { mnY -= 200; mxY += 200; }
+    return { mnX: mnX - pad, mnY: mnY - pad,
+             mxX: mxX + pad, mxY: mxY + pad };
+  }
+
+  function drawMinimap() {
+    const w = mini.clientWidth, h = mini.clientHeight;
+    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
+    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(); }
+
+    if (E.nodes.size === 0) { mctx.restore(); return; }
+    const { mnX, mnY, mxX, mxY } = computeBounds();
+    const sx = w / (mxX - mnX), sy = h / (mxY - mnY);
+
+    // edges
+    mctx.lineWidth = .6;
+    E.edges.forEach(ed => {
+      const s = E.nodes.get(ed.src), t = E.nodes.get(ed.dst);
+      if (!s || !t) return;
+      mctx.strokeStyle = ed.color || 'rgba(0,229,200,.25)';
+      mctx.beginPath();
+      mctx.moveTo((s.x - mnX) * sx, (s.y - mnY) * sy);
+      mctx.lineTo((t.x - mnX) * sx, (t.y - mnY) * sy);
+      mctx.stroke();
+    });
+
+    // nodes
+    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;
+      mctx.beginPath();
+      mctx.arc(px, py, n.type === 'CORE' ? 3.5 : 2.2, 0, Math.PI * 2);
+      mctx.fill();
+    });
+    mctx.shadowBlur = 0;
+
+    // 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.lineWidth = 1.2;
+    mctx.setLineDash([3, 3]);
+    mctx.strokeRect(vx, vy, vw, vh);
+    mctx.setLineDash([]);
+    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);
+  }
+  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 ────────
+  const SPAWN_RADIUS = 280;
+
+  window.elysiumAddNode = function (node, parentHint) {
+    if (E.nodes.has(node.node_id)) return E.nodes.get(node.node_id);
+    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
+                 : type === 'AGENT' ? 22
+                 : type === 'TOOL'  ? 14
+                 : 18;
+    const n = {
+      node_id: node.node_id,
+      x: parent.x, y: parent.y, tx, ty,
+      type,
+      label: node.label || node.node_id,
+      radius,
+      color: window.colorFor(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
+    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 (E.edges.some(e =>
+        e.src === edge.source_node_id &&
+        e.dst === edge.target_node_id &&
+        e.type === edge.edge_type)) return;
+    E.edges.push({
+      src: edge.source_node_id,
+      dst: edge.target_node_id,
+      type: edge.edge_type,
+      weight: edge.weight ?? 0.5,
+      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)' :
+                                              'rgba(255,184,64,.55)',
+      born: performance.now(),
+    });
+  };
+
+  window.elysiumPulse = function (nodeId, ms = 1400) {
+    const n = E.nodes.get(nodeId);
+    if (n) n.pulseUntil = performance.now() + ms;
+  };
+
+  window.elysiumFocus = function (nodeId) {
+    const n = E.nodes.get(nodeId);
+    if (!n) return;
+    E.cam.tx = n.x; E.cam.ty = n.y;
+    E.cam.tz = Math.max(1.1, E.cam.z);
+  };
+
+  window.elysiumSelect = function (nodeId) {
+    E.nodes.forEach(n => n.selected = false);
+    const n = E.nodes.get(nodeId);
+    if (n) { n.selected = true; E.selected = n; }
+  };
+
+  window.elysiumGetNode = (id) => E.nodes.get(id);
+
+  // legend filter
+  window.elysiumFilterType = function (type) {
+    E.filterType = (E.filterType === type) ? null : type;
+  };
+
+  // ──────── RENDER LOOP ────────
+  function lerp(a, b, t) { return a + (b - a) * t; }
+
+  function loop(t) {
+    // animate spawn-to-target
+    E.nodes.forEach(n => {
+      if (n.tx != null) {
+        n.x = lerp(n.x, n.tx, 0.12);
+        n.y = lerp(n.y, n.ty, 0.12);
+        if (Math.abs(n.x - n.tx) < 0.3 && Math.abs(n.y - n.ty) < 0.3) {
+          n.x = n.tx; n.y = n.ty; n.tx = null; n.ty = null;
+        }
+      }
+    });
+
+    // 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);
+      E.cam.y = lerp(E.cam.y, E.cam.ty, 0.12);
+      E.cam.x -= E.cam.vx; E.cam.y -= E.cam.vy;
+      E.cam.vx *= 0.9; E.cam.vy *= 0.9;
+      if (Math.abs(E.cam.vx) < 0.05) E.cam.vx = 0;
+      if (Math.abs(E.cam.vy) < 0.05) E.cam.vy = 0;
+    }
+
+    // background
+    ctx.fillStyle = '#02080c';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    const grad = ctx.createRadialGradient(
+      canvas.width / 2, canvas.height / 2, 0,
+      canvas.width / 2, canvas.height / 2, canvas.width * 0.6);
+    grad.addColorStop(0, 'rgba(10,48,72,.32)');
+    grad.addColorStop(1, 'rgba(2,8,12,0)');
+    ctx.fillStyle = grad;
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    drawAmbient(ctx, t);
+
+    // 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)
+    E.edges.forEach(e => {
+      const s = E.nodes.get(e.src), d = E.nodes.get(e.dst);
+      if (!s || !d) return;
+      const dim = E.filterType && s.type !== E.filterType && d.type !== E.filterType ? 0.18 : 1;
+      ctx.globalAlpha = dim;
+      ctx.strokeStyle = e.color;
+      ctx.lineWidth = (0.8 + (e.weight ?? .5) * 1.0) / E.cam.z;
+      if (e.type === 'COALITION' || e.type === 'CAUSAL') {
+        ctx.setLineDash([6 / E.cam.z, 4 / E.cam.z]);
+        ctx.lineDashOffset = -(t * 0.025);
+      } else {
+        ctx.setLineDash([]);
+      }
+      ctx.shadowColor = e.color;
+      ctx.shadowBlur = 8;
+      ctx.beginPath();
+      ctx.moveTo(s.x, s.y);
+      ctx.lineTo(d.x, d.y);
+      ctx.stroke();
+      ctx.setLineDash([]);
+      ctx.shadowBlur = 0;
+    });
+    ctx.globalAlpha = 1;
+
+    // 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);
+    });
+    ctx.globalAlpha = 1;
+    ctx.restore();
+
+    drawMinimap();
+    requestAnimationFrame(loop);
+  }
+
+  // ambient particles
+  const PARTICLES = Array.from({ length: 60 }, () => ({
+    x:  Math.random() * innerWidth,
+    y:  Math.random() * innerHeight,
+    r:  Math.random() * 1.4 + 0.4,
+    vx: (Math.random() - .5) * 0.18,
+    vy: (Math.random() - .5) * 0.18,
+    c:  Math.random() > .6 ? 'rgba(0,229,200,.35)'
+       : Math.random() > .5 ? 'rgba(167,107,255,.28)'
+       : 'rgba(255,184,64,.22)',
+  }));
+  function drawAmbient(ctx, t) {
+    ctx.save(); ctx.scale(DPR, DPR);
+    PARTICLES.forEach(p => {
+      p.x += p.vx; p.y += p.vy;
+      if (p.x < 0) p.x = innerWidth;  if (p.x > innerWidth)  p.x = 0;
+      if (p.y < 0) p.y = innerHeight; if (p.y > innerHeight) p.y = 0;
+      ctx.fillStyle = p.c;
+      ctx.beginPath();
+      ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
+      ctx.fill();
+    });
+    ctx.restore();
+  }
+
+  requestAnimationFrame(loop);
+})();

frontend/dist/assets/council.js

@@ -1,84 +1,295 @@
-/* Council panel + agent debate playback. */
-const AGENT_COLORS = {
-  THE_BUILDER:  '#e05080',
-  THE_GUARDIAN: '#9060c0',
-  THE_ORACLE:   '#40d0e0',
-  THE_WEAVER:   '#d070a0',
-  THE_WILDCARD: '#40e080',
-  DYNAMIC:      '#c8903a',
-};
-window.agentColor = (a) => AGENT_COLORS[a] || '#9060c0';
-
-window.renderCouncil = function (resp, runtime) {
-  const council = document.getElementById('council');
-  const body    = document.getElementById('council-body');
-  const synth   = document.getElementById('council-synth');
-  const count   = document.getElementById('council-count');
-  const audio   = document.getElementById('debate-audio');
-
-  const cd = resp.council_deliberation || {};
-  const agents = cd.agent_outputs || [];
-  if (!agents.length) {
-    council.classList.remove('show');
-    setTimeout(() => council.classList.add('hidden'), 400);
-    return;
-  }
-  council.classList.remove('hidden');
-  requestAnimationFrame(() => council.classList.add('show'));
-
-  count.textContent = `+${agents.length}`;
-  body.innerHTML = agents.map((a, i) => {
-    const c = window.agentColor(a.archetype);
-    return `
-    <div class="agent-card" style="border-color:${c}; animation-delay:${i * 80}ms"
-         data-aid="${a.agent_id}">
-      <div class="row1">
-        <span class="ad-dot" style="background:${c};color:${c}"></span>
-        <span class="name" style="color:${c}">${a.agent_name}</span>
-        <span class="archetype">${a.archetype}</span>
-        ${a.veto_triggered ? '<span class="archetype" style="background:#7a2230;color:#ffb0b0">VETO</span>' : ''}
-      </div>
-      <div class="thinking">${escapeHtml(a.thinking || '')}</div>
-      <div class="stance">${escapeHtml(a.stance || '')}</div>
-      <div class="conf">confidence ${(a.confidence ?? 0.8).toFixed(2)}</div>
-    </div>`;
-  }).join('');
-
-  synth.textContent = cd.final_synthesis || resp.direct_answer || '';
-
-  // audio playback
-  if (runtime && runtime.audio_url) {
-    audio.style.display = 'block';
-    audio.src = runtime.audio_url;
-    audio.play().catch(() => {});
-    // highlight speaking agent as audio plays
-    let idx = 0;
-    const cards = body.querySelectorAll('.agent-card');
-    cards[0]?.classList.add('speaking');
-    audio.ontimeupdate = () => {
-      if (!audio.duration) 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'));
-  } else {
-    audio.style.display = 'none';
-  }
-};
-
-function escapeHtml(s) {
-  return String(s || '').replace(/[&<>"']/g, c => ({
-    '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'
-  }[c]));
-}
-
-document.getElementById('council-close').onclick = () => {
-  const c = document.getElementById('council');
-  c.classList.remove('show');
-  setTimeout(() => c.classList.add('hidden'), 400);
-};
+/* 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;
+  }
+
+  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 = '▶';
+      });
+      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 (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;
+    }).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'));
+      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'));
+    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 || []);
+    const connsHtml = conns.length
+      ? conns.slice(0, 6).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>
+          </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]) =>
+          `${escapeHtml(k)}: ${escapeHtml(typeof v === 'object' ? JSON.stringify(v) : String(v))}`
+        ).join('\n')
+      : (d.embedding_hint || 'No payload data');
+
+    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>
+      </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.incoming || []).length}</b>in</div>
+        <div class="nd-pill"><b>${(d.outgoing || []).length}</b>out</div>
+      </div>
+      <div class="nd-section">PAYLOAD</div>
+      <div class="nd-payload">${escapeHtml(payload)}</div>
+      <div class="nd-section">CONNECTIONS</div>
+      <div class="nd-conns">${connsHtml}</div>
+    `;
+  } catch (e) {
+    // local-only fallback
+  }
+};
+
+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();
+  }
+});

frontend/dist/assets/elysium.css

@@ -1,229 +1,409 @@
-:root{
-  --bg:#0a1a20; --bg-2:#060e12;
-  --panel:rgba(8,24,30,.85); --panel-2:rgba(15,35,42,.7);
-  --border:rgba(0,200,160,.2); --border-strong:rgba(0,200,160,.45);
-  --teal:#00c8a0; --cyan:#00e5ff; --gold:#c8a44a;
-  --pink:#e05080; --lav:#9060c0; --green:#40e080; --warm:#c8903a;
-  --text:#e0eef0; --muted:#7aabb8;
-  --shadow:0 8px 32px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
-  --font-sans:'Inter',system-ui,sans-serif;
-  --font-mono:'Space Mono',monospace;
-  --font-disp:'Space Grotesk',sans-serif;
-}
-*,*::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 at center,#0d2228 0%,#060e12 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}
-
-/* CANVAS */
-#elysium-canvas{position:fixed;inset:0;width:100vw;height:100vh;cursor:grab;
-  touch-action:none;z-index:0}
-#elysium-canvas.dragging{cursor:grabbing}
-
-/* GLASS PANELS */
-.glass{background:var(--panel);border:1px solid var(--border);border-radius:16px;
-  backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);
-  box-shadow:var(--shadow)}
-
-/* TIMELINE */
-#timeline{position:fixed;left:0;top:0;bottom:0;width:54px;z-index:10;
-  display:flex;flex-direction:column;align-items:center;padding:40px 0;
-  background:linear-gradient(90deg,rgba(10,26,32,.55),transparent);
-  pointer-events:none}
-#timeline .t-edge{position:absolute;left:0;top:0;bottom:0;width:2px;
-  background:repeating-linear-gradient(180deg,transparent 0 8px,rgba(0,200,160,.2) 8px 9px)}
-#timeline .years{display:flex;flex-direction:column;gap:46px;font-size:10px;
-  color:var(--muted);letter-spacing:.5px;font-family:var(--font-mono);
-  pointer-events:auto}
-#timeline .year{opacity:.55}
-#timeline .year-active{padding:4px 11px;border:1.5px solid var(--teal);
-  border-radius:18px;color:var(--text);font-weight:700;font-size:11px;
-  box-shadow:0 0 14px rgba(0,200,160,.55);background:rgba(0,40,48,.45);
-  animation:pillpulse 3s ease-in-out infinite}
-@keyframes pillpulse{0%,100%{box-shadow:0 0 14px rgba(0,200,160,.5)}
-  50%{box-shadow:0 0 22px rgba(0,200,160,.85)}}
-
-/* LEGEND */
-#legend{position:fixed;top:24px;right:24px;width:220px;padding:18px;z-index:20}
-.legend-header{font-size:11px;letter-spacing:2.5px;color:var(--muted);margin-bottom:14px;
-  font-weight:600}
-.legend-item{display:flex;align-items:center;gap:10px;margin:9px 0;font-size:13px}
-.legend-item .dot{width:18px;height:18px;border-radius:50%;
-  box-shadow:0 0 10px currentColor;flex-shrink:0}
-.legend-item .badge{background:rgba(0,0,0,.4);padding:2px 8px;border-radius:10px;
-  font-family:var(--font-mono);font-size:10px;min-width:24px;text-align:center}
-.legend-item .lbl{color:var(--text);font-size:12px}
-.meta-row{display:flex;justify-content:space-between;align-items:center;
-  font-size:11px;color:var(--muted);margin-top:10px;padding-top:10px;
-  border-top:1px solid var(--border)}
-.meta-val{background:rgba(0,0,0,.3);padding:3px 9px;border-radius:10px;
-  font-family:var(--font-mono);color:var(--text);font-size:11px}
-
-/* MINIMAP */
-#minimap{position:fixed;left:74px;bottom:140px;width:160px;height:100px;
-  background:rgba(8,24,30,.82);border:1px solid var(--border);
-  border-radius:10px;z-index:15;cursor:pointer;
-  box-shadow:var(--shadow)}
-.minimap-label{position:fixed;left:80px;bottom:244px;font-size:9px;
-  letter-spacing:2px;color:var(--muted);z-index:15;pointer-events:none}
-
-/* ZOOM CTRL */
-#zoom-ctrl{position:fixed;right:24px;bottom:140px;display:flex;flex-direction:column;
-  gap:6px;z-index:15}
-#zoom-ctrl button{width:38px;height:38px;background:rgba(8,24,30,.85);
-  border:1px solid var(--border);border-radius:10px;color:var(--teal);
-  font-size:18px;cursor:pointer;backdrop-filter:blur(10px);
-  transition:all .15s ease}
-#zoom-ctrl button:hover{background:rgba(0,200,160,.15);transform:scale(1.05)}
-
-/* ALERT SCRIM */
-#alert-scrim{position:fixed;inset:0;z-index:5;pointer-events:none;
-  background:radial-gradient(ellipse at center,transparent 55%,rgba(220,60,60,0) 100%);
-  transition:background 800ms ease}
-body[data-alert="ATTENTION"] #alert-scrim{background:radial-gradient(ellipse at center,transparent 50%,rgba(200,160,80,.10) 100%)}
-body[data-alert="TENSION"] #alert-scrim{background:radial-gradient(ellipse at center,transparent 40%,rgba(220,140,60,.18) 100%)}
-body[data-alert="CRISIS"] #alert-scrim{background:radial-gradient(ellipse at center,transparent 30%,rgba(220,60,60,.25) 100%);
-  animation:crisisPulse 1.6s ease-in-out infinite}
-@keyframes crisisPulse{0%,100%{opacity:.6}50%{opacity:1}}
-
-/* STATS BAR */
-#stats{position:fixed;left:54px;right:0;bottom:56px;height:54px;
-  display:flex;align-items:center;padding:0 28px;gap:36px;z-index:18;
-  border-radius:0;border-left:none;border-right:none;border-bottom:none}
-.stat{display:flex;align-items:center;gap:10px}
-.stat-icon{font-size:18px;color:var(--teal);opacity:.85}
-.stat-label{font-size:10px;letter-spacing:1.4px;color:var(--muted);
-  text-transform:uppercase;font-weight:500}
-.stat-value{font-size:22px;font-family:var(--font-disp);color:var(--cyan);
-  font-weight:700;line-height:1}
-
-/* QUERY BAR */
-#query-bar{position:fixed;left:54px;right:0;bottom:0;height:56px;
-  display:flex;align-items:center;padding:0 22px;gap:10px;z-index:20;
-  border-radius:0;border-left:none;border-right:none}
-#q-input{flex:1;height:40px;background:var(--panel-2);
-  border:1px solid var(--border);border-radius:28px;padding:0 22px;
-  color:var(--text);font-size:13px;outline:none;
-  transition:border-color .2s,box-shadow .2s}
-#q-input:focus{border-color:var(--border-strong);
-  box-shadow:0 0 0 3px rgba(0,200,160,.12)}
-#q-input::placeholder{color:var(--muted)}
-#q-upload{width:36px;height:36px;display:grid;place-items:center;
-  background:var(--panel-2);border:1px solid var(--border);border-radius:50%;
-  cursor:pointer;font-size:14px;color:var(--muted);transition:all .15s}
-#q-upload:hover{color:var(--teal);border-color:var(--border-strong)}
-#q-send{width:38px;height:38px;border-radius:50%;background:var(--teal);
-  color:#03252a;border:none;cursor:pointer;font-size:18px;font-weight:700;
-  box-shadow:0 0 18px rgba(0,200,160,.45);transition:all .15s}
-#q-send:hover{transform:scale(1.06);box-shadow:0 0 24px rgba(0,200,160,.7)}
-#q-send.loading{animation:spin 1s linear infinite}
-@keyframes spin{to{transform:rotate(360deg)}}
-.mode-row{position:absolute;right:24px;bottom:62px;display:flex;gap:8px}
-.mode-row button{background:var(--panel-2);border:1px solid var(--border);
-  border-radius:18px;padding:6px 12px;font-size:11px;color:var(--text);
-  cursor:pointer;letter-spacing:.5px;display:flex;align-items:center;gap:6px}
-.mode-row button:hover{border-color:var(--border-strong)}
-.mode-row .badge{background:rgba(0,200,160,.18);padding:1px 6px;border-radius:8px;
-  font-family:var(--font-mono);font-size:10px;color:var(--teal)}
-
-/* COUNCIL */
-#council{position:fixed;left:50%;bottom:130px;transform:translateX(-50%) translateY(20px);
-  width:min(580px,92vw);max-height:50vh;overflow-y:auto;padding:20px;z-index:25;
-  opacity:0;pointer-events:none;transition:all .4s cubic-bezier(.34,1.56,.64,1)}
-#council.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
-#council.hidden{display:none}
-.council-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
-.council-title{font-size:11px;letter-spacing:2.2px;color:var(--muted);font-weight:600}
-.council-title span{color:var(--teal);margin-left:6px}
-#council-close{background:none;border:none;color:var(--muted);font-size:22px;
-  cursor:pointer;line-height:1}
-#council-close:hover{color:var(--text)}
-.agent-card{border-left:3px solid;padding:12px 14px;margin:10px 0;
-  background:rgba(10,26,32,.55);border-radius:8px;animation:slideIn .4s ease both}
-@keyframes slideIn{from{opacity:0;transform:translateX(-12px)}
-  to{opacity:1;transform:translateX(0)}}
-.agent-card .row1{display:flex;align-items:center;gap:8px;margin-bottom:6px}
-.agent-card .ad-dot{width:10px;height:10px;border-radius:50%;box-shadow:0 0 8px currentColor}
-.agent-card .name{font-weight:700;font-size:13px}
-.agent-card .archetype{font-size:10px;background:rgba(0,0,0,.25);padding:2px 7px;
-  border-radius:8px;letter-spacing:.8px;color:var(--muted)}
-.agent-card .thinking{color:var(--muted);font-size:11px;margin-top:4px;font-style:italic;
-  line-height:1.45}
-.agent-card .stance{font-size:12.5px;margin-top:8px;color:var(--text)}
-.agent-card .conf{font-family:var(--font-mono);font-size:10px;color:var(--teal);
-  margin-top:6px}
-.agent-card.speaking{box-shadow:0 0 0 1px rgba(0,200,160,.45);
-  animation:speakPulse 1.2s ease-in-out infinite}
-@keyframes speakPulse{0%,100%{transform:translateX(0)}50%{transform:translateX(2px)}}
-#council-synth{margin-top:14px;padding-top:14px;border-top:1px solid var(--border);
-  color:var(--text);font-size:13px;line-height:1.55}
-#debate-audio{width:100%;margin-top:14px;height:36px;border-radius:18px;
-  background:rgba(0,0,0,.3)}
-#debate-audio::-webkit-media-controls-panel{background:rgba(8,24,30,.7)}
-
-/* NODE DETAIL */
-#node-detail{position:fixed;width:280px;padding:18px;z-index:24;
-  opacity:0;pointer-events:none;transition:opacity .25s}
-#node-detail.show{opacity:1;pointer-events:auto}
-#node-detail .nd-title{font-size:14px;font-weight:700;margin-bottom:8px;
-  display:flex;align-items:center;gap:8px}
-#node-detail .nd-type{font-size:10px;letter-spacing:1.4px;color:var(--muted);
-  text-transform:uppercase;margin-bottom:12px}
-#node-detail .nd-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;
-  margin-bottom:10px}
-#node-detail .nd-pill{background:rgba(0,0,0,.25);padding:6px 8px;border-radius:8px;
-  font-size:10px;text-align:center;color:var(--muted)}
-#node-detail .nd-pill b{display:block;font-family:var(--font-mono);color:var(--cyan);font-size:13px}
-
-/* TOASTS */
-#toasts{position:fixed;top:24px;left:50%;transform:translateX(-50%);z-index:30;
-  display:flex;flex-direction:column;gap:8px;pointer-events:none}
-.toast{background:rgba(8,28,35,.92);border:1px solid var(--border);border-left:3px solid var(--teal);
-  padding:10px 16px;border-radius:10px;font-size:12px;
-  box-shadow:0 8px 20px rgba(0,0,0,.4);animation:toastIn .35s ease both,toastOut .4s ease 4s both}
-.toast.warn{border-left-color:var(--warm)}
-.toast.error{border-left-color:#e0604c}
-@keyframes toastIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
-@keyframes toastOut{to{opacity:0;transform:translateY(-8px)}}
-
-/* SEED HINT */
-#seed-hint{position:fixed;left:50%;top:38%;transform:translate(-50%,-50%);
-  z-index:8;padding:9px 18px;border-radius:20px;
-  background:rgba(8,24,30,.7);border:1px solid var(--border);
-  font-size:12px;color:var(--muted);backdrop-filter:blur(10px);
-  animation:hintFloat 3.5s ease-in-out infinite;pointer-events:none;
-  letter-spacing:.4px}
-#seed-hint.hidden{display:none}
-@keyframes hintFloat{0%,100%{opacity:.7;transform:translate(-50%,-50%)}
-  50%{opacity:1;transform:translate(-50%,calc(-50% - 4px))}}
-
-/* RESPONSIVE */
-@media (max-width:900px){
-  #legend{width:180px;padding:14px;top:14px;right:14px}
-  #minimap{width:130px;height:84px;left:64px;bottom:124px}
-  .minimap-label{left:70px;bottom:212px}
-  #zoom-ctrl{right:14px;bottom:124px}
-  #stats{gap:20px;padding:0 18px}
-  .stat-value{font-size:18px}
-  .stat-label{font-size:9px}
-}
-@media (max-width:640px){
-  #timeline{width:42px}
-  #legend{width:160px;padding:12px;top:10px;right:10px;font-size:11px}
-  #legend .lbl{display:none}
-  .meta-row{font-size:10px}
-  #minimap{display:none}
-  .minimap-label{display:none}
-  #stats{display:none}
-  #query-bar{left:42px}
-  .mode-row{display:none}
-  #council{width:96vw;max-height:62vh;bottom:80px}
-  #zoom-ctrl{bottom:80px}
-}
-
-/* HIDE GRADIO if ever shown */
-.gradio-container,footer,.built-with,gradio-app>.main>.contain{display:none!important}
-
-.hidden{display:none!important}
+/* ============================================================
+   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;
+  --bg-1:#06121a;
+  --bg-2:#0a1f2a;
+
+  --panel:rgba(6,18,26,.78);
+  --panel-2:rgba(10,30,42,.65);
+  --panel-3:rgba(2,12,18,.92);
+
+  --border:rgba(0,229,200,.18);
+  --border-strong:rgba(0,229,200,.55);
+  --border-magenta:rgba(255,80,180,.45);
+
+  --teal:#00e5c8;
+  --cyan:#19d6ff;
+  --gold:#ffb840;
+  --magenta:#ff4fa3;
+  --violet:#a76bff;
+  --green:#5cffae;
+  --warm:#ff9b3c;
+  --red:#ff5469;
+
+  --text:#e6fbff;
+  --muted:#7ea8b6;
+  --muted-2:#5a8794;
+
+  --shadow:0 10px 40px rgba(0,0,0,.55),
+           inset 0 1px 0 rgba(255,255,255,.04);
+  --neon-teal:   0 0 18px rgba(0,229,200,.55);
+  --neon-magenta:0 0 18px rgba(255,80,180,.55);
+  --neon-violet: 0 0 18px rgba(167,107,255,.55);
+  --neon-cyan:   0 0 18px rgba(25,214,255,.55);
+  --neon-gold:   0 0 22px rgba(255,184,64,.55);
+
+  --font-sans:'Inter',system-ui,sans-serif;
+  --font-mono:'Space Mono',monospace;
+  --font-disp:'Space Grotesk',sans-serif;
+}
+
+*,*::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%);
+  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}
+
+/* ── CANVAS ───────────────────────────────────────────── */
+#elysium-canvas{position:fixed;inset:0;width:100vw;height:100vh;cursor:grab;
+  touch-action:none;z-index:0}
+#elysium-canvas.dragging{cursor:grabbing}
+
+/* ── GLASS PANELS ─────────────────────────────────────── */
+.glass{
+  background:linear-gradient(180deg, var(--panel), var(--panel-2));
+  border:1px solid var(--border);
+  border-radius:18px;
+  backdrop-filter:blur(18px) saturate(1.25);
+  -webkit-backdrop-filter:blur(18px) saturate(1.25);
+  box-shadow:var(--shadow);
+  position:relative;
+}
+.glass::before{
+  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
+  background:linear-gradient(135deg, rgba(0,229,200,.06), transparent 40%, rgba(255,80,180,.04));
+}
+
+/* ── TIMELINE ─────────────────────────────────────────── */
+#timeline{position:fixed;left:0;top:0;bottom:0;width:58px;z-index:10;
+  display:flex;flex-direction:column;align-items:center;justify-content:center;
+  padding:40px 0;background:linear-gradient(90deg,rgba(2,10,14,.6),transparent);
+  pointer-events:none}
+#timeline .t-edge{position:absolute;left:0;top:0;bottom:0;width:2px;
+  background:repeating-linear-gradient(180deg,transparent 0 8px,rgba(0,229,200,.18) 8px 9px)}
+#timeline .years{display:flex;flex-direction:column;gap:38px;font-size:10px;
+  color:var(--muted-2);letter-spacing:.6px;font-family:var(--font-mono);pointer-events:auto}
+#timeline .year{opacity:.45}
+#timeline .year-active{padding:4px 12px;border:1.5px solid var(--teal);
+  border-radius:18px;color:var(--text);font-weight:700;font-size:11px;
+  box-shadow:var(--neon-teal),inset 0 0 8px rgba(0,229,200,.25);
+  background:rgba(0,40,48,.55);animation:pillpulse 3s ease-in-out infinite}
+@keyframes pillpulse{0%,100%{box-shadow:var(--neon-teal),inset 0 0 8px rgba(0,229,200,.25)}
+  50%{box-shadow:0 0 28px rgba(0,229,200,.95),inset 0 0 14px rgba(0,229,200,.4)}}
+
+/* ── LEGEND ───────────────────────────────────────────── */
+#legend{position:fixed;top:22px;right:22px;width:236px;padding:18px 18px 14px;z-index:20}
+.legend-header{font-size:11px;letter-spacing:2.6px;color:var(--muted);margin-bottom:12px;
+  font-weight:600;display:flex;justify-content:space-between;align-items:center}
+.legend-header #legend-help{width:18px;height:18px;border-radius:50%;
+  background:rgba(0,229,200,.12);color:var(--teal);font-size:10px;font-weight:700;
+  display:grid;place-items:center;cursor:help}
+.legend-item{display:flex;align-items:center;gap:10px;margin:8px 0;font-size:12px;
+  cursor:pointer;padding:3px 6px;border-radius:8px;transition:background .15s}
+.legend-item:hover{background:rgba(0,229,200,.06)}
+.legend-item .dot{width:18px;height:18px;border-radius:50%;flex-shrink:0;
+  box-shadow:0 0 12px currentColor, inset 0 -3px 6px rgba(0,0,0,.4)}
+.legend-item .badge{background:rgba(0,0,0,.4);padding:2px 8px;border-radius:10px;
+  font-family:var(--font-mono);font-size:10px;min-width:24px;text-align:center;color:var(--text)}
+.legend-item .lbl{color:var(--text);font-size:12px;text-transform:capitalize}
+.meta-row{display:flex;justify-content:space-between;align-items:center;
+  font-size:11px;color:var(--muted);margin-top:10px;padding-top:10px;
+  border-top:1px solid var(--border)}
+.meta-val{background:rgba(0,0,0,.35);padding:3px 9px;border-radius:10px;
+  font-family:var(--font-mono);color:var(--cyan);font-size:11px;
+  box-shadow:inset 0 0 8px rgba(0,229,200,.08)}
+
+/* ── MINIMAP ──────────────────────────────────────────── */
+#minimap-wrap{position:fixed;left:74px;bottom:140px;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)}
+
+/* ── ZOOM CTRL ────────────────────────────────────────── */
+#zoom-ctrl{position:fixed;right:24px;bottom:140px;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);
+  font-size:18px;cursor:pointer;backdrop-filter:blur(10px);
+  transition:all .15s ease;box-shadow:var(--shadow)}
+#zoom-ctrl button:hover{background:rgba(0,229,200,.15);border-color:var(--border-strong);
+  transform:scale(1.06);box-shadow:var(--neon-teal)}
+
+/* ── ALERT SCRIM ──────────────────────────────────────── */
+#alert-scrim{position:fixed;inset:0;z-index:5;pointer-events:none;
+  background:radial-gradient(ellipse at center,transparent 55%,transparent 100%);
+  transition:background 800ms ease}
+body[data-alert="ATTENTION"] #alert-scrim{background:radial-gradient(ellipse at center,transparent 50%,rgba(255,184,64,.12) 100%)}
+body[data-alert="TENSION"] #alert-scrim{background:radial-gradient(ellipse at center,transparent 40%,rgba(255,80,180,.18) 100%)}
+body[data-alert="CRISIS"] #alert-scrim{background:radial-gradient(ellipse at center,transparent 30%,rgba(255,84,105,.28) 100%);
+  animation:crisisPulse 1.6s ease-in-out infinite}
+@keyframes crisisPulse{0%,100%{opacity:.6}50%{opacity:1}}
+
+/* ── STATS BAR ────────────────────────────────────────── */
+#stats{position:fixed;left:58px;right:0;bottom:84px;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))}
+.stat{display:flex;align-items:center;gap:10px}
+.stat-icon{font-size:18px;color:var(--teal);opacity:.95;
+  text-shadow:0 0 10px rgba(0,229,200,.6)}
+.stat-label{font-size:10px;letter-spacing:1.4px;color:var(--muted);
+  text-transform:uppercase;font-weight:500}
+.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{position:fixed;left:58px;right:0;bottom:0;z-index:20;
+  display:flex;flex-direction:column;gap:0}
+
+#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}
+.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)}
+.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;
+  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}
+
+#query-bar{margin:0 22px 8px;height:54px;
+  display:flex;align-items:center;padding:0 12px;gap:10px;
+  border-radius:28px;border:1px solid var(--border-strong);
+  box-shadow:var(--shadow),0 0 0 1px rgba(0,229,200,.05)}
+#q-input{flex:1;height:40px;background:transparent;border:none;
+  padding:0 12px;color:var(--text);font-size:14px;outline:none}
+#q-input::placeholder{color:var(--muted)}
+#q-input:disabled{opacity:.5;cursor:not-allowed}
+
+#q-upload{width:38px;height:38px;display:grid;place-items:center;
+  background:rgba(0,229,200,.06);border:1px solid var(--border);border-radius:50%;
+  cursor:pointer;font-size:14px;color:var(--muted);transition:all .15s;flex-shrink:0}
+#q-upload:hover{color:var(--teal);border-color:var(--border-strong);box-shadow:var(--neon-teal)}
+#q-upload.disabled{opacity:.4;pointer-events:none}
+
+#q-send{width:42px;height:42px;border-radius:50%;
+  background:linear-gradient(135deg, var(--teal), #00b89e);
+  color:#03252a;border:none;cursor:pointer;
+  display:grid;place-items:center;
+  box-shadow:var(--neon-teal),inset 0 1px 0 rgba(255,255,255,.3);
+  transition:all .15s;flex-shrink:0}
+#q-send:hover:not(:disabled){transform:scale(1.08);box-shadow:0 0 28px rgba(0,229,200,.85)}
+#q-send:disabled{opacity:.5;cursor:not-allowed;background:linear-gradient(135deg,#444,#222)}
+#q-send.loading svg{animation:spin 1s linear infinite}
+@keyframes spin{to{transform:rotate(360deg)}}
+
+.mode-row{display:flex;justify-content:flex-end;gap:8px;
+  padding:0 26px 8px 0;align-items:center}
+.mode-row button{background:rgba(6,18,26,.85);border:1px solid var(--border);
+  border-radius:18px;padding:6px 14px;font-size:11.5px;color:var(--text);
+  cursor:pointer;letter-spacing:.5px;display:flex;align-items:center;gap:6px;
+  transition:all .15s;backdrop-filter:blur(8px)}
+.mode-row button:hover{border-color:var(--border-strong);
+  box-shadow:0 0 12px rgba(0,229,200,.3)}
+.mode-row .badge{background:rgba(0,229,200,.18);padding:1px 8px;border-radius:8px;
+  font-family:var(--font-mono);font-size:10px;color:var(--teal)}
+.mode-row .dot-mini{width:8px;height:8px;border-radius:50%;background:var(--magenta);
+  box-shadow:var(--neon-magenta);display:inline-block}
+
+/* ── COUNCIL OVERLAY ──────────────────────────────────── */
+#council-overlay{position:fixed;left:22px;top:22px;
+  width:360px;max-height:calc(100vh - 220px);padding:18px;z-index:25;
+  display:flex;flex-direction:column;
+  opacity:0;transform:translateX(-30px);pointer-events:none;
+  transition:all .35s cubic-bezier(.34,1.56,.64,1)}
+#council-overlay.show{opacity:1;transform:translateX(0);pointer-events:auto}
+#council-overlay.hidden{display:none}
+#council-overlay.minimized{display:none}
+
+.co-head{display:flex;justify-content:space-between;align-items:center;
+  margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--border)}
+.co-title{font-size:11px;letter-spacing:2.4px;color:var(--teal);font-weight:700;
+  display:flex;align-items:center;gap:8px}
+.co-pulse{width:8px;height:8px;border-radius:50%;background:var(--teal);
+  box-shadow:var(--neon-teal);animation:copulse 1.4s ease-in-out infinite}
+@keyframes copulse{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.3)}}
+.co-title span{color:var(--magenta);margin-left:4px;text-shadow:var(--neon-magenta)}
+.co-controls{display:flex;gap:4px}
+.co-controls button{background:rgba(0,229,200,.06);border:1px solid var(--border);
+  color:var(--text);width:28px;height:28px;border-radius:8px;
+  font-size:12px;cursor:pointer;display:grid;place-items:center;
+  transition:all .15s}
+.co-controls button:hover:not(:disabled){background:rgba(0,229,200,.15);
+  box-shadow:var(--neon-teal)}
+.co-controls button:disabled{opacity:.35;cursor:not-allowed}
+#co-play{color:var(--green)}
+#co-pause{color:var(--gold)}
+#co-close{color:var(--red)}
+
+#co-body{flex:1;overflow-y:auto;max-height:50vh;margin:-2px;padding:2px}
+#co-body::-webkit-scrollbar{width:6px}
+#co-body::-webkit-scrollbar-thumb{background:rgba(0,229,200,.25);border-radius:3px}
+
+.agent-card{border-left:3px solid;padding:12px 14px;margin:10px 0;
+  background:linear-gradient(135deg, rgba(10,30,42,.6), rgba(6,18,26,.4));
+  border-radius:10px;animation:slideIn .4s ease both;
+  position:relative;overflow:hidden}
+.agent-card::before{content:'';position:absolute;inset:0;pointer-events:none;
+  background:radial-gradient(circle at 10% 50%, var(--card-glow,transparent) 0%, transparent 60%);
+  opacity:.5}
+@keyframes slideIn{from{opacity:0;transform:translateX(-12px)}
+  to{opacity:1;transform:translateX(0)}}
+
+.agent-card .row1{display:flex;align-items:center;gap:8px;margin-bottom:6px;
+  position:relative;z-index:1}
+.agent-card .ad-dot{width:14px;height:14px;border-radius:50%;
+  box-shadow:0 0 12px currentColor, inset 0 -2px 4px rgba(0,0,0,.4);flex-shrink:0}
+.agent-card .name{font-weight:700;font-size:13px;flex:1}
+.agent-card .archetype{font-size:9.5px;background:rgba(0,0,0,.35);padding:2px 7px;
+  border-radius:8px;letter-spacing:.8px;color:var(--muted);text-transform:uppercase}
+.agent-card .veto{background:rgba(255,84,105,.2);color:#ffb0b0;
+  border:1px solid rgba(255,84,105,.45);font-size:9px;padding:2px 6px;
+  border-radius:6px;letter-spacing:.8px}
+.agent-card .thinking{color:var(--muted);font-size:11px;margin-top:4px;font-style:italic;
+  line-height:1.45;position:relative;z-index:1}
+.agent-card .stance{font-size:12.5px;margin-top:8px;color:var(--text);
+  position:relative;z-index:1;line-height:1.5}
+.agent-card .footer-row{display:flex;justify-content:space-between;align-items:center;
+  margin-top:10px;position:relative;z-index:1}
+.agent-card .conf{font-family:var(--font-mono);font-size:10px;color:var(--teal)}
+.agent-card .play-mini{background:rgba(0,229,200,.12);border:1px solid var(--border-strong);
+  color:var(--teal);width:26px;height:26px;border-radius:50%;font-size:11px;
+  display:grid;place-items:center;cursor:pointer;transition:all .15s}
+.agent-card .play-mini:hover{transform:scale(1.1);box-shadow:var(--neon-teal)}
+.agent-card .play-mini.playing{background:var(--teal);color:#03252a}
+.agent-card.speaking{box-shadow:0 0 0 1.5px var(--border-strong),0 0 24px rgba(0,229,200,.35);
+  animation:speakPulse 1.2s ease-in-out infinite}
+@keyframes speakPulse{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
+
+#co-synth{margin-top:14px;padding-top:14px;border-top:1px solid var(--border);
+  color:var(--text);font-size:12.5px;line-height:1.55;font-style:italic}
+#co-synth:empty{display:none}
+#debate-audio{width:100%;margin-top:10px;height:32px;display:none}
+
+/* COUNCIL PILL (minimized state) */
+#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;
+  display:flex;align-items:center;gap:8px;cursor:pointer;
+  box-shadow:var(--neon-teal);animation:pillFloat 2s ease-in-out infinite}
+@keyframes pillFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
+#council-pill:hover{background:rgba(0,229,200,.15)}
+#council-pill .dot-mini{width:8px;height:8px;border-radius:50%;background:var(--magenta);
+  box-shadow:var(--neon-magenta)}
+
+/* ── NODE DETAIL POPOVER ──────────────────────────────── */
+#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}
+.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;
+  color:var(--text);line-height:1.3;flex:1}
+.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}
+.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);
+  text-shadow:0 0 8px rgba(25,214,255,.4)}
+.nd-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-bottom:12px}
+.nd-pill{background:rgba(0,0,0,.3);padding:7px 8px;border-radius:8px;
+  font-size:9.5px;text-align:center;color:var(--muted);
+  border:1px solid var(--border);letter-spacing:.8px}
+.nd-pill b{display:block;font-family:var(--font-mono);color:var(--cyan);font-size:14px;
+  margin-bottom:2px;text-shadow:0 0 6px rgba(25,214,255,.4)}
+.nd-section{font-size:9.5px;letter-spacing:1.8px;color:var(--muted-2);
+  text-transform:uppercase;margin-top:14px;margin-bottom:6px}
+.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)}
+.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)}
+.nd-conn .ct{color:var(--text);max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.nd-conn .cw{color:var(--gold);font-family:var(--font-mono);font-size:10px}
+
+/* ── TOASTS ───────────────────────────────────────────── */
+#toasts{position:fixed;top:22px;left:50%;transform:translateX(-50%);z-index:40;
+  display:flex;flex-direction:column;gap:8px;pointer-events:none;max-width:90vw}
+.toast{background:rgba(6,18,26,.95);border:1px solid var(--border-strong);
+  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)}
+.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)}
+@keyframes toastIn{from{opacity:0;transform:translateY(-12px)}
+  to{opacity:1;transform:translateY(0)}}
+@keyframes toastOut{to{opacity:0;transform:translateY(-12px)}}
+
+/* ── SEED HINT ────────────────────────────────────────── */
+#seed-hint{position:fixed;left:50%;top:42%;transform:translate(-50%,-50%);
+  z-index:8;padding:10px 22px;border-radius:22px;
+  background:rgba(6,18,26,.7);border:1px solid var(--border-strong);
+  font-size:12.5px;color:var(--text);backdrop-filter:blur(10px);
+  animation:hintFloat 3.5s ease-in-out infinite;pointer-events:none;
+  letter-spacing:.5px;box-shadow:var(--neon-teal)}
+#seed-hint.hidden{display:none}
+@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{position:fixed;inset:0;z-index:35;pointer-events:none;
+  display:none;place-items:center;background:rgba(2,12,18,0);
+  transition:background .3s}
+body[data-busy="1"] #busy-overlay{display:grid;background:rgba(2,12,18,.18)}
+.busy-spin{width:48px;height:48px;border-radius:50%;
+  border:3px solid rgba(0,229,200,.15);
+  border-top-color:var(--teal);
+  animation:spin 1s linear infinite;
+  box-shadow:var(--neon-teal)}
+.busy-text{margin-top:14px;font-size:11px;letter-spacing:2.4px;color:var(--teal);
+  text-transform:uppercase;font-weight:600;text-shadow:var(--neon-teal)}
+
+/* ── RESPONSIVE ───────────────────────────────────────── */
+@media (max-width:980px){
+  #legend{width:200px;padding:14px;top:14px;right:14px}
+  #minimap-wrap{padding:5px}
+  #minimap{width:140px;height:90px}
+  #zoom-ctrl{right:14px;bottom:124px}
+  #stats{gap:20px;padding:0 16px}
+  .stat-value{font-size:18px}
+  .stat-label{font-size:9px}
+  #council-overlay{width:300px}
+}
+@media (max-width:680px){
+  #timeline{width:44px}
+  #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{width:120px;height:80px}
+  #stats{gap:14px;padding:0 12px;height:48px;bottom:78px}
+  .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}
+}
+
+/* ── HIDE GRADIO if ever shown ─────────────────────────── */
+.gradio-container,footer,.built-with,gradio-app>.main>.contain{display:none!important}
+
+.hidden{display:none!important}

frontend/dist/assets/nodes.js

@@ -1,107 +1,133 @@
-/* Bioluminescent node rendering. */
-const TYPE_COLOR = {
-  CORE:       '#c8a44a',
-  DOMAIN:     '#9060c0',
-  AGENT:      '#e05080',
-  TOOL:       '#c8903a',
-  PROJECT:    '#40d0e0',
-  LIFE_EVENT: '#40e080',
-  EMOTION:    '#e080b0',
-  PERSON:     '#d070a0',
-  VALUE:      '#8050c0',
-  MEMORY:     '#30c0d0',
-};
-
-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');
-}
-
-window.colorFor = (type) => TYPE_COLOR[type] || '#9060c0';
-
-window.drawNode = function (ctx, n, t, zoom) {
-  const ageMs = t - (n.born || t);
-  const age = Math.min(1, ageMs / 700);
-  // overshoot easeOutBack
-  const k = age;
-  const overshoot = 1 + 1.7 * (k - 1) ** 3 + 0.7 * (k - 1) ** 2;
-  const fadeScale = age < 1 ? overshoot : 1;
-
-  const pulse = 1 + 0.06 * Math.sin((t / 1000) * 0.55 + (n.phase || 0));
-  const r = n.radius * pulse * fadeScale;
-  const x = n.x, y = n.y;
-
-  ctx.globalAlpha = age;
-
-  // outer halo (soft glow)
-  const halo = ctx.createRadialGradient(x, y, r * 0.9, x, y, r * 2.4);
-  halo.addColorStop(0, n.color + 'aa');
-  halo.addColorStop(1, n.color + '00');
-  ctx.fillStyle = halo;
-  ctx.beginPath(); ctx.arc(x, y, r * 2.4, 0, Math.PI * 2); ctx.fill();
-
-  // rotating dashed orbital ring (always for CORE)
-  if (n.type === 'CORE') {
-    ctx.save();
-    ctx.translate(x, y);
-    ctx.rotate(t * 0.0004);
-    ctx.strokeStyle = n.color + '66';
-    ctx.lineWidth = 1.2 / zoom;
-    ctx.setLineDash([6 / zoom, 6 / zoom]);
-    ctx.beginPath(); ctx.arc(0, 0, r * 1.8, 0, Math.PI * 2); ctx.stroke();
-    ctx.setLineDash([]);
-    ctx.restore();
-  }
-
-  // main sphere
-  const grad = ctx.createRadialGradient(x - r * 0.35, y - r * 0.35, r * 0.1, x, y, r);
-  grad.addColorStop(0, shade(n.color, 50));
-  grad.addColorStop(0.55, n.color);
-  grad.addColorStop(1, shade(n.color, -55));
-
-  ctx.shadowColor = n.color;
-  ctx.shadowBlur = 24 * pulse;
-  ctx.fillStyle = grad;
-  ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2); ctx.fill();
-  ctx.shadowBlur = 0;
-
-  // specular highlight
-  ctx.fillStyle = 'rgba(255,255,255,.45)';
-  ctx.beginPath();
-  ctx.ellipse(x - r * 0.32, y - r * 0.32, r * 0.26, r * 0.16, -0.5, 0, Math.PI * 2);
-  ctx.fill();
-
-  // counter badge (small inset)
-  if (n.count != null && zoom > 0.5) {
-    const bx = x - r * 1.05, by = y;
-    ctx.fillStyle = 'rgba(0,0,0,.55)';
-    ctx.beginPath();
-    ctx.roundRect ? ctx.roundRect(bx - 12, by - 8, 22, 16, 8) : ctx.rect(bx - 12, by - 8, 22, 16);
-    ctx.fill();
-    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(14, 11 * Math.max(1, zoom * 0.9));
-    ctx.fillStyle = '#c8e8f0';
-    ctx.font = `500 ${fs / zoom}px Inter, sans-serif`;
-    ctx.textAlign = 'center'; ctx.textBaseline = 'top';
-    ctx.fillText(n.label.length > 22 ? n.label.slice(0, 20) + '…' : n.label,
-                 x, y + r + 6 / zoom);
-  }
-
-  // pulse highlight ring (when pulsed via UI directive)
-  if (n.pulseUntil && t < n.pulseUntil) {
-    const p = (n.pulseUntil - t) / 1200;
-    ctx.strokeStyle = `rgba(0,229,255,${p})`;
-    ctx.lineWidth = 2 / zoom;
-    ctx.beginPath(); ctx.arc(x, y, r + (1 - p) * 30, 0, Math.PI * 2); ctx.stroke();
-  }
-
-  ctx.globalAlpha = 1;
-};
+/* 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';
+
+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');
+}
+
+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;
+
+  ctx.globalAlpha = age;
+
+  // 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();
+
+  // 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();
+  }
+
+  // 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));
+
+  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;
+
+  // 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();
+
+  // 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([]);
+  }
+
+  // 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();
+    }
+    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);
+  }
+
+  // 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;
+};

frontend/dist/index.html

@@ -1,116 +1,155 @@
-<!doctype html>
-<html lang="en">
-<head>
-<meta charset="utf-8" />
-<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
-<title>Elysium</title>
-<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ctext y='50' font-size='50'%3E🌿%3C/text%3E%3C/svg%3E">
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Mono:wght@400;700&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">
-<link rel="stylesheet" href="/assets/elysium.css" />
-</head>
-<body data-alert="CALM">
-
-<!-- BACKGROUND CANVAS -->
-<canvas id="elysium-canvas"></canvas>
-
-<!-- LEFT TIMELINE -->
-<aside id="timeline">
-  <div class="t-edge"></div>
-  <div class="years">
-    <div class="year">2016</div><div class="year">2017</div><div class="year">2018</div>
-    <div class="year">2019</div>
-    <div class="year-active">2026</div>
-    <div class="year">2027</div><div class="year">2028</div><div class="year">2029</div>
-    <div class="year">2030</div>
-  </div>
-</aside>
-
-<!-- LEGEND PANEL -->
-<section id="legend" class="glass">
-  <div class="legend-header">LEGEND</div>
-  <div id="legend-items">
-    <div class="legend-item" data-type="CORE">
-      <span class="dot" style="background:#c8a44a;color:#c8a44a"></span>
-      <span class="badge">1</span><span class="lbl">Civilization</span>
-    </div>
-  </div>
-  <div class="meta-row"><span>🏛 GAPS</span><span id="legend-gaps" class="meta-val">20%</span></div>
-  <div class="meta-row"><span>⟳ Updates</span><span id="legend-updates" class="meta-val">30%</span></div>
-</section>
-
-<!-- MINIMAP -->
-<canvas id="minimap"></canvas>
-<div class="minimap-label">CIVILIZATION MAP</div>
-
-<!-- ZOOM CONTROLS -->
-<div id="zoom-ctrl">
-  <button id="z-in" title="Zoom in">+</button>
-  <button id="z-fit" title="Fit all">⊡</button>
-  <button id="z-out" title="Zoom out">−</button>
-</div>
-
-<!-- ALERT SCRIM -->
-<div id="alert-scrim"></div>
-
-<!-- STATS BAR -->
-<section id="stats" class="glass">
-  <div class="stat">
-    <div class="stat-icon">↗</div>
-    <div><div class="stat-label">Compliance Rate</div><div class="stat-value" id="s-health">—</div></div>
-  </div>
-  <div class="stat">
-    <div class="stat-icon">📜</div>
-    <div><div class="stat-label">Total Laws</div><div class="stat-value" id="s-laws">0</div></div>
-  </div>
-  <div class="stat">
-    <div class="stat-icon">👥</div>
-    <div><div class="stat-label">Public Engagement</div><div class="stat-value" id="s-engage">0</div></div>
-  </div>
-  <div class="stat">
-    <div class="stat-icon">✨</div>
-    <div><div class="stat-label">Implementation Rate</div><div class="stat-value" id="s-impl">0%</div></div>
-  </div>
-</section>
-
-<!-- QUERY BAR -->
-<section id="query-bar" class="glass">
-  <input id="q-input" placeholder="Speak to your civilization seed…" autocomplete="off"/>
-  <label id="q-upload" title="Attach image">
-    <input type="file" id="q-file" accept="image/*" hidden />📎
-  </label>
-  <button id="q-send" title="Send">→</button>
-  <div class="mode-row">
-    <button id="my-agent">🤖 My agent <span class="badge" id="agent-count">+0</span></button>
-    <button id="ri-analysis">✨ RI Analysis</button>
-  </div>
-</section>
-
-<!-- COUNCIL PANEL (slides in when agents present) -->
-<section id="council" class="glass hidden">
-  <div class="council-head">
-    <div class="council-title">COUNCIL DELIBERATION <span id="council-count">+0</span></div>
-    <button id="council-close">×</button>
-  </div>
-  <div id="council-body"></div>
-  <div id="council-synth"></div>
-  <audio id="debate-audio" controls preload="auto"></audio>
-</section>
-
-<!-- NODE DETAIL POPOVER -->
-<section id="node-detail" class="glass hidden"></section>
-
-<!-- TOAST NOTIFICATIONS -->
-<div id="toasts"></div>
-
-<!-- INITIAL HINT -->
-<div id="seed-hint">Ask anything to wake your civilization</div>
-
-<script src="/assets/api.js"></script>
-<script src="/assets/nodes.js"></script>
-<script src="/assets/canvas.js"></script>
-<script src="/assets/council.js"></script>
-<script src="/assets/boot.js"></script>
-</body>
-</html>
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
+<title>Elysium — Living Civilization</title>
+<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ctext y='50' font-size='50'%3E🌿%3C/text%3E%3C/svg%3E">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Mono:wght@400;700&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="/assets/elysium.css" />
+</head>
+<body data-alert="CALM" data-busy="0">
+
+<!-- BACKGROUND CANVAS (bioluminescent infinite world) -->
+<canvas id="elysium-canvas"></canvas>
+
+<!-- LEFT TIMELINE -->
+<aside id="timeline">
+  <div class="t-edge"></div>
+  <div class="years">
+    <div class="year">2022</div>
+    <div class="year">2023</div>
+    <div class="year">2024</div>
+    <div class="year">2025</div>
+    <div class="year-active">2026</div>
+    <div class="year">2027</div>
+    <div class="year">2028</div>
+    <div class="year">2029</div>
+    <div class="year">2030</div>
+  </div>
+</aside>
+
+<!-- LEGEND PANEL (top right) -->
+<section id="legend" class="glass">
+  <div class="legend-header">LEGEND <span id="legend-help" title="Click a swatch to filter by type">?</span></div>
+  <div id="legend-items"></div>
+  <div class="meta-row" title="Mycelium density — how interconnected the civilization is (edges per node)">
+    <span>🕸 Density</span><span id="m-density" class="meta-val">0%</span>
+  </div>
+  <div class="meta-row" title="Coherence — inverse of cognitive strain. Higher = clearer thought.">
+    <span>✦ Coherence</span><span id="m-coherence" class="meta-val">70%</span>
+  </div>
+</section>
+
+<!-- CIVILIZATION MAP (minimap, fully interactive) -->
+<div id="minimap-wrap">
+  <div class="minimap-label">CIVILIZATION MAP</div>
+  <canvas id="minimap"></canvas>
+</div>
+
+<!-- ZOOM CONTROLS -->
+<div id="zoom-ctrl">
+  <button id="z-in"  title="Zoom in">+</button>
+  <button id="z-fit" title="Fit all">⊡</button>
+  <button id="z-out" title="Zoom out">−</button>
+</div>
+
+<!-- ALERT SCRIM (overlay tint for alert levels) -->
+<div id="alert-scrim"></div>
+
+<!-- STATS BAR — REPLACED with meaningful civilization metrics -->
+<section id="stats" class="glass">
+  <div class="stat" title="Total nodes in your civilization mycelium">
+    <div class="stat-icon">🌐</div>
+    <div><div class="stat-label">Mycelium Nodes</div><div class="stat-value" id="s-nodes">1</div></div>
+  </div>
+  <div class="stat" title="Total mycelium threads connecting concepts">
+    <div class="stat-icon">⌬</div>
+    <div><div class="stat-label">Threads</div><div class="stat-value" id="s-edges">0</div></div>
+  </div>
+  <div class="stat" title="Council agents active in this turn">
+    <div class="stat-icon">👁</div>
+    <div><div class="stat-label">Council Active</div><div class="stat-value" id="s-council">0</div></div>
+  </div>
+  <div class="stat" title="Knowledge nodes grown in the last interaction">
+    <div class="stat-icon">✦</div>
+    <div><div class="stat-label">Growth (Δ)</div><div class="stat-value" id="s-growth">0</div></div>
+  </div>
+  <div class="stat" title="Minutes since this civilization awoke">
+    <div class="stat-icon">⏳</div>
+    <div><div class="stat-label">Age (min)</div><div class="stat-value" id="s-age">0</div></div>
+  </div>
+</section>
+
+<!-- QUERY BAR with FILE PREVIEW STRIP above it -->
+<section id="query-area">
+  <div id="attach-strip" class="glass hidden"></div>
+  <div id="query-bar" class="glass">
+    <label id="q-upload" title="Attach up to 2 images / PDFs">
+      <input type="file" id="q-file" accept="image/*,application/pdf" hidden multiple />
+      <span class="paperclip">📎</span>
+    </label>
+    <input id="q-input" placeholder="Speak to your civilization seed…" autocomplete="off"/>
+    <button id="q-send" title="Send">
+      <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
+    </button>
+  </div>
+  <div class="mode-row">
+    <button id="my-agent" title="Open Council overlay">
+      <span class="dot-mini"></span> My Agents <span class="badge" id="agent-count">+0</span>
+    </button>
+    <button id="ri-analysis" title="Fit-to-view + show health analysis">
+      ✨ RI Analysis
+    </button>
+  </div>
+</section>
+
+<!-- COUNCIL OVERLAY (slide-in left panel, minimizable) -->
+<section id="council-overlay" class="glass hidden">
+  <div class="co-head">
+    <div class="co-title">
+      <span class="co-pulse"></span>
+      COUNCIL <span id="co-count">+0</span>
+    </div>
+    <div class="co-controls">
+      <button id="co-play"  title="Play all agents">▶</button>
+      <button id="co-pause" title="Pause" disabled>⏸</button>
+      <button id="co-min"   title="Minimize">—</button>
+      <button id="co-close" title="Close">×</button>
+    </div>
+  </div>
+  <div id="co-body"></div>
+  <div id="co-synth"></div>
+  <audio id="debate-audio" preload="auto"></audio>
+</section>
+
+<!-- COUNCIL MINIMIZED PILL -->
+<button id="council-pill" class="glass hidden" title="Open council">
+  <span class="dot-mini"></span><span id="pill-count">0</span> agents
+</button>
+
+<!-- NODE DETAIL POPOVER (full explanation, like image 4) -->
+<section id="node-detail" class="glass hidden"></section>
+
+<!-- TOAST NOTIFICATIONS -->
+<div id="toasts"></div>
+
+<!-- INITIAL HINT (vanishes after first turn) -->
+<div id="seed-hint">Ask anything to awaken your civilization</div>
+
+<!-- BUSY OVERLAY: blocks input while model is thinking -->
+<div id="busy-overlay" class="hidden">
+  <div class="busy-spin"></div>
+  <div class="busy-text">Council deliberating…</div>
+</div>
+
+<script src="/assets/api.js"></script>
+<script src="/assets/nodes.js"></script>
+<script src="/assets/canvas.js"></script>
+<script src="/assets/council.js"></script>
+<script src="/assets/boot.js"></script>
+<script defer src="https://static.cloudflareinsights.com/beacon.min.js/v833ccba57c9e4d2798f2e76cebdd09a11778172276447" integrity="sha512-57MDmcccJXYtNnH+ZiBwzC4jb2rvgVCEokYN+L/nLlmO8rfYT/gIpW2A569iJ/3b+0UEasghjuZH/ma3wIs/EQ==" data-cf-beacon='{"version":"2024.11.0","token":"4edd5f8ec12a48cfa682ab8261b80a79","server_timing":{"name":{"cfCacheStatus":true,"cfEdge":true,"cfExtPri":true,"cfL4":true,"cfOrigin":true,"cfSpeedBrain":true},"location_startswith":null}}' crossorigin="anonymous"></script>
+</body>
+</html>