@orbit-work/ui 0.1.0

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

@@ -0,0 +1,5 @@
+export * from "./CsvPreview/index"
+export * from "./OfficePreview/index"
+export * from "./OfficePreview/OfficePreviewDialog"
+export * from "./PdfPreview/index"
+export * from "./PdfPreview/PdfPreviewDialog"

package/src/components/domain/skills/McpServerListView/McpServerListView.stories.tsx

@@ -0,0 +1,510 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { McpServerListView, type McpServerViewModel } from "./index"
+
+const meta = {
+  title: "Skills/McpServerListView",
+  component: McpServerListView,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof McpServerListView>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const createServer = (overrides: Partial<McpServerViewModel>): McpServerViewModel => ({
+  id: "test-server",
+  type: "stdio",
+  summary: "Test MCP server",
+  status: "available",
+  statusText: "运行中",
+  toolNames: ["tool1", "tool2"],
+  ...overrides,
+})
+
+const availableServers: McpServerViewModel[] = [
+  createServer({
+    id: "filesystem",
+    type: "stdio",
+    displayName: "Filesystem",
+    summary: "Local filesystem operations",
+    status: "available",
+    statusText: "运行中",
+    toolNames: ["read_file", "write_file", "list_directory", "create_directory", "delete_file"],
+  }),
+  createServer({
+    id: "github",
+    type: "http",
+    displayName: "GitHub API",
+    summary: "GitHub repository and issue management",
+    status: "available",
+    statusText: "运行中",
+    toolNames: ["create_issue", "list_prs", "merge_pr", "create_branch"],
+  }),
+  createServer({
+    id: "database",
+    type: "stdio",
+    displayName: "Database",
+    summary: "PostgreSQL query interface",
+    status: "available",
+    statusText: "运行中",
+    toolNames: ["execute_query", "list_tables", "describe_table"],
+  }),
+]
+
+export const Empty: Story = {
+  args: {
+    servers: [],
+    page: 1,
+    onPageChange: (page) => console.log("page", page),
+    loading: false,
+    onRefresh: async (server) => console.log("refresh", server.id),
+    onCopy: (server) => console.log("copy", server.id),
+    onRemove: async (server) => console.log("remove", server.id),
+  },
+}
+
+export const Loading: Story = {
+  args: {
+    servers: [],
+    page: 1,
+    onPageChange: (page) => console.log("page", page),
+    loading: true,
+    onRefresh: async (server) => console.log("refresh", server.id),
+    onCopy: (server) => console.log("copy", server.id),
+    onRemove: async (server) => console.log("remove", server.id),
+  },
+}
+
+export const SingleAvailable: Story = {
+  args: {
+    servers: [availableServers[0]],
+    page: 1,
+    onPageChange: (page) => console.log("page", page),
+    loading: false,
+    onRefresh: async (server) => console.log("refresh", server.id),
+    onCopy: (server) => console.log("copy", server.id),
+    onRemove: async (server) => console.log("remove", server.id),
+  },
+}
+
+export const MultipleAvailable: Story = {
+  args: {
+    servers: availableServers,
+    page: 1,
+    onPageChange: (page) => console.log("page", page),
+    loading: false,
+    onRefresh: async (server) => console.log("refresh", server.id),
+    onCopy: (server) => console.log("copy", server.id),
+    onRemove: async (server) => console.log("remove", server.id),
+  },
+}
+
+export const StdioType: Story = {
+  args: {
+    servers: [
+      createServer({
+        id: "local-stdio",
+        type: "stdio",
+        displayName: "Local STDIO Server",
+        summary: "Communicates via standard input/output",
+        status: "available",
+        toolNames: ["local_tool_1", "local_tool_2", "local_tool_3"],
+      }),
+    ],
+    page: 1,
+    onPageChange: (page) => console.log("page", page),
+    loading: false,
+    onRefresh: async (server) => console.log("refresh", server.id),
+    onCopy: (server) => console.log("copy", server.id),
+    onRemove: async (server) => console.log("remove", server.id),
+  },
+}
+
+export const HttpType: Story = {
+  args: {
+    servers: [
+      createServer({
+        id: "remote-http",
+        type: "http",
+        displayName: "Remote HTTP Server",
+        summary: "Communicates via HTTP endpoints",
+        status: "available",
+        toolNames: ["http_get", "http_post", "http_put", "http_delete"],
+      }),
+    ],
+    page: 1,
+    onPageChange: (page) => console.log("page", page),
+    loading: false,
+    onRefresh: async (server) => console.log("refresh", server.id),
+    onCopy: (server) => console.log("copy", server.id),
+    onRemove: async (server) => console.log("remove", server.id),
+  },
+}
+
+export const Configured: Story = {
+  args: {
+    servers: [
+      createServer({
+        id: "configured-server",
+        displayName: "Configured Server",
+        summary: "Server is configured but has no tools",
+        status: "configured",
+        statusText: "暂无可用工具",
+        toolNames: [],
+      }),
+    ],
+    page: 1,
+    onPageChange: (page) => console.log("page", page),
+    loading: false,
+    onRefresh: async (server) => console.log("refresh", server.id),
+    onCopy: (server) => console.log("copy", server.id),
+    onRemove: async (server) => console.log("remove", server.id),
+  },
+}
+
+export const Starting: Story = {
+  args: {
+    servers: [
+      createServer({
+        id: "starting-server",
+        displayName: "Starting Server",
+        summary: "Server is currently starting up",
+        status: "starting",
+        statusText: "连接中",
+        toolNames: [],
+      }),
+    ],
+    page: 1,
+    onPageChange: (page) => console.log("page", page),
+    loading: false,
+    onRefresh: async (server) => console.log("refresh", server.id),
+    onCopy: (server) => console.log("copy", server.id),
+    onRemove: async (server) => console.log("remove", server.id),
+  },
+}
+
+export const Restarting: Story = {
+  args: {
+    servers: [
+      createServer({
+        id: "restarting-server",
+        displayName: "Restarting Server",
+        summary: "Server is restarting after an error",
+        status: "restarting",
+        statusText: "重连中",
+        toolNames: ["tool1", "tool2"],
+      }),
+    ],
+    page: 1,
+    onPageChange: (page) => console.log("page", page),
+    loading: false,
+    onRefresh: async (server) => console.log("refresh", server.id),
+    onCopy: (server) => console.log("copy", server.id),
+    onRemove: async (server) => console.log("remove", server.id),
+  },
+}
+
+export const Degraded: Story = {
+  args: {
+    servers: [
+      createServer({
+        id: "degraded-server",
+        displayName: "Degraded Server",
+        summary: "Some tools are not responding correctly",
+        status: "degraded",
+        statusText: "部分异常",
+        toolNames: ["working_tool", "broken_tool"],
+        errorSummary: "部分工具调用超时或返回错误。建议检查服务端日志并重连。",
+      }),
+    ],
+    page: 1,
+    onPageChange: (page) => console.log("page", page),
+    loading: false,
+    onRefresh: async (server) => console.log("refresh", server.id),
+    onCopy: (server) => console.log("copy", server.id),
+    onRemove: async (server) => console.log("remove", server.id),
+  },
+}
+
+export const Error: Story = {
+  args: {
+    servers: [
+      createServer({
+        id: "error-server",
+        displayName: "Error Server",
+        summary: "Connection to server failed",
+        status: "error",
+        statusText: "连接异常",
+        toolNames: [],
+        errorSummary: "无法连接到 MCP 服务器。请检查服务器是否运行、配置是否正确，然后重连。",
+      }),
+    ],
+    page: 1,
+    onPageChange: (page) => console.log("page", page),
+    loading: false,
+    onRefresh: async (server) => console.log("refresh", server.id),
+    onCopy: (server) => console.log("copy", server.id),
+    onRemove: async (server) => console.log("remove", server.id),
+  },
+}
+
+export const Missing: Story = {
+  args: {
+    servers: [
+      createServer({
+        id: "missing-server",
+        displayName: "Missing Server",
+        summary: "Server executable not found",
+        status: "missing",
+        statusText: "连接异常",
+        toolNames: [],
+        errorSummary: "找不到服务器可执行文件。请检查路径配置或重新安装服务器。",
+      }),
+    ],
+    page: 1,
+    onPageChange: (page) => console.log("page", page),
+    loading: false,
+    onRefresh: async (server) => console.log("refresh", server.id),
+    onCopy: (server) => console.log("copy", server.id),
+    onRemove: async (server) => console.log("remove", server.id),
+  },
+}
+
+export const AutoDisabled: Story = {
+  args: {
+    servers: [
+      createServer({
+        id: "auto-disabled-server",
+        displayName: "Auto-Disabled Server",
+        summary: "Server was automatically disabled due to repeated failures",
+        status: "auto_disabled",
+        statusText: "已自动隔离",
+        toolNames: [],
+        errorSummary: "由于多次连接失败，该 MCP 已被自动隔离。修复问题后可手动重连。",
+      }),
+    ],
+    page: 1,
+    onPageChange: (page) => console.log("page", page),
+    loading: false,
+    onRefresh: async (server) => console.log("refresh", server.id),
+    onCopy: (server) => console.log("copy", server.id),
+    onRemove: async (server) => console.log("remove", server.id),
+  },
+}
+
+export const SidecarError: Story = {
+  args: {
+    servers: [
+      createServer({
+        id: "sidecar-error-server",
+        displayName: "Sidecar Error",
+        summary: "Status refresh failed",
+        status: "sidecar_error",
+        statusText: "状态刷新失败",
+        toolNames: ["tool1"],
+        errorSummary: "Sidecar 进程无法刷新该 MCP 状态。请重启应用或检查系统日志。",
+      }),
+    ],
+    page: 1,
+    onPageChange: (page) => console.log("page", page),
+    loading: false,
+    onRefresh: async (server) => console.log("refresh", server.id),
+    onCopy: (server) => console.log("copy", server.id),
+    onRemove: async (server) => console.log("remove", server.id),
+  },
+}
+
+export const Unknown: Story = {
+  args: {
+    servers: [
+      createServer({
+        id: "unknown-server",
+        displayName: "Unknown Status",
+        summary: "Server status cannot be determined",
+        status: "unknown",
+        statusText: "状态未知",
+        toolNames: [],
+      }),
+    ],
+    page: 1,
+    onPageChange: (page) => console.log("page", page),
+    loading: false,
+    onRefresh: async (server) => console.log("refresh", server.id),
+    onCopy: (server) => console.log("copy", server.id),
+    onRemove: async (server) => console.log("remove", server.id),
+  },
+}
+
+export const NoDisplayName: Story = {
+  args: {
+    servers: [
+      createServer({
+        id: "server-without-display-name",
+        displayName: undefined,
+        summary: "Uses ID as display name when displayName is not provided",
+        status: "available",
+        toolNames: ["tool1", "tool2"],
+      }),
+    ],
+    page: 1,
+    onPageChange: (page) => console.log("page", page),
+    loading: false,
+    onRefresh: async (server) => console.log("refresh", server.id),
+    onCopy: (server) => console.log("copy", server.id),
+    onRemove: async (server) => console.log("remove", server.id),
+  },
+}
+
+export const ManyTools: Story = {
+  args: {
+    servers: [
+      createServer({
+        id: "many-tools-server",
+        displayName: "Server with Many Tools",
+        summary: "Shows only first 5 tools in collapsed view",
+        status: "available",
+        toolNames: ["tool1", "tool2", "tool3", "tool4", "tool5", "tool6", "tool7", "tool8", "tool9", "tool10"],
+      }),
+    ],
+    page: 1,
+    onPageChange: (page) => console.log("page", page),
+    loading: false,
+    onRefresh: async (server) => console.log("refresh", server.id),
+    onCopy: (server) => console.log("copy", server.id),
+    onRemove: async (server) => console.log("remove", server.id),
+  },
+}
+
+export const MixedStatuses: Story = {
+  args: {
+    servers: [
+      availableServers[0],
+      createServer({
+        id: "error-1",
+        displayName: "Error Server",
+        summary: "Connection failed",
+        status: "error",
+        statusText: "连接异常",
+        toolNames: [],
+        errorSummary: "无法连接到服务器",
+      }),
+      availableServers[1],
+      createServer({
+        id: "starting-1",
+        displayName: "Starting",
+        summary: "Server starting",
+        status: "starting",
+        statusText: "连接中",
+        toolNames: [],
+      }),
+      availableServers[2],
+    ],
+    page: 1,
+    onPageChange: (page) => console.log("page", page),
+    loading: false,
+    onRefresh: async (server) => console.log("refresh", server.id),
+    onCopy: (server) => console.log("copy", server.id),
+    onRemove: async (server) => console.log("remove", server.id),
+  },
+}
+
+const manyServers: McpServerViewModel[] = Array.from({ length: 20 }, (_, i) =>
+  createServer({
+    id: `server-${i + 1}`,
+    displayName: `Server ${i + 1}`,
+    summary: `Test server number ${i + 1}`,
+    status: "available",
+    toolNames: [`tool_${i}_1`, `tool_${i}_2`, `tool_${i}_3`],
+  }),
+)
+
+export const Pagination: Story = {
+  args: {
+    servers: manyServers,
+    page: 1,
+    onPageChange: (page) => console.log("page", page),
+    loading: false,
+    onRefresh: async (server) => console.log("refresh", server.id),
+    onCopy: (server) => console.log("copy", server.id),
+    onRemove: async (server) => console.log("remove", server.id),
+  },
+}
+
+export const PaginationPage2: Story = {
+  args: {
+    servers: manyServers,
+    page: 2,
+    onPageChange: (page) => console.log("page", page),
+    loading: false,
+    onRefresh: async (server) => console.log("refresh", server.id),
+    onCopy: (server) => console.log("copy", server.id),
+    onRemove: async (server) => console.log("remove", server.id),
+  },
+}
+
+export const PaginationLastPage: Story = {
+  args: {
+    servers: manyServers,
+    page: 3,
+    onPageChange: (page) => console.log("page", page),
+    loading: false,
+    onRefresh: async (server) => console.log("refresh", server.id),
+    onCopy: (server) => console.log("copy", server.id),
+    onRemove: async (server) => console.log("remove", server.id),
+  },
+}
+
+/**
+ * R1 双编码验收位（COMPONENT-RULES §4 / §11-13）：四档连接状态同屏对照，
+ * 每一档的状态点色都伴随可读中文——把屏幕调成灰度，四行仍然读得出来。
+ * 传输档走 Tag（直角 6，纯分类），状态走 Chip（胶囊 999，带点）；R3 中性件，全屏零信标。
+ */
+export const StatusDualEncoding: Story = {
+  args: {
+    servers: [
+      createServer({
+        id: "filesystem",
+        displayName: "Filesystem",
+        summary: "npx -y @modelcontextprotocol/server-filesystem",
+        status: "available",
+        statusText: "运行中",
+        toolNames: ["read_file", "write_file"],
+      }),
+      createServer({
+        id: "notion",
+        type: "http",
+        displayName: "Notion",
+        summary: "https://mcp.notion.com/sse",
+        status: "starting",
+        statusText: "连接中",
+        toolNames: [],
+      }),
+      createServer({
+        id: "postgres",
+        displayName: "Postgres",
+        summary: "psql://localhost:5432/app",
+        status: "error",
+        statusText: "连接异常",
+        toolNames: [],
+        errorSummary: "无法连接到 127.0.0.1:5432，连接被拒绝。",
+      }),
+      createServer({
+        id: "legacy-crm",
+        displayName: "Legacy CRM",
+        summary: "node ./legacy-crm/server.js",
+        status: "auto_disabled",
+        statusText: "已自动隔离",
+        toolNames: [],
+        errorSummary: "连续 5 次启动失败，已自动隔离；修好后可从行末菜单重连。",
+      }),
+    ],
+    page: 1,
+    onPageChange: (page) => console.log("page", page),
+    loading: false,
+    onRefresh: async (server) => console.log("refresh", server.id),
+    onCopy: (server) => console.log("copy", server.id),
+    onRemove: async (server) => console.log("remove", server.id),
+  },
+}

package/src/components/domain/skills/McpServerListView/McpServerListViewSource.test.mjs

@@ -0,0 +1,101 @@
+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 css = await readFile(new URL("../../../../../styles/desktop-surfaces.css", import.meta.url), "utf8")
+
+/** 只看 mcp-server-row / mcp-state-dot / mcp-pill 这段，别把整份样式表都算进来。 */
+const connectorCss = css.slice(css.indexOf(".mcp-server-list"), css.indexOf(".mcp-reload-wait {"))
+
+test("行按 DS2 行家族配方组装：传输走 Tag、状态走 Chip、行操作走 Menu 配方", () => {
+  assert.ok(source.includes('import { RowOverflowMenu } from "../../../composite/RowOverflowMenu"'))
+  assert.ok(source.includes('import { Tag } from "../../../composite/Tag"'))
+  assert.ok(source.includes("<RowOverflowMenu"))
+  assert.ok(source.includes('<Tag size="sm" variant="primary" shape="square">'))
+  // 自造的方钮、自转图标与状态点全部退役
+  assert.doesNotMatch(source, /mcp-reconnect/)
+  assert.doesNotMatch(source, /mcp-state-dot/)
+  assert.doesNotMatch(source, /mcp-runtime-status/)
+  assert.doesNotMatch(connectorCss, /\.mcp-state-dot\.s-/)
+  assert.doesNotMatch(connectorCss, /\.mcp-reconnect\.is-spinning/)
+})
+
+test("R1 双编码：每一档连接状态都有中文文案，颜色只是第二编码", () => {
+  // Chip 的 dot 与 label 同时给出，且 label 走 statusLabelOf 的逐档中文
+  assert.ok(source.includes("dot={chipToneOf(statusTone)}"))
+  assert.ok(source.includes("label={statusLabel}"))
+  // available 也要有文案 —— 原实现只在「不可用」时才渲染文字，健康态是纯颜色编码
+  assert.ok(source.includes('available: "已连接"'))
+  for (const label of ["连接中", "连接异常", "已自动隔离", "状态未知"]) {
+    assert.ok(source.includes(`"${label}"`), `缺少状态文案：${label}`)
+  }
+  // 点色映射：已连接=success，异常=error，降级/重连=warning，其余中性
+  assert.ok(source.includes('if (tone === "success") return "success"'))
+  assert.ok(source.includes('if (tone === "error") return "error"'))
+  assert.ok(source.includes('if (tone === "warning" || tone === "reconnecting") return "warning"'))
+  assert.ok(source.includes('return "neutral"'))
+})
+
+test("R2 功能色四档不塌成两档：degraded（已降级）走 warning，不与 error 同色", () => {
+  // 原实现里 degraded fall through 到 "error"，「部分异常」与「连接异常」拿同一枚红点，
+  // 肉眼分不出降级与失败——功能色四档在这一屏塌成两档。
+  assert.ok(source.includes('if (status === "degraded") return "warning"'))
+  assert.ok(source.includes('degraded: "部分异常"'))
+  // 落到 error 的只剩真失败档（error / missing / sidecar_error / configured）
+  assert.match(source, /if \(status === "degraded"\) return "warning"\s*\n\s*return "error"/)
+})
+
+test("W3-4 R1：传输类型不再用颜色编码——两型同一枚中性章", () => {
+  const icon = connectorCss.match(/\.mcp-server-row__icon \{[^}]*\}/)
+  assert.ok(icon, "找不到 .mcp-server-row__icon 规则")
+  assert.match(icon[0], /background: var\(--ow-surface-2\)/)
+  assert.match(icon[0], /color: var\(--ow-text-2\)/)
+  // t-http / t-stdio 只剩渲染钩子，不许再挂任何颜色
+  assert.doesNotMatch(connectorCss, /\.mcp-server-row__icon\.t-\w+ \{/)
+  // 类型的两条编码：字形（Terminal / Globe）＋ Tag 文字
+  assert.ok(source.includes('server.type === "stdio" ? <Terminal /> : <Globe />'))
+  assert.ok(source.includes('server.type === "stdio" ? "STDIO" : "HTTP"'))
+})
+
+test("R3 中性件：全件零信标荧黄", () => {
+  assert.doesNotMatch(source, /--ow-beacon|--ow-accent-dot|--ow-data-today/)
+  assert.doesNotMatch(connectorCss, /--ow-beacon|--ow-accent-dot|--ow-data-today/)
+})
+
+test("§6 容器件三态：空、加载 skeleton 呼吸、错误人话一句", () => {
+  // W3 · G5：空态归 primitives/EmptyState（信标 mono 母题＋一句 text-2），
+  // 52px 图标筐 ＋ 600 标题 ＋ text-3 副行的 connector-empty 老三件退役。
+  assert.ok(source.includes('import { EmptyState } from "../../../primitives/EmptyState"'))
+  assert.ok(source.includes("<EmptyState"))
+  assert.doesNotMatch(source, /connector-empty__(icon|title|hint)/)
+  assert.doesNotMatch(css, /\.connector-empty__(icon|title|hint)/)
+  assert.ok(source.includes('<Skeleton variant="block"'))
+  assert.ok(source.includes('aria-busy="true"'))
+  assert.ok(source.includes("当前 MCP 暂未返回工具，请刷新状态或在首次使用时再检查。"))
+})
+
+test("§7 读数 mono：命令摘要与工具名走 --ow-font-mono，不再写死 ui-monospace 栈", () => {
+  const readout = connectorCss.match(/\.mcp-server-row__summary\s*,\s*\.mcp-server-row__tools \{[^}]*\}/)
+  assert.ok(readout, "找不到 mcp-server-row__summary 规则")
+  assert.match(readout[0], /var\(--ow-font-mono\)/)
+  assert.match(readout[0], /tabular-nums/)
+  assert.doesNotMatch(connectorCss, /ui-monospace, SFMono-Regular/)
+})
+
+test("§2 零裸 hex + 语义优先：本段不留原语灰阶与裸 hex", () => {
+  assert.doesNotMatch(connectorCss, /#[0-9A-Fa-f]{3,8}\b/)
+  assert.doesNotMatch(connectorCss, /var\(--ow-gray-\d/)
+})
+
+test("§5 无发光 · §9 旋转圈退役：重连不用 box-shadow 光环，重载等待改静止实点", () => {
+  assert.doesNotMatch(connectorCss, /box-shadow: 0 0 0 5px/)
+  // 24px·2px 描边·.8s 自转环不在 <20px 小转子档上，撤；换 --ow-progress-fill 静止实点，
+  // 同格 <b> 的「正在重载」文案承担 R1 文字编码。零动画，故 reduced-motion 兜底一并撤。
+  assert.doesNotMatch(css, /@keyframes mcp-spin/)
+  assert.doesNotMatch(css, /animation:[^;]*mcp-spin/)
+  assert.match(
+    css,
+    /\.mcp-reload-wait__spinner \{ width: 24px; height: 24px; display: inline-flex;[^}]*\}\n\.mcp-reload-wait__spinner::before \{[^}]*background: var\(--ow-progress-fill\);[^}]*\}/,
+  )
+})