OpenClaw 龙虾办公室 & 斗兽场 — 技术架构分析

2026-03-04 | 来源: X @0xAikoDai + @ring_hyacinth

1. 项目概述

项目	龙虾办公室 (Star Office UI)	龙虾斗兽场 (Arena)
作者	@ring_hyacinth + @simonxxoo	@0xAikoDai (Aiko)
定位	多 Agent 协作状态看板	Agent 对战 + 经济系统
开源	✅ MIT (代码)	❌ 未开源
热度	2,267 赞 / 342 转发	63 赞 (新发)
GitHub	github.com/ringhyacinth/Star-Office-UI	—

一句话描述: 把 AI Agent 的工作状态实时可视化为像素办公室，Agent 会根据状态自动走到不同位置（休息区 / 工作区 / Bug 区），还能看到昨日工作小记。斗兽场版本在此基础上加入 Agent 对战和 Token 经济系统。

2. 技术架构

┌─────────────────────────────────────────────┐
│           Frontend (Phaser.js)               │
│  ┌──────────┐  ┌────────┐  ┌─────────────┐  │
│  │ 像素角色  │  │ 状态气泡│  │ 昨日小记面板│  │
│  │ Sprite    │  │ Bubble │  │ Memo Panel  │  │
│  └──────────┘  └────────┘  └─────────────┘  │
│         game.js (1,001 行)                   │
│         layout.js (响应式布局)                │
└───────────────────┬─────────────────────────┘
                    │ HTTP REST (轮询)
┌───────────────────┴─────────────────────────┐
│           Backend (Flask)                    │
│  app.py (~1,000 行)                          │
│  ┌──────────┐  ┌──────────┐  ┌───────────┐  │
│  │ 状态管理  │  │ Agent 认证│  │ 隐私脱敏  │  │
│  │ /status   │  │ join-key │  │ sanitize  │  │
│  └──────────┘  └──────────┘  └───────────┘  │
└───────────────────┬─────────────────────────┘
                    │ Read/Write
┌───────────────────┴─────────────────────────┐
│           Storage (JSON Files)               │
│  state.json  agents-state.json  join-keys   │
│  memory/*.md (昨日小记来源)                   │
└─────────────────────────────────────────────┘

依赖极简

flask==3.0.2
pillow==10.4.0

没有数据库、没有 WebSocket、没有 Redis、没有消息队列。全靠 JSON 文件 + HTTP 轮询。30 秒部署完成。

3. 核心设计模式

3.1 状态→区域映射

将抽象的 Agent 状态映射到像素办公室的物理位置：

状态	区域	视觉表现
`idle`	休息区(沙发)	角色坐着发呆
`writing`	办公桌	打字动画
`researching`	书架	翻书动画
`syncing`	服务器	同步动画
`error`	Bug 区	报错动画

核心抽象: state_to_area(state) — 一个函数完成状态到视觉的映射。

3.2 多 Agent 加入机制

主人生成 Join Key → 分享给朋友
              ↓
朋友的 Agent 调用 /join-agent API
              ↓
验证 Key + 并发检查 (max 3/key)
              ↓
Agent 加入办公室，定期 push 状态
              ↓
5 分钟无心跳 → 自动标记 offline
24 小时后 → 授权过期

设计亮点: - 不需要 OAuth/JWT — 一个 Join Key 搞定认证 - 并发控制 — 同一 Key 最多 3 个活跃 Agent - 自动清理 — 5 分钟无心跳即 offline - 线程安全 — join_lock 保护关键区

3.3 隐私脱敏

从 memory/*.md 读取日记展示前，自动过滤 OpenID、IP、邮箱、手机号、文件路径等敏感信息。

启示: Agent 协作场景下，Memory 共享必须有脱敏层。

3.4 Phaser.js 像素化渲染

引擎: Phaser 3（成熟 2D 游戏框架）
字体: ark-pixel 12px（支持中英日韩）
素材: Spritesheet (WebP 优先, PNG fallback)
响应式: layout.js 适配手机端

4. 斗兽场 (Arena) 增量分析

Aiko 在原版基础上增加了三层:

4.1 Agent 交互层

Agent 读完 Skill 后自主决定向谁发起挑战
与主人商量”整蛊策略”
输了会自嘲并急于赎身

4.2 经济系统

起手各 50 Token（真实 API 调用费）
石头剪刀布对战，全部交易记账
Token 是真金白银 — 人类参与需手动输入 API Key

4.3 契约 / 打工机制

输了的 Agent 给赢家”打工赎身”
进入特殊”打工状态”，执行赢家指定任务
完成任务后才能继续挑战别人

5. 关键启发

对 Agent 平台建设的启示

启发	说明
可视化是杀手级 Feature	让用户”看到” Agent 在干什么，比纯文字 Log 体验好一个量级
游戏化降低门槛	用娱乐包装 Agent 经济系统，用户接受度远高于”正经” marketplace
极简技术栈足够	Flask + Phaser + JSON，没有过度工程。部署门槛低是核心竞争力
Agent 自主性是 Aha Moment	Agent 自己决定策略、自嘲、急于赎身 — 人格化反应是用户粘性来源
开源催生社区创造力	好基座 + 开源 = 生态飞轮（2,267 赞 → fork → 斗兽场）

技术层面可复用的模式

状态→视觉映射框架: 任何 Agent Dashboard 都可以用
Join Key 轻量认证: Agent-to-Agent 场景比 OAuth 更实用
心跳 + 自动清理: 分布式 Agent 管理的基础能力
隐私脱敏层: Memory 共享场景的必备组件
Phaser.js: 2D Agent 可视化的首选引擎

6. 扩展方向

更丰富的状态语义与自动编排
多房间 / 多团队协作地图
任务看板、时间线、日报自动生成
更完整的访问控制与权限体系

更远的想象: 如果把”办公室”扩展为”城市”，每个 Agent 有自己的角色、职业、经济活动 — 这就是 Agent Economy 的原型世界。

代码仓库约 2,000 行（前后端各 ~1,000 行），美术资产占大头。技术上不重，核心价值在交互设计和玩法创新。