npm - monomind - Versions diffs - 2.1.7 → 2.1.9 - Mend

monomind 2.1.7 → 2.1.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/packages/@monomind/cli/dist/src/ui/mastermind-diagram-fallback.html ADDED Viewed

@@ -0,0 +1,1069 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>MASTERMIND — Live Dashboard</title>
+<style>
+* { box-sizing: border-box; margin: 0; padding: 0; }
+html, body {
+  width: 100%; height: 100%; overflow: hidden;
+  background: #07071a;
+  font-family: 'Azeret Mono', 'Space Mono', 'Courier New', monospace;
+  color: #e0e0ff;
+  user-select: none;
+}
+/* ── Main layout ── */
+#app { display: flex; height: 100vh; }
+#sidebar {
+  width: 220px; flex-shrink: 0;
+  background: oklch(9% 0.012 186);
+  border-right: 1px solid oklch(62% 0.2 186 / 0.18);
+  display: flex; flex-direction: column;
+  overflow: hidden; z-index: 10;
+}
+#stage-wrap { flex: 1; position: relative; overflow: hidden; }
+#detail-panel {
+  width: 0; flex-shrink: 0; overflow: hidden;
+  background: oklch(9% 0.012 186);
+  border-left: 1px solid oklch(62% 0.2 186 / 0.18);
+  transition: width 0.3s ease;
+  display: flex; flex-direction: column;
+  z-index: 10;
+}
+#detail-panel.open { width: 280px; }
+#stage { position: absolute; inset: 0; width: 100%; height: 100%; }
+/* ── Sidebar ── */
+#sb-header {
+  padding: 14px 14px 10px;
+  border-bottom: 1px solid oklch(62% 0.2 186 / 0.18);
+  flex-shrink: 0;
+}
+#sb-title {
+  font-size: 8px; letter-spacing: 4px; color: oklch(52% 0.1 186); margin-bottom: 4px;
+}
+.live-row { display: flex; align-items: center; gap: 6px; }
+.l-dot {
+  width: 6px; height: 6px; border-radius: 50%;
+  background: #252560; flex-shrink: 0;
+  transition: background 0.5s;
+}
+.l-dot.on { background: #28c068; }
+@media (prefers-reduced-motion: no-preference) { .l-dot.on { animation: ldp 2s ease-in-out infinite; } }
+@keyframes ldp { 0%,100%{opacity:1} 50%{opacity:0.4} }
+#l-status { font-size: 9px; letter-spacing: 2px; color: oklch(44% 0.08 186); }
+#l-agents { font-size: 8px; color: oklch(40% 0.07 186); margin-left: auto; }
+#sb-sessions {
+  flex: 1; overflow-y: auto; padding: 8px 0;
+  scrollbar-width: thin; scrollbar-color: oklch(62% 0.2 186 / 0.3) transparent;
+}
+#sb-sessions::-webkit-scrollbar { width: 4px; }
+#sb-sessions::-webkit-scrollbar-thumb { background: oklch(62% 0.2 186 / 0.3); border-radius: 2px; }
+.sess-item {
+  padding: 8px 14px; cursor: pointer;
+  border-left: 2px solid transparent;
+  transition: background 0.15s, border-color 0.15s;
+}
+.sess-item:hover { background: oklch(62% 0.2 186 / 0.09); }
+.sess-item.active { border-left-color: transparent; background: oklch(62% 0.2 186 / 0.14); box-shadow: inset 0 0 0 1px oklch(62% 0.2 186 / 0.32); }
+.sess-item.running { border-left-color: #28c068; }
+.sess-ts { font-size: 10px; color: oklch(42% 0.05 186); margin-bottom: 3px; }
+.sess-prompt {
+  font-size: 12px; color: oklch(70% 0.05 186); line-height: 1.4;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 188px;
+}
+.sess-badges { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
+.sess-project { font-size: 7px; color: oklch(40% 0.1 186); letter-spacing: 1px; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.sess-badge {
+  font-size: 8px; padding: 2px 6px; border-radius: 3px;
+  border: 1px solid oklch(62% 0.2 186 / 0.25); color: oklch(62% 0.09 186);
+  background: oklch(62% 0.2 186 / 0.08);
+}
+.sess-badge.running-badge { border-color: rgba(40,192,104,0.4); color: #28c068; background: rgba(40,192,104,0.08); }
+#git-user-row {
+  display: flex; align-items: center; gap: 5px;
+  margin-top: 7px; padding-top: 6px;
+  border-top: 1px solid oklch(62% 0.2 186 / 0.12);
+}
+#git-user-icon { font-size: 9px; color: #3a3a70; }
+#git-user-name {
+  font-size: 9px; letter-spacing: 0.5px; color: #4a4a90;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+#git-cwd-row {
+  display: flex; align-items: center; gap: 5px; margin-top: 4px;
+}
+#git-cwd-icon { font-size: 9px; color: #2a2a58; }
+#git-cwd-name {
+  font-size: 9px; letter-spacing: 0.3px; color: #38386a;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  direction: rtl; text-align: left;
+}
+.sess-trace-link {
+  font-size: 7px; color: #3a3a70; text-decoration: none; letter-spacing: 0.5px;
+  padding: 1px 5px; border: 1px solid oklch(62% 0.2 186 / 0.2); border-radius: 3px;
+  margin-left: auto; flex-shrink: 0;
+}
+.sess-trace-link:hover { color: oklch(66% 0.11 186); border-color: oklch(62% 0.2 186 / 0.5); }
+.dp-export-btn {
+  font-size: 9px; font-family: inherit; color: oklch(58% 0.09 186); text-decoration: none;
+  padding: 4px 8px; border: 1px solid oklch(62% 0.2 186 / 0.25); border-radius: 4px;
+  background: oklch(62% 0.2 186 / 0.07); cursor: pointer; letter-spacing: 0.3px;
+}
+.dp-export-btn:hover { color: oklch(72% 0.12 186); border-color: oklch(62% 0.2 186 / 0.5); background: oklch(62% 0.2 186 / 0.15); }
+#sb-no-sessions {
+  padding: 20px 14px; font-size: 9px; color: oklch(42% 0.06 186); line-height: 1.7;
+  text-align: center;
+}
+#sb-movie-btn {
+  margin: 10px 14px;
+  background: oklch(62% 0.2 186 / 0.12);
+  border: 1px solid oklch(62% 0.2 186 / 0.35);
+  color: oklch(56% 0.16 186); font-size: 9px; letter-spacing: 2px;
+  border-radius: 6px; padding: 7px; cursor: pointer; width: calc(100% - 28px);
+  transition: background 0.15s, color 0.15s;
+  font-family: 'Azeret Mono', 'Space Mono', 'Courier New', monospace;
+}
+#sb-movie-btn:hover { background: oklch(62% 0.2 186 / 0.25); color: #d0b0ff; }
+#sb-movie-btn.active { background: oklch(62% 0.2 186 / 0.25); color: #d0b0ff; border-color: oklch(62% 0.2 186 / 0.6); }
+/* ── SVG title overlay ── */
+#title-wrap {
+  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
+  text-align: center; pointer-events: none; z-index: 5;
+}
+#title-h1 {
+  font-size: 22px; font-weight: 900; letter-spacing: 0.38em;
+  color: oklch(84% 0.14 186);
+}
+#title-sub { font-size: 9px; color: oklch(38% 0.06 186); letter-spacing: 3px; margin-top: 6px; }
+/* ── Prompt box ── */
+#prompt-box {
+  position: absolute; bottom: 76px; left: 50%; transform: translateX(-50%);
+  min-width: 340px; max-width: 500px;
+  background: rgba(6,4,22,0.96);
+  border: 1px solid rgba(130,80,255,0.5);
+  border-radius: 12px; padding: 10px 18px;
+  z-index: 50; opacity: 0;
+  box-shadow: 0 4px 28px rgba(100,50,255,0.16);
+  backdrop-filter: blur(18px);
+}
+#p-tag { font-size: 8px; letter-spacing: 3px; color: #48489a; margin-bottom: 4px; }
+#p-line { font-size: 12.5px; color: #90c8ff; display: flex; align-items: center; gap: 2px; min-height: 19px; }
+#p-cursor {
+  display: inline-block; width: 2px; height: 14px;
+  background: #90c8ff; flex-shrink: 0;
+  animation: blink 0.8s step-end infinite;
+}
+@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
+/* ── Activity log ── */
+#activity-log {
+  position: absolute; left: 10px; bottom: 76px;
+  width: 240px;
+  background: rgba(5,3,18,0.93);
+  border: 1px solid rgba(70,45,165,0.35);
+  border-radius: 10px; padding: 9px 12px;
+  z-index: 50; opacity: 0;
+}
+#log-title { font-size: 7.5px; letter-spacing: 3px; color: #282870; margin-bottom: 6px;
+  padding-bottom: 5px; border-bottom: 1px solid rgba(70,45,165,0.18); }
+#log-entries { font-size: 9px; line-height: 1.95; max-height: 160px; overflow: hidden; }
+.log-row { display: flex; gap: 5px; opacity: 0; }
+.log-tag { font-weight: bold; min-width: 58px; flex-shrink: 0; }
+.log-msg { color: #525298; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
+/* ── Mode banner ── */
+#mode-banner {
+  position: absolute; top: 14px; right: 10px;
+  font-size: 8px; letter-spacing: 3px; color: #303070;
+  z-index: 5; pointer-events: none;
+}
+#mode-banner.live-mode { color: #28c068; }
+/* ── Control bar ── */
+#ctrl {
+  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
+  display: flex; align-items: center; gap: 7px;
+  background: rgba(8,6,26,0.95);
+  border: 1px solid rgba(100,60,220,0.35);
+  border-radius: 26px; padding: 6px 16px;
+  z-index: 100; backdrop-filter: blur(18px);
+  opacity: 0;
+}
+.c-btn {
+  background: none; border: 1px solid rgba(100,60,220,0.4);
+  color: #7858d0; width: 26px; height: 26px; border-radius: 50%;
+  cursor: pointer; font-size: 10px;
+  display: flex; align-items: center; justify-content: center;
+  transition: background 0.12s, color 0.12s; flex-shrink: 0; line-height: 1;
+}
+.c-btn:hover { background: rgba(100,60,220,0.2); color: #d0b0ff; }
+.c-btn.disabled { opacity: 0.3; pointer-events: none; }
+#scrubber {
+  width: 180px; height: 3px; cursor: pointer;
+  -webkit-appearance: none; appearance: none;
+  background: rgba(100,60,220,0.2); border-radius: 2px; outline: none;
+}
+#scrubber::-webkit-slider-thumb {
+  -webkit-appearance: none; width: 11px; height: 11px;
+  border-radius: 50%; background: #7858d0; cursor: pointer; border: none;
+}
+#t-disp { font-size: 9px; color: #484888; min-width: 36px; text-align: right; font-variant-numeric: tabular-nums; }
+#spd {
+  background: rgba(8,6,26,0.85); border: 1px solid rgba(100,60,220,0.3);
+  color: oklch(55% 0.12 186); font-size: 9px; font-family: 'Azeret Mono', 'Space Mono', monospace;
+  border-radius: 4px; padding: 2px 4px; cursor: pointer; outline: none;
+}
+#spd option { background: #0d0a20; }
+/* ── Detail panel ── */
+#dp-header {
+  padding: 14px 16px 10px;
+  border-bottom: 1px solid oklch(62% 0.2 186 / 0.18); flex-shrink: 0;
+}
+#dp-close {
+  float: right; background: none; border: none; color: #404070;
+  cursor: pointer; font-size: 13px; padding: 0; line-height: 1;
+}
+#dp-close:hover { color: #a090e0; }
+#dp-title { font-size: 9px; letter-spacing: 3px; color: #5050a0; margin-top: 2px; }
+#dp-emoji { font-size: 22px; display: block; margin-bottom: 4px; }
+#dp-body { flex: 1; overflow-y: auto; padding: 12px 16px; scrollbar-width: thin; scrollbar-color: oklch(62% 0.2 186 / 0.3) transparent; }
+#dp-body::-webkit-scrollbar { width: 4px; }
+#dp-body::-webkit-scrollbar-thumb { background: oklch(62% 0.2 186 / 0.3); border-radius: 2px; }
+.dp-section { margin-bottom: 14px; }
+.dp-section-title { font-size: 7.5px; letter-spacing: 3px; color: oklch(38% 0.07 186); margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid oklch(62% 0.2 186 / 0.15); }
+.dp-event { font-size: 9px; line-height: 1.6; color: #5060a0; margin-bottom: 4px; }
+.dp-event .ev-ts { color: #282855; }
+.dp-event .ev-type { color: inherit; font-weight: bold; }
+.dp-artifact { font-size: 9px; color: #6070a0; padding: 3px 6px; background: oklch(62% 0.2 186 / 0.08); border-radius: 3px; margin-bottom: 3px; }
+.dp-agent { display: inline-block; font-size: 8px; padding: 2px 7px; border-radius: 10px; margin: 2px 3px 2px 0; border: 1px solid oklch(62% 0.2 186 / 0.3); color: oklch(55% 0.09 186); }
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+</style>
+</head>
+<body>
+<div id="app">
+  <!-- ── Left sidebar: session history ── -->
+  <div id="sidebar">
+    <div id="sb-header">
+      <div id="sb-title">SESSIONS</div>
+      <select id="proj-filter" onchange="applyProjectFilter(this.value)" style="width:100%;margin-top:6px;background:oklch(12% 0.015 186);color:oklch(52% 0.1 186);border:1px solid oklch(62% 0.2 186 / 0.18);border-radius:3px;font-size:8px;letter-spacing:1px;padding:3px 4px;cursor:pointer"><option value="">ALL PROJECTS</option></select>
+      <div class="live-row">
+        <div class="l-dot" id="l-dot"></div>
+        <span id="l-status">OFFLINE</span>
+        <span id="l-agents">0 agents</span>
+      </div>
+      <div id="git-user-row">
+        <span id="git-user-icon">⬡</span>
+        <span id="git-user-name">—</span>
+      </div>
+      <div id="git-cwd-row">
+        <span id="git-cwd-icon">◎</span>
+        <span id="git-cwd-name">—</span>
+      </div>
+    </div>
+    <div id="sb-sessions">
+      <div id="sb-no-sessions">No sessions yet.<br><br>Describe a goal and<br>Mastermind routes it<br>across specialist agents.<br><br><span style="color:oklch(56% 0.16 186);letter-spacing:1px">/mastermind</span></div>
+    </div>
+    <button id="sb-movie-btn" onclick="toggleMovieMode(currentSessionObj)">▶ MOVIE MODE</button>
+  </div>
+  <!-- ── Stage ── -->
+  <div id="stage-wrap">
+    <!-- SVG -->
+    <svg id="stage" viewBox="0 0 960 720" preserveAspectRatio="xMidYMid meet">
+      <defs>
+        <filter id="glow" x="-55%" y="-55%" width="210%" height="210%">
+          <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="b"/>
+          <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
+        </filter>
+        <filter id="bloom" x="-100%" y="-100%" width="300%" height="300%">
+          <feGaussianBlur in="SourceGraphic" stdDeviation="15" result="b"/>
+          <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
+        </filter>
+      </defs>
+      <rect width="960" height="720" fill="#07071a"/>
+      <g id="stars"></g>
+      <g id="net-edges"></g>
+      <g id="net-particles"></g>
+      <g id="net-nodes"></g>
+    </svg>
+    <!-- Overlays -->
+    <div id="title-wrap">
+      <div id="title-h1">MASTERMIND</div>
+      <div id="title-sub">AUTONOMOUS EXECUTION · 12 DOMAINS · PERSISTENT ORGS</div>
+    </div>
+    <div id="mode-banner">LIVE</div>
+    <div id="prompt-box">
+      <div id="p-tag">USER PROMPT</div>
+      <div id="p-line"><span id="p-text"></span><span id="p-cursor"></span></div>
+    </div>
+    <div id="activity-log">
+      <div id="log-title">ACTIVITY LOG</div>
+      <div id="log-entries"></div>
+    </div>
+    <div id="ctrl">
+      <button class="c-btn disabled" id="btn-restart" title="Restart">↺</button>
+      <button class="c-btn disabled" id="btn-play" title="Play">▶</button>
+      <button class="c-btn disabled" id="btn-pause" title="Pause">⏸</button>
+      <input type="range" id="scrubber" min="0" max="100" value="0" step="0.1" disabled/>
+      <span id="t-disp">—</span>
+      <select id="spd">
+        <option value="0.5">0.5×</option>
+        <option value="1" selected>1×</option>
+        <option value="2">2×</option>
+        <option value="3">3×</option>
+      </select>
+    </div>
+  </div>
+  <!-- ── Right panel: session/domain detail ── -->
+  <div id="detail-panel">
+    <div id="dp-header">
+      <button id="dp-close" onclick="closeDetail()">✕</button>
+      <span id="dp-emoji"></span>
+      <div id="dp-title">SELECT A DOMAIN OR SESSION</div>
+    </div>
+    <div id="dp-body"></div>
+  </div>
+</div>
+<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
+<script>
+'use strict';
+// ── Graph constants ──────────────────────────────────────────────────────────
+const CX = 480, CY = 360;
+const DOMAIN_COLORS = {
+  build:'#60a5fa', idea:'#fbbf24', marketing:'#f472b6', review:'#34d399',
+  research:'#a78bfa', content:'#fb923c', release:'#22d3ee', sales:'#f87171',
+  ops:'#4ade80', finance:'#fde68a', orgs:'#c084fc', default:'#00E5C8'
+};
+const DOMAIN_EMOJIS = {
+  build:'⚙️', idea:'💡', marketing:'📣', review:'🔍', research:'🔬',
+  content:'✍️', release:'🚀', sales:'💼', ops:'⚡', finance:'💰', orgs:'🏛'
+};
+const AGENT_EMOJIS = {
+  'coder':'⚙', 'architect':'🏗', 'tester':'🧪', 'reviewer':'🔍',
+  'researcher':'🔬', 'frontend-dev':'🎨', 'backend-dev':'⚡',
+  'coordinator':'🎯', 'planner':'📋', 'general-purpose':'🤖',
+  'frontend':'🎨', 'backend':'⚡', 'ml-developer':'🧠',
+  'security-architect':'🔒', 'sparc-coder':'💻', 'default':'◈'
+};
+// ── Node/edge model ───────────────────────────────────────────────────────────
+const nodes = new Map();
+const edges  = [];
+let   rootId = null;
+let   simActive = false;
+// ── SVG helpers ───────────────────────────────────────────────────────────────
+const NS  = 'http://www.w3.org/2000/svg';
+const mkN = (tag, a) => {
+  const el = document.createElementNS(NS, tag);
+  if (a) for (const [k,v] of Object.entries(a)) el.setAttribute(k, v);
+  return el;
+};
+const starsG    = document.getElementById('stars');
+const edgesG    = document.getElementById('net-edges');
+const particlesG= document.getElementById('net-particles');
+const nodesG    = document.getElementById('net-nodes');
+// ── Star field ────────────────────────────────────────────────────────────────
+(function buildStars() {
+  for (let i = 0; i < 170; i++) {
+    starsG.appendChild(mkN('circle', {
+      cx: (Math.random()*960).toFixed(1),
+      cy: (Math.random()*720).toFixed(1),
+      r:  (Math.random()<0.1 ? Math.random()*1.5+0.8 : Math.random()*0.8+0.15).toFixed(2),
+      fill: `rgba(160,150,255,${(Math.random()*0.35+0.08).toFixed(2)})`
+    }));
+  }
+  if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+    gsap.to([...starsG.children], {
+      opacity: 'random(0.06,0.6)', duration: 'random(2,5)',
+      stagger:{ amount:16, from:'random', repeat:-1, yoyo:true, ease:'sine.inOut' }, delay:1
+    });
+  }
+})();
+// ── Hex helper ────────────────────────────────────────────────────────────────
+function hexPts(r) {
+  return Array.from({length:6},(_,i)=>{
+    const a=i*Math.PI/3-Math.PI/6;
+    return `${(r*Math.cos(a)).toFixed(1)},${(r*Math.sin(a)).toFixed(1)}`;
+  }).join(' ');
+}
+// ── Force simulation (Verlet) ─────────────────────────────────────────────────
+const SPRING_K  = 0.030;
+const REPULSION = 6000;
+const DAMPING   = 0.78;
+const REST_DIST = { root:0, domain:185, agent:68, org:160 };
+function forceStep() {
+  const arr = [...nodes.values()];
+  for (const n of arr) { n.ax=0; n.ay=0; }
+  for (let i=0; i<arr.length; i++) {
+    for (let j=i+1; j<arr.length; j++) {
+      const a=arr[i], b=arr[j];
+      const dx=b.x-a.x, dy=b.y-a.y;
+      const d2=dx*dx+dy*dy+1, d=Math.sqrt(d2);
+      const f=REPULSION/(d2*d);
+      if (!a.fixed){a.ax-=dx*f; a.ay-=dy*f;}
+      if (!b.fixed){b.ax+=dx*f; b.ay+=dy*f;}
+    }
+  }
+  for (const e of edges) {
+    const a=nodes.get(e.fromId), b=nodes.get(e.toId);
+    if (!a||!b) continue;
+    const dx=b.x-a.x, dy=b.y-a.y;
+    const d=Math.sqrt(dx*dx+dy*dy)+0.001;
+    const rest=REST_DIST[b.type]??110;
+    const f=(d-rest)*SPRING_K;
+    if (!a.fixed){a.ax+=dx/d*f; a.ay+=dy/d*f;}
+    if (!b.fixed){b.ax-=dx/d*f; b.ay-=dy/d*f;}
+  }
+  for (const n of arr) {
+    if (n.fixed) continue;
+    n.vx=(n.vx+n.ax)*DAMPING;
+    n.vy=(n.vy+n.ay)*DAMPING;
+    n.x=Math.max(60,Math.min(900,n.x+n.vx));
+    n.y=Math.max(60,Math.min(660,n.y+n.vy));
+  }
+}
+// ── Node renderer ─────────────────────────────────────────────────────────────
+function buildNodeEl(n) {
+  const g=mkN('g',{transform:`translate(${n.x.toFixed(1)},${n.y.toFixed(1)})`});
+  g.style.opacity='0'; g.style.cursor='pointer';
+  if (n.type==='root') {
+    g.appendChild(mkN('circle',{r:'58',fill:'none',stroke:n.color,'stroke-width':'0.5',opacity:'0.15'}));
+    g.appendChild(mkN('circle',{r:'38',fill:'#070620',stroke:n.color,'stroke-width':'2.8',filter:'url(#glow)'}));
+    g.appendChild(mkN('circle',{r:'30',fill:'none',stroke:n.color,'stroke-width':'0.8',opacity:'0.35'}));
+    const hex=mkN('polygon',{points:hexPts(16),fill:'none',stroke:n.color,'stroke-width':'1.8',opacity:'0.75'});
+    g.appendChild(hex);
+    gsap.to(hex,{rotate:360,transformOrigin:'0 0',duration:24,repeat:-1,ease:'none'});
+    const lbl=mkN('text',{x:'0',y:'58','text-anchor':'middle','font-size':'6.5',fill:n.color,'letter-spacing':'2',
+      'font-family':"'Azeret Mono','Space Mono',monospace"});
+    lbl.textContent='MASTERMIND'; g.appendChild(lbl);
+  } else if (n.type==='domain') {
+    g.appendChild(mkN('circle',{r:'44',fill:'none',stroke:n.color,'stroke-width':'0.5',opacity:'0.2'}));
+    g.appendChild(mkN('circle',{r:'30',fill:'#09071e',stroke:n.color,'stroke-width':'2.5',filter:'url(#glow)'}));
+    const emj=mkN('text',{x:'0',y:'9','text-anchor':'middle','font-size':'17'});
+    emj.textContent=n.emoji||'◈'; g.appendChild(emj);
+    const lbl=mkN('text',{x:'0',y:'45','text-anchor':'middle','font-size':'7',fill:n.color,'letter-spacing':'1.5',
+      'font-family':"'Azeret Mono','Space Mono',monospace"});
+    lbl.textContent=n.label; g.appendChild(lbl);
+    const ring=mkN('circle',{r:'34',fill:'none',stroke:'#fbbf24','stroke-width':'2',opacity:'0',
+      transform:'rotate(-90)','stroke-dasharray':'213.6','stroke-dashoffset':'213.6','stroke-linecap':'round'});
+    ring.dataset.cring=n.id;
+    g.appendChild(ring);
+  } else if (n.type==='agent') {
+    g.appendChild(mkN('circle',{r:'20',fill:'#08061a',stroke:n.color,'stroke-width':'1.8',filter:'url(#glow)'}));
+    const emj=mkN('text',{x:'0',y:'5','text-anchor':'middle','font-size':'12'});
+    emj.textContent=n.emoji||'◈'; g.appendChild(emj);
+    const sl=n.label.length>11?n.label.slice(0,10)+'…':n.label;
+    const lbl=mkN('text',{x:'0',y:'31','text-anchor':'middle','font-size':'6',fill:n.color,'letter-spacing':'0.6',
+      'font-family':"'Azeret Mono','Space Mono',monospace"});
+    lbl.textContent=sl; g.appendChild(lbl);
+  } else if (n.type==='org') {
+    g.appendChild(mkN('polygon',{points:'0,-38 32,0 0,38 -32,0',fill:'#09071e',stroke:n.color,'stroke-width':'2.5',filter:'url(#glow)'}));
+    const emj=mkN('text',{x:'0',y:'7','text-anchor':'middle','font-size':'16'});
+    emj.textContent='🏛'; g.appendChild(emj);
+    const lbl=mkN('text',{x:'0',y:'53','text-anchor':'middle','font-size':'6.5',fill:n.color,'letter-spacing':'1.5',
+      'font-family':"'Azeret Mono','Space Mono',monospace"});
+    lbl.textContent=n.label; g.appendChild(lbl);
+  }
+  g.appendChild(mkN('circle',{r:n.type==='agent'?'22':'50',fill:'transparent'}));
+  nodesG.appendChild(g);
+  n.el=g;
+  gsap.to(g,{opacity:1,duration:0.4,ease:'power2.out'});
+  gsap.from(g,{scale:0.15,transformOrigin:'0 0',duration:0.55,ease:'back.out(1.7)'});
+}
+// ── Edge renderer ─────────────────────────────────────────────────────────────
+function buildEdgeEl(e) {
+  const a=nodes.get(e.fromId), b=nodes.get(e.toId);
+  if (!a||!b) return;
+  const g=mkN('g'); g.style.opacity='0';
+  const isIC=e.type==='intercom';
+  const path=mkN('path',{fill:'none',stroke:a.color,opacity:isIC?'0.75':'0.4',
+    'stroke-width':isIC?'1.5':'0.9','stroke-dasharray':isIC?'5 3':'none'});
+  g.appendChild(path);
+  if (isIC&&e.msg) {
+    const txt=mkN('text',{'font-size':'6.5',fill:a.color,
+      'font-family':"'Azeret Mono','Space Mono',monospace",'letter-spacing':'0.4',opacity:'0.8'});
+    txt.textContent=e.msg.length>24?e.msg.slice(0,23)+'…':e.msg;
+    g.appendChild(txt); e.msgEl=txt;
+  }
+  edgesG.insertBefore(g,edgesG.firstChild);
+  e.el=g; e.pathEl=path;
+  gsap.to(g,{opacity:1,duration:0.6,delay:0.12});
+  updateEdge(e);
+}
+function updateEdge(e) {
+  const a=nodes.get(e.fromId), b=nodes.get(e.toId);
+  if (!a||!b||!e.pathEl) return;
+  if (e.type==='intercom') {
+    const mx=(a.x+b.x)/2, my=(a.y+b.y)/2-65;
+    e.pathEl.setAttribute('d',`M${a.x.toFixed(1)},${a.y.toFixed(1)} Q${mx.toFixed(1)},${my.toFixed(1)} ${b.x.toFixed(1)},${b.y.toFixed(1)}`);
+    if (e.msgEl){e.msgEl.setAttribute('x',(mx-22).toFixed(1));e.msgEl.setAttribute('y',(my-9).toFixed(1));}
+  } else {
+    e.pathEl.setAttribute('d',`M${a.x.toFixed(1)},${a.y.toFixed(1)} L${b.x.toFixed(1)},${b.y.toFixed(1)}`);
+  }
+}
+// ── Particle system ───────────────────────────────────────────────────────────
+const PPC = 7;
+function spawnParticles(e) {
+  const col=(nodes.get(e.fromId)||{color:'#00E5C8'}).color;
+  e.ptcls=Array.from({length:PPC},(_,i)=>{
+    const dot=mkN('circle',{r:'2',fill:col,opacity:'0'});
+    particlesG.appendChild(dot);
+    return {el:dot, t:i/PPC};
+  });
+}
+function tickParticles() {
+  for (const e of edges) {
+    if (!e.ptcls) continue;
+    const a=nodes.get(e.fromId), b=nodes.get(e.toId);
+    if (!a||!b) continue;
+    for (const p of e.ptcls) {
+      p.t=(p.t+0.0045)%1;
+      const t=p.t;
+      let px,py;
+      if (e.type==='intercom') {
+        const mx=(a.x+b.x)/2, my=(a.y+b.y)/2-65;
+        px=(1-t)*(1-t)*a.x+2*(1-t)*t*mx+t*t*b.x;
+        py=(1-t)*(1-t)*a.y+2*(1-t)*t*my+t*t*b.y;
+      } else {
+        px=a.x+(b.x-a.x)*t; py=a.y+(b.y-a.y)*t;
+      }
+      p.el.setAttribute('cx',px.toFixed(1));
+      p.el.setAttribute('cy',py.toFixed(1));
+      p.el.setAttribute('opacity',(Math.sin(t*Math.PI)*0.85).toFixed(2));
+    }
+  }
+}
+// ── RAF render loop ───────────────────────────────────────────────────────────
+let rafLast=0;
+function rafLoop(ts) {
+  if (ts-rafLast>=16) {
+    if (simActive) forceStep();
+    for (const n of nodes.values()) {
+      if (n.el) n.el.setAttribute('transform',`translate(${n.x.toFixed(1)},${n.y.toFixed(1)})`);
+    }
+    for (const e of edges) updateEdge(e);
+    tickParticles();
+    rafLast=ts;
+  }
+  requestAnimationFrame(rafLoop);
+}
+requestAnimationFrame(rafLoop);
+// ── Graph mutation API ────────────────────────────────────────────────────────
+function gAddNode({id,type,domain,agentSlug,label,emoji,color,parentId,cmd}) {
+  if (nodes.has(id)) return nodes.get(id);
+  const par=parentId?nodes.get(parentId):null;
+  const px=par?par.x:CX, py=par?par.y:CY;
+  const ang=Math.random()*Math.PI*2;
+  const dist={root:0,domain:175,agent:75,org:155}[type]??120;
+  const n={
+    id,type,domain,agentSlug,
+    label:label||id,
+    emoji:emoji||(agentSlug?(AGENT_EMOJIS[agentSlug]||AGENT_EMOJIS.default):'◈'),
+    color:color||(domain?(DOMAIN_COLORS[domain]||DOMAIN_COLORS.default):DOMAIN_COLORS.default),
+    x:type==='root'?CX:px+Math.cos(ang)*dist+(Math.random()-.5)*28,
+    y:type==='root'?CY:py+Math.sin(ang)*dist+(Math.random()-.5)*28,
+    vx:0,vy:0,ax:0,ay:0,
+    fixed:type==='root',
+    parentId:parentId||null,
+    cmd:cmd||null,
+    done:false,
+    state:'active',ts:Date.now()
+  };
+  nodes.set(id,n);
+  simActive=nodes.size>1;
+  buildNodeEl(n);
+  return n;
+}
+function gAddEdge({id,fromId,toId,type,msg}) {
+  const eid=id||`${fromId}→${toId}`;
+  if (edges.find(e=>e.id===eid)) return;
+  const e={id:eid,fromId,toId,type:type||'activation',msg};
+  edges.push(e);
+  buildEdgeEl(e);
+  spawnParticles(e);
+}
+function gComplete(id) {
+  const cn = nodes.get(id); if (cn) cn.done = true;
+  const n=nodes.get(id);
+  if (!n||!n.el) return;
+  n.state='complete';
+  const circ=n.el.querySelector('circle[r="30"]')||n.el.querySelector('circle');
+  if (circ) gsap.to(circ,{attr:{stroke:'#fbbf24'},duration:0.3,yoyo:true,repeat:2,
+    onComplete:()=>gsap.to(n.el,{opacity:0.65,duration:1.5})});
+  const ring=n.el.querySelector('[data-cring]');
+  if (ring) gsap.to(ring,{opacity:1,'stroke-dashoffset':0,duration:1.6,ease:'power1.inOut'});
+}
+function gClear() {
+  nodes.clear(); edges.length=0; rootId=null; simActive=false;
+  nodesG.innerHTML=''; edgesG.innerHTML=''; particlesG.innerHTML='';
+}
+function pulseRoot() {
+  const n=nodes.get(rootId);
+  if (!n||!n.el) return;
+  const c=n.el.querySelector('circle[r="38"]');
+  if (c) gsap.to(c,{attr:{'stroke-width':6},duration:0.25,yoyo:true,repeat:1});
+}
+// ── Activity log ──────────────────────────────────────────────────────────────
+function addLog(tag,msg,color) {
+  const wrap=document.getElementById('log-entries');
+  const row=document.createElement('div');
+  row.className='log-row';
+  row.innerHTML=`<span class="log-tag" style="color:${color}">${tag}</span><span class="log-msg">${msg}</span>`;
+  wrap.appendChild(row);
+  gsap.fromTo(row,{opacity:0},{opacity:1,duration:0.3});
+  const rows=wrap.querySelectorAll('.log-row');
+  if (rows.length>10) gsap.to(rows[0],{opacity:0,height:0,duration:0.22,onComplete:()=>rows[0].remove()});
+}
+// ── Movie mode ────────────────────────────────────────────────────────────────
+let isMovieMode=false;
+let movieTl=null;
+function buildMovieTl(sessionData) {
+  gClear();
+  document.getElementById('log-entries').innerHTML='';
+  document.getElementById('p-text').textContent='';
+  const evts=[...(sessionData&&sessionData.events?sessionData.events:[])].sort((a,b)=>(a.ts||0)-(b.ts||0));
+  const tl=gsap.timeline({paused:true,defaults:{ease:'power2.out'}});
+  if (!evts.length) {
+    tl.add(()=>addLog('[DEMO]','Select a session from the sidebar','#00E5C8'),0.2);
+    return tl;
+  }
+  evts.forEach((ev,i)=>{
+    const ev2=Object.assign({},ev);
+    tl.add(()=>handleGraphEvent(ev2), 0.3+i*0.75);
+  });
+  tl.duration(0.3+evts.length*0.75+1.5);
+  return tl;
+}
+function toggleMovieMode(sessionData) {
+  isMovieMode=!isMovieMode;
+  const btn=document.getElementById('sb-movie-btn');
+  const banner=document.getElementById('mode-banner');
+  const scrubEl=document.getElementById('scrubber');
+  const tDisp=document.getElementById('t-disp');
+  if (isMovieMode) {
+    btn.classList.add('active'); btn.textContent='■ EXIT MOVIE';
+    banner.textContent='MOVIE'; banner.classList.remove('live-mode');
+    ['btn-restart','btn-play','btn-pause'].forEach(id=>document.getElementById(id).classList.remove('disabled'));
+    scrubEl.disabled=false;
+    if (movieTl) movieTl.kill();
+    movieTl=buildMovieTl(sessionData);
+    document.getElementById('btn-play').onclick=()=>movieTl.resume();
+    document.getElementById('btn-pause').onclick=()=>movieTl.pause();
+    document.getElementById('btn-restart').onclick=()=>{
+      gClear(); document.getElementById('log-entries').innerHTML='';
+      movieTl=buildMovieTl(sessionData); movieTl.play();
+    };
+    document.getElementById('spd').onchange=e=>movieTl&&movieTl.timeScale(Number(e.target.value));
+    let scrubbing=false;
+    scrubEl.addEventListener('mousedown',()=>{scrubbing=true;movieTl&&movieTl.pause();});
+    scrubEl.addEventListener('mouseup',()=>{scrubbing=false;});
+    scrubEl.addEventListener('input',()=>{if(movieTl)movieTl.progress(Number(scrubEl.value)/100);tDisp.textContent=(movieTl?movieTl.time():0).toFixed(1)+'s';});
+    gsap.ticker.add(()=>{
+      if (!scrubbing&&movieTl&&movieTl.totalDuration()>0) {
+        scrubEl.value=movieTl.progress()*100;
+        tDisp.textContent=movieTl.time().toFixed(1)+'s';
+      }
+    });
+    gsap.to('#ctrl',{opacity:1,duration:0.35});
+    movieTl.play();
+  } else {
+    btn.classList.remove('active'); btn.textContent='▶ MOVIE MODE';
+    banner.textContent='LIVE'; banner.classList.add('live-mode');
+    ['btn-restart','btn-play','btn-pause'].forEach(id=>document.getElementById(id).classList.add('disabled'));
+    scrubEl.disabled=true; tDisp.textContent='—';
+    if (movieTl){movieTl.kill();movieTl=null;}
+    gsap.to('#ctrl',{opacity:0,duration:0.25});
+  }
+}
+// ── Core event dispatcher ─────────────────────────────────────────────────────
+function handleGraphEvent(ev) {
+  const {type,session,domain,agent,from,to,msg,cmd,prompt,status} = ev;
+  if (type==='session:start') {
+    gClear(); rootId=session;
+    gAddNode({id:session,type:'root',label:'MASTERMIND',color:DOMAIN_COLORS.default});
+    if (prompt) {
+      document.getElementById('p-tag').textContent='RUNNING';
+      document.getElementById('p-text').textContent=prompt;
+      gsap.to('#prompt-box',{opacity:1,duration:0.4});
+    }
+    gsap.to('#activity-log',{opacity:1,duration:0.4,delay:0.2});
+    gsap.to('#ctrl',{opacity:1,duration:0.4,delay:0.4});
+    addLog('[SESSION]',(prompt||session).slice(0,32),'#00E5C8');
+    refreshSessions();
+  } else if (type==='domain:dispatch') {
+    if (!domain||!rootId) return;
+    const domId=`${session}:${domain}`;
+    gAddNode({id:domId,type:'domain',domain,parentId:rootId,cmd:cmd||null,
+      label:domain.toUpperCase(),emoji:DOMAIN_EMOJIS[domain]||'◈'});
+    gAddEdge({fromId:rootId,toId:domId,type:'activation'});
+    pulseRoot();
+    addLog(`[${domain.toUpperCase()}]`,cmd||domain,DOMAIN_COLORS[domain]||'#00E5C8');
+  } else if (type==='agent:spawn') {
+    if (!domain||!rootId) return;
+    const domId=`${session}:${domain}`;
+    const agId=`${session}:${domain}:${agent||'agent'}:${ev._replayIdx!==undefined?ev._replayIdx:Date.now()}`;
+    gAddNode({id:agId,type:'agent',domain,agentSlug:agent,parentId:domId,
+      label:agent||'agent',emoji:AGENT_EMOJIS[agent]||AGENT_EMOJIS.default});
+    gAddEdge({fromId:domId,toId:agId,type:'spawn'});
+    addLog(`[${(agent||'agent').slice(0,9)}]`,ev.task||agent||'',DOMAIN_COLORS[domain]||'#00E5C8');
+  } else if (type==='intercom') {
+    if (!from||!to||!rootId) return;
+    gAddEdge({id:`ic-${from}-${to}-${Date.now()}`,fromId:`${session}:${from}`,
+      toId:`${session}:${to}`,type:'intercom',msg});
+    addLog('[IC]',`${from}→${to}: ${msg||''}`,'#c084fc');
+  } else if (type==='domain:complete') {
+    gComplete(`${session}:${domain}`);
+    pulseRoot();
+    addLog(`[${(domain||'').toUpperCase()}]`,`done · ${status||'✓'}`,'#34d399');
+    refreshSessions();
+  } else if (type==='session:complete') {
+    for (const n of nodes.values()) {
+      if (n.el) gsap.to(n.el,{opacity:1,duration:0.3,yoyo:true,repeat:2,ease:'power1.inOut'});
+    }
+    addLog('[✓]',`complete — ${(ev.domains||[]).length||'all'} domains`,'#34d399');
+    setTimeout(()=>gsap.to('#prompt-box',{opacity:0,duration:1}),4000);
+    refreshSessions();
+  }
+}
+// ── Live event handler ────────────────────────────────────────────────────────
+function handleLiveEvent(ev) {
+  if (isMovieMode) return;
+  handleGraphEvent(ev);
+}
+// ── Session graph replay ───────────────────────────────────────────────
+function replaySessionGraph(events) {
+  if (!events || !events.length) return;
+  gClear();
+  let skipRefresh = true;
+  const origRefresh = window.refreshSessions;
+  window.refreshSessions = () => {};  // suppress during replay
+  events.forEach((ev, idx) => handleGraphEvent({...ev, _replayIdx: idx}));
+  window.refreshSessions = origRefresh;
+  gsap.to('#activity-log', {opacity:1, duration:0.4});
+  gsap.to('#ctrl', {opacity:1, duration:0.4, delay:0.2});
+}
+// ── SSE event stream ───────────────────────────────────────────────────────────
+let evtSource = null;
+function connectSSE() {
+  if (evtSource) evtSource.close();
+  evtSource = new EventSource('/api/mastermind-stream');
+  evtSource.onmessage = (e) => {
+    try {
+      const ev = JSON.parse(e.data);
+      handleLiveEvent(ev);
+    } catch (_) {}
+  };
+  evtSource.onerror = () => {
+    const dot = document.getElementById('l-dot');
+    if (dot) dot.classList.remove('on');
+    const st = document.getElementById('l-status');
+    if (st) st.textContent = 'RECONNECTING';
+    showStatusBanner('SSE disconnected — reconnecting in 4s');
+    setTimeout(connectSSE, 4000);
+  };
+}
+// ── Session sidebar ────────────────────────────────────────────────────────────
+let currentSessionId = null;
+    let currentSessionObj = null;
+let activeProjectFilter = '';
+function applyProjectFilter(val) {
+  activeProjectFilter = val;
+  refreshSessions();
+}
+async function refreshSessions() {
+  try {
+    const url = activeProjectFilter
+      ? `/api/mastermind/sessions?project=${encodeURIComponent(activeProjectFilter)}`
+      : '/api/mastermind/sessions';
+    const res = await fetch(url);
+    const sessions = await res.json();
+    // Populate project filter options
+    const sel = document.getElementById('proj-filter');
+    if (sel) {
+      const projects = [...new Set(sessions.map(s => s.project).filter(Boolean))];
+      const current = sel.value;
+      sel.innerHTML = '<option value="">ALL PROJECTS</option>' +
+        projects.map(p => {
+          const name = p.split('/').pop();
+          return `<option value="${p}" ${p===current?'selected':''}>${name}</option>`;
+        }).join('');
+    }
+    renderSessions(sessions);
+  } catch (_) {}
+}
+function renderSessions(sessions) {
+  const wrap = document.getElementById('sb-sessions');
+  const noSess = document.getElementById('sb-no-sessions');
+  if (!sessions || !sessions.length) {
+    if (noSess) noSess.style.display = 'block';
+    const items = wrap.querySelectorAll('.sess-item');
+    items.forEach(i => i.remove());
+    return;
+  }
+  if (noSess) noSess.style.display = 'none';
+  // Remove old items
+  wrap.querySelectorAll('.sess-item').forEach(el => el.remove());
+  sessions.forEach(s => {
+    const item = document.createElement('div');
+    item.className = 'sess-item' + (s.status === 'running' ? ' running' : '') + (s.id === currentSessionId ? ' active' : '');
+    const ts = new Date(s.ts).toLocaleTimeString([], {hour:'2-digit',minute:'2-digit',second:'2-digit'});
+    const date = new Date(s.ts).toLocaleDateString([], {month:'short',day:'numeric'});
+    const elapsed = s.endTs ? ((s.endTs - s.ts)/1000).toFixed(0)+'s' : (s.status==='running'?'RUNNING…':'?');
+    const projName = s.project ? s.project.split('/').pop() : '';
+    item.innerHTML = `
+      ${projName ? `<div class="sess-project">◈ ${projName}</div>` : ''}
+      <div class="sess-ts">${date} ${ts} · ${elapsed}</div>
+      <div class="sess-prompt">${s.prompt||'(no prompt)'}</div>
+      <div class="sess-badges">
+        <span class="sess-badge ${s.status==='running'?'running-badge':''}">${s.status||'?'}</span>
+        ${(s.domains||[]).slice(0,4).map(d=>`<span class="sess-badge">${d}</span>`).join('')}
+        ${(s.domains||[]).length>4?`<span class="sess-badge">+${s.domains.length-4}</span>`:''}
+        <a class="sess-trace-link" href="/api/mastermind/session/${s.id}/trace" target="_blank" title="View raw trace" onclick="event.stopPropagation()">trace↗</a>
+      </div>`;
+    item.addEventListener('click', () => {
+      wrap.querySelectorAll('.sess-item').forEach(x=>x.classList.remove('active'));
+      item.classList.add('active');
+      currentSessionId = s.id;
+      currentSessionObj = s;
+      openSessionDetail(s);
+      replaySessionGraph(s.events||[]);
+    });
+    wrap.appendChild(item);
+  });
+}
+// ── Detail panel ───────────────────────────────────────────────────────────────
+function openDomainDetail(d) {
+  const panel = document.getElementById('detail-panel');
+  document.getElementById('dp-emoji').textContent = d.emoji || '◈';
+  document.getElementById('dp-title').textContent = `DOMAIN · ${d.label}`;
+  const body = document.getElementById('dp-body');
+  // Gather events from current session for this domain
+  const sessEvts = (currentSessionObj && currentSessionObj.events) ? currentSessionObj.events : [];
+  const domEvts = sessEvts.filter(e => e.domain === d.domain || e.domain === (d.label||'').toLowerCase());
+  const spawnEvts = domEvts.filter(e => e.type === 'agent:spawn');
+  const artifacts = domEvts.flatMap(e => e.artifacts || []);
+  // Also collect child agent nodes
+  const agentNodes = [];
+  nodes.forEach(n => { if (n.parentId === d.id) agentNodes.push(n); });
+  body.innerHTML = `
+    <div class="dp-section">
+      <div class="dp-section-title">DOMAIN INFO</div>
+      <div class="dp-event"><span class="ev-type" style="color:${d.color}">${d.emoji||'◈'} ${d.label}</span></div>
+      ${d.cmd ? `<div class="dp-event">Command: <span style="color:#7080c0">${d.cmd}</span></div>` : ''}
+      <div class="dp-event">Status: <span style="color:${d.done?'#40e880':'#28c068'}">${d.done?'COMPLETE':'RUNNING'}</span></div>
+      <div class="dp-event">Agents spawned: <span style="color:${d.color}">${agentNodes.length}</span></div>
+    </div>
+    ${agentNodes.length > 0 ? `
+    <div class="dp-section">
+      <div class="dp-section-title">AGENTS</div>
+      ${agentNodes.map(a => `<div class="dp-event"><span class="ev-type" style="color:${a.color||d.color}">${a.emoji||'◈'} ${a.label}</span></div>`).join('')}
+    </div>` : ''}
+    ${spawnEvts.length > 0 ? `
+    <div class="dp-section">
+      <div class="dp-section-title">TASKS</div>
+      ${spawnEvts.map(e => `<div class="dp-event" style="color:#506080;font-size:8px;white-space:normal;word-break:break-word;line-height:1.5">${e.agent ? '<b>'+e.agent+'</b>: ' : ''}${(e.task||'').slice(0,120)}</div>`).join('')}
+    </div>` : ''}
+    ${artifacts.length > 0 ? `
+    <div class="dp-section">
+      <div class="dp-section-title">ARTIFACTS</div>
+      ${artifacts.map(a => `<div class="dp-artifact">📄 ${a}</div>`).join('')}
+    </div>` : ''}
+    ${domEvts.length > 0 ? `
+    <div class="dp-section">
+      <div class="dp-section-title">RECENT EVENTS</div>
+      ${domEvts.slice(-8).map(e => {
+        const ts = new Date(e.ts).toLocaleTimeString([],{hour:'2-digit',minute:'2-digit',second:'2-digit'});
+        return `<div class="dp-event"><span class="ev-ts">${ts}</span> <span class="ev-type" style="color:${d.color}">${e.type}</span>${e.cmd?' '+e.cmd:e.agent?' '+e.agent:''}</div>`;
+      }).join('')}
+    </div>` : ''}
+  `;
+  panel.classList.add('open');
+}
+async function openSessionDetail(s) {
+  const panel = document.getElementById('detail-panel');
+  document.getElementById('dp-emoji').textContent = '📋';
+  document.getElementById('dp-title').textContent = 'SESSION DETAIL';
+  const body = document.getElementById('dp-body');
+  body.innerHTML = '<div style="color:#303060;font-size:9px;padding:8px">Loading…</div>';
+  panel.classList.add('open');
+  try {
+    const res = await fetch(`/api/mastermind/session/${s.id}`);
+    const full = await res.json();
+    if (!full) { body.innerHTML = '<div style="color:#303060;font-size:9px">Session not found.</div>'; return; }
+    const ts = new Date(full.ts).toLocaleString();
+    const elapsed = full.endTs ? ((full.endTs - full.ts)/1000).toFixed(1)+'s' : 'running';
+    const evts = full.events || [];
+    const domainSet = full.domains || [];
+    body.innerHTML = `
+      <div class="dp-section">
+        <div class="dp-section-title">OVERVIEW</div>
+        <div class="dp-event">Started: <span style="color:#6060a0">${ts}</span></div>
+        <div class="dp-event">Duration: <span style="color:#6060a0">${elapsed}</span></div>
+        <div class="dp-event">Status: <span style="color:${full.status==='complete'?'#40e880':full.status==='running'?'#28c068':'#f87171'}">${full.status||'?'}</span></div>
+        <div class="dp-event">Domains: <span style="color:#8080c0">${domainSet.join(', ')||'—'}</span></div>
+      </div>
+      <div class="dp-section">
+        <div class="dp-section-title">PROMPT</div>
+        <div class="dp-event" style="color:oklch(58% 0.09 186);word-break:break-all;white-space:normal;line-height:1.6">${full.prompt||'—'}</div>
+      </div>
+      ${domainSet.length ? `
+      <div class="dp-section">
+        <div class="dp-section-title">ACTIVE DOMAINS</div>
+        ${domainSet.map(did => {
+          const color = DOMAIN_COLORS[did] || '#8080c0';
+          const emoji = DOMAIN_EMOJIS[did] || '◈';
+          const label = (did||'').toUpperCase();
+          return `<div class="dp-event"><span style="color:${color}">${emoji} ${label}</span></div>`;
+        }).join('')}
+      </div>` : ''}
+      <div class="dp-section">
+        <div class="dp-section-title">EVENT TIMELINE (${evts.length})</div>
+        ${evts.map(e => {
+          const et = new Date(e.ts).toLocaleTimeString([],{hour:'2-digit',minute:'2-digit',second:'2-digit'});
+          const color = e.domain ? (DOMAIN_COLORS[e.domain] || '#6060a0') : '#6060a0';
+          let detail = '';
+          if (e.type === 'session:start') detail = `<span style="color:#5050a0;font-size:8px;word-break:break-all">${e.prompt||''}</span>`;
+          else if (e.type === 'domain:dispatch') detail = `<span style="color:#5060a0;font-size:8px">${e.cmd||''}</span>`;
+          else if (e.type === 'agent:spawn') detail = `<span style="color:#507090;font-size:8px">agent: <b>${e.agent||''}</b> — ${(e.task||'').slice(0,50)}</span>`;
+          else if (e.type === 'intercom') detail = `<span style="color:#506070;font-size:8px">${e.from||'?'} → ${e.to||'?'}: ${e.msg||''}</span>`;
+          else if (e.type === 'domain:complete') {
+            const arts = (e.artifacts||[]).map(a=>`<span style="color:#407050;font-size:7px">📄 ${a}</span>`).join(' ');
+            detail = `<span style="color:#406050;font-size:8px">status: ${e.status||'?'}</span>${arts?' '+arts:''}`;
+          }
+          else if (e.type === 'session:complete') detail = `<span style="color:#405080;font-size:8px">domains: ${(e.domains||[]).join(', ')}</span>`;
+          return `<div class="dp-event" style="flex-direction:column;align-items:flex-start;gap:1px"><div><span class="ev-ts">${et}</span> <span class="ev-type" style="color:${color}">${e.type}</span>${e.domain?' <span style="color:#404060;font-size:8px">['+e.domain+']</span>':''}</div>${detail?'<div style="padding-left:4px">'+detail+'</div>':''}</div>`;
+        }).join('')}
+      </div>
+      <div class="dp-section">
+        <div class="dp-section-title">EXPORT</div>
+        <div style="display:flex;gap:6px;flex-wrap:wrap">
+          <a class="dp-export-btn" href="/api/mastermind/session/${full.id}/trace" target="_blank">📄 View Trace</a>
+          <button class="dp-export-btn" onclick="downloadSession('${full.id}')">⬇ Download JSON</button>
+        </div>
+      </div>
+    `;
+  } catch(err) {
+    body.innerHTML = `<div style="color:#a03030;font-size:9px">${err.message}</div>`;
+  }
+}
+function closeDetail() {
+  document.getElementById('detail-panel').classList.remove('open');
+  currentSessionId = null;
+  document.querySelectorAll('.sess-item').forEach(x=>x.classList.remove('active'));
+}
+async function downloadSession(id) {
+  const res = await fetch(`/api/mastermind/session/${id}`);
+  const data = await res.json();
+  const blob = new Blob([JSON.stringify(data, null, 2)], {type:'application/json'});
+  const a = document.createElement('a');
+  a.href = URL.createObjectURL(blob);
+  a.download = `${id}.json`;
+  a.click();
+  URL.revokeObjectURL(a.href);
+}
+// ── Live data polling for status bar ──────────────────────────────────────────
+async function pollStatus() {
+  try {
+    const res = await fetch('/api/data');
+    if (!res.ok) return;
+    const data = await res.json();
+    const active = !!data?.swarm?.activity?.swarm?.active;
+    const dot = document.getElementById('l-dot');
+    dot.classList.toggle('on', active);
+    document.getElementById('l-status').textContent = active ? 'LIVE' : 'IDLE';
+    const n = data?.swarm?.state?.agentPlan?.length || 0;
+    document.getElementById('l-agents').textContent = n + ' agent' + (n!==1?'s':'');
+    // Highlight last routed domain
+    const route = data?.hooks?.lastRoute || '';
+    if (route && !isMovieMode) {
+      const hit = DOMAINS.find(d => route.toLowerCase().includes(d.id));
+      if (hit) {
+        gsap.to(`#gr-${hit.id}`, { opacity:0.85, attr:{r:52}, duration:0.35 });
+        gsap.to(`#gr-${hit.id}`, { opacity:0.2, attr:{r:44}, duration:1.8, delay:0.35 });
+      }
+    }
+  } catch (_) {}
+}
+function showStatusBanner(msg) {
+  let b = document.getElementById('status-banner');
+  if (!b) {
+    b = document.createElement('div'); b.id = 'status-banner';
+    b.style.cssText = 'position:fixed;top:0;left:0;right:0;padding:5px 14px;background:oklch(24% 0.05 186);border-bottom:1px solid oklch(68% 0.18 186 / 0.35);color:oklch(70% 0.05 186);font-size:9px;letter-spacing:1.5px;text-align:center;z-index:9999;transition:opacity 0.5s;pointer-events:none;';
+    document.body.appendChild(b);
+  }
+  b.textContent = msg; b.style.opacity = '1';
+  clearTimeout(b._t); b._t = setTimeout(() => { b.style.opacity = '0'; }, 5000);
+}
+// ── Bootstrap ──────────────────────────────────────────────────────────────────
+connectSSE();
+refreshSessions();
+pollStatus();
+fetch('/api/git-user').then(r=>r.json()).then(u=>{
+  if (u.name) document.getElementById('git-user-name').textContent = u.name;
+  if (u.cwd) {
+    const parts = u.cwd.replace(/\\/g, '/').split('/');
+    document.getElementById('git-cwd-name').textContent = parts.slice(-2).join('/');
+    document.getElementById('git-cwd-name').title = u.cwd;
+  }
+}).catch(()=>{});
+setInterval(pollStatus, 4000);
+setInterval(refreshSessions, 8000);
+// Set initial live mode banner
+document.getElementById('mode-banner').classList.add('live-mode');
+</script>
+</body>
+</html>