@orbit-work/ui 0.1.0

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

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { ToolCallRow } from "../ToolCallRow"
+import { AuthorizationCard } from "./index"
+
+const meta = {
+  title: "Chat/AuthorizationCard",
+  component: AuthorizationCard,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div style={{ maxWidth: 752 }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof AuthorizationCard>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** warning tint 三件套 ＋ 盾 ＋ 两枚钮（一期口径：允许一次 / 拒绝，「总是允许」等授权记忆） */
+export const Default: Story = {
+  args: {
+    source: "Filesystem 连接器",
+    scope: "读取 ~/Documents/orbit 下的文件，本次会话有效。",
+  },
+}
+
+/** 长 scope：text-wrap pretty 断行，两枚钮仍在一行 */
+export const LongScope: Story = {
+  args: {
+    source: "Shell 连接器",
+    scope:
+      "在 /home/terry/Coding/orbit 下执行 `pnpm test --filter chat`，会写入 node_modules/.cache 与 packages/ui/coverage 两个目录，不会改动源码。",
+  },
+}
+
+/** 行内停驻：卡直接落在这一段里，上方是等待授权的那条工具行（点走中性 --ow-pending，不占荧黄） */
+export const InSegment: Story = {
+  args: { source: "", scope: "" },
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
+      <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="write_file" args="~/Documents/orbit/report.md" state="pending" />
+      </div>
+      <AuthorizationCard source="Filesystem 连接器" scope="写入 ~/Documents/orbit/report.md，本次会话有效。" />
+    </div>
+  ),
+}

package/src/components/domain/chat/AuthorizationCard/AuthorizationCardSource.test.mjs

@@ -0,0 +1,80 @@
+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("./AuthorizationCard.stories.tsx", import.meta.url), "utf8")
+const barrel = await readFile(new URL("../index.ts", import.meta.url), "utf8")
+const tokens = await readFile(new URL("../../../../../styles/tokens.css", import.meta.url), "utf8")
+/** 剥注释后的源码：架构注释里复述规格（"Button size=\"sm\""、"总是允许"），计数类断言必须只看真代码 */
+const code = source.replace(/\/\*[\s\S]*?\*\//g, "").replace(/^\s*\/\/.*$/gm, "")
+
+// 原型模板 template.dc.html:1286-1300 —— 授权卡
+test("面＝warning tint 三件套：--ow-warning-tint 底 ＋ -tint-border 边 ＋ -on-tint 标题字", () => {
+  assert.match(source, /border: "1px solid var\(--ow-warning-tint-border\)"/)
+  assert.match(source, /background: "var\(--ow-warning-tint\)"/)
+  assert.match(source, /const titleStyle[\s\S]*?color: "var\(--ow-warning-on-tint\)"/)
+  assert.match(source, /const shieldStyle[\s\S]*?color: "var\(--ow-warning-on-tint\)"/)
+})
+
+test("三个 tint token 浅暗两档都有值（不靠回退色渲染）", () => {
+  for (const name of ["--ow-warning-tint", "--ow-warning-tint-border", "--ow-warning-on-tint"]) {
+    const hits = tokens.split("\n").filter((l) => l.trim().startsWith(`${name}:`)).length
+    assert.equal(hits, 2, `${name} 应在浅/暗两档各有一处定义，实为 ${hits}`)
+  }
+})
+
+test("padding 14 ＋ gap 10 ＋ --ow-radius-lg；贴地零影", () => {
+  assert.match(source, /gap: 10,\n\s+padding: 14/)
+  assert.match(source, /borderRadius: "var\(--ow-radius-lg\)"/)
+  assert.doesNotMatch(source, /boxShadow|--ow-shadow-/)
+})
+
+test("头行＝16px 盾（走 Icons.Shield，stroke 1.75）＋「{source} 请求授权」--ow-fs-ui/500", () => {
+  assert.match(source, /import \{ Shield \} from "\.\.\/\.\.\/\.\.\/composite\/Icons"/)
+  assert.match(source, /<Shield width=\{16\} height=\{16\} aria-hidden="true"/)
+  assert.match(source, /\{source\} 请求授权/)
+  assert.match(source, /const titleStyle[\s\S]*?fontSize: "var\(--ow-fs-ui\)",\n\s+fontWeight: 500/)
+})
+
+test("scope＝--ow-fs-ui/1.6 --ow-text ＋ text-wrap pretty", () => {
+  assert.match(
+    source,
+    /const scopeStyle[\s\S]*?fontSize: "var\(--ow-fs-ui\)",\n\s+lineHeight: 1\.6,\n\s+color: "var\(--ow-text\)",\n\s+textWrap: "pretty"/,
+  )
+})
+
+test("一期两枚钮（裁决 15）：允许一次＝primary 实底 · 拒绝＝1px --ow-border-strong 透明 ＋ --ow-error-on-tint 字；不出「总是允许」", () => {
+  assert.match(source, /<Button variant="primary" size="sm" onClick=\{onAllowOnce\}>\n\s+允许一次/)
+  assert.match(
+    source,
+    /variant="ghost"[\s\S]*?border border-\[color:var\(--ow-border-strong\)\] text-\[color:var\(--ow-error-on-tint\)\]/,
+  )
+  // §11-4：原型写的 --ow-danger 落在 warning tint 上浅档只有 4.29:1，改走同族 on-tint 语境色
+  assert.doesNotMatch(code, /var\(--ow-danger\)/)
+  assert.match(source, /拒绝/)
+  assert.doesNotMatch(code, /总是允许/)
+  // 行动极唯一：卡内只有一枚实底
+  assert.equal((code.match(/variant="primary"/g) || []).length, 1)
+})
+
+test("钮走 Button 正规变体（h28＝size sm ＋ --ow-radius-action），§6 状态与焦点环由 Button 承担；不走 unstyled 逃逸口、不自造死钮", () => {
+  assert.match(source, /import \{ Button \} from "\.\.\/\.\.\/\.\.\/primitives\/Button"/)
+  assert.doesNotMatch(code, /variant="unstyled"/)
+  assert.equal((code.match(/size="sm"/g) || []).length, 2)
+  assert.doesNotMatch(code, /<button/)
+})
+
+test("§4：卡内不含荧黄/行动极 token（primary 实底走 --ow-btn-primary-* 的 §15 开放槽）", () => {
+  assert.doesNotMatch(source, /var\(--ow-beacon|var\(--ow-accent-dot|var\(--ow-primary/)
+})
+
+test("story 覆盖：默认 / 长 scope / 段内停驻", () => {
+  for (const s of ["Default", "LongScope", "InSegment"]) {
+    assert.match(stories, new RegExp(`export const ${s}: Story`))
+  }
+})
+
+test("已进 chat 桶导出", () => {
+  assert.match(barrel, /export \* from "\.\/AuthorizationCard"/)
+})

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

@@ -0,0 +1,89 @@
+import type { CSSProperties } from "react"
+import { Shield } from "../../../composite/Icons"
+import { Button } from "../../../primitives/Button"
+
+export type AuthorizationCardProps = {
+  /** 请求方，如「Filesystem 连接器」；标题渲成「{source} 请求授权」 */
+  source: string
+  /** 要授的权，一句人话，如「读取 ~/Documents/orbit 下的文件」 */
+  scope: string
+  onAllowOnce?: () => void
+  onDeny?: () => void
+  className?: string
+}
+
+/**
+ * AuthorizationCard 授权卡（照原型模板 template.dc.html:1286-1300）。
+ *
+ * 行内停驻——跑到需要授权时，卡直接落在这一段里，不弹层不遮挡（§5 贴地零影）。
+ * - 面＝warning tint 三件套：底 `--ow-warning-tint` ＋ 1px `--ow-warning-tint-border`
+ *   ＋标题字 `--ow-warning-on-tint`（浅 5.13:1 / 暗 6.62:1——R2 ⑩ 把暗档 on-tint 从
+ *   #F0B65A 拉到 #E0A050 避开信标黄普查后的实测值，仍过 §11.4）；padding 14、gap 10、`--ow-radius-lg`
+ * - 头行＝16px 盾（stroke 1.75，`--ow-warning-on-tint`）＋「{source} 请求授权」`--ow-fs-ui`/500
+ * - scope＝`--ow-fs-ui`/1.6 `--ow-text`
+ * - 钮＝两枚 h28（Button size="sm"，`--ow-radius-action`＝8）：
+ *   「允许一次」primary 实底（行动极，卡内唯一实底）· 「拒绝」ghost（透明底 ＋ §6 全状态）
+ *   叠 1px `--ow-border-strong` 边与 `--ow-error-on-tint` 字
+ *
+ * 与原型的一处有意偏差：原型「拒绝」写 `--ow-danger`(=`--ow-error`)，落在 `--ow-warning-tint`
+ * 上浅档对比只有 4.29:1，不过 §11-4；本件改用同族的 tint 语境色 `--ow-error-on-tint`
+ * （浅 6.01:1 / 暗 6.88:1），与标题的 `--ow-warning-on-tint` 同一套 on-tint 口径。
+ *
+ * 一期只上两枚钮（裁决 15）：原型的第三枚「总是允许」要授权记忆存储与后端回执，
+ * `PermBlock`（packages/types/domain.ts:65）目前只有 source/scope，等授权 API 齐了再补。
+ * 回调可缺省——接线在 A9-B3（ChatCard.tsx:1129-1140 现为无 onClick 的死钮）。
+ */
+export function AuthorizationCard({ source, scope, onAllowOnce, onDeny, className = "" }: AuthorizationCardProps) {
+  return (
+    <div className={`ow-authorization-card ${className}`} data-slot="authorization-card" style={cardStyle}>
+      <div style={headStyle}>
+        <Shield width={16} height={16} aria-hidden="true" style={shieldStyle} />
+        <span style={titleStyle}>{source} 请求授权</span>
+      </div>
+      <div style={scopeStyle}>{scope}</div>
+      <div style={actionsStyle}>
+        <Button variant="primary" size="sm" onClick={onAllowOnce}>
+          允许一次
+        </Button>
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={onDeny}
+          className="border border-[color:var(--ow-border-strong)] text-[color:var(--ow-error-on-tint)]"
+        >
+          拒绝
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+const cardStyle: CSSProperties = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 10,
+  padding: 14,
+  border: "1px solid var(--ow-warning-tint-border)",
+  borderRadius: "var(--ow-radius-lg)",
+  background: "var(--ow-warning-tint)",
+  fontFamily: "var(--ow-font-body)",
+}
+
+const headStyle: CSSProperties = { display: "flex", alignItems: "center", gap: 8 }
+
+const shieldStyle: CSSProperties = { flex: "0 0 auto", color: "var(--ow-warning-on-tint)" }
+
+const titleStyle: CSSProperties = {
+  fontSize: "var(--ow-fs-ui)",
+  fontWeight: 500,
+  color: "var(--ow-warning-on-tint)",
+}
+
+const scopeStyle: CSSProperties = {
+  fontSize: "var(--ow-fs-ui)",
+  lineHeight: 1.6,
+  color: "var(--ow-text)",
+  textWrap: "pretty",
+}
+
+const actionsStyle: CSSProperties = { display: "flex", alignItems: "center", gap: 8 }

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

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { ChatBubble } from "./index"
+
+/**
+ * @deprecated 用户轮已并入 `Chat/UserTurn`。本组只保留兼容层的最小证明：
+ * 旧调用点转成**不挂脊柱节点的 UserTurn**——原话照 UserTurn 当前配方渲出（R3 起是
+ * 纯文字：无底无边无圆角、13/1.7、最宽 78%；A9-B2 的井色气泡已撤），脊线节点不出。
+ * 本件不自持形态，UserTurn 改什么这里就长什么——文档只说「转 UserTurn」，不再复述配方。
+ */
+const meta = {
+  title: "Chat/ChatBubble (deprecated)",
+  component: ChatBubble,
+  parameters: { layout: "padded" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof ChatBubble>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** 兼容层：转成不挂脊柱节点的 UserTurn——原话照 UserTurn 当前配方渲出（R3：纯文字），脊线节点不出。 */
+export const Compat: Story = {
+  args: {
+    children: "帮我核对 Q3 渠道复盘引用的 14 份来源。",
+  },
+}
+
+/** 多行原话同样保留换行。 */
+export const Multiline: Story = {
+  args: {
+    children: "三件事：\n1. 换成中位数口径；\n2. 时间轴补到 Q3 末；\n3. 结论段别超过 200 字。",
+  },
+}

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

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react"
+import { UserTurn } from "../UserTurn"
+
+export type ChatBubbleProps = {
+  children: ReactNode
+  /** Additional className */
+  className?: string
+}
+
+/**
+ * @deprecated DS2 已把用户轮并入 `UserTurn`（蓝图批次③：ChatBubble +
+ * DesktopChatUserTurnView → UserTurn）。用户轮的形态由 `UserTurn` 独家持有——R3
+ *（2026-09-04）起是**纯文字原话**（无底无边无圆角，13/1.7，最宽 78%，角色靠脊柱节点
+ * 形状区分；原 A9-B2 的井色气泡整枚撤）；本件不自持任何形态，只作薄兼容层转成不挂
+ * 脊柱节点的 `UserTurn`（原话照出，脊线节点不出）；新代码直接用 `UserTurn`。
+ */
+export function ChatBubble({ children, className = "" }: ChatBubbleProps) {
+  /* W5 终扫修：原来还挂一个 `ow-chat-bubble-wrap` 类，全仓无任何样式消费（死钩子），已删。 */
+  return (
+    <UserTurn node={false} className={className}>
+      {children}
+    </UserTurn>
+  )
+}

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

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { ChatMessage } from "./index"
+
+/**
+ * @deprecated 助手轮已并入 `Chat/AgentTurn`。本组只保留兼容层的最小证明：
+ * 旧调用点渲染出来的是不挂节点、无署名行的 AgentTurn。
+ */
+const meta = {
+  title: "Chat/ChatMessage (deprecated)",
+  component: ChatMessage,
+  parameters: { layout: "padded" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof ChatMessage>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** 兼容层：正文排版照 AgentTurn 的正文槽。 */
+export const Compat: Story = {
+  args: {
+    children: "14 份来源里有 3 份的数据停在 2025 年 12 月，我按新口径重算了均值。",
+  },
+}
+
+/** 免责声明仍从旧 props 透传到 AgentTurn 的 disclaimer 槽。 */
+export const WithDisclaimer: Story = {
+  args: {
+    children: "结论段我压到了 180 字。",
+    disclaimer: "内容由模型生成，重要数字请自行复核。",
+  },
+}

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

@@ -0,0 +1,23 @@
+import type { ReactNode } from "react"
+import { AgentTurn } from "../AgentTurn"
+
+export type ChatMessageProps = {
+  children: ReactNode
+  /** Optional disclaimer text below the message */
+  disclaimer?: string
+  className?: string
+}
+
+/**
+ * @deprecated DS2 已把助手轮并入 `AgentTurn`（蓝图批次③：ChatMessage +
+ * DesktopChatAgentTurnView + AgentBlockView → AgentTurn）。本件只作薄兼容层，
+ * 转成不挂脊柱节点、无署名行的 `AgentTurn`；新代码直接用 `AgentTurn`。
+ */
+export function ChatMessage({ children, disclaimer, className = "" }: ChatMessageProps) {
+  /* W5 终扫修：原来还挂一个 `ow-chat-message` 类，全仓无任何样式消费（死钩子），已删。 */
+  return (
+    <AgentTurn node={false} byline={false} disclaimer={disclaimer} className={className}>
+      {children}
+    </AgentTurn>
+  )
+}

package/src/components/domain/chat/ChatR2ReviewSource.test.mjs

@@ -0,0 +1,98 @@
+import assert from "node:assert/strict"
+import { readFile } from "node:fs/promises"
+import test from "node:test"
+
+/**
+ * R2 复审批（chat 簇）——本文件只收「原本没有源码守卫、这一轮才补上」的那几条，
+ * 已有 *Source.test.mjs 的组件各自在自己的文件里加。
+ */
+const read = (rel) => readFile(new URL(rel, import.meta.url), "utf8")
+
+// ── 退役件的标注与文档口径 ──────────────────────────────────
+
+// R3（2026-09-04，Terry 意见 2）撤掉用户轮的井色气泡后，兼容层的口径只剩一句：
+// 本件不持有任何形态，只把旧调用点转成**不挂脊柱节点的 UserTurn**，形态一律以 UserTurn 为准。
+test("ChatBubble 兼容层不自持形态：只转 UserTurn（node=false），气泡配方 R3 已整枚撤", async () => {
+  const impl = await read("./ChatBubble/index.tsx")
+  const stories = await read("./ChatBubble/ChatBubble.stories.tsx")
+  const userTurn = await read("./UserTurn/index.tsx")
+  // 兼容层零配方：去注释后的代码里没有底/边/圆角/内距任何一件
+  const implCode = impl.replace(/\/\*[\s\S]*?\*\//g, "")
+  assert.match(implCode, /<UserTurn node=\{false\} className=\{className\}>/)
+  assert.doesNotMatch(implCode, /--ow-bubble-user|border|radius|rounded|px-|py-/)
+  // story 只证「转成不挂脊柱节点的 UserTurn」这一件事，不另立第二套形态说法
+  assert.match(stories, /不挂脊柱节点的 UserTurn/)
+  // 实现侧（UserTurn）已无井色气泡：底/边/皮肤钩子三件都不在代码里
+  const turnCode = userTurn.replace(/\/\*[\s\S]*?\*\//g, "").replace(/^[ \t]*\/\/.*$/gm, "")
+  assert.doesNotMatch(turnCode, /--ow-bubble-user|--ow-chat-user-bubble-/)
+})
+
+test("同簇退役件的 story 标题都带 (deprecated) 后缀", async () => {
+  for (const rel of [
+    "./ChatBubble/ChatBubble.stories.tsx",
+    "./ChatThinking/ChatThinking.stories.tsx",
+    "./Chatbot/Chatbot.stories.tsx",
+  ]) {
+    const stories = await read(rel)
+    assert.match(stories, /title: "Chat\/\w+ \(deprecated\)"/, `${rel} 的 story 标题缺 (deprecated)`)
+  }
+})
+
+// ── 脊柱语言：节点环心跟壳地色 ──────────────────────────────
+
+test("TranscriptSpine 的用户轮空心环环心读壳注入的地色，与 UserTurn 同源", async () => {
+  const spine = await read("./TranscriptSpine/index.tsx")
+  assert.match(spine, /background: "var\(--ow-turn-ground, var\(--ow-surface\)\)"/)
+})
+
+// ── 读数与 token 归阶 ──────────────────────────────────────
+
+test("PlanCard 的字号/圆角走 --ow-fs-* / --ow-radius-*，不留裸 px", async () => {
+  const plan = await read("./PlanCard/index.tsx")
+  assert.match(plan, /borderRadius: "var\(--ow-radius-card\)"/)
+  for (const token of ["--ow-fs-ui", "--ow-fs-mark-md", "--ow-fs-mark-sm", "--ow-fs-caption", "--ow-fs-eyebrow-cjk"]) {
+    assert.ok(plan.includes(token), `PlanCard 缺 ${token}`)
+  }
+  assert.doesNotMatch(plan, /fontSize: \d/)
+})
+
+test("ContextUsage 的危险档走 --ow-error，不走兼容别名 --ow-danger", async () => {
+  const usage = await read("./ContextUsage/index.tsx")
+  assert.match(usage, /if \(value >= 0\.85\) return "var\(--ow-error\)"/)
+  assert.doesNotMatch(usage, /return "var\(--ow-danger\)"/)
+})
+
+// ── ArtifactCard：§12 锁定件本体不动，只核 fixture 的字阶 ──
+
+test("ArtifactCard 的执行摘要行 fixture 走 --ow-fs-* 档，不留半像素裸字号", async () => {
+  const stories = await read("./ArtifactCard/ArtifactCard.stories.tsx")
+  assert.doesNotMatch(stories, /fontSize: 1[02]\.5/)
+  assert.match(stories, /fontSize: "var\(--ow-fs-caption\)"/)
+  assert.match(stories, /fontSize: "var\(--ow-fs-mark-sm\)"/)
+})
+
+// ── fixture：录音态主故事要有真电平，不能渲成静止点阵 ──────
+
+test("ComposerVoiceInput 的 Listening 主故事带电平", async () => {
+  const stories = await read("./Composer/parts/ComposerVoiceInput.stories.tsx")
+  const listening = /export const Listening: Story = \{[\s\S]*?\n\}/.exec(stories)
+  assert.ok(listening, "找不到 Listening story")
+  assert.match(listening[0], /levels: \[/)
+})
+
+// ── fixture：不留 render 不消费的死 args ─────────────────
+
+test("MessageActions 的 story 不留被 render 忽略的死 args", async () => {
+  const stories = await read("./MessageActions/MessageActions.stories.tsx")
+  assert.doesNotMatch(stories, /args: \{ visible: true \},\s*\n\s*render: \(\) => \(/)
+})
+
+// ── chip 形状：无点无计数一律 6 直角 ─────────────────────
+
+test("UserTurn 的上下文/来源 chip 同形同高：6 直角（--ow-radius-tag）＋ 24", async () => {
+  const stories = await read("./UserTurn/UserTurn.stories.tsx")
+  assert.doesNotMatch(stories, /borderRadius: "var\(--ow-radius-pill\)"/)
+  const tagCount = (stories.match(/var\(--ow-radius-tag\)/g) ?? []).length
+  assert.ok(tagCount >= 2, "两枚只读 chip 都应落 --ow-radius-tag")
+  assert.doesNotMatch(stories, /height: 22,/)
+})

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

@@ -0,0 +1,125 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Doc as Code } from "../../../composite/Icons"
+import { ChatThinking } from "./index"
+
+/**
+ * @deprecated 纯思考行请改用 `Chat/Thinking`（见 index.tsx 的 @deprecated）。
+ * 侧栏标题带 "(deprecated)" 后缀，与同簇 ChatBubble / ChatMessage / Chatbot 三件对齐。
+ *
+ * R4 · 2026-09-04（Terry：一种「步骤」只留一种说法）——本件已是 `Thinking` inline 变体的
+ * **薄包装**，自己不再持有任何形态：`<div data-slot="chat-thinking">` 里就一个
+ * `<Thinking variant="inline">`，`title` → `label`（思考类标题按 loading 归一成
+ * 「正在思考 / 已思考」）、`loading` → `spinning`、`children` → 可折叠的思考正文。
+ * 所以下面每一张 story 看到的都是转录里那条整画布信标行 ＋ 行尾 chevron，
+ * 不再是旧的 15px 小记号 ＋ 自搓披露壳。原型口径见 template.dc.html:1196-1217。
+ */
+const meta = {
+  title: "Chat/ChatThinking (deprecated)",
+  component: ChatThinking,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof ChatThinking>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/* 演示正文的排版口径（§7/§8）：字号走 --ow-fs-ui（13）密度档，不写裸 14；
+   中文按同事口吻的短句，不用英文 lorem。
+   R4：展开体的缩进/竖线/行高由 `Thinking` 自己给（挂在信标中线下的 1px --ow-border-strong
+   右侧），宿主这层不再补 padding——补了就是第二层缩进。 */
+const bodyStyle = {
+  fontSize: "var(--ow-fs-ui)",
+  lineHeight: 1.6,
+} as const
+
+/** 缺省折叠：`title` 缺省是「思考过程」，收口后归一读作「已思考」；行尾 ChevRight。 */
+export const DefaultCollapsed: Story = {
+  args: {
+    defaultExpanded: false,
+    children: (
+      <div style={bodyStyle}>
+        {/* 展开体自带左竖线与缩进，列表的 marker 会被 reset 的 padding:0 裁到线外——
+            所以这里把项目符号写进正文，不靠 ul/ol 的 marker。 */}
+        <p style={{ margin: "0 0 6px" }}>先看一遍这个仓库的目录分层。</p>
+        <p style={{ margin: "0 0 6px" }}>有三条路子能实现，各有取舍：</p>
+        <p style={{ margin: "0 0 4px" }}>· 改现成的组件，改动面最小</p>
+        <p style={{ margin: "0 0 4px" }}>· 抽一层新的抽象，后面好复用</p>
+        <p style={{ margin: 0 }}>· 直接用已有的工具函数拼</p>
+      </div>
+    ),
+  },
+}
+
+/** 展开：正文落在竖线右侧，chevron 翻成 ChevDown。 */
+export const DefaultExpanded: Story = {
+  args: {
+    defaultExpanded: true,
+    children: (
+      <div style={bodyStyle}>
+        <p style={{ margin: "0 0 6px" }}>把这件事拆成四步：</p>
+        <p style={{ margin: "0 0 4px" }}>1. 读一遍现在的实现</p>
+        <p style={{ margin: "0 0 4px" }}>2. 理清依赖</p>
+        <p style={{ margin: "0 0 4px" }}>3. 定接口</p>
+        <p style={{ margin: 0 }}>4. 动手改</p>
+      </div>
+    ),
+  },
+}
+
+/** 跑动中：`loading` → `spinning`，卫星着 --ow-beacon 占状态极；`loadingLabel` 顶掉标题词。 */
+export const Loading: Story = {
+  args: {
+    defaultExpanded: true,
+    loading: true,
+    loadingLabel: "正在读代码结构",
+  },
+}
+
+/** 非思考类标题原样透传成 label（不归一成「正在思考 / 已思考」）。 */
+export const CustomTitle: Story = {
+  args: {
+    title: "实现方案",
+    defaultExpanded: true,
+    children: <div style={{ ...bodyStyle, color: "var(--ow-text-2)" }}>先按最小改动的路子来，跑通再考虑抽抽象。</div>,
+  },
+}
+
+/**
+ * R4 起 `icon` 是 no-op：图标固定为信标，转录里不再有第二种思考记号。
+ * 这张 story 留着是为了证明**旧调用点传了 icon 也不会渲出别的形**——传进来的 `<Code />` 不出现。
+ */
+export const CustomIcon: Story = {
+  args: {
+    icon: <Code />,
+    title: "代码分析",
+    defaultExpanded: true,
+    children: (
+      <div
+        style={{
+          ...bodyStyle,
+          /* 代码正文走 mono 族 token（§7 代码 13 mono），不写 "monospace" 裸值 */
+          fontFamily: "var(--ow-font-mono)",
+          fontSize: "var(--ow-fs-code)",
+          color: "var(--ow-text-2)",
+        }}
+      >
+        <pre style={{ margin: 0 }}>
+          {`function analyze(code) {
+  const ast = parse(code)
+  return findPatterns(ast)
+}`}
+        </pre>
+      </div>
+    ),
+  },
+}
+
+/** 空正文：`children` 为 null ＝ 不可折叠，行尾不出 chevron（§6 交互态只属真的可交互件）。 */
+export const EmptyContent: Story = {
+  args: {
+    defaultExpanded: true,
+    children: null,
+  },
+}

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

@@ -0,0 +1,55 @@
+"use client"
+
+import type { ReactNode } from "react"
+import { Thinking } from "../Thinking"
+
+export type ChatThinkingProps = {
+  title?: ReactNode
+  children?: ReactNode
+  loading?: boolean
+  loadingLabel?: string
+  defaultExpanded?: boolean
+  expanded?: boolean
+  onExpandedChange?: (expanded: boolean) => void
+  /** @deprecated R4 起图标固定为信标（Thinking inline），本项忽略 */
+  icon?: ReactNode
+  className?: string
+}
+
+/**
+ * @deprecated 思考行归口 `domain/chat/Thinking` 的 inline 变体（R4 · 2026-09-04）。
+ * 本件只剩一层映射：`title` → `label`（思考类标题按 loading 归一成「正在思考 / 已思考」）、
+ * `loading` → `spinning`、`children` → 可折叠的思考正文。宿主（apps/desktop ChatCard 的
+ * AgentProcessChain、`DesktopChatAgentTurnView` 的 `thinking` 槽）零改动即换成与整屏
+ * story 同一种思考行——原来这里是 15px 小记号 ＋ 自搓披露壳，与转录里 Thinking 的
+ * 24px 信标是两套语言。新代码直接用 `<Thinking variant="inline">`。
+ */
+export function ChatThinking({
+  title = "思考过程",
+  children,
+  loading = false,
+  defaultExpanded = false,
+  loadingLabel,
+  expanded,
+  onExpandedChange,
+  className = "",
+}: ChatThinkingProps) {
+  const isThinkingTitle =
+    typeof title === "string" &&
+    ["思考过程", "思考中", "正在思考", "正在生成", "正在生成…", "正在生成..."].includes(title)
+  const statusTitle = isThinkingTitle ? (loading ? "正在思考" : "已思考") : loading ? (loadingLabel ?? title) : title
+  return (
+    <div data-slot="chat-thinking" className={className}>
+      <Thinking
+        variant="inline"
+        spinning={loading}
+        label={typeof statusTitle === "string" ? statusTitle : undefined}
+        defaultExpanded={defaultExpanded}
+        expanded={expanded}
+        onExpandedChange={onExpandedChange}
+      >
+        {children}
+      </Thinking>
+    </div>
+  )
+}

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

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { EmptyState } from "../../../primitives/EmptyState"
+import { AgentTurn } from "../AgentTurn"
+import { UserTurn } from "../UserTurn"
+import { Chatbot } from "./index"
+
+/**
+ * @deprecated 会话壳已并入 `Chat/Transcript`。本组只保留兼容层的最小证明：
+ * 旧调用点拿到的是脊线贯穿的 Transcript。
+ */
+const meta = {
+  title: "Chat/Chatbot (deprecated)",
+  component: Chatbot,
+  parameters: { layout: "fullscreen" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Chatbot>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const SampleHeader = () => (
+  <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "0 12px" }}>
+    <span style={{ font: "500 var(--ow-fs-ui)/1 var(--ow-font-sans)", color: "var(--ow-text)" }}>Q3 渠道复盘</span>
+    <span style={{ font: "400 var(--ow-fs-mark-md)/1 var(--ow-font-sans)", color: "var(--ow-text-3)" }}>在线</span>
+  </div>
+)
+
+/** 兼容层：轮次照旧塞 children，脊线由 Transcript 画。 */
+export const Compat: Story = {
+  args: {
+    header: <SampleHeader />,
+    children: (
+      <>
+        <UserTurn text="把复盘结论压到 200 字以内。" />
+        <AgentTurn name="Orbitwork" meta="2 步 · 21s">
+          压到了 186 字，三个结论各一句。
+        </AgentTurn>
+      </>
+    ),
+  },
+}
+
+/** 空态走 EmptyState 原语（信标 mono 母题＋一句人话，禁插画禁 emoji）。 */
+export const Empty: Story = {
+  args: {
+    header: <SampleHeader />,
+    empty: <EmptyState message="还没有对话。说说你要做什么，我从这里开始。" />,
+  },
+}