npm - swarm-engine - Versions diffs - 1.41.0 → 1.51.0 - Mend

swarm-engine 1.41.0 → 1.51.0

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 (141) hide show

package/README.md +145 -42
package/agents/implementer.md +1 -14
package/agents/orchestrator.md +127 -246
package/agents/reviewer.md +3 -18
package/dist/cli/commands/agents.js +13 -1
package/dist/cli/commands/agents.js.map +1 -1
package/dist/cli/commands/dashboard.d.ts +3 -0
package/dist/cli/commands/dashboard.d.ts.map +1 -0
package/dist/cli/commands/dashboard.js +43 -0
package/dist/cli/commands/dashboard.js.map +1 -0
package/dist/cli/commands/orchestrate.d.ts.map +1 -1
package/dist/cli/commands/orchestrate.js +17 -0
package/dist/cli/commands/orchestrate.js.map +1 -1
package/dist/cli/commands/run.d.ts.map +1 -1
package/dist/cli/commands/run.js +20 -1
package/dist/cli/commands/run.js.map +1 -1
package/dist/cli/commands/status.d.ts +1 -0
package/dist/cli/commands/status.d.ts.map +1 -1
package/dist/cli/commands/status.js +5 -2
package/dist/cli/commands/status.js.map +1 -1
package/dist/core/event-bus.d.ts.map +1 -1
package/dist/core/event-bus.js +4 -1
package/dist/core/event-bus.js.map +1 -1
package/dist/core/types.d.ts +26 -1
package/dist/core/types.d.ts.map +1 -1
package/dist/core/types.js +4 -0
package/dist/core/types.js.map +1 -1
package/dist/index.d.ts +18 -0
package/dist/index.d.ts.map +1 -1
package/dist/index.js +12 -0
package/dist/index.js.map +1 -1
package/dist/memory/index.js +2 -2
package/dist/memory/index.js.map +1 -1
package/dist/runtime/acon.d.ts +61 -0
package/dist/runtime/acon.d.ts.map +1 -0
package/dist/runtime/acon.js +266 -0
package/dist/runtime/acon.js.map +1 -0
package/dist/runtime/agent-runner.d.ts +8 -0
package/dist/runtime/agent-runner.d.ts.map +1 -1
package/dist/runtime/agent-runner.js +93 -4
package/dist/runtime/agent-runner.js.map +1 -1
package/dist/runtime/backends/claude.d.ts +1 -0
package/dist/runtime/backends/claude.d.ts.map +1 -1
package/dist/runtime/backends/claude.js +50 -2
package/dist/runtime/backends/claude.js.map +1 -1
package/dist/runtime/backends/codex.d.ts.map +1 -1
package/dist/runtime/backends/codex.js +4 -0
package/dist/runtime/backends/codex.js.map +1 -1
package/dist/runtime/backends/gemini.d.ts.map +1 -1
package/dist/runtime/backends/gemini.js +4 -0
package/dist/runtime/backends/gemini.js.map +1 -1
package/dist/runtime/benefits.d.ts +250 -0
package/dist/runtime/benefits.d.ts.map +1 -0
package/dist/runtime/benefits.js +775 -0
package/dist/runtime/benefits.js.map +1 -0
package/dist/runtime/cache-optimizer.d.ts +7 -3
package/dist/runtime/cache-optimizer.d.ts.map +1 -1
package/dist/runtime/cache-optimizer.js +11 -7
package/dist/runtime/cache-optimizer.js.map +1 -1
package/dist/runtime/compaction.d.ts +6 -1
package/dist/runtime/compaction.d.ts.map +1 -1
package/dist/runtime/compaction.js +39 -2
package/dist/runtime/compaction.js.map +1 -1
package/dist/runtime/compactor.d.ts +90 -0
package/dist/runtime/compactor.d.ts.map +1 -0
package/dist/runtime/compactor.js +418 -0
package/dist/runtime/compactor.js.map +1 -0
package/dist/runtime/context-decay.d.ts +45 -0
package/dist/runtime/context-decay.d.ts.map +1 -0
package/dist/runtime/context-decay.js +149 -0
package/dist/runtime/context-decay.js.map +1 -0
package/dist/runtime/cost-model.d.ts.map +1 -1
package/dist/runtime/cost-model.js +20 -17
package/dist/runtime/cost-model.js.map +1 -1
package/dist/runtime/engine.d.ts +2 -0
package/dist/runtime/engine.d.ts.map +1 -1
package/dist/runtime/engine.js +113 -3
package/dist/runtime/engine.js.map +1 -1
package/dist/runtime/graph-discovery.js +2 -2
package/dist/runtime/graph-discovery.js.map +1 -1
package/dist/runtime/graph-trajectory.js +3 -3
package/dist/runtime/graph-trajectory.js.map +1 -1
package/dist/runtime/lsp.d.ts.map +1 -1
package/dist/runtime/lsp.js +4 -0
package/dist/runtime/lsp.js.map +1 -1
package/dist/runtime/mcp.d.ts +1 -0
package/dist/runtime/mcp.d.ts.map +1 -1
package/dist/runtime/mcp.js +38 -0
package/dist/runtime/mcp.js.map +1 -1
package/dist/runtime/output-schemas.d.ts +21 -0
package/dist/runtime/output-schemas.d.ts.map +1 -0
package/dist/runtime/output-schemas.js +252 -0
package/dist/runtime/output-schemas.js.map +1 -0
package/dist/runtime/output-summarizer.d.ts +45 -0
package/dist/runtime/output-summarizer.d.ts.map +1 -0
package/dist/runtime/output-summarizer.js +171 -0
package/dist/runtime/output-summarizer.js.map +1 -0
package/dist/runtime/plugins.d.ts +5 -1
package/dist/runtime/plugins.d.ts.map +1 -1
package/dist/runtime/plugins.js +14 -2
package/dist/runtime/plugins.js.map +1 -1
package/dist/runtime/prompt-tier.d.ts +33 -0
package/dist/runtime/prompt-tier.d.ts.map +1 -0
package/dist/runtime/prompt-tier.js +105 -0
package/dist/runtime/prompt-tier.js.map +1 -0
package/dist/runtime/sharing.js +2 -1
package/dist/runtime/sharing.js.map +1 -1
package/dist/runtime/stats.d.ts +2 -0
package/dist/runtime/stats.d.ts.map +1 -1
package/dist/runtime/stats.js +17 -3
package/dist/runtime/stats.js.map +1 -1
package/dist/utils/project-config.d.ts +20 -0
package/dist/utils/project-config.d.ts.map +1 -1
package/dist/utils/project-config.js +46 -1
package/dist/utils/project-config.js.map +1 -1
package/dist/utils/redact.d.ts.map +1 -1
package/dist/utils/redact.js +5 -1
package/dist/utils/redact.js.map +1 -1
package/dist/web/bridge.d.ts +47 -0
package/dist/web/bridge.d.ts.map +1 -0
package/dist/web/bridge.js +267 -0
package/dist/web/bridge.js.map +1 -0
package/dist/web/graph-api.d.ts +19 -0
package/dist/web/graph-api.d.ts.map +1 -0
package/dist/web/graph-api.js +157 -0
package/dist/web/graph-api.js.map +1 -0
package/dist/web/index.d.ts +21 -0
package/dist/web/index.d.ts.map +1 -0
package/dist/web/index.js +38 -0
package/dist/web/index.js.map +1 -0
package/dist/web/public/index.html +1304 -0
package/dist/web/public/public/index.html +1307 -0
package/dist/web/server.d.ts +24 -0
package/dist/web/server.d.ts.map +1 -0
package/dist/web/server.js +113 -0
package/dist/web/server.js.map +1 -0
package/dist/web/tray.d.ts +23 -0
package/dist/web/tray.d.ts.map +1 -0
package/dist/web/tray.js +205 -0
package/dist/web/tray.js.map +1 -0
package/package.json +1 -1

package/dist/web/public/index.html ADDED Viewed

@@ -0,0 +1,1304 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Swarm Engine — Live Dashboard</title>
+<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=Inconsolata:wght@300;400;500;600;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400&display=swap" rel="stylesheet">
+<style>
+/* ─── Reset & Base ──────────────────────────────────────────────── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+:root {
+  /* OKLCH surfaces — warm tinted, never pure black */
+  --surface-0: oklch(0.13 0.008 55);
+  --surface-1: oklch(0.16 0.008 55);
+  --surface-2: oklch(0.19 0.007 55);
+  --surface-3: oklch(0.23 0.006 55);
+  --surface-hover: oklch(0.25 0.008 55);
+  /* Text */
+  --text-primary: oklch(0.92 0.01 55);
+  --text-secondary: oklch(0.65 0.008 55);
+  --text-muted: oklch(0.48 0.006 55);
+  /* Brand: warm amber — NOT cyan, NOT purple, NOT neon */
+  --accent: oklch(0.75 0.14 65);
+  --accent-dim: oklch(0.55 0.10 65);
+  --accent-bg: oklch(0.20 0.03 65);
+  /* Status palette */
+  --status-running: oklch(0.78 0.15 85);
+  --status-done: oklch(0.72 0.16 155);
+  --status-error: oklch(0.65 0.20 25);
+  --status-waiting: oklch(0.42 0.005 55);
+  --status-spawning: oklch(0.70 0.12 85);
+  --status-timeout: oklch(0.60 0.15 25);
+  /* Graph node colors */
+  --node-orchestration: oklch(0.75 0.14 65);
+  --node-phase: oklch(0.68 0.12 200);
+  --node-agent: oklch(0.72 0.14 140);
+  --node-file: oklch(0.55 0.01 55);
+  --node-pattern: oklch(0.70 0.12 50);
+  --node-error: oklch(0.65 0.20 25);
+  --node-heuristic: oklch(0.55 0.06 280);
+  /* Border */
+  --border: oklch(0.25 0.005 55);
+  --border-subtle: oklch(0.20 0.005 55);
+  /* Spacing scale: 4pt */
+  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
+  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
+  /* Type */
+  --font-body: 'Inconsolata', monospace;
+  --font-display: 'Source Serif 4', serif;
+  --font-size-xs: 0.6875rem;
+  --font-size-sm: 0.8125rem;
+  --font-size-base: 0.9375rem;
+  --font-size-lg: 1.125rem;
+  --font-size-xl: 1.5rem;
+  --font-size-2xl: 2rem;
+}
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+html { font-size: 16px; }
+body {
+  font-family: var(--font-body);
+  font-size: var(--font-size-base);
+  font-weight: 400;
+  color: var(--text-primary);
+  background: var(--surface-0);
+  line-height: 1.5;
+  min-height: 100vh;
+  -webkit-font-smoothing: antialiased;
+}
+/* ─── Layout ────────────────────────────────────────────────────── */
+.app {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  min-height: 100vh;
+}
+.header {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: start;
+  padding: var(--sp-5) var(--sp-6) var(--sp-4);
+  border-bottom: 1px solid var(--border);
+  gap: var(--sp-5);
+}
+.header-left { display: flex; flex-direction: column; gap: var(--sp-2); }
+.orch-name {
+  font-family: var(--font-display);
+  font-size: var(--font-size-xl);
+  font-weight: 600;
+  color: var(--text-primary);
+  letter-spacing: -0.02em;
+  line-height: 1.2;
+}
+.header-meta {
+  display: flex;
+  gap: var(--sp-5);
+  align-items: center;
+  flex-wrap: wrap;
+}
+.meta-item {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+}
+.meta-label { color: var(--text-muted); }
+.meta-value { color: var(--text-secondary); font-weight: 500; }
+.meta-value.accent { color: var(--accent); }
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-5);
+}
+.conn-status {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  font-size: var(--font-size-xs);
+  color: var(--text-muted);
+}
+.conn-dot {
+  width: 7px; height: 7px;
+  border-radius: 50%;
+  background: var(--status-done);
+  flex-shrink: 0;
+}
+.conn-dot.connected { background: var(--status-done); }
+.conn-dot.disconnected { background: var(--status-error); }
+.conn-dot.reconnecting {
+  background: var(--status-running);
+  animation: pulse 1.5s ease-in-out infinite;
+}
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.3; }
+}
+/* ─── Tabs ──────────────────────────────────────────────────────── */
+.tab-bar {
+  display: flex;
+  gap: 0;
+  padding: 0 var(--sp-6);
+  border-bottom: 1px solid var(--border);
+  background: var(--surface-0);
+}
+.tab-btn {
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  padding: var(--sp-3) var(--sp-5);
+  font-family: var(--font-body);
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: color 0.15s ease-out, border-color 0.15s ease-out;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+}
+.tab-btn:hover { color: var(--text-secondary); }
+.tab-btn.active {
+  color: var(--accent);
+  border-bottom-color: var(--accent);
+}
+/* ─── Tab Panels ────────────────────────────────────────────────── */
+.tab-panels { overflow: hidden; position: relative; }
+.tab-panel {
+  display: none;
+  height: 100%;
+}
+.tab-panel.active { display: grid; }
+/* ─── Activity Tab ──────────────────────────────────────────────── */
+.activity-panel {
+  grid-template-rows: 1fr auto;
+  overflow: hidden;
+}
+.phases-scroll {
+  overflow-y: auto;
+  padding: var(--sp-5) var(--sp-6);
+  scrollbar-width: thin;
+  scrollbar-color: var(--surface-3) transparent;
+}
+.phases-empty {
+  color: var(--text-muted);
+  font-size: var(--font-size-sm);
+  padding: var(--sp-7) 0;
+}
+/* Phase */
+.phase {
+  margin-bottom: var(--sp-5);
+}
+.phase:last-child { margin-bottom: 0; }
+.phase-header {
+  display: grid;
+  grid-template-columns: auto 1fr auto auto;
+  align-items: center;
+  gap: var(--sp-3);
+  padding-bottom: var(--sp-2);
+}
+.phase-indicator {
+  width: 6px; height: 6px;
+  border-radius: 50%;
+  background: var(--status-waiting);
+  flex-shrink: 0;
+}
+.phase-indicator.running { background: var(--status-running); animation: pulse 1.5s ease-in-out infinite; }
+.phase-indicator.completed { background: var(--status-done); }
+.phase-indicator.failed { background: var(--status-error); }
+.phase-indicator.skipped { background: var(--text-muted); }
+.phase-name {
+  font-weight: 600;
+  font-size: var(--font-size-base);
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.phase-agents-count {
+  font-size: var(--font-size-xs);
+  color: var(--text-muted);
+}
+.phase-elapsed {
+  font-size: var(--font-size-xs);
+  color: var(--text-muted);
+  font-variant-numeric: tabular-nums;
+}
+/* Agent rows */
+.agents-list {
+  display: grid;
+  gap: var(--sp-1);
+  padding-left: var(--sp-4);
+}
+.agent-row {
+  display: grid;
+  grid-template-columns: var(--sp-4) minmax(100px, 180px) minmax(60px, 90px) minmax(60px, 80px) minmax(50px, 70px) 1fr;
+  align-items: center;
+  gap: var(--sp-3);
+  padding: var(--sp-1) var(--sp-2);
+  font-size: var(--font-size-sm);
+  border-radius: 3px;
+  transition: background 0.1s ease-out;
+}
+.agent-row:hover { background: var(--surface-hover); }
+.agent-dot {
+  width: 5px; height: 5px;
+  border-radius: 50%;
+  justify-self: center;
+}
+.agent-dot.waiting { background: var(--status-waiting); }
+.agent-dot.spawning { background: var(--status-spawning); animation: pulse 1s ease-in-out infinite; }
+.agent-dot.running { background: var(--status-running); animation: pulse 1.2s ease-in-out infinite; }
+.agent-dot.done { background: var(--status-done); }
+.agent-dot.error { background: var(--status-error); }
+.agent-dot.timeout { background: var(--status-timeout); }
+.agent-name {
+  color: var(--text-primary);
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.agent-type {
+  color: var(--text-muted);
+  font-size: var(--font-size-xs);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.agent-model {
+  color: var(--text-muted);
+  font-size: var(--font-size-xs);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.agent-tokens {
+  color: var(--text-muted);
+  font-size: var(--font-size-xs);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+.agent-detail {
+  color: var(--text-muted);
+  font-size: var(--font-size-xs);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 75ch;
+}
+/* ─── Event Feed ────────────────────────────────────────────────── */
+.event-feed {
+  border-top: 1px solid var(--border);
+  background: var(--surface-1);
+  max-height: 200px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--surface-3) transparent;
+}
+.event-feed-header {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: var(--surface-1);
+  padding: var(--sp-2) var(--sp-6);
+  font-size: var(--font-size-xs);
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-weight: 600;
+  border-bottom: 1px solid var(--border-subtle);
+}
+.event-row {
+  display: grid;
+  grid-template-columns: 70px 160px auto;
+  gap: var(--sp-3);
+  padding: 2px var(--sp-6);
+  font-size: var(--font-size-xs);
+  line-height: 1.6;
+}
+.event-time { color: var(--text-muted); font-variant-numeric: tabular-nums; }
+.event-type { color: var(--accent-dim); }
+.event-source { color: var(--text-secondary); }
+/* ─── Graph Tab ─────────────────────────────────────────────────── */
+.graph-panel {
+  grid-template-rows: auto 1fr;
+  overflow: hidden;
+}
+.graph-toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-4);
+  padding: var(--sp-3) var(--sp-6);
+  border-bottom: 1px solid var(--border-subtle);
+}
+.graph-btn {
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  color: var(--text-secondary);
+  font-family: var(--font-body);
+  font-size: var(--font-size-xs);
+  padding: var(--sp-1) var(--sp-3);
+  border-radius: 3px;
+  cursor: pointer;
+  transition: background 0.1s ease-out, color 0.1s ease-out;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  font-weight: 500;
+}
+.graph-btn:hover { background: var(--surface-3); color: var(--text-primary); }
+.graph-stats {
+  font-size: var(--font-size-xs);
+  color: var(--text-muted);
+  margin-left: auto;
+}
+.graph-legend {
+  display: flex;
+  gap: var(--sp-4);
+  font-size: var(--font-size-xs);
+  color: var(--text-muted);
+}
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-1);
+}
+.legend-dot {
+  width: 6px; height: 6px;
+  border-radius: 50%;
+}
+.graph-container {
+  position: relative;
+  overflow: hidden;
+  background: var(--surface-0);
+}
+.graph-container svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+.graph-tooltip {
+  position: absolute;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  padding: var(--sp-2) var(--sp-3);
+  font-size: var(--font-size-xs);
+  color: var(--text-secondary);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.12s ease-out;
+  max-width: 280px;
+  z-index: 10;
+}
+.graph-tooltip.visible { opacity: 1; }
+.graph-tooltip dt { color: var(--text-muted); margin-top: var(--sp-1); }
+.graph-tooltip dt:first-child { margin-top: 0; }
+.graph-tooltip dd { color: var(--text-primary); font-weight: 500; }
+/* ─── Entrance animation ────────────────────────────────────────── */
+@keyframes fadeSlideIn {
+  from { opacity: 0; transform: translateY(6px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.phase { animation: fadeSlideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) both; }
+.phase:nth-child(1) { animation-delay: 0.04s; }
+.phase:nth-child(2) { animation-delay: 0.08s; }
+.phase:nth-child(3) { animation-delay: 0.12s; }
+.phase:nth-child(4) { animation-delay: 0.16s; }
+.phase:nth-child(5) { animation-delay: 0.20s; }
+.phase:nth-child(6) { animation-delay: 0.24s; }
+.agent-row { animation: fadeSlideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) both; }
+/* ─── Orch status badge ─────────────────────────────────────────── */
+.orch-status {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sp-2);
+  padding: 2px var(--sp-3);
+  font-size: var(--font-size-xs);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  border-radius: 2px;
+}
+.orch-status.pending { color: var(--text-muted); background: var(--surface-2); }
+.orch-status.running { color: var(--status-running); background: oklch(0.20 0.02 85); }
+.orch-status.completed { color: var(--status-done); background: oklch(0.20 0.03 155); }
+.orch-status.failed { color: var(--status-error); background: oklch(0.20 0.03 25); }
+</style>
+</head>
+<body>
+<div class="app">
+  <!-- ─── Header ─────────────────────────────────────────────── -->
+  <div class="header">
+    <div class="header-left">
+      <div class="orch-name" id="orchName">Waiting for orchestration...</div>
+      <div class="header-meta">
+        <div class="meta-item">
+          <span class="meta-label">Pattern</span>
+          <span class="meta-value" id="orchPattern">—</span>
+        </div>
+        <span class="orch-status pending" id="orchStatus">pending</span>
+        <div class="meta-item">
+          <span class="meta-label">Elapsed</span>
+          <span class="meta-value accent" id="orchElapsed">0s</span>
+        </div>
+        <div class="meta-item">
+          <span class="meta-label">Tokens</span>
+          <span class="meta-value" id="orchTokens">0</span>
+        </div>
+        <div class="meta-item">
+          <span class="meta-label">Cost</span>
+          <span class="meta-value" id="orchCost">$0.00</span>
+        </div>
+      </div>
+    </div>
+    <div class="header-right">
+      <div class="conn-status">
+        <span class="conn-dot" id="connDot"></span>
+        <span id="connLabel">connecting</span>
+      </div>
+    </div>
+  </div>
+  <!-- ─── Tab Bar ────────────────────────────────────────────── -->
+  <div class="tab-bar" role="tablist">
+    <button class="tab-btn active" id="tab-activity" data-tab="activity" role="tab" aria-selected="true" aria-controls="panel-activity">Activity</button>
+    <button class="tab-btn" id="tab-graph" data-tab="graph" role="tab" aria-selected="false" aria-controls="panel-graph">Graph</button>
+  </div>
+  <!-- ─── Tab Panels ─────────────────────────────────────────── -->
+  <div class="tab-panels">
+    <!-- Activity -->
+    <div class="tab-panel activity-panel active" id="panel-activity" role="tabpanel" aria-labelledby="tab-activity">
+      <div class="phases-scroll" id="phasesContainer">
+        <div class="phases-empty">Waiting for orchestration events...</div>
+      </div>
+      <div class="event-feed" id="eventFeed">
+        <div class="event-feed-header">Event Log</div>
+      </div>
+    </div>
+    <!-- Graph -->
+    <div class="tab-panel graph-panel" id="panel-graph" role="tabpanel" aria-labelledby="tab-graph">
+      <div class="graph-toolbar">
+        <button class="graph-btn" id="graphRefresh">Refresh</button>
+        <button class="graph-btn" id="graphReset">Reset Zoom</button>
+        <div class="graph-legend">
+          <span class="legend-item"><span class="legend-dot" style="background:var(--node-orchestration)"></span>orchestration</span>
+          <span class="legend-item"><span class="legend-dot" style="background:var(--node-phase)"></span>phase</span>
+          <span class="legend-item"><span class="legend-dot" style="background:var(--node-agent)"></span>agent</span>
+          <span class="legend-item"><span class="legend-dot" style="background:var(--node-file)"></span>file</span>
+          <span class="legend-item"><span class="legend-dot" style="background:var(--node-pattern)"></span>pattern</span>
+          <span class="legend-item"><span class="legend-dot" style="background:var(--node-error)"></span>error</span>
+        </div>
+        <div class="graph-stats" id="graphStats">—</div>
+      </div>
+      <div class="graph-container" id="graphContainer">
+        <div class="graph-tooltip" id="graphTooltip"></div>
+      </div>
+    </div>
+  </div>
+</div>
+<script src="https://d3js.org/d3.v7.min.js"></script>
+<script>
+/* ═══════════════════════════════════════════════════════════════════
+   Swarm Engine — Live Web Dashboard
+   ═══════════════════════════════════════════════════════════════════ */
+(function() {
+'use strict';
+// ─── State ─────────────────────────────────────────────────────────
+const state = {
+  orchestrationName: 'Waiting for orchestration...',
+  pattern: '',
+  status: 'pending',
+  startedAt: null,
+  phases: [],
+  usage: { tokens: 0, cost: 0, turns: 0, toolCalls: 0 },
+};
+const events = [];       // last 50 events
+const MAX_EVENTS = 50;
+// ─── DOM refs ──────────────────────────────────────────────────────
+const $orchName = document.getElementById('orchName');
+const $orchPattern = document.getElementById('orchPattern');
+const $orchStatus = document.getElementById('orchStatus');
+const $orchElapsed = document.getElementById('orchElapsed');
+const $orchTokens = document.getElementById('orchTokens');
+const $orchCost = document.getElementById('orchCost');
+const $connDot = document.getElementById('connDot');
+const $connLabel = document.getElementById('connLabel');
+const $phasesContainer = document.getElementById('phasesContainer');
+const $eventFeed = document.getElementById('eventFeed');
+const $graphContainer = document.getElementById('graphContainer');
+const $graphStats = document.getElementById('graphStats');
+const $graphTooltip = document.getElementById('graphTooltip');
+// ─── Utilities ─────────────────────────────────────────────────────
+function formatNum(n) {
+  if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + 'M';
+  if (n >= 1_000) return (n / 1_000).toFixed(1) + 'k';
+  return String(n);
+}
+function formatElapsed(ms) {
+  if (ms < 0) ms = 0;
+  const s = Math.floor(ms / 1000);
+  if (s < 60) return s + 's';
+  const m = Math.floor(s / 60);
+  const rem = s % 60;
+  if (m < 60) return m + 'm ' + rem + 's';
+  const h = Math.floor(m / 60);
+  return h + 'h ' + (m % 60) + 'm';
+}
+function formatTime(iso) {
+  try {
+    const d = new Date(iso);
+    return d.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+  } catch { return '—'; }
+}
+function escHtml(s) {
+  const d = document.createElement('div');
+  d.textContent = s;
+  return d.innerHTML;
+}
+// ─── Tab Switching ─────────────────────────────────────────────────
+let activeTab = 'activity';
+document.querySelectorAll('.tab-btn').forEach(btn => {
+  btn.addEventListener('click', () => {
+    if (btn.dataset.tab === activeTab) return;
+    const prevBtn = document.querySelector('.tab-btn.active');
+    prevBtn.classList.remove('active');
+    prevBtn.setAttribute('aria-selected', 'false');
+    btn.classList.add('active');
+    btn.setAttribute('aria-selected', 'true');
+    document.querySelector('.tab-panel.active').classList.remove('active');
+    document.getElementById('panel-' + btn.dataset.tab).classList.add('active');
+    activeTab = btn.dataset.tab;
+    if (activeTab === 'graph') fetchGraph();
+  });
+});
+// ─── Elapsed Timer ─────────────────────────────────────────────────
+setInterval(() => {
+  if (state.startedAt && state.status === 'running') {
+    $orchElapsed.textContent = formatElapsed(Date.now() - new Date(state.startedAt).getTime());
+  }
+}, 1000);
+// ═══════════════════════════════════════════════════════════════════
+// WebSocket Connection
+// ═══════════════════════════════════════════════════════════════════
+let ws = null;
+let reconnectDelay = 1000;
+let reconnectTimer = null;
+function setConnStatus(status) {
+  $connDot.className = 'conn-dot';
+  if (status === 'connected') {
+    $connDot.classList.add('connected');
+    $connLabel.textContent = 'connected';
+  } else if (status === 'disconnected') {
+    $connDot.classList.add('disconnected');
+    $connLabel.textContent = 'disconnected';
+  } else {
+    $connDot.classList.add('reconnecting');
+    $connLabel.textContent = 'reconnecting...';
+  }
+}
+function connect() {
+  setConnStatus('reconnecting');
+  const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+  ws = new WebSocket(proto + '//' + location.host);
+  ws.onopen = () => {
+    reconnectDelay = 1000;
+    setConnStatus('connected');
+  };
+  ws.onmessage = (evt) => {
+    try {
+      const msg = JSON.parse(evt.data);
+      if (msg.type === 'snapshot') {
+        applySnapshot(msg.data);
+      } else if (msg.type === 'event') {
+        handleEvent(msg.data);
+      }
+    } catch (e) {
+      console.warn('WS parse error:', e);
+    }
+  };
+  ws.onclose = () => {
+    setConnStatus('disconnected');
+    scheduleReconnect();
+  };
+  ws.onerror = () => {
+    ws.close();
+  };
+}
+function scheduleReconnect() {
+  if (reconnectTimer) return;
+  setConnStatus('reconnecting');
+  reconnectTimer = setTimeout(() => {
+    reconnectTimer = null;
+    reconnectDelay = Math.min(reconnectDelay * 2, 30000);
+    connect();
+  }, reconnectDelay);
+}
+// ─── Snapshot ──────────────────────────────────────────────────────
+function applySnapshot(data) {
+  state.orchestrationName = data.orchestrationName || 'Orchestration';
+  state.pattern = data.pattern || '';
+  state.status = data.status || 'pending';
+  state.startedAt = data.startedAt || null;
+  state.phases = (data.phases || []).map(p => ({
+    name: p.name,
+    status: p.status || 'pending',
+    agents: (p.agents || []).map(a => ({ ...a })),
+    startedAt: p.startedAt || null,
+    completedAt: p.completedAt || null,
+  }));
+  state.usage = { ...state.usage, ...(data.usage || {}) };
+  renderAll();
+}
+// ─── Event Handling ────────────────────────────────────────────────
+function handleEvent(evt) {
+  // Push to event log
+  events.push(evt);
+  if (events.length > MAX_EVENTS) events.shift();
+  const data = evt.data || {};
+  const type = evt.type;
+  switch (type) {
+    case 'orchestration:start':
+      state.orchestrationName = data.name || 'Orchestration';
+      state.pattern = data.pattern || '';
+      state.status = 'running';
+      state.startedAt = evt.timestamp || new Date().toISOString();
+      if (state.phases.length === 0 && data.phaseCount > 0) {
+        for (let i = 0; i < data.phaseCount; i++) {
+          state.phases.push(makePhase('Phase ' + (i + 1)));
+        }
+      }
+      break;
+    case 'orchestration:phase-start': {
+      const phase = findOrCreatePhase(data.phase || '');
+      phase.status = 'running';
+      phase.startedAt = evt.timestamp || new Date().toISOString();
+      if (phase.agents.length === 0 && data.agentCount > 0) {
+        for (let i = 0; i < data.agentCount; i++) {
+          phase.agents.push(makeAgent('agent-' + (i + 1)));
+        }
+      }
+      break;
+    }
+    case 'orchestration:phase-complete': {
+      const phase = findPhase(data.phase || '');
+      if (phase) {
+        phase.status = data.status === 'failed' ? 'failed' : 'completed';
+        phase.completedAt = evt.timestamp || new Date().toISOString();
+      }
+      if (data.usage) {
+        state.usage.tokens += data.usage.totalTokens || 0;
+        state.usage.cost += data.usage.costUsd || 0;
+        state.usage.turns += data.usage.turns || 0;
+        state.usage.toolCalls += data.usage.toolCalls || 0;
+      }
+      break;
+    }
+    case 'orchestration:complete':
+      state.status = 'completed';
+      break;
+    case 'orchestration:failed':
+      state.status = 'failed';
+      break;
+    case 'agent:spawning': {
+      const agent = findOrCreateAgent(data);
+      agent.status = 'spawning';
+      break;
+    }
+    case 'agent:running': {
+      const agent = findOrCreateAgent(data);
+      agent.status = 'running';
+      if (data.backend) agent.backend = data.backend;
+      if (data.task) agent.detail = String(data.task).slice(0, 120);
+      break;
+    }
+    case 'agent:idle': {
+      const agent = findOrCreateAgent(data);
+      agent.status = 'done';
+      if (data.usage) agent.tokens = data.usage.totalTokens || 0;
+      if (data.result && data.result.filesTouched) {
+        const files = data.result.filesTouched;
+        agent.detail = files.length > 0 ? files.length + ' files' : '';
+      }
+      break;
+    }
+    case 'agent:error': {
+      const agent = findOrCreateAgent(data);
+      agent.status = 'error';
+      agent.detail = String(data.error || 'unknown error').slice(0, 80);
+      break;
+    }
+    case 'agent:timeout': {
+      const agent = findOrCreateAgent(data);
+      agent.status = 'timeout';
+      agent.detail = 'timed out';
+      break;
+    }
+  }
+  renderAll();
+}
+// ─── State Helpers ─────────────────────────────────────────────────
+function makePhase(name) {
+  return { name, status: 'pending', agents: [], startedAt: null, completedAt: null };
+}
+function makeAgent(name) {
+  return { id: '', name, type: '', model: '', backend: '', status: 'waiting', tokens: 0, detail: '' };
+}
+function findPhase(name) {
+  return state.phases.find(p => p.name === name);
+}
+function findOrCreatePhase(name) {
+  let phase = state.phases.find(p => p.name === name);
+  if (!phase) {
+    // Try to fill an unnamed placeholder
+    phase = state.phases.find(p => p.name.startsWith('Phase ') && p.status === 'pending');
+    if (phase) {
+      phase.name = name;
+    } else {
+      phase = makePhase(name);
+      state.phases.push(phase);
+    }
+  }
+  return phase;
+}
+function findOrCreateAgent(data) {
+  const agentId = data.agentId || '';
+  const agentType = data.agentType || '';
+  // Search across all phases
+  for (const phase of state.phases) {
+    const existing = phase.agents.find(a => a.id === agentId && agentId !== '');
+    if (existing) return existing;
+  }
+  // Find the running phase
+  const runningPhase = state.phases.find(p => p.status === 'running');
+  if (runningPhase) {
+    // Fill a waiting slot
+    const slot = runningPhase.agents.find(a => a.status === 'waiting' && a.id === '');
+    if (slot) {
+      slot.id = agentId;
+      slot.name = agentType || slot.name;
+      slot.type = agentType;
+      return slot;
+    }
+    const agent = { id: agentId, name: agentType, type: agentType, model: data.model || '', backend: data.backend || '', status: 'waiting', tokens: 0, detail: '' };
+    runningPhase.agents.push(agent);
+    return agent;
+  }
+  // Last phase fallback
+  const last = state.phases[state.phases.length - 1];
+  if (last) {
+    const agent = { id: agentId, name: agentType, type: agentType, model: data.model || '', backend: data.backend || '', status: 'waiting', tokens: 0, detail: '' };
+    last.agents.push(agent);
+    return agent;
+  }
+  // No phases — create one
+  const phase = makePhase('Phase 1');
+  phase.status = 'running';
+  phase.startedAt = new Date().toISOString();
+  state.phases.push(phase);
+  const agent = { id: agentId, name: agentType, type: agentType, model: data.model || '', backend: data.backend || '', status: 'waiting', tokens: 0, detail: '' };
+  phase.agents.push(agent);
+  return agent;
+}
+// ═══════════════════════════════════════════════════════════════════
+// Rendering — Activity Tab
+// ═══════════════════════════════════════════════════════════════════
+let renderScheduled = false;
+function renderAll() {
+  if (renderScheduled) return;
+  renderScheduled = true;
+  requestAnimationFrame(() => {
+    renderScheduled = false;
+    renderHeader();
+    renderPhases();
+    renderEvents();
+  });
+}
+function renderHeader() {
+  $orchName.textContent = state.orchestrationName;
+  $orchPattern.textContent = state.pattern || '—';
+  $orchStatus.textContent = state.status;
+  $orchStatus.className = 'orch-status ' + state.status;
+  if (state.startedAt) {
+    $orchElapsed.textContent = formatElapsed(Date.now() - new Date(state.startedAt).getTime());
+  }
+  $orchTokens.textContent = formatNum(state.usage.tokens);
+  $orchCost.textContent = '$' + state.usage.cost.toFixed(2);
+}
+function renderPhases() {
+  if (state.phases.length === 0) {
+    $phasesContainer.innerHTML = '<div class="phases-empty">Waiting for orchestration events...</div>';
+    return;
+  }
+  const now = Date.now();
+  let html = '';
+  for (let i = 0; i < state.phases.length; i++) {
+    const p = state.phases[i];
+    const elapsed = p.startedAt
+      ? formatElapsed((p.completedAt ? new Date(p.completedAt).getTime() : now) - new Date(p.startedAt).getTime())
+      : '';
+    const doneCount = p.agents.filter(a => a.status === 'done' || a.status === 'error' || a.status === 'timeout').length;
+    const total = p.agents.length;
+    html += '<div class="phase">';
+    html += '<div class="phase-header">';
+    html += '<span class="phase-indicator ' + escHtml(p.status) + '"></span>';
+    html += '<span class="phase-name">' + escHtml(p.name) + '</span>';
+    html += '<span class="phase-agents-count">' + (total > 0 ? doneCount + '/' + total + ' agents' : '') + '</span>';
+    html += '<span class="phase-elapsed">' + escHtml(elapsed) + '</span>';
+    html += '</div>';
+    if (total > 0) {
+      html += '<div class="agents-list">';
+      for (const a of p.agents) {
+        html += '<div class="agent-row">';
+        html += '<span class="agent-dot ' + escHtml(a.status) + '"></span>';
+        html += '<span class="agent-name">' + escHtml(a.name || a.type || 'agent') + '</span>';
+        html += '<span class="agent-type">' + escHtml(a.type || '') + '</span>';
+        html += '<span class="agent-model">' + escHtml(a.model || a.backend || '') + '</span>';
+        html += '<span class="agent-tokens">' + (a.tokens > 0 ? formatNum(a.tokens) + ' tok' : '') + '</span>';
+        html += '<span class="agent-detail">' + escHtml(a.detail || '') + '</span>';
+        html += '</div>';
+      }
+      html += '</div>';
+    }
+    html += '</div>';
+  }
+  $phasesContainer.innerHTML = html;
+}
+function renderEvents() {
+  // Keep the header, rebuild event rows
+  let html = '<div class="event-feed-header">Event Log</div>';
+  // Render newest last so newest is at the bottom (auto-scroll)
+  for (const evt of events) {
+    const time = formatTime(evt.timestamp);
+    const type = evt.type || '—';
+    const source = evt.source || '—';
+    html += '<div class="event-row">';
+    html += '<span class="event-time">' + escHtml(time) + '</span>';
+    html += '<span class="event-type">' + escHtml(type) + '</span>';
+    html += '<span class="event-source">' + escHtml(source) + '</span>';
+    html += '</div>';
+  }
+  $eventFeed.innerHTML = html;
+  // Auto-scroll to bottom
+  $eventFeed.scrollTop = $eventFeed.scrollHeight;
+}
+// ═══════════════════════════════════════════════════════════════════
+// Graph Tab — D3 Force-directed
+// ═══════════════════════════════════════════════════════════════════
+let graphData = { nodes: [], edges: [] };
+let simulation = null;
+let svgEl = null;
+let zoomBehavior = null;
+let highlightedNode = null;
+const NODE_COLORS = {
+  orchestration: getComputedStyle(document.documentElement).getPropertyValue('--node-orchestration').trim(),
+  phase:         getComputedStyle(document.documentElement).getPropertyValue('--node-phase').trim(),
+  agent:         getComputedStyle(document.documentElement).getPropertyValue('--node-agent').trim(),
+  file:          getComputedStyle(document.documentElement).getPropertyValue('--node-file').trim(),
+  pattern:       getComputedStyle(document.documentElement).getPropertyValue('--node-pattern').trim(),
+  error:         getComputedStyle(document.documentElement).getPropertyValue('--node-error').trim(),
+  heuristic:     getComputedStyle(document.documentElement).getPropertyValue('--node-heuristic').trim(),
+};
+const NODE_RADII = {
+  orchestration: 14,
+  phase: 10,
+  agent: 8,
+  file: 5,
+  pattern: 9,
+  error: 7,
+  heuristic: 6,
+};
+function nodeColor(type) {
+  return NODE_COLORS[type] || NODE_COLORS.file;
+}
+function nodeRadius(type) {
+  return NODE_RADII[type] || 6;
+}
+function edgeStroke(confidence) {
+  if (confidence === 'INFERRED') return '4,3';
+  if (confidence === 'AMBIGUOUS') return '1,3';
+  return null; // solid
+}
+async function fetchGraph() {
+  try {
+    const [nodesRes, edgesRes, statsRes] = await Promise.all([
+      fetch('/api/graph/nodes').then(r => r.ok ? r.json() : []),
+      fetch('/api/graph/edges').then(r => r.ok ? r.json() : []),
+      fetch('/api/graph/stats').then(r => r.ok ? r.json() : null),
+    ]);
+    graphData.nodes = nodesRes;
+    graphData.edges = edgesRes;
+    if (statsRes) {
+      $graphStats.textContent = (statsRes.nodes || graphData.nodes.length) + ' nodes, ' + (statsRes.edges || graphData.edges.length) + ' edges';
+    } else {
+      $graphStats.textContent = graphData.nodes.length + ' nodes, ' + graphData.edges.length + ' edges';
+    }
+    renderGraph();
+  } catch (e) {
+    console.warn('Graph fetch error:', e);
+    $graphStats.textContent = 'fetch error';
+  }
+}
+function renderGraph() {
+  // Clear previous
+  $graphContainer.querySelectorAll('svg').forEach(s => s.remove());
+  if (simulation) simulation.stop();
+  highlightedNode = null;
+  if (graphData.nodes.length === 0) {
+    $graphStats.textContent = 'no data';
+    return;
+  }
+  const rect = $graphContainer.getBoundingClientRect();
+  const width = rect.width || 800;
+  const height = rect.height || 600;
+  // Build id-indexed node map for edges
+  const nodeMap = new Map();
+  const nodes = graphData.nodes.map(n => {
+    const node = { ...n, x: undefined, y: undefined };
+    nodeMap.set(n.id, node);
+    return node;
+  });
+  const links = graphData.edges
+    .filter(e => nodeMap.has(e.source) && nodeMap.has(e.target))
+    .map(e => ({ ...e, source: e.source, target: e.target }));
+  const svg = d3.select($graphContainer)
+    .append('svg')
+    .attr('width', width)
+    .attr('height', height);
+  svgEl = svg;
+  const g = svg.append('g');
+  // Zoom
+  zoomBehavior = d3.zoom()
+    .scaleExtent([0.1, 6])
+    .on('zoom', (event) => g.attr('transform', event.transform));
+  svg.call(zoomBehavior);
+  // Links
+  const link = g.append('g')
+    .selectAll('line')
+    .data(links)
+    .join('line')
+    .attr('stroke', 'oklch(0.35 0.005 55)')
+    .attr('stroke-width', d => Math.max(0.5, Math.min(3, (d.weight || 1) * 0.8)))
+    .attr('stroke-dasharray', d => edgeStroke(d.confidence))
+    .attr('stroke-opacity', 0.5);
+  // Nodes
+  const node = g.append('g')
+    .selectAll('circle')
+    .data(nodes)
+    .join('circle')
+    .attr('r', d => nodeRadius(d.type))
+    .attr('fill', d => nodeColor(d.type))
+    .attr('stroke', 'oklch(0.13 0.008 55)')
+    .attr('stroke-width', 1.5)
+    .attr('cursor', 'pointer')
+    .call(d3.drag()
+      .on('start', dragStarted)
+      .on('drag', dragged)
+      .on('end', dragEnded));
+  // Labels
+  const label = g.append('g')
+    .selectAll('text')
+    .data(nodes)
+    .join('text')
+    .text(d => d.label || d.id)
+    .attr('font-family', 'Inconsolata, monospace')
+    .attr('font-size', 9)
+    .attr('fill', 'oklch(0.60 0.008 55)')
+    .attr('dx', d => nodeRadius(d.type) + 4)
+    .attr('dy', 3)
+    .attr('pointer-events', 'none');
+  // Tooltip handlers
+  node.on('mouseenter', (event, d) => {
+    let html = '<dl>';
+    html += '<dt>ID</dt><dd>' + escHtml(d.id) + '</dd>';
+    html += '<dt>Type</dt><dd>' + escHtml(d.type) + '</dd>';
+    html += '<dt>Label</dt><dd>' + escHtml(d.label) + '</dd>';
+    if (d.properties && typeof d.properties === 'object') {
+      for (const [k, v] of Object.entries(d.properties)) {
+        html += '<dt>' + escHtml(k) + '</dt><dd>' + escHtml(String(v)) + '</dd>';
+      }
+    }
+    html += '</dl>';
+    $graphTooltip.innerHTML = html;
+    $graphTooltip.classList.add('visible');
+    positionTooltip(event);
+  })
+  .on('mousemove', positionTooltip)
+  .on('mouseleave', () => {
+    $graphTooltip.classList.remove('visible');
+  });
+  // Click to highlight connections
+  node.on('click', (event, d) => {
+    event.stopPropagation();
+    if (highlightedNode === d.id) {
+      // Deselect
+      highlightedNode = null;
+      node.attr('opacity', 1);
+      link.attr('stroke-opacity', 0.5);
+      label.attr('opacity', 1);
+      return;
+    }
+    highlightedNode = d.id;
+    const connected = new Set();
+    connected.add(d.id);
+    links.forEach(l => {
+      const sid = typeof l.source === 'object' ? l.source.id : l.source;
+      const tid = typeof l.target === 'object' ? l.target.id : l.target;
+      if (sid === d.id) connected.add(tid);
+      if (tid === d.id) connected.add(sid);
+    });
+    node.attr('opacity', n => connected.has(n.id) ? 1 : 0.12);
+    label.attr('opacity', n => connected.has(n.id) ? 1 : 0.12);
+    link.attr('stroke-opacity', l => {
+      const sid = typeof l.source === 'object' ? l.source.id : l.source;
+      const tid = typeof l.target === 'object' ? l.target.id : l.target;
+      return (sid === d.id || tid === d.id) ? 0.8 : 0.05;
+    });
+  });
+  // Click background to deselect
+  svg.on('click', () => {
+    highlightedNode = null;
+    node.attr('opacity', 1);
+    link.attr('stroke-opacity', 0.5);
+    label.attr('opacity', 1);
+  });
+  // Simulation
+  simulation = d3.forceSimulation(nodes)
+    .force('link', d3.forceLink(links).id(d => d.id).distance(60))
+    .force('charge', d3.forceManyBody().strength(-120))
+    .force('center', d3.forceCenter(width / 2, height / 2))
+    .force('collision', d3.forceCollide().radius(d => nodeRadius(d.type) + 4))
+    .on('tick', () => {
+      link
+        .attr('x1', d => d.source.x)
+        .attr('y1', d => d.source.y)
+        .attr('x2', d => d.target.x)
+        .attr('y2', d => d.target.y);
+      node
+        .attr('cx', d => d.x)
+        .attr('cy', d => d.y);
+      label
+        .attr('x', d => d.x)
+        .attr('y', d => d.y);
+    });
+  function dragStarted(event, d) {
+    if (!event.active) simulation.alphaTarget(0.3).restart();
+    d.fx = d.x;
+    d.fy = d.y;
+  }
+  function dragged(event, d) {
+    d.fx = event.x;
+    d.fy = event.y;
+  }
+  function dragEnded(event, d) {
+    if (!event.active) simulation.alphaTarget(0);
+    d.fx = null;
+    d.fy = null;
+  }
+}
+function positionTooltip(event) {
+  const containerRect = $graphContainer.getBoundingClientRect();
+  let x = event.clientX - containerRect.left + 12;
+  let y = event.clientY - containerRect.top - 10;
+  // Keep tooltip in bounds
+  const tw = 280;
+  if (x + tw > containerRect.width) x = x - tw - 24;
+  if (y < 0) y = 4;
+  $graphTooltip.style.left = x + 'px';
+  $graphTooltip.style.top = y + 'px';
+}
+// Graph toolbar
+document.getElementById('graphRefresh').addEventListener('click', fetchGraph);
+document.getElementById('graphReset').addEventListener('click', () => {
+  if (svgEl && zoomBehavior) {
+    svgEl.transition().duration(300).call(zoomBehavior.transform, d3.zoomIdentity);
+  }
+});
+// Resize graph on window resize
+let resizeTimer;
+window.addEventListener('resize', () => {
+  clearTimeout(resizeTimer);
+  resizeTimer = setTimeout(() => {
+    if (activeTab === 'graph' && graphData.nodes.length > 0) {
+      renderGraph();
+    }
+  }, 200);
+});
+// ═══════════════════════════════════════════════════════════════════
+// Boot
+// ═══════════════════════════════════════════════════════════════════
+connect();
+})();
+</script>
+</body>
+</html>