@iasiv5/dsh-quota-watch 0.1.0 → 0.1.1

package/README.md

@@ -2,21 +2,20 @@
 
 [English summary](#english-summary)
 
-个人版 DSH 额度监控插件，以常驻悬浮球集中显示 GLM Coding Plan 窗口与 GitHub Copilot 的 provider 上报额度快照。它不统计 DSH 会话 token、不保存历史，也不需要在浏览器输入任何 provider 密钥。
+个人版 DSH 额度监控插件，以常驻悬浮胶囊集中显示 GLM Coding Plan 窗口与 GitHub Copilot 的 provider 上报额度快照。它不统计 DSH 会话 token、不保存历史，也不需要在浏览器输入任何 provider 密钥。
 
 ## 功能
 
-- **悬浮球**：常驻屏幕右下角（距边 16px 起步），可整体拖拽到任意位置，位置跨重启记忆，越界自动钳回视口。球面为分段进度环——GLM 占上半环、Copilot 占下半环，已用超过 80% 转橙、超过 95% 转红，任一 provider 超 95% 时整球轻微脉动（尊重系统「减少动态效果」设置，开启时不脉动）；环心保留配额仪表盘图标，颜色使用 DSH 主题语义变量，自动适配浅色 / 深色主题。悬停提示与 aria-label 实时给出「GLM x% · Copilot y%」摘要。
-- **胶囊**：右键悬浮球可切换为一行式胶囊（`GLM 13% · Copilot 24%`），阈值变色规则相同；右键胶囊切回悬浮球。球 / 胶囊形态跨重启记忆。
+- **悬浮胶囊**（0.1.1 起为唯一浮动形态，圆球已退役）：常驻屏幕右下角（距边 16px 起步），可整体拖拽到任意位置，位置跨重启记忆，越界自动钳回视口。胶囊一行显示「GLM 13% · Copilot 24%」，已用超过 80% 转橙、超过 95% 转红，任一 provider 超 95% 时胶囊轻微脉动（尊重系统「减少动态效果」设置，开启时不脉动）；颜色使用 DSH 主题语义变量，自动适配浅色 / 深色主题。悬停提示与 aria-label 实时给出摘要。
 - **面板**：点击球或胶囊展开浮动详情面板（半透明毛玻璃底，宽 `min(320px, 100vw−24px)`，靠边自动翻侧，滚动 / 缩放跟随），头部带标题与 ✕，Esc 或点击面板外关闭。概览列两个 provider 行，点击进入详情：GLM 为今日 Tokens / 调用次数双大数字 + 五列对齐窗口网格（MCP（月）→ 5 小时 → 每月 → 每周固定排序，周窗口未下发时显示「每周额度 · ♾️（无限）」占位）+ 分模型用量行；Copilot 为可用额度、本期已用（credits 消耗 + 弱化百分比）、重置时间三行。接口未下发有效 `remaining` / `percent_remaining` 时该行不渲染，`credits_used` 绝不用于推算余额。
-- **侧边栏卡片（渐进增强）**：Web profile 侧栏底部区块存在时，卡片照常显示（摘要行 + 行点击开面板 + 行首 provider 名称点击立即探测），卡片右上角有一个悬浮球切换按钮（悬停显形），可在卡片上隐藏 / 唤回悬浮球；侧栏收起（Web 窄栏）或侧栏整体不存在（Desktop 收起态）时卡片自然缺席、无报错，由悬浮球承载入口。
-- **右键菜单**：切为胶囊 / 切为悬浮球 · 显示 / 隐藏侧边栏卡片 · 立即刷新 · 隐藏悬浮球。菜单项随上下文增减（无侧栏卡片挂载点时不显示卡片项）。「隐藏悬浮球」为**会话级**——刷新页面即恢复，卡片上的切换按钮可在会话内直接唤回，任何时刻都至少有一条找回路径。
-- 凭据缺失的 provider 不渲染摘要行、环弧塌缩为零（两者皆缺时悬浮球与卡片一并隐藏）；探测失败时保留最后一次成功数据并在行上加 ⚠ 过期标记（⚠ 只出现在面板与卡片行内，不上球）。
+- **侧边栏卡片（渐进增强）**：Web profile 侧栏底部区块存在时，卡片照常显示（摘要行 + 行点击开面板 + 行首 provider 名称点击立即探测），卡片右上角有一个胶囊切换按钮（悬停显形），可在卡片上隐藏 / 唤回悬浮胶囊；侧栏收起（Web 窄栏）或侧栏整体不存在（Desktop 收起态）时卡片自然缺席、无报错，由悬浮胶囊承载入口。
+- **右键菜单**：显示 / 隐藏侧边栏卡片 · 立即刷新 · 隐藏悬浮胶囊。菜单项随上下文增减（无侧栏卡片挂载点时不显示卡片项）。「隐藏悬浮胶囊」为**会话级**——刷新页面即恢复，卡片上的切换按钮可在会话内直接唤回，任何时刻都至少有一条找回路径。
+- 凭据缺失的 provider 不渲染摘要行与胶囊分段（两者皆缺时悬浮胶囊与卡片一并隐藏）；探测失败时保留最后一次成功数据并在行上加 ⚠ 过期标记（⚠ 只出现在面板与卡片行内，不上球）。
 - 宿主默认每 60 秒探测（窗口 + 用量 + Copilot）；profile patch 可将 `pollIntervalSec` 设置在 30–3600 秒。浏览器页签可见时每 30 秒刷新视图，隐藏时暂停。
 
 ## 兼容与配置
 
-- 要求 DSH `0.1.7-rc.2` 或更高；适配 `web` 与 `desktop` 两种 profile——Desktop 收起侧栏（整体消失）时由悬浮球承载入口，卡片为 Web 渐进增强。
+- 要求 DSH `0.1.7-rc.2` 或更高；适配 `web` 与 `desktop` 两种 profile——Desktop 收起侧栏（整体消失）时由悬浮胶囊承载入口，卡片为 Web 渐进增强。
 - GLM 从 `llm-pi-ai` profile 中配置的 provider `apiKeyEnv` credential reference 解析当前 key。支持 `zai-coding-cn`（国内）与 `zai` / `zai-coding`（国际）路由。每次探测都重新解析引用，用户轮换凭据后下一轮读取新值。
 - Copilot 使用内置 `llm-pi-ai/github-copilot` OAuth grant 的 `payload.refresh` 访问用户配额快照；不使用给模型请求的短期 `payload.access`，不使用 `COPILOT_GITHUB_TOKEN` 环境引用。每轮重新读取 grant，以支持用户重新授权或轮换。
 - 如需修改宿主周期，在 profile 的 `quota-watch` row 配置 `pollIntervalSec`；禁用插件请使用 DSH 插件管理器。
@@ -48,4 +47,4 @@ dsh plugin --profile web add @iasiv5/dsh-quota-watch
 
 ## English summary
 
-DSH Quota Watch is a personal DSH quota monitor built around a persistent floating ball: a segmented dual-arc ring (GLM top half, Copilot bottom half) that turns amber past 80% and red past 95%, draggable anywhere with position remembered across restarts. Right-click toggles a compact capsule showing `GLM x% · Copilot y%`; clicking the ball or capsule opens a floating glass panel with provider summaries and details, closable via ✕, Esc or an outside click. A sidebar card remains an opportunistic extra entry on web profiles (with a corner button to hide or restore the ball) and silently disappears whenever the sidebar does — collapsed web sidebars and the desktop profile are covered by the floating ball alone. A right-click menu offers mode switch, card visibility, an immediate provider re-probe and a session-scoped ball hide. Credentials are resolved on every host-side probe, only normalized values reach the browser, no usage history is kept, and a Copilot balance is never inferred from credits used. Colors ride DSH semantic theme tokens with hardcoded fallbacks; all UI lives inside a shadow root (ADR 0001).
+DSH Quota Watch is a personal DSH quota monitor built around a persistent floating capsule: a one-line `GLM x% · Copilot y%` summary that turns amber past 80% and red past 95%, draggable anywhere with position remembered across restarts. Clicking the capsule opens a floating glass panel whose overview reuses the classic 0.0.18 summary rows (label · bar · percent · extra · chevron) and whose detail pages replicate the 0.0.18 big numbers, window grid and per-model list; the panel closes via ✕, Esc or an outside click. A sidebar card remains an opportunistic extra entry on web profiles (with a corner button to hide or restore the capsule) and silently disappears whenever the sidebar does — collapsed web sidebars and the desktop profile are covered by the floating capsule alone. A right-click menu offers card visibility, an immediate provider re-probe and a session-scoped capsule hide. Credentials are resolved on every host-side probe, only normalized values reach the browser, no usage history is kept, and a Copilot balance is never inferred from credits used. Colors ride DSH semantic theme tokens with hardcoded fallbacks; all UI lives inside a shadow root (ADR 0001).

package/lib/client.js

@@ -83,7 +83,6 @@ function remainingToUsed(percentRemaining) {
 
 // src/client/prefs.mjs
 var FLOAT_GEOMETRY_KEY = "dsh-quota-watch:float-geometry";
-var FLOAT_MODE_KEY = "dsh-quota-watch:float-mode";
 var SURFACE_FLAGS_KEY = "dsh-quota-watch:surface-flags";
 var MARGIN = 8;
 function clampPoint(point, viewport, size = 0) {
@@ -115,21 +114,6 @@ function saveFloatGeometry(storage, point) {
   } catch {
   }
 }
-function loadFloatMode(storage) {
-  try {
-    const raw = storage.getItem(FLOAT_MODE_KEY);
-    return raw === "capsule" ? "capsule" : "ball";
-  } catch {
-    return "ball";
-  }
-}
-function saveFloatMode(storage, mode) {
-  if (mode !== "ball" && mode !== "capsule") throw new TypeError(`invalid float mode: ${mode}`);
-  try {
-    storage.setItem(FLOAT_MODE_KEY, mode);
-  } catch {
-  }
-}
 function loadSurfaceFlags(storage) {
   try {
     const raw = storage.getItem(SURFACE_FLAGS_KEY);
@@ -155,24 +139,19 @@ var name = "quota-watch-client";
 var inject = [];
 var CARD_SELECTOR = "[data-dsh-quota-watch-card]";
 var FETCH_TIMEOUT_MS = 15e3;
-var BALL_SIZE = 38;
-var BALL_MARGIN = 16;
-var RING_RADIUS = 15;
-var RING_CIRCUMFERENCE = 2 * Math.PI * RING_RADIUS;
-var RING_HALF_GAP = 2;
+var SURFACE_SIZE = 38;
+var SURFACE_MARGIN = 16;
 var COPY = {
   zh: {
     title: "Token\u989D\u5EA6",
     openDetails: "\u67E5\u770B\u8BE6\u60C5",
     close: "\u5173\u95ED",
     menu: {
-      toggleToBall: "\u5207\u4E3A\u60AC\u6D6E\u7403",
-      toggleToCapsule: "\u5207\u4E3A\u80F6\u56CA",
       showCard: "\u663E\u793A\u4FA7\u8FB9\u680F\u5361\u7247",
       hideCard: "\u9690\u85CF\u4FA7\u8FB9\u680F\u5361\u7247",
       refreshNow: "\u7ACB\u5373\u5237\u65B0",
-      hideBall: "\u9690\u85CF\u60AC\u6D6E\u7403",
-      showBall: "\u663E\u793A\u60AC\u6D6E\u7403"
+      hideBall: "\u9690\u85CF\u60AC\u6D6E\u80F6\u56CA",
+      showBall: "\u663E\u793A\u60AC\u6D6E\u80F6\u56CA"
     },
     backToOverview: "\u8FD4\u56DE\u989D\u5EA6\u6982\u89C8",
     providerNames: { glm: "GLM", copilot: "Copilot" },
@@ -203,13 +182,11 @@ var COPY = {
     openDetails: "View details",
     close: "Close",
     menu: {
-      toggleToBall: "Switch to ball",
-      toggleToCapsule: "Switch to capsule",
       showCard: "Show sidebar card",
       hideCard: "Hide sidebar card",
       refreshNow: "Refresh now",
-      hideBall: "Hide floating ball",
-      showBall: "Show floating ball"
+      hideBall: "Hide floating capsule",
+      showBall: "Show floating capsule"
     },
     backToOverview: "Back to quota overview",
     providerNames: { glm: "GLM", copilot: "Copilot" },
@@ -264,43 +241,9 @@ var STYLE_TEXT = `
 .dqw-ball-toggle[data-ball-hidden="true"] { color: var(--dsw-alias-button-primary-fill, #5b8def); }
 .dqw-ball-toggle:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.12)); }
 .dqw-ball-toggle svg { display: block; width: 14px; height: 14px; }
-.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; }
-.dqw-big .dqw-big-label { font-size: 9.5px; line-height: 13px; opacity: .65; }
-.dqw-muted { margin: 0; font-size: 10px; line-height: 14px; opacity: .7; }
-.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); }
 `;
 var FLOAT_STYLE_TEXT = `
 :host { position: fixed; z-index: 2147483000; }
-.dqw-ball { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin: 0; padding: 0; border: 1px solid var(--dsw-alias-border-secondary, rgba(128,128,128,.35)); border-radius: 50%; background: var(--dsw-alias-bg-base, rgba(128,128,128,.08)); background: color-mix(in srgb, var(--dsw-alias-bg-base, #1f1f1f) 86%, transparent); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); box-shadow: 0 4px 14px rgba(0,0,0,.22); color: var(--dsw-alias-label-primary, inherit); font: inherit; cursor: pointer; }
-.dqw-ball:hover { border-color: var(--dsw-alias-border-primary, var(--dsw-alias-border-secondary, rgba(128,128,128,.35))); }
-.dqw-ball:focus-visible { outline: 2px solid var(--dsw-alias-brand-primary, #5b8def); outline-offset: 2px; }
-.dqw-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
-.dqw-ring-track { fill: none; stroke: var(--dsw-alias-bg-tertiary, rgba(128,128,128,.2)); stroke-width: 3.5; }
-.dqw-ring-glm { fill: none; stroke: var(--dsw-alias-button-primary-fill, #5b8def); stroke-width: 3.5; stroke-linecap: round; transition: stroke-dasharray .3s ease; }
-.dqw-ring-copilot { fill: none; stroke: var(--dsw-alias-label-success, #3fb950); stroke-width: 3.5; stroke-linecap: round; transition: stroke-dasharray .3s ease; }
-.dqw-ring-glm.warn, .dqw-ring-copilot.warn { stroke: var(--dsw-alias-label-warning, #d29922); }
-.dqw-ring-glm.danger, .dqw-ring-copilot.danger { stroke: var(--dsw-alias-label-danger, #c93c3c); }
-.dqw-ball > svg:not(.dqw-ring) { position: relative; width: 16px; height: 16px; }
 .dqw-capsule { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: 1px solid var(--dsw-alias-border-secondary, rgba(128,128,128,.35)); border-radius: 999px; background: var(--dsw-alias-bg-base, rgba(128,128,128,.08)); background: color-mix(in srgb, var(--dsw-alias-bg-base, #1f1f1f) 86%, transparent); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); box-shadow: 0 4px 14px rgba(0,0,0,.22); color: var(--dsw-alias-label-primary, inherit); font: inherit; font-size: 11px; line-height: 24px; cursor: pointer; user-select: none; white-space: nowrap; }
 .dqw-capsule:hover { border-color: var(--dsw-alias-border-primary, var(--dsw-alias-border-secondary, rgba(128,128,128,.35))); }
 .dqw-capsule:focus-visible { outline: 2px solid var(--dsw-alias-brand-primary, #5b8def); outline-offset: 2px; }
@@ -308,14 +251,14 @@ var FLOAT_STYLE_TEXT = `
 .dqw-capsule-glm, .dqw-capsule-copilot { font-variant-numeric: tabular-nums; font-weight: 600; }
 .dqw-capsule-glm.warn, .dqw-capsule-copilot.warn { color: var(--dsw-alias-label-warning, #d29922); }
 .dqw-capsule-glm.danger, .dqw-capsule-copilot.danger { color: var(--dsw-alias-label-danger, #c93c3c); }
+@media (prefers-reduced-motion: no-preference) {
+  .dqw-capsule[data-alert] { animation: dqw-pulse 1.6s ease-in-out infinite; }
+}
+@keyframes dqw-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
 .dqw-menu { position: fixed; min-width: 150px; padding: 4px; 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) 88%, 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); font: inherit; display: flex; flex-direction: column; }
 .dqw-menu[hidden] { display: none; }
 .dqw-menu-item { display: flex; align-items: center; gap: 6px; margin: 0; padding: 6px 10px; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; font-size: 11px; line-height: 16px; text-align: left; cursor: pointer; }
 .dqw-menu-item:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.12)); }
-@media (prefers-reduced-motion: no-preference) {
-  .dqw-ball[data-alert] { animation: dqw-ball-pulse 1.6s ease-in-out infinite; }
-}
-@keyframes dqw-ball-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
 .dqw-panel { position: fixed; width: min(320px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow-y: auto; 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-panel { background: var(--dsw-alias-bg-elevated, var(--dsw-alias-bg-base, #1f1f1f)); } }
 .dqw-panel[hidden] { display: none; }
@@ -327,6 +270,43 @@ var FLOAT_STYLE_TEXT = `
 .dqw-panel-back:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.12)); color: var(--dsw-alias-label-primary, inherit); }
 .dqw-panel-close { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 24px; height: 24px; margin: 0; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--dsw-alias-label-secondary, inherit); cursor: pointer; font: inherit; font-size: 12px; line-height: 1; }
 .dqw-panel-close: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-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; 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-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; }
+.dqw-big .dqw-big-label { font-size: 9.5px; line-height: 13px; opacity: .65; }
+.dqw-muted { margin: 0; font-size: 10px; line-height: 14px; opacity: .7; }
+.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); }
 `;
 function localeFor(win) {
   return String(win?.navigator?.language ?? "zh").toLowerCase().startsWith("zh") ? "zh" : "en";
@@ -408,35 +388,6 @@ function menuItem(doc, action, label) {
   item.append(text(doc, "span", "", label));
   return item;
 }
-function ringSvg(doc) {
-  const namespace = "http://www.w3.org/2000/svg";
-  const svg = doc.createElementNS(namespace, "svg");
-  svg.setAttribute("class", "dqw-ring");
-  svg.setAttribute("viewBox", "0 0 38 38");
-  svg.setAttribute("aria-hidden", "true");
-  svg.setAttribute("focusable", "false");
-  const track = doc.createElementNS(namespace, "circle");
-  track.setAttribute("class", "dqw-ring-track");
-  const glm = doc.createElementNS(namespace, "circle");
-  glm.setAttribute("class", "dqw-ring-glm");
-  glm.setAttribute("transform", "rotate(-90 19 19)");
-  const copilot = doc.createElementNS(namespace, "circle");
-  copilot.setAttribute("class", "dqw-ring-copilot");
-  copilot.setAttribute("transform", "rotate(90 19 19)");
-  track.setAttribute("cx", "19");
-  track.setAttribute("cy", "19");
-  track.setAttribute("r", String(RING_RADIUS));
-  track.setAttribute("fill", "none");
-  for (const circle of [glm, copilot]) {
-    circle.setAttribute("cx", "19");
-    circle.setAttribute("cy", "19");
-    circle.setAttribute("r", String(RING_RADIUS));
-    circle.setAttribute("fill", "none");
-    circle.setAttribute("stroke-dasharray", `0 ${RING_CIRCUMFERENCE}`);
-  }
-  svg.append(track, glm, copilot);
-  return svg;
-}
 function backIcon(doc) {
   const namespace = "http://www.w3.org/2000/svg";
   const svg = doc.createElementNS(namespace, "svg");
@@ -554,16 +505,6 @@ function mountQuotaCard({
   floatHost.dataset.dshQuotaWatchFloat = "";
   const floatRoot = floatHost.attachShadow({ mode: "open" });
   floatRoot.append(text(doc, "style", "", FLOAT_STYLE_TEXT));
-  const buildBall = () => {
-    const el = doc.createElement("button");
-    el.type = "button";
-    el.className = "dqw-ball";
-    el.dataset.dshQuotaWatchBall = "";
-    el.setAttribute("aria-haspopup", "dialog");
-    el.setAttribute("aria-expanded", "false");
-    el.append(ringSvg(doc), quotaIcon(doc));
-    return el;
-  };
   const buildCapsule = () => {
     const el = doc.createElement("div");
     el.className = "dqw-capsule";
@@ -579,7 +520,7 @@ function mountQuotaCard({
     );
     return el;
   };
-  let surface = loadFloatMode(win.localStorage) === "capsule" ? buildCapsule() : buildBall();
+  let surface = buildCapsule();
   floatRoot.append(surface);
   const syncFloatVisibility = () => {
     surface.hidden = ballSessionHidden || dataHidden;
@@ -595,9 +536,9 @@ function mountQuotaCard({
     const viewHeight = win.innerHeight ?? 768;
     const saved = loadFloatGeometry(win.localStorage);
     const point = clampPoint(
-      saved ?? { x: viewWidth - BALL_MARGIN - BALL_SIZE, y: viewHeight - BALL_MARGIN - BALL_SIZE },
+      saved ?? { x: viewWidth - SURFACE_MARGIN - SURFACE_SIZE, y: viewHeight - SURFACE_MARGIN - SURFACE_SIZE },
       { width: viewWidth, height: viewHeight },
-      BALL_SIZE
+      SURFACE_SIZE
     );
     floatHost.style.left = `${Math.round(point.x)}px`;
     floatHost.style.top = `${Math.round(point.y)}px`;
@@ -643,7 +584,7 @@ function mountQuotaCard({
       const point = clampPoint(
         { x: event.clientX, y: event.clientY },
         { width: viewWidth, height: viewHeight },
-        BALL_SIZE
+        SURFACE_SIZE
       );
       floatHost.style.left = `${Math.round(point.x)}px`;
       floatHost.style.top = `${Math.round(point.y)}px`;
@@ -729,44 +670,6 @@ function mountQuotaCard({
     row.append(text(doc, "span", "dqw-chev", openKey === key ? "\u25BE" : "\u25B8"));
     return [row];
   };
-  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.dshQuotaWatchPanelProvider = 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 panelHeader = ({ title, showBack = false }) => {
     const header = doc.createElement("div");
     header.className = "dqw-panel-header";
@@ -797,9 +700,9 @@ function mountQuotaCard({
     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);
+      renderProvider("glm", glmRowModel(glm)),
+      renderProvider("copilot", copilotRowModel(copilot))
+    ].filter(Boolean).flat();
     if (rows.length === 0) {
       panel.append(text(doc, "p", "dqw-muted", lastUpdated.textContent || copy.loading));
       return;
@@ -807,6 +710,9 @@ function mountQuotaCard({
     const list = doc.createElement("div");
     list.className = "dqw-overview-list";
     list.append(...rows);
+    for (const row of list.querySelectorAll("[data-dsh-quota-watch-row]")) {
+      row.dataset.dshQuotaWatchPanelProvider = row.dataset.dshQuotaWatchRow;
+    }
     panel.append(list);
   };
   function renderDetail(detail, key, provider, fromPanelNav = false) {
@@ -958,13 +864,6 @@ function mountQuotaCard({
     placePanel();
     surface.setAttribute("aria-expanded", "true");
   };
-  const applyArc = (circle, model) => {
-    const pct = model && typeof model.percent === "number" && Number.isFinite(model.percent) ? Math.max(0, Math.min(100, model.percent)) : null;
-    const fill = pct === null ? 0 : pct / 100 * (RING_CIRCUMFERENCE / 2 - RING_HALF_GAP);
-    circle.setAttribute("stroke-dasharray", `${fill.toFixed(2)} ${(RING_CIRCUMFERENCE - fill).toFixed(2)}`);
-    circle.classList.toggle("warn", pct !== null && pct > 80 && pct <= 95);
-    circle.classList.toggle("danger", pct !== null && pct > 95);
-  };
   const renderFloatFace = () => {
     const providers = snapshot?.providers ?? [];
     const glm = glmRowModel(providers.find((provider) => provider?.key === "glm"));
@@ -976,24 +875,19 @@ function mountQuotaCard({
     }
     syncFloatVisibility();
     if (floatHost.hidden) return;
-    if (surface.dataset.dshQuotaWatchCapsule !== void 0) {
-      const paint = (span, model) => {
-        const visible = model !== null && typeof model.percent === "number" && Number.isFinite(model.percent);
-        span.textContent = visible ? `${model.label} ${formatPercent(model.percent, locale)}` : "";
-        span.classList.toggle("warn", visible && model.percent > 80 && model.percent <= 95);
-        span.classList.toggle("danger", visible && model.percent > 95);
-        return visible;
-      };
-      const glmVisible = paint(surface.querySelector(".dqw-capsule-glm"), glm);
-      const copilotVisible = paint(surface.querySelector(".dqw-capsule-copilot"), copilot);
-      surface.querySelector(".dqw-capsule-sep").hidden = !glmVisible || !copilotVisible;
-    } else {
-      applyArc(surface.querySelector(".dqw-ring-glm"), glm);
-      applyArc(surface.querySelector(".dqw-ring-copilot"), copilot);
-      const alert = [glm, copilot].some((model) => model !== null && typeof model.percent === "number" && model.percent > 95);
-      if (alert) surface.setAttribute("data-alert", "true");
-      else surface.removeAttribute("data-alert");
-    }
+    const paint = (span, model) => {
+      const visible = model !== null && typeof model.percent === "number" && Number.isFinite(model.percent);
+      span.textContent = visible ? `${model.label} ${formatPercent(model.percent, locale)}` : "";
+      span.classList.toggle("warn", visible && model.percent > 80 && model.percent <= 95);
+      span.classList.toggle("danger", visible && model.percent > 95);
+      return visible;
+    };
+    const glmVisible = paint(surface.querySelector(".dqw-capsule-glm"), glm);
+    const copilotVisible = paint(surface.querySelector(".dqw-capsule-copilot"), copilot);
+    surface.querySelector(".dqw-capsule-sep").hidden = !glmVisible || !copilotVisible;
+    const alert = [glm, copilot].some((model) => model !== null && typeof model.percent === "number" && model.percent > 95);
+    if (alert) surface.setAttribute("data-alert", "true");
+    else surface.removeAttribute("data-alert");
     const summary = [glm, copilot].filter(Boolean).map((model) => `${model.label} ${formatPercent(model.percent, locale)}`).join(" \xB7 ");
     const label = summary === "" ? copy.title : locale === "zh" ? `${copy.title}\uFF1A${summary}` : `${copy.title}: ${summary}`;
     surface.setAttribute("aria-label", label);
@@ -1004,7 +898,7 @@ function mountQuotaCard({
       suppressNextClick = false;
       return;
     }
-    if (openKey === "overview" && !panel.hidden) {
+    if (openKey !== void 0 && !panel.hidden) {
       openKey = void 0;
       syncPop();
       return;
@@ -1016,25 +910,9 @@ function mountQuotaCard({
     event.preventDefault();
     onSurfaceClick();
   };
-  const setFloatMode = (nextMode) => {
-    saveFloatMode(win.localStorage, nextMode);
-    openKey = void 0;
-    menu.hidden = true;
-    syncPop();
-    const previous = surface;
-    surface = nextMode === "capsule" ? buildCapsule() : buildBall();
-    previous.replaceWith(surface);
-    surface.addEventListener("click", onSurfaceClick);
-    surface.addEventListener("keydown", onSurfaceKeydown);
-    surface.addEventListener("contextmenu", onSurfaceContext);
-    disposeDrag();
-    disposeDrag = attachDrag(surface);
-    renderFloatFace();
-  };
   const hasCardMount = () => Boolean(footArea(doc));
   const openMenu = () => {
-    const isBall = surface.dataset.dshQuotaWatchBall !== void 0;
-    const items = [menuItem(doc, "toggle-mode", isBall ? copy.menu.toggleToCapsule : copy.menu.toggleToBall)];
+    const items = [];
     if (hasCardMount()) {
       items.push(menuItem(doc, "toggle-card", surfaceFlags.cardHidden ? copy.menu.showCard : copy.menu.hideCard));
     }
@@ -1061,9 +939,7 @@ function mountQuotaCard({
     const item = event.target?.closest?.("[data-menu]");
     if (!item) return;
     const action = item.dataset.menu;
-    if (action === "toggle-mode") {
-      setFloatMode(surface.dataset.dshQuotaWatchBall !== void 0 ? "capsule" : "ball");
-    } else if (action === "toggle-card") {
+    if (action === "toggle-card") {
       setCardHidden(!surfaceFlags.cardHidden);
     } else if (action === "refresh") {
       void poll(true);
@@ -1224,6 +1100,15 @@ function mountQuotaCard({
   body.addEventListener("click", onBodyClick);
   body.addEventListener("keydown", onBodyKeydown);
   panel.addEventListener("click", onPanelClick);
+  panel.addEventListener("keydown", (event) => {
+    if (event.key !== "Enter" && event.key !== " ") return;
+    const row = event.target?.closest?.("[data-dsh-quota-watch-panel-provider][data-expandable]");
+    if (!row) return;
+    event.preventDefault();
+    openKey = row.dataset.dshQuotaWatchPanelProvider;
+    panelNav = true;
+    syncPop();
+  });
   surface.addEventListener("click", onSurfaceClick);
   surface.addEventListener("keydown", onSurfaceKeydown);
   surface.addEventListener("contextmenu", onSurfaceContext);

package/package.json

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

package/src/client/prefs.mjs

@@ -2,7 +2,6 @@
 // Pure logic: no DOM. `storage` is a localStorage-like object (getItem/setItem).
 
 export const FLOAT_GEOMETRY_KEY = 'dsh-quota-watch:float-geometry'
-export const FLOAT_MODE_KEY = 'dsh-quota-watch:float-mode'
 export const SURFACE_FLAGS_KEY = 'dsh-quota-watch:surface-flags'
 
 const MARGIN = 8
@@ -45,24 +44,6 @@ export function saveFloatGeometry(storage, point) {
   }
 }
 
-export function loadFloatMode(storage) {
-  try {
-    const raw = storage.getItem(FLOAT_MODE_KEY)
-    return raw === 'capsule' ? 'capsule' : 'ball'
-  } catch {
-    return 'ball'
-  }
-}
-
-export function saveFloatMode(storage, mode) {
-  if (mode !== 'ball' && mode !== 'capsule') throw new TypeError(`invalid float mode: ${mode}`)
-  try {
-    storage.setItem(FLOAT_MODE_KEY, mode)
-  } catch {
-    /* storage unavailable; mode stays session-only */
-  }
-}
-
 export function loadSurfaceFlags(storage) {
   try {
     const raw = storage.getItem(SURFACE_FLAGS_KEY)

package/src/client.mjs

@@ -1,17 +1,14 @@
 import { CLIENT_POLL_INTERVAL_MS, CLIENT_ROUTES } from './shared.mjs'
 import { remainingToUsed } from './core/adapters.mjs'
-import { clampPoint, loadFloatGeometry, loadFloatMode, loadSurfaceFlags, saveFloatGeometry, saveFloatMode, saveSurfaceFlags } from './client/prefs.mjs'
+import { clampPoint, loadFloatGeometry, loadSurfaceFlags, saveFloatGeometry, saveSurfaceFlags } from './client/prefs.mjs'
 
 export const name = 'quota-watch-client'
 export const inject = []
 
 const CARD_SELECTOR = '[data-dsh-quota-watch-card]'
 const FETCH_TIMEOUT_MS = 15_000
-const BALL_SIZE = 38
-const BALL_MARGIN = 16
-const RING_RADIUS = 15
-const RING_CIRCUMFERENCE = 2 * Math.PI * RING_RADIUS
-const RING_HALF_GAP = 2
+const SURFACE_SIZE = 38
+const SURFACE_MARGIN = 16
 
 const COPY = {
   zh: {
@@ -19,13 +16,11 @@ const COPY = {
     openDetails: '查看详情',
     close: '关闭',
     menu: {
-      toggleToBall: '切为悬浮球',
-      toggleToCapsule: '切为胶囊',
       showCard: '显示侧边栏卡片',
       hideCard: '隐藏侧边栏卡片',
       refreshNow: '立即刷新',
-      hideBall: '隐藏悬浮球',
-      showBall: '显示悬浮球',
+      hideBall: '隐藏悬浮胶囊',
+      showBall: '显示悬浮胶囊',
     },
     backToOverview: '返回额度概览',
     providerNames: { glm: 'GLM', copilot: 'Copilot' },
@@ -56,13 +51,11 @@ const COPY = {
     openDetails: 'View details',
     close: 'Close',
     menu: {
-      toggleToBall: 'Switch to ball',
-      toggleToCapsule: 'Switch to capsule',
       showCard: 'Show sidebar card',
       hideCard: 'Hide sidebar card',
       refreshNow: 'Refresh now',
-      hideBall: 'Hide floating ball',
-      showBall: 'Show floating ball',
+      hideBall: 'Hide floating capsule',
+      showBall: 'Show floating capsule',
     },
     backToOverview: 'Back to quota overview',
     providerNames: { glm: 'GLM', copilot: 'Copilot' },
@@ -118,47 +111,15 @@ const STYLE_TEXT = `
 .dqw-ball-toggle[data-ball-hidden="true"] { color: var(--dsw-alias-button-primary-fill, #5b8def); }
 .dqw-ball-toggle:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.12)); }
 .dqw-ball-toggle svg { display: block; width: 14px; height: 14px; }
-.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; }
-.dqw-big .dqw-big-label { font-size: 9.5px; line-height: 13px; opacity: .65; }
-.dqw-muted { margin: 0; font-size: 10px; line-height: 14px; opacity: .7; }
-.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); }
 `
 
-// Float shell (ball today; capsule/menu later) and the panel live on their own
-// shadow host at the document root — ADR 0001 isolation, and survival without
-// any sidebar DOM (collapsed sidebar, desktop profile).
+// Float shell (capsule) and the panel live on their own shadow host at the
+// document root — ADR 0001 isolation, and survival without any sidebar DOM
+// (collapsed sidebar, desktop profile). Panel content shares the card's visual
+// language, so the row/detail rules are duplicated into THIS shadow root; the
+// card shadow keeps its own copies for the sidebar rows.
 const FLOAT_STYLE_TEXT = `
 :host { position: fixed; z-index: 2147483000; }
-.dqw-ball { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin: 0; padding: 0; border: 1px solid var(--dsw-alias-border-secondary, rgba(128,128,128,.35)); border-radius: 50%; background: var(--dsw-alias-bg-base, rgba(128,128,128,.08)); background: color-mix(in srgb, var(--dsw-alias-bg-base, #1f1f1f) 86%, transparent); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); box-shadow: 0 4px 14px rgba(0,0,0,.22); color: var(--dsw-alias-label-primary, inherit); font: inherit; cursor: pointer; }
-.dqw-ball:hover { border-color: var(--dsw-alias-border-primary, var(--dsw-alias-border-secondary, rgba(128,128,128,.35))); }
-.dqw-ball:focus-visible { outline: 2px solid var(--dsw-alias-brand-primary, #5b8def); outline-offset: 2px; }
-.dqw-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
-.dqw-ring-track { fill: none; stroke: var(--dsw-alias-bg-tertiary, rgba(128,128,128,.2)); stroke-width: 3.5; }
-.dqw-ring-glm { fill: none; stroke: var(--dsw-alias-button-primary-fill, #5b8def); stroke-width: 3.5; stroke-linecap: round; transition: stroke-dasharray .3s ease; }
-.dqw-ring-copilot { fill: none; stroke: var(--dsw-alias-label-success, #3fb950); stroke-width: 3.5; stroke-linecap: round; transition: stroke-dasharray .3s ease; }
-.dqw-ring-glm.warn, .dqw-ring-copilot.warn { stroke: var(--dsw-alias-label-warning, #d29922); }
-.dqw-ring-glm.danger, .dqw-ring-copilot.danger { stroke: var(--dsw-alias-label-danger, #c93c3c); }
-.dqw-ball > svg:not(.dqw-ring) { position: relative; width: 16px; height: 16px; }
 .dqw-capsule { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: 1px solid var(--dsw-alias-border-secondary, rgba(128,128,128,.35)); border-radius: 999px; background: var(--dsw-alias-bg-base, rgba(128,128,128,.08)); background: color-mix(in srgb, var(--dsw-alias-bg-base, #1f1f1f) 86%, transparent); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); box-shadow: 0 4px 14px rgba(0,0,0,.22); color: var(--dsw-alias-label-primary, inherit); font: inherit; font-size: 11px; line-height: 24px; cursor: pointer; user-select: none; white-space: nowrap; }
 .dqw-capsule:hover { border-color: var(--dsw-alias-border-primary, var(--dsw-alias-border-secondary, rgba(128,128,128,.35))); }
 .dqw-capsule:focus-visible { outline: 2px solid var(--dsw-alias-brand-primary, #5b8def); outline-offset: 2px; }
@@ -166,14 +127,14 @@ const FLOAT_STYLE_TEXT = `
 .dqw-capsule-glm, .dqw-capsule-copilot { font-variant-numeric: tabular-nums; font-weight: 600; }
 .dqw-capsule-glm.warn, .dqw-capsule-copilot.warn { color: var(--dsw-alias-label-warning, #d29922); }
 .dqw-capsule-glm.danger, .dqw-capsule-copilot.danger { color: var(--dsw-alias-label-danger, #c93c3c); }
+@media (prefers-reduced-motion: no-preference) {
+  .dqw-capsule[data-alert] { animation: dqw-pulse 1.6s ease-in-out infinite; }
+}
+@keyframes dqw-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
 .dqw-menu { position: fixed; min-width: 150px; padding: 4px; 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) 88%, 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); font: inherit; display: flex; flex-direction: column; }
 .dqw-menu[hidden] { display: none; }
 .dqw-menu-item { display: flex; align-items: center; gap: 6px; margin: 0; padding: 6px 10px; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; font-size: 11px; line-height: 16px; text-align: left; cursor: pointer; }
 .dqw-menu-item:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.12)); }
-@media (prefers-reduced-motion: no-preference) {
-  .dqw-ball[data-alert] { animation: dqw-ball-pulse 1.6s ease-in-out infinite; }
-}
-@keyframes dqw-ball-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
 .dqw-panel { position: fixed; width: min(320px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow-y: auto; 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-panel { background: var(--dsw-alias-bg-elevated, var(--dsw-alias-bg-base, #1f1f1f)); } }
 .dqw-panel[hidden] { display: none; }
@@ -185,6 +146,43 @@ const FLOAT_STYLE_TEXT = `
 .dqw-panel-back:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.12)); color: var(--dsw-alias-label-primary, inherit); }
 .dqw-panel-close { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 24px; height: 24px; margin: 0; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--dsw-alias-label-secondary, inherit); cursor: pointer; font: inherit; font-size: 12px; line-height: 1; }
 .dqw-panel-close: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-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; 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-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; }
+.dqw-big .dqw-big-label { font-size: 9.5px; line-height: 13px; opacity: .65; }
+.dqw-muted { margin: 0; font-size: 10px; line-height: 14px; opacity: .7; }
+.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); }
 `
 
 function localeFor(win) {
@@ -276,37 +274,7 @@ function menuItem(doc, action, label) {
   return item
 }
 
-/** Segmented quota ring: GLM owns the top half, Copilot the bottom half. */
-function ringSvg(doc) {
-  const namespace = 'http://www.w3.org/2000/svg'
-  const svg = doc.createElementNS(namespace, 'svg')
-  svg.setAttribute('class', 'dqw-ring')
-  svg.setAttribute('viewBox', '0 0 38 38')
-  svg.setAttribute('aria-hidden', 'true')
-  svg.setAttribute('focusable', 'false')
-  const track = doc.createElementNS(namespace, 'circle')
-  track.setAttribute('class', 'dqw-ring-track')
-  const glm = doc.createElementNS(namespace, 'circle')
-  glm.setAttribute('class', 'dqw-ring-glm')
-  glm.setAttribute('transform', 'rotate(-90 19 19)')
-  const copilot = doc.createElementNS(namespace, 'circle')
-  copilot.setAttribute('class', 'dqw-ring-copilot')
-  copilot.setAttribute('transform', 'rotate(90 19 19)')
-  track.setAttribute('cx', '19')
-  track.setAttribute('cy', '19')
-  track.setAttribute('r', String(RING_RADIUS))
-  track.setAttribute('fill', 'none')
-  for (const circle of [glm, copilot]) {
-    circle.setAttribute('cx', '19')
-    circle.setAttribute('cy', '19')
-    circle.setAttribute('r', String(RING_RADIUS))
-    circle.setAttribute('fill', 'none')
-    circle.setAttribute('stroke-dasharray', `0 ${RING_CIRCUMFERENCE}`)
-  }
-  svg.append(track, glm, copilot)
-  return svg
-}
-
+/** Double-chevron icon for the panel's back affordance. */
 function backIcon(doc) {
   const namespace = 'http://www.w3.org/2000/svg'
   const svg = doc.createElementNS(namespace, 'svg')
@@ -437,16 +405,6 @@ export function mountQuotaCard({
   floatHost.dataset.dshQuotaWatchFloat = ''
   const floatRoot = floatHost.attachShadow({ mode: 'open' })
   floatRoot.append(text(doc, 'style', '', FLOAT_STYLE_TEXT))
-  const buildBall = () => {
-    const el = doc.createElement('button')
-    el.type = 'button'
-    el.className = 'dqw-ball'
-    el.dataset.dshQuotaWatchBall = ''
-    el.setAttribute('aria-haspopup', 'dialog')
-    el.setAttribute('aria-expanded', 'false')
-    el.append(ringSvg(doc), quotaIcon(doc))
-    return el
-  }
   const buildCapsule = () => {
     const el = doc.createElement('div')
     el.className = 'dqw-capsule'
@@ -462,8 +420,8 @@ export function mountQuotaCard({
     )
     return el
   }
-  // One surface at a time: ball (default) or capsule (persisted mode).
-  let surface = loadFloatMode(win.localStorage) === 'capsule' ? buildCapsule() : buildBall()
+  // Capsule is the only floating surface (0.1.1: the round ball was retired).
+  let surface = buildCapsule()
   floatRoot.append(surface)
   /** Session hide only hides the surface; the host stays alive for the panel. */
   const syncFloatVisibility = () => {
@@ -480,9 +438,9 @@ export function mountQuotaCard({
     const viewHeight = win.innerHeight ?? 768
     const saved = loadFloatGeometry(win.localStorage)
     const point = clampPoint(
-      saved ?? { x: viewWidth - BALL_MARGIN - BALL_SIZE, y: viewHeight - BALL_MARGIN - BALL_SIZE },
+      saved ?? { x: viewWidth - SURFACE_MARGIN - SURFACE_SIZE, y: viewHeight - SURFACE_MARGIN - SURFACE_SIZE },
       { width: viewWidth, height: viewHeight },
-      BALL_SIZE,
+      SURFACE_SIZE,
     )
     floatHost.style.left = `${Math.round(point.x)}px`
     floatHost.style.top = `${Math.round(point.y)}px`
@@ -534,7 +492,7 @@ export function mountQuotaCard({
       const point = clampPoint(
         { x: event.clientX, y: event.clientY },
         { width: viewWidth, height: viewHeight },
-        BALL_SIZE,
+        SURFACE_SIZE,
       )
       floatHost.style.left = `${Math.round(point.x)}px`
       floatHost.style.top = `${Math.round(point.y)}px`
@@ -627,45 +585,6 @@ export function mountQuotaCard({
     return [row]
   }
 
-  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.dshQuotaWatchPanelProvider = 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
-  }
-
   /** Panel chrome: optional back, title, always a close affordance. */
   const panelHeader = ({ title, showBack = false }) => {
     const header = doc.createElement('div')
@@ -697,10 +616,13 @@ export function mountQuotaCard({
     const providers = snapshot?.providers ?? []
     const glm = providers.find((provider) => provider?.key === 'glm')
     const copilot = providers.find((provider) => provider?.key === 'copilot')
+    // The overview reuses the card's row-summary renderer verbatim so the
+    // panel looks exactly like the 0.0.18 sidebar rows (label · bar · percent
+    // · extra · chevron).
     const rows = [
-      renderOverviewProvider('glm', glmRowModel(glm)),
-      renderOverviewProvider('copilot', copilotRowModel(copilot)),
-    ].filter(Boolean)
+      renderProvider('glm', glmRowModel(glm)),
+      renderProvider('copilot', copilotRowModel(copilot)),
+    ].filter(Boolean).flat()
     if (rows.length === 0) {
       panel.append(text(doc, 'p', 'dqw-muted', lastUpdated.textContent || copy.loading))
       return
@@ -708,6 +630,10 @@ export function mountQuotaCard({
     const list = doc.createElement('div')
     list.className = 'dqw-overview-list'
     list.append(...rows)
+    // Tag the reused rows for the panel's own click/keyboard routing.
+    for (const row of list.querySelectorAll('[data-dsh-quota-watch-row]')) {
+      row.dataset.dshQuotaWatchPanelProvider = row.dataset.dshQuotaWatchRow
+    }
     panel.append(list)
   }
 
@@ -869,16 +795,6 @@ export function mountQuotaCard({
     surface.setAttribute('aria-expanded', 'true')
   }
 
-  const applyArc = (circle, model) => {
-    const pct = model && typeof model.percent === 'number' && Number.isFinite(model.percent)
-      ? Math.max(0, Math.min(100, model.percent))
-      : null
-    const fill = pct === null ? 0 : (pct / 100) * (RING_CIRCUMFERENCE / 2 - RING_HALF_GAP)
-    circle.setAttribute('stroke-dasharray', `${fill.toFixed(2)} ${(RING_CIRCUMFERENCE - fill).toFixed(2)}`)
-    circle.classList.toggle('warn', pct !== null && pct > 80 && pct <= 95)
-    circle.classList.toggle('danger', pct !== null && pct > 95)
-  }
-
   const renderFloatFace = () => {
     const providers = snapshot?.providers ?? []
     const glm = glmRowModel(providers.find((provider) => provider?.key === 'glm'))
@@ -890,24 +806,19 @@ export function mountQuotaCard({
     }
     syncFloatVisibility()
     if (floatHost.hidden) return
-    if (surface.dataset.dshQuotaWatchCapsule !== undefined) {
-      const paint = (span, model) => {
-        const visible = model !== null && typeof model.percent === 'number' && Number.isFinite(model.percent)
-        span.textContent = visible ? `${model.label} ${formatPercent(model.percent, locale)}` : ''
-        span.classList.toggle('warn', visible && model.percent > 80 && model.percent <= 95)
-        span.classList.toggle('danger', visible && model.percent > 95)
-        return visible
-      }
-      const glmVisible = paint(surface.querySelector('.dqw-capsule-glm'), glm)
-      const copilotVisible = paint(surface.querySelector('.dqw-capsule-copilot'), copilot)
-      surface.querySelector('.dqw-capsule-sep').hidden = !glmVisible || !copilotVisible
-    } else {
-      applyArc(surface.querySelector('.dqw-ring-glm'), glm)
-      applyArc(surface.querySelector('.dqw-ring-copilot'), copilot)
-      const alert = [glm, copilot].some((model) => model !== null && typeof model.percent === 'number' && model.percent > 95)
-      if (alert) surface.setAttribute('data-alert', 'true')
-      else surface.removeAttribute('data-alert')
+    const paint = (span, model) => {
+      const visible = model !== null && typeof model.percent === 'number' && Number.isFinite(model.percent)
+      span.textContent = visible ? `${model.label} ${formatPercent(model.percent, locale)}` : ''
+      span.classList.toggle('warn', visible && model.percent > 80 && model.percent <= 95)
+      span.classList.toggle('danger', visible && model.percent > 95)
+      return visible
     }
+    const glmVisible = paint(surface.querySelector('.dqw-capsule-glm'), glm)
+    const copilotVisible = paint(surface.querySelector('.dqw-capsule-copilot'), copilot)
+    surface.querySelector('.dqw-capsule-sep').hidden = !glmVisible || !copilotVisible
+    const alert = [glm, copilot].some((model) => model !== null && typeof model.percent === 'number' && model.percent > 95)
+    if (alert) surface.setAttribute('data-alert', 'true')
+    else surface.removeAttribute('data-alert')
     const summary = [glm, copilot]
       .filter(Boolean)
       .map((model) => `${model.label} ${formatPercent(model.percent, locale)}`)
@@ -922,7 +833,8 @@ export function mountQuotaCard({
       suppressNextClick = false
       return
     }
-    if (openKey === 'overview' && !panel.hidden) {
+    // Toggle semantics (same as the 0.0.18 rail): any open panel closes first.
+    if (openKey !== undefined && !panel.hidden) {
       openKey = undefined
       syncPop()
       return
@@ -934,26 +846,9 @@ export function mountQuotaCard({
     event.preventDefault()
     onSurfaceClick()
   }
-  /** Swap ball ↔ capsule: persist, close the panel, rebuild and re-wire the surface. */
-  const setFloatMode = (nextMode) => {
-    saveFloatMode(win.localStorage, nextMode)
-    openKey = undefined
-    menu.hidden = true
-    syncPop()
-    const previous = surface
-    surface = nextMode === 'capsule' ? buildCapsule() : buildBall()
-    previous.replaceWith(surface)
-    surface.addEventListener('click', onSurfaceClick)
-    surface.addEventListener('keydown', onSurfaceKeydown)
-    surface.addEventListener('contextmenu', onSurfaceContext)
-    disposeDrag()
-    disposeDrag = attachDrag(surface)
-    renderFloatFace()
-  }
   const hasCardMount = () => Boolean(footArea(doc))
   const openMenu = () => {
-    const isBall = surface.dataset.dshQuotaWatchBall !== undefined
-    const items = [menuItem(doc, 'toggle-mode', isBall ? copy.menu.toggleToCapsule : copy.menu.toggleToBall)]
+    const items = []
     if (hasCardMount()) {
       items.push(menuItem(doc, 'toggle-card', surfaceFlags.cardHidden ? copy.menu.showCard : copy.menu.hideCard))
     }
@@ -980,9 +875,7 @@ export function mountQuotaCard({
     const item = event.target?.closest?.('[data-menu]')
     if (!item) return
     const action = item.dataset.menu
-    if (action === 'toggle-mode') {
-      setFloatMode(surface.dataset.dshQuotaWatchBall !== undefined ? 'capsule' : 'ball')
-    } else if (action === 'toggle-card') {
+    if (action === 'toggle-card') {
       setCardHidden(!surfaceFlags.cardHidden)
     } else if (action === 'refresh') {
       void poll(true)
@@ -1148,6 +1041,15 @@ export function mountQuotaCard({
   body.addEventListener('click', onBodyClick)
   body.addEventListener('keydown', onBodyKeydown)
   panel.addEventListener('click', onPanelClick)
+  panel.addEventListener('keydown', (event) => {
+    if (event.key !== 'Enter' && event.key !== ' ') return
+    const row = event.target?.closest?.('[data-dsh-quota-watch-panel-provider][data-expandable]')
+    if (!row) return
+    event.preventDefault()
+    openKey = row.dataset.dshQuotaWatchPanelProvider
+    panelNav = true
+    syncPop()
+  })
   surface.addEventListener('click', onSurfaceClick)
   surface.addEventListener('keydown', onSurfaceKeydown)
   surface.addEventListener('contextmenu', onSurfaceContext)