OpenCode plugin for visualizing AI coding sessions in a virtual office workspace.
Session Character Visualizer creates a blob character visualization of your coding sessions. Each session appears as a colored agent with speech bubbles showing current status and activity. Subagents show as smaller blobs orbitting their parents.
bash -c "$(curl -fsSL https://raw.githubusercontent.com/Caffa/Session-Character-Visualizer/main/install.sh)"Or manually:
git clone https://github.com/Caffa/Session-Character-Visualizer.git
cd Session-Character-Visualizer
bash install.shRestart OpenCode. The viewer opens automatically in your browser.
# Install with one-liner
bash -c "$(curl -fsSL https://raw.githubusercontent.com/Caffa/Session-Character-Visualizer/main/install.sh)"
# Restart OpenCode
opencode --restart
# Open viewer
open ~/.config/opencode/plugins/blob-office.html| State | Visual Features | Description |
|---|---|---|
| Idle | 💤, slow pulse, no ring | Finished work, waiting for next task. Subagents removed after 10s. |
| Thinking | 🧠, expanding ring, sparkles | Processing/generating. Eyes move rhythmically tracking thoughts. |
| Editing | ✏️, code panel with typewriter | Writing/editing files. Shows animated panel with file names. |
| Reading | 📖 with glasses, book opens/closes | Reading files, searching. Glasses wobble while scanning. |
| Running | 💻, fast pulse, motion streaks | Executing bash commands, terminal operations. |
| Waiting | Blocked needing user permission. Gentle oscillation. | |
| Error | ❌, X_X eyes, red pulse, ⚡ | Something went wrong - needs attention. |
Agent Colors: Each agent gets a unique hue (0-360°) derived from its session ID. Colors persist per session - same agent always has the same color. Subagents use their parent's hue with a +30° offset for visual distinction.
blob-office.ts (OpenCode plugin)
├─ Session events: created, deleted, status changes
├─ Tool executions: read, edit, bash, webfetch
└─ WebSocket server: ws://localhost:2727
└─ blob-office.html (p5.js renderer)
├─ Radial agent positioning
└─ Status-based animations
- WebSocket on port 2727
- Event-driven updates from OpenCode hooks
- p5.js canvas rendering
- No bundling required
By default, the viewer opens once per day per project. If you open multiple OpenCode sessions, the viewer will only open on the first session of each day.
You can change this behavior by creating a settings file:
# Create settings file
mkdir -p ~/.config/opencode/plugins
cat > ~/.config/opencode/plugins/blob-office.settings.json << 'EOF'
{
"viewerOpenFrequency": "every-session"
}
EOFOptions:
| Setting | Behavior |
|---|---|
"once-per-day" |
(Default) Opens viewer only once per day per project |
"every-session" |
Opens viewer for every new OpenCode session |
Change WebSocket port in:
blob-office.ts:PORT = 2727blob-office.html:WS_URL
bun testcd media-previews
./START.shRequirements: macOS, ffmpeg (brew install ffmpeg)
Viewer doesn't open: Open ~/.config/opencode/plugins/blob-office.html manually
Port 2727 in use: Change port in blob-office.ts and blob-office.html
No agents appearing:
- Check OpenCode logs for
[blob-office]prefix - Run
bun installin plugin folder - Open browser console on viewer page
Pixel Office - A VSCode & Claude-based visualization plugin with a similar concept. While this plugin (Session Character Visualizer) is designed specifically for OpenCode, Pixel Office provides a similar character visualization experience for VSCode users working with Claude.
Both projects share the goal of making AI coding sessions more engaging and visual, but are built for different platforms and AI coding environments.
MIT License - see LICENSE file.
Session Character Visualizer is a community plugin for OpenCode, not affiliated with the OpenCode team.