@orbit-work/ui 0.1.1 → 0.1.2

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

@@ -1,96 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,121 +0,0 @@
-"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

@@ -1,95 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

@@ -1,75 +0,0 @@
-"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

@@ -1,71 +0,0 @@
-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>
-  ),
-}