dsh-balance-widget 0.4.0 → 0.4.1

package/lib/client.js

@@ -8,7 +8,7 @@ window.__ModuleLoader__.load({
 		let react = require("react");
 		let _deepseek_ai_dsh_client_ui_primitives = require("@deepseek-ai/dsh-client-ui-primitives");
 		//#region lib/types/client/styles.js
-		const css = ".dshbw_wrap{position:relative;display:inline-flex;align-items:center}.dshbw_btn{background:none;border:none;cursor:pointer;color:var(--dsw-alias-label-secondary);display:inline-flex;align-items:center;gap:4px;padding:2px 6px;border-radius:6px;font-size:12px;line-height:18px;font-family:inherit}.dshbw_btn:hover{color:var(--dsw-alias-label-primary);background:var(--dsw-alias-interactive-bg-hover)}.dshbw_btn[data-level=\"1\"]{color:var(--dsw-alias-state-warn-primary)}.dshbw_btn[data-level=\"2\"]{color:var(--dsw-alias-state-error-primary)}.dshbw_pop{position:absolute;top:calc(100% + 6px);right:0;z-index:60;min-width:230px;background:var(--dsw-alias-bg-layer-3);border:1px solid var(--dsw-alias-border-l3);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.18);padding:12px 14px;font-size:12px;line-height:20px;color:var(--dsw-alias-label-primary)}.dshbw_head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}.dshbw_title{font-weight:600;color:var(--dsw-alias-label-primary)}.dshbw_refresh{background:none;border:1px solid var(--dsw-alias-border-l2);cursor:pointer;color:var(--dsw-alias-label-secondary);display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;font-size:13px;line-height:1;padding:0;font-family:inherit}.dshbw_refresh:hover{color:var(--dsw-alias-label-primary);border-color:var(--dsw-alias-border-l3);background:var(--dsw-alias-interactive-bg-hover)}.dshbw_refresh[data-spinning=true]{animation:dshbw-spin .8s linear infinite}.dshbw_row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:2px 0}.dshbw_label{display:inline-flex;align-items:center;min-width:0}.dshbw_val{font-weight:600;color:var(--dsw-alias-label-primary)}.dshbw_val[data-level=\"1\"]{color:var(--dsw-alias-state-warn-primary)}.dshbw_val[data-level=\"2\"]{color:var(--dsw-alias-state-error-primary)}.dshbw_err{color:var(--dsw-alias-state-error-primary);font-size:11px;line-height:16px;margin-top:6px}.dshbw_hint{color:var(--dsw-alias-label-tertiary);font-size:11px;line-height:16px;margin-top:6px;border-top:1px solid var(--dsw-alias-border-l1);padding-top:6px}.dshbw_foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}.dshbw_link{background:none;border:none;cursor:pointer;color:var(--dsw-alias-state-business-primary);display:inline-flex;align-items:center;gap:4px;padding:2px 6px;border-radius:6px;font-size:12px;line-height:18px;font-family:inherit;text-decoration:none}.dshbw_link:hover{color:var(--dsw-alias-state-business-primary);text-decoration:underline}@keyframes dshbw-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.dshbw_side{display:flex;flex-direction:column;gap:4px;padding:6px 8px;margin:0 8px 4px;border-radius:8px;background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary)}.dshbw_side:hover{background:var(--dsw-alias-interactive-bg-hover)}.dshbw_sideTop{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;line-height:18px}.dshbw_sideAmount{font-weight:600}.dshbw_sideAmount[data-level=\"1\"]{color:var(--dsw-alias-state-warn-primary)}.dshbw_sideAmount[data-level=\"2\"]{color:var(--dsw-alias-state-error-primary)}.dshbw_bar{height:4px;border-radius:2px;background:var(--dsw-alias-border-l2);overflow:hidden}.dshbw_barFill{height:100%;border-radius:2px;transition:width .4s ease}.dshbw_barFill[data-level=\"0\"]{background:var(--dsw-alias-state-business-primary)}.dshbw_barFill[data-level=\"1\"]{background:var(--dsw-alias-state-warn-primary)}.dshbw_barFill[data-level=\"2\"]{background:var(--dsw-alias-state-error-primary)}.dshbw_sideFoot{display:flex;justify-content:space-between;font-size:10px;line-height:14px;color:var(--dsw-alias-label-tertiary)}";
+		const css = ".dshbw_wrap{position:relative;display:inline-flex;align-items:center}.dshbw_btn{background:none;border:none;cursor:pointer;color:var(--dsw-alias-label-secondary);display:inline-flex;align-items:center;gap:4px;padding:2px 6px;border-radius:6px;font-size:12px;line-height:18px;font-family:inherit}.dshbw_btn:hover{color:var(--dsw-alias-label-primary);background:var(--dsw-alias-interactive-bg-hover)}.dshbw_btn[data-level=\"1\"]{color:var(--dsw-alias-state-warn-primary)}.dshbw_btn[data-level=\"2\"]{color:var(--dsw-alias-state-error-primary)}.dshbw_pop{position:absolute;top:calc(100% + 6px);right:0;z-index:60;min-width:230px;background:var(--dsw-alias-bg-layer-3);border:1px solid var(--dsw-alias-border-l3);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.18);padding:12px 14px;font-size:12px;line-height:20px;color:var(--dsw-alias-label-primary)}.dshbw_head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}.dshbw_title{font-weight:600;color:var(--dsw-alias-label-primary)}.dshbw_refresh{background:none;border:1px solid var(--dsw-alias-border-l2);cursor:pointer;color:var(--dsw-alias-label-secondary);display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;font-size:13px;line-height:1;padding:0;font-family:inherit}.dshbw_refresh:hover{color:var(--dsw-alias-label-primary);border-color:var(--dsw-alias-border-l3);background:var(--dsw-alias-interactive-bg-hover)}.dshbw_refresh[data-spinning=true]{animation:dshbw-spin .8s linear infinite}.dshbw_row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:2px 0}.dshbw_label{display:inline-flex;align-items:center;min-width:0}.dshbw_val{font-weight:600;color:var(--dsw-alias-label-primary)}.dshbw_val[data-level=\"1\"]{color:var(--dsw-alias-state-warn-primary)}.dshbw_val[data-level=\"2\"]{color:var(--dsw-alias-state-error-primary)}.dshbw_err{color:var(--dsw-alias-state-error-primary);font-size:11px;line-height:16px;margin-top:6px}.dshbw_hint{color:var(--dsw-alias-label-tertiary);font-size:11px;line-height:16px;margin-top:6px;border-top:1px solid var(--dsw-alias-border-l1);padding-top:6px}.dshbw_foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}.dshbw_link{background:none;border:none;cursor:pointer;color:var(--dsw-alias-state-business-primary);display:inline-flex;align-items:center;gap:4px;padding:2px 6px;border-radius:6px;font-size:12px;line-height:18px;font-family:inherit;text-decoration:none}.dshbw_link:hover{color:var(--dsw-alias-state-business-primary);text-decoration:underline}@keyframes dshbw-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.dshbw_side{display:flex;flex-direction:column;gap:4px;padding:6px 8px;margin:0 8px 4px;border-radius:8px;background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary)}.dshbw_side:hover{background:var(--dsw-alias-interactive-bg-hover)}.dshbw_sideTop{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;line-height:18px}.dshbw_sideAmount{font-weight:600}.dshbw_sideAmount[data-level=\"1\"]{color:var(--dsw-alias-state-warn-primary)}.dshbw_sideAmount[data-level=\"2\"]{color:var(--dsw-alias-state-error-primary)}.dshbw_bar{height:4px;border-radius:2px;background:var(--dsw-alias-border-l2);overflow:hidden}.dshbw_barFill{height:100%;border-radius:2px;transition:width .4s ease}.dshbw_barFill[data-level=\"0\"]{background:var(--dsw-alias-state-business-primary)}.dshbw_barFill[data-level=\"1\"]{background:var(--dsw-alias-state-warn-primary)}.dshbw_barFill[data-level=\"2\"]{background:var(--dsw-alias-state-error-primary)}.dshbw_sideFoot{display:flex;justify-content:space-between;font-size:10px;line-height:14px;color:var(--dsw-alias-label-tertiary)}.dshbw_sideWrap{position:relative}.dshbw_side{display:flex;flex-direction:column;gap:4px;width:100%;padding:6px 8px;margin:0 8px 4px;border:none;border-radius:8px;background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary);cursor:pointer;font-family:inherit;text-align:left}.dshbw_side:hover{background:var(--dsw-alias-interactive-bg-hover)}.dshbw_sidePop{position:absolute;bottom:calc(100% + 8px);left:8px;z-index:70;min-width:240px;background:var(--dsw-alias-bg-layer-3);border:1px solid var(--dsw-alias-border-l3);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.18);padding:12px 14px;font-size:12px;line-height:20px;color:var(--dsw-alias-label-primary)}.dshbw_sidePopHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.dshbw_sidePopTitle{font-weight:600}.dshbw_sidePopClose{background:none;border:none;cursor:pointer;color:var(--dsw-alias-label-tertiary);font-size:16px;line-height:1;padding:0 2px;font-family:inherit}.dshbw_sidePopClose:hover{color:var(--dsw-alias-label-primary)}.dshbw_sidePopFoot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px}.dshbw_sidePopRefresh{background:none;border:1px solid var(--dsw-alias-border-l2);cursor:pointer;color:var(--dsw-alias-label-secondary);display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;padding:0;font-family:inherit}.dshbw_sidePopRefresh:hover{color:var(--dsw-alias-label-primary);border-color:var(--dsw-alias-border-l3);background:var(--dsw-alias-interactive-bg-hover)}";
 		const tagId = "dsh-balance-widget/styles.css";
 		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId) + "]") === null) {
 			const tag = document.createElement("style");
@@ -32,11 +32,18 @@ window.__ModuleLoader__.load({
 			"foot": "dshbw_foot",
 			"link": "dshbw_link",
 			"side": "dshbw_side",
+			"sideWrap": "dshbw_sideWrap",
 			"sideTop": "dshbw_sideTop",
 			"sideAmount": "dshbw_sideAmount",
 			"bar": "dshbw_bar",
 			"barFill": "dshbw_barFill",
-			"sideFoot": "dshbw_sideFoot"
+			"sideFoot": "dshbw_sideFoot",
+			"sidePop": "dshbw_sidePop",
+			"sidePopHead": "dshbw_sidePopHead",
+			"sidePopTitle": "dshbw_sidePopTitle",
+			"sidePopClose": "dshbw_sidePopClose",
+			"sidePopFoot": "dshbw_sidePopFoot",
+			"sidePopRefresh": "dshbw_sidePopRefresh"
 		};
 		//#endregion
 		//#region lib/types/client/pricing.js
@@ -186,99 +193,48 @@ window.__ModuleLoader__.load({
 			return { symbol, total, currency: entry.currency };
 		}
 		//#endregion
-		//#region lib/types/client/ExplainIcon.js
-		/**
-		* A small ⓘ marker with a hover tooltip explaining a term. Wraps the
-		* official DSH Tooltip so the popover stays visually consistent.
-		* @param {Object} props - label (tooltip text), t (locale).
-		*/
-		function ExplainIcon({ label, t }) {
-			return (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Tooltip, {
-				label: label,
-				side: "top",
-				delayMs: 300,
-				children: (0, react_jsx_runtime.jsx)("span", {
-					role: "img",
-					"aria-label": t("explain.aria"),
-					style: { cursor: "help", color: "var(--dsw-alias-label-tertiary)", marginLeft: 3, fontSize: 11, lineHeight: 1 },
-					children: (0, react_jsx_runtime.jsx)("span", {
-						children: "ⓘ"
-					})
-				})
-			});
-		}
-		//#endregion
-		//#region lib/types/client/BalanceWidget.js
+		//#region lib/types/client/SidebarBalanceCard.js
 		/**
-		* Corner widget: a small balance button in the session header utilities
-		* slot. Clicking opens a popover with the account balance and the current
-		* session's estimated spend (priced from the tokenUsage projection).
-		* @param {Object} props - useProjection (framework), sessionId (slot scope).
+		* Sidebar footer card: balance + remaining-ratio bar + today cost.
+		* Root-scoped (global, not per-session) — fetches balance itself and
+		* refreshes every 60s. Clicking opens a detail popover (balance, today
+		* cost, top-up, refresh) using only global data.
+		* @param {Object} props - wide (sidebar expanded), t (locale).
 		*/
-		function BalanceWidget({ useProjection, sessionId, t }) {
+		function SidebarBalanceCard({ wide, t }) {
 			const [open, setOpen] = (0, react.useState)(false);
 			const [balance, setBalance] = (0, react.useState)(null);
-			const [modelId, setModelId] = (0, react.useState)("deepseek-v4-flash");
-			const [lastCost, setLastCost] = (0, react.useState)(null);
 			const [todayCost, setTodayCost] = (0, react.useState)(null);
-			const [error, setError] = (0, react.useState)(null);
-			const [loading, setLoading] = (0, react.useState)(false);
-			const [refreshing, setRefreshing] = (0, react.useState)(false);
-			const [lastUpdated, setLastUpdated] = (0, react.useState)(null);
 			const [lowThreshold, setLowThreshold] = (0, react.useState)(5);
 			const [criticalThreshold, setCriticalThreshold] = (0, react.useState)(1);
-			const usage = useProjection("tokenUsage");
-			const priced = priceSession(usage, modelId);
-			/** Balance severity: 0=ok, 1=low, 2=critical (thresholds from host config). */
-			const balanceLevel = balance === null ? 0 : balance.total < criticalThreshold ? 2 : balance.total < lowThreshold ? 1 : 0;
-			/** Fetch balance only (used for the always-visible corner amount). */
-			const refreshBalance = async () => {
-				const result = await fetchBalance();
-				if (result.ok) {
-					setBalance(displayBalance(result.balanceInfos));
-					setLastUpdated(Date.now());
-					if (typeof result.modelId === "string" && result.modelId !== "") setModelId(result.modelId);
-					if (typeof result.lowThreshold === "number" && result.lowThreshold >= 0) setLowThreshold(result.lowThreshold);
-					if (typeof result.criticalThreshold === "number" && result.criticalThreshold >= 0) setCriticalThreshold(result.criticalThreshold);
-				}
-			};
-			/** Fetch all data; optionally keeps the popover's silent loading state. */
-			const refreshAll = async (showLoading) => {
+			const [error, setError] = (0, react.useState)(null);
+			const [loading, setLoading] = (0, react.useState)(false);
+			const refresh = async (showLoading) => {
 				if (showLoading) setLoading(true);
 				setError(null);
-				const [balanceResult, lastResult, todayResult] = await Promise.all([
+				const [bResult, tResult] = await Promise.all([
 					fetchBalance(),
-					fetchCost(LAST_COST_ROUTE, sessionId),
 					fetchCost(TODAY_COST_ROUTE)
 				]);
-				// Collect every failure into one fresh message; never accumulate
-				// across refreshes (each refresh starts from a clean slate).
 				const failures = [];
-				if (balanceResult.ok) {
-					setBalance(displayBalance(balanceResult.balanceInfos));
-					setLastUpdated(Date.now());
-					if (typeof balanceResult.modelId === "string" && balanceResult.modelId !== "") setModelId(balanceResult.modelId);
-					if (typeof balanceResult.lowThreshold === "number" && balanceResult.lowThreshold >= 0) setLowThreshold(balanceResult.lowThreshold);
-					if (typeof balanceResult.criticalThreshold === "number" && balanceResult.criticalThreshold >= 0) setCriticalThreshold(balanceResult.criticalThreshold);
+				if (bResult.ok) {
+					setBalance(displayBalance(bResult.balanceInfos));
+					if (typeof bResult.lowThreshold === "number" && bResult.lowThreshold >= 0) setLowThreshold(bResult.lowThreshold);
+					if (typeof bResult.criticalThreshold === "number" && bResult.criticalThreshold >= 0) setCriticalThreshold(bResult.criticalThreshold);
 				} else {
-					setBalance(null);
-					failures.push(`余额: ${balanceResult.error}`);
+					failures.push(`余额: ${bResult.error}`);
 				}
-				if (lastResult.ok) setLastCost(lastResult.cost);
-				else if (lastResult.error) failures.push(`最近提问: ${lastResult.error}`);
-				if (todayResult.ok) setTodayCost(todayResult.cost);
-				else if (todayResult.error) failures.push(`今日: ${todayResult.error}`);
+				if (tResult.ok) setTodayCost(tResult.cost);
+				else if (tResult.error) failures.push(`今日: ${tResult.error}`);
 				setError(failures.length > 0 ? failures.join("；") : null);
 				if (showLoading) setLoading(false);
 			};
-			// Fetch balance on mount, then auto-refresh every 60s so the corner
-			// amount never goes stale (balance changes only on usage/top-up).
 			(0, react.useEffect)(() => {
-				refreshBalance();
-				const timer = setInterval(refreshBalance, 60000);
+				refresh(false);
+				const timer = setInterval(() => refresh(false), 60000);
 				return () => clearInterval(timer);
 			}, []);
-			// Close the popover when clicking anywhere outside the widget.
+			// Close the popover when clicking outside the card.
 			const wrapRef = (0, react.useRef)(null);
 			(0, react.useEffect)(() => {
 				if (!open) return;
@@ -289,144 +245,98 @@ window.__ModuleLoader__.load({
 				document.addEventListener("mousedown", onDocClick);
 				return () => document.removeEventListener("mousedown", onDocClick);
 			}, [open]);
-			// While the popover is open, silently refresh costs every 30s so the
-			// figures keep up with ongoing conversation activity. The host caches
-			// cost computations, so this is cheap.
-			(0, react.useEffect)(() => {
-				if (!open) return;
-				const timer = setInterval(() => {
-					refreshAll(false);
-				}, 30000);
-				return () => clearInterval(timer);
-			}, [open]);
+			const level = balance === null ? 0 : balance.total < criticalThreshold ? 2 : balance.total < lowThreshold ? 1 : 0;
+			// Remaining-ratio: 100% at lowThreshold (or above), 0% at 0.
+			let percent = 100;
+			if (balance !== null && balance.total < lowThreshold) {
+				percent = lowThreshold <= 0 ? 100 : Math.max(0, Math.round(balance.total / lowThreshold * 100));
+			}
 			const toggle = async () => {
 				const next = !open;
 				setOpen(next);
-				if (next) await refreshAll(true);
-			};
-			const onRefresh = async () => {
-				setRefreshing(true);
-				await refreshAll(false);
-				setRefreshing(false);
+				if (next) await refresh(true);
 			};
 			return (0, react_jsx_runtime.jsx)("div", {
 				ref: wrapRef,
-				className: styles.wrap,
-				children: (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, {
-					children: [(0, react_jsx_runtime.jsxs)("button", {
+				className: styles.sideWrap,
+				children: (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, {
+					children: [(0, react_jsx_runtime.jsx)("button", {
 						type: "button",
-						className: styles.btn,
-						"data-level": balanceLevel > 0 ? balanceLevel : undefined,
-						"aria-label": t("aria"),
-						title: balanceLevel > 0 ? t(`warn.title.${balanceLevel}`) : t("title"),
+						className: styles.side,
+						title: t("title"),
 						onClick: toggle,
-						children: ["💰", balance !== null && (0, react_jsx_runtime.jsx)("span", {
-							children: `${balance.symbol}${balance.total.toFixed(2)}`
-						})]
-					}), open && (0, react_jsx_runtime.jsx)("div", {
-						className: styles.pop,
-						role: "dialog",
 						children: (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, {
 							children: [(0, react_jsx_runtime.jsx)("div", {
-								className: styles.head,
+								className: styles.sideTop,
 								children: (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, {
 									children: [(0, react_jsx_runtime.jsx)("span", {
-										className: styles.title,
-										children: t("title")
-									}), (0, react_jsx_runtime.jsx)("button", {
-										type: "button",
-										className: styles.refresh,
-										"aria-label": t("refresh.aria"),
-										title: t("refresh.title"),
-										"data-spinning": refreshing || undefined,
-										disabled: refreshing,
-										onClick: onRefresh,
-										children: (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconRefreshOutline14, {})
+										children: "💰"
+									}), (0, react_jsx_runtime.jsx)("span", {
+										className: styles.sideAmount,
+										"data-level": level > 0 ? level : undefined,
+										children: balance !== null ? `${balance.symbol}${balance.total.toFixed(2)}` : "—"
 									})]
 								})
 							}), (0, react_jsx_runtime.jsx)("div", {
-								className: styles.row,
-								children: (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, {
-									children: [(0, react_jsx_runtime.jsx)("span", {
-										className: styles.label,
-										children: (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, {
-											children: [t("balance"), (0, react_jsx_runtime.jsx)(ExplainIcon, {
-												label: t("explain.balance"),
-												t
-											})]
-										})
-									}), (0, react_jsx_runtime.jsx)("span", {
-										className: styles.val,
-										"data-level": balanceLevel > 0 ? balanceLevel : undefined,
-										children: loading ? "…" : balance !== null ? `${balance.symbol}${balance.total.toFixed(2)}` : "—"
-									})]
+								className: styles.bar,
+								"aria-label": t("side.bar"),
+								children: (0, react_jsx_runtime.jsx)("div", {
+									className: styles.barFill,
+									"data-level": level,
+									style: { width: `${percent}%` }
 								})
-							}), balanceLevel > 0 && (0, react_jsx_runtime.jsx)("div", {
-								className: styles.err,
-								role: "status",
-								children: t(`warn.text.${balanceLevel}`)
 							}), (0, react_jsx_runtime.jsx)("div", {
-								className: styles.row,
+								className: styles.sideFoot,
 								children: (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, {
 									children: [(0, react_jsx_runtime.jsx)("span", {
-										className: styles.label,
-										children: (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, {
-											children: [t("sessionCost"), (0, react_jsx_runtime.jsx)(ExplainIcon, {
-												label: t("explain.sessionCost"),
-												t
-											})]
-										})
+										children: t("todayCostShort")
 									}), (0, react_jsx_runtime.jsx)("span", {
-										className: styles.val,
-										children: priced !== null ? formatCny(priced.total) : "—"
+										children: todayCost !== null ? formatCny(todayCost) : "—"
 									})]
 								})
-							}), (0, react_jsx_runtime.jsx)("div", {
-								className: styles.row,
+							})]
+						})
+					}), open && (0, react_jsx_runtime.jsx)("div", {
+						className: styles.sidePop,
+						role: "dialog",
+						children: (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, {
+							children: [(0, react_jsx_runtime.jsx)("div", {
+								className: styles.sidePopHead,
 								children: (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, {
 									children: [(0, react_jsx_runtime.jsx)("span", {
-										className: styles.label,
-										children: (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, {
-											children: [t("lastPromptCost"), (0, react_jsx_runtime.jsx)(ExplainIcon, {
-												label: t("explain.lastPromptCost"),
-												t
-											})]
-										})
-									}), (0, react_jsx_runtime.jsx)("span", {
-										className: styles.val,
-										children: loading ? "…" : lastCost !== null ? formatCny(lastCost) : "—"
+										className: styles.sidePopTitle,
+										children: t("title")
+									}), (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										className: styles.sidePopClose,
+										"aria-label": t("close"),
+										onClick: () => setOpen(false),
+										children: "×"
 									})]
 								})
 							}), (0, react_jsx_runtime.jsx)("div", {
 								className: styles.row,
 								children: (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, {
 									children: [(0, react_jsx_runtime.jsx)("span", {
-										className: styles.label,
-										children: (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, {
-											children: [t("todayCost"), (0, react_jsx_runtime.jsx)(ExplainIcon, {
-												label: t("explain.todayCost"),
-												t
-											})]
-										})
+										children: t("balance")
 									}), (0, react_jsx_runtime.jsx)("span", {
 										className: styles.val,
-										children: loading ? "…" : todayCost !== null ? formatCny(todayCost) : "—"
+										"data-level": level > 0 ? level : undefined,
+										children: loading ? "…" : balance !== null ? `${balance.symbol}${balance.total.toFixed(2)}` : "—"
 									})]
 								})
-							}), priced !== null && (0, react_jsx_runtime.jsx)("div", {
+							}), level > 0 && (0, react_jsx_runtime.jsx)("div", {
+								className: styles.err,
+								role: "status",
+								children: t(`warn.text.${level}`)
+							}), (0, react_jsx_runtime.jsx)("div", {
 								className: styles.row,
 								children: (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, {
 									children: [(0, react_jsx_runtime.jsx)("span", {
-										className: styles.label,
-										children: (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, {
-											children: [t("tokens"), (0, react_jsx_runtime.jsx)(ExplainIcon, {
-												label: t("explain.tokens"),
-												t
-											})]
-										})
+										children: t("todayCost")
 									}), (0, react_jsx_runtime.jsx)("span", {
 										className: styles.val,
-										children: `${formatTokens((usage.uncachedInputTokens ?? 0) + (usage.cacheReadTokens ?? 0) + (usage.cacheWriteTokens ?? 0))} in / ${formatTokens(usage.outputTokens ?? 0)} out`
+										children: loading ? "…" : todayCost !== null ? formatCny(todayCost) : "—"
 									})]
 								})
 							}), error !== null && (0, react_jsx_runtime.jsx)("div", {
@@ -434,24 +344,21 @@ window.__ModuleLoader__.load({
 								role: "status",
 								children: error
 							}), (0, react_jsx_runtime.jsx)("div", {
-								className: styles.hint,
-								children: lastUpdated !== null ? `${t("updatedAt")} ${formatTime(lastUpdated)} · ${t("hint")}` : t("hint")
-							}), (0, react_jsx_runtime.jsx)("div", {
-								className: styles.foot,
+								className: styles.sidePopFoot,
 								children: (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, {
 									children: [(0, react_jsx_runtime.jsx)("a", {
 										className: styles.link,
 										href: TOP_UP_URL,
 										target: "_blank",
 										rel: "noreferrer",
-										children: (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, {
-											children: ["⚡", t("topUp")]
-										})
+										children: t("topUp")
 									}), (0, react_jsx_runtime.jsx)("button", {
 										type: "button",
-										className: styles.btn,
-										onClick: () => setOpen(false),
-										children: t("close")
+										className: styles.sidePopRefresh,
+										"aria-label": t("refresh.aria"),
+										title: t("refresh.title"),
+										onClick: () => refresh(true),
+										children: (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconRefreshOutline14, {})
 									})]
 								})
 							})]
@@ -461,78 +368,6 @@ window.__ModuleLoader__.load({
 			});
 		}
 		//#endregion
-		//#region lib/types/client/SidebarBalanceCard.js
-		/**
-		* Sidebar footer card: balance + remaining-ratio bar + today cost.
-		* Root-scoped (global, not per-session) — fetches balance itself and
-		* refreshes every 60s, matching the corner widget cadence.
-		* @param {Object} props - wide (sidebar expanded), t (locale).
-		*/
-		function SidebarBalanceCard({ wide, t }) {
-			const [balance, setBalance] = (0, react.useState)(null);
-			const [todayCost, setTodayCost] = (0, react.useState)(null);
-			const [lowThreshold, setLowThreshold] = (0, react.useState)(5);
-			const [criticalThreshold, setCriticalThreshold] = (0, react.useState)(1);
-			const refresh = async () => {
-				const [bResult, tResult] = await Promise.all([
-					fetchBalance(),
-					fetchCost(TODAY_COST_ROUTE)
-				]);
-				if (bResult.ok) {
-					setBalance(displayBalance(bResult.balanceInfos));
-					if (typeof bResult.lowThreshold === "number" && bResult.lowThreshold >= 0) setLowThreshold(bResult.lowThreshold);
-					if (typeof bResult.criticalThreshold === "number" && bResult.criticalThreshold >= 0) setCriticalThreshold(bResult.criticalThreshold);
-				}
-				if (tResult.ok) setTodayCost(tResult.cost);
-			};
-			(0, react.useEffect)(() => {
-				refresh();
-				const timer = setInterval(refresh, 60000);
-				return () => clearInterval(timer);
-			}, []);
-			const level = balance === null ? 0 : balance.total < criticalThreshold ? 2 : balance.total < lowThreshold ? 1 : 0;
-			// Remaining-ratio: 100% at lowThreshold (or above), 0% at 0.
-			let percent = 100;
-			if (balance !== null && balance.total < lowThreshold) {
-				percent = lowThreshold <= 0 ? 100 : Math.max(0, Math.round(balance.total / lowThreshold * 100));
-			}
-			return (0, react_jsx_runtime.jsx)("div", {
-				className: styles.side,
-				title: t("title"),
-				children: (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, {
-					children: [(0, react_jsx_runtime.jsx)("div", {
-						className: styles.sideTop,
-						children: (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, {
-							children: [(0, react_jsx_runtime.jsx)("span", {
-								children: "💰"
-							}), (0, react_jsx_runtime.jsx)("span", {
-								className: styles.sideAmount,
-								"data-level": level > 0 ? level : undefined,
-								children: balance !== null ? `${balance.symbol}${balance.total.toFixed(2)}` : "—"
-							})]
-						})
-					}), (0, react_jsx_runtime.jsx)("div", {
-						className: styles.bar,
-						"aria-label": t("side.bar"),
-						children: (0, react_jsx_runtime.jsx)("div", {
-							className: styles.barFill,
-							"data-level": level,
-							style: { width: `${percent}%` }
-						})
-					}), (0, react_jsx_runtime.jsx)("div", {
-						className: styles.sideFoot,
-						children: (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, {
-							children: [(0, react_jsx_runtime.jsx)("span", {
-								children: t("todayCostShort")
-							}), (0, react_jsx_runtime.jsx)("span", {
-								children: todayCost !== null ? formatCny(todayCost) : "—"
-							})]
-						})
-					})]
-				})
-			});
-		}
-		//#endregion
 		//#region lib/types/client/locales.js
 		/** Dictionary namespace owned by this plugin. */
 		const NS = "balance-widget";
@@ -543,21 +378,11 @@ window.__ModuleLoader__.load({
 			"refresh.aria": "刷新数据",
 			"refresh.title": "刷新余额与成本",
 			"balance": "账户余额",
-			"sessionCost": "这个对话已花费",
-			"lastPromptCost": "最近一次提问",
 			"todayCost": "今天总成本",
-			"tokens": "Token 用量",
-			"explain.aria": "解释",
-			"explain.balance": "DeepSeek 账户可用余额，实时查询官方接口（每 60 秒刷新）。",
-			"explain.sessionCost": "当前这个对话从开始到现在累计的费用，按官方峰谷定价估算。",
-			"explain.lastPromptCost": "你刚发的这条提问（含 AI 回复）的费用估算。",
-			"explain.todayCost": "今天所有对话（含其他窗口）的费用合计估算。",
-			"explain.tokens": "本会话消耗的 token 数。1 token ≈ 0.75 个英文单词 ≈ 1 个汉字。",
 			"warn.title.1": "余额不足 ¥5，建议及时充值",
 			"warn.title.2": "余额低于 ¥1，即将耗尽！",
 			"warn.text.1": "⚠️ 余额不足 ¥5，建议及时充值。",
 			"warn.text.2": "⛔ 余额低于 ¥1，即将耗尽，请立即充值！",
-			"updatedAt": "更新于",
 			"side.bar": "余额剩余比例",
 			"todayCostShort": "今日",
 			"hint": "价格为估算值，实际以官方账单为准。",
@@ -571,21 +396,11 @@ window.__ModuleLoader__.load({
 			"refresh.aria": "Refresh data",
 			"refresh.title": "Refresh balance and costs",
 			"balance": "Account balance",
-			"sessionCost": "This chat spent",
-			"lastPromptCost": "Last prompt",
 			"todayCost": "Today total",
-			"tokens": "Token usage",
-			"explain.aria": "Explain",
-			"explain.balance": "DeepSeek account balance, fetched live from the official API.",
-			"explain.sessionCost": "Total estimated cost of this conversation since it started, priced at official peak/off-peak rates.",
-			"explain.lastPromptCost": "Estimated cost of your latest prompt, including the AI reply.",
-			"explain.todayCost": "Estimated total cost across all conversations today.",
-			"explain.tokens": "Tokens used by this session. 1 token ≈ 0.75 English words ≈ 1 CJK character.",
 			"warn.title.1": "Balance below ¥5, consider topping up",
 			"warn.title.2": "Balance below ¥1, almost exhausted!",
 			"warn.text.1": "⚠️ Balance below ¥5, consider topping up.",
 			"warn.text.2": "⛔ Balance below ¥1, almost exhausted — top up now!",
-			"updatedAt": "Updated",
 			"side.bar": "Balance remaining ratio",
 			"todayCostShort": "Today",
 			"hint": "Prices are estimates; actual billing from the provider is authoritative.",
@@ -600,8 +415,9 @@ window.__ModuleLoader__.load({
 			"locale"
 		];
 		/**
-		* Client plugin body: register the corner balance widget in the
-		* conversation session header utilities slot.
+		* Client plugin body: register the sidebar footer balance card (the
+		* single entry point since v0.4.1; the former header widget is removed
+		* to avoid duplicate always-visible balances).
 		* @param ctx - client root context.
 		*/
 		function apply(ctx) {
@@ -609,13 +425,6 @@ window.__ModuleLoader__.load({
 				zh,
 				en
 			}), "dsh-balance-widget: dictionaries");
-			ctx.slots.inject("conversation.session.header.utilities", () => ctx.slots.register({
-				name: "conversation.session.header.utilities",
-				id: "balance-widget",
-				order: 90,
-				locale: NS,
-				inject: (sessionId) => ({ sessionId })
-			}, BalanceWidget));
 			ctx.slots.inject("sidebar.footer.action", () => ctx.slots.register({
 				name: "sidebar.footer.action",
 				id: "balance-widget",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dsh-balance-widget",
   "description": "Balance & cost widget for the dsh web GUI: a corner icon in the conversation session header that shows the DeepSeek account balance and the current session's estimated spend on click. Host half proxies the official /user/balance API over ctx.webServer (loopback-only); client half renders the icon and popover. Zero external dependencies — works on Node 24.",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "type": "module",
   "main": "lib/index.js",
   "files": [