Thinking + Reasoning
思考态 + 推理文本展开：句子流式浮现，结束折叠为「Thought for Ns」可回看。优先级 P0，已移植（1:1 aicss.dev）。
① 活体演示
thinking 中句子逐条浮现（视口封顶 180px、软遮罩自动上滚）；「成功」折叠为 Thought for Ns，点击可展开回看。四态：running（workbench.thinking 累积中）/ ok（思考结束）/ error（run 失败中断）/ empty（无 thinking 事件）。
② 对比台
左：wb-ui 活体（演示句循环）；右：aicss.dev 原站截图存档（2026-08-13 采集，可滚动）。
③ 真实字段说明
与 thinking-state 同源消费 workbench.thinking（契约 3.C.1）：本组件是思考态的展开形态——thinking-state 是标签，本组件加推理正文流。字段真源：packages/contracts/workbench-events.mjs:36-77；reducer apps/web/index.html:6782。分句/分段由宿主处理（真实事件是整段累积文本，无逐句字段——演示的逐句节奏为上游演示行为）。
| 事件 type | 字段 | 驱动行为 |
|---|---|---|
workbench.thinking | payload.text | 推理正文（累积追加 → push()）；出现即 running（header shimmer） |
workbench.run.status | payload.status | failed/cancelled → error；completed → ok（折叠为 Thought for Ns） |
workbench.assistant.completed | payload.text | 回答已产出 → 思考结束（ok） |
| （无 thinking 事件） | — | empty 态：组件不渲染 |
脱敏样本：与 thinking-state 同源，见 fixtures/thinking-state.ndjson（真实解析器输出，含 workbench.thinking 全文）。
④ 用在 workbench 哪个位置
接入点：apps/web/index.html:7518 thinkingFoldInner(text)——与 thinking-state 同一接入点，作为其展开形态（契约 3.D.3）：思考进行中 header shimmer + 正文流式浮现；结束后折叠为「Thought for Ns」，替代现状 details.thinking-fold 的「思考中… N 字」summary + 静态正文。渲染链路：timelineParts → patchTimeline → thinkingFoldHtml(:7524) → thinkingFoldInner(:7518)。只换渲染层，不动 reducer。
⑤ 复制即用代码
引入 tokens + 组件 CSS/JS。全部相对路径、零依赖。
<link rel="stylesheet" href="design/wb-ui/lib/tokens.css"> <link rel="stylesheet" href="design/wb-ui/lib/components/thinking-reasoning.css"> <script src="design/wb-ui/lib/components/thinking-reasoning.js"></script>
// 真实接入：workbench.thinking payload.text 累积 → 按段 push
var h = WbUI.thinkingReasoning.render(el);
h.push(paragraph); // 每收到一段 thinking 文本
h.set("ok"); // 思考结束（折叠为 Thought for Ns）
h.set("error"); // run failed/cancelled → Thinking interrupted
// 演示节奏（上游 700-900ms/句循环）
WbUI.thinkingReasoning.render(el, { sentences: ["…", "…"] }).demoLoop();