@orbit-work/ui 0.1.0

package/src/components/domain/desktop/DesktopComposer/DesktopComposerModelPickerSource.test.mjs

@@ -0,0 +1,132 @@
+import assert from "node:assert/strict"
+import { readFile } from "node:fs/promises"
+import test from "node:test"
+
+// DS 2.0 蓝图批次②：Dropdown 已并入 Menu 簇，实现在 primitives/Menu 的 MenuSurface。
+const menuSurfaceSource = await readFile(new URL("../../../primitives/Menu/index.tsx", import.meta.url), "utf8")
+const modelSelectSource = await readFile(new URL("../../../composite/ModelSelect/index.tsx", import.meta.url), "utf8")
+const modelPickerListSource = await readFile(
+  new URL("../../../composite/ModelPickerList/index.tsx", import.meta.url),
+  "utf8",
+)
+const composerPopoverSource = await readFile(
+  new URL("../../../domain/chat/Composer/parts/ComposerPopover.tsx", import.meta.url),
+  "utf8",
+)
+const styles = await readFile(new URL("../../../../../styles/desktop-surfaces.css", import.meta.url), "utf8")
+const composerSource = await readFile(
+  new URL("../../../../../../../apps/desktop/src/renderer/features/chat/Composer.tsx", import.meta.url),
+  "utf8",
+)
+
+test("composer model picker matches the settings model picker search-to-list spacing", () => {
+  // DS 2.0: 菜单面内嵌搜索已迁 Field（壳自带 h-8/w-full），间距 6px 由 mb-1.5 承担
+  assert.match(menuSurfaceSource, /<Field\b/)
+  assert.match(menuSurfaceSource, /className="mb-1\.5"/)
+  assert.doesNotMatch(menuSurfaceSource, /from "\.\.\/Input"/)
+  assert.match(styles, /\.cpop--model > \.ow-search-input\s*\{\s*margin-bottom:\s*6px;\s*\}/)
+})
+
+test("composer model picker keeps the thinking-effort submenu visible and interactive", () => {
+  assert.match(composerSource, /<ComposerPopover[\s\S]*align="end"[\s\S]*width=\{288\}/)
+  assert.match(composerSource, /cpop-subrow\$\{thinkingEffortOpen \? ['"] is-open['"] : ['"]{2}\}/)
+  assert.ok(composerSource.includes("THINKING_LEVELS.map"))
+  assert.ok(composerSource.includes("const [thinkingEffortOpen, setThinkingEffortOpen] = useState(false)"))
+  assert.ok(composerSource.includes("aria-expanded={thinkingEffortOpen}"))
+  assert.ok(composerSource.includes("onClick={() => setThinkingEffortOpen((value) => !value)}"))
+  assert.ok(composerSource.includes("setThinkingLevel(item.id)"))
+  assert.ok(composerSource.includes("setThinkingEffortOpen(false)"))
+  assert.match(
+    styles,
+    /\.cpop--model \{[^}]*width: 240px;[^}]*max-width: calc\(100vw - 16px\);[^}]*overflow: (?:visible|hidden);/,
+  )
+  assert.ok(styles.includes("padding: var(--ow-space-15, 6px); z-index: 1; }"))
+  assert.ok(styles.includes("bottom: 0; left: -10px; width: 10px;"))
+  assert.match(styles, /.cpop-subrow.is-open .cpop-sub { display: block; }/)
+  assert.match(
+    styles,
+    /\.cpop--model\[data-horizontal-overflow="left"\] \.cpop-sub \{ left: calc\(100% \+ 8px\); right: auto; \}/,
+  )
+})
+
+test("composer popover keeps visible nested menus inside the viewport", () => {
+  assert.match(composerPopoverSource, /nestedHorizontalBounds\(content, contentRect\)/)
+  assert.match(composerPopoverSource, /visibleHorizontalBounds\(content, contentRect, nested\?\.element\)/)
+  assert.match(composerPopoverSource, /Reserve room for the hidden nested menu during the first layout pass/)
+  assert.match(composerPopoverSource, /const minLeft = viewportPadding - bounds\.leftOffset/)
+  assert.match(composerPopoverSource, /const maxLeft = window\.innerWidth - viewportPadding - bounds\.rightOffset/)
+  assert.match(
+    composerPopoverSource,
+    /setHorizontalOverflow\(\(current\) => \(current === nextHorizontalOverflow \? current : nextHorizontalOverflow\)\)/,
+  )
+  assert.match(composerPopoverSource, /window\.addEventListener\(["']resize["'], measure\)/)
+  assert.match(composerPopoverSource, /window\.addEventListener\(["']scroll["'], measure, true\)/)
+  assert.match(composerPopoverSource, /new MutationObserver/)
+  assert.doesNotMatch(composerPopoverSource, /onPointerOver=/)
+})
+
+test("composer model picker omits the available model description", () => {
+  assert.doesNotMatch(composerSource, /<span className="s">\{modelDescription\(item\)\}<\/span>/)
+  assert.doesNotMatch(composerSource, /\bmodelDescription,/)
+})
+
+test("settings model picker omits the model description", () => {
+  assert.doesNotMatch(modelSelectSource, /description:\s*modelDescription\(model\)/)
+  assert.doesNotMatch(modelSelectSource, /function modelDescription\(/)
+})
+
+test("composer and settings model names share enough line height to avoid clipping descenders", () => {
+  assert.match(styles, /\.model-title__name\s*\{[^}]*line-height:\s*18px;[^}]*\}/)
+  assert.doesNotMatch(styles, /\.modelopt \.model-title__name\s*\{/)
+})
+
+test("composer and settings share the same model picker list and item layout", () => {
+  assert.match(composerSource, /<ModelPickerList/)
+  assert.match(modelSelectSource, /<ModelPickerList/)
+  assert.match(modelPickerListSource, /["']cpop__scroll["'],\s*["']model-picker-list["']/)
+  assert.match(modelPickerListSource, /["']modelopt["'], selected && ["']active["']/)
+  assert.match(styles, /\.cpop__scroll\s*\{[^}]*gap:\s*var\(--ow-space-05, 2px\);[^}]*\}/)
+  // W2 §7：46px 是形状表外的高度，行改落 ListRow 密度档（default 40 / compact 32）。
+  assert.match(styles, /\.modelopt\s*\{[^}]*min-height:\s*40px;[^}]*\}/)
+  assert.doesNotMatch(styles, /\.modelopt\s*\{[^}]*min-height:\s*46px;/)
+  assert.match(styles, /\.model-picker-list--compact \.modelopt\s*\{[^}]*min-height:\s*32px;[^}]*\}/)
+  assert.match(modelPickerListSource, /density\?: ModelPickerListDensity/)
+})
+
+// W2 §6 无彩选中：选中不再借 --ow-primary-bg（行动极）上色，改「底递进 + 强边 +
+// --ow-control-on 勾 + 500 字重」四重编码；勾与调用方的 trailing 分槽并存。
+test("selected model reads without hue: surface step, strong border, control-on check, 500 weight", () => {
+  assert.match(modelPickerListSource, /import \{ Check \} from "\.\.\/Icons"/)
+  assert.match(modelPickerListSource, /className="modelopt__check"/)
+  // R2 L2-2-3：勾槽恒占位（未选中也渲染空槽），倍率读数右沿才对得齐
+  assert.match(modelPickerListSource, /data-ow-state=\{selected \? "on" : "off"\}/)
+  assert.doesNotMatch(modelPickerListSource, /\{selected && \(\s*<span className="modelopt__check"/)
+  assert.match(modelPickerListSource, /option\.trailing && <span className="ck">\{option\.trailing\}<\/span>/)
+  assert.match(styles, /\.modelopt\.active\s*\{[^}]*background:\s*var\(--ow-selected-bg\);[^}]*\}/)
+  assert.match(styles, /\.modelopt\.active\s*\{[^}]*border-color:\s*var\(--ow-border-strong\);[^}]*\}/)
+  assert.match(styles, /\.modelopt\.active \.n\s*\{\s*font-weight:\s*500;\s*\}/)
+  assert.match(styles, /\.modelopt__check\s*\{[^}]*color:\s*var\(--ow-control-on\);[^}]*\}/)
+  assert.doesNotMatch(styles, /\.modelopt\.active\s*\{[^}]*--ow-primary-bg/)
+  assert.doesNotMatch(styles, /\.modelopt\.active \.n\s*\{[^}]*--ow-info-on-tint/)
+})
+
+// W2 §6：unstyled 壳的状态由调用方样式补齐——五态与贴地零影缺一不可。
+test("model picker rows carry the full state set with no floating shadow", () => {
+  assert.match(styles, /\.modelopt:hover \{ background: var\(--ow-hover-pop\); \}/)
+  assert.match(styles, /\.modelopt:active:not\(:disabled\) \{ background: var\(--ow-press-pop\); \}/)
+  assert.match(styles, /\.modelopt:focus-visible \{[^}]*var\(--ow-focus-ring\)/)
+  assert.match(styles, /\.modelopt--locked \.n[^{]*\{[^}]*var\(--ow-disabled-text\)/)
+  assert.doesNotMatch(styles, /\.modelopt[^{]*\{[^}]*box-shadow:/)
+  assert.match(styles, /\.modelopt\s*\{[^}]*transition: background-color var\(--ow-dur-1\) var\(--ow-ease-beacon\)/)
+})
+
+test("composer and settings model pickers show positive multipliers with other trailing content", () => {
+  assert.match(modelPickerListSource, /multiplier\?: number/)
+  assert.match(modelPickerListSource, /Number\.isFinite\(multiplier\)/)
+  assert.match(modelPickerListSource, /multiplier <= 0/)
+  assert.match(modelPickerListSource, /`×\$\{Number\(multiplier\.toFixed\(4\)\)\}`/)
+  assert.match(modelPickerListSource, /\(multiplierLabel \|\| option\.trailing \|\| selected\)/)
+  assert.match(modelPickerListSource, /className="modelopt__multiplier"/)
+  assert.match(modelSelectSource, /outputModalities, multiplier/)
+  assert.match(styles, /\.modelopt__multiplier\s*\{[^}]*color:\s*var\(--ow-text-3\);[^}]*\}/)
+})

package/src/components/domain/desktop/DesktopComposer/DesktopComposerMountChipSource.test.mjs

@@ -0,0 +1,43 @@
+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 mentions = await readFile(new URL("../../chat/Composer/parts/ComposerMentions.tsx", import.meta.url), "utf8")
+
+// W5 移交项②（代行裁决：挂载物＝同一种芯片）。判断表「挂载芯片：蓝/绿/灰三色 →
+// 统一 info tint + 类别图标」——agent/plan 原来停在中性 surface 档，与已收口的
+// @技能/@连接器分成两轨；分类不是状态，不该按来源分皮肤。
+test("agent/plan 挂载 chip 与 ComposerMentions 同落 info tint", async () => {
+  // R2：配方本体已上收——原语 primitives/Chip 的 tone="mention"（ComposerMentions 走这条），
+  // 过渡常量 mountChip.ts 的 MOUNT_CHIP_CLASS（本文件两处挂载位走这条，待迁完后删）。
+  // 本文件不再自持一份 className。
+  const mountChip = await readFile(new URL("../../chat/Composer/parts/mountChip.ts", import.meta.url), "utf8")
+  assert.doesNotMatch(source, /const MOUNT_CHIP_CLASS = \[/)
+  assert.match(
+    mountChip,
+    /bg-\[var\(--ow-mention-bg\)\] border-\[color:var\(--ow-info-tint-border\)\] text-\[color:var\(--ow-mention-text\)\]/,
+  )
+  // tint 面上的子件一并收 -on-tint 字色，不留地面档 text-2/-3。
+  assert.match(mountChip, /\[&_\[data-ow-part=icon\]\]:text-\[color:var\(--ow-mention-text\)\]/)
+  assert.match(mountChip, /\[&_\[data-ow-part=remove\]\]:text-\[color:var\(--ow-mention-text\)\]/)
+  // 两处挂载位都吃同一张皮肤，不各写一份。
+  assert.equal(source.match(/className=\{MOUNT_CHIP_CLASS\}/g)?.length, 2)
+  assert.match(source, /data-ow-variant="agent"/)
+  assert.match(source, /data-ow-variant="plan"/)
+})
+
+test("类别由图标区分而非彩度：agent=Bolt / plan=ClipboardList，两轨同底同字", async () => {
+  assert.match(source, /icon=\{agent\.icon \?\? \(!agent\.avatar \? <Bolt \/> : undefined\)\}/)
+  assert.match(source, /icon=\{plan\.icon \?\? <ClipboardList \/>\}/)
+  // 与 ComposerMentions 是同一套 tint。R2：配方已上收到 primitives/Chip 的 tone="mention"，
+  // ComposerMentions 改传 tone、不再手抄 className，所以 token 本体在原语里核；
+  // DesktopComposer 仍走 MOUNT_CHIP_CLASS 常量（待本簇迁完后删）。
+  assert.match(mentions, /tone="mention"/)
+  const chip = await readFile(new URL("../../../primitives/Chip/index.tsx", import.meta.url), "utf8")
+  const mountChip = await readFile(new URL("../../chat/Composer/parts/mountChip.ts", import.meta.url), "utf8")
+  for (const file of [mountChip, chip]) {
+    assert.match(file, /--ow-mention-bg/)
+    assert.match(file, /--ow-info-tint-hover/)
+  }
+})

package/src/components/domain/desktop/DesktopComposer/DesktopComposerResponsiveSource.test.mjs

@@ -0,0 +1,44 @@
+import assert from "node:assert/strict"
+import { readFile } from "node:fs/promises"
+import test from "node:test"
+
+const composerSource = await readFile(new URL("./index.tsx", import.meta.url), "utf8")
+// 合并记：origin/main 把 ContextChip 自己迁成 Tailwind；本分支把它并进 primitives/Chip
+// （composite/ContextChip 只剩 `<Chip removeMode="hover" />` 的薄兼容层），响应式那三条
+// 工具类因此住在 Chip 里。断言照搬研发的三条，只把读的文件换成真正的持有方。
+const chipSource = await readFile(new URL("../../../primitives/Chip/index.tsx", import.meta.url), "utf8")
+const componentStyles = await readFile(new URL("../../../../../styles/components.css", import.meta.url), "utf8")
+const desktopStyles = await readFile(new URL("../../../../../styles/desktop-surfaces.css", import.meta.url), "utf8")
+const desktopAdapter = await readFile(
+  new URL("../../../../../../../apps/desktop/src/renderer/features/chat/Composer.tsx", import.meta.url),
+  "utf8",
+)
+
+test("desktop composer keeps context icons beside hover removal in narrow rendering", () => {
+  assert.match(composerSource, /data-ow-variant="agent"/)
+  assert.match(composerSource, /data-ow-variant="plan"/)
+  assert.match(componentStyles, /\[data-slot="composer"\]\s*\{[^}]*container-type:\s*inline-size;/s)
+  // Chip now owns its own responsive styling via Tailwind; the composer
+  // only needs to pass the right props so icons/tooltips/removal remain usable.
+  assert.match(chipSource, /max-w-\[220px\]/)
+  assert.match(chipSource, /min-w-0\s+overflow-hidden\s+text-ellipsis/)
+  assert.match(chipSource, /group-hover:inline-flex/)
+  assert.match(composerSource, /tooltip=\{contextName\(agent, ["']智能体["']\)\}/)
+  assert.match(composerSource, /tooltip=\{contextName\(plan, ["']计划["']\)\}/)
+  assert.doesNotMatch(composerSource, /点击移除/)
+  assert.match(composerSource, /removeLabel=\{`移除\$\{typeof agent\.label/)
+  assert.doesNotMatch(desktopStyles, /\.sender__bar \.ow-context-chip/)
+})
+
+test("desktop composer model trigger preserves a single-line recognizable prefix", () => {
+  assert.match(composerSource, /export function DesktopComposerModelButton/)
+  assert.match(composerSource, /data-ow-part="label"/)
+  assert.match(composerSource, /aria-label=\{title \?\? `选择模型：\$\{label\}`\}/)
+  assert.match(composerSource, /className="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap"/)
+  assert.match(
+    componentStyles,
+    /@container \(max-width: 360px\)\s*\{[\s\S]*\[data-slot="desktop-composer-model"\] \[data-ow-part="label"\] \{ max-width: 52px; \}/,
+  )
+  assert.match(desktopAdapter, /<DesktopComposerModelButton/)
+  assert.match(desktopAdapter, /title=\{\s*model\s*\?\s*`选择模型：\$\{model\.name\}`/)
+})

package/src/components/domain/desktop/DesktopComposer/DesktopMcpFormThemeSource.test.mjs

@@ -0,0 +1,30 @@
+import assert from "node:assert/strict"
+import { readFile } from "node:fs/promises"
+import test from "node:test"
+
+const styles = await readFile(new URL("../../../../../styles/desktop-surfaces.css", import.meta.url), "utf8")
+
+test("custom connector form uses theme-aware semantic colors", () => {
+  // R2：段尾锚点原为 `.env-rows`（该族已随死码清除撤掉，indexOf 返回 -1 会把整段切歪），改锚 `.mcp-json-hint`。
+  const formStyles = styles.slice(styles.indexOf(".mcp-form__topbar"), styles.indexOf(".mcp-json-hint"))
+
+  // R2 tint 三件套：图标章与提示条原是 alpha 罩 --ow-info-bg ＋ --ow-info-border 边 ＋ --ow-link 字
+  // （三族拼盘），归位为 tint 底 ＋ tint-border 边 ＋ on-tint 字。
+  assert.match(
+    formStyles,
+    /\.mcp-form__icon \{[^}]*background: var\(--ow-info-tint\);[^}]*color: var\(--ow-info-on-tint\);/s,
+  )
+  assert.match(
+    formStyles,
+    /\.mcp-form__notice \{[^}]*border: var\(--ow-border-width-thin, 1px\) solid var\(--ow-info-tint-border\);[^}]*background: var\(--ow-info-tint\);[^}]*color: var\(--ow-info-on-tint\);/s,
+  )
+  // 罩底写法不得回流到本段。
+  assert.doesNotMatch(formStyles, /var\(--ow-info-bg\)/)
+  assert.match(formStyles, /\.mcp-form__mode \{[^}]*width: 136px;[^}]*flex: 0 0 136px;/s)
+  assert.match(
+    formStyles,
+    /\.mcp-form__mode \.ow-select-menu__trigger \{[^}]*border-color: var\(--ow-border-strong\);[^}]*background: var\(--ow-bg\);/s,
+  )
+  assert.doesNotMatch(formStyles, /\.mcp-browse/)
+  assert.doesNotMatch(formStyles, /background: var\(--ow-sky-(?:50|100)\)/)
+})

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

@@ -0,0 +1,206 @@
+"use client"
+
+import { type ReactNode, forwardRef } from "react"
+import { cn } from "../../../../lib/utils"
+import { Bolt, ChevDown, ClipboardList, Plus } from "../../../composite/Icons"
+import { Button, Chip } from "../../../primitives"
+import { Composer, type ComposerProps } from "../../chat/Composer"
+import { MOUNT_CHIP_CLASS } from "../../chat/Composer/parts/mountChip"
+
+/* 挂载物芯片皮肤（agent / plan 与 ComposerMentions 的 @技能/@连接器同属「挂载物」）
+   已收进唯一口径 `chat/Composer/parts/mountChip` 的 MOUNT_CHIP_CLASS——本文件不再自持一份。 */
+
+export type DesktopComposerContext = {
+  label: ReactNode
+  description?: string
+  icon?: ReactNode
+  avatar?: ReactNode
+  onRemove?: () => void
+}
+
+export type DesktopComposerAddAction = {
+  onClick: () => void
+  title?: string
+  open?: boolean
+  disabled?: boolean
+}
+
+export type DesktopComposerModelButtonProps = {
+  label: string
+  title?: string
+  open?: boolean
+  warning?: boolean
+  onClick: () => void
+}
+
+/**
+ * 桌面 Composer 工具条上的模型触发器。
+ *
+ * 走 `Button` 正规 ghost 变体（§6 状态齐备由原语承担），窄容器下的收缩由
+ * `components.css` 的 `[data-slot="desktop-composer-model"]` 容器查询接手。
+ * `warning` 是「当前模型有问题」的提示态：功能色＋文字前缀双编码（R1），不用荧黄。
+ */
+export function DesktopComposerModelButton({ label, title, open, warning, onClick }: DesktopComposerModelButtonProps) {
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      type="button"
+      data-slot="desktop-composer-model"
+      data-ow-state={cn(open && "open", warning && "warning") || undefined}
+      className={cn(
+        "min-w-0 max-w-[190px] whitespace-nowrap flex-row-reverse",
+        warning && "text-[color:var(--ow-warning)]",
+      )}
+      aria-label={title ?? `选择模型：${label}`}
+      aria-expanded={open}
+      title={title ?? label}
+      onClick={onClick}
+      icon={<ChevDown />}
+    >
+      <span data-ow-part="label" className="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap">
+        {label}
+      </span>
+    </Button>
+  )
+}
+
+export type DesktopComposerProps = Omit<
+  ComposerProps,
+  "toolbarStart" | "toolbarEnd" | "footerStart" | "footerEnd" | "voice" | "project" | "authorization" | "contextUsage"
+> & {
+  /** Replaces the complete composer while a blocking permission decision is active. */
+  permissionPrompt?: ReactNode
+  /** Portals and modal surfaces owned by the client workflow but mounted with the composer. */
+  dialogs?: ReactNode
+  addAction?: DesktopComposerAddAction
+  agent?: DesktopComposerContext
+  plan?: DesktopComposerContext
+  modelControl?: ReactNode
+  voiceControl?: ReactNode
+  projectControl?: ReactNode
+  /**
+   * 井脚免责句。**缺省 false**：R2·L1-2-2 起免责句归每一轮转录（`AgentTurn.disclaimer`），
+   * 不归输入井；传字符串才在井脚补一条自定义提示。
+   */
+  notice?: ReactNode | false
+  authorizationControl?: ReactNode
+  contextUsage?: ReactNode
+}
+
+/**
+ * DesktopComposer —— `Composer` 的桌面配方（DS 2.0 蓝图批次③ 合并件）。
+ *
+ * 组合器本体、区域顺序、立面与状态极位置都在 `domain/chat/Composer`；本件只做
+ * 桌面这一路的取名与装配：把 addAction / agent / plan 装进工具条首，把模型控件装
+ * 进工具条尾，语音、项目、授权、上下文用量各自落在组合器定死的具名位上——它们
+ * 不再由本件手工拼进 footerStart / footerEnd，位置改由组合器负责。
+ *
+ * props 与导出保持不变，包外调用方无需改动。
+ */
+export const DesktopComposer = forwardRef<HTMLDivElement, DesktopComposerProps>(function DesktopComposer(
+  {
+    permissionPrompt,
+    dialogs,
+    addAction,
+    agent,
+    plan,
+    modelControl,
+    voiceControl,
+    projectControl,
+    notice = false,
+    authorizationControl,
+    contextUsage,
+    ...composerProps
+  },
+  ref,
+) {
+  const contextName = (context: DesktopComposerContext, fallback: string): ReactNode =>
+    typeof context.label === "string" ? context.label : fallback
+  const composer = permissionPrompt ?? (
+    <Composer
+      ref={ref}
+      {...composerProps}
+      toolbarStart={
+        addAction || agent || plan ? (
+          <>
+            {addAction && (
+              <span data-ow-part="control" className="relative inline-flex min-w-0">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  type="button"
+                  data-ow-part="tool"
+                  data-ow-state={addAction.open ? "open" : undefined}
+                  className={cn(addAction.open && "bg-[var(--ow-btn-ghost-press)]")}
+                  aria-label={addAction.title ?? "添加"}
+                  aria-expanded={addAction.open}
+                  title={addAction.title ?? "添加"}
+                  disabled={addAction.disabled}
+                  onClick={addAction.onClick}
+                  icon={<Plus />}
+                />
+              </span>
+            )}
+            {agent && (
+              <Chip
+                removeMode="hover"
+                avatar={agent.avatar}
+                icon={agent.icon ?? (!agent.avatar ? <Bolt /> : undefined)}
+                label={agent.label}
+                description={agent.description}
+                onRemove={agent.onRemove}
+                tooltip={contextName(agent, "智能体")}
+                removeLabel={`移除${typeof agent.label === "string" ? ` ${agent.label}` : "智能体"}`}
+                className={MOUNT_CHIP_CLASS}
+                data-ow-variant="agent"
+              />
+            )}
+            {plan && (
+              <Chip
+                removeMode="hover"
+                avatar={plan.avatar}
+                icon={plan.icon ?? <ClipboardList />}
+                label={plan.label}
+                description={plan.description}
+                onRemove={plan.onRemove}
+                tooltip={contextName(plan, "计划")}
+                removeLabel={`移除${typeof plan.label === "string" ? ` ${plan.label}` : "计划"}`}
+                className={MOUNT_CHIP_CLASS}
+                data-ow-variant="plan"
+              />
+            )}
+          </>
+        ) : undefined
+      }
+      toolbarEnd={
+        modelControl ? (
+          <span data-ow-part="control" className="relative inline-flex min-w-0">
+            {modelControl}
+          </span>
+        ) : undefined
+      }
+      voice={voiceControl}
+      project={projectControl}
+      footerStart={
+        notice !== false ? (
+          <span
+            data-ow-part="notice"
+            className="flex-[0_0_auto] text-[color:var(--ow-text-3)] font-normal text-ow-fs-ui leading-none whitespace-nowrap"
+          >
+            {notice}
+          </span>
+        ) : undefined
+      }
+      authorization={authorizationControl}
+      contextUsage={contextUsage}
+    />
+  )
+
+  return (
+    <div data-slot="desktop-composer" className="composer-inner">
+      {composer}
+      {dialogs}
+    </div>
+  )
+})

package/src/components/domain/desktop/DesktopConnectorDetailView/DesktopConnectorDetailView.stories.tsx

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Server } from "../../../composite/Icons"
+import { DesktopConnectorDetailView } from "./index"
+
+/**
+ * 连接器详情接管页 —— A11-B4（裁决 16）从 `Desktop/DesktopWorkspaceView` 整块搬来。
+ * 件本身一行未改，只是搬出「我的空间」那个待退役的文件，免得整屏退役时被误伤；
+ * 宿主是插件中心的 `features/skills/ConnectorModal.tsx:468`。
+ */
+const meta = {
+  title: "Desktop/DesktopConnectorDetailView",
+  component: DesktopConnectorDetailView,
+} satisfies Meta<typeof DesktopConnectorDetailView>
+
+export default meta
+
+const mockTools = [
+  { id: "1", name: "read_file", description: "读取文件内容" },
+  { id: "2", name: "write_file", description: "写入文件" },
+  { id: "3", name: "list_directory", description: "列出目录内容" },
+]
+
+export const ConnectorDetail: StoryObj<typeof DesktopConnectorDetailView> = {
+  render: () => (
+    <div style={{ height: "100vh", overflow: "auto" }}>
+      <DesktopConnectorDetailView
+        logo={<Server />}
+        name="文件系统"
+        author="Orbitwork 官方"
+        version="1.0.0"
+        description="提供文件系统访问能力，支持读取、写入和列出文件。"
+        runtime="stdio"
+        status="运行中"
+        statusTone="ok"
+        command="mcp-server-filesystem"
+        enabled={true}
+        tools={mockTools}
+        toolSummary="3 个可见工具"
+        metadata={[
+          { id: "1", label: "协议版本", value: "MCP 1.0" },
+          { id: "2", label: "启动时间", value: "2 分钟前" },
+        ]}
+        onBack={() => console.log("Back")}
+        onToggle={(enabled) => console.log("Toggle", enabled)}
+        onRefresh={() => console.log("Refresh")}
+        onEdit={() => console.log("Edit")}
+        onRemove={() => console.log("Remove")}
+      />
+    </div>
+  ),
+}
+
+export const ConnectorDetailError: StoryObj<typeof DesktopConnectorDetailView> = {
+  render: () => (
+    <div style={{ height: "100vh", overflow: "auto" }}>
+      <DesktopConnectorDetailView
+        logo={<Server />}
+        name="故障连接器"
+        description="这个连接器遇到了启动错误"
+        runtime="stdio"
+        status="启动失败"
+        statusTone="error"
+        enabled={false}
+        error="连接器进程启动失败：命令未找到"
+        tools={[]}
+        emptyToolsText="连接器未启动，无法加载工具"
+        onBack={() => console.log("Back")}
+        onCopyDiagnostic={() => console.log("Copy diagnostic")}
+      />
+    </div>
+  ),
+}

package/src/components/domain/desktop/DesktopConnectorDetailView/DesktopConnectorDetailViewSource.test.mjs

@@ -0,0 +1,81 @@
+import assert from "node:assert/strict"
+import { readFile } from "node:fs/promises"
+import test from "node:test"
+
+/*
+ * A11-B4（裁决 16）：断言随件搬家 —— 这三条原本在
+ * DesktopWorkspaceView/DesktopWorkspaceViewSource.test.mjs，
+ * 连接器详情搬出「我的空间」后跟到这里，逐字未改，只把类型名从
+ * DesktopWorkspaceConnector* 换成搬家后的 DesktopConnector*。
+ */
+const source = await readFile(new URL("./index.tsx", import.meta.url), "utf8")
+
+test("connector detail supports discover content through one public view", () => {
+  // A4-B4：返回条照原型（4718 `'返回插件 · ' + word`）改成「返回插件 · 连接器」——
+  // 上一级页已经从「发现」改名「插件」，返回条却还在指旧名。
+  assert.match(source, /backLabel\s*=\s*['"]返回插件 · 连接器['"]/)
+  assert.ok(source.includes("<DesktopCatalogDetailShell"))
+  assert.ok(source.includes("<DesktopCatalogDetailActions"))
+  assert.ok(source.includes("actions?: DesktopConnectorActionView[]"))
+  assert.ok(source.includes("overflow?: boolean"))
+  assert.ok(source.includes("metadata?: DesktopConnectorMetaView[]"))
+  assert.ok(source.includes("authorization?: ReactNode"))
+  assert.ok(source.includes("detailContent?: ReactNode"))
+  assert.ok(source.includes("toolAction?: DesktopConnectorActionView"))
+  assert.ok(source.includes("metadata.map((item)"))
+  assert.match(source, /\{authorization\s*&&\s*\(?\s*<section/)
+  assert.match(source, /\{detailContent\s*&&\s*\(?\s*<div\s+className=["']skd__doc["']/)
+  assert.ok(source.includes("actions={inlineActions.map((action)"))
+  assert.ok(source.includes("menuItems={overflowActions.map((action)"))
+  assert.match(source, /className="conn-tools__empty"[\s\S]*toolAction\s*&&[\s\S]*<Button[\s\S]*toolAction\.label/)
+  assert.doesNotMatch(source, /className="conn-detail(?:__hero|__actions|__section)?"/)
+})
+
+test("A4-B4：破坏性动作叫「断开连接」且只在 ⋯ 里，页头右侧不留红实底钮", () => {
+  // 退化现场：「刷新状态 / 编辑配置 / 卸载连接器」三颗并排杵在页头，最后一颗是红实底——
+  // 破坏性动作站上行动极的位置。原型 4732 的连接器域把它叫「断开连接」并收进 ⋯。
+  assert.doesNotMatch(source, /label: "卸载连接器"/)
+  assert.match(
+    source,
+    /label: "断开连接",\s*\n\s*icon: <Trash \/>,\s*\n\s*variant: "danger" as const,\s*\n\s*overflow: true,/,
+  )
+  assert.match(source, /label: "刷新状态", icon: <Refresh \/>, overflow: true, onAction: onRefresh/)
+  // 主钮是「编辑配置」，排在第一位（收敛规则＝第一颗上台面）
+  assert.match(source, /const resolvedActions: DesktopConnectorActionView\[\] = actions \?\? \[\s*\n\s*\.\.\.\(onEdit/)
+})
+
+test("A4-B4：一句描述升到 hero，正文不再重写一遍「简介」节", () => {
+  assert.match(source, /summary=\{description\}/)
+  assert.doesNotMatch(source, /<div className="lbl">简介<\/div>/)
+})
+
+test("workspace connector row is no longer exposed", () => {
+  assert.doesNotMatch(source, /DesktopConnectorRowView/)
+})
+
+test("R5：工具区计数只出一处——摘要在就顶掉 .cnt 圆章", () => {
+  // 退化现场：「工具 ⟨3⟩ 3 个可见工具」——圆章读数与摘要里的数字同屏重复。
+  // 新口径：toolSummary 在时由摘要承担计数，.cnt 只在没有摘要时回落。
+  assert.doesNotMatch(source, /工具 <span className="cnt">\{tools\.length\}<\/span>/)
+  assert.match(
+    source,
+    /工具\{" "\}\s*\{toolSummary \? \(\s*<span className="skd__lbl-note">\{toolSummary\}<\/span>\s*\) : \(\s*<span className="cnt">\{tools\.length\}<\/span>\s*\)\}/,
+  )
+  // 两种表达互斥，源码里不再出现「圆章 ＋ 摘要」并列渲染
+  assert.doesNotMatch(source, /\{tools\.length\}<\/span>\s*\n\s*\{toolSummary &&/)
+})
+
+test("A11-B4：旧名以 @deprecated 别名保留，宿主 import 不断", () => {
+  assert.match(
+    source,
+    /@deprecated[\s\S]*?export const DesktopWorkspaceConnectorDetailView = DesktopConnectorDetailView/,
+  )
+  for (const alias of [
+    "DesktopWorkspaceConnectorToolView",
+    "DesktopWorkspaceConnectorActionView",
+    "DesktopWorkspaceConnectorMetaView",
+    "DesktopWorkspaceConnectorDetailViewProps",
+  ]) {
+    assert.match(source, new RegExp(`export type ${alias} = Desktop`))
+  }
+})