@orbit-work/ui 0.1.0

package/src/components/domain/desktop/DesktopToolCallView/DesktopToolCallView.stories.tsx

@@ -0,0 +1,409 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Doc, Edit, Globe, Terminal } from "../../../composite/Icons"
+import { DesktopToolCallListView, DesktopToolCallView } from "./index"
+
+/**
+ * R4 · 2026-09-04 裁决：转录里「一步」只留原型那一套语言。
+ *
+ * 本件不再自持 `.chat-tool` 卡（min(560px,86%) ＋ 前导图标 ＋ hover 才显影的 chevron），
+ * 三种形按状态与所处位置分派：
+ * - 还在跑 → `ToolCallRow`（原型 template.dc.html:1271-1284 的 live 行）
+ * - 收口独立成段 → `ExecutionSummary` 满栏执行摘要卡（原型 template.dc.html:1219-1250）
+ * - 收口且坐在某张摘要卡的展开体里 → `ExecutionSummaryRow` 明细行（无壳无边，框套框退役）
+ */
+const meta = {
+  title: "Desktop/DesktopToolCallView",
+  component: DesktopToolCallView,
+  decorators: [
+    (Story) => (
+      <div style={{ padding: 20, background: "var(--ow-bg)", maxWidth: 800 }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof DesktopToolCallView>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** 还在跑：一条 live 行（原型 1271-1284）。行首那颗点＝`--ow-beacon`＝全屏唯一的状态极。 */
+export const Running: Story = {
+  args: {
+    icon: <Terminal />,
+    label: "执行命令",
+    status: "running",
+    preview: "npm install",
+  },
+}
+
+/** 收口无明细：满栏摘要卡的静态头行（无可展开面就不做按不动的死钮，§6）。 */
+export const Completed: Story = {
+  args: {
+    icon: <Terminal />,
+    label: "执行命令",
+    status: "completed",
+    preview: "npm test",
+  },
+}
+
+/** 失败：读数位尾随「失败」＋`--ow-error`（R1 双编码：字先说，色只作第二编码）。 */
+export const Error: Story = {
+  args: {
+    icon: <Terminal />,
+    label: "执行命令",
+    status: "error",
+    preview: "npm build",
+  },
+}
+
+/** 有明细：体＝`ExecutionDetail` 的「输入 / 输出」眉标 ＋ 井（`--ow-surface` 回纸面），右下「放大查看」。 */
+export const WithInputOutput: Story = {
+  args: {
+    icon: <Doc />,
+    label: "读取文件",
+    status: "completed",
+    preview: "package.json",
+    defaultOpen: true,
+    input: <pre>path: package.json</pre>,
+    output: <pre>{JSON.stringify({ name: "my-app", version: "1.0.0" }, null, 2)}</pre>,
+  },
+}
+
+/** 产物段：`ExecutionDetail` 的第三段眉标，卡走共用的 `.artifact` 骨架（递减短迹 ＋ 缩略图 ＋ cap 条）。 */
+export const WithArtifacts: Story = {
+  args: {
+    icon: <Globe />,
+    label: "浏览网页",
+    status: "completed",
+    preview: "https://example.com",
+    defaultOpen: true,
+    artifacts: [
+      {
+        id: "1",
+        type: "image",
+        url: "https://picsum.photos/seed/artifact1/400/300",
+        ref: "screenshot.png",
+        name: "页面截图",
+        mimeType: "image/png",
+      },
+    ],
+  },
+}
+
+/** R4：`presentation` 成空转属性——inline 与 card 收口后是同一张满栏卡（对照上面的 Completed）。 */
+export const InlinePresentation: Story = {
+  args: {
+    icon: <Edit />,
+    label: "写入文件",
+    status: "completed",
+    preview: "src/App.tsx",
+    presentation: "inline",
+  },
+}
+
+/** `inlineStatusMode="command-progress"`：运行中的进度语义收进行尾状态词「运行中」（原 ActionStatus 呼吸退役）。 */
+export const InlineRunning: Story = {
+  args: {
+    icon: <Terminal />,
+    label: "运行测试",
+    status: "running",
+    presentation: "inline",
+    inlineStatusMode: "command-progress",
+  },
+}
+
+/** inline 档的失败：与 card 档逐值同形（同一张卡、同一处「失败」字）。 */
+export const InlineError: Story = {
+  args: {
+    icon: <Terminal />,
+    label: "执行命令",
+    status: "error",
+    preview: "build failed",
+    presentation: "inline",
+  },
+}
+
+export const CommandKind: Story = {
+  args: {
+    icon: <Terminal />,
+    label: "执行命令",
+    status: "completed",
+    preview: "npm test",
+    kind: "command",
+  },
+}
+
+export const BrowserKind: Story = {
+  args: {
+    icon: <Globe />,
+    label: "浏览网页",
+    status: "completed",
+    preview: "https://docs.example.com",
+    kind: "browser",
+  },
+}
+
+export const ReadFileKind: Story = {
+  args: {
+    icon: <Doc />,
+    label: "读取文件",
+    status: "completed",
+    preview: "README.md",
+    kind: "read-file",
+  },
+}
+
+export const WriteFileKind: Story = {
+  args: {
+    icon: <Edit />,
+    label: "写入文件",
+    status: "completed",
+    preview: "config.json",
+    kind: "write-file",
+  },
+}
+
+/**
+ * 兼容口径（宿主 apps/desktop ChatCard.tsx 的接线）：工具块当元素传进段里。
+ * R4 之后体里落的是**明细行**而不是三张卡——`ExecutionSummary` 的兜底体挂了
+ * `ExecutionSummaryBodyContext`，`DesktopToolCallView` 据此改渲 `ExecutionSummaryRow`。
+ */
+export const ToolCallList: StoryObj<typeof DesktopToolCallListView> = {
+  render: () => (
+    <DesktopToolCallListView running={false} label="执行命令等 3 项操作" kind="command" defaultOpen={true}>
+      <DesktopToolCallView
+        icon={<Terminal />}
+        label="执行命令"
+        status="completed"
+        preview="npm install"
+        presentation="inline"
+        durationMs={8100}
+      />
+      <DesktopToolCallView
+        icon={<Terminal />}
+        label="执行命令"
+        status="completed"
+        preview="npm test"
+        presentation="inline"
+        durationMs={3900}
+      />
+      <DesktopToolCallView
+        icon={<Terminal />}
+        label="执行命令"
+        status="completed"
+        preview="npm build"
+        presentation="inline"
+        durationMs={420}
+      />
+    </DesktopToolCallListView>
+  ),
+}
+
+/** 兼容口径 · 段还在跑：体里已收口的那条是明细行，还在跑的那条是 live 行（点＝状态极）。 */
+export const ToolCallListRunning: StoryObj<typeof DesktopToolCallListView> = {
+  render: () => (
+    <DesktopToolCallListView running={true} label="正在浏览网页" kind="browser" defaultOpen={true}>
+      <DesktopToolCallView
+        icon={<Globe />}
+        label="浏览网页"
+        status="completed"
+        preview="https://docs.example.com"
+        presentation="inline"
+        durationMs={1200}
+      />
+      <DesktopToolCallView
+        icon={<Globe />}
+        label="浏览网页"
+        status="running"
+        preview="https://api.example.com"
+        presentation="inline"
+      />
+    </DesktopToolCallListView>
+  ),
+}
+
+/**
+ * R4 取证 · 段里是行不是卡：三条 `DesktopToolCallView` 落进 `DesktopToolCallListView` 的展开体，
+ * 出来的是 `ExecutionSummaryRow`——只有最外那一张卡有边，行本身无壳、无 560px 宽限。
+ * 第一条带输入/输出明细并默认展开（行尾 12px chevron），第三条是失败档（行末「失败」＋`--ow-error`）。
+ */
+export const InsideExecutionSummary: StoryObj<typeof DesktopToolCallListView> = {
+  render: () => (
+    <DesktopToolCallListView label="执行命令等 3 项操作" kind="command" meta="3 步 · 12.4s" defaultOpen>
+      <DesktopToolCallView
+        icon={<Terminal />}
+        label="执行命令"
+        status="completed"
+        preview="pnpm install"
+        kind="command"
+        durationMs={8100}
+        defaultOpen
+        input={<pre>pnpm install --frozen-lockfile</pre>}
+        output={<pre>{"+ 12 packages\nProgress: resolved 812, reused 810, done"}</pre>}
+      />
+      <DesktopToolCallView
+        icon={<Terminal />}
+        label="执行命令"
+        status="completed"
+        preview="pnpm test --filter ui"
+        kind="command"
+        durationMs={3900}
+        lineCount={132}
+      />
+      <DesktopToolCallView
+        icon={<Terminal />}
+        label="执行命令"
+        status="error"
+        preview="pnpm build"
+        kind="command"
+        durationMs={420}
+        output={<pre>{"error TS2304: Cannot find name 'ChatThinking'."}</pre>}
+      />
+    </DesktopToolCallListView>
+  ),
+}
+
+/** 独立成段 ＋ 明细默认展开：满栏摘要卡（无 560px 上限），右下「放大查看」通往 ToolDetailModalView。 */
+export const StandaloneWithDetailOpen: Story = {
+  args: {
+    icon: <Terminal />,
+    label: "执行命令",
+    kind: "command",
+    status: "completed",
+    preview: "pnpm --filter @orbit-work/ui test",
+    durationMs: 12400,
+    lineCount: 268,
+    defaultOpen: true,
+    input: <pre>pnpm --filter @orbit-work/ui test</pre>,
+    output: <pre>{"tests 268\npass 268\nfail 0"}</pre>,
+  },
+}
+
+// ── A9-B3：一段执行的壳由 ChatThinking 换成 ExecutionSummary ────────────────────
+// 上面几条是**兼容口径**：宿主仍把工具块当元素传，元素落进 ExecutionSummary 的兜底展开体。
+// 下面三条是**数据口径**：给 `tools` 数据，行由本件出——收口后走 mono 明细，live 段排 ToolCallRow。
+
+/** 数据口径 · 收口后：ExecutionSummary 自己的 mono 明细行（name / args / elapsed ＋ pre-wrap 输出） */
+export const ToolCallListWithTools: StoryObj<typeof DesktopToolCallListView> = {
+  render: () => (
+    <DesktopToolCallListView
+      label="执行命令等 3 项操作"
+      kind="command"
+      meta="3 步 · 12.4s"
+      defaultOpen
+      tools={[
+        { name: "bash", args: "pnpm install", elapsed: "8.1s", out: "+ 12 packages · done" },
+        { name: "bash", args: "pnpm test --filter ui", elapsed: "3.9s", out: "132 pass · 0 fail" },
+        { name: "bash", args: "pnpm build", elapsed: "0.4s" },
+      ]}
+    />
+  ),
+}
+
+/**
+ * 数据口径 · live 段：体里排 ToolCallRow（gap 6），正在跑那条的点＝`--ow-beacon`＝全屏唯一状态极。
+ * 同段的思考行必须同时 `<Thinking variant="inline" toolRunning>` 让极（原型 logic:3850）。
+ */
+export const ToolCallListLive: StoryObj<typeof DesktopToolCallListView> = {
+  render: () => (
+    <DesktopToolCallListView
+      running
+      label="浏览网页等 3 项操作"
+      kind="browser"
+      tools={[
+        { name: "browse", args: "https://docs.example.com", state: "done", elapsed: "1.2s" },
+        { name: "browse", args: "https://api.example.com", state: "running" },
+        { name: "write_file", args: "~/Documents/orbit/notes.md", state: "pending" },
+      ]}
+    />
+  ),
+}
+
+/** 失败档：ToolCallRow 的第四态（点 --ow-error ＋ 尾字「失败」，R1 双编码） */
+export const ToolCallListWithError: StoryObj<typeof DesktopToolCallListView> = {
+  render: () => (
+    <DesktopToolCallListView
+      running
+      label="执行命令等 2 项操作"
+      kind="command"
+      tools={[
+        { name: "bash", args: "pnpm typecheck", state: "error" },
+        { name: "bash", args: "pnpm test", state: "running" },
+      ]}
+    />
+  ),
+}
+
+// ── DS2 P5-5：头行读数（耗时/行数）mono + tabular-nums ─────────────────────────
+export const WithDuration: Story = {
+  args: {
+    icon: <Terminal />,
+    label: "执行命令",
+    status: "completed",
+    kind: "command",
+    preview: "pnpm test",
+    durationMs: 2480,
+  },
+}
+
+export const WithDurationAndLines: Story = {
+  args: {
+    icon: <Doc />,
+    label: "读取文件",
+    status: "completed",
+    kind: "read-file",
+    preview: "packages/ui/src/index.ts",
+    durationMs: 86,
+    lineCount: 1284,
+  },
+}
+
+/** ≥10000 缩写（§7）。R4：读数落进 ExecutionSummary 的 meta 位，旧卡上的全值 title 一并退役。 */
+export const WithAbbreviatedLineCount: Story = {
+  args: {
+    icon: <Doc />,
+    label: "读取文件",
+    status: "completed",
+    kind: "read-file",
+    preview: "logs/app.log",
+    durationMs: 12400,
+    lineCount: 128400,
+  },
+}
+
+/** 运行态不出读数：这一步还没跑完，耗时/行数都还不是事实（§7 不补零不伪造）。 */
+export const RunningHidesMetrics: Story = {
+  args: {
+    icon: <Terminal />,
+    label: "执行命令",
+    status: "running",
+    kind: "command",
+    preview: "pnpm build",
+    durationMs: 2480,
+    lineCount: 42,
+  },
+}
+
+/** 失败 ＋ 读数：读作「940ms · 失败」，色只标失败那一处。 */
+export const ErrorWithMetrics: Story = {
+  args: {
+    icon: <Terminal />,
+    label: "执行命令",
+    status: "error",
+    kind: "command",
+    preview: "pnpm build",
+    durationMs: 940,
+  },
+}
+
+/** 无明细的卡：头行静态、无 chevron、不出 hover 手势（§6 交互态只属真可交互件）。 */
+export const CardWithoutDetails: Story = {
+  args: {
+    icon: <Globe />,
+    label: "打开网页",
+    status: "completed",
+    kind: "browser",
+    preview: "https://orbitwork.example.com",
+    durationMs: 310,
+  },
+}