dsh-subscriptions 0.2.0 → 0.2.2

package/lib/client/ExternalUsageCards.js

@@ -26,13 +26,17 @@ function errorText(error) {
 export function externalUsageWindowLabel(t, window) {
     const named = window.scope !== undefined && window.scope !== '';
     if (window.kind === 'other') {
-        return window.scope === 'Monthly' ? t('usageMonthly') : named ? window.scope : t('usageWindow');
+        return window.scope === 'Monthly'
+            ? t('usageMonthly')
+            : named
+                ? window.scope
+                : t('usageWindow');
     }
     const base = window.kind === 'session' ? t('usageSession') : t('usageWeekly');
     return named ? `${base} · ${window.scope}` : base;
 }
 /** Quota cards for API-key providers already available through DSH itself. */
-export function ExternalUsageCards({ rpc, t }) {
+export function ExternalUsageCards({ rpc, t, }) {
     const [status, setStatus] = useState();
     const [statusError, setStatusError] = useState();
     const [usage, setUsage] = useState({});
@@ -40,20 +44,23 @@ export function ExternalUsageCards({ rpc, t }) {
     const [errors, setErrors] = useState({});
     const [loading, setLoading] = useState({});
     const refresh = useCallback(async (source) => {
-        setLoading(prev => ({ ...prev, [source]: true }));
+        setLoading((prev) => ({ ...prev, [source]: true }));
         try {
             const value = await callSubscriptionsAuth(rpc, 'externalUsage', { source });
-            setUsage(prev => ({ ...prev, [source]: value }));
+            setUsage((prev) => ({ ...prev, [source]: value }));
             // Prefer the server's observation time; a cached reading must not look fresh.
-            setObservedAt(prev => ({ ...prev, [source]: value.observedAt ?? Date.now() }));
-            setErrors(prev => ({ ...prev, [source]: undefined }));
+            setObservedAt((prev) => ({
+                ...prev,
+                [source]: value.observedAt ?? Date.now(),
+            }));
+            setErrors((prev) => ({ ...prev, [source]: undefined }));
             window.dispatchEvent(new Event(USAGE_BADGE_REFRESH_EVENT));
         }
         catch (error) {
-            setErrors(prev => ({ ...prev, [source]: errorText(error) }));
+            setErrors((prev) => ({ ...prev, [source]: errorText(error) }));
         }
         finally {
-            setLoading(prev => ({ ...prev, [source]: false }));
+            setLoading((prev) => ({ ...prev, [source]: false }));
         }
     }, [rpc]);
     const refreshStatus = useCallback(async () => {
@@ -72,16 +79,30 @@ export function ExternalUsageCards({ rpc, t }) {
     useEffect(() => {
         void refreshStatus();
     }, [refreshStatus]);
-    return _jsx(_Fragment, { children: SOURCES.map(({ id, name, ref }) => {
+    return (_jsx(_Fragment, { children: SOURCES.map(({ id, name, ref }) => {
             const configured = status?.[id]?.configured === true;
             const snapshot = usage[id];
-            return _jsxs("div", { style: styles.card, children: [_jsxs("div", { style: styles.header, children: [_jsx("span", { style: { ...styles.dot, background: configured
-                                        ? 'var(--dsw-alias-state-success-primary)' : 'var(--dsw-alias-label-dimmed)' } }), _jsx("span", { style: styles.name, children: name })] }), !(status === undefined && statusError !== undefined) && _jsx("p", { style: styles.status, children: status === undefined ? t('checking')
-                            : configured ? t('externalUsageConnected') : t('externalUsageNotConfigured') }), statusError !== undefined && _jsx("p", { style: styles.error, children: t('externalUsageUnavailable', { message: statusError }) }), status !== undefined && !configured && _jsx("p", { style: styles.status, children: t('externalUsageConfigure', { ref }) }), configured && _jsxs("div", { style: styles.account, children: [_jsxs("div", { style: styles.accountHeader, children: [_jsx("span", { style: styles.defaultStar, title: t('defaultBadge'), children: "\u2605" }), _jsx("span", { style: styles.accountName, children: t('externalUsageApiKey') })] }), _jsxs("div", { style: styles.usage, children: [_jsxs("div", { style: styles.usageHeader, children: [_jsx("span", { style: styles.usageTitle, children: t('usageTitle') }), snapshot?.plan !== undefined && _jsx("span", { style: styles.usagePlan, children: t('usagePlan', { plan: snapshot.plan }) }), _jsx("button", { type: "button", style: styles.usageRefresh, disabled: loading[id] === true, onClick: () => { void refresh(id); }, children: t('usageRefresh') })] }), loading[id] === true && snapshot === undefined && _jsx("p", { style: styles.status, children: t('usageLoading') }), errors[id] !== undefined && _jsx("p", { style: styles.error, children: t('usageError', { message: errors[id] }) }), snapshot !== undefined && snapshot.supported === false && _jsx("p", { style: styles.status, children: t('usageUnsupported') }), snapshot?.windows?.length === 0 && _jsx("p", { style: styles.status, children: t('usageEmpty') }), snapshot?.windows?.map((window, index) => {
+            return (_jsxs("div", { style: styles.card, children: [_jsxs("div", { style: styles.header, children: [_jsx("span", { style: {
+                                    ...styles.dot,
+                                    background: configured
+                                        ? 'var(--dsw-alias-state-success-primary)'
+                                        : 'var(--dsw-alias-label-dimmed)',
+                                } }), _jsx("span", { style: styles.name, children: name })] }), !(status === undefined && statusError !== undefined) && (_jsx("p", { style: styles.status, children: status === undefined
+                            ? t('checking')
+                            : configured
+                                ? t('externalUsageConnected')
+                                : t('externalUsageNotConfigured') })), statusError !== undefined && (_jsx("p", { style: styles.error, children: t('externalUsageUnavailable', { message: statusError }) })), status !== undefined && !configured && (_jsx("p", { style: styles.status, children: t('externalUsageConfigure', { ref }) })), configured && (_jsxs("div", { style: styles.account, children: [_jsxs("div", { style: styles.accountHeader, children: [_jsx("span", { style: styles.defaultStar, title: t('defaultBadge'), children: "\u2605" }), _jsx("span", { style: styles.accountName, children: t('externalUsageApiKey') })] }), _jsxs("div", { style: styles.usage, children: [_jsxs("div", { style: styles.usageHeader, children: [_jsx("span", { style: styles.usageTitle, children: t('usageTitle') }), snapshot?.plan !== undefined && (_jsx("span", { style: styles.usagePlan, children: t('usagePlan', { plan: snapshot.plan }) })), _jsx("button", { type: "button", style: styles.usageRefresh, disabled: loading[id] === true, onClick: () => {
+                                                    void refresh(id);
+                                                }, children: t('usageRefresh') })] }), loading[id] === true && snapshot === undefined && (_jsx("p", { style: styles.status, children: t('usageLoading') })), errors[id] !== undefined && (_jsx("p", { style: styles.error, children: t('usageError', { message: errors[id] }) })), snapshot !== undefined && snapshot.supported === false && (_jsx("p", { style: styles.status, children: t('usageUnsupported') })), snapshot?.windows?.length === 0 && (_jsx("p", { style: styles.status, children: t('usageEmpty') })), snapshot?.windows?.map((window, index) => {
                                         const percent = displayUsedPercent(window.usedPercent);
                                         const label = externalUsageWindowLabel(t, window);
-                                        return _jsxs("div", { style: styles.usageRow, children: [_jsxs("div", { style: styles.usageMeta, children: [_jsx("span", { children: label }), _jsxs("span", { children: [percent === undefined ? t('usageMeterInvalid') : `${percent}%`, window.resetsAt === undefined ? ''
-                                                                    : ` · ${t('usageResets', { date: new Date(window.resetsAt).toLocaleString() })}`] })] }), _jsx(UsageMeter, { window: window, t: t, observedAt: observedAt[id], stale: errors[id] !== undefined || snapshot?.stale === true })] }, index);
-                                    })] })] }), !configured && _jsx("div", { style: styles.actions, children: _jsx("button", { type: "button", style: styles.button, onClick: () => { void refreshStatus(); }, children: t('usageRefresh') }) })] }, id);
-        }) });
+                                        return (_jsxs("div", { style: styles.usageRow, children: [_jsxs("div", { style: styles.usageMeta, children: [_jsx("span", { children: label }), _jsxs("span", { children: [percent === undefined
+                                                                    ? t('usageMeterInvalid')
+                                                                    : `${percent}%`, window.resetsAt === undefined
+                                                                    ? ''
+                                                                    : ` · ${t('usageResets', { date: new Date(window.resetsAt).toLocaleString() })}`] })] }), _jsx(UsageMeter, { window: window, t: t, observedAt: observedAt[id], stale: errors[id] !== undefined || snapshot?.stale === true })] }, index));
+                                    })] })] })), !configured && (_jsx("div", { style: styles.actions, children: _jsx("button", { type: "button", style: styles.button, onClick: () => {
+                                void refreshStatus();
+                            }, children: t('usageRefresh') }) }))] }, id));
+        }) }));
 }

package/lib/client/ImageGallery.d.ts

@@ -37,7 +37,7 @@ export interface MessageImageLabels {
  * preview. A lone image renders at its `singleFit` size; an image among
  * several renders as a fixed 64px square tile.
  */
-export declare function MessageImage({ attachment, load, variant, labels }: {
+export declare function MessageImage({ attachment, load, variant, labels, }: {
     attachment: ImageAttachmentRef;
     load: ImageLoader;
     variant: 'single' | 'tile';
@@ -45,7 +45,7 @@ export declare function MessageImage({ attachment, load, variant, labels }: {
 }): import("react").JSX.Element;
 /** Wrapping image group: a lone image renders large, several render as 64px
  * square tiles (same rule as the platform gallery). */
-export declare function ImageGallery({ images, load, labels }: {
+export declare function ImageGallery({ images, load, labels, }: {
     images: readonly {
         attachment: ImageAttachmentRef;
     }[];

package/lib/client/ImageGallery.js

@@ -20,7 +20,9 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 function singleFit(attachment) {
     const natural = attachment.width / attachment.height;
     const ratio = Math.min(4, Math.max(0.25, natural));
-    const box = ratio >= 1 ? { width: 240, height: 240 / ratio } : { width: 240 * ratio, height: 240 };
+    const box = ratio >= 1
+        ? { width: 240, height: 240 / ratio }
+        : { width: 240 * ratio, height: 240 };
     const scale = Math.min(1, attachment.width / box.width, attachment.height / box.height);
     return {
         width: Math.max(1, Math.round(box.width * scale)),
@@ -29,29 +31,68 @@ function singleFit(attachment) {
     };
 }
 const styles = {
-    gallery: { display: 'flex', flexWrap: 'wrap', gap: 8, justifyContent: 'flex-start' },
+    gallery: {
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: 8,
+        justifyContent: 'flex-start',
+    },
     frame: {
-        display: 'grid', placeItems: 'center', overflow: 'hidden', padding: 0,
-        border: '1px solid var(--dsw-alias-border-l2-darkmode-thin)', borderRadius: 8,
-        background: 'var(--dsw-alias-interactive-bg-hover-solid)', cursor: 'zoom-in',
+        display: 'grid',
+        placeItems: 'center',
+        overflow: 'hidden',
+        padding: 0,
+        border: '1px solid var(--dsw-alias-border-l2-darkmode-thin)',
+        borderRadius: 8,
+        background: 'var(--dsw-alias-interactive-bg-hover-solid)',
+        cursor: 'zoom-in',
     },
     tile: { width: 64, height: 64 },
     img: { width: '100%', height: '100%', objectFit: 'cover', display: 'block' },
-    loading: { fontSize: 12, color: 'var(--dsw-alias-label-tertiary)', padding: '0 8px' },
+    loading: {
+        fontSize: 12,
+        color: 'var(--dsw-alias-label-tertiary)',
+        padding: '0 8px',
+    },
     error: {
-        fontSize: 12, color: 'var(--dsw-alias-state-error-primary)', cursor: 'pointer',
-        border: '1px solid var(--dsw-alias-border-l2-darkmode-thin)', borderRadius: 8,
-        background: 'transparent', padding: '6px 10px',
+        fontSize: 12,
+        color: 'var(--dsw-alias-state-error-primary)',
+        cursor: 'pointer',
+        border: '1px solid var(--dsw-alias-border-l2-darkmode-thin)',
+        borderRadius: 8,
+        background: 'transparent',
+        padding: '6px 10px',
     },
     overlay: {
-        position: 'fixed', inset: 0, zIndex: 1000, display: 'grid', placeItems: 'center',
-        background: 'rgba(0, 0, 0, 0.72)', padding: 24,
+        position: 'fixed',
+        inset: 0,
+        zIndex: 1000,
+        display: 'grid',
+        placeItems: 'center',
+        background: 'rgba(0, 0, 0, 0.72)',
+        padding: 24,
+    },
+    overlayImg: {
+        maxWidth: '92vw',
+        maxHeight: '92vh',
+        objectFit: 'contain',
+        borderRadius: 4,
     },
-    overlayImg: { maxWidth: '92vw', maxHeight: '92vh', objectFit: 'contain', borderRadius: 4 },
     close: {
-        position: 'absolute', top: 12, right: 12, width: 32, height: 32, display: 'grid',
-        placeItems: 'center', border: 'none', borderRadius: '50%', cursor: 'pointer',
-        background: 'rgba(255, 255, 255, 0.16)', color: '#fff', fontSize: 16, lineHeight: 1,
+        position: 'absolute',
+        top: 12,
+        right: 12,
+        width: 32,
+        height: 32,
+        display: 'grid',
+        placeItems: 'center',
+        border: 'none',
+        borderRadius: '50%',
+        cursor: 'pointer',
+        background: 'rgba(255, 255, 255, 0.16)',
+        color: '#fff',
+        fontSize: 16,
+        lineHeight: 1,
     },
 };
 /**
@@ -59,52 +100,70 @@ const styles = {
  * Escape all dismiss; the image itself is inert so a click on it does not
  * fall through to the backdrop dismissal.
  */
-function ImageLightbox({ src, alt, labels, onClose }) {
+function ImageLightbox({ src, alt, labels, onClose, }) {
     useEffect(() => {
-        const onKey = (event) => { if (event.key === 'Escape')
-            onClose(); };
+        const onKey = (event) => {
+            if (event.key === 'Escape')
+                onClose();
+        };
         window.addEventListener('keydown', onKey);
-        return () => { window.removeEventListener('keydown', onKey); };
+        return () => {
+            window.removeEventListener('keydown', onKey);
+        };
     }, [onClose]);
-    return (_jsxs("div", { role: "dialog", "aria-label": labels.dialog, style: styles.overlay, onClick: onClose, children: [_jsx("img", { src: src, alt: alt, style: styles.overlayImg, onClick: event => { event.stopPropagation(); } }), _jsx("button", { type: "button", "aria-label": labels.close, style: styles.close, onClick: onClose, children: "\u00D7" })] }));
+    return (_jsxs("div", { role: "dialog", "aria-label": labels.dialog, style: styles.overlay, onClick: onClose, children: [_jsx("img", { src: src, alt: alt, style: styles.overlayImg, onClick: (event) => {
+                    event.stopPropagation();
+                } }), _jsx("button", { type: "button", "aria-label": labels.close, style: styles.close, onClick: onClose, children: "\u00D7" })] }));
 }
 /**
  * Compact history renderer with retryable loading and click-to-open original
  * preview. A lone image renders at its `singleFit` size; an image among
  * several renders as a fixed 64px square tile.
  */
-export function MessageImage({ attachment, load, variant, labels }) {
+export function MessageImage({ attachment, load, variant, labels, }) {
     const [src, setSrc] = useState(null);
     const [error, setError] = useState(false);
     const [open, setOpen] = useState(false);
     // Retry re-arms the one load effect below, so every attempt — first load or
     // retry — runs under the same liveness guard and the same reset.
     const [attempt, setAttempt] = useState(0);
-    const retry = useCallback(() => { setAttempt(a => a + 1); }, []);
-    const close = useCallback(() => { setOpen(false); }, []);
+    const retry = useCallback(() => {
+        setAttempt((a) => a + 1);
+    }, []);
+    const close = useCallback(() => {
+        setOpen(false);
+    }, []);
     const fit = useMemo(() => (variant === 'single' ? singleFit(attachment) : undefined), [attachment, variant]);
     useEffect(() => {
         let live = true;
         setError(false);
         setSrc(null);
-        void load(attachment).then((url) => { if (live)
-            setSrc(url); }).catch(() => { if (live)
-            setError(true); });
-        return () => { live = false; };
+        void load(attachment)
+            .then((url) => {
+            if (live)
+                setSrc(url);
+        })
+            .catch(() => {
+            if (live)
+                setError(true);
+        });
+        return () => {
+            live = false;
+        };
     }, [attachment, load, attempt]);
     const label = attachment.name ?? labels.image;
     if (error) {
-        return _jsx("button", { type: "button", style: styles.error, onClick: retry, children: labels.loadFailed });
+        return (_jsx("button", { type: "button", style: styles.error, onClick: retry, children: labels.loadFailed }));
     }
     const box = fit === undefined ? styles.tile : { width: fit.width, height: fit.height };
-    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", style: { ...styles.frame, ...box }, title: labels.open, "aria-label": labels.openNamed(label), onClick: () => { if (src !== null)
-                    setOpen(true); }, children: src === null
-                    ? _jsx("span", { style: styles.loading, children: labels.loading })
-                    : _jsx("img", { src: src, alt: label, style: { ...styles.img, objectPosition: fit?.objectPosition } }) }), open && src !== null && _jsx(ImageLightbox, { src: src, alt: label, labels: labels.lightbox, onClose: close })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", style: { ...styles.frame, ...box }, title: labels.open, "aria-label": labels.openNamed(label), onClick: () => {
+                    if (src !== null)
+                        setOpen(true);
+                }, children: src === null ? (_jsx("span", { style: styles.loading, children: labels.loading })) : (_jsx("img", { src: src, alt: label, style: { ...styles.img, objectPosition: fit?.objectPosition } })) }), open && src !== null && (_jsx(ImageLightbox, { src: src, alt: label, labels: labels.lightbox, onClose: close }))] }));
 }
 /** Wrapping image group: a lone image renders large, several render as 64px
  * square tiles (same rule as the platform gallery). */
-export function ImageGallery({ images, load, labels }) {
+export function ImageGallery({ images, load, labels, }) {
     if (images.length === 0)
         return null;
     const variant = images.length === 1 ? 'single' : 'tile';

package/lib/client/ImageGenerateToolview.js

@@ -16,8 +16,9 @@ const PROMPT_MAX_LENGTH = 60;
 export function createImageLoader(rpc) {
     // The host validates a full ImageAttachmentRef payload (readImage takes the
     // whole ref), so forward the attachment verbatim.
-    return attachment => callSubscriptionsAuth(rpc, 'image', { ...attachment })
-        .then(result => `data:${result.mediaType};base64,${result.dataBase64}`);
+    return (attachment) => callSubscriptionsAuth(rpc, 'image', {
+        ...attachment,
+    }).then((result) => `data:${result.mediaType};base64,${result.dataBase64}`);
 }
 /**
  * English-dictionary fallback for a missing locale seat (standalone renders);
@@ -58,7 +59,9 @@ function derivePrompt(argsRaw) {
         }
     }
     const line = (prompt ?? argsRaw).split('\n', 1)[0] ?? '';
-    return line.length > PROMPT_MAX_LENGTH ? `${line.slice(0, PROMPT_MAX_LENGTH)}…` : line;
+    return line.length > PROMPT_MAX_LENGTH
+        ? `${line.slice(0, PROMPT_MAX_LENGTH)}…`
+        : line;
 }
 /** Flatten a settled result's text blocks (the degraded text-only route and the error line). */
 function resultText(block) {
@@ -85,19 +88,46 @@ function resultImages(block) {
     return images;
 }
 const styles = {
-    container: { display: 'flex', flexDirection: 'column', gap: 6, padding: '4px 0' },
+    container: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 6,
+        padding: '4px 0',
+    },
     row: { display: 'flex', alignItems: 'center', gap: 6, minWidth: 0 },
-    icon: { display: 'inline-flex', flexShrink: 0, color: 'var(--dsw-alias-label-tertiary)' },
+    icon: {
+        display: 'inline-flex',
+        flexShrink: 0,
+        color: 'var(--dsw-alias-label-tertiary)',
+    },
     title: {
-        fontSize: 13, lineHeight: '20px', color: 'var(--dsw-alias-label-primary)',
-        overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
+        fontSize: 13,
+        lineHeight: '20px',
+        color: 'var(--dsw-alias-label-primary)',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+    },
+    subtle: {
+        margin: 0,
+        fontSize: 12,
+        lineHeight: '18px',
+        color: 'var(--dsw-alias-label-tertiary)',
     },
-    subtle: { margin: 0, fontSize: 12, lineHeight: '18px', color: 'var(--dsw-alias-label-tertiary)' },
     output: {
-        margin: 0, fontSize: 12, lineHeight: '18px', color: 'var(--dsw-alias-label-secondary)',
-        whiteSpace: 'pre-wrap', overflowWrap: 'anywhere',
+        margin: 0,
+        fontSize: 12,
+        lineHeight: '18px',
+        color: 'var(--dsw-alias-label-secondary)',
+        whiteSpace: 'pre-wrap',
+        overflowWrap: 'anywhere',
+    },
+    error: {
+        margin: 0,
+        fontSize: 12,
+        lineHeight: '18px',
+        color: 'var(--dsw-alias-state-error-primary)',
     },
-    error: { margin: 0, fontSize: 12, lineHeight: '18px', color: 'var(--dsw-alias-state-error-primary)' },
 };
 /**
  * The `image_generate` keyed toolview component.
@@ -110,21 +140,27 @@ export function ImageGenerateToolview(props) {
     if (block === undefined)
         return null;
     const settled = 'kind' in block;
-    const argsRaw = (settled ? block.call?.argsRaw : block.phase === 'start' ? block.argsRaw : undefined) ?? '';
+    const argsRaw = (settled
+        ? block.call?.argsRaw
+        : block.phase === 'start'
+            ? block.argsRaw
+            : undefined) ?? '';
     let references = 0;
     try {
         const args = JSON.parse(argsRaw);
         if (Array.isArray(args?.referenceImages))
             references = args.referenceImages.length;
     }
-    catch { /* Arguments may still be streaming. */ }
+    catch {
+        /* Arguments may still be streaming. */
+    }
     const title = `image_generate${references > 0 ? ` (${references} ref)` : ''}: ${derivePrompt(argsRaw)}`;
     const images = resultImages(block);
     const text = settled ? resultText(block) : '';
     const labels = {
         image: t('image'),
         open: t('viewImage'),
-        openNamed: name => t('viewImageNamed', { name }),
+        openNamed: (name) => t('viewImageNamed', { name }),
         loading: t('imageLoading'),
         loadFailed: t('imageLoadFailed'),
         lightbox: { dialog: t('imagePreview'), close: t('imageClose') },

package/lib/client/OllamaCard.d.ts

@@ -6,7 +6,7 @@ type Translate = SubscriptionsSectionInjected['t'];
  * capability toggle, and the API-key usage row. The settings dialog owns
  * every write; the card only reads, so a save is reflected by re-reading.
  */
-export declare function OllamaCard({ rpc, t }: {
+export declare function OllamaCard({ rpc, t, }: {
     rpc: ConnectionHandle['rpc'];
     t: Translate;
 }): import("react").JSX.Element;

package/lib/client/OllamaCard.js

@@ -15,7 +15,7 @@ function message(error) {
  * capability toggle, and the API-key usage row. The settings dialog owns
  * every write; the card only reads, so a save is reflected by re-reading.
  */
-export function OllamaCard({ rpc, t }) {
+export function OllamaCard({ rpc, t, }) {
     const [view, setView] = useState();
     const [configured, setConfigured] = useState();
     const [usage, setUsage] = useState();
@@ -64,13 +64,31 @@ export function OllamaCard({ rpc, t }) {
             setStatusError(message(failure));
         }
     }, [rpc, refreshUsage]);
-    useEffect(() => { void refreshStatus(); }, [refreshStatus]);
-    return _jsxs("div", { style: styles.card, children: [_jsxs("div", { style: styles.header, children: [_jsx("span", { style: { ...styles.dot, background: configured === true
-                                ? 'var(--dsw-alias-state-success-primary)' : 'var(--dsw-alias-label-dimmed)' } }), _jsx("span", { style: styles.name, children: t('ollamaTitle') })] }), _jsx("p", { style: styles.status, children: view === undefined ? t('checking')
-                    : view.models.length > 0 ? t('ollamaStatus', { count: view.models.length }) : t('ollamaStatusNone') }), view !== undefined && _jsx("p", { style: styles.status, children: view.effective.web ? t('ollamaWebOn') : t('ollamaWebOff') }), statusError !== undefined && _jsx("p", { style: styles.error, children: t('ollamaModelsLoadFailed', { message: statusError }) }), view !== undefined && configured === false && _jsx("p", { style: styles.status, children: t('ollamaConfigureHint', { ref: view.effective.apiKeyRef }) }), configured === true && _jsxs("div", { style: styles.account, children: [_jsxs("div", { style: styles.accountHeader, children: [_jsx("span", { style: styles.defaultStar, title: t('defaultBadge'), children: "\u2605" }), _jsx("span", { style: styles.accountName, children: t('externalUsageApiKey') })] }), _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, disabled: loading, onClick: () => { void refreshUsage(); }, children: t('usageRefresh') })] }), loading && usage === undefined && _jsx("p", { style: styles.status, children: t('usageLoading') }), usageError !== undefined && _jsx("p", { style: styles.error, children: t('usageError', { message: usageError }) }), usage !== undefined && usage.supported === false && _jsx("p", { style: styles.status, children: t('usageUnsupported') }), usage?.windows?.length === 0 && _jsx("p", { style: styles.status, children: t('usageEmpty') }), usage?.windows?.map((window, index) => {
+    useEffect(() => {
+        void refreshStatus();
+    }, [refreshStatus]);
+    return (_jsxs("div", { style: styles.card, children: [_jsxs("div", { style: styles.header, children: [_jsx("span", { style: {
+                            ...styles.dot,
+                            background: configured === true
+                                ? 'var(--dsw-alias-state-success-primary)'
+                                : 'var(--dsw-alias-label-dimmed)',
+                        } }), _jsx("span", { style: styles.name, children: t('ollamaTitle') })] }), _jsx("p", { style: styles.status, children: view === undefined
+                    ? t('checking')
+                    : view.models.length > 0
+                        ? t('ollamaStatus', { count: view.models.length })
+                        : t('ollamaStatusNone') }), view !== undefined && (_jsx("p", { style: styles.status, children: view.effective.web ? t('ollamaWebOn') : t('ollamaWebOff') })), statusError !== undefined && (_jsx("p", { style: styles.error, children: t('ollamaModelsLoadFailed', { message: statusError }) })), view !== undefined && configured === false && (_jsx("p", { style: styles.status, children: t('ollamaConfigureHint', { ref: view.effective.apiKeyRef }) })), configured === true && (_jsxs("div", { style: styles.account, children: [_jsxs("div", { style: styles.accountHeader, children: [_jsx("span", { style: styles.defaultStar, title: t('defaultBadge'), children: "\u2605" }), _jsx("span", { style: styles.accountName, children: t('externalUsageApiKey') })] }), _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, disabled: loading, onClick: () => {
+                                            void refreshUsage();
+                                        }, children: t('usageRefresh') })] }), loading && usage === undefined && (_jsx("p", { style: styles.status, children: t('usageLoading') })), usageError !== undefined && (_jsx("p", { style: styles.error, children: t('usageError', { message: usageError }) })), usage !== undefined && usage.supported === false && (_jsx("p", { style: styles.status, children: t('usageUnsupported') })), usage?.windows?.length === 0 && (_jsx("p", { style: styles.status, children: t('usageEmpty') })), usage?.windows?.map((window, index) => {
                                 const percent = displayUsedPercent(window.usedPercent);
                                 const label = externalUsageWindowLabel(t, window);
-                                return _jsxs("div", { style: styles.usageRow, children: [_jsxs("div", { style: styles.usageMeta, children: [_jsx("span", { children: label }), _jsxs("span", { children: [percent === undefined ? t('usageMeterInvalid') : `${percent}%`, window.resetsAt === undefined ? ''
-                                                            : ` · ${t('usageResets', { date: new Date(window.resetsAt).toLocaleString() })}`] })] }), _jsx(UsageMeter, { window: window, t: t, observedAt: observedAt, stale: usageStale })] }, index);
-                            })] })] }), view?.configOverridesModels === true && _jsx("p", { style: styles.status, children: t('ollamaCatalogOverride') }), _jsxs("div", { style: styles.actions, children: [_jsx("button", { type: "button", style: styles.button, "aria-haspopup": "dialog", onClick: () => setManage(true), children: t('accountsManage') }), configured !== true && _jsx("button", { type: "button", style: styles.button, onClick: () => { void refreshStatus(); }, children: t('usageRefresh') })] }), manage && _jsx(OllamaSettingsManager, { rpc: rpc, t: t, onClose: () => setManage(false), onSaved: () => { void refreshStatus(); } })] });
+                                return (_jsxs("div", { style: styles.usageRow, children: [_jsxs("div", { style: styles.usageMeta, children: [_jsx("span", { children: label }), _jsxs("span", { children: [percent === undefined
+                                                            ? t('usageMeterInvalid')
+                                                            : `${percent}%`, window.resetsAt === undefined
+                                                            ? ''
+                                                            : ` · ${t('usageResets', { date: new Date(window.resetsAt).toLocaleString() })}`] })] }), _jsx(UsageMeter, { window: window, t: t, observedAt: observedAt, stale: usageStale })] }, index));
+                            })] })] })), view?.configOverridesModels === true && (_jsx("p", { style: styles.status, children: t('ollamaCatalogOverride') })), _jsxs("div", { style: styles.actions, children: [_jsx("button", { type: "button", style: styles.button, "aria-haspopup": "dialog", onClick: () => setManage(true), children: t('accountsManage') }), configured !== true && (_jsx("button", { type: "button", style: styles.button, onClick: () => {
+                            void refreshStatus();
+                        }, children: t('usageRefresh') }))] }), manage && (_jsx(OllamaSettingsManager, { rpc: rpc, t: t, onClose: () => setManage(false), onSaved: () => {
+                    void refreshStatus();
+                } }))] }));
 }