@orbit-work/ui 0.1.0

package/src/screens/Chat.stories.tsx

@@ -0,0 +1,808 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import type { ReactNode } from "react"
+import { Shield } from "../components/composite/Icons"
+import { SubAgentPane } from "../components/domain/browser/SubAgentPane"
+import type { SubAgentPaneTurn } from "../components/domain/browser/SubAgentPane"
+import { TerminalPane } from "../components/domain/browser/TerminalPane"
+import { WebPreviewConsole } from "../components/domain/browser/WebPreviewConsole"
+import { WebPreviewNav } from "../components/domain/browser/WebPreviewNav"
+import type { WebPreviewTab } from "../components/domain/browser/WebPreviewNav"
+import { WebPreviewShell } from "../components/domain/browser/WebPreviewShell"
+import { AgentLoopSegment } from "../components/domain/chat/AgentLoopSegment"
+import { AgentTurn } from "../components/domain/chat/AgentTurn"
+import { ArtifactCard } from "../components/domain/chat/ArtifactCard"
+import { AuthorizationCard } from "../components/domain/chat/AuthorizationCard"
+import { Composer } from "../components/domain/chat/Composer"
+import { ComposerAuthorization } from "../components/domain/chat/Composer/parts/ComposerAuthorization"
+import { ContextUsage } from "../components/domain/chat/ContextUsage"
+import { ExecutionSummary } from "../components/domain/chat/ExecutionSummary"
+import { MessageActions } from "../components/domain/chat/MessageActions"
+import { PlanCard } from "../components/domain/chat/PlanCard"
+import { SubAgentThread } from "../components/domain/chat/SubAgentThread"
+import { Thinking } from "../components/domain/chat/Thinking"
+import { ToolCallRow } from "../components/domain/chat/ToolCallRow"
+import { Transcript } from "../components/domain/chat/Transcript"
+import { UserTurn } from "../components/domain/chat/UserTurn"
+import { DesktopChatHeaderView } from "../components/domain/desktop/DesktopChatHeaderView"
+import type { DesktopChatHeaderViewProps } from "../components/domain/desktop/DesktopChatHeaderView"
+import { DesktopChatAgentTurnView, DesktopChatUserTurnView } from "../components/domain/desktop/DesktopChatTurnView"
+import { DesktopComposerModelButton } from "../components/domain/desktop/DesktopComposer"
+import { DesktopSidebarView } from "../components/domain/desktop/DesktopSidebarView"
+import { DesktopWorkbenchShell } from "../components/domain/desktop/DesktopWorkbenchShell"
+import { SidePanelEmpty } from "../components/domain/desktop/SidePanelEmpty"
+import { WorkbenchSidePanel } from "../components/domain/desktop/WorkbenchSidePanel"
+import { FileBrowser } from "../components/domain/files/FileBrowser"
+import { Button } from "../components/primitives"
+import type { FileTreeNode } from "../types/file-tree"
+import { DesktopScreenFrame, SCREEN_PARAMETERS, noop, screenSidebarProps } from "./_screen"
+
+/**
+ * Chat 整屏（蓝图 06 · screens）——**三极同屏配额的组合证明**。
+ *
+ * 叙事链一屏到底：`DesktopSidebarView`（位置极）→ `Transcript` 脊柱（`spine`
+ * 贯穿，用户轮空心环 / agent 轮实心点的形差 R1）→ `Thinking` → `PlanCard`
+ * → `ArtifactCard` → `ContextUsage` → `Composer`（状态极位置固定）。
+ * 全部为 P1/P3-P5 已落地件，本屏只组合、不新造。
+ *
+ * ## 荧黄逐处旁注（每半屏每极 ≤1）
+ * 左半屏＝侧栏（260px），右半屏＝`.owcenter` 会话面。逐 story 的配额见各自说明。
+ * 共同口径：
+ * - **位置极**（`--ow-accent-dot`）：只属侧栏当前项。本屏在会话视图，nav 无 current，
+ *   所以 `.ownavitem.active svg .dot` 不点亮；位置极由 `.owthread.active` 的
+ *   `--ow-current-bg` 填充块＋500 字重承担（SidebarCurrent 主编码），**左半屏零荧黄**。
+ * - 侧栏「留存曲线重算」行尾的运行点是 `--ow-progress-fill`＋mono `3/7` 读数——
+ *   §4 让形规则：位置极已占图标信标点，状态极在同一列表内改用行尾点，永不荧黄。
+ * - **状态极**（`--ow-beacon`）与**行动极**（暗档 `--ow-btn-primary-bg` = `--ow-yellow`）
+ *   各限一处，落点见下。
+ */
+const meta = {
+  title: "Screens/Chat",
+  parameters: SCREEN_PARAMETERS,
+} satisfies Meta
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const AUTH_OPTIONS = [
+  { value: "ask", label: "每次询问", description: "改动前都要你点头", icon: <Shield /> },
+  { value: "auto", label: "自动执行", description: "只在当前项目内生效", icon: <Shield /> },
+]
+
+function ChatSidebar() {
+  return <DesktopSidebarView {...screenSidebarProps()} />
+}
+
+function transcriptFrame(node: ReactNode) {
+  return (
+    <div
+      style={{
+        flex: "1 1 auto",
+        minHeight: 0,
+        display: "flex",
+        flexDirection: "column",
+        padding: "0 24px 12px",
+      }}
+    >
+      {node}
+    </div>
+  )
+}
+
+/* ── A9-B4（原型 1096–1145）· 会话头 ＋ 转录列 ───────────────────────────────
+   会话头是 `.owcenter` 里通栏的第一行（48 高、底 1px 线、标题 16/500 左对齐、
+   右端三枚 28 钮），转录列坐在它下面吃掉剩余高。以前各屏把标题塞进 `Transcript`
+   的 header 槽（600/13 ＋ mono 读数），那是 B4 之前的会话头，现在统一走
+   `DesktopChatHeaderView`——运行读数也从流内搬到了标题右侧（裸读数，无彩点）。 */
+function chatColumn(head: DesktopChatHeaderViewProps, transcript: ReactNode) {
+  return (
+    <div style={{ height: "100%", minHeight: 0, display: "flex", flexDirection: "column" }}>
+      <DesktopChatHeaderView onShare={noop} onOpenContext={noop} onOpenPanel={noop} {...head} />
+      {transcriptFrame(transcript)}
+    </div>
+  )
+}
+
+const PLAN_DONE = [
+  { label: "拉取 14 份来源并去重", state: "done" as const },
+  { label: "核对行业均值口径", state: "done" as const },
+  { label: "重算中位数并回填", state: "done" as const },
+  { label: "生成对照表", state: "done" as const },
+]
+
+/**
+ * **三极同屏**（本屏的主证明）：位置极在左、状态极与行动极在右，各一处，形不同源。
+ *
+ * 荧黄逐处旁注：
+ * 1. 左半屏：**0 处**。位置极走 `--ow-current-bg` 填充块（见 meta 说明）。
+ * 2. 右半屏 · `ArtifactCard` 递减短迹的**末颗** = `--ow-beacon` → **状态极 ×1**
+ *    （「正在亮着的那件事」＝产物正在生成）。R1 双编码：卡脚 mono 元信息里同时写着
+ *    「生成中」，颜色只是第二编码。
+ * 3. 右半屏 · `Composer` 发送钮 `Button variant="primary"` → **行动极 ×1**
+ *    （暗档 `--ow-btn-primary-bg` = `--ow-yellow`；浅档为墨色 navy，不亮）。
+ *
+ * 不占极的三处（刻意留作对照）：
+ * - `Thinking` 传 `spinning={false}`——转完当前圈停在 +24°，整体落为 text-3 单色，不占状态极；
+ * - `PlanCard` 四步全 done、无 running 迹点，进度只由 n/N 与迹点行承载（A9-B3 摘掉完成度弧）；
+ * - `ContextUsage` 值 0.48 在 warning 档（0.6）以下，取 `--ow-text-3`；读数 mono＋tabular-nums。
+ *
+ * R4 · 2026-09-04：思考行带推理正文（缺省折叠，行尾 14px ChevRight）。折叠记号是
+ * `--ow-text-3` 的中性件，不占任何一极——本屏荧黄仍是「产物卡末颗 ×1 ＋ 发送钮 ×1」。
+ */
+export const ThreePoles: Story = {
+  render: () => (
+    <DesktopScreenFrame>
+      <DesktopWorkbenchShell
+        contained
+        view="chat"
+        sidebar={<ChatSidebar />}
+        chat={chatColumn(
+          { title: "Q3 渠道复盘" },
+          <Transcript
+            className="min-h-0 flex-1"
+            maxWidth={752}
+            sender={
+              <Composer
+                defaultValue="对照表出来后把结论压到三条"
+                onSend={noop}
+                authorization={<ComposerAuthorization value="ask" onChange={noop} options={AUTH_OPTIONS} />}
+                contextUsage={<ContextUsage value={0.48} showReadout readout="48%" />}
+                toolbarEnd={<DesktopComposerModelButton label="Sonnet 4.5 · 标准" onClick={noop} />}
+              />
+            }
+          >
+            <UserTurn text="帮我核对 Q3 渠道复盘引用的 14 份来源，重点看数据有没有过期。" time="14:28" />
+            <AgentTurn
+              name="Orbitwork"
+              meta="6 步 · 2m40s"
+              thinking={
+                // R4 · 2026-09-04：思考行带推理正文＝可折叠（缺省折叠，行尾 ChevRight）。
+                // 静止态整组落 text-3 单色，仍不占状态极——极还在右下的产物卡末颗上。
+                <Thinking variant="inline" spinning={false} label="核对完 14 份来源">
+                  <p style={{ margin: "0 0 6px" }}>14 份里 3 份的行业均值停在 2025H2，先把它们挑出来单列。</p>
+                  <p style={{ margin: 0 }}>第 9 份用的是均值口径，其余 13 份是中位数，得换算过再比。</p>
+                </Thinking>
+              }
+            >
+              <p>14 份里有 3 份的行业均值停在 2025H2，我把口径换成中位数重跑了一遍，差异集中在中小客户那一段。</p>
+              <PlanCard goal="核对并重算 Q3 渠道口径" steps={PLAN_DONE} />
+            </AgentTurn>
+            <UserTurn text="第 9 份的口径换成中位数以后，把结论也一起更新到终稿里。" time="14:31" />
+            <AgentTurn
+              name="Orbitwork"
+              meta="3 步 · 58s"
+              /* R5：这一轮还在跑（没有思考行可上报）——节点信标公转；子任务线程里已有 running 点占状态极，卫星让极 */
+              beacon={{ spinning: true, toolRunning: true }}
+              execution={
+                <SubAgentThread
+                  processes={[
+                    { name: "median_by_segment", status: "done", duration: "38s" },
+                    { name: "render_report", status: "running", duration: "12s" },
+                  ]}
+                />
+              }
+              actions={<MessageActions actions={["copy", "regenerate", "branch", "quote"]} visible time="14:32" />}
+              disclaimer="内容由 AI 生成，请仔细核实回答内容。"
+            >
+              <p>结论已经改完，终稿正在导出。</p>
+              <ArtifactCard title="Q3 渠道复盘（终稿）" meta="report_q3_channels.docx · 4,180 字 · 生成中" generating />
+            </AgentTurn>
+          </Transcript>,
+        )}
+        skills={null}
+        sites={null}
+        scheduledTasks={null}
+        workspace={null}
+      />
+    </DesktopScreenFrame>
+  ),
+}
+
+/**
+ * Live 屏第一段（已跑完）的执行摘要明细（原型 1232–1246：mono 11 三段 ＋ pre-wrap 输出）。
+ * R4 · 2026-09-04：第一条再展一层「输入 / 输出」（`ExecutionDetail` 的眉标 ＋ 井），
+ * 行尾 12px chevron 与头行 14px 分档——转录里「还有一层」只有这一种说法。
+ * 第二条只有一行回显（`out`），没有明细，所以不出 chevron、不可点：有多少料出多少形。
+ */
+const LIVE_DONE_TOOLS = [
+  {
+    name: "read_sheet",
+    args: "数据源/行业面板_2026H1.xlsx",
+    elapsed: "0.6s",
+    input: <pre style={{ margin: 0 }}>{`{ "file": "数据源/行业面板_2026H1.xlsx",\n  "sheet": "渠道明细" }`}</pre>,
+    output: (
+      <pre style={{ margin: 0 }}>{`渠道        行业均值   口径年   状态
+直营        12.4%      2026H1   最新
+分销        9.8%       2025H2   过期
+KA          15.1%      2025H2   过期
+电商        11.2%      2025H2   过期
+— 14 行 · 3 列过期`}</pre>
+    ),
+  },
+  { name: "grep", args: '"行业均值" 报告/Q3渠道复盘.md', elapsed: "0.2s", out: "9 处引用，第 9 份口径与其余不一致" },
+]
+
+/**
+ * **运行中**（原型 template.dc.html:1094–1310 的会话屏在跑的那一刻）：
+ * 会话头（`DesktopChatHeaderView`）标题 16/500 左对齐 ＋ 右侧裸读数「运行中 · 58s」
+ * （6px `--ow-progress-fill` 无彩点 ＋ mono）＋ 三枚 28 钮；转录列 752；用户轮气泡
+ * （`--ow-bubble-user` ＋ 1px 边 ＋ radius 12 ＋ 最宽 78%）右侧挂 mono 时间；agent 轮
+ * 按 `AgentLoopSegment` 切段（段间只靠 10px 节奏）：第一段已跑完＝思考行静止 ＋
+ * `ExecutionSummary`（递减短迹 6/5/4/3 ＋ mono「6 步 · 2m40s」）＋ 正文（计划卡与产物卡
+ * 见「三极同屏」，这一屏要把第二段的授权卡留在 800 高的首屏里）；
+ * 第二段正在跑＝思考行让极 ＋ 两条 `ToolCallRow`（done / running）＋
+ * `AuthorizationCard`（warning tint 三件套，行内停驻，只「允许一次 / 拒绝」两钮；
+ * 待授权那条 pending 工具行见 `chat-agentloopsegment--awaiting-authorization`）。
+ *
+ * 荧黄逐处旁注：
+ * 1. 左半屏：**0 处**（同上）。
+ * 2. 右半屏 · 第二段 `ToolCallRow` **running 那条的 6px 点** = `--ow-beacon` → **状态极 ×1**。
+ *    同段 `Thinking` 传 `toolRunning`，卫星退成 `--ow-text-2` 让极（§4 每屏限一处；
+ *    原型 logic:3850 的记账口径）。R1 双编码：行尾 mono「12s」同时在读。
+ * 3. 右半屏 · 行动极：`AuthorizationCard` 的「允许一次」是 primary（暗档 `--ow-yellow`）→
+ *    **行动极 ×1**。`Composer` 传 `generating`，发送钮变停止钮（非 primary），
+ *    工具条首位的「生成中」点取 `--ow-progress-fill`——同屏行动极仍只一处。
+ * 4. 不占极：会话头读数点无彩；`ExecutionSummary` 短迹四颗全 text-3；第一段思考行静止
+ *    落 text-3；done 那条工具行的点取 `--ow-success`（语义色，不是极）。
+ *
+ * R4 · 2026-09-04（Terry：一种「步骤」只留一种说法）：第一段的思考行带推理正文，
+ * 摘要卡收起（这一屏要把第二段的授权卡留在 800 高的首屏里），展开后第一条明细
+ * `read_sheet` 还能再展「输入 / 输出」——三层折叠同一枚 chevron、同一套 text-3 色阶，
+ * 不新增任何一处荧黄（记账仍是上面那三条）。
+ */
+export const Live: Story = {
+  render: () => (
+    <DesktopScreenFrame>
+      <DesktopWorkbenchShell
+        contained
+        view="chat"
+        sidebar={<ChatSidebar />}
+        chat={chatColumn(
+          { title: "Q3 渠道复盘", runState: "running", elapsedSeconds: 58 },
+          <Transcript
+            className="min-h-0 flex-1"
+            maxWidth={752}
+            sender={
+              <Composer
+                generating
+                placeholder="今天帮你做些什么？ / 调用技能与指令 @ 引用专家和连接器"
+                onStop={noop}
+                authorization={<ComposerAuthorization value="auto" onChange={noop} options={AUTH_OPTIONS} />}
+                contextUsage={<ContextUsage value={0.71} showReadout readout="71%" />}
+                toolbarEnd={<DesktopComposerModelButton label="Sonnet 4.5 · 标准" onClick={noop} />}
+              />
+            }
+          >
+            <UserTurn text="帮我核对 Q3 渠道复盘引用的 14 份来源，重点看数据有没有过期。" time="14:28" />
+            <AgentTurn name="Orbitwork" meta="6 步 · 2m40s">
+              <AgentLoopSegment>
+                <Thinking variant="inline" spinning={false} label="先把 14 份来源按发布时间排一遍，过期的单独挑出来。">
+                  {/* R4：思考行的推理正文——缺省折叠，行尾 ChevRight；与下面摘要卡的
+                      头行 chevron、明细行 chevron 是同一枚记号（转录里只有一种「步骤」语言）。
+                      静止态整组 text-3 单色，不占状态极。 */}
+                  <p style={{ margin: "0 0 6px" }}>先按发布时间排：14 份里 3 份停在 2025H2，标出来单列。</p>
+                  <p style={{ margin: "0 0 6px" }}>第 9 份的行业均值口径与其余 13 份不一致，换算前不能直接比。</p>
+                  <p style={{ margin: 0 }}>先确认原始表还在，再决定重算还是只标注。</p>
+                </Thinking>
+                <ExecutionSummary label="核对来源与口径" steps={6} duration="2m40s" tools={LIVE_DONE_TOOLS} />
+                <p>14 份里有 3 份的行业均值停在 2025H2，第 9 份的口径与其余 13 份不一致，已单独标出。</p>
+              </AgentLoopSegment>
+            </AgentTurn>
+            <UserTurn text="第 9 份换成中位数再跑一遍，结果直接写进终稿。" time="14:31" />
+            <AgentTurn
+              name="Orbitwork"
+              disclaimer="内容由 AI 生成，请仔细核实回答内容。"
+              /* R5：思考行传了 toolRunning 且缺省 spinning，轮内自动上报——节点信标公转并让极，不必再传 beacon */
+            >
+              <AgentLoopSegment>
+                <Thinking variant="inline" toolRunning label="按中位数重算第 9 份，算完把结果写回终稿。" />
+                <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+                  <ToolCallRow name="read_sheet" args="数据源/行业面板_2026H1.xlsx" state="done" elapsed="0.6s" />
+                  <ToolCallRow name="run_python" args="median_by_segment.py" statusText="12s" />
+                </div>
+                <AuthorizationCard source="Filesystem 连接器" scope="写入 报告/Q3渠道复盘_终稿.docx，本次会话有效。" />
+              </AgentLoopSegment>
+            </AgentTurn>
+          </Transcript>,
+        )}
+        skills={null}
+        sites={null}
+        scheduledTasks={null}
+        workspace={null}
+      />
+    </DesktopScreenFrame>
+  ),
+}
+
+/* ── A8-B1（裁决 9 · 原型模板 2246–2250）· 会话侧开栏的整屏验收面 ─────────────────
+   两档宽只有 38% / 68%（不上拖拽），百分比取内容区那一行的宽（窗口 1440 减侧栏 240），
+   所以 38% ≈ 455px、68% ≈ 815px，会话列被**内联挤压**到 743 / 383——不是覆盖在会话上。
+   会话列另有 360 最小宽保底（.desktop-workbench-row[data-side-panel="on"] > .owcenter）。
+   A8-B2/B3 起栏内挂的是**两档变体本人**：页签条 `density="panel"`（36 条 / 26 胶囊 /
+   选中换面色）＋ 地址条 `compact`（34 条 / 无前进钮 / 26 pill / 锁形前缀 / 24 查找钮）。
+   B4 起：网页页签那块占位地是 --ow-mat（原型 2303），空栏另有「三行快捷动作」一屏
+   （见下面的「右栏 空栏」）。四类页签体（B5/B6）仍是后面的活，这里给网页页签一块占位体。 */
+const PANEL_TABS: WebPreviewTab[] = [
+  { id: "tab-site", kind: "web", title: "orbitwork.pages.dev", url: "https://orbitwork.pages.dev" },
+  { id: "tab-files", kind: "files", title: "文件" },
+]
+
+/* ── A8-B6（原型模板 2340–2342 / 2344–2368）· 后两类页签体 ────────────────────────
+   原型的种子页签只有「网页 ＋ 文件」两个（3302–3305），终端与子任务是**开出来的**
+   （⌘B / 从会话里点进子任务），所以这两屏各自在种子后追加一个页签，
+   不动前两屏的页签条——那两屏的基线是 B1–B5 已验收过的。 */
+const PANEL_EXTRA_TABS = {
+  terminal: { id: "tab-term", kind: "terminal", title: "终端" },
+  subagent: { id: "tab-sub", kind: "subagent", title: "核对组件库导出" },
+} as const satisfies Record<"terminal" | "subagent", WebPreviewTab>
+
+/** 原型 3277–3287 的终端输出。 */
+const PANEL_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")
+
+/** 原型 3288–3291 的子任务两轮。 */
+const PANEL_SUB_TURNS: SubAgentPaneTurn[] = [
+  { id: "u1", role: "user", text: "把这三家竞品的文档站信息架构整理成一张对照表。" },
+  {
+    id: "a1",
+    role: "agent",
+    text: "已抓取三家文档站的顶层导航，正在按「入门 / 组件 / 设计规范 / 更新日志」四类归并；组件页的层级差异最大，稍后单独列一节。",
+  },
+]
+
+/* ── A8 openQuestion 6 的裁决落地 · 控制台只在 68% 档出，且默认收起 ────────────────
+   原型的侧开栏里**没有**控制台（2273–2311 只有地址条 ＋ 内容体）；我们这边它一直是
+   `Browser.stories.tsx` 里 maxHeight 180 的常驻 footer。38% 档栏宽 455，再切一块 180
+   的日志抽屉，网页只剩不到一半——所以这里按已定的推荐：**38% 档一行不挂、68% 档挂一条
+   默认收起的折叠头**（`WebPreviewConsole` 自带折叠，收起态只占 32 高的一条头，
+   展开才铺日志区）。它坐 `WebPreviewShell` 的 `footer` 槽，收起时不进常暗域。 */
+const PANEL_CONSOLE_LOGS = [
+  { level: "log" as const, message: "页面就绪，用时 412ms", timestamp: new Date("2026-09-02T14:32:01") },
+  {
+    level: "warn" as const,
+    message: "图片缺少 width/height，布局会抖",
+    source: "hero.tsx:42",
+    timestamp: new Date("2026-09-02T14:32:03"),
+  },
+]
+
+/** 网页页签的 webview 占位体（真机是 webview；B4 的品牌信标空态另算）。 */
+function sidePanelBody() {
+  return (
+    <div
+      style={{
+        flex: 1,
+        minHeight: 0,
+        display: "grid",
+        placeItems: "center",
+        padding: 24,
+        textAlign: "center",
+        background: "var(--ow-mat)",
+        color: "var(--ow-text-2)",
+        fontSize: "var(--ow-fs-ui)",
+      }}
+    >
+      网页页签内容（webview 落位）
+    </div>
+  )
+}
+
+/* ── A8-B5（原型模板 2313–2338）· 右栏第二类页签「文件」的**消费面** ────────────────
+   树左 44% / 预览右、面包屑压在预览列头、正文坐 --ow-code-bg 这套形制在 A11-B3 已经
+   进了 `FileBrowser` 本体（`layout="tree-left"` 现在就是默认档，面包屑固定落在预览列头
+   ＝原型的 crumbPlacement="preview"），所以这一批**不再动组件本体**，只把它挂进侧开栏、
+   按原型 2314–2317 的顶行摆「过滤框 ＋ 打开方式」两件，并证明它在 38% / 68% 两档宽里
+   都不塌（树列 44% 随栏宽走、预览列 min-width:0 收字不横滚）。
+
+   唯一的消费方覆盖是 `bg-transparent`：`FileBrowser` 根自带 `bg-ow-bg`（独占内容区那一屏
+   的地），进了侧开栏就该让位给 `--ow-surface`（原型 2250 的 aside 面色，文件页签自己不铺地）。 */
+const PANEL_FILE_TREE: FileTreeNode[] = [
+  {
+    key: "/landing/src",
+    title: "src",
+    isLeaf: false,
+    children: [
+      {
+        key: "/landing/src/components",
+        title: "components",
+        isLeaf: false,
+        children: [
+          { key: "/landing/src/components/hero.tsx", title: "hero.tsx", isLeaf: true },
+          { key: "/landing/src/components/nav.tsx", title: "nav.tsx", isLeaf: true },
+        ],
+      },
+      { key: "/landing/src/styles", title: "styles", isLeaf: false },
+      { key: "/landing/src/index.tsx", title: "index.tsx", isLeaf: true },
+    ],
+  },
+  {
+    key: "/landing/public",
+    title: "public",
+    isLeaf: false,
+    children: [{ key: "/landing/public/og.png", title: "og.png", isLeaf: true }],
+  },
+  { key: "/landing/package.json", title: "package.json", isLeaf: true },
+  { key: "/landing/README.md", title: "README.md", isLeaf: true },
+]
+
+const PANEL_FILE_TEXT = `export function Hero() {
+  return (
+    <section className="hero">
+      <h1>把手上的活交给它</h1>
+      <p>说清楚要什么，剩下的它自己跑完。</p>
+    </section>
+  )
+}
+`
+
+/** 文件页签体：`FileBrowser` 直接当页签体用（它自带顶行 ＋ 两列，不再套壳）。 */
+function sidePanelFilesBody() {
+  return (
+    <FileBrowser
+      className="bg-transparent"
+      breadcrumb={[
+        { key: "/landing", label: "landing" },
+        { key: "/landing/src", label: "src" },
+        { key: "/landing/src/components", label: "components" },
+        { key: "/landing/src/components/hero.tsx", label: "hero.tsx" },
+      ]}
+      onBreadcrumbClick={noop}
+      actions={
+        // 原型 2316：顶行右端就这一枚「打开方式」（宿主挂的是它的下拉）。
+        <Button variant="secondary" size="sm">
+          打开方式
+        </Button>
+      }
+      treeData={PANEL_FILE_TREE}
+      expandedKeys={["/landing/src", "/landing/src/components"]}
+      onExpand={noop}
+      selectedKey="/landing/src/components/hero.tsx"
+      onSelectFile={noop}
+      filterText=""
+      onFilterChange={noop}
+      onToggleTree={noop}
+      preview={
+        /* 原型 2335：预览正文 mono ＋ fs-code ＋ lh-code，内距 12；井底（--ow-code-bg）
+           由 FileBrowser 的预览槽自己铺，这里只出文字。 */
+        <pre
+          style={{
+            margin: 0,
+            padding: 12,
+            overflow: "auto",
+            fontFamily: "var(--ow-font-mono)",
+            fontSize: "var(--ow-fs-code)",
+            lineHeight: "var(--ow-lh-code)",
+            color: "var(--ow-text)",
+            // R2 · L2-3-5：代码不软折行——长标识符不从中间劈开，横滚交给 overflow:auto
+            whiteSpace: "pre",
+          }}
+        >
+          {PANEL_FILE_TEXT}
+        </pre>
+      }
+    />
+  )
+}
+
+function sidePanelScreen(maximized: boolean, tab: "web" | "files" | "terminal" | "subagent" = "web") {
+  const extra = tab === "terminal" || tab === "subagent" ? PANEL_EXTRA_TABS[tab] : null
+  const tabs: WebPreviewTab[] = extra ? [...PANEL_TABS, extra] : PANEL_TABS
+  const activeTabId = extra ? extra.id : tab === "files" ? "tab-files" : "tab-site"
+
+  return (
+    <DesktopScreenFrame>
+      <DesktopWorkbenchShell
+        contained
+        view="chat"
+        sidebar={<ChatSidebar />}
+        sidePanel={
+          <WorkbenchSidePanel maximized={maximized}>
+            <WebPreviewNav
+              density="panel"
+              tabs={tabs}
+              activeTabId={activeTabId}
+              isWide={maximized}
+              onSwitchTab={noop}
+              onCloseTab={noop}
+              onCloseOtherTabs={noop}
+              onAddBrowser={noop}
+              onAddTerminal={noop}
+              onAddFiles={noop}
+              onToggleWide={noop}
+              onToggleCollapsed={noop}
+            />
+            {tab === "files" ? (
+              sidePanelFilesBody()
+            ) : tab === "terminal" ? (
+              /* 原型 2341：终端整块常暗，页签体不再套壳（没有地址条）。 */
+              <TerminalPane text={PANEL_TERM_TEXT} />
+            ) : tab === "subagent" ? (
+              <SubAgentPane title="核对组件库导出" status="梳理思路 · 12s" turns={PANEL_SUB_TURNS} />
+            ) : (
+              <WebPreviewShell
+                compact
+                chrome={false}
+                url="https://orbitwork.pages.dev"
+                canGoBack
+                onFind={noop}
+                className="min-h-0 flex-1 bg-transparent"
+                footer={
+                  maximized ? (
+                    <WebPreviewConsole logs={PANEL_CONSOLE_LOGS} defaultOpen={false} maxHeight={180} onClear={noop} />
+                  ) : undefined
+                }
+              >
+                {sidePanelBody()}
+              </WebPreviewShell>
+            )}
+          </WorkbenchSidePanel>
+        }
+        chat={chatColumn(
+          // 右栏开着 → 会话头那颗「打开右栏 ⌘T」开关按下（R2 · L3-2-6）
+          { title: "落地页改版", panelOpen: true },
+          <Transcript
+            className="min-h-0 flex-1"
+            maxWidth={752}
+            sender={
+              <Composer
+                defaultValue="首屏那句标题再短一点"
+                onSend={noop}
+                contextUsage={<ContextUsage value={0.32} showReadout readout="32%" />}
+                toolbarEnd={<DesktopComposerModelButton label="Sonnet 4.5 · 标准" onClick={noop} />}
+              />
+            }
+          >
+            <UserTurn text="把落地页首屏的标题和副标题改短，然后开着预览让我看。" time="11:18" />
+            <AgentTurn
+              name="Orbitwork"
+              meta="4 步 · 1m08s"
+              thinking={<Thinking variant="inline" spinning={false} label="改完首屏文案" />}
+              disclaimer="内容由 AI 生成，请仔细核实回答内容。"
+            >
+              <p>标题压到 12 个字、副标题压到一行，预览已经开在右边了。</p>
+              <ArtifactCard
+                title="落地页首屏（草稿）"
+                meta="hero.tsx · 改 2 处 · 09-02 11:20"
+                /* R3（Terry 意见 4）：完成态产物卡可点开＋「打开方式」下拉（候选由宿主查系统列出） */
+                onOpen={noop}
+                onOpenWith={noop}
+                openWithApps={[
+                  { id: "vscode", label: "Visual Studio Code", hint: "默认" },
+                  { id: "cursor", label: "Cursor" },
+                  { id: "finder", label: "在访达中显示" },
+                ]}
+              />
+            </AgentTurn>
+          </Transcript>,
+        )}
+        skills={null}
+        sites={null}
+        scheduledTasks={null}
+        workspace={null}
+      />
+    </DesktopScreenFrame>
+  )
+}
+
+/**
+ * **右栏 38%（常态档）**：会话列 743px、侧开栏 455px。
+ *
+ * 荧黄逐处旁注：左半屏 0 处；右半屏 **行动极 ×1**（`Composer` 发送钮 primary），
+ * 状态极 0（`ArtifactCard` 不传 `generating`）；侧开栏本身是 R3 中性件，零荧黄。
+ */
+export const SidePanel38: Story = {
+  name: "右栏 38%",
+  render: () => sidePanelScreen(false),
+}
+
+/**
+ * **右栏 68%（最大化档）**：侧开栏 815px，会话列被挤到 383px——仍在 360 保底之上，
+ * 且是内联挤压（会话照常滚、composer 照常在），不是 `position:absolute` 盖在会话上。
+ *
+ * **A8-B6 新增：栏底那条控制台**（openQuestion 6 的已定推荐）。原型的侧开栏里没有控制台，
+ * 我们这边它原是浏览器整屏的常驻 footer；折中口径＝**只在 68% 档挂、且默认收起**：
+ * 收起态只占栏底一条 32 高的折叠头（左侧计数 mono ＋ 警告数 ANSI 琥珀，两重编码），
+ * 展开才铺 180 高的常暗日志区。38% 档（上一屏）一行都不挂——455 宽再切 180 给日志，
+ * 网页就只剩不到一半。
+ *
+ * 荧黄逐处旁注：同上，左 0、右行动极 ×1；控制台折叠头是 R3 中性件（警告色走 ANSI 琥珀，
+ * 刻意远离荧黄），0 处。
+ */
+export const SidePanel68: Story = {
+  name: "右栏 68%",
+  render: () => sidePanelScreen(true),
+}
+
+/**
+ * **右栏 文件页签 38%**（原型 2313–2338）：页签条切到「文件」，栏体换成 `FileBrowser`——
+ * 顶行 40 高（过滤框 ＋「打开方式」）、树列占栏宽 44%（38% 档下约 200px）＋ 右侧 1px
+ * `--ow-border` 分隔、预览列头是 mono 面包屑、正文坐 `--ow-code-bg` 的井。
+ *
+ * 这一档是**消费面**：形制在 A11-B3 已进 `FileBrowser` 本体（`layout="tree-left"` 即默认、
+ * 面包屑固定在预览列头），本屏只证明它挂进侧开栏后两档宽都成立，不改组件。
+ *
+ * 荧黄逐处旁注：左半屏 0 处；右半屏 **行动极 ×1**（`Composer` 发送钮 primary）；
+ * 侧开栏与文件页签体都是 R3 中性件，零荧黄、零信标。
+ */
+export const SidePanelFiles38: Story = {
+  name: "右栏 文件页签 38%",
+  render: () => sidePanelScreen(false, "files"),
+}
+
+/**
+ * **右栏 文件页签 68%**（最大化档）：栏宽 815px，树列随之长到约 359px、预览列 455px——
+ * 44% 是**比例**不是定宽，所以两档下树与预览的配比不变，长文件名在窄档收省略号、
+ * 宽档展开，预览列 `min-width:0` 保证正文永不把栏撑出横滚。
+ *
+ * 荧黄逐处旁注：同上，左 0、右行动极 ×1。
+ */
+export const SidePanelFiles68: Story = {
+  name: "右栏 文件页签 68%",
+  render: () => sidePanelScreen(true, "files"),
+}
+
+/* ── A8-B6（原型模板 2340–2342 / 2344–2368）· 右栏后两类页签的验收面 ────────────────
+   这两类页签没有地址条也没有顶行：开出来就是整格一块画面，页签条以下全归它。 */
+
+/**
+ * **右栏 终端页签 38%**（原型 2340–2342）：整格是常暗域——浅主题下**也是暗的**
+ * （`data-theme="dark"` ＋ `--ow-term-bg` / `--ow-term-text`），所以这一屏亮暗两张里
+ * 栏体那块应当逐像素一致，只有左半屏会话与页签条随主题翻。
+ *
+ * 核对点：内距 12/14、mono ＋ `--ow-fs-code`/`--ow-lh-code`、长行 `pre-wrap` 折行不横滚、
+ * 尾部 8×15 块状光标。
+ *
+ * 荧黄逐处旁注：左半屏 0 处；右半屏 **行动极 ×1**（`Composer` 发送钮）＋
+ * **状态极 ×1**（终端光标 `--ow-term-cursor`，§4「聚焦终端光标」那一档）——两极语义不同、
+ * 各限一处，面积合计远低于 3%。栏里若有第二处状态极（比如另一格终端也亮着光标），
+ * 就该把非聚焦那格的 `cursor` 关掉。
+ */
+export const SidePanelTerminal38: Story = {
+  name: "右栏 终端页签 38%",
+  render: () => sidePanelScreen(false, "terminal"),
+}
+
+/**
+ * **右栏 子任务页签 38%**（原型 2344–2368）：一段小会话的时间轴——头 10/14（标题 ＋
+ * mono 读数 ＋ 6px 无彩点），体 16/14，轨道列 12 宽、1.5px `--ow-timeline` 竖线通高，
+ * 用户轮 8×8 空心环把线断开、智能体轮 7×7 实心点压在线上，正文 lh 1.7。
+ *
+ * 与主会话的关系：节点形差**同源**（那边是 11px 一档，窄栏这边降到 8/7），所以两处
+ * 「谁在说话」的读法一致；它与 `chat/SubAgentThread`（并行子进程列表）不是一件事。
+ *
+ * 荧黄逐处旁注：左半屏 0 处；右半屏 **行动极 ×1**（`Composer` 发送钮）；子任务面一律
+ * 无彩——读数那颗点取 `--ow-progress-fill`，不占任何一极。
+ */
+export const SidePanelSubAgent38: Story = {
+  name: "右栏 子任务页签 38%",
+  render: () => sidePanelScreen(false, "subagent"),
+}
+
+/* ── A8-B4（原型模板 2370–2381 · 文案 4031–4035）· 空栏那一屏 ────────────────────
+   一个页签都没有时，栏里没有页签条内容、也没有地址条，只有栏体中央那三行快捷动作。 */
+
+/**
+ * **右栏 空栏**：`SidePanelEmpty` 三行 36 高快捷动作（新建浏览器标签 ⌘T / 打开终端 ⌘B /
+ * 打开文件管理 ⌘P），列宽 280 居中，右端 18 高 mono 键帽。这一档不摆信标母题——
+ * 母题已经在网页页签那块占位地上出现过一次，同一栏里不重复。
+ *
+ * 荧黄逐处旁注：左半屏 0 处；右半屏 **行动极 ×1**（`Composer` 发送钮），侧开栏本身 0 处。
+ */
+export const SidePanelEmptyScreen: Story = {
+  name: "右栏 空栏",
+  render: () => (
+    <DesktopScreenFrame>
+      <DesktopWorkbenchShell
+        contained
+        view="chat"
+        sidebar={<ChatSidebar />}
+        sidePanel={
+          <WorkbenchSidePanel>
+            <WebPreviewNav
+              density="panel"
+              tabs={[]}
+              activeTabId={null}
+              onSwitchTab={noop}
+              onCloseTab={noop}
+              onCloseOtherTabs={noop}
+              onAddBrowser={noop}
+              onAddTerminal={noop}
+              onAddFiles={noop}
+              onToggleWide={noop}
+              onToggleCollapsed={noop}
+            />
+            <SidePanelEmpty onSelect={noop} />
+          </WorkbenchSidePanel>
+        }
+        chat={chatColumn(
+          // 右栏开着 → 会话头那颗「打开右栏 ⌘T」开关按下（R2 · L3-2-6）
+          { title: "落地页改版", panelOpen: true },
+          <Transcript
+            className="min-h-0 flex-1"
+            maxWidth={752}
+            sender={
+              <Composer
+                defaultValue=""
+                onSend={noop}
+                toolbarEnd={<DesktopComposerModelButton label="Sonnet 4.5 · 标准" onClick={noop} />}
+              />
+            }
+          >
+            <UserTurn text="把落地页首屏的标题和副标题改短。" time="11:18" />
+            <AgentTurn name="Orbitwork" meta="4 步 · 1m08s" disclaimer="内容由 AI 生成，请仔细核实回答内容。">
+              <p>标题压到 12 个字、副标题压到一行。要看预览的话，右边开一个浏览器标签就行。</p>
+            </AgentTurn>
+          </Transcript>,
+        )}
+        skills={null}
+        sites={null}
+        scheduledTasks={null}
+        workspace={null}
+      />
+    </DesktopScreenFrame>
+  ),
+}
+
+/* ── A9-B2（原型 template.dc.html:1148-1216）· 桌面端真实会话 DOM 的脊柱验收面 ──────
+   上面几屏走的是组件库的 `Transcript` 壳（.ow-transcript-turns），脊线段规则挂在
+   components.css 上；而 Electron 里真正渲染的是 `.chat > .chat__scroll > .chat__inner`
+   ＋一串 `.turn`——不带那个类，所以线上一直只有孤立的节点、没有贯穿线（Terry 报的
+   「只有点没有线」）。这一屏照抄那套类名，用来证明 desktop-surfaces.css 补的
+   `.chat__inner .turn::before` 段规则真的把线接上了，同时验收：
+   内容列 752、用户轮 8px 空心环把线断开、agent 轮 7px 实心点压在线上、
+   气泡 10·14 内边＋14/1.7 字＋时间挂右侧同行、agent 轮无署名行。 */
+function desktopChatInner() {
+  return (
+    <div className="chat" style={{ display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }}>
+      <div className="chat__scroll">
+        <div className="chat__inner">
+          <DesktopChatUserTurnView
+            id="u1"
+            text="帮我核对 Q3 渠道复盘引用的 14 份来源，重点看数据有没有过期。"
+            time="14:28"
+          />
+          <DesktopChatAgentTurnView
+            thinking="先把 14 份来源按发布时间排一遍，过期的单独挑出来。"
+            messages={[{ id: "a1", source: "14 份里有 3 份的口径停在 2025H2，已单独标出。" }]}
+          />
+          <DesktopChatUserTurnView id="u2" text="第 9 份的行业均值口径不对，换成中位数再跑一遍。" time="14:31" />
+          <DesktopChatAgentTurnView
+            plain
+            messages={[{ id: "a2", source: "已按中位数重算，渠道 B 的差额从 4.1pp 收到 1.3pp。" }]}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * **桌面端脊柱**：真实 `.chat__inner` DOM 下的贯穿线与节点形差。
+ *
+ * 荧黄逐处旁注：全屏 **0 处**——轮次骨架是 R3 中性件，本屏不挂 Composer / 产物卡。
+ */
+export const DesktopSpine: Story = {
+  name: "桌面端脊柱（.chat__inner）",
+  render: () => (
+    <DesktopScreenFrame>
+      <DesktopWorkbenchShell
+        contained
+        view="chat"
+        sidebar={<ChatSidebar />}
+        chat={desktopChatInner()}
+        skills={null}
+        sites={null}
+        scheduledTasks={null}
+        workspace={null}
+      />
+    </DesktopScreenFrame>
+  ),
+}