dsh-subscriptions 0.1.2 → 0.1.4

package/lib/client/SubscriptionUsageBadge.js

@@ -24,6 +24,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * 'settings.subscriptions' namespace.
  */
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { subscriptionChromeCss } from './provider-settings-styles.js';
 import { createPortal } from 'react-dom';
 import * as primitives from '@deepseek-ai/dsh-client-ui-primitives';
 import { useAnchoredPosition, useDismissOnOutsidePointer } from '@deepseek-ai/dsh-client-ui-primitives';
@@ -42,6 +43,8 @@ const UsageBadgeIcon = usageBadgeIcon(primitives);
 const USAGE_POLL_INTERVAL_MS = 15 * 60_000;
 /** How often the badge re-reads the session's current model (model switches arrive only by asking). */
 const MODEL_POLL_INTERVAL_MS = 3000;
+/** How long the rotation holds one provider in `always` mode (a display cadence, not a data poll). */
+const BADGE_ROTATION_INTERVAL_MS = 10_000;
 /** Distance between the trigger's top edge and the dialog's bottom (host stat dialogs use the same). */
 const PANEL_GAP = 8;
 /** Distance kept between the dialog and each viewport edge. */
@@ -236,6 +239,27 @@ export function collapsedDisplays(displays, current) {
     const match = displays.find(d => d.provider === current);
     return match === undefined ? [] : [match];
 }
+/**
+ * `always` mode: the current model's provider while it reports usage,
+ * otherwise the rotation steps through the providers that do, in display
+ * order, wrapping around. The index is taken modulo the current provider
+ * count, so providers appearing or dropping out stay inside range; the
+ * sequence itself may shift when the roster changes. Unlike `recent`, the
+ * retained subscription does not pin the pill — that retention is exactly
+ * what this mode exists to escape.
+ * @param displays - providers with usage, in display order.
+ * @param current - the provider of the session's current model.
+ * @param step - rotation tick; consecutive ticks advance one provider.
+ */
+export function rotatingDisplay(displays, current, step) {
+    if (displays.length === 0)
+        return [];
+    const match = displays.find(d => d.provider === current);
+    if (match !== undefined)
+        return [match];
+    const index = Number.isFinite(step) ? Math.floor(step) : 0;
+    return [displays[((index % displays.length) + displays.length) % displays.length]];
+}
 /** Order for the expanded dialog: the current provider first, the rest in poll order. */
 export function expandedDisplays(displays, current) {
     const match = displays.find(d => d.provider === current);
@@ -271,7 +295,7 @@ function usageWindowLabel(t, window) {
  * every provider's accounts and their windows. Returns null when no data is
  * available.
  */
-export function SubscriptionUsageBadge({ rpc, currentModel, t }) {
+export function SubscriptionUsageBadge({ rpc, currentModel, t, rotationMs }) {
     const translate = t ?? fallbackTranslate;
     const [displays, setDisplays] = useState([]);
     const [selection, setSelection] = useState(undefined);
@@ -281,6 +305,11 @@ export function SubscriptionUsageBadge({ rpc, currentModel, t }) {
     const badgeSelection = retainSubscriptionSelection(lastSubscription, selection);
     const [open, setOpen] = useState(false);
     const [hover, setHover] = useState(false);
+    // Rotation tick for `always` mode; the interval runs only in that mode.
+    const [rotation, setRotation] = useState(0);
+    // The provider the pill showed when the dialog opened; an open dialog
+    // keeps leading with it while the rotation keeps ticking underneath.
+    const [dialogLead, setDialogLead] = useState(undefined);
     const inflightRef = useRef(false);
     const mountedRef = useRef(true);
     const rootRef = useRef(null);
@@ -443,22 +472,49 @@ export function SubscriptionUsageBadge({ rpc, currentModel, t }) {
         if (displayMode === 'hidden')
             setOpen(false);
     }, [displayMode]);
+    // `always` mode advances the rotation on its own cadence; other modes
+    // never advance, so the pill never changes on its own.
+    useEffect(() => {
+        if (displayMode !== 'always')
+            return;
+        const interval = rotationMs !== undefined && Number.isFinite(rotationMs) && rotationMs > 0
+            ? rotationMs
+            : BADGE_ROTATION_INTERVAL_MS;
+        const timer = setInterval(() => { setRotation(step => step + 1); }, interval);
+        return () => { clearInterval(timer); };
+    }, [displayMode, rotationMs]);
     const seat = _jsx("span", { ref: seatRef, style: styles.seat, "aria-hidden": true });
-    const collapsed = collapsedDisplays(displays, badgeSelection?.provider);
+    // `always` follows the live model, not the retained subscription: the
+    // retention pins the pill in `recent`, which is what this mode escapes.
+    const collapsed = displayMode === 'always'
+        ? rotatingDisplay(displays, current, rotation)
+        : collapsedDisplays(displays, badgeSelection?.provider);
     if (displayMode === 'hidden' || collapsed.length === 0)
         return seat;
-    const label = compactSegment(collapsed[0], badgeSelection?.model, translate);
+    // Model scope only while the pill shows the current model's provider;
+    // a rotated provider has no live model, so it reads at account level.
+    const pillModel = displayMode === 'always'
+        ? (current === collapsed[0]?.provider ? selection?.model : undefined)
+        : badgeSelection?.model;
+    const label = compactSegment(collapsed[0], pillModel, translate);
     // The dialog opens from the badge, so it follows the provider and model the
     // badge shows (a retained subscription when the current model is not one).
-    const expanded = expandedDisplays(displays, badgeSelection?.provider);
+    // In `always` mode the pill moves under the cursor, so an open dialog keeps
+    // the provider that was showing when it opened instead of reordering live.
+    const dialogProvider = open && displayMode === 'always' ? dialogLead : badgeSelection?.provider;
+    const dialogModel = open && displayMode === 'always'
+        ? (dialogLead === current ? selection?.model : undefined)
+        : badgeSelection?.model;
+    const expanded = expandedDisplays(displays, dialogProvider);
     const title = translate('usageBadgeTitle');
     const toggle = () => {
         const next = !open;
+        setDialogLead(collapsed[0]?.provider);
         setOpen(next);
         if (next)
             void refresh();
     };
-    const pill = (_jsxs("span", { ref: rootRef, style: styles.anchor, children: [_jsxs("button", { type: "button", style: { ...styles.pill, ...(hover || open ? styles.pillActive : {}) }, "aria-haspopup": "dialog", "aria-expanded": open, "aria-label": `${title} · ${label}`, title: title, onMouseEnter: () => { setHover(true); }, onMouseLeave: () => { setHover(false); }, onClick: toggle, children: [_jsx(UsageBadgeIcon, {}), _jsx("span", { style: styles.label, children: label })] }), open && createPortal(_jsxs("div", { ref: panelRef, role: "dialog", "aria-label": title, style: { ...styles.panel, ...(pos ?? MEASURE_STYLE) }, children: [_jsx("div", { style: styles.title, children: _jsxs("span", { style: styles.titleLabel, children: [_jsx(UsageBadgeIcon, {}), title] }) }), _jsx("div", { style: styles.titleRule, "aria-hidden": true }), expanded.map((d, index) => (_jsxs("section", { style: index === 0 ? undefined : styles.section, children: [_jsxs("div", { style: styles.providerRow, children: [_jsxs("span", { style: styles.providerName, children: [d.name, d.provider === current && _jsx("span", { style: styles.currentTag, children: translate('usageBadgeCurrent') })] }), d.accounts.length === 1 && _jsx(AccountMeta, { account: d.accounts[0], translate: translate })] }), d.accounts.map((account, accountIndex) => (_jsxs("div", { style: accountIndex === 0 ? undefined : styles.accountBlock, children: [d.accounts.length > 1 && (_jsx("div", { style: styles.accountRow, children: _jsx(AccountMeta, { account: account, translate: translate }) })), _jsx(AccountWindows, { windows: account.windows, observedAt: account.observedAt, stale: account.stale, model: d.provider === badgeSelection?.provider ? badgeSelection.model : undefined, provider: d.provider, translate: translate }, `${d.provider}:${badgeSelection?.model ?? ''}`)] }, account.key)))] }, d.provider)))] }), document.body)] }));
+    const pill = (_jsxs("span", { ref: rootRef, style: styles.anchor, children: [_jsx("style", { children: subscriptionChromeCss }), _jsxs("button", { type: "button", className: "dsh-subscription-usage-pill", style: { ...styles.pill, ...(hover || open ? styles.pillActive : {}) }, "aria-haspopup": "dialog", "aria-expanded": open, "aria-label": `${title} · ${label}`, title: title, onMouseEnter: () => { setHover(true); }, onMouseLeave: () => { setHover(false); }, onClick: toggle, children: [_jsx(UsageBadgeIcon, {}), _jsx("span", { style: styles.label, children: label })] }), open && createPortal(_jsxs("div", { ref: panelRef, role: "dialog", "aria-label": title, className: "dsh-subscription-usage-panel", style: { ...styles.panel, ...(pos ?? MEASURE_STYLE) }, children: [_jsx("div", { style: styles.title, children: _jsxs("span", { style: styles.titleLabel, children: [_jsx(UsageBadgeIcon, {}), title] }) }), _jsx("div", { style: styles.titleRule, "aria-hidden": true }), expanded.map((d, index) => (_jsxs("section", { style: index === 0 ? undefined : styles.section, children: [_jsxs("div", { style: styles.providerRow, children: [_jsxs("span", { style: styles.providerName, children: [d.name, d.provider === current && _jsx("span", { style: styles.currentTag, children: translate('usageBadgeCurrent') })] }), d.accounts.length === 1 && _jsx(AccountMeta, { account: d.accounts[0], translate: translate })] }), d.accounts.map((account, accountIndex) => (_jsxs("div", { style: accountIndex === 0 ? undefined : styles.accountBlock, children: [d.accounts.length > 1 && (_jsx("div", { style: styles.accountRow, children: _jsx(AccountMeta, { account: account, translate: translate }) })), _jsx(AccountWindows, { windows: account.windows, observedAt: account.observedAt, stale: account.stale, model: d.provider === dialogProvider ? dialogModel : undefined, provider: d.provider, translate: translate }, `${d.provider}:${dialogModel ?? ''}`)] }, account.key)))] }, d.provider)))] }), document.body)] }));
     return (_jsxs(_Fragment, { children: [seat, statsRow !== null && statsRow.isConnected ? createPortal(pill, statsRow) : pill] }));
 }
 /**
@@ -509,9 +565,9 @@ const styles = {
     pill: {
         boxSizing: 'border-box', maxWidth: '100%',
         color: 'var(--dsw-alias-label-tertiary)',
-        font: 'inherit', fontSize: 'var(--dsh-content-font-size-secondary, 13px)',
-        fontVariantNumeric: 'tabular-nums', lineHeight: '20px', whiteSpace: 'nowrap',
-        background: 'transparent', border: 'none', borderRadius: 24,
+        font: 'inherit', fontSize: 'calc(var(--dsh-content-font-size-secondary, 13px) - 1px)',
+        fontVariantNumeric: 'tabular-nums', lineHeight: 'calc(20px + var(--dsh-content-font-delta-secondary, 0px))', whiteSpace: 'nowrap',
+        background: 'transparent', border: 'none', borderRadius: 999,
         alignItems: 'center', gap: 6, padding: '1px 8px', display: 'inline-flex', cursor: 'pointer',
     },
     pillActive: {
@@ -531,7 +587,7 @@ const styles = {
         maxHeight: 'min(560px, 100dvh - 24px)', overflowY: 'auto', overscrollBehavior: 'contain',
         boxShadow: 'var(--dsw-elevation-prominent)',
         color: 'var(--dsw-alias-label-secondary)', cursor: 'default',
-        border: 0, borderRadius: 12, padding: 16, fontSize: 12, lineHeight: '18px',
+        border: 0, borderRadius: 'var(--dsw-radius-lg, 16px)', padding: 16, fontSize: 12, lineHeight: '18px',
     },
     title: {
         color: 'var(--dsw-alias-label-primary)', display: 'flex',

package/lib/client/SubscriptionsSection.d.ts

@@ -41,6 +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 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;
 }
 /** One model's default-effort picker state as answered by `modelDefaults`. */
 export interface ModelDefaultView {

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

@@ -9,7 +9,7 @@ export function UsageBadgeDisplaySetting({ t }) {
     const [failed, setFailed] = useState(false);
     return (_jsxs("div", { style: styles.card, children: [_jsxs("label", { style: styles.field, children: [_jsx("span", { children: t('usageBadgeDisplay') }), _jsxs("select", { style: styles.select, "aria-label": t('usageBadgeDisplay'), value: mode, onChange: event => {
                             const value = event.currentTarget.value;
-                            if (value !== 'recent' && value !== 'hidden')
+                            if (value !== 'recent' && value !== 'always' && value !== 'hidden')
                                 return;
                             try {
                                 setUsageBadgeMode(value);
@@ -20,7 +20,7 @@ export function UsageBadgeDisplaySetting({ t }) {
                                     throw error;
                                 setFailed(true);
                             }
-                        }, children: [_jsx("option", { value: "recent", children: t('usageBadgeDisplayRecent') }), _jsx("option", { value: "hidden", children: t('usageBadgeDisplayHidden') })] })] }), _jsx("p", { style: styles.hint, children: t('usageBadgeDisplayHint') }), _jsxs("label", { style: styles.field, children: [_jsx("span", { children: t('usageColorLabel') }), _jsxs("select", { style: styles.select, "aria-label": t('usageColorLabel'), value: preset, onChange: event => {
+                        }, children: [_jsx("option", { value: "recent", children: t('usageBadgeDisplayRecent') }), _jsx("option", { value: "always", children: t('usageBadgeDisplayAlways') }), _jsx("option", { value: "hidden", children: t('usageBadgeDisplayHidden') })] })] }), _jsx("p", { style: styles.hint, children: t('usageBadgeDisplayHint') }), _jsxs("label", { style: styles.field, children: [_jsx("span", { children: t('usageColorLabel') }), _jsxs("select", { style: styles.select, "aria-label": t('usageColorLabel'), value: preset, onChange: event => {
                             const value = event.currentTarget.value;
                             if (!isUsageColorPreset(value))
                                 return;
@@ -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/UsageMeter.js

@@ -20,17 +20,22 @@ export function UsageMeter({ window: quota, t, style, observedAt, stale }) {
     const valid = validUsage(quota.usedPercent);
     const used = valid ? quota.usedPercent : 0;
     const fresh = isUsageFresh(quota, { observedAt, stale }, current);
-    const elapsed = fresh ? elapsedPercent(quota, current) : undefined;
-    const state = usageColorState(quota.usedPercent, elapsed, preset, fresh);
-    const lead = elapsed === undefined ? 0 : Math.round(used - elapsed);
+    // The cursor is where the window stands in time. It needs only the window's
+    // own timing, so it stays for an unused, stale, aged or unobserved reading.
+    const elapsed = elapsedPercent(quota, current);
+    // Comparing usage with elapsed time is meaningful only while the percentage
+    // is current; an old one is not set against today's clock.
+    const pace = fresh ? elapsed : undefined;
+    const state = usageColorState(quota.usedPercent, pace, preset, fresh);
+    const lead = pace === undefined ? 0 : Math.round(used - pace);
     const label = [
         valid ? t('usageMeterUsed', { used: Math.round(used), remaining: Math.round(100 - used) }) : t('usageMeterInvalid'),
         // An invalid reading already states unavailability; the stale line would repeat it.
         !valid ? '' : !fresh ? t('usageMeterStale') : state === 'red' ? t('usageMeterNearLimit')
-            : elapsed === undefined && preset !== 'remaining' ? t('usageMeterUnknownTime')
+            : pace === undefined && preset !== 'remaining' ? t('usageMeterUnknownTime')
                 : state === 'yellow' ? t('usageMeterAhead') : t('usageMeterNoWarning'),
         elapsed === undefined ? '' : t('usageMeterPace', { elapsed: Math.round(elapsed) }),
-        elapsed === undefined ? '' : lead > 0 ? t('usageMeterPaceAhead', { points: lead })
+        pace === undefined ? '' : lead > 0 ? t('usageMeterPaceAhead', { points: lead })
             : lead < 0 ? t('usageMeterPaceBehind', { points: -lead }) : t('usageMeterPaceEven'),
         quota.resetsAt !== undefined && quota.resetsAt > current ? t('usageMeterReset', {
             duration: resetCountdownParts(quota.resetsAt - current)
@@ -43,7 +48,7 @@ export function UsageMeter({ window: quota, t, style, observedAt, stale }) {
             background: 'var(--dsw-alias-bg-layer-1)', border: '1px solid var(--dsw-alias-border-l2)',
             ...style, position: 'relative',
         }, children: [_jsx("div", { style: { height: '100%', borderRadius: 'inherit', width: `${used}%`,
-                    background: usageBarColor(quota.usedPercent, elapsed, preset, fresh) } }), elapsed !== undefined && _jsx("span", { "aria-hidden": "true", "data-usage-time-marker": true, style: {
+                    background: usageBarColor(quota.usedPercent, pace, preset, fresh) } }), elapsed !== undefined && _jsx("span", { "aria-hidden": "true", "data-usage-time-marker": true, style: {
                     position: 'absolute', left: `clamp(0px, calc(${elapsed}% - 1px), calc(100% - 2px))`,
                     top: 0, bottom: 0, width: 2, background: 'var(--dsw-alias-label-primary)',
                     boxShadow: '0 0 0 1px var(--dsw-alias-bg-layer-1)',

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',
         ],
     },