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

package/lib/client/SpeedSelect.js

@@ -0,0 +1,214 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Codex Speed toggle: one small control in the composer's right tool row
+ * (`conversation.input.right`), switching the session between standard routing
+ * and the fast (priority) service tier — the Codex desktop app's Speed menu.
+ * The choice is per session and lives in the node half (in-memory); this
+ * component holds only viewing state. The control renders nothing until the
+ * first load proves the session's current model is a codex model whose catalog
+ * advertises the fast tier.
+ *
+ * Every color resolves through a `--dsw-alias-*` design token and every
+ * user-visible string goes through the locale `t` of the
+ * 'subscription-models' namespace, same as the settings section.
+ */
+import { useEffect, useRef, useState } from 'react';
+import { call } from './rpc.js';
+import { en } from './locales.js';
+/**
+ * The `loadSpeed` half of the inject face: the plugin's own speed state plus
+ * the host's current model selection (the visibility gate). A model-RPC
+ * failure throws rather than answering "hidden" — the caller keeps its last
+ * known state, so a transient failure never locks the toggle away.
+ *
+ * `sessionId` is a plain string: slot and command contexts brand it through
+ * different dsh-session copies, and only the service boundary needs one.
+ *
+ * `models` resolves lazily per call: the ui-model-selection service may
+ * register after this plugin applies, and a shell without it (no model seat
+ * at all) simply keeps the toggle hidden.
+ */
+export function createSpeedLoader(connection, models, sessionId) {
+    return async () => {
+        const directories = models();
+        const directory = directories?.directoryFor(sessionId);
+        const current = (await directory?.load())?.current ?? null;
+        const state = await call(connection.rpc, 'speed', {
+            sessionId, ...(current?.provider === 'codex' ? { model: current.model } : {}),
+        });
+        const visible = current !== null && current.provider === 'codex'
+            && state.fastModels.includes(current.model);
+        // Selection may change while the speed RPC is pending.
+        const latest = (await directory?.load())?.current ?? null;
+        if (latest?.provider !== current?.provider || latest?.model !== current?.model) {
+            throw new Error('Model changed while loading speed');
+        }
+        return { visible, tier: state.tier, ...(visible && current ? { model: current.model } : {}) };
+    };
+}
+/** The `setSpeed` half of the inject face: boolean outcome for the component's busy state. */
+export function createSpeedSetter(connection, sessionId, models) {
+    return async (tier, displayedModel) => {
+        try {
+            const directories = models?.();
+            const current = directories === undefined ? null : (await directories.directoryFor(sessionId).load()).current;
+            if (models !== undefined && current?.provider !== 'codex')
+                return false;
+            if (displayedModel !== undefined && current?.model !== displayedModel)
+                return false;
+            await call(connection.rpc, 'setSpeed', {
+                sessionId, tier, ...(current?.provider === 'codex' ? { model: current.model } : {}),
+            });
+            return true;
+        }
+        catch {
+            return false; // The control keeps its last confirmed value on load or save failure.
+        }
+    };
+}
+/** English-dictionary fallback for a missing inject `t` (standalone renders). */
+function fallbackTranslate(key) {
+    return en[key];
+}
+const TIERS = ['standard', 'fast'];
+/**
+ * The composer Speed control: a trigger reading `速度 · 快速`/`速度 · 标准`
+ * that opens a two-row menu (standard/fast with descriptions, check mark on
+ * the current tier). Mount and every open reload the host state so a model
+ * switch made since the last open self-corrects.
+ */
+/** How often the control re-reads the host state (model switches arrive only by asking). */
+const POLL_INTERVAL_MS = 3000;
+/**
+ * The composer Speed control: a trigger reading `速度 · 快速`/`速度 · 标准`
+ * that opens a two-row menu (standard/fast with descriptions, check mark on
+ * the current tier). The host pushes nothing on a model switch, so the
+ * control re-reads on a slow poll with a single-flight guard; a failed read
+ * keeps the last known state, so a transient RPC failure can never lock the
+ * toggle away (the earlier mount-only load had no recovery path).
+ */
+export function SpeedSelect({ loadSpeed, setSpeed, t }) {
+    const translate = t ?? fallbackTranslate;
+    const [state, setState] = useState(null);
+    const [open, setOpen] = useState(false);
+    const [busy, setBusy] = useState(false);
+    const rootRef = useRef(null);
+    // The inject face may be re-evaluated (new callback identities) on re-render;
+    // the poll effect mounts once and reads through this ref, so identity churn
+    // neither resets the interval nor multiplies in-flight loads.
+    const loadRef = useRef(loadSpeed);
+    loadRef.current = loadSpeed;
+    const generation = useRef(0);
+    const mounted = useRef(false);
+    const refresh = async () => {
+        if (!mounted.current)
+            return;
+        const id = ++generation.current;
+        try {
+            const loaded = await loadRef.current?.();
+            if (loaded && id === generation.current)
+                setState(loaded);
+        }
+        catch { /* preserve the last confirmed state; a later poll can retry */ }
+    };
+    useEffect(() => {
+        if (loadRef.current === undefined)
+            return;
+        mounted.current = true;
+        let cancelled = false;
+        let inflight = false;
+        const reload = () => {
+            const load = loadRef.current;
+            if (load === undefined || inflight || cancelled)
+                return;
+            inflight = true;
+            void refresh().finally(() => { inflight = false; });
+        };
+        reload();
+        const timer = setInterval(reload, POLL_INTERVAL_MS);
+        return () => {
+            mounted.current = false;
+            ++generation.current;
+            cancelled = true;
+            clearInterval(timer);
+        };
+    }, []);
+    useEffect(() => {
+        if (!open)
+            return;
+        const closeOutside = (event) => {
+            if (!rootRef.current?.contains(event.target))
+                setOpen(false);
+        };
+        document.addEventListener('mousedown', closeOutside);
+        return () => { document.removeEventListener('mousedown', closeOutside); };
+    }, [open]);
+    if (loadSpeed === undefined || setSpeed === undefined || state === null || !state.visible) {
+        return null;
+    }
+    const choose = (tier) => {
+        if (busy)
+            return;
+        if (tier === state.tier) {
+            setOpen(false);
+            return;
+        }
+        setBusy(true);
+        void setSpeed(tier, state.model).then((ok) => {
+            if (!mounted.current)
+                return;
+            setBusy(false);
+            if (ok)
+                setOpen(false);
+            void refresh(); // Read the currently selected model, even when the save concerned another.
+        }, () => { if (mounted.current) {
+            setBusy(false);
+            void refresh();
+        } });
+    };
+    const show = () => {
+        setOpen(true);
+        void refresh();
+    };
+    const tierName = (tier) => translate(tier === 'fast' ? 'speedFast' : 'speedStandard');
+    const tierDescription = (tier) => translate(tier === 'fast' ? 'speedFastDescription' : 'speedStandardDescription');
+    const triggerLabel = `${translate('speed')} · ${tierName(state.tier)}`;
+    return (_jsxs("div", { ref: rootRef, className: "dsh-subscription-speed", style: styles.root, onKeyDown: (event) => {
+            if (event.key === 'Escape' && open) {
+                event.preventDefault();
+                setOpen(false);
+            }
+        }, children: [open && (_jsx("div", { style: styles.menu, role: "menu", "aria-label": translate('speed'), children: TIERS.map(tier => (_jsxs("button", { type: "button", role: "menuitemradio", "aria-checked": tier === state.tier, style: styles.item, disabled: busy, onClick: () => { choose(tier); }, children: [_jsx("span", { style: styles.itemCheck, children: tier === state.tier ? '✓' : '' }), _jsxs("span", { style: styles.itemText, children: [_jsx("span", { style: styles.itemName, children: tierName(tier) }), _jsx("span", { style: styles.itemDescription, children: tierDescription(tier) })] })] }, tier))) })), _jsx("button", { type: "button", style: styles.trigger, "aria-haspopup": "menu", "aria-expanded": open, title: triggerLabel, disabled: busy, onClick: () => {
+                    if (open)
+                        setOpen(false);
+                    else
+                        show();
+                }, children: triggerLabel })] }));
+}
+const styles = {
+    root: { position: 'relative', display: 'inline-flex' },
+    trigger: {
+        border: '0.5px solid var(--dsw-alias-border-l3)', borderRadius: 'var(--dsw-radius-sm, 8px)',
+        background: 'var(--dsh-subscription-speed-hover, transparent)', color: 'var(--dsw-alias-label-secondary)',
+        font: 'inherit', fontSize: 12, lineHeight: '18px',
+        padding: '2px 8px', cursor: 'pointer', whiteSpace: 'nowrap',
+    },
+    menu: {
+        position: 'absolute', bottom: '100%', right: 0, marginBottom: 4,
+        minWidth: 180, padding: 4, zIndex: 20,
+        background: 'var(--dsw-specific-menu, var(--dsw-alias-bg-layer-2))', border: 0,
+        boxShadow: 'var(--dsw-elevation-prominent)', borderRadius: 'var(--dsw-radius-lg, 16px)', display: 'flex', flexDirection: 'column', gap: 2,
+    },
+    item: {
+        display: 'flex', alignItems: 'flex-start', gap: 6, width: '100%',
+        border: 'none', borderRadius: 'var(--dsw-radius-sm, 8px)', background: 'var(--dsh-subscription-speed-hover, transparent)',
+        padding: '6px 8px', cursor: 'pointer', font: 'inherit', textAlign: 'left',
+    },
+    itemCheck: {
+        width: 14, flexShrink: 0, fontSize: 12, lineHeight: '18px',
+        color: 'var(--dsw-alias-label-primary)',
+    },
+    itemText: { display: 'flex', flexDirection: 'column' },
+    itemName: { fontSize: 12, lineHeight: '18px', color: 'var(--dsw-alias-label-primary)' },
+    itemDescription: { fontSize: 11, lineHeight: '16px', color: 'var(--dsw-alias-label-tertiary)' },
+};

package/lib/client/Usage.d.ts

@@ -0,0 +1,7 @@
+import type { SurfaceInjected } from './context.js';
+/** The Usage row's icon in the settings nav; the shell passes the edge size. */
+export declare function UsageNavIcon({ size }: {
+    size: number;
+}): import("react").JSX.Element;
+export type UsageProps = Partial<SurfaceInjected>;
+export declare function Usage(props: UsageProps): import("react").JSX.Element | null;

package/lib/client/Usage.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The Usage settings page (`settings.section`): one block per signed-in
+ * provider that reports usage, plus the display options. Accounts and models
+ * stay on the Models page.
+ */
+import { useState } from 'react';
+import { call, KEY_PROVIDERS } from './rpc.js';
+import { splitAccounts, usageKey } from './store.js';
+import { Account } from './ProviderCard.js';
+import { Icon, tf } from './meter.js';
+import { useNow } from './hooks.js';
+import { usePrefs, useStore } from './context.js';
+import { isMetered, USAGE_PROVIDERS, shortName } from './rpc.js';
+/** The Usage row's icon in the settings nav; the shell passes the edge size. */
+export function UsageNavIcon({ size }) {
+    return _jsx(Icon, { name: "meter", size: size });
+}
+export function Usage(props) {
+    const { store, prefs, rpc, t } = props;
+    if (store === undefined || prefs === undefined || rpc === undefined || t === undefined)
+        return null;
+    return _jsx(UsageBody, { store: store, prefs: prefs, rpc: rpc, t: t });
+}
+function Segmented({ label, value, options, disabled, onChange }) {
+    return (_jsx("span", { className: "dsm-seg", role: "group", "aria-label": label, children: options.map(([option, text]) => (_jsx("button", { type: "button", "aria-pressed": value === option, disabled: disabled, onClick: () => { onChange(option); }, children: text }, option))) }));
+}
+function maxManualReady(snapshot, provider, status) {
+    const times = status.accounts.map(a => {
+        const entry = snapshot.usage.get(usageKey(provider, a.key));
+        return entry?.kind === 'ready' ? entry.usage.manualReadyAt : undefined;
+    }).filter(at => at !== undefined);
+    return times.length === 0 ? undefined : Math.max(...times);
+}
+function UsageBody({ store, prefs, rpc, t }) {
+    const snapshot = useStore(store);
+    const view = usePrefs(prefs);
+    const now = useNow(30_000);
+    const readOnly = !view.writable;
+    const providers = USAGE_PROVIDERS.filter(provider => {
+        const status = snapshot.status?.providers[provider];
+        return status !== undefined && status.accounts.length > 0 && isMetered(snapshot.status, provider);
+    });
+    return (_jsxs("section", { className: "dsm-footer-block dsm-usage", "aria-labelledby": "dsm-usage-title", style: { marginTop: 0, borderTop: 'none', paddingTop: 0 }, children: [_jsx("h3", { id: "dsm-usage-title", children: t('usage') }), _jsxs("div", { className: "dsm-row", children: [_jsx("span", { className: "dsm-grow", children: t('showQuotaAs') }), _jsx(Segmented, { label: t('showQuotaAs'), value: view.display, disabled: readOnly, options: [['left', t('displayLeft')], ['used', t('displayUsed')]], onChange: display => { void prefs.set({ display }); } })] }), _jsxs("div", { className: "dsm-row", children: [_jsx("span", { className: "dsm-grow", children: t('paceWarnings') }), _jsx("button", { type: "button", role: "switch", className: "dsm-switch", "aria-checked": view.paceWarnings, "aria-label": t('paceWarnings'), disabled: readOnly, onClick: () => { void prefs.set({ paceWarnings: !view.paceWarnings }); } })] }), _jsxs("div", { className: "dsm-row", children: [_jsxs("span", { className: "dsm-grow", children: [t('composerUsage'), " ", _jsx("span", { className: "dsm-note", children: t('composerUsageNote') })] }), _jsx("button", { type: "button", role: "switch", className: "dsm-switch", "aria-checked": view.composer, "aria-label": t('composerUsage'), disabled: readOnly, onClick: () => { void prefs.set({ composer: !view.composer }); } })] }), providers.length === 0 ? _jsx("p", { className: "dsm-muted", style: { margin: '12px 0 0' }, children: t('usageEmpty') }) : null, providers.map(provider => {
+                const status = snapshot.status?.providers[provider];
+                const split = status === undefined ? undefined : splitAccounts(status);
+                if (status === undefined || split === undefined)
+                    return null;
+                const pinned = view.pinned.includes(provider);
+                const pinLabel = pinned ? t('unpin') : t('pin');
+                const refreshing = status.accounts.some(a => snapshot.refreshing.has(usageKey(provider, a.key)));
+                const readyAt = maxManualReady(snapshot, provider, status);
+                const cooling = readyAt !== undefined && readyAt > now;
+                return (_jsxs("div", { className: "dsm-usage-block", style: { borderTop: '.5px solid var(--dsw-alias-border-l1)', padding: '10px 0' }, children: [_jsxs("div", { className: "dsm-row", style: { minHeight: 28 }, children: [_jsx("span", { className: "dsm-grow", style: { fontWeight: 500 }, children: shortName(snapshot.status, provider) }), _jsx("button", { type: "button", className: "dsm-btn dsm-icon dsm-pin", "aria-pressed": pinned, title: pinLabel, "aria-label": pinLabel, disabled: readOnly, onClick: () => { void prefs.togglePinned(provider); }, children: _jsx(Icon, { name: pinned ? 'pinFilled' : 'pin' }) }), isKey(provider) ? (_jsx("button", { type: "button", className: "dsm-btn dsm-ghost", onClick: () => { void call(rpc, 'keysRemove', { provider }).then(() => store.refreshStatus()); }, children: t('removeKey') })) : null, _jsx("button", { type: "button", className: `dsm-btn dsm-icon${refreshing ? ' dsm-spinning' : ''}`, disabled: refreshing || cooling, title: cooling ? tf(t, 'refreshedWait', { seconds: Math.ceil((readyAt - now) / 1000) }) : t('refreshUsage'), "aria-label": tf(t, 'refreshUsageNamed', { name: provider }), onClick: () => { void store.refreshUsage('manual', provider); }, children: _jsx(Icon, { name: "refresh" }) })] }), _jsx(Account, { t: t, provider: provider, account: split.active, status: status, snapshot: snapshot, prefs: view, now: now, compact: true }), split.rest.map(account => _jsx(Account, { t: t, provider: provider, account: account, status: status, snapshot: snapshot, prefs: view, now: now, compact: true }, account.key))] }, provider));
+            }), _jsx(AddProvider, { t: t, store: store, rpc: rpc, unconfigured: KEY_PROVIDERS.filter(id => snapshot.status?.keyProviders?.find(v => v.id === id)?.configured !== true), names: snapshot.status?.keyProviders ?? [] })] }));
+}
+const isKey = (provider) => KEY_PROVIDERS.includes(provider);
+function AddProvider({ t, store, rpc, unconfigured, names }) {
+    const [picked, setPicked] = useState();
+    const [key, setKey] = useState('');
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState();
+    if (unconfigured.length === 0)
+        return null;
+    const save = async (id) => {
+        setBusy(true);
+        setError(undefined);
+        try {
+            await call(rpc, 'keysSet', { provider: id, key });
+            setKey('');
+            setPicked(undefined);
+            await store.refreshStatus();
+        }
+        catch (failure) {
+            setError(failure instanceof Error ? failure.message : String(failure));
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    const nameOf = (id) => names.find(v => v.id === id)?.name ?? id;
+    return (_jsxs("div", { className: "dsm-usage-block", style: { borderTop: '.5px solid var(--dsw-alias-border-l1)', padding: '10px 0' }, children: [_jsxs("div", { className: "dsm-row", style: { minHeight: 28 }, children: [_jsx("span", { className: "dsm-grow dsm-muted", children: t('addProvider') }), unconfigured.map(id => (_jsx("button", { type: "button", className: "dsm-btn", "aria-pressed": picked === id, onClick: () => { setPicked(picked === id ? undefined : id); setError(undefined); }, children: nameOf(id) }, id)))] }), picked === undefined ? null : (_jsxs("div", { className: "dsm-panel", style: { paddingTop: 8 }, children: [_jsx("input", { className: "dsm-input", type: "password", autoComplete: "off", value: key, placeholder: t('apiKey'), "aria-label": `${nameOf(picked)} ${t('apiKey')}`, onChange: event => { setKey(event.target.value); } }), _jsxs("div", { className: "dsm-panel-foot", children: [_jsx("span", { className: "dsm-note", role: "status", style: { marginRight: 'auto' }, children: busy ? t('keyChecking') : error ?? t('keyHelp') }), _jsx("button", { type: "button", className: "dsm-btn dsm-primary", disabled: busy || key.trim() === '', onClick: () => { void save(picked); }, children: t('addKey') })] })] }))] }));
+}

package/lib/client/VideoGenerateToolview.d.ts

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

package/lib/client/VideoGenerateToolview.js

@@ -0,0 +1,172 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Keyed toolview for the `video_generate` tool: renders the generated video
+ * inline in the conversation. The row shows the call's prompt while running
+ * and after settling; a settled success loads the MP4 bytes through the node
+ * half's `/subscriptions-auth` `video` endpoint (by bare file name), builds a
+ * Blob URL, and plays it in a native `<video controls>` element. The file
+ * name comes from the result's presentation meta when the dispatch was
+ * top-level, and is recovered from the "Saved video to …" text line for
+ * nested (Code Mode) dispatches, where the harness computes no meta. A result
+ * with neither renders its text; an error result renders the first error line.
+ *
+ * The 'tool.call.toolview' SlotMap entry is declared by
+ * ImageGenerateToolview.tsx in this same package (one declaration per
+ * augmentation), so this file only mirrors the owner-props shape.
+ */
+import { useEffect, useState } from 'react';
+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 video loader over the `/subscriptions-auth` `video` endpoint.
+ * @param rpc - Connection RPC caller.
+ * @returns loader resolving a bare file name to the decoded bytes.
+ */
+export function createVideoLoader(rpc) {
+    return name => call(rpc, 'video', { name });
+}
+/**
+ * English-dictionary fallback for a missing locale seat (standalone renders);
+ * the framework always supplies the namespace-bound one.
+ */
+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 fallback body 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');
+}
+/**
+ * The generated video's bare file name: presentation meta first (top-level
+ * dispatches), then the render text's "Saved video to …" line (nested
+ * dispatches compute no meta).
+ */
+function resolveFileName(block) {
+    if (!('kind' in block))
+        return undefined;
+    const meta = block.meta;
+    if (typeof meta === 'object' && meta !== null) {
+        const fileName = meta.fileName;
+        if (typeof fileName === 'string' && fileName.length > 0)
+            return fileName;
+    }
+    const match = /^Saved video to (.+\.mp4)/m.exec(resultText(block));
+    if (match === null)
+        return undefined;
+    const path = match[1];
+    return path.slice(path.lastIndexOf('/') + 1);
+}
+/** Decode a base64 payload into bytes (browser-side; no Buffer). */
+function base64Bytes(dataBase64) {
+    const binary = atob(dataBase64);
+    const bytes = new Uint8Array(binary.length);
+    for (let index = 0; index < binary.length; index++)
+        bytes[index] = binary.charCodeAt(index);
+    return bytes;
+}
+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)' },
+    video: {
+        display: 'block', maxWidth: 480, width: '100%', borderRadius: 8,
+        backgroundColor: 'var(--dsw-alias-fill-tertiary)',
+    },
+};
+/**
+ * The `video_generate` keyed toolview component.
+ * @param props - owner share, inject face, and locale seat (spread flat).
+ * @returns the call row plus, once settled, the player / text / error body.
+ */
+export function VideoGenerateToolview(props) {
+    const { block, loadVideo } = props;
+    const t = props.t ?? fallbackTranslate;
+    const settled = block !== undefined && 'kind' in block;
+    const isError = settled && block.isError;
+    const fileName = block !== undefined && settled && !isError ? resolveFileName(block) : undefined;
+    const [load, setLoad] = useState({ phase: 'loading' });
+    useEffect(() => {
+        if (fileName === undefined || loadVideo === undefined)
+            return;
+        let cancelled = false;
+        let objectUrl;
+        setLoad({ phase: 'loading' });
+        loadVideo(fileName).then((video) => {
+            if (cancelled)
+                return;
+            // Uint8Array#slice detaches a plain ArrayBuffer view for BlobPart.
+            objectUrl = URL.createObjectURL(new Blob([base64Bytes(video.dataBase64).slice()], { type: video.mediaType }));
+            setLoad({ phase: 'ready', url: objectUrl });
+        }, (error) => {
+            if (cancelled)
+                return;
+            setLoad({ phase: 'failed', message: error instanceof Error ? error.message : String(error) });
+        });
+        return () => {
+            cancelled = true;
+            if (objectUrl !== undefined)
+                URL.revokeObjectURL(objectUrl);
+        };
+    }, [fileName, loadVideo]);
+    if (block === undefined)
+        return null;
+    const argsRaw = (settled ? block.call?.argsRaw : 'argsRaw' in block ? block.argsRaw : undefined) ?? '';
+    const title = `video_generate: ${derivePrompt(argsRaw)}`;
+    const text = settled ? resultText(block) : '';
+    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('generatingVideo') }), settled && isError && text !== '' && (_jsx("p", { style: styles.error, children: text.split('\n', 1)[0] })), settled && !isError && fileName !== undefined && load.phase === 'loading' && (_jsx("p", { style: styles.subtle, children: t('videoLoading') })), settled && !isError && fileName !== undefined && load.phase === 'failed' && (_jsx("p", { style: styles.error, children: t('videoLoadFailed', { message: load.message }) })), settled && !isError && fileName !== undefined && load.phase === 'ready' && (
+            // eslint-disable-next-line jsx-a11y/media-has-caption -- generated clip; no caption track exists.
+            _jsx("video", { style: styles.video, src: load.url, controls: true, preload: "metadata" })), settled && !isError && fileName === undefined && text !== '' && (_jsx("p", { style: styles.output, children: text }))] }));
+}

package/lib/client/context.d.ts

@@ -0,0 +1,16 @@
+import type { ConnectionHandle } from '@deepseek-ai/dsh-api-remotes/client';
+import type { ProviderId, UsagePreferencesView } from './prefs.js';
+import type { SubscriptionsStore, StoreSnapshot } from './store.js';
+import type { T } from './meter.js';
+import type { PrefsStore } from './prefs.js';
+export interface SurfaceInjected {
+    store: SubscriptionsStore;
+    prefs: PrefsStore;
+    rpc: ConnectionHandle['rpc'];
+    t: T;
+    /** Open Settings at the Models page, when the shell offers it. */
+    openSettings?: () => void;
+}
+export declare function useStore(store: SubscriptionsStore): StoreSnapshot;
+export declare function usePrefs(prefs: PrefsStore): UsagePreferencesView;
+export type { ProviderId };

package/lib/client/context.js

@@ -0,0 +1,11 @@
+/**
+ * What every surface receives through slot `inject`: the shared store, the
+ * RPC caller, the copy function, and the usage preferences form.
+ */
+import { useSyncExternalStore } from 'react';
+export function useStore(store) {
+    return useSyncExternalStore(store.subscribe, store.getSnapshot);
+}
+export function usePrefs(prefs) {
+    return useSyncExternalStore(prefs.subscribe, prefs.getSnapshot);
+}

package/lib/client/fast-command.d.ts

@@ -0,0 +1,2 @@
+/** Build the locale resolver used by the /fast command contribution. */
+export declare function fastCommandDescription(t: () => string): () => string;

package/lib/client/fast-command.js

@@ -0,0 +1,4 @@
+/** Build the locale resolver used by the /fast command contribution. */
+export function fastCommandDescription(t) {
+    return () => t();
+}

package/lib/client/hooks.d.ts

@@ -0,0 +1,2 @@
+/** The current time, re-read every `intervalMs`, so countdowns advance without a fetch. */
+export declare function useNow(intervalMs: number): number;

package/lib/client/hooks.js

@@ -0,0 +1,10 @@
+import { useEffect, useState } from 'react';
+/** The current time, re-read every `intervalMs`, so countdowns advance without a fetch. */
+export function useNow(intervalMs) {
+    const [now, setNow] = useState(() => Date.now());
+    useEffect(() => {
+        const timer = setInterval(() => { setNow(Date.now()); }, intervalMs);
+        return () => { clearInterval(timer); };
+    }, [intervalMs]);
+    return now;
+}

package/lib/client/index.d.ts

@@ -0,0 +1,3 @@
+import type { Context as ClientContext } from '@deepseek-ai/cordis';
+export declare const inject: string[];
+export declare function apply(ctx: ClientContext): void;