dsh-opencode-routing 2.2.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,8 +101,8 @@ window.__ModuleLoader__.load({
         peakGoOff: '谷段',
         peakOfficialPeak: '峰段（价格 2 倍）',
         peakOfficialOff: '谷段',
-        peakAtPeak: '峰段',
-        peakOffPeak: '谷段',
+        peakAtPeak: '高峰期',
+        peakOffPeak: '低谷期',
         peakHoliday: '——今天是中国法定节假日，官方整天算谷，OpenCode 照算峰',
         peakExhausted: '但本月额度已经用尽，只能走官方。',
         peakGoPay: '走 OpenCode 你实付',
@@ -112,6 +112,9 @@ window.__ModuleLoader__.load({
         verdictGo: '走 OpenCode 便宜 {percent}%',
         verdictOfficial: '走官方直连便宜 {percent}%',
         verdictExhausted: '本月额度已用尽，只能走官方直连',
+        demoOn: '看官方更便宜的样子',
+        demoOff: '回到真实数据',
+        demoNote: '示例数据：假设某个模型走 OpenCode 反而更贵（现实中只有额度用尽才会发生）。',
         peakFootnote: '按每 100 万输出 tokens 折算（编码账单主要来自输出），汇率 ¥{fx}/$。峰谷只影响额度烧多快，不改变结论：额度内走 OpenCode 始终比官方直连便宜；例外是额度用尽，或某个模型的额度先见底。',
         footerOfficial: '上面「官方 5 小时 / 本周 / 本月」百分比来自 OpenCode 接口，是账户真实用量，别的客户端或别的机器用了也会算进去。',
         footerLocal: '按模型的金额是本机估算：只统计这个 harness 的会话日志，用来拆开看模型分布；其它工具的调用没有本地记录。',
@@ -144,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',
@@ -216,6 +219,9 @@ window.__ModuleLoader__.load({
         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.',
@@ -248,7 +254,7 @@ window.__ModuleLoader__.load({
         setActive: '設為目前',
         disable: '停用',
         enable: '啟用',
-        editKey: '更換金鑰',
+        editKey: '編輯金鑰',
         remove: '刪除',
         viewUsage: '查看用量',
         keyUpdated: '金鑰已更新',
@@ -309,8 +315,8 @@ window.__ModuleLoader__.load({
         peakGoOff: '谷段',
         peakOfficialPeak: '峰段（價格 2 倍）',
         peakOfficialOff: '谷段',
-        peakAtPeak: '峰段',
-        peakOffPeak: '谷段',
+        peakAtPeak: '高峰期',
+        peakOffPeak: '低谷期',
         peakHoliday: '——今天是中國法定假日，官方整天算谷，OpenCode 照算峰',
         peakExhausted: '但本月額度已用盡，只能走官方。',
         peakGoPay: '走 OpenCode 你實付',
@@ -320,6 +326,9 @@ window.__ModuleLoader__.load({
         verdictGo: '走 OpenCode 便宜 {percent}%',
         verdictOfficial: '走官方直連便宜 {percent}%',
         verdictExhausted: '本月額度已用盡，只能走官方直連',
+        demoOn: '看官方更便宜的樣子',
+        demoOff: '回到真實資料',
+        demoNote: '範例資料：假設某個模型走 OpenCode 反而更貴（現實中只有額度用盡才會發生）。',
         peakFootnote: '依每 100 萬輸出 tokens 折算（編碼帳單主要來自輸出），匯率 ¥{fx}/$。峰谷只影響額度消耗速度，不改變結論：額度內走 OpenCode 始終比官方直連便宜；例外是額度用盡，或某個模型的額度先用完。',
         footerOfficial: '上面「官方 5 小時／本週／本月」百分比來自 OpenCode 介面，是帳號真實用量，其他用戶端或機器用掉的也會算進去。',
         footerLocal: '依模型的金額是本機估算：只統計這個 harness 的工作階段日誌，用來拆開看模型分布；其他工具的呼叫沒有本機記錄。',
@@ -1090,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,
@@ -1187,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(); },
@@ -1197,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 } },
@@ -1207,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')),
@@ -1218,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')),
         ),
@@ -1234,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 {
@@ -1275,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) => {
@@ -1324,16 +1402,26 @@ window.__ModuleLoader__.load({
 
       // 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' }],
+        [/^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' }],
-        [/^grok/i, { mark: 'X', name: 'xAI', color: '#64748b' }],
-        [/^qwen/i, { mark: 'Q', name: 'Qwen', color: '#615ced' }],
-        [/^kimi/i, { mark: 'K', name: 'Moonshot', color: '#8b5cf6' }],
-        [/^minimax/i, { mark: 'MM', name: 'MiniMax', color: '#ff6b00' }],
-        [/^mimo/i, { mark: 'Mi', name: 'MiMo', color: '#ff6900' }],
+        [/^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' }],
@@ -1341,8 +1429,9 @@ window.__ModuleLoader__.load({
       ];
       const vendorOf = (model) => {
         const hit = VENDORS.find(([pattern]) => pattern.test(model));
-        if (hit) return hit[1];
-        return { mark: String(model).slice(0, 2).toUpperCase(), name: model, color: '#6b7280' };
+        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: '📄' };
@@ -1443,17 +1532,26 @@ window.__ModuleLoader__.load({
           ),
           router
             ? h('div', { style: { display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap', paddingTop: 2 } },
-                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', 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', style: btn, disabled: busy,
-                  onClick: () => { setEditing(editing === account.id ? null : account.id); setKeyDraft(''); },
+                  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', style: { ...btn, color: '#d9534f' }, disabled: busy,
+                  type: 'button', className: 'ocr-btn', style: { ...btn, color: '#d9534f' }, disabled: busy,
                   onClick: () => {
                     if (accountList.length <= 1) {
                       setActionError(t('keepOne'));
@@ -1477,7 +1575,7 @@ window.__ModuleLoader__.load({
                   onChange: (event) => setKeyDraft(event.target.value),
                 }),
                 h('button', {
-                  type: 'button', style: btn, disabled: busy || keyDraft.trim().length < 8,
+                  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) {
@@ -1487,7 +1585,7 @@ window.__ModuleLoader__.load({
                     }
                   },
                 }, t('save')),
-                h('button', { type: 'button', style: btn, onClick: () => { setEditing(null); setKeyDraft(''); } }, t('cancel')),
+                h('button', { type: 'button', className: 'ocr-btn', style: btn, onClick: () => { setEditing(null); setKeyDraft(''); } }, t('cancel')),
               )
             : null,
         );
@@ -1524,8 +1622,14 @@ window.__ModuleLoader__.load({
                 background: `${vendor.color}26`, border: `1px solid ${vendor.color}80`,
                 color: vendor.color, fontSize: 11, fontWeight: 700,
               },
-            }, vendor.mark),
-            h('span', { style: { fontWeight: 600, fontSize: 13 } }, row.model),
+            },
+              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
@@ -1553,14 +1657,21 @@ window.__ModuleLoader__.load({
       const peak = data?.peak;
       const quotaSpent = typeof data?.usage?.monthly?.percent === 'number' ? data.usage.monthly.percent : null;
       const exhausted = quotaSpent !== null && quotaSpent >= 100;
-      const allGo = peak ? peak.models.every((row) => row.cheaper === 'go') : false;
-      const saving = peak && peak.models.length > 0
-        ? Math.round(Math.max(...peak.models.map((row) => (row.cheaper === 'go' ? (1 - row.ratio) * 100 : (row.ratio - 1) * 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
+      const verdict = exhausted && !demo
         ? t('verdictExhausted')
         : allGo ? t('verdictGo', { percent: saving }) : t('verdictOfficial', { percent: saving });
-      const verdictColor = exhausted ? '#e0a030' : allGo ? '#3c9d5d' : '#e0a030';
+      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 }
@@ -1574,7 +1685,7 @@ window.__ModuleLoader__.load({
           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,
@@ -1594,8 +1705,8 @@ window.__ModuleLoader__.load({
             : 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,
@@ -1628,12 +1739,12 @@ window.__ModuleLoader__.load({
                     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')),
+                h('button', { type: 'button', className: 'ocr-btn', style: btn, disabled: busy || draft.key.trim().length < 8, onClick: () => void addAccount() }, t('addAndProbe')),
               ),
             )
           : null,
 
-        peak
+        shown
           ? card(
               h('div', {
                 style: {
@@ -1641,23 +1752,27 @@ window.__ModuleLoader__.load({
                   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'), t('peakVerdict')].map((title) => th(title))),
+                  h('tr', null, [t('colModel'), t('peakGoPay'), t('peakOfficialPay')].map((title) => th(title))),
                 ),
-                h('tbody', null, peak.models.map((row) =>
+                h('tbody', null, shown.models.map((row) =>
                   h('tr', { key: row.model },
-                    cell(h('span', { style: { fontFamily: 'ui-monospace, Consolas, monospace' } }, 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')),
-                    cell(row.cheaper === 'go'
-                      ? t('peakGoCheaper', { percent: Math.round((1 - row.ratio) * 100) })
-                      : t('peakOfficialCheaper', { percent: Math.round((row.ratio - 1) * 100) }), { fontWeight: 600 }),
                   ),
                 )),
                 ),
               ),
+              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,
 
@@ -1685,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.2.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

@@ -967,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

@@ -369,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')