dsh-subscriptions 0.1.1 → 0.1.3

package/lib/client/SubscriptionUsageBadge.js

@@ -18,15 +18,18 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * The collapsed pill reads only the default account — the same account
  * direct (non-pool) routes serve — so it stays one short segment even for a
  * provider with several accounts connected; the dialog shows them all.
- * Every color resolves through a `--dsw-*` design token and every
- * user-visible string goes through the locale `t` of the
+ * Every color resolves through a `--dsw-*` design token, the dialog wears the
+ * host's menu material (its translucent fill plus its backdrop blur), and
+ * every user-visible string goes through the locale `t` of the
  * 'settings.subscriptions' namespace.
  */
 import { useCallback, useEffect, useRef, useState } from 'react';
 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';
-import { callSubscriptionsAuth, usageBarColor } from './SubscriptionsSection.js';
+import { callSubscriptionsAuth } from './SubscriptionsSection.js';
+import { UsageMeter } from './UsageMeter.js';
+import { displayUsedPercent } from './usage-pace.js';
 import { en } from './locales.js';
 import { hostIcon } from './host-icons.js';
 import { USAGE_BADGE_REFRESH_EVENT, useUsageBadgeMode } from './usage-badge-preferences.js';
@@ -39,6 +42,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. */
@@ -56,6 +61,8 @@ const PROVIDER_NAMES = {
     'cursor-subscription': 'Cursor',
     'opencode-go': 'OpenCode Go',
     'kimi-coding': 'Kimi Code',
+    'minimax': 'MiniMax',
+    'minimax-cn': 'MiniMax CN',
 };
 /** Key of one account's cached windows: `provider:accountKey`. */
 function usageKeyOf(provider, account) {
@@ -119,7 +126,7 @@ export async function loadBadgeRoster(rpc) {
     }
     if (external.status === 'fulfilled') {
         for (const [source, provider] of [
-            ['opencode-go', 'opencode-go'], ['kimi-code', 'kimi-coding'],
+            ['opencode-go', 'opencode-go'], ['kimi-code', 'kimi-coding'], ['minimax', 'minimax'], ['minimax-cn', 'minimax-cn'],
         ]) {
             refreshed.add(provider);
             if (external.value[source]?.configured)
@@ -133,7 +140,7 @@ export async function loadBadgeRoster(rpc) {
 export async function usageOf(rpc, { provider, account }) {
     if (provider === 'cursor-subscription')
         return callSubscriptionsAuth(rpc, 'cursorUsage', {});
-    if (provider === 'opencode-go' || provider === 'kimi-coding') {
+    if (provider === 'opencode-go' || provider === 'kimi-coding' || provider === 'minimax' || provider === 'minimax-cn') {
         return callSubscriptionsAuth(rpc, 'externalUsage', { source: provider === 'kimi-coding' ? 'kimi-code' : provider });
     }
     return callSubscriptionsAuth(rpc, 'usage', { provider, account: account.key });
@@ -160,7 +167,7 @@ export function createCurrentModelReader(models, sessionId) {
  * Falls back to the scope/kind abbreviation when no reset time is known.
  */
 export function windowLabel(w) {
-    if (w.resetsAt === undefined) {
+    if (w.resetsAt === undefined || !Number.isFinite(w.resetsAt)) {
         if (w.scope !== undefined && w.scope !== '')
             return w.scope;
         switch (w.kind) {
@@ -179,9 +186,13 @@ export function windowLabel(w) {
         return `${hours}h${minutes % 60}m`;
     return `${Math.max(1, minutes)}m`;
 }
-/** Clamp and round a window's used share for display. */
-function usedPercent(w) {
-    return Math.round(Math.min(100, Math.max(0, w.usedPercent)));
+/**
+ * One compact segment piece (`6d1h 25%`); an unusable provider percentage
+ * renders as the no-data dash, consistent with the meter's unavailable state.
+ */
+function windowSegment(label, w) {
+    const percent = displayUsedPercent(w.usedPercent);
+    return percent === undefined ? `${label} —` : `${label} ${percent}%`;
 }
 /** Keep model quotas separate: matching percentages do not imply a shared pool. */
 export function prioritizeWindows(windows, model) {
@@ -210,10 +221,10 @@ export function compactSegment(d, model, t = fallbackTranslate) {
                 count: new Set(windows.map(w => w.scope).filter(Boolean)).size,
             })}`;
         }
-        const parts = matching.slice(0, 2).map(w => `${w.kind === 'weekly' ? t('usageWeekly') : t('usageWindow')} ${usedPercent(w)}%`);
+        const parts = matching.slice(0, 2).map(w => windowSegment(w.kind === 'weekly' ? t('usageWeekly') : t('usageWindow'), w));
         return `${d.name} ${parts.join(' · ')}`;
     }
-    const parts = windows.slice(0, 2).map(w => `${windowLabel(w)} ${usedPercent(w)}%`);
+    const parts = windows.slice(0, 2).map(w => windowSegment(windowLabel(w), w));
     if (windows.length > 2)
         parts.push(`+${windows.length - 2}`);
     return `${d.name} ${parts.join(' · ')}`;
@@ -227,6 +238,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);
@@ -262,7 +294,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);
@@ -272,6 +304,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);
@@ -287,8 +324,10 @@ export function SubscriptionUsageBadge({ rpc, currentModel, t }) {
     // across a failed poll (e.g. a 429 during the server's own negative-cache
     // cooldown) so a row doesn't flicker away — it only disappears once the
     // account actually logs out or a fetch succeeds but reports the window as
-    // unsupported.
+    // unsupported. Observation metadata (freshness) shares this lifecycle: an
+    // entry is dropped wherever its windows are dropped.
     const lastKnownRef = useRef(new Map());
+    const observationsRef = useRef(new Map());
     const refresh = useCallback(async () => {
         if (rpc === undefined || inflightRef.current)
             return;
@@ -302,8 +341,10 @@ export function SubscriptionUsageBadge({ rpc, currentModel, t }) {
             // real signal, unlike a fetch failure.
             const live = new Set(roster.map(({ provider, account }) => usageKeyOf(provider, account)));
             for (const key of lastKnown.keys()) {
-                if (refreshed.has(key.split(':', 1)[0]) && !live.has(key))
+                if (refreshed.has(key.split(':', 1)[0]) && !live.has(key)) {
                     lastKnown.delete(key);
+                    observationsRef.current.delete(key);
+                }
             }
             const results = await Promise.allSettled(roster.map(async ({ provider, account }) => {
                 const usage = await usageOf(rpc, { provider, account });
@@ -311,6 +352,10 @@ export function SubscriptionUsageBadge({ rpc, currentModel, t }) {
             }));
             if (!mountedRef.current)
                 return;
+            for (const { provider, account } of roster) {
+                const key = usageKeyOf(provider, account);
+                observationsRef.current.set(key, { ...observationsRef.current.get(key), stale: true });
+            }
             const plans = new Map();
             for (const r of results) {
                 if (r.status !== 'fulfilled')
@@ -321,17 +366,29 @@ export function SubscriptionUsageBadge({ rpc, currentModel, t }) {
                     plans.set(key, usage.plan);
                 if (!usage.supported || !usage.windows || usage.windows.length === 0) {
                     lastKnown.delete(key);
+                    observationsRef.current.delete(key);
                     continue;
                 }
                 lastKnown.set(key, usage.windows);
+                observationsRef.current.set(key, { observedAt: usage.observedAt ?? Date.now(), stale: usage.stale === true });
             }
             setDisplays(previous => [
-                ...groupUsageDisplays(roster, lastKnown, plans),
-                ...previous.filter(display => !refreshed.has(display.provider)),
+                ...groupUsageDisplays(roster, lastKnown, plans).map(display => ({ ...display,
+                    accounts: display.accounts.map(account => ({ ...account,
+                        ...observationsRef.current.get(`${display.provider}:${account.key}`),
+                    })),
+                })),
+                ...previous.filter(display => !refreshed.has(display.provider)).map(display => ({ ...display,
+                    accounts: display.accounts.map(account => ({ ...account, stale: true })),
+                })),
             ]);
         }
         catch {
-            // A failed poll must not crash the badge; keep last known state.
+            // Keep cached numbers, but never present failed observations as current.
+            if (mountedRef.current)
+                setDisplays(previous => previous.map(display => ({ ...display,
+                    accounts: display.accounts.map(account => ({ ...account, stale: true })),
+                })));
         }
         finally {
             inflightRef.current = false;
@@ -414,22 +471,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, 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: [_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 === 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] }));
 }
 /**
@@ -457,15 +541,15 @@ function AccountMeta({ account, translate }) {
     return (_jsxs("span", { style: styles.providerMeta, title: account.account, children: [account.isDefault && _jsx("span", { style: styles.defaultStar, "aria-label": "default", children: "\u2605 " }), parts.join(' · ')] }));
 }
 /** Preview each account independently; all remaining quotas stay accessible. */
-export function AccountWindows({ windows, model, provider, translate }) {
+export function AccountWindows({ windows, model, provider, translate, observedAt, stale }) {
     const { shown, hidden } = previewWindows(windows, model, provider);
-    const rows = (items) => (_jsx("dl", { style: styles.details, children: items.map((w, i) => (_jsx(WindowRow, { label: `${usageWindowLabel(translate, w)}${model !== undefined && w.scope === model ? ` · ${translate('usageBadgeCurrent')}` : ''}`, window: w }, i))) }));
+    const rows = (items) => (_jsx("dl", { style: styles.details, children: items.map((w, i) => (_jsx(WindowRow, { label: `${usageWindowLabel(translate, w)}${model !== undefined && w.scope === model ? ` · ${translate('usageBadgeCurrent')}` : ''}`, window: w, t: translate, observedAt: observedAt, stale: stale }, i))) }));
     return _jsxs(_Fragment, { children: [rows(shown), hidden.length > 0 && _jsxs("details", { style: styles.moreWindows, children: [_jsx("summary", { style: styles.moreSummary, children: translate('usageBadgeMoreWindows', { count: hidden.length }) }), rows(hidden)] })] });
 }
 /** One `dt`/`dd` pair: window name → `25% · 6d1h`, with the bar underneath. */
-function WindowRow({ label, window: w }) {
-    const percent = usedPercent(w);
-    return (_jsxs(_Fragment, { children: [_jsx("dt", { style: styles.dt, children: label }), _jsxs("dd", { style: styles.dd, children: [percent, "%", w.resetsAt !== undefined && _jsxs("span", { style: styles.reset, children: [" \u00B7 ", windowLabel(w)] })] }), _jsx("div", { style: styles.bar, "aria-hidden": true, children: _jsx("div", { style: { ...styles.barFill, width: `${percent}%`, background: usageBarColor(percent) } }) })] }));
+function WindowRow({ label, window: w, t, observedAt, stale }) {
+    const percent = displayUsedPercent(w.usedPercent);
+    return (_jsxs(_Fragment, { children: [_jsx("dt", { style: styles.dt, children: label }), _jsxs("dd", { style: styles.dd, children: [percent === undefined ? t('usageMeterInvalid') : `${percent}%`, w.resetsAt !== undefined && Number.isFinite(w.resetsAt) && _jsxs("span", { style: styles.reset, children: [" \u00B7 ", windowLabel(w)] })] }), _jsx(UsageMeter, { window: w, t: t, style: styles.bar, observedAt: observedAt, stale: stale })] }));
 }
 /**
  * Unplaced portal panel: hidden but laid out so the clamp measures real
@@ -490,10 +574,14 @@ const styles = {
         color: 'var(--dsw-alias-label-secondary)',
     },
     label: { textOverflow: 'ellipsis', minWidth: 0, overflow: 'hidden' },
-    // Mirrors the host stat-dialog panel.
+    // Mirrors the host stat-dialog panel. The menu fill is translucent by
+    // design and only the host's backdrop blur keeps it readable as a surface:
+    // without the blur the transcript behind the dialog stays sharp and shows
+    // through the fill.
     panel: {
         position: 'fixed', zIndex: 1100, boxSizing: 'border-box',
         background: 'var(--dsw-specific-menu)',
+        backdropFilter: 'var(--dsw-menu-backdrop-filter)',
         width: 'max-content', minWidth: 'min(300px, 100vw - 24px)', maxWidth: 'min(440px, 100vw - 24px)',
         maxHeight: 'min(560px, 100dvh - 24px)', overflowY: 'auto', overscrollBehavior: 'contain',
         boxShadow: 'var(--dsw-elevation-prominent)',
@@ -539,5 +627,4 @@ const styles = {
         gridColumn: '1 / -1', height: 4, borderRadius: 2, overflow: 'hidden',
         background: 'var(--dsw-alias-border-l2)', marginBottom: 2,
     },
-    barFill: { height: '100%', borderRadius: 2 },
 };

package/lib/client/SubscriptionsSection.d.ts

@@ -30,9 +30,14 @@ export interface UsageWindow {
     scope?: string;
     usedPercent: number;
     resetsAt?: number;
+    startsAt?: number;
+    windowDurationMs?: number;
+    fixedWindow?: boolean;
 }
 /** `usage` endpoint value: the node half owns this shape. */
 export interface ProviderUsage {
+    observedAt?: number;
+    stale?: boolean;
     supported: boolean;
     windows?: UsageWindow[];
     plan?: string;
@@ -73,8 +78,8 @@ export type SubscriptionsSectionProps = Partial<SubscriptionsSectionInjected>;
  * fallback, never as a plan limit.
  */
 export declare function clientVersionText(t: SubscriptionsSectionInjected['t'], clientVersion: ProviderStatus['clientVersion']): string;
-/** Bar fill color: success normally, warn from 80%, error from 95%. Shared with the composer badge. */
-export declare function usageBarColor(usedPercent: number): string;
+/** Meter fill color lives with the pace logic: fresh 90%+ is red, pace presets add a yellow lead threshold. */
+export { usageBarColor } from './usage-pace.js';
 /** What one provider's collapsible default-effort section renders. */
 export interface ModelDefaultsView {
     /** Models with reasoning levels, after the name filter — one row each. */

package/lib/client/SubscriptionsSection.js

@@ -18,6 +18,8 @@ import { en } from './locales.js';
 import { ProviderAccountManager } from './ProviderAccountManager.js';
 import { ExternalUsageCards } from './ExternalUsageCards.js';
 import { CursorCard } from './CursorCard.js';
+import { UsageMeter } from './UsageMeter.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';
@@ -102,8 +104,6 @@ const styles = {
         font: 'inherit', fontSize: 14, lineHeight: '20px', cursor: 'pointer',
         color: 'var(--dsw-alias-state-warn-label)',
     },
-    usageTrack: cardStyles.usageTrack,
-    usageFill: cardStyles.usageFill,
     deviceCode: {
         marginTop: 4, display: 'flex', flexDirection: 'column', gap: 6,
         border: '1px solid var(--dsw-alias-border-l2)', borderRadius: 8,
@@ -183,14 +183,8 @@ function usageWindowLabel(t, window) {
         : window.kind === 'weekly' ? t('usageWeekly') : t('usageWindow');
     return window.scope !== undefined && window.scope !== '' ? `${base} · ${window.scope}` : base;
 }
-/** Bar fill color: success normally, warn from 80%, error from 95%. Shared with the composer badge. */
-export function usageBarColor(usedPercent) {
-    if (usedPercent >= 95)
-        return 'var(--dsw-alias-state-error-primary)';
-    if (usedPercent >= 80)
-        return 'var(--dsw-alias-state-warn-label)';
-    return 'var(--dsw-alias-state-success-primary)';
-}
+/** Meter fill color lives with the pace logic: fresh 90%+ is red, pace presets add a yellow lead threshold. */
+export { usageBarColor } from './usage-pace.js';
 /**
  * Derive one provider's default-effort section from its catalog and filter.
  * Pure so the collapsed-header counts and the filter stay testable without a
@@ -268,6 +262,7 @@ export function SubscriptionsSection(props) {
     const [copiedCode, setCopiedCode] = useState(undefined);
     /** Usage snapshots keyed `${provider}:${accountKey}` — every account tracks its own windows. */
     const [usages, setUsages] = useState({});
+    const [observedAt, setObservedAt] = useState({});
     const [usageErrors, setUsageErrors] = useState({});
     const [usageLoading, setUsageLoading] = useState({});
     const mountedRef = useRef(true);
@@ -377,6 +372,7 @@ export function SubscriptionsSection(props) {
             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 };
@@ -535,9 +531,9 @@ export function SubscriptionsSection(props) {
                                                     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) => {
-                                                const percent = Math.min(100, Math.max(0, window.usedPercent));
-                                                return (_jsxs("div", { style: styles.usageRow, children: [_jsxs("div", { style: styles.usageMeta, children: [_jsx("span", { children: usageWindowLabel(t, window) }), _jsxs("span", { children: [`${String(Math.round(percent))}%`, window.resetsAt !== undefined
-                                                                            && ` · ${t('usageResets', { date: new Date(window.resetsAt).toLocaleString() })}`] })] }), _jsx("div", { style: styles.usageTrack, children: _jsx("div", { style: { ...styles.usageFill, width: `${String(percent)}%`, background: usageBarColor(percent) } }) })] }, 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) })] }));

package/lib/client/UsageBadgeDisplaySetting.js

@@ -1,13 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { setUsageBadgeMode, useUsageBadgeMode } from './usage-badge-preferences.js';
+import { isUsageColorPreset, setUsageColorPreset, useUsageColorPreset } from './usage-color-preferences.js';
 /** Browser-local display preference; never changes provider or account settings. */
 export function UsageBadgeDisplaySetting({ t }) {
     const mode = useUsageBadgeMode();
+    const preset = useUsageColorPreset();
     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);
@@ -18,7 +20,22 @@ 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') }), failed && _jsx("p", { role: "alert", style: { ...styles.hint, color: 'var(--dsw-alias-state-error-primary)' }, children: t('usageBadgeDisplaySaveFailed') })] }));
+                        }, 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;
+                            try {
+                                setUsageColorPreset(value);
+                                setFailed(false);
+                            }
+                            catch (error) {
+                                if (!(error instanceof DOMException) || !['SecurityError', 'QuotaExceededError'].includes(error.name))
+                                    throw error;
+                                setFailed(true);
+                            }
+                        }, children: [_jsx("option", { value: "standard", children: t('usageColorStandard') }), _jsx("option", { value: "relaxed", children: t('usageColorRelaxed') }), _jsx("option", { value: "remaining", children: t('usageColorRemaining') })] })] }), _jsx("p", { style: styles.hint, children: t(preset === 'remaining' ? 'usageColorRemainingHint' : 'usageColorPaceHint', {
+                    allowance: preset === 'relaxed' ? 15 : 10,
+                }) }), failed && _jsx("p", { role: "alert", style: { ...styles.hint, color: 'var(--dsw-alias-state-error-primary)' }, children: t('usageBadgeDisplaySaveFailed') })] }));
 }
 const styles = {
     card: {

package/lib/client/UsageMeter.d.ts

@@ -0,0 +1,8 @@
+import type { CSSProperties } from 'react';
+import type { UsageWindow, SubscriptionsSectionInjected } from './SubscriptionsSection.js';
+import type { UsageObservation } from './usage-pace.js';
+export declare function UsageMeter({ window: quota, t, style, observedAt, stale }: {
+    window: UsageWindow;
+    t: SubscriptionsSectionInjected['t'];
+    style?: CSSProperties;
+} & UsageObservation): import("react").JSX.Element;

package/lib/client/UsageMeter.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { elapsedPercent, isUsageFresh, resetCountdownParts, usageBarColor, usageColorState, validUsage } from './usage-pace.js';
+import { useUsageColorPreset } from './usage-color-preferences.js';
+/** Singular/plural locale keys per countdown unit (zh maps both to one string). */
+const UNIT_KEYS = {
+    day: ['usageUnitDay', 'usageUnitDays'],
+    hour: ['usageUnitHour', 'usageUnitHours'],
+    minute: ['usageUnitMinute', 'usageUnitMinutes'],
+};
+export function UsageMeter({ window: quota, t, style, observedAt, stale }) {
+    const preset = useUsageColorPreset();
+    const [now, setNow] = useState(Date.now);
+    useEffect(() => {
+        const timer = setInterval(() => setNow(Date.now()), 60_000);
+        return () => clearInterval(timer);
+    }, []);
+    // Use render time for new readings, without trusting a future observation timestamp.
+    const current = Math.max(now, Date.now());
+    const valid = validUsage(quota.usedPercent);
+    const used = valid ? quota.usedPercent : 0;
+    const fresh = isUsageFresh(quota, { observedAt, stale }, current);
+    // 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')
+            : pace === undefined && preset !== 'remaining' ? t('usageMeterUnknownTime')
+                : state === 'yellow' ? t('usageMeterAhead') : t('usageMeterNoWarning'),
+        elapsed === undefined ? '' : t('usageMeterPace', { elapsed: Math.round(elapsed) }),
+        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)
+                .map(part => t(UNIT_KEYS[part.unit][part.count === 1 ? 0 : 1], { count: part.count }))
+                .join(' '),
+        }) : '',
+    ].filter(Boolean).join(' · ');
+    return _jsxs("div", { role: "img", "aria-label": label, title: label, "data-usage-color": state, style: {
+            height: 6, borderRadius: 3, overflow: 'hidden',
+            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, 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-specific-menu"];
+        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"];
     };
 };
 /** A glyph name listed in {@link HOST_CONTRACT}; hostIcon() accepts no other. */

package/lib/client/host-contract.js

@@ -95,6 +95,7 @@ export const HOST_CONTRACT = {
             '--dsw-alias-state-success-primary',
             '--dsw-alias-state-warn-label',
             '--dsw-elevation-prominent',
+            '--dsw-menu-backdrop-filter',
             '--dsw-specific-menu',
         ],
     },

package/lib/client/locales.d.ts

@@ -79,6 +79,30 @@ export declare const en: {
     usageMonthly: string;
     usageWindow: string;
     usageResets: string;
+    usageMeterUsed: string;
+    usageMeterPace: string;
+    usageMeterPaceAhead: string;
+    usageMeterPaceBehind: string;
+    usageMeterPaceEven: string;
+    usageMeterInvalid: string;
+    usageMeterStale: string;
+    usageMeterNearLimit: string;
+    usageMeterAhead: string;
+    usageMeterNoWarning: string;
+    usageMeterUnknownTime: string;
+    usageMeterReset: string;
+    usageUnitDay: string;
+    usageUnitDays: string;
+    usageUnitHour: string;
+    usageUnitHours: string;
+    usageUnitMinute: string;
+    usageUnitMinutes: string;
+    usageColorLabel: string;
+    usageColorStandard: string;
+    usageColorRelaxed: string;
+    usageColorRemaining: string;
+    usageColorPaceHint: string;
+    usageColorRemainingHint: string;
     usagePlan: string;
     externalUsageTitle: string;
     externalUsageConnected: string;
@@ -131,6 +155,7 @@ export declare const en: {
     usageBadgeTitle: string;
     usageBadgeDisplay: string;
     usageBadgeDisplayRecent: string;
+    usageBadgeDisplayAlways: string;
     usageBadgeDisplayHidden: string;
     usageBadgeDisplayHint: string;
     usageBadgeDisplaySaveFailed: string;
@@ -226,6 +251,30 @@ export declare const zh: {
     usageMonthly: string;
     usageWindow: string;
     usageResets: string;
+    usageMeterUsed: string;
+    usageMeterPace: string;
+    usageMeterPaceAhead: string;
+    usageMeterPaceBehind: string;
+    usageMeterPaceEven: string;
+    usageMeterInvalid: string;
+    usageMeterStale: string;
+    usageMeterNearLimit: string;
+    usageMeterAhead: string;
+    usageMeterNoWarning: string;
+    usageMeterUnknownTime: string;
+    usageMeterReset: string;
+    usageUnitDay: string;
+    usageUnitDays: string;
+    usageUnitHour: string;
+    usageUnitHours: string;
+    usageUnitMinute: string;
+    usageUnitMinutes: string;
+    usageColorLabel: string;
+    usageColorStandard: string;
+    usageColorRelaxed: string;
+    usageColorRemaining: string;
+    usageColorPaceHint: string;
+    usageColorRemainingHint: string;
     usagePlan: string;
     externalUsageTitle: string;
     externalUsageConnected: string;
@@ -278,6 +327,7 @@ export declare const zh: {
     usageBadgeTitle: string;
     usageBadgeDisplay: string;
     usageBadgeDisplayRecent: string;
+    usageBadgeDisplayAlways: string;
     usageBadgeDisplayHidden: string;
     usageBadgeDisplayHint: string;
     usageBadgeDisplaySaveFailed: string;