dsh-router-core 0.3.0 → 0.3.2

package/lib/types/shared.d.ts

@@ -11,7 +11,7 @@ export declare const ROUTER_VIEW_SELECTOR = "[data-dsh-router-view]";
 /** Active-state attribute on <html> that shows the panel. */
 export declare const ROUTER_ACTIVE_ATTR = "data-dsh-router-active";
 /** The panel's visible title (also the sidebar entry label). */
-export declare const ROUTER_TITLE = "\u8DEF\u7531\u7CFB\u7EDF";
+export declare const ROUTER_TITLE = "\u8DEF\u7531";
 /** Same-origin API base the client panel fetches (host half serves it). */
 export declare const ROUTER_API_BASE = "/router/api";
 /** Bearer key env / credential reference protecting /v1/*. */
@@ -44,6 +44,22 @@ export interface RouterModelsResponse {
         context_length?: number;
     }>;
 }
+/** 一键签到：单个供应商的汇总结果（`/suppliers/:id/checkin` 的响应体）。 */
+export interface RouterCheckinResponse {
+    ok: boolean;
+    error?: string;
+    total: number;
+    /** 真正 claim 成功的链接数。 */
+    succeeded: number;
+    /** 今日已签到的链接数（幂等成功）。 */
+    already: number;
+    results?: Array<{
+        uid: string;
+        ok: boolean;
+        status?: string;
+        message?: string;
+    }>;
+}
 /** `/router/api/health` response. */
 export interface RouterHealthResponse {
     ok: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-router-core",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "DSH plugin: a simplified 9router (AI routing gateway). Adds a 路由系统 (Routing System) sidebar entry beside 记忆系统; the panel shows suppliers, account pool, combos, and endpoint/API keys.",
   "type": "module",
   "repository": {
@@ -33,7 +33,10 @@
       "inject": [
         "react",
         "react-dom",
-        "cordis"
+        "cordis",
+        "@deepseek-ai/dsh-client-runtime",
+        "@deepseek-ai/dsh-client-ui-slots",
+        "@deepseek-ai/dsh-client-locale"
       ],
       "platform": "web"
     }
@@ -45,20 +48,25 @@
     "lib/types/**/*.d.ts",
     "src",
     "cordis.patch.yml",
+    "docs",
     "README.md",
     "LICENSE"
   ],
   "scripts": {
-    "build": "rm -rf lib && tsc -p tsconfig.build.json && tsdown && npm run build:client",
+    "build": "node scripts/check-css.mjs && rm -rf lib && tsc -p tsconfig.build.json && tsdown && npm run build:client",
     "build:client": "DSH_CLIENT_ID=dsh-router DSH_CLIENT_FILE=client.js vite build -c client/vite.config.ts && DSH_CLIENT_ID=dsh-external/dsh-router DSH_CLIENT_FILE=client-registry.js vite build -c client/vite.config.ts",
     "typecheck": "tsc --noEmit",
     "test": "node --test \"src/**/*.test.ts\"",
     "bundle": "tsdown",
-    "watch": "tsdown --watch"
+    "watch": "tsdown --watch",
+    "check:css": "node scripts/check-css.mjs"
   },
   "license": "MIT",
   "peerDependencies": {
     "@deepseek-ai/cordis": "^4.0.1",
+    "@deepseek-ai/dsh-client-locale": "*",
+    "@deepseek-ai/dsh-client-runtime": "*",
+    "@deepseek-ai/dsh-client-ui-slots": "*",
     "@deepseek-ai/dsh-llm": "^0.1.1-rc.2",
     "cordis": "^4.0.0-rc.7",
     "react": "^18.2.0",
@@ -67,6 +75,15 @@
   "peerDependenciesMeta": {
     "cordis": {
       "optional": true
+    },
+    "@deepseek-ai/dsh-client-locale": {
+      "optional": true
+    },
+    "@deepseek-ai/dsh-client-runtime": {
+      "optional": true
+    },
+    "@deepseek-ai/dsh-client-ui-slots": {
+      "optional": true
     }
   },
   "devDependencies": {

package/src/client/CheckinCard.tsx

@@ -0,0 +1,180 @@
+/**
+ * 概览的「签到」汇总卡：一键签到所有支持签到的供应商 + 显示今天点过没。
+ *
+ * **「今日已签到」的口径（天花板，刻意不撒谎）**：这里只知道「今天在这个浏览器
+ * 点过这个按钮没」，存在 localStorage，**不知道上游是不是真的签上了**。真凭据是
+ * 上游的 `checked_in`，但那得逐个链接查（traywork 侧实测：积分不可信、
+ * 只有 checked_in 算数），而当前契约里没有「查签到状态」这个能力。
+ * 所以卡片文案是「今日已点」而不是「已签到」，悬停说明里写清这一点。
+ *
+ * 要真状态的升级路径：给 supplier 契约加 `checkinStatus?()`，核心加一条
+ * `/suppliers/:id/checkin/status` 汇总路由，这里改成读它即可（卡片不用改）。
+ */
+import { useEffect, useState } from 'react'
+import {
+  ROUTER_API_BASE,
+  type RouterCheckinResponse,
+  type RouterHealthResponse,
+} from '../shared.ts'
+
+/* ---------------- SVG 图标 ---------------- */
+
+function Icon({ d, size = 14 }: { d: string; size?: number }): JSX.Element {
+  return (
+    <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d={d} />
+    </svg>
+  )
+}
+
+const I = {
+  check: 'M4 12.5l5 5L20 6.5',
+  loading: 'M12 3a9 9 0 1 0 9 9',
+}
+
+/** localStorage key：值 = 本地日期 YYYY-MM-DD。 */
+const CHECKIN_STAMP_KEY = 'dsh-router:checkin-stamp'
+
+/** 本地日切（跟用量统计的 localDateKey 同口径，别用 UTC）。 */
+function todayKey(ts = Date.now()): string {
+  const d = new Date(ts)
+  const p = (n: number): string => String(n).padStart(2, '0')
+  return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())}`
+}
+
+function readStamp(): string | null {
+  try {
+    return localStorage.getItem(CHECKIN_STAMP_KEY)
+  } catch {
+    // 隐私模式 / 存储被禁：退化为「不记得」，不影响签到本身能用
+    return null
+  }
+}
+
+function writeStamp(): void {
+  try {
+    localStorage.setItem(CHECKIN_STAMP_KEY, todayKey())
+  } catch { /* 存不了就只影响这个提示，签到照常 */ }
+}
+
+interface CheckinCardProps {
+  /** 供应商健康快照（用来筛出支持 checkinNow 的）。 */
+  health: RouterHealthResponse | null
+  /** 签完回调，让概览刷新快照（积分会变）。 */
+  onRefresh: () => void
+}
+
+/** 可签到的供应商（能力 checkinNow）。 */
+function checkinable(health: RouterHealthResponse | null): Array<{ id: string; name: string }> {
+  return (health?.suppliers ?? [])
+    .filter((s) => (s.capabilities ?? []).includes('checkinNow'))
+    .map((s) => ({ id: s.id, name: s.name }))
+}
+
+export function CheckinCard({ health, onRefresh }: CheckinCardProps): JSX.Element {
+  const [busy, setBusy] = useState(false)
+  const [stamp, setStamp] = useState<string | null>(null)
+  const [result, setResult] = useState<string>('')
+  const [error, setError] = useState<string>('')
+
+  // 挂载时读一次；跨天自动失效因为存的是日期串
+  useEffect(() => { setStamp(readStamp()) }, [])
+
+  const targets = checkinable(health)
+  const clickedToday = stamp === todayKey()
+
+  const run = async (): Promise<void> => {
+    if (busy || targets.length === 0) return
+    setBusy(true)
+    setError('')
+    setResult('')
+    let okCount = 0
+    let alreadyCount = 0
+    let totalCount = 0
+    const failures: string[] = []
+    // 顺序发：签到是有副作用的上游调用，并发会把上游风控招来（见 traework 9074）
+    for (const t of targets) {
+      try {
+        const res = await fetch(`${ROUTER_API_BASE}/suppliers/${t.id}/checkin`, { method: 'POST', cache: 'no-store' })
+        const data = await res.json() as RouterCheckinResponse
+        if (data.error !== undefined) {
+          failures.push(`${t.name}：${data.error}`)
+          continue
+        }
+        okCount += data.succeeded
+        alreadyCount += data.already
+        totalCount += data.total
+        if (!data.ok) {
+          const first = (data.results ?? []).find((r) => r.status !== 'ok' && r.status !== 'already')
+          failures.push(`${t.name}：${first?.message ?? '有链接签到失败'}`)
+        }
+      } catch (err) {
+        failures.push(`${t.name}：${(err as Error).message}`)
+      }
+    }
+    // 只要发出去过就记「今日已点」——点过就是点过，成败另说（文案也这么说）
+    writeStamp()
+    setStamp(todayKey())
+    const parts = [`${okCount}/${totalCount} 成功`]
+    if (alreadyCount > 0) parts.push(`${alreadyCount} 今日已签`)
+    setResult(parts.join(' · '))
+    if (failures.length > 0) setError(failures.join('；'))
+    onRefresh()
+    setBusy(false)
+  }
+
+  /**
+   * 第三行文案：所有状态/结果都压在这一行里，行数恒定。
+   * 优先级：失败 > 本次结果 > 今日已点 > 默认供应商数。
+   * 失败时截断显示（全量挂 title），不换行。
+   */
+  const hintText = (): string => {
+    if (targets.length === 0) return '没有支持签到的供应商'
+    if (busy) return '签到中…'
+    if (error !== '') return `失败 · ${error}`
+    if (result !== '') return result
+    return clickedToday ? `今日已点 · ${targets.length} 个供应商` : `${targets.length} 个供应商`
+  }
+
+  /** 悬停说明：成功/失败都在这儿补全，正文只放得下一行 */
+  const hintTitle = (): string => {
+    if (targets.length === 0) return '没有供应商实现了 checkinNow 能力'
+    const lines = [`对 ${targets.length} 个支持签到的供应商逐个签到：${targets.map((t) => t.name).join('、')}`]
+    if (clickedToday) lines.push('今天在这个浏览器点过签到（不代表上游一定签上了）')
+    if (result !== '') lines.push(`上次结果：${result}`)
+    if (error !== '') lines.push(`失败：${error}`)
+    return lines.join('\n')
+  }
+
+  return (
+    <div
+      className={`dshr-statCard dshr-statCard-checkin${clickedToday ? ' dshr-statCard-done' : ''}`}
+      title={hintTitle()}
+    >
+      <span className="dshr-statLabel">签到</span>
+      {targets.length === 0
+        ? (
+          <span className="dshr-statValue">—</span>
+        )
+        : (
+          <button
+            type="button"
+            className={`dshr-checkinButton${busy ? ' dshr-checkinButton-busy' : ''}`}
+            onClick={() => { void run() }}
+            disabled={busy}
+            title={hintTitle()}
+          >
+            <span className={busy ? 'dshr-spin' : undefined}>
+              <Icon d={busy ? I.loading : I.check} size={14} />
+            </span>
+            {busy ? '签到中…' : '一键签到'}
+          </button>
+        )}
+      {/* 恒定第三行：状态/结果全塞进 hint，不成功后多出一行
+          —— 汇总卡是 3 行结构（label / value / hint），多一行就跟邻卡不齐 */}
+      <span className={`dshr-statHint${error !== '' ? ' dshr-statHint-err' : ''}`} title={error !== '' ? error : undefined}>
+        {hintText()}
+      </span>
+    </div>
+  )
+}

package/src/client/RouterView.tsx

@@ -1,17 +1,24 @@
 /**
  * 路由系统 (Routing System) panel — a simplified 9router.
  *
- * Three tabs fed by the host half (/router/api/*), mirroring 9router's
- * dashboard: 供应商 (supplier cards → detail: accounts + add-account + models),
- * 组合 (combo fallback chains), 端点与密钥 (endpoint URL + API keys + auth).
+ * Four tabs fed by the host half (/router/api/*), mirroring 9router's
+ * dashboard: 概览 (usage), 供应商 (supplier cards → detail: accounts +
+ * add-account + models), 组合 (combo fallback chains),
+ * 端点与密钥 (endpoint URL + API keys + auth).
  *
- * Masthead: 返回会话 button on the LEFT, refresh on the right.
- * No online/offline concept — suppliers render whatever state they have.
+ * **挂载在「设置」里**（`settings.section` 座位），所以布局规则跟中心栏劫持时期不同：
+ *   - 没有 masthead / 返回会话按钮 —— 设置面板自带标题栏和关闭
+ *   - **tab 条固定、只有内容区滚**：根节点限高 `height:100%`，内容区
+ *     `flex:1 + min-height:0 + overflow-y:auto` 自己滚。
+ *     根节点**必须限高** —— 不限高内容会把外壳撑开，退化成整页滚、
+ *     tab 条跟着滚上去
+ *   - 根节点外面套了一层 `display: contents`（宿主 slot renderer 给的），
+ *     不过实测 `height:100%` 仍能穿过它解析到外壳高度
+ *   - 内容宽度实测 564px（面板 612 − 左右 padding 24），卡片 grid 按这个宽度排
  */
 import { useEffect, useRef, useState, type ReactNode } from 'react'
 import {
   ROUTER_API_BASE,
-  ROUTER_TITLE,
   type RouterCombosResponse,
   type RouterHealthResponse,
   type RouterStatusResponse,
@@ -38,8 +45,11 @@ async function getJson<T>(path: string): Promise<T> {
 }
 
 interface RouterViewProps {
-  /** 关闭面板、返回会话。 */
-  onBack: () => void
+  /**
+   * 设置页不提供「返回会话」（关闭由设置面板自己负责），所以这里是可选的：
+   * 中心栏劫持那套老挂载方式还留着时会传。
+   */
+  onBack?: () => void
 }
 
 export function RouterView({ onBack }: RouterViewProps): JSX.Element {
@@ -93,7 +103,15 @@ export function RouterView({ onBack }: RouterViewProps): JSX.Element {
               <section key={supplier.id} className="dshr-supplierCard" onClick={() => setDetailSupplier(supplier)}>
                 <div className="dshr-supplierRow">
                   {supplier.icon !== undefined && (
-                    <img className="dshr-supplierIcon" src={supplier.icon} alt="" />
+                    <img
+                      className="dshr-supplierIcon"
+                      src={supplier.icon}
+                      alt=""
+                      // 加载失败就藏起来（别留碎图）。图标不是关键信息，
+                      // 旁边有供应商名字。历史上的坑：icon 曾是
+                      // http://localhost:20128/... 这种外链，9router 没跑就全是坏图。
+                      onError={(e) => { e.currentTarget.style.display = 'none' }}
+                    />
                   )}
                   <div className="dshr-supplierName">{supplier.name}</div>
                 </div>
@@ -112,40 +130,34 @@ export function RouterView({ onBack }: RouterViewProps): JSX.Element {
   }
 
   return (
-    <div className="dshr-shell">
-      <header className="dshr-masthead">
-        <button type="button" className="dshr-backButton" onClick={onBack} title="返回会话">
-          <svg viewBox="0 0 16 16" width="15" height="15" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-            <path d="M10 3 5 8l5 5" />
-          </svg>
-          <span>返回会话</span>
-        </button>
-        <div className="dshr-brand">
-          <div className="dshr-brandTitle">{ROUTER_TITLE}</div>
-        </div>
-      </header>
-
-      <nav className="dshr-nav">
-        <button type="button" aria-current={tab === 'overview' ? 'page' : undefined} onClick={() => setTab('overview')}>
+    <div className="dshr-settings">
+      {/* tab 切换：设置页已有页面标题，这里只做二级切换 */}
+      <nav className="dshr-tabs" role="tablist" aria-label="路由分区">
+        <button type="button" role="tab" aria-selected={tab === 'overview'} className={`dshr-tab${tab === 'overview' ? ' dshr-tab-on' : ''}`} onClick={() => setTab('overview')}>
           概览
         </button>
-        <button type="button" aria-current={tab === 'suppliers' ? 'page' : undefined} onClick={() => setTab('suppliers')}>
+        <button type="button" role="tab" aria-selected={tab === 'suppliers'} className={`dshr-tab${tab === 'suppliers' ? ' dshr-tab-on' : ''}`} onClick={() => setTab('suppliers')}>
           供应商 <span className="dshr-navCount">{suppliers.length}</span>
         </button>
-        <button type="button" aria-current={tab === 'combos' ? 'page' : undefined} onClick={() => setTab('combos')}>
+        <button type="button" role="tab" aria-selected={tab === 'combos'} className={`dshr-tab${tab === 'combos' ? ' dshr-tab-on' : ''}`} onClick={() => setTab('combos')}>
           组合 <span className="dshr-navCount">{combos.length}</span>
         </button>
-        <button type="button" aria-current={tab === 'endpoint' ? 'page' : undefined} onClick={() => setTab('endpoint')}>
+        <button type="button" role="tab" aria-selected={tab === 'endpoint'} className={`dshr-tab${tab === 'endpoint' ? ' dshr-tab-on' : ''}`} onClick={() => setTab('endpoint')}>
           端点与密钥
         </button>
+        {/* 返回会话只在老的中心栏挂载方式下出现（设置页有关闭按钮） */}
+        {onBack !== undefined && (
+          <button type="button" className="dshr-tabBack" onClick={onBack}>返回会话</button>
+        )}
       </nav>
 
-      <div className="dshr-content">
+      <div className="dshr-settingsBody">
         {/* ---------------- 概览（用量看板） ---------------- */}
         {tab === 'overview' && (
           <StatsTab
             active
             refreshing={refreshing}
+            health={snapshot.health}
             onRefresh={() => void refresh()}
           />
         )}

package/src/client/StatsTab.tsx

@@ -25,11 +25,13 @@ import {
   ROUTER_API_BASE,
   type RouterChartBucket,
   type RouterChartResponse,
+  type RouterHealthResponse,
   type RouterPeriod,
   type RouterRankRow,
   type RouterStatsResponse,
   type RouterUsageRecord,
 } from '../shared.ts'
+import { CheckinCard } from './CheckinCard.tsx'
 
 /* ---------------- SVG 图标 ---------------- */
 
@@ -366,9 +368,14 @@ interface StatsTabProps {
   refreshing: boolean
   /** 掩码：面板是否可见（不可见时不做周期轮询）。 */
   active: boolean
+  /**
+   * 供应商健康快照：签到卡要按 `checkinNow` 能力筛出可签到的供应商。
+   * 不传就不显示签到卡（老的中心栏挂载方式下 RouterView 也会传，这里留可选）。
+   */
+  health?: RouterHealthResponse | null
 }
 
-export function StatsTab({ onRefresh, refreshing, active }: StatsTabProps): JSX.Element {
+export function StatsTab({ onRefresh, refreshing, active, health }: StatsTabProps): JSX.Element {
   const [period, setPeriod] = useState<RouterPeriod>('today')
   const [stats, setStats] = useState<RouterStatsResponse | null>(null)
   const [chart, setChart] = useState<RouterChartBucket[]>([])
@@ -489,6 +496,9 @@ export function StatsTab({ onRefresh, refreshing, active }: StatsTabProps): JSX.
                 hint={(s?.avgTtfbMs ?? 0) > 0 ? `首字节 ${fmtDuration(s?.avgTtfbMs)}` : undefined}
                 tone="warn"
               />
+              {/* 签到卡放在最后：它是操作（按钮）不是指标，但跟指标同宽同高度，
+                  排在统计卡后面不会让人误以为是又一个 token 计数 */}
+              {health !== undefined && <CheckinCard health={health} onRefresh={onRefresh} />}
             </div>
 
             {estimated && (

package/src/client/SupplierDetail.tsx

@@ -560,7 +560,15 @@ export function SupplierDetail({ supplier, accounts, statusLoading, onBack, onRe
         <div className="dshr-providerTitleRow">
           <div className="dshr-providerIcon">
             {supplier.icon !== undefined
-              ? <img className="dshr-providerImg" src={supplier.icon} alt="" />
+              ? (
+                <img
+                  className="dshr-providerImg"
+                  src={supplier.icon}
+                  alt=""
+                  // 同上：失败就藏，露出备用图标位置（不显示碎图）
+                  onError={(e) => { e.currentTarget.style.display = 'none' }}
+                />
+              )
               : <Icon d={I.link} size={22} />}
           </div>
           <div className="dshr-providerMeta">

package/src/client/index.tsx

@@ -1,18 +1,68 @@
 /**
- * Client half of dsh-router: mounts the 路由系统 sidebar entry and its
- * center-column panel. Pure DOM + fetch — no injected DSH services needed:
- * the panel reads /router/api/* (same-origin), which the host half serves.
+ * Client half of dsh-router.
+ *
+ * 挂载点是「设置 → 路由」（官方 `settings.section` 座位），不再是侧边栏
+ * DOM 注入 + 中心栏劫持。`slots` / `locale` 由宿主运行时提供（profile 的
+ * node_modules 里 @deepseek-ai 是空的：这些包不入 node_modules，按
+ * package.json 的 dsh.client.inject 声明即可）。
+ *
+ * 拿不到 slots 时（老宿主）回退到原来的中心栏面板，不至于整个插件失效。
  */
 import { mountRouterWorkspace } from './workspace-mount.tsx'
+import { RouterSettingsSection } from './settings-section.tsx'
+import { registerSettingsNavIcon } from './settings-nav-icon.ts'
 import './router.css'
 
-/** No hard service dependencies; the web shell injects react/cordis. */
-export const inject: string[] = []
+/**
+ * 设置导航里这一页的显示名。同时是注册 label 和「认领图标」时匹配的文案，
+ * 两处必须一致 —— 认领逻辑按可见文案找自己那一行（见 settings-nav-icon.ts）。
+ */
+const SECTION_LABEL = '路由'
+
+/**
+ * 必须声明：Cordis 的 ctx 是 Proxy，未声明就访问 `ctx.slots` 会直接抛
+ * `cannot get property "slots" without inject`（实测错误，不是理论风险）——
+ * 连 `ctx.slots === undefined` 这种防御性判断都跑不到，getter 先炸。
+ */
+export const inject: string[] = ['slots']
+
+interface SlotsFace {
+  inject: (key: string, cb: () => unknown) => () => void
+  register: (reg: Record<string, unknown>, component: unknown) => unknown
+}
+
+interface Ctx {
+  slots?: SlotsFace
+  effect: (fn: () => (() => void) | void, label?: string) => void
+}
+
+/** 挂载「设置 → 路由」页；拿不到 slots 时返回 undefined 表示跳过。 */
+function mountSettingsSection(ctx: Ctx): (() => void) | undefined {
+  const slots = ctx.slots
+  if (slots === undefined) return undefined
+  // order 10 = 与「模型」「远程访问」同值，靠注册顺序定先后，实测排成
+  //   模型 → 路由 → 远程访问（正是要的位置）。
+  // 排序规则（宿主实现）：priority ?? 0 优先，再 order ?? 0，数值升序，
+  //   同值保持注册顺序。所以想插在两个同 order 的条目中间是做不到的——
+  //   试过 9.99（跑到模型上面）、10.001/10.05/11（都跑到远程访问后面）。
+  //   只能取同值，让注册顺序决定。
+  return slots.inject('settings.section', () => slots.register({
+    name: 'settings.section',
+    id: 'dsh-router',
+    order: 10,
+    label: SECTION_LABEL,
+  }, RouterSettingsSection))
+}
 
-/** Mount the routing-system workspace once the browser context is ready. */
-export function apply(ctx: { effect: (fn: () => () => void, label?: string) => void }): void {
-  ctx.effect(
-    () => mountRouterWorkspace(),
-    'dsh-router: routing system workspace',
-  )
+export function apply(ctx: Ctx): void {
+  const disposeSettings = mountSettingsSection(ctx)
+  if (disposeSettings === undefined) {
+    // 老宿主（无 slots）：回退到侧边栏入口 + 中心栏面板
+    console.warn('[dsh-router] 宿主未提供 slots，回退到侧边栏面板')
+    ctx.effect(() => mountRouterWorkspace(), 'dsh-router: routing system workspace')
+    return
+  }
+  ctx.effect(() => disposeSettings, 'dsh-router: settings section')
+  // 换掉宿主的默认齿轮（契约没有 icon 字段，只能注册后认领自己的行）
+  ctx.effect(() => registerSettingsNavIcon(SECTION_LABEL), 'dsh-router: settings nav icon')
 }