@orbit-work/ui 0.1.0

package/src/screens/Home.stories.tsx

@@ -0,0 +1,253 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { userEvent } from "@storybook/test"
+import { useState } from "react"
+import { HomeBackdrop } from "../components/composite/HomeBackdrop"
+import { Doc } from "../components/composite/Icons"
+import { Composer } from "../components/domain/chat/Composer"
+import { ComposerProjectPicker } from "../components/domain/chat/Composer/parts/ComposerProjectPicker"
+import { ComposerVoiceInput } from "../components/domain/chat/Composer/parts/ComposerVoiceInput"
+import { MOUNT_CHIP_CLASS } from "../components/domain/chat/Composer/parts/mountChip"
+import { ContextUsage } from "../components/domain/chat/ContextUsage"
+import { DesktopComposerModelButton } from "../components/domain/desktop/DesktopComposer"
+import { DesktopHomeView } from "../components/domain/desktop/DesktopHomeView"
+import { DesktopSidebarView } from "../components/domain/desktop/DesktopSidebarView"
+import { DesktopWorkbenchShell } from "../components/domain/desktop/DesktopWorkbenchShell"
+import { StarterCapsules } from "../components/domain/desktop/StarterCapsules"
+import { Chip } from "../components/primitives"
+import { DesktopScreenFrame, SCREEN_PARAMETERS, noop, screenProjects, screenSidebarProps } from "./_screen"
+
+/**
+ * Home 整屏（蓝图 06 · screens）——主屏落地面的组合证明。
+ *
+ * 组合件：`DesktopWorkbenchShell`（= `AppLayout` ＋ 一整面纸 `.owcenter`）｜`DesktopSidebarView`
+ * ｜`HomeBackdrop`（主屏背景构造线纹，只描边 `--ow-border`、`opacity .5`，**只这一屏挂**）
+ * ｜`DesktopHomeView`（34 品牌标 ＋ 32 展示字主视觉句，容器 800/px24 → 内容 752、`gap 20`）
+ * ｜`StarterCapsules`（一期五枚固定示例，点击把文字塞进输入框）｜`Composer`（空态档：发送钮停在 disabled）
+ * ｜`ComposerProjectPicker`＋`Chip`。
+ *
+ * 裁决 18：主屏与「容器空态」分家——原来这里挂的是 `DesktopChatEmptyStateView`（40 信标母题
+ * ＋ 一句 13px 灰字），那是「本该有东西却没有」的语法，不是主屏该说的话。空态件本体保留，
+ * 只是主屏不再走它。井外那句「内容由 AI 生成，请仔细核实回答内容。」按裁决整句删（原型井外一无所有）。
+ *
+ * 荧黄配额（每半屏每极 ≤1）：
+ * - 左半屏（侧栏）：位置极**空置**——新会话还没落位，nav 无 current、线程无 active，
+ *   `.ownavitem.active svg .dot`（`--ow-accent-dot`）不点亮，本半屏零荧黄。
+ * - 右半屏（主视觉面）：行动极 ×1 ＝ Composer 发送钮 `Button variant="primary"`
+ *   （暗档 `--ow-btn-primary-bg` = `--ow-yellow`）；空草稿下按钮 disabled，逐 token 降调不压整块透明度。
+ *   状态极 0——没有正在跑的事。背景线纹与起手胶囊都是无彩件，不占极位。
+ */
+const meta = {
+  title: "Screens/Home",
+  parameters: SCREEN_PARAMETERS,
+} satisfies Meta
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/**
+ * 附件芯片的读数半边：`Chip` 的 `description` 只接到 Tooltip，页面上不渲染，
+ * 判断表「挂载芯片 … + mono 指令」的读数在这条路径上原来没有落点。
+ * 体积走 label 尾巴上的 mono + tabular-nums span（不用 `count` 槽——那会把形状
+ * 从 6 直角切成 999 胶囊，而附件芯片既无状态点也无计数）。
+ */
+function AttachmentLabel({ name, size }: { name: string; size: string }) {
+  return (
+    <span className="flex items-baseline gap-1.5 min-w-0 max-w-full">
+      <span className="min-w-0 overflow-hidden text-ellipsis">{name}</span>
+      <span className="shrink-0 font-[family-name:var(--ow-font-mono)] tabular-nums opacity-70">{size}</span>
+    </span>
+  )
+}
+
+const PROJECTS = [
+  { id: "default", name: "默认项目", label: "默认项目", description: "未归档的临时任务" },
+  { id: "orbit-fe", name: "orbit-fe", label: "orbit-fe", description: "前端主仓" },
+]
+
+/**
+ * 冷启动：线纹 ＋ 主视觉 ＋ 五枚起手胶囊 ＋ 空 Composer，两半屏都不亮信标。
+ * 胶囊按裁决 18 接线：点一下把这枚的文字塞进输入框（`value`/`onChange` 走受控 Composer）。
+ */
+export const NewSession: Story = {
+  render: function NewSessionScreen() {
+    const [draft, setDraft] = useState("")
+    const [picked, setPicked] = useState<string | null>(null)
+    return (
+      <DesktopScreenFrame>
+        <DesktopWorkbenchShell
+          contained
+          view="chat"
+          sidebar={
+            <DesktopSidebarView
+              {...screenSidebarProps({
+                /* R2 · L1-1-1：主屏的当前项是「新任务」（原型模板 L5008–5013，NAV 首项）。
+                   原来 activeNav 的类型禁掉了这一档，主屏整屏零位置极——四条导航全无底色。 */
+                activeNav: "new",
+                projects: screenProjects.map((project) => ({
+                  ...project,
+                  threads: project.threads.map((thread) => ({ ...thread, active: false })),
+                })),
+              })}
+            />
+          }
+          chat={
+            <DesktopHomeView
+              backdrop={<HomeBackdrop />}
+              capsules={
+                <StarterCapsules
+                  value={picked}
+                  onSelect={(option) => {
+                    setPicked(option.id)
+                    setDraft(option.label)
+                  }}
+                />
+              }
+            >
+              <Composer
+                value={draft}
+                onChange={setDraft}
+                placeholder="今天帮你做些什么？ / 调用技能与指令 @ 引用专家和连接器"
+                onSend={() => setDraft("")}
+                project={<ComposerProjectPicker value="orbit-fe" options={PROJECTS} onChange={noop} onCreate={noop} />}
+                contextUsage={<ContextUsage value={0.72} showReadout readout="72%" />}
+                toolbarEnd={<DesktopComposerModelButton label="Sonnet 4.5 · 标准" onClick={noop} />}
+                voice={<ComposerVoiceInput onToggle={noop} />}
+              />
+            </DesktopHomeView>
+          }
+          skills={null}
+          sites={null}
+          scheduledTasks={null}
+          workspace={null}
+        />
+      </DesktopScreenFrame>
+    )
+  },
+}
+
+/**
+ * 起手带上下文：附件 chip 与项目选择都落在 Composer 的固定区，位置不可换。
+ * 极位标注 —— 右半屏行动极 ×1（发送钮已进 primary 亮档）；左半屏仍零荧黄。
+ */
+export const WithContext: Story = {
+  render: () => (
+    <DesktopScreenFrame>
+      <DesktopWorkbenchShell
+        contained
+        view="chat"
+        sidebar={
+          <DesktopSidebarView
+            {...screenSidebarProps({
+              activeNav: "new",
+              projects: screenProjects.map((project) => ({
+                ...project,
+                threads: project.threads.map((thread) => ({ ...thread, active: false })),
+              })),
+            })}
+          />
+        }
+        chat={
+          <DesktopHomeView
+            backdrop={<HomeBackdrop />}
+            capsules={<StarterCapsules value="doc-writing" />}
+            mounts="orbit-fe · 2 个附件"
+            onDismissMounts={noop}
+          >
+            <Composer
+              defaultValue="把这两份材料对一下，列出口径不一致的地方"
+              onSend={noop}
+              attachments={
+                <>
+                  <Chip
+                    className={MOUNT_CHIP_CLASS}
+                    icon={<Doc />}
+                    label={<AttachmentLabel name="渠道复盘_终稿.docx" size="184 KB" />}
+                    description="184 KB"
+                    onRemove={noop}
+                    removeLabel="移除附件"
+                  />
+                  <Chip
+                    className={MOUNT_CHIP_CLASS}
+                    icon={<Doc />}
+                    label={<AttachmentLabel name="行业面板_2026H1.xlsx" size="1.2 MB" />}
+                    description="1.2 MB"
+                    onRemove={noop}
+                    removeLabel="移除附件"
+                  />
+                </>
+              }
+              project={<ComposerProjectPicker value="default" options={PROJECTS} onChange={noop} onCreate={noop} />}
+              contextUsage={<ContextUsage value={0.72} showReadout readout="72%" />}
+              toolbarEnd={<DesktopComposerModelButton label="Sonnet 4.5 · 标准" onClick={noop} />}
+              voice={<ComposerVoiceInput onToggle={noop} />}
+            />
+          </DesktopHomeView>
+        }
+        skills={null}
+        sites={null}
+        scheduledTasks={null}
+        workspace={null}
+      />
+    </DesktopScreenFrame>
+  ),
+}
+
+/**
+ * 账户菜单开态（R2 · Terry 意见 4）——整屏 ＋ 菜单。`play` 在渲染完成后点 `.owuser__main`
+ * 把菜单打开，story 自己就是开态，不再依赖取证脚本先点一下（R2 终检：batchshot 拍到的曾是闭态）。
+ *
+ * 菜单是 `DesktopSidebarView` 自己 `createPortal` 到 `document.body` 的（不是
+ * `MenuSurface` 的 portal 档），所以它不是画框的 DOM 后代；截图要用整视口
+ * `page.screenshot()` 或以 `#storybook-root`（本身就铺满视口）为裁剪区，并等
+ * `[role="menu"]` 出现再拍（视口 ≥1500×900；实测菜单 fixed 落在画框 rect 之内）。
+ * 面本体的逐条证据在 `Desktop/DesktopAccountMenuView` 那四张。
+ *
+ * 荧黄配额（§4）：左半屏位置极 ×1 ＝「新任务」当前项（`--ow-current-bg` 填充块 ＋
+ * 图标内信标点）；菜单坐在弹层上，里面**零实底主钮**（升级钮是 secondary 描边档），
+ * 不与右半屏的 Composer 发送钮抢行动极。
+ */
+export const AccountMenu: Story = {
+  render: () => (
+    <DesktopScreenFrame>
+      <DesktopWorkbenchShell
+        contained
+        view="chat"
+        sidebar={
+          <DesktopSidebarView
+            {...screenSidebarProps({
+              /* R3：套餐/积分/版本/外观/宠物/记忆/复制 ID 已进 screenSidebarProps 缺省，
+                 整屏都是这一套菜单，本张不再单独传（Terry 意见 6：三张 Home 的菜单要同一份）。 */
+              activeNav: "new",
+              projects: screenProjects.map((project) => ({
+                ...project,
+                threads: project.threads.map((thread) => ({ ...thread, active: false })),
+              })),
+            })}
+          />
+        }
+        chat={
+          <DesktopHomeView backdrop={<HomeBackdrop />} capsules={<StarterCapsules onSelect={noop} />}>
+            <Composer
+              value=""
+              onChange={noop}
+              placeholder="今天帮你做些什么？ / 调用技能与指令 @ 引用专家和连接器"
+              onSend={noop}
+              project={<ComposerProjectPicker value="orbit-fe" options={PROJECTS} onChange={noop} onCreate={noop} />}
+              contextUsage={<ContextUsage value={0.72} showReadout readout="72%" />}
+              toolbarEnd={<DesktopComposerModelButton label="Sonnet 4.5 · 标准" onClick={noop} />}
+              voice={<ComposerVoiceInput onToggle={noop} />}
+            />
+          </DesktopHomeView>
+        }
+        skills={null}
+        sites={null}
+        scheduledTasks={null}
+        workspace={null}
+      />
+    </DesktopScreenFrame>
+  ),
+  play: async ({ canvasElement }) => {
+    const trigger = canvasElement.querySelector<HTMLElement>(".owuser__main")
+    if (trigger) await userEvent.click(trigger)
+  },
+}

package/src/screens/Login.stories.tsx

@@ -0,0 +1,134 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { DesktopLoginView } from "../components/domain/desktop/DesktopLoginView"
+import { SCREEN_PARAMETERS, ScreenFrame, noop } from "./_screen"
+
+/**
+ * Login 整屏（蓝图 06 · screens）——KV 摄影板组合证明。
+ *
+ * 分栏语法由 `DesktopLoginView` 一件承担（原 `DesktopLoginChassis` 是同一张版的
+ * 第二份配方，包内零消费方，已随裁决 7 整件删除）＝
+ * 左 KV 板（摄影图 ＋ 黑渐变遮罩 ＋ 两行宣传句）｜右 rail（登录表单＋条款脚注）。
+ *
+ * 荧黄配额：**行动极 ×1 ＝ rail 里的主按钮**（`--ow-btn-primary-bg`：浅档藏蓝 /
+ * 暗档荧黄），这是合法的行动极落点，不是「零荧黄」。位置极 0（登录屏无侧栏）、
+ * 状态极 0（没有正在跑的事）；品牌字标的卫星是 §12 锁定件本体，不计配额。
+ * （原旁注写「本屏零荧黄」又在下一句认领一枚 primary 主钮，自相矛盾，按实渲订正。）
+ *
+ * 恒定域的边界（裁决 7 改判）：左 KV 板**不再是 --ow-stage-* 平涂舞台**，而是一张
+ * 摄影图 ＋ `.login-kv-scrim` 黑渐变；底与兜底取品牌藏蓝原语 `--ow-navy`（恒定，
+ * 暗档不翻石墨），宣传语取 `--ow-white`。右 `.login-rail` 是 `--ow-bg` 的常规 UI 面，
+ * 浅暗两档照常翻转（底色、字色、按钮色全翻）。二维码图是主进程编码的 PNG
+ * （光学件恒定高对比，不随主题翻转，见 ds2-allowlist 的 paper 段），也不是状态极。
+ *
+ * 三态都传 `backgroundSrc`：本地 fixture `/fixtures/login_kv.jpeg`（＝宿主
+ * `apps/desktop/src/renderer/public/login_kv.jpeg` 同一张），不走公网外链——
+ * 外链在离线/CI 下取不到，整屏会一路掉进 fallback，照片＋遮罩就验不出来。
+ */
+const loginKv = "/fixtures/login_kv.jpeg"
+
+// Story 版假 QR（运行时由主进程编码 Identity 下发的 QR 内容）。
+const mockQrSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25" shape-rendering="crispEdges"><rect width="25" height="25" fill="#ffffff"/><g fill="#141414"><rect x="0" y="0" width="7" height="7"/><rect x="1" y="1" width="5" height="5" fill="#ffffff"/><rect x="2" y="2" width="3" height="3"/><rect x="18" y="0" width="7" height="7"/><rect x="19" y="1" width="5" height="5" fill="#ffffff"/><rect x="20" y="2" width="3" height="3"/><rect x="0" y="18" width="7" height="7"/><rect x="1" y="19" width="5" height="5" fill="#ffffff"/><rect x="2" y="20" width="3" height="3"/><rect x="9" y="4" width="2" height="2"/><rect x="13" y="2" width="3" height="3"/><rect x="9" y="9" width="4" height="4"/><rect x="15" y="10" width="2" height="2"/><rect x="19" y="9" width="3" height="3"/><rect x="4" y="9" width="2" height="2"/><rect x="10" y="15" width="3" height="3"/><rect x="15" y="15" width="4" height="4"/><rect x="21" y="16" width="2" height="2"/><rect x="9" y="21" width="2" height="2"/><rect x="13" y="20" width="3" height="3"/><rect x="19" y="21" width="3" height="3"/><rect x="5" y="13" width="2" height="2"/></g></svg>`
+const mockQrSrc = `data:image/svg+xml,${encodeURIComponent(mockQrSvg)}`
+
+const threeProviders = [
+  { id: "019a12ab-1234-7123-8123-123456789001", displayName: "钉钉", kind: "IDENTITY_PROVIDER_KIND_DINGTALK" as const },
+  { id: "019a12ab-1234-7123-8123-123456789002", displayName: "飞书", kind: "IDENTITY_PROVIDER_KIND_FEISHU" as const },
+  { id: "019a12ab-1234-7123-8123-123456789003", displayName: "企业微信", kind: "IDENTITY_PROVIDER_KIND_WECOM" as const },
+]
+
+const meta = {
+  title: "Screens/Login",
+  parameters: SCREEN_PARAMETERS,
+} satisfies Meta
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/**
+ * 欢迎态：左半屏 KV 摄影板（图＋遮罩＋宣传语），右半屏 rail＝账号密码表单（主）
+ * ＋「其他登录方式」品牌按钮行（钉钉/飞书/企业微信）。
+ * 极位标注 —— 行动极 ×1（右半屏「登录」primary，暗档取 `--ow-btn-primary-bg`＝荧黄）；
+ * 位置极 0（登录屏无侧栏）；状态极 0（没有正在跑的事）。
+ */
+export const Welcome: Story = {
+  render: () => (
+    <ScreenFrame>
+      <DesktopLoginView
+        stage="welcome"
+        backgroundSrc={loginKv}
+        appVersion="v0.1.0"
+        onBack={noop}
+        onPasswordLogin={noop}
+        providers={threeProviders}
+        onQrLogin={noop}
+      />
+    </ScreenFrame>
+  ),
+}
+
+/**
+ * 扫码态：rail 换成二维码纸面（真 QR 图＋有效期读数，mono＋tabular-nums）。
+ * 极位标注 —— 本态零荧黄（主钮已让位给二维码）：二维码白底是 `--ow-paper`
+ * 纸面语境（不占极），有效期是读数不是状态极；返回是次级按钮，行动极空置。
+ */
+export const QrScanning: Story = {
+  render: () => (
+    <ScreenFrame>
+      <DesktopLoginView
+        stage="qr"
+        backgroundSrc={loginKv}
+        expiresText="04:38"
+        appVersion="v0.1.0"
+        onBack={noop}
+        providers={threeProviders}
+        onQrLogin={noop}
+        qr={{ providerId: "019a12ab-1234-7123-8123-123456789001", providerName: "钉钉", src: mockQrSrc }}
+      />
+    </ScreenFrame>
+  ),
+}
+
+/**
+ * 失败态：§6 错误制式——一句人话＋可回到上一步。
+ * 极位标注 —— 零荧黄；错误色是功能色 `--ow-error`，与三极无关。
+ */
+export const Failed: Story = {
+  render: () => (
+    <ScreenFrame>
+      <DesktopLoginView
+        stage="error"
+        backgroundSrc={loginKv}
+        error="没连上登录服务，检查下网络再试一次。"
+        appVersion="v0.1.0"
+        onBack={noop}
+        providers={threeProviders}
+        onQrLogin={noop}
+        qr={{ providerId: "019a12ab-1234-7123-8123-123456789001", providerName: "钉钉", src: mockQrSrc }}
+      />
+    </ScreenFrame>
+  ),
+}
+
+/**
+ * 租户品牌态：brandName/claim/claimNote 走白标 props（＝租户品牌层 branding 字段的
+ * 落点形态），不传时回落包内默认文案。不传 markSrc——外部 logo 单档固定色，暗档不随主题
+ * （props 注释已载），白标暗档体验差。
+ */
+export const TenantBranded: Story = {
+  render: () => (
+    <ScreenFrame>
+      <DesktopLoginView
+        stage="welcome"
+        backgroundSrc={loginKv}
+        appVersion="v0.1.0"
+        brandName="ACME Suite"
+        claim="智能工作，从登录开始"
+        claimNote="连接你的团队与 AI 助手"
+        onBack={noop}
+        onPasswordLogin={noop}
+        providers={threeProviders}
+        onQrLogin={noop}
+      />
+    </ScreenFrame>
+  ),
+}

package/src/screens/McpManager.stories.tsx

@@ -0,0 +1,159 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Dialog } from "../components/composite/Dialog"
+import { Plus, Server } from "../components/composite/Icons"
+import { SearchInput } from "../components/composite/SearchInput"
+import { McpServerListView } from "../components/domain/skills/McpServerListView"
+import type { McpServerViewModel } from "../components/domain/skills/McpServerListView"
+import { Button } from "../components/primitives"
+import { SCREEN_PARAMETERS, noop, noopAsync } from "./_screen"
+import { SkillsCatalogScreen } from "./_skillsCatalog"
+
+/**
+ * McpManager 整屏（蓝图 06 · screens）——**「MCP 服务管理」这一幕的完整语境**。
+ *
+ * ## 它是一个二级弹窗，不是页签内容（R2·T2 改题）
+ * 真机路径：插件 → 连接器页签 → 点一张 standalone MCP 连接器卡
+ * （`SkillsCenter.tsx:640`）→ 打开 `McpManagerDialog` 的 **list 档**
+ * （`Dialog width=720 padded className="mcp-manager"`，
+ * `apps/desktop/src/renderer/features/mcp/components/McpManagerDialog.tsx:25–33`）。
+ * 同一枚弹窗还有个 **form 档**（520 宽、无列表），那才是页头「添加连接器」进来的添加表单。
+ *
+ * R1 这张整屏把 720 的管理面板**直接铺在连接器页签下**，页头/页签还在、正文却换成了
+ * 一块 MCP 面板——这正是 Terry 说的「插件里连接器那很奇怪」。现在底屏换回连接器页签
+ * 目录本身（与 Screens/Skills → Connectors 同一份 `_skillsCatalog` 底屏），弹窗回到
+ * 它该在的层：`Dialog portal={false}`（画框自带 `transform: translateZ(0)`，
+ * `position: fixed` 的遮罩因此收在 1440×800 画框里，不逃到 storybook 视口）。
+ *
+ * 组合件：`SkillsCatalogScreen`（`DesktopWorkbenchShell` ＋ `DesktopSidebarView`
+ * ＋ `DesktopSkillsPageView` ＋ 连接器卡）｜`composite/Dialog`（bare 之外的裸壳：
+ * `padded` ＋ 720 宽 ＋ `className="mcp-manager"`，与宿主一字不差）
+ * ｜`.mcp-manager__head / __toolbar / __stats` 三段（`SearchInput` ＋ `Button` 原语）
+ * ｜`McpServerListView`（行＋`Pagination`）。
+ *
+ * ## 荧黄逐处旁注
+ * - 左半屏 · 侧栏「插件」nav current → `--ow-current-bg` 填充块 ＋ 500 字重 → **位置极 ×1**。
+ * - 底屏页头「＋ 添加连接器」= `Button variant="primary"`；弹窗内「添加 MCP」也是 primary。
+ *   两枚不同时争同一层：底屏被遮罩压住，此刻的行动极归弹窗那一枚（§4 按当前层记账）。
+ * - **状态极 0 处**：服务行的连上/降级/失败靠 `Chip` 状态点色＋状态文字双编码（R1）——
+ *   文案由 `McpServerListView` 的 `statusLabelOf` 内置表出，fixture 的 `statusText`
+ *   只作 tooltip 说明与兜底。四档功能色各占一档：已连接 success / 部分异常 warning /
+ *   连接异常 error / 已自动隔离 neutral，都不是荧黄；`McpServerListView` 与 `Pagination`
+ *   同属 §4 R3 中性件，不加信标元素。
+ * - 连接器卡的状态签（已连接 / 待授权）走 tint 底 ＋ on-tint 字，不是实底。
+ * - 统计条 `.mcp-manager__stats b` 已是 mono＋tabular-nums；工具名 chip 同档。
+ */
+const meta = {
+  title: "Screens/McpManager",
+  parameters: SCREEN_PARAMETERS,
+} satisfies Meta
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const SERVERS: McpServerViewModel[] = [
+  {
+    id: "filesystem",
+    type: "stdio",
+    displayName: "Filesystem",
+    summary: "本机文件读写与目录操作",
+    status: "available",
+    statusText: "已连接",
+    toolNames: ["read_file", "write_file", "list_directory", "create_directory", "delete_file"],
+  },
+  {
+    id: "github",
+    type: "http",
+    displayName: "GitHub",
+    summary: "仓库、问题与合并请求",
+    status: "available",
+    statusText: "已连接",
+    toolNames: ["create_issue", "list_prs", "merge_pr", "create_branch"],
+  },
+  {
+    id: "postgres",
+    type: "stdio",
+    displayName: "Postgres",
+    summary: "只读查询接口，接生产库的从库",
+    status: "degraded",
+    statusText: "部分异常",
+    toolNames: ["execute_query", "list_tables", "describe_table"],
+    errorSummary: "连接池排队超过 3s，已退到只读模式",
+  },
+  {
+    id: "notion",
+    type: "http",
+    displayName: "Notion",
+    summary: "文档与数据库读写",
+    status: "error",
+    statusText: "连接异常",
+    toolNames: [],
+    errorSummary: "OAuth token 已过期（401），重新授权后再试",
+  },
+  {
+    id: "shell",
+    type: "stdio",
+    displayName: "Shell",
+    summary: "受限命令执行",
+    status: "auto_disabled",
+    statusText: "已自动隔离",
+    toolNames: ["run_command"],
+  },
+]
+
+/** 弹窗正文：与宿主 `McpManagerContent` 同结构同类名，只是数据来自 fixture。 */
+function McpManagerDialog({ servers }: { servers: McpServerViewModel[] }) {
+  const enabled = servers.filter((server) => server.status === "available").length
+  const failed = servers.filter((server) => server.status === "error" || server.status === "sidecar_error").length
+  return (
+    <Dialog open portal={false} onClose={noop} width={720} padded className="mcp-manager" ariaLabel="MCP 服务管理">
+      <header className="mcp-manager__head">
+        <span className="mcp-manager__icon">
+          <Server />
+        </span>
+        <div>
+          <h2>MCP 服务管理</h2>
+          <p>管理本机自定义 MCP 服务，为 AI 扩展更多工具能力</p>
+        </div>
+        <Button variant="primary" size="sm" onClick={noop}>
+          <Plus /> 添加 MCP
+        </Button>
+      </header>
+      <div className="mcp-manager__toolbar">
+        <SearchInput value="" onChange={noop} placeholder="搜索 MCP 服务" />
+        <Button variant="secondary" size="sm" onClick={noop}>
+          刷新状态
+        </Button>
+      </div>
+      <div className="mcp-manager__stats">
+        <span>
+          我的 MCP <b>{servers.length}</b>
+        </span>
+        <span>
+          <b>{enabled}</b> 启用
+        </span>
+        <span className={failed > 0 ? "is-bad" : ""}>
+          <b>{failed}</b> 失败
+        </span>
+      </div>
+      <McpServerListView
+        servers={servers}
+        page={1}
+        onPageChange={noop}
+        loading={false}
+        onRefresh={noopAsync}
+        onCopy={noop}
+        onRemove={noopAsync}
+      />
+    </Dialog>
+  )
+}
+
+/** 有服务：连接器页签之上盖着 720 弹窗，五行覆盖 available / degraded / error / auto_disabled 四档。 */
+export const WithServers: Story = {
+  render: () => <SkillsCatalogScreen section="connectors" overlay={<McpManagerDialog servers={SERVERS} />} />,
+}
+
+/** 空态：一台都没配时由 `McpServerListView` 自带的 §6 容器空态承担（底屏目录照常有卡）。 */
+export const Empty: Story = {
+  render: () => <SkillsCatalogScreen section="connectors" overlay={<McpManagerDialog servers={[]} />} />,
+}