opencode-multi-agent-viz

Real-time multi-agent collaboration visualization plugin for OpenCode.

Features

• 🔮 Real-time topology visualization of agent interactions
• 📊 Task flow tracking with status colors (running/completed/failed)
• ⏱️ Timeline replay for debugging
• 🔔 Notifications for failures and important events
• 🌐 Multi-language support (English/Chinese)

Installation

# Add to your opencode.json
{
  "plugin": ["opencode-multi-agent-viz"]
}

Prerequisites

• Python 3.9+ (for the collector server)

Install Python dependencies:

pip install fastapi uvicorn pydantic websockets

Usage

1. Start the server (backend + frontend UI in one)

cd node_modules/opencode-multi-agent-viz
python -m uvicorn server.main:app --host 127.0.0.1 --port 51888

2. Open the visualization panel

Open http://localhost:51888 in your browser.

3. Use OpenCode normally

The plugin automatically captures:

• Tool executions (bash, read, write, grep, etc.)
• Session lifecycle events
• User messages

All events appear in real-time on the visualization panel.

Architecture

OpenCode + Plugin (hooks events)
        │ HTTP POST
        ▼
FastAPI Server (localhost:51888)
  ├── REST API (events, topology, traces)
  ├── WebSocket (real-time push to browser)
  └── Serves frontend UI (React SPA)
        │
        ▼
Browser (http://localhost:51888)

API

| Endpoint | Method | Description | |----------|--------|-------------| | / | GET | Visualization panel UI | | /health | GET | Health check | | /report | POST | Submit an event | | /events | GET | Get events (supports ?trace_id= filter) | | /traces | GET | List all trace IDs | | /topology | GET | Get current topology state | | /ws | WebSocket | Real-time event stream | | /reset | POST | Clear all data | | /export/{trace_id} | GET | Export trace as JSON |

License

MIT