dsh-subscriptions 0.2.0 → 0.2.3

package/lib/client/SpeedSelect.js

@@ -18,9 +18,10 @@ import { subscriptionChromeCss } from './provider-settings-styles.js';
 import { en } from './locales.js';
 /**
  * The `loadSpeed` half of the inject face: the plugin's own speed state plus
- * the host's current model selection (the visibility gate). A model-RPC
- * failure throws rather than answering "hidden" — the caller keeps its last
- * known state, so a transient failure never locks the toggle away.
+ * the host's current model selection (the visibility gate). A session whose
+ * model selection is unavailable (an addressed subagent) answers hidden.
+ * Any other model-directory failure throws, so the caller keeps its last
+ * known state instead of locking the toggle away.
  *
  * `sessionId` is a plain string: slot and command contexts brand it through
  * different dsh-session copies, and only the service boundary needs one.
@@ -31,20 +32,149 @@ import { en } from './locales.js';
  */
 export function createSpeedLoader(connection, models, sessionId) {
     return async () => {
-        const state = await callSubscriptionsAuth(connection.rpc, 'speed', { sessionId });
         const directories = models();
-        if (directories === undefined)
-            return { visible: false, tier: state.tier };
-        const { current } = await directories.directoryFor(sessionId).load();
-        const visible = current !== null && current.provider === 'codex'
-            && state.fastModels.includes(current.model);
+        let current = null;
+        if (directories !== undefined) {
+            try {
+                current = (await directories.directoryFor(sessionId).load()).current;
+            }
+            catch (error) {
+                if (!modelSelectionUnavailable(error))
+                    throw error;
+            }
+        }
+        const state = await callSubscriptionsAuth(connection.rpc, 'speed', {
+            sessionId,
+            ...(current?.provider === 'codex' ? { model: current.model } : {}),
+        });
+        const visible = current !== null &&
+            current.provider === 'codex' &&
+            state.fastModels.includes(current.model);
         return { visible, tier: state.tier };
     };
 }
+/** Host copy for a session that has no model seat (an addressed subagent). */
+const MODEL_SELECTION_UNAVAILABLE = 'model selection is unavailable';
+function modelSelectionUnavailable(error) {
+    const message = error instanceof Error ? error.message : String(error);
+    return message.includes(MODEL_SELECTION_UNAVAILABLE);
+}
+/** Stable identity of a model selection. Empty when nothing is selected. */
+export function modelSelectionKey(current) {
+    if (current == null)
+        return '';
+    return JSON.stringify([current.provider, current.model]);
+}
+/**
+ * How often a host without a directory store is re-read, and how often a
+ * missing directory service is retried. Neither interval calls
+ * `subscriptions-auth.speed`.
+ */
+export const MODEL_DIRECTORY_POLL_INTERVAL_MS = 3000;
+/**
+ * Mount reads of `speed`, including the first attempt. Further failures stop
+ * instead of polling for the life of the composer.
+ */
+export const SPEED_MOUNT_READ_ATTEMPTS = 4;
+/** Fired after `/fast` writes a tier, so an open composer re-reads `speed`. */
+export const SPEED_CHANGED_EVENT = 'dsh:subscriptions:speed-changed';
+/** Tell mounted Speed controls that this page changed a session tier. */
+export function notifySpeedChanged() {
+    if (typeof window === 'undefined')
+        return;
+    window.dispatchEvent(new Event(SPEED_CHANGED_EVENT));
+}
+/**
+ * Subscribe to the session's selected model. A directory store notifies the
+ * listener only when `provider` or `model` changes. A directory with no store
+ * is re-read on {@link MODEL_DIRECTORY_POLL_INTERVAL_MS}; a service that is
+ * not registered yet, or whose `directoryFor` throws, is retried on that same
+ * interval. The first successful attach after a miss notifies once, so a
+ * mount that ran before the service existed reads `speed` again.
+ */
+export function createModelSelectionWatch(models, sessionId) {
+    return (listener) => {
+        let stopped = false;
+        let unsubscribeStore;
+        let timer;
+        let mode = 'seek';
+        let lastKey;
+        const stopTimer = () => {
+            if (timer === undefined)
+                return;
+            clearInterval(timer);
+            timer = undefined;
+        };
+        const changed = (current) => {
+            const next = modelSelectionKey(current);
+            if (lastKey === undefined) {
+                lastKey = next;
+                return false;
+            }
+            if (next === lastKey)
+                return false;
+            lastKey = next;
+            return true;
+        };
+        const attach = (late) => {
+            if (stopped || mode !== 'seek')
+                return;
+            let directory;
+            try {
+                directory = models()?.directoryFor(sessionId);
+            }
+            catch {
+                return;
+            }
+            if (directory === undefined)
+                return;
+            const store = directory.store;
+            if (store !== undefined) {
+                mode = 'store';
+                stopTimer();
+                lastKey = modelSelectionKey(store.getSnapshot().current);
+                unsubscribeStore = store.subscribe(() => {
+                    if (!stopped && changed(store.getSnapshot().current))
+                        listener();
+                });
+                if (late)
+                    listener();
+                return;
+            }
+            mode = 'poll';
+            stopTimer();
+            let force = late;
+            const seed = () => {
+                void directory.load().then((state) => {
+                    if (stopped || mode !== 'poll')
+                        return;
+                    const identityChanged = changed(state.current);
+                    const forced = force;
+                    force = false;
+                    if (identityChanged || forced)
+                        listener();
+                }, () => {
+                    /* keep the last model; the next tick retries */
+                });
+            };
+            seed();
+            timer = setInterval(seed, MODEL_DIRECTORY_POLL_INTERVAL_MS);
+        };
+        attach(false);
+        if (mode === 'seek')
+            timer = setInterval(() => {
+                attach(true);
+            }, MODEL_DIRECTORY_POLL_INTERVAL_MS);
+        return () => {
+            stopped = true;
+            unsubscribeStore?.();
+            stopTimer();
+        };
+    };
+}
 /** The `setSpeed` half of the inject face: boolean outcome for the component's busy state. */
 export function createSpeedSetter(connection, sessionId) {
-    return tier => callSubscriptionsAuth(connection.rpc, 'setSpeed', { sessionId, tier })
-        .then(() => true, () => false);
+    return (tier) => callSubscriptionsAuth(connection.rpc, 'setSpeed', { sessionId, tier }).then(() => true, () => false);
 }
 /** English-dictionary fallback for a missing inject `t` (standalone renders). */
 function fallbackTranslate(key) {
@@ -54,48 +184,86 @@ const TIERS = ['standard', 'fast'];
 /**
  * The composer Speed control: a trigger reading `速度 · 快速`/`速度 · 标准`
  * that opens a two-row menu (standard/fast with descriptions, check mark on
- * the current tier). Mount and every open reload the host state so a model
- * switch made since the last open self-corrects.
- */
-/** How often the control re-reads the host state (model switches arrive only by asking). */
-const POLL_INTERVAL_MS = 3000;
-/**
- * The composer Speed control: a trigger reading `速度 · 快速`/`速度 · 标准`
- * that opens a two-row menu (standard/fast with descriptions, check mark on
- * the current tier). The host pushes nothing on a model switch, so the
- * control re-reads on a slow poll with a single-flight guard; a failed read
- * keeps the last known state, so a transient RPC failure can never lock the
- * toggle away (the earlier mount-only load had no recovery path).
+ * the current tier). It reads `subscriptions-auth.speed` on mount, when the
+ * menu opens, when {@link SpeedSelectInjected.watchModel} reports a new
+ * selected model, and when {@link notifySpeedChanged} fires. Until the first
+ * read succeeds, a failure is retried on
+ * {@link MODEL_DIRECTORY_POLL_INTERVAL_MS}, at most
+ * {@link SPEED_MOUNT_READ_ATTEMPTS} times; after that, a failed read keeps
+ * the last known state.
  */
-export function SpeedSelect({ loadSpeed, setSpeed, t }) {
+export function SpeedSelect({ loadSpeed, setSpeed, watchModel, t, }) {
     const translate = t ?? fallbackTranslate;
     const [state, setState] = useState(null);
     const [open, setOpen] = useState(false);
     const [busy, setBusy] = useState(false);
     const rootRef = useRef(null);
     // The inject face may be re-evaluated (new callback identities) on re-render;
-    // the poll effect mounts once and reads through this ref, so identity churn
-    // neither resets the interval nor multiplies in-flight loads.
+    // the mount effect reads through these refs, so identity churn neither
+    // resubscribes nor multiplies in-flight loads.
     const loadRef = useRef(loadSpeed);
     loadRef.current = loadSpeed;
+    const watchRef = useRef(watchModel);
+    watchRef.current = watchModel;
     useEffect(() => {
         if (loadRef.current === undefined)
             return;
         let cancelled = false;
         let inflight = false;
+        let again = false;
+        let loadedOnce = false;
+        let failures = 0;
+        let retry;
+        const stopRetry = () => {
+            if (retry === undefined)
+                return;
+            clearInterval(retry);
+            retry = undefined;
+        };
         const reload = () => {
             const load = loadRef.current;
-            if (load === undefined || inflight)
+            if (load === undefined)
+                return;
+            if (inflight) {
+                again = true;
                 return;
+            }
             inflight = true;
-            void load().then((loaded) => { if (!cancelled)
-                setState(loaded); }, () => { }).finally(() => { inflight = false; });
+            void load()
+                .then((loaded) => {
+                if (cancelled)
+                    return;
+                loadedOnce = true;
+                stopRetry();
+                setState(loaded);
+            }, () => {
+                failures += 1;
+                if (failures >= SPEED_MOUNT_READ_ATTEMPTS)
+                    stopRetry();
+            })
+                .finally(() => {
+                inflight = false;
+                if (cancelled || !again)
+                    return;
+                again = false;
+                reload();
+            });
         };
         reload();
-        const timer = setInterval(reload, POLL_INTERVAL_MS);
+        retry = setInterval(() => {
+            if (!loadedOnce)
+                reload();
+        }, MODEL_DIRECTORY_POLL_INTERVAL_MS);
+        const unsubscribe = watchRef.current?.(reload);
+        const onSpeedChanged = () => {
+            reload();
+        };
+        window.addEventListener(SPEED_CHANGED_EVENT, onSpeedChanged);
         return () => {
             cancelled = true;
-            clearInterval(timer);
+            unsubscribe?.();
+            stopRetry();
+            window.removeEventListener(SPEED_CHANGED_EVENT, onSpeedChanged);
         };
     }, []);
     useEffect(() => {
@@ -106,9 +274,14 @@ export function SpeedSelect({ loadSpeed, setSpeed, t }) {
                 setOpen(false);
         };
         document.addEventListener('mousedown', closeOutside);
-        return () => { document.removeEventListener('mousedown', closeOutside); };
+        return () => {
+            document.removeEventListener('mousedown', closeOutside);
+        };
     }, [open]);
-    if (loadSpeed === undefined || setSpeed === undefined || state === null || !state.visible) {
+    if (loadSpeed === undefined ||
+        setSpeed === undefined ||
+        state === null ||
+        !state.visible) {
         return null;
     }
     const choose = (tier) => {
@@ -132,7 +305,9 @@ export function SpeedSelect({ loadSpeed, setSpeed, t }) {
         const load = loadRef.current;
         if (load === undefined)
             return;
-        void load().then(setState, () => { });
+        void load().then(setState, () => {
+            /* keep showing the last good state */
+        });
     };
     const tierName = (tier) => translate(tier === 'fast' ? 'speedFast' : 'speedStandard');
     const tierDescription = (tier) => translate(tier === 'fast' ? 'speedFastDescription' : 'speedStandardDescription');
@@ -142,7 +317,9 @@ export function SpeedSelect({ loadSpeed, setSpeed, t }) {
                 event.preventDefault();
                 setOpen(false);
             }
-        }, children: [_jsx("style", { children: subscriptionChromeCss }), open && (_jsx("div", { style: styles.menu, role: "menu", "aria-label": translate('speed'), children: TIERS.map(tier => (_jsxs("button", { type: "button", role: "menuitemradio", "aria-checked": tier === state.tier, style: styles.item, disabled: busy, onClick: () => { choose(tier); }, children: [_jsx("span", { style: styles.itemCheck, children: tier === state.tier ? '✓' : '' }), _jsxs("span", { style: styles.itemText, children: [_jsx("span", { style: styles.itemName, children: tierName(tier) }), _jsx("span", { style: styles.itemDescription, children: tierDescription(tier) })] })] }, tier))) })), _jsx("button", { type: "button", style: styles.trigger, "aria-haspopup": "menu", "aria-expanded": open, title: triggerLabel, disabled: busy, onClick: () => {
+        }, children: [_jsx("style", { children: subscriptionChromeCss }), open && (_jsx("div", { style: styles.menu, role: "menu", "aria-label": translate('speed'), children: TIERS.map((tier) => (_jsxs("button", { type: "button", role: "menuitemradio", "aria-checked": tier === state.tier, style: styles.item, disabled: busy, onClick: () => {
+                        choose(tier);
+                    }, children: [_jsx("span", { style: styles.itemCheck, children: tier === state.tier ? '✓' : '' }), _jsxs("span", { style: styles.itemText, children: [_jsx("span", { style: styles.itemName, children: tierName(tier) }), _jsx("span", { style: styles.itemDescription, children: tierDescription(tier) })] })] }, tier))) })), _jsx("button", { type: "button", style: styles.trigger, "aria-haspopup": "menu", "aria-expanded": open, title: triggerLabel, disabled: busy, onClick: () => {
                     if (open)
                         setOpen(false);
                     else
@@ -152,27 +329,62 @@ export function SpeedSelect({ loadSpeed, setSpeed, t }) {
 const styles = {
     root: { position: 'relative', display: 'inline-flex' },
     trigger: {
-        border: '0.5px solid var(--dsw-alias-border-l3)', borderRadius: 'var(--dsw-radius-sm, 8px)',
-        background: 'var(--dsh-subscription-speed-hover, transparent)', color: 'var(--dsw-alias-label-secondary)',
-        font: 'inherit', fontSize: 12, lineHeight: '18px',
-        padding: '2px 8px', cursor: 'pointer', whiteSpace: 'nowrap',
+        border: '0.5px solid var(--dsw-alias-border-l3)',
+        borderRadius: 'var(--dsw-radius-sm, 8px)',
+        background: 'var(--dsh-subscription-speed-hover, transparent)',
+        color: 'var(--dsw-alias-label-secondary)',
+        font: 'inherit',
+        fontSize: 12,
+        lineHeight: '18px',
+        padding: '2px 8px',
+        cursor: 'pointer',
+        whiteSpace: 'nowrap',
     },
     menu: {
-        position: 'absolute', bottom: '100%', right: 0, marginBottom: 4,
-        minWidth: 180, padding: 4, zIndex: 20,
-        background: 'var(--dsw-specific-menu, var(--dsw-alias-bg-layer-2))', border: 0,
-        boxShadow: 'var(--dsw-elevation-prominent)', borderRadius: 'var(--dsw-radius-lg, 16px)', display: 'flex', flexDirection: 'column', gap: 2,
+        position: 'absolute',
+        bottom: '100%',
+        right: 0,
+        marginBottom: 4,
+        minWidth: 180,
+        padding: 4,
+        zIndex: 20,
+        background: 'var(--dsw-specific-menu, var(--dsw-alias-bg-layer-2))',
+        border: 0,
+        boxShadow: 'var(--dsw-elevation-prominent)',
+        borderRadius: 'var(--dsw-radius-lg, 16px)',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 2,
     },
     item: {
-        display: 'flex', alignItems: 'flex-start', gap: 6, width: '100%',
-        border: 'none', borderRadius: 'var(--dsw-radius-sm, 8px)', background: 'var(--dsh-subscription-speed-hover, transparent)',
-        padding: '6px 8px', cursor: 'pointer', font: 'inherit', textAlign: 'left',
+        display: 'flex',
+        alignItems: 'flex-start',
+        gap: 6,
+        width: '100%',
+        border: 'none',
+        borderRadius: 'var(--dsw-radius-sm, 8px)',
+        background: 'var(--dsh-subscription-speed-hover, transparent)',
+        padding: '6px 8px',
+        cursor: 'pointer',
+        font: 'inherit',
+        textAlign: 'left',
     },
     itemCheck: {
-        width: 14, flexShrink: 0, fontSize: 12, lineHeight: '18px',
+        width: 14,
+        flexShrink: 0,
+        fontSize: 12,
+        lineHeight: '18px',
         color: 'var(--dsw-alias-label-primary)',
     },
     itemText: { display: 'flex', flexDirection: 'column' },
-    itemName: { fontSize: 12, lineHeight: '18px', color: 'var(--dsw-alias-label-primary)' },
-    itemDescription: { fontSize: 11, lineHeight: '16px', color: 'var(--dsw-alias-label-tertiary)' },
+    itemName: {
+        fontSize: 12,
+        lineHeight: '18px',
+        color: 'var(--dsw-alias-label-primary)',
+    },
+    itemDescription: {
+        fontSize: 11,
+        lineHeight: '16px',
+        color: 'var(--dsw-alias-label-tertiary)',
+    },
 };

package/lib/client/SubscriptionUsageBadge.d.ts

@@ -20,9 +20,9 @@ export interface SubscriptionUsageBadgeInjected {
     } | undefined>;
 }
 /** Props delivered by the slot outlet + inject + the locale seat. */
-export type SubscriptionUsageBadgeProps = PropsRuntime<'conversation.composer.dock'> & Partial<SubscriptionUsageBadgeInjected> & Partial<PropsLocale<'settings.subscriptions'>>
+export type SubscriptionUsageBadgeProps = PropsRuntime<'conversation.composer.dock'> & Partial<SubscriptionUsageBadgeInjected> & Partial<PropsLocale<'settings.subscriptions'>> & 
 /** Override the rotation cadence (tests only; the slot never passes it). */
- & {
+{
     rotationMs?: number;
 };
 /** One logged-in account's usage windows, as listed in the expanded dialog. */
@@ -118,15 +118,9 @@ export declare function rotatingDisplay(displays: readonly ProviderUsageDisplay[
 /** Order for the expanded dialog: the current provider first, the rest in poll order. */
 export declare function expandedDisplays(displays: readonly ProviderUsageDisplay[], current: string | undefined): readonly ProviderUsageDisplay[];
 type Translate = (key: SubscriptionsKey, params?: Record<string, unknown>) => string;
-/**
- * The composer subscription-usage badge: a pill reading e.g.
- * `Codex 6d1h 25%` for the current model's provider, opening a dialog with
- * every provider's accounts and their windows. Returns null when no data is
- * available.
- */
-export declare function SubscriptionUsageBadge({ rpc, currentModel, t, rotationMs }: SubscriptionUsageBadgeProps): import("react").JSX.Element;
+export declare function SubscriptionUsageBadge({ rpc, currentModel, t, rotationMs, }: SubscriptionUsageBadgeProps): import("react").JSX.Element;
 /** Preview each account independently; all remaining quotas stay accessible. */
-export declare function AccountWindows({ windows, model, provider, translate, observedAt, stale }: {
+export declare function AccountWindows({ windows, model, provider, translate, observedAt, stale, }: {
     windows: readonly UsageWindow[];
     model: string | undefined;
     provider?: BadgeProvider;