@iasiv5/dsh-quota-watch 0.0.3 → 0.0.10

package/README.md

@@ -6,12 +6,13 @@
 
 ## 功能
 
-- 在侧栏 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` 绝不用于推算余额，缺失有效百分比时该行不渲染。
+- 在侧栏底部区块的最顶部（框架渲染的插件入口与设置行之上）显示一张常显摘要卡（无标题、无刷新按钮）：GLM 与 GitHub Copilot 各占一行，统一显示**已用百分比**（Copilot 为 `100 − percent_remaining` 的单值反转），已用超过 80% 进度条转橙、超过 95% 转红；点击行首的 GLM / Copilot 名称立即触发一次宿主探测（等同原刷新按钮），点击行其余区域展开详情。
+- GLM 摘要行固定显示 5 小时窗口已用百分比，行尾等宽小字为当日 token 用量；点击行在侧栏右侧弹出详情面板（半透明毛玻璃底，深浅主题均可读，不改变卡片高度）：今日 Tokens / 调用次数双大数字、窗口区为五列对齐网格（名称 ｜ `·` ｜ `已用`/♾️ ｜ 百分比 ｜ 同字号弱色「（重置: …）」，♾️ 与 `已用` 同列左对齐，弱色括注整列左对齐）、虚线分隔的分模型用量行（名称左对齐、token 数右对齐）。窗口按 MCP（月）→ 5 小时 → 每月 → 每周固定排序；接口未下发周窗口时显示「每周额度 · ♾️（无限）」占位，真实周窗口数据一旦下发即自动替换占位。同一时间至多展开一个详情；点击面板外或按 Esc 关闭。
+- GitHub Copilot 摘要行仅在 GitHub 返回有限、有效的 `remaining` 且带 `percent_remaining` 时显示；行尾等宽小字显示本期 credits 消耗的紧凑值。点击在侧栏右侧弹出精简详情（标签左对齐、数值右对齐的三行）：可用额度、本期已用（credits 消耗 + 弱化的已用百分比）、重置时间。`credits_used` 绝不用于推算余额，缺失有效百分比时该行不渲染。
+- 卡片顶部不显示全局更新时间；仅在等待首个快照或刷新失败时显示一行状态文字（读取中 / 刷新失败 / 查询失败）。
 - 今日 tokens / 调用次数按宿主本地时区的自然日（`00:00:00 → 当前时刻`）查询；不带滚动窗口语义。
 - 凭据缺失的 provider 不渲染摘要行（两者皆缺时整卡隐藏）；探测失败时保留最后一次成功数据并在行上加 ⚠ 过期标记。
-- 宿主默认每 60 秒探测（窗口 + 用量 + Copilot）；profile patch 可将 `pollIntervalSec` 设置在 30–3600 秒。浏览器页签可见时每 30 秒刷新视图，隐藏时暂停；刷新按钮可立即请求宿主探测。
+- 宿主默认每 60 秒探测（窗口 + 用量 + Copilot）；profile patch 可将 `pollIntervalSec` 设置在 30–3600 秒。浏览器页签可见时每 30 秒刷新视图，隐藏时暂停；点击行首 provider 名称可立即请求宿主探测。
 
 ## 兼容与配置
 

package/lib/client.js

@@ -91,80 +91,97 @@ var COPY = {
     title: "\u5957\u9910\u76D1\u63A7",
     refresh: "\u5237\u65B0",
     loading: "\u8BFB\u53D6\u4E2D",
-    updated: "\u66F4\u65B0",
     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",
     reset: "\u91CD\u7F6E",
-    todayTokens: "\u4ECA\u65E5 tokens",
-    todayCalls: "\u4ECA\u65E5\u8C03\u7528",
+    resetTime: "\u91CD\u7F6E\u65F6\u95F4",
+    windowUsed: "\u5DF2\u7528",
+    todayTokens: "\u4ECA\u65E5 Tokens",
+    todayCalls: "\u8C03\u7528\u6B21\u6570",
+    weekUnlimited: "\u6BCF\u5468\u989D\u5EA6",
+    unlimited: "\u267E\uFE0F",
+    unlimitedNote: "\uFF08\u65E0\u9650\uFF09",
     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"
+      "5h": "5 \u5C0F\u65F6\u989D\u5EA6",
+      week: "\u6BCF\u5468\u989D\u5EA6",
+      month: "\u6BCF\u6708\u989D\u5EA6",
+      mcp: "MCP\uFF08\u6708\uFF09"
     }
   },
   en: {
     title: "Quota Watch",
     refresh: "Refresh",
     loading: "Loading",
-    updated: "Updated",
     failed: "Query failed",
     stale: "Data may be stale",
     requestFailed: "Refresh failed; showing last successful data",
     available: "Available credits",
     used: "Used this cycle",
     reset: "Resets",
+    resetTime: "Reset time",
+    windowUsed: "used",
     todayTokens: "Today tokens",
-    todayCalls: "Calls today",
+    todayCalls: "Calls",
+    weekUnlimited: "Weekly quota",
+    unlimited: "\u267E\uFE0F",
+    unlimitedNote: " (unlimited)",
     windows: {
-      "5h": "5-hour window \xB7 used",
-      week: "Weekly window \xB7 used",
-      month: "Monthly window \xB7 used",
-      mcp: "MCP (month) \xB7 used"
+      "5h": "5-hour quota",
+      week: "Weekly quota",
+      month: "Monthly quota",
+      mcp: "MCP (month)"
     }
   }
 };
 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: 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-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: 5px 8px; display: flex; flex-direction: column; gap: 2px; }
 .dqw-meta { margin: 0; font-size: 10px; line-height: 14px; opacity: .7; }
 .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 { display: flex; align-items: center; gap: 6px; padding: 3px 6px; margin: 0 -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-label[data-action="refresh"] { cursor: pointer; border-radius: 4px; }
+.dqw-label[data-action="refresh"]:hover { opacity: .75; }
 .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-extra { font-size: 10px; line-height: 14px; opacity: .72; font-variant-numeric: tabular-nums; flex: none; min-width: 34px; text-align: right; }
 .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-pop { position: fixed; z-index: 2147483000; min-width: 232px; 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-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 { 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; }
 .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-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-models { border-top: 1px dashed var(--dsw-alias-border-secondary, rgba(128,128,128,.25)); padding-top: 6px; display: flex; flex-direction: column; gap: 3px; }
+.dqw-model-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 10.5px; line-height: 15px; font-variant-numeric: tabular-nums; }
+.dqw-model-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .85; }
+.dqw-model-value { flex: none; font-weight: 600; }
+.dqw-kv { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 10.5px; line-height: 17px; font-variant-numeric: tabular-nums; }
+.dqw-kv-label { flex: none; opacity: .65; }
+.dqw-kv-value { min-width: 0; text-align: right; font-weight: 600; }
+.dqw-kv-sub { font-weight: 400; opacity: .55; }
+.dqw-wins { display: grid; grid-template-columns: max-content max-content max-content max-content 1fr; column-gap: 6px; row-gap: 3px; align-items: baseline; font-size: 10.5px; line-height: 17px; font-variant-numeric: tabular-nums; }
+.dqw-win-name { opacity: .65; }
+.dqw-win-mid { opacity: .65; white-space: nowrap; }
+.dqw-win-used { opacity: .65; white-space: nowrap; }
+.dqw-win-val { min-width: 0; font-weight: 600; }
 .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; }
 `;
 function localeFor(win) {
   return String(win?.navigator?.language ?? "zh").toLowerCase().startsWith("zh") ? "zh" : "en";
@@ -201,23 +218,10 @@ function text(doc, tag, className, value) {
   node.textContent = String(value ?? "");
   return node;
 }
-function progress(doc, label, percent, locale) {
+function kvRow(doc, label, value) {
   const row = doc.createElement("div");
-  row.className = "dqw-row";
-  const head = doc.createElement("div");
-  head.className = "dqw-row-head";
-  head.append(text(doc, "span", "", label), text(doc, "span", "", formatPercent(percent, locale)));
-  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, percent))));
-  const fill = doc.createElement("span");
-  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);
+  row.className = "dqw-kv";
+  row.append(text(doc, "span", "dqw-kv-label", label), text(doc, "span", "dqw-kv-value", value));
   return row;
 }
 function glmRowModel(provider) {
@@ -248,7 +252,8 @@ function copilotRowModel(provider) {
     label: "Copilot",
     percent: used,
     stale: provider.status === "stale",
-    error: provider.error
+    error: provider.error,
+    extra: typeof quota.creditsUsed === "number" && quota.creditsUsed >= 0 ? quota.creditsUsed : void 0
   };
 }
 function footArea(doc) {
@@ -284,22 +289,18 @@ function mountQuotaCard({
   const card = doc.createElement("section");
   card.className = "dqw-card";
   card.setAttribute("aria-label", copy.title);
-  const header = doc.createElement("header");
-  header.className = "dqw-head";
-  header.append(text(doc, "h3", "dqw-title", copy.title));
-  const refreshButton = text(doc, "button", "dqw-button", "\u21BB");
-  refreshButton.type = "button";
-  refreshButton.title = copy.refresh;
-  refreshButton.setAttribute("aria-label", copy.refresh);
-  refreshButton.dataset.action = "refresh";
-  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";
   body.append(lastUpdated);
-  card.append(header, body);
+  card.append(body);
   container.append(style, card);
+  const pop = doc.createElement("div");
+  pop.className = "dqw-pop";
+  pop.dataset.dshQuotaWatchPop = "";
+  pop.hidden = true;
+  doc.body.append(pop);
   let snapshot;
   let requestSequence = 0;
   let timer;
@@ -307,12 +308,15 @@ function mountQuotaCard({
   let queuedPlace = false;
   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) => {
+  const renderProvider = (key, model) => {
     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));
+    const label = text(doc, "span", "dqw-label", model.label);
+    label.dataset.action = "refresh";
+    label.title = `${model.label} \xB7 ${copy.refresh}`;
+    row.append(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));
@@ -347,11 +351,7 @@ function mountQuotaCard({
       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];
+    return [row];
   };
   function renderDetail(detail, key, provider) {
     detail.replaceChildren();
@@ -376,42 +376,124 @@ function mountQuotaCard({
       );
       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 raw = Array.isArray(provider?.plan?.windows) ? provider.plan.windows : [];
+      const order = { mcp: 0, "5h": 1, month: 2, week: 3 };
+      const sorted = [...raw].sort((a, b) => (order[a?.key] ?? 99) - (order[b?.key] ?? 99));
+      const items = [];
+      let weekPlaced = false;
+      for (const window of sorted) {
+        if (!weekPlaced && (order[window?.key] ?? 99) > order.week) {
+          items.push({ placeholder: true });
+          weekPlaced = true;
+        }
+        if (window?.key === "week") weekPlaced = true;
+        items.push({ window });
+      }
+      if (!weekPlaced) items.push({ placeholder: true });
+      const wins = doc.createElement("div");
+      wins.className = "dqw-wins";
+      for (const item of items) {
+        if (item.placeholder) {
+          wins.append(
+            text(doc, "span", "dqw-win-name", copy.weekUnlimited),
+            text(doc, "span", "dqw-win-mid", "\xB7"),
+            text(doc, "span", "dqw-win-used", copy.unlimited),
+            text(doc, "span", ""),
+            text(doc, "span", "dqw-kv-sub", copy.unlimitedNote)
+          );
+          continue;
         }
-        const reset2 = formatTime(window?.resetsAt, locale);
-        if (reset2) detail.append(text(doc, "p", "dqw-muted", `${copy.reset}: ${reset2}`));
+        const window = item.window;
+        const percent = typeof window?.percent === "number" && Number.isFinite(window.percent) ? window.percent : void 0;
+        const reset = formatTime(window?.resetsAt, locale);
+        wins.append(text(doc, "span", "dqw-win-name", copy.windows[window?.key] ?? window?.key));
+        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` : ""));
+      }
+      detail.append(wins);
+      if (Array.isArray(usage?.models) && usage.models.length > 0) {
+        const models = doc.createElement("div");
+        models.className = "dqw-models";
+        for (const model of usage.models) {
+          const row = doc.createElement("div");
+          row.className = "dqw-model-row";
+          row.append(
+            text(doc, "span", "dqw-model-name", model?.name ?? "\u2014"),
+            text(doc, "span", "dqw-model-value", formatCompact(model?.tokens, locale))
+          );
+          models.append(row);
+        }
+        detail.append(models);
       }
-      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)}`));
+      detail.append(kvRow(doc, 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)}`));
+        const row = doc.createElement("div");
+        row.className = "dqw-kv";
+        const value = doc.createElement("span");
+        value.className = "dqw-kv-value";
+        value.append(text(doc, "span", "", formatNumber(quota.creditsUsed, locale)));
+        if (used !== void 0) value.append(text(doc, "span", "dqw-kv-sub", ` \xB7 ${formatPercent(used, locale)}`));
+        row.append(text(doc, "span", "dqw-kv-label", copy.used), value);
+        detail.append(row);
       }
+      const reset = formatTime(quota?.resetsAt, locale);
+      if (reset) detail.append(kvRow(doc, copy.resetTime, reset));
     } 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 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 viewWidth = win.innerWidth ?? 1024;
+    const viewHeight = win.innerHeight ?? 768;
+    const width = pop.offsetWidth || 240;
+    const height = pop.offsetHeight || 160;
+    let left = rect.right + 8;
+    if (left + width > viewWidth - 8) left = rect.left - width - 8;
+    if (left + width > viewWidth - 8) left = viewWidth - width - 8;
+    left = Math.max(8, left);
+    const top = Math.min(Math.max(rect.top, 8), Math.max(8, viewHeight - height - 8));
+    pop.style.left = `${Math.round(left)}px`;
+    pop.style.top = `${Math.round(top)}px`;
+  };
+  const syncPop = () => {
+    if (openKey === void 0 || disposed) {
+      if (!pop.hidden) {
+        pop.hidden = true;
+        pop.replaceChildren();
+        delete pop.dataset.dshQuotaWatchDetail;
+      }
+      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")) {
+      openKey = void 0;
+      syncPop();
+      return;
+    }
+    renderDetail(pop, openKey, provider);
+    pop.dataset.dshQuotaWatchDetail = openKey;
+    pop.setAttribute("aria-label", openKey === "glm" ? "GLM" : "Copilot");
+    pop.hidden = false;
+    positionPop();
+  };
   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 glmParts = renderProvider("glm", glmRowModel(glm));
+    const copilotParts = renderProvider("copilot", copilotRowModel(copilot));
     const fragment = doc.createDocumentFragment();
     fragment.append(lastUpdated);
     if (glmParts) fragment.append(...glmParts);
@@ -419,37 +501,37 @@ function mountQuotaCard({
     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;
+    if (updated) {
+      lastUpdated.hidden = true;
+    } else {
+      lastUpdated.hidden = false;
+      lastUpdated.textContent = copy.loading;
+    }
+    syncPop();
   };
   const render = (next) => {
     snapshot = next;
     renderAll();
   };
   const showTransportError = () => {
-    if (snapshot) lastUpdated.textContent = copy.requestFailed;
-    else lastUpdated.textContent = copy.failed;
+    lastUpdated.hidden = false;
+    lastUpdated.textContent = snapshot ? copy.requestFailed : copy.failed;
   };
   const poll = async (force) => {
     if (disposed) return;
     const sequence = ++requestSequence;
-    refreshButton.disabled = force === true;
     try {
       const next = await fetchJson(fetchImpl, force ? CLIENT_ROUTES.refresh : CLIENT_ROUTES.overview, force ? "POST" : "GET");
       if (sequence === requestSequence && !disposed) render(next);
     } catch {
       if (sequence === requestSequence && !disposed) showTransportError();
-    } finally {
-      if (!disposed && sequence === requestSequence) refreshButton.disabled = false;
     }
   };
   const place = () => {
     const foot = footArea(doc);
     if (!foot) return;
-    const settings = foot.querySelector('[class*="settingsArea"]');
-    if (settings) {
-      if (container.parentElement !== foot || container.nextElementSibling !== settings) foot.insertBefore(container, settings);
-    } else if (container.parentElement !== foot || foot.lastElementChild !== container) {
-      foot.append(container);
+    if (container.parentElement !== foot || foot.firstElementChild !== container) {
+      foot.insertBefore(container, foot.firstChild);
     }
   };
   const schedulePlace = () => {
@@ -465,9 +547,9 @@ function mountQuotaCard({
   place();
   const startPolling = () => {
     if (timer !== void 0 || doc.visibilityState === "hidden" || disposed) return;
-    void poll(false);
+    void poll();
     timer = win.setInterval(() => {
-      void poll(false);
+      void poll();
     }, pollIntervalMs);
   };
   const stopPolling = () => {
@@ -478,14 +560,15 @@ function mountQuotaCard({
     if (doc.visibilityState === "hidden") stopPolling();
     else startPolling();
   };
-  const onRefresh = () => {
-    void poll(true);
-  };
   const toggleRow = (key) => {
     openKey = openKey === key ? void 0 : key;
     renderAll();
   };
   const onBodyClick = (event) => {
+    if (event.target?.closest?.('[data-action="refresh"]')) {
+      void poll(true);
+      return;
+    }
     const row = event.target?.closest?.("[data-dsh-quota-watch-row][data-expandable]");
     if (row) toggleRow(row.dataset.dshQuotaWatchRow);
   };
@@ -497,20 +580,46 @@ function mountQuotaCard({
       toggleRow(row.dataset.dshQuotaWatchRow);
     }
   };
-  refreshButton.addEventListener("click", onRefresh);
+  const onDocPointerDown = (event) => {
+    if (openKey === void 0) return;
+    const target = event.target;
+    if (pop.contains(target) || target?.closest?.("[data-dsh-quota-watch-row]") || target?.closest?.(CARD_SELECTOR)) return;
+    openKey = void 0;
+    renderAll();
+  };
+  const onDocScroll = () => {
+    positionPop();
+  };
+  const onWinResize = () => {
+    positionPop();
+  };
+  const onDocKeydown = (event) => {
+    if (event.key === "Escape" && openKey !== void 0) {
+      openKey = void 0;
+      renderAll();
+    }
+  };
   body.addEventListener("click", onBodyClick);
   body.addEventListener("keydown", onBodyKeydown);
   doc.addEventListener("visibilitychange", onVisibilityChange);
+  doc.addEventListener("pointerdown", onDocPointerDown, true);
+  doc.addEventListener("scroll", onDocScroll, true);
+  doc.addEventListener("keydown", onDocKeydown);
+  win.addEventListener("resize", onWinResize);
   startPolling();
   return () => {
     disposed = true;
     stopPolling();
     observer.disconnect();
     doc.removeEventListener("visibilitychange", onVisibilityChange);
-    refreshButton.removeEventListener("click", onRefresh);
+    doc.removeEventListener("pointerdown", onDocPointerDown, true);
+    doc.removeEventListener("scroll", onDocScroll, true);
+    doc.removeEventListener("keydown", onDocKeydown);
+    win.removeEventListener("resize", onWinResize);
     body.removeEventListener("click", onBodyClick);
     body.removeEventListener("keydown", onBodyKeydown);
     container.remove();
+    pop.remove();
   };
 }
 function apply(ctx) {

package/package.json

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

package/src/client.mjs

@@ -12,40 +12,48 @@ const COPY = {
     title: '套餐监控',
     refresh: '刷新',
     loading: '读取中',
-    updated: '更新',
     failed: '查询失败',
     stale: '数据可能已过期',
     requestFailed: '刷新失败，显示上次成功数据',
     available: '可用额度',
     used: '本期已用',
     reset: '重置',
-    todayTokens: '今日 tokens',
-    todayCalls: '今日调用',
+    resetTime: '重置时间',
+    windowUsed: '已用',
+    todayTokens: '今日 Tokens',
+    todayCalls: '调用次数',
+    weekUnlimited: '每周额度',
+    unlimited: '♾️',
+    unlimitedNote: '（无限）',
     windows: {
-      '5h': '5 小时窗口 · 已用',
-      week: '每周窗口 · 已用',
-      month: '每月窗口 · 已用',
-      mcp: 'MCP（月）· 已用',
+      '5h': '5 小时额度',
+      week: '每周额度',
+      month: '每月额度',
+      mcp: 'MCP（月）',
     },
   },
   en: {
     title: 'Quota Watch',
     refresh: 'Refresh',
     loading: 'Loading',
-    updated: 'Updated',
     failed: 'Query failed',
     stale: 'Data may be stale',
     requestFailed: 'Refresh failed; showing last successful data',
     available: 'Available credits',
     used: 'Used this cycle',
     reset: 'Resets',
+    resetTime: 'Reset time',
+    windowUsed: 'used',
     todayTokens: 'Today tokens',
-    todayCalls: 'Calls today',
+    todayCalls: 'Calls',
+    weekUnlimited: 'Weekly quota',
+    unlimited: '♾️',
+    unlimitedNote: ' (unlimited)',
     windows: {
-      '5h': '5-hour window · used',
-      week: 'Weekly window · used',
-      month: 'Monthly window · used',
-      mcp: 'MCP (month) · used',
+      '5h': '5-hour quota',
+      week: 'Weekly quota',
+      month: 'Monthly quota',
+      mcp: 'MCP (month)',
     },
   },
 }
@@ -53,40 +61,49 @@ const COPY = {
 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: 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-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: 5px 8px; display: flex; flex-direction: column; gap: 2px; }
 .dqw-meta { margin: 0; font-size: 10px; line-height: 14px; opacity: .7; }
 .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 { display: flex; align-items: center; gap: 6px; padding: 3px 6px; margin: 0 -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-label[data-action="refresh"] { cursor: pointer; border-radius: 4px; }
+.dqw-label[data-action="refresh"]:hover { opacity: .75; }
 .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-extra { font-size: 10px; line-height: 14px; opacity: .72; font-variant-numeric: tabular-nums; flex: none; min-width: 34px; text-align: right; }
 .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-pop { position: fixed; z-index: 2147483000; min-width: 232px; 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-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 { 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; }
 .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-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-models { border-top: 1px dashed var(--dsw-alias-border-secondary, rgba(128,128,128,.25)); padding-top: 6px; display: flex; flex-direction: column; gap: 3px; }
+.dqw-model-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 10.5px; line-height: 15px; font-variant-numeric: tabular-nums; }
+.dqw-model-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .85; }
+.dqw-model-value { flex: none; font-weight: 600; }
+.dqw-kv { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 10.5px; line-height: 17px; font-variant-numeric: tabular-nums; }
+.dqw-kv-label { flex: none; opacity: .65; }
+.dqw-kv-value { min-width: 0; text-align: right; font-weight: 600; }
+.dqw-kv-sub { font-weight: 400; opacity: .55; }
+.dqw-wins { display: grid; grid-template-columns: max-content max-content max-content max-content 1fr; column-gap: 6px; row-gap: 3px; align-items: baseline; font-size: 10.5px; line-height: 17px; font-variant-numeric: tabular-nums; }
+.dqw-win-name { opacity: .65; }
+.dqw-win-mid { opacity: .65; white-space: nowrap; }
+.dqw-win-used { opacity: .65; white-space: nowrap; }
+.dqw-win-val { min-width: 0; font-weight: 600; }
 .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; }
 `
 
 function localeFor(win) {
@@ -130,23 +147,11 @@ function text(doc, tag, className, value) {
   return node
 }
 
-function progress(doc, label, percent, locale) {
+/** Aligned label/value line used by the simplified Copilot detail. */
+function kvRow(doc, label, value) {
   const row = doc.createElement('div')
-  row.className = 'dqw-row'
-  const head = doc.createElement('div')
-  head.className = 'dqw-row-head'
-  head.append(text(doc, 'span', '', label), text(doc, 'span', '', formatPercent(percent, locale)))
-  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, percent))))
-  const fill = doc.createElement('span')
-  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)
+  row.className = 'dqw-kv'
+  row.append(text(doc, 'span', 'dqw-kv-label', label), text(doc, 'span', 'dqw-kv-value', value))
   return row
 }
 
@@ -184,6 +189,7 @@ function copilotRowModel(provider) {
     percent: used,
     stale: provider.status === 'stale',
     error: provider.error,
+    extra: typeof quota.creditsUsed === 'number' && quota.creditsUsed >= 0 ? quota.creditsUsed : undefined,
   }
 }
 
@@ -222,22 +228,20 @@ export function mountQuotaCard({
   const card = doc.createElement('section')
   card.className = 'dqw-card'
   card.setAttribute('aria-label', copy.title)
-  const header = doc.createElement('header')
-  header.className = 'dqw-head'
-  header.append(text(doc, 'h3', 'dqw-title', copy.title))
-  const refreshButton = text(doc, 'button', 'dqw-button', '↻')
-  refreshButton.type = 'button'
-  refreshButton.title = copy.refresh
-  refreshButton.setAttribute('aria-label', copy.refresh)
-  refreshButton.dataset.action = 'refresh'
-  header.append(refreshButton)
   const body = doc.createElement('div')
   body.className = 'dqw-body'
+  // Status line doubles as the transport-error surface; hidden once data renders.
   const lastUpdated = text(doc, 'p', 'dqw-meta', copy.loading)
   lastUpdated.dataset.role = 'updated'
   body.append(lastUpdated)
-  card.append(header, body)
+  card.append(body)
   container.append(style, card)
+  // Details open in a fixed-position panel to the right of the rows.
+  const pop = doc.createElement('div')
+  pop.className = 'dqw-pop'
+  pop.dataset.dshQuotaWatchPop = ''
+  pop.hidden = true
+  doc.body.append(pop)
   let snapshot
   let requestSequence = 0
   let timer
@@ -247,13 +251,17 @@ export function mountQuotaCard({
 
   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) => {
+  /** Build the summary row for one provider, or null when it must not render. */
+  const renderProvider = (key, model) => {
     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))
+    const label = text(doc, 'span', 'dqw-label', model.label)
+    // Clicking the provider name re-probes, standing in for the removed refresh button.
+    label.dataset.action = 'refresh'
+    label.title = `${model.label} · ${copy.refresh}`
+    row.append(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))
@@ -288,11 +296,7 @@ export function mountQuotaCard({
       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]
+    return [row]
   }
 
   function renderDetail(detail, key, provider) {
@@ -318,45 +322,133 @@ export function mountQuotaCard({
       )
       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 raw = Array.isArray(provider?.plan?.windows) ? provider.plan.windows : []
+      // Fixed display order (MCP, 5h, month, week); the weekly window shows an
+      // unlimited placeholder until the provider starts reporting one.
+      const order = { mcp: 0, '5h': 1, month: 2, week: 3 }
+      const sorted = [...raw].sort((a, b) => (order[a?.key] ?? 99) - (order[b?.key] ?? 99))
+      const items = []
+      let weekPlaced = false
+      for (const window of sorted) {
+        if (!weekPlaced && (order[window?.key] ?? 99) > order.week) {
+          items.push({ placeholder: true })
+          weekPlaced = true
         }
+        if (window?.key === 'week') weekPlaced = true
+        items.push({ window })
+      }
+      if (!weekPlaced) items.push({ placeholder: true })
+      // One grid keeps the name, ·, used/♾️, percent and weak-note columns aligned
+      // across all window rows.
+      const wins = doc.createElement('div')
+      wins.className = 'dqw-wins'
+      for (const item of items) {
+        if (item.placeholder) {
+          wins.append(
+            text(doc, 'span', 'dqw-win-name', copy.weekUnlimited),
+            text(doc, 'span', 'dqw-win-mid', '·'),
+            text(doc, 'span', 'dqw-win-used', copy.unlimited),
+            text(doc, 'span', ''),
+            text(doc, 'span', 'dqw-kv-sub', copy.unlimitedNote),
+          )
+          continue
+        }
+        const window = item.window
+        const percent = typeof window?.percent === 'number' && Number.isFinite(window.percent) ? window.percent : undefined
         const reset = formatTime(window?.resetsAt, locale)
-        if (reset) detail.append(text(doc, 'p', 'dqw-muted', `${copy.reset}: ${reset}`))
+        wins.append(text(doc, 'span', 'dqw-win-name', copy.windows[window?.key] ?? window?.key))
+        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}）` : ''))
+      }
+      detail.append(wins)
+      if (Array.isArray(usage?.models) && usage.models.length > 0) {
+        const models = doc.createElement('div')
+        models.className = 'dqw-models'
+        for (const model of usage.models) {
+          const row = doc.createElement('div')
+          row.className = 'dqw-model-row'
+          row.append(
+            text(doc, 'span', 'dqw-model-name', model?.name ?? '—'),
+            text(doc, 'span', 'dqw-model-value', formatCompact(model?.tokens, locale)),
+          )
+          models.append(row)
+        }
+        detail.append(models)
       }
-      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)}`))
+      detail.append(kvRow(doc, 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)}`))
+        const row = doc.createElement('div')
+        row.className = 'dqw-kv'
+        const value = doc.createElement('span')
+        value.className = 'dqw-kv-value'
+        value.append(text(doc, 'span', '', formatNumber(quota.creditsUsed, locale)))
+        // The percent duplicates the summary bar, so render it weakened.
+        if (used !== undefined) value.append(text(doc, 'span', 'dqw-kv-sub', ` · ${formatPercent(used, locale)}`))
+        row.append(text(doc, 'span', 'dqw-kv-label', copy.used), value)
+        detail.append(row)
       }
+      const reset = formatTime(quota?.resetsAt, locale)
+      if (reset) detail.append(kvRow(doc, copy.resetTime, reset))
     } 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}`))
+  }
+
+  /** Keep the detail panel anchored to the expanded row's right edge. */
+  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 viewWidth = win.innerWidth ?? 1024
+    const viewHeight = win.innerHeight ?? 768
+    const width = pop.offsetWidth || 240
+    const height = pop.offsetHeight || 160
+    let left = rect.right + 8
+    if (left + width > viewWidth - 8) left = rect.left - width - 8
+    if (left + width > viewWidth - 8) left = viewWidth - width - 8
+    left = Math.max(8, left)
+    const top = Math.min(Math.max(rect.top, 8), Math.max(8, viewHeight - height - 8))
+    pop.style.left = `${Math.round(left)}px`
+    pop.style.top = `${Math.round(top)}px`
+  }
+
+  const syncPop = () => {
+    if (openKey === undefined || disposed) {
+      if (!pop.hidden) {
+        pop.hidden = true
+        pop.replaceChildren()
+        delete pop.dataset.dshQuotaWatchDetail
+      }
+      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')) {
+      openKey = undefined
+      syncPop()
+      return
+    }
+    renderDetail(pop, openKey, provider)
+    pop.dataset.dshQuotaWatchDetail = openKey
+    pop.setAttribute('aria-label', openKey === 'glm' ? 'GLM' : 'Copilot')
+    pop.hidden = false
+    positionPop()
   }
 
   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 glmParts = renderProvider('glm', glmRowModel(glm))
+    const copilotParts = renderProvider('copilot', copilotRowModel(copilot))
     const fragment = doc.createDocumentFragment()
     fragment.append(lastUpdated)
     if (glmParts) fragment.append(...glmParts)
@@ -364,7 +456,13 @@ export function mountQuotaCard({
     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
+    if (updated) {
+      lastUpdated.hidden = true
+    } else {
+      lastUpdated.hidden = false
+      lastUpdated.textContent = copy.loading
+    }
+    syncPop()
   }
 
   const render = (next) => {
@@ -373,32 +471,29 @@ export function mountQuotaCard({
   }
 
   const showTransportError = () => {
-    if (snapshot) lastUpdated.textContent = copy.requestFailed
-    else lastUpdated.textContent = copy.failed
+    lastUpdated.hidden = false
+    lastUpdated.textContent = snapshot ? copy.requestFailed : copy.failed
   }
 
   const poll = async (force) => {
     if (disposed) return
     const sequence = ++requestSequence
-    refreshButton.disabled = force === true
     try {
       const next = await fetchJson(fetchImpl, force ? CLIENT_ROUTES.refresh : CLIENT_ROUTES.overview, force ? 'POST' : 'GET')
       if (sequence === requestSequence && !disposed) render(next)
     } catch {
       if (sequence === requestSequence && !disposed) showTransportError()
-    } finally {
-      if (!disposed && sequence === requestSequence) refreshButton.disabled = false
     }
   }
 
   const place = () => {
     const foot = footArea(doc)
     if (!foot) return
-    const settings = foot.querySelector('[class*="settingsArea"]')
-    if (settings) {
-      if (container.parentElement !== foot || container.nextElementSibling !== settings) foot.insertBefore(container, settings)
-    } else if (container.parentElement !== foot || foot.lastElementChild !== container) {
-      foot.append(container)
+    // Claim the first slot of the sidebar footer so the card sits above the
+    // framework-rendered plugin entries and the settings row; the mutation
+    // observer re-seats it whenever the framework displaces it.
+    if (container.parentElement !== foot || foot.firstElementChild !== container) {
+      foot.insertBefore(container, foot.firstChild)
     }
   }
 
@@ -417,8 +512,8 @@ export function mountQuotaCard({
 
   const startPolling = () => {
     if (timer !== undefined || doc.visibilityState === 'hidden' || disposed) return
-    void poll(false)
-    timer = win.setInterval(() => { void poll(false) }, pollIntervalMs)
+    void poll()
+    timer = win.setInterval(() => { void poll() }, pollIntervalMs)
   }
   const stopPolling = () => {
     if (timer !== undefined) win.clearInterval(timer)
@@ -428,12 +523,15 @@ export function mountQuotaCard({
     if (doc.visibilityState === 'hidden') stopPolling()
     else startPolling()
   }
-  const onRefresh = () => { void poll(true) }
   const toggleRow = (key) => {
     openKey = openKey === key ? undefined : key
     renderAll()
   }
   const onBodyClick = (event) => {
+    if (event.target?.closest?.('[data-action="refresh"]')) {
+      void poll(true)
+      return
+    }
     const row = event.target?.closest?.('[data-dsh-quota-watch-row][data-expandable]')
     if (row) toggleRow(row.dataset.dshQuotaWatchRow)
   }
@@ -445,10 +543,28 @@ export function mountQuotaCard({
       toggleRow(row.dataset.dshQuotaWatchRow)
     }
   }
-  refreshButton.addEventListener('click', onRefresh)
+  const onDocPointerDown = (event) => {
+    if (openKey === undefined) return
+    const target = event.target
+    if (pop.contains(target) || target?.closest?.('[data-dsh-quota-watch-row]') || target?.closest?.(CARD_SELECTOR)) return
+    openKey = undefined
+    renderAll()
+  }
+  const onDocScroll = () => { positionPop() }
+  const onWinResize = () => { positionPop() }
+  const onDocKeydown = (event) => {
+    if (event.key === 'Escape' && openKey !== undefined) {
+      openKey = undefined
+      renderAll()
+    }
+  }
   body.addEventListener('click', onBodyClick)
   body.addEventListener('keydown', onBodyKeydown)
   doc.addEventListener('visibilitychange', onVisibilityChange)
+  doc.addEventListener('pointerdown', onDocPointerDown, true)
+  doc.addEventListener('scroll', onDocScroll, true)
+  doc.addEventListener('keydown', onDocKeydown)
+  win.addEventListener('resize', onWinResize)
   startPolling()
 
   return () => {
@@ -456,10 +572,14 @@ export function mountQuotaCard({
     stopPolling()
     observer.disconnect()
     doc.removeEventListener('visibilitychange', onVisibilityChange)
-    refreshButton.removeEventListener('click', onRefresh)
+    doc.removeEventListener('pointerdown', onDocPointerDown, true)
+    doc.removeEventListener('scroll', onDocScroll, true)
+    doc.removeEventListener('keydown', onDocKeydown)
+    win.removeEventListener('resize', onWinResize)
     body.removeEventListener('click', onBodyClick)
     body.removeEventListener('keydown', onBodyKeydown)
     container.remove()
+    pop.remove()
   }
 }