@orbit-work/ui 0.1.0

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

@@ -0,0 +1,196 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { useState } from "react"
+import { Thinking } from "./index"
+
+const meta = {
+  title: "Chat/Thinking",
+  component: Thinking,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Thinking>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** 运转态：完整五点构型公转 1.6s linear，卫星 var(--ow-beacon) 占状态极（每屏限一处）。 */
+export const Default: Story = {
+  args: {
+    label: "正在核对 14 份来源，比对引用页码",
+  },
+}
+
+/** 静止态：转完当前圈停在 +24°，整体落为 text-3 单色，不再占极。 */
+export const Static: Story = {
+  args: {
+    spinning: false,
+    label: "思考收尾——转完当前圈，停在 +24°",
+  },
+}
+
+export const NoLabel: Story = {
+  args: {},
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div style={{ display: "flex", alignItems: "center", gap: 32 }}>
+      <Thinking size={64} label="size=64" />
+      <Thinking size={48} label="size=48（默认）" />
+      <Thinking size={24} label="size=24" />
+    </div>
+  ),
+}
+
+/** 切换 spinning 观察收笔时序：转完当前圈 → 120ms 落到 +24°。 */
+export const SpinningToggle: Story = {
+  render: function SpinningToggle() {
+    const [spinning, setSpinning] = useState(true)
+    return (
+      <div style={{ display: "flex", alignItems: "center", gap: 24 }}>
+        <Thinking spinning={spinning} label={spinning ? "正在思考" : "已思考"} />
+        <button type="button" onClick={() => setSpinning((s) => !s)}>
+          {spinning ? "停止（收笔）" : "继续思考"}
+        </button>
+      </div>
+    )
+  },
+}
+
+/** transcript 语境：思考行 + mono/tabular-nums 步数耗时读数。 */
+export const WithReadout: Story = {
+  render: () => (
+    <div
+      style={{
+        background: "var(--ow-surface)",
+        border: "1px solid var(--ow-border)",
+        borderRadius: 12,
+        padding: 16,
+        display: "flex",
+        flexDirection: "column",
+        gap: 16,
+      }}
+    >
+      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+        <Thinking label="正在核对 14 份来源，比对引用页码" />
+        <span
+          style={{
+            fontFamily: "var(--ow-font-mono)",
+            fontVariantNumeric: "tabular-nums",
+            fontSize: 10,
+            color: "var(--ow-text-2)",
+          }}
+        >
+          第 3 步 · 2m40s
+        </span>
+      </div>
+      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+        <Thinking spinning={false} label="已思考" />
+        <span
+          style={{
+            fontFamily: "var(--ow-font-mono)",
+            fontVariantNumeric: "tabular-nums",
+            fontSize: 10,
+            color: "var(--ow-text-2)",
+          }}
+        >
+          共 5 步 · 4m02s
+        </span>
+      </div>
+    </div>
+  ),
+}
+
+/**
+ * inline 变体（转录里的思考行，原型模板 template.dc.html:1196-1217）：**整画布信标**（`INLINE_SIZE`，眼下 28）
+ * ＋ gap 10 ＋ fs-ui/1.6 text-2 一句话。不给 `children` 就没有 chevron、不折叠。卫星＝状态极。
+ *
+ * R4 · 2026-09-04（Terry）：原型 1196 那张 40×25 的裁切画布只在静止 0° 时装得下五点，
+ * 一转起来卫星（r 10.4）就出右沿与底沿——Terry 两次看到「logo 被裁」。改用 `BeaconSpinner`
+ * 的 96 整画布缩到 24：公转圆整个在画布里，静止收笔照规格卡 +24°，**什么姿态都不裁**。
+ */
+export const Inline: Story = {
+  args: {
+    variant: "inline",
+    label: "先把组件库里已有的零件数清楚，再决定补哪几件。",
+  },
+}
+
+/** inline 静止态：整组落 text-3 单色，停在 +24°（整画布装得下这个姿态），不占极。 */
+export const InlineStill: Story = {
+  args: {
+    variant: "inline",
+    spinning: false,
+    label: "已经数清楚了：聊天域现有 22 件组件，缺三件。",
+  },
+}
+
+/** inline 让极：同段有工具在跑时，卫星退成无彩 --ow-text-2（原型 logic:3850 的记账）。 */
+export const InlineToolRunning: Story = {
+  args: {
+    variant: "inline",
+    toolRunning: true,
+    label: "按原型模板逐值核对三件缺件的尺寸与 token。",
+  },
+}
+
+/** inline 三态并排对照：运转占极 / 让极 / 静止。 */
+export const InlineStates: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 14, maxWidth: 560 }}>
+      <Thinking variant="inline" label="运转 · 卫星＝var(--ow-beacon)，占状态极" />
+      <Thinking variant="inline" toolRunning label="让极 · 卫星退 var(--ow-text-2)，极归工具行" />
+      <Thinking variant="inline" spinning={false} label="静止 · 整组 var(--ow-text-3) 单色，不占极" />
+    </div>
+  ),
+}
+
+/* 思考正文的排版由件自己给（text-3 13/1.7，挂在信标中线下的 1px --ow-border-strong 竖线右侧），
+   宿主只管把段落塞进来——这里按同事口吻写几句真的推理，不用英文 lorem。 */
+const REASONING = (
+  <>
+    <p style={{ margin: "0 0 6px" }}>先数一遍 chat 域现有的件：22 件，其中 3 件是兼容层。</p>
+    <p style={{ margin: "0 0 6px" }}>缺的是执行摘要卡、跑动中的工具行、授权卡——原型 1219-1250 那一段全靠它们。</p>
+    <p style={{ margin: "0 0 6px" }}>先补摘要卡，因为工具行要挂在它的展开体里，顺序反了要返工。</p>
+    <p style={{ margin: 0 }}>授权卡放最后，它只跟 live 段有关，不阻塞前两件。</p>
+  </>
+)
+
+/**
+ * R4 · 2026-09-04（Terry：思考要能折叠展开）——给了 `children` 的 inline 行：行尾长出
+ * 14px ChevRight，整行成披露触发器。**缺省折叠**：思考过程是过程，不是答案。
+ * 与工具调用行（`ExecutionSummaryRow`）、摘要卡头行用的是同一枚 chevron 记号，
+ * 转录里「可展开」只有这一种说法。
+ */
+export const InlineWithReasoning: Story = {
+  args: {
+    variant: "inline",
+    spinning: false,
+    label: "已思考",
+    children: REASONING,
+  },
+}
+
+/**
+ * 展开后：chevron 翻成 ChevDown，正文挂在信标中线（x=12）下的 1px `--ow-border-strong`
+ * 竖线右侧，起点与上面那句 label 的左沿对齐（24/2 ＋ gap 10）。正文 `--ow-text-3` 13/1.7。
+ */
+export const InlineWithReasoningExpanded: Story = {
+  args: {
+    variant: "inline",
+    spinning: false,
+    label: "已思考",
+    defaultExpanded: true,
+    children: REASONING,
+  },
+}
+
+/** 边转边可展开：卫星仍占状态极（--ow-beacon），公转全程不出画布，chevron 照常在行尾。 */
+export const InlineSpinningWithReasoning: Story = {
+  args: {
+    variant: "inline",
+    label: "正在思考",
+    children: REASONING,
+  },
+}

package/src/components/domain/chat/Thinking/ThinkingInlineSource.test.mjs

@@ -0,0 +1,154 @@
+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("./Thinking.stories.tsx", import.meta.url), "utf8")
+const beacon = await readFile(new URL("../../../composite/BeaconSpinner/index.tsx", import.meta.url), "utf8")
+const chatThinking = await readFile(new URL("../ChatThinking/index.tsx", import.meta.url), "utf8")
+const artifact = await readFile(new URL("../ArtifactCard/index.tsx", import.meta.url), "utf8")
+
+// 原型模板 template.dc.html:1196-1217 —— 转录里的思考行
+//
+// R4 · 2026-09-04（Terry 两次看到「logo 被裁」）：原型 1196 那张 40×25 的裁切画布只在
+// 静止 0° 时装得下五点，一转起来卫星（r 10.4）就出右沿与底沿。inline 改用锁定件
+// `BeaconSpinner` 的 96 整画布缩到 24–32 一档——公转圆整个在画布里，静止收笔照规格卡 +24°，
+// 什么姿态都不裁。姿态规则从此只锁在 BeaconSpinner 身上，本件不再自搓 svg。
+test("inline 变体＝整画布 BeaconSpinner（24–32 一档），不再自搓 40×25 裁切 svg", () => {
+  assert.match(source, /variant\?: "block" \| "inline"/)
+  // 只锁「整画布 ＋ 落在 24–32 这一档」：具体取 24 / 28 / 32 是 R4 待裁的一项
+  // （见 index.tsx 的 INLINE_SIZE 注释 / ACCEPTANCE-PENDING）；<20 会掉进小转子环那一支。
+  const inlineSize = /const INLINE_SIZE = (\d+)/.exec(source)
+  assert.ok(inlineSize, "找不到 INLINE_SIZE")
+  assert.ok(Number(inlineSize[1]) >= 24 && Number(inlineSize[1]) <= 32, `INLINE_SIZE=${inlineSize?.[1]} 越档`)
+  assert.match(source, /<BeaconSpinner\n\s+size=\{INLINE_SIZE\}/)
+  // 裁切画布与自搓 svg 整枚退役
+  assert.doesNotMatch(source, /viewBox="13 11\.7/)
+  assert.doesNotMatch(source, /width="40"/)
+  assert.doesNotMatch(source, /<svg/)
+  // 姿态（+24° 收笔基线）只属 BeaconSpinner，本件不复写
+  assert.doesNotMatch(source, /rotate\(24deg\)/)
+  assert.doesNotMatch(source, /rotate\(0deg\)/)
+  assert.match(beacon, /transform: "rotate\(24deg\)"/)
+})
+
+test("行＝flex 居中 ＋ gap 10；文案 --ow-fs-ui/1.6 --ow-text-2，无标题词", () => {
+  assert.match(source, /const INLINE_GAP = 10/)
+  assert.match(
+    source,
+    /const inlineRow: CSSProperties = \{ display: "flex", alignItems: "center", gap: INLINE_GAP, minWidth: 0 \}/,
+  )
+  assert.match(
+    source,
+    /const inlineLabel: CSSProperties = \{[\s\S]*?fontSize: "var\(--ow-fs-ui\)",\n\s+lineHeight: 1\.6,\n\s+color: "var\(--ow-text-2\)"/,
+  )
+  // 无标题词：inline 行只渲一个 {label}，「正在思考/已思考」只作 aria-label
+  assert.match(source, /\{label && <span style=\{inlineLabel\}>\{label\}<\/span>\}/)
+  assert.doesNotMatch(source, />(?:已思考|正在思考)</)
+})
+
+// R4（Terry：思考要能折叠展开）——转录里所有可展开的东西用同一枚图标集 chevron，
+// 不再有 ▸/▾ 文字字形，也不再有第二套自搓披露壳。
+test("给了 children 才可折叠：行尾 14px ChevRight/ChevDown，缺省折叠，整行成披露钮", () => {
+  assert.match(source, /children\?: ReactNode/)
+  assert.match(source, /defaultExpanded\?: boolean/)
+  assert.match(source, /expanded\?: boolean/)
+  assert.match(source, /onExpandedChange\?: \(expanded: boolean\) => void/)
+  assert.match(source, /import \{ ChevDown, ChevRight \} from "\.\.\/\.\.\/\.\.\/composite\/Icons"/)
+  assert.match(source, /const collapsible = children != null/)
+  assert.match(source, /defaultExpanded = false/)
+  assert.match(source, /isExpanded \? <ChevDown \/> : <ChevRight \/>/)
+  assert.match(source, /const chevStyle: CSSProperties = \{[\s\S]*?width: 14,\n\s+height: 14/)
+  assert.match(source, /const chevStyle: CSSProperties = \{[\s\S]*?color: "var\(--ow-text-3\)"/)
+  // 不可折叠时落静态 div，不做死钮（§6 交互态只属真的可交互件）
+  assert.match(source, /\{collapsible \? \(\n\s+<button/)
+  assert.match(source, /<div data-ow-part="row" style=\{inlineRow\}>/)
+  assert.doesNotMatch(source, /[▸▾]/)
+})
+
+test("受控/非受控展开都通；展开体带 id 与 aria-controls，data-ow-state 读得出展开态", () => {
+  assert.match(source, /if \(expanded === undefined\) setUncontrolled\(next\)/)
+  assert.match(source, /const isExpanded = collapsible && \(expanded \?\? uncontrolled\)/)
+  assert.match(source, /aria-expanded=\{isExpanded\}/)
+  assert.match(source, /aria-controls=\{isExpanded \? bodyId : undefined\}/)
+  assert.match(source, /data-slot="thinking"/)
+  assert.match(
+    source,
+    // biome 把三项数组折成多行，逐项匹配（R5 加了第三项 no-beacon）
+    /data-ow-state=\{\[\s*spinning \? "spinning" : "still",\s*isExpanded \? "expanded" : null,\s*showBeacon \? null : "no-beacon",?\s*\]/,
+  )
+})
+
+test("展开体＝信标中线下的 1px --ow-border-strong 竖线 ＋ text-3 13/1.7，正文左沿与 label 对齐", () => {
+  assert.match(source, /const inlineBody: CSSProperties = \{[\s\S]*?marginLeft: INLINE_SIZE \/ 2 - 1/)
+  assert.match(
+    source,
+    /const inlineBody: CSSProperties = \{[\s\S]*?padding: `2px 0 6px \$\{INLINE_SIZE \/ 2 \+ INLINE_GAP \+ 1\}px`/,
+  )
+  assert.match(source, /const inlineBody: CSSProperties = \{[\s\S]*?borderLeft: "1px solid var\(--ow-border-strong\)"/)
+  assert.match(
+    source,
+    /const inlineBody: CSSProperties = \{[\s\S]*?fontSize: "var\(--ow-fs-ui\)",\n\s+lineHeight: 1\.7,\n\s+color: "var\(--ow-text-3\)"/,
+  )
+})
+
+test("§4 状态极让极：有工具在跑时卫星退 --ow-text-2，否则 --ow-beacon；静止落 text-3 单色不占极", () => {
+  assert.match(source, /toolRunning\?: boolean/)
+  assert.match(source, /const satellite = toolRunning \? "var\(--ow-text-2\)" : "var\(--ow-beacon\)"/)
+  // 静止：尾迹与卫星一起落 text-3（卫星的静止归位由 BeaconSpinner 做：spinning=false → 取 trail）
+  assert.match(source, /trail=\{spinning \? "var\(--ow-text\)" : "var\(--ow-text-3\)"\}/)
+  assert.match(beacon, /satellite=\{spinning \? satellite : \(trail \?\? "var\(--ow-text\)"\)\}/)
+})
+
+test("§9 动效：转子帧只由 BeaconSpinner 出；inline 壳仍挂 .ow-motion 走 reduced-motion", () => {
+  assert.match(source, /ow-thinking--inline ow-motion/)
+  // 动画声明不在本件里——唯一转子帧 ow-spin ＋ --ow-dur-spin linear 归锁定件
+  assert.doesNotMatch(source, /animation:/)
+  assert.match(beacon, /`ow-spin \$\{spinDuration\} linear infinite`/)
+})
+
+test("block 变体（规格卡形制）没被改坏：仍走 BeaconSpinner ＋ 48 ＋ caption 文案", () => {
+  assert.match(source, /size = 48/)
+  assert.match(source, /<BeaconSpinner\n\s+size=\{size\}/)
+  assert.match(source, /var\(--ow-fs-caption, 12px\)\/1\.5/)
+})
+
+// R4：ChatThinking 归口成本件 inline 变体的薄包装——转录里只剩这一种思考行。
+test("ChatThinking 是本件 inline 的薄包装：零自持形态，只做 title/loading/children 三项映射", () => {
+  assert.match(chatThinking, /import \{ Thinking \} from "\.\.\/Thinking"/)
+  assert.match(chatThinking, /<div data-slot="chat-thinking" className=\{className\}>/)
+  assert.match(chatThinking, /<Thinking\n\s+variant="inline"\n\s+spinning=\{loading\}/)
+  assert.match(chatThinking, /label=\{typeof statusTitle === "string" \? statusTitle : undefined\}/)
+  // 兼容层零配方：不再自搓披露壳与 15px 小记号
+  const code = chatThinking.replace(/\/\*[\s\S]*?\*\//g, "").replace(/^[ \t]*\/\/.*$/gm, "")
+  assert.doesNotMatch(code, /<svg|<button|borderRadius|padding|fontSize/)
+  // icon 退成 no-op（旧调用点传了也不渲第二种记号）
+  assert.match(chatThinking, /本项忽略/)
+  assert.doesNotMatch(code, /\{icon\}/)
+})
+
+test("story 覆盖 inline 三态 ＋ R4 折叠三态", () => {
+  for (const s of [
+    "Inline",
+    "InlineStill",
+    "InlineToolRunning",
+    "InlineStates",
+    "InlineWithReasoning",
+    "InlineWithReasoningExpanded",
+    "InlineSpinningWithReasoning",
+  ]) {
+    assert.match(stories, new RegExp(`export const ${s}: Story`))
+  }
+  // 折叠是缺省：只有 …Expanded 那一张显式传 defaultExpanded
+  assert.equal(stories.match(/defaultExpanded: true/g)?.length, 1)
+})
+
+// A9-B1 顺带：递减短迹间距对齐原型（1222-1227 / 1354-1359 均为 3px）
+test("ArtifactTrail 点间距 5→3，与原型的执行摘要头行/产物卡同值", () => {
+  assert.match(
+    artifact,
+    /const trailStyle: CSSProperties = \{ display: "flex", alignItems: "center", gap: 3, height: 8, flex: "none" \}/,
+  )
+  assert.match(artifact, /\{ size: 6, opacity: 1 \}/)
+  assert.match(artifact, /\{ size: 3, opacity: 0\.25 \}/)
+})

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

@@ -0,0 +1,237 @@
+"use client"
+
+import { type CSSProperties, type ReactNode, useId, useState } from "react"
+import { BeaconSpinner } from "../../../composite/BeaconSpinner"
+import { ChevDown, ChevRight } from "../../../composite/Icons"
+import { useAgentTurnBeacon, useReportAgentTurnActivity } from "../AgentTurn/beaconContext"
+
+export interface ThinkingProps {
+  /**
+   * block（默认）＝规格卡形制：正方信标 ＋ caption 文案，用于独立的思考态陈列。
+   * inline＝转录里的思考行（原型模板 template.dc.html:1196-1217）：**28px 整画布信标**
+   * ＋ gap 10 ＋ `--ow-fs-ui`/1.6 `--ow-text-2` 一句话；给了 `children`（思考正文）
+   * 则行尾长出 chevron、整行成披露触发器（R4 · 2026-09-04，Terry：思考要能折叠展开）。
+   *
+   * 画布口径（R4）：原型 1196 的 40×25 裁切画布只在静止 0° 时装得下五点，一转起来卫星
+   * 就出画布（Terry 两次看到「logo 被裁」）。改用 `BeaconSpinner` 的 96 整画布缩到 28——
+   * 公转圆整个在画布里，静止收笔照规格卡 +24°，什么姿态都不裁。
+   */
+  variant?: "block" | "inline"
+  /** 边长 px，默认 48；<20px 场景请改用系统小转子（1.5px 环 · 90° 缺口 · 0.9s linear）。inline 变体固定 28，本项不生效 */
+  size?: number
+  /** true=运转（ow-spin 1.6s linear infinite），false=转完当前圈停在 +24°，text-3 单色不占极；默认 true */
+  spinning?: boolean
+  /** 思考行文案（text-2），如「正在核对 14 份来源」 */
+  label?: string
+  /**
+   * 同段有工具正在跑时置 true：卫星从 `--ow-beacon` 退成 `--ow-text-2`，把状态极让给那条
+   * ToolCallRow（§4 状态极每屏限一处；原型 logic:3850 的记账口径）。仅 inline 变体生效。
+   */
+  toolRunning?: boolean
+  /**
+   * 思考正文（inline 变体）：给了就可折叠——行尾 chevron，展开体挂在信标中线下的
+   * 1px `--ow-border-strong` 竖线右侧，`--ow-text-3` 13/1.7。缺省折叠（思考过程是过程，
+   * 不是答案；宿主可用 `defaultExpanded` / `expanded` 改）。
+   */
+  children?: ReactNode
+  /**
+   * inline 变体是否自带信标。缺省自动：所在 AgentTurn 已把信标合到脊线节点上（`beacon` prop，
+   * R5 探索）时不带，思考行只剩一句话＋chevron，与正文同一条起线；否则带 28px 信标。
+   */
+  beacon?: boolean
+  /** 非受控初始展开态（inline ＋ children 时生效） */
+  defaultExpanded?: boolean
+  /** 受控展开态 */
+  expanded?: boolean
+  onExpandedChange?: (expanded: boolean) => void
+  className?: string
+}
+
+/**
+ * Thinking — transcript 里 agent 的信标思考态（DS 2.0，照 ow/components/chat/Thinking 规格卡）
+ *
+ * - 完整五点构型公转：中心点 r8.2 恒定不转，尾迹四点与卫星 1.6s linear 绕行
+ * - 卫星=var(--ow-beacon)（浅=深黄/暗=荧黄），占状态极（聚焦运行中），每屏限一处；
+ *   同段有工具在跑时由 `toolRunning` 让极（inline 变体）
+ * - 停止时转完当前圈停在 +24°，整体落为 text-3 单色（与空态母题 --ow-empty-mark 同源），不占极
+ * - 不做小尺寸降级版；prefers-reduced-motion 直接呈现静止态
+ * - 归口自：ChatThinking / ThinkingDots / ChatThinkView。R4 起 `ChatThinking` 是本件 inline
+ *   变体的薄兼容层（title→label、loading→spinning、children→思考正文），转录里只剩这一种思考行。
+ */
+export function Thinking({
+  variant = "block",
+  size = 48,
+  spinning = true,
+  label,
+  toolRunning = false,
+  children,
+  beacon,
+  defaultExpanded = false,
+  expanded,
+  onExpandedChange,
+  className = "",
+}: ThinkingProps) {
+  const [uncontrolled, setUncontrolled] = useState(defaultExpanded)
+  const bodyId = useId()
+  const nodeBeacon = useAgentTurnBeacon()
+  const showBeacon = beacon ?? !nodeBeacon
+  // 转录里的思考行只有一种形：坐在带信标节点的轮里时，block 变体也按 inline 渲（信标已在节点上）
+  const inline = variant === "inline" || nodeBeacon
+  // 信标合到节点上时，把自己的转/停与让极报给所在轮（inline 才有意义；block 变体不在轮里）
+  useReportAgentTurnActivity({ spinning: inline && spinning, toolRunning: inline && toolRunning })
+  if (inline) {
+    const collapsible = children != null
+    const isExpanded = collapsible && (expanded ?? uncontrolled)
+    const toggle = () => {
+      if (!collapsible) return
+      const next = !isExpanded
+      if (expanded === undefined) setUncontrolled(next)
+      onExpandedChange?.(next)
+    }
+    // 运转态卫星＝状态极；同段有工具在跑时让极，退成无彩 text-2（原型 logic:3850）
+    const satellite = toolRunning ? "var(--ow-text-2)" : "var(--ow-beacon)"
+    const rowContent = (
+      <>
+        {showBeacon && (
+          <BeaconSpinner
+            size={INLINE_SIZE}
+            spinning={spinning}
+            trail={spinning ? "var(--ow-text)" : "var(--ow-text-3)"}
+            satellite={satellite}
+            aria-label={spinning ? "正在思考" : "已思考"}
+            style={beaconStyle}
+          />
+        )}
+        {label && <span style={inlineLabel}>{label}</span>}
+        {collapsible && (
+          <span aria-hidden="true" data-ow-part="chevron" style={chevStyle}>
+            {isExpanded ? <ChevDown /> : <ChevRight />}
+          </span>
+        )}
+      </>
+    )
+    return (
+      <div
+        className={`ow-thinking ow-thinking--inline ow-motion ${className}`}
+        data-slot="thinking"
+        data-ow-state={[
+          spinning ? "spinning" : "still",
+          isExpanded ? "expanded" : null,
+          showBeacon ? null : "no-beacon",
+        ]
+          .filter(Boolean)
+          .join(" ")}
+        style={inlineWrap}
+      >
+        {collapsible ? (
+          <button
+            type="button"
+            className="ow-focus-ring"
+            data-ow-part="trigger"
+            style={{ ...inlineRow, ...triggerReset }}
+            onClick={toggle}
+            aria-expanded={isExpanded}
+            aria-controls={isExpanded ? bodyId : undefined}
+          >
+            {rowContent}
+          </button>
+        ) : (
+          <div data-ow-part="row" style={inlineRow}>
+            {rowContent}
+          </div>
+        )}
+        {isExpanded && (
+          <div id={bodyId} data-ow-part="content" style={showBeacon ? inlineBody : inlineBodyNoBeacon}>
+            {children}
+          </div>
+        )}
+      </div>
+    )
+  }
+  return (
+    <div
+      className={`ow-thinking ow-motion ${className}`}
+      style={{ display: "inline-flex", alignItems: "center", gap: 12 }}
+    >
+      <BeaconSpinner
+        size={size}
+        spinning={spinning}
+        trail={spinning ? "var(--ow-text)" : "var(--ow-text-3)"}
+        satellite="var(--ow-beacon)"
+        aria-label={spinning ? "正在思考" : "已思考"}
+      />
+      {label && (
+        <span
+          style={{
+            font: "400 var(--ow-fs-caption, 12px)/1.5 var(--ow-font-sans)",
+            color: "var(--ow-text-2)",
+          }}
+        >
+          {label}
+        </span>
+      )}
+    </div>
+  )
+}
+
+/** inline 信标边长：28（§7 控件档——思考行是披露控件）。整画布缩放，公转圆（直径 ≈ 23px）全在画布内；
+ *  24 偏小（尾迹点不到 2px）、32 压过 13px 文字，28 是两者之间的一档（R4，24 / 32 备选见 ACCEPTANCE-PENDING）。 */
+const INLINE_SIZE = 28
+/** 信标中线 x＝14；展开体的竖线压在这条中线上，正文从 28＋10 的标签起点开始。 */
+const INLINE_GAP = 10
+
+const inlineWrap: CSSProperties = { display: "flex", flexDirection: "column", alignItems: "stretch", gap: 0 }
+const inlineRow: CSSProperties = { display: "flex", alignItems: "center", gap: INLINE_GAP, minWidth: 0 }
+const triggerReset: CSSProperties = {
+  width: "100%",
+  padding: 0,
+  border: 0,
+  background: "transparent",
+  color: "inherit",
+  font: "inherit",
+  textAlign: "left",
+  cursor: "pointer",
+  borderRadius: "var(--ow-radius-2xs)",
+}
+const beaconStyle: CSSProperties = { flex: "0 0 auto", display: "block" }
+/* 标签不撑满整行：chevron 紧跟在句尾（原型思考行本无 chevron，披露记号该贴着它披露的那句话，
+   不是飘到 752 列的最右边）；长句照常收缩省略。 */
+const inlineLabel: CSSProperties = {
+  flex: "0 1 auto",
+  minWidth: 0,
+  fontSize: "var(--ow-fs-ui)",
+  lineHeight: 1.6,
+  color: "var(--ow-text-2)",
+  textWrap: "pretty",
+}
+const chevStyle: CSSProperties = {
+  flex: "0 0 auto",
+  width: 14,
+  height: 14,
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: "var(--ow-text-3)",
+}
+/* 无信标（信标已合到脊线节点上）：竖线落在正文起线，正文再进 12 */
+const inlineBodyNoBeacon: CSSProperties = {
+  marginLeft: 0,
+  marginTop: 4,
+  padding: "2px 0 6px 12px",
+  borderLeft: "1px solid var(--ow-border-strong)",
+  fontSize: "var(--ow-fs-ui)",
+  lineHeight: 1.7,
+  color: "var(--ow-text-3)",
+  overflowWrap: "anywhere",
+}
+
+const inlineBody: CSSProperties = {
+  marginLeft: INLINE_SIZE / 2 - 1,
+  marginTop: 4,
+  padding: `2px 0 6px ${INLINE_SIZE / 2 + INLINE_GAP + 1}px`,
+  borderLeft: "1px solid var(--ow-border-strong)",
+  fontSize: "var(--ow-fs-ui)",
+  lineHeight: 1.7,
+  color: "var(--ow-text-3)",
+  overflowWrap: "anywhere",
+}