dsh-router-core 0.3.21 → 0.4.1

package/src/client/RouterComponentsSection.tsx

@@ -0,0 +1,241 @@
+/**
+ * 官方插件页（设置 → 插件）里 dsh-router-core 详情页的「路由组件」一节。
+ *
+ * 为什么在这里而不是官方那个「包含的组件」：那一节的行由宿主从**本 bundle 自己
+ * 的 cordis.patch.yml** 算出来（plugin-manager `declaredRows`），跨 bundle 没有
+ * 注入通道；而子插件（dsh-router-codebuddy / -ext-rtk …）各自是独立 bundle，
+ * 必须保持独立安装。官方给的位置就是本节用的 `plugins.detail.section` 槽位
+ * （渲染在原生行列表**之后**，自带 chrome）。
+ *
+ * **内置的三个供应商不在这一节**：它们是 dsh-router-core 自己 patch 里的行
+ * （`cordis.patch.yml` insert 的子路径模块），已经在宿主的原生「包含的组件」里，
+ * 带着宿主管的开关。在这里再列一遍就是同一个东西显示两处。
+ *
+ * 数据全部来自核心**已经在提供**的两个端点，不新增任何 API：
+ *   - `GET /router/api/health` → `suppliers[]`（只取 `source === 'external'`）
+ *   - `GET /router/api/ext` → `enhancers[]`（核心已把开关与就绪状态合并好）
+ *
+ * 交互按各组真实能力给，不假装能开关：只有 ext 走 `PATCH /router/api/ext`
+ * （核心持久化到 `<dataDir>/ext.json`）；供应商走 `PATCH /suppliers/:id/enabled`
+ * （落到 `supplier-config.json`），关掉后核心的活跃集合里就没有它，请求不会落到它。
+ */
+import { useEffect, useRef, useState } from 'react'
+import { Switch } from '@deepseek-ai/dsh-client-ui-primitives'
+import { ROUTER_API_BASE, type RouterExtResponse, type RouterHealthResponse } from '../shared.ts'
+import {
+  EMPTY_COMPONENTS,
+  groupRouterComponents,
+  isEmptyComponents,
+  type RouterComponentRow,
+  type RouterComponents,
+} from './router-components.ts'
+
+/**
+ * 本 bundle 的包名 —— 宿主用它标识「哪个插件的详情页」。
+ * 之前导出去是为了给行详情页的槽位 key 拼前缀；那个入口已撤，这一节自己用即可。
+ */
+const BUNDLE_NAME = 'dsh-router-core'
+
+/** 两组的标题与组级说明（顺序即渲染顺序）。 */
+const GROUPS: ReadonlyArray<{ key: keyof RouterComponents; title: string; hint: string }> = [
+  { key: 'external', title: '供应商', hint: '关掉的供应商不参与路由，请求不会落到它' },
+  { key: 'ext', title: '扩展', hint: '独立安装的扩展插件；内置扩展在上面的「包含的组件」里' },
+]
+
+/** 宿主 slot 注入的 owner props（本地声明，不 import 宿主的 slot-contract 类型）。 */
+interface Subject {
+  kind?: string
+  pkg?: { name?: string }
+}
+
+/** 读一个 GET 端点；失败当空答复，形状恒定。 */
+async function readJson<T>(path: string): Promise<T | undefined> {
+  try {
+    const response = await fetch(`${ROUTER_API_BASE}${path}`, { cache: 'no-store' })
+    const data = await response.json() as T & { ok?: boolean; error?: string }
+    if (data.ok === false) return undefined
+    return data
+  } catch {
+    return undefined
+  }
+}
+
+/** 写扩展开关；答复带回合并后的整张扩展表（核心 PATCH 后会重发一次列表）。 */
+async function writeExt(id: string, enabled: boolean): Promise<RouterExtResponse | undefined> {
+  try {
+    const response = await fetch(`${ROUTER_API_BASE}/ext`, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ id, enabled }),
+      cache: 'no-store',
+    })
+    return await response.json() as RouterExtResponse
+  } catch {
+    return undefined
+  }
+}
+
+/**
+ * 写供应商开关（核心的通用端点，`supplierRoutes` 生成）。
+ *
+ * 关掉是真的不参与路由 —— 核心的活跃集合里就没有它了，请求不会落到它，而它自己
+ * 仍留在列表里（关掉后还能再开）。答复只回 `{ok, id, enabled}`，所以成功后就重读
+ * `/health`，不在这儿猜状态。
+ */
+async function writeSupplier(id: string, enabled: boolean): Promise<{ ok?: boolean; error?: string } | undefined> {
+  try {
+    const response = await fetch(`${ROUTER_API_BASE}/suppliers/${encodeURIComponent(id)}/enabled`, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ enabled }),
+      cache: 'no-store',
+    })
+    return await response.json() as { ok?: boolean; error?: string }
+  } catch {
+    return undefined
+  }
+}
+
+function RowIcon({ row }: { row: RouterComponentRow }): JSX.Element {
+  if (row.icon === undefined) {
+    return <span className="dshr-compRowIcon" aria-hidden="true">◇</span>
+  }
+  return (
+    <span className="dshr-compRowIcon">
+      <img src={row.icon} alt="" onError={(e) => { e.currentTarget.style.display = 'none' }} />
+    </span>
+  )
+}
+
+/** 这一行是不是扩展（键前缀 `ext:`）—— 扩展有 `ready` 自检，供应商没有。 */
+function isExt(row: RouterComponentRow): boolean {
+  return row.key.startsWith('ext:')
+}
+
+/**
+ * 一行：图标 + 名称 + 状态说明。
+ *
+ * 状态说明只给 ext 行（它的启停与就绪是运行时事实，值得逐条说）；供应商行
+ * 在这一页没有可写的开关，含义由组标题承载，不编一句假状态给它。
+ */
+function Row({ row, busy, onToggle }: {
+  row: RouterComponentRow
+  busy: boolean
+  onToggle: (row: RouterComponentRow, next: boolean) => void
+}): JSX.Element {
+  return (
+    <li className="dshr-compRow">
+      <RowIcon row={row} />
+      <div className="dshr-compRowMain">
+        <span className="dshr-compRowName">{row.name}</span>
+        {row.togglable && (
+          <span className="dshr-compRowState">{row.detail ?? (row.enabled === true ? '已启用' : '已关闭')}</span>
+        )}
+      </div>
+      {row.togglable && (
+        <Switch
+          checked={row.enabled === true}
+          // 「自检未通过不给开」只对**扩展**成立（`ready` 是扩展器报的运行时事实，
+          // 约定写在 docs/ext.md）。供应商没有 `ready` 这个字段，若不按行类型区分，
+          // 它的开关会永远处于 disabled —— 一个点不开的开关比没有还糟。
+          disabled={busy || (!row.enabled && isExt(row) && row.ready !== true)}
+          label={`${row.name} 开关`}
+          title={!row.enabled && isExt(row) && row.ready !== true
+            ? (row.detail ?? '当前不可用,无法开启')
+            : row.enabled === true ? `关闭 ${row.name}` : `开启 ${row.name}`}
+          onChange={(next) => { onToggle(row, next) }}
+        />
+      )}
+    </li>
+  )
+}
+
+export function RouterComponentsSection({ subject }: { subject?: Subject }): JSX.Element | null {
+  const [components, setComponents] = useState<RouterComponents>(EMPTY_COMPONENTS)
+  const [error, setError] = useState('')
+  const [loaded, setLoaded] = useState(false)
+  const [busy, setBusy] = useState('')
+  const live = useRef(true)
+
+  const mine = subject?.kind === 'bundle' && subject?.pkg?.name === BUNDLE_NAME
+
+  const load = async (): Promise<void> => {
+    const [health, ext] = await Promise.all([
+      readJson<RouterHealthResponse>('/health'),
+      readJson<RouterExtResponse>('/ext'),
+    ])
+    if (!live.current) return
+    setError(health === undefined && ext === undefined ? '读取路由组件失败' : '')
+    setComponents(groupRouterComponents(health ?? { ok: false }, ext ?? { ok: false }))
+    setLoaded(true)
+  }
+
+  useEffect(() => {
+    if (!mine) return
+    live.current = true
+    void load()
+    return () => { live.current = false }
+  }, [mine])
+
+  if (!mine) return null
+
+  const toggle = async (row: RouterComponentRow, next: boolean): Promise<void> => {
+    // 行键形如 `ext:rtk` / `supplier:codebuddy`；两种组走**不同的端点**。
+    // （这里原先硬编码了 'ext:' 前缀 —— 供应商行的 id 会被切成 'supplier:codebuddy'
+    // 整串发给扩展端点，供应商的开关根本落不下去。）
+    const id = row.key.slice(row.key.indexOf(':') + 1)
+    setBusy(id)
+    setError('')
+    if (isExt(row)) {
+      const data = await writeExt(id, next)
+      if (!live.current) return
+      setBusy('')
+      if (data?.ok === true) {
+        // 扩展端点的 PATCH 会回发合并后的整张表，直接用它，省一次往返。
+        const health = await readJson<RouterHealthResponse>('/health')
+        setComponents(groupRouterComponents(health ?? { ok: true }, data))
+        return
+      }
+      // 核心拒了（未就绪 / 不存在）或网络失败：回读真值，不留乐观假象。
+      setError(data?.error ?? '切换扩展失败')
+      await load()
+      return
+    }
+    const data = await writeSupplier(id, next)
+    if (!live.current) return
+    setBusy('')
+    if (data?.ok === true) {
+      // 供应商端点只回 `{ok,id,enabled}`，状态以 `/health` 为准重读一次。
+      await load()
+      return
+    }
+    setError(data?.error ?? '切换供应商失败')
+    await load()
+  }
+
+  const groups = GROUPS
+    .map(({ key, title, hint }) => ({ title, hint, rows: components[key] }))
+    .filter((g) => g.rows.length > 0)
+  // 加载中或两组全空都不渲染：宿主那一节是「有内容才有一节标题」的形状。
+  if (!loaded || isEmptyComponents(components)) return null
+
+  return (
+    <section className="dshr-comp" data-router-components>
+      {error !== '' && <p className="dshr-compError" role="status">{error}</p>}
+      {groups.map((group) => (
+        <div key={group.title} className="dshr-compGroup">
+          <div className="dshr-compHead">
+            <h4 className="dshr-compTitle">{group.title}</h4>
+            <span className="dshr-compCount">共 {group.rows.length} 个</span>
+          </div>
+          {group.hint !== '' && <p className="dshr-compHint">{group.hint}</p>}
+          <ul className="dshr-compRows">
+            {group.rows.map((row) => (
+              <Row key={row.key} row={row} busy={busy === row.key.slice(row.key.indexOf(':') + 1)} onToggle={toggle} />
+            ))}
+          </ul>
+        </div>
+      ))}
+    </section>
+  )
+}

package/src/client/RouterView.tsx

@@ -27,6 +27,7 @@ import {
 import { SupplierDetail } from './SupplierDetail.tsx'
 import { EndpointTab } from './EndpointTab.tsx'
 import { CombosTab } from './CombosTab.tsx'
+import { supplierVisibility, type SupplierSummary } from './supplier-visibility.ts'
 import { StatsTab } from './StatsTab.tsx'
 import { ExtTab } from './ExtTab.tsx'
 
@@ -86,13 +87,16 @@ export function RouterView({ onBack }: RouterViewProps): JSX.Element {
   }, [])
 
   const suppliers = snapshot.health?.suppliers ?? []
+  // 面板只列**开着**的供应商（关掉的卡片不出现，与「扩展」页同一形状）；开关在
+  // 插件页那节。判据与空状态文案都在 supplier-visibility.ts，可单测。
+  const panel = supplierVisibility(suppliers)
   const accounts = snapshot.status?.accounts ?? []
   const combos = snapshot.combos?.combos ?? []
   const suppliersError = snapshot.status?.ok === false ? snapshot.status.error : undefined
   const combosError = snapshot.combos?.ok === false ? snapshot.combos.error : undefined
 
   /** 渲染一组供应商卡片（内置 / 插件分开）。 */
-  const renderSupplierGroup = (title: string, group: Array<{ id: string; name: string; icon?: string; apiKeyHint?: string; source?: string }>): ReactNode => {
+  const renderSupplierGroup = (title: string, group: SupplierSummary[]): ReactNode => {
     if (group.length === 0) return null
     return (
       <div className="dshr-supplierGroup">
@@ -181,11 +185,14 @@ export function RouterView({ onBack }: RouterViewProps): JSX.Element {
             )
             : (
               <div className="dshr-tabBody">
-                {suppliers.length === 0 && snapshot.health !== null && (
-                  <div className="dshr-empty">暂无供应商</div>
+                {snapshot.health !== null && panel.empty !== undefined && (
+                  <div className="dshr-empty dshr-emptyStack">
+                    <div>{panel.empty.title}</div>
+                    {panel.empty.desc !== '' && <div className="dshr-muted">{panel.empty.desc}</div>}
+                  </div>
                 )}
-                {renderSupplierGroup('内置', suppliers.filter(s => s.source !== 'external'))}
-                {renderSupplierGroup('插件', suppliers.filter(s => s.source === 'external'))}
+                {renderSupplierGroup('内置', panel.builtin)}
+                {renderSupplierGroup('插件', panel.external)}
                 {suppliersError !== undefined && (
                   <div className="dshr-empty">{suppliersError}</div>
                 )}

package/src/client/StatsTab.tsx

@@ -333,9 +333,9 @@ function RecentTable({ rows }: { rows: RouterUsageRecord[] }): JSX.Element {
             <div className="dshr-recentRow dshr-rankHead">
               <span className="dshr-recentTime">时间</span>
               <span className="dshr-recentModel">模型</span>
-              <span className="dshr-recentSupplier">供应商</span>
-              <span className="dshr-rankNum">In / Out</span>
-              <span className="dshr-rankNum">耗时</span>
+              <span className="dshr-recentSupplier">连接</span>
+              <span className="dshr-recentTokens">In / Out</span>
+              <span className="dshr-recentDuration">耗时</span>
             </div>
             {rows.map((r, i) => (
               // 明细没有 id；同毫秒两条请求是可能的，索引用 ts+模型+序号兜底
@@ -347,13 +347,15 @@ function RecentTable({ rows }: { rows: RouterUsageRecord[] }): JSX.Element {
                 <span className="dshr-recentModel dshr-mono" title={`请求 ${r.requested}${r.error === undefined ? '' : ` · ${r.error}`}`}>
                   {r.model === '' ? r.requested : r.model}
                 </span>
-                <span className="dshr-recentSupplier">{r.supplier === '' ? '—' : r.supplier}</span>
-                <span className="dshr-rankNum">
+                <span className="dshr-recentSupplier" title={r.uid ?? ''}>
+                  {r.connection === undefined || r.connection === '' ? '—' : r.connection}
+                </span>
+                <span className="dshr-recentTokens">
                   <span className="dshr-tokenIn">{fmtShort(r.promptTokens)}{r.inputEstimated ? '~' : ''}</span>
                   {' / '}
                   <span className="dshr-tokenOut">{fmtShort(r.completionTokens)}{r.outputEstimated ? '~' : ''}</span>
                 </span>
-                <span className="dshr-rankNum dshr-muted">{fmtDuration(r.durationMs)}</span>
+                <span className="dshr-recentDuration dshr-muted">{fmtDuration(r.durationMs)}</span>
               </div>
             ))}
           </div>

package/src/client/SupplierDetail.tsx

@@ -106,7 +106,6 @@ export function SupplierDetail({ supplier, accounts, statusLoading, onBack, onRe
   const [modelQuery, setModelQuery] = useState('')
   const [fetchingModels, setFetchingModels] = useState(false)
   const [removeModelTarget, setRemoveModelTarget] = useState<string | null>(null)
-  const [poolStrategy, setPoolStrategy] = useState<'fallback' | 'round-robin'>('fallback')
   const [poolOrder, setPoolOrder] = useState<string[]>([])
   const [checkingIn, setCheckingIn] = useState(false)
   const [refreshing, setRefreshing] = useState(false)
@@ -146,16 +145,9 @@ export function SupplierDetail({ supplier, accounts, statusLoading, onBack, onRe
 
   const loadPoolConfig = useCallback(async (): Promise<void> => {
     try {
-      const [strategyRes, orderRes] = await Promise.all([
-        fetch(`${ROUTER_API_BASE}/suppliers/${supplier.id}/pool/strategy`, { cache: 'no-store' }),
-        fetch(`${ROUTER_API_BASE}/suppliers/${supplier.id}/pool/order`, { cache: 'no-store' }),
-      ])
-      const [strategyData, orderData] = await Promise.all([strategyRes.json(), orderRes.json()]) as [
-        { ok: boolean; strategy?: 'fallback' | 'round-robin' },
-        { ok: boolean; order?: string[] },
-      ]
+      const orderRes = await fetch(`${ROUTER_API_BASE}/suppliers/${supplier.id}/pool/order`, { cache: 'no-store' })
+      const orderData = await orderRes.json() as { ok: boolean; order?: string[] }
       if (mounted.current) {
-        if (strategyData.ok && strategyData.strategy) setPoolStrategy(strategyData.strategy)
         if (orderData.ok && Array.isArray(orderData.order)) setPoolOrder(orderData.order)
       }
     } catch {
@@ -535,17 +527,6 @@ export function SupplierDetail({ supplier, accounts, statusLoading, onBack, onRe
       const data = await response.json() as { ok: boolean; error?: string }
       if (data.ok) {
         setAlias(aliasDraft.trim())
-        // 同时保存连接池策略
-        try {
-          await fetch(`${ROUTER_API_BASE}/suppliers/${supplier.id}/pool/strategy`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ strategy: poolStrategy }),
-            cache: 'no-store',
-          })
-        } catch {
-          // 策略保存失败不阻断前缀保存
-        }
         setShowAlias(false)
       } else {
         setAliasError(data.error ?? '保存失败')
@@ -603,7 +584,6 @@ export function SupplierDetail({ supplier, accounts, statusLoading, onBack, onRe
             <h1 className="dshr-providerName">{supplier.name}</h1>
             <p className="dshr-providerCount">
               {supplierAccounts.length} 链接
-              {canPool && ` · ${poolStrategy === 'round-robin' ? '轮询' : '回退'}`}
               {canEdit && ` · 前缀 ${alias}`}
             </p>
           </div>
@@ -905,18 +885,6 @@ export function SupplierDetail({ supplier, accounts, statusLoading, onBack, onRe
                 onChange={(e) => setAliasDraft(e.target.value)}
               />
             </>
-            <>
-              <label className="dshr-fieldLabel">连接池策略</label>
-              <p className="dshr-muted">回退 = 按连接池顺序取第一个健康链接；轮询 = 按会话前缀粘住同一链接（前缀亲和，多会话不打架），拿不到会话信息时退回块轮转。</p>
-              <select
-                className="dshr-select dshr-input"
-                value={poolStrategy}
-                onChange={(e) => setPoolStrategy(e.target.value as 'fallback' | 'round-robin')}
-              >
-                <option value="fallback">回退</option>
-                <option value="round-robin">轮询</option>
-              </select>
-            </>
             {aliasError !== '' && <div className="dshr-alert"><strong>出错了</strong><span>{aliasError}</span></div>}
             <div className="dshr-modalActions">
               <button type="button" className="dshr-miniButton" onClick={() => setShowAlias(false)}>取消</button>

package/src/client/comp-button-scope.test.ts

@@ -0,0 +1,58 @@
+/**
+ * 面板按钮的字色判据 —— 锁住「每个按钮都在那条抬特异性的规则覆盖范围内」。
+ *
+ * ## 为什么需要这条
+ *
+ * 宿主的 `Button` 原语在 `primary` 变体里要把字色设成
+ * `--dsw-alias-label-primary-foreground`，但 `router.css` 顶部那条兜底
+ * `.dshr-settings button { color: inherit; font: inherit }` 特异性 (1,1) **高于**
+ * 原语的 (1,0)，赢的是它 —— 于是按钮变「#0f1115 底 + 继承来的 #0f1115 字」，
+ * **黑底黑字**。这个插件已经因此翻车两次：第一次是访问测试按钮，第二次是新增的
+ * 契约体检按钮（上一版修复只挂在 `.dshr-compActions` 上，新按钮在另一个容器里，
+ * 规则没盖到）。症状完全一样、且不报任何错。
+ *
+ * 修法是给每个动作行挂 `dshr-compBtnRow`，由一条 (2,1) 的规则统一还原字色。
+ * （这个类名特意**不是** `dshr-compActions` 的前缀：否则下面按子串计数会把它
+ * 一起算进去，判据自己就成了摆设。）
+ * 那么「新增按钮忘了挂这个类」就会退化成同样的黑底黑字 —— 这条判据就是拦它的。
+ */
+import test from 'node:test'
+import assert from 'node:assert/strict'
+import { readFileSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+
+const panel = readFileSync(fileURLToPath(new URL('./ExtTestPanel.tsx', import.meta.url)), 'utf8')
+const css = readFileSync(fileURLToPath(new URL('./router.css', import.meta.url)), 'utf8')
+
+test('面板里每个 Button 都在一个带 dshr-compBtnRow 的动作行里', () => {
+  // 一个动作行可以放多个按钮（「只读体检」+「深度体检」并排），所以判据是
+  // **每个 Button 在源码里都处于某个 dshr-compBtnRow 容器之内** —— 早期版本
+  // 用「按钮数 == 行数」来近似，被并排两个按钮的布局直接顶红了（这正是它的价值：
+  // 假设一旦不成立就会暴露，而不是继续绿）。
+  const opens = [...panel.matchAll(/<div className="([^"]*)">/g)].map((m) => m[1])
+  const rows = opens.filter((c) => (c ?? '').includes('dshr-compBtnRow')).length
+  assert.ok(rows > 0, '面板里应当有动作行（这条判据才有意义）')
+  const buttons = [...panel.matchAll(/<Button\b/g)]
+  assert.ok(buttons.length > 0, '面板里应当有 Button')
+  for (const b of buttons) {
+    const before = panel.slice(0, b.index)
+    // 取该 Button 之前最近一个开着的 <div>，看它是不是动作行
+    const nearest = [...before.matchAll(/<div className="([^"]*)">/g)].pop()
+    assert.ok((nearest?.[1] ?? '').includes('dshr-compBtnRow'),
+      `有一个 Button 不在任何 dshr-compBtnRow 动作行里（最近的容器：${nearest?.[1] ?? '无'}）—— 会变回黑底黑字`)
+  }
+})
+
+test('那条字色规则挂在共用类上（不能再写死某个容器）', () => {
+  assert.match(css, /\.dshr-comp \.dshr-compBtnRow button\s*\{/,
+    '字色规则必须挂在 .dshr-compBtnRow 上：写死某个容器的话，下次新增按钮换个容器就漏')
+  assert.match(css, /\.dshr-comp \.dshr-compBtnRow button\s*\{[^}]*color:\s*var\(--dsw-alias-label-primary-foreground\)/,
+    '字色仍由原语那个 token 决定，不自己另挑一个颜色')
+})
+
+test('规则特异性高于那条兜底（不依赖源码顺序）', () => {
+  // 兜底 = `.dshr-settings button` (1,1)；本规则 = `.dshr-comp .dshr-compBtnRow button` (2,1)
+  const rule = css.match(/(\.[\w-]+)\s+(\.[\w-]+)\s+button\s*\{[^}]*color:\s*var\(--dsw-alias-label-primary-foreground\)/)
+  assert.ok(rule !== null, '找不到那条字色规则')
+  assert.notEqual(rule[1], '.dshr-settings', '不能和兜底规则同容器 —— 同特异性就变成靠源码顺序了')
+})

package/src/client/comp-panel-layout.test.ts

@@ -0,0 +1,58 @@
+/**
+ * 插件自检面板的**版面**判据 —— 不是像素级的样式测试，是「结构上别退回去」。
+ *
+ * 背景：核心侧那两项（模型启用状态 / 全部启用禁用）原先单独画了个带框的区块
+ * （`.dshr-compCore`，加粗、垫底色、单独一栏）。看着比真问题还显眼，而它们本来就是
+ * 体检结果的一部分，用户要的是「一眼扫完」。所以并进契约成员那一份列表，同一种行。
+ */
+import test from 'node:test'
+import assert from 'node:assert/strict'
+import { readFileSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+
+const panel = readFileSync(fileURLToPath(new URL('./ExtTestPanel.tsx', import.meta.url)), 'utf8')
+const css = readFileSync(fileURLToPath(new URL('./router.css', import.meta.url)), 'utf8')
+
+test('核心侧那两项和契约成员同构：不另起区块', () => {
+  assert.equal(/className="dshr-compCore"/.test(panel), false,
+    '核心侧不该有自己的区块 —— 要和契约成员用同一份列表、同一种行')
+  assert.equal(/\.dshr-compCore\s*\{/.test(css), false, '核心侧区块的样式也该删掉')
+})
+
+test('「模型启用状态」和「全部启用/禁用」都渲染成 dshr-compMember 行', () => {
+  const rowCount = (panel.match(/className="dshr-compMember"/g) ?? []).length
+  assert.ok(rowCount >= 3, '至少要有：模型启用状态、全部启用禁用、契约成员各自的行')
+  assert.match(panel, /模型启用状态/, '模型启用状态要在面板上出现')
+  assert.match(panel, /report\.core\.operations\.map/, '全部启用/禁用由 core.operations 渲染')
+})
+
+test('面板顶部说明是一句话（不是写给维护者的长篇）', () => {
+  const intro = panel.match(/<p className="dshr-compIntro">([\s\S]*?)<\/p>/g) ?? []
+  for (const block of intro) {
+    const text = block.replace(/<[^>]+>/g, '').replace(/\s+/g, ' ').trim()
+    assert.ok(text.length <= 60, `说明要一句话（现在 ${text.length} 字）：${text}`)
+  }
+})
+
+test('两节各有一个标题，两个按钮都叫「测试」（否则分不清点的是哪一个）', () => {
+  // 两个按钮同名是有意的（用户就是要一个统一的动词），代价是两节必须有标题来区分
+  assert.match(panel, /<h4 className="dshr-compSectionTitle">连接测试<\/h4>/, '第一节要有标题')
+  assert.match(panel, /<h4 className="dshr-compSectionTitle">插件测试<\/h4>/, '第二节叫「插件测试」')
+  assert.equal((panel.match(/'测试'|'测试中…'/g) ?? []).length, 4,
+    '两节各一对（常态 + 进行中）')
+  assert.equal(panel.includes('跑一次访问测试'), false, '旧的按钮长称别回来')
+  assert.equal(panel.includes('跑一次出厂体检'), false, '旧的按钮长称别回来')
+  assert.equal(panel.includes('插件契约体检'), false, '旧的节名别回来')
+})
+
+test('报告头只给数字，不给判词（合格/不合格该由看报告的人自己下）', () => {
+  for (const word of ['可以出厂', '不合格', '有未验项', '结论']) {
+    assert.equal(panel.includes(word), false, `判词「${word}」不该出现在面板上`)
+  }
+  assert.equal(panel.includes('dshr-compVerdict'), false, '徽标整块删掉')
+  assert.equal(/\.dshr-compVerdict/.test(css), false, '徽标样式也删掉')
+  // 数字要够：实跑数与「未验」都不能少 —— 没条件验的项混进「通过」就是撒谎
+  for (const field of ['total', 'implemented', 'ran', 'ok', 'fail', 'unverified', 'absent', 'bulk']) {
+    assert.match(panel, new RegExp(`summary\\.${field}`), `汇总里要能看到 ${field}`)
+  }
+})

package/src/client/env.d.ts

@@ -4,4 +4,41 @@ declare namespace JSX {
 }
 
 // CSS 副作用导入的模块声明（vite 产物内联，仅静态类型需要）。
-declare module '*.css'
+declare module '*.css'
+
+// 宿主 client 座位包不装进本插件的 node_modules（靠 package.json 的
+// dsh.client.inject 声明，运行时由宿主的模块表解析），所以这里只补**本插件
+// 真正用到的那一个**导出，签名照宿主的 Switch.d.ts 抄。
+//
+// 代价要说清：这是契约的本地副本，宿主改了签名这里不会自动变红；运行期用的是
+// 宿主的真组件，漂移会表现为行为差异而不是构建失败。新增用到别的导出时同理。
+declare module '@deepseek-ai/dsh-client-ui-primitives' {
+  /** 开关。checked 完全受控；onChange 收到点击所请求的状态。 */
+  export function Switch(props: {
+    checked: boolean
+    onChange: (next: boolean) => void
+    /** 无障碍名，由渲染点自己给。 */
+    label: string
+    disabled?: boolean
+    title?: string
+    className?: string
+  }): import('react').JSX.Element
+
+  /**
+   * 按钮。variant 各自对应宿主的 `--dsw-alias-button-*` token 家族，size `md`
+   * 是 36px 控件 / 12px 圆角（`sm` 是 28px / 8px）。原生 button 属性透传。
+   */
+  export function Button(props: {
+    variant?: 'primary' | 'ghost' | 'outline' | 'toolbar'
+    size?: 'md' | 'sm'
+    /** 前置 16px 图标。 */
+    icon?: import('react').ReactNode
+    className?: string
+    children?: import('react').ReactNode
+    type?: 'button' | 'submit' | 'reset'
+    disabled?: boolean
+    /** 原生 button 属性透传，所以 title 等标准属性可用。 */
+    title?: string
+    onClick?: () => void
+  }): import('react').JSX.Element
+}

package/src/client/ext-panels.test.ts

@@ -0,0 +1,44 @@
+/**
+ * 扩展开放详情面板的注册表测试。
+ *
+ * 为什么要测：注册表错了**不报任何错** —— 详情页只是安静地退回通用只读页，
+ * 用户看到的是「面板没出来」，没有任何线索指向「面板没被登记」。所以「登记 →
+ * 取用 → 清理」这条链要钉住。
+ */
+import test from 'node:test'
+import assert from 'node:assert/strict'
+import { registerExtPanel, hasExtPanel, extPanel } from './ext-panels.ts'
+
+const A = (): null => null
+const B = (): null => null
+
+test('登记后能按扩展 id 取到同一个组件', () => {
+  const dispose = registerExtPanel('t-a', A)
+  assert.equal(hasExtPanel('t-a'), true)
+  assert.equal(extPanel('t-a'), A, '取到的必须就是登记进去的那个（两处详情页共用同一份）')
+  dispose()
+})
+
+test('没登记的扩展取不到（调用方据此走通用只读页）', () => {
+  assert.equal(hasExtPanel('t-missing'), false)
+  assert.equal(extPanel('t-missing'), undefined)
+})
+
+test('重复登记同 id：后者顶掉前者（apply 可能跑多次）', () => {
+  const first = registerExtPanel('t-b', A)
+  const second = registerExtPanel('t-b', B)
+  assert.equal(extPanel('t-b'), B)
+  first()
+  assert.equal(extPanel('t-b'), B, '清理旧的那次不该把新登记的也删掉')
+  second()
+  assert.equal(extPanel('t-b'), undefined)
+})
+
+test('清理只删自己那次登记', () => {
+  const first = registerExtPanel('t-c', A)
+  const disposeB = registerExtPanel('t-c', B)
+  first()
+  assert.equal(extPanel('t-c'), B, '旧登记被顶掉后，它的清理不该误删新登记')
+  disposeB()
+  assert.equal(hasExtPanel('t-c'), false)
+})

package/src/client/ext-panels.ts

@@ -0,0 +1,49 @@
+/**
+ * 扩展自带详情面板的注册表 —— 客户端，按扩展 id 索引。
+ *
+ * 为什么要有这个：`router.ext` 契约里只有 `id / name / description / icon /
+ * getState`，**没有「自带详情内容」的口子**。于是扩展详情页（设置 → 路由 → 扩展 →
+ * 点开卡片）只能是一张写死的只读页：名字、id、状态、一段说明，扩展自己想放的
+ * 东西（要选的模型、要跑的测试、要看的诊断）**没地方放**。
+ *
+ * 本表就是那个口子：扩展（按扩展 id）登记一个组件，详情页优先渲染它。
+ *
+ * 两处详情页共用它，两处都以扩展 id 为键，所以**同一个面板注册一次**：
+ *   - 设置 → 路由 → 扩展：卡片点开的详情页（`ExtDetail`）
+ *   - 设置 → 插件 → dsh-router-core：「包含的组件」里那一行的详情页
+ *     （宿主的 `plugins.row.config` 座位，key 是 `<包名>#<行 id>`，与扩展 id 不同，
+ *     所以那一处由注册处用一个薄适配器转接，不在这里登记第二份）
+ *
+ * 这是**客户端**注册表（不是 cordis service）：扩展的服务端对象活在宿主进程里，
+ * 面板是浏览器里的组件，两边不在一个地址空间。模块级 Map 够用 —— 面板在单个
+ * client bundle 里，模块只有一份实例。
+ */
+import type { FC } from 'react'
+
+/** 扩展 id → 它的详情面板。 */
+const panels = new Map<string, FC>()
+
+/**
+ * 给某个扩展登记详情面板。同 id 后登记的**顶掉**先登记的（热重载/重复 apply
+ * 时的常见情形）；返回清理函数。
+ *
+ * @param extId - 扩展 id（`router.ext` 表里的键）
+ * @param panel - 详情面板组件。**不收 props**：面板的渲染点只有详情页一处
+ *   （`ExtDetail`），没有第二种调用形状。
+ */
+export function registerExtPanel(extId: string, panel: FC): () => void {
+  panels.set(extId, panel)
+  return () => {
+    if (panels.get(extId) === panel) panels.delete(extId)
+  }
+}
+
+/** 某个扩展是否自带详情面板。 */
+export function hasExtPanel(extId: string): boolean {
+  return panels.has(extId)
+}
+
+/** 取某个扩展的详情面板；没登记返回 undefined（调用方据此走通用只读页）。 */
+export function extPanel(extId: string): FC | undefined {
+  return panels.get(extId)
+}