@orbit-work/ui 0.1.0

package/src/components/domain/browser/SubAgentPane/SubAgentPane.stories.tsx

@@ -0,0 +1,96 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WorkbenchSidePanel } from "../../desktop/WorkbenchSidePanel"
+import { SubAgentPane, type SubAgentPaneTurn } from "./index"
+
+/**
+ * 侧开栏「子任务」页签（原型模板 2344–2368）。
+ *
+ * 核对点（两个主题都要看）：头 10/14 ＋ 底线，标题 `--ow-fs-ui` 500，右侧读数是
+ * 6px 无彩点（`--ow-progress-fill`）＋ mono caption；体 16/14，轮间 12；轨道列 12 宽，
+ * 1.5px `--ow-timeline` 竖线通高，用户轮 8×8 空心环（环心填面色把线断开）、
+ * 智能体轮 7×7 实心点压在线上；正文 lh 1.7。**荧黄 0 处**。
+ */
+const meta = {
+  title: "Preview/SubAgentPane",
+  component: SubAgentPane,
+  parameters: { layout: "fullscreen" },
+} satisfies Meta<typeof SubAgentPane>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** 原型 3288–3291 的两轮。 */
+const SUB_TURNS: SubAgentPaneTurn[] = [
+  { id: "u1", role: "user", text: "把这三家竞品的文档站信息架构整理成一张对照表。" },
+  {
+    id: "a1",
+    role: "agent",
+    text: "已抓取三家文档站的顶层导航，正在按「入门 / 组件 / 设计规范 / 更新日志」四类归并；组件页的层级差异最大，稍后单独列一节。",
+  },
+]
+
+/** 455 ＝ 38% 档实测栏宽（1440 窗 · 240 侧栏）。 */
+const PANEL_FRAME = {
+  width: 455,
+  height: 320,
+  display: "flex",
+  border: "1px solid var(--ow-border)",
+  background: "var(--ow-surface)",
+} as const
+
+/** 跑着的子任务：标题 ＋ mono 读数。 */
+export const Default: Story = {
+  args: { title: "核对组件库导出", status: "梳理思路 · 12s", turns: SUB_TURNS },
+  render: (args) => (
+    <div style={PANEL_FRAME}>
+      <SubAgentPane {...args} />
+    </div>
+  ),
+}
+
+/** 收工后：不传 `status`，那颗点与读数一起消失，头里只剩标题。 */
+export const NoStatus: Story = {
+  args: { title: "核对组件库导出", turns: SUB_TURNS },
+  render: (args) => (
+    <div style={PANEL_FRAME}>
+      <SubAgentPane {...args} />
+    </div>
+  ),
+}
+
+/** 多轮：竖线在轮与轮之间连着走，形差只在节点（环 / 点）。 */
+export const ManyTurns: Story = {
+  args: {
+    title: "核对组件库导出",
+    status: "对照表 3/4 · 1m02s",
+    turns: [
+      ...SUB_TURNS,
+      { id: "u2", role: "user", text: "组件页那一节按「导航层级数」排序。" },
+      { id: "a2", role: "agent", text: "已按层级数排：A 站 3 层、B 站 2 层、C 站 4 层，C 站多出的一层是「变体」页。" },
+      { id: "a3", role: "agent", text: "对照表已写进 docs/competitor-ia.md，四类各一节，差异行在表尾单列。" },
+    ],
+  },
+  render: (args) => (
+    <div style={PANEL_FRAME}>
+      <SubAgentPane {...args} />
+    </div>
+  ),
+}
+
+/** 坐进真栏子里：`WorkbenchSidePanel` 38% 档。 */
+export const InSidePanel: Story = {
+  args: { title: "核对组件库导出", status: "梳理思路 · 12s", turns: SUB_TURNS },
+  render: (args) => (
+    <div className="desktop-workbench-row" data-side-panel="on" style={{ height: 420, background: "var(--ow-bg)" }}>
+      <div
+        className="owcenter"
+        style={{ display: "grid", placeItems: "center", color: "var(--ow-text-2)", fontSize: "var(--ow-fs-ui)" }}
+      >
+        会话列
+      </div>
+      <WorkbenchSidePanel>
+        <SubAgentPane {...args} />
+      </WorkbenchSidePanel>
+    </div>
+  ),
+}

package/src/components/domain/browser/SubAgentPane/SubAgentPaneSource.test.mjs

@@ -0,0 +1,48 @@
+import assert from "node:assert/strict"
+import { readFile } from "node:fs/promises"
+import test from "node:test"
+
+const source = await readFile(new URL("./index.tsx", import.meta.url), "utf8")
+const spine = await readFile(new URL("../../chat/TranscriptSpine/index.tsx", import.meta.url), "utf8")
+
+/** 只在「代码」上验禁令：注释里点名 token 是文档，不是用法。 */
+const code = source.replace(/\/\*[\s\S]*?\*\//g, "").replace(/^[ \t]*\/\/.*$/gm, "")
+
+/* A8-B6（原型模板 2344–2368）：子任务页签＝一段小会话的时间轴。 */
+test("头 10/14 ＋ 底线，标题 fs-ui 500，读数 mono caption ＋ 6px 无彩点", () => {
+  assert.ok(/^['"]use client['"]/.test(source))
+  assert.match(code, /border-b border-\[color:var\(--ow-border\)\] px-3\.5 py-2\.5/)
+  assert.match(code, /text-ow-fs-ui font-medium/)
+  assert.match(code, /font-\[family-name:var\(--ow-font-mono\)\] text-ow-fs-caption/)
+  assert.match(code, /w-1\.5 h-1\.5 shrink-0 rounded-full bg-\[var\(--ow-progress-fill\)\]/)
+  // 读数不传就整块不渲染（连点一起消失）
+  assert.match(code, /\{status != null && \(/)
+})
+
+test("体 16/14 ＋ 轮间 12 ＋ 自滚；轨道列 12 宽、1.5px --ow-timeline 竖线通高", () => {
+  assert.match(code, /flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto px-3\.5 py-4/)
+  assert.match(code, /relative w-3 shrink-0/)
+  assert.match(code, /absolute left-\[5px\] top-0 bottom-0 w-\[1\.5px\] bg-\[var\(--ow-timeline\)\]/)
+})
+
+test("节点形差同主会话脊柱：用户 8×8 空心环（环心填地色断线）/ 智能体 7×7 实心点", () => {
+  assert.match(
+    code,
+    /absolute left-px top-1\.5 w-2 h-2 rounded-full border-\[1\.5px\] border-\[color:var\(--ow-text-3\)\]/,
+  )
+  assert.match(code, /bg-\[var\(--ow-turn-ground,var\(--ow-surface\)\)\]/)
+  assert.match(code, /absolute left-\[1\.5px\] top-\[7px\] w-\[7px\] h-\[7px\] rounded-full bg-\[var\(--ow-text\)\]/)
+  // 环心取所在地色这一条与 TranscriptSpine 同源（R2 口径），不是各写各的
+  assert.match(spine, /var\(--ow-turn-ground, var\(--ow-surface\)\)/)
+})
+
+test("正文 fs-ui / lh 1.7 / text-wrap pretty", () => {
+  assert.match(code, /text-ow-fs-ui leading-\[1\.7\] text-\[color:var\(--ow-text\)\] \[text-wrap:pretty\]/)
+})
+
+test("R3 中性件：一律无彩——零荧黄、零信标、零功能色、零裸色值、贴地零影", () => {
+  assert.doesNotMatch(code, /--ow-primary|--ow-beacon|--ow-yellow|--ow-success|--ow-warning|--ow-error|--ow-info/)
+  assert.doesNotMatch(code, /BeaconSpinner|BeaconIcons/)
+  assert.doesNotMatch(code, /#[0-9a-f]{3,8}|rgba?\(/i)
+  assert.doesNotMatch(code, /shadow/)
+})

package/src/components/domain/browser/SubAgentPane/index.tsx

@@ -0,0 +1,121 @@
+"use client"
+
+import type { ReactNode } from "react"
+import { cn } from "../../../../lib/utils"
+
+/**
+ * SubAgentPane —— 会话侧开栏第四类页签「子任务」的**画面**（原型模板 2344–2368 · A8-B6）。
+ *
+ * 子任务是一段**独立的小会话**（子智能体自己的用户轮 / 智能体轮），所以栏里给的是
+ * 一条时间轴，不是进程表：
+ *   · 轨道与节点**照抄主会话的脊柱**（`TranscriptSpine` / 桌面端 `.chat__inner .turn::before`）——
+ *     1.5px `--ow-timeline` 竖线贯穿，用户轮＝空心环（环心填所在地色，把线断开），
+ *     智能体轮＝实心点压在线上。窄栏里节点尺寸各降一档（11 → 8/7，轨道列 12 宽），
+ *     形差与主会话完全同源，只是小一号。
+ *   · 空心环的环心取 `var(--ow-turn-ground, var(--ow-surface))`，与 `TranscriptSpine`
+ *     同源：栏体是 `--ow-surface` 面时自然断线，将来若把本件放到 `--ow-bg` 地上，
+ *     宿主注入 `--ow-turn-ground` 就跟着换，不会变成一枚更亮的盘。
+ *
+ * **与 `SubAgentThread` 的分工**（都叫「子任务」，但不是一件事）：
+ *   · `chat/SubAgentThread` ＝ 并行子进程**列表**（名字 ＋ 状态 ＋ 耗时，31 高行）；
+ *   · 本件 ＝ 单个子任务的**转录**。两件共用同一条铁律：**一律无彩**——
+ *     运行读数那颗点取 `--ow-progress-fill`（无彩进度色），不点荧黄、不引 info 蓝 / success 绿。
+ *     荧黄只属主屏那三极，右栏里子任务不占任何一极（R3 中性件）。
+ *
+ * 形制（原型 2345–2367 逐条）：头 `10px 14px` ＋ 底 1px `--ow-border`，标题 `--ow-fs-ui` 500，
+ * 右侧读数＝6px `--ow-progress-fill` 圆点 ＋ mono `--ow-fs-caption` `--ow-text-2`；
+ * 体 `16px 14px` ＋ 轮间 gap 12 ＋ 自滚；轨道列宽 12，竖线 `left:5px` 通高；
+ * 用户点 `left:1px / top:6px` 8×8 ＋ 1.5px `--ow-text-3` 描边，智能体点 `left:1.5px / top:7px`
+ * 7×7 实心 `--ow-text`；正文 `--ow-fs-ui` / `line-height:1.7` / `text-wrap:pretty`。
+ * 贴地零影、无圆角——它铺满页签体那一格。
+ */
+
+export interface SubAgentPaneTurn {
+  /** 稳定 key；不传就按下标。 */
+  id?: string
+  /** `user` ＝空心环（子任务的指令），`agent` ＝实心点（子智能体的回话）。 */
+  role: "user" | "agent"
+  /** 正文（一段话；富内容也收）。 */
+  text: ReactNode
+}
+
+export interface SubAgentPaneProps {
+  /** 子任务标题，如「核对组件库导出」。 */
+  title: ReactNode
+  /**
+   * 右上读数（mono），如「梳理思路 · 12s」。不传就只剩标题、连那颗点也不出。
+   * 点是**无彩**的 `--ow-progress-fill`，不是状态极——右栏不点荧黄。
+   */
+  status?: ReactNode
+  /** 转录轮次。 */
+  turns: readonly SubAgentPaneTurn[]
+  /** 无障碍名，缺省「子任务」。 */
+  label?: string
+  className?: string
+}
+
+export function SubAgentPane({ title, status, turns, label = "子任务", className = "" }: SubAgentPaneProps) {
+  return (
+    <div data-slot="sub-agent-pane" aria-label={label} className={cn("flex min-h-0 flex-1 flex-col", className)}>
+      <div
+        data-ow-part="header"
+        className="flex shrink-0 items-center gap-2 border-b border-[color:var(--ow-border)] px-3.5 py-2.5"
+      >
+        <span
+          data-ow-part="title"
+          className="min-w-0 flex-1 truncate text-ow-fs-ui font-medium text-[color:var(--ow-text)]"
+        >
+          {title}
+        </span>
+        {status != null && (
+          <span
+            data-ow-part="status"
+            className="flex shrink-0 items-center gap-1.5 font-[family-name:var(--ow-font-mono)] text-ow-fs-caption [font-variant-numeric:tabular-nums] text-[color:var(--ow-text-2)]"
+          >
+            {/* 无彩进度点：--ow-progress-fill 两档都是中性色，不是荧黄状态极。 */}
+            <span
+              data-ow-part="status-dot"
+              aria-hidden="true"
+              className="w-1.5 h-1.5 shrink-0 rounded-full bg-[var(--ow-progress-fill)]"
+            />
+            <span>{status}</span>
+          </span>
+        )}
+      </div>
+
+      <div data-ow-part="body" className="flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto px-3.5 py-4">
+        {turns.map((turn, index) => (
+          <div key={turn.id ?? index} data-ow-part="turn" data-role={turn.role} className="flex gap-3">
+            <div data-ow-part="rail" className="relative w-3 shrink-0">
+              <span
+                data-ow-part="line"
+                aria-hidden="true"
+                className="absolute left-[5px] top-0 bottom-0 w-[1.5px] bg-[var(--ow-timeline)]"
+              />
+              {turn.role === "user" ? (
+                /* 空心环：环心填所在地色才能把脊线断开（同 TranscriptSpine 的 R2 口径）。 */
+                <span
+                  data-ow-part="dot"
+                  aria-hidden="true"
+                  className="absolute left-px top-1.5 w-2 h-2 rounded-full border-[1.5px] border-[color:var(--ow-text-3)] bg-[var(--ow-turn-ground,var(--ow-surface))]"
+                />
+              ) : (
+                <span
+                  data-ow-part="dot"
+                  aria-hidden="true"
+                  className="absolute left-[1.5px] top-[7px] w-[7px] h-[7px] rounded-full bg-[var(--ow-text)]"
+                />
+              )}
+            </div>
+            <div
+              data-ow-part="text"
+              className="min-w-0 flex-1 text-ow-fs-ui leading-[1.7] text-[color:var(--ow-text)] [text-wrap:pretty]"
+            >
+              {turn.text}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

package/src/components/domain/browser/TerminalPane/TerminalPane.stories.tsx

@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WorkbenchSidePanel } from "../../desktop/WorkbenchSidePanel"
+import { TerminalPane } from "./index"
+
+/**
+ * 侧开栏「终端」页签（原型模板 2340–2342）。
+ *
+ * 核对点（两个主题都要看，**两张应当逐像素一致**）：整块是常暗域（`data-theme="dark"`
+ * ＋ `--ow-term-bg` / `--ow-term-text`），内距 12/14，mono ＋ `--ow-fs-code`/`--ow-lh-code`，
+ * 长行 `pre-wrap` 折行不横滚；尾部 8×15 块状光标取 `--ow-term-cursor`（荧黄）——
+ * 全屏**状态极 ×1**，只属这一颗。
+ */
+const meta = {
+  title: "Preview/TerminalPane",
+  component: TerminalPane,
+  parameters: { layout: "fullscreen" },
+} satisfies Meta<typeof TerminalPane>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** 原型 3277–3287 的那段输出。 */
+const TERM_TEXT = [
+  "$ pnpm --filter @orbitwork/desktop dev",
+  "> vite v5.4.2  ready in 412 ms",
+  "",
+  "  ➜  Local:   http://localhost:5173/",
+  "  ➜  Electron: 主进程已启动 (pid 48213)",
+  "",
+  "[preload] 窄接口 IPC 已注册：fs / net / pty / webview",
+  "[renderer] orbitwork-ui 0.1.0 · 382 components",
+  "$ ",
+].join("\n")
+
+/** 455 ＝ 38% 档实测栏宽（1440 窗 · 240 侧栏）。 */
+const PANEL_FRAME = {
+  width: 455,
+  height: 320,
+  display: "flex",
+  border: "1px solid var(--ow-border)",
+  background: "var(--ow-surface)",
+} as const
+
+/** 聚焦中的终端：尾部那颗块状光标亮着（状态极 ×1）。 */
+export const Default: Story = {
+  args: { text: TERM_TEXT },
+  render: (args) => (
+    <div style={PANEL_FRAME}>
+      <TerminalPane {...args} />
+    </div>
+  ),
+}
+
+/** 失焦 / 只读回放：`cursor={false}`，全屏荧黄 0 处。 */
+export const NoCursor: Story = {
+  args: { text: TERM_TEXT, cursor: false },
+  render: (args) => (
+    <div style={PANEL_FRAME}>
+      <TerminalPane {...args} />
+    </div>
+  ),
+}
+
+/** 超长行：`pre-wrap` ＋ `word-break` 折行，窄栏里永不出横滚条。 */
+export const LongLines: Story = {
+  args: {
+    text:
+      "$ node scripts/check-ds2.mjs --report=json --allowlist=scripts/ds2-allowlist.json --paths=src/components/domain/browser/TerminalPane\n" +
+      "ERROR  src/components/domain/browser/TerminalPane/index.tsx:63  --ow-term-bg 越界：--ow-term-*/--ow-ansi-* 仅终端/代码语境可用\n" +
+      "$ ",
+  },
+  render: (args) => (
+    <div style={PANEL_FRAME}>
+      <TerminalPane {...args} />
+    </div>
+  ),
+}
+
+/** 坐进真栏子里：`WorkbenchSidePanel` 38% 档，终端铺满页签体那一格。 */
+export const InSidePanel: Story = {
+  args: { text: TERM_TEXT },
+  render: (args) => (
+    <div className="desktop-workbench-row" data-side-panel="on" style={{ height: 420, background: "var(--ow-bg)" }}>
+      <div
+        className="owcenter"
+        style={{ display: "grid", placeItems: "center", color: "var(--ow-text-2)", fontSize: "var(--ow-fs-ui)" }}
+      >
+        会话列
+      </div>
+      <WorkbenchSidePanel>
+        <TerminalPane {...args} />
+      </WorkbenchSidePanel>
+    </div>
+  ),
+}

package/src/components/domain/browser/TerminalPane/TerminalPaneSource.test.mjs

@@ -0,0 +1,52 @@
+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 console_ = await readFile(new URL("../WebPreviewConsole/index.tsx", import.meta.url), "utf8")
+const allowlist = JSON.parse(
+  await readFile(new URL("../../../../../scripts/ds2-allowlist.json", import.meta.url), "utf8"),
+)
+
+/** 只在「代码」上验禁令：注释里点名 token 是文档，不是用法。 */
+const code = source.replace(/\/\*[\s\S]*?\*\//g, "").replace(/^[ \t]*\/\/.*$/gm, "")
+
+/* A8-B6（原型模板 2340–2342）：终端页签＝常暗域画面，配方照搬 WebPreviewConsole。 */
+test("常暗域配方与 WebPreviewConsole 同源：data-theme=dark ＋ --ow-term-bg/-text", () => {
+  assert.ok(/^['"]use client['"]/.test(source))
+  assert.match(code, /data-theme="dark"/)
+  assert.match(code, /background: "var\(--ow-term-bg\)"/)
+  assert.match(code, /color: "var\(--ow-term-text\)"/)
+  // 同一套写法（style 里给两条常暗色），不是第二种暗法
+  assert.match(console_, /background: "var\(--ow-term-bg\)"/)
+  assert.match(console_, /color: "var\(--ow-term-text\)"/)
+})
+
+test("正文形制照原型 2341：12/14 内距 ＋ mono ＋ fs-code/lh-code ＋ pre-wrap ＋ 自滚", () => {
+  assert.match(code, /px-3\.5 py-3/)
+  assert.match(code, /font-\[family-name:var\(--ow-font-mono\)\]/)
+  assert.match(code, /text-ow-fs-code/)
+  assert.match(code, /leading-\[var\(--ow-lh-code\)\]/)
+  assert.match(code, /whitespace-pre-wrap/)
+  assert.match(code, /\[word-break:break-word\]/)
+  assert.match(code, /min-h-0 flex-1 overflow-auto/)
+})
+
+test("光标＝8×15 块状 --ow-term-cursor，vertical-align -3px，可关（状态极同屏唯一）", () => {
+  assert.match(code, /w-2 h-\[15px\] align-\[-3px\]/)
+  assert.match(code, /background: "var\(--ow-term-cursor\)"/)
+  assert.match(source, /cursor = true/)
+  assert.match(code, /\{cursor && \(/)
+})
+
+test("R3 立面：贴地零影、无圆角、零裸色值（暗色由 term token 承担）", () => {
+  assert.doesNotMatch(code, /shadow|rounded|border-radius/)
+  assert.doesNotMatch(code, /#[0-9a-f]{3,8}|rgba?\(/i)
+  // 只画画面，不碰能力：没有 PTY / 输入 / xterm 接线
+  assert.doesNotMatch(code, /onKeyDown|<input|<textarea|xterm|pty/i)
+})
+
+test("term 语境已在 ds2-allowlist 记名（否则守卫会把 --ow-term-* 判越界）", () => {
+  assert.ok(allowlist.term.includes("src/components/domain/browser/TerminalPane/**"))
+  assert.ok(allowlist.$reasons["src/components/domain/browser/TerminalPane/**"].startsWith("term："))
+})

package/src/components/domain/browser/TerminalPane/index.tsx

@@ -0,0 +1,75 @@
+"use client"
+
+import type { ReactNode } from "react"
+import { cn } from "../../../../lib/utils"
+
+/**
+ * TerminalPane —— 会话侧开栏第三类页签「终端」的**画面**（原型模板 2340–2342 · A8-B6）。
+ *
+ * ── 常暗域（§3 白名单）─────────────────────────────────────────────────
+ * 终端不是普通面板：整块挂 `data-theme="dark"`，底/字取恒定 `--ow-term-bg` /
+ * `--ow-term-text`，**浅主题下也是暗的**，两个主题下逐像素一致。配方原样照搬同域已验证的
+ * `WebPreviewConsole`（日志区 `data-theme="dark"` ＋ `--ow-term-*`），两件共用一套语境，
+ * 免得终端出现第二种暗法。研发侧 `.terminal-view` 现在走 `--ow-bg-2`（跟着主题翻），
+ * 与原型不符，接线时按本件的配方改（见 notes / devDependency）。
+ *
+ * ── 荧黄：状态极 ×1，且只属光标 ───────────────────────────────────────
+ * `--ow-term-cursor` 在两个主题下都解析成荧黄（tokens.css:512 / 736）。§4 的口径是
+ * 「聚焦的终端光标」＝状态极四选一之一，所以这颗 8×15 的块状光标是本件**唯一**允许点亮的
+ * 地方，且只在这一格终端被聚焦（真机＝PTY 正在等输入）时点。宿主同屏若另有一处状态极
+ * （聚焦运行中 / 图表今日 / 拖放手势），必须把这里的 `cursor` 关掉——三极各限一处。
+ * 因此 `cursor` 是显式开关而不是「永远画一颗」：只读回放、历史输出、失焦的终端都传 false。
+ *
+ * ── 只出画面，不出能力 ─────────────────────────────────────────────────
+ * PTY、xterm.js、ANSI 转义、输入回显全是宿主/主进程的事；本件只负责「一块常暗的
+ * pre-wrap 文本域 ＋ 一颗尾光标」的形制。要带级别色的**日志**出口请用
+ * `WebPreviewConsole`（那件是折叠式控制台，有 ANSI 级别色与计数徽标），两件不重叠。
+ *
+ * 形制（原型 2341 逐条）：`flex:1 1 auto` ＋ `min-height:0` ＋ 自滚；内距 `12px 14px`；
+ * mono ＋ `--ow-fs-code` / `--ow-lh-code`；`white-space:pre-wrap` ＋ `word-break:break-word`；
+ * 光标 8×15 块状、`vertical-align:-3px`。贴地零影、无圆角——它铺满页签体那一格。
+ */
+
+export interface TerminalPaneProps {
+  /** 终端输出正文（含换行，按 `pre-wrap` 原样排）。与 `children` 二选一。 */
+  text?: string
+  /** 富内容出口（如宿主自己渲染的 ANSI 片段）；给了就替掉 `text`。 */
+  children?: ReactNode
+  /**
+   * 尾部块状光标。默认 **true**＝这一格终端正被聚焦（原型 2341 一直画着）。
+   * 它占三极里的状态极，同屏只许一处：不聚焦 / 只读回放时传 false。
+   */
+  cursor?: boolean
+  /** 无障碍名，缺省「终端」。 */
+  label?: string
+  className?: string
+}
+
+export function TerminalPane({ text, children, cursor = true, label = "终端", className = "" }: TerminalPaneProps) {
+  return (
+    <div
+      data-slot="terminal-pane"
+      data-theme="dark"
+      role="log"
+      aria-live="polite"
+      aria-label={label}
+      className={cn(
+        "min-h-0 flex-1 overflow-auto px-3.5 py-3",
+        "font-[family-name:var(--ow-font-mono)] text-ow-fs-code leading-[var(--ow-lh-code)]",
+        "whitespace-pre-wrap [word-break:break-word]",
+        className,
+      )}
+      style={{ background: "var(--ow-term-bg)", color: "var(--ow-term-text)" }}
+    >
+      {children ?? text}
+      {cursor && (
+        <span
+          data-ow-part="cursor"
+          aria-hidden="true"
+          className="inline-block w-2 h-[15px] align-[-3px]"
+          style={{ background: "var(--ow-term-cursor)" }}
+        />
+      )}
+    </div>
+  )
+}

package/src/components/domain/browser/WebPreview/WebPreview.stories.tsx

@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { BeaconSpinner } from "../../../composite/BeaconSpinner"
+import { WebPreview, WebPreviewBody } from "./index"
+
+/**
+ * Browser/WebPreview —— 组合式旧配方层的**根件 ＋ body**。
+ *
+ * R2：这个文件原来 `component` 与全部 story 渲的都是 `WebPreviewShell`，
+ * 而 `Preview/WebPreviewShell` 已有一份完整覆盖 —— 等于第二份重复演示，
+ * 真正还在导出的 `WebPreview` 根件与 `WebPreviewBody`（iframe）反而零覆盖。
+ * 现在只演示本目录导出的这两件；三态完整的壳去 `Preview/WebPreviewShell` 看。
+ *
+ * 页面内容一律走内联 `data:` 文档：story 不发起外网请求，截图/交互测试不会挂在等网络上。
+ */
+const meta = {
+  title: "Browser/WebPreview",
+  component: WebPreview,
+  parameters: { layout: "padded" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof WebPreview>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const FRAME = { height: 420 }
+
+/** 内联页面：不出网，避免 story 停在永不结束的请求上。 */
+function inlinePage(label: string): string {
+  const html = `<!doctype html><meta charset="utf-8"><body style="margin:0;height:100vh;display:flex;align-items:center;justify-content:center;font:14px/1.5 system-ui,sans-serif;color:#5B5C58;background:#F1F0EA">${label}</body>`
+  return `data:text/html;charset=utf-8,${encodeURIComponent(html)}`
+}
+
+/** 根件 ＋ body：根件出卡壳（r12 ＋ 1px border-strong ＋ 零影），body 出 iframe。 */
+export const Default: Story = {
+  render: () => (
+    <div style={FRAME}>
+      <WebPreview defaultUrl={inlinePage("页面内容（WebPreviewBody 的 iframe 落位）")}>
+        <WebPreviewBody />
+      </WebPreview>
+    </div>
+  ),
+}
+
+/** `loading` 插槽：覆在 iframe 上的一层。运行态走锁定件 BeaconSpinner（§9 无旋转圈）。 */
+export const WithLoading: Story = {
+  render: () => (
+    <div style={FRAME}>
+      <WebPreview defaultUrl={inlinePage("页面内容")}>
+        <WebPreviewBody
+          loading={
+            <div className="absolute inset-0 flex items-center justify-center gap-2 bg-[var(--ow-surface)] text-[color:var(--ow-text-2)]">
+              <BeaconSpinner size={18} />
+              <span className="text-ow-fs-ui">正在加载…</span>
+            </div>
+          }
+        />
+      </WebPreview>
+    </div>
+  ),
+}
+
+/** body 自带 `src` 时不读 Context 的 url（宿主自己摆插槽的用法）。 */
+export const BodyWithOwnSrc: Story = {
+  render: () => (
+    <div style={FRAME}>
+      <WebPreview>
+        <WebPreviewBody src={inlinePage("src 直传，绕过 Context 的 url")} />
+      </WebPreview>
+    </div>
+  ),
+}