dsh-plugin-subscriptions 0.4.2 → 0.5.1

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

@@ -1,6 +1,6 @@
 import type { ConnectionHandle } from '@deepseek-ai/dsh-api-remotes/client';
 import type { ToolCallBlock } from '@deepseek-ai/dsh-client-runtime/client';
-import type { ImageLoader } from '@deepseek-ai/dsh-client-ui-attachment';
+import type { ImageLoader } from './ImageGallery.js';
 import type { SubscriptionsKey } from './locales.js';
 /** Mirror of ui-tool's ToolCallOwnerProps (see the module header). */
 interface ToolCallOwnerProps {

package/lib/client/ImageGenerateToolview.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { IconSparkle16 } from '@deepseek-ai/dsh-client-ui-primitives';
-import { ImageGallery } from '@deepseek-ai/dsh-client-ui-attachment';
+import { ImageGallery } from './ImageGallery.js';
 import { en } from './locales.js';
 /** Logical RPC channel served by the node half of this plugin. */
 const SUBSCRIPTIONS_AUTH_CHANNEL = '/subscriptions-auth';
@@ -133,5 +133,5 @@ export function ImageGenerateToolview(props) {
         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(IconSparkle16, { 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, align: "start", labels: labels })), settled && !block.isError && images.length === 0 && text !== '' && (_jsx("p", { style: styles.output, children: text }))] }));
+    return (_jsxs("div", { style: styles.container, children: [_jsxs("div", { style: styles.row, children: [_jsx("span", { style: styles.icon, children: _jsx(IconSparkle16, { 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/SpeedSelect.d.ts

@@ -0,0 +1,48 @@
+import type { PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots';
+import type { ConnectionHandle } from '@deepseek-ai/dsh-api-remotes/client';
+/** One session's speed choice: standard routing or the fast (priority) tier. */
+export type SpeedTier = 'standard' | 'fast';
+/** `speed` endpoint value, mirrored from the node half. */
+export interface SpeedState {
+    tier: SpeedTier;
+    fastModels: string[];
+}
+/** What {@link SpeedSelect} renders from: visibility plus the current tier. */
+export interface SpeedSelectState {
+    visible: boolean;
+    tier: SpeedTier;
+}
+/** Injected dependencies of {@link SpeedSelect} (slot `inject`, session-bound). */
+export interface SpeedSelectInjected {
+    /** Load the session's speed state; `visible` false keeps the control hidden. */
+    loadSpeed: () => Promise<SpeedSelectState>;
+    /** Set the session's speed tier; resolves false when the write failed. */
+    setSpeed: (tier: SpeedTier) => Promise<boolean>;
+}
+/**
+ * Props delivered by the slot outlet: the framework session kit and InputZone
+ * owner share (unused — everything arrives session-bound through the inject
+ * face), the injected callbacks, and the locale seat.
+ */
+export type SpeedSelectProps = PropsRuntime<'conversation.input.right'> & Partial<SpeedSelectInjected> & Partial<PropsLocale<'settings.subscriptions'>>;
+/**
+ * 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 API-client boundary needs one.
+ */
+export declare function createSpeedLoader(connection: ConnectionHandle, sessionId: string): SpeedSelectInjected['loadSpeed'];
+/** The `setSpeed` half of the inject face: boolean outcome for the component's busy state. */
+export declare function createSpeedSetter(connection: ConnectionHandle, sessionId: string): SpeedSelectInjected['setSpeed'];
+/**
+ * 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 declare function SpeedSelect({ loadSpeed, setSpeed, t }: SpeedSelectProps): import("react").JSX.Element | null;

package/lib/client/SpeedSelect.js

@@ -0,0 +1,173 @@
+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
+ * 'settings.subscriptions' namespace, same as the settings section.
+ */
+import { useEffect, useRef, useState } from 'react';
+import { callSubscriptionsAuth } from './SubscriptionsSection.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 API-client boundary needs one.
+ */
+export function createSpeedLoader(connection, sessionId) {
+    return async () => {
+        const state = await callSubscriptionsAuth(connection.rpc, 'speed', { sessionId });
+        const { result } = await connection.api.sessions.models({ sessionId: sessionId });
+        if (!result.ok)
+            throw new Error(`session.models failed: ${result.error.code}: ${result.error.message}`);
+        const current = result.value.current;
+        const visible = current !== null && current.provider === 'codex'
+            && state.fastModels.includes(current.model);
+        return { visible, tier: state.tier };
+    };
+}
+/** The `setSpeed` half of the inject face: boolean outcome for the component's busy state. */
+export function createSpeedSetter(connection, sessionId) {
+    return tier => callSubscriptionsAuth(connection.rpc, 'setSpeed', { sessionId, tier })
+        .then(() => true, () => false);
+}
+/** 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;
+    useEffect(() => {
+        if (loadRef.current === undefined)
+            return;
+        let cancelled = false;
+        let inflight = false;
+        const reload = () => {
+            const load = loadRef.current;
+            if (load === undefined || inflight)
+                return;
+            inflight = true;
+            void load().then((loaded) => { if (!cancelled)
+                setState(loaded); }, () => { }).finally(() => { inflight = false; });
+        };
+        reload();
+        const timer = setInterval(reload, POLL_INTERVAL_MS);
+        return () => {
+            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).then((ok) => {
+            setBusy(false);
+            if (ok) {
+                setState({ visible: true, tier });
+                setOpen(false);
+            }
+        });
+    };
+    const show = () => {
+        setOpen(true);
+        const load = loadRef.current;
+        if (load === undefined)
+            return;
+        void load().then(setState, () => { });
+    };
+    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, 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: '1px solid var(--dsw-alias-border-l2)', borderRadius: 8,
+        background: '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-alias-bg-layer-1)', border: '1px solid var(--dsw-alias-border-l2)',
+        borderRadius: 8, display: 'flex', flexDirection: 'column', gap: 2,
+    },
+    item: {
+        display: 'flex', alignItems: 'flex-start', gap: 6, width: '100%',
+        border: 'none', borderRadius: 6, background: '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/SubscriptionsSection.d.ts

@@ -1,7 +1,7 @@
 import type { ConnectionHandle } from '@deepseek-ai/dsh-api-remotes/client';
 import type { SubscriptionsKey } from './locales.js';
 /** Subscription provider ids, fixed by the node half's OAuth adapters. */
-export type SubscriptionProvider = 'codex' | 'claude' | 'grok';
+export type SubscriptionProvider = 'codex' | 'claude' | 'grok' | 'copilot';
 /** One provider's login state as answered by the `status` endpoint. */
 export interface ProviderStatus {
     loggedIn: boolean;
@@ -35,6 +35,15 @@ export interface SubscriptionsSectionInjected {
  * renderer erases the share boundary at the render call).
  */
 export type SubscriptionsSectionProps = Partial<SubscriptionsSectionInjected>;
+/**
+ * Call one `/subscriptions-auth` endpoint and unwrap the business result.
+ * Shared by the settings section and the composer Speed toggle.
+ * @param rpc - Connection RPC caller.
+ * @param endpoint - channel-relative endpoint.
+ * @param payload - channel-owned request payload.
+ * @returns the success value, cast by the caller to the endpoint's shape.
+ */
+export declare function callSubscriptionsAuth<T>(rpc: ConnectionHandle['rpc'], endpoint: string, payload: unknown): Promise<T>;
 /**
  * The Subscriptions settings page component.
  * @param props - the slot inject face ({@link SubscriptionsSectionInjected}).

package/lib/client/SubscriptionsSection.js

@@ -24,18 +24,20 @@ const PROVIDERS = [
     { id: 'codex', name: 'Codex (ChatGPT)' },
     { id: 'claude', name: 'Claude' },
     { id: 'grok', name: 'Grok (X Premium)' },
+    { id: 'copilot', name: 'GitHub Copilot' },
 ];
 /** Business error returned by the `/subscriptions-auth` channel (error branch message). */
 class SubscriptionsAuthError extends Error {
 }
 /**
  * Call one `/subscriptions-auth` endpoint and unwrap the business result.
+ * Shared by the settings section and the composer Speed toggle.
  * @param rpc - Connection RPC caller.
  * @param endpoint - channel-relative endpoint.
  * @param payload - channel-owned request payload.
  * @returns the success value, cast by the caller to the endpoint's shape.
  */
-async function callSubscriptionsAuth(rpc, endpoint, payload) {
+export async function callSubscriptionsAuth(rpc, endpoint, payload) {
     let result;
     try {
         result = await rpc.call(SUBSCRIPTIONS_AUTH_CHANNEL, endpoint, payload);
@@ -121,6 +123,15 @@ const styles = {
         padding: '0 10px', font: 'inherit', fontSize: 14, lineHeight: '22px',
         background: 'var(--dsw-alias-bg-layer-1)', color: 'var(--dsw-alias-label-primary)',
     },
+    deviceCode: {
+        marginTop: 4, display: 'flex', flexDirection: 'column', gap: 6,
+        border: '1px solid var(--dsw-alias-border-l2)', borderRadius: 8,
+        padding: '10px 12px', background: 'var(--dsw-alias-bg-layer-1)',
+    },
+    deviceCodeText: {
+        fontFamily: 'monospace', fontSize: 18, lineHeight: '24px', letterSpacing: 2,
+        color: 'var(--dsw-alias-label-primary)', userSelect: 'all',
+    },
 };
 /** Status dot color for one provider state. */
 function dotColor(status) {
@@ -188,8 +199,11 @@ export function SubscriptionsSection(props) {
     const [statuses, setStatuses] = useState({});
     const [errors, setErrors] = useState({});
     const [manualDrafts, setManualDrafts] = useState({
-        codex: '', claude: '', grok: '',
+        codex: '', claude: '', grok: '', copilot: '',
     });
+    /** Pending device-flow codes (copilot), shown while the attempt polls. */
+    const [deviceCodes, setDeviceCodes] = useState({});
+    const [copiedCode, setCopiedCode] = useState(undefined);
     const [usages, setUsages] = useState({});
     const [usageErrors, setUsageErrors] = useState({});
     const [usageLoading, setUsageLoading] = useState({});
@@ -234,8 +248,17 @@ export function SubscriptionsSection(props) {
         setStatuses(response.providers);
         for (const { id } of PROVIDERS) {
             const status = response.providers[id];
-            if (status.loggedIn || !status.busy)
+            if (status.loggedIn || !status.busy) {
                 stopPolling(id);
+                // The attempt settled (success, timeout, or cancel): drop the code card.
+                setDeviceCodes((prev) => {
+                    if (prev[id] === undefined)
+                        return prev;
+                    const next = { ...prev };
+                    delete next[id];
+                    return next;
+                });
+            }
         }
     }, [rpc, stopPolling]);
     const startPolling = useCallback((provider) => {
@@ -331,11 +354,18 @@ export function SubscriptionsSection(props) {
             if (typeof response.authorizeUrl !== 'string') {
                 throw new SubscriptionsAuthError(t('loginMissingUrl'));
             }
-            window.open(response.authorizeUrl, '_blank', 'noopener');
             if (!mountedRef.current)
                 return;
             // Optimistic busy so Cancel and the manual fallback appear before the first poll tick.
             setStatuses(prev => ({ ...prev, [provider]: { ...prev[provider], busy: true, loggedIn: false } }));
+            if (typeof response.userCode === 'string' && response.userCode.length > 0) {
+                // Device flow: show the code card instead of opening the page blind —
+                // the user copies the code first, then opens the verification page.
+                setDeviceCodes(prev => ({ ...prev, [provider]: { userCode: response.userCode, verificationUrl: response.authorizeUrl } }));
+            }
+            else {
+                window.open(response.authorizeUrl, '_blank', 'noopener');
+            }
             startPolling(provider);
         }
         catch (error) {
@@ -385,12 +415,25 @@ export function SubscriptionsSection(props) {
         }
         await refresh();
     }, [rpc, t, setProviderError, refresh]);
+    const copyDeviceCode = useCallback((provider, userCode) => {
+        void navigator.clipboard?.writeText(userCode).then(() => {
+            if (!mountedRef.current)
+                return;
+            setCopiedCode(provider);
+            setTimeout(() => {
+                if (mountedRef.current) {
+                    setCopiedCode(current => current === provider ? undefined : current);
+                }
+            }, 1500);
+        }).catch(() => undefined);
+    }, []);
     if (rpc === undefined) {
         return _jsx("p", { style: styles.intro, children: t('unavailable') });
     }
     return (_jsxs("div", { style: styles.section, children: [_jsx("p", { style: styles.intro, children: t('intro') }), PROVIDERS.map(({ id, name }) => {
                 const status = statuses[id];
                 const busy = status?.busy === true;
+                const deviceCode = deviceCodes[id];
                 const usage = usages[id];
                 const usageError = usageErrors[id];
                 // Providers without a usage endpoint answer supported:false — no block.
@@ -400,6 +443,6 @@ export function SubscriptionsSection(props) {
                                     const percent = Math.min(100, Math.max(0, window.usedPercent));
                                     return (_jsxs("div", { style: styles.usageRow, children: [_jsxs("div", { style: styles.usageMeta, children: [_jsx("span", { children: usageWindowLabel(t, window) }), _jsxs("span", { children: [`${String(Math.round(percent))}%`, window.resetsAt !== undefined
                                                                 && ` · ${t('usageResets', { date: new Date(window.resetsAt).toLocaleString() })}`] })] }), _jsx("div", { style: styles.usageTrack, children: _jsx("div", { style: { ...styles.usageFill, width: `${String(percent)}%`, background: usageBarColor(percent) } }) })] }, index));
-                                })] })), busy && (_jsxs("details", { style: styles.manual, children: [_jsx("summary", { children: t('manualSummary') }), _jsxs("div", { style: styles.manualRow, children: [_jsx("input", { style: styles.manualInput, value: manualDrafts[id], placeholder: t('manualPlaceholder'), onChange: event => setManualDrafts(prev => ({ ...prev, [id]: event.target.value })) }), _jsx("button", { type: "button", style: styles.button, onClick: () => { void submitManual(id); }, children: t('submit') })] })] }))] }, id));
+                                })] })), busy && deviceCode !== undefined && (_jsxs("div", { style: styles.deviceCode, children: [_jsx("span", { style: styles.statusLine, children: t('deviceCodePrompt') }), _jsx("span", { style: styles.deviceCodeText, children: deviceCode.userCode }), _jsxs("div", { style: styles.actions, children: [_jsx("button", { type: "button", style: styles.button, onClick: () => { copyDeviceCode(id, deviceCode.userCode); }, children: copiedCode === id ? t('deviceCodeCopied') : t('deviceCodeCopy') }), _jsx("button", { type: "button", style: styles.button, onClick: () => { window.open(deviceCode.verificationUrl, '_blank', 'noopener'); }, children: t('deviceCodeOpenPage') })] })] })), busy && deviceCode === undefined && (_jsxs("details", { style: styles.manual, children: [_jsx("summary", { children: t('manualSummary') }), _jsxs("div", { style: styles.manualRow, children: [_jsx("input", { style: styles.manualInput, value: manualDrafts[id], placeholder: t('manualPlaceholder'), onChange: event => setManualDrafts(prev => ({ ...prev, [id]: event.target.value })) }), _jsx("button", { type: "button", style: styles.button, onClick: () => { void submitManual(id); }, children: t('submit') })] })] }))] }, id));
             })] }));
 }

package/lib/client/index.d.ts

@@ -11,6 +11,7 @@ import type { SubscriptionsKey } from './locales.js';
 export type { SubscriptionsSectionInjected, SubscriptionsSectionProps } from './SubscriptionsSection.js';
 export type { ImageGenerateToolviewInjected, ImageGenerateToolviewProps } from './ImageGenerateToolview.js';
 export type { VideoGenerateToolviewInjected, VideoGenerateToolviewProps } from './VideoGenerateToolview.js';
+export type { SpeedSelectInjected, SpeedSelectProps, SpeedState, SpeedTier } from './SpeedSelect.js';
 export type { SubscriptionsKey } from './locales.js';
 declare module '@deepseek-ai/dsh-client-ui-slots' {
     interface LocaleNamespaceMap {

package/lib/client/index.js

@@ -4,6 +4,7 @@
 import { SubscriptionsSection } from './SubscriptionsSection.js';
 import { ImageGenerateToolview, createImageLoader } from './ImageGenerateToolview.js';
 import { VideoGenerateToolview, createVideoLoader } from './VideoGenerateToolview.js';
+import { SpeedSelect, createSpeedLoader, createSpeedSetter } from './SpeedSelect.js';
 import { en, zh } from './locales.js';
 /** Dictionary namespace owned by this plugin. */
 const NS = 'settings.subscriptions';
@@ -53,4 +54,45 @@ export function apply(ctx) {
         locale: NS,
         inject: videoToolviewInjected,
     }, VideoGenerateToolview));
+    // The composer Speed toggle (codex fast tier) sits in the right tool row,
+    // just left of the model selector; the framework synthesizes its `t` seat
+    // from `locale: NS`, and the inject face binds each session's RPC calls.
+    ctx.slots.inject('conversation.input.right', () => ctx.slots.register({
+        name: 'conversation.input.right',
+        id: 'codex-speed',
+        order: 0,
+        locale: NS,
+        inject: (sessionId) => ({
+            loadSpeed: createSpeedLoader(connection, sessionId),
+            setSpeed: createSpeedSetter(connection, sessionId),
+        }),
+    }, SpeedSelect));
+    // The /fast slash command offers the same Standard/Fast choice as a popup.
+    // `available` is synchronous and sees only the session id, so the command
+    // stays listed everywhere; `options` throws the friendly gate when the
+    // session's current model is not a fast-capable codex model (the same
+    // in-popup error posture the /model contribution uses for its guards).
+    ctx.inject(['commandUi'], (scope) => {
+        const command = scope.get('commandUi');
+        scope.effect(() => command.register({
+            name: 'fast',
+            description: t('commandFast'),
+            available: () => true,
+            ui: {
+                kind: 'popupSelect',
+                options: async (session) => {
+                    const state = await createSpeedLoader(connection, session.sessionId)();
+                    if (!state.visible)
+                        throw new Error(t('commandFastUnavailable'));
+                    return [
+                        { id: 'standard', label: t('speedStandard'), detail: t('speedStandardDescription') },
+                        { id: 'fast', label: t('speedFast'), detail: t('speedFastDescription') },
+                    ].map(option => ({ ...option, active: option.id === state.tier }));
+                },
+                onSelect: async (option, session) => {
+                    await createSpeedSetter(connection, session.sessionId)(option.id);
+                },
+            },
+        }), 'dsh-plugin-subscriptions: /fast contribution');
+    });
 }