dsh-plugin-subscriptions 0.5.2 → 0.6.0

package/lib/client/SubscriptionsSection.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * Subscriptions settings section: one card per subscription provider with an
  * OAuth login/logout flow driven by the node half's `/subscriptions-auth` RPC
@@ -19,6 +19,17 @@ import { en } from './locales.js';
 const SUBSCRIPTIONS_AUTH_CHANNEL = '/subscriptions-auth';
 /** Poll cadence while a provider login attempt is busy. */
 const POLL_INTERVAL_MS = 2000;
+/**
+ * Model count above which the expanded default-effort list also offers a name
+ * filter; below it the list is short enough to scan.
+ */
+const MODEL_FILTER_THRESHOLD = 8;
+/**
+ * Height cap of the expanded default-effort list, in px. Past it the list
+ * scrolls internally so a provider with dozens of models cannot stretch the
+ * card (roughly 7 rows, which keeps the next card's header on screen).
+ */
+const MODEL_LIST_MAX_HEIGHT = 260;
 /** Card display metadata, in page order (names are brand names, not translated). */
 const PROVIDERS = [
     { id: 'codex', name: 'Codex (ChatGPT)' },
@@ -54,6 +65,16 @@ export async function callSubscriptionsAuth(rpc, endpoint, payload) {
 function messageOf(error) {
     return error instanceof Error ? error.message : String(error);
 }
+/** Copy a keyed map without the entries whose key is not in `live`. */
+function dropStale(map, live) {
+    const stale = Object.keys(map).filter(key => !live.has(key));
+    if (stale.length === 0)
+        return map;
+    const next = { ...map };
+    for (const key of stale)
+        delete next[key];
+    return next;
+}
 /**
  * English-dictionary fallback for a missing inject `t` (standalone renders);
  * the slot inject always supplies the locale-bound one.
@@ -114,11 +135,63 @@ const styles = {
         display: 'flex', justifyContent: 'space-between', gap: 8,
         fontSize: 12, lineHeight: '18px', color: 'var(--dsw-alias-label-tertiary)',
     },
+    accountRow: {
+        display: 'flex', flexDirection: 'column', gap: 6,
+        border: '1px solid var(--dsw-alias-border-l2)', borderRadius: 8,
+        padding: '8px 10px', marginTop: 4,
+    },
+    accountHeader: { display: 'flex', alignItems: 'center', gap: 8 },
+    accountName: { fontSize: 13, lineHeight: '20px', color: 'var(--dsw-alias-label-primary)', userSelect: 'all' },
+    starButton: {
+        border: 'none', background: 'transparent', padding: 0,
+        font: 'inherit', fontSize: 14, lineHeight: '20px', cursor: 'pointer',
+        color: 'var(--dsw-alias-state-warn-label)',
+    },
     usageTrack: {
         height: 6, borderRadius: 3, overflow: 'hidden',
         background: 'var(--dsw-alias-bg-layer-1)', border: '1px solid var(--dsw-alias-border-l2)',
     },
     usageFill: { height: '100%', borderRadius: 3 },
+    defaultEffort: {
+        display: 'flex', flexDirection: 'column', gap: 6, marginTop: 4,
+        borderTop: '1px solid var(--dsw-alias-border-l2)', paddingTop: 8,
+    },
+    /** The always-visible disclosure header: title, summary, chevron. */
+    defaultEffortToggle: {
+        boxSizing: 'border-box', display: 'flex', alignItems: 'center', gap: 8,
+        width: '100%', padding: 0, border: 'none', background: 'transparent',
+        font: 'inherit', textAlign: 'left', cursor: 'pointer',
+    },
+    defaultEffortChevron: {
+        marginLeft: 'auto', flexShrink: 0, fontSize: 10, lineHeight: '18px',
+        color: 'var(--dsw-alias-label-tertiary)',
+    },
+    /** Body of the expanded disclosure: bounded height so a long catalog scrolls. */
+    defaultEffortList: {
+        display: 'flex', flexDirection: 'column', gap: 6,
+        maxHeight: MODEL_LIST_MAX_HEIGHT, overflowY: 'auto', paddingRight: 2,
+    },
+    defaultEffortRow: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 },
+    defaultEffortName: {
+        fontSize: 12, lineHeight: '18px', color: 'var(--dsw-alias-label-primary)',
+        overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
+    },
+    defaultEffortSaving: {
+        marginLeft: 'auto', flexShrink: 0,
+        fontSize: 12, lineHeight: '18px', color: 'var(--dsw-alias-label-tertiary)',
+    },
+    defaultEffortSelect: {
+        maxWidth: 220, flexShrink: 0, height: 28, boxSizing: 'border-box',
+        border: '1px solid var(--dsw-alias-border-l2)', borderRadius: 8,
+        padding: '0 8px', font: 'inherit', fontSize: 12, lineHeight: '18px',
+        background: 'var(--dsw-alias-bg-layer-1)', color: 'var(--dsw-alias-label-primary)',
+    },
+    defaultEffortFilter: {
+        height: 28, width: '100%', boxSizing: 'border-box',
+        border: '1px solid var(--dsw-alias-border-l2)', borderRadius: 8,
+        padding: '0 8px', font: 'inherit', fontSize: 12, lineHeight: '18px',
+        background: 'var(--dsw-alias-bg-layer-1)', color: 'var(--dsw-alias-label-primary)',
+    },
     manual: { marginTop: 4, fontSize: 12, lineHeight: '18px', color: 'var(--dsw-alias-label-secondary)' },
     manualRow: { display: 'flex', gap: 8, marginTop: 6 },
     manualInput: {
@@ -171,10 +244,20 @@ const styles = {
 function dotColor(status) {
     if (status?.busy === true)
         return 'var(--dsw-alias-state-warn-label)';
-    if (status?.loggedIn === true)
+    if ((status?.accounts.length ?? 0) > 0)
         return 'var(--dsw-alias-state-success-primary)';
     return 'var(--dsw-alias-label-dimmed)';
 }
+/**
+ * Whether a provider has at least one connected account. Multi-account made
+ * "logged in" a property of the account list rather than a flag, so every
+ * logged-in test goes through this one predicate.
+ * @param status - the provider's last reported state, possibly absent.
+ * @returns true when the provider serves at least one account.
+ */
+function hasAccount(status) {
+    return (status?.accounts.length ?? 0) > 0;
+}
 /**
  * One-line status text for one provider state.
  * @param t - section translate.
@@ -186,20 +269,8 @@ function statusText(t, status) {
         return t('checking');
     if (status.busy)
         return t('loginInProgress');
-    if (status.loggedIn) {
-        const params = {};
-        if (status.account !== undefined)
-            params.account = status.account;
-        if (status.expiresAt !== undefined)
-            params.date = new Date(status.expiresAt).toLocaleString();
-        if (params.account !== undefined && params.date !== undefined)
-            return t('loggedInAccountExpires', params);
-        if (params.account !== undefined)
-            return t('loggedInAccount', params);
-        if (params.date !== undefined)
-            return t('loggedInExpires', params);
-        return t('loggedIn');
-    }
+    if (status.accounts.length > 0)
+        return t('loggedInCount', { count: status.accounts.length });
     return t('notLoggedIn');
 }
 /**
@@ -240,6 +311,65 @@ function messageColor(tone) {
         ? 'var(--dsw-alias-state-error-primary)'
         : 'var(--dsw-alias-state-success-primary)';
 }
+/**
+ * Derive one provider's default-effort section from its catalog and filter.
+ * Pure so the collapsed-header counts and the filter stay testable without a
+ * DOM: rows come only from models that advertise levels, the count of the rest
+ * rides as one line, and the filter matches display name or model id.
+ * @param models - the provider's catalog models, or undefined while loading.
+ * @param filter - the raw filter input (trimmed and lowercased here).
+ * @returns the section's rows and header counts.
+ */
+export function deriveModelDefaultsView(models, filter) {
+    const all = models ?? [];
+    const withEfforts = all.filter(model => model.efforts.length > 0);
+    const query = filter.trim().toLowerCase();
+    const shown = query === ''
+        ? withEfforts
+        : withEfforts.filter(model => model.name.toLowerCase().includes(query)
+            || model.id.toLowerCase().includes(query));
+    return {
+        shown,
+        total: withEfforts.length,
+        overridden: withEfforts.filter(model => model.configured !== undefined).length,
+        withoutEfforts: all.length - withEfforts.length,
+        showFilter: withEfforts.length > MODEL_FILTER_THRESHOLD,
+    };
+}
+/**
+ * Whether the default-effort catalog needs (re)fetching.
+ *
+ * Fetching is gated on an *attempt* signature rather than on the payload
+ * being empty: an empty answer is a legitimate result (a narrowed
+ * `config.providers`, or a catalog that is momentarily unavailable), and
+ * treating it as "not loaded yet" re-ran this effect forever. The signature
+ * also covers the accounts, so logging a second provider in refetches
+ * instead of leaving that card on the previous answer.
+ * @param input - the decision inputs.
+ * @returns true when the caller should start a fetch.
+ */
+export function shouldFetchModelDefaults(input) {
+    if (input.failed)
+        return false;
+    if (input.loggedIn.length === 0)
+        return false;
+    // Only an open disclosure pays for the per-model live resolve.
+    if (!input.open.some(provider => input.loggedIn.includes(provider)))
+        return false;
+    return input.loadedFor !== input.signature;
+}
+/**
+ * Stable signature of the accounts a catalog answer depends on. A change
+ * means a previous answer is stale (an account arrived or left), so the next
+ * open disclosure refetches.
+ * @param statuses - the per-provider status snapshot.
+ * @returns a signature string, stable across renders with equal accounts.
+ */
+export function modelDefaultsSignature(statuses) {
+    return PROVIDERS
+        .map(({ id }) => `${id}:${(statuses[id]?.accounts ?? []).map(account => account.key).sort().join(',')}`)
+        .join('|');
+}
 /**
  * The Subscriptions settings page component.
  * @param props - the slot inject face ({@link SubscriptionsSectionInjected}).
@@ -256,12 +386,13 @@ export function SubscriptionsSection(props) {
     /** Pending device-flow codes (copilot), shown while the attempt polls. */
     const [deviceCodes, setDeviceCodes] = useState({});
     const [copiedCode, setCopiedCode] = useState(undefined);
+    /** Usage snapshots keyed `${provider}:${accountKey}` — every account tracks its own windows. */
     const [usages, setUsages] = useState({});
     const [usageErrors, setUsageErrors] = useState({});
     const [usageLoading, setUsageLoading] = useState({});
     const mountedRef = useRef(true);
     const pollersRef = useRef(new Map());
-    /** Providers with a `usage` call in flight; guards the auto-fetch effect against re-entry. */
+    /** Accounts with a `usage` call in flight; guards the auto-fetch effect against re-entry. */
     const usageInflightRef = useRef(new Set());
     /** Proxy config as last answered by `proxyGet`/`proxySet`. */
     const [proxy, setProxy] = useState(undefined);
@@ -278,6 +409,24 @@ export function SubscriptionsSection(props) {
     const [proxyTesting, setProxyTesting] = useState(false);
     const [proxyMessage, setProxyMessage] = useState(undefined);
     const [proxyTestResult, setProxyTestResult] = useState(undefined);
+    /** Per-model default-effort picker state as answered by `modelDefaults`. */
+    const [modelDefaults, setModelDefaults] = useState({});
+    const [modelDefaultsLoading, setModelDefaultsLoading] = useState(false);
+    const [modelDefaultsLoadError, setModelDefaultsLoadError] = useState(undefined);
+    /** One set in flight: the `${provider}/${model}` key. */
+    const [modelDefaultsSaving, setModelDefaultsSaving] = useState(undefined);
+    /** Per-model save failures, keyed `${provider}/${model}`. */
+    const [modelDefaultsSaveErrors, setModelDefaultsSaveErrors] = useState({});
+    /** Providers whose default-effort disclosure is open (collapsed by default). */
+    const [modelDefaultsOpen, setModelDefaultsOpen] = useState({});
+    /** Per-provider name filter of the expanded list. */
+    const [modelDefaultsFilters, setModelDefaultsFilters] = useState({});
+    /** Account signature the last completed catalog fetch was answered for. */
+    const [modelDefaultsLoadedFor, setModelDefaultsLoadedFor] = useState(undefined);
+    /** Optimistic in-flight selections, keyed `${provider}/${model}` ('' = follow provider). */
+    const [modelDefaultsPending, setModelDefaultsPending] = useState({});
+    /** Guard the catalog effect against concurrent loads. */
+    const modelDefaultsInflightRef = useRef(false);
     const setProviderError = useCallback((provider, message) => {
         if (!mountedRef.current)
             return;
@@ -315,7 +464,7 @@ export function SubscriptionsSection(props) {
         setStatuses(response.providers);
         for (const { id } of PROVIDERS) {
             const status = response.providers[id];
-            if (status.loggedIn || !status.busy) {
+            if (status.accounts.length > 0 || !status.busy) {
                 stopPolling(id);
                 // The attempt settled (success, timeout, or cancel): drop the code card.
                 setDeviceCodes((prev) => {
@@ -355,64 +504,198 @@ export function SubscriptionsSection(props) {
             pollersRef.current.clear();
         };
     }, [refresh, startPolling]);
-    const loadUsage = useCallback(async (provider) => {
-        if (rpc === undefined || usageInflightRef.current.has(provider))
+    const loadUsage = useCallback(async (provider, account, force = false) => {
+        const key = `${provider}:${account}`;
+        if (rpc === undefined || usageInflightRef.current.has(key))
             return;
-        usageInflightRef.current.add(provider);
-        setUsageLoading(prev => ({ ...prev, [provider]: true }));
+        usageInflightRef.current.add(key);
+        setUsageLoading(prev => ({ ...prev, [key]: true }));
         try {
-            const usage = await callSubscriptionsAuth(rpc, 'usage', { provider });
+            const usage = await callSubscriptionsAuth(rpc, 'usage', { provider, account, ...force ? { force: true } : {} });
             if (!mountedRef.current)
                 return;
-            setUsages(prev => ({ ...prev, [provider]: usage }));
+            setUsages(prev => ({ ...prev, [key]: usage }));
             setUsageErrors((prev) => {
                 const next = { ...prev };
-                delete next[provider];
+                delete next[key];
                 return next;
             });
         }
         catch (error) {
             if (mountedRef.current)
-                setUsageErrors(prev => ({ ...prev, [provider]: messageOf(error) }));
+                setUsageErrors(prev => ({ ...prev, [key]: messageOf(error) }));
         }
         finally {
-            usageInflightRef.current.delete(provider);
+            usageInflightRef.current.delete(key);
             if (mountedRef.current)
-                setUsageLoading(prev => ({ ...prev, [provider]: false }));
+                setUsageLoading(prev => ({ ...prev, [key]: false }));
         }
     }, [rpc]);
-    // Fetch usage once a provider is logged in; drop the cached snapshot on
-    // logout so a re-login refetches. A failed lookup does not auto-retry — the
-    // per-card Refresh button is the retry path.
+    // Fetch usage once an account is logged in; drop the snapshots of accounts
+    // that vanished so a re-login refetches. A failed lookup does not auto-retry
+    // — the per-account Refresh button is the retry path.
     useEffect(() => {
+        const live = new Set();
         for (const { id } of PROVIDERS) {
-            const status = statuses[id];
-            if (status === undefined)
-                continue;
-            if (status.loggedIn) {
-                if (usages[id] === undefined && usageErrors[id] === undefined)
-                    void loadUsage(id);
+            for (const account of statuses[id]?.accounts ?? []) {
+                const key = `${id}:${account.key}`;
+                live.add(key);
+                if (usages[key] === undefined && usageErrors[key] === undefined)
+                    void loadUsage(id, account.key);
             }
-            else if (usages[id] !== undefined || usageErrors[id] !== undefined) {
-                setUsages((prev) => {
-                    const next = { ...prev };
-                    delete next[id];
-                    return next;
-                });
-                setUsageErrors((prev) => {
+        }
+        setUsages(prev => dropStale(prev, live));
+        setUsageErrors(prev => dropStale(prev, live));
+    }, [statuses, usages, usageErrors, loadUsage]);
+    const loadModelDefaultsData = useCallback(async (signature) => {
+        if (rpc === undefined || modelDefaultsInflightRef.current)
+            return;
+        modelDefaultsInflightRef.current = true;
+        setModelDefaultsLoading(true);
+        try {
+            const catalog = await callSubscriptionsAuth(rpc, 'modelDefaults', {});
+            if (!mountedRef.current)
+                return;
+            const next = {};
+            for (const entry of catalog)
+                next[entry.provider] = entry;
+            setModelDefaults(next);
+            setModelDefaultsLoadError(undefined);
+            // Latch the answered signature, empty answer included: an empty catalog
+            // is a result, not a missing load, and re-deriving "loaded" from the
+            // payload re-triggered this fetch on every render.
+            setModelDefaultsLoadedFor(signature);
+            // The shown state is now authoritative; stale per-row failures would
+            // otherwise linger next to rows that are correct again.
+            setModelDefaultsSaveErrors({});
+        }
+        catch (error) {
+            if (mountedRef.current)
+                setModelDefaultsLoadError(messageOf(error));
+        }
+        finally {
+            modelDefaultsInflightRef.current = false;
+            if (mountedRef.current)
+                setModelDefaultsLoading(false);
+        }
+    }, [rpc]);
+    // Fetch the default-effort catalogs only once a card's list is expanded: the
+    // node half resolves live model info per model, so a collapsed page must not
+    // pay for it. One fetch covers every logged-in provider (the node half
+    // answers them together), and the levels follow the picker's catalog union
+    // across that provider's accounts. The account signature drives refetching,
+    // so connecting another provider or account does not leave an open card on
+    // the previous answer. Everything resets once the last account logs out.
+    useEffect(() => {
+        const loggedIn = PROVIDERS.filter(({ id }) => hasAccount(statuses[id])).map(({ id }) => id);
+        const signature = modelDefaultsSignature(statuses);
+        if (loggedIn.length > 0) {
+            const open = PROVIDERS.filter(({ id }) => modelDefaultsOpen[id] === true).map(({ id }) => id);
+            if (shouldFetchModelDefaults({
+                loggedIn,
+                open,
+                loadedFor: modelDefaultsLoadedFor,
+                signature,
+                failed: modelDefaultsLoadError !== undefined,
+            })) {
+                void loadModelDefaultsData(signature);
+            }
+        }
+        else if (modelDefaultsLoadedFor !== undefined
+            || Object.keys(modelDefaults).length > 0
+            || Object.keys(modelDefaultsOpen).length > 0) {
+            setModelDefaults({});
+            setModelDefaultsSaveErrors({});
+            setModelDefaultsLoadError(undefined);
+            setModelDefaultsLoadedFor(undefined);
+            setModelDefaultsLoading(false);
+            setModelDefaultsOpen({});
+            setModelDefaultsFilters({});
+        }
+    }, [
+        statuses,
+        modelDefaults,
+        modelDefaultsOpen,
+        modelDefaultsLoadError,
+        modelDefaultsLoadedFor,
+        loadModelDefaultsData,
+    ]);
+    /** Open or close one provider's default-effort disclosure. */
+    const toggleModelDefaults = useCallback((provider) => {
+        setModelDefaultsOpen(prev => ({ ...prev, [provider]: prev[provider] !== true }));
+    }, []);
+    const setModelDefault = useCallback(async (provider, model, effort) => {
+        if (rpc === undefined)
+            return;
+        const key = `${provider}/${model}`;
+        setModelDefaultsSaving(key);
+        // Hold the picked level locally for the duration of the save: the select
+        // is controlled by server state, which only updates after the round trip,
+        // so without this the row visibly snaps back to "Follow provider" (greyed
+        // out) mid-save and reads as a rejected change.
+        setModelDefaultsPending(prev => ({ ...prev, [key]: effort ?? '' }));
+        setModelDefaultsSaveErrors((prev) => {
+            const next = { ...prev };
+            delete next[key];
+            return next;
+        });
+        try {
+            await callSubscriptionsAuth(rpc, 'setModelDefault', {
+                provider,
+                model,
+                ...(effort === undefined ? {} : { effort }),
+            });
+            if (!mountedRef.current)
+                return;
+            setModelDefaults((prev) => {
+                const section = prev[provider];
+                if (section === undefined)
+                    return prev;
+                return {
+                    ...prev,
+                    [provider]: {
+                        ...section,
+                        models: section.models.map((entry) => {
+                            if (entry.id !== model)
+                                return entry;
+                            if (effort !== undefined)
+                                return { ...entry, configured: effort };
+                            // Cleared: drop the key rather than keep the stale level, or the
+                            // select would snap back and the header would keep counting it.
+                            const { configured: _cleared, ...rest } = entry;
+                            return rest;
+                        }),
+                    },
+                };
+            });
+        }
+        catch (error) {
+            if (mountedRef.current)
+                setModelDefaultsSaveErrors((prev) => ({ ...prev, [key]: messageOf(error) }));
+        }
+        finally {
+            if (mountedRef.current) {
+                setModelDefaultsSaving(current => current === key ? undefined : current);
+                // Drop the optimistic value: on success the server state now carries
+                // it, on failure the row must fall back to the real stored level
+                // rather than keep showing a change that did not land.
+                setModelDefaultsPending((prev) => {
                     const next = { ...prev };
-                    delete next[id];
+                    delete next[key];
                     return next;
                 });
             }
         }
-    }, [statuses, usages, usageErrors, loadUsage]);
-    const login = useCallback(async (provider) => {
+    }, [rpc]);
+    const login = useCallback(async (provider, method) => {
         if (rpc === undefined)
             return;
         setProviderError(provider, undefined);
         try {
-            const response = await callSubscriptionsAuth(rpc, 'login', { provider });
+            const response = await callSubscriptionsAuth(rpc, 'login', {
+                provider,
+                ...method === undefined ? {} : { method },
+            });
             if (typeof response.authorizeUrl === 'string' && response.authorizeUrl === '') {
                 // Instant login (e.g. imported from Claude Code credentials)
                 await refresh();
@@ -424,7 +707,10 @@ export function SubscriptionsSection(props) {
             if (!mountedRef.current)
                 return;
             // Optimistic busy so Cancel and the manual fallback appear before the first poll tick.
-            setStatuses(prev => ({ ...prev, [provider]: { ...prev[provider], busy: true, loggedIn: false } }));
+            setStatuses(prev => ({
+                ...prev,
+                [provider]: { accounts: prev[provider]?.accounts ?? [], ...prev[provider], busy: true },
+            }));
             if (typeof response.userCode === 'string' && response.userCode.length > 0) {
                 // Device flow: show the code card instead of opening the page blind —
                 // the user copies the code first, then opens the verification page.
@@ -468,20 +754,32 @@ export function SubscriptionsSection(props) {
         }
         await refresh();
     }, [rpc, manualDrafts, setProviderError, refresh]);
-    const logout = useCallback(async (provider, name) => {
+    const logout = useCallback(async (provider, account, display, name) => {
         if (rpc === undefined)
             return;
-        if (!window.confirm(t('logoutConfirm', { provider: name })))
+        if (!window.confirm(t('logoutAccountConfirm', { provider: name, account: display })))
             return;
         setProviderError(provider, undefined);
         try {
-            await callSubscriptionsAuth(rpc, 'logout', { provider });
+            await callSubscriptionsAuth(rpc, 'logout', { provider, account });
         }
         catch (error) {
             setProviderError(provider, messageOf(error));
         }
         await refresh();
     }, [rpc, t, setProviderError, refresh]);
+    const setDefault = useCallback(async (provider, account) => {
+        if (rpc === undefined)
+            return;
+        setProviderError(provider, undefined);
+        try {
+            await callSubscriptionsAuth(rpc, 'setDefault', { provider, account });
+        }
+        catch (error) {
+            setProviderError(provider, messageOf(error));
+        }
+        await refresh();
+    }, [rpc, setProviderError, refresh]);
     const copyDeviceCode = useCallback((provider, userCode) => {
         void navigator.clipboard?.writeText(userCode).then(() => {
             if (!mountedRef.current)
@@ -593,16 +891,67 @@ export function SubscriptionsSection(props) {
                 const status = statuses[id];
                 const busy = status?.busy === true;
                 const deviceCode = deviceCodes[id];
-                const usage = usages[id];
-                const usageError = usageErrors[id];
-                // Providers without a usage endpoint answer supported:false — no block.
-                const showUsage = status?.loggedIn === true && usage?.supported !== false
-                    && (usage !== undefined || usageError !== undefined || usageLoading[id] === true);
-                return (_jsxs("div", { style: styles.card, children: [_jsxs("div", { style: styles.cardHeader, children: [_jsx("span", { style: { ...styles.dot, background: dotColor(status) } }), _jsx("span", { style: styles.name, children: name })] }), _jsx("p", { style: styles.statusLine, children: statusText(t, status) }), status?.detail !== undefined && status.detail !== '' && (_jsx("p", { style: styles.statusLine, children: status.detail })), errors[id] !== undefined && _jsx("p", { style: styles.errorLine, children: errors[id] }), _jsxs("div", { style: styles.actions, children: [!busy && status?.loggedIn !== true && (_jsx("button", { type: "button", style: styles.button, onClick: () => { void login(id); }, children: t('login') })), busy && (_jsx("button", { type: "button", style: styles.button, onClick: () => { void cancel(id); }, children: t('cancel') })), status?.loggedIn === true && (_jsx("button", { type: "button", style: styles.button, onClick: () => { void logout(id, name); }, children: t('logout') }))] }), showUsage && (_jsxs("div", { style: styles.usage, children: [_jsxs("div", { style: styles.usageHeader, children: [_jsx("span", { style: styles.usageTitle, children: t('usageTitle') }), usage?.plan !== undefined && (_jsx("span", { style: styles.usagePlan, children: t('usagePlan', { plan: usage.plan }) })), _jsx("button", { type: "button", style: { ...styles.usageRefresh, ...usageLoading[id] === true ? { opacity: 0.5, cursor: 'default' } : {} }, disabled: usageLoading[id] === true, onClick: () => { void loadUsage(id); }, children: t('usageRefresh') })] }), usage === undefined && usageError === undefined && (_jsx("p", { style: styles.statusLine, children: t('usageLoading') })), usageError !== undefined && (_jsx("p", { style: styles.errorLine, children: t('usageError', { message: usageError }) })), usage?.windows !== undefined && usage.windows.length === 0 && (_jsx("p", { style: styles.statusLine, children: t('usageEmpty') })), (usage?.windows ?? []).map((window, index) => {
-                                    const percent = Math.min(100, Math.max(0, window.usedPercent));
-                                    return (_jsxs("div", { style: styles.usageRow, children: [_jsxs("div", { style: styles.usageMeta, children: [_jsx("span", { children: usageWindowLabel(t, window) }), _jsxs("span", { children: [`${String(Math.round(percent))}%`, window.resetsAt !== undefined
-                                                                && ` · ${t('usageResets', { date: new Date(window.resetsAt).toLocaleString() })}`] })] }), _jsx("div", { style: styles.usageTrack, children: _jsx("div", { style: { ...styles.usageFill, width: `${String(percent)}%`, background: usageBarColor(percent) } }) })] }, index));
-                                })] })), busy && deviceCode !== undefined && (_jsxs("div", { style: styles.deviceCode, children: [_jsx("span", { style: styles.statusLine, children: t('deviceCodePrompt') }), _jsx("span", { style: styles.deviceCodeText, children: deviceCode.userCode }), _jsxs("div", { style: styles.actions, children: [_jsx("button", { type: "button", style: styles.button, onClick: () => { copyDeviceCode(id, deviceCode.userCode); }, children: copiedCode === id ? t('deviceCodeCopied') : t('deviceCodeCopy') }), _jsx("button", { type: "button", style: styles.button, onClick: () => { window.open(deviceCode.verificationUrl, '_blank', 'noopener'); }, children: t('deviceCodeOpenPage') })] })] })), busy && deviceCode === undefined && (_jsxs("details", { style: styles.manual, children: [_jsx("summary", { children: t('manualSummary') }), _jsxs("div", { style: styles.manualRow, children: [_jsx("input", { style: styles.manualInput, value: manualDrafts[id], placeholder: t('manualPlaceholder'), onChange: event => setManualDrafts(prev => ({ ...prev, [id]: event.target.value })) }), _jsx("button", { type: "button", style: styles.button, onClick: () => { void submitManual(id); }, children: t('submit') })] })] }))] }, id));
+                const accounts = status?.accounts ?? [];
+                return (_jsxs("div", { style: styles.card, children: [_jsxs("div", { style: styles.cardHeader, children: [_jsx("span", { style: { ...styles.dot, background: dotColor(status) } }), _jsx("span", { style: styles.name, children: name })] }), _jsx("p", { style: styles.statusLine, children: statusText(t, status) }), status?.detail !== undefined && status.detail !== '' && (_jsx("p", { style: styles.statusLine, children: status.detail })), errors[id] !== undefined && _jsx("p", { style: styles.errorLine, children: errors[id] }), accounts.map((account) => {
+                            const usageKey = `${id}:${account.key}`;
+                            const usage = usages[usageKey];
+                            const usageError = usageErrors[usageKey];
+                            const display = account.account ?? account.key;
+                            // Providers without a usage endpoint answer supported:false — no block.
+                            const showUsage = usage?.supported !== false
+                                && (usage !== undefined || usageError !== undefined || usageLoading[usageKey] === true);
+                            return (_jsxs("div", { style: styles.accountRow, children: [_jsxs("div", { style: styles.accountHeader, children: [_jsx("button", { type: "button", style: styles.starButton, title: account.isDefault ? t('defaultBadge') : t('setDefault'), onClick: () => {
+                                                    if (!account.isDefault)
+                                                        void setDefault(id, account.key);
+                                                }, children: account.isDefault ? '★' : '☆' }), _jsx("span", { style: styles.accountName, children: display }), account.plan !== undefined && (_jsx("span", { style: styles.usagePlan, children: account.plan })), account.expiresAt !== undefined && (_jsx("span", { style: styles.statusLine, children: t('accountExpires', { date: new Date(account.expiresAt).toLocaleString() }) })), _jsx("button", { type: "button", style: { ...styles.button, marginLeft: 'auto', flexShrink: 0 }, onClick: () => { void logout(id, account.key, display, name); }, children: t('logout') })] }), showUsage && (_jsxs("div", { style: styles.usage, children: [_jsxs("div", { style: styles.usageHeader, children: [_jsx("span", { style: styles.usageTitle, children: t('usageTitle') }), usage?.plan !== undefined && (_jsx("span", { style: styles.usagePlan, children: t('usagePlan', { plan: usage.plan }) })), _jsx("button", { type: "button", style: { ...styles.usageRefresh, ...usageLoading[usageKey] === true ? { opacity: 0.5, cursor: 'default' } : {} }, disabled: usageLoading[usageKey] === true, onClick: () => { void loadUsage(id, account.key, true); }, children: t('usageRefresh') })] }), usage === undefined && usageError === undefined && (_jsx("p", { style: styles.statusLine, children: t('usageLoading') })), usageError !== undefined && (_jsx("p", { style: styles.errorLine, children: t('usageError', { message: usageError }) })), usage?.windows !== undefined && usage.windows.length === 0 && (_jsx("p", { style: styles.statusLine, children: t('usageEmpty') })), (usage?.windows ?? []).map((window, index) => {
+                                                const percent = Math.min(100, Math.max(0, window.usedPercent));
+                                                return (_jsxs("div", { style: styles.usageRow, children: [_jsxs("div", { style: styles.usageMeta, children: [_jsx("span", { children: usageWindowLabel(t, window) }), _jsxs("span", { children: [`${String(Math.round(percent))}%`, window.resetsAt !== undefined
+                                                                            && ` · ${t('usageResets', { date: new Date(window.resetsAt).toLocaleString() })}`] })] }), _jsx("div", { style: styles.usageTrack, children: _jsx("div", { style: { ...styles.usageFill, width: `${String(percent)}%`, background: usageBarColor(percent) } }) })] }, index));
+                                            })] }))] }, account.key));
+                        }), _jsxs("div", { style: styles.actions, children: [!busy && accounts.length === 0 && (_jsx("button", { type: "button", style: styles.button, onClick: () => { void login(id); }, children: t('login') })), !busy && accounts.length > 0 && id === 'claude' && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", style: styles.button, onClick: () => { void login(id, 'oauth'); }, children: t('addAccountOAuth') }), _jsx("button", { type: "button", style: styles.button, onClick: () => { void login(id, 'keychain'); }, children: t('addAccountKeychain') })] })), !busy && accounts.length > 0 && id !== 'claude' && (_jsx("button", { type: "button", style: styles.button, onClick: () => { void login(id); }, children: t('addAccount') })), busy && (_jsx("button", { type: "button", style: styles.button, onClick: () => { void cancel(id); }, children: t('cancel') }))] }), !busy && accounts.length > 0 && (_jsx("p", { style: styles.statusLine, children: t('addAccountHint') })), accounts.length > 0 && (() => {
+                            // Collapsed by default: providers with a large catalog (Copilot
+                            // lists dozens of models) must not push the page down. The
+                            // header carries the summary so the collapsed state still says
+                            // how many models are overridden. The section is per provider,
+                            // not per account: the override keys off the model id, which the
+                            // pool shares across a provider's accounts.
+                            const open = modelDefaultsOpen[id] === true;
+                            const catalog = modelDefaults[id];
+                            const filter = modelDefaultsFilters[id] ?? '';
+                            const view = deriveModelDefaultsView(catalog?.models, filter);
+                            const saveErrors = Object.entries(modelDefaultsSaveErrors).filter(([key]) => key.startsWith(`${id}/`));
+                            return (_jsxs("div", { style: styles.defaultEffort, children: [_jsxs("button", { type: "button", style: styles.defaultEffortToggle, "aria-expanded": open, onClick: () => { toggleModelDefaults(id); }, children: [_jsx("span", { style: styles.usageTitle, children: t('modelDefaultsTitle') }), _jsx("span", { style: styles.usagePlan, children: catalog === undefined
+                                                    ? (modelDefaultsLoading ? t('modelDefaultsLoading') : '')
+                                                    : view.total === 0
+                                                        ? t('modelDefaultsSummaryEmpty')
+                                                        : view.overridden === 0
+                                                            ? t('modelDefaultsSummaryNone', { total: view.total })
+                                                            : t('modelDefaultsSummary', { total: view.total, configured: view.overridden }) }), _jsx("span", { style: styles.defaultEffortChevron, "aria-hidden": "true", children: open ? '▲' : '▼' })] }), saveErrors.map(([key, message]) => (
+                                    // Named: the failing row may be scrolled out of the
+                                    // bounded list, and several anonymous "Save failed" lines
+                                    // cannot be told apart.
+                                    _jsx("p", { style: styles.errorLine, role: "alert", children: t('modelDefaultsSaveFailedNamed', {
+                                            model: catalog?.models.find(entry => `${id}/${entry.id}` === key)?.name
+                                                ?? key.slice(id.length + 1),
+                                            message,
+                                        }) }, key))), open && (_jsxs(_Fragment, { children: [_jsx("p", { style: styles.statusLine, children: t('modelDefaultsHint') }), modelDefaultsLoadError !== undefined && (_jsxs(_Fragment, { children: [_jsx("p", { style: styles.errorLine, children: t('modelDefaultsLoadFailed', { message: modelDefaultsLoadError }) }), _jsx("div", { style: styles.actions, children: _jsx("button", { type: "button", style: styles.button, onClick: () => {
+                                                                // Clearing the latch lets the effect pick the
+                                                                // fetch back up on the next render.
+                                                                setModelDefaultsLoadError(undefined);
+                                                            }, children: t('modelDefaultsRetry') }) })] })), modelDefaultsLoadError === undefined && catalog === undefined && (_jsx("p", { style: styles.statusLine, children: t('modelDefaultsLoading') })), view.showFilter && (_jsx("input", { style: styles.defaultEffortFilter, value: filter, placeholder: t('modelDefaultsFilterPlaceholder'), "aria-label": t('modelDefaultsFilterPlaceholder'), onChange: (event) => {
+                                                    setModelDefaultsFilters(prev => ({ ...prev, [id]: event.target.value }));
+                                                } })), view.shown.length > 0 && (_jsx("div", { style: styles.defaultEffortList, children: view.shown.map((model) => {
+                                                    const rowKey = `${id}/${model.id}`;
+                                                    const saving = modelDefaultsSaving === rowKey;
+                                                    // Ids carry the provider: a model id alone repeats
+                                                    // across cards, and duplicate ids break the label
+                                                    // association the select relies on.
+                                                    const labelId = `dsh-model-default-${id}-${model.id}`;
+                                                    return (_jsxs("div", { style: styles.defaultEffortRow, children: [_jsx("span", { id: labelId, style: styles.defaultEffortName, title: model.id, children: model.name }), saving && (_jsx("span", { style: styles.defaultEffortSaving, children: t('modelDefaultsSaving') })), _jsxs("select", { style: styles.defaultEffortSelect, "aria-labelledby": labelId, value: modelDefaultsPending[rowKey] ?? model.configured ?? '', disabled: saving, onChange: (event) => {
+                                                                    void setModelDefault(id, model.id, event.target.value === '' ? undefined : event.target.value);
+                                                                }, children: [_jsx("option", { value: "", children: t('modelDefaultsFollowProvider') }), model.efforts.map(effort => (_jsx("option", { value: effort.id, children: effort.name }, effort.id)))] })] }, model.id));
+                                                }) })), catalog !== undefined && view.shown.length === 0 && filter.trim() !== '' && (_jsx("p", { style: styles.statusLine, children: t('modelDefaultsFilterEmpty', { query: filter.trim() }) })), view.withoutEfforts > 0 && (_jsx("p", { style: styles.statusLine, children: t('modelDefaultsNoLevels', { count: view.withoutEfforts }) }))] }))] }));
+                        })(), busy && deviceCode !== undefined && (_jsxs("div", { style: styles.deviceCode, children: [_jsx("span", { style: styles.statusLine, children: t('deviceCodePrompt') }), _jsx("span", { style: styles.deviceCodeText, children: deviceCode.userCode }), _jsxs("div", { style: styles.actions, children: [_jsx("button", { type: "button", style: styles.button, onClick: () => { copyDeviceCode(id, deviceCode.userCode); }, children: copiedCode === id ? t('deviceCodeCopied') : t('deviceCodeCopy') }), _jsx("button", { type: "button", style: styles.button, onClick: () => { window.open(deviceCode.verificationUrl, '_blank', 'noopener'); }, children: t('deviceCodeOpenPage') })] })] })), busy && deviceCode === undefined && (_jsxs("details", { style: styles.manual, children: [_jsx("summary", { children: t('manualSummary') }), _jsxs("div", { style: styles.manualRow, children: [_jsx("input", { style: styles.manualInput, value: manualDrafts[id], placeholder: t('manualPlaceholder'), onChange: event => setManualDrafts(prev => ({ ...prev, [id]: event.target.value })) }), _jsx("button", { type: "button", style: styles.button, onClick: () => { void submitManual(id); }, children: t('submit') })] })] }))] }, id));
             }), proxyOpen && (_jsx("div", { style: styles.modalOverlay, onClick: () => setProxyOpen(false), children: _jsxs("div", { style: styles.modal, onClick: event => event.stopPropagation(), children: [_jsxs("div", { style: styles.modalHeader, children: [_jsx("span", { style: styles.modalTitle, children: t('proxyDialogTitle') }), _jsx("button", { type: "button", style: { ...styles.button, marginLeft: 'auto' }, onClick: () => setProxyOpen(false), children: t('proxyDialogClose') })] }), _jsxs("label", { style: styles.proxyCheck, children: [_jsx("input", { type: "checkbox", checked: proxyEnabled, onChange: event => setProxyEnabled(event.target.checked) }), _jsx("span", { children: t('proxyEnabled') })] }), _jsxs("label", { style: styles.proxyField, children: [_jsx("span", { style: styles.proxyLabel, children: t('proxyUrl') }), _jsx("input", { style: styles.proxyInput, value: proxyUrl, placeholder: t('proxyUrlPlaceholder'), onChange: event => setProxyUrl(event.target.value) }), _jsx("p", { style: styles.proxyHint, children: t('proxyUrlHint') })] }), _jsxs("label", { style: styles.proxyField, children: [_jsx("span", { style: styles.proxyLabel, children: t('proxyUsername') }), _jsx("input", { style: styles.proxyInput, value: proxyUsername, placeholder: t('proxyUsernamePlaceholder'), onChange: event => setProxyUsername(event.target.value) })] }), _jsxs("div", { style: styles.proxyField, children: [_jsx("span", { style: styles.proxyLabel, children: t('proxyPassword') }), _jsx("input", { type: "password", style: styles.proxyInput, value: proxyPassword, placeholder: t('proxyPasswordPlaceholder'), onChange: event => setProxyPassword(event.target.value) }), _jsxs("label", { style: styles.proxyCheck, children: [_jsx("input", { type: "checkbox", checked: proxyClearPassword, onChange: event => setProxyClearPassword(event.target.checked) }), _jsx("span", { children: t('proxyClearPassword') })] })] }), _jsxs("label", { style: styles.proxyField, children: [_jsx("span", { style: styles.proxyLabel, children: t('proxyBypass') }), _jsx("input", { style: styles.proxyInput, value: proxyBypass, placeholder: t('proxyBypassPlaceholder'), onChange: event => setProxyBypass(event.target.value) }), _jsx("p", { style: styles.proxyHint, children: t('proxyBypassHint') })] }), _jsx("p", { style: styles.proxyHint, children: t('proxyNote') }), proxyMessage !== undefined && (_jsx("p", { style: { ...styles.proxyMessage, color: messageColor(proxyMessage.tone) }, children: proxyMessage.text })), proxyTestResult !== undefined && (_jsx("p", { style: {
                                 ...styles.proxyMessage,
                                 color: proxyTestResult.ok