JoelHutchinson

Agent Visualiser — Development skill for Claude Code

Development community

Watch your coding agents work as a tiny pixel-art office.

How to install Agent Visualiser

This entry records only its repository, not the path inside it, so there is no exact command to give. Open JoelHutchinson/agent-visualiser and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Agent Visualiser does

Watch your coding agents work as a tiny pixel-art office. A local daemon follows Claude Code sessions (or any agent that sends OpenTelemetry) and shows each agent and subagent at a desk, with bubbles for research, code and bugs. The office grows as subagents spawn. Runs only on your machine.

Alternatives in Development

Happy Coder — by GrocerPublishAgent - Spawn and control multiple Claude Codes in parallel from your phone or desktop 15.7k ★
Codex Claude Academic Skills — 本仓库包含三个面向学术科研人员的Skills，覆盖从文献阅读、论文写作到科学计算的完整研究工作流 3.2k ★
Mulmoterminal — Run multiple Claude Code and Codex sessions in parallel — a browser terminal grid that shows which agent needs 187 ★

README

Agent Visualiser

Watch a coding agent work as a tiny pixel studio. A dev types at a desk, and every action the agent takes floats up as a coloured bubble: **blue** for research, **green** for code, **red** for bugs. When the agent waits for you, the dev leans back.

Works with **Claude Code** out of the box. It also works with **any agent that speaks OpenTelemetry**: Codex, Gemini CLI, or your own agent instrumented with the GenAI semantic conventions.

Setup

Clone this repo, then npm install && npm run build && npm start (Node 20+). A browser tab opens on an empty desk. (Not on npm yet; npx agent-visualiser will work once it is published.)
Start your agent as normal in any project.
Watch the bubbles.

For Claude Code, that's all. For other harnesses, point their OTLP exporter at the daemon (see below).

How it works

 Claude Code ──► ~/.claude/projects/*.jsonl ──tail──┐
                                                    ├─► Hub ──ws──► Browser (Vue + canvas)
 Any agent ──OTLP gRPC :4317 / HTTP :4318──────────┘     ▲
                                                         │
                          recorded session (OTLP/JSON) ──┘  replay mode

Adapters turn each source into small signals: counted events (research | code | bug, each attributed to the agent that did it), the agent tree (who spawned whom), and tool-call start/end. File contents, prompts and commands never leave the adapter.
Hub merges the sources, counts each tool call once (a call seen in both the transcript and OTel has the same id), follows the newest session, keeps its agent tree and in-progress activities, and marks the orchestrator as waiting after 10 s of silence.
Front end speaks wire protocol v2 (src/shared/protocol.ts): a session snapshot (agents, activities, counts) on connect, then agent, activity and event messages. Live, OTel and replay look identical to it.