声明一下，这是个玩具。目前只做到了这个程度。🙏
起初的痛点是，日常用Claude开发的时候，我会同时开两三个项目，ClaudeCode终端也好、vscode插件也好，每个都跑着一到两个 Claude 会话。过一会儿我就忘了哪个是哪个了，进行到什么状态了，只能一个个点开窗口看。
有天晚上，我盯着屏幕发呆，突然想到：为什么没有一个仪表盘，能让我一眼看到所有 Claude 会话的状态？
就像监控服务器一样，哪个在跑、在跑什么、花了多少 Token，一目了然。
于是就有了这个项目。
它能做什么
Claude Super Monitor 是一个实时监控仪表盘，帮你把 Claude Code 的操作变得透明可见：
🔴 实时看它在干嘛
WebSocket 实时推送，浏览器里直接看到 Claude 当前的操作。执行命令、读写文件、网络请求，一目了然。
🛠️ 追踪工具调用
Bash、Write、Edit、WebFetch、Search……所有工具调用都记录下来，参数、状态、耗时，清清楚楚。
📊 Token 估算
根据会话文件大小粗略估算 Token 消耗。不准，但够用，至少知道哪个会话已经聊了很多了。（只是它是以经验的形式存在的😋）
🔐 可选的权限管理
不想被 VSCode 弹窗打断？开启这个功能，所有工具调用先在浏览器里等你点"批准"或"拒绝"。60 秒不响应自动拒绝，安全第一。
❓ 直接回答提问
Claude 用 AskUserQuestion 提问时，问题直接显示在仪表盘上，选个选项提交就行，不用切回 VSCode。
🌐 多会话并排
同时监控多个 Claude 会话，自动提取第一条用户消息作为标题。活跃的放上面，完成的折叠到通知栏。
🎮 像素小人陪你
用 Pixi.js 做的 DOTOWN 风格的动画。Claude 干活的时候，屏幕上的像素小人也会"忙碌"起来；空闲时就"休息"。纯属整活，但挺可爱的，每个状态都有不同的样子。
用起来很简单
npm install -g claude-super-monitor
csm
运行后自动打开浏览器，访问 localhost:5999。
更新也很简单：
csm -u
支持 Windows、macOS、Linux，VSCode 扩展和 Claude CLI 都能监控。
怎么做到的
核心思路很简单：Claude Code 会把所有操作记录在 ~/.claude/projects/ 的 JSONL 文件里，我只需要实时读取并展示出来。
- 后端用 Node.js 监听文件变化，通过 WebSocket 推给前端
- 前端 Vue 3 + Vite，界面清爽响应快
- 可选的权限管理通过
PreToolUse钩子实现
整个项目从 0 到能用，大概花了 2 天时间。Claude Code 帮我写了大量代码，但架构设计、踩坑填坑还是得自己来。
试试？
在 GitHub 上看看源码： github.com/MarioLuLu7/…
有问题提 Issue，觉得好用点个 Star。
P.S. 那个像素小人真的很可爱，运行起来就知道了。
