CC-Team-Viewer

Claude Code 请求监控系统 - 实时捕获并可视化展示所有 API 请求与响应

CC-Team-Viewer 是 Claude Code 的强大监控工具，能够完整捕获（原始文本，不做阉割）并可视化展示 Claude Code 的所有 API 请求与响应。完美适配 Vibe Coding 工作流，帮助你回顾上下文、排查问题、优化提示词。

✨ 核心特性

• 🔍 完整捕获：原始 API 请求/响应，无任何阉割
• 🎯 智能识别：自动识别 MainAgent/SubAgent（Bash、Task、Plan、General）
• 💬 多种视图：请求监控、对话模式、团队视图、会话视图
• 📊 详细统计：Token 使用、缓存命中率、工具调用统计
• 🚀 自动化：安装后自动启动，无需手动配置
• 🎨 实时推送：SSE 实时数据流，零延迟监控

📋 功能概览

| 视图模式 | 📝 说明 | |---------|---------| | 请求监控 | 原始 API 请求/响应列表，完整捕获所有数据 | | 对话模式 | Chat 风格展示对话历史，类似微信/Telegram | | 团队视图 | 查看 Claude Agent Teams 团队协作状态 | | 会话视图 | 独立查看单个会话的详细内容 |

快速开始

一键安装

npm install -g cc-team-viewer

启动与配置

cctv install

首次运行会自动完成以下配置：

1. 检测安装模式：自动识别你的 Claude Code 安装方式
2. 注入拦截器：
   • NPM 模式：注入拦截脚本到 Claude Code 内部
   • 原生模式：配置 Shell Hook 实现透明代理
3. 启动服务：自动启动监控服务（端口 7008-7020）

开始使用

配置完成后，正常使用 Claude Code 即可：

# 在你的项目中正常使用 claude
claude "帮我实现一个新功能"

自动启动 + 一键访问：

• 🚀 服务自动启动：每次使用 claude 命令时，监控服务会自动启动
• 🔗 一键访问：Claude 会在对话中提供监控页面链接，点击即可直接访问
• 📊 实时监控：所有 API 请求和响应都会实时显示在监控界面中

启动示例输出：

Claude 请求监控服务已启动: http://127.0.0.1:7010 ([正式模式])
 ▐▛███▜▌   Claude Code v2.1.72
▝▜█████▛▘  claude-sonnet-4.6 · API Usage Billing
  ▘▘ ▝▝

点击输出的链接即可直接访问监控界面！ 🎯

直接访问

如果需要手动访问监控界面：

http://localhost:7008

常用命令

cctv              # 启动服务（首次运行会自动配置）
cctv --version   # 查看版本
cctv --uninstall # 卸载拦截器

视图模式详解

1. 请求监控（原文模式）

实时捕获 Claude Code 发出的所有 API 请求，确保是原文（不被阉割）。

核心功能：

• MainAgent / SubAgent 自动识别（Bash、Task、Plan、General）
• Body Diff：对比相邻 MainAgent 请求的差异
• Token 统计：输入/输出、缓存创建/读取、命中率
• 兼容 Claude Code Router（CCR）及其他代理

2. 对话模式

点击右上角「对话模式」切换。

功能特性：

• 用户消息右对齐（蓝色气泡），Agent 回复左对齐
• thinking 块默认折叠，点击展开
• 用户选择型消息（AskUserQuestion）以问答形式展示
• 双向同步：请求 ↔ 对话互相定位
• 设置面板：工具结果、思考块默认折叠状态

3. 团队视图

当使用 Claude Code Agent Teams 时可见。

功能特性：

• 展示团队成员列表及活跃状态
• 点击成员查看其完整对话历史
• 实时消息推送（通过 SSE）
• 未读消息计数

4. 会话视图

独立查看任意会话的详细内容。

入口：

• 项目列表 → 选择会话
• 或通过 URL /#/session/:sessionId 直接访问

统计面板

Header 区域的「数据统计」悬浮面板：

• 缓存统计：cache creation/read 数量及命中率
• 缓存重建原因：TTL、system/tools/model 变更、消息截断、key 变更
• 工具使用：按调用次数排序
• Skill 使用：按调用次数排序
• 概念帮助 (?)：MainAgent、CacheRebuild 及工具文档

配置说明

自定义 API 端点

在 ~/.claude/settings.json 中配置：

{
  "ANTHROPIC_BASE_URL": "https://your-proxy.com"
}

或设置环境变量 ANTHROPIC_BASE_URL。

调试模式

CC_VIEWER_DEBUG=1 cctv run -- claude

端口配置

| 端口 | 用途 | |------|------| | 7008-7020 | API 服务器（自动选择） | | 5173+ | Vite 开发服务器 |

工作原理

┌─────────────┐     fetch monkey patch      ┌──────────────────┐
│ Claude Code │ ──────────────────────────▶ │ interceptor.js   │
└─────────────┘                             │ (捕获所有请求)    │
                                              └────────┬─────────┘
                                                       │ JSONL
                                                       ▼
                                              ┌──────────────────┐
                                              │ ~/.claude/logs/ │
                                              │ <project>/       │
                                              └────────┬─────────┘
                                                       │ watchFile
                                                       ▼
                                              ┌──────────────────┐
                                              │ Server (SSE)    │
                                              │ + REST API       │
                                              └────────┬─────────┘
                                                       │
                                                       ▼
                                              ┌──────────────────┐
                                              │ React UI         │
                                              │ (多视图模式)      │
                                              └──────────────────┘

常见问题排查

无法启动？ 让 Claude Code 自己排查：

我已经安装了 cc-team-viewer 这个 npm 包，但是执行 cctv 以后仍然无法有效运行。查看 cc-team-viewer 的 cli.js 和 findcc.js，根据具体的环境，适配本地的 claude code 的部署方式。

这比自己查看文档更高效！

License

MIT