@iasiv5/dsh-quota-watch 0.1.1 → 0.1.3

package/README.md

@@ -8,8 +8,8 @@
 
 - **悬浮胶囊**（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 收起态）时卡片自然缺席、无报错，由悬浮胶囊承载入口。
-- **右键菜单**：显示 / 隐藏侧边栏卡片 · 立即刷新 · 隐藏悬浮胶囊。菜单项随上下文增减（无侧栏卡片挂载点时不显示卡片项）。「隐藏悬浮胶囊」为**会话级**——刷新页面即恢复，卡片上的切换按钮可在会话内直接唤回，任何时刻都至少有一条找回路径。
+- **侧边栏卡片（可选，默认隐藏）**：胶囊是默认界面；需要侧栏卡片时在胶囊右键菜单开启「显示侧边栏卡片」（Web profile 侧栏底部区块存在时才可选）。卡片显示时提供摘要行 + 行点击开面板 + 行首 provider 名称点击立即探测。侧栏收起（Web 窄栏）或容器过窄（<160px，跨 profile 通用判据）时卡片自动隐藏，侧栏整体不存在（Desktop 收起态）同样自然缺席、无报错——入口始终由悬浮胶囊承载。
+- **右键菜单**：显示 / 隐藏侧边栏卡片 · 立即刷新。菜单项随上下文增减（无侧栏卡片挂载点时只剩刷新项）。
 - 凭据缺失的 provider 不渲染摘要行与胶囊分段（两者皆缺时悬浮胶囊与卡片一并隐藏）；探测失败时保留最后一次成功数据并在行上加 ⚠ 过期标记（⚠ 只出现在面板与卡片行内，不上球）。
 - 宿主默认每 60 秒探测（窗口 + 用量 + Copilot）；profile patch 可将 `pollIntervalSec` 设置在 30–3600 秒。浏览器页签可见时每 30 秒刷新视图，隐藏时暂停。
 

package/lib/client.js

@@ -117,14 +117,14 @@ function saveFloatGeometry(storage, point) {
 function loadSurfaceFlags(storage) {
   try {
     const raw = storage.getItem(SURFACE_FLAGS_KEY);
-    if (typeof raw !== "string" || raw === "") return { cardHidden: false };
+    if (typeof raw !== "string" || raw === "") return { cardHidden: true };
     const parsed = JSON.parse(raw);
     if (typeof parsed !== "object" || parsed === null || typeof parsed.cardHidden !== "boolean") {
-      return { cardHidden: false };
+      return { cardHidden: true };
     }
     return { cardHidden: parsed.cardHidden };
   } catch {
-    return { cardHidden: false };
+    return { cardHidden: true };
   }
 }
 function saveSurfaceFlags(storage, flags) {
@@ -138,9 +138,11 @@ function saveSurfaceFlags(storage, flags) {
 var name = "quota-watch-client";
 var inject = [];
 var CARD_SELECTOR = "[data-dsh-quota-watch-card]";
+var FLOAT_SELECTOR = "[data-dsh-quota-watch-float]";
 var FETCH_TIMEOUT_MS = 15e3;
 var SURFACE_SIZE = 38;
 var SURFACE_MARGIN = 16;
+var CARD_MIN_WIDTH = 160;
 var COPY = {
   zh: {
     title: "Token\u989D\u5EA6",
@@ -149,9 +151,7 @@ var COPY = {
     menu: {
       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\u80F6\u56CA",
-      showBall: "\u663E\u793A\u60AC\u6D6E\u80F6\u56CA"
+      refreshNow: "\u7ACB\u5373\u5237\u65B0"
     },
     backToOverview: "\u8FD4\u56DE\u989D\u5EA6\u6982\u89C8",
     providerNames: { glm: "GLM", copilot: "Copilot" },
@@ -184,9 +184,7 @@ var COPY = {
     menu: {
       showCard: "Show sidebar card",
       hideCard: "Hide sidebar card",
-      refreshNow: "Refresh now",
-      hideBall: "Hide floating capsule",
-      showBall: "Show floating capsule"
+      refreshNow: "Refresh now"
     },
     backToOverview: "Back to quota overview",
     providerNames: { glm: "GLM", copilot: "Copilot" },
@@ -236,11 +234,14 @@ var STYLE_TEXT = `
 .dqw-chev { font-size: 9px; line-height: 14px; opacity: .6; flex: none; width: 10px; text-align: center; }
 .dqw-stale-mark { flex: none; font-size: 9px; line-height: 14px; color: var(--dsw-alias-label-warning, #b46900); cursor: help; }
 .dqw-errtext { font-size: 10px; line-height: 14px; opacity: .7; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.dqw-ball-toggle { position: absolute; top: 2px; right: 2px; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin: 0; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--dsw-alias-label-secondary, inherit); cursor: pointer; opacity: .4; }
-.dqw-card:hover .dqw-ball-toggle, .dqw-ball-toggle:focus-visible, .dqw-ball-toggle[data-ball-hidden="true"] { opacity: 1; }
-.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-rail-trigger { display: none; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--dsw-alias-label-primary, inherit); cursor: pointer; transition: background-color .12s, color .12s; }
+.dqw-rail-trigger svg { display: block; width: 16px; height: 16px; }
+.dqw-rail-trigger:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.12)); color: var(--dsw-alias-label-primary, inherit); }
+.dqw-rail-trigger:active:not(:disabled), .dqw-rail-trigger[aria-expanded="true"] { background: var(--dsw-alias-interactive-bg-active, rgba(128,128,128,.18)); color: var(--dsw-alias-label-primary, inherit); }
+.dqw-rail-trigger:focus-visible { outline: 2px solid var(--dsw-alias-brand-primary, #5b8def); outline-offset: 2px; }
+:host([data-dsh-quota-watch-sidebar-collapsed]) .dqw-card { display: none; }
+:host([data-dsh-quota-watch-sidebar-collapsed]) .dqw-rail-trigger { display: inline-flex; }
+@media print { :host { display: none !important; } }
 `;
 var FLOAT_STYLE_TEXT = `
 :host { position: fixed; z-index: 2147483000; }
@@ -251,15 +252,17 @@ 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); }
+.dqw-capsule[hidden] { display: none; }
 @media (prefers-reduced-motion: no-preference) {
   .dqw-capsule[data-alert] { animation: dqw-pulse 1.6s ease-in-out infinite; }
 }
+@media print { :host { display: none !important; } }
 @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)); }
-.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; }
+.dqw-panel { position: fixed; z-index: 2147483000; min-width: 166px; max-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; }
 .dqw-panel *, .dqw-panel *::before, .dqw-panel *::after { box-sizing: border-box; }
@@ -271,6 +274,7 @@ var FLOAT_STYLE_TEXT = `
 .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-bar { background: var(--dsw-alias-bg-tertiary, rgba(128,128,128,.38)); }
 .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)); }
@@ -465,7 +469,7 @@ function mountQuotaCard({
 } = {}) {
   if (!doc?.body || typeof fetchImpl !== "function") return () => {
   };
-  if (doc.querySelector(CARD_SELECTOR)) return () => {
+  if (doc.querySelector(CARD_SELECTOR) || doc.querySelector(FLOAT_SELECTOR)) return () => {
   };
   const locale = localeFor(win);
   const copy = COPY[locale];
@@ -485,15 +489,16 @@ function mountQuotaCard({
   const lastUpdated = text(doc, "p", "dqw-meta", copy.loading);
   lastUpdated.dataset.role = "updated";
   body.append(lastUpdated);
-  const ballToggle = doc.createElement("button");
-  ballToggle.type = "button";
-  ballToggle.className = "dqw-ball-toggle";
-  ballToggle.dataset.action = "toggle-ball";
-  ballToggle.append(quotaIcon(doc));
-  ballToggle.addEventListener("click", () => {
-    setBallSessionHidden(!ballSessionHidden);
-  });
-  card.append(body, ballToggle);
+  const railTrigger = doc.createElement("button");
+  railTrigger.type = "button";
+  railTrigger.className = "dqw-rail-trigger";
+  railTrigger.dataset.dshQuotaWatchRail = "";
+  railTrigger.title = copy.title;
+  railTrigger.setAttribute("aria-label", copy.title);
+  railTrigger.setAttribute("aria-haspopup", "dialog");
+  railTrigger.setAttribute("aria-expanded", "false");
+  railTrigger.append(quotaIcon(doc));
+  card.append(body, railTrigger);
   cardRoot.append(style, card);
   const panel = doc.createElement("div");
   panel.className = "dqw-panel";
@@ -523,12 +528,8 @@ function mountQuotaCard({
   let surface = buildCapsule();
   floatRoot.append(surface);
   const syncFloatVisibility = () => {
-    surface.hidden = ballSessionHidden || dataHidden;
+    surface.hidden = dataHidden;
     floatHost.hidden = dataHidden;
-    ballToggle.setAttribute("data-ball-hidden", String(ballSessionHidden));
-    const toggleLabel = ballSessionHidden ? copy.menu.showBall : copy.menu.hideBall;
-    ballToggle.setAttribute("aria-label", toggleLabel);
-    ballToggle.title = toggleLabel;
   };
   doc.documentElement.append(floatHost);
   const applyFloatGeometry = () => {
@@ -542,7 +543,6 @@ function mountQuotaCard({
     );
     floatHost.style.left = `${Math.round(point.x)}px`;
     floatHost.style.top = `${Math.round(point.y)}px`;
-    saveFloatGeometry(win.localStorage, point);
   };
   applyFloatGeometry();
   floatRoot.append(panel);
@@ -607,18 +607,8 @@ function mountQuotaCard({
   let queuedPlace = false;
   let openKey;
   let panelNav = false;
-  let ballSessionHidden = false;
   let dataHidden = false;
   let surfaceFlags = loadSurfaceFlags(win.localStorage);
-  const setBallSessionHidden = (hidden) => {
-    const wasHidden = ballSessionHidden;
-    ballSessionHidden = hidden;
-    if (hidden && !wasHidden && openKey !== void 0) {
-      openKey = void 0;
-      syncPop();
-    }
-    syncFloatVisibility();
-  };
   const setCardHidden = (hidden) => {
     surfaceFlags = { cardHidden: hidden };
     saveSurfaceFlags(win.localStorage, surfaceFlags);
@@ -813,9 +803,13 @@ function mountQuotaCard({
     }
   }
   let lastAnchor = null;
+  const anchorFromRow = (key) => () => body.querySelector(`[data-dsh-quota-watch-row="${key}"]`);
+  const anchorFromEl = (el) => () => el;
   const placePanel = () => {
-    if (panel.hidden || !lastAnchor) return;
-    const rect = lastAnchor.getBoundingClientRect();
+    if (panel.hidden) return;
+    const anchor = lastAnchor?.();
+    if (!anchor || !anchor.isConnected) return;
+    const rect = anchor.getBoundingClientRect();
     const viewWidth = win.innerWidth ?? 1024;
     const viewHeight = win.innerHeight ?? 768;
     const width = panel.offsetWidth || 240;
@@ -837,6 +831,7 @@ function mountQuotaCard({
       lastAnchor = null;
       panelNav = false;
       surface.setAttribute("aria-expanded", "false");
+      railTrigger.setAttribute("aria-expanded", "false");
       return;
     }
     if (openKey === "overview") {
@@ -847,6 +842,7 @@ function mountQuotaCard({
       panel.hidden = false;
       placePanel();
       surface.setAttribute("aria-expanded", "true");
+      railTrigger.setAttribute("aria-expanded", "true");
       return;
     }
     const provider = (snapshot?.providers ?? []).find((item) => item?.key === openKey);
@@ -863,6 +859,7 @@ function mountQuotaCard({
     panel.hidden = false;
     placePanel();
     surface.setAttribute("aria-expanded", "true");
+    railTrigger.setAttribute("aria-expanded", "true");
   };
   const renderFloatFace = () => {
     const providers = snapshot?.providers ?? [];
@@ -917,7 +914,6 @@ function mountQuotaCard({
       items.push(menuItem(doc, "toggle-card", surfaceFlags.cardHidden ? copy.menu.showCard : copy.menu.hideCard));
     }
     items.push(menuItem(doc, "refresh", copy.menu.refreshNow));
-    items.push(menuItem(doc, "hide-ball", copy.menu.hideBall));
     menu.replaceChildren(...items);
     menu.hidden = false;
     const rect = surface.getBoundingClientRect();
@@ -935,6 +931,14 @@ function mountQuotaCard({
     event.preventDefault();
     openMenu();
   };
+  const onRailClick = () => {
+    if (openKey !== void 0 && !panel.hidden) {
+      openKey = void 0;
+      syncPop();
+      return;
+    }
+    openOverview(railTrigger);
+  };
   const onMenuClick = (event) => {
     const item = event.target?.closest?.("[data-menu]");
     if (!item) return;
@@ -943,12 +947,28 @@ function mountQuotaCard({
       setCardHidden(!surfaceFlags.cardHidden);
     } else if (action === "refresh") {
       void poll(true);
-    } else if (action === "hide-ball") {
-      setBallSessionHidden(true);
     }
     menu.hidden = true;
   };
   menu.addEventListener("click", onMenuClick);
+  let currentFoot = null;
+  let footTooNarrow = false;
+  let noDataHidden = false;
+  const syncFootNarrowness = () => {
+    footTooNarrow = currentFoot !== null && currentFoot.clientWidth > 0 && currentFoot.clientWidth < CARD_MIN_WIDTH;
+  };
+  const syncCardVisibility = () => {
+    syncFootNarrowness();
+    const cardOn = !surfaceFlags.cardHidden;
+    const showCard = cardOn && !sidebarCollapsed && !footTooNarrow && !noDataHidden;
+    const showRail = cardOn && sidebarCollapsed && !noDataHidden;
+    container.hidden = !showCard && !showRail;
+    if (showRail) container.dataset.dshQuotaWatchSidebarCollapsed = "";
+    else delete container.dataset.dshQuotaWatchSidebarCollapsed;
+  };
+  const footResizeObserver = typeof win.ResizeObserver === "function" ? new win.ResizeObserver(() => {
+    syncCardVisibility();
+  }) : null;
   const renderAll = () => {
     const providers = snapshot?.providers ?? [];
     const glm = providers.find((provider) => provider?.key === "glm");
@@ -960,7 +980,8 @@ function mountQuotaCard({
     if (glmParts) fragment.append(...glmParts);
     if (copilotParts) fragment.append(...copilotParts);
     body.replaceChildren(fragment);
-    container.hidden = surfaceFlags.cardHidden || glmParts === null && copilotParts === null;
+    noDataHidden = glmParts === null && copilotParts === null;
+    syncCardVisibility();
     const updated = formatTime(snapshot?.updatedAt ? new Date(snapshot.updatedAt).toISOString() : "", locale);
     if (updated) {
       lastUpdated.hidden = true;
@@ -995,6 +1016,11 @@ function mountQuotaCard({
     if (container.parentElement !== foot || foot.firstElementChild !== container) {
       foot.insertBefore(container, foot.firstChild);
     }
+    if (currentFoot !== foot) {
+      currentFoot = foot;
+      footResizeObserver?.disconnect();
+      footResizeObserver?.observe(foot);
+    }
   };
   const schedulePlace = () => {
     if (queuedPlace || disposed) return;
@@ -1004,10 +1030,24 @@ function mountQuotaCard({
       if (!disposed) place();
     });
   };
+  let sidebarCollapsed = Boolean(doc.querySelector("[data-sidebar-collapsed]"));
+  const syncSidebarCollapsed = () => {
+    const next = Boolean(doc.querySelector("[data-sidebar-collapsed]"));
+    if (next !== sidebarCollapsed) {
+      sidebarCollapsed = next;
+      renderAll();
+    }
+  };
   const observer = new win.MutationObserver(() => {
+    syncSidebarCollapsed();
     schedulePlace();
   });
-  observer.observe(doc.body, { childList: true, subtree: true });
+  observer.observe(doc.body, {
+    childList: true,
+    subtree: true,
+    attributes: true,
+    attributeFilter: ["data-sidebar-collapsed"]
+  });
   place();
   const startPolling = () => {
     if (timer !== void 0 || doc.visibilityState === "hidden" || disposed) return;
@@ -1024,15 +1064,15 @@ function mountQuotaCard({
     if (doc.visibilityState === "hidden") stopPolling();
     else startPolling();
   };
-  const toggleRow = (key, anchorEl) => {
+  const toggleRow = (key) => {
     panelNav = false;
-    lastAnchor = anchorEl ?? null;
+    lastAnchor = anchorFromRow(key);
     openKey = openKey === key ? void 0 : key;
     renderAll();
   };
   const openOverview = (anchorEl) => {
     panelNav = false;
-    lastAnchor = anchorEl ?? null;
+    lastAnchor = anchorFromEl(anchorEl);
     openKey = "overview";
     syncPop();
   };
@@ -1060,7 +1100,7 @@ function mountQuotaCard({
       return;
     }
     const row = event.target?.closest?.("[data-dsh-quota-watch-row][data-expandable]");
-    if (row) toggleRow(row.dataset.dshQuotaWatchRow, row);
+    if (row) toggleRow(row.dataset.dshQuotaWatchRow);
   };
   const onBodyKeydown = (event) => {
     if (event.key !== "Enter" && event.key !== " ") return;
@@ -1085,6 +1125,16 @@ function mountQuotaCard({
   };
   const onWinResize = () => {
     placePanel();
+    syncCardVisibility();
+    const viewWidth = win.innerWidth ?? 1024;
+    const viewHeight = win.innerHeight ?? 768;
+    const x = parseFloat(floatHost.style.left);
+    const y = parseFloat(floatHost.style.top);
+    if (Number.isFinite(x) && Number.isFinite(y)) {
+      const point = clampPoint({ x, y }, { width: viewWidth, height: viewHeight }, SURFACE_SIZE);
+      floatHost.style.left = `${Math.round(point.x)}px`;
+      floatHost.style.top = `${Math.round(point.y)}px`;
+    }
   };
   const onDocKeydown = (event) => {
     if (event.key !== "Escape") return;
@@ -1112,6 +1162,7 @@ function mountQuotaCard({
   surface.addEventListener("click", onSurfaceClick);
   surface.addEventListener("keydown", onSurfaceKeydown);
   surface.addEventListener("contextmenu", onSurfaceContext);
+  railTrigger.addEventListener("click", onRailClick);
   let disposeDrag = attachDrag(surface);
   doc.addEventListener("visibilitychange", onVisibilityChange);
   doc.addEventListener("pointerdown", onDocPointerDown, true);
@@ -1134,6 +1185,7 @@ function mountQuotaCard({
     surface.removeEventListener("click", onSurfaceClick);
     surface.removeEventListener("keydown", onSurfaceKeydown);
     surface.removeEventListener("contextmenu", onSurfaceContext);
+    railTrigger.removeEventListener("click", onRailClick);
     menu.removeEventListener("click", onMenuClick);
     disposeDrag();
     container.remove();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iasiv5/dsh-quota-watch",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "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

@@ -47,14 +47,15 @@ export function saveFloatGeometry(storage, point) {
 export function loadSurfaceFlags(storage) {
   try {
     const raw = storage.getItem(SURFACE_FLAGS_KEY)
-    if (typeof raw !== 'string' || raw === '') return { cardHidden: false }
+    // The sidebar card is opt-in: the floating capsule is the default surface.
+    if (typeof raw !== 'string' || raw === '') return { cardHidden: true }
     const parsed = JSON.parse(raw)
     if (typeof parsed !== 'object' || parsed === null || typeof parsed.cardHidden !== 'boolean') {
-      return { cardHidden: false }
+      return { cardHidden: true }
     }
     return { cardHidden: parsed.cardHidden }
   } catch {
-    return { cardHidden: false }
+    return { cardHidden: true }
   }
 }
 

package/src/client.mjs

@@ -6,9 +6,14 @@ export const name = 'quota-watch-client'
 export const inject = []
 
 const CARD_SELECTOR = '[data-dsh-quota-watch-card]'
+const FLOAT_SELECTOR = '[data-dsh-quota-watch-float]'
 const FETCH_TIMEOUT_MS = 15_000
 const SURFACE_SIZE = 38
 const SURFACE_MARGIN = 16
+// Below this a mounted card would clip into unreadable text (collapsed web
+// rails, squeezed desktop layouts) — hide it and let the capsule carry the
+// entry. clientWidth 0 (no layout yet, jsdom) counts as "unknown", not narrow.
+const CARD_MIN_WIDTH = 160
 
 const COPY = {
   zh: {
@@ -19,8 +24,6 @@ const COPY = {
       showCard: '显示侧边栏卡片',
       hideCard: '隐藏侧边栏卡片',
       refreshNow: '立即刷新',
-      hideBall: '隐藏悬浮胶囊',
-      showBall: '显示悬浮胶囊',
     },
     backToOverview: '返回额度概览',
     providerNames: { glm: 'GLM', copilot: 'Copilot' },
@@ -54,8 +57,6 @@ const COPY = {
       showCard: 'Show sidebar card',
       hideCard: 'Hide sidebar card',
       refreshNow: 'Refresh now',
-      hideBall: 'Hide floating capsule',
-      showBall: 'Show floating capsule',
     },
     backToOverview: 'Back to quota overview',
     providerNames: { glm: 'GLM', copilot: 'Copilot' },
@@ -106,11 +107,14 @@ const STYLE_TEXT = `
 .dqw-chev { font-size: 9px; line-height: 14px; opacity: .6; flex: none; width: 10px; text-align: center; }
 .dqw-stale-mark { flex: none; font-size: 9px; line-height: 14px; color: var(--dsw-alias-label-warning, #b46900); cursor: help; }
 .dqw-errtext { font-size: 10px; line-height: 14px; opacity: .7; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.dqw-ball-toggle { position: absolute; top: 2px; right: 2px; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin: 0; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--dsw-alias-label-secondary, inherit); cursor: pointer; opacity: .4; }
-.dqw-card:hover .dqw-ball-toggle, .dqw-ball-toggle:focus-visible, .dqw-ball-toggle[data-ball-hidden="true"] { opacity: 1; }
-.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-rail-trigger { display: none; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--dsw-alias-label-primary, inherit); cursor: pointer; transition: background-color .12s, color .12s; }
+.dqw-rail-trigger svg { display: block; width: 16px; height: 16px; }
+.dqw-rail-trigger:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.12)); color: var(--dsw-alias-label-primary, inherit); }
+.dqw-rail-trigger:active:not(:disabled), .dqw-rail-trigger[aria-expanded="true"] { background: var(--dsw-alias-interactive-bg-active, rgba(128,128,128,.18)); color: var(--dsw-alias-label-primary, inherit); }
+.dqw-rail-trigger:focus-visible { outline: 2px solid var(--dsw-alias-brand-primary, #5b8def); outline-offset: 2px; }
+:host([data-dsh-quota-watch-sidebar-collapsed]) .dqw-card { display: none; }
+:host([data-dsh-quota-watch-sidebar-collapsed]) .dqw-rail-trigger { display: inline-flex; }
+@media print { :host { display: none !important; } }
 `
 
 // Float shell (capsule) and the panel live on their own shadow host at the
@@ -127,15 +131,17 @@ 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); }
+.dqw-capsule[hidden] { display: none; }
 @media (prefers-reduced-motion: no-preference) {
   .dqw-capsule[data-alert] { animation: dqw-pulse 1.6s ease-in-out infinite; }
 }
+@media print { :host { display: none !important; } }
 @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)); }
-.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; }
+.dqw-panel { position: fixed; z-index: 2147483000; min-width: 166px; max-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; }
 .dqw-panel *, .dqw-panel *::before, .dqw-panel *::after { box-sizing: border-box; }
@@ -147,6 +153,7 @@ const FLOAT_STYLE_TEXT = `
 .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-bar { background: var(--dsw-alias-bg-tertiary, rgba(128,128,128,.38)); }
 .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)); }
@@ -363,7 +370,7 @@ export function mountQuotaCard({
   pollIntervalMs = CLIENT_POLL_INTERVAL_MS,
 } = {}) {
   if (!doc?.body || typeof fetchImpl !== 'function') return () => {}
-  if (doc.querySelector(CARD_SELECTOR)) return () => {}
+  if (doc.querySelector(CARD_SELECTOR) || doc.querySelector(FLOAT_SELECTOR)) return () => {}
 
   const locale = localeFor(win)
   const copy = COPY[locale]
@@ -385,13 +392,18 @@ export function mountQuotaCard({
   const lastUpdated = text(doc, 'p', 'dqw-meta', copy.loading)
   lastUpdated.dataset.role = 'updated'
   body.append(lastUpdated)
-  const ballToggle = doc.createElement('button')
-  ballToggle.type = 'button'
-  ballToggle.className = 'dqw-ball-toggle'
-  ballToggle.dataset.action = 'toggle-ball'
-  ballToggle.append(quotaIcon(doc))
-  ballToggle.addEventListener('click', () => { setBallSessionHidden(!ballSessionHidden) })
-  card.append(body, ballToggle)
+  // Collapsed web rail (0.0.18 behaviour, card opt-in only): a 36px gauge icon
+  // replaces the card body; the shadow CSS swaps them on the host's collapsed flag.
+  const railTrigger = doc.createElement('button')
+  railTrigger.type = 'button'
+  railTrigger.className = 'dqw-rail-trigger'
+  railTrigger.dataset.dshQuotaWatchRail = ''
+  railTrigger.title = copy.title
+  railTrigger.setAttribute('aria-label', copy.title)
+  railTrigger.setAttribute('aria-haspopup', 'dialog')
+  railTrigger.setAttribute('aria-expanded', 'false')
+  railTrigger.append(quotaIcon(doc))
+  card.append(body, railTrigger)
   cardRoot.append(style, card)
   // Details open in a viewport-level floating panel — the only detail surface.
   const panel = doc.createElement('div')
@@ -423,14 +435,10 @@ export function mountQuotaCard({
   // 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. */
+  /** The capsule is always present unless no provider reports anything. */
   const syncFloatVisibility = () => {
-    surface.hidden = ballSessionHidden || dataHidden
+    surface.hidden = dataHidden
     floatHost.hidden = dataHidden
-    ballToggle.setAttribute('data-ball-hidden', String(ballSessionHidden))
-    const toggleLabel = ballSessionHidden ? copy.menu.showBall : copy.menu.hideBall
-    ballToggle.setAttribute('aria-label', toggleLabel)
-    ballToggle.title = toggleLabel
   }
   doc.documentElement.append(floatHost)
   const applyFloatGeometry = () => {
@@ -444,8 +452,9 @@ export function mountQuotaCard({
     )
     floatHost.style.left = `${Math.round(point.x)}px`
     floatHost.style.top = `${Math.round(point.y)}px`
-    // Persist the clamped coordinates so a saved off-screen position self-heals.
-    saveFloatGeometry(win.localStorage, point)
+    // Deliberately NOT persisted here: a window that starts small (Electron
+    // restore, split-screen) must not clobber the user's preferred coordinates.
+    // The visual clamp above applies every mount; storage updates on drag only.
   }
   applyFloatGeometry()
   // Panel lives inside the float shadow root from now on (契约总表「归属时序」).
@@ -515,20 +524,8 @@ export function mountQuotaCard({
   let queuedPlace = false
   let openKey
   let panelNav = false
-  let ballSessionHidden = false
   let dataHidden = false
   let surfaceFlags = loadSurfaceFlags(win.localStorage)
-  const setBallSessionHidden = (hidden) => {
-    const wasHidden = ballSessionHidden
-    ballSessionHidden = hidden
-    // Closing the panel is a one-time consequence of hiding, not a steady state:
-    // card rows must keep opening the panel while the ball stays hidden.
-    if (hidden && !wasHidden && openKey !== undefined) {
-      openKey = undefined
-      syncPop()
-    }
-    syncFloatVisibility()
-  }
   const setCardHidden = (hidden) => {
     surfaceFlags = { cardHidden: hidden }
     saveSurfaceFlags(win.localStorage, surfaceFlags)
@@ -741,10 +738,17 @@ export function mountQuotaCard({
   }
 
   /** Anchor the panel beside its opener (a card row today, the float surface later). */
+  // Anchor resolver: card rows are re-created on every render pass, so keep a
+  // "how to find the anchor" closure instead of a detached element reference
+  // (a detached node's getBoundingClientRect is all zeros → panel teleports).
   let lastAnchor = null
+  const anchorFromRow = (key) => () => body.querySelector(`[data-dsh-quota-watch-row="${key}"]`)
+  const anchorFromEl = (el) => () => el
   const placePanel = () => {
-    if (panel.hidden || !lastAnchor) return
-    const rect = lastAnchor.getBoundingClientRect()
+    if (panel.hidden) return
+    const anchor = lastAnchor?.()
+    if (!anchor || !anchor.isConnected) return
+    const rect = anchor.getBoundingClientRect()
     const viewWidth = win.innerWidth ?? 1024
     const viewHeight = win.innerHeight ?? 768
     const width = panel.offsetWidth || 240
@@ -767,6 +771,7 @@ export function mountQuotaCard({
       lastAnchor = null
       panelNav = false
       surface.setAttribute('aria-expanded', 'false')
+      railTrigger.setAttribute('aria-expanded', 'false')
       return
     }
     if (openKey === 'overview') {
@@ -777,6 +782,7 @@ export function mountQuotaCard({
       panel.hidden = false
       placePanel()
       surface.setAttribute('aria-expanded', 'true')
+      railTrigger.setAttribute('aria-expanded', 'true')
       return
     }
     const provider = (snapshot?.providers ?? []).find((item) => item?.key === openKey)
@@ -793,6 +799,7 @@ export function mountQuotaCard({
     panel.hidden = false
     placePanel()
     surface.setAttribute('aria-expanded', 'true')
+    railTrigger.setAttribute('aria-expanded', 'true')
   }
 
   const renderFloatFace = () => {
@@ -853,7 +860,6 @@ export function mountQuotaCard({
       items.push(menuItem(doc, 'toggle-card', surfaceFlags.cardHidden ? copy.menu.showCard : copy.menu.hideCard))
     }
     items.push(menuItem(doc, 'refresh', copy.menu.refreshNow))
-    items.push(menuItem(doc, 'hide-ball', copy.menu.hideBall))
     menu.replaceChildren(...items)
     menu.hidden = false
     const rect = surface.getBoundingClientRect()
@@ -871,6 +877,15 @@ export function mountQuotaCard({
     event.preventDefault()
     openMenu()
   }
+  /** Collapsed-rail gauge icon: toggles the panel, exactly like the capsule. */
+  const onRailClick = () => {
+    if (openKey !== undefined && !panel.hidden) {
+      openKey = undefined
+      syncPop()
+      return
+    }
+    openOverview(railTrigger)
+  }
   const onMenuClick = (event) => {
     const item = event.target?.closest?.('[data-menu]')
     if (!item) return
@@ -879,13 +894,33 @@ export function mountQuotaCard({
       setCardHidden(!surfaceFlags.cardHidden)
     } else if (action === 'refresh') {
       void poll(true)
-    } else if (action === 'hide-ball') {
-      setBallSessionHidden(true)
     }
     menu.hidden = true
   }
   menu.addEventListener('click', onMenuClick)
 
+  // Cross-profile narrow-container detection: a measurably narrow foot would
+  // clip the card into unreadable text regardless of HOW the host signals its
+  // collapsed state — hide the card and let the capsule carry the entry.
+  // clientWidth 0 (no layout yet, jsdom) counts as "unknown", not narrow.
+  let currentFoot = null
+  let footTooNarrow = false
+  let noDataHidden = false
+  const syncFootNarrowness = () => {
+    footTooNarrow = currentFoot !== null && currentFoot.clientWidth > 0 && currentFoot.clientWidth < CARD_MIN_WIDTH
+  }
+  const syncCardVisibility = () => {
+    syncFootNarrowness()
+    const cardOn = !surfaceFlags.cardHidden
+    const showCard = cardOn && !sidebarCollapsed && !footTooNarrow && !noDataHidden
+    const showRail = cardOn && sidebarCollapsed && !noDataHidden
+    container.hidden = !showCard && !showRail
+    if (showRail) container.dataset.dshQuotaWatchSidebarCollapsed = ''
+    else delete container.dataset.dshQuotaWatchSidebarCollapsed
+  }
+  const footResizeObserver = typeof win.ResizeObserver === 'function'
+    ? new win.ResizeObserver(() => { syncCardVisibility() })
+    : null
   const renderAll = () => {
     const providers = snapshot?.providers ?? []
     const glm = providers.find((provider) => provider?.key === 'glm')
@@ -897,7 +932,8 @@ export function mountQuotaCard({
     if (glmParts) fragment.append(...glmParts)
     if (copilotParts) fragment.append(...copilotParts)
     body.replaceChildren(fragment)
-    container.hidden = surfaceFlags.cardHidden || (glmParts === null && copilotParts === null)
+    noDataHidden = glmParts === null && copilotParts === null
+    syncCardVisibility()
     const updated = formatTime(snapshot?.updatedAt ? new Date(snapshot.updatedAt).toISOString() : '', locale)
     if (updated) {
       lastUpdated.hidden = true
@@ -939,6 +975,11 @@ export function mountQuotaCard({
     if (container.parentElement !== foot || foot.firstElementChild !== container) {
       foot.insertBefore(container, foot.firstChild)
     }
+    if (currentFoot !== foot) {
+      currentFoot = foot
+      footResizeObserver?.disconnect()
+      footResizeObserver?.observe(foot)
+    }
   }
 
   const schedulePlace = () => {
@@ -950,10 +991,28 @@ export function mountQuotaCard({
     })
   }
 
+  // Web narrow-rail collapse: the host keeps the footArea but squeezes it, which
+  // clips the card into garbled text — hide the card and let the capsule carry
+  // the entry (0.0.18 shipped dedicated rail CSS; 0.1.0 retired it, and 0.1.2
+  // reintroduces only this visibility signal — zero layout coupling).
+  let sidebarCollapsed = Boolean(doc.querySelector('[data-sidebar-collapsed]'))
+  const syncSidebarCollapsed = () => {
+    const next = Boolean(doc.querySelector('[data-sidebar-collapsed]'))
+    if (next !== sidebarCollapsed) {
+      sidebarCollapsed = next
+      renderAll()
+    }
+  }
   const observer = new win.MutationObserver(() => {
+    syncSidebarCollapsed()
     schedulePlace()
   })
-  observer.observe(doc.body, { childList: true, subtree: true })
+  observer.observe(doc.body, {
+    childList: true,
+    subtree: true,
+    attributes: true,
+    attributeFilter: ['data-sidebar-collapsed'],
+  })
   place()
 
   const startPolling = () => {
@@ -969,15 +1028,15 @@ export function mountQuotaCard({
     if (doc.visibilityState === 'hidden') stopPolling()
     else startPolling()
   }
-  const toggleRow = (key, anchorEl) => {
+  const toggleRow = (key) => {
     panelNav = false
-    lastAnchor = anchorEl ?? null
+    lastAnchor = anchorFromRow(key)
     openKey = openKey === key ? undefined : key
     renderAll()
   }
   const openOverview = (anchorEl) => {
     panelNav = false
-    lastAnchor = anchorEl ?? null
+    lastAnchor = anchorFromEl(anchorEl)
     openKey = 'overview'
     syncPop()
   }
@@ -1005,7 +1064,7 @@ export function mountQuotaCard({
       return
     }
     const row = event.target?.closest?.('[data-dsh-quota-watch-row][data-expandable]')
-    if (row) toggleRow(row.dataset.dshQuotaWatchRow, row)
+    if (row) toggleRow(row.dataset.dshQuotaWatchRow)
   }
   const onBodyKeydown = (event) => {
     if (event.key !== 'Enter' && event.key !== ' ') return
@@ -1026,7 +1085,21 @@ export function mountQuotaCard({
     renderAll()
   }
   const onDocScroll = () => { placePanel() }
-  const onWinResize = () => { placePanel() }
+  const onWinResize = () => {
+    placePanel()
+    syncCardVisibility()
+    // Keep the capsule inside a shrunk viewport; storage keeps the user's
+    // preferred coordinates — only the visual position is clamped here.
+    const viewWidth = win.innerWidth ?? 1024
+    const viewHeight = win.innerHeight ?? 768
+    const x = parseFloat(floatHost.style.left)
+    const y = parseFloat(floatHost.style.top)
+    if (Number.isFinite(x) && Number.isFinite(y)) {
+      const point = clampPoint({ x, y }, { width: viewWidth, height: viewHeight }, SURFACE_SIZE)
+      floatHost.style.left = `${Math.round(point.x)}px`
+      floatHost.style.top = `${Math.round(point.y)}px`
+    }
+  }
   const onDocKeydown = (event) => {
     if (event.key !== 'Escape') return
     if (!menu.hidden) {
@@ -1053,6 +1126,7 @@ export function mountQuotaCard({
   surface.addEventListener('click', onSurfaceClick)
   surface.addEventListener('keydown', onSurfaceKeydown)
   surface.addEventListener('contextmenu', onSurfaceContext)
+  railTrigger.addEventListener('click', onRailClick)
   let disposeDrag = attachDrag(surface)
   doc.addEventListener('visibilitychange', onVisibilityChange)
   doc.addEventListener('pointerdown', onDocPointerDown, true)
@@ -1076,6 +1150,7 @@ export function mountQuotaCard({
     surface.removeEventListener('click', onSurfaceClick)
     surface.removeEventListener('keydown', onSurfaceKeydown)
     surface.removeEventListener('contextmenu', onSurfaceContext)
+    railTrigger.removeEventListener('click', onRailClick)
     menu.removeEventListener('click', onMenuClick)
     disposeDrag()
     container.remove()