dsh-opencode-routing 2.2.0 → 2.3.0

package/client.js

@@ -1,333 +1,354 @@
-window.__ModuleLoader__.load({
-  id: 'dsh-opencode-routing',
-  factory(require) {
-    const React = require('react');
-    const h = React.createElement;
-
-    const USAGE_API = '/opencode-usage.json';
-    const ROUTER_API = '/opencode-quota-router.json';
-
-    /**
-     * UI strings. `zh` is the source; every other locale is a translation of the
-     * same keys. Missing keys fall back to `en`, then to the key itself, so a
-     * half-finished translation never breaks the page.
-     */
-    const DICT = {
-      zh: {
-        title: 'OpenCode 账户与用量',
-        refresh: '刷新',
-        refreshing: '刷新中…',
-        updatedAt: '更新于 {time}',
-        loadError: '读取失败：{message}',
-        routerTitle: '额度路由',
-        modePrimary: '正常路由',
-        modeFallback: '已回退到官方订阅',
-        modeReason: '原因：{reason}',
-        activeAccount: '当前账户',
-        nextProbe: '下次探测',
-        probeAll: '立即探测',
-        resetMarks: '重置封禁标记',
-        resetHint: '清空所有“额度用尽 / 鉴权失败”的标记，并让路由立刻回到 OpenCode 账户池；不改账户，也不改密钥。',
-        routerMissing: '未检测到额度路由，账户池只读。',
-        accountsTitle: '账户池',
-        accountsOrder: '按顺序使用：前面的账户用完才用后面的。',
-        addAccount: '添加账户',
-        labelPlaceholder: '备注（可选，例如 小号 A）',
-        keyPlaceholder: 'oc_sk_…',
-        addAndProbe: '添加并探测',
-        save: '保存',
-        cancel: '取消',
-        setActive: '设为当前',
-        disable: '停用',
-        enable: '启用',
-        editKey: '改密钥',
-        remove: '删除',
-        viewUsage: '查看用量',
-        keyUpdated: '密钥已更新',
-        accountAdded: '账户已添加并探测',
-        shortKey: '密钥不完整：至少 8 个字符',
-        keepOne: '至少保留一个账户',
-        notConfigured: '未配置',
-        readonly: '只读',
-        newKeyFor: '新密钥写入 {ref}',
-        noAccounts: '还没有账户。填一个密钥就能开始。',
-        statusReady: '可用',
-        statusExhausted: '额度用尽',
-        statusAuth: '鉴权失败',
-        statusDisabled: '已停用',
-        statusMissing: '未配置密钥',
-        statusError: '读取失败',
-        statusActive: '当前使用',
-        statusSpare: '备用',
-        statusCurrent: '当前',
-        colIndex: '#',
-        colAccount: '账户',
-        colKey: '密钥',
-        colRolling: '5 小时',
-        colWeekly: '本周',
-        colMonthly: '本月',
-        colStatus: '状态',
-        colActions: '操作',
-        colModel: '模型',
-        colCaps: '能力',
-        colRequests: '请求',
-        colTokens: '输入 / 输出 tokens',
-        colRemaining: '本月剩余',
-        colMonthlyUsed: '本月用量',
-        colWeeklyUsed: '本周用量',
-        modelsTitle: '按模型（本机估算）',
-        capsText: '纯文本',
-        capsImage: '图像',
-        capsVideo: '视频',
-        capsAudio: '音频',
-        capsPdf: 'PDF',
-        capsTools: '工具',
-        capsReasoning: '推理',
-        capsUnknown: '未声明',
-        free: '免费',
-        unlimited: '无限',
-        none: '—',
-        dialogTitle: '{label} 的用量',
-        dialogNote: '官方接口只给这三个窗口的百分比，没有按模型的明细；按模型的金额只能是本机估算。',
-        dialogProbe: '重新探测',
-        close: '关闭',
-        probedAt: '探测于 {time}',
-        resetsAt: '重置于 {time}',
-        usageError: '错误：{message}',
-        peakTitle: '此刻用哪个更划算',
-        peakPlan: '你为 OpenCode 的 {plan} 套餐付 ¥{price} /月（${usd}），额度给到 ¥{allowance}（${allowanceUsd}）的官方价用量。额度按官方价扣，等于打 {discount} 折——同一笔请求走 OpenCode 你只付官方价的 {percent}%。',
-        peakNow: '走官方直连照官方价付现。此刻 OpenCode 是{goPeak}，官方是{officialPeak}{holiday}。',
-        peakGoPeak: '峰段（额度烧 2 倍）',
-        peakGoOff: '谷段',
-        peakOfficialPeak: '峰段（价格 2 倍）',
-        peakOfficialOff: '谷段',
-        peakAtPeak: '峰段',
-        peakOffPeak: '谷段',
-        peakHoliday: '——今天是中国法定节假日，官方整天算谷，OpenCode 照算峰',
-        peakExhausted: '但本月额度已经用尽，只能走官方。',
-        peakGoPay: '走 OpenCode 你实付',
-        peakOfficialPay: '走官方直连你实付',
-        peakVerdict: '结论',
-        peakGoCheaper: '走 OpenCode 便宜 {percent}%',
-        verdictGo: '走 OpenCode 便宜 {percent}%',
-        verdictOfficial: '走官方直连便宜 {percent}%',
-        verdictExhausted: '本月额度已用尽，只能走官方直连',
-        peakFootnote: '按每 100 万输出 tokens 折算（编码账单主要来自输出），汇率 ¥{fx}/$。峰谷只影响额度烧多快，不改变结论：额度内走 OpenCode 始终比官方直连便宜；例外是额度用尽，或某个模型的额度先见底。',
-        footerOfficial: '上面「官方 5 小时 / 本周 / 本月」百分比来自 OpenCode 接口，是账户真实用量，别的客户端或别的机器用了也会算进去。',
-        footerLocal: '按模型的金额是本机估算：只统计这个 harness 的会话日志，用来拆开看模型分布；其它工具的调用没有本地记录。',
-        footerPeakRule: '金额按离峰价估算，DeepSeek 模型峰时按 2 倍；免费模型不计费。',
-      },
-      en: {
-        title: 'OpenCode accounts & usage',
-        refresh: 'Refresh',
-        refreshing: 'Refreshing…',
-        updatedAt: 'Updated {time}',
-        loadError: 'Could not load: {message}',
-        routerTitle: 'Quota routing',
-        modePrimary: 'Routing normally',
-        modeFallback: 'Fell back to the official subscription',
-        modeReason: 'Reason: {reason}',
-        activeAccount: 'Active account',
-        nextProbe: 'Next probe',
-        probeAll: 'Probe now',
-        resetMarks: 'Clear blocked marks',
-        resetHint: 'Clears every "out of allowance / auth failed" mark and sends routing straight back to the OpenCode pool. Accounts and keys are untouched.',
-        routerMissing: 'No quota router detected — the account pool is read-only.',
-        accountsTitle: 'Account pool',
-        accountsOrder: 'Used in order: the next account only takes over once the one above runs dry.',
-        addAccount: 'Add an account',
-        labelPlaceholder: 'Label (optional, e.g. alt A)',
-        keyPlaceholder: 'oc_sk_…',
-        addAndProbe: 'Add and probe',
-        save: 'Save',
-        cancel: 'Cancel',
-        setActive: 'Make active',
-        disable: 'Disable',
-        enable: 'Enable',
-        editKey: 'Change key',
-        remove: 'Delete',
-        viewUsage: 'View usage',
-        keyUpdated: 'Key updated',
-        accountAdded: 'Account added and probed',
-        shortKey: 'Key looks incomplete: at least 8 characters',
-        keepOne: 'Keep at least one account',
-        notConfigured: 'Not set',
-        readonly: 'read-only',
-        newKeyFor: 'New key is stored in {ref}',
-        noAccounts: 'No accounts yet. Add a key to begin.',
-        statusReady: 'Ready',
-        statusExhausted: 'Out of allowance',
-        statusAuth: 'Auth failed',
-        statusDisabled: 'Disabled',
-        statusMissing: 'No key',
-        statusError: 'Probe failed',
-        statusActive: 'In use',
-        statusSpare: 'Spare',
-        statusCurrent: 'current',
-        colIndex: '#',
-        colAccount: 'Account',
-        colKey: 'Key',
-        colRolling: '5 hours',
-        colWeekly: 'This week',
-        colMonthly: 'This month',
-        colStatus: 'Status',
-        colActions: 'Actions',
-        colModel: 'Model',
-        colCaps: 'Modality',
-        colRequests: 'Requests',
-        colTokens: 'Input / output tokens',
-        colRemaining: 'Left this month',
-        colMonthlyUsed: 'Used this month',
-        colWeeklyUsed: 'Used this week',
-        modelsTitle: 'Per model (local estimate)',
-        capsText: 'text',
-        capsImage: 'image',
-        capsVideo: 'video',
-        capsAudio: 'audio',
-        capsPdf: 'PDF',
-        capsTools: 'tools',
-        capsReasoning: 'reasoning',
-        capsUnknown: 'undeclared',
-        free: 'free',
-        unlimited: 'unlimited',
-        none: '—',
-        dialogTitle: 'Usage for {label}',
-        dialogNote: 'The official endpoint only reports these three windows; it has no per-model breakdown. Per-model money can only be a local estimate.',
-        dialogProbe: 'Probe again',
-        close: 'Close',
-        probedAt: 'Probed {time}',
-        resetsAt: 'Resets {time}',
-        usageError: 'Error: {message}',
-        peakTitle: 'Which route is cheaper right now',
-        peakPlan: 'You pay ¥{price}/month (${usd}) for OpenCode {plan} and the plan meters ¥{allowance} (${allowanceUsd}) of usage at official prices — a {discount}× discount, so the same request costs you {percent}% of the official price when it goes through OpenCode.',
-        peakNow: 'The official route bills list price directly. Right now OpenCode is {goPeak} and the official API is {officialPeak}{holiday}.',
-        peakGoPeak: 'at peak (allowance burns twice as fast)',
-        peakGoOff: 'off-peak',
-        peakOfficialPeak: 'at peak (price doubles)',
-        peakOfficialOff: 'off-peak',
-        peakAtPeak: 'peak',
-        peakOffPeak: 'off-peak',
-        peakHoliday: ' — today is a Chinese public holiday, so the official API charges off-peak all day while OpenCode still charges peak',
-        peakExhausted: ' But this month’s allowance is already spent, so only the official route is left.',
-        peakGoPay: 'You pay via OpenCode',
-        peakOfficialPay: 'You pay via official API',
-        peakVerdict: 'Verdict',
-        peakGoCheaper: 'OpenCode 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',
-        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.',
-        footerPeakRule: 'Money is estimated at off-peak prices, doubled during DeepSeek peak hours; free models are not billed.',
-      },
-      'zh-tw': {
-        title: 'OpenCode 帳號與用量',
-        refresh: '重新整理',
-        refreshing: '重新整理中…',
-        updatedAt: '更新於 {time}',
-        loadError: '讀取失敗：{message}',
-        routerTitle: '額度路由',
-        modePrimary: '正常路由',
-        modeFallback: '已回退到官方訂閱',
-        modeReason: '原因：{reason}',
-        activeAccount: '目前帳號',
-        nextProbe: '下次探測',
-        probeAll: '立即探測',
-        resetMarks: '重設封鎖標記',
-        resetHint: '清空所有「額度用盡／驗證失敗」標記，並讓路由立刻回到 OpenCode 帳號池；不會改動帳號與金鑰。',
-        routerMissing: '未偵測到額度路由，帳號池為唯讀。',
-        accountsTitle: '帳號池',
-        accountsOrder: '依序使用：前面的帳號用完才會用後面的。',
-        addAccount: '新增帳號',
-        labelPlaceholder: '備註（可選，例如 小號 A）',
-        keyPlaceholder: 'oc_sk_…',
-        addAndProbe: '新增並探測',
-        save: '儲存',
-        cancel: '取消',
-        setActive: '設為目前',
-        disable: '停用',
-        enable: '啟用',
-        editKey: '更換金鑰',
-        remove: '刪除',
-        viewUsage: '查看用量',
-        keyUpdated: '金鑰已更新',
-        accountAdded: '帳號已新增並探測',
-        shortKey: '金鑰不完整：至少 8 個字元',
-        keepOne: '至少保留一個帳號',
-        notConfigured: '未設定',
-        readonly: '唯讀',
-        newKeyFor: '新金鑰寫入 {ref}',
-        noAccounts: '還沒有帳號。填入金鑰即可開始。',
-        statusReady: '可用',
-        statusExhausted: '額度用盡',
-        statusAuth: '驗證失敗',
-        statusDisabled: '已停用',
-        statusMissing: '未設定金鑰',
-        statusError: '讀取失敗',
-        statusActive: '目前使用',
-        statusSpare: '備用',
-        statusCurrent: '目前',
-        colIndex: '#',
-        colAccount: '帳號',
-        colKey: '金鑰',
-        colRolling: '5 小時',
-        colWeekly: '本週',
-        colMonthly: '本月',
-        colStatus: '狀態',
-        colActions: '操作',
-        colModel: '模型',
-        colCaps: '能力',
-        colRequests: '請求',
-        colTokens: '輸入 / 輸出 tokens',
-        colRemaining: '本月剩餘',
-        colMonthlyUsed: '本月用量',
-        colWeeklyUsed: '本週用量',
-        modelsTitle: '依模型（本機估算）',
-        capsText: '純文字',
-        capsImage: '圖像',
-        capsVideo: '影片',
-        capsAudio: '音訊',
-        capsPdf: 'PDF',
-        capsTools: '工具',
-        capsReasoning: '推理',
-        capsUnknown: '未宣告',
-        free: '免費',
-        unlimited: '無限',
-        none: '—',
-        dialogTitle: '{label} 的用量',
-        dialogNote: '官方介面只提供這三個窗口的百分比，沒有依模型拆分的明細；依模型的金額只能是本機估算。',
-        dialogProbe: '重新探測',
-        close: '關閉',
-        probedAt: '探測於 {time}',
-        resetsAt: '重置於 {time}',
-        usageError: '錯誤：{message}',
-        peakTitle: '此刻用哪個更划算',
-        peakPlan: '你為 OpenCode 的 {plan} 方案付 ¥{price}／月（${usd}），額度給到 ¥{allowance}（${allowanceUsd}）的官方價用量。額度依官方價扣，等於打 {discount} 折——同一筆請求走 OpenCode 你只付官方價的 {percent}%。',
-        peakNow: '走官方直連照官方價付現。此刻 OpenCode 是{goPeak}，官方是{officialPeak}{holiday}。',
-        peakGoPeak: '峰段（額度消耗 2 倍）',
-        peakGoOff: '谷段',
-        peakOfficialPeak: '峰段（價格 2 倍）',
-        peakOfficialOff: '谷段',
-        peakAtPeak: '峰段',
-        peakOffPeak: '谷段',
-        peakHoliday: '——今天是中國法定假日，官方整天算谷，OpenCode 照算峰',
-        peakExhausted: '但本月額度已用盡，只能走官方。',
-        peakGoPay: '走 OpenCode 你實付',
-        peakOfficialPay: '走官方直連你實付',
-        peakVerdict: '結論',
-        peakGoCheaper: '走 OpenCode 便宜 {percent}%',
-        verdictGo: '走 OpenCode 便宜 {percent}%',
-        verdictOfficial: '走官方直連便宜 {percent}%',
-        verdictExhausted: '本月額度已用盡，只能走官方直連',
-        peakFootnote: '依每 100 萬輸出 tokens 折算（編碼帳單主要來自輸出），匯率 ¥{fx}/$。峰谷只影響額度消耗速度，不改變結論：額度內走 OpenCode 始終比官方直連便宜；例外是額度用盡，或某個模型的額度先用完。',
-        footerOfficial: '上面「官方 5 小時／本週／本月」百分比來自 OpenCode 介面，是帳號真實用量，其他用戶端或機器用掉的也會算進去。',
-        footerLocal: '依模型的金額是本機估算：只統計這個 harness 的工作階段日誌，用來拆開看模型分布；其他工具的呼叫沒有本機記錄。',
-        footerPeakRule: '金額依離峰價估算，DeepSeek 模型峰時按 2 倍；免費模型不計費。',
-      },
-    };
-
-
+window.__ModuleLoader__.load({
+  id: 'dsh-opencode-routing',
+  factory(require) {
+    const React = require('react');
+    const h = React.createElement;
+
+    const USAGE_API = '/opencode-usage.json';
+    const ROUTER_API = '/opencode-quota-router.json';
+
+    /**
+     * UI strings. `zh` is the source; every other locale is a translation of the
+     * same keys. Missing keys fall back to `en`, then to the key itself, so a
+     * half-finished translation never breaks the page.
+     */
+    const DICT = {
+      zh: {
+        title: 'OpenCode 账户与用量',
+        refresh: '刷新',
+        refreshing: '刷新中…',
+        updatedAt: '更新于 {time}',
+        loadError: '读取失败：{message}',
+        routerTitle: '额度路由',
+        modePrimary: '正常路由',
+        modeFallback: '已回退到官方订阅',
+        modeReason: '原因：{reason}',
+        activeAccount: '当前账户',
+        nextProbe: '下次探测',
+        probeAll: '立即探测',
+        resetMarks: '重置封禁标记',
+        resetHint: '清空所有“额度用尽 / 鉴权失败”的标记，并让路由立刻回到 OpenCode 账户池；不改账户，也不改密钥。',
+        routerMissing: '未检测到额度路由，账户池只读。',
+        accountsTitle: '账户池',
+        accountsOrder: '按顺序使用：前面的账户用完才用后面的。',
+        addAccount: '添加账户',
+        labelPlaceholder: '备注（可选，例如 小号 A）',
+        keyPlaceholder: 'oc_sk_…',
+        addAndProbe: '添加并探测',
+        save: '保存',
+        cancel: '取消',
+        setActive: '设为当前',
+        disable: '停用',
+        enable: '启用',
+        editKey: '编辑密钥',
+        remove: '删除',
+        viewUsage: '查看用量',
+        keyUpdated: '密钥已更新',
+        accountAdded: '账户已添加并探测',
+        shortKey: '密钥不完整：至少 8 个字符',
+        keepOne: '至少保留一个账户',
+        notConfigured: '未配置',
+        readonly: '只读',
+        newKeyFor: '新密钥写入 {ref}',
+        noAccounts: '还没有账户。填一个密钥就能开始。',
+        statusReady: '可用',
+        statusExhausted: '额度用尽',
+        statusAuth: '鉴权失败',
+        statusDisabled: '已停用',
+        statusMissing: '未配置密钥',
+        statusError: '读取失败',
+        statusActive: '当前使用',
+        statusSpare: '备用',
+        statusCurrent: '当前',
+        colIndex: '#',
+        colAccount: '账户',
+        colKey: '密钥',
+        colRolling: '5 小时',
+        colWeekly: '本周',
+        colMonthly: '本月',
+        colStatus: '状态',
+        colActions: '操作',
+        colModel: '模型',
+        colCaps: '能力',
+        colRequests: '请求',
+        colTokens: '输入 / 输出 tokens',
+        colRemaining: '本月剩余',
+        colMonthlyUsed: '本月用量',
+        colWeeklyUsed: '本周用量',
+        modelsTitle: '按模型（本机估算）',
+        capsText: '纯文本',
+        capsImage: '图像',
+        capsVideo: '视频',
+        capsAudio: '音频',
+        capsPdf: 'PDF',
+        capsTools: '工具',
+        capsReasoning: '推理',
+        capsUnknown: '未声明',
+        free: '免费',
+        unlimited: '无限',
+        none: '—',
+        dialogTitle: '{label} 的用量',
+        dialogNote: '官方接口只给这三个窗口的百分比，没有按模型的明细；按模型的金额只能是本机估算。',
+        dialogProbe: '重新探测',
+        close: '关闭',
+        probedAt: '探测于 {time}',
+        resetsAt: '重置于 {time}',
+        usageError: '错误：{message}',
+        peakTitle: '此刻用哪个更划算',
+        peakPlan: '你为 OpenCode 的 {plan} 套餐付 ¥{price} /月（${usd}），额度给到 ¥{allowance}（${allowanceUsd}）的官方价用量。额度按官方价扣，等于打 {discount} 折——同一笔请求走 OpenCode 你只付官方价的 {percent}%。',
+        peakNow: '走官方直连照官方价付现。此刻 OpenCode 是{goPeak}，官方是{officialPeak}{holiday}。',
+        peakGoPeak: '峰段（额度烧 2 倍）',
+        peakGoOff: '谷段',
+        peakOfficialPeak: '峰段（价格 2 倍）',
+        peakOfficialOff: '谷段',
+        peakAtPeak: '高峰期',
+        peakOffPeak: '低谷期',
+        kindCacheRead: '缓存命中输入',
+        kindInput: '缓存未命中输入',
+        kindOutput: '输出',
+        peakHoliday: '——今天是中国法定节假日，官方整天算谷，OpenCode 照算峰',
+        colKind: '计费项',
+        peakExhausted: '但本月额度已经用尽，只能走官方。',
+        peakGoPay: '走 OpenCode 你实付',
+        peakOfficialPay: '走官方直连你实付',
+        peakVerdict: '结论',
+        peakGoCheaper: '走 OpenCode 便宜 {percent}%',
+        verdictGo: '走 OpenCode 便宜 {percent}%',
+        verdictOfficial: '走官方直连便宜 {percent}%',
+        verdictExhausted: '本月额度已用尽，只能走官方直连',
+        demoOn: '看官方更便宜的样子',
+        demoOff: '回到真实数据',
+        demoNote: '示例数据：假设某个模型走 OpenCode 反而更贵（现实中只有额度用尽才会发生）。',
+        peakFootnote: '按每 100 万输出 tokens 折算（编码账单主要来自输出），汇率 ¥{fx}/$。峰谷只影响额度烧多快，不改变结论：额度内走 OpenCode 始终比官方直连便宜；例外是额度用尽，或某个模型的额度先见底。',
+        footerOfficial: '上面「官方 5 小时 / 本周 / 本月」百分比来自 OpenCode 接口，是账户真实用量，别的客户端或别的机器用了也会算进去。',
+        footerLocal: '按模型的金额是本机估算：只统计这个 harness 的会话日志，用来拆开看模型分布；其它工具的调用没有本地记录。',
+        footerPeakRule: '金额按离峰价估算，DeepSeek 模型峰时按 2 倍；免费模型不计费。',
+      },
+      en: {
+        title: 'OpenCode accounts & usage',
+        refresh: 'Refresh',
+        refreshing: 'Refreshing…',
+        updatedAt: 'Updated {time}',
+        loadError: 'Could not load: {message}',
+        routerTitle: 'Quota routing',
+        modePrimary: 'Routing normally',
+        modeFallback: 'Fell back to the official subscription',
+        modeReason: 'Reason: {reason}',
+        activeAccount: 'Active account',
+        nextProbe: 'Next probe',
+        probeAll: 'Probe now',
+        resetMarks: 'Clear blocked marks',
+        resetHint: 'Clears every "out of allowance / auth failed" mark and sends routing straight back to the OpenCode pool. Accounts and keys are untouched.',
+        routerMissing: 'No quota router detected — the account pool is read-only.',
+        accountsTitle: 'Account pool',
+        accountsOrder: 'Used in order: the next account only takes over once the one above runs dry.',
+        addAccount: 'Add an account',
+        labelPlaceholder: 'Label (optional, e.g. alt A)',
+        keyPlaceholder: 'oc_sk_…',
+        addAndProbe: 'Add and probe',
+        save: 'Save',
+        cancel: 'Cancel',
+        setActive: 'Make active',
+        disable: 'Disable',
+        enable: 'Enable',
+        editKey: 'Edit key',
+        remove: 'Delete',
+        viewUsage: 'View usage',
+        keyUpdated: 'Key updated',
+        accountAdded: 'Account added and probed',
+        shortKey: 'Key looks incomplete: at least 8 characters',
+        keepOne: 'Keep at least one account',
+        notConfigured: 'Not set',
+        readonly: 'read-only',
+        newKeyFor: 'New key is stored in {ref}',
+        noAccounts: 'No accounts yet. Add a key to begin.',
+        statusReady: 'Ready',
+        statusExhausted: 'Out of allowance',
+        statusAuth: 'Auth failed',
+        statusDisabled: 'Disabled',
+        statusMissing: 'No key',
+        statusError: 'Probe failed',
+        statusActive: 'In use',
+        statusSpare: 'Spare',
+        statusCurrent: 'current',
+        colIndex: '#',
+        colAccount: 'Account',
+        colKey: 'Key',
+        colRolling: '5 hours',
+        colWeekly: 'This week',
+        colMonthly: 'This month',
+        colStatus: 'Status',
+        colActions: 'Actions',
+        colModel: 'Model',
+        colCaps: 'Modality',
+        colRequests: 'Requests',
+        colTokens: 'Input / output tokens',
+        colRemaining: 'Left this month',
+        colMonthlyUsed: 'Used this month',
+        colWeeklyUsed: 'Used this week',
+        modelsTitle: 'Per model (local estimate)',
+        capsText: 'text',
+        capsImage: 'image',
+        capsVideo: 'video',
+        capsAudio: 'audio',
+        capsPdf: 'PDF',
+        capsTools: 'tools',
+        capsReasoning: 'reasoning',
+        capsUnknown: 'undeclared',
+        free: 'free',
+        unlimited: 'unlimited',
+        none: '—',
+        dialogTitle: 'Usage for {label}',
+        dialogNote: 'The official endpoint only reports these three windows; it has no per-model breakdown. Per-model money can only be a local estimate.',
+        dialogProbe: 'Probe again',
+        close: 'Close',
+        probedAt: 'Probed {time}',
+        resetsAt: 'Resets {time}',
+        usageError: 'Error: {message}',
+        peakTitle: 'Which route is cheaper right now',
+        peakPlan: 'You pay ¥{price}/month (${usd}) for OpenCode {plan} and the plan meters ¥{allowance} (${allowanceUsd}) of usage at official prices — a {discount}× discount, so the same request costs you {percent}% of the official price when it goes through OpenCode.',
+        peakNow: 'The official route bills list price directly. Right now OpenCode is {goPeak} and the official API is {officialPeak}{holiday}.',
+        peakGoPeak: 'at peak (allowance burns twice as fast)',
+        peakGoOff: 'off-peak',
+        peakOfficialPeak: 'at peak (price doubles)',
+        peakOfficialOff: 'off-peak',
+        peakAtPeak: 'peak',
+        peakOffPeak: 'off-peak',
+        kindCacheRead: 'cached input',
+        colKind: 'billing line',
+        kindInput: 'uncached input',
+        kindOutput: 'output',
+        peakHoliday: ' — today is a Chinese public holiday, so the official API charges off-peak all day while OpenCode still charges peak',
+        peakExhausted: ' But this month’s allowance is already spent, so only the official route is left.',
+        peakGoPay: 'You pay via OpenCode',
+        peakOfficialPay: 'You pay via official API',
+        peakVerdict: 'Verdict',
+        peakGoCheaper: 'OpenCode 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.',
+        footerPeakRule: 'Money is estimated at off-peak prices, doubled during DeepSeek peak hours; free models are not billed.',
+      },
+      'zh-tw': {
+        title: 'OpenCode 帳號與用量',
+        refresh: '重新整理',
+        refreshing: '重新整理中…',
+        updatedAt: '更新於 {time}',
+        loadError: '讀取失敗：{message}',
+        routerTitle: '額度路由',
+        modePrimary: '正常路由',
+        modeFallback: '已回退到官方訂閱',
+        modeReason: '原因：{reason}',
+        activeAccount: '目前帳號',
+        nextProbe: '下次探測',
+        probeAll: '立即探測',
+        resetMarks: '重設封鎖標記',
+        resetHint: '清空所有「額度用盡／驗證失敗」標記，並讓路由立刻回到 OpenCode 帳號池；不會改動帳號與金鑰。',
+        routerMissing: '未偵測到額度路由，帳號池為唯讀。',
+        accountsTitle: '帳號池',
+        accountsOrder: '依序使用：前面的帳號用完才會用後面的。',
+        addAccount: '新增帳號',
+        labelPlaceholder: '備註（可選，例如 小號 A）',
+        keyPlaceholder: 'oc_sk_…',
+        addAndProbe: '新增並探測',
+        save: '儲存',
+        cancel: '取消',
+        setActive: '設為目前',
+        disable: '停用',
+        enable: '啟用',
+        editKey: '編輯金鑰',
+        remove: '刪除',
+        viewUsage: '查看用量',
+        keyUpdated: '金鑰已更新',
+        accountAdded: '帳號已新增並探測',
+        shortKey: '金鑰不完整：至少 8 個字元',
+        keepOne: '至少保留一個帳號',
+        notConfigured: '未設定',
+        readonly: '唯讀',
+        newKeyFor: '新金鑰寫入 {ref}',
+        noAccounts: '還沒有帳號。填入金鑰即可開始。',
+        statusReady: '可用',
+        statusExhausted: '額度用盡',
+        statusAuth: '驗證失敗',
+        statusDisabled: '已停用',
+        statusMissing: '未設定金鑰',
+        statusError: '讀取失敗',
+        statusActive: '目前使用',
+        statusSpare: '備用',
+        statusCurrent: '目前',
+        colIndex: '#',
+        colAccount: '帳號',
+        colKey: '金鑰',
+        colRolling: '5 小時',
+        colWeekly: '本週',
+        colMonthly: '本月',
+        colStatus: '狀態',
+        colActions: '操作',
+        colModel: '模型',
+        colCaps: '能力',
+        colRequests: '請求',
+        colTokens: '輸入 / 輸出 tokens',
+        colRemaining: '本月剩餘',
+        colMonthlyUsed: '本月用量',
+        colWeeklyUsed: '本週用量',
+        modelsTitle: '依模型（本機估算）',
+        capsText: '純文字',
+        capsImage: '圖像',
+        capsVideo: '影片',
+        capsAudio: '音訊',
+        capsPdf: 'PDF',
+        capsTools: '工具',
+        capsReasoning: '推理',
+        capsUnknown: '未宣告',
+        free: '免費',
+        unlimited: '無限',
+        none: '—',
+        dialogTitle: '{label} 的用量',
+        dialogNote: '官方介面只提供這三個窗口的百分比，沒有依模型拆分的明細；依模型的金額只能是本機估算。',
+        dialogProbe: '重新探測',
+        close: '關閉',
+        probedAt: '探測於 {time}',
+        resetsAt: '重置於 {time}',
+        usageError: '錯誤：{message}',
+        peakTitle: '此刻用哪個更划算',
+        peakPlan: '你為 OpenCode 的 {plan} 方案付 ¥{price}／月（${usd}），額度給到 ¥{allowance}（${allowanceUsd}）的官方價用量。額度依官方價扣，等於打 {discount} 折——同一筆請求走 OpenCode 你只付官方價的 {percent}%。',
+        peakNow: '走官方直連照官方價付現。此刻 OpenCode 是{goPeak}，官方是{officialPeak}{holiday}。',
+        peakGoPeak: '峰段（額度消耗 2 倍）',
+        peakGoOff: '谷段',
+        peakOfficialPeak: '峰段（價格 2 倍）',
+        peakOfficialOff: '谷段',
+        peakAtPeak: '高峰期',
+        peakOffPeak: '低谷期',
+        kindCacheRead: '緩存命中輸入',
+        colKind: '計費項',
+        kindInput: '緩存未命中輸入',
+        kindOutput: '輸出',
+        peakHoliday: '——今天是中國法定假日，官方整天算谷，OpenCode 照算峰',
+        peakExhausted: '但本月額度已用盡，只能走官方。',
+        peakGoPay: '走 OpenCode 你實付',
+        peakOfficialPay: '走官方直連你實付',
+        peakVerdict: '結論',
+        peakGoCheaper: '走 OpenCode 便宜 {percent}%',
+        verdictGo: '走 OpenCode 便宜 {percent}%',
+        verdictOfficial: '走官方直連便宜 {percent}%',
+        verdictExhausted: '本月額度已用盡，只能走官方直連',
+        demoOn: '看官方更便宜的樣子',
+        demoOff: '回到真實資料',
+        demoNote: '範例資料：假設某個模型走 OpenCode 反而更貴（現實中只有額度用盡才會發生）。',
+        peakFootnote: '依每 100 萬輸出 tokens 折算（編碼帳單主要來自輸出），匯率 ¥{fx}/$。峰谷只影響額度消耗速度，不改變結論：額度內走 OpenCode 始終比官方直連便宜；例外是額度用盡，或某個模型的額度先用完。',
+        footerOfficial: '上面「官方 5 小時／本週／本月」百分比來自 OpenCode 介面，是帳號真實用量，其他用戶端或機器用掉的也會算進去。',
+        footerLocal: '依模型的金額是本機估算：只統計這個 harness 的工作階段日誌，用來拆開看模型分布；其他工具的呼叫沒有本機記錄。',
+        footerPeakRule: '金額依離峰價估算，DeepSeek 模型峰時按 2 倍；免費模型不計費。',
+      },
+    };
+
+
 /* @@EXTRA_LOCALES_BEGIN@@ */
     Object.assign(DICT, {
   "de": {
@@ -426,11 +447,20 @@ window.__ModuleLoader__.load({
     "peakOfficialPay": "Du zahlst über die offizielle API",
     "peakVerdict": "Fazit",
     "peakGoCheaper": "OpenCode ist {percent}% günstiger",
-    "peakOfficialCheaper": "Die offizielle API ist {percent}% günstiger",
     "peakFootnote": "Gerechnet pro 1 Mio. Ausgabe-Tokens (bei einer Coding-Rechnung dominiert die Ausgabe), bei ¥{fx} je $. Haupt- und Nebenzeit ändern nur, wie schnell das Kontingent verbraucht wird, nicht das Fazit: Innerhalb des Kontingents bleibt OpenCode günstiger als die offizielle API; Ausnahmen sind ein aufgebrauchtes Kontingent oder ein Modell, dessen eigenes Limit zuerst endet.",
     "footerOfficial": "Die offiziellen Prozente für 5 Stunden / Woche / Monat kommen von der OpenCode-API und beschreiben das ganze Konto – Nutzung über andere Clients oder Rechner zählt mit.",
     "footerLocal": "Beträge pro Modell sind eine lokale Schätzung: Sie zählen nur das Sitzungsprotokoll dieses Harness, und genau das macht die Verteilung pro Modell sichtbar; Aufrufe anderer Tools hinterlassen lokal keine Spur.",
     "footerPeakRule": "Beträge sind zum Nebenzeit-Preis geschätzt, bei DeepSeek-Modellen zur Hauptzeit doppelt; kostenlose Modelle werden nicht berechnet.",
+    "kindCacheRead": "zwischengespeicherte Eingabe",
+    "kindInput": "nicht zwischengespeicherte Eingabe",
+    "kindOutput": "Ausgabe",
+    "colKind": "Posten",
+    "verdictGo": "Über OpenCode {percent}% günstiger",
+    "verdictOfficial": "Über die offizielle API {percent}% günstiger",
+    "verdictExhausted": "Monatskontingent aufgebraucht – nur die offizielle API bleibt",
+    "demoOn": "Fall „offiziell günstiger\" zeigen",
+    "demoOff": "Zurück zu echten Daten",
+    "demoNote": "Beispieldaten: ein Modell, das über OpenCode teurer wäre (real nur bei aufgebrauchtem Kontingent).",
   },
   "es": {
     "title": "Cuentas y uso de OpenCode",
@@ -528,11 +558,20 @@ window.__ModuleLoader__.load({
     "peakOfficialPay": "Pagas por la API oficial",
     "peakVerdict": "Conclusión",
     "peakGoCheaper": "OpenCode sale {percent}% más barato",
-    "peakOfficialCheaper": "La API oficial sale {percent}% más barata",
     "peakFootnote": "Calculado por millón de tokens de salida (en una factura de código manda la salida), a ¥{fx} por dólar. Las horas pico solo cambian la rapidez con que se consume la cuota, no la conclusión: dentro de la cuota, OpenCode siempre sale más barato que la API oficial; las excepciones son que la cuota se agote o que el límite de un modelo concreto se acabe antes.",
     "footerOfficial": "Los porcentajes oficiales de 5 horas / semana / mes vienen de la API de OpenCode y describen la cuenta completa: el uso desde otros clientes u otras máquinas también cuenta.",
     "footerLocal": "El importe por modelo es una estimación local: solo cuenta el registro de sesiones de este harness, que es lo que permite ver el reparto por modelo; las llamadas de otras herramientas no dejan rastro local.",
     "footerPeakRule": "El importe se estima a tarifa valle, duplicada en hora pico para los modelos DeepSeek; los modelos gratuitos no se facturan.",
+    "kindCacheRead": "entrada en caché",
+    "kindInput": "entrada sin caché",
+    "kindOutput": "salida",
+    "colKind": "Concepto",
+    "verdictGo": "Con OpenCode un {percent}% más barato",
+    "verdictOfficial": "Con la API oficial un {percent}% más barato",
+    "verdictExhausted": "Cuota mensual agotada: solo queda la API oficial",
+    "demoOn": "Ver el caso de que lo oficial sea más barato",
+    "demoOff": "Volver a los datos reales",
+    "demoNote": "Datos de ejemplo: un modelo que con OpenCode sería más caro (en la realidad solo pasa al agotar la cuota).",
   },
   "fr": {
     "title": "Comptes et usage OpenCode",
@@ -630,11 +669,20 @@ window.__ModuleLoader__.load({
     "peakOfficialPay": "Vous payez via l’API officielle",
     "peakVerdict": "Verdict",
     "peakGoCheaper": "OpenCode coûte {percent}% de moins",
-    "peakOfficialCheaper": "L’API officielle coûte {percent}% de moins",
     "peakFootnote": "Pour 1 M de tokens en sortie (la sortie domine une facture de code), au taux de ¥{fx} pour 1 $. Les heures pleines ne changent que la vitesse à laquelle le quota se consomme, pas la conclusion : tant qu’il reste du quota, OpenCode reste moins cher que l’API officielle ; les exceptions sont un quota épuisé ou un modèle dont le plafond tombe en premier.",
     "footerOfficial": "Les pourcentages officiels 5 heures / semaine / mois viennent de l’API OpenCode et décrivent le compte entier : l’usage d’autres clients ou d’autres machines compte aussi.",
     "footerLocal": "Le montant par modèle est une estimation locale : seuls les journaux de session de ce harness sont comptés, ce qui permet de voir la répartition par modèle ; les appels des autres outils ne laissent aucune trace locale.",
     "footerPeakRule": "Le montant est estimé au tarif heures creuses, doublé en heures pleines pour les modèles DeepSeek ; les modèles gratuits ne sont pas facturés.",
+    "kindCacheRead": "entrée en cache",
+    "kindInput": "entrée hors cache",
+    "kindOutput": "sortie",
+    "colKind": "Poste",
+    "verdictGo": "{percent}% moins cher via OpenCode",
+    "verdictOfficial": "{percent}% moins cher via l’API officielle",
+    "verdictExhausted": "Quota mensuel épuisé — il ne reste que l’API officielle",
+    "demoOn": "Voir le cas où l’officiel est moins cher",
+    "demoOff": "Revenir aux données réelles",
+    "demoNote": "Données d’exemple : un modèle plus cher via OpenCode (en pratique, seulement quota épuisé).",
   },
   "ja": {
     "title": "OpenCode アカウントと使用量",
@@ -732,11 +780,20 @@ window.__ModuleLoader__.load({
     "peakOfficialPay": "公式直結の支払い",
     "peakVerdict": "結論",
     "peakGoCheaper": "OpenCode のほうが {percent}% 安い",
-    "peakOfficialCheaper": "公式直結のほうが {percent}% 安い",
     "peakFootnote": "出力 100 万トークンあたりに換算（コーディングの請求はほとんどが出力由来）、レートは ¥{fx}/$。ピークとオフピークはクォータの減る速さに影響するだけで、結論は変わりません。クォータの範囲内なら OpenCode 経由のほうが公式直結より常に安く、例外はクォータを使い切った場合と、特定モデルの上限に先に達した場合です。",
     "footerOfficial": "上の「公式 5 時間 / 今週 / 今月」の割合は OpenCode の API が返す実際のアカウント使用量で、他のクライアントや別のマシンからの利用も含まれます。",
     "footerLocal": "モデル別の金額はローカル推定です。この harness のセッションログだけを集計してモデル別の内訳を出すもので、他のツールからの呼び出しはローカルに記録されません。",
     "footerPeakRule": "金額はオフピーク価格で見積もり、DeepSeek モデルはピーク時に 2 倍で計算します。無料モデルは課金されません。",
+    "kindCacheRead": "キャッシュ済み入力",
+    "kindInput": "未キャッシュ入力",
+    "kindOutput": "出力",
+    "colKind": "課金項目",
+    "verdictGo": "OpenCode 経由が {percent}% 安い",
+    "verdictOfficial": "公式 API 経由が {percent}% 安い",
+    "verdictExhausted": "今月の枠を使い切ったため公式 API のみ",
+    "demoOn": "公式が安い場合を表示",
+    "demoOff": "実際のデータに戻す",
+    "demoNote": "サンプル表示：OpenCode 経由のほうが高くなる例（実際は枠を使い切ったときのみ）。",
   },
   "ko": {
     "title": "OpenCode 계정 및 사용량",
@@ -834,11 +891,20 @@ window.__ModuleLoader__.load({
     "peakOfficialPay": "공식 직결 결제액",
     "peakVerdict": "결론",
     "peakGoCheaper": "OpenCode가 {percent}% 더 저렴",
-    "peakOfficialCheaper": "공식 직결이 {percent}% 더 저렴",
     "peakFootnote": "출력 100만 토큰 기준 환산(코딩 요금은 대부분 출력에서 발생), 환율 ¥{fx}/$. 피크·비피크는 할당량이 줄어드는 속도에만 영향을 주고 결론은 바뀌지 않습니다. 할당량 안에서는 OpenCode 경유가 공식 직결보다 항상 저렴하며, 예외는 할당량을 다 쓴 경우와 특정 모델 한도가 먼저 바닥나는 경우입니다.",
     "footerOfficial": "위의 \"공식 5시간 / 이번 주 / 이번 달\" 비율은 OpenCode API가 주는 실제 계정 사용량이며, 다른 클라이언트나 다른 기기에서 쓴 양도 포함됩니다.",
     "footerLocal": "모델별 금액은 로컬 추정치입니다. 이 harness의 세션 로그만 집계해 모델별 분포를 보여 주는 것이며, 다른 도구의 호출은 로컬에 기록되지 않습니다.",
     "footerPeakRule": "금액은 비피크 가격으로 추정하고, DeepSeek 모델은 피크 시간에 2배로 계산합니다. 무료 모델은 과금되지 않습니다.",
+    "kindCacheRead": "캐시된 입력",
+    "kindInput": "캐시되지 않은 입력",
+    "kindOutput": "출력",
+    "colKind": "과금 항목",
+    "verdictGo": "OpenCode 경유가 {percent}% 저렴",
+    "verdictOfficial": "공식 API 경유가 {percent}% 저렴",
+    "verdictExhausted": "이번 달 한도를 모두 사용해 공식 API만 가능",
+    "demoOn": "공식이 더 저렴한 경우 보기",
+    "demoOff": "실제 데이터로 돌아가기",
+    "demoNote": "예시 데이터: OpenCode 경유가 더 비싼 경우(실제로는 한도를 다 썼을 때만).",
   },
   "pt": {
     "title": "Contas e uso do OpenCode",
@@ -936,11 +1002,20 @@ window.__ModuleLoader__.load({
     "peakOfficialPay": "Você paga pela API oficial",
     "peakVerdict": "Veredito",
     "peakGoCheaper": "O OpenCode sai {percent}% mais barato",
-    "peakOfficialCheaper": "A API oficial sai {percent}% mais barata",
     "peakFootnote": "Cálculo por 1 M de tokens de saída (numa fatura de código a saída domina), a ¥{fx} por dólar. O pico só muda a velocidade com que a cota queima, não a conclusão: dentro da cota, o OpenCode continua mais barato que a API oficial; as exceções são a cota esgotada ou um modelo cujo limite próprio acaba antes.",
     "footerOfficial": "As porcentagens oficiais de 5 horas / semana / mês vêm da API do OpenCode e descrevem a conta inteira: uso de outros clientes ou de outras máquinas também entra na conta.",
     "footerLocal": "O valor por modelo é uma estimativa local: conta só o log de sessões deste harness, que é o que permite ver a divisão por modelo; chamadas de outras ferramentas não deixam registro local.",
     "footerPeakRule": "O valor é estimado a preço fora do pico, dobrado no horário de pico para os modelos DeepSeek; modelos gratuitos não são cobrados.",
+    "kindCacheRead": "entrada em cache",
+    "kindInput": "entrada sem cache",
+    "kindOutput": "saída",
+    "colKind": "Item",
+    "verdictGo": "{percent}% mais barato via OpenCode",
+    "verdictOfficial": "{percent}% mais barato via API oficial",
+    "verdictExhausted": "Cota mensal esgotada — resta apenas a API oficial",
+    "demoOn": "Ver o caso em que o oficial é mais barato",
+    "demoOff": "Voltar aos dados reais",
+    "demoNote": "Dados de exemplo: um modelo mais caro via OpenCode (na prática só com a cota esgotada).",
   },
   "ru": {
     "title": "Аккаунты и использование OpenCode",
@@ -1038,663 +1113,819 @@ window.__ModuleLoader__.load({
     "peakOfficialPay": "Вы платите через официальный API",
     "peakVerdict": "Итог",
     "peakGoCheaper": "OpenCode дешевле на {percent}%",
-    "peakOfficialCheaper": "Официальный API дешевле на {percent}%",
     "peakFootnote": "В расчёте на 1 млн выходных токенов (в счёте за код преобладает выход), курс ¥{fx}/$. Пик влияет только на скорость расхода квоты и не меняет вывод: в пределах квоты OpenCode всегда дешевле прямого официального API; исключения — исчерпанная квота или лимит отдельной модели, который закончится раньше.",
     "footerOfficial": "Проценты «официально 5 часов / неделя / месяц» выше приходят из API OpenCode и отражают реальный расход аккаунта — включая другие клиенты и другие машины.",
     "footerLocal": "Суммы по моделям — локальная оценка: учитывается только журнал сессий этого harness, поэтому разбивка по моделям и видна; вызовы из других инструментов локально не записываются.",
     "footerPeakRule": "Суммы считаются по ценам вне пика, для моделей DeepSeek в часы пика применяется коэффициент 2. Бесплатные модели не тарифицируются.",
+    "kindCacheRead": "вход из кеша",
+    "kindInput": "вход без кеша",
+    "kindOutput": "выход",
+    "colKind": "Статья",
+    "verdictGo": "Через OpenCode дешевле на {percent}%",
+    "verdictOfficial": "Через официальный API дешевле на {percent}%",
+    "verdictExhausted": "Месячная квота исчерпана — остаётся только официальный API",
+    "demoOn": "Показать случай, когда официальный дешевле",
+    "demoOff": "Вернуться к реальным данным",
+    "demoNote": "Демо-данные: модель, которая через OpenCode дороже (в реальности — только при исчерпанной квоте).",
   },
     });
-    /* @@EXTRA_LOCALES_END@@ */
-
-    const localeOf = (tag) => {
-      const value = String(tag || '').toLowerCase();
-      if (value.startsWith('zh')) return /tw|hk|mo|hant/.test(value) ? 'zh-tw' : 'zh';
-      for (const key of Object.keys(DICT)) if (key !== 'zh' && key !== 'zh-tw' && value.startsWith(key.split('-')[0])) return key;
-      return 'en';
-    };
-    const LANG = localeOf(typeof navigator === 'undefined' ? '' : navigator.language);
-    const dict = DICT[LANG] ?? DICT.en;
-    const t = (key, vars) => {
-      const template = dict[key] ?? DICT.en[key] ?? key;
-      if (vars === undefined) return template;
-      return template.replace(/\{(\w+)\}/g, (match, name) => (vars[name] === undefined ? match : String(vars[name])));
-    };
-
-    const money = (value) => {
-      if (value === undefined || value === null) return t('none');
-      if (value === 'free') return t('free');
-      if (value === Infinity) return t('unlimited');
-      return value < 1 ? `$${value.toFixed(4)}` : `$${value.toFixed(2)}`;
-    };
-    const tokens = (n) => (n >= 1000000 ? `${(n / 1000000).toFixed(1)}M` : n >= 1000 ? `${Math.round(n / 1000)}k` : String(n));
-    const yuan = (value) => {
-      if (value === undefined || value === null) return t('none');
-      return value >= 1 ? `¥${value.toFixed(2)}` : `¥${value.toFixed(3)}`;
-    };
-    const percentText = (used, limit, free) => {
-      if (free) return t('unlimited');
-      if (limit === undefined || limit === null) return t('none');
-      if (limit === Infinity || limit === 'free') return t('unlimited');
-      if (!limit) return t('none');
-      const ratio = (used / limit) * 100;
-      return `${ratio < 10 ? ratio.toFixed(1) : ratio.toFixed(0)}%`;
-    };
-    const official = (window) => {
-      const value = window && typeof window.percent === 'number' ? window.percent : null;
-      if (value === null) return t('none');
-      const color = value >= 100 ? '#d9534f' : value >= 80 ? '#e0a030' : 'inherit';
-      return h('span', { style: { color } }, `${value < 10 ? value.toFixed(1) : Math.round(value)}%`);
-    };
-    const clock = (ms) => (ms ? new Date(ms).toLocaleString() : t('none'));
-    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);
-      const relative = LANG === 'zh' || LANG === 'zh-tw'
-        ? `${minutes < 60 ? `${minutes} 分钟` : `${Math.round(minutes / 60)} 小时`}后`
-        : new Date(ms).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
-      return relative;
-    };
-
-    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,
-      lineHeight: 1.6, whiteSpace: 'nowrap',
-    };
-    const input = {
-      padding: '4px 8px', borderRadius: 6, border: '1px solid rgba(127,127,127,.45)',
-      background: 'transparent', color: 'inherit', font: 'inherit', fontSize: 13,
-    };
-    const cell = (content, extra) =>
-      h('td', { style: { padding: '5px 10px', borderBottom: '1px solid rgba(127,127,127,.22)', whiteSpace: 'nowrap', ...extra } }, content);
-    const th = (title) =>
-      h('th', {
-        key: title,
-        style: {
-          textAlign: 'left', padding: '6px 10px', fontWeight: 600, whiteSpace: 'nowrap',
-          borderBottom: '1px solid rgba(127,127,127,.3)', position: 'sticky', top: 0,
-          background: 'var(--dsh-surface, rgba(127,127,127,.08))', backdropFilter: 'blur(4px)',
-        },
-      }, title);
-
-    // Horizontal drag-to-scroll for wide tables: press anywhere in the pane and
-    // drag. A press that starts on a control is left alone, so buttons and inputs
-    // keep working inside the scroller.
-    const draggable = () => ({
-      onMouseDown: (event) => {
-        if (event.button !== 0) return;
-        const tag = event.target && event.target.tagName;
-        if (tag === 'BUTTON' || tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || tag === 'A') return;
-        const pane = event.currentTarget;
-        if (pane.scrollWidth <= pane.clientWidth + 1) return;
-        const startX = event.clientX;
-        const startLeft = pane.scrollLeft;
-        const move = (moveEvent) => {
-          pane.scrollLeft = startLeft - (moveEvent.clientX - startX);
-        };
-        const stop = () => {
-          pane.style.cursor = 'grab';
-          pane.style.userSelect = '';
-          window.removeEventListener('mousemove', move);
-          window.removeEventListener('mouseup', stop);
-        };
-        pane.style.cursor = 'grabbing';
-        pane.style.userSelect = 'none';
-        window.addEventListener('mousemove', move);
-        window.addEventListener('mouseup', stop);
-      },
-    });
-
-    const STATUS = () => ({
-      ready: [t('statusReady'), '#3c9d5d'],
-      exhausted: [t('statusExhausted'), '#e0a030'],
-      auth: [t('statusAuth'), '#d9534f'],
-      disabled: [t('statusDisabled'), 'rgba(127,127,127,.8)'],
-      missing: [t('statusMissing'), '#d9534f'],
-    });
-
-    const capabilityTags = (row) => {
-      const inputs = Array.isArray(row.inputs) && row.inputs.length > 0 ? row.inputs : ['text'];
-      const labels = inputs.map((kind) => ({
-        text: t('capsText'), image: t('capsImage'), video: t('capsVideo'),
-        audio: t('capsAudio'), pdf: t('capsPdf'),
-      }[kind] ?? kind));
-      if (row.tools === true) labels.push(t('capsTools'));
-      if (row.reasoning === true) labels.push(t('capsReasoning'));
-      return labels;
-    };
-
-    function WindowBar({ window, label }) {
-      const value = typeof window?.percent === 'number' ? window.percent : null;
-      const width = value === null ? 0 : Math.max(2, Math.min(100, value));
-      const color = value === null ? 'rgba(127,127,127,.4)' : value >= 100 ? '#d9534f' : value >= 80 ? '#e0a030' : '#3c9d5d';
-      return h('div', { style: { marginBottom: 10 } },
-        h('div', { style: { display: 'flex', justifyContent: 'space-between', fontSize: 12, marginBottom: 4 } },
-          h('span', null, label),
-          h('span', { style: { fontWeight: 600, color: value !== null && value >= 80 ? color : 'inherit' } },
-            value === null ? t('none') : `${value < 10 ? value.toFixed(1) : Math.round(value)}%`),
-        ),
-        h('div', { style: { height: 6, borderRadius: 999, background: 'rgba(127,127,127,.2)', overflow: 'hidden' } },
-          h('div', { style: { width: `${width}%`, height: '100%', background: color, borderRadius: 999 } }),
-        ),
-        window?.resetsAt
-          ? h('div', { style: { fontSize: 11, opacity: .55, marginTop: 3 } }, t('resetsAt', { time: new Date(window.resetsAt).toLocaleString() }))
-          : null,
-      );
-    }
-
-    function UsageDialog({ account, busy, onProbe, onClose }) {
-      if (!account) return null;
-      return h('div', {
-        style: {
-          position: 'fixed', inset: 0, background: 'rgba(0,0,0,.45)', zIndex: 1200,
-          display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16,
-        },
-        onMouseDown: (event) => { if (event.target === event.currentTarget) onClose(); },
-      },
-        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)',
-          },
-        },
-          h('div', { style: { display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 } },
-            h('div', { style: { fontWeight: 600, fontSize: 14 } }, t('dialogTitle', { label: account.label })),
-            account.active ? h('span', {
-              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('div', { style: { fontSize: 12, opacity: .6, marginBottom: 12 } },
-            account.hint ? h('span', { style: { fontFamily: 'ui-monospace, Consolas, monospace' } }, account.hint) : t('notConfigured')),
-          h(WindowBar, { window: account.usage?.rolling, label: t('colRolling') }),
-          h(WindowBar, { window: account.usage?.weekly, label: t('colWeekly') }),
-          h(WindowBar, { window: account.usage?.monthly, label: t('colMonthly') }),
-          account.usageError ? h('div', { style: { color: '#d9534f', fontSize: 12, marginBottom: 8 } }, t('usageError', { message: account.usageError })) : null,
-          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('div', { style: { fontSize: 11, opacity: .55, marginTop: 12, lineHeight: 1.6 } }, t('dialogNote')),
-        ),
-      );
-    }
-
-    function UsageSection() {
-      const [state, setState] = React.useState({ phase: 'loading', usage: null, router: null, error: null });
-      const [notice, setNotice] = React.useState(null);
-      const [actionError, setActionError] = React.useState(null);
-      const [draft, setDraft] = React.useState({ label: '', key: '' });
-      const [editing, setEditing] = React.useState(null);
-      const [keyDraft, setKeyDraft] = React.useState('');
-      const [inspecting, setInspecting] = React.useState(null);
-      const [busy, setBusy] = React.useState(false);
-
-      const load = React.useCallback(async (force) => {
-        try {
-          const [usageResponse, routerResponse] = await Promise.all([
-            fetch(`${USAGE_API}${force ? '?refresh=1' : ''}`, { headers: { accept: 'application/json' } }),
-            fetch(ROUTER_API, { headers: { accept: 'application/json' } }).catch(() => null),
-          ]);
-          if (!usageResponse.ok) throw new Error(`HTTP ${usageResponse.status}`);
-          const usage = await usageResponse.json();
-          let router = null;
-          if (routerResponse && routerResponse.ok) {
-            try { router = await routerResponse.json(); } catch { router = null; }
-          }
-          setState({ phase: 'ready', usage, router, error: null });
-        } catch (error) {
-          setState((previous) => ({ ...previous, phase: 'error', error: String(error?.message ?? error) }));
-        }
-      }, []);
-
-      const act = React.useCallback(async (payload) => {
-        setBusy(true);
-        setActionError(null);
-        setNotice(null);
-        try {
-          const response = await fetch(ROUTER_API, {
-            method: 'POST',
-            headers: { 'content-type': 'application/json', accept: 'application/json' },
-            body: JSON.stringify(payload),
-          });
-          const body = await response.json().catch(() => ({}));
-          if (!response.ok) throw new Error(body?.error ?? `HTTP ${response.status}`);
-          await load(true);
-          return true;
-        } catch (error) {
-          setActionError(String(error?.message ?? error));
-          return false;
-        } finally {
-          setBusy(false);
-        }
-      }, [load]);
-
-      React.useEffect(() => {
-        let alive = true;
-        const run = (force) => {
-          if (!alive) return;
-          void load(force);
-        };
-        run(false);
-        const timer = setInterval(() => run(false), 60000);
-        return () => {
-          alive = false;
-          clearInterval(timer);
-        };
-      }, [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 VENDORS = [
-        [/^deepseek/i, { mark: 'DS', name: 'DeepSeek', color: '#4d6bfe' }],
-        [/^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' }],
-        [/^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));
-        if (hit) return hit[1];
-        return { mark: String(model).slice(0, 2).toUpperCase(), name: model, color: '#6b7280' };
-      };
-
-      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 ?? [];
-      const accountIds = router?.accounts?.length
-        ? router.accounts.map((account) => account.id)
-        : usageAccounts.map((account) => account.id);
-      const accountList = accountIds.map((id) => {
-        const fromRouter = routerAccounts.get(id);
-        const fromUsage = usageAccounts.find((account) => account.id === id);
-        return {
-          id,
-          label: fromRouter?.label ?? fromUsage?.label ?? id,
-          hint: fromRouter?.hint ?? fromUsage?.hint ?? null,
-          keyRef: fromRouter?.keyRef,
-          active: fromRouter?.active ?? fromUsage?.active ?? false,
-          enabled: fromRouter?.enabled ?? fromUsage?.enabled ?? true,
-          status: fromRouter?.status ?? null,
-          exhaustedUntil: fromRouter?.exhaustedUntil ?? null,
-          usage: fromRouter?.usage ?? fromUsage?.usage ?? null,
-          usageError: fromUsage?.usageError ?? null,
-          checkedAt: fromRouter?.checkedAt ?? fromUsage?.checkedAt ?? null,
-          configured: fromRouter?.configured ?? fromUsage?.configured ?? false,
-        };
-      });
-
-      // 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('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)}` : ''),
-          ),
-          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', 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')),
-          editing === account.id
-            ? 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', 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')),
-              )
-            : null,
-        );
-      });
-
-      const addAccount = async () => {
-        if (draft.key.trim().length < 8) {
-          setActionError(t('shortKey'));
-          return;
-        }
-        const ok = await act({ action: 'add', label: draft.label.trim(), key: draft.key.trim() });
-        if (ok) {
-          setDraft({ label: '', key: '' });
-          setNotice(t('accountAdded'));
-        }
-      };
-
-      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: {
-                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,
-              },
-            }, vendor.mark),
-            h('span', { style: { fontWeight: 600, fontSize: 13 } }, 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;
-      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))))
-        : 0;
-      const verdict = exhausted
-        ? t('verdictExhausted')
-        : allGo ? t('verdictGo', { percent: saving }) : t('verdictOfficial', { percent: saving });
-      const verdictColor = exhausted ? '#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 }
-          : undefined,
-      }, `${yuan(price)}（${peakFlag ? t('peakAtPeak') : t('peakOffPeak')}）`);
-
-      const inspectingAccount = accountList.find((account) => account.id === inspecting) ?? null;
-
-      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')),
-        ),
-        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,
-        notice ? h('div', { style: { color: '#3c9d5d', fontSize: 13 } }, notice) : null,
-
-        card(
-          cardHead(t('routerTitle'), router
-            ? 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: .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) : 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('span', { style: { flexBasis: '100%', fontSize: 11, opacity: .55, lineHeight: 1.6 } }, t('resetHint')),
-              )
-            : null,
-        ),
-
-        card(
-          cardHead(t('accountsTitle'), h('span', { style: { opacity: .55, fontSize: 12 } }, t('accountsOrder'))),
-          h('div', { style: { display: 'flex', flexDirection: 'column', gap: 10 } },
-            accountCards.length > 0
-              ? accountCards
-              : h('div', { style: { opacity: .6, fontSize: 12 } }, t('noAccounts')),
-          ),
-        ),
-
-        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', style: btn, disabled: busy || draft.key.trim().length < 8, onClick: () => void addAccount() }, t('addAndProbe')),
-              ),
-            )
-          : null,
-
-        peak
-          ? 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),
-              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('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 }),
-                  ),
-                )),
-                ),
-              ),
-            )
-          : null,
-
-        card(
-          cardHead(t('modelsTitle')),
-          h('div', { style: { display: 'flex', flexDirection: 'column', gap: 10 } }, modelCards),
-        ),
-
-        h('div', { style: { opacity: .55, fontSize: 12, lineHeight: 1.8 } },
-          t('footerOfficial'),
-          h('br'),
-          t('footerLocal'),
-        ),
-
-        h(UsageDialog, {
-          account: inspectingAccount,
-          busy,
-          onClose: () => setInspecting(null),
-          onProbe: async () => {
-            if (!inspectingAccount) return;
-            const ok = await act({ action: 'probe', id: inspectingAccount.id });
-            if (ok) setNotice(t('probedAt', { time: clock(Date.now()) }));
-          },
-        }),
-      );
-    }
-
-    return {
-      inject: ['slots'],
-      apply(ctx) {
-        ctx.slots.inject('settings.section', () => ctx.slots.register({
-          name: 'settings.section',
-          id: 'opencode-router',
-          order: 18,
-          label: 'OpenCode 路由与用量',
-        }, UsageSection));
-      },
-    };
-  },
-});
+    /* @@EXTRA_LOCALES_END@@ */
+
+    const localeOf = (tag) => {
+      const value = String(tag || '').toLowerCase();
+      if (value.startsWith('zh')) return /tw|hk|mo|hant/.test(value) ? 'zh-tw' : 'zh';
+      for (const key of Object.keys(DICT)) if (key !== 'zh' && key !== 'zh-tw' && value.startsWith(key.split('-')[0])) return key;
+      return 'en';
+    };
+    const LANG = localeOf(typeof navigator === 'undefined' ? '' : navigator.language);
+    const dict = DICT[LANG] ?? DICT.en;
+    const t = (key, vars) => {
+      const template = dict[key] ?? DICT.en[key] ?? key;
+      if (vars === undefined) return template;
+      return template.replace(/\{(\w+)\}/g, (match, name) => (vars[name] === undefined ? match : String(vars[name])));
+    };
+
+    const money = (value) => {
+      if (value === undefined || value === null) return t('none');
+      if (value === 'free') return t('free');
+      if (value === Infinity) return t('unlimited');
+      return value < 1 ? `$${value.toFixed(4)}` : `$${value.toFixed(2)}`;
+    };
+    const tokens = (n) => (n >= 1000000 ? `${(n / 1000000).toFixed(1)}M` : n >= 1000 ? `${Math.round(n / 1000)}k` : String(n));
+    const yuan = (value) => {
+      if (value === undefined || value === null) return t('none');
+      return value >= 1 ? `¥${value.toFixed(2)}` : `¥${value.toFixed(3)}`;
+    };
+    const percentText = (used, limit, free) => {
+      if (free) return t('unlimited');
+      if (limit === undefined || limit === null) return t('none');
+      if (limit === Infinity || limit === 'free') return t('unlimited');
+      if (!limit) return t('none');
+      const ratio = (used / limit) * 100;
+      return `${ratio < 10 ? ratio.toFixed(1) : ratio.toFixed(0)}%`;
+    };
+    const official = (window) => {
+      const value = window && typeof window.percent === 'number' ? window.percent : null;
+      if (value === null) return t('none');
+      const color = value >= 100 ? '#d9534f' : value >= 80 ? '#e0a030' : 'inherit';
+      return h('span', { style: { color } }, `${value < 10 ? value.toFixed(1) : Math.round(value)}%`);
+    };
+    const clock = (ms) => (ms ? new Date(ms).toLocaleString() : t('none'));
+    const when = (ms) => {
+      if (!ms) return t('none');
+      const delta = ms - Date.now();
+      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} 分 ${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,
+      lineHeight: 1.6, whiteSpace: 'nowrap',
+    };
+    const input = {
+      padding: '4px 8px', borderRadius: 6, border: '1px solid rgba(127,127,127,.45)',
+      background: 'transparent', color: 'inherit', font: 'inherit', fontSize: 13,
+    };
+    const cell = (content, extra) =>
+      h('td', { style: { padding: '5px 10px', borderBottom: '1px solid rgba(127,127,127,.22)', whiteSpace: 'nowrap', ...extra } }, content);
+    const th = (title) =>
+      h('th', {
+        key: title,
+        style: {
+          textAlign: 'left', padding: '6px 10px', fontWeight: 600, whiteSpace: 'nowrap',
+          borderBottom: '1px solid rgba(127,127,127,.3)', position: 'sticky', top: 0,
+          background: 'var(--dsh-surface, rgba(127,127,127,.08))', backdropFilter: 'blur(4px)',
+        },
+      }, title);
+
+    // Horizontal drag-to-scroll for wide tables: press anywhere in the pane and
+    // drag. A press that starts on a control is left alone, so buttons and inputs
+    // keep working inside the scroller.
+    const draggable = () => ({
+      onMouseDown: (event) => {
+        if (event.button !== 0) return;
+        const tag = event.target && event.target.tagName;
+        if (tag === 'BUTTON' || tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || tag === 'A') return;
+        const pane = event.currentTarget;
+        if (pane.scrollWidth <= pane.clientWidth + 1) return;
+        const startX = event.clientX;
+        const startLeft = pane.scrollLeft;
+        const move = (moveEvent) => {
+          pane.scrollLeft = startLeft - (moveEvent.clientX - startX);
+        };
+        const stop = () => {
+          pane.style.cursor = 'grab';
+          pane.style.userSelect = '';
+          window.removeEventListener('mousemove', move);
+          window.removeEventListener('mouseup', stop);
+        };
+        pane.style.cursor = 'grabbing';
+        pane.style.userSelect = 'none';
+        window.addEventListener('mousemove', move);
+        window.addEventListener('mouseup', stop);
+      },
+    });
+
+    const STATUS = () => ({
+      ready: [t('statusReady'), '#3c9d5d'],
+      exhausted: [t('statusExhausted'), '#e0a030'],
+      auth: [t('statusAuth'), '#d9534f'],
+      disabled: [t('statusDisabled'), 'rgba(127,127,127,.8)'],
+      missing: [t('statusMissing'), '#d9534f'],
+    });
+
+    const capabilityTags = (row) => {
+      const inputs = Array.isArray(row.inputs) && row.inputs.length > 0 ? row.inputs : ['text'];
+      const labels = inputs.map((kind) => ({
+        text: t('capsText'), image: t('capsImage'), video: t('capsVideo'),
+        audio: t('capsAudio'), pdf: t('capsPdf'),
+      }[kind] ?? kind));
+      if (row.tools === true) labels.push(t('capsTools'));
+      if (row.reasoning === true) labels.push(t('capsReasoning'));
+      return labels;
+    };
+
+    function WindowBar({ window, label }) {
+      const value = typeof window?.percent === 'number' ? window.percent : null;
+      const width = value === null ? 0 : Math.max(2, Math.min(100, value));
+      const color = value === null ? 'rgba(127,127,127,.4)' : value >= 100 ? '#d9534f' : value >= 80 ? '#e0a030' : '#3c9d5d';
+      return h('div', { style: { marginBottom: 10 } },
+        h('div', { style: { display: 'flex', justifyContent: 'space-between', fontSize: 12, marginBottom: 4 } },
+          h('span', null, label),
+          h('span', { style: { fontWeight: 600, color: value !== null && value >= 80 ? color : 'inherit' } },
+            value === null ? t('none') : `${value < 10 ? value.toFixed(1) : Math.round(value)}%`),
+        ),
+        h('div', { style: { height: 6, borderRadius: 999, background: 'rgba(127,127,127,.2)', overflow: 'hidden' } },
+          h('div', { style: { width: `${width}%`, height: '100%', background: color, borderRadius: 999 } }),
+        ),
+        window?.resetsAt
+          ? h('div', { style: { fontSize: 11, opacity: .55, marginTop: 3 } }, t('resetsAt', { time: new Date(window.resetsAt).toLocaleString() }))
+          : null,
+      );
+    }
+
+    function UsageDialog({ account, busy, onProbe, onClose }) {
+      if (!account) return null;
+      const skin = theme();
+      return h('div', {
+        style: {
+          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(); },
+      },
+        h('div', {
+          style: {
+            minWidth: 380, maxWidth: 520, width: '100%', padding: '16px 18px', borderRadius: 10,
+            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 } },
+            h('div', { style: { fontWeight: 600, fontSize: 14 } }, t('dialogTitle', { label: account.label })),
+            account.active ? h('span', {
+              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', 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')),
+          h(WindowBar, { window: account.usage?.rolling, label: t('colRolling') }),
+          h(WindowBar, { window: account.usage?.weekly, label: t('colWeekly') }),
+          h(WindowBar, { window: account.usage?.monthly, label: t('colMonthly') }),
+          account.usageError ? h('div', { style: { color: '#d9534f', fontSize: 12, marginBottom: 8 } }, t('usageError', { message: account.usageError })) : null,
+          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', 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')),
+        ),
+      );
+    }
+
+    function UsageSection() {
+      const [state, setState] = React.useState({ phase: 'loading', usage: null, router: null, error: null });
+      const [notice, setNotice] = React.useState(null);
+      const [actionError, setActionError] = React.useState(null);
+      const [draft, setDraft] = React.useState({ label: '', key: '' });
+      const [editing, setEditing] = React.useState(null);
+      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 {
+          const [usageResponse, routerResponse] = await Promise.all([
+            fetch(`${USAGE_API}${force ? '?refresh=1' : ''}`, { headers: { accept: 'application/json' } }),
+            fetch(ROUTER_API, { headers: { accept: 'application/json' } }).catch(() => null),
+          ]);
+          if (!usageResponse.ok) throw new Error(`HTTP ${usageResponse.status}`);
+          const usage = await usageResponse.json();
+          let router = null;
+          if (routerResponse && routerResponse.ok) {
+            try { router = await routerResponse.json(); } catch { router = null; }
+          }
+          setState({ phase: 'ready', usage, router, error: null });
+        } catch (error) {
+          setState((previous) => ({ ...previous, phase: 'error', error: String(error?.message ?? error) }));
+        }
+      }, []);
+
+      const act = React.useCallback(async (payload) => {
+        setBusy(true);
+        setActionError(null);
+        setNotice(null);
+        try {
+          const response = await fetch(ROUTER_API, {
+            method: 'POST',
+            headers: { 'content-type': 'application/json', accept: 'application/json' },
+            body: JSON.stringify(payload),
+          });
+          const body = await response.json().catch(() => ({}));
+          if (!response.ok) throw new Error(body?.error ?? `HTTP ${response.status}`);
+          await load(true);
+          return true;
+        } catch (error) {
+          setActionError(String(error?.message ?? error));
+          return false;
+        } finally {
+          setBusy(false);
+        }
+      }, [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) => {
+          if (!alive) return;
+          void load(force);
+        };
+        run(false);
+        const timer = setInterval(() => run(false), 60000);
+        return () => {
+          alive = false;
+          clearInterval(timer);
+        };
+      }, [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 ?? [];
+      const accountIds = router?.accounts?.length
+        ? router.accounts.map((account) => account.id)
+        : usageAccounts.map((account) => account.id);
+      const accountList = accountIds.map((id) => {
+        const fromRouter = routerAccounts.get(id);
+        const fromUsage = usageAccounts.find((account) => account.id === id);
+        return {
+          id,
+          label: fromRouter?.label ?? fromUsage?.label ?? id,
+          hint: fromRouter?.hint ?? fromUsage?.hint ?? null,
+          keyRef: fromRouter?.keyRef,
+          active: fromRouter?.active ?? fromUsage?.active ?? false,
+          enabled: fromRouter?.enabled ?? fromUsage?.enabled ?? true,
+          status: fromRouter?.status ?? null,
+          exhaustedUntil: fromRouter?.exhaustedUntil ?? null,
+          usage: fromRouter?.usage ?? fromUsage?.usage ?? null,
+          usageError: fromUsage?.usageError ?? null,
+          checkedAt: fromRouter?.checkedAt ?? fromUsage?.checkedAt ?? null,
+          configured: fromRouter?.configured ?? fromUsage?.configured ?? false,
+        };
+      });
+
+      // 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('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)}` : ''),
+          ),
+          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('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,
+        );
+      });
+
+      const addAccount = async () => {
+        if (draft.key.trim().length < 8) {
+          setActionError(t('shortKey'));
+          return;
+        }
+        const ok = await act({ action: 'add', label: draft.label.trim(), key: draft.key.trim() });
+        if (ok) {
+          setDraft({ label: '', key: '' });
+          setNotice(t('accountAdded'));
+        }
+      };
+
+      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: {
+                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,
+              },
+            },
+              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',
+          rows: [
+            { kind: 'cacheRead', go: { pay: 0.015, factor: 1 }, official: { pay: 0.15, factor: 1 }, cheaper: 'go', ratio: 0.1 },
+            { kind: 'input', go: { pay: 0.45, factor: 1 }, official: { pay: 4.5, factor: 1 }, cheaper: 'go', ratio: 0.1 },
+            { kind: 'output', go: { pay: 1.35, factor: 1 }, official: { pay: 13.5, factor: 1 }, cheaper: 'go', ratio: 0.1 },
+          ],
+          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 }
+          : undefined,
+      }, `${yuan(price)}（${peakFlag ? t('peakAtPeak') : t('peakOffPeak')}）`);
+
+      const inspectingAccount = accountList.find((account) => account.id === inspecting) ?? null;
+
+      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', 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,
+        notice ? h('div', { style: { color: '#3c9d5d', fontSize: 13 } }, notice) : null,
+
+        card(
+          cardHead(t('routerTitle'), router
+            ? 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: .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) : when(Date.now() + (router.probeIntervalMs ?? 0))),
+                stat(t('colStatus'), router.mode === 'fallback' ? t('modeFallback') : t('modePrimary')),
+              )
+            : null,
+          router
+            ? tools(
+                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,
+        ),
+
+        card(
+          cardHead(t('accountsTitle'), h('span', { style: { opacity: .55, fontSize: 12 } }, t('accountsOrder'))),
+          h('div', { style: { display: 'flex', flexDirection: 'column', gap: 10 } },
+            accountCards.length > 0
+              ? accountCards
+              : h('div', { style: { opacity: .6, fontSize: 12 } }, t('noAccounts')),
+          ),
+        ),
+
+        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')),
+              ),
+            )
+          : 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('colKind'), t('peakGoPay'), t('peakOfficialPay')].map((title) => th(title))),
+                ),
+                h('tbody', null, shown.models.flatMap((row) =>
+                  (row.rows ?? [{ kind: 'output', go: row.go, official: row.official, cheaper: row.cheaper, ratio: row.ratio }])
+                    .map((line, index) =>
+                      h('tr', {
+                        key: `${row.model}-${line.kind}`,
+                        // The cached-input line is the one that actually lands on
+                        // most requests, so it is highlighted instead of buried.
+                        style: line.kind === 'cacheRead'
+                          ? { background: 'rgba(60,157,93,.12)' }
+                          : index === 0 ? { borderTop: '1px solid rgba(127,127,127,.22)' } : undefined,
+                      },
+                        cell(index === 0 ? prettyModel(row.model) : '', { fontWeight: index === 0 ? 600 : 400 }),
+                        cell(t(`kind${line.kind[0].toUpperCase()}${line.kind.slice(1)}`),
+                          line.kind === 'cacheRead' ? { fontWeight: 600, color: '#3c9d5d' } : { opacity: .75 }),
+                        cell(priceCell(line.go.pay, line.go.factor > 1, line.cheaper === 'go')),
+                        cell(priceCell(line.official.pay, line.official.factor > 1, line.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: { display: 'flex', flexDirection: 'column', gap: 10 } }, modelCards),
+        ),
+
+        h('div', { style: { opacity: .55, fontSize: 12, lineHeight: 1.8 } },
+          t('footerOfficial'),
+          h('br'),
+          t('footerLocal'),
+        ),
+
+        h(UsageDialog, {
+          account: inspectingAccount,
+          busy,
+          onClose: () => setInspecting(null),
+          onProbe: async () => {
+            if (!inspectingAccount) return;
+            const ok = await act({ action: 'probe', id: inspectingAccount.id });
+            if (ok) setNotice(t('probedAt', { time: clock(Date.now()) }));
+          },
+        }),
+      );
+    }
+
+    // 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',
+          order: 18,
+          label: 'OpenCode 路由与用量',
+        }, UsageSection));
+      },
+    };
+  },
+});