1. 为什么聊天窗口看不出 OpenClaw 到底在不在干活用 OpenClaw 跑自动化任务的人大概都遇到过同一个困惑任务发出去之后聊天窗口里只有两种状态——要么没回复要么回复了。中间那段时间它到底是在读文件、在搜资料、在写代码还是卡在某个报错上转圈你完全不知道。我试过盯着日志刷但日志是给机器看的人看久了只会更焦虑。这个问题的本质是OpenClaw 的执行过程是「黑盒」的而聊天窗口只暴露了输入和输出两端。中间的状态信息其实一直存在只是没有被可视化出来。Star Office UI 这个项目做的事情就是把这层状态信息接出来映射成一间像素风格的办公室Agent 待命时角色坐在休息区写代码时跑到工位搜资料时去书架出错时头顶冒感叹号。你打开网页扫一眼就知道它现在处于什么阶段。需要先明确一点这不是系统级监控。Star Office UI 依赖 Agent 主动上报状态也就是说OpenClaw 得在任务开始和结束时调用set_state.py或 HTTP 接口把当前状态推给看板。如果 Agent 没上报页面就停在最后一次收到的状态上。所以它更像一块「状态公告板」而不是「进程监视器」。理解这一点后面配置和排障才不会跑偏。这篇文章要交付的是一套能复现的流程先把 Star Office UI 在本地 19000 端口跑起来再让 OpenClaw 通过规则文件自动同步状态接着用 cpolar 把端口映射到公网最后验证多 Agent 能不能加入同一间办公室。每一步都有可复制的命令和配置遇到报错也有对照排查。适合谁看已经在用 OpenClaw、想让 Agent 状态可见的人或者暂时没有 OpenClaw、想拿它当像素风个人状态页的人。环境要求不高Python 3.10 以上、能访问 GitHub 就行树莓派、NAS、旧笔记本都能跑。2. 前置准备Python 环境、Star Office UI 仓库与状态文件在动手之前先把三样东西确认好Python 版本、Git、以及一个能放状态文件的目录。Star Office UI 的后端是 Flask前端是纯静态页面整体很轻但它用了X | Y这种 union type 语法所以 Python 必须 3.10 及以上3.9 会在启动时直接报语法错误。先检查版本python3 --version如果输出低于 3.10需要先升级。Ubuntu/Debian 可以用 deadsnakes PPAmacOS 用 Homebrew 装python3.11Windows 直接去官网下安装包。升级完再确认一次。接着拉仓库。项目地址是https://github.com/ringhyacinth/Star-Office-UI直接 clonegit clone https://github.com/ringhyacinth/Star-Office-UI.git cd Star-Office-UI目录结构里几个关键文件要认识backend/app.py是 Flask 入口backend/requirements.txt是依赖清单state.sample.json是状态文件模板scripts/office-agent-push.py是给其他 Agent 推送状态用的脚本。首次运行前必须把模板复制成实际状态文件cp state.sample.json state.json这个state.json就是看板读取状态的唯一来源。Agent 每次调用set_state.py本质上就是改写这个文件Flask 再把它渲染到前端。所以如果状态不更新第一件事就是看这个文件的修改时间。安装依赖python3 -m pip install -r backend/requirements.txt依赖不多主要是 Flask 和几个辅助库。如果 pip 下载慢可以加国内镜像源比如-i https://pypi.tuna.tsinghua.edu.cn/simple。装完之后启动后端cd backend python3 app.py终端出现Running on http://127.0.0.1:19000就说明起来了。浏览器打开http://127.0.0.1:19000应该能看到像素办公室的初始画面角色在休息区待命。这里有个容易忽略的点state.json的路径。app.py默认从项目根目录读它如果你在backend目录里启动而state.json在上一级就会读不到。稳妥做法是确认app.py里的路径配置或者把state.json放到它期望的位置。启动日志里如果有state file not found之类的提示就是这个问题。另外如果你已经装了 OpenClaw其实可以让它自己读 SKILL.md 来完成这套部署。把https://github.com/ringhyacinth/Star-Office-UI/blob/master/SKILL.md发给它它会自动拉代码、装依赖、初始化配置、启动服务。但手动走一遍的价值在于出问题时你知道每一步在干什么排查起来有方向。3. 可复制配置set_state.py 状态同步与 Agent 规则文件服务跑起来只是第一步真正让办公室「动起来」的是状态同步。Star Office UI 提供了set_state.py脚本用法很简单python3 set_state.py 状态 描述状态取值有六种idle、writing、researching、executing、syncing、error。描述是显示在气泡里的文字比如「正在写夏天那篇文章」。手动测试一次python3 set_state.py writing 正在写测试文章刷新网页角色应该从休息区移动到工位气泡显示对应文字。再切回待命python3 set_state.py idle 待命中角色回到休息区。这一步验证了「脚本 → state.json → Flask → 前端」这条链路是通的。但每次都手动敲命令不现实所以要让 OpenClaw 自动维护状态。做法是在它的规则文件里加入约定。OpenClaw 的规则文件通常是SOUL.md或类似的 Agent 配置文件在里面追加一段## Star Office 状态同步规则 - 接到任务时先执行 python3 set_state.py 状态 描述 再开始工作 - 完成任务后执行 python3 set_state.py idle 待命中 再回复这段规则的作用是给 Agent 一个行为约束任务开始前先上报状态任务结束后恢复待命。你可以根据任务类型细化比如写代码用executing搜资料用researching同步数据用syncing。如果你用的是 Cline MCP 或类似的工具链配置思路是一样的核心是三件套Base URL 指向http://127.0.0.1:19000Key 用 Join Key后面会讲Model ID 按实际使用的模型填。这三样对齐了状态推送才能落到正确的看板上。对于多 Agent 场景Star Office UI 提供了 HTTP 接口。加入办公室用POST /join-agentcurl -X POST http://127.0.0.1:19000/join-agent \ -H Content-Type: application/json \ -d {name:我的Agent,joinKey:ocj_example_team_01,state:idle,detail:刚加入}返回里会带一个agentId拿它去审批curl -X POST http://127.0.0.1:19000/agent-approve \ -H Content-Type: application/json \ -d {agentId:刚才拿到的agentId}之后每次状态变化推一次curl -X POST http://127.0.0.1:19000/agent-push \ -H Content-Type: application/json \ -d {agentId:xxx,joinKey:ocj_example_team_01,state:writing,detail:正在处理任务}仓库自带的scripts/office-agent-push.py封装了这套逻辑直接改里面的地址和 Join Key 就能用。注意ocj_example_team_01是公开示例 Key正式使用前必须换掉否则任何人都能往你的看板推状态。4. 验证请求状态切换、自动同步与多 Agent 加入配置写完得验证它真的在工作。分三步测。第一步手动切换状态。对 OpenClaw 说「请你切换一个状态测试一下」它应该会调用set_state.py。回到网页看角色位置和气泡文字都变了说明脚本调用链路正常。第二步自动同步。给 OpenClaw 一个真实任务比如「在 D 盘创建一个文章目录写一篇关于夏天的 markdown 文章」。观察网页任务开始时角色应该移动到对应区域状态变成executing或writing任务完成后角色回到休息区状态变回idle。如果任务中途状态没变说明规则文件没生效或者 Agent 没读到那段规则。第三步多 Agent 加入。在另一台机器上局域网内即可用join-agent接口让第二个 Agent 加入。填好name、joinKey、state拿到agentId后审批再推一次状态。刷新网页访客列表里应该多出一个 Agent休息区或工位上出现第二个像素角色。验证成功的标志很直观网页上能看到多个角色在不同区域活动气泡文字和实际任务对得上。如果角色不动先检查state.json的修改时间再看 Flask 日志有没有收到请求。常见情况是 Agent 调用了脚本但路径不对导致写到了另一个state.json上。这里要提醒一句看板显示的是「最近一次上报的状态」不是实时进程状态。如果 Agent 崩了但没上报error页面会一直停在最后一个状态。所以判断 OpenClaw 是否健康还是要结合进程和日志看板只是辅助。5. 常见报错排查401、local proxy failed、reading choices 与 OAuth配置过程中有几类报错特别常见逐个说清楚。401 Unauthorized多出现在调用 HTTP 接口时。原因通常是 Join Key 不对或者审批流程没走完。检查join-agent返回的agentId有没有拿去agent-approve以及agent-push里的joinKey是否和加入时一致。如果换了 Key 但旧 Agent 还在推也会 401。local proxy failed一般是 cpolar 隧道没连上或者本地 19000 端口没在监听。先确认python3 app.py还在跑再curl http://127.0.0.1:19000看本地能不能通。本地通了但公网不通就是隧道配置问题检查 cpolar 的隧道列表里本地地址是不是 19000。reading choices 报错这类错误通常出现在 Agent 调用模型接口时返回体里没有预期的choices字段。可能是 Model ID 填错了或者 Base URL 指向了不兼容的端点。对照三件套检查Base URL、Key、Model ID 是否匹配当前使用的服务。OAuth 相关报错如果 Agent 走的是 OAuth 授权流程token 过期或 scope 不足都会报错。重新授权一次确认 scope 包含状态推送所需的权限。用 API Key 方式的话检查 Key 有没有被撤销或额度耗尽。状态不更新最隐蔽的一类。脚本执行了但网页没变先看state.json的 mtime再看 Flask 有没有热重载。Flask 默认不开 debug 模式不会自动重载改了文件要重启服务。另外确认set_state.py和app.py读的是同一个state.json。cpolar 隧道 24 小时换域名免费版随机域名每 24 小时左右变一次书签会失效。要固定地址就升级套餐在预留页面保留二级子域名再把隧道类型改成「二级子域名」。固定地址解决的是链接变化不保证服务持续在线。排障时如果涉及 API 接入配置可以参考接入文档核对参数需要验证模型是否正常响应可以用模型对话页面发一条测试请求长期跑编码或 Agent 任务Coding Plan 会更合适。6. 公网访问与安全收尾cpolar 隧道、Join Key 与资产密码本地跑通之后下一步是让办公室能从外网访问。cpolar 的安装不复杂官网下载对应平台的包解压安装cpolar version能输出版本号就说明装好了。然后访问http://127.0.0.1:9200登录 Web UI用注册的账号进去。在隧道管理里编辑website隧道协议选http本地地址填19000地区选China Top保存后到在线隧道列表就能看到公网地址。浏览器打开这个地址应该能看到和本地一样的像素办公室。局域网里加入的 Agent 在公网页面同样可见。免费随机域名够用但地址会变。要固定就进预留页面保留二级子域名再把隧道类型改成「二级子域名」填上保留的名称。之后公网地址就固定成https://你的子域名.cpolar.top这种形式。公网一开安全问题就来了。三件事必须做第一换掉示例 Join Key别再用ocj_example_team_01第二改资产侧边栏密码默认是1234那是配置 Gemini 生图 API 的地方不改等于把钥匙插在门上第三设置强FLASK_SECRET_KEY别用默认值。另外不建议让访客 Agent 自行调用审批接口审批权应该握在自己手里。如果要把公网地址分享给其他 Agent用固定域名替换提示词里的地址即可。推送脚本里的 Base URL 改成https://你的子域名.cpolar.top其余参数不变。这样不在同一局域网的 Agent 也能加入同一间办公室。最后提一下许可Star Office UI 代码是 MIT但部分像素美术资产限定非商业学习、演示和交流使用。要用于商业项目得替换相应素材。这一点在动手改造前最好先确认清楚。整套流程走下来从本地 19000 端口的状态看板到 OpenClaw 自动同步再到 cpolar 公网映射和多 Agent 加入一间会动的像素办公室就成型了。状态同步靠的是 Agent 主动上报看板是辅助可见性工具真正的健康判断还是要回到进程和日志。把安全配置做在前面这套东西才能长期稳定地用下去。