dsh-subscriptions 0.1.0

package/lib/client/SubscriptionsSection.js

@@ -0,0 +1,544 @@
+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
+ * channel. Login state lives server-side; the page polls `status` only while
+ * a login attempt is busy, so an idle page never polls. All state is local
+ * React state — the page has no store.
+ *
+ * Every color resolves through a `--dsw-alias-*` design token (the ui-theme
+ * design-platform.css values flip under `body[data-ds-dark-theme]`), and
+ * every user-visible string goes through the locale-bound `t` of the
+ * 'settings.subscriptions' namespace. Buttons and inputs take the
+ * ModelsSection vocabulary minus hover rules, which inline styles cannot
+ * express.
+ */
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { en } from './locales.js';
+import { ProviderAccountManager } from './ProviderAccountManager.js';
+import { ExternalUsageCards } from './ExternalUsageCards.js';
+import { CursorCard } from './CursorCard.js';
+import { UsageBadgeDisplaySetting } from './UsageBadgeDisplaySetting.js';
+import { USAGE_BADGE_REFRESH_EVENT } from './usage-badge-preferences.js';
+import { subscriptionCardStyles as cardStyles } from './subscription-card-styles.js';
+import { callSubscriptionsAuth, SubscriptionsAuthError } from './subscriptions-rpc.js';
+export { callSubscriptionsAuth } from './subscriptions-rpc.js';
+/** 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;
+const CLIENT_VERSION_SOURCES = {
+    npm: 'clientVersionNpm',
+    local: 'clientVersionLocal',
+    fallback: 'clientVersionFallback',
+    config: 'clientVersionConfig',
+};
+/** Card display metadata, in page order (names are brand names, not translated). */
+const PROVIDERS = [
+    { id: 'codex', name: 'Codex (ChatGPT)' },
+    { id: 'claude', name: 'Claude' },
+    { id: 'grok', name: 'Grok (X Premium)' },
+    { id: 'copilot', name: 'GitHub Copilot' },
+    { id: 'antigravity', name: 'Google Antigravity' },
+];
+/** Human text of an action failure, SubscriptionsAuthError or not. */
+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.
+ * @param key - dictionary key.
+ * @param params - `{name}` template params.
+ * @returns the template with params substituted.
+ */
+function fallbackTranslate(key, params) {
+    let text = en[key];
+    for (const [name, value] of Object.entries(params ?? {})) {
+        text = text.replaceAll(`{${name}}`, String(value));
+    }
+    return text;
+}
+const styles = {
+    section: {
+        display: 'flex', flexDirection: 'column', gap: 12, maxWidth: 560,
+        color: 'var(--dsw-alias-label-primary)',
+    },
+    intro: { margin: 0, color: 'var(--dsw-alias-label-tertiary)', fontSize: 14, lineHeight: '22px' },
+    card: cardStyles.card,
+    cardHeader: cardStyles.header,
+    dot: cardStyles.dot,
+    name: cardStyles.name,
+    statusLine: cardStyles.status,
+    clientVersion: { fontSize: 12, lineHeight: '18px', color: 'var(--dsw-alias-label-tertiary)', fontVariantNumeric: 'tabular-nums' },
+    errorLine: cardStyles.error,
+    actions: cardStyles.actions,
+    button: cardStyles.button,
+    usage: cardStyles.usage,
+    usageHeader: cardStyles.usageHeader,
+    usageTitle: cardStyles.usageTitle,
+    usagePlan: cardStyles.usagePlan,
+    usageRefresh: cardStyles.usageRefresh,
+    usageRow: cardStyles.usageRow,
+    usageMeta: cardStyles.usageMeta,
+    accountRow: cardStyles.account,
+    accountHeader: cardStyles.accountHeader,
+    accountName: cardStyles.accountName,
+    starButton: {
+        border: 'none', background: 'transparent', padding: 0,
+        font: 'inherit', fontSize: 14, lineHeight: '20px', cursor: 'pointer',
+        color: 'var(--dsw-alias-state-warn-label)',
+    },
+    usageTrack: cardStyles.usageTrack,
+    usageFill: cardStyles.usageFill,
+    deviceCode: {
+        marginTop: 4, display: 'flex', flexDirection: 'column', gap: 6,
+        border: '1px solid var(--dsw-alias-border-l2)', borderRadius: 8,
+        padding: '10px 12px', background: 'var(--dsw-alias-bg-layer-1)',
+    },
+    deviceCodeText: {
+        fontFamily: 'monospace', fontSize: 18, lineHeight: '24px', letterSpacing: 2,
+        color: 'var(--dsw-alias-label-primary)', userSelect: 'all',
+    },
+    modalOverlay: {
+        position: 'fixed', inset: 0, zIndex: 1000,
+        display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16,
+        background: 'rgba(0, 0, 0, 0.45)',
+    },
+    modal: {
+        width: 460, maxWidth: '100%', maxHeight: '90vh', overflowY: 'auto',
+        boxSizing: 'border-box', display: 'flex', flexDirection: 'column', gap: 12,
+        padding: '16px 18px', borderRadius: 12,
+        background: 'var(--dsw-alias-bg-layer-1)', border: '1px solid var(--dsw-alias-border-l2)',
+    },
+    modalHeader: { display: 'flex', alignItems: 'center', gap: 8 },
+    modalTitle: { fontWeight: 600, fontSize: 15, lineHeight: '22px', color: 'var(--dsw-alias-label-primary)' },
+};
+/** Status dot color for one provider state. */
+function dotColor(status) {
+    if (status?.busy === true)
+        return 'var(--dsw-alias-state-warn-label)';
+    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.
+ * @param status - the provider's last reported state.
+ * @returns the localized status line.
+ */
+function statusText(t, status) {
+    if (status === undefined)
+        return t('checking');
+    if (status.busy)
+        return t('loginInProgress');
+    if (status.accounts.length > 0)
+        return t('loggedInCount', { count: status.accounts.length });
+    return t('notLoggedIn');
+}
+/**
+ * The CLI version a route presents, beside the provider name; nothing for
+ * routes without one. The source word (npm / local / built-in / configured)
+ * is the fix for upstream issue #108: a failed npm lookup must read as a
+ * fallback, never as a plan limit.
+ */
+export function clientVersionText(t, clientVersion) {
+    if (clientVersion === undefined)
+        return '';
+    return t('clientVersion', { version: clientVersion.version, source: t(CLIENT_VERSION_SOURCES[clientVersion.source]) });
+}
+/**
+ * Localized label of one usage window (kind, plus the model scope when named).
+ * @param t - section translate.
+ * @param window - the reported window.
+ * @returns e.g. "5-hour window" or "Weekly · Opus".
+ */
+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;
+}
+/** Bar fill color: success normally, warn from 80%, error from 95%. Shared with the composer badge. */
+export function usageBarColor(usedPercent) {
+    if (usedPercent >= 95)
+        return 'var(--dsw-alias-state-error-primary)';
+    if (usedPercent >= 80)
+        return 'var(--dsw-alias-state-warn-label)';
+    return '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}).
+ * @returns the section body, or a notice while the RPC face is absent.
+ */
+export function SubscriptionsSection(props) {
+    const { rpc } = props;
+    const t = props.t ?? fallbackTranslate;
+    const [statuses, setStatuses] = useState({});
+    const [errors, setErrors] = useState({});
+    const [manualDrafts, setManualDrafts] = useState({
+        codex: '', claude: '', grok: '', copilot: '', antigravity: '',
+    });
+    /** 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());
+    /** Accounts with a `usage` call in flight; guards the auto-fetch effect against re-entry. */
+    const usageInflightRef = useRef(new Set());
+    const usageRosterSignatureRef = useRef();
+    const [managedProvider, setManagedProvider] = useState();
+    const setProviderError = useCallback((provider, message) => {
+        if (!mountedRef.current)
+            return;
+        setErrors((prev) => {
+            const next = { ...prev };
+            if (message === undefined)
+                delete next[provider];
+            else
+                next[provider] = message;
+            return next;
+        });
+    }, []);
+    const stopPolling = useCallback((provider) => {
+        const poller = pollersRef.current.get(provider);
+        if (poller !== undefined) {
+            clearInterval(poller);
+            pollersRef.current.delete(provider);
+        }
+    }, []);
+    /** Refetch every provider's status; stop a provider's poller once its attempt settles. */
+    const refresh = useCallback(async () => {
+        if (rpc === undefined)
+            return;
+        let response;
+        try {
+            response = await callSubscriptionsAuth(rpc, 'status', {});
+        }
+        catch (error) {
+            // A failed poll must not kill the page; busy providers keep polling and
+            // the action paths report their own errors. But staying silent turns a
+            // persistent failure into an endless "Checking…" — show it instead.
+            const message = error instanceof Error ? error.message : String(error);
+            for (const { id } of PROVIDERS)
+                setProviderError(id, message);
+            return;
+        }
+        if (!mountedRef.current)
+            return;
+        setStatuses(response.providers);
+        const signature = PROVIDERS.map(({ id }) => `${id}:${response.providers[id].accounts
+            .map(account => `${account.key}:${account.isDefault}`).join(',')}`).join(';');
+        if (signature !== usageRosterSignatureRef.current) {
+            usageRosterSignatureRef.current = signature;
+            window.dispatchEvent(new Event(USAGE_BADGE_REFRESH_EVENT));
+        }
+        // The poll recovered: drop any error line a previous failed poll left.
+        for (const { id } of PROVIDERS)
+            setProviderError(id, undefined);
+        for (const { id } of PROVIDERS) {
+            const status = response.providers[id];
+            if (status.accounts.length > 0 || !status.busy) {
+                stopPolling(id);
+                // The attempt settled (success, timeout, or cancel): drop the code card.
+                setDeviceCodes((prev) => {
+                    if (prev[id] === undefined)
+                        return prev;
+                    const next = { ...prev };
+                    delete next[id];
+                    return next;
+                });
+            }
+        }
+    }, [rpc, stopPolling, setProviderError]);
+    const startPolling = useCallback((provider) => {
+        if (pollersRef.current.has(provider))
+            return;
+        pollersRef.current.set(provider, setInterval(() => { void refresh(); }, POLL_INTERVAL_MS));
+    }, [refresh]);
+    // Initial load; every busy provider (e.g. an attempt started before a page
+    // reload) resumes polling. Teardown clears pollers and the mounted guard.
+    useEffect(() => {
+        mountedRef.current = true;
+        void refresh().then(() => {
+            if (!mountedRef.current)
+                return;
+            setStatuses((current) => {
+                for (const { id } of PROVIDERS) {
+                    if (current[id]?.busy === true)
+                        startPolling(id);
+                }
+                return current;
+            });
+        });
+        return () => {
+            mountedRef.current = false;
+            for (const poller of pollersRef.current.values())
+                clearInterval(poller);
+            pollersRef.current.clear();
+        };
+    }, [refresh, startPolling]);
+    const loadUsage = useCallback(async (provider, account, force = false) => {
+        const key = `${provider}:${account}`;
+        if (rpc === undefined || usageInflightRef.current.has(key))
+            return;
+        usageInflightRef.current.add(key);
+        setUsageLoading(prev => ({ ...prev, [key]: true }));
+        try {
+            const usage = await callSubscriptionsAuth(rpc, 'usage', { provider, account, ...force ? { force: true } : {} });
+            if (!mountedRef.current)
+                return;
+            setUsages(prev => ({ ...prev, [key]: usage }));
+            window.dispatchEvent(new Event(USAGE_BADGE_REFRESH_EVENT));
+            setUsageErrors((prev) => {
+                const next = { ...prev };
+                delete next[key];
+                return next;
+            });
+        }
+        catch (error) {
+            if (mountedRef.current)
+                setUsageErrors(prev => ({ ...prev, [key]: messageOf(error) }));
+        }
+        finally {
+            usageInflightRef.current.delete(key);
+            if (mountedRef.current)
+                setUsageLoading(prev => ({ ...prev, [key]: false }));
+        }
+    }, [rpc]);
+    // 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) {
+            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);
+            }
+        }
+        setUsages(prev => dropStale(prev, live));
+        setUsageErrors(prev => dropStale(prev, live));
+    }, [statuses, usages, usageErrors, loadUsage]);
+    const login = useCallback(async (provider, method) => {
+        if (rpc === undefined)
+            return;
+        setProviderError(provider, undefined);
+        try {
+            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();
+                return;
+            }
+            if (typeof response.authorizeUrl !== 'string') {
+                throw new SubscriptionsAuthError(t('loginMissingUrl'));
+            }
+            if (!mountedRef.current)
+                return;
+            // Optimistic busy so Cancel and the manual fallback appear before the first poll tick.
+            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.
+                setDeviceCodes(prev => ({ ...prev, [provider]: { userCode: response.userCode, verificationUrl: response.authorizeUrl } }));
+            }
+            else {
+                window.open(response.authorizeUrl, '_blank', 'noopener');
+            }
+            startPolling(provider);
+        }
+        catch (error) {
+            setProviderError(provider, messageOf(error));
+        }
+    }, [rpc, t, setProviderError, startPolling]);
+    const cancel = useCallback(async (provider) => {
+        if (rpc === undefined)
+            return;
+        stopPolling(provider);
+        try {
+            await callSubscriptionsAuth(rpc, 'cancel', { provider });
+        }
+        catch (error) {
+            setProviderError(provider, messageOf(error));
+        }
+        await refresh();
+    }, [rpc, stopPolling, setProviderError, refresh]);
+    const submitManual = useCallback(async (provider) => {
+        if (rpc === undefined)
+            return;
+        const input = manualDrafts[provider].trim();
+        if (input === '')
+            return;
+        setProviderError(provider, undefined);
+        try {
+            await callSubscriptionsAuth(rpc, 'manual', { provider, input });
+            if (mountedRef.current)
+                setManualDrafts(prev => ({ ...prev, [provider]: '' }));
+        }
+        catch (error) {
+            setProviderError(provider, messageOf(error));
+        }
+        await refresh();
+    }, [rpc, manualDrafts, setProviderError, refresh]);
+    const logout = useCallback(async (provider, account, display, name) => {
+        if (rpc === undefined)
+            return;
+        if (!window.confirm(t('logoutAccountConfirm', { provider: name, account: display })))
+            return;
+        setProviderError(provider, undefined);
+        try {
+            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)
+                return;
+            setCopiedCode(provider);
+            setTimeout(() => {
+                if (mountedRef.current) {
+                    setCopiedCode(current => current === provider ? undefined : current);
+                }
+            }, 1500);
+        }).catch(() => undefined);
+    }, []);
+    if (rpc === undefined) {
+        return _jsx("p", { style: styles.intro, children: t('unavailable') });
+    }
+    return (_jsxs("div", { style: styles.section, children: [_jsx("p", { style: styles.intro, children: t('intro') }), _jsx(UsageBadgeDisplaySetting, { t: t }), PROVIDERS.map(({ id, name }) => {
+                const status = statuses[id];
+                const busy = status?.busy === true;
+                const deviceCode = deviceCodes[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 }), status?.clientVersion !== undefined && (_jsx("span", { style: styles.clientVersion, title: t('clientVersionHint'), children: clientVersionText(t, status.clientVersion) }))] }), _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') })), _jsx("button", { type: "button", style: styles.button, "aria-haspopup": "dialog", onClick: () => setManagedProvider({ id, name }), children: t('accountsManage') }), 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') })), 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));
+            }), _jsx(CursorCard, { rpc: rpc, t: t }), _jsx(ExternalUsageCards, { rpc: rpc, t: t }), managedProvider && _jsx(ProviderAccountManager, { provider: managedProvider.id, name: managedProvider.name, rpc: rpc, t: t, onClose: () => setManagedProvider(undefined) })] }));
+}

package/lib/client/UsageBadgeDisplaySetting.d.ts

@@ -0,0 +1,7 @@
+import type { SubscriptionsKey } from './locales.js';
+type Translate = (key: SubscriptionsKey, params?: Record<string, unknown>) => string;
+/** Browser-local display preference; never changes provider or account settings. */
+export declare function UsageBadgeDisplaySetting({ t }: {
+    t: Translate;
+}): import("react").JSX.Element;
+export {};

package/lib/client/UsageBadgeDisplaySetting.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { setUsageBadgeMode, useUsageBadgeMode } from './usage-badge-preferences.js';
+/** Browser-local display preference; never changes provider or account settings. */
+export function UsageBadgeDisplaySetting({ t }) {
+    const mode = useUsageBadgeMode();
+    const [failed, setFailed] = useState(false);
+    return (_jsxs("div", { style: styles.card, children: [_jsxs("label", { style: styles.field, children: [_jsx("span", { children: t('usageBadgeDisplay') }), _jsxs("select", { style: styles.select, "aria-label": t('usageBadgeDisplay'), value: mode, onChange: event => {
+                            const value = event.currentTarget.value;
+                            if (value !== 'recent' && value !== 'hidden')
+                                return;
+                            try {
+                                setUsageBadgeMode(value);
+                                setFailed(false);
+                            }
+                            catch (error) {
+                                if (!(error instanceof DOMException) || !['SecurityError', 'QuotaExceededError'].includes(error.name))
+                                    throw error;
+                                setFailed(true);
+                            }
+                        }, children: [_jsx("option", { value: "recent", children: t('usageBadgeDisplayRecent') }), _jsx("option", { value: "hidden", children: t('usageBadgeDisplayHidden') })] })] }), _jsx("p", { style: styles.hint, children: t('usageBadgeDisplayHint') }), failed && _jsx("p", { role: "alert", style: { ...styles.hint, color: 'var(--dsw-alias-state-error-primary)' }, children: t('usageBadgeDisplaySaveFailed') })] }));
+}
+const styles = {
+    card: {
+        border: '1px solid var(--dsw-alias-border-l2)', borderRadius: 12,
+        padding: '12px 14px', display: 'flex', flexDirection: 'column', gap: 6,
+    },
+    field: { display: 'flex', flexDirection: 'column', gap: 4, fontSize: 14, lineHeight: '22px' },
+    select: {
+        height: 32, width: '100%', boxSizing: 'border-box',
+        border: '1px solid var(--dsw-alias-border-l2)', borderRadius: 8,
+        padding: '0 10px', font: 'inherit',
+        background: 'var(--dsw-alias-bg-layer-1)', color: 'var(--dsw-alias-label-primary)',
+    },
+    hint: { margin: 0, fontSize: 12, lineHeight: '18px', color: 'var(--dsw-alias-label-tertiary)' },
+};

package/lib/client/VideoGenerateToolview.d.ts

@@ -0,0 +1,42 @@
+import type { ConnectionHandle } from '@deepseek-ai/dsh-api-remotes/client';
+import type { ToolCallBlock } from '@deepseek-ai/dsh-client-ui-conversation/client';
+import type { SubscriptionsKey } from './locales.js';
+/** Mirror of ui-tool's ToolCallOwnerProps (see ImageGenerateToolview). */
+interface ToolCallOwnerProps {
+    callId: string;
+    toolName: string;
+    block: ToolCallBlock;
+    cwd?: string | undefined;
+    openFile: (path: string) => void;
+    inspect?: (() => void) | undefined;
+}
+/** Decoded video bytes as the node half's `video` endpoint answers them. */
+export interface VideoBytes {
+    mediaType: string;
+    dataBase64: string;
+}
+/** Injected dependencies of {@link VideoGenerateToolview} (slot `inject`). */
+export interface VideoGenerateToolviewInjected {
+    /** Loads one generated video's bytes by bare file name. */
+    loadVideo: (name: string) => Promise<VideoBytes>;
+}
+/**
+ * Props delivered by the toolview outlet: the owner share plus the inject
+ * face and the framework locale seat, spread flat.
+ */
+export type VideoGenerateToolviewProps = Partial<ToolCallOwnerProps> & Partial<VideoGenerateToolviewInjected> & {
+    t?: ((key: SubscriptionsKey, params?: Record<string, unknown>) => string) | undefined;
+};
+/**
+ * Build the video loader over the `/subscriptions-auth` `video` endpoint.
+ * @param rpc - Connection RPC caller.
+ * @returns loader resolving a bare file name to the decoded bytes.
+ */
+export declare function createVideoLoader(rpc: ConnectionHandle['rpc']): (name: string) => Promise<VideoBytes>;
+/**
+ * The `video_generate` keyed toolview component.
+ * @param props - owner share, inject face, and locale seat (spread flat).
+ * @returns the call row plus, once settled, the player / text / error body.
+ */
+export declare function VideoGenerateToolview(props: VideoGenerateToolviewProps): import("react").JSX.Element | null;
+export {};