# Claude MPM Dashboard Hub

Comprehensive monitoring and visualization for your AI-powered development workflow

3 Production Dashboards
3 Development Tools
4 Legacy Dashboards

## Production Dashboards

Stable

### Integrated Dashboard

Full-Featured Monitor

The main production dashboard with all monitoring capabilities in a single tabbed interface. Features real-time WebSocket connections, activity visualization, comprehensive event tracking, and file operation monitoring.

WebSocket Activity Tree File Tracking Event Stream Agent Monitor
Launch Main Dashboard

### Events Monitor

Real-time Event Stream

Dedicated event streaming dashboard with React components for enhanced performance and real-time updates.

React Real-time Filtering
Open Events Monitor

### System Monitors

Performance Metrics

System performance monitoring with detailed metrics, resource usage tracking, and health indicators.

Metrics Performance Health
View Monitors

## Development & Testing

Beta

### React Dashboard

Next Generation UI

New React-based dashboard under active development. Features modern UI components and enhanced performance.

React 18 TypeScript Vite
Preview React UI

### Monitor Index

Overview Dashboard

Grid view of all monitoring capabilities, useful for testing and development of new monitor features.

Grid Layout Testing
Open Index

### Test Archive

Historical Test Files

Archive of test dashboards and experimental features used during development.

15+ Files Historical
Browse Archive

## Legacy Dashboards

Vanilla JS

### Activity Tree

Hierarchical View

Original activity visualization with tree structure. Lightweight vanilla JavaScript implementation.

D3.js Lightweight
Open Activity Tree

### Agents Monitor

Agent Tracking

Monitor agent activities, interactions, and status. Original implementation without React.

Agent Status Vanilla JS
View Agents

### Files Tracker

File Operations

Track file operations, changes, and history. Simple and efficient file monitoring interface.

File Ops History
Track Files

### Tools Monitor

Tool Usage

Monitor tool usage, performance metrics, and execution history.

Usage Stats Performance
Monitor Tools

## Quick Start Guide

### Getting Started

- Start with the Integrated Dashboard for full monitoring
- Ensure monitor server is running on port 8765
- Dashboards auto-connect to WebSocket server
- Use keyboard shortcuts for navigation (? for help)

### Connection Setup

- Default WebSocket port: 8765
- Auto-reconnect enabled on all dashboards
- Check connection status in top bar
- Manual reconnect available if needed

### Dashboard Types

- Production: Stable, fully-featured dashboards
- Development: Beta features and new UI
- Legacy: Original vanilla JS implementations
- Archive: Test files and experiments