把 AI Agent 画进像素办公室：一个 DSH 插件的诞生

一个跑在浏览器里的像素风办公室：AI 小人从电梯走出来，走到自己的工位，坐下敲键盘，屏幕上亮起正在执行的命令。它不是游戏，而是 AI Agent 运行状态的可视化面板。

一、它是什么

像素办公室（Pixel Agents for DSH） 是 DeepSeek Harness（DSH）的一个插件。它把你正在运行的 AI 会话变成像素小人：

• 每个 Agent 是一个小人，有名字、工位、状态
• 工作时坐在椅子上敲键盘，桌面显示器亮起
• 空闲时保持坐姿，不再满屋子乱走
• 支持多楼层、电梯、监控大屏、机房、超市等主题场景

它由三部分组成：

插件通过 HTTP Hooks + WebSocket 与办公室服务通信，浏览器只是观众端，刷新页面不会丢数据（布局和 Agent 座位都保存在服务端/本地文件）。

二、站在谁的肩膀上

1. 上游项目：Pixel Agents

• 作者：Pablo De Lucca
• 许可证：MIT
• 本项目是其 1.6 分支的深度改造版，保留了原有架构（引擎、布局编辑器、家具系统），在此基础上扩展了多楼层与状态可视化。

2. 视觉参考：pixtuoid

办公室北墙的落地窗、城市天际线、太阳/月亮轨迹、时钟、云朵、夜景光溢出等视觉，参考并移植自 pixtuoid 的风格。这部分属于视觉借鉴，二次分发前需要确认其许可证。

三、我们新增了什么

1. 多楼层与电梯

• 6 层楼：B2 / B1 / L1 / L2 / L3 / L4，每层 36×23
• 顶层是玻璃幕墙，地下室是混凝土墙
• 默认在 L2，右上角电梯面板可切换楼层
• 楼层下拉框锁定在电梯按钮下方，带悬停延时
• 新 Agent 从电梯口出现，播放电梯门开合动画，再走到自己的工位

2. 工作状态可视化

• 桌面显示器与电脑在有人工作时自动亮屏
• 空闲时保持黑屏，坐下即亮，离开即灭
• 反向坐的工位也支持：电脑与椅子叠放、椅子在桌子另一侧都能正确配对

3. 大屏系统

• 监控大屏（6×4 / 9×5 可配置尺寸），支持拖放与旋转
• 屏幕 URL：点击屏幕可配置链接与标签，支持「一直显示 / 悬停显示」，配置后点击直接打开链接
• 标签配置按「类型@位置」兜底保存，布局重建不丢失
• 运算动画：所有楼层的大屏都播放「滚动终端 + 进度条」动画，每块屏随机 2~10 秒更新一次，速度各自独立

4. IDC 机房（B2）

• 机柜标签与 6 色状态灯（正常/告警/故障/离线/同步中/维护中）
• 鼠标悬停显示提示，点击机柜打开 U 位面板
• 面板内可在线编辑机柜标签、状态，以及每个 U 位的名称与状态

5. 楼层主题

6. 素材系统

• 支持外部素材目录，按 manifest.json 动态加载

• 支持旋转组（3-way-mirror：front/back/side + 镜像）

• 支持状态组（on/off）与动画组（多帧循环）

• 占位（footprint）与显示尺寸解耦：可以做到「图大、占位小」

• 内置切片流程：去背景、去水印、裁剪、缩放、锐化
  

  7. Agent 管理

• 白名单：只显示指定的 session / bot

• 按楼层分配：同一个 Agent 可出现在多个楼层，管理页勾选楼层

• 刷新推送：白名单变化或小人消失时，一键重新推送（插件会重发会话事件）

• 配套管理页（8090）：勾选显示、自定义名字、楼层多选、重新推送

8. 其他细节

• 时钟与昼夜统一按 Asia/Shanghai 计算，支持 clockOffset 校准
• 本地音乐库（~/.pixel-agents/music）+ 外链 URL，支持单曲 / 循环 / 列表
• 布局自动保存与多楼层守护（防止客户端把 6 层覆盖成 1 层）
• 服务端健康检查、静态资源不缓存 HTML（避免更新后仍是旧版本）
  

四、技术栈

• 前端：React + Vite + Canvas 2D（像素级绘制、sprite cache）
• 后端：Fastify + WebSocket + JSON 文件持久化
• 集成：DSH 插件 API、HTTP Hooks（SessionStart / PreToolUse / PostToolUse / Stop / SessionEnd）
• 数据：~/.pixel-agents/layout.json（布局）、standalone-state.json（Agent 状态）、dsh-allow.json（白名单）

五、它解决什么问题

AI Agent 干活时，界面通常只有一行行日志。像素办公室提供了另一种观察方式：

• 一眼看到谁在忙、谁在等、谁空闲
• 把抽象会话变成可感知的空间（楼层、工位、机房）
• 给团队一个共享的大屏：放在会议室或显示器上，进度一目了然

它不是替代日志，而是把「Agent 运行状态」变成可以围观的东西。

六、后续计划

• 独立部署形态（不依赖 DSH 的桌面版 / 自托管版）
• 对外接入文档与示例（HTTP Hooks + REST 配置）
• 更多可售主题与原创素材
• 屏幕内容与真实监控数据打通