<p><img src="/assets/projects/claude-mission-control/showcase.gif" alt="Mission Control Dashboard — live demo"></p>
<h2>The Problem</h2>
<p>Running multiple Claude Code agents means Alt-Tabbing between terminals, hoping nothing goes wrong. You can't see which agent is stuck, which one is looping, or how much it's all costing. There's no coordination, no visibility, and no way to intervene without switching to the right terminal window.</p>
<p>Existing tools solve pieces of the problem — terminal HUDs for single agents, TUI managers without web dashboards, read-only event timelines — but none combine monitoring, control, cost tracking, and mobile access in one tool.</p>
<h2>What I Built</h2>
<p>A real-time command center that shows all your Claude Code agents in one browser tab. Every tool call streams in live via WebSocket. You can send instructions to any agent from the dashboard. Missions auto-create from agent activity. Real API costs are computed from Claude Code's JSONL session logs.</p>
<p><img src="/assets/projects/claude-mission-control/dashboard.png" alt="Dashboard overview"></p>
<h3>Key Features</h3>
<table>
<thead>
<tr>
<th>Feature</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Live Agent Monitoring</strong></td>
<td>Status dots (active/idle/stuck), current tool + target file, diff stats, session duration</td>
</tr>
<tr>
<td><strong>Instruction Injection</strong></td>
<td>Send messages to any running agent — delivered via stderr on their next tool call</td>
</tr>
<tr>
<td><strong>Anti-Pattern Detection</strong></td>
<td>STUCK, LOOP, SPIRAL, ERRORS, MARATHON alerts with browser desktop notifications</td>
</tr>
<tr>
<td><strong>Real Cost Tracking</strong></td>
<td>Actual token costs from JSONL logs — input, output, cache tokens, per-model and per-session breakdowns</td>
</tr>
<tr>
<td><strong>Mission Board</strong></td>
<td>Auto-created from agent sessions and subagent descriptions, auto-completed on session end</td>
</tr>
<tr>
<td><strong>Mobile Companion</strong></td>
<td>QR code login, touch-optimized tabs, monitor agents from your phone on WiFi</td>
</tr>
<tr>
<td><strong>7-Layer Security</strong></td>
<td>Origin gate, path guard, WS verify, connection limits, payload size, field limits, tool scanning</td>
</tr>
<tr>
<td><strong>Expandable Timeline</strong></td>
<td>Click any event to see full tool input/output — diffs, commands, errors, stack traces</td>
</tr>
</tbody>
</table>
<h3>Mobile Companion</h3>
<p><img src="/assets/projects/claude-mission-control/mobile-agents.png" alt="Mobile agents view">
<img src="/assets/projects/claude-mission-control/mobile-timeline.png" alt="Mobile timeline">
<img src="/assets/projects/claude-mission-control/mobile-missions.png" alt="Mobile missions">
<img src="/assets/projects/claude-mission-control/mobile-usage.png" alt="Mobile usage">
<img src="/assets/projects/claude-mission-control/mobile-login.png" alt="Mobile login"></p>
<h3>Architecture</h3>
<pre><code>flowchart LR
    A["Claude Code Agent"] -->|"hook fires"| H["Hook Script"]
    H -->|"POST /api/events"| S["Mission Control Server"]
    S -->|"WebSocket broadcast"| D["Dashboard"]
    I["You"] -->|"POST /api/instructions"| S
    S -->|"GET on next hook"| H
    H -->|"stderr warning"| A
</code></pre>
<p>The system uses Claude Code's hook system (PreToolUse, PostToolUse, Stop) to capture agent activity. Events flow to a SQLite database, then broadcast to connected dashboards via WebSocket. Instructions travel the reverse path — queued in the database, picked up by the hook on the agent's next tool call, and injected as a stderr warning.</p>
<h2>Tech Decisions</h2>
<h3>Minimal Dependencies</h3>
<p>The entire server runs on just 2 runtime dependencies: <code>better-sqlite3</code> for the database and <code>ws</code> for WebSocket. No Express, no React, no build step. The dashboard is vanilla HTML/CSS/JS served directly. This keeps the install fast and the attack surface small.</p>
<h3>Hook-Based Architecture</h3>
<p>Rather than wrapping or proxying Claude Code, Mission Control hooks into it non-invasively. The hook script runs on every tool call and POSTs events to the server. This means zero interference with normal Claude Code operation — if the server is down, agents keep working normally.</p>
<h3>SQLite Over Postgres</h3>
<p>An embedded database eliminates external dependencies. For a local development tool monitoring a handful of agents, SQLite's single-writer model is perfectly adequate. Historical daily cost data persists in a summary table even after raw events are purged (default 90 days).</p>
<h2>What Building This Taught Me</h2>
<h3>1. Instruction delivery is harder than monitoring</h3>
<p>Monitoring is straightforward — hooks fire, events stream, dashboard updates. But sending instructions <em>back</em> to agents requires working within Claude Code's constraints. There's no push channel to agents. Instructions must be queued and delivered when the agent's hook fires on the next tool call. If an agent is idle, the instruction waits. This async delivery model required careful UX — showing pending vs. delivered states, toast notifications on delivery, and clear documentation about the limitation.</p>
<h3>2. Anti-pattern detection needs careful thresholds</h3>
<p>Initial thresholds for STUCK (no events) and LOOP (identical tool calls) triggered too many false positives. A 30-second STUCK threshold fired during normal thinking pauses. Counting all consecutive identical tool calls as loops caught legitimate repeated reads. The final thresholds — 2 minutes for STUCK, 3+ identical <em>write</em> tool calls for LOOP — required real-world testing across different agent workloads.</p>
<h3>3. Security for local tools still matters</h3>
<p><img src="/assets/projects/claude-mission-control/security.png" alt="Security panel with 7-layer defense"></p>
<p>Even though Mission Control only accepts connections from localhost and private network IPs, agents can output sensitive data — API keys, tokens, credentials. The 7-layer security system with secret scanning, constant-time auth comparison, and rate limiting on login attempts wasn't over-engineering. It's defending against accidental exposure when you share your screen or open the mobile companion.</p>
<p><img src="/assets/projects/claude-mission-control/login.png" alt="Login page"></p>
<p><img src="/assets/projects/claude-mission-control/setup.gif" alt="Setup demo"></p>
<p><img src="/assets/projects/claude-mission-control/help.png" alt="Keyboard shortcuts help"></p>
<h2>What I'd Do Differently</h2>
<p>Add a plugin system from the start. Users want custom alert rules, custom dashboard panels, and integrations with tools like Linear or Slack. The current monolithic architecture makes this harder to retrofit than it would have been to design for.</p>
<h2>References</h2>
<ul>
<li><a href="https://docs.anthropic.com/en/docs/claude-code/hooks">Claude Code Hooks Documentation</a></li>
<li><a href="https://github.com/chiphuyen/sniffly">sniffly</a> — JSONL log parsing inspiration</li>
<li><a href="https://github.com/jarrodwatts/claude-hud">claude-hud</a> — Context window health gauge inspiration</li>
<li><a href="https://github.com/vicarious11/agenttop">agenttop</a> — Anti-pattern detection inspiration</li>
</ul>
<h2>Links</h2>
<ul>
<li><strong>GitHub:</strong> <a href="https://github.com/Cyvid7-Darus10/claude-mission-control">claude-mission-control</a></li>
</ul>


Projects.

Claude Mission Control: Real-Time Command Center for AI Agents