dsh-subscriptions 0.1.0

package/lib/client/ExternalUsageCards.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from 'react';
+import { callSubscriptionsAuth } from './subscriptions-rpc.js';
+import { subscriptionCardStyles as styles } from './subscription-card-styles.js';
+import { USAGE_BADGE_REFRESH_EVENT } from './usage-badge-preferences.js';
+const SOURCES = [
+    { id: 'opencode-go', name: 'OpenCode Go', ref: 'OPENCODE_GO_API_KEY' },
+    { id: 'kimi-code', name: 'Kimi Code', ref: 'KIMI_CODING_API_KEY' },
+];
+function errorText(error) {
+    return error instanceof Error ? error.message : String(error);
+}
+function barColor(percent) {
+    if (percent >= 95)
+        return 'var(--dsw-alias-state-error-primary)';
+    if (percent >= 80)
+        return 'var(--dsw-alias-state-warn-label)';
+    return 'var(--dsw-alias-state-success-primary)';
+}
+/** Quota cards for API-key providers already available through DSH itself. */
+export function ExternalUsageCards({ rpc, t }) {
+    const [status, setStatus] = useState();
+    const [statusError, setStatusError] = useState();
+    const [usage, setUsage] = useState({});
+    const [errors, setErrors] = useState({});
+    const [loading, setLoading] = useState({});
+    const refresh = useCallback(async (source) => {
+        setLoading(prev => ({ ...prev, [source]: true }));
+        setErrors(prev => ({ ...prev, [source]: undefined }));
+        try {
+            const value = await callSubscriptionsAuth(rpc, 'externalUsage', { source });
+            setUsage(prev => ({ ...prev, [source]: value }));
+            window.dispatchEvent(new Event(USAGE_BADGE_REFRESH_EVENT));
+        }
+        catch (error) {
+            setErrors(prev => ({ ...prev, [source]: errorText(error) }));
+        }
+        finally {
+            setLoading(prev => ({ ...prev, [source]: false }));
+        }
+    }, [rpc]);
+    const refreshStatus = useCallback(async () => {
+        try {
+            const value = await callSubscriptionsAuth(rpc, 'externalStatus', {});
+            setStatus(value);
+            setStatusError(undefined);
+            for (const { id } of SOURCES)
+                if (value[id]?.configured)
+                    void refresh(id);
+        }
+        catch (error) {
+            setStatusError(errorText(error));
+        }
+    }, [rpc, refresh]);
+    useEffect(() => {
+        void refreshStatus();
+    }, [refreshStatus]);
+    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?.windows?.length === 0 && _jsx("p", { style: styles.status, children: t('usageEmpty') }), snapshot?.windows?.map((window, index) => {
+                                        const percent = Math.min(100, Math.max(0, window.usedPercent));
+                                        const label = window.kind === 'session' ? t('usageSession')
+                                            : window.kind === 'weekly' ? t('usageWeekly')
+                                                : window.scope === 'Monthly' ? t('usageMonthly') : window.scope ?? t('usageWindow');
+                                        return _jsxs("div", { style: styles.usageRow, children: [_jsxs("div", { style: styles.usageMeta, children: [_jsx("span", { children: label }), _jsxs("span", { children: [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: `${percent}%`, background: barColor(percent) } }) })] }, 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

@@ -0,0 +1,54 @@
+/**
+ * Mirror of ImageAttachmentRef (packages/attachment/attachment/src/types.ts);
+ * the brand on attachmentId is compile-time only, so string suffices here.
+ */
+export interface ImageAttachmentRef {
+    attachmentId: string;
+    mediaType: string;
+    bytes: number;
+    width: number;
+    height: number;
+    name?: string;
+}
+/** Loads a session-authorized durable image URL (resolves to a data/blob URL). */
+export type ImageLoader = (attachment: ImageAttachmentRef) => Promise<string>;
+/** Lightbox strings forwarded to the opened preview. */
+export interface ImageLightboxLabels {
+    dialog: string;
+    close: string;
+}
+/** Message-image strings the owner resolves from its own locale namespace. */
+export interface MessageImageLabels {
+    /** Fallback display name for an unnamed image. */
+    image: string;
+    /** Thumbnail tooltip inviting the original-image preview. */
+    open: string;
+    /** Accessible thumbnail label; receives the image's display name. */
+    openNamed: (label: string) => string;
+    /** Loading placeholder shown until bytes resolve. */
+    loading: string;
+    /** Retry-control label shown when the load fails. */
+    loadFailed: string;
+    /** Lightbox strings forwarded to the opened preview. */
+    lightbox: ImageLightboxLabels;
+}
+/**
+ * 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 declare function MessageImage({ attachment, load, variant, labels }: {
+    attachment: ImageAttachmentRef;
+    load: ImageLoader;
+    variant: 'single' | 'tile';
+    labels: MessageImageLabels;
+}): 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 }: {
+    images: readonly {
+        attachment: ImageAttachmentRef;
+    }[];
+    load: ImageLoader;
+    labels: MessageImageLabels;
+}): import("react").JSX.Element | null;

package/lib/client/ImageGallery.js

@@ -0,0 +1,112 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Plugin-local image gallery for generated-image toolviews.
+ *
+ * Since web-app rc.8, `@deepseek-ai/dsh-client-ui-attachment`'s browser module
+ * exports only its cordis plugin surface (`apply`/`inject`) — the React
+ * components are no longer package values, so importing `ImageGallery` from it
+ * yields `undefined` at runtime and crashes the toolview inside the slot error
+ * boundary (the whole call row disappears). This module re-implements the
+ * gallery contract the toolview needs (loader-driven thumbnails, retry on
+ * failure, click-to-open lightbox) with the same sizing rules as the platform
+ * component, keeping this plugin independent of harness component exports.
+ */
+import { useCallback, useEffect, useMemo, useState } from 'react';
+/** Display box for a lone image (platform rule): long edge 240px with the
+ * rendered aspect ratio clamped to [0.25, 4] — the overflow is cropped by
+ * `object-fit: cover` — and never upscaled past the image's natural size. The
+ * crop anchor keeps the top of very tall images and the left of very wide
+ * ones, where the informative content usually starts. */
+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 scale = Math.min(1, attachment.width / box.width, attachment.height / box.height);
+    return {
+        width: Math.max(1, Math.round(box.width * scale)),
+        height: Math.max(1, Math.round(box.height * scale)),
+        objectPosition: natural < 0.25 ? 'center top' : natural > 4 ? 'left center' : 'center',
+    };
+}
+const styles = {
+    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',
+    },
+    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' },
+    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',
+    },
+    overlay: {
+        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 },
+    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,
+    },
+};
+/**
+ * Full-viewport original-image preview: backdrop or close-control click and
+ * 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 }) {
+    useEffect(() => {
+        const onKey = (event) => { if (event.key === 'Escape')
+            onClose(); };
+        window.addEventListener('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" })] }));
+}
+/**
+ * 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 }) {
+    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 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; };
+    }, [attachment, load, attempt]);
+    const label = attachment.name ?? labels.image;
+    if (error) {
+        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 })] }));
+}
+/** 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 }) {
+    if (images.length === 0)
+        return null;
+    const variant = images.length === 1 ? 'single' : 'tile';
+    return (_jsx("div", { style: styles.gallery, children: images.map((image, index) => (_jsx(MessageImage, { attachment: image.attachment, load: load, variant: variant, labels: labels }, `${image.attachment.attachmentId}:${index}`))) }));
+}

package/lib/client/ImageGenerateToolview.d.ts

@@ -0,0 +1,48 @@
+import type { ConnectionHandle } from '@deepseek-ai/dsh-api-remotes/client';
+import type { ToolCallBlock } from '@deepseek-ai/dsh-client-ui-conversation/client';
+import type { ImageLoader } from './ImageGallery.js';
+import type { SubscriptionsKey } from './locales.js';
+/** Mirror of ui-tool's ToolCallOwnerProps (see the module header). */
+interface ToolCallOwnerProps {
+    callId: string;
+    toolName: string;
+    block: ToolCallBlock;
+    cwd?: string | undefined;
+    openFile: (path: string) => void;
+    inspect?: (() => void) | undefined;
+}
+declare module '@deepseek-ai/dsh-client-ui-slots' {
+    interface SlotMap {
+        /** Mirror of ui-tool's keyed atomic Tool view declaration (see the module header). */
+        'tool.call.toolview': {
+            kind: 'keyed';
+            scope: 'session';
+            owner: ToolCallOwnerProps;
+        };
+    }
+}
+/** Injected dependencies of {@link ImageGenerateToolview} (slot `inject`). */
+export interface ImageGenerateToolviewInjected {
+    /** Session-authorized image URL loader riding the `/subscriptions-auth` channel. */
+    load: ImageLoader;
+}
+/**
+ * Props delivered by the toolview outlet: the owner share plus the inject
+ * face and the framework locale seat, spread flat.
+ */
+export type ImageGenerateToolviewProps = Partial<ToolCallOwnerProps> & Partial<ImageGenerateToolviewInjected> & {
+    t?: ((key: SubscriptionsKey, params?: Record<string, unknown>) => string) | undefined;
+};
+/**
+ * Build the ImageGallery loader over the `image` endpoint.
+ * @param rpc - Connection RPC caller.
+ * @returns loader resolving an attachment ref to a data URL.
+ */
+export declare function createImageLoader(rpc: ConnectionHandle['rpc']): ImageLoader;
+/**
+ * The `image_generate` keyed toolview component.
+ * @param props - owner share, inject face, and locale seat (spread flat).
+ * @returns the call row plus, once settled, the gallery / text / error body.
+ */
+export declare function ImageGenerateToolview(props: ImageGenerateToolviewProps): import("react").JSX.Element | null;
+export {};

package/lib/client/ImageGenerateToolview.js

@@ -0,0 +1,133 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as primitives from '@deepseek-ai/dsh-client-ui-primitives';
+import { ImageGallery } from './ImageGallery.js';
+import { hostIcon } from './host-icons.js';
+import { callSubscriptionsAuth } from './subscriptions-rpc.js';
+import { en } from './locales.js';
+/** DSH 0.1.7 renamed IconSparkle16; resolving it by name keeps older hosts working too. */
+const SparkleIcon = hostIcon(primitives, 'Sparkle');
+/** Title prompt truncation budget (characters). */
+const PROMPT_MAX_LENGTH = 60;
+/**
+ * Build the ImageGallery loader over the `image` endpoint.
+ * @param rpc - Connection RPC caller.
+ * @returns loader resolving an attachment ref to a data URL.
+ */
+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}`);
+}
+/**
+ * English-dictionary fallback for a missing locale seat (standalone renders);
+ * the framework always supplies the namespace-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;
+}
+/** Extract the prompt from the call's raw args JSON; falls back to the first string value, then the raw line. */
+function derivePrompt(argsRaw) {
+    let parsed;
+    try {
+        parsed = JSON.parse(argsRaw);
+    }
+    catch {
+        // Non-JSON args (mid-stream truncation): fall back to the raw string below.
+        parsed = undefined;
+    }
+    let prompt;
+    if (typeof parsed === 'object' && parsed !== null) {
+        const args = parsed;
+        if (typeof args.prompt === 'string' && args.prompt !== '')
+            prompt = args.prompt;
+        else {
+            for (const value of Object.values(args)) {
+                if (typeof value === 'string' && value !== '') {
+                    prompt = value;
+                    break;
+                }
+            }
+        }
+    }
+    const line = (prompt ?? argsRaw).split('\n', 1)[0] ?? '';
+    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) {
+    if (!('kind' in block))
+        return '';
+    const parts = [];
+    for (const part of block.content) {
+        if (part.type === 'text')
+            parts.push(part.text);
+    }
+    if (parts.length === 0 && block.error !== undefined)
+        parts.push(`${block.error.name}: ${block.error.code}`);
+    return parts.join('\n');
+}
+/** Image attachments of a settled result; empty while running or on the text-only route. */
+function resultImages(block) {
+    if (!('kind' in block))
+        return [];
+    const images = [];
+    for (const part of block.content) {
+        if (part.type === 'image')
+            images.push({ attachment: part.attachment });
+    }
+    return images;
+}
+const styles = {
+    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)' },
+    title: {
+        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)' },
+    output: {
+        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)' },
+};
+/**
+ * The `image_generate` keyed toolview component.
+ * @param props - owner share, inject face, and locale seat (spread flat).
+ * @returns the call row plus, once settled, the gallery / text / error body.
+ */
+export function ImageGenerateToolview(props) {
+    const { block, load } = props;
+    const t = props.t ?? fallbackTranslate;
+    if (block === undefined)
+        return null;
+    const settled = 'kind' in block;
+    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. */ }
+    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 }),
+        loading: t('imageLoading'),
+        loadFailed: t('imageLoadFailed'),
+        lightbox: { dialog: t('imagePreview'), close: t('imageClose') },
+    };
+    return (_jsxs("div", { style: styles.container, children: [_jsxs("div", { style: styles.row, children: [_jsx("span", { style: styles.icon, children: _jsx(SparkleIcon, { size: 14 }) }), _jsx("span", { style: styles.title, children: title })] }), !settled && _jsx("p", { style: styles.subtle, children: t('generating') }), settled && block.isError && text !== '' && (_jsx("p", { style: styles.error, children: text.split('\n', 1)[0] })), settled && !block.isError && images.length > 0 && load !== undefined && (_jsx(ImageGallery, { images: images, load: load, labels: labels })), settled && !block.isError && images.length === 0 && text !== '' && (_jsx("p", { style: styles.output, children: text }))] }));
+}

package/lib/client/ProviderAccountManager.d.ts

@@ -0,0 +1,13 @@
+import type { ConnectionHandle } from '@deepseek-ai/dsh-api-remotes/client';
+import type { SubscriptionProvider } from './SubscriptionsSection.js';
+import type { SubscriptionsKey } from './locales.js';
+interface Props {
+    provider: SubscriptionProvider | 'cursor-subscription';
+    name: string;
+    rpc: ConnectionHandle['rpc'];
+    t: (key: SubscriptionsKey, params?: Record<string, unknown>) => string;
+    onClose: () => void;
+}
+/** Native top-layer dialog provides keyboard containment, Escape and focus restoration. */
+export declare function ProviderAccountManager({ provider, name, rpc, t, onClose }: Props): import("react").JSX.Element;
+export {};

package/lib/client/ProviderAccountManager.js

@@ -0,0 +1,147 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from 'react';
+import { callSubscriptionsAuth } from './subscriptions-rpc.js';
+import { accountModelRows, accountPoolSelection, mergeAccountChanges, mergeLatestAccounts } from './account-preferences.js';
+import { ProviderModelEditor } from './ProviderModelEditor.js';
+const border = '1px solid var(--dsw-alias-border-l2)';
+const control = {
+    font: 'inherit', color: 'inherit', background: 'var(--dsw-alias-bg-layer-1)',
+    border, borderRadius: 8, padding: '7px 12px', minWidth: 0,
+};
+const button = { ...control, cursor: 'pointer' };
+const hint = { margin: 0, fontSize: 12, lineHeight: 1.6, color: 'var(--dsw-alias-label-tertiary)' };
+const stack = { display: 'grid', gap: 12, minWidth: 0 };
+const actions = { display: 'flex', flexWrap: 'wrap', gap: 8, alignItems: 'center' };
+/** Native top-layer dialog provides keyboard containment, Escape and focus restoration. */
+export function ProviderAccountManager({ provider, name, rpc, t, onClose }) {
+    const dialog = useRef(null);
+    const title = useId();
+    const description = useId();
+    const [catalog, setCatalog] = useState();
+    const [changes, setChanges] = useState({});
+    const [loading, setLoading] = useState(true);
+    const [saving, setSaving] = useState(false);
+    const [error, setError] = useState('');
+    const [saveError, setSaveError] = useState('');
+    const [attempt, setAttempt] = useState(0);
+    const [modelsDirty, setModelsDirty] = useState(false);
+    const alive = useRef(true);
+    const saveLock = useRef(false);
+    const editor = useRef(null);
+    useEffect(() => {
+        alive.current = true;
+        const element = dialog.current;
+        const previous = document.activeElement;
+        element.showModal();
+        return () => {
+            alive.current = false;
+            element.close();
+            if (previous instanceof HTMLElement && previous.isConnected)
+                previous.focus();
+        };
+    }, []);
+    useEffect(() => {
+        let current = true;
+        setLoading(true);
+        setError('');
+        void callSubscriptionsAuth(rpc, provider === 'cursor-subscription' ? 'cursorSettings' : 'providerSettings', { provider }).then(data => {
+            if (current)
+                setCatalog(data);
+        }).catch(error => {
+            if (current)
+                setError(t('accountsLoadFailed', { message: error instanceof Error ? error.message : String(error) }));
+        }).finally(() => { if (current)
+            setLoading(false); });
+        return () => { current = false; };
+    }, [provider, rpc, attempt]);
+    function edit(key, next) {
+        setChanges(current => ({ ...current, [key]: next }));
+    }
+    /**
+     * One submit for both drafts: the model editor's (visibility, effort,
+     * context, tools) and this dialog's account edits. A failure keeps the
+     * dialog open with every edit intact.
+     */
+    async function save() {
+        if (saveLock.current)
+            return;
+        // An invalid model draft (e.g. a malformed context window) blocks the
+        // whole submit; the editor shows the reason next to the field.
+        const models = editor.current === null ? { efforts: [] } : editor.current.collect();
+        if (models === undefined)
+            return;
+        saveLock.current = true;
+        setSaving(true);
+        setSaveError('');
+        let savedEfforts = 0;
+        try {
+            if (provider !== 'cursor-subscription') {
+                for (const { model, effort } of models.efforts) {
+                    await callSubscriptionsAuth(rpc, 'setModelDefault', { provider, model, ...(effort ? { effort } : {}) });
+                    savedEfforts++;
+                    if (!alive.current)
+                        return;
+                }
+            }
+            // Re-read before writing: another client may have saved since this
+            // dialog loaded, and a stale snapshot must never be written back.
+            const latest = await callSubscriptionsAuth(rpc, provider === 'cursor-subscription' ? 'cursorSettings' : 'providerSettings', { provider });
+            if (!alive.current)
+                return;
+            if (provider === 'cursor-subscription') {
+                await callSubscriptionsAuth(rpc, 'cursorSetSettings', { settings: models.settings ?? latest.settings });
+            }
+            else {
+                const base = models.settings === undefined ? latest.settings : mergeLatestAccounts(models.settings, latest.settings);
+                await callSubscriptionsAuth(rpc, 'setProviderSettings', { provider, settings: mergeAccountChanges(base, changes) });
+            }
+            if (alive.current)
+                onClose();
+        }
+        catch (error) {
+            if (alive.current) {
+                const message = error instanceof Error ? error.message : String(error);
+                setSaveError((savedEfforts ? t('modelsPartialSave') + ' ' : '') + t('accountsSaveFailed', { message }));
+            }
+        }
+        finally {
+            saveLock.current = false;
+            if (alive.current)
+                setSaving(false);
+        }
+    }
+    return _jsx("dialog", { ref: dialog, "aria-labelledby": title, "aria-describedby": description, onCancel: event => { if (saveLock.current)
+            event.preventDefault(); }, onClose: onClose, style: { width: 620, maxWidth: 'calc(100vw - 32px)', maxHeight: 'calc(100dvh - 32px)', boxSizing: 'border-box',
+            padding: 0, border, borderRadius: 16, color: 'var(--dsw-alias-label-primary)',
+            background: 'var(--dsw-alias-bg-layer-1)', boxShadow: '0 20px 70px #0004', overflow: 'auto' }, children: _jsxs("div", { style: { ...stack, padding: 20 }, children: [_jsxs("header", { style: { ...actions, justifyContent: 'space-between' }, children: [_jsx("h2", { id: title, style: { margin: 0, fontSize: 18 }, children: t('accountsTitle', { provider: name }) }), _jsx("button", { type: "button", autoFocus: true, style: button, disabled: saving, onClick: onClose, children: t('imageClose') })] }), _jsx("p", { id: description, style: hint, children: t(provider === 'cursor-subscription' ? 'cursorAccountsHint' : 'accountsHint') }), error && _jsx("p", { role: "alert", style: { ...hint, color: 'var(--dsw-alias-state-error-primary)' }, children: error }), loading && _jsx("p", { role: "status", style: hint, children: t('accountsLoading') }), !loading && !catalog && _jsx("button", { type: "button", style: button, onClick: () => setAttempt(value => value + 1), children: t('modelDefaultsRetry') }), catalog && _jsxs("fieldset", { disabled: saving || loading, style: { ...stack, border: 0, margin: 0, padding: 0 }, children: [catalog.accounts.length === 0 && _jsx("p", { style: hint, children: t(provider === 'cursor-subscription' ? 'cursorManageSignIn' : 'accountsEmpty') }), provider === 'cursor-subscription' && catalog.accounts.length > 0 &&
+                            _jsxs("fieldset", { style: { border, borderRadius: 12, padding: 14 }, children: [_jsx("legend", { style: { padding: '0 6px', fontWeight: 600, fontSize: 14 }, children: name }), _jsx("p", { style: hint, children: t('cursorConnected') })] }), provider !== 'cursor-subscription' && catalog.accounts.map(account => {
+                            const preferences = changes[account.key] ?? catalog.settings.accounts?.[account.key] ?? {};
+                            const selected = accountPoolSelection(preferences, account.models);
+                            const models = accountModelRows(account, preferences);
+                            return _jsxs("fieldset", { style: { ...stack, border, borderRadius: 12, padding: 14, margin: 0 }, children: [_jsx("legend", { style: { padding: '0 6px', fontWeight: 600, fontSize: 14, overflowWrap: 'anywhere', maxWidth: '100%' }, children: account.label }), account.unavailable && _jsx("p", { style: hint, children: t('accountsCatalogUnavailable') }), _jsxs("label", { style: { ...stack, gap: 6 }, children: [_jsx("span", { style: { fontSize: 12 }, children: t('accountsAlias') }), _jsx("input", { style: control, value: preferences.alias ?? '', placeholder: account.label, onChange: event => {
+                                                    const next = { ...preferences };
+                                                    if (event.target.value.trim())
+                                                        next.alias = event.target.value;
+                                                    else
+                                                        delete next.alias;
+                                                    edit(account.key, next);
+                                                } })] }), _jsxs("label", { children: [_jsx("input", { type: "checkbox", checked: preferences.poolEnabled !== false, onChange: event => edit(account.key, { ...preferences, poolEnabled: event.target.checked }) }), " ", t('accountsPoolEnabled')] }), _jsxs("label", { children: [_jsx("input", { type: "checkbox", checked: preferences.independentEntry === true, onChange: event => edit(account.key, { ...preferences, independentEntry: event.target.checked }) }), " ", t('accountsIndependent')] }), _jsx("p", { style: hint, children: t('accountsIndependentHint') }), _jsxs("details", { children: [_jsxs("summary", { style: { cursor: 'pointer', fontSize: 13 }, children: [t('accountsModels'), " \u00B7 ", preferences.poolModels === undefined
+                                                        ? t('accountsModelsAll') : t('accountsModelsCount', { count: preferences.poolModels.length })] }), _jsxs("div", { style: { ...stack, marginTop: 12 }, children: [_jsx("p", { style: hint, children: t('accountsModelsHint') }), _jsxs("label", { children: [_jsx("input", { type: "checkbox", checked: preferences.poolModels === undefined, onChange: event => {
+                                                                    const next = { ...preferences };
+                                                                    if (event.target.checked)
+                                                                        delete next.poolModels;
+                                                                    else
+                                                                        next.poolModels = account.models.map(model => model.id);
+                                                                    edit(account.key, next);
+                                                                } }), " ", t('accountsModelsAutomatic')] }), _jsxs("div", { style: actions, children: [_jsx("button", { type: "button", style: button, onClick: () => edit(account.key, { ...preferences, poolModels: models.map(model => model.id) }), children: t('modelsSelectAll') }), _jsx("button", { type: "button", style: button, onClick: () => edit(account.key, { ...preferences, poolModels: [] }), children: t('modelsSelectNone') })] }), _jsxs("div", { style: { ...stack, gap: 8, maxHeight: 240, overflowY: 'auto' }, children: [models.map(model => _jsxs("label", { style: { fontSize: 13, overflowWrap: 'anywhere' }, children: [_jsx("input", { type: "checkbox", checked: selected.has(model.id), onChange: event => {
+                                                                            const next = new Set(selected);
+                                                                            if (event.target.checked)
+                                                                                next.add(model.id);
+                                                                            else
+                                                                                next.delete(model.id);
+                                                                            edit(account.key, { ...preferences, poolModels: [...next] });
+                                                                        } }), " ", model.name, model.unavailable && ` (${t('modelsUnavailable')})`] }, model.id)), models.length === 0 && _jsx("p", { style: hint, children: t('accountsNoModels') })] })] })] })] }, account.key);
+                        })] }), (provider !== 'cursor-subscription' || (catalog?.accounts.length ?? 0) > 0) &&
+                    _jsx(ProviderModelEditor, { ref: editor, provider: provider, rpc: rpc, t: t, disabled: saving, onDirtyChange: setModelsDirty }), _jsxs("footer", { style: { ...stack, gap: 8, borderTop: border, padding: '14px 0 0',
+                        position: 'sticky', bottom: 0, background: 'var(--dsw-alias-bg-layer-1)' }, children: [saveError && _jsx("p", { role: "alert", style: { ...hint, color: 'var(--dsw-alias-state-error-primary)' }, children: saveError }), _jsxs("div", { style: { ...actions, justifyContent: 'flex-end' }, children: [_jsx("button", { type: "button", style: button, disabled: saving, onClick: onClose, children: t('cancel') }), _jsx("button", { type: "button", style: { ...button, fontWeight: 600 }, disabled: loading || saving || (!Object.keys(changes).length && !modelsDirty), onClick: () => { void save(); }, children: saving ? t('modelDefaultsSaving') : t('modelsSave') })] })] })] }) });
+}

package/lib/client/ProviderModelEditor.d.ts

@@ -0,0 +1,39 @@
+import type { ConnectionHandle } from '@deepseek-ai/dsh-api-remotes/client';
+import type { ProviderPreferences } from '../provider-settings.js';
+import type { SubscriptionProvider } from './SubscriptionsSection.js';
+import type { SubscriptionsKey } from './locales.js';
+interface Props {
+    provider: SubscriptionProvider | 'cursor-subscription';
+    rpc: ConnectionHandle['rpc'];
+    t: (key: SubscriptionsKey, params?: Record<string, unknown>) => string;
+    /** Freeze the editor while the owning dialog submits. */
+    disabled?: boolean;
+    /** Reports whether the draft differs from the loaded catalog. */
+    onDirtyChange?: (dirty: boolean) => void;
+}
+/** The editor's unsaved edits, collected by the owning dialog's single Save. */
+export interface ModelDraft {
+    /** Provider settings minus `accounts`; absent when the draft has no edits. */
+    settings?: ProviderPreferences;
+    /** Reasoning-effort overrides that differ from the catalog; '' clears one. */
+    efforts: {
+        model: string;
+        effort: string;
+    }[];
+}
+export interface ProviderModelEditorHandle {
+    /**
+     * Validate and collect the draft without mutating it, so a failed submit
+     * keeps every edit. Returns undefined when a value is invalid; the editor
+     * shows the reason itself.
+     */
+    collect(): ModelDraft | undefined;
+}
+/**
+ * Embedded section of the account manager dialog. It owns the model draft
+ * (visibility, effort, context, tools) but not its submission: the dialog
+ * collects the draft through the handle and saves it with the account edits
+ * in one go, so there is a single Save/Cancel pair.
+ */
+export declare const ProviderModelEditor: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<ProviderModelEditorHandle>>;
+export {};