前两天觉得现在搓CC像打游戏么, 干脆试一下. 我CC只是$20块会员, 受限了几次, 差不多就这个程度啦, 做出来治愈一下. 不知道同事看到会不会觉得像micro kitchen 😬 其实我觉得还有点像Severance.

这些 Agent跟我们一样也是勇敢的打工人; 可能我们都活在模拟世界里.

灵感

最近用 Claude Code 干活, 经常同时开好几个 session.

每次都在想: 这些 Agent 现在在干嘛? 忙不? 是不是在摸鱼?

于是我造了个小工具 -- Claude Office.

一个像素风的等距办公室, 每个 Claude session 都是一个小人:

• 🔥 工作中 → 疯狂敲键盘, 汗流浃背

• 😴 摸鱼中 → 趴桌子睡觉, zzz

• 🚪 没任务 → Micro Kitchen聊天

看着一群小人在办公室里忙碌, 很治愈.

安装

三步搞定:

# 1. Clone
git clone https://github.com/awangdev/claude-office.git
cd claude-office
2. dependency# 
npm install
3. start# 
npm start

打开浏览器访问

http://localhost:3000

Dependency:

• Node.js 18+

• 正在使用 Claude Code CLI (session 文件会自动出现在 ~/.claude/projects/)

技术架构

┌─────────────────┐     WebSocket      ┌─────────────────┐
│  浏览器          │◄──────────────────►│  Node.js 服务器  │
│  (Three.js)     │   实时推送 session  |  (Express +WS)  │
└─────────────────┘                    └────────┬────────┘
│
│ 文件监听
▼
~/.claude/projects/
*.jsonl

核心组件:

模块技术作用前端渲染Three.js等距视角 + 像素精灵动画文件监听Chokidar监听 .jsonl 文件变化实时通信WebSocket推送 session 状态更新

状态检测逻辑:

• 30 秒内有活动 → active (工作中)

• 超过 30 秒没动静 → idle (睡着了)

• 文件被删除或者很旧的session → exiting (下班走人)

所有动画都是用 Canvas 程序生成的, 没有外部图片资源.

开源

项目已开源: https://github.com/awangdev/claude-office

欢迎 Star ⭐️, 欢迎 PR!