@orbit-work/ui 0.1.0

package/src/components/domain/chat/ContextUsage/ContextUsage.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { ContextUsage } from "./index"
+
+const meta = {
+  title: "Chat/ContextUsage",
+  component: ContextUsage,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof ContextUsage>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** <60%：text-3 静默档 */
+export const Under60: Story = {
+  args: { value: 0.42 },
+}
+
+/** ≥60%：warning 档 */
+export const Warning60to85: Story = {
+  args: { value: 0.68 },
+}
+
+/** ≥85%：danger 档 */
+export const Danger85Plus: Story = {
+  args: { value: 0.91 },
+}
+
+/** 满窗：danger 满弧，珠心回到起笔点前 24° */
+export const Full: Story = {
+  args: { value: 1 },
+}
+
+/** 状态栏内联档：并排 mono 读数（tabular-nums） */
+export const WithReadout: Story = {
+  args: { value: 0.68, showReadout: true, readout: "68% · 136k / 200k" },
+}
+
+/** 缺省读数：只给 value 时读数为百分比 */
+export const WithDefaultReadout: Story = {
+  args: { value: 0.42, showReadout: true },
+}
+
+/** 放大示教档：size 40（stroke 3 / 珠 4.5） */
+export const TeachingSize: Story = {
+  args: { value: 0.91, size: 40, showReadout: true, readout: "91% · 182k / 200k" },
+}
+
+/** 全档位一览：<60 / 60-85 / ≥85 / 满 */
+export const AllTiers: Story = {
+  args: { value: 0.42 },
+  render: () => (
+    <div style={{ display: "flex", alignItems: "center", gap: 24 }}>
+      <ContextUsage value={0.42} showReadout readout="42% · 84k / 200k" />
+      <ContextUsage value={0.68} showReadout readout="68% · 136k / 200k" />
+      <ContextUsage value={0.91} showReadout readout="91% · 182k / 200k" />
+      <ContextUsage value={1} showReadout readout="100% · 200k / 200k" />
+    </div>
+  ),
+}

package/src/components/domain/chat/ContextUsage/index.tsx

@@ -0,0 +1,69 @@
+// DS2 §12 锁定件：照卡移植自 ow/components/chat/ContextUsage/ContextUsage.html
+// 上下文用量弧：自 +24° 顺时针生长（rotate(-24)+stroke-dasharray 控比例），末端结卫星珠（珠心落在收笔点）。
+// 档位：<60%=text-3 · ≥60%=warning · ≥85%=danger；轨道=progress-track；读数 mono+tabular-nums。
+// 全程无荧黄，不占三极配额。
+
+/** viewBox 48 下的周长常量，与规格卡 stroke-dasharray 基数一致 */
+const CIRCUMFERENCE = 113.2
+
+export interface ContextUsageProps {
+  /** 用量比例 0-1；档位切换：0.6 起 warning，0.85 起 danger */
+  value: number
+  /** 边长 px，默认 18（状态栏内联档）；40+ 为放大示教档 */
+  size?: number
+  /** 是否并排显示 mono 读数（如 68% · 136k / 200k） */
+  showReadout?: boolean
+  /**
+   * 自定义读数文本（如 "68% · 136k / 200k"）；缺省为四舍五入百分比。
+   * 规格 .d.ts 之外的可选扩展槽位，供兼容包装映射预格式化标签。
+   */
+  readout?: string
+  className?: string
+}
+
+/* R2 复审修：危险档原读 --ow-danger——那是 tokens.css :root 里的兼容别名
+   （`--ow-danger: var(--ow-error)`），全库只两处消费；同族其余（.context-usage-indicator--danger）
+   用的是 --ow-error。同一档位不留两个名字，统一到 --ow-error。值不变。 */
+function tierColor(value: number): string {
+  if (value >= 0.85) return "var(--ow-error)"
+  if (value >= 0.6) return "var(--ow-warning)"
+  return "var(--ow-text-3)"
+}
+
+export function ContextUsage({
+  value,
+  size = 18,
+  showReadout = false,
+  readout,
+  className,
+}: ContextUsageProps): React.ReactElement {
+  const clamped = Math.min(1, Math.max(0, value))
+  const color = tierColor(clamped)
+  // 规格卡：18px 档 stroke-width 4 / 珠 r 5.5；40px 示教档 stroke-width 3 / 珠 r 4.5
+  const strokeWidth = size <= 24 ? 4 : 3
+  const beadRadius = size <= 24 ? 5.5 : 4.5
+  const arcLength = clamped * CIRCUMFERENCE
+  // 弧自 +24° 起笔（rotate(-24)），珠心落在收笔点：-24 + value*360
+  const beadAngle = -24 + clamped * 360
+  return (
+    <span className={`ow-context-usage${className ? ` ${className}` : ""}`}>
+      <svg width={size} height={size} viewBox="0 0 48 48" aria-hidden="true">
+        <circle cx="24" cy="24" r="18" fill="none" stroke="var(--ow-progress-track)" strokeWidth={strokeWidth} />
+        <circle
+          cx="24"
+          cy="24"
+          r="18"
+          fill="none"
+          stroke={color}
+          strokeWidth={strokeWidth}
+          strokeDasharray={`${arcLength} ${CIRCUMFERENCE}`}
+          transform="rotate(-24 24 24)"
+        />
+        <g transform={`rotate(${beadAngle} 24 24)`}>
+          <circle cx="42" cy="24" r={beadRadius} fill={color} />
+        </g>
+      </svg>
+      {showReadout && <span className="ow-context-usage__readout">{readout ?? `${Math.round(clamped * 100)}%`}</span>}
+    </span>
+  )
+}

package/src/components/domain/chat/ExecutionSummary/ExecutionSummary.stories.tsx

@@ -0,0 +1,238 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { ExecutionDetail, ExecutionSummary } from "./index"
+
+const meta = {
+  title: "Chat/ExecutionSummary",
+  component: ExecutionSummary,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div style={{ maxWidth: 752 }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof ExecutionSummary>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const TOOLS = [
+  {
+    name: "read_file",
+    args: "packages/ui/src/components/domain/chat/index.ts",
+    elapsed: "0.3s",
+    out: "22 行 · 已导出 22 件",
+  },
+  {
+    name: "grep",
+    args: '"ExecutionSummary" packages/ui/src',
+    elapsed: "0.9s",
+    out: "4 处命中：AgentTurn/index.tsx:15\nAgentTurn/index.tsx:35\nAgentTurn.stories.tsx:54\nArtifactCard.stories.tsx:47",
+  },
+  {
+    name: "run_tests",
+    args: "pnpm test --filter chat",
+    elapsed: "12.4s",
+    out: "# pass 31\n# fail 0",
+  },
+]
+
+/** 收起态：短迹＋动宾摘要＋mono「N 步 · 时长」＋行尾 14px ChevRight */
+export const Default: Story = {
+  args: {
+    label: "核对组件库现状",
+    steps: 6,
+    duration: "2m06s",
+    tools: TOOLS,
+  },
+}
+
+/**
+ * 展开态：border-top 分界 ＋ --ow-surface-2 井底，每条 mono 11px 三段＋ pre-wrap 输出。
+ *
+ * R4 · 2026-09-04：头行 chevron 从 ▸/▾ 两个文字字形换成图标集的 `ChevRight`/`ChevDown`
+ * （14px `--ow-text-3`，`data-ow-part="chevron"`）——转录里所有可展开的东西
+ * （思考行 / 摘要卡 / 明细行）用同一枚记号，字形与图标混着出会读成两种控件。
+ */
+export const Expanded: Story = {
+  args: {
+    label: "核对组件库现状",
+    steps: 6,
+    duration: "2m06s",
+    tools: TOOLS,
+    defaultOpen: true,
+  },
+}
+
+/** 读数无数据：`ToolBlock` 目前没有耗时字段，读数位整段不渲染——不占位、不补零 */
+export const NoReadout: Story = {
+  args: {
+    label: "扫 6 个订阅源",
+    tools: [{ name: "fetch_feed", args: "https://example.com/feed.xml", out: "18 条新条目" }],
+  },
+}
+
+/** 无明细：头行落成静态行，不出 chevron、不做死钮 */
+export const NoTools: Story = {
+  args: {
+    label: "整理引用页码",
+    steps: 2,
+    duration: "18s",
+  },
+}
+
+/** 长摘要与长参数：label 单行省略，args 单行省略，输出仍换行铺开 */
+export const Overflow: Story = {
+  args: {
+    label: "核对组件库现状并把三件缺件的 props 契约与原型模板逐行对齐，顺带清掉旧披露行",
+    steps: 12,
+    duration: "8m41s",
+    defaultOpen: true,
+    tools: [
+      {
+        name: "read_file",
+        args: "/home/terry/Coding/orbit/orbit-fe/packages/ui/src/components/domain/chat/ExecutionSummary/index.tsx#L1-L220",
+        elapsed: "0.4s",
+        out: "220 行",
+      },
+    ],
+  },
+}
+
+/** 转录语境：一段 agent loop 里，思考行之下、返回正文之上 */
+export const InSegment: Story = {
+  args: { label: "" },
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
+      <ExecutionSummary label="核对组件库现状" steps={6} duration="2m06s" tools={TOOLS} />
+      <div style={{ fontSize: "var(--ow-fs-body)", lineHeight: "var(--ow-lh-body)", color: "var(--ow-text)" }}>
+        组件库里已经有 22 件聊天域组件，缺的三件（执行摘要卡、跑动中的工具行、授权卡）这一批补齐。
+      </div>
+      <ExecutionSummary label="补齐三件缺件" steps={9} duration="4m12s" tools={TOOLS} />
+    </div>
+  ),
+}
+
+/**
+ * 收口含失败（R2 · L3-3-1）：一段跑完，里头有一条 bash 失败。
+ * 明细行末出「失败」字＋`--ow-error`（R1 双编码，色只作第二编码），
+ * 头行读数补「3 项中 1 项失败」——失败不再被段头的「已运行 N 项」吞掉。
+ */
+export const CompletedWithFailure: Story = {
+  args: {
+    label: "已运行 3 项命令",
+    steps: 3,
+    duration: "1m12s",
+    defaultOpen: true,
+    tools: [
+      { name: "read_file", args: "packages/ui/package.json", elapsed: "0.3s", out: "读到 82 行" },
+      {
+        name: "run_bash",
+        args: "pnpm build --filter @orbit-work/ui",
+        elapsed: "48s",
+        state: "error",
+        out: "error TS2322: Type 'string' is not assignable to type 'number'.",
+      },
+      { name: "read_file", args: "packages/ui/tsconfig.json", elapsed: "0.2s" },
+    ],
+  },
+}
+
+/* ── R4 · 2026-09-04（Terry：工具调用展开后要看得到输入输出） ─────────────────────
+   明细行自己也能再展一层：给了 input / output / artifacts 任一，行首行就成披露触发器
+   （行尾 12px chevron，与头行 14px 分档，读作「行内还有一层」），展开后按
+   「输入 / 输出 / 产物」三段眉标排。内容由宿主给 <pre>，井的样式在 components.css
+   （`.ow-execution-detail [data-ow-part="well"] > pre`）。原型 1219-1250 的明细行 ＋
+   1271-1284 的 live 行，这一轮合成同一种「步骤」语言。 */
+
+const wellText = { margin: 0 } as const
+
+/**
+ * 三条明细，逐条演示「有多少料出多少形」：
+ * 1. `read_file` 有 input ＋ output ＋ `defaultDetailOpen`——展开就是三段眉标里的两段；
+ * 2. `grep` 只有 `out`（旧口径的一行回显），没有 detail，所以**不出 chevron**、不可点；
+ * 3. `run_bash` 失败：行末「失败」字＋`--ow-error`（R1 双编码），detail 里只有输出。
+ */
+export const RowsWithDetail: Story = {
+  args: {
+    label: "核对组件库现状",
+    steps: 3,
+    duration: "13.6s",
+    defaultOpen: true,
+    tools: [
+      {
+        name: "read_file",
+        args: "packages/ui/package.json",
+        elapsed: "0.3s",
+        defaultDetailOpen: true,
+        input: <pre style={wellText}>{`{ "path": "packages/ui/package.json",\n  "range": [1, 22] }`}</pre>,
+        output: (
+          <pre style={wellText}>{`{
+  "name": "@orbit-work/ui",
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": { "test": "node --test" },
+  "peerDependencies": { "react": ">=18" }
+}`}</pre>
+        ),
+      },
+      {
+        name: "grep",
+        args: '"ExecutionSummary" packages/ui/src',
+        elapsed: "0.9s",
+        out: "4 处命中：AgentTurn/index.tsx:15\nAgentTurn.stories.tsx:54",
+      },
+      {
+        name: "run_bash",
+        args: "pnpm build --filter @orbit-work/ui",
+        elapsed: "12.4s",
+        state: "error",
+        output: (
+          <pre style={wellText}>{`src/components/domain/chat/ExecutionSummary/index.tsx:118:9
+error TS2322: Type 'string' is not assignable to type 'number'.
+  Found 1 error.`}</pre>
+        ),
+      },
+    ],
+  },
+}
+
+/**
+ * 单条工具调用卡（R4）：一次调用也走同一张卡，不另造形。
+ * - `label` 收 ReactNode：动宾词 ＋ text-3 的对象名（「已读取文件 package.json」读成一句，
+ *   而不是把文件名塞进 mono 读数位）；
+ * - `meta` 直接给读数原文「0.3s · 22 行」——不由 steps/duration 拼；
+ * - 展开体用 `children` 兜底面，里头就一个 `ExecutionDetail`（输入 / 输出两段）。
+ *   宿主的 `DesktopToolCallView` 走的也是这一路（`ExecutionSummaryBodyContext`）。
+ */
+export const SingleToolCard: Story = {
+  args: { label: "" },
+  render: () => (
+    <ExecutionSummary
+      label={
+        <>
+          已读取文件 <span style={{ color: "var(--ow-text-3)" }}>package.json</span>
+        </>
+      }
+      meta="0.3s · 22 行"
+      defaultOpen
+    >
+      <ExecutionDetail
+        input={<pre style={wellText}>{`{ "path": "packages/ui/package.json" }`}</pre>}
+        output={
+          <pre style={wellText}>{`{
+  "name": "@orbit-work/ui",
+  "version": "0.0.1",
+  "type": "module",
+  "exports": { ".": "./src/index.ts" },
+  "scripts": { "test": "node --test" }
+}`}</pre>
+        }
+      />
+    </ExecutionSummary>
+  ),
+}

package/src/components/domain/chat/ExecutionSummary/ExecutionSummarySource.test.mjs

@@ -0,0 +1,210 @@
+import assert from "node:assert/strict"
+import { readFile } from "node:fs/promises"
+import test from "node:test"
+
+const source = await readFile(new URL("./index.tsx", import.meta.url), "utf8")
+const stories = await readFile(new URL("./ExecutionSummary.stories.tsx", import.meta.url), "utf8")
+const barrel = await readFile(new URL("../index.ts", import.meta.url), "utf8")
+const css = await readFile(new URL("../../../../../styles/components.css", import.meta.url), "utf8")
+
+// 原型模板 template.dc.html:1219-1250 —— 执行摘要卡逐值
+test("壳＝--ow-surface ＋ 1px --ow-border ＋ --ow-radius-lg ＋ overflow:hidden（贴地零影）", () => {
+  assert.match(source, /border: "1px solid var\(--ow-border\)"/)
+  assert.match(source, /borderRadius: "var\(--ow-radius-lg\)"/)
+  assert.match(source, /background: "var\(--ow-surface\)"/)
+  assert.match(source, /overflow: "hidden"/)
+  // §5 贴地零影：卡面不得带影
+  assert.doesNotMatch(source, /boxShadow|--ow-shadow-/)
+})
+
+test("头行＝padding 10px 12px ＋ gap 10 ＋ hover --ow-hover ＋ 焦点走 .ow-focus-ring", () => {
+  assert.match(source, /padding: "10px 12px"/)
+  assert.match(source, /gap: 10,\n\s+width: "100%"/)
+  assert.match(source, /className="ow-focus-ring hover:bg-\[var\(--ow-hover\)\] active:bg-\[var\(--ow-press\)\]"/)
+})
+
+test("行首递减短迹复用 ArtifactCard 的 ArtifactTrail（同一枚交付签名，不另造）", () => {
+  assert.match(source, /import \{ ArtifactTrail \} from "\.\.\/ArtifactCard"/)
+  assert.match(source, /<ArtifactTrail \/>/)
+})
+
+test("label＝--ow-fs-ui/500 单行省略；meta＝mono 11(--ow-fs-mark-md) tabular-nums --ow-text-2", () => {
+  assert.match(source, /fontSize: "var\(--ow-fs-ui\)",\n\s+fontWeight: 500/)
+  assert.match(source, /textOverflow: "ellipsis"/)
+  assert.match(
+    source,
+    /const metaStyle: CSSProperties = \{[\s\S]*?fontFamily: "var\(--ow-font-mono\)"[\s\S]*?fontSize: "var\(--ow-fs-mark-md\)"[\s\S]*?fontVariantNumeric: "tabular-nums"[\s\S]*?color: "var\(--ow-text-2\)"/,
+  )
+})
+
+// R4 · 2026-09-04（Terry：一种「步骤」只留一种说法）——▸/▾ 两个文字字形换成图标集的
+// ChevRight / ChevDown：转录里所有可展开的东西（思考行 / 摘要卡头行 / 明细行）同一枚记号。
+test("头行 chevron＝图标集 ChevRight/ChevDown，14px --ow-text-3，不再是 ▸/▾ 字形", () => {
+  assert.match(source, /import \{ ChevDown, ChevRight \} from "\.\.\/\.\.\/\.\.\/composite\/Icons"/)
+  assert.match(
+    source,
+    /const chevStyle: CSSProperties = \{[\s\S]*?width: 14,\n\s+height: 14[\s\S]*?color: "var\(--ow-text-3\)"/,
+  )
+  assert.match(source, /data-ow-part="chevron" style=\{chevStyle\}>\n\s+\{expanded \? <ChevDown \/> : <ChevRight \/>\}/)
+  // 去注释后代码里不该再有字形（注释里提「原 ▸/▾」是交代来历，不算实现）
+  const code = source.replace(/\/\*[\s\S]*?\*\//g, "").replace(/^[ \t]*\/\/.*$/gm, "")
+  assert.doesNotMatch(code, /[▸▾]/)
+})
+
+// 明细行的 chevron 与头行分档：12 vs 14，读作「行内还有一层」。
+test("明细行 chevron＝12px，与头行 14px 分档，同样 --ow-text-3", () => {
+  assert.match(
+    source,
+    /const rowChevStyle: CSSProperties = \{[\s\S]*?width: 12,\n\s+height: 12[\s\S]*?color: "var\(--ow-text-3\)"/,
+  )
+  assert.match(source, /data-ow-part="chevron" style=\{rowChevStyle\}>\n\s+\{open \? <ChevDown \/> : <ChevRight \/>\}/)
+})
+
+test("展开体＝border-top 1px --ow-border ＋ 白面体（R5）；每条 padding 9px 12px 9px 30px、内 gap 3", () => {
+  assert.match(source, /borderTop: "1px solid var\(--ow-border\)"/)
+  assert.match(source, /background: "var\(--ow-surface\)"/)
+  assert.match(source, /padding: "9px 12px 9px 30px"/)
+  assert.match(source, /gap: 3,\n\s+padding: "9px 12px 9px 30px"/)
+})
+
+test("明细三段全 mono 11px：name 500/--ow-text · args --ow-text-3 省略 · elapsed tabular --ow-text-3；out pre-wrap", () => {
+  assert.match(
+    source,
+    /const monoBase: CSSProperties = \{\n\s+fontFamily: "var\(--ow-font-mono\)",\n\s+fontSize: "var\(--ow-fs-mark-md\)",/,
+  )
+  assert.match(source, /const nameStyle[\s\S]*?fontWeight: 500, color: "var\(--ow-text\)"/)
+  assert.match(source, /const argsStyle[\s\S]*?textOverflow: "ellipsis"[\s\S]*?color: "var\(--ow-text-3\)"/)
+  assert.match(
+    source,
+    /const elapsedStyle[\s\S]*?fontVariantNumeric: "tabular-nums"[\s\S]*?color: "var\(--ow-text-3\)"/,
+  )
+  assert.match(source, /const outStyle[\s\S]*?whiteSpace: "pre-wrap"/)
+})
+
+test("读数无数据整段不渲染：steps/duration/meta 全缺时 formatExecutionMeta 给 undefined（不伪造数字）", () => {
+  assert.match(source, /const baseReadout = meta \?\? formatExecutionMeta\(steps, duration\)/)
+  assert.match(source, /return parts\.length \? parts\.join\(" · "\) : undefined/)
+  // 拼完仍是空串时归 undefined——读数位整段不渲染
+  assert.match(source, /\.filter\(Boolean\)\.join\(" · "\) \|\| undefined/)
+  assert.match(source, /\{readout && \(/)
+})
+
+// R2 · L3-3-1：收口段吞失败的破口——明细行透传 state/statusText，行末出「失败」字＋--ow-error，
+// 段头读数补「N 项中 M 项失败」（R1 双编码：字先说，色只作第二编码）。
+test("收口含失败：明细行出「失败」字，段头读数补失败计数", () => {
+  assert.match(source, /state\?: "done" \| "error"/)
+  assert.match(source, /const failedCount = list\.filter\(\(tool\) => tool\.state === "error"\)\.length/)
+  assert.match(source, /export function formatExecutionFailure\(total: number, failed: number\): string \{/)
+  assert.match(source, /\$\{total\} 项中 \$\{failed\} 项失败/)
+  assert.match(source, /tool\.statusText \?\? \(tool\.state === "error" \? "失败" : undefined\)/)
+  assert.match(source, /color: "var\(--ow-error\)"/)
+})
+
+test("无明细不做死钮：collapsible=false 时头行落静态 div，不出 chevron", () => {
+  assert.match(source, /const collapsible = list\.length > 0 \|\| hasCustomBody/)
+  assert.match(source, /\{collapsible \? \(\n\s+<button/)
+  assert.match(source, /cursor: "default"/)
+  assert.doesNotMatch(source, /disabled=\{!collapsible\}/)
+})
+
+test("§4 R3：卡本体不含荧黄——状态极归段内正在跑的 ToolCallRow", () => {
+  assert.doesNotMatch(source, /var\(--ow-beacon|var\(--ow-accent-dot|var\(--ow-primary/)
+})
+
+test("受控/非受控展开都通，展开体带 id 与 aria-controls", () => {
+  assert.match(source, /const isControlled = open !== undefined/)
+  assert.match(source, /aria-expanded=\{expanded\}/)
+  assert.match(source, /aria-controls=\{expanded \? bodyId : undefined\}/)
+  // A9-B3：展开体多了一档「兜底面」（宿主还在传元素 children 时走 customBodyStyle）
+  assert.match(source, /<div id=\{bodyId\} data-ow-part="body" style=\{hasCustomBody \? customBodyStyle : bodyStyle\}>/)
+})
+
+test("story 覆盖：收起 / 展开 / 无读数 / 无明细 / 溢出 / 段内 / R4 明细两张", () => {
+  for (const s of [
+    "Default",
+    "Expanded",
+    "NoReadout",
+    "NoTools",
+    "Overflow",
+    "InSegment",
+    "RowsWithDetail",
+    "SingleToolCard",
+  ]) {
+    assert.match(stories, new RegExp(`export const ${s}: Story`))
+  }
+})
+
+test("已进 chat 桶导出", () => {
+  assert.match(barrel, /export \* from "\.\/ExecutionSummary"/)
+})
+
+// ── A9-B3：兜底展开体（宿主还在把工具块当元素传时的兼容口径） ──────────────────
+test("children 兜底体：同一张 白面体（R5），gap 6（原型 live 行列的行距）＋ padding 9px 12px", () => {
+  assert.match(source, /const hasCustomBody = list\.length === 0 && children != null/)
+  assert.match(
+    source,
+    /const customBodyStyle: CSSProperties = \{\n\s+\.\.\.bodyStyle,\n\s+gap: 6,\n\s+padding: "9px 12px",/,
+  )
+  // tools 一给就以 mono 明细为准，children 让位（两套体不叠着出）
+  assert.match(
+    source,
+    /\{hasCustomBody && \(?\s*<ExecutionSummaryBodyContext\.Provider value>\{children\}<\/ExecutionSummaryBodyContext\.Provider>/,
+  )
+})
+
+// ── R4 · 2026-09-04（Terry：工具调用展开后要看得到输入输出） ────────────────────
+
+test("明细行抽成 ExecutionSummaryRow：有 input/output/artifacts 任一才成披露钮，否则静态行", () => {
+  assert.match(source, /export function ExecutionSummaryRow\(\{/)
+  assert.match(source, /input\?: ReactNode\n\s+output\?: ReactNode\n\s+artifacts\?: ReactNode/)
+  assert.match(source, /const hasDetail = tool\.input != null \|\| tool\.output != null \|\| tool\.artifacts != null/)
+  assert.match(source, /\{hasDetail \? \(\n\s+<button/)
+  assert.match(source, /aria-expanded=\{open\}/)
+  assert.match(source, /aria-controls=\{open \? detailId : undefined\}/)
+  // 明细的受控 / 非受控两路
+  assert.match(source, /const open = tool\.detailOpen \?\? uncontrolledOpen/)
+  assert.match(source, /if \(tool\.detailOpen === undefined\) setUncontrolledOpen\(next\)/)
+  assert.match(source, /defaultDetailOpen\?: boolean/)
+  // data-slot / data-ow-state 出到 DOM，供回归定位
+  assert.match(source, /data-slot="execution-summary-row"/)
+  assert.match(
+    source,
+    /data-ow-state=\{\[tool\.state \?\? "done", open \? "expanded" : null\]\.filter\(Boolean\)\.join\(" "\)\}/,
+  )
+  // 卡体不再自己 map 出行：统一由 ExecutionSummaryRow 渲
+  assert.match(source, /<ExecutionSummaryRow key=\{`\$\{tool\.name\}-\$\{i\}`\} tool=\{tool\} \/>/)
+})
+
+test("ExecutionDetail＝「输入 / 输出 / 产物」三段眉标，眉标走 §8 中文眉标档，井样式在 components.css", () => {
+  assert.match(source, /export function ExecutionDetail\(/)
+  assert.match(source, /data-slot="execution-detail"/)
+  for (const word of ["输入", "输出", "产物"]) {
+    assert.ok(source.includes(word), `ExecutionDetail 缺「${word}」段`)
+  }
+  assert.match(
+    source,
+    /const eyebrowStyle: CSSProperties = \{[\s\S]*?font: "500 var\(--ow-fs-eyebrow-cjk, 12px\)\/1 var\(--ow-font-sans\)"[\s\S]*?letterSpacing: "var\(--ow-ls-eyebrow-cjk, 0\.08em\)"[\s\S]*?color: "var\(--ow-eyebrow\)"/,
+  )
+  assert.match(source, /<div data-ow-part="well">/)
+  // 井（--ow-surface ＋ 1px --ow-border ＋ radius-sm ＋ 220 内滚）由 components.css 出，件里不重写一份
+  assert.match(css, /\.ow-execution-detail \[data-ow-part="well"\] > pre/)
+  assert.match(css, /max-height: 220px/)
+  assert.match(css, /background: var\(--ow-surface\)/)
+  assert.match(css, /border-radius: var\(--ow-radius-sm\)/)
+})
+
+test("兜底体给子孙一个上下文：DesktopToolCallView 据此渲成行而不是又一张卡（卡套卡退役）", () => {
+  assert.match(source, /export const ExecutionSummaryBodyContext = createContext\(false\)/)
+  assert.match(source, /export function useInExecutionSummaryBody\(\): boolean \{/)
+  assert.match(source, /return useContext\(ExecutionSummaryBodyContext\)/)
+})
+
+test("单工具卡口径：label 收 ReactNode，头行读数后可再挂 statusText（tone=error 着 --ow-error）", () => {
+  assert.match(source, /label: ReactNode/)
+  assert.match(source, /statusText\?: string\n\s+tone\?: "neutral" \| "error"/)
+  assert.match(
+    source,
+    /const readout = \[baseReadout, failureReadout, statusText\]\.filter\(Boolean\)\.join\(" · "\) \|\| undefined/,
+  )
+  assert.match(source, /tone === "error" \? \{ color: "var\(--ow-error\)" \} : undefined/)
+})