dsh-router-core 0.4.0 → 0.4.2

package/src/client/ExtDetail.tsx

@@ -1,11 +1,18 @@
 /**
  * 扩展详情页 —— 从设置 → 路由 → 扩展 的卡片点进来。
  *
- * 布局同供应商详情：返回链接 + 图标 + 名称/副行，头部右侧是启用开关；下面跟扩展说明
- * 卡与未就绪横幅。有 `api`() 支持的自定义扩展可在未来按需加独立面板，此处不内置任何
- * 具体扩展的专属视图。
+ * **只读：开关不在这一层。** 启停的唯一入口是官方插件页（设置 → 插件 →
+ * dsh-router-core 详情页的「路由组件」一节），那里直接调核心的
+ * `PATCH /router/api/ext`，自检与持久化都由核心裁决。同一件事只留一个开关，
+ * 否则两处状态各说各话。
+ *
+ * 列表页只列**已启用**的扩展（关闭的连卡片都不出现），所以这里也不必再显示
+ * 「已启用/未启用」——那行字只能是常量。布局同供应商详情：返回链接 + 图标 +
+ * 名称/副行，下面跟扩展说明卡与未就绪横幅。有 `api()` 支持的自定义扩展可在未来
+ * 按需加独立面板，此处不内置任何具体扩展的专属视图。
  */
 import type { RouterExtItem } from '../shared.ts'
+import { extPanel } from './ext-panels.ts'
 
 function Icon({ d, size = 18 }: { d: string; size?: number }): JSX.Element {
   return (
@@ -23,11 +30,13 @@ const I = {
 interface ExtDetailProps {
   item: RouterExtItem
   onBack: () => void
-  /** 开关切换（由列表页持有状态与 PATCH；这里只做触发）。 */
-  onToggle: (item: RouterExtItem, value: boolean) => void
 }
 
-export function ExtDetail({ item, onBack, onToggle }: ExtDetailProps): JSX.Element {
+export function ExtDetail({ item, onBack }: ExtDetailProps): JSX.Element {
+  // 扩展**自带**详情面板时用它（插件自检就是这么做的：选供应商/模型/连接 + 跑测试）。
+  // 没有就退回下面这张通用只读页 —— 保留返回链接与标题，导航形状与有没有自定义
+  // 面板无关，用户点进去的预期是稳定的。
+  const Custom = extPanel(item.id)
   return (
     <div className="dshr-tabBody">
       {/* Header（同供应商详情：返回链接 + 图标 + 名称/副行） */}
@@ -54,27 +63,15 @@ export function ExtDetail({ item, onBack, onToggle }: ExtDetailProps): JSX.Eleme
             <h1 className="dshr-providerName">{item.name}</h1>
             <p className="dshr-providerCount">
               <span className="dshr-mono">{item.id}</span>
-              {item.enabled ? ' · 已启用' : ' · 未启用'}
               {item.ready === false ? ' · 未就绪' : ''}
             </p>
           </div>
-          {/* 开关放在标题行右侧（同供应商详情的编辑按钮位） */}
-          <button
-            type="button"
-            className={`dshr-toggle dshr-extDetailToggle ${item.enabled ? 'dshr-toggle-on' : ''}`}
-            role="switch"
-            aria-checked={!!item.enabled}
-            disabled={item.ready === false && !item.enabled}
-            onClick={() => void onToggle(item, !item.enabled)}
-            title={item.ready === false && !item.enabled
-              ? '当前不可用,无法开启'
-              : item.enabled ? `关闭 ${item.name}` : `开启 ${item.name}`}
-          >
-            <span className="dshr-toggleKnob" />
-          </button>
         </div>
       </div>
 
+      {/* 扩展自带的面板（注册表里没有就落回下面这两块通用内容） */}
+      {Custom !== undefined ? <Custom /> : (
+        <>
       {/* 扩展说明 */}
       {item.description !== undefined && item.description !== '' && (
         <section className="dshr-card">
@@ -89,6 +86,8 @@ export function ExtDetail({ item, onBack, onToggle }: ExtDetailProps): JSX.Eleme
           <span>{item.detail !== undefined && item.detail !== '' ? item.detail : '当前不可用'}</span>
         </div>
       )}
+        </>
+      )}
     </div>
   )
-}
+}

package/src/client/ExtTab.tsx

@@ -1,12 +1,16 @@
 /**
- * 扩展 (Ext) 页 —— 列出所有注册进 `router.ext` 的扩展插件,每个一个开关。
+ * 扩展 (Ext) 页 —— 列出**已启用**的扩展插件，只读。
  *
- * 数据来自 `/router/api/ext`:核心把自己存的开关(`ext.json`)+ 扩展器报的
- * 运行时事实(`ready` / `detail`)合并后给面板。扩展器只实现具体能力(如 RTK),
- * 开关与渲染都在核心。
+ * 数据来自 `/router/api/ext`：核心把自己存的开关（`ext.json`）+ 扩展器报的
+ * 运行时事实（`ready` / `detail`）合并后给面板。扩展器只实现具体能力（如 RTK）。
  *
- * 布局贴近 EndpointTab 的「Require API key」开关行:每个扩展器一张卡片。
- * 未装任何扩展 → 空状态提示。
+ * 两个刻意的形状（与「开关在官方插件页」这一决定配套）：
+ *   1. **只列已启用的** —— 关闭的扩展连卡片都不出现。这里是「正在生效的东西」的
+ *      展台，不是配置页；要去改开关，去设置 → 插件 → dsh-router-core 详情页的
+ *      「路由组件」一节。
+ *   2. **本页不发 PATCH** —— 启停只有一个入口，避免两处状态各说各话。
+ *
+ * 未装任何扩展，或装了但都没启用 → 同一条空状态提示。
  */
 import { useEffect, useRef, useState } from 'react'
 import { ROUTER_API_BASE, type RouterExtItem, type RouterExtResponse } from '../shared.ts'
@@ -21,8 +25,8 @@ function Icon({ d, size = 18 }: { d: string; size?: number }): JSX.Element {
 }
 
 const I = {
-  bolt: 'M13 2L4 14h6l-1 8 9-12h-6l1-8z',
-  puzzle: 'M4 7h3a2 2 0 0 1 4 0h5a1 1 0 0 1 1 1v4a2 2 0 0 0 0 4v4H8v-3a2 2 0 0 1 0-4H4V7z',
+  bolt: 'M13 2L4 14h6l-1 8 9-12h-6z',
+  puzzle: 'M4 7h3a2 2 0 0 1 4 0h5a2 2 0 0 1 2 1v4a2 2 0 0 0 0 4v4H8v-3a2 2 0 0 1 0-4H4V7z',
 }
 
 export function ExtTab(): JSX.Element {
@@ -55,36 +59,13 @@ export function ExtTab(): JSX.Element {
     }
   }
 
-  const toggle = async (item: RouterExtItem, value: boolean): Promise<void> => {
-    // 乐观更新
-    setItems(prev => prev.map(i => i.id === item.id ? { ...i, enabled: value } : i))
-    setError('')
-    try {
-      const response = await fetch(`${ROUTER_API_BASE}/ext`, {
-        method: 'PATCH',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ id: item.id, enabled: value }),
-        cache: 'no-store',
-      })
-      const data = await response.json() as RouterExtResponse
-      if (mounted.current && data.enhancers) {
-        setItems(data.enhancers)
-      } else if (mounted.current && !data.ok) {
-        setError(data.error ?? '切换失败')
-        setItems(prev => prev.map(i => i.id === item.id ? { ...i, enabled: !value } : i))
-      }
-    } catch (err) {
-      if (mounted.current) {
-        setError((err as Error).message)
-        setItems(prev => prev.map(i => i.id === item.id ? { ...i, enabled: !value } : i))
-      }
-    }
-  }
+  // 只展已启用的。`enabled` 缺失按未启用读（与插件页同一口径：没拿到的事实不当真）。
+  const shown = items.filter(item => item.enabled === true)
 
-  // 打开详情视图：用 live item（否则详情里的开关状态不会随列表更新）。
-  const selected = selectedId !== null ? items.find((i) => i.id === selectedId) ?? null : null
+  // 打开详情视图：用 live item（详情里显示的是加载那一刻的运行时事实）。
+  const selected = selectedId !== null ? shown.find((i) => i.id === selectedId) ?? null : null
   if (selected !== null) {
-    return <ExtDetail item={selected} onBack={() => setSelectedId(null)} onToggle={toggle} />
+    return <ExtDetail item={selected} onBack={() => setSelectedId(null)} />
   }
 
   return (
@@ -95,17 +76,18 @@ export function ExtTab(): JSX.Element {
 
       {!loaded ? (
         <div className="dshr-empty">加载中…</div>
-      ) : items.length === 0 ? (
+      ) : shown.length === 0 ? (
         <div className="dshr-keyEmpty">
           <span className="dshr-keyEmptyIcon"><Icon d={I.puzzle} size={30} /></span>
-          <p className="dshr-keyEmptyTitle">暂无扩展</p>
+          <p className="dshr-keyEmptyTitle">暂无启用的扩展</p>
           <p className="dshr-keyEmptyDesc">
-            安装扩展插件(如 <code>dsh-router-ext-watch</code>)后,这里会出现开关
+            开关在 <strong>设置 → 插件 → dsh-router-core</strong> 的「路由组件」一节；
+            启用后这里会列出它
           </p>
         </div>
       ) : (
         <div className="dshr-supplierGrid">
-          {items.map(item => {
+          {shown.map(item => {
             const notReady = item.ready === false
             return (
               <section key={item.id} className="dshr-supplierCard" onClick={() => setSelectedId(item.id)}>
@@ -130,7 +112,8 @@ export function ExtTab(): JSX.Element {
                 )}
 
                 <div className="dshr-supplierMeta">
-                  <span className="dshr-muted">{item.enabled ? '已启用' : '未启用'}</span>
+                  {/* 描述留在详情页（卡片放不下）；这一行放稳定的 id，够短不会撑破布局 */}
+                  <span className="dshr-mono dshr-muted">{item.id}</span>
                   <span className="dshr-chevron">›</span>
                 </div>
               </section>
@@ -140,4 +123,4 @@ export function ExtTab(): JSX.Element {
       )}
     </div>
   )
-}
+}

package/src/client/ExtTestPanel.tsx

@@ -0,0 +1,392 @@
+/**
+ * 插件自检面板 —— 扩展「插件自检」(`dsh-router-ext-test` / 扩展 id `test`) 的详情内容。
+ *
+ * **入口只有一处**：设置 → 路由 → 扩展 → 点开「插件自检」那张卡片（`ExtDetail` 查
+ * `ext-panels.ts` 的注册表拿到本组件）。
+ *
+ * 刻意**不给插件页那一行也挂一个详情页**：那一行的宿主行开关已经能开/关它，再点进去
+ * 看同一块面板就是同一个东西有两个入口 —— 与「内置扩展不在自绘节里重复列」同理。
+ * 插件页那一行只负责开关。
+ *
+ * 视觉上照着宿主的插件页写（`--dsw-alias-*` 那套 token），**不复用设置页的
+ * `dshr-*` 组件样式**：那些样式依赖 `--rs-*` 变量，而那套变量只定义在
+ * `.dshr-settings` / `.dshr-shell` 下，插件页不在其祖先里（未定义的 `var()` 会让
+ * 整条声明失效）。按钮直接用宿主的 `Button` 原语 —— 配色由原语自己的 token 家族
+ * 决定，不必在这里猜「主色底上该配什么字色」。
+ */
+import { useEffect, useState } from 'react'
+import { Button } from '@deepseek-ai/dsh-client-ui-primitives'
+import { ROUTER_API_BASE, type RouterAccount, type RouterHealthResponse } from '../shared.ts'
+import { modelChoice, type ModelRow } from './model-choice.ts'
+import type { ProbeReport } from '../suppliers/probe.ts'
+
+/** 一次测试的结果。`ok` 为 false 时 `error` 是核心给的真实原因（上游响应 / chatOnce message）。 */
+interface TestResult {
+  ok: boolean
+  error?: string
+  /** 实际测的是哪个连接（空串 = 池内任选，与面板「测试」按钮同义）。 */
+  uid: string
+  /** 测的时候选的是哪三样，回显出来 —— 一条「通过」必须可归因。 */
+  supplier: string
+  model: string
+}
+
+/** 结果区的一个状态。`network` 是请求本身失败，与「上游拒了」分开。 */
+type Notice =
+  | { tone: 'ok'; result: TestResult }
+  | { tone: 'fail'; result: TestResult }
+  | { tone: 'network'; text: string }
+
+/** 每个契约成员状态的字形（颜色由 data-state 给）。 */
+/** 模型启用状态那一行属于核心侧，没在 members 里，状态由「拿不拿得到」决定。 */
+function coreModelsState(report: ProbeReport): ProbeReport['members'][number]['state'] {
+  return report.core.models.total === null ? 'unverified' : 'ok'
+}
+
+const MEMBER_MARK: Record<ProbeReport['members'][number]['state'], string> = {
+  ok: '✓',
+  fail: '✕',
+  absent: '–',
+  unverified: '⊘',
+}
+
+const TONE_ICON: Record<Notice['tone'], string> = {
+  ok: 'M20 6L9 17l-5-5',
+  fail: 'M18 6L6 18M6 6l12 12',
+  network: 'M12 9v4m0 4h.01M10.3 3.9L2 18a2 2 0 003 2h16a2 2 0 002-2L13.7 3.9a2 2 0 00-3.4 0z',
+}
+
+function Glyph({ d }: { d: string }): JSX.Element {
+  return (
+    <svg className="dshr-compNoticeIcon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"
+      strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d={d} />
+    </svg>
+  )
+}
+
+/** 三个下拉里的一栏：标题行（可带右侧小注）+ 控件。`emptyHint` 在没得选时说明「为什么没有」。 */
+function Picker(props: {
+  label: string
+  /** 标题右侧的小注（这一栏的用法要点，比塞进顶部那段长文字更容易被读到）。 */
+  note?: string
+  value: string
+  options: Array<{ value: string; label: string }>
+  emptyHint: string
+  disabled?: boolean
+  onChange: (value: string) => void
+}): JSX.Element {
+  const empty = props.options.length === 0
+  return (
+    <div className="dshr-compField">
+      <div className="dshr-compFieldHead">
+        <label className="dshr-compFieldLabel">{props.label}</label>
+        {props.note !== undefined && <span className="dshr-compFieldNote">{props.note}</span>}
+      </div>
+      <select
+        className="dshr-compSelect"
+        value={props.value}
+        disabled={props.disabled === true || empty}
+        aria-label={props.label}
+        onChange={(e) => { props.onChange(e.target.value) }}
+      >
+        {empty
+          ? <option value="">{props.emptyHint}</option>
+          : <>
+            <option value="">请选择</option>
+            {props.options.map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}
+          </>}
+      </select>
+    </div>
+  )
+}
+
+export function ExtTestPanel(): JSX.Element {
+  const [suppliers, setSuppliers] = useState<NonNullable<RouterHealthResponse['suppliers']>>([])
+  const [accounts, setAccounts] = useState<RouterAccount[]>([])
+  const [models, setModels] = useState<{ ids: string[]; empty?: 'none' | 'all-disabled' }>({ ids: [] })
+  const [supplierId, setSupplierId] = useState('')
+  const [modelId, setModelId] = useState('')
+  const [uid, setUid] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [notice, setNotice] = useState<Notice | null>(null)
+  const [loaded, setLoaded] = useState(false)
+  // 契约体检：只针对**外部供应商插件**（内置供应商随核心分发，没有独立插件可体检）
+  const [pluginId, setPluginId] = useState('')
+  const [probing, setProbing] = useState(false)
+  const [report, setReport] = useState<ProbeReport | null>(null)
+  const [probeError, setProbeError] = useState('')
+
+  // 供应商与连接各读一次：/health 给供应商（开着的那批，与面板一致），
+  // /status 给账号（uid + 昵称 + 冷却状态）。
+  useEffect(() => {
+    let live = true
+    void (async () => {
+      try {
+        const [health, status] = await Promise.all([
+          fetch(`${ROUTER_API_BASE}/health`, { cache: 'no-store' }).then((r) => r.json() as Promise<RouterHealthResponse>),
+          fetch(`${ROUTER_API_BASE}/status`, { cache: 'no-store' }).then((r) => r.json() as Promise<{ ok: boolean; accounts?: RouterAccount[] }>),
+        ])
+        if (!live) return
+        setSuppliers((health.suppliers ?? []).filter((s) => s.enabled !== false))
+        setAccounts(status.ok ? (status.accounts ?? []) : [])
+      } catch (err) {
+        if (live) setNotice({ tone: 'network', text: (err as Error).message })
+      } finally {
+        if (live) setLoaded(true)
+      }
+    })()
+    return () => { live = false }
+  }, [])
+
+  // 换供应商 → 重拉模型、清掉模型/连接选择与旧结果（旧结果对新选择没有意义，
+  // 留着会被误读成「刚测过这个」）。
+  useEffect(() => {
+    setModelId('')
+    setUid('')
+    setNotice(null)
+    if (supplierId === '') { setModels({ ids: [] }); return }
+    let live = true
+    void (async () => {
+      try {
+        const data = await fetch(`${ROUTER_API_BASE}/suppliers/${encodeURIComponent(supplierId)}/models`, { cache: 'no-store' })
+          .then((r) => r.json() as Promise<{ ok: boolean; models?: ModelRow[] }>)
+        // 端点给的是**全部**模型（含用户停用的），这里只取可用的 —— 见 model-choice.ts
+        if (live) setModels(data.ok ? modelChoice(data.models ?? []) : { ids: [] })
+      } catch {
+        if (live) setModels({ ids: [] })
+      }
+    })()
+    return () => { live = false }
+  }, [supplierId])
+
+  // 外部供应商插件 = source 为 external 的那些（内置随核心分发，不进这个下拉）
+  const pluginSuppliers = suppliers.filter((x) => x.source === 'external')
+
+  const runProbe = async (): Promise<void> => {
+    if (pluginId === '' || probing) return
+    setProbing(true)
+    setProbeError('')
+    setReport(null)
+    try {
+      const response = await fetch(`${ROUTER_API_BASE}/suppliers/${encodeURIComponent(pluginId)}/probe`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({}),
+        cache: 'no-store',
+      })
+      const data = await response.json() as { ok: boolean; error?: string; report?: ProbeReport }
+      if (data.ok && data.report !== undefined) setReport(data.report)
+      else setProbeError(data.error ?? '体检失败')
+    } catch (err) {
+      setProbeError((err as Error).message)
+    } finally {
+      setProbing(false)
+    }
+  }
+
+  const links = accounts.filter((a) => a.supplier === supplierId)
+  const runnable = supplierId !== '' && modelId !== ''
+  const supplierName = suppliers.find((s) => s.id === supplierId)?.name ?? supplierId
+
+  const run = async (): Promise<void> => {
+    if (!runnable || busy) return
+    setBusy(true)
+    setNotice(null)
+    try {
+      const response = await fetch(`${ROUTER_API_BASE}/suppliers/${encodeURIComponent(supplierId)}/models/test`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        // uid 留空 = 池内任选可用号（与面板「测试」按钮同义）；选了 = 只测它。
+        body: JSON.stringify({ id: modelId, uid }),
+        cache: 'no-store',
+      })
+      const data = await response.json() as { ok: boolean; error?: string }
+      const result: TestResult = {
+        ok: data.ok,
+        uid,
+        supplier: supplierName,
+        model: modelId,
+        ...(data.error === undefined ? {} : { error: data.error }),
+      }
+      setNotice({ tone: data.ok ? 'ok' : 'fail', result })
+    } catch (err) {
+      setNotice({ tone: 'network', text: (err as Error).message })
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <div className="dshr-tabBody dshr-comp">
+      {/* 两节各自有标题：两个按钮都叫「测试」，没有标题就分不清点的是哪一个 */}
+      <div className="dshr-compHead">
+        <h4 className="dshr-compSectionTitle">连接测试</h4>
+        <span className="dshr-compSectionNote">选供应商 / 模型 / 连接</span>
+      </div>
+
+      <div className="dshr-compForm">
+        <Picker
+          label="供应商"
+          value={supplierId}
+          options={suppliers.map((s) => ({ value: s.id, label: s.name }))}
+          emptyHint={loaded ? '没有已启用的供应商' : '加载中…'}
+          onChange={setSupplierId}
+        />
+        <Picker
+          label="模型"
+          note="仅可用"
+          value={modelId}
+          options={models.ids.map((id) => ({ value: id, label: id }))}
+          emptyHint={supplierId === ''
+            ? '先选供应商'
+            : models.empty === 'all-disabled'
+              ? '模型都被停用了（在供应商详情里开启）'
+              : models.empty === 'none' ? '没有模型（可先在供应商详情里拉取）' : '请选择'}
+          disabled={supplierId === ''}
+          onChange={(v) => { setModelId(v); setNotice(null) }}
+        />
+        <Picker
+          label="连接"
+          note="留空 = 池内任选"
+          value={uid}
+          options={links.map((a) => ({
+            value: a.uid,
+            label: `${a.nickname ?? a.uid}${a.cooling ? '（冷却中）' : ''}`,
+          }))}
+          emptyHint={supplierId === '' ? '先选供应商' : '没有连接（留空则不指定）'}
+          disabled={supplierId === ''}
+          onChange={(v) => { setUid(v); setNotice(null) }}
+        />
+      </div>
+
+      <div className="dshr-compActions dshr-compBtnRow">
+        <Button
+          variant="primary"
+          size="md"
+          disabled={!runnable || busy}
+          onClick={() => { void run() }}
+        >
+          {busy ? '测试中…' : '测试'}
+        </Button>
+        {!runnable && <span className="dshr-compHint">先选供应商与模型</span>}
+      </div>
+
+      {notice !== null && (
+        <div className="dshr-compNotice" data-tone={notice.tone} role="status">
+          <Glyph d={TONE_ICON[notice.tone]} />
+          <div className="dshr-compNoticeBody">
+            {notice.tone === 'network' ? (
+              <>
+                <div className="dshr-compNoticeTitle">请求失败</div>
+                <div className="dshr-compNoticeText">{notice.text}</div>
+              </>
+            ) : (
+              <>
+                <div className="dshr-compNoticeTitle">
+                  {notice.tone === 'ok' ? '测试通过' : '测试失败'}
+                </div>
+                <div className="dshr-compNoticeText">
+                  {notice.tone === 'ok'
+                    ? '这个连接能正常访问该模型。'
+                    : (notice.result.error ?? '上游没有给出原因')}
+                </div>
+                {/* 回显测的是哪三样：一条「通过」如果不带对象，就是没法归因的一串绿字。 */}
+                <div className="dshr-compNoticeMeta">
+                  {notice.result.supplier} · {notice.result.model} · {notice.result.uid === '' ? '池内任选' : notice.result.uid}
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* ---- 契约体检：外部供应商插件的每个契约成员 ---- */}
+      <div className="dshr-compSection">
+        <div className="dshr-compHead">
+          <h4 className="dshr-compSectionTitle">插件测试</h4>
+          <span className="dshr-compSectionNote">外部供应商插件</span>
+        </div>
+        <p className="dshr-compIntro">前提：连接池里先有一个可用 token，剩下交给它。</p>
+        <div className="dshr-compProbeRow">
+          <Picker
+            label="供应商插件"
+            value={pluginId}
+            options={pluginSuppliers.map((x) => ({ value: x.id, label: x.name }))}
+            emptyHint={pluginSuppliers.length === 0 ? '没有装外部供应商插件' : '请选择'}
+            onChange={(v) => { setPluginId(v); setReport(null); setProbeError('') }}
+          />
+          <div className="dshr-compProbeBtn dshr-compBtnRow">
+            <Button variant="primary" size="md" disabled={pluginId === '' || probing} onClick={() => { void runProbe() }}>
+              {probing ? '测试中…' : '测试'}
+            </Button>
+          </div>
+        </div>
+
+        {probeError !== '' && (
+          <div className="dshr-compNotice" data-tone="network" role="status">
+            <Glyph d={TONE_ICON.network} />
+            <div className="dshr-compNoticeBody">
+              <div className="dshr-compNoticeTitle">体检失败</div>
+              <div className="dshr-compNoticeText">{probeError}</div>
+            </div>
+          </div>
+        )}
+
+        {report !== null && (
+          <div className="dshr-compReport">
+            <div className="dshr-compReportHead">
+              <span className="dshr-compReportName">{report.name}</span>
+              {/* 只报数字，不下判词。合格与否是判断，应当由看报告的人自己做 ——
+                  工具给数字和逐条事实就够，替人定性既越位，也会在判据本身有偏差
+                  时把话说死。 */}
+              <span className="dshr-compReportSum">
+                共 {report.summary.total} 个 · 实现 {report.summary.implemented} · 实跑 {report.summary.ran} · 通过 {report.summary.ok} · 失败 {report.summary.fail} · 未验 {report.summary.unverified} · 未实现 {report.summary.absent}
+                {report.summary.bulk === 'fail' ? ' · 全部启用/禁用有问题' : report.summary.bulk === 'ok' ? ' · 全部启用/禁用通过' : ''}
+              </span>
+            </div>
+            <ul className="dshr-compMembers">
+              {/* 核心侧那两项与契约成员**同构**（同一个列表、同一种行），只是它们不属于
+                  插件契约（是核心代劳）。原先给它们单画了个带框的区块，反而让它们看着
+                  像是另一个模块、比真问题还显眼。 */}
+              <li className="dshr-compMember" data-state={coreModelsState(report)}>
+                <span className="dshr-compMemberState" aria-hidden="true">{MEMBER_MARK[coreModelsState(report)]}</span>
+                <span className="dshr-compMemberName">
+                  模型启用状态
+                  <code className="dshr-compMemberKey">core</code>
+                </span>
+                <span className="dshr-compMemberDetail">
+                  {report.core.models.total === null
+                    ? (report.core.models.note ?? '拿不到')
+                    : `共 ${report.core.models.total} 个 · 启用 ${report.core.models.enabled} · 停用 ${report.core.models.disabled}`}
+                </span>
+              </li>
+              {report.core.operations.map((o) => (
+                <li key={o.key} className="dshr-compMember" data-state={o.ran === false ? 'unverified' : o.ok === true ? 'ok' : 'fail'}>
+                  <span className="dshr-compMemberState" aria-hidden="true">
+                    {MEMBER_MARK[o.ran === false ? 'unverified' : o.ok === true ? 'ok' : 'fail']}
+                  </span>
+                  <span className="dshr-compMemberName">
+                    {o.label}
+                    <code className="dshr-compMemberKey">core</code>
+                  </span>
+                  <span className="dshr-compMemberDetail">{o.detail}</span>
+                </li>
+              ))}
+              {report.members.map((m) => (
+                <li key={m.key} className="dshr-compMember" data-state={m.state}>
+                  <span className="dshr-compMemberState" aria-hidden="true">{MEMBER_MARK[m.state]}</span>
+                  <span className="dshr-compMemberName">
+                    {m.label}
+                    <code className="dshr-compMemberKey">{m.key}</code>
+                  </span>
+                  <span className="dshr-compMemberDetail">{m.detail ?? ''}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}