dsh-router-core 0.3.21 → 0.4.1

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>
+  )
+}

package/src/client/LastHitDock.tsx

@@ -0,0 +1,141 @@
+/**
+ * 输入框上方的「最近命中」徽章 —— 走 DSH 官方 `conversation.input.dock` 座位
+ * （scope: session，见 dsh-client-ui-conversation 的 slots 契约）。
+ *
+ * 为什么用 slot 而不是认领 DOM：
+ *   - slot 的 session scope 会**注入 `sessionId`**（SessionStandardProps），
+ *     于是能按当前会话取「最近命中」—— team 多会话下不会显示别的成员；
+ *   - slot 是稳定契约，宿主 hash 类名（如之前的 `.JObwrW_root`）随版本会变。
+ * 参照实现：@deepseek-ai/dsh-client-ui-goal 的 GoalDock 同挂这个座位，
+ * 组件 props 由宿主注入，`inject(sessionId)` 拿会话身份。
+ *
+ * 数据源：核心 `/router/api/last-hit?session=`（按会话取一条轻记录）。
+ */
+import { useEffect, useRef, useState } from 'react'
+import { ROUTER_API_BASE } from '../shared.ts'
+import { getLastHit, subscribeLastHit, type LastHit } from './last-hit-store.ts'
+
+/** 路由字形（纯 currentColor 描边，14px 与相邻控件对齐）。 */
+const ICON = (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+    <circle cx="5" cy="5" r="2.4" />
+    <circle cx="19" cy="5" r="2.4" />
+    <circle cx="12" cy="19" r="2.4" />
+    <path d="M7.4 5h9.2" />
+    <path d="M5 7.4v6.2c0 2.6 3 3.4 4.6 3.8" />
+    <path d="M19 7.4v6.2c0 2.6-3 3.4-4.6 3.8" />
+  </svg>
+)
+
+/** 账号名：别名 → uid → 「无连接」。 */
+function connectionName(hit: LastHit): string {
+  const name = hit.account !== undefined && hit.account !== '' ? hit.account : hit.uid
+  return name === '' ? '无连接' : name
+}
+
+/**
+ * 积分展示。**未知就是未知**：`-1` / 缺省一律显示「未知」，
+ * 绝不编一个 0 —— 沿用 store 那条「不用 0 冒充未知」的纪律。
+ */
+function creditsText(hit: LastHit): string {
+  return hit.credits === undefined || hit.credits < 0 ? '未知' : `${Math.round(hit.credits)}`
+}
+
+/** 模型短名（去掉 `prefix/`；前缀在「服务商」行已单独列出）。 */
+function modelShort(hit: LastHit): string {
+  const full = hit.model === '' ? hit.supplier : hit.model
+  const slash = full.lastIndexOf('/')
+  return slash > 0 ? full.slice(slash + 1) : full
+}
+
+/** 宿主注入的 props（只声明用到的）。 */
+interface LastHitDockProps {
+  /** 宿主注入的会话身份；宿主未注入时为 undefined。 */
+  sessionId?: string
+}
+
+/**
+ * 输入框上方的「最近命中」徽章：图标 + 模型短名；点击展开连接/积分卡片。
+ *
+ * @param props 宿主注入的会话身份
+ */
+export function LastHitDock({ sessionId }: LastHitDockProps): JSX.Element {
+  const [hit, setHit] = useState<LastHit | null>(() => getLastHit(sessionId))
+  const [open, setOpen] = useState(false)
+  const rootRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    // 诊断：确认 slot 真挂上了、以及宿主是否注入了 sessionId
+    console.info('[dsh-router] last-hit dock mounted, sessionId =', sessionId)
+    return subscribeLastHit(sessionId, setHit)
+  }, [sessionId])
+
+  // 点外部收起：对齐宿主原生 popover 的关闭语义（primitives.Menu /
+  // useDismissOnOutsidePointer）——document 级 `pointerdown` 冒泡相位（早于
+  // click，避免"先选中后关闭"）、根节点含自身则忽略；另补 Escape 关闭。
+  useEffect(() => {
+    if (!open) return
+    const onPointerDown = (e: PointerEvent): void => {
+      if (e.target instanceof Node && rootRef.current?.contains(e.target) === true) return
+      setOpen(false)
+    }
+    const onKeyDown = (e: KeyboardEvent): void => {
+      if (e.key === 'Escape') setOpen(false)
+    }
+    document.addEventListener('pointerdown', onPointerDown)
+    document.addEventListener('keydown', onKeyDown)
+    return () => {
+      document.removeEventListener('pointerdown', onPointerDown)
+      document.removeEventListener('keydown', onKeyDown)
+    }
+  }, [open])
+
+  // 无数据时**仍渲染占位**（不返回 null）：否则「挂载成功但暂无记录」看起来
+  // 就像"整个控件不见了"，无法与"根本没挂上"区分。
+  const rows: Array<[string, string]> = hit === null
+    ? []
+    : [
+        ['服务商', hit.supplier],
+        ['模型', modelShort(hit)],
+        ['连接', connectionName(hit)],
+        ['积分', creditsText(hit)],
+      ]
+
+  return (
+    <div className="dshr-lastHit" ref={rootRef}>
+      <button
+        type="button"
+        className={`dshr-lastHit-btn${hit !== null && !hit.ok ? ' dshr-lastHit-fail' : ''}`}
+        aria-label="最近一次命中"
+        aria-expanded={open}
+        title={hit === null ? '暂无命中记录' : `${hit.model === '' ? hit.supplier : hit.model} · ${connectionName(hit)}`}
+        onClick={() => setOpen((v) => !v)}
+      >
+        {ICON}
+        <span className="dshr-lastHit-label">{hit === null ? '暂无' : modelShort(hit)}</span>
+      </button>
+      {open && (
+        <div className="dshr-lastHit-card">
+          <div className="dshr-lastHit-title">
+            <span className="dshr-lastHit-titleLabel">
+              {ICON}
+              <span>路由</span>
+            </span>
+            <span className="dshr-lastHit-titleValue" title={hit?.requested}>
+              {hit === null || hit.requested === '' ? '—' : hit.requested}
+            </span>
+          </div>
+          <div className="dshr-lastHit-titleRule" />
+          {rows.length === 0
+            ? <div className="dshr-lastHit-row"><span className="dshr-lastHit-key">暂无命中记录</span></div>
+            : rows.map(([k, v]) => (
+                <div key={k} className="dshr-lastHit-row">
+                  <span className="dshr-lastHit-key">{k}</span>
+                  <span className="dshr-lastHit-val">{v}</span>
+                </div>
+              ))}
+        </div>
+      )}
+    </div>
+  )
+}