@orbit-work/ui 0.1.2-preview.0 → 0.1.2

package/src/components/domain/desktop/DesktopCatalogView/index.tsx

@@ -1,1074 +0,0 @@
-"use client"
-
-import { Fragment, type ReactNode, cloneElement, isValidElement } from "react"
-import { BackButton } from "../../../composite/BackButton"
-import { CardGridSkeleton } from "../../../composite/CatalogStates"
-import { type DetailMenuItem, DetailOverflowMenu } from "../../../composite/DetailChrome"
-import { FilterBar, type FilterBarFilter } from "../../../composite/FilterBar"
-import { Bolt, Globe, More, Terminal, Trash } from "../../../composite/Icons"
-import { StatusTag, type StatusTagPreset } from "../../../composite/StatusTag"
-import { Button } from "../../../primitives"
-import { EmptyState } from "../../../primitives/EmptyState"
-import { InlineMessage } from "../../../primitives/InlineMessage"
-import type { SelectOption } from "../../../primitives/Select"
-import { GlyphToneProvider } from "../../skills/SkillAvatarView"
-
-/**
- * DesktopCatalogView —— 发现域（智能体 / 技能 / 连接器）的公共壳，产品面隐性枢纽。
- *
- * 语法定稿（COMPONENT-RULES §5/§6/§7）：
- * - **卡网格，不用 DataTable**。发现页每条目要头像＋两行描述＋动作，是「卡」不是「行」；
- *   DataTable 留给同构定长字段的表（MCP/成员/日志）。网格容器＝`DesktopCatalogGridView`。
- * - 三态齐备：载＝`CardGridSkeleton`（呼吸骨架，禁 shimmer）· 空＝`EmptyState` 原语
- *   （信标 mono 母题＋一句 text-2＋可选主按钮，禁插画禁 emoji）· 错＝`InlineMessage`
- *   error 档（人话一句＋mono 技术详情 ≤2 行＋重试钮）。
- * - 工具条＝`DesktopCatalogToolbarView`，落在 `FilterBar` 基座上：分类走直角 Tag（6，纯筛选
- *   不带点）、搜索走 Field、排序走 Select。R3 中性件——工具条与卡网格都不加信标元素。
- * - **卡是竖排两段，不是横排三列**（A4-B2，原型模板 1666–1684）。上段＝40 字形 ＋
- *   名称行（名 ＋ 至多两枚 `StatusTag`：归属签 ＋ 状态签）＋ 两行描述（`min-height:3em`，
- *   同排等高靠它，不靠拉伸）；下段＝卡脚，左边一条 mono 元信息带、右边 28 高动作钮。
- *   动作钮在卡脚右下，不再竖直居中挂在卡右腰。
- * - 卡内读数（版本号/计数）一律 mono＋tabular-nums，但**不再是一枚枚胶囊**：卡脚是一条
- *   「v1.4.2 · 3 技能 · 2 连接器」式的中性文字带（`·` 相连、单行省略），版本号也在这条带里，
- *   不在名称行。名称行只留名字与两枚状态签——卡片顶行是「这是什么、现在什么状态」，
- *   不是元信息的堆放处。
- * - **状态签只有一件**：`composite/StatusTag`（20 · --ow-radius-xs · 11/500 · tint 底 + on-tint 字，
- *   无边框）。A4-B3 把原来的三套写法（`.connector-update-tag` 裸 span / `Tag` / `Chip`）收成它，
- *   卡与详情共用同一份词表（已安装 / 有更新 / 已连接 / 待授权 / 正在安装 / 我的 / 专家团）。
- *   分类标仍走直角 `Tag`，度量读数在别处仍走 `Chip` —— 三件各司其职，不再互相串味。
- *
- * 立面：卡是贴地之物——`--ow-surface` 面＋1px `--ow-border`＋0 影；hover **只换边色**到
- * `--ow-border-strong`（底色递进是行/条的语汇，一整张卡跟着指针变底会把网格搅成一片明暗），
- * press 保留 `--ow-press` 作按下的瞬时反馈，不投影不位移（§5/§9）。
- * 样式段在 styles/desktop-surfaces.css 的 `.plaza__* / .skcard*`。
- */
-
-/**
- * 卡脚元信息一条：一句分类文字＋可选读数，渲成 mono 带上的一段（「3 技能」「stdio」）。
- * A4-B2 起不再逐条包 `Chip`——卡脚是一条文字带不是一排胶囊，段与段之间只有一个 `·`。
- * `icon` 保留在类型上供别的宿主复用，卡脚这条带不渲染它（原型 1682 无图标）。
- */
-export interface DesktopCatalogCardMetaItem {
-  key: string
-  /** 预留图标槽；卡脚 mono 带不渲染（原型 1682 一行纯文字）。 */
-  icon?: ReactNode
-  label: ReactNode
-  /** 读数：数字/时间/百分比，落在 label 前（「3 技能」），整条带 mono＋tabular-nums */
-  count?: number | string
-}
-
-export interface DesktopAgentCardViewProps {
-  avatar: ReactNode
-  name: ReactNode
-  version?: ReactNode
-  updateAvailable?: boolean
-  team?: boolean
-  /**
-   * 归属签「我的」（原型 4646：`hasBadge = !!(x.team || x.mine)`，两者都在时「专家团」优先）。
-   * 宿主一期传 false —— 目录接口还没有 owner 字段，见交接单。
-   */
-  mine?: boolean
-  /** 状态签（StatusTag 词表档）：已安装 / 有更新 / 已连接 / 待授权 / 正在安装。卡与详情同一份文案。 */
-  status?: StatusTagPreset
-  description: ReactNode
-  /** 结构化卡脚元信息（推荐）：读数自动 mono，胶囊形由壳统一给。 */
-  metaItems?: DesktopCatalogCardMetaItem[]
-  /** @deprecated 自由 ReactNode 卡脚；新代码用 `metaItems`，兼容口保留给未迁移调用方。 */
-  meta?: ReactNode
-  error?: ReactNode
-  actionLabel?: ReactNode
-  actionState?: "default" | "installed" | "update"
-  actionVariant?: "secondary" | "unstyled"
-  actionDisabled?: boolean
-  onAction?: () => void
-  onOpen?: () => void
-}
-
-export interface DesktopCatalogCardViewProps {
-  avatar: ReactNode
-  /**
-   * 字形章色档（R2·T2，原型 4569–4570 `glyphOf`）：目录里只有两档——专家卡走墨面
-   * `agent`，技能/连接器卡一律中性 `neutral`（缺省）。卡把它钉在 `GlyphToneProvider` 上，
-   * `SkillAvatarView` 读上下文，宿主一行不改就同时拿到「技能/连接器中性、专家藏蓝」。
-   */
-  glyphTone?: "neutral" | "agent"
-  name: ReactNode
-  version?: ReactNode
-  updateAvailable?: boolean
-  /** 状态签（StatusTag 词表档）：已安装 / 有更新 / 已连接 / 待授权 / 正在安装。卡与详情同一份文案。 */
-  status?: StatusTagPreset
-  description: ReactNode
-  /** 结构化卡脚元信息（推荐）：读数自动 mono，胶囊形由壳统一给。 */
-  metaItems?: DesktopCatalogCardMetaItem[]
-  /** @deprecated 自由 ReactNode 卡脚；新代码用 `metaItems`，兼容口保留给未迁移调用方。 */
-  meta?: ReactNode
-  error?: ReactNode
-  /**
-   * 归属签（我的 / 专家团）：名称行里状态签左边的那一枚。A4-B2 起归属签进名称行，
-   * 不再是钉在卡右上角的绝对定位角标——竖排卡的右上角就是名称行本身，会互相压。
-   */
-  badge?: ReactNode
-  actionLabel?: ReactNode
-  actionState?: "default" | "installed" | "update"
-  actionVariant?: "secondary" | "unstyled"
-  actionDisabled?: boolean
-  onAction?: () => void
-  onOpen?: () => void
-}
-
-/**
- * 卡头像位的形状规格挂在 `.skcard .gly` 上（40×40 · r8 · sans 500 首字，见
- * desktop-surfaces.css）。它原来完全依赖调用方自己在 avatar 元素上传 `className="gly"`——
- * Skills 整屏就漏传过一次，于是整条规格落空，卡头渲成 36×24 的直角贴字（圆角 0 越形状表）。
- * 这里统一补挂：调用方传不传都一样，漏传不再是一种可能。
- */
-function withGlyphClass(avatar: ReactNode): ReactNode {
-  if (!isValidElement<{ className?: string }>(avatar)) return avatar
-  const existing = avatar.props.className ?? ""
-  if (existing.split(/\s+/).includes("gly")) return avatar
-  return cloneElement(avatar, { className: existing ? `${existing} gly` : "gly" })
-}
-
-/**
- * 卡脚 mono 元信息带（原型 1682）：版本号领头，其后按次序摊开 `metaItems`，段间只有一个 `·`。
- * 整条单行省略——卡脚是一带不是一块，宁可截断也不换行把卡撑高（同排等高由描述的 3em 保）。
- * 版本号从名称行搬到这里：它是读数不是状态，和「3 技能 / stdio」是同一类东西。
- */
-function CatalogCardMetaLine({
-  version,
-  metaItems,
-  meta,
-}: Pick<DesktopCatalogCardViewProps, "version" | "metaItems" | "meta">) {
-  const segments: { key: string; node: ReactNode }[] = []
-  if (version) segments.push({ key: "__version", node: <>v{version}</> })
-  for (const item of metaItems ?? []) {
-    segments.push({
-      key: item.key,
-      node: (
-        <>
-          {item.count != null && <>{item.count} </>}
-          {item.label}
-        </>
-      ),
-    })
-  }
-  // 未迁移调用方的自由 meta 槽：结构化 metaItems 缺席时当作最后一段挂上，不另起一行。
-  if (meta && !(metaItems && metaItems.length > 0)) segments.push({ key: "__meta", node: meta })
-  if (segments.length === 0) return null
-  return (
-    <>
-      {segments.map((segment, index) => (
-        <Fragment key={segment.key}>
-          {index > 0 && <span aria-hidden="true"> · </span>}
-          {segment.node}
-        </Fragment>
-      ))}
-    </>
-  )
-}
-
-/** Desktop 发现页统一卡片；智能体、技能和连接器共享布局与键盘交互。 */
-export function DesktopCatalogCardView({
-  avatar,
-  glyphTone = "neutral",
-  name,
-  version,
-  updateAvailable,
-  status,
-  description,
-  metaItems,
-  meta,
-  error,
-  badge,
-  actionLabel = "使用",
-  actionState = "default",
-  actionVariant = "secondary",
-  actionDisabled,
-  onAction,
-  onOpen,
-}: DesktopCatalogCardViewProps) {
-  return (
-    <div
-      className="skcard"
-      role={onOpen ? "button" : undefined}
-      tabIndex={onOpen ? 0 : undefined}
-      onClick={onOpen}
-      onKeyDown={(event) => {
-        // L3-2-1：只认落在卡壳自己身上的键。没有这道守卫时，焦点在卡脚「使用/更新/安装」
-        // 钮上按 Enter/空格会冒泡上来被 preventDefault 吃掉——按钮的默认 click 一次都不发生，
-        // 反而打开详情（鼠标路径有下面的 stopPropagation 兜着，键盘路径完全没有）。
-        if (event.target !== event.currentTarget) return
-        if (onOpen && (event.key === "Enter" || event.key === " ")) {
-          event.preventDefault()
-          onOpen()
-        }
-      }}
-    >
-      <div className="skcard__top">
-        <GlyphToneProvider value={glyphTone}>{withGlyphClass(avatar)}</GlyphToneProvider>
-        <div className="body">
-          <div className="n">
-            <span className="nt">{name}</span>
-            {badge}
-            {/* R2·T2/Q3：撤 754d2b4 的去重条款——原型（skills--market/agents 两张渲染图）
-                「有更新」签与「更新」钮是并存的：签说的是现状，钮说的是能做什么。
-                调用方要单签就只传 `status`，不要再同时传 `updateAvailable`。 */}
-            {updateAvailable && <StatusTag status="update" />}
-            {status && <StatusTag status={status} />}
-          </div>
-          <div className="d">{description}</div>
-          {error && <div className="skcard__error">{error}</div>}
-        </div>
-      </div>
-      <div className="skcard__foot">
-        <div className="ft">
-          <CatalogCardMetaLine version={version} metaItems={metaItems} meta={meta} />
-        </div>
-        <Button
-          variant={actionVariant}
-          size="sm"
-          disabled={actionDisabled}
-          className={
-            actionVariant === "unstyled"
-              ? `inst${actionState === "installed" ? " installed" : actionState === "update" ? " update" : ""}`
-              : undefined
-          }
-          onClick={(event) => {
-            event.stopPropagation()
-            onAction?.()
-          }}
-        >
-          {actionLabel}
-        </Button>
-      </div>
-    </div>
-  )
-}
-
-export interface DesktopCatalogToolbarViewProps {
-  /** 分类筛选：直角 Tag（6），纯分类不带状态点 */
-  categories?: FilterBarFilter[]
-  onCategoryToggle?: (key: string) => void
-  search?: {
-    value: string
-    onChange: (value: string) => void
-    placeholder?: string
-    disabled?: boolean
-    width?: number | string
-  }
-  sort?: {
-    value: string
-    options: SelectOption[]
-    onChange: (value: string) => void
-    disabled?: boolean
-    label?: string
-  }
-  onReset?: () => void
-  /** 右侧动作区：新建 / 导入 / 范围开关 */
-  actions?: ReactNode
-  className?: string
-}
-
-/**
- * 发现页工具条 —— FilterBar 基座的目录配方（R3 中性件，无信标元素）。
- * 三槽固定次序：分类 Tag → 搜索 → 排序，右侧留动作区；贴在网格顶部用 `flush` 去边框。
- */
-export function DesktopCatalogToolbarView({
-  categories,
-  onCategoryToggle,
-  search,
-  sort,
-  onReset,
-  actions,
-  className,
-}: DesktopCatalogToolbarViewProps) {
-  return (
-    <FilterBar
-      flush
-      className={className ?? "plaza__toolbar"}
-      filters={categories}
-      onFilterToggle={onCategoryToggle}
-      search={search}
-      sort={sort}
-      onReset={onReset}
-      actions={actions}
-    />
-  )
-}
-
-export interface DesktopCatalogGridViewProps {
-  /** 加载态：呼吸骨架卡（禁 shimmer） */
-  loading?: boolean
-  loadingCount?: number
-  /** 错误态：人话一句 */
-  error?: ReactNode
-  /** 错误技术详情：mono ≤2 行 */
-  errorDetail?: string
-  onRetry?: () => void
-  retryLabel?: string
-  /**
-   * 空态一句话（children 为空且非载/错时出）。这里是**二级 inline 档**：母题 ＋ 一句
-   * ＋ 可选轮廓钮，**不带标题层**（原型 template.dc.html L1706–1714 的目录搜索无结果）。
-   * 整页一级空态（母题 ＋ 标题 ＋ 副句 ＋ 实底钮）只出现在 `ScheduledTasksSpaceView`
-   * 那种「列表主体空」的位置，网格里的「筛掉了」不该占那个体量。
-   */
-  emptyMessage?: ReactNode
-  emptyActionLabel?: string
-  onEmptyAction?: () => void
-  /** 空态是否成立；不传则按 children 是否为空推断 */
-  empty?: boolean
-  children?: ReactNode
-  className?: string
-}
-
-/**
- * 发现页卡网格 —— 目录壳的容器语法与 §6 空/载/错三态在这里定稿。
- * 网格自身滚动（`scrollbar-gutter: stable`，保证「全部/已安装」两个范围切换时宽度不跳）。
- */
-export function DesktopCatalogGridView({
-  loading = false,
-  loadingCount = 6,
-  error,
-  errorDetail,
-  onRetry,
-  retryLabel = "重试",
-  emptyMessage = "这里还没有可用条目。",
-  emptyActionLabel,
-  onEmptyAction,
-  empty,
-  children,
-  className,
-}: DesktopCatalogGridViewProps) {
-  const hasChildren = Array.isArray(children) ? children.flat().some(Boolean) : Boolean(children)
-  const isEmpty = empty ?? !hasChildren
-  return (
-    <div className={className ?? "plaza__grid"} data-ow-state={loading ? "loading" : error ? "error" : undefined}>
-      {loading ? (
-        <CardGridSkeleton count={loadingCount} />
-      ) : error ? (
-        <div className="plaza__state">
-          <InlineMessage
-            variant="error"
-            detail={errorDetail}
-            action={
-              onRetry && (
-                <Button variant="secondary" size="sm" onClick={onRetry}>
-                  {retryLabel}
-                </Button>
-              )
-            }
-          >
-            {error}
-          </InlineMessage>
-        </div>
-      ) : isEmpty ? (
-        /* A5-B3：inline 档（md）——母题 ＋ 一句 ＋ 轮廓钮。`actionLabel` 走原语的内置钮，
-           md 档默认 secondary，「清空筛选」是退路不是主张，不占行动极。 */
-        <div className="plaza__state">
-          <EmptyState message={emptyMessage} actionLabel={emptyActionLabel} onAction={onEmptyAction} />
-        </div>
-      ) : (
-        children
-      )}
-    </div>
-  )
-}
-
-export interface DesktopCatalogDetailShellProps {
-  avatar: ReactNode
-  name: ReactNode
-  /**
-   * 状态签：标题右边紧跟的那一枚 `StatusTag`（原型 2169）。与 `badges` 分开是因为它有位置
-   * 语义——只有它贴着标题；`badges` 里的类型标之类落在后面。
-   */
-  status?: ReactNode
-  /** 标题下一句描述（原型 2172，--ow-text-2）。 */
-  summary?: ReactNode
-  /**
-   * mono 元信息行（原型 2173：「v1.4.2 · Orbitwork Labs · 3 天前」）。不传就由
-   * `version / author / updatedAt` 按同样的顺序与 `·` 拼出来，老调用方不改一行也能拿到这行。
-   */
-  meta?: ReactNode
-  author?: ReactNode
-  version?: ReactNode
-  /** 更新时间（「3 天前」）；只进 mono 元信息行。 */
-  updatedAt?: ReactNode
-  /**
-   * 类型标（智能体 / 团队 / 连接器）。A4-B4 把它从标题旁的图标标下沉到 mono 元信息行的
-   * 第一段：标题旁只留状态签一枚，「这是什么类」属于元信息，不该和「现在什么状态」抢同一行。
-   */
-  kind?: ReactNode
-  /** 状态签之后的附加标记（类型标等）。破坏性动作不放这里。 */
-  badges?: ReactNode
-  actions?: ReactNode
-  backLabel: ReactNode
-  onBack: () => void
-  children?: ReactNode
-}
-
-/**
- * mono 元信息行：把「v1.4.2 / 作者 / 3 天前」用 `·` 连成一行。空段自己消失，
- * 不留下孤零零的分隔点（这是元信息带最常见的破绽）。
- */
-function detailMetaLine(parts: ReactNode[]): ReactNode | null {
-  const kept = parts.filter((part) => part !== undefined && part !== null && part !== false && part !== "")
-  if (kept.length === 0) return null
-  return kept.map((part, index) => (
-    <Fragment key={index}>
-      {index > 0 ? " · " : null}
-      {part}
-    </Fragment>
-  ))
-}
-
-/**
- * Desktop 发现二级页统一外壳。A4-B4 把它从「一条略大的列表项」抬回真正的二级页：
- * 返回条 ＋ hero 合成一块固定页头（原型 2158），hero 里是 52 字形 →
- * 「22px display 标题 ＋ 状态签」/ 一句描述 / mono 元信息行 → 右侧动作组；
- * 正文进 `.skd__body`，收到 720 列宽、节间 22（原型 2191）。
- */
-export function DesktopCatalogDetailShell({
-  avatar,
-  name,
-  status,
-  summary,
-  meta,
-  author = "Orbitwork 官方",
-  version,
-  updatedAt,
-  kind,
-  badges,
-  actions,
-  backLabel,
-  onBack,
-  children,
-}: DesktopCatalogDetailShellProps) {
-  const metaLine = meta ?? detailMetaLine([kind, version ? `v${version}` : null, author, updatedAt])
-  return (
-    <div className="page skdetail">
-      <div className="skd__head">
-        {/* 「返回」全站唯一形＝composite/BackButton（ghost ＋ chevron-left ＋ §7 图标 16 档，形/高/状态全集由
-            Button 原语出）。原来是 variant="unstyled" 的 Button 套一枚旋转 90° 的 ArrowDown，尺寸全靠已被
-            R2 清掉的 `.fs-back svg` 撑着，塌成 78×78 的巨大箭头，键盘命中区与焦点环也一并失效。
-            `fs-back` 类名保留：桌面端 e2e（discover-extension-interactions / workspace-interactions）按它定位。 */}
-        <BackButton className="fs-back" onClick={onBack}>
-          {backLabel}
-        </BackButton>
-        {/* hero 与返回条同属页头，不进滚动区：二级页的身份牌不该跟着正文滚走（原型 2158）。 */}
-        <div className="skd__hero">
-          {avatar}
-          <div className="meta">
-            <div className="n">
-              <h1 className="skd__title">{name}</h1>
-              {status}
-              {badges}
-            </div>
-            {summary && <div className="skd__desc">{summary}</div>}
-            {metaLine && <div className="skd__meta-line">{metaLine}</div>}
-          </div>
-          {actions}
-        </div>
-      </div>
-      <div className="skd__scroll">
-        <div className="skd__body">{children}</div>
-      </div>
-    </div>
-  )
-}
-
-/**
- * 详情正文一节：眉标 ＋ 一种体裁（原型 2193–2247）。`count` 是读数圆章、`note` 是
- * 中文补充说明——两者互斥由调用方决定，本件只排位置。
- */
-export function DesktopDetailSection({
-  title,
-  count,
-  note,
-  className,
-  children,
-}: {
-  title: ReactNode
-  count?: number
-  note?: ReactNode
-  className?: string
-  children?: ReactNode
-}) {
-  return (
-    <section className={className ? `skd__section ${className}` : "skd__section"}>
-      <div className="lbl">
-        {title}
-        {count !== undefined && <span className="cnt">{count}</span>}
-        {note && <span className="skd__lbl-note">{note}</span>}
-      </div>
-      {children}
-    </section>
-  )
-}
-
-/** 体裁一 · 段落：成段的话（使用方式 / 限制 / 传输方式）。 */
-export function DesktopDetailText({ children }: { children?: ReactNode }) {
-  return <p className="skd__text">{children}</p>
-}
-
-export interface DesktopDetailListItemView {
-  id: string
-  text: ReactNode
-}
-
-/** 体裁二 · 圆点列表：并列的短句（能力）。 */
-export function DesktopDetailList({ items }: { items: DesktopDetailListItemView[] }) {
-  return (
-    <div className="skd__list">
-      {items.map((item) => (
-        <div className="skd__list-item" key={item.id}>
-          <span className="skd__list-text">{item.text}</span>
-        </div>
-      ))}
-    </div>
-  )
-}
-
-export interface DesktopDetailChipView {
-  id: string
-  text: ReactNode
-  /** 标识符（命令 / 工具名）走 mono；中文名词走正文字体。 */
-  mono?: boolean
-}
-
-/** 体裁三 · 直角片：名词集合（技能 / 连接器 / 命令 / 工具）。只读，不可点。 */
-export function DesktopDetailChips({ items }: { items: DesktopDetailChipView[] }) {
-  return (
-    <div className="skd__chips">
-      {items.map((item) => (
-        <span className={item.mono ? "skd__chip skd__chip--mono" : "skd__chip"} key={item.id}>
-          {item.text}
-        </span>
-      ))}
-    </div>
-  )
-}
-
-export interface DesktopDetailRowView {
-  id: string
-  name: ReactNode
-  /** 角色小签（负责人 / 成员）：与卡上同一枚 StatusTag 的中性档。 */
-  role?: ReactNode
-  description?: ReactNode
-}
-
-/** 体裁四 · 成员行表：有字段的条目（团队成员）。 */
-export function DesktopDetailRows({ rows, nameMono }: { rows: DesktopDetailRowView[]; nameMono?: boolean }) {
-  return (
-    <div className="skd__rows">
-      {rows.map((row) => (
-        <div className="skd__row" key={row.id}>
-          <span className={nameMono ? "skd__row-name skd__row-name--mono" : "skd__row-name"}>{row.name}</span>
-          {row.role && <StatusTag tone="mute">{row.role}</StatusTag>}
-          {row.description && <span className="skd__row-desc">{row.description}</span>}
-        </div>
-      ))}
-    </div>
-  )
-}
-
-/** Desktop 发现智能体卡片。 */
-export function DesktopAgentCardView({
-  avatar,
-  name,
-  version,
-  updateAvailable,
-  team,
-  mine,
-  status,
-  description,
-  metaItems,
-  meta,
-  error,
-  actionLabel = "使用",
-  actionState = "default",
-  actionVariant = "unstyled",
-  actionDisabled,
-  onAction,
-  onOpen,
-}: DesktopAgentCardViewProps) {
-  return (
-    <DesktopCatalogCardView
-      avatar={avatar}
-      glyphTone="agent"
-      name={name}
-      version={version}
-      updateAvailable={updateAvailable}
-      status={status}
-      description={description}
-      metaItems={metaItems}
-      meta={meta}
-      error={error}
-      badge={team ? <StatusTag status="team" /> : mine ? <StatusTag status="mine" /> : undefined}
-      actionLabel={actionLabel}
-      actionState={actionState}
-      actionVariant={actionVariant}
-      actionDisabled={actionDisabled}
-      onAction={onAction}
-      onOpen={onOpen}
-    />
-  )
-}
-
-export interface DesktopAgentDetailItemView {
-  id: string
-  name: ReactNode
-  icon?: ReactNode
-  description?: ReactNode
-}
-export interface DesktopAgentMemberView {
-  id: string
-  name: ReactNode
-  description?: ReactNode
-  avatar?: ReactNode
-  role: "leader" | "member"
-}
-export interface DesktopAgentRosterViewProps {
-  agents: DesktopAgentMemberView[]
-}
-
-export interface DesktopAgentOverviewItemView {
-  id: string
-  label: ReactNode
-  value: ReactNode
-}
-export interface DesktopAgentOverviewLinkView {
-  id: string
-  label: ReactNode
-  url: string
-  kind?: "homepage" | "repository"
-}
-
-/** Desktop 智能体详情的必要元数据；隐藏内部标识和下载实现信息。 */
-export function DesktopAgentOverviewView({
-  items,
-  links = [],
-  onOpenLink,
-}: {
-  items: DesktopAgentOverviewItemView[]
-  links?: DesktopAgentOverviewLinkView[]
-  onOpenLink?: (link: DesktopAgentOverviewLinkView) => void
-}) {
-  if (items.length === 0 && links.length === 0) return null
-  return (
-    <section className="skd__section">
-      <div className="lbl">基本信息</div>
-      <div className="connector-kv">
-        {items.map((item) => (
-          <Fragment key={item.id}>
-            <span>{item.label}</span>
-            <b>{item.value}</b>
-          </Fragment>
-        ))}
-        {links.map((link) => (
-          <Fragment key={link.id}>
-            <span>{link.kind === "repository" ? "源码" : "主页"}</span>
-            <b>
-              <Button
-                variant="unstyled"
-                className="connector-cred-summary__action"
-                icon={link.kind === "repository" ? <Terminal /> : <Globe />}
-                disabled={!onOpenLink}
-                onClick={() => onOpenLink?.(link)}
-              >
-                {link.label}
-              </Button>
-            </b>
-          </Fragment>
-        ))}
-      </div>
-    </section>
-  )
-}
-
-/** 团队智能体的成员名册；负责人和普通成员使用不同的语义标签。 */
-export function DesktopAgentRosterView({ agents }: DesktopAgentRosterViewProps) {
-  if (agents.length === 0) return null
-  return (
-    <section className="skd__section agent-roster">
-      <div className="lbl">
-        团队成员 <span className="cnt">{agents.length}</span>
-      </div>
-      <div className="agent-roster__grid">
-        {agents.map((agent) => (
-          <div className={`agent-roster__item${agent.role === "leader" ? " is-leader" : ""}`} key={agent.id}>
-            <span className="agent-roster__avatar">{agent.avatar ?? String(agent.name).slice(0, 1)}</span>
-            <div className="agent-roster__body">
-              <div className="agent-roster__name">
-                {agent.name}
-                <span className={`agent-roster__role is-${agent.role}`}>
-                  {agent.role === "leader" ? "负责人" : "成员"}
-                </span>
-              </div>
-              {agent.description && <div className="agent-roster__description">{agent.description}</div>}
-            </div>
-          </div>
-        ))}
-      </div>
-    </section>
-  )
-}
-
-export interface DesktopAgentDetailViewProps {
-  avatar: ReactNode
-  name: ReactNode
-  author?: ReactNode
-  version?: ReactNode
-  description: ReactNode
-  team?: boolean
-  agents?: DesktopAgentMemberView[]
-  skills?: DesktopAgentDetailItemView[]
-  connectors?: DesktopAgentDetailItemView[]
-  commands?: DesktopAgentDetailItemView[]
-  starters?: ReactNode[]
-  installed?: boolean
-  outdated?: boolean
-  installing?: boolean
-  error?: ReactNode
-  backLabel?: ReactNode
-  connectorManagement?: ReactNode
-  actionLabel?: ReactNode
-  actionIcon?: ReactNode
-  actionDisabled?: boolean
-  overflowItems?: DetailMenuItem[]
-  overviewItems?: DesktopAgentOverviewItemView[]
-  overviewLinks?: DesktopAgentOverviewLinkView[]
-  onBack: () => void
-  onInstall?: () => void
-  onUpdate?: () => void
-  onUse?: () => void
-  onOverflowSelect?: (key: string) => void
-  onOpenOverviewLink?: (link: DesktopAgentOverviewLinkView) => void
-  onUninstall?: () => void
-}
-
-/**
- * 安装态 → 状态签词表档（A4-B3）。卡与详情引同一个函数，避免两处各判一遍、
- * 各写各的文案。连接器的「已连接 / 待授权」由调用方直接给 `status`，不走这里。
- */
-export function catalogInstallStatus({
-  installed,
-  outdated,
-  installing,
-}: { installed?: boolean; outdated?: boolean; installing?: boolean }): StatusTagPreset | undefined {
-  if (installing) return "installing"
-  if (!installed) return undefined
-  return outdated ? "update" : "installed"
-}
-
-export interface DesktopAgentDetailActionsProps {
-  installed: boolean
-  outdated?: boolean
-  installing?: boolean
-  disabled?: boolean
-  primaryLabel: ReactNode
-  primaryIcon?: ReactNode
-  primaryVisible?: boolean
-  primaryDisabled?: boolean
-  menuItems?: DetailMenuItem[]
-  onInstall?: () => void
-  onUpdate?: () => void
-  onPrimaryAction: () => void
-  onMenuSelect?: (key: string) => void
-}
-
-export interface DesktopCatalogActionView {
-  key: string
-  label: ReactNode
-  icon?: ReactNode
-  variant?: "primary" | "secondary" | "danger"
-  disabled?: boolean
-  onAction?: () => void
-}
-
-export interface DesktopCatalogDetailActionsProps {
-  actions: DesktopCatalogActionView[]
-  leading?: ReactNode
-  menuItems?: DetailMenuItem[]
-  disabled?: boolean
-  onMenuSelect?: (key: string) => void
-}
-
-/**
- * Desktop 发现二级页统一按钮组。
- *
- * A4-B4 收敛（原型 2174–2187）：**页头右侧至多一颗按钮 ＋ 一颗 ⋯**。`actions` 的第一颗
- * 上台面（默认实底主钮），其余自动折进 ⋯ 菜单，排在调用方自己的 `menuItems` 前面。
- * 收敛点放在这里而不是各调用方：连接器详情原来把「刷新状态 / 编辑配置 / 卸载连接器」三颗
- * 并排摆在页头，最后一颗还是实底红——破坏性动作站上行动极的位置，误触代价与召唤力度成反比。
- * 折进去的动作照旧能点（onAction 由本件转发），danger 档在菜单里仍是红字。
- */
-export function DesktopCatalogDetailActions({
-  actions,
-  leading,
-  menuItems = [],
-  disabled,
-  onMenuSelect,
-}: DesktopCatalogDetailActionsProps) {
-  const [primary, ...folded] = actions
-  const foldedItems: DetailMenuItem[] = folded.map((action) => ({
-    key: action.key,
-    label: typeof action.label === "string" ? action.label : action.key,
-    icon: action.icon ?? <More />,
-    danger: action.variant === "danger",
-    disabled: action.disabled,
-  }))
-  const items = [...foldedItems, ...menuItems]
-  const handleSelect = (key: string) => {
-    const hit = folded.find((action) => action.key === key)
-    if (hit) {
-      hit.onAction?.()
-      return
-    }
-    onMenuSelect?.(key)
-  }
-  return (
-    <div className="acts">
-      {leading}
-      {primary && (
-        <Button
-          variant={primary.variant ?? "primary"}
-          icon={primary.icon}
-          disabled={disabled || primary.disabled}
-          onClick={primary.onAction}
-        >
-          {primary.label}
-        </Button>
-      )}
-      {items.length > 0 && <DetailOverflowMenu disabled={disabled} items={items} onSelect={handleSelect} />}
-    </div>
-  )
-}
-
-/** Desktop 智能体详情头部操作；主操作与“更多”菜单在真实应用和文档示例间共享。 */
-export function DesktopAgentDetailActions({
-  installed,
-  outdated,
-  installing,
-  disabled,
-  primaryLabel,
-  primaryIcon,
-  primaryVisible = true,
-  primaryDisabled,
-  menuItems = [],
-  onInstall,
-  onUpdate,
-  onPrimaryAction,
-  onMenuSelect,
-}: DesktopAgentDetailActionsProps) {
-  const actionsDisabled = installing || disabled
-  const actions: DesktopCatalogActionView[] = [
-    ...(!installed && onInstall
-      ? [{ key: "install", label: installing ? "安装中…" : "安装", onAction: onInstall }]
-      : []),
-    ...(installed && outdated && onUpdate
-      ? [{ key: "update", label: installing ? "更新中…" : "更新", onAction: onUpdate }]
-      : []),
-    ...(installed && primaryVisible
-      ? [
-          {
-            key: "primary",
-            label: primaryLabel,
-            icon: primaryIcon,
-            variant: "primary" as const,
-            disabled: primaryDisabled,
-            onAction: onPrimaryAction,
-          },
-        ]
-      : []),
-  ]
-  return (
-    <DesktopCatalogDetailActions
-      actions={actions}
-      menuItems={installed ? menuItems : []}
-      disabled={actionsDisabled}
-      onMenuSelect={onMenuSelect}
-    />
-  )
-}
-
-/** Desktop 发现智能体详情接管页。 */
-export function DesktopAgentDetailView({
-  avatar,
-  name,
-  author = "Orbitwork Labs",
-  version,
-  description,
-  team,
-  agents = [],
-  skills = [],
-  connectors = [],
-  commands = [],
-  starters = [],
-  installed,
-  outdated,
-  installing,
-  error,
-  backLabel = "返回插件 · 专家",
-  connectorManagement,
-  actionLabel = "使用",
-  actionIcon = <Bolt />,
-  actionDisabled,
-  overflowItems = [],
-  overviewItems = [],
-  overviewLinks = [],
-  onBack,
-  onInstall,
-  onUpdate,
-  onUse,
-  onOverflowSelect,
-  onOpenOverviewLink,
-  onUninstall,
-}: DesktopAgentDetailViewProps) {
-  const installStatus = catalogInstallStatus({ installed, outdated, installing })
-  /**
-   * A4-B4：一节的排法由内容决定，不再一律塞进 220px 卡片格（原型 2200–2226）——
-   * 只有名字的集合走直角片（chips），带一句说明的条目走成员行表（rows）。
-   * 空是**字段位空**（「未配置」一行 text-3），不是容器空态，不上 EmptyState 母题。
-   */
-  const renderItems = (items: DesktopAgentDetailItemView[], mono?: boolean) => {
-    if (items.length === 0) return <div className="skd__empty">未配置</div>
-    const described = items.some((item) => item.description)
-    return described ? (
-      <DesktopDetailRows
-        nameMono={mono}
-        rows={items.map((item) => ({ id: item.id, name: item.name, description: item.description }))}
-      />
-    ) : (
-      <DesktopDetailChips items={items.map((item) => ({ id: item.id, text: item.name, mono }))} />
-    )
-  }
-  return (
-    <DesktopCatalogDetailShell
-      avatar={avatar}
-      name={name}
-      author={author}
-      version={version}
-      /* 详情与卡共用同一枚状态签（同词表、同 20/xs/11 形）；详情上不做卡的去重，
-         原型 2168 的 hero 是「状态签 + 主按钮」同时在位。类型标下沉进 mono 元信息行。 */
-      status={installStatus && <StatusTag status={installStatus} />}
-      kind={team ? "团队" : "专家"}
-      summary={description}
-      backLabel={backLabel}
-      onBack={onBack}
-      actions={
-        <DesktopAgentDetailActions
-          installed={!!installed}
-          outdated={outdated}
-          installing={installing}
-          primaryLabel={actionLabel}
-          primaryIcon={actionIcon}
-          primaryDisabled={actionDisabled}
-          onInstall={onInstall}
-          onUpdate={onUpdate}
-          onPrimaryAction={() => onUse?.()}
-          menuItems={[
-            ...overflowItems,
-            ...(onUninstall ? [{ key: "uninstall", label: "卸载", icon: <Trash />, danger: true }] : []),
-          ]}
-          onMenuSelect={(key) => {
-            onOverflowSelect?.(key)
-            if (key === "uninstall") onUninstall?.()
-          }}
-        />
-      }
-    >
-      {error && (
-        <div className="mcp-card__err">
-          <span>{error}</span>
-        </div>
-      )}
-      {/* 简介退出正文：一句描述已经在 hero 的标题下面（原型 2172），正文里再写一遍是同一句话
-          在同一屏出现两次。正文第一节直接进「成员 / 技能 / 连接器 / 命令」。 */}
-      <DesktopAgentOverviewView items={overviewItems} links={overviewLinks} onOpenLink={onOpenOverviewLink} />
-      {team && <DesktopAgentRosterView agents={agents} />}
-      <DesktopDetailSection title="技能" count={skills.length}>
-        {renderItems(skills)}
-      </DesktopDetailSection>
-      <DesktopDetailSection title="连接器" count={connectors.length}>
-        {connectorManagement ?? renderItems(connectors)}
-      </DesktopDetailSection>
-      <DesktopDetailSection title="命令" count={commands.length}>
-        {renderItems(commands, true)}
-      </DesktopDetailSection>
-      {starters.length > 0 && (
-        <DesktopDetailSection title="建议开场">
-          <div className="skd__meta-grid">
-            {starters.map((starter, index) => (
-              <div className="skd__meta-item" key={index}>
-                <span className="n">{starter}</span>
-              </div>
-            ))}
-          </div>
-        </DesktopDetailSection>
-      )}
-    </DesktopCatalogDetailShell>
-  )
-}
-
-export interface DesktopConnectorCardViewProps {
-  logo: ReactNode
-  name: ReactNode
-  version?: ReactNode
-  description: ReactNode
-  updateAvailable?: boolean
-  /**
-   * 状态签（StatusTag 词表档）：已连接 `connected` / 待授权 `needsAuth` / 正在安装 `installing`。
-   * 宿主已有 `plugin.installed` / `needsAuthorization` / `pendingAction` 三个信号够推，见交接单。
-   */
-  status?: StatusTagPreset
-  /** 归属签「我的」；与 `badge` 二选一，`badge` 优先。 */
-  mine?: boolean
-  /** 归属签自定义槽（通常是 `<StatusTag status="mine" />`）。 */
-  badge?: ReactNode
-  /** 卡脚 mono 带：连接器这一族是「stdio · 4 个工具」（原型 4590），**不带版本号**。 */
-  metaItems?: DesktopCatalogCardMetaItem[]
-  actionLabel?: ReactNode
-  actionState?: "default" | "installed" | "update"
-  actionVariant?: "secondary" | "unstyled"
-  actionDisabled?: boolean
-  onAction?: () => void
-  onOpen?: () => void
-}
-
-/** Desktop 发现页连接器卡片。 */
-export function DesktopConnectorCardView({
-  logo,
-  name,
-  version,
-  description,
-  updateAvailable,
-  status,
-  mine,
-  badge,
-  metaItems,
-  actionLabel = "使用",
-  actionState = "default",
-  actionVariant = "secondary",
-  actionDisabled,
-  onAction,
-  onOpen,
-}: DesktopConnectorCardViewProps) {
-  return (
-    <DesktopCatalogCardView
-      avatar={<span className="connector-logo">{logo}</span>}
-      name={name}
-      version={version}
-      description={description}
-      updateAvailable={updateAvailable}
-      status={status}
-      badge={badge ?? (mine ? <StatusTag status="mine" /> : undefined)}
-      metaItems={metaItems}
-      actionLabel={actionLabel}
-      actionState={actionState}
-      actionVariant={actionVariant}
-      actionDisabled={actionDisabled}
-      onAction={onAction ?? onOpen}
-      onOpen={onOpen}
-    />
-  )
-}