psinetron-opencode-visualizer 1.0.2 → 1.0.4

package/index.ts

@@ -1,182 +1,21 @@
 import type { Plugin } from "@opencode-ai/plugin"
 import { join } from "path"
 import { existsSync, readFileSync, writeFileSync, mkdirSync } from "fs"
-import { platform } from "os"
 
 const SERVER_PORT = 5173
+const DAEMON_PATH = join(import.meta.dir, "visualizer", "ocv-server.ts")
 
-// ─── WebSocket server ───────────────────────────────────────────────
+let daemonStarted = false
 
-interface PluginClient {
-  instanceId: string
-  ws: WebSocket
-  cwd: string
-  skin: string
-  connectedAt: number
-}
-
-interface FrontendClient {
-  ws: WebSocket
-}
-
-const pluginClients = new Map<string, PluginClient>()
-const frontendClients = new Set<FrontendClient>()
-let windowOpened = false
-function broadcast(data: Record<string, unknown>) {
-  const msg = JSON.stringify(data)
-  for (const client of frontendClients) {
-    if (client.ws.readyState === WebSocket.OPEN) {
-      try { client.ws.send(msg) } catch {}
-    }
-  }
-}
-
-function openBrowserWindow() {
-  if (windowOpened) return
-  windowOpened = true
-  const url = `http://localhost:${SERVER_PORT}`
-
-  setTimeout(() => {
-    if (frontendClients.size > 0) return
-
-    const os = platform()
-
-    try {
-      if (os === "darwin") {
-        Bun.spawn(["open", "-n", "-a", "Google Chrome", "--args", `--app=${url}`, "--window-size=1024,768"], {
-          stdio: ["ignore", "ignore", "ignore"],
-        })
-      } else if (os === "win32") {
-        Bun.spawn(["cmd.exe", "/c", "start", "chrome", `--app=${url}`, "--window-size=1024,768"], {
-          stdio: ["ignore", "ignore", "ignore"],
-        })
-      } else {
-        Bun.spawn(["google-chrome", `--app=${url}`, "--window-size=1024,768"], {
-          stdio: ["ignore", "ignore", "ignore"],
-        })
-      }
-    } catch {
-      console.warn(`[visualizer] Failed to open Chrome app window, open manually: ${url}`)
-    }
-  }, 3000)
-}
-
-let shutdownTimer: ReturnType<typeof setTimeout> | null = null
-let server: ReturnType<typeof Bun.serve> | null = null
-
-function resetShutdownTimer() {
-  if (shutdownTimer) clearTimeout(shutdownTimer)
-  shutdownTimer = setTimeout(() => {
-    if (pluginClients.size === 0) {
-      server?.stop()
-      process.exit(0)
-    }
-  }, 10_000)
-}
-
-try {
-  const VISUALIZER_DIR = join(import.meta.dir, "visualizer")
-
-  server = Bun.serve({
-    port: SERVER_PORT,
-    hostname: "127.0.0.1",
-    async fetch(req) {
-      if (server.upgrade(req)) {
-        return
-      }
-      try {
-        const url = new URL(req.url)
-        const pathname = url.pathname === "/" ? "/index.html" : url.pathname
-        const filePath = join(VISUALIZER_DIR, pathname)
-        if (existsSync(filePath)) {
-          return new Response(Bun.file(filePath), {
-            headers: { "Cache-Control": "no-store, no-cache, must-revalidate" },
-          })
-        }
-        return new Response("Not found", { status: 404 })
-      } catch {
-        return new Response("<h1>Visualization server — error</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) || "",
-              skin: (data.skin as string) || "",
-              connectedAt: Date.now(),
-            })
-
-            broadcast({
-              type: "instance.added",
-              instanceId: id,
-              cwd: data.cwd,
-              skin: data.skin,
-            })
-
-            openBrowserWindow()
-            resetShutdownTimer()
-            break
-          }
-
-          case "frontend.register": {
-            frontendClients.add({ ws })
-            const instances = [...pluginClients.values()].map((c) => ({
-              instanceId: c.instanceId,
-              cwd: c.cwd,
-              skin: c.skin,
-            }))
-            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)
+function ensureDaemon() {
+  if (daemonStarted) return
+  daemonStarted = true
+  try {
+    const proc = Bun.spawn(["bun", DAEMON_PATH], {
+      stdio: ["ignore", "ignore", "ignore"],
+    })
+    proc.unref()
+  } catch {}
 }
 
 // ─── Plugin client ──────────────────────────────────────────────────
@@ -265,7 +104,9 @@ function sendEvent(eventType: string, payload: Record<string, unknown> = {}) {
 
 const VisualizerPlugin: Plugin = async ({ project, client, $, directory, worktree }) => {
   const skin = resolveSkin(directory)
-  // Wait up to 6 seconds for the server to be ready
+
+  ensureDaemon()
+
   for (let i = 0; i < 20; i++) {
     try {
       await connectToServer(skin)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "psinetron-opencode-visualizer",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "main": "index.ts",
   "description": "OpenCode session visualizer — real-time pixel-art office scene with animated agents",
   "files": [

package/visualizer/index.html

@@ -248,6 +248,8 @@ function getFreeCoffeeSpot() {
 }
 
 function createAgent(instanceId, cwd, skin) {
+  const existing = agents.find(a => a.instanceId === instanceId)
+  if (existing) return existing
   if (agents.length >= 5) return null
   const id = agentIdCounter++
   const skinIds = Object.keys(SKINS)
@@ -752,14 +754,21 @@ function connect() {
     try { data = JSON.parse(e.data) } catch { return }
 
     switch (data.type) {
-      case "state.sync":
-        agents.length = 0
-        agentIdCounter = 0
-        reservedCoffeeSpots.clear()
+      case "state.sync": {
+        const syncIds = new Set((data.instances || []).map(i => i.instanceId))
+        for (const a of [...agents]) {
+          if (!syncIds.has(a.instanceId)) {
+            removeAgent(a.instanceId)
+          }
+        }
         for (const inst of data.instances || []) {
-          createAgent(inst.instanceId, inst.cwd, inst.skin)
+          const existing = agents.find(a => a.instanceId === inst.instanceId)
+          if (!existing) {
+            createAgent(inst.instanceId, inst.cwd, inst.skin)
+          }
         }
         break
+      }
       case "instance.added":
         createAgent(data.instanceId, data.cwd, data.skin)
         break

package/visualizer/ocv-server.ts

@@ -0,0 +1,153 @@
+// ocv-server.ts — standalone WebSocket server daemon
+// Lives independently of any opencode instance — survives plugin process kills
+import { join } from "path"
+import { existsSync } from "fs"
+import { platform } from "os"
+
+const SERVER_PORT = 5173
+
+interface PluginClient {
+  instanceId: string
+  ws: WebSocket
+  cwd: string
+  skin: string
+  connectedAt: number
+}
+
+interface FrontendClient {
+  ws: WebSocket
+}
+
+const pluginClients = new Map<string, PluginClient>()
+const frontendClients = new Set<FrontendClient>()
+
+function broadcast(data: Record<string, unknown>) {
+  const msg = JSON.stringify(data)
+  for (const client of frontendClients) {
+    if (client.ws.readyState === WebSocket.OPEN) {
+      try { client.ws.send(msg) } catch {}
+    }
+  }
+}
+
+function openBrowser() {
+  const url = `http://localhost:${SERVER_PORT}`
+  const os = platform()
+
+  setTimeout(() => {
+    if (frontendClients.size > 0) return
+    try {
+      if (os === "darwin") {
+        Bun.spawn(["open", "-n", "-a", "Google Chrome", "--args", `--app=${url}`, "--window-size=1024,768"], {
+          stdio: ["ignore", "ignore", "ignore"],
+        })
+      } else if (os === "win32") {
+        Bun.spawn(["cmd.exe", "/c", "start", "chrome", `--app=${url}`, "--window-size=1024,768"], {
+          stdio: ["ignore", "ignore", "ignore"],
+        })
+      } else {
+        Bun.spawn(["google-chrome", `--app=${url}`, "--window-size=1024,768"], {
+          stdio: ["ignore", "ignore", "ignore"],
+        })
+      }
+    } catch {
+      // Nothing to do — user can open manually
+    }
+  }, 3000)
+}
+
+let shutdownTimer: ReturnType<typeof setTimeout> | null = null
+let server: ReturnType<typeof Bun.serve> | null = null
+
+function resetShutdownTimer() {
+  if (shutdownTimer) clearTimeout(shutdownTimer)
+  shutdownTimer = setTimeout(() => {
+    if (pluginClients.size === 0 && frontendClients.size === 0) {
+      server?.stop()
+      process.exit(0)
+    }
+  }, 300_000)
+}
+
+const VISUALIZER_DIR = import.meta.dir
+
+server = Bun.serve({
+  port: SERVER_PORT,
+  hostname: "127.0.0.1",
+  async fetch(req) {
+    if (server.upgrade(req)) return
+    try {
+      const url = new URL(req.url)
+      const pathname = url.pathname === "/" ? "/index.html" : url.pathname
+      const filePath = join(VISUALIZER_DIR, pathname)
+      if (existsSync(filePath)) {
+        return new Response(Bun.file(filePath), {
+          headers: { "Cache-Control": "no-store, no-cache, must-revalidate" },
+        })
+      }
+      return new Response("Not found", { status: 404 })
+    } catch {
+      return new Response("<h1>Server error</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) || "",
+            skin: (data.skin as string) || "",
+            connectedAt: Date.now(),
+          })
+          broadcast({ type: "instance.added", instanceId: id, cwd: data.cwd, skin: data.skin })
+          ws.send(JSON.stringify({ type: "registered" }))
+          openBrowser()
+          resetShutdownTimer()
+          break
+        }
+        case "frontend.register": {
+          frontendClients.add({ ws })
+          const instances = [...pluginClients.values()].map((c) => ({
+            instanceId: c.instanceId,
+            cwd: c.cwd,
+            skin: c.skin,
+          }))
+          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()
+    },
+  },
+})
+
+console.log(`[ocv-server] Listening on http://localhost:${SERVER_PORT}`)