@orbit-work/ui 0.1.0

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

@@ -0,0 +1,498 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import type { ReactNode } from "react"
+import { Button } from "../../../primitives"
+import { AgentLoopSegment } from "../../chat/AgentLoopSegment"
+import { ArtifactCard } from "../../chat/ArtifactCard"
+import { AuthorizationCard } from "../../chat/AuthorizationCard"
+import { ExecutionSummary } from "../../chat/ExecutionSummary"
+import { PlanCard } from "../../chat/PlanCard"
+import { Thinking } from "../../chat/Thinking"
+import { ToolCallRow } from "../../chat/ToolCallRow"
+import {
+  DesktopChatAgentTurnView,
+  DesktopChatCompressionDivider,
+  DesktopChatReconnectDivider,
+  DesktopChatUserTurnView,
+  DesktopConversationView,
+} from "./index"
+
+const meta = {
+  title: "Desktop/DesktopChatTurnView",
+  component: DesktopChatUserTurnView,
+  decorators: [
+    (Story) => (
+      <div style={{ padding: 20, background: "var(--bg-primary)", maxWidth: 800 }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof DesktopChatUserTurnView>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const UserTurnBasic: Story = {
+  args: {
+    id: "turn-1",
+    text: "如何优化这个数据库查询？",
+    time: "2 分钟前",
+  },
+}
+
+export const UserTurnWithAttachments: Story = {
+  args: {
+    id: "turn-2",
+    text: "分析这些文件",
+    time: "5 分钟前",
+    attachments: [
+      { id: "1", name: "database.sql", meta: "2.4 KB", kind: "file" },
+      { id: "2", name: "config.json", meta: "1.2 KB", kind: "file" },
+      { id: "3", name: "src/", kind: "directory" },
+    ],
+    onAttachmentClick: (att) => console.log("Click:", att.name),
+  },
+}
+
+export const UserTurnWithImage: Story = {
+  args: {
+    id: "turn-3",
+    text: "这个设计有什么问题？",
+    attachments: [
+      {
+        id: "1",
+        name: "mockup.png",
+        meta: "145 KB",
+        kind: "image",
+        previewUrl: "https://picsum.photos/seed/mockup/200/150",
+        openable: true,
+      },
+    ],
+    onAttachmentClick: (att) => console.log("Click:", att.name),
+  },
+}
+
+export const UserTurnWithContexts: Story = {
+  args: {
+    id: "turn-4",
+    text: "运行代码审查",
+    contexts: [
+      { id: "code-review", name: "code-review", kind: "skill" },
+      { id: "github", name: "github", kind: "mcp" },
+    ],
+  },
+}
+
+export const UserTurnWithSource: Story = {
+  args: {
+    id: "turn-5",
+    text: "帮我检查这个 PR",
+    sourceLabel: "来自 Slack",
+    time: "刚刚",
+  },
+}
+
+export const UserTurnWithError: Story = {
+  args: {
+    id: "turn-6",
+    text: "执行这个命令",
+    error: "命令执行失败",
+    time: "1 分钟前",
+  },
+}
+
+export const UserTurnComplex: Story = {
+  args: {
+    id: "turn-7",
+    text: "完整分析这个项目",
+    sourceLabel: "来自 DingTalk",
+    time: "10 分钟前",
+    attachments: [
+      { id: "1", name: "screenshot.png", kind: "image", previewUrl: "https://picsum.photos/seed/proj/200/150" },
+      { id: "2", name: "README.md", meta: "3.2 KB", kind: "file" },
+    ],
+    contexts: [{ id: "project-analyzer", name: "project-analyzer", kind: "skill" }],
+  },
+}
+
+export const CompressionDividerCollapsed: StoryObj<typeof DesktopChatCompressionDivider> = {
+  render: () => (
+    <DesktopChatCompressionDivider
+      id="comp-1"
+      text="这是一段被压缩的长文本内容，包含了很多上下文信息…"
+      time="30 分钟前"
+      onCopy={(text) => console.log("Copy:", text)}
+    />
+  ),
+}
+
+export const CompressionDividerExpanded: StoryObj<typeof DesktopChatCompressionDivider> = {
+  render: () => (
+    <DesktopChatCompressionDivider
+      id="comp-2"
+      text="这是一段被压缩的长文本内容，包含了很多上下文信息…"
+      defaultExpanded={true}
+      time="30 分钟前"
+      onCopy={(text) => console.log("Copy:", text)}
+    />
+  ),
+}
+
+export const ReconnectDividerCollapsed: StoryObj<typeof DesktopChatReconnectDivider> = {
+  render: () => (
+    <DesktopChatReconnectDivider
+      id="reconnect-1"
+      detail="Connection timeout after 30s"
+      errorMessage="网络连接超时，请检查网络后重试"
+    />
+  ),
+}
+
+export const ReconnectDividerExpanded: StoryObj<typeof DesktopChatReconnectDivider> = {
+  render: () => (
+    <DesktopChatReconnectDivider
+      id="reconnect-2"
+      detail="Backend returned status 503"
+      errorTitle="服务不可用"
+      errorMessage="后端服务暂时不可用"
+      errorVersion="v0.1.0"
+      defaultExpanded={true}
+    />
+  ),
+}
+
+export const AgentTurnBasic: StoryObj<typeof DesktopChatAgentTurnView> = {
+  render: () => (
+    <DesktopChatAgentTurnView>这是助手的回复内容，可以包含 **加粗** 和 *斜体* 文本。</DesktopChatAgentTurnView>
+  ),
+}
+
+/**
+ * R4 · 2026-09-04：`thinking` 槽走 `ChatThinking` → 现在只是 `Thinking` inline 的薄包装，
+ * 所以这里渲出来的就是转录里那条整画布信标行 ＋ 行尾 chevron，推理正文挂在信标中线下的
+ * 竖线右侧（原型 template.dc.html:1196-1217）。
+ *
+ * 注意：`DesktopChatAgentTurnView` 眼下把 `defaultExpanded` 写死为 true（index.tsx:417），
+ * 所以这一屏是**展开**的；R4 的口径是思考缺省折叠（思考过程是过程，不是答案）。
+ * 该不该翻默认值由研发那侧定，本 story 不改件。
+ */
+export const AgentTurnWithThinking: StoryObj<typeof DesktopChatAgentTurnView> = {
+  render: () => (
+    <DesktopChatAgentTurnView
+      thinking={
+        <>
+          <p style={{ margin: "0 0 6px" }}>先看这段查询走的是哪张表：orders 有 240 万行，没有联合索引。</p>
+          <p style={{ margin: "0 0 6px" }}>WHERE 里的 status 与 created_at 一起过滤，单列索引吃不到第二个条件。</p>
+          <p style={{ margin: 0 }}>先建 (status, created_at) 复合索引，再看要不要拆分页。</p>
+        </>
+      }
+    >
+      根据分析，这段代码存在以下问题…
+    </DesktopChatAgentTurnView>
+  ),
+}
+
+export const AgentTurnWithMessages: StoryObj<typeof DesktopChatAgentTurnView> = {
+  render: () => (
+    <DesktopChatAgentTurnView
+      messages={[
+        {
+          id: "msg-1",
+          source: "第一部分回复内容",
+        },
+        {
+          id: "msg-2",
+          source: "第二部分回复内容",
+          streaming: true,
+        },
+      ]}
+    />
+  ),
+}
+
+export const ConversationFull: StoryObj<typeof DesktopConversationView> = {
+  render: () => (
+    <DesktopConversationView
+      groups={[
+        {
+          id: "group-1",
+          user: {
+            id: "user-1",
+            text: "如何优化这个查询？",
+            attachments: [{ id: "1", name: "query.sql", meta: "1.2 KB", kind: "file" }],
+            time: "10 分钟前",
+          },
+          agent: {
+            thinking: "分析查询结构 → 识别索引机会",
+            messages: [
+              {
+                id: "agent-1",
+                source: "这个查询可以通过添加索引来优化…",
+              },
+            ],
+          },
+        },
+        {
+          id: "group-2",
+          divider: <DesktopChatCompressionDivider id="comp" text="中间省略了一些内容" />,
+        },
+        {
+          id: "group-3",
+          user: {
+            id: "user-2",
+            text: "谢谢，还有其他建议吗？",
+            time: "2 分钟前",
+          },
+          agent: {
+            messages: [
+              {
+                id: "agent-2",
+                source: "另外建议检查查询计划…",
+                streaming: true,
+              },
+            ],
+          },
+        },
+      ]}
+    />
+  ),
+}
+
+// ────────────────────────────────────────────────────────────────────────────
+// A9-B3 · 过程链的分段收集器（给 apps/desktop ChatCard.tsx:1184-1262 `AgentProcessChain`
+// 的 story 级示例，研发照抄这段循环即可，本 story 用的是同构的假 entry）
+//
+// 研发那边的段是**隐式**的：`processEntries` 平铺渲染，thinking 开一段、相邻 tool 被
+// `collectAdjacentToolBlocks` 收成一组、非终末 text 收尾，下一个 thinking 就是下一段。
+// 这里补的是一层**纯视觉**的分段收集器：以 `kind === "thinking"` 为段首切片，
+// 每片包一个 `<AgentLoopSegment>`（flex 列 ＋ gap 10，无面无边）。
+// 不改任何 view-model、不改 body 顺序、不改 memo 判等——只是在 `nodes.push` 之外
+// 多一层「这一片属于哪一段」的归拢。
+// ────────────────────────────────────────────────────────────────────────────
+
+/** 与 ChatCard 的 `OrderedAgentBodyEntry` 同构的最小 entry（story 用） */
+type ProcessEntry =
+  | { kind: "thinking"; text: string; running?: boolean; reasoning?: ReactNode }
+  | {
+      kind: "tools"
+      label: string
+      meta?: string
+      // R4：明细行自己能再展一层「输入 / 输出」（ExecutionSummaryRow → ExecutionDetail）
+      tools: {
+        name: string
+        args?: string
+        elapsed?: string
+        out?: string
+        input?: ReactNode
+        output?: ReactNode
+        defaultDetailOpen?: boolean
+      }[]
+    }
+  | {
+      kind: "liveTools"
+      tools: { name: string; args?: string; state?: "running" | "pending" | "done" | "error"; elapsed?: string }[]
+    }
+  | { kind: "perm"; source: string; scope: string }
+  | { kind: "plan"; goal: string; steps: { label: string; state: "done" | "running" | "todo" }[]; elapsed?: string }
+  | { kind: "products"; items: { title: string; meta?: string }[] }
+  | { kind: "actions"; items: string[] }
+  | { kind: "text"; text: string }
+
+/**
+ * 分段收集器本体：thinking 切段，其余落进当前段；段首之前的零件自成一段（首段无 thinking 的情形）。
+ * 研发接线时把 `renderEntry` 换成现有的 `nodes.push(...)` 那几支即可，切段逻辑一字不动。
+ */
+function collectSegments(entries: ProcessEntry[]): ProcessEntry[][] {
+  const segments: ProcessEntry[][] = []
+  let current: ProcessEntry[] = []
+  for (const entry of entries) {
+    if (entry.kind === "thinking" && current.length > 0) {
+      segments.push(current)
+      current = []
+    }
+    current.push(entry)
+  }
+  if (current.length > 0) segments.push(current)
+  return segments
+}
+
+const chainBodyStyle = {
+  fontSize: "var(--ow-fs-body)",
+  lineHeight: "var(--ow-lh-body)",
+  color: "var(--ow-text)",
+} as const
+
+function renderEntry(entry: ProcessEntry, key: number, actionPoleTaken = false): ReactNode {
+  switch (entry.kind) {
+    case "thinking":
+      // §4 状态极每屏限一处（原型 logic:3850 的记账）：已收口的段思考行静止（text-3 单色不占极），
+      // 只有当前这一段 spinning；而当前段里有工具在跑时卫星再让一次极，退成 --ow-text-2。
+      // R4：推理正文当 children 交给 Thinking——行尾长出 chevron，缺省折叠。
+      return (
+        <Thinking
+          key={key}
+          variant="inline"
+          spinning={entry.running === true}
+          toolRunning={entry.running === true}
+          label={entry.text}
+        >
+          {entry.reasoning}
+        </Thinking>
+      )
+    case "tools":
+      // R4：摘要卡默认展开，好让「明细行 → 输入 / 输出」那一层在整屏 story 里可见
+      return <ExecutionSummary key={key} label={entry.label} meta={entry.meta} tools={entry.tools} defaultOpen />
+    case "liveTools":
+      return (
+        <div key={key} style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+          {entry.tools.map((tool, i) => (
+            <ToolCallRow key={i} name={tool.name} args={tool.args} state={tool.state} elapsed={tool.elapsed} />
+          ))}
+        </div>
+      )
+    case "perm":
+      // 归口自宿主 ChatCard.tsx:1129-1140 的 `.perm` 死钮卡
+      return <AuthorizationCard key={key} source={entry.source} scope={entry.scope} />
+    case "plan":
+      // 归口自宿主 ChatCard.tsx:1559-1595 的 `.plan/.steps/.step` 族
+      return <PlanCard key={key} goal={entry.goal} steps={entry.steps} elapsed={entry.elapsed} />
+    case "products":
+      // 归口自宿主 ChatCard.tsx:1534-1556 的 `.prod-list/.prod`；外层排布由宿主给
+      return (
+        <div key={key} style={{ display: "flex", flexWrap: "wrap", gap: 10 }}>
+          {entry.items.map((item, i) => (
+            <div key={i} style={{ flex: "0 1 auto", minWidth: 240 }}>
+              <ArtifactCard title={item.title} meta={item.meta} />
+            </div>
+          ))}
+        </div>
+      )
+    case "actions":
+      // 归口自宿主 ChatCard.tsx:1597-1610 的 `.actbar`：§4 行动极每屏限一处 → 只有首枚 primary。
+      // 同段已有授权卡时，那枚「允许一次」就是这一处，动作行整排退成 secondary
+      // （原型 logic:3859 对 live 轮的 actions 就是全 transparent 一档）。
+      return (
+        <div key={key} style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
+          {entry.items.map((label, i) => (
+            <Button key={label} variant={i === 0 && !actionPoleTaken ? "primary" : "secondary"} size="sm">
+              {label}
+            </Button>
+          ))}
+        </div>
+      )
+    case "text":
+      return (
+        <div key={key} style={chainBodyStyle}>
+          {entry.text}
+        </div>
+      )
+  }
+}
+
+function AgentProcessChainExample({ entries }: { entries: ProcessEntry[] }) {
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
+      {collectSegments(entries).map((segment, i) => {
+        // 授权卡的「允许一次」是实底钮，占掉这一段的行动极
+        const actionPoleTaken = segment.some((entry) => entry.kind === "perm")
+        return (
+          <AgentLoopSegment key={i}>
+            {segment.map((entry, j) => renderEntry(entry, j, actionPoleTaken))}
+          </AgentLoopSegment>
+        )
+      })}
+    </div>
+  )
+}
+
+const CHAIN_ENTRIES: ProcessEntry[] = [
+  {
+    kind: "thinking",
+    text: "先把这轮要动的文件数清楚，再决定改哪几处。",
+    running: false,
+    // R4：思考行也能展开——推理正文缺省折叠，行尾一枚 ChevRight
+    reasoning: (
+      <>
+        <p style={{ margin: "0 0 6px" }}>过程链里现在有四种壳：思考行、工具列表、计划卡、产物卡。</p>
+        <p style={{ margin: "0 0 6px" }}>工具列表借的是思考行的容器，所以流里两种东西长得一模一样。</p>
+        <p style={{ margin: 0 }}>先把列表壳换成执行摘要卡，旧的四族 CSS 失去消费方后再撤。</p>
+      </>
+    ),
+  },
+  {
+    kind: "tools",
+    label: "核对组件库现状",
+    meta: "3 步 · 12.4s",
+    tools: [
+      {
+        name: "grep",
+        args: '"chat-tool-list" packages/ui',
+        elapsed: "0.4s",
+        // R4：这一条再展一层，看得到输入与输出（ExecutionDetail 的「输入 / 输出」两段）
+        defaultDetailOpen: true,
+        input: <pre style={{ margin: 0 }}>{`{ "pattern": "chat-tool-list",\n  "path": "packages/ui" }`}</pre>,
+        output: (
+          <pre style={{ margin: 0 }}>{`styles/desktop-surfaces.css:2104  .chat-tool-list {
+styles/desktop-surfaces.css:2118  .chat-tool-list > * + * {
+styles/desktop-surfaces.css:2131  .chat-tool-list__head {
+styles/desktop-surfaces.css:2147  .chat-tool-list__row {
+— 8 处命中，全在 desktop-surfaces.css`}</pre>
+        ),
+      },
+      { name: "read_file", args: "proto/template.dc.html#L1219-L1250", elapsed: "0.3s" },
+      { name: "read_file", args: "packages/ui/styles/desktop-surfaces.css", elapsed: "11.7s", out: "6912 行" },
+    ],
+  },
+  { kind: "text", text: "一段执行的壳原来借的是思考行的容器，所以流里两种东西长得一模一样。" },
+  { kind: "thinking", text: "接着按原型把三件缺件逐值抄下来，中途要写文件。", running: true },
+  {
+    kind: "plan",
+    goal: "把过程链接到新件上，并撤掉失去消费方的旧 CSS",
+    steps: [
+      { label: "列表壳换 ExecutionSummary", state: "done" },
+      { label: "perm / plan / products / actions 归口", state: "done" },
+      { label: "撤旧 CSS 四族", state: "running" },
+      { label: "亮暗对拍", state: "todo" },
+    ],
+    elapsed: "1m24s",
+  },
+  {
+    kind: "liveTools",
+    tools: [
+      { name: "write_file", args: "packages/ui/styles/desktop-surfaces.css", state: "done", elapsed: "0.2s" },
+      { name: "write_file", args: "~/Documents/orbit/report.md", state: "pending" },
+    ],
+  },
+  { kind: "perm", source: "Filesystem 连接器", scope: "写入 ~/Documents/orbit/report.md，本次会话有效。" },
+  { kind: "products", items: [{ title: "过程链归口说明.md", meta: "report_a9b3.md · 1,240 字 · 09-02 18:40" }] },
+  { kind: "actions", items: ["应用这次改动", "只看 diff", "丢弃"] },
+]
+
+/**
+ * A9-B3 过程链：两段 agent loop（thinking 切段），段内自上而下＝
+ * 思考行 → 执行摘要卡 / 计划卡 / 工具行 / 授权卡 / 产物卡 / 动作行 → 段内正文。
+ * 段与段之间只有 10px 节奏，不加容器、不加段号、不加左细线（裁决 15）。
+ *
+ * R4 · 2026-09-04（Terry：一种「步骤」只留一种说法）——这一屏同时摆出三层折叠：
+ * 第一段思考行带推理正文（缺省折叠，行尾 14px ChevRight）、摘要卡头行（14px chevron，
+ * 这里默认展开）、明细行 `grep` 再展一层「输入 / 输出」（12px chevron ＋ ExecutionDetail 的井）。
+ * 三处用的是同一枚记号、同一套色阶。原型：template.dc.html:1196-1217 / 1219-1250 / 1271-1284。
+ */
+export const AgentProcessChainSegments: StoryObj<typeof DesktopConversationView> = {
+  render: () => (
+    <DesktopConversationView
+      groups={[
+        {
+          id: "chain",
+          user: { id: "chain-u", text: "把会话里的过程链接到新组件上，顺手撤掉旧样式。", time: "刚刚" },
+          /* R5 探索：这一轮的信标合到脊线节点上，段里的思考行只剩一句话；最后一段还在跑（授权待答），节点信标公转、卫星让极 */
+          agent: {
+            body: <AgentProcessChainExample entries={CHAIN_ENTRIES} />,
+            messages: [],
+            actions: false,
+            /* R5：节点信标缺省开；最后一段的思考行 spinning ＋ toolRunning 自动上报，节点信标公转、卫星让极 */
+          },
+        },
+      ]}
+    />
+  ),
+}

package/src/components/domain/desktop/DesktopChatTurnView/DesktopChatTurnViewSource.test.mjs

@@ -0,0 +1,187 @@
+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 branchDividerSource = await readFile(new URL("../DesktopChatBranchDivider/index.tsx", import.meta.url), "utf8")
+const css = await readFile(new URL("../../../../../styles/desktop-surfaces.css", import.meta.url), "utf8")
+const publicApi = await readFile(new URL("../index.ts", import.meta.url), "utf8")
+
+// DS 2.0 P5：桌面端三件轮次视图归口 ow-ui 的会话骨架（UserTurn / AgentTurn /
+// Transcript），形态照锁定件 TranscriptSpine：用户轮空心环＋引用原话不加气泡底，
+// agent 轮实心点，脊线由 Transcript 壳贯穿。原右对齐气泡段随之退役。
+test("desktop user turn hangs on the transcript spine instead of a bubble", () => {
+  assert.match(source, /import \{ UserTurn \} from ['"]\.\.\/\.\.\/chat\/UserTurn['"]/)
+  assert.match(source, /<UserTurn\s+className="turn turn--user"/)
+  assert.match(source, /anchor=\{id\}/)
+  // 来源 chip / 附件 / 上下文 chip / 操作行都改走 UserTurn 的槽
+  assert.match(source, /leading=\{/)
+  assert.match(source, /attachments=\{/)
+  assert.match(source, /contexts=\{/)
+  assert.match(source, /actions=\{text \? <DesktopChatUserMeta/)
+  assert.doesNotMatch(source, /className="turn-user-row/)
+  assert.doesNotMatch(source, /className="bubble"/)
+  assert.doesNotMatch(source, /className="turn-user-text"/)
+  assert.doesNotMatch(css, /^\.turn--user \.bubble \{/m)
+  assert.match(css, /\.turn--user \{[^}]*align-items: flex-start;[^}]*\}/s)
+})
+
+test("desktop agent turn and conversation shell reuse the DS2 chat skeleton", () => {
+  assert.match(source, /import \{ AgentTurn \} from ['"]\.\.\/\.\.\/chat\/AgentTurn['"]/)
+  assert.match(source, /import \{ Transcript \} from ['"]\.\.\/\.\.\/chat\/Transcript['"]/)
+  assert.match(source, /<AgentTurn\s+className=\{`turn \$\{plain \? "turn--plain-agent" : "turn--agent"\}`\}/)
+  assert.match(source, /byline=\{agentName != null\}/)
+  assert.match(source, /execution=\{execution\}/)
+  assert.match(source, /<Transcript spine=\{spine\} maxWidth="100%" className=\{className\}>/)
+})
+
+test("desktop chat attachment renders directories with the shared folder icon", () => {
+  assert.match(source, /kind\?: ["']image["'] \| ["']audio["'] \| ["']file["'] \| ["']directory["']/)
+  assert.match(source, /import \{[^}]*Folder[^}]*\} from ['"]\.\.\/\.\.\/\.\.\/composite\/Icons['"]/)
+  assert.match(source, /attachment\.kind === ["']directory["'] \?[\s\S]*?<Folder aria-hidden="true" \/>/)
+})
+
+test("desktop chat attachment renders files with the shared file icon instead of a text glyph", () => {
+  assert.match(source, /import \{ FileIcon \} from ['"]\.\.\/\.\.\/files\/FileIcon['"]/)
+  assert.match(source, /<FileIcon name=\{attachment\.name\} kind=\{attachment\.kind\} width=\{16\} height=\{16\} \/>/)
+  assert.doesNotMatch(source, /attachment\.glyph \?\?/)
+})
+
+// W5 移交 B④ · §4：目录徽标是「按类别上色」的 V1 残留——原 --ow-primary/-bg 组合暗档是
+// 荧黄字压荧黄底，中途落过一版 info tint。定稿收中性：文件↔目录由字形区分，不占任何色位。
+test("desktop chat directory icon uses semantic theme colors", () => {
+  assert.match(
+    css,
+    /\.att \.gly--directory \{[^}]*color: var\(--ow-text-2\);[^}]*background: var\(--ow-surface-2\);[^}]*\}/s,
+  )
+  assert.doesNotMatch(css, /\.att \.gly--directory \{[^}]*var\(--ow-primary/s)
+  assert.doesNotMatch(css, /\.att \.gly--directory \{[^}]*var\(--ow-info/s)
+  assert.match(css, /\.att \.gly--directory svg \{[^}]*width: 16px;[^}]*height: 16px;[^}]*\}/s)
+})
+
+test("desktop chat file icon uses semantic theme colors", () => {
+  assert.match(css, /\.att \.gly--file \{[^}]*color: var\(--ow-text-3\);[^}]*background: var\(--ow-surface\);[^}]*\}/s)
+  assert.match(css, /\.att \.gly--file svg \{[^}]*width: 16px;[^}]*height: 16px;[^}]*\}/s)
+})
+
+// W3 芯片统一：skill 蓝 / mcp 绿双色分类退役，两类同落 info tint，类别只由图标区分。
+test("desktop chat context chips collapse to one info tint", () => {
+  assert.match(
+    css,
+    /\.turn-context-chip \{[^}]*border:\s*var\(--ow-border-width-thin, 1px\) solid var\(--ow-info-tint-border\);[^}]*background: var\(--ow-mention-bg\); color: var\(--ow-mention-text\);[^}]*\}/s,
+  )
+  assert.match(
+    css,
+    /\.turn-context-chip--skill, \.turn-context-chip--mcp \{[^}]*background: var\(--ow-mention-bg\);[^}]*color: var\(--ow-mention-text\);[^}]*\}/s,
+  )
+  // 旧四色分类不得回流
+  assert.doesNotMatch(css, /\.turn-context-chip--(?:skill|mcp) \{[^}]*var\(--ow-(?:primary|success|warning|error)-/s)
+  assert.doesNotMatch(css, /\.turn-context-chip--(?:skill|mcp) \{[^}]*#[0-9a-f]{3,8}/i)
+  // 类别图标：skill=火花，mcp=连接器机架（不再是裸 @ 文本）
+  assert.match(source, /context\.kind === "skill" \? <Skill \/> : <Server \/>/)
+})
+
+// §7 豁免登记：两件都是非控件的真 chip，999 胶囊成立；高度并到 24 一档（原 source 22）。
+test("desktop chat transcript chips share one 24px height", () => {
+  assert.match(css, /\.turn-context-chip \{\s*height: 24px;/)
+  assert.match(css, /\.turn-source-chip \{ height: 24px;/)
+  assert.doesNotMatch(css, /\.turn-source-chip \{ height: 22px;/)
+  // 中性 chip 上不留孤立功能色（R1）
+  assert.match(css, /\.turn-source-chip svg \{[^}]*color: currentColor;[^}]*\}/)
+})
+
+test("compressed chat groups use a collapsed accessible boundary owned by ow-ui", () => {
+  assert.match(
+    source,
+    /return <DesktopChatCompressionDivider id=\{id\} text=\{text\} time=\{time\} onCopy=\{onCopy\} trailing=\{trailing\} \/>/,
+  )
+  assert.match(source, /export function DesktopChatCompressionDivider/)
+  assert.match(source, /defaultExpanded = false/)
+  // DS2 P5：边界行本体并入 CompressionDivider（aria-expanded/aria-controls/hidden 由该件承担），
+  // 桌面件只留 turn 组外壳与详情区卡面。
+  assert.match(source, /import \{ CompressionDivider \} from ['"]\.\.\/\.\.\/\.\.\/composite\/TranscriptDividers['"]/)
+  assert.match(source, /<CompressionDivider[\s\S]*?detailsClassName="compression-divider__details"/)
+  assert.match(source, /expanded=\{expanded\}/)
+  assert.match(source, /onExpandedChange=\{handleExpandedChange\}/)
+  assert.match(publicApi, /export \* from ['"]\.\/DesktopChatTurnView['"]/)
+})
+
+test("backend reconnect uses a calm collapsed status boundary owned by ow-ui", () => {
+  assert.match(source, /export function DesktopChatReconnectDivider/)
+  assert.match(source, /label = ["']连接响应异常，正在尝试重新连接["']/)
+  assert.match(source, /defaultExpanded = false/)
+  assert.match(source, /className="reconnect-divider__label" role="status" aria-live="polite"/)
+  assert.match(source, /aria-expanded=\{expanded\}/)
+  assert.match(source, /aria-controls=\{detailsId\}/)
+  assert.match(source, /hidden=\{!expanded\}/)
+  // DS2 P3：ErrorCard 并入 InlineMessage（variant="error"），错误详情走新原语
+  assert.match(source, /<InlineMessage variant="error"/)
+  assert.match(source, /title=\{errorTitle\}/)
+  assert.match(source, /meta=\{errorVersion\}/)
+  assert.match(source, /detail=\{detail\.trim\(\) \|\| undefined\}/)
+  assert.match(source, /\{errorMessage\?\.trim\(\)/)
+  assert.doesNotMatch(source, /<ErrorCard/)
+  assert.match(publicApi, /export \* from ['"]\.\/DesktopChatTurnView['"]/)
+})
+
+test("branch boundary delegates to the DS2 BranchDivider instead of its own markup", () => {
+  // DS2 P5：桌面分支分隔件降为薄兼容层，形态归 composite/TranscriptDividers 的 BranchDivider。
+  assert.match(branchDividerSource, /@deprecated/)
+  assert.match(
+    branchDividerSource,
+    /import \{ BranchDivider \} from ['"]\.\.\/\.\.\/\.\.\/composite\/TranscriptDividers['"]/,
+  )
+  assert.match(
+    branchDividerSource,
+    /<BranchDivider[\s\S]*?sourceTitle=\{sourceTitle\}[\s\S]*?onSourceClick=\{onSourceClick\}/,
+  )
+  assert.doesNotMatch(branchDividerSource, /className="branch-divider/)
+  // 旧共享 CSS 段随之删除，不留孤儿选择器
+  assert.doesNotMatch(css, /^\.branch-divider/m)
+  assert.doesNotMatch(css, /^\s*\.compression-divider__(?:line|trigger|label|action|chevron)/m)
+  assert.doesNotMatch(css, /^\s*\.compression-divider \{/m)
+})
+
+test("compressed chat boundary keeps its details surface on semantic theme tokens", () => {
+  assert.match(css, /\.turn\.turn--compressed-group \{ margin-bottom: 0; \}/)
+  assert.match(
+    css,
+    /\.compression-divider__details \{[^}]*border:\s*var\(--ow-border-width-thin, 1px\) solid var\(--ow-border\);[^}]*background: var\(--ow-surface\);[^}]*color: var\(--ow-text-2\);[^}]*\}/s,
+  )
+  assert.doesNotMatch(css, /\.turn--compressed-group \.bubble/)
+})
+
+test("backend reconnect boundary stays compact with an error-colored spinner", () => {
+  assert.match(
+    css,
+    /\.reconnect-divider \{[^}]*display: flex;[^}]*width: 100%;[^}]*margin:\s*var\(--ow-space-3, 12px\) 0;[^}]*\}/s,
+  )
+  assert.match(css, /\.reconnect-divider__line \{[^}]*background: var\(--ow-border\);[^}]*\}/s)
+  assert.match(css, /\.reconnect-divider__details > \.ow-error-card \{ margin: 0 auto; \}/)
+  // §9 旋转圈退役：手搓 reconnect-spin（自转 Loader 图标 1.2s）撤，转子改由锁定件
+  // BeaconSpinner 出（size 15 → <20px 小转子环）；共享 CSS 只留 error 着色。
+  assert.match(css, /\.reconnect-divider__spinner \{ color: var\(--ow-error\); \}/)
+  assert.doesNotMatch(css, /@keyframes reconnect-spin/)
+  assert.doesNotMatch(css, /animation:[^;]*reconnect-spin/)
+  assert.match(source, /<BeaconSpinner size=\{15\} className="reconnect-divider__spinner" aria-label="正在重连" \/>/)
+  assert.doesNotMatch(source, /<Loader\b/)
+})
+
+// ── W5 终扫 ──────────────────────────────────────────────────────────────
+test("§9 动效：流式尾点的弹跳退役，与 UserTurn caret 同一条纯 opacity 呼吸", () => {
+  assert.match(
+    css,
+    /\.turn--plain-agent \.bubble\.streaming \.stream-text::after \{[^}]*animation: ow-breathe var\(--ow-dur-spin\) var\(--ow-ease-beacon\) infinite;/s,
+  )
+  assert.doesNotMatch(css, /@keyframes stream-dot/)
+  assert.doesNotMatch(css, /animation: stream-dot/)
+  assert.match(
+    css,
+    /@media \(prefers-reduced-motion: reduce\) \{\s*\.turn--plain-agent \.bubble\.streaming \.stream-text::after \{ animation: none; \}/,
+  )
+})
+
+test("AI 轮无气泡：V1 不对称气泡圆角残迹清零", () => {
+  assert.doesNotMatch(css, /border-radius: var\(--ow-radius-modal\) var\(--ow-radius-modal\)/)
+  assert.match(css, /\.turn--agent \.bubble \{[^}]*background: transparent;/s)
+})