dsh-plugin-subscription-usage 0.0.0-stage → 0.1.0

package/lib/client/Footer.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Plugin-wide options after the Models provider rows
+ * (`settings.models.footer`): the subscription-only proxy. Usage options live in the Usage page.
+ */
+import { useEffect, useState } from 'react';
+import { call } from './rpc.js';
+import { tf } from './meter.js';
+export function Footer(props) {
+    const { store, prefs, rpc, t } = props;
+    if (store === undefined || prefs === undefined || rpc === undefined || t === undefined)
+        return null;
+    return _jsx(FooterBody, { rpc: rpc, t: t });
+}
+function FooterBody({ rpc, t }) {
+    return (_jsxs("section", { className: "dsm-footer-block", "aria-labelledby": "dsm-footer-title", children: [_jsx("h3", { id: "dsm-footer-title", children: t('subscriptions') }), _jsx(ProxyRow, { t: t, rpc: rpc })] }));
+}
+function ProxyRow({ t, rpc }) {
+    const [config, setConfig] = useState();
+    const [open, setOpen] = useState(false);
+    const [url, setUrl] = useState('');
+    const [bypass, setBypass] = useState('');
+    const [enabled, setEnabled] = useState(false);
+    const [message, setMessage] = useState();
+    const [busy, setBusy] = useState(false);
+    useEffect(() => {
+        let live = true;
+        call(rpc, 'proxyGet', {}).then(value => { if (live)
+            setConfig(value); }, () => undefined);
+        return () => { live = false; };
+    }, [rpc]);
+    const edit = () => {
+        setUrl(config?.url ?? '');
+        setBypass((config?.bypass ?? []).join(', '));
+        setEnabled(config?.enabled ?? false);
+        setMessage(undefined);
+        setOpen(true);
+    };
+    const save = async () => {
+        setBusy(true);
+        setMessage(undefined);
+        try {
+            const saved = await call(rpc, 'proxySet', {
+                enabled, url: url.trim(), bypass: bypass.split(',').map(entry => entry.trim()).filter(entry => entry !== ''),
+            });
+            setConfig(saved);
+            setOpen(false);
+        }
+        catch (failure) {
+            setMessage(tf(t, 'saveFailed', { message: failure instanceof Error ? failure.message : String(failure) }));
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    const test = async () => {
+        setBusy(true);
+        setMessage(undefined);
+        try {
+            const result = await call(rpc, 'proxyTest', url.trim() === '' ? {} : { proxy: { url: url.trim() } });
+            setMessage(result.ok && result.status !== undefined
+                ? tf(t, 'proxyTestOk', { status: result.status, ms: result.latencyMs ?? 0 })
+                : result.error ?? '');
+        }
+        catch (failure) {
+            setMessage(failure instanceof Error ? failure.message : String(failure));
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "dsm-row", children: [_jsxs("span", { className: "dsm-grow", children: [t('proxy'), " ", _jsx("span", { className: "dsm-note", children: config?.enabled === true ? config.url : t('proxyOff') })] }), open ? null : _jsx("button", { type: "button", className: "dsm-btn", onClick: edit, children: t('configure') })] }), open ? (_jsxs("div", { className: "dsm-panel", style: { paddingTop: 12 }, children: [_jsxs("div", { className: "dsm-row", children: [_jsx("span", { className: "dsm-grow", children: t('proxyEnabled') }), _jsx("button", { type: "button", role: "switch", className: "dsm-switch", "aria-checked": enabled, "aria-label": t('proxyEnabled'), onClick: () => { setEnabled(value => !value); } })] }), _jsx("input", { className: "dsm-input", value: url, placeholder: "http://127.0.0.1:7890", "aria-label": t('proxyUrl'), onChange: event => { setUrl(event.target.value); } }), _jsx("input", { className: "dsm-input", value: bypass, placeholder: t('proxyBypass'), "aria-label": t('proxyBypass'), onChange: event => { setBypass(event.target.value); } }), _jsxs("div", { className: "dsm-panel-foot", children: [message === undefined ? null : _jsx("span", { className: "dsm-note", role: "status", style: { marginRight: 'auto' }, children: message }), _jsx("button", { type: "button", className: "dsm-btn dsm-ghost", disabled: busy, onClick: () => { void test(); }, children: t('proxyTest') }), _jsx("button", { type: "button", className: "dsm-btn dsm-ghost", onClick: () => { setOpen(false); }, children: t('cancel') }), _jsx("button", { type: "button", className: "dsm-btn dsm-primary", disabled: busy, onClick: () => { void save(); }, children: t('save') })] })] })) : null] }));
+}

package/lib/client/Gauge.d.ts

@@ -0,0 +1,28 @@
+import type { UsageProviderId as ProviderId } from './rpc.js';
+import type { StoreSnapshot } from './store.js';
+import type { SurfaceInjected } from './context.js';
+import type { UsagePreferencesView } from './prefs.js';
+/** The session's model selection, as `modelDirectories` publishes it. */
+export interface CurrentModelSource {
+    getSnapshot(): {
+        current: {
+            provider: string;
+            model: string;
+        } | null;
+    };
+    subscribe(listener: () => void): () => void;
+}
+export interface GaugeInjected extends SurfaceInjected {
+    sessionId: string;
+    /** Undefined when the model-selection service is not mounted. */
+    currentModel: CurrentModelSource | undefined;
+}
+/** Providers the gauge shows: the current model's provider first, then the pinned ones. */
+export declare function gaugeProviders(prefs: UsagePreferencesView, current: string | undefined, snapshot: StoreSnapshot): ProviderId[];
+/** Every provider the popover can list: the shown ones first, then the rest in page order. */
+export declare function popoverProviders(shown: readonly ProviderId[], snapshot: StoreSnapshot): {
+    shown: ProviderId[];
+    others: ProviderId[];
+};
+export type GaugeProps = Partial<GaugeInjected>;
+export declare function Gauge(props: GaugeProps): import("react").JSX.Element | null;

package/lib/client/Gauge.js

@@ -0,0 +1,139 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Composer usage gauge and its popover. Rendered under the composer
+ * (`conversation.composer.dock`) once a conversation exists, and in the
+ * New Session row (`conversation.hero.options`) before the first prompt.
+ */
+import { useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from 'react';
+import { createPortal } from 'react-dom';
+import { isMetered, isUsageProviderId, USAGE_PROVIDERS, shortName } from './rpc.js';
+import { activeAccountKey, splitAccounts, usageKey } from './store.js';
+import { Icon, Minis, tf } from './meter.js';
+import { Account } from './ProviderCard.js';
+import { useNow } from './hooks.js';
+import { usePrefs, useStore } from './context.js';
+const noSubscribe = () => () => undefined;
+/** Select the provider string itself, so the snapshot compares by value. */
+function useCurrentProvider(source) {
+    return useSyncExternalStore(source?.subscribe ?? noSubscribe, () => source?.getSnapshot().current?.provider);
+}
+/** A provider the composer can show: signed in and reporting usage. */
+const showable = (snapshot, id) => isMetered(snapshot.status, id) && (snapshot.status?.providers[id]?.accounts.length ?? 0) > 0;
+/** Providers the gauge shows: the current model's provider first, then the pinned ones. */
+export function gaugeProviders(prefs, current, snapshot) {
+    if (snapshot.status === undefined)
+        return [];
+    const ids = new Set(isUsageProviderId(current) ? [current, ...prefs.pinned] : prefs.pinned);
+    return [...ids].filter(id => showable(snapshot, id));
+}
+/** Every provider the popover can list: the shown ones first, then the rest in page order. */
+export function popoverProviders(shown, snapshot) {
+    return { shown: [...shown], others: USAGE_PROVIDERS.filter(id => !shown.includes(id) && showable(snapshot, id)) };
+}
+function windowsOf(snapshot, provider) {
+    const key = activeAccountKey(snapshot.status?.providers[provider]);
+    if (key === undefined)
+        return undefined;
+    const entry = snapshot.usage.get(usageKey(provider, key));
+    return entry?.kind === 'ready' ? entry.usage.windows : undefined;
+}
+export function Gauge(props) {
+    const { store, prefs, rpc, t, sessionId } = props;
+    if (store === undefined || prefs === undefined || rpc === undefined || t === undefined || sessionId === undefined)
+        return null;
+    return _jsx(GaugeBody, { ...props, store: store, prefs: prefs, rpc: rpc, t: t, sessionId: sessionId, currentModel: props.currentModel });
+}
+function GaugeBody({ store, prefs, t, sessionId, currentModel, openSettings }) {
+    const snapshot = useStore(store);
+    const prefView = usePrefs(prefs);
+    const current = useCurrentProvider(currentModel);
+    const now = useNow(30_000);
+    const [open, setOpen] = useState(false);
+    const anchor = useRef(null);
+    useEffect(() => { store.focusSession(sessionId); }, [store, sessionId]);
+    if (!prefView.composer || snapshot.status === undefined)
+        return null;
+    const shown = gaugeProviders(prefView, current, snapshot);
+    // Nothing to show and nothing to open: no subscription reports usage.
+    if (shown.length === 0 && popoverProviders(shown, snapshot).others.length === 0)
+        return null;
+    const toggle = () => {
+        setOpen(value => {
+            // Opening re-reads anything older than a minute; the Host enforces that bound.
+            if (!value)
+                void store.refreshUsage('open');
+            return !value;
+        });
+    };
+    return (_jsxs("span", { className: "dsm-gauge-slot", children: [_jsx("button", { ref: anchor, type: "button", className: "dsm-gauge", "aria-expanded": open, "aria-haspopup": "dialog", "aria-label": t('usageLabel'), title: shown.length === 0 ? t('usageLabel') : undefined, onClick: toggle, children: shown.length === 0 ? _jsx(Icon, { name: "meter" }) : shown.map(provider => (_jsxs("span", { className: "dsm-gp", children: [_jsx("span", { className: "dsm-gp-name", children: shortName(snapshot.status, provider) }), _jsx(Minis, { t: t, windows: windowsOf(snapshot, provider), display: prefView.display, now: now })] }, provider))) }), open ? createPortal(_jsx(Popover, { t: t, store: store, prefs: prefs, snapshot: snapshot, prefView: prefView, shown: shown, now: now, anchor: anchor, onClose: () => { setOpen(false); anchor.current?.focus(); }, ...openSettings === undefined ? {} : { onOpenSettings: () => { setOpen(false); openSettings(); } } }), document.body) : null] }));
+}
+function Popover({ t, store, prefs, snapshot, prefView, shown, now, anchor, onClose, onOpenSettings }) {
+    const panel = useRef(null);
+    const [position, setPosition] = useState();
+    const [openSections, setOpenSections] = useState(() => new Set(shown));
+    const [othersOpen, setOthersOpen] = useState(false);
+    const [openMore, setOpenMore] = useState(() => new Set());
+    const [manualAt, setManualAt] = useState();
+    // Above the anchor like the host's stat dialogs; below it when there is no room (the New Session row).
+    useLayoutEffect(() => {
+        const place = () => {
+            const a = anchor.current?.getBoundingClientRect();
+            const p = panel.current?.getBoundingClientRect();
+            if (a === undefined || p === undefined)
+                return;
+            const left = Math.min(Math.max(8, a.left + a.width / 2 - p.width / 2), window.innerWidth - p.width - 8);
+            const above = a.top - p.height - 8;
+            setPosition({ left, top: above >= 8 ? above : a.bottom + 8 });
+        };
+        place();
+        window.addEventListener('resize', place);
+        return () => { window.removeEventListener('resize', place); };
+    }, [anchor, openSections, openMore, othersOpen, snapshot]);
+    useEffect(() => {
+        const onKey = (event) => { if (event.key === 'Escape')
+            onClose(); };
+        const onPointer = (event) => {
+            const target = event.target;
+            if (!(target instanceof Node))
+                return;
+            if (panel.current?.contains(target) === true || anchor.current?.contains(target) === true)
+                return;
+            onClose();
+        };
+        document.addEventListener('keydown', onKey);
+        document.addEventListener('pointerdown', onPointer, true);
+        return () => {
+            document.removeEventListener('keydown', onKey);
+            document.removeEventListener('pointerdown', onPointer, true);
+        };
+    }, [anchor, onClose]);
+    const { others } = popoverProviders(shown, snapshot);
+    const refreshing = snapshot.refreshing.size > 0;
+    const cooling = manualAt !== undefined && now - manualAt < 30_000;
+    const toggleIn = (set, id) => {
+        const next = new Set(set);
+        if (next.has(id))
+            next.delete(id);
+        else
+            next.add(id);
+        return next;
+    };
+    const renderSection = (provider) => {
+        const status = snapshot.status?.providers[provider];
+        if (status === undefined)
+            return null;
+        const split = splitAccounts(status);
+        if (split === undefined)
+            return null;
+        const { active, rest } = split;
+        const sectionOpen = openSections.has(provider);
+        const pinned = prefView.pinned.includes(provider);
+        const pinLabel = pinned ? t('unpin') : t('pin');
+        return (_jsxs("div", { className: "dsm-psec", children: [_jsxs("div", { className: "dsm-psec-head", children: [_jsxs("button", { type: "button", className: "dsm-fold", "aria-expanded": sectionOpen, onClick: () => { setOpenSections(s => toggleIn(s, provider)); }, children: [_jsxs("span", { className: "dsm-fold-name", children: [_jsx(Icon, { name: "right", size: 12, className: "dsm-chev" }), _jsx("span", { className: "dsm-psec-name", children: shortName(snapshot.status, provider) })] }), sectionOpen ? _jsx("span", {}) : _jsx(Minis, { t: t, windows: windowsOf(snapshot, provider), display: prefView.display, now: now })] }), _jsx("button", { type: "button", className: "dsm-btn dsm-icon dsm-sm dsm-pin", "aria-pressed": pinned, title: pinLabel, "aria-label": pinLabel, onClick: () => { void prefs.togglePinned(provider); }, children: _jsx(Icon, { name: pinned ? 'pinFilled' : 'pin', size: 12 }) })] }), sectionOpen ? (_jsxs("div", { className: "dsm-fold-body", children: [_jsx(Account, { t: t, provider: provider, account: active, status: status, snapshot: snapshot, prefs: prefView, now: now, compact: true }), rest.length === 0 ? null : (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", className: "dsm-fold", "aria-expanded": openMore.has(provider), onClick: () => { setOpenMore(s => toggleIn(s, provider)); }, children: [_jsxs("span", { className: "dsm-fold-name", children: [_jsx(Icon, { name: "right", size: 12, className: "dsm-chev" }), _jsx("span", { children: rest.length === 1 ? rest[0].account ?? rest[0].key : tf(t, 'moreAccounts', { count: rest.length }) })] }), rest.length === 1 ? _jsx(MinisFor, { t: t, snapshot: snapshot, provider: provider, account: rest[0].key, prefs: prefView, now: now }) : _jsx("span", {})] }), openMore.has(provider) ? (_jsx("div", { className: "dsm-fold-body", children: rest.map(account => _jsx(Account, { t: t, provider: provider, account: account, status: status, snapshot: snapshot, prefs: prefView, now: now, compact: true }, account.key)) })) : null] }))] })) : null] }, provider));
+    };
+    return (_jsxs("div", { ref: panel, className: "dsm-pop", role: "dialog", "aria-label": t('usageLabel'), style: position === undefined ? { visibility: 'hidden', left: 0, top: 0 } : { left: position.left, top: position.top }, children: [_jsxs("div", { className: "dsm-pop-head", children: [_jsx("b", { children: t('usage') }), _jsx("button", { type: "button", className: `dsm-btn dsm-icon${refreshing ? ' dsm-spinning' : ''}`, disabled: refreshing || cooling, title: cooling ? tf(t, 'refreshedWait', { seconds: Math.ceil((30_000 - (now - (manualAt ?? now))) / 1000) }) : t('refreshNow'), "aria-label": t('refreshNow'), onClick: () => { setManualAt(Date.now()); void store.refreshUsage('manual'); }, children: _jsx(Icon, { name: cooling && !refreshing ? 'check' : 'refresh' }) }), onOpenSettings === undefined ? null : (_jsx("button", { type: "button", className: "dsm-btn dsm-icon", title: t('usageSettings'), "aria-label": t('usageSettings'), onClick: onOpenSettings, children: _jsx(Icon, { name: "gear" }) }))] }), shown.map(renderSection), shown.length === 0 ? others.map(renderSection) : others.length === 0 ? null : (_jsxs("div", { className: "dsm-psec dsm-others", children: [_jsxs("button", { type: "button", className: "dsm-fold", "aria-expanded": othersOpen, onClick: () => { setOthersOpen(value => !value); }, children: [_jsxs("span", { className: "dsm-fold-name", children: [_jsx(Icon, { name: "right", size: 12, className: "dsm-chev" }), _jsx("span", { className: "dsm-psec-name", children: tf(t, 'otherProviders', { count: others.length }) })] }), _jsx("span", {})] }), othersOpen ? others.map(renderSection) : null] }))] }));
+}
+function MinisFor({ t, snapshot, provider, account, prefs, now }) {
+    const entry = snapshot.usage.get(usageKey(provider, account));
+    return _jsx(Minis, { t: t, windows: entry?.kind === 'ready' ? entry.usage.windows : undefined, display: prefs.display, now: now });
+}

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,130 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ImageGallery } from './ImageGallery.js';
+import { Icon } from './meter.js';
+import { call } from './rpc.js';
+import { en } from './locales.js';
+/** 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 => call(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 : 'argsRaw' in block ? 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(Icon, { name: "sparkle", 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/Notice.d.ts

@@ -0,0 +1,15 @@
+import type { StoreSnapshot } from './store.js';
+import type { T } from './meter.js';
+import type { SurfaceInjected } from './context.js';
+export interface PaceNotice {
+    id: string;
+    tone: 'warn' | 'error';
+    text: string;
+}
+/**
+ * The most urgent notice across the serving accounts, or undefined.
+ * Only serving or default accounts warn; an idle account's pace is not the user's problem yet.
+ */
+export declare function currentNotice(t: T, snapshot: StoreSnapshot, now: number, dismissed: ReadonlySet<string>): PaceNotice | undefined;
+export type NoticeProps = Partial<SurfaceInjected>;
+export declare function Notice(props: NoticeProps): import("react").JSX.Element | null;