@orbit-work/ui 0.1.2-preview.0 → 0.1.3

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

@@ -1,105 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { Thinking } from "../Thinking"
-import { ToolCallRow } from "./index"
-
-const meta = {
-  title: "Chat/ToolCallRow",
-  component: ToolCallRow,
-  parameters: {
-    layout: "padded",
-  },
-  tags: ["autodocs"],
-  decorators: [
-    (Story) => (
-      <div style={{ maxWidth: 752 }}>
-        <Story />
-      </div>
-    ),
-  ],
-} satisfies Meta<typeof ToolCallRow>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-/** 运行中：行首 6px --ow-beacon 点＝状态极（每屏限一处），右端 mono「运行中」承义（R1 双编码） */
-export const Running: Story = {
-  args: {
-    name: "grep",
-    args: '"ExecutionSummary" packages/ui/src',
-  },
-}
-
-/** 已完成：点落 --ow-success，右端换成 mono 耗时 */
-export const Done: Story = {
-  args: {
-    name: "read_file",
-    args: "packages/ui/src/components/domain/chat/index.ts",
-    state: "done",
-    elapsed: "0.3s",
-  },
-}
-
-/** 等待授权：点走中性 --ow-pending（不占荧黄），文字「等待授权」 */
-export const Pending: Story = {
-  args: {
-    name: "write_file",
-    args: "~/Documents/orbit/report.md",
-    state: "pending",
-  },
-}
-
-/** 无耗时数据：done 的读数位留空（ToolBlock 尚无耗时字段），不补零 */
-export const DoneWithoutElapsed: Story = {
-  args: {
-    name: "list_dir",
-    args: "packages/ui/src/components/domain/chat",
-    state: "done",
-  },
-}
-
-/** 一次运行的多条工具行：坐在 gap 6 的列里（原型模板 1272），荧黄只在最后那条正在跑的 */
-export const RunningList: Story = {
-  args: { name: "" },
-  render: () => (
-    <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
-      <ToolCallRow
-        name="read_file"
-        args="packages/ui/src/components/domain/chat/index.ts"
-        state="done"
-        elapsed="0.3s"
-      />
-      <ToolCallRow name="grep" args='"ExecutionSummary" packages/ui/src' state="done" elapsed="0.9s" />
-      <ToolCallRow name="run_tests" args="pnpm test --filter chat" />
-    </div>
-  ),
-}
-
-/** 状态极记账：有工具在跑时，同段思考行的卫星退成无彩 --ow-text-2（原型 logic:3850） */
-export const PoleHandoff: Story = {
-  args: { name: "" },
-  render: () => (
-    <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
-      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
-        <div style={{ fontSize: "var(--ow-fs-caption)", color: "var(--ow-text-3)" }}>无工具在跑：极归思考行卫星</div>
-        <Thinking variant="inline" label="正在核对 14 份来源，比对引用页码" />
-      </div>
-      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
-        <div style={{ fontSize: "var(--ow-fs-caption)", color: "var(--ow-text-3)" }}>有工具在跑：极归工具行圆点</div>
-        <Thinking variant="inline" toolRunning label="正在核对 14 份来源，比对引用页码" />
-        <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
-          <ToolCallRow name="read_file" args="packages/ui/styles/tokens.css" state="done" elapsed="0.3s" />
-          <ToolCallRow name="grep" args='"--ow-beacon" packages/ui' />
-        </div>
-      </div>
-    </div>
-  ),
-}
-
-/** 失败态（R2 · L3-3-1 补齐：四态里 error 原来是唯一件级零 story 的一档）。 */
-export const Error: Story = {
-  args: {
-    name: "run_bash",
-    args: "pnpm build --filter @orbit-work/ui",
-    state: "error",
-  },
-}

package/src/components/domain/chat/ToolCallRow/ToolCallRowSource.test.mjs

@@ -1,83 +0,0 @@
-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("./ToolCallRow.stories.tsx", import.meta.url), "utf8")
-const thinking = await readFile(new URL("../Thinking/index.tsx", import.meta.url), "utf8")
-const barrel = await readFile(new URL("../index.ts", import.meta.url), "utf8")
-
-// 原型模板 template.dc.html:1271-1284 —— 跑动中的单条工具行
-test("行＝1px --ow-border ＋ --ow-radius-sm(8) ＋ --ow-surface ＋ padding 7px 12px（贴地零影）", () => {
-  assert.match(source, /border: "1px solid var\(--ow-border\)"/)
-  assert.match(source, /borderRadius: "var\(--ow-radius-sm\)"/)
-  assert.match(source, /background: "var\(--ow-surface\)"/)
-  assert.match(source, /padding: "7px 12px"/)
-  assert.doesNotMatch(source, /boxShadow|--ow-shadow-/)
-})
-
-test("baseline 对齐 gap 8；行首 6px 圆点 align-self:center、走 --ow-radius-pill", () => {
-  assert.match(source, /alignItems: "baseline",\n\s+gap: 8/)
-  assert.match(
-    source,
-    /const dotStyle: CSSProperties = \{[\s\S]*?alignSelf: "center"[\s\S]*?width: 6,\n\s+height: 6,\n\s+borderRadius: "var\(--ow-radius-pill\)"/,
-  )
-})
-
-test("四态点色：done=--ow-success · pending=--ow-pending（中性）· running=--ow-beacon（状态极）· error=--ow-error", () => {
-  assert.match(source, /done: "var\(--ow-success\)"/)
-  assert.match(source, /pending: "var\(--ow-pending\)"/)
-  assert.match(source, /running: "var\(--ow-beacon\)"/)
-  // A9-B3 补的第四档：桌面端一直有 error 轮，没有它就只能挂 done 的成功绿
-  assert.match(source, /error: "var\(--ow-error\)"/)
-  assert.match(source, /error: "失败"/)
-  assert.match(source, /ToolCallRowState = "running" \| "pending" \| "done" \| "error"/)
-})
-
-test("R1 双编码：色之外必有文字——running=运行中 / pending=等待授权 / done=耗时或「完成」", () => {
-  assert.match(source, /pending: "等待授权"/)
-  assert.match(source, /running: "运行中"/)
-  assert.match(
-    source,
-    /statusText \?\? \(state === "done" \? \(elapsed \?\? DEFAULT_STATUS\.done\) : DEFAULT_STATUS\[state\]\)/,
-  )
-  // R2 · L3-1-4：done 无耗时读数时不能只剩一颗 aria-hidden 的绿点——缺省补「完成」，有读数仍优先读数
-  assert.match(source, /done: "完成"/)
-  assert.doesNotMatch(source, /done: undefined/)
-  // A9-B3：error 档的尾字同步改 --ow-error（色仍是第二编码，文字先说「失败」）
-  assert.match(source, /\{status && <span style=\{\{ \.\.\.statusStyle, color: statusColor \}\}>\{status\}<\/span>\}/)
-})
-
-test("name/args/status 三段全 mono 11px(--ow-fs-mark-md)：名 500/--ow-text · 参数 --ow-text-3 省略 · 状态 tabular --ow-text-2", () => {
-  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 statusStyle[\s\S]*?fontVariantNumeric: "tabular-nums"[\s\S]*?color: "var\(--ow-text-2\)"/)
-})
-
-test("状态由 data-ow-state 出到 DOM（形/位之外再给一层可测编码）", () => {
-  assert.match(source, /data-slot="tool-call-row" data-ow-state=\{state\}/)
-})
-
-test("§4 状态极记账对得上：Thinking inline 有 toolRunning 让极口（原型 logic:3850）", () => {
-  assert.match(thinking, /toolRunning\?: boolean/)
-  // R4 · 2026-09-04：inline 改走锁定件 BeaconSpinner（整画布，不再自搓裁切 svg），
-  // 让极口挪到传给它的 satellite 上；静止归 trail 由 BeaconSpinner 自己做。
-  assert.match(thinking, /const satellite = toolRunning \? "var\(--ow-text-2\)" : "var\(--ow-beacon\)"/)
-  assert.match(thinking, /satellite=\{satellite\}/)
-})
-
-test("story 覆盖三态 ＋ 多行列 ＋ 让极对照", () => {
-  for (const s of ["Running", "Done", "Pending", "DoneWithoutElapsed", "RunningList", "PoleHandoff"]) {
-    assert.match(stories, new RegExp(`export const ${s}: Story`))
-  }
-  // 多行相邻＝gap 6 的列（原型 1272），列由调用方给
-  assert.match(stories, /flexDirection: "column", gap: 6/)
-})
-
-test("已进 chat 桶导出", () => {
-  assert.match(barrel, /export \* from "\.\/ToolCallRow"/)
-})

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

@@ -1,113 +0,0 @@
-import type { CSSProperties } from "react"
-
-/**
- * 一次工具调用的四态：running=正在跑（占状态极）· pending=等授权 · done=已完成 · error=失败。
- * 原型只画到三态（template.dc.html:3853 的 dot 记账），error 是 A9-B3 归口时补的第四档——
- * 桌面端 `DesktopToolCallView` 一直有 error 轮（`.chat-tool--error` 的「失败」尾字），
- * 换成本件后若无 error 档就只能挂 done 的成功绿，与事实相反。
- */
-export type ToolCallRowState = "running" | "pending" | "done" | "error"
-
-export type ToolCallRowProps = {
-  /** 工具名，mono 11px/500 --ow-text */
-  name: string
-  /** 参数摘要，mono 11px --ow-text-3，单行省略 */
-  args?: string
-  /** 默认 running */
-  state?: ToolCallRowState
-  /** done 时的耗时读数，如 "0.9s"；无数据则读数位留空（不伪造数字） */
-  elapsed?: string
-  /** 覆盖右端状态文案；缺省 running=「运行中」· pending=「等待授权」· done=elapsed */
-  statusText?: string
-  className?: string
-}
-
-/** 四态点色：done=--ow-success · pending=--ow-pending（中性灰）· running=--ow-beacon（状态极）· error=--ow-error */
-const DOT_COLOR: Record<ToolCallRowState, string> = {
-  done: "var(--ow-success)",
-  pending: "var(--ow-pending)",
-  running: "var(--ow-beacon)",
-  error: "var(--ow-error)",
-}
-
-/* R2 · L3-1-4：done 原来缺省 undefined——`state="done"` 且没有 elapsed / statusText 时
-   状态段整条不渲染，行里只剩一颗 aria-hidden 的绿点，色成了唯一编码（违 R1 双编码）。
-   缺省补「完成」；有耗时读数时仍优先显示读数。 */
-const DEFAULT_STATUS: Record<ToolCallRowState, string | undefined> = {
-  done: "完成",
-  pending: "等待授权",
-  running: "运行中",
-  error: "失败",
-}
-
-/**
- * ToolCallRow 跑动中的单条工具行（照原型模板 template.dc.html:1271-1284 逐值）。
- *
- * 转录里「正在跑的这一处」——满宽 1px `--ow-border` ＋ `--ow-radius-sm`(8) ＋ `--ow-surface`
- * 的贴地 pill，padding `7px 12px`，`align-items:baseline` gap 8；行首 6px 圆点（`align-self:center`）。
- * 名 / 参数 / 状态三段全 mono `--ow-fs-mark-md`(11)。
- *
- * §4 状态极记账：running 那颗点＝`--ow-beacon`，每屏限一处——同段的思考行卫星必须同时
- * 退成 `--ow-text-2`（原型 logic:3850；用 `<Thinking variant="inline" toolRunning>`）。
- * R1 双编码：色之外必有文字（运行中 / 等待授权 / 耗时），且形也分档（实心点位置固定在行首）。
- * 多行相邻时坐在 gap 6 的列里（原型 1272），列由调用方给。
- */
-export function ToolCallRow({ name, args, state = "running", elapsed, statusText, className = "" }: ToolCallRowProps) {
-  const status = statusText ?? (state === "done" ? (elapsed ?? DEFAULT_STATUS.done) : DEFAULT_STATUS[state])
-  // R1 双编码：error 的点色之外，尾字同时改 --ow-error（色永远是第二编码）
-  const statusColor = state === "error" ? "var(--ow-error)" : statusStyle.color
-  return (
-    <div className={`ow-tool-call-row ${className}`} data-slot="tool-call-row" data-ow-state={state} style={rowStyle}>
-      <span aria-hidden="true" style={{ ...dotStyle, background: DOT_COLOR[state] }} />
-      <span style={nameStyle}>{name}</span>
-      <span style={argsStyle}>{args}</span>
-      {status && <span style={{ ...statusStyle, color: statusColor }}>{status}</span>}
-    </div>
-  )
-}
-
-const rowStyle: CSSProperties = {
-  display: "flex",
-  alignItems: "baseline",
-  gap: 8,
-  /* 同 ExecutionSummary：nowrap 参数会把 min-content 撑得极大，flex 列的自动最小
-     尺寸会把它顶出 chat 内容区；maxWidth 兜住后 args 走单行省略。 */
-  maxWidth: "100%",
-  padding: "7px 12px",
-  border: "1px solid var(--ow-border)",
-  borderRadius: "var(--ow-radius-sm)",
-  background: "var(--ow-surface)",
-  fontFamily: "var(--ow-font-body)",
-}
-
-const dotStyle: CSSProperties = {
-  flex: "0 0 auto",
-  alignSelf: "center",
-  width: 6,
-  height: 6,
-  borderRadius: "var(--ow-radius-pill)",
-}
-
-const monoBase: CSSProperties = {
-  fontFamily: "var(--ow-font-mono)",
-  fontSize: "var(--ow-fs-mark-md)",
-}
-
-const nameStyle: CSSProperties = { ...monoBase, flex: "0 0 auto", fontWeight: 500, color: "var(--ow-text)" }
-
-const argsStyle: CSSProperties = {
-  ...monoBase,
-  flex: "1 1 auto",
-  minWidth: 0,
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap",
-  color: "var(--ow-text-3)",
-}
-
-const statusStyle: CSSProperties = {
-  ...monoBase,
-  flex: "0 0 auto",
-  fontVariantNumeric: "tabular-nums",
-  color: "var(--ow-text-2)",
-}

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

@@ -1,296 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { useState } from "react"
-import { Button } from "../../../primitives/Button"
-import { EmptyState } from "../../../primitives/EmptyState"
-import { DesktopShareSelectionBarView } from "../../desktop/DesktopShareSelectionBarView"
-import { AgentTurn } from "../AgentTurn"
-import { ArtifactCard } from "../ArtifactCard"
-import { MessageActions } from "../MessageActions"
-import { SubAgentThread } from "../SubAgentThread"
-import { Thinking } from "../Thinking"
-import { UserTurn } from "../UserTurn"
-import { Transcript } from "./index"
-
-const meta = {
-  title: "Chat/Transcript",
-  component: Transcript,
-  parameters: { layout: "padded" },
-  tags: ["autodocs"],
-} satisfies Meta<typeof Transcript>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-/**
- * 完整脊柱式会话：左侧 1.5px --ow-timeline 贯穿线，用户轮空心环（环心填壳的地色、
- * 把线断开）、agent 轮实心点＋署名行，执行记号与子 agent 挂 execution 槽，
- * 操作行 hover 浮现。这是 P5 验收 C4 的闭环视图。
- */
-export const SpineConversation: Story = {
-  args: { surface: "surface", maxWidth: 620 },
-  render: (args) => (
-    <div style={{ border: "1px solid var(--ow-border)", borderRadius: "var(--ow-radius-lg)" }}>
-      <Transcript {...args}>
-        <UserTurn
-          text="帮我核对 Q3 渠道复盘引用的 14 份来源，重点看数据有没有过期。"
-          actions={<MessageActions actions={["copy"]} time="14:12" />}
-        />
-        <AgentTurn
-          name="Orbitwork"
-          meta="6 步 · 2m40s"
-          execution={<ArtifactCard title="来源核对清单" meta="sources_q3.csv · 14 行 · 08-28 14:15" />}
-          actions={<MessageActions actions={["copy", "regenerate", "like", "dislike", "share"]} time="14:15" />}
-        >
-          14 份来源里有 3 份的数据停在 2025 年 12 月，其中第 9 份的行业均值口径和其余 13 份不一致。
-        </AgentTurn>
-        <UserTurn
-          text="第 9 份的行业均值口径不对，换成中位数再跑一遍。"
-          actions={<MessageActions actions={["copy"]} time="14:21" />}
-        />
-        <AgentTurn
-          name="Orbitwork"
-          meta="4 步 · 1m12s"
-          execution={
-            <SubAgentThread
-              processes={[
-                { name: "重算行业中位数", status: "running", duration: "01:12" },
-                { name: "图表重绘", status: "queued" },
-                { name: "结论段校对", status: "done", duration: "0:38" },
-              ]}
-            />
-          }
-          actions={<MessageActions actions={["copy", "regenerate", "like", "dislike", "share"]} time="14:24" />}
-        >
-          中位数口径重算完，图 3 的差距从 12% 收到 4%，结论段照旧成立。
-        </AgentTurn>
-        {/* R5：节点就是信标，思考行只剩一句话——转/停由这一行上报（缺省 spinning） */}
-        <AgentTurn name="Orbitwork" thinking={<Thinking variant="inline" label="正在生成对照表" />} streaming>
-          对照表还差最后两列
-        </AgentTurn>
-      </Transcript>
-    </div>
-  ),
-}
-
-/** 带标题栏与输入区的完整壳（Composer 由宿主塞进 sender 槽）。 */
-export const WithHeaderAndSender: Story = {
-  args: {
-    surface: "base",
-    maxWidth: 620,
-    header: (
-      <span style={{ font: "500 var(--ow-fs-ui)/1 var(--ow-font-sans)", color: "var(--ow-text)", padding: "0 4px" }}>
-        Q3 渠道复盘
-      </span>
-    ),
-    sender: (
-      <div
-        style={{
-          minHeight: 56,
-          display: "flex",
-          alignItems: "center",
-          padding: "0 12px",
-          border: "1px solid var(--ow-border)",
-          borderRadius: "var(--ow-radius-lg)",
-          background: "var(--ow-surface)",
-          color: "var(--ow-placeholder)",
-          font: "400 var(--ow-fs-ui)/1 var(--ow-font-sans)",
-        }}
-      >
-        说说要做什么…
-      </div>
-    ),
-  },
-  render: (args) => (
-    <Transcript {...args}>
-      <UserTurn text="把复盘结论压到 200 字以内。" />
-      <AgentTurn name="Orbitwork" meta="2 步 · 21s">
-        压到了 186 字，三个结论各一句，数字保留到小数点后一位。
-      </AgentTurn>
-    </Transcript>
-  ),
-}
-
-/** 空态（§6 容器件必备）：信标 mono 母题＋一句人话，脊线不画。 */
-export const Empty: Story = {
-  args: {
-    maxWidth: 620,
-    empty: <EmptyState message="还没有对话。说说你要做什么，我从这里开始。" />,
-  },
-}
-
-/** 关掉脊线：退化为平铺消息列表（分享页等无脊柱语境）。 */
-export const WithoutSpine: Story = {
-  args: { spine: false, maxWidth: 620 },
-  render: (args) => (
-    <Transcript {...args}>
-      <UserTurn node={false} text="这一屏不画脊线。" />
-      <AgentTurn node={false} byline={false}>
-        轮次退化成平铺消息，正文排版不变。
-      </AgentTurn>
-    </Transcript>
-  ),
-}
-
-/**
- * 分享挑选模式（A7-B2，Terry 裁决 8）：点会话头的分享键之后，**每一轮**行首长出一枚
- * 16px 勾选框——排在 12px 脊柱列**之外**，正文整列右移 32px、长行照原型重排
- * （原型 template.dc.html:1142-1149）；脊线跟着右移，仍旧对着节点走。
- * 选中行**不加底色**：选中态只由勾选框自己承担（原型 1159 的正文容器无 background），
- * 不与侧栏当前项的 --ow-current-bg 抢同一句话。
- * 底下那条挑选栏与转录列同宽同轴（同一个 752 盒子），composer 让位给它。
- * 亮暗两档各截一张。
- */
-export const SharePicking: Story = {
-  args: { surface: "base", selectable: true, mode: "share" },
-  render: (args) => <SharePickingDemo {...args} />,
-}
-
-function SharePickingDemo(args: React.ComponentProps<typeof Transcript>) {
-  const turns = ["q1", "a1", "q2", "a2"] as const
-  const [picked, setPicked] = useState<Record<string, boolean>>({ q1: true, a1: true, q2: false, a2: true })
-  const count = turns.filter((k) => picked[k]).length
-  const toggle = (key: string) => (next: boolean) => setPicked((prev) => ({ ...prev, [key]: next }))
-  return (
-    <Transcript
-      {...args}
-      sender={<ComposerStub draft="" />}
-      pickBar={
-        <DesktopShareSelectionBarView
-          allSelected={count === turns.length}
-          selectedCount={count}
-          onToggleAll={() =>
-            setPicked(Object.fromEntries(turns.map((k) => [k, count !== turns.length])) as Record<string, boolean>)
-          }
-          onCancel={() => {}}
-          onShare={() => {}}
-        />
-      }
-    >
-      <UserTurn
-        selectable
-        checked={picked.q1}
-        onToggle={toggle("q1")}
-        text="帮我核对 Q3 渠道复盘引用的 14 份来源，重点看数据有没有过期。"
-        time="14:12"
-      />
-      <AgentTurn selectable checked={picked.a1} onToggle={toggle("a1")}>
-        14 份来源里有 3 份的数据停在 2025 年 12 月，其中第 9 份的行业均值口径和其余 13 份不一致。
-      </AgentTurn>
-      <UserTurn
-        selectable
-        checked={picked.q2}
-        onToggle={toggle("q2")}
-        text="第 9 份的行业均值口径不对，换成中位数再跑一遍。"
-        time="14:21"
-      />
-      <AgentTurn selectable checked={picked.a2} onToggle={toggle("a2")}>
-        中位数口径重算完，图 3 的差距从 12% 收到 4%，结论段照旧成立。
-      </AgentTurn>
-    </Transcript>
-  )
-}
-
-/**
- * 底槽让位（A7-B3）：Composer 与挑选栏**两块常驻**，靠 max-height + opacity 互换，
- * 200ms `--ow-ease-beacon`（原型 template.dc.html:1427-1429 / 1438）。
- * 按「分享这段会话」进分享模式、按「取消」退回来——**先在输入框里敲几个字再切**，
- * 回来时草稿、光标位置原样都在，因为 composer 从头到尾没被卸载（原型 1427 行注释
- * 写的就是这个理由）。收起的那一块 inert + aria-hidden，不吃 Tab 也不吃点击。
- * prefers-reduced-motion 下不做补间，直接切换（§9）。
- */
-export const SenderSwap: Story = {
-  args: { surface: "base", maxWidth: 620 },
-  render: (args) => <SenderSwapDemo {...args} />,
-}
-
-function SenderSwapDemo(args: React.ComponentProps<typeof Transcript>) {
-  const turns = ["q1", "a1"] as const
-  const [mode, setMode] = useState<"compose" | "share">("compose")
-  const [picked, setPicked] = useState<Record<string, boolean>>({ q1: true, a1: true })
-  const sharing = mode === "share"
-  const count = turns.filter((k) => picked[k]).length
-  const toggle = (key: string) => (next: boolean) => setPicked((prev) => ({ ...prev, [key]: next }))
-  return (
-    <Transcript
-      {...args}
-      mode={mode}
-      selectable={sharing}
-      header={
-        <div className="flex w-full items-center justify-between px-1">
-          <span style={{ font: "500 var(--ow-fs-ui)/1 var(--ow-font-sans)", color: "var(--ow-text)" }}>
-            Q3 渠道复盘
-          </span>
-          <Button
-            variant="secondary"
-            size="sm"
-            aria-pressed={sharing}
-            onClick={() => setMode(sharing ? "compose" : "share")}
-          >
-            {sharing ? "退出分享" : "分享这段会话"}
-          </Button>
-        </div>
-      }
-      sender={<ComposerStub draft="这段草稿在切换分享模式后不会丢——" />}
-      pickBar={
-        <DesktopShareSelectionBarView
-          allSelected={count === turns.length}
-          selectedCount={count}
-          onToggleAll={() =>
-            setPicked(Object.fromEntries(turns.map((k) => [k, count !== turns.length])) as Record<string, boolean>)
-          }
-          onCancel={() => setMode("compose")}
-          onShare={() => setMode("compose")}
-        />
-      }
-    >
-      <UserTurn
-        selectable={sharing}
-        checked={picked.q1}
-        onToggle={toggle("q1")}
-        text="帮我核对 Q3 渠道复盘引用的 14 份来源。"
-        time="14:12"
-      />
-      <AgentTurn selectable={sharing} checked={picked.a1} onToggle={toggle("a1")} name="Orbitwork" meta="6 步 · 2m40s">
-        14 份来源里有 3 份的数据停在 2025 年 12 月。
-      </AgentTurn>
-    </Transcript>
-  )
-}
-
-/** 故事用的 composer 替身：真 Composer 在 apps/desktop，这里只要一个能存草稿的输入框。 */
-function ComposerStub({ draft }: { draft: string }) {
-  const [value, setValue] = useState(draft)
-  return (
-    <div
-      style={{
-        display: "flex",
-        alignItems: "center",
-        gap: 10,
-        minHeight: 56,
-        padding: "0 12px",
-        border: "1px solid var(--ow-border)",
-        borderRadius: "var(--ow-radius-lg)",
-        background: "var(--ow-surface-2)",
-      }}
-    >
-      <input
-        aria-label="说说要做什么"
-        placeholder="说说要做什么…"
-        value={value}
-        onChange={(e) => setValue(e.target.value)}
-        style={{
-          flex: "1 1 auto",
-          minWidth: 0,
-          border: 0,
-          outline: "none",
-          background: "transparent",
-          color: "var(--ow-text)",
-          font: "400 var(--ow-fs-ui)/1.5 var(--ow-font-sans)",
-        }}
-      />
-      <Button variant="secondary" size="sm">
-        发送
-      </Button>
-    </div>
-  )
-}