@iasiv5/dsh-quota-watch 0.1.12 → 0.1.14

package/README.md

@@ -6,10 +6,9 @@
 
 ## 功能
 
-- **悬浮胶囊**（0.1.1 起为唯一浮动形态，圆球已退役）：常驻屏幕（默认右下角安全区），可自由拖拽到屏幕任意位置停放，位置跨重启记忆，越界自动钳回视口（距边 8px 安全边距）。拖拽跟手（保持抓取点，transform 渲染）；触摸设备可直接拖拽（触摸阈值更宽防误拖）、长按 500ms 呼出菜单，点击热区扩展到 44px，自动避让 iPhone 刘海 / 小黑条（safe-area）。胶囊一行显示「GLM 13% · Copilot 24%」，已用超过 80% 转橙、超过 95% 转红，任一 provider 超 95% 时胶囊轻微脉动（尊重系统「减少动态效果」设置，开启时不脉动）；颜色使用 DSH 主题语义变量，自动适配浅色 / 深色主题。悬停提示与 aria-label 实时给出摘要。
-- **面板**：点击胶囊展开浮动详情面板（半透明毛玻璃底，宽 `min(320px, 100vw−24px)`，靠边自动翻侧，滚动 / 缩放跟随；≤480px 窄屏自动改为底部弹层并避开 safe-area），头部带标题与 ✕，Esc 或点击面板外关闭。概览列两个 provider 行，点击进入详情：GLM 为今日 Tokens / 调用次数双大数字 + 五列对齐窗口网格（MCP（月）→ 5 小时 → 每月 → 每周固定排序，周窗口未下发时显示「每周额度 · ♾️（无限）」占位）+ 分模型用量行；Copilot 为可用额度、本期已用（credits 消耗 + 弱化百分比）、重置时间三行。接口未下发有效 `remaining` / `percent_remaining` 时该行不渲染，`credits_used` 绝不用于推算余额。
-- **侧边栏卡片（可选，默认隐藏）**：胶囊是默认界面；需要侧栏卡片时在胶囊右键菜单开启「显示侧边栏卡片」（Web profile 侧栏底部区块存在时才可选）。卡片显示时提供摘要行 + 行点击开面板 + 行首 provider 名称点击立即探测。侧栏收起（Web 窄栏）或容器过窄（<160px，跨 profile 通用判据）时卡片自动隐藏，侧栏整体不存在（Desktop 收起态）同样自然缺席、无报错——入口始终由悬浮胶囊承载。
-- **右键菜单**：显示 / 隐藏侧边栏卡片 · 立即刷新。菜单项随上下文增减（无侧栏卡片挂载点时只剩刷新项）。
+- **悬浮胶囊**（0.1.1 起为唯一浮动形态，圆球已退役）：常驻屏幕（默认右下角安全区），可自由拖拽到屏幕任意位置停放，位置跨重启记忆，越界自动钳回视口（距边 8px 安全边距）。拖拽跟手（保持抓取点，transform 渲染）；触摸设备可直接拖拽（触摸阈值更宽防误拖）、点击热区扩展到 44px，自动避让 iPhone 刘海 / 小黑条（safe-area）。胶囊一行显示「GLM 13% · Copilot 24%」，已用超过 80% 转橙、超过 95% 转红，任一 provider 超 95% 时胶囊轻微脉动（尊重系统「减少动态效果」设置，开启时不脉动）；颜色使用 DSH 主题语义变量，自动适配浅色 / 深色主题。悬停提示与 aria-label 实时给出摘要。单击即面板入口——胶囊上没有任何隐藏手势（0.1.14 起右键 / 长按菜单整体退役）。
+- **面板**：点击胶囊展开浮动详情面板（半透明毛玻璃底，宽 `min(320px, 100vw−24px)`，靠边自动翻侧，滚动 / 缩放跟随；≤480px 窄屏自动改为底部弹层并避开 safe-area），头部带标题与 ✕，Esc 或点击面板外关闭。概览列两个 provider 行，点击进入详情：GLM 为今日 Tokens / 调用次数双大数字 + 五列对齐窗口网格（MCP（月）→ 5 小时 → 每月 → 每周固定排序，周窗口未下发时显示「每周额度 · ♾️（无限）」占位）+ 分模型用量行；Copilot 为可用额度、本期已用（credits 消耗 + 弱化百分比）、重置时间三行。底部一行 **等宽双按钮**（grid 1fr 1fr，宽度与文案长度和语言无关）：「显示 / 隐藏侧边栏卡片」（文案随状态翻转）与「立即刷新」（触发宿主立即探测）；加载 / 出错空态下按钮同样在场。接口未下发有效 `remaining` / `percent_remaining` 时该行不渲染，`credits_used` 绝不用于推算余额。
+- **侧边栏卡片（可选，默认隐藏）**：胶囊是默认界面；需要侧栏卡片时在面板底部按钮开启「显示侧边栏卡片」（Web profile 侧栏底部区块存在时才出现该按钮）。卡片显示时提供摘要行 + 行点击开面板 + 行首 provider 名称点击立即探测。侧栏收起（Web 窄栏）或容器过窄（<160px，跨 profile 通用判据）时卡片自动隐藏，侧栏整体不存在（Desktop 收起态）同样自然缺席、无报错——入口始终由悬浮胶囊承载。
 - 凭据缺失的 provider 不渲染摘要行与胶囊分段（两者皆缺时悬浮胶囊与卡片一并隐藏）；探测失败时保留最后一次成功数据并在行上加 ⚠ 过期标记（⚠ 只出现在面板与卡片行内，不在胶囊上显示）。
 - 宿主默认每 60 秒探测（窗口 + 用量 + Copilot）；profile patch 可将 `pollIntervalSec` 设置在 30–3600 秒。浏览器页签可见时每 30 秒刷新视图，隐藏时暂停。
 
@@ -47,4 +46,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 capsule: a one-line `GLM x% · Copilot y%` summary that turns amber past 80% and red past 95%. Dragging it is grab-accurate (transform-based, rAF-batched) and free to place anywhere on the screen, with position remembered across restarts and viewport boundaries automatically clamped. Touch devices drag directly (wider slop against accidental drags), a 500ms long-press opens the context menu (iOS has no right-click), the hit area is padded to 44px and placement respects `env(safe-area-inset-*)`. 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, and viewports ≤480px dock it to the bottom as a sheet. A sidebar card remains an opportunistic extra entry on web profiles, opt-in from the capsule's menu, and silently disappears whenever the sidebar does — collapsed web sidebars and the desktop profile are covered by the floating capsule alone. The right-click menu (long-press on touch) offers card visibility and an immediate provider re-probe. 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%. Dragging it is grab-accurate (transform-based, rAF-batched) and free to place anywhere on the screen, with position remembered across restarts and viewport boundaries automatically clamped. Touch devices drag directly (wider slop against accidental drags), a 500ms long-press opens the context menu (iOS has no right-click), the hit area is padded to 44px and placement respects `env(safe-area-inset-*)`. 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, and viewports ≤480px dock it to the bottom as a sheet. The panel footer holds two equal-width buttons — sidebar-card visibility and an immediate provider re-probe — replacing the retired right-click/long-press menu, so the capsule itself carries no hidden gestures. A sidebar card remains an opportunistic extra entry on web profiles, opted in from that footer button, and silently disappears whenever the sidebar does — collapsed web sidebars and the desktop profile are covered by the floating capsule alone. 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

@@ -152,7 +152,6 @@ function saveSurfaceFlags(storage, flags) {
 // src/client/drag.mjs
 var DRAG_SLOP_MOUSE = 6;
 var DRAG_SLOP_TOUCH = 10;
-var LONG_PRESS_MS = 500;
 function dragSlop(pointerType) {
   return pointerType === "touch" || pointerType === "pen" ? DRAG_SLOP_TOUCH : DRAG_SLOP_MOUSE;
 }
@@ -184,7 +183,7 @@ var COPY = {
     title: "Token\u989D\u5EA6",
     openDetails: "\u67E5\u770B\u8BE6\u60C5",
     close: "\u5173\u95ED",
-    menu: {
+    actions: {
       showCard: "\u663E\u793A\u4FA7\u8FB9\u680F\u5361\u7247",
       hideCard: "\u9690\u85CF\u4FA7\u8FB9\u680F\u5361\u7247",
       refreshNow: "\u7ACB\u5373\u5237\u65B0"
@@ -217,7 +216,7 @@ var COPY = {
     title: "Quota Watch",
     openDetails: "View details",
     close: "Close",
-    menu: {
+    actions: {
       showCard: "Show sidebar card",
       hideCard: "Hide sidebar card",
       refreshNow: "Refresh now"
@@ -284,17 +283,16 @@ var FLOAT_STYLE_TEXT = `
 .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; }
-.dqw-capsule--dragging { cursor: grabbing; -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--dsw-alias-bg-elevated, var(--dsw-alias-bg-base, #1f1f1f)); will-change: transform; transition: none; }
+.dqw-capsule--dragging { cursor: grabbing; -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--dsw-alias-bg-elevated, var(--dsw-alias-bg-base, #1f1f1f)); box-shadow: 0 8px 24px rgba(0,0,0,.35); transform: scale(1.04); transition: none; }
 @media (prefers-reduced-motion: no-preference) {
   .dqw-capsule[data-alert] { animation: dqw-pulse 1.6s ease-in-out infinite; }
   .dqw-capsule { transition: border-color .12s ease-out, box-shadow .12s ease-out; }
 }
 @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-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+.dqw-panel-action { min-width: 0; margin: 0; padding: 6px 8px; border: 1px solid var(--dsw-alias-border-secondary, rgba(128,128,128,.35)); border-radius: 8px; background: transparent; color: var(--dsw-alias-label-secondary, inherit); font: inherit; font-size: 11px; line-height: 16px; text-align: center; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.dqw-panel-action:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.12)); color: var(--dsw-alias-label-primary, 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--sheet { left:8px; right:8px; top:auto; bottom:calc(8px + env(safe-area-inset-bottom, 0px)); width:auto; max-width:none; max-height:calc(100dvh - 24px); }
@@ -387,15 +385,6 @@ function text(doc, tag, className, value) {
   node.textContent = String(value ?? "");
   return node;
 }
-function menuItem(doc, action, label) {
-  const item = doc.createElement("button");
-  item.type = "button";
-  item.className = "dqw-menu-item";
-  item.setAttribute("role", "menuitem");
-  item.dataset.menu = action;
-  item.append(text(doc, "span", "", label));
-  return item;
-}
 function backIcon(doc) {
   const namespace = "http://www.w3.org/2000/svg";
   const svg = doc.createElementNS(namespace, "svg");
@@ -563,12 +552,6 @@ function mountQuotaCard({
   };
   applyPosition();
   floatRoot.append(panel);
-  const menu = doc.createElement("div");
-  menu.className = "dqw-menu";
-  menu.dataset.dshQuotaWatchMenu = "";
-  menu.setAttribute("role", "menu");
-  menu.hidden = true;
-  floatRoot.append(menu);
   let suppressNextClick = false;
   const scheduleFrame = (fn) => typeof win.requestAnimationFrame === "function" ? win.requestAnimationFrame.call(win, fn) : fn();
   const attachDrag = (surfaceEl) => {
@@ -582,13 +565,6 @@ function mountQuotaCard({
     let restX = 0;
     let restY = 0;
     let lastPoint = null;
-    let longPressTimer;
-    const clearLongPress = () => {
-      if (longPressTimer !== void 0) {
-        win.clearTimeout(longPressTimer);
-        longPressTimer = void 0;
-      }
-    };
     const bindGesture = () => {
       doc.addEventListener("pointermove", onPointerMove);
       doc.addEventListener("pointerup", onPointerUp);
@@ -606,19 +582,6 @@ function mountQuotaCard({
       originX = event.clientX;
       originY = event.clientY;
       slop = dragSlop(event.pointerType);
-      clearLongPress();
-      if (slop === DRAG_SLOP_TOUCH) {
-        longPressTimer = win.setTimeout(() => {
-          longPressTimer = void 0;
-          if (!dragging || moved) return;
-          try {
-            win.navigator.vibrate?.(10);
-          } catch {
-          }
-          openMenu();
-          suppressNextClick = true;
-        }, LONG_PRESS_MS);
-      }
       const rect = surfaceEl.getBoundingClientRect();
       grab = grabOffset({ x: event.clientX, y: event.clientY }, rect);
       dragSize = rect.width > 0 ? { width: rect.width, height: rect.height } : FALLBACK_SIZE;
@@ -632,7 +595,6 @@ function mountQuotaCard({
       if (!moved) {
         if (Math.hypot(event.clientX - originX, event.clientY - originY) < slop) return;
         moved = true;
-        clearLongPress();
         doc.body.style.userSelect = "none";
         surfaceEl.classList.add("dqw-capsule--dragging");
       }
@@ -641,15 +603,18 @@ function mountQuotaCard({
         if (!dragging || !lastPoint || disposed) return;
         const viewWidth = win.innerWidth ?? 1024;
         const viewHeight = win.innerHeight ?? 768;
-        const topLeft = clampFrame(lastPoint, grab, dragSize, { width: viewWidth, height: viewHeight }, ZERO_INSETS2);
+        const insets = readInsets();
+        const topLeft = clampFrame(lastPoint, grab, dragSize, { width: viewWidth, height: viewHeight }, insets);
         const dx = topLeft.x - restX;
         const dy = topLeft.y - restY;
-        surfaceEl.style.transform = `translate3d(${Math.round(dx)}px, ${Math.round(dy)}px, 0) scale(1.03)`;
+        floatHost.style.willChange = "transform";
+        floatHost.style.transform = `translate3d(${Math.round(dx)}px, ${Math.round(dy)}px, 0)`;
       });
     };
     const finishDragRelease = (point) => {
       surfaceEl.classList.remove("dqw-capsule--dragging");
-      surfaceEl.style.transform = "";
+      floatHost.style.willChange = "";
+      floatHost.style.transform = "";
       saveFloatPosition(win.localStorage, point);
       applyPosition();
       suppressNextClick = true;
@@ -657,7 +622,6 @@ function mountQuotaCard({
     const onPointerUp = (event) => {
       if (!dragging) return;
       dragging = false;
-      clearLongPress();
       unbindGesture();
       doc.body.style.userSelect = "";
       if (!moved) return;
@@ -678,11 +642,11 @@ function mountQuotaCard({
     const onPointerCancel = () => {
       if (!dragging) return;
       dragging = false;
-      clearLongPress();
       unbindGesture();
       doc.body.style.userSelect = "";
       surfaceEl.classList.remove("dqw-capsule--dragging");
-      surfaceEl.style.transform = "";
+      floatHost.style.willChange = "";
+      floatHost.style.transform = "";
     };
     surfaceEl.addEventListener("pointerdown", onPointerDown);
     const disposeDrag2 = () => {
@@ -775,6 +739,28 @@ function mountQuotaCard({
     header.append(close);
     return header;
   };
+  const overviewActions = () => {
+    const actions = doc.createElement("div");
+    actions.className = "dqw-panel-actions";
+    if (hasCardMount()) {
+      const toggle = doc.createElement("button");
+      toggle.type = "button";
+      toggle.className = "dqw-panel-action";
+      toggle.dataset.action = "toggle-card";
+      const toggleLabel = surfaceFlags.cardHidden ? copy.actions.showCard : copy.actions.hideCard;
+      toggle.textContent = toggleLabel;
+      toggle.setAttribute("aria-label", toggleLabel);
+      actions.append(toggle);
+    }
+    const refresh = doc.createElement("button");
+    refresh.type = "button";
+    refresh.className = "dqw-panel-action";
+    refresh.dataset.action = "panel-refresh";
+    refresh.textContent = copy.actions.refreshNow;
+    refresh.setAttribute("aria-label", copy.actions.refreshNow);
+    actions.append(refresh);
+    return actions;
+  };
   const renderOverview = () => {
     panel.replaceChildren(panelHeader({ title: copy.title }));
     const providers = snapshot?.providers ?? [];
@@ -786,15 +772,16 @@ function mountQuotaCard({
     ].filter(Boolean).flat();
     if (rows.length === 0) {
       panel.append(text(doc, "p", "dqw-muted", lastUpdated.textContent || copy.loading));
-      return;
-    }
-    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;
+    } else {
+      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);
     }
-    panel.append(list);
+    panel.append(overviewActions());
   };
   function renderDetail(detail, key, provider, fromPanelNav = false) {
     detail.replaceChildren();
@@ -1004,42 +991,6 @@ function mountQuotaCard({
     onSurfaceClick();
   };
   const hasCardMount = () => Boolean(footArea(doc));
-  const openMenu = () => {
-    const items = [];
-    if (hasCardMount()) {
-      items.push(menuItem(doc, "toggle-card", surfaceFlags.cardHidden ? copy.menu.showCard : copy.menu.hideCard));
-    }
-    items.push(menuItem(doc, "refresh", copy.menu.refreshNow));
-    menu.replaceChildren(...items);
-    menu.hidden = false;
-    const rect = surface.getBoundingClientRect();
-    const viewWidth = win.innerWidth ?? 1024;
-    const viewHeight = win.innerHeight ?? 768;
-    const width = menu.offsetWidth || 150;
-    const height = menu.offsetHeight || 120;
-    let left = rect.right + 8;
-    if (left + width > viewWidth - 8) left = Math.max(8, rect.left - width - 8);
-    const top = Math.min(Math.max(rect.top, 8), Math.max(8, viewHeight - height - 8));
-    menu.style.left = `${Math.round(left)}px`;
-    menu.style.top = `${Math.round(top)}px`;
-  };
-  const onSurfaceContext = (event) => {
-    event.preventDefault();
-    if (!menu.hidden) return;
-    openMenu();
-  };
-  const onMenuClick = (event) => {
-    const item = event.target?.closest?.("[data-menu]");
-    if (!item) return;
-    const action = item.dataset.menu;
-    if (action === "toggle-card") {
-      setCardHidden(!surfaceFlags.cardHidden);
-    } else if (action === "refresh") {
-      void poll(true);
-    }
-    menu.hidden = true;
-  };
-  menu.addEventListener("click", onMenuClick);
   let currentFoot = null;
   let footTooNarrow = false;
   let noDataHidden = false;
@@ -1149,6 +1100,14 @@ function mountQuotaCard({
     syncPop();
   };
   const onPanelClick = (event) => {
+    if (event.target?.closest?.('[data-action="panel-refresh"]')) {
+      void poll(true);
+      return;
+    }
+    if (event.target?.closest?.('[data-action="toggle-card"]')) {
+      setCardHidden(!surfaceFlags.cardHidden);
+      return;
+    }
     if (event.target?.closest?.('[data-action="panel-close"]')) {
       openKey = void 0;
       syncPop();
@@ -1185,9 +1144,9 @@ function mountQuotaCard({
   const onDocPointerDown = (event) => {
     if (openKey === void 0) return;
     const path = typeof event.composedPath === "function" ? event.composedPath() : [];
-    if (path.includes(panel) || path.includes(menu) || path.includes(container)) return;
+    if (path.includes(panel) || path.includes(container)) return;
     const target = event.target;
-    if (target === panel || target === menu || target === container) return;
+    if (target === panel || target === container) return;
     if (target?.getRootNode?.() === cardRoot || target?.getRootNode?.() === floatRoot) return;
     openKey = void 0;
     renderAll();
@@ -1208,10 +1167,6 @@ function mountQuotaCard({
   };
   const onDocKeydown = (event) => {
     if (event.key !== "Escape") return;
-    if (!menu.hidden) {
-      menu.hidden = true;
-      return;
-    }
     if (openKey !== void 0) {
       openKey = void 0;
       renderAll();
@@ -1231,7 +1186,6 @@ function mountQuotaCard({
   });
   surface.addEventListener("click", onSurfaceClick);
   surface.addEventListener("keydown", onSurfaceKeydown);
-  surface.addEventListener("contextmenu", onSurfaceContext);
   let disposeDrag = attachDrag(surface);
   doc.addEventListener("visibilitychange", onVisibilityChange);
   doc.addEventListener("pointerdown", onDocPointerDown, true);
@@ -1253,8 +1207,6 @@ function mountQuotaCard({
     panel.removeEventListener("click", onPanelClick);
     surface.removeEventListener("click", onSurfaceClick);
     surface.removeEventListener("keydown", onSurfaceKeydown);
-    surface.removeEventListener("contextmenu", onSurfaceContext);
-    menu.removeEventListener("click", onMenuClick);
     disposeDrag();
     doc.body.style.userSelect = "";
     container.remove();

package/package.json

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

package/src/client/drag.mjs

@@ -6,7 +6,6 @@ import { clampPoint } from './prefs.mjs'
 
 export const DRAG_SLOP_MOUSE = 6
 export const DRAG_SLOP_TOUCH = 10
-export const LONG_PRESS_MS = 500
 
 /** Touch/pen gestures get the larger slop so taps win over drags. */
 export function dragSlop(pointerType) {

package/src/client.mjs

@@ -1,7 +1,7 @@
 import { CLIENT_POLL_INTERVAL_MS, CLIENT_ROUTES } from './shared.mjs'
 import { remainingToUsed } from './core/adapters.mjs'
 import { MARGIN, clampPoint, loadFloatPosition, loadSurfaceFlags, saveFloatPosition, saveSurfaceFlags } from './client/prefs.mjs'
-import { DRAG_SLOP_MOUSE, DRAG_SLOP_TOUCH, LONG_PRESS_MS, parseInset, clampFrame, dragSlop, grabOffset } from './client/drag.mjs'
+import { DRAG_SLOP_MOUSE, DRAG_SLOP_TOUCH, parseInset, clampFrame, dragSlop, grabOffset } from './client/drag.mjs'
 
 export const name = 'quota-watch-client'
 export const inject = []
@@ -23,7 +23,7 @@ const COPY = {
     title: 'Token额度',
     openDetails: '查看详情',
     close: '关闭',
-    menu: {
+    actions: {
       showCard: '显示侧边栏卡片',
       hideCard: '隐藏侧边栏卡片',
       refreshNow: '立即刷新',
@@ -56,7 +56,7 @@ const COPY = {
     title: 'Quota Watch',
     openDetails: 'View details',
     close: 'Close',
-    menu: {
+    actions: {
       showCard: 'Show sidebar card',
       hideCard: 'Hide sidebar card',
       refreshNow: 'Refresh now',
@@ -130,17 +130,16 @@ const FLOAT_STYLE_TEXT = `
 .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; }
-.dqw-capsule--dragging { cursor: grabbing; -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--dsw-alias-bg-elevated, var(--dsw-alias-bg-base, #1f1f1f)); will-change: transform; transition: none; }
+.dqw-capsule--dragging { cursor: grabbing; -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--dsw-alias-bg-elevated, var(--dsw-alias-bg-base, #1f1f1f)); box-shadow: 0 8px 24px rgba(0,0,0,.35); transform: scale(1.04); transition: none; }
 @media (prefers-reduced-motion: no-preference) {
   .dqw-capsule[data-alert] { animation: dqw-pulse 1.6s ease-in-out infinite; }
   .dqw-capsule { transition: border-color .12s ease-out, box-shadow .12s ease-out; }
 }
 @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-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+.dqw-panel-action { min-width: 0; margin: 0; padding: 6px 8px; border: 1px solid var(--dsw-alias-border-secondary, rgba(128,128,128,.35)); border-radius: 8px; background: transparent; color: var(--dsw-alias-label-secondary, inherit); font: inherit; font-size: 11px; line-height: 16px; text-align: center; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.dqw-panel-action:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.12)); color: var(--dsw-alias-label-primary, 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--sheet { left:8px; right:8px; top:auto; bottom:calc(8px + env(safe-area-inset-bottom, 0px)); width:auto; max-width:none; max-height:calc(100dvh - 24px); }
@@ -271,17 +270,6 @@ function quotaIcon(doc) {
   return svg
 }
 
-/** One right-click menu row. */
-function menuItem(doc, action, label) {
-  const item = doc.createElement('button')
-  item.type = 'button'
-  item.className = 'dqw-menu-item'
-  item.setAttribute('role', 'menuitem')
-  item.dataset.menu = action
-  item.append(text(doc, 'span', '', label))
-  return item
-}
-
 /** Double-chevron icon for the panel's back affordance. */
 function backIcon(doc) {
   const namespace = 'http://www.w3.org/2000/svg'
@@ -480,12 +468,6 @@ export function mountQuotaCard({
   applyPosition()
   // Panel lives inside the float shadow root from now on (契约总表「归属时序」).
   floatRoot.append(panel)
-  const menu = doc.createElement('div')
-  menu.className = 'dqw-menu'
-  menu.dataset.dshQuotaWatchMenu = ''
-  menu.setAttribute('role', 'menu')
-  menu.hidden = true
-  floatRoot.append(menu)
 
   let suppressNextClick = false
   /** One rAF (or a synchronous fallback when the host has none) — drag frames
@@ -511,13 +493,6 @@ export function mountQuotaCard({
     let restX = 0
     let restY = 0
     let lastPoint = null
-    let longPressTimer
-    const clearLongPress = () => {
-      if (longPressTimer !== undefined) {
-        win.clearTimeout(longPressTimer)
-        longPressTimer = undefined
-      }
-    }
     /** Doc-level move/up/cancel are bound only while a gesture is active —
      * the pill's resting state costs zero document-level listeners. */
     const bindGesture = () => {
@@ -538,18 +513,6 @@ export function mountQuotaCard({
       originY = event.clientY
       // Graded slop: touch/pen get 10px so taps win over drags (Task 6).
       slop = dragSlop(event.pointerType)
-      // Long press opens the context menu on touch (iOS has no contextmenu);
-      // movement past the slop cancels it in favor of the drag.
-      clearLongPress()
-      if (slop === DRAG_SLOP_TOUCH) {
-        longPressTimer = win.setTimeout(() => {
-          longPressTimer = undefined
-          if (!dragging || moved) return
-          try { win.navigator.vibrate?.(10) } catch { /* vibration unavailable */ }
-          openMenu()
-          suppressNextClick = true
-        }, LONG_PRESS_MS)
-      }
       const rect = surfaceEl.getBoundingClientRect()
       grab = grabOffset({ x: event.clientX, y: event.clientY }, rect)
       dragSize = rect.width > 0 ? { width: rect.width, height: rect.height } : FALLBACK_SIZE
@@ -563,7 +526,6 @@ export function mountQuotaCard({
       if (!moved) {
         if (Math.hypot(event.clientX - originX, event.clientY - originY) < slop) return
         moved = true
-        clearLongPress()
         doc.body.style.userSelect = 'none'
         surfaceEl.classList.add('dqw-capsule--dragging')
       }
@@ -572,15 +534,18 @@ export function mountQuotaCard({
         if (!dragging || !lastPoint || disposed) return
         const viewWidth = win.innerWidth ?? 1024
         const viewHeight = win.innerHeight ?? 768
-        const topLeft = clampFrame(lastPoint, grab, dragSize, { width: viewWidth, height: viewHeight }, ZERO_INSETS)
+        const insets = readInsets()
+        const topLeft = clampFrame(lastPoint, grab, dragSize, { width: viewWidth, height: viewHeight }, insets)
         const dx = topLeft.x - restX
         const dy = topLeft.y - restY
-        surfaceEl.style.transform = `translate3d(${Math.round(dx)}px, ${Math.round(dy)}px, 0) scale(1.03)`
+        floatHost.style.willChange = 'transform'
+        floatHost.style.transform = `translate3d(${Math.round(dx)}px, ${Math.round(dy)}px, 0)`
       })
     }
     const finishDragRelease = (point) => {
       surfaceEl.classList.remove('dqw-capsule--dragging')
-      surfaceEl.style.transform = ''
+      floatHost.style.willChange = ''
+      floatHost.style.transform = ''
       saveFloatPosition(win.localStorage, point)
       applyPosition()
       suppressNextClick = true
@@ -588,7 +553,6 @@ export function mountQuotaCard({
     const onPointerUp = (event) => {
       if (!dragging) return
       dragging = false
-      clearLongPress()
       unbindGesture()
       doc.body.style.userSelect = ''
       if (!moved) return
@@ -611,11 +575,11 @@ export function mountQuotaCard({
     const onPointerCancel = () => {
       if (!dragging) return
       dragging = false
-      clearLongPress()
       unbindGesture()
       doc.body.style.userSelect = ''
       surfaceEl.classList.remove('dqw-capsule--dragging')
-      surfaceEl.style.transform = ''
+      floatHost.style.willChange = ''
+      floatHost.style.transform = ''
     }
     surfaceEl.addEventListener('pointerdown', onPointerDown)
     const disposeDrag = () => {
@@ -715,6 +679,34 @@ export function mountQuotaCard({
     return header
   }
 
+  /** Panel footer: the card toggle and a manual refresh sit side by side in an
+   * equal-width grid (perceived width is the box, not the glyph count, so the
+   * 1fr/1fr columns also survive label flips and other locales). This replaces
+   * the retired capsule context menu: one click surface, no hidden gestures,
+   * and it renders even in the loading/error empty state. */
+  const overviewActions = () => {
+    const actions = doc.createElement('div')
+    actions.className = 'dqw-panel-actions'
+    if (hasCardMount()) {
+      const toggle = doc.createElement('button')
+      toggle.type = 'button'
+      toggle.className = 'dqw-panel-action'
+      toggle.dataset.action = 'toggle-card'
+      const toggleLabel = surfaceFlags.cardHidden ? copy.actions.showCard : copy.actions.hideCard
+      toggle.textContent = toggleLabel
+      toggle.setAttribute('aria-label', toggleLabel)
+      actions.append(toggle)
+    }
+    const refresh = doc.createElement('button')
+    refresh.type = 'button'
+    refresh.className = 'dqw-panel-action'
+    refresh.dataset.action = 'panel-refresh'
+    refresh.textContent = copy.actions.refreshNow
+    refresh.setAttribute('aria-label', copy.actions.refreshNow)
+    actions.append(refresh)
+    return actions
+  }
+
   const renderOverview = () => {
     panel.replaceChildren(panelHeader({ title: copy.title }))
     const providers = snapshot?.providers ?? []
@@ -729,16 +721,17 @@ export function mountQuotaCard({
     ].filter(Boolean).flat()
     if (rows.length === 0) {
       panel.append(text(doc, 'p', 'dqw-muted', lastUpdated.textContent || copy.loading))
-      return
-    }
-    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
+    } else {
+      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)
     }
-    panel.append(list)
+    panel.append(overviewActions())
   }
 
   function renderDetail(detail, key, provider, fromPanelNav = false) {
@@ -969,44 +962,6 @@ export function mountQuotaCard({
     onSurfaceClick()
   }
   const hasCardMount = () => Boolean(footArea(doc))
-  const openMenu = () => {
-    const items = []
-    if (hasCardMount()) {
-      items.push(menuItem(doc, 'toggle-card', surfaceFlags.cardHidden ? copy.menu.showCard : copy.menu.hideCard))
-    }
-    items.push(menuItem(doc, 'refresh', copy.menu.refreshNow))
-    menu.replaceChildren(...items)
-    menu.hidden = false
-    const rect = surface.getBoundingClientRect()
-    const viewWidth = win.innerWidth ?? 1024
-    const viewHeight = win.innerHeight ?? 768
-    const width = menu.offsetWidth || 150
-    const height = menu.offsetHeight || 120
-    let left = rect.right + 8
-    if (left + width > viewWidth - 8) left = Math.max(8, rect.left - width - 8)
-    const top = Math.min(Math.max(rect.top, 8), Math.max(8, viewHeight - height - 8))
-    menu.style.left = `${Math.round(left)}px`
-    menu.style.top = `${Math.round(top)}px`
-  }
-  const onSurfaceContext = (event) => {
-    event.preventDefault()
-    // Android fires the native contextmenu right after the long-press timer:
-    // an already-open menu is kept as-is instead of being rebuilt.
-    if (!menu.hidden) return
-    openMenu()
-  }
-  const onMenuClick = (event) => {
-    const item = event.target?.closest?.('[data-menu]')
-    if (!item) return
-    const action = item.dataset.menu
-    if (action === 'toggle-card') {
-      setCardHidden(!surfaceFlags.cardHidden)
-    } else if (action === 'refresh') {
-      void poll(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
@@ -1136,6 +1091,19 @@ export function mountQuotaCard({
     syncPop()
   }
   const onPanelClick = (event) => {
+    // Panel-scoped actions (the retired context menu now lives here): buttons
+    // sit inside this shadow tree, so a panel-level listener sees the real
+    // target with no retargeting ambiguity.
+    if (event.target?.closest?.('[data-action="panel-refresh"]')) {
+      void poll(true)
+      return
+    }
+    if (event.target?.closest?.('[data-action="toggle-card"]')) {
+      // renderAll → syncPop → renderOverview re-renders the footer, so the
+      // label flips in place while the panel stays open.
+      setCardHidden(!surfaceFlags.cardHidden)
+      return
+    }
     if (event.target?.closest?.('[data-action="panel-close"]')) {
       openKey = undefined
       syncPop()
@@ -1172,9 +1140,9 @@ export function mountQuotaCard({
   const onDocPointerDown = (event) => {
     if (openKey === undefined) return
     const path = typeof event.composedPath === 'function' ? event.composedPath() : []
-    if (path.includes(panel) || path.includes(menu) || path.includes(container)) return
+    if (path.includes(panel) || path.includes(container)) return
     const target = event.target
-    if (target === panel || target === menu || target === container) return
+    if (target === panel || target === container) return
     if (target?.getRootNode?.() === cardRoot || target?.getRootNode?.() === floatRoot) return
     openKey = undefined
     renderAll()
@@ -1196,10 +1164,6 @@ export function mountQuotaCard({
   }
   const onDocKeydown = (event) => {
     if (event.key !== 'Escape') return
-    if (!menu.hidden) {
-      menu.hidden = true
-      return
-    }
     if (openKey !== undefined) {
       openKey = undefined
       renderAll()
@@ -1219,7 +1183,6 @@ export function mountQuotaCard({
   })
   surface.addEventListener('click', onSurfaceClick)
   surface.addEventListener('keydown', onSurfaceKeydown)
-  surface.addEventListener('contextmenu', onSurfaceContext)
   let disposeDrag = attachDrag(surface)
   doc.addEventListener('visibilitychange', onVisibilityChange)
   doc.addEventListener('pointerdown', onDocPointerDown, true)
@@ -1242,8 +1205,6 @@ export function mountQuotaCard({
     panel.removeEventListener('click', onPanelClick)
     surface.removeEventListener('click', onSurfaceClick)
     surface.removeEventListener('keydown', onSurfaceKeydown)
-    surface.removeEventListener('contextmenu', onSurfaceContext)
-    menu.removeEventListener('click', onMenuClick)
     disposeDrag()
     // A dispose landing mid-gesture must not leave the body unselectable.
     doc.body.style.userSelect = ''