@iasiv5/dsh-quota-watch 0.1.14 → 0.1.16

package/README.md

@@ -10,6 +10,7 @@
 - **面板**：点击胶囊展开浮动详情面板（半透明毛玻璃底，宽 `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 不渲染摘要行与胶囊分段（两者皆缺时悬浮胶囊与卡片一并隐藏）；探测失败时保留最后一次成功数据并在行上加 ⚠ 过期标记（⚠ 只出现在面板与卡片行内，不在胶囊上显示）。
+- **语言**：界面文案跟随 DSH「设置 → 语言」——宿主 locale 特性把解析结果实时镜像到 `<html lang>`，插件监听该属性，切换即热重渲染（无需刷新页面）；宿主未同步时回退浏览器语言。面板 footer 按钮文字与行内弱化数值（如「3.8亿」）同字号（10px/14px）、同 72% 静息透明度，hover 恢复全强度。
 - 宿主默认每 60 秒探测（窗口 + 用量 + Copilot）；profile patch 可将 `pollIntervalSec` 设置在 30–3600 秒。浏览器页签可见时每 30 秒刷新视图，隐藏时暂停。
 
 ## 兼容与配置
@@ -46,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 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).
+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. UI copy follows the DSH language preference (mirrored live onto `<html lang>`, re-rendering on switch without a reload) and falls back to the browser language; footer buttons rest at the same size and opacity as the muted row extras. Colors ride DSH semantic theme tokens with hardcoded fallbacks; all UI lives inside a shadow root (ADR 0001).

package/lib/client.js

@@ -205,6 +205,10 @@ var COPY = {
     weekUnlimited: "\u6BCF\u5468\u989D\u5EA6",
     unlimited: "\u267E\uFE0F",
     unlimitedNote: "\uFF08 \u65E0\u9650 \uFF09",
+    // Full-width paren pair for zh: both window-grid notes share the same
+    // glyph class so their left edges line up.
+    noteOpen: "\uFF08 ",
+    noteClose: " \uFF09",
     windows: {
       "5h": "5 \u5C0F\u65F6\u989D\u5EA6",
       week: "\u6BCF\u5468\u989D\u5EA6",
@@ -237,7 +241,13 @@ var COPY = {
     todayCalls: "Calls",
     weekUnlimited: "Weekly quota",
     unlimited: "\u267E\uFE0F",
-    unlimitedNote: " ( unlimited )",
+    unlimitedNote: "( unlimited )",
+    // ASCII parens for en — and NO leading space: the note must start with
+    // the same glyph as the reset notes or the grid's left edges diverge
+    // (0.1.15 shipped ' ( unlimited )', which broke alignment against the
+    // full-width （ Resets: … ） notes the template used to emit in en too).
+    noteOpen: "( ",
+    noteClose: " )",
     windows: {
       "5h": "5-hour quota",
       week: "Weekly quota",
@@ -291,8 +301,8 @@ var FLOAT_STYLE_TEXT = `
 @media print { :host { display: none !important; } }
 @keyframes dqw-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
 .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-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: 10px; line-height: 14px; opacity: .72; 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); opacity: 1; }
 .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); }
@@ -345,6 +355,8 @@ var FLOAT_STYLE_TEXT = `
 .dqw-error { margin: 0; font-size: 10px; line-height: 14px; color: var(--dsw-alias-label-warning, #b46900); }
 `;
 function localeFor(win) {
+  const host = String(win?.document?.documentElement?.lang ?? "").trim();
+  if (host !== "") return host.toLowerCase().startsWith("zh") ? "zh" : "en";
   return String(win?.navigator?.language ?? "zh").toLowerCase().startsWith("zh") ? "zh" : "en";
 }
 function formatNumber(value, locale) {
@@ -464,8 +476,8 @@ function mountQuotaCard({
   };
   if (doc.querySelector(CARD_SELECTOR) || doc.querySelector(FLOAT_SELECTOR)) return () => {
   };
-  const locale = localeFor(win);
-  const copy = COPY[locale];
+  let locale = localeFor(win);
+  let copy = COPY[locale];
   const container = doc.createElement("div");
   container.dataset.dshQuotaWatchCard = "";
   container.dataset.dshPlugin = "quota-watch";
@@ -841,7 +853,7 @@ function mountQuotaCard({
         wins.append(text(doc, "span", "dqw-win-mid", "\xB7"));
         wins.append(text(doc, "span", "dqw-win-used", copy.windowUsed));
         wins.append(text(doc, "span", "dqw-win-val", percent !== void 0 ? formatPercent(percent, locale) : "\u2014"));
-        wins.append(text(doc, "span", "dqw-kv-sub", reset ? `\uFF08 ${copy.reset}: ${reset} \uFF09` : ""));
+        wins.append(text(doc, "span", "dqw-kv-sub", reset ? `${copy.noteOpen}${copy.reset}: ${reset}${copy.noteClose}` : ""));
       }
       detail.append(wins);
       if (Array.isArray(usage?.models) && usage.models.length > 0) {
@@ -1007,6 +1019,8 @@ function mountQuotaCard({
     syncCardVisibility();
   }) : null;
   const renderAll = () => {
+    locale = localeFor(win);
+    copy = COPY[locale];
     const providers = snapshot?.providers ?? [];
     const glm = providers.find((provider) => provider?.key === "glm");
     const copilot = providers.find((provider) => provider?.key === "copilot");
@@ -1071,6 +1085,10 @@ function mountQuotaCard({
     schedulePlace();
   });
   observer.observe(doc.body, { childList: true, subtree: true });
+  const langObserver = typeof win.MutationObserver === "function" ? new win.MutationObserver(() => {
+    if (!disposed) renderAll();
+  }) : null;
+  langObserver?.observe(doc.documentElement, { attributeFilter: ["lang"] });
   place();
   const startPolling = () => {
     if (timer !== void 0 || doc.visibilityState === "hidden" || disposed) return;
@@ -1197,6 +1215,7 @@ function mountQuotaCard({
     disposed = true;
     stopPolling();
     observer.disconnect();
+    langObserver?.disconnect();
     doc.removeEventListener("visibilitychange", onVisibilityChange);
     doc.removeEventListener("pointerdown", onDocPointerDown, true);
     doc.removeEventListener("scroll", onDocScroll, true);

package/package.json

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

package/src/client.mjs

@@ -45,6 +45,10 @@ const COPY = {
     weekUnlimited: '每周额度',
     unlimited: '♾️',
     unlimitedNote: '（ 无限 ）',
+    // Full-width paren pair for zh: both window-grid notes share the same
+    // glyph class so their left edges line up.
+    noteOpen: '（ ',
+    noteClose: ' ）',
     windows: {
       '5h': '5 小时额度',
       week: '每周额度',
@@ -77,7 +81,13 @@ const COPY = {
     todayCalls: 'Calls',
     weekUnlimited: 'Weekly quota',
     unlimited: '♾️',
-    unlimitedNote: ' ( unlimited )',
+    unlimitedNote: '( unlimited )',
+    // ASCII parens for en — and NO leading space: the note must start with
+    // the same glyph as the reset notes or the grid's left edges diverge
+    // (0.1.15 shipped ' ( unlimited )', which broke alignment against the
+    // full-width （ Resets: … ） notes the template used to emit in en too).
+    noteOpen: '( ',
+    noteClose: ' )',
     windows: {
       '5h': '5-hour quota',
       week: 'Weekly quota',
@@ -138,8 +148,8 @@ const FLOAT_STYLE_TEXT = `
 @media print { :host { display: none !important; } }
 @keyframes dqw-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
 .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-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: 10px; line-height: 14px; opacity: .72; 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); opacity: 1; }
 .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); }
@@ -192,7 +202,13 @@ const FLOAT_STYLE_TEXT = `
 .dqw-error { margin: 0; font-size: 10px; line-height: 14px; color: var(--dsw-alias-label-warning, #b46900); }
 `
 
+/** Locale resolution follows the host, not just the browser: the DSH locale
+ * feature mirrors its resolved preference (设置 → 语言) onto
+ * `<html lang>` and keeps it updated on every switch, so prefer that signal
+ * and fall back to navigator.language when the host has not synced yet. */
 function localeFor(win) {
+  const host = String(win?.document?.documentElement?.lang ?? '').trim()
+  if (host !== '') return host.toLowerCase().startsWith('zh') ? 'zh' : 'en'
   return String(win?.navigator?.language ?? 'zh').toLowerCase().startsWith('zh') ? 'zh' : 'en'
 }
 
@@ -361,8 +377,11 @@ export function mountQuotaCard({
   if (!doc?.body || typeof fetchImpl !== 'function') return () => {}
   if (doc.querySelector(CARD_SELECTOR) || doc.querySelector(FLOAT_SELECTOR)) return () => {}
 
-  const locale = localeFor(win)
-  const copy = COPY[locale]
+  // Mutable so a host language switch (设置 → 语言 → <html lang>) re-renders
+  // every surface with the new dictionary on the next pass — renderAll is the
+  // one funnel all render paths share.
+  let locale = localeFor(win)
+  let copy = COPY[locale]
   const container = doc.createElement('div')
   container.dataset.dshQuotaWatchCard = ''
   container.dataset.dshPlugin = 'quota-watch'
@@ -796,7 +815,7 @@ export function mountQuotaCard({
         wins.append(text(doc, 'span', 'dqw-win-mid', '·'))
         wins.append(text(doc, 'span', 'dqw-win-used', copy.windowUsed))
         wins.append(text(doc, 'span', 'dqw-win-val', percent !== undefined ? formatPercent(percent, locale) : '—'))
-        wins.append(text(doc, 'span', 'dqw-kv-sub', reset ? `（ ${copy.reset}: ${reset} ）` : ''))
+        wins.append(text(doc, 'span', 'dqw-kv-sub', reset ? `${copy.noteOpen}${copy.reset}: ${reset}${copy.noteClose}` : ''))
       }
       detail.append(wins)
       if (Array.isArray(usage?.models) && usage.models.length > 0) {
@@ -990,6 +1009,8 @@ export function mountQuotaCard({
     ? new win.ResizeObserver(() => { syncCardVisibility() })
     : null
   const renderAll = () => {
+    locale = localeFor(win)
+    copy = COPY[locale]
     const providers = snapshot?.providers ?? []
     const glm = providers.find((provider) => provider?.key === 'glm')
     const copilot = providers.find((provider) => provider?.key === 'copilot')
@@ -1063,6 +1084,13 @@ export function mountQuotaCard({
     schedulePlace()
   })
   observer.observe(doc.body, { childList: true, subtree: true })
+  // The DSH locale feature mirrors every language switch onto <html lang>;
+  // re-render on that flip so the UI follows 设置 → 语言 without a reload.
+  // A no-op flip (same value) never fires, so this costs nothing at rest.
+  const langObserver = typeof win.MutationObserver === 'function'
+    ? new win.MutationObserver(() => { if (!disposed) renderAll() })
+    : null
+  langObserver?.observe(doc.documentElement, { attributeFilter: ['lang'] })
   place()
 
   const startPolling = () => {
@@ -1121,6 +1149,9 @@ export function mountQuotaCard({
       syncPop()
     }
   }
+  // Both handlers ride the card's inner body element — INSIDE the card shadow
+  // root — so shadow-host retargeting never applies and event.target is the
+  // real row/label in every browser.
   const onBodyClick = (event) => {
     if (event.target?.closest?.('[data-action="refresh"]')) {
       void poll(true)
@@ -1195,6 +1226,7 @@ export function mountQuotaCard({
     disposed = true
     stopPolling()
     observer.disconnect()
+    langObserver?.disconnect()
     doc.removeEventListener('visibilitychange', onVisibilityChange)
     doc.removeEventListener('pointerdown', onDocPointerDown, true)
     doc.removeEventListener('scroll', onDocScroll, true)