@orbit-work/ui 0.1.0

package/src/screens/SettingsModels.stories.tsx

@@ -0,0 +1,228 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import type { ReactNode } from "react"
+import { ModelPickerList } from "../components/composite/ModelPickerList"
+import type { ModelSelectOption } from "../components/composite/ModelSelect"
+import { ModelsSettingsSectionView } from "../components/composite/ModelsSettingsSectionView"
+import { DesktopSettingsView } from "../components/domain/desktop/DesktopSettingsView"
+import { DesktopSidebarView } from "../components/domain/desktop/DesktopSidebarView"
+import { DesktopWorkbenchShell } from "../components/domain/desktop/DesktopWorkbenchShell"
+import { screenHomeChat } from "./_home"
+import { DesktopScreenFrame, SCREEN_PARAMETERS, noop, screenSidebarProps } from "./_screen"
+import { SETTINGS_NAV } from "./_settingsNav"
+
+/**
+ * Settings · 模型 整屏（蓝图 06 · screens，Settings 两张之二）。
+ *
+ * 组合件：`DesktopWorkbenchShell` 的 `settings` 槽｜`DesktopSettingsView`
+ * ｜`ModelsSettingsSectionView`（三条 `ModelSelect` 配方：默认 / 图像 / 视觉，
+ * 底层是 `Select` 原语＋`ModelPickerList`）。不可用与加载失败两态由本件自带。
+ *
+ * R2（Terry 2026-09-03 第 3 条）：设置**改回弹窗**——整幅二级页撤回，立面归口
+ * `composite/Dialog` 的 `bare` 档：`--ow-scrim` 遮罩 ＋ 960×640 定尺立面
+ * （`--ow-radius-modal` 16 · 1px `--ow-border` · `--ow-shadow-modal` · z `--ow-z-modal`），
+ * 左栏 216 宽 `--ow-bg` 地色（栏底 mono 版本号），右栏 `--ow-surface` 纸面 ＋ 左沿分栏线。
+ * 底屏是主屏（`_home.tsx` 的 `screenHomeChat()`）：模态要证的是「压住了什么」；
+ * story 传 `portal={false}`，遮罩才留在 1440×800 画框内可截图。
+ * 左栏是原型的十段（本段＝「模型配置」），右栏头多了一行说明句。
+ *
+ * R2 补漏（找茬 L1-1-7 / L1-1-8）：段内多一张**思考强度**卡（三格 标准 / 深度思考 /
+ * 极限思考，原型模板 L2517–2530 那张独立卡），组标题从 14/600 的「模型选择」改成
+ * 眉标档「默认模型」——右栏头已经是一枚 24 段标题，紧挨着再来一枚 14/600 是双标题。
+ *
+ * ## 荧黄逐处旁注
+ * - **位置极 ×1**：`.snav.active`（`--ow-current-bg` 填充块，不点信标点；理由同外观屏）。
+ *   底层侧栏被二级页整幅盖住，左半屏零荧黄。
+ * - **行动极 0 处**（Available）：模型页只有选择，没有主按钮。
+ *   失败态里的「重试」是 secondary，同样不占行动极。
+ * - **状态极 0 处**：`Select` 与 `ModelPickerList` 是 §4 R3 中性件，选中靠勾不靠荧黄。
+ * - 模型名与上下文长度等读数走 mono；能力标签是 tint 面＋on-tint 文字，R1 双编码——
+ *   这两条只在**展开的 `ModelPickerList`** 里可见（闭合 `Select` 只出模型名），
+ *   取证屏是 `PickerExpanded`，不要在 `Available` 上找。
+ */
+const meta = {
+  title: "Screens/SettingsModels",
+  parameters: SCREEN_PARAMETERS,
+} satisfies Meta
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const DEFAULT_MODELS: ModelSelectOption[] = [
+  {
+    id: "sonnet",
+    name: "Sonnet",
+    description: "日常够用，快且稳",
+    providerName: "Anthropic",
+    recommended: true,
+    inputModalities: ["text", "image"],
+    outputModalities: ["text"],
+    multiplier: 1,
+  },
+  {
+    id: "opus",
+    name: "Opus",
+    description: "留给要动脑子的长任务",
+    providerName: "Anthropic",
+    inputModalities: ["text", "image"],
+    outputModalities: ["text"],
+    multiplier: 5,
+  },
+  {
+    id: "haiku",
+    name: "Haiku",
+    description: "短问短答，最省",
+    providerName: "Anthropic",
+    inputModalities: ["text"],
+    outputModalities: ["text"],
+    multiplier: 0.25,
+  },
+]
+
+const IMAGE_MODELS: ModelSelectOption[] = [
+  { id: "img-standard", name: "标准图像", description: "出图快，适合草图", outputModalities: ["image"] },
+  { id: "img-hd", name: "高清图像", description: "出图慢，细节多", outputModalities: ["image"] },
+]
+
+const VISION_MODELS: ModelSelectOption[] = [
+  { id: "opus", name: "Opus", description: "看图理解最准", inputModalities: ["text", "image"] },
+  { id: "sonnet", name: "Sonnet", description: "看图够用", inputModalities: ["text", "image"] },
+]
+
+function ModelsScreen({ body }: { body: ReactNode }) {
+  return (
+    <DesktopScreenFrame>
+      <DesktopWorkbenchShell
+        contained
+        view="chat"
+        sidebar={<DesktopSidebarView {...screenSidebarProps()} />}
+        chat={screenHomeChat()}
+        skills={null}
+        sites={null}
+        scheduledTasks={null}
+        workspace={null}
+        settings={
+          <DesktopSettingsView
+            items={SETTINGS_NAV}
+            activeId="models"
+            version="v1.4.2"
+            portal={false}
+            onChange={noop}
+            onClose={noop}
+          >
+            {body}
+          </DesktopSettingsView>
+        }
+      />
+    </DesktopScreenFrame>
+  )
+}
+
+/** 可用：三条模型选择都有值，副行说明为什么选它。 */
+export const Available: Story = {
+  render: () => (
+    <ModelsScreen
+      body={
+        <ModelsSettingsSectionView
+          available
+          unavailableReason=""
+          defaultModel="sonnet"
+          defaultModelOptions={DEFAULT_MODELS}
+          onDefaultModelChange={noop}
+          imageModel="img-hd"
+          imageModelOptions={IMAGE_MODELS}
+          onImageModelChange={noop}
+          visionModel="opus"
+          visionModelOptions={VISION_MODELS}
+          onVisionModelChange={noop}
+          effort="standard"
+          onEffortChange={noop}
+        />
+      }
+    />
+  ),
+}
+
+/**
+ * 加载失败：§6 错误制式——一句人话＋可重试，已选的值不被清掉。
+ * 极位标注 —— 位置极 ×1（`.snav.active`）；行动极 0（重试是 secondary）；状态极 0。
+ */
+export const LoadFailed: Story = {
+  render: () => (
+    <ModelsScreen
+      body={
+        <ModelsSettingsSectionView
+          available
+          unavailableReason=""
+          loadFailed
+          loadError="没取到模型列表，网络或授权可能出问题了。"
+          onRetry={noop}
+          defaultModel="sonnet"
+          defaultModelOptions={DEFAULT_MODELS}
+          onDefaultModelChange={noop}
+          imageModel={null}
+          imageModelOptions={IMAGE_MODELS}
+          onImageModelChange={noop}
+          visionModel={null}
+          visionModelOptions={VISION_MODELS}
+          onVisionModelChange={noop}
+        />
+      }
+    />
+  ),
+}
+
+/**
+ * 展开态：把 `ModelPickerList` 直接摆在分节下面，验旁注里那两条在闭合 `Select` 上
+ * 看不见的规格——**能力标签**（文/图 输入输出，tint 面＋on-tint 文字）与
+ * **mono 读数**（倍率 ×N、tabular-nums），以及 §6 无彩选中的四重编码
+ * （底＋边＋勾＋500 字重）。整屏卡原来只截闭合 `Select`，这两条一直没有取证位。
+ * 极位标注 —— 位置极 ×1（`.snav.active`）；行动极 0；状态极 0（选中靠勾不靠荧黄）。
+ */
+export const PickerExpanded: Story = {
+  render: () => (
+    <ModelsScreen
+      body={
+        <>
+          <ModelsSettingsSectionView
+            available
+            unavailableReason=""
+            defaultModel="sonnet"
+            defaultModelOptions={DEFAULT_MODELS}
+            onDefaultModelChange={noop}
+            imageModel="img-hd"
+            imageModelOptions={IMAGE_MODELS}
+            onImageModelChange={noop}
+            visionModel="opus"
+            visionModelOptions={VISION_MODELS}
+            onVisionModelChange={noop}
+            effort="deep"
+            onEffortChange={noop}
+          />
+          <div
+            style={{
+              marginTop: 12,
+              padding: 4,
+              border: "1px solid var(--ow-border)",
+              borderRadius: "var(--ow-radius-card)",
+              background: "var(--ow-popover-bg)",
+            }}
+          >
+            <ModelPickerList
+              options={DEFAULT_MODELS.map((model) => ({
+                id: model.id,
+                name: model.name,
+                secondaryText: model.description,
+                recommended: model.recommended,
+                inputModalities: model.inputModalities,
+                outputModalities: model.outputModalities,
+                multiplier: model.multiplier,
+              }))}
+              value="sonnet"
+              onSelect={noop}
+            />
+          </div>
+        </>
+      }
+    />
+  ),
+}

package/src/screens/SettingsSections.stories.tsx

@@ -0,0 +1,164 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import type { ReactNode } from "react"
+import { DataManagementSectionView } from "../components/composite/DataManagementSectionView"
+import { RadioCardGroup } from "../components/composite/RadioCard"
+import { ShortcutGroupTable } from "../components/composite/ShortcutSheet"
+import { DesktopSettingsView } from "../components/domain/desktop/DesktopSettingsView"
+import { DesktopSidebarView } from "../components/domain/desktop/DesktopSidebarView"
+import { DesktopWorkbenchShell } from "../components/domain/desktop/DesktopWorkbenchShell"
+import { screenHomeChat } from "./_home"
+import { DesktopScreenFrame, SCREEN_PARAMETERS, noop, screenSidebarProps } from "./_screen"
+import { SETTINGS_NAV } from "./_settingsNav"
+
+/**
+ * Settings · 授权模式 / 快捷键 / 数据管理 三段（蓝图 06 · screens）。
+ *
+ * A2-B5（裁决 2 · 原型 3308–3319）：设置十段里，这三段原来在组件库中**没有落点**——
+ * 「授权模式」缺单选卡、「快捷键」只有弹层版清单（`ShortcutSheet`）、
+ * 「数据管理」只有站点一半、缺「已分享的会话」。本屏把三件新配方一次摆齐：
+ *
+ * - `RadioCardGroup`（原型 2534–2542）：一组互斥选项，每项一句说明。选中由 **radio 圆点**
+ *   承担（16 圈 1.5px 边 ＋ 8 内点，`--ow-control-on`/`--ow-control-off`），卡边始终
+ *   `--ow-border`——与 `DesktopSelectionCard`（勾＋边＋徽标的网格选择卡）分工不同。
+ * - `ShortcutGroupTable`（原型 2675–2692）：眉标 ＋ 一张表卡，行间 1px 线，键位走
+ *   `KeycapCombo`。键位数据由研发接真机 shortcuts 表，组件不内置。
+ * - `DataManagementSectionView`（原型 2578–2600）：站点与会话两组，行内 mono 读数
+ *   「链接 · 权限」，右侧「复制链接」＋ `--ow-danger` 文字的描边「停止分享」。
+ *
+ * R2（Terry 2026-09-03 第 3 条）：设置**改回弹窗**——整幅二级页撤回，立面归口
+ * `composite/Dialog` 的 `bare` 档：`--ow-scrim` 遮罩 ＋ 960×640 定尺立面
+ * （`--ow-radius-modal` 16 · 1px `--ow-border` · `--ow-shadow-modal` · z `--ow-z-modal`），
+ * 左栏 216 宽 `--ow-bg` 地色（栏底 mono 版本号），右栏 `--ow-surface` 纸面 ＋ 左沿分栏线。
+ * 底屏是主屏（`_home.tsx` 的 `screenHomeChat()`）：模态要证的是「压住了什么」；
+ * story 传 `portal={false}`，遮罩才留在 1440×800 画框内可截图。
+ *
+ * ## 荧黄逐处旁注
+ * - **位置极 ×1**：`.snav.active`（`--ow-current-bg` 填充块，不点信标点）。
+ * - **行动极 0 处**：三段都没有主按钮。「复制链接」「停止分享」都是 secondary 描边形；
+ *   「停止分享」是破坏性动作但不是主行动，只换 `--ow-danger` 文字色，不实心填充
+ *   （一屏四枚实心 danger 会读成四个行动极）。
+ * - **状态极 0 处**：R3 中性面，选中靠圆点的形编码。
+ */
+const meta = {
+  title: "Screens/SettingsSections",
+  parameters: SCREEN_PARAMETERS,
+} satisfies Meta
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+function SectionScreen({ activeId, body }: { activeId: string; body: ReactNode }) {
+  return (
+    <DesktopScreenFrame>
+      <DesktopWorkbenchShell
+        contained
+        view="chat"
+        sidebar={<DesktopSidebarView {...screenSidebarProps()} />}
+        chat={screenHomeChat()}
+        skills={null}
+        sites={null}
+        scheduledTasks={null}
+        workspace={null}
+        settings={
+          <DesktopSettingsView
+            items={SETTINGS_NAV}
+            activeId={activeId}
+            version="v1.4.2"
+            portal={false}
+            onChange={noop}
+            onClose={noop}
+          >
+            {body}
+          </DesktopSettingsView>
+        }
+      />
+    </DesktopScreenFrame>
+  )
+}
+
+/** 授权模式：三档单选卡，停在「每次都问」。 */
+export const Auth: Story = {
+  render: () => (
+    <SectionScreen
+      activeId="auth"
+      body={
+        <RadioCardGroup
+          aria-label="授权模式"
+          value="ask"
+          onChange={noop}
+          options={[
+            { value: "ask", label: "每次都问", description: "专家每一次调用工具或读写本地文件都先征求你的同意" },
+            { value: "session", label: "本次会话内记住", description: "同一个会话里，同类操作只问第一次" },
+            { value: "auto", label: "全部自动放行", description: "不再询问；只在你完全信任当前项目时使用" },
+          ]}
+        />
+      }
+    />
+  ),
+}
+
+/** 快捷键：四组分组表，键位照原型的示例填（真机由研发接）。 */
+export const Shortcuts: Story = {
+  render: () => (
+    <SectionScreen
+      activeId="keys"
+      body={
+        <ShortcutGroupTable
+          groups={[
+            {
+              id: "global",
+              title: "全局",
+              items: [
+                { id: "palette", label: "打开命令面板", keys: ["⌘", "K"] },
+                { id: "all", label: "查看全部快捷键", keys: ["⌘", "/"] },
+                { id: "back", label: "返回上一级", keys: ["⌘", "["] },
+                { id: "esc", label: "关闭当前弹层", keys: ["Esc"] },
+              ],
+            },
+            {
+              id: "composer",
+              title: "输入框",
+              items: [
+                { id: "send", label: "发送", keys: ["↵"] },
+                { id: "newline", label: "换行", keys: ["⇧", "↵"] },
+                { id: "skills", label: "调用技能与指令", keys: ["/"] },
+                { id: "mention", label: "引用专家与连接器", keys: ["@"] },
+              ],
+            },
+            {
+              id: "panel",
+              title: "右侧面板",
+              items: [
+                { id: "tab", label: "新建浏览器标签", keys: ["⌘", "T"] },
+                { id: "files", label: "打开文件管理", keys: ["⌘", "P"] },
+              ],
+            },
+          ]}
+        />
+      }
+    />
+  ),
+}
+
+/** 数据管理：站点与会话两组都在，「已分享的会话」是本轮补上的那一半。 */
+export const Data: Story = {
+  render: () => (
+    <SectionScreen
+      activeId="data"
+      body={
+        <DataManagementSectionView
+          onCopyLink={noop}
+          onRevoke={noop}
+          sites={[
+            { id: "s1", name: "行业周报 · 静态站", url: "orbitwork.site/weekly", access: "公开访问" },
+            { id: "s2", name: "定价页改版稿", url: "orbitwork.site/pricing-v2", access: "指定成员" },
+          ]}
+          shares={[
+            { id: "sh-1", name: "重构 Desktop UI", url: "share.orbitwork.cn/s/9d21", access: "指定成员" },
+            { id: "sh-2", name: "每日行业动态", url: "share.orbitwork.cn/s/4a77", access: "公开访问" },
+          ]}
+        />
+      }
+    />
+  ),
+}

package/src/screens/Share.stories.tsx

@@ -0,0 +1,202 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { useState } from "react"
+import { Markdown } from "../components/composite/Markdown"
+import { AgentLoopSegment } from "../components/domain/chat/AgentLoopSegment"
+import { AgentTurn } from "../components/domain/chat/AgentTurn"
+import { Composer } from "../components/domain/chat/Composer"
+import { ContextUsage } from "../components/domain/chat/ContextUsage"
+import { ExecutionSummary } from "../components/domain/chat/ExecutionSummary"
+import { MessageActions } from "../components/domain/chat/MessageActions"
+import { Thinking } from "../components/domain/chat/Thinking"
+import { Transcript } from "../components/domain/chat/Transcript"
+import { UserTurn } from "../components/domain/chat/UserTurn"
+import { DesktopChatHeaderView } from "../components/domain/desktop/DesktopChatHeaderView"
+import { DesktopComposerModelButton } from "../components/domain/desktop/DesktopComposer"
+import { DesktopShareSelectionBarView } from "../components/domain/desktop/DesktopShareSelectionBarView"
+import { DesktopSidebarView } from "../components/domain/desktop/DesktopSidebarView"
+import { DesktopWorkbenchShell } from "../components/domain/desktop/DesktopWorkbenchShell"
+import { DesktopScreenFrame, SCREEN_PARAMETERS, noop, screenSidebarProps } from "./_screen"
+
+/**
+ * Share 整屏（蓝图 06 · screens）——**会话内选段分享模式**的组合证明（Terry 裁决 8、9；
+ * 原型 template.dc.html:1094–1616，挑选栏 1418–1436，逐段勾选 1142–1149）。
+ *
+ * 这一屏正面回答裁决 9：原型里的「分享」不是另一张页面，而是**会话自己的一种模式**——
+ * 点会话头右上第一枚分享键（`aria-pressed`）之后：
+ * 1. 每一轮行首长出一枚勾选框（进入即**全选**），提问与回答**各自独立**一枚，不成对联动；
+ * 2. 正文整列右移 32px（16 框 ＋ 16 沟），脊线跟着右移、仍对着节点走，长行照原型重排；
+ * 3. 底下的 Composer **让位**给挑选栏——两块常驻、`max-height`＋`opacity` 互换
+ *    （200ms `--ow-ease-beacon`），所以退出分享后草稿 / @芯片 / 附件都还在（原型 1427 注释）；
+ * 4. 挑选栏坐在 composer 那个 `max-width:752` 的列里，于是**与对话同宽同轴**（裁决 8 原话），
+ *    不是旧那条 `position:absolute` 通栏贴底工具条。
+ *
+ * 组合件全是已落地件，本屏只组合、不新造：`DesktopWorkbenchShell` ｜ `DesktopSidebarView`
+ * ｜ `DesktopChatHeaderView`（分享键 `aria-pressed=true`）｜ `Transcript`
+ * （`selectable` ＋ `mode="share"`）｜ `UserTurn` / `AgentTurn`（`selectable` / `checked` /
+ * `onToggle`）｜ `DesktopShareSelectionBarView`（44 高行内条）｜ `Composer`（让位中，未卸载）。
+ *
+ * ## 荧黄逐处旁注（每半屏每极 ≤1）
+ * - **位置极**：左半屏 **0 处**——当前会话行走 `--ow-current-bg` 填充块 ＋ 500 字重（主编码）。
+ * - **状态极 0 处**：`Thinking` 传 `spinning={false}`（那一段已经跑完），`ExecutionSummary`
+ *   是 R3 中性件；勾选框的选中态走 `--ow-control-on`（**墨/纸**，不是荧黄）。
+ * - **行动极 ×1**：挑选栏右端的「生成分享图」primary（暗档 `--ow-btn-primary-bg` = 荧黄）。
+ *   此刻 Composer 的发送钮已随整块让位收进 0 高、`inert`，全屏行动极仍只有一处，自洽。
+ * - 选中行**不加底色**：选中态只由勾选框自己承担（原型 1159 正文容器无 background），
+ *   不与侧栏当前项的 `--ow-current-bg` 抢同一句话。
+ *
+ * ## 与「对外落地页」的关系
+ * 旧的 `Screens/Share`（纸面正文 ＋ 藏蓝 `ShareStrip`「交给 Orbitwork，工作继续。」）
+ * 是另一个物种，原型全包里没有那张页；它已原样改名到 `Screens/SharePage` 待裁
+ * （plan-research A7 openQuestions 第 3 条）。
+ */
+const meta = {
+  title: "Screens/Share",
+  parameters: SCREEN_PARAMETERS,
+} satisfies Meta
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** 四段：提问与回答各自一枚勾选框（原型 3796 的 key＝`g.id+':u'` / `g.id+':a'`，互不联动）。 */
+const TURN_KEYS = ["u1", "a1", "u2", "a2"] as const
+type TurnKey = (typeof TURN_KEYS)[number]
+
+const AGENT_BODY = `**核对结果**
+
+14 份来源里有 3 份的数据停在 2025H2，其中第 9 份的行业均值口径与其余 13 份不一致，已按下表统一：
+
+| 指标 | 旧口径 | 新口径 |
+| --- | --- | --- |
+| 行业基准 | 均值 | 中位数 |
+| 去重方式 | 按账号 | 按主体 |
+`
+
+function ShareModeScreen() {
+  /* 进入分享即全选（原型 startShare 3908）——四段全勾，读数「已选 4 段」。 */
+  const [picked, setPicked] = useState<Record<TurnKey, boolean>>({ u1: true, a1: true, u2: true, a2: true })
+  const count = TURN_KEYS.filter((key) => picked[key]).length
+  const allSelected = count === TURN_KEYS.length
+  const toggle = (key: TurnKey) => (next: boolean) => setPicked((prev) => ({ ...prev, [key]: next }))
+
+  return (
+    <DesktopScreenFrame>
+      <DesktopWorkbenchShell
+        contained
+        view="chat"
+        sidebar={<DesktopSidebarView {...screenSidebarProps()} />}
+        chat={
+          <div style={{ height: "100%", minHeight: 0, display: "flex", flexDirection: "column" }}>
+            {/* 会话头（原型 1096–1109）：48 高通栏、标题左对齐；右端第一枚就是分享键，
+                进模式后 aria-pressed=true 常亮（.session-ctx-btn[aria-pressed="true"]）。 */}
+            <DesktopChatHeaderView
+              title="Q3 渠道复盘"
+              shareActive
+              onShare={noop}
+              onOpenContext={noop}
+              onOpenPanel={noop}
+            />
+            <div
+              style={{
+                flex: "1 1 auto",
+                minHeight: 0,
+                display: "flex",
+                flexDirection: "column",
+                padding: "0 24px 12px",
+              }}
+            >
+              <Transcript
+                className="min-h-0 flex-1"
+                maxWidth={752}
+                selectable
+                mode="share"
+                /* composer 不卸载：让位靠 max-height/opacity，草稿「对照表出来后…」原样躺着 */
+                sender={
+                  <Composer
+                    defaultValue="对照表出来后把结论压到三条"
+                    onSend={noop}
+                    contextUsage={<ContextUsage value={0.48} showReadout readout="48%" />}
+                    toolbarEnd={<DesktopComposerModelButton label="Sonnet 4.5 · 标准" onClick={noop} />}
+                  />
+                }
+                pickBar={
+                  <DesktopShareSelectionBarView
+                    allSelected={allSelected}
+                    selectedCount={count}
+                    onToggleAll={() =>
+                      setPicked(
+                        Object.fromEntries(TURN_KEYS.map((key) => [key, !allSelected])) as Record<TurnKey, boolean>,
+                      )
+                    }
+                    onCancel={noop}
+                    onShare={noop}
+                  />
+                }
+              >
+                <UserTurn
+                  selectable
+                  checked={picked.u1}
+                  onToggle={toggle("u1")}
+                  text="帮我核对 Q3 渠道复盘引用的 14 份来源，重点看数据有没有过期。"
+                  time="14:12"
+                />
+                <AgentTurn
+                  selectable
+                  checked={picked.a1}
+                  onToggle={toggle("a1")}
+                  actions={<MessageActions actions={["copy", "regenerate", "branch", "quote"]} time="14:18" />}
+                >
+                  {/* 一段 agent loop 的节奏（AgentLoopSegment，gap 10）：思考行 → 执行摘要卡 → 段内正文。
+                      顺序照原型 1200-1250；不走 AgentTurn 的 thinking/execution 两槽——那两槽把摘要卡
+                      排在思考行**之上**（AgentTurn/index.tsx:130-131），与原型相反（登记在 notes）。 */}
+                  <AgentLoopSegment>
+                    <Thinking
+                      variant="inline"
+                      spinning={false}
+                      label="先把 14 份来源按发布时间排一遍，过期的单独挑出来"
+                    />
+                    <ExecutionSummary label="核对来源与口径" steps={3} duration="2m06s" />
+                    <Markdown source={AGENT_BODY} />
+                  </AgentLoopSegment>
+                </AgentTurn>
+                <UserTurn
+                  selectable
+                  checked={picked.u2}
+                  onToggle={toggle("u2")}
+                  text="第 9 份换成中位数再跑一遍，然后把结果整理成一张对照表。"
+                  time="14:21"
+                />
+                <AgentTurn
+                  selectable
+                  checked={picked.a2}
+                  onToggle={toggle("a2")}
+                  actions={<MessageActions actions={["copy", "regenerate", "branch", "quote"]} time="14:26" visible />}
+                  disclaimer="内容由 AI 生成，请仔细核实回答内容。"
+                >
+                  <p>对照表已经按新口径重算好，三处差额都落回可解释范围，要我直接压成三条结论吗？</p>
+                </AgentTurn>
+              </Transcript>
+            </div>
+          </div>
+        }
+        skills={null}
+        sites={null}
+        scheduledTasks={null}
+        workspace={null}
+      />
+    </DesktopScreenFrame>
+  )
+}
+
+/**
+ * **会话内分享模式**：四轮全勾、底部挑选栏与对话同宽同轴。
+ *
+ * 逐项核对（对原型 render/share--default.light.png）：会话头分享键常亮 ＋ `aria-pressed=true`
+ * ｜每轮行首 16px 勾选框（我们形状表 16/1px/`--ow-radius-2xs`，比原型 18/1.5px 小一档，
+ * 全库只留一种勾选语法）｜正文列右移 32px、脊线同步右移｜挑选栏 44 高、1px `--ow-border`
+ * ＋ `--ow-radius-lg` ＋ `--ow-surface-2`、内距 0 12、gap 10、三枚控件全 28 高
+ * ｜文案「全选 / 全不选」「已选 4 段」（mono ＋ tabular-nums，量词是**段**）「取消」「生成分享图」。
+ */
+export const Default: Story = {
+  name: "会话内分享模式",
+  render: () => <ShareModeScreen />,
+}

package/src/screens/SharePage.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { SnapshotContentView } from "../components/domain/desktop/ResourceManagement/SnapshotViews"
+import { SCREEN_PARAMETERS, ScreenFrame } from "./_screen"
+
+const meta = { title: "Screens/SharePage", parameters: SCREEN_PARAMETERS } satisfies Meta
+export default meta
+type Story = StoryObj<typeof meta>
+export const FrozenContent: Story = {
+  render: () => (
+    <ScreenFrame>
+      <SnapshotContentView
+        title="项目评审记录"
+        messages={[
+          { id: "message-1", role: "user", blocks: [{ text: "请整理下一阶段的工作安排。" }] },
+          {
+            id: "message-2",
+            role: "assistant",
+            blocks: [
+              {
+                text: "先完成站点的企业登录和访问设置，再邀请同事评审。\n\n<script>此文本不会作为 HTML 执行。</script>",
+              },
+              { asset: { name: "评审附件.pdf" } },
+            ],
+          },
+        ]}
+      />
+    </ScreenFrame>
+  ),
+}