@linxin666/dsh-usage 0.3.23 → 0.4.0

package/lib/client.js

@@ -6,6 +6,7 @@ window.__ModuleLoader__.load({
 		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 		let react = require("react");
 		let react_jsx_runtime = require("react/jsx-runtime");
+		let react_dom_client = require("react-dom/client");
 		//#region \0dsh-store-engine
 		const platform = ["@deepseek-ai/dsh-client", "-store"].join("");
 		const legacy = ["@deepseek-ai/dsh-client-runtime", "/client"].join("");
@@ -97,10 +98,7 @@ window.__ModuleLoader__.load({
 			"usage.config.title": "设置",
 			"usage.config.enabled": "启用插件",
 			"usage.config.pollIntervalSec": "轮询间隔（秒）",
-			"usage.config.bubbleMode": "宠物气泡",
-			"usage.config.bubbleMode.always": "常驻显示",
-			"usage.config.bubbleMode.change": "仅变化时",
-			"usage.config.bubbleMode.off": "关闭",
+			"usage.config.saveFailed": "保存失败：设置未被接受。",
 			"usage.bank.title": "鲸元券",
 			"usage.bank.hint": "官方 API 每消耗 100 万 tokens 铸造 1 鲸元；保存或分享这张票券。",
 			"usage.bank.noUsage": "暂无 DeepSeek 官方用量数据（统计自插件启用起）",
@@ -110,7 +108,12 @@ window.__ModuleLoader__.load({
 			"usage.bank.window": "统计窗口 {from} ~ {to}",
 			"usage.bank.save": "保存图片",
 			"usage.bank.share": "分享",
-			"usage.bank.drawError": "票券生成失败：{error}"
+			"usage.bank.drawError": "票券生成失败：{error}",
+			"usage.foot.cost": "今日消费",
+			"usage.foot.noData": "今日暂无用量",
+			"usage.foot.open": "打开使用统计设置",
+			"usage.foot.collapse": "收起用量卡片",
+			"usage.foot.expand": "展开用量卡片"
 		};
 		/** English mirror; every zh key present. */
 		const en = {
@@ -153,10 +156,7 @@ window.__ModuleLoader__.load({
 			"usage.config.title": "Settings",
 			"usage.config.enabled": "Enable plugin",
 			"usage.config.pollIntervalSec": "Poll interval (seconds)",
-			"usage.config.bubbleMode": "Pet bubble",
-			"usage.config.bubbleMode.always": "Always visible",
-			"usage.config.bubbleMode.change": "On change",
-			"usage.config.bubbleMode.off": "Off",
+			"usage.config.saveFailed": "Save failed: the deployment did not accept the setting.",
 			"usage.bank.title": "Whale-yuan voucher",
 			"usage.bank.hint": "Every 1,000,000 tokens spent on the official API mint one whale yuan; save or share the note.",
 			"usage.bank.noUsage": "No official DeepSeek usage yet (counting starts when the plugin is enabled)",
@@ -166,7 +166,12 @@ window.__ModuleLoader__.load({
 			"usage.bank.window": "Window {from} - {to}",
 			"usage.bank.save": "Save image",
 			"usage.bank.share": "Share",
-			"usage.bank.drawError": "Failed to render the voucher: {error}"
+			"usage.bank.drawError": "Failed to render the voucher: {error}",
+			"usage.foot.cost": "Today spend",
+			"usage.foot.noData": "No usage yet today",
+			"usage.foot.open": "Open usage statistics settings",
+			"usage.foot.collapse": "Collapse the usage card",
+			"usage.foot.expand": "Expand the usage card"
 		};
 		/**
 		* Active dictionary, picked by the document language at call time. The
@@ -184,7 +189,7 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region \0dsh-css:packages/dsh-usage/src/client/usage.module.css.mjs
-		const css = ".cvtkAW_section{color:inherit;flex-direction:column;gap:16px;display:flex}.cvtkAW_header{justify-content:space-between;align-items:center;gap:12px;display:flex}.cvtkAW_currentProvider{opacity:.75;font-size:13px}.cvtkAW_refreshBtn{appearance:none;color:inherit;font:inherit;cursor:pointer;opacity:.85;background:0 0;border:1px solid;border-radius:8px;padding:4px 12px;font-size:12px;transition:opacity .12s,background-color .12s}.cvtkAW_refreshBtn:hover:not(:disabled){opacity:1;background:color-mix(in srgb, currentColor 8%, transparent)}.cvtkAW_refreshBtn:disabled{cursor:default;opacity:.5}.cvtkAW_refreshBtn:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb, currentColor 45%, transparent);outline:none}.cvtkAW_tabs{border-bottom:1px solid color-mix(in srgb, currentColor 14%, transparent);gap:4px;display:flex}.cvtkAW_tab{appearance:none;color:inherit;font:inherit;cursor:pointer;opacity:.65;background:0 0;border:none;border-bottom:2px solid #0000;margin-bottom:-1px;padding:6px 14px;font-size:13px}.cvtkAW_tab:hover{opacity:.9}.cvtkAW_tab:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb, currentColor 45%, transparent);outline:none}.cvtkAW_tabActive{opacity:1;border-bottom-color:currentColor;font-weight:600}.cvtkAW_card{border:1px solid color-mix(in srgb, currentColor 14%, transparent);border-radius:12px;flex-direction:column;gap:10px;padding:14px 16px;display:flex}.cvtkAW_cardTitle{letter-spacing:.04em;text-transform:uppercase;opacity:.6;font-size:12px;font-weight:600}.cvtkAW_statRow{flex-wrap:wrap;gap:18px;display:flex}.cvtkAW_stat{flex-direction:column;gap:2px;display:flex}.cvtkAW_statValue{font-variant-numeric:tabular-nums;font-size:18px;font-weight:600}.cvtkAW_statLabel{opacity:.6;font-size:11px}.cvtkAW_providerRow{border-top:1px solid color-mix(in srgb, currentColor 8%, transparent);justify-content:space-between;align-items:center;gap:12px;padding:6px 0;font-size:13px;display:flex}.cvtkAW_providerRow:first-of-type{border-top:none}.cvtkAW_providerName{align-items:center;gap:8px;min-width:0;display:flex}.cvtkAW_providerTokens{font-variant-numeric:tabular-nums;opacity:.75;white-space:nowrap}.cvtkAW_providerBalance{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}.cvtkAW_currentBadge{border:1px solid color-mix(in srgb, currentColor 35%, transparent);opacity:.8;border-radius:999px;flex:none;padding:1px 7px;font-size:10px;font-weight:600}.cvtkAW_chart{flex-direction:column;gap:12px;display:flex}.cvtkAW_chartProvider{flex-direction:column;gap:4px;display:flex}.cvtkAW_chartHead{justify-content:space-between;align-items:baseline;gap:10px;font-size:13px;display:flex}.cvtkAW_chartTokens{font-variant-numeric:tabular-nums;opacity:.65;white-space:nowrap;font-size:11px}.cvtkAW_chartBar{background:color-mix(in srgb, currentColor 8%, transparent);border-radius:999px;height:8px;display:block;overflow:hidden}.cvtkAW_chartFill{background:color-mix(in srgb, currentColor 55%, transparent);border-radius:999px;height:100%;transition:width .3s;display:block}.cvtkAW_chartModel{opacity:.8;grid-template-columns:minmax(80px,180px) 1fr auto;align-items:center;gap:8px;padding-left:14px;font-size:11px;display:grid}.cvtkAW_chartModelName{text-overflow:ellipsis;white-space:nowrap;opacity:.8;overflow:hidden}.cvtkAW_chartModelBar{background:color-mix(in srgb, currentColor 6%, transparent);border-radius:999px;height:4px;display:block;overflow:hidden}.cvtkAW_chartModelFill{background:color-mix(in srgb, currentColor 35%, transparent);border-radius:999px;height:100%;transition:width .3s;display:block}.cvtkAW_trendAxis{opacity:.5;font-variant-numeric:tabular-nums;justify-content:space-between;font-size:10px;display:flex}.cvtkAW_muted{opacity:.6;font-size:12px}.cvtkAW_voucherPreview canvas{border-radius:8px;width:100%;height:auto;display:block}.cvtkAW_buttonRow{gap:8px;display:flex}.cvtkAW_errorLine{opacity:.75;font-size:12px}.cvtkAW_planCard{flex-direction:column;gap:8px;display:flex}.cvtkAW_planHead{justify-content:space-between;align-items:baseline;gap:10px;display:flex}.cvtkAW_planName{font-size:14px;font-weight:600}.cvtkAW_windowRow{flex-direction:column;gap:4px;display:flex}.cvtkAW_windowLabel{opacity:.8;font-variant-numeric:tabular-nums;justify-content:space-between;font-size:12px;display:flex}.cvtkAW_bar{background:color-mix(in srgb, currentColor 10%, transparent);border-radius:999px;height:6px;overflow:hidden}.cvtkAW_barFill{background:color-mix(in srgb, currentColor 55%, transparent);border-radius:999px;height:100%;transition:width .3s}.cvtkAW_barWarn{background:#d97706}.cvtkAW_barLow{background:#dc2626}.cvtkAW_resetLine{opacity:.55;font-variant-numeric:tabular-nums;font-size:11px}.cvtkAW_settingsGrid{flex-wrap:wrap;align-items:center;gap:16px;display:flex}.cvtkAW_settingItem{align-items:center;gap:8px;font-size:13px;display:flex}.cvtkAW_settingItem input[type=checkbox]{accent-color:currentColor}.cvtkAW_settingItem input[type=number]{border:1px solid color-mix(in srgb, currentColor 25%, transparent);width:90px;color:inherit;font:inherit;background:0 0;border-radius:6px;padding:3px 8px;font-size:13px}.cvtkAW_settingItem select{border:1px solid color-mix(in srgb, currentColor 25%, transparent);color:inherit;font:inherit;background:0 0;border-radius:6px;padding:3px 8px;font-size:13px}.cvtkAW_settingItem input:focus-visible,.cvtkAW_settingItem select:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb, currentColor 45%, transparent);outline:none}";
+		const css = ".cvtkAW_section{color:inherit;flex-direction:column;gap:16px;display:flex}.cvtkAW_header{justify-content:space-between;align-items:center;gap:12px;display:flex}.cvtkAW_currentProvider{opacity:.75;font-size:13px}.cvtkAW_refreshBtn{appearance:none;color:inherit;font:inherit;cursor:pointer;opacity:.85;background:0 0;border:1px solid;border-radius:8px;padding:4px 12px;font-size:12px;transition:opacity .12s,background-color .12s}.cvtkAW_refreshBtn:hover:not(:disabled){opacity:1;background:color-mix(in srgb, currentColor 8%, transparent)}.cvtkAW_refreshBtn:disabled{cursor:default;opacity:.5}.cvtkAW_refreshBtn:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb, currentColor 45%, transparent);outline:none}.cvtkAW_tabs{border-bottom:1px solid color-mix(in srgb, currentColor 14%, transparent);gap:4px;display:flex}.cvtkAW_tab{appearance:none;color:inherit;font:inherit;cursor:pointer;opacity:.65;background:0 0;border:none;border-bottom:2px solid #0000;margin-bottom:-1px;padding:6px 14px;font-size:13px}.cvtkAW_tab:hover{opacity:.9}.cvtkAW_tab:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb, currentColor 45%, transparent);outline:none}.cvtkAW_tabActive{opacity:1;border-bottom-color:currentColor;font-weight:600}.cvtkAW_card{border:1px solid color-mix(in srgb, currentColor 14%, transparent);border-radius:12px;flex-direction:column;gap:10px;padding:14px 16px;display:flex}.cvtkAW_cardTitle{letter-spacing:.04em;text-transform:uppercase;opacity:.6;font-size:12px;font-weight:600}.cvtkAW_statRow{flex-wrap:wrap;gap:18px;display:flex}.cvtkAW_stat{flex-direction:column;gap:2px;display:flex}.cvtkAW_statValue{font-variant-numeric:tabular-nums;font-size:18px;font-weight:600}.cvtkAW_statLabel{opacity:.6;font-size:11px}.cvtkAW_providerRow{border-top:1px solid color-mix(in srgb, currentColor 8%, transparent);justify-content:space-between;align-items:center;gap:12px;padding:6px 0;font-size:13px;display:flex}.cvtkAW_providerRow:first-of-type{border-top:none}.cvtkAW_providerName{align-items:center;gap:8px;min-width:0;display:flex}.cvtkAW_providerTokens{font-variant-numeric:tabular-nums;opacity:.75;white-space:nowrap}.cvtkAW_providerBalance{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}.cvtkAW_currentBadge{border:1px solid color-mix(in srgb, currentColor 35%, transparent);opacity:.8;border-radius:999px;flex:none;padding:1px 7px;font-size:10px;font-weight:600}.cvtkAW_chart{flex-direction:column;gap:12px;display:flex}.cvtkAW_chartProvider{flex-direction:column;gap:4px;display:flex}.cvtkAW_chartHead{justify-content:space-between;align-items:baseline;gap:10px;font-size:13px;display:flex}.cvtkAW_chartTokens{font-variant-numeric:tabular-nums;opacity:.65;white-space:nowrap;font-size:11px}.cvtkAW_chartBar{background:color-mix(in srgb, currentColor 8%, transparent);border-radius:999px;height:8px;display:block;overflow:hidden}.cvtkAW_chartFill{background:color-mix(in srgb, currentColor 55%, transparent);border-radius:999px;height:100%;transition:width .3s;display:block}.cvtkAW_chartModel{opacity:.8;grid-template-columns:minmax(80px,180px) 1fr auto;align-items:center;gap:8px;padding-left:14px;font-size:11px;display:grid}.cvtkAW_chartModelName{text-overflow:ellipsis;white-space:nowrap;opacity:.8;overflow:hidden}.cvtkAW_chartModelBar{background:color-mix(in srgb, currentColor 6%, transparent);border-radius:999px;height:4px;display:block;overflow:hidden}.cvtkAW_chartModelFill{background:color-mix(in srgb, currentColor 35%, transparent);border-radius:999px;height:100%;transition:width .3s;display:block}.cvtkAW_trendAxis{opacity:.5;font-variant-numeric:tabular-nums;justify-content:space-between;font-size:10px;display:flex}.cvtkAW_muted{opacity:.6;font-size:12px}.cvtkAW_voucherPreview canvas{border-radius:8px;width:100%;height:auto;display:block}.cvtkAW_buttonRow{gap:8px;display:flex}.cvtkAW_errorLine{opacity:.75;font-size:12px}.cvtkAW_planCard{flex-direction:column;gap:8px;display:flex}.cvtkAW_planHead{justify-content:space-between;align-items:baseline;gap:10px;display:flex}.cvtkAW_planName{font-size:14px;font-weight:600}.cvtkAW_windowRow{flex-direction:column;gap:4px;display:flex}.cvtkAW_windowLabel{opacity:.8;font-variant-numeric:tabular-nums;justify-content:space-between;font-size:12px;display:flex}.cvtkAW_bar{background:color-mix(in srgb, currentColor 10%, transparent);border-radius:999px;height:6px;overflow:hidden}.cvtkAW_barFill{background:color-mix(in srgb, currentColor 55%, transparent);border-radius:999px;height:100%;transition:width .3s}.cvtkAW_barWarn{background:#d97706}.cvtkAW_barLow{background:#dc2626}.cvtkAW_resetLine{opacity:.55;font-variant-numeric:tabular-nums;font-size:11px}.cvtkAW_settingsGrid{flex-wrap:wrap;align-items:center;gap:16px;display:flex}.cvtkAW_settingItem{align-items:center;gap:8px;font-size:13px;display:flex}.cvtkAW_settingItem input[type=checkbox]{accent-color:currentColor}.cvtkAW_settingItem input[type=number]{border:1px solid color-mix(in srgb, currentColor 25%, transparent);width:90px;color:inherit;font:inherit;background:0 0;border-radius:6px;padding:3px 8px;font-size:13px}.cvtkAW_settingItem select{border:1px solid color-mix(in srgb, currentColor 25%, transparent);color:inherit;font:inherit;background:0 0;border-radius:6px;padding:3px 8px;font-size:13px}.cvtkAW_settingItem input:focus-visible,.cvtkAW_settingItem select:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb, currentColor 45%, transparent);outline:none}.cvtkAW_footCard{box-sizing:border-box;background:color-mix(in srgb, currentColor 4%, transparent);width:100%;color:inherit;border:none;border-radius:12px;margin:2px 0 4px;transition:background-color .12s;position:relative}.cvtkAW_footCard:hover{background:var(--dsw-alias-interactive-bg-hover)}.cvtkAW_footCardCollapsed{background:0 0}.cvtkAW_footMain{appearance:none;box-sizing:border-box;width:100%;color:inherit;font:inherit;text-align:left;cursor:pointer;background:0 0;border:none;border-radius:12px;flex-direction:column;gap:4px;padding:8px;display:flex}.cvtkAW_footMain:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb, currentColor 45%, transparent);outline:none}.cvtkAW_footToggle{appearance:none;width:20px;height:20px;color:inherit;cursor:pointer;opacity:.55;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:0;transition:opacity .12s,background-color .12s;display:inline-flex;position:absolute;top:6px;right:6px}.cvtkAW_footCard:hover .cvtkAW_footToggle{opacity:.8}.cvtkAW_footToggle:hover{opacity:1;background:color-mix(in srgb, currentColor 10%, transparent)}.cvtkAW_footToggle:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb, currentColor 45%, transparent);outline:none}.cvtkAW_footToggle svg{display:block}.cvtkAW_footHead{justify-content:space-between;align-items:baseline;gap:8px;display:flex}.cvtkAW_footTitle{opacity:.65;white-space:nowrap;align-items:center;gap:6px;min-width:0;font-size:12px;display:inline-flex}.cvtkAW_footTitle svg{flex:none;display:block}.cvtkAW_footValue{font-variant-numeric:tabular-nums;white-space:nowrap;margin-right:18px;font-size:15px;font-weight:600}.cvtkAW_footLine{opacity:.7;font-variant-numeric:tabular-nums;text-overflow:ellipsis;white-space:nowrap;font-size:11px;overflow:hidden}.cvtkAW_footMeta{opacity:.5;font-variant-numeric:tabular-nums;font-size:10px}.cvtkAW_footCardCollapsed .cvtkAW_footMain{min-height:36px;padding:7px 8px}.cvtkAW_footStrip{white-space:nowrap;align-items:center;gap:6px;padding-right:20px;font-size:12px;display:flex;overflow:hidden}.cvtkAW_footStrip svg{opacity:.65;flex:none;display:block}.cvtkAW_footStripProvider{text-overflow:ellipsis;flex:none;max-width:45%;font-weight:500;overflow:hidden}.cvtkAW_footStripLabel{opacity:.65;text-overflow:ellipsis;overflow:hidden}.cvtkAW_footStripValue{font-variant-numeric:tabular-nums;margin-left:auto;font-weight:600}[data-dsh-frame][data-sidebar-collapsed] .cvtkAW_footCard,[data-sidebar-collapsed] .cvtkAW_footCard{display:none}";
 		const tagId = "@linxin666/dsh-usage/packages/dsh-usage/src/client/usage.module.css";
 		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId) + "]") === null) {
 			const tag = document.createElement("style");
@@ -214,6 +219,19 @@ window.__ModuleLoader__.load({
 			"currentBadge": "cvtkAW_currentBadge",
 			"currentProvider": "cvtkAW_currentProvider",
 			"errorLine": "cvtkAW_errorLine",
+			"footCard": "cvtkAW_footCard",
+			"footCardCollapsed": "cvtkAW_footCardCollapsed",
+			"footHead": "cvtkAW_footHead",
+			"footLine": "cvtkAW_footLine",
+			"footMain": "cvtkAW_footMain",
+			"footMeta": "cvtkAW_footMeta",
+			"footStrip": "cvtkAW_footStrip",
+			"footStripLabel": "cvtkAW_footStripLabel",
+			"footStripProvider": "cvtkAW_footStripProvider",
+			"footStripValue": "cvtkAW_footStripValue",
+			"footTitle": "cvtkAW_footTitle",
+			"footToggle": "cvtkAW_footToggle",
+			"footValue": "cvtkAW_footValue",
 			"header": "cvtkAW_header",
 			"muted": "cvtkAW_muted",
 			"planCard": "cvtkAW_planCard",
@@ -254,6 +272,10 @@ window.__ModuleLoader__.load({
 		function str(value) {
 			return typeof value === "string" && value.trim() !== "" ? value.trim() : void 0;
 		}
+		/** Clamp a provider percentage into the renderable 0-100 band. */
+		function clampPercent(value) {
+			return Math.max(0, Math.min(100, value));
+		}
 		/** Format a number to a fixed 2-decimal display string. */
 		function money(value) {
 			return value.toFixed(2);
@@ -386,7 +408,28 @@ window.__ModuleLoader__.load({
 				}
 			}
 		};
-		/** GLM Coding Plan quota; auth is the RAW key without a Bearer prefix. */
+		/**
+		* GLM Coding Plan quota windows, keyed by the provider's own `unit` code
+		* rather than by row position so an added or reordered limit cannot shift a
+		* window's meaning: 3 = the rolling 5-hour window, 6 = the weekly window,
+		* 5 = the monthly one. Two row kinds carry quota — `TOKENS_LIMIT` (token
+		* plans) and `CREDIT_LIMIT` (credit plans, whose exact ratio is
+		* `currentValue` / `usage`) — while `TIME_LIMIT` is the MCP request cap and
+		* is not a plan window at all. Auth is the RAW key without a Bearer prefix.
+		*/
+		const GLM_UNIT_KEYS = {
+			3: "5h",
+			5: "month",
+			6: "week"
+		};
+		/** Percent from a credit row's exact ratio, else the provider's own percentage. */
+		function glmCreditPercent(row) {
+			const used = toNum(row.currentValue);
+			const limit = toNum(row.usage);
+			if (used !== void 0 && limit !== void 0 && limit > 0) return clampPercent(used / limit * 100);
+			const percentage = toNum(row.percentage);
+			return percentage === void 0 ? void 0 : clampPercent(percentage);
+		}
 		function glmPlan(host, ids) {
 			return {
 				ids,
@@ -411,11 +454,17 @@ window.__ModuleLoader__.load({
 						for (const entry of limits) {
 							if (typeof entry !== "object" || entry === null) continue;
 							const row = entry;
-							const unit = toNum(row.unit);
-							const percent = toNum(row.percentage);
+							const kind = str(row.type);
+							if (kind === "TIME_LIMIT") continue;
+							const key = GLM_UNIT_KEYS[toNum(row.unit) ?? NaN];
+							if (key === void 0) continue;
+							if (kind !== "TOKENS_LIMIT" && kind !== "CREDIT_LIMIT") continue;
 							windows.push({
-								key: unit === 3 ? "5h" : unit === 6 ? "week" : unit !== void 0 ? `unit-${unit}` : "window",
-								percent: percent === void 0 ? void 0 : Math.max(0, Math.min(100, percent)),
+								key,
+								percent: kind === "CREDIT_LIMIT" ? glmCreditPercent(row) : (() => {
+									const percentage = toNum(row.percentage);
+									return percentage === void 0 ? void 0 : clampPercent(percentage);
+								})(),
 								resetsAt: toIso(row.nextResetTime)
 							});
 						}
@@ -629,7 +678,7 @@ window.__ModuleLoader__.load({
 			moonshotBalance("api.moonshot.ai", "USD", ["moonshotai"]),
 			KIMI_CODING,
 			glmPlan("open.bigmodel.cn", ["zai-coding-cn"]),
-			glmPlan("api.z.ai", ["zai-coding"]),
+			glmPlan("api.z.ai", ["zai", "zai-coding"]),
 			OPENCODE_GO,
 			minimaxPlan("api.minimaxi.com", ["minimax-cn"]),
 			minimaxPlan("api.minimax.io", ["minimax"]),
@@ -862,7 +911,7 @@ window.__ModuleLoader__.load({
 				return "";
 			}
 		}
-		function formatClock(ms) {
+		function formatClock$1(ms) {
 			try {
 				return new Date(ms).toLocaleTimeString([], {
 					hour: "2-digit",
@@ -953,7 +1002,7 @@ window.__ModuleLoader__.load({
 				]
 			});
 		}
-		function balanceLine(provider) {
+		function balanceLine$1(provider) {
 			if (provider.balance !== void 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 				className: usage_module_css_default.providerBalance,
 				children: [
@@ -989,7 +1038,7 @@ window.__ModuleLoader__.load({
 					})]
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					className: usage_module_css_default.providerTokens,
-					children: balanceLine(provider)
+					children: balanceLine$1(provider)
 				})]
 			});
 		}
@@ -1125,7 +1174,7 @@ window.__ModuleLoader__.load({
 								deepseekVisible && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 									className: usage_module_css_default.muted,
 									"data-dsh-part": "peak-status",
-									children: t(deepseekPeriod.peak ? "usage.peak.on" : "usage.peak.off", { time: formatClock(deepseekPeriod.boundaryMs) })
+									children: t(deepseekPeriod.peak ? "usage.peak.on" : "usage.peak.off", { time: formatClock$1(deepseekPeriod.boundaryMs) })
 								}),
 								snapshot.usage.today.totals.calls === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 									className: usage_module_css_default.muted,
@@ -1507,35 +1556,52 @@ window.__ModuleLoader__.load({
 				]
 			});
 		}
+		/**
+		* The compact settings row. Both controls write through the shared form the
+		* moment the user changes them, and the Host answers each write with a
+		* boolean: a refused (or transport-failed) write is surfaced as a failed save,
+		* because a value that did not land must never read as applied.
+		*/
 		function SettingsRow(props) {
 			const { settings, snapshot, value } = props;
 			const disabled = snapshot === void 0 || !snapshot.writable;
-			const bubbleMode = typeof value.bubbleMode === "string" && [
-				"always",
-				"change",
-				"off"
-			].includes(value.bubbleMode) ? value.bubbleMode : "always";
+			const [failure, setFailure] = (0, react.useState)(void 0);
+			const write = (field, next) => {
+				setFailure(void 0);
+				let answer;
+				try {
+					answer = settings.set(field, next);
+				} catch (error) {
+					setFailure(error instanceof Error ? error.message : String(error));
+					return;
+				}
+				Promise.resolve(answer).then((accepted) => {
+					if (!accepted) setFailure("");
+				}, (error) => {
+					setFailure(error instanceof Error ? error.message : String(error));
+				});
+			};
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: usage_module_css_default.card,
 				"data-dsh-part": "settings-row",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: usage_module_css_default.cardTitle,
-					children: t("usage.config.title")
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: usage_module_css_default.settingsGrid,
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: usage_module_css_default.cardTitle,
+						children: t("usage.config.title")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: usage_module_css_default.settingsGrid,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
 							className: usage_module_css_default.settingItem,
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 								type: "checkbox",
 								checked: value.enabled ?? true,
 								disabled,
 								onChange: (event) => {
-									settings.set("enabled", event.target.checked);
+									write("enabled", event.target.checked);
 								}
 							}), t("usage.config.enabled")]
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
 							className: usage_module_css_default.settingItem,
 							children: [t("usage.config.pollIntervalSec"), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 								type: "number",
@@ -1545,38 +1611,513 @@ window.__ModuleLoader__.load({
 								disabled,
 								onChange: (event) => {
 									const parsed = Number(event.target.value);
-									if (Number.isFinite(parsed) && parsed >= 30 && parsed <= 3600) settings.set("pollIntervalSec", Math.round(parsed));
+									if (Number.isFinite(parsed) && parsed >= 30 && parsed <= 3600) write("pollIntervalSec", Math.round(parsed));
 								}
 							})]
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-							className: usage_module_css_default.settingItem,
-							children: [t("usage.config.bubbleMode"), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
-								value: bubbleMode,
-								disabled,
-								onChange: (event) => {
-									settings.set("bubbleMode", event.target.value);
-								},
-								children: [
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-										value: "always",
-										children: t("usage.config.bubbleMode.always")
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-										value: "change",
-										children: t("usage.config.bubbleMode.change")
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-										value: "off",
-										children: t("usage.config.bubbleMode.off")
-									})
-								]
+						})]
+					}),
+					failure !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: usage_module_css_default.errorLine,
+						role: "status",
+						children: [t("usage.config.saveFailed"), failure === "" ? "" : " - " + failure]
+					})
+				]
+			});
+		}
+		//#endregion
+		//#region src/client/body-mutations.ts
+		/** Cross-bundle registry key; `Symbol.for` so every module copy agrees. */
+		const HUB_KEY = Symbol.for("dsh-web.body-mutation-hub");
+		const INVALIDATION_ONLY = Symbol.for("dsh-web.body-mutation-invalidation");
+		function needsRecords(subscribers) {
+			for (const listener of subscribers) if (!listener[INVALIDATION_ONLY]) return true;
+			return false;
+		}
+		/**
+		* Subscribe to a coalesced DOM re-check without retaining mutation records.
+		* The marked wrapper also works with an older hub, which delivers records
+		* that it simply ignores until a page reload picks up the updated hub.
+		*/
+		function subscribeBodyInvalidations(subscriber) {
+			const listener = () => {
+				subscriber();
+			};
+			listener[INVALIDATION_ONLY] = true;
+			return subscribeBodyMutations(listener);
+		}
+		/**
+		* Subscribe to body-level childList mutations.
+		* @param subscriber - called at most once per animation frame with the records
+		*   collected since the previous flush; must be safe to run repeatedly.
+		* @returns the disposer removing this subscriber (and the observer when it was
+		*   the last one).
+		*/
+		function subscribeBodyMutations(subscriber) {
+			if (typeof globalThis === "undefined" || typeof document === "undefined") return () => {};
+			if (typeof MutationObserver !== "function") return () => {};
+			const registry = globalThis;
+			let hub = registry[HUB_KEY];
+			if (hub === void 0) {
+				const subscribers = /* @__PURE__ */ new Set();
+				const created = {
+					observer: void 0,
+					subscribers,
+					pending: [],
+					scheduled: false
+				};
+				const flush = () => {
+					created.frame = void 0;
+					created.scheduled = false;
+					const batch = created.pending;
+					created.pending = [];
+					for (const listener of [...subscribers]) {
+						if (!subscribers.has(listener)) continue;
+						try {
+							listener(batch);
+						} catch {}
+					}
+				};
+				const schedule = () => {
+					if (created.scheduled) return;
+					created.scheduled = true;
+					if (typeof requestAnimationFrame === "function") created.frame = requestAnimationFrame(flush);
+					else flush();
+				};
+				created.observer = new MutationObserver((records) => {
+					if (needsRecords(subscribers)) for (const record of records) created.pending.push(record);
+					schedule();
+				});
+				created.observer.observe(document.body ?? document.documentElement, {
+					childList: true,
+					subtree: true
+				});
+				registry[HUB_KEY] = created;
+				hub = created;
+			}
+			const active = hub;
+			active.subscribers.add(subscriber);
+			let subscribed = true;
+			return () => {
+				if (!subscribed) return;
+				subscribed = false;
+				active.subscribers.delete(subscriber);
+				if (!needsRecords(active.subscribers)) active.pending = [];
+				if (active.subscribers.size === 0 && registry[HUB_KEY] === active) {
+					active.observer.disconnect();
+					if (active.frame !== void 0 && typeof cancelAnimationFrame === "function") cancelAnimationFrame(active.frame);
+					active.frame = void 0;
+					active.pending = [];
+					active.scheduled = false;
+					delete registry[HUB_KEY];
+				}
+			};
+		}
+		//#endregion
+		//#region src/client/UsageFootCard.tsx
+		/**
+		* Sidebar foot card: the compact usage glance seated below the shell sidebar's
+		* Settings row. It is deliberately a GLANCE, not the panel the 2026-09-18
+		* removal took out. Two states, persisted across reloads:
+		*
+		* - expanded (default): a price-first headline (today's estimated spend,
+		*   falling back to today's tokens when nothing priced was recorded), a
+		*   tokens/calls line, up to two configured-provider balances, and an
+		*   updated-at footer;
+		* - collapsed: a one-line strip with the gauge glyph, the spending
+		*   provider's name, the label and the headline value.
+		*
+		* The card body is one button that opens the settings panel on the usage
+		* section, so detail lives in exactly one place; the corner chevron toggles
+		* the collapse state (sibling buttons — buttons inside a button are invalid
+		* HTML).
+		*
+		* Data comes from the same shared store the settings section reads; the card
+		* runs its own relaxed poll loop (30 s, visible-tab only) because the sidebar
+		* foot is permanently mounted. The card disappears while the plugin is
+		* disabled (settings flag) or while the host serves no usage routes (a 404
+		* means the host half is off), matching the section's own gating.
+		* @module @linxin666/dsh-usage/client/UsageFootCard
+		*/
+		/** Poll cadence of the permanently seated card; the section's 10 s loop stays its own. */
+		const FOOT_CARD_POLL_MS = 3e4;
+		/** localStorage key holding the collapsed flag ('1' = collapsed strip). */
+		const FOOT_CARD_COLLAPSED_KEY = "dsh-usage.foot-card.collapsed";
+		/** At most this many provider balances render before a +N overflow marker. */
+		const BALANCE_CAP = 2;
+		/** Read the persisted collapsed flag (absent = expanded). */
+		function readFootCardCollapsed() {
+			try {
+				return window.localStorage.getItem(FOOT_CARD_COLLAPSED_KEY) === "1";
+			} catch {
+				return false;
+			}
+		}
+		/** Persist the collapsed flag; storage failures keep the session state. */
+		function writeFootCardCollapsed(collapsed) {
+			try {
+				window.localStorage.setItem(FOOT_CARD_COLLAPSED_KEY, collapsed ? "1" : "0");
+			} catch {}
+		}
+		/** Inline gauge glyph, 14px beside the card title. */
+		function GaugeIcon() {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+				viewBox: "0 0 16 16",
+				width: "14",
+				height: "14",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "1.3",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				"aria-hidden": "true",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M2.5 12.5a7 7 0 0 1 11 -4.3" }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M8 12.5V8.2l2.9-2.1" }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+						cx: "8",
+						cy: "12.5",
+						r: "1"
+					})
+				]
+			});
+		}
+		/** Disclosure chevrons: down collapses the expanded card, up expands the strip. */
+		function ChevronIcon(props) {
+			return props.collapsed ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+				viewBox: "0 0 16 16",
+				width: "12",
+				height: "12",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "1.4",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m4 10 4-4 4 4" })
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+				viewBox: "0 0 16 16",
+				width: "12",
+				height: "12",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "1.4",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m4 6 4 4 4-4" })
+			});
+		}
+		/** A provider row worth showing a balance for: configured, with a probed balance. */
+		function balanceRow(provider) {
+			const supported = provider.balanceSupported === true || provider.balanceSupported === void 0 && provider.supported;
+			return provider.credential !== "none" && supported && provider.balance !== void 0;
+		}
+		/** Currency-symbol prefix for the priced balances (CNY/USD), else the ISO code. */
+		function formatBalance(balance) {
+			const currency = balance.currency.toUpperCase();
+			if (currency === "CNY") return "¥" + balance.totalBalance;
+			if (currency === "USD") return "$" + balance.totalBalance;
+			return currency + " " + balance.totalBalance;
+		}
+		function formatClock(ms) {
+			try {
+				return new Date(ms).toLocaleTimeString([], {
+					hour: "2-digit",
+					minute: "2-digit"
+				});
+			} catch {
+				return "";
+			}
+		}
+		/**
+		* Display name of the provider owning today's priced spend: the day's highest
+		* cost row, else the current session route, resolved through the provider
+		* snapshot (an older host without the day rows falls back to the current
+		* route). Undefined when there is no route to name.
+		*/
+		function spendProvider(snapshot) {
+			let top;
+			for (const row of snapshot.usage.today.providers) {
+				if (row.totals.cost <= 0) continue;
+				if (top === void 0 || row.totals.cost > top.totals.cost) top = row;
+			}
+			const route = top?.provider ?? snapshot.current.provider;
+			if (route === void 0) return void 0;
+			return snapshot.providers.find((entry) => entry.provider === route)?.displayName ?? (route === snapshot.current.provider ? snapshot.current.displayName : void 0) ?? route;
+		}
+		/**
+		* The headline triple: today's priced spend, else today's tokens, else zero.
+		* tokenFallback tells the sub-line to keep only the call count instead of
+		* repeating the total the headline already shows; provider names the spender
+		* beside the collapsed cost headline.
+		*/
+		function headline(snapshot) {
+			const totals = snapshot.usage.today.totals;
+			if (totals.cost > 0) return {
+				label: t("usage.foot.cost"),
+				value: "¥" + totals.cost.toFixed(2),
+				tokenFallback: false,
+				provider: spendProvider(snapshot)
+			};
+			if (totals.calls > 0) return {
+				label: t("usage.today"),
+				value: formatTokens(totalTokens(totals)) + " tokens",
+				tokenFallback: true
+			};
+			return {
+				label: t("usage.foot.cost"),
+				value: "¥0.00",
+				tokenFallback: false
+			};
+		}
+		/** The tokens/calls sub-line under the headline; a quiet no-data line on an empty day. */
+		function usageLine(snapshot, tokenFallback) {
+			const totals = snapshot.usage.today.totals;
+			if (totals.calls === 0) return t("usage.foot.noData");
+			const calls = t("usage.calls", { n: totals.calls });
+			return tokenFallback ? calls : formatTokens(totalTokens(totals)) + " tokens · " + calls;
+		}
+		/** The balance line: up to BALANCE_CAP providers plus a +N overflow marker. */
+		function balanceLine(snapshot) {
+			const rows = snapshot.providers.filter(balanceRow);
+			if (rows.length === 0) return void 0;
+			return rows.slice(0, BALANCE_CAP).map((provider) => provider.displayName + " " + formatBalance(provider.balance)).join(" · ") + (rows.length > BALANCE_CAP ? " +" + String(rows.length - BALANCE_CAP) : "");
+		}
+		/** Card chrome classes for the current collapse state. */
+		function cardClass(collapsed) {
+			return collapsed ? usage_module_css_default.footCard + " " + usage_module_css_default.footCardCollapsed : usage_module_css_default.footCard;
+		}
+		/**
+		* Render the foot card content for the current store snapshot.
+		* @param props - store, poller, settings form and open callback from the mount.
+		* @returns the card, or null while disabled / host-off.
+		*/
+		function UsageFootCard(props) {
+			const { store, poll, onOpen, settings, locale } = props;
+			const ui = (0, react.useSyncExternalStore)(store.subscribe, store.getSnapshot);
+			const [, bump] = (0, react.useState)(0);
+			(0, react.useEffect)(() => settings.subscribe(() => bump((count) => count + 1)), [settings]);
+			(0, react.useEffect)(() => locale?.subscribe(() => bump((count) => count + 1)), [locale]);
+			const enabled = settings.getSnapshot().value?.enabled ?? true;
+			const [collapsed, setCollapsed] = (0, react.useState)(readFootCardCollapsed);
+			const toggleCollapsed = () => {
+				setCollapsed((current) => {
+					writeFootCardCollapsed(!current);
+					return !current;
+				});
+			};
+			(0, react.useEffect)(() => {
+				if (!enabled) return void 0;
+				poll();
+				let timer;
+				const start = () => {
+					if (timer === void 0 && document.visibilityState === "visible") timer = window.setInterval(poll, FOOT_CARD_POLL_MS);
+				};
+				const onVisibility = () => {
+					if (document.visibilityState === "visible") {
+						poll();
+						start();
+					} else if (timer !== void 0) {
+						window.clearInterval(timer);
+						timer = void 0;
+					}
+				};
+				start();
+				document.addEventListener("visibilitychange", onVisibility);
+				return () => {
+					if (timer !== void 0) window.clearInterval(timer);
+					document.removeEventListener("visibilitychange", onVisibility);
+				};
+			}, [poll, enabled]);
+			if (!enabled) return null;
+			const snapshot = ui.snapshot;
+			if (snapshot === null && ui.status === "error" && /failed: 404/.test(ui.error ?? "")) return null;
+			const toggle = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: usage_module_css_default.footToggle,
+				"data-dsh-part": "foot-card-toggle",
+				"aria-label": t(collapsed ? "usage.foot.expand" : "usage.foot.collapse"),
+				title: t(collapsed ? "usage.foot.expand" : "usage.foot.collapse"),
+				onClick: toggleCollapsed,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronIcon, { collapsed })
+			});
+			if (snapshot === null) {
+				const quiet = ui.status === "error" ? t("usage.error", { error: ui.error ?? "" }) : t("usage.loading");
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: cardClass(collapsed),
+					"data-dsh-plugin": "usage",
+					"data-dsh-part": "foot-card",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: usage_module_css_default.footMain,
+						"data-dsh-part": "foot-card-main",
+						"aria-label": t("usage.foot.open"),
+						title: t("usage.foot.open"),
+						onClick: onOpen,
+						children: collapsed ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: usage_module_css_default.footStrip,
+							"data-dsh-part": "foot-card-strip",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(GaugeIcon, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: usage_module_css_default.footStripValue,
+								children: "—"
+							})]
+						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: usage_module_css_default.footHead,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: usage_module_css_default.footTitle,
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(GaugeIcon, {}), t("usage.title")]
+							})
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: usage_module_css_default.footLine,
+							children: quiet
+						})] })
+					}), toggle]
+				});
+			}
+			const head = headline(snapshot);
+			const balances = balanceLine(snapshot);
+			if (collapsed) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: cardClass(true),
+				"data-dsh-plugin": "usage",
+				"data-dsh-part": "foot-card",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					className: usage_module_css_default.footMain,
+					"data-dsh-part": "foot-card-main",
+					"aria-label": t("usage.foot.open"),
+					title: t("usage.foot.open"),
+					onClick: onOpen,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: usage_module_css_default.footStrip,
+						"data-dsh-part": "foot-card-strip",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(GaugeIcon, {}),
+							head.provider !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: usage_module_css_default.footStripProvider,
+								children: head.provider
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: usage_module_css_default.footStripLabel,
+								children: head.label
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: usage_module_css_default.footStripValue,
+								children: head.value
+							})
+						]
+					})
+				}), toggle]
+			});
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: cardClass(false),
+				"data-dsh-plugin": "usage",
+				"data-dsh-part": "foot-card",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					className: usage_module_css_default.footMain,
+					"data-dsh-part": "foot-card-main",
+					"aria-label": t("usage.foot.open"),
+					title: t("usage.foot.open"),
+					onClick: onOpen,
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: usage_module_css_default.footHead,
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: usage_module_css_default.footTitle,
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(GaugeIcon, {}), head.label]
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: usage_module_css_default.footValue,
+								children: head.value
 							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: usage_module_css_default.footLine,
+							"data-dsh-part": "foot-card-usage",
+							children: usageLine(snapshot, head.tokenFallback)
+						}),
+						balances !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: usage_module_css_default.footLine,
+							"data-dsh-part": "foot-card-balances",
+							children: balances
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: usage_module_css_default.footMeta,
+							children: t("usage.updated", { time: formatClock(snapshot.updatedAt) })
 						})
 					]
-				})]
+				}), toggle]
 			});
 		}
+		/** The shell sidebar's foot area (footer actions + the Settings row), when mounted. */
+		function footArea() {
+			return document.querySelector("[data-pane=\"sidebar\"], [class*=\"sidebarCol\"]")?.querySelector("[class*=\"footArea\"]") ?? void 0;
+		}
+		/**
+		* Open the settings panel on the usage section. The shell owns the panel's
+		* open state and exposes no service for it, so the card replays the user's
+		* own path: activate the sidebar Settings trigger, then pick the nav row
+		* carrying the section's (localized) label. Every step degrades silently —
+		* with the panel already open only the nav pick runs, and a missing row
+		* leaves the panel on its default section.
+		* @param label - the usage section's nav label in the active locale.
+		*/
+		function openUsageSettings(label) {
+			/** Click the nav row carrying the usage label inside the open panel. */
+			const pick = (panel) => {
+				const wanted = label();
+				for (const row of panel.querySelectorAll("nav button")) if (row.textContent !== null && row.textContent.includes(wanted)) {
+					row.click();
+					return;
+				}
+			};
+			const open = document.querySelector("[role=\"dialog\"]");
+			if (open !== null) {
+				pick(open);
+				return;
+			}
+			(document.querySelector("[data-pane=\"sidebar\"], [class*=\"sidebarCol\"]")?.querySelector("[class*=\"settingsArea\"] button"))?.click();
+			let tries = 0;
+			const attempt = () => {
+				const panel = document.querySelector("[role=\"dialog\"]");
+				if (panel !== null) {
+					pick(panel);
+					return;
+				}
+				tries += 1;
+				if (tries <= 20) window.setTimeout(attempt, 50);
+			};
+			window.setTimeout(attempt, 0);
+		}
+		/**
+		* Mount the sidebar foot card directly above the Settings row.
+		* @param props - the store/poll/settings/open inputs of the apply body.
+		* @returns disposer removing the container and its observers.
+		*/
+		function mountUsageFootCard(props) {
+			if (typeof document !== "undefined" && document.querySelector("[data-dsh-usage-foot-card]") !== null) return () => {};
+			const container = document.createElement("div");
+			container.setAttribute("data-dsh-usage-foot-card", "");
+			const root = (0, react_dom_client.createRoot)(container);
+			root.render((0, react.createElement)(UsageFootCard, props));
+			/** Keep the container directly above the Settings seat inside the foot area. */
+			const place = () => {
+				const foot = footArea();
+				if (foot === void 0) return;
+				const settings = foot.querySelector("[class*=\"settingsArea\"]");
+				if (settings !== null) {
+					if (container.nextElementSibling !== settings) foot.insertBefore(container, settings);
+					return;
+				}
+				if (foot.lastElementChild !== container) foot.append(container);
+			};
+			place();
+			const unsubscribeBody = subscribeBodyInvalidations(place);
+			return () => {
+				unsubscribeBody();
+				root.unmount();
+				container.remove();
+			};
+		}
 		//#endregion
 		//#region src/client/index.ts
 		/** Hard ceiling for one usage API call; a stalled host must not pile up requests. */
@@ -1593,7 +2134,7 @@ window.__ModuleLoader__.load({
 			overview: () => usageFetch("/api/dsh-usage/overview", "GET"),
 			refresh: () => usageFetch("/api/dsh-usage/refresh", "POST")
 		};
-		/** Settings namespace the section edits (the host plugin registers it). */
+		/** Settings namespace the section edits (dsh-web-settings maps it onto this row's profile entry id). */
 		const USAGE_SETTINGS_NS = "dsh-usage";
 		/** First-level nav position: directly below the Workshop section (order 150). */
 		const SECTION_ORDER = 151;
@@ -1602,7 +2143,7 @@ window.__ModuleLoader__.load({
 			"slots",
 			"locale",
 			"connection",
-			"settingsScope",
+			"configForms",
 			"remote"
 		];
 		/**
@@ -1622,7 +2163,8 @@ window.__ModuleLoader__.load({
 					return () => {};
 				}
 			}, "dsh-usage: dictionaries");
-			const settingsScope = (ctx.get("webUiSettings") ?? ctx.settingsScope).bind({ namespace: USAGE_SETTINGS_NS });
+			const binder = ctx.get("webUiSettings");
+			const settingsForm = binder !== void 0 ? binder.bind({ namespace: USAGE_SETTINGS_NS }) : ctx.configForms.get(USAGE_SETTINGS_NS);
 			const store = createUsageStore().create();
 			let pollSeq = 0;
 			const poll = () => {
@@ -1651,8 +2193,22 @@ window.__ModuleLoader__.load({
 				store,
 				poll,
 				refresh,
-				settings: settingsScope
+				settings: settingsForm
 			});
+			const disposeFootCard = mountUsageFootCard({
+				store,
+				poll,
+				settings: settingsForm,
+				onOpen: () => {
+					openUsageSettings(() => t("usage.title"));
+				},
+				locale: ctx.locale
+			});
+			ctx.effect(() => () => {
+				try {
+					disposeFootCard();
+				} catch {}
+			}, "dsh-usage: sidebar foot card");
 			ctx.slots.inject("settings.section", () => {
 				try {
 					const unregister = ctx.slots.register({