像素办公室 × Hermes 看板：把 AI 包工头模式可视化
像素办公室 × Hermes 看板：把 AI 包工头模式可视化
当一群 sub-agent 变成像素小人，在你眼前走来走去、头上冒泡汇报工作
01 起因：看板插件好用，但缺了点「活气」
前段时间 Hermes 发布了看板插件（学习链接：Hermes 看板入门）。通过 kanban create 创建任务，assign 给不同 profile 的子 agent（coder、writer、researcher...），主 agent 自动拆解任务、分派给小弟并行推进——本质是个包工头模式，用起来确实顺手。
但原生看板界面是那种典型的小方块卡片拖拽流，功能没毛病，就是少点意思。你看不到那群小弟到底在干嘛。任务跑起来了也不知道，卡住了也不知道，只能干等飞书通知。
正好有个开源项目Star Office UI（学习链接：像素办公室原理解析）——用 Phaser 3 写的像素风办公室看板。原本设计是用来展示「来访用户」的：每个访客在屏幕上是一个像素小人，走来走去，头上冒个气泡显示状态。这个思路如果嫁接到 Hermes 看板上，每个子 agent 变成一个小人，气泡里显示它正在执行的任务名称，整个办公室就「活」了。
02 核心：Kanban 桥接层
关键技术是一层桥接脚本 kanban_bridge.py，大约 160 行 Python，做三件事：
连接 Hermes 的 kanban.db（SQLite），拉出状态为 ready / running / blocked 的任务，LEFT JOIN task_runs 拿到正在执行的 worker profile 和心跳时间。
每个 Kanban 任务按 profile 映射成像素小人：coder 显示 ?、writer 显示 ✍️、researcher 显示 ?。任务状态映射为动画状态（idle / writing / error），气泡里直接展示当前任务标题（最长 50 字截断）。
Star Office UI 的 Flask 后端每 5 秒轮询一次 /agents 端点。桥接层在 app.py 的 get_agents() 中自动注入 kanban_agents() 结果，去重后返回给前端渲染。
简单说：Hermes 在看板里创建任务 → assign 出去 → kanban_bridge 读到 → 像素办公室里多一个小弟 → 气泡显示任务名 → 任务完成小人消失 → 阻塞了小人变红。全程自动。
/agents 接口响应从 280ms 降到 5ms（约 50 倍提升）。
03 性能改造：从单线程排队到并发响应
原项目跑在 Flask 开发服务器上，单线程排队处理请求，首页加载慢得离谱。做了以下优化：
| 优化项 | 之前 | 之后 |
|---|---|---|
| Web 服务器 | Flask Werkzeug 单线程 | gunicorn + gevent（4 workers） |
| 静态资源 | Python 层 serve | Nginx 直出 + gzip |
| phaser.js（1.1MB） | 每次请求全量传输 | gzip → 316KB + 1年缓存 |
| 字体加载 | 白屏等待字体 | font-display: swap 即时显示 |
| /agents 接口 | 282ms / 次 | 5~7ms / 次 |
04 踩坑：一个花括号让整个页面白屏
改 CSS 加 font-display: swap 的时候，bug 修复任务里多写了一个闭合花括号 }。这导致
