Web Search
联网搜索工具卡片：查询 shimmer、逐站发现/加载/完成动效。优先级 P0，已移植（1:1 aicss.dev）。
① 活体演示
上：完整形态（演示数据，站点条目 pending→loading→done 循环）。下：真实数据降级形态——契约 2.3 无结构化搜索结果列表字段，接入时列表区降级为 result_excerpt 文本（此处用下方脱敏样本真实渲染）。四态：running（activity.started, kind=search）/ ok（outcome:"ok"）/ error（outcome:"error"）/ empty。
② 对比台
左：wb-ui 活体（完整形态循环动效）；右：aicss.dev 原站截图存档（2026-08-13 采集，可滚动）。
③ 真实字段说明
字段真源：packages/contracts/workbench-events.mjs:24-77（ACTIVITY_KIND 含 search）；reducer apps/web/index.html:6782。没有结构化搜索结果列表字段（站点标题/URL/逐站状态）——完整列表形态仅演示用，接入 workbench 时列表区降级为 excerpt 文本（契约 3.D.3）。
| 事件 type | 字段 | 驱动行为 |
|---|---|---|
workbench.activity.started | payload.kind = "search" | 识别为搜索卡片，进入 running（标签 shimmer） |
workbench.activity.started | payload.label / tool / args_summary | 查询词展示（“Searching …”引号内文本） |
workbench.activity.completed | payload.outcome（"ok"|"error"） | ok / error 态切换，shimmer 停止 |
workbench.activity.completed | payload.result_excerpt / result_summary | 降级列表区文本（无结构化站点列表字段） |
| （无 kind=search 事件） | — | empty 态：组件不渲染 |
脱敏样本（真实解析器输出；文件：fixtures/tool-activity.ndjson，生成脚本 scripts/wb-ui-fixtures.mjs）——搜索类 activity 节选：
{"type":"workbench.activity.started","activity_id":"act_1d10e2f3dc60","kind":"search","label":"> ls docs","tool":"Bash","target":"ls docs","args_summary":"ls docs"}
{"type":"workbench.activity.completed","activity_id":"act_1d10e2f3dc60","outcome":"ok","summary":"3 lines output","result_summary":"3 lines output","result_excerpt":"00-glossary.md\n01-architecture.md\n02-mvp-scope.md"}
{"type":"workbench.activity.started","activity_id":"act_e78f883fddac","kind":"search","label":"grep Round","detail":"docs/12-align-warp-chat-experience-round-plan.md","tool":"Grep","target":"Round","args_summary":"in docs/12-align-warp-chat-experience-round-plan.md"}
{"type":"workbench.activity.completed","activity_id":"act_e78f883fddac","outcome":"ok","summary":"2 matches","result_summary":"2 matches","result_excerpt":"docs/12:56:| Order | Task name |\ndocs/12:69:| 6 | round6 |"}
④ 用在 workbench 哪个位置
接入点：apps/web/index.html:7479 nativeStepInner(step)——对话时间线工具步骤卡（.step-head/.step-bullet/.step-tool/.step-args/.step-result）。轮 3a 在 ?ui=next 灰度下，kind=search 的步骤换用本组件：查询词取 label/args_summary，结果区渲染 result_excerpt（降级形态），outcome 驱动 ok/error。渲染链路：timelineParts → patchTimeline → nativeStepHtml(:7494) → nativeStepInner(:7479)。只换渲染层，不动 reducer（docs/86 要素 3.D）。
⑤ 复制即用代码
引入 tokens + 组件 CSS/JS，调用 render。全部相对路径、零依赖。
<link rel="stylesheet" href="design/wb-ui/lib/tokens.css"> <link rel="stylesheet" href="design/wb-ui/lib/components/web-search.css"> <script src="design/wb-ui/lib/components/web-search.js"></script>
// 真实接入（降级形态：excerpt 文本，无结构化站点列表）
var h = WbUI.webSearch.render(el, {
query: started.args_summary || started.label, // activity.started
excerpt: completed.result_excerpt // activity.completed
});
h.set(completed.outcome === "error" ? "error" : "ok");
// 演示形态（结构化站点列表 + 循环动效）
WbUI.webSearch.render(el, { query: "…", sites: [{ title: "…", url: "…" }] }).demoLoop();