一天一个开源项目（第43篇）：Star-Office-UI - 像素风 AI 办公室看板，用 TaoToken 统一 Key 让 OpenClaw 工作状态可视化

1. 为什么要把 OpenClaw 的工作状态搬到像素办公室里OpenClaw 这类助手跑起来之后最大的问题不是它不干活而是你根本不知道它在干什么。终端里滚动的日志刷得飞快你只能看到一堆 token 在跳但「它现在是在写代码、在查资料还是卡在某个报错里出不来」这件事始终是黑盒。Star-Office-UI 就是冲着这个痛点来的它把 AI 助手的工作状态映射成一个像素风格的办公室场景助手在写代码就坐到办公桌前任务完成就回到沙发待命一旦报错就跑到 Bug 区蹲着。你打开浏览器或者桌面宠物窗口一眼就能看出「谁在做什么、现在是否在线」。这个项目本身是 Flask 后端 Phaser 前端 Tauri 桌面壳的组合。Flask 负责接收状态事件、维护state.json、对外暴露 REST 接口Phaser 负责把状态渲染成像素角色和工位动画Tauri 则把整个页面包成一个透明窗口的桌面宠物常驻在屏幕角落。它和 OpenClaw 的集成方式是「状态上报」——助手在接到任务、切换阶段、完成任务时调用一个set_state.py脚本或者直接 POST 接口把状态推给看板。看板收到后更新状态文件前端轮询到变化就驱动角色移动。这篇文章聚焦的是落地角度怎么让 OpenClaw 的任务事件真正驱动 Star-Office-UI 的工位动画。我会给出可复制的 Flask 事件接口配置、Tauri 打包参数以及 OpenClaw 侧的状态上报字段最后演示一次完整的「触发任务 → 核对工位状态变化」的验证动作。适合已经在用 OpenClaw、想让助手状态可见的开发者也适合想拿它当个人状态页或者多 Agent 协作看板的人。前置知识只需要你会基本的 Python 和命令行操作像素风游戏那套东西不需要懂。2. 用 TaoToken 统一 Key 打通 OpenClaw 与看板的状态链路在动手之前先把一个容易被忽略的环节说清楚OpenClaw 本身要调用模型才能干活而 Star-Office-UI 只是「看板」它不负责模型调用。但如果你同时跑多个 Agent、多个项目每个地方都配一套 Key管理起来会很乱。我的做法是用 TaoToken 统一管理模型访问入口让 OpenClaw 侧只认一个 Base URL 和一个 Key这样状态上报脚本里也不用再散落各种凭证。TaoToken 在这里的角色是「统一的模型访问入口」。你可以在官网 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 了解它的定位API 入口是 https://taotoken.net/api这个地址不加 UTM。它的价值在于OpenClaw 的模型调用配置、状态上报脚本里可能用到的辅助模型比如让助手自己总结「昨日小记」都可以走同一个 Key不用在多个平台之间来回切换。具体到配置层面OpenClaw 侧通常需要三件套Base URL、API Key、Model ID。Base URL 填https://taotoken.net/apiKey 在控制台生成Model ID 按你实际用的模型填。这三件套在后面的auth.json和状态上报脚本里都会用到。如果你还没生成 Key可以去 API Keys 页面创建一个https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi_keysutm_campaignrewrite 。生成之后先放好后面配置 Flask 事件接口和 OpenClaw 上报字段时会反复引用。这里要强调一点Star-Office-UI 的看板逻辑和模型调用是解耦的。看板只关心「状态事件」不关心你用什么模型。所以即使你暂时不接模型也能先把看板跑起来用set_state.py手动切状态验证动画。等看板跑通了再把 OpenClaw 的状态上报接进去这样排障会简单很多。我试过一上来就把所有东西串在一起结果状态不动的时候根本分不清是看板没起来、还是上报脚本没执行、还是模型调用卡住了。分步来每一步都能单独验证。另外如果你打算长期跑多个 Agent建议直接上 Coding Plan把模型调用和状态看板一起纳入日常开发流https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding_planutm_campaignrewrite 。这样 OpenClaw 干活、看板显示状态、你随时瞄一眼整条链路是通的。3. 可复制的 Flask 事件接口与 Tauri 打包配置这一节是核心给出可以直接抄的配置。先看 Flask 后端的事件接口。Star-Office-UI 的后端在backend/app.py默认监听127.0.0.1:19000。它的状态存储是一个state.json文件前端轮询/status拿最新状态。我们要做的是确保状态上报接口能正确接收 OpenClaw 推过来的字段。先准备状态文件。首次启动前从样例复制一份cd Star-Office-UI cp state.sample.json state.jsonstate.json的结构大致是这样你可以直接改成自己的初始状态{ state: idle, message: 待命中, agent_name: OpenClaw, updated_at: 2026-03-01T10:00:00 }然后是 Flask 侧的关键接口配置。/set_state接收 POST字段包括state、message可选agent_name。下面是一段可以直接放进backend/app.py参考的接口逻辑如果你用的是原版确认这几个端点存在即可from flask import Flask, request, jsonify import json, os from datetime import datetime app Flask(__name__) STATE_FILE os.path.join(os.path.dirname(__file__), .., state.json) VALID_STATES {idle, writing, researching, executing, syncing, error} def load_state(): with open(STATE_FILE, r, encodingutf-8) as f: return json.load(f) def save_state(data): with open(STATE_FILE, w, encodingutf-8) as f: json.dump(data, f, ensure_asciiFalse, indent2) app.route(/set_state, methods[POST]) def set_state(): payload request.get_json(forceTrue) state payload.get(state, idle) if state not in VALID_STATES: return jsonify({ok: False, error: finvalid state: {state}}), 400 data load_state() data[state] state data[message] payload.get(message, ) data[agent_name] payload.get(agent_name, data.get(agent_name, OpenClaw)) data[updated_at] datetime.now().isoformat() save_state(data) return jsonify({ok: True, state: data}) app.route(/status, methods[GET]) def status(): return jsonify(load_state()) app.route(/health, methods[GET]) def health(): return jsonify({ok: True})启动后端cd backend python3 app.py打开http://127.0.0.1:19000你应该能看到像素办公室。此时用脚本切状态验证python3 set_state.py writing 正在整理文档 python3 set_state.py error 发现问题排查中 python3 set_state.py idle 待命中每执行一次刷新页面就能看到角色在工位之间移动。这一步跑通说明 Flask 事件接口没问题。接下来是 Tauri 打包参数。桌面宠物版在desktop-pet/目录核心配置在tauri.conf.json。透明窗口的关键参数是transparent: true和decorations: false同时要设置窗口大小和置顶。下面是一份可参考的配置片段{ tauri: { windows: [ { title: Star Office, width: 480, height: 320, transparent: true, decorations: false, alwaysOnTop: true, resizable: false, skipTaskbar: true } ], bundle: { identifier: com.example.staroffice, active: true, targets: [dmg, app] } } }打包命令cd desktop-pet npm install npm run tauri build打包完成后桌面宠物会以透明窗口形式出现自动拉起 Python 后端。注意Tauri 打包时如果后端路径写死换机器会失效建议用相对路径或者在启动脚本里动态解析。另外alwaysOnTop在部分系统上需要额外权限macOS 上首次运行可能要在「辅助功能」里授权。OpenClaw 侧的状态上报字段建议在SOUL.md或 Agent 规则文件里加一段规则让助手在任务节点自动调用上报脚本## Star Office 状态同步规则 - 接到任务时先执行 python3 set_state.py writing 任务描述 再开始工作 - 调研阶段执行 python3 set_state.py researching 正在查资料 - 执行命令执行 python3 set_state.py executing 跑任务中 - 完成任务执行 python3 set_state.py idle 待命中 再回复 - 遇到报错执行 python3 set_state.py error 错误摘要如果你用的是auth.json管理 OpenClaw 的模型凭证记得把三件套写全{ base_url: https://taotoken.net/api, api_key: 你的_TaoToken_Key, model_id: 你实际使用的模型ID }这样 OpenClaw 调用模型和上报状态用的是同一套凭证体系不会出现「模型能调、上报脚本却拿不到 Key」的割裂情况。4. 启动看板并触发一次任务核对工位状态变化配置写完之后最关键的是验证。很多人卡在「配置都填了但角色不动」其实是没有做端到端的触发验证。下面这套动作我建议你完整走一遍。第一步确认后端在跑。终端里执行curl http://127.0.0.1:19000/health返回{ok: true}说明 Flask 活着。如果连不上先看端口是不是被占用lsof -i :19000查一下。第二步确认状态接口能写进去。手动 POST 一次curl -X POST http://127.0.0.1:19000/set_state \ -H Content-Type: application/json \ -d {state:writing,message:正在写代码,agent_name:OpenClaw}然后 GET 一次/status看返回的state是不是writing。这一步是纯后端验证不涉及前端。第三步打开浏览器http://127.0.0.1:19000观察角色是否从沙发移动到办公桌。如果状态变了但角色没动问题在前端轮询或者 Phaser 渲染不在后端。第四步触发一次真实的 OpenClaw 任务。给助手发一个简单指令比如「帮我整理一下今天的待办」。按照前面SOUL.md的规则助手应该先执行set_state.py writing再开始干活。你盯着看板应该能看到角色移动到工作区气泡显示「正在整理文档」之类的文案。任务完成后助手执行set_state.py idle角色回到沙发。第五步故意制造一次报错。让助手执行一个会失败的命令比如访问一个不存在的文件。如果规则里配了 error 上报角色应该跑到 Bug 区。这一步能验证「异常状态」的映射是否生效。第六步核对state.json的updated_at字段。每次状态变化这个时间戳都应该更新。如果时间戳没变说明上报脚本没真正写进去可能是路径不对或者权限问题。整套动作跑下来你应该能清楚看到任务触发 → 状态上报 → 后端写入 → 前端轮询 → 角色移动这条链路是通的。如果中间任何一环断了下一节的排错对照表能帮你快速定位。5. 常见报错排查401、local proxy failed 与 reading choices这一节按真实报错来。我在接看板和 OpenClaw 的过程中踩过的坑基本集中在这几类。401 Unauthorized。这个通常出现在 OpenClaw 调用模型的时候不是看板本身的问题。如果你在auth.json里填了 TaoToken 的 Key但请求返回 401先检查三件事Base URL 是不是https://taotoken.net/api注意不要多加路径、Key 有没有多余空格、Model ID 是不是当前账号可用的。看板侧如果也报了 401那多半是你给看板的某个辅助接口配了鉴权但没带 token。Star-Office-UI 默认的/set_state是不鉴权的如果你自己加了密码保护记得在请求头里带上。local proxy failed。这个报错一般出现在网络层意思是本地代理没起来或者配置不对。注意这里说的是「本地代理」这个技术概念不是让你去搞什么网络工具。如果你在 OpenClaw 侧配了 HTTP 代理环境变量但代理进程没启动就会报这个。排查方法先echo $HTTP_PROXY看有没有残留配置如果有但不需要直接unset HTTP_PROXY HTTPS_PROXY。看板侧如果前端请求/status报这个检查浏览器是不是走了系统代理把127.0.0.1加入例外即可。reading choices 相关报错。这个通常出现在模型返回结构不符合预期的时候比如 OpenClaw 期望拿到choices[0].message.content但实际返回的是错误结构。如果你用的是兼容 OpenAI 协议的入口确认请求体里的model字段和auth.json里的model_id一致。另外有些模型在流式返回时结构不同如果你开了流式但解析代码按非流式写就会读不到choices。解决办法是统一用非流式或者按流式格式解析。OAuth 相关报错。如果你在 OpenClaw 里用了 OAuth 方式登录某个服务但 token 过期了会报 OAuth 错误。这类问题一般重新授权即可。注意不要把 OAuth token 和 API Key 混用两者是不同的认证体系。看板侧不涉及 OAuth所以这个报错基本只在 OpenClaw 侧出现。角色不动但/status返回正常。这是前端问题。打开浏览器控制台看有没有 Phaser 加载失败或者轮询请求报错。常见原因是前端轮询间隔太长或者状态值不在VALID_STATES里。检查state.json里的state字段是不是六个合法值之一拼写错误会导致前端无法映射到区域。Tauri 桌面宠物透明窗口不生效。检查tauri.conf.json里transparent和decorations是否都设对了另外 macOS 上需要在Info.plist里加透明窗口支持。如果打包后窗口是黑底多半是 WebView 背景色没设透明在 CSS 里给body加background: transparent。多 Agent 状态互相覆盖。如果你用 join key 接了多个 Agent但发现状态总是被最后一个覆盖检查agent-push接口是不是按agent_name区分存储。原版设计里每个 Agent 有独立状态如果你改成了单文件存储就会互相覆盖。建议每个 Agent 一个状态键或者用join-keys.json里的 key 做隔离。排错的核心思路是「分层验证」先确认后端接口通再确认前端渲染通最后确认 OpenClaw 上报通。不要一上来就怀疑最复杂的环节。6. 把状态看板接进日常开发流看板跑通之后真正有价值的是让它成为你日常开发的一部分而不是一个演示完就关掉的玩具。我的做法是把 Star-Office-UI 常驻在副屏或者桌面角落OpenClaw 干活的时候我不用盯着终端瞄一眼像素办公室就知道进度。如果角色长时间待在 Bug 区说明有报错需要处理如果一直在工作区说明任务在推进回到沙发说明这轮任务结束了。如果你想让看板承担更多角色可以把它和 Coding Plan 结合起来让 OpenClaw 长期跑编码任务看板负责状态可视化https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding_planutm_campaignrewrite 。模型调用走统一入口状态上报走看板接口两边互不干扰。需要调试模型返回的时候可以用模型对话页面单独验证https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel_chatutm_campaignrewrite 。接入文档在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 里面有 Base URL 和鉴权的详细说明。最后给一个实用技巧状态上报的文案不要太长像素气泡显示区域有限超过十几个字就会被截断。建议用「正在写代码」「查资料中」「跑测试」这种短句。另外set_state.py脚本可以包一层让 OpenClaw 调用更简单比如封装成report.sh writing 写代码减少助手拼命令出错的概率。看板这东西越省事越能坚持用下去。