Thinking State
思考态流光标签：agent 作答前的处理中信号。优先级 P0，已移植（1:1 aicss.dev）。
① 活体演示
真实运行的组件（非截图）。四态与真实字段对齐：running（workbench.thinking 进行中）/ ok（思考结束，同 outcome:"ok" 枚举）/ error（run.status:"failed" 或 outcome:"error"）/ empty（该 run 无 thinking 事件）。
② 对比台
左：wb-ui 活体（running 态）；右：aicss.dev 原站截图存档（2026-08-13 采集，整页截图可滚动，演示区在页面上部）。
③ 真实字段说明
字段真源：packages/contracts/workbench-events.mjs:11-77；消费方 reducer：apps/web/index.html:6782 applyRunnerEventDelta（事件包裹层为 evt.data = normalized 事件，下表「字段」即其属性，契约文档记作 payload.*）。本组件只读下列字段，不臆造。
| 事件 type | 字段 | 驱动行为 |
|---|---|---|
workbench.thinking | payload.text | 出现即进入 running（shimmer）；文本累积供展开阅读（展开形态属 thinking-reasoning 组件，轮 2） |
workbench.run.status | payload.status | failed / cancelled → error 态；completed → ok 态 |
workbench.run.failed | payload.message | error 态的补充说明（本组件不展示正文，留给宿主） |
workbench.assistant.completed | payload.text | 回答已产出 → 思考结束，进入 ok 态 |
| （无 thinking 事件） | — | empty 态：组件不渲染 |
脱敏样本（真实解析器 createClaudeNormalizer 输出，字段结构 100% 真实；文件：fixtures/thinking-state.ndjson，生成脚本 scripts/wb-ui-fixtures.mjs）：
{"type":"workbench.run.progress","state":"starting","detail":"Claude Code 2.1.7","native_session_id":"<UUID>"}
{"type":"workbench.run.progress","state":"thinking","detail":"Thinking…"}
{"type":"workbench.thinking","text":"The user wants a native timeline. I should first inspect the docs, then edit the renderer. Secret check: WORKBENCH_OPERATOR_TOKEN=<redacted> must never leak."}
{"type":"workbench.run.progress","state":"rate_limited","detail":"Approaching weekly limit"}
{"type":"workbench.assistant.completed","text":"Done — scratch note written and edited."}
{"type":"workbench.assistant.completed","text":"Done — scratch note written and edited."}
{"type":"workbench.run.progress","state":"finalizing","detail":"Wrapping up"}
④ 用在 workbench 哪个位置
接入点：apps/web/index.html:7518 thinkingFoldInner(text)——对话时间线里 details.thinking-fold 的 <summary> 当前是静态文字「思考中… N 字」。轮 3a 在 ?ui=next 灰度下把该 summary 换成本组件：思考进行中 shimmer（running），文本齐后转 ok 并保留展开阅读；run 失败转 error。渲染入口链路：timelineParts → patchTimeline → thinkingFoldHtml(:7524) → thinkingFoldInner(:7518)。只换渲染层 class 与文案，不动 applyRunnerEventDelta 状态语义（docs/86 要素 3.D.1）。
⑤ 复制即用代码
引入两个文件（tokens + 组件），可选行为层 JS。全部相对路径、零依赖。
<link rel="stylesheet" href="design/wb-ui/lib/tokens.css"> <link rel="stylesheet" href="design/wb-ui/lib/components/thinking-state.css"> <script src="design/wb-ui/lib/components/thinking-state.js"></script>
<!-- state: running | ok | error | empty --> <span class="wbui-thinking-state" data-state="running">Thinking</span>
// 手动切态 WbUI.thinkingState.set(el, "ok"); // running | ok | error | empty WbUI.thinkingState.set(el, "running", "思考中"); // 可选自定义文案 // 或按真实 workbench.* 事件流推导（NDJSON 逐行 parse 后传入） WbUI.thinkingState.fromEvents(el, events);