dsh-provider-usage 0.3.1

package/lib/client.js

@@ -0,0 +1,905 @@
+window.__ModuleLoader__.load({
+	id: "dsh-provider-usage",
+	factory: (require) => {
+		var module = { exports: {} };
+		var exports = module.exports;
+		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+		let react = require("react");
+		let react_dom = require("react-dom");
+		let react_jsx_runtime = require("react/jsx-runtime");
+		//#region src/client/locales.ts
+		/** Simplified Chinese dictionary (the key-set source of truth). */
+		const zh = {
+			"action.label": "额度",
+			"action.aria": "Provider 额度",
+			"panel.title": "Provider 额度",
+			"panel.refresh": "立即刷新",
+			"panel.refreshing": "刷新中…",
+			"lang.switch": "Switch to English",
+			"panel.resetPos": "悬浮球归位",
+			"panel.interval": "刷新周期",
+			"panel.updated": "更新于 {time}",
+			"panel.never": "尚未获取",
+			"panel.empty": "未检测到已配置的 Provider",
+			"interval.15s": "15 秒",
+			"interval.30s": "30 秒",
+			"interval.60s": "1 分钟",
+			"interval.300s": "5 分钟",
+			"interval.900s": "15 分钟",
+			"interval.1800s": "30 分钟",
+			"balance.total": "总额",
+			"balance.granted": "赠送 {amount}",
+			"balance.toppedUp": "充值 {amount}",
+			"usage.weekly": "每周配额",
+			"usage.used": "已用 {used}",
+			"usage.remaining": "剩余 {remaining}",
+			"usage.unlimited": "不限量",
+			"usage.resetAt": "重置于 {time}",
+			"usage.resetIn": "{countdown} 后重置",
+			"status.unsupported": "该 Provider 暂不支持额度查询",
+			"status.missingCredential": "未配置密钥（{ref}）",
+			"status.error": "查询失败",
+			"status.tone.ok": "全部正常",
+			"status.tone.warn": "有用量接近上限",
+			"status.tone.danger": "有 Provider 异常或用量将尽",
+			"countdown.days": "{days}天{hours}小时",
+			"countdown.hours": "{hours}小时{minutes}分",
+			"countdown.minutes": "{minutes}分钟"
+		};
+		/** English dictionary, key-identical to the Chinese source of truth. */
+		const en = {
+			"action.label": "Usage",
+			"action.aria": "Provider usage",
+			"panel.title": "Provider Usage",
+			"panel.refresh": "Refresh now",
+			"panel.refreshing": "Refreshing…",
+			"lang.switch": "切换到中文",
+			"panel.resetPos": "Reset ball position",
+			"panel.interval": "Refresh interval",
+			"panel.updated": "Updated {time}",
+			"panel.never": "Not fetched yet",
+			"panel.empty": "No configured provider detected",
+			"interval.15s": "15s",
+			"interval.30s": "30s",
+			"interval.60s": "1 min",
+			"interval.300s": "5 min",
+			"interval.900s": "15 min",
+			"interval.1800s": "30 min",
+			"balance.total": "Total",
+			"balance.granted": "granted {amount}",
+			"balance.toppedUp": "topped up {amount}",
+			"usage.weekly": "Weekly quota",
+			"usage.used": "used {used}",
+			"usage.remaining": "{remaining} left",
+			"usage.unlimited": "Unlimited",
+			"usage.resetAt": "Resets at {time}",
+			"usage.resetIn": "Resets in {countdown}",
+			"status.unsupported": "Usage query is not supported for this provider",
+			"status.missingCredential": "No API key configured ({ref})",
+			"status.error": "Query failed",
+			"status.tone.ok": "All providers healthy",
+			"status.tone.warn": "Some usage nearing its limit",
+			"status.tone.danger": "Provider error or usage almost exhausted",
+			"countdown.days": "{days}d {hours}h",
+			"countdown.hours": "{hours}h {minutes}m",
+			"countdown.minutes": "{minutes}m"
+		};
+		//#endregion
+		//#region src/client/Panel.tsx
+		/**
+		* Floating-ball quota widget: a draggable ball portaled to document.body
+		* (the sidebar slot only mounts the component; the button itself no longer
+		* lives in the sidebar, avoiding slot layout contention with other plugins).
+		* The popover panel lists every configured provider's live balance/quota.
+		* Polling interval is user-selectable (persisted in localStorage) and falls
+		* back to the deployment-suggested value from the host plugin config.
+		*/
+		const INTERVAL_OPTIONS = [
+			15,
+			30,
+			60,
+			300,
+			900,
+			1800
+		];
+		const STORAGE_KEY = "dsh.provider-usage.refreshSeconds";
+		const LANG_KEY = "dsh.provider-usage.lang";
+		const POS_KEY = "dsh.provider-usage.floatPos";
+		const DEFAULT_INTERVAL = 60;
+		/** Floating ball diameter in px; drag math derives from it. */
+		const BALL_SIZE = 32;
+		/** Panel-level override stored in localStorage; null means follow the harness language. */
+		function readStoredLang() {
+			try {
+				const raw = localStorage.getItem(LANG_KEY);
+				return raw === "zh" || raw === "en" ? raw : null;
+			} catch {
+				return null;
+			}
+		}
+		function storeLang(lang) {
+			try {
+				localStorage.setItem(LANG_KEY, lang);
+			} catch {}
+		}
+		/** Local translator over the bundled dictionaries, mirroring the shell's `{param}` interpolation. */
+		function makeT(dict) {
+			return (key, params) => {
+				const template = dict[key] ?? key;
+				if (params === void 0) return template;
+				return template.replace(/\{(\w+)\}/g, (raw, name) => name in params ? String(params[name]) : raw);
+			};
+		}
+		function readStoredInterval() {
+			try {
+				const raw = localStorage.getItem(STORAGE_KEY);
+				if (raw === null) return null;
+				const value = Number(raw);
+				return Number.isFinite(value) && value >= 5 ? value : null;
+			} catch {
+				return null;
+			}
+		}
+		function storeInterval(value) {
+			try {
+				localStorage.setItem(STORAGE_KEY, String(value));
+			} catch {}
+		}
+		function defaultFloatPos() {
+			let sidebarRight = 264;
+			let node = document.querySelector("[data-slot=\"sidebar.settings\"]")?.parentElement ?? null;
+			while (node) {
+				const rect = node.getBoundingClientRect();
+				if (rect.x <= 1 && rect.height >= window.innerHeight * .9) {
+					sidebarRight = rect.right;
+					break;
+				}
+				node = node.parentElement;
+			}
+			const send = document.querySelector("button[aria-label=\"发送消息\"], button[aria-label=\"Send message\"], button[aria-label=\"Send\"]")?.getBoundingClientRect();
+			const y = send && send.width > 0 ? Math.round(send.top + send.height / 2 - BALL_SIZE / 2) : window.innerHeight - 100 - BALL_SIZE;
+			return {
+				x: Math.round(sidebarRight + 16),
+				y
+			};
+		}
+		function readStoredFloatPos() {
+			try {
+				const raw = localStorage.getItem(POS_KEY);
+				if (raw === null) return null;
+				const parsed = JSON.parse(raw);
+				if (parsed === null || typeof parsed.x !== "number" || !Number.isFinite(parsed.x)) return null;
+				if (typeof parsed.y !== "number" || !Number.isFinite(parsed.y)) return null;
+				return {
+					x: parsed.x,
+					y: parsed.y
+				};
+			} catch {
+				return null;
+			}
+		}
+		function storeFloatPos(pos) {
+			try {
+				localStorage.setItem(POS_KEY, JSON.stringify(pos));
+			} catch {}
+		}
+		function formatCountdown(resetAt, now, t) {
+			const diff = new Date(resetAt).getTime() - now;
+			if (!Number.isFinite(diff) || diff <= 0) return null;
+			const minutes = Math.floor(diff / 6e4);
+			if (minutes >= 1440) return t("countdown.days", {
+				days: Math.floor(minutes / 1440),
+				hours: Math.floor(minutes % 1440 / 60)
+			});
+			if (minutes >= 60) return t("countdown.hours", {
+				hours: Math.floor(minutes / 60),
+				minutes: minutes % 60
+			});
+			return t("countdown.minutes", { minutes: Math.max(1, minutes) });
+		}
+		function barTone(percent) {
+			if (percent === null) return "ok";
+			if (percent >= 90) return "danger";
+			if (percent >= 70) return "warn";
+			return "ok";
+		}
+		/** Worst health across the fetch + every provider: drives the trigger's status dot. */
+		function healthTone(data, error) {
+			if (error !== null) return "danger";
+			let tone = "ok";
+			for (const provider of data?.providers ?? []) {
+				if (provider.status === "error" || provider.status === "missing-credential") return "danger";
+				for (const row of provider.usages ?? []) {
+					const rowTone = barTone(row.percent);
+					if (rowTone === "danger") return "danger";
+					if (rowTone === "warn") tone = "warn";
+				}
+			}
+			return tone;
+		}
+		function formatAmount(value) {
+			if (value === null) return "—";
+			return Number.isInteger(value) ? String(value) : value.toFixed(2);
+		}
+		function UsageRows({ provider, now, t }) {
+			const rows = provider.usages ?? [];
+			if (rows.length === 0) return null;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: rows.map((row, index) => {
+				const percent = row.percent;
+				const reset = row.resetAt !== null ? formatCountdown(row.resetAt, now, t) : null;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "dsh-usage-row",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "dsh-usage-rowHead",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "dsh-usage-rowLabel",
+								children: row.label === "weekly" ? t("usage.weekly") : row.label
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "dsh-usage-rowValue",
+								children: row.limit === null ? t("usage.unlimited") : percent !== null ? `${Math.round(percent)}%` : t("usage.used", { used: formatAmount(row.used) })
+							})]
+						}),
+						percent !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "dsh-usage-barTrack",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: `dsh-usage-barFill dsh-usage-barFill--${barTone(percent)}`,
+								style: { width: `${Math.min(100, Math.max(0, percent))}%` }
+							})
+						}) : null,
+						reset !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "dsh-usage-rowReset",
+							children: t("usage.resetIn", { countdown: reset })
+						}) : null
+					]
+				}, `${row.label}-${index}`);
+			}) });
+		}
+		function ProviderCard({ provider, now, t }) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "dsh-usage-card",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "dsh-usage-cardHead",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dsh-usage-providerName",
+						children: provider.displayName
+					})
+				}), provider.status === "unsupported" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "dsh-usage-message",
+					children: t("status.unsupported")
+				}) : provider.status === "missing-credential" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "dsh-usage-message",
+					children: t("status.missingCredential", { ref: provider.message })
+				}) : provider.status === "error" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "dsh-usage-message",
+					children: [
+						t("status.error"),
+						": ",
+						provider.message
+					]
+				}) : provider.kind === "balance" ? (provider.balances ?? []).map((row, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "dsh-usage-balanceRow",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dsh-usage-balanceTotal",
+						children: row.total
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dsh-usage-balanceCurrency",
+						children: row.currency
+					})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "dsh-usage-balanceParts",
+					children: [row.granted !== "0" && row.granted !== "0.00" ? t("balance.granted", { amount: row.granted }) : null, row.toppedUp !== "0" && row.toppedUp !== "0.00" ? t("balance.toppedUp", { amount: row.toppedUp }) : null].filter(Boolean).join(" · ")
+				})] }, `${row.currency}-${index}`)) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UsageRows, {
+					provider,
+					now,
+					t
+				})]
+			});
+		}
+		/** Battery level: remaining charge reads as remaining quota. */
+		function BatteryIcon() {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+				width: "14",
+				height: "14",
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "2",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				"aria-hidden": "true",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+						width: "16",
+						height: "10",
+						x: "2",
+						y: "7",
+						rx: "2",
+						ry: "2"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M22 11v2" }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M6 11v2" }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M10 11v2" })
+				]
+			});
+		}
+		function RefreshIcon() {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+				width: "14",
+				height: "14",
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "2",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				"aria-hidden": "true",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M20 12a8 8 0 1 1-2.34-5.66" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M20 4v4h-4" })]
+			});
+		}
+		function GlobeIcon() {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+				width: "13",
+				height: "13",
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "2",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				"aria-hidden": "true",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+						cx: "12",
+						cy: "12",
+						r: "9"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M3 12h18" }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 3c2.5 2.6 3.9 5.7 3.9 9s-1.4 6.4-3.9 9c-2.5-2.6-3.9-5.7-3.9-9S9.5 5.6 12 3z" })
+				]
+			});
+		}
+		/** Crosshair for the "reset ball to its default spot" head button. */
+		function HomeIcon() {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+				width: "13",
+				height: "13",
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "2",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				"aria-hidden": "true",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+						cx: "12",
+						cy: "12",
+						r: "7"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 2v3M12 19v3M2 12h3M19 12h3" }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+						cx: "12",
+						cy: "12",
+						r: "1.5",
+						fill: "currentColor",
+						stroke: "none"
+					})
+				]
+			});
+		}
+		function UsageAction({ t, fetchUsage }) {
+			const [open, setOpen] = (0, react.useState)(false);
+			const [data, setData] = (0, react.useState)(null);
+			const [error, setError] = (0, react.useState)(null);
+			const [loading, setLoading] = (0, react.useState)(false);
+			const [intervalSec, setIntervalSec] = (0, react.useState)(() => readStoredInterval() ?? DEFAULT_INTERVAL);
+			const [langOverride, setLangOverride] = (0, react.useState)(() => readStoredLang());
+			const [now, setNow] = (0, react.useState)(() => Date.now());
+			const [floatPos, setFloatPos] = (0, react.useState)(() => readStoredFloatPos() ?? defaultFloatPos());
+			/** True once the position comes from storage/drag/reset — the default
+			anchors to the composer send button, which mounts after this plugin,
+			so an unpinned ball re-anchors as soon as the composer appears. */
+			const posPinned = (0, react.useRef)(readStoredFloatPos() !== null);
+			/** Transient ball position while dragging (cursor-centered); null when docked. */
+			const [dragPos, setDragPos] = (0, react.useState)(null);
+			const harnessLang = t("lang.switch") === zh["lang.switch"] ? "zh" : t("lang.switch") === en["lang.switch"] ? "en" : null;
+			const lang = langOverride ?? harnessLang ?? "en";
+			const tt = (0, react.useMemo)(() => makeT(lang === "zh" ? zh : en), [lang]);
+			const toggleLang = (0, react.useCallback)(() => {
+				setLangOverride((current) => {
+					const next = (current ?? harnessLang ?? "en") === "zh" ? "en" : "zh";
+					storeLang(next);
+					return next;
+				});
+			}, [harnessLang]);
+			/** Panel-head home button: send the ball back to its default spot. */
+			const resetFloatPos = () => {
+				const next = defaultFloatPos();
+				storeFloatPos(next);
+				setFloatPos(next);
+				posPinned.current = true;
+			};
+			const [panelPos, setPanelPos] = (0, react.useState)(null);
+			const rootRef = (0, react.useRef)(null);
+			const ballRef = (0, react.useRef)(null);
+			const panelRef = (0, react.useRef)(null);
+			const inFlight = (0, react.useRef)(false);
+			/** Active ball-drag session; cleared on pointerup/pointercancel. */
+			const dragRef = (0, react.useRef)(null);
+			/** Set when a drag ends so the trailing click does not toggle the panel. */
+			const suppressClickRef = (0, react.useRef)(false);
+			const refresh = (0, react.useCallback)(async () => {
+				if (inFlight.current) return;
+				inFlight.current = true;
+				setLoading(true);
+				try {
+					const result = await fetchUsage();
+					setData(result);
+					setError(null);
+				} catch (reason) {
+					setError(reason instanceof Error ? reason.message : String(reason));
+				} finally {
+					inFlight.current = false;
+					setLoading(false);
+				}
+			}, [fetchUsage]);
+			(0, react.useEffect)(() => {
+				refresh();
+			}, [refresh]);
+			(0, react.useEffect)(() => {
+				const timer = setInterval(() => {
+					if (document.visibilityState === "visible") refresh();
+				}, intervalSec * 1e3);
+				return () => clearInterval(timer);
+			}, [intervalSec, refresh]);
+			(0, react.useEffect)(() => {
+				if (data !== null && readStoredInterval() === null && data.refreshSeconds !== intervalSec) setIntervalSec(data.refreshSeconds);
+			}, [data]);
+			(0, react.useEffect)(() => {
+				if (!open) return;
+				setNow(Date.now());
+				const timer = setInterval(() => setNow(Date.now()), 3e4);
+				return () => clearInterval(timer);
+			}, [open]);
+			(0, react.useEffect)(() => {
+				if (!open) return;
+				const closeOutside = (event) => {
+					if (!(event.target instanceof Node)) return;
+					if (rootRef.current?.contains(event.target)) return;
+					if (ballRef.current?.contains(event.target)) return;
+					if (panelRef.current?.contains(event.target)) return;
+					setOpen(false);
+				};
+				document.addEventListener("pointerdown", closeOutside);
+				return () => document.removeEventListener("pointerdown", closeOutside);
+			}, [open]);
+			(0, react.useEffect)(() => {
+				if (!open) return;
+				const update = () => {
+					const rect = ballRef.current?.getBoundingClientRect();
+					if (!rect) return;
+					const left = Math.min(Math.max(8, rect.left), Math.max(8, window.innerWidth - 336));
+					setPanelPos(rect.top > window.innerHeight / 2 ? {
+						left,
+						bottom: window.innerHeight - rect.top + 6
+					} : {
+						left,
+						top: rect.bottom + 6
+					});
+				};
+				update();
+				window.addEventListener("resize", update);
+				return () => window.removeEventListener("resize", update);
+			}, [open, floatPos]);
+			(0, react.useEffect)(() => {
+				const clampPos = () => {
+					setFloatPos((current) => {
+						const x = Math.min(Math.max(8, current.x), window.innerWidth - BALL_SIZE - 8);
+						const y = Math.min(Math.max(8, current.y), window.innerHeight - BALL_SIZE - 8);
+						if (x === current.x && y === current.y) return current;
+						const next = {
+							x,
+							y
+						};
+						storeFloatPos(next);
+						return next;
+					});
+				};
+				clampPos();
+				window.addEventListener("resize", clampPos);
+				return () => window.removeEventListener("resize", clampPos);
+			}, []);
+			(0, react.useEffect)(() => {
+				if (posPinned.current) return;
+				let tries = 0;
+				const timer = setInterval(() => {
+					tries += 1;
+					if (posPinned.current || tries > 20) {
+						clearInterval(timer);
+						return;
+					}
+					const next = defaultFloatPos();
+					setFloatPos((current) => current.x === next.x && current.y === next.y ? current : next);
+				}, 400);
+				return () => clearInterval(timer);
+			}, []);
+			const tone = healthTone(data, error);
+			const onKeyDown = (event) => {
+				if (event.key !== "Escape" || !open) return;
+				event.preventDefault();
+				setOpen(false);
+			};
+			const onBallPointerDown = (event) => {
+				event.currentTarget.setPointerCapture(event.pointerId);
+				dragRef.current = {
+					pointerId: event.pointerId,
+					startX: event.clientX,
+					startY: event.clientY,
+					dragging: false
+				};
+			};
+			const onBallPointerMove = (event) => {
+				const drag = dragRef.current;
+				if (drag === null || drag.pointerId !== event.pointerId) return;
+				if (!drag.dragging) {
+					if (Math.abs(event.clientX - drag.startX) < 5 && Math.abs(event.clientY - drag.startY) < 5) return;
+					drag.dragging = true;
+					if (open) setOpen(false);
+				}
+				const half = BALL_SIZE / 2;
+				setDragPos({
+					x: Math.min(Math.max(half, event.clientX), window.innerWidth - half),
+					y: Math.min(Math.max(half, event.clientY), window.innerHeight - half)
+				});
+			};
+			const endBallDrag = (event) => {
+				const drag = dragRef.current;
+				dragRef.current = null;
+				if (drag === null || drag.pointerId !== event.pointerId || !drag.dragging) return;
+				const half = BALL_SIZE / 2;
+				const x = Math.min(Math.max(half, event.clientX), window.innerWidth - half);
+				const y = Math.min(Math.max(half, event.clientY), window.innerHeight - half);
+				const next = {
+					x: x - half,
+					y: y - half
+				};
+				setFloatPos(next);
+				storeFloatPos(next);
+				setDragPos(null);
+				posPinned.current = true;
+				suppressClickRef.current = true;
+			};
+			const cancelBallDrag = (event) => {
+				if (dragRef.current?.pointerId !== event.pointerId) return;
+				dragRef.current = null;
+				setDragPos(null);
+			};
+			const onBallClick = () => {
+				if (suppressClickRef.current) {
+					suppressClickRef.current = false;
+					return;
+				}
+				setNow(Date.now());
+				setOpen((current) => !current);
+				if (!open) refresh();
+			};
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				ref: rootRef,
+				className: "dsh-usage-root",
+				onKeyDown,
+				children: [(0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					ref: ballRef,
+					type: "button",
+					className: `dsh-usage-ball dsh-usage-tone-${tone}`,
+					style: dragPos !== null ? {
+						left: dragPos.x - BALL_SIZE / 2,
+						top: dragPos.y - BALL_SIZE / 2
+					} : {
+						left: floatPos.x,
+						top: floatPos.y
+					},
+					"aria-expanded": open,
+					"aria-label": tt("action.aria"),
+					title: `${tt("action.aria")} · ${tt(`status.tone.${tone}`)}`,
+					onPointerDown: onBallPointerDown,
+					onPointerMove: onBallPointerMove,
+					onPointerUp: endBallDrag,
+					onPointerCancel: cancelBallDrag,
+					onClick: onBallClick,
+					onKeyDown,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BatteryIcon, {})
+				}), document.body), open && panelPos !== null ? (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					ref: panelRef,
+					className: "dsh-usage-panel",
+					role: "dialog",
+					"aria-label": tt("panel.title"),
+					style: {
+						left: panelPos.left,
+						top: panelPos.top,
+						bottom: panelPos.bottom
+					},
+					onKeyDown,
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "dsh-usage-head",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "dsh-usage-title",
+									children: tt("panel.title")
+								}),
+								data?.version ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+									className: "dsh-usage-version",
+									children: ["v", data.version]
+								}) : null,
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: "dsh-usage-home",
+									onClick: resetFloatPos,
+									title: tt("panel.resetPos"),
+									"aria-label": tt("panel.resetPos"),
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HomeIcon, {})
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+									type: "button",
+									className: "dsh-usage-lang",
+									onClick: toggleLang,
+									title: tt("lang.switch"),
+									"aria-label": tt("lang.switch"),
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(GlobeIcon, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: lang === "zh" ? "中" : "EN" })]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: `dsh-usage-refresh${loading ? " dsh-usage-refresh--loading" : ""}`,
+									disabled: loading,
+									onClick: refresh,
+									title: tt("panel.refresh"),
+									"aria-label": tt("panel.refresh"),
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RefreshIcon, {})
+								})
+							]
+						}),
+						data === null && error !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: "dsh-usage-message",
+							children: [
+								tt("status.error"),
+								": ",
+								error
+							]
+						}) : null,
+						data !== null && data.providers.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "dsh-usage-message",
+							children: tt("panel.empty")
+						}) : null,
+						(data?.providers ?? []).map((provider) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProviderCard, {
+							provider,
+							now,
+							t: tt
+						}, provider.id)),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "dsh-usage-foot",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "dsh-usage-footLabel",
+									children: tt("panel.interval")
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
+									className: "dsh-usage-select",
+									value: intervalSec,
+									onChange: (event) => {
+										const value = Number(event.target.value);
+										setIntervalSec(value);
+										storeInterval(value);
+									},
+									children: INTERVAL_OPTIONS.map((seconds) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+										value: seconds,
+										children: tt(`interval.${seconds}s`)
+									}, seconds))
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "dsh-usage-updated",
+									children: data === null ? tt("panel.never") : tt("panel.updated", { time: new Date(data.fetchedAt).toLocaleTimeString(lang === "zh" ? "zh-CN" : "en-US") })
+								})
+							]
+						})
+					]
+				}), document.body) : null]
+			});
+		}
+		//#endregion
+		//#region src/client/styles.ts
+		/**
+		* Panel stylesheet, injected once per page. Follows the shipped plugins'
+		* convention of a `<style data-plugin-css>` tag and design-token colors.
+		*/
+		const CSS = `
+.dsh-usage-root { position: relative; display: inline-flex; }
+/* Tri-tone health halo: only the shadow carries the worst provider state
+   (green ok / amber remaining<30% / red error or usage>=90%) — the button
+   face itself stays neutral. A 1px tone ring plus a soft halo keeps the
+   state readable on both light and dark skins. */
+.dsh-usage-tone-ok { --dsh-usage-tone: #22a06b; }
+.dsh-usage-tone-warn { --dsh-usage-tone: #e2b93b; }
+.dsh-usage-tone-danger { --dsh-usage-tone: #d94f4f; }
+/* Floating ball trigger: a draggable fixed circle portaled to document.body,
+   one layer below the panel (1000) so the popover always covers it. Position
+   comes from inline style: docked it sits at its stored coordinates, while
+   dragging it follows the cursor. Keeps the shell's lv3 lift shadow; the
+   tone halo stacks on top. */
+.dsh-usage-ball {
+  position: fixed; z-index: 999; width: 32px; height: 32px; border-radius: 50%;
+  cursor: pointer; touch-action: none;
+  display: inline-flex; align-items: center; justify-content: center;
+  border: 1px solid var(--dsw-alias-border-l2);
+  background-color: var(--dsw-specific-menu);
+  color: var(--dsw-alias-label-tertiary);
+  transition: box-shadow 0.15s;
+}
+.dsh-usage-ball:hover, .dsh-usage-ball:focus-visible { color: var(--dsw-alias-label-secondary); }
+.dsh-usage-ball svg { width: 15px; height: 15px; }
+.dsh-usage-ball.dsh-usage-tone-ok,
+.dsh-usage-ball.dsh-usage-tone-warn,
+.dsh-usage-ball.dsh-usage-tone-danger {
+  box-shadow:
+    var(--dsw-shadow-lv3),
+    0 0 0 1px color-mix(in srgb, var(--dsh-usage-tone) 40%, transparent),
+    0 0 14px color-mix(in srgb, var(--dsh-usage-tone) 55%, transparent);
+}
+.dsh-usage-ball.dsh-usage-tone-ok:hover,
+.dsh-usage-ball.dsh-usage-tone-warn:hover,
+.dsh-usage-ball.dsh-usage-tone-danger:hover,
+.dsh-usage-ball.dsh-usage-tone-ok:focus-visible,
+.dsh-usage-ball.dsh-usage-tone-warn:focus-visible,
+.dsh-usage-ball.dsh-usage-tone-danger:focus-visible {
+  box-shadow:
+    var(--dsw-shadow-lv3),
+    0 0 0 1px color-mix(in srgb, var(--dsh-usage-tone) 55%, transparent),
+    0 0 18px color-mix(in srgb, var(--dsh-usage-tone) 70%, transparent);
+}
+.dsh-usage-panel {
+  z-index: 1000; box-sizing: border-box;
+  border: 1px solid var(--dsw-alias-border-l2);
+  background: var(--dsw-specific-menu);
+  box-shadow: var(--dsw-shadow-lv3);
+  border-radius: 12px; margin: 0; padding: 8px;
+  width: 320px; max-width: min(360px, 100vw - 16px);
+  max-height: min(460px, 100vh - 60px); overflow: auto;
+  display: flex; flex-direction: column; gap: 6px;
+  /* position: fixed with viewport coordinates computed inline from the
+     trigger rect — absolute positioning inside the sidebar gets clipped by
+     the column's overflow. */
+  position: fixed;
+  --dsh-scrollbar-thumb: var(--dsw-alias-scrollbar-bg-l2);
+  --dsh-scrollbar-thumb-hover: var(--dsw-alias-scrollbar-hover-l2);
+}
+.dsh-usage-head {
+  display: flex; align-items: center; gap: 8px; padding: 2px 4px 6px;
+  border-bottom: 1px solid var(--dsw-alias-border-l2);
+}
+.dsh-usage-title { color: var(--dsw-alias-label-primary); font-size: 13px; font-weight: 600; }
+.dsh-usage-version {
+  color: var(--dsw-alias-label-tertiary); font-size: 11px; line-height: 16px;
+  padding: 0 5px; border-radius: 4px; background: var(--dsw-alias-fill-l2);
+  font-variant-numeric: tabular-nums; user-select: none; margin-right: auto;
+}
+.dsh-usage-lang {
+  cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
+  border: 0; border-radius: 6px; background: 0; padding: 3px 5px;
+  color: var(--dsw-alias-label-tertiary); font-size: 11px; line-height: 16px;
+}
+.dsh-usage-lang:hover { color: var(--dsw-alias-label-secondary); }
+.dsh-usage-refresh {
+  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
+  border: 0; border-radius: 6px; background: 0; padding: 4px;
+  color: var(--dsw-alias-label-tertiary); line-height: 0;
+}
+.dsh-usage-refresh:hover { color: var(--dsw-alias-label-secondary); }
+.dsh-usage-refresh:disabled { opacity: 0.5; cursor: default; }
+/* Home button in the panel head: sends the ball back to its default spot. */
+.dsh-usage-home {
+  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
+  border: 0; border-radius: 6px; background: 0; padding: 4px;
+  color: var(--dsw-alias-label-tertiary); line-height: 0;
+}
+.dsh-usage-home:hover { color: var(--dsw-alias-label-secondary); }
+@keyframes dsh-usage-spin { to { transform: rotate(360deg); } }
+.dsh-usage-refresh--loading svg { animation: dsh-usage-spin 0.9s linear infinite; }
+.dsh-usage-card {
+  border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px;
+  background: var(--dsw-alias-fill-l2);
+}
+.dsh-usage-cardHead { display: flex; align-items: center; gap: 8px; }
+.dsh-usage-providerName {
+  color: var(--dsw-alias-label-primary); font-size: 13px; font-weight: 600;
+  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1;
+}
+.dsh-usage-message { color: var(--dsw-alias-label-tertiary); font-size: 12px; line-height: 18px; word-break: break-all; }
+.dsh-usage-balanceRow { display: flex; align-items: baseline; gap: 8px; }
+.dsh-usage-balanceTotal {
+  color: var(--dsw-alias-label-primary); font-size: 18px; font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+.dsh-usage-balanceCurrency { color: var(--dsw-alias-label-secondary); font-size: 12px; }
+.dsh-usage-balanceParts { color: var(--dsw-alias-label-tertiary); font-size: 11px; line-height: 16px; }
+.dsh-usage-row { display: flex; flex-direction: column; gap: 3px; }
+.dsh-usage-rowHead { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 18px; }
+.dsh-usage-rowLabel { color: var(--dsw-alias-label-secondary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dsh-usage-rowValue { color: var(--dsw-alias-label-tertiary); font-variant-numeric: tabular-nums; flex: none; }
+.dsh-usage-barTrack {
+  height: 4px; border-radius: 2px; overflow: hidden;
+  background: var(--dsw-alias-border-l2);
+}
+.dsh-usage-barFill { height: 100%; border-radius: 2px; transition: width 0.3s; }
+.dsh-usage-barFill--ok { background: #22a06b; }
+.dsh-usage-barFill--warn { background: #e2b93b; }
+.dsh-usage-barFill--danger { background: #d94f4f; }
+.dsh-usage-rowReset { color: var(--dsw-alias-label-tertiary); font-size: 11px; line-height: 16px; }
+.dsh-usage-foot {
+  display: flex; align-items: center; gap: 8px; padding: 6px 4px 2px;
+  border-top: 1px solid var(--dsw-alias-border-l2);
+}
+.dsh-usage-footLabel { color: var(--dsw-alias-label-tertiary); font-size: 11px; }
+.dsh-usage-select {
+  border: 1px solid var(--dsw-alias-border-l2); border-radius: 6px; background: 0;
+  color: var(--dsw-alias-label-secondary); font-size: 11px; padding: 2px 4px; cursor: pointer;
+}
+.dsh-usage-updated { color: var(--dsw-alias-label-tertiary); font-size: 11px; margin-left: auto; }
+`;
+		const TAG_ID = "dsh-provider-usage/panel.css";
+		/** Inject the panel stylesheet once; on HMR swap, refresh the existing tag's payload in place. */
+		function ensureStyles() {
+			if (typeof document === "undefined") return;
+			const existing = document.querySelector("style[data-plugin-css=" + JSON.stringify(TAG_ID) + "]");
+			if (existing !== null) {
+				if (existing.textContent !== CSS) existing.textContent = CSS;
+				return;
+			}
+			const tag = document.createElement("style");
+			tag.dataset.plugin = "dsh-provider-usage";
+			tag.dataset.pluginCss = TAG_ID;
+			tag.textContent = CSS;
+			document.head.appendChild(tag);
+		}
+		//#endregion
+		//#region src/client/index.ts
+		/**
+		* provider-usage — browser half.
+		*
+		* Registers the locale dictionaries and contributes the usage widget into the
+		* sidebar footer's additive action slot. Data comes from the host `usage`
+		* Typert Remote (SRC mode — no generated descriptors) through the raw RPC
+		* caller on the connection service.
+		*/
+		/** Required client services: slot registry, locale seats, and the connection RPC caller. */
+		const inject = [
+			"slots",
+			"locale",
+			"connection"
+		];
+		function apply(ctx) {
+			ensureStyles();
+			ctx.effect(() => ctx.locale.register("provider-usage", {
+				zh,
+				en
+			}), "provider-usage: dictionaries");
+			const fetchUsage = async () => {
+				const result = await ctx.connection.rpc.call("/api", "usage/list", { args: {} });
+				if (!result.ok) throw new Error(`${result.error.code}: ${result.error.message}`);
+				return result.value;
+			};
+			ctx.slots.inject("sidebar.footer.action", () => ctx.slots.register({
+				name: "sidebar.footer.action",
+				id: "provider-usage",
+				order: 10,
+				locale: "provider-usage",
+				inject: () => ({ fetchUsage })
+			}, UsageAction));
+		}
+		//#endregion
+		exports.apply = apply;
+		exports.inject = inject;
+		return module.exports;
+	}
+});
+
+//# sourceMappingURL=client.js.map