@orbit-work/ui 0.1.0

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

@@ -0,0 +1,105 @@
+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

@@ -0,0 +1,83 @@
+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

@@ -0,0 +1,113 @@
+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

@@ -0,0 +1,296 @@
+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>
+  )
+}