dsh-subscriptions 0.1.1 → 0.1.3

package/lib/client.js

@@ -114,6 +114,30 @@ const en = {
 	usageMonthly: "Monthly",
 	usageWindow: "Window",
 	usageResets: "resets {date}",
+	usageMeterUsed: "Used {used}% · Remaining {remaining}%",
+	usageMeterPace: "Time elapsed {elapsed}% (vertical marker)",
+	usageMeterPaceAhead: "{points} points ahead of pace",
+	usageMeterPaceBehind: "{points} points behind pace",
+	usageMeterPaceEven: "On pace",
+	usageMeterInvalid: "Quota unavailable",
+	usageMeterStale: "Reading is stale or unavailable; refresh to confirm",
+	usageMeterNearLimit: "Near exhaustion",
+	usageMeterAhead: "Usage ahead of pace",
+	usageMeterNoWarning: "No quota warning",
+	usageMeterUnknownTime: "Time progress unknown",
+	usageMeterReset: "Resets in {duration}",
+	usageUnitDay: "{count} day",
+	usageUnitDays: "{count} days",
+	usageUnitHour: "{count} hour",
+	usageUnitHours: "{count} hours",
+	usageUnitMinute: "{count} minute",
+	usageUnitMinutes: "{count} minutes",
+	usageColorLabel: "Usage coloring",
+	usageColorStandard: "Standard (default · 10-point lead)",
+	usageColorRelaxed: "Relaxed (15-point lead)",
+	usageColorRemaining: "Remaining quota only (no yellow)",
+	usageColorPaceHint: "Yellow when usage leads elapsed time by {allowance} points; red at 90% used takes priority. Saved in this browser; only colors change.",
+	usageColorRemainingHint: "Red at 90% used; no yellow pace warnings. Reliable time markers remain visible. Saved in this browser.",
 	usagePlan: "Plan: {plan}",
 	externalUsageTitle: "Built-in provider usage",
 	externalUsageConnected: "API key configured",
@@ -166,8 +190,9 @@ const en = {
 	usageBadgeTitle: "Provider usage",
 	usageBadgeDisplay: "Status-bar quota display",
 	usageBadgeDisplayRecent: "Current / most recent provider with usage",
+	usageBadgeDisplayAlways: "Always show one provider, rotating through the rest",
 	usageBadgeDisplayHidden: "Hidden",
-	usageBadgeDisplayHint: "Saved automatically in this browser. One provider is shown at a time. Models without a quota source keep the most recent provider selected in this view, or show nothing. Hiding does not affect usage details here.",
+	usageBadgeDisplayHint: "Saved automatically in this browser. One provider is shown at a time. Models without a quota source keep the most recent provider selected in this view, or show nothing. Always show instead rotates through the providers with usage every 10 seconds while the current model has no quota source. Hiding does not affect usage details here.",
 	usageBadgeDisplaySaveFailed: "Could not save the display preference. Check browser storage permissions.",
 	usageBadgeCurrent: "current",
 	usageBadgeModelCount: "{count} model quotas",
@@ -261,6 +286,30 @@ const zh = {
 	usageMonthly: "每月",
 	usageWindow: "窗口",
 	usageResets: "{date} 重置",
+	usageMeterUsed: "已用 {used}% · 剩余 {remaining}%",
+	usageMeterPace: "时间已过 {elapsed}%（竖线标记）",
+	usageMeterPaceAhead: "领先时间进度 {points} 个百分点",
+	usageMeterPaceBehind: "落后时间进度 {points} 个百分点",
+	usageMeterPaceEven: "与时间进度一致",
+	usageMeterInvalid: "额度数据不可用",
+	usageMeterStale: "读数已陈旧或不可用，请刷新确认",
+	usageMeterNearLimit: "额度接近耗尽",
+	usageMeterAhead: "用量领先时间进度",
+	usageMeterNoWarning: "未触发额度警告",
+	usageMeterUnknownTime: "时间进度未知",
+	usageMeterReset: "{duration}后重置",
+	usageUnitDay: "{count} 天",
+	usageUnitDays: "{count} 天",
+	usageUnitHour: "{count} 小时",
+	usageUnitHours: "{count} 小时",
+	usageUnitMinute: "{count} 分钟",
+	usageUnitMinutes: "{count} 分钟",
+	usageColorLabel: "用量配色",
+	usageColorStandard: "标准（默认 · 领先 10 个百分点）",
+	usageColorRelaxed: "宽松（领先 15 个百分点）",
+	usageColorRemaining: "仅剩余额度（不显示黄色）",
+	usageColorPaceHint: "用量领先时间进度 {allowance} 个百分点时变黄；已用达到 90% 时优先变红。自动保存到当前浏览器，仅改变配色。",
+	usageColorRemainingHint: "已用达到 90% 时变红，不显示黄色节奏警告。可靠的时间标记仍保留，自动保存到当前浏览器。",
 	usagePlan: "计划：{plan}",
 	externalUsageTitle: "内置供应商用量",
 	externalUsageConnected: "已配置 API 密钥",
@@ -313,8 +362,9 @@ const zh = {
 	usageBadgeTitle: "服务商用量",
 	usageBadgeDisplay: "状态栏额度显示",
 	usageBadgeDisplayRecent: "仅显示当前／最近使用的用量服务商",
+	usageBadgeDisplayAlways: "始终显示一家，其余服务商轮播",
 	usageBadgeDisplayHidden: "不显示",
-	usageBadgeDisplayHint: "自动保存到当前浏览器。状态栏一次显示一家服务商；没有额度来源的模型沿用本视图最近选择的服务商，没有记录则隐藏。关闭不影响本页的额度详情。",
+	usageBadgeDisplayHint: "自动保存到当前浏览器。状态栏一次显示一家服务商；没有额度来源的模型沿用本视图最近选择的服务商，没有记录则隐藏。选择“始终显示”时，当前模型没有额度来源，就每 10 秒轮播一家有额度的服务商。关闭不影响本页的额度详情。",
 	usageBadgeDisplaySaveFailed: "显示设置保存失败，请检查浏览器存储权限。",
 	usageBadgeCurrent: "当前",
 	usageBadgeModelCount: "{count} 个模型配额",
@@ -1342,17 +1392,6 @@ const subscriptionCardStyles = {
 		fontSize: 12,
 		lineHeight: "18px",
 		color: "var(--dsw-alias-label-tertiary)"
-	},
-	usageTrack: {
-		height: 6,
-		borderRadius: 3,
-		overflow: "hidden",
-		background: "var(--dsw-alias-bg-layer-1)",
-		border: "1px solid var(--dsw-alias-border-l2)"
-	},
-	usageFill: {
-		height: "100%",
-		borderRadius: 3
 	}
 };
 
@@ -1365,7 +1404,8 @@ const USAGE_BADGE_REFRESH_EVENT = "dsh:subscriptions:usage-refresh";
 function readUsageBadgeMode() {
 	if (typeof window === "undefined") return "recent";
 	try {
-		return window.localStorage.getItem(MODE_KEY) === "hidden" ? "hidden" : "recent";
+		const value = window.localStorage.getItem(MODE_KEY);
+		return value === "hidden" || value === "always" ? value : "recent";
 	} catch (error) {
 		if (!(error instanceof DOMException) || error.name !== "SecurityError") throw error;
 		return "recent";
@@ -1373,7 +1413,7 @@ function readUsageBadgeMode() {
 }
 /** Save first, then notify; the settings control reports a rejected write. */
 function setUsageBadgeMode(mode) {
-	if (mode !== "recent" && mode !== "hidden") throw new TypeError("Invalid subscription usage display mode");
+	if (mode !== "recent" && mode !== "always" && mode !== "hidden") throw new TypeError("Invalid subscription usage display mode");
 	window.localStorage.setItem(MODE_KEY, mode);
 	window.dispatchEvent(new Event(MODE_EVENT));
 }
@@ -1394,30 +1434,233 @@ function useUsageBadgeMode() {
 	return (0, react.useSyncExternalStore)(subscribeUsageBadgeMode, readUsageBadgeMode, () => "recent");
 }
 
+//#endregion
+//#region src/client/usage-pace.ts
+const USAGE_FRESHNESS_MS = 5 * 6e4;
+function validUsage(used) {
+	return Number.isFinite(used) && used >= 0 && used <= 100;
+}
+/**
+* Rounded share for display, or undefined when the provider's number is
+* unusable. Callers must show the unavailable state rather than clamp an
+* out-of-range reading into 0% or 100%.
+*/
+function displayUsedPercent(used) {
+	return validUsage(used) ? Math.round(used) : void 0;
+}
+/**
+* Reset countdown as the two largest nonzero whole units, rounded up so a
+* window never announces zero remaining time. Always at least one minute.
+*/
+function resetCountdownParts(ms) {
+	const total = Math.max(1, Math.ceil(ms / 6e4));
+	return [
+		{
+			unit: "day",
+			count: Math.floor(total / 1440)
+		},
+		{
+			unit: "hour",
+			count: Math.floor(total % 1440 / 60)
+		},
+		{
+			unit: "minute",
+			count: total % 60
+		}
+	].filter((part) => part.count > 0).slice(0, 2);
+}
+/**
+* Whether the reported percentage still describes the window now. Only a fresh
+* reading may be compared with the current time (pace warnings); an old one
+* keeps its absolute color. This does not decide whether the time cursor is
+* drawn: where the window stands in time never depends on the reading.
+*/
+function isUsageFresh(window$1, observation, now = Date.now()) {
+	return validUsage(window$1.usedPercent) && observation.stale !== true && observation.observedAt !== void 0 && Number.isFinite(observation.observedAt) && observation.observedAt <= now && now - observation.observedAt <= USAGE_FRESHNESS_MS && (window$1.resetsAt === void 0 || Number.isFinite(window$1.resetsAt) && window$1.resetsAt > now);
+}
+/**
+* How far through its window the clock is, from the window's own timing alone.
+* It ignores the percentage and how recently it was read, so an unused,
+* stale, aged or unobserved reading keeps its cursor whenever the timing
+* places it. Returns undefined when the timing cannot: only an explicit
+* interval or a provider-verified fixed duration supports linear pace, and no
+* start is invented from a window's kind or label.
+*/
+function elapsedPercent(window$1, now = Date.now()) {
+	const end = window$1.resetsAt;
+	if (end === void 0 || !Number.isFinite(end) || end <= now) return void 0;
+	const duration = window$1.windowDurationMs;
+	const start = window$1.startsAt ?? (window$1.fixedWindow === true && duration !== void 0 && Number.isFinite(duration) && duration > 0 ? end - duration : void 0);
+	if (start === void 0 || !Number.isFinite(start) || start >= end || start > now) return void 0;
+	return Math.min(100, Math.max(0, (now - start) / (end - start) * 100));
+}
+function usageColorState(used, elapsed, preset, fresh) {
+	if (!validUsage(used)) return "neutral";
+	if (used >= 90) return "red";
+	if (!fresh || preset === "remaining" || elapsed === void 0) return "green";
+	return used - elapsed >= (preset === "relaxed" ? 15 : 10) ? "yellow" : "green";
+}
+function usageBarColor(used, elapsed, preset = "standard", fresh = true) {
+	const state = usageColorState(used, elapsed, preset, fresh);
+	return state === "red" ? "var(--dsw-alias-state-error-primary)" : state === "yellow" ? "var(--dsw-alias-state-warn-label)" : "var(--dsw-alias-state-success-primary)";
+}
+
+//#endregion
+//#region src/client/usage-color-preferences.ts
+const KEY = "dsh.subscriptions.usageColorPreset";
+const EVENT = "dsh:subscriptions:usage-color-preset";
+function isUsageColorPreset(value) {
+	return value === "standard" || value === "relaxed" || value === "remaining";
+}
+function readUsageColorPreset() {
+	if (typeof window === "undefined") return "standard";
+	try {
+		const value = window.localStorage.getItem(KEY);
+		return isUsageColorPreset(value) ? value : "standard";
+	} catch (error) {
+		if (!(error instanceof DOMException) || error.name !== "SecurityError") throw error;
+		return "standard";
+	}
+}
+function setUsageColorPreset(value) {
+	if (!isUsageColorPreset(value)) throw new TypeError("Invalid usage coloring preset");
+	window.localStorage.setItem(KEY, value);
+	window.dispatchEvent(new Event(EVENT));
+}
+function subscribeUsageColorPreset(notify) {
+	const storage = (event) => {
+		if (event.key === KEY || event.key === null) notify();
+	};
+	window.addEventListener(EVENT, notify);
+	window.addEventListener("storage", storage);
+	return () => {
+		window.removeEventListener(EVENT, notify);
+		window.removeEventListener("storage", storage);
+	};
+}
+function useUsageColorPreset() {
+	return (0, react.useSyncExternalStore)(subscribeUsageColorPreset, readUsageColorPreset, () => "standard");
+}
+
+//#endregion
+//#region src/client/UsageMeter.tsx
+/** Singular/plural locale keys per countdown unit (zh maps both to one string). */
+const UNIT_KEYS = {
+	day: ["usageUnitDay", "usageUnitDays"],
+	hour: ["usageUnitHour", "usageUnitHours"],
+	minute: ["usageUnitMinute", "usageUnitMinutes"]
+};
+function UsageMeter({ window: quota, t, style, observedAt, stale }) {
+	const preset = useUsageColorPreset();
+	const [now, setNow] = (0, react.useState)(Date.now);
+	(0, react.useEffect)(() => {
+		const timer = setInterval(() => setNow(Date.now()), 6e4);
+		return () => clearInterval(timer);
+	}, []);
+	const current = Math.max(now, Date.now());
+	const valid = validUsage(quota.usedPercent);
+	const used = valid ? quota.usedPercent : 0;
+	const fresh = isUsageFresh(quota, {
+		observedAt,
+		stale
+	}, current);
+	const elapsed = elapsedPercent(quota, current);
+	const pace = fresh ? elapsed : void 0;
+	const state = usageColorState(quota.usedPercent, pace, preset, fresh);
+	const lead = pace === void 0 ? 0 : Math.round(used - pace);
+	const label = [
+		valid ? t("usageMeterUsed", {
+			used: Math.round(used),
+			remaining: Math.round(100 - used)
+		}) : t("usageMeterInvalid"),
+		!valid ? "" : !fresh ? t("usageMeterStale") : state === "red" ? t("usageMeterNearLimit") : pace === void 0 && preset !== "remaining" ? t("usageMeterUnknownTime") : state === "yellow" ? t("usageMeterAhead") : t("usageMeterNoWarning"),
+		elapsed === void 0 ? "" : t("usageMeterPace", { elapsed: Math.round(elapsed) }),
+		pace === void 0 ? "" : lead > 0 ? t("usageMeterPaceAhead", { points: lead }) : lead < 0 ? t("usageMeterPaceBehind", { points: -lead }) : t("usageMeterPaceEven"),
+		quota.resetsAt !== void 0 && quota.resetsAt > current ? t("usageMeterReset", { duration: resetCountdownParts(quota.resetsAt - current).map((part) => t(UNIT_KEYS[part.unit][part.count === 1 ? 0 : 1], { count: part.count })).join(" ") }) : ""
+	].filter(Boolean).join(" · ");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		role: "img",
+		"aria-label": label,
+		title: label,
+		"data-usage-color": state,
+		style: {
+			height: 6,
+			borderRadius: 3,
+			overflow: "hidden",
+			background: "var(--dsw-alias-bg-layer-1)",
+			border: "1px solid var(--dsw-alias-border-l2)",
+			...style,
+			position: "relative"
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: {
+			height: "100%",
+			borderRadius: "inherit",
+			width: `${used}%`,
+			background: usageBarColor(quota.usedPercent, pace, preset, fresh)
+		} }), elapsed !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			"aria-hidden": "true",
+			"data-usage-time-marker": true,
+			style: {
+				position: "absolute",
+				left: `clamp(0px, calc(${elapsed}% - 1px), calc(100% - 2px))`,
+				top: 0,
+				bottom: 0,
+				width: 2,
+				background: "var(--dsw-alias-label-primary)",
+				boxShadow: "0 0 0 1px var(--dsw-alias-bg-layer-1)"
+			}
+		})]
+	});
+}
+
 //#endregion
 //#region src/client/ExternalUsageCards.tsx
-const SOURCES = [{
-	id: "opencode-go",
-	name: "OpenCode Go",
-	ref: "OPENCODE_GO_API_KEY"
-}, {
-	id: "kimi-code",
-	name: "Kimi Code",
-	ref: "KIMI_CODING_API_KEY"
-}];
+const SOURCES = [
+	{
+		id: "opencode-go",
+		name: "OpenCode Go",
+		ref: "OPENCODE_GO_API_KEY"
+	},
+	{
+		id: "kimi-code",
+		name: "Kimi Code",
+		ref: "KIMI_CODING_API_KEY"
+	},
+	{
+		id: "minimax",
+		name: "MiniMax",
+		ref: "MINIMAX_API_KEY"
+	},
+	{
+		id: "minimax-cn",
+		name: "MiniMax CN",
+		ref: "MINIMAX_CN_API_KEY"
+	}
+];
 function errorText(error) {
 	return error instanceof Error ? error.message : String(error);
 }
-function barColor$1(percent) {
-	if (percent >= 95) return "var(--dsw-alias-state-error-primary)";
-	if (percent >= 80) return "var(--dsw-alias-state-warn-label)";
-	return "var(--dsw-alias-state-success-primary)";
+/**
+* Row label of one window on an external usage card. A session or weekly
+* window appends the model it belongs to when the provider names one (MiniMax
+* reports a window per model), so two models' weekly rows stay distinguishable.
+* The monthly pool is a scope on an `other` window, not a model.
+* @param t - section translate.
+* @param window - the reported window.
+* @returns the localized label, e.g. "Weekly · general".
+*/
+function externalUsageWindowLabel(t, window$1) {
+	const named = window$1.scope !== void 0 && window$1.scope !== "";
+	if (window$1.kind === "other") return window$1.scope === "Monthly" ? t("usageMonthly") : named ? window$1.scope : t("usageWindow");
+	const base = window$1.kind === "session" ? t("usageSession") : t("usageWeekly");
+	return named ? `${base} · ${window$1.scope}` : base;
 }
 /** Quota cards for API-key providers already available through DSH itself. */
 function ExternalUsageCards({ rpc, t }) {
 	const [status, setStatus] = (0, react.useState)();
 	const [statusError, setStatusError] = (0, react.useState)();
 	const [usage, setUsage] = (0, react.useState)({});
+	const [observedAt, setObservedAt] = (0, react.useState)({});
 	const [errors, setErrors] = (0, react.useState)({});
 	const [loading, setLoading] = (0, react.useState)({});
 	const refresh = (0, react.useCallback)(async (source) => {
@@ -1425,16 +1668,20 @@ function ExternalUsageCards({ rpc, t }) {
 			...prev,
 			[source]: true
 		}));
-		setErrors((prev) => ({
-			...prev,
-			[source]: void 0
-		}));
 		try {
 			const value = await callSubscriptionsAuth(rpc, "externalUsage", { source });
 			setUsage((prev) => ({
 				...prev,
 				[source]: value
 			}));
+			setObservedAt((prev) => ({
+				...prev,
+				[source]: value.observedAt ?? Date.now()
+			}));
+			setErrors((prev) => ({
+				...prev,
+				[source]: void 0
+			}));
 			window.dispatchEvent(new Event(USAGE_BADGE_REFRESH_EVENT));
 		} catch (error) {
 			setErrors((prev) => ({
@@ -1539,24 +1786,18 @@ function ExternalUsageCards({ rpc, t }) {
 								children: t("usageEmpty")
 							}),
 							snapshot?.windows?.map((window$1, index) => {
-								const percent = Math.min(100, Math.max(0, window$1.usedPercent));
-								const label = window$1.kind === "session" ? t("usageSession") : window$1.kind === "weekly" ? t("usageWeekly") : window$1.scope === "Monthly" ? t("usageMonthly") : window$1.scope ?? t("usageWindow");
+								const percent = displayUsedPercent(window$1.usedPercent);
+								const label = externalUsageWindowLabel(t, window$1);
 								return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 									style: subscriptionCardStyles.usageRow,
 									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 										style: subscriptionCardStyles.usageMeta,
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: label }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
-											Math.round(percent),
-											"%",
-											window$1.resetsAt === void 0 ? "" : ` · ${t("usageResets", { date: new Date(window$1.resetsAt).toLocaleString() })}`
-										] })]
-									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-										style: subscriptionCardStyles.usageTrack,
-										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: {
-											...subscriptionCardStyles.usageFill,
-											width: `${percent}%`,
-											background: barColor$1(percent)
-										} })
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: label }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [percent === void 0 ? t("usageMeterInvalid") : `${percent}%`, window$1.resetsAt === void 0 ? "" : ` · ${t("usageResets", { date: new Date(window$1.resetsAt).toLocaleString() })}`] })]
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UsageMeter, {
+										window: window$1,
+										t,
+										observedAt: observedAt[id],
+										stale: errors[id] !== void 0 || snapshot?.stale === true
 									})]
 								}, index);
 							})
@@ -1584,15 +1825,12 @@ function ExternalUsageCards({ rpc, t }) {
 function message(error) {
 	return error instanceof Error ? error.message : String(error);
 }
-function barColor(percent) {
-	if (percent >= 95) return "var(--dsw-alias-state-error-primary)";
-	if (percent >= 80) return "var(--dsw-alias-state-warn-label)";
-	return "var(--dsw-alias-state-success-primary)";
-}
 /** Cursor's single connected account, rendered with the same card and Manage dialog as the other providers. */
 function CursorCard({ rpc, t }) {
 	const [status, setStatus] = (0, react.useState)();
 	const [usage, setUsage] = (0, react.useState)();
+	const [observedAt, setObservedAt] = (0, react.useState)();
+	const [usageStale, setUsageStale] = (0, react.useState)(false);
 	const [authorizeUrl, setAuthorizeUrl] = (0, react.useState)();
 	const [error, setError] = (0, react.useState)();
 	const [loading, setLoading] = (0, react.useState)(false);
@@ -1615,11 +1853,15 @@ function CursorCard({ rpc, t }) {
 	const refreshUsage = (0, react.useCallback)(async () => {
 		setLoading(true);
 		try {
-			setUsage(await callSubscriptionsAuth(rpc, "cursorUsage", {}));
+			const value = await callSubscriptionsAuth(rpc, "cursorUsage", {});
+			setUsage(value);
+			setObservedAt(value.observedAt ?? Date.now());
+			setUsageStale(value.stale === true);
 			setError(void 0);
 			window.dispatchEvent(new Event(USAGE_BADGE_REFRESH_EVENT));
 		} catch (failure) {
 			setError(message(failure));
+			setUsageStale(true);
 		} finally {
 			setLoading(false);
 		}
@@ -1665,6 +1907,8 @@ function CursorCard({ rpc, t }) {
 		try {
 			await callSubscriptionsAuth(rpc, "cursorLogout", {});
 			setUsage(void 0);
+			setObservedAt(void 0);
+			setUsageStale(false);
 			await refreshStatus();
 		} catch (failure) {
 			setError(message(failure));
@@ -1757,25 +2001,18 @@ function CursorCard({ rpc, t }) {
 							children: t("usageEmpty")
 						}),
 						usage?.windows?.map((window$1, index) => {
-							const percent = Math.min(100, Math.max(0, window$1.usedPercent));
+							const percent = displayUsedPercent(window$1.usedPercent);
 							const label = window$1.scope === "Included" ? t("cursorIncluded") : window$1.scope === "Cursor Models" ? t("cursorModels") : window$1.scope === "Other Models" ? t("cursorOtherModels") : window$1.scope === "Included requests" ? t("cursorIncludedRequests") : window$1.scope ?? t("usageWindow");
 							return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								style: subscriptionCardStyles.usageRow,
 								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 									style: subscriptionCardStyles.usageMeta,
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: label }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
-										Math.round(percent),
-										"%",
-										window$1.resetsAt === void 0 ? "" : ` · ${t("usageResets", { date: new Date(window$1.resetsAt).toLocaleString() })}`
-									] })]
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-									style: subscriptionCardStyles.usageTrack,
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: {
-										width: `${percent}%`,
-										height: "100%",
-										borderRadius: 3,
-										background: barColor(percent)
-									} })
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: label }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [percent === void 0 ? t("usageMeterInvalid") : `${percent}%`, window$1.resetsAt === void 0 ? "" : ` · ${t("usageResets", { date: new Date(window$1.resetsAt).toLocaleString() })}`] })]
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UsageMeter, {
+									window: window$1,
+									t,
+									observedAt,
+									stale: usageStale
 								})]
 							}, index);
 						})
@@ -1832,6 +2069,7 @@ function CursorCard({ rpc, t }) {
 /** Browser-local display preference; never changes provider or account settings. */
 function UsageBadgeDisplaySetting({ t }) {
 	const mode = useUsageBadgeMode();
+	const preset = useUsageColorPreset();
 	const [failed, setFailed] = (0, react.useState)(false);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		style: styles$6.card,
@@ -1844,7 +2082,7 @@ function UsageBadgeDisplaySetting({ t }) {
 					value: mode,
 					onChange: (event) => {
 						const value = event.currentTarget.value;
-						if (value !== "recent" && value !== "hidden") return;
+						if (value !== "recent" && value !== "always" && value !== "hidden") return;
 						try {
 							setUsageBadgeMode(value);
 							setFailed(false);
@@ -1853,19 +2091,63 @@ function UsageBadgeDisplaySetting({ t }) {
 							setFailed(true);
 						}
 					},
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-						value: "recent",
-						children: t("usageBadgeDisplayRecent")
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-						value: "hidden",
-						children: t("usageBadgeDisplayHidden")
-					})]
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+							value: "recent",
+							children: t("usageBadgeDisplayRecent")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+							value: "always",
+							children: t("usageBadgeDisplayAlways")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+							value: "hidden",
+							children: t("usageBadgeDisplayHidden")
+						})
+					]
 				})]
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 				style: styles$6.hint,
 				children: t("usageBadgeDisplayHint")
 			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+				style: styles$6.field,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("usageColorLabel") }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+					style: styles$6.select,
+					"aria-label": t("usageColorLabel"),
+					value: preset,
+					onChange: (event) => {
+						const value = event.currentTarget.value;
+						if (!isUsageColorPreset(value)) return;
+						try {
+							setUsageColorPreset(value);
+							setFailed(false);
+						} catch (error) {
+							if (!(error instanceof DOMException) || !["SecurityError", "QuotaExceededError"].includes(error.name)) throw error;
+							setFailed(true);
+						}
+					},
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+							value: "standard",
+							children: t("usageColorStandard")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+							value: "relaxed",
+							children: t("usageColorRelaxed")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+							value: "remaining",
+							children: t("usageColorRemaining")
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				style: styles$6.hint,
+				children: t(preset === "remaining" ? "usageColorRemainingHint" : "usageColorPaceHint", { allowance: preset === "relaxed" ? 15 : 10 })
+			}),
 			failed && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 				role: "alert",
 				style: {
@@ -2017,8 +2299,6 @@ const styles$5 = {
 		cursor: "pointer",
 		color: "var(--dsw-alias-state-warn-label)"
 	},
-	usageTrack: subscriptionCardStyles.usageTrack,
-	usageFill: subscriptionCardStyles.usageFill,
 	deviceCode: {
 		marginTop: 4,
 		display: "flex",
@@ -2114,12 +2394,6 @@ function usageWindowLabel$1(t, window$1) {
 	const base = window$1.kind === "session" ? t("usageSession") : window$1.kind === "weekly" ? t("usageWeekly") : t("usageWindow");
 	return window$1.scope !== void 0 && window$1.scope !== "" ? `${base} · ${window$1.scope}` : base;
 }
-/** Bar fill color: success normally, warn from 80%, error from 95%. Shared with the composer badge. */
-function usageBarColor(usedPercent$1) {
-	if (usedPercent$1 >= 95) return "var(--dsw-alias-state-error-primary)";
-	if (usedPercent$1 >= 80) return "var(--dsw-alias-state-warn-label)";
-	return "var(--dsw-alias-state-success-primary)";
-}
 /**
 * The Subscriptions settings page component.
 * @param props - the slot inject face ({@link SubscriptionsSectionInjected}).
@@ -2142,6 +2416,7 @@ function SubscriptionsSection(props) {
 	const [copiedCode, setCopiedCode] = (0, react.useState)(void 0);
 	/** Usage snapshots keyed `${provider}:${accountKey}` — every account tracks its own windows. */
 	const [usages, setUsages] = (0, react.useState)({});
+	const [observedAt, setObservedAt] = (0, react.useState)({});
 	const [usageErrors, setUsageErrors] = (0, react.useState)({});
 	const [usageLoading, setUsageLoading] = (0, react.useState)({});
 	const mountedRef = (0, react.useRef)(true);
@@ -2242,6 +2517,10 @@ function SubscriptionsSection(props) {
 				...prev,
 				[key]: usage
 			}));
+			setObservedAt((prev) => ({
+				...prev,
+				[key]: usage.observedAt ?? Date.now()
+			}));
 			window.dispatchEvent(new Event(USAGE_BADGE_REFRESH_EVENT));
 			setUsageErrors((prev) => {
 				const next = { ...prev };
@@ -2542,19 +2821,17 @@ function SubscriptionsSection(props) {
 											children: t("usageEmpty")
 										}),
 										(usage?.windows ?? []).map((window$1, index) => {
-											const percent = Math.min(100, Math.max(0, window$1.usedPercent));
+											const percent = displayUsedPercent(window$1.usedPercent);
 											return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 												style: styles$5.usageRow,
 												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 													style: styles$5.usageMeta,
-													children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: usageWindowLabel$1(t, window$1) }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [`${String(Math.round(percent))}%`, window$1.resetsAt !== void 0 && ` · ${t("usageResets", { date: new Date(window$1.resetsAt).toLocaleString() })}`] })]
-												}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-													style: styles$5.usageTrack,
-													children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: {
-														...styles$5.usageFill,
-														width: `${String(percent)}%`,
-														background: usageBarColor(percent)
-													} })
+													children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: usageWindowLabel$1(t, window$1) }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [percent === void 0 ? t("usageMeterInvalid") : `${percent}%`, window$1.resetsAt !== void 0 && ` · ${t("usageResets", { date: new Date(window$1.resetsAt).toLocaleString() })}`] })]
+												}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UsageMeter, {
+													window: window$1,
+													t,
+													observedAt: observedAt[usageKey],
+													stale: usageError !== void 0 || usage.stale === true
 												})]
 											}, index);
 										})
@@ -2989,6 +3266,7 @@ const HOST_CONTRACT = {
 			"--dsw-alias-state-success-primary",
 			"--dsw-alias-state-warn-label",
 			"--dsw-elevation-prominent",
+			"--dsw-menu-backdrop-filter",
 			"--dsw-specific-menu"
 		]
 	}
@@ -3654,6 +3932,8 @@ const UsageBadgeIcon = usageBadgeIcon(__deepseek_ai_dsh_client_ui_primitives);
 const USAGE_POLL_INTERVAL_MS = 15 * 6e4;
 /** How often the badge re-reads the session's current model (model switches arrive only by asking). */
 const MODEL_POLL_INTERVAL_MS = 3e3;
+/** How long the rotation holds one provider in `always` mode (a display cadence, not a data poll). */
+const BADGE_ROTATION_INTERVAL_MS = 1e4;
 /** Distance between the trigger's top edge and the dialog's bottom (host stat dialogs use the same). */
 const PANEL_GAP = 8;
 /** Distance kept between the dialog and each viewport edge. */
@@ -3670,7 +3950,9 @@ const PROVIDER_NAMES = {
 	antigravity: "Antigravity",
 	"cursor-subscription": "Cursor",
 	"opencode-go": "OpenCode Go",
-	"kimi-coding": "Kimi Code"
+	"kimi-coding": "Kimi Code",
+	"minimax": "MiniMax",
+	"minimax-cn": "MiniMax CN"
 };
 /** Key of one account's cached windows: `provider:accountKey`. */
 function usageKeyOf(provider, account) {
@@ -3742,7 +4024,12 @@ async function loadBadgeRoster(rpc) {
 			}
 		});
 	}
-	if (external.status === "fulfilled") for (const [source, provider] of [["opencode-go", "opencode-go"], ["kimi-code", "kimi-coding"]]) {
+	if (external.status === "fulfilled") for (const [source, provider] of [
+		["opencode-go", "opencode-go"],
+		["kimi-code", "kimi-coding"],
+		["minimax", "minimax"],
+		["minimax-cn", "minimax-cn"]
+	]) {
 		refreshed.add(provider);
 		if (external.value[source]?.configured) roster.push({
 			provider,
@@ -3759,7 +4046,7 @@ async function loadBadgeRoster(rpc) {
 }
 async function usageOf(rpc, { provider, account }) {
 	if (provider === "cursor-subscription") return callSubscriptionsAuth(rpc, "cursorUsage", {});
-	if (provider === "opencode-go" || provider === "kimi-coding") return callSubscriptionsAuth(rpc, "externalUsage", { source: provider === "kimi-coding" ? "kimi-code" : provider });
+	if (provider === "opencode-go" || provider === "kimi-coding" || provider === "minimax" || provider === "minimax-cn") return callSubscriptionsAuth(rpc, "externalUsage", { source: provider === "kimi-coding" ? "kimi-code" : provider });
 	return callSubscriptionsAuth(rpc, "usage", {
 		provider,
 		account: account.key
@@ -3786,7 +4073,7 @@ function createCurrentModelReader(models, sessionId) {
 * Falls back to the scope/kind abbreviation when no reset time is known.
 */
 function windowLabel(w) {
-	if (w.resetsAt === void 0) {
+	if (w.resetsAt === void 0 || !Number.isFinite(w.resetsAt)) {
 		if (w.scope !== void 0 && w.scope !== "") return w.scope;
 		switch (w.kind) {
 			case "session": return "5h";
@@ -3802,9 +4089,13 @@ function windowLabel(w) {
 	if (hours > 0) return `${hours}h${minutes % 60}m`;
 	return `${Math.max(1, minutes)}m`;
 }
-/** Clamp and round a window's used share for display. */
-function usedPercent(w) {
-	return Math.round(Math.min(100, Math.max(0, w.usedPercent)));
+/**
+* One compact segment piece (`6d1h 25%`); an unusable provider percentage
+* renders as the no-data dash, consistent with the meter's unavailable state.
+*/
+function windowSegment(label, w) {
+	const percent = displayUsedPercent(w.usedPercent);
+	return percent === void 0 ? `${label} —` : `${label} ${percent}%`;
 }
 /** Keep model quotas separate: matching percentages do not imply a shared pool. */
 function prioritizeWindows(windows, model) {
@@ -3826,10 +4117,10 @@ function compactSegment(d, model, t = fallbackTranslate) {
 	if (d.provider === "antigravity") {
 		const matching = model === void 0 ? [] : windows.filter((w) => w.scope === model);
 		if (matching.length === 0) return `${d.name} ${t(model === void 0 ? "usageBadgeModelCount" : "usageBadgeModelUnavailable", { count: new Set(windows.map((w) => w.scope).filter(Boolean)).size })}`;
-		const parts$1 = matching.slice(0, 2).map((w) => `${w.kind === "weekly" ? t("usageWeekly") : t("usageWindow")} ${usedPercent(w)}%`);
+		const parts$1 = matching.slice(0, 2).map((w) => windowSegment(w.kind === "weekly" ? t("usageWeekly") : t("usageWindow"), w));
 		return `${d.name} ${parts$1.join(" · ")}`;
 	}
-	const parts = windows.slice(0, 2).map((w) => `${windowLabel(w)} ${usedPercent(w)}%`);
+	const parts = windows.slice(0, 2).map((w) => windowSegment(windowLabel(w), w));
 	if (windows.length > 2) parts.push(`+${windows.length - 2}`);
 	return `${d.name} ${parts.join(" · ")}`;
 }
@@ -3842,6 +4133,24 @@ function collapsedDisplays(displays, current) {
 	const match = displays.find((d) => d.provider === current);
 	return match === void 0 ? [] : [match];
 }
+/**
+* `always` mode: the current model's provider while it reports usage,
+* otherwise the rotation steps through the providers that do, in display
+* order, wrapping around. The index is taken modulo the current provider
+* count, so providers appearing or dropping out stay inside range; the
+* sequence itself may shift when the roster changes. Unlike `recent`, the
+* retained subscription does not pin the pill — that retention is exactly
+* what this mode exists to escape.
+* @param displays - providers with usage, in display order.
+* @param current - the provider of the session's current model.
+* @param step - rotation tick; consecutive ticks advance one provider.
+*/
+function rotatingDisplay(displays, current, step) {
+	if (displays.length === 0) return [];
+	const match = displays.find((d) => d.provider === current);
+	if (match !== void 0) return [match];
+	return [displays[((Number.isFinite(step) ? Math.floor(step) : 0) % displays.length + displays.length) % displays.length]];
+}
 /** Order for the expanded dialog: the current provider first, the rest in poll order. */
 function expandedDisplays(displays, current) {
 	const match = displays.find((d) => d.provider === current);
@@ -3875,7 +4184,7 @@ function usageWindowLabel(t, window$1) {
 * every provider's accounts and their windows. Returns null when no data is
 * available.
 */
-function SubscriptionUsageBadge({ rpc, currentModel, t }) {
+function SubscriptionUsageBadge({ rpc, currentModel, t, rotationMs }) {
 	const translate = t ?? fallbackTranslate;
 	const [displays, setDisplays] = (0, react.useState)([]);
 	const [selection, setSelection] = (0, react.useState)(void 0);
@@ -3885,6 +4194,8 @@ function SubscriptionUsageBadge({ rpc, currentModel, t }) {
 	const badgeSelection = retainSubscriptionSelection(lastSubscription, selection);
 	const [open, setOpen] = (0, react.useState)(false);
 	const [hover, setHover] = (0, react.useState)(false);
+	const [rotation, setRotation] = (0, react.useState)(0);
+	const [dialogLead, setDialogLead] = (0, react.useState)(void 0);
 	const inflightRef = (0, react.useRef)(false);
 	const mountedRef = (0, react.useRef)(true);
 	const rootRef = (0, react.useRef)(null);
@@ -3893,6 +4204,7 @@ function SubscriptionUsageBadge({ rpc, currentModel, t }) {
 	const currentRef = (0, react.useRef)(currentModel);
 	currentRef.current = currentModel;
 	const lastKnownRef = (0, react.useRef)(/* @__PURE__ */ new Map());
+	const observationsRef = (0, react.useRef)(/* @__PURE__ */ new Map());
 	const refresh = (0, react.useCallback)(async () => {
 		if (rpc === void 0 || inflightRef.current) return;
 		inflightRef.current = true;
@@ -3901,7 +4213,10 @@ function SubscriptionUsageBadge({ rpc, currentModel, t }) {
 			if (!mountedRef.current) return;
 			const lastKnown = lastKnownRef.current;
 			const live = new Set(roster.map(({ provider, account }) => usageKeyOf(provider, account)));
-			for (const key of lastKnown.keys()) if (refreshed.has(key.split(":", 1)[0]) && !live.has(key)) lastKnown.delete(key);
+			for (const key of lastKnown.keys()) if (refreshed.has(key.split(":", 1)[0]) && !live.has(key)) {
+				lastKnown.delete(key);
+				observationsRef.current.delete(key);
+			}
 			const results = await Promise.allSettled(roster.map(async ({ provider, account }) => {
 				return {
 					provider,
@@ -3913,6 +4228,13 @@ function SubscriptionUsageBadge({ rpc, currentModel, t }) {
 				};
 			}));
 			if (!mountedRef.current) return;
+			for (const { provider, account } of roster) {
+				const key = usageKeyOf(provider, account);
+				observationsRef.current.set(key, {
+					...observationsRef.current.get(key),
+					stale: true
+				});
+			}
 			const plans = /* @__PURE__ */ new Map();
 			for (const r of results) {
 				if (r.status !== "fulfilled") continue;
@@ -3921,12 +4243,37 @@ function SubscriptionUsageBadge({ rpc, currentModel, t }) {
 				if (usage.plan !== void 0) plans.set(key, usage.plan);
 				if (!usage.supported || !usage.windows || usage.windows.length === 0) {
 					lastKnown.delete(key);
+					observationsRef.current.delete(key);
 					continue;
 				}
 				lastKnown.set(key, usage.windows);
+				observationsRef.current.set(key, {
+					observedAt: usage.observedAt ?? Date.now(),
+					stale: usage.stale === true
+				});
 			}
-			setDisplays((previous) => [...groupUsageDisplays(roster, lastKnown, plans), ...previous.filter((display) => !refreshed.has(display.provider))]);
-		} catch {} finally {
+			setDisplays((previous) => [...groupUsageDisplays(roster, lastKnown, plans).map((display) => ({
+				...display,
+				accounts: display.accounts.map((account) => ({
+					...account,
+					...observationsRef.current.get(`${display.provider}:${account.key}`)
+				}))
+			})), ...previous.filter((display) => !refreshed.has(display.provider)).map((display) => ({
+				...display,
+				accounts: display.accounts.map((account) => ({
+					...account,
+					stale: true
+				}))
+			}))]);
+		} catch {
+			if (mountedRef.current) setDisplays((previous) => previous.map((display) => ({
+				...display,
+				accounts: display.accounts.map((account) => ({
+					...account,
+					stale: true
+				}))
+			})));
+		} finally {
 			inflightRef.current = false;
 		}
 	}, [rpc]);
@@ -4012,18 +4359,32 @@ function SubscriptionUsageBadge({ rpc, currentModel, t }) {
 	(0, react.useEffect)(() => {
 		if (displayMode === "hidden") setOpen(false);
 	}, [displayMode]);
+	(0, react.useEffect)(() => {
+		if (displayMode !== "always") return;
+		const interval = rotationMs !== void 0 && Number.isFinite(rotationMs) && rotationMs > 0 ? rotationMs : BADGE_ROTATION_INTERVAL_MS;
+		const timer = setInterval(() => {
+			setRotation((step) => step + 1);
+		}, interval);
+		return () => {
+			clearInterval(timer);
+		};
+	}, [displayMode, rotationMs]);
 	const seat = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		ref: seatRef,
 		style: styles.seat,
 		"aria-hidden": true
 	});
-	const collapsed = collapsedDisplays(displays, badgeSelection?.provider);
+	const collapsed = displayMode === "always" ? rotatingDisplay(displays, current, rotation) : collapsedDisplays(displays, badgeSelection?.provider);
 	if (displayMode === "hidden" || collapsed.length === 0) return seat;
-	const label = compactSegment(collapsed[0], badgeSelection?.model, translate);
-	const expanded = expandedDisplays(displays, badgeSelection?.provider);
+	const pillModel = displayMode === "always" ? current === collapsed[0]?.provider ? selection?.model : void 0 : badgeSelection?.model;
+	const label = compactSegment(collapsed[0], pillModel, translate);
+	const dialogProvider = open && displayMode === "always" ? dialogLead : badgeSelection?.provider;
+	const dialogModel = open && displayMode === "always" ? dialogLead === current ? selection?.model : void 0 : badgeSelection?.model;
+	const expanded = expandedDisplays(displays, dialogProvider);
 	const title = translate("usageBadgeTitle");
 	const toggle = () => {
 		const next = !open;
+		setDialogLead(collapsed[0]?.provider);
 		setOpen(next);
 		if (next) refresh();
 	};
@@ -4095,10 +4456,12 @@ function SubscriptionUsageBadge({ rpc, currentModel, t }) {
 							})
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccountWindows, {
 							windows: account.windows,
-							model: d.provider === badgeSelection?.provider ? badgeSelection.model : void 0,
+							observedAt: account.observedAt,
+							stale: account.stale,
+							model: d.provider === dialogProvider ? dialogModel : void 0,
 							provider: d.provider,
 							translate
-						}, `${d.provider}:${badgeSelection?.model ?? ""}`)]
+						}, `${d.provider}:${dialogModel ?? ""}`)]
 					}, account.key))]
 				}, d.provider))
 			]
@@ -4137,13 +4500,16 @@ function AccountMeta({ account, translate }) {
 	});
 }
 /** Preview each account independently; all remaining quotas stay accessible. */
-function AccountWindows({ windows, model, provider, translate }) {
+function AccountWindows({ windows, model, provider, translate, observedAt, stale }) {
 	const { shown, hidden } = previewWindows(windows, model, provider);
 	const rows = (items) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dl", {
 		style: styles.details,
 		children: items.map((w, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WindowRow, {
 			label: `${usageWindowLabel(translate, w)}${model !== void 0 && w.scope === model ? ` · ${translate("usageBadgeCurrent")}` : ""}`,
-			window: w
+			window: w,
+			t: translate,
+			observedAt,
+			stale
 		}, i))
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [rows(shown), hidden.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("details", {
@@ -4155,8 +4521,8 @@ function AccountWindows({ windows, model, provider, translate }) {
 	})] });
 }
 /** One `dt`/`dd` pair: window name → `25% · 6d1h`, with the bar underneath. */
-function WindowRow({ label, window: w }) {
-	const percent = usedPercent(w);
+function WindowRow({ label, window: w, t, observedAt, stale }) {
+	const percent = displayUsedPercent(w.usedPercent);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", {
 			style: styles.dt,
@@ -4164,23 +4530,17 @@ function WindowRow({ label, window: w }) {
 		}),
 		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("dd", {
 			style: styles.dd,
-			children: [
-				percent,
-				"%",
-				w.resetsAt !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-					style: styles.reset,
-					children: [" · ", windowLabel(w)]
-				})
-			]
+			children: [percent === void 0 ? t("usageMeterInvalid") : `${percent}%`, w.resetsAt !== void 0 && Number.isFinite(w.resetsAt) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				style: styles.reset,
+				children: [" · ", windowLabel(w)]
+			})]
 		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UsageMeter, {
+			window: w,
+			t,
 			style: styles.bar,
-			"aria-hidden": true,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: {
-				...styles.barFill,
-				width: `${percent}%`,
-				background: usageBarColor(percent)
-			} })
+			observedAt,
+			stale
 		})
 	] });
 }
@@ -4232,6 +4592,7 @@ const styles = {
 		zIndex: 1100,
 		boxSizing: "border-box",
 		background: "var(--dsw-specific-menu)",
+		backdropFilter: "var(--dsw-menu-backdrop-filter)",
 		width: "max-content",
 		minWidth: "min(300px, 100vw - 24px)",
 		maxWidth: "min(440px, 100vw - 24px)",
@@ -4339,10 +4700,6 @@ const styles = {
 		overflow: "hidden",
 		background: "var(--dsw-alias-border-l2)",
 		marginBottom: 2
-	},
-	barFill: {
-		height: "100%",
-		borderRadius: 2
 	}
 };