@iasiv5/dsh-quota-watch 0.0.1 → 0.0.3

package/README.md

@@ -6,11 +6,12 @@
 
 ## 功能
 
-- 在侧栏 Settings 行上方显示一个可折叠卡片；没有单独的设置分区。
-- GLM Coding Plan：展示套餐名、5 小时 / 每周 / 每月窗口、已用百分比、进度条和重置时间；兼容 Token / Credit 套餐，忽略 MCP `TIME_LIMIT`。
-- GitHub Copilot：读取 `premium_interactions` quota snapshot；只有 GitHub 返回有限、有效的 `remaining` 时才显示可用额度和百分比。若余额字段无效或账号被标记为 unlimited，则显示“余额暂不可用”；`credits_used` 如存在会单独标为已用量，绝不用于推算余额。
-- 宿主默认每 60 秒探测；profile patch 可将 `pollIntervalSec` 设置在 30–3600 秒。浏览器页签可见时每 30 秒刷新视图，隐藏时暂停；刷新按钮可立即请求宿主探测。
-- 探测失败时保留最后一次成功数据并标记可能过期；缺少凭据时显示未配置状态。
+- 在侧栏 Settings 行上方显示一张常显摘要卡（无折叠按钮）：GLM 与 GitHub Copilot 各占一行，统一显示**已用百分比**（Copilot 为 `100 − percent_remaining` 的单值反转），已用超过 80% 进度条转橙、超过 95% 转红。
+- GLM 摘要行固定显示 5 小时窗口已用百分比，行尾小字为当日 token 用量；点击行展开详情：今日 tokens / 调用次数双大数字、全部窗口（5 小时 / 每周 / 每月 / MCP 月度 `TIME_LIMIT`）的百分比与重置时间、分模型用量与更新时间。同一时间至多展开一个详情。
+- GitHub Copilot 摘要行仅在 GitHub 返回有限、有效的 `remaining` 且带 `percent_remaining` 时显示；点击展开可用额度、已用百分比、`credits_used` 与重置时间。`credits_used` 绝不用于推算余额，缺失有效百分比时该行不渲染。
+- 今日 tokens / 调用次数按宿主本地时区的自然日（`00:00:00 → 当前时刻`）查询；不带滚动窗口语义。
+- 凭据缺失的 provider 不渲染摘要行（两者皆缺时整卡隐藏）；探测失败时保留最后一次成功数据并在行上加 ⚠ 过期标记。
+- 宿主默认每 60 秒探测（窗口 + 用量 + Copilot）；profile patch 可将 `pollIntervalSec` 设置在 30–3600 秒。浏览器页签可见时每 30 秒刷新视图，隐藏时暂停；刷新按钮可立即请求宿主探测。
 
 ## 兼容与配置
 
@@ -21,7 +22,7 @@
 
 ## 数据来源与语义
 
-- GLM 查询 `https://open.bigmodel.cn/api/monitor/usage/quota/limit` 或 `https://api.z.ai/api/monitor/usage/quota/limit`。该接口按 raw API key 鉴权，不加 Bearer 前缀。
+- GLM 查询 `https://open.bigmodel.cn/api/monitor/usage/quota/limit` 或 `https://api.z.ai/api/monitor/usage/quota/limit`（窗口百分比），以及同域 `/api/monitor/usage/model-usage?startTime=…&endTime=…`（今日 tokens 与调用次数，时间格式 `yyyy-MM-dd HH:mm:ss`）。两个接口均按 raw API key 鉴权，不加 Bearer 前缀。
 - Copilot 查询 `https://api.github.com/copilot_internal/user`。这是 GitHub Copilot 内部、非公开稳定契约的端点，字段可能变更；插件在无法确认额度含义时显示不可用，不猜测或计算余额。
 - 对企业 / 组织管理的 Copilot seat，GitHub AI Credits 可能属于共享计费池。侧栏呈现的是 GitHub 用户 quota snapshot 中的可用额度，不保证等同组织账单的总余额。
 - 凭据只在 DSH 宿主进程解析并用于 HTTPS 请求；浏览器只接收规范化后的额度字段。插件不把 key、OAuth grant 或原始 provider 响应写入磁盘，也不保存额度历史。
@@ -31,7 +32,8 @@
 - API 路由只允许 loopback 或已配对的浏览器访问；响应禁用缓存。
 - 本仓库、测试 fixtures 与 npm 包不得包含任何真实 key、OAuth grant、临时 token、原始账号响应或个人余额。测试仅使用合成响应。
 - npm 包采用显式 `files` 白名单；`npm run security:check` 会扫描工作树和实际 pack 文件，诊断只报告路径和规则名，不打印匹配值。
-- 首次 bootstrap 发布真实插件 `0.0.1` 后配置 npm Trusted Publishing；后续 tag release 使用 GitHub Actions OIDC 与 provenance，不保存长期 npm token。
+- 首次 bootstrap 发布真实插件 `0.0.1` 使用 npm web-login；后续 tag release 使用 GitHub Actions OIDC 与 provenance，版本发布者身份为 GitHub Actions，不保存长期 npm token。
+- OIDC 不会改写已发布的 `0.0.1` 元数据，也不负责移除 Registry 级 maintainer 字段；源码和 npm tarball 不写入发布账号邮箱。
 
 ## 安装
 

package/lib/client.js

@@ -50,67 +50,119 @@ var PROVIDER_IDS = Object.freeze({
 });
 var CLIENT_POLL_INTERVAL_MS = 3e4;
 
+// src/core/adapters.mjs
+var GLM_HOSTS = Object.freeze({
+  "zai-coding-cn": "open.bigmodel.cn",
+  zai: "api.z.ai",
+  "zai-coding": "api.z.ai"
+});
+var GLM_WINDOW_KEYS = Object.freeze({ 3: "5h", 5: "month", 6: "week" });
+var COPILOT_HEADERS = Object.freeze({
+  accept: "application/json",
+  "user-agent": "GitHubCopilotChat/0.35.0",
+  "editor-version": "vscode/1.107.0",
+  "editor-plugin-version": "copilot-chat/0.35.0",
+  "copilot-integration-id": "vscode-chat"
+});
+function asNumber(value) {
+  if (typeof value === "number" && Number.isFinite(value)) return value;
+  if (typeof value === "string" && value.trim() !== "") {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : void 0;
+  }
+  return void 0;
+}
+function clampPercent(value) {
+  return Math.max(0, Math.min(100, value));
+}
+function remainingToUsed(percentRemaining) {
+  const value = asNumber(percentRemaining);
+  if (value === void 0 || value < 0 || value > 100) return void 0;
+  return clampPercent(Math.round((100 - value) * 100) / 100);
+}
+
 // src/client.mjs
 var name = "quota-watch-client";
 var inject = [];
 var CARD_SELECTOR = "[data-dsh-quota-watch-card]";
-var COLLAPSE_KEY = "dsh-quota-watch:collapsed";
 var FETCH_TIMEOUT_MS = 15e3;
 var COPY = {
   zh: {
     title: "\u5957\u9910\u76D1\u63A7",
     refresh: "\u5237\u65B0",
-    collapse: "\u6536\u8D77",
-    expand: "\u5C55\u5F00",
     loading: "\u8BFB\u53D6\u4E2D",
     updated: "\u66F4\u65B0",
-    notConfigured: "\u672A\u914D\u7F6E",
-    noPlan: "\u6682\u65E0\u5957\u9910\u7A97\u53E3",
     failed: "\u67E5\u8BE2\u5931\u8D25",
     stale: "\u6570\u636E\u53EF\u80FD\u5DF2\u8FC7\u671F",
     requestFailed: "\u5237\u65B0\u5931\u8D25\uFF0C\u663E\u793A\u4E0A\u6B21\u6210\u529F\u6570\u636E",
     available: "\u53EF\u7528\u989D\u5EA6",
     used: "\u672C\u671F\u5DF2\u7528",
-    balanceUnavailable: "\u4F59\u989D\u6682\u4E0D\u53EF\u7528",
     reset: "\u91CD\u7F6E",
-    windows: { "5h": "5 \u5C0F\u65F6", week: "\u6BCF\u5468", month: "\u6BCF\u6708" }
+    todayTokens: "\u4ECA\u65E5 tokens",
+    todayCalls: "\u4ECA\u65E5\u8C03\u7528",
+    windows: {
+      "5h": "5 \u5C0F\u65F6\u7A97\u53E3 \xB7 \u5DF2\u7528",
+      week: "\u6BCF\u5468\u7A97\u53E3 \xB7 \u5DF2\u7528",
+      month: "\u6BCF\u6708\u7A97\u53E3 \xB7 \u5DF2\u7528",
+      mcp: "MCP\uFF08\u6708\uFF09\xB7 \u5DF2\u7528"
+    }
   },
   en: {
     title: "Quota Watch",
     refresh: "Refresh",
-    collapse: "Collapse",
-    expand: "Expand",
     loading: "Loading",
     updated: "Updated",
-    notConfigured: "Not configured",
-    noPlan: "No plan windows",
     failed: "Query failed",
     stale: "Data may be stale",
     requestFailed: "Refresh failed; showing last successful data",
     available: "Available credits",
     used: "Used this cycle",
-    balanceUnavailable: "Balance unavailable",
     reset: "Resets",
-    windows: { "5h": "5 hours", week: "Weekly", month: "Monthly" }
+    todayTokens: "Today tokens",
+    todayCalls: "Calls today",
+    windows: {
+      "5h": "5-hour window \xB7 used",
+      week: "Weekly window \xB7 used",
+      month: "Monthly window \xB7 used",
+      mcp: "MCP (month) \xB7 used"
+    }
   }
 };
 var STYLE_TEXT = `
 [data-dsh-quota-watch-card] { box-sizing: border-box; width: 100%; margin: 0 0 8px; color: var(--dsw-alias-label-primary, inherit); font: inherit; }
 [data-dsh-quota-watch-card] *, [data-dsh-quota-watch-card] *::before, [data-dsh-quota-watch-card] *::after { box-sizing: border-box; }
-.dqw-card { border: 1px solid var(--dsw-alias-border-secondary, rgba(128,128,128,.35)); border-radius: 10px; background: var(--dsw-alias-bg-base, rgba(128,128,128,.08)); padding: 8px; display: flex; flex-direction: column; gap: 7px; }
+.dqw-card { border: 1px solid var(--dsw-alias-border-secondary, rgba(128,128,128,.35)); border-radius: 10px; background: var(--dsw-alias-bg-base, rgba(128,128,128,.08)); padding: 8px; display: flex; flex-direction: column; gap: 6px; }
 .dqw-head { display: flex; align-items: center; gap: 4px; min-width: 0; }
 .dqw-title { flex: 1; min-width: 0; margin: 0; font-size: 12px; font-weight: 600; line-height: 18px; }
 .dqw-button { border: 0; border-radius: 6px; background: transparent; color: inherit; cursor: pointer; font: inherit; font-size: 11px; line-height: 18px; padding: 1px 4px; }
 .dqw-button:hover { background: var(--dsw-alias-bg-hover, rgba(128,128,128,.16)); }
 .dqw-button:disabled { cursor: wait; opacity: .6; }
 .dqw-meta { margin: 0; font-size: 10px; line-height: 14px; opacity: .7; }
-.dqw-provider { border-top: 1px solid var(--dsw-alias-border-secondary, rgba(128,128,128,.25)); padding-top: 6px; display: flex; flex-direction: column; gap: 4px; }
-.dqw-provider-title { margin: 0; font-size: 11px; font-weight: 600; line-height: 16px; }
+.dqw-body { display: flex; flex-direction: column; }
+.dqw-row-summary { display: flex; align-items: center; gap: 6px; padding: 7px 6px; margin: 1px -2px 2px; border-radius: 8px; }
+.dqw-row-summary[data-expandable] { cursor: pointer; }
+.dqw-row-summary[data-expandable]:hover { background: var(--dsw-alias-bg-hover, rgba(128,128,128,.12)); }
+.dqw-row-summary:focus-visible { outline: 1px solid var(--dsw-alias-button-primary-fill, #5b8def); outline-offset: -1px; }
+.dqw-row-summary.is-error { cursor: default; }
+.dqw-label { font-size: 11px; font-weight: 600; width: 52px; flex: none; }
+.dqw-bar { display: block; flex: 1; height: 4px; overflow: hidden; border-radius: 4px; background: var(--dsw-alias-bg-tertiary, rgba(128,128,128,.2)); }
+.dqw-bar-fill { display: block; height: 100%; border-radius: inherit; background: var(--dsw-alias-button-primary-fill, #5b8def); }
+.dqw-bar-fill.warn { background: var(--dsw-alias-label-warning, #d29922); }
+.dqw-bar-fill.danger { background: var(--dsw-alias-label-danger, #c93c3c); }
+.dqw-pct { font-size: 10.5px; line-height: 14px; font-variant-numeric: tabular-nums; width: 30px; text-align: right; flex: none; }
+.dqw-extra { font-size: 10px; line-height: 14px; opacity: .72; font-variant-numeric: tabular-nums; flex: none; }
+.dqw-chev { font-size: 9px; line-height: 14px; opacity: .6; flex: none; width: 10px; text-align: center; }
+.dqw-stale-mark { flex: none; font-size: 9px; line-height: 14px; color: var(--dsw-alias-label-warning, #b46900); cursor: help; }
+.dqw-errtext { font-size: 10px; line-height: 14px; opacity: .7; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dqw-detail { padding: 2px 6px 6px; display: flex; flex-direction: column; gap: 7px; }
+.dqw-bignums { display: flex; gap: 6px; }
+.dqw-big { flex: 1; border: 1px solid var(--dsw-alias-border-secondary, rgba(128,128,128,.25)); border-radius: 8px; padding: 6px 8px; }
+.dqw-big .dqw-big-value { font-size: 16px; font-weight: 650; line-height: 20px; font-variant-numeric: tabular-nums; }
+.dqw-big .dqw-big-label { font-size: 9.5px; line-height: 13px; opacity: .65; }
 .dqw-row { display: flex; flex-direction: column; gap: 2px; }
 .dqw-row-head { display: flex; justify-content: space-between; gap: 5px; font-size: 10px; line-height: 14px; }
-.dqw-bar { display: block; height: 4px; overflow: hidden; border-radius: 4px; background: var(--dsw-alias-bg-tertiary, rgba(128,128,128,.2)); }
-.dqw-bar-fill { display: block; height: 100%; border-radius: inherit; background: var(--dsw-alias-button-primary-fill, #5b8def); }
 .dqw-muted { margin: 0; font-size: 10px; line-height: 14px; opacity: .7; }
+.dqw-models { margin: 0; font-size: 10px; line-height: 15px; opacity: .8; border-top: 1px dashed var(--dsw-alias-border-secondary, rgba(128,128,128,.25)); padding-top: 6px; }
 .dqw-error { margin: 0; font-size: 10px; line-height: 14px; color: var(--dsw-alias-label-warning, #b46900); }
 .dqw-credit { margin: 0; font-size: 10px; line-height: 14px; font-variant-numeric: tabular-nums; }
 `;
@@ -121,6 +173,13 @@ function formatNumber(value, locale) {
   if (typeof value !== "number" || !Number.isFinite(value)) return "";
   return new Intl.NumberFormat(locale === "zh" ? "zh-CN" : "en-US", { maximumFractionDigits: 1 }).format(value);
 }
+function formatCompact(value, locale) {
+  if (typeof value !== "number" || !Number.isFinite(value)) return "";
+  return new Intl.NumberFormat(locale === "zh" ? "zh-CN" : "en-US", {
+    notation: "compact",
+    maximumFractionDigits: 1
+  }).format(value);
+}
 function formatPercent(value, locale) {
   if (typeof value !== "number" || !Number.isFinite(value)) return "";
   const clamped = Math.max(0, Math.min(100, value));
@@ -155,101 +214,47 @@ function progress(doc, label, percent, locale) {
   bar.setAttribute("aria-valuemax", "100");
   bar.setAttribute("aria-valuenow", String(Math.max(0, Math.min(100, percent))));
   const fill = doc.createElement("span");
-  fill.className = "dqw-bar-fill";
+  fill.className = `dqw-bar-fill${percent > 95 ? " danger" : percent > 80 ? " warn" : ""}`;
   fill.style.width = `${Math.max(0, Math.min(100, percent))}%`;
   bar.append(fill);
   row.append(head, bar);
   return row;
 }
-function providerSection(doc, key, heading) {
-  const section = doc.createElement("section");
-  section.className = "dqw-provider";
-  section.dataset.provider = key;
-  section.append(text(doc, "h4", "dqw-provider-title", heading));
-  const content = doc.createElement("div");
-  content.dataset.role = "content";
-  content.className = "dqw-content";
-  section.append(content);
-  return section;
-}
-function appendStaleError(doc, content, provider, copy) {
-  if (provider.status === "stale") content.append(text(doc, "p", "dqw-error", `${copy.stale}: ${provider.error ?? ""}`));
-  else if (provider.status === "error") content.append(text(doc, "p", "dqw-error", provider.error ?? copy.failed));
-}
-function renderGlm(doc, section, provider, copy, locale) {
-  const content = section.querySelector('[data-role="content"]');
-  content.replaceChildren();
-  appendStaleError(doc, content, provider, copy);
-  if (provider.status === "missing") {
-    content.append(text(doc, "p", "dqw-muted", copy.notConfigured));
-    return;
-  }
-  if (provider.status === "loading") {
-    content.append(text(doc, "p", "dqw-muted", copy.loading));
-    return;
-  }
-  if (!provider.plan?.windows?.length) {
-    if (provider.status !== "error") content.append(text(doc, "p", "dqw-muted", copy.noPlan));
-    return;
-  }
-  const planName = provider.plan.planName;
-  if (planName) content.append(text(doc, "p", "dqw-muted", planName));
-  for (const window of provider.plan.windows) {
-    const label = window.name || copy.windows[window.key] || window.key;
-    if (typeof window.percent === "number" && Number.isFinite(window.percent)) {
-      content.append(progress(doc, label, window.percent, locale));
-    } else {
-      content.append(text(doc, "p", "dqw-muted", label));
-    }
-    const reset = formatTime(window.resetsAt, locale);
-    if (reset) content.append(text(doc, "p", "dqw-muted", `${copy.reset}: ${reset}`));
-  }
+function glmRowModel(provider) {
+  if (provider?.status === "missing") return null;
+  if (provider?.status === "error") return { kind: "error", label: "GLM", error: provider.error };
+  const windows = provider?.plan?.windows;
+  if (!Array.isArray(windows) || windows.length === 0) return null;
+  const five = windows.find((window) => window?.key === "5h");
+  const tokens = provider?.usage?.status === "ready" || provider?.usage?.status === "stale" ? provider?.usage?.totalTokens : void 0;
+  return {
+    kind: "data",
+    label: "GLM",
+    percent: five?.percent,
+    stale: provider.status === "stale",
+    error: provider.error,
+    extra: tokens
+  };
 }
-function renderCopilot(doc, section, provider, copy, locale) {
-  const content = section.querySelector('[data-role="content"]');
-  content.replaceChildren();
-  appendStaleError(doc, content, provider, copy);
-  if (provider.status === "missing") {
-    content.append(text(doc, "p", "dqw-muted", copy.notConfigured));
-    return;
-  }
-  if (provider.status === "loading") {
-    content.append(text(doc, "p", "dqw-muted", copy.loading));
-    return;
-  }
-  const quota = provider.quota;
-  if (quota?.planName) content.append(text(doc, "p", "dqw-muted", quota.planName));
-  if (quota?.balanceAvailable === true) {
-    content.append(text(doc, "p", "dqw-credit", `${copy.available}: ${formatNumber(quota.remaining, locale)} / ${formatNumber(quota.entitlement, locale)}`));
-    if (typeof quota.percentRemaining === "number") {
-      content.append(progress(doc, copy.available, quota.percentRemaining, locale));
-    }
-  } else {
-    content.append(text(doc, "p", "dqw-muted", copy.balanceUnavailable));
-  }
-  if (typeof quota?.creditsUsed === "number") {
-    content.append(text(doc, "p", "dqw-muted", `${copy.used}: ${formatNumber(quota.creditsUsed, locale)}`));
-  }
-  const reset = formatTime(quota?.resetsAt, locale);
-  if (reset) content.append(text(doc, "p", "dqw-muted", `${copy.reset}: ${reset}`));
+function copilotRowModel(provider) {
+  if (provider?.status === "missing") return null;
+  if (provider?.status === "error") return { kind: "error", label: "Copilot", error: provider.error };
+  const quota = provider?.quota;
+  if (quota?.balanceAvailable !== true) return null;
+  const used = remainingToUsed(quota.percentRemaining);
+  if (used === void 0) return null;
+  return {
+    kind: "data",
+    label: "Copilot",
+    percent: used,
+    stale: provider.status === "stale",
+    error: provider.error
+  };
 }
 function footArea(doc) {
-  const sidebar = doc.querySelector('[data-pane="sidebar"], [class*="sidebarCol"]');
+  const sidebar = doc.querySelector('[class*="sidebarCol"]');
   return sidebar?.querySelector('[class*="footArea"]') ?? void 0;
 }
-function readCollapsed(win) {
-  try {
-    return win.localStorage.getItem(COLLAPSE_KEY) === "1";
-  } catch {
-    return false;
-  }
-}
-function writeCollapsed(win, value) {
-  try {
-    win.localStorage.setItem(COLLAPSE_KEY, value ? "1" : "0");
-  } catch {
-  }
-}
 async function fetchJson(fetchImpl, path, method) {
   const response = await fetchImpl(path, {
     ...method === "POST" ? { method: "POST" } : {},
@@ -287,40 +292,138 @@ function mountQuotaCard({
   refreshButton.title = copy.refresh;
   refreshButton.setAttribute("aria-label", copy.refresh);
   refreshButton.dataset.action = "refresh";
-  const collapseButton = text(doc, "button", "dqw-button", "\u2212");
-  collapseButton.type = "button";
-  collapseButton.dataset.action = "collapse";
+  header.append(refreshButton);
   const body = doc.createElement("div");
   body.className = "dqw-body";
   const lastUpdated = text(doc, "p", "dqw-meta", copy.loading);
   lastUpdated.dataset.role = "updated";
-  const glmSection = providerSection(doc, "glm", "GLM Coding Plan");
-  const copilotSection = providerSection(doc, "copilot", "GitHub Copilot");
-  body.append(lastUpdated, glmSection, copilotSection);
-  header.append(refreshButton, collapseButton);
+  body.append(lastUpdated);
   card.append(header, body);
   container.append(style, card);
-  let collapsed = readCollapsed(win);
   let snapshot;
   let requestSequence = 0;
   let timer;
   let disposed = false;
   let queuedPlace = false;
-  const applyCollapsed = () => {
-    body.hidden = collapsed;
-    collapseButton.textContent = collapsed ? "+" : "\u2212";
-    collapseButton.title = collapsed ? copy.expand : copy.collapse;
-    collapseButton.setAttribute("aria-label", collapseButton.title);
-    collapseButton.setAttribute("aria-expanded", String(!collapsed));
+  let openKey;
+  const fillClass = (percent) => percent > 95 ? "dqw-bar-fill danger" : percent > 80 ? "dqw-bar-fill warn" : "dqw-bar-fill";
+  const renderProvider = (key, model, provider) => {
+    if (model === null) return null;
+    const row = doc.createElement("div");
+    row.className = "dqw-row-summary";
+    row.dataset.dshQuotaWatchRow = key;
+    row.append(text(doc, "span", "dqw-label", model.label));
+    if (model.kind === "error") {
+      row.classList.add("is-error");
+      row.append(text(doc, "span", "dqw-errtext", model.error ? `${copy.failed}: ${model.error}` : copy.failed));
+      return [row];
+    }
+    row.setAttribute("role", "button");
+    row.tabIndex = 0;
+    row.setAttribute("aria-expanded", String(openKey === key));
+    row.dataset.expandable = "";
+    if (typeof model.percent === "number" && Number.isFinite(model.percent)) {
+      const bar = doc.createElement("span");
+      bar.className = "dqw-bar";
+      bar.setAttribute("role", "progressbar");
+      bar.setAttribute("aria-valuemin", "0");
+      bar.setAttribute("aria-valuemax", "100");
+      bar.setAttribute("aria-valuenow", String(Math.max(0, Math.min(100, model.percent))));
+      const fill = text(doc, "span", fillClass(model.percent));
+      fill.style.width = `${Math.max(0, Math.min(100, model.percent))}%`;
+      bar.append(fill);
+      row.append(bar);
+    }
+    if (model.stale) {
+      const mark = text(doc, "span", "dqw-stale-mark", "\u26A0");
+      mark.dataset.dshQuotaWatchStale = "";
+      mark.title = model.error ?? copy.stale;
+      row.append(mark);
+    }
+    row.append(text(doc, "span", "dqw-pct", typeof model.percent === "number" ? formatPercent(model.percent, locale) : "\u2014"));
+    if (model.extra !== void 0) {
+      const extra = text(doc, "span", "dqw-extra", formatCompact(model.extra, locale));
+      extra.dataset.dshQuotaWatchExtra = "";
+      row.append(extra);
+    }
+    row.append(text(doc, "span", "dqw-chev", openKey === key ? "\u25BE" : "\u25B8"));
+    const detail = doc.createElement("div");
+    detail.className = "dqw-detail";
+    detail.dataset.dshQuotaWatchDetail = key;
+    if (openKey === key) renderDetail(detail, key, provider);
+    return [row, detail];
+  };
+  function renderDetail(detail, key, provider) {
+    detail.replaceChildren();
+    if (provider?.status === "stale") {
+      detail.append(text(doc, "p", "dqw-error", `${copy.stale}${provider.error ? `: ${provider.error}` : ""}`));
+    }
+    if (key === "glm") {
+      const usage = provider?.usage;
+      const numbers = doc.createElement("div");
+      numbers.className = "dqw-bignums";
+      const tokensBig = doc.createElement("div");
+      tokensBig.className = "dqw-big";
+      tokensBig.append(
+        text(doc, "div", "dqw-big-value", formatCompact(usage?.totalTokens, locale)),
+        text(doc, "div", "dqw-big-label", copy.todayTokens)
+      );
+      const callsBig = doc.createElement("div");
+      callsBig.className = "dqw-big";
+      callsBig.append(
+        text(doc, "div", "dqw-big-value", formatNumber(usage?.totalCalls, locale)),
+        text(doc, "div", "dqw-big-label", copy.todayCalls)
+      );
+      numbers.append(tokensBig, callsBig);
+      detail.append(numbers);
+      for (const window of provider?.plan?.windows ?? []) {
+        const label = copy.windows[window?.key] ?? window?.key;
+        if (typeof window?.percent === "number" && Number.isFinite(window.percent)) {
+          detail.append(progress(doc, label, window.percent, locale));
+        } else {
+          detail.append(text(doc, "p", "dqw-muted", label));
+        }
+        const reset2 = formatTime(window?.resetsAt, locale);
+        if (reset2) detail.append(text(doc, "p", "dqw-muted", `${copy.reset}: ${reset2}`));
+      }
+      const models = Array.isArray(usage?.models) && usage.models.length > 0 ? usage.models.map((model) => `${model.name} ${formatCompact(model.tokens, locale)}`).join(" \xB7 ") : void 0;
+      if (models) detail.append(text(doc, "p", "dqw-models", models));
+      const updated = formatTime(provider?.updatedAt ? new Date(provider.updatedAt).toISOString() : "", locale);
+      if (updated) detail.append(text(doc, "p", "dqw-meta", `${copy.updated}: ${updated}`));
+      return;
+    }
+    const quota = provider?.quota;
+    if (quota?.balanceAvailable === true) {
+      detail.append(text(doc, "p", "dqw-credit", `${copy.available}: ${formatNumber(quota.remaining, locale)} / ${formatNumber(quota.entitlement, locale)}`));
+      const used = remainingToUsed(quota.percentRemaining);
+      if (used !== void 0) detail.append(progress(doc, copy.used, used, locale));
+      if (typeof quota.creditsUsed === "number" && quota.creditsUsed >= 0) {
+        detail.append(text(doc, "p", "dqw-muted", `${copy.used}: ${formatNumber(quota.creditsUsed, locale)}`));
+      }
+    } else {
+      detail.append(text(doc, "p", "dqw-muted", copy.stale));
+    }
+    const reset = formatTime(quota?.resetsAt, locale);
+    if (reset) detail.append(text(doc, "p", "dqw-muted", `${copy.reset}: ${reset}`));
+  }
+  const renderAll = () => {
+    const providers = snapshot?.providers ?? [];
+    const glm = providers.find((provider) => provider?.key === "glm");
+    const copilot = providers.find((provider) => provider?.key === "copilot");
+    const glmParts = renderProvider("glm", glmRowModel(glm), glm);
+    const copilotParts = renderProvider("copilot", copilotRowModel(copilot), copilot);
+    const fragment = doc.createDocumentFragment();
+    fragment.append(lastUpdated);
+    if (glmParts) fragment.append(...glmParts);
+    if (copilotParts) fragment.append(...copilotParts);
+    body.replaceChildren(fragment);
+    container.hidden = glmParts === null && copilotParts === null;
+    const updated = formatTime(snapshot?.updatedAt ? new Date(snapshot.updatedAt).toISOString() : "", locale);
+    lastUpdated.textContent = updated ? `${copy.updated}: ${updated}` : copy.loading;
   };
   const render = (next) => {
     snapshot = next;
-    const glm = next?.providers?.find((provider) => provider.key === "glm");
-    const copilot = next?.providers?.find((provider) => provider.key === "copilot");
-    if (glm) renderGlm(doc, glmSection, glm, copy, locale);
-    if (copilot) renderCopilot(doc, copilotSection, copilot, copy, locale);
-    const updated = formatTime(next?.updatedAt ? new Date(next.updatedAt).toISOString() : "", locale);
-    lastUpdated.textContent = updated ? `${copy.updated}: ${updated}` : copy.loading;
+    renderAll();
   };
   const showTransportError = () => {
     if (snapshot) lastUpdated.textContent = copy.requestFailed;
@@ -360,7 +463,6 @@ function mountQuotaCard({
   const observer = new win.MutationObserver(schedulePlace);
   observer.observe(doc.body, { childList: true, subtree: true });
   place();
-  applyCollapsed();
   const startPolling = () => {
     if (timer !== void 0 || doc.visibilityState === "hidden" || disposed) return;
     void poll(false);
@@ -379,13 +481,25 @@ function mountQuotaCard({
   const onRefresh = () => {
     void poll(true);
   };
-  const onCollapse = () => {
-    collapsed = !collapsed;
-    writeCollapsed(win, collapsed);
-    applyCollapsed();
+  const toggleRow = (key) => {
+    openKey = openKey === key ? void 0 : key;
+    renderAll();
+  };
+  const onBodyClick = (event) => {
+    const row = event.target?.closest?.("[data-dsh-quota-watch-row][data-expandable]");
+    if (row) toggleRow(row.dataset.dshQuotaWatchRow);
+  };
+  const onBodyKeydown = (event) => {
+    if (event.key !== "Enter" && event.key !== " ") return;
+    const row = event.target?.closest?.("[data-dsh-quota-watch-row][data-expandable]");
+    if (row) {
+      event.preventDefault();
+      toggleRow(row.dataset.dshQuotaWatchRow);
+    }
   };
   refreshButton.addEventListener("click", onRefresh);
-  collapseButton.addEventListener("click", onCollapse);
+  body.addEventListener("click", onBodyClick);
+  body.addEventListener("keydown", onBodyKeydown);
   doc.addEventListener("visibilitychange", onVisibilityChange);
   startPolling();
   return () => {
@@ -394,7 +508,8 @@ function mountQuotaCard({
     observer.disconnect();
     doc.removeEventListener("visibilitychange", onVisibilityChange);
     refreshButton.removeEventListener("click", onRefresh);
-    collapseButton.removeEventListener("click", onCollapse);
+    body.removeEventListener("click", onBodyClick);
+    body.removeEventListener("keydown", onBodyKeydown);
     container.remove();
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iasiv5/dsh-quota-watch",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "DSH Web sidebar monitor for GLM Coding Plan quotas and GitHub Copilot credits",
   "type": "module",
   "main": "./src/host.mjs",

package/src/client.mjs

@@ -1,68 +1,90 @@
 import { CLIENT_POLL_INTERVAL_MS, CLIENT_ROUTES } from './shared.mjs'
+import { remainingToUsed } from './core/adapters.mjs'
 
 export const name = 'quota-watch-client'
 export const inject = []
 
 const CARD_SELECTOR = '[data-dsh-quota-watch-card]'
-const COLLAPSE_KEY = 'dsh-quota-watch:collapsed'
 const FETCH_TIMEOUT_MS = 15_000
 
 const COPY = {
   zh: {
     title: '套餐监控',
     refresh: '刷新',
-    collapse: '收起',
-    expand: '展开',
     loading: '读取中',
     updated: '更新',
-    notConfigured: '未配置',
-    noPlan: '暂无套餐窗口',
     failed: '查询失败',
     stale: '数据可能已过期',
     requestFailed: '刷新失败，显示上次成功数据',
     available: '可用额度',
     used: '本期已用',
-    balanceUnavailable: '余额暂不可用',
     reset: '重置',
-    windows: { '5h': '5 小时', week: '每周', month: '每月' },
+    todayTokens: '今日 tokens',
+    todayCalls: '今日调用',
+    windows: {
+      '5h': '5 小时窗口 · 已用',
+      week: '每周窗口 · 已用',
+      month: '每月窗口 · 已用',
+      mcp: 'MCP（月）· 已用',
+    },
   },
   en: {
     title: 'Quota Watch',
     refresh: 'Refresh',
-    collapse: 'Collapse',
-    expand: 'Expand',
     loading: 'Loading',
     updated: 'Updated',
-    notConfigured: 'Not configured',
-    noPlan: 'No plan windows',
     failed: 'Query failed',
     stale: 'Data may be stale',
     requestFailed: 'Refresh failed; showing last successful data',
     available: 'Available credits',
     used: 'Used this cycle',
-    balanceUnavailable: 'Balance unavailable',
     reset: 'Resets',
-    windows: { '5h': '5 hours', week: 'Weekly', month: 'Monthly' },
+    todayTokens: 'Today tokens',
+    todayCalls: 'Calls today',
+    windows: {
+      '5h': '5-hour window · used',
+      week: 'Weekly window · used',
+      month: 'Monthly window · used',
+      mcp: 'MCP (month) · used',
+    },
   },
 }
 
 const STYLE_TEXT = `
 [data-dsh-quota-watch-card] { box-sizing: border-box; width: 100%; margin: 0 0 8px; color: var(--dsw-alias-label-primary, inherit); font: inherit; }
 [data-dsh-quota-watch-card] *, [data-dsh-quota-watch-card] *::before, [data-dsh-quota-watch-card] *::after { box-sizing: border-box; }
-.dqw-card { border: 1px solid var(--dsw-alias-border-secondary, rgba(128,128,128,.35)); border-radius: 10px; background: var(--dsw-alias-bg-base, rgba(128,128,128,.08)); padding: 8px; display: flex; flex-direction: column; gap: 7px; }
+.dqw-card { border: 1px solid var(--dsw-alias-border-secondary, rgba(128,128,128,.35)); border-radius: 10px; background: var(--dsw-alias-bg-base, rgba(128,128,128,.08)); padding: 8px; display: flex; flex-direction: column; gap: 6px; }
 .dqw-head { display: flex; align-items: center; gap: 4px; min-width: 0; }
 .dqw-title { flex: 1; min-width: 0; margin: 0; font-size: 12px; font-weight: 600; line-height: 18px; }
 .dqw-button { border: 0; border-radius: 6px; background: transparent; color: inherit; cursor: pointer; font: inherit; font-size: 11px; line-height: 18px; padding: 1px 4px; }
 .dqw-button:hover { background: var(--dsw-alias-bg-hover, rgba(128,128,128,.16)); }
 .dqw-button:disabled { cursor: wait; opacity: .6; }
 .dqw-meta { margin: 0; font-size: 10px; line-height: 14px; opacity: .7; }
-.dqw-provider { border-top: 1px solid var(--dsw-alias-border-secondary, rgba(128,128,128,.25)); padding-top: 6px; display: flex; flex-direction: column; gap: 4px; }
-.dqw-provider-title { margin: 0; font-size: 11px; font-weight: 600; line-height: 16px; }
+.dqw-body { display: flex; flex-direction: column; }
+.dqw-row-summary { display: flex; align-items: center; gap: 6px; padding: 7px 6px; margin: 1px -2px 2px; border-radius: 8px; }
+.dqw-row-summary[data-expandable] { cursor: pointer; }
+.dqw-row-summary[data-expandable]:hover { background: var(--dsw-alias-bg-hover, rgba(128,128,128,.12)); }
+.dqw-row-summary:focus-visible { outline: 1px solid var(--dsw-alias-button-primary-fill, #5b8def); outline-offset: -1px; }
+.dqw-row-summary.is-error { cursor: default; }
+.dqw-label { font-size: 11px; font-weight: 600; width: 52px; flex: none; }
+.dqw-bar { display: block; flex: 1; height: 4px; overflow: hidden; border-radius: 4px; background: var(--dsw-alias-bg-tertiary, rgba(128,128,128,.2)); }
+.dqw-bar-fill { display: block; height: 100%; border-radius: inherit; background: var(--dsw-alias-button-primary-fill, #5b8def); }
+.dqw-bar-fill.warn { background: var(--dsw-alias-label-warning, #d29922); }
+.dqw-bar-fill.danger { background: var(--dsw-alias-label-danger, #c93c3c); }
+.dqw-pct { font-size: 10.5px; line-height: 14px; font-variant-numeric: tabular-nums; width: 30px; text-align: right; flex: none; }
+.dqw-extra { font-size: 10px; line-height: 14px; opacity: .72; font-variant-numeric: tabular-nums; flex: none; }
+.dqw-chev { font-size: 9px; line-height: 14px; opacity: .6; flex: none; width: 10px; text-align: center; }
+.dqw-stale-mark { flex: none; font-size: 9px; line-height: 14px; color: var(--dsw-alias-label-warning, #b46900); cursor: help; }
+.dqw-errtext { font-size: 10px; line-height: 14px; opacity: .7; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dqw-detail { padding: 2px 6px 6px; display: flex; flex-direction: column; gap: 7px; }
+.dqw-bignums { display: flex; gap: 6px; }
+.dqw-big { flex: 1; border: 1px solid var(--dsw-alias-border-secondary, rgba(128,128,128,.25)); border-radius: 8px; padding: 6px 8px; }
+.dqw-big .dqw-big-value { font-size: 16px; font-weight: 650; line-height: 20px; font-variant-numeric: tabular-nums; }
+.dqw-big .dqw-big-label { font-size: 9.5px; line-height: 13px; opacity: .65; }
 .dqw-row { display: flex; flex-direction: column; gap: 2px; }
 .dqw-row-head { display: flex; justify-content: space-between; gap: 5px; font-size: 10px; line-height: 14px; }
-.dqw-bar { display: block; height: 4px; overflow: hidden; border-radius: 4px; background: var(--dsw-alias-bg-tertiary, rgba(128,128,128,.2)); }
-.dqw-bar-fill { display: block; height: 100%; border-radius: inherit; background: var(--dsw-alias-button-primary-fill, #5b8def); }
 .dqw-muted { margin: 0; font-size: 10px; line-height: 14px; opacity: .7; }
+.dqw-models { margin: 0; font-size: 10px; line-height: 15px; opacity: .8; border-top: 1px dashed var(--dsw-alias-border-secondary, rgba(128,128,128,.25)); padding-top: 6px; }
 .dqw-error { margin: 0; font-size: 10px; line-height: 14px; color: var(--dsw-alias-label-warning, #b46900); }
 .dqw-credit { margin: 0; font-size: 10px; line-height: 14px; font-variant-numeric: tabular-nums; }
 `
@@ -76,6 +98,14 @@ function formatNumber(value, locale) {
   return new Intl.NumberFormat(locale === 'zh' ? 'zh-CN' : 'en-US', { maximumFractionDigits: 1 }).format(value)
 }
 
+function formatCompact(value, locale) {
+  if (typeof value !== 'number' || !Number.isFinite(value)) return ''
+  return new Intl.NumberFormat(locale === 'zh' ? 'zh-CN' : 'en-US', {
+    notation: 'compact',
+    maximumFractionDigits: 1,
+  }).format(value)
+}
+
 function formatPercent(value, locale) {
   if (typeof value !== 'number' || !Number.isFinite(value)) return ''
   const clamped = Math.max(0, Math.min(100, value))
@@ -113,102 +143,55 @@ function progress(doc, label, percent, locale) {
   bar.setAttribute('aria-valuemax', '100')
   bar.setAttribute('aria-valuenow', String(Math.max(0, Math.min(100, percent))))
   const fill = doc.createElement('span')
-  fill.className = 'dqw-bar-fill'
+  fill.className = `dqw-bar-fill${percent > 95 ? ' danger' : percent > 80 ? ' warn' : ''}`
   fill.style.width = `${Math.max(0, Math.min(100, percent))}%`
   bar.append(fill)
   row.append(head, bar)
   return row
 }
 
-function providerSection(doc, key, heading) {
-  const section = doc.createElement('section')
-  section.className = 'dqw-provider'
-  section.dataset.provider = key
-  section.append(text(doc, 'h4', 'dqw-provider-title', heading))
-  const content = doc.createElement('div')
-  content.dataset.role = 'content'
-  content.className = 'dqw-content'
-  section.append(content)
-  return section
-}
-
-function appendStaleError(doc, content, provider, copy) {
-  if (provider.status === 'stale') content.append(text(doc, 'p', 'dqw-error', `${copy.stale}: ${provider.error ?? ''}`))
-  else if (provider.status === 'error') content.append(text(doc, 'p', 'dqw-error', provider.error ?? copy.failed))
-}
-
-function renderGlm(doc, section, provider, copy, locale) {
-  const content = section.querySelector('[data-role="content"]')
-  content.replaceChildren()
-  appendStaleError(doc, content, provider, copy)
-  if (provider.status === 'missing') {
-    content.append(text(doc, 'p', 'dqw-muted', copy.notConfigured))
-    return
-  }
-  if (provider.status === 'loading') {
-    content.append(text(doc, 'p', 'dqw-muted', copy.loading))
-    return
-  }
-  if (!provider.plan?.windows?.length) {
-    if (provider.status !== 'error') content.append(text(doc, 'p', 'dqw-muted', copy.noPlan))
-    return
-  }
-  const planName = provider.plan.planName
-  if (planName) content.append(text(doc, 'p', 'dqw-muted', planName))
-  for (const window of provider.plan.windows) {
-    const label = window.name || copy.windows[window.key] || window.key
-    if (typeof window.percent === 'number' && Number.isFinite(window.percent)) {
-      content.append(progress(doc, label, window.percent, locale))
-    } else {
-      content.append(text(doc, 'p', 'dqw-muted', label))
-    }
-    const reset = formatTime(window.resetsAt, locale)
-    if (reset) content.append(text(doc, 'p', 'dqw-muted', `${copy.reset}: ${reset}`))
+/** GLM summary row view model: fixed 5h-window percent plus today's compact tokens. */
+function glmRowModel(provider) {
+  if (provider?.status === 'missing') return null
+  if (provider?.status === 'error') return { kind: 'error', label: 'GLM', error: provider.error }
+  const windows = provider?.plan?.windows
+  if (!Array.isArray(windows) || windows.length === 0) return null
+  const five = windows.find((window) => window?.key === '5h')
+  const tokens = provider?.usage?.status === 'ready' || provider?.usage?.status === 'stale'
+    ? provider?.usage?.totalTokens
+    : undefined
+  return {
+    kind: 'data',
+    label: 'GLM',
+    percent: five?.percent,
+    stale: provider.status === 'stale',
+    error: provider.error,
+    extra: tokens,
   }
 }
 
-function renderCopilot(doc, section, provider, copy, locale) {
-  const content = section.querySelector('[data-role="content"]')
-  content.replaceChildren()
-  appendStaleError(doc, content, provider, copy)
-  if (provider.status === 'missing') {
-    content.append(text(doc, 'p', 'dqw-muted', copy.notConfigured))
-    return
-  }
-  if (provider.status === 'loading') {
-    content.append(text(doc, 'p', 'dqw-muted', copy.loading))
-    return
+/** Copilot summary row view model: used% inverted from the reported remaining percent. */
+function copilotRowModel(provider) {
+  if (provider?.status === 'missing') return null
+  if (provider?.status === 'error') return { kind: 'error', label: 'Copilot', error: provider.error }
+  const quota = provider?.quota
+  if (quota?.balanceAvailable !== true) return null
+  const used = remainingToUsed(quota.percentRemaining)
+  if (used === undefined) return null
+  return {
+    kind: 'data',
+    label: 'Copilot',
+    percent: used,
+    stale: provider.status === 'stale',
+    error: provider.error,
   }
-  const quota = provider.quota
-  if (quota?.planName) content.append(text(doc, 'p', 'dqw-muted', quota.planName))
-  if (quota?.balanceAvailable === true) {
-    content.append(text(doc, 'p', 'dqw-credit', `${copy.available}: ${formatNumber(quota.remaining, locale)} / ${formatNumber(quota.entitlement, locale)}`))
-    if (typeof quota.percentRemaining === 'number') {
-      content.append(progress(doc, copy.available, quota.percentRemaining, locale))
-    }
-  } else {
-    content.append(text(doc, 'p', 'dqw-muted', copy.balanceUnavailable))
-  }
-  if (typeof quota?.creditsUsed === 'number') {
-    content.append(text(doc, 'p', 'dqw-muted', `${copy.used}: ${formatNumber(quota.creditsUsed, locale)}`))
-  }
-  const reset = formatTime(quota?.resetsAt, locale)
-  if (reset) content.append(text(doc, 'p', 'dqw-muted', `${copy.reset}: ${reset}`))
 }
 
 function footArea(doc) {
-  const sidebar = doc.querySelector('[data-pane="sidebar"], [class*="sidebarCol"]')
+  const sidebar = doc.querySelector('[class*="sidebarCol"]')
   return sidebar?.querySelector('[class*="footArea"]') ?? undefined
 }
 
-function readCollapsed(win) {
-  try { return win.localStorage.getItem(COLLAPSE_KEY) === '1' } catch { return false }
-}
-
-function writeCollapsed(win, value) {
-  try { win.localStorage.setItem(COLLAPSE_KEY, value ? '1' : '0') } catch { /* Storage may be unavailable. */ }
-}
-
 async function fetchJson(fetchImpl, path, method) {
   const response = await fetchImpl(path, {
     ...(method === 'POST' ? { method: 'POST' } : {}),
@@ -247,42 +230,146 @@ export function mountQuotaCard({
   refreshButton.title = copy.refresh
   refreshButton.setAttribute('aria-label', copy.refresh)
   refreshButton.dataset.action = 'refresh'
-  const collapseButton = text(doc, 'button', 'dqw-button', '−')
-  collapseButton.type = 'button'
-  collapseButton.dataset.action = 'collapse'
+  header.append(refreshButton)
   const body = doc.createElement('div')
   body.className = 'dqw-body'
   const lastUpdated = text(doc, 'p', 'dqw-meta', copy.loading)
   lastUpdated.dataset.role = 'updated'
-  const glmSection = providerSection(doc, 'glm', 'GLM Coding Plan')
-  const copilotSection = providerSection(doc, 'copilot', 'GitHub Copilot')
-  body.append(lastUpdated, glmSection, copilotSection)
-  header.append(refreshButton, collapseButton)
+  body.append(lastUpdated)
   card.append(header, body)
   container.append(style, card)
-  let collapsed = readCollapsed(win)
   let snapshot
   let requestSequence = 0
   let timer
   let disposed = false
   let queuedPlace = false
+  let openKey
+
+  const fillClass = (percent) => (percent > 95 ? 'dqw-bar-fill danger' : percent > 80 ? 'dqw-bar-fill warn' : 'dqw-bar-fill')
+
+  /** Build [row, detail] fragments for one provider, or null when it must not render. */
+  const renderProvider = (key, model, provider) => {
+    if (model === null) return null
+    const row = doc.createElement('div')
+    row.className = 'dqw-row-summary'
+    row.dataset.dshQuotaWatchRow = key
+    row.append(text(doc, 'span', 'dqw-label', model.label))
+    if (model.kind === 'error') {
+      row.classList.add('is-error')
+      row.append(text(doc, 'span', 'dqw-errtext', model.error ? `${copy.failed}: ${model.error}` : copy.failed))
+      return [row]
+    }
+    row.setAttribute('role', 'button')
+    row.tabIndex = 0
+    row.setAttribute('aria-expanded', String(openKey === key))
+    row.dataset.expandable = ''
+    if (typeof model.percent === 'number' && Number.isFinite(model.percent)) {
+      const bar = doc.createElement('span')
+      bar.className = 'dqw-bar'
+      bar.setAttribute('role', 'progressbar')
+      bar.setAttribute('aria-valuemin', '0')
+      bar.setAttribute('aria-valuemax', '100')
+      bar.setAttribute('aria-valuenow', String(Math.max(0, Math.min(100, model.percent))))
+      const fill = text(doc, 'span', fillClass(model.percent))
+      fill.style.width = `${Math.max(0, Math.min(100, model.percent))}%`
+      bar.append(fill)
+      row.append(bar)
+    }
+    if (model.stale) {
+      const mark = text(doc, 'span', 'dqw-stale-mark', '⚠')
+      mark.dataset.dshQuotaWatchStale = ''
+      mark.title = model.error ?? copy.stale
+      row.append(mark)
+    }
+    row.append(text(doc, 'span', 'dqw-pct', typeof model.percent === 'number' ? formatPercent(model.percent, locale) : '—'))
+    if (model.extra !== undefined) {
+      const extra = text(doc, 'span', 'dqw-extra', formatCompact(model.extra, locale))
+      extra.dataset.dshQuotaWatchExtra = ''
+      row.append(extra)
+    }
+    row.append(text(doc, 'span', 'dqw-chev', openKey === key ? '▾' : '▸'))
+    const detail = doc.createElement('div')
+    detail.className = 'dqw-detail'
+    detail.dataset.dshQuotaWatchDetail = key
+    if (openKey === key) renderDetail(detail, key, provider)
+    return [row, detail]
+  }
+
+  function renderDetail(detail, key, provider) {
+    detail.replaceChildren()
+    if (provider?.status === 'stale') {
+      detail.append(text(doc, 'p', 'dqw-error', `${copy.stale}${provider.error ? `: ${provider.error}` : ''}`))
+    }
+    if (key === 'glm') {
+      const usage = provider?.usage
+      const numbers = doc.createElement('div')
+      numbers.className = 'dqw-bignums'
+      const tokensBig = doc.createElement('div')
+      tokensBig.className = 'dqw-big'
+      tokensBig.append(
+        text(doc, 'div', 'dqw-big-value', formatCompact(usage?.totalTokens, locale)),
+        text(doc, 'div', 'dqw-big-label', copy.todayTokens),
+      )
+      const callsBig = doc.createElement('div')
+      callsBig.className = 'dqw-big'
+      callsBig.append(
+        text(doc, 'div', 'dqw-big-value', formatNumber(usage?.totalCalls, locale)),
+        text(doc, 'div', 'dqw-big-label', copy.todayCalls),
+      )
+      numbers.append(tokensBig, callsBig)
+      detail.append(numbers)
+      for (const window of provider?.plan?.windows ?? []) {
+        const label = copy.windows[window?.key] ?? window?.key
+        if (typeof window?.percent === 'number' && Number.isFinite(window.percent)) {
+          detail.append(progress(doc, label, window.percent, locale))
+        } else {
+          detail.append(text(doc, 'p', 'dqw-muted', label))
+        }
+        const reset = formatTime(window?.resetsAt, locale)
+        if (reset) detail.append(text(doc, 'p', 'dqw-muted', `${copy.reset}: ${reset}`))
+      }
+      const models = Array.isArray(usage?.models) && usage.models.length > 0
+        ? usage.models.map((model) => `${model.name} ${formatCompact(model.tokens, locale)}`).join(' · ')
+        : undefined
+      if (models) detail.append(text(doc, 'p', 'dqw-models', models))
+      const updated = formatTime(provider?.updatedAt ? new Date(provider.updatedAt).toISOString() : '', locale)
+      if (updated) detail.append(text(doc, 'p', 'dqw-meta', `${copy.updated}: ${updated}`))
+      return
+    }
+    const quota = provider?.quota
+    if (quota?.balanceAvailable === true) {
+      detail.append(text(doc, 'p', 'dqw-credit', `${copy.available}: ${formatNumber(quota.remaining, locale)} / ${formatNumber(quota.entitlement, locale)}`))
+      const used = remainingToUsed(quota.percentRemaining)
+      if (used !== undefined) detail.append(progress(doc, copy.used, used, locale))
+      if (typeof quota.creditsUsed === 'number' && quota.creditsUsed >= 0) {
+        detail.append(text(doc, 'p', 'dqw-muted', `${copy.used}: ${formatNumber(quota.creditsUsed, locale)}`))
+      }
+    } else {
+      detail.append(text(doc, 'p', 'dqw-muted', copy.stale))
+    }
+    const reset = formatTime(quota?.resetsAt, locale)
+    if (reset) detail.append(text(doc, 'p', 'dqw-muted', `${copy.reset}: ${reset}`))
+  }
 
-  const applyCollapsed = () => {
-    body.hidden = collapsed
-    collapseButton.textContent = collapsed ? '+' : '−'
-    collapseButton.title = collapsed ? copy.expand : copy.collapse
-    collapseButton.setAttribute('aria-label', collapseButton.title)
-    collapseButton.setAttribute('aria-expanded', String(!collapsed))
+  const renderAll = () => {
+    const providers = snapshot?.providers ?? []
+    const glm = providers.find((provider) => provider?.key === 'glm')
+    const copilot = providers.find((provider) => provider?.key === 'copilot')
+    const glmParts = renderProvider('glm', glmRowModel(glm), glm)
+    const copilotParts = renderProvider('copilot', copilotRowModel(copilot), copilot)
+    const fragment = doc.createDocumentFragment()
+    fragment.append(lastUpdated)
+    if (glmParts) fragment.append(...glmParts)
+    if (copilotParts) fragment.append(...copilotParts)
+    body.replaceChildren(fragment)
+    container.hidden = glmParts === null && copilotParts === null
+    const updated = formatTime(snapshot?.updatedAt ? new Date(snapshot.updatedAt).toISOString() : '', locale)
+    lastUpdated.textContent = updated ? `${copy.updated}: ${updated}` : copy.loading
   }
 
   const render = (next) => {
     snapshot = next
-    const glm = next?.providers?.find((provider) => provider.key === 'glm')
-    const copilot = next?.providers?.find((provider) => provider.key === 'copilot')
-    if (glm) renderGlm(doc, glmSection, glm, copy, locale)
-    if (copilot) renderCopilot(doc, copilotSection, copilot, copy, locale)
-    const updated = formatTime(next?.updatedAt ? new Date(next.updatedAt).toISOString() : '', locale)
-    lastUpdated.textContent = updated ? `${copy.updated}: ${updated}` : copy.loading
+    renderAll()
   }
 
   const showTransportError = () => {
@@ -327,7 +414,6 @@ export function mountQuotaCard({
   const observer = new win.MutationObserver(schedulePlace)
   observer.observe(doc.body, { childList: true, subtree: true })
   place()
-  applyCollapsed()
 
   const startPolling = () => {
     if (timer !== undefined || doc.visibilityState === 'hidden' || disposed) return
@@ -343,13 +429,25 @@ export function mountQuotaCard({
     else startPolling()
   }
   const onRefresh = () => { void poll(true) }
-  const onCollapse = () => {
-    collapsed = !collapsed
-    writeCollapsed(win, collapsed)
-    applyCollapsed()
+  const toggleRow = (key) => {
+    openKey = openKey === key ? undefined : key
+    renderAll()
+  }
+  const onBodyClick = (event) => {
+    const row = event.target?.closest?.('[data-dsh-quota-watch-row][data-expandable]')
+    if (row) toggleRow(row.dataset.dshQuotaWatchRow)
+  }
+  const onBodyKeydown = (event) => {
+    if (event.key !== 'Enter' && event.key !== ' ') return
+    const row = event.target?.closest?.('[data-dsh-quota-watch-row][data-expandable]')
+    if (row) {
+      event.preventDefault()
+      toggleRow(row.dataset.dshQuotaWatchRow)
+    }
   }
   refreshButton.addEventListener('click', onRefresh)
-  collapseButton.addEventListener('click', onCollapse)
+  body.addEventListener('click', onBodyClick)
+  body.addEventListener('keydown', onBodyKeydown)
   doc.addEventListener('visibilitychange', onVisibilityChange)
   startPolling()
 
@@ -359,7 +457,8 @@ export function mountQuotaCard({
     observer.disconnect()
     doc.removeEventListener('visibilitychange', onVisibilityChange)
     refreshButton.removeEventListener('click', onRefresh)
-    collapseButton.removeEventListener('click', onCollapse)
+    body.removeEventListener('click', onBodyClick)
+    body.removeEventListener('keydown', onBodyKeydown)
     container.remove()
   }
 }

package/src/core/adapters.mjs

@@ -49,7 +49,7 @@ function toIso(value) {
 }
 
 function glmPercent(row, kind) {
-  if (kind === 'CREDIT_LIMIT') {
+  if (kind === 'CREDIT_LIMIT' || kind === 'TIME_LIMIT') {
     const current = asNumber(row.currentValue)
     const total = asNumber(row.usage)
     if (current !== undefined && total !== undefined && total > 0) {
@@ -74,6 +74,45 @@ export function buildGlmProbe({ provider, apiKey } = {}) {
   }
 }
 
+const GLM_USAGE_PATH = '/api/monitor/usage/model-usage'
+
+/** Build a GLM model-usage request over a formatted local-time interval. */
+export function buildGlmUsageProbe({ provider, apiKey, startTime, endTime } = {}) {
+  const host = GLM_HOSTS[provider]
+  const key = asString(apiKey)
+  const from = asString(startTime)
+  const to = asString(endTime)
+  if (host === undefined || key === undefined || from === undefined || to === undefined) return undefined
+  return {
+    url: `https://${host}${GLM_USAGE_PATH}?startTime=${encodeURIComponent(from)}&endTime=${encodeURIComponent(to)}`,
+    headers: {
+      authorization: key,
+      'accept-language': 'en-US,en',
+    },
+  }
+}
+
+/** Format a Date as the provider's local-time `yyyy-MM-dd HH:mm:ss` interval stamp. */
+export function formatGlmIntervalTime(date) {
+  if (!(date instanceof Date) || Number.isNaN(date.getTime())) return undefined
+  const pad = (value) => String(value).padStart(2, '0')
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`
+}
+
+/** The host-local calendar day so far, as a model-usage query interval. */
+export function usageDayWindow(now = new Date()) {
+  const end = formatGlmIntervalTime(now)
+  if (end === undefined) return undefined
+  return { startTime: `${end.slice(0, 10)} 00:00:00`, endTime: end }
+}
+
+/** Normalize a provider-reported remaining percentage to used, without other fields. */
+export function remainingToUsed(percentRemaining) {
+  const value = asNumber(percentRemaining)
+  if (value === undefined || value < 0 || value > 100) return undefined
+  return clampPercent(Math.round((100 - value) * 100) / 100)
+}
+
 /** Normalize GLM's provider-defined quota windows without relying on row order. */
 export function parseGlmPlan(status, body) {
   if (status !== 200) return undefined
@@ -87,13 +126,20 @@ export function parseGlmPlan(status, body) {
     const row = asRecord(candidate)
     if (row === undefined) continue
     const kind = asString(row.type)
-    if (kind === 'TIME_LIMIT') continue
-    if (kind !== 'TOKENS_LIMIT' && kind !== 'CREDIT_LIMIT') continue
+    if (kind !== 'TOKENS_LIMIT' && kind !== 'CREDIT_LIMIT' && kind !== 'TIME_LIMIT') continue
+    const percent = glmPercent(row, kind)
+    const resetsAt = toIso(row.nextResetTime)
+    if (kind === 'TIME_LIMIT') {
+      windows.push({
+        key: 'mcp',
+        ...(percent !== undefined ? { percent } : {}),
+        ...(resetsAt !== undefined ? { resetsAt } : {}),
+      })
+      continue
+    }
     const unit = asNumber(row.unit)
     const key = GLM_WINDOW_KEYS[unit]
     if (key === undefined) continue
-    const percent = glmPercent(row, kind)
-    const resetsAt = toIso(row.nextResetTime)
     windows.push({
       key,
       ...(percent !== undefined ? { percent } : {}),
@@ -106,6 +152,29 @@ export function parseGlmPlan(status, body) {
   return { ...(planName !== undefined ? { planName } : {}), windows }
 }
 
+/** Normalize GLM's provider-reported usage totals for a queried interval. */
+export function parseGlmUsage(status, body) {
+  if (status !== 200) return undefined
+  const root = asRecord(body)
+  if (root?.success !== true) return undefined
+  const data = asRecord(root.data)
+  const total = asRecord(data?.totalUsage)
+  const totalTokens = asNumber(total?.totalTokensUsage)
+  const totalCalls = asNumber(total?.totalModelCallCount)
+  if (totalTokens === undefined || totalTokens < 0) return undefined
+  if (totalCalls === undefined || totalCalls < 0) return undefined
+  const list = Array.isArray(total.modelSummaryList) ? total.modelSummaryList : []
+  const models = []
+  for (const candidate of list) {
+    const row = asRecord(candidate)
+    const name = asString(row?.modelName)
+    const tokens = asNumber(row?.totalTokens)
+    if (name === undefined || tokens === undefined || tokens < 0) continue
+    models.push({ name, tokens })
+  }
+  return { totalTokens, totalCalls, ...(models.length > 0 ? { models } : {}) }
+}
+
 /** Build the Copilot user-quota request using the raw GitHub OAuth grant. */
 export function buildCopilotProbe({ githubOAuthToken } = {}) {
   const token = asString(githubOAuthToken)

package/src/host.mjs

@@ -1,5 +1,5 @@
 import { credentialKey, credentialRef, isCredentialRefName } from '@deepseek-ai/dsh-credentials'
-import { buildCopilotProbe, buildGlmProbe, parseCopilotUser, parseGlmPlan } from './core/adapters.mjs'
+import { buildCopilotProbe, buildGlmProbe, buildGlmUsageProbe, parseCopilotUser, parseGlmPlan, parseGlmUsage, usageDayWindow } from './core/adapters.mjs'
 import {
   DEFAULT_POLL_INTERVAL_SEC,
   MAX_POLL_INTERVAL_SEC,
@@ -133,6 +133,7 @@ export function createQuotaService(ctx, options = {}) {
           ...(provider.error !== undefined ? { error: provider.error } : {}),
           ...(provider.plan !== undefined ? { plan: provider.plan } : {}),
           ...(provider.quota !== undefined ? { quota: provider.quota } : {}),
+          ...(provider.usage !== undefined ? { usage: provider.usage } : {}),
         }
       }),
     }
@@ -161,6 +162,52 @@ export function createQuotaService(ctx, options = {}) {
     })
   }
 
+  function markGlmPlanSuccess(plan) {
+    const previous = providers.get('glm')
+    const at = now()
+    providers.set('glm', {
+      key: 'glm',
+      displayName: 'GLM Coding Plan',
+      status: 'ready',
+      credential: 'configured',
+      updatedAt: at,
+      checkedAt: at,
+      plan,
+      ...(previous?.usage !== undefined ? { usage: previous.usage } : {}),
+    })
+  }
+
+  function markGlmUsageSuccess(usage) {
+    const previous = providers.get('glm')
+    if (previous === undefined || previous.key !== 'glm') return
+    const at = now()
+    providers.set('glm', {
+      ...previous,
+      status: 'ready',
+      credential: 'configured',
+      updatedAt: at,
+      checkedAt: at,
+      usage: { status: 'ready', updatedAt: at, ...usage },
+    })
+  }
+
+  function markGlmUsageFailure(error) {
+    const previous = providers.get('glm')
+    if (previous === undefined || previous.key !== 'glm') return
+    const lastGood = previous.usage?.status === 'ready' || previous.usage?.status === 'stale'
+      ? previous.usage
+      : undefined
+    providers.set('glm', {
+      ...previous,
+      checkedAt: now(),
+      usage: {
+        ...(lastGood !== undefined ? lastGood : {}),
+        status: lastGood !== undefined ? 'stale' : 'error',
+        error: safeProbeError(error),
+      },
+    })
+  }
+
   function markFailure(key, displayName, error) {
     const previous = providers.get(key)
     const checkedAt = now()
@@ -206,9 +253,26 @@ export function createQuotaService(ctx, options = {}) {
       const { status, body } = await fetchBody(spec)
       const plan = parseGlmPlan(status, body)
       if (plan === undefined) throw Object.assign(new Error(), { code: 'UNRECOGNIZED_RESPONSE' })
-      markSuccess('glm', 'GLM Coding Plan', { plan })
+      markGlmPlanSuccess(plan)
     } catch (error) {
       markFailure('glm', 'GLM Coding Plan', error)
+      return
+    }
+    await probeGlmUsage(provider, apiKey)
+  }
+
+  async function probeGlmUsage(provider, apiKey) {
+    const window = usageDayWindow(new Date(now()))
+    if (window === undefined) return
+    try {
+      const spec = buildGlmUsageProbe({ provider, apiKey, startTime: window.startTime, endTime: window.endTime })
+      if (spec === undefined) throw Object.assign(new Error(), { code: 'UNRECOGNIZED_RESPONSE' })
+      const { status, body } = await fetchBody(spec)
+      const usage = parseGlmUsage(status, body)
+      if (usage === undefined) throw Object.assign(new Error(), { code: 'UNRECOGNIZED_RESPONSE' })
+      markGlmUsageSuccess(usage)
+    } catch (error) {
+      markGlmUsageFailure(error)
     }
   }