Case Study 01 · Full-Stack · Active

DevLab HUD

A Claude Code plugin that shows what is happening inside an AI coding session, live: context use, cost, subagents, changed files and loaded tools.

RoleSole author and release owner

DevLab HUD Usage tab: a context-window bar, token breakdown by source, last-turn cache reuse and cost, and two running subagents. — The Usage tab shows what fills the context window and what each turn costs.

DevLab HUD Files tab listing nine files touched in the session, each with lines added and removed and a new-file marker. — The Files tab tracks every file the session changed, with line counts per file.

DevLab HUD Background tab: seven shell processes with run time, owning subagent, idle warnings, exit codes and Stop and Restart controls. — The Background tab flags idle shell processes and lets you stop or restart them.

Problem

In a long AI coding session, you cannot see what the agent is doing or spending. You cannot see what is filling the context window, what the subagents cost, which files changed, or which tools are loaded. The runtime has all of that information, but the developer never sees it.

Solution

A side pane that shows that information live, inside Claude Code. The plugin registers hooks with the Claude Code engine and draws a side pane you can focus. Small, single-purpose modules share one state layer, and one composition root owns layout, hotkeys and focus. It reads engine events and attributes token usage across the main session and every subagent.

Highlights

Tells a real repeat loop apart from a shell command that is only waiting, so loop warnings can be trusted.
Restarting a background process waits for the old one to release its port instead of racing it, so restarts are safe.
One key namespace covers tools, MCP connectors and skills, so the pane can defer or block any of them the same way.
Cost reporting stays sane for a model it has no pricing for, and a test pins that behavior.
Tests run on the plugin SDK's own harness and cover subagents, background processes, loops, files, the pane and usage.

Outcome

Released through a written qualification process: (1) validate and test checks pass on the dev branch; (2) the build runs live for a full session without touching the installed copy; (3) it is versioned, merged and tagged, and ships with a marketplace manifest for in-place installs and upgrades.

How the Work Ran

A solo project, run like a product. Numbered milestones to a release, a written qualification checklist that gated every merge, two branches, a tag per release, semantic versioning with written rules and a changelog row per version.

Tech

TypeScript
Claude Code
Git
GitHub