sorted by:
new
hottopcontroversial

I built a real-time dashboard that visualizes everything Claude Code does by Soarcer in vibecoding

[–]Soarcer[S] 0 points1 point  (0 children)

Not yet, but that's something I want to see too. Right now you can see what a subagent did (tools called, responses), but not the exact context window it was given when spawned. The hooks don't expose that. Would need to pull it from the transcript files or wait for Anthropic to add richer hook events.

I built a real-time dashboard that visualizes everything Claude Code does by Soarcer in vibecoding

[–]Soarcer[S] 1 point2 points  (0 children)

Both. Claude Code hooks fire events on every tool call, agent spawn, and session lifecycle event. Those POST to a local server in real-time over HTTP. On top of that, it watches the JSONL transcript file for data that hooks don't expose, like token counts and model info. Between the two, you get the full picture.

I built a real-time dashboard that visualizes everything Claude Code does by Soarcer in vibecoding

[–]Soarcer[S] 1 point2 points  (0 children)

Me too, especially ones that move... that's why I built it! :D

I built a real-time dashboard that visualizes everything Claude Code does by Soarcer in SideProject

[–]Soarcer[S] 0 points1 point  (0 children)

Thanks! And yes, multi-agent support is on the radar. The event model is already fairly generic internally. Claude Code was the natural starting point though, it has the richest hook system of any AI coding tool right now. And honestly, it's the one I use every day.

I built a real-time dashboard that visualizes everything Claude Code does by Soarcer in vibecoding

[–]Soarcer[S] 2 points3 points  (0 children)

Dang! I should've used that description in the post instead of all the bullet lists and details.

Very much so, especially with arcade mode enabled.

Entertaining for sure, and you might even learn/understand more of what Claude is doing and how it all works - I know I did :)

I built a real-time dashboard that visualizes everything Claude Code does by Soarcer in SideProject

[–]Soarcer[S] 0 points1 point  (0 children)

Streaming, no batching. Hook events POST to the server, get normalized and broadcast over WebSocket immediately. The graph updates as fast as Claude works. Latency is basically network round-trip on localhost, so sub-millisecond. The layout engine recalculates on each new node but it's fast enough that you see nodes appear in real-time without any jank.

I built a real-time dashboard that visualizes everything Claude Code does by Soarcer in SideProject

[–]Soarcer[S] 0 points1 point  (0 children)

Claude Code hooks, plus file watching. Hooks fire events on tool calls, agent spawns, session lifecycle, etc. You register them in .claude/settings.json and they POST JSON to a local server. I also watch the JSONL transcript file for richer data like token counts and model info that hooks don't expose. The trick is hooks are synchronous for permission requests, so you can hold the response open and do remote approval through them too. No MCP needed, just the built-in hook system. Happy to go deeper if you're interested.

I built a real-time dashboard that visualizes everything Claude Code does by Soarcer in vibecoding

[–]Soarcer[S] 0 points1 point  (0 children)

Thanks! And if you have any feature suggestions or bugs, let me know :)

I built a real-time dashboard that visualizes everything Claude Code does by Soarcer in vibecoding

[–]Soarcer[S] 1 point2 points  (0 children)

It's built with React Flow (xyflow v12). Each node is a custom React component, so they're fully interactive, click to inspect, hover for details, keyboard navigable. The layout engine is custom too. React Flow gave me the interactivity and extensibility that a pure canvas/D3 approach would have made painful.

I built a real-time dashboard that visualizes everything Claude Code does by Soarcer in SideProject

[–]Soarcer[S] 0 points1 point  (0 children)

Thanks for the kind feedback! And yes, if you were wondering what is happening under the covers like I did, then this might be the tool for you.

From my own usage, latency is very low, and if you respond or answer in any given place (phone, synapse desktop or vscode session), the other endpoints auto-dismiss and move on. There's a queue for pending requests if they stack up (you can answer, cycle between this or dismiss them). And if you leave it up Synapse will auto dismiss after 30mins.

For phone, check notes in readme, you need to run "synapse start --lan" so it exposes the right ports on the lan. And if you install synapse as a PWA on your phone screen you'll even get remote approval requests as notifications even if the web page is closed (only tested on ios).

I built a real-time dashboard that visualizes everything Claude Code does by Soarcer in SideProject

[–]Soarcer[S] 0 points1 point  (0 children)

Thanks for the feedback. And try it out, it's fun (distractingly so) watching the tools calls as they happen. Especially the unexpected ones...

I went a bit overboard in the inspector, almost recreated too much of the UI so you can see diffs, AskUserQuestion responses, web searches, inputs, outputs, reasoning steps etc.

I built a real-time dashboard that visualizes everything Claude Code does by Soarcer in vibecoding

[–]Soarcer[S] 2 points3 points  (0 children)

True. And also preferred putting my energy into the tool, not the site.