@orbit-work/ui 0.1.0

package/src/components/domain/chat/Transcript/TranscriptSource.test.mjs

@@ -0,0 +1,189 @@
+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 spine = await readFile(new URL("../TranscriptSpine/index.tsx", import.meta.url), "utf8")
+const legacy = await readFile(new URL("../Chatbot/index.tsx", import.meta.url), "utf8")
+const desktop = await readFile(new URL("../../desktop/DesktopChatTurnView/index.tsx", import.meta.url), "utf8")
+const componentsCss = await readFile(new URL("../../../../../styles/components.css", import.meta.url), "utf8")
+const desktopCss = await readFile(new URL("../../../../../styles/desktop-surfaces.css", import.meta.url), "utf8")
+
+// R2 复审：脊线从「一根跟容器的绝对定位线」改成「每个非末轮一段、按首尾节点定位」——
+// 原写法（top:8 / bottom:9）跟的是轮次容器，末轮是带正文的 AgentTurn 时线要在末节点之下
+// 多拖二十几个像素。几何口径（left 5 · 1.5px · --ow-timeline）与锁定件 TranscriptSpine 不变。
+test("脊线口径与锁定件 TranscriptSpine 一致：left 5 · 1.5px · --ow-timeline", () => {
+  assert.match(source, /className="ow-transcript-turns relative flex flex-col"/)
+  const seg = /\.ow-transcript-turns\[data-spine="on"\] > \*:not\(:last-child\)::before \{[\s\S]*?\}/.exec(
+    componentsCss,
+  )
+  assert.ok(seg, "components.css 缺 .ow-transcript-turns 的脊线段规则")
+  assert.match(seg[0], /left: 5px;/)
+  assert.match(seg[0], /width: 1\.5px;/)
+  assert.match(seg[0], /background: var\(--ow-timeline\);/)
+  // 段起于本轮节点中心（dot top 6 ＋ 半径 5.5），止于下一轮节点中心（本轮高 ＋ 轮距）
+  assert.match(seg[0], /top: 11\.5px;/)
+  assert.match(seg[0], /height: calc\(100% \+ var\(--ow-turn-gap, 20px\)\);/)
+  assert.match(source, /"--ow-turn-gap": `\$\{gap\}px`/)
+  assert.match(spine, /left: 5,/)
+  assert.match(spine, /width: 1\.5,/)
+  assert.match(spine, /background: "var\(--ow-timeline\)"/)
+})
+
+// A9-B2：真实桌面端会话渲染的是 `.chat__inner > .turn`，不带 .ow-transcript-turns 类，
+// 于是线上只剩孤立节点、没有贯穿线。desktop-surfaces.css 补同一套段规则。
+test("脊线段规则同时挂到桌面端的 .chat__inner（修「只有点没有线」）", () => {
+  const seg = /\.chat__inner \.turn:has\(> \[data-ow-part="dot"\]\)::before \{[\s\S]*?\}/.exec(desktopCss)
+  assert.ok(seg, "desktop-surfaces.css 缺 .chat__inner 的脊线段规则")
+  assert.match(seg[0], /left: 5px;/)
+  assert.match(seg[0], /top: 11\.5px;/)
+  assert.match(seg[0], /width: 1\.5px;/)
+  assert.match(seg[0], /height: calc\(100% \+ 14px\);/)
+  assert.match(seg[0], /background: var\(--ow-timeline\);/)
+  // 末轮不画：线止于末节点
+  assert.match(desktopCss, /\.chat__inner > \.turn:last-child::before,[\s\S]{0,120}?\{ display: none; \}/)
+})
+
+// A9-B2：内容列 640/760 两档并成 752 一档（原型 template.dc.html:1140/1430）。
+test("内容列宽 752：Transcript 缺省与 .chat__inner / .composer-inner 同一档", () => {
+  assert.match(source, /maxWidth = 752,/)
+  assert.match(desktopCss, /\.chat__inner \{[^}]*max-width: 752px;[^}]*\}/s)
+  assert.match(desktopCss, /\.composer-inner \{ width: 100%; max-width: 752px; margin: 0 auto; \}/)
+})
+
+test("壳把地色注入 --ow-turn-ground，用户轮空心环才能断开脊线", () => {
+  assert.match(
+    source,
+    /const GROUND: Record<TranscriptSurface, string> = \{\s*base: "var\(--ow-bg\)",\s*surface: "var\(--ow-surface\)",/,
+  )
+  assert.match(source, /"--ow-turn-ground": GROUND\[surface\]/)
+})
+
+test("容器件槽位齐备：header / 轮次 / empty 空态 / sender", () => {
+  for (const slot of ["header", "empty", "sender"]) {
+    assert.match(source, new RegExp(`${slot}\\?: ReactNode`))
+  }
+  assert.match(source, /hasTurns \? \(/)
+  assert.match(source, /\) : \(\s*empty\s*\)/)
+})
+
+test("spine 可关：无脊柱语境（分享页等）退化为平铺列表", () => {
+  assert.match(source, /spine = true/)
+  // 开关落在 data-spine 上，脊线段规则只在 [data-spine="on"] 下生效
+  assert.match(source, /data-spine=\{spine \? "on" : undefined\}/)
+  assert.match(componentsCss, /\.ow-transcript-turns\[data-spine="on"\]/)
+})
+
+test("立面：贴地容器无影，地色只有 bg / surface 两档（§5）", () => {
+  assert.doesNotMatch(source, /shadow-/)
+  assert.doesNotMatch(source, /--ow-surface-2/)
+})
+
+test("R3 中性件：壳自身不含信标/荧黄", () => {
+  assert.doesNotMatch(source, /var\(--ow-beacon|var\(--ow-accent-dot|var\(--ow-yellow/)
+})
+
+test("任意值 var() 全部带类型标注（防 tailwind-merge 吞类）", () => {
+  assert.doesNotMatch(source, /(?:text|border)-\[var\(--ow-/)
+  assert.doesNotMatch(source, /font-\[var\(--ow-font-/)
+})
+
+test("标题带高写成 --ow-titlebar-h，不写 Tailwind 刻度类（48 不在控件高表）", () => {
+  assert.match(source, /min-h-\[var\(--ow-titlebar-h\)\]/)
+  assert.doesNotMatch(source, /min-h-12/)
+})
+
+test("旧壳归口：Chatbot 转兼容层（不再硬挂非设计值 min-h），DesktopConversationView 改挂 Transcript", () => {
+  assert.match(legacy, /@deprecated/)
+  assert.doesNotMatch(legacy, /min-h-\[420px\]/)
+  assert.match(legacy, /import \{ Transcript \} from "\.\.\/Transcript"/)
+  assert.match(desktop, /import \{ Transcript \} from "\.\.\/\.\.\/chat\/Transcript"/)
+  assert.match(desktop, /<Transcript spine=\{spine\} maxWidth="100%" className=\{className\}>/)
+})
+
+// ── A7-B2 分享挑选模式（Terry 裁决 8） ─────────────────────────────────────
+test("壳只管让位：selectable 打 data-selecting，脊线段右移 32px，列宽不变", () => {
+  assert.match(source, /selectable\?: boolean/)
+  assert.match(source, /data-selecting=\{selectable \? "on" : undefined\}/)
+  // 选集不归壳管（每轮自己的 checked / onToggle）
+  assert.doesNotMatch(source, /onToggle\?:/)
+  assert.doesNotMatch(source, /checked\?:/)
+  assert.match(
+    componentsCss,
+    /\.ow-transcript-turns\[data-spine="on"\]\[data-selecting="on"\] > \*:not\(:last-child\)::before \{ left: 37px; \}/,
+  )
+  assert.match(desktopCss, /\.chat__inner \.turn\[data-selectable="on"\]::before \{ left: 37px; \}/)
+})
+
+test("勾选行：一套排版走天下——两套 @container 宽窄悬挂规则与选中底色全删", () => {
+  // 宽档把勾选框悬到左槽沟（margin-inline:-32px）、窄档堆在消息上方，都不再存在
+  assert.doesNotMatch(desktopCss, /margin-inline: -32px/)
+  assert.doesNotMatch(desktopCss, /@container \(min-width: 1067px\)/)
+  assert.doesNotMatch(desktopCss, /@container \(max-width: 1066px\)/)
+  assert.doesNotMatch(desktopCss, /\.share-pick-row\.is-selected/)
+  // 分享模式下目录轨不再藏
+  assert.doesNotMatch(desktopCss, /is-share-picking \.chat-outline/)
+  // 行首勾选框在流里占位：16 框 ＋ 16 沟
+  assert.match(
+    desktopCss,
+    /\.share-pick-row \{ display: flex; align-items: flex-start; gap: var\(--ow-space-4, 16px\); \}/,
+  )
+})
+
+// ── A7-B3 底槽让位：composer ↔ 挑选栏交叉互换 ─────────────────────────────
+test("底槽两块常驻：sender 与 pickBar 同槽，mode 决定谁占位（composer 不卸载）", () => {
+  assert.match(source, /pickBar\?: ReactNode/)
+  assert.match(source, /mode\?: TranscriptMode/)
+  assert.match(source, /export type TranscriptMode = "compose" \| "share"/)
+  assert.match(source, /mode = "compose",/)
+  assert.match(source, /const sharing = mode === "share"/)
+  // 两块渲染在同一个 sender 槽里，条件只作用于「有没有传」，不作用于模式
+  assert.match(source, /\{\(sender \|\| pickBar\) && \(/)
+  assert.match(source, /data-ow-part="pick-bar"\s*\n\s*data-ow-state=\{sharing \? "shown" : "hidden"\}/)
+  assert.match(source, /data-ow-part="composer"\s*\n\s*data-ow-state=\{sharing \? "hidden" : "shown"\}/)
+  // 让位≠卸载：源码里不得出现「share 模式就不渲染 sender」这种写法
+  assert.doesNotMatch(source, /sharing \? undefined : sender/)
+  assert.doesNotMatch(source, /!sharing && sender/)
+})
+
+test("让位中的一块 inert + aria-hidden：不吃 Tab 焦点也不吃点击", () => {
+  // B4 核对：inert 经 inertProps() spread 给出（@types/react 18 的宿主 tsc 才过），语义不变
+  assert.match(source, /\{\.\.\.inertProps\(!sharing\)\}/)
+  assert.match(source, /\{\.\.\.inertProps\(sharing\)\}/)
+  // R2 · L3-3-8：布尔 inert 在宿主的 React 18 上会被整条丢弃；字符串 "true" 才在 18/19 两代都落成属性
+  assert.match(source, /const inertProps = \(on: boolean\) => \(\{ inert: on \? "true" : undefined \}\)/)
+  assert.match(source, /aria-hidden=\{sharing \? undefined : true\}/)
+  assert.match(source, /aria-hidden=\{sharing \? true : undefined\}/)
+  assert.match(componentsCss, /\.ow-transcript-swap\[data-ow-state="hidden"\] \{[\s\S]*?pointer-events: none;/)
+})
+
+test("互换动效：grid-template-rows + opacity，200ms --ow-dur-2 / --ow-ease-beacon（原型 1427-1429）", () => {
+  const base = /\.ow-transcript-swap \{[\s\S]*?\}/.exec(componentsCss)
+  assert.ok(base, "components.css 缺 .ow-transcript-swap 基础规则")
+  assert.match(base[0], /overflow: hidden;/)
+  assert.match(base[0], /grid-template-rows var\(--ow-dur-2\) var\(--ow-ease-beacon\)/)
+  assert.match(base[0], /opacity var\(--ow-dur-2\) var\(--ow-ease-beacon\)/)
+  // R2 · L3-2-3：展开态不得再写死 max-height——附件/队列一多会连发送钮一起被静默裁掉
+  assert.doesNotMatch(
+    componentsCss,
+    /\.ow-transcript-swap\[data-ow-part="[^"]+"\]\[data-ow-state="shown"\] \{ max-height/,
+  )
+  assert.match(componentsCss, /\.ow-transcript-swap > \[data-ow-part="swap-inner"\] \{ min-height: 0; \}/)
+  assert.match(source, /<div data-ow-part="swap-inner">\{pickBar\}<\/div>/)
+  assert.match(source, /<div data-ow-part="swap-inner">\{sender\}<\/div>/)
+  assert.match(
+    componentsCss,
+    /\.ow-transcript-swap\[data-ow-part="pick-bar"\]\[data-ow-state="shown"\] \{ grid-template-rows: 1fr; opacity: 1; \}/,
+  )
+  assert.match(
+    componentsCss,
+    /\.ow-transcript-swap\[data-ow-part="composer"\]\[data-ow-state="shown"\] \{ grid-template-rows: 1fr; opacity: 1; \}/,
+  )
+  // §9：reduced-motion 直接切换
+  // 两条选择器都要关：hidden 态自带 transition 声明，特异度比裸类高一级
+  const rm =
+    /@media \(prefers-reduced-motion: reduce\) \{\s*\.ow-transcript-swap,\s*\.ow-transcript-swap\[data-ow-state="hidden"\] \{ transition: none; \}\s*\}/.exec(
+      componentsCss,
+    )
+  assert.ok(rm, "components.css 缺 .ow-transcript-swap 的 prefers-reduced-motion 分支（含 hidden 态）")
+})

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

@@ -0,0 +1,187 @@
+"use client"
+
+import type { CSSProperties, HTMLAttributes, ReactNode } from "react"
+import { cn } from "../../../../lib/utils"
+
+/**
+ * Transcript — DS 2.0 会话壳（蓝图批次③ 合并件：Chatbot / ConversationView
+ * 归口为同一配方）。
+ *
+ * 它把会话列表接上锁定件 TranscriptSpine 的脊柱语言：左侧 1.5px `--ow-timeline`
+ * 贯穿线从第一轮拉到最后一轮，UserTurn（空心环）/ AgentTurn（实心点）各自把节点
+ * 挂在线上，节点环心填壳的地色 `--ow-turn-ground`（`surface` 属性决定），
+ * 于是环把线断开、实心点压在线上——与 TranscriptSpine 规格卡逐像素同口径。
+ *
+ * 分享挑选模式（`selectable`）：轮次容器打上 data-selecting，脊线段右移 32px，
+ * 与每一轮行首那枚勾选框让出的 32px 同步（原型 template.dc.html:1142）。
+ *
+ * 底槽让位（`mode`，A7-B3）：`sender`（Composer）与 `pickBar`（挑选栏）**两块常驻**，
+ * 靠 max-height + opacity 互换，200ms `--ow-ease-beacon`（原型 1427-1429 / 1438）。
+ * composer 不卸载，所以退出分享后草稿 / @芯片 / 附件都还在——这正是原型 1427 行注释
+ * 写明的目的。prefers-reduced-motion 下不做补间，直接切换（§9）。
+ *
+ * 槽位：`header`（标题栏）· 轮次（`children`）· `empty`（空态，§6 容器件必备）·
+ * `sender`（Composer）· `pickBar`（分享挑选栏）。
+ * 立面（§5）：贴地容器，无影；地色只有 `--ow-bg` / `--ow-surface` 两档。
+ * R3 中性件：壳自身不含信标/荧黄。
+ */
+export type TranscriptSurface = "base" | "surface"
+
+/** 底槽当前占位的那一块：compose=Composer · share=挑选栏（原型 template.dc.html:1427/1438） */
+export type TranscriptMode = "compose" | "share"
+
+export type TranscriptProps = {
+  /** 顶部槽：标题、身份、会话操作 */
+  header?: ReactNode
+  /** 轮次列表：UserTurn / AgentTurn / 分隔件 */
+  children?: ReactNode
+  /** 空态槽（EmptyState），无轮次时居中显示 */
+  empty?: ReactNode
+  /** 底部槽：Composer。与 `pickBar` 两块常驻，由 `mode` 决定谁占位 */
+  sender?: ReactNode
+  /**
+   * 底部槽的另一块：分享挑选栏（DesktopShareSelectionBarView）。
+   * 与 `sender` 同槽同轴同宽（都坐在 maxWidth 那一列里），所以「挑选栏与对话同宽」
+   * 不需要它自己管宽度（裁决 8）。
+   */
+  pickBar?: ReactNode
+  /** 脊线贯穿；关掉即退化为平铺消息列表 */
+  spine?: boolean
+  /** 地色档：base=地 `--ow-bg` · surface=面板 `--ow-surface`，同时决定节点环心色。
+   *  缺省 `surface`——裁决 1（批1）后内容面（`.owcenter`）统一是 `--ow-surface` 那张纸，
+   *  会话列必须与它同色；原缺省 `base` 是 `.owcenter` 还取 `--ow-bg` 时代的口径，
+   *  批1 换向后没跟着翻，会在纸上留一道 752 宽、深一档的地色柱（终检修正）。
+   *  只有把 Transcript 直接放在 `--ow-bg` 地面上时才显式传 `base`。 */
+  surface?: TranscriptSurface
+  /** 轮次间距，缺省 20px（脊线上的轮距） */
+  gap?: number
+  /** 内容列最大宽，缺省 752（原型 template.dc.html:1140 的会话内容列） */
+  maxWidth?: number | string
+  /**
+   * 分享挑选模式：每一轮行首长出勾选框（勾选态与回调由各轮自己的
+   * `selectable` / `checked` / `onToggle` / `selectLabel` 持有，壳不代管选集）。
+   * 壳这一层只负责让位——把脊线段整体右移 32px，好让脊柱继续对着节点走
+   * （components.css 的 .ow-transcript-turns[data-selecting="on"]）。
+   * 内容列宽不变（仍是 752），正文被勾选框顶右、长行重排，照原型 1142。
+   */
+  selectable?: boolean
+  /**
+   * 底槽模式：`compose` 显示 Composer、`share` 让位给 `pickBar`。
+   * 让位靠 max-height + opacity 互换（--ow-dur-2 / --ow-ease-beacon），
+   * **两块都不卸载**——退出分享后草稿与附件原样还在（原型 1427 注释）。
+   * 让位中的那一块 inert + aria-hidden，不吃焦点也不吃点击。
+   */
+  mode?: TranscriptMode
+  className?: string
+}
+
+/* `inert` 的 JSX 类型要到 @types/react 19 才有；apps/desktop 还钉在 18.3，直接写
+   `inert={bool}` 会让宿主的 tsc 报 TS2322（B4 核对时实测 +2 条）。经一层 spread 给出去，两边类型都过。
+
+   R2 · L3-3-8：值必须是**字符串 "true"**，不能是布尔。两侧 react-dom/server 实测：
+   React 18.3.1 `inert={true}` → 属性被整个丢弃（宿主上根本没有 inert，只剩 CSS 兜底），
+   `inert="true"` → `inert="true"`；React 19.2.8 `inert={true}` → `inert=""`，`inert=""` → 丢弃，
+   `inert="true"` → `inert=""`。只有字符串 "true" 在 18/19 两代都落成真正的 inert 属性
+   （19 会多一条「用了字符串」的开发告警，可接受）。关闭时给 undefined，属性整条不出。 */
+const inertProps = (on: boolean) => ({ inert: on ? "true" : undefined }) as unknown as HTMLAttributes<HTMLDivElement>
+
+const GROUND: Record<TranscriptSurface, string> = {
+  base: "var(--ow-bg)",
+  surface: "var(--ow-surface)",
+}
+
+export function Transcript({
+  header,
+  children,
+  empty,
+  sender,
+  pickBar,
+  spine = true,
+  surface = "surface",
+  gap = 20,
+  maxWidth = 752,
+  selectable = false,
+  mode = "compose",
+  className = "",
+}: TranscriptProps) {
+  const hasTurns = children !== undefined && children !== null && children !== false
+  const sharing = mode === "share"
+
+  return (
+    <section
+      data-slot="transcript"
+      data-surface={surface}
+      className={cn(
+        "mx-auto flex w-full flex-col",
+        "font-[family-name:var(--ow-font-sans)] text-[color:var(--ow-text)]",
+        surface === "surface" ? "bg-[var(--ow-surface)]" : "bg-[var(--ow-bg)]",
+        className,
+      )}
+      style={{ maxWidth, "--ow-turn-ground": GROUND[surface] } as CSSProperties}
+    >
+      {header && (
+        <header
+          data-ow-part="header"
+          // 48 = 标题带高，写成 var(--ow-titlebar-h) 以与控件高表 {28,32,40} 区分（§7）
+          className="flex min-h-[var(--ow-titlebar-h)] flex-shrink-0 items-center border-b border-[color:var(--ow-border)]"
+        >
+          {header}
+        </header>
+      )}
+      <div
+        data-ow-part="stream"
+        // R5（2026-09-04）：滚动壳向两侧各让出 16 再用同样的内距收回——内容列仍是 752 且与底部
+        // 输入面对齐，但脊柱节点上的信标（R5 合体，公转半径最远 ~15px 越过脊柱列左沿）不再被
+        // overflow-y:auto 顺带带上的 overflow-x 裁掉。上下由 py-5 的 20 兜住。
+        className={cn(
+          "-mx-4 flex min-h-0 flex-1 flex-col overflow-y-auto px-4 py-5",
+          hasTurns ? "justify-start" : "justify-center",
+        )}
+      >
+        {hasTurns ? (
+          <div
+            data-ow-part="turns"
+            data-spine={spine ? "on" : undefined}
+            data-selecting={selectable ? "on" : undefined}
+            className="ow-transcript-turns relative flex flex-col"
+            style={{ gap, "--ow-turn-gap": `${gap}px` } as CSSProperties}
+          >
+            {children}
+          </div>
+        ) : (
+          empty
+        )}
+      </div>
+      {(sender || pickBar) && (
+        // 两块常驻、互换让位：collapsed 的一块留在 DOM 里（草稿/附件不丢），
+        // 但 inert + aria-hidden，不吃 Tab 焦点也不吃点击。
+        // R2 · L3-2-3：每块内再套一层 swap-inner——0fr 的行轨只压得动「高度 auto ＋ min-height:0」
+        // 的网格项；.share-pick-bar 自带 height:44 是定值，直接当网格项时行轨收不到 0。
+        <footer data-ow-part="sender" data-mode={mode} className="flex-shrink-0 pb-1 pt-2">
+          {pickBar && (
+            <div
+              data-ow-part="pick-bar"
+              data-ow-state={sharing ? "shown" : "hidden"}
+              className="ow-transcript-swap"
+              {...inertProps(!sharing)}
+              aria-hidden={sharing ? undefined : true}
+            >
+              <div data-ow-part="swap-inner">{pickBar}</div>
+            </div>
+          )}
+          {sender && (
+            <div
+              data-ow-part="composer"
+              data-ow-state={sharing ? "hidden" : "shown"}
+              className="ow-transcript-swap"
+              {...inertProps(sharing)}
+              aria-hidden={sharing ? true : undefined}
+            >
+              <div data-ow-part="swap-inner">{sender}</div>
+            </div>
+          )}
+        </footer>
+      )}
+    </section>
+  )
+}

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

@@ -0,0 +1,124 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { TranscriptSpine } from "./index"
+
+const meta = {
+  title: "Chat/TranscriptSpine",
+  component: TranscriptSpine,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof TranscriptSpine>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** 规格卡演示序列：用户轮空心环、agent 轮实心点，loop 摘要默认折叠 ▸，第 4 轮展开 ▾ 见工具明细。 */
+export const SpecCard: Story = {
+  args: {
+    turns: [
+      { role: "user", summary: "帮我核对 Q3 渠道复盘引用的 14 份来源，重点看数据有没有过期。" },
+      { role: "agent", summary: "核对 14 份来源", steps: 6, duration: "2m40s" },
+      { role: "user", summary: "第 9 份的行业均值口径不对，换成中位数再跑一遍。" },
+      {
+        role: "agent",
+        summary: "重算行业中位数",
+        steps: 4,
+        duration: "1m12s",
+        collapsed: false,
+        tools: [
+          { name: "read_sheet", target: "数据源/行业面板_2026H1.xlsx", duration: "0.6s" },
+          { name: "run_python", target: "median_by_segment.py", duration: "38s" },
+        ],
+      },
+      { role: "agent", summary: "更新报告并生成对照表", steps: 3, duration: "58s" },
+    ],
+  },
+  render: (args) => (
+    <div
+      style={{
+        background: "var(--ow-surface)",
+        border: "1px solid var(--ow-border)",
+        borderRadius: "var(--ow-radius-lg)",
+        padding: "16px 16px 15px",
+        maxWidth: 560,
+      }}
+    >
+      <TranscriptSpine {...args} />
+    </div>
+  ),
+}
+
+/** 全部 loop 默认折叠：点击摘要行可展开/再折叠（▸/▾ 交互态）。 */
+export const AllCollapsed: Story = {
+  args: {
+    turns: [
+      { role: "user", summary: "把上周的用户访谈纪要整理成主题清单。" },
+      {
+        role: "agent",
+        summary: "整理 9 份访谈纪要",
+        steps: 5,
+        duration: "3m05s",
+        tools: [
+          { name: "read_file", target: "访谈/第37周_合并纪要.md", duration: "0.4s" },
+          { name: "run_python", target: "cluster_topics.py", duration: "51s" },
+        ],
+      },
+      { role: "agent", summary: "生成主题清单草稿", steps: 2, duration: "44s" },
+    ],
+  },
+}
+
+/** 展开态含「… 其余 N 步已折叠」补行：steps 多于给出的工具明细行时自动出现。 */
+export const ExpandedWithHiddenSteps: Story = {
+  args: {
+    turns: [
+      { role: "user", summary: "对照 A/B 两版落地页的转化数据，给我一版结论。" },
+      {
+        role: "agent",
+        summary: "对照 A/B 转化数据",
+        steps: 6,
+        duration: "2m18s",
+        collapsed: false,
+        tools: [
+          { name: "read_sheet", target: "实验/landing_ab_2026W35.xlsx", duration: "0.7s" },
+          { name: "run_python", target: "uplift_test.py", duration: "26s" },
+        ],
+      },
+    ],
+  },
+}
+
+/** 仅用户轮引用原话：13px --ow-text，不加气泡底（气泡属宿主）。 */
+export const UserTurnsOnly: Story = {
+  args: {
+    turns: [
+      { role: "user", summary: "帮我核对 Q3 渠道复盘引用的 14 份来源。" },
+      { role: "user", summary: "重点看数据有没有过期，尤其是行业均值那几份。" },
+    ],
+  },
+}
+
+/** 长对话混排：脊线贯穿全部轮次，实心/空心双编码区分角色，不设头像。 */
+export const LongMixedThread: Story = {
+  args: {
+    turns: [
+      { role: "user", summary: "把季度复盘拆成渠道、成本、留存三部分推进。" },
+      { role: "agent", summary: "拆解复盘任务", steps: 3, duration: "36s" },
+      { role: "agent", summary: "汇总渠道数据", steps: 7, duration: "4m02s" },
+      { role: "user", summary: "成本那部分先跳过，优先把留存曲线画出来。" },
+      {
+        role: "agent",
+        summary: "绘制留存曲线",
+        steps: 4,
+        duration: "1m28s",
+        collapsed: false,
+        tools: [
+          { name: "read_sheet", target: "数据源/留存面板_2026Q3.xlsx", duration: "0.5s" },
+          { name: "run_python", target: "retention_curves.py", duration: "42s" },
+        ],
+      },
+      { role: "agent", summary: "更新复盘草稿", steps: 2, duration: "51s" },
+    ],
+  },
+}