To-do List
待办清单：进行中饼图 + 滚动计数 + 条目 shimmer/勾选动效。优先级 P1，已移植（1:1 aicss.dev）。
① 活体演示
上：完整动效循环（上游节奏 2250ms/项）。下：降级数据源渲染——用 ③ 的 markdown task-list 样本经 fromMarkdown 解析（真实接入路径，契约 OQ-3）。四态：running / ok / error / empty。
② 对比台
左：wb-ui 活体（上游演示数据循环）；右：aicss.dev 原站截图存档（2026-08-13 采集，可滚动）。
③ 真实字段说明
无真实事件，降级方案（契约 OQ-3，用户已确认按推荐默认执行）：run event 里没有任何 todo/计划类事件（字段真源 packages/contracts/workbench-events.mjs:11-77 的 9 个 type 均无）。P1 接入按 markdown task-list 语法降级——仅当 assistant 文本含 - [ ] / - [x] 行时套用本组件；日后 runner 若透传 plan/todo 事件（如 claude-code 的 plan 工具），另立需求接真字段。
| 数据源 | 形态 | 驱动行为 |
|---|---|---|
workbench.assistant.completed 的 payload.text | - [ ] 事项（未完成） | pending 条目（虚线圈） |
| 同上 | - [x] 事项（已完成） | done 条目（勾 + 删除线），计数/饼图跟随 |
workbench.run.status | payload.status = failed/cancelled | error 态（头部勾染 danger） |
| （无 task-list 语法） | — | empty 态：组件不渲染 |
降级数据源样本（markdown 语法，非事件流；上面①的第二块即由它渲染）：
- [x] Scaffold the project structure - [x] Build the component registry - [ ] Implement entitlement gating - [ ] Wire up Stripe checkout - [ ] Polish the landing page
④ 用在 workbench 哪个位置
接入点：apps/web/index.html:4624 renderMarkdownSafe(text)——轮 3b 在 ?ui=next 灰度下，list 渲染分支检测 task-list 语法（- [ ]/- [x]）并套用本组件样式（契约 3.D.4：仅样式级降级接入，无 todo 事件不造字段）。下游：renderAssistantAnswer(:4857)。只加渲染分支，不动解析器与转义。
⑤ 复制即用代码
引入 tokens + 组件 CSS/JS。全部相对路径、零依赖。
<link rel="stylesheet" href="design/wb-ui/lib/tokens.css"> <link rel="stylesheet" href="design/wb-ui/lib/components/task-list.css"> <script src="design/wb-ui/lib/components/task-list.js"></script>
// 真实接入（OQ-3 降级）：assistant markdown → items
var items = WbUI.taskList.fromMarkdown(completedText); // null = 无语法，不渲染
if (items) WbUI.taskList.render(el, { items: items }).set("ok");
// 结构化 items + 单条更新
var h = WbUI.taskList.render(el, { items: [{ label: "…", state: "pending" }] });
h.setItem(0, "active"); // pending | active | done（计数/饼图自动跟随）