dsh-subscriptions 0.1.3 → 0.1.5

package/lib/client/locales.js

@@ -104,6 +104,35 @@ export 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',
@@ -276,6 +305,35 @@ export 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: '未配置',

package/lib/client/provider-settings-styles.d.ts

@@ -0,0 +1,3 @@
+export declare const providerSettingsCss = "\n.dsh-subscription-manager {\n  box-sizing: border-box;\n  padding: 0;\n  border: 0;\n  border-radius: var(--dsw-radius-panel, 16px);\n  background: var(--dsw-alias-bg-layer-2, var(--dsw-alias-bg-layer-1));\n  color: var(--dsw-alias-label-primary);\n  box-shadow: var(--dsw-elevation-prominent, 0 20px 70px #0004);\n  font-family: inherit;\n  font-size: 13px;\n  line-height: 1.5;\n}\n.dsh-subscriptions-settings {\n  font-family: inherit;\n  font-size: 13px;\n  line-height: 1.5;\n}\n.dsh-subscription-manager::backdrop {\n  background: var(--dsw-alias-bg-mask-1, #0006);\n  backdrop-filter: var(--dsw-mask-blur, none);\n}\n:is(.dsh-subscription-manager, .dsh-subscriptions-settings) h2 {\n  font-size: 16px;\n  line-height: 24px;\n  font-weight: 500;\n}\n:is(.dsh-subscription-manager, .dsh-subscriptions-settings) h3 {\n  font-size: 14px;\n  line-height: 22px;\n  font-weight: 500;\n}\n:is(.dsh-subscription-manager, .dsh-subscriptions-settings) strong,\n:is(.dsh-subscription-manager, .dsh-subscriptions-settings) .dsh-subscription-label {\n  font-size: 13px;\n  line-height: 1.5;\n  font-weight: 500;\n}\n:is(.dsh-subscription-manager, .dsh-subscriptions-settings) legend {\n  font-size: 14px;\n  line-height: 22px;\n  font-weight: 500;\n}\n:is(.dsh-subscription-manager, .dsh-subscriptions-settings) small,\n:is(.dsh-subscription-manager, .dsh-subscriptions-settings) .dsh-subscription-hint,\n:is(.dsh-subscription-manager, .dsh-subscriptions-settings) [role=\"status\"] {\n  margin: 0;\n  font-size: 12px;\n  line-height: 1.5;\n  color: var(--dsw-alias-label-tertiary);\n}\n:is(.dsh-subscription-manager, .dsh-subscriptions-settings) [role=\"alert\"] {\n  margin: 0;\n  font-size: 12px;\n  line-height: 1.5;\n  color: var(--dsw-alias-state-error-primary, #b42318);\n}\n:is(.dsh-subscription-manager, .dsh-subscriptions-settings) input:not([type=\"checkbox\"]),\n:is(.dsh-subscription-manager, .dsh-subscriptions-settings) select {\n  box-sizing: border-box;\n  min-width: 0;\n  height: 34px;\n  padding: 0 12px;\n  border: 0.5px solid var(--dsw-alias-border-l4, var(--dsw-alias-border-l2));\n  border-radius: var(--dsw-radius-md, 8px);\n  background: var(--dsw-alias-bg-layer-3, var(--dsw-alias-bg-layer-1));\n  color: var(--dsw-alias-label-primary);\n  font: inherit;\n  font-size: 13px;\n  font-weight: 400;\n  line-height: 1.5;\n}\n:is(.dsh-subscription-manager, .dsh-subscriptions-settings) input::placeholder {\n  color: var(--dsw-alias-label-tertiary);\n  opacity: 1;\n}\n:is(.dsh-subscription-manager, .dsh-subscriptions-settings) input:not([type=\"checkbox\"]):focus-visible,\n:is(.dsh-subscription-manager, .dsh-subscriptions-settings) select:focus-visible {\n  outline: none;\n  border-color: var(--dsw-alias-state-business-primary, var(--dsw-alias-brand-primary));\n}\n:is(.dsh-subscription-manager, .dsh-subscriptions-settings) input:not([type=\"checkbox\"]):disabled,\n:is(.dsh-subscription-manager, .dsh-subscriptions-settings) select:disabled {\n  color: var(--dsw-alias-label-tertiary);\n  cursor: default;\n}\n:is(.dsh-subscription-manager, .dsh-subscriptions-settings) input[aria-invalid=\"true\"] {\n  border-color: var(--dsw-alias-state-error-primary, #b42318);\n}\n:is(.dsh-subscription-manager, .dsh-subscriptions-settings) option {\n  background: var(--dsw-alias-bg-layer-2, var(--dsw-alias-bg-layer-1));\n  color: var(--dsw-alias-label-primary);\n}\n:is(.dsh-subscription-manager, .dsh-subscriptions-settings) label:has(> input[type=\"checkbox\"]) {\n  display: flex;\n  align-items: flex-start;\n  gap: 6px;\n  font-size: 14px;\n  line-height: 20px;\n  cursor: pointer;\n}\n:is(.dsh-subscription-manager, .dsh-subscriptions-settings) input[type=\"checkbox\"] {\n  flex: 0 0 auto;\n  width: 16px;\n  height: 16px;\n  margin: 2px 0;\n  accent-color: var(--dsw-alias-brand-primary);\n  cursor: inherit;\n}\n:is(.dsh-subscription-manager, .dsh-subscriptions-settings) label:has(> input[type=\"checkbox\"]:disabled) {\n  cursor: default;\n  opacity: 0.5;\n}\n:is(.dsh-subscription-manager, .dsh-subscriptions-settings) button {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  min-height: 28px;\n  padding: 0 10px;\n  border: 0.5px solid var(--dsw-alias-border-l3, var(--dsw-alias-border-l2));\n  border-radius: var(--dsw-radius-sm, 6px);\n  background: transparent;\n  color: var(--dsw-alias-label-primary);\n  font: inherit;\n  font-size: 12px;\n  line-height: 18px;\n  cursor: pointer;\n}\n:is(.dsh-subscription-manager, .dsh-subscriptions-settings) button:hover:not(:disabled) {\n  background: var(--dsw-alias-interactive-bg-hover, var(--dsw-alias-bg-layer-3));\n}\n:is(.dsh-subscription-manager, .dsh-subscriptions-settings) button:active:not(:disabled) {\n  background: var(--dsw-alias-interactive-bg-active, var(--dsw-alias-bg-layer-3));\n}\n:is(.dsh-subscription-manager, .dsh-subscriptions-settings) button:disabled {\n  opacity: 0.4;\n  cursor: default;\n}\n:is(.dsh-subscription-manager, .dsh-subscriptions-settings) button.dsh-subscription-quiet {\n  border-color: transparent;\n  color: var(--dsw-alias-label-secondary, var(--dsw-alias-label-primary));\n}\n:is(.dsh-subscription-manager, .dsh-subscriptions-settings) :is(footer, .dsh-subscription-dialog-actions) button {\n  min-height: 34px;\n  padding: 0 14px;\n  border-radius: var(--dsw-radius-md, 8px);\n  font-size: 13px;\n  line-height: 1.5;\n}\n:is(.dsh-subscription-manager, .dsh-subscriptions-settings) button.dsh-subscription-primary {\n  border-color: transparent;\n  background: var(--dsw-alias-button-primary-fill, var(--dsw-alias-label-primary));\n  color: var(--dsw-alias-label-primary-foreground, var(--dsw-alias-bg-layer-1));\n  font-weight: 500;\n}\n:is(.dsh-subscription-manager, .dsh-subscriptions-settings) button.dsh-subscription-primary:hover:not(:disabled) {\n  background: var(--dsw-alias-button-primary-hover, var(--dsw-alias-label-secondary));\n}\n:is(.dsh-subscription-manager, .dsh-subscriptions-settings) button:focus-visible,\n:is(.dsh-subscription-manager, .dsh-subscriptions-settings) input[type=\"checkbox\"]:focus-visible,\n:is(.dsh-subscription-manager, .dsh-subscriptions-settings) summary:focus-visible {\n  outline: var(--dsw-focus-ring-width, 2px) solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));\n  outline-offset: 2px;\n}\n:is(.dsh-subscription-manager, .dsh-subscriptions-settings) summary {\n  border-radius: var(--dsw-radius-sm, 6px);\n}\n:is(.dsh-subscription-manager, .dsh-subscriptions-settings) summary:hover {\n  color: var(--dsw-alias-label-secondary, var(--dsw-alias-label-primary));\n}\n";
+/** Composer controls retain their own geometry, separate from settings forms. */
+export declare const subscriptionChromeCss = "\n.dsh-subscription-usage-pill { corner-shape: round; }\n.dsh-subscription-usage-panel {\n  --dsw-elevation-stroke-color: var(--dsw-alias-border-l1);\n  backdrop-filter: var(--dsw-menu-backdrop-filter, none);\n}\n.dsh-subscription-speed button:hover:not(:disabled) {\n  --dsh-subscription-speed-hover: var(--dsw-alias-interactive-bg-hover);\n}\n.dsh-subscription-speed button:active:not(:disabled) {\n  --dsh-subscription-speed-hover: var(--dsw-alias-interactive-bg-active);\n}\n.dsh-subscription-speed button:disabled { opacity: 0.4; cursor: default; }\n.dsh-subscription-speed button:focus-visible,\n.dsh-subscription-usage-pill:focus-visible {\n  outline: var(--dsw-focus-ring-width, 2px) solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));\n  outline-offset: 2px;\n}\n";

package/lib/client/provider-settings-styles.js

@@ -0,0 +1,206 @@
+/**
+ * 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)';
+export 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. */
+export 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;
+}
+`;

package/lib/client/reset-action.d.ts

@@ -0,0 +1,14 @@
+/** Explain client-side gating; the server independently revalidates before spending. */
+export declare function resetActionBlock(usage: {
+    windows?: {
+        kind: string;
+        scope?: string;
+        usedPercent: number;
+        resetsAt?: number;
+    }[];
+    resetCredits?: {
+        id?: string;
+        expiresAt?: number;
+    }[];
+    resetCreditsError?: string;
+}, now?: number): 'resetUseGuard' | 'resetUseRefresh' | 'resetUseRestart' | undefined;

package/lib/client/reset-action.js

@@ -0,0 +1,15 @@
+/** Explain client-side gating; the server independently revalidates before spending. */
+export function resetActionBlock(usage, now = Date.now()) {
+    const weekly = usage.windows?.find(w => w.kind === 'weekly' && w.scope === undefined);
+    if (!weekly || !Number.isFinite(weekly.usedPercent))
+        return 'resetUseRefresh';
+    if (weekly.usedPercent < 80)
+        return 'resetUseGuard';
+    if (weekly.resetsAt === undefined || 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 === undefined || c.expiresAt > now)))
+        return 'resetUseRefresh';
+    return undefined;
+}

package/lib/client/reset-credits-view.d.ts

@@ -0,0 +1,53 @@
+import type { ResetCreditView, SubscriptionsSectionInjected } from './SubscriptionsSection.js';
+type Translate = SubscriptionsSectionInjected['t'];
+/** How one grant reads. Color is not the only carrier; the state word is in the row name. */
+export type ResetCreditState = 'available' | 'notUsable' | 'paused' | 'exhausted' | 'expired';
+/**
+ * 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.
+ */
+export declare function resetCreditState(credit: ResetCreditView, now: number): ResetCreditState;
+/**
+ * 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.
+ */
+export declare function resetCreditsAvailableCount(credits: readonly ResetCreditView[], now: number, mode: 'credits' | 'grants'): number;
+/** Codex Use control. Absent for Claude, which must not render a button. */
+export interface ResetCreditUseAction {
+    accountKey: string;
+    busy: boolean;
+    disabled: boolean;
+    title: string;
+    label: string;
+    onUse: () => void;
+}
+/** Accessible name of one Claude grant row: state, remaining, and expiry, not a control name. */
+export declare function resetCreditRowName(t: Translate, credit: ResetCreditView, now: number): string;
+/** Claude omits an empty grant list; Codex still shows a defined, possibly empty, list. */
+export declare function showsResetCredits(provider: 'codex' | 'claude', credits: readonly ResetCreditView[] | undefined): boolean;
+/** The error line the settings card mounts. Claude never interpolates provider text. */
+export declare function ResetCreditsErrorLine({ provider, message, t }: {
+    provider: 'codex' | 'claude';
+    message: string;
+    t: Translate;
+}): import("react").JSX.Element;
+/** Fixed sentence for Claude. Codex may include the lookup message; Claude must not. */
+export declare function resetCreditsErrorText(provider: 'codex' | 'claude', message: string, t: Translate): string;
+/**
+ * The closed disclosure both providers share. Claude rows are plain text:
+ * no button, no `role="button"`, and `cursor: default`, including when
+ * `claimable` is true.
+ */
+export declare function ResetCreditsDisclosure({ mode, credits, t, now, nextCredit, useAction, statusMessage, }: {
+    mode: 'credits' | 'grants';
+    credits: readonly ResetCreditView[];
+    t: Translate;
+    now?: number;
+    nextCredit?: ResetCreditView;
+    useAction?: ResetCreditUseAction;
+    statusMessage?: string;
+}): import("react").JSX.Element;
+export {};

package/lib/client/reset-credits-view.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { subscriptionCardStyles as cardStyles } from './subscription-card-styles.js';
+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.
+ */
+export function resetCreditState(credit, now) {
+    if (credit.expiresAt !== undefined && credit.expiresAt <= now)
+        return 'expired';
+    if (credit.paused === true)
+        return 'paused';
+    if (credit.resetsLeft === 0)
+        return 'exhausted';
+    if ((credit.cooldownUntil !== undefined && 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.
+ */
+export 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 === undefined
+        ? 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);
+    const hasTotal = typeof total === 'number' && Number.isFinite(total);
+    if (hasLeft && hasTotal)
+        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. */
+export 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 !== undefined && 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. */
+export function showsResetCredits(provider, credits) {
+    if (provider === 'codex')
+        return credits !== undefined;
+    return (credits?.length ?? 0) > 0;
+}
+/** The error line the settings card mounts. Claude never interpolates provider text. */
+export function ResetCreditsErrorLine({ provider, message, t }) {
+    return _jsx("p", { style: cardStyles.error, children: resetCreditsErrorText(provider, message, t) });
+}
+/** Fixed sentence for Claude. Codex may include the lookup message; Claude must not. */
+export function resetCreditsErrorText(provider, message, t) {
+    return provider === 'claude' ? t('resetCreditsErrorFixed') : t('resetCreditsError', { message });
+}
+const summaryStyle = {
+    ...cardStyles.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.
+ */
+export function ResetCreditsDisclosure({ mode, credits, t, now = Date.now(), nextCredit, useAction, statusMessage, }) {
+    const count = resetCreditsAvailableCount(credits, now, mode);
+    return (_jsxs("details", { className: "subscriptions-reset-credits", style: cardStyles.usageRow, children: [_jsxs("summary", { style: summaryStyle, children: [_jsx("svg", { "aria-hidden": "true", width: "12", height: "12", viewBox: "0 0 16 16", style: { flexShrink: 0 }, children: _jsx("path", { d: "m6 3 5 5-5 5", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), _jsx("span", { children: t('resetCreditsTitle') }), mode === 'grants' && _jsx("span", { children: t('resetCreditReadOnlyLabel') }), _jsx("span", { style: { marginLeft: 'auto' }, children: t('resetCreditsAvailable', { count }) })] }), _jsx("style", { children: '.subscriptions-reset-credits > summary::-webkit-details-marker { display: none; }'
+                    + '.subscriptions-reset-credits[open] > summary > svg { transform: rotate(90deg); }' }), _jsxs("div", { style: { paddingLeft: 18, marginTop: 6 }, children: [mode === 'grants' && _jsx("p", { style: cardStyles.status, children: t('resetCreditReadOnly') }), credits.map((credit, index) => {
+                        const state = resetCreditState(credit, now);
+                        const showUse = mode === 'credits' && useAction !== undefined && credit === nextCredit;
+                        return (_jsxs("div", { "data-reset-state": mode === 'grants' ? state : undefined, "data-reset-claimable": mode === 'grants' && credit.claimable === true ? 'true' : undefined, role: mode === 'grants' ? 'group' : undefined, "aria-label": mode === 'grants' ? resetCreditRowName(t, credit, now) : undefined, style: { ...cardStyles.usageMeta, minHeight: 28, gap: 12, cursor: mode === 'grants' ? 'default' : undefined }, children: [_jsxs("span", { style: { display: 'inline-flex', alignItems: 'center', gap: 8, flexShrink: 0 }, children: [t('resetCreditFull'), mode === 'grants' && (_jsx("span", { "aria-hidden": "true", "data-reset-state-word": state, children: t(STATE_KEYS[state]) })), showUse && (_jsx("button", { type: "button", "aria-disabled": useAction.disabled, title: useAction.title, style: { minHeight: 22, height: 22, padding: '0 7px', borderRadius: 6,
+                                                opacity: useAction.disabled ? 0.35 : 1, cursor: useAction.disabled ? 'not-allowed' : 'pointer' }, onClick: () => { if (!useAction.disabled)
+                                                useAction.onUse(); }, children: useAction.busy ? t('resetUseChecking') : useAction.label }))] }), _jsxs("span", { style: { textAlign: 'right' }, children: [mode === 'grants' && _jsxs("span", { "aria-hidden": "true", children: [remainingText(t, credit), " \u00B7 "] }), mode === 'grants' && state === 'notUsable' && credit.cooldownUntil !== undefined && credit.cooldownUntil > now && (_jsxs("span", { "aria-hidden": "true", children: [t('resetCreditCooldownUntil', { date: new Date(credit.cooldownUntil).toLocaleString() }), " \u00B7 "] })), _jsx("span", { "aria-hidden": mode === 'grants' ? true : undefined, children: expiryText(t, credit) })] })] }, credit.id ?? index));
+                    }), statusMessage !== undefined && statusMessage !== '' && _jsx("p", { role: "status", style: cardStyles.status, children: statusMessage })] })] }));
+}