dsh-dfy-pet 2.7.0 → 2.9.0

package/client.js

@@ -25,9 +25,22 @@ window.__ModuleLoader__.load({
     const RELAY_NS = 'llm-pi-ai'; // 中转站供应商写入的 Host 设置命名空间
     const ROUTE_PATTERN = /^[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/; // 供应商 ID 必须能同时作为设置键与凭据前缀
     const PROTOCOLS = [['openai-completions', 'protoChat'], ['openai-responses', 'protoResponses'], ['anthropic-messages', 'protoMessages']]; // 支持的中转站协议及其文案键
-    const MENU_WIDTH = 232; // 右键菜单宽度，用于贴边修正
-    const MENU_HEIGHT = 180; // 菜单含展开子菜单时的高度，用于贴边修正
-    const OPENCODE_ROUTE = 'api/deepseek-pet/opencode'; // OpenCode 监控路由的文档相对地址
+    const MENU_GAP = 8; // 菜单与窗口边缘的最小间距
+
+    const OPENCODE_ROUTE = 'api/deepseek-pet/opencode'; // OpenCode 监控路由的文档相对地址（默认）
+    const TOKEN_USAGE_ROUTE = 'api/deepseek-pet/tokens/usage'; // Token 用量统计路由的文档相对地址
+    const hostRoute = (path) => { // 生成同源的 Host 路由地址，保证 pathname 与注册路径完全一致
+      const clean = String(path).replace(/^\/+/, ''); // 去掉可能的前导斜杠
+      const candidates = [globalThis.location?.origin, typeof document === 'object' && document !== null ? document.baseURI : null]; // 依次尝试页面来源与文档基准
+      for (const candidate of candidates) { // 逐个检查可用来源
+        if (typeof candidate !== 'string' || candidate.length === 0) continue; // 跳过空值
+        let origin = ''; // 解析出的来源
+        try { origin = new URL(candidate).origin; } catch (error) { continue; } // 解析失败换下一个
+        if (origin === 'null' || !/^https?:\/\//i.test(origin)) continue; // 自定义协议没有可直连的 /api
+        return `${origin}/${clean}`; // 同源绝对地址
+      } // 结束来源遍历
+      return path; // 非 http(s) 页面只能交给宿主按文档相对转运
+    }; // 结束地址生成
     const OPENCODE_UNSEEN_KEY = 'dsh.deepseek-pet.opencode.unseen'; // 未查看变动标记的本地键
     const OPENCODE_AUTO_KEY = 'dsh.deepseek-pet.opencode.autoHours'; // 自动检查间隔的本地键
     const OPENCODE_HIDDEN_KEY = 'dsh.deepseek-pet.opencode.hiddenSeries'; // 图例隐藏状态的本地键
@@ -35,6 +48,10 @@ window.__ModuleLoader__.load({
     const OPENCODE_SORT_KEY = 'dsh.deepseek-pet.opencode.sortField'; // 排序字段的本地键
     const OPENCODE_SORT_DIR_KEY = 'dsh.deepseek-pet.opencode.sortDir'; // 排序方向的本地键
     const OPENCODE_SORT_FIELDS = ['go', 'goPlus', 'goTeams']; // 允许的用量排序字段
+    const OPENCODE_USAGE_URL_KEY = 'dsh.deepseek-pet.opencode.usageUrl'; // 自定义用量来源的本地键
+    const OPENCODE_USAGE_FALLBACK_KEY = 'dsh.deepseek-pet.opencode.usageFallbackUrl'; // 备用用量来源的本地键
+    const OPENCODE_ORG_KEY = 'dsh.deepseek-pet.opencode.orgId'; // 团队工作区 id 的本地键
+    const OPENCODE_USAGE_WINDOWS = [['rolling', 'ocWindowRolling'], ['weekly', 'ocWindowWeekly'], ['monthly', 'ocWindowMonthly']]; // 与服务端一致的三个窗口
     const CHAT_MODEL_KEY = 'dsh.deepseek-pet.chat.model'; // 对话面板所选模型的本地键
     const CHAT_SESSION_KEY = 'dsh.deepseek-pet.chat.sessionId'; // 对话专用会话身份的本地键，重开页面后还能接着聊
     const CHAT_REPLY_TIMEOUT_MS = 120000; // 单次回复最长等待时间，超时给出提示而不是一直转圈
@@ -98,9 +115,46 @@ window.__ModuleLoader__.load({
         savedBubble: 'Relay ready — pick a model!', // 保存后宠物台词
         ocMenu: 'OpenCode model monitor', // 监控一级菜单
         ocTitle: 'OpenCode Go model monitor', // 监控面板标题
-        ocDesc: 'Diffs Included models, token prices and monthly quotas. Usage balance is never read.', // 监控说明
+        ocDesc: 'Diffs Included models, token prices and monthly quotas. Remaining allowance is read only when you press the usage button.', // 监控说明
         ocCheck: 'Check for changes now', // 立即检查子操作
         ocHistory: 'View recent changes', // 查看历史子操作
+        ocUsage: 'Remaining usage', // 剩余用量子操作
+        tkMenu: 'Token usage', // Token 用量菜单项
+        tkTitle: 'Token usage', // Token 用量面板标题
+        tkDesc: 'Aggregated from this machine’s DSH session logs. Cached reads count toward the total.', // 面板说明
+        tkPeriodDay: 'Today', // 本日周期
+        tkPeriodWeek: 'Week', // 本周周期
+        tkPeriodMonth: 'Month', // 本月周期
+        tkCalls: 'calls', // 调用次数单位
+        tkInput: 'Input', // 未缓存输入
+        tkCache: 'Cache read', // 缓存读取
+        tkOutput: 'Output', // 输出
+        tkModels: 'By model', // 模型用量分区标题
+        tkDaily: 'Daily usage', // 按天统计时的分区标题
+        tkHourly: 'Hourly usage', // 按小时统计时的分区标题
+        tkRefresh: 'Refresh', // 刷新按钮
+        tkLoading: 'Reading session logs…', // 统计中提示
+        tkNoData: 'No model calls in this period.', // 空周期提示
+        tkScanned: 'scanned', // 已扫描会话数
+        tkFailed: 'failed', // 读取失败会话数
+        tkTokenUnit: 'tokens', // token 单位
+        tkNoSessions: 'No session logs found on this machine.', // 找不到会话日志的提示
+        ocUsageTitle: 'OpenCode Go remaining usage', // 用量面板标题
+        ocUsageDesc: 'Rolling 5-hour, weekly and monthly allowance left on the current plan, read from the OpenCode usage endpoint.', // 用量面板说明
+        ocUsageRefresh: 'Refresh usage', // 刷新按钮
+        ocUsageRunning: 'Reading usage…', // 查询中
+        ocWindowRolling: '5 hours', // 滚动窗口
+        ocWindowWeekly: 'This week', // 每周窗口
+        ocWindowMonthly: 'This month', // 每月窗口
+        ocUsageRemaining: 'left', // 剩余百分比后置词
+        ocUsageUsed: 'used', // 已用
+        ocUsageReset: 'Resets', // 重置时间前缀
+        ocUsageLimited: 'Limit reached', // 达到上限
+        ocUsageStale: 'Showing the last saved reading; this refresh failed.', // 展示旧数据
+        ocUsageNoData: 'No allowance reading yet. Press refresh once a key is saved.', // 首次无数据
+        ocUsageOpenConsole: 'Open OpenCode Console', // 打开控制台
+        ocUsagePartial: 'Some sources failed', // 部分来源失败
+        ocUsageSource: 'Source', // 来源标签前缀
         ocKey: 'OpenCode API Key', // Key 字段
         ocKeyHint: 'Stored write-only; leave blank to reuse the saved key.', // Key 提示
         ocKeySaved: 'Key saved (leave blank to reuse)', // 已保存占位
@@ -234,9 +288,46 @@ window.__ModuleLoader__.load({
         savedBubble: '中转站配好啦，去选个模型吧！', // 保存后宠物台词
         ocMenu: 'OpenCode 模型监控', // 监控一级菜单
         ocTitle: 'OpenCode Go 模型监控', // 监控面板标题
-        ocDesc: '对比 Included models、单价与月度配额；不读取用量余额。', // 监控说明
+        ocDesc: '对比 Included models、单价与月度配额；剩余用量只在点「剩余用量」时读取。', // 监控说明
         ocCheck: '立即检查变动', // 立即检查子操作
         ocHistory: '查看最近变动记录', // 查看历史子操作
+        ocUsage: '剩余用量', // 剩余用量子操作
+        tkMenu: 'Token 用量', // Token 用量菜单项
+        tkTitle: 'Token 用量统计', // Token 用量面板标题
+        tkDesc: '从本机 DSH 会话日志聚合而来，缓存命中也计入总量。', // 面板说明
+        tkPeriodDay: '本日', // 本日周期
+        tkPeriodWeek: '本周', // 本周周期
+        tkPeriodMonth: '本月', // 本月周期
+        tkCalls: '次调用', // 调用次数单位
+        tkInput: '未缓存输入', // 未缓存输入
+        tkCache: '缓存读取', // 缓存读取
+        tkOutput: '输出', // 输出
+        tkModels: '模型用量', // 模型用量分区标题
+        tkDaily: '每日用量', // 按天统计时的分区标题
+        tkHourly: '每小时用量', // 按小时统计时的分区标题
+        tkRefresh: '刷新', // 刷新按钮
+        tkLoading: '正在统计会话日志…', // 统计中提示
+        tkNoData: '这个周期还没有模型调用。', // 空周期提示
+        tkScanned: '个会话已扫描', // 已扫描会话数
+        tkFailed: '个会话读取失败', // 读取失败会话数
+        tkTokenUnit: 'tokens', // token 单位
+        tkNoSessions: '本机没有找到 DSH 会话日志。', // 找不到会话日志的提示
+        ocUsageTitle: 'OpenCode Go 剩余用量', // 用量面板标题
+        ocUsageDesc: '显示当前套餐在 5 小时滚动、每周、每月三个窗口里的剩余额度，数据来自 OpenCode 用量接口。', // 用量面板说明
+        ocUsageRefresh: '刷新用量', // 刷新按钮
+        ocUsageRunning: '正在读取用量…', // 查询中
+        ocWindowRolling: '5 小时', // 滚动窗口
+        ocWindowWeekly: '本周', // 每周窗口
+        ocWindowMonthly: '本月', // 每月窗口
+        ocUsageRemaining: '剩余', // 剩余百分比后置词
+        ocUsageUsed: '已用', // 已用
+        ocUsageReset: '重置于', // 重置时间前缀
+        ocUsageLimited: '已达上限', // 达到上限
+        ocUsageStale: '这是上次保存的读数，本次刷新失败了。', // 展示旧数据
+        ocUsageNoData: '还没有额度读数；保存 Key 后点一次刷新。', // 首次无数据
+        ocUsageOpenConsole: '打开 OpenCode Console', // 打开控制台
+        ocUsagePartial: '部分来源请求失败', // 部分来源失败
+        ocUsageSource: '来源', // 来源标签前缀
         ocKey: 'OpenCode API Key', // Key 字段
         ocKeyHint: '只写不读回；留空沿用已保存的 Key。', // Key 提示
         ocKeySaved: '已保存 Key（留空沿用）', // 已保存占位
@@ -459,7 +550,7 @@ window.__ModuleLoader__.load({
     animation: none !important;
   }
 }
-.dspet-menu { position: fixed; z-index: 60; min-width: 216px; padding: 6px; border-radius: 12px; background: var(--dsw-alias-bg-overlay, #ffffff); border: 1px solid var(--dsw-alias-border-l1, rgba(0, 0, 0, .12)); box-shadow: 0 12px 32px rgba(12, 22, 64, .22); pointer-events: auto; } /* 右键菜单卡片 */
+.dspet-menu { position: fixed; z-index: 60; min-width: 216px; max-height: calc(100vh - 16px); overflow-y: auto; overscroll-behavior: contain; padding: 6px; border-radius: 12px; background: var(--dsw-alias-bg-overlay, #ffffff); border: 1px solid var(--dsw-alias-border-l1, rgba(0, 0, 0, .12)); box-shadow: 0 12px 32px rgba(12, 22, 64, .22); pointer-events: auto; } /* 右键菜单卡片，超高时自身滚动而不是溢出窗口 */
 .dspet-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: none; color: var(--dsw-alias-label-primary, #1b1b1f); font: inherit; font-size: 13px; line-height: 20px; text-align: left; cursor: pointer; } /* 菜单项按钮 */
 .dspet-menu-item:hover, .dspet-menu-item:focus-visible { background: var(--dsw-alias-bg-layer-2, rgba(0, 0, 0, .05)); outline: none; } /* 菜单项悬停与聚焦 */
 .dspet-menu-icon { flex: none; width: 16px; height: 16px; color: var(--dsw-alias-label-secondary, #6b6b76); } /* 菜单项图标 */
@@ -493,8 +584,8 @@ window.__ModuleLoader__.load({
 .dspet-manual { display: flex; gap: 6px; margin-top: 8px; } /* 手动添加行 */
 .dspet-manual .dspet-input { flex: 1; } /* 手动输入占满剩余宽度 */
 .dspet-menu-caret { margin-left: auto; width: 14px; height: 14px; color: var(--dsw-alias-label-secondary, #6b6b76); } /* 子菜单箭头 */
-.dspet-submenu { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 4px 24px; } /* 展开的子菜单 */
-.dspet-menu-subitem { padding: 7px 8px; font-size: 12px; } /* 子菜单项 */
+.dspet-submenu { position: fixed; z-index: 61; min-width: 168px; } /* 二级菜单浮在一级菜单旁边，层级更高以免被父菜单遮住 */
+
 .dspet-badge { position: absolute; top: 6px; right: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--dsw-alias-state-warn-primary, #d97706); box-shadow: 0 0 0 3px var(--dsw-alias-bg-layer-1, #ffffff); animation: dspet-badge-pulse 2s ease-in-out infinite; pointer-events: none; } /* 未查看变动提示点 */
 @keyframes dspet-badge-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25); opacity: .75; } } /* 提示点呼吸 */
 @media (prefers-reduced-motion: reduce) { .dspet-badge { animation: none !important; } } /* 减少动态时静止 */
@@ -568,6 +659,19 @@ window.__ModuleLoader__.load({
 .dspet-status-id { color: var(--dsw-alias-label-secondary, #6b6b76); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; } /* 模型 id */
 .dspet-status-meta { margin-top: 2px; color: var(--dsw-alias-label-secondary, #6b6b76); font-size: 11px; line-height: 1.5; } /* 价格与配额 */
 .dspet-status-quota { display: block; } /* 配额独立一行 */
+.dspet-usage { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; } /* 三个额度窗口纵向排列 */
+.dspet-usage-card { padding: 8px 10px; border: 1px solid var(--dsw-alias-border-l1, rgba(0, 0, 0, .12)); border-radius: 8px; background: var(--dsw-alias-bg-base, #ffffff); } /* 单个窗口卡片 */
+.dspet-usage-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 600; } /* 窗口标题与百分比 */
+.dspet-usage-value { font-size: 18px; font-weight: 700; } /* 剩余百分比数字 */
+.dspet-usage-unit { margin-left: 2px; font-size: 11px; font-weight: 400; color: var(--dsw-alias-label-secondary, #6b6b76); } /* 百分比后缀 */
+.dspet-usage-track { height: 8px; margin: 6px 0 4px; border-radius: 999px; background: var(--dsw-alias-bg-layer-2, rgba(0, 0, 0, .08)); overflow: hidden; } /* 进度槽 */
+.dspet-usage-bar { height: 100%; border-radius: 999px; background: #4d6bfe; transition: width .25s ease; } /* 剩余比例条 */
+.dspet-usage-bar[data-level="low"] { background: #f2994a; } /* 剩余低于 30% 转为橙色 */
+.dspet-usage-bar[data-level="empty"] { background: #eb5757; } /* 剩余低于 10% 转为红色 */
+.dspet-usage-meta { display: flex; flex-wrap: wrap; gap: 8px; color: var(--dsw-alias-label-secondary, #6b6b76); font-size: 11px; } /* 已用与重置时间 */
+.dspet-usage-limit { color: #eb5757; font-weight: 600; } /* 达到上限提示 */
+.dspet-usage-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } /* 用量面板按钮行 */
+.dspet-usage-source { width: 100%; } /* 用量来源输入占满一行 */
 .dspet-tabs { display: flex; gap: 4px; margin: 8px 0 6px; } /* 图表切换 */
 .dspet-tab { padding: 3px 10px; border: 1px solid var(--dsw-alias-border-l1, rgba(0, 0, 0, .12)); border-radius: 999px; background: none; color: var(--dsw-alias-label-secondary, #6b6b76); font: inherit; font-size: 11px; cursor: pointer; } /* 图表切换按钮 */
 .dspet-tab[aria-pressed="true"] { background: var(--dsw-alias-bg-layer-2, rgba(0, 0, 0, .06)); color: var(--dsw-alias-label-primary, #1b1b1f); border-color: var(--dsw-alias-border-l2, rgba(0, 0, 0, .2)); } /* 选中态 */
@@ -597,6 +701,35 @@ window.__ModuleLoader__.load({
 .dspet-sort .dspet-field-hint { margin: 0; white-space: nowrap; } /* 排序标签 */
 .dspet-sort .dspet-select { width: auto; height: 30px; padding: 0 8px; } /* 排序下拉宽度 */
 .dspet-sort-dir { min-width: 32px; height: 28px; padding: 0 8px; font-size: 11px; } /* 排序方向按钮 */
+.dspet-token-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } /* 面板顶部行 */
+.dspet-token-tabs { display: flex; gap: 4px; padding: 2px; border: 1px solid var(--dsw-alias-border-l1, rgba(0, 0, 0, .12)); border-radius: 8px; background: var(--dsw-alias-bg-layer-2, rgba(0, 0, 0, .05)); } /* 周期切换按钮组 */
+.dspet-token-tab { min-width: 44px; height: 24px; padding: 0 8px; border: 0; border-radius: 6px; background: none; color: var(--dsw-alias-label-secondary, #6b6b76); font: inherit; font-size: 12px; cursor: pointer; } /* 周期切换按钮 */
+.dspet-token-tab:hover { color: var(--dsw-alias-label-primary, #1b1b1f); } /* 周期按钮悬停 */
+.dspet-token-tab[data-active="true"] { background: var(--dsw-alias-bg-base, #fff); color: var(--dsw-alias-label-primary, #1b1b1f); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); } /* 选中的周期按钮 */
+.dspet-token-summary { padding: 10px 12px; border: 1px solid var(--dsw-alias-border-l1, rgba(0, 0, 0, .12)); border-radius: 8px; background: var(--dsw-alias-bg-base, #fff); } /* 汇总卡片 */
+.dspet-token-total { font-size: 22px; font-weight: 700; line-height: 1.2; } /* 总量大数字 */
+.dspet-token-total-unit { margin-left: 3px; font-size: 12px; font-weight: 400; color: var(--dsw-alias-label-secondary, #6b6b76); } /* 总量单位 */
+.dspet-token-split { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; } /* 输入/缓存/输出分项行 */
+.dspet-token-split-item { display: flex; align-items: baseline; gap: 5px; font-size: 11px; color: var(--dsw-alias-label-secondary, #6b6b76); } /* 单个分项 */
+.dspet-token-split-value { font-size: 12px; font-weight: 600; color: var(--dsw-alias-label-primary, #1b1b1f); } /* 分项数值 */
+.dspet-token-section { margin-top: 12px; } /* 分区间距 */
+.dspet-token-section-title { margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--dsw-alias-label-primary, #1b1b1f); } /* 分区标题 */
+.dspet-token-models { display: flex; flex-direction: column; gap: 8px; } /* 模型列表 */
+.dspet-token-model { padding: 8px 10px; border: 1px solid var(--dsw-alias-border-l1, rgba(0, 0, 0, .12)); border-radius: 8px; background: var(--dsw-alias-bg-base, #fff); } /* 单个模型卡片 */
+.dspet-token-model-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } /* 模型名与占比 */
+.dspet-token-model-name { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 模型名 */
+.dspet-token-model-provider { margin-left: 6px; font-size: 10px; font-weight: 400; color: var(--dsw-alias-label-secondary, #6b6b76); } /* 供应商标识 */
+.dspet-token-model-share { font-size: 12px; font-weight: 700; color: var(--dsw-alias-label-primary, #1b1b1f); } /* 占比数字 */
+.dspet-token-track { height: 6px; margin: 6px 0 4px; border-radius: 999px; background: var(--dsw-alias-bg-layer-2, rgba(0, 0, 0, .08)); overflow: hidden; } /* 占比条槽 */
+.dspet-token-bar { height: 100%; border-radius: 999px; background: #4d6bfe; } /* 占比条 */
+.dspet-token-bar[data-level="low"] { background: #f2994a; } /* 占比低于 5% 转橙色 */
+.dspet-token-model-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--dsw-alias-label-secondary, #6b6b76); font-size: 10px; } /* 模型分项明细 */
+.dspet-token-daily { display: flex; align-items: flex-end; gap: 3px; height: 46px; padding-top: 4px; } /* 时间序列柱状图 */
+.dspet-token-daily-col { flex: 1 1 0; min-width: 4px; border-radius: 2px 2px 0 0; background: #4d6bfe; opacity: .75; } /* 单根柱子 */
+.dspet-token-daily-col[data-empty="true"] { background: var(--dsw-alias-bg-layer-2, rgba(0, 0, 0, .08)); opacity: 1; } /* 没有用量的时段留空 */
+.dspet-token-axis { display: flex; gap: 3px; margin-top: 3px; } /* 柱状图下方的坐标标签行 */
+.dspet-token-axis-label { flex: 1 1 0; min-width: 4px; overflow: hidden; text-align: center; font-size: 9px; line-height: 12px; color: var(--dsw-alias-label-secondary, #6b6b76); } /* 单个坐标标签 */
+.dspet-token-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; color: var(--dsw-alias-label-secondary, #6b6b76); font-size: 10px; } /* 面板底部说明 */
 `;
 
     function clampPosition(right, bottom) {
@@ -894,6 +1027,22 @@ window.__ModuleLoader__.load({
       apply(ctx) {
         const translate = ctx.locale.bind(NS);
 
+        // 把文档相对路由换算成浏览器地址：默认保持文档相对写法（与 DSH 自身接口一致）；
+        // 桌面端页面跑在 dsh-app:// 自定义协议下，文档相对地址会解析成 /web/api/... 而 404，
+        // 因此只要能拿到 http(s) 同源地址就用绝对地址；拿不到才退回 DSH 的文档相对约定。
+        const routeUrl = (path) => { // 生成一次请求地址
+          const clean = path.replace(/^\/+/, ''); // 去掉可能的前导斜杠，统一后面拼接
+          const candidates = [globalThis.location?.origin, typeof document === 'object' && document !== null ? document.baseURI : null]; // 依次尝试页面来源与文档基准
+          for (const candidate of candidates) { // 逐个检查可用来源
+            if (typeof candidate !== 'string' || candidate.length === 0) continue; // 跳过空值
+            let origin = ''; // 解析出的来源
+            try { origin = new URL(candidate).origin; } catch (error) { continue; } // 解析失败换下一个
+            if (origin === 'null' || !/^https?:\/\//i.test(origin)) continue; // 自定义协议没有可直连的 /api
+            return `${origin}/${clean}`; // 同源绝对地址，保证 pathname 与注册路径完全一致
+          } // 结束来源遍历
+          return path; // 非 http(s) 页面只能交给宿主按文档相对转运
+        }; // 结束地址生成
+
         ctx.effect(
           () => ctx.locale.register(NS, 'en', DICTS.en),
           'deepseek-pet: en dictionary',
@@ -1122,9 +1271,9 @@ window.__ModuleLoader__.load({
           const loadHistory = async () => { // 加载历史
             setHistoryBusy(true); setHistoryError(''); // 进入加载
             try { // 捕获失败
-              const response = await fetch(`${OPENCODE_ROUTE}/history?limit=20`, { headers: { accept: 'application/json' } }); // 请求历史
+              const response = await fetch(routeUrl(`${OPENCODE_ROUTE}/history?limit=20`), { headers: { accept: 'application/json' } }); // 请求历史
               const payload = await response.json().catch(() => ({ ok: false, error: `HTTP ${response.status}` })); // 解析响应
-              if (!response.ok || !payload.ok) throw new Error(payload.error || `HTTP ${response.status}`); // 检查状态
+              if (!response.ok || !payload.ok) throw new Error(payload.error || `HTTP ${response.status}（请求地址 ${response.url || routeUrl(`${OPENCODE_ROUTE}/history?limit=20`)}）`); // 检查状态并带上实际地址便于排查
               setHistory(payload.checks ?? []); setHasKey(payload.hasKey === true); props.onHistoryViewed(); // 保存并清除标记
             } catch (cause) { // 加载失败
               setHistoryError(cause instanceof Error ? cause.message : String(cause)); // 显示错误
@@ -1135,9 +1284,9 @@ window.__ModuleLoader__.load({
 
           const loadStatus = async () => { // 读取最近状态
             try { // 捕获失败
-              const response = await fetch(`${OPENCODE_ROUTE}/status`, { headers: { accept: 'application/json' } }); // 请求状态
+              const response = await fetch(routeUrl(`${OPENCODE_ROUTE}/status`), { headers: { accept: 'application/json' } }); // 请求状态
               const payload = await response.json().catch(() => ({ ok: false, error: `HTTP ${response.status}` })); // 解析响应
-              if (!response.ok || !payload.ok) throw new Error(payload.error || `HTTP ${response.status}`); // 检查状态
+              if (!response.ok || !payload.ok) throw new Error(payload.error || `HTTP ${response.status}（请求地址 ${response.url || routeUrl(`${OPENCODE_ROUTE}/status`)}）`); // 检查状态并带上实际地址便于排查
               if (payload.status) { setCurrent(payload.status); setHasKey(payload.hasKey === true); } // 保存状态
             } catch (cause) { // 状态读取失败
               setError((previous) => previous.length > 0 ? previous : (cause instanceof Error ? cause.message : String(cause))); // 不覆盖检查错误
@@ -1298,6 +1447,231 @@ window.__ModuleLoader__.load({
           ); // 结束遮罩
         } // 结束监控面板
 
+        function OpenCodeUsage(props) { // OpenCode Go 剩余用量面板
+          const t = props.t; // 翻译函数
+          const [apiKey, setApiKey] = React.useState(''); // 本次输入的 Key，留空沿用已保存的
+          const [busy, setBusy] = React.useState(false); // 是否正在查询
+          const [error, setError] = React.useState(''); // 查询错误
+          const [data, setData] = React.useState(null); // 最近读数
+          const [urlDraft, setUrlDraft] = React.useState(() => { try { return window.localStorage.getItem(OPENCODE_USAGE_URL_KEY) ?? ''; } catch (error) { return ''; } }); // 自定义来源
+          const [fallbackDraft, setFallbackDraft] = React.useState(() => { try { return window.localStorage.getItem(OPENCODE_USAGE_FALLBACK_KEY) ?? ''; } catch (error) { return ''; } }); // 备用来源
+          const [orgDraft, setOrgDraft] = React.useState(() => { try { return window.localStorage.getItem(OPENCODE_ORG_KEY) ?? ''; } catch (error) { return ''; } }); // 团队工作区 id
+          const [showAdvanced, setShowAdvanced] = React.useState(false); // 高级选项是否展开
+          const started = React.useRef(false); // 防止重复自动查询
+
+          const load = async () => { // 查询一次用量
+            setBusy(true); setError(''); // 进入查询
+            try { // 捕获失败
+              const payload = await props.runUsage({ apiKey: apiKey.trim(), usageUrl: urlDraft.trim(), fallbackUrl: fallbackDraft.trim(), orgId: orgDraft.trim() }); // 交给 Host 路由
+              setData(payload); setApiKey(''); // 保存读数并清空 Key
+              if (Array.isArray(payload.errors) && payload.errors.length > 0) setError(payload.errors.join('；')); // 部分来源失败也要告知
+            } catch (cause) { // 查询失败
+              setError(cause instanceof Error ? cause.message : String(cause)); // 显示原因
+            } finally { // 结束查询
+              setBusy(false); // 恢复按钮
+            } // 结束查询
+          }; // 结束查询函数
+          const loadRef = React.useRef(load); loadRef.current = load; // 自动查询使用最新闭包
+
+          React.useEffect(() => { // 打开时自动查一次
+            if (started.current) return; // 只执行一次
+            started.current = true; // 标记已执行
+            loadRef.current(); // 触发查询
+          }, []); // 只依赖首次挂载
+
+          React.useEffect(() => { // Escape 关闭
+            const onKeyDown = (event) => { if (event.key === 'Escape') props.onClose(); }; // 随时可关闭
+            window.addEventListener('keydown', onKeyDown); // 监听
+            return () => window.removeEventListener('keydown', onKeyDown); // 清理
+          }, [props.onClose]); // 依赖关闭回调
+
+          React.useEffect(() => { try { window.localStorage.setItem(OPENCODE_USAGE_URL_KEY, urlDraft.trim()); } catch (error) { /* 忽略存储失败 */ } }, [urlDraft]); // 持久化自定义来源
+          React.useEffect(() => { try { window.localStorage.setItem(OPENCODE_USAGE_FALLBACK_KEY, fallbackDraft.trim()); } catch (error) { /* 忽略存储失败 */ } }, [fallbackDraft]); // 持久化备用来源
+          React.useEffect(() => { try { window.localStorage.setItem(OPENCODE_ORG_KEY, orgDraft.trim()); } catch (error) { /* 忽略存储失败 */ } }, [orgDraft]); // 持久化组织 id
+
+          const maskClose = (event) => { if (event.target === event.currentTarget) props.onClose(); }; // 点遮罩关闭
+          const timeLabel = (value) => { const date = new Date(value); return Number.isNaN(date.getTime()) ? value : date.toLocaleString(); }; // 时间格式
+          const level = (remaining) => (remaining < 10 ? 'empty' : remaining < 30 ? 'low' : 'normal'); // 剩余比例对应的颜色档
+          const card = ([key, labelKey]) => { // 单个额度窗口卡片
+            const item = data?.windows?.[key]; // 该窗口的读数
+            return h('div', { key, className: 'dspet-usage-card' }, // 卡片容器
+              h('div', { className: 'dspet-usage-head' }, // 标题行
+                h('span', null, t(labelKey)), // 窗口名称
+                h('span', { className: 'dspet-usage-value' }, item ? `${item.remaining}%` : '—', h('span', { className: 'dspet-usage-unit' }, t('ocUsageRemaining'))), // 剩余百分比
+              ), // 结束标题行
+              h('div', { className: 'dspet-usage-track', role: 'progressbar', 'aria-valuemin': 0, 'aria-valuemax': 100, 'aria-valuenow': item?.remaining ?? 0, 'aria-label': `${t(labelKey)} ${t('ocUsageRemaining')}` }, // 进度槽
+                h('div', { className: 'dspet-usage-bar', 'data-level': item ? level(item.remaining) : 'normal', style: { width: `${item?.remaining ?? 0}%` } }), // 剩余比例条
+              ), // 结束进度槽
+              h('div', { className: 'dspet-usage-meta' }, // 细节行
+                h('span', null, `${t('ocUsageUsed')} ${item ? item.percent : '—'}%`), // 已用百分比
+                h('span', null, item?.resetsAt ? `${t('ocUsageReset')} ${timeLabel(item.resetsAt)}` : `${t('ocUsageReset')} —`), // 重置时间
+                item?.limited ? h('span', { className: 'dspet-usage-limit' }, t('ocUsageLimited')) : null, // 达到上限
+              ), // 结束细节行
+            ); // 结束卡片
+          }; // 结束卡片函数
+          const sourceLabel = data?.source === 'official' ? 'opencode.ai' : data?.source === 'fallback' ? 'fallback' : data?.source === 'custom' ? 'custom' : '—'; // 来源标签
+          const summary = h('div', { className: 'dspet-monitor-summary' }, // 顶部摘要
+            data?.stale ? h('span', { className: 'dspet-chip' }, t('ocUsageStale')) : null, // 旧读数提示
+            h('span', { className: 'dspet-chip' }, `${t('ocUsageSource')} ${sourceLabel}`), // 数据来源
+            data?.fetchedAt ? h('span', { className: 'dspet-chip' }, timeLabel(data.fetchedAt)) : null, // 读数的抓取时间
+          ); // 结束摘要
+
+          return h('div', { className: 'dspet-modal', onPointerDown: maskClose }, // 遮罩
+            h('div', { className: 'dspet-dialog', role: 'dialog', 'aria-modal': 'true', 'aria-labelledby': 'dspet-usage-title' }, // 面板
+              h('h2', { id: 'dspet-usage-title', className: 'dspet-dialog-title' }, t('ocUsageTitle')), // 标题
+              h('p', { className: 'dspet-dialog-desc' }, t('ocUsageDesc')), // 说明
+              h('label', { className: 'dspet-field' }, // Key 字段
+                h('span', { className: 'dspet-field-label' }, t('ocKey')), // 字段名
+                h('input', { className: 'dspet-input', type: 'password', value: apiKey, autoComplete: 'new-password', placeholder: t('ocKeySaved'), 'aria-label': t('ocKey'), disabled: busy, onChange: (event) => setApiKey(event.target.value) }), // Key 输入
+                h('span', { className: 'dspet-field-hint' }, t('ocKeyHint')), // Key 提示
+              ), // 结束 Key 字段
+              h('div', { className: 'dspet-monitor-actions' }, // 操作行
+                h('button', { type: 'button', className: 'dspet-btn dspet-btn-primary', onClick: load, disabled: busy }, busy ? t('ocUsageRunning') : t('ocUsageRefresh')), // 刷新
+                h('button', { type: 'button', className: 'dspet-btn', onClick: () => setShowAdvanced((value) => !value), 'aria-expanded': showAdvanced }, t('ocUsageSource')), // 展开或收起来源选项
+                h('button', { type: 'button', className: 'dspet-btn', onClick: () => { if (data?.pageUrl) window.open(data.pageUrl, '_blank', 'noopener,noreferrer'); else window.open('https://opencode.ai/console', '_blank', 'noopener,noreferrer'); } }, t('ocUsageOpenConsole')), // 打开控制台
+              ), // 结束操作行
+              showAdvanced ? h('div', { className: 'dspet-usage-source' }, // 高级选项
+                h('label', { className: 'dspet-field' }, h('span', { className: 'dspet-field-label' }, 'usage URL'), h('input', { className: 'dspet-input', type: 'url', value: urlDraft, placeholder: 'https://opencode.ai/zen/go/v1/usage', 'aria-label': 'usage URL', disabled: busy, onChange: (event) => setUrlDraft(event.target.value) })), // 自定义来源
+                h('label', { className: 'dspet-field' }, h('span', { className: 'dspet-field-label' }, 'fallback URL'), h('input', { className: 'dspet-input', type: 'url', value: fallbackDraft, placeholder: 'https://…/zen/go/v1/usage', 'aria-label': 'fallback URL', disabled: busy, onChange: (event) => setFallbackDraft(event.target.value) })), // 备用来源
+                h('label', { className: 'dspet-field' }, h('span', { className: 'dspet-field-label' }, 'org id'), h('input', { className: 'dspet-input', type: 'text', value: orgDraft, placeholder: 'org_…', 'aria-label': 'org id', disabled: busy, spellCheck: false, onChange: (event) => setOrgDraft(event.target.value) })), // 团队工作区 id
+              ) : null, // 结束高级选项
+              error.length > 0 ? h('p', { className: 'dspet-error' }, `${t('ocError')}：${error}`) : null, // 错误
+              data === null && busy ? h('p', { className: 'dspet-field-hint' }, t('ocUsageRunning')) : null, // 首次加载提示
+              data === null || !data.windows || data.windows.rolling === null && data.windows.weekly === null && data.windows.monthly === null ? (busy ? null : h('p', { className: 'dspet-field-hint' }, t('ocUsageNoData'))) : h('div', null, summary, h('div', { className: 'dspet-usage' }, OPENCODE_USAGE_WINDOWS.map(card))), // 读数或空提示
+              h('div', { className: 'dspet-dialog-footer' }, h('button', { type: 'button', className: 'dspet-btn', onClick: props.onClose }, t('ocClose'))), // 关闭
+            ), // 结束面板
+          ); // 结束遮罩
+        } // 结束用量面板
+
+        function TokenUsage(props) { // Token 用量面板：本日/本周/本月三个周期，每个周期内按模型拆分
+          const t = props.t; // 翻译函数
+          const [period, setPeriod] = React.useState('week'); // 当前选中的周期
+          const [data, setData] = React.useState(null); // Host 聚合回来的统计结果
+          const [busy, setBusy] = React.useState(false); // 统计中
+          const [error, setError] = React.useState(''); // 错误文案
+          const started = React.useRef(false); // 防止重复自动加载
+
+          const load = async (force = false) => { // 拉一次统计
+            setBusy(true); setError(''); // 进入加载态
+            try { // 捕获失败
+              const zone = Intl.DateTimeFormat().resolvedOptions().timeZone || 'Asia/Shanghai'; // 浏览器所在时区，周期边界按它算
+              const query = `timeZone=${encodeURIComponent(zone)}${force ? '&force=1' : ''}`; // 查询串
+              const response = await fetch(hostRoute(`${TOKEN_USAGE_ROUTE}?${query}`), { headers: { accept: 'application/json' } }); // 请求统计路由
+              const payload = await response.json().catch(() => ({ ok: false, error: `HTTP ${response.status}` })); // 解析响应
+              if (!response.ok || !payload.ok) throw new Error(payload.error || `HTTP ${response.status}`); // 检查状态并带上原因
+              setData(payload); // 保存结果
+            } catch (cause) { // 统计失败
+              setError(cause instanceof Error ? cause.message : String(cause)); // 显示原因
+            } finally { // 结束
+              setBusy(false); // 恢复按钮
+            } // 结束异常
+          }; // 结束加载
+
+          React.useEffect(() => { // 打开时统计一次
+            if (started.current) return; // 只执行一次
+            started.current = true; // 标记已执行
+            load(); // 触发统计
+          }, []); // 只依赖首次挂载
+
+          React.useEffect(() => { // Escape 关闭
+            const onKeyDown = (event) => { if (event.key === 'Escape') props.onClose(); }; // 随时可关闭
+            window.addEventListener('keydown', onKeyDown); // 监听
+            return () => window.removeEventListener('keydown', onKeyDown); // 清理
+          }, [props.onClose]); // 依赖关闭回调
+
+          const maskClose = (event) => { if (event.target === event.currentTarget) props.onClose(); }; // 点遮罩关闭
+          const current = data?.periods?.[period] ?? null; // 当前周期的汇总
+          const totals = current?.totals ?? null; // 当前周期的合计
+          const number = (value) => (typeof value === 'number' ? value.toLocaleString('en-US') : '—'); // 千分位格式
+          const timeLabel = (value) => { const date = new Date(value); return Number.isNaN(date.getTime()) ? '' : date.toLocaleString(); }; // 时间格式
+          const tabs = [['day', 'tkPeriodDay'], ['week', 'tkPeriodWeek'], ['month', 'tkPeriodMonth']]; // 三个周期按钮
+
+          const split = h('div', { className: 'dspet-token-split' }, // 输入/缓存/输出分项
+            h('span', { className: 'dspet-token-split-item' }, h('span', null, t('tkInput')), h('span', { className: 'dspet-token-split-value' }, number(totals?.input))), // 未缓存输入
+            h('span', { className: 'dspet-token-split-item' }, h('span', null, t('tkCache')), h('span', { className: 'dspet-token-split-value' }, number(totals?.cacheRead))), // 缓存读取
+            h('span', { className: 'dspet-token-split-item' }, h('span', null, t('tkOutput')), h('span', { className: 'dspet-token-split-value' }, number(totals?.output))), // 输出
+          ); // 结束分项
+
+          const summary = h('div', { className: 'dspet-token-summary' }, // 汇总卡片
+            h('div', { className: 'dspet-token-total' }, number(totals?.total ?? 0), h('span', { className: 'dspet-token-total-unit' }, t('tkTokenUnit'))), // 总量
+            h('div', { className: 'dspet-token-model-meta' }, h('span', null, `${number(totals?.calls ?? 0)} ${t('tkCalls')}`)), // 调用次数
+            split, // 分项
+          ); // 结束汇总卡片
+
+          const models = Array.isArray(current?.models) ? current.models : []; // 当前周期的模型列表
+          const modelList = h('div', { className: 'dspet-token-models' }, models.map((model) => h( // 模型卡片列表
+            'div', { key: `${model.provider}::${model.model}`, className: 'dspet-token-model' }, // 单个模型
+              h('div', { className: 'dspet-token-model-head' }, // 模型名与占比
+                h('span', { className: 'dspet-token-model-name', title: `${model.provider} / ${model.model}` }, model.model, h('span', { className: 'dspet-token-model-provider' }, model.provider)), // 模型名与供应商
+                h('span', { className: 'dspet-token-model-share' }, `${(model.share * 100).toFixed(1)}%`), // 占比
+              ), // 结束模型名行
+              h('div', { className: 'dspet-token-track' }, h('div', { className: 'dspet-token-bar', 'data-level': model.share < 0.05 ? 'low' : 'normal', style: { width: `${Math.max(model.share * 100, model.total > 0 ? 1 : 0)}%` } })), // 占比条
+              h('div', { className: 'dspet-token-model-meta' }, // 分项明细
+                h('span', null, `${number(model.calls)} ${t('tkCalls')}`), // 调用次数
+                h('span', null, `${t('tkInput')} ${number(model.input)}`), // 未缓存输入
+                h('span', null, `${t('tkCache')} ${number(model.cacheRead)}`), // 缓存读取
+                h('span', null, `${t('tkOutput')} ${number(model.output)}`), // 输出
+                h('span', null, `${number(model.total)} ${t('tkTokenUnit')}`), // 该模型合计
+              ), // 结束分项明细
+            ), // 结束模型卡片
+          )); // 结束模型列表
+
+          const series = current?.series ?? null; // 当前周期自带的时间序列（本日按小时，本周与本月按天）
+          const points = Array.isArray(series?.points) ? series.points : []; // 序列点位
+          const maxPoint = points.reduce((max, point) => Math.max(max, point.total), 0); // 序列最大值，用来定柱高
+          // 坐标标签按点位数量抽稀，避免柱子太密时文字挤在一起
+          const labelStep = points.length <= 8 ? 1 : points.length <= 16 ? 2 : 5; // 每隔几个点显示一个标签
+          const weekdayLabel = (key) => { // 把 YYYY-MM-DD 转成本地化的星期几
+            const parsed = new Date(`${key}T00:00:00`); // 按本地时间解析该日期
+            if (Number.isNaN(parsed.getTime())) return ''; // 解析失败就没有标签
+            return parsed.toLocaleDateString(undefined, { weekday: 'narrow' }); // 窄版星期几
+          }; // 结束星期标签
+          const pointLabel = (point, index) => { // 决定一个点位显示什么标签
+            if (series?.unit === 'hour') return String(point.key); // 本日按小时：直接显示小时数
+            if (period === 'week') return weekdayLabel(point.key); // 本周按天：显示星期几
+            const parsed = new Date(`${point.key}T00:00:00`); // 按本地时间解析该日期
+            return Number.isNaN(parsed.getTime()) ? '' : String(parsed.getDate()); // 本月按天：显示几号
+          }; // 结束标签计算
+          const trend = h('div', null, // 趋势区
+            h('div', { className: 'dspet-token-daily' }, points.map((point) => h( // 柱状趋势
+              'div', { key: point.key, className: 'dspet-token-daily-col', 'data-empty': point.total === 0 ? 'true' : 'false', title: `${point.label} · ${number(point.total)} ${t('tkTokenUnit')}`, style: { height: maxPoint > 0 ? `${Math.max((point.total / maxPoint) * 100, point.total > 0 ? 8 : 3)}%` : '3%' } }, // 单根柱子
+            ))), // 结束柱状图
+            h('div', { className: 'dspet-token-axis' }, points.map((point, index) => h( // 坐标标签行
+              'span', { key: point.key, className: 'dspet-token-axis-label' }, (index % labelStep === 0 || index === points.length - 1) ? pointLabel(point, index) : ''), // 单个标签
+            )), // 结束坐标标签行
+          ); // 结束趋势区
+
+          const foot = h('div', { className: 'dspet-token-foot' }, // 底部说明
+            h('span', null, `${number(data?.sessions?.scanned ?? 0)} ${t('tkScanned')}${data?.sessions?.failed > 0 ? ` · ${number(data.sessions.failed)} ${t('tkFailed')}` : ''}`), // 会话读取情况
+            h('span', null, data?.fetchedAt ? timeLabel(data.fetchedAt) : ''), // 统计时间
+          ); // 结束底部说明
+
+          return h('div', { className: 'dspet-modal', onPointerDown: maskClose }, // 遮罩
+            h('div', { className: 'dspet-dialog', role: 'dialog', 'aria-modal': 'true', 'aria-labelledby': 'dspet-token-title' }, // 面板
+              h('div', { className: 'dspet-token-head' }, // 标题与周期切换
+                h('h2', { id: 'dspet-token-title', className: 'dspet-dialog-title' }, t('tkTitle')), // 标题
+                h('div', { className: 'dspet-token-tabs', role: 'tablist' }, tabs.map(([key, labelKey]) => h( // 周期按钮组
+                  'button', { key, type: 'button', role: 'tab', className: 'dspet-token-tab', 'aria-selected': period === key, 'data-active': period === key ? 'true' : 'false', onClick: () => setPeriod(key) }, t(labelKey)), // 单个周期按钮
+                )), // 结束周期按钮组
+              ), // 结束标题行
+              h('p', { className: 'dspet-dialog-desc' }, t('tkDesc')), // 说明
+              h('div', { className: 'dspet-monitor-actions' }, // 操作行
+                h('button', { type: 'button', className: 'dspet-btn dspet-btn-primary', onClick: () => load(true), disabled: busy }, busy ? t('tkLoading') : t('tkRefresh')), // 刷新
+              ), // 结束操作行
+              error.length > 0 ? h('p', { className: 'dspet-error' }, error) : null, // 错误
+              data === null && busy ? h('p', { className: 'dspet-field-hint' }, t('tkLoading')) : null, // 首次加载提示
+              data !== null && (totals?.calls ?? 0) === 0 ? h('p', { className: 'dspet-field-hint' }, data?.sessions?.scanned === 0 ? t('tkNoSessions') : t('tkNoData')) : null, // 空周期提示
+              data !== null && (totals?.calls ?? 0) > 0 ? h('div', null, // 有数据时展示全部内容
+                summary, // 汇总
+                h('div', { className: 'dspet-token-section' }, h('p', { className: 'dspet-token-section-title' }, t('tkModels')), modelList), // 模型用量
+                points.length > 1 ? h('div', { className: 'dspet-token-section' }, h('p', { className: 'dspet-token-section-title' }, series?.unit === 'hour' ? t('tkHourly') : t('tkDaily')), trend) : null, // 与当前周期匹配的趋势
+                foot, // 底部说明
+              ) : null, // 结束内容区
+              h('div', { className: 'dspet-dialog-footer' }, h('button', { type: 'button', className: 'dspet-btn', onClick: props.onClose }, t('close'))), // 关闭
+            ), // 结束面板
+          ); // 结束遮罩
+        } // 结束 Token 用量面板
+
         function Pet(props) {
           const [, setLocaleRevision] = React.useState(0);
           const [position, setPosition] = React.useState(loadPosition);
@@ -1313,10 +1687,15 @@ window.__ModuleLoader__.load({
           const [menu, setMenu] = React.useState(null); // 右键菜单坐标，null 表示关闭
           const [relayOpen, setRelayOpen] = React.useState(false); // 中转站配置框是否打开
           const menuRef = React.useRef(null); // 用于判断点击是否落在菜单内
+          const submenuRef = React.useRef(null); // 二级菜单容器，用于独立测量尺寸
+          const submenuAnchorRef = React.useRef(null); // 触发二级菜单的一级项，作为定位锚点
           const [monitorOpen, setMonitorOpen] = React.useState(false); // OpenCode 监控面板是否打开
           const [monitorView, setMonitorView] = React.useState('check'); // 监控初始视图
           const [monitorAutoCheck, setMonitorAutoCheck] = React.useState(false); // 打开监控时是否自动检查
-          const [monitorMenuOpen, setMonitorMenuOpen] = React.useState(false); // 监控子菜单是否展开
+          const [monitorMenuOpen, setMonitorMenuOpen] = React.useState(false); // 监控二级菜单是否展开
+          const [submenuPos, setSubmenuPos] = React.useState({ x: 0, y: 0, ready: false }); // 二级菜单的坐标，独立测量
+          const [usageOpen, setUsageOpen] = React.useState(false); // 剩余用量面板是否打开
+          const [tokenOpen, setTokenOpen] = React.useState(false); // Token 用量面板是否打开
           const [unseen, setUnseen] = React.useState(() => { try { return window.localStorage.getItem(OPENCODE_UNSEEN_KEY) === '1'; } catch (error) { return false; } }); // 未查看变动标记
           const [autoHours, setAutoHours] = React.useState(() => { try { const value = Number(window.localStorage.getItem(OPENCODE_AUTO_KEY)); return value === 6 || value === 24 ? value : 0; } catch (error) { return 0; } }); // 自动检查间隔
           const [chatOpen, setChatOpen] = React.useState(false); // 对话面板是否打开
@@ -1387,15 +1766,27 @@ window.__ModuleLoader__.load({
 
           const runOpenCodeCheck = async (apiKey, silent = false) => { // 调用 Host 检查路由
             const trimmed = typeof apiKey === 'string' ? apiKey.trim() : ''; // 统一 Key 输入
-            const response = await fetch(`${OPENCODE_ROUTE}/check`, { method: 'POST', headers: { 'content-type': 'application/json', accept: 'application/json' }, body: JSON.stringify(trimmed.length > 0 ? { apiKey: trimmed } : {}) }); // 发起检查
+            const response = await fetch(routeUrl(`${OPENCODE_ROUTE}/check`), { method: 'POST', headers: { 'content-type': 'application/json', accept: 'application/json' }, body: JSON.stringify(trimmed.length > 0 ? { apiKey: trimmed } : {}) }); // 发起检查
             const payload = await response.json().catch(() => ({ ok: false, error: `HTTP ${response.status}` })); // 解析响应
-            if (!response.ok || !payload.ok) throw new Error(payload.error || `HTTP ${response.status}`); // 检查状态
+            if (!response.ok || !payload.ok) throw new Error(payload.error || `HTTP ${response.status}（请求地址 ${response.url || routeUrl(`${OPENCODE_ROUTE}/check`)}）`); // 检查状态并带上实际地址便于排查
             if (!silent) notifyOpenCode(payload); // 后台检查才弹气泡
             return payload; // 返回结果给面板
           }; // 结束检查调用
           const runCheckRef = React.useRef(runOpenCodeCheck); // 自动检查使用最新函数
           runCheckRef.current = runOpenCodeCheck; // 每次渲染更新引用
 
+          const runOpenCodeUsage = async (options = {}) => { // 调用 Host 额度路由
+            const body = {}; // 只带非空字段，避免覆盖已保存的 Key 与来源
+            if (typeof options.apiKey === 'string' && options.apiKey.trim().length > 0) body.apiKey = options.apiKey.trim(); // 本次输入的 Key
+            if (typeof options.usageUrl === 'string' && options.usageUrl.trim().length > 0) body.usageUrl = options.usageUrl.trim(); // 自定义来源
+            if (typeof options.fallbackUrl === 'string' && options.fallbackUrl.trim().length > 0) body.fallbackUrl = options.fallbackUrl.trim(); // 备用来源
+            if (typeof options.orgId === 'string' && options.orgId.trim().length > 0) body.orgId = options.orgId.trim(); // 团队工作区 id
+            const response = await fetch(routeUrl(`${OPENCODE_ROUTE}/usage`), { method: 'POST', headers: { 'content-type': 'application/json', accept: 'application/json' }, body: JSON.stringify(body), signal: AbortSignal.timeout ? AbortSignal.timeout(30000) : undefined }); // 发起额度查询
+            const payload = await response.json().catch(() => ({ ok: false, error: `HTTP ${response.status}` })); // 解析响应
+            if (!response.ok || !payload.ok) throw new Error(payload.error || `HTTP ${response.status}（请求地址 ${response.url || routeUrl(`${OPENCODE_ROUTE}/usage`)}）`); // 检查状态并带上实际地址便于排查
+            return payload; // 返回给面板
+          }; // 结束额度调用
+
           const sendChat = async (text, modelKey) => { // 发送一条对话：先把用户消息落到列表，再等回复
             const id = 'chat-' + (chatSeq.current += 1); // 递增的稳定消息 id
             const next = [...chatMessagesRef.current, { id, role: 'user', text }]; // 含本条的最新记录
@@ -1511,6 +1902,11 @@ window.__ModuleLoader__.load({
           }; // 结束模型目录读取
 
 
+          // 展开二级菜单：它浮在一级菜单右侧（右侧放不下时翻到左侧），不再把父菜单拉长
+          const toggleMonitorMenu = () => {
+            setMonitorMenuOpen((open) => !open); // 切换展开状态，位置由下方 effect 测量
+          }; // 结束二级菜单切换
+
           const openMonitor = (view, autoCheck) => { // 打开监控面板
             setMenu(null); // 关闭右键菜单
             setMonitorMenuOpen(false); // 收起子菜单
@@ -1519,6 +1915,16 @@ window.__ModuleLoader__.load({
             setMonitorOpen(true); // 打开面板
             clearUnseen(); // 视为已查看
           }; // 结束打开监控
+          const openUsage = () => { // 打开剩余用量面板
+            setMenu(null); // 关闭右键菜单
+            setMonitorMenuOpen(false); // 收起子菜单
+            setUsageOpen(true); // 打开面板
+          }; // 结束打开用量
+          const openTokens = () => { // 打开 Token 用量面板
+            setMenu(null); // 关闭右键菜单
+            setMonitorMenuOpen(false); // 收起子菜单
+            setTokenOpen(true); // 打开面板
+          }; // 结束打开 Token 用量
           const onAutoHours = (value) => { // 保存自动检查频率
             setAutoHours(value); // 更新状态
             try { window.localStorage.setItem(OPENCODE_AUTO_KEY, String(value)); } catch (error) { /* 忽略存储失败 */ } // 持久化
@@ -1650,19 +2056,62 @@ window.__ModuleLoader__.load({
             return () => clearInterval(timer); // 清理定时器
           }, [autoHours]); // 频率变化时重设
 
+          // 方案一：菜单渲染出真实尺寸后再定位。位置未就绪时菜单不可见，量到尺寸才显示，
+          // 因此菜单再长也只会被收进视口，不依赖任何高度估算常量。
+          const useMenuLayout = typeof React.useLayoutEffect === 'function' ? React.useLayoutEffect : React.useEffect; // 兼容没有 useLayoutEffect 的宿主
+          useMenuLayout(() => { // 菜单打开后测量并修正位置
+            if (menu === null || menu.ready === true || menuRef.current === null) return; // 已定位或未渲染则不处理
+            const rect = menuRef.current.getBoundingClientRect(); // 菜单真实尺寸
+            const viewportWidth = window.innerWidth; // 当前窗口宽度，缩放或分屏后会变
+            const viewportHeight = window.innerHeight; // 当前窗口高度
+            const left = Math.max(MENU_GAP, Math.min(menu.x, viewportWidth - rect.width - MENU_GAP)); // 右边界超出时向左收
+            const top = Math.max(MENU_GAP, Math.min(menu.y, viewportHeight - rect.height - MENU_GAP)); // 下边界超出时向上收
+            setMenu({ ...menu, x: left, y: top, ready: true }); // 写入真实位置并标记可显示
+          }, [menu]); // 菜单状态变化时重新测量
+
+          // 二级菜单独立定位：贴着锚点右侧展开，右侧放不下翻到左侧，纵向超出则收进视口
+          useMenuLayout(() => { // 二级菜单挂载后测量
+            if (monitorMenuOpen === false || submenuRef.current === null || submenuAnchorRef.current === null) return; // 未展开或未渲染不处理
+            if (submenuPos.ready === true) return; // 已定位则跳过，避免反复设置
+            const anchor = submenuAnchorRef.current.getBoundingClientRect(); // 锚点位置
+            const rect = submenuRef.current.getBoundingClientRect(); // 二级菜单真实尺寸
+            const viewportWidth = window.innerWidth; // 当前窗口宽度
+            const viewportHeight = window.innerHeight; // 当前窗口高度
+            const rightSide = anchor.right + 4; // 首选贴右侧
+            const leftSide = anchor.left - rect.width - 4; // 右侧放不下时翻到左侧
+            const x = rightSide + rect.width <= viewportWidth - MENU_GAP ? rightSide : Math.max(MENU_GAP, leftSide); // 横向落点
+            const y = Math.max(MENU_GAP, Math.min(anchor.top, viewportHeight - rect.height - MENU_GAP)); // 与锚点顶部对齐后收边
+            setSubmenuPos({ x, y, ready: true }); // 写入真实位置
+          }, [monitorMenuOpen, submenuPos]); // 展开状态变化时重新测量
+
+          React.useEffect(() => { // 窗口尺寸变化时重新收边
+            if (menu === null || menu.ready !== true) return undefined; // 只在可见时处理
+            const onResize = () => setMenu((current) => (current === null ? current : { ...current, x: current.x, y: current.y, ready: false })); // 标记重新测量
+            window.addEventListener('resize', onResize); // 监听窗口尺寸
+            return () => window.removeEventListener('resize', onResize); // 清理监听
+          }, [menu === null ? null : menu.ready]); // 打开状态变化时重挂
+
           React.useEffect(() => { // 菜单打开时监听外部点击与 Escape
             if (menu === null) return undefined; // 关闭状态不装监听
             const closeMenu = (event) => { // 点击菜单外时收起
-              if (menuRef.current !== null && !menuRef.current.contains(event.target)) setMenu(null); // 只处理外部点击
+              const insideMain = menuRef.current !== null && menuRef.current.contains(event.target); // 是否点在原型菜单内
+              const insideSub = submenuRef.current !== null && submenuRef.current.contains(event.target); // 是否点在二级菜单内
+              if (!insideMain && !insideSub) { setMenu(null); setMonitorMenuOpen(false); } // 点外部时两个面板一起收起，避免二级菜单残留在屏幕上
             }; // 结束点击处理
-            const onEscape = (event) => { if (event.key === 'Escape') setMenu(null); }; // Escape 收起菜单
+            const onEscape = (event) => { // Escape 逐级收起
+              if (event.key !== 'Escape') return; // 只处理 Escape
+              if (monitorMenuOpen) { setMonitorMenuOpen(false); return; } // 先收二级菜单
+              setMenu(null); setMonitorMenuOpen(false); // 收起主菜单并确保二级也收起
+            }; // Escape 收起菜单
             window.addEventListener('pointerdown', closeMenu, true); // 捕获阶段先于宠物自身点击
             window.addEventListener('keydown', onEscape); // 监听全局按键
             return () => { // 清理监听
               window.removeEventListener('pointerdown', closeMenu, true); // 移除点击监听
               window.removeEventListener('keydown', onEscape); // 移除按键监听
             }; // 结束清理
-          }, [menu]); // 菜单开关变化时重装监听
+          }, [menu, monitorMenuOpen]); // 菜单开关变化时重装监听
+
+          React.useEffect(() => { if (monitorMenuOpen === false) setSubmenuPos({ x: 0, y: 0, ready: false }); }, [monitorMenuOpen]); // 收起后清掉旧坐标，下次重新测量
 
           const onPointerDown = (event) => {
             if (event.button !== undefined && event.button !== 0) return;
@@ -1734,11 +2183,10 @@ window.__ModuleLoader__.load({
             event.stopPropagation(); // 不影响上层浮层
             setMonitorMenuOpen(false); // 每次右键先收起监控子菜单
             drag.current = null; // 取消可能已开始的拖拽，避免随后 pointerup 触发摸头
-            const x = Math.min(event.clientX, window.innerWidth - MENU_WIDTH - 8); // 右侧贴边修正
-            const y = Math.min(event.clientY, window.innerHeight - MENU_HEIGHT - 8); // 底部贴边修正
-            setMenu({ x: Math.max(8, x), y: Math.max(8, y) }); // 记录最终位置
+            // 先按点击位置落点，等真实渲染出尺寸后由菜单自己的 effect 收进视口
+            setMenu({ x: event.clientX, y: event.clientY, ready: false }); // ready=false 时菜单隐形测量
           }; // 结束右键处理
-          const openRelay = () => { setMenu(null); setRelayOpen(true); }; // 菜单项打开配置框
+          const openRelay = () => { setMenu(null); setMonitorMenuOpen(false); setRelayOpen(true); }; // 打开配置框时两个菜单都收起
           const closeRelay = () => setRelayOpen(false); // 关闭配置框
           const onRelaySaved = () => { showBubble('savedBubble', 3200); }; // 保存成功后说一句
 
@@ -1811,7 +2259,7 @@ window.__ModuleLoader__.load({
             ),
             menu === null ? null : h( // 右键菜单
               'div', // 菜单容器
-              { ref: menuRef, className: 'dspet-menu', style: { left: menu.x + 'px', top: menu.y + 'px' }, role: 'menu' }, // 定位与语义
+              { ref: menuRef, className: 'dspet-menu', style: { left: menu.x + 'px', top: menu.y + 'px', visibility: menu.ready === true ? 'visible' : 'hidden' }, role: 'menu' }, // 定位与语义，测量阶段先隐形避免闪跳
               h( // 供应商配置菜单项
                 'button', // 可聚焦按钮
                 { type: 'button', className: 'dspet-menu-item', role: 'menuitem', onClick: openRelay, autoFocus: true }, // 点击打开配置
@@ -1822,7 +2270,7 @@ window.__ModuleLoader__.load({
               ), // 结束供应商菜单项
               h( // OpenCode 监控一级项
                 'button', // 可聚焦按钮
-                { type: 'button', className: 'dspet-menu-item', role: 'menuitem', 'aria-expanded': monitorMenuOpen, onClick: () => setMonitorMenuOpen((open) => !open) }, // 展开子菜单
+                { type: 'button', className: 'dspet-menu-item', role: 'menuitem', 'aria-haspopup': 'menu', 'aria-expanded': monitorMenuOpen, ref: submenuAnchorRef, onClick: toggleMonitorMenu }, // 打开独立的二级菜单
                 h('svg', { className: 'dspet-menu-icon', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 2, strokeLinecap: 'round', 'aria-hidden': true }, // 活动图标
                   h('path', { d: 'M3 12h4l3-8 4 16 3-8h4' }), // 活动折线路径
                 ), // 结束图标
@@ -1831,16 +2279,27 @@ window.__ModuleLoader__.load({
                   h('path', { d: 'M9 6l6 6-6 6' }), // 箭头路径
                 ), // 结束箭头
               ), // 结束监控一级项
-              monitorMenuOpen ? h( // 监控子菜单
-                'div', // 子菜单容器
-                { className: 'dspet-submenu', role: 'menu' }, // 子菜单语义
-                h('button', { type: 'button', className: 'dspet-menu-item dspet-menu-subitem', role: 'menuitem', onClick: () => openMonitor('check', true) }, t('ocCheck')), // 立即检查
-                h('button', { type: 'button', className: 'dspet-menu-item dspet-menu-subitem', role: 'menuitem', onClick: () => openMonitor('history', false) }, t('ocHistory')), // 查看记录
-              ) : null, // 结束子菜单
-            ), // 结束菜单
+              h( // Token 用量一级项
+                'button', // 可聚焦按钮
+                { type: 'button', className: 'dspet-menu-item', role: 'menuitem', onClick: openTokens }, // 点击打开统计面板
+                h('svg', { className: 'dspet-menu-icon', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 2, strokeLinecap: 'round', 'aria-hidden': true }, // 计量图标
+                  h('path', { d: 'M3 3v18h18M7 15l4-5 3 3 5-7' }), // 折线与坐标轴路径
+                ), // 结束图标
+                h('span', null, t('tkMenu')), // 本地化菜单文案
+              ), // 结束 Token 用量一级项
+            ), // 结束一级菜单
+            monitorMenuOpen ? h( // 二级菜单：浮在一级菜单旁边，不撑高父菜单
+              'div', // 二级菜单容器
+              { ref: submenuRef, className: 'dspet-menu dspet-submenu', style: { left: submenuPos.x + 'px', top: submenuPos.y + 'px', visibility: submenuPos.ready === true ? 'visible' : 'hidden' }, role: 'menu', 'aria-label': t('ocMenu') }, // 定位与语义，测量阶段先隐形
+              h('button', { type: 'button', className: 'dspet-menu-item', role: 'menuitem', onClick: () => openMonitor('check', true) }, t('ocCheck')), // 立即检查
+              h('button', { type: 'button', className: 'dspet-menu-item', role: 'menuitem', onClick: () => openMonitor('history', false) }, t('ocHistory')), // 查看记录
+              h('button', { type: 'button', className: 'dspet-menu-item', role: 'menuitem', onClick: openUsage }, t('ocUsage')), // 剩余用量
+            ) : null, // 结束二级菜单
             relayOpen ? h(RelayDialog, { t, onClose: closeRelay, onSaved: onRelaySaved }) : null, // 配置对话框
             monitorOpen ? h(OpenCodeMonitor, { t, view: monitorView, autoCheck: monitorAutoCheck, autoHours, onAutoHours, runCheck: runOpenCodeCheck, onClose: () => setMonitorOpen(false), onHistoryViewed: clearUnseen }) : null, // OpenCode 监控面板
             chatOpen ? h(ChatThread, { t, anchor: chatAnchor, messages: chatMessages, onSend: sendChat, onClose: closeChat, onClear: clearChat, loadModels: loadChatModels }) : null, // 双击弹出的对话面板，模型目录与清空由宠物侧处理
+            usageOpen ? h(OpenCodeUsage, { t, runUsage: runOpenCodeUsage, onClose: () => setUsageOpen(false) }) : null, // 剩余用量面板
+            tokenOpen ? h(TokenUsage, { t, onClose: () => setTokenOpen(false) }) : null, // Token 用量面板
           );
         }