@orbit-work/ui 0.1.0

package/src/components/domain/browser/WebPreviewShell/WebPreviewShellSource.test.mjs

@@ -0,0 +1,172 @@
+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 field = await readFile(new URL("../../../primitives/Field/index.tsx", import.meta.url), "utf8")
+const styles = await readFile(new URL("../../../../../styles/desktop-surfaces.css", import.meta.url), "utf8")
+
+/** 只在「代码」上验禁令：注释里点名 token 是文档，不是用法。 */
+const code = source.replace(/\/\*[\s\S]*?\*\//g, "").replace(/^[ \t]*\/\/.*$/gm, "")
+
+test("地址栏归口 Field 原语语法，不再手搓 input 三态边框", () => {
+  assert.match(source, /import \{ Field \}/)
+  assert.match(source, /<Field\b/)
+  assert.doesNotMatch(source, /<input\b/)
+  // 字段壳自己给 rest→hover→focus，本件不得再写边框色
+  assert.doesNotMatch(source, /--ow-input-border/)
+})
+
+test("地址是 §7 读数：mono + tabular-nums", () => {
+  assert.match(source, /font-\[family-name:var\(--ow-font-mono\)\][\s\S]{0,80}\[font-variant-numeric:tabular-nums\]/)
+})
+
+test("工具栏 40 高（--ow-h-lg）、图标钮 28（§7 度量表）", () => {
+  assert.match(source, /height: "var\(--ow-h-lg\)"/)
+  // R2：图标钮一律走 Button 的 icon 槽——icon-only 由原语给 28 方与 16 图形，
+  // 本件不再手补 w-7 h-7 / [&_svg]:w-4（一件里三处图标各一套写法是口径散点）。
+  assert.doesNotMatch(source, /const NAV_BTN =[\s\S]*?w-7 h-7/)
+  assert.doesNotMatch(source, /\[&_svg\]:w-4/)
+  assert.match(source, /icon=\{<ChevLeft aria-hidden="true" \/>\}/)
+  assert.match(source, /icon=\{<ChevRight aria-hidden="true" \/>\}/)
+  assert.match(source, /icon=\{loading \? <Close aria-hidden="true" \/> : <Refresh aria-hidden="true" \/>\}/)
+})
+
+// 地址栏站点图标曾渲成 0×0：Icons 族裸 svg 只有 viewBox 没有 width/height，
+// 在没有确定尺寸的 flex 壳里解析成 0。尺寸由 Field 的 affix 壳一次性给足。
+test("地址栏前缀图标有尺寸：Field 的 affix 壳补 16 方", () => {
+  assert.match(field, /const affixClasses =\s*\n?\s*"[^"]*\[&_svg\]:w-4 \[&_svg\]:h-4/)
+})
+
+test("§6 容器三态：空=EmptyState 信标母题 / 载=ProgressBar / 错=InlineMessage", () => {
+  assert.match(source, /import \{ EmptyState \}/)
+  assert.match(source, /import \{ InlineMessage \}/)
+  assert.match(source, /import \{ ProgressBar \}/)
+  assert.match(source, /<EmptyState message=\{emptyMessage\}/)
+  assert.match(source, /<InlineMessage\s+variant="error"/)
+  assert.match(source, /<ProgressBar[\s\S]*?indeterminate/)
+})
+
+/* A8-B4（原型模板 2303–2310 · 裁决 6「空态太小」）：空/占位体那块地。 */
+test("空/占位体：--ow-mat 占位地 ＋ 48×30 母题 ＋ 360 量度一句话", () => {
+  const empty = code.match(/<div data-ow-part="empty"[\s\S]*?<\/div>/)?.[0] ?? ""
+  assert.match(empty, /bg-\[var\(--ow-mat\)\]/)
+  assert.match(empty, /\bp-6\b/)
+  // 母题按原型放到 48（宽给 48，高由 EmptyState 按紧裁 bbox 比例推成 30）——md 档默认的 40 太小
+  assert.match(empty, /markSize=\{48\}/)
+  // 一句话量度 360；md 档自带的 px-4 py-8 让位给外框的 24
+  assert.match(empty, /max-w-\[360px\]/)
+  assert.match(empty, /\bp-0\b/)
+  // 占位地只许走 token，不写裸色
+  assert.doesNotMatch(empty, /#[0-9a-f]{3,8}|rgba?\(/i)
+})
+
+test("载入进度复用原语而不是自造 keyframes（禁 shimmer / 自定义缓动）", () => {
+  assert.doesNotMatch(source, /@keyframes|animate-/)
+})
+
+test("禁用态逐 token，不用统一透明度（§6）", () => {
+  assert.match(source, /disabled:text-\[color:var\(--ow-disabled-text\)\]/)
+  // 禁令字面量拼出来写：整串直接写进源码会被 check-ds2 的 disabled 规则当成违规命中。
+  const banned = new RegExp(`disabled:${"opacity-"}|--ow-${"opacity-disabled"}`)
+  assert.doesNotMatch(source, banned)
+})
+
+test("裸域名补协议在 normalizePreviewUrl 一处收口", () => {
+  assert.match(source, /export function normalizePreviewUrl/)
+  assert.match(source, /\^\[a-z\]\[a-z0-9\+\.-\]\*:/)
+  assert.match(source, /`https:\/\/\$\{trimmed\}`/)
+})
+
+test("IME 感知回车（中文输入法回车不误提交）", () => {
+  assert.match(source, /useImeAwareEnter/)
+  assert.match(source, /if \(isImeEnter\(event\)\) return/)
+})
+
+test("R3 中性件：无信标/荧黄，也不借 --ow-primary 假冒极色", () => {
+  assert.doesNotMatch(code, /--ow-beacon|--ow-accent-dot|--ow-yellow|--ow-data-today/)
+  assert.doesNotMatch(code, /--ow-primary\b/)
+})
+
+test("Tailwind 任意值 var() 带类型标注", () => {
+  assert.equal(source.match(/(?:text|border)-\[(?!color:)var\(/g), null)
+  assert.equal(source.match(/font-\[(?!family-name:)var\(/g), null)
+})
+
+// ── A8-B3（裁决 9 · 原型模板 2273–2291）· 地址条 compact 档 ──
+// 会话侧开栏那一档窄工具条：条 34 / 无前进钮 / 地址位 26 pill / 载入转圈进 pill /
+// 右端 24 查找钮。40 高完整档（独立预览窗、内容区整屏）必须逐字不动 —— 上面那批断言看门。
+
+test("compact 档：条 34 高由类给（内联高度只留给默认档，否则压掉类规则）", () => {
+  assert.match(source, /compact\?: boolean/)
+  assert.match(source, /"web-preview-shell flex flex-col/)
+  assert.match(source, /compact && "web-preview-shell--compact"/)
+  assert.match(source, /style=\{compact \? undefined : \{ height: "var\(--ow-h-lg\)" \}\}/)
+  assert.match(styles, /\.web-preview-shell--compact \[data-ow-part="toolbar"\] \{ height: 34px; \}/)
+  assert.match(
+    styles,
+    /\.web-preview-shell--compact \[data-ow-part="nav-group"\] > button,[\s\S]*?\{[^}]*width: 24px; min-width: 24px; height: 24px;[^}]*border-radius: var\(--ow-radius-2xs\);/,
+  )
+})
+
+test("compact 档：去前进钮，只留后退 ＋ 重载", () => {
+  assert.match(
+    source,
+    /\{!compact && \(\s*<Button[\s\S]*?icon=\{<ChevRight aria-hidden="true" \/>\}[\s\S]*?aria-label="前进"/,
+  )
+  // 后退与重载不带条件，两档都在
+  assert.match(source, /icon=\{<ChevLeft aria-hidden="true" \/>\}[\s\S]{0,240}aria-label="后退"/)
+  assert.match(source, /icon=\{loading \? <Close aria-hidden="true" \/> : <Refresh aria-hidden="true" \/>\}/)
+})
+
+test("compact 档地址位＝26 高 pill，件仍是 Field（hover/focus 三态照旧由字段壳给）", () => {
+  assert.match(source, /className="web-preview-shell__url min-w-0 flex-1/)
+  assert.match(
+    styles,
+    /\.web-preview-shell--compact \.web-preview-shell__url \[data-ow-part="shell"\] \{[^}]*height: 26px;[^}]*border-radius: var\(--ow-radius-xs\);/s,
+  )
+  assert.match(
+    styles,
+    /\.web-preview-shell--compact \.web-preview-shell__url input \{[^}]*font-size: var\(--ow-fs-caption\);[^}]*color: var\(--ow-text-2\);/s,
+  )
+  // pill 的底与边仍取 Field 的 --ow-input-bg / --ow-input-border：本件不复写边框色（§6 字段壳单点）
+  const pill =
+    styles.match(/\.web-preview-shell--compact \.web-preview-shell__url \[data-ow-part="shell"\] \{[^}]*\}/s)?.[0] ?? ""
+  assert.doesNotMatch(pill, /background|border-color|box-shadow/)
+})
+
+test("compact 档：https 才亮 --ow-success 锁形前缀（§4 状态极，绿只说安全这一件事）", () => {
+  assert.match(source, /const securePrefix = \/\^https:\/i\.test\(url\) \?/)
+  assert.match(source, /text-\[color:var\(--ow-success\)\]/)
+  assert.match(source, /<Lock aria-hidden="true" \/>/)
+  assert.match(source, /prefix=\{urlPrefix \?\? \(compact \? securePrefix : <Globe aria-hidden="true" \/>\)\}/)
+})
+
+test("compact 档：载入指示收进 pill 尾部的 12 转圈，通栏 ProgressBar 只留给默认档", () => {
+  assert.match(
+    source,
+    /compact && loading \? <span className="web-preview-shell__url-spin" aria-hidden="true" \/> : urlSuffix/,
+  )
+  assert.match(source, /\{loading && !compact && <ProgressBar indeterminate/)
+  assert.match(
+    styles,
+    /\.web-preview-shell__url-spin \{[^}]*width: 12px; height: 12px;[^}]*border-top-color: transparent;[^}]*border-radius: var\(--ow-radius-pill\);[^}]*animation: ow-spin var\(--ow-dur-spin-fast\) linear infinite;/s,
+  )
+  // §9：自转匀速，但 reduced-motion 下要停
+  assert.match(
+    styles,
+    /@media \(prefers-reduced-motion: reduce\) \{ \.web-preview-shell__url-spin \{ animation: none; \} \}/,
+  )
+  // 不自造 keyframes：复用 §9 唯一转子帧
+  assert.doesNotMatch(styles, /@keyframes web-preview-shell__url-spin/)
+})
+
+test("compact 档：右端 24 方查找钮（查找条本体仍走 subToolbar 插槽）", () => {
+  assert.match(source, /onFind\?: \(\) => void/)
+  assert.match(
+    source,
+    /\{onFind && \(\s*<Button[\s\S]*?data-ow-part="find"[\s\S]*?icon=\{<Search aria-hidden="true" \/>\}[\s\S]*?aria-label="查找"/,
+  )
+  assert.match(styles, /\[data-ow-part="toolbar"\] > \[data-ow-part="find"\]/)
+  assert.match(source, /\{subToolbar\}/)
+})

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

@@ -0,0 +1,324 @@
+"use client"
+
+import { type ReactNode, useCallback, useEffect, useState } from "react"
+import { useImeAwareEnter } from "../../../../hooks/useImeAwareEnter"
+import { cn } from "../../../../lib/utils"
+import { ChevLeft, ChevRight, Close, Globe, Lock, Refresh, Search } from "../../../composite/Icons"
+import { Button } from "../../../primitives"
+import { EmptyState } from "../../../primitives/EmptyState"
+import { Field } from "../../../primitives/Field"
+import { InlineMessage } from "../../../primitives/InlineMessage"
+import { ProgressBar } from "../../../primitives/ProgressBar"
+
+/**
+ * WebPreviewShell —— 网页预览「壳」（蓝图批次④：WebPreview 族 7 件收敛为
+ * Shell / Nav / Console 三件骨架中的第一件）。
+ *
+ * 壳＝**地址栏 ＋ 工具组 ＋ 内容区 ＋ 状态**，不含标签条（那是 `WebPreviewNav`）
+ * 也不含控制台（那是 `WebPreviewConsole`）。
+ *
+ * 归口（旧七件 → 新三件）：
+ *  - `BrowserNavBarView`        → 本件的前进/后退/刷新组 ＋ 地址栏 ＋ `actions` 工具组；
+ *  - `BrowserLoadErrorView`     → 本件的 `error` 态（InlineMessage 一句人话 ＋ mono 详情 ＋ 重载）；
+ *  - `BrowserMoreMenuView`      → `actions` 里的 Menu 配方；
+ *  - `BrowserFindBarView`
+ *    / `BrowserDeviceToolbarView` → `subToolbar` 插槽配方（贴在工具栏下的第二条）；
+ *  - `BrowserAnnotationPopupView` → Popover 配方，挂在 `children` 上，不属壳骨架；
+ *  - `BrowserImportDialogView`  → Dialog 配方，不属壳骨架；
+ *  - `BrowserTabBarView`        → `WebPreviewNav`。
+ *
+ * DS 口径：
+ *  - 地址栏走 **Field 原语语法**（三态边框 rest→hover→focus，focus 环挂 focus-within），
+ *    前缀是站点图标插槽、后缀留给 `urlSuffix`（证书/复制/快捷键 Keycap）；
+ *    地址本身是 §7 读数 → mono ＋ tabular-nums。
+ *  - 工具栏高度 40（`--ow-h-lg`），图标按钮 28×28（`--ow-h-sm`，§7 度量表）。
+ *  - §6 容器三态：空＝`EmptyState` 信标母题；载＝顶部细进度条（`--ow-progress-*`，
+ *    无 shimmer）；错＝`InlineMessage` 一句人话 ＋ mono ≤2 行详情。
+ *  - R3 中性件：壳里没有信标/荧黄元素——`--ow-primary` 在暗档就是荧黄，所以「模式开着」
+ *    的工具钮一律用 `--ow-current-bg` ＋ 文字标签双编码，不取 primary。
+ *
+ * **`compact`（A8-B3 · 原型模板 2273–2291）**：会话侧开栏那一档窄工具条——
+ * 条 34 高、**去掉前进钮**（只留后退 ＋ 重载，各 24 方）、地址位收成 26 高 pill
+ * （`--ow-surface-2` 底 ＋ 1px 边 ＋ `--ow-radius-xs`，仍是可编辑的 `Field`：静息就是
+ * 一颗 pill，hover / focus 才升起字段三态与 focus 环）、https 时前缀换成
+ * `--ow-success` 锁形、载入指示从工具栏下沿那条 `ProgressBar` 挪进 pill 尾部的 12 转圈、
+ * 右端一颗 24 方查找钮（`onFind`，查找条本体仍走 `subToolbar` 插槽）。
+ * 40 高完整版（独立预览窗 / 内容区整屏）逐字不动。窄档那几个高度（34 / 26 / 24）不在
+ * §7 控件高表上，逐条记名进 ds2-allowlist；样式在 desktop-surfaces.css 的
+ * `.web-preview-shell--compact` 段。
+ */
+
+export interface WebPreviewShellProps {
+  /** 当前地址（受控）。空串＝空态。 */
+  url?: string
+  /** 提交地址栏（回车）。裸域名由本件补 https://。 */
+  onNavigate?: (url: string) => void
+  canGoBack?: boolean
+  canGoForward?: boolean
+  onGoBack?: () => void
+  onGoForward?: () => void
+  /** 载入中：刷新钮变停止钮，工具栏下沿走一条不定长进度条。 */
+  loading?: boolean
+  onReload?: () => void
+  onStop?: () => void
+  /** 地址栏前缀插槽（站点图标/安全标识），默认地球图标。 */
+  urlPrefix?: ReactNode
+  /** 地址栏后缀插槽（复制/证书/快捷键 Keycap）。 */
+  urlSuffix?: ReactNode
+  /** 地址栏右侧工具组：更多菜单、批注、设备模拟等按钮。 */
+  actions?: ReactNode
+  /** 工具栏下的第二条：查找条 / 设备模拟条。 */
+  subToolbar?: ReactNode
+  /** 内容（webview / iframe / 文件预览适配器）。 */
+  children?: ReactNode
+  /** 加载失败一句人话；非空时盖住内容区。 */
+  error?: string
+  /** 失败技术详情，mono ≤2 行。 */
+  errorDetail?: string
+  /** 失败时的重试文案，默认「重新加载」。 */
+  retryLabel?: string
+  onRetry?: () => void
+  /** 无地址时的空态一句话。 */
+  emptyMessage?: ReactNode
+  /** 底部区域（`WebPreviewConsole`）。 */
+  footer?: ReactNode
+  /**
+   * 窄档（会话侧开栏）：条 34、无前进钮、地址位 26 高 pill、载入转圈进 pill、右端查找钮。
+   * 见文件头「compact」段。默认 false ＝ 40 高完整档。
+   */
+  compact?: boolean
+  /** 查找钮（compact 档右端 24 方放大镜）。不传就不渲染这颗钮。 */
+  onFind?: () => void
+  /** 自绘卡片立面。坐进 PreviewDialog / 应用主区时传 false。 */
+  chrome?: boolean
+  className?: string
+}
+
+/* 图标钮一律走 Button 的 `icon` 槽（icon-only ＝ §7 28×28 方，图形尺寸由原语补），
+   本件不再手补 svg 尺寸类——一件里只留一套图标钮写法。 */
+const NAV_BTN =
+  "shrink-0 text-[color:var(--ow-text-3)] hover:text-[color:var(--ow-text)] disabled:text-[color:var(--ow-disabled-text)] disabled:bg-transparent"
+
+/** 裸域名补协议：`orbit.work` → `https://orbit.work`；已带 scheme 的原样透传。 */
+export function normalizePreviewUrl(input: string): string {
+  const trimmed = input.trim()
+  if (!trimmed) return ""
+  return /^[a-z][a-z0-9+.-]*:/i.test(trimmed) ? trimmed : `https://${trimmed}`
+}
+
+export function WebPreviewShell({
+  url = "",
+  onNavigate,
+  canGoBack = false,
+  canGoForward = false,
+  onGoBack,
+  onGoForward,
+  loading = false,
+  onReload,
+  onStop,
+  urlPrefix,
+  urlSuffix,
+  actions,
+  subToolbar,
+  children,
+  error,
+  errorDetail,
+  retryLabel = "重新加载",
+  onRetry,
+  emptyMessage = "输入网址开始预览。",
+  footer,
+  compact = false,
+  onFind,
+  chrome = true,
+  className = "",
+}: WebPreviewShellProps) {
+  const [draft, setDraft] = useState(url)
+  const [editing, setEditing] = useState(false)
+  const { isImeEnter, onCompositionEnd, onCompositionStart } = useImeAwareEnter()
+
+  // 外部导航（点链接、前进后退）时把地址栏同步回来——正在输入时不抢。
+  useEffect(() => {
+    if (!editing) setDraft(url)
+  }, [url, editing])
+
+  /* https 才亮锁：绿只在「连接是安全的」这一件事上说话（§4 状态极之一），
+     http / about:blank / 空地址一律不给前缀图标（原型 2283 的 sc-if webSecure）。 */
+  const securePrefix = /^https:/i.test(url) ? (
+    <span className="inline-flex text-[color:var(--ow-success)]">
+      <Lock aria-hidden="true" />
+    </span>
+  ) : null
+
+  const submit = useCallback(() => {
+    const target = normalizePreviewUrl(draft)
+    if (!target) return
+    onNavigate?.(target)
+    setEditing(false)
+  }, [draft, onNavigate])
+
+  return (
+    <div
+      data-slot="web-preview-shell"
+      data-ow-chrome={chrome ? undefined : "none"}
+      className={cn(
+        "web-preview-shell flex flex-col w-full h-full min-h-0 bg-[var(--ow-bg)] overflow-hidden",
+        compact && "web-preview-shell--compact",
+        chrome && "[border-radius:var(--ow-radius-card)] border border-[color:var(--ow-border-strong)]",
+        className,
+      )}
+    >
+      {/* 工具栏：导航组 · 地址栏 · 工具组。高度 40 = --ow-h-lg（§7 度量表）；
+          compact 档 34 高由 .web-preview-shell--compact 段给（内联样式会压掉类规则，
+          所以这里必须让位，不能写成三目内联值）。 */}
+      <div
+        data-ow-part="toolbar"
+        className="flex shrink-0 items-center gap-1 border-b border-[color:var(--ow-border)] px-2"
+        style={compact ? undefined : { height: "var(--ow-h-lg)" }}
+      >
+        <div data-ow-part="nav-group" className="flex shrink-0 items-center gap-0.5">
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            className={NAV_BTN}
+            icon={<ChevLeft aria-hidden="true" />}
+            disabled={!canGoBack}
+            onClick={onGoBack}
+            title="后退"
+            aria-label="后退"
+          />
+          {/* compact 档只留「后退 ＋ 重载」两颗（原型 2275/2278 没有前进钮）：
+              38% 窄栏里省下的 24px 直接给地址位。 */}
+          {!compact && (
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className={NAV_BTN}
+              icon={<ChevRight aria-hidden="true" />}
+              disabled={!canGoForward}
+              onClick={onGoForward}
+              title="前进"
+              aria-label="前进"
+            />
+          )}
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            className={NAV_BTN}
+            icon={loading ? <Close aria-hidden="true" /> : <Refresh aria-hidden="true" />}
+            onClick={loading ? onStop : onReload}
+            title={loading ? "停止" : "刷新"}
+            aria-label={loading ? "停止" : "刷新"}
+          />
+        </div>
+
+        {/* 地址栏＝Field 语法：字段壳给三态边框与 focus 环，内部值走 §7 读数 mono。
+            compact 档只换皮不换件：静息是 26 高 pill（--ow-surface-2 底 ＋1px 边），
+            hover / focus 仍由 Field 自己升三态与 focus 环——「只读 pill」是原型镜像的
+            限制，不是设计意图（openQuestion 5 的折中）。 */}
+        <Field
+          data-ow-part="url"
+          className="web-preview-shell__url min-w-0 flex-1 font-[family-name:var(--ow-font-mono)] [font-variant-numeric:tabular-nums]"
+          value={editing ? draft : url}
+          onChange={(next) => {
+            setEditing(true)
+            setDraft(next)
+          }}
+          onFocus={(event) => {
+            const input = event.currentTarget
+            setEditing(true)
+            setDraft(url)
+            window.requestAnimationFrame(() => input.select())
+          }}
+          onBlur={() => setEditing(false)}
+          onCompositionStart={onCompositionStart}
+          onCompositionEnd={onCompositionEnd}
+          onKeyDownCapture={(event) => {
+            event.stopPropagation()
+            if (isImeEnter(event)) return
+            if (event.key === "Enter") {
+              event.preventDefault()
+              submit()
+            }
+            if (event.key === "Escape") {
+              event.preventDefault()
+              setEditing(false)
+              setDraft(url)
+            }
+          }}
+          prefix={urlPrefix ?? (compact ? securePrefix : <Globe aria-hidden="true" />)}
+          suffix={
+            /* 载入指示：compact 档收进 pill 尾部的 12 转圈（原型 2287），
+               不再占工具栏下沿那条整幅 ProgressBar——窄栏里一条通栏进度线太吵。 */
+            compact && loading ? <span className="web-preview-shell__url-spin" aria-hidden="true" /> : urlSuffix
+          }
+          placeholder="输入网址"
+          aria-label="地址栏"
+        />
+
+        {onFind && (
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            className={NAV_BTN}
+            data-ow-part="find"
+            icon={<Search aria-hidden="true" />}
+            onClick={onFind}
+            title="在页面中查找"
+            aria-label="查找"
+          />
+        )}
+
+        {actions && (
+          <div data-ow-part="actions" className="flex shrink-0 items-center gap-0.5">
+            {actions}
+          </div>
+        )}
+      </div>
+
+      {/* 载入进度：贴工具栏下沿的不定长条。复用 ProgressBar 原语——轨/条取
+          --ow-progress-*（§4 进度＝墨/纸，永不荧黄），段循环走 --ow-ease-beacon，
+          reduced-motion 由原语自己停。 */}
+      {loading && !compact && <ProgressBar indeterminate size="sm" aria-label="页面加载中" className="shrink-0" />}
+
+      {subToolbar}
+
+      <div data-ow-part="body" className="relative flex min-h-0 flex-1 flex-col">
+        {error ? (
+          <div data-ow-part="error" className="flex min-h-0 flex-1 items-center justify-center p-8">
+            <InlineMessage
+              variant="error"
+              title="这个页面没加载出来"
+              detail={errorDetail}
+              action={
+                onRetry ? (
+                  <Button type="button" variant="secondary" size="sm" onClick={onRetry}>
+                    {retryLabel}
+                  </Button>
+                ) : undefined
+              }
+            >
+              {error}
+            </InlineMessage>
+          </div>
+        ) : url ? (
+          children
+        ) : (
+          /* 空/占位体（A8-B4 · 原型模板 2303–2310）：`--ow-mat` 占位地 ＋ 24 内距，
+             母题按原型放到 48×30（`markSize={48}`——md 档默认的 40 正是裁决 6 说的「太小」），
+             一句话量度 360、仍是 --ow-fs-ui / --ow-text-2。EmptyState md 档自带的
+             px-4 py-8 在这里让位给外框的 24（`p-0`），母题与句子之间的 12 由 md 档的 gap 给。
+             两档同用一块——占位体是「webview 落不下来时看见的那块地」，与条高无关。 */
+          <div data-ow-part="empty" className="flex min-h-0 flex-1 items-center justify-center bg-[var(--ow-mat)] p-6">
+            <EmptyState message={emptyMessage} markSize={48} className="max-w-[360px] p-0" />
+          </div>
+        )}
+      </div>
+
+      {footer}
+    </div>
+  )
+}

package/src/components/domain/browser/index.ts

@@ -0,0 +1,45 @@
+/* 预览域 · WebPreview 族（蓝图批次④）
+ *
+ * 7 件旧 Browser*View 已收敛为三件骨架：
+ *   WebPreviewShell   地址栏（Field 语法）＋ 工具组 ＋ 内容区 ＋ 载/错/空三态
+ *   WebPreviewNav     tab 条
+ *   WebPreviewConsole 终端语境控制台（--ow-term-* / --ow-ansi-*）
+ *
+ * 旧七件的去向（各自文件头有 @deprecated 与归口说明）：
+ *   BrowserNavBarView        → Shell 工具栏
+ *   BrowserTabBarView        → WebPreviewNav（原地改名，只留薄兼容导出）
+ *   BrowserLoadErrorView     → Shell 的 error 态
+ *   BrowserMoreMenuView      → Shell 的 actions 工具组配方
+ *   BrowserFindBarView       → Shell 的 subToolbar 插槽配方
+ *   BrowserDeviceToolbarView → Shell 的 subToolbar 插槽配方
+ *   BrowserAnnotationPopupView / BrowserImportDialogView
+ *                            → Popover / Dialog 配方，不属三件骨架
+ */
+
+// ─── 三件骨架 ───
+export * from "./WebPreviewShell"
+export * from "./WebPreviewNav"
+export * from "./WebPreviewConsole"
+
+/* ── A8-B6（原型模板 2340–2342 / 2344–2368）· 侧开栏后两类页签体 ────────────────
+ * 会话侧开栏有四类页签：网页（WebPreviewShell compact）· 文件（files/FileBrowser）·
+ * 终端 · 子任务。后两类没有现成件，这里各出一件**只画画面**的：
+ *   TerminalPane  常暗域终端画面（配方与 WebPreviewConsole 同源，见其文件头）
+ *   SubAgentPane  单个子任务的转录时间轴（轨道与节点同主会话脊柱，小一号）
+ * 能力（PTY / 子智能体调度）一律在宿主。 */
+export * from "./TerminalPane"
+export * from "./SubAgentPane"
+
+// ─── 预览壳（模态） ───
+export * from "./WebPreviewDialog"
+
+// ─── 旧件：配方 / @deprecated 兼容导出 ───
+export * from "./BrowserAnnotationPopupView"
+export * from "./BrowserDeviceToolbarView"
+export * from "./BrowserFindBarView"
+export * from "./BrowserImportDialogView"
+export * from "./BrowserLoadErrorView"
+export * from "./BrowserMoreMenuView"
+export * from "./BrowserNavBarView"
+export * from "./BrowserTabBarView"
+export * from "./WebPreview"

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

@@ -0,0 +1,107 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { AuthorizationCard } from "../AuthorizationCard"
+import { ExecutionSummary } from "../ExecutionSummary"
+import { Thinking } from "../Thinking"
+import { ToolCallRow } from "../ToolCallRow"
+import { AgentLoopSegment } from "./index"
+
+const meta = {
+  title: "Chat/AgentLoopSegment",
+  component: AgentLoopSegment,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div style={{ maxWidth: 752 }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof AgentLoopSegment>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const TOOLS = [
+  { name: "read_file", args: "packages/ui/styles/tokens.css", elapsed: "0.3s", out: "760 行 · 命中 --ow-warning-tint" },
+  { name: "grep", args: '"--ow-beacon" packages/ui/src', elapsed: "0.9s", out: "11 处命中" },
+]
+
+const bodyStyle = {
+  fontSize: "var(--ow-fs-body)",
+  lineHeight: "var(--ow-lh-body)",
+  color: "var(--ow-text)",
+} as const
+
+/**
+ * 已完成的一段：思考行（静止，text-3 单色不占极）→ 执行摘要卡 → 返回正文。
+ *
+ * R4 · 2026-09-04：段内三层「可展开的步骤」用同一枚 chevron——思考行（推理正文，缺省折叠）、
+ * 摘要卡头行、明细行（输入 / 输出）。原型口径见 template.dc.html:1196-1217 与 1219-1250。
+ */
+export const Done: Story = {
+  render: () => (
+    <AgentLoopSegment>
+      <Thinking variant="inline" spinning={false} label="先把组件库里已有的零件数清楚，再决定补哪几件。">
+        <p style={{ margin: "0 0 6px" }}>chat 域现在 22 件，其中 3 件是兼容层，不算新形。</p>
+        <p style={{ margin: "0 0 6px" }}>原型 1219-1250 那一段要的执行摘要卡还没有，先补它。</p>
+        <p style={{ margin: 0 }}>工具行要挂进摘要卡的展开体，顺序反了要返工。</p>
+      </Thinking>
+      <ExecutionSummary label="核对组件库现状" steps={6} duration="2m06s" tools={TOOLS} />
+      <div style={bodyStyle}>聊天域现有 22 件组件，缺的是执行摘要卡、跑动中的工具行、授权卡这三件。</div>
+    </AgentLoopSegment>
+  ),
+}
+
+/** 跑动中的一段：思考行卫星让极（toolRunning）→ 工具行列（gap 6）里最后那条占状态极 */
+export const Running: Story = {
+  render: () => (
+    <AgentLoopSegment>
+      <Thinking variant="inline" toolRunning label="按原型模板逐值核对三件缺件的尺寸与 token。" />
+      <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+        <ToolCallRow name="read_file" args="proto/template.dc.html#L1219-L1250" state="done" elapsed="0.4s" />
+        <ToolCallRow name="grep" args='"--ow-warning-tint" packages/ui/styles' />
+      </div>
+    </AgentLoopSegment>
+  ),
+}
+
+/** 等待授权的一段：思考行静止 → 待授权工具行（中性 --ow-pending）→ 授权卡行内停驻 */
+export const AwaitingAuthorization: Story = {
+  render: () => (
+    <AgentLoopSegment>
+      <Thinking variant="inline" spinning={false} label="要把核对结果写成文件，需要你放行一次写入。" />
+      <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+        <ToolCallRow name="write_file" args="~/Documents/orbit/report.md" state="pending" />
+      </div>
+      <AuthorizationCard source="Filesystem 连接器" scope="写入 ~/Documents/orbit/report.md，本次会话有效。" />
+    </AgentLoopSegment>
+  ),
+}
+
+/** 多段叠加：段之间不加容器，只靠 10px 节奏与「每段一张执行摘要卡」分辨（裁决 15） */
+export const MultipleSegments: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
+      <AgentLoopSegment>
+        <Thinking variant="inline" spinning={false} label="先把组件库里已有的零件数清楚。" />
+        <ExecutionSummary label="核对组件库现状" steps={6} duration="2m06s" tools={TOOLS} />
+        <div style={bodyStyle}>聊天域现有 22 件组件，三件缺件确认要补。</div>
+      </AgentLoopSegment>
+      <AgentLoopSegment>
+        <Thinking variant="inline" spinning={false} label="再按原型模板把每一件的尺寸逐值抄下来。" />
+        <ExecutionSummary label="逐值抄原型尺寸" steps={9} duration="4m12s" tools={TOOLS} />
+        <div style={bodyStyle}>执行摘要卡、工具行、授权卡三件的尺寸与 token 已对齐原型。</div>
+      </AgentLoopSegment>
+      <AgentLoopSegment>
+        <Thinking variant="inline" toolRunning label="正在补 story 与源码断言。" />
+        <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+          <ToolCallRow name="write_file" args="ExecutionSummary.stories.tsx" state="done" elapsed="1.2s" />
+          <ToolCallRow name="run_tests" args="pnpm test --filter chat" />
+        </div>
+      </AgentLoopSegment>
+    </div>
+  ),
+}