@orbit-work/ui 0.1.0

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

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { DesktopChatBranchDivider } from "./index"
+
+/**
+ * @deprecated 本件是薄兼容层，形态已全交给 `BranchDivider`（composite/TranscriptDividers）。
+ * **新代码直接用 `BranchDivider`**；这几个故事只为桌面端既有调用点留验收现场。
+ */
+const meta = {
+  title: "Desktop/DesktopChatBranchDivider",
+  component: DesktopChatBranchDivider,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "**@deprecated** —— 形态已并入 `BranchDivider`（composite/TranscriptDividers），本件只是薄兼容层。新代码请直接用 `BranchDivider`。",
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      // 故事底走 --ow-bg（原先写的 --bg-primary 全仓无定义，底色实际是透明）
+      <div style={{ padding: 40, background: "var(--ow-bg)" }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof DesktopChatBranchDivider>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    sourceTitle: "实现用户登录功能",
+    onSourceClick: () => console.log("Source clicked"),
+  },
+}
+
+export const CustomLabel: Story = {
+  args: {
+    sourceTitle: "优化数据库查询性能",
+    label: "从这个任务分支出来",
+    onSourceClick: () => console.log("Source clicked"),
+  },
+}
+
+export const LongTitle: Story = {
+  args: {
+    sourceTitle: "实现一个完整的用户认证系统，包括注册、登录、密码重置和会话管理",
+    onSourceClick: () => console.log("Source clicked"),
+  },
+}
+
+export const WithoutClick: Story = {
+  args: {
+    sourceTitle: "已归档的任务",
+  },
+}

package/src/components/domain/desktop/DesktopChatBranchDivider/index.tsx

@@ -0,0 +1,33 @@
+"use client"
+
+import type { ReactNode } from "react"
+import { BranchDivider } from "../../../composite/TranscriptDividers"
+
+export interface DesktopChatBranchDividerProps {
+  /** Title of the source session this branch continues from. */
+  sourceTitle: string
+  /** Text preceding the source-session link. */
+  label?: ReactNode
+  /** Called when the source title is clicked (e.g. jump to the source session). */
+  onSourceClick?: () => void
+}
+
+/**
+ * @deprecated DS 2.0 P5：形态并入 `BranchDivider`（composite/TranscriptDividers），
+ * 链接改走 `.ow-link`（info 蓝）而非旧的 `--ow-fg-link`。本件只留薄兼容层给桌面端
+ * 既有调用点，新代码直接用 `BranchDivider`。
+ */
+export function DesktopChatBranchDivider({
+  sourceTitle,
+  label = "此任务源自",
+  onSourceClick,
+}: DesktopChatBranchDividerProps): React.ReactElement {
+  return (
+    <BranchDivider
+      className="my-[var(--ow-space-5,20px)]"
+      sourceTitle={sourceTitle}
+      label={label}
+      onSourceClick={onSourceClick}
+    />
+  )
+}

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

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Composer } from "../../chat/Composer"
+import { DesktopRunStatusView } from "../DesktopRunStatusView"
+import { DesktopChatEmptyStateView } from "./index"
+
+const noop = () => {}
+
+/**
+ * 新会话空态 · DS 2.0 G5（§6 容器空态 · W2 重铸 · 裁决 D2）
+ *
+ * 母题＝`primitives/EmptyState` 的信标 mono 母题（五点构型静止 +24°，单色 `--ow-empty-mark`
+ * ＝text-3）＋ 一句 text-2 ＋ 可选动作。空态本身零荧黄：唯一可能的行动极是 Composer 的发送钮。
+ */
+const meta = {
+  title: "Desktop/DesktopChatEmptyStateView",
+  component: DesktopChatEmptyStateView,
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      /* 复刻宿主：.chat-empty 自己 height:100% 居中，容器只负责给满宽满高与地色。 */
+      <div style={{ height: "100vh", width: "100%", background: "var(--ow-bg)" }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof DesktopChatEmptyStateView>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {},
+}
+
+export const WithCustomTitle: Story = {
+  args: {
+    title: "准备好开始工作了吗？",
+  },
+}
+
+/** 引导入口＝一枚 secondary 按钮（空态不占行动极）。 */
+export const WithAction: Story = {
+  args: {
+    title: "还没有会话。挑一个项目就能开始。",
+    actionLabel: "选择项目",
+    onAction: noop,
+  },
+}
+
+export const WithStatus: Story = {
+  args: {
+    title: "对话已恢复",
+    status: <DesktopRunStatusView label="已恢复" tone="restored" />,
+  },
+}
+
+export const WithComposer: Story = {
+  args: {
+    title: "在下方输入你的问题或想法，Orbitwork 随时待命。",
+    composer: <Composer placeholder="今天帮你做些什么？ / 调用技能与指令 @ 引用专家和连接器" onSend={noop} />,
+  },
+}
+
+/**
+ * 旧 API 兼容档：`illustrationSrc` 已随吉祥物退役（@deprecated no-op），
+ * 传值不再渲染插画——渲染结果与 Default 一致。
+ */
+export const DeprecatedIllustrationIsIgnored: Story = {
+  args: {
+    illustrationSrc: "https://example.invalid/mascot.png",
+    title: "新的对话",
+  },
+}

package/src/components/domain/desktop/DesktopChatEmptyStateView/DesktopChatEmptyStateViewSource.test.mjs

@@ -0,0 +1,54 @@
+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 css = await readFile(new URL("../../../../../styles/desktop-surfaces.css", import.meta.url), "utf8")
+
+test("new-chat empty state is G5: the EmptyState primitive carries mark + one sentence + optional action", () => {
+  assert.match(source, /from "\.\.\/\.\.\/\.\.\/primitives\/EmptyState"/)
+  assert.match(source, /<EmptyState\b[\s\S]{0,240}className="chat-empty__state"/)
+  assert.match(source, /message=\{title\}/)
+  // 母题体量随 EmptyState 的 md 档（40），不再传越档的 markSize={56}
+  // （断言按「行首缩进的 JSX prop」形状写，注释里的追溯记载不算）
+  assert.doesNotMatch(source, /^\s*markSize=\{/m)
+  // R2 复审：动作钮档位收进 primitives/EmptyState（一律 secondary，空态不占行动极），
+  // 本视图不再在调用侧复刻第二份配方。
+  assert.doesNotMatch(source, /variant="secondary"/)
+  assert.match(source, /actionLabel=\{actionLabel\}/)
+  assert.match(source, /onAction=\{onAction\}/)
+})
+
+test("mascot illustration and the Songti serif hero are retired (§6 no illustration, no serif hero)", () => {
+  assert.doesNotMatch(source, /className="mascot"/)
+  assert.doesNotMatch(source, /className="hero"/)
+  assert.doesNotMatch(source, /rounded-full/)
+  // 退役的是「规则」，不是注释里的追溯记载——所以断言按选择器＋花括号的规则形状写。
+  assert.doesNotMatch(css, /\.chat-empty \.mascot \{/)
+  assert.doesNotMatch(css, /\.chat-empty \.hero \{/)
+  assert.doesNotMatch(css, /hero-sans \.chat-empty/)
+  assert.doesNotMatch(css, /\.chip-sug \.d \{/)
+  assert.doesNotMatch(css, /^\.chips \{/m)
+  assert.doesNotMatch(css, /"Songti SC"/)
+})
+
+test("illustrationSrc stays in the public API as a deprecated no-op (old call sites keep compiling)", () => {
+  assert.match(source, /@deprecated/)
+  assert.match(source, /illustrationSrc\?: string/)
+  assert.match(source, /illustrationSrc: _illustrationSrc/)
+})
+
+test("new-chat background skins keep their modifier hook and the chat-surface masking chain", () => {
+  assert.match(source, /hasOrbitworkSkinChatBackground\(activeSkin, resolvedTheme\)/)
+  assert.match(source, /chat-empty--has-background/)
+  assert.match(css, /\.chat-empty--has-background \.chat-empty__state \{ padding-bottom: var\(--ow-space-12\); \}/)
+  assert.match(css, /:root\[data-chat-background-image\] \.chat:not\(\.chat--empty\)::before/)
+  assert.match(css, /var\(--ow-chat-bg-mask-color\) var\(--ow-chat-bg-mask-start-opacity\)/)
+  assert.match(css, /var\(--ow-chat-bg-mask-color\) var\(--ow-chat-bg-mask-end-opacity\)/)
+  assert.match(css, /pointer-events: none/)
+  assert.match(css, /:root\[data-chat-background-image\] \.chat:not\(\.chat--empty\) > \.chat__scroll,/)
+  assert.match(
+    css,
+    /:root\[data-chat-background-image\] \.chat:not\(\.chat--empty\) > \.composer-wrap \{ z-index: 1; \}/,
+  )
+})

package/src/components/domain/desktop/DesktopChatEmptyStateView/index.tsx

@@ -0,0 +1,64 @@
+import type { ReactNode } from "react"
+import { hasOrbitworkSkinChatBackground } from "../../../../lib/appearance"
+import { cn } from "../../../../lib/utils"
+import { useTheme } from "../../../../theme"
+import { EmptyState } from "../../../primitives/EmptyState"
+
+export interface DesktopChatEmptyStateViewProps {
+  /**
+   * @deprecated 吉祥物插画随 DS 2.0 G5 空态退役（§6：容器空态禁插画禁 emoji）。
+   * 传值不再渲染，保留只为旧调用点（apps/desktop 的 `mascot.png`）不报错；下个大版本删除。
+   */
+  illustrationSrc?: string
+  /** 空态那一句话（G5 的 text-2 一句，不是衬线大标题）。 */
+  title?: string
+  status?: ReactNode
+  composer?: ReactNode
+  /** 引导入口文案；与 onAction 成对出现，由 `primitives/EmptyState` 渲成 secondary（空态不占行动极）。 */
+  actionLabel?: string
+  onAction?: () => void
+  /** 自定义动作区（覆盖 actionLabel/onAction），仍应为按钮类元素。 */
+  action?: ReactNode
+}
+
+/**
+ * DesktopChatEmptyStateView — 新会话空态（DS 2.0 G5）
+ *
+ * W2 重铸（V1-TRACE-AUDIT 裁决 D2）：灰椭圆吉祥物「B」＋ Songti 衬线 hero 整体退役，
+ * 母题/文案/动作交给 `primitives/EmptyState`——信标 mono 母题（五点构型静止 +24°、
+ * 尾迹＋卫星，单色 `--ow-empty-mark`＝text-3，中性无荧黄）＋ 一句 text-2 ＋ 可选按钮。
+ * 母题几何属 §12 品牌锁定值，故直接复用原语而非另绘轨道环。本视图只再负责整屏居中、
+ * 皮肤背景图分支与 composer 宽度约束。
+ */
+export function DesktopChatEmptyStateView({
+  illustrationSrc: _illustrationSrc,
+  title = "在下方输入你的问题或想法，Orbitwork 随时待命。",
+  status,
+  composer,
+  actionLabel,
+  onAction,
+  action,
+}: DesktopChatEmptyStateViewProps) {
+  const { resolvedTheme, skin } = useTheme()
+  const activeSkin = skin
+  const hasChatBackgroundImage = hasOrbitworkSkinChatBackground(activeSkin, resolvedTheme)
+  // R2 复审：本地不再复刻一份 secondary 钮——档位已收进 primitives/EmptyState 的
+  // actionLabel 分支（R2 裁决：空态不占行动极），两处配方合成一处。
+
+  return (
+    <div className={cn("chat-empty", hasChatBackgroundImage && "chat-empty--has-background")}>
+      {/* G5 空态母题只有 md=40 / sm=28 两档（primitives/EmptyState 的 EMPTY_STATE_SIZES）；
+          原 markSize={56} 是越档的第三种体量，同一条 G5 语法在 Home 与 ScheduledTasks
+          之间渲出两种大小。收回默认 md 档。 */}
+      <EmptyState
+        className="chat-empty__state"
+        message={title}
+        actionLabel={actionLabel}
+        onAction={onAction}
+        action={action}
+      />
+      {status}
+      {composer && <div className="empty-composer">{composer}</div>}
+    </div>
+  )
+}

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

@@ -0,0 +1,83 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { DesktopChatHeaderView } from "./index"
+
+const meta = {
+  title: "Desktop/DesktopChatHeaderView",
+  component: DesktopChatHeaderView,
+  // 会话头是会话列的第一条横线，宽度由列给。舞台用宿主真实的 .chat 壳，
+  // 量到的高（48）、底线、内距（24/20）就是线上的值。
+  decorators: [
+    (Story) => (
+      <div style={{ background: "var(--ow-bg)", width: 900 }}>
+        <div className="chat">
+          <Story />
+        </div>
+      </div>
+    ),
+  ],
+  args: {
+    title: "把组件库的会话头对齐到原型",
+    onShare: () => console.log("share"),
+    onOpenContext: () => console.log("context"),
+    onOpenPanel: () => console.log("panel"),
+  },
+} satisfies Meta<typeof DesktopChatHeaderView>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** 未在跑：标题左对齐吃满余量，读数位空着，右侧三枚钮。 */
+export const Default: Story = {}
+
+/** 思考中 · 12s——原型 1099-1104 的默认那一态。 */
+export const Thinking: Story = {
+  args: { runState: "thinking", elapsedSeconds: 12 },
+}
+
+/** 运行中：有真实运行阶段时由宿主用 runLabel 顶掉默认词（这里是压缩上下文）。 */
+export const Running: Story = {
+  args: { runState: "running", runLabel: "正在压缩上下文", elapsedSeconds: 96 },
+}
+
+/** 已完成：跑完之后的落定读数，不带秒表。 */
+export const Done: Story = {
+  args: { runState: "done", runLabel: "本地运行时连接已恢复" },
+}
+
+/**
+ * **读数位留空**（本批的验收点之一）：耗时字段还没有（plan-research A9 devDependency 第 1 条），
+ * 读数就只出状态词，绝不补一个 `· 0s`。
+ */
+export const ReadoutWithoutElapsed: Story = {
+  args: { runState: "thinking", elapsedSeconds: null },
+}
+
+/** 分享模式：分享钮 aria-pressed=true，常亮不灭。 */
+export const ShareActive: Story = {
+  args: { shareActive: true, runState: "thinking", elapsedSeconds: 8 },
+}
+
+/** 三枚钮同时按下（R2 · L3-2-6）：分享 / 子任务与产物 / 右栏 —— 一套 aria-pressed 按下态。 */
+export const AllToggledOn: Story = {
+  args: { shareActive: true, contextActive: true, panelOpen: true, runState: "running", elapsedSeconds: 12 },
+}
+
+/** 长标题单行省略，读数与三枚钮不被挤走。 */
+export const LongTitle: Story = {
+  args: {
+    title: "把 DS 2.0 的会话头、执行摘要卡、live 工具行、授权卡与右栏一次性对齐到原型模板，并保留研发的运行阶段文案",
+    runState: "thinking",
+    elapsedSeconds: 754,
+  },
+}
+
+/** 三态并排：形（点）恒定、义全在文案上——R1 的双编码在单色下也读得出。 */
+export const RunStates: Story = {
+  render: (args) => (
+    <div style={{ display: "flex", flexDirection: "column" }}>
+      <DesktopChatHeaderView {...args} runState="thinking" elapsedSeconds={9} />
+      <DesktopChatHeaderView {...args} runState="running" runLabel="等待你补充信息" elapsedSeconds={41} />
+      <DesktopChatHeaderView {...args} runState="done" runLabel="已完成" />
+    </div>
+  ),
+}

package/src/components/domain/desktop/DesktopChatHeaderView/DesktopChatHeaderViewSource.test.mjs

@@ -0,0 +1,126 @@
+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("./DesktopChatHeaderView.stories.tsx", import.meta.url), "utf8")
+const css = await readFile(new URL("../../../../../styles/desktop-surfaces.css", import.meta.url), "utf8")
+const surface = await readFile(
+  new URL("../../../../../../../apps/desktop/src/renderer/features/chat/components/ChatSurface.tsx", import.meta.url),
+  "utf8",
+)
+
+const rule = (selector) =>
+  css.match(new RegExp(`^${selector.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")} \\{[^}]*\\}`, "ms"))?.[0] ?? ""
+
+const headRule = rule(".chat__head")
+const titleRule = rule(".chat__head-title")
+const runRule = rule(".chat__head-run")
+const dotRule = rule(".chat__head-run__dot")
+const btnRule = rule(".session-ctx-btn")
+
+test("会话头是一行 flex：48 高、底 1px --ow-border、内距 24/20（原型 1096）", () => {
+  assert.match(headRule, /height: var\(--ow-titlebar-h\)/)
+  assert.match(headRule, /display: flex/)
+  assert.match(headRule, /gap: 10px/)
+  assert.match(headRule, /padding: 0 var\(--ow-space-5, 20px\) 0 var\(--ow-space-6, 24px\)/)
+  assert.match(headRule, /border-bottom: var\(--ow-border-width-thin, 1px\) solid var\(--ow-border\)/)
+  // 三栏 grid（居中标题）已退役
+  assert.doesNotMatch(headRule, /grid-template-columns/)
+  assert.doesNotMatch(css, /\.chat__head \.title \{/)
+})
+
+test("标题：--ow-fs-subtitle(16)/500 左对齐、吃余量、单行省略（原型 1097）", () => {
+  assert.match(titleRule, /font: 500 var\(--ow-fs-subtitle\)\/1\.3 var\(--ow-font-sans\)/)
+  assert.match(titleRule, /text-align: left/)
+  assert.match(titleRule, /flex: 1 1 auto/)
+  assert.match(titleRule, /text-overflow: ellipsis/)
+  assert.match(titleRule, /white-space: nowrap/)
+  assert.match(source, /className="chat__head-title">\{title\}</)
+})
+
+test("读数是裸读数：6px --ow-progress-fill 无彩点 + mono fs-caption tabular text-2（原型 1099-1104）", () => {
+  assert.match(runRule, /font-family: var\(--ow-font-mono\)/)
+  assert.match(runRule, /font-size: var\(--ow-fs-caption\)/)
+  assert.match(runRule, /font-variant-numeric: tabular-nums/)
+  assert.match(runRule, /color: var\(--ow-text-2\)/)
+  assert.match(dotRule, /width: 6px; height: 6px/)
+  assert.match(dotRule, /background: var\(--ow-progress-fill\)/)
+  // §4：状态极归转录里正在跑的那一处，会话头不点第二处荧黄；且不是 chip——无面无边
+  assert.doesNotMatch(runRule + dotRule, /--ow-beacon|--ow-primary|--ow-yellow/)
+  assert.doesNotMatch(runRule, /border:|background:/)
+  assert.doesNotMatch(runRule + dotRule, /animation:/)
+  assert.doesNotMatch(runRule + dotRule + titleRule + headRule, /#[0-9a-f]{3,8}\b/i)
+  // 会话头不再消费 28 高的 DesktopRunStatusView pill
+  assert.doesNotMatch(source, /<DesktopRunStatusView/)
+  assert.doesNotMatch(surface, /DesktopRunStatusView/)
+})
+
+test("三态文案：思考中 / 运行中 / 已完成，宿主可用 runLabel 顶掉", () => {
+  assert.match(source, /thinking: "思考中"/)
+  assert.match(source, /running: "运行中"/)
+  assert.match(source, /done: "已完成"/)
+  assert.match(source, /runLabel \?\? \(runState \? RUN_STATE_LABELS\[runState\] : ""\)/)
+})
+
+test("缺耗时字段时读数位留空——不伪造 · 0s", () => {
+  assert.match(source, /elapsedSeconds >= 1/)
+  assert.match(source, /\{elapsedText\}/)
+  assert.match(source, /` · \$\{Math\.floor\(elapsedSeconds\)\}s`/)
+  assert.match(stories, /export const ReadoutWithoutElapsed/)
+  // runState 为空就整段不渲染
+  assert.match(source, /\{runState && label && \(/)
+})
+
+test("三枚 28×28 --ow-radius-xs 钮：分享（aria-pressed）/ 子任务与产物 / 打开右栏 ⌘T", () => {
+  assert.match(btnRule, /width: 28px; height: 28px; border-radius: var\(--ow-radius-xs\)/)
+  assert.match(css, /\.session-ctx-btn svg \{ width: 17px; height: 17px; \}/)
+  assert.match(source, /title="分享这段会话"/)
+  assert.match(source, /aria-pressed=\{shareActive\}/)
+  assert.match(source, /title="子任务与产物"/)
+  // R2 · L3-2-8：字形按 platform 渲，不再写死 ⌘T
+  assert.match(source, /title=\{`打开右栏 \$\{formatShortcut\(OPEN_PANEL_KEYS, platform\)\}`\}/)
+  assert.match(source, /const OPEN_PANEL_KEYS = \["Mod", "T"\] as const/)
+  assert.match(source, /aria-label="打开右栏"/)
+  // 字形：右栏钮走 PanelSidebar（rect 3,4,18,16 rx2 + M14.5 4v16），子任务钮走 Branch 分叉
+  assert.match(source, /import \{ Branch, PanelSidebar, Share \} from "\.\.\/\.\.\/\.\.\/composite\/Icons"/)
+})
+
+test("流内轮播文案 .loop-card 族已退役，运行读数全屏只剩会话头一处", () => {
+  // 只剩注释里的墓志铭：真正的挂点（常量与 className）必须清零
+  assert.doesNotMatch(surface, /const LOOP_PHRASES/)
+  assert.doesNotMatch(surface, /className="loop-card/)
+  assert.doesNotMatch(surface, /className="dots"/)
+  assert.doesNotMatch(css, /^\.loop-card/m)
+  assert.doesNotMatch(css, /^\s*\.loop-card__(label|badge)[ ,{]/m)
+  // 宿主改挂本件，并把真实运行阶段词经 runLabel 传进来
+  assert.match(surface, /<DesktopChatHeaderView/)
+  assert.match(surface, /runLabel=\{runLabel\}/)
+  assert.match(surface, /正在压缩上下文/)
+})
+
+// R2 · L3-2-6：三枚钮统一一套按下态编码。CSS 里唯一的按下态是
+// `.session-ctx-btn[aria-pressed="true"]`（desktop-surfaces.css:1159）——
+// 子任务钮原写 aria-expanded（无对应规则，视觉全无效），右栏钮压根没有开关 prop。
+test("三枚钮的按下态统一走 aria-pressed（含右栏钮的 panelOpen）", () => {
+  assert.match(source, /aria-pressed=\{shareActive\}/)
+  assert.match(source, /aria-pressed=\{contextActive\}/)
+  assert.match(source, /aria-pressed=\{panelOpen\}/)
+  assert.match(source, /panelOpen\?: boolean/)
+  assert.doesNotMatch(source, /aria-expanded=\{contextActive\}/)
+  assert.match(css, /\.session-ctx-btn\[aria-pressed="true"\]/)
+})
+
+// R2 · L3-2-7：运行读数的 live region 常驻，且只播状态词——秒数每秒变一次，
+// 包在 region 里会整句重播；条件挂载的 region 又常常一次也不播。
+test("运行读数：live region 常驻、秒数 aria-hidden", () => {
+  assert.match(source, /role="status"\s*\n\s*aria-live="polite"/)
+  assert.match(source, /data-ow-state=\{runState && label \? runState : "idle"\}/)
+  assert.match(source, /<span aria-hidden="true">\{elapsedText\}<\/span>/)
+  // 核对补：空闲态不得 hidden / display:none（会把 region 摘出无障碍树，首次播报照丢）——走 sr-only 出流
+  assert.doesNotMatch(source, /hidden=\{/)
+  assert.doesNotMatch(css, /\.chat__head-run\[hidden\]/)
+  const idleRule = css.match(/^\.chat__head-run\[data-ow-state="idle"\] \{[^}]*\}/m)?.[0] ?? ""
+  assert.match(idleRule, /position: absolute; width: 1px; height: 1px; overflow: hidden/)
+  assert.doesNotMatch(idleRule, /display: none|visibility: hidden/)
+})

package/src/components/domain/desktop/DesktopChatHeaderView/index.tsx

@@ -0,0 +1,169 @@
+import type { HTMLAttributes, ReactNode } from "react"
+import { type ShortcutPlatform, formatShortcut } from "../../../../lib/shortcut"
+import { Branch, PanelSidebar, Share } from "../../../composite/Icons"
+import { Button } from "../../../primitives"
+
+/** 会话头读数的三态（原型 template.dc.html:1099-1104 的 `loopLabel`）。 */
+export type DesktopChatRunState = "thinking" | "running" | "done"
+
+const RUN_STATE_LABELS: Record<DesktopChatRunState, string> = {
+  thinking: "思考中",
+  running: "运行中",
+  done: "已完成",
+}
+
+export interface DesktopChatHeaderViewProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  /** 会话标题，16/500 左对齐、单行省略。 */
+  title: string
+  /** 运行读数的三态；`null`/缺省＝不出读数（会话没在跑时标题右侧就是空的）。 */
+  runState?: DesktopChatRunState | null
+  /** 读数文案覆盖位——宿主有更准的运行阶段（压缩上下文 / 等待补充信息…）时用它顶掉默认三态词。 */
+  runLabel?: string
+  /**
+   * 已跑秒数。**缺耗时字段时读数位留空**：不给（或 < 1）就只出状态词，不伪造 `· 0s`。
+   * 见 plan-research A9 devDependency 第 1 条——ToolBlock 还没有 durationMs。
+   */
+  elapsedSeconds?: number | null
+  /** 分享模式是否开着（进模式后钮常亮，走 aria-pressed）。 */
+  shareActive?: boolean
+  onShare?: () => void
+  /**
+   * 「子任务与产物」。宿主自带下拉菜单（SessionContextMenu）时从这个槽塞进来；
+   * 只给 `onOpenContext` 时本件出一枚同形同字的钮。
+   */
+  contextAction?: ReactNode
+  onOpenContext?: () => void
+  contextActive?: boolean
+  /** 「打开右栏」（快捷键 Mod+T，字形随 `platform`）。 */
+  onOpenPanel?: () => void
+  /**
+   * 右栏是否开着（R2 · L3-2-6）。三枚钮统一一套按下态编码：`aria-pressed`
+   * ——CSS 里唯一的按下态是 `.session-ctx-btn[aria-pressed="true"]`（desktop-surfaces.css:1159），
+   * 右栏钮原来连表示开关的 prop 都没有，那颗「打开右栏 ⌘T」开关自己看不出栏是开是关。
+   */
+  panelOpen?: boolean
+  /**
+   * 提示里的快捷键按哪个平台渲字形（R2 · L3-2-8：原来写死 `⌘T`，windows/linux 上也显示 ⌘）。
+   * 受控，缺省 `"mac"` ＝ 改造前的现状。
+   */
+  platform?: ShortcutPlatform
+}
+
+/** 「打开右栏」的快捷键：语义键名存一份，字形按平台现渲。 */
+const OPEN_PANEL_KEYS = ["Mod", "T"] as const
+
+/**
+ * DesktopChatHeaderView — Desktop 会话头（原型 template.dc.html:1096-1145）。
+ *
+ * 形：48 高（`--ow-titlebar-h`）、底 1px `--ow-border`、`display:flex` 一行三段——
+ * 左**标题**（`--ow-fs-subtitle` 16/500，**左对齐**、`flex:1` 吃掉余量、单行省略），
+ * 中**运行读数**，右三枚 28×28 `--ow-radius-xs` 图标钮。原来标题是三栏 grid 里居中的
+ * 600/13 一行；居中标题在左对齐的转录列上方没有对齐对象，改左对齐后它与内容列同轴起手。
+ *
+ * §7 读数：读数不是 chip——原型注释写死「裸读数」：6px 圆点 ＋ mono `--ow-fs-caption`
+ * tabular-nums `--ow-text-2`，无面无边无胶囊。旧的 `DesktopRunStatusView`（28 高 pill）
+ * 在这里退场，本件不再消费它。
+ *
+ * §4 三极：这颗点走 `--ow-progress-fill`（**无彩**）。状态极已经归给转录里正在跑的那一处
+ * （ToolCallRow 的 `--ow-beacon` 点 / Thinking 的卫星），会话头再点亮一次就是第二处状态极；
+ * 且读数文案本身承义，R1 双编码由「形（点）＋ 文（思考中 · 12s）」凑齐，颜色不必参与。
+ *
+ * 退役：流内的 `.loop-card`（每 10s 换一句的 20 条轮播文案）。运行读数全屏只留会话头这一处，
+ * 转录流不再挂运行标签——推荐已定（plan-research A9 openQuestions 第 1 条）。
+ */
+export function DesktopChatHeaderView({
+  title,
+  runState = null,
+  runLabel,
+  elapsedSeconds = null,
+  shareActive = false,
+  onShare,
+  contextAction,
+  onOpenContext,
+  contextActive = false,
+  onOpenPanel,
+  panelOpen = false,
+  platform = "mac",
+  className = "",
+  ...rest
+}: DesktopChatHeaderViewProps) {
+  const label = runLabel ?? (runState ? RUN_STATE_LABELS[runState] : "")
+  // 读数位留空：没有耗时字段（null/undefined/不足 1s）就只留状态词，不补 `· 0s`。
+  const elapsedText =
+    typeof elapsedSeconds === "number" && Number.isFinite(elapsedSeconds) && elapsedSeconds >= 1
+      ? ` · ${Math.floor(elapsedSeconds)}s`
+      : ""
+
+  return (
+    <div className={`chat__head${className ? ` ${className}` : ""}`} {...rest}>
+      <div className="chat__head-title">{title}</div>
+      {/* R2 · L3-2-7：live region 常驻且只播状态词。
+          旧写法把 role="status" 整块包住「运行中 · 12s」并做条件渲染，两头都失效——
+          宿主每秒推一次 elapsedSeconds，polite region 就整句重播一次；而条件挂载的
+          live region 与内容同一帧进 DOM，不少读屏器对「插入时就带内容的 region」根本不播。
+          现在容器无条件在 DOM 里（会话没跑时内容为空），秒数那一段 aria-hidden 不参与播报。
+          核对补：空闲态**不能**用 hidden / display:none 收起——那会把 live region 从无障碍树摘掉，
+          再出现时对读屏器仍等于「插入时就带内容」，首次播报照样丢。空闲态由 CSS
+          `.chat__head-run[data-ow-state="idle"]` 走 sr-only（绝对定位 1×1，仍在无障碍树里）。 */}
+      <span
+        className="chat__head-run"
+        role="status"
+        aria-live="polite"
+        data-ow-state={runState && label ? runState : "idle"}
+      >
+        {runState && label && (
+          <>
+            <span className="chat__head-run__dot" aria-hidden="true" />
+            {/* 状态词与秒数是同一句读数（原型 1103 的 loopLabel＝「思考中 · 9s」一整串），
+                不拆成两枚 flex 子项——拆了 gap 会在「·」两侧各加一次，间距就比原型宽。 */}
+            <span className="chat__head-run__label">
+              {label}
+              <span aria-hidden="true">{elapsedText}</span>
+            </span>
+          </>
+        )}
+      </span>
+      <div className="chat__head-actions">
+        {onShare && (
+          <Button
+            variant="unstyled"
+            className="session-ctx-btn"
+            title="分享这段会话"
+            aria-label="分享这段会话"
+            aria-pressed={shareActive}
+            onClick={onShare}
+          >
+            <Share />
+          </Button>
+        )}
+        {contextAction ??
+          (onOpenContext && (
+            <Button
+              variant="unstyled"
+              className="session-ctx-btn"
+              title="子任务与产物"
+              aria-label="子任务与产物"
+              // R2 · L3-2-6：原写 aria-expanded，而 CSS 只认 [aria-pressed="true"]——
+              // contextActive 在视觉上完全无效。三枚钮统一 aria-pressed。
+              aria-pressed={contextActive}
+              onClick={onOpenContext}
+            >
+              <Branch />
+            </Button>
+          ))}
+        {onOpenPanel && (
+          <Button
+            variant="unstyled"
+            className="session-ctx-btn"
+            title={`打开右栏 ${formatShortcut(OPEN_PANEL_KEYS, platform)}`}
+            aria-label="打开右栏"
+            aria-pressed={panelOpen}
+            onClick={onOpenPanel}
+          >
+            <PanelSidebar />
+          </Button>
+        )}
+      </div>
+    </div>
+  )
+}