dsh-subscriptions 0.2.0 → 0.2.3

package/lib/client/SubscriptionUsageBadge.js

@@ -27,13 +27,14 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { subscriptionChromeCss } from './provider-settings-styles.js';
 import { createPortal } from 'react-dom';
 import * as primitives from '@deepseek-ai/dsh-client-ui-primitives';
-import { useAnchoredPosition, useDismissOnOutsidePointer } from '@deepseek-ai/dsh-client-ui-primitives';
+import { useAnchoredPosition, useDismissOnOutsidePointer, } from '@deepseek-ai/dsh-client-ui-primitives';
 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';
+import { HOST_CONTRACT, markerSelector } from './host-contract.js';
+import { USAGE_BADGE_REFRESH_EVENT, useUsageBadgeMode, } from './usage-badge-preferences.js';
 /** DSH renamed the data icon in 0.1.7; retain older supported hosts too. */
 export function usageBadgeIcon(icons) {
     return hostIcon(icons, 'DataOutline');
@@ -51,7 +52,7 @@ const PANEL_GAP = 8;
 const PANEL_MARGIN = 12;
 /** The account the collapsed pill reads: the default one, else the first listed. */
 export function pillAccountOf(d) {
-    return d.accounts.find(a => a.isDefault) ?? d.accounts[0];
+    return d.accounts.find((a) => a.isDefault) ?? d.accounts[0];
 }
 const PROVIDER_NAMES = {
     codex: 'Codex',
@@ -62,7 +63,7 @@ const PROVIDER_NAMES = {
     'cursor-subscription': 'Cursor',
     'opencode-go': 'OpenCode Go',
     'kimi-coding': 'Kimi Code',
-    'minimax': 'MiniMax',
+    minimax: 'MiniMax',
     'minimax-cn': 'MiniMax CN',
     'ollama-cloud': 'Ollama Cloud',
 };
@@ -91,13 +92,17 @@ export function groupUsageDisplays(roster, windowsOf, plans) {
         const row = {
             key: account.key,
             isDefault: account.isDefault,
-            ...account.account === undefined ? {} : { account: account.account },
-            ...plan === undefined ? {} : { plan },
+            ...(account.account === undefined ? {} : { account: account.account }),
+            ...(plan === undefined ? {} : { plan }),
             windows,
         };
         const display = byProvider.get(provider);
         if (display === undefined)
-            byProvider.set(provider, { provider, name: PROVIDER_NAMES[provider], accounts: [row] });
+            byProvider.set(provider, {
+                provider,
+                name: PROVIDER_NAMES[provider],
+                accounts: [row],
+            });
         else
             display.accounts.push(row);
     }
@@ -113,7 +118,13 @@ export async function loadBadgeRoster(rpc) {
     const roster = [];
     const refreshed = new Set();
     if (subscriptions.status === 'fulfilled') {
-        for (const provider of ['codex', 'claude', 'grok', 'copilot', 'antigravity']) {
+        for (const provider of [
+            'codex',
+            'claude',
+            'grok',
+            'copilot',
+            'antigravity',
+        ]) {
             refreshed.add(provider);
             for (const account of accountsOf(subscriptions.value.providers[provider]))
                 roster.push({ provider, account });
@@ -123,17 +134,23 @@ export async function loadBadgeRoster(rpc) {
         refreshed.add('cursor-subscription');
         if (cursor.value.authenticated)
             roster.push({
-                provider: 'cursor-subscription', account: { key: 'cursor', isDefault: true },
+                provider: 'cursor-subscription',
+                account: { key: 'cursor', isDefault: true },
             });
     }
     if (external.status === 'fulfilled') {
         for (const [source, provider] of [
-            ['opencode-go', 'opencode-go'], ['kimi-code', 'kimi-coding'], ['minimax', 'minimax'], ['minimax-cn', 'minimax-cn'], ['ollama-cloud', 'ollama-cloud'],
+            ['opencode-go', 'opencode-go'],
+            ['kimi-code', 'kimi-coding'],
+            ['minimax', 'minimax'],
+            ['minimax-cn', 'minimax-cn'],
+            ['ollama-cloud', 'ollama-cloud'],
         ]) {
             refreshed.add(provider);
             if (external.value[source]?.configured)
                 roster.push({
-                    provider, account: { key: source, isDefault: true },
+                    provider,
+                    account: { key: source, isDefault: true },
                 });
         }
     }
@@ -142,8 +159,14 @@ 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' || provider === 'minimax' || provider === 'minimax-cn' || provider === 'ollama-cloud') {
-        return callSubscriptionsAuth(rpc, 'externalUsage', { source: provider === 'kimi-coding' ? 'kimi-code' : provider });
+    if (provider === 'opencode-go' ||
+        provider === 'kimi-coding' ||
+        provider === 'minimax' ||
+        provider === 'minimax-cn' ||
+        provider === 'ollama-cloud') {
+        return callSubscriptionsAuth(rpc, 'externalUsage', {
+            source: provider === 'kimi-coding' ? 'kimi-code' : provider,
+        });
     }
     return callSubscriptionsAuth(rpc, 'usage', { provider, account: account.key });
 }
@@ -173,9 +196,12 @@ export function windowLabel(w) {
         if (w.scope !== undefined && w.scope !== '')
             return w.scope;
         switch (w.kind) {
-            case 'session': return '5h';
-            case 'weekly': return 'Wk';
-            default: return 'W';
+            case 'session':
+                return '5h';
+            case 'weekly':
+                return 'Wk';
+            default:
+                return 'W';
         }
     }
     const ms = Math.max(0, w.resetsAt - Date.now());
@@ -198,10 +224,12 @@ function windowSegment(label, w) {
 }
 /** Keep model quotas separate: matching percentages do not imply a shared pool. */
 export function prioritizeWindows(windows, model) {
-    return model === undefined ? [...windows] : [
-        ...windows.filter(w => w.scope === model),
-        ...windows.filter(w => w.scope !== model),
-    ];
+    return model === undefined
+        ? [...windows]
+        : [
+            ...windows.filter((w) => w.scope === model),
+            ...windows.filter((w) => w.scope !== model),
+        ];
 }
 /** Small previews keep a live model catalog from taking over the dialog. */
 export const WINDOW_PREVIEW_LIMIT = 4;
@@ -209,7 +237,9 @@ export function previewWindows(windows, model, provider) {
     const ordered = prioritizeWindows(windows, model);
     // Antigravity has many model-specific quotas: preview only the current model.
     const limit = provider === 'antigravity'
-        ? Math.min(2, model === undefined ? 0 : windows.filter(w => w.scope === model).length)
+        ? Math.min(2, model === undefined
+            ? 0
+            : windows.filter((w) => w.scope === model).length)
         : WINDOW_PREVIEW_LIMIT;
     return { shown: ordered.slice(0, limit), hidden: ordered.slice(limit) };
 }
@@ -217,27 +247,34 @@ export function previewWindows(windows, model, provider) {
 export function compactSegment(d, model, t = fallbackTranslate) {
     const windows = pillAccountOf(d).windows;
     if (d.provider === 'antigravity') {
-        const matching = model === undefined ? [] : windows.filter(w => w.scope === model);
+        const matching = model === undefined ? [] : windows.filter((w) => w.scope === model);
         if (matching.length === 0) {
-            return `${d.name} ${t(model === undefined ? 'usageBadgeModelCount' : 'usageBadgeModelUnavailable', {
-                count: new Set(windows.map(w => w.scope).filter(Boolean)).size,
+            return `${d.name} ${t(model === undefined
+                ? 'usageBadgeModelCount'
+                : 'usageBadgeModelUnavailable', {
+                count: new Set(windows.map((w) => w.scope).filter(Boolean)).size,
             })}`;
         }
-        const parts = matching.slice(0, 2).map(w => windowSegment(w.kind === 'weekly' ? t('usageWeekly') : t('usageWindow'), 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 => windowSegment(windowLabel(w), 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(' · ')}`;
 }
 /** Remember only the most recent subscription in this view, including its model scope. */
 export function retainSubscriptionSelection(previous, current) {
-    return current !== undefined && Object.hasOwn(PROVIDER_NAMES, current.provider) ? current : previous;
+    return current !== undefined &&
+        Object.hasOwn(PROVIDER_NAMES, current.provider)
+        ? current
+        : previous;
 }
 /** At most one provider; no known selection or no usage means no badge. */
 export function collapsedDisplays(displays, current) {
-    const match = displays.find(d => d.provider === current);
+    const match = displays.find((d) => d.provider === current);
     return match === undefined ? [] : [match];
 }
 /**
@@ -255,16 +292,20 @@ export function collapsedDisplays(displays, current) {
 export function rotatingDisplay(displays, current, step) {
     if (displays.length === 0)
         return [];
-    const match = displays.find(d => d.provider === current);
+    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]];
+    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);
-    return match === undefined ? displays : [match, ...displays.filter(d => d !== match)];
+    const match = displays.find((d) => d.provider === current);
+    return match === undefined
+        ? displays
+        : [match, ...displays.filter((d) => d !== match)];
 }
 /**
  * A provider's logged-in accounts, the effective default first. When no
@@ -274,9 +315,9 @@ export function expandedDisplays(displays, current) {
 function accountsOf(status) {
     if (status === undefined || status.accounts.length === 0)
         return [];
-    const fallback = status.accounts.find(a => a.isDefault) ?? status.accounts[0];
+    const fallback = status.accounts.find((a) => a.isDefault) ?? status.accounts[0];
     return status.accounts
-        .map(a => (a === fallback ? { ...a, isDefault: true } : a))
+        .map((a) => (a === fallback ? { ...a, isDefault: true } : a))
         .sort((a, b) => Number(b.isDefault) - Number(a.isDefault));
 }
 /** English-dictionary fallback for a missing inject `t` (standalone renders). */
@@ -287,8 +328,12 @@ function fallbackTranslate(key, params) {
 function usageWindowLabel(t, window) {
     const base = window.kind === 'session'
         ? t('usageSession')
-        : window.kind === 'weekly' ? t('usageWeekly') : t('usageWindow');
-    return window.scope !== undefined && window.scope !== '' ? `${base} · ${window.scope}` : base;
+        : window.kind === 'weekly'
+            ? t('usageWeekly')
+            : t('usageWindow');
+    return window.scope !== undefined && window.scope !== ''
+        ? `${base} · ${window.scope}`
+        : base;
 }
 /**
  * The composer subscription-usage badge: a pill reading e.g.
@@ -296,7 +341,9 @@ function usageWindowLabel(t, window) {
  * every provider's accounts and their windows. Returns null when no data is
  * available.
  */
-export function SubscriptionUsageBadge({ rpc, currentModel, t, rotationMs }) {
+const STATS_ROW_SELECTOR = markerSelector(HOST_CONTRACT.markers.composerStats.row);
+const STATS_DOCK_SELECTOR = markerSelector(HOST_CONTRACT.markers.composerStats.dock);
+export function SubscriptionUsageBadge({ rpc, currentModel, t, rotationMs, }) {
     const translate = t ?? fallbackTranslate;
     const [displays, setDisplays] = useState([]);
     const [selection, setSelection] = useState(undefined);
@@ -343,7 +390,8 @@ export function SubscriptionUsageBadge({ rpc, currentModel, t, rotationMs }) {
             // 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);
                 }
@@ -356,7 +404,10 @@ export function SubscriptionUsageBadge({ rpc, currentModel, t, rotationMs }) {
                 return;
             for (const { provider, account } of roster) {
                 const key = usageKeyOf(provider, account);
-                observationsRef.current.set(key, { ...observationsRef.current.get(key), stale: true });
+                observationsRef.current.set(key, {
+                    ...observationsRef.current.get(key),
+                    stale: true,
+                });
             }
             const plans = new Map();
             for (const r of results) {
@@ -372,24 +423,39 @@ export function SubscriptionUsageBadge({ rpc, currentModel, t, rotationMs }) {
                     continue;
                 }
                 lastKnown.set(key, usage.windows);
-                observationsRef.current.set(key, { observedAt: usage.observedAt ?? Date.now(), stale: usage.stale === true });
+                observationsRef.current.set(key, {
+                    observedAt: usage.observedAt ?? Date.now(),
+                    stale: usage.stale === true,
+                });
             }
-            setDisplays(previous => [
-                ...groupUsageDisplays(roster, lastKnown, plans).map(display => ({ ...display,
-                    accounts: display.accounts.map(account => ({ ...account,
+            setDisplays((previous) => [
+                ...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 })),
+                ...previous
+                    .filter((display) => !refreshed.has(display.provider))
+                    .map((display) => ({
+                    ...display,
+                    accounts: display.accounts.map((account) => ({
+                        ...account,
+                        stale: true,
+                    })),
                 })),
             ]);
         }
         catch {
             // 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 })),
+                setDisplays((previous) => previous.map((display) => ({
+                    ...display,
+                    accounts: display.accounts.map((account) => ({
+                        ...account,
+                        stale: true,
+                    })),
                 })));
         }
         finally {
@@ -398,14 +464,18 @@ export function SubscriptionUsageBadge({ rpc, currentModel, t, rotationMs }) {
     }, [rpc]);
     useEffect(() => {
         mountedRef.current = true;
-        return () => { mountedRef.current = false; };
+        return () => {
+            mountedRef.current = false;
+        };
     }, []);
     // Hidden renders nothing, so it polls nothing; showing it again refreshes at once.
     useEffect(() => {
         if (displayMode === 'hidden')
             return;
         void refresh();
-        const timer = setInterval(() => { void refresh(); }, USAGE_POLL_INTERVAL_MS);
+        const timer = setInterval(() => {
+            void refresh();
+        }, USAGE_POLL_INTERVAL_MS);
         window.addEventListener(USAGE_BADGE_REFRESH_EVENT, refresh);
         return () => {
             clearInterval(timer);
@@ -422,12 +492,18 @@ export function SubscriptionUsageBadge({ rpc, currentModel, t, rotationMs }) {
             if (read === undefined || inflight)
                 return;
             inflight = true;
-            void read().then((model) => {
+            void read()
+                .then((model) => {
                 if (cancelled)
                     return;
-                setLastSubscription(previous => retainSubscriptionSelection(previous, model));
+                setLastSubscription((previous) => retainSubscriptionSelection(previous, model));
                 setSelection(model);
-            }, () => { }).finally(() => { inflight = false; });
+            }, () => {
+                /* keep the last known provider; the next tick retries */
+            })
+                .finally(() => {
+                inflight = false;
+            });
         };
         reload();
         const timer = setInterval(reload, MODEL_POLL_INTERVAL_MS);
@@ -436,7 +512,14 @@ export function SubscriptionUsageBadge({ rpc, currentModel, t, rotationMs }) {
             clearInterval(timer);
         };
     }, []);
-    const pos = useAnchoredPosition({ open, anchorRef: rootRef, panelRef, side: 'top', gap: PANEL_GAP, margin: PANEL_MARGIN });
+    const pos = useAnchoredPosition({
+        open,
+        anchorRef: rootRef,
+        panelRef,
+        side: 'top',
+        gap: PANEL_GAP,
+        margin: PANEL_MARGIN,
+    });
     useDismissOnOutsidePointer(rootRef, open, setOpen, panelRef);
     useEffect(() => {
         if (!open)
@@ -446,15 +529,20 @@ export function SubscriptionUsageBadge({ rpc, currentModel, t, rotationMs }) {
                 setOpen(false);
         };
         document.addEventListener('keydown', onKeyDown);
-        return () => { document.removeEventListener('keydown', onKeyDown); };
+        return () => {
+            document.removeEventListener('keydown', onKeyDown);
+        };
     }, [open]);
-    // Sit on the host's stats row when there is one. Every dock entry is its
-    // own row in the composer bar, so a badge rendered in place lands under the
-    // shipped time/token pills; the host marks its pill row with
-    // `data-composer-stats`, and rendering into it makes the badge a third pill
-    // on that line. The marker is watched (the row mounts only once the session
-    // has steps or tokens, and unmounts with them) and older hosts without it
-    // keep the in-place row.
+    // Sit on the host's stats row when there is one. Hosts through 0.2.0 render
+    // their time/token pills in a row apart from the dock, marked
+    // `data-composer-stats`; every dock entry is its own row in the composer
+    // bar, so a badge rendered in place lands under those pills, and rendering
+    // into the row makes it a third pill on their line. The marker is watched
+    // (the row mounts only once the session has steps or tokens, and unmounts
+    // with them). From 0.2.1 the shipped pills are dock entries like this
+    // badge, each anchored `data-composer-stat`, so the in-place seat already
+    // shares their row; seeing a docked anchor ends the watch for a row that
+    // will not appear.
     const [statsRow, setStatsRow] = useState(null);
     useEffect(() => {
         const seat = seatRef.current;
@@ -463,11 +551,19 @@ export function SubscriptionUsageBadge({ rpc, currentModel, t, rotationMs }) {
         const scope = statsScopeOf(seat);
         if (scope === null)
             return;
-        const find = () => scope.querySelector('[data-composer-stats]');
-        setStatsRow(find());
-        const observer = new MutationObserver(() => { setStatsRow(find()); });
+        const find = () => scope.querySelector(STATS_ROW_SELECTOR);
+        const settle = () => {
+            const row = find();
+            setStatsRow(row);
+            if (row === null && scope.querySelector(STATS_DOCK_SELECTOR) !== null)
+                observer.disconnect();
+        };
+        const observer = new MutationObserver(settle);
         observer.observe(scope, { childList: true, subtree: true });
-        return () => { observer.disconnect(); };
+        settle();
+        return () => {
+            observer.disconnect();
+        };
     }, []);
     useEffect(() => {
         if (displayMode === 'hidden')
@@ -481,8 +577,12 @@ export function SubscriptionUsageBadge({ rpc, currentModel, t, rotationMs }) {
         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); };
+        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 });
     // `always` follows the live model, not the retained subscription: the
@@ -495,7 +595,9 @@ export function SubscriptionUsageBadge({ rpc, currentModel, t, rotationMs }) {
     // 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)
+        ? 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
@@ -504,7 +606,9 @@ export function SubscriptionUsageBadge({ rpc, currentModel, t, rotationMs }) {
     // 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)
+        ? dialogLead === current
+            ? selection?.model
+            : undefined
         : badgeSelection?.model;
     const expanded = expandedDisplays(displays, dialogProvider);
     const title = translate('usageBadgeTitle');
@@ -515,18 +619,29 @@ export function SubscriptionUsageBadge({ rpc, currentModel, t, rotationMs }) {
         if (next)
             void refresh();
     };
-    const pill = (_jsxs("span", { ref: rootRef, style: styles.anchor, children: [_jsx("style", { children: subscriptionChromeCss }), _jsxs("button", { type: "button", className: "dsh-subscription-usage-pill", style: { ...styles.pill, ...(hover || open ? styles.pillActive : {}) }, "aria-haspopup": "dialog", "aria-expanded": open, "aria-label": `${title} · ${label}`, title: title, onMouseEnter: () => { setHover(true); }, onMouseLeave: () => { setHover(false); }, onClick: toggle, children: [_jsx(UsageBadgeIcon, {}), _jsx("span", { style: styles.label, children: label })] }), open && createPortal(_jsxs("div", { ref: panelRef, role: "dialog", "aria-label": title, className: "dsh-subscription-usage-panel", style: { ...styles.panel, ...(pos ?? MEASURE_STYLE) }, children: [_jsx("div", { style: styles.title, children: _jsxs("span", { style: styles.titleLabel, children: [_jsx(UsageBadgeIcon, {}), title] }) }), _jsx("div", { style: styles.titleRule, "aria-hidden": true }), expanded.map((d, index) => (_jsxs("section", { style: index === 0 ? undefined : styles.section, children: [_jsxs("div", { style: styles.providerRow, children: [_jsxs("span", { style: styles.providerName, children: [d.name, d.provider === current && _jsx("span", { style: styles.currentTag, children: translate('usageBadgeCurrent') })] }), d.accounts.length === 1 && _jsx(AccountMeta, { account: d.accounts[0], translate: translate })] }), d.accounts.map((account, accountIndex) => (_jsxs("div", { style: accountIndex === 0 ? undefined : styles.accountBlock, children: [d.accounts.length > 1 && (_jsx("div", { style: styles.accountRow, children: _jsx(AccountMeta, { account: account, translate: translate }) })), _jsx(AccountWindows, { windows: account.windows, observedAt: account.observedAt, stale: account.stale, model: d.provider === dialogProvider ? dialogModel : undefined, provider: d.provider, translate: translate }, `${d.provider}:${dialogModel ?? ''}`)] }, account.key)))] }, d.provider)))] }), document.body)] }));
-    return (_jsxs(_Fragment, { children: [seat, statsRow !== null && statsRow.isConnected ? createPortal(pill, statsRow) : pill] }));
+    const pill = (_jsxs("span", { ref: rootRef, style: styles.anchor, children: [_jsx("style", { children: subscriptionChromeCss }), _jsxs("button", { type: "button", className: "dsh-subscription-usage-pill", style: { ...styles.pill, ...(hover || open ? styles.pillActive : {}) }, "aria-haspopup": "dialog", "aria-expanded": open, "aria-label": `${title} · ${label}`, title: title, onMouseEnter: () => {
+                    setHover(true);
+                }, onMouseLeave: () => {
+                    setHover(false);
+                }, onClick: toggle, children: [_jsx(UsageBadgeIcon, {}), _jsx("span", { style: styles.label, children: label })] }), open &&
+                createPortal(_jsxs("div", { ref: panelRef, role: "dialog", "aria-label": title, className: "dsh-subscription-usage-panel", style: { ...styles.panel, ...(pos ?? MEASURE_STYLE) }, children: [_jsx("div", { style: styles.title, children: _jsxs("span", { style: styles.titleLabel, children: [_jsx(UsageBadgeIcon, {}), title] }) }), _jsx("div", { style: styles.titleRule, "aria-hidden": true }), expanded.map((d, index) => (_jsxs("section", { style: index === 0 ? undefined : styles.section, children: [_jsxs("div", { style: styles.providerRow, children: [_jsxs("span", { style: styles.providerName, children: [d.name, d.provider === current && (_jsx("span", { style: styles.currentTag, children: translate('usageBadgeCurrent') }))] }), d.accounts.length === 1 && (_jsx(AccountMeta, { account: d.accounts[0], translate: translate }))] }), d.accounts.map((account, accountIndex) => (_jsxs("div", { style: accountIndex === 0 ? undefined : styles.accountBlock, children: [d.accounts.length > 1 && (_jsx("div", { style: styles.accountRow, children: _jsx(AccountMeta, { account: account, translate: translate }) })), _jsx(AccountWindows, { windows: account.windows, observedAt: account.observedAt, stale: account.stale, model: d.provider === dialogProvider ? dialogModel : undefined, provider: d.provider, translate: translate }, `${d.provider}:${dialogModel ?? ''}`)] }, account.key)))] }, d.provider)))] }), document.body)] }));
+    return (_jsxs(_Fragment, { children: [seat, statsRow !== null && statsRow.isConnected
+                ? createPortal(pill, statsRow)
+                : pill] }));
 }
+/** How far statsScopeOf walks looking for `composerStats.row`. */
+const LEGACY_STATS_SCOPE_DEPTH = 4;
 /**
- * Nearest ancestor of the dock seat that can contain the host's stats row:
- * the composer bar. Bounded so a badge in an unfamiliar layout never adopts
- * some other composer's pills.
+ * Scope for the legacy stats row. The nearest ancestor within
+ * LEGACY_STATS_SCOPE_DEPTH that contains `composerStats.row`, so a badge
+ * does not adopt another composer's pills. When none does, the seat's
+ * parent: the slot outlet, which holds sibling `composerStats.dock` anchors
+ * on hosts whose pills are dock entries.
  */
 function statsScopeOf(seat) {
     let node = seat.parentElement;
-    for (let depth = 0; node !== null && depth < 4; depth++) {
-        if (node.querySelector('[data-composer-stats]') !== null)
+    for (let depth = 0; node !== null && depth < LEGACY_STATS_SCOPE_DEPTH; depth++) {
+        if (node.querySelector(STATS_ROW_SELECTOR) !== null)
             return node;
         node = node.parentElement;
     }
@@ -537,21 +652,25 @@ function statsScopeOf(seat) {
  * marks the default account (the one direct routes serve and the collapsed
  * pill reads), the same glyph Settings → 订阅 uses.
  */
-function AccountMeta({ account, translate }) {
-    const parts = [account.account, account.plan === undefined ? undefined : translate('usagePlan', { plan: account.plan })]
-        .filter((part) => part !== undefined && part !== '');
-    return (_jsxs("span", { style: styles.providerMeta, title: account.account, children: [account.isDefault && _jsx("span", { style: styles.defaultStar, "aria-label": "default", children: "\u2605 " }), parts.join(' · ')] }));
+function AccountMeta({ account, translate, }) {
+    const parts = [
+        account.account,
+        account.plan === undefined
+            ? undefined
+            : translate('usagePlan', { plan: account.plan }),
+    ].filter((part) => part !== undefined && part !== '');
+    return (_jsxs("span", { style: styles.providerMeta, title: account.account, children: [account.isDefault && (_jsxs("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, observedAt, stale }) {
+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, 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)] })] });
+    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, t, observedAt, stale }) {
+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 })] }));
+    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
@@ -564,12 +683,22 @@ const styles = {
     // Mirrors the host StatsPills pill so the badge reads as a sibling of the
     // shipped time/token pills.
     pill: {
-        boxSizing: 'border-box', maxWidth: '100%',
+        boxSizing: 'border-box',
+        maxWidth: '100%',
         color: 'var(--dsw-alias-label-tertiary)',
-        font: 'inherit', fontSize: 'calc(var(--dsh-content-font-size-secondary, 13px) - 1px)',
-        fontVariantNumeric: 'tabular-nums', lineHeight: 'calc(20px + var(--dsh-content-font-delta-secondary, 0px))', whiteSpace: 'nowrap',
-        background: 'transparent', border: 'none', borderRadius: 999,
-        alignItems: 'center', gap: 6, padding: '1px 8px', display: 'inline-flex', cursor: 'pointer',
+        font: 'inherit',
+        fontSize: 'calc(var(--dsh-content-font-size-secondary, 13px) - 1px)',
+        fontVariantNumeric: 'tabular-nums',
+        lineHeight: 'calc(20px + var(--dsh-content-font-delta-secondary, 0px))',
+        whiteSpace: 'nowrap',
+        background: 'transparent',
+        border: 'none',
+        borderRadius: 999,
+        alignItems: 'center',
+        gap: 6,
+        padding: '1px 8px',
+        display: 'inline-flex',
+        cursor: 'pointer',
     },
     pillActive: {
         background: 'var(--dsw-alias-interactive-bg-hover)',
@@ -581,52 +710,111 @@ const styles = {
     // without the blur the transcript behind the dialog stays sharp and shows
     // through the fill.
     panel: {
-        position: 'fixed', zIndex: 1100, boxSizing: 'border-box',
+        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',
+        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)',
-        color: 'var(--dsw-alias-label-secondary)', cursor: 'default',
-        border: 0, borderRadius: 'var(--dsw-radius-lg, 16px)', padding: 16, fontSize: 12, lineHeight: '18px',
+        color: 'var(--dsw-alias-label-secondary)',
+        cursor: 'default',
+        border: 0,
+        borderRadius: 'var(--dsw-radius-lg, 16px)',
+        padding: 16,
+        fontSize: 12,
+        lineHeight: '18px',
     },
     title: {
-        color: 'var(--dsw-alias-label-primary)', display: 'flex',
-        justifyContent: 'space-between', gap: 16, marginBottom: 8, fontWeight: 500,
+        color: 'var(--dsw-alias-label-primary)',
+        display: 'flex',
+        justifyContent: 'space-between',
+        gap: 16,
+        marginBottom: 8,
+        fontWeight: 500,
+    },
+    titleLabel: {
+        alignItems: 'center',
+        gap: 6,
+        minWidth: 0,
+        display: 'inline-flex',
+    },
+    titleRule: {
+        borderTop: '0.5px solid var(--dsw-alias-border-l2)',
+        marginBottom: 10,
+    },
+    section: {
+        marginTop: 12,
+        paddingTop: 10,
+        borderTop: '0.5px solid var(--dsw-alias-border-l2)',
     },
-    titleLabel: { alignItems: 'center', gap: 6, minWidth: 0, display: 'inline-flex' },
-    titleRule: { borderTop: '0.5px solid var(--dsw-alias-border-l2)', marginBottom: 10 },
-    section: { marginTop: 12, paddingTop: 10, borderTop: '0.5px solid var(--dsw-alias-border-l2)' },
     providerRow: {
-        display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 16, marginBottom: 6,
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'baseline',
+        gap: 16,
+        marginBottom: 6,
+    },
+    providerName: {
+        color: 'var(--dsw-alias-label-primary)',
+        fontWeight: 500,
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 6,
     },
-    providerName: { color: 'var(--dsw-alias-label-primary)', fontWeight: 500, display: 'inline-flex', alignItems: 'center', gap: 6 },
     currentTag: {
-        fontSize: 10, lineHeight: '14px', fontWeight: 400, padding: '0 5px', borderRadius: 7,
-        color: 'var(--dsw-alias-label-secondary)', background: 'var(--dsw-alias-interactive-bg-hover)',
+        fontSize: 10,
+        lineHeight: '14px',
+        fontWeight: 400,
+        padding: '0 5px',
+        borderRadius: 7,
+        color: 'var(--dsw-alias-label-secondary)',
+        background: 'var(--dsw-alias-interactive-bg-hover)',
     },
     providerMeta: {
-        color: 'var(--dsw-alias-label-tertiary)', minWidth: 0, overflow: 'hidden',
-        textOverflow: 'ellipsis', whiteSpace: 'nowrap',
+        color: 'var(--dsw-alias-label-tertiary)',
+        minWidth: 0,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
     },
     // Same star and color as the default-account marker in Settings → 订阅.
     defaultStar: { color: 'var(--dsw-alias-state-warn-label)' },
     accountBlock: { marginTop: 8 },
     accountRow: { display: 'flex', marginBottom: 4 },
     details: {
-        color: 'var(--dsw-alias-label-tertiary)', display: 'grid',
-        gridTemplateColumns: 'minmax(0, 1fr) max-content', gap: '4px 16px', margin: 0,
+        color: 'var(--dsw-alias-label-tertiary)',
+        display: 'grid',
+        gridTemplateColumns: 'minmax(0, 1fr) max-content',
+        gap: '4px 16px',
+        margin: 0,
     },
     moreWindows: { marginTop: 8 },
-    moreSummary: { cursor: 'pointer', color: 'var(--dsw-alias-label-secondary)', marginBottom: 8 },
+    moreSummary: {
+        cursor: 'pointer',
+        color: 'var(--dsw-alias-label-secondary)',
+        marginBottom: 8,
+    },
     dt: { minWidth: 0, margin: 0, overflowWrap: 'anywhere' },
     dd: {
-        minWidth: 0, margin: 0, color: 'var(--dsw-alias-label-secondary)',
-        fontVariantNumeric: 'tabular-nums', textAlign: 'right',
+        minWidth: 0,
+        margin: 0,
+        color: 'var(--dsw-alias-label-secondary)',
+        fontVariantNumeric: 'tabular-nums',
+        textAlign: 'right',
     },
     reset: { color: 'var(--dsw-alias-label-tertiary)' },
     bar: {
-        gridColumn: '1 / -1', height: 4, borderRadius: 2, overflow: 'hidden',
-        background: 'var(--dsw-alias-border-l2)', marginBottom: 2,
+        gridColumn: '1 / -1',
+        height: 4,
+        borderRadius: 2,
+        overflow: 'hidden',
+        background: 'var(--dsw-alias-border-l2)',
+        marginBottom: 2,
     },
 };