nntrivi2001
62425b2f58
Internal SmartGift build of a Claude Code monitoring dashboard. Lanes: a durable unit of parallel agent work, one per working directory, tracked across session restarts. Managed lanes are git worktrees the dashboard provisions and can reset or remove behind a three-check destroy guard and a counted preflight; adopted lanes are directories you already own and are never destroyable. Pipelines: a lane moves through pipeline stages. A stage the agent declares with evidence renders green; a stage inferred from the tool-event stream renders dashed amber and never counts as done. Detection is forward-only within a 30-minute window, and never writes the declared stage. Workspace: one page at /run with a lane grid, the selected lane's pipeline, and a full Claude console behind a disclosure.
Claude Code Agent Monitor for VS Code
Claude Code Agent Monitor brings a high-fidelity, real-time dashboard for your Claude Code AI sessions directly into your VS Code workspace. Monitor token usage, track agent health, and view deep analytics without switching windows.
🚀 Key Features
📊 Integrated Dashboard
Open the full agent monitoring dashboard in a dedicated VS Code tab. Supports real-time updates via WebSockets and local-first data storage.
🩺 Live Agent Health
Track all 5 agent states in your sidebar with color-coded status indicators:
- Working: Active subagents currently processing tasks.
- Connected: Agents initialized and ready.
- Idle: Standby agents.
- Completed: Successfully finished tasks.
- Error/Failed: Instantly spot where things went wrong.
📈 Usage & Analytics
- Token Tracking: Real-time display of Billions (B) or Millions (M) of tokens consumed.
- Cost Calculation: Live estimate of total USD cost based on current model pricing.
- Event Frequency: High-signal stats on events per session and subagent spawning.
🧭 Deep Navigation
Jump directly to specific views from the sidebar:
- Main Dashboard: Global overview.
- Analytics Hub: Deep dives into model performance.
- Agent Board: Kanban-style view of subagent progress.
- Recent Sessions: One-click access to your last 10 Claude sessions.
🛠️ Getting Started
1. Requirements
Ensure you have the Claude Code Agent Monitor server running locally:
npm install
npm run dev
2. Installation
- Search for "Claude Code Agent Monitor" in the VS Code Marketplace.
- Click Install.
3. Usage
- Click the Radar/Dashboard icon in the Activity Bar.
- The extension automatically detects your local server on ports 5173 (dev) or 4820 (prod).
- Use the Refresh button in the sidebar to manually force an update.
📦 Publishing & Development
To generate a .vsix file for manual installation or marketplace upload:
- Install
vsceglobally:npm install -g @vscode/vsce - Navigate to the extension folder:
cd vscode-extension - Run the package command:
This will generate
vsce packageclaude-code-agent-monitor-1.0.0.vsix.
📜 License
Internal SmartGift build — all rights reserved.
Developed with ❤️ for the AI Engineer community.