dsh-subscriptions 0.2.0 → 0.2.2

package/lib/client/SubscriptionsSection.js

@@ -21,12 +21,12 @@ import { ExternalUsageCards } from './ExternalUsageCards.js';
 import { CursorCard } from './CursorCard.js';
 import { OllamaCard } from './OllamaCard.js';
 import { UsageMeter } from './UsageMeter.js';
-import { ResetCreditsDisclosure, ResetCreditsErrorLine, showsResetCredits } from './reset-credits-view.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';
 import { subscriptionCardStyles as cardStyles } from './subscription-card-styles.js';
-import { callSubscriptionsAuth, SubscriptionsAuthError } from './subscriptions-rpc.js';
+import { callSubscriptionsAuth, SubscriptionsAuthError, } from './subscriptions-rpc.js';
 export { callSubscriptionsAuth } from './subscriptions-rpc.js';
 /** Poll cadence while a provider login attempt is busy. */
 const POLL_INTERVAL_MS = 2000;
@@ -50,7 +50,7 @@ function messageOf(error) {
 }
 /** Copy a keyed map without the entries whose key is not in `live`. */
 function dropStale(map, live) {
-    const stale = Object.keys(map).filter(key => !live.has(key));
+    const stale = Object.keys(map).filter((key) => !live.has(key));
     if (stale.length === 0)
         return map;
     const next = { ...map };
@@ -74,61 +74,128 @@ function fallbackTranslate(key, params) {
 }
 const styles = {
     section: {
-        display: 'flex', flexDirection: 'column', gap: 12, maxWidth: 560,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 12,
+        maxWidth: 560,
         color: 'var(--dsw-alias-label-primary)',
     },
-    intro: { margin: 0, color: 'var(--dsw-alias-label-tertiary)', fontSize: 14, lineHeight: '22px' },
-    card: { ...cardStyles.card,
+    intro: {
+        margin: 0,
+        color: 'var(--dsw-alias-label-tertiary)',
+        fontSize: 14,
+        lineHeight: '22px',
+    },
+    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))',
+        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,
     statusLine: cardStyles.status,
-    clientVersion: { fontSize: 12, lineHeight: '18px', color: 'var(--dsw-alias-label-tertiary)', fontVariantNumeric: 'tabular-nums' },
+    clientVersion: {
+        fontSize: 12,
+        lineHeight: '18px',
+        color: 'var(--dsw-alias-label-tertiary)',
+        fontVariantNumeric: 'tabular-nums',
+    },
     errorLine: cardStyles.error,
     actions: cardStyles.actions,
-    usage: { ...cardStyles.usage, borderTop: '0.5px solid var(--dsw-alias-border-l2)' },
+    usage: {
+        ...cardStyles.usage,
+        borderTop: '0.5px solid var(--dsw-alias-border-l2)',
+    },
     usageHeader: cardStyles.usageHeader,
     usageTitle: cardStyles.usageTitle,
     usagePlan: cardStyles.usagePlan,
-    usageRefresh: { minHeight: 22, height: 22, padding: '0 8px', marginLeft: 'auto' },
+    usageRefresh: {
+        minHeight: 22,
+        height: 22,
+        padding: '0 8px',
+        marginLeft: 'auto',
+    },
     usageRow: cardStyles.usageRow,
     usageMeta: cardStyles.usageMeta,
-    accountRow: { ...cardStyles.account, border: '0.5px solid var(--dsw-alias-border-l2)', borderRadius: 'var(--dsw-radius-lg, 16px)' },
+    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', padding: 0, width: 28,
-        font: 'inherit', fontSize: 14, lineHeight: '20px', cursor: 'pointer',
+        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: '0.5px solid var(--dsw-alias-border-l2)', borderRadius: 'var(--dsw-radius-lg, 16px)',
-        padding: '10px 12px', background: 'var(--dsw-alias-bg-layer-1)',
+        marginTop: 4,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 6,
+        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',
+        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 },
+    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: 'var(--dsw-alias-bg-mask-1, #0006)', backdropFilter: 'var(--dsw-mask-blur, none)',
+        position: 'fixed',
+        inset: 0,
+        zIndex: 1000,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 16,
+        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: 'var(--dsw-radius-panel, 28px)',
-        background: 'var(--dsw-alias-bg-layer-2)', border: 0, boxShadow: 'var(--dsw-elevation-prominent)',
+        width: 460,
+        maxWidth: '100%',
+        maxHeight: '90vh',
+        overflowY: 'auto',
+        boxSizing: 'border-box',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 12,
+        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: 500, fontSize: 16, lineHeight: '24px', 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) {
@@ -138,16 +205,6 @@ function dotColor(status) {
         return 'var(--dsw-alias-state-success-primary)';
     return 'var(--dsw-alias-label-dimmed)';
 }
-/**
- * Whether a provider has at least one connected account. Multi-account made
- * "logged in" a property of the account list rather than a flag, so every
- * logged-in test goes through this one predicate.
- * @param status - the provider's last reported state, possibly absent.
- * @returns true when the provider serves at least one account.
- */
-function hasAccount(status) {
-    return (status?.accounts.length ?? 0) > 0;
-}
 /**
  * One-line status text for one provider state.
  * @param t - section translate.
@@ -172,7 +229,10 @@ function statusText(t, status) {
 export function clientVersionText(t, clientVersion) {
     if (clientVersion === undefined)
         return '';
-    return t('clientVersion', { version: clientVersion.version, source: t(CLIENT_VERSION_SOURCES[clientVersion.source]) });
+    return t('clientVersion', {
+        version: clientVersion.version,
+        source: t(CLIENT_VERSION_SOURCES[clientVersion.source]),
+    });
 }
 /**
  * Localized label of one usage window (kind, plus the model scope when named).
@@ -183,8 +243,12 @@ export function clientVersionText(t, clientVersion) {
 function usageWindowLabel(t, window) {
     const base = window.kind === 'session'
         ? t('usageSession')
-        : window.kind === 'weekly' ? t('usageWeekly') : t('usageWindow');
-    return window.scope !== undefined && window.scope !== '' ? `${base} · ${window.scope}` : base;
+        : window.kind === 'weekly'
+            ? t('usageWeekly')
+            : t('usageWindow');
+    return window.scope !== undefined && window.scope !== ''
+        ? `${base} · ${window.scope}`
+        : base;
 }
 /** 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';
@@ -199,7 +263,11 @@ export function SubscriptionsSection(props) {
     const [statuses, setStatuses] = useState({});
     const [errors, setErrors] = useState({});
     const [manualDrafts, setManualDrafts] = useState({
-        codex: '', claude: '', grok: '', copilot: '', antigravity: '',
+        codex: '',
+        claude: '',
+        grok: '',
+        copilot: '',
+        antigravity: '',
     });
     /** Pending device-flow codes (copilot), shown while the attempt polls. */
     const [deviceCodes, setDeviceCodes] = useState({});
@@ -269,7 +337,8 @@ export function SubscriptionsSection(props) {
             return;
         setStatuses(response.providers);
         const signature = PROVIDERS.map(({ id }) => `${id}:${response.providers[id].accounts
-            .map(account => `${account.key}:${account.isDefault}`).join(',')}`).join(';');
+            .map((account) => `${account.key}:${account.isDefault}`)
+            .join(',')}`).join(';');
         if (signature !== usageRosterSignatureRef.current) {
             usageRosterSignatureRef.current = signature;
             window.dispatchEvent(new Event(USAGE_BADGE_REFRESH_EVENT));
@@ -295,7 +364,9 @@ export function SubscriptionsSection(props) {
     const startPolling = useCallback((provider) => {
         if (pollersRef.current.has(provider))
             return;
-        pollersRef.current.set(provider, setInterval(() => { void refresh(); }, POLL_INTERVAL_MS));
+        pollersRef.current.set(provider, setInterval(() => {
+            void refresh();
+        }, POLL_INTERVAL_MS));
     }, [refresh]);
     // Initial load; every busy provider (e.g. an attempt started before a page
     // reload) resumes polling. Teardown clears pollers and the mounted guard.
@@ -314,6 +385,9 @@ export function SubscriptionsSection(props) {
         });
         return () => {
             mountedRef.current = false;
+            // The ref holds pollers started after this effect began. Copying .current
+            // at setup would clear an empty set and leave those intervals running.
+            // eslint-disable-next-line react-hooks/exhaustive-deps -- read the live set at unmount
             for (const poller of pollersRef.current.values())
                 clearInterval(poller);
             pollersRef.current.clear();
@@ -337,13 +411,16 @@ export function SubscriptionsSection(props) {
         if (rpc === undefined || usageInflightRef.current.has(key))
             return;
         const read = (async () => {
-            setUsageLoading(prev => ({ ...prev, [key]: true }));
+            setUsageLoading((prev) => ({ ...prev, [key]: true }));
             try {
-                const usage = await callSubscriptionsAuth(rpc, 'usage', { provider, account, ...force ? { force: true } : {} });
+                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() }));
+                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 };
@@ -353,12 +430,12 @@ export function SubscriptionsSection(props) {
             }
             catch (error) {
                 if (mountedRef.current)
-                    setUsageErrors(prev => ({ ...prev, [key]: messageOf(error) }));
+                    setUsageErrors((prev) => ({ ...prev, [key]: messageOf(error) }));
             }
             finally {
                 usageInflightRef.current.delete(key);
                 if (mountedRef.current)
-                    setUsageLoading(prev => ({ ...prev, [key]: false }));
+                    setUsageLoading((prev) => ({ ...prev, [key]: false }));
             }
         })();
         usageInflightRef.current.set(key, read);
@@ -386,7 +463,10 @@ export function SubscriptionsSection(props) {
         }
     }
     async function consumeReset() {
-        if (!rpc || !resetConfirmation || !resetAcknowledged || resetInflight.current)
+        if (!rpc ||
+            !resetConfirmation ||
+            !resetAcknowledged ||
+            resetInflight.current)
             return;
         const { account, ticket } = resetConfirmation;
         resetInflight.current = true;
@@ -418,8 +498,8 @@ export function SubscriptionsSection(props) {
                     void loadUsage(id, account.key);
             }
         }
-        setUsages(prev => dropStale(prev, live));
-        setUsageErrors(prev => dropStale(prev, live));
+        setUsages((prev) => dropStale(prev, live));
+        setUsageErrors((prev) => dropStale(prev, live));
     }, [statuses, usages, usageErrors, loadUsage]);
     const login = useCallback(async (provider, method) => {
         if (rpc === undefined)
@@ -428,9 +508,10 @@ export function SubscriptionsSection(props) {
         try {
             const response = await callSubscriptionsAuth(rpc, 'login', {
                 provider,
-                ...method === undefined ? {} : { method },
+                ...(method === undefined ? {} : { method }),
             });
-            if (typeof response.authorizeUrl === 'string' && response.authorizeUrl === '') {
+            if (typeof response.authorizeUrl === 'string' &&
+                response.authorizeUrl === '') {
                 // Instant login (e.g. imported from Claude Code credentials)
                 await refresh();
                 return;
@@ -441,14 +522,25 @@ export function SubscriptionsSection(props) {
             if (!mountedRef.current)
                 return;
             // Optimistic busy so Cancel and the manual fallback appear before the first poll tick.
-            setStatuses(prev => ({
+            setStatuses((prev) => ({
                 ...prev,
-                [provider]: { accounts: prev[provider]?.accounts ?? [], ...prev[provider], busy: true },
+                [provider]: {
+                    accounts: prev[provider]?.accounts ?? [],
+                    ...prev[provider],
+                    busy: true,
+                },
             }));
-            if (typeof response.userCode === 'string' && response.userCode.length > 0) {
+            if (typeof response.userCode === 'string' &&
+                response.userCode.length > 0) {
                 // Device flow: show the code card instead of opening the page blind —
                 // the user copies the code first, then opens the verification page.
-                setDeviceCodes(prev => ({ ...prev, [provider]: { userCode: response.userCode, verificationUrl: response.authorizeUrl } }));
+                setDeviceCodes((prev) => ({
+                    ...prev,
+                    [provider]: {
+                        userCode: response.userCode,
+                        verificationUrl: response.authorizeUrl,
+                    },
+                }));
             }
             else {
                 window.open(response.authorizeUrl, '_blank', 'noopener');
@@ -458,7 +550,7 @@ export function SubscriptionsSection(props) {
         catch (error) {
             setProviderError(provider, messageOf(error));
         }
-    }, [rpc, t, setProviderError, startPolling]);
+    }, [rpc, t, setProviderError, startPolling, refresh]);
     const cancel = useCallback(async (provider) => {
         if (rpc === undefined)
             return;
@@ -479,9 +571,12 @@ export function SubscriptionsSection(props) {
             return;
         setProviderError(provider, undefined);
         try {
-            await callSubscriptionsAuth(rpc, 'manual', { provider, input });
+            await callSubscriptionsAuth(rpc, 'manual', {
+                provider,
+                input,
+            });
             if (mountedRef.current)
-                setManualDrafts(prev => ({ ...prev, [provider]: '' }));
+                setManualDrafts((prev) => ({ ...prev, [provider]: '' }));
         }
         catch (error) {
             setProviderError(provider, messageOf(error));
@@ -495,7 +590,10 @@ export function SubscriptionsSection(props) {
             return;
         setProviderError(provider, undefined);
         try {
-            await callSubscriptionsAuth(rpc, 'logout', { provider, account });
+            await callSubscriptionsAuth(rpc, 'logout', {
+                provider,
+                account,
+            });
         }
         catch (error) {
             setProviderError(provider, messageOf(error));
@@ -507,7 +605,10 @@ export function SubscriptionsSection(props) {
             return;
         setProviderError(provider, undefined);
         try {
-            await callSubscriptionsAuth(rpc, 'setDefault', { provider, account });
+            await callSubscriptionsAuth(rpc, 'setDefault', {
+                provider,
+                account,
+            });
         }
         catch (error) {
             setProviderError(provider, messageOf(error));
@@ -515,16 +616,19 @@ export function SubscriptionsSection(props) {
         await refresh();
     }, [rpc, setProviderError, refresh]);
     const copyDeviceCode = useCallback((provider, userCode) => {
-        void navigator.clipboard?.writeText(userCode).then(() => {
+        void navigator.clipboard
+            ?.writeText(userCode)
+            .then(() => {
             if (!mountedRef.current)
                 return;
             setCopiedCode(provider);
             setTimeout(() => {
                 if (mountedRef.current) {
-                    setCopiedCode(current => current === provider ? undefined : current);
+                    setCopiedCode((current) => current === provider ? undefined : current);
                 }
             }, 1500);
-        }).catch(() => undefined);
+        })
+            .catch(() => undefined);
     }, []);
     if (rpc === undefined) {
         return _jsx("p", { style: styles.intro, children: t('unavailable') });
@@ -534,34 +638,103 @@ export function SubscriptionsSection(props) {
                 const busy = status?.busy === true;
                 const deviceCode = deviceCodes[id];
                 const accounts = status?.accounts ?? [];
-                return (_jsxs("div", { style: styles.card, children: [_jsxs("div", { style: styles.cardHeader, children: [_jsx("span", { style: { ...styles.dot, background: dotColor(status) } }), _jsx("span", { style: styles.name, children: name }), status?.clientVersion !== undefined && (_jsx("span", { style: styles.clientVersion, title: t('clientVersionHint'), children: clientVersionText(t, status.clientVersion) }))] }), _jsx("p", { style: styles.statusLine, children: statusText(t, status) }), status?.detail !== undefined && status.detail !== '' && (_jsx("p", { style: styles.statusLine, children: status.detail })), errors[id] !== undefined && _jsx("p", { style: styles.errorLine, children: errors[id] }), accounts.map((account) => {
+                return (_jsxs("div", { style: styles.card, children: [_jsxs("div", { style: styles.cardHeader, children: [_jsx("span", { style: { ...styles.dot, background: dotColor(status) } }), _jsx("span", { style: styles.name, children: name }), status?.clientVersion !== undefined && (_jsx("span", { style: styles.clientVersion, title: t('clientVersionHint'), children: clientVersionText(t, status.clientVersion) }))] }), _jsx("p", { style: styles.statusLine, children: statusText(t, status) }), status?.detail !== undefined && status.detail !== '' && (_jsx("p", { style: styles.statusLine, children: status.detail })), errors[id] !== undefined && (_jsx("p", { style: styles.errorLine, children: errors[id] })), accounts.map((account) => {
                             const usageKey = `${id}:${account.key}`;
                             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 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);
+                            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: { 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) => {
+                                                }, 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));
-                                            }), (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(OllamaCard, { 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') })] })] }) })] }));
+                                                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));
+                                            }), (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(OllamaCard, { 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') })] })] })) })] }));
 }