dsh-subscriptions 0.1.2 → 0.1.4

package/lib/client.js

@@ -139,6 +139,35 @@ const en = {
 	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}",
+	resetCreditsTitle: "Usage limit resets",
+	resetCreditsAvailable: "{count} available",
+	resetCreditsError: "Usage limit resets unavailable: {message}",
+	resetCreditsErrorFixed: "Usage limit resets are unavailable. Refresh usage to try again.",
+	resetCreditReadOnly: "Read only. This page cannot spend a Claude reset.",
+	resetCreditReadOnlyLabel: "Read only",
+	resetCreditAvailable: "Available",
+	resetCreditNotUsable: "Not yet usable",
+	resetCreditPaused: "Paused",
+	resetCreditExhausted: "Exhausted",
+	resetCreditExpired: "Expired",
+	resetCreditRemaining: "{left} of {total} left",
+	resetCreditLeft: "{left} left",
+	resetCreditRemainingUnknown: "Remaining count unavailable",
+	resetCreditCooldownUntil: "Usable after {date}",
+	resetUseButton: "Use…",
+	resetUseChecking: "Checking…",
+	resetUseGuard: "You can use this reset when weekly usage reaches at least 80%.",
+	resetUseRestart: "Reset details are missing. Restart DSH, reload this page, then refresh usage.",
+	resetUseRefresh: "Refresh usage to verify current limits and reset availability.",
+	resetUseReady: "Use this reset — the earliest-expiring credit. Confirmation required.",
+	resetUseConfirmTitle: "Confirm full reset",
+	resetUseWarning: "This consumes one credit and resets weekly + 5-hour limits. This interface cannot undo it. Confirmation expires in 60 seconds.",
+	resetUseAcknowledge: "I understand that one credit will be consumed.",
+	resetUseConfirm: "Consume 1 reset",
+	resetUseSuccess: "Reset confirmed. Usage refreshed.",
+	resetCreditFull: "Full reset",
+	resetCreditExpires: "Expires {date}",
+	resetCreditExpiryUnknown: "Expiry date unavailable",
 	externalUsageTitle: "Built-in provider usage",
 	externalUsageConnected: "API key configured",
 	externalUsageNotConfigured: "Not configured",
@@ -190,8 +219,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",
@@ -310,6 +340,35 @@ const zh = {
 	usageColorPaceHint: "用量领先时间进度 {allowance} 个百分点时变黄；已用达到 90% 时优先变红。自动保存到当前浏览器，仅改变配色。",
 	usageColorRemainingHint: "已用达到 90% 时变红，不显示黄色节奏警告。可靠的时间标记仍保留，自动保存到当前浏览器。",
 	usagePlan: "计划：{plan}",
+	resetCreditsTitle: "用量限制重置",
+	resetCreditsAvailable: "可用 {count} 次",
+	resetCreditsError: "用量限制重置查询失败：{message}",
+	resetCreditsErrorFixed: "用量限制重置暂不可用，请刷新用量后重试。",
+	resetCreditReadOnly: "只读。此页面不能消耗 Claude 的重置额度。",
+	resetCreditReadOnlyLabel: "只读",
+	resetCreditAvailable: "可用",
+	resetCreditNotUsable: "暂不可用",
+	resetCreditPaused: "已暂停",
+	resetCreditExhausted: "已用尽",
+	resetCreditExpired: "已过期",
+	resetCreditRemaining: "剩余 {left} / {total}",
+	resetCreditLeft: "剩余 {left}",
+	resetCreditRemainingUnknown: "剩余次数不可用",
+	resetCreditCooldownUntil: "{date} 后可用",
+	resetUseButton: "使用…",
+	resetUseChecking: "正在检查…",
+	resetUseGuard: "每周用量达到 80% 后才可使用此重置。",
+	resetUseRestart: "缺少重置详情。请重启 DSH、重新加载页面并刷新用量。",
+	resetUseRefresh: "请刷新用量以验证当前限制和重置可用性。",
+	resetUseReady: "使用此最早到期的重置额度，操作前需要确认。",
+	resetUseConfirmTitle: "确认完整重置",
+	resetUseWarning: "将消耗一次额度并重置每周和 5 小时限制，无法撤销。确认将在 60 秒后过期。",
+	resetUseAcknowledge: "我理解将消耗一次额度。",
+	resetUseConfirm: "消耗一次重置",
+	resetUseSuccess: "重置已确认，用量已刷新。",
+	resetCreditFull: "完整重置",
+	resetCreditExpires: "{date} 到期",
+	resetCreditExpiryUnknown: "到期时间不可用",
 	externalUsageTitle: "内置供应商用量",
 	externalUsageConnected: "已配置 API 密钥",
 	externalUsageNotConfigured: "未配置",
@@ -361,8 +420,9 @@ const zh = {
 	usageBadgeTitle: "服务商用量",
 	usageBadgeDisplay: "状态栏额度显示",
 	usageBadgeDisplayRecent: "仅显示当前／最近使用的用量服务商",
+	usageBadgeDisplayAlways: "始终显示一家，其余服务商轮播",
 	usageBadgeDisplayHidden: "不显示",
-	usageBadgeDisplayHint: "自动保存到当前浏览器。状态栏一次显示一家服务商；没有额度来源的模型沿用本视图最近选择的服务商，没有记录则隐藏。关闭不影响本页的额度详情。",
+	usageBadgeDisplayHint: "自动保存到当前浏览器。状态栏一次显示一家服务商；没有额度来源的模型沿用本视图最近选择的服务商，没有记录则隐藏。选择“始终显示”时，当前模型没有额度来源，就每 10 秒轮播一家有额度的服务商。关闭不影响本页的额度详情。",
 	usageBadgeDisplaySaveFailed: "显示设置保存失败，请检查浏览器存储权限。",
 	usageBadgeCurrent: "当前",
 	usageBadgeModelCount: "{count} 个模型配额",
@@ -377,6 +437,18 @@ const zh = {
 	commandFastUnavailable: "当前模型不支持快速档；/fast 仅对目录声明了 fast tier 的 Codex 模型可用"
 };
 
+//#endregion
+//#region src/client/reset-action.ts
+/** Explain client-side gating; the server independently revalidates before spending. */
+function resetActionBlock(usage, now = Date.now()) {
+	const weekly = usage.windows?.find((w) => w.kind === "weekly" && w.scope === void 0);
+	if (!weekly || !Number.isFinite(weekly.usedPercent)) return "resetUseRefresh";
+	if (weekly.usedPercent < 80) return "resetUseGuard";
+	if (weekly.resetsAt === void 0 || weekly.resetsAt <= now || usage.resetCreditsError) return "resetUseRefresh";
+	if (!usage.resetCredits?.some((c) => c.id)) return "resetUseRestart";
+	if (!usage.resetCredits.some((c) => c.id && (c.expiresAt === void 0 || c.expiresAt > now))) return "resetUseRefresh";
+}
+
 //#endregion
 //#region src/client/subscriptions-rpc.ts
 /**
@@ -449,16 +521,7 @@ function mergeAccountChanges(latest, changes) {
 
 //#endregion
 //#region src/client/ProviderModelEditor.tsx
-const border$1 = "1px solid var(--dsw-alias-border-l2, #ddd)";
-const control$1 = {
-	font: "inherit",
-	color: "inherit",
-	background: "transparent",
-	border: border$1,
-	borderRadius: 8,
-	padding: "6px 10px",
-	minWidth: 0
-};
+const border$1 = "0.5px solid var(--dsw-alias-border-l2, #ddd)";
 const actions$1 = {
 	display: "flex",
 	flexWrap: "wrap",
@@ -567,10 +630,7 @@ const ProviderModelEditor = (0, react.forwardRef)(function ProviderModelEditor$1
 			paddingTop: 12
 		},
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
-			style: {
-				margin: 0,
-				fontSize: 15
-			},
+			style: { margin: 0 },
 			children: t("modelsEdit")
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			style: {
@@ -580,22 +640,18 @@ const ProviderModelEditor = (0, react.forwardRef)(function ProviderModelEditor$1
 			},
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-					style: { margin: 0 },
+					className: "dsh-subscription-hint",
 					children: t(provider === "cursor-subscription" ? "cursorManageHint" : "modelsHint")
 				}),
 				error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 					role: "alert",
-					style: {
-						margin: 0,
-						color: "var(--dsw-alias-state-error-primary, #b42318)"
-					},
 					children: error
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					style: actions$1,
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						type: "button",
-						style: control$1,
+						className: "dsh-subscription-quiet",
 						disabled: busy || disabled || dirty,
 						onClick: () => {
 							load(true);
@@ -635,10 +691,7 @@ const ProviderModelEditor = (0, react.forwardRef)(function ProviderModelEditor$1
 							style: actions$1,
 							children: [
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-									style: {
-										...control$1,
-										flex: "1 1 180px"
-									},
+									style: { flex: "1 1 180px" },
 									value: query,
 									onChange: (event) => setQuery(event.target.value),
 									placeholder: t("modelDefaultsFilterPlaceholder"),
@@ -646,7 +699,6 @@ const ProviderModelEditor = (0, react.forwardRef)(function ProviderModelEditor$1
 								}),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 									type: "button",
-									style: control$1,
 									onClick: () => edit({
 										...draft,
 										visibleModels: allModels.map((model) => model.id)
@@ -655,7 +707,6 @@ const ProviderModelEditor = (0, react.forwardRef)(function ProviderModelEditor$1
 								}),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 									type: "button",
-									style: control$1,
 									onClick: () => edit({
 										...draft,
 										visibleModels: []
@@ -703,7 +754,6 @@ const ProviderModelEditor = (0, react.forwardRef)(function ProviderModelEditor$1
 									children: [(model.efforts?.length ?? 0) > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
 										style: actions$1,
 										children: [t("modelDefaultsTitle"), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
-											style: control$1,
 											"aria-label": `${model.name} ${t("modelDefaultsTitle")}`,
 											value: efforts[model.id] ?? "",
 											onChange: (event) => {
@@ -739,10 +789,7 @@ const ProviderModelEditor = (0, react.forwardRef)(function ProviderModelEditor$1
 										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
 											style: actions$1,
 											children: [t("modelsContext"), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-												style: {
-													...control$1,
-													width: 140
-												},
+												style: { width: 140 },
 												inputMode: "numeric",
 												value: contexts[model.id] ?? "",
 												"aria-label": `${model.name} ${t("modelsContext")}`,
@@ -796,28 +843,218 @@ const ProviderModelEditor = (0, react.forwardRef)(function ProviderModelEditor$1
 	});
 });
 
+//#endregion
+//#region src/client/provider-settings-styles.ts
+/**
+* The host loads one JS client bundle, so keep this small, scoped stylesheet
+* with the dialog instead of relying on a separate CSS asset. Geometry and
+* theme tokens follow the host's settings-form and ui-primitives controls.
+*
+* `color-scheme` is left to the host deliberately. Its boot script sets the
+* property on `:root`, and it inherits, so native controls inside these panels
+* follow the theme. Upstream also pins `color-scheme: light` here and flips it
+* back under `body[data-ds-dark-theme]`; without that flip our scoped rules are
+* more specific than `:root` and would force every native control light inside
+* a dark theme.
+*/
+const formScope = ":is(.dsh-subscription-manager, .dsh-subscriptions-settings)";
+const providerSettingsCss = `
+.dsh-subscription-manager {
+  box-sizing: border-box;
+  padding: 0;
+  border: 0;
+  border-radius: var(--dsw-radius-panel, 16px);
+  background: var(--dsw-alias-bg-layer-2, var(--dsw-alias-bg-layer-1));
+  color: var(--dsw-alias-label-primary);
+  box-shadow: var(--dsw-elevation-prominent, 0 20px 70px #0004);
+  font-family: inherit;
+  font-size: 13px;
+  line-height: 1.5;
+}
+.dsh-subscriptions-settings {
+  font-family: inherit;
+  font-size: 13px;
+  line-height: 1.5;
+}
+.dsh-subscription-manager::backdrop {
+  background: var(--dsw-alias-bg-mask-1, #0006);
+  backdrop-filter: var(--dsw-mask-blur, none);
+}
+${formScope} h2 {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 500;
+}
+${formScope} h3 {
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: 500;
+}
+${formScope} strong,
+${formScope} .dsh-subscription-label {
+  font-size: 13px;
+  line-height: 1.5;
+  font-weight: 500;
+}
+${formScope} legend {
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: 500;
+}
+${formScope} small,
+${formScope} .dsh-subscription-hint,
+${formScope} [role="status"] {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-tertiary);
+}
+${formScope} [role="alert"] {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--dsw-alias-state-error-primary, #b42318);
+}
+${formScope} input:not([type="checkbox"]),
+${formScope} select {
+  box-sizing: border-box;
+  min-width: 0;
+  height: 34px;
+  padding: 0 12px;
+  border: 0.5px solid var(--dsw-alias-border-l4, var(--dsw-alias-border-l2));
+  border-radius: var(--dsw-radius-md, 8px);
+  background: var(--dsw-alias-bg-layer-3, var(--dsw-alias-bg-layer-1));
+  color: var(--dsw-alias-label-primary);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 1.5;
+}
+${formScope} input::placeholder {
+  color: var(--dsw-alias-label-tertiary);
+  opacity: 1;
+}
+${formScope} input:not([type="checkbox"]):focus-visible,
+${formScope} select:focus-visible {
+  outline: none;
+  border-color: var(--dsw-alias-state-business-primary, var(--dsw-alias-brand-primary));
+}
+${formScope} input:not([type="checkbox"]):disabled,
+${formScope} select:disabled {
+  color: var(--dsw-alias-label-tertiary);
+  cursor: default;
+}
+${formScope} input[aria-invalid="true"] {
+  border-color: var(--dsw-alias-state-error-primary, #b42318);
+}
+${formScope} option {
+  background: var(--dsw-alias-bg-layer-2, var(--dsw-alias-bg-layer-1));
+  color: var(--dsw-alias-label-primary);
+}
+${formScope} label:has(> input[type="checkbox"]) {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  font-size: 14px;
+  line-height: 20px;
+  cursor: pointer;
+}
+${formScope} input[type="checkbox"] {
+  flex: 0 0 auto;
+  width: 16px;
+  height: 16px;
+  margin: 2px 0;
+  accent-color: var(--dsw-alias-brand-primary);
+  cursor: inherit;
+}
+${formScope} label:has(> input[type="checkbox"]:disabled) {
+  cursor: default;
+  opacity: 0.5;
+}
+${formScope} button {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  min-height: 28px;
+  padding: 0 10px;
+  border: 0.5px solid var(--dsw-alias-border-l3, var(--dsw-alias-border-l2));
+  border-radius: var(--dsw-radius-sm, 6px);
+  background: transparent;
+  color: var(--dsw-alias-label-primary);
+  font: inherit;
+  font-size: 12px;
+  line-height: 18px;
+  cursor: pointer;
+}
+${formScope} button:hover:not(:disabled) {
+  background: var(--dsw-alias-interactive-bg-hover, var(--dsw-alias-bg-layer-3));
+}
+${formScope} button:active:not(:disabled) {
+  background: var(--dsw-alias-interactive-bg-active, var(--dsw-alias-bg-layer-3));
+}
+${formScope} button:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+${formScope} button.dsh-subscription-quiet {
+  border-color: transparent;
+  color: var(--dsw-alias-label-secondary, var(--dsw-alias-label-primary));
+}
+${formScope} :is(footer, .dsh-subscription-dialog-actions) button {
+  min-height: 34px;
+  padding: 0 14px;
+  border-radius: var(--dsw-radius-md, 8px);
+  font-size: 13px;
+  line-height: 1.5;
+}
+${formScope} button.dsh-subscription-primary {
+  border-color: transparent;
+  background: var(--dsw-alias-button-primary-fill, var(--dsw-alias-label-primary));
+  color: var(--dsw-alias-label-primary-foreground, var(--dsw-alias-bg-layer-1));
+  font-weight: 500;
+}
+${formScope} button.dsh-subscription-primary:hover:not(:disabled) {
+  background: var(--dsw-alias-button-primary-hover, var(--dsw-alias-label-secondary));
+}
+${formScope} button:focus-visible,
+${formScope} input[type="checkbox"]:focus-visible,
+${formScope} summary:focus-visible {
+  outline: var(--dsw-focus-ring-width, 2px) solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));
+  outline-offset: 2px;
+}
+${formScope} summary {
+  border-radius: var(--dsw-radius-sm, 6px);
+}
+${formScope} summary:hover {
+  color: var(--dsw-alias-label-secondary, var(--dsw-alias-label-primary));
+}
+`;
+/** Composer controls retain their own geometry, separate from settings forms. */
+const subscriptionChromeCss = `
+.dsh-subscription-usage-pill { corner-shape: round; }
+.dsh-subscription-usage-panel {
+  --dsw-elevation-stroke-color: var(--dsw-alias-border-l1);
+  backdrop-filter: var(--dsw-menu-backdrop-filter, none);
+}
+.dsh-subscription-speed button:hover:not(:disabled) {
+  --dsh-subscription-speed-hover: var(--dsw-alias-interactive-bg-hover);
+}
+.dsh-subscription-speed button:active:not(:disabled) {
+  --dsh-subscription-speed-hover: var(--dsw-alias-interactive-bg-active);
+}
+.dsh-subscription-speed button:disabled { opacity: 0.4; cursor: default; }
+.dsh-subscription-speed button:focus-visible,
+.dsh-subscription-usage-pill:focus-visible {
+  outline: var(--dsw-focus-ring-width, 2px) solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));
+  outline-offset: 2px;
+}
+`;
+
 //#endregion
 //#region src/client/ProviderAccountManager.tsx
-const border = "1px solid var(--dsw-alias-border-l2)";
-const control = {
-	font: "inherit",
-	color: "inherit",
-	background: "var(--dsw-alias-bg-layer-1)",
-	border,
-	borderRadius: 8,
-	padding: "7px 12px",
-	minWidth: 0
-};
-const button = {
-	...control,
-	cursor: "pointer"
-};
-const hint = {
-	margin: 0,
-	fontSize: 12,
-	lineHeight: 1.6,
-	color: "var(--dsw-alias-label-tertiary)"
-};
+const border = "0.5px solid var(--dsw-alias-border-l2)";
 const stack = {
 	display: "grid",
 	gap: 12,
@@ -922,7 +1159,8 @@ function ProviderAccountManager({ provider, name, rpc, t, onClose }) {
 			if (alive.current) setSaving(false);
 		}
 	}
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dialog", {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("dialog", {
+		className: "dsh-subscription-manager",
 		ref: dialog,
 		"aria-labelledby": title,
 		"aria-describedby": description,
@@ -934,16 +1172,9 @@ function ProviderAccountManager({ provider, name, rpc, t, onClose }) {
 			width: 620,
 			maxWidth: "calc(100vw - 32px)",
 			maxHeight: "calc(100dvh - 32px)",
-			boxSizing: "border-box",
-			padding: 0,
-			border,
-			borderRadius: 16,
-			color: "var(--dsw-alias-label-primary)",
-			background: "var(--dsw-alias-bg-layer-1)",
-			boxShadow: "0 20px 70px #0004",
 			overflow: "auto"
 		},
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: providerSettingsCss }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			style: {
 				...stack,
 				padding: 20
@@ -956,15 +1187,11 @@ function ProviderAccountManager({ provider, name, rpc, t, onClose }) {
 					},
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
 						id: title,
-						style: {
-							margin: 0,
-							fontSize: 18
-						},
+						style: { margin: 0 },
 						children: t("accountsTitle", { provider: name })
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						type: "button",
 						autoFocus: true,
-						style: button,
 						disabled: saving,
 						onClick: onClose,
 						children: t("imageClose")
@@ -972,25 +1199,20 @@ function ProviderAccountManager({ provider, name, rpc, t, onClose }) {
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 					id: description,
-					style: hint,
+					className: "dsh-subscription-hint",
 					children: t(provider === "cursor-subscription" ? "cursorAccountsHint" : "accountsHint")
 				}),
 				error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 					role: "alert",
-					style: {
-						...hint,
-						color: "var(--dsw-alias-state-error-primary)"
-					},
 					children: error
 				}),
 				loading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 					role: "status",
-					style: hint,
+					className: "dsh-subscription-hint",
 					children: t("accountsLoading")
 				}),
 				!loading && !catalog && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 					type: "button",
-					style: button,
 					onClick: () => setAttempt((value) => value + 1),
 					children: t("modelDefaultsRetry")
 				}),
@@ -1004,24 +1226,20 @@ function ProviderAccountManager({ provider, name, rpc, t, onClose }) {
 					},
 					children: [
 						catalog.accounts.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-							style: hint,
+							className: "dsh-subscription-hint",
 							children: t(provider === "cursor-subscription" ? "cursorManageSignIn" : "accountsEmpty")
 						}),
 						provider === "cursor-subscription" && catalog.accounts.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("fieldset", {
 							style: {
 								border,
-								borderRadius: 12,
+								borderRadius: "var(--dsw-radius-lg, 12px)",
 								padding: 14
 							},
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("legend", {
-								style: {
-									padding: "0 6px",
-									fontWeight: 600,
-									fontSize: 14
-								},
+								style: { padding: "0 6px" },
 								children: name
 							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-								style: hint,
+								className: "dsh-subscription-hint",
 								children: t("cursorConnected")
 							})]
 						}),
@@ -1033,7 +1251,7 @@ function ProviderAccountManager({ provider, name, rpc, t, onClose }) {
 								style: {
 									...stack,
 									border,
-									borderRadius: 12,
+									borderRadius: "var(--dsw-radius-lg, 12px)",
 									padding: 14,
 									margin: 0
 								},
@@ -1041,15 +1259,13 @@ function ProviderAccountManager({ provider, name, rpc, t, onClose }) {
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("legend", {
 										style: {
 											padding: "0 6px",
-											fontWeight: 600,
-											fontSize: 14,
 											overflowWrap: "anywhere",
 											maxWidth: "100%"
 										},
 										children: account.label
 									}),
 									account.unavailable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-										style: hint,
+										className: "dsh-subscription-hint",
 										children: t("accountsCatalogUnavailable")
 									}),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
@@ -1058,10 +1274,9 @@ function ProviderAccountManager({ provider, name, rpc, t, onClose }) {
 											gap: 6
 										},
 										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-											style: { fontSize: 12 },
+											className: "dsh-subscription-label",
 											children: t("accountsAlias")
 										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-											style: control,
 											value: preferences.alias ?? "",
 											placeholder: account.label,
 											onChange: (event) => {
@@ -1097,7 +1312,7 @@ function ProviderAccountManager({ provider, name, rpc, t, onClose }) {
 										t("accountsIndependent")
 									] }),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-										style: hint,
+										className: "dsh-subscription-hint",
 										children: t("accountsIndependentHint")
 									}),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("details", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("summary", {
@@ -1117,7 +1332,7 @@ function ProviderAccountManager({ provider, name, rpc, t, onClose }) {
 										},
 										children: [
 											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-												style: hint,
+												className: "dsh-subscription-hint",
 												children: t("accountsModelsHint")
 											}),
 											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", { children: [
@@ -1138,7 +1353,6 @@ function ProviderAccountManager({ provider, name, rpc, t, onClose }) {
 												style: actions,
 												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 													type: "button",
-													style: button,
 													onClick: () => edit(account.key, {
 														...preferences,
 														poolModels: models.map((model) => model.id)
@@ -1146,7 +1360,6 @@ function ProviderAccountManager({ provider, name, rpc, t, onClose }) {
 													children: t("modelsSelectAll")
 												}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 													type: "button",
-													style: button,
 													onClick: () => edit(account.key, {
 														...preferences,
 														poolModels: []
@@ -1162,10 +1375,7 @@ function ProviderAccountManager({ provider, name, rpc, t, onClose }) {
 													overflowY: "auto"
 												},
 												children: [models.map((model) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-													style: {
-														fontSize: 13,
-														overflowWrap: "anywhere"
-													},
+													style: { overflowWrap: "anywhere" },
 													children: [
 														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 															type: "checkbox",
@@ -1185,7 +1395,7 @@ function ProviderAccountManager({ provider, name, rpc, t, onClose }) {
 														model.unavailable && ` (${t("modelsUnavailable")})`
 													]
 												}, model.id)), models.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-													style: hint,
+													className: "dsh-subscription-hint",
 													children: t("accountsNoModels")
 												})]
 											})
@@ -1209,17 +1419,13 @@ function ProviderAccountManager({ provider, name, rpc, t, onClose }) {
 						...stack,
 						gap: 8,
 						borderTop: border,
-						padding: "14px 0 0",
+						padding: "14px 0 8px",
 						position: "sticky",
 						bottom: 0,
-						background: "var(--dsw-alias-bg-layer-1)"
+						background: "var(--dsw-alias-bg-layer-2, var(--dsw-alias-bg-layer-1))"
 					},
 					children: [saveError && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 						role: "alert",
-						style: {
-							...hint,
-							color: "var(--dsw-alias-state-error-primary)"
-						},
 						children: saveError
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						style: {
@@ -1228,16 +1434,12 @@ function ProviderAccountManager({ provider, name, rpc, t, onClose }) {
 						},
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 							type: "button",
-							style: button,
 							disabled: saving,
 							onClick: onClose,
 							children: t("cancel")
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 							type: "button",
-							style: {
-								...button,
-								fontWeight: 600
-							},
+							className: "dsh-subscription-primary",
 							disabled: loading || saving || !Object.keys(changes).length && !modelsDirty,
 							onClick: () => {
 								save();
@@ -1247,7 +1449,7 @@ function ProviderAccountManager({ provider, name, rpc, t, onClose }) {
 					})]
 				})
 			]
-		})
+		})]
 	});
 }
 
@@ -1402,7 +1604,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";
@@ -1410,7 +1613,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));
 }
@@ -1466,10 +1669,23 @@ function resetCountdownParts(ms) {
 		}
 	].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);
 }
-/** Only explicit intervals or provider-verified fixed durations support linear pace. */
+/**
+* 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;
@@ -1548,17 +1764,18 @@ function UsageMeter({ window: quota, t, style, observedAt, stale }) {
 		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 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") : elapsed === void 0 && preset !== "remaining" ? t("usageMeterUnknownTime") : state === "yellow" ? t("usageMeterAhead") : t("usageMeterNoWarning"),
+		!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) }),
-		elapsed === void 0 ? "" : lead > 0 ? t("usageMeterPaceAhead", { points: lead }) : lead < 0 ? t("usageMeterPaceBehind", { points: -lead }) : t("usageMeterPaceEven"),
+		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", {
@@ -1579,7 +1796,7 @@ function UsageMeter({ window: quota, t, style, observedAt, stale }) {
 			height: "100%",
 			borderRadius: "inherit",
 			width: `${used}%`,
-			background: usageBarColor(quota.usedPercent, elapsed, preset, fresh)
+			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,
@@ -1623,6 +1840,21 @@ const SOURCES = [
 function errorText(error) {
 	return error instanceof Error ? error.message : String(error);
 }
+/**
+* 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)();
@@ -1755,7 +1987,7 @@ function ExternalUsageCards({ rpc, t }) {
 							}),
 							snapshot?.windows?.map((window$1, index) => {
 								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");
+								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", {
@@ -2032,6 +2264,216 @@ function CursorCard({ rpc, t }) {
 	});
 }
 
+//#endregion
+//#region src/client/reset-credits-view.tsx
+const STATE_KEYS = {
+	available: "resetCreditAvailable",
+	notUsable: "resetCreditNotUsable",
+	paused: "resetCreditPaused",
+	exhausted: "resetCreditExhausted",
+	expired: "resetCreditExpired"
+};
+/**
+* Classify one grant. Expired outranks every other flag. A future
+* `cooldownUntil` or `usableNow: false` is not usable even when `claimable`
+* is true. `claimable` does not change the word: it is not an action.
+*/
+function resetCreditState(credit, now) {
+	if (credit.expiresAt !== void 0 && credit.expiresAt <= now) return "expired";
+	if (credit.paused === true) return "paused";
+	if (credit.resetsLeft === 0) return "exhausted";
+	if (credit.cooldownUntil !== void 0 && credit.cooldownUntil > now || credit.usableNow === false) return "notUsable";
+	return "available";
+}
+/**
+* Headline count. Codex passes one entry per credit, so the count is the
+* list length. Claude passes one entry per grant, so the count is the sum of
+* `resetsLeft` on grants that are neither expired nor paused. A missing
+* `resetsLeft` adds nothing; the row says the count is unavailable.
+*/
+function resetCreditsAvailableCount(credits, now, mode) {
+	if (mode === "credits") return credits.length;
+	let sum = 0;
+	for (const credit of credits) {
+		const state = resetCreditState(credit, now);
+		if (state === "expired" || state === "paused") continue;
+		if (typeof credit.resetsLeft === "number" && Number.isFinite(credit.resetsLeft) && credit.resetsLeft > 0) sum += credit.resetsLeft;
+	}
+	return sum;
+}
+function expiryText(t, credit) {
+	return credit.expiresAt === void 0 ? t("resetCreditExpiryUnknown") : t("resetCreditExpires", { date: new Date(credit.expiresAt).toLocaleString() });
+}
+function remainingText(t, credit) {
+	const left = credit.resetsLeft;
+	const total = credit.resetsTotal;
+	const hasLeft = typeof left === "number" && Number.isFinite(left);
+	if (hasLeft && typeof total === "number" && Number.isFinite(total)) return t("resetCreditRemaining", {
+		left,
+		total
+	});
+	if (hasLeft) return t("resetCreditLeft", { left });
+	return t("resetCreditRemainingUnknown");
+}
+/** Accessible name of one Claude grant row: state, remaining, and expiry, not a control name. */
+function resetCreditRowName(t, credit, now) {
+	const state = resetCreditState(credit, now);
+	const parts = [
+		t("resetCreditFull"),
+		t(STATE_KEYS[state]),
+		remainingText(t, credit),
+		expiryText(t, credit)
+	];
+	if (state === "notUsable" && credit.cooldownUntil !== void 0 && credit.cooldownUntil > now) parts.push(t("resetCreditCooldownUntil", { date: new Date(credit.cooldownUntil).toLocaleString() }));
+	return parts.join(", ");
+}
+/** Claude omits an empty grant list; Codex still shows a defined, possibly empty, list. */
+function showsResetCredits(provider, credits) {
+	if (provider === "codex") return credits !== void 0;
+	return (credits?.length ?? 0) > 0;
+}
+/** The error line the settings card mounts. Claude never interpolates provider text. */
+function ResetCreditsErrorLine({ provider, message: message$1, t }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		style: subscriptionCardStyles.error,
+		children: resetCreditsErrorText(provider, message$1, t)
+	});
+}
+/** Fixed sentence for Claude. Codex may include the lookup message; Claude must not. */
+function resetCreditsErrorText(provider, message$1, t) {
+	return provider === "claude" ? t("resetCreditsErrorFixed") : t("resetCreditsError", { message: message$1 });
+}
+const summaryStyle = {
+	...subscriptionCardStyles.usageMeta,
+	cursor: "pointer",
+	listStyle: "none",
+	justifyContent: "flex-start",
+	gap: 6
+};
+/**
+* The closed disclosure both providers share. Claude rows are plain text:
+* no button, no `role="button"`, and `cursor: default`, including when
+* `claimable` is true.
+*/
+function ResetCreditsDisclosure({ mode, credits, t, now = Date.now(), nextCredit, useAction, statusMessage }) {
+	const count = resetCreditsAvailableCount(credits, now, mode);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("details", {
+		className: "subscriptions-reset-credits",
+		style: subscriptionCardStyles.usageRow,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("summary", {
+				style: summaryStyle,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+						"aria-hidden": "true",
+						width: "12",
+						height: "12",
+						viewBox: "0 0 16 16",
+						style: { flexShrink: 0 },
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+							d: "m6 3 5 5-5 5",
+							fill: "none",
+							stroke: "currentColor",
+							strokeWidth: "1.5",
+							strokeLinecap: "round",
+							strokeLinejoin: "round"
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("resetCreditsTitle") }),
+					mode === "grants" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("resetCreditReadOnlyLabel") }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						style: { marginLeft: "auto" },
+						children: t("resetCreditsAvailable", { count })
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: ".subscriptions-reset-credits > summary::-webkit-details-marker { display: none; }.subscriptions-reset-credits[open] > summary > svg { transform: rotate(90deg); }" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				style: {
+					paddingLeft: 18,
+					marginTop: 6
+				},
+				children: [
+					mode === "grants" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						style: subscriptionCardStyles.status,
+						children: t("resetCreditReadOnly")
+					}),
+					credits.map((credit, index) => {
+						const state = resetCreditState(credit, now);
+						const showUse = mode === "credits" && useAction !== void 0 && credit === nextCredit;
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							"data-reset-state": mode === "grants" ? state : void 0,
+							"data-reset-claimable": mode === "grants" && credit.claimable === true ? "true" : void 0,
+							role: mode === "grants" ? "group" : void 0,
+							"aria-label": mode === "grants" ? resetCreditRowName(t, credit, now) : void 0,
+							style: {
+								...subscriptionCardStyles.usageMeta,
+								minHeight: 28,
+								gap: 12,
+								cursor: mode === "grants" ? "default" : void 0
+							},
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								style: {
+									display: "inline-flex",
+									alignItems: "center",
+									gap: 8,
+									flexShrink: 0
+								},
+								children: [
+									t("resetCreditFull"),
+									mode === "grants" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										"aria-hidden": "true",
+										"data-reset-state-word": state,
+										children: t(STATE_KEYS[state])
+									}),
+									showUse && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										"aria-disabled": useAction.disabled,
+										title: useAction.title,
+										style: {
+											minHeight: 22,
+											height: 22,
+											padding: "0 7px",
+											borderRadius: 6,
+											opacity: useAction.disabled ? .35 : 1,
+											cursor: useAction.disabled ? "not-allowed" : "pointer"
+										},
+										onClick: () => {
+											if (!useAction.disabled) useAction.onUse();
+										},
+										children: useAction.busy ? t("resetUseChecking") : useAction.label
+									})
+								]
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								style: { textAlign: "right" },
+								children: [
+									mode === "grants" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+										"aria-hidden": "true",
+										children: [remainingText(t, credit), " · "]
+									}),
+									mode === "grants" && state === "notUsable" && credit.cooldownUntil !== void 0 && credit.cooldownUntil > now && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+										"aria-hidden": "true",
+										children: [t("resetCreditCooldownUntil", { date: new Date(credit.cooldownUntil).toLocaleString() }), " · "]
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										"aria-hidden": mode === "grants" ? true : void 0,
+										children: expiryText(t, credit)
+									})
+								]
+							})]
+						}, credit.id ?? index);
+					}),
+					statusMessage !== void 0 && statusMessage !== "" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						role: "status",
+						style: subscriptionCardStyles.status,
+						children: statusMessage
+					})
+				]
+			})
+		]
+	});
+}
+
 //#endregion
 //#region src/client/UsageBadgeDisplaySetting.tsx
 /** Browser-local display preference; never changes provider or account settings. */
@@ -2050,7 +2492,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);
@@ -2059,13 +2501,20 @@ 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", {
@@ -2122,8 +2571,9 @@ function UsageBadgeDisplaySetting({ t }) {
 }
 const styles$6 = {
 	card: {
-		border: "1px solid var(--dsw-alias-border-l2)",
-		borderRadius: 12,
+		border: "0.5px solid var(--dsw-alias-settings-card-stroke, var(--dsw-alias-border-l4))",
+		borderRadius: "var(--dsw-radius-xl, 20px)",
+		background: "var(--dsw-alias-settings-card-fill, var(--dsw-alias-bg-layer-2))",
 		padding: "12px 14px",
 		display: "flex",
 		flexDirection: "column",
@@ -2132,21 +2582,12 @@ const styles$6 = {
 	field: {
 		display: "flex",
 		flexDirection: "column",
-		gap: 4,
-		fontSize: 14,
-		lineHeight: "22px"
-	},
-	select: {
-		height: 32,
-		width: "100%",
-		boxSizing: "border-box",
-		border: "1px solid var(--dsw-alias-border-l2)",
-		borderRadius: 8,
-		padding: "0 10px",
-		font: "inherit",
-		background: "var(--dsw-alias-bg-layer-1)",
-		color: "var(--dsw-alias-label-primary)"
+		gap: 6,
+		fontSize: 13,
+		fontWeight: 500,
+		lineHeight: "20px"
 	},
+	select: { width: "100%" },
 	hint: {
 		margin: 0,
 		fontSize: 12,
@@ -2226,7 +2667,12 @@ const styles$5 = {
 		fontSize: 14,
 		lineHeight: "22px"
 	},
-	card: subscriptionCardStyles.card,
+	card: {
+		...subscriptionCardStyles.card,
+		border: "0.5px solid var(--dsw-alias-settings-card-stroke, var(--dsw-alias-border-l4))",
+		borderRadius: "var(--dsw-radius-xl, 20px)",
+		background: "var(--dsw-alias-settings-card-fill, var(--dsw-alias-bg-layer-2))"
+	},
 	cardHeader: subscriptionCardStyles.header,
 	dot: subscriptionCardStyles.dot,
 	name: subscriptionCardStyles.name,
@@ -2239,21 +2685,32 @@ const styles$5 = {
 	},
 	errorLine: subscriptionCardStyles.error,
 	actions: subscriptionCardStyles.actions,
-	button: subscriptionCardStyles.button,
-	usage: subscriptionCardStyles.usage,
+	usage: {
+		...subscriptionCardStyles.usage,
+		borderTop: "0.5px solid var(--dsw-alias-border-l2)"
+	},
 	usageHeader: subscriptionCardStyles.usageHeader,
 	usageTitle: subscriptionCardStyles.usageTitle,
 	usagePlan: subscriptionCardStyles.usagePlan,
-	usageRefresh: subscriptionCardStyles.usageRefresh,
+	usageRefresh: {
+		minHeight: 22,
+		height: 22,
+		padding: "0 8px",
+		marginLeft: "auto"
+	},
 	usageRow: subscriptionCardStyles.usageRow,
 	usageMeta: subscriptionCardStyles.usageMeta,
-	accountRow: subscriptionCardStyles.account,
+	accountRow: {
+		...subscriptionCardStyles.account,
+		border: "0.5px solid var(--dsw-alias-border-l2)",
+		borderRadius: "var(--dsw-radius-lg, 16px)"
+	},
 	accountHeader: subscriptionCardStyles.accountHeader,
 	accountName: subscriptionCardStyles.accountName,
 	starButton: {
 		border: "none",
-		background: "transparent",
 		padding: 0,
+		width: 28,
 		font: "inherit",
 		fontSize: 14,
 		lineHeight: "20px",
@@ -2265,8 +2722,8 @@ const styles$5 = {
 		display: "flex",
 		flexDirection: "column",
 		gap: 6,
-		border: "1px solid var(--dsw-alias-border-l2)",
-		borderRadius: 8,
+		border: "0.5px solid var(--dsw-alias-border-l2)",
+		borderRadius: "var(--dsw-radius-lg, 16px)",
 		padding: "10px 12px",
 		background: "var(--dsw-alias-bg-layer-1)"
 	},
@@ -2278,6 +2735,21 @@ const styles$5 = {
 		color: "var(--dsw-alias-label-primary)",
 		userSelect: "all"
 	},
+	manual: {
+		fontSize: 13,
+		lineHeight: "20px"
+	},
+	manualRow: {
+		display: "flex",
+		flexWrap: "wrap",
+		gap: 8,
+		alignItems: "center",
+		marginTop: 8
+	},
+	manualInput: {
+		flex: "1 1 200px",
+		minWidth: 0
+	},
 	modalOverlay: {
 		position: "fixed",
 		inset: 0,
@@ -2286,7 +2758,8 @@ const styles$5 = {
 		alignItems: "center",
 		justifyContent: "center",
 		padding: 16,
-		background: "rgba(0, 0, 0, 0.45)"
+		background: "var(--dsw-alias-bg-mask-1, #0006)",
+		backdropFilter: "var(--dsw-mask-blur, none)"
 	},
 	modal: {
 		width: 460,
@@ -2298,9 +2771,10 @@ const styles$5 = {
 		flexDirection: "column",
 		gap: 12,
 		padding: "16px 18px",
-		borderRadius: 12,
-		background: "var(--dsw-alias-bg-layer-1)",
-		border: "1px solid var(--dsw-alias-border-l2)"
+		borderRadius: "var(--dsw-radius-panel, 28px)",
+		background: "var(--dsw-alias-bg-layer-2)",
+		border: 0,
+		boxShadow: "var(--dsw-elevation-prominent)"
 	},
 	modalHeader: {
 		display: "flex",
@@ -2308,9 +2782,9 @@ const styles$5 = {
 		gap: 8
 	},
 	modalTitle: {
-		fontWeight: 600,
-		fontSize: 15,
-		lineHeight: "22px",
+		fontWeight: 500,
+		fontSize: 16,
+		lineHeight: "24px",
 		color: "var(--dsw-alias-label-primary)"
 	}
 };
@@ -2380,10 +2854,22 @@ function SubscriptionsSection(props) {
 	const [observedAt, setObservedAt] = (0, react.useState)({});
 	const [usageErrors, setUsageErrors] = (0, react.useState)({});
 	const [usageLoading, setUsageLoading] = (0, react.useState)({});
+	const [resetConfirmation, setResetConfirmation] = (0, react.useState)();
+	const [resetBusy, setResetBusy] = (0, react.useState)(false);
+	const [resetAcknowledged, setResetAcknowledged] = (0, react.useState)(false);
+	const [resetMessage, setResetMessage] = (0, react.useState)("");
+	const [resetAccount, setResetAccount] = (0, react.useState)();
+	const resetDialogRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		if (resetConfirmation) resetDialogRef.current?.showModal();
+		else resetDialogRef.current?.close();
+	}, [resetConfirmation]);
+	const resetInflight = (0, react.useRef)(false);
 	const mountedRef = (0, react.useRef)(true);
 	const pollersRef = (0, react.useRef)(/* @__PURE__ */ new Map());
 	/** Accounts with a `usage` call in flight; guards the auto-fetch effect against re-entry. */
-	const usageInflightRef = (0, react.useRef)(/* @__PURE__ */ new Set());
+	/** In-flight usage reads per key, holding the promise so a forced read can wait one out. */
+	const usageInflightRef = (0, react.useRef)(/* @__PURE__ */ new Map());
 	const usageRosterSignatureRef = (0, react.useRef)();
 	const [managedProvider, setManagedProvider] = (0, react.useState)();
 	const setProviderError = (0, react.useCallback)((provider, message$1) => {
@@ -2460,47 +2946,97 @@ function SubscriptionsSection(props) {
 		};
 	}, [refresh, startPolling]);
 	const loadUsage = (0, react.useCallback)(async (provider, account, force = false) => {
+		if (rpc === void 0) return;
 		const key = `${provider}:${account}`;
+		const pending = usageInflightRef.current.get(key);
+		if (pending !== void 0) {
+			if (!force) return;
+			await pending;
+		}
 		if (rpc === void 0 || usageInflightRef.current.has(key)) return;
-		usageInflightRef.current.add(key);
-		setUsageLoading((prev) => ({
-			...prev,
-			[key]: true
-		}));
-		try {
-			const usage = await callSubscriptionsAuth(rpc, "usage", {
-				provider,
-				account,
-				...force ? { force: true } : {}
-			});
-			if (!mountedRef.current) return;
-			setUsages((prev) => ({
+		const read = (async () => {
+			setUsageLoading((prev) => ({
 				...prev,
-				[key]: usage
+				[key]: true
 			}));
-			setObservedAt((prev) => ({
-				...prev,
-				[key]: usage.observedAt ?? Date.now()
-			}));
-			window.dispatchEvent(new Event(USAGE_BADGE_REFRESH_EVENT));
-			setUsageErrors((prev) => {
-				const next = { ...prev };
-				delete next[key];
-				return next;
+			try {
+				const usage = await callSubscriptionsAuth(rpc, "usage", {
+					provider,
+					account,
+					...force ? { force: true } : {}
+				});
+				if (!mountedRef.current) return;
+				setUsages((prev) => ({
+					...prev,
+					[key]: usage
+				}));
+				setObservedAt((prev) => ({
+					...prev,
+					[key]: usage.observedAt ?? Date.now()
+				}));
+				window.dispatchEvent(new Event(USAGE_BADGE_REFRESH_EVENT));
+				setUsageErrors((prev) => {
+					const next = { ...prev };
+					delete next[key];
+					return next;
+				});
+			} catch (error) {
+				if (mountedRef.current) setUsageErrors((prev) => ({
+					...prev,
+					[key]: messageOf(error)
+				}));
+			} finally {
+				usageInflightRef.current.delete(key);
+				if (mountedRef.current) setUsageLoading((prev) => ({
+					...prev,
+					[key]: false
+				}));
+			}
+		})();
+		usageInflightRef.current.set(key, read);
+		await read;
+	}, [rpc]);
+	async function prepareReset(account) {
+		if (!rpc || resetInflight.current) return;
+		resetInflight.current = true;
+		setResetBusy(true);
+		setResetAccount(account);
+		setResetConfirmation(void 0);
+		setResetMessage("");
+		try {
+			const result = await callSubscriptionsAuth(rpc, "prepareReset", { account });
+			setResetAcknowledged(false);
+			setResetConfirmation({
+				...result,
+				account
 			});
 		} catch (error) {
-			if (mountedRef.current) setUsageErrors((prev) => ({
-				...prev,
-				[key]: messageOf(error)
-			}));
+			setResetMessage(messageOf(error));
 		} finally {
-			usageInflightRef.current.delete(key);
-			if (mountedRef.current) setUsageLoading((prev) => ({
-				...prev,
-				[key]: false
-			}));
+			resetInflight.current = false;
+			setResetBusy(false);
 		}
-	}, [rpc]);
+	}
+	async function consumeReset() {
+		if (!rpc || !resetConfirmation || !resetAcknowledged || resetInflight.current) return;
+		const { account, ticket } = resetConfirmation;
+		resetInflight.current = true;
+		setResetBusy(true);
+		setResetConfirmation(void 0);
+		try {
+			await callSubscriptionsAuth(rpc, "consumeReset", {
+				account,
+				ticket
+			});
+			setResetMessage(t("resetUseSuccess"));
+		} catch (error) {
+			setResetMessage(messageOf(error));
+		} finally {
+			await loadUsage("codex", account, true);
+			resetInflight.current = false;
+			setResetBusy(false);
+		}
+	}
 	(0, react.useEffect)(() => {
 		const live = /* @__PURE__ */ new Set();
 		for (const { id } of PROVIDERS) for (const account of statuses[id]?.accounts ?? []) {
@@ -2648,8 +3184,10 @@ function SubscriptionsSection(props) {
 		children: t("unavailable")
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "dsh-subscriptions-settings",
 		style: styles$5.section,
 		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: providerSettingsCss }),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 				style: styles$5.intro,
 				children: t("intro")
@@ -2698,6 +3236,10 @@ function SubscriptionsSection(props) {
 							const usage = usages[usageKey];
 							const usageError = usageErrors[usageKey];
 							const display = account.account ?? account.key;
+							const sortedCredits = [...usage?.resetCredits ?? []].sort((a, b) => (a.expiresAt ?? Infinity) - (b.expiresAt ?? Infinity));
+							const nextReset = sortedCredits.find((c) => c.expiresAt === void 0 || c.expiresAt > Date.now());
+							const resetBlock = usage ? resetActionBlock(usage) : "resetUseRefresh";
+							const resetDisabled = resetBusy || resetBlock !== void 0;
 							const showUsage = usage?.supported !== false && (usage !== void 0 || usageError !== void 0 || usageLoading[usageKey] === true);
 							return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								style: styles$5.accountRow,
@@ -2728,7 +3270,6 @@ function SubscriptionsSection(props) {
 										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 											type: "button",
 											style: {
-												...styles$5.button,
 												marginLeft: "auto",
 												flexShrink: 0
 											},
@@ -2754,13 +3295,7 @@ function SubscriptionsSection(props) {
 												}),
 												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 													type: "button",
-													style: {
-														...styles$5.usageRefresh,
-														...usageLoading[usageKey] === true ? {
-															opacity: .5,
-															cursor: "default"
-														} : {}
-													},
+													style: styles$5.usageRefresh,
 													disabled: usageLoading[usageKey] === true,
 													onClick: () => {
 														loadUsage(id, account.key, true);
@@ -2795,6 +3330,28 @@ function SubscriptionsSection(props) {
 													stale: usageError !== void 0 || usage.stale === true
 												})]
 											}, index);
+										}),
+										(id === "codex" || id === "claude") && usage?.resetCreditsError !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResetCreditsErrorLine, {
+											provider: id,
+											message: usage.resetCreditsError,
+											t
+										}),
+										(id === "codex" || id === "claude") && showsResetCredits(id, usage?.resetCredits) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResetCreditsDisclosure, {
+											mode: id === "claude" ? "grants" : "credits",
+											credits: sortedCredits,
+											t,
+											...nextReset !== void 0 ? { nextCredit: nextReset } : {},
+											...id === "codex" ? { useAction: {
+												accountKey: account.key,
+												busy: resetBusy && resetAccount === account.key,
+												disabled: resetDisabled,
+												title: t(resetBusy ? "resetUseChecking" : resetBlock ?? "resetUseReady"),
+												label: t("resetUseButton"),
+												onUse: () => {
+													if (!resetDisabled) prepareReset(account.key);
+												}
+											} } : {},
+											...resetAccount === account.key && resetMessage !== "" ? { statusMessage: resetMessage } : {}
 										})
 									]
 								})]
@@ -2805,7 +3362,6 @@ function SubscriptionsSection(props) {
 							children: [
 								!busy && accounts.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 									type: "button",
-									style: styles$5.button,
 									onClick: () => {
 										login(id);
 									},
@@ -2813,14 +3369,12 @@ function SubscriptionsSection(props) {
 								}),
 								!busy && accounts.length > 0 && id === "claude" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 									type: "button",
-									style: styles$5.button,
 									onClick: () => {
 										login(id, "oauth");
 									},
 									children: t("addAccountOAuth")
 								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 									type: "button",
-									style: styles$5.button,
 									onClick: () => {
 										login(id, "keychain");
 									},
@@ -2828,7 +3382,6 @@ function SubscriptionsSection(props) {
 								})] }),
 								!busy && accounts.length > 0 && id !== "claude" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 									type: "button",
-									style: styles$5.button,
 									onClick: () => {
 										login(id);
 									},
@@ -2836,7 +3389,6 @@ function SubscriptionsSection(props) {
 								}),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 									type: "button",
-									style: styles$5.button,
 									"aria-haspopup": "dialog",
 									onClick: () => setManagedProvider({
 										id,
@@ -2846,7 +3398,6 @@ function SubscriptionsSection(props) {
 								}),
 								busy && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 									type: "button",
-									style: styles$5.button,
 									onClick: () => {
 										cancel(id);
 									},
@@ -2873,14 +3424,12 @@ function SubscriptionsSection(props) {
 									style: styles$5.actions,
 									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 										type: "button",
-										style: styles$5.button,
 										onClick: () => {
 											copyDeviceCode(id, deviceCode.userCode);
 										},
 										children: copiedCode === id ? t("deviceCodeCopied") : t("deviceCodeCopy")
 									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 										type: "button",
-										style: styles$5.button,
 										onClick: () => {
 											window.open(deviceCode.verificationUrl, "_blank", "noopener");
 										},
@@ -2903,7 +3452,6 @@ function SubscriptionsSection(props) {
 									}))
 								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 									type: "button",
-									style: styles$5.button,
 									onClick: () => {
 										submitManual(id);
 									},
@@ -2928,6 +3476,90 @@ function SubscriptionsSection(props) {
 				rpc,
 				t,
 				onClose: () => setManagedProvider(void 0)
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: ".subscriptions-reset-dialog::backdrop { background: var(--dsw-alias-bg-mask-1, #0006); backdrop-filter: var(--dsw-mask-blur, none); }" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dialog", {
+				ref: resetDialogRef,
+				className: "subscriptions-reset-dialog",
+				"aria-labelledby": "subscriptions-reset-title",
+				onCancel: () => setResetConfirmation(void 0),
+				onClose: () => setResetConfirmation(void 0),
+				style: {
+					...styles$5.modal,
+					display: resetConfirmation ? "flex" : "none",
+					margin: "auto",
+					color: "var(--dsw-alias-label-primary)"
+				},
+				children: resetConfirmation && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+						id: "subscriptions-reset-title",
+						style: {
+							...styles$5.modalTitle,
+							margin: 0
+						},
+						children: t("resetUseConfirmTitle")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						style: {
+							...styles$5.statusLine,
+							overflowWrap: "anywhere"
+						},
+						children: statuses.codex?.accounts.find((a) => a.key === resetConfirmation.account)?.account ?? resetConfirmation.account
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						style: {
+							...styles$5.usageMeta,
+							gap: 12
+						},
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("usageWeekly") }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("strong", { children: [Math.round(resetConfirmation.weeklyUsedPercent), "%"] })]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						style: styles$5.usageMeta,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: resetConfirmation.creditExpiresAt === void 0 ? t("resetCreditExpiryUnknown") : t("resetCreditExpires", { date: new Date(resetConfirmation.creditExpiresAt).toLocaleString() }) })
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						style: {
+							...styles$5.statusLine,
+							margin: "4px 0"
+						},
+						children: t("resetUseWarning")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+						style: {
+							display: "flex",
+							gap: 8,
+							alignItems: "flex-start",
+							fontSize: 12
+						},
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							type: "checkbox",
+							checked: resetAcknowledged,
+							onChange: (e) => setResetAcknowledged(e.target.checked)
+						}), t("resetUseAcknowledge")]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "dsh-subscription-dialog-actions",
+						style: {
+							...styles$5.actions,
+							justifyContent: "flex-end",
+							marginTop: 8
+						},
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							autoFocus: true,
+							onClick: () => setResetConfirmation(void 0),
+							children: t("cancel")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: "dsh-subscription-primary",
+							disabled: !resetAcknowledged || resetBusy,
+							onClick: () => {
+								consumeReset();
+							},
+							children: t("resetUseConfirm")
+						})]
+					})
+				] })
 			})
 		]
 	});
@@ -3214,20 +3846,42 @@ const HOST_CONTRACT = {
 		package: "@deepseek-ai/dsh-client-ui-theme",
 		names: [
 			"--dsw-alias-bg-layer-1",
+			"--dsw-alias-bg-layer-2",
+			"--dsw-alias-bg-layer-3",
+			"--dsw-alias-bg-mask-1",
 			"--dsw-alias-bg-skeleton",
+			"--dsw-alias-border-l1",
 			"--dsw-alias-border-l2",
 			"--dsw-alias-border-l2-darkmode-thin",
+			"--dsw-alias-border-l3",
+			"--dsw-alias-border-l4",
+			"--dsw-alias-brand-primary",
+			"--dsw-alias-button-primary-fill",
+			"--dsw-alias-button-primary-hover",
+			"--dsw-alias-interactive-bg-active",
 			"--dsw-alias-interactive-bg-hover",
 			"--dsw-alias-interactive-bg-hover-solid",
 			"--dsw-alias-label-dimmed",
 			"--dsw-alias-label-primary",
+			"--dsw-alias-label-primary-foreground",
 			"--dsw-alias-label-secondary",
 			"--dsw-alias-label-tertiary",
+			"--dsw-alias-settings-card-fill",
+			"--dsw-alias-settings-card-stroke",
+			"--dsw-alias-state-business-primary",
 			"--dsw-alias-state-error-primary",
 			"--dsw-alias-state-success-primary",
 			"--dsw-alias-state-warn-label",
 			"--dsw-elevation-prominent",
+			"--dsw-focus-ring-color",
+			"--dsw-focus-ring-width",
+			"--dsw-mask-blur",
 			"--dsw-menu-backdrop-filter",
+			"--dsw-radius-lg",
+			"--dsw-radius-md",
+			"--dsw-radius-panel",
+			"--dsw-radius-sm",
+			"--dsw-radius-xl",
 			"--dsw-specific-menu"
 		]
 	}
@@ -3765,6 +4419,7 @@ function SpeedSelect({ loadSpeed, setSpeed, t }) {
 	const triggerLabel = `${translate("speed")} · ${tierName(state.tier)}`;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		ref: rootRef,
+		className: "dsh-subscription-speed",
 		style: styles$1.root,
 		onKeyDown: (event) => {
 			if (event.key === "Escape" && open) {
@@ -3772,46 +4427,50 @@ function SpeedSelect({ loadSpeed, setSpeed, t }) {
 				setOpen(false);
 			}
 		},
-		children: [open && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			style: styles$1.menu,
-			role: "menu",
-			"aria-label": translate("speed"),
-			children: TIERS.map((tier) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: subscriptionChromeCss }),
+			open && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				style: styles$1.menu,
+				role: "menu",
+				"aria-label": translate("speed"),
+				children: TIERS.map((tier) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					role: "menuitemradio",
+					"aria-checked": tier === state.tier,
+					style: styles$1.item,
+					disabled: busy,
+					onClick: () => {
+						choose(tier);
+					},
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						style: styles$1.itemCheck,
+						children: tier === state.tier ? "✓" : ""
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						style: styles$1.itemText,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							style: styles$1.itemName,
+							children: tierName(tier)
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							style: styles$1.itemDescription,
+							children: tierDescription(tier)
+						})]
+					})]
+				}, tier))
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				type: "button",
-				role: "menuitemradio",
-				"aria-checked": tier === state.tier,
-				style: styles$1.item,
+				style: styles$1.trigger,
+				"aria-haspopup": "menu",
+				"aria-expanded": open,
+				title: triggerLabel,
 				disabled: busy,
 				onClick: () => {
-					choose(tier);
+					if (open) setOpen(false);
+					else show();
 				},
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					style: styles$1.itemCheck,
-					children: tier === state.tier ? "✓" : ""
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-					style: styles$1.itemText,
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						style: styles$1.itemName,
-						children: tierName(tier)
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						style: styles$1.itemDescription,
-						children: tierDescription(tier)
-					})]
-				})]
-			}, tier))
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-			type: "button",
-			style: styles$1.trigger,
-			"aria-haspopup": "menu",
-			"aria-expanded": open,
-			title: triggerLabel,
-			disabled: busy,
-			onClick: () => {
-				if (open) setOpen(false);
-				else show();
-			},
-			children: triggerLabel
-		})]
+				children: triggerLabel
+			})
+		]
 	});
 }
 const styles$1 = {
@@ -3820,9 +4479,9 @@ const styles$1 = {
 		display: "inline-flex"
 	},
 	trigger: {
-		border: "1px solid var(--dsw-alias-border-l2)",
-		borderRadius: 8,
-		background: "transparent",
+		border: "0.5px solid var(--dsw-alias-border-l3)",
+		borderRadius: "var(--dsw-radius-sm, 8px)",
+		background: "var(--dsh-subscription-speed-hover, transparent)",
 		color: "var(--dsw-alias-label-secondary)",
 		font: "inherit",
 		fontSize: 12,
@@ -3839,9 +4498,10 @@ const styles$1 = {
 		minWidth: 180,
 		padding: 4,
 		zIndex: 20,
-		background: "var(--dsw-alias-bg-layer-1)",
-		border: "1px solid var(--dsw-alias-border-l2)",
-		borderRadius: 8,
+		background: "var(--dsw-specific-menu, var(--dsw-alias-bg-layer-2))",
+		border: 0,
+		boxShadow: "var(--dsw-elevation-prominent)",
+		borderRadius: "var(--dsw-radius-lg, 16px)",
 		display: "flex",
 		flexDirection: "column",
 		gap: 2
@@ -3852,8 +4512,8 @@ const styles$1 = {
 		gap: 6,
 		width: "100%",
 		border: "none",
-		borderRadius: 6,
-		background: "transparent",
+		borderRadius: "var(--dsw-radius-sm, 8px)",
+		background: "var(--dsh-subscription-speed-hover, transparent)",
 		padding: "6px 8px",
 		cursor: "pointer",
 		font: "inherit",
@@ -3893,6 +4553,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. */
@@ -4092,6 +4754,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);
@@ -4125,7 +4805,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);
@@ -4135,6 +4815,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);
@@ -4298,99 +4980,119 @@ 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();
 	};
 	const pill = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 		ref: rootRef,
 		style: styles.anchor,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-			type: "button",
-			style: {
-				...styles.pill,
-				...hover || open ? styles.pillActive : {}
-			},
-			"aria-haspopup": "dialog",
-			"aria-expanded": open,
-			"aria-label": `${title} · ${label}`,
-			title,
-			onMouseEnter: () => {
-				setHover(true);
-			},
-			onMouseLeave: () => {
-				setHover(false);
-			},
-			onClick: toggle,
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UsageBadgeIcon, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				style: styles.label,
-				children: label
-			})]
-		}), open && (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			ref: panelRef,
-			role: "dialog",
-			"aria-label": title,
-			style: {
-				...styles.panel,
-				...pos ?? MEASURE_STYLE
-			},
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					style: styles.title,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-						style: styles.titleLabel,
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UsageBadgeIcon, {}), title]
-					})
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					style: styles.titleRule,
-					"aria-hidden": true
-				}),
-				expanded.map((d, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-					style: index === 0 ? void 0 : styles.section,
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						style: styles.providerRow,
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-							style: styles.providerName,
-							children: [d.name, d.provider === current && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								style: styles.currentTag,
-								children: translate("usageBadgeCurrent")
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: subscriptionChromeCss }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				type: "button",
+				className: "dsh-subscription-usage-pill",
+				style: {
+					...styles.pill,
+					...hover || open ? styles.pillActive : {}
+				},
+				"aria-haspopup": "dialog",
+				"aria-expanded": open,
+				"aria-label": `${title} · ${label}`,
+				title,
+				onMouseEnter: () => {
+					setHover(true);
+				},
+				onMouseLeave: () => {
+					setHover(false);
+				},
+				onClick: toggle,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UsageBadgeIcon, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					style: styles.label,
+					children: label
+				})]
+			}),
+			open && (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				ref: panelRef,
+				role: "dialog",
+				"aria-label": title,
+				className: "dsh-subscription-usage-panel",
+				style: {
+					...styles.panel,
+					...pos ?? MEASURE_STYLE
+				},
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						style: styles.title,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							style: styles.titleLabel,
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UsageBadgeIcon, {}), title]
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						style: styles.titleRule,
+						"aria-hidden": true
+					}),
+					expanded.map((d, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+						style: index === 0 ? void 0 : styles.section,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							style: styles.providerRow,
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								style: styles.providerName,
+								children: [d.name, d.provider === current && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									style: styles.currentTag,
+									children: translate("usageBadgeCurrent")
+								})]
+							}), d.accounts.length === 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccountMeta, {
+								account: d.accounts[0],
+								translate
 							})]
-						}), d.accounts.length === 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccountMeta, {
-							account: d.accounts[0],
-							translate
-						})]
-					}), d.accounts.map((account, accountIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						style: accountIndex === 0 ? void 0 : styles.accountBlock,
-						children: [d.accounts.length > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							style: styles.accountRow,
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccountMeta, {
-								account,
+						}), d.accounts.map((account, accountIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							style: accountIndex === 0 ? void 0 : styles.accountBlock,
+							children: [d.accounts.length > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								style: styles.accountRow,
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccountMeta, {
+									account,
+									translate
+								})
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccountWindows, {
+								windows: account.windows,
+								observedAt: account.observedAt,
+								stale: account.stale,
+								model: d.provider === dialogProvider ? dialogModel : void 0,
+								provider: d.provider,
 								translate
-							})
-						}), /* @__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
-						}, `${d.provider}:${badgeSelection?.model ?? ""}`)]
-					}, account.key))]
-				}, d.provider))
-			]
-		}), document.body)]
+							}, `${d.provider}:${dialogModel ?? ""}`)]
+						}, account.key))]
+					}, d.provider))
+				]
+			}), document.body)
+		]
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [seat, statsRow !== null && statsRow.isConnected ? (0, react_dom.createPortal)(pill, statsRow) : pill] });
 }
@@ -4490,13 +5192,13 @@ const styles = {
 		maxWidth: "100%",
 		color: "var(--dsw-alias-label-tertiary)",
 		font: "inherit",
-		fontSize: "var(--dsh-content-font-size-secondary, 13px)",
+		fontSize: "calc(var(--dsh-content-font-size-secondary, 13px) - 1px)",
 		fontVariantNumeric: "tabular-nums",
-		lineHeight: "20px",
+		lineHeight: "calc(20px + var(--dsh-content-font-delta-secondary, 0px))",
 		whiteSpace: "nowrap",
 		background: "transparent",
 		border: "none",
-		borderRadius: 24,
+		borderRadius: 999,
 		alignItems: "center",
 		gap: 6,
 		padding: "1px 8px",
@@ -4528,7 +5230,7 @@ const styles = {
 		color: "var(--dsw-alias-label-secondary)",
 		cursor: "default",
 		border: 0,
-		borderRadius: 12,
+		borderRadius: "var(--dsw-radius-lg, 16px)",
 		padding: 16,
 		fontSize: 12,
 		lineHeight: "18px"