My Studio
A playful, interactive dashboard that shows what my coding agents are up to in real time, built end to end in plain Node.js and vanilla JavaScript.

Project overview
I started this project to give my coding agents a dashboard instead of a plain task list, and to get hands on with 3D objects along the way. The backend is plain Node.js, no framework: a WebSocket server pushes live agent and session state to the browser, while chokidar watches and tails local log files to catch changes as they happen. The frontend is vanilla JavaScript too, no React or bundler, loaded straight in the browser with an import map and Three.js handling the 3D scene. Each agent is shown as a Yoshi character, coloured differently so I can tell them apart at a glance, standing in a small pixel-art office while it works. The model itself isn't mine — credit and thanks to ylonve on solid.ai, whose Yoshi let me focus on rigging and behaviour instead of modelling a character from scratch. A panel beside it tracks status, the current task, and how many tokens it has used, so the activity and the token data sit right next to the character doing the work.
Challenges
The main challenge was getting the 3D character behaviour right while keeping the scene light enough to run smoothly. Animating several characters at once, each reacting to its own agent's status, could easily have turned into a heavy render, so performance stayed a constant check throughout the build.


In action
Results
The project turned into a fun, visual way to keep an eye on my agents instead of reading a plain task list. Watching the characters work makes it easier to notice what's active, what's waiting, and how much token is being used, without it feeling like a chore to check.

