dsh-subscriptions 0.1.3 → 0.1.4

package/lib/client/SubscriptionsSection.js

@@ -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';
@@ -80,7 +82,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 +93,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) {
@@ -265,10 +272,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 +383,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 +592,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 +602,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;

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";