@mars-sea/dsh-commandcode-provider 0.15.4 → 0.16.0

package/lib/client.js

@@ -1856,6 +1856,8 @@ window.__ModuleLoader__.load({
 			generation = 0;
 			inFlight = false;
 			disposed = false;
+			/** When the last fetch SETTLED successfully, for {@link USAGE_AUTO_REFRESH_COALESCE_MS}. */
+			settledAt;
 			constructor(remote) {
 				this.remote = remote;
 			}
@@ -1877,9 +1879,16 @@ window.__ModuleLoader__.load({
 			/**
 			* Fetch (or refetch) the report. Concurrent refreshes collapse onto one
 			* request; a superseded fetch's late result is dropped, never published.
+			*
+			* `auto` marks a refresh nobody asked for — a surface appearing, or the
+			* background tick. Those also reuse a result fetched within
+			* {@link USAGE_AUTO_REFRESH_COALESCE_MS}, because two surfaces mounting a
+			* second apart are asking the same question. Every other caller is a user
+			* action and always goes to the wire.
 			*/
-			async refresh() {
+			async refresh(options) {
 				if (this.disposed || this.inFlight) return;
+				if (options?.auto === true && this.current.status === "ready" && this.settledAt !== void 0 && Date.now() - this.settledAt < 5e3) return;
 				const generation = ++this.generation;
 				this.inFlight = true;
 				this.current = {
@@ -1891,13 +1900,16 @@ window.__ModuleLoader__.load({
 				try {
 					const response = await this.remote.report();
 					if (this.disposed || generation !== this.generation) return;
-					if (response.ok) this.current = {
-						status: "ready",
-						report: response.value,
-						error: void 0,
-						fetchedAt: Date.now()
-					};
-					else this.current = {
+					if (response.ok) {
+						const fetchedAt = Date.now();
+						this.settledAt = fetchedAt;
+						this.current = {
+							status: "ready",
+							report: response.value,
+							error: void 0,
+							fetchedAt
+						};
+					} else this.current = {
 						...this.current,
 						status: "error",
 						error: response.error.message
@@ -2887,6 +2899,23 @@ window.__ModuleLoader__.load({
 			]
 		};
 		//#endregion
+		//#region src/client/random-id.ts
+		/**
+		* 页面身份（issue #102）。`crypto.randomUUID` 是安全上下文专属：局域网里用
+		* `http://<ip>:3080` 打开设置页时它是 `undefined`，而这里在控制器构造期就调用，
+		* 异常会落到设置页插槽的错误边界上，整块内容变成空白。`crypto.getRandomValues`
+		* 在非安全上下文同样可用，因此只在 `randomUUID` 不可用时按 RFC 4122 自行拼一个 v4。
+		*/
+		function randomId() {
+			const source = globalThis.crypto;
+			if (typeof source.randomUUID === "function") return source.randomUUID();
+			const bytes = source.getRandomValues(/* @__PURE__ */ new Uint8Array(16));
+			bytes[6] = bytes[6] & 15 | 64;
+			bytes[8] = bytes[8] & 63 | 128;
+			const hex = Array.from(bytes, (byte) => byte.toString(16).padStart(2, "0")).join("");
+			return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20)}`;
+		}
+		//#endregion
 		//#region src/client/enrollment.ts
 		const live = (state) => [
 			"creating",
@@ -2912,7 +2941,7 @@ window.__ModuleLoader__.load({
 			watch;
 			ready;
 			openedPage = false;
-			constructor(remote, changed, pollMs = 750, newId = () => crypto.randomUUID(), openPage = openLoginPage) {
+			constructor(remote, changed, pollMs = 750, newId = randomId, openPage = openLoginPage) {
 				this.remote = remote;
 				this.changed = changed;
 				this.pollMs = pollMs;
@@ -3243,7 +3272,6 @@ window.__ModuleLoader__.load({
 			usageCost: "花费",
 			usageCompleted: "成功",
 			usageBillingPeriod: "官方账期用量",
-			usagePeriodUnknown: "官方用量汇总，统计周期未确认",
 			usageTokens: "Token",
 			usageTokensIn: "入",
 			usageTokensOut: "出",
@@ -3330,7 +3358,7 @@ window.__ModuleLoader__.load({
 			accountEnrollmentCleanupRetry: "重试清理",
 			accountRefSeparator: "：",
 			accountModels: "专用模型",
-			accountModelsHint: "选中的模型优先由此账户处理，不可用时仍会自动切换；一个模型只归属一个账户。",
+			accountModelsHint: "选中即专属：优先此账户处理，不可用时自动切换",
 			accountModelOwner: "属于 {name}",
 			modelPick: "选择模型…",
 			modelCount: "已选 {count} 个模型",
@@ -3515,7 +3543,6 @@ window.__ModuleLoader__.load({
 			usageCost: "Spend",
 			usageCompleted: "Completed",
 			usageBillingPeriod: "Official billing-period usage",
-			usagePeriodUnknown: "Official usage summary; the billing period is unconfirmed",
 			usageTokens: "Tokens",
 			usageTokensIn: "in",
 			usageTokensOut: "out",
@@ -3602,7 +3629,7 @@ window.__ModuleLoader__.load({
 			accountEnrollmentCleanupRetry: "Retry cleanup",
 			accountRefSeparator: ": ",
 			accountModels: "Dedicated models",
-			accountModelsHint: "These models prefer this account and still switch when it is unavailable; a model belongs to one account.",
+			accountModelsHint: "Selected models are dedicated to this account and still switch when unavailable",
 			accountModelOwner: "on {name}",
 			modelPick: "Choose models…",
 			modelCount: "{count} models selected",
@@ -3837,7 +3864,7 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region package.json
-		var version = "0.15.4";
+		var version = "0.16.0";
 		var repository = {
 			"type": "git",
 			"url": "git+https://github.com/Mars-Sea/dsh-commandcode-provider.git"
@@ -4863,7 +4890,7 @@ window.__ModuleLoader__.load({
 						"aria-valuenow": Math.round(ratio * 100),
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							className: exceeded ? "cc-usageBarFill cc-usageBarFillWarn" : "cc-usageBarFill",
-							style: { width: `${ratio * 100}%` }
+							style: { transform: `translateX(${(ratio - 1) * 100}%)` }
 						})
 					}),
 					reset !== "" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
@@ -4877,6 +4904,19 @@ window.__ModuleLoader__.load({
 				]
 			});
 		}
+		/**
+		* Left text of the balance label row: the billing period, stated once per card.
+		* 用量汇总与订阅起点对齐时给完整区间；对不上（或用量汇总没取到）时退回订阅
+		* 自身的截止日，它不依赖对齐也可靠。余额没取到时没有「月额度剩余」可挂，完整
+		* 区间前补回「官方账期用量」，避免一串裸日期没有上下文。
+		*/
+		function balanceLabelText(report, t) {
+			const plan = report.plan;
+			const usagePeriod = formatUsageBillingPeriod(report.usage?.periodStart, plan?.currentPeriodStart, plan?.currentPeriodEnd);
+			const periodText = usagePeriod !== "" ? usagePeriod : plan !== void 0 && plan.currentPeriodEnd > 0 ? `${t("usagePeriodEnd")} ${new Date(plan.currentPeriodEnd).toLocaleDateString()}` : "";
+			if (report.credits !== void 0) return periodText !== "" ? `${t("usageMonthlyLeft")} · ${periodText}` : t("usageMonthlyLeft");
+			return usagePeriod !== "" ? `${t("usageBillingPeriod")} ${usagePeriod}` : periodText;
+		}
 		/** One pool account's facts (identity, totals, credits, window limits). */
 		function AccountReport({ entry, fetchedAt, t, headless = false }) {
 			const report = entry.report;
@@ -4886,9 +4926,12 @@ window.__ModuleLoader__.load({
 			const plan = report.plan;
 			const planName = plan?.name ?? "";
 			const planStatus = plan !== void 0 && plan.status !== "" && plan.status !== "active" ? plan.status : "";
-			const showPeriod = plan !== void 0 && plan.currentPeriodEnd > 0;
 			const showPartial = report.failures.length > 0 && report.blocked === void 0;
-			const usagePeriod = formatUsageBillingPeriod(report.usage?.periodStart, plan?.currentPeriodStart, plan?.currentPeriodEnd);
+			const label = balanceLabelText(report, t);
+			const updatedText = fetchedAt === void 0 ? "" : `${t("usageUpdated")} ${new Date(fetchedAt).toLocaleTimeString(void 0, {
+				hour: "2-digit",
+				minute: "2-digit"
+			})}`;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "cc-accountReport",
 				children: [
@@ -4927,26 +4970,33 @@ window.__ModuleLoader__.load({
 							children: report.failures.join(" · ")
 						}) : null]
 					}) : null,
-					credits !== void 0 ? (() => {
-						const monthlyKnown = credits.monthlyReported !== false;
-						const depleted = monthlyKnown && credits.monthlyCredits <= 0;
+					(() => {
+						const monthlyKnown = credits !== void 0 && credits.monthlyReported !== false;
+						const depleted = credits !== void 0 && monthlyKnown && credits.monthlyCredits <= 0;
+						if (label === "" && updatedText === "") return null;
 						return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: depleted ? "cc-balance cc-balanceEmpty" : "cc-balance",
 							children: [
 								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									className: "cc-balanceMain",
+									className: "cc-balanceRow",
 									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 										className: "cc-balanceLabel",
-										children: t("usageMonthlyLeft")
-									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										children: label
+									}), updatedText !== "" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "cc-balanceLabel",
+										children: updatedText
+									}) : null]
+								}),
+								credits !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "cc-balanceRow",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 										className: "cc-balanceValue",
 										children: monthlyKnown ? formatMoney(Math.max(0, credits.monthlyCredits)) : "—"
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "cc-balanceSub",
+										children: `${t("usagePurchased")} ${credits.purchasedReported === false ? "—" : formatMoney(credits.purchasedCredits)} · ${t("usageFree")} ${credits.freeReported === false ? "—" : formatMoney(credits.freeCredits)}`
 									})]
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "cc-balanceSub",
-									children: `${t("usagePurchased")} ${credits.purchasedReported === false ? "—" : formatMoney(credits.purchasedCredits)} · ${t("usageFree")} ${credits.freeReported === false ? "—" : formatMoney(credits.freeCredits)}`
-								}),
+								}) : null,
 								depleted ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 									className: "cc-balanceNote",
 									role: "status",
@@ -4954,11 +5004,7 @@ window.__ModuleLoader__.load({
 								}) : null
 							]
 						});
-					})() : null,
-					report.usage !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-						className: "cc-usageUpdated",
-						children: usagePeriod ? `${t("usageBillingPeriod")} ${usagePeriod}` : t("usagePeriodUnknown")
-					}) : null,
+					})(),
 					report.usage !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "cc-usageStats cc-usageStatsActivity",
 						children: [
@@ -5000,35 +5046,10 @@ window.__ModuleLoader__.load({
 							t
 						}) : null]
 					}) : null,
-					showPeriod || showPartial || fetchedAt !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "cc-usageMeta",
-						children: [
-							showPeriod ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
-								className: "cc-usageUpdated",
-								children: [
-									t("usagePeriodEnd"),
-									" ",
-									new Date(plan.currentPeriodEnd).toLocaleDateString()
-								]
-							}) : null,
-							showPartial ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-								className: "cc-usagePartial",
-								title: report.failures.join("; "),
-								children: t("usagePartial")
-							}) : null,
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "cc-usageMetaSpacer" }),
-							fetchedAt !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
-								className: "cc-usageUpdated",
-								children: [
-									t("usageUpdated"),
-									" ",
-									new Date(fetchedAt).toLocaleTimeString(void 0, {
-										hour: "2-digit",
-										minute: "2-digit"
-									})
-								]
-							}) : null
-						]
+					showPartial ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "cc-usagePartial",
+						title: report.failures.join("; "),
+						children: t("usagePartial")
 					}) : null
 				]
 			});
@@ -5201,6 +5222,128 @@ window.__ModuleLoader__.load({
 			});
 		}
 		/**
+		* The glanceable header strip: account health, monthly remainder, service
+		* status, model scope. Every string reuses one the groups already compute
+		* (group summaries, balance labels, the service badge), so the strip adds no
+		* locale keys and cannot disagree with the card below it. Cells are plain
+		* text, not links — the groups beneath are the place to act.
+		*/
+		function StatusStrip({ t, state, usage, snapshot, probe }) {
+			const rows = accountRows(state, usage, t);
+			const issues = accountIssues(rows.map((row) => row.usage));
+			const defaultRow = rows.find((row) => row.id === "default");
+			const credits = defaultRow?.usage?.report?.credits;
+			const monthly = credits !== void 0 && credits.monthlyReported !== false ? credits : void 0;
+			const depleted = monthly !== void 0 && monthly.monthlyCredits <= 0;
+			const planName = defaultRow?.usage?.report?.plan?.name ?? "";
+			const overridden = modelsOverriddenCount(state);
+			const view = serviceStatusView(snapshot, probe, t, Date.now());
+			const serviceDot = view.badge.tone === "ok" ? "cc-tabDot cc-tabDotOk" : view.badge.tone === "warn" ? "cc-tabDot cc-tabDotWarn" : view.badge.tone === "error" ? "cc-tabDot cc-tabDotError" : "cc-tabDot cc-tabDotBlank";
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "cc-statusStrip",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "cc-statusCell",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: "cc-statusHead",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: issues.severe ? "cc-tabDot cc-tabDotError" : issues.count > 0 ? "cc-tabDot cc-tabDotWarn" : "cc-tabDot cc-tabDotOk",
+									"aria-hidden": "true"
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "cc-statusLabel",
+									children: t("accountsTitle")
+								})]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "cc-statusStripValue",
+								children: rows.length === 1 ? t("accountsSummaryOne") : t("accountsSummaryMany", { count: rows.length })
+							}),
+							issues.count > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "cc-statusSub",
+								children: t("accountsSummaryIssues", { count: issues.count })
+							}) : planName !== "" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "cc-statusSub",
+								children: planName
+							}) : null
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "cc-statusCell",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: "cc-statusHead",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: depleted ? "cc-tabDot cc-tabDotError" : monthly !== void 0 ? "cc-tabDot cc-tabDotOk" : "cc-tabDot cc-tabDotBlank",
+									"aria-hidden": "true"
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "cc-statusLabel",
+									children: t("usageMonthlyLeft")
+								})]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "cc-statusStripValue",
+								children: monthly !== void 0 ? formatMoney(Math.max(0, monthly.monthlyCredits)) : "—"
+							}),
+							credits !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "cc-statusSub",
+								children: `${t("usagePurchased")} ${credits.purchasedReported === false ? "—" : formatMoney(credits.purchasedCredits)} · ${t("usageFree")} ${credits.freeReported === false ? "—" : formatMoney(credits.freeCredits)}`
+							}) : null
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "cc-statusCell",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: "cc-statusHead",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: serviceDot,
+									"aria-hidden": "true"
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "cc-statusLabel",
+									children: t("serviceStatusTitle")
+								})]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "cc-statusStripValue",
+								children: view.badge.label
+							}),
+							view.updated !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "cc-statusSub",
+								children: view.updated
+							}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "cc-statusSub",
+								children: view.local
+							})
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "cc-statusCell",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: "cc-statusHead",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "cc-tabDot",
+									"aria-hidden": "true"
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "cc-statusLabel",
+									children: t("modelsTitle")
+								})]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "cc-statusStripValue",
+								children: state.visibleModelsAll ? t("visibleModelsSummaryAll") : t("visibleModelsSummary", { count: state.visibleModels.length })
+							}),
+							overridden > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "cc-statusSub",
+								children: overriddenText(overridden, t)
+							}) : null
+						]
+					})
+				]
+			});
+		}
+		/**
 		* One top-level group of the page (决策记录第十章第4条). All five groups share
 		* this one shape so they cannot drift apart: the heading is an `h3` wrapping a
 		* single full-width button — chevron first, then the title and the summary
@@ -5211,14 +5354,15 @@ window.__ModuleLoader__.load({
 		* The body stays mounted and is hidden with the `hidden` attribute rather than
 		* unrendered: `aria-controls` then always points at a real element, and the
 		* save bar's locate action can focus an invalid field right after opening its
-		* group. Folding is presentation only — staged drafts, validation and the save
-		* path are untouched (第六章第1、2条).
+		* group. Folding is presentation only and instant toggling is deliberate (it
+		* happens too often to be worth a wait); staged drafts, validation and the
+		* save path are untouched (第六章第1、2条).
 		*/
-		function FoldableGroup({ id, title, divided = true, expanded, onToggle, badges, action, children }) {
+		function FoldableGroup({ id, title, expanded, onToggle, badges, action, children }) {
 			const titleId = `cc-group-${id}-title`;
 			const bodyId = `cc-group-${id}-body`;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-				className: divided ? "cc-group cc-groupDivided" : "cc-group",
+				className: "cc-group",
 				"aria-labelledby": titleId,
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "cc-groupHead",
@@ -5850,7 +5994,7 @@ window.__ModuleLoader__.load({
 						"aria-hidden": "true",
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 							className: limit.exceeded ? "cc-miniMeterFill cc-usageBarFillWarn" : "cc-miniMeterFill",
-							style: { width: `${ratio * 100}%` }
+							style: { transform: `translateX(${(ratio - 1) * 100}%)` }
 						})
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -6459,8 +6603,13 @@ window.__ModuleLoader__.load({
 		* The unified account card: every account the pool rotates through, one row
 		* each, with its status and quota inline — so one account's facts no longer
 		* have to be cross-read across separate surfaces.
+		*
+		* Exported for the render test (`tests/accounts-card-render.test.ts`) that pins
+		* the first-paint auto-refresh wiring against a real React tree: the page mounts
+		* this card, and a test that only checks the injected function exists cannot see
+		* the card reaching for it.
 		*/
-		function AccountsCard({ t, state, usage, login, disabled, actions, onRefresh, openAnalytics, createEnrollment, expanded, onToggle }) {
+		function AccountsCard({ t, state, usage, login, disabled, actions, onRefresh, onRefreshAuto, openAnalytics, createEnrollment, expanded, onToggle }) {
 			const [adding, setAdding] = (0, react.useState)(false);
 			const [enrollment] = (0, react.useState)(createEnrollment);
 			const snapshot = (0, react.useSyncExternalStore)(enrollment.store.subscribe, enrollment.store.getSnapshot);
@@ -6471,8 +6620,8 @@ window.__ModuleLoader__.load({
 			const closeAdd = (0, react.useCallback)(() => setAdding(false), []);
 			const { loading, shouldRefresh } = usageCardState(usage);
 			(0, react.useEffect)(() => {
-				if (shouldRefresh) onRefresh();
-			}, [shouldRefresh, onRefresh]);
+				if (shouldRefresh) onRefreshAuto();
+			}, [shouldRefresh, onRefreshAuto]);
 			const rows = accountRows(state, usage, t).filter((row) => row.ref === void 0 || !state.accountEnrollmentRefs.includes(row.ref));
 			const multi = rows.length > 1;
 			const pinnedRow = rows.find((row) => row.id === state.activeAccount);
@@ -6480,7 +6629,6 @@ window.__ModuleLoader__.load({
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(FoldableGroup, {
 				id: "accounts",
 				title: t("accountsTitle"),
-				divided: false,
 				expanded,
 				onToggle,
 				badges: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(GroupSummary, { parts: [rows.length === 1 ? t("accountsSummaryOne") : t("accountsSummaryMany", { count: rows.length })] }), issues.count > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -6948,6 +7096,13 @@ window.__ModuleLoader__.load({
 						className: "cc-intro",
 						children: t("intro")
 					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusStrip, {
+						t,
+						state,
+						usage,
+						snapshot: status.snapshot,
+						probe: status.probe
+					}),
 					!state.writable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Notice, {
 						icon: "lock",
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t("readOnly") })
@@ -6960,6 +7115,7 @@ window.__ModuleLoader__.load({
 						disabled,
 						actions,
 						onRefresh: props.refreshUsage,
+						onRefreshAuto: props.refreshUsageAuto,
 						openAnalytics: props.openAnalytics,
 						createEnrollment: props.createEnrollment,
 						...foldProps("accounts")
@@ -7899,6 +8055,14 @@ window.__ModuleLoader__.load({
 			set: (callback, ms) => setTimeout(callback, ms),
 			clear: (handle) => clearTimeout(handle)
 		};
+		const DOCUMENT_VISIBILITY = {
+			isVisible: () => typeof document === "undefined" ? true : document.visibilityState !== "hidden",
+			subscribe: (onChange) => {
+				if (typeof document === "undefined") return () => void 0;
+				document.addEventListener("visibilitychange", onChange);
+				return () => document.removeEventListener("visibilitychange", onChange);
+			}
+		};
 		/** Live mount count of {@link startPanelAutoRefresh}. */
 		let references = 0;
 		/** Owner ticket of the running loop, if any. */
@@ -7908,6 +8072,16 @@ window.__ModuleLoader__.load({
 		/** Pending timer handle of the running loop. */
 		let handle;
 		/**
+		* Unsubscribe of the visibility listener owned by the RUNNING loop.
+		*
+		* Module-level on purpose: only the surface that started the loop receives the
+		* subscribe handle, but that surface is not necessarily the last to unmount.
+		* Keeping the handle on the same layer as `activeTicket`/`handle` lets any
+		* teardown order release it; a function-local handle leaked the listener
+		* whenever the starter unmounted first.
+		*/
+		let visibilityUnsubscribe;
+		/**
 		* Start the shared auto refresh. One fetch when the surface appears (the sidebar
 		* row is the point of the panel — it must be current, not wait for a click), then
 		* a tick every {@link PANEL_AUTO_REFRESH_MS} while a surface stays mounted.
@@ -7917,22 +8091,37 @@ window.__ModuleLoader__.load({
 		* tick goes through `usage.refresh()`, which collapses a concurrent fetch onto
 		* the in-flight one. Returns the disposer that drops this surface's reference.
 		*
+		* A hidden document is still mounted, so its ticks are SKIPPED: a background
+		* tab must not keep paying for a four-call report nobody reads. The tick is
+		* rescheduled either way, so the loop survives, and becoming visible again
+		* fetches at once — the data on screen is by then older than a tick would have
+		* left it. The first paint still fetches unconditionally: it is the moment the
+		* row appears, and there is nothing to show without it.
+		*
 		* @param usage - the shared usage controller.
 		* @param isConfigured - whether a credential exists right now (re-read per tick).
 		* @param timer - timer seam for tests.
+		* @param visibility - visibility seam; see {@link AutoRefreshVisibility}.
 		*/
-		function startPanelAutoRefresh(usage, isConfigured, timer = REAL_TIMER) {
+		function startPanelAutoRefresh(usage, isConfigured, timer = REAL_TIMER, visibility = DOCUMENT_VISIBILITY) {
 			references += 1;
 			const ticket = ++ticketSeq;
+			const fetch = () => {
+				if (isConfigured()) usage.refresh({ auto: true });
+			};
 			const tick = () => {
 				if (activeTicket !== ticket) return;
-				if (isConfigured()) usage.refresh();
+				if (visibility.isVisible()) fetch();
 				handle = timer.set(tick, PANEL_AUTO_REFRESH_MS);
 			};
 			if (activeTicket === void 0) {
 				activeTicket = ticket;
 				handle = timer.set(tick, PANEL_AUTO_REFRESH_MS);
-				if (isConfigured()) usage.refresh();
+				fetch();
+				visibilityUnsubscribe = visibility.subscribe?.(() => {
+					if (activeTicket !== ticket || !visibility.isVisible()) return;
+					fetch();
+				});
 			}
 			let stopped = false;
 			return () => {
@@ -7941,6 +8130,8 @@ window.__ModuleLoader__.load({
 				references -= 1;
 				if (references > 0) return;
 				activeTicket = void 0;
+				visibilityUnsubscribe?.();
+				visibilityUnsubscribe = void 0;
 				if (handle !== void 0) {
 					timer.clear(handle);
 					handle = void 0;
@@ -10229,13 +10420,26 @@ window.__ModuleLoader__.load({
 		* The settings-page stylesheet.
 		*
 		* Every size is the design canvas's (the cc-kit.css of the "CommandCode 设置页
-		* 重设计" artboards, 2026-10-21), with its colour tokens mapped onto the
-		* harness theme aliases so dark mode keeps working: a row is 12px of vertical
-		* padding with no line between rows, title 14/22, description 12/18, a 24px
-		* gap to the control; a group is 16px of padding under a 1px border-l2 rule,
-		* its heading 36px high; the page title is 18/26 and group titles 14/22, both
-		* 600. The page renders with grayscale antialiasing and descriptive text in
-		* label-secondary.
+		* 重设计" artboards, 2026-10-21, as revised by the 2026-10-29 card redesign):
+		* a row is 14px of vertical padding with a .5px hairline between rows, title
+		* 14/22, description 12/18, a 24px gap to the control; a group is a 16px-radius
+		* card on the raised surface with a 1px border-l2 stroke, its heading 52px
+		* high; the page title is 22/28 and group titles 15/22, both 600. The page
+		* renders with grayscale antialiasing and descriptive text in label-secondary.
+		* A status strip under the header (account health, monthly remainder, service
+		* status, model scope) reuses the groups' own summary strings, so it adds no
+		* locale keys and cannot disagree with the card below it.
+		*
+		* Motion (2026-10-29): anything pressable scales on :active (0.97, the 20–28px
+		* icon buttons 0.95) over 160ms of one strong ease-out,
+		* cubic-bezier(.23,1,.32,1), which the fold chevron, save bar, usage bar,
+		* card entrance and notice entrance share; colour and border changes fade over
+		* 150ms `ease`. Only transform, opacity and colours animate — never layout.
+		* Every :hover rule sits in the one `(hover:hover) and (pointer:fine)` block at
+		* the end, so a tap on a touch screen does not leave a stuck hover colour;
+		* :active stays outside it, since a press needs feedback on touch too. Folding
+		* a group or an account card stays instant: it happens too often to be worth a
+		* wait, and a hidden body keeps its `aria-controls` target mounted.
 		*
 		* Shapes follow one rule — clickable things are pills, fillable things are
 		* 8px. Buttons are drawn here (PageButton → cc-btn: md 32px, sm 28px, lg 36px
@@ -10249,27 +10453,61 @@ window.__ModuleLoader__.load({
 		* shares cc-hint / cc-badgeMuted / cc-input and keeps their colours.
 		*/
 		const PAGE_CSS = `
-.cc-section{max-width:720px;color:var(--dsw-alias-label-primary);flex-direction:column;display:flex;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
-.cc-title{margin:0;color:var(--dsw-alias-label-primary);font-size:18px;font-weight:600;line-height:26px}
+.cc-section{max-width:720px;color:var(--dsw-alias-label-primary);flex-direction:column;display:flex;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--cc-ease-out:cubic-bezier(.23,1,.32,1)}
+.cc-title{margin:0;color:var(--dsw-alias-label-primary);font-size:22px;font-weight:700;line-height:28px}
 .cc-intro{margin:4px 0 0;color:var(--dsw-alias-label-secondary);font-size:14px;line-height:22px}
+/* The glanceable header strip: four cells (account health, monthly remainder,
+ * service status, model scope) on one card. Labels reuse cc-statusLabel and
+ * dots reuse cc-tabDot, so no new colour language is introduced; the strip
+ * folds to 2 × 2 in a narrow panel. */
+.cc-statusStrip{grid-template-columns:repeat(4,minmax(0,1fr));gap:0;display:grid;margin-top:16px;border:1px solid var(--dsw-alias-border-l2);border-radius:16px;background:var(--dsw-alias-bg-layer-1);box-shadow:0 1px 2px rgba(0,0,0,.04)}
+.cc-statusCell{flex-direction:column;gap:2px;min-width:0;display:flex;padding:14px 16px}
+.cc-statusCell+.cc-statusCell{border-left:1px solid var(--dsw-alias-border-l2)}
+.cc-statusHead{align-items:center;gap:6px;display:flex}
+.cc-statusStripValue{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dsw-alias-label-primary);font-size:15px;font-weight:600;line-height:22px}
+.cc-statusSub{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dsw-alias-label-secondary);font-size:12px;line-height:18px}
+@media (max-width:560px){.cc-statusStrip{grid-template-columns:repeat(2,minmax(0,1fr))}.cc-statusCell:nth-child(3){border-left:0}.cc-statusCell:nth-child(n+3){border-top:1px solid var(--dsw-alias-border-l2)}}
 .cc-spacer{flex:1}
-.cc-group{flex-direction:column;display:flex;padding:16px 0}
-.cc-group:not(.cc-groupDivided){padding-top:24px}
-.cc-groupDivided{border-top:1px solid var(--dsw-alias-border-l2)}
-.cc-groupHead{align-items:center;gap:8px;display:flex;min-height:36px}
-.cc-groupTitle{margin:0;color:var(--dsw-alias-label-primary);font-size:14px;font-weight:600;line-height:22px}
+/* Groups are cards now (2026-10-29 redesign): a 16px-radius raised surface
+ * with a border-l2 stroke, 16px between cards, no divider rules. The entrance
+ * is a @starting-style rise with a 40ms stagger per card — transitions, not
+ * keyframes, so a re-render never replays it. */
+.cc-group{flex-direction:column;display:flex;margin-top:16px;border:1px solid var(--dsw-alias-border-l2);border-radius:16px;background:var(--dsw-alias-bg-layer-1);box-shadow:0 1px 2px rgba(0,0,0,.04);transition:opacity 320ms var(--cc-ease-out),transform 320ms var(--cc-ease-out)}
+@starting-style{.cc-group{opacity:0;transform:translateY(8px)}}
+.cc-section>section:nth-of-type(1){transition-delay:0ms}
+.cc-section>section:nth-of-type(2){transition-delay:40ms}
+.cc-section>section:nth-of-type(3){transition-delay:80ms}
+.cc-section>section:nth-of-type(4){transition-delay:120ms}
+.cc-section>section:nth-of-type(5){transition-delay:160ms}
+.cc-groupHead{align-items:center;gap:8px;display:flex;min-height:52px;padding:0 16px}
+.cc-groupTitle{margin:0;color:var(--dsw-alias-label-primary);font-size:15px;font-weight:600;line-height:22px}
 .cc-groupDesc{margin:2px 0 0;color:var(--dsw-alias-label-secondary);font-size:12px;line-height:18px}
-.cc-rows>.cc-groupDesc{margin:0}
+.cc-rows>.cc-groupDesc{margin:0 16px}
+/* A block straight under a group's description (the account list, its
+ * notices, the override table) keeps the same 12px as the account-mode line
+ * and the actions row inside the card; a setting row brings its own 12px
+ * padding instead. */
+.cc-rows>.cc-groupDesc+.cc-notices,.cc-rows>.cc-groupDesc+.cc-accountList,.cc-rows>.cc-groupDesc+.cc-contextTable{margin-top:12px}
 .cc-groupHeading{flex:1;min-width:0;margin:0;font:inherit;display:flex}
 /* The whole heading row is the fold toggle: chevron, title, summary badges. */
-.cc-disclosure{box-sizing:border-box;flex-wrap:wrap;flex:1;align-items:center;gap:6px 8px;min-width:0;min-height:36px;padding:0;border:0;background:0 0;color:inherit;font:inherit;text-align:left;cursor:pointer;border-radius:8px;display:flex}
-.cc-foldChevron{color:var(--dsw-alias-label-tertiary);transition:transform .15s ease}
+.cc-disclosure{box-sizing:border-box;flex-wrap:wrap;flex:1;align-items:center;gap:6px 8px;min-width:0;min-height:52px;padding:0;border:0;background:0 0;color:inherit;font:inherit;text-align:left;cursor:pointer;border-radius:8px;display:flex}
+.cc-foldChevron{color:var(--dsw-alias-label-tertiary);transition:transform .16s var(--cc-ease-out),color .15s ease}
 .cc-foldChevronClosed{transform:rotate(-90deg)}
+/* Folding stays instant (2026-10-29): the body stays mounted and is hidden with
+ * the hidden attribute, so aria-controls always points at a real element
+ * and the save bar's locate action can focus an invalid field right after
+ * opening its group. */
 .cc-groupBody{flex-direction:column;display:flex;padding-top:4px}
 .cc-groupBody[hidden]{display:none}
 .cc-disclosure:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:2px}
-.cc-rows{flex-direction:column;display:flex}
-.cc-row{flex-wrap:wrap;align-items:center;gap:8px 24px;display:flex;padding:12px 0}
+.cc-rows{flex-direction:column;display:flex;padding-top:4px}
+/* Card inset by default: every direct body child sits 16px off the card edge,
+ * and only rows opt out — they carry their own 16px side padding so their
+ * hairlines run the card's full width. */
+.cc-rows>*{margin-left:16px;margin-right:16px}
+.cc-rows>.cc-row{margin-left:0;margin-right:0}
+.cc-row{flex-wrap:wrap;align-items:center;gap:8px 24px;display:flex;padding:14px 16px}
+.cc-rows>.cc-row+.cc-row{border-top:.5px solid var(--dsw-alias-border-l2)}
 .cc-rowFlush{padding:0}
 /* The text column starts at 200px (not 300px) so the widest controls — the
  * 280px API base input, the allowlist's button + 200px selector — still sit
@@ -10288,16 +10526,14 @@ window.__ModuleLoader__.load({
 /* The row-level field, drawn to the design canvas: 32px, 8px corners, a 1px
  * border-l3 stroke on the raised surface. A number field draws its unit inside
  * the same box (cc-unitBox), right of the value. */
-.cc-fieldInput{box-sizing:border-box;flex:none;height:32px;min-width:0;padding:0 10px;border:1px solid var(--dsw-alias-border-l3);border-radius:8px;background:var(--dsw-alias-bg-layer-1);font:inherit;color:var(--dsw-alias-label-primary);font-size:14px;line-height:22px}
+.cc-fieldInput{box-sizing:border-box;flex:none;height:32px;min-width:0;padding:0 10px;border:1px solid var(--dsw-alias-border-l3);border-radius:8px;background:var(--dsw-alias-bg-layer-1);font:inherit;color:var(--dsw-alias-label-primary);font-size:14px;line-height:22px;transition:border-color .15s ease}
 .cc-fieldInput::placeholder{color:var(--dsw-alias-label-dimmed)}
-.cc-fieldInput:hover:not(:disabled){border-color:var(--dsw-alias-label-tertiary)}
 .cc-fieldInput:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:2px}
 .cc-fieldInput:disabled{opacity:.5;cursor:default}
-.cc-fieldInputInvalid,.cc-fieldInputInvalid:hover{border-color:var(--dsw-alias-state-error-primary)}
-.cc-unitBox{box-sizing:border-box;flex:none;align-items:center;display:inline-flex;width:160px;height:32px;border:1px solid var(--dsw-alias-border-l3);border-radius:8px;background:var(--dsw-alias-bg-layer-1);overflow:hidden}
-.cc-unitBox:hover{border-color:var(--dsw-alias-label-tertiary)}
+.cc-fieldInputInvalid{border-color:var(--dsw-alias-state-error-primary)}
+.cc-unitBox{box-sizing:border-box;flex:none;align-items:center;display:inline-flex;width:160px;height:32px;border:1px solid var(--dsw-alias-border-l3);border-radius:8px;background:var(--dsw-alias-bg-layer-1);overflow:hidden;transition:border-color .15s ease}
 .cc-unitBox:focus-within{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:2px}
-.cc-unitBoxInvalid,.cc-unitBoxInvalid:hover{border-color:var(--dsw-alias-state-error-primary)}
+.cc-unitBoxInvalid{border-color:var(--dsw-alias-state-error-primary)}
 .cc-unitBox:has(>.cc-fieldInput:disabled){opacity:.5}
 .cc-unitBox>.cc-fieldInput{flex:1;width:auto;height:30px;border:0;border-radius:0;background:0 0;outline:none;text-align:right;font-variant-numeric:tabular-nums}
 .cc-unit{flex:none;padding:0 10px 0 2px;color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:18px;white-space:nowrap}
@@ -10305,8 +10541,8 @@ window.__ModuleLoader__.load({
  * round reset button. Reset lives here rather than after the control, so no
  * row reserves a reset column and the page keeps one right edge. */
 .cc-overrideTag{align-items:center;gap:4px;display:inline-flex}
-.cc-resetInline{flex:none;align-items:center;justify-content:center;display:inline-flex;width:20px;height:20px;padding:0;border:0;border-radius:999px;corner-shape:round;background:0 0;color:var(--dsw-alias-label-tertiary);cursor:pointer}
-.cc-resetInline:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary)}
+.cc-resetInline{flex:none;align-items:center;justify-content:center;display:inline-flex;width:20px;height:20px;padding:0;border:0;border-radius:999px;corner-shape:round;background:0 0;color:var(--dsw-alias-label-tertiary);cursor:pointer;transition:transform .16s var(--cc-ease-out),background-color .15s ease,color .15s ease}
+.cc-resetInline:active:not(:disabled){transform:scale(.95)}
 .cc-resetInline:disabled{cursor:default;opacity:.4}
 .cc-resetInline:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:2px}
 .cc-icon{flex:none;width:16px;height:16px}
@@ -10314,18 +10550,15 @@ window.__ModuleLoader__.load({
  * shape, md 32px / 14px text / 14px icon, sm 28px / 12px text, lg 36px for
  * the save bar; primary is the brand fill, secondary the quiet grey fill,
  * ghost label-secondary text, danger the error fill. */
-.cc-btn{box-sizing:border-box;flex:none;align-items:center;justify-content:center;gap:6px;display:inline-flex;height:32px;padding:0 14px;border:0;border-radius:999px;corner-shape:round;font:inherit;font-size:14px;line-height:22px;white-space:nowrap;cursor:pointer;text-decoration:none}
+.cc-btn{box-sizing:border-box;flex:none;align-items:center;justify-content:center;gap:6px;display:inline-flex;height:32px;padding:0 14px;border:0;border-radius:999px;corner-shape:round;font:inherit;font-size:14px;line-height:22px;white-space:nowrap;cursor:pointer;text-decoration:none;transition:transform .16s var(--cc-ease-out),background-color .15s ease,color .15s ease}
+.cc-btn:active:not(:disabled){transform:scale(.97)}
 .cc-btnSm{height:28px;padding:0 10px;gap:4px;font-size:12px;line-height:18px}
 .cc-btnLg{height:36px;padding:0 16px}
 .cc-btn .cc-btnIcon{width:14px;height:14px}
 .cc-btnPrimary{background:var(--dsw-alias-button-primary-fill,var(--dsw-alias-brand-primary));color:var(--dsw-alias-label-primary-foreground,#fff)}
-.cc-btnPrimary:hover:not(:disabled){background:var(--dsw-alias-button-primary-hover,var(--dsw-alias-button-primary-fill,var(--dsw-alias-brand-primary)))}
 .cc-btnSecondary{background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-primary)}
-.cc-btnSecondary:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover)}
 .cc-btnGhost{background:0 0;color:var(--dsw-alias-label-secondary)}
-.cc-btnGhost:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary)}
 .cc-btnDanger{background:var(--dsw-alias-state-error-primary);color:#fff}
-.cc-btnDanger:hover:not(:disabled){background:color-mix(in srgb,var(--dsw-alias-state-error-primary) 88%,#000)}
 .cc-btn:disabled{cursor:default;opacity:.4}
 .cc-btn:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:2px}
 .cc-groupSummary{color:var(--dsw-alias-label-secondary);font-size:12px;font-weight:400;line-height:18px;white-space:nowrap}
@@ -10342,7 +10575,6 @@ window.__ModuleLoader__.load({
 .cc-fieldHead{align-items:center;gap:8px;display:flex}
 .cc-label{min-width:0;color:var(--dsw-alias-label-primary);flex:1;font-size:13px;font-weight:500;line-height:1.5}
 .cc-reset{font:inherit;color:var(--dsw-alias-label-secondary);cursor:pointer;background:0 0;border:none;padding:0;font-size:12px;line-height:18px}
-.cc-reset:hover:not(:disabled){color:var(--dsw-alias-label-primary)}
 .cc-reset:disabled{cursor:default;opacity:.4}
 .cc-input{box-sizing:border-box;height:32px;min-width:0;padding:0 10px;border:.5px solid var(--dsw-alias-border-l4);border-radius:8px;background:var(--dsw-alias-bg-layer-1);font:inherit;color:var(--dsw-alias-label-primary);font-size:14px;line-height:22px}
 .cc-input::placeholder{color:var(--dsw-alias-label-dimmed)}
@@ -10351,8 +10583,7 @@ window.__ModuleLoader__.load({
 .cc-inputInvalid{border-color:var(--dsw-alias-state-error-primary)}
 .cc-hint{color:var(--dsw-alias-label-tertiary);margin:0;font-size:12px;line-height:18px}
 .cc-modelSelectAnchor{flex-direction:column;align-items:stretch;gap:6px;display:inline-flex;width:200px}
-.cc-selector{box-sizing:border-box;justify-content:space-between;align-items:center;gap:8px;display:inline-flex;height:32px;padding:0 10px;border:1px solid var(--dsw-alias-border-l3);border-radius:8px;background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-primary);font:inherit;font-size:14px;line-height:22px;text-align:left;cursor:pointer}
-.cc-selector:hover:not(:disabled){border-color:var(--dsw-alias-label-tertiary)}
+.cc-selector{box-sizing:border-box;justify-content:space-between;align-items:center;gap:8px;display:inline-flex;height:32px;padding:0 10px;border:1px solid var(--dsw-alias-border-l3);border-radius:8px;background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-primary);font:inherit;font-size:14px;line-height:22px;text-align:left;cursor:pointer;transition:border-color .15s ease}
 .cc-selector:disabled{cursor:default;opacity:.4}
 .cc-selector:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:2px}
 .cc-selectorText{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@@ -10375,27 +10606,28 @@ window.__ModuleLoader__.load({
 .cc-check:checked::after{content:'';position:absolute;top:3px;left:5px;width:3px;height:7px;border:solid var(--dsw-alias-label-primary-foreground,#fff);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
 .cc-checkName{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 /* Modelled on the platform's own Switch primitive (ui-primitives
- * Switch.module.css): a 36x20 capsule padding its track by 2px and sliding a
- * 16px thumb across the 32px content box. Three things are load-bearing.
+ * Switch.module.css): a 40x24 capsule padding its track by 2px and sliding a
+ * 20px thumb across the 36px content box. Three things are load-bearing.
  * (1) corner-shape:round on BOTH track and thumb — the theme sets a global
  * superellipse corner shape, which squares a capsule's ends off around a round
  * thumb. (2) No literal colours: brand-primary INVERTS between the modes, so a
  * hardcoded white thumb vanishes on the checked track in dark mode; the brand
  * foreground is what the platform paints on that fill. (3) border-l3 as the
- * off track — border-l2 leaves it indistinguishable from the page. */
-.cc-toggle{box-sizing:border-box;appearance:none;flex-shrink:0;width:36px;height:20px;margin:0;padding:2px;border:0;border-radius:10px;corner-shape:round;background:var(--dsw-alias-border-l3);cursor:pointer;position:relative}
+ * off track — border-l2 leaves it indistinguishable from the page. The track
+ * and thumb share one duration so the switch reads as one object. */
+.cc-toggle{box-sizing:border-box;appearance:none;flex-shrink:0;width:40px;height:24px;margin:0;padding:2px;border:0;border-radius:12px;corner-shape:round;background:var(--dsw-alias-border-l3);cursor:pointer;position:relative;transition:background-color .12s ease}
 .cc-toggle:checked{background:var(--dsw-alias-brand-primary)}
-.cc-toggle::after{content:'';display:block;width:16px;height:16px;border-radius:50%;corner-shape:round;background:var(--dsw-alias-label-primary-foreground);transition:transform .12s ease}
+.cc-toggle::after{content:'';display:block;width:20px;height:20px;border-radius:50%;corner-shape:round;background:var(--dsw-alias-label-primary-foreground);transition:transform .12s ease}
 .cc-toggle:checked::after{transform:translateX(16px)}
 .cc-toggle:not(:checked)::after{background:var(--dsw-alias-switch-thumb,var(--dsw-alias-label-primary-foreground))}
 .cc-toggle:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:2px}
 .cc-toggle:disabled{cursor:default;opacity:.5}
-.cc-accountMode{align-items:center;gap:8px;display:flex;margin:12px 0;color:var(--dsw-alias-label-secondary);font-size:12px;line-height:18px}
+.cc-accountMode{align-items:center;gap:8px;display:flex;margin:12px 16px 0;color:var(--dsw-alias-label-secondary);font-size:12px;line-height:18px}
 .cc-accountList{flex-direction:column;gap:8px;display:flex}
-.cc-accountList+.cc-panel{margin-top:8px}
+.cc-accountList+.cc-panel{margin:8px 16px 16px}
 /* One row under the list: Add account (outline) leads, the analytics exit
  * (ghost) trails; the exit's long label clamps instead of wrapping the row. */
-.cc-accountActions{flex-wrap:wrap;align-items:center;gap:8px;display:flex;margin-top:12px}
+.cc-accountActions{flex-wrap:wrap;align-items:center;gap:8px;display:flex;margin:12px 16px 16px}
 .cc-analyticsEntry{max-width:100%;min-width:0}
 .cc-analyticsEntryText{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .cc-chevronOpen{transform:rotate(180deg)}
@@ -10406,14 +10638,14 @@ window.__ModuleLoader__.load({
 .cc-accountToggle{flex-wrap:wrap;align-items:center;gap:6px 8px;display:flex;flex:1;min-width:0;min-height:44px;padding:0 0 0 16px;background:0 0;border:0;border-radius:12px;color:inherit;cursor:pointer;font:inherit;text-align:left}
 .cc-accountToggle:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:2px;border-radius:4px}
 .cc-accountName{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dsw-alias-label-primary);font-size:14px;font-weight:500;line-height:22px}
-.cc-iconButton{flex-shrink:0;align-items:center;justify-content:center;display:inline-flex;width:28px;height:28px;padding:0;background:0 0;border:0;border-radius:8px;color:var(--dsw-alias-label-tertiary);cursor:pointer}
-.cc-iconButton:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary)}
+.cc-iconButton{flex-shrink:0;align-items:center;justify-content:center;display:inline-flex;width:28px;height:28px;padding:0;background:0 0;border:0;border-radius:8px;color:var(--dsw-alias-label-tertiary);cursor:pointer;transition:transform .16s var(--cc-ease-out),background-color .15s ease,color .15s ease}
+.cc-iconButton:active:not(:disabled){transform:scale(.95)}
 .cc-iconButton:disabled{cursor:default;opacity:.4}
-.cc-iconButton:focus-visible{outline:none;box-shadow:0 0 0 2px var(--dsw-alias-border-l3)}
+.cc-iconButton:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:2px}
 /* Per-model context-length overrides (issue #86) as the design's small table:
  * a card holding a head row over a model / value / remove grid, a line
  * between rows; a row's error wraps onto its own line across the grid. */
-.cc-contextTable{flex-direction:column;display:flex;margin:0 0 12px;border:1px solid var(--dsw-alias-border-l2);border-radius:12px}
+.cc-contextTable{flex-direction:column;display:flex;margin:0 16px 16px;border:1px solid var(--dsw-alias-border-l2);border-radius:12px}
 .cc-contextItem{grid-template-columns:minmax(0,1fr) 144px 28px;align-items:center;gap:8px;display:grid;padding:8px 8px 8px 12px}
 .cc-contextItem+.cc-contextItem{border-top:1px solid var(--dsw-alias-border-l2)}
 .cc-contextHead{grid-template-columns:minmax(0,1fr) 144px 28px;align-items:center;gap:8px;display:grid;height:32px;padding:0 8px 0 12px;border-bottom:1px solid var(--dsw-alias-border-l2);color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:18px}
@@ -10433,7 +10665,10 @@ window.__ModuleLoader__.load({
 .cc-miniMeter{align-items:center;gap:8px;display:inline-flex;font-size:12px;line-height:18px}
 .cc-miniMeterLabel{color:var(--dsw-alias-label-secondary)}
 .cc-miniMeterTrack{overflow:hidden;background:var(--dsw-alias-bg-module-platform);border-radius:999px;width:64px;height:4px}
-.cc-miniMeterFill{display:block;background:var(--dsw-alias-brand-primary);border-radius:999px;height:100%}
+/* The fill is always full width and slides in from the left under the track's
+ * overflow clip: animating transform skips layout, and unlike scaleX it keeps
+ * the fill's rounded ends. */
+.cc-miniMeterFill{display:block;width:100%;background:var(--dsw-alias-brand-primary);border-radius:999px;height:100%;transition:transform .24s var(--cc-ease-out)}
 .cc-miniMeterValue{color:var(--dsw-alias-label-secondary);font-variant-numeric:tabular-nums}
 .cc-accountDetails{container-type:inline-size;border-top:1px solid var(--dsw-alias-border-l2);flex-direction:column;gap:16px;display:flex;padding:16px}
 .cc-inlineForm{flex-direction:column;gap:8px;display:flex}
@@ -10445,8 +10680,8 @@ window.__ModuleLoader__.load({
 /* The add-account method switch, drawn as the design's segmented control: a
  * pill track on the raised surface, the chosen segment in the brand fill. */
 .cc-seg{align-self:flex-start;display:inline-flex;padding:2px;border-radius:999px;corner-shape:round;background:var(--dsw-alias-bg-layer-1);box-shadow:inset 0 0 0 1px var(--dsw-alias-border-l2)}
-.cc-segItem{height:28px;padding:0 12px;border:0;border-radius:999px;corner-shape:round;background:0 0;color:var(--dsw-alias-label-secondary);font:inherit;font-size:12px;line-height:18px;cursor:pointer}
-.cc-segItem:hover:not(:disabled):not(.cc-segOn){color:var(--dsw-alias-label-primary)}
+.cc-segItem{height:28px;padding:0 12px;border:0;border-radius:999px;corner-shape:round;background:0 0;color:var(--dsw-alias-label-secondary);font:inherit;font-size:12px;line-height:18px;cursor:pointer;transition:transform .16s var(--cc-ease-out),background-color .15s ease,color .15s ease}
+.cc-segItem:active:not(:disabled):not(.cc-segOn){transform:scale(.97)}
 .cc-segItem:disabled{cursor:default;opacity:.4}
 .cc-segItem:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:2px}
 .cc-segOn{background:var(--dsw-alias-button-primary-fill,var(--dsw-alias-brand-primary));color:var(--dsw-alias-label-primary-foreground,#fff)}
@@ -10463,13 +10698,14 @@ window.__ModuleLoader__.load({
 .cc-usageStats{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;display:grid}
 .cc-usageStatsActivity{grid-template-columns:repeat(4,minmax(0,1fr))}
 @container (max-width:460px){.cc-usageStatsActivity{grid-template-columns:repeat(2,minmax(0,1fr))}}
-.cc-balance{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:4px 16px;display:flex}
-.cc-balanceMain{flex-direction:column;gap:2px;display:flex}
+.cc-balance{flex-direction:column;gap:2px;display:flex}
+/* 两行左右分栏：标签行左账期、右更新时间；数值行左剩余、右已购与赠送。 */
+.cc-balanceRow{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 16px;display:flex}
 .cc-balanceLabel{color:var(--dsw-alias-label-secondary);font-size:12px;line-height:18px}
 .cc-balanceValue{color:var(--dsw-alias-label-primary);font-size:20px;font-weight:600;line-height:28px;font-variant-numeric:tabular-nums}
 .cc-balanceSub{color:var(--dsw-alias-label-secondary);font-size:12px;line-height:18px;font-variant-numeric:tabular-nums}
 .cc-balanceEmpty .cc-balanceValue{color:var(--dsw-alias-state-error-primary)}
-.cc-balanceNote{flex-basis:100%;margin:0;color:var(--dsw-alias-state-error-primary);font-size:12px;line-height:18px}
+.cc-balanceNote{margin:0;color:var(--dsw-alias-state-error-primary);font-size:12px;line-height:18px}
 .cc-usageStat{min-width:0;flex-direction:column;gap:2px;display:flex;padding:10px 12px;border-radius:8px;background:var(--dsw-alias-bg-module-platform)}
 .cc-usageStatLabel{color:var(--dsw-alias-label-secondary);font-size:12px;line-height:18px}
 .cc-usageStatValue{color:var(--dsw-alias-label-primary);font-size:16px;font-weight:500;line-height:24px;font-variant-numeric:tabular-nums}
@@ -10481,19 +10717,22 @@ window.__ModuleLoader__.load({
 .cc-usageWindowValue{color:var(--dsw-alias-label-primary);font-size:12px;line-height:18px;font-variant-numeric:tabular-nums}
 .cc-usageExceeded{color:var(--dsw-alias-state-error-primary);font-size:12px;line-height:18px}
 .cc-usageBar{overflow:hidden;background:var(--dsw-alias-bg-module-platform);border-radius:999px;height:4px}
-.cc-usageBarFill{background:var(--dsw-alias-brand-primary);border-radius:999px;height:100%;transition:width .3s ease}
+/* The fill is always full width and slides in from the left under the track's
+ * overflow clip: animating transform skips layout, and unlike scaleX it keeps
+ * the fill's rounded ends. */
+.cc-usageBarFill{width:100%;background:var(--dsw-alias-brand-primary);border-radius:999px;height:100%;transition:transform .24s var(--cc-ease-out)}
 .cc-usageBarFillWarn{background:var(--dsw-alias-state-error-primary)}
 .cc-usageWindowReset{color:var(--dsw-alias-label-secondary);margin:0;font-size:12px;line-height:18px}
-.cc-usageMeta{align-items:center;gap:8px;display:flex}
-.cc-usageMetaSpacer{flex:1}
-.cc-usageUpdated{color:var(--dsw-alias-label-secondary);margin:0;font-size:12px;line-height:18px}
 .cc-usagePartial{color:var(--dsw-alias-state-error-primary);margin:0;font-size:12px;line-height:18px}
 .cc-notices{flex-direction:column;gap:8px;display:flex;margin-bottom:12px}
 .cc-section>.cc-notice{margin-top:12px}
 /* One block for every result, warning and blocked state: neutral (read-only,
  * in progress), warn (partly done, needs a retry) and error (failed). The
- * icon and title take the tone; the body stays label-secondary for contrast. */
-.cc-notice{box-sizing:border-box;align-items:flex-start;gap:10px;display:flex;padding:10px 12px;border-radius:12px;background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-secondary);font-size:12px;line-height:18px}
+ * icon and title take the tone; the body stays label-secondary for contrast.
+ * A notice settles in from 4px above as it first renders, so a result never
+ * jolts the content below it; browsers without @starting-style just show it. */
+.cc-notice{box-sizing:border-box;align-items:flex-start;gap:10px;display:flex;padding:10px 12px;border-radius:12px;background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-secondary);font-size:12px;line-height:18px;transition:opacity .2s var(--cc-ease-out),transform .2s var(--cc-ease-out)}
+@starting-style{.cc-notice{opacity:0;transform:translateY(-4px)}}
 .cc-noticeIcon{flex:none;width:16px;height:16px;margin-top:1px;color:var(--dsw-alias-label-tertiary)}
 .cc-noticeBody{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex;word-break:break-word}
 .cc-noticeBody>p{margin:0}
@@ -10508,21 +10747,17 @@ window.__ModuleLoader__.load({
 .cc-noticeError>.cc-noticeIcon,.cc-noticeError .cc-noticeTitle{color:var(--dsw-alias-state-error-primary)}
 .cc-version{margin:32px 0 0;text-align:center;color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:18px}
 .cc-versionLink{color:var(--dsw-alias-state-warn-label,var(--dsw-alias-label-secondary));text-decoration:none}
-.cc-versionLink:hover{color:var(--dsw-alias-label-primary);text-decoration:underline;text-underline-position:under}
 .cc-providerCard{flex-direction:column;display:flex}
 .cc-footer{justify-content:flex-end;align-items:center;gap:8px;display:flex}
 .cc-failed{display:inline-block;max-width:260px;min-width:0;color:var(--dsw-alias-state-error-primary);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:18px}
 .cc-loginLink{align-items:center;gap:4px;display:inline-flex;color:var(--dsw-alias-link,var(--dsw-alias-brand-primary));text-decoration:none;font-size:12px;line-height:18px}
 .cc-loginLink>.cc-iconInline{width:12px;height:12px}
-.cc-loginLink:hover{text-decoration:underline;text-underline-position:under}
 /* The status row's dot + verdict sit beside the row title; the primitive's own
  * state tokens colour the dot, so only the neutral label and the failure note
  * need styling here. */
 .cc-statusBadge{align-items:center;gap:6px;display:inline-flex;white-space:nowrap}
 .cc-statusLabel{color:var(--dsw-alias-label-secondary);font-size:12px;line-height:18px}
 .cc-statusNotice{color:var(--dsw-alias-state-warn-label,var(--dsw-alias-label-tertiary));margin:0;font-size:12px;line-height:18px}
-/* One muted line in the status description: the local-connectivity probe and
- * the publication-lag note both use it, so the dot and the text stay aligned. */
 /* The service-status row's two sources: a key column (Official / This device)
  * beside a value line that wraps under itself, never under the key. */
 .cc-statusLines{grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:4px 12px;display:grid;margin:2px 0 0;color:var(--dsw-alias-label-secondary);font-size:12px;line-height:18px}
@@ -10537,7 +10772,6 @@ window.__ModuleLoader__.load({
 .cc-statusTitleLink{align-items:center;gap:4px;display:inline-flex;margin-left:auto}
 .cc-statusBad{color:var(--dsw-alias-state-warn-label,var(--dsw-alias-state-warn-primary,#b45309))}
 .cc-statusLink{color:var(--dsw-alias-link,var(--dsw-alias-brand-primary));text-decoration:none;font-size:12px;line-height:18px;white-space:nowrap}
-.cc-statusLink:hover{text-decoration:underline;text-underline-position:under}
 .cc-loginDone{color:var(--dsw-alias-state-success-primary,var(--dsw-alias-label-secondary))}
 .cc-loginError{color:var(--dsw-alias-state-error-primary)}
 /* The floating save bar: a centered bar pinned to the bottom of the
@@ -10545,15 +10779,16 @@ window.__ModuleLoader__.load({
  * page, so the bar overlays the scrolling content instead of taking a row of
  * its own; while shown, the section reserves room at its end so the last line
  * can scroll clear. Hidden, it sinks and fades, and visibility (switched after
- * the transition) takes its buttons out of the tab order. Its surface is an
- * elevated layer (bg-layer-1 over the settings panel's layer-2) with the
+ * the transition) takes its buttons out of the tab order. It leaves faster than
+ * it arrives and never overshoots: the bar shows on every edit. Its surface is
+ * an elevated layer (bg-layer-1 over the settings panel's layer-2) with the
  * platform's prominent elevation and no stroke, and its corners are concentric
- * with the capsule buttons inside it (36px pills inset by 4px in a 44px pill)
+ * with the capsule buttons inside it (36px pills inset by 6px in a 48px pill)
  * so the gap around each button is even. */
 .cc-sectionWithBar{padding-bottom:80px}
 .cc-saveBarDock{position:sticky;bottom:0;z-index:2;height:0;pointer-events:none}
-.cc-saveBar{--cc-saveBar-tone:var(--dsw-alias-state-warn-primary,#d97706);position:absolute;left:50%;bottom:20px;box-sizing:border-box;width:max-content;max-width:calc(100% - 24px);align-items:center;gap:10px;display:flex;height:44px;padding:4px 4px 4px 16px;border:0;border-radius:22px;corner-shape:round;background:var(--dsw-alias-bg-layer-1);box-shadow:var(--dsw-elevation-prominent,0 12px 32px -8px rgba(0,0,0,.24),0 2px 8px rgba(0,0,0,.08));opacity:0;visibility:hidden;transform:translate(-50%,12px);transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s}
-.cc-saveBarShown{opacity:1;visibility:visible;transform:translate(-50%,0);pointer-events:auto;transition:opacity .2s ease,transform .24s cubic-bezier(.2,.9,.3,1.1),visibility 0s}
+.cc-saveBar{--cc-saveBar-tone:var(--dsw-alias-state-warn-primary,#d97706);position:absolute;left:50%;bottom:20px;box-sizing:border-box;width:max-content;max-width:calc(100% - 24px);align-items:center;gap:10px;display:flex;height:48px;padding:6px 6px 6px 16px;border:0;border-radius:24px;corner-shape:round;background:var(--dsw-alias-bg-layer-1);box-shadow:var(--dsw-elevation-prominent,0 12px 32px -8px rgba(0,0,0,.24),0 2px 8px rgba(0,0,0,.08));opacity:0;visibility:hidden;transform:translate(-50%,12px);transition:opacity .16s var(--cc-ease-out),transform .16s var(--cc-ease-out),visibility 0s linear .16s}
+.cc-saveBarShown{opacity:1;visibility:visible;transform:translate(-50%,0);pointer-events:auto;transition:opacity .22s var(--cc-ease-out),transform .22s var(--cc-ease-out),visibility 0s}
 .cc-saveBar-error{--cc-saveBar-tone:var(--dsw-alias-state-error-primary)}
 .cc-saveBar-success{--cc-saveBar-tone:var(--dsw-alias-state-success-primary,#16a34a);padding-right:18px}
 .cc-saveBarIcon{flex-shrink:0;align-items:center;justify-content:center;display:inline-flex;width:16px;height:16px;color:var(--cc-saveBar-tone)}
@@ -10561,7 +10796,36 @@ window.__ModuleLoader__.load({
 .cc-saveBarText{min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dsw-alias-label-primary);font-size:14px;line-height:22px}
 .cc-saveBar-error .cc-saveBarText{color:var(--dsw-alias-state-error-primary)}
 .cc-saveBarActions{flex-shrink:0;align-items:center;gap:4px;display:flex;margin-left:8px}
-@media (prefers-reduced-motion:reduce){.cc-foldChevron,.cc-toggle::after,.cc-usageBarFill,.cc-saveBar,.cc-saveBarShown{transition:none}}
+/* Hover only where a real pointer hovers. Order matters inside: the invalid
+ * borders come after the plain hover borders at equal specificity, so an
+ * invalid field keeps its error border under the pointer. */
+@media (hover:hover) and (pointer:fine){
+.cc-fieldInput:hover:not(:disabled),.cc-unitBox:hover,.cc-selector:hover:not(:disabled){border-color:var(--dsw-alias-label-tertiary)}
+.cc-fieldInputInvalid:hover:not(:disabled),.cc-unitBoxInvalid:hover{border-color:var(--dsw-alias-state-error-primary)}
+.cc-resetInline:hover:not(:disabled),.cc-iconButton:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary)}
+.cc-btnPrimary:hover:not(:disabled){background:var(--dsw-alias-button-primary-hover,var(--dsw-alias-button-primary-fill,var(--dsw-alias-brand-primary)))}
+.cc-btnSecondary:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover)}
+.cc-btnGhost:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary)}
+.cc-btnDanger:hover:not(:disabled){background:color-mix(in srgb,var(--dsw-alias-state-error-primary) 88%,#000)}
+.cc-segItem:hover:not(:disabled):not(.cc-segOn),.cc-reset:hover:not(:disabled){color:var(--dsw-alias-label-primary)}
+/* A whole-row toggle (group heading, account card head) shows it is one
+ * target by lifting its chevron; a fill would weigh too much across the row. */
+.cc-disclosure:hover .cc-foldChevron,.cc-accountToggle:hover .cc-foldChevron{color:var(--dsw-alias-label-primary)}
+.cc-versionLink:hover{color:var(--dsw-alias-label-primary);text-decoration:underline;text-underline-position:under}
+.cc-loginLink:hover,.cc-statusLink:hover{text-decoration:underline;text-underline-position:under}
+}
+/* Reduced motion drops movement and scale but keeps the fades and colour
+ * changes, which carry meaning without motion. Card entrance keeps its fade
+ * (the transform is neutralised), and the fold is already instant. */
+@media (prefers-reduced-motion:reduce){
+.cc-foldChevron,.cc-toggle::after,.cc-usageBarFill,.cc-miniMeterFill{transition:none}
+.cc-btn,.cc-iconButton,.cc-resetInline,.cc-segItem{transition:background-color .15s ease,color .15s ease}
+.cc-btn:active:not(:disabled),.cc-iconButton:active:not(:disabled),.cc-resetInline:active:not(:disabled),.cc-segItem:active:not(:disabled):not(.cc-segOn){transform:none}
+.cc-notice{transition:opacity .2s ease}
+.cc-group{transition:opacity .2s ease;transform:none!important}
+.cc-saveBar{transition:opacity .16s ease,visibility 0s linear .16s}
+.cc-saveBarShown{transition:opacity .2s ease,visibility 0s}
+}
 `;
 		//#endregion
 		//#region src/client/panel-styles.ts
@@ -11176,6 +11440,7 @@ window.__ModuleLoader__.load({
 				discard: () => controller.discard(),
 				refreshCredentials: () => void controller.refreshCredentials(),
 				refreshUsage: () => void usageController.refresh(),
+				refreshUsageAuto: () => void usageController.refresh({ auto: true }),
 				...typeof ctx.get("layout")?.selectPanel === "function" ? { openAnalytics } : {},
 				beginLogin: (targetRef) => void loginController.begin(targetRef),
 				cancelLogin: () => void loginController.cancel(),