psinetron-opencode-visualizer 1.0.0

package/README.md

@@ -0,0 +1,113 @@
+# OpenCode Visualizer
+
+Real-time pixel-art office scene that visualizes OpenCode AI agent sessions. Watch your agents walk, sit at desks, type on laptops, drink coffee, and react to events — all rendered in a charming retro pixel-art style.
+
+![OpenCode Visualizer](visualizer/textures/background.png)
+
+## Features
+
+- **5 unique pixel-art characters** — each with distinct idle, working, and reaction animations
+- **12 animation states** — idle, walking, sitting, typing, drinking coffee, scratching head, yawning, error reactions, and more
+- **Persistent office layout** — 5 desks, a coffee zone, and a rest area with Y-sorted rendering
+- **Real-time WebSocket sync** — events stream from OpenCode sessions to the visualizer instantly
+- **Cross-platform standalone window** — automatically opens in Chrome app mode on macOS, Windows, and Linux; falls back to default browser
+
+## Requirements
+
+- [OpenCode](https://opencode.ai)
+- [Bun](https://bun.sh) (runtime)
+- Chrome, Chromium, or Edge (for app-mode window; optional — any browser works)
+
+## Installation
+
+### Via OpenCode UI (recommended)
+
+1. Press `Cmd+P` (`Ctrl+P` on Windows/Linux) to open the command palette
+2. Select **Install plugin**
+3. Enter the package name: `slybeaver-opencode-visualizer`
+
+OpenCode will install the plugin and automatically add it to your project's `opencode.json`.
+
+### Manual configuration
+
+Add the plugin to your OpenCode config (`opencode.json` or `opencode.jsonc`):
+
+```json
+{
+  "plugin": ["slybeaver-opencode-visualizer"]
+}
+```
+
+Or install from a local path:
+
+```json
+{
+  "plugin": ["./path/to/OpenCodeVisualizer"]
+}
+```
+
+## How It Works
+
+```
+OpenCode session
+    │ event hook
+    ▼
+Plugin (index.ts) ─── WebSocket ───► Bun Server (port 5173)
+                                          │ broadcast
+                                          ▼
+                                   Frontend (Canvas, 1024×768)
+                                   Pixel-art office with animated agents
+```
+
+1. The plugin starts a Bun HTTP + WebSocket server on `localhost:5173`
+2. It opens the visualizer in a Chrome app window (or your default browser)
+3. OpenCode session events stream through WebSocket to the visualizer
+4. The canvas renders agents navigating the office, sitting at desks, and animating in real time
+
+## Project Structure
+
+```
+├── index.ts              # Plugin entry point (server + WebSocket + Chrome launcher)
+├── opencode.json         # OpenCode plugin manifest
+├── package.json          # npm metadata
+├── visualizer/
+│   ├── index.html        # SPA canvas app (all rendering logic in <script>)
+│   ├── textures/         # Background, desk, and coffee table sprites
+│   └── person1-5/        # Character sprites (8 rotation + 6-8 animation types each)
+│       └── personN/
+│           ├── rotations/     # Direction sprites (N, S, E, W, NE, NW, SE, SW)
+│           └── animations/   # Frame-by-frame animation sprites (idle, walk, sit, work, coffee, scratch, yawn)
+```
+
+## Agent States
+
+| State | Description |
+|-------|-------------|
+| `idle` | Standing still, breathing animation |
+| `walking` | Walking to a destination |
+| `walking_to_desk` | Heading to an assigned desk |
+| `sitting` | Sitting down transition |
+| `working` | Typing on a laptop |
+| `drinking` | At the coffee zone |
+| `scratching` | Idle desk animation — scratching head |
+| `yawning` | Idle desk animation — yawning |
+| `error` | Reacting to an error |
+| `flash` | White flash on session diff |
+| `idle_rest` | Standing in the rest area |
+| `leaving` | Walking to the exit door |
+
+## Development
+
+```bash
+# Run the plugin (requires OpenCode)
+opencode
+
+# The visualizer runs at http://localhost:5173
+# Open it manually in any browser
+```
+
+No build step required — Bun runs TypeScript directly.
+
+## License
+
+MIT

package/index.ts

@@ -0,0 +1,307 @@
+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
+
+// ─── WebSocket server ───────────────────────────────────────────────
+
+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)
+}
+
+// ─── Plugin client ──────────────────────────────────────────────────
+
+const AVAILABLE_SKINS = ["person1", "person2", "person3", "person4", "person5"]
+
+function resolveSkin(cwd: string): string {
+  const configDir = join(cwd, ".opencode")
+  const configPath = join(configDir, "viz-skin.json")
+  try {
+    const data = JSON.parse(readFileSync(configPath, "utf-8"))
+    if (data.skin && AVAILABLE_SKINS.includes(data.skin)) return data.skin
+  } catch {}
+  const skin = AVAILABLE_SKINS[Math.floor(Math.random() * AVAILABLE_SKINS.length)]
+  try {
+    mkdirSync(configDir, { recursive: true })
+    writeFileSync(configPath, JSON.stringify({ skin }))
+  } catch {}
+  return skin
+}
+
+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(skin: string): 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(),
+          skin,
+        })
+      )
+      resolve()
+    }
+
+    socket.onerror = () => {
+      clearTimeout(timeout)
+      socket.close()
+      reject(new Error("Connection failed"))
+    }
+
+    socket.onclose = () => {
+      ws = null
+      if (!reconnectTimer) {
+        reconnectTimer = setTimeout(() => {
+          reconnectTimer = null
+          connectToServer(skin).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 }) => {
+  const skin = resolveSkin(directory)
+  // Wait up to 6 seconds for the server to be ready
+  for (let i = 0; i < 20; i++) {
+    try {
+      await connectToServer(skin)
+      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": "psinetron-opencode-visualizer",
+  "version": "1.0.0",
+  "main": "index.ts",
+  "description": "OpenCode session visualizer — real-time pixel-art office scene with animated agents",
+  "files": [
+    "index.ts",
+    "visualizer/"
+  ],
+  "keywords": ["opencode", "opencode-plugin", "visualizer", "monitor"],
+  "license": "MIT",
+  "type": "module"
+}