dsh-router-core 0.1.0 → 0.3.0

package/src/client/SupplierDetail.tsx

@@ -39,6 +39,7 @@ const I = {
   edit: 'M4 20h4L19.5 8.5a2.1 2.1 0 0 0-3-3L5 17v3zM13.5 6.5l3 3',
   loading: 'M12 3a9 9 0 1 0 9 9M12 3a9 9 0 0 1 9 9',
   search: 'M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM21 21l-4.3-4.3',
+  refresh: 'M20.5 12a8.5 8.5 0 1 1-2.6-6.1M20.5 4v5h-5',
 }
 
 interface SupplierDetailProps {
@@ -108,8 +109,8 @@ export function SupplierDetail({ supplier, accounts, statusLoading, onBack, onRe
   const [removeModelTarget, setRemoveModelTarget] = useState<string | null>(null)
   const [poolStrategy, setPoolStrategy] = useState<'fallback' | 'round-robin'>('fallback')
   const [poolOrder, setPoolOrder] = useState<string[]>([])
-  const [checkinRule, setCheckinRule] = useState<'all' | 'first'>('all')
   const [checkingIn, setCheckingIn] = useState(false)
+  const [refreshing, setRefreshing] = useState(false)
   const [dragIndex, setDragIndex] = useState<number | null>(null)
   const mounted = useRef(true)
 
@@ -144,20 +145,17 @@ export function SupplierDetail({ supplier, accounts, statusLoading, onBack, onRe
 
   const loadPoolConfig = useCallback(async (): Promise<void> => {
     try {
-      const [strategyRes, orderRes, ruleRes] = await Promise.all([
+      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' }),
-        fetch(`${ROUTER_API_BASE}/suppliers/${supplier.id}/checkin/rule`, { cache: 'no-store' }),
       ])
-      const [strategyData, orderData, ruleData] = await Promise.all([strategyRes.json(), orderRes.json(), ruleRes.json()]) as [
+      const [strategyData, orderData] = await Promise.all([strategyRes.json(), orderRes.json()]) as [
         { ok: boolean; strategy?: 'fallback' | 'round-robin' },
         { ok: boolean; order?: string[] },
-        { ok: boolean; rule?: 'all' | 'first' },
       ]
       if (mounted.current) {
         if (strategyData.ok && strategyData.strategy) setPoolStrategy(strategyData.strategy)
         if (orderData.ok && Array.isArray(orderData.order)) setPoolOrder(orderData.order)
-        if (ruleData.ok && ruleData.rule) setCheckinRule(ruleData.rule)
       }
     } catch {
       // 连接池配置加载失败不阻断
@@ -209,6 +207,45 @@ export function SupplierDetail({ supplier, accounts, statusLoading, onBack, onRe
     }
   }
 
+  /** 刷新链接池：积分刷一遍 + 全供应商健康探测（最简会话，走真实 chatCompletions
+   *  并按账号池回退，所以「这个供应商还有没有活着的链接」能回答；不按链接细分 —— 那需要
+   *  按 uid 指定账号的管道，会给插件增负）。 */
+  const runRefresh = async (): Promise<void> => {
+    if (refreshing) return
+    setRefreshing(true)
+    let msg = ''
+    try {
+      const response = await fetch(`${ROUTER_API_BASE}/suppliers/${supplier.id}/links/refresh`, { method: 'POST', cache: 'no-store' })
+      const data = await response.json() as { ok: boolean; changed?: boolean; accounts?: unknown[]; error?: string }
+      if (!data.ok) {
+        showToast(data.error ?? '刷新失败')
+        return
+      }
+      // 健康探测：拿一个启用模型跑最简会话；没有启用模型就退回任意第一个
+      const probe = models?.find(m => m.enabled) ?? models?.[0]
+      if (probe === undefined) {
+        msg = `已刷新 ${data.accounts?.length ?? 0} 链接 · 无模型可探测`
+      } else {
+        const probeRes = await fetch(`${ROUTER_API_BASE}/suppliers/${supplier.id}/models/test`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ id: probe.id }),
+          cache: 'no-store',
+        })
+        const probeData = await probeRes.json() as { ok: boolean; error?: string }
+        msg = probeData.ok
+          ? `已刷新 ${data.accounts?.length ?? 0} 链接 · 健康`
+          : `已刷新 ${data.accounts?.length ?? 0} 链接 · 不可用：${probeData.error ?? '未知'}`
+      }
+      showToast(msg)
+      onRefresh()
+    } catch (err) {
+      showToast(`刷新失败：${(err as Error).message}`)
+    } finally {
+      setRefreshing(false)
+    }
+  }
+
   const startLogin = async (): Promise<void> => {
     // API key 供应商：弹窗直接填名字+key，不走 URL 登录
     if (canApiKey) {
@@ -238,15 +275,15 @@ export function SupplierDetail({ supplier, accounts, statusLoading, onBack, onRe
     }
   }
 
-  const completeLogin = async (): Promise<void> => {
-    if (callbackUrl.trim() === '') return
+  const completeLogin = async (poll = false): Promise<void> => {
+    if (!poll && callbackUrl.trim() === '') return
     setBusy(true)
     setError('')
     try {
       const response = await fetch(`${ROUTER_API_BASE}/suppliers/${supplier.id}/login/callback`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ callbackUrl: callbackUrl.trim() }),
+        body: JSON.stringify({ callbackUrl: poll ? '' : callbackUrl.trim() }),
         cache: 'no-store',
       })
       const data = await response.json() as { ok: boolean; error?: string; account?: { uid: string; nickname: string } }
@@ -470,7 +507,7 @@ 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',
@@ -481,16 +518,6 @@ export function SupplierDetail({ supplier, accounts, statusLoading, onBack, onRe
         } catch {
           // 策略保存失败不阻断前缀保存
         }
-        try {
-          await fetch(`${ROUTER_API_BASE}/suppliers/${supplier.id}/checkin/rule`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ rule: checkinRule }),
-            cache: 'no-store',
-          })
-        } catch {
-          // 签到规则保存失败不阻断前缀保存
-        }
         setShowAlias(false)
       } else {
         setAliasError(data.error ?? '保存失败')
@@ -559,9 +586,16 @@ export function SupplierDetail({ supplier, accounts, statusLoading, onBack, onRe
         <div className="dshr-cardHead">
           <div className="dshr-cardTitle">链接池</div>
           <div className="dshr-cardActions">
+            <button type="button" className="dshr-iconBtn dshr-iconBtn-sm" onClick={() => void runRefresh()} disabled={refreshing || supplierAccounts.length === 0} title="刷新积分并探测健康" aria-label="刷新积分并探测健康">
+              <span className={refreshing ? 'dshr-spin' : undefined}>
+                <Icon d={I.refresh} size={15} />
+              </span>
+            </button>
             {canCheckin && (
-              <button type="button" className="dshr-miniButton" onClick={() => void runCheckin()} disabled={checkingIn || supplierAccounts.length === 0}>
-                {checkingIn ? '签到中…' : '签到'}
+              <button type="button" className="dshr-iconBtn dshr-iconBtn-sm" onClick={() => void runCheckin()} disabled={checkingIn || supplierAccounts.length === 0} title="签到所有链接" aria-label="签到所有链接">
+                <span className={checkingIn ? 'dshr-spin' : undefined}>
+                  <Icon d={I.checkCircle} size={15} />
+                </span>
               </button>
             )}
             {canLogin && (
@@ -792,7 +826,7 @@ export function SupplierDetail({ supplier, accounts, statusLoading, onBack, onRe
         </Modal>
       )}
 
-      {/* ---- 编辑供应商弹窗（前缀 + 连接池策略 + 签到规则） ---- */}
+      {/* ---- 编辑供应商弹窗（前缀 + 连接池策略） ---- */}
       {showAlias && (
         <Modal title="编辑供应商" onClose={() => setShowAlias(false)}>
           <div className="dshr-modalForm">
@@ -818,16 +852,6 @@ export function SupplierDetail({ supplier, accounts, statusLoading, onBack, onRe
                 <option value="round-robin">轮询</option>
               </select>
             </>
-            <label className="dshr-fieldLabel">签到规则</label>
-            <p className="dshr-muted">所有链接 = 签到每个链接；首个链接 = 只签到第一个链接。（dsh-router 通用策略）</p>
-            <select
-              className="dshr-select dshr-input"
-              value={checkinRule}
-              onChange={(e) => setCheckinRule(e.target.value as 'all' | 'first')}
-            >
-              <option value="all">所有链接</option>
-              <option value="first">首个链接</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>
@@ -895,7 +919,7 @@ export function SupplierDetail({ supplier, accounts, statusLoading, onBack, onRe
                           <div className="dshr-loginStep"><span className="dshr-loginNum">2</span>登录成功后点「完成添加」，自动获取凭证</div>
                           {error !== '' && <div className="dshr-alert"><strong>出错了</strong><span>{error}</span></div>}
                           <div className="dshr-modalActions">
-                            <button type="button" className="dshr-primaryButton" onClick={() => void completeLogin()} disabled={busy}>
+                            <button type="button" className="dshr-primaryButton" onClick={() => void completeLogin(true)} disabled={busy}>
                               {busy ? '轮询中…' : '完成添加'}
                             </button>
                           </div>

package/src/client/router.css

@@ -430,14 +430,17 @@ html[data-dsh-router-active]:not([data-dsh-taskboard-active]):not([data-dsh-ssh-
 
 .dshr-tabBody {
   display: flex;
+  flex: 1 1 auto;      /* 填满 content;自身滚动 */
   min-width: 0;
   min-height: 0;
   flex-direction: column;
   gap: 14px;
   padding: 14px 18px;
+  overflow-y: auto;
 }
 
 .dshr-card {
+  flex: none;          /* 不参与 flex 伸缩:高度=内容,避免被压缩裁切 */
   min-width: 0;
   border: 1px solid var(--rs-line);
   border-radius: 10px;
@@ -1100,6 +1103,12 @@ html[data-dsh-router-active]:not([data-dsh-taskboard-active]):not([data-dsh-ssh-
 
 .dshr-iconBtn-sm { width: 26px; height: 26px; }
 
+/* 禁用态必须看得出来：纯图标按钮没有文字可读（不像「刷新中…」），
+   只靠 hover 反馈会让人以为还能点。 */
+.dshr-iconBtn:disabled { opacity: .4; cursor: default; }
+
+.dshr-iconBtn:disabled:hover { color: var(--rs-muted); background: transparent; }
+
 /* Require API key 行 */
 .dshr-requireRow {
   display: flex;
@@ -2094,3 +2103,400 @@ html[data-dsh-router-active]:not([data-dsh-taskboard-active]):not([data-dsh-ssh-
   width: 1px;
   background: var(--rs-line);
 }
+
+/* ============================================================
+   dsh-router — 概览（用量看板，9router Overview 风格）
+   ============================================================ */
+
+/* 周期切换 + 操作条 */
+.dshr-statsBar {
+  display: flex;
+  flex: none;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+}
+
+.dshr-periods {
+  display: inline-flex;
+  gap: 2px;
+  padding: 2px;
+  border: 1px solid var(--rs-line);
+  border-radius: 8px;
+  background: var(--rs-layer-2);
+}
+
+/* 周期按钮三态。特异性阶梯（类/伪类数 , 元素数）：
+   文件顶部有 `.dshr-shell button { color: inherit; font: inherit }` = (1,1)，
+   单类的 .dshr-period (1,0) 会被它打死（白字、600 字重全丢），所以下面每条
+   都必须带 .dshr-shell 抬到 (2,0) 以上。
+   两种 hover 用 :not() 做成互斥，谁赢跟源码顺序无关（免得以后有人挪块就翻车）。 */
+.dshr-shell .dshr-period {
+  min-width: 46px;
+  height: 26px;
+  padding: 0 10px;
+  border: none;
+  border-radius: 6px;
+  color: var(--rs-muted);
+  background: transparent;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: color .12s ease, background .12s ease, filter .12s ease;
+}
+
+/* 未激活悬停：跟 .dshr-miniButton / .dshr-iconButton 一个套路（主文字色 + --rs-hover 底） */
+.dshr-shell .dshr-period:not(.dshr-period-on):hover {
+  color: var(--rs-text);
+  background: var(--rs-hover);
+}
+
+/* 激活：强调色块 + 白字。底色用 layer-1 时跟卡片同色，根本看不出选中了哪个 */
+.dshr-shell .dshr-period-on {
+  color: #fff;
+  background: var(--rs-accent);
+  font-weight: 600;
+  box-shadow: 0 1px 2px rgb(0 0 0 / .12);
+}
+
+/* 激活态被悬停：跟 .dshr-primaryButton 一样提亮，表示「它还是能点的」 */
+.dshr-shell .dshr-period-on:hover {
+  color: #fff;
+  background: var(--rs-accent);
+  filter: brightness(1.08);
+}
+
+.dshr-statsBarRight {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: auto;
+}
+
+.dshr-lifetime {
+  font-size: 11px;
+  white-space: nowrap;
+}
+
+/* 汇总卡（照 9router OverviewCards 的自适应五宫格） */
+.dshr-statGrid {
+  display: grid;
+  flex: none;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 10px;
+}
+
+.dshr-statCard {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 3px;
+  padding: 12px 14px;
+  border: 1px solid var(--rs-line);
+  border-radius: 10px;
+  background: var(--rs-layer-1);
+  box-shadow: 0 1px 2px rgb(0 0 0 / .04);
+}
+
+.dshr-statLabel {
+  overflow: hidden;
+  color: var(--rs-faint);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: .03em;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.dshr-statValue {
+  overflow: hidden;
+  font-size: 22px;
+  font-weight: 700;
+  letter-spacing: -.01em;
+  line-height: 1.2;
+  text-overflow: ellipsis;
+}
+
+.dshr-statHint {
+  color: var(--rs-faint);
+  font-size: 11px;
+}
+
+.dshr-statCard-primary .dshr-statValue { color: var(--rs-accent); }
+.dshr-statCard-ok .dshr-statValue { color: var(--rs-success); }
+.dshr-statCard-warn .dshr-statValue { color: var(--rs-warn); }
+.dshr-statCard-danger .dshr-statValue { color: var(--rs-danger); }
+
+.dshr-estimateNote {
+  margin: 0;
+  color: var(--rs-faint);
+  font-size: 11px;
+  line-height: 1.6;
+}
+
+.dshr-estimateNote code {
+  padding: 0 3px;
+  border-radius: 3px;
+  background: var(--rs-layer-2);
+  font-family: var(--rs-mono);
+}
+
+/* 趋势折线图（纯 SVG + HTML 叠加层，不引图表库） */
+.dshr-trendWrap {
+  position: relative;
+  padding: 14px 14px 10px;
+}
+
+.dshr-trendBusy {
+  position: absolute;
+  inset: 0;
+  background: color-mix(in srgb, var(--rs-layer-1) 55%, transparent);
+  pointer-events: none;
+}
+
+/* 绘图区：高度跟 SVG 视口一致，叠加层用百分比定位才对得上 */
+.dshr-linePlot {
+  position: relative;
+  height: 150px;
+  cursor: crosshair;
+}
+
+/* 键盘可达（←/→ 逐格）：聚焦环跟面板其它控件一致 */
+.dshr-linePlot:focus-visible {
+  outline: 2px solid var(--rs-accent);
+  outline-offset: 2px;
+}
+
+/* 峰值：给读数一个量级参照；半透明底是怕压在折线上看不清 */
+.dshr-linePeak {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 0 4px;
+  border-radius: 3px;
+  color: var(--rs-faint);
+  background: color-mix(in srgb, var(--rs-layer-1) 72%, transparent);
+  font-size: 9px;
+  font-variant-numeric: tabular-nums;
+  pointer-events: none;
+}
+
+.dshr-lineSvg {
+  position: absolute;
+  display: block;
+  width: 100%;
+  height: 100%;
+  inset: 0;
+  overflow: visible;
+}
+
+.dshr-lineGrid {
+  stroke: var(--rs-line);
+  stroke-dasharray: 3 3;
+}
+
+.dshr-lineArea {
+  fill: color-mix(in srgb, var(--rs-accent) 14%, transparent);
+  stroke: none;
+}
+
+.dshr-linePath {
+  fill: none;
+  stroke: var(--rs-accent);
+  stroke-width: 2;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+}
+
+/* 数值点：空心小圆（SVG 会被横向拉伸，所以画在 HTML 层） */
+.dshr-linePoint {
+  position: absolute;
+  width: 5px;
+  height: 5px;
+  border: 1.5px solid var(--rs-accent);
+  border-radius: 50%;
+  background: var(--rs-layer-1);
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+
+.dshr-lineGuide {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background: var(--rs-line-strong);
+  pointer-events: none;
+}
+
+.dshr-lineDot {
+  position: absolute;
+  width: 9px;
+  height: 9px;
+  border: 2px solid var(--rs-layer-1);
+  border-radius: 50%;
+  background: var(--rs-accent);
+  box-shadow: 0 0 0 1px var(--rs-accent);
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+
+.dshr-lineLabels {
+  position: relative;
+  height: 14px;
+  margin-top: 5px;
+}
+
+.dshr-lineLabel {
+  position: absolute;
+  top: 0;
+  overflow: visible;
+  color: var(--rs-faint);
+  font-size: 9px;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  transform: translateX(-50%);
+}
+
+/* 选中的时段：标签跟着高亮，不用抬头对读数才知道看的是哪一段 */
+.dshr-lineLabel-on {
+  color: var(--rs-accent);
+  font-weight: 700;
+}
+
+.dshr-trendReadout {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  min-height: 18px;
+  padding-top: 6px;
+  font-size: 11px;
+}
+
+.dshr-trendEmpty {
+  display: flex;
+  height: 150px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  color: var(--rs-faint);
+  font-size: 12px;
+}
+
+.dshr-trendEmptyIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  color: var(--rs-accent);
+  background: color-mix(in srgb, var(--rs-accent) 10%, transparent);
+}
+
+/* Top 榜（供应商 / 模型并排，窄屏堆叠） */
+.dshr-rankPair {
+  display: grid;
+  flex: none;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: 12px;
+  align-items: start;
+}
+
+.dshr-rankList,
+.dshr-recentList {
+  display: flex;
+  flex-direction: column;
+  padding: 6px 14px 12px;
+}
+
+.dshr-rankRow,
+.dshr-recentRow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  padding: 7px 0;
+  border-bottom: 1px solid var(--rs-line);
+  font-size: 12px;
+}
+
+.dshr-rankRow:last-child,
+.dshr-recentRow:last-child { border-bottom: none; }
+
+/* 表头：不参与 hover，且不画分隔线（视觉上属于卡片头） */
+.dshr-rankHead {
+  border-bottom: 1px solid var(--rs-line);
+  color: var(--rs-faint);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: .03em;
+  text-transform: uppercase;
+}
+
+.dshr-rankRow:not(.dshr-rankHead):hover { background: var(--rs-hover); }
+
+.dshr-rankName {
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dshr-rankNum {
+  flex: none;
+  min-width: 52px;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.dshr-rankFail { color: var(--rs-danger); }
+
+.dshr-tokenIn { color: var(--rs-accent); }
+.dshr-tokenOut { color: var(--rs-success); }
+
+/* 最近请求列宽（比 Top 榜宽，要放得下模型名） */
+.dshr-recentTime {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: 5px;
+  width: 78px;
+  color: var(--rs-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.dshr-recentModel {
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dshr-recentSupplier {
+  flex: none;
+  width: 92px;
+  overflow: hidden;
+  color: var(--rs-muted);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dshr-recentRow-fail .dshr-recentModel { color: var(--rs-danger); }
+
+/* 状态点 */
+.dshr-dot {
+  display: inline-block;
+  flex: none;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+}
+
+.dshr-dot-ok { background: var(--rs-success); }
+.dshr-dot-fail { background: var(--rs-danger); }

package/src/client/workspace-mount.tsx

@@ -5,9 +5,8 @@
  * other sidebar panels (taskboard / ssh / mnemon) through the shared
  * `dsh-panel-activate` event.
  */
-import { useEffect } from 'react'
 import { createRoot, type Root } from 'react-dom/client'
-import { ROUTER_ACTIVE_ATTR, ROUTER_TITLE, ROUTER_VIEW_SELECTOR } from '../shared.ts'
+import { ROUTER_ACTIVE_ATTR } from '../shared.ts'
 import { RouterView } from './RouterView.tsx'
 import { mountRouterSidebarEntry } from './sidebar-entry.ts'
 import { RouterWorkspaceController } from './workspace-controller.ts'
@@ -24,13 +23,7 @@ function conversationColumn(): HTMLElement | undefined {
 
 function mountPanel(controller: RouterWorkspaceController): () => void {
   function Panel(): JSX.Element {
-    useEffect(() => {
-      // Keep the panel title in the browser tab for orientation, like the
-      // official panels do.
-      const original = document.title
-      document.title = ROUTER_TITLE
-      return () => { document.title = original }
-    }, [])
+    // 不改 document.title：这是宿主页面（会话）的标题，插件不该动它。
     return <RouterView onBack={() => controller.close()} />
   }