Backstage
- 14 repo stars
- Updated April 23, 2026
- sebyul2/backstage
backstage is a Claude Code marketplace plugin that renders a Gather Town-style pixel art office in the browser so developers can watch sub-agents, tool calls, tasks, and session transcripts in real time.
About
backstage (Claude Backstage) is a Claude Code plugin that turns terminal agent workflows into a live pixel art startup office at http://localhost:7777. When Claude spawns sub-agents, each maps to a character who pathfinds across a 21×15 tile grid with A* routing, sits at desks, and chats in a break room. Claude hooks—PreToolUse, PostToolUse, UserPromptSubmit, and Stop—stream events through a Bun TypeScript server via SSE to an HTML5 Canvas viewer. Features include a TODO/DOING/DONE task dashboard synced from TaskCreate and TaskUpdate, Chris work notes with thinking and tool-call audit trails, plan history with rendered Markdown, and optional Haiku-generated office banter via /backstage:configure. Prerequisites are Claude Code, Bun, and jq. Install with claude plugin marketplace add https://github.com/sebyul2/backstage.git and /backstage:server on. Multi-session split-pane setups aggregate all projects into one viewer with project-name prefixes. Use backstage when long Claude Code agent sessions need spatial visibility instead of plain log scrolling.
- Bun SSE server on port 7777 drives HTML5 Canvas pixel office viewer
- Maps sub-agents to 8 agent characters plus 8 C-Team tool-call avatars
- Syncs TODO/DOING/DONE board from TaskCreate and TaskUpdate hooks
- Chris work notes expose thinking, responses, and full tool-call audit trail
- 21×15 tile office map with A* pathfinding and optional Haiku dialogue
Backstage by the numbers
- Data as of Jul 7, 2026 (Skillselion catalog sync)
/plugin marketplace add sebyul2/backstageAdd your badge
Show developers this marketplace is listed on Skillselion. Paste this into your README.
| repo stars | ★ 14 |
|---|---|
| Last updated | April 23, 2026 |
| Repository | sebyul2/backstage ↗ |
How do you visualize Claude Code sub-agents live?
Run /backstage:server on in Claude Code and open localhost:7777 to watch sub-agents, tool calls, and tasks as pixel characters in real time.
Who is it for?
Developers running multi-agent Claude Code sessions who want a live office visualization, task board, and session audit trail in the browser.
Skip if: Headless CI environments, teams without Bun and jq, or production observability replacing proper metrics and alerting stacks.
What you get
Browser pixel office UI, streamed chat and task dashboard, Chris work-notes audit trail, and persisted plan history viewer.
- Live browser office dashboard
- Session work-notes audit trail
- Plan history browser
By the numbers
- Serves pixel office viewer on port 7777 via Bun SSE
- Office map uses a 21×15 tile grid with A* pathfinding
- Maps up to 8 sub-agent characters plus 8 C-Team tool specialists
Plugins in this marketplace
1 plugin - install individually after you add the marketplace.
Recommended Marketplaces
How it compares
Pick backstage over plain hook logs when you want spatial agent visualization, task boards, and browsable session work notes during long Claude Code runs.
FAQ
What do you need to run Backstage?
Backstage requires Claude Code, Bun as the server runtime, and jq for hook JSON processing. Start the viewer with /Backstage:server on, then open http://localhost:7777 in a browser while Claude Code sessions run.
How does Backstage track Claude tasks?
Backstage hooks listen for Claude TaskCreate and TaskUpdate calls, populate a TODO/DOING/DONE dashboard in the viewer, and let you click tasks for full descriptions or linked plan files.
Can multiple Claude sessions share one Backstage viewer?
Backstage v0.5.0+ aggregates multiple Claude Code sessions into one localhost:7777 viewer automatically, prefixing chat events with [project-name] so split-pane workflows stay distinguishable.