dsh-plugin-subscription-oauth 0.8.14 → 0.8.15

package/lib/auth/provider-controller.js

@@ -86,16 +86,17 @@ export class ProviderController {
     }
     /** Current state of the route. */
     async status() {
-        // Keep the access token current while a user is looking at the card, so the
-        // expiry it shows is the live one rather than a stamp that lapsed minutes
-        // after login. Refreshing is de-duplicated per account by the token manager,
-        // and a failure must never make `status` itself fail.
-        await this.refreshIfLapsing();
+        // A status read must never trigger a network request: the settings page polls it,
+        // and a refresh here would mean every poll is a token call. The token is refreshed
+        // lazily when a request actually needs it (or by discover/usage below).
         const accounts = await this.options.store.list();
         const defaultAccount = await this.options.store.defaultAccount();
         const pending = this.options.flow.pending();
         const keys = Object.keys(accounts);
         const spec = this.options.spec;
+        // A stored token within its life is reported as fresh; a lapsed one reads as expired
+        // until a real request refreshes it. This is honest (the stored expiry is what we
+        // know) and avoids a network call on every status poll.
         return {
             provider: spec.id,
             displayName: spec.displayName,
@@ -147,7 +148,7 @@ export class ProviderController {
         }
         catch (error) {
             this.lastRefreshError = error;
-            if (isReauthRequired(error)) {
+            if (isReauthRequired(error) || isDeadGrant(messageOf(error))) {
                 this.lastError = `${this.displayName} sign-in has lapsed; connect again`;
             }
         }
@@ -226,6 +227,8 @@ export class ProviderController {
             await this.options.store.save(account ?? accountKeyOf(settled), settled);
             this.lastError = undefined;
             // A fresh login can reveal models this build has not seen yet.
+            // Discovery uses the stored token directly (no resolve), so it never opens
+            // the browser from here.
             await this.discover(true);
         }
         catch (error) {
@@ -297,21 +300,22 @@ export class ProviderController {
         // every startup would be noise.
         if (!await this.options.store.hasAny())
             return this.status();
-        // The catalog is the union of every signed-in account's live list, because one
-        // model id draws on the whole pool: a model any account can serve must appear, and
-        // which account answers at call time is the scheduler's choice. A model only the
-        // non-default account has is offered, then may fall through to it on dispatch.
+        // Discovery resolves tokens to read the model list, but a resolve must never
+        // open the browser: a transient network failure, or a token the endpoint refuses
+        // while still being within its stored expiry, is not a signal to start a login.
+        // Only an explicit user action (the connect button) opens the consent page.
         const discovered = [];
         for (const account of Object.keys(await this.options.store.list())) {
-            let accessToken;
-            try {
-                accessToken = (await this.options.tokens.resolve(account)).accessToken;
-            }
-            catch (error) {
-                this.options.onWarn?.(`${spec.id} model discovery for ${account} skipped: ${messageOf(error)}`);
+            let session = await this.options.store.get(account);
+            if (session === undefined)
+                continue;
+            // A token that is still within its stored expiry is used as-is; a lapsed one
+            // is a silent skip (the route works, the catalog is just not refreshed).
+            if (session.expiresAt <= Date.now()) {
+                this.options.onWarn?.(`${spec.id} model discovery for ${account} skipped: token expired`);
                 continue;
             }
-            const ids = await spec.discover(accessToken);
+            const ids = await spec.discover(session.accessToken);
             if (ids !== undefined) {
                 for (const id of ids)
                     if (!discovered.includes(id))

package/lib/auth/tokens.js

@@ -55,7 +55,7 @@ export class TokenManager {
                 : `${this.options.displayName} account ${account} is not signed in`, REAUTH_REQUIRED);
         }
         const { account: key, session } = found;
-        if (!force && Date.now() + this.preemptMs < session.expiresAt) {
+        if (!force && Date.now() < session.expiresAt) {
             return { account: key, accessToken: session.accessToken, expiresAt: session.expiresAt };
         }
         const refreshed = await this.refresh(key, session);

package/lib/client/FastModeButton.d.ts

@@ -0,0 +1,50 @@
+/**
+ * The composer's quick-mode button.
+ *
+ * The route's own fast/lightspeed variant is not a row in the model picker: it shares its
+ * base model's visibility and is reached from here. The composer renders
+ * `conversation.input.right` immediately before its model seat, so this button sits at
+ * the model selector's left — the control a reader looks for when they want the same
+ * model, faster.
+ *
+ * Off, the selection is the base model and pressing the button selects the fast variant.
+ * On, the selection *is* the fast variant, so the button reports active and pressing it
+ * returns to the base — which is why `model-variants` answers from both sides of the pair
+ * rather than only from the base id.
+ *
+ * The button renders nothing when the model has no fast variant, when the route is not
+ * one this plugin serves, or when the host exposes no way to change the selection: an
+ * absent control is honest, a disabled one is noise.
+ *
+ * @module dsh-plugin-subscription-oauth/client/FastModeButton
+ */
+import type { ReactNode } from 'react';
+import type { SessionStandardProps } from '@deepseek-ai/dsh-client-ui-slots';
+import type { SubscriptionsCall } from './subscriptions-rpc.js';
+/** Injected props the button is registered with. */
+export interface FastModeButtonInjected {
+    /** The plugin's own RPC caller, for the one `model-variants` read. */
+    call: SubscriptionsCall;
+    /** Whether the provider is one this plugin serves. */
+    isOwnProvider: (provider: string) => boolean;
+    /**
+     * The session's model directory, when the host exposes one.
+     *
+     * Written when the button switches between a model and its fast variant. Absent on a
+     * host without it, in which case the button renders nothing.
+     */
+    modelDirectory?: {
+        /** Select one model; resolves when the picker has accepted it. */
+        select?: (selection: {
+            provider: string;
+            model: string;
+        }) => Promise<unknown>;
+    } | undefined;
+}
+/**
+ * The quick-mode control, for the composer's row of standard controls.
+ *
+ * @param props - injected RPC caller, directory, and the session standard kit.
+ * @returns the button, or null when this model has no fast variant.
+ */
+export declare function FastModeButton({ call, isOwnProvider, modelDirectory, useProjection }: FastModeButtonInjected & SessionStandardProps): ReactNode;

package/lib/client/FastModeButton.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * The composer's quick-mode button.
+ *
+ * The route's own fast/lightspeed variant is not a row in the model picker: it shares its
+ * base model's visibility and is reached from here. The composer renders
+ * `conversation.input.right` immediately before its model seat, so this button sits at
+ * the model selector's left — the control a reader looks for when they want the same
+ * model, faster.
+ *
+ * Off, the selection is the base model and pressing the button selects the fast variant.
+ * On, the selection *is* the fast variant, so the button reports active and pressing it
+ * returns to the base — which is why `model-variants` answers from both sides of the pair
+ * rather than only from the base id.
+ *
+ * The button renders nothing when the model has no fast variant, when the route is not
+ * one this plugin serves, or when the host exposes no way to change the selection: an
+ * absent control is honest, a disabled one is noise.
+ *
+ * @module dsh-plugin-subscription-oauth/client/FastModeButton
+ */
+import { useEffect, useState } from 'react';
+import { providerOf } from './UsageChip.js';
+import { fastModeCss } from './styles.js';
+/**
+ * The quick-mode control, for the composer's row of standard controls.
+ *
+ * @param props - injected RPC caller, directory, and the session standard kit.
+ * @returns the button, or null when this model has no fast variant.
+ */
+export function FastModeButton({ call, isOwnProvider, modelDirectory, useProjection }) {
+    const [pair, setPair] = useState(undefined);
+    // A switch that the host refuses must not look like a dead button: the reason is kept
+    // and shown, because the only alternative is a control that silently does nothing.
+    const [failure, setFailure] = useState(undefined);
+    const [pending, setPending] = useState(false);
+    const selection = useProjection('modelSelection', (value) => value);
+    const provider = providerOf(selection);
+    const model = selection?.next?.model ?? selection?.lastUsed?.model;
+    useEffect(() => {
+        if (provider === undefined || model === undefined || !isOwnProvider(provider)) {
+            setPair(undefined);
+            return;
+        }
+        let live = true;
+        void call('model-variants', { provider, id: model })
+            .then((result) => {
+            if (!live)
+                return;
+            setPair(result?.fast === undefined
+                ? undefined
+                : { wireId: result.fast, ...result.fastBase === undefined ? {} : { baseId: result.fastBase } });
+        })
+            .catch(() => { if (live)
+            setPair(undefined); });
+        return () => { live = false; };
+    }, [provider, model, isOwnProvider, call]);
+    // A switch that landed clears the reason, so the marker follows the truth on screen.
+    useEffect(() => { setFailure(undefined); }, [model]);
+    if (pair === undefined || provider === undefined || modelDirectory?.select === undefined)
+        return null;
+    const active = pair.wireId === model;
+    const target = active ? pair.baseId : pair.wireId;
+    // Active without a base to return to would be a control that cannot switch anything off.
+    if (target === undefined || target === model)
+        return null;
+    const base = active
+        ? 'Fast mode is on; press to go back to the standard model'
+        : 'Fast mode: switch to the fast variant of this model';
+    const title = failure === undefined
+        ? base
+        : `${base}\nThe switch was refused — ${`${failure.code ?? ''} ${failure.message}`.trim()}`;
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: fastModeCss }), _jsxs("button", { type: "button", className: "dsh-subscription-fast-mode", "data-active": active, "data-pending": pending, "data-failed": failure !== undefined, "aria-pressed": active, "aria-busy": pending, title: title, "aria-label": title, onClick: (event) => {
+                    event.stopPropagation();
+                    setPending(true);
+                    setFailure(undefined);
+                    void Promise.resolve(modelDirectory.select?.({ provider, model: target }))
+                        .then((result) => {
+                        // The directory reports its own outcome: a refused selection carries why.
+                        const outcome = result;
+                        if (outcome?.ok !== false)
+                            return;
+                        const code = outcome.error?.code;
+                        const message = outcome.error?.message ?? code ?? 'the host refused the selection';
+                        setFailure({ ...code === undefined ? {} : { code }, message });
+                        console.warn(`[subscription-oauth] fast mode ${provider}/${target} refused:`, outcome.error);
+                    })
+                        .catch((error) => {
+                        setFailure({ message: error instanceof Error ? error.message : String(error) });
+                        console.warn(`[subscription-oauth] fast mode ${provider}/${target} failed:`, error);
+                    })
+                        .finally(() => { setPending(false); });
+                }, children: [_jsx("svg", { className: "dsh-subscription-fast-mode-bolt", viewBox: "0 0 24 24", width: "16", height: "16", "aria-hidden": "true", fill: "none", children: _jsx("path", { d: "M13 2 3.6 13.2a1.2 1.2 0 0 0 .92 1.98H11l-.86 6.42a1.2 1.2 0 0 0 2.2.7L21.4 10.6a1.2 1.2 0 0 0-.92-1.98H13l.86-6.42A1.2 1.2 0 0 0 13 2z", fill: "currentColor", stroke: "currentColor", strokeWidth: "1.2", strokeLinejoin: "round" }) }), failure !== undefined && (_jsx("span", { className: "dsh-subscription-fast-mode-reason", children: failure.code ?? failure.message }))] })] }));
+}

package/lib/client/UsageChip.js

@@ -299,7 +299,8 @@ export function UsageChip({ call, t, isOwnProvider, accountBalance, ccSwitchBala
     const lastOwn = useRef(undefined);
     // A projection read, so the chip follows the picker: changing the model re-renders it
     // with the new provider instead of waiting for the next unrelated render.
-    const selected = useProjection('modelSelection', (value) => providerOf(value));
+    const selection = useProjection('modelSelection', (value) => value);
+    const selected = providerOf(selection);
     // A non-subscription provider has no usage windows to meter, so the chip shows its
     // balance instead, read by cc-switch's query. The host's account (deepseek-account)
     // has its own balance source and takes that over cc-switch; a subscription this plugin

package/lib/client/index.d.ts

@@ -11,6 +11,7 @@
 import type { Context as ClientContext } from '@deepseek-ai/cordis';
 import type { SubscriptionsKey } from './locales.js';
 export type { SubscriptionsSectionInjected, SubscriptionsSectionProps } from './SubscriptionsSection.js';
+export type { FastModeButtonInjected } from './FastModeButton.js';
 export type { UsageChipInjected } from './UsageChip.js';
 export type { SubscriptionsKey } from './locales.js';
 export { createSubscriptionsCall, SubscriptionsRpcError } from './subscriptions-rpc.js';
@@ -33,6 +34,16 @@ declare module '@deepseek-ai/dsh-client-ui-slots' {
             kind: 'list';
             scope: 'session';
         };
+        /**
+         * The composer's row of compact controls, rendered immediately before its model seat.
+         *
+         * The shell declares it as a session-scoped list; this plugin's quick-mode button is
+         * one entry, which is what puts it at the model selector's left.
+         */
+        'conversation.input.right': {
+            kind: 'list';
+            scope: 'session';
+        };
     }
     /**
      * The session standard kit, of which this plugin reads one member.
@@ -49,7 +60,9 @@ declare module '@deepseek-ai/dsh-client-ui-slots' {
 }
 /**
  * Required services: `slots` carries the registration seat, `connection` the
- * RPC caller, and `locale` the copy dictionaries.
+ * RPC caller, `locale` the copy dictionaries, and `modelDirectories` the picker's
+ * per-session model directory (written when the quick-mode button routes to a fast
+ * variant).
  */
 export declare const inject: string[];
 /**

package/lib/client/index.js

@@ -9,6 +9,7 @@
  * @module dsh-plugin-subscription-oauth/client
  */
 import { SubscriptionsSection } from './SubscriptionsSection.js';
+import { FastModeButton } from './FastModeButton.js';
 import { UsageChip } from './UsageChip.js';
 import { createSubscriptionsCall, createAccountBalanceCall, createCcSwitchBalanceCall } from './subscriptions-rpc.js';
 import { en, zh } from './locales.js';
@@ -31,11 +32,18 @@ const SECTION_ORDER = 92;
  * chip follows them rather than displacing them.
  */
 const CHIP_ORDER = 10;
+/**
+ * Composer-control position: ahead of the shell's own entries in that row, if it ever
+ * adds any, so the quick-mode button stays adjacent to the model selector it belongs to.
+ */
+const FAST_MODE_ORDER = 10;
 /**
  * Required services: `slots` carries the registration seat, `connection` the
- * RPC caller, and `locale` the copy dictionaries.
+ * RPC caller, `locale` the copy dictionaries, and `modelDirectories` the picker's
+ * per-session model directory (written when the quick-mode button routes to a fast
+ * variant).
  */
-export const inject = ['slots', 'connection', 'locale'];
+export const inject = ['slots', 'connection', 'locale', 'modelDirectories'];
 /**
  * Register the Subscriptions settings section.
  *
@@ -51,6 +59,9 @@ export function apply(ctx) {
     const connection = ctx.get('connection');
     const t = ctx.locale.bind(NS);
     const call = createSubscriptionsCall(connection.rpc);
+    // Read once: the resolver is a service, and the per-session directory is resolved at
+    // registration time (see `modelDirectoryFor`).
+    const modelDirectories = ctx.get('modelDirectories');
     ctx.slots.inject('settings.section', () => ctx.slots.register({
         name: 'settings.section',
         id: 'subscriptions',
@@ -75,4 +86,37 @@ export function apply(ctx) {
             ccSwitchBalance: createCcSwitchBalanceCall(connection.rpc),
         }),
     }, UsageChip));
+    // The composer renders this seat immediately before its model selector, so the
+    // quick-mode button lands at the picker's left. It renders nothing unless the current
+    // model really has a fast variant, so a route without one shows no control at all.
+    ctx.slots.inject('conversation.input.right', () => ctx.slots.register({
+        name: 'conversation.input.right',
+        id: 'subscription-fast-mode',
+        order: FAST_MODE_ORDER,
+        inject: (sessionId) => ({
+            call,
+            isOwnProvider: (provider) => OWN_PROVIDER_IDS.has(provider),
+            modelDirectory: modelDirectoryFor(modelDirectories, sessionId),
+        }),
+    }, FastModeButton));
+}
+/**
+ * The session's model directory, in the shape the quick-mode button writes through.
+ *
+ * Absent when the host exposes no directory for the session, or exposes one that cannot
+ * select — in which case the button renders nothing rather than a dead control.
+ *
+ * @param modelDirectories - the host's directory resolver, when it has one.
+ * @param sessionId - the session whose directory is wanted.
+ * @returns the reader/writer pair, or undefined.
+ */
+function modelDirectoryFor(modelDirectories, sessionId) {
+    if (sessionId === undefined || modelDirectories?.directoryFor === undefined)
+        return undefined;
+    const directory = modelDirectories.directoryFor(sessionId);
+    if (directory?.select === undefined)
+        return undefined;
+    return {
+        select: (selection) => directory.select?.(selection) ?? Promise.resolve(),
+    };
 }

package/lib/client/styles.d.ts

@@ -30,3 +30,11 @@ export declare const subscriptionsCss = "\n.dsh-subscriptions-settings,\n.dsh-su
  * define it.
  */
 export declare const usageChipCss = "\n.dsh-subscription-usage-chip {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  /* The bar is a centred flex row whose children are this slot's entries followed by the\n     shell's context meter, and a list slot renders its entries as bare children (no\n     wrapper). So the chip is itself a flex item: a higher order places it after the\n     context meter, and no auto margin is set, so it sits immediately beside it rather\n     than being pushed to the edge of the bar. */\n  order: 1;\n  min-width: 0;\n  font-family: inherit;\n  font-size: 12px;\n  line-height: 1;\n}\n.dsh-subscription-usage-chip-trigger {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  margin: 0;\n  padding: 2px 6px;\n  border: 0;\n  border-radius: var(--dsw-radius-sm, 6px);\n  background: transparent;\n  color: var(--dsw-alias-label-secondary, #8a8f98);\n  font: inherit;\n  cursor: pointer;\n}\n.dsh-subscription-usage-chip-trigger:hover {\n  background: var(--dsw-alias-interactive-bg-hover, #ffffff14);\n}\n.dsh-subscription-usage-chip-trigger:focus-visible {\n  outline: 2px solid var(--dsw-alias-border-focus, #4d6bfe);\n  outline-offset: 1px;\n}\n.dsh-subscription-usage-chip-label {\n  overflow: hidden;\n  max-width: 6ch;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.dsh-subscription-usage-chip-cell {\n  display: inline-flex;\n  align-items: baseline;\n  gap: 2px;\n}\n.dsh-subscription-usage-chip-window {\n  opacity: 0.75;\n}\n.dsh-subscription-usage-chip-value {\n  color: var(--dsw-alias-label-primary, #e8e8e8);\n  font-variant-numeric: tabular-nums;\n}\n.dsh-subscription-usage-chip-account {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  /* A hairline between accounts, so two sign-ins read as two groups not one run. */\n  padding-top: 6px;\n  border-top: 1px solid var(--dsw-alias-border-secondary, #ffffff14);\n}\n.dsh-subscription-usage-chip-account:first-of-type {\n  padding-top: 0;\n  border-top: 0;\n}\n.dsh-subscription-usage-chip-panel {\n  position: absolute;\n  bottom: calc(100% + 6px);\n  right: 0;\n  z-index: 20;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  min-width: 180px;\n  padding: 12px 14px;\n  border: 1px solid var(--dsw-alias-border-secondary, #ffffff1f);\n  border-radius: var(--dsw-radius-md, 10px);\n  background: var(--dsw-alias-bg-layer-2, #26262a);\n  box-shadow: var(--dsw-elevation-prominent, 0 12px 32px #0007);\n  color: var(--dsw-alias-label-primary, #e8e8e8);\n  white-space: nowrap;\n}\n.dsh-subscription-usage-chip-full {\n  font-size: 11px;\n  color: var(--dsw-alias-label-secondary, #8a8f98);\n}\n.dsh-subscription-usage-chip-meter {\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n}\n.dsh-subscription-usage-chip-meterHead {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 12px;\n  font-size: 12px;\n}\n.dsh-subscription-usage-chip-detail {\n  color: var(--dsw-alias-label-secondary, #8a8f98);\n  font-variant-numeric: tabular-nums;\n}\n.dsh-subscription-usage-chip-track {\n  display: block;\n  width: 100%;\n  height: 5px;\n  border-radius: 999px;\n  /* As on the settings meter: an unspent window has to show its track, so the neutral and\n     its ring are explicit rather than a layer token that may match the panel. */\n  background: #8a8f9826;\n  box-shadow: inset 0 0 0 1px #8a8f9833;\n  overflow: hidden;\n}\n.dsh-subscription-usage-chip-fill {\n  display: block;\n  height: 100%;\n  background: var(--dsw-alias-state-success-primary, #067647);\n}\n";
+/**
+ * The composer's quick-mode button stylesheet.
+ *
+ * It renders in the composer's own control row — the same row as the model selector —
+ * so it borrows that row's geometry: a compact, borderless control that only colours on
+ * hover and when the mode is on. Tokens carry fallbacks for hosts that define none.
+ */
+export declare const fastModeCss = "\n.dsh-subscription-fast-mode {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  margin: 0;\n  padding: 3px;\n  border: 0;\n  border-radius: var(--dsw-radius-sm, 6px);\n  background: transparent;\n  color: var(--dsw-alias-label-secondary, #8a8f98);\n  font: inherit;\n  font-size: 12px;\n  line-height: 1;\n  cursor: pointer;\n}\n.dsh-subscription-fast-mode:hover {\n  background: var(--dsw-alias-interactive-bg-hover, #ffffff14);\n}\n/* A click has to look like one, even before the selection lands. */\n.dsh-subscription-fast-mode:active {\n  background: var(--dsw-alias-interactive-bg-pressed, #ffffff2e);\n}\n.dsh-subscription-fast-mode[data-pending=\"true\"] {\n  opacity: 0.7;\n  cursor: progress;\n}\n/* A switch the host refused is marked rather than left looking merely off, so a failure\n   is visible where it happened; the reason rides the title and the console. */\n.dsh-subscription-fast-mode[data-failed=\"true\"] {\n  color: var(--dsw-alias-state-error-primary, #b42318);\n}\n.dsh-subscription-fast-mode:focus-visible {\n  outline: 2px solid var(--dsw-alias-border-focus, #4d6bfe);\n  outline-offset: 1px;\n}\n/* Off: the bolt is dim, so an available mode reads as an invitation, not a state. */\n.dsh-subscription-fast-mode[data-active=\"false\"] .dsh-subscription-fast-mode-bolt {\n  opacity: 0.55;\n}\n/* On: the bolt takes the accent and glows, which is the only thing distinguishing the\n   fast variant from its base \u2014 both answer with the same model name. */\n.dsh-subscription-fast-mode[data-active=\"true\"] .dsh-subscription-fast-mode-bolt {\n  color: var(--dsw-alias-state-warning-primary, #f5a524);\n  filter: drop-shadow(0 0 6px var(--dsw-alias-state-warning-primary, #f5a52455));\n}\n.dsh-subscription-fast-mode-reason {\n  max-width: 14ch;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 11px;\n}\n";

package/lib/client/styles.js

@@ -394,3 +394,64 @@ export const usageChipCss = `
   background: var(--dsw-alias-state-success-primary, #067647);
 }
 `;
+/**
+ * The composer's quick-mode button stylesheet.
+ *
+ * It renders in the composer's own control row — the same row as the model selector —
+ * so it borrows that row's geometry: a compact, borderless control that only colours on
+ * hover and when the mode is on. Tokens carry fallbacks for hosts that define none.
+ */
+export const fastModeCss = `
+.dsh-subscription-fast-mode {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin: 0;
+  padding: 3px;
+  border: 0;
+  border-radius: var(--dsw-radius-sm, 6px);
+  background: transparent;
+  color: var(--dsw-alias-label-secondary, #8a8f98);
+  font: inherit;
+  font-size: 12px;
+  line-height: 1;
+  cursor: pointer;
+}
+.dsh-subscription-fast-mode:hover {
+  background: var(--dsw-alias-interactive-bg-hover, #ffffff14);
+}
+/* A click has to look like one, even before the selection lands. */
+.dsh-subscription-fast-mode:active {
+  background: var(--dsw-alias-interactive-bg-pressed, #ffffff2e);
+}
+.dsh-subscription-fast-mode[data-pending="true"] {
+  opacity: 0.7;
+  cursor: progress;
+}
+/* A switch the host refused is marked rather than left looking merely off, so a failure
+   is visible where it happened; the reason rides the title and the console. */
+.dsh-subscription-fast-mode[data-failed="true"] {
+  color: var(--dsw-alias-state-error-primary, #b42318);
+}
+.dsh-subscription-fast-mode:focus-visible {
+  outline: 2px solid var(--dsw-alias-border-focus, #4d6bfe);
+  outline-offset: 1px;
+}
+/* Off: the bolt is dim, so an available mode reads as an invitation, not a state. */
+.dsh-subscription-fast-mode[data-active="false"] .dsh-subscription-fast-mode-bolt {
+  opacity: 0.55;
+}
+/* On: the bolt takes the accent and glows, which is the only thing distinguishing the
+   fast variant from its base — both answer with the same model name. */
+.dsh-subscription-fast-mode[data-active="true"] .dsh-subscription-fast-mode-bolt {
+  color: var(--dsw-alias-state-warning-primary, #f5a524);
+  filter: drop-shadow(0 0 6px var(--dsw-alias-state-warning-primary, #f5a52455));
+}
+.dsh-subscription-fast-mode-reason {
+  max-width: 14ch;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 11px;
+}
+`;