dsh-subscriptions 0.1.0 → 0.1.2

package/README.md

@@ -1,4 +1,7 @@
-# DSH Subscription Hub
+# DSH Subscriptions
+
+[![npm version](https://img.shields.io/npm/v/dsh-subscriptions)](https://www.npmjs.com/package/dsh-subscriptions)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)
 
 Bring your AI subscriptions into
 [DeepSeek Harness](https://github.com/deepseek-ai/deepseek-harness) (DSH). One
@@ -23,12 +26,74 @@ reported quota in **Settings → Subscriptions**.
   image generation and editing, and Grok video generation when the matching
   provider is enabled.
 
+## Screenshots
+
+Captured against DSH 0.2.0-rc.2 in the web UI with a local stub serving
+frozen provider responses, so each image shows a product state rather than
+a real account. Identities in the images are fabricated, and the quota
+percentages, catalogs, and reset countdowns are sample data.
+
+### Subscriptions
+
+Per-provider quota windows, account controls, and the status-bar display
+preference live in **Settings → Subscriptions**.
+
+![Subscriptions settings page](docs/images/subscriptions.png)
+
+### Model selection
+
+Logged-in providers join the session model picker with their live catalogs.
+
+![Model picker with subscription models](docs/images/model-picker.png)
+
+Models that advertise reasoning levels get an **Effort** selector in the
+same menu. Levels and defaults come from the provider's live catalog;
+without discovery Codex falls back to a built-in list, and a configured
+default overrides either.
+
+![Reasoning effort selector](docs/images/model-effort.png)
+
+Codex models whose catalog advertises the fast tier get a **Speed** toggle
+in the composer's tool row: Standard or Fast, per session.
+
+![Speed toggle with the Standard/Fast menu open](docs/images/speed-toggle.png)
+
+**Settings → Subscriptions → provider → Manage** edits account aliases,
+pool participation, model allowlists, and the per-model effort, context,
+and tool settings.
+
+![Model settings](docs/images/model-settings.png)
+
+![Provider tools](docs/images/provider-tools.png)
+
+### Quota while you work
+
+The composer's stats row gains a **subscription usage** pill showing the
+used percentage and reset window for the provider of the session's current
+model. It shows at most one provider; switching to a non-subscription model
+keeps the most recent subscription selected in the mounted conversation
+view, or stays hidden if there is none.
+
+![Subscription usage pill in the stats row](docs/images/usage-pill.png)
+
+Click the pill to expand every provider and account that reports usage —
+the default account is starred, and the current provider is listed first.
+A provider with no usage endpoint, such as GitHub Copilot, has no row, and
+neither do accounts without a usage window. Antigravity previews only the
+current model's windows; the other model windows stay in a closed
+disclosure.
+
+![Subscription usage pill expanded](docs/images/usage-badge.png)
+
 ## Install
 
 Current source is tested with DSH `0.1.7-rc.2`, `0.2.0-rc.1`, and
 `0.2.0-rc.2`. The package's peers admit `>=0.1.7-rc.2 <0.3.0-0`: untested
-versions inside that range install but are unsupported, and versions outside
-it need an explicit `dsh plugin allow-version` exemption. See
+versions inside that range install but are unsupported, and versions
+outside it need an explicit `dsh plugin allow-version` exemption.
+`dsh plugin add` checks those ranges with `includePrerelease` semantics, so
+the admitted set covers every host build from `0.1.7-rc.2` through the
+whole `0.2.x` line, prereleases included, and blocks the `0.3.0` line. See
 [docs/compatibility.md](docs/compatibility.md)
 for the support window and [docs/testing.md](docs/testing.md) for the test
 layers. With `dsh` available, install the plugin into the web profile from
@@ -41,7 +106,7 @@ dsh plugin --profile web add dsh-subscriptions
 Or from GitHub source:
 
 ```sh
-dsh plugin --profile web add github:goodboys-ai/dsh-subscription-hub
+dsh plugin --profile web add github:goodboys-ai/dsh-subscriptions
 ```
 
 Git installs run this package's `prepare` script to build the host and browser
@@ -74,7 +139,7 @@ spec (`#vX.Y.Z`); see the
 
 ## Verification and limits
 
-CI builds, tests, and boots a packed tarball on both supported DSH versions;
+CI builds, tests, and boots a packed tarball on all supported DSH versions;
 it does not run the GitHub source install's `prepare` step. Offline
 provider tests check recorded API responses, so a passing CI run cannot prove
 that a provider still accepts live sign-in or model requests. See
@@ -106,6 +171,34 @@ usage.
 The plugin follows DSH network settings. Its former proxy configuration and
 UI have been retired; an old plugin proxy config file is ignored.
 
+## Usage coloring
+
+**Settings → Subscriptions → Usage coloring** offers one browser-local dropdown:
+
+- **Standard** (default): yellow when used quota leads elapsed time by at least 10 percentage points.
+- **Relaxed**: yellow at a lead of at least 15 points.
+- **Remaining quota only**: no yellow pace warnings.
+
+Every preset shows reported usage of 90% or more in red, before considering pace. For example, 40% used after 25% of a window is a 15-point lead, not a consumption forecast. Preferences apply to all meters, survive reloads and synchronize across tabs of the same origin. They change display only, never account routing or quota enforcement.
+
+A vertical marker shows elapsed time only for an explicit valid start/end interval or a provider-verified fixed duration. A session/weekly label alone does not establish a fixed window; rolling or unknown intervals have no marker. Claude's recognized five-hour/seven-day buckets and Codex's reported quota durations supply fixed-window metadata. Unknown timing falls back to green below 90%, without a marker or yellow warning.
+
+Expired, failed-refresh or more-than-five-minute-old readings retain the last reported green/red color, without pace warnings or markers. Cached numbers remain visible, with an accessible stale label; refresh to confirm them. Invalid percentages show an unavailable state without a fabricated fill. Tooltips explain remaining quota, time progress and reset countdown where available. See the [decision record](.agents/notes/implemented/architecture/2026-10-01-usage-pace-colors.md) for rationale and verification limits.
+
+### MiniMax subscription usage
+
+Configure `MINIMAX_API_KEY` for the global service or
+`MINIMAX_CN_API_KEY` for China, using DSH's standard model-key configuration.
+The plugin reuses those credential references; no separate subscription ref is
+required. Quota reads require subscription keys, not `sk-api-*` pay-as-you-go keys. The plugin reads the
+region's `/v1/token_plan/remains` endpoint and displays finite per-model quotas
+with API-provided start/end times. It does not add model routing or OAuth login.
+Unlimited, boosted-above-100% and unsupported quotas are omitted; if none remain,
+the card reports unavailable rather than inventing a percentage. Explicit
+remaining percentages take priority; older responses follow the official CLI's
+remaining-count compatibility convention. No live-account response was used in
+verification.
+
 ## Development
 
 ```sh
@@ -122,7 +215,7 @@ contract checks, the boot smoke, and the host E2E) are documented in [docs/testi
 support window and release process in
 [docs/compatibility.md](docs/compatibility.md).
 
-The package is published to npm as `dsh-subscriptions`, starting with the first release under the new name (GitHub source installation remains supported). The `cordis.patch.yml` bundle entry and browser module ID use the same package name. Earlier releases were published as `@goodboys-ai/dsh-subscription-hub`; that name will be deprecated in favor of `dsh-subscriptions`. If the old scoped package is installed, remove it before adding the new one — installing both registers the same adapters twice and breaks plugin load.
+The package is published to npm as `dsh-subscriptions`, starting with the first release under the new name (GitHub source installation remains supported). The `cordis.patch.yml` bundle entry and browser module ID use the same package name. Earlier releases were published as `@goodboys-ai/dsh-subscription-hub`; that name is deprecated and points here. If the old scoped package is installed, remove it before adding the new one — installing both registers the same adapters twice and breaks plugin load.
 
 ## Origins
 

package/icon.svg

@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="256" y2="256" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#2f6df6"/>
+      <stop offset="1" stop-color="#0bb6a8"/>
+    </linearGradient>
+  </defs>
+  <rect width="256" height="256" rx="58" fill="url(#bg)"/>
+  <g stroke="#ffffff" stroke-opacity="0.65" stroke-width="7" stroke-linecap="round">
+    <line x1="128" y1="128" x2="54" y2="64"/>
+    <line x1="128" y1="128" x2="202" y2="64"/>
+    <line x1="128" y1="128" x2="42" y2="150"/>
+    <line x1="128" y1="128" x2="214" y2="150"/>
+    <line x1="128" y1="128" x2="78" y2="208"/>
+    <line x1="128" y1="128" x2="178" y2="208"/>
+  </g>
+  <g fill="#ffffff">
+    <circle cx="54" cy="64" r="17"/>
+    <circle cx="202" cy="64" r="17"/>
+    <circle cx="42" cy="150" r="17"/>
+    <circle cx="214" cy="150" r="17"/>
+    <circle cx="78" cy="208" r="17"/>
+    <circle cx="178" cy="208" r="17"/>
+  </g>
+  <circle cx="128" cy="128" r="37" fill="#ffffff"/>
+  <circle cx="128" cy="128" r="37" fill="none" stroke="#0b3b5e" stroke-opacity="0.18" stroke-width="3"/>
+  <circle cx="128" cy="128" r="15" fill="#0e7490"/>
+</svg>

package/lib/client/CursorCard.js

@@ -4,20 +4,17 @@ import { callSubscriptionsAuth } from './subscriptions-rpc.js';
 import { ProviderAccountManager } from './ProviderAccountManager.js';
 import { USAGE_BADGE_REFRESH_EVENT } from './usage-badge-preferences.js';
 import { subscriptionCardStyles as styles } from './subscription-card-styles.js';
+import { UsageMeter } from './UsageMeter.js';
+import { displayUsedPercent } from './usage-pace.js';
 function message(error) {
     return error instanceof Error ? error.message : String(error);
 }
-function barColor(percent) {
-    if (percent >= 95)
-        return 'var(--dsw-alias-state-error-primary)';
-    if (percent >= 80)
-        return 'var(--dsw-alias-state-warn-label)';
-    return 'var(--dsw-alias-state-success-primary)';
-}
 /** Cursor's single connected account, rendered with the same card and Manage dialog as the other providers. */
 export function CursorCard({ rpc, t }) {
     const [status, setStatus] = useState();
     const [usage, setUsage] = useState();
+    const [observedAt, setObservedAt] = useState();
+    const [usageStale, setUsageStale] = useState(false);
     const [authorizeUrl, setAuthorizeUrl] = useState();
     const [error, setError] = useState();
     const [loading, setLoading] = useState(false);
@@ -43,12 +40,17 @@ export function CursorCard({ rpc, t }) {
     const refreshUsage = useCallback(async () => {
         setLoading(true);
         try {
-            setUsage(await callSubscriptionsAuth(rpc, 'cursorUsage', {}));
+            const value = await callSubscriptionsAuth(rpc, 'cursorUsage', {});
+            setUsage(value);
+            // Prefer the server's observation time; a cached reading must not look fresh.
+            setObservedAt(value.observedAt ?? Date.now());
+            setUsageStale(value.stale === true);
             setError(undefined);
             window.dispatchEvent(new Event(USAGE_BADGE_REFRESH_EVENT));
         }
         catch (failure) {
             setError(message(failure));
+            setUsageStale(true);
         }
         finally {
             setLoading(false);
@@ -91,6 +93,8 @@ export function CursorCard({ rpc, t }) {
         try {
             await callSubscriptionsAuth(rpc, 'cursorLogout', {});
             setUsage(undefined);
+            setObservedAt(undefined);
+            setUsageStale(false);
             await refreshStatus();
         }
         catch (failure) {
@@ -101,13 +105,13 @@ export function CursorCard({ rpc, t }) {
     return _jsxs("div", { style: styles.card, children: [_jsxs("div", { style: styles.header, children: [_jsx("span", { style: { ...styles.dot, background: status?.busy ? 'var(--dsw-alias-state-warn-label)'
                                 : connected ? 'var(--dsw-alias-state-success-primary)' : 'var(--dsw-alias-label-dimmed)' } }), _jsx("span", { style: styles.name, children: t('cursorTitle') })] }), _jsx("p", { style: styles.status, children: status === undefined ? t('checking') : status.busy ? t('loginInProgress')
                     : connected ? t('loggedInCount', { count: 1 }) : t('notLoggedIn') }), error !== undefined && _jsx("p", { style: styles.error, children: error }), connected && _jsxs("div", { style: styles.account, children: [_jsxs("div", { style: styles.accountHeader, children: [_jsx("span", { style: styles.defaultStar, title: t('defaultBadge'), children: "\u2605" }), _jsx("span", { style: styles.accountName, children: "Cursor" }), status.expiresAt !== undefined && _jsx("span", { style: styles.status, children: t('accountExpires', { date: new Date(status.expiresAt).toLocaleString() }) }), _jsx("button", { type: "button", style: { ...styles.button, marginLeft: 'auto', flexShrink: 0 }, onClick: () => { void logout(); }, children: t('logout') })] }), _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.status, children: t('usagePlan', { plan: usage.plan }) }), _jsx("button", { type: "button", style: styles.usageRefresh, disabled: loading, onClick: () => { void refreshUsage(); }, children: t('usageRefresh') })] }), loading && usage === undefined && _jsx("p", { style: styles.status, children: t('usageLoading') }), usage?.windows?.length === 0 && _jsx("p", { style: styles.status, children: t('usageEmpty') }), usage?.windows?.map((window, index) => {
-                                const percent = Math.min(100, Math.max(0, window.usedPercent));
+                                const percent = displayUsedPercent(window.usedPercent);
                                 const label = window.scope === 'Included' ? t('cursorIncluded')
                                     : window.scope === 'Cursor Models' ? t('cursorModels')
                                         : window.scope === 'Other Models' ? t('cursorOtherModels')
                                             : window.scope === 'Included requests' ? t('cursorIncludedRequests')
                                                 : window.scope ?? t('usageWindow');
-                                return _jsxs("div", { style: styles.usageRow, children: [_jsxs("div", { style: styles.usageMeta, children: [_jsx("span", { children: label }), _jsxs("span", { children: [Math.round(percent), "%", window.resetsAt === undefined ? ''
-                                                            : ` · ${t('usageResets', { date: new Date(window.resetsAt).toLocaleString() })}`] })] }), _jsx("div", { style: styles.usageTrack, children: _jsx("div", { style: { width: `${percent}%`, height: '100%', borderRadius: 3, background: barColor(percent) } }) })] }, index);
+                                return _jsxs("div", { style: styles.usageRow, children: [_jsxs("div", { style: styles.usageMeta, children: [_jsx("span", { children: label }), _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, stale: usageStale })] }, index);
                             })] })] }), _jsxs("div", { style: styles.actions, children: [status?.authenticated === false && !status.busy && _jsx("button", { type: "button", style: styles.button, onClick: () => { void login(); }, children: t('login') }), _jsx("button", { type: "button", style: styles.button, "aria-haspopup": "dialog", onClick: () => setManage(true), children: t('accountsManage') }), status?.busy === true && _jsx("button", { type: "button", style: styles.button, onClick: () => { void cancel(); }, children: t('cancel') })] }), status?.busy === true && authorizeUrl !== undefined && _jsx("a", { href: authorizeUrl, target: "_blank", rel: "noopener noreferrer", children: t('cursorOpenLogin') }), manage && _jsx(ProviderAccountManager, { provider: "cursor-subscription", name: "Cursor", rpc: rpc, t: t, onClose: () => setManage(false) })] });
 }

package/lib/client/ExternalUsageCards.js

@@ -3,33 +3,33 @@ import { useCallback, useEffect, useState } from 'react';
 import { callSubscriptionsAuth } from './subscriptions-rpc.js';
 import { subscriptionCardStyles as styles } from './subscription-card-styles.js';
 import { USAGE_BADGE_REFRESH_EVENT } from './usage-badge-preferences.js';
+import { UsageMeter } from './UsageMeter.js';
+import { displayUsedPercent } from './usage-pace.js';
 const SOURCES = [
     { id: 'opencode-go', name: 'OpenCode Go', ref: 'OPENCODE_GO_API_KEY' },
     { id: 'kimi-code', name: 'Kimi Code', ref: 'KIMI_CODING_API_KEY' },
+    { id: 'minimax', name: 'MiniMax', ref: 'MINIMAX_API_KEY' },
+    { id: 'minimax-cn', name: 'MiniMax CN', ref: 'MINIMAX_CN_API_KEY' },
 ];
 function errorText(error) {
     return error instanceof Error ? error.message : String(error);
 }
-function barColor(percent) {
-    if (percent >= 95)
-        return 'var(--dsw-alias-state-error-primary)';
-    if (percent >= 80)
-        return 'var(--dsw-alias-state-warn-label)';
-    return 'var(--dsw-alias-state-success-primary)';
-}
 /** Quota cards for API-key providers already available through DSH itself. */
 export function ExternalUsageCards({ rpc, t }) {
     const [status, setStatus] = useState();
     const [statusError, setStatusError] = useState();
     const [usage, setUsage] = useState({});
+    const [observedAt, setObservedAt] = useState({});
     const [errors, setErrors] = useState({});
     const [loading, setLoading] = useState({});
     const refresh = useCallback(async (source) => {
         setLoading(prev => ({ ...prev, [source]: true }));
-        setErrors(prev => ({ ...prev, [source]: undefined }));
         try {
             const value = await callSubscriptionsAuth(rpc, 'externalUsage', { source });
             setUsage(prev => ({ ...prev, [source]: value }));
+            // Prefer the server's observation time; a cached reading must not look fresh.
+            setObservedAt(prev => ({ ...prev, [source]: value.observedAt ?? Date.now() }));
+            setErrors(prev => ({ ...prev, [source]: undefined }));
             window.dispatchEvent(new Event(USAGE_BADGE_REFRESH_EVENT));
         }
         catch (error) {
@@ -61,12 +61,12 @@ export function ExternalUsageCards({ rpc, t }) {
             return _jsxs("div", { style: styles.card, children: [_jsxs("div", { style: styles.header, children: [_jsx("span", { style: { ...styles.dot, background: configured
                                         ? 'var(--dsw-alias-state-success-primary)' : 'var(--dsw-alias-label-dimmed)' } }), _jsx("span", { style: styles.name, children: name })] }), !(status === undefined && statusError !== undefined) && _jsx("p", { style: styles.status, children: status === undefined ? t('checking')
                             : configured ? t('externalUsageConnected') : t('externalUsageNotConfigured') }), statusError !== undefined && _jsx("p", { style: styles.error, children: t('externalUsageUnavailable', { message: statusError }) }), status !== undefined && !configured && _jsx("p", { style: styles.status, children: t('externalUsageConfigure', { ref }) }), configured && _jsxs("div", { style: styles.account, children: [_jsxs("div", { style: styles.accountHeader, children: [_jsx("span", { style: styles.defaultStar, title: t('defaultBadge'), children: "\u2605" }), _jsx("span", { style: styles.accountName, children: t('externalUsageApiKey') })] }), _jsxs("div", { style: styles.usage, children: [_jsxs("div", { style: styles.usageHeader, children: [_jsx("span", { style: styles.usageTitle, children: t('usageTitle') }), snapshot?.plan !== undefined && _jsx("span", { style: styles.usagePlan, children: t('usagePlan', { plan: snapshot.plan }) }), _jsx("button", { type: "button", style: styles.usageRefresh, disabled: loading[id] === true, onClick: () => { void refresh(id); }, children: t('usageRefresh') })] }), loading[id] === true && snapshot === undefined && _jsx("p", { style: styles.status, children: t('usageLoading') }), errors[id] !== undefined && _jsx("p", { style: styles.error, children: t('usageError', { message: errors[id] }) }), snapshot?.windows?.length === 0 && _jsx("p", { style: styles.status, children: t('usageEmpty') }), snapshot?.windows?.map((window, index) => {
-                                        const percent = Math.min(100, Math.max(0, window.usedPercent));
+                                        const percent = displayUsedPercent(window.usedPercent);
                                         const label = window.kind === 'session' ? t('usageSession')
                                             : window.kind === 'weekly' ? t('usageWeekly')
                                                 : window.scope === 'Monthly' ? t('usageMonthly') : window.scope ?? t('usageWindow');
-                                        return _jsxs("div", { style: styles.usageRow, children: [_jsxs("div", { style: styles.usageMeta, children: [_jsx("span", { children: label }), _jsxs("span", { children: [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: `${percent}%`, background: barColor(percent) } }) })] }, index);
+                                        return _jsxs("div", { style: styles.usageRow, children: [_jsxs("div", { style: styles.usageMeta, children: [_jsx("span", { children: label }), _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[id], stale: errors[id] !== undefined || snapshot?.stale === true })] }, index);
                                     })] })] }), !configured && _jsx("div", { style: styles.actions, children: _jsx("button", { type: "button", style: styles.button, onClick: () => { void refreshStatus(); }, children: t('usageRefresh') }) })] }, id);
         }) });
 }

package/lib/client/SubscriptionUsageBadge.d.ts

@@ -31,6 +31,8 @@ export interface AccountUsageDisplay {
     /** The account direct routes serve; the collapsed pill reads this one. */
     isDefault: boolean;
     windows: UsageWindow[];
+    observedAt?: number | undefined;
+    stale?: boolean | undefined;
 }
 /** One provider's usage snapshot: every logged-in account that reports windows. */
 export interface ProviderUsageDisplay {
@@ -42,7 +44,7 @@ export interface ProviderUsageDisplay {
 /** The account the collapsed pill reads: the default one, else the first listed. */
 export declare function pillAccountOf(d: ProviderUsageDisplay): AccountUsageDisplay;
 /** Brand display names (short form for the compact badge). */
-export type BadgeProvider = SubscriptionProvider | 'cursor-subscription' | 'opencode-go' | 'kimi-coding';
+export type BadgeProvider = SubscriptionProvider | 'cursor-subscription' | 'opencode-go' | 'kimi-coding' | 'minimax' | 'minimax-cn';
 export interface UsageRosterEntry {
     provider: BadgeProvider;
     account: AccountStatus;
@@ -107,10 +109,12 @@ type Translate = (key: SubscriptionsKey, params?: Record<string, unknown>) => st
  */
 export declare function SubscriptionUsageBadge({ rpc, currentModel, t }: SubscriptionUsageBadgeProps): import("react").JSX.Element;
 /** Preview each account independently; all remaining quotas stay accessible. */
-export declare function AccountWindows({ windows, model, provider, translate }: {
+export declare function AccountWindows({ windows, model, provider, translate, observedAt, stale }: {
     windows: readonly UsageWindow[];
     model: string | undefined;
     provider?: BadgeProvider;
     translate: Translate;
+    observedAt?: number | undefined;
+    stale?: boolean | undefined;
 }): import("react").JSX.Element;
 export {};

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';
@@ -56,6 +59,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 +124,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 +138,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 +165,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 +184,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 +219,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(' · ')}`;
@@ -287,8 +296,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 +313,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 +324,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 +338,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;
@@ -429,7 +458,7 @@ export function SubscriptionUsageBadge({ rpc, currentModel, t }) {
         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 === badgeSelection?.provider ? badgeSelection.model : undefined, provider: d.provider, translate: translate }, `${d.provider}:${badgeSelection?.model ?? ''}`)] }, account.key)))] }, d.provider)))] }), document.body)] }));
     return (_jsxs(_Fragment, { children: [seat, statsRow !== null && statsRow.isConnected ? createPortal(pill, statsRow) : pill] }));
 }
 /**
@@ -457,15 +486,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 +519,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 +572,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. */