@iasiv5/dsh-quota-watch 0.0.11 → 0.0.13

package/README.md

@@ -6,7 +6,7 @@
 
 ## 功能
 
-- 在侧栏底部区块的最顶部（框架渲染的插件入口与设置行之上）显示一张常显摘要卡（无标题、无刷新按钮）：GLM 与 GitHub Copilot 各占一行，统一显示**已用百分比**（Copilot 为 `100 − percent_remaining` 的单值反转），已用超过 80% 进度条转橙、超过 95% 转红；点击行首的 GLM / Copilot 名称立即触发一次宿主探测（等同原刷新按钮），点击行其余区域展开详情。
+- 在侧栏底部区块的最顶部（框架渲染的插件入口与设置行之上）显示一张常显摘要卡（无标题、无刷新按钮）：GLM 与 GitHub Copilot 各占一行，统一显示**已用百分比**（Copilot 为 `100 − percent_remaining` 的单值反转），已用超过 80% 进度条转橙、超过 95% 转红；点击行首的 GLM / Copilot 名称立即触发一次宿主探测（等同原刷新按钮），点击行其余区域展开详情。侧栏收起时改为 36×36px 无框按钮与 16px 配额仪表盘图标，和设置按钮对齐；颜色使用 DSH 主题语义变量，自动适配浅色/深色皮肤。点击图标打开 GLM / Copilot 概览，可继续查看额度详情；不显示常驻提醒点。
 - GLM 摘要行固定显示 5 小时窗口已用百分比，行尾等宽小字为当日 token 用量；点击行在侧栏右侧弹出详情面板（半透明毛玻璃底，深浅主题均可读，不改变卡片高度）：今日 Tokens / 调用次数双大数字、窗口区为五列对齐网格（名称 ｜ `·` ｜ `已用`/♾️ ｜ 百分比 ｜ 同字号弱色「（重置: …）」，♾️ 与 `已用` 同列左对齐，弱色括注整列左对齐）、虚线分隔的分模型用量行（名称左对齐、token 数右对齐）。窗口按 MCP（月）→ 5 小时 → 每月 → 每周固定排序；接口未下发周窗口时显示「每周额度 · ♾️（无限）」占位，真实周窗口数据一旦下发即自动替换占位。同一时间至多展开一个详情；点击面板外或按 Esc 关闭。
 - GitHub Copilot 摘要行仅在 GitHub 返回有限、有效的 `remaining` 且带 `percent_remaining` 时显示；行尾等宽小字显示本期 credits 消耗的紧凑值。点击在侧栏右侧弹出精简详情（标签左对齐、数值右对齐的三行）：可用额度、本期已用（credits 消耗 + 弱化的已用百分比）、重置时间。`credits_used` 绝不用于推算余额，缺失有效百分比时该行不渲染。
 - 卡片顶部不显示全局更新时间；仅在等待首个快照或刷新失败时显示一行状态文字（读取中 / 刷新失败 / 查询失败）。
@@ -48,4 +48,4 @@ dsh plugin --profile web add @iasiv5/dsh-quota-watch
 
 ## English summary
 
-DSH Quota Watch is a personal DSH Web sidebar card for GLM Coding Plan windows and GitHub Copilot's provider-reported quota snapshot. It resolves credentials on every host-side probe, sends only normalized values to the browser, keeps no usage history, and never infers a Copilot balance from credits used. The Copilot endpoint is undocumented and may change; invalid or unlimited quota snapshots are shown as unavailable rather than guessed.
+DSH Quota Watch is a personal DSH Web sidebar card for GLM Coding Plan windows and GitHub Copilot's provider-reported quota snapshot. It resolves credentials on every host-side probe, sends only normalized values to the browser, keeps no usage history, and never infers a Copilot balance from credits used. When the sidebar is collapsed, a 36px control with a 16px quota-gauge icon replaces the text card; clicking it opens provider summaries and details. The icon uses DSH semantic theme tokens and has no permanent border or alert badge. The Copilot endpoint is undocumented and may change; invalid or unlimited quota snapshots are shown as unavailable rather than guessed.

package/lib/client.js

@@ -89,6 +89,9 @@ var FETCH_TIMEOUT_MS = 15e3;
 var COPY = {
   zh: {
     title: "\u5957\u9910\u76D1\u63A7",
+    openDetails: "\u67E5\u770B\u8BE6\u60C5",
+    backToOverview: "\u8FD4\u56DE\u989D\u5EA6\u6982\u89C8",
+    providerNames: { glm: "GLM", copilot: "Copilot" },
     refresh: "\u5237\u65B0",
     loading: "\u8BFB\u53D6\u4E2D",
     failed: "\u67E5\u8BE2\u5931\u8D25",
@@ -103,7 +106,7 @@ var COPY = {
     todayCalls: "\u8C03\u7528\u6B21\u6570",
     weekUnlimited: "\u6BCF\u5468\u989D\u5EA6",
     unlimited: "\u267E\uFE0F",
-    unlimitedNote: "\uFF08\u65E0\u9650\uFF09",
+    unlimitedNote: "\uFF08 \u65E0\u9650 \uFF09",
     windows: {
       "5h": "5 \u5C0F\u65F6\u989D\u5EA6",
       week: "\u6BCF\u5468\u989D\u5EA6",
@@ -113,6 +116,9 @@ var COPY = {
   },
   en: {
     title: "Quota Watch",
+    openDetails: "View details",
+    backToOverview: "Back to quota overview",
+    providerNames: { glm: "GLM", copilot: "Copilot" },
     refresh: "Refresh",
     loading: "Loading",
     failed: "Query failed",
@@ -127,7 +133,7 @@ var COPY = {
     todayCalls: "Calls",
     weekUnlimited: "Weekly quota",
     unlimited: "\u267E\uFE0F",
-    unlimitedNote: " (unlimited)",
+    unlimitedNote: " ( unlimited )",
     windows: {
       "5h": "5-hour quota",
       week: "Weekly quota",
@@ -159,10 +165,26 @@ var STYLE_TEXT = `
 .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-rail-trigger { display: none; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--dsw-alias-label-primary, inherit); cursor: pointer; transition: background-color .12s, color .12s; }
+.dqw-rail-trigger svg { display: block; width: 16px; height: 16px; }
+.dqw-rail-trigger:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.12)); color: var(--dsw-alias-label-primary, inherit); }
+.dqw-rail-trigger:active:not(:disabled), .dqw-rail-trigger[aria-expanded="true"] { background: var(--dsw-alias-interactive-bg-active, rgba(128,128,128,.18)); color: var(--dsw-alias-label-primary, inherit); }
+.dqw-rail-trigger:focus-visible { outline: 2px solid var(--dsw-alias-brand-primary, #5b8def); outline-offset: 2px; }
+[data-dsh-frame][data-sidebar-collapsed] [data-dsh-quota-watch-card] { display: flex; align-items: center; justify-content: center; width: 36px; margin: 0 0 12px; }
+[data-dsh-frame][data-sidebar-collapsed] [data-dsh-quota-watch-card] > .dqw-card { display: none; }
+[data-dsh-frame][data-sidebar-collapsed] [data-dsh-quota-watch-card] > .dqw-rail-trigger { display: inline-flex; }
 .dqw-pop { position: fixed; z-index: 2147483000; min-width: 166px; max-width: 320px; padding: 10px 12px; border: 1px solid var(--dsw-alias-border-secondary, rgba(128,128,128,.35)); border-radius: 10px; background: var(--dsw-alias-bg-elevated, var(--dsw-alias-bg-base, #1f1f1f)); background: color-mix(in srgb, var(--dsw-alias-bg-base, #1f1f1f) 86%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 8px 24px rgba(0,0,0,.25); color: var(--dsw-alias-label-primary, inherit); display: flex; flex-direction: column; gap: 8px; font: inherit; }
 @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .dqw-pop { background: var(--dsw-alias-bg-elevated, var(--dsw-alias-bg-base, #1f1f1f)); } }
 .dqw-pop[hidden] { display: none; }
 .dqw-pop *, .dqw-pop *::before, .dqw-pop *::after { box-sizing: border-box; }
+.dqw-pop-title { margin: 0; font-size: 11px; font-weight: 600; line-height: 16px; }
+.dqw-pop-back { align-self: flex-start; margin: 0; padding: 3px 5px; border: 0; border-radius: 6px; background: transparent; color: var(--dsw-alias-label-secondary, inherit); font: inherit; font-size: 10.5px; line-height: 14px; cursor: pointer; }
+.dqw-pop-back:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.12)); color: var(--dsw-alias-label-primary, inherit); }
+.dqw-overview-list { display: flex; flex-direction: column; gap: 2px; }
+.dqw-overview-row { display: flex; align-items: center; width: 100%; gap: 6px; margin: 0; padding: 5px 4px; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
+.dqw-overview-row:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.12)); }
+.dqw-overview-row:focus-visible { outline: 1px solid var(--dsw-alias-brand-primary, #5b8def); outline-offset: -1px; }
+.dqw-overview-error { display: flex; align-items: center; gap: 6px; padding: 5px 4px; }
 .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: 5px 8px; }
 .dqw-big .dqw-big-value { font-size: 15px; font-weight: 650; line-height: 19px; font-variant-numeric: tabular-nums; }
@@ -218,6 +240,32 @@ function text(doc, tag, className, value) {
   node.textContent = String(value ?? "");
   return node;
 }
+function quotaIcon(doc) {
+  const namespace = "http://www.w3.org/2000/svg";
+  const svg = doc.createElementNS(namespace, "svg");
+  svg.setAttribute("viewBox", "0 0 24 24");
+  svg.setAttribute("width", "16");
+  svg.setAttribute("height", "16");
+  svg.setAttribute("fill", "none");
+  svg.setAttribute("stroke", "currentColor");
+  svg.setAttribute("stroke-width", "1.7");
+  svg.setAttribute("stroke-linecap", "round");
+  svg.setAttribute("stroke-linejoin", "round");
+  svg.setAttribute("aria-hidden", "true");
+  svg.setAttribute("focusable", "false");
+  const arc = doc.createElementNS(namespace, "path");
+  arc.setAttribute("d", "M4 17a8 8 0 0 1 16 0");
+  const needle = doc.createElementNS(namespace, "path");
+  needle.setAttribute("d", "m12 17 3.2-5.2");
+  const hub = doc.createElementNS(namespace, "circle");
+  hub.setAttribute("cx", "12");
+  hub.setAttribute("cy", "17");
+  hub.setAttribute("r", "1");
+  hub.setAttribute("fill", "currentColor");
+  hub.setAttribute("stroke", "none");
+  svg.append(arc, needle, hub);
+  return svg;
+}
 function kvRow(doc, label, value) {
   const row = doc.createElement("div");
   row.className = "dqw-kv";
@@ -289,15 +337,26 @@ function mountQuotaCard({
   const card = doc.createElement("section");
   card.className = "dqw-card";
   card.setAttribute("aria-label", copy.title);
+  const railTrigger = doc.createElement("button");
+  railTrigger.type = "button";
+  railTrigger.className = "dqw-rail-trigger";
+  railTrigger.title = copy.title;
+  railTrigger.setAttribute("aria-label", copy.title);
+  railTrigger.setAttribute("aria-haspopup", "dialog");
+  railTrigger.setAttribute("aria-controls", "dqw-quota-watch-pop");
+  railTrigger.setAttribute("aria-expanded", "false");
+  railTrigger.append(quotaIcon(doc));
   const body = doc.createElement("div");
   body.className = "dqw-body";
   const lastUpdated = text(doc, "p", "dqw-meta", copy.loading);
   lastUpdated.dataset.role = "updated";
   body.append(lastUpdated);
   card.append(body);
-  container.append(style, card);
+  container.append(style, card, railTrigger);
   const pop = doc.createElement("div");
   pop.className = "dqw-pop";
+  pop.id = "dqw-quota-watch-pop";
+  pop.setAttribute("role", "dialog");
   pop.dataset.dshQuotaWatchPop = "";
   pop.hidden = true;
   doc.body.append(pop);
@@ -307,6 +366,7 @@ function mountQuotaCard({
   let disposed = false;
   let queuedPlace = false;
   let openKey;
+  let popOrigin = "row";
   const fillClass = (percent) => percent > 95 ? "dqw-bar-fill danger" : percent > 80 ? "dqw-bar-fill warn" : "dqw-bar-fill";
   const renderProvider = (key, model) => {
     if (model === null) return null;
@@ -353,8 +413,73 @@ function mountQuotaCard({
     row.append(text(doc, "span", "dqw-chev", openKey === key ? "\u25BE" : "\u25B8"));
     return [row];
   };
-  function renderDetail(detail, key, provider) {
+  const renderOverviewProvider = (key, model) => {
+    if (model === null) return null;
+    const label = text(doc, "span", "dqw-label", model.label);
+    if (model.kind === "error") {
+      const row2 = doc.createElement("div");
+      row2.className = "dqw-overview-error";
+      row2.append(label, text(doc, "span", "dqw-errtext", model.error ? `${copy.failed}: ${model.error}` : copy.failed));
+      return row2;
+    }
+    const row = doc.createElement("button");
+    row.type = "button";
+    row.className = "dqw-overview-row";
+    row.dataset.dshQuotaWatchPopProvider = key;
+    row.setAttribute("aria-expanded", "false");
+    row.setAttribute("aria-label", `${model.label} \xB7 ${typeof model.percent === "number" ? formatPercent(model.percent, locale) : "\u2014"} \xB7 ${copy.openDetails}`);
+    row.append(label);
+    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"));
+    row.append(text(doc, "span", "dqw-chev", "\u25B8"));
+    return row;
+  };
+  const renderOverview = () => {
+    pop.replaceChildren(text(doc, "p", "dqw-pop-title", copy.title));
+    const providers = snapshot?.providers ?? [];
+    const glm = providers.find((provider) => provider?.key === "glm");
+    const copilot = providers.find((provider) => provider?.key === "copilot");
+    const rows = [
+      renderOverviewProvider("glm", glmRowModel(glm)),
+      renderOverviewProvider("copilot", copilotRowModel(copilot))
+    ].filter(Boolean);
+    if (rows.length === 0) {
+      pop.append(text(doc, "p", "dqw-muted", lastUpdated.textContent || copy.loading));
+      return;
+    }
+    const list = doc.createElement("div");
+    list.className = "dqw-overview-list";
+    list.append(...rows);
+    pop.append(list);
+  };
+  function renderDetail(detail, key, provider, fromRail = false) {
     detail.replaceChildren();
+    if (fromRail) {
+      const back = doc.createElement("button");
+      back.type = "button";
+      back.className = "dqw-pop-back";
+      back.dataset.action = "back-to-overview";
+      back.setAttribute("aria-label", copy.backToOverview);
+      back.textContent = copy.backToOverview;
+      detail.append(back, text(doc, "p", "dqw-pop-title", copy.providerNames[key]));
+    }
     if (provider?.status === "stale") {
       detail.append(text(doc, "p", "dqw-error", `${copy.stale}${provider.error ? `: ${provider.error}` : ""}`));
     }
@@ -410,7 +535,7 @@ function mountQuotaCard({
         wins.append(text(doc, "span", "dqw-win-mid", "\xB7"));
         wins.append(text(doc, "span", "dqw-win-used", copy.windowUsed));
         wins.append(text(doc, "span", "dqw-win-val", percent !== void 0 ? formatPercent(percent, locale) : "\u2014"));
-        wins.append(text(doc, "span", "dqw-kv-sub", reset ? `\uFF08${copy.reset}: ${reset}\uFF09` : ""));
+        wins.append(text(doc, "span", "dqw-kv-sub", reset ? `\uFF08 ${copy.reset}: ${reset} \uFF09` : ""));
       }
       detail.append(wins);
       if (Array.isArray(usage?.models) && usage.models.length > 0) {
@@ -451,9 +576,9 @@ function mountQuotaCard({
   }
   const positionPop = () => {
     if (pop.hidden || openKey === void 0) return;
-    const row = body.querySelector(`[data-dsh-quota-watch-row="${openKey}"]`);
-    if (!row) return;
-    const rect = row.getBoundingClientRect();
+    const anchor = popOrigin === "rail" ? railTrigger : body.querySelector(`[data-dsh-quota-watch-row="${openKey}"]`);
+    if (!anchor) return;
+    const rect = anchor.getBoundingClientRect();
     const viewWidth = win.innerWidth ?? 1024;
     const viewHeight = win.innerHeight ?? 768;
     const width = pop.offsetWidth || 240;
@@ -467,24 +592,35 @@ function mountQuotaCard({
     pop.style.top = `${Math.round(top)}px`;
   };
   const syncPop = () => {
+    const fromRail = popOrigin === "rail" && openKey !== void 0 && !disposed;
+    railTrigger.setAttribute("aria-expanded", String(fromRail));
     if (openKey === void 0 || disposed) {
-      if (!pop.hidden) {
-        pop.hidden = true;
-        pop.replaceChildren();
-        delete pop.dataset.dshQuotaWatchDetail;
-      }
+      pop.hidden = true;
+      pop.replaceChildren();
+      delete pop.dataset.dshQuotaWatchDetail;
+      delete pop.dataset.dshQuotaWatchOverview;
+      return;
+    }
+    if (openKey === "overview") {
+      renderOverview();
+      delete pop.dataset.dshQuotaWatchDetail;
+      pop.dataset.dshQuotaWatchOverview = "";
+      pop.setAttribute("aria-label", copy.title);
+      pop.hidden = false;
+      positionPop();
       return;
     }
     const provider = (snapshot?.providers ?? []).find((item) => item?.key === openKey);
     const row = body.querySelector(`[data-dsh-quota-watch-row="${openKey}"]`);
-    if (!provider || !row || !row.hasAttribute("data-expandable")) {
+    if (!provider || !fromRail && (!row || !row.hasAttribute("data-expandable"))) {
       openKey = void 0;
       syncPop();
       return;
     }
-    renderDetail(pop, openKey, provider);
+    renderDetail(pop, openKey, provider, fromRail);
     pop.dataset.dshQuotaWatchDetail = openKey;
-    pop.setAttribute("aria-label", openKey === "glm" ? "GLM" : "Copilot");
+    delete pop.dataset.dshQuotaWatchOverview;
+    pop.setAttribute("aria-label", fromRail ? `${copy.providerNames[openKey]} \xB7 ${copy.title}` : copy.providerNames[openKey]);
     pop.hidden = false;
     positionPop();
   };
@@ -542,8 +678,27 @@ function mountQuotaCard({
       if (!disposed) place();
     });
   };
-  const observer = new win.MutationObserver(schedulePlace);
-  observer.observe(doc.body, { childList: true, subtree: true });
+  let sidebarCollapsed = Boolean(doc.querySelector("[data-dsh-frame][data-sidebar-collapsed]"));
+  const syncSidebarMode = () => {
+    const nextCollapsed = Boolean(doc.querySelector("[data-dsh-frame][data-sidebar-collapsed]"));
+    if (nextCollapsed === sidebarCollapsed) return;
+    sidebarCollapsed = nextCollapsed;
+    if (openKey !== void 0) {
+      openKey = void 0;
+      popOrigin = "row";
+      syncPop();
+    }
+  };
+  const observer = new win.MutationObserver(() => {
+    syncSidebarMode();
+    schedulePlace();
+  });
+  observer.observe(doc.body, {
+    childList: true,
+    subtree: true,
+    attributes: true,
+    attributeFilter: ["data-sidebar-collapsed"]
+  });
   place();
   const startPolling = () => {
     if (timer !== void 0 || doc.visibilityState === "hidden" || disposed) return;
@@ -561,9 +716,34 @@ function mountQuotaCard({
     else startPolling();
   };
   const toggleRow = (key) => {
+    popOrigin = "row";
     openKey = openKey === key ? void 0 : key;
     renderAll();
   };
+  const onRailClick = () => {
+    if (popOrigin === "rail" && openKey !== void 0) {
+      openKey = void 0;
+      popOrigin = "row";
+    } else {
+      openKey = "overview";
+      popOrigin = "rail";
+    }
+    syncPop();
+  };
+  const onPopClick = (event) => {
+    if (event.target?.closest?.('[data-action="back-to-overview"]')) {
+      openKey = "overview";
+      popOrigin = "rail";
+      syncPop();
+      return;
+    }
+    const provider = event.target?.closest?.("[data-dsh-quota-watch-pop-provider]");
+    if (provider) {
+      openKey = provider.dataset.dshQuotaWatchPopProvider;
+      popOrigin = "rail";
+      syncPop();
+    }
+  };
   const onBodyClick = (event) => {
     if (event.target?.closest?.('[data-action="refresh"]')) {
       void poll(true);
@@ -585,6 +765,7 @@ function mountQuotaCard({
     const target = event.target;
     if (pop.contains(target) || target?.closest?.("[data-dsh-quota-watch-row]") || target?.closest?.(CARD_SELECTOR)) return;
     openKey = void 0;
+    popOrigin = "row";
     renderAll();
   };
   const onDocScroll = () => {
@@ -596,11 +777,14 @@ function mountQuotaCard({
   const onDocKeydown = (event) => {
     if (event.key === "Escape" && openKey !== void 0) {
       openKey = void 0;
+      popOrigin = "row";
       renderAll();
     }
   };
   body.addEventListener("click", onBodyClick);
   body.addEventListener("keydown", onBodyKeydown);
+  railTrigger.addEventListener("click", onRailClick);
+  pop.addEventListener("click", onPopClick);
   doc.addEventListener("visibilitychange", onVisibilityChange);
   doc.addEventListener("pointerdown", onDocPointerDown, true);
   doc.addEventListener("scroll", onDocScroll, true);
@@ -618,6 +802,8 @@ function mountQuotaCard({
     win.removeEventListener("resize", onWinResize);
     body.removeEventListener("click", onBodyClick);
     body.removeEventListener("keydown", onBodyKeydown);
+    railTrigger.removeEventListener("click", onRailClick);
+    pop.removeEventListener("click", onPopClick);
     container.remove();
     pop.remove();
   };

package/package.json

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

package/src/client.mjs

@@ -10,6 +10,9 @@ const FETCH_TIMEOUT_MS = 15_000
 const COPY = {
   zh: {
     title: '套餐监控',
+    openDetails: '查看详情',
+    backToOverview: '返回额度概览',
+    providerNames: { glm: 'GLM', copilot: 'Copilot' },
     refresh: '刷新',
     loading: '读取中',
     failed: '查询失败',
@@ -24,7 +27,7 @@ const COPY = {
     todayCalls: '调用次数',
     weekUnlimited: '每周额度',
     unlimited: '♾️',
-    unlimitedNote: '（无限）',
+    unlimitedNote: '（ 无限 ）',
     windows: {
       '5h': '5 小时额度',
       week: '每周额度',
@@ -34,6 +37,9 @@ const COPY = {
   },
   en: {
     title: 'Quota Watch',
+    openDetails: 'View details',
+    backToOverview: 'Back to quota overview',
+    providerNames: { glm: 'GLM', copilot: 'Copilot' },
     refresh: 'Refresh',
     loading: 'Loading',
     failed: 'Query failed',
@@ -48,7 +54,7 @@ const COPY = {
     todayCalls: 'Calls',
     weekUnlimited: 'Weekly quota',
     unlimited: '♾️',
-    unlimitedNote: ' (unlimited)',
+    unlimitedNote: ' ( unlimited )',
     windows: {
       '5h': '5-hour quota',
       week: 'Weekly quota',
@@ -81,10 +87,26 @@ const STYLE_TEXT = `
 .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-rail-trigger { display: none; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--dsw-alias-label-primary, inherit); cursor: pointer; transition: background-color .12s, color .12s; }
+.dqw-rail-trigger svg { display: block; width: 16px; height: 16px; }
+.dqw-rail-trigger:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.12)); color: var(--dsw-alias-label-primary, inherit); }
+.dqw-rail-trigger:active:not(:disabled), .dqw-rail-trigger[aria-expanded="true"] { background: var(--dsw-alias-interactive-bg-active, rgba(128,128,128,.18)); color: var(--dsw-alias-label-primary, inherit); }
+.dqw-rail-trigger:focus-visible { outline: 2px solid var(--dsw-alias-brand-primary, #5b8def); outline-offset: 2px; }
+[data-dsh-frame][data-sidebar-collapsed] [data-dsh-quota-watch-card] { display: flex; align-items: center; justify-content: center; width: 36px; margin: 0 0 12px; }
+[data-dsh-frame][data-sidebar-collapsed] [data-dsh-quota-watch-card] > .dqw-card { display: none; }
+[data-dsh-frame][data-sidebar-collapsed] [data-dsh-quota-watch-card] > .dqw-rail-trigger { display: inline-flex; }
 .dqw-pop { position: fixed; z-index: 2147483000; min-width: 166px; max-width: 320px; padding: 10px 12px; border: 1px solid var(--dsw-alias-border-secondary, rgba(128,128,128,.35)); border-radius: 10px; background: var(--dsw-alias-bg-elevated, var(--dsw-alias-bg-base, #1f1f1f)); background: color-mix(in srgb, var(--dsw-alias-bg-base, #1f1f1f) 86%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 8px 24px rgba(0,0,0,.25); color: var(--dsw-alias-label-primary, inherit); display: flex; flex-direction: column; gap: 8px; font: inherit; }
 @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .dqw-pop { background: var(--dsw-alias-bg-elevated, var(--dsw-alias-bg-base, #1f1f1f)); } }
 .dqw-pop[hidden] { display: none; }
 .dqw-pop *, .dqw-pop *::before, .dqw-pop *::after { box-sizing: border-box; }
+.dqw-pop-title { margin: 0; font-size: 11px; font-weight: 600; line-height: 16px; }
+.dqw-pop-back { align-self: flex-start; margin: 0; padding: 3px 5px; border: 0; border-radius: 6px; background: transparent; color: var(--dsw-alias-label-secondary, inherit); font: inherit; font-size: 10.5px; line-height: 14px; cursor: pointer; }
+.dqw-pop-back:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.12)); color: var(--dsw-alias-label-primary, inherit); }
+.dqw-overview-list { display: flex; flex-direction: column; gap: 2px; }
+.dqw-overview-row { display: flex; align-items: center; width: 100%; gap: 6px; margin: 0; padding: 5px 4px; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
+.dqw-overview-row:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.12)); }
+.dqw-overview-row:focus-visible { outline: 1px solid var(--dsw-alias-brand-primary, #5b8def); outline-offset: -1px; }
+.dqw-overview-error { display: flex; align-items: center; gap: 6px; padding: 5px 4px; }
 .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: 5px 8px; }
 .dqw-big .dqw-big-value { font-size: 15px; font-weight: 650; line-height: 19px; font-variant-numeric: tabular-nums; }
@@ -147,6 +169,33 @@ function text(doc, tag, className, value) {
   return node
 }
 
+function quotaIcon(doc) {
+  const namespace = 'http://www.w3.org/2000/svg'
+  const svg = doc.createElementNS(namespace, 'svg')
+  svg.setAttribute('viewBox', '0 0 24 24')
+  svg.setAttribute('width', '16')
+  svg.setAttribute('height', '16')
+  svg.setAttribute('fill', 'none')
+  svg.setAttribute('stroke', 'currentColor')
+  svg.setAttribute('stroke-width', '1.7')
+  svg.setAttribute('stroke-linecap', 'round')
+  svg.setAttribute('stroke-linejoin', 'round')
+  svg.setAttribute('aria-hidden', 'true')
+  svg.setAttribute('focusable', 'false')
+  const arc = doc.createElementNS(namespace, 'path')
+  arc.setAttribute('d', 'M4 17a8 8 0 0 1 16 0')
+  const needle = doc.createElementNS(namespace, 'path')
+  needle.setAttribute('d', 'm12 17 3.2-5.2')
+  const hub = doc.createElementNS(namespace, 'circle')
+  hub.setAttribute('cx', '12')
+  hub.setAttribute('cy', '17')
+  hub.setAttribute('r', '1')
+  hub.setAttribute('fill', 'currentColor')
+  hub.setAttribute('stroke', 'none')
+  svg.append(arc, needle, hub)
+  return svg
+}
+
 /** Aligned label/value line used by the simplified Copilot detail. */
 function kvRow(doc, label, value) {
   const row = doc.createElement('div')
@@ -228,6 +277,15 @@ export function mountQuotaCard({
   const card = doc.createElement('section')
   card.className = 'dqw-card'
   card.setAttribute('aria-label', copy.title)
+  const railTrigger = doc.createElement('button')
+  railTrigger.type = 'button'
+  railTrigger.className = 'dqw-rail-trigger'
+  railTrigger.title = copy.title
+  railTrigger.setAttribute('aria-label', copy.title)
+  railTrigger.setAttribute('aria-haspopup', 'dialog')
+  railTrigger.setAttribute('aria-controls', 'dqw-quota-watch-pop')
+  railTrigger.setAttribute('aria-expanded', 'false')
+  railTrigger.append(quotaIcon(doc))
   const body = doc.createElement('div')
   body.className = 'dqw-body'
   // Status line doubles as the transport-error surface; hidden once data renders.
@@ -235,10 +293,12 @@ export function mountQuotaCard({
   lastUpdated.dataset.role = 'updated'
   body.append(lastUpdated)
   card.append(body)
-  container.append(style, card)
-  // Details open in a fixed-position panel to the right of the rows.
+  container.append(style, card, railTrigger)
+  // Details and collapsed-rail summaries open in a viewport-level panel.
   const pop = doc.createElement('div')
   pop.className = 'dqw-pop'
+  pop.id = 'dqw-quota-watch-pop'
+  pop.setAttribute('role', 'dialog')
   pop.dataset.dshQuotaWatchPop = ''
   pop.hidden = true
   doc.body.append(pop)
@@ -248,6 +308,7 @@ export function mountQuotaCard({
   let disposed = false
   let queuedPlace = false
   let openKey
+  let popOrigin = 'row'
 
   const fillClass = (percent) => (percent > 95 ? 'dqw-bar-fill danger' : percent > 80 ? 'dqw-bar-fill warn' : 'dqw-bar-fill')
 
@@ -299,8 +360,75 @@ export function mountQuotaCard({
     return [row]
   }
 
-  function renderDetail(detail, key, provider) {
+  const renderOverviewProvider = (key, model) => {
+    if (model === null) return null
+    const label = text(doc, 'span', 'dqw-label', model.label)
+    if (model.kind === 'error') {
+      const row = doc.createElement('div')
+      row.className = 'dqw-overview-error'
+      row.append(label, text(doc, 'span', 'dqw-errtext', model.error ? `${copy.failed}: ${model.error}` : copy.failed))
+      return row
+    }
+    const row = doc.createElement('button')
+    row.type = 'button'
+    row.className = 'dqw-overview-row'
+    row.dataset.dshQuotaWatchPopProvider = key
+    row.setAttribute('aria-expanded', 'false')
+    row.setAttribute('aria-label', `${model.label} · ${typeof model.percent === 'number' ? formatPercent(model.percent, locale) : '—'} · ${copy.openDetails}`)
+    row.append(label)
+    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) : '—'))
+    row.append(text(doc, 'span', 'dqw-chev', '▸'))
+    return row
+  }
+
+  const renderOverview = () => {
+    pop.replaceChildren(text(doc, 'p', 'dqw-pop-title', copy.title))
+    const providers = snapshot?.providers ?? []
+    const glm = providers.find((provider) => provider?.key === 'glm')
+    const copilot = providers.find((provider) => provider?.key === 'copilot')
+    const rows = [
+      renderOverviewProvider('glm', glmRowModel(glm)),
+      renderOverviewProvider('copilot', copilotRowModel(copilot)),
+    ].filter(Boolean)
+    if (rows.length === 0) {
+      pop.append(text(doc, 'p', 'dqw-muted', lastUpdated.textContent || copy.loading))
+      return
+    }
+    const list = doc.createElement('div')
+    list.className = 'dqw-overview-list'
+    list.append(...rows)
+    pop.append(list)
+  }
+
+  function renderDetail(detail, key, provider, fromRail = false) {
     detail.replaceChildren()
+    if (fromRail) {
+      const back = doc.createElement('button')
+      back.type = 'button'
+      back.className = 'dqw-pop-back'
+      back.dataset.action = 'back-to-overview'
+      back.setAttribute('aria-label', copy.backToOverview)
+      back.textContent = copy.backToOverview
+      detail.append(back, text(doc, 'p', 'dqw-pop-title', copy.providerNames[key]))
+    }
     if (provider?.status === 'stale') {
       detail.append(text(doc, 'p', 'dqw-error', `${copy.stale}${provider.error ? `: ${provider.error}` : ''}`))
     }
@@ -360,7 +488,7 @@ export function mountQuotaCard({
         wins.append(text(doc, 'span', 'dqw-win-mid', '·'))
         wins.append(text(doc, 'span', 'dqw-win-used', copy.windowUsed))
         wins.append(text(doc, 'span', 'dqw-win-val', percent !== undefined ? formatPercent(percent, locale) : '—'))
-        wins.append(text(doc, 'span', 'dqw-kv-sub', reset ? `（${copy.reset}: ${reset}）` : ''))
+        wins.append(text(doc, 'span', 'dqw-kv-sub', reset ? `（ ${copy.reset}: ${reset} ）` : ''))
       }
       detail.append(wins)
       if (Array.isArray(usage?.models) && usage.models.length > 0) {
@@ -401,12 +529,14 @@ export function mountQuotaCard({
     }
   }
 
-  /** Keep the detail panel anchored to the expanded row's right edge. */
+  /** Anchor the popover to the rail icon or the expanded provider row. */
   const positionPop = () => {
     if (pop.hidden || openKey === undefined) return
-    const row = body.querySelector(`[data-dsh-quota-watch-row="${openKey}"]`)
-    if (!row) return
-    const rect = row.getBoundingClientRect()
+    const anchor = popOrigin === 'rail'
+      ? railTrigger
+      : body.querySelector(`[data-dsh-quota-watch-row="${openKey}"]`)
+    if (!anchor) return
+    const rect = anchor.getBoundingClientRect()
     const viewWidth = win.innerWidth ?? 1024
     const viewHeight = win.innerHeight ?? 768
     const width = pop.offsetWidth || 240
@@ -421,24 +551,35 @@ export function mountQuotaCard({
   }
 
   const syncPop = () => {
+    const fromRail = popOrigin === 'rail' && openKey !== undefined && !disposed
+    railTrigger.setAttribute('aria-expanded', String(fromRail))
     if (openKey === undefined || disposed) {
-      if (!pop.hidden) {
-        pop.hidden = true
-        pop.replaceChildren()
-        delete pop.dataset.dshQuotaWatchDetail
-      }
+      pop.hidden = true
+      pop.replaceChildren()
+      delete pop.dataset.dshQuotaWatchDetail
+      delete pop.dataset.dshQuotaWatchOverview
+      return
+    }
+    if (openKey === 'overview') {
+      renderOverview()
+      delete pop.dataset.dshQuotaWatchDetail
+      pop.dataset.dshQuotaWatchOverview = ''
+      pop.setAttribute('aria-label', copy.title)
+      pop.hidden = false
+      positionPop()
       return
     }
     const provider = (snapshot?.providers ?? []).find((item) => item?.key === openKey)
     const row = body.querySelector(`[data-dsh-quota-watch-row="${openKey}"]`)
-    if (!provider || !row || !row.hasAttribute('data-expandable')) {
+    if (!provider || (!fromRail && (!row || !row.hasAttribute('data-expandable')))) {
       openKey = undefined
       syncPop()
       return
     }
-    renderDetail(pop, openKey, provider)
+    renderDetail(pop, openKey, provider, fromRail)
     pop.dataset.dshQuotaWatchDetail = openKey
-    pop.setAttribute('aria-label', openKey === 'glm' ? 'GLM' : 'Copilot')
+    delete pop.dataset.dshQuotaWatchOverview
+    pop.setAttribute('aria-label', fromRail ? `${copy.providerNames[openKey]} · ${copy.title}` : copy.providerNames[openKey])
     pop.hidden = false
     positionPop()
   }
@@ -506,8 +647,27 @@ export function mountQuotaCard({
     })
   }
 
-  const observer = new win.MutationObserver(schedulePlace)
-  observer.observe(doc.body, { childList: true, subtree: true })
+  let sidebarCollapsed = Boolean(doc.querySelector('[data-dsh-frame][data-sidebar-collapsed]'))
+  const syncSidebarMode = () => {
+    const nextCollapsed = Boolean(doc.querySelector('[data-dsh-frame][data-sidebar-collapsed]'))
+    if (nextCollapsed === sidebarCollapsed) return
+    sidebarCollapsed = nextCollapsed
+    if (openKey !== undefined) {
+      openKey = undefined
+      popOrigin = 'row'
+      syncPop()
+    }
+  }
+  const observer = new win.MutationObserver(() => {
+    syncSidebarMode()
+    schedulePlace()
+  })
+  observer.observe(doc.body, {
+    childList: true,
+    subtree: true,
+    attributes: true,
+    attributeFilter: ['data-sidebar-collapsed'],
+  })
   place()
 
   const startPolling = () => {
@@ -524,9 +684,34 @@ export function mountQuotaCard({
     else startPolling()
   }
   const toggleRow = (key) => {
+    popOrigin = 'row'
     openKey = openKey === key ? undefined : key
     renderAll()
   }
+  const onRailClick = () => {
+    if (popOrigin === 'rail' && openKey !== undefined) {
+      openKey = undefined
+      popOrigin = 'row'
+    } else {
+      openKey = 'overview'
+      popOrigin = 'rail'
+    }
+    syncPop()
+  }
+  const onPopClick = (event) => {
+    if (event.target?.closest?.('[data-action="back-to-overview"]')) {
+      openKey = 'overview'
+      popOrigin = 'rail'
+      syncPop()
+      return
+    }
+    const provider = event.target?.closest?.('[data-dsh-quota-watch-pop-provider]')
+    if (provider) {
+      openKey = provider.dataset.dshQuotaWatchPopProvider
+      popOrigin = 'rail'
+      syncPop()
+    }
+  }
   const onBodyClick = (event) => {
     if (event.target?.closest?.('[data-action="refresh"]')) {
       void poll(true)
@@ -548,6 +733,7 @@ export function mountQuotaCard({
     const target = event.target
     if (pop.contains(target) || target?.closest?.('[data-dsh-quota-watch-row]') || target?.closest?.(CARD_SELECTOR)) return
     openKey = undefined
+    popOrigin = 'row'
     renderAll()
   }
   const onDocScroll = () => { positionPop() }
@@ -555,11 +741,14 @@ export function mountQuotaCard({
   const onDocKeydown = (event) => {
     if (event.key === 'Escape' && openKey !== undefined) {
       openKey = undefined
+      popOrigin = 'row'
       renderAll()
     }
   }
   body.addEventListener('click', onBodyClick)
   body.addEventListener('keydown', onBodyKeydown)
+  railTrigger.addEventListener('click', onRailClick)
+  pop.addEventListener('click', onPopClick)
   doc.addEventListener('visibilitychange', onVisibilityChange)
   doc.addEventListener('pointerdown', onDocPointerDown, true)
   doc.addEventListener('scroll', onDocScroll, true)
@@ -578,6 +767,8 @@ export function mountQuotaCard({
     win.removeEventListener('resize', onWinResize)
     body.removeEventListener('click', onBodyClick)
     body.removeEventListener('keydown', onBodyKeydown)
+    railTrigger.removeEventListener('click', onRailClick)
+    pop.removeEventListener('click', onPopClick)
     container.remove()
     pop.remove()
   }