dsh-subscriptions 0.2.0 → 0.2.3

package/lib/client/UsageBadgeDisplaySetting.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { setUsageBadgeMode, useUsageBadgeMode } from './usage-badge-preferences.js';
-import { isUsageColorPreset, setUsageColorPreset, useUsageColorPreset } from './usage-color-preferences.js';
+import { setUsageBadgeMode, useUsageBadgeMode, } from './usage-badge-preferences.js';
+import { isUsageColorPreset, setUsageColorPreset, useUsageColorPreset, } from './usage-color-preferences.js';
 /** Browser-local display preference; never changes provider or account settings. */
 export function UsageBadgeDisplaySetting({ t }) {
     const mode = useUsageBadgeMode();
     const preset = useUsageColorPreset();
     const [failed, setFailed] = useState(false);
-    return (_jsxs("div", { style: styles.card, children: [_jsxs("label", { style: styles.field, children: [_jsx("span", { children: t('usageBadgeDisplay') }), _jsxs("select", { style: styles.select, "aria-label": t('usageBadgeDisplay'), value: mode, onChange: event => {
+    return (_jsxs("div", { style: styles.card, children: [_jsxs("label", { style: styles.field, children: [_jsx("span", { children: t('usageBadgeDisplay') }), _jsxs("select", { style: styles.select, "aria-label": t('usageBadgeDisplay'), value: mode, onChange: (event) => {
                             const value = event.currentTarget.value;
                             if (value !== 'recent' && value !== 'always' && value !== 'hidden')
                                 return;
@@ -16,11 +16,12 @@ export function UsageBadgeDisplaySetting({ t }) {
                                 setFailed(false);
                             }
                             catch (error) {
-                                if (!(error instanceof DOMException) || !['SecurityError', 'QuotaExceededError'].includes(error.name))
+                                if (!(error instanceof DOMException) ||
+                                    !['SecurityError', 'QuotaExceededError'].includes(error.name))
                                     throw error;
                                 setFailed(true);
                             }
-                        }, children: [_jsx("option", { value: "recent", children: t('usageBadgeDisplayRecent') }), _jsx("option", { value: "always", children: t('usageBadgeDisplayAlways') }), _jsx("option", { value: "hidden", children: t('usageBadgeDisplayHidden') })] })] }), _jsx("p", { style: styles.hint, children: t('usageBadgeDisplayHint') }), _jsxs("label", { style: styles.field, children: [_jsx("span", { children: t('usageColorLabel') }), _jsxs("select", { style: styles.select, "aria-label": t('usageColorLabel'), value: preset, onChange: event => {
+                        }, children: [_jsx("option", { value: "recent", children: t('usageBadgeDisplayRecent') }), _jsx("option", { value: "always", children: t('usageBadgeDisplayAlways') }), _jsx("option", { value: "hidden", children: t('usageBadgeDisplayHidden') })] })] }), _jsx("p", { style: styles.hint, children: t('usageBadgeDisplayHint') }), _jsxs("label", { style: styles.field, children: [_jsx("span", { children: t('usageColorLabel') }), _jsxs("select", { style: styles.select, "aria-label": t('usageColorLabel'), value: preset, onChange: (event) => {
                             const value = event.currentTarget.value;
                             if (!isUsageColorPreset(value))
                                 return;
@@ -29,21 +30,43 @@ export function UsageBadgeDisplaySetting({ t }) {
                                 setFailed(false);
                             }
                             catch (error) {
-                                if (!(error instanceof DOMException) || !['SecurityError', 'QuotaExceededError'].includes(error.name))
+                                if (!(error instanceof DOMException) ||
+                                    !['SecurityError', 'QuotaExceededError'].includes(error.name))
                                     throw error;
                                 setFailed(true);
                             }
-                        }, children: [_jsx("option", { value: "standard", children: t('usageColorStandard') }), _jsx("option", { value: "relaxed", children: t('usageColorRelaxed') }), _jsx("option", { value: "remaining", children: t('usageColorRemaining') })] })] }), _jsx("p", { style: styles.hint, children: t(preset === 'remaining' ? 'usageColorRemainingHint' : 'usageColorPaceHint', {
+                        }, children: [_jsx("option", { value: "standard", children: t('usageColorStandard') }), _jsx("option", { value: "relaxed", children: t('usageColorRelaxed') }), _jsx("option", { value: "remaining", children: t('usageColorRemaining') })] })] }), _jsx("p", { style: styles.hint, children: t(preset === 'remaining'
+                    ? 'usageColorRemainingHint'
+                    : 'usageColorPaceHint', {
                     allowance: preset === 'relaxed' ? 15 : 10,
-                }) }), failed && _jsx("p", { role: "alert", style: { ...styles.hint, color: 'var(--dsw-alias-state-error-primary)' }, children: t('usageBadgeDisplaySaveFailed') })] }));
+                }) }), failed && (_jsx("p", { role: "alert", style: {
+                    ...styles.hint,
+                    color: 'var(--dsw-alias-state-error-primary)',
+                }, children: t('usageBadgeDisplaySaveFailed') }))] }));
 }
 const styles = {
     card: {
         border: '0.5px solid var(--dsw-alias-settings-card-stroke, var(--dsw-alias-border-l4))',
-        borderRadius: 'var(--dsw-radius-xl, 20px)', background: 'var(--dsw-alias-settings-card-fill, var(--dsw-alias-bg-layer-2))',
-        padding: '12px 14px', display: 'flex', flexDirection: 'column', gap: 6,
+        borderRadius: 'var(--dsw-radius-xl, 20px)',
+        background: 'var(--dsw-alias-settings-card-fill, var(--dsw-alias-bg-layer-2))',
+        padding: '12px 14px',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 6,
+    },
+    field: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 6,
+        fontSize: 13,
+        fontWeight: 500,
+        lineHeight: '20px',
     },
-    field: { display: 'flex', flexDirection: 'column', gap: 6, fontSize: 13, fontWeight: 500, lineHeight: '20px' },
     select: { width: '100%' },
-    hint: { margin: 0, fontSize: 12, lineHeight: '18px', color: 'var(--dsw-alias-label-tertiary)' },
+    hint: {
+        margin: 0,
+        fontSize: 12,
+        lineHeight: '18px',
+        color: 'var(--dsw-alias-label-tertiary)',
+    },
 };

package/lib/client/UsageMeter.d.ts

@@ -1,7 +1,7 @@
 import type { CSSProperties } from 'react';
 import type { UsageWindow, SubscriptionsSectionInjected } from './SubscriptionsSection.js';
 import type { UsageObservation } from './usage-pace.js';
-export declare function UsageMeter({ window: quota, t, style, observedAt, stale }: {
+export declare function UsageMeter({ window: quota, t, style, observedAt, stale, }: {
     window: UsageWindow;
     t: SubscriptionsSectionInjected['t'];
     style?: CSSProperties;

package/lib/client/UsageMeter.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
-import { displayStartPercent, elapsedPercent, isUsageFresh, resetCountdownParts, usageBarColor, usageColorState, validUsage } from './usage-pace.js';
+import { displayStartPercent, elapsedPercent, isUsageFresh, resetCountdownParts, usageBarColor, usageColorState, validUsage, } from './usage-pace.js';
 import { useUsageColorPreset } from './usage-color-preferences.js';
 /** Singular/plural locale keys per countdown unit (zh maps both to one string). */
 const UNIT_KEYS = {
@@ -8,7 +8,7 @@ const UNIT_KEYS = {
     hour: ['usageUnitHour', 'usageUnitHours'],
     minute: ['usageUnitMinute', 'usageUnitMinutes'],
 };
-export function UsageMeter({ window: quota, t, style, observedAt, stale }) {
+export function UsageMeter({ window: quota, t, style, observedAt, stale, }) {
     const preset = useUsageColorPreset();
     const [now, setNow] = useState(Date.now);
     useEffect(() => {
@@ -31,30 +31,68 @@ export function UsageMeter({ window: quota, t, style, observedAt, stale }) {
     const state = usageColorState(quota.usedPercent, pace, preset, fresh);
     const lead = pace === undefined ? 0 : Math.round(used - pace);
     const label = [
-        valid ? t('usageMeterUsed', { used: Math.round(used), remaining: Math.round(100 - used) }) : t('usageMeterInvalid'),
+        valid
+            ? t('usageMeterUsed', {
+                used: Math.round(used),
+                remaining: Math.round(100 - used),
+            })
+            : t('usageMeterInvalid'),
         // An invalid reading already states unavailability; the stale line would repeat it.
-        !valid ? '' : !fresh ? t('usageMeterStale') : state === 'red' ? t('usageMeterNearLimit')
-            : pace === undefined && preset !== 'remaining' ? t('usageMeterUnknownTime')
-                : state === 'yellow' ? t('usageMeterAhead') : t('usageMeterNoWarning'),
+        !valid
+            ? ''
+            : !fresh
+                ? t('usageMeterStale')
+                : state === 'red'
+                    ? t('usageMeterNearLimit')
+                    : pace === undefined && preset !== 'remaining'
+                        ? t('usageMeterUnknownTime')
+                        : state === 'yellow'
+                            ? t('usageMeterAhead')
+                            : t('usageMeterNoWarning'),
         // The elapsed-time line is a timing fact: it shows whenever the window's
         // interval is known, even for a stale or invalid reading.
-        marker === undefined ? '' : t('usageMeterPace', { elapsed: Math.round(marker) }),
-        pace === undefined ? '' : lead > 0 ? t('usageMeterPaceAhead', { points: lead })
-            : lead < 0 ? t('usageMeterPaceBehind', { points: -lead }) : t('usageMeterPaceEven'),
-        quota.resetsAt !== undefined && quota.resetsAt > current ? t('usageMeterReset', {
-            duration: resetCountdownParts(quota.resetsAt - current)
-                .map(part => t(UNIT_KEYS[part.unit][part.count === 1 ? 0 : 1], { count: part.count }))
-                .join(' '),
-        }) : '',
-    ].filter(Boolean).join(' · ');
-    return _jsxs("div", { role: "img", "aria-label": label, title: label, "data-usage-color": state, style: {
-            height: 6, borderRadius: 3, overflow: 'hidden',
-            background: 'var(--dsw-alias-bg-layer-1)', border: '1px solid var(--dsw-alias-border-l2)',
-            ...style, position: 'relative',
-        }, children: [_jsx("div", { style: { height: '100%', borderRadius: 'inherit', width: `${used}%`,
-                    background: usageBarColor(quota.usedPercent, pace, preset, fresh) } }), marker !== undefined && _jsx("span", { "aria-hidden": "true", "data-usage-time-marker": true, style: {
-                    position: 'absolute', left: `clamp(0px, calc(${marker}% - 1px), calc(100% - 2px))`,
-                    top: 0, bottom: 0, width: 2, background: 'var(--dsw-alias-label-primary)',
+        marker === undefined
+            ? ''
+            : t('usageMeterPace', { elapsed: Math.round(marker) }),
+        pace === undefined
+            ? ''
+            : lead > 0
+                ? t('usageMeterPaceAhead', { points: lead })
+                : lead < 0
+                    ? t('usageMeterPaceBehind', { points: -lead })
+                    : t('usageMeterPaceEven'),
+        quota.resetsAt !== undefined && quota.resetsAt > current
+            ? t('usageMeterReset', {
+                duration: resetCountdownParts(quota.resetsAt - current)
+                    .map((part) => t(UNIT_KEYS[part.unit][part.count === 1 ? 0 : 1], {
+                    count: part.count,
+                }))
+                    .join(' '),
+            })
+            : '',
+    ]
+        .filter(Boolean)
+        .join(' · ');
+    return (_jsxs("div", { role: "img", "aria-label": label, title: label, "data-usage-color": state, style: {
+            height: 6,
+            borderRadius: 3,
+            overflow: 'hidden',
+            background: 'var(--dsw-alias-bg-layer-1)',
+            border: '1px solid var(--dsw-alias-border-l2)',
+            ...style,
+            position: 'relative',
+        }, children: [_jsx("div", { style: {
+                    height: '100%',
+                    borderRadius: 'inherit',
+                    width: `${used}%`,
+                    background: usageBarColor(quota.usedPercent, pace, preset, fresh),
+                } }), marker !== undefined && (_jsx("span", { "aria-hidden": "true", "data-usage-time-marker": true, style: {
+                    position: 'absolute',
+                    left: `clamp(0px, calc(${marker}% - 1px), calc(100% - 2px))`,
+                    top: 0,
+                    bottom: 0,
+                    width: 2,
+                    background: 'var(--dsw-alias-label-primary)',
                     boxShadow: '0 0 0 1px var(--dsw-alias-bg-layer-1)',
-                } })] });
+                } }))] }));
 }

package/lib/client/VideoGenerateToolview.js

@@ -29,7 +29,7 @@ const PROMPT_MAX_LENGTH = 60;
  * @returns loader resolving a bare file name to the decoded bytes.
  */
 export function createVideoLoader(rpc) {
-    return name => callSubscriptionsAuth(rpc, 'video', { name });
+    return (name) => callSubscriptionsAuth(rpc, 'video', { name });
 }
 /**
  * English-dictionary fallback for a missing locale seat (standalone renders);
@@ -67,7 +67,9 @@ function derivePrompt(argsRaw) {
         }
     }
     const line = (prompt ?? argsRaw).split('\n', 1)[0] ?? '';
-    return line.length > PROMPT_MAX_LENGTH ? `${line.slice(0, PROMPT_MAX_LENGTH)}…` : line;
+    return line.length > PROMPT_MAX_LENGTH
+        ? `${line.slice(0, PROMPT_MAX_LENGTH)}…`
+        : line;
 }
 /** Flatten a settled result's text blocks (the fallback body and the error line). */
 function resultText(block) {
@@ -111,21 +113,51 @@ function base64Bytes(dataBase64) {
     return bytes;
 }
 const styles = {
-    container: { display: 'flex', flexDirection: 'column', gap: 6, padding: '4px 0' },
+    container: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 6,
+        padding: '4px 0',
+    },
     row: { display: 'flex', alignItems: 'center', gap: 6, minWidth: 0 },
-    icon: { display: 'inline-flex', flexShrink: 0, color: 'var(--dsw-alias-label-tertiary)' },
+    icon: {
+        display: 'inline-flex',
+        flexShrink: 0,
+        color: 'var(--dsw-alias-label-tertiary)',
+    },
     title: {
-        fontSize: 13, lineHeight: '20px', color: 'var(--dsw-alias-label-primary)',
-        overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
+        fontSize: 13,
+        lineHeight: '20px',
+        color: 'var(--dsw-alias-label-primary)',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+    },
+    subtle: {
+        margin: 0,
+        fontSize: 12,
+        lineHeight: '18px',
+        color: 'var(--dsw-alias-label-tertiary)',
     },
-    subtle: { margin: 0, fontSize: 12, lineHeight: '18px', color: 'var(--dsw-alias-label-tertiary)' },
     output: {
-        margin: 0, fontSize: 12, lineHeight: '18px', color: 'var(--dsw-alias-label-secondary)',
-        whiteSpace: 'pre-wrap', overflowWrap: 'anywhere',
+        margin: 0,
+        fontSize: 12,
+        lineHeight: '18px',
+        color: 'var(--dsw-alias-label-secondary)',
+        whiteSpace: 'pre-wrap',
+        overflowWrap: 'anywhere',
+    },
+    error: {
+        margin: 0,
+        fontSize: 12,
+        lineHeight: '18px',
+        color: 'var(--dsw-alias-state-error-primary)',
     },
-    error: { margin: 0, fontSize: 12, lineHeight: '18px', color: 'var(--dsw-alias-state-error-primary)' },
     video: {
-        display: 'block', maxWidth: 480, width: '100%', borderRadius: 8,
+        display: 'block',
+        maxWidth: 480,
+        width: '100%',
+        borderRadius: 8,
         backgroundColor: 'var(--dsw-alias-bg-skeleton)',
     },
 };
@@ -139,7 +171,9 @@ export function VideoGenerateToolview(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 fileName = block !== undefined && settled && !isError
+        ? resolveFileName(block)
+        : undefined;
     const [load, setLoad] = useState({ phase: 'loading' });
     useEffect(() => {
         if (fileName === undefined || loadVideo === undefined)
@@ -151,12 +185,17 @@ export function VideoGenerateToolview(props) {
             if (cancelled)
                 return;
             // Uint8Array#slice detaches a plain ArrayBuffer view for BlobPart.
-            objectUrl = URL.createObjectURL(new Blob([base64Bytes(video.dataBase64).slice()], { type: video.mediaType }));
+            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) });
+            setLoad({
+                phase: 'failed',
+                message: error instanceof Error ? error.message : String(error),
+            });
         });
         return () => {
             cancelled = true;
@@ -166,10 +205,23 @@ export function VideoGenerateToolview(props) {
     }, [fileName, loadVideo]);
     if (block === undefined)
         return null;
-    const argsRaw = (settled ? block.call?.argsRaw : block.phase === 'start' ? block.argsRaw : undefined) ?? '';
+    const argsRaw = (settled
+        ? block.call?.argsRaw
+        : block.phase === 'start'
+            ? 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(SparkleIcon, { 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.
+    return (_jsxs("div", { style: styles.container, children: [_jsxs("div", { style: styles.row, children: [_jsx("span", { style: styles.icon, children: _jsx(SparkleIcon, { size: 14 }) }), _jsx("span", { style: styles.title, children: title })] }), !settled && _jsx("p", { style: styles.subtle, children: t('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' && (
+            // 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/account-preferences.d.ts

@@ -1,4 +1,5 @@
 import type { AccountPreferences, ProviderPreferences } from '../provider-settings.js';
+import type { PromptCacheTtl } from '../translate/anthropic.js';
 export interface AccountCatalogRow {
     key: string;
     label: string;
@@ -20,5 +21,12 @@ export declare function accountModelRows(account: AccountCatalogRow, preferences
 }[];
 /** The model editor owns everything except the separately managed accounts. */
 export declare function mergeLatestAccounts(draft: ProviderPreferences, latest: ProviderPreferences): ProviderPreferences;
+/**
+ * The account manager owns the Claude prompt-cache TTL picker. The model
+ * editor's draft carries the TTL it loaded, so the dialog always replaces it
+ * with the picker's choice when touched, or the freshly re-read value
+ * otherwise.
+ */
+export declare function mergePromptCacheTtl(settings: ProviderPreferences, promptCacheTtl: PromptCacheTtl | undefined): ProviderPreferences;
 /** Only touched accounts replace their latest preferences; other settings survive. */
 export declare function mergeAccountChanges(latest: ProviderPreferences, changes: Record<string, AccountPreferences>): ProviderPreferences;

package/lib/client/account-preferences.js

@@ -1,19 +1,34 @@
 /** Missing allowlist follows discovery; explicit [] must remain empty. */
 export function accountPoolSelection(account, models) {
-    return new Set(account.poolModels ?? models.map(model => model.id));
+    return new Set(account.poolModels ?? models.map((model) => model.id));
 }
 /** Retain unavailable saved IDs so a temporary catalog failure cannot erase them. */
 export function accountModelRows(account, preferences) {
-    const known = new Set(account.models.map(model => model.id));
+    const known = new Set(account.models.map((model) => model.id));
     return [
-        ...account.models.map(model => ({ ...model, unavailable: false })),
-        ...(preferences.poolModels ?? []).filter(id => !known.has(id)).map(id => ({ id, name: id, unavailable: true })),
+        ...account.models.map((model) => ({ ...model, unavailable: false })),
+        ...(preferences.poolModels ?? [])
+            .filter((id) => !known.has(id))
+            .map((id) => ({ id, name: id, unavailable: true })),
     ];
 }
 /** The model editor owns everything except the separately managed accounts. */
 export function mergeLatestAccounts(draft, latest) {
     const { accounts: _stale, ...settings } = draft;
-    return { ...settings, ...(latest.accounts === undefined ? {} : { accounts: latest.accounts }) };
+    return {
+        ...settings,
+        ...(latest.accounts === undefined ? {} : { accounts: latest.accounts }),
+    };
+}
+/**
+ * The account manager owns the Claude prompt-cache TTL picker. The model
+ * editor's draft carries the TTL it loaded, so the dialog always replaces it
+ * with the picker's choice when touched, or the freshly re-read value
+ * otherwise.
+ */
+export function mergePromptCacheTtl(settings, promptCacheTtl) {
+    const { promptCacheTtl: _stale, ...rest } = settings;
+    return promptCacheTtl === undefined ? rest : { ...rest, promptCacheTtl };
 }
 /** Only touched accounts replace their latest preferences; other settings survive. */
 export function mergeAccountChanges(latest, changes) {

package/lib/client/host-contract.d.ts

@@ -62,9 +62,16 @@ export declare const HOST_CONTRACT: {
     };
     /** DOM attributes the client looks up in host-rendered markup. */
     readonly markers: {
-        /** The shipped StatsPills row; the usage badge renders into it as a third pill. */
+        /**
+         * Stats pill anchors, by role. `row` is the shared stats row through DSH
+         * 0.2.0; the badge portals into it. `dock` is the per-pill anchor from
+         * 0.2.1; the badge stays in its dock entry and stops watching once that
+         * anchor is in scope. A host renders one of them. The package check
+         * accepts either spelling; callers read `row` and `dock` by name.
+         */
         readonly composerStats: {
-            readonly attribute: "data-composer-stats";
+            readonly row: "data-composer-stats";
+            readonly dock: "data-composer-stat";
             readonly package: "@deepseek-ai/dsh-client-ui-chat";
         };
     };
@@ -88,3 +95,5 @@ export declare const HOST_CONTRACT: {
 };
 /** A glyph name listed in {@link HOST_CONTRACT}; hostIcon() accepts no other. */
 export type HostIconName = (typeof HOST_CONTRACT.icons.names)[number];
+/** Attribute selector for a host DOM marker (`data-composer-stats` → `[data-composer-stats]`). */
+export declare function markerSelector(attribute: string): string;

package/lib/client/host-contract.js

@@ -30,7 +30,10 @@ export const HOST_CONTRACT = {
     moduleTable: '@deepseek-ai/dsh-web-frontend',
     /** Named runtime exports the client reads from a host module. */
     exports: {
-        '@deepseek-ai/dsh-client-ui-primitives': ['useAnchoredPosition', 'useDismissOnOutsidePointer'],
+        '@deepseek-ai/dsh-client-ui-primitives': [
+            'useAnchoredPosition',
+            'useDismissOnOutsidePointer',
+        ],
     },
     /**
      * 16px glyphs read through hostIcon(). The host must export
@@ -62,8 +65,18 @@ export const HOST_CONTRACT = {
     },
     /** DOM attributes the client looks up in host-rendered markup. */
     markers: {
-        /** The shipped StatsPills row; the usage badge renders into it as a third pill. */
-        composerStats: { attribute: 'data-composer-stats', package: '@deepseek-ai/dsh-client-ui-chat' },
+        /**
+         * Stats pill anchors, by role. `row` is the shared stats row through DSH
+         * 0.2.0; the badge portals into it. `dock` is the per-pill anchor from
+         * 0.2.1; the badge stays in its dock entry and stops watching once that
+         * anchor is in scope. A host renders one of them. The package check
+         * accepts either spelling; callers read `row` and `dock` by name.
+         */
+        composerStats: {
+            row: 'data-composer-stats',
+            dock: 'data-composer-stat',
+            package: '@deepseek-ai/dsh-client-ui-chat',
+        },
     },
     /**
      * What the slot renderer emits when an entry throws. It catches the error,
@@ -122,3 +135,7 @@ export const HOST_CONTRACT = {
         ],
     },
 };
+/** Attribute selector for a host DOM marker (`data-composer-stats` → `[data-composer-stats]`). */
+export function markerSelector(attribute) {
+    return `[${attribute}]`;
+}

package/lib/client/index.d.ts

@@ -1,10 +1,10 @@
 import type { Context as ClientContext } from '@deepseek-ai/cordis';
 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 { SubscriptionUsageBadgeInjected, SubscriptionUsageBadgeProps } from './SubscriptionUsageBadge.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 { SubscriptionUsageBadgeInjected, SubscriptionUsageBadgeProps, } from './SubscriptionUsageBadge.js';
 export type { SubscriptionsKey } from './locales.js';
 declare module '@deepseek-ai/dsh-client-ui-slots' {
     interface LocaleNamespaceMap {

package/lib/client/index.js

@@ -2,10 +2,10 @@
 // allowImportingTsExtensions/rewriteRelativeImportExtensions pair; under
 // nodenext the .js specifier resolves to the .tsx source (see README note).
 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 { SubscriptionUsageBadge, createCurrentModelReader } from './SubscriptionUsageBadge.js';
+import { ImageGenerateToolview, createImageLoader, } from './ImageGenerateToolview.js';
+import { VideoGenerateToolview, createVideoLoader, } from './VideoGenerateToolview.js';
+import { SpeedSelect, createModelSelectionWatch, createSpeedLoader, createSpeedSetter, notifySpeedChanged, } from './SpeedSelect.js';
+import { SubscriptionUsageBadge, createCurrentModelReader, } from './SubscriptionUsageBadge.js';
 import { en, zh } from './locales.js';
 import { fastCommandDescription } from './fast-command.js';
 /** Dictionary namespace owned by this plugin. */
@@ -31,7 +31,8 @@ export function apply(ctx) {
     ctx.effect(() => {
         const style = document.createElement('style');
         style.setAttribute('data-plugin', 'dsh-subscriptions');
-        style.textContent = 'div[role="dialog"][aria-modal="true"]:has(> nav) { padding-top: 14px; }';
+        style.textContent =
+            'div[role="dialog"][aria-modal="true"]:has(> nav) { padding-top: 14px; }';
         document.head.appendChild(style);
         return () => style.remove();
     }, 'dsh-subscriptions: settings panel breathing room');
@@ -39,7 +40,10 @@ export function apply(ctx) {
     // browser shell the same key holds the full client ConnectionHandle.
     const connection = ctx.get('connection');
     const t = ctx.locale.bind(NS);
-    const injected = () => ({ rpc: connection.rpc, t });
+    const injected = () => ({
+        rpc: connection.rpc,
+        t,
+    });
     ctx.slots.inject('settings.section', () => ctx.slots.register({
         name: 'settings.section',
         id: 'subscriptions',
@@ -51,7 +55,9 @@ export function apply(ctx) {
     // The image_generate keyed toolview owns how image calls render inline; its
     // gallery bytes ride the same channel through the injected loader. The
     // framework synthesizes the toolview's own `t` seat from `locale: NS`.
-    const toolviewInjected = () => ({ load: createImageLoader(connection.rpc) });
+    const toolviewInjected = () => ({
+        load: createImageLoader(connection.rpc),
+    });
     ctx.slots.inject('tool.call.toolview', () => ctx.slots.register({
         name: 'tool.call.toolview',
         key: 'image_generate',
@@ -60,7 +66,9 @@ export function apply(ctx) {
     }, ImageGenerateToolview));
     // The video_generate keyed toolview plays the saved MP4 inline; its bytes
     // ride the same channel's `video` endpoint through the injected loader.
-    const videoToolviewInjected = () => ({ loadVideo: createVideoLoader(connection.rpc) });
+    const videoToolviewInjected = () => ({
+        loadVideo: createVideoLoader(connection.rpc),
+    });
     ctx.slots.inject('tool.call.toolview', () => ctx.slots.register({
         name: 'tool.call.toolview',
         key: 'video_generate',
@@ -81,6 +89,7 @@ export function apply(ctx) {
         inject: (sessionId) => ({
             loadSpeed: createSpeedLoader(connection, models, sessionId),
             setSpeed: createSpeedSetter(connection, sessionId),
+            watchModel: createModelSelectionWatch(models, sessionId),
         }),
     }, SpeedSelect));
     // The subscription usage badge renders a stats pill in the composer's dock
@@ -123,12 +132,25 @@ export function apply(ctx) {
                     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 }));
+                        {
+                            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);
+                    const wrote = await createSpeedSetter(connection, session.sessionId)(option.id);
+                    if (wrote)
+                        notifySpeedChanged();
                 },
             },
         }), 'dsh-subscriptions: /fast contribution');