dsh-subscriptions 0.1.3 → 0.1.5

package/lib/client/SubscriptionsSection.d.ts

@@ -41,23 +41,28 @@ export interface ProviderUsage {
     supported: boolean;
     windows?: UsageWindow[];
     plan?: string;
+    /**
+     * Banked limit-reset grants. Codex entries carry id/expiry only. Claude
+     * entries are one row per grant: `expiresAt` is when the grant expires, not
+     * a window reset, and `resetsLeft` is the remaining credit count.
+     */
+    resetCredits?: ResetCreditView[];
+    resetCreditsError?: string;
 }
-/** One model's default-effort picker state as answered by `modelDefaults`. */
-export interface ModelDefaultView {
-    id: string;
-    name: string;
-    /** Advertised effort levels, in catalog order (empty when the model has no reasoning). */
-    efforts: {
-        id: string;
-        name: string;
-    }[];
-    /** The user-configured default effort, when set. */
-    configured?: string;
-}
-/** `modelDefaults` endpoint value: one provider's picker state. */
-export interface ModelDefaultsCatalog {
-    provider: SubscriptionProvider;
-    models: ModelDefaultView[];
+/** One banked reset grant as the usage RPC returns it. */
+export interface ResetCreditView {
+    id?: string;
+    grantedAt?: number;
+    /** Epoch milliseconds when the grant expires. Never a periodic window reset. */
+    expiresAt?: number;
+    resetsTotal?: number;
+    resetsLeft?: number;
+    usableNow?: boolean;
+    paused?: boolean;
+    /** Server metadata only. Claude has no redemption control. */
+    claimable?: boolean;
+    /** Epoch milliseconds until which the grant is visible but not usable. */
+    cooldownUntil?: number;
 }
 /** Injected dependencies of {@link SubscriptionsSection} (slot `inject`). */
 export interface SubscriptionsSectionInjected {
@@ -80,63 +85,6 @@ export type SubscriptionsSectionProps = Partial<SubscriptionsSectionInjected>;
 export declare function clientVersionText(t: SubscriptionsSectionInjected['t'], clientVersion: ProviderStatus['clientVersion']): string;
 /** Meter fill color lives with the pace logic: fresh 90%+ is red, pace presets add a yellow lead threshold. */
 export { usageBarColor } from './usage-pace.js';
-/** What one provider's collapsible default-effort section renders. */
-export interface ModelDefaultsView {
-    /** Models with reasoning levels, after the name filter — one row each. */
-    shown: ModelDefaultView[];
-    /** Models with reasoning levels before filtering (the header total). */
-    total: number;
-    /** How many of those carry a user override (the header count). */
-    overridden: number;
-    /** Models without reasoning levels: one count line, never a row each. */
-    withoutEfforts: number;
-    /** Whether the list is long enough to deserve a filter box. */
-    showFilter: boolean;
-}
-/**
- * Derive one provider's default-effort section from its catalog and filter.
- * Pure so the collapsed-header counts and the filter stay testable without a
- * DOM: rows come only from models that advertise levels, the count of the rest
- * rides as one line, and the filter matches display name or model id.
- * @param models - the provider's catalog models, or undefined while loading.
- * @param filter - the raw filter input (trimmed and lowercased here).
- * @returns the section's rows and header counts.
- */
-export declare function deriveModelDefaultsView(models: readonly ModelDefaultView[] | undefined, filter: string): ModelDefaultsView;
-/** Inputs of the default-effort fetch decision (see {@link shouldFetchModelDefaults}). */
-export interface ModelDefaultsFetchInput {
-    /** Providers that currently have at least one account. */
-    loggedIn: readonly SubscriptionProvider[];
-    /** Providers whose disclosure is open. */
-    open: readonly SubscriptionProvider[];
-    /** The account signature the last completed fetch was answered for. */
-    loadedFor: string | undefined;
-    /** The account signature of the current status snapshot. */
-    signature: string;
-    /** Whether the last attempt failed (a failure latches until Retry). */
-    failed: boolean;
-}
-/**
- * Whether the default-effort catalog needs (re)fetching.
- *
- * Fetching is gated on an *attempt* signature rather than on the payload
- * being empty: an empty answer is a legitimate result (a narrowed
- * `config.providers`, or a catalog that is momentarily unavailable), and
- * treating it as "not loaded yet" re-ran this effect forever. The signature
- * also covers the accounts, so logging a second provider in refetches
- * instead of leaving that card on the previous answer.
- * @param input - the decision inputs.
- * @returns true when the caller should start a fetch.
- */
-export declare function shouldFetchModelDefaults(input: ModelDefaultsFetchInput): boolean;
-/**
- * Stable signature of the accounts a catalog answer depends on. A change
- * means a previous answer is stale (an account arrived or left), so the next
- * open disclosure refetches.
- * @param statuses - the per-provider status snapshot.
- * @returns a signature string, stable across renders with equal accounts.
- */
-export declare function modelDefaultsSignature(statuses: Partial<Record<SubscriptionProvider, ProviderStatus>>): string;
 /**
  * The Subscriptions settings page component.
  * @param props - the slot inject face ({@link SubscriptionsSectionInjected}).

package/lib/client/SubscriptionsSection.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * Subscriptions settings section: one card per subscription provider with an
- * OAuth login/logout flow driven by the node half's `/subscriptions-auth` RPC
- * channel. Login state lives server-side; the page polls `status` only while
+ * OAuth login/logout flow driven by the node half's
+ * `/api/subscriptions-auth.<endpoint>` RPC routes. Login state lives server-side; the page polls `status` only while
  * a login attempt is busy, so an idle page never polls. All state is local
  * React state — the page has no store.
  *
@@ -10,15 +10,17 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * design-platform.css values flip under `body[data-ds-dark-theme]`), and
  * every user-visible string goes through the locale-bound `t` of the
  * 'settings.subscriptions' namespace. Buttons and inputs take the
- * ModelsSection vocabulary minus hover rules, which inline styles cannot
- * express.
+ * native settings vocabulary with shared, scoped control states.
  */
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { en } from './locales.js';
+import { resetActionBlock } from './reset-action.js';
 import { ProviderAccountManager } from './ProviderAccountManager.js';
+import { providerSettingsCss } from './provider-settings-styles.js';
 import { ExternalUsageCards } from './ExternalUsageCards.js';
 import { CursorCard } from './CursorCard.js';
 import { UsageMeter } from './UsageMeter.js';
+import { ResetCreditsDisclosure, ResetCreditsErrorLine, showsResetCredits } from './reset-credits-view.js';
 import { displayUsedPercent } from './usage-pace.js';
 import { UsageBadgeDisplaySetting } from './UsageBadgeDisplaySetting.js';
 import { USAGE_BADGE_REFRESH_EVENT } from './usage-badge-preferences.js';
@@ -27,11 +29,6 @@ import { callSubscriptionsAuth, SubscriptionsAuthError } from './subscriptions-r
 export { callSubscriptionsAuth } from './subscriptions-rpc.js';
 /** Poll cadence while a provider login attempt is busy. */
 const POLL_INTERVAL_MS = 2000;
-/**
- * Model count above which the expanded default-effort list also offers a name
- * filter; below it the list is short enough to scan.
- */
-const MODEL_FILTER_THRESHOLD = 8;
 const CLIENT_VERSION_SOURCES = {
     npm: 'clientVersionNpm',
     local: 'clientVersionLocal',
@@ -80,7 +77,10 @@ const styles = {
         color: 'var(--dsw-alias-label-primary)',
     },
     intro: { margin: 0, color: 'var(--dsw-alias-label-tertiary)', fontSize: 14, lineHeight: '22px' },
-    card: cardStyles.card,
+    card: { ...cardStyles.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: cardStyles.header,
     dot: cardStyles.dot,
     name: cardStyles.name,
@@ -88,44 +88,46 @@ const styles = {
     clientVersion: { fontSize: 12, lineHeight: '18px', color: 'var(--dsw-alias-label-tertiary)', fontVariantNumeric: 'tabular-nums' },
     errorLine: cardStyles.error,
     actions: cardStyles.actions,
-    button: cardStyles.button,
-    usage: cardStyles.usage,
+    usage: { ...cardStyles.usage, borderTop: '0.5px solid var(--dsw-alias-border-l2)' },
     usageHeader: cardStyles.usageHeader,
     usageTitle: cardStyles.usageTitle,
     usagePlan: cardStyles.usagePlan,
-    usageRefresh: cardStyles.usageRefresh,
+    usageRefresh: { minHeight: 22, height: 22, padding: '0 8px', marginLeft: 'auto' },
     usageRow: cardStyles.usageRow,
     usageMeta: cardStyles.usageMeta,
-    accountRow: cardStyles.account,
+    accountRow: { ...cardStyles.account, border: '0.5px solid var(--dsw-alias-border-l2)', borderRadius: 'var(--dsw-radius-lg, 16px)' },
     accountHeader: cardStyles.accountHeader,
     accountName: cardStyles.accountName,
     starButton: {
-        border: 'none', background: 'transparent', padding: 0,
+        border: 'none', padding: 0, width: 28,
         font: 'inherit', fontSize: 14, lineHeight: '20px', cursor: 'pointer',
         color: 'var(--dsw-alias-state-warn-label)',
     },
     deviceCode: {
         marginTop: 4, 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)',
     },
     deviceCodeText: {
         fontFamily: 'monospace', fontSize: 18, lineHeight: '24px', letterSpacing: 2,
         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, zIndex: 1000,
         display: 'flex', 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, maxWidth: '100%', maxHeight: '90vh', overflowY: 'auto',
         boxSizing: 'border-box', display: 'flex', flexDirection: 'column', gap: 12,
-        padding: '16px 18px', borderRadius: 12,
-        background: 'var(--dsw-alias-bg-layer-1)', border: '1px solid var(--dsw-alias-border-l2)',
+        padding: '16px 18px', borderRadius: 'var(--dsw-radius-panel, 28px)',
+        background: 'var(--dsw-alias-bg-layer-2)', border: 0, boxShadow: 'var(--dsw-elevation-prominent)',
     },
     modalHeader: { display: 'flex', alignItems: 'center', gap: 8 },
-    modalTitle: { fontWeight: 600, fontSize: 15, lineHeight: '22px', color: 'var(--dsw-alias-label-primary)' },
+    modalTitle: { fontWeight: 500, fontSize: 16, lineHeight: '24px', color: 'var(--dsw-alias-label-primary)' },
 };
 /** Status dot color for one provider state. */
 function dotColor(status) {
@@ -185,65 +187,6 @@ function usageWindowLabel(t, window) {
 }
 /** Meter fill color lives with the pace logic: fresh 90%+ is red, pace presets add a yellow lead threshold. */
 export { usageBarColor } from './usage-pace.js';
-/**
- * Derive one provider's default-effort section from its catalog and filter.
- * Pure so the collapsed-header counts and the filter stay testable without a
- * DOM: rows come only from models that advertise levels, the count of the rest
- * rides as one line, and the filter matches display name or model id.
- * @param models - the provider's catalog models, or undefined while loading.
- * @param filter - the raw filter input (trimmed and lowercased here).
- * @returns the section's rows and header counts.
- */
-export function deriveModelDefaultsView(models, filter) {
-    const all = models ?? [];
-    const withEfforts = all.filter(model => model.efforts.length > 0);
-    const query = filter.trim().toLowerCase();
-    const shown = query === ''
-        ? withEfforts
-        : withEfforts.filter(model => model.name.toLowerCase().includes(query)
-            || model.id.toLowerCase().includes(query));
-    return {
-        shown,
-        total: withEfforts.length,
-        overridden: withEfforts.filter(model => model.configured !== undefined).length,
-        withoutEfforts: all.length - withEfforts.length,
-        showFilter: withEfforts.length > MODEL_FILTER_THRESHOLD,
-    };
-}
-/**
- * Whether the default-effort catalog needs (re)fetching.
- *
- * Fetching is gated on an *attempt* signature rather than on the payload
- * being empty: an empty answer is a legitimate result (a narrowed
- * `config.providers`, or a catalog that is momentarily unavailable), and
- * treating it as "not loaded yet" re-ran this effect forever. The signature
- * also covers the accounts, so logging a second provider in refetches
- * instead of leaving that card on the previous answer.
- * @param input - the decision inputs.
- * @returns true when the caller should start a fetch.
- */
-export function shouldFetchModelDefaults(input) {
-    if (input.failed)
-        return false;
-    if (input.loggedIn.length === 0)
-        return false;
-    // Only an open disclosure pays for the per-model live resolve.
-    if (!input.open.some(provider => input.loggedIn.includes(provider)))
-        return false;
-    return input.loadedFor !== input.signature;
-}
-/**
- * Stable signature of the accounts a catalog answer depends on. A change
- * means a previous answer is stale (an account arrived or left), so the next
- * open disclosure refetches.
- * @param statuses - the per-provider status snapshot.
- * @returns a signature string, stable across renders with equal accounts.
- */
-export function modelDefaultsSignature(statuses) {
-    return PROVIDERS
-        .map(({ id }) => `${id}:${(statuses[id]?.accounts ?? []).map(account => account.key).sort().join(',')}`)
-        .join('|');
-}
 /**
  * The Subscriptions settings page component.
  * @param props - the slot inject face ({@link SubscriptionsSectionInjected}).
@@ -265,10 +208,24 @@ export function SubscriptionsSection(props) {
     const [observedAt, setObservedAt] = useState({});
     const [usageErrors, setUsageErrors] = useState({});
     const [usageLoading, setUsageLoading] = useState({});
+    const [resetConfirmation, setResetConfirmation] = useState();
+    const [resetBusy, setResetBusy] = useState(false);
+    const [resetAcknowledged, setResetAcknowledged] = useState(false);
+    const [resetMessage, setResetMessage] = useState('');
+    const [resetAccount, setResetAccount] = useState();
+    const resetDialogRef = useRef(null);
+    useEffect(() => {
+        if (resetConfirmation)
+            resetDialogRef.current?.showModal();
+        else
+            resetDialogRef.current?.close();
+    }, [resetConfirmation]);
+    const resetInflight = useRef(false);
     const mountedRef = useRef(true);
     const pollersRef = useRef(new Map());
     /** Accounts with a `usage` call in flight; guards the auto-fetch effect against re-entry. */
-    const usageInflightRef = useRef(new Set());
+    /** In-flight usage reads per key, holding the promise so a forced read can wait one out. */
+    const usageInflightRef = useRef(new Map());
     const usageRosterSignatureRef = useRef();
     const [managedProvider, setManagedProvider] = useState();
     const setProviderError = useCallback((provider, message) => {
@@ -362,34 +319,91 @@ export function SubscriptionsSection(props) {
         };
     }, [refresh, startPolling]);
     const loadUsage = useCallback(async (provider, account, force = false) => {
+        if (rpc === undefined)
+            return;
         const key = `${provider}:${account}`;
+        const pending = usageInflightRef.current.get(key);
+        // A forced read must never be dropped behind a poll that started before the
+        // state changed. The refresh after a credit redemption is the only thing
+        // that picks up the new numbers, and the next automatic poll is minutes
+        // away, so waiting the earlier read out is cheaper than showing a stale
+        // percentage next to a success message.
+        if (pending !== undefined) {
+            if (!force)
+                return;
+            await pending;
+        }
         if (rpc === undefined || usageInflightRef.current.has(key))
             return;
-        usageInflightRef.current.add(key);
-        setUsageLoading(prev => ({ ...prev, [key]: true }));
+        const read = (async () => {
+            setUsageLoading(prev => ({ ...prev, [key]: true }));
+            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(undefined);
+        setResetMessage('');
         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;
-            });
+            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(undefined);
+        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);
+        }
+    }
     // Fetch usage once an account is logged in; drop the snapshots of accounts
     // that vanished so a re-login refetches. A failed lookup does not auto-retry
     // — the per-account Refresh button is the retry path.
@@ -514,7 +528,7 @@ export function SubscriptionsSection(props) {
     if (rpc === undefined) {
         return _jsx("p", { style: styles.intro, children: t('unavailable') });
     }
-    return (_jsxs("div", { style: styles.section, children: [_jsx("p", { style: styles.intro, children: t('intro') }), _jsx(UsageBadgeDisplaySetting, { t: t }), PROVIDERS.map(({ id, name }) => {
+    return (_jsxs("div", { className: "dsh-subscriptions-settings", style: styles.section, children: [_jsx("style", { children: providerSettingsCss }), _jsx("p", { style: styles.intro, children: t('intro') }), _jsx(UsageBadgeDisplaySetting, { t: t }), PROVIDERS.map(({ id, name }) => {
                 const status = statuses[id];
                 const busy = status?.busy === true;
                 const deviceCode = deviceCodes[id];
@@ -524,17 +538,29 @@ export 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 === undefined || c.expiresAt > Date.now());
+                            const resetBlock = usage ? resetActionBlock(usage) : 'resetUseRefresh';
+                            const resetDisabled = resetBusy || resetBlock !== undefined;
                             // Providers without a usage endpoint answer supported:false — no block.
                             const showUsage = usage?.supported !== false
                                 && (usage !== undefined || usageError !== undefined || usageLoading[usageKey] === true);
                             return (_jsxs("div", { style: styles.accountRow, children: [_jsxs("div", { style: styles.accountHeader, children: [_jsx("button", { type: "button", style: styles.starButton, title: account.isDefault ? t('defaultBadge') : t('setDefault'), onClick: () => {
                                                     if (!account.isDefault)
                                                         void setDefault(id, account.key);
-                                                }, children: account.isDefault ? '★' : '☆' }), _jsx("span", { style: styles.accountName, children: display }), account.plan !== undefined && (_jsx("span", { style: styles.usagePlan, children: account.plan })), account.expiresAt !== undefined && (_jsx("span", { style: styles.statusLine, children: t('accountExpires', { date: new Date(account.expiresAt).toLocaleString() }) })), _jsx("button", { type: "button", style: { ...styles.button, marginLeft: 'auto', flexShrink: 0 }, onClick: () => { void logout(id, account.key, display, name); }, children: t('logout') })] }), showUsage && (_jsxs("div", { style: styles.usage, children: [_jsxs("div", { style: styles.usageHeader, children: [_jsx("span", { style: styles.usageTitle, children: t('usageTitle') }), usage?.plan !== undefined && (_jsx("span", { style: styles.usagePlan, children: t('usagePlan', { plan: usage.plan }) })), _jsx("button", { type: "button", style: { ...styles.usageRefresh, ...usageLoading[usageKey] === true ? { opacity: 0.5, cursor: 'default' } : {} }, disabled: usageLoading[usageKey] === true, onClick: () => { void loadUsage(id, account.key, true); }, children: t('usageRefresh') })] }), usage === undefined && usageError === undefined && (_jsx("p", { style: styles.statusLine, children: t('usageLoading') })), usageError !== undefined && (_jsx("p", { style: styles.errorLine, children: t('usageError', { message: usageError }) })), usage?.windows !== undefined && usage.windows.length === 0 && (_jsx("p", { style: styles.statusLine, children: t('usageEmpty') })), (usage?.windows ?? []).map((window, index) => {
+                                                }, children: account.isDefault ? '★' : '☆' }), _jsx("span", { style: styles.accountName, children: display }), account.plan !== undefined && (_jsx("span", { style: styles.usagePlan, children: account.plan })), account.expiresAt !== undefined && (_jsx("span", { style: styles.statusLine, children: t('accountExpires', { date: new Date(account.expiresAt).toLocaleString() }) })), _jsx("button", { type: "button", style: { marginLeft: 'auto', flexShrink: 0 }, onClick: () => { void logout(id, account.key, display, name); }, children: t('logout') })] }), showUsage && (_jsxs("div", { style: styles.usage, children: [_jsxs("div", { style: styles.usageHeader, children: [_jsx("span", { style: styles.usageTitle, children: t('usageTitle') }), usage?.plan !== undefined && (_jsx("span", { style: styles.usagePlan, children: t('usagePlan', { plan: usage.plan }) })), _jsx("button", { type: "button", style: styles.usageRefresh, disabled: usageLoading[usageKey] === true, onClick: () => { void loadUsage(id, account.key, true); }, children: t('usageRefresh') })] }), usage === undefined && usageError === undefined && (_jsx("p", { style: styles.statusLine, children: t('usageLoading') })), usageError !== undefined && (_jsx("p", { style: styles.errorLine, children: t('usageError', { message: usageError }) })), usage?.windows !== undefined && usage.windows.length === 0 && (_jsx("p", { style: styles.statusLine, children: t('usageEmpty') })), (usage?.windows ?? []).map((window, index) => {
                                                 const percent = displayUsedPercent(window.usedPercent);
                                                 return (_jsxs("div", { style: styles.usageRow, children: [_jsxs("div", { style: styles.usageMeta, children: [_jsx("span", { children: usageWindowLabel(t, window) }), _jsxs("span", { children: [percent === undefined ? t('usageMeterInvalid') : `${percent}%`, window.resetsAt !== undefined
                                                                             && ` · ${t('usageResets', { date: new Date(window.resetsAt).toLocaleString() })}`] })] }), _jsx(UsageMeter, { window: window, t: t, observedAt: observedAt[usageKey], stale: usageError !== undefined || usage.stale === true })] }, index));
-                                            })] }))] }, account.key));
-                        }), _jsxs("div", { style: styles.actions, children: [!busy && accounts.length === 0 && (_jsx("button", { type: "button", style: styles.button, onClick: () => { void login(id); }, children: t('login') })), !busy && accounts.length > 0 && id === 'claude' && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", style: styles.button, onClick: () => { void login(id, 'oauth'); }, children: t('addAccountOAuth') }), _jsx("button", { type: "button", style: styles.button, onClick: () => { void login(id, 'keychain'); }, children: t('addAccountKeychain') })] })), !busy && accounts.length > 0 && id !== 'claude' && (_jsx("button", { type: "button", style: styles.button, onClick: () => { void login(id); }, children: t('addAccount') })), _jsx("button", { type: "button", style: styles.button, "aria-haspopup": "dialog", onClick: () => setManagedProvider({ id, name }), children: t('accountsManage') }), busy && (_jsx("button", { type: "button", style: styles.button, onClick: () => { void cancel(id); }, children: t('cancel') }))] }), !busy && accounts.length > 0 && (_jsx("p", { style: styles.statusLine, children: t('addAccountHint') })), busy && deviceCode !== undefined && (_jsxs("div", { style: styles.deviceCode, children: [_jsx("span", { style: styles.statusLine, children: t('deviceCodePrompt') }), _jsx("span", { style: styles.deviceCodeText, children: deviceCode.userCode }), _jsxs("div", { style: styles.actions, children: [_jsx("button", { type: "button", style: styles.button, onClick: () => { copyDeviceCode(id, deviceCode.userCode); }, children: copiedCode === id ? t('deviceCodeCopied') : t('deviceCodeCopy') }), _jsx("button", { type: "button", style: styles.button, onClick: () => { window.open(deviceCode.verificationUrl, '_blank', 'noopener'); }, children: t('deviceCodeOpenPage') })] })] })), busy && deviceCode === undefined && (_jsxs("details", { style: styles.manual, children: [_jsx("summary", { children: t('manualSummary') }), _jsxs("div", { style: styles.manualRow, children: [_jsx("input", { style: styles.manualInput, value: manualDrafts[id], placeholder: t('manualPlaceholder'), onChange: event => setManualDrafts(prev => ({ ...prev, [id]: event.target.value })) }), _jsx("button", { type: "button", style: styles.button, onClick: () => { void submitManual(id); }, children: t('submit') })] })] }))] }, id));
-            }), _jsx(CursorCard, { rpc: rpc, t: t }), _jsx(ExternalUsageCards, { rpc: rpc, t: t }), managedProvider && _jsx(ProviderAccountManager, { provider: managedProvider.id, name: managedProvider.name, rpc: rpc, t: t, onClose: () => setManagedProvider(undefined) })] }));
+                                            }), (id === 'codex' || id === 'claude') && usage?.resetCreditsError !== undefined && (_jsx(ResetCreditsErrorLine, { provider: id, message: usage.resetCreditsError, t: t })), (id === 'codex' || id === 'claude') && showsResetCredits(id, usage?.resetCredits) && (_jsx(ResetCreditsDisclosure, { mode: id === 'claude' ? 'grants' : 'credits', credits: sortedCredits, t: t, ...nextReset !== undefined ? { 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)
+                                                            void prepareReset(account.key); },
+                                                    } } : {}, ...resetAccount === account.key && resetMessage !== '' ? { statusMessage: resetMessage } : {} }))] }))] }, account.key));
+                        }), _jsxs("div", { style: styles.actions, children: [!busy && accounts.length === 0 && (_jsx("button", { type: "button", onClick: () => { void login(id); }, children: t('login') })), !busy && accounts.length > 0 && id === 'claude' && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: () => { void login(id, 'oauth'); }, children: t('addAccountOAuth') }), _jsx("button", { type: "button", onClick: () => { void login(id, 'keychain'); }, children: t('addAccountKeychain') })] })), !busy && accounts.length > 0 && id !== 'claude' && (_jsx("button", { type: "button", onClick: () => { void login(id); }, children: t('addAccount') })), _jsx("button", { type: "button", "aria-haspopup": "dialog", onClick: () => setManagedProvider({ id, name }), children: t('accountsManage') }), busy && (_jsx("button", { type: "button", onClick: () => { void cancel(id); }, children: t('cancel') }))] }), !busy && accounts.length > 0 && (_jsx("p", { style: styles.statusLine, children: t('addAccountHint') })), busy && deviceCode !== undefined && (_jsxs("div", { style: styles.deviceCode, children: [_jsx("span", { style: styles.statusLine, children: t('deviceCodePrompt') }), _jsx("span", { style: styles.deviceCodeText, children: deviceCode.userCode }), _jsxs("div", { style: styles.actions, children: [_jsx("button", { type: "button", onClick: () => { copyDeviceCode(id, deviceCode.userCode); }, children: copiedCode === id ? t('deviceCodeCopied') : t('deviceCodeCopy') }), _jsx("button", { type: "button", onClick: () => { window.open(deviceCode.verificationUrl, '_blank', 'noopener'); }, children: t('deviceCodeOpenPage') })] })] })), busy && deviceCode === undefined && (_jsxs("details", { style: styles.manual, children: [_jsx("summary", { children: t('manualSummary') }), _jsxs("div", { style: styles.manualRow, children: [_jsx("input", { style: styles.manualInput, value: manualDrafts[id], placeholder: t('manualPlaceholder'), onChange: event => setManualDrafts(prev => ({ ...prev, [id]: event.target.value })) }), _jsx("button", { type: "button", onClick: () => { void submitManual(id); }, children: t('submit') })] })] }))] }, id));
+            }), _jsx(CursorCard, { rpc: rpc, t: t }), _jsx(ExternalUsageCards, { rpc: rpc, t: t }), managedProvider && _jsx(ProviderAccountManager, { provider: managedProvider.id, name: managedProvider.name, rpc: rpc, t: t, onClose: () => setManagedProvider(undefined) }), _jsx("style", { children: '.subscriptions-reset-dialog::backdrop { background: var(--dsw-alias-bg-mask-1, #0006); backdrop-filter: var(--dsw-mask-blur, none); }' }), _jsx("dialog", { ref: resetDialogRef, className: "subscriptions-reset-dialog", "aria-labelledby": "subscriptions-reset-title", onCancel: () => setResetConfirmation(undefined), onClose: () => setResetConfirmation(undefined), style: { ...styles.modal, display: resetConfirmation ? 'flex' : 'none', margin: 'auto', color: 'var(--dsw-alias-label-primary)' }, children: resetConfirmation && _jsxs(_Fragment, { children: [_jsx("h3", { id: "subscriptions-reset-title", style: { ...styles.modalTitle, margin: 0 }, children: t('resetUseConfirmTitle') }), _jsx("p", { style: { ...styles.statusLine, overflowWrap: 'anywhere' }, children: statuses.codex?.accounts.find(a => a.key === resetConfirmation.account)?.account ?? resetConfirmation.account }), _jsxs("div", { style: { ...styles.usageMeta, gap: 12 }, children: [_jsx("span", { children: t('usageWeekly') }), _jsxs("strong", { children: [Math.round(resetConfirmation.weeklyUsedPercent), "%"] })] }), _jsx("div", { style: styles.usageMeta, children: _jsx("span", { children: resetConfirmation.creditExpiresAt === undefined ? t('resetCreditExpiryUnknown') : t('resetCreditExpires', { date: new Date(resetConfirmation.creditExpiresAt).toLocaleString() }) }) }), _jsx("p", { style: { ...styles.statusLine, margin: '4px 0' }, children: t('resetUseWarning') }), _jsxs("label", { style: { display: 'flex', gap: 8, alignItems: 'flex-start', fontSize: 12 }, children: [_jsx("input", { type: "checkbox", checked: resetAcknowledged, onChange: e => setResetAcknowledged(e.target.checked) }), t('resetUseAcknowledge')] }), _jsxs("div", { className: "dsh-subscription-dialog-actions", style: { ...styles.actions, justifyContent: 'flex-end', marginTop: 8 }, children: [_jsx("button", { type: "button", autoFocus: true, onClick: () => setResetConfirmation(undefined), children: t('cancel') }), _jsx("button", { type: "button", className: "dsh-subscription-primary", disabled: !resetAcknowledged || resetBusy, onClick: () => { void consumeReset(); }, children: t('resetUseConfirm') })] })] }) })] }));
 }

package/lib/client/UsageBadgeDisplaySetting.js

@@ -39,15 +39,11 @@ export function UsageBadgeDisplaySetting({ t }) {
 }
 const styles = {
     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', gap: 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)',
-    },
+    field: { display: 'flex', flexDirection: 'column', gap: 6, fontSize: 13, fontWeight: 500, lineHeight: '20px' },
+    select: { width: '100%' },
     hint: { margin: 0, fontSize: 12, lineHeight: '18px', color: 'var(--dsw-alias-label-tertiary)' },
 };

package/lib/client/host-contract.d.ts

@@ -83,7 +83,7 @@ export declare const HOST_CONTRACT: {
     /** Design tokens the client styles with; the host theme must define each one. */
     readonly tokens: {
         readonly package: "@deepseek-ai/dsh-client-ui-theme";
-        readonly names: readonly ["--dsw-alias-bg-layer-1", "--dsw-alias-bg-skeleton", "--dsw-alias-border-l2", "--dsw-alias-border-l2-darkmode-thin", "--dsw-alias-interactive-bg-hover", "--dsw-alias-interactive-bg-hover-solid", "--dsw-alias-label-dimmed", "--dsw-alias-label-primary", "--dsw-alias-label-secondary", "--dsw-alias-label-tertiary", "--dsw-alias-state-error-primary", "--dsw-alias-state-success-primary", "--dsw-alias-state-warn-label", "--dsw-elevation-prominent", "--dsw-menu-backdrop-filter", "--dsw-specific-menu"];
+        readonly names: readonly ["--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"];
     };
 };
 /** A glyph name listed in {@link HOST_CONTRACT}; hostIcon() accepts no other. */

package/lib/client/host-contract.js

@@ -82,20 +82,42 @@ export 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',
         ],
     },

package/lib/client/locales.d.ts

@@ -104,6 +104,35 @@ export declare const en: {
     usageColorPaceHint: string;
     usageColorRemainingHint: string;
     usagePlan: string;
+    resetCreditsTitle: string;
+    resetCreditsAvailable: string;
+    resetCreditsError: string;
+    resetCreditsErrorFixed: string;
+    resetCreditReadOnly: string;
+    resetCreditReadOnlyLabel: string;
+    resetCreditAvailable: string;
+    resetCreditNotUsable: string;
+    resetCreditPaused: string;
+    resetCreditExhausted: string;
+    resetCreditExpired: string;
+    resetCreditRemaining: string;
+    resetCreditLeft: string;
+    resetCreditRemainingUnknown: string;
+    resetCreditCooldownUntil: string;
+    resetUseButton: string;
+    resetUseChecking: string;
+    resetUseGuard: string;
+    resetUseRestart: string;
+    resetUseRefresh: string;
+    resetUseReady: string;
+    resetUseConfirmTitle: string;
+    resetUseWarning: string;
+    resetUseAcknowledge: string;
+    resetUseConfirm: string;
+    resetUseSuccess: string;
+    resetCreditFull: string;
+    resetCreditExpires: string;
+    resetCreditExpiryUnknown: string;
     externalUsageTitle: string;
     externalUsageConnected: string;
     externalUsageNotConfigured: string;
@@ -276,6 +305,35 @@ export declare const zh: {
     usageColorPaceHint: string;
     usageColorRemainingHint: string;
     usagePlan: string;
+    resetCreditsTitle: string;
+    resetCreditsAvailable: string;
+    resetCreditsError: string;
+    resetCreditsErrorFixed: string;
+    resetCreditReadOnly: string;
+    resetCreditReadOnlyLabel: string;
+    resetCreditAvailable: string;
+    resetCreditNotUsable: string;
+    resetCreditPaused: string;
+    resetCreditExhausted: string;
+    resetCreditExpired: string;
+    resetCreditRemaining: string;
+    resetCreditLeft: string;
+    resetCreditRemainingUnknown: string;
+    resetCreditCooldownUntil: string;
+    resetUseButton: string;
+    resetUseChecking: string;
+    resetUseGuard: string;
+    resetUseRestart: string;
+    resetUseRefresh: string;
+    resetUseReady: string;
+    resetUseConfirmTitle: string;
+    resetUseWarning: string;
+    resetUseAcknowledge: string;
+    resetUseConfirm: string;
+    resetUseSuccess: string;
+    resetCreditFull: string;
+    resetCreditExpires: string;
+    resetCreditExpiryUnknown: string;
     externalUsageTitle: string;
     externalUsageConnected: string;
     externalUsageNotConfigured: string;