dsh-subscriptions 0.1.0 → 0.1.2

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",
@@ -261,6 +285,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 密钥",
@@ -1342,17 +1390,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
 	}
 };
 
@@ -1394,30 +1431,204 @@ 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);
+}
+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);
+}
+/** Only explicit intervals or provider-verified fixed durations support linear pace. */
+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 = fresh ? elapsedPercent(quota, current) : void 0;
+	const state = usageColorState(quota.usedPercent, elapsed, preset, fresh);
+	const lead = elapsed === void 0 ? 0 : Math.round(used - elapsed);
+	const label = [
+		valid ? t("usageMeterUsed", {
+			used: Math.round(used),
+			remaining: Math.round(100 - used)
+		}) : t("usageMeterInvalid"),
+		!valid ? "" : !fresh ? t("usageMeterStale") : state === "red" ? t("usageMeterNearLimit") : elapsed === void 0 && preset !== "remaining" ? t("usageMeterUnknownTime") : state === "yellow" ? t("usageMeterAhead") : t("usageMeterNoWarning"),
+		elapsed === void 0 ? "" : t("usageMeterPace", { elapsed: Math.round(elapsed) }),
+		elapsed === 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, elapsed, 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)";
-}
 /** 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 +1636,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 +1754,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 percent = displayUsedPercent(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");
 								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 +1793,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 +1821,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 +1875,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 +1969,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 +2037,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,
@@ -1866,6 +2072,43 @@ function UsageBadgeDisplaySetting({ t }) {
 				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 +2260,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 +2355,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 +2377,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 +2478,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 +2782,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 +3227,7 @@ const HOST_CONTRACT = {
 			"--dsw-alias-state-success-primary",
 			"--dsw-alias-state-warn-label",
 			"--dsw-elevation-prominent",
+			"--dsw-menu-backdrop-filter",
 			"--dsw-specific-menu"
 		]
 	}
@@ -3670,7 +3909,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 +3983,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 +4005,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 +4032,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 +4048,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 +4076,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(" · ")}`;
 }
@@ -3893,6 +4143,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 +4152,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 +4167,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 +4182,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]);
@@ -4095,6 +4381,8 @@ function SubscriptionUsageBadge({ rpc, currentModel, t }) {
 							})
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccountWindows, {
 							windows: account.windows,
+							observedAt: account.observedAt,
+							stale: account.stale,
 							model: d.provider === badgeSelection?.provider ? badgeSelection.model : void 0,
 							provider: d.provider,
 							translate
@@ -4137,13 +4425,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 +4446,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 +4455,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 +4517,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 +4625,6 @@ const styles = {
 		overflow: "hidden",
 		background: "var(--dsw-alias-border-l2)",
 		marginBottom: 2
-	},
-	barFill: {
-		height: "100%",
-		borderRadius: 2
 	}
 };