slybeaver-opencode-visualizer 1.0.0

package/index.ts

@@ -0,0 +1,282 @@
+import type { Plugin } from "@opencode-ai/plugin"
+import { join } from "path"
+import { existsSync } from "fs"
+
+const SERVER_PORT = 5173
+
+// ─── WebSocket server ───────────────────────────────────────────────
+
+interface PluginClient {
+  instanceId: string
+  ws: WebSocket
+  cwd: string
+  connectedAt: number
+}
+
+interface FrontendClient {
+  ws: WebSocket
+}
+
+const pluginClients = new Map<string, PluginClient>()
+const frontendClients = new Set<FrontendClient>()
+let windowOpened = false
+let htmlContent: string | null = null
+
+function getHtmlPath(): string {
+  const paths = [
+    join(import.meta.dir, "visualizer", "index.html"),
+    join(process.cwd(), "visualizer", "index.html"),
+  ]
+  for (const p of paths) {
+    if (existsSync(p)) return p
+  }
+  throw new Error("Cannot find visualizer/index.html")
+}
+
+function broadcast(data: Record<string, unknown>) {
+  const msg = JSON.stringify(data)
+  for (const client of frontendClients) {
+    if (client.ws.readyState === WebSocket.OPEN) {
+      client.ws.send(msg)
+    }
+  }
+}
+
+function openChromeWindow() {
+  if (windowOpened) return
+  windowOpened = true
+  const url = `http://localhost:${SERVER_PORT}`
+
+  // Delay: if frontend reconnects from a still-open page, skip opening
+  setTimeout(() => {
+    if (frontendClients.size > 0) return
+
+    const chromePath = "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
+    if (existsSync(chromePath)) {
+      Bun.spawn([chromePath, `--app=${url}`, "--window-size=640,480"], {
+        stdio: ["ignore", "ignore", "ignore"],
+      })
+    } else {
+      console.warn(`[visualizer] Chrome not found, open manually: ${url}`)
+    }
+  }, 3000)
+}
+
+let shutdownTimer: ReturnType<typeof setTimeout> | null = null
+
+function resetShutdownTimer() {
+  if (shutdownTimer) clearTimeout(shutdownTimer)
+  shutdownTimer = setTimeout(() => {
+    if (pluginClients.size === 0) {
+      // Server will shut down when process exits
+    }
+  }, 10_000)
+}
+
+try {
+  const server = Bun.serve({
+    port: SERVER_PORT,
+    hostname: "127.0.0.1",
+    async fetch(req) {
+      if (server.upgrade(req)) {
+        return
+      }
+      try {
+        if (!htmlContent) {
+          htmlContent = await Bun.file(getHtmlPath()).text()
+        }
+        return new Response(htmlContent, {
+          headers: {
+            "Content-Type": "text/html; charset=utf-8",
+            "Cache-Control": "no-cache",
+          },
+        })
+      } catch {
+        return new Response("<h1>Visualization server — frontend not found</h1>", {
+          headers: { "Content-Type": "text/html" },
+          status: 500,
+        })
+      }
+    },
+    websocket: {
+      open(_ws) {},
+      message(ws, message) {
+        let data: Record<string, unknown>
+        try {
+          data = JSON.parse(message as string)
+        } catch {
+          return
+        }
+
+        switch (data.type) {
+          case "register": {
+            const id = data.instanceId as string
+            pluginClients.set(id, {
+              instanceId: id,
+              ws,
+              cwd: (data.cwd as string) || "",
+              connectedAt: Date.now(),
+            })
+
+            broadcast({
+              type: "instance.added",
+              instanceId: id,
+              cwd: data.cwd,
+            })
+
+            openChromeWindow()
+            resetShutdownTimer()
+            break
+          }
+
+          case "frontend.register": {
+            frontendClients.add({ ws })
+            const instances = [...pluginClients.values()].map((c) => ({
+              instanceId: c.instanceId,
+              cwd: c.cwd,
+            }))
+            ws.send(JSON.stringify({ type: "state.sync", instances }))
+            break
+          }
+
+          case "event": {
+            broadcast({
+              type: "instance.event",
+              instanceId: data.instanceId,
+              event: data.event,
+            })
+            break
+          }
+        }
+      },
+      close(ws) {
+        for (const [id, client] of pluginClients) {
+          if (client.ws === ws) {
+            pluginClients.delete(id)
+            broadcast({ type: "instance.removed", instanceId: id })
+            break
+          }
+        }
+
+        for (const client of frontendClients) {
+          if (client.ws === ws) {
+            frontendClients.delete(client)
+            break
+          }
+        }
+
+        resetShutdownTimer()
+      },
+    },
+  })
+} catch (err) {
+  console.error("[visualizer] Failed to start server:", err)
+}
+
+// ─── Plugin client ──────────────────────────────────────────────────
+
+let ws: WebSocket | null = null
+let reconnectTimer: ReturnType<typeof setTimeout> | null = null
+const instanceId = `oc-${process.pid}-${Math.random().toString(36).slice(2, 8)}`
+
+function connectToServer(): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const socket = new WebSocket(`ws://localhost:${SERVER_PORT}`)
+
+    const timeout = setTimeout(() => {
+      socket.close()
+      reject(new Error("Connection timeout"))
+    }, 3000)
+
+    socket.onopen = () => {
+      clearTimeout(timeout)
+      if (reconnectTimer) {
+        clearTimeout(reconnectTimer)
+        reconnectTimer = null
+      }
+
+      ws = socket
+      socket.send(
+        JSON.stringify({
+          type: "register",
+          instanceId,
+          cwd: process.cwd(),
+        })
+      )
+      resolve()
+    }
+
+    socket.onerror = () => {
+      clearTimeout(timeout)
+      socket.close()
+      reject(new Error("Connection failed"))
+    }
+
+    socket.onclose = () => {
+      ws = null
+      if (!reconnectTimer) {
+        reconnectTimer = setTimeout(() => {
+          reconnectTimer = null
+          connectToServer().catch(() => {})
+        }, 2000)
+      }
+    }
+
+    socket.onmessage = () => {}
+  })
+}
+
+function sendEvent(eventType: string, payload: Record<string, unknown> = {}) {
+  if (!ws || ws.readyState !== WebSocket.OPEN) return
+  ws.send(
+    JSON.stringify({
+      type: "event",
+      instanceId,
+      event: { type: eventType, ...payload },
+    })
+  )
+}
+
+// ─── Plugin export ──────────────────────────────────────────────────
+
+const VisualizerPlugin: Plugin = async ({ project, client, $, directory, worktree }) => {
+  // Wait up to 6 seconds for the server to be ready
+  for (let i = 0; i < 20; i++) {
+    try {
+      await connectToServer()
+      break
+    } catch {
+      await new Promise((r) => setTimeout(r, 300))
+    }
+  }
+
+  const interestingEvents = new Set([
+    "session.status",
+    "session.created",
+    "session.deleted",
+    "session.idle",
+    "session.error",
+    "session.diff",
+    "message.updated",
+    "todo.updated",
+  ])
+
+  return {
+    event: async ({ event }) => {
+      if (interestingEvents.has(event.type)) {
+        sendEvent(event.type, event.properties as Record<string, unknown>)
+      }
+    },
+
+    "tool.execute.after": async (input, _output) => {
+      sendEvent("tool.execute.after", { tool: input.tool })
+    },
+
+    "tool.execute.before": async (input, _output) => {
+      sendEvent("tool.execute.before", { tool: input.tool })
+    },
+  }
+}
+
+export { VisualizerPlugin }
+export default VisualizerPlugin

package/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "slybeaver-opencode-visualizer",
+  "version": "1.0.0",
+  "description": "OpenCode session visualizer — real-time orb animation in Chrome app window",
+  "type": "module",
+  "main": "index.ts",
+  "files": [
+    "index.ts",
+    "visualizer/index.html"
+  ],
+  "keywords": ["opencode", "opencode-plugin", "visualizer", "monitor"],
+  "license": "MIT"
+}

package/visualizer/index.html

@@ -0,0 +1,588 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>OpenCode Visualizer</title>
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body {
+    background: #08080f;
+    overflow: hidden;
+    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
+    -webkit-app-region: drag;
+    user-select: none;
+  }
+  canvas { display: block; }
+  #overlay {
+    position: fixed;
+    bottom: 24px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    gap: 32px;
+    padding: 8px 20px;
+    background: rgba(8, 8, 15, 0.7);
+    border-radius: 8px;
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    pointer-events: none;
+    z-index: 10;
+  }
+  .stat {
+    display: flex;
+    gap: 6px;
+    align-items: center;
+    color: rgba(255, 255, 255, 0.35);
+    font-size: 11px;
+    letter-spacing: 0.5px;
+    text-transform: uppercase;
+  }
+  .stat-value {
+    color: rgba(255, 255, 255, 0.8);
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+  }
+  .stat-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: #40ff80;
+    box-shadow: 0 0 6px #40ff80;
+  }
+</style>
+</head>
+<body>
+<canvas id="canvas"></canvas>
+<div id="overlay">
+  <div class="stat"><span class="stat-dot"></span> Instances: <span class="stat-value" id="instances">0</span></div>
+  <div class="stat">Events: <span class="stat-value" id="events">0</span></div>
+  <div class="stat">Uptime: <span class="stat-value" id="uptime">0s</span></div>
+</div>
+
+<script>
+(() => {
+  const canvas = document.getElementById("canvas")
+  const ctx = canvas.getContext("2d")
+
+  const elInstances = document.getElementById("instances")
+  const elEvents = document.getElementById("events")
+  const elUptime = document.getElementById("uptime")
+
+  const PALETTE = [
+    { h: 200, s: 80, l: 62 },
+    { h: 275, s: 70, l: 62 },
+    { h: 340, s: 75, l: 62 },
+    { h: 160, s: 65, l: 52 },
+    { h: 40, s: 85, l: 58 },
+    { h: 30, s: 90, l: 55 },
+    { h: 190, s: 75, l: 55 },
+    { h: 310, s: 60, l: 60 },
+  ]
+
+  // ---- state ----
+  const nodes = new Map()
+  let eventCount = 0
+  let startTime = Date.now()
+  let nextColorIndex = 0
+
+  function resize() {
+    canvas.width = window.innerWidth * devicePixelRatio
+    canvas.height = window.innerHeight * devicePixelRatio
+    canvas.style.width = window.innerWidth + "px"
+    canvas.style.height = window.innerHeight + "px"
+    ctx.scale(devicePixelRatio, devicePixelRatio)
+    recalculateLayout()
+  }
+
+  // ---- layout ----
+  function recalculateLayout() {
+    const W = window.innerWidth
+    const H = window.innerHeight
+    const cx = W / 2
+    const cy = H / 2 - 20
+    const count = nodes.size
+
+    if (count === 0) return
+
+    const positions = layoutCircle(count, cx, cy, Math.min(W, H) * 0.28)
+
+    let i = 0
+    for (const [, node] of nodes) {
+      if (i < positions.length) {
+        node.tx = positions[i].x
+        node.ty = positions[i].y
+      }
+      i++
+    }
+  }
+
+  function layoutCircle(n, cx, cy, radius) {
+    if (n === 1) return [{ x: cx, y: cy }]
+    const positions = []
+    const startAngle = -Math.PI / 2
+    for (let i = 0; i < n; i++) {
+      const angle = startAngle + (2 * Math.PI * i) / n
+      positions.push({
+        x: cx + Math.cos(angle) * radius,
+        y: cy + Math.sin(angle) * radius,
+      })
+    }
+    return positions
+  }
+
+  // ---- nodes ----
+  function addNode(instanceId, cwd = "") {
+    if (nodes.has(instanceId)) return
+    const color = PALETTE[nextColorIndex % PALETTE.length]
+    nextColorIndex++
+
+    const cx = window.innerWidth / 2
+    const cy = window.innerHeight / 2 - 20
+
+    nodes.set(instanceId, {
+      id: instanceId,
+      cwd,
+      hue: color.h,
+      sat: color.s,
+      light: color.l,
+      x: cx,
+      y: cy,
+      tx: cx,
+      ty: cy,
+      radius: 0,
+      targetRadius: 18,
+      pulse: 0,
+      pulsePhase: Math.random() * Math.PI * 2,
+      status: "idle",
+      lastEventTime: 0,
+      particles: [],
+      shakeX: 0,
+      shakeY: 0,
+      shakeTimer: 0,
+      errorFlash: 0,
+      toolBurst: 0,
+      messageGlow: 0,
+    })
+    recalculateLayout()
+    updateOverlay()
+  }
+
+  function removeNode(instanceId) {
+    nodes.delete(instanceId)
+    recalculateLayout()
+    updateOverlay()
+  }
+
+  function clearAllNodes() {
+    nodes.clear()
+    recalculateLayout()
+    updateOverlay()
+  }
+
+  function getNode(instanceId) {
+    return nodes.get(instanceId)
+  }
+
+  // ---- particles ----
+  function emitParticles(node, count, speed, life, hue, sat, light) {
+    for (let i = 0; i < count; i++) {
+      const angle = Math.random() * Math.PI * 2
+      const spd = speed * (0.5 + Math.random())
+      node.particles.push({
+        x: 0,
+        y: 0,
+        vx: Math.cos(angle) * spd,
+        vy: Math.sin(angle) * spd,
+        life,
+        maxLife: life,
+        size: 1.5 + Math.random() * 3,
+        hue,
+        sat,
+        light: light + Math.random() * 20,
+      })
+    }
+  }
+
+  function handleEvent(instanceId, event) {
+    const node = getNode(instanceId)
+    if (!node) return
+
+    eventCount++
+    node.lastEventTime = performance.now()
+    updateOverlay()
+
+    switch (event.type) {
+      case "session.status":
+        {
+          const st = event.status?.type || event.status
+          if (st === "busy") {
+            node.status = "busy"
+            node.targetRadius = 50
+            node.label = "Думаю"
+          } else if (st === "retry") {
+            node.status = "retry"
+            node.targetRadius = 45
+            node.label = "Повтор"
+          } else {
+            node.status = "idle"
+            node.targetRadius = 18
+            node.label = "Жду"
+          }
+        }
+        break
+
+      case "session.idle":
+        node.status = "idle"
+        node.targetRadius = 18
+        node.label = "Жду"
+        break
+
+      case "session.error":
+        node.status = "error"
+        node.errorFlash = 1
+        node.shakeTimer = 600
+        node.targetRadius = 48
+        node.label = "Ошибка"
+        emitParticles(node, 12, 2, 80, 0, 100, 50)
+        break
+
+      case "session.created":
+        node.targetRadius = 35
+        node.label = "Старт"
+        emitParticles(node, 20, 3, 100, node.hue, node.sat, node.light)
+        break
+
+      case "session.deleted":
+        node.targetRadius = 0
+        emitParticles(node, 30, 4, 120, node.hue, node.sat, 80)
+        break
+
+      case "tool.execute.after":
+      case "tool.execute.before":
+        node.toolBurst = 1
+        emitParticles(node, 10, 1.5, 60, node.hue, node.sat, node.light)
+        break
+
+      case "message.updated":
+        node.messageGlow = 1
+        emitParticles(node, 5, 0.8, 50, node.hue, node.sat, 80)
+        break
+
+      case "todo.updated":
+        node.messageGlow = 0.5
+        emitParticles(node, 3, 0.5, 40, node.hue, node.sat, node.light)
+        break
+
+      case "session.diff":
+        node.toolBurst = 0.7
+        emitParticles(node, 6, 1, 55, 45, 90, 60)
+        break
+    }
+  }
+
+  // ---- update loop ----
+  function update(dt) {
+    for (const [, node] of nodes) {
+      // smooth position
+      node.x += (node.tx - node.x) * 0.08
+      node.y += (node.ty - node.y) * 0.08
+
+      // smooth radius
+      node.radius += (node.targetRadius - node.radius) * 0.1
+
+      // pulse (only when busy/retry)
+      if (node.status === "busy" || node.status === "retry") {
+        const pulseSpeed = node.status === "retry" ? 2 : 4
+        node.pulsePhase += dt * pulseSpeed
+        node.pulse = Math.sin(node.pulsePhase) * 0.5 + 0.5
+      } else {
+        node.pulse = 0
+      }
+
+      // error flash decay
+      if (node.errorFlash > 0) {
+        node.errorFlash = Math.max(0, node.errorFlash - dt * 2.5)
+      }
+
+      // tool burst decay
+      if (node.toolBurst > 0) {
+        node.toolBurst = Math.max(0, node.toolBurst - dt * 3)
+      }
+
+      // message glow decay
+      if (node.messageGlow > 0) {
+        node.messageGlow = Math.max(0, node.messageGlow - dt * 2)
+      }
+
+      // shake decay
+      if (node.shakeTimer > 0) {
+        node.shakeTimer -= dt * 1000
+        const intensity = node.shakeTimer / 600 * 4
+        node.shakeX = (Math.random() - 0.5) * intensity
+        node.shakeY = (Math.random() - 0.5) * intensity
+      } else {
+        node.shakeX = 0
+        node.shakeY = 0
+      }
+
+      // particles update
+      for (const p of node.particles) {
+        p.x += p.vx * dt * 60
+        p.y += p.vy * dt * 60
+        p.life -= dt * 60
+      }
+      node.particles = node.particles.filter(p => p.life > 0)
+
+      // continuous particle emission only while busy
+      if (node.status === "busy" && Math.random() < dt * 8) {
+        node.particles.push({
+          x: 0,
+          y: 0,
+          vx: (Math.random() - 0.5) * 0.8,
+          vy: -1 - Math.random(),
+          life: 40 + Math.random() * 20,
+          maxLife: 60,
+          size: 1 + Math.random() * 2,
+          hue: node.hue,
+          sat: node.sat,
+          light: node.light,
+        })
+      }
+    }
+  }
+
+  // ---- draw ----
+  function drawBackground(W, H) {
+    // subtle radial gradient
+    const grad = ctx.createRadialGradient(W / 2, H / 2, 0, W / 2, H / 2, Math.max(W, H) * 0.7)
+    grad.addColorStop(0, "rgba(20, 20, 40, 0.3)")
+    grad.addColorStop(1, "rgba(8, 8, 15, 0)")
+    ctx.fillStyle = "#08080f"
+    ctx.fillRect(0, 0, W, H)
+    ctx.fillStyle = grad
+    ctx.fillRect(0, 0, W, H)
+
+    // subtle dot grid
+    ctx.fillStyle = "rgba(255, 255, 255, 0.015)"
+    const spacing = 30
+    for (let x = spacing; x < W; x += spacing) {
+      for (let y = spacing; y < H; y += spacing) {
+        ctx.beginPath()
+        ctx.arc(x, y, 1, 0, Math.PI * 2)
+        ctx.fill()
+      }
+    }
+  }
+
+  function drawConnections(W, H) {
+    const cx = W / 2
+    const cy = H / 2 - 20
+
+    for (const [, node] of nodes) {
+      if (node.radius < 2) continue
+      const dx = cx - (node.x + node.shakeX)
+      const dy = cy - (node.y + node.shakeY)
+      const dist = Math.sqrt(dx * dx + dy * dy)
+
+      if (dist < 2) continue
+
+      // connection line to center
+      const alpha = 0.06 + node.pulse * 0.06
+      ctx.strokeStyle = `hsla(${node.hue}, ${node.sat}%, ${node.light}%, ${alpha})`
+      ctx.lineWidth = 1
+      ctx.beginPath()
+      ctx.moveTo(node.x + node.shakeX, node.y + node.shakeY)
+      ctx.lineTo(cx, cy)
+      ctx.stroke()
+    }
+
+    // draw center hub
+    if (nodes.size > 0) {
+      const active = [...nodes.values()].some(n => n.status === "busy")
+      const baseR = 4
+      const r = active ? baseR + 2 * Math.sin(performance.now() / 1000 * 3) : baseR
+      ctx.fillStyle = "rgba(255, 255, 255, 0.15)"
+      ctx.beginPath()
+      ctx.arc(cx, cy, r, 0, Math.PI * 2)
+      ctx.fill()
+    }
+  }
+
+  function drawNode(node) {
+    if (node.radius < 1) return
+
+    const x = node.x + node.shakeX
+    const y = node.y + node.shakeY
+    const r = node.radius
+    const pulseBoost = 1 + node.pulse * 0.15
+
+    // glow layers
+    const glowAlpha = 0.06 + node.pulse * 0.08 + node.toolBurst * 0.12 + node.messageGlow * 0.06
+    for (let i = 3; i >= 1; i--) {
+      const gr = r * (1.5 + i * 0.6) * pulseBoost
+      ctx.fillStyle = `hsla(${node.hue}, ${node.sat}%, ${node.light}%, ${glowAlpha / i})`
+      ctx.beginPath()
+      ctx.arc(x, y, gr, 0, Math.PI * 2)
+      ctx.fill()
+    }
+
+    // main orb
+    const orbGrad = ctx.createRadialGradient(x - r * 0.2, y - r * 0.2, r * 0.1, x, y, r)
+    const baseLight = node.errorFlash > 0
+      ? 30 + node.errorFlash * 30
+      : node.light + node.toolBurst * 15 + node.messageGlow * 10
+
+    const hueShift = node.errorFlash > 0 ? 0 : node.hue
+    orbGrad.addColorStop(0, `hsla(${hueShift}, ${node.sat}%, ${baseLight + 30}%, 0.9)`)
+    orbGrad.addColorStop(0.3, `hsla(${hueShift}, ${node.sat}%, ${baseLight}%, 0.7)`)
+    orbGrad.addColorStop(0.7, `hsla(${hueShift}, ${node.sat * 0.6}%, ${baseLight * 0.4}%, 0.4)`)
+    orbGrad.addColorStop(1, `hsla(${hueShift}, ${node.sat * 0.3}%, ${baseLight * 0.2}%, 0)`)
+
+    ctx.fillStyle = orbGrad
+    ctx.beginPath()
+    ctx.arc(x, y, r * pulseBoost, 0, Math.PI * 2)
+    ctx.fill()
+
+    // border ring
+    ctx.strokeStyle = `hsla(${node.hue}, ${node.sat}%, ${baseLight + 20}%, ${0.2 + node.pulse * 0.3})`
+    ctx.lineWidth = 1.5
+    ctx.beginPath()
+    ctx.arc(x, y, r * pulseBoost, 0, Math.PI * 2)
+    ctx.stroke()
+
+    // status indicator dot
+    if (node.status === "busy" || node.status === "retry" || node.status === "error") {
+      const dotColor = node.status === "error" ? "rgba(255, 60, 60, 0.8)"
+        : node.status === "retry" ? "rgba(255, 200, 40, 0.8)"
+        : "rgba(64, 255, 128, 0.8)"
+      ctx.fillStyle = dotColor
+      ctx.beginPath()
+      ctx.arc(x + r * 0.55, y - r * 0.55, 4, 0, Math.PI * 2)
+      ctx.fill()
+    }
+  }
+
+  function drawParticles(node) {
+    for (const p of node.particles) {
+      const x = node.x + node.shakeX + p.x
+      const y = node.y + node.shakeY + p.y
+      const alpha = Math.max(0, p.life / p.maxLife)
+      ctx.fillStyle = `hsla(${p.hue}, ${p.sat}%, ${p.light}%, ${alpha})`
+      ctx.beginPath()
+      ctx.arc(x, y, p.size * alpha, 0, Math.PI * 2)
+      ctx.fill()
+    }
+  }
+
+  function drawLabel(node) {
+    if (node.radius < 15) return
+
+    const x = node.x + node.shakeX
+    const y = node.y + node.shakeY
+    const label = node.label || ""
+
+    const alpha = node.status === "idle" ? 0.6 : 0.85
+    ctx.fillStyle = `rgba(255, 255, 255, ${alpha})`
+    ctx.font = "9px 'SF Mono', 'Fira Code', 'Consolas', monospace"
+    ctx.textAlign = "center"
+    ctx.textBaseline = "middle"
+    ctx.fillText(label, x, y)
+
+    // Folder name below the circle
+    const folder = node.cwd ? node.cwd.split("/").pop() || node.cwd : ""
+    if (folder) {
+      ctx.fillStyle = "rgba(255, 255, 255, 0.3)"
+      ctx.font = "8px 'SF Mono', 'Fira Code', 'Consolas', monospace"
+      ctx.fillText(folder, x, y + node.radius + 10)
+    }
+  }
+
+  function draw() {
+    const W = window.innerWidth
+    const H = window.innerHeight
+
+    ctx.clearRect(0, 0, W, H)
+    drawBackground(W, H)
+    drawConnections(W, H)
+
+    for (const [, node] of nodes) {
+      drawParticles(node)
+      drawNode(node)
+      drawLabel(node)
+    }
+  }
+
+  function updateOverlay() {
+    elInstances.textContent = nodes.size
+    elEvents.textContent = eventCount
+    const uptime = Math.floor((Date.now() - startTime) / 1000)
+    elUptime.textContent = uptime + "s"
+  }
+
+  // ---- main loop ----
+  let lastTime = performance.now()
+
+  function loop(time) {
+    const dt = Math.min((time - lastTime) / 1000, 0.1)
+    lastTime = time
+
+    update(dt)
+    draw()
+    requestAnimationFrame(loop)
+  }
+
+  // ---- websocket ----
+  function connect() {
+    const proto = location.protocol === "https:" ? "wss" : "ws"
+    const sock = new WebSocket(`${proto}://${location.host}`)
+
+    sock.onopen = () => {
+      clearAllNodes()
+      sock.send(JSON.stringify({ type: "frontend.register" }))
+    }
+
+    sock.onmessage = (e) => {
+      let data
+      try { data = JSON.parse(e.data) } catch { return }
+
+      switch (data.type) {
+        case "state.sync":
+          for (const inst of data.instances || []) {
+            addNode(inst.instanceId, inst.cwd)
+          }
+          break
+
+        case "instance.added":
+          addNode(data.instanceId, data.cwd)
+          break
+
+        case "instance.removed":
+          removeNode(data.instanceId)
+          break
+
+        case "instance.event":
+          handleEvent(data.instanceId, data.event)
+          break
+      }
+    }
+
+    sock.onclose = () => {
+      clearAllNodes()
+      setTimeout(connect, 2000)
+    }
+  }
+
+  // ---- init ----
+  window.addEventListener("resize", resize)
+  resize()
+  connect()
+  requestAnimationFrame(loop)
+
+  // uptime tick
+  setInterval(updateOverlay, 1000)
+})()
+</script>
+</body>
+</html>