Claude MPM - Dashboard Monitors

# Claude MPM Dashboard

Real-time monitoring and visualization tools

Socket.IO Server: localhost:8765

## Getting Started

Each monitor connects to the Socket.IO server at `localhost:8765` to receive real-time events.

All monitors use a shared Zustand store for state management with clean separation of concerns.

To test with demo data, append `?demo` to any monitor URL.

🤖
Agents Monitor
Track agent activities, status, and hierarchies in real-time

- Live agent status tracking
- Agent hierarchy visualization
- Task progress monitoring
- Search and filter capabilities

LIVE
🛠️
Tools Monitor
Monitor tool operations, performance, and execution history

- Active tool tracking
- Operation timeline
- Success rate statistics
- Performance metrics

LIVE
📁
Files Monitor
Track file operations, modifications, and system interactions

- File operation tracking
- Working directory display
- Operation statistics
- Recent activity feed

LIVE
📊
Events Stream
Raw event stream with filtering, search, and export capabilities

- Real-time event stream
- Advanced filtering
- JSON syntax highlighting
- Export functionality

NEW
📈
Full Dashboard
Complete dashboard with all monitoring capabilities combined

- All monitors in one view
- Tabbed interface
- Session management
- Export capabilities

🎮
Demo Mode
Test monitors with simulated data without live connection

- Simulated events
- Test all features
- No server required
- Perfect for development

DEMO

## Architecture

All monitors share a centralized Zustand store (`/js/stores/dashboard-store.js`) that manages:

- Socket.IO connection and reconnection logic
- Event processing and state updates
- Data transformations and filtering
- Statistics and performance metrics

Each page subscribes to specific state slices for optimal performance and clean separation of concerns.