1. 为什么需要给 OpenClaw 装一块状态看板OpenClaw 跑起来之后消息能收、任务能执行但有个很实际的问题Agent 此刻到底在干什么是待命、写作、研究、执行还是已经卡住报错了以前只能翻对话记录或者看日志任务一多就顾不过来。Star Office UI 解决的就是这个看不见的问题。它是一个开源的像素风格 AI 办公室看板把 Agent 的 6 种状态——idle待命、writing写作、researching研究、executing执行、syncing同步、error异常——映射到一间像素办公室里。状态一变角色就跑到对应区域气泡里显示当前工作描述。它适合谁已经在用 OpenClaw 做长期任务的用户、想同时盯多个 Agent 的团队、以及希望出门在外也能瞄一眼 Agent 状态的人。它不替 Agent 干活只负责把状态展示出来这个边界要先搞清楚。本文按实际验证顺序走一遍本地 19000 端口跑起来、状态能不能真切换、任务前后能不能自动同步、第二个 Agent 能不能加入、最后用 cpolar 把 19000 映射到公网让跨网络的 Agent 也能接入同一间办公室。2. 部署前的环境准备与 TaoToken 接入Star Office UI 后端是 Python Flask前端是纯静态页面。部署前确认三件事Python 3.10 及以上项目用了X | Y联合类型语法3.9 会报错、Git 能拉代码、网络能访问 GitHub。如果你打算让 OpenClaw 长期跑任务建议把看板和 Agent 放在同一台设备上比如树莓派、NAS、旧笔记本这类常开机器。这样状态推送走本地回环延迟低也稳定。另外OpenClaw 这类 Agent 在调用模型时接口地址和 Key 的管理建议统一收口。我一般用 TaoToken 来管理模型调用官网是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 入口是 https://taotoken.net/api 。先把 Key 建好后面 Agent 配置里直接引用省得每个 Agent 各写一份。创建 Key 的入口在控制台的 API Keys 页面https://taotoken.net/console/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite 。建好之后复制出来填到 OpenClaw 的模型配置里。如果你还没决定用哪个模型可以先去模型对话页面试一下https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_contentmodel-chatutm_campaignrewrite 。这一步不是必须的但如果你后面要跑多 Agent、每个 Agent 都要调模型统一入口会省很多事。接入文档在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 里面有各语言的调用示例。3. 安装 Star Office UI 并跑通 19000 端口项目仓库地址是 https://github.com/ringhyacinth/Star-Office-UI 。作者给了两种安装方式手动部署更稳Skill 部署更省事。3.1 手动部署推荐先走这条打开终端按顺序执行# 1) 拉取仓库 git clone https://github.com/ringhyacinth/Star-Office-UI.git cd Star-Office-UI # 2) 安装依赖需要 Python 3.10 python3 -m pip install -r backend/requirements.txt # 3) 准备状态文件首次 cp state.sample.json state.json # 4) 启动后端 cd backend python3 app.py终端出现Running on http://127.0.0.1:19000之后浏览器打开http://127.0.0.1:19000。页面能正常显示像素办公室才算部署完成。如果页面打不开先看终端有没有报错再确认 19000 端口没被别的程序占用。3.2 让 OpenClaw 按 Skill 部署如果 OpenClaw 已经在跑可以直接把 Skill 文档丢给它请按照这个 SKILL.md 帮我完成 Star Office UI 的部署 https://github.com/ringhyacinth/Star-Office-UI/blob/master/SKILL.mdOpenClaw 会按文档依次执行拉代码、装依赖、初始化配置、启动后端。执行完它会返回一个本地地址通常是http://localhost:19000打开验证即可。注意Skill 部署只是让 Agent 帮你执行命令Star Office UI 本身还是那个看板服务职责没变。3.3 状态文件长什么样state.json是看板读取状态的核心文件结构大致如下{ state: idle, detail: 待命中, updated_at: 2025-01-01T00:00:00 }state字段就是那 6 种状态之一detail是气泡里显示的文字。手动改这个文件页面刷新后也会跟着变。4. 状态联动验证从手动切换到自动同步页面跑起来只是第一步核心要验证的是Agent 状态变了页面上的角色是不是真的跟着动。4.1 手动切换测试先对 OpenClaw 说一句请你切换一个状态测试一下它返回切换完成后回到像素办公室页面刷新。角色位置和状态文字都变了说明状态写入 → 页面联动这条链路通了。4.2 写入自动同步规则每次手动发指令不现实。更合理的做法是让 Agent 在任务开始和结束时自己维护状态。把下面这段规则写进 OpenClaw 的 SOUL.md 或 Agent 规则文件## Star Office 状态同步规则 - 接到任务时先执行 python3 set_state.py 状态 描述 再开始工作 - 完成任务后执行 python3 set_state.py idle 待命中 再回复写入之后用一个真实任务验证请你在我的电脑 D 盘创建一个文章的目录在里面写一篇关于《夏天》的 markdown 文章观察页面任务开始时角色跑到 writing 区域任务结束后回到 idle。这一步跑通看板才从演示页面变成随任务自动更新的状态面板。4.3 第二个 Agent 加入办公室Star Office UI 提供 Join Key 和一组接口让其他 Agent 把状态推到同一个看板。先问 OpenClaw 怎么邀请我应该如何邀请其他 Agent 加入办公室一起玩请你给我邀请其他 agent 加入的提示词和示例。拿到接入方式后在另一台机器上执行三步。第一步加入curl -X POST http://192.168.50.222:19000/join-agent \ -H Content-Type: application/json \ -d {\name\:\你的名字\,\joinKey\:\ocj_example_team_01\,\state\:\idle\,\detail\:\刚加入\}第二步审批用上一步返回的 agentIdcurl -X POST http://192.168.50.222:19000/agent-approve \ -H Content-Type: application/json \ -d {\agentId\:\刚才拿到的agentId\}第三步定时推送状态每 30 秒或状态变化时调用curl -X POST http://192.168.50.222:19000/agent-push \ -H Content-Type: application/json \ -d {\agentId\:\xxx\,\joinKey\:\ocj_example_team_01\,\state\:\writing\,\detail\:\正在处理任务\}仓库自带scripts/office-agent-push.py直接用它更省事。回到看板页面访客列表里出现新 Agent休息区也能看到对应角色局域网多 Agent 接入就成立了。5. 用 cpolar 把 19000 映射到公网局域网内验证完接下来处理公网访问。cpolar 在这里只做一件事把本地 19000 服务映射到公网让外部浏览器和跨网络 Agent 能访问同一个入口。它不参与状态同步也不管多 Agent 逻辑。5.1 安装与登录去 cpolar 官网下载页 https://www.cpolar.com/download 下载对应平台的安装包解压后一路默认安装。装完在终端确认cpolar version能返回版本号就说明装好了。然后注册账号浏览器打开http://127.0.0.1:9200进入 Web UI 管理界面用刚注册的账号登录。5.2 随机域名先测连通性登录后点左侧【隧道管理】→【隧道列表】默认有两条隧道。编辑website那条隧道名称填StarOfficeUI协议选http本地地址填19000地区选China Top保存。再到【状态】→【在线隧道列表】能看到两条StarOfficeUI隧道一条 http 一条 https。用公网地址打开页面正常显示、局域网里已加入的 Agent 也还在说明 19000 的远程链路通了。注意随机域名大约每 24 小时换一次适合测试不适合长期写进配置。5.3 固定二级子域名多 Agent 场景下如果其他机器把地址写进了推送配置地址一变就得挨个改。所以长期用建议配固定二级子域名。进入 https://dashboard.cpolar.com/reserved 选【预留】→【保留二级子域名】填地区、名称、描述点保留。然后在【隧道管理】→【隧道列表】编辑website域名类型改成【二级子域名】填入刚保留的子域名更新。回到【在线隧道列表】公网地址已经变成固定形式。用 https 访问测试能打开就说明长期入口配好了。5.4 跨网络 Agent 接入验证最后验证一个更有意义的场景让不在同一局域网的 Agent 通过公网地址加入。在另一台机器上把前面三步里的http://192.168.50.222:19000换成固定公网地址curl -X POST https://soui.cpolar.top/join-agent \ -H Content-Type: application/json \ -d {\name\:\你的名字\,\joinKey\:\ocj_example_team_01\,\state\:\idle\,\detail\:\刚加入\}审批和推送同理把域名换掉即可。回到看板访客列表里出现新 Agent说明固定公网入口不仅能打开页面也能承载跨网络的状态接入。注意办公室暴露到公网后侧边栏资产侧边栏配置 Gemini 生图 API 的位置默认密码是 1234第一时间改掉别继续用默认值。6. 常见报错排查页面打不开终端报ModuleNotFoundError依赖没装全。回到项目根目录重新执行python3 -m pip install -r backend/requirements.txt确认 Python 版本是 3.10 以上。启动报SyntaxError: unsupported operand type(s) for |Python 版本太低。X | Y联合类型语法需要 3.10升级 Python 或换用 3.10 以上的虚拟环境。19000 端口被占用换端口启动或者先查谁占着lsof -i :19000杀掉对应进程再启动。状态切了但页面没变先确认state.json里的state字段真的改了再强制刷新页面CtrlF5。如果用的是自动同步规则检查set_state.py的路径是不是相对路径Agent 工作目录变了会找不到脚本。第二个 Agent 加入后不显示检查/join-agent返回的 agentId 有没有拿去调/agent-approve。没审批的 Agent 不会出现在访客列表里。另外确认 joinKey 和看板端配置的一致。cpolar 公网地址打开是 404隧道本地地址填错了。确认填的是19000而不是8080协议选http。改完在【在线隧道列表】重新拿地址访问。跨网络 Agent 推送失败先用浏览器打开公网地址确认页面能访问再检查 curl 里的域名和 joinKey。如果用的是随机域名地址可能已经变了换固定二级子域名更稳。如果你在接入过程中需要统一管理模型 Key可以走 API Keys 页面https://taotoken.net/console/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite 。长期跑编码类 Agent 的话Coding Plan 会更合适https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite 。接入细节看文档https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 。