dsh-subscriptions 0.1.3 → 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",
@@ -311,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: "未配置",
@@ -379,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
 /**
@@ -451,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",
@@ -569,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: {
@@ -582,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);
@@ -637,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"),
@@ -648,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)
@@ -657,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: []
@@ -705,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) => {
@@ -741,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")}`,
@@ -798,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,
@@ -924,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,
@@ -936,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
@@ -958,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")
@@ -974,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")
 				}),
@@ -1006,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")
 							})]
 						}),
@@ -1035,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
 								},
@@ -1043,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", {
@@ -1060,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) => {
@@ -1099,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", {
@@ -1119,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: [
@@ -1140,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)
@@ -1148,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: []
@@ -1164,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",
@@ -1187,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")
 												})]
 											})
@@ -1211,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: {
@@ -1230,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();
@@ -1249,7 +1449,7 @@ function ProviderAccountManager({ provider, name, rpc, t, onClose }) {
 					})]
 				})
 			]
-		})
+		})]
 	});
 }
 
@@ -2064,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. */
@@ -2161,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",
@@ -2171,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,
@@ -2265,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,
@@ -2278,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",
@@ -2304,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)"
 	},
@@ -2317,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,
@@ -2325,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,
@@ -2337,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",
@@ -2347,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)"
 	}
 };
@@ -2419,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) => {
@@ -2499,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 ?? []) {
@@ -2687,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")
@@ -2737,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,
@@ -2767,7 +3270,6 @@ function SubscriptionsSection(props) {
 										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 											type: "button",
 											style: {
-												...styles$5.button,
 												marginLeft: "auto",
 												flexShrink: 0
 											},
@@ -2793,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);
@@ -2834,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 } : {}
 										})
 									]
 								})]
@@ -2844,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);
 									},
@@ -2852,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");
 									},
@@ -2867,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);
 									},
@@ -2875,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,
@@ -2885,7 +3398,6 @@ function SubscriptionsSection(props) {
 								}),
 								busy && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 									type: "button",
-									style: styles$5.button,
 									onClick: () => {
 										cancel(id);
 									},
@@ -2912,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");
 										},
@@ -2942,7 +3452,6 @@ function SubscriptionsSection(props) {
 									}))
 								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 									type: "button",
-									style: styles$5.button,
 									onClick: () => {
 										submitManual(id);
 									},
@@ -2967,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")
+						})]
+					})
+				] })
 			})
 		]
 	});
@@ -3253,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"
 		]
 	}
@@ -3804,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) {
@@ -3811,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 = {
@@ -3859,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,
@@ -3878,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
@@ -3891,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",
@@ -4391,81 +5012,87 @@ function SubscriptionUsageBadge({ rpc, currentModel, t, rotationMs }) {
 	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 === dialogProvider ? dialogModel : void 0,
-							provider: d.provider,
-							translate
-						}, `${d.provider}:${dialogModel ?? ""}`)]
-					}, 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] });
 }
@@ -4565,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",
@@ -4603,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"