dsh-plugin-subscription-oauth 0.7.0 → 0.8.1

package/lib/auth/allowance-scheduler.d.ts

@@ -0,0 +1,58 @@
+/**
+ * Cross-request memory of when each provider account's allowance resets.
+ *
+ * This is what lets one model id draw on the whole account pool without a wasted
+ * request: when the default account's allowance runs out, the moment it will refill is
+ * remembered, and until then the scheduler sends work straight to another account
+ * instead of trying the spent one, failing, and only then moving on. When the reset
+ * time passes the spent account is first choice again.
+ *
+ * The holder is shared by the route's reader (which learns reset times from usage
+ * reads) and its streamer (which consults them when picking an account), so the
+ * scheduler's view is exactly the last read's.
+ *
+ * @module dsh-plugin-subscription-oauth/auth/allowance-scheduler
+ */
+/** One account's remembered allowance state. */
+export interface AllowanceState {
+    /** Epoch milliseconds at which the account's allowance resets, when known. */
+    resetsAt?: number;
+    /** Epoch milliseconds at which this state was last learned. */
+    learnedAt: number;
+}
+/** In-memory, per-provider memory of account reset times. */
+export declare class AllowanceScheduler {
+    private readonly byProvider;
+    /** One provider's account states, creating the map on first use. */
+    private provider;
+    /**
+     * Record that one account's allowance resets at a given moment.
+     *
+     * @param provider - the provider route id.
+     * @param account - the account key.
+     * @param resetsAt - epoch milliseconds of the allowance reset, when known.
+     */
+    noteReset(provider: string, account: string, resetsAt?: number): void;
+    /**
+     * Whether one account's allowance is known to be spent now.
+     *
+     * True when the account was recorded with a reset time that is still in the future:
+     * its allowance is spent and will not refill until then, so a request should go to a
+     * different account rather than fail against this one.
+     *
+     * @param provider - the provider route id.
+     * @param account - the account key.
+     * @returns whether the account's allowance is spent until its remembered reset.
+     */
+    isSpentUntilReset(provider: string, account: string): boolean;
+    /**
+     * The moment one account's allowance is known to reset, when it was recorded.
+     *
+     * @param provider - the provider route id.
+     * @param account - the account key.
+     * @returns the reset instant, or undefined when unknown or already passed.
+     */
+    resetAt(provider: string, account: string): number | undefined;
+}
+/** The one shared scheduler every route reads and writes. */
+export declare const allowanceScheduler: AllowanceScheduler;

package/lib/auth/allowance-scheduler.js

@@ -0,0 +1,72 @@
+/**
+ * Cross-request memory of when each provider account's allowance resets.
+ *
+ * This is what lets one model id draw on the whole account pool without a wasted
+ * request: when the default account's allowance runs out, the moment it will refill is
+ * remembered, and until then the scheduler sends work straight to another account
+ * instead of trying the spent one, failing, and only then moving on. When the reset
+ * time passes the spent account is first choice again.
+ *
+ * The holder is shared by the route's reader (which learns reset times from usage
+ * reads) and its streamer (which consults them when picking an account), so the
+ * scheduler's view is exactly the last read's.
+ *
+ * @module dsh-plugin-subscription-oauth/auth/allowance-scheduler
+ */
+/** In-memory, per-provider memory of account reset times. */
+export class AllowanceScheduler {
+    byProvider = new Map();
+    /** One provider's account states, creating the map on first use. */
+    provider(provider) {
+        let map = this.byProvider.get(provider);
+        if (map === undefined) {
+            map = new Map();
+            this.byProvider.set(provider, map);
+        }
+        return map;
+    }
+    /**
+     * Record that one account's allowance resets at a given moment.
+     *
+     * @param provider - the provider route id.
+     * @param account - the account key.
+     * @param resetsAt - epoch milliseconds of the allowance reset, when known.
+     */
+    noteReset(provider, account, resetsAt) {
+        this.provider(provider).set(account, { ...resetsAt === undefined ? {} : { resetsAt }, learnedAt: Date.now() });
+    }
+    /**
+     * Whether one account's allowance is known to be spent now.
+     *
+     * True when the account was recorded with a reset time that is still in the future:
+     * its allowance is spent and will not refill until then, so a request should go to a
+     * different account rather than fail against this one.
+     *
+     * @param provider - the provider route id.
+     * @param account - the account key.
+     * @returns whether the account's allowance is spent until its remembered reset.
+     */
+    isSpentUntilReset(provider, account) {
+        const state = this.byProvider.get(provider)?.get(account);
+        if (state === undefined)
+            return false;
+        if (state.resetsAt === undefined)
+            return false;
+        return Date.now() < state.resetsAt;
+    }
+    /**
+     * The moment one account's allowance is known to reset, when it was recorded.
+     *
+     * @param provider - the provider route id.
+     * @param account - the account key.
+     * @returns the reset instant, or undefined when unknown or already passed.
+     */
+    resetAt(provider, account) {
+        const state = this.byProvider.get(provider)?.get(account);
+        if (state === undefined || state.resetsAt === undefined)
+            return undefined;
+        return Date.now() < state.resetsAt ? state.resetsAt : undefined;
+    }
+}
+/** The one shared scheduler every route reads and writes. */
+export const allowanceScheduler = new AllowanceScheduler();

package/lib/client/UsageChip.d.ts

@@ -117,10 +117,12 @@ export declare function balanceOf(value: {
  * Format one wallet for the chip's compact line.
  *
  * A balance is money, not a percentage, so it renders as `¥6.89` rather than a meter;
- * the currency prefix keeps two currencies from being mistaken for one sum.
+ * the currency prefix keeps two currencies from being mistaken for one sum. The amount
+ * is rounded to two decimal places (a balance reads to the cent, and a figure like
+ * `1.1` for `1.10` would mislead) and always carries both places.
  *
  * @param wallet - the wallet to show.
- * @returns the short form, e.g. `¥6.89` or `+¥2` for a bonus wallet.
+ * @returns the short form, e.g. `¥6.89` or `+$2.00` for a bonus wallet.
  */
 export declare function formatBalance(wallet: ChipBalance): string;
 /**
@@ -157,6 +159,60 @@ export declare function pickWindow(windows: readonly UsageWindow[]): UsageWindow
  * @param usage - the accounts the route answered for.
  * @returns the reading, or undefined when the route stated no figure.
  */
+/** What one account's allowance reduces to for the chip. */
+export interface AccountReading {
+    /** Which account these figures belong to. */
+    account: string;
+    /** Plan name, when the provider stated one. */
+    plan?: string;
+    /** Every metered window, in the order the route stated them. */
+    windows: readonly UsageWindow[];
+}
+/**
+ * Reduce a route's per-account usage to one reading per account.
+ *
+ * A provider can hold several accounts (two Antigravity sign-ins, say), and the chip
+ * shows each one's allowance on its own line, the way the settings cards do — a merged
+ * figure would hide that one account is exhausted while the other is free.
+ *
+ * @param usage - every account the route answered for.
+ * @returns one reading per account that states a figure, in the route's order.
+ */
+/**
+ * Reduce a route's per-account usage to one reading per account.
+ *
+ * A provider can hold several accounts (two Antigravity sign-ins, say). Every account's
+ * windows are kept as the route stated them — a percentage-metered quota and a credit
+ * balance (`credits`) alike — so the per-account panel shows the real figures, and the
+ * compact line's merge decides which to integrate.
+ *
+ * @param usage - every account the route answered for.
+ * @returns one reading per account that states any window, in the route's order.
+ */
+export declare function accountReadingsOf(usage: readonly ProviderUsage[]): readonly AccountReading[];
+/**
+ * Merge every account's percentage-metered windows into one figure per label.
+ *
+ * The chip's compact line integrates the whole pool: two accounts at 50 percent read as
+ * one window at 50 percent (the same allowance spent twice as wide), not two lines. A
+ * credit balance (`credits`) is money, not a share of a shared allowance, so it is not
+ * merged — it stays on the per-account panel, where it reads correctly. Only windows
+ * that state a `usedPercent` (a share of an allowance) merge.
+ *
+ * @param readings - one per account, from {@link accountReadingsOf}.
+ * @returns one merged window per percentage-metered label, most-spent first.
+ */
+export declare function mergeAccountWindows(readings: readonly AccountReading[]): readonly UsageWindow[];
+/**
+ * Reduce one route's usage to the single line the compact chip renders.
+ *
+ * Kept for the balance-free providers that still show one merged line.
+ *
+ * @param provider - the route id.
+ * @param label - the route's display name.
+ * @param usage - the accounts the route answered for.
+ * @returns the first account's reading, or undefined when none states a figure.
+ */
 export declare function readingOf(provider: string, label: string, usage: readonly ProviderUsage[]): ChipReading | undefined;
 /**
  * Format a window's reset the way the settings cards do.

package/lib/client/UsageChip.js

@@ -82,14 +82,16 @@ export function balanceOf(value) {
  * Format one wallet for the chip's compact line.
  *
  * A balance is money, not a percentage, so it renders as `¥6.89` rather than a meter;
- * the currency prefix keeps two currencies from being mistaken for one sum.
+ * the currency prefix keeps two currencies from being mistaken for one sum. The amount
+ * is rounded to two decimal places (a balance reads to the cent, and a figure like
+ * `1.1` for `1.10` would mislead) and always carries both places.
  *
  * @param wallet - the wallet to show.
- * @returns the short form, e.g. `¥6.89` or `+¥2` for a bonus wallet.
+ * @returns the short form, e.g. `¥6.89` or `+$2.00` for a bonus wallet.
  */
 export function formatBalance(wallet) {
     const amount = Number.parseFloat(wallet.balance);
-    const trimmed = Number.isFinite(amount) ? String(Math.round(amount * 100) / 100) : wallet.balance;
+    const trimmed = Number.isFinite(amount) ? amount.toFixed(2) : wallet.balance;
     const symbol = wallet.currency === 'CNY' ? '¥' : wallet.currency === 'USD' ? '$' : `${wallet.currency} `;
     return `${wallet.bonus ? '+' : ''}${symbol}${trimmed}`;
 }
@@ -142,12 +144,102 @@ export function pickWindow(windows) {
     return best;
 }
 /**
- * Reduce one route's usage to what the chip renders.
+ * Reduce a route's per-account usage to one reading per account.
  *
- * @param provider - the route the figures came from.
+ * A provider can hold several accounts (two Antigravity sign-ins, say), and the chip
+ * shows each one's allowance on its own line, the way the settings cards do — a merged
+ * figure would hide that one account is exhausted while the other is free.
+ *
+ * @param usage - every account the route answered for.
+ * @returns one reading per account that states a figure, in the route's order.
+ */
+/**
+ * Reduce a route's per-account usage to one reading per account.
+ *
+ * A provider can hold several accounts (two Antigravity sign-ins, say). Every account's
+ * windows are kept as the route stated them — a percentage-metered quota and a credit
+ * balance (`credits`) alike — so the per-account panel shows the real figures, and the
+ * compact line's merge decides which to integrate.
+ *
+ * @param usage - every account the route answered for.
+ * @returns one reading per account that states any window, in the route's order.
+ */
+export function accountReadingsOf(usage) {
+    const out = [];
+    for (const entry of usage) {
+        if (entry.windows.length === 0)
+            continue;
+        out.push({ account: entry.account, windows: entry.windows, ...entry.plan === undefined ? {} : { plan: entry.plan } });
+    }
+    return out;
+}
+/**
+ * Merge every account's percentage-metered windows into one figure per label.
+ *
+ * The chip's compact line integrates the whole pool: two accounts at 50 percent read as
+ * one window at 50 percent (the same allowance spent twice as wide), not two lines. A
+ * credit balance (`credits`) is money, not a share of a shared allowance, so it is not
+ * merged — it stays on the per-account panel, where it reads correctly. Only windows
+ * that state a `usedPercent` (a share of an allowance) merge.
+ *
+ * @param readings - one per account, from {@link accountReadingsOf}.
+ * @returns one merged window per percentage-metered label, most-spent first.
+ */
+export function mergeAccountWindows(readings) {
+    const byLabel = new Map();
+    for (const reading of readings) {
+        for (const window of reading.windows) {
+            // Only a percentage-metered window merges. A credit balance (a bare used/limit
+            // pair) is money, not a share of a shared allowance, and averaging it across
+            // accounts would misread money as a quota.
+            if (window.usedPercent === undefined)
+                continue;
+            const list = byLabel.get(window.label) ?? [];
+            list.push(window);
+            byLabel.set(window.label, list);
+        }
+    }
+    const merged = [];
+    for (const [label, list] of byLabel) {
+        // Percentages average across accounts: the pool's spent share is the mean of each
+        // account's spent share (accounts share an allowance, they do not add to it).
+        const withPercent = list.filter((window) => window.usedPercent !== undefined);
+        if (withPercent.length === 0)
+            continue;
+        const usedPercent = withPercent.reduce((sum, window) => sum + (window.usedPercent ?? 0), 0) / withPercent.length;
+        // The pool's reset is the soonest account reset: the window refills when the first
+        // account's does.
+        const resets = list.map((window) => window.resetsAt).filter((at) => typeof at === 'number');
+        merged.push({
+            label,
+            usedPercent: Math.max(0, Math.min(100, usedPercent)),
+            ...resets.length === 0 ? {} : { resetsAt: Math.min(...resets) },
+        });
+    }
+    // Order by window period, shortest first: the rolling `5h` window reads before the
+    // `weekly` one, the way the providers state them and the way a reader scans (what
+    // resets soonest is the nearer limit). Unrecognised labels keep their input order.
+    const order = (label) => {
+        const short = shortWindow(label);
+        if (short === '5h' || short === 's')
+            return 0;
+        if (short === '1d' || short === 'mo')
+            return 1;
+        if (short === '7d')
+            return 2;
+        return 3;
+    };
+    return merged.sort((left, right) => order(left.label) - order(right.label));
+}
+/**
+ * Reduce one route's usage to the single line the compact chip renders.
+ *
+ * Kept for the balance-free providers that still show one merged line.
+ *
+ * @param provider - the route id.
  * @param label - the route's display name.
  * @param usage - the accounts the route answered for.
- * @returns the reading, or undefined when the route stated no figure.
+ * @returns the first account's reading, or undefined when none states a figure.
  */
 export function readingOf(provider, label, usage) {
     for (const entry of usage) {
@@ -197,6 +289,7 @@ export function formatReset(at, now) {
  */
 export function UsageChip({ call, t, isOwnProvider, accountBalance, ccSwitchBalance, useProjection }) {
     const [reading, setReading] = useState(undefined);
+    const [accountReadings, setAccountReadings] = useState(undefined);
     const [balance, setBalance] = useState(undefined);
     const [ccBalance, setCcBalance] = useState(undefined);
     const [now, setNow] = useState(() => Date.now());
@@ -239,8 +332,7 @@ export function UsageChip({ call, t, isOwnProvider, accountBalance, ccSwitchBala
     const load = useCallback(async (target) => {
         try {
             const result = await call('usage', { provider: target });
-            const label = result.status.providers.find((entry) => entry.provider === target)?.displayName ?? target;
-            return readingOf(target, label, result.usage);
+            return accountReadingsOf(result.usage);
         }
         catch {
             // A failed read is not worth a chip of its own: the settings page is where a user
@@ -276,7 +368,7 @@ export function UsageChip({ call, t, isOwnProvider, accountBalance, ccSwitchBala
             // Not one of ours (or none selected): keep showing the last own reading.
             : lastOwn.current;
         if (target === undefined) {
-            setReading(undefined);
+            setAccountReadings(undefined);
             return;
         }
         let live = true;
@@ -286,7 +378,7 @@ export function UsageChip({ call, t, isOwnProvider, accountBalance, ccSwitchBala
                 if (!live || next === undefined)
                     return;
                 lastOwn.current = target;
-                setReading(next);
+                setAccountReadings(next);
             });
         };
         refresh();
@@ -327,20 +419,22 @@ export function UsageChip({ call, t, isOwnProvider, accountBalance, ccSwitchBala
                         setOpen((was) => !was);
                     }, children: [_jsx("span", { className: "dsh-subscription-usage-chip-label", children: short }), balance.map((wallet) => (_jsx("span", { className: "dsh-subscription-usage-chip-cell", children: _jsx("span", { className: "dsh-subscription-usage-chip-value", children: formatBalance(wallet) }) }, `${wallet.currency}${wallet.bonus ? ':bonus' : ''}`)))] }), open && (_jsxs("span", { className: "dsh-subscription-usage-chip-panel", role: "status", children: [_jsx("span", { className: "dsh-subscription-usage-chip-full", children: t('usageChipFull', { provider: 'DeepSeek Account' }) }), balance.map((wallet) => (_jsx("span", { className: "dsh-subscription-usage-chip-meter", children: _jsxs("span", { className: "dsh-subscription-usage-chip-meterHead", children: [_jsx("span", { children: `${wallet.bonus ? 'Bonus · ' : ''}${wallet.currency}` }), _jsx("span", { className: "dsh-subscription-usage-chip-detail", children: formatBalance(wallet) })] }) }, `${wallet.currency}${wallet.bonus ? ':bonus' : ''}`)))] }))] }));
     }
-    if (reading === undefined)
-        return null;
-    const percent = reading.window.usedPercent;
-    if (percent === undefined)
+    if (accountReadings === undefined || accountReadings.length === 0)
         return null;
-    const reset = formatReset(reading.window.resetsAt, now);
-    const clamped = Math.max(0, Math.min(100, percent));
-    const short = shortLabel(reading.provider, reading.label);
-    return (_jsxs("span", { className: "dsh-subscription-usage-chip", children: [_jsx("style", { children: usageChipCss }), _jsxs("button", { type: "button", className: "dsh-subscription-usage-chip-trigger", "aria-expanded": open, title: t('usageChipTitle', { provider: reading.label }), onClick: (event) => {
+    const short = shortLabel(selected ?? '', selected ?? '');
+    // The compact line integrates the whole pool; the panel shows each account's own
+    // figures, so a merged glance hides nothing a per-account look cannot recover.
+    const merged = mergeAccountWindows(accountReadings);
+    return (_jsxs("span", { className: "dsh-subscription-usage-chip", children: [_jsx("style", { children: usageChipCss }), _jsxs("button", { type: "button", className: "dsh-subscription-usage-chip-trigger", "aria-expanded": open, title: t('usageChipTitle', { provider: selected ?? '' }), onClick: (event) => {
                     // The document listener would otherwise close what this click just opened.
                     event.stopPropagation();
                     setOpen((was) => !was);
-                }, children: [_jsx("span", { className: "dsh-subscription-usage-chip-label", children: short }), reading.windows.map((window) => (_jsxs("span", { className: "dsh-subscription-usage-chip-cell", children: [_jsx("span", { className: "dsh-subscription-usage-chip-window", children: shortWindow(window.label) }), _jsx("span", { className: "dsh-subscription-usage-chip-value", children: `${String(Math.round(window.usedPercent ?? 0))}%` })] }, window.label)))] }), open && (_jsxs("span", { className: "dsh-subscription-usage-chip-panel", role: "status", children: [_jsx("span", { className: "dsh-subscription-usage-chip-full", children: t('usageChipFull', { provider: reading.label }) }), reading.windows.map((window) => {
-                        const windowReset = formatReset(window.resetsAt, now);
-                        return (_jsxs("span", { className: "dsh-subscription-usage-chip-meter", children: [_jsxs("span", { className: "dsh-subscription-usage-chip-meterHead", children: [_jsx("span", { children: window.label }), _jsx("span", { className: "dsh-subscription-usage-chip-detail", children: `${String(Math.round(window.usedPercent ?? 0))}%${windowReset === undefined ? '' : ` · ${windowReset}`}` })] }), _jsx("span", { className: "dsh-subscription-usage-chip-track", "aria-hidden": "true", children: _jsx("span", { className: "dsh-subscription-usage-chip-fill", style: { width: `${String(Math.max(0, Math.min(100, window.usedPercent ?? 0)))}%` } }) })] }, window.label));
-                    }), reading.plan === undefined ? null : (_jsx("span", { className: "dsh-subscription-usage-chip-detail", children: reading.plan }))] }))] }));
+                }, children: [_jsx("span", { className: "dsh-subscription-usage-chip-label", children: short }), merged.map((window) => (_jsxs("span", { className: "dsh-subscription-usage-chip-cell", children: [_jsx("span", { className: "dsh-subscription-usage-chip-window", children: shortWindow(window.label) }), _jsx("span", { className: "dsh-subscription-usage-chip-value", children: `${String(Math.round(window.usedPercent ?? 0))}%` })] }, window.label)))] }), open && (_jsxs("span", { className: "dsh-subscription-usage-chip-panel", role: "status", children: [_jsx("span", { className: "dsh-subscription-usage-chip-full", children: t('usageChipFull', { provider: selected ?? '' }) }), accountReadings.map((account) => (_jsxs("span", { className: "dsh-subscription-usage-chip-account", children: [_jsx("span", { className: "dsh-subscription-usage-chip-meterHead", children: _jsx("span", { children: account.plan ?? account.account }) }), account.windows.map((window) => {
+                                const windowReset = formatReset(window.resetsAt, now);
+                                // A credit balance reads as money (`used`/`limit`), a quota as a percent.
+                                const amount = window.usedPercent === undefined && window.used !== undefined && window.limit !== undefined
+                                    ? `${String(window.used)}/${String(window.limit)}`
+                                    : `${String(Math.round(window.usedPercent ?? 0))}%`;
+                                return (_jsxs("span", { className: "dsh-subscription-usage-chip-meter", children: [_jsxs("span", { className: "dsh-subscription-usage-chip-meterHead", children: [_jsx("span", { children: window.label }), _jsx("span", { className: "dsh-subscription-usage-chip-detail", children: `${amount}${windowReset === undefined ? '' : ` · ${windowReset}`}` })] }), window.usedPercent !== undefined && (_jsx("span", { className: "dsh-subscription-usage-chip-track", "aria-hidden": "true", children: _jsx("span", { className: "dsh-subscription-usage-chip-fill", style: { width: `${String(Math.max(0, Math.min(100, window.usedPercent ?? 0)))}%` } }) }))] }, window.label));
+                            })] }, account.account)))] }))] }));
 }

package/lib/client/styles.d.ts

@@ -29,4 +29,4 @@ export declare const subscriptionsCss = "\n.dsh-subscriptions-settings,\n.dsh-su
  * otherwise read as a raised chip. Every token carries a fallback for hosts that do not
  * define it.
  */
-export declare const usageChipCss = "\n.dsh-subscription-usage-chip {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  /* The bar is a centred flex row whose children are this slot's entries followed by the\n     shell's context meter, and a list slot renders its entries as bare children (no\n     wrapper). So the chip is itself a flex item: a higher order places it after the\n     context meter, and no auto margin is set, so it sits immediately beside it rather\n     than being pushed to the edge of the bar. */\n  order: 1;\n  min-width: 0;\n  font-family: inherit;\n  font-size: 12px;\n  line-height: 1;\n}\n.dsh-subscription-usage-chip-trigger {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  margin: 0;\n  padding: 2px 6px;\n  border: 0;\n  border-radius: var(--dsw-radius-sm, 6px);\n  background: transparent;\n  color: var(--dsw-alias-label-secondary, #8a8f98);\n  font: inherit;\n  cursor: pointer;\n}\n.dsh-subscription-usage-chip-trigger:hover {\n  background: var(--dsw-alias-interactive-bg-hover, #ffffff14);\n}\n.dsh-subscription-usage-chip-trigger:focus-visible {\n  outline: 2px solid var(--dsw-alias-border-focus, #4d6bfe);\n  outline-offset: 1px;\n}\n.dsh-subscription-usage-chip-label {\n  overflow: hidden;\n  max-width: 6ch;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.dsh-subscription-usage-chip-cell {\n  display: inline-flex;\n  align-items: baseline;\n  gap: 2px;\n}\n.dsh-subscription-usage-chip-window {\n  opacity: 0.75;\n}\n.dsh-subscription-usage-chip-value {\n  color: var(--dsw-alias-label-primary, #e8e8e8);\n  font-variant-numeric: tabular-nums;\n}\n.dsh-subscription-usage-chip-panel {\n  position: absolute;\n  bottom: calc(100% + 6px);\n  right: 0;\n  z-index: 20;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  min-width: 168px;\n  padding: 10px 12px;\n  border: 1px solid var(--dsw-alias-border-secondary, #ffffff1f);\n  border-radius: var(--dsw-radius-md, 10px);\n  background: var(--dsw-alias-bg-layer-2, #26262a);\n  box-shadow: var(--dsw-elevation-prominent, 0 12px 32px #0007);\n  color: var(--dsw-alias-label-primary, #e8e8e8);\n  white-space: nowrap;\n}\n.dsh-subscription-usage-chip-full {\n  font-size: 11px;\n  color: var(--dsw-alias-label-secondary, #8a8f98);\n}\n.dsh-subscription-usage-chip-meter {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n.dsh-subscription-usage-chip-meterHead {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 12px;\n  font-size: 12px;\n}\n.dsh-subscription-usage-chip-detail {\n  color: var(--dsw-alias-label-secondary, #8a8f98);\n  font-variant-numeric: tabular-nums;\n}\n.dsh-subscription-usage-chip-track {\n  display: block;\n  width: 100%;\n  height: 5px;\n  border-radius: 999px;\n  /* As on the settings meter: an unspent window has to show its track, so the neutral and\n     its ring are explicit rather than a layer token that may match the panel. */\n  background: #8a8f9826;\n  box-shadow: inset 0 0 0 1px #8a8f9833;\n  overflow: hidden;\n}\n.dsh-subscription-usage-chip-fill {\n  display: block;\n  height: 100%;\n  background: var(--dsw-alias-state-success-primary, #067647);\n}\n";
+export declare const usageChipCss = "\n.dsh-subscription-usage-chip {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  /* The bar is a centred flex row whose children are this slot's entries followed by the\n     shell's context meter, and a list slot renders its entries as bare children (no\n     wrapper). So the chip is itself a flex item: a higher order places it after the\n     context meter, and no auto margin is set, so it sits immediately beside it rather\n     than being pushed to the edge of the bar. */\n  order: 1;\n  min-width: 0;\n  font-family: inherit;\n  font-size: 12px;\n  line-height: 1;\n}\n.dsh-subscription-usage-chip-trigger {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  margin: 0;\n  padding: 2px 6px;\n  border: 0;\n  border-radius: var(--dsw-radius-sm, 6px);\n  background: transparent;\n  color: var(--dsw-alias-label-secondary, #8a8f98);\n  font: inherit;\n  cursor: pointer;\n}\n.dsh-subscription-usage-chip-trigger:hover {\n  background: var(--dsw-alias-interactive-bg-hover, #ffffff14);\n}\n.dsh-subscription-usage-chip-trigger:focus-visible {\n  outline: 2px solid var(--dsw-alias-border-focus, #4d6bfe);\n  outline-offset: 1px;\n}\n.dsh-subscription-usage-chip-label {\n  overflow: hidden;\n  max-width: 6ch;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.dsh-subscription-usage-chip-cell {\n  display: inline-flex;\n  align-items: baseline;\n  gap: 2px;\n}\n.dsh-subscription-usage-chip-window {\n  opacity: 0.75;\n}\n.dsh-subscription-usage-chip-value {\n  color: var(--dsw-alias-label-primary, #e8e8e8);\n  font-variant-numeric: tabular-nums;\n}\n.dsh-subscription-usage-chip-account {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  /* A hairline between accounts, so two sign-ins read as two groups not one run. */\n  padding-top: 6px;\n  border-top: 1px solid var(--dsw-alias-border-secondary, #ffffff14);\n}\n.dsh-subscription-usage-chip-account:first-of-type {\n  padding-top: 0;\n  border-top: 0;\n}\n.dsh-subscription-usage-chip-panel {\n  position: absolute;\n  bottom: calc(100% + 6px);\n  right: 0;\n  z-index: 20;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  min-width: 180px;\n  padding: 12px 14px;\n  border: 1px solid var(--dsw-alias-border-secondary, #ffffff1f);\n  border-radius: var(--dsw-radius-md, 10px);\n  background: var(--dsw-alias-bg-layer-2, #26262a);\n  box-shadow: var(--dsw-elevation-prominent, 0 12px 32px #0007);\n  color: var(--dsw-alias-label-primary, #e8e8e8);\n  white-space: nowrap;\n}\n.dsh-subscription-usage-chip-full {\n  font-size: 11px;\n  color: var(--dsw-alias-label-secondary, #8a8f98);\n}\n.dsh-subscription-usage-chip-meter {\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n}\n.dsh-subscription-usage-chip-meterHead {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 12px;\n  font-size: 12px;\n}\n.dsh-subscription-usage-chip-detail {\n  color: var(--dsw-alias-label-secondary, #8a8f98);\n  font-variant-numeric: tabular-nums;\n}\n.dsh-subscription-usage-chip-track {\n  display: block;\n  width: 100%;\n  height: 5px;\n  border-radius: 999px;\n  /* As on the settings meter: an unspent window has to show its track, so the neutral and\n     its ring are explicit rather than a layer token that may match the panel. */\n  background: #8a8f9826;\n  box-shadow: inset 0 0 0 1px #8a8f9833;\n  overflow: hidden;\n}\n.dsh-subscription-usage-chip-fill {\n  display: block;\n  height: 100%;\n  background: var(--dsw-alias-state-success-primary, #067647);\n}\n";

package/lib/client/styles.js

@@ -328,6 +328,18 @@ export const usageChipCss = `
   color: var(--dsw-alias-label-primary, #e8e8e8);
   font-variant-numeric: tabular-nums;
 }
+.dsh-subscription-usage-chip-account {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  /* A hairline between accounts, so two sign-ins read as two groups not one run. */
+  padding-top: 6px;
+  border-top: 1px solid var(--dsw-alias-border-secondary, #ffffff14);
+}
+.dsh-subscription-usage-chip-account:first-of-type {
+  padding-top: 0;
+  border-top: 0;
+}
 .dsh-subscription-usage-chip-panel {
   position: absolute;
   bottom: calc(100% + 6px);
@@ -335,9 +347,9 @@ export const usageChipCss = `
   z-index: 20;
   display: flex;
   flex-direction: column;
-  gap: 8px;
-  min-width: 168px;
-  padding: 10px 12px;
+  gap: 10px;
+  min-width: 180px;
+  padding: 12px 14px;
   border: 1px solid var(--dsw-alias-border-secondary, #ffffff1f);
   border-radius: var(--dsw-radius-md, 10px);
   background: var(--dsw-alias-bg-layer-2, #26262a);
@@ -352,7 +364,7 @@ export const usageChipCss = `
 .dsh-subscription-usage-chip-meter {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 5px;
 }
 .dsh-subscription-usage-chip-meterHead {
   display: flex;