🤖 Claude代理仪表板

停止盲目飞行——实时监控你的克劳德代码代理团队

](https://www.npmjs.com/package/claude-team-dashboard) ](https://www.npmjs.com/package/claude-team-dashboard) ![License: MIT](https://github.com/mukul975/claude-team-dashboard/blob/main/LICENSE) ](https://nodejs.org/) ![JavaScript](https://github.com/mukul975/claude-team-dashboard) ![Vite](https://vitejs.dev/) ![WebSocket](https://github.com/mukul975/claude-team-dashboard) ![PRs Welcome](https://github.com/mukul975/claude-team-dashboard/pulls) ](https://github.com/mukul975/claude-team-dashboard)

监控、跟踪和协调 你的克劳德代码来自a的代理团队 单一、统一的仪表板 --与 零延迟WebSocket流.

开始使用 · 查看功能 · 现场演示 · 文档 · 贡献

______________________________________________________________________

🎯 为什么存在

问题

您正在跨项目运行多个Claude Code代理。突然，混乱：

能见度降低哪个特工在做什么？你完全不知道。
幽灵消息特工们互相交谈。你看不见。
调试地狱：有东西坏了。你被困在5个终端窗口中扮演侦探。
任务黑洞任务开始、消失，也许完成。谁知道呢？

在没有监控的情况下运行多代理工作流就像蒙着眼睛开车。

解决方案

Claude Agent Dashboard为您提供 X射线视觉进入您的代理团队:

✅ 看到一切 --实时状态、任务、消息、系统指标 ✅ 调试速度更快 --实时跟踪代理间通信 ✅ 保持控制 --总是确切地知道发生了什么 ✅ 满怀信心地发货 --在故障级联之前发现故障

由a建造 网络安全研究员 谁知道呢 能见度是第一道防线 --即使是AI代理。

______________________________________________________________________

✨ 亮点

🚀 零配置实时监控

使用以下命令启动仪表板 一个命令WebSocket流媒体自动发现代理。无需配置。

📋 可视化任务管理

查看任务在代理团队中的流动情况。 进度条、状态徽章、依赖链——所有这些都是实时更新的。

💬 代理间消息检查器

立即调试协调问题。观察代理与以下对象实时通信 完整消息历史记录 和 对话线索.

🌗 全亮暗模式

具有CSS自定义属性的像素完美主题。当你切换主题时，每个组件——卡片、图表、模态、祝酒词——都会立即适应。

♿ WCAG无障碍界面

每个按钮都有一个描述性 aria-label互动元素有 role, tabIndex，以及键盘处理程序。状态组件使用 aria-live.模式会吸引注意力。无需鼠标即可完全导航。

⌨️ 键盘优先导航

命令面板(⌘K)，选项卡快捷方式(⌘1-8)，以及快捷方式模式(?)所以你永远不必碰鼠标。

📊 实时活动年表

每一个代理人行动-- 带时间戳的, 颜色编码, 可过滤的再也不想知道“发生了什么事？”。

🖥️ 系统性能指标

跟踪整个代理基础架构的CPU、内存和网络使用情况。捕捉性能瓶颈之前它们会导致失败。

🔔 智能警报和通知

任务完成、错误和状态更改的即时桌面通知。满的 通知中心 使用分组、标记已读和选项卡导航。

📤 一键数据导出

将任何团队的任务和收件箱邮件导出为 JSON或CSV 直接从标题。内置完整的数据可移植性。

📱 PWA——可安装且离线就绪

作为一个 渐进式网络应用 --添加到主屏幕，获取应用程序图标，并在服务器暂时无法访问时继续查看缓存数据。

🔒 企业级安全

由6名安全专家审核。OWASP scrypt密码散列、身份验证速率限制、令牌轮换、严格CSP、CORP/COOP、权限策略、每条路由上的严格输入验证、WebSocket心跳+速率限制，以及 followSymlinks: false 在所有文件查看器上。零npm漏洞。

📘 深潜：参见 功能.md 查看完整的功能分解和架构细节。

______________________________________________________________________

🚀 快速开始

✅ 先决条件

Node.js v18+(下载)

⚡ 通过npm安装（推荐）

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

或者在不安装的情况下运行：

npx claude-team-dashboard

打开 http://localhost:3001 你正在实时监控特工。

🛠️ 克隆和构建（开发）

# 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

打开 http://localhost:3001 你正在实时监控特工。

🔒 密码验证

仪表板 始终需要密码。第一次打开它时，您将看到一个设置屏幕——在那里创建密码。之后，每次访问都会要求您提供。

第一轮：

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

之后的每一次跑步：

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

您的密码存储为安全密码 scrypt hash in ~/.claude/dashboard.key。会话令牌位于 sessionStorage 并在浏览器选项卡关闭时清除。

🎁 开发容器（即时环境）

有VS代码+Docker吗？ 完全跳过设置:

在VS Code中打开项目
出现提示时，单击“在容器中重新打开”
一切都是自动安装的。你准备好了。

🧑‍💻 发展模式

要使用热重载在前端工作，请执行以下操作：

# Terminal 1 — backend
npm run server

# Terminal 2 — frontend dev server
npm run dev

自动监控的内容：

~/.claude/teams/ --主动代理团队
~/.claude/tasks/ --任务管理
/tmp/claude/{project}/tasks/ --代理输出

______________________________________________________________________

🎬 演示

🎥 演示视频即将发布 --观看关键功能的2分钟演练

动手试一试：克隆仓库并运行 npm start --在60秒内看到你的代理团队在行动。

______________________________________________________________________

🏗️ 运作原理

建筑一瞥

┌─────────────────────────────────────────────────────────┐
│  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                       │
└─────────────────────────────────────────────────────────┘

📬 收件箱监控

Claude代码代理团队如何沟通

当Claude Code创建团队时，它会创建以下文件夹结构：

~/.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

每个收件箱文件都是一个JSON消息数组：

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

实时收件箱监控

仪表板显示 ~/.claude/teams/*/inboxes/*.json 有一个专门的乔克达尔观察者。每次收件箱文件更改时：

新消息会立即被阅读
一 inbox_update WebSocket事件被推送到所有连接的仪表板客户端
UI实时更新，无需轮询

在初始连接时， allInboxes 包含在 initial_data payload，让您立即看到所有当前消息。

仪表板显示什么

特性	描述
收件箱查看器	浏览所有团队→ 代理→ 消息线程
未读徽章	团队卡和收件箱选项卡上的红色徽章
活动时间线	所有代理消息按时间顺序排列
桌面提醒	新邮件的浏览器通知
搜索	在所有邮件中进行全文搜索
出口	以JSON或CSV格式下载消息

API终点

端点	描述
`GET /api/inboxes`	所有团队的收件箱同时打开
`GET /api/teams/:teamName/inboxes`	一个团队的所有代理收件箱
`GET /api/teams/:teamName/inboxes/:agentName`	特定代理的收件箱

WebSocket事件

// 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 } } }

______________________________________________________________________

项目结构

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

______________________________________________________________________

🛠️ 构建于

React 19.2

UI Framework

Node.js 18+

Backend Runtime

Vite 7.x

Build Tool

JavaScript ES6+

Core Language

核心技术：

Websocket（WS） --实时双向通信
Express.js -后端API框架
乔基达尔 --代理日志的文件系统监控
Lucide反应 --图标库
Vitest --单元测试框架

______________________________________________________________________

📖 文档

文档	描述
功能.md	完整的功能分解和技术架构
自然语言生命周期.md	📖 综合指南消息解析和团队生命周期跟踪
贡献.md	如何做出贡献——设置、编码标准、公关流程
代码_OF_CONDUCT.md	社区指南和标准
自然语言特征	仪表板如何将技术代理消息转换为可读格式
团队生命周期跟踪	自动团队监控、归档和历史管理

______________________________________________________________________

💬 自然语言消息解析

仪表板最强大的功能之一是它能够 自动将技术代理消息翻译成人类可读的自然语言这使得在不解码JSON或技术术语的情况下，很容易理解您的代理在做什么。

运作原理

仪表板智能地解析代理间消息，并将其从原始技术格式转换为友好的上下文描述：

消息类型检测

解析器会自动识别消息类型并对其进行适当的格式化：

状态更新

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

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

任务完成情况

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

// Displayed as:
✅ Completed: Write documentation

任务分配

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

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

协调信息

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

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

问题

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

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

消息分类

消息自动分为四种类型，具有不同的视觉样式：

类型	图标	颜色	用例
状态	📊	蓝色	常规更新、进度报告、空闲通知
完成	✅	绿色	任务完成、成功通知
协调	🤝	紫色	团队沟通、帮助请求、讨论
问题	❓	黄色	需要注意或澄清的问题

智能功能

总结优先级：如果消息中包含 summary 在字段中，仪表板显示它，而不是完整的技术内容，使消息更加简洁。

截断：长消息会自动用“…”截断为150个字符，以防止UI混乱。

后备处理：如果消息无法解析为JSON，则会按原样显示，并智能处理空消息或格式错误的消息。

实时翻译：消息在通过WebSocket到达时立即解析和显示，没有延迟或批处理。

查看消息

仪表板为代理通信提供了两个视图：

1.实时通信面板 (LiveCommunication.jsx)

显示对话流程的聊天风格界面
团队选择器，专注于特定的团队信息
自动滚动功能（可切换）
显示发件人→ 每条消息的收件人
每5秒更新一次

2.代理间通信流 (RealTimeMessages.jsx)

所有团队的聚合视图
按类型筛选消息（全部、状态、完成、协调、问题）
显示所有团队的最后100条消息
显示每条消息的团队上下文
按消息类型显示细分的可视化统计数据

技术实现

解析逻辑位于：

文件: src/components/RealTimeMessages.jsx （第8-83行）
函数: parseMessageToNatural(text, summary)

消息源：邮件从Claude Code收件箱文件中提取：

~/.claude/teams/{team-name}/inboxes/{agent-name}.json

API终点:

GET /api/teams/:teamName/inboxes -获取团队的所有收件箱
GET /api/teams/:teamName/inboxes/:agentName -获取特定代理的收件箱

示例：消息流

1. Agent sends technical message
   → Claude Code writes to ~/.claude/teams/my-team/inboxes/agent-1.json

2. Dashboard fetches message via API
   → GET /api/teams/my-team/inboxes

3. Parser processes message
   → parseMessageToNatural(rawMessage)

4. Natural language message displayed
   → "💤 Finished 'Fix bug' - ready for next task"

好处

无需技术知识任何人都能理解特工们在做什么
快速状态检查：浏览沟通小组，了解团队进展
情境理解：消息类型提供即时上下文
减少认知负荷：无需解析JSON或技术日志
即时清晰度：消息到达时会实时翻译

______________________________________________________________________

🔄 团队生命周期跟踪

仪表板会自动跟踪 每个代理团队的完整生命周期 从创建到完成，自动存档以供历史参考。

自动团队监控

仪表板监视Claude Code团队目录(~/.claude/teams/)实时跟踪：

团队创建

当有新的 config.json 出现
日志创建时间戳
开始活动监控
控制台通知： 🎉 New team created: {team-name}

团队活动

跟踪每次配置更改
更新“上次看到”时间戳
监控任务进度
记录所有代理操作
控制台通知： 🔄 Team active: {team-name}

团队完成

删除团队目录时检测到
触发自动存档
记录最终状态
计算会话持续时间
控制台通知： 👋 Team completed: {team-name} - archiving for reference...

自动归档系统

当一个团队完成工作时，仪表板 自动存档所有团队数据 以供将来参考。

什么被归档

完成团队快照:

团队配置（名称、描述、负责人、成员）
所有任务（主题、描述、状态、所有者、依赖关系）
团队统计（成员数、任务数、完成率）
生命周期元数据（创建日期、持续时间、上次活动）

自然语言概述:

{
  "teamName": "dashboard-devops",
  "archivedAt": "2026-02-10T15:30:00.000Z",
  "summary": {
    "overview": "Team 'dashboard-devops' with 4 members worked on 12 tasks and completed 10.",
    "created": "Started on 02/10/2026",
    "members": [
      "team-lead (general-purpose)",
      "backend-dev (general-purpose)",
      "ui-polish-dev (general-purpose)",
      "archive-viewer-dev (general-purpose)"
    ],
    "accomplishments": [
      "✅ Fix Communication tab to display natural language messages properly",
      "✅ Verify and improve team lifecycle archiving",
      "✅ Polish dashboard UI for better user experience",
      "✅ Add archive viewer component to frontend",
      "✅ Test all features and fix empty task outputs",
      "✅ Document natural language features and team lifecycle",
      "✅ Create archive viewer UI component",
      "✅ Add API endpoint for retrieving archives",
      "✅ Test archive functionality end-to-end",
      "✅ Write comprehensive documentation"
    ],
    "duration": "Active for 45 minutes"
  },
  "rawData": {
    // Complete team data for detailed analysis
  }
}

存档存储

位置: ~/.claude/archive/

文件命名: {team-name}_{timestamp}.json

例子： dashboard-devops_2026-02-10T15-30-00-000Z.json
ISO格式的时间戳，冒号替换为连字符（文件系统安全）

自动创建：如果存档目录不存在，则会自动创建

持续时间跟踪

仪表板计算每个团队的活动时间：

// Example console output:
"📊 Team 'dashboard-devops' was active for 45 minutes"

跟踪方法:

团队已创建→ 记录开始时间戳
团队活动→ 上次看到的时间戳已更新
团队已完成→ 根据时间戳计算的持续时间
存档摘要中包含的持续时间

存档查看器（API）

以编程方式访问存档的团队数据：

获取所有档案

GET /api/archive

响应:

{
  "archives": [
    {
      "filename": "dashboard-devops_2026-02-10T15-30-00-000Z.json",
      "overview": "Team 'dashboard-devops' with 4 members worked on 12 tasks and completed 10.",
      "created": "Started on 02/10/2026",
      "members": ["team-lead (general-purpose)", "..."],
      "accomplishments": ["✅ Task 1", "✅ Task 2", "..."],
      "duration": "Active for 45 minutes",
      "archivedAt": "2026-02-10T15:30:00.000Z"
    }
  ],
  "count": 1
}

获取特定存档

GET /api/archive/{filename}

响应：完整的档案，包括原始数据

团队历史跟踪

这 团队历史 该功能提供了所有团队的完整时间顺序视图：

API端点:

GET /api/team-history

响应:

{
  "history": [
    {
      "name": "dashboard-devops",
      "config": { /* team config */ },
      "tasks": [ /* all tasks */ ],
      "createdAt": "2026-02-10T14:45:00.000Z",
      "lastModified": "2026-02-10T15:30:00.000Z",
      "isActive": false
    }
  ]
}

特性:

显示所有团队（活动和已完成）
按最后修改时间排序（最近的第一个）
包括创建和修改时间戳
活动状态指示器

实时通知

仪表板为所有生命周期事件提供控制台通知：

🎉 New team created: dashboard-devops
🔄 Team active: dashboard-devops
✨ New task created: task-123.json
📝 Task updated: task-123.json
✅ Task completed/removed: task-123.json
👋 Team completed: dashboard-devops - archiving for reference...
📦 Team archived: dashboard-devops → /home/user/.claude/archive/dashboard-devops_2026-02-10T15-30-00-000Z.json
📊 Team "dashboard-devops" was active for 45 minutes

文件系统监视器

生命周期跟踪由三个独立的观察者提供支持：

1.团队观察者 (~/.claude/teams/**/*.json)

监视器： config.json 文件
触发器：团队创建、更新、完成

2.任务观察者 (~/.claude/tasks/**/*.json)

监视器：单个任务文件
触发器：任务创建、更新、完成

3.输出监视器 (/tmp/claude/{project}/tasks/*.output)

监视器：代理输出文件
触发器：代理活动更新

手表选项 （可在中配置 config.js):

{
  persistent: true,         // Keep process running
  ignoreInitial: true,      // Don't trigger on startup
  usePolling: true,         // Use polling for cross-platform reliability
  interval: 1000,           // Polling interval (ms)
  depth: 10,                // Directory depth limit
  awaitWriteFinish: {       // Wait for complete writes
    stabilityThreshold: 500,
    pollInterval: 100
  }
}

安全功能

仪表板由6名安全专家组成的团队审核。每一层都已硬化：

🔐 认证

首次设置屏幕 --首次运行时在浏览器中设置密码；存储为a scrypt 哈希(N=16384, r=8, p=1 --建议使用OWASP） ~/.claude/dashboard.key (chmod 600)
代币轮换 --每次成功登录时都会发出一个新的256位随机令牌
定时安全比较 — crypto.timingSafeEqual 用于密码和令牌验证（防止定时攻击）
认证速率限制器 --每15分钟每个IP最多5次登录/设置尝试（与全局限制器分开）
会话存储 --标签关闭时令牌清除；本地主机工具的可接受折衷
密钥文件权限检查 --启动时发出警告 dashboard.key 是世界可读的

🛡️ HTTP安全标头

内容安全策略 --严格对抗主义者： default-src 'self'，明确 connect-src/img-src/font-src, frame-ancestors 'none', object-src 'none'
公司/合作社 — Cross-Origin-Resource-Policy: same-origin, Cross-Origin-Opener-Policy: same-origin
HSTS — max-age=31536000; includeSubDomains
推荐人政策 — strict-origin-when-cross-origin
权限策略 — camera=(), microphone=(), geolocation=(), payment=(), usb=()
头盔 — noSniff, frameguard: deny, xssFilter 全部启用

🔍 输入验证

严格消毒 — sanitizeTeamName(), sanitizeAgentName(), sanitizeFileName() 执行 [a-zA-Z0-9_.-] 在每个路由参数上最多允许100个字符
精确匹配验证 --如果净化值≠原始值（捕获部分编码攻击），则每个参数化路由返回400
内容类型强制 --POST请求没有 application/json 获取415
车身类型检查 --拒绝所有POST端点上的数组、null和非对象体
ReDoS安全搜索 --用途 String.indexOf() 不是正则表达式；200个字符查询限制

🔌 双向通信

始终需要令牌 --如果查询字符串中没有有效令牌，则使用4001关闭连接
乒乓球心跳 --30s间隔，10s乒乓超时；已终止的客户
每个连接速率限制 --最多50条消息/秒；超限以代码1008结束
邮件大小限制 --最大64 KB；overseas以代码1009结束
连接审核日志 --IP登录连接/断开/错误

📁 文件系统

validatePath() 每次fs通话 --用途 path.resolve() 阻止所有路径遍历
没有符号链接 — followSymlinks: false 在所有5名chokidar观察者身上
防止日志注入 --团队名称在出现在日志输出中之前经过净化

🌐 网络

跨域资源共享 --仅限于 localhost:3001 和 localhost:5173 只有；无通配符来源
速率限制 --全局限制器 /api/ 路线
误差硬化 --全局错误处理程序从不泄漏堆栈跟踪或内部消息

只读：仪表板从不修改Claude Code文件，它只读取和存档数据。

用例

项目回顾：回顾一个团队完成了什么以及花了多长时间

性能分析：跟踪多个项目的团队效率

审计跟踪：保存所有代理活动的记录，以确保合规

学习：研究成功的团队模式和任务分解

恢复：如果需要，从存档数据中恢复团队上下文

好处

零配置：存档会自动进行，无需设置
完整历史：项目完成时，永远不要丢失团队数据
自然语言：存档摘要易于阅读
法医分析：包括用于详细调查的完整原始数据
储存效率：JSON格式，自动清理旧档案（未来功能）
快速检索：带时间戳的文件名，便于按时间顺序排序

______________________________________________________________________

🗺️ 路线图

✅ 最近发货

\[x\] 全面安全审计（6人专家组） --OWASP scrypt-auth、身份验证速率限制、令牌轮换、严格CSP、CORP/COOP、权限策略、每条路由上的严格输入验证、WebSocket心跳+速率限制+大小限制， followSymlinks: false 在所有观察者上，0个npm漏洞
\[x\] 首次设置流程 --打开仪表板→ 在浏览器中设置密码→ 哈希存储在 ~/.claude/dashboard.key → 每次后续访问时登录；WebSocket在登录后立即重新连接（无回退延迟）
\[x\] 密码验证（始终打开） --带有OWASP参数的scrypt哈希、定时安全比较、令牌轮换、每个IP的5次尝试率限制
\[x\] 顺风v4+代码拆分 — @tailwindcss/vite 安装；4个重载组件延迟加载，将初始JS包减少约50 kB
\[x\] 扩展测试套件 --15个文件中的223个测试，涵盖了所有4个自定义钩子、关键组件和实用函数
\[x\] 全面无障碍审计 --50+按钮 aria-label，交互式div role/tabIndex/onKeyDown, aria-live 在状态组件上， role="alert" 论模态中的错误状态与焦点管理
\[x\] 安全强化 --server.js：修复收件箱路由上的错误清理程序，修补全局处理程序中的错误消息泄漏，在存档列表上添加路径验证，所有端点之间的一致错误响应
\[x\] 完成内联样式迁移 --所有30+组件现在都使用React内联 style={{}} 对于每个大小、颜色、动画和布局值，都不会保留任何断开的顺风任意值
\[x\] 生产代码清理 --已删除5个调试 console.log 声明来自 useWebSocket.js；清除了多个组件中未使用的导入
\[x\] 亮/暗模式 --完整的基于CSS变量的主题系统；每个组件、卡片、图表、模态和吐司都会立即适应
\[x\] 导出报告 --通过标题导出菜单为任务和收件箱消息导出CSV和JSON
\[x\] 性能分析 --带有历史图表、团队比较和绩效评分的分析面板
\[x\] 键盘快捷键 --命令面板(⌘K)，选项卡热键(⌘1–8)，快捷方式参考模式(?)
\[x\] 通知中心 --分组通知托盘（Just Now/Today/Earlier），带有标记已读、全部清除和直接标签导航
\[x\] PWA支持 --可安装的渐进式web应用程序，通过Service Worker进行离线缓存
\[x\] 代理网络图 --代理间通信流的实时D3力定向图
\[x\] 任务依赖关系图 --在整个团队中，哪些任务阻碍了哪些任务的可视化地图
\[x\] 团队比较 --跨多个活跃团队的并排绩效视图
\[x\] 骨架装载机 --第一次连接时，加载状态平稳，而不是空白面板

🎯 计划的功能

\[ \] 多项目工作空间 --在一个仪表板中切换多个Claude项目
\[ \] 自定义警报 --Webhook集成（Slack、Discord、电子邮件）
\[ \] 插件系统 --自定义可视化的可扩展架构
\[ \] Docker部署 --一个命令容器化设置
\[ \] 代理重播 --回放和重播代理会话以进行调试
\[ \] 协作模式 --与团队成员共享仪表板

💡 有想法吗？

我们根据社区反馈对功能进行优先级排序。 打开功能请求→

______________________________________________________________________

🤝 贡献

我们热爱贡献！无论您是在修复错误、添加功能还是改进文档-- 每一份贡献都很重要.

🚀 快速贡献指南

# 1. Fork & clone
git clone https://github.com/YOUR_USERNAME/claude-team-dashboard.git

# 2. Create feature branch
git checkout -b feature/amazing-feature

# 3. Make changes & commit
git commit -m "feat: add amazing feature"

# 4. Push & create PR
git push origin feature/amazing-feature

📖 阅读完整指南: 贡献.md

🌟 贡献方式

🐛 报告错误 --使用错误报告模板
✨ 建议功能 --使用功能请求模板
📝 改进文档 --修正拼写错误，添加示例，澄清说明
🧪 编写测试 --提高代码覆盖率和可靠性
🎨 设计改进 --欢迎UI/UX增强功能

第一次捐款？ 查看标记的问题 good first issue.

______________________________________________________________________

📄 许可证

该项目根据 MIT许可证 --看看许可证文件以获取详细信息。

太长，读不下去了：免费使用、修改和分发。允许商业使用。请保留许可证通知。

______________________________________________________________________

⭐ 星迹

![Star History Chart](https://star-history.com/#mukul975/claude-team-dashboard&Date)

______________________________________________________________________

⭐ 如果这对你有帮助的话，那就点赞吧！

主演帮助其他人发现这个项目。 这需要2秒，并产生巨大的影响。

](https://github.com/mukul975/claude-team-dashboard/stargazers)

______________________________________________________________________

由...建造马希帕尔

_由维护 @穆库尔975 --网络安全研究员、人工智能代理爱好者_

Claude Team Dashboard

快速接入

详细介绍

🤖 Claude代理仪表板

停止盲目飞行——实时监控你的克劳德代码代理团队

🎯 为什么存在

问题

解决方案

✨ 亮点

🚀 零配置实时监控

📋 可视化任务管理

💬 代理间消息检查器

🌗 全亮暗模式

♿ WCAG无障碍界面

⌨️ 键盘优先导航

📊 实时活动年表

🖥️ 系统性能指标

🔔 智能警报和通知

📤 一键数据导出

📱 PWA——可安装且离线就绪

🔒 企业级安全

🚀 快速开始

✅ 先决条件

⚡ 通过npm安装（推荐）

🛠️ 克隆和构建（开发）

🔒 密码验证

🎁 开发容器（即时环境）

🧑‍💻 发展模式

🎬 演示

🏗️ 运作原理

建筑一瞥

📬 收件箱监控

Claude代码代理团队如何沟通

实时收件箱监控

仪表板显示什么

API终点

WebSocket事件

项目结构

🛠️ 构建于

📖 文档

💬 自然语言消息解析

运作原理

消息类型检测

消息分类

智能功能

查看消息

技术实现

示例：消息流

好处

🔄 团队生命周期跟踪

自动团队监控

自动归档系统

什么被归档

存档存储

持续时间跟踪

存档查看器（API）

团队历史跟踪

实时通知

文件系统监视器

安全功能

🔐 认证

🛡️ HTTP安全标头

🔍 输入验证

🔌 双向通信

📁 文件系统

🌐 网络

用例

好处

🗺️ 路线图

✅ 最近发货

🎯 计划的功能

💡 有想法吗？

🤝 贡献

🚀 快速贡献指南

🌟 贡献方式

📄 许可证

⭐ 星迹

⭐ 如果这对你有帮助的话，那就点赞吧！

目录标签

接入字段