dsh-subusage 0.10.10 → 0.11.0

package/lib/client.js

@@ -31,7 +31,7 @@ window.__ModuleLoader__.load({
 			lightOk: "全部拉取成功",
 			lightFail: "存在拉取失败",
 			statusOk: "数据获取成功",
-			statusPartial: "数据不完整，额度未知",
+			statusPartial: "数据不完整",
 			statusCache: "缓存数据",
 			cacheAge: "缓存 · {n} 分钟前",
 			cacheUnknown: "缓存时间未知",
@@ -58,7 +58,6 @@ window.__ModuleLoader__.load({
 			resets: "重置于",
 			limited: "已达限额",
 			cascadeLimited: "（受更长周期限额连累，暂不可用）",
-			retry: "立即重试",
 			loading: "正在读取用量…",
 			unavailable: "暂不可用",
 			planLabel: "套餐",
@@ -91,16 +90,27 @@ window.__ModuleLoader__.load({
 			restDays: "{n} 天",
 			restHours: "{n} 小时",
 			restMins: "{n} 分钟",
-			badgeOk: "可用",
-			badgeHigh: "偏高",
-			badgeTight: "紧张",
-			badgeLimited: "不可用",
+			// 档位词只描述「还剩多少」；旧的「偏高」没写清主语（用量高还是余量高），读起来自相矛盾。
+			// 键名 badgeHigh 保留（它对应已用 71–90% 的档位），文案改成「偏少」。
+			badgeOk: "充足",
+			badgeHigh: "偏少",
+			badgeTight: "即将用尽",
+			badgeLimited: "已用尽",
 			badgeBlocked: "受连累",
+			statusPlenty: "额度充足",
+			statusLow: "余量偏低",
+			statusTight: "即将用尽",
+			statusExhausted: "额度已用尽",
+			statusBlocked: "暂不可用",
+			statusWorst: "最紧张：{w} · 剩 {p}%",
+			statusOnly: "{w} · 剩 {p}%",
+			statusResetIn: "{rest}后重置",
+			remainWord: "剩余",
 			numUsed: "已用 {p}%",
 			numLimited: "⚠ 已达限额",
 			numBlocked: "⚠ 暂不可用",
 			pillRemaining: "余 {p}%",
-			pillLimited: "已达限额",
+			pillLimited: "已用尽",
 			pillBlocked: "受连累",
 			needConfigShort: "需配置",
 			pillNeedKey: "未配置 API Key —— 请打开 设置 → 订阅用量 填写，或导出同名环境变量后重启。",
@@ -117,14 +127,14 @@ window.__ModuleLoader__.load({
 			pillNeedGrok: "需登录 —— 可在 设置 → Grok Kit（xAI OAuth）登录或运行 grok login（共享登录文件 ~/.grok/auth.json）。",
 			accountLabel: "账户",
 			commandcodeManaged: "凭据由 Command Code 提供方插件（设置 → Command Code）管理；本页只读、不保存凭据。用量由本插件直接拉取其计费接口，取用同一凭据来源（凭据服务 COMMANDCODE_API_KEY → 启动环境 → ~/.commandcode/auth.json）。",
-			commandcodeHelp: "并行读取 /alpha/billing/credits 和 /alpha/billing/subscriptions（默认 API 地址 https://api.commandcode.ai）。月总额按已知套餐快照推算，未知套餐只显示月剩余；月池耗尽不代表已购/赠送池不可用。显示药丸弹层中选择的账户的额度（未选择时为默认账户/顶层 Key），可能与实际服务账户不同；插件里自定义 apiBase 不会被跟随。",
+			commandcodeHelp: "并行读取 /alpha/billing/credits 和 /alpha/billing/subscriptions（默认 API 地址 https://api.commandcode.ai）。月总额按已知套餐快照推算，未知套餐只显示月剩余；月池耗尽不代表已购/赠送池不可用。显示选中账户的额度（未选择时为默认账户/顶层 Key），可能与实际服务账户不同；插件里自定义 apiBase 不会被跟随。账户切换就在下方「Command Code 账户」区，与药丸弹层同一开关；模型查询额度工具时会同时给出全部账户的余量与当前激活项。",
 			grokManaged: "凭据由 dsh-grok-kit / Grok CLI 的 OAuth 登录文件（~/.grok/auth.json）管理；本页只读、不保存凭据、不刷新 token。用量由本插件取同一凭据直连 Grok CLI 计费代理（cli-chat-proxy.grok.com）拉取。",
 			grokHelp: "并行读取 /v1/billing?format=credits 与 /v1/settings。creditUsagePercent 是统一用量池的已用百分比（通常为周池，重置于 currentPeriod.end，剩余 = 100 − 已用）；套餐名取 subscription_tier_display；已购加量余额 prepaidBalance 以美元显示。API Key（XAI_API_KEY）路线取不到订阅周池，必须 OAuth 登录。",
 			ccAccountsTitle: "Command Code 账户",
 			ccAccountAuto: "自动轮换",
 			ccAccountDefault: "默认账户",
 			ccAccountActive: "使用中",
-			ccAccountsHint: "切换对 Command Code 提供方插件全局生效（与其设置页同一开关）；上方用量同步切换为所选账户的额度。",
+			ccAccountsHint: "切换对 Command Code 提供方插件全局生效（与其设置页同一开关）；上方用量与药丸同步切换为所选账户的额度。设置页与药丸弹层用的是同一个开关。",
 			ccAccountsUnavailable: "账户列表不可用（需要 Command Code 提供方插件在运行）",
 			ccUsageAccount: "上方用量：{account}",
 			ccUsageAutoNote: "自动轮换时上方用量仍是默认账户（顶层 Key），不跟随实际服务账户",
@@ -144,7 +154,7 @@ window.__ModuleLoader__.load({
 			lightOk: "All fetches succeeded",
 			lightFail: "Some fetches failed",
 			statusOk: "Fetch OK",
-			statusPartial: "Partial data; quota unknown",
+			statusPartial: "Partial data",
 			statusCache: "Cached data",
 			cacheAge: "Cached · {n} min ago",
 			cacheUnknown: "Cache age unknown",
@@ -171,7 +181,6 @@ window.__ModuleLoader__.load({
 			resets: "Resets",
 			limited: "Limit reached",
 			cascadeLimited: " (blocked by a larger window's limit)",
-			retry: "Retry now",
 			loading: "Loading usage…",
 			unavailable: "Unavailable",
 			planLabel: "Plan",
@@ -204,16 +213,26 @@ window.__ModuleLoader__.load({
 			restDays: "{n} d",
 			restHours: "{n} h",
 			restMins: "{n} min",
-			badgeOk: "OK",
-			badgeHigh: "High",
-			badgeTight: "Tight",
-			badgeLimited: "Unavailable",
+			// Tier words describe what is LEFT; the old "High" never said high what.
+			badgeOk: "Plenty",
+			badgeHigh: "Low",
+			badgeTight: "Almost out",
+			badgeLimited: "Used up",
 			badgeBlocked: "Blocked",
+			statusPlenty: "Plenty left",
+			statusLow: "Running low",
+			statusTight: "Almost out",
+			statusExhausted: "Quota used up",
+			statusBlocked: "Temporarily blocked",
+			statusWorst: "Tightest: {w} · {p}% left",
+			statusOnly: "{w} · {p}% left",
+			statusResetIn: "resets in {rest}",
+			remainWord: "left",
 			numUsed: "Used {p}%",
 			numLimited: "⚠ Limit reached",
 			numBlocked: "⚠ Unavailable",
 			pillRemaining: "{p}% left",
-			pillLimited: "Limit reached",
+			pillLimited: "Used up",
 			pillBlocked: "Blocked",
 			needConfigShort: "Setup",
 			pillNeedKey: "No API key — open Settings → Subscription usage to fill one in, or export the same-named env variable and restart.",
@@ -230,14 +249,14 @@ window.__ModuleLoader__.load({
 			pillNeedGrok: "Login required — sign in under Settings → Grok Kit (xAI OAuth) or run grok login (shared login file ~/.grok/auth.json).",
 			accountLabel: "Account",
 			commandcodeManaged: "Credentials are managed by the Command Code provider plugin (Settings → Command Code); this page is read-only and stores nothing. Usage is fetched directly by this plugin from its billing endpoint, using the same credential sources (credential service COMMANDCODE_API_KEY → launch environment → ~/.commandcode/auth.json).",
-			commandcodeHelp: "Parallel requests to /alpha/billing/credits and /alpha/billing/subscriptions (default API base https://api.commandcode.ai). Monthly totals use a known-plan snapshot; unknown plans show remaining credits only. Monthly-pool depletion does not imply purchased/free credits are unusable. Shows the quota of the account selected in the pill popover (the default/top-level key account when none is selected), which may differ from the serving account; a custom apiBase in the provider plugin is not followed.",
+			commandcodeHelp: "Parallel requests to /alpha/billing/credits and /alpha/billing/subscriptions (default API base https://api.commandcode.ai). Monthly totals use a known-plan snapshot; unknown plans show remaining credits only. Monthly-pool depletion does not imply purchased/free credits are unusable. Shows the selected account's quota (the default/top-level key account when none is selected), which may differ from the serving account; a custom apiBase in the provider plugin is not followed. Account switching lives in the “Command Code accounts” block below — the same switch as the pill popover; the quota tool reports every account plus which one is active.",
 			grokManaged: "Credentials are the OAuth login file shared by dsh-grok-kit / Grok CLI (~/.grok/auth.json); this page is read-only — it stores nothing and never refreshes the token. Usage is fetched directly by this plugin from the Grok CLI billing proxy (cli-chat-proxy.grok.com) with the same credential.",
 			grokHelp: "Parallel requests to /v1/billing?format=credits and /v1/settings. creditUsagePercent is the USED percentage of the unified usage pool (usually weekly, resetting at currentPeriod.end; remaining = 100 − used). The plan name comes from subscription_tier_display; the purchased top-up balance prepaidBalance is shown in USD. An API key (XAI_API_KEY) cannot read the subscription pool — OAuth sign-in is required.",
 			ccAccountsTitle: "Command Code accounts",
 			ccAccountAuto: "Automatic (rotation order)",
 			ccAccountDefault: "Default account",
 			ccAccountActive: "in use",
-			ccAccountsHint: "Switching applies globally to the Command Code provider plugin (same switch as its settings page); the usage above switches to the selected account's quota.",
+			ccAccountsHint: "Switching applies globally to the Command Code provider plugin (same switch as its settings page); the usage above and the pill follow the selected account. This page and the pill popover share one switch.",
 			ccAccountsUnavailable: "Account list unavailable (requires the Command Code provider plugin to be running)",
 			ccUsageAccount: "Usage above: {account}",
 			ccUsageAutoNote: "with automatic rotation the usage above stays on the default (top-level key) account, not the serving one",
@@ -356,24 +375,6 @@ window.__ModuleLoader__.load({
 			if (w.percent >= 71) return { icon: "⚠", badge: "badgeHigh", color: "#eab308", num: null, rank: 2 };
 			return { icon: "✓", badge: "badgeOk", color: "#22c55e", num: null, rank: 1 };
 		}
-		/** tag 圆点色：最差窗口档位色（绿/黄/橙/红）；拉取失败红。 */
-		function tagColor(entry) {
-			if (!entry || entry.state === "loading") return "#94a3b8";
-			if (entry.state !== "ok") return "#ef4444";
-			if ((entry.windows || []).some((w) => w.status === "rate-limited")) return "#ef4444";
-			if (entry.coverage === "partial" || entry.freshness === "stale") return "#eab308";
-			const rank = { "#22c55e": 0, "#eab308": 1, "#f97316": 2, "#ef4444": 3 };
-			let worst = "#22c55e";
-			for (const w of entry.windows || []) {
-				const c = usageTier(w).color;
-				if (rank[c] > rank[worst]) worst = c;
-			}
-			return worst;
-		}
-		/** 数字色：0–70 白（前景），其余随档位。 */
-		function numColor(w) {
-			return usageTier(w).rank === 1 ? "inherit" : usageTier(w).color;
-		}
 		/** 最差窗：档位最高者优先；同档时根因（非连坐）优先，再取已用更多者。 */
 		function worstWindow(windows) {
 			let worst = null;
@@ -651,14 +652,6 @@ window.__ModuleLoader__.load({
 			const worst = worstWindow(windows);
 			return `${statusText(entry, t)}${worst ? " · " + pillText(worst, windows.length > 1, t) : " · " + t("noUsageData")}`;
 		}
-		function providerIcon(entry) {
-			if (!entry || entry.state === "loading") return "…";
-			if ((entry.windows || []).some((w) => w.status === "rate-limited")) return "✕";
-			if (entry.state !== "ok") return "!";
-			if (entry.coverage === "partial" || entry.freshness === "stale") return "?";
-			const worst = worstWindow(entry.windows || []);
-			return worst ? usageTier(worst).icon : "?";
-		}
 		function cacheAge(entry, t) {
 			if (!entry || entry.freshness !== "stale" || !canShowUsage(entry)) return null;
 			const at = Date.parse(entry.lastSuccessAt);
@@ -746,7 +739,10 @@ window.__ModuleLoader__.load({
 				return value;
 			};
 			const setCommandCodeAccount = (id) => {
-				const next = typeof id === "string" ? id.trim() : "";
+				// "default" 与空串在 Host 端是同一个账户（同一缓存键、同一指纹，见 providerCacheKey）：
+				// 归一后就不必为「固定到默认账户」多打一次强制刷新。
+				const raw = typeof id === "string" ? id.trim() : "";
+				const next = raw === "default" ? "" : raw;
 				if (disposed || ccAccount === next) return Promise.resolve(snapshot);
 				ccAccount = next;
 				// 账户变了：旧账户的在途/缓存数据立即失效，强制按新账户重拉。
@@ -806,11 +802,15 @@ window.__ModuleLoader__.load({
 			const list = [{ id: "default", label: "default" }];
 			const accounts = Array.isArray(value?.accounts) ? value.accounts : [];
 			const tasks = Array.isArray(value?.accountEnrollmentTasks) ? value.accountEnrollmentTasks : [];
+			const seen = new Set(["default"]);
 			accounts.forEach((account, index) => {
 				const refName = typeof account?.apiKeyEnv === "string" && account.apiKeyEnv.trim() !== "" ? account.apiKeyEnv.trim() : void 0;
 				// 与 slots() 一致：无凭据引用的槽位不显示；登记任务未完成的账户暂不可选。
 				if (refName === void 0) return;
+				// 配置被手改出重复引用名时只列一次：否则同一账户出现两个选项，切换后读的还是同一份额度。
+				if (seen.has(refName)) return;
 				if (tasks.some((task) => task?.ref === refName && task.phase !== "naming")) return;
+				seen.add(refName);
 				list.push({ id: refName, label: typeof account.label === "string" && account.label.trim() !== "" ? account.label.trim() : `Account ${index + 2}` });
 			});
 			return list;
@@ -830,6 +830,10 @@ window.__ModuleLoader__.load({
 			let disposed = false;
 			const listeners = new Set();
 			let state = { status: "idle", accounts: [], activeId: "", revision: null, writable: false, baseActive: "", switching: false, error: null };
+			// 设置页与药丸弹层共用同一个控制器，可能同时驱动它：`loadSequence` 标记「哪一次读取才是当前的」，
+			// `inflightLoad` 把同一代的并发 load 合并成一次 describe。没有这两样时，切换账户（mutate）在途
+			// 期间返回的旧 describe 会把 activeId/revision 覆盖回切换前的快照，两处界面一起显示旧账户。
+			let loadSequence = 0, inflightLoad = null;
 			const emit = () => { for (const fn of [...listeners]) fn(state); };
 			const parseRow = (row) => {
 				const accounts = commandCodeAccountList(row?.value);
@@ -837,18 +841,29 @@ window.__ModuleLoader__.load({
 			};
 			const load = async (keepError = false) => {
 				if (disposed) return state;
+				// 同一代的并发 load 合并：两处界面同时挂载时只发一次 describe。
+				if (inflightLoad?.sequence === loadSequence) return inflightLoad.promise;
+				const sequence = ++loadSequence;
 				state = { ...state, status: "loading", error: keepError ? state.error : null }; emit();
-				try {
-					const response = await describe();
-					if (!response?.ok) throw new Error(response?.error?.message || "settings describe failed");
-					const row = response.value?.namespaces?.find((candidate) => candidate?.ns === COMMANDCODE_SETTINGS_NS);
-					if (!row) throw new Error("Command Code settings namespace not found");
-					state = { ...state, status: "ready", writable: response.value.writable === true, ...parseRow(row) };
-				} catch (error) {
-					state = { ...state, status: "unavailable", error: String(error?.message || error) };
-				}
-				emit();
-				return state;
+				const task = (async () => {
+					try {
+						const response = await describe();
+						if (!response?.ok) throw new Error(response?.error?.message || "settings describe failed");
+						// 切换账户（mutate）或更晚的 load 已经给出更新的状态：这次的结果一律作废，
+						// 既不用旧快照覆盖，也不把状态留在 loading（mutate 那边已写回 ready）。
+						if (disposed || sequence !== loadSequence) return state;
+						const row = response.value?.namespaces?.find((candidate) => candidate?.ns === COMMANDCODE_SETTINGS_NS);
+						if (!row) throw new Error("Command Code settings namespace not found");
+						state = { ...state, status: "ready", writable: response.value.writable === true, ...parseRow(row) };
+					} catch (error) {
+						if (disposed || sequence !== loadSequence) return state;
+						state = { ...state, status: "unavailable", error: String(error?.message || error) };
+					}
+					emit();
+					return state;
+				})();
+				inflightLoad = { sequence, promise: task };
+				try { return await task; } finally { if (inflightLoad?.promise === task) inflightLoad = null; }
 			};
 			const switchTo = async (id) => {
 				if (disposed || state.status !== "ready" || state.switching) return state;
@@ -861,7 +876,10 @@ window.__ModuleLoader__.load({
 				try {
 					const response = await mutate(ops, state.revision);
 					if (!response?.ok) throw new Error(response?.error?.message || "settings mutate failed");
-					state = { ...state, switching: false, ...parseRow(response.value) };
+					// 写入成功就是权威状态：作废在途的旧 describe，并把 status 明确拉回 ready
+					// （load 开始时置的 loading 不该留在这里）。
+					loadSequence++;
+					state = { ...state, status: "ready", switching: false, ...parseRow(response.value) };
 				} catch (error) {
 					const message = String(error?.message || error);
 					state = { ...state, switching: false, error: message };
@@ -878,13 +896,20 @@ window.__ModuleLoader__.load({
 			};
 		}
 
-		/** 弹层内的 Command Code 账户切换区：自动轮换 + 默认账户 + 各额外账户。 */
+		// 未注入 cc（提供方插件未运行）时给 useSyncExternalStore 一对稳定引用：每次都新建函数
+		// 会让 React 反复重新订阅。
+		const NO_CC_STATE = () => null;
+		const NO_CC_SUBSCRIBE = () => () => {};
+		/** 弹层与设置页共用的 Command Code 账户区：自动轮换 + 默认账户 + 各额外账户。 */
 		function CommandCodeAccountSwitch({ cc, ccState, t }) {
 			if (!cc || !ccState) return null;
+			// 状态没 ready（正在读账户配置 / 不可用）时按钮不可点：switchTo 在这种状态下会直接返回，
+			// 可点的按钮换来的只是「点了没反应」。
+			const locked = ccState.switching || ccState.status !== "ready" || !ccState.writable;
 			const optionButton = (id, labelText) => h("button", {
 				type: "button",
 				onClick: () => void cc.switchTo(id),
-				disabled: ccState.switching || !ccState.writable,
+				disabled: locked,
 				"aria-pressed": ccState.activeId === id,
 				style: {
 					display: "flex", alignItems: "center", gap: 6, width: "100%", textAlign: "left",
@@ -892,7 +917,7 @@ window.__ModuleLoader__.load({
 					border: `1px solid ${ccState.activeId === id ? "rgba(59,130,246,.55)" : "rgba(128,128,128,.3)"}`,
 					background: ccState.activeId === id ? "rgba(59,130,246,.10)" : "transparent",
 					color: "inherit", font: "inherit",
-					cursor: ccState.switching || !ccState.writable ? "default" : "pointer"
+					cursor: locked ? "default" : "pointer"
 				}
 			},
 				h("span", { "aria-hidden": "true" }, ccState.activeId === id ? "●" : "○"),
@@ -901,10 +926,13 @@ window.__ModuleLoader__.load({
 			);
 			// 账户多时这一坨会把上方的额度顶出视野：折进 details，summary 只留「当前账户 + 数量」，
 			// 展开后列表自身限高滚动，弹层高度不随账户数增长。
-			const activeLabel = ccState.status !== "ready" ? null
-				: ccState.activeId === "" ? t("ccAccountAuto")
+			const activeName = ccState.status !== "ready" ? null
 				: ccState.activeId === "default" ? t("ccAccountDefault")
 				: (ccState.accounts.find(account => account.id === ccState.activeId)?.label ?? ccState.activeId);
+			// summary 直接回答「现在是哪一个账户」：固定账户写账户名 + 使用中，自动轮换写模式名。
+			const activeLabel = ccState.status !== "ready" ? null
+				: ccState.activeId === "" ? t("ccAccountAuto")
+				: `${activeName} · ${t("ccAccountActive")}`;
 			const optionCount = ccState.status === "ready" ? ccState.accounts.length + 1 : 0;
 			return h("details", { style: { marginTop: 10, paddingTop: 8, borderTop: "1px solid rgba(128,128,128,.25)" } },
 				h("summary", { style: { cursor: "pointer", fontSize: 11, opacity: 0.8 } },
@@ -920,13 +948,126 @@ window.__ModuleLoader__.load({
 			);
 		}
 
+		// ── 视觉原语：扁平 + 状态色（药丸 / 弹层 / 设置页共用同一套）────────────────
+		// 注意：下面这些都是**普通函数调用**而不是 React 组件元素——它们不用 Hook，直接内联展开，
+		// 测试里的 React 桩也能看到它们渲染出的文字。
+		const TRACK = "rgba(128,128,128,.22)";
+		const NEUTRAL = "#94a3b8";
+		const INFO = "#3b82f6";
+		/** #rrggbb → rgba(r,g,b,a)：底色与描边都由状态色派生，保证同一状态到处同一个颜色。 */
+		function alpha(color, a) {
+			const m = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(color || "");
+			return m ? `rgba(${parseInt(m[1], 16)},${parseInt(m[2], 16)},${parseInt(m[3], 16)},${a})` : `rgba(128,128,128,${a})`;
+		}
+		/** 状态色实心圆上的字形色：黄色配深字，其余白字。 */
+		function onColor(color) { return color === "#eab308" ? "#1f1300" : "#fff"; }
+		/** 状态色用作文字时的版本：纯黄在浅色主题上看不清，加深一档。 */
+		function textTone(color) { return color === "#eab308" ? "#ca8a04" : color; }
+		function windowLeft(w) { return w.status === "rate-limited" ? 0 : remainingPercent(w.percent); }
+		/** 状态色实心圆 + 字形（✓ ⚠ ✕ ? ! ⚙ ℹ …）：颜色之外还有形状，不靠颜色单独传达。 */
+		function statusGlyph(color, icon, size) {
+			return h("span", { "aria-hidden": "true", style: { flex: "none", width: size, height: size, borderRadius: "50%", background: color, color: onColor(color), display: "inline-flex", alignItems: "center", justifyContent: "center", fontSize: Math.round(size * 0.62), fontWeight: 700, lineHeight: 1 } }, icon);
+		}
+		/** 小标签：状态色圆点 + 继承前景色的文字（文字不着色，深浅主题都清晰）。 */
+		function statusChip(text, color) {
+			return h("span", { style: { display: "inline-flex", alignItems: "center", gap: 5, fontSize: 11, lineHeight: 1.5, padding: "1px 8px", borderRadius: 999, background: alpha(color, ".14"), whiteSpace: "nowrap" } },
+				h("span", { "aria-hidden": "true", style: { width: 6, height: 6, borderRadius: "50%", background: color } }), text);
+		}
+		/**
+		 * 药丸里的迷你余量条：一个窗口一根横条，满 = 100% 剩余，颜色是该窗口自己的档位色。
+		 * 条的顺序与弹层里窗口行的顺序一致，所以不用文字也能一眼对上；窗口越多条越细（最多 5 根）。
+		 */
+		function miniBars(windows, muted) {
+			const list = windows.slice(0, 5), n = list.length;
+			const barH = n <= 1 ? 6 : n === 2 ? 5 : n === 3 ? 4 : n === 4 ? 3 : 2;
+			return h("span", { "aria-hidden": "true", style: { display: "inline-flex", flexDirection: "column", justifyContent: "center", gap: n <= 2 ? 3 : 2, width: 34, flex: "none", opacity: muted ? 0.5 : 1 } },
+				list.map((w, i) => {
+					const left = windowLeft(w);
+					return h("span", { key: `${w.kind}:${i}`, style: { display: "block", height: barH, borderRadius: 99, background: TRACK, overflow: "hidden" } },
+						h("span", { style: { display: "block", width: `${left}%`, minWidth: left > 0 ? 3 : 0, height: "100%", borderRadius: 99, background: usageTier(w).color } }));
+				}));
+		}
+		/**
+		 * 订阅整体状态：一个对象回答「现在订阅怎么样」，药丸、弹层横幅、设置页横幅共用，
+		 * 所以三处永远同一个结论、同一个颜色。优先级：额度用尽 > Cookie 到期 > 需配置 > 读取失败 > 缓存/不完整 > 额度档位。
+		 * 返回 { key, color, icon, title, sub, short, tinted, ... }：
+		 *   title/sub 给弹层横幅；short 是药丸上的**一个词**（正常时为空——绿色余量条本身就是答案）；
+		 *   tinted 为真时药丸整体染色，提醒「这里需要你看一眼」。
+		 */
+		function computeStatus(rawEntry, { failed = null, failState, providerId, t, getLocale }) {
+			const entry = canShowUsage(rawEntry) ? rawEntry : null;
+			const windows = entry ? entry.windows || [] : [];
+			const worst = windows.length ? worstWindow(windows) : null;
+			const worstTier = worst ? usageTier(worst) : null;
+			const multi = windows.length > 1;
+			const degraded = !!(rawEntry && (rawEntry.state !== "ok" || rawEntry.freshness === "stale" || rawEntry.coverage === "partial"));
+			const state = rawEntry ? rawEntry.state : failState;
+			const expiry = cookieExpiry(rawEntry, t);
+			const expiring = !!(expiry && expiry.rank >= 2);
+			// 倒计时只用于展示，永远不能盖过官方接口的判定：凭据已被拒绝（state=error）时主文案仍是失败原因；
+			// 例外是已过期——它本身就是「请重新登录」的行动项。
+			const expiryActionable = expiring && (!(rawEntry && rawEntry.state === "error") || expiry.expired);
+			const windowName = (w) => t(KIND_LABEL[w.kind] ?? "wall");
+			const windowShort = (w) => multi ? `${t(KIND_SHORT[w.kind] ?? "srolling")} ` : "";
+			const windowSub = (w) => {
+				const head = t(multi ? "statusWorst" : "statusOnly").replace("{w}", windowName(w)).replace("{p}", String(windowLeft(w)));
+				const ms = w.resetsAt ? Date.parse(w.resetsAt) - Date.now() : NaN;
+				return ms > 0 ? `${head} · ${t("statusResetIn").replace("{rest}", durationText(ms, t))}` : head;
+			};
+			const needConfig = state === "no-key" ? (providerId === "commandcode" ? t("pillNeedCommandcode") : providerId === "xai-oauth" ? t("pillNeedGrok") : t("pillNeedKey"))
+				: state === "no-cookie" ? t("pillNeedCookie") : null;
+			const base = { entry, windows, worst, worstTier, multi, degraded, expiry, expiring, expiryActionable, needConfig };
+			if ((!rawEntry && !failed && !failState) || state === "loading") return { ...base, key: "loading", color: NEUTRAL, icon: "…", title: t("loading"), sub: "", short: "", tinted: false };
+			if (state === "disabled") return { ...base, key: "disabled", color: NEUTRAL, icon: "–", title: t("statusDisabled"), sub: "", short: t("statusDisabled"), tinted: false };
+			if (worstTier && worstTier.rank >= 4) {
+				const title = t(worst.cascade ? "statusBlocked" : "statusExhausted");
+				return { ...base, key: "blocked", color: worstTier.color, icon: "✕", title, sub: windowSub(worst), short: windowShort(worst) + t(worst.cascade ? "pillBlocked" : "pillLimited"), tinted: true };
+			}
+			if (expiryActionable) {
+				return { ...base, key: "cookie", color: expiry.color, icon: expiry.icon, title: expiry.label, sub: t("mimoCookieExpiresAt").replace("{time}", new Date(expiry.expiresAt).toLocaleString(getLocale())), short: expiry.label, tinted: true };
+			}
+			if (needConfig) {
+				return { ...base, key: "config", color: INFO, icon: "⚙", title: t(state === "no-key" ? "statusNoKey" : "statusNoCookie"), sub: needConfig, short: t(state === "no-key" ? "needConfigShort" : "statusNoCookie"), tinted: true };
+			}
+			if (!entry) {
+				return { ...base, key: "error", color: "#ef4444", icon: "!", title: t("statusError"), sub: failed || (rawEntry && rawEntry.error) || "", short: t("statusError"), tinted: true };
+			}
+			if (degraded) {
+				// 过期缓存即使 state=error 也要叫「缓存数据」：读取失败是原因，用户看到的是上次的数字。
+				const label = rawEntry.freshness === "stale" ? t("statusCache") : rawEntry.coverage === "partial" ? t("statusPartial") : statusText(rawEntry, t);
+				const worse = worstTier && worstTier.rank >= 3;
+				return { ...base, key: "degraded", color: worse ? worstTier.color : "#eab308", icon: "?", title: label, sub: [cacheAge(rawEntry, t), worst ? windowSub(worst) : null].filter(Boolean).join(" · "), short: label, tinted: true };
+			}
+			if (worstTier) {
+				const sub = windowSub(worst);
+				if (worstTier.rank >= 3) return { ...base, key: "tight", color: worstTier.color, icon: "⚠", title: t("statusTight"), sub, short: windowShort(worst) + t(worstTier.badge), tinted: true };
+				if (worstTier.rank === 2) return { ...base, key: "low", color: worstTier.color, icon: "⚠", title: t("statusLow"), sub, short: windowShort(worst) + t(worstTier.badge), tinted: true };
+				return { ...base, key: "ok", color: worstTier.color, icon: "✓", title: t("statusPlenty"), sub, short: "", tinted: false };
+			}
+			// 成功但没有额度窗口：只有余额（或什么都没有）。余额就是唯一信息，不画成「充足」。
+			const balance = balanceText(entry, t);
+			return { ...base, key: "balance", color: NEUTRAL, icon: "ℹ", title: balance ?? t("noUsageData"), sub: "", short: balance ?? t("noUsageData"), tinted: false };
+		}
+		/** 弹层 / 设置页顶部的状态横幅：左侧实心状态圆，右侧一句结论 + 一行依据。 */
+		function statusBanner(status) {
+			return h("div", { role: "status", style: { display: "flex", alignItems: "center", gap: 12, marginTop: 10, padding: "12px 14px", borderRadius: 12, background: alpha(status.color, ".10"), border: `1px solid ${alpha(status.color, ".28")}` } },
+				statusGlyph(status.color, status.icon, 30),
+				h("div", { style: { minWidth: 0, flex: 1 } },
+					h("div", { style: { fontSize: 15, fontWeight: 700, lineHeight: 1.3, overflowWrap: "anywhere" } }, status.title),
+					status.sub ? h("div", { style: { fontSize: 11.5, opacity: 0.75, marginTop: 2, overflowWrap: "anywhere", whiteSpace: "pre-wrap" } }, status.sub) : null));
+		}
+		/** 套餐名（extras 里 kind=plan）：放在标题行右侧做成小标签，不再混在余额明细里。 */
+		function planName(entry) {
+			const row = entry && Array.isArray(entry.extras) ? entry.extras.find((x) => x.kind === "plan") : undefined;
+			return row ? row.value : null;
+		}
 		function RemainingBar({ value, color, label }) {
 			const pct = Math.max(0, Math.min(100, Number(value) || 0));
 			return h("div", {
 				role: "progressbar",
 				"aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": pct, "aria-label": label,
-				style: { width: "100%", height: 10, marginTop: 8, borderRadius: 6, background: "rgba(148,163,184,.22)", overflow: "hidden" }
-			}, h("div", { style: { width: `${pct}%`, height: "100%", borderRadius: 6, background: color, boxShadow: pct ? "inset 0 1px 0 rgba(255,255,255,.2)" : "none" } }));
+				style: { width: "100%", height: 8, marginTop: 8, borderRadius: 99, background: TRACK, overflow: "hidden" }
+			}, h("div", { style: { width: `${pct}%`, minWidth: pct > 0 ? 4 : 0, height: "100%", borderRadius: 99, background: color } }));
 		}
 		/**
 		 * 单窗口行（药丸弹层与设置页共用）：徽标 + 余量% 主数字 + 进度条（满格=100% 剩余，随已用扣减）+ 明细行。
@@ -950,28 +1091,22 @@ window.__ModuleLoader__.load({
 				resetLine(w, t, getLocale),
 				w.cascade ? t("cascadeLimited") + (w.detail && w.detail.blockedBy ? ` [${w.detail.blockedBy.join(", ")}]` : "") : null
 			].filter(Boolean).join(" · ");
+			// 档位词只在「需要留意」时出现：充足时绿色长条与大数字已经说明一切，再贴一个「充足」只是噪音。
+			const alert = tier.rank >= 2;
+			const label = blocked ? t(tier.num) : t("pillRemaining").replace("{p}", String(left));
 			return h("div", {
-				style: {
-					marginTop: 8, padding: "8px 10px", borderRadius: 8,
-					background: blocked ? "rgba(239,68,68,.08)" : "transparent",
-					border: blocked ? "1px solid rgba(239,68,68,.35)" : "1px solid transparent"
-				}
+				style: { marginTop: 8, padding: "10px 12px", borderRadius: 10, background: blocked ? alpha(tier.color, ".09") : "rgba(128,128,128,.07)" }
 			},
 				h("div", { style: { display: "flex", alignItems: "center", gap: 8 } },
-					h("span", { style: { fontSize: 12, opacity: 0.85, minWidth: 52 } }, t(KIND_LABEL[w.kind] ?? "wall")),
-					h("span", {
-						style: {
-							fontSize: 11, padding: "1px 8px", borderRadius: 999, whiteSpace: "nowrap",
-							border: `1px solid ${tier.color}`, color: tier.color
-						}
-					}, `${tier.icon} ${t(tier.badge)}`),
+					h("span", { style: { fontSize: 12.5, fontWeight: 600 } }, t(KIND_LABEL[w.kind] ?? "wall")),
+					alert ? statusChip(t(tier.badge), tier.color) : null,
 					h("span", { style: { flex: 1 } }),
-					h("strong", { style: { fontSize: 13, color: numColor(w), whiteSpace: "nowrap" } },
-						blocked ? t(tier.num) : t("pillRemaining").replace("{p}", String(remainingPercent(w.percent))))
+					h("strong", { style: { fontSize: 18, lineHeight: 1.1, color: alert ? textTone(tier.color) : "inherit", whiteSpace: "nowrap" } }, `${left}%`),
+					h("span", { style: { fontSize: 11, opacity: 0.65, whiteSpace: "nowrap" } }, t("remainWord"))
 				),
-				RemainingBar({ value: left, color: tier.color, label: blocked ? t(tier.num) : t("pillRemaining").replace("{p}", String(remainingPercent(w.percent))) }),
+				RemainingBar({ value: left, color: tier.color, label }),
 				usageLine || resetParts
-					? h("div", { style: { fontSize: 11, opacity: 0.7, marginTop: 4 } },
+					? h("div", { style: { fontSize: 11, opacity: 0.7, marginTop: 6 } },
 						usageLine ? h("div", { style: { overflowWrap: "anywhere" } }, usageLine) : null,
 						resetParts ? h("div", { style: { marginTop: usageLine ? 2 : 0, overflowWrap: "anywhere" } }, resetParts) : null)
 					: null
@@ -1000,7 +1135,8 @@ window.__ModuleLoader__.load({
 			const root = react.useRef(null);
 			const retry = react.useRef(() => {});
 			// Command Code 账户区：cc 由装配层注入（提供方插件未运行时为 null，区块整体隐藏）。
-			const ccState = react.useSyncExternalStore(cc ? cc.subscribe : () => () => {}, cc ? cc.getSnapshot : () => null);
+			// 兜底用模块级稳定引用（NO_CC_*）：内联箭头函数每次渲染都是新引用，会让 React 反复重新订阅。
+			const ccState = react.useSyncExternalStore(cc ? cc.subscribe : NO_CC_SUBSCRIBE, cc ? cc.getSnapshot : NO_CC_STATE, cc ? cc.getSnapshot : NO_CC_STATE);
 			react.useEffect(() => { if (open && cc) void cc.load(); }, [open, cc]);
 			// 挂载即读一次账户配置：提供方插件固定了账户时，药丸本体不必等弹层打开就跟随。
 			react.useEffect(() => { if (providerId === "commandcode" && cc) void cc.load(); }, [providerId, cc]);
@@ -1070,72 +1206,55 @@ window.__ModuleLoader__.load({
 			}, [open]);
 			const rawEntry = snapshot && snapshot.entry;
 			if (rawEntry?.visible === false || rawEntry?.state === "disabled") return null;
-			const entry = canShowUsage(rawEntry) ? rawEntry : null;
-			const ok = !!(rawEntry && rawEntry.state === "ok" && rawEntry.freshness !== "stale" && rawEntry.coverage !== "partial");
-			const light = ok ? "🟢" : (snapshot !== null || failed !== null ? "🔴" : "🟡");
-			const windows = entry ? entry.windows || [] : [];
-			const worst = windows.length > 0 ? worstWindow(windows) : null;
-			const worstTier = worst ? usageTier(worst) : null;
-			const degraded = !!(rawEntry && (rawEntry.state !== "ok" || rawEntry.freshness === "stale" || rawEntry.coverage === "partial"));
+			// 整体状态由 computeStatus 一处判定：药丸、弹层横幅、设置页横幅读的是同一个结论。
+			const st = computeStatus(rawEntry, { failed, failState, providerId, t, getLocale });
+			const { entry, windows, worst, degraded, expiry, expiring } = st;
 			const summary = worst ? pillText(worst, windows.length > 1, t) : entry ? (balanceText(entry, t) ?? t("noUsageData")) : t("providerUnavailable");
-			const stateText = !ok ? (snapshot && snapshot.entry ? snapshot.entry.state : failState) : void 0;
-			const stateLabel = rawEntry ? statusText(rawEntry, t) : failState === "no-key" ? t("statusNoKey") : failState === "no-cookie" ? t("statusNoCookie") : failed ? t("statusError") : t("loading");
-			// 配置缺失类失败给可行动指引，不倒裸报错。
-			const needConfig = stateText === "no-key" ? (providerId === "commandcode" ? t("pillNeedCommandcode") : providerId === "xai-oauth" ? t("pillNeedGrok") : t("pillNeedKey"))
-				: stateText === "no-cookie" ? t("pillNeedCookie")
-				: null;
-			const isConfig = stateText === "no-key" || stateText === "no-cookie";
-			// 余额请求成功不代表有额度窗口（例如小米接口暂时只返回余额）。
-			// Cookie 临近到期是需要重新登录的行动项：除额度已用尽外，优先于普通余量与降级提示。
-			const expiry = cookieExpiry(rawEntry, t);
-			const quotaBlocked = !!(worstTier && worstTier.rank >= 4);
-			const expiring = !!(expiry && expiry.rank >= 2);
-			// 倒计时只用于展示，永远不能盖过官方接口的判定：凭据已被拒绝（state=error）时
-			// 主文案必须仍是失败原因，否则「还有 2 小时到期」会把重新登录推迟掉。
-			// 例外是已过期：它本身就是「请重新登录」的行动项，比通用错误文案更具体。
-			const expiryActionable = expiring && (!(rawEntry && rawEntry.state === "error") || (expiry && expiry.expired));
-			// 底色与文字沿用额度告警语汇：已过期与额度用尽同为红，30 分钟内为橙，2 小时内为黄。
-			const alertStyle = quotaBlocked || (expiry && expiry.expired) ? { background: "rgba(239,68,68,.10)", borderColor: "rgba(239,68,68,.45)" } : expiryActionable && expiry.rank >= 3 ? { background: "rgba(249,115,22,.10)", borderColor: "rgba(249,115,22,.45)" } : expiryActionable ? { background: "rgba(234,179,8,.10)", borderColor: "rgba(234,179,8,.45)" } : {};
-			const triggerColor = quotaBlocked ? worstTier.color : expiryActionable ? expiry.color : worstTier && worstTier.rank > 1 ? worstTier.color : null;
-			const triggerIcon = quotaBlocked ? worstTier.icon : expiryActionable ? expiry.icon : degraded ? "⚠" : worstTier ? worstTier.icon : ok ? "ℹ" : isConfig ? "⚙" : light;
-			const triggerText = quotaBlocked ? (worst ? pillText(worst, windows.length > 1, t) : entry ? t("noUsageData") : stateLabel) : expiryActionable ? expiry.label : worst ? `${degraded ? statusText(rawEntry, t) + " · " : ""}${pillText(worst, windows.length > 1, t)}` : entry ? `${degraded ? stateLabel + " · " : ""}${(balanceText(entry, t) ?? t("noUsageData"))}` : isConfig ? t("needConfigShort") : stateLabel;
+			// 药丸只回答「订阅现在怎么样」：状态图形 + 至多一个词。正常时只剩彩色余量条——
+			// 厂商名就是旁边的模型选择器，具体百分比点开再看；文字与数字都收进 title / aria-label。
+			const tip = `${label}: ${st.title}${st.key === "ok" || st.key === "low" || st.key === "tight" || st.key === "blocked" || st.key === "degraded" ? " · " + summary : ""}${expiring && st.key !== "cookie" && st.key !== "blocked" ? " · " + expiry.label : ""}`;
+			// 有窗口就画迷你余量条：Cookie 到期等行动项通过 short 文案表达，不牺牲余量信息；
+			// 只有没有任何额度窗口时（需配置 / 失败 / 仅余额）才退回状态字形。
+			const glyph = windows.length ? miniBars(windows, degraded) : statusGlyph(st.color, st.icon, 16);
 			return h("span", { ref: root, style: { position: "relative", display: "inline-flex", alignItems: "center" } },
 				h("button", {
 					type: "button",
 					"aria-expanded": open,
 					"aria-haspopup": "dialog",
-					"aria-label": `${label}: ${stateLabel} · ${summary}${expiring && !quotaBlocked ? " · " + expiry.label : ""}`,
-					title: `${label}: ${stateLabel} · ${summary}${expiring && !quotaBlocked ? " · " + expiry.label : ""}`,
+					"aria-label": tip,
+					title: tip,
 					onClick: () => setOpen(!open),
 					style: {
-						display: "inline-flex", alignItems: "center", gap: 6, padding: "4px 10px",
-						borderRadius: 999, border: "1px solid rgba(128,128,128,.35)", background: "transparent",
-						color: "inherit", font: "inherit", cursor: "pointer", whiteSpace: "nowrap",
-						...alertStyle
+						display: "inline-flex", alignItems: "center", gap: 8, padding: st.short ? "4px 11px 4px 9px" : "5px 10px", minHeight: 26, boxSizing: "border-box",
+						borderRadius: 999, border: `1px solid ${st.tinted ? alpha(st.color, ".45") : "rgba(128,128,128,.3)"}`,
+						background: st.tinted ? alpha(st.color, ".10") : "transparent",
+						color: "inherit", font: "inherit", fontSize: 12, fontWeight: 600, cursor: "pointer", whiteSpace: "nowrap"
 					}
 				},
-					h("span", { "aria-hidden": "true", style: { fontSize: 11, lineHeight: 1 } }, triggerIcon),
-					h("span", { style: triggerColor ? { color: triggerColor } : null }, triggerText),
-					failed && ok ? h("span", { style: { opacity: 0.7, fontSize: 11 } }, `(${t("unavailable")})`) : null
+					glyph,
+					st.short ? h("span", null, st.short) : null
 				),
 				open && h("div", {
 					role: "dialog",
 					"aria-label": `${label} ${t("nav")}`,
 					style: {
 						position: "absolute", bottom: "calc(100% + 6px)", right: 0, zIndex: 50,
-						width: "min(340px, calc(100vw - 24px))", boxSizing: "border-box", overflowWrap: "anywhere", padding: 12, borderRadius: 10,
+						width: "min(340px, calc(100vw - 24px))", boxSizing: "border-box", overflowWrap: "anywhere", padding: 14, borderRadius: 14,
 						background: "var(--dsh-surface, Canvas)", color: "var(--dsh-text, CanvasText)",
-						border: "1px solid rgba(128,128,128,.35)",
-						boxShadow: "0 8px 24px rgba(0,0,0,.35)", font: "12px/1.6 sans-serif"
+						border: "1px solid rgba(128,128,128,.28)",
+						boxShadow: "0 12px 32px rgba(0,0,0,.28)", font: "12px/1.5 sans-serif"
 					}
 				},
-					h("strong", null, label),
-					needConfig ? h("p", { style: { margin: "6px 0 0", opacity: 0.9 } }, needConfig) : null,
-					failed && !needConfig ? h("p", { style: { color: "#f87171", margin: "6px 0 0", whiteSpace: "pre-wrap" } }, failed) : null,
-					!ok && !snapshot && !failed ? h("p", { style: { margin: "6px 0 0", opacity: 0.8 } }, t("loading")) : null,
-					cacheAge(rawEntry, t) ? h("p", { style: { color: "#b7791f" } }, cacheAge(rawEntry, t)) : null,
-					// 到期提醒常驻弹层：即使用量正常，也让用户看见 Cookie 还剩多久。
-					expiry ? h("p", { role: "status", style: { margin: "6px 0 0", color: expiring ? expiry.color : "inherit" } }, `${expiry.label} · ${t("mimoCookieExpiresAt").replace("{time}", new Date(expiry.expiresAt).toLocaleString(getLocale()))}`) : null,
+					// 标题行：厂商名 + 套餐名小标签。
+					h("div", { style: { display: "flex", alignItems: "center", gap: 8 } },
+						h("strong", { style: { fontSize: 13 } }, label),
+						h("span", { style: { flex: 1 } }),
+						planName(entry) ? h("span", { style: { fontSize: 11, fontWeight: 600, padding: "1px 8px", borderRadius: 999, background: "rgba(128,128,128,.16)", whiteSpace: "nowrap" } }, planName(entry)) : null),
+					// 状态横幅：先给结论（充足 / 偏少 / 即将用尽 / 已用尽 / 需配置 / 失败…）与一行依据。
+					statusBanner(st),
+					failed && st.key !== "error" && !st.needConfig ? h("p", { style: { color: "#f87171", margin: "8px 0 0", whiteSpace: "pre-wrap" } }, failed) : null,
+					// Cookie 到期常驻弹层：即使用量正常，也让用户看见 Cookie 还剩多久（已在横幅里说明时不重复）。
+					expiry && st.key !== "cookie" ? h("p", { role: "status", style: { margin: "8px 0 0", fontSize: 11, color: expiring ? textTone(expiry.color) : "inherit", opacity: expiring ? 1 : 0.75 } }, `${expiry.label} · ${t("mimoCookieExpiresAt").replace("{time}", new Date(expiry.expiresAt).toLocaleString(getLocale()))}`) : null,
 					// 用量账户标注：账户区 ready 时说明上方数字属于哪个账户；自动轮换时明确不跟随实际服务账户。
 					providerId === "commandcode" && ccState && ccState.status === "ready"
 						? h("p", { style: { margin: "6px 0 0", fontSize: 11, opacity: 0.75 } },
@@ -1145,18 +1264,24 @@ window.__ModuleLoader__.load({
 					// 额度线切换时插一条分组标题：AFP 的日限额只覆盖视觉 / 语音模型与 Harness，与文本模型的
 					// 5 小时 / 周 / 月不是同一条线，混排会让人把两条线的配额当成一组来互相比较。
 					UsageWindowList({ windows, t, getLocale, uncertain: degraded }),
-					entry && entry.extras && entry.extras.length > 0
-						? h("div", { style: { marginTop: 10, opacity: 0.85 } },
-							entry.extras.map((x) => h("div", { key: x.kind }, `${extraLabel(x, t)}: ${x.value}`)))
+					// 余额等补充项：套餐名已在标题行，这里只剩「标签 … 数值」两列。
+					entry && entry.extras && entry.extras.some((x) => x.kind !== "plan")
+						? h("div", { style: { marginTop: 10, padding: "6px 12px", borderRadius: 10, background: "rgba(128,128,128,.07)" } },
+							entry.extras.filter((x) => x.kind !== "plan").map((x) => h("div", { key: x.kind, style: { display: "flex", justifyContent: "space-between", gap: 12, padding: "3px 0" } },
+								h("span", { style: { opacity: 0.7 } }, extraLabel(x, t)),
+								h("strong", { style: { fontWeight: 600, textAlign: "right" } }, x.value))))
 						: null,
 					providerId === "commandcode" ? h(CommandCodeAccountSwitch, { cc, ccState, t }) : null,
-					snapshot ? h("div", { style: { marginTop: 10, opacity: 0.7 } }, `${t("lastUpdated")} ${new Date(snapshot.updatedAt).toLocaleString(getLocale())}`) : null,
-					h("button", {
-						type: "button",
-						onClick: () => retry.current(),
-						disabled: refreshing,
-						style: { marginTop: 10, padding: "4px 12px", borderRadius: 6, border: "1px solid rgba(128,128,128,.5)", background: "transparent", color: "inherit", cursor: "pointer" }
-					}, t(refreshing ? "refreshing" : "retry"))
+					// 页脚：更新时间 + 刷新。
+					h("div", { style: { display: "flex", alignItems: "center", gap: 8, marginTop: 12 } },
+						h("span", { style: { flex: 1, minWidth: 0, fontSize: 11, opacity: 0.6 } }, snapshot ? `${t("lastUpdated")} ${new Date(snapshot.updatedAt).toLocaleString(getLocale())}` : ""),
+						h("button", {
+							type: "button",
+							onClick: () => retry.current(),
+							disabled: refreshing,
+							style: { padding: "4px 12px", borderRadius: 8, border: "none", background: alpha(INFO, ".14"), color: "inherit", font: "inherit", fontWeight: 600, cursor: refreshing ? "default" : "pointer", whiteSpace: "nowrap" }
+						}, t(refreshing ? "refreshing" : "refresh"))
+					)
 				)
 			);
 		}
@@ -1212,8 +1337,11 @@ window.__ModuleLoader__.load({
 			}
 			return patch;
 		}
-		function SubusageSection({ usageStore, t, getLocale }) {
+		function SubusageSection({ usageStore, t, getLocale, cc }) {
 			const result = react.useSyncExternalStore(usageStore.subscribe, usageStore.getSnapshot, usageStore.getSnapshot);
+			// Command Code 账户区：与弹层共用同一个控制器与组件；cc 由装配层注入，
+			// 提供方插件未运行时为 undefined，区块整体隐藏。
+			const ccState = react.useSyncExternalStore(cc ? cc.subscribe : NO_CC_SUBSCRIBE, cc ? cc.getSnapshot : NO_CC_STATE, cc ? cc.getSnapshot : NO_CC_STATE);
 			const [tab, setTab] = react.useState(initialTab);
 			const [draft, setDraft] = react.useState(() => draftFor(result.settings, tab));
 			const [dirty, setDirty] = react.useState(false);
@@ -1371,6 +1499,7 @@ window.__ModuleLoader__.load({
 			const usageMeta = PROVIDER_META[usageId];
 			// 需要行动时（缺凭据/凭据被拒/Cookie 即将到期）在用量面板里内联修复入口。
 			const usageAction = usageActionKind(usageEntry, usageId, t);
+			const usageStatus = computeStatus(usageEntry, { failed: usageEntry && usageEntry.state !== "ok" ? usageEntry.error || usageEntry.state : null, failState: usageEntry && usageEntry.state, providerId: usageId, t, getLocale });
 			// 行动按钮把人送到对应厂商的凭据编辑器：展开管理区、打开该行、滚动过去。
 			const revealEditor = (target) => {
 				openEditor(target);
@@ -1384,6 +1513,21 @@ window.__ModuleLoader__.load({
 				void usageStore.refresh([usageId], false).catch(() => {});
 				return deactivate;
 			}, [usageStore, usageId]);
+			// 设置页里的账户区与弹层共用同一个控制器：挂载即读一次账户配置，切到 Command Code
+			// 那一屏就有数据可显示（读取只是一次 settings describe，不发任何计费请求）。
+			react.useEffect(() => {
+				if (!cc) return;
+				void cc.load();
+			}, [cc]);
+			// 账户区 ready 后把当前固定账户同步为显示账户：设置页里切换账户后，上方面板与药丸
+			// 一起改看所选账户的额度（与弹层的同步行为一致）。自动轮换（activeId 为空）同步为
+			// 默认账户，store 内部对相同账户去重，不产生多余请求。
+			react.useEffect(() => {
+				if (usageId !== "commandcode" || !ccState || ccState.status !== "ready") return;
+				// 旧 store stub / 更早版本的客户端装配没有这个方法：缺了就不同步，不影响其他功能。
+				if (typeof usageStore.setCommandCodeAccount !== "function") return;
+				void usageStore.setCommandCodeAccount(ccState.activeId).catch(() => {});
+			}, [usageStore, usageId, ccState && ccState.status, ccState && ccState.activeId]);
 			const meta = PROVIDER_META[tab];
 			const source = entry && entry.keySource || "none";
 			// auth-file 有三家（Grok / Codex / Command Code），凭据来源文件各不相同，不能只特判一家。
@@ -1503,6 +1647,9 @@ window.__ModuleLoader__.load({
 				h("div", { className: "subusage-provider-tabs", role: "tablist", "aria-label": text("模型商", "Providers"), style: { display: "flex", flexWrap: "wrap", gap: 4, marginTop: 14 } },
 					visibleIds.map((id, index) => {
 						const e = entries.find((item) => item.providerId === id), active = usageId === id;
+						// 标签圆标与面板/药丸读同一个 computeStatus：缺凭据是蓝 ⚙ 而不是红 !，
+						// 无窗口成功是中性 ℹ 而不是绿 ?（没有额度窗口不能默认标绿）。
+						const tabStatus = computeStatus(e, { failed: e && e.state !== "ok" ? e.error || e.state : null, failState: e && e.state, providerId: id, t, getLocale });
 						return h("button", { key: id, id: `subusage-tab-${id}`, role: "tab", type: "button", tabIndex: active || (!visibleIds.includes(usageId) && index === 0) ? 0 : -1, "aria-selected": active,
 							"aria-controls": "subusage-provider-panel", title: `${PROVIDER_META[id].label}: ${providerDescription(e, t)}`, "aria-label": `${PROVIDER_META[id].short}: ${providerDescription(e, t)}`,
 							onClick: () => chooseUsage(id), onKeyDown: (event) => {
@@ -1512,20 +1659,33 @@ window.__ModuleLoader__.load({
 								else if (event.key === "Home") next = 0; else if (event.key === "End") next = visibleIds.length - 1; else return;
 								event.preventDefault(); chooseUsage(visibleIds[next]);
 								const button = event.currentTarget.parentElement.querySelectorAll('[role="tab"]')[next]; if (button) button.focus();
-							}, style: { ...btnStyle, minWidth: 0, padding: "7px 10px", whiteSpace: "nowrap", fontSize: 12, borderRadius: "6px 6px 0 0", border: "1px solid transparent", borderBottom: active ? "2px solid #3b82f6" : "2px solid transparent", background: active ? "rgba(59,130,246,.10)" : "transparent" }
-						}, h("span", { "aria-hidden": true, style: { display: "inline-block", width: 6, height: 6, marginRight: 4, borderRadius: 99, background: tagColor(e) } }), h("span", { "aria-hidden": true, style: { marginRight: 3 } }, providerIcon(e)), PROVIDER_META[id].short);
+							}, style: { ...btnStyle, display: "inline-flex", alignItems: "center", gap: 6, minWidth: 0, padding: "5px 12px 5px 8px", whiteSpace: "nowrap", fontSize: 12, fontWeight: active ? 600 : 400, borderRadius: 999, border: "1px solid transparent", background: active ? alpha(INFO, ".16") : "transparent" }
+						}, statusGlyph(tabStatus.color, tabStatus.icon, 14), PROVIDER_META[id].short);
 					})),
-				!!usageId ? h("section", { role: "tabpanel", id: "subusage-provider-panel", "aria-label": usageMeta.label, style: { marginTop: 12, border: "1px solid rgba(128,128,128,.25)", borderRadius: 10, padding: 14 } },
-					h("strong", null, usageMeta.label),
-					h("p", { role: "status", style: { margin: "4px 0", color: usageEntry && usageEntry.state !== "ok" ? "#dc2626" : "inherit" } }, statusText(usageEntry, t)),
-					cacheAge(usageEntry, t) ? h("p", { style: { color: "#b7791f" } }, cacheAge(usageEntry, t)) : null,
-					usageEntry && usageEntry.error ? h("p", { role: "alert", style: { color: "#dc2626", overflowWrap: "anywhere" } }, usageEntry.error) : null,
+				!!usageId ? h("section", { role: "tabpanel", id: "subusage-provider-panel", "aria-label": usageMeta.label, style: { marginTop: 12, border: "1px solid rgba(128,128,128,.25)", borderRadius: 14, padding: 16 } },
+					h("div", { style: { display: "flex", alignItems: "center", gap: 8 } },
+						h("strong", { style: { fontSize: 14 } }, usageMeta.label),
+						h("span", { style: { flex: 1 } }),
+						planName(usageEntry) ? h("span", { style: { fontSize: 11, fontWeight: 600, padding: "1px 8px", borderRadius: 999, background: "rgba(128,128,128,.16)", whiteSpace: "nowrap" } }, planName(usageEntry)) : null),
+					// 一眼结论：与药丸、弹层同一个状态判定。读取成功只说明接口健康，额度档位另有结论。
+					statusBanner(usageStatus),
+					usageEntry && usageEntry.error && usageStatus.key !== "error" ? h("p", { role: "alert", style: { color: "#dc2626", overflowWrap: "anywhere" } }, usageEntry.error) : null,
 					usageAction ? h("div", { role: "group", "aria-label": text("建议操作", "Suggested action"), style: { display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap", margin: "10px 0", padding: "8px 10px", border: "1px solid rgba(234,179,8,.45)", borderRadius: 8, background: "rgba(234,179,8,.08)" } },
 						h("span", { style: { flex: 1, minWidth: 150, fontSize: 12 } }, usageAction === "mimo-relogin" ? text("Cookie 已过期，重新登录即可恢复。", "Cookie expired — sign in again to restore.") : usageAction === "mimo-login" ? text("需要登录 MiMo（或 Cookie 即将到期）。", "MiMo sign-in needed (or the cookie is about to expire).") : text("这家还没有可用的凭据。", "No usable credentials for this provider.")),
 						usageAction !== "credentials" ? h("button", { type: "button", style: primary, disabled: busy || loginActive, onClick: startLogin }, usageAction === "mimo-relogin" ? text("重新登录", "Sign in again") : text("登录并自动导入", "Sign in & import")) : null,
 						h("button", { type: "button", style: usageAction === "credentials" ? primary : btnStyle, disabled: busy, onClick: () => revealEditor(usageId) }, usageAction === "credentials" ? text("配置凭据", "Configure credentials") : text("手动填写", "Enter manually"))) : null,
-					canShowUsage(usageEntry) && (usageEntry.windows || []).length ? UsageWindowList({ windows: usageEntry.windows, t, getLocale, uncertain: usageEntry.coverage === "partial" || usageEntry.freshness === "stale" || usageEntry.state !== "ok" }) : h("p", { style: { opacity: .75 } }, usageEntry ? t("noUsageData") : t("loading")),
-					canShowUsage(usageEntry) && usageEntry.extras ? h("p", { style: { opacity: .75 } }, usageEntry.extras.map((x) => `${extraLabel(x, t)}: ${x.value}`).join(" · ")) : null,
+					// 无窗口时的占位只给「成功但既无窗口也无余额」：余额/加载/需配置/失败等状态横幅已经说明，不再叠加「暂无额度数据」。
+					canShowUsage(usageEntry) && (usageEntry.windows || []).length ? UsageWindowList({ windows: usageEntry.windows, t, getLocale, uncertain: usageEntry.coverage === "partial" || usageEntry.freshness === "stale" || usageEntry.state !== "ok" })
+						: usageStatus.key === "balance" && !(usageStatus.entry && balanceText(usageStatus.entry, t)) ? h("p", { style: { opacity: .75 } }, t("noUsageData")) : null,
+					canShowUsage(usageEntry) && usageEntry.extras && usageEntry.extras.some((x) => x.kind !== "plan")
+						? h("div", { style: { marginTop: 10, padding: "6px 12px", borderRadius: 10, background: "rgba(128,128,128,.07)" } },
+							usageEntry.extras.filter((x) => x.kind !== "plan").map((x) => h("div", { key: x.kind, style: { display: "flex", justifyContent: "space-between", gap: 12, padding: "3px 0" } },
+								h("span", { style: { opacity: 0.7 } }, extraLabel(x, t)),
+								h("strong", { style: { fontWeight: 600, textAlign: "right" } }, x.value))))
+						: null,
+					// 账户区与药丸弹层同一个组件、同一个控制器：设置页里也能切换 activeAccount，
+					// 不必再跳去 Command Code 提供方插件的设置页。提供方插件未运行时整区降级。
+					usageId === "commandcode" ? h(CommandCodeAccountSwitch, { cc, ccState, t }) : null,
 					usageEntry?.lastAttemptAt ? h("p", { style: { opacity: .65 } }, `${t("lastUpdated")} ${new Date(usageEntry.lastAttemptAt).toLocaleString(getLocale())}`) : null
 				) : null,
 				providerManagement
@@ -1578,7 +1738,7 @@ window.__ModuleLoader__.load({
 			ctx.inject(["remote.settings"], (settingsCtx) => { ccSettingsNamespace = settingsCtx.remote.settings; });
 			ctx.effect(() => () => cc.dispose(), "dsh-subusage: commandcode account switch");
 			try {
-				ctx.slots.inject("settings.section", () => ctx.slots.register({ name: "settings.section", id: "subusage", order: 22, label: () => t("nav"), inject: () => ({ usageStore, t, getLocale }) }, SubusageSection));
+				ctx.slots.inject("settings.section", () => ctx.slots.register({ name: "settings.section", id: "subusage", order: 22, label: () => t("nav"), inject: () => ({ usageStore, t, getLocale, cc }) }, SubusageSection));
 			} catch (error) { console.error("[dsh-subusage] 设置页注册失败:", error); }
 			ctx.inject(["modelDirectories"], (scope) => {
 				try {