dsh-multi-provider-usage 0.7.1 → 0.7.3

package/lib/client.js

@@ -51,11 +51,12 @@ window.__ModuleLoader__.load({
 				".dpu-provider:first-child{border-top:none;padding-top:0}",
 				".dpu-provider-head{display:flex;align-items:center;gap:2px;width:100%;min-width:0;border:none;background:transparent;border-radius:6px;padding:1px 1px;font:inherit;color:inherit;cursor:pointer;text-align:left}",
 				".dpu-provider-head:hover{background:var(--dsw-alias-interactive-bg-hover)}",
-				".dpu-chevron{flex:none;width:9px;font-size:9px;line-height:16px;color:var(--dsw-alias-label-tertiary)}",
 				".dpu-provider-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:600}",
 				".dpu-provider-pct{flex:none;font-size:10px;font-weight:700;line-height:16px;color:var(--dsw-alias-label-primary)}",
 				".dpu-provider-balance{flex:none;max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 3px;border-radius:6px;font-size:10px;line-height:16px;font-weight:700;color:var(--dsw-alias-state-success-primary);background:color-mix(in srgb, var(--dsw-alias-state-success-primary) 16%, transparent)}",
 				".dpu-provider-balance.dpu-muted{color:var(--dsw-alias-label-tertiary)}",
+				".dpu-provider-balance.dpu-low{color:var(--dsw-alias-state-warn-primary);background:color-mix(in srgb, var(--dsw-alias-state-warn-primary) 16%, transparent)}",
+				".dpu-provider-balance.dpu-critical{color:var(--dsw-alias-state-error-primary);background:color-mix(in srgb, var(--dsw-alias-state-error-primary) 16%, transparent)}",
 				".dpu-provider-balance.dpu-hit{animation:dpu-balance-pop 1.4s ease}",
 				".dpu-balance-setup{flex:none;max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 4px;border-radius:6px;font-size:10px;line-height:16px;font-weight:600;color:var(--dsw-alias-label-secondary);background:transparent;border:1px dashed color-mix(in srgb, var(--dsw-alias-label-secondary) 55%, transparent);cursor:pointer}",
 				".dpu-balance-setup:hover{color:var(--dsw-alias-label-primary);border-color:currentColor}",
@@ -65,9 +66,9 @@ window.__ModuleLoader__.load({
 				".dpu-balance-float.dpu-up-text{color:var(--dsw-alias-state-success-primary);background:color-mix(in srgb, var(--dsw-alias-state-success-primary) 20%, transparent)}",
 				"@keyframes dpu-balance-pop{0%{transform:scale(.86);opacity:.35}35%{transform:scale(1.16);opacity:1}65%{transform:scale(1.02)}100%{transform:scale(1)}}",
 				"@keyframes dpu-balance-fly{0%{opacity:0;transform:translateY(5px) scale(.9)}18%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-12px) scale(.95)}}",
-				".dpu-provider-body{display:flex;flex-direction:column;gap:4px;min-width:0;padding:2px 0 3px 14px}",
+				".dpu-provider-body{display:flex;flex-direction:column;gap:4px;min-width:0;padding:2px 0 3px 11px}",
 				".dpu-provider-error{font-size:10px;line-height:14px;color:var(--dsw-alias-label-secondary);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}",
-				".dpu-dot{width:5px;height:5px;border-radius:50%;flex:none;background:var(--dsw-alias-label-tertiary)}",
+				".dpu-dot{width:5px;height:5px;border-radius:50%;flex:none;margin-right:3px;background:var(--dsw-alias-label-tertiary)}",
 				".dpu-dot.dpu-ok{background:var(--dsw-alias-state-success-primary)}",
 				".dpu-dot.dpu-error{background:var(--dsw-alias-state-error-primary)}",
 				".dpu-dot.dpu-warn{background:var(--dsw-alias-state-warn-primary)}",
@@ -87,6 +88,8 @@ window.__ModuleLoader__.load({
 				".dpu-timeelapsed{height:100%;flex:none;background:var(--dsw-alias-border-l2);border-radius:3px;transition:width .4s ease}",
 				".dpu-timeremain{height:100%;flex:1 1 auto;min-width:0;background:var(--dsw-static-deepseek-450, #5686fe);border-radius:3px;transition:width .4s ease}",
 				".dpu-err{font-size:11px;line-height:16px;color:var(--dsw-alias-label-secondary);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}",
+				".dpu-err.dpu-retry{cursor:pointer}",
+				".dpu-err.dpu-retry:hover{color:var(--dsw-alias-label-primary)}",
 				".dpu-ok{font-size:11px;line-height:16px;color:var(--dsw-alias-label-secondary)}",
 				".dpu-rail{box-sizing:border-box;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:10px;font-weight:700;color:var(--dsw-alias-label-primary);cursor:default}",
 				".dpu-rail:hover{background:var(--dsw-alias-interactive-bg-hover)}",
@@ -103,7 +106,7 @@ window.__ModuleLoader__.load({
 			"window.five-hour": "5 小时窗口",
 			"window.weekly": "周窗口",
 			"window.monthly": "月窗口",
-			"window.mcp": "MCP 工具 (月)",
+			"window.mcp": "MCP 工具 （月）",
 			"window.token": "Token 窗口",
 			"window.other": "其他窗口",
 			"window.five-hour.hint": "5h",
@@ -112,7 +115,7 @@ window.__ModuleLoader__.load({
 			"time.minutes": "{n}分",
 			"time.hours": "{n}小时{m}分",
 			"time.days": "{n}天{m}小时",
-			"time.elapsed.title": "本窗口时间进度:已流逝 {pct}%,剩余 {rest}%",
+			"time.elapsed.title": "本窗口时间进度：已流逝 {pct}%，剩余 {rest}%",
 			"refresh": "刷新",
 			"settings": "设置",
 			"settings.title": "打开插件设置",
@@ -129,26 +132,26 @@ window.__ModuleLoader__.load({
 			"status.disabled": "已禁用",
 			"status.unknown": "未知",
 			"rail.plain": "用量",
-			"rail.all": "服务商用量:{summary}",
-			"rail.error": "{provider}: 读取失败",
+			"rail.all": "服务商用量：{summary}",
+			"rail.error": "{provider}： 读取失败",
 			"rail.title": "{provider} · {pct}%",
 			"rail.title.account": "{provider} · {account} · {pct}%",
 			"widget.brand": "服务商用量",
-			"widget.account.title": "当前账号:{name}",
+			"widget.account.title": "当前账号：{name}",
 			"widget.fallback": "内置",
-			"widget.fallback.title": "实际来源:{source};请求来源:{requested};回退原因:{reason}{message}",
-			"widget.partial.title": "部分接口失败:{error}",
+			"widget.fallback.title": "实际来源：{source}；请求来源：{requested}；回退原因：{reason}{message}",
+			"widget.partial.title": "部分接口失败：{error}",
 			"balance.extra": "充值余额",
 			"balance.zen": "充值余额",
 			"balance.short": "余额",
 			"balance.none": "余额 —",
-			"balance.title": "订阅外充值余额 {amount}(来源:{source})",
-			"balance.delta.title": "本轮余额变化:{from} → {to}",
-			"balance.none.title": "充值余额不可用:{error}",
+			"balance.title": "订阅外充值余额 {amount}（来源：{source}）",
+			"balance.delta.title": "本轮余额变化：{from} → {to}",
+			"balance.none.title": "充值余额不可用：{error}",
 			"balance.setup": "配置余额",
-			"balance.setup.title": "未配置 OpenCode 控制台令牌,无法读取充值余额。点击打开插件设置,或运行 opencode auth login。",
+			"balance.setup.title": "没有可用的 OpenCode 控制台 OAuth 登录，无法读取充值余额（API Key 登录不含余额，令牌过期也会如此）。点击打开设置页查看分步引导，或运行 opencode auth login 并选择 OpenCode Console 账号。",
 			"balance.missing": "无充值额度",
-			"balance.missing.title": "Command Code 的 credits 接口未返回购买或免费额度,因此没有充值余额可显示。",
+			"balance.missing.title": "Command Code 的 credits 接口未返回购买或免费额度，因此没有充值余额可显示。",
 			"balance.details.extra": "购买 {purchased} + 免费 {free}",
 			"autoUpdate.updated": "插件已更新到 v{v}，重启 DSH 生效",
 			"autoUpdate.available": "插件有新版本 v{v}，自动更新未成功，请手动更新",
@@ -163,23 +166,48 @@ window.__ModuleLoader__.load({
 			"reason.unknown": "未知原因",
 			"update.available": "新版本 v{v}",
 			"update.title": "点击查看升级说明",
+			"error.retry": "点击重试",
 
 			// settings page (Plugins panel)
 			"cfg.summary": "在一个侧边栏组件中查看 OpenCode GO、Command Code 与 GLM Code Plan 的套餐用量。",
 			"cfg.title": "服务商用量设置",
-			"cfg.lead": "选择要显示的服务商与凭据引用。保存后立即生效,无需重启。API Key 保存在 DSH 凭据域中,不会出现在这里。",
+			"cfg.lead": "选择要显示的服务商与凭据引用。保存后立即生效，无需重启。API Key 保存在 DSH 凭据域中，不会出现在这里。",
 			"cfg.providers": "服务商",
 			"cfg.console.status": "充值余额",
-			"cfg.console.hint": "运行 opencode auth login 登录 OpenCode 控制台,或把控制台令牌保存为 OPENCODE_CONSOLE_TOKEN 凭据,即可显示充值余额。",
+			"cfg.console.hint": "运行 opencode auth login 登录 OpenCode 控制台，或把控制台令牌保存为 OPENCODE_CONSOLE_TOKEN 凭据，即可显示充值余额。",
+			"cfg.console.apiKey": "本机 OpenCode 当前是 API Key 登录，不含控制台余额；请运行 opencode auth login 并选择 OpenCode Console 账号。",
+			"cfg.console.expired": "控制台登录已过期，请重新运行 opencode auth login 后再刷新。",
+			"cfg.console.guide.title": "如何显示充值余额",
+			"cfg.console.guide.step1": "在终端运行以下命令，选择 OpenCode Console 账号登录：",
+			"cfg.console.guide.step2": "或从控制台网页复制令牌，保存为 DSH 凭据：",
+			"cfg.console.guide.step3": "完成后点击重新检测，插件会重读登录状态并立即刷新余额，无需重启 DSH。",
+			"cfg.console.guide.link": "打开 OpenCode 控制台 ↗",
+			"cfg.console.copy.command": "复制命令",
+			"cfg.console.copy.ref": "复制凭据名",
+			"cfg.console.recheck": "重新检测",
+			"cfg.console.rechecking": "检测中…",
+			"cfg.console.copied": "已复制",
+			"cfg.console.copyFailed": "复制失败，请手动复制。",
+			"cfg.usage": "实时用量",
+			"cfg.usage.refresh": "刷新用量",
+			"cfg.usage.refreshing": "刷新中…",
+			"cfg.usage.loading": "正在读取用量…",
+			"cfg.usage.loadFailed": "用量读取失败：{error}",
+			"cfg.usage.disabled": "已禁用，启用并保存后显示。",
+			"cfg.usage.noData": "暂无数据",
+			"cfg.usage.error": "读取失败：{error}",
+			"cfg.usage.balance": "充值余额",
+			"cfg.usage.noBalance": "暂无充值余额",
+			"cfg.usage.updatedAt": "更新于 {time}",
 			"cfg.enabled": "启用",
 			"cfg.order.hint": "拖动此处调整显示顺序",
 			"cfg.move.up": "上移",
 			"cfg.move.down": "下移",
-			"cfg.credential": "凭据引用 (apiKeyEnv)",
+			"cfg.credential": "凭据引用 （apiKeyEnv）",
 			"cfg.invite": "推广链接",
 			"cfg.invite.copy": "复制",
 			"cfg.invite.copied": "已复制",
-			"cfg.invite.copyFailed": "复制失败,请手动选中链接复制。",
+			"cfg.invite.copyFailed": "复制失败，请手动选中链接复制。",
 			"cfg.status.configured": "已配置",
 			"cfg.status.notConfigured": "未配置",
 			"cfg.status.enabled": "已启用",
@@ -192,13 +220,13 @@ window.__ModuleLoader__.load({
 			"cfg.reloading": "加载中…",
 			"cfg.reloaded": "已重新加载。",
 			"cfg.retry": "重试",
-			"cfg.saved": "已保存,设置已更新。",
+			"cfg.saved": "已保存，设置已更新。",
 			"cfg.noChanges": "没有需要保存的更改。",
 			"cfg.unsaved": "未保存",
-			"cfg.conflict": "保存冲突:设置已被其他会话修改,请点击「重新加载」后再保存。",
-			"cfg.saveFailed": "保存失败:{error}",
-			"cfg.loadFailed": "加载设置失败:{error}",
-			"cfg.unsupported": "宿主未提供设置描述符 (503)。请确认插件以 profile 条目安装,且 schemastery 版本 ≥ 3.18.4。",
+			"cfg.conflict": "保存冲突：设置已被其他会话修改，请点击「重新加载」后再保存。",
+			"cfg.saveFailed": "保存失败：{error}",
+			"cfg.loadFailed": "加载设置失败：{error}",
+			"cfg.unsupported": "宿主未提供设置描述符 （503）。请确认插件以 profile 条目安装，且 schemastery 版本 ≥ 3.18.4。",
 			"cfg.revision": "revision {n}"
 		};
 		const en = {
@@ -249,7 +277,7 @@ window.__ModuleLoader__.load({
 			"balance.delta.title": "Balance change this turn: {from} → {to}",
 			"balance.none.title": "Top-up balance unavailable: {error}",
 			"balance.setup": "Set up",
-			"balance.setup.title": "No OpenCode console token, so the top-up balance cannot be read. Click to open the plugin settings, or run opencode auth login.",
+			"balance.setup.title": "No usable OpenCode console OAuth login, so the top-up balance cannot be read (API-key logins carry no balance, and expired sessions fail too). Click to open the plugin settings for the step-by-step guide, or run opencode auth login and choose the OpenCode Console account.",
 			"balance.missing": "No top-up",
 			"balance.missing.title": "Command Code's credits response carried no purchased or free credits, so there is no top-up balance to show.",
 			"balance.details.extra": "purchased {purchased} + free {free}",
@@ -266,6 +294,7 @@ window.__ModuleLoader__.load({
 			"reason.unknown": "unknown reason",
 			"update.available": "v{v} available",
 			"update.title": "Click for upgrade instructions",
+			"error.retry": "Click to retry",
 
 			// settings page (Plugins panel)
 			"cfg.summary": "OpenCode GO, Command Code and GLM Code Plan plan usage in one sidebar widget.",
@@ -274,6 +303,30 @@ window.__ModuleLoader__.load({
 			"cfg.providers": "Providers",
 			"cfg.console.status": "Top-up balance",
 			"cfg.console.hint": "Run opencode auth login to sign in to the OpenCode console, or store the console token as the OPENCODE_CONSOLE_TOKEN credential, to show the top-up balance.",
+			"cfg.console.apiKey": "The local OpenCode login is an API key, which carries no console balance; run opencode auth login and choose the OpenCode Console account.",
+			"cfg.console.expired": "The console sign-in expired; run opencode auth login again and refresh.",
+			"cfg.console.guide.title": "How to show the top-up balance",
+			"cfg.console.guide.step1": "Run this command in a terminal and choose the OpenCode Console account:",
+			"cfg.console.guide.step2": "Or copy the token from the console website and store it as a DSH credential:",
+			"cfg.console.guide.step3": "When done, click Re-check — the plugin re-reads the sign-in state and refreshes the balance immediately; no DSH restart needed.",
+			"cfg.console.guide.link": "Open the OpenCode console ↗",
+			"cfg.console.copy.command": "Copy command",
+			"cfg.console.copy.ref": "Copy credential ref",
+			"cfg.console.recheck": "Re-check",
+			"cfg.console.rechecking": "Checking…",
+			"cfg.console.copied": "Copied",
+			"cfg.console.copyFailed": "Copy failed; copy it manually.",
+			"cfg.usage": "Live usage",
+			"cfg.usage.refresh": "Refresh usage",
+			"cfg.usage.refreshing": "Refreshing…",
+			"cfg.usage.loading": "Loading usage…",
+			"cfg.usage.loadFailed": "Failed to load usage: {error}",
+			"cfg.usage.disabled": "Disabled; enable it and save to show usage.",
+			"cfg.usage.noData": "No data",
+			"cfg.usage.error": "read failed: {error}",
+			"cfg.usage.balance": "Top-up balance",
+			"cfg.usage.noBalance": "no top-up balance",
+			"cfg.usage.updatedAt": "Updated {time}",
 			"cfg.enabled": "Enabled",
 			"cfg.order.hint": "Drag here to reorder",
 			"cfg.move.up": "Move up",
@@ -329,6 +382,16 @@ window.__ModuleLoader__.load({
 			return t("time.days", { n: Math.floor(hours / 24), m: hours % 24 });
 		}
 
+		/** Compact local clock "HH:MM" for the 「更新于」 stamp; "" when invalid. */
+		function formatClock(ms) {
+			if (typeof ms !== "number" || !Number.isFinite(ms) || ms <= 0) return "";
+			try {
+				return new Date(ms).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+			} catch (_error) {
+				return "";
+			}
+		}
+
 		/** Fill color by usage percent — themed alias tokens (light/dark safe). */
 		function fillColor(percent) {
 			if (percent >= 90) return "var(--dsw-alias-state-error-primary)";
@@ -364,6 +427,20 @@ window.__ModuleLoader__.load({
 			return (change.amount < 0 ? "-" : "+") + text;
 		}
 
+		/**
+		 * Balance tone class (leading space included): at or below the critical
+		 * threshold the chip turns red, at or below the low threshold amber,
+		 * otherwise the usual green. Thresholds are in the currency unit and
+		 * apply to USD and CNY plans alike — single-digit balances are exactly
+		 * when "how much is left" starts to matter.
+		 */
+		function balanceTone(balance) {
+			if (!balance || typeof balance.amount !== "number" || !Number.isFinite(balance.amount)) return "";
+			if (balance.amount <= 1) return " dpu-critical";
+			if (balance.amount <= 5) return " dpu-low";
+			return "";
+		}
+
 		/** Animate a balance from its previous value to the refreshed value. */
 		function AnimatedBalance({ value, currency, delta }) {
 			const from = delta && typeof delta.from === "number" ? delta.from : value;
@@ -556,8 +633,10 @@ window.__ModuleLoader__.load({
 			if (state.status === "updated" && state.restartRequired === true) {
 				return t("autoUpdate.updated", { v: state.version || state.latestVersion || "?" });
 			}
-			if (state.status === "available") {
-				return t("autoUpdate.available", { v: state.latestVersion || "?" });
+			// The host only reports "available" after a successful check, so the
+			// version is real; the guard keeps a stale "v?" off the widget anyway.
+			if (state.status === "available" && typeof state.latestVersion === "string" && state.latestVersion.length > 0) {
+				return t("autoUpdate.available", { v: state.latestVersion });
 			}
 			return "";
 		}
@@ -643,9 +722,17 @@ window.__ModuleLoader__.load({
 			}
 		}
 
-		/** True when the balance read failed only because no console token exists. */
-		function isMissingConsoleCredential(message) {
-			return typeof message === "string" && /no console credential/i.test(message);
+		/**
+		 * True when the balance failed in a way the user can fix by signing in
+		 * again (no console token, an API-key-only login, or an expired grant).
+		 * The host marks these with `meta.balanceSetup`; the message pattern
+		 * keeps older host payloads working.
+		 */
+		function isBalanceSetupError(provider) {
+			const setup = provider?.meta && typeof provider.meta.balanceSetup === "string" ? provider.meta.balanceSetup : "";
+			if (setup === "no-credential" || setup === "api-key" || setup === "expired") return true;
+			const message = provider?.meta && typeof provider.meta.balanceError === "string" ? provider.meta.balanceError : "";
+			return /no console credential|opencode auth login|not an OpenCode Console session|expired or not a Console login/i.test(message);
 		}
 
 		/** Open the plugin settings from the balance chip (never toggles the card). */
@@ -777,6 +864,15 @@ window.__ModuleLoader__.load({
 				});
 			};
 
+			/** Click/keyboard retry: force one fresh upstream read for all cards. */
+			const forceRefresh = () => setStamp(stamp + 1);
+			const retryKeyDown = (event) => {
+				if (event && (event.key === "Enter" || event.key === " " || event.key === "Spacebar")) {
+					if (typeof event.preventDefault === "function") event.preventDefault();
+					forceRefresh();
+				}
+			};
+
 			// Collapsed rail: a single compact badge summarising all providers.
 			if (!props.wide) {
 				const maxPct = providers.reduce((max, provider) => {
@@ -800,7 +896,7 @@ window.__ModuleLoader__.load({
 				const balance = provider.balance && typeof provider.balance.amount === "number" ? provider.balance : null;
 				const delta = balanceDeltas[provider.id] && typeof balanceDeltas[provider.id].amount === "number" ? balanceDeltas[provider.id] : null;
 				const showDelta = delta !== null && Math.abs(delta.amount) >= 0.005;
-				const balanceClass = "dpu-provider-balance" + (showDelta ? " dpu-hit" : "");
+				const balanceClass = "dpu-provider-balance" + (showDelta ? " dpu-hit" : "") + balanceTone(balance);
 				// Command Code's balance is purchased + free credits; name the
 				// composition in the tooltip so the single number stays honest.
 				const balanceDetails = balance && balance.details && typeof balance.details === "object" && typeof balance.details.purchased === "number"
@@ -816,10 +912,13 @@ window.__ModuleLoader__.load({
 					})
 					: t("balance.title", { amount: balanceText, source: balance ? asText(balance.source) : "" }) + (balanceDetails === "" ? "" : " · " + balanceDetails);
 				const rawBalanceError = provider.meta && typeof provider.meta.balanceError === "string" ? provider.meta.balanceError : "";
-				// No console credential is actionable, not a failure: the header
-				// shows a "set up balance" chip that opens the plugin settings.
-				const missingConsoleCredential = isMissingConsoleCredential(rawBalanceError);
-				const balanceError = rawBalanceError !== "" && !missingConsoleCredential ? rawBalanceError : "";
+				// No console credential (or an API-key-only / expired login) is
+				// actionable, not a failure: the header shows a "set up balance"
+				// chip that opens the plugin settings. Its tooltip carries the
+				// precise host reason when one exists.
+				const balanceSetup = isBalanceSetupError(provider);
+				const balanceSetupTitle = rawBalanceError === "" ? t("balance.setup.title") : t("balance.setup.title") + " · " + rawBalanceError;
+				const balanceError = rawBalanceError !== "" && !balanceSetup ? rawBalanceError : "";
 				// Command Code: credits answered without either credit pool, so
 				// there is no top-up balance to show (it is not a config problem).
 				const balanceMissing = provider.meta && provider.meta.balanceMissing === true;
@@ -906,8 +1005,12 @@ window.__ModuleLoader__.load({
 				if (provider.status === "error") {
 					const message = asText(provider.error) || t("status.error");
 					body.push(react_jsx_runtime.jsx("div", {
-						className: "dpu-provider-error",
-						title: message,
+						className: "dpu-provider-error dpu-retry",
+						role: "button",
+						tabIndex: 0,
+						title: message + " · " + t("error.retry"),
+						onClick: forceRefresh,
+						onKeyDown: retryKeyDown,
 						children: message
 					}, "error"));
 				} else if (rows.length === 0) {
@@ -934,12 +1037,12 @@ window.__ModuleLoader__.load({
 							title: t("balance.none.title", { error: balanceError }),
 							children: t("balance.none")
 						}, "balance-error")
-						: missingConsoleCredential
+						: balanceSetup
 							? react_jsx_runtime.jsx("span", {
 								className: "dpu-balance-setup",
 								role: "button",
 								tabIndex: 0,
-								title: t("balance.setup.title"),
+								title: balanceSetupTitle,
 								onClick: activateBalanceSetup,
 								onKeyDown: balanceSetupKeyDown,
 								children: t("balance.setup")
@@ -969,10 +1072,6 @@ window.__ModuleLoader__.load({
 							title: providerTitle(t, provider),
 							"aria-expanded": !isCollapsed,
 							children: [
-								react_jsx_runtime.jsx("span", {
-									className: "dpu-chevron",
-									children: isCollapsed ? "▸" : "▾"
-								}),
 								react_jsx_runtime.jsx("span", { className: providerStatusClass(provider) }),
 								react_jsx_runtime.jsx("span", {
 									className: "dpu-provider-name",
@@ -1035,7 +1134,15 @@ window.__ModuleLoader__.load({
 						children: autoUpdateNotice(t, data && data.autoUpdate)
 					}),
 					sections.length > 0 ? react_jsx_runtime.jsx("div", { className: "dpu-providers", children: sections }) : null,
-					error ? react_jsx_runtime.jsx("div", { className: "dpu-err", children: error }) : null,
+					error ? react_jsx_runtime.jsx("div", {
+						className: "dpu-err dpu-retry",
+						role: "button",
+						tabIndex: 0,
+						title: t("error.retry"),
+						onClick: forceRefresh,
+						onKeyDown: retryKeyDown,
+						children: error
+					}) : null,
 					!error && data === null ? react_jsx_runtime.jsx("div", { className: "dpu-ok", children: t("loading") }) : null,
 					data !== null && providers.length === 0
 						? react_jsx_runtime.jsx("div", { className: "dpu-err", children: t("noProviders") })
@@ -1057,6 +1164,8 @@ window.__ModuleLoader__.load({
 		// auto-generated "Plugin configuration" form (they keep their defaults)
 		// so this page never scrolls.
 		const SETTINGS_PATH = "/provider-usage/settings";
+		/** Same-origin usage snapshot the settings page renders live. */
+		const USAGE_PATH = "/provider-usage/usage";
 		const PROVIDER_FORMS = [
 			{
 				id: "opencode-go",
@@ -1223,7 +1332,38 @@ window.__ModuleLoader__.load({
 				fontSize: 12,
 				fontWeight: 500
 			},
-			buttonDisabled: { opacity: 0.4, cursor: "not-allowed" }
+			buttonDisabled: { opacity: 0.4, cursor: "not-allowed" },
+			// live-usage inset of a provider card
+			usageBox: {
+				display: "flex",
+				flexDirection: "column",
+				gap: 6,
+				padding: "8px 10px",
+				borderRadius: 8,
+				background: "var(--dsw-alias-bg-layer-2, #101216)"
+			},
+			usageHead: { display: "flex", alignItems: "center", gap: 8 },
+			usageLabel: { fontSize: 11, fontWeight: 600, color: "var(--dsw-alias-label-tertiary, #8a8f98)" },
+			usageRow: { display: "flex", flexDirection: "column", gap: 3 },
+			usageRowLabel: { display: "flex", justifyContent: "space-between", gap: 8, fontSize: 12, lineHeight: 1.5, minWidth: 0 },
+			usageRowName: { fontSize: 12, color: "var(--dsw-alias-label-secondary, #a8adb8)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+			usageRowValue: { flex: "none", fontSize: 12, fontWeight: 500, color: "var(--dsw-alias-label-primary, #e8e8e8)" },
+			usageTrack: { height: 4, borderRadius: 2, background: "var(--dsw-alias-border-l2, #2a2d34)", overflow: "hidden" },
+			usageFill: { height: "100%", borderRadius: 2, transition: "width .4s ease" },
+			usageHint: { margin: 0, fontSize: 11, lineHeight: 1.5, color: "var(--dsw-alias-label-tertiary, #8a8f98)", overflowWrap: "anywhere" },
+			// balance setup guide (OpenCode GO card)
+			guideTitle: { fontSize: 12, fontWeight: 600, color: "var(--dsw-alias-label-secondary, #a8adb8)" },
+			guideStep: { display: "flex", flexDirection: "column", gap: 4 },
+			guideCode: {
+				fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+				fontSize: 11,
+				color: "var(--dsw-alias-label-primary, #e8e8e8)",
+				background: "var(--dsw-alias-bg-layer-3, #16181d)",
+				border: "1px solid var(--dsw-alias-border-l2, #2a2d34)",
+				borderRadius: 6,
+				padding: "2px 6px",
+				overflowWrap: "anywhere"
+			}
 		};
 
 		function Field(props) {
@@ -1275,11 +1415,13 @@ window.__ModuleLoader__.load({
 		}
 
 		/**
-		 * The GLM card's referral row: the invitation URL and a Copy button.
-		 * Purely local — no host route reads it and it is never part of the
-		 * saved settings value, so saving settings cannot rewrite it.
+		 * A small copy button with the transient "Copied / Copy failed" note.
+		 * Shared by the referral row and the balance setup guide. `value` is
+		 * what lands on the clipboard; `label`/`copiedKey`/`failedKey` let the
+		 * caller pick the wording. Returns a boolean path so the caller can
+		 * show a failure hint instead of a lie.
 		 */
-		function InviteLink(props) {
+		function CopyButton(props) {
 			const t = props.t;
 			const [status, setStatus] = react.useState("idle");
 			const timer = react.useRef(null);
@@ -1287,12 +1429,38 @@ window.__ModuleLoader__.load({
 				if (timer.current !== null) clearTimeout(timer.current);
 			}, []);
 			const copy = async () => {
-				const ok = await copyText(props.url);
+				const ok = await copyText(props.value);
 				setStatus(ok ? "copied" : "failed");
 				if (timer.current !== null) clearTimeout(timer.current);
 				timer.current = setTimeout(() => setStatus("idle"), 1800);
 			};
-			const note = status === "copied" ? t("cfg.invite.copied") : status === "failed" ? t("cfg.invite.copyFailed") : "";
+			const note = status === "copied"
+				? t(props.copiedKey ?? "cfg.invite.copied")
+				: status === "failed" ? t(props.failedKey ?? "cfg.invite.copyFailed") : "";
+			return react_jsx_runtime.jsx("div", {
+				style: { display: "flex", alignItems: "center", gap: 6, flexWrap: "wrap" },
+				children: [
+					react_jsx_runtime.jsx("button", {
+						type: "button",
+						style: { ...PS.button, padding: "3px 10px" },
+						onClick: copy,
+						children: props.label ?? t("cfg.invite.copy")
+					}, "copy"),
+					note === "" ? null : react_jsx_runtime.jsx("span", {
+						style: status === "failed" ? PS.warn : PS.ok,
+						children: note
+					}, "copy-note")
+				]
+			});
+		}
+
+		/**
+		 * The GLM card's referral row: the invitation URL and a Copy button.
+		 * Purely local — no host route reads it and it is never part of the
+		 * saved settings value, so saving settings cannot rewrite it.
+		 */
+		function InviteLink(props) {
+			const t = props.t;
 			return react_jsx_runtime.jsx("div", {
 				style: PS.inviteRow,
 				children: [
@@ -1304,16 +1472,206 @@ window.__ModuleLoader__.load({
 						rel: "noreferrer",
 						children: props.url
 					}),
-					react_jsx_runtime.jsx("button", {
-						type: "button",
-						style: { ...PS.button, padding: "3px 10px" },
-						onClick: copy,
-						children: t("cfg.invite.copy")
-					}),
-					note === "" ? null : react_jsx_runtime.jsx("span", {
-						style: status === "failed" ? PS.warn : PS.ok,
-						children: note
-					})
+					react_jsx_runtime.jsx(CopyButton, { t: t, value: props.url }, "invite-copy")
+				]
+			});
+		}
+
+		/**
+		 * The balance setup guide on the OpenCode GO card, shown whenever the
+		 * console read is not configured or names a fixable reason (API-key
+		 * login, expired sign-in). Three steps, each with an actionable row:
+		 * the CLI sign-in command (copyable), the manual credential path with
+		 * a console link, and a re-check that re-reads the sign-in state and
+		 * refreshes the balance without restarting DSH. The lead-in names the
+		 * state-specific fix.
+		 */
+		function ConsoleGuide(props) {
+			const t = props.t;
+			const [checking, setChecking] = react.useState(false);
+			const recheck = async () => {
+				if (checking) return;
+				setChecking(true);
+				try {
+					await props.onRecheck();
+				} finally {
+					setChecking(false);
+				}
+			};
+			const leadIn = props.reason === "api-key"
+				? t("cfg.console.apiKey")
+				: props.reason === "expired" ? t("cfg.console.expired") : t("cfg.console.hint");
+			const credentialRef = typeof props.credentialRef === "string" && props.credentialRef !== ""
+				? props.credentialRef
+				: "OPENCODE_CONSOLE_TOKEN";
+			const command = "opencode auth login";
+			const copyKeys = { copiedKey: "cfg.console.copied", failedKey: "cfg.console.copyFailed" };
+			const stepRow = (key, text) => react_jsx_runtime.jsx("p", { style: PS.hint, children: text }, key);
+			return react_jsx_runtime.jsx("div", {
+				style: PS.usageBox,
+				children: [
+					react_jsx_runtime.jsx("div", { style: PS.guideTitle, children: t("cfg.console.guide.title") }, "guide-title"),
+					react_jsx_runtime.jsx("p", { style: PS.hint, children: leadIn }, "guide-lead"),
+					react_jsx_runtime.jsx("div", { style: PS.guideStep, children: [
+						stepRow("guide-step1-text", t("cfg.console.guide.step1")),
+						react_jsx_runtime.jsx("div", {
+							style: PS.inviteRow,
+							children: [
+								react_jsx_runtime.jsx("code", { style: PS.guideCode, children: command }, "guide-command"),
+								react_jsx_runtime.jsx(CopyButton, {
+									t: t,
+									value: command,
+									label: t("cfg.console.copy.command"),
+									...copyKeys
+								}, "guide-step1-copy")
+							]
+						}, "guide-step1-row")
+					] }, "guide-step1"),
+					react_jsx_runtime.jsx("div", { style: PS.guideStep, children: [
+						stepRow("guide-step2-text", t("cfg.console.guide.step2")),
+						react_jsx_runtime.jsx("div", {
+							style: PS.inviteRow,
+							children: [
+								react_jsx_runtime.jsx("code", { style: PS.guideCode, children: credentialRef }, "guide-ref"),
+								react_jsx_runtime.jsx(CopyButton, {
+									t: t,
+									value: credentialRef,
+									label: t("cfg.console.copy.ref"),
+									...copyKeys
+								}, "guide-step2-copy")
+							]
+						}, "guide-step2-row"),
+						typeof props.consoleUrl === "string" && props.consoleUrl !== ""
+							? react_jsx_runtime.jsx("a", {
+								style: PS.inviteLink,
+								href: props.consoleUrl,
+								target: "_blank",
+								rel: "noreferrer",
+								children: t("cfg.console.guide.link")
+							}, "guide-link")
+							: null
+					] }, "guide-step2"),
+					react_jsx_runtime.jsx("div", { style: PS.guideStep, children: [
+						stepRow("guide-step3-text", t("cfg.console.guide.step3")),
+						react_jsx_runtime.jsx("button", {
+							type: "button",
+							style: checking || props.disabled === true
+								? { ...PS.button, ...PS.buttonDisabled }
+								: PS.button,
+							disabled: checking || props.disabled === true,
+							onClick: recheck,
+							children: checking ? t("cfg.console.rechecking") : t("cfg.console.recheck")
+						}, "guide-recheck")
+					] }, "guide-step3")
+				]
+			});
+		}
+
+		/**
+		 * The live-usage inset of one provider card. `SettingsPage` fetches the
+		 * canonical usage snapshot (the same payload the widget renders) and
+		 * passes each provider's slice in; no hooks here, so it is safe to call
+		 * from any render path. `provider === null` covers not-loaded-yet,
+		 * a failed snapshot and a disabled-in-payload provider.
+		 */
+		function UsageSection(props) {
+			const t = props.t;
+			if (props.enabled === false) {
+				return react_jsx_runtime.jsx("p", { style: PS.hint, children: t("cfg.usage.disabled") });
+			}
+			const provider = props.provider === undefined ? null : props.provider;
+			if (provider === null) {
+				if (props.phase === "loading" || props.phase === "idle") {
+					return react_jsx_runtime.jsx("p", { style: PS.hint, children: t("cfg.usage.loading") });
+				}
+				if (props.phase === "error") {
+					return react_jsx_runtime.jsx("p", { style: PS.err, children: t("cfg.usage.loadFailed", { error: asText(props.error) || "?" }) });
+				}
+				return react_jsx_runtime.jsx("p", { style: PS.hint, children: t("cfg.usage.noData") });
+			}
+			if (provider.status === "error") {
+				return react_jsx_runtime.jsx("p", { style: PS.err, children: t("cfg.usage.error", { error: asText(provider.error) || "?" }) });
+			}
+			const rows = [];
+			for (const win of providerWindows(provider)) {
+				const pct = typeof win.percent === "number" && Number.isFinite(win.percent) ? win.percent : null;
+				const reset = win.resetsAt ? timeUntil(win.resetsAt, t) : "";
+				rows.push(react_jsx_runtime.jsx("div", {
+					style: PS.usageRow,
+					children: [
+						react_jsx_runtime.jsx("div", {
+							style: PS.usageRowLabel,
+							children: [
+								react_jsx_runtime.jsx("span", { style: PS.usageRowName, title: windowLabel(t, win), children: windowLabel(t, win) }),
+								react_jsx_runtime.jsx("span", {
+									style: PS.usageRowValue,
+									children: (pct === null ? "—" : formatPercent(pct) + "%") + (reset === "" ? "" : " · " + reset)
+								})
+							]
+						}),
+						react_jsx_runtime.jsx("div", {
+							style: PS.usageTrack,
+							children: react_jsx_runtime.jsx("div", {
+								style: { ...PS.usageFill, width: Math.max(0, Math.min(100, pct ?? 0)) + "%", background: fillColor(pct ?? 0) }
+							})
+						})
+					]
+				}, win.key));
+			}
+			// The top-up balance row mirrors the widget's chip: value when one
+			// exists, otherwise the reason it does not (setup needed, no pools,
+			// or a failed read). A provider with no balance concept at all (GLM)
+			// carries no flags, so the row is skipped entirely.
+			const meta = provider.meta && typeof provider.meta === "object" ? provider.meta : {};
+			const balance = provider.balance && typeof provider.balance.amount === "number" ? provider.balance : null;
+			const balanceValue = formatMoney(balance);
+			const balanceDetails = balance && balance.details && typeof balance.details === "object" && typeof balance.details.purchased === "number"
+				? t("balance.details.extra", {
+					purchased: formatMoney({ amount: balance.details.purchased, currency: balance.currency }),
+					free: formatMoney({ amount: typeof balance.details.free === "number" ? balance.details.free : 0, currency: balance.currency })
+				})
+				: "";
+			const balanceMissing = meta.balanceMissing === true;
+			const balanceSetup = meta.balanceSetup === "no-credential" || meta.balanceSetup === "api-key" || meta.balanceSetup === "expired";
+			const balanceError = balanceValue === "" && !balanceMissing && !balanceSetup && typeof meta.balanceError === "string" && meta.balanceError !== ""
+				? meta.balanceError
+				: "";
+			if (balanceValue !== "" || balanceMissing || balanceSetup || balanceError !== "") {
+				rows.push(react_jsx_runtime.jsx("div", {
+					style: PS.usageRow,
+					children: [
+						react_jsx_runtime.jsx("div", {
+							style: PS.usageRowLabel,
+							children: [
+								react_jsx_runtime.jsx("span", { style: PS.usageRowName, children: t("cfg.usage.balance") }),
+								react_jsx_runtime.jsx("span", {
+									style: { ...PS.usageRowValue, color: balanceValue === "" ? "var(--dsw-alias-label-tertiary, #8a8f98)" : PS.usageRowValue.color },
+									children: balanceValue !== ""
+										? balanceValue
+										: balanceMissing ? t("balance.missing") : t("cfg.usage.noBalance")
+								})
+							]
+						}),
+						balanceValue !== "" && balanceDetails !== ""
+							? react_jsx_runtime.jsx("span", { style: PS.usageHint, children: balanceDetails })
+							: null,
+						balanceError !== ""
+							? react_jsx_runtime.jsx("span", { style: PS.usageHint, children: balanceError })
+							: null
+					]
+				}, "balance"));
+			}
+			if (rows.length === 0) {
+				return react_jsx_runtime.jsx("p", { style: PS.hint, children: t("cfg.usage.noData") });
+			}
+			return react_jsx_runtime.jsx("div", {
+				style: PS.usageBox,
+				children: [
+					react_jsx_runtime.jsx("div", {
+						style: PS.usageHead,
+						children: react_jsx_runtime.jsx("span", { style: PS.usageLabel, children: t("cfg.usage") })
+					}, "usage-head"),
+					...rows
 				]
 			});
 		}
@@ -1333,6 +1691,11 @@ window.__ModuleLoader__.load({
 			const [busy, setBusy] = react.useState({ save: false, reload: false });
 			const [message, setMessage] = react.useState(null);
 			const [draggingId, setDraggingId] = react.useState(null);
+			// Live usage snapshot for the per-card 实时用量 sections. `phase`
+			// gates the placeholders; on a failed refresh the previous data
+			// stays visible and only the error line appears. `at` stamps when
+			// the numbers were read, shown as 「更新于 HH:MM」.
+			const [usage, setUsage] = react.useState({ phase: "idle", data: null, error: null, at: 0 });
 			const tRef = react.useRef(t);
 			tRef.current = t;
 			// Id of the provider card currently being dragged (drag reordering).
@@ -1369,9 +1732,50 @@ window.__ModuleLoader__.load({
 				}
 			}, []);
 
+			/**
+			 * Fetch the canonical usage snapshot; `force` appends `?refresh=1`
+			 * so the host re-reads upstream and the numbers reflect a just-
+			 * saved credential change immediately.
+			 */
+			const loadUsage = react.useCallback(async (force) => {
+				setUsage((prev) => ({ ...prev, phase: "loading" }));
+				try {
+					const res = await callApi("GET", USAGE_PATH + (force ? "?refresh=1" : ""));
+					const payload = res.payload;
+					if (res.status === 200 && payload !== null && Array.isArray(payload.providers)) {
+						setUsage({ phase: "ready", data: payload, error: null, at: Date.now() });
+					} else {
+						const detail = (payload && payload.error) || "HTTP " + res.status;
+						setUsage((prev) => ({ phase: "error", data: prev.data, error: detail }));
+					}
+				} catch (error) {
+					setUsage((prev) => ({ phase: "error", data: prev.data, error: (error && error.message) || String(error) }));
+				}
+			}, []);
+
 			react.useEffect(() => {
 				reload(false);
-			}, [reload]);
+				void loadUsage(false);
+			}, [reload, loadUsage]);
+
+			// While the settings page is open it tracks the widget: poll every
+			// 30 s (cheap — the host cache collapses reads) and catch up the
+			// moment the tab becomes visible again.
+			react.useEffect(() => {
+				if (typeof window === "undefined" || typeof window.setInterval !== "function") return undefined;
+				const hidden = () => typeof document !== "undefined" && document.hidden === true;
+				const timer = window.setInterval(() => { if (!hidden()) void loadUsage(false); }, 30_000);
+				const onVisible = () => { if (typeof document !== "undefined" && !document.hidden) void loadUsage(false); };
+				if (typeof document !== "undefined" && typeof document.addEventListener === "function") {
+					document.addEventListener("visibilitychange", onVisible);
+				}
+				return () => {
+					window.clearInterval(timer);
+					if (typeof document !== "undefined" && typeof document.removeEventListener === "function") {
+						document.removeEventListener("visibilitychange", onVisible);
+					}
+				};
+			}, [loadUsage]);
 
 			const update = (key, value) => {
 				setForm((prev) => ({ ...prev, [key]: value }));
@@ -1398,6 +1802,10 @@ window.__ModuleLoader__.load({
 					if (res.status === 200 && payload !== null) {
 						await reload(false);
 						usageRefreshStore.publish();
+						// A saved credential change (apiKeyEnv) must show its own
+						// numbers right away: force one upstream re-read instead
+						// of waiting for the next TTL.
+						void loadUsage(true);
 						setMessage({ kind: "ok", text: tt("cfg.saved") });
 					} else if (res.status === 409) {
 						setMessage({ kind: "warn", text: tt("cfg.conflict") });
@@ -1416,6 +1824,7 @@ window.__ModuleLoader__.load({
 				setBusy((b) => ({ ...b, reload: true }));
 				try {
 					await reload(true);
+					void loadUsage(false);
 				} finally {
 					setBusy((b) => ({ ...b, reload: false }));
 				}
@@ -1448,6 +1857,28 @@ window.__ModuleLoader__.load({
 			const server = formFromValue(state.value || {});
 			const dirty = Object.keys(form).some((key) => !fieldEquals(form[key], server[key]));
 
+			// The balance guide's manual path: the configured console credential
+			// ref (default OPENCODE_CONSOLE_TOKEN) and the console website
+			// derived from the configured console origin.
+			const consoleValue = state.value && typeof state.value === "object" ? state.value : {};
+			const consoleRef = typeof consoleValue.opencodeConsoleApiKeyEnv === "string" && consoleValue.opencodeConsoleApiKeyEnv !== ""
+				? consoleValue.opencodeConsoleApiKeyEnv
+				: "OPENCODE_CONSOLE_TOKEN";
+			const consoleLink = String(consoleValue.opencodeConsoleBaseUrl || "https://opencode.ai").replace(/\/+$/, "") + "/console";
+
+			/**
+			 * Re-check the console balance: re-read the detection report
+			 * (configured / reason) and force one upstream usage read, so a
+			 * sign-in the user just completed shows up without restarting DSH.
+			 * The settings reload is skipped while the form is dirty so
+			 * unsaved edits are not discarded — the forced usage read alone
+			 * still refreshes the balance row.
+			 */
+			const recheckBalance = async () => {
+				if (!dirty) await reload(false);
+				await loadUsage(true);
+			};
+
 			// Cards render in the saved order. Reordering works three ways, so a
 			// shell without HTML5 drag (touch, Firefox proton, embedded webviews)
 			// always has a path: drag a card header onto another card, drop it
@@ -1588,15 +2019,23 @@ window.__ModuleLoader__.load({
 					// Reading the top-up balance is always on (the host default);
 					// the page only reports whether a credential was found.
 					if (consoleInfo !== null) {
+						const consoleFixable = consoleInfo.reason === "api-key" || consoleInfo.reason === "expired";
 						children.push(react_jsx_runtime.jsx(StatusLine, {
 							error: typeof consoleInfo.error === "string" && consoleInfo.error !== "",
 							children: t("cfg.console.status") + ": " + (consoleInfo.configured === true ? t("cfg.status.configured") : t("cfg.status.notConfigured")) + (consoleInfo.source ? " · " + consoleInfo.source : "")
 						}, "console-status"));
-						if (consoleInfo.configured !== true) {
-							children.push(react_jsx_runtime.jsx("p", {
-								style: PS.hint,
-								children: t("cfg.console.hint")
-							}, "console-hint"));
+						if (consoleInfo.configured !== true || consoleFixable) {
+							children.push(react_jsx_runtime.jsx(ConsoleGuide, {
+								t: t,
+								// A specific reason (API-key login, expired
+								// session) names the fix in the guide's lead-in
+								// instead of the generic hint.
+								reason: consoleFixable ? consoleInfo.reason : "",
+								credentialRef: consoleRef,
+								consoleUrl: consoleLink,
+								disabled: disabled,
+								onRecheck: recheckBalance
+							}, "console-guide"));
 						}
 					}
 				}
@@ -1606,6 +2045,19 @@ window.__ModuleLoader__.load({
 					children: statusLines.join(" · ")
 				}));
 
+				// Live usage for this card, matched from the canonical snapshot
+				// by provider id (the snapshot only carries enabled providers).
+				const usageInfo = usage.data && Array.isArray(usage.data.providers)
+					? usage.data.providers.find((candidate) => candidate && candidate.id === definition.id) ?? null
+					: null;
+				children.push(react_jsx_runtime.jsx(UsageSection, {
+					t: t,
+					enabled: enabled,
+					provider: usageInfo,
+					phase: usage.phase,
+					error: usage.error
+				}, "usage"));
+
 				if (typeof definition.inviteUrl === "string" && definition.inviteUrl !== "") {
 					children.push(react_jsx_runtime.jsx(InviteLink, { t: t, url: definition.inviteUrl }, "invite"));
 				}
@@ -1633,7 +2085,27 @@ window.__ModuleLoader__.load({
 						children: [
 							react_jsx_runtime.jsx("div", { style: PS.title, children: t("cfg.title") }),
 							react_jsx_runtime.jsx("p", { style: PS.hint, children: t("cfg.lead") }),
-							react_jsx_runtime.jsx("div", { style: PS.title, children: t("cfg.providers") }),
+							react_jsx_runtime.jsx("div", {
+								style: PS.row,
+								children: [
+									react_jsx_runtime.jsx("div", { style: PS.title, children: t("cfg.providers") }),
+									typeof usage.at === "number" && usage.at > 0
+										? react_jsx_runtime.jsx("span", {
+											style: { ...PS.hint, marginLeft: "auto" },
+											children: t("cfg.usage.updatedAt", { time: formatClock(usage.at) })
+										}, "usage-updated")
+										: react_jsx_runtime.jsx("span", { style: { ...PS.hint, marginLeft: "auto" } }, "usage-updated"),
+									react_jsx_runtime.jsx("button", {
+										type: "button",
+										style: usage.phase === "loading"
+											? { ...PS.button, padding: "3px 10px", ...PS.buttonDisabled }
+											: { ...PS.button, padding: "3px 10px" },
+										disabled: usage.phase === "loading",
+										onClick: () => { void loadUsage(true); },
+										children: usage.phase === "loading" ? t("cfg.usage.refreshing") : t("cfg.usage.refresh")
+									}, "usage-refresh")
+								]
+							}),
 							react_jsx_runtime.jsx("div", {
 								style: { display: "flex", flexDirection: "column", gap: 8 },
 								children: providerCards
@@ -1673,7 +2145,7 @@ window.__ModuleLoader__.load({
 		}
 
 		/** One-line description the panel may render as the bundle's summary. */
-		const SUMMARY = "OpenCode GO / Command Code / GLM Code Plan 套餐用量:一个侧边栏组件、同源代理与 /provider-usage 命令。";
+		const SUMMARY = "OpenCode GO / Command Code / GLM Code Plan 套餐用量：一个侧边栏组件、同源代理与 /provider-usage 命令。";
 
 		/**
 		 * The `plugins.bundle.config` occupant. The `view` branch is a component
@@ -1743,7 +2215,10 @@ window.__ModuleLoader__.load({
 		exports.Widget = Widget;
 		exports.BundleConfig = BundleConfig;
 		exports.SettingsPage = SettingsPage;
+		exports.UsageSection = UsageSection;
 		exports.InviteLink = InviteLink;
+		exports.CopyButton = CopyButton;
+		exports.ConsoleGuide = ConsoleGuide;
 		exports.GLM_INVITE_URL = GLM_INVITE_URL;
 		exports.balanceDeltasBetween = balanceDeltasBetween;
 		exports.formatSignedMoney = formatSignedMoney;