前两天给 Hermes 的看板插件配了一个像素风的办公室界面。
事情的起因是这样：前段时间 Hermes 发布了看板插件，可以通过 kanban create 创建任务，然后 assign 给不同 profile 的子 agent 去干活。本质上是个包工头模式——主 agent 拆任务，一帮小弟各自领活、并行推进。但原生的看板界面是那种典型的小方块卡片拖拽流，功能没问题，就是差点意思——你看不到那群小弟到底在干嘛。学习链接：https://mp.weixin.qq.com/s/Bk4IlfT2sG4X5jFXxPd8iQ

正好之前有个开源项目叫 Star Office UI，学习链接：
https://mp.weixin.qq.com/s/5OC2_WBa9QrTa4zMrz-6Dw

是一个用 Phaser 3 写的像素风办公室看板，原本是用来展示「来访用户」的——每个访客在屏幕上是一个像素小人，走来走去，头上冒个气泡说自己在干嘛。这个思路如果嫁接到 Hermes 看板上，效果应该很妙——每个子 agent 变成一个小人，气泡里显示它正在执行的任务，整个办公室就「活」了。

于是做了下面几件事：

1. Kanban 桥接层（kanban_bridge.py）
   核心就一个函数 kanban_agents()：读 Hermes 的 kanban.db，把状态为 ready / running / blocked 的任务全部拉出来，按 profile 映射成像素小人的信息——coder 是 ?、writer 是 ✍️、researcher 是 ?，状态映射为 idle / writing / error，气泡里直接显示当前任务标题。然后合并到 Star Office UI 的 /agents 接口里，去重后返回给前端。
   这样，只要 Hermes 在看板里创建了任务并 assign 出去，像素办公室里就会多一个小弟，气泡上写着它在干嘛。任务完成，小弟自动消失。阻塞了，小人会变红。
2. 界面本地化
   把原版里英文的 "Star" 改成「鹤妹」，「访客」改成「小弟」，「暂无访客」改成「暂无小弟」，三种语言（中/英/日）的 i18n 对象一起改，CSS 里带 "guest" 的注释也顺手处理了。
3. 性能踩坑修复
   原项目用的 Flask 开发服务器，单线程排队处理请求，首页加载慢得离谱。换成 gunicorn + gevent（4 worker），Nginx 配了静态资源直出 + gzip + 一年长缓存（phaser.js 从 1.1MB 压到 316KB）。字体加了 font-display: swap 消除白屏。kanban_bridge 的 SQLite 查询加了 5 秒内存缓存，/agents 接口响应从 280ms 降到 5ms。
   中间还出了一个离谱的 bug——改 CSS 时多写了一个闭合花括号，4 万字符的样式泄漏到 HTML 正文里，页面直接白屏。查了半天才发现是自动修复任务里多带了一个 }。
4. 实际效果
   现在打开浏览器，看到的是一个像素风的「久辉鹤妹办公室」——房间中间是主 agent 鹤妹，四周是各种 profile 的小弟（coder、writer、researcher...），每个小人头上冒泡显示正在执行的任务。任务跑起来了，小人开始走动；任务完成，小人离开；卡住了，小人变成红色。
   把抽象的「AI 委派任务」变成了一群像素小人埋头干活，这个可视化本身没什么实际功能，但它让你对「后台有一群 agent 在帮你做事」这件事有了直观感受。挺好玩的。