dsh-opencode-routing 2.1.0 → 2.2.1

package/README.md

@@ -62,6 +62,14 @@ npm i dsh-opencode-routing
 
 「查看用量」按钮按账户弹窗展示三个窗口的百分比、重置时间与探测结果（只探测该账户，不切换模型）。
 
+「编辑密钥」直接用 `GET /opencode-quota-router.json?key=<账户 id>` 取回该账户的当前密钥并预填输入框
+（本机端点；列表快照始终只给掩码）。模型名按厂商习惯大写（`deepseek-v4.1-flash` → `DeepSeek V4.1 Flash`），
+能取到品牌图标的厂商显示 SVG 图标，取不到的保留字母徽标。「下次探测」是真实的定时器（默认 30 分钟一次），
+页面每秒重绘一次，所以会像倒计时一样走；打开页面本身只读快照，不会触发探测。
+
+「此刻用哪个更划算」按套餐杠杆算：Go 付 $10 拿到 $100 官方价额度（≈¥710），所以走 OpenCode 恒为官方价的
+10%（便宜 90%）。真实数据里不会出现官方更便宜，卡片右下角的按钮可以切到示例数据，看那种情况长什么样。
+
 模型表的「能力」列来自同一个模型目录接口（`/inference/go/v1/models`）的
 `modalities.input` 与 `capabilities`，标出 文本 / 图像 / 视频 / 音频 / PDF、工具调用、推理，以及上下文长度；
 价格为 0 的模型显示「无限」。

package/client.js

@@ -40,7 +40,7 @@ window.__ModuleLoader__.load({
         setActive: '设为当前',
         disable: '停用',
         enable: '启用',
-        editKey: '改密钥',
+        editKey: '编辑密钥',
         remove: '删除',
         viewUsage: '查看用量',
         keyUpdated: '密钥已更新',
@@ -101,15 +101,20 @@ window.__ModuleLoader__.load({
         peakGoOff: '谷段',
         peakOfficialPeak: '峰段（价格 2 倍）',
         peakOfficialOff: '谷段',
-        peakAtPeak: '峰段',
-        peakOffPeak: '谷段',
+        peakAtPeak: '高峰期',
+        peakOffPeak: '低谷期',
         peakHoliday: '——今天是中国法定节假日，官方整天算谷，OpenCode 照算峰',
         peakExhausted: '但本月额度已经用尽，只能走官方。',
         peakGoPay: '走 OpenCode 你实付',
         peakOfficialPay: '走官方直连你实付',
         peakVerdict: '结论',
         peakGoCheaper: '走 OpenCode 便宜 {percent}%',
-        peakOfficialCheaper: '走官方直连便宜 {percent}%',
+        verdictGo: '走 OpenCode 便宜 {percent}%',
+        verdictOfficial: '走官方直连便宜 {percent}%',
+        verdictExhausted: '本月额度已用尽，只能走官方直连',
+        demoOn: '看官方更便宜的样子',
+        demoOff: '回到真实数据',
+        demoNote: '示例数据：假设某个模型走 OpenCode 反而更贵（现实中只有额度用尽才会发生）。',
         peakFootnote: '按每 100 万输出 tokens 折算（编码账单主要来自输出），汇率 ¥{fx}/$。峰谷只影响额度烧多快，不改变结论：额度内走 OpenCode 始终比官方直连便宜；例外是额度用尽，或某个模型的额度先见底。',
         footerOfficial: '上面「官方 5 小时 / 本周 / 本月」百分比来自 OpenCode 接口，是账户真实用量，别的客户端或别的机器用了也会算进去。',
         footerLocal: '按模型的金额是本机估算：只统计这个 harness 的会话日志，用来拆开看模型分布；其它工具的调用没有本地记录。',
@@ -142,7 +147,7 @@ window.__ModuleLoader__.load({
         setActive: 'Make active',
         disable: 'Disable',
         enable: 'Enable',
-        editKey: 'Change key',
+        editKey: 'Edit key',
         remove: 'Delete',
         viewUsage: 'View usage',
         keyUpdated: 'Key updated',
@@ -211,7 +216,12 @@ window.__ModuleLoader__.load({
         peakOfficialPay: 'You pay via official API',
         peakVerdict: 'Verdict',
         peakGoCheaper: 'OpenCode is {percent}% cheaper',
-        peakOfficialCheaper: 'Official API is {percent}% cheaper',
+        verdictGo: 'OpenCode is {percent}% cheaper',
+        verdictOfficial: 'Official API is {percent}% cheaper',
+        verdictExhausted: 'This month’s allowance is used up, so only the official API is left',
+        demoOn: 'Show the official-is-cheaper case',
+        demoOff: 'Back to real data',
+        demoNote: 'Sample data: pretend one model is more expensive on OpenCode — in practice that only happens once the allowance runs out.',
         peakFootnote: 'Per 1M output tokens (output dominates a coding bill), at ¥{fx}/$. Peak hours only change how fast the allowance burns, not the verdict: on allowance, OpenCode stays cheaper than the official API; the exceptions are a spent allowance or a model whose individual cap runs out first.',
         footerOfficial: 'The official 5-hour / weekly / monthly percentages come from OpenCode’s API and describe the whole account — usage from other clients or machines counts too.',
         footerLocal: 'Per-model money is a local estimate: it only counts this harness’s session log, which is what makes the model split visible; calls from other tools leave no local record.',
@@ -244,7 +254,7 @@ window.__ModuleLoader__.load({
         setActive: '設為目前',
         disable: '停用',
         enable: '啟用',
-        editKey: '更換金鑰',
+        editKey: '編輯金鑰',
         remove: '刪除',
         viewUsage: '查看用量',
         keyUpdated: '金鑰已更新',
@@ -305,15 +315,20 @@ window.__ModuleLoader__.load({
         peakGoOff: '谷段',
         peakOfficialPeak: '峰段（價格 2 倍）',
         peakOfficialOff: '谷段',
-        peakAtPeak: '峰段',
-        peakOffPeak: '谷段',
+        peakAtPeak: '高峰期',
+        peakOffPeak: '低谷期',
         peakHoliday: '——今天是中國法定假日，官方整天算谷，OpenCode 照算峰',
         peakExhausted: '但本月額度已用盡，只能走官方。',
         peakGoPay: '走 OpenCode 你實付',
         peakOfficialPay: '走官方直連你實付',
         peakVerdict: '結論',
         peakGoCheaper: '走 OpenCode 便宜 {percent}%',
-        peakOfficialCheaper: '走官方直連便宜 {percent}%',
+        verdictGo: '走 OpenCode 便宜 {percent}%',
+        verdictOfficial: '走官方直連便宜 {percent}%',
+        verdictExhausted: '本月額度已用盡，只能走官方直連',
+        demoOn: '看官方更便宜的樣子',
+        demoOff: '回到真實資料',
+        demoNote: '範例資料：假設某個模型走 OpenCode 反而更貴（現實中只有額度用盡才會發生）。',
         peakFootnote: '依每 100 萬輸出 tokens 折算（編碼帳單主要來自輸出），匯率 ¥{fx}/$。峰谷只影響額度消耗速度，不改變結論：額度內走 OpenCode 始終比官方直連便宜；例外是額度用盡，或某個模型的額度先用完。',
         footerOfficial: '上面「官方 5 小時／本週／本月」百分比來自 OpenCode 介面，是帳號真實用量，其他用戶端或機器用掉的也會算進去。',
         footerLocal: '依模型的金額是本機估算：只統計這個 harness 的工作階段日誌，用來拆開看模型分布；其他工具的呼叫沒有本機記錄。',
@@ -1084,14 +1099,62 @@ window.__ModuleLoader__.load({
     const when = (ms) => {
       if (!ms) return t('none');
       const delta = ms - Date.now();
-      if (delta <= 0) return localeOf(navigator.language) === 'zh' || LANG === 'zh-tw' ? '已到期' : 'expired';
-      const minutes = Math.round(delta / 60000);
+      if (delta <= 0) return LANG === 'zh' || LANG === 'zh-tw' ? '已到期' : 'expired';
+      const minutes = Math.floor(delta / 60000);
+      const seconds = Math.floor((delta % 60000) / 1000);
       const relative = LANG === 'zh' || LANG === 'zh-tw'
-        ? `${minutes < 60 ? `${minutes} 分钟` : `${Math.round(minutes / 60)} 小时`}后`
+        ? minutes < 60
+          ? `${minutes} 分 ${String(seconds).padStart(2, '0')} 秒后`
+          : `${Math.round(minutes / 60)} 小时后`
         : new Date(ms).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
       return relative;
     };
 
+    // The dialog floats over the page, so it cannot inherit a translucent surface:
+    // it needs a solid fill and an explicit text colour for the current theme.
+    const theme = () => {
+      let dark = false;
+      try {
+        if (typeof window.matchMedia === 'function' && window.matchMedia('(prefers-color-scheme: dark)').matches) dark = true;
+        else {
+          const match = /rgba?\((\d+),\s*(\d+),\s*(\d+)/.exec(getComputedStyle(document.documentElement).backgroundColor ?? '');
+          if (match !== null) dark = (Number(match[1]) + Number(match[2]) + Number(match[3])) / 3 < 128;
+        }
+      } catch {
+        dark = true;
+      }
+      return dark
+        ? { panel: '#202124', text: '#ececec', line: 'rgba(255,255,255,.18)', scrim: 'rgba(0,0,0,.55)' }
+        : { panel: '#ffffff', text: '#1b1b1b', line: 'rgba(0,0,0,.15)', scrim: 'rgba(0,0,0,.35)' };
+    };
+
+    // Model ids read badly in a table ("deepseek-v4.1-flash"); the page shows the
+    // vendor casing plus spaces instead.
+    const MODEL_CASE = [
+      [/^deepseek/i, 'DeepSeek'], [/^glm/i, 'GLM'], [/^gpt/i, 'GPT'], [/^claude/i, 'Claude'],
+      [/^grok/i, 'Grok'], [/^qwen/i, 'Qwen'], [/^kimi/i, 'Kimi'], [/^minimax/i, 'MiniMax'],
+      [/^mimo/i, 'MiMo'], [/^longcat/i, 'LongCat'], [/^hunyuan/i, 'Hunyuan'], [/^hy\d/i, 'Hunyuan'],
+      [/^muse/i, 'Muse'],
+    ];
+    const prettyModel = (id) => {
+      const text = String(id ?? '');
+      let head = '';
+      let rest = text;
+      for (const [pattern, name] of MODEL_CASE) {
+        if (!pattern.test(text)) continue;
+        head = name;
+        rest = text.replace(pattern, '');
+        break;
+      }
+      const tail = rest
+        .replace(/[-_]+/g, ' ')
+        .split(' ')
+        .filter(Boolean)
+        .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+        .join(' ');
+      return [head, tail].filter(Boolean).join(' ');
+    };
+
     const btn = {
       padding: '5px 12px', borderRadius: 6, border: '1px solid rgba(127,127,127,.45)',
       background: 'transparent', color: 'inherit', cursor: 'pointer', font: 'inherit', fontSize: 12,
@@ -1181,9 +1244,10 @@ window.__ModuleLoader__.load({
 
     function UsageDialog({ account, busy, onProbe, onClose }) {
       if (!account) return null;
+      const skin = theme();
       return h('div', {
         style: {
-          position: 'fixed', inset: 0, background: 'rgba(0,0,0,.45)', zIndex: 1200,
+          position: 'fixed', inset: 0, background: skin.scrim, zIndex: 1200,
           display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16,
         },
         onMouseDown: (event) => { if (event.target === event.currentTarget) onClose(); },
@@ -1191,8 +1255,8 @@ window.__ModuleLoader__.load({
         h('div', {
           style: {
             minWidth: 380, maxWidth: 520, width: '100%', padding: '16px 18px', borderRadius: 10,
-            background: 'var(--dsh-surface, #1b1b1b)', color: 'inherit',
-            border: '1px solid rgba(127,127,127,.35)', boxShadow: '0 18px 48px rgba(0,0,0,.45)',
+            background: skin.panel, color: skin.text, opacity: 1,
+            border: `1px solid ${skin.line}`, boxShadow: '0 18px 48px rgba(0,0,0,.45)',
           },
         },
           h('div', { style: { display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 } },
@@ -1201,7 +1265,7 @@ window.__ModuleLoader__.load({
               style: { fontSize: 11, padding: '1px 6px', borderRadius: 999, border: '1px solid rgba(60,157,93,.6)', color: '#3c9d5d' },
             }, t('statusCurrent')) : null,
             h('span', { style: { flex: 1 } }),
-            h('button', { type: 'button', style: btn, onClick: onClose }, t('close')),
+            h('button', { type: 'button', className: 'ocr-btn', style: btn, onClick: onClose }, t('close')),
           ),
           h('div', { style: { fontSize: 12, opacity: .6, marginBottom: 12 } },
             account.hint ? h('span', { style: { fontFamily: 'ui-monospace, Consolas, monospace' } }, account.hint) : t('notConfigured')),
@@ -1212,7 +1276,7 @@ window.__ModuleLoader__.load({
           h('div', { style: { display: 'flex', alignItems: 'center', gap: 8, marginTop: 6 } },
             account.checkedAt ? h('span', { style: { fontSize: 11, opacity: .55 } }, t('probedAt', { time: clock(account.checkedAt) })) : null,
             h('span', { style: { flex: 1 } }),
-            h('button', { type: 'button', style: btn, disabled: busy, onClick: onProbe }, t('dialogProbe')),
+            h('button', { type: 'button', className: 'ocr-btn', style: btn, disabled: busy, onClick: onProbe }, t('dialogProbe')),
           ),
           h('div', { style: { fontSize: 11, opacity: .55, marginTop: 12, lineHeight: 1.6 } }, t('dialogNote')),
         ),
@@ -1228,6 +1292,14 @@ window.__ModuleLoader__.load({
       const [keyDraft, setKeyDraft] = React.useState('');
       const [inspecting, setInspecting] = React.useState(null);
       const [busy, setBusy] = React.useState(false);
+      const [demo, setDemo] = React.useState(false);
+      // Re-render every second so the "next probe" line counts down instead of
+      // freezing at whatever it said when the page opened.
+      const [, setTick] = React.useState(0);
+      React.useEffect(() => {
+        const timer = setInterval(() => setTick((value) => value + 1), 1000);
+        return () => clearInterval(timer);
+      }, []);
 
       const load = React.useCallback(async (force) => {
         try {
@@ -1269,6 +1341,18 @@ window.__ModuleLoader__.load({
         }
       }, [load]);
 
+      // Editing a key starts from the stored value, so the input is pre-filled.
+      const revealKey = React.useCallback(async (id) => {
+        try {
+          const response = await fetch(`${ROUTER_API}?key=${encodeURIComponent(id)}`, { headers: { accept: 'application/json' } });
+          const body = await response.json().catch(() => ({}));
+          if (!response.ok) throw new Error(body?.error ?? `HTTP ${response.status}`);
+          if (typeof body?.key === 'string') setKeyDraft(body.key);
+        } catch (error) {
+          setActionError(String(error?.message ?? error));
+        }
+      }, []);
+
       React.useEffect(() => {
         let alive = true;
         const run = (force) => {
@@ -1286,6 +1370,76 @@ window.__ModuleLoader__.load({
       const data = state.usage;
       const router = state.router;
       const statusText = STATUS();
+      const chinese = LANG === 'zh' || LANG === 'zh-tw';
+
+      // The router stores machine reasons ("allowance recovered"); the page says
+      // what actually happened instead of echoing the enum.
+      const reasonText = (reason) => {
+        const raw = String(reason ?? '');
+        const pick = (zh, en) => (chinese ? zh : en);
+        const rules = [
+          [/^allowance recovered/i, pick('额度已恢复，已切回 OpenCode 账户池', 'allowance recovered, back on the OpenCode pool')],
+          [/^reset in Settings/i, pick('在设置里重置了封禁标记', 'marks were reset in Settings')],
+          [/^selected in Settings/i, pick('在设置里手动设为当前账户', 'selected by hand in Settings')],
+          [/^first account added/i, pick('首个账户已启用', 'the first account was enabled')],
+          [/^initial$/i, pick('初始状态', 'initial')],
+          [/^loaded$/i, pick('从状态文件恢复', 'restored from the state file')],
+          [/^failover: (\S+) unavailable/i, pick('上一个账户不可用，已自动换下一个', 'the previous account went unavailable, switched to the next one')],
+          [/^account failover after (\w+)/i, pick('鉴权失败（$1），已换下一个账户', 'authentication failed ($1), switched to the next account')],
+          [/^quota failover from (\S+)/i, pick('$1 额度用尽，已换下一个账户', '$1 ran out of allowance, switched to the next account')],
+          [/^every OpenCode account is out of allowance/i, pick('所有账户额度都用完了，暂时走官方直连', 'every account is out of allowance, using the official API for now')],
+          [/^OpenCode authentication failed \((\w+)\)/i, pick('OpenCode 鉴权失败（$1），暂时走官方直连', 'OpenCode authentication failed ($1), using the official API for now')],
+          [/^OpenCode quota window exhausted/i, pick('本窗口额度用尽，暂时走官方直连', 'this allowance window is used up, using the official API for now')],
+          [/^OpenCode quota exhausted/i, pick('额度用尽，暂时走官方直连', 'out of allowance, using the official API for now')],
+          [/^active account (\S+) removed/i, pick('当前账户被删除，已自动换下一个', 'the active account was deleted, switched to the next one')],
+          [/^auth \((.+)\)/i, pick('鉴权失败：$1', 'authentication failed: $1')],
+        ];
+        for (const [pattern, text] of rules) {
+          if (pattern.test(raw)) return raw.replace(pattern, text);
+        }
+        return raw;
+      };
+
+      // A vendor badge per model family: the mark and the tint both come from the
+      // family, so a card's gradient matches its avatar.
+      const LOGOS = {
+        deepseek: 'M23.748 4.651c-.254-.124-.364.113-.512.233-.051.04-.094.09-.137.137-.372.397-.806.657-1.373.626-.829-.046-1.537.214-2.163.848-.133-.782-.575-1.248-1.247-1.548-.352-.155-.708-.311-.955-.65-.172-.24-.219-.509-.305-.774-.055-.16-.11-.323-.293-.35-.2-.031-.278.136-.356.276-.313.572-.434 1.202-.422 1.84.027 1.436.633 2.58 1.838 3.393.137.094.172.187.129.323-.082.28-.18.553-.266.833-.055.179-.137.218-.328.14a5.5 5.5 0 0 1-1.737-1.179c-.857-.828-1.631-1.743-2.597-2.46a12 12 0 0 0-.689-.47c-.985-.957.13-1.743.387-1.836.27-.098.094-.433-.778-.428-.872.003-1.67.295-2.687.685a3 3 0 0 1-.465.136 9.6 9.6 0 0 0-2.883-.101c-1.885.21-3.39 1.1-4.497 2.622C.082 8.776-.231 10.854.152 13.02c.403 2.284 1.568 4.175 3.36 5.653 1.857 1.533 3.997 2.284 6.438 2.14 1.482-.085 3.132-.284 4.994-1.86.47.234.962.328 1.78.398.629.058 1.235-.031 1.705-.129.735-.155.684-.836.418-.961-2.155-1.004-1.682-.595-2.112-.926 1.095-1.295 2.768-3.598 3.284-6.733.05-.346.115-.834.108-1.114-.004-.171.035-.238.23-.257a4.2 4.2 0 0 0 1.545-.475c1.397-.763 1.96-2.016 2.093-3.517.02-.23-.004-.467-.247-.588M11.58 18.168c-2.088-1.642-3.101-2.183-3.52-2.16-.39.024-.32.472-.234.763.09.288.207.487.371.74.114.167.192.416-.113.603-.673.416-1.842-.14-1.897-.168-1.361-.801-2.5-1.86-3.301-3.306-.775-1.393-1.225-2.888-1.299-4.482-.02-.385.094-.522.477-.592a4.7 4.7 0 0 1 1.53-.038c2.131.311 3.946 1.264 5.467 2.774.868.86 1.525 1.887 2.202 2.89.72 1.066 1.494 2.082 2.48 2.915.348.291.626.513.892.677-.802.09-2.14.109-3.055-.615zm1.001-6.44a.306.306 0 0 1 .415-.287.3.3 0 0 1 .113.074.3.3 0 0 1 .086.214c0 .17-.136.307-.308.307a.303.303 0 0 1-.306-.307m3.11 1.596c-.2.081-.4.151-.591.16a1.25 1.25 0 0 1-.798-.254c-.274-.23-.47-.358-.551-.758a1.7 1.7 0 0 1 .015-.588c.07-.327-.007-.537-.238-.727-.188-.156-.426-.199-.689-.199a.6.6 0 0 1-.254-.078.253.253 0 0 1-.114-.358 1 1 0 0 1 .192-.21c.356-.202.767-.136 1.146.016.352.144.618.408 1.001.782.392.451.462.576.685.915.176.264.336.536.446.848.066.194-.02.353-.25.45',
+        claude: 'm4.7144 15.9555 4.7174-2.6471.079-.2307-.079-.1275h-.2307l-.7893-.0486-2.6956-.0729-2.3375-.0971-2.2646-.1214-.5707-.1215-.5343-.7042.0546-.3522.4797-.3218.686.0608 1.5179.1032 2.2767.1578 1.6514.0972 2.4468.255h.3886l.0546-.1579-.1336-.0971-.1032-.0972L6.973 9.8356l-2.55-1.6879-1.3356-.9714-.7225-.4918-.3643-.4614-.1578-1.0078.6557-.7225.8803.0607.2246.0607.8925.686 1.9064 1.4754 2.4893 1.8336.3643.3035.1457-.1032.0182-.0728-.164-.2733-1.3539-2.4467-1.445-2.4893-.6435-1.032-.17-.6194c-.0607-.255-.1032-.4674-.1032-.7285L6.287.1335 6.6997 0l.9957.1336.419.3642.6192 1.4147 1.0018 2.2282 1.5543 3.0296.4553.8985.2429.8318.091.255h.1579v-.1457l.1275-1.706.2368-2.0947.2307-2.6957.0789-.7589.3764-.9107.7468-.4918.5828.2793.4797.686-.0668.4433-.2853 1.8517-.5586 2.9021-.3643 1.9429h.2125l.2429-.2429.9835-1.3053 1.6514-2.0643.7286-.8196.85-.9046.5464-.4311h1.0321l.759 1.1293-.34 1.1657-1.0625 1.3478-.8804 1.1414-1.2628 1.7-.7893 1.36.0729.1093.1882-.0183 2.8535-.607 1.5421-.2794 1.8396-.3157.8318.3886.091.3946-.3278.8075-1.967.4857-2.3072.4614-3.4364.8136-.0425.0304.0486.0607 1.5482.1457.6618.0364h1.621l3.0175.2247.7892.522.4736.6376-.079.4857-1.2142.6193-1.6393-.3886-3.825-.9107-1.3113-.3279h-.1822v.1093l1.0929 1.0686 2.0035 1.8092 2.5075 2.3314.1275.5768-.3218.4554-.34-.0486-2.2039-1.6575-.85-.7468-1.9246-1.621h-.1275v.17l.4432.6496 2.3436 3.5214.1214 1.0807-.17.3521-.6071.2125-.6679-.1214-1.3721-1.9246L14.38 17.959l-1.1414-1.9428-.1397.079-.674 7.2552-.3156.3703-.7286.2793-.6071-.4614-.3218-.7468.3218-1.4753.3886-1.9246.3157-1.53.2853-1.9004.17-.6314-.0121-.0425-.1397.0182-1.4328 1.9672-2.1796 2.9446-1.7243 1.8456-.4128.164-.7164-.3704.0667-.6618.4008-.5889 2.386-3.0357 1.4389-1.882.929-1.0868-.0062-.1579h-.0546l-6.3385 4.1164-1.1293.1457-.4857-.4554.0608-.7467.2307-.2429 1.9064-1.3114Z',
+        grok: 'M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z',
+        qwen: 'M23.919 14.545 20.817 9.17l1.47-2.544a.56.56 0 0 0 0-.566l-1.633-2.83a.57.57 0 0 0-.49-.283h-6.207L12.487.402a.57.57 0 0 0-.49-.284H8.732a.56.56 0 0 0-.49.284L5.139 5.775h-2.94a.56.56 0 0 0-.49.284L.077 8.887a.56.56 0 0 0 0 .567L3.18 14.83l-1.47 2.545a.56.56 0 0 0 0 .566l1.634 2.83a.57.57 0 0 0 .49.283h6.205l1.47 2.545a.57.57 0 0 0 .49.284h3.266a.57.57 0 0 0 .49-.284l3.104-5.375h2.94a.57.57 0 0 0 .49-.283l1.634-2.828a.55.55 0 0 0-.004-.568M8.733.686l1.634 2.828-1.634 2.828H21.8L20.164 9.17H7.425L5.63 6.06Zm1.306 19.801-6.205-.002 1.634-2.83h3.265L2.201 6.344h3.267q3.182 5.517 6.367 11.032zm10.124-5.66L18.53 12l-6.532 11.315-1.634-2.83c2.129-3.673 4.25-7.351 6.373-11.028h3.592l3.102 5.374z',
+        kimi: 'M21.765.351C22.998.351 24 1.353 24 2.586S22.998 4.82 21.765 4.82h-1.974c-.15 0-.26-.12-.26-.26V2.586A2.237 2.237 0 0 1 21.765.35M9.41 13.388l8.447-8.377c.16-.16.07-.471-.14-.471h-4.55s-.1.02-.14.06l-9.099 9.029c-.14.14-.35.02-.35-.21V4.81c0-.15-.1-.27-.221-.27H.22c-.12 0-.22.12-.22.27v18.57c0 .15.1.27.22.27h3.137c.12 0 .22-.12.22-.27v-3.79c0-.08.03-.16.08-.21l2.826-2.796c.07-.07.16-.08.241-.03l7.546 5.551a8.9 8.9 0 0 0 4.018 1.493c.12.01.23-.11.23-.27V19.76c0-.14-.08-.25-.19-.26a5.8 5.8 0 0 1-2.355-.942l-6.533-4.73c-.14-.09-.15-.32-.03-.441',
+        minimax: 'M11.43 3.92a.86.86 0 1 0-1.718 0v14.236a1.999 1.999 0 0 1-3.997 0V9.022a.86.86 0 1 0-1.718 0v3.87a1.999 1.999 0 0 1-3.997 0V11.49a.57.57 0 0 1 1.139 0v1.404a.86.86 0 0 0 1.719 0V9.022a1.999 1.999 0 0 1 3.997 0v9.134a.86.86 0 0 0 1.719 0V3.92a1.998 1.998 0 1 1 3.996 0v11.788a.57.57 0 1 1-1.139 0zm10.572 3.105a2 2 0 0 0-1.999 1.997v7.63a.86.86 0 0 1-1.718 0V3.923a1.999 1.999 0 0 0-3.997 0v16.16a.86.86 0 0 1-1.719 0V18.08a.57.57 0 1 0-1.138 0v2a1.998 1.998 0 0 0 3.996 0V3.92a.86.86 0 0 1 1.719 0v12.73a1.999 1.999 0 0 0 3.996 0V9.023a.86.86 0 1 1 1.72 0v6.686a.57.57 0 0 0 1.138 0V9.022a2 2 0 0 0-1.998-1.997',
+        mimo: 'M12 0C8.016 0 4.756.255 2.493 2.516.23 4.776 0 8.033 0 12.012c0 3.98.23 7.235 2.494 9.497C4.757 23.77 8.017 24 12 24c3.983 0 7.243-.23 9.506-2.491C23.77 19.247 24 15.99 24 12.012c0-3.984-.233-7.243-2.502-9.504C19.234.252 15.978 0 12 0zM4.906 7.405h5.624c1.47 0 3.007.068 3.764.827.746.746.827 2.233.83 3.676v4.54a.15.15 0 0 1-.152.147h-1.947a.15.15 0 0 1-.152-.148V11.83c-.002-.806-.048-1.634-.464-2.051-.358-.36-1.026-.441-1.72-.458H7.158a.15.15 0 0 0-.151.147v6.98a.15.15 0 0 1-.152.148H4.906a.15.15 0 0 1-.15-.148V7.554a.15.15 0 0 1 .15-.149zm12.131 0h1.949a.15.15 0 0 1 .15.15v8.892a.15.15 0 0 1-.15.148h-1.949a.15.15 0 0 1-.151-.148V7.554a.15.15 0 0 1 .151-.149zM8.92 10.948h2.046c.083 0 .15.066.15.147v5.352a.15.15 0 0 1-.15.148H8.92a.15.15 0 0 1-.152-.148v-5.352a.15.15 0 0 1 .152-.147Z',
+      };
+
+      const VENDORS = [
+        [/^deepseek/i, { mark: 'DS', name: 'DeepSeek', color: '#4d6bfe', logo: 'deepseek' }],
+        [/^glm/i, { mark: 'GLM', name: 'Zhipu', color: '#3b6cf6' }],
+        [/^gpt/i, { mark: 'GPT', name: 'OpenAI', color: '#10a37f' }],
+        [/^claude/i, { mark: 'C', name: 'Anthropic', color: '#d97757', logo: 'claude' }],
+        [/^grok/i, { mark: 'X', name: 'xAI', color: '#64748b', logo: 'grok' }],
+        [/^qwen/i, { mark: 'Q', name: 'Qwen', color: '#615ced', logo: 'qwen' }],
+        [/^kimi/i, { mark: 'K', name: 'Moonshot', color: '#8b5cf6', logo: 'kimi' }],
+        [/^minimax/i, { mark: 'MM', name: 'MiniMax', color: '#ff6b00', logo: 'minimax' }],
+        [/^mimo/i, { mark: 'Mi', name: 'MiMo', color: '#ff6900', logo: 'mimo' }],
+        [/^longcat/i, { mark: 'LC', name: 'LongCat', color: '#f59e0b' }],
+        [/^hy\d/i, { mark: 'H', name: 'Hunyuan', color: '#0057ff' }],
+        [/^muse/i, { mark: 'M', name: 'Muse', color: '#a855f7' }],
+        [/free$/i, { mark: '∞', name: 'Free', color: '#3c9d5d' }],
+      ];
+      const vendorOf = (model) => {
+        const hit = VENDORS.find(([pattern]) => pattern.test(model));
+        const vendor = hit ? { ...hit[1] } : { mark: String(model).slice(0, 2).toUpperCase(), name: model, color: '#6b7280' };
+        if (vendor.logo && LOGOS[vendor.logo]) vendor.path = LOGOS[vendor.logo];
+        return vendor;
+      };
+
+      const CAP_ICON = { text: '📝', image: '🖼️', video: '🎬', audio: '🎵', pdf: '📄' };
+      const capIcon = (label) => {
+        if (label === t('capsTools')) return '🛠️';
+        if (label === t('capsReasoning')) return '🧠';
+        return CAP_ICON[label] ?? '•';
+      };
 
       const routerAccounts = new Map((router?.accounts ?? []).map((account) => [account.id, account]));
       const usageAccounts = data?.accounts ?? [];
@@ -1311,86 +1465,127 @@ window.__ModuleLoader__.load({
         };
       });
 
-      const accountRows = accountList.map((account, index) => {
+      // Layout primitives: every block is a card with its own padding and gap, so
+      // buttons never sit flush against each other or against the table edges.
+      const card = (...children) => h('div', {
+        style: {
+          padding: '14px 16px', border: '1px solid rgba(127,127,127,.25)', borderRadius: 10,
+          background: 'var(--dsh-surface, rgba(127,127,127,.04))',
+          display: 'flex', flexDirection: 'column', gap: 12,
+        },
+      }, ...children);
+
+      const cardHead = (text, extra) => h('div', {
+        style: { display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' },
+      },
+        h('span', { style: { fontWeight: 600, fontSize: 13 } }, text),
+        extra ?? null,
+      );
+
+      const stat = (label, value) => h('div', {
+        style: { display: 'flex', flexDirection: 'column', gap: 3, minWidth: 96 },
+      },
+        h('span', { style: { fontSize: 11, opacity: .55 } }, label),
+        h('span', { style: { fontSize: 13, fontWeight: 500 } }, value),
+      );
+
+      const tools = (...children) => h('div', {
+        style: { display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' },
+      }, ...children);
+
+      const pill = (text, color) => h('span', {
+        style: {
+          fontSize: 11, padding: '1px 8px', borderRadius: 999,
+          border: `1px solid ${color}99`, color,
+        },
+      }, text);
+
+      const accountCards = accountList.map((account, index) => {
         const [text, color] = statusText[account.status] ?? [
           account.usageError ? t('statusError') : account.enabled === false ? t('statusDisabled') : account.active ? t('statusActive') : t('statusSpare'),
           account.usageError ? '#d9534f' : 'inherit',
         ];
-        return h(React.Fragment, { key: account.id },
-          h('tr', null,
-            cell(String(index + 1), { opacity: .6 }),
-            cell(h('span', null,
-              account.label,
-              account.active ? h('span', {
-                style: { marginLeft: 8, fontSize: 11, padding: '1px 6px', borderRadius: 999, border: '1px solid rgba(60,157,93,.6)', color: '#3c9d5d' },
-              }, t('statusCurrent')) : null,
-            )),
-            cell(account.hint
-              ? h('span', { style: { fontFamily: 'ui-monospace, Consolas, monospace', fontSize: 12 } }, account.hint)
-              : h('span', { style: { opacity: .55 } }, t('notConfigured'))),
-            cell(official(account.usage?.rolling)),
-            cell(official(account.usage?.weekly)),
-            cell(official(account.usage?.monthly)),
-            cell(h('span', { style: { color } },
+        return h('div', {
+          key: account.id,
+          style: {
+            display: 'flex', flexDirection: 'column', gap: 12, padding: '12px 14px', borderRadius: 10,
+            border: `1px solid ${account.active ? 'rgba(60,157,93,.45)' : 'rgba(127,127,127,.22)'}`,
+            background: account.active ? 'rgba(60,157,93,.06)' : 'rgba(127,127,127,.03)',
+          },
+        },
+          h('div', { style: { display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' } },
+            h('span', { style: { opacity: .45, fontSize: 11 } }, `#${index + 1}`),
+            h('span', { style: { fontWeight: 600, fontSize: 13 } }, account.label),
+            account.active ? pill(t('statusCurrent'), '#3c9d5d') : null,
+            h('span', {
+              style: { fontFamily: 'ui-monospace, Consolas, monospace', fontSize: 12, opacity: account.hint ? .65 : .45 },
+            }, account.hint ?? t('notConfigured')),
+            h('span', { style: { flex: 1 } }),
+            h('span', { style: { color, fontSize: 12 } },
               text,
-              account.exhaustedUntil ? ` · ${clock(account.exhaustedUntil)}` : '',
-            )),
-            cell(router && h('div', {
-              style: {
-                display: 'grid', gridTemplateColumns: 'repeat(2, minmax(78px, max-content))',
-                gap: 6, padding: '2px 0',
-              },
-            },
-              h('button', { type: 'button', style: btn, onClick: () => setInspecting(account.id) }, t('viewUsage')),
-              h('button', { type: 'button', style: btn, disabled: busy || account.active, onClick: () => void act({ action: 'activate', id: account.id }) }, t('setActive')),
-              h('button', { type: 'button', style: btn, disabled: busy, onClick: () => void act({ action: 'update', id: account.id, enabled: !account.enabled }) }, account.enabled ? t('disable') : t('enable')),
-              h('button', {
-                type: 'button', style: btn, disabled: busy,
-                onClick: () => { void act({ action: 'move', id: account.id, direction: 'up' }); },
-              }, '↑'),
-              h('button', {
-                type: 'button', style: btn, disabled: busy,
-                onClick: () => { void act({ action: 'move', id: account.id, direction: 'down' }); },
-              }, '↓'),
-              h('button', {
-                type: 'button', style: btn, disabled: busy,
-                onClick: () => { setEditing(editing === account.id ? null : account.id); setKeyDraft(''); },
-              }, t('editKey')),
-              h('button', {
-                type: 'button', style: { ...btn, color: '#d9534f' }, disabled: busy,
-                onClick: () => {
-                  if (accountList.length <= 1) {
-                    setActionError(t('keepOne'));
-                    return;
-                  }
-                  void act({ action: 'remove', id: account.id });
-                },
-              }, t('remove')),
-            ) || h('span', { style: { opacity: .5, fontSize: 12 } }, t('readonly'))),
+              account.exhaustedUntil ? ` · ${clock(account.exhaustedUntil)}` : ''),
           ),
+          h('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(110px, 1fr))', gap: 12 } },
+            stat(t('colRolling'), official(account.usage?.rolling)),
+            stat(t('colWeekly'), official(account.usage?.weekly)),
+            stat(t('colMonthly'), official(account.usage?.monthly)),
+          ),
+          router
+            ? h('div', { style: { display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap', paddingTop: 2 } },
+                h('button', { type: 'button', className: 'ocr-btn', style: btn, onClick: () => setInspecting(account.id) }, t('viewUsage')),
+                h('button', { type: 'button', className: 'ocr-btn', style: btn, disabled: busy || account.active, onClick: () => void act({ action: 'activate', id: account.id }) }, t('setActive')),
+                h('button', { type: 'button', className: 'ocr-btn', style: btn, disabled: busy, onClick: () => void act({ action: 'update', id: account.id, enabled: !account.enabled }) }, account.enabled ? t('disable') : t('enable')),
+                h('button', { type: 'button', className: 'ocr-btn', style: btn, disabled: busy, onClick: () => { void act({ action: 'move', id: account.id, direction: 'up' }); } }, '↑'),
+                h('button', { type: 'button', className: 'ocr-btn', style: btn, disabled: busy, onClick: () => { void act({ action: 'move', id: account.id, direction: 'down' }); } }, '↓'),
+                h('button', {
+                  type: 'button', className: 'ocr-btn', style: btn, disabled: busy,
+                  onClick: () => {
+                    if (editing === account.id) {
+                      setEditing(null);
+                      setKeyDraft('');
+                      return;
+                    }
+                    setEditing(account.id);
+                    setKeyDraft('');
+                    void revealKey(account.id);
+                  },
+                }, t('editKey')),
+                h('button', {
+                  type: 'button', className: 'ocr-btn', style: { ...btn, color: '#d9534f' }, disabled: busy,
+                  onClick: () => {
+                    if (accountList.length <= 1) {
+                      setActionError(t('keepOne'));
+                      return;
+                    }
+                    void act({ action: 'remove', id: account.id });
+                  },
+                }, t('remove')),
+              )
+            : h('span', { style: { opacity: .5, fontSize: 12 } }, t('readonly')),
           editing === account.id
-            ? h('tr', { key: `${account.id}-edit` },
-                h('td', { colSpan: 8, style: { padding: '6px 10px', borderBottom: '1px solid rgba(127,127,127,.22)' } },
-                  h('div', { style: { display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' } },
-                    h('span', { style: { opacity: .7, fontSize: 12 } }, t('newKeyFor', { ref: account.keyRef ?? '' })),
-                    h('input', {
-                      style: { ...input, minWidth: 320 }, type: 'password', placeholder: 'oc_sk_…', value: keyDraft,
-                      onChange: (event) => setKeyDraft(event.target.value),
-                    }),
-                    h('button', {
-                      type: 'button', style: btn, disabled: busy || keyDraft.trim().length < 8,
-                      onClick: async () => {
-                        const ok = await act({ action: 'update', id: account.id, key: keyDraft.trim() });
-                        if (ok) {
-                          setEditing(null);
-                          setKeyDraft('');
-                          setNotice(t('keyUpdated'));
-                        }
-                      },
-                    }, t('save')),
-                    h('button', { type: 'button', style: btn, onClick: () => { setEditing(null); setKeyDraft(''); } }, t('cancel')),
-                  ),
-                ),
+            ? h('div', {
+                style: {
+                  display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap',
+                  paddingTop: 10, borderTop: '1px solid rgba(127,127,127,.18)',
+                },
+              },
+                h('span', { style: { opacity: .7, fontSize: 12 } }, t('newKeyFor', { ref: account.keyRef ?? '' })),
+                h('input', {
+                  style: { ...input, minWidth: 300 }, type: 'password', placeholder: 'oc_sk_…', value: keyDraft,
+                  onChange: (event) => setKeyDraft(event.target.value),
+                }),
+                h('button', {
+                  type: 'button', className: 'ocr-btn', style: btn, disabled: busy || keyDraft.trim().length < 8,
+                  onClick: async () => {
+                    const ok = await act({ action: 'update', id: account.id, key: keyDraft.trim() });
+                    if (ok) {
+                      setEditing(null);
+                      setKeyDraft('');
+                      setNotice(t('keyUpdated'));
+                    }
+                  },
+                }, t('save')),
+                h('button', { type: 'button', className: 'ocr-btn', style: btn, onClick: () => { setEditing(null); setKeyDraft(''); } }, t('cancel')),
               )
             : null,
         );
@@ -1408,32 +1603,75 @@ window.__ModuleLoader__.load({
         }
       };
 
-      const rows = (data?.models ?? []).map((row) =>
-        h('tr', { key: row.model },
-          cell(money(row.remaining), { fontWeight: 600 }),
-          cell(row.free ? t('unlimited') : `${yuan(row.monthly)} / ${money(row.limit)}`),
-          cell(yuan(row.weekly)),
-          cell(percentText(row.rolling, row.rollingLimit, row.free)),
-          cell(h('div', { style: { display: 'flex', flexDirection: 'column' } },
-            h('span', { style: { fontFamily: 'ui-monospace, Consolas, monospace' } }, row.model),
-            row.name && row.name !== row.model ? h('span', { style: { fontSize: 11, opacity: .55 } }, row.name) : null,
-          )),
-          cell(h('div', { style: { display: 'flex', gap: 4, flexWrap: 'wrap', maxWidth: 260 } },
-            capabilityTags(row).map((label) => h('span', {
-              key: label,
+      const modelCards = (data?.models ?? []).map((row) => {
+        const vendor = vendorOf(row.model);
+        const chips = capabilityTags(row);
+        return h('div', {
+          key: row.model,
+          style: {
+            display: 'flex', flexDirection: 'column', gap: 12, padding: '14px 16px', borderRadius: 10,
+            border: `1px solid ${vendor.color}3d`,
+            background: `linear-gradient(135deg, ${vendor.color}2e, ${vendor.color}0f 55%, rgba(127,127,127,.03))`,
+          },
+        },
+          h('div', { style: { display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' } },
+            h('span', {
               style: {
-                padding: '0 6px', borderRadius: 4, fontSize: 11,
-                border: '1px solid rgba(127,127,127,.35)', opacity: .85,
+                width: 30, height: 30, borderRadius: '50%', flex: 'none',
+                display: 'flex', alignItems: 'center', justifyContent: 'center',
+                background: `${vendor.color}26`, border: `1px solid ${vendor.color}80`,
+                color: vendor.color, fontSize: 11, fontWeight: 700,
               },
-            }, label)),
-          )),
-          cell(String(row.requests)),
-          cell(`${tokens(row.input)} / ${tokens(row.output)}`),
-        ),
-      );
+            },
+              vendor.path
+                ? h('svg', { viewBox: '0 0 24 24', width: 17, height: 17, role: 'img', 'aria-label': vendor.name },
+                    h('path', { d: vendor.path, fill: vendor.color }),
+                  )
+                : vendor.mark,
+            ),
+            h('span', { style: { fontWeight: 600, fontSize: 13 } }, prettyModel(row.model)),
+            row.free ? pill(t('unlimited'), '#3c9d5d') : null,
+          ),
+          chips.length > 0
+            ? h('div', { style: { display: 'flex', gap: 6, flexWrap: 'wrap' } },
+                chips.map((label) => h('span', {
+                  key: label,
+                  style: {
+                    display: 'inline-flex', alignItems: 'center', gap: 4,
+                    padding: '2px 8px', borderRadius: 999, fontSize: 11,
+                    border: `1px solid ${vendor.color}59`, background: `${vendor.color}14`, color: 'inherit',
+                  },
+                }, h('span', null, capIcon(label)), h('span', null, label))),
+              )
+            : null,
+          h('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(118px, 1fr))', gap: 12 } },
+            stat(t('colRemaining'), row.free ? t('unlimited') : money(row.remaining)),
+            stat(t('colMonthlyUsed'), row.free ? t('unlimited') : `${money(row.monthly)} / ${money(row.limit)}`),
+            stat(t('colWeeklyUsed'), row.free ? t('unlimited') : money(row.weekly)),
+            stat(t('colRolling'), percentText(row.rolling, row.rollingLimit, row.free)),
+            stat(t('colRequests'), String(row.requests)),
+          ),
+        );
+      });
 
       const peak = data?.peak;
       const quotaSpent = typeof data?.usage?.monthly?.percent === 'number' ? data.usage.monthly.percent : null;
+      const exhausted = quotaSpent !== null && quotaSpent >= 100;
+      // The real numbers can never favour the official API (a $10 plan carries
+      // $100 of list price), so the page can also show what that case looks like.
+      const demoPeak = {
+        plan: peak?.plan ?? { leverage: 10 },
+        models: [{ model: 'deepseek-v4-pro', go: { pay: 13.5, factor: 1 }, official: { pay: 9, factor: 1 }, cheaper: 'official', ratio: 1.5 }],
+      };
+      const shown = demo ? demoPeak : peak;
+      const allGo = shown ? shown.models.every((row) => row.cheaper === 'go') : false;
+      const saving = shown && shown.models.length > 0
+        ? Math.round(Math.max(...shown.models.map((row) => (row.cheaper === 'go' ? (1 - row.ratio) * 100 : (row.ratio - 1) * 100))))
+        : 0;
+      const verdict = exhausted && !demo
+        ? t('verdictExhausted')
+        : allGo ? t('verdictGo', { percent: saving }) : t('verdictOfficial', { percent: saving });
+      const verdictColor = exhausted && !demo ? '#e0a030' : allGo ? '#3c9d5d' : '#e0a030';
       const priceCell = (price, peakFlag, winner) => h('span', {
         style: winner
           ? { fontWeight: 600, color: '#3c9d5d', background: 'rgba(60,157,93,.12)', padding: '1px 6px', borderRadius: 4 }
@@ -1442,40 +1680,12 @@ window.__ModuleLoader__.load({
 
       const inspectingAccount = accountList.find((account) => account.id === inspecting) ?? null;
 
-      // Layout primitives: every block is a card with its own padding and gap, so
-      // buttons never sit flush against each other or against the table edges.
-      const card = (...children) => h('div', {
-        style: {
-          padding: '14px 16px', border: '1px solid rgba(127,127,127,.25)', borderRadius: 10,
-          background: 'var(--dsh-surface, rgba(127,127,127,.04))',
-          display: 'flex', flexDirection: 'column', gap: 12,
-        },
-      }, ...children);
-
-      const cardHead = (text, extra) => h('div', {
-        style: { display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' },
-      },
-        h('span', { style: { fontWeight: 600, fontSize: 13 } }, text),
-        extra ?? null,
-      );
-
-      const stat = (label, value) => h('div', {
-        style: { display: 'flex', flexDirection: 'column', gap: 3, minWidth: 110 },
-      },
-        h('span', { style: { fontSize: 11, opacity: .55 } }, label),
-        h('span', { style: { fontSize: 13, fontWeight: 500 } }, value),
-      );
-
-      const tools = (...children) => h('div', {
-        style: { display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' },
-      }, ...children);
-
       return h('div', { style: { display: 'flex', flexDirection: 'column', gap: 16 } },
         h('div', { style: { display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' } },
           h('div', { style: { fontSize: 16, fontWeight: 600 } }, t('title')),
           state.phase === 'ready' ? h('span', { style: { opacity: .55, fontSize: 12 } }, t('updatedAt', { time: clock(data?.checkedAt) })) : null,
           h('span', { style: { flex: 1 } }),
-          h('button', { type: 'button', style: btn, disabled: busy, onClick: () => { void load(true); } }, busy ? t('refreshing') : t('refresh')),
+          h('button', { type: 'button', className: 'ocr-btn', style: btn, disabled: busy, onClick: () => { void load(true); } }, busy ? t('refreshing') : t('refresh')),
         ),
         state.phase === 'error' ? h('div', { style: { color: '#d9534f', fontSize: 13 } }, t('loadError', { message: state.error })) : null,
         actionError ? h('div', { style: { color: '#d9534f', fontSize: 13 } }, actionError) : null,
@@ -1483,26 +1693,20 @@ window.__ModuleLoader__.load({
 
         card(
           cardHead(t('routerTitle'), router
-            ? h('span', {
-                style: {
-                  padding: '1px 8px', borderRadius: 999, fontSize: 12,
-                  border: `1px solid ${router.mode === 'fallback' ? 'rgba(224,160,48,.7)' : 'rgba(60,157,93,.6)'}`,
-                  color: router.mode === 'fallback' ? '#e0a030' : '#3c9d5d',
-                },
-              }, router.mode === 'fallback' ? t('modeFallback') : t('modePrimary'))
+            ? pill(router.mode === 'fallback' ? t('modeFallback') : t('modePrimary'), router.mode === 'fallback' ? '#e0a030' : '#3c9d5d')
             : h('span', { style: { opacity: .7, fontSize: 12 } }, t('routerMissing'))),
-          router?.reason ? h('div', { style: { fontSize: 12, opacity: .6 } }, t('modeReason', { reason: router.reason })) : null,
+          router?.reason ? h('div', { style: { fontSize: 12, opacity: .65 } }, t('modeReason', { reason: reasonText(router.reason) })) : null,
           router
             ? h('div', { style: { display: 'flex', gap: 32, flexWrap: 'wrap' } },
                 stat(t('activeAccount'), router.activeLabel ?? t('none')),
-                stat(t('nextProbe'), router.nextProbeAt ? when(router.nextProbeAt) : t('none')),
+                stat(t('nextProbe'), router.nextProbeAt ? when(router.nextProbeAt) : when(Date.now() + (router.probeIntervalMs ?? 0))),
                 stat(t('colStatus'), router.mode === 'fallback' ? t('modeFallback') : t('modePrimary')),
               )
             : null,
           router
             ? tools(
-                h('button', { type: 'button', style: btn, disabled: busy, onClick: () => void act({ action: 'probe' }) }, t('probeAll')),
-                h('button', { type: 'button', style: btn, disabled: busy, onClick: () => void act({ action: 'reset' }) }, t('resetMarks')),
+                h('button', { type: 'button', className: 'ocr-btn', style: btn, disabled: busy, onClick: () => void act({ action: 'probe' }) }, t('probeAll')),
+                h('button', { type: 'button', className: 'ocr-btn', style: btn, disabled: busy, onClick: () => void act({ action: 'reset' }) }, t('resetMarks')),
                 h('span', { style: { flexBasis: '100%', fontSize: 11, opacity: .55, lineHeight: 1.6 } }, t('resetHint')),
               )
             : null,
@@ -1510,103 +1714,74 @@ window.__ModuleLoader__.load({
 
         card(
           cardHead(t('accountsTitle'), h('span', { style: { opacity: .55, fontSize: 12 } }, t('accountsOrder'))),
-          h('div', {
-            style: {
-              overflowX: 'auto', cursor: 'grab', borderRadius: 8,
-              border: '1px solid rgba(127,127,127,.18)',
-            },
-            ...draggable(),
-          },
-            h('table', { style: { borderCollapse: 'collapse', width: '100%', fontSize: 12 } },
-              h('thead', null,
-                h('tr', null, [t('colIndex'), t('colAccount'), t('colKey'), t('colRolling'), t('colWeekly'), t('colMonthly'), t('colStatus'), t('colActions')].map((title) => th(title))),
-              ),
-              h('tbody', null, accountRows.length > 0
-                ? accountRows
-                : h('tr', null, h('td', { colSpan: 8, style: { padding: 14, opacity: .6 } }, t('noAccounts')))),
-            ),
+          h('div', { style: { display: 'flex', flexDirection: 'column', gap: 10 } },
+            accountCards.length > 0
+              ? accountCards
+              : h('div', { style: { opacity: .6, fontSize: 12 } }, t('noAccounts')),
           ),
-          router ? h('div', {
-            style: {
-              display: 'flex', gap: 14, alignItems: 'flex-end', flexWrap: 'wrap',
-              paddingTop: 12, borderTop: '1px solid rgba(127,127,127,.18)',
-            },
-          },
-            h('label', { style: { display: 'flex', flexDirection: 'column', gap: 5, fontSize: 11, opacity: .8 } },
-              t('colAccount'),
-              h('input', {
-                style: { ...input, minWidth: 200 }, placeholder: t('labelPlaceholder'), value: draft.label,
-                onChange: (event) => setDraft({ ...draft, label: event.target.value }),
-              }),
-            ),
-            h('label', { style: { display: 'flex', flexDirection: 'column', gap: 5, fontSize: 11, opacity: .8 } },
-              t('colKey'),
-              h('input', {
-                style: { ...input, minWidth: 320 }, type: 'password', placeholder: t('keyPlaceholder'), value: draft.key,
-                onChange: (event) => setDraft({ ...draft, key: event.target.value }),
-              }),
-            ),
-            h('button', { type: 'button', style: btn, disabled: busy || draft.key.trim().length < 8, onClick: () => void addAccount() }, t('addAndProbe')),
-          ) : null,
         ),
 
-        peak && card(
-          cardHead(t('peakTitle')),
-          h('div', { style: { fontSize: 12, opacity: .78, lineHeight: 1.8, marginBottom: 2 } },
-            t('peakPlan', {
-              plan: peak.plan.id,
-              price: peak.plan.priceCny.toFixed(0),
-              usd: peak.plan.priceUsd,
-              allowance: peak.plan.allowanceCny.toFixed(0),
-              allowanceUsd: peak.plan.allowanceUsd,
-              discount: (10 / peak.plan.leverage).toFixed(1),
-              percent: (100 / peak.plan.leverage).toFixed(0),
-            })),
-          h('div', { style: { fontSize: 12, opacity: .78, lineHeight: 1.8, marginBottom: 8 } },
-            t('peakNow', {
-              goPeak: peak.go.peak ? t('peakGoPeak') : t('peakGoOff'),
-              officialPeak: peak.official.peak ? t('peakOfficialPeak') : t('peakOfficialOff'),
-              holiday: peak.holiday && peak.go.peak ? t('peakHoliday') : '',
-            }),
-            quotaSpent !== null && quotaSpent >= 100 ? t('peakExhausted') : ''),
-          h('table', { style: { borderCollapse: 'collapse', width: '100%', fontSize: 12 } },
-            h('thead', null,
-              h('tr', null, [t('colModel'), t('peakGoPay'), t('peakOfficialPay'), t('peakVerdict')].map((title) => th(title))),
-            ),
-            h('tbody', null, peak.models.map((row) =>
-              h('tr', { key: row.model },
-                cell(h('span', { style: { fontFamily: 'ui-monospace, Consolas, monospace' } }, row.model)),
-                cell(priceCell(row.go.pay, row.go.factor > 1, row.cheaper === 'go')),
-                cell(priceCell(row.official.pay, row.official.factor > 1, row.cheaper === 'official')),
-                cell(row.cheaper === 'go'
-                  ? t('peakGoCheaper', { percent: Math.round((1 - row.ratio) * 100) })
-                  : t('peakOfficialCheaper', { percent: Math.round((row.ratio - 1) * 100) }), { fontWeight: 600 }),
+        router
+          ? card(
+              cardHead(t('addAccount')),
+              h('div', { style: { display: 'flex', gap: 14, alignItems: 'flex-end', flexWrap: 'wrap' } },
+                h('label', { style: { display: 'flex', flexDirection: 'column', gap: 5, fontSize: 11, opacity: .8 } },
+                  t('colAccount'),
+                  h('input', {
+                    style: { ...input, minWidth: 200 }, placeholder: t('labelPlaceholder'), value: draft.label,
+                    onChange: (event) => setDraft({ ...draft, label: event.target.value }),
+                  }),
+                ),
+                h('label', { style: { display: 'flex', flexDirection: 'column', gap: 5, fontSize: 11, opacity: .8 } },
+                  t('colKey'),
+                  h('input', {
+                    style: { ...input, minWidth: 320 }, type: 'password', placeholder: t('keyPlaceholder'), value: draft.key,
+                    onChange: (event) => setDraft({ ...draft, key: event.target.value }),
+                  }),
+                ),
+                h('button', { type: 'button', className: 'ocr-btn', style: btn, disabled: busy || draft.key.trim().length < 8, onClick: () => void addAccount() }, t('addAndProbe')),
               ),
-            )),
-          ),
-          h('div', { style: { opacity: .55, fontSize: 11, marginTop: 6, lineHeight: 1.6 } },
-            t('peakFootnote', { fx: peak.cnyPerUsd })),
-        ),
+            )
+          : null,
+
+        shown
+          ? card(
+              h('div', {
+                style: {
+                  padding: '16px 18px', borderRadius: 10, fontSize: 18, fontWeight: 700, lineHeight: 1.5,
+                  color: verdictColor, background: `${verdictColor}22`, border: `1px solid ${verdictColor}80`,
+                },
+              }, verdict),
+              demo ? h('div', { style: { fontSize: 12, opacity: .7 } }, t('demoNote')) : null,
+              h('div', { style: { overflowX: 'auto', cursor: 'grab' }, ...draggable() },
+                h('table', { style: { borderCollapse: 'collapse', width: '100%', fontSize: 12 } },
+                h('thead', null,
+                  h('tr', null, [t('colModel'), t('peakGoPay'), t('peakOfficialPay')].map((title) => th(title))),
+                ),
+                h('tbody', null, shown.models.map((row) =>
+                  h('tr', { key: row.model },
+                    cell(prettyModel(row.model)),
+                    cell(priceCell(row.go.pay, row.go.factor > 1, row.cheaper === 'go')),
+                    cell(priceCell(row.official.pay, row.official.factor > 1, row.cheaper === 'official')),
+                  ),
+                )),
+                ),
+              ),
+              h('div', { style: { display: 'flex', justifyContent: 'flex-end' } },
+                h('button', {
+                  type: 'button', className: 'ocr-btn', style: btn,
+                  onClick: () => setDemo(!demo),
+                }, demo ? t('demoOff') : t('demoOn')),
+              ),
+            )
+          : null,
 
         card(
           cardHead(t('modelsTitle')),
-          h('div', {
-            style: {
-              overflowX: 'auto', maxHeight: '56vh', overflowY: 'auto', cursor: 'grab',
-              borderRadius: 8, border: '1px solid rgba(127,127,127,.18)',
-            },
-            ...draggable(),
-          },
-            h('table', { style: { borderCollapse: 'collapse', width: '100%', fontSize: 12 } },
-              h('thead', null,
-                h('tr', null, [t('colRemaining'), t('colMonthlyUsed'), t('colWeeklyUsed'), t('colRolling'), t('colModel'), t('colCaps'), t('colRequests'), t('colTokens')].map((title) => th(title))),
-              ),
-              h('tbody', null, rows),
-            ),
-          ),
+          h('div', { style: { display: 'flex', flexDirection: 'column', gap: 10 } }, modelCards),
         ),
 
-        h('div', { style: { opacity: .55, fontSize: 12, marginTop: 4, lineHeight: 1.8 } },
+        h('div', { style: { opacity: .55, fontSize: 12, lineHeight: 1.8 } },
           t('footerOfficial'),
           h('br'),
           t('footerLocal'),
@@ -1625,9 +1800,27 @@ window.__ModuleLoader__.load({
       );
     }
 
+    // Hover and press feedback cannot live in an inline style object, so the
+    // bundle ships one small stylesheet for its buttons.
+    const CSS = [
+      '.ocr-btn { transition: background .12s ease, border-color .12s ease, transform .06s ease; }',
+      '.ocr-btn:hover:not(:disabled) { background: rgba(127,127,127,.16); border-color: rgba(127,127,127,.75); }',
+      '.ocr-btn:active:not(:disabled) { transform: translateY(1px); background: rgba(127,127,127,.26); }',
+      '.ocr-btn:disabled { opacity: .45; cursor: default; }',
+    ].join('\n');
+    const ensureStyles = () => {
+      if (typeof document === 'undefined') return;
+      if (document.getElementById('ocr-styles') !== null) return;
+      const style = document.createElement('style');
+      style.id = 'ocr-styles';
+      style.textContent = CSS;
+      document.head.appendChild(style);
+    };
+
     return {
       inject: ['slots'],
       apply(ctx) {
+        ensureStyles();
         ctx.slots.inject('settings.section', () => ctx.slots.register({
           name: 'settings.section',
           id: 'opencode-router',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-opencode-routing",
-  "version": "2.1.0",
+  "version": "2.2.1",
   "type": "module",
   "description": "dsh plugin: OpenCode account pool with automatic A-to-B failover and quota routing, plus a per-account / per-model usage dashboard, in one Settings page.",
   "exports": {

package/router.js

@@ -803,7 +803,9 @@ export function apply(ctx, config = {}) {
       if (state.mode === 'fallback' && state.until > now) marks.push(state.until)
       for (const entry of Object.values(state.quarantine)) if (entry.until > now) marks.push(entry.until)
       for (const account of state.accounts) if (account.exhaustedUntil > now) marks.push(account.exhaustedUntil)
-      return marks.length > 0 ? Math.min(...marks) : null
+      // Nothing is quarantined right now, but the periodic probe still runs: report
+      // when it will fire instead of leaving the page showing a dash.
+      return marks.length > 0 ? Math.min(...marks) : now + cfg.probeIntervalMs
     })()
     return {
       version: 3,
@@ -965,6 +967,18 @@ export function apply(ctx, config = {}) {
 
   async function handleApi(request, response) {
     try {
+      if (request.method === 'GET') {
+        // Settings can ask for one account's key so "edit key" opens with the
+        // current value filled in. Local-only endpoint, never in the snapshot.
+        const url = new URL(request.url ?? '/', 'http://127.0.0.1')
+        const reveal = url.searchParams.get('key')
+        if (reveal !== null) {
+          const account = state.accounts.find((entry) => entry.id === reveal)
+          if (account === undefined) throw new Error(`没有账户 ${reveal}`)
+          sendJson(response, 200, { id: account.id, key: (await accountKey(account)) ?? null })
+          return
+        }
+      }
       if (request.method === 'POST') {
         const text = await readBody(request)
         let body

package/test.mjs

@@ -284,6 +284,10 @@ await crash('opencode-go', { code: 'QUOTA', status: 429, message: 'usage limit r
   assert.equal((await call(flash)).provider, 'deepseek-account')
   const reset = await api('POST', { action: 'reset' })
   assert.equal(reset.body.mode, 'primary')
+  // Nothing is quarantined after a reset, but the periodic probe still has a
+  // next run: the page must show a time instead of a dash.
+  assert.equal(typeof reset.body.nextProbeAt, 'number', 'nextProbeAt is a timestamp, not null')
+  assert.ok(reset.body.nextProbeAt > Date.now(), 'nextProbeAt is in the future')
   assert.equal((await call(flash)).provider, 'opencode-go')
 }
 console.log('plan-wide fallback ok')
@@ -365,6 +369,37 @@ console.log('usage view ok')
 }
 console.log('single-account fallback ok')
 
+// "Edit key" pre-fills from the stored value; the snapshot never carries it
+{
+  const reveal = async (query) => {
+    const handler = apiRoutes.get('/opencode-quota-router.json')
+    const response = {
+      status: 0,
+      body: undefined,
+      writeHead(status) {
+        this.status = status
+      },
+      end(chunk) {
+        this.body = JSON.parse(chunk)
+      },
+    }
+    await handler({ method: 'GET', url: `/opencode-quota-router.json${query}` }, response)
+    return response
+  }
+
+  const hit = await reveal('?key=a1')
+  assert.equal(hit.status, 200)
+  assert.equal(hit.body.key, 'oc_sk_test', 'the stored key comes back for the editor')
+
+  const missing = await reveal('?key=zzz')
+  assert.equal(missing.status, 400, 'an unknown account is rejected')
+  assert.match(missing.body.error, /zzz/)
+
+  const snapshot = await api('GET')
+  assert.equal(JSON.stringify(snapshot.body).includes('oc_sk_test'), false, 'the snapshot stays masked')
+}
+console.log('reveal key ok')
+
 for (const dispose of disposers) await dispose()
 server.close()
 console.log('all accounts checks passed')