Claude Team Dashboard

🤖 Claude Agent Dashboard

Stop Flying Blind — Monitor Your Claude Code Agent Teams in Real Time

[](https://www.npmjs.com/package/claude-team-dashboard) [](https://www.npmjs.com/package/claude-team-dashboard) [](https://github.com/mukul975/claude-team-dashboard/blob/main/LICENSE) [](https://nodejs.org/) [](https://github.com/mukul975/claude-team-dashboard) [](https://vitejs.dev/) [](https://github.com/mukul975/claude-team-dashboard) [](https://github.com/mukul975/claude-team-dashboard/pulls) [](https://github.com/mukul975/claude-team-dashboard)

Monitor, track, and orchestrate your Claude Code agent teams from a single, unified dashboard — with zero-delay WebSocket streaming.

[Get Started](#-quick-start) · [See Features](#-features) · [Live Demo](#-demo) · [Docs](#-documentation) · [Contributing](#-contributing)

---

🎯 Why This Exists

The Problem

You're running multiple Claude Code agents across projects. Suddenly, chaos:

• Lost visibility: Which agent is doing what? You have no idea.
• Ghost messages: Agents talk to each other. You can't see it.
• Debug hell: Something breaks. You're stuck playing detective across 5 terminal windows.
• Task black holes: Tasks start, disappear, maybe finish. Who knows?

Running multi-agent workflows without monitoring is like driving blindfolded.

The Solution

Claude Agent Dashboard gives you X-ray vision into your agent teams:

✅ See everything — Live status, tasks, messages, system metrics ✅ Debug faster — Trace inter-agent communication in real time ✅ Stay in control — Know exactly what's happening, always ✅ Ship with confidence — Spot failures before they cascade

> Built by a cybersecurity researcher who knows that visibility is the first line of defense — even for AI agents.

---

✨ Highlights

🚀 Zero-Config Real-Time Monitoring

Launch the dashboard with one command. WebSocket streaming auto-discovers agents. No configuration needed.

📋 Visual Task Management

See tasks as they flow through your agent team. Progress bars, status badges, dependency chains — all live-updated.

💬 Inter-Agent Message Inspector

Debug coordination issues instantly. Watch agents communicate in real time with full message history and conversation threads.

🌗 Full Light & Dark Mode

Pixel-perfect theming with CSS custom properties. Every component — cards, charts, modals, toasts — adapts instantly when you toggle the theme.

♿ WCAG-Accessible Interface

Every button has a descriptive aria-label. Interactive elements have role, tabIndex, and keyboard handlers. Status components use aria-live. Modals trap focus. Fully navigable without a mouse.

⌨️ Keyboard-First Navigation

Command palette (⌘K), tab shortcuts (⌘1-8), and a shortcuts modal (?) so you never have to touch the mouse.

📊 Live Activity Chronology

Every agent action — timestamped, color-coded, filterable. Never wonder "what happened?" again.

🖥️ System Performance Metrics

Track CPU, memory, and network usage across your agent infrastructure. Catch performance bottlenecks before they cause failures.

🔔 Smart Alerts & Notifications

Instant desktop notifications for task completions, errors, and state changes. Full notification center with grouping, mark-read, and tab navigation.

📤 One-Click Data Export

Export any team's tasks and inbox messages as JSON or CSV directly from the header. Full data portability built-in.

📱 PWA — Installable & Offline-Ready

Works as a Progressive Web App — add to your home screen, get an app icon, and keep viewing cached data when the server is temporarily unreachable.

🔒 Enterprise-Grade Security

Audited by 6 security specialists. OWASP scrypt password hashing, auth rate limiting, token rotation, tight CSP, CORP/COOP, Permissions-Policy, strict input validation on every route, WebSocket heartbeat + rate limiting, and followSymlinks: false on all file watchers. Zero npm vulnerabilities.

> 📘 Deep dive: See [FEATURES.md](FEATURES.md) for the complete feature breakdown with architecture details.

---

🚀 Quick Start

✅ Prerequisites

• Node.js v18+ (Download)

⚡ Install via npm (Recommended)

npm install -g claude-team-dashboard
claude-dashboard

Or run without installing:

npx claude-team-dashboard

Open http://localhost:3001 and you're monitoring agents in real time.

🛠️ Clone & Build (Development)

# 1. Clone the repo
git clone https://github.com/mukul975/claude-team-dashboard.git
cd claude-team-dashboard

# 2. Install dependencies
npm install

# 3. Build the frontend
npm run build

# 4. Start the dashboard
npm start

Open http://localhost:3001 and you're monitoring agents in real time.

🔒 Password Authentication

The dashboard always requires a password. The first time you open it, you'll see a setup screen — create your password there. After that, you'll be asked for it on every visit.

First run:

npm start
→ open http://localhost:3001
→ "Set Up Dashboard" screen appears
→ enter and confirm your password
→ dashboard unlocks

Every run after that:

npm start
→ open http://localhost:3001
→ login screen appears
→ enter your password
→ dashboard unlocks

Your password is stored as a secure scrypt hash in ~/.claude/dashboard.key. The session token lives in sessionStorage and clears when the browser tab closes.

🎁 Dev Container (Instant Environment)

Have VS Code + Docker? Skip setup entirely:

1. Open project in VS Code
2. Click "Reopen in Container" when prompted
3. Everything auto-installs. You're ready.

🧑‍💻 Development Mode

To work on the frontend with hot-reload:

# Terminal 1 — backend
npm run server

# Terminal 2 — frontend dev server
npm run dev

What gets monitored automatically:

• ~/.claude/teams/ — Active agent teams
• ~/.claude/tasks/ — Task management
• /tmp/claude/{project}/tasks/ — Agent outputs

---

🎬 Demo

> 🎥 Demo video coming soon — Watch a 2-minute walkthrough of key features

Try it yourself: Clone the repo and run npm start — see your agent team in action within 60 seconds.

---

🏗️ How It Works

Architecture at a Glance

┌─────────────────────────────────────────────────────────┐
│  Frontend (React + Vite)                                │
│  ├── Real-time UI components                            │
│  ├── WebSocket client                                   │
│  └── State management                                   │
└────────────────┬────────────────────────────────────────┘
                 │ WebSocket (bidirectional)
┌────────────────▼────────────────────────────────────────┐
│  Backend (Node.js + Express)                            │
│  ├── WebSocket server                                   │
│  ├── Agent event aggregation                            │
│  └── File system monitoring (chokidar)                  │
└────────────────┬────────────────────────────────────────┘
                 │ Reads agent logs
┌────────────────▼────────────────────────────────────────┐
│  Claude Code Agent Teams                                │
│  ├── ~/.claude/projects/{project}/*.jsonl               │
│  └── Real-time agent session logs                       │
└─────────────────────────────────────────────────────────┘

📬 Inbox Monitoring

How Claude Code Agent Teams Communicate

When Claude Code creates a team, it creates this folder structure:

~/.claude/teams/
└── {team-name}/
    ├── config.json          ← team configuration & members
    └── inboxes/
        ├── team-lead.json   ← messages for team-lead
        ├── researcher.json  ← messages for researcher
        └── ...              ← one file per agent

Each inbox file is a JSON array of messages:

[
  {
    "from": "team-lead",
    "text": "Your task assignment...",
    "summary": "Brief summary",
    "timestamp": "2026-02-18T10:00:00.000Z",
    "read": false,
    "color": "green"
  }
]

Real-Time Inbox Monitoring

The dashboard watches ~/.claude/teams/*/inboxes/*.json with a dedicated chokidar watcher. Every time an inbox file changes:

• The new messages are read immediately
• An inbox_update WebSocket event is pushed to all connected dashboard clients
• The UI updates in real-time — no polling required

On initial connection, allInboxes is included in the initial_data payload so you see all current messages instantly.

What the Dashboard Shows

| Feature | Description | |---------|-------------| | Inbox Viewer | Browse all teams → agents → message threads | | Unread Badges | Red badge on team cards and Inboxes tab | | Activity Timeline | All agent messages in chronological order | | Desktop Notifications | Browser notifications for new messages | | Search | Full-text search across all messages | | Export | Download messages as JSON or CSV |

API Endpoints

| Endpoint | Description | |----------|-------------| | GET /api/inboxes | All teams' inboxes at once | | GET /api/teams/:teamName/inboxes | All agents' inboxes for one team | | GET /api/teams/:teamName/inboxes/:agentName | Specific agent's inbox |

WebSocket Events

// On connect — full inbox snapshot
{ type: 'initial_data', allInboxes: { [teamName]: { [agentName]: { messages, messageCount } } } }

// On inbox change — targeted update
{ type: 'inbox_update', teamName: string, inboxes: { [agentName]: { messages, messageCount } } }

---

Project Structure

claude-team-dashboard/
├── src/                      # Frontend source code
│   ├── components/           # React UI components
│   │   ├── InboxViewer.jsx       # Browse agent inbox messages
│   │   └── TeamTimeline.jsx      # Chronological activity timeline
│   ├── hooks/                # Custom React hooks
│   │   └── useInboxNotifications.js  # Browser notifications for new messages
│   ├── utils/                # Shared utilities
│   │   ├── messageParser.js      # Natural language message parsing
│   │   └── formatting.js         # Time, color, initials utilities
│   ├── config/               # Configuration constants
│   ├── styles/               # CSS stylesheets
│   └── test/                 # Test setup
├── .devcontainer/            # VS Code dev container config
├── .github/                  # GitHub templates & workflows
│   └── workflows/            # CI/CD pipelines
├── test/                     # Test files
├── dist/                     # Production build output
├── server.js                 # WebSocket backend server
├── start.js                  # Launcher script
├── cleanup.js                # Process cleanup utility
├── config.js                 # Server configuration
├── vite.config.js            # Vite bundler config
├── FEATURES.md               # Detailed feature list
├── CONTRIBUTING.md           # Contribution guide
└── CODE_OF_CONDUCT.md        # Community standards

---

🛠️ Built With

React 19.2 UI Framework

Node.js 18+ Backend Runtime

Vite 7.x Build Tool

JavaScript ES6+ Core Language

Core Technologies:

• WebSocket (ws) — Real-time bidirectional communication
• Express.js — Backend API framework
• Chokidar — File system monitoring for agent logs
• Lucide React — Icon library
• Vitest — Unit testing framework

---

📖 Documentation

| Document | Description | |----------|-------------| | [FEATURES.md](FEATURES.md) | Complete feature breakdown with technical architecture | | [NATURALLANGUAGEANDLIFECYCLE.md](NATURALLANGUAGEANDLIFECYCLE.md) | 📖 Comprehensive guide to message parsing and team lifecycle tracking | | [CONTRIBUTING.md](CONTRIBUTING.md) | How to contribute — setup, coding standards, PR process | | [CODEOFCONDUCT.md](CODEOFCONDUCT.md) | Community guidelines and standards | | [Natural Language Features](#-natural-language-message-parsing) | How the dashboard translates technical agent messages to readable format | | [Team Lifecycle Tracking](#-team-lifecycle-tracking) | Automatic team monitoring, archiving, and history management |

Need help? Open a Discussion or check existing Issues.

---

💬 Natural Language Message Parsing

One of the dashboard's most powerful features is its ability to automatically translate technical agent messages into human-readable natural language. This makes it easy to understand what your agents are doing without decoding JSON or technical jargon.

How It Works

The dashboard intelligently parses inter-agent messages and converts them from raw technical format to friendly, contextual descriptions:

Message Type Detection

The parser automatically identifies message types and formats them appropriately:

Status Updates

// Raw message:
{"type": "idle_notification", "lastTaskSubject": "Fix authentication bug"}

// Displayed as:
💤 Finished "Fix authentication bug" - ready for next task

Task Completions

// Raw message:
{"type": "task_completed", "taskSubject": "Write documentation"}

// Displayed as:
✅ Completed: Write documentation

Task Assignments

// Raw message:
{"type": "task_assigned", "taskSubject": "Review pull request"}

// Displayed as:
📋 Started working on: Review pull request

Coordination Messages

// Raw message:
{"type": "coordination", "message": "Waiting for backend team to finish API endpoint"}

// Displayed as:
🤝 Waiting for backend team to finish API endpoint

Questions

// Raw message:
{"type": "question", "message": "Should I use the staging or production database?"}

// Displayed as:
❓ Should I use the staging or production database?

Message Classification

Messages are automatically categorized into four types with distinct visual styling:

| Type | Icon | Color | Use Case | |------|------|-------|----------| | Status | 📊 | Blue | General updates, progress reports, idle notifications | | Completion | ✅ | Green | Task completions, success notifications | | Coordination | 🤝 | Purple | Team communication, help requests, discussions | | Question | ❓ | Yellow | Questions requiring attention or clarification |

Smart Features

Summary Prioritization: If a message includes a summary field, the dashboard displays it instead of the full technical content, making messages more concise.

Truncation: Long messages are automatically truncated to 150 characters with "..." to prevent UI clutter.

Fallback Handling: If a message can't be parsed as JSON, it's displayed as-is with intelligent handling of empty or malformed messages.

Real-Time Translation: Messages are parsed and displayed instantly as they arrive via WebSocket — no delays or batch processing.

Viewing Messages

The dashboard provides two views for agent communication:

1. Live Communication Panel (LiveCommunication.jsx)

• Chat-style interface showing conversation flow
• Team selector to focus on specific team messages
• Auto-scroll feature (can be toggled)
• Shows sender → recipient for each message
• Updates every 5 seconds

2. Agent Inter-Communication Stream (RealTimeMessages.jsx)

• Aggregated view across all teams
• Filter messages by type (all, status, completion, coordination, question)
• Displays last 100 messages across all teams
• Shows team context for each message
• Visual stats showing breakdown by message type

Technical Implementation

The parsing logic is located in:

• File: src/components/RealTimeMessages.jsx (lines 8-83)
• Function: `parseMessageToNatural

…

Source & license

This open-source MCP server is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: mukul975
• Source: mukul975/claude-team-dashboard
• License: MIT
• Homepage: https://www.npmjs.com/package/claude-team-dashboard

Install and usage instructions live in the source repository linked above.