dsh-plugin-subscriptions 0.5.1 → 0.5.3

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
@@ -54,6 +54,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.
@@ -78,6 +88,10 @@ const styles = {
         border: '1px solid var(--dsw-alias-border-l2)', borderRadius: 12,
         padding: '12px 14px', display: 'flex', flexDirection: 'column', gap: 6,
     },
+    proxyCard: {
+        padding: '12px 14px', display: 'flex', flexDirection: 'column', gap: 6,
+    },
+    separator: { borderTop: '1px solid var(--dsw-alias-border-l2)' },
     cardHeader: { display: 'flex', alignItems: 'center', gap: 8 },
     dot: { width: 8, height: 8, borderRadius: '50%', flexShrink: 0 },
     name: { fontWeight: 500, fontSize: 14, lineHeight: '22px', color: 'var(--dsw-alias-label-primary)' },
@@ -110,6 +124,18 @@ 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)',
@@ -132,12 +158,42 @@ const styles = {
         fontFamily: 'monospace', fontSize: 18, lineHeight: '24px', letterSpacing: 2,
         color: 'var(--dsw-alias-label-primary)', userSelect: 'all',
     },
+    proxyField: { display: 'flex', flexDirection: 'column', gap: 4 },
+    proxyLabel: { fontSize: 12, lineHeight: '18px', color: 'var(--dsw-alias-label-secondary)' },
+    proxyInput: {
+        height: 32, width: '100%', boxSizing: 'border-box',
+        border: '1px solid var(--dsw-alias-border-l2)', borderRadius: 8,
+        padding: '0 10px', font: 'inherit', fontSize: 14, lineHeight: '22px',
+        background: 'var(--dsw-alias-bg-layer-1)', color: 'var(--dsw-alias-label-primary)',
+    },
+    proxyHint: {
+        margin: 0, fontSize: 12, lineHeight: '18px', color: 'var(--dsw-alias-label-tertiary)',
+    },
+    proxyCheck: {
+        display: 'flex', alignItems: 'center', gap: 8,
+        fontSize: 13, lineHeight: '20px', color: 'var(--dsw-alias-label-primary)', cursor: 'pointer',
+    },
+    proxyMessage: { margin: 0, fontSize: 12, lineHeight: '18px' },
+    proxyActions: { display: 'flex', gap: 8, alignItems: 'center', justifyContent: 'flex-end', marginTop: 2 },
+    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?.loggedIn === true)
+    if ((status?.accounts.length ?? 0) > 0)
         return 'var(--dsw-alias-state-success-primary)';
     return 'var(--dsw-alias-label-dimmed)';
 }
@@ -152,20 +208,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');
 }
 /**
@@ -188,6 +232,24 @@ function usageBarColor(usedPercent) {
         return 'var(--dsw-alias-state-warn-label)';
     return 'var(--dsw-alias-state-success-primary)';
 }
+/** One-line status text of the proxy config card. */
+function proxyStatusText(t, proxy, loadError) {
+    if (loadError !== undefined)
+        return t('proxyLoadFailed', { message: loadError });
+    if (proxy === undefined)
+        return t('proxyLoading');
+    if (proxy.error !== undefined)
+        return t('proxyStatusError', { message: proxy.error });
+    if (proxy.enabled)
+        return t('proxyStatusEnabled', { url: proxy.url });
+    return t('proxyStatusNone');
+}
+/** Feedback-line color of the proxy dialog. */
+function messageColor(tone) {
+    return tone === 'error'
+        ? 'var(--dsw-alias-state-error-primary)'
+        : 'var(--dsw-alias-state-success-primary)';
+}
 /**
  * The Subscriptions settings page component.
  * @param props - the slot inject face ({@link SubscriptionsSectionInjected}).
@@ -204,13 +266,29 @@ 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);
+    const [proxyLoadError, setProxyLoadError] = useState(undefined);
+    /** Proxy dialog state (draft fields; the password never pre-fills). */
+    const [proxyOpen, setProxyOpen] = useState(false);
+    const [proxyEnabled, setProxyEnabled] = useState(false);
+    const [proxyUrl, setProxyUrl] = useState('');
+    const [proxyUsername, setProxyUsername] = useState('');
+    const [proxyPassword, setProxyPassword] = useState('');
+    const [proxyClearPassword, setProxyClearPassword] = useState(false);
+    const [proxyBypass, setProxyBypass] = useState('');
+    const [proxySaving, setProxySaving] = useState(false);
+    const [proxyTesting, setProxyTesting] = useState(false);
+    const [proxyMessage, setProxyMessage] = useState(undefined);
+    const [proxyTestResult, setProxyTestResult] = useState(undefined);
     const setProviderError = useCallback((provider, message) => {
         if (!mountedRef.current)
             return;
@@ -248,7 +326,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) => {
@@ -288,64 +366,58 @@ 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) => {
+        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 });
             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);
-            }
-            else if (usages[id] !== undefined || usageErrors[id] !== undefined) {
-                setUsages((prev) => {
-                    const next = { ...prev };
-                    delete next[id];
-                    return next;
-                });
-                setUsageErrors((prev) => {
-                    const next = { ...prev };
-                    delete next[id];
-                    return next;
-                });
+            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) => {
+    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();
@@ -357,7 +429,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.
@@ -401,20 +476,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)
@@ -427,22 +514,131 @@ export function SubscriptionsSection(props) {
             }, 1500);
         }).catch(() => undefined);
     }, []);
+    // Proxy configuration: load once on mount; the dialog drives proxySet/proxyTest.
+    useEffect(() => {
+        if (rpc === undefined)
+            return;
+        let alive = true;
+        void callSubscriptionsAuth(rpc, 'proxyGet', {}).then((view) => {
+            if (!alive)
+                return;
+            setProxy(view);
+            setProxyLoadError(undefined);
+        }).catch((error) => {
+            if (alive)
+                setProxyLoadError(messageOf(error));
+        });
+        return () => { alive = false; };
+    }, [rpc]);
+    useEffect(() => {
+        if (!proxyOpen)
+            return;
+        const onKey = (event) => {
+            if (event.key === 'Escape')
+                setProxyOpen(false);
+        };
+        window.addEventListener('keydown', onKey);
+        return () => window.removeEventListener('keydown', onKey);
+    }, [proxyOpen]);
+    const openProxyDialog = useCallback(() => {
+        if (proxy === undefined)
+            return;
+        setProxyEnabled(proxy.enabled);
+        setProxyUrl(proxy.url);
+        setProxyUsername(proxy.username ?? '');
+        setProxyPassword('');
+        setProxyClearPassword(false);
+        setProxyBypass(proxy.bypass.join(', '));
+        setProxyMessage(undefined);
+        setProxyTestResult(undefined);
+        setProxyOpen(true);
+    }, [proxy]);
+    const saveProxy = useCallback(async () => {
+        if (rpc === undefined)
+            return;
+        setProxySaving(true);
+        setProxyMessage(undefined);
+        try {
+            const view = await callSubscriptionsAuth(rpc, 'proxySet', {
+                enabled: proxyEnabled,
+                url: proxyUrl.trim(),
+                username: proxyUsername,
+                ...proxyClearPassword ? { password: null } : proxyPassword !== '' ? { password: proxyPassword } : {},
+                bypass: proxyBypass.split(/[,\n]/).map(entry => entry.trim()).filter(entry => entry !== ''),
+            });
+            setProxy(view);
+            setProxyLoadError(undefined);
+            setProxyMessage({ tone: 'success', text: t('proxySaved') });
+            setProxyOpen(false);
+        }
+        catch (error) {
+            setProxyMessage({ tone: 'error', text: t('proxySaveFailed', { message: messageOf(error) }) });
+        }
+        finally {
+            setProxySaving(false);
+        }
+    }, [rpc, proxyEnabled, proxyUrl, proxyUsername, proxyPassword, proxyClearPassword, proxyBypass, t]);
+    const testProxy = useCallback(async () => {
+        if (rpc === undefined || proxyTesting)
+            return;
+        setProxyTesting(true);
+        setProxyTestResult(undefined);
+        try {
+            // Test the dialog's current inputs (they do not need to be saved first);
+            // the host builds a throwaway agent for the probe.
+            setProxyTestResult(await callSubscriptionsAuth(rpc, 'proxyTest', {
+                proxy: {
+                    url: proxyUrl.trim(),
+                    ...proxyUsername.trim() !== '' ? { username: proxyUsername.trim() } : {},
+                    ...proxyPassword !== '' ? { password: proxyPassword } : {},
+                },
+            }));
+        }
+        catch (error) {
+            setProxyTestResult({ ok: false, viaProxy: false, error: messageOf(error) });
+        }
+        finally {
+            setProxyTesting(false);
+        }
+    }, [rpc, proxyTesting, proxyUrl, proxyUsername, proxyPassword]);
     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') }), PROVIDERS.map(({ id, name }) => {
+    return (_jsxs("div", { style: styles.section, children: [_jsx("p", { style: styles.intro, children: t('intro') }), _jsxs("div", { style: styles.proxyCard, children: [_jsxs("div", { style: styles.cardHeader, children: [_jsx("span", { style: {
+                                    ...styles.dot,
+                                    background: proxy?.enabled === true
+                                        ? 'var(--dsw-alias-state-success-primary)'
+                                        : 'var(--dsw-alias-label-dimmed)',
+                                } }), _jsx("span", { style: styles.name, children: t('proxyTitle') }), _jsx("button", { type: "button", style: { ...styles.button, marginLeft: 'auto', flexShrink: 0 }, onClick: openProxyDialog, children: t('proxyConfigure') })] }), _jsx("p", { style: styles.statusLine, children: proxyStatusText(t, proxy, proxyLoadError) })] }), _jsx("div", { style: styles.separator }), PROVIDERS.map(({ id, name }) => {
                 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); }, 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') })), 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
+                                    ? 'var(--dsw-alias-state-success-primary)'
+                                    : 'var(--dsw-alias-state-error-primary)',
+                            }, children: proxyTestResult.ok
+                                ? (proxyTestResult.viaProxy
+                                    ? t('proxyTestOk', { status: String(proxyTestResult.status), ms: String(proxyTestResult.latencyMs) })
+                                    : t('proxyTestOkDirect', { status: String(proxyTestResult.status), ms: String(proxyTestResult.latencyMs) }))
+                                : t('proxyTestFail', { message: proxyTestResult.error ?? '' }) })), _jsxs("div", { style: styles.proxyActions, children: [_jsx("button", { type: "button", style: { ...styles.button, ...proxyTesting ? { opacity: 0.5, cursor: 'default' } : {} }, disabled: proxyTesting, onClick: () => { void testProxy(); }, children: proxyTesting ? t('proxyTesting') : t('proxyTest') }), _jsx("button", { type: "button", style: { ...styles.button, ...proxySaving ? { opacity: 0.5, cursor: 'default' } : {} }, disabled: proxySaving, onClick: () => { void saveProxy(); }, children: proxySaving ? t('proxySaving') : t('proxySave') }), _jsx("button", { type: "button", style: styles.button, onClick: () => setProxyOpen(false), children: t('proxyCancel') })] })] }) }))] }));
 }

package/lib/client/index.js

@@ -22,6 +22,17 @@ export const inject = ['slots', 'connection', 'locale'];
  */
 export function apply(ctx) {
     ctx.effect(() => ctx.locale.register(NS, { zh, en }), 'dsh-plugin-subscriptions: copy dictionaries');
+    // Settings-shell nudge: the panel (nav title + header row + section body)
+    // sits flush against the panel's top edge; push it down a little to leave
+    // breathing room. Scoped by the settings panel's own dialog role + nav child
+    // so other aria-modal dialogs (e.g. the attachment lightbox) are untouched.
+    ctx.effect(() => {
+        const style = document.createElement('style');
+        style.setAttribute('data-plugin', 'dsh-plugin-subscriptions');
+        style.textContent = 'div[role="dialog"][aria-modal="true"]:has(> nav) { padding-top: 14px; }';
+        document.head.appendChild(style);
+        return () => style.remove();
+    }, 'dsh-plugin-subscriptions: settings panel breathing room');
     // The client-runtime Context merge types `connection` as the host handle;
     // in the browser shell the same key holds the full client ConnectionHandle.
     const connection = ctx.get('connection');

package/lib/client/locales.d.ts

@@ -6,15 +6,19 @@ export declare const en: {
     unavailable: string;
     checking: string;
     loginInProgress: string;
-    loggedIn: string;
-    loggedInAccount: string;
-    loggedInExpires: string;
-    loggedInAccountExpires: string;
     notLoggedIn: string;
+    loggedInCount: string;
+    accountExpires: string;
+    defaultBadge: string;
+    setDefault: string;
+    addAccount: string;
+    addAccountOAuth: string;
+    addAccountKeychain: string;
+    addAccountHint: string;
     login: string;
     cancel: string;
     logout: string;
-    logoutConfirm: string;
+    logoutAccountConfirm: string;
     manualSummary: string;
     manualPlaceholder: string;
     submit: string;
@@ -51,6 +55,38 @@ export declare const en: {
     speedFastDescription: string;
     commandFast: string;
     commandFastUnavailable: string;
+    proxyTitle: string;
+    proxyStatusNone: string;
+    proxyStatusEnabled: string;
+    proxyStatusError: string;
+    proxyConfigure: string;
+    proxyDialogTitle: string;
+    proxyDialogClose: string;
+    proxyEnabled: string;
+    proxyUrl: string;
+    proxyUrlPlaceholder: string;
+    proxyUrlHint: string;
+    proxyUsername: string;
+    proxyUsernamePlaceholder: string;
+    proxyPassword: string;
+    proxyPasswordPlaceholder: string;
+    proxyClearPassword: string;
+    proxyBypass: string;
+    proxyBypassPlaceholder: string;
+    proxyBypassHint: string;
+    proxyTest: string;
+    proxyTesting: string;
+    proxyTestOk: string;
+    proxyTestOkDirect: string;
+    proxyTestFail: string;
+    proxySave: string;
+    proxyCancel: string;
+    proxySaving: string;
+    proxyLoading: string;
+    proxyLoadFailed: string;
+    proxySaved: string;
+    proxySaveFailed: string;
+    proxyNote: string;
 };
 /** zh strings, one per {@link en} key. */
 export declare const zh: {
@@ -59,15 +95,19 @@ export declare const zh: {
     unavailable: string;
     checking: string;
     loginInProgress: string;
-    loggedIn: string;
-    loggedInAccount: string;
-    loggedInExpires: string;
-    loggedInAccountExpires: string;
     notLoggedIn: string;
+    loggedInCount: string;
+    accountExpires: string;
+    defaultBadge: string;
+    setDefault: string;
+    addAccount: string;
+    addAccountOAuth: string;
+    addAccountKeychain: string;
+    addAccountHint: string;
     login: string;
     cancel: string;
     logout: string;
-    logoutConfirm: string;
+    logoutAccountConfirm: string;
     manualSummary: string;
     manualPlaceholder: string;
     submit: string;
@@ -104,6 +144,38 @@ export declare const zh: {
     speedFastDescription: string;
     commandFast: string;
     commandFastUnavailable: string;
+    proxyTitle: string;
+    proxyStatusNone: string;
+    proxyStatusEnabled: string;
+    proxyStatusError: string;
+    proxyConfigure: string;
+    proxyDialogTitle: string;
+    proxyDialogClose: string;
+    proxyEnabled: string;
+    proxyUrl: string;
+    proxyUrlPlaceholder: string;
+    proxyUrlHint: string;
+    proxyUsername: string;
+    proxyUsernamePlaceholder: string;
+    proxyPassword: string;
+    proxyPasswordPlaceholder: string;
+    proxyClearPassword: string;
+    proxyBypass: string;
+    proxyBypassPlaceholder: string;
+    proxyBypassHint: string;
+    proxyTest: string;
+    proxyTesting: string;
+    proxyTestOk: string;
+    proxyTestOkDirect: string;
+    proxyTestFail: string;
+    proxySave: string;
+    proxyCancel: string;
+    proxySaving: string;
+    proxyLoading: string;
+    proxyLoadFailed: string;
+    proxySaved: string;
+    proxySaveFailed: string;
+    proxyNote: string;
 };
 /** The Subscriptions namespace key union (en is the key-set source of truth). */
 export type SubscriptionsKey = keyof typeof en;